/* =========================================================================
   ArcaSearch File Review — UI system
   Shares the "quiet precision" token system and components with ArcaSearch
   Forms so the two portals read as one product. Everything below the
   FILE REVIEW banner is specific to this app.
   "Quiet precision": a calm, refined, professional surface. Subtle depth,
   hairline borders, confident accent, snappy micro-interactions.
   ========================================================================= */

:root {
    /* Neutrals — cool slate */
    --bg:          #eef1f6;
    --bg-tint:     #e7ecf4;
    --surface:     #ffffff;
    --surface-2:   #f7f9fc;
    --surface-3:   #f1f4f9;

    --ink:         #0f1729;   /* primary text */
    --ink-2:       #3f4a5e;   /* secondary text */
    --muted:       #64708a;   /* tertiary / captions */
    --faint:       #94a0b8;   /* placeholders, disabled */

    --line:        #e4e9f1;   /* hairline */
    --line-2:      #d4dbe7;   /* stronger divider */

    /* Brand — confident cobalt */
    --brand:       #2a50e0;
    --brand-strong:#1f3fc4;
    --brand-ink:   #1b369c;
    --brand-tint:  #eef2ff;
    --brand-glow:  rgba(42, 80, 224, .16);

    /* Status */
    --ok:          #0f7a52;
    --ok-bg:       #e7f7ef;
    --ok-line:     #b7e7cf;
    --warn:        #9a5a09;
    --warn-bg:     #fdf4e3;
    --warn-line:   #f3dca6;
    --err:         #c0322b;
    --err-bg:      #fdeceb;
    --err-line:    #f4c5c1;

    /* Radii */
    --r-sm: 9px;
    --r:    13px;
    --r-lg: 18px;
    --r-xl: 24px;

    /* Shadows — soft, slightly cool, layered */
    --shadow-xs: 0 1px 1px rgba(15,23,42,.04);
    --shadow-sm: 0 1px 2px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.05);
    --shadow:    0 2px 4px -1px rgba(15,23,42,.05), 0 6px 16px -6px rgba(15,23,42,.10);
    --shadow-md: 0 4px 10px -3px rgba(15,23,42,.08), 0 14px 32px -12px rgba(15,23,42,.16);
    --shadow-lg: 0 8px 20px -6px rgba(15,23,42,.12), 0 28px 60px -20px rgba(15,23,42,.24);
    --ring:      0 0 0 3px var(--brand-glow);

    --t:    150ms cubic-bezier(.4, 0, .2, 1);
    --t-sm: 110ms cubic-bezier(.4, 0, .2, 1);

    --font-ui:   "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-head: "Schibsted Grotesk", var(--font-ui);
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-ui);
    font-size: 16px;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "cv05" 1, "ss01" 1;
}

/* Atmospheric background — a faint cool mesh anchored to the top.
   Fixed so it stays put while content scrolls. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(1100px 520px at 18% -8%, #ffffff 0%, rgba(255,255,255,0) 60%),
        radial-gradient(900px 480px at 102% 0%, var(--bg-tint) 0%, rgba(231,236,244,0) 55%),
        linear-gradient(180deg, #f3f6fb 0%, var(--bg) 38%);
}

a {
    color: var(--brand);
    text-decoration: none;
    transition: color var(--t-sm);
}
a:hover { color: var(--brand-strong); }

/* Inline content links get an animated underline (not nav/buttons). */
.card a:not(.btn):not(.badge),
.public-intro a, p a {
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0% 1.5px;
    transition: background-size var(--t), color var(--t-sm);
}
.card a:not(.btn):not(.badge):hover,
.public-intro a:hover, p a:hover {
    background-size: 100% 1.5px;
    text-decoration: none;
}

.container {
    max-width: 940px;
    margin: 0 auto;
    padding: 34px 22px 72px;
}

