/* help.css -- /Help/Index page layout + responsive drawer.
   Modeled on developer.css's two-column shell but with its own class
   names so changes here don't leak into /Developer.

   Layout shape (fitted, mirrors the .page-card.is-fitted pattern in
   site.css): the .help-page-fitted wrapper makes the body a flex
   column at 100vh, so the global _Footer is always visible at the
   bottom. Inside that wrapper the .help-header is pinned at the top
   (flex 0) and .help-shell takes the rest of the height and is the
   only thing that scrolls internally. */

/* ---------- Fitted-page chain (body -> main -> .help-page-fitted) ----------
   Parallel to site.css's body:has(.page-card.is-fitted) rules, but
   keyed off our own marker class so changes here don't affect every
   page-card in the codebase. */
body:has(.help-page-fitted) {
    height: 100vh;
    height: 100dvh;
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 0;
}
body:has(.help-page-fitted) > nav,
body:has(.help-page-fitted) > .company-bar {
    flex: 0 0 auto;
}
body:has(.help-page-fitted) > main {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.help-page-fitted {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ---------- Persistent header (always visible at the top) ----------
   No longer sticky -- .help-page-fitted's flex column pins it for us.
   max-width + auto margins match .help-shell below so the header bar
   and the content area share the same centered column (the bottom
   border lines up with where the shell starts). 16px inner padding
   keeps the title and search input from butting against the border /
   viewport edge. */
.help-header {
    flex: 0 0 auto;
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
    padding: 12px 16px;
    margin: 0 auto 16px auto;
    max-width: 1200px;
    width: 100%;
}
.help-header-inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.help-header-inner h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}
/* Row 2 of the header: back-to-topics link + search input. Stays as
   a single non-wrapping row so the chevron and the search box never
   stack vertically, even at the narrowest viewport. The search wrap
   absorbs all remaining space via flex:1 1 auto. */
.help-header-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}
.help-search-wrap {
    flex: 1 1 240px;
    min-width: 200px;
    position: relative;
}
.help-search-input {
    width: 100%;
    padding: .35rem .6rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: .9rem;
}
.help-search-clear {
    position: absolute;
    right: .35rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: var(--bs-secondary-color);
    font-size: 1.1rem;
    line-height: 1;
    padding: 2px 6px;
    cursor: pointer;
    display: none;
}
.help-search-clear.is-visible { display: inline-block; }
.help-search-empty {
    display: none;
    margin-top: 8px;
    color: var(--bs-secondary-color);
    font-size: .85rem;
    font-style: italic;
}
.help-search-empty.is-visible { display: block; }

/* ---------- Two-column shell (fills remaining vertical space) ----------
   .help-page-fitted makes this the flex:1 child that absorbs whatever
   height is left after the header. The shell itself doesn't scroll --
   its two children (.help-toc, .help-main) each scroll independently
   so the TOC stays visible while the right pane scrolls. */
.help-shell {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    overflow: hidden;
}

/* ---------- TOC sidebar (own scroll, fills shell height) ----------
   Font sizes are pinned at the mobile values across all breakpoints
   so the text doesn't shrink when the screen widens past 900px --
   the @media block below only touches layout (grid columns + drawer
   state), not typography. */
