/*
  scrut-help-center.css — the Help Center tab page (help-center.mdx).

  Not the home page. home.mdx is styled by scrut-home.css, and the cards on it
  by scrut-home-cards.css; this file only ever applies to help-center.mdx.

  Scoped to the Help Center page only via a dedicated identifier: the hero div
  carries id="dai-help-center" (plus the matching class), and both exist only on
  this page (see help-center.mdx). We match either one, so if the editor strips
  the id the class still scopes it, and vice versa. Nothing here can reach any
  other page, including the three guide pages.

  Every declaration carries !important on purpose. The platform ships its own
  article typography (headings, links, paragraphs, inputs, buttons) and Card
  styling at a higher specificity than a bare class selector, so unflagged rules
  silently lose the cascade. This mirrors the approach proven in home.css.

  Cards are the platform <Card> component, not raw HTML. One single card style is
  defined below under [data-component="Card"] and shared by all three sections.

  To make it live: Site Config → Custom CSS → Add Stylesheet → styles/scrut-home.css
  → Publish. It is also registered under "customCss" in documentation.json.
*/


:root:has(#dai-help-center),
:root:has(.dai-help-center) {

  /* ══════════════════════════════════════════════════════════════════
     0. Theme tokens.

     Accent: the source design was Mintlify green. Scrut's brand is purple
     (#695ACC — the same value as "colors.light.brand" in documentation.json).

     Surfaces: every colour below is a token rather than a literal, because
     this page has to survive the theme toggle. The rules force their own
     background, while the platform keeps painting headings and body copy
     from its own theme — in dark mode that produced #F2F2F2 text on a forced
     white card, i.e. invisible titles. The dark block at the bottom of this
     file flips these tokens and nothing else.
     ══════════════════════════════════════════════════════════════════ */

  --hc-brand: var(--scr-purple);
  --hc-brand-strong: #5546b5;

  /* How far left the hero sits relative to true centre. */
  --hc-hero-shift: 30px;

  --hc-bg: var(--scr-white);
  --hc-surface: #f4f6f5;
  --hc-surface-hover: #eceff0;
  --hc-border: #e4e8e6;
  --hc-border-strong: #c9d2cd;
  --hc-heading: #101613;
  --hc-text: #1a1f1c;
  --hc-muted: #5c655f;
  --hc-faint: #8a938e;
  --hc-tag-bg: #f0f2f1;
  --hc-tag-bg-hover: #e6eae8;
  --hc-tag-ink: #414a45;
  --hc-shadow: rgba(16, 22, 19, 0.06);
  --hc-shadow-lg: rgba(16, 22, 19, 0.22);
  --hc-scrim: rgba(16, 22, 19, 0.42);

  /* ══════════════════════════════════════════════════════════════════
     1. Hide the page-level chrome. The top navbar stays.
     ══════════════════════════════════════════════════════════════════ */

  /* Navbar / header — DELIBERATELY LEFT VISIBLE.
     The original standalone design hid it, but this page is a tab inside the
     Scrut docs, so readers need the logo, tab bar, search and Ask AI to get
     back out. Everything else below is still hidden. */

  /* Sidebar */
  .dai-sidebar,
  .dai-sidebar-atlas,
  .dai-sidebar-classic,
  .dai-sidebar-content,
  .dai-sidebar-column,
  .dai-sidebar-mobile,
  .dai-sidebar-tabs,
  .dai-sidebar-menu,
  .dai-sidebar-dropdown { display: none !important; }

  /* Table of contents / right aside */
  .dai-toc,
  .dai-toc-list,
  .dai-toc-actions,
  .dai-page-aside { display: none !important; }

  /* Page furniture */
  .dai-page-header,
  .page-title,
  .page-description,
  .dai-breadcrumbs,
  .dai-page-nav,
  .dai-feedback,
  .dai-footer,
  footer { display: none !important; }

  /* Heading anchor / copy-link icons. The platform renders these as a <span>,
     not a <div>, so the original selector never matched and the icon showed
     on hover. The source design has no anchor affordance. */
  [data-component="Heading"] > div,
  [data-component="Heading"] > span { display: none !important; }

  /* ══════════════════════════════════════════════════════════════════
     2. Reclaim the space the chrome used to occupy.
     ══════════════════════════════════════════════════════════════════ */

  body { background: var(--hc-bg) !important; }

  .dai-layout,
  .dai-layout-atlas,
  .dai-layout-classic,
  .dai-content-area,
  .dai-page,
  .dai-page-main {
    display: block !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--hc-bg) !important;
    grid-template-columns: none !important;
  }

  /* Our own 1160px shell, matching the source design. */
  .dai-article,
  .dai-content-column {
    max-width: 1160px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 24px 96px !important;
    background: var(--hc-bg) !important;
    color: var(--hc-text) !important;
    font-family: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
  }

  /* ══════════════════════════════════════════════════════════════════
     3. Hero (raw HTML, since no component covers a search bar)
     ══════════════════════════════════════════════════════════════════ */

  #dai-help-center *,
  #dai-help-center *::before,
  #dai-help-center *::after { box-sizing: border-box !important; }

  /* The hero centres on the content column, which reads slightly right of
     centre against the card grid below it. --hc-hero-shift is the visual
     nudge in px; padding-right is twice that, because a centred flex column
     only moves by half the padding it is given. Change the one value to
     retune, or set it to 0 to centre the hero again. */
  #dai-help-center .hc-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 40px calc(var(--hc-hero-shift) * 2) 0 0 !important;
  }

  #dai-help-center h1.hc-hero__title {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 40px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
    color: var(--hc-heading) !important;
    border-bottom: none !important;
    text-transform: none !important;
  }

  #dai-help-center p.hc-hero__subtitle {
    margin: 16px 0 0 !important;
    max-width: 480px !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: var(--hc-muted) !important;
  }

  #dai-help-center .hc-hero__actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 40px !important;
  }

  /* ─── Search box ───
     Exact Mintlify values:
       mint-h-11        → 2.75rem (44px)
       mint-rounded-full→ 9999px
       mint-bg-gray-50  → rgb(243,246,244)  (--gray-50: 243 246 244)
       mint-ring-1 mint-ring-gray-100 → box-shadow 0 0 0 1px rgb(238,241,239)
       hover:mint-ring-gray-200       → box-shadow 0 0 0 1px rgb(223,225,224)
       mint-text-gray-500             → rgb(112,115,113) (placeholder)
       dark:mint-bg-white/[0.04]      → rgba(255,255,255,0.04)
       dark:mint-ring-white/[0.08]    → rgba(255,255,255,0.08)
       dark:hover:mint-ring-white/15  → rgba(255,255,255,0.15)
     ─── */

  #dai-help-center .hc-search {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 8px !important;
    width: 420px !important;
    height: 44px !important;
    padding: 0 14px 0 16px !important;
    background: rgb(243, 246, 244) !important;
    border: none !important;
    border-radius: 9999px !important;
    box-shadow: 0 0 0 1px rgb(238, 241, 239) !important;
    cursor: pointer !important;
    transition: box-shadow 0.15s cubic-bezier(.4, 0, .2, 1) !important;
  }

  /* Kill any <p> tags the platform injects inside the search box */
  #dai-help-center .hc-search p,
  #dai-help-center .hc-search span p,
  #dai-help-center .hc-askai p,
  #dai-help-center .hc-askai span p {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #dai-help-center .hc-search:hover {
    box-shadow: 0 0 0 1px rgb(223, 225, 224) !important;
  }

  #dai-help-center .hc-search:focus-visible {
    outline: 2px solid var(--hc-brand) !important;
    outline-offset: 2px !important;
  }

  #dai-help-center .hc-search__icon {
    width: 14px !important;
    height: 14px !important;
    color: var(--hc-heading) !important;
  }

  #dai-help-center .hc-search__placeholder {
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: rgb(112, 115, 113) !important;
    cursor: pointer !important;
    text-align: left !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #dai-help-center .hc-search__kbd {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: rgb(112, 115, 113) !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    line-height: 1.5 !important;
  }

  /* ─── Ask AI ───
     Same pill shape, same gray-50 background, same ring pattern as the
     search box. Sparkle icon uses Scrut's purple brand, not green.
     ─── */

  #dai-help-center .hc-askai {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    height: 44px !important;
    padding: 0 16px !important;
    margin: 0 !important;
    background: rgb(243, 246, 244) !important;
    border: none !important;
    border-radius: 9999px !important;
    box-shadow: 0 0 0 1px rgb(238, 241, 239) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--hc-text) !important;
    font-family: inherit !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: box-shadow 0.15s cubic-bezier(.4, 0, .2, 1) !important;
  }

  #dai-help-center .hc-askai:hover {
    box-shadow: 0 0 0 1px rgb(223, 225, 224) !important;
  }

  /* Sparkle icon — Scrut purple, not Mintlify green. */
  #dai-help-center .hc-askai svg { color: var(--hc-brand) !important; }

  #dai-help-center .hc-askai:focus-visible {
    outline: 2px solid var(--hc-brand) !important;
    outline-offset: 2px !important;
  }

  /* ─── Popular searches ─── */

  #dai-help-center .hc-popular {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 20px !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    color: rgb(112, 115, 113) !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  #dai-help-center .hc-tag {
    font-family: inherit !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    letter-spacing: normal !important;
    color: var(--hc-heading) !important;
    background: rgb(243, 246, 244) !important;
    border: none !important;
    border-radius: 9999px !important;
    box-shadow: 0 0 0 1px rgb(238, 241, 239) !important;
    line-height: 1.5 !important;
    padding: 4px 12px !important;
    cursor: pointer !important;
    transition: box-shadow 0.15s cubic-bezier(.4, 0, .2, 1) !important;
  }

  #dai-help-center .hc-tag:hover {
    box-shadow: 0 0 0 1px rgb(223, 225, 224) !important;
  }

  /* ══════════════════════════════════════════════════════════════════
     4. Section headings and dividers (markdown ## and ---)
     ══════════════════════════════════════════════════════════════════ */

  .dai-article h2 {
    margin: 72px 0 20px !important;
    padding: 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: var(--hc-heading) !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    border-bottom: none !important;
  }

  .dai-article hr {
    height: 1px !important;
    border: none !important;
    background: var(--hc-surface-hover) !important;
    margin: 64px 0 !important;
  }

  /* The divider already supplies the gap above the next heading. */
  .dai-article hr + h2 { margin-top: 0 !important; }

  /* ══════════════════════════════════════════════════════════════════
     5. Cards — ONE single style, shared by all three sections.
     ══════════════════════════════════════════════════════════════════ */

  [data-component="Columns"] {
    gap: 20px !important;
    margin: 0 !important;
  }

  [data-component="Card"] {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    /* The platform's own card body already carries p-5/py-4. Adding padding
       here too double-inset the content and pushed the cards to 206px tall,
       against ~137px in the source design. Let the inner padding stand alone. */
    padding: 0 !important;
    background: var(--hc-bg) !important;
    border: 1px solid var(--hc-border) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  }

  /* Icon beside the text, not above it.
     The platform stacks the icon and the title/description block in a
     `flex flex-col` wrapper. :has() selects exactly that wrapper — the only
     div whose direct child is the Lucide icon — without depending on the
     generated utility class names, which are not a stable API. */
  [data-component="Card"] div:has(> svg.lucide) {
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }

  a:hover [data-component="Card"],
  [data-component="Card"]:hover {
    border-color: var(--hc-border-strong) !important;
    box-shadow: 0 1px 3px var(--hc-shadow) !important;
  }

  /* Icon */
  [data-component="Card"] svg {
    color: var(--hc-brand) !important;
    width: 24px !important;
    height: 24px !important;
  }

  /* Title — no top margin; the icon now sits alongside, not above. */
  [data-component="Card"] .dai-card-title {
    margin-top: 0 !important;
    font-size: 15.5px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    color: var(--hc-heading) !important;
  }

  /* Description */
  [data-component="Card"] .dai-card-description {
    margin-top: 6px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    color: var(--hc-muted) !important;
  }

  /* Card links must not inherit the platform's brand underline. */
  .dai-article a:has([data-component="Card"]) {
    color: inherit !important;
    text-decoration: none !important;
    display: block !important;
    height: 100% !important;
  }

  /* ─── Tablet ─── */
  @media (max-width: 900px) {
    [data-component="Columns"] { grid-template-columns: repeat(2, 1fr) !important; }
  }

  /* ─── Mobile ─── */
  @media (max-width: 720px) {
    .dai-article,
    .dai-content-column { padding: 0 16px 64px !important; }
    /* No room to nudge on a phone — centre it and reclaim the right padding. */
    #dai-help-center .hc-hero { --hc-hero-shift: 0px; padding-top: 0px !important; }
    #dai-help-center h1.hc-hero__title { font-size: 30px !important; }
    #dai-help-center .hc-hero__actions { flex-direction: column !important; width: 100% !important; }
    #dai-help-center .hc-search { width: 100% !important; }
    #dai-help-center .hc-askai { width: 100% !important; justify-content: center !important; }
    [data-component="Columns"] { grid-template-columns: 1fr !important; }
    .dai-article h2 { margin-top: 48px !important; }
  }

  /* ══════════════════════════════════════════════════════════════════
     6. Overlays mounted on <body> by scripts/help-center.js.
        Still inside this :has() block, so they only ever style this page.
     ══════════════════════════════════════════════════════════════════ */

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  }

/* ════════════════════════════════════════════════════════════════════
   DARK THEME

   The platform marks dark mode with `class="dark"` on <html> (it also sets
   color-scheme; there is no data-theme attribute). Both selectors are listed
   so an attribute-based theme would work too.

   Only tokens are redefined here — no layout, no new rules. Values are taken
   from the platform's own dark palette so the page sits flush with the navbar
   rather than glowing white beneath it:
     --background #121212 · --heading #F2F2F2 · --body #C1C1C1
     --border-muted #2a2a2a · --muted #1f1f1f · --brand #0065B3

   Specificity is (0,3,0) against the light block's (0,2,0), so these win
   regardless of source order.
   ════════════════════════════════════════════════════════════════════ */

:root.dark:has(#dai-help-center),
:root.dark:has(.dai-help-center),
:root[data-theme="dark"]:has(#dai-help-center),
:root[data-theme="dark"]:has(.dai-help-center) {

  /* Scrut's dark-mode brand, per "colors.dark.brand". */
  --hc-brand: #0065b3;
  --hc-brand-strong: #0077d1;

  --hc-bg: #121212;
  --hc-surface: #1f1f1f;
  --hc-surface-hover: #272727;
  --hc-border: #2a2a2a;
  --hc-border-strong: #3d3d3d;
  --hc-heading: #f2f2f2;
  --hc-text: #e8e8e8;
  --hc-muted: #c1c1c1;
  --hc-faint: #8f8f8f;
  --hc-tag-bg: #1f1f1f;
  --hc-tag-bg-hover: #2a2a2a;
  --hc-tag-ink: #c1c1c1;
  --hc-shadow: rgba(0, 0, 0, 0.5);
  --hc-shadow-lg: rgba(0, 0, 0, 0.6);
  --hc-scrim: rgba(0, 0, 0, 0.6);

  /* ─── Dark overrides for search / Ask AI / tags ───
     Mintlify dark values:
       dark:mint-bg-white/[0.04]     → rgba(255,255,255,0.04)
       dark:mint-ring-white/[0.08]   → rgba(255,255,255,0.08)
       dark:hover:mint-ring-white/15 → rgba(255,255,255,0.15)
       dark:mint-text-white/50       → rgba(255,255,255,0.5)
     ─── */

  #dai-help-center .hc-search {
    background: rgba(255, 255, 255, 0.04) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  }
  #dai-help-center .hc-search:hover {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15) !important;
  }
  #dai-help-center .hc-search__icon {
    color: #f2f2f2 !important;
  }
  #dai-help-center .hc-search__placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
  }
  #dai-help-center .hc-search__kbd {
    color: rgba(255, 255, 255, 0.5) !important;
  }

  #dai-help-center .hc-askai {
    background: rgba(255, 255, 255, 0.04) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  }
  #dai-help-center .hc-askai:hover {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15) !important;
  }

  #dai-help-center .hc-popular {
    color: rgba(255, 255, 255, 0.5) !important;
  }
  #dai-help-center .hc-tag {
    background: rgba(255, 255, 255, 0.04) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    color: #f2f2f2 !important;
  }
  #dai-help-center .hc-tag:hover {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15) !important;
  }
}

/* Keyframes must live at the top level, not nested inside the :has() block. */
@keyframes dai-hc-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes dai-hc-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes dai-hc-blink {
  to { visibility: hidden; }
}

@keyframes dai-hc-bounce {
  0%, 80%, 100% { transform: translateY(0);    opacity: 0.5; }
  40%           { transform: translateY(-4px); opacity: 1;   }
}