@layer components {

    /* ══════════════════════════════════════════════════════════════
       Country compliance calendar — a DENSE REFERENCE page.

       Its own file because the marketing components are editorial: they
       are built for the home page, where generous padding, numbered
       section heads and card grids are the point. Composing this page out
       of them was tried and it roughly doubled the page height while
       burying the data — the obligation list is a table of dates, and it
       should read like one.

       Everything here is layout and density only. Colour, tone and status
       come from the shared palette (.c-notice--danger, .c-readout__badge)
       so severity still reads the same as it does everywhere else.
       ══════════════════════════════════════════════════════════════ */

    /* ─── Severity alert ───────────────────────────────────────────
       Count LEFT, content RIGHT. The count is the whole point of the
       block — stacking it above the text made the alert twice as tall
       and gave the number no more weight than a heading. */
    .c-deadline-alert {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: var(--space-7);
        align-items: start;
        /* Overrides .c-notice's one-line-callout padding. Same @layer, and
           marketing CSS loads after components (HeadAssetsTagHelper), so this
           wins on source order without a specificity bump. */
        padding: var(--space-7);
    }

    .c-deadline-alert__count {
        font-family: var(--font-display);
        font-size: var(--fs-display-l);
        font-weight: 800;
        line-height: 0.82;
        letter-spacing: -0.05em;
        /* Short rule above the numeral, as in the design — it anchors the
           count to the top edge of the copy beside it. */
        border-top: 1px solid currentColor;
        padding-top: var(--space-3);
    }

    .c-deadline-alert__count span {
        display: block;
        margin-top: var(--space-2);
        font-family: var(--font-mono);
        font-size: var(--fs-caption);
        font-weight: 400;
        letter-spacing: 0.16em;
        text-transform: uppercase;
    }

    .c-deadline-alert__title {
        font-family: var(--font-display);
        font-size: var(--fs-display-s);
        line-height: var(--lh-tight);
        letter-spacing: -0.025em;
        max-width: 26ch;
        margin-bottom: var(--space-3);
    }

    /* Facts on one line, not a bulleted list — a list gave three pieces of
       metadata the same visual weight as the headline above them. */
    .c-deadline-alert__meta {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-5);
        margin: var(--space-4) 0;
        font-family: var(--font-mono);
        font-size: var(--fs-ui-sm);
    }

    /* ─── Filter panel ─────────────────────────────────────────────── */
    .c-deadline-filter {
        padding: var(--space-6);
        background: var(--color-surface);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-sm);
    }

    .c-deadline-filter__hint {
        max-width: var(--measure-body);
        margin-bottom: var(--space-5);
        color: var(--color-ink-mute);
    }

    /* One horizontal row per question. Stacked radio lists pushed the list
       of actual deadlines below the fold. */
    .c-deadline-chips {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-2);
        margin-bottom: var(--space-3);
    }

    .c-deadline-chips__label {
        font-family: var(--font-mono);
        font-size: var(--fs-caption);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--color-ink-mute);
        margin-right: var(--space-2);
    }

    /* The chip is a <label> wrapping a visually-hidden radio, so the whole
       control stays a native radio group: keyboard arrows, form POST and
       screen-reader semantics all come free, and only the paint changes. */
    .c-deadline-chip {
        font-family: var(--font-mono);
        font-size: var(--fs-ui-sm);
        line-height: 1;
        padding: var(--space-3) var(--space-4);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-pill);
        color: var(--color-ink-mute);
        cursor: pointer;
        transition: border-color var(--dur-fast) var(--ease),
                    background var(--dur-fast) var(--ease),
                    color var(--dur-fast) var(--ease);
    }

    .c-deadline-chip:hover {
        border-color: var(--color-ink-mute);
    }

    .c-deadline-chip input {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
    }

    .c-deadline-chip:has(input:checked) {
        background: var(--color-ink);
        border-color: var(--color-ink);
        color: var(--color-surface);
    }

    .c-deadline-chip:has(input:focus-visible) {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
    }

    .c-deadline-filter__count {
        margin-top: var(--space-4);
        padding-top: var(--space-4);
        border-top: 1px solid var(--color-line);
        font-family: var(--font-mono);
        font-size: var(--fs-ui-sm);
        color: var(--color-ink-mute);
    }

    .c-deadline-filter__count b {
        color: var(--color-ink);
        font-weight: 500;
    }

    /* ─── Obligation row ───────────────────────────────────────────
       date │ content │ tag, separated by hairlines. NOT .c-requirement —
       that is a bordered card built for a 3-across marketing grid, and a
       column of them turns a date list into a stack of boxes. */
    .c-deadline-row {
        display: grid;
        grid-template-columns: 7.5rem 1fr auto;
        gap: var(--space-5);
        align-items: start;
        padding: var(--space-4) 0;
        border-bottom: 1px solid var(--color-line);
    }

    .c-deadline-row:first-of-type {
        border-top: 1px solid var(--color-ink);
    }

    .c-deadline-row__date {
        font-family: var(--font-mono);
        font-size: var(--fs-ui-sm);
        color: var(--color-ink-mute);
    }

    .c-deadline-row__date b {
        display: block;
        font-family: var(--font-display);
        font-size: var(--fs-body-lg);
        font-weight: 700;
        color: var(--color-ink);
    }

    .c-deadline-row__title {
        font-family: var(--font-display);
        font-size: var(--fs-subheading);
        margin-bottom: var(--space-1);
    }

    .c-deadline-row__who {
        font-size: var(--fs-body-sm);
        color: var(--color-ink-mute);
    }

    /* Variant label — present only when a rule returns concurrent tracks.
       Without it two rows show different dates with nothing saying why. */
    .c-deadline-row__variant {
        margin-left: var(--space-2);
        padding: 0 var(--space-2);
        border: 1px solid currentColor;
        border-radius: var(--radius-sm);
        font-family: var(--font-mono);
        font-size: var(--fs-caption);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        white-space: nowrap;
        color: var(--color-accent);
    }

    /* Warn-toned, not danger: the date moving is an uncertainty to note,
       not a consequence to fear. */
    .c-deadline-row__provisional {
        margin-top: var(--space-2);
        font-family: var(--font-mono);
        font-size: var(--fs-ui-sm);
        color: var(--color-warn-deep);
    }

    .c-deadline-row__citation {
        margin-top: var(--space-2);
        font-family: var(--font-mono);
        font-size: var(--fs-ui-sm);
        color: var(--color-ink-soft);
    }

    /* ─── Undated block ────────────────────────────────────────────
       Dashed rather than solid: these are real obligations without a date
       yet, and the border says "provisional" before the copy does. */
    .c-deadline-undated {
        padding: var(--space-6);
        border: 1px dashed var(--color-line);
        border-radius: var(--radius-sm);
    }

    .c-deadline-undated__row {
        display: grid;
        grid-template-columns: 10rem 1fr;
        gap: var(--space-5);
        padding: var(--space-3) 0;
        border-bottom: 1px solid var(--color-line);
    }

    .c-deadline-undated__row:last-of-type {
        border-bottom: 0;
    }

    .c-deadline-undated__needs {
        font-family: var(--font-mono);
        font-size: var(--fs-ui-sm);
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--color-ink-mute);
        padding-top: 0.2em;
    }

    .c-deadline-verified {
        margin-top: var(--space-7);
        font-family: var(--font-mono);
        font-size: var(--fs-ui-sm);
        color: var(--color-ink-soft);
    }

    @media (max-width: 760px) {
        .c-deadline-alert {
            grid-template-columns: 1fr;
            gap: var(--space-4);
        }

        .c-deadline-row,
        .c-deadline-undated__row {
            grid-template-columns: 1fr;
            gap: var(--space-2);
        }
    }
}