/* ==========================================================================
   THE LAW REVIEW REPORTER — dashboard design system
   A law-review front page: aged paper, oxblood ink, Courier figures,
   Bluebook footnotes, and the stacks.
   ========================================================================== */

:root {
    color-scheme: light;
    --paper: #ede5d0;
    --paper-deep: #e5dbc2;
    --sheet: #f6f1e2;
    --sheet-raised: #faf6ea;
    --ink: #201a10;
    --ink-soft: #57503b;
    --faint: #867d63;
    --rule: #d3c8ab;
    --rule-strong: #a2946f;
    --maroon: #6e2418;
    --maroon-bright: #8c2d1d;
    --maroon-wash: #ecdcd2;
    --blue: #2f6cad;          /* constrained sources (validated) */
    --blue-wash: #dde5e9;
    --plum: #a04477;          /* moved sources (validated) */
    --plum-wash: #ecdee2;
    --red: #a63325;           /* broken sources (validated) */
    --red-wash: #eeD9cf;
    --moss: #3e5c2a;          /* good text */
    --moss-wash: #dfe2cb;
    --spine-a: #c7b28a;
    --spine-b: #bca77c;
    --spine-c: #ae9a70;
    --spine-d: #a08c64;
    --neutral-spine: #beb5a0; /* unknown */
    --serif: "Baskerville", "Baskerville Old Face", "Palatino Linotype", Palatino, "URW Palladio L", "Book Antiqua", Georgia, serif;
    --mono: "Courier Prime", "Nimbus Mono PS", "Courier 10 Pitch", "Courier New", monospace;
    --content: 1280px;
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    background: var(--paper);
}

body {
    min-width: 320px;
    margin: 0;
    background:
        radial-gradient(120% 60% at 50% 0%, rgba(255, 252, 240, 0.55), rgba(255, 252, 240, 0) 60%),
        var(--paper);
    color: var(--ink);
    font-family: var(--serif);
    font-size: 16px;
    line-height: 1.55;
}

a { color: inherit; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

:focus-visible {
    outline: 2px solid var(--maroon-bright);
    outline-offset: 3px;
}

h1, h2, h3, p, dl, dd, figure { margin: 0; }

.mono {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.muted { color: var(--faint); }
.trend-bad { color: var(--red); font-weight: 700; }

::selection { background: var(--maroon); color: var(--sheet-raised); }

/* --------------------------------------------------------------------------
   Masthead — the title page
   -------------------------------------------------------------------------- */

.paper-masthead {
    max-width: var(--content);
    margin: 0 auto;
    padding: 26px clamp(18px, 4vw, 44px) 0;
}

.plate {
    border-top: 3px double var(--ink);
    border-bottom: 1px solid var(--ink);
    padding: 6px 0 10px;
    position: relative;
}

.plate-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: baseline;
    gap: 12px;
}

.plate-slug,
.plate-live {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    white-space: nowrap;
}

.plate-live { text-align: right; }

.plate-live i {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--moss);
    box-shadow: 0 0 0 2px var(--moss-wash);
    animation: livepulse 2.6s ease-in-out infinite;
}

@keyframes livepulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.nameplate {
    display: block;
    text-align: center;
    text-decoration: none;
    font-size: clamp(30px, 5.2vw, 54px);
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.05;
    padding: 2px 0 0;
    color: var(--ink);
    white-space: nowrap;
}

.nameplate .amp {
    font-style: italic;
    color: var(--maroon);
}

.plate-motto {
    margin-top: 2px;
    text-align: center;
    font-style: italic;
    font-size: 14px;
    color: var(--ink-soft);
}

.plate-folio {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
    border-top: 1px solid var(--ink);
    padding-top: 6px;
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink);
}

.plate-folio span { white-space: nowrap; }

/* Running head — the nav */

.running-head {
    position: sticky;
    top: 0;
    z-index: 60;
    max-width: var(--content);
    margin: 0 auto;
    padding: 0 clamp(18px, 4vw, 44px);
}

