/* The one stylesheet for SIRPS and the registry. The rules are in
   docs/design.md. This file is kept identical in both projects; make lint
   and the pipeline check that it is. Do not add a colour, a font or a
   component here without changing docs/design.md in the same change. */

/* -- Type: Charter -------------------------------------------------------
   The interface is set in Charter, Matthew Carter's 1987 face drawn for
   low-resolution screens and printers. Where the machine has it (macOS)
   the system face is used; elsewhere XCharter, the free extension of
   Bitstream Charter, is served from static/fonts so every machine shows
   the same face. */

@font-face { font-family: "XCharter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/charter-regular.woff") format("woff"); }
@font-face { font-family: "XCharter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/charter-bold.woff") format("woff"); }
@font-face { font-family: "XCharter"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/charter-italic.woff") format("woff"); }
@font-face { font-family: "XCharter"; font-style: italic; font-weight: 700; font-display: swap; src: url("../fonts/charter-bolditalic.woff") format("woff"); }

:root {
  /* The ministry's colours, measured from its seal: the blue of the shield,
     the gold and red of the arms. */
  --navy: #204192;
  --navy-deep: #17306d;
  --navy-tint: #e9eef8;
  --gold: #f5af19;
  --gold-deep: #9a6a05;
  --gold-tint: #fff6dd;
  --green: #1a7a3c;
  --green-tint: #e6f3ea;
  --red: #a41e22;
  --red-tint: #fae9e9;
  /* Neutral greys: a light grey ground, white panels (owner, 7 Oct 2026). */
  --ink: #1c1d20;
  --muted: #686d75;
  --line: #dcdfe4;
  --line-soft: #e9ebef;
  --ground: #f3f4f6;
  --ground-strong: #e9ebee;
  --paper: #ffffff;
  --serif: Charter, "Bitstream Charter", "XCharter", "Charter BT", Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --radius: 8px;
  --radius-sm: 6px;
  --shadow: 0 8px 24px rgba(28, 29, 32, .10);
  /* Pages use the width of the screen, capped only on very wide ones. */
  --measure: 1920px;
}

/* -- Base --------------------------------------------------------------- */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font: 15.5px/1.55 var(--serif);
  color: var(--ink);
  background: var(--ground);
}
a { color: var(--navy); text-decoration: underline; text-decoration-color: rgba(32, 65, 146, .35); text-underline-offset: 2px; }
a:hover { color: var(--navy-deep); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
main { flex: 1; width: 100%; max-width: var(--measure); margin: 0 auto; padding: 28px 24px 56px; }
h1, h2, h3 { color: var(--ink); letter-spacing: -.012em; line-height: 1.2; }
h1 { font-size: 1.85rem; font-weight: 700; margin: 0 0 6px; text-wrap: balance; }
h1 .muted { font-weight: 400; font-size: 1.1rem; letter-spacing: 0; }
h2 { font-size: 1.15rem; font-weight: 700; margin: 28px 0 10px; }
h3 { font-size: 1rem; font-weight: 700; margin: 22px 0 6px; }
p { margin: 0 0 12px; }
.kicker { display: block; color: var(--navy); text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 700; margin-bottom: 6px; }
.lede { color: var(--muted); max-width: 72ch; margin-bottom: 22px; font-size: 1.02rem; }
.back { margin: 0 0 10px; font-size: .92rem; }
.back a { text-decoration: none; color: var(--muted); }
.back a:hover { color: var(--navy); }
.muted { color: var(--muted); }
.error { color: var(--red); }
.empty { color: var(--muted); padding: 28px 16px; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius-sm); background: var(--ground); }
code { font-family: var(--mono); font-size: .84em; background: var(--ground-strong); padding: 1px 5px; border-radius: 4px; }
pre { font-family: var(--mono); background: var(--ground); border: 1px solid var(--line-soft); padding: 12px; overflow-x: auto; font-size: .82em; border-radius: var(--radius-sm); }
strong { font-weight: 700; }
details { margin: 8px 0; }
details summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
details summary:hover { color: var(--navy); }
.scroll { overflow-x: auto; }

/* -- Identity band and navigation --------------------------------------- */