/* ---------------------------------------------------------------- Top bar */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 22px;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line);
}
.topbar .brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.04rem;
    letter-spacing: -.012em;
    color: var(--ink);
    padding: 15px 0;
}
.topbar .brand:hover { color: var(--ink); }
.brand-mark {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(150deg, var(--brand) 0%, #4f74ff 100%);
    color: #fff;
    font-size: .92rem;
    font-weight: 800;
    box-shadow: 0 2px 6px -1px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,.35);
}
.topbar nav { display: flex; align-items: center; gap: 4px; }
.topbar nav a {
    position: relative;
    color: var(--muted);
    font-weight: 500;
    font-size: .94rem;
    padding: 8px 12px;
    border-radius: var(--r-sm);
    transition: color var(--t-sm), background var(--t-sm);
}
.topbar nav a:hover { color: var(--ink); background: var(--surface-3); }
.topbar nav a.is-active { color: var(--brand-ink); background: var(--brand-tint); }
.topbar nav .logout-form { margin: 0 0 0 6px; }
.topbar nav .logout-form::before {
    content: "";
    align-self: stretch;
    border-left: 1px solid var(--line-2);
    margin: 10px 8px 10px 2px;
}

/* ---------------------------------------------------------------- Cards */
.card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    padding: 26px 28px;
    margin-bottom: 22px;
}
.card.narrow { max-width: 460px; margin-left: auto; margin-right: auto; }
.card.center { text-align: center; }

/* ---------------------------------------------------------------- Type */
h1, h2, h3 {
    font-family: var(--font-head);
    letter-spacing: -.02em;
    color: var(--ink);
    line-height: 1.2;
}
h1 { font-size: 1.62rem; font-weight: 700; margin: 0 0 6px; }
h2 { font-size: 1.18rem; font-weight: 650; margin: 0 0 14px; }
.subtitle { color: var(--muted); margin-top: 0; font-size: 1rem; }

.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 16px;
}
.page-head h1 { margin: 0; }

/* ---------------------------------------------------------------- Forms */
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 7px; color: var(--ink-2); }
.field .hint { color: var(--muted); font-size: .82rem; font-weight: 400; }

input[type=text], input[type=email], input[type=password],
input[type=number], input[type=tel], select, textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    font-size: .98rem;
    font-family: inherit;
    color: var(--ink);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    transition: border-color var(--t-sm), box-shadow var(--t-sm), background var(--t-sm);
}
input::placeholder, textarea::placeholder { color: var(--faint); }
textarea { min-height: 116px; resize: vertical; line-height: 1.5; }

select {
    appearance: none;
    -webkit-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--muted) 50%),
        linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 38px;
    cursor: pointer;
}

input:hover, select:hover, textarea:hover { border-color: #b9c3d4; }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: var(--ring);
    background: var(--surface);
}

.choice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 8px 0;
    font-weight: 400;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    cursor: pointer;
    transition: border-color var(--t-sm), background var(--t-sm);
}
.choice:hover { border-color: #c4cedd; background: var(--surface-2); }
.choice:has(input:checked) {
    border-color: var(--brand);
    background: var(--brand-tint);
}
.choice input { width: auto; margin-top: 3px; accent-color: var(--brand); flex: none; }

.code-input {
    letter-spacing: .5em;
    text-align: center;
    font-size: 1.6rem;
    font-family: var(--font-mono);
    padding: 14px;
}

/* ---------------------------------------------------------------- Buttons */
button, .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: var(--brand);
    color: #fff;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    padding: 11px 19px;
    font-size: .95rem;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.1;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.18);
    transition: background var(--t-sm), box-shadow var(--t), transform var(--t-sm);
}
button:hover, .btn:hover {
    background: var(--brand-strong);
    /* Buttons that are anchors (Export spreadsheet, Add customer) would
       otherwise pick up the global a:hover colour and turn blue-on-blue. */
    color: #fff;
    text-decoration: none;
    box-shadow: 0 4px 12px -2px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,.18);
    transform: translateY(-1px);
}
button:active, .btn:active { transform: translateY(0); box-shadow: var(--shadow-xs); }
button:focus-visible, .btn:focus-visible { outline: none; box-shadow: var(--ring); }

.btn-secondary {
    background: var(--surface);
    color: var(--ink-2);
    border-color: var(--line-2);
    box-shadow: var(--shadow-xs);
}
.btn-secondary:hover {
    background: var(--surface-2);
    color: var(--ink);
    border-color: #c4cedd;
    box-shadow: var(--shadow-sm);
}
.btn-danger { background: var(--err); }
.btn-danger:hover { background: #a52823; box-shadow: 0 4px 12px -2px rgba(192,50,43,.28); }
.btn-sm { padding: 7px 13px; font-size: .85rem; border-radius: 8px; }

.linklike {
    background: none; border: none; color: var(--muted); font-weight: 500;
    padding: 8px 12px; cursor: pointer; font-size: .94rem; border-radius: var(--r-sm);
    box-shadow: none;
}
.linklike:hover { color: var(--ink); background: var(--surface-3); box-shadow: none; transform: none; }

.actions { display: flex; gap: 11px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.actions form { margin: 0; }

/* ---------------------------------------------------------------- Tables */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
}
/* When a table sits directly in a card, drop the redundant frame */
.card > .table-wrap { border: none; border-radius: 0; }
.card > .table-wrap { margin: -4px 0; }

table { width: 100%; border-collapse: collapse; font-size: .94rem; }
th, td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 700;
    color: var(--muted);
    background: var(--surface-2);
}
thead th:first-child { border-top-left-radius: var(--r); }
thead th:last-child  { border-top-right-radius: var(--r); }
tbody tr { transition: background var(--t-sm); }
tbody tr:hover { background: var(--surface-2); }
tr:last-child td { border-bottom: none; }
td a { font-weight: 600; }

/* ---------------------------------------------------------------- Flash / alerts */
.flash {
    position: relative;
    padding: 13px 16px 13px 44px;
    border-radius: var(--r-sm);
    margin-bottom: 22px;
    font-size: .94rem;
    font-weight: 500;
    border: 1px solid transparent;
    box-shadow: var(--shadow-xs);
}
.flash::before {
    content: "";
    position: absolute;
    left: 15px; top: 50%;
    width: 18px; height: 18px;
    transform: translateY(-50%);
    background: currentColor;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: contain; mask-size: contain;
}
.flash-info    { background: var(--brand-tint); color: var(--brand-ink); border-color: #d7e0ff; }
.flash-success { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }
.flash-warning { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.flash-error   { background: var(--err-bg); color: var(--err); border-color: var(--err-line); }
.flash-success::before { -webkit-mask-image: var(--ico-check); mask-image: var(--ico-check); }
.flash-error::before, .flash-warning::before { -webkit-mask-image: var(--ico-alert); mask-image: var(--ico-alert); }
.flash-info::before { -webkit-mask-image: var(--ico-info); mask-image: var(--ico-info); }

.alert-error {
    background: var(--err-bg);
    color: var(--err);
    border: 1px solid var(--err-line);
    padding: 13px 16px;
    border-radius: var(--r-sm);
    margin-bottom: 20px;
    font-weight: 500;
    font-size: .94rem;
}
.field-error { color: var(--err); font-size: .84rem; font-weight: 500; margin-top: 6px; }
.field input:focus.has-error { border-color: var(--err); }

:root {
    --ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    --ico-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4m0 4h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3C/svg%3E");
    --ico-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4m0-4h.01'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- Badges */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px 4px 9px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 650;
    letter-spacing: .005em;
    border: 1px solid transparent;
    line-height: 1;
}
.badge::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}
.badge-active   { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }
.badge-disabled { background: var(--surface-3); color: var(--muted); border-color: var(--line-2); }

/* ---------------------------------------------------------------- Stat grid */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 22px;
}
.stat {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    padding: 16px 18px;
}
.stat .stat-label {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 700;
    color: var(--muted);
}
.stat .stat-value {
    font-family: var(--font-head);
    font-size: 1.85rem;
    font-weight: 750;
    letter-spacing: -.02em;
    color: var(--ink);
    line-height: 1.1;
    margin-top: 4px;
}
.stat .stat-value .stat-unit { font-size: .9rem; font-weight: 500; color: var(--muted); margin-left: 4px; }
@media (max-width: 640px) {
    .stat-grid { grid-template-columns: 1fr 1fr; }
    .stat .stat-value { font-size: 1.55rem; }
}

/* ---------------------------------------------------------------- Empty state */
.empty-state { text-align: center; padding: 40px 24px; }
.empty-state .empty-icon {
    width: 46px; height: 46px;
    margin: 0 auto 14px;
    display: grid; place-items: center;
    border-radius: 13px;
    background: var(--brand-tint);
    color: var(--brand);
}
.empty-state .empty-icon svg { width: 24px; height: 24px; }
.empty-state p { color: var(--muted); margin: 0 0 18px; }

/* ---------------------------------------------------------------- Utilities */
.muted { color: var(--muted); }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mono { font-family: var(--font-mono); font-size: .86rem; letter-spacing: -.01em; }

/* ---------------------------------------------------------------- Copy row */
.copy-row { display: flex; gap: 9px; }
.copy-row input {
    font-family: var(--font-mono);
    font-size: .86rem;
    background: var(--surface-2);
    color: var(--ink-2);
}
.copy-row input:focus { background: var(--surface); }
.copy-row .btn { flex: none; }

/* ---------------------------------------------------------------- Error page */
.error-code {
    font-family: var(--font-head);
    font-size: 3.4rem;
    font-weight: 800;
    letter-spacing: -.03em;
    margin: 0 0 4px;
    background: linear-gradient(150deg, var(--brand) 0%, #5a7bff 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.error-message { font-size: 1.1rem; font-weight: 600; color: var(--ink); margin-top: 0; }
.error-detail {
    text-align: left;
    background: #0c1426;
    color: #cdd7ea;
    padding: 16px;
    border-radius: var(--r-sm);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: .8rem;
    line-height: 1.55;
}

/* ---------------------------------------------------------------- 2FA / enroll */
.qr {
    display: flex;
    justify-content: center;
    margin: 22px 0;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-xs);
}
.qr svg { width: 208px; height: 208px; display: block; }
.secret {
    font-family: var(--font-mono);
    font-size: .92rem;
    background: var(--surface-3);
    border: 1px solid var(--line);
    padding: 9px 14px;
    border-radius: var(--r-sm);
    word-break: break-all;
    display: inline-block;
    color: var(--ink-2);
}

/* ---------------------------------------------------------------- Footer */
.site-footer {
    text-align: center;
    color: var(--faint);
    font-size: .82rem;
    padding: 28px 20px 36px;
}
.site-footer a { color: var(--muted); }

/* ---------------------------------------------------------------- Motion */
@media (prefers-reduced-motion: no-preference) {
    .container > .card,
    .container > .page-head,
    main.container > .flash {
        animation: rise 460ms cubic-bezier(.16, .8, .26, 1) both;
    }
    .container > .page-head { animation-delay: 20ms; }
    .container > .card:nth-of-type(1) { animation-delay: 60ms; }
    .container > .card:nth-of-type(2) { animation-delay: 130ms; }
    .container > .card:nth-of-type(3) { animation-delay: 200ms; }
    .container > .card:nth-of-type(4) { animation-delay: 270ms; }
}
@keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 640px) {
    .container { padding: 24px 16px 56px; }
    .topbar { padding: 0 16px; }
    .topbar nav { gap: 0; }
    .topbar nav a { padding: 8px 9px; font-size: .88rem; }
    .card { padding: 20px 18px; }
    .page-head { flex-direction: column; align-items: flex-start; gap: 12px; }
    h1 { font-size: 1.42rem; }
}

/* =========================================================================
   FILE REVIEW
   The reviewer workspace is a light table: the stack on the left, the page
   under inspection in the middle, the decision underneath it. The one bold
   element is the stamp — a records-office mark that lands on a page once it
   has been dispositioned. Everything else stays quiet, so that the four
   hundredth decision can be made as confidently as the first.
   ========================================================================= */

:root {
    /* Disposition colours. Four hues that stay distinguishable at thumbnail
       size: withheld reads closed, redact reads unfinished, public reads
       released, other reads "needs a conversation". */
    --d-private:      #48506b;
    --d-private-bg:   #eeeff5;
    --d-private-line: #ced2e0;

    --d-redact:       var(--warn);
    --d-redact-bg:    var(--warn-bg);
    --d-redact-line:  var(--warn-line);

    --d-public:       var(--ok);
    --d-public-bg:    var(--ok-bg);
    --d-public-line:  var(--ok-line);

    --d-other:        var(--brand-ink);
    --d-other-bg:     var(--brand-tint);
    --d-other-line:   #c7d2fe;

    --strip-w: 232px;
    --stage-bg: #1b2231;   /* an inspection surface, not a page */
}

/* ---------------------------------------------------------------- Shell */
/* The reviewer page is the one screen that owns the whole viewport: no page
   scroll, each pane scrolls on its own, so the image never drifts away from
   the dropdown that acts on it. */
body.review {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: var(--bg);
}
body.review::before { display: none; }

.review-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
}

.review-body {
    display: grid;
    grid-template-columns: var(--strip-w) minmax(0, 1fr);
    min-height: 0;
}

/* ---------------------------------------------------------------- Review bar */
.review-bar {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 20px;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line);
}
.review-bar .brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -.012em;
    color: var(--ink);
    padding: 13px 0;
    flex: none;
}
.review-bar__who {
    min-width: 0;
    flex: none;
    max-width: 26ch;
    border-left: 1px solid var(--line-2);
    padding-left: 18px;
    margin-left: 2px;
}
.review-bar__customer {
    display: block;
    font-weight: 600;
    font-size: .92rem;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.review-bar__code {
    font-family: var(--font-mono);
    font-size: .74rem;
    letter-spacing: .08em;
    color: var(--faint);
}
.review-bar__spacer { flex: 1 1 auto; }
.review-bar form { margin: 0; }

/* ---------------------------------------------------------------- Meter */
/* Progress is real information here, so it gets a real readout: the count in
   mono, so the digits do not jump around as it climbs. */
.meter { display: flex; align-items: center; gap: 11px; flex: none; }
.meter__count {
    font-family: var(--font-mono);
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink-2);
    white-space: nowrap;
}
.meter__count b { color: var(--ink); font-weight: 600; }
.meter__track {
    width: 132px;
    height: 6px;
    border-radius: 999px;
    background: var(--surface-3);
    box-shadow: inset 0 0 0 1px var(--line);
    overflow: hidden;
}
.meter__fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand) 0%, #4f74ff 100%);
    transition: width var(--t);
}
.meter.is-complete .meter__fill { background: linear-gradient(90deg, var(--ok) 0%, #21a06e 100%); }

/* ---------------------------------------------------------------- Filmstrip */
.filmstrip {
    border-right: 1px solid var(--line);
    background: var(--surface);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 8px 24px;
    min-height: 0;
}
.filmstrip__head {
    position: sticky;
    top: -8px;
    z-index: 2;
    background: var(--surface);
    padding: 10px 8px 9px;
    margin: -8px -8px 6px;
    border-bottom: 1px solid var(--line);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--faint);
}

.strip-item {
    position: relative;
    display: grid;
    grid-template-columns: 3px 56px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    padding: 6px 8px 6px 0;
    margin-bottom: 2px;
    box-shadow: none;
    cursor: pointer;
    transition: background var(--t-sm), border-color var(--t-sm);
}
.strip-item:hover {
    background: var(--surface-2);
    border-color: var(--line);
    transform: none;
    box-shadow: none;
}
.strip-item:focus-visible { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.strip-item[aria-current="true"] {
    background: var(--brand-tint);
    border-color: #c7d2fe;
}

/* The spine: a colour-coded edge per item, so scrolling the strip reads as a
   map of what is done and what each answer was. */
.strip-item__spine {
    align-self: stretch;
    border-radius: 999px;
    background: var(--line-2);
    transition: background var(--t-sm);
}
.strip-item[data-action="private"] .strip-item__spine { background: var(--d-private); }
.strip-item[data-action="redact"]  .strip-item__spine { background: var(--d-redact); }
.strip-item[data-action="public"]  .strip-item__spine { background: var(--d-public); }
.strip-item[data-action="other"]   .strip-item__spine { background: var(--d-other); }

.strip-item__thumb {
    width: 56px;
    height: 44px;
    object-fit: cover;
    border-radius: 5px;
    background: var(--surface-3);
    box-shadow: 0 0 0 1px var(--line);
    display: block;
}
.strip-item__meta { min-width: 0; }
.strip-item__name {
    display: block;
    font-family: var(--font-mono);
    font-size: .76rem;
    color: var(--ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    direction: rtl;      /* keep the distinguishing tail of a long filename */
    text-align: left;
}
.strip-item[aria-current="true"] .strip-item__name { color: var(--brand-ink); font-weight: 500; }
.strip-item__state {
    display: block;
    font-size: .7rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--faint);
    margin-top: 1px;
}
.strip-item[data-action="private"] .strip-item__state { color: var(--d-private); }
.strip-item[data-action="redact"]  .strip-item__state { color: var(--d-redact); }
.strip-item[data-action="public"]  .strip-item__state { color: var(--d-public); }
.strip-item[data-action="other"]   .strip-item__state { color: var(--d-other); }

/* ---------------------------------------------------------------- Stage */
.stage-wrap {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 0;
    background: var(--bg-tint);
}

.stage {
    position: relative;
    display: block;
    min-height: 0;
    padding: 18px;
    background: radial-gradient(120% 90% at 50% 0%, #24304a 0%, var(--stage-bg) 70%);
    overflow: auto;
}

/* Fitting the page.
   A percentage max-height cannot resolve through an auto-height wrapper, which
   is why the obvious "max-width/max-height: 100%" version let tall scans spill
   under the decision bar. Instead the frame takes the full pane and the image
   fits inside it with object-fit, which can never overflow whatever the aspect
   ratio. The image itself is therefore NOT where the page edge is: the visible
   page sits somewhere inside a letterboxed box, so the shadow and the stamp are
   placed on the real rendered rect by review.js (layoutOverlay). */
.stage__frame {
    position: relative;
    width: 100%;
    height: 100%;
}
.stage__frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
}

/* Sits exactly over the rendered page, giving it an edge and a drop shadow. */
.stage__edge {
    position: absolute;
    display: none;
    border-radius: 3px;
    box-shadow: 0 10px 34px -10px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .3);
    outline: 1px solid rgba(255, 255, 255, .08);
    pointer-events: none;
}
.stage__edge.is-on { display: block; }

/* Zoomed shows the scan at its own pixel size and lets the pane scroll, which
   is how fine print gets read without opening the file in another tab. */
.stage.is-zoomed .stage__frame { width: max-content; height: max-content; }
.stage.is-zoomed .stage__frame img { width: auto; height: auto; object-fit: none; cursor: zoom-out; }
.stage:not(.is-zoomed) .stage__frame img { cursor: zoom-in; }
.stage__empty {
    color: #9aa6bf;
    font-size: .95rem;
    text-align: center;
    max-width: 40ch;
    line-height: 1.6;
}

/* ---------------------------------------------------------------- The stamp */
/* Signature element. A disposition is a records decision, so it is marked the
   way a records office marks one: a boxed, letter-spaced stamp set slightly
   off-square, in the colour of the action. */
.stamp {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 3;
    display: none;
    padding: 7px 15px 6px;
    font-family: var(--font-mono);
    font-size: .84rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    border: 2.5px solid currentColor;
    border-radius: 3px;
    background: rgba(255, 255, 255, .9);
    transform: rotate(-4deg);
    pointer-events: none;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}
.stamp.is-on { display: block; animation: stamp-land 220ms cubic-bezier(.2, 1.5, .5, 1) both; }
.stamp[data-action="private"] { color: var(--d-private); }
.stamp[data-action="redact"]  { color: var(--d-redact); }
.stamp[data-action="public"]  { color: var(--d-public); }
.stamp[data-action="other"]   { color: var(--d-other); }

@keyframes stamp-land {
    from { opacity: 0; transform: rotate(-4deg) scale(1.5); }
    60%  { opacity: 1; }
    to   { opacity: 1; transform: rotate(-4deg) scale(1); }
}

/* ---------------------------------------------------------------- Decision bar */
.decision {
    background: var(--surface);
    border-top: 1px solid var(--line);
    padding: 14px 22px 16px;
    box-shadow: 0 -6px 18px -14px rgba(15, 23, 42, .5);
}

.decision__file {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 11px;
    min-width: 0;
}
.decision__name {
    font-family: var(--font-mono);
    font-size: .86rem;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.decision__pos {
    font-family: var(--font-mono);
    font-size: .76rem;
    font-variant-numeric: tabular-nums;
    color: var(--faint);
    flex: none;
}
.decision__saved {
    margin-left: auto;
    flex: none;
    font-size: .78rem;
    font-weight: 600;
    color: var(--ok);
    opacity: 0;
    transition: opacity var(--t);
}
.decision__saved.is-on { opacity: 1; }
.decision__saved.is-error { color: var(--err); }

.decision__row {
    display: grid;
    grid-template-columns: minmax(210px, 250px) minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
}
.decision__row label {
    display: block;
    font-weight: 600;
    font-size: .82rem;
    color: var(--ink-2);
    margin-bottom: 6px;
}
.decision select { font-weight: 500; }
.decision textarea { min-height: 62px; }

.decision__comment { display: none; }
.decision__comment.is-on { display: block; }
.decision__hint {
    font-size: .78rem;
    color: var(--muted);
    margin: 6px 0 0;
}

.decision__nav {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: end;
}

/* Keyboard hints. Someone doing hundreds of these wants the shortcuts, and
   the only way they learn them is if the interface says so. */
.kbd {
    display: inline-block;
    min-width: 18px;
    padding: 1px 5px;
    font-family: var(--font-mono);
    font-size: .72rem;
    line-height: 1.5;
    text-align: center;
    color: var(--ink-2);
    background: var(--surface-3);
    border: 1px solid var(--line-2);
    border-bottom-width: 2px;
    border-radius: 4px;
}
.shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 10px 0 0;
    font-size: .76rem;
    color: var(--muted);
}
.shortcuts span { display: inline-flex; align-items: center; gap: 5px; }

/* ---------------------------------------------------------------- Chips */
/* Breakdown counts, in the admin console and the submitted summary. */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    border: 1px solid var(--line-2);
    background: var(--surface-2);
    color: var(--ink-2);
}
.chip b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; }
.chip[data-action="private"] { color: var(--d-private); background: var(--d-private-bg); border-color: var(--d-private-line); }
.chip[data-action="redact"]  { color: var(--d-redact);  background: var(--d-redact-bg);  border-color: var(--d-redact-line); }
.chip[data-action="public"]  { color: var(--d-public);  background: var(--d-public-bg);  border-color: var(--d-public-line); }
.chip[data-action="other"]   { color: var(--d-other);   background: var(--d-other-bg);   border-color: var(--d-other-line); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 4px; }

/* ---------------------------------------------------------------- Portal auth */
.portal-wrap {
    max-width: 440px;
    margin: 0 auto;
    padding: 8vh 22px 60px;
}
.portal-mark {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(150deg, var(--brand) 0%, #4f74ff 100%);
    color: #fff;
    font-family: var(--font-head);
    font-size: 1.05rem;
    font-weight: 800;
    box-shadow: 0 3px 10px -2px var(--brand-glow), inset 0 1px 0 rgba(255, 255, 255, .35);
    margin-bottom: 18px;
}
.portal-code {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: .8rem;
    letter-spacing: .16em;
    color: var(--muted);
    background: var(--surface-3);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 3px 9px;
    margin-bottom: 14px;
}

/* ---------------------------------------------------------------- Admin extras */
.progress-cell { display: flex; align-items: center; gap: 9px; min-width: 150px; }
.progress-cell .meter__track { width: 78px; }
.progress-cell .meter__count { font-size: .76rem; }

.folder-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.folder-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 13px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
}
.folder-row__name { font-family: var(--font-mono); font-size: .86rem; color: var(--ink); }
.folder-row__count { font-size: .8rem; color: var(--muted); margin-left: auto; }

.activity { list-style: none; margin: 0; padding: 0; }
.activity li {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: baseline;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
    font-size: .87rem;
}
.activity li:last-child { border-bottom: none; }
.activity__file {
    font-family: var(--font-mono);
    font-size: .8rem;
    color: var(--ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.activity__when { color: var(--faint); font-size: .78rem; white-space: nowrap; }

.warn-note {
    display: flex;
    gap: 10px;
    padding: 12px 15px;
    border-radius: var(--r-sm);
    background: var(--warn-bg);
    border: 1px solid var(--warn-line);
    color: var(--warn);
    font-size: .87rem;
    margin-bottom: 18px;
}
.warn-note a { color: var(--warn); font-weight: 600; }

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 1000px) {
    /* On a tablet the strip becomes a horizontal reel above the page, which
       keeps the image as large as a narrow screen allows. */
    body.review { overflow: auto; }
    .review-body { grid-template-columns: minmax(0, 1fr); }
    .filmstrip {
        display: flex;
        /* Without this each item stretches to the tallest one and the
           decision spine drifts away from its thumbnail. */
        align-items: flex-start;
        gap: 8px;
        border-right: none;
        border-bottom: 1px solid var(--line);
        overflow-x: auto;
        overflow-y: hidden;
        padding: 9px 12px;
    }
    .filmstrip__head { display: none; }
    .strip-item {
        grid-template-columns: 56px;
        grid-template-rows: auto 3px;
        gap: 4px;
        width: auto;
        flex: none;
        padding: 5px;
        margin: 0;
    }
    .strip-item__spine { grid-row: 2; height: 3px; }
    .strip-item__meta { display: none; }
    .stage { min-height: 52vh; }
    .decision__row { grid-template-columns: minmax(0, 1fr); }
    .decision__nav { justify-content: space-between; }
    .review-bar { flex-wrap: wrap; gap: 10px 16px; padding: 10px 16px; }
    .review-bar__who { border-left: none; padding-left: 0; margin-left: 0; }
}

@media (max-width: 640px) {
    .meter__track { width: 84px; }
    .activity li { grid-template-columns: minmax(0, 1fr); gap: 3px; }
    .stamp { top: 10px; right: 10px; font-size: .72rem; padding: 5px 11px 4px; }
}

@media (prefers-reduced-motion: reduce) {
    .stamp.is-on { animation: none; }
    .meter__fill { transition: none; }
    .strip-item, .strip-item__spine { transition: none; }
}

/* ---------------------------------------------------------------- Utilities */
/* Small spacing helpers so templates do not carry inline style attributes. */
form.inline { display: inline-block; margin: 0; }
.mt-sm { margin-top: 14px; }
.mt    { margin-top: 18px; }
.mt-lg { margin-top: 24px; }

/* ---------------------------------------------------------------- Sign-in confirmation */
/* The interstitial between opening an emailed link and being signed in. One
   prominent button, and a short summary of which account the link belongs to. */
.btn-lg {
    padding: 14px 26px;
    font-size: 1rem;
    border-radius: var(--r-sm);
}

.confirm-list {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 7px 18px;
    margin: 0 0 22px;
    padding: 14px 16px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-size: .9rem;
}
.confirm-list dt {
    color: var(--muted);
    font-weight: 500;
}
.confirm-list dd {
    margin: 0;
    color: var(--ink);
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- Portal head */
/* Every single-column portal page shares one centred lockup: mark, account
   code, heading, subtitle. .portal-mark and .portal-code are inline, so each
   needs a block context of its own to sit on its own line and centre. */
.portal-head { margin-bottom: 26px; }
.portal-head h1 { margin-bottom: 8px; }
.portal-head .subtitle { margin-bottom: 0; }
.portal-head__code { margin: 0; }

/* Trailing one-line aside, with the link on its own line beneath the text. */
.portal-footnote { line-height: 1.9; }
.portal-footnote a { font-weight: 600; }