.running-head-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-bottom: 3px double var(--ink);
    background:
        linear-gradient(to bottom, rgba(246, 241, 226, 0), rgba(246, 241, 226, 0)),
        var(--paper);
    padding: 7px 0 8px;
}

.running-head a {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink-soft);
    padding: 4px 14px;
    border-radius: 2px;
}

.running-head a:hover { color: var(--maroon-bright); }

.running-head a.active {
    color: var(--maroon);
    font-weight: 700;
    position: relative;
}

.running-head a.active::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -1px;
    height: 2px;
    background: var(--maroon);
}

.menu-button {
    display: none;
    margin-left: auto;
    border: 1px solid var(--ink);
    background: transparent;
    color: var(--ink);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 5px 12px;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Page scaffold
   -------------------------------------------------------------------------- */

.register-main {
    max-width: var(--content);
    margin: 0 auto;
    padding: 30px clamp(18px, 4vw, 44px) 46px;
}

.kicker {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--maroon);
    margin-bottom: 10px;
}

.kicker::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 26px;
    height: 2px;
    margin-right: 10px;
    background: var(--maroon);
}

.deck {
    font-style: italic;
    font-size: 17px;
    color: var(--ink-soft);
    max-width: 62ch;
}

.subpage-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 0 18px;
    margin-bottom: 26px;
    border-bottom: 1px solid var(--ink);
}

.subpage-intro h1 {
    font-size: clamp(30px, 4vw, 42px);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: 0.005em;
    margin: 2px 0 6px;
}

.subpage-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.subpage-actions > a:not(.button) {
    font-style: italic;
    font-size: 14px;
    color: var(--maroon);
    text-decoration: none;
    border-bottom: 1px solid var(--rule-strong);
}

.subpage-actions > a:not(.button):hover { color: var(--maroon-bright); }

.timestamp {
    font-size: 12px;
    color: var(--faint);
}

.section-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

.section-intro h2 {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 500;
    line-height: 1.1;
}

.section-intro > p {
    font-style: italic;
    font-size: 14px;
    color: var(--faint);
    max-width: 40ch;
    text-align: right;
}

.section-heading {
    font-size: 24px;
    font-weight: 500;
    margin: 34px 0 6px;
}

.section-description {
    font-style: italic;
    color: var(--ink-soft);
    margin-bottom: 14px;
}

/* Footer — the colophon */

.register-footer {
    margin-top: 54px;
    border-top: 3px double var(--ink);
    padding-top: 14px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px 24px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--faint);
}

.register-footer a {
    color: var(--ink-soft);
    text-decoration: none;
    border-bottom: 1px solid var(--rule-strong);
}

.register-footer a:hover { color: var(--maroon-bright); }

.footer-links { display: inline-flex; gap: 18px; }

.colophon {
    width: 100%;
    font-family: var(--serif);
    font-style: italic;
    font-size: 13px;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--faint);
    text-align: center;
    margin-top: 4px;
}

/* --------------------------------------------------------------------------
   Buttons, links, badges
   -------------------------------------------------------------------------- */

