/*
 * Public secure lookup (prototype v6.1 "view-track"): Views/Lookup/{Index,Code,Status}.cshtml and
 * Views/InformationResponse/Index.cshtml. Contract: docs/architecture/ui-design-system.md.
 * No inline styles (CSP style-src 'self').
 */
/* .track: 880px including a 22px gutter, 40px below the band and 64px above the footer (the main area adds 48px). */
.lookup {
    max-width: 880px;
    margin: 40px auto calc(64px - var(--space-7));
    padding-inline: 22px;
}

.lookup > * {
    margin-top: 0;
    margin-bottom: 0;
}

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

/* .search / .timeline: white box, 14px radius, no shadow. */
.lookup-panel {
    padding: 22px;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: 14px;
}

.lookup-panel > * {
    margin-top: 0;
    margin-bottom: 0;
}

.lookup-panel > * + * {
    margin-top: 14px;
}

/* A visually hidden heading takes no room: the content right after it starts at the top of the box. */
.lookup-panel > .visually-hidden + * {
    margin-top: 0;
}

/* Messages as the prototype ".notice": thin border, 9px radius, 12px text. */
.lookup .alert {
    padding: 12px 13px;
    border-left-width: 1px;
    border-radius: 9px;
    font-size: 12px;
    line-height: 1.5;
}

.lookup .card {
    border-radius: 14px;
}

.lookup .card + .card {
    margin-top: var(--space-4);
}

.lookup-panel__title {
    font-size: var(--text-lg);
    letter-spacing: -0.01em;
}

/* Two-column search fields (one column below 720px). */
.lookup-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* V2.3 review A11Y-D-08: only the tracking number has a hint; align both inputs on the same line. */
    align-items: end;
    gap: 15px;
    /* Prototype .search: the browser's normal line height for labels and inputs. */
    line-height: normal;
}

.lookup-fields--single {
    grid-template-columns: minmax(0, 20rem);
}

/* .field: 6px gap, 12px labels (weight 750) and 11px hints (.hint). */
.lookup-fields .field {
    gap: 6px;
    margin: 0;
}

/* V2.3 P5 (P5U-06, as .form-grid--aligned of internal.css): from 720px (and with subgrid support) both fields share four grid
   rows — label (aligned to the bottom), hint, input, error — so the two inputs stay on one line whether only the tracking number
   has a hint or only one field shows an error (align-items: end above is the fallback without subgrid). */
@supports (grid-template-rows: subgrid) {
    @media (min-width: 720px) {
        .lookup-fields:not(.lookup-fields--single) > .field {
            display: grid;
            grid-row: span 4;
            grid-template-rows: subgrid;
            row-gap: 6px;
            align-content: start;
        }

        .lookup-fields:not(.lookup-fields--single) > .field > .field__label {
            grid-row: 1;
            align-self: end;
        }

        .lookup-fields:not(.lookup-fields--single) > .field > .field__hint {
            grid-row: 2;
            margin: 0;
        }

        .lookup-fields:not(.lookup-fields--single) > .field > .input {
            grid-row: 3;
            align-self: start;
        }

        .lookup-fields:not(.lookup-fields--single) > .field > .field__error {
            grid-row: 4;
            margin: 0;
        }
    }
}

.lookup .field__label {
    font-size: 12px;
    font-weight: 750;
}

.lookup .field__hint {
    font-size: 11px;
    line-height: 1.45;
}

/* V2.2 F4 (DIS-10): file controls of the information response as the form's upload zone (dashed border) with the native
   selector button styled as the secondary button (its text is the browser's). No script on this page: the control's own
   file name stays visible, the only place that names the file. */
.lookup input[type="file"] {
    width: 100%;
    max-width: 100%;
    min-height: auto;
    padding: 9px;
    border: 1px dashed #c9b38a;
    border-radius: 8px;
    background: #fffdf8;
    font-size: 12px;
    cursor: pointer;
}

.lookup input[type="file"]::file-selector-button {
    min-height: 44px;
    margin-right: 12px;
    padding: 0 16px;
    border: 1px solid var(--color-line-strong);
    border-radius: 8px;
    background: var(--color-surface);
    font: inherit;
    font-size: 13px;
    font-weight: 750;
    color: var(--color-ink);
    cursor: pointer;
}

.lookup input[type="file"]:hover::file-selector-button {
    border-color: var(--color-gold-strong);
    background: var(--color-gold-soft);
}

.lookup-code {
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    letter-spacing: 0.3em;
}

.lookup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.lookup-note {
    font-size: 11px;
    line-height: 1.45;
    color: var(--color-muted);
}

/* Result header: tracking number (eyebrow), event name and the public status badge. */
.lookup-result__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
}

.lookup-result__reference {
    margin: 0;
}

.lookup-result__reference .tracking-number {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-gold-strong);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 850;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.lookup-result__title {
    margin: 6px 0 0;
    font-size: var(--text-xl);
    line-height: 1.2;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}

/* Summary boxes (prototype ".summary" / ".sum"). */
.lookup-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin: 0;
}

.lookup-summary__item {
    padding: 13px;
    border: 1px solid var(--color-line);
    border-radius: 10px;
}

.lookup-summary__item dt {
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.lookup-summary__item dd {
    margin: 5px 0 0;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.lookup-summary__item dd .text-muted {
    font-weight: 400;
}

@media (max-width: 719.98px) {
    /* 22px from the viewport edge, as in the prototype (16px container gutter + 6px). */
    .lookup {
        padding-inline: 6px;
    }

    .lookup-fields,
    .lookup-fields--single,
    .lookup-summary {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* DIS-21: 16 px between the result header and its summary boxes. */
.lookup-panel > .lookup-result__head + .lookup-summary {
    margin-top: 16px;
}

/* DIS-22: below 400 px the actions stack at full width (one line per label). */
@media (max-width: 399.98px) {
    .lookup-actions {
        flex-direction: column;
    }

    .lookup-actions .btn {
        width: 100%;
    }
}

@media print {
    .lookup-panel {
        box-shadow: none;
        break-inside: avoid;
    }

    /* V2.3 P4: the printed status keeps the request data only (closing the lookup is an action of the screen). */
    .lookup-panel--close {
        display: none;
    }
}