/*
 * FAQ page - search layer (/faq only)
 *
 * Layers on handbook_page.css, which owns the shell every long-form document
 * page shares: the page container, the two-zone grid, the contents rail, the
 * reading-column chrome, the heading scale and the documentation body scale.
 * Nothing in this file styles any of that.
 *
 * What is here is the part only /faq has: the search field and its keycaps,
 * the results panel, the in-answer sub-section chips and the mobile search
 * button. The three other handbook pages ship no `[data-faq-search]` markup,
 * so handbook_page.js never initialises the search module and no rule below
 * ever applies to them.
 *
 * Conventions (shared with handbook_page.css):
 *  - Transitions always name explicit properties (never broad transitions).
 *  - Every custom control owns :focus, :active and :focus-visible.
 *  - Result links restate the body-link reset at ID weight, because style.css
 *    matches `a:not(...)` at (0,1,1) and would otherwise give them the green
 *    underline shadow meant for links inside answers.
 */

/* ------------------------------------------------------------------ */
/* Search control                                                      */
/* ------------------------------------------------------------------ */

.faq-search {
    position: relative;
    margin-bottom: 1.35rem;
}

/* The right padding is deliberately lighter than the left: the keycaps carry
   their own visual weight, so matching the padding would push them away from
   the edge and leave the field looking lopsided. */
.faq-search__field {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.5rem 0.5rem 0.5rem 0.7rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.625rem;
    background: #ffffff;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.faq-search__field:hover {
    border-color: #cbd5e1;
}

.faq-search__icon {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    color: #94a3b8;
}

.faq-search__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #0f172a;
    font-family: var(--tailwind-font);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.faq-search__input::placeholder {
    color: #94a3b8;
}

/* The field owns the focus ring, so the inner input must not draw its own. */
.faq-search__input:focus,
.faq-search__input:focus-visible,
.faq-search__input:active {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: none;
}

/* Strip the WebKit search decorations so the field reads as a docs control. */
.faq-search__input::-webkit-search-decoration,
.faq-search__input::-webkit-search-cancel-button,
.faq-search__input::-webkit-search-results-button,
.faq-search__input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
}

/* Two keycaps with air between them, rather than one glued "⌘K" glyph, so
   the hint reads as a shortcut the way a command palette's does. */
.faq-search__keys {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.25rem;
}

.faq-search__kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 0.3rem;
    border: 1px solid #e2e8f0;
    /* The heavier bottom edge is what reads as a physical key. */
    border-bottom-width: 2px;
    border-radius: 0.3rem;
    background: #f8fafc;
    font-family: var(--tailwind-font);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    color: #94a3b8;
}

/* "Ctrl" needs more room than "⌘"; handbook_page.js adds this off Apple
   platforms. */
.faq-search__kbd--wide {
    padding: 0 0.35rem;
    font-size: 0.625rem;
    letter-spacing: 0.02em;
}

/* ------------------------------------------------------------------ */
/* Search results panel                                                */
/* ------------------------------------------------------------------ */

/* Wider than the sidebar on purpose: the panel overlays the reading column
   the way a documentation command palette does, so snippets stay readable.
   It paints above the answers because handbook_page.css gives the rail an
   explicit z-index; without that, every absolutely positioned list bullet in
   the document would paint through this panel. */
.faq-search__panel {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    z-index: 40;
    width: 24rem;
    max-width: calc(100vw - 3rem);
    max-height: 26rem;
    overflow-y: auto;
    padding: 0.35rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    background: #ffffff;
    /* The page carries no .tailwind-scope wrapper, so the panel names the
       interface face itself rather than inheriting the body face. */
    font-family: var(--tailwind-font);
    box-shadow: 0 1px 2px rgb(16 24 40 / 0.04), 0 12px 32px rgb(15 23 42 / 0.12);
}

.faq-search__panel[hidden] {
    display: none;
}

.faq-result {
    display: block;
    padding: 0.5rem 0.6rem;
    border-radius: 0.5rem;
    transition: background-color 150ms ease;
}

.faq-result__context {
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #94a3b8;
}

.faq-result__title {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
}

.faq-result__snippet {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    line-height: 1.45;
    color: #64748b;
}

/* The snippet highlight is local to the panel and must not inherit the
   page's <mark> treatment, which is sized for body copy. */
.faq-result__snippet mark {
    padding: 0 0.1rem;
    border-radius: 0.2rem;
    background: #d1fae5;
    color: #065f46;
}

.faq-result:hover,
.faq-result.is-active {
    background: #ecfdf5;
}

.faq-search__empty {
    padding: 0.85rem 0.7rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #64748b;
}

.faq-search__empty strong {
    color: #0f172a;
    font-weight: 600;
}

/* Restate the body-link reset at ID weight: style.css's global `a:not(...)`
   rule would otherwise paint the green underline shadow on every result. */
#main-content .faq-result,
#main-content .faq-result:hover {
    text-decoration: none;
    box-shadow: none;
}

#main-content .faq-result {
    color: #0f172a;
}

/* ------------------------------------------------------------------ */
/* Search focus contract                                               */
/* ------------------------------------------------------------------ */

.faq-result:focus,
.faq-result:active {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: none;
}

.faq-result:focus-visible {
    outline: 2px solid #059669;
    outline-offset: 2px;
    box-shadow: none;
}

/* The field is the control the reader sees, but the input inside it is what
   receives focus, so the field wears both states on the input's behalf.
   Pointer focus gets the halo; keyboard focus adds the shared green outline. */
.faq-search__field:focus-within {
    border-color: #6ee7b7;
    box-shadow: 0 0 0 3px rgb(4 120 87 / 0.08);
}

.faq-search__field:has(.faq-search__input:focus-visible) {
    outline: 2px solid #059669;
    outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Below 1024px                                                        */
/* ------------------------------------------------------------------ */

/* The rail becomes a static full-width block at this width (handbook_page.css),
   so the panel it carries has to follow it. */
@media (max-width: 1023px) {
    .faq-search__panel {
        width: 100%;
    }
}

/* ------------------------------------------------------------------ */
/* In-answer sub-section chips                                         */
/* ------------------------------------------------------------------ */

/*
 * Five aggregator answers carry h4 sub-sections (AFG, SFG, Connective, Vow and
 * Outsource Financial). They are addressable and searchable but appear nowhere
 * on a long answer until searched. Under an h3 that owns h4 children,
 * handbook_page.js injects this chip row so a reader can see and jump to them.
 * h4s stay out of the contents rail by design; this is in-answer navigation
 * only, JS-injected, so the no-JS document is unchanged.
 */
.faq-subnav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0.9rem 0 0;
}

.faq-subnav__label {
    font-family: var(--tailwind-font);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

.faq-subnav__chip {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.7rem;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #f8fafc;
    font-family: var(--tailwind-font);
    font-size: 0.78125rem;
    line-height: 1.3;
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.faq-subnav__chip:hover {
    background: #ecfdf5;
    border-color: #6ee7b7;
}

/* Restate the body-link reset at ID weight: style.css's global `a:not(...)`
   rule would otherwise paint the green underline shadow on every chip. */
#main-content .faq-subnav__chip,
#main-content .faq-subnav__chip:hover {
    text-decoration: none;
    box-shadow: none;
}

#main-content .faq-subnav__chip {
    color: #334155;
}

#main-content .faq-subnav__chip:hover {
    color: #047857;
}

.faq-subnav__chip:focus,
.faq-subnav__chip:active {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: none;
}

.faq-subnav__chip:focus-visible {
    outline: 2px solid #059669;
    outline-offset: 2px;
    box-shadow: none;
}

/* ------------------------------------------------------------------ */
/* Mobile search entry point                                           */
/* ------------------------------------------------------------------ */

/*
 * Below 1024px the rail collapses to a static block at the top of the page, so
 * a reader deep in an answer has no visible way to search short of the
 * Cmd/Ctrl+K shortcut. handbook_page.js adds this fixed button on the mobile
 * layout; tapping it opens the collapsed contents and focuses the one existing
 * search field and index, rather than building a second search. It is
 * JS-injected (absent without JavaScript) and hidden on the desktop layout.
 */
.faq-search-fab {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 45;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.95rem;
    border: 0;
    border-radius: 999px;
    background: #059669;
    color: #ffffff;
    font-family: var(--tailwind-font);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 16px rgb(5 150 105 / 0.35);
    transition: background-color 180ms ease, box-shadow 180ms ease;
}

.faq-search-fab__icon {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
}

.faq-search-fab:hover {
    background: #047857;
}

.faq-search-fab:focus,
.faq-search-fab:active {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.faq-search-fab:focus-visible {
    outline: 2px solid #a7f3d0;
    outline-offset: 2px;
}

/* The rail already carries the search field on the desktop layout, so the
   floating button is a mobile-only affordance. */
@media (min-width: 1024px) {
    .faq-search-fab {
        display: none;
    }
}