.button {
    display: inline-block;
    border: 1px solid var(--ink);
    background: transparent;
    color: var(--ink);
    font-family: var(--mono);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 7px 14px;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.button:hover {
    background: var(--ink);
    color: var(--sheet-raised);
}

.button.cyan { border-color: var(--blue); color: var(--blue); }
.button.cyan:hover { background: var(--blue); color: var(--sheet-raised); }

.command-link {
    display: inline-block;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 9px 18px;
    border: 1px solid var(--ink);
    color: var(--ink);
    transition: background 120ms ease, color 120ms ease;
}

.command-link.primary {
    background: var(--maroon);
    border-color: var(--maroon);
    color: #f8f2e2;
}

.command-link.primary:hover { background: var(--maroon-bright); }
.command-link:not(.primary):hover { background: var(--ink); color: var(--sheet-raised); }

.text-link {
    color: var(--maroon);
    text-decoration: none;
    border-bottom: 1px solid var(--rule-strong);
}

.text-link:hover { color: var(--maroon-bright); border-bottom-color: var(--maroon-bright); }

/* Status badges — rubber-stamp ink */

.status-badge {
    display: inline-block;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 2px 8px;
    border: 1px solid currentColor;
    border-radius: 2px;
    color: var(--ink-soft);
    background: transparent;
    white-space: nowrap;
}

.status-healthy, .status-success, .status-no_new_content, .status-working, .status-ok {
    color: var(--moss);
    background: var(--moss-wash);
}

.status-paywalled, .status-cloudflare, .status-access_restricted,
.status-no_open_access, .status-illicit, .status-protected, .status-restricted {
    color: var(--blue);
    background: var(--blue-wash);
}

.status-moved { color: var(--plum); background: var(--plum-wash); }

.status-failed, .status-timeout, .status-technical_error, .status-broken,
.status-broken_syntax, .status-broken_logic, .status-broken_network, .status-error {
    color: var(--red);
    background: var(--red-wash);
}

.status-partial, .status-no_items, .status-stale, .status-attention, .status-running {
    color: var(--maroon);
    background: var(--maroon-wash);
}

/* --------------------------------------------------------------------------
   HOME — the front page
   -------------------------------------------------------------------------- */

.front-lead {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(280px, 1fr);
    gap: clamp(24px, 4vw, 52px);
    padding: 34px 0 38px;
    border-bottom: 1px solid var(--ink);
}

.lead-story h1 {
    font-size: clamp(34px, 5vw, 58px);
    font-weight: 500;
    line-height: 1.06;
    letter-spacing: 0.002em;
    margin: 0 0 14px;
}

.lead-story h1 em {
    font-style: italic;
    color: var(--maroon);
}

.lead-story .deck { margin-bottom: 22px; }

.brief-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* The issue box — “in this issue” sidebar */

.issue-box {
    align-self: start;
    border: 1px solid var(--ink);
    background: var(--sheet);
    padding: 18px 20px 16px;
    box-shadow: 4px 4px 0 rgba(32, 26, 16, 0.14);
}

.issue-box-heading {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-align: center;
    color: var(--ink);
    border-bottom: 1px solid var(--ink);
    padding-bottom: 8px;
    margin-bottom: 12px;
}

.issue-hero {
    text-align: center;
    padding: 4px 0 10px;
}

.issue-hero strong {
    display: block;
    font-size: clamp(38px, 4vw, 52px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.01em;
}

.issue-hero span {
    display: block;
    margin-top: 6px;
    font-style: italic;
    font-size: 13.5px;
    color: var(--ink-soft);
}

.issue-lines { border-top: 1px solid var(--rule); }

.issue-lines div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--rule);
    font-size: 14px;
}

.issue-lines dt { color: var(--ink-soft); }

.issue-lines dd {
    margin: 0;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 700;
}

.issue-lines .flag-good { color: var(--moss); }
.issue-lines .flag-bad { color: var(--red); }

/* Figures — captions shared by stacks & chart */

.figure-block { padding: 36px 0 8px; }

.figure-caption {
    margin-top: 14px;
    font-size: 13.5px;
    color: var(--ink-soft);
    max-width: 90ch;
}

.figure-caption .fig-no {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--maroon);
    margin-right: 10px;
}

.figure-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin-top: 10px;
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
}

.figure-legend i {
    display: inline-block;
    width: 9px;
    height: 14px;
    margin-right: 7px;
    vertical-align: -2px;
    border-radius: 1px;
}

.figure-legend .sw-healthy { background: linear-gradient(90deg, var(--spine-a) 0 33%, var(--spine-c) 33% 66%, var(--spine-d) 66%); }
.figure-legend .sw-constrained { background: var(--blue); }
.figure-legend .sw-moved { background: var(--plum); }
.figure-legend .sw-broken { background: var(--red); }
.figure-legend .sw-unknown { background: var(--neutral-spine); }

/* The stacks — every journal, one spine */

.stacks {
    --cell: 76px;
    --shelf-gap: 28px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 2px;
    row-gap: var(--shelf-gap);
    padding-bottom: 2px;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent var(--cell),
        var(--ink) var(--cell),
        var(--ink) calc(var(--cell) + 2px),
        transparent calc(var(--cell) + 2px),
        transparent calc(var(--cell) + var(--shelf-gap))
    );
}

