/* ══════════════════════════════════════════════════════════════════
   UI atoms — small, reusable bits that compose into pages.

   Grouped by kind rather than by file-per-component. A component
   graduates out to its own file only when it gets truly large or
   its concerns diverge from the rest of this group (rough rule: if
   this file crosses ~1500 lines or a section stops sharing tokens
   with its neighbors, promote it).

   Sections (numbering is historical — not all numbers are unique):
     1.  Button (c-button)
     2.  Choice list (c-choice-list / c-choice / c-choice-actions)
     3.  Persona card + grid (c-persona-card)
     3.  Checklist (c-checklist)
     4.  Form error (c-form-error)
         Notice (c-notice)
     5.  Upload (c-upload, app-upload tag helper)
     6.  Readout (c-readout)
     7.  Form field (c-form-field)
     8.  Card (c-card)
     9.  Disclosure (c-disclosure — <details>/<summary> accordion)
     10. Page note (c-page-note — hairline-topped muted page footer)
   ══════════════════════════════════════════════════════════════════ */

@layer components {

    /* ─── 1. Button ───────────────────────────────────────────────── */

    .c-button {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        font: inherit;
        font-weight: 500;
        line-height: 1;
        padding: var(--space-2) var(--space-4);
        border: 1px solid transparent;
        border-radius: var(--radius-pill);
        background: transparent;
        color: inherit;
        cursor: pointer;
        text-decoration: none;
        transition: background var(--dur-base) var(--ease),
                    color var(--dur-base) var(--ease),
                    border-color var(--dur-base) var(--ease);
    }

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

    .c-button:disabled,
    .c-button[aria-disabled="true"] {
        opacity: 0.5;
        pointer-events: none;
    }

    /* Variants */

    /* Primary CTA — the page's most important action ("Continue",
       "Subscribe", "Select Plan", etc.). Uses the host's brand colour.
       Hosts rebind --color-accent in their brand layer; unbranded contexts
       fall back to a near-black neutral so the button still reads as primary. */
    .c-button--solid {
        background: var(--color-accent);
        color: var(--color-on-dark);
    }

    .c-button--solid:hover {
        background: var(--color-accent-deep);
    }

    .c-button--ghost {
        border-color: var(--color-line);
    }

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

    .c-button--link {
        padding-inline: 0;
        color: var(--color-accent);
        text-decoration: underline;
        text-underline-offset: 0.2em;
    }

    /* Sizes */
    .c-button--sm {
        padding: var(--space-1) var(--space-3);
        font-size: var(--fs-ui-sm);
    }

    .c-button--lg {
        padding: var(--space-3) var(--space-5);
        font-size: var(--fs-body-lg);
    }


    /* ─── 2. Choice list ──────────────────────────────────────────────
     Stacked toggle-card list: each card pairs a control (switch /
     radio / checkbox) with a title + description block. Used for
     settings panels — privacy choices, notification prefs, feature
     opt-ins. Grid layout (not flex) is deterministic when controls
     mount via JS after first paint, avoiding the layout shifts that
     a flex-with-fixed-width-toggle pattern can produce. */

    .c-choice-list {
        list-style: none;
        margin: 0 0 var(--space-7);
        padding: 0;
        display: grid;
        gap: var(--space-4);
    }

    .c-choice {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: var(--space-5);
        align-items: start;
        padding: var(--space-5);
        background: var(--color-surface-alt);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-md);
    }

    .c-choice__toggle {
        /* No width constraint — let the control size itself.
           Optical-alignment nudge so a switch sits with the first
           line of the title rather than the very top of the card. */
        padding-top: 0.125rem;
    }

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

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

    /* Action row sitting below a .c-choice-list — right-aligned button
       group, wraps on narrow viewports. */
    .c-choice-actions {
        display: flex;
        gap: var(--space-3);
        justify-content: flex-end;
        flex-wrap: wrap;
    }


    /* ─── 3. Persona card + grid ──────────────────────────────────── */

    /* Used on the onboarding picker (/onboarding) where a new user
       chooses their path: Company / Professional / Credentialing
       Authority / Relying Party. Each card is a self-contained block
       with icon, heading, description, and a primary + secondary
       action row. Responsive grid:
         ≥1200px  — 4 across (wide desktop)
         600-1199 — 2 across (tablet, small desktop; 4 columns at this
                    width squeeze the descriptions too tightly)
         <600px   — 1 across (phone) */

    .c-persona-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-5);
    }

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

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

    .c-persona-card {
        display: flex;
        flex-direction: column;
        padding: var(--space-6);
        background: var(--color-surface);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-lg, 12px);
        transition: border-color var(--dur-fast) var(--ease),
                    box-shadow var(--dur-fast) var(--ease),
                    transform var(--dur-fast) var(--ease);
    }

    .c-persona-card:hover {
        border-color: var(--color-ink);
        box-shadow: 0 6px 20px -6px rgb(0 0 0 / .08);
    }

    /* Fixed-square icon badge; FontAwesome glyph centered inside. */
    .c-persona-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, 8px);
    }

    .c-persona-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);
    }

    /* flex: 1 pushes the action row to the bottom so buttons align
       across cards even when descriptions differ in length. */
    .c-persona-card__desc {
        flex: 1;
        margin: 0 0 var(--space-5);
        font-size: var(--fs-body);
        line-height: 1.5;
        color: var(--color-ink-soft);
    }

    .c-persona-card__actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
    }

    .c-persona-card__learn {
        font-size: var(--fs-ui-sm);
        color: var(--color-accent);
        text-decoration: none;
        white-space: nowrap;
    }

    .c-persona-card__learn:hover,
    .c-persona-card__learn:focus-visible {
        text-decoration: underline;
        text-underline-offset: 0.2em;
    }

    /* .c-persona-card--unavailable and .c-persona-card__unavailable
       live in the host (AfricaDocumentsWebSite/wwwroot/css/custom/) —
       they're AD-specific until another product needs the sales-gated
       persona variant. */

    /* ─── 2b. Country-unavailable hero ───────────────────────────────
       Used by Commerce/CommerceCountry/CountrySalesUnavailable.cshtml.
       Forward-looking conversion-recovery moment (user came with buying
       intent; the page tells them "not yet, here's what's next"). Pairs
       with .c-persona-card below for the action cards. Host-agnostic,
       semantic tokens only — country names render in --color-accent. */

    .c-unavailable {
        max-width: 56rem;
        margin-inline: auto;
        padding: var(--space-6) 0 var(--space-8);
    }

    .c-unavailable__heading {
        font-family: var(--font-display);
        font-weight: 300;
        font-size: clamp(2.25rem, 5vw, 4rem);
        line-height: 1.05;
        letter-spacing: -0.02em;
        margin: 0 0 var(--space-5);
        color: var(--color-ink);
    }

    .c-unavailable__heading em {
        font-style: italic;
        font-weight: 400;
        color: var(--color-accent);
    }

    .c-unavailable__lede {
        font-size: var(--fs-body-lg);
        line-height: 1.55;
        color: var(--color-ink-soft);
        max-width: 56ch;
        margin: 0;
    }

    /* ─── 3. Checklist ────────────────────────────────────────────────
       Tick + label list. Used in marketing pages (homepage, trust
       center) and in the wizard welcome step. */

    .c-checklist {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .c-checklist__item {
        padding: var(--space-4) 0;
        border-top: 1px solid var(--color-line);
        display: flex;
        align-items: center;
        gap: var(--space-4);
        font-size: var(--fs-ui);
    }

    .c-checklist__item:last-child {
        border-bottom: 1px solid var(--color-line);
    }

    .c-checklist__tick {
        width: 1.25rem;
        height: 1.25rem;
        border-radius: var(--radius-circle);
        background: var(--color-accent);
        color: var(--color-on-dark);
        display: grid;
        place-items: center;
        font-size: var(--fs-caption);
        flex-shrink: 0;
    }

    /* ─── 4. Form error ───────────────────────────────────────────────
       Form-level error callout — emitted by the <app-form-error> tag
       helper. Sits at the top of a form to announce submission errors
       (validation failures, server problems, network errors). Field-level
       errors live next to their input via <app-form-field-wrapper>; this
       is the global "something went wrong with this submission" target.

       Visual treatment: left-stripe + tinted background + error-deep
       text — the same shape as .c-wizard__warning but in error red
       rather than warn amber. No icon; modern form-error convention
       (Stripe / Sumsub / Onfido / GOV.UK) skips it because the visual
       treatment alone is sufficient signal.

       role="alert" on the element gives screen-reader announcement when
       content changes. The :empty rule auto-hides the element when
       there's no error content (defensive — current JS helpers also set
       display explicitly, but :empty protects against future callers
       that forget to). */

    .c-form-error {
        padding: var(--space-3) var(--space-4);
        border-left: 4px solid var(--color-error);
        background: var(--color-error-soft);
        border-radius: var(--radius-sm);
        color: var(--color-error-deep);
        font-size: var(--fs-body);
        font-weight: 500;
        line-height: var(--lh-normal);
        margin-bottom: var(--space-5);
    }

    .c-form-error:empty {
        display: none;
    }

    /* ─── Notice ──────────────────────────────────────────────────────
       Generic informational / state callout. Same structural pattern as
       c-form-error (left-stripe + soft tint + deep text), tone-by-modifier.
       Default: info. Modifiers: --warn. (Error specialization stays in
       c-form-error for now — alert role + JS-driven content.) */

    .c-notice {
        padding: var(--space-3) var(--space-4);
        border-left: 4px solid var(--color-info);
        background: var(--color-info-soft);
        border-radius: var(--radius-sm);
        color: var(--color-info-deep);
        font-size: var(--fs-body);
        line-height: var(--lh-normal);
        margin-bottom: var(--space-5);
    }

    .c-notice--warn {
        border-left-color: var(--color-warn);
        background: var(--color-warn-soft);
        color: var(--color-warn-deep);
    }

    /* ─── 5. Upload (app-upload tag helper) ───────────────────────────
       Two-block form: idle (file picker + actions) and in-flight
       (progress bar + status label). JS toggles which is visible.

       Real upload progress drives the determinate bar; once bytes are
       sent the bar goes indeterminate (sliding stripe) while server-side
       processing runs. */

    .c-upload__field {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    .c-upload__field-label {
        font-size: var(--fs-ui);
        font-weight: 500;
    }

    .c-upload__field-hint {
        font-size: var(--fs-ui-sm);
        color: var(--color-ink-mute);
        margin: 0;
    }

    .c-upload__field input[type="file"] {
        padding: var(--space-3);
        border: 1px dashed var(--color-line);
        border-radius: var(--radius-sm);
        background: var(--color-surface-alt);
        width: 100%;
    }

    .c-upload__actions {
        display: flex;
        gap: var(--space-3);
        justify-content: flex-end;
        margin-top: var(--space-6);
    }

    .c-upload__progress {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        padding-block: var(--space-7);
        align-items: stretch;
        text-align: center;
    }

    .c-upload__progress progress {
        width: 100%;
        height: 0.5rem;
        border: none;
        border-radius: var(--radius-pill);
        background: var(--color-line);
        overflow: hidden;
        appearance: none;
    }

    .c-upload__progress progress::-webkit-progress-bar {
        background: var(--color-line);
        border-radius: var(--radius-pill);
    }
    .c-upload__progress progress::-webkit-progress-value {
        background: var(--color-accent);
        border-radius: var(--radius-pill);
        transition: width var(--dur-fast) var(--ease-out);
    }
    .c-upload__progress progress::-moz-progress-bar {
        background: var(--color-accent);
        border-radius: var(--radius-pill);
    }

    /* Indeterminate during post-upload phases — sliding stripe. */
    .c-upload__progress progress:indeterminate {
        background: linear-gradient(
            90deg,
            var(--color-line) 0%,
            var(--color-accent) 50%,
            var(--color-line) 100%
        );
        background-size: 200% 100%;
        animation: c-upload-progress-indeterminate 1.5s linear infinite;
    }
    .c-upload__progress progress:indeterminate::-webkit-progress-bar {
        background: transparent;
    }
    .c-upload__progress progress:indeterminate::-webkit-progress-value {
        background: transparent;
    }
    .c-upload__progress progress:indeterminate::-moz-progress-bar {
        background: transparent;
    }

    @keyframes c-upload-progress-indeterminate {
        0%   { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    .c-upload__progress-label {
        font-size: var(--fs-ui);
        color: var(--color-ink-soft);
        margin: 0;
    }

    @media (max-width: 48rem) {
        .c-upload__actions {
            flex-direction: column-reverse;
        }
        .c-upload__actions .c-button {
            width: 100%;
            text-align: center;
            justify-content: center;
        }
    }

    /* ─── 6. Readout ──────────────────────────────────────────────────
       Definition-list-style key/value display for read-only record
       summaries. Container-independent: rows stay as rows regardless
       of where the readout is dropped. Collapses to stacked
       label/value at narrow viewports.
       ─────────────────────────────────────────────────────────────── */

    .c-readout {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    .c-readout__row {
        display: flex;
        gap: var(--space-3);
    }

    .c-readout__label {
        color: var(--color-ink-mute);
        min-width: 12rem;
        flex-shrink: 0;
    }

    @media (max-width: 48rem) {
        .c-readout__row {
            flex-direction: column;
            gap: var(--space-1);
        }

        .c-readout__label {
            min-width: 0;
        }
    }

    /* ─── 7. Form field ───────────────────────────────────────────────
       Editable field cluster — label on top, input below. Container-
       independent: renders the same regardless of where it's dropped.
       Use .c-form-field-row to put two fields side-by-side; collapses
       to stacked at narrow viewports.

       Mirrors the wizard's .c-wizard__field set so anything moving from
       a wizard context to a generic form context can swap class prefixes
       and look identical.
       ─────────────────────────────────────────────────────────────── */

    .c-form-field {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    .c-form-field-label {
        font-size: var(--fs-ui);
        font-weight: 500;
    }

    .c-form-field-hint {
        font-size: var(--fs-ui-sm);
        color: var(--color-ink-mute);
    }

    .c-form-field input[type="text"],
    .c-form-field input[type="date"],
    .c-form-field input[type="email"],
    .c-form-field input[type="tel"],
    .c-form-field input[type="number"],
    .c-form-field select,
    .c-form-field textarea {
        width: 100%;
        padding: var(--space-3);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-sm);
        font: inherit;
    }

    .c-form-field input[type="file"] {
        padding: var(--space-3);
        border: 1px dashed var(--color-line);
        border-radius: var(--radius-sm);
        background: var(--color-surface-alt);
        width: 100%;
    }

    .c-form-field--flagged input,
    .c-form-field--flagged select {
        border-color: var(--color-warn);
        box-shadow: 0 0 0 3px var(--color-warn-glow);
    }

    .c-form-field--flagged .c-form-field-flag {
        font-size: var(--fs-ui-sm);
        color: var(--color-warn-deep);
        font-weight: 500;
    }

    .c-form-field-row {
        display: flex;
        gap: var(--space-3);
    }

    .c-form-field-row > .c-form-field {
        flex: 1;
    }

    @media (max-width: 48rem) {
        .c-form-field-row {
            flex-direction: column;
        }
    }

    /* ─── 8. Card ─────────────────────────────────────────────────────
       Boxed content panel with optional head row (title + action link).
       Generic — wraps any content. The head row is not rendered when
       neither title nor action is supplied. Container-independent.
       ─────────────────────────────────────────────────────────────── */

    .c-card {
        border: 1px solid var(--color-line);
        border-radius: var(--radius-md);
        padding: var(--space-5);
        margin-bottom: var(--space-5);
        background: var(--color-surface-alt);
        box-shadow: var(--shadow-md);
    }

    .c-card__head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--space-4);
    }

    .c-card__title {
        font-size: var(--fs-heading);
        font-weight: 600;
        margin: 0;
    }

    /* ─── 9. Disclosure ───────────────────────────────────────────────
       Native <details>/<summary> accordion styled to the design
       system. Use anywhere a row should expand to reveal more text
       — FAQs, glossary entries, expandable policy clauses,
       "Read more" panels, settings sections. Zero JS.

       Markup:
         <details class="c-disclosure">
             <summary class="c-disclosure__summary">Question</summary>
             <div class="c-disclosure__body">
                 <p>Answer paragraph(s).</p>
             </div>
         </details>

       Rows separate themselves with hairline borders. Use a
       <section class="u-mb-9"> wrapper to group several together. */

    .c-disclosure {
        border-bottom: 1px solid var(--color-line);
    }

    .c-disclosure:first-of-type {
        border-top: 1px solid var(--color-line);
    }

    /* The summary is the disclosure trigger. We suppress the
       browser's default marker on both Blink (list-style) and
       WebKit (::-webkit-details-marker) and provide our own
       chevron via ::after. */
    .c-disclosure__summary {
        list-style: none;
        font-family: var(--font-display);
        font-size: var(--fs-body-lg);
        font-weight: 400;
        color: var(--color-ink);
        padding: var(--space-5) var(--space-2);
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: var(--space-4);
        line-height: 1.3;
        transition: color var(--dur-base) var(--ease);
    }

    .c-disclosure__summary::-webkit-details-marker {
        display: none;
    }

    /* Chevron pointing down when closed, up when open. Pure CSS
       — two adjacent borders rotated 45°. */
    .c-disclosure__summary::after {
        content: "";
        flex-shrink: 0;
        margin-left: auto;
        width: 0.5rem;
        height: 0.5rem;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: rotate(45deg) translate(-2px, -2px);
        transition: transform var(--dur-base) var(--ease);
        color: var(--color-ink-mute);
    }

    .c-disclosure[open] > .c-disclosure__summary::after {
        transform: rotate(-135deg) translate(-2px, -2px);
    }

    .c-disclosure__summary:hover,
    .c-disclosure__summary:hover::after {
        color: var(--color-accent);
    }

    .c-disclosure__summary:focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: 4px;
        border-radius: 2px;
    }

    /* The expanded body. Constrained reading measure, muted body
       colour, ink-strong emphasis, brand-coloured links. */
    .c-disclosure__body {
        padding: 0 var(--space-2) var(--space-6);
        color: var(--color-ink-soft);
        font-size: var(--fs-body);
        line-height: 1.6;
        max-width: 70ch;
    }

    .c-disclosure__body > * + * {
        margin-top: var(--space-4);
    }

    .c-disclosure__body p {
        margin: 0;
    }

    .c-disclosure__body strong {
        color: var(--color-ink);
        font-weight: 500;
    }

    .c-disclosure__body ul {
        margin: 0;
        padding-left: var(--space-5);
    }

    .c-disclosure__body li {
        margin: 0;
    }

    .c-disclosure__body li + li {
        margin-top: var(--space-2);
    }

    .c-disclosure__body a {
        color: var(--color-accent);
        text-decoration: underline;
        text-underline-offset: 0.2em;
    }

    .c-disclosure__body a:hover {
        color: var(--color-accent-deep);
    }

    @media (prefers-reduced-motion: reduce) {
        .c-disclosure__summary,
        .c-disclosure__summary::after {
            transition: none;
        }
    }

    /* ─── 10. Page note ───────────────────────────────────────────────
       Hairline-topped muted text block at the bottom of a reference
       page — typically contact info or a "for more information"
       footer. Generic; use on any page that needs a low-key
       end-of-content note. */
    .c-page-note {
        margin-top: var(--space-9);
        padding-top: var(--space-6);
        border-top: 1px solid var(--color-line);
        color: var(--color-ink-mute);
        font-size: var(--fs-body-sm);
    }

    .c-page-note p {
        margin: 0;
    }

    .c-page-note a {
        color: var(--color-accent);
        text-decoration: underline;
        text-underline-offset: 0.2em;
    }

    .c-page-note a:hover {
        color: var(--color-accent-deep);
    }
}