/* ============================================================================ The Register — the one stylesheet. Ops Engine token discipline, restyled as a light, calm government register: deep teal + sand + white, generous type. Semantic tokens only: components reference var(--x), never hex. Mobile-first at 390px; system fonts, nothing external ever loads (CSP default-src 'none' for the asset layer). Top nav, never a fixed bottom bar (WCAG 2.2 SC 2.4.11, CONTRACTS.md decision 5). --tap-min 44px everywhere a finger lands (WCAG 2.5.8). Print styles for /status and /verify — a printed status page is a real artefact at a counter (BRIEF.md §3, "the black hole"). ========================================================================== */ :root { --bg: #f8f5ee; /* sand */ --surface: #ffffff; --text: #1d2b31; --text-dim: #55676f; --hairline: #ddd5c4; --brand: #0b5e59; /* deep teal: nav, buttons, links, focus */ --brand-ink: #ffffff; --brand-soft: #e3efec; /* tinted panels, flash, timeline accents */ --brand-soft-ink: #0c4b46; --danger: #a33a25; --danger-bg: #fbebe6; --warn-bg: #fdf3d7; --warn-ink: #6b5416; --ok: #0b5e59; --muted: #8a94a0; --tap-min: 44px; --radius: 8px; --pad: 16px; --measure: 720px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } @media (prefers-color-scheme: dark) { :root { --bg: #121a1e; --surface: #1b2a2f; --text: #e7ecee; --text-dim: #9fb2ba; --hairline: #2e4046; --brand: #2fa79a; --brand-ink: #08211f; --brand-soft: #16352f; --brand-soft-ink: #9fd8cc; --danger: #e0705a; --danger-bg: #3a1d15; --warn-bg: #3a3012; --warn-ink: #ecd48a; --ok: #2fa79a; --muted: #708090; } } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); font-size: 17px; /* generous: citizens, counters, older phones */ line-height: 1.55; background: var(--bg); color: var(--text); } main { max-width: var(--measure); margin: 0 auto; padding: var(--pad); } h1 { font-size: 1.45rem; line-height: 1.25; margin: 0.6rem 0 0.9rem; } h2 { font-size: 1.02rem; margin: 1.4rem 0 0.5rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 650; } a { color: var(--brand); } small, .dim { color: var(--text-dim); } :focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; } /* --- skip link (first element in ) --------------------------------- */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--surface); color: var(--brand); padding: 12px 18px; font-weight: 700; text-decoration: underline; border: 2px solid var(--brand); border-top: none; border-radius: 0 0 var(--radius) var(--radius); } .skip-link:focus { left: 0; } /* The honeypot block (src/screens/public.ts apply form, CONTRACTS "off-screen .hp class"): moved fully off-screen so no person ever sees or fills it — only automation that reads raw markup does. Kept out of the tab order by tabindex="-1" and out of the accessibility tree by aria-hidden. */ .hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* --- top nav (never a bottom bar) ---------------------------------------- */ header.topbar { background: var(--brand); border-bottom: 4px solid var(--hairline); } nav.topnav { max-width: calc(var(--measure) + 2 * var(--pad)); margin: 0 auto; padding: 0 8px; display: flex; flex-wrap: wrap; align-items: stretch; column-gap: 2px; } nav.topnav a { display: inline-flex; align-items: center; min-height: calc(var(--tap-min) + 8px); padding: 0 12px; color: var(--brand-ink); text-decoration: none; font-weight: 600; border-bottom: 3px solid transparent; } nav.topnav a.brand { font-weight: 800; letter-spacing: 0.01em; } nav.topnav a[aria-current="page"] { border-bottom-color: var(--brand-ink); } nav.topnav a:hover { text-decoration: underline; } nav.topnav :focus-visible { outline-color: var(--brand-ink); outline-offset: -3px; } nav.topnav .whoami { margin-left: auto; align-self: center; color: var(--brand-ink); opacity: 0.9; font-size: 0.9rem; padding: 0 10px; } /* --- cards & meta --------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: var(--pad); margin-bottom: 12px; } .card .head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; } .ref { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: 0.02em; } .meta { color: var(--text-dim); font-size: 0.92rem; margin-top: 2px; overflow-wrap: anywhere; } .demo-note { /* BRIEF.md §4.10: demo statutory periods, labelled */ background: var(--warn-bg); color: var(--warn-ink); border-radius: var(--radius); padding: 8px 12px; margin: 12px 0; font-size: 0.9rem; font-weight: 600; } /* --- status badges -------------------------------------------------------- */ .badge { display: inline-block; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 10px; border-radius: 999px; white-space: nowrap; } .badge.received { background: var(--brand-soft); color: var(--brand-soft-ink); } .badge.in_review { background: var(--warn-bg); color: var(--warn-ink); } .badge.rfi { background: var(--warn-bg); color: var(--warn-ink); } .badge.decided { background: var(--hairline); color: var(--text); } .badge.granted { background: var(--brand-soft); color: var(--brand-soft-ink); } .badge.refused { background: var(--danger-bg); color: var(--danger); } .badge.overdue { background: var(--danger-bg); color: var(--danger); } /* --- buttons & forms ------------------------------------------------------ */ button, .btn { display: inline-block; min-height: var(--tap-min); padding: 10px 18px; border: 1px solid var(--brand); border-radius: var(--radius); background: var(--surface); color: var(--brand); font: inherit; font-weight: 650; cursor: pointer; text-decoration: none; text-align: center; } button.primary, .btn.primary { background: var(--brand); color: var(--brand-ink); } button.danger, .btn.danger { color: var(--danger); border-color: var(--danger); } button:disabled { opacity: 0.6; cursor: default; } .row-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .row-actions form { flex: 1; min-width: 110px; } .row-actions button { width: 100%; } form.stack label { display: block; margin: 14px 0 4px; font-weight: 650; font-size: 0.98rem; } input, select, textarea { width: 100%; min-height: var(--tap-min); padding: 10px 12px; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--text-dim); border-radius: var(--radius); } textarea { min-height: 96px; } form .hint { color: var(--text-dim); font-size: 0.88rem; margin-top: 3px; } form.stack button[type=submit] { margin-top: 16px; width: 100%; } fieldset { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 4px var(--pad) var(--pad); margin: 14px 0; } legend { font-weight: 650; padding: 0 6px; } /* --- errors (WCAG 2.2: summary first in DOM, links to fields) ------------- */ .error-summary { border: 2px solid var(--danger); border-radius: var(--radius); background: var(--danger-bg); padding: var(--pad); margin-bottom: 16px; } .error-summary h2 { margin: 0 0 8px; color: var(--danger); text-transform: none; letter-spacing: 0; font-size: 1.05rem; } .error-summary ul { margin: 0; padding-left: 20px; } .error-summary a { color: var(--danger); font-weight: 650; } input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border: 2px solid var(--danger); } .field-error { color: var(--danger); font-weight: 650; font-size: 0.9rem; margin-top: 4px; } /* --- flash (PRG feedback) ------------------------------------------------- */ .flash { background: var(--brand-soft); color: var(--brand-soft-ink); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px; font-weight: 650; } .banner { background: var(--warn-bg); color: var(--warn-ink); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px; font-weight: 650; } /* --- timeline (/status, /a/:reference) ------------------------------------ */ ol.timeline { list-style: none; margin: 0; padding: 2px 0 0; position: relative; } ol.timeline::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: var(--hairline); } ol.timeline li { position: relative; padding: 0 0 20px 32px; } ol.timeline li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 3px solid var(--brand); } ol.timeline li.current::before { background: var(--brand); } ol.timeline .when { color: var(--text-dim); font-size: 0.9rem; font-variant-numeric: tabular-nums; } ol.timeline .actor { color: var(--text-dim); font-size: 0.9rem; } ol.timeline .reason { margin: 4px 0 0; overflow-wrap: anywhere; } /* --- queue table (officer console) ---------------------------------------- */ .table-scroll { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); } table.queue { width: 100%; border-collapse: collapse; min-width: 560px; } table.queue th { text-align: left; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); padding: 10px 12px; border-bottom: 2px solid var(--hairline); } table.queue td { padding: 12px; border-bottom: 1px solid var(--hairline); vertical-align: top; } table.queue tr:last-child td { border-bottom: none; } table.queue td.due { font-variant-numeric: tabular-nums; white-space: nowrap; } table.queue td.due.overdue { color: var(--danger); font-weight: 700; } table.plain { width: 100%; border-collapse: collapse; } table.plain td { padding: 8px 4px; border-bottom: 1px solid var(--hairline); vertical-align: top; } /* --- error page ----------------------------------------------------------- */ .errorpage { text-align: center; padding-top: 12vh; } .errorpage .errcode { font-size: 2.6rem; font-weight: 800; color: var(--muted); margin: 0; font-variant-numeric: tabular-nums; } /* --- print: /status and /verify are counter artefacts ---------------------- */ @media print { body { background: #fff; color: #000; font-size: 12pt; } .skip-link, header.topbar, .flash, .banner, form, button, .btn, .row-actions, .no-print { display: none !important; } main { max-width: none; padding: 0; } a { color: #000; text-decoration: none; } .card, ol.timeline li { break-inside: avoid; } .card { border: 1px solid #000; } .badge { border: 1px solid #000; background: none !important; color: #000 !important; } ol.timeline::before { background: #000; } ol.timeline li::before { border-color: #000; } .ref { font-size: 1.4rem; } /* The permanent URL must survive on paper — print it after its link. */ a.permalink::after { content: " (" attr(href) ")"; font-size: 0.85em; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }