/* Help centre — /help and /help/*.

   Host-agnostic: semantic tokens only, so each host's brand layer
   restyles it without touching this file. What a host still owns is the
   topic list (titles, slugs, keywords), the topic views, and the help
   content itself.

   DELIBERATELY SELF-CONTAINED — the topic cards do NOT reuse
   .c-persona-card from app-c-ui.css, even though they look similar.
   That component is shaped around a card with an action row
   (__actions / __learn, and a __desc bottom margin reserving space for
   it); help cards have no actions because the card IS the action.
   Borrowing it meant overriding it in two places, which is the tell
   that the shapes only look alike. Keeping them separate means an
   onboarding redesign of persona cards can't silently restyle help.

   The cost is accepted duplication: both are icon + title + description
   in a bordered box, so a genuine design-system change touches both. */

@layer components {

    /* ─── Topic grid ────────────────────────────────────────────────
       Three-up on desktop; six topics read better as two rows of three
       than 4 + 2, and the descriptions get the width they need. */
    .c-help-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-5);
    }

    @media (max-width: 1199px) {
        .c-help-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 599px) {
        .c-help-grid {
            grid-template-columns: 1fr;
        }
    }

    /* ─── Topic card ────────────────────────────────────────────────
       Rendered as <a> — the whole card is the click target, so link
       styling is stripped and the hover/focus state carries the
       affordance. */
    .c-help-card {
        display: flex;
        flex-direction: column;
        padding: var(--space-6);
        color: inherit;
        text-decoration: none;
        background: var(--color-surface);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-lg);
        transition: border-color var(--dur-fast) var(--ease),
                    box-shadow var(--dur-fast) var(--ease);
    }

    /* :focus-visible matches :hover so keyboard users get the same
       affordance mouse users do — these are links, not decoration. */
    .c-help-card:hover,
    .c-help-card:focus-visible {
        border-color: var(--color-ink);
        box-shadow: var(--shadow-md);
    }

    /* No .c-help-card[hidden] rule needed: app-reset.css declares
       [hidden] { display: none !important } in @layer reset, and an
       important declaration outranks a normal one from any layer — so it
       already beats the display:flex above. */

    /* Fixed-square icon badge; FontAwesome glyph centered inside. */
    .c-help-card__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 3rem;
        height: 3rem;
        margin-bottom: var(--space-4);
        font-size: 1.5rem;
        color: var(--color-accent);
        background: color-mix(in srgb, var(--color-accent) 10%, transparent);
        border-radius: var(--radius-md);
    }

    .c-help-card__title {
        margin: 0 0 var(--space-2);
        font-family: var(--font-display);
        font-size: var(--fs-heading);
        font-weight: 500;
        line-height: 1.2;
        color: var(--color-ink-h3);
    }

    .c-help-card__desc {
        margin: 0;
        font-size: var(--fs-body);
        line-height: 1.5;
        color: var(--color-ink-soft);
    }

    /* ─── Page furniture ────────────────────────────────────────────*/

    /* Standfirst under the page title — "Search the help centre, or
       browse by topic below." */
    .c-help__lede {
        margin: 0 0 var(--space-6);
        font-size: var(--fs-body-lg);
        color: var(--color-ink-soft);
    }

    /* "← All help topics" back-link at the top of a topic page. */
    .c-help__breadcrumb {
        margin: 0 0 var(--space-5);
        font-size: var(--fs-ui-sm);
    }

    /* "Showing 2 of 6 topics." / "No topics match …" plus the way back.
       Sits directly under the search field, because the confusion it
       answers ("where did the cards go?") happens the moment you type. */
    .c-help__status {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: var(--space-2);
        margin: 0 0 var(--space-6);
        color: var(--color-ink-soft);
    }

    /* Hiding is handled globally — see the note by .c-help-card. */

    .c-help-topic__actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-4);
        margin-top: var(--space-6);
    }

    /* ─── Search field ──────────────────────────────────────────────
       Native <input type="search"> in a relative wrapper, with the icon
       absolutely placed inside the field wrapper, and a labelled Clear
       button beside it. Not an <ejs-textbox>: this filters in place, so
       none of the popup or suggestion behaviour that would justify a
       Syncfusion control applies (ADR 0014's native-input rule). */
    .c-help-search {
        display: flex;
        align-items: stretch;
        gap: var(--space-3);
        margin-bottom: var(--space-4);
    }

    /* The field and its magnifier; the Clear button is a sibling of this,
       not a child, so it can't overlap the text however long the label. */
    .c-help-search__field {
        position: relative;
        flex: 1;
    }

    .c-help-search__icon {
        position: absolute;
        top: 50%;
        left: var(--space-4);
        transform: translateY(-50%);
        color: var(--color-ink-soft);
        /* Clicks land on the input underneath, not the decoration. */
        pointer-events: none;
    }

    .c-help-search__input {
        width: 100%;
        /* Left padding clears the magnifier. */
        padding: var(--space-4) var(--space-4) var(--space-4) var(--space-9);
        font-size: var(--fs-body);
        color: var(--color-ink);
        background: var(--color-surface);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-lg);
    }

    .c-help-search__input::placeholder {
        color: var(--color-ink-soft);
    }

    .c-help-search__input:focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: 1px;
    }

    /* Chrome and Edge draw their own clear glyph on type="search" and
       Firefox draws none. We supply our own so the affordance exists in
       every browser; suppress the native one so Chrome doesn't show two. */
    .c-help-search__input::-webkit-search-cancel-button {
        -webkit-appearance: none;
        appearance: none;
    }

    /* Clearing the search is the way out of the state where a query
       matched nothing and every card is hidden. Labelled, not a bare ✕ —
       an icon-only control read as decoration and got missed, which is
       the whole reason this exists. */
    .c-help-search__clear {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        flex-shrink: 0;
        padding-inline: var(--space-5);
        font: inherit;
        color: var(--color-ink);
        background: none;
        border: 1px solid var(--color-line);
        border-radius: var(--radius-lg);
        cursor: pointer;
    }

    .c-help-search__clear:hover:not(:disabled) {
        border-color: var(--color-ink);
        background: color-mix(in srgb, var(--color-ink) 6%, transparent);
    }

    .c-help-search__clear:focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: 1px;
    }

    /* Disabled rather than hidden while the field is empty: hiding it
       would put the affordance back out of sight — the exact problem this
       button exists to solve — and reflow the input on the first
       keystroke. */
    .c-help-search__clear:disabled {
        color: var(--color-ink-soft);
        cursor: default;
        opacity: 0.6;
    }

    /* Text button that reads as a link. It sits mid-sentence in the
       no-results message, where button chrome would be wrong but the
       action is a page action, not a navigation — so it must be a
       <button>, not an <a href="#">. */
    .c-help__link-button {
        padding: 0;
        font: inherit;
        color: var(--color-accent);
        background: none;
        border: 0;
        cursor: pointer;
        text-decoration: underline;
        text-underline-offset: 0.2em;
    }

    .c-help__link-button:hover {
        color: var(--color-ink);
    }

    .c-help__link-button:focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
    }

    /* ─── Contact footer ────────────────────────────────────────────
       "Still stuck?" + a contact action, closing the page. */
    .c-help__contact {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-5);
        margin-top: var(--space-9);
        padding-top: var(--space-6);
        border-top: 1px solid var(--color-line);
    }

    .c-help__contact-title {
        margin: 0 0 var(--space-1);
        font-family: var(--font-display);
        font-size: var(--fs-heading);
        font-weight: 500;
        line-height: 1.2;
        color: var(--color-ink-h3);
    }

    .c-help__contact-copy {
        margin: 0;
        color: var(--color-ink-soft);
    }

    @media (max-width: 599px) {
        .c-help__contact {
            flex-direction: column;
            align-items: flex-start;
        }
    }
}