.spine {
    position: relative;
    display: block;
    width: 7px;
    height: var(--cell);
    text-decoration: none;
}

.spine::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--h, 20px);
    background: var(--spine-color, var(--spine-b));
    border-radius: 1.5px 1.5px 0 0;
    transition: transform 120ms ease;
}

.spine:hover::after,
.spine:focus-visible::after {
    transform: translateY(-5px);
    box-shadow: 0 5px 0 rgba(32, 26, 16, 0.18);
}

.spine.b-healthy:nth-of-type(4n + 1)::after { background: var(--spine-a); }
.spine.b-healthy:nth-of-type(4n + 2)::after { background: var(--spine-b); }
.spine.b-healthy:nth-of-type(4n + 3)::after { background: var(--spine-c); }
.spine.b-healthy:nth-of-type(4n)::after { background: var(--spine-d); }
.spine.b-constrained::after { background: var(--blue); }
.spine.b-moved::after { background: var(--plum); }
.spine.b-broken::after { background: var(--red); }
.spine.b-unknown::after { background: var(--neutral-spine); }

/* Spine tooltip (one floating card, positioned by JS) */

.spine-tip {
    position: fixed;
    z-index: 90;
    pointer-events: none;
    max-width: 300px;
    background: var(--ink);
    color: var(--sheet-raised);
    padding: 9px 12px;
    font-size: 13px;
    line-height: 1.4;
    box-shadow: 4px 4px 0 rgba(32, 26, 16, 0.25);
    opacity: 0;
    transition: opacity 90ms ease;
}

.spine-tip.visible { opacity: 1; }

.spine-tip strong {
    display: block;
    font-weight: 700;
    font-size: 13.5px;
}

.spine-tip span {
    display: block;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 3px;
    color: #d8cfb6;
}

/* The docket — matters requiring counsel */

.docket-section { padding: 40px 0 6px; }

.docket-list {
    border-top: 3px double var(--ink);
}

.docket-entry {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto auto;
    gap: 10px 26px;
    align-items: start;
    padding: 20px 0;
    border-bottom: 1px solid var(--rule-strong);
}

.docket-no {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--maroon);
    padding-top: 5px;
    white-space: nowrap;
}

.docket-style {
    font-size: 21px;
    font-weight: 500;
    line-height: 1.25;
}

.docket-style .in-re { font-style: italic; }

.docket-style a {
    text-decoration: none;
    border-bottom: 1px solid var(--rule-strong);
}

.docket-style a:hover { color: var(--maroon-bright); border-bottom-color: var(--maroon-bright); }

.docket-cause {
    margin-top: 6px;
    font-size: 14px;
    color: var(--ink-soft);
    max-width: 74ch;
    overflow-wrap: anywhere;
}

.docket-cause .status-badge { margin-right: 8px; vertical-align: 1px; }

.docket-facts {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink-soft);
    text-align: right;
    padding-top: 6px;
    display: grid;
    gap: 3px;
    white-space: nowrap;
}

.docket-actions {
    display: grid;
    gap: 8px;
    padding-top: 3px;
    justify-items: stretch;
}

.docket-actions a,
.docket-actions button {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--ink);
    padding: 6px 14px;
    cursor: pointer;
}

.docket-actions a:hover,
.docket-actions button:hover {
    background: var(--ink);
    color: var(--sheet-raised);
}

.more-link {
    display: inline-block;
    margin-top: 16px;
    font-style: italic;
    font-size: 15px;
    color: var(--maroon);
    text-decoration: none;
    border-bottom: 1px solid var(--rule-strong);
}

.more-link:hover { color: var(--maroon-bright); }

.quiet-state {
    border: 1px solid var(--rule-strong);
    background: var(--sheet);
    padding: 26px 28px;
    display: flex;
    align-items: baseline;
    gap: 16px;
}

.quiet-state span {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--moss);
}

.quiet-state p { font-style: italic; color: var(--ink-soft); }

/* Movement + collections split */

.movement-split {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
    gap: clamp(28px, 4vw, 56px);
    padding: 38px 0 10px;
    align-items: start;
}

/* Collections chart — Fig. 2 */

.collections-chart {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 150px;
    border-bottom: 2px solid var(--ink);
    padding: 0 2px;
}

.collections-chart .col {
    position: relative;
    flex: 1 1 0;
    min-width: 2px;
    height: 100%;
}

.collections-chart .col::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: max(var(--v, 0%), 1px);
    background: var(--maroon);
    border-radius: 1.5px 1.5px 0 0;
    opacity: 0.92;
}

.collections-chart .col:hover::after { background: var(--maroon-bright); opacity: 1; }

.chart-scale {
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    color: var(--faint);
    padding-top: 5px;
}

.chart-peak {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    color: var(--faint);
    text-align: right;
    margin-bottom: 4px;
}

.chart-table-details { margin-top: 10px; }

.chart-table-details summary {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--faint);
    cursor: pointer;
}

.chart-table-details table {
    margin-top: 8px;
    border-collapse: collapse;
    font-family: var(--mono);
    font-size: 12px;
}

.chart-table-details td, .chart-table-details th {
    border: 1px solid var(--rule);
    padding: 3px 10px;
    text-align: right;
}

.day-figures {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 20px;
}

.day-figures div { border-top: 1px solid var(--ink); padding-top: 8px; }

.day-figures span {
    display: block;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.day-figures strong {
    display: block;
    font-size: 27px;
    font-weight: 500;
    margin-top: 3px;
}

/* Movement ledger — latest runs */

.movement-ledger header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 3px double var(--ink);
    padding-bottom: 8px;
    margin-bottom: 4px;
}

.movement-ledger header span {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.movement-ledger header a {
    font-style: italic;
    font-size: 13.5px;
    color: var(--maroon);
    text-decoration: none;
}

.movement-ledger header a:hover { color: var(--maroon-bright); }

.movement-row {
    display: grid;
    grid-template-columns: 46px 10px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid var(--rule);
}

.movement-row time {
    font-size: 11.5px;
    color: var(--faint);
}

.movement-pin {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rule-strong);
}

.movement-pin.status-success, .movement-pin.status-no_new_content { background: var(--moss); }
.movement-pin.status-failed, .movement-pin.status-timeout, .movement-pin.status-technical_error { background: var(--red); }
.movement-pin.status-partial, .movement-pin.status-no_items { background: var(--maroon); }
.movement-pin.status-protected { background: var(--blue); }

.movement-row a, .movement-row > div > span:first-child {
    display: block;
    font-size: 15px;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.movement-row a:hover { color: var(--maroon-bright); }

.movement-row small {
    display: block;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--faint);
}

.movement-row strong { font-size: 13px; font-weight: 700; }

/* Systems notes — in the margin */

.systems-margin { padding: 40px 0 8px; }

.margin-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
    align-items: stretch;
}

.margin-grid article {
    border-top: 1px solid var(--ink);
    padding-top: 10px;
}

.margin-grid article > span {
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.margin-grid strong {
    display: block;
    font-size: 21px;
    font-weight: 500;
    margin: 5px 0 4px;
}

.margin-grid p { font-size: 13.5px; font-style: italic; color: var(--faint); }

/* The stamp */

.stamp {
    justify-self: end;
    align-self: center;
    transform: rotate(-4deg);
    border: 2px solid var(--maroon);
    box-shadow: inset 0 0 0 3px var(--sheet-raised), inset 0 0 0 4px var(--maroon);
    color: var(--maroon);
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    text-align: center;
    padding: 12px 22px 11px;
    opacity: 0.85;
    background: transparent;
    white-space: nowrap;
}

.stamp small {
    display: block;
    font-size: 9px;
    letter-spacing: 0.3em;
    margin-top: 3px;
}

.systems-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    margin-bottom: 20px;
}

/* Footnotes — the law review’s soul */

.footnotes {
    margin-top: 52px;
    font-size: 13.5px;
    color: var(--ink-soft);
}