/* The identity band is white with the service and the ministry in navy;
   the red hairline of the arms closes it; the navigation bar under it is
   navy with white links and the gold underline. */
.identity { background: var(--paper); color: var(--navy); border-bottom: 3px solid var(--red); }
.identity .inner { max-width: var(--measure); margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; }
.identity .service { display: flex; align-items: center; gap: 14px; color: var(--navy); text-decoration: none; min-width: 0; }
.identity .seal { width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 1px solid var(--line); display: block; flex: none; }
.identity .name { font-size: 1.35rem; font-weight: 700; letter-spacing: .02em; line-height: 1.1; }
.identity .long { font-size: .84rem; opacity: .85; }
.identity .ministry { text-align: right; font-size: .84rem; line-height: 1.35; opacity: .95; }
.identity .ministry strong { display: block; font-size: .9rem; }

.topbar { position: sticky; top: 0; z-index: 50; background: var(--navy); color: #fff; }
.topbar .inner { max-width: var(--measure); margin: 0 auto; padding: 0 24px; display: flex; align-items: stretch; gap: 24px; min-height: 46px; }
.topbar nav { display: flex; align-items: stretch; gap: 2px; flex-wrap: wrap; margin-left: -10px; }
.topbar nav a { display: inline-flex; align-items: center; padding: 0 10px; color: rgba(255, 255, 255, .85); text-decoration: none; border-bottom: 3px solid transparent; font-size: .98rem; }
.topbar nav a:hover { color: #fff; }
.topbar nav a.active { color: #fff; border-bottom-color: var(--gold); font-weight: 700; }
.topbar :focus-visible { outline-color: #fff; }
.topbar .who { margin-left: auto; display: flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, .85); font-size: .9rem; white-space: nowrap; }
.topbar .role { border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; padding: 1px 10px; font-size: .78rem; color: #fff; background: transparent; }
button.link { background: none; border: 0; color: var(--navy); cursor: pointer; padding: 0; font: inherit; text-decoration: underline; text-underline-offset: 2px; min-height: 0; }
button.link:hover { color: var(--navy-deep); background: none; }
.topbar button.link { color: #fff; text-decoration-color: rgba(255, 255, 255, .5); }
.topbar button.link:hover { color: #fff; text-decoration-color: #fff; }

/* -- Footer ------------------------------------------------------------- */

.footer { border-top: 1px solid var(--line); background: var(--paper); color: var(--muted); font-size: .86rem; }
.footer .inner { max-width: var(--measure); margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer .powered { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); text-decoration: none; }
.footer .powered img { height: 22px; width: auto; display: block; }
.footer .powered:hover { color: var(--ink); }

/* -- Page head ---------------------------------------------------------- */

.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.page-head .copy { flex: 1 1 560px; max-width: 760px; }
.page-head .lede { margin-bottom: 0; }
.page-head .actions { margin: 4px 0 0; flex: none; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 22px; }
.actions .muted { font-size: .9rem; }

/* -- Section navigation: the pages of one section, under its page head --- */

.subnav { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin: -6px 0 22px; }
.subnav a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; color: var(--ink); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.subnav a:hover { color: var(--navy); }
.subnav a.active { color: var(--navy); border-bottom-color: var(--gold); font-weight: 700; }
.subnav .count { display: inline-block; min-width: 1.5em; padding: 0 6px; border-radius: 999px; background: var(--gold-tint); color: var(--gold-deep); font-size: .78rem; font-weight: 700; text-align: center; line-height: 1.5; }

/* -- Messages ----------------------------------------------------------- */

.messages { list-style: none; padding: 0; margin: 0 0 20px; }
.messages li { padding: 10px 14px; margin-bottom: 8px; background: var(--navy-tint); border: 1px solid transparent; border-left: 4px solid var(--navy); border-radius: var(--radius-sm); }
.messages .success { background: var(--green-tint); border-left-color: var(--green); }
.messages .warning { background: var(--gold-tint); border-left-color: var(--gold); }
.messages .error { background: var(--red-tint); border-left-color: var(--red); color: var(--ink); }

/* -- Panels ------------------------------------------------------------- */

.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 18px; padding: 18px 20px 20px; }
.panel > h2:first-child { margin: -18px -20px 18px; padding: 11px 20px; border-bottom: 1px solid var(--line-soft); font-size: 1.05rem; }
.panel > table:last-child, .panel > .scroll:last-child { margin-bottom: 0; }
.panel table { margin: 0 -20px; width: calc(100% + 40px); }
.panel table th:first-child, .panel table td:first-child { padding-left: 20px; }
.panel table th:last-child, .panel table td:last-child { padding-right: 20px; }
.panel > table:last-child tr:last-child td, .panel > table:last-child tr:last-child th, .panel > .scroll:last-child tr:last-child td { border-bottom: 0; }
.panel .empty { margin: 0; }

/* -- Figures: a hairline strip of numbers, not a row of cards ----------- */

.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); overflow: hidden; margin-bottom: 18px; }
.figure { padding: 12px 16px 14px; border-left: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.figure:first-child { border-left: 0; }
.figure .label { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.figure .value { font-size: 1.55rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.figure .note { font-size: .82rem; color: var(--muted); }

/* -- Headline: the one number a dashboard leads with, once per page ----- */

.headline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 0 0 6px; }
.headline .value { font-size: 3rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; color: var(--ink); }
.headline .label { font-size: 1.15rem; color: var(--ink); max-width: 44ch; }
.headline-note { color: var(--muted); max-width: 72ch; margin: 0 0 14px; }

/* -- Charts: drawn by static/js/charts.js; rules in docs/dashboard.md ---- */

.chart { width: 100%; height: 320px; margin: 4px 0 6px; }
.chart.status { height: 76px; }
.chart.short { height: 260px; }
.downloads { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 8px 0 0; font-size: .86rem; color: var(--muted); }
.downloads button.link { font-size: inherit; }
.panel > .downloads:last-child { margin-bottom: -4px; }

/* -- Tables ------------------------------------------------------------- */

table { border-collapse: collapse; width: 100%; background: var(--paper); font-variant-numeric: tabular-nums; margin-bottom: 18px; }
main > table, main > form > table, main > .scroll > table { border: 1px solid var(--line); }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
thead th { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); border-bottom: 1px solid var(--line); }
tbody th { font-weight: 700; color: var(--ink); }
tbody tr:hover td { background: #f8f9fa; }
th.num, td.num { text-align: right; }
tr.muted td, tr.muted th { color: var(--muted); }
tr.changed td, tr.changed th { background: var(--gold-tint); }
table.fields th { width: 15rem; color: var(--muted); font-weight: 400; }
td .inline { white-space: nowrap; }

/* -- Pills and badges --------------------------------------------------- */

.pill { display: inline-block; font-size: .78rem; line-height: 1.45; padding: 1px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--ground-strong); color: var(--ink); white-space: nowrap; vertical-align: middle; font-weight: 700; letter-spacing: .01em; }
.pill.seen, .pill.open, .pill.proposed, .pill.staged, .pill.pending, .pill.info { border-color: transparent; color: var(--navy); background: var(--navy-tint); }
.pill.verified, .pill.published, .pill.approved, .pill.committed, .pill.written, .pill.decided, .pill.accepted, .pill.sent { border-color: transparent; color: var(--green); background: var(--green-tint); }
.pill.rejected, .pill.failed, .pill.declined, .pill.error, .pill.block { border-color: transparent; color: var(--red); background: var(--red-tint); }
.pill.warn { border-color: transparent; color: var(--gold-deep); background: var(--gold-tint); }
.pill.possible { border-color: transparent; color: var(--gold-deep); background: var(--gold-tint); }
.pill.strong { border-color: transparent; color: var(--red); background: var(--red-tint); }
.pill.exited, .pill.superseded, .pill.revoked { color: var(--muted); text-decoration: line-through; }
.badge { font-size: .72rem; font-weight: 700; background: var(--gold); color: var(--ink); border-radius: 4px; padding: 0 6px; vertical-align: middle; }

/* -- Findings ----------------------------------------------------------- */

.finding { border: 1px solid var(--line-soft); border-left: 4px solid var(--line); background: var(--ground); padding: 10px 14px; margin-bottom: 10px; border-radius: var(--radius-sm); }
.finding.info { border-left-color: var(--navy); }
.finding.warn { border-left-color: var(--gold); background: var(--gold-tint); }
.finding.block { border-left-color: var(--red); background: var(--red-tint); }
.finding p { margin: 4px 0 0; overflow-wrap: anywhere; }
.finding strong { text-transform: uppercase; font-size: .74rem; letter-spacing: .07em; }

/* -- Buttons ------------------------------------------------------------ */

button, .button { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 16px; background: var(--navy); color: #fff; border: 1px solid var(--navy); border-radius: var(--radius-sm); font: inherit; font-weight: 700; line-height: 1.2; cursor: pointer; text-decoration: none; }
button:hover, .button:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; }
button.secondary, .button.secondary { background: var(--navy-tint); color: var(--navy); border-color: rgba(32, 65, 146, .3); }
button.secondary:hover, .button.secondary:hover { background: #dbe3f4; color: var(--navy-deep); border-color: var(--navy); }
button.danger, .button.danger { background: var(--red); border-color: var(--red); color: #fff; }
button.danger:hover, .button.danger:hover { background: #7f1519; border-color: #7f1519; }
button.small, .button.small { min-height: 30px; padding: 0 10px; font-size: .88rem; }
button:disabled { opacity: .55; cursor: default; }
form.inline { display: inline; }
form.inline input { width: auto; display: inline-block; margin: 0 4px 4px 0; }
form.inline button, td button, td .button { min-height: 30px; padding: 0 10px; font-size: .86rem; vertical-align: middle; }

/* -- Forms -------------------------------------------------------------- */

.form label { display: block; margin: 14px 0 4px; font-weight: 700; }
.form label:first-child { margin-top: 0; }
.form input, .form select, .form textarea { width: 100%; padding: 8px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; background: var(--paper); color: var(--ink); }
.form input[type=checkbox], .form input[type=radio], .form input[type=file] { width: auto; padding: 0; border: 0; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--navy); outline-offset: 0; border-color: var(--navy); }
.form button[type=submit] { margin-top: 18px; margin-right: 8px; }
.form .muted { font-size: .88rem; margin: 4px 0 0; }
.form .errorlist { color: var(--red); list-style: none; padding: 0; margin: 4px 0; font-size: .9rem; }
.form .grid label { margin-top: 0; }
.narrow { max-width: 440px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px 20px; }
input, select, textarea { font: inherit; }
input[type=text], input[type=search], input[type=password], input[type=number], select, textarea { padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); }

/* -- Filter bar --------------------------------------------------------- */

.filters { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: end; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 18px; }
.filters label { display: flex; flex-direction: column; gap: 4px; font-size: .84rem; color: var(--muted); }
.filters input, .filters select { min-width: 10rem; color: var(--ink); }
.filters button, .filters .button { min-height: 36px; }

/* -- Cards (navigation only) -------------------------------------------- */

.cards { list-style: none; padding: 0; margin: 0 0 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.cards li { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.cards li:hover { border-color: var(--navy); }
.cards li a { font-weight: 700; text-decoration: none; font-size: 1.05rem; }
.cards li a:hover { text-decoration: underline; }
.cards li span { color: var(--muted); font-size: .92rem; }

/* -- Evidence and images ------------------------------------------------ */

.evidence { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.evidence figure { margin: 0; }
.evidence img { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--ground); display: block; }
.evidence figcaption { font-size: .86rem; color: var(--muted); margin-top: 6px; }
.zoomable { margin: 0 0 16px; }
.zoomable img { width: 100%; cursor: zoom-in; border: 1px solid var(--line); border-radius: var(--radius-sm); display: block; background: var(--ground); }
.zoomable img.zoomed { transform: scale(2); transform-origin: top left; cursor: zoom-out; position: relative; z-index: 5; box-shadow: var(--shadow); }
.zoomable figcaption { font-size: .86rem; color: var(--muted); margin-top: 6px; }

/* -- Review layout ------------------------------------------------------ */

.review { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.review .panel { margin-bottom: 0; }
.review .region-values { grid-column: 1; grid-row: 1; }
.review .region-images { grid-column: 2; grid-row: 1 / span 2; }
.review .region-findings { grid-column: 1; grid-row: 2; }
.review .region-decision { grid-column: 1 / span 2; grid-row: 3; }
.review details { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 14px; margin: 0 0 8px; }
.review details[open] { background: var(--ground); }
.review details summary { padding: 9px 0; }
.review details .form { padding: 0 0 14px; }

/* -- Sign in ------------------------------------------------------------ */

.login { max-width: 460px; margin: 36px auto 0; }
.login .panel { padding: 32px; box-shadow: var(--shadow); }
.login .seal { display: block; width: 72px; height: 72px; margin: 0 auto 14px; }
.login .kicker { text-align: center; }
.login h1 { text-align: center; margin-bottom: 4px; }
.login .lede { text-align: center; margin: 0 auto 22px; }
.login .form button[type=submit] { width: 100%; }

/* -- Pager -------------------------------------------------------------- */

.pager { display: flex; gap: 16px; align-items: center; color: var(--muted); font-size: .92rem; }

/* -- Setting up tablets (decisions 75, 111 and 112): an officer's PIN,
   the one-time set-up code, the set-up link as a small QR code a tablet's
   camera reads, and the printed package, one sheet per officer. */
.pin { font-family: var(--mono); font-size: 1.5rem; font-weight: 700; letter-spacing: .18em; }
/* The link is a short address, so the symbol is small: a white box with a
   quiet border, about 240 pixels wide, never anti-aliased. */
.qr { background: #fff; display: inline-block; padding: 8px; margin: 6px 0 10px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.qr svg { display: block; width: min(240px, 80vw); height: auto; shape-rendering: crispEdges; }
code.wrap { word-break: break-all; }
.sheet { margin-bottom: 40px; }
@media print { .sheet { break-after: page; margin-bottom: 0; } .sheet:last-child { break-after: auto; } }

/* -- Touch: the verification application on a tablet or a phone ---------
   body.touch is the device application and the self-service page, drawn
   as the ministry's own form (decision 80): the seal centred over the
   ministry's name, a double rule in the red of the arms, numbered parts and
   questions, square fields, ink buttons, larger targets, one column, and
   the step's actions kept within reach at the foot of the screen. The same
   tokens as every other screen. docs/design.md, section 6. */

body.touch { font-size: 17.5px; background: var(--paper); }
body.touch main { max-width: 800px; padding: 18px 20px 130px; }
body.touch h1 { font-size: 1.65rem; margin: 0 0 8px; }
body.touch h2 { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; margin: 0; }
body.touch .kicker { color: var(--muted); letter-spacing: .16em; }
body.touch .lede { font-size: 1rem; margin: 0 0 16px; }
body.touch ul.documents { margin: 0 0 16px; padding-left: 22px; }
body.touch ul.documents li { margin-bottom: 4px; }
body.touch .small { font-size: .88rem; }
body.touch .num { font-family: var(--mono); font-size: .92em; }
body.touch .actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 4px 0 16px; }
body.touch button, body.touch .button { min-height: 50px; padding: 0 22px; border-radius: 0; background: var(--ink); border-color: var(--ink); }
body.touch button:hover, body.touch .button:hover { background: #000; border-color: #000; }
body.touch button.secondary, body.touch .button.secondary { background: var(--paper); color: var(--ink); border: 1px solid var(--ink); }
body.touch button.secondary:hover, body.touch .button.secondary:hover { background: var(--ground); color: var(--ink); border-color: var(--ink); }
body.touch button.danger, body.touch .button.danger { background: var(--red); border-color: var(--red); color: #fff; }
body.touch button.small, body.touch .button.small { min-height: 42px; padding: 0 16px; font-size: .95rem; }
body.touch button:disabled { background: var(--muted); border-color: var(--muted); }
body.touch .form input, body.touch .form select, body.touch .form textarea { min-height: 50px; padding: 10px 12px; font-size: 1rem; border: 1px solid var(--ink); border-radius: 0; }
body.touch .form input[type=file] { min-height: 0; }
body.touch .form input[readonly], body.touch .form select:disabled { background: var(--ground); border-color: var(--line); color: var(--muted); }
body.touch .form label.button { display: inline-flex; width: auto; margin: 8px 0 0; }
body.touch .form.search label { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
body.touch .form.search { margin: 0 0 14px; }
body.touch .back a { color: var(--navy); }

/* The head on every screen: the seal, the ministry, the service, the double
   rule and the status line. The PIN screen hides it and carries the seal
   itself. */
.app-head { text-align: center; padding: 12px 20px 0; }
.app-head .seal { display: block; width: 44px; height: 44px; margin: 0 auto 6px; }
.app-head .ministry { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--navy); margin: 0; }
.app-head .service { font-size: .95rem; font-style: italic; color: var(--muted); margin: 0 0 10px; }
.rule { height: 6px; border-top: 1px solid var(--red); border-bottom: 3px solid var(--red); }
.statusline { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; width: 100%; max-width: 800px; margin: 0 auto; padding: 7px 20px; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.statusline:empty { display: none; }
.statusline .unsent { color: var(--red); font-weight: 700; }
body.locked .app-head, body.locked .rule, body.locked .statusline { display: none; }

/* The gate: the PIN screen, the seal large above the ministry's name. */
.gate { max-width: 460px; margin: 32px auto 0; text-align: center; }
.gate .seal.big { display: block; width: 128px; height: 128px; margin: 0 auto 14px; }
.gate .kicker { color: var(--navy); letter-spacing: .2em; }
.gate h1 { font-size: 2rem; margin: 2px 0 4px; }
.gate h1::after { content: ""; display: block; width: 72px; height: 5px; margin: 10px auto 0; border-top: 1px solid var(--red); border-bottom: 3px solid var(--red); }
.gate .form { text-align: left; margin-top: 22px; }
.gate .form label { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.gate .form input { font-family: var(--mono); font-size: 1.7rem; letter-spacing: .45em; text-align: center; }
.gate .form button { width: 100%; margin-top: 12px; }
.gate .form .error { text-align: left; }

/* Lists of institutions and people: ruled rows, the state as a word. */
body.touch .listing { margin: 0 0 22px; }
body.touch .listing h1 { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin: 10px 0 4px; }
.choice-list { list-style: none; padding: 0; margin: 0 0 22px; border-top: 2px solid var(--ink); }
.choice-list button { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 12px; text-align: left; border-radius: 0; font-weight: 400; }
.choice-list .sub { display: block; color: var(--muted); font-size: .9rem; }
body.touch .choice-list li { border-bottom: 1px solid var(--line); }
body.touch .choice-list li + li { border-top: 0; }
body.touch .choice-list li.muted { padding: 12px 2px; }
body.touch .choice-list button { min-height: 62px; padding: 10px 2px; font-size: 1.1rem; background: none; border: 0; color: var(--ink); }
body.touch .choice-list button:hover { background: var(--ground); }
body.touch .choice-list .right { text-align: right; flex: none; }
body.touch .pill { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--muted); background: none; border: 0; padding: 0; }
body.touch .pill.seen, body.touch .pill.sent { color: var(--navy); }
body.touch .pill.verified { color: var(--green); }
body.touch .pill.warn { color: var(--gold-deep); }
body.touch .pill.rejected { color: var(--red); }
body.touch .pill.exited, body.touch .pill.superseded { color: var(--muted); text-decoration: line-through; }
.meter { display: inline-block; width: 110px; height: 8px; background: var(--ground-strong); vertical-align: middle; }
.meter .fill { display: block; height: 100%; background: var(--ink); }
.meter-words { display: block; margin-top: 4px; font-size: .84rem; color: var(--muted); }
body.touch .panel { border: 0; border-radius: 0; padding: 0; margin: 0 0 24px; }
body.touch .panel > h2:first-child { margin: 0 0 6px; padding: 0 0 6px; border-bottom: 2px solid var(--ink); font-size: .78rem; }
body.touch .panel table { margin: 0; width: 100%; }
body.touch .panel table th:first-child, body.touch .panel table td:first-child { padding-left: 2px; }
body.touch .panel table th:last-child, body.touch .panel table td:last-child { padding-right: 2px; }
body.touch .panel > p { margin: 0 0 6px; }
body.touch .figures { border: 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); border-radius: 0; background: none; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 16px; }
body.touch .figure { padding: 8px 2px; border-left: 0; }
body.touch .figure .label { font-size: .72rem; letter-spacing: .1em; }
body.touch table { background: none; }
body.touch table.fields { border-top: 2px solid var(--ink); margin: 0 0 18px; }
body.touch table.fields th { width: 11rem; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; padding: 12px 2px 10px; }
body.touch table.fields td { padding: 10px 2px; font-size: 1.05rem; }
body.touch table.fields tr.changed th, body.touch table.fields tr.changed td { background: none; }
body.touch table.fields tr.changed td { color: var(--gold-deep); }
body.touch table.fields .onfile { display: block; font-size: .88rem; color: var(--muted); font-style: italic; }
body.touch tbody tr:hover td { background: none; }
body.touch .empty { border-color: var(--ink); border-radius: 0; }

/* The visit: the person ruled off under the head, the step's place, the
   parts and questions numbered. */
.person-line { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; margin: -18px -20px 16px; padding: 10px 20px; border-bottom: 2px solid var(--ink); }
.person-line .name { font-weight: 700; font-size: 1.15rem; }
.person-line .num { color: var(--muted); font-size: .9rem; }
.person-line .inst { margin-left: auto; font-style: italic; color: var(--muted); font-size: .95rem; }
.progress { margin: 0 0 18px; }
.progress .where { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.steps { display: flex; list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.steps li { flex: 1; display: flex; gap: 6px; justify-content: center; align-items: baseline; padding: 7px 4px; font-size: .8rem; text-align: center; color: var(--muted); }
.steps li .n { font-family: var(--mono); font-size: .76rem; }
.steps li.done { color: var(--navy); }
.steps li.current { color: var(--ink); font-weight: 700; box-shadow: inset 0 -3px var(--navy); }
.group { margin: 0 0 28px; }
.group > h2 { display: flex; gap: 12px; padding: 0 0 6px; margin: 0 0 14px; border-bottom: 2px solid var(--ink); }
.group h3 { font-size: .95rem; font-weight: 700; margin: 14px 0 2px; }
.group table.fields { border-top: 1px solid var(--line); margin: 0 0 6px; }
.gn, .qn { font-family: var(--mono); font-weight: 400; color: var(--muted); }
.qn { display: inline-block; width: 40px; font-size: .82rem; }
.count { font-size: .9rem; font-style: italic; color: var(--muted); margin: 0 0 14px; }
.question { margin: 0 0 18px; }
.question > label { display: block; font-weight: 700; margin: 0 0 4px; }
.question .req { margin-left: 4px; font-weight: 700; color: var(--red); }
.question .hint { color: var(--muted); font-size: .9rem; margin: 0 0 6px; padding-left: 40px; }
.question .error { font-size: .92rem; margin: 6px 0 0; padding-left: 40px; }
.question .onfile { font-size: .9rem; font-style: italic; color: var(--gold-deep); margin: 6px 0 0; padding-left: 40px; }
body.touch .question input, body.touch .question select, body.touch .question textarea, .question .location { margin-left: 40px; width: calc(100% - 40px); }
body.touch .question.changed input, body.touch .question.changed select { border-color: var(--gold-deep); background: var(--gold-tint); }
.question.closed .value { margin: 0 0 0 40px; color: var(--muted); }
.question .to-correct { padding-left: 0; color: var(--gold-deep); }
.doc .to-correct { padding: 10px 12px 0; margin: 0; }

/* Photographs as tiles, two to a row: the picture filling the tile or one
   large target to take it, the document's name and state beneath, the
   tablet's advice inside. */
.docs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 8px; }
.doc { position: relative; display: flex; flex-direction: column; margin: 0; border: 1px solid var(--ink); }
.doc > .qn { position: absolute; top: 8px; left: 10px; z-index: 1; width: auto; padding: 0 6px; background: var(--paper); }
.doc .pic { display: block; aspect-ratio: 4 / 3; margin: 0; overflow: hidden; background: var(--ground); }
.doc .pic img { width: 100%; height: 100%; object-fit: contain; border: 0; border-radius: 0; }
.doc .pic.untaken { display: flex; align-items: center; justify-content: center; padding: 10px; }
.doc .pic.untaken button, .doc .pic.untaken label.button { width: 100%; height: 100%; min-height: 140px; margin: 0; border: 1px dashed var(--ink); background: var(--ground); color: var(--ink); }
.doc .about { flex: 1; padding: 10px 12px; }
.doc .doc-name { display: block; margin: 0; font-weight: 700; line-height: 1.3; }
.doc .about .hint { margin: 2px 0 0; padding: 0; font-size: .86rem; }
.doc .doc-state { display: block; margin-top: 6px; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.doc.taken .doc-state { color: var(--green); }
.doc.blank:not(.optional) .doc-state { color: var(--red); }
.doc .doc-page { border-top: 1px solid var(--line); }
.doc .finding { margin: 0 12px 12px; }
.doc .error { margin: 0; padding: 0 12px 12px; }
.take-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0 12px 12px; }
body.touch .take-actions label.button, body.touch .take-actions button { margin: 0; }
body.touch .evidence { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 10px; }
body.touch .evidence img { aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--ink); border-radius: 0; }
.step-actions { position: fixed; left: 0; right: 0; bottom: 0; background: var(--paper); border-top: 2px solid var(--ink); z-index: 40; }
.step-actions .inner { max-width: 800px; margin: 0 auto; padding: 12px 20px; display: flex; justify-content: space-between; gap: 12px; }
.finish { max-width: 600px; margin: 16px auto; }

/* The camera screen: the live picture filling a box, the frame over it to
   fill (a card, a page, or an oval for the face), and one line of guidance
   at the foot of the box. docs/design.md, section 6. */
.camera { margin: 0 0 16px; }
.camera-view { position: relative; width: 100%; height: min(72vh, 133vw); background: #000; overflow: hidden; }
.camera-view video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.camera-guide { position: absolute; border: 3px solid rgba(255, 255, 255, .92); box-shadow: 0 0 0 9999px rgba(0, 0, 0, .35); pointer-events: none; }
.camera-guide.card { border-radius: 14px; }
.camera-guide.page { border-radius: 6px; }
.camera-guide.face { border-radius: 50%; }
.camera-guidance { position: absolute; left: 12px; right: 12px; bottom: 12px; margin: 0; padding: 8px 12px; background: rgba(0, 0, 0, .6); color: #fff; font-weight: 700; text-align: center; }
.camera-guidance.ok { background: var(--navy); }
.camera-guidance.warn { background: var(--gold); color: var(--ink); }

@media screen and (max-width: 560px) {
  .docs, body.touch .evidence { grid-template-columns: 1fr; }
  .steps li .t { display: none; }
  body.touch .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -- Narrow screens ----------------------------------------------------- */

@media screen and (max-width: 900px) {
  main { padding: 20px 16px 40px; }
  .identity .inner { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 16px; }
  .identity .ministry { text-align: left; }
  .topbar { position: static; }
  .topbar .inner { flex-wrap: wrap; padding: 0 16px 6px; }
  .topbar .who { margin-left: 0; width: 100%; padding: 6px 0; }
  .review { grid-template-columns: 1fr; }
  .review .region-values, .review .region-images, .review .region-findings, .review .region-decision { grid-column: 1; grid-row: auto; }
  .panel table { display: block; overflow-x: auto; }
}

/* -- Print: the dashboard and the weekly report on A4 -------------------- */
/* What only makes sense on a screen carries .screen-only and is left out:
   the navigation, the filters, the buttons, the download links. Colours
   are printed as they are, because a chart without them says nothing. */

@media print {
  @page { size: A4; margin: 14mm 12mm; }
  html, body { background: var(--paper); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { display: block; font-size: 10.5pt; }
  .topbar, .screen-only, .subnav, .filters, .back { display: none !important; }
  main { max-width: none; padding: 16px 0 0; }
  .identity .inner { padding-left: 14px; padding-right: 14px; }
  .footer .inner { padding-left: 0; padding-right: 0; }
  .figures { grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr)); }
  .page-head { break-after: avoid; }
  .panel, .figures, .chart, .headline { break-inside: avoid; }
  .panel { margin-bottom: 12px; }
  h2 { break-after: avoid; }
  a { color: var(--ink); text-decoration: none; }
  tbody tr:hover td { background: none; }
  details:not([open]) { display: none; }
}