.help-toc {
    align-self: stretch;
    overflow-y: auto;
    min-height: 0;
    font-size: 1rem;
    padding-right: 4px;     /* room for the scrollbar */
}
.help-toc-inner ol {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.help-toc-inner ol ol {
    padding-left: 14px;
    margin-top: 4px;
    margin-bottom: 8px;
    font-size: .95rem;
}
.help-toc-inner li { padding: 2px 0; }
.help-toc-inner a {
    color: var(--bs-body-color);
    text-decoration: none;
    display: block;
    padding: 8px 12px;
    border-radius: 4px;
}
.help-toc-inner a:hover {
    background: var(--bs-tertiary-bg);
    color: var(--bs-link-color);
}
/* Search filter hides BOTH the <a> and its parent <li> by adding
   .is-hidden to each. CSS has to drop the <li> too -- otherwise its
   default padding leaves a visible blank slot in the TOC for every
   filtered-out entry, stacking into the big empty gaps we saw on
   long pages. */
.help-toc-inner a.is-hidden,
.help-toc-inner li.is-hidden { display: none; }

/* "TOC has no matches for current search" placeholder */
.help-toc-empty {
    display: none;
    color: var(--bs-secondary-color);
    font-size: .8rem;
    font-style: italic;
    padding: 4px 8px;
}
.help-toc-empty.is-visible { display: block; }

/* ---------- Main column (own scroll, fills shell height) ----------
   Independent overflow so the TOC stays visible when the user
   scrolls through long sections. min-height:0 + min-width:0 keep
   the flex/grid item from refusing to shrink past its content. */
.help-main {
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding-right: 8px;
    padding-bottom: 24px;
}
.help-main section {
    padding-top: 32px;
    scroll-margin-top: 76px;
}
.help-main section + section { border-top: 1px solid var(--bs-border-color); }
.help-main section.is-hidden { display: none; }
.help-main h2 {
    font-size: 1.5rem;
    margin: 0 0 12px 0;
    padding-bottom: 4px;
}
.help-main h3 {
    font-size: 1.1rem;
    margin: 24px 0 8px 0;
    scroll-margin-top: 76px;
}
.help-main p, .help-main ul, .help-main ol { line-height: 1.55; }
.help-main code:not(pre code) {
    background: var(--bs-tertiary-bg);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: .85em;
}

/* Search-match highlight on content. JS wraps matched text in
   .help-search-hit; the yellow background is visible in both light + dark
   thanks to currentColor on the text. */
.help-search-hit {
    background: rgba(255, 235, 59, .35);
    border-radius: 2px;
    padding: 0 1px;
}

/* ---------- Hero (the intro paragraph at the top of .help-main) ----------
   Lighter weight than a Bootstrap .display-6 -- the persistent
   .help-header already carries the page title, so this is just a
   single muted intro paragraph. */
.help-hero {
    margin: 4px 0 18px 0;
    padding: 0;
    border: none;
    background: transparent;
}
.help-hero p { margin: 0; }

/* ---------- Back-to-topics link (mobile-only, drawer-open) ----------
   Sits inside .help-header-row to the left of the search input.
   Hidden by default and revealed only on mobile when a topic is
   open -- the @media rule at the bottom uses :has() to peek at the
   .help-shell.is-topic-open state from a sibling subtree. */
.help-back-to-toc {
    display: none;
    flex: 0 0 auto;
    font-size: .9rem;
    color: var(--bs-link-color);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.help-back-to-toc:hover { color: var(--bs-link-hover-color); }
.help-back-to-toc::before { content: "\2039\00a0"; /* ‹ + nbsp */ font-size: 1.1em; }

/* ---------- Mobile (<=900px): drawer pattern ----------
   Only layout changes here -- font sizes already match the mobile
   value at every width (see the TOC block above). JS toggles
   .is-topic-open on the shell when the user picks a TOC entry. */
@media (max-width: 900px) {
    .help-shell {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Drawer state: hide whichever pane the user isn't currently on. */
    .help-shell.is-topic-open .help-toc { display: none; }
    .help-shell:not(.is-topic-open) .help-main { display: none; }

    /* Reveal the back-to-topics link only when the shell is in
       drawer-open state. :has() reaches across the header / shell
       sibling boundary via their shared .help-page-fitted parent. */
    .help-page-fitted:has(.help-shell.is-topic-open) .help-back-to-toc {
        display: inline-block;
    }
}

/* ---------- "Where to focus" role-tailored intro card ----------
   Subtle tinted panel that sits between Welcome and First steps. The
   amber-on-tertiary palette matches the rest of the agent UI's "this
   is for you specifically" callouts (the after-hours banner, the test-
   chat strip) so it reads as personalized without screaming. */
.help-role-card {
    background: var(--bs-tertiary-bg);
    border-left: 4px solid var(--bs-primary);
    border-radius: .375rem;
    padding: 14px 18px;
    margin: 12px 0 24px 0;
}
.help-role-card h2 {
    font-size: 1.05rem;
    margin: 0 0 8px 0;
    color: var(--bs-body-color);
}
.help-role-card p:last-child { margin-bottom: 0; }