/* ── Document check strip ────────────────────────────────────
   Prominent FedEx-style "Verify a document" input. Sits between
   the marketing hero and the trust strip. Rendered by the
   DocumentCheckControl view component (RCL), styled here. */

@layer components {

    .c-doc-check {
        background: var(--color-surface-alt);
        border-top: 1px solid var(--color-line);
        border-bottom: 1px solid var(--color-line);
    }

    .c-doc-check__inner {
        max-width: 80rem;
        margin-inline: auto;
        padding: var(--space-7) clamp(var(--space-5), 4vw, var(--space-7));
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    .c-doc-check__label {
        /* Match the .c-hero__meta strong heading ("Verified by") used
           on the opposite side of the hero so both in-hero block
           labels share typography. */
        display: block;
        font-family: var(--font-display);
        font-size: var(--fs-body-sm);
        font-weight: 500;
        color: var(--color-ink);
    }

    .c-doc-check__form {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-3);
        align-items: stretch;
    }

    .c-doc-check__input {
        flex: 1 1 24rem;
        min-width: 0;
        padding: var(--space-4) var(--space-5);
        font-family: inherit;
        font-size: var(--fs-body-lg);
        color: var(--color-ink);
        background: var(--color-surface);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-pill);
        transition: border-color var(--dur-fast) var(--ease),
                    box-shadow var(--dur-fast) var(--ease);
    }

    .c-doc-check__input::placeholder {
        color: var(--color-ink-mute);
    }

    .c-doc-check__input:focus-visible {
        outline: none;
        border-color: var(--color-accent);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent);
    }

    .c-doc-check__button {
        /* Inherit standard .c-button sizing so it matches the rest of
           the page. The strip variant's oversized input is handled by
           the input rule alone; the button stays at default height. */
    }

    .c-doc-check__error {
        min-height: 1.25rem;
        font-size: var(--fs-ui-sm);
        color: var(--color-accent-deep);
    }

    .c-doc-check__error:empty {
        display: none;
    }



    /* One column for everything on the way in. The drop zone, the caption,
       the rule and the code box all share a width, so the page reads as a
       single stack rather than a wide panel with narrow things under it.
       Paragraphs keep their own reading measure and stay narrower -- that is
       typography, not misalignment. */
    .c-doc-verify {
        --doc-check-column: 44rem;
        width: 100%;
        max-width: var(--doc-check-column);
        margin-inline: auto;
    }

    /* -- Drop zone -----------------------------------------------
       The primary way into a check: drop the file, the browser hashes
       it, nothing is uploaded. Sized to be the page rather than a
       control on it -- a target you are meant to drag onto has to look
       like one from across the room.

       The whole panel is the button. Hunting for a small "browse" link
       inside a large drop target is the usual failure here. */

    .c-doc-drop {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-2);
        width: 100%;
        padding: var(--space-9) var(--space-6);
        text-align: center;
        cursor: pointer;
        /* Faint dot grid so the empty area reads as a surface waiting for
           something, not as a gap in the layout. */
        background:
            radial-gradient(circle,
                color-mix(in srgb, var(--color-line) 60%, transparent) 1px,
                transparent 1px) 0 0 / 1.375rem 1.375rem,
            var(--color-surface-alt);
        border: 1px dashed var(--color-line);
        border-radius: var(--radius-lg);
        transition: border-color var(--dur-fast) var(--ease),
                    background-color var(--dur-fast) var(--ease);
    }

    .c-doc-drop:hover,
    .c-doc-drop:focus-within {
        border-color: var(--color-accent);
    }

    .c-doc-drop.is-dragover {
        border-color: var(--color-accent);
        background:
            radial-gradient(circle,
                color-mix(in srgb, var(--color-accent) 40%, transparent) 1px,
                transparent 1px) 0 0 / 1.375rem 1.375rem,
            color-mix(in srgb, var(--color-accent) 7%, var(--color-surface-alt));
    }

    .c-doc-drop__file {
        display: none;
    }

    .c-doc-drop__icon {
        display: grid;
        place-items: center;
        width: var(--space-8);
        height: var(--space-8);
        margin-bottom: var(--space-3);
        font-size: var(--fs-heading);
        color: var(--color-accent);
        border: 1px solid var(--color-accent);
        border-radius: var(--radius-circle);
    }

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

    .c-doc-drop__hint,
    .c-doc-drop__status {
        margin: 0;
        font-size: var(--fs-body-sm);
        color: var(--color-ink-mute);
    }

    .c-doc-drop__status:empty {
        display: none;
    }

    .c-doc-drop__button {
        margin-top: var(--space-5);
        padding: var(--space-3) var(--space-6);
        color: var(--color-ink);
        border-color: var(--color-accent);
        border-radius: var(--radius-md);
    }

    .c-doc-drop__button:hover {
        background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    }

    /* Sits under the panel, not inside it: it is a statement about the
       page's behaviour and it is the reason somebody is willing to drop a
       document here at all. */
    .c-doc-drop__privacy {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        margin: 0;
        font-size: var(--fs-ui-sm);
        color: var(--color-ink-mute);
    }

    /* A rule with the word sitting in it, so the two inputs read as
       alternatives rather than as steps. */
    .c-doc-drop__or {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        color: var(--color-ink-mute);
        font-size: var(--fs-ui-sm);
    }

    .c-doc-drop__or::before,
    .c-doc-drop__or::after {
        content: "";
        flex: 1 1 auto;
        border-top: 1px solid var(--color-line);
    }

    .c-doc-drop__code {
        width: 100%;
    }

    .c-doc-drop__matches {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        padding: var(--space-5);
        background: var(--color-surface-alt);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-md);
    }

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

    .c-doc-drop__matches-list {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .c-doc-drop__match {
        display: flex;
        justify-content: space-between;
        gap: var(--space-4);
        padding: var(--space-3) var(--space-4);
        color: var(--color-ink);
        text-decoration: none;
        background: var(--color-surface);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-sm);
    }

    .c-doc-drop__match:hover,
    .c-doc-drop__match:focus-visible {
        border-color: var(--color-accent);
    }

    .c-doc-drop__match-code {
        color: var(--color-ink-mute);
        font-size: var(--fs-ui-sm);
        white-space: nowrap;
    }

    /* -- Check result ---------------------------------------------
       One card, four outcomes. Attested is the only pass; the other
       three are distinct answers rather than shades of failure, so each
       gets its own colour, its own glyph and its own sentence.

       Tone is set on the card by is-attested / is-superseded /
       is-registered / is-notfound, and every tinted part reads its
       colours from the three custom properties that block sets. Adding
       an outcome means one block, not a sweep through the file. */

    .c-doc-result {
        --doc-tone:      var(--color-ink-mute);
        --doc-tone-soft: var(--color-surface-alt);
        --doc-tone-line: var(--color-line);

        display: flex;
        flex-direction: column;
        background: var(--color-surface);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-lg);
        overflow: hidden;
    }

    .c-doc-result.is-attested {
        --doc-tone: var(--color-success-deep);
        --doc-tone-soft: var(--color-success-soft);
        --doc-tone-line: var(--color-success);
    }

    .c-doc-result.is-superseded {
        --doc-tone: var(--color-warn-deep);
        --doc-tone-soft: var(--color-warn-soft);
        --doc-tone-line: var(--color-warn);
    }

    .c-doc-result.is-registered {
        --doc-tone: var(--color-info-deep);
        --doc-tone-soft: var(--color-info-soft);
        --doc-tone-line: var(--color-info);
    }

    .c-doc-result__filename {
        margin: 0;
        padding: var(--space-5) var(--space-6) 0;
        font-family: var(--font-mono, ui-monospace, monospace);
        font-size: var(--fs-ui-sm);
        color: var(--color-ink-mute);
        overflow-wrap: anywhere;
    }

    /* Stage rail */
    .c-doc-stages {
        display: flex;
        margin: 0;
        padding: var(--space-5) var(--space-6) var(--space-6);
        list-style: none;
    }

    .c-doc-stages__stage {
        position: relative;
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-2);
        text-align: center;
    }

    .c-doc-stages__stage::before {
        content: "";
        position: absolute;
        top: calc(var(--space-5) / 2);
        right: 50%;
        left: -50%;
        border-top: 1px solid var(--color-line);
    }

    .c-doc-stages__stage:first-child::before {
        display: none;
    }

    .c-doc-stages__stage.is-done::before,
    .c-doc-stages__stage.is-active::before {
        border-color: var(--color-accent);
    }

    .c-doc-stages__mark {
        position: relative;
        display: grid;
        place-items: center;
        width: var(--space-5);
        height: var(--space-5);
        font-size: var(--fs-ui-sm);
        color: var(--color-ink-mute);
        background: var(--color-surface);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-circle);
        transition: color var(--dur-base) var(--ease),
                    border-color var(--dur-base) var(--ease);
    }

    .c-doc-stages__stage.is-active .c-doc-stages__mark,
    .c-doc-stages__stage.is-done .c-doc-stages__mark {
        color: var(--color-accent);
        border-color: var(--color-accent);
    }

    .c-doc-stages__stage.is-active .c-doc-stages__mark {
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 18%, transparent);
    }

    .c-doc-stages__label {
        font-size: var(--fs-ui-sm);
        color: var(--color-ink-mute);
    }

    .c-doc-stages__stage.is-done .c-doc-stages__label,
    .c-doc-stages__stage.is-active .c-doc-stages__label {
        color: var(--color-ink);
    }

    /* The last stage takes the outcome's colour, so the rail ends on the
       answer rather than on a generic tick. */
    .c-doc-result.is-attested .c-doc-stages__stage:last-child.is-done .c-doc-stages__mark,
    .c-doc-result.is-superseded .c-doc-stages__stage:last-child.is-done .c-doc-stages__mark,
    .c-doc-result.is-registered .c-doc-stages__stage:last-child.is-done .c-doc-stages__mark,
    .c-doc-result.is-notfound .c-doc-stages__stage:last-child.is-done .c-doc-stages__mark {
        color: var(--doc-tone);
        border-color: var(--doc-tone-line);
    }

    /* Verdict strip -- the whole answer in one band, before any detail. */
    .c-doc-result__strip {
        display: flex;
        align-items: flex-start;
        gap: var(--space-4);
        padding: var(--space-5) var(--space-6);
        background: var(--doc-tone-soft);
        border-top: 1px solid var(--doc-tone-line);
        border-bottom: 1px solid var(--doc-tone-line);
    }

    /* Solid, not tinted: the one element that has to survive a glance. */
    .c-doc-result__glyph {
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        width: var(--space-6);
        height: var(--space-6);
        font-size: var(--fs-body);
        color: var(--color-on-dark);
        background: var(--doc-tone);
        border-radius: var(--radius-circle);
    }

    .c-doc-result__label {
        display: block;
        font-family: var(--font-mono, ui-monospace, monospace);
        font-size: var(--fs-caption);
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--doc-tone);
    }

    .c-doc-result__heading {
        margin: var(--space-1) 0 0;
        font-family: var(--font-display);
        font-size: var(--fs-subheading);
        font-weight: 600;
        color: var(--color-ink);
    }

    .c-doc-result__lede {
        margin: var(--space-2) 0 0;
        max-width: var(--measure-body);
        font-size: var(--fs-body-sm);
        color: var(--color-ink-soft, var(--color-ink-mute));
    }

    .c-doc-result__lede:empty {
        display: none;
    }

    .c-doc-result__body {
        display: grid;
        grid-template-columns: 9rem 1fr;
        gap: 0 var(--space-6);
        padding: var(--space-5) var(--space-6) 0;
    }

    @media (max-width: 40rem) {
        .c-doc-result__body {
            grid-template-columns: 1fr;
        }
    }

    /* A stand-in for the document, not a preview: we never received the
       file, and anything picture-like would imply we did. */
    .c-doc-result__art {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: var(--space-3);
        aspect-ratio: 3 / 4;
        padding: var(--space-4);
        background: var(--color-surface-alt);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-md);
    }

    .c-doc-result.is-notfound .c-doc-result__art {
        opacity: 0.5;
    }

    .c-doc-result__art-line {
        height: var(--space-2);
        background: var(--color-line);
        border-radius: var(--radius-pill);
    }

    .c-doc-result__art-line:nth-child(2) {
        width: 85%;
    }

    .c-doc-result__art-line:nth-child(4) {
        width: 70%;
    }

    @media (max-width: 40rem) {
        .c-doc-result__art {
            display: none;
        }
    }

    /* Label left, value right. */
    .c-doc-result__fields {
        display: grid;
        grid-template-columns: auto 1fr;
        margin: 0;
    }

    .c-doc-result__fields dt,
    .c-doc-result__fields dd {
        padding: var(--space-3) 0;
        border-bottom: 1px solid var(--color-line);
        font-size: var(--fs-body-sm);
    }

    .c-doc-result__fields dt {
        color: var(--color-ink-mute);
        padding-right: var(--space-4);
    }

    .c-doc-result__fields dd {
        margin: 0;
        font-weight: 600;
        color: var(--color-ink);
        text-align: right;
        overflow-wrap: anywhere;
    }

    .c-doc-result__fields dd.is-tone {
        color: var(--doc-tone);
    }

    .c-doc-result__fields dd.is-code {
        font-family: var(--font-mono, ui-monospace, monospace);
        font-weight: 500;
        letter-spacing: 0.04em;
    }

    /* Who signed it. Its own block because a person vouching is a
       different kind of fact from a field on a form. */
    .c-doc-result__professional {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        gap: var(--space-4);
        margin-top: var(--space-5);
        padding: var(--space-4) var(--space-5);
        background: var(--doc-tone-soft);
        border: 1px solid var(--doc-tone-line);
        border-radius: var(--radius-md);
    }

    .c-doc-result__avatar {
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        width: var(--space-6);
        height: var(--space-6);
        font-family: var(--font-display);
        font-weight: 600;
        color: var(--color-on-dark);
        background: var(--doc-tone);
        border-radius: var(--radius-circle);
    }

    .c-doc-result__professional-name {
        display: block;
        font-weight: 600;
        color: var(--color-ink);
    }

    .c-doc-result__professional-role,
    .c-doc-result__professional-cert {
        display: block;
        font-size: var(--fs-ui-sm);
        color: var(--color-ink-mute);
    }

    .c-doc-result__professional-cert {
        margin-top: var(--space-1);
        font-family: var(--font-mono, ui-monospace, monospace);
        color: var(--doc-tone);
    }

    /* What the answer does and does not cover. The part a checker is most
       likely to assume, so it is stated rather than implied. */
    .c-doc-result__banner {
        grid-column: 1 / -1;
        margin-top: var(--space-5);
        padding: var(--space-4) var(--space-5);
        font-size: var(--fs-body-sm);
        color: var(--color-ink);
        background: var(--doc-tone-soft);
        border: 1px solid var(--doc-tone-line);
        border-radius: var(--radius-md);
    }

    .c-doc-result__banner p {
        margin: 0;
    }

    .c-doc-result__banner p + p {
        margin-top: var(--space-2);
        color: var(--color-ink-mute);
    }

    .c-doc-result__banner strong {
        color: var(--doc-tone);
    }

    .c-doc-result__actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-4);
        margin-top: var(--space-5);
        padding: var(--space-5) var(--space-6);
        border-top: 1px solid var(--color-line);
    }

    .c-doc-result__action {
        color: var(--color-on-dark);
        background: var(--doc-tone);
        border-color: var(--doc-tone);
    }

    .c-doc-result__again {
        margin-left: auto;
        color: var(--color-accent);
    }

    /* ── Hero variant — two shapes by viewport ─────────────────────
       When rendered anywhere inside a .c-hero the control has two
       layouts:
         narrow viewports  → full-width strip, sits on its own row
                             below the action buttons (thanks to
                             flex-basis: 100% forcing a line break).
         ≥1100 px          → fixed-width card, top-right of the hero.
       Placement is owned by the app's hero CSS (.c-hero__rail); this
       file handles only the control's own shape, so it is scoped to
       .c-hero rather than to one particular slot within it. */
    .c-hero .c-doc-check {
        flex-basis: 100%;
        width: 100%;
    }

    @media (min-width: 1100px) {
        .c-hero .c-doc-check {
            flex-basis: auto;
            width: 22rem;
            background: var(--color-surface);
            border: 1px solid var(--color-line);
            border-radius: var(--radius-md);
        }

        .c-hero .c-doc-check .c-doc-check__inner {
            max-width: none;
            padding: var(--space-4) var(--space-5);
        }

        .c-hero .c-doc-check .c-doc-check__form {
            flex-direction: column;
            gap: var(--space-2);
        }

        .c-hero .c-doc-check .c-doc-check__input {
            flex: 1 1 auto;
            width: 100%;
            padding: var(--space-3) var(--space-4);
            font-size: var(--fs-body);
        }

        .c-hero .c-doc-check .c-doc-check__button {
            width: 100%;
            justify-content: center;
        }
    }
}