.footnotes::before {
    content: "";
    display: block;
    width: 34%;
    min-width: 180px;
    border-top: 1px solid var(--ink);
    margin-bottom: 12px;
}

.footnotes ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: fn;
    max-width: 88ch;
}

.footnotes li {
    counter-increment: fn;
    padding-left: 26px;
    position: relative;
    margin-bottom: 7px;
    line-height: 1.5;
}

.footnotes li::before {
    content: counter(fn) ".";
    position: absolute;
    left: 0;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--maroon);
}

.footnotes i { font-style: italic; }

sup.fn {
    font-family: var(--mono);
    font-size: 0.55em;
    font-weight: 700;
    vertical-align: super;
    line-height: 0;
}

sup.fn a {
    color: var(--maroon);
    text-decoration: none;
}

sup.fn a:hover { color: var(--maroon-bright); }

/* --------------------------------------------------------------------------
   Shared components (subpages)
   -------------------------------------------------------------------------- */

.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 22px;
    margin-bottom: 30px;
}

.metric-card {
    border-top: 1px solid var(--ink);
    padding-top: 10px;
    background: transparent;
}

.metric-label {
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.metric-value {
    font-size: 34px;
    font-weight: 500;
    line-height: 1.1;
    margin: 4px 0 2px;
}

.metric-value.compact { font-size: 17px; font-family: var(--mono); padding-top: 8px; }

.metric-meta {
    font-size: 13px;
    font-style: italic;
    color: var(--faint);
}

.metric-card.healthy .metric-value { color: var(--moss); }
.metric-card.warning .metric-value { color: var(--maroon-bright); }
.metric-card.danger .metric-value { color: var(--red); }
.metric-card.blue .metric-value { color: var(--blue); }

/* Panels — filed documents */

.panel {
    border: 1px solid var(--ink);
    background: var(--sheet);
    box-shadow: 4px 4px 0 rgba(32, 26, 16, 0.12);
    padding: 0;
    margin-bottom: 34px;
}

.panel-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 22px 12px;
    border-bottom: 1px solid var(--ink);
}

.panel-title { font-size: 21px; font-weight: 500; }

.panel-caption {
    font-size: 13px;
    font-style: italic;
    color: var(--faint);
    margin-top: 2px;
}

.panel-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 22px;
    border-bottom: 1px solid var(--rule);
}

.panel-action {
    font-style: italic;
    font-size: 14px;
    color: var(--maroon);
    text-decoration: none;
}

.panel-action:hover { color: var(--maroon-bright); }

.empty-panel, .empty-state {
    padding: 34px 22px;
    text-align: center;
    font-style: italic;
    color: var(--faint);
}

.empty-state-mark {
    font-size: 22px;
    color: var(--moss);
    font-style: normal;
    margin-bottom: 6px;
}

.subpage-error {
    border: 1px solid var(--red);
    background: var(--red-wash);
    color: var(--red);
    padding: 14px 18px;
    margin-bottom: 24px;
}

/* Tables — set like a reporter’s tables */

.table-scroll { overflow-x: auto; }

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.data-table thead th {
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: left;
    color: var(--ink-soft);
    padding: 10px 14px;
    border-bottom: 2px solid var(--ink);
    white-space: nowrap;
}

.data-table thead th a { text-decoration: none; }
.data-table thead th a:hover { color: var(--maroon-bright); }

.data-table tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}

.data-table tbody tr:hover td { background: rgba(255, 252, 240, 0.65); }

.data-table td.mono, .data-table .mono { font-size: 13px; }

.cell-primary {
    display: block;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}

a.cell-primary:hover { color: var(--maroon-bright); }

.cell-secondary {
    display: block;
    font-size: 12px;
    color: var(--faint);
    margin-top: 2px;
}

.cell-stack { display: grid; gap: 4px; }
.cell-stack.inline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.cell-reason {
    display: block;
    max-width: 46ch;
    font-size: 13px;
    color: var(--ink-soft);
    overflow-wrap: anywhere;
}

.code-cell, .path-cell {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink-soft);
    overflow-wrap: anywhere;
}

.path-cell { max-width: 30ch; }

.rank-cell { color: var(--faint); }

.metric-cell span { display: block; white-space: nowrap; }

.time-cell .cell-secondary { font-family: var(--mono); }

.log-links { white-space: nowrap; }
.log-links a { margin-right: 10px; }

.row-arrow {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--maroon);
}

.row-arrow:hover { color: var(--maroon-bright); }

.table-note {
    font-size: 12px;
    color: var(--faint);
    padding: 10px 22px;
}

/* Registry page */

.registry-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 22px;
    margin-bottom: 30px;
}

.registry-overview > div { border-top: 1px solid var(--ink); padding-top: 10px; }

.registry-overview span {
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
    display: block;
}

.registry-overview strong {
    display: block;
    font-size: 34px;
    font-weight: 500;
    margin: 4px 0 8px;
}

.registry-overview i {
    display: block;
    height: 5px;
    width: var(--share, 0%);
    min-width: 2px;
    background: var(--rule-strong);
}

.registry-overview > div:nth-child(1) i { background: var(--spine-c); }
.registry-overview > div:nth-child(2) i { background: var(--blue); }
.registry-overview > div:nth-child(3) i { background: var(--plum); }
.registry-overview > div:nth-child(4) i { background: var(--red); }

.registry-sheet {
    border: 1px solid var(--ink);
    background: var(--sheet);
    box-shadow: 4px 4px 0 rgba(32, 26, 16, 0.12);
}

.registry-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--ink);
}

.archive-control {
    font-size: 13px;
    font-style: italic;
    color: var(--ink-soft);
}

.registry-pagination, .registry-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 22px;
    border-top: 1px solid var(--rule);
    font-size: 13px;
    font-style: italic;
    color: var(--faint);
}

.pagination {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-style: normal;
}

.pagination a {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--maroon);
    border: 1px solid var(--ink);
    padding: 4px 12px;
}

.pagination a:hover { background: var(--ink); color: var(--sheet-raised); }

.pagination .current {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink-soft);
}

/* Tabs & search */

.view-tabs { display: inline-flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--ink); }

.view-tab {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink-soft);
    background: transparent;
    border: 0;
    border-right: 1px solid var(--ink);
    padding: 6px 14px;
    cursor: pointer;
}

.view-tab:last-child { border-right: 0; }

.view-tab.active { background: var(--ink); color: var(--sheet-raised); }
.view-tab:not(.active):hover { background: var(--paper-deep); }

.search-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--ink);
    padding: 4px 2px;
    min-width: 240px;
}

.search-glyph {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--maroon);
}

.search-input {
    border: 0;
    background: transparent;
    color: var(--ink);
    font-family: var(--serif);
    font-size: 15px;
    width: 100%;
    outline: none;
}

.search-input::placeholder { color: var(--faint); font-style: italic; }

/* Health page: distribution */

.health-distribution { padding: 10px 22px 18px; }

.distribution-row {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr) 64px 110px;
    gap: 16px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--rule);
}

.distribution-row:last-child { border-bottom: 0; }

.distribution-track { height: 12px; background: var(--paper-deep); }

.distribution-fill {
    height: 100%;
    width: var(--distribution-width, 0%);
    min-width: 2px;
    background: var(--rule-strong);
}

.distribution-fill.success, .distribution-fill.no_new_content { background: var(--spine-c); }
.distribution-fill.failed, .distribution-fill.timeout, .distribution-fill.technical_error { background: var(--red); }
.distribution-fill.partial, .distribution-fill.no_items { background: var(--maroon); }
.distribution-fill.protected { background: var(--blue); }

.distribution-value { font-weight: 700; text-align: right; }
.distribution-label { font-size: 11px; color: var(--faint); text-align: right; }

.split-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 26px;
}

/* Uploads page: SLO banner */

.slo-banner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    border: 1px solid var(--moss);
    background: var(--moss-wash);
    color: var(--moss);
    padding: 14px 22px;
    margin-bottom: 30px;
}

.slo-banner.breached {
    border-color: var(--red);
    background: var(--red-wash);
    color: var(--red);
}

.slo-title {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.slo-copy { font-style: italic; font-size: 14.5px; }

.slo-value {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: 1px solid currentColor;
    padding: 5px 12px;
}

/* Detail pages */

.detail-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 26px;
}

.detail-kicker {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--maroon);
}

.detail-name {
    font-size: clamp(26px, 3.4vw, 38px);
    font-weight: 500;
    line-height: 1.1;
    margin: 4px 0 6px;
}

.detail-name.mono { font-size: clamp(20px, 2.6vw, 28px); }

.detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    font-size: 14px;
    font-style: italic;
    color: var(--faint);
}

.detail-meta span + span::before {
    content: "\00B7";
    margin-right: 8px;
    color: var(--rule-strong);
}

.detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
    gap: 26px;
    align-items: start;
}

.definition-list { padding: 6px 22px 16px; }

.definition-row {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--rule);
}

.definition-row:last-child { border-bottom: 0; }

.definition-row > * { min-width: 0; }

.definition-key {
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding-top: 3px;
    overflow-wrap: anywhere;
}

.definition-value { font-size: 14.5px; overflow-wrap: anywhere; }
.definition-value.error { color: var(--red); }

/* Run dialog */

.run-dialog {
    border: 1px solid var(--ink);
    background: var(--sheet-raised);
    color: var(--ink);
    box-shadow: 8px 8px 0 rgba(32, 26, 16, 0.2);
    padding: 26px 30px;
    max-width: 560px;
    width: calc(100vw - 40px);
}

.run-dialog::backdrop { background: rgba(32, 26, 16, 0.45); }

.run-dialog h2 { font-size: 24px; font-weight: 500; margin: 4px 0 12px; }

.run-dialog pre {
    background: var(--ink);
    color: var(--sheet-raised);
    font-size: 12.5px;
    padding: 12px 14px;
    overflow-x: auto;
    margin: 0 0 14px;
}

.dialog-close {
    float: right;
    border: 1px solid var(--ink);
    background: transparent;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 5px 10px;
    cursor: pointer;
}

.dialog-close:hover { background: var(--ink); color: var(--sheet-raised); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1020px) {
    .front-lead { grid-template-columns: minmax(0, 1fr); }
    .movement-split { grid-template-columns: minmax(0, 1fr); }
    .docket-entry { grid-template-columns: 72px minmax(0, 1fr); }
    .docket-facts { text-align: left; grid-column: 2; display: flex; gap: 16px; }
    .docket-actions { grid-column: 2; grid-auto-flow: column; justify-content: start; }
    .detail-layout { grid-template-columns: minmax(0, 1fr); }
    .split-grid { grid-template-columns: minmax(0, 1fr); }
    .margin-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .systems-head { grid-template-columns: minmax(0, 1fr); }
    .stamp { justify-self: start; }
}

@media (max-width: 720px) {
    .nameplate { white-space: normal; font-size: clamp(26px, 8vw, 34px); }
    .plate-row { grid-template-columns: minmax(0, 1fr); }
    .plate-slug { display: none; }
    .plate-live { text-align: center; }
    .plate-folio { flex-wrap: wrap; justify-content: center; }
    .running-head-inner { flex-wrap: wrap; justify-content: flex-start; }
    .running-head a { display: none; padding: 8px 14px; }
    .running-head.open a { display: block; width: 100%; border-bottom: 1px solid var(--rule); }
    .menu-button { display: inline-block; }
    .running-head.open .menu-button { margin-bottom: 4px; }
    .subpage-intro { flex-direction: column; align-items: flex-start; }
    .section-intro { flex-direction: column; align-items: flex-start; }
    .section-intro > p { text-align: left; }
    .day-figures { grid-template-columns: minmax(0, 1fr); }
    .distribution-row { grid-template-columns: minmax(0, 1fr) 56px; }
    .distribution-row > div:first-child { grid-column: 1 / -1; }
    .distribution-label { display: none; }
    .definition-row { grid-template-columns: minmax(0, 1fr); gap: 3px; }
    .stacks { --cell: 60px; }
    .spine { width: 5px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .plate-live i { animation: none; }
    .spine::after { transition: none; }
}