@layer components {

    /* ── Government forms finder (/forms/{country}) ──────────────────
     A registry search tool, not a marketing page: dense rows on a pale
     canvas, a filter bar that stays in reach while scrolling, and a topic
     rail beside the results that becomes a row of chips on a phone.

     Host-local because only this site has the finder. */

    .c-finder {
        background: var(--color-surface-alt);
        color: var(--color-ink);
        padding-bottom: var(--space-9);
    }

    .c-finder__inner {
        max-width: var(--max-content-width);
        margin-inline: auto;
        padding-inline: clamp(var(--space-4), 4vw, var(--space-7));
    }

    .c-finder__band {
        height: var(--space-2);
        background: linear-gradient(90deg, var(--color-accent) 0 60%, var(--color-accent-soft) 60% 100%);
    }

    /* ── Header ──────────────────────────────────────────────────── */

    .c-finder__head {
        padding-block: var(--space-8) var(--space-6);
    }

    .c-finder__eyebrow {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        margin: 0 0 var(--space-3);
        font-family: var(--font-mono);
        font-size: var(--fs-caption);
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--color-ink-mute);
    }

    .c-finder__title {
        margin: 0 0 var(--space-3);
        font-family: var(--font-display);
        font-size: var(--fs-display-m);
        line-height: var(--lh-tight);
        color: var(--color-ink-h1);
        text-wrap: balance;
    }

    .c-finder__lede {
        margin: 0;
        max-width: 68ch;
        color: var(--color-ink-soft);
    }

    .c-finder__lede strong {
        color: var(--color-ink);
    }

    .c-finder__preview {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        margin: var(--space-4) 0 0;
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-md);
        background: var(--color-warn-soft);
        color: var(--color-warn-deep);
        font-size: var(--fs-body-sm);
    }

    /* ── Filter bar ──────────────────────────────────────────────── */

    .c-finder__bar {
        position: sticky;
        top: 0;
        z-index: 5;
        background: var(--color-surface-alt);
        border-block: 1px solid var(--color-line);
        padding-block: var(--space-3);
    }

    .c-finder__bar-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-3);
    }

    .c-finder__search {
        position: relative;
        flex: 1 1 20rem;
        min-width: 0;
    }

    .c-finder__search i {
        position: absolute;
        left: var(--space-4);
        top: 50%;
        transform: translateY(-50%);
        color: var(--color-ink-mute);
        pointer-events: none;
    }

    .c-finder__search input {
        width: 100%;
        padding: var(--space-3) var(--space-4) var(--space-3) var(--space-8);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-md);
        background: var(--color-surface);
        color: var(--color-ink);
        font: inherit;
        font-size: var(--fs-body);
    }

    .c-finder__bar select,
    .c-forms-search select,
    .c-finder__check {
        padding: var(--space-3) var(--space-4);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-md);
        background: var(--color-surface);
        color: var(--color-ink);
        font: inherit;
        font-size: var(--fs-ui-sm);
    }

    .c-finder__check {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        cursor: pointer;
        user-select: none;
    }

    .c-finder__check input {
        accent-color: var(--color-accent);
        margin: 0;
    }

    .c-finder__search input:focus-visible,
    .c-finder__bar select:focus-visible,
    .c-forms-search select:focus-visible,
    .c-finder__check:focus-within,
    .c-finder__topic:focus-visible,
    .c-finder__open:focus-visible,
    .c-finder__pager a:focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
    }

    /* ── Body: rail beside results ───────────────────────────────── */

    .c-finder__body {
        display: grid;
        grid-template-columns: 14rem minmax(0, 1fr);
        gap: var(--space-7);
        padding-block: var(--space-6);
    }

    .c-finder__topics {
        display: grid;
        gap: var(--space-1);
        align-content: start;
        position: sticky;
        top: calc(var(--space-10) + var(--space-4));
    }

    .c-finder__rail-head {
        margin: 0 0 var(--space-2);
        font-family: var(--font-mono);
        font-size: var(--fs-caption);
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--color-ink-mute);
    }

    .c-finder__topic {
        display: flex;
        justify-content: space-between;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-sm);
        color: var(--color-ink);
        font-size: var(--fs-body-sm);
        text-decoration: none;
    }

    .c-finder__topic:hover {
        background: var(--color-accent-wash);
    }

    .c-finder__topic[aria-current="page"] {
        background: var(--color-accent);
        color: var(--color-on-dark);
        font-weight: 600;
    }

    .c-finder__count {
        font-family: var(--font-mono);
        font-size: var(--fs-ui-sm);
        font-weight: 400;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    /* ── Results ─────────────────────────────────────────────────── */

    .c-finder__status {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: baseline;
        gap: var(--space-2);
        margin-bottom: var(--space-3);
    }

    .c-finder__total {
        margin: 0;
        font-family: var(--font-display);
        font-size: var(--fs-subheading);
        font-weight: 600;
    }

    .c-finder__total span {
        margin-left: var(--space-2);
        font-family: var(--font-mono);
        font-size: var(--fs-caption);
        font-weight: 400;
        color: var(--color-ink-mute);
    }

    .c-finder__reset {
        font-size: var(--fs-body-sm);
        color: var(--color-accent);
        text-underline-offset: 3px;
    }

    .c-finder__results {
        list-style: none;
        margin: 0;
        padding: 0;
        background: var(--color-surface);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
    }

    .c-finder__row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--space-2) var(--space-5);
        padding: var(--space-4) var(--space-5);
        border-top: 1px solid var(--color-line);
    }

    .c-finder__row:first-child {
        border-top: 0;
    }

    .c-finder__main {
        display: grid;
        gap: var(--space-1);
        min-width: 0;
    }

    .c-finder__name {
        margin: 0;
        font-size: var(--fs-body);
        font-weight: 600;
        line-height: var(--lh-snug);
        overflow-wrap: anywhere;
    }

    .c-finder__name a {
        color: var(--color-ink);
        text-decoration: none;
    }

    .c-finder__name a:hover {
        color: var(--color-accent);
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .c-finder__also {
        margin: 0;
        font-size: var(--fs-body-sm);
        color: var(--color-ink-mute);
        overflow-wrap: anywhere;
    }

    .c-finder__meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-1) var(--space-4);
        margin: var(--space-1) 0 0;
        font-family: var(--font-mono);
        font-size: var(--fs-caption);
        color: var(--color-ink-mute);
        font-variant-numeric: tabular-nums;
    }

    .c-finder__file {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .c-finder__open {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        white-space: nowrap;
        padding: var(--space-2) var(--space-4);
        border: 1px solid var(--color-accent);
        border-radius: var(--radius-md);
        color: var(--color-accent);
        font-size: var(--fs-ui-sm);
        font-weight: 600;
        text-decoration: none;
        transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
    }

    .c-finder__open:hover {
        background: var(--color-accent);
        color: var(--color-on-dark);
    }

    .c-finder__missing {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        white-space: nowrap;
        font-size: var(--fs-ui-sm);
        color: var(--color-error-deep);
    }

    .c-finder__empty {
        margin: 0;
        padding: var(--space-8) var(--space-5);
        background: var(--color-surface);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-lg);
        text-align: center;
        color: var(--color-ink-mute);
    }

    .c-finder__empty strong {
        display: block;
        margin-bottom: var(--space-1);
        color: var(--color-ink);
        font-size: var(--fs-body);
    }

    /* ── Pager ───────────────────────────────────────────────────── */

    .c-finder__pager {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: var(--space-2);
        margin-top: var(--space-5);
        font-size: var(--fs-ui-sm);
    }

    .c-finder__page,
    .c-finder__step {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        min-width: 2.5rem;
        justify-content: center;
        padding: var(--space-2) var(--space-3);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-md);
        background: var(--color-surface);
        color: var(--color-ink);
        text-decoration: none;
        font-variant-numeric: tabular-nums;
    }

    .c-finder__page:hover,
    .c-finder__step:hover {
        border-color: var(--color-accent);
        color: var(--color-accent);
    }

    .c-finder__page[aria-current="page"] {
        background: var(--color-accent);
        border-color: var(--color-accent);
        color: var(--color-on-dark);
        font-weight: 600;
    }

    .c-finder__gap {
        color: var(--color-ink-mute);
    }

    /* ── About ───────────────────────────────────────────────────── */

    .c-finder__about {
        margin-top: var(--space-6);
        padding-top: var(--space-5);
        border-top: 1px solid var(--color-line);
        color: var(--color-ink-mute);
        font-size: var(--fs-body-sm);
    }

    .c-finder__about p {
        margin: 0 0 var(--space-2);
        max-width: 80ch;
    }

    .c-finder__about a {
        color: var(--color-accent);
    }

    /* ── Home page (/forms): hero search and country cards ───────── */

    .c-forms-search {
        display: grid;
        gap: var(--space-4);
    }

    .c-forms-search__row {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-3);
    }

    /* Inside the hero panel the panel is the card, so the rows lose their own. */
    .c-finder__results--flush {
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .c-finder__results--flush .c-finder__row {
        padding-inline: 0;
    }

    .c-forms-countries {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
        gap: var(--space-4);
    }

    .c-forms-country {
        display: grid;
        gap: var(--space-1);
        padding: var(--space-5);
        background: var(--color-surface);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-lg);
        color: var(--color-ink);
        text-decoration: none;
        transition: border-color var(--dur-fast) var(--ease);
    }

    .c-forms-country:hover {
        border-color: var(--color-accent);
    }

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

    .c-forms-country__name {
        font-family: var(--font-display);
        font-size: var(--fs-body-lg);
        font-weight: 500;
    }

    .c-forms-country__count {
        font-family: var(--font-display);
        font-size: var(--fs-heading);
        color: var(--color-accent);
        font-variant-numeric: tabular-nums;
    }

    .c-forms-country__count small,
    .c-forms-country__sources {
        font-family: var(--font-body);
        font-size: var(--fs-ui-sm);
        color: var(--color-ink-mute);
    }

    /* ── Phone: one column, topics become a scrolling row of chips ── */

    @media (max-width: 800px) {
        .c-finder__body {
            grid-template-columns: minmax(0, 1fr);
            gap: var(--space-4);
        }

        .c-finder__topics {
            position: static;
            display: flex;
            flex-wrap: nowrap;
            overflow-x: auto;
            gap: var(--space-2);
            padding-bottom: var(--space-1);
        }

        .c-finder__rail-head {
            display: none;
        }

        .c-finder__topic {
            flex: 0 0 auto;
            border: 1px solid var(--color-line);
            border-radius: var(--radius-pill);
            background: var(--color-surface);
        }

        .c-finder__topic small {
            display: none;
        }

        .c-finder__row {
            grid-template-columns: minmax(0, 1fr);
        }

        .c-finder__open,
        .c-finder__missing {
            justify-self: start;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .c-finder__open,
        .c-forms-country {
            transition: none;
        }
    }
}