/* help-center-search.css
 *
 * The search field of the public help center and its typeahead panel. Split from help-center.css along
 * the same line as the JavaScript: the panel is built at runtime, so its class names never reach the
 * Tailwind content scan and utilities for them would be purged — this stays plain CSS.
 */

/* ---------- search field ---------- */

/* The explicit z-index is load-bearing, not decoration. The entrance animation (.fbx-rise) animates
   opacity, which makes this form its own stacking context — and a stacking context with z-index:auto
   paints in DOM order, i.e. BEFORE <main>. The suggestion panel's own z-index then only competes inside
   this form, and the page content underneath it showed straight through the panel. A positive z-index
   lifts the whole context above the article, while staying under the sticky header (z-40). */
.hc-search {
    position: relative;
    z-index: 30;
    width: 100%;
}

/* Ring instead of border, exactly like .input-primary in the app: one hairline at rest, a thicker one on
   focus. The focused ring wears the widget's accent, with the dark-scheme accent under .dark — the same
   pair the widget's own form fields use, so a contractor's colour behaves identically on both surfaces.
   The ring is drawn as a shadow rather than a border so nothing under the field moves when it thickens. */
.hc-search-shell {
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 0 0 1px #e4e4e7;
    transition: box-shadow 0.15s ease;
}

.hc-search-shell:hover {
    box-shadow: 0 0 0 1px #d4d4d8;
}

.hc-search-shell:focus-within {
    box-shadow: 0 0 0 2px var(--lw-widget-accent, #18181b);
}

.dark .hc-search-shell:focus-within {
    box-shadow: 0 0 0 2px var(--lw-widget-accent-dark, #fff);
}

.hc-search-icon {
    flex: none;
    width: 18px;
    height: 18px;
    margin-inline-start: 12px;
    color: #a1a1aa;
}

.hc-search-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 14px 9px 10px;
    border: 0;
    background: transparent;
    color: #18181b;
    font-size: 14.5px;
    line-height: 1.4;
    outline: none;
    appearance: none;
}

/* The home page's field, where searching is the page rather than a control above it: roughly twice the
   height of the header one, and wide enough that a typed question does not scroll inside it. Only the
   measurements change — ring, colours and states stay the header field's, so the two read as one control
   in two sizes. */
.hc-search-hero .hc-search-shell { border-radius: 14px; }

.hc-search-hero .hc-search-icon {
    width: 20px;
    height: 20px;
    margin-inline-start: 18px;
}

.hc-search-hero .hc-search-input {
    padding: 21px 18px 21px 12px;
    font-size: 16px;
}

.hc-search-hero .hc-search-clear {
    width: 30px;
    height: 30px;
    margin-inline-end: 16px;
}

.hc-search-hero .hc-search-clear svg { width: 15px; height: 15px; }

.hc-search-hero .hc-search-progress { inset-inline: 18px; }

.hc-search-input::placeholder { color: #a1a1aa; }
.hc-search-input::-webkit-search-cancel-button { appearance: none; }

/* Clear button appears only once something is typed (JS toggles [hidden]). */
.hc-search-clear {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-inline-end: 12px;
    border: 0;
    border-radius: 999px;
    background: #f4f4f5;
    color: #71717a;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.hc-search-clear:hover { background: #e4e4e7; color: #18181b; }
.hc-search-clear[hidden] { display: none; }
.hc-search-clear svg { width: 14px; height: 14px; }

/* Indeterminate progress hairline while a request is in flight. */
.hc-search-progress {
    position: absolute;
    inset-inline: 14px;
    bottom: -1px;
    height: 2px;
    overflow: hidden;
    border-radius: 999px;
}

.hc-search-progress[hidden] { display: none; }

.hc-search-progress::after {
    content: "";
    position: absolute;
    inset-block: 0;
    width: 40%;
    border-radius: inherit;
    background: var(--lw-widget-accent, #4f46e5);
    animation: hc-progress 1s ease-in-out infinite;
}

@keyframes hc-progress {
    0% { inset-inline-start: -40%; }
    100% { inset-inline-start: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .hc-search-shell { transition: none; }
    .hc-search-progress::after { animation: none; inset-inline-start: 0; width: 100%; opacity: 0.5; }
}

/* ---------- article header frame ---------- */

/* On an article page the header field spans the article card: same frame, same left gutter
   (_Layout.cshtml). Its right edge is set here, because it depends on two things Tailwind cannot see.
   First, the page-outline rail beside the card (.hc-toc, 216px plus the 2.5rem gap) exists only from
   1180px on and only once help-center-toc.js unhides it; while it stands, the card ends before it and
   so does the field. Second, the header controls float at the right edge of the screen (--hc-controls-room
   is their width plus some air). While the frame reaches that edge, the field has to stop short of them;
   once the screen is wide enough to centre the frame with room to spare (sidebar 300px, frame 72rem),
   the side margin takes over that job. The larger of the two needs wins. */
.hc-search-frame {
    --hc-controls-room: calc(14rem - max(0px, (100vw - 300px - 72rem) / 2));
    padding-right: max(1.25rem, var(--hc-controls-room));
}

@media (min-width: 1024px) {
    .hc-search-frame {
        padding-right: max(2.5rem, var(--hc-controls-room));
    }
}

@media (min-width: 1180px) {
    body:has(.hc-toc:not([hidden])) .hc-search-frame {
        padding-right: max(calc(5rem + 216px), var(--hc-controls-room));
    }
}

/* ---------- phone dialog ---------- */

/* Below md the header has no room for a field worth typing into; squeezed between logo and controls it
   showed a few letters of what was typed. There the header field hides, and the search button among the
   controls turns it into a full-screen dialog (help-center-search.js, initSearchSheet): the field on
   top with a cancel beside it, the suggestions filling the rest. It is still the one form and the one
   panel, so the typeahead and the results page need no second implementation. */
.hc-search-cancel {
    display: none;
}

@media (max-width: 767.98px) {
    .hc-search-docked:not([data-hc-search-sheet]) {
        display: none;
    }

    /* The header blurs what scrolls under it; a backdrop-filter makes it the containing block of its
       fixed descendants, which would shrink the dialog to the header's height. It also lifts the header
       (the dialog's stacking context) to the full-screen layer, above the sidebar drawer. */
    .hc-search-sheet-open {
        overflow: hidden;
    }

    .hc-search-sheet-open header {
        z-index: 70;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .hc-search[data-hc-search-sheet] {
        position: fixed;
        inset: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto minmax(0, 1fr);
        align-items: center;
        column-gap: 12px;
        max-width: none;
        height: 100dvh;
        padding: max(12px, env(safe-area-inset-top)) 16px 0;
        background: #fff;
        animation: hc-sheet-in 0.18s ease-out both;
    }

    /* 16px keeps iOS from zooming into the field on focus. */
    [data-hc-search-sheet] .hc-search-input {
        padding-block: 11px;
        font-size: 16px;
    }

    [data-hc-search-sheet] .hc-search-cancel {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 2px;
        border: 0;
        background: transparent;
        color: var(--lw-widget-on-light, #4f46e5);
        font: inherit;
        font-size: 15px;
        font-weight: 500;
        cursor: pointer;
    }

    /* The panel is no longer a popover under the field but the dialog's body: full width, no frame, and
       its list scrolls down to the screen's bottom edge. Still positioned, for the overlay bar. */
    [data-hc-search-sheet] .hc-panel {
        position: relative;
        inset: auto;
        grid-column: 1 / -1;
        align-self: stretch;
        max-height: none;
        margin: 12px -16px 0;
        border: 0;
        border-top: 1px solid #f4f4f5;
        border-radius: 0;
        box-shadow: none;
        animation: none;
    }

    [data-hc-search-sheet] .hc-panel-list {
        padding: 6px 10px max(16px, env(safe-area-inset-bottom));
    }
}

@keyframes hc-sheet-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hc-search[data-hc-search-sheet] { animation: none; }
}

/* ---------- dark scheme ---------- */

/* Mirrors the light rules above on the dark ground the page paints under `.dark`. The focused ring is
   defined next to its light sibling further up (accent vs. accent-dark); everything here is surface. */

.dark .hc-search-shell {
    background: #18181b;
    box-shadow: 0 0 0 1px #3f3f46;
}

.dark .hc-search-shell:hover {
    box-shadow: 0 0 0 1px #52525b;
}

.dark .hc-search-input {
    color: #fafafa;
}

.dark .hc-search-input::placeholder { color: #71717a; }

.dark .hc-search-clear {
    background: #27272a;
    color: #a1a1aa;
}

.dark .hc-search-clear:hover { background: #3f3f46; color: #fafafa; }

.dark .hc-search-progress::after {
    background: var(--lw-widget-accent-dark, #a5b4fc);
}

.dark .hc-search[data-hc-search-sheet] {
    background: #18181b;
}

/* help-center-panel.css loads later and gives the dark panel its popover shadow back. */
.dark [data-hc-search-sheet] .hc-panel {
    border-top-color: #27272a;
    box-shadow: none;
}

.dark [data-hc-search-sheet] .hc-search-cancel {
    color: var(--lw-widget-on-dark, #a5b4fc);
}