/* ScanNLog design tokens, generated from tokens.json. Light is the default; dark applies only where a page opts in with data-theme="dark". */
:root {
  --page: #f3f4f6;
  --surface: #ffffff;
  --surface-sunk: #f9fafb;
  --border: #e5e7eb;
  --border-strong: #6b7280;
  --ink: #111827;
  --body: #4b5563;
  --muted: #6b7280;
  --primary: #1e40af;
  --primary-hover: #1e3a8a;
  --on-primary: #ffffff;
  --link: #2563eb;
  --tint: #eff6ff;
  --accent: #0f766e;
  --success: #15803d;
  --success-bg: #f0fdf4;
  --warning: #b45309;
  --warning-bg: #fffbeb;
  --danger: #b91c1c;
  --danger-bg: #fef2f2;
  --danger-fill: #b91c1c;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --target: 56px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 9999px;
  --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: Sora, Inter, ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

[data-theme="dark"] {
  --page: #111827;
  --surface: #1f2937;
  --surface-sunk: #18212f;
  --border: #374151;
  --border-strong: #9ca3af;
  --ink: #f3f4f6;
  --body: #d1d5db;
  --muted: #9ca3af;
  --primary: #60a5fa;
  --primary-hover: #93c5fd;
  --on-primary: #111827;
  --link: #60a5fa;
  --tint: #1e2a4a;
  --accent: #2dd4bf;
  --success: #4ade80;
  --success-bg: #052e16;
  --warning: #fbbf24;
  --warning-bg: #422006;
  --danger: #f87171;
  --danger-bg: #450a0a;
  --danger-fill: #f87171;
  --shadow-card: none;
}

/* ScanNLog UI — component classes. Plain CSS over the tokens; no JavaScript needed.
   The app copies this file (with tokens.css) into app/static/ and the Jinja templates use the classes. */

body { font-family: var(--font-sans); color: var(--body); background: var(--page); font-size: 16px; line-height: 24px; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
a { color: var(--link); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Logo ---------- */
/* <a class="logo" href="/"><img src="/static/brand/scannlog-logo-color.svg" alt="ScanNLog"></a> — the file, never retyped text. */
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo img { display: block; height: 28px; width: auto; }
.logo-sm img { height: 20px; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 10px 18px; border-radius: var(--radius-md); border: 1px solid transparent;
  font: 600 15px/22px var(--font-sans); text-decoration: none; cursor: pointer; text-align: center; }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { background: var(--tint); }
.btn-danger { background: var(--danger-fill); color: var(--on-primary); }
.btn-link { background: none; border: 0; color: var(--link); padding-inline: 0; text-decoration: underline; }
.btn-block { display: flex; width: 100%; min-height: var(--target); font-size: 18px; line-height: 24px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------- Fields ---------- */
.field { display: grid; gap: var(--space-2); }
.field-label { font: 600 15px/22px var(--font-sans); color: var(--ink); }
.field-help { font-size: 14px; line-height: 20px; color: var(--body); margin: 0; }
.input, .select, .textarea { width: 100%; box-sizing: border-box; min-height: 48px; padding: var(--space-3);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--ink);
  font: 400 16px/24px var(--font-sans); box-shadow: var(--shadow-sm); }
.textarea { min-height: 96px; resize: vertical; }
.field-error { font-size: 14px; line-height: 20px; color: var(--danger); font-weight: 600; margin: 0; }
.field.has-error .input, .field.has-error .textarea, .field.has-error .select { border-color: var(--danger); border-width: 2px; }
.check { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 15px; line-height: 22px; color: var(--ink); }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--primary); flex: none; }

/* ---------- Choice tiles (Completed / Not completed) ---------- */
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); border: 0; padding: 0; margin: 0; }
.choices legend { font: 600 15px/22px var(--font-sans); color: var(--ink); margin-bottom: var(--space-2); padding: 0; }
.choice { position: relative; display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: var(--target); padding: var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface); color: var(--ink); font: 600 16px/22px var(--font-sans); cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice:has(input:checked) { border: 2px solid var(--primary); background: var(--tint); }
.choice:has(input:focus-visible) { outline: 2px solid var(--link); outline-offset: 2px; }
.choice-mark { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-strong); margin-right: var(--space-2); flex: none; box-sizing: border-box; }
.choice:has(input:checked) .choice-mark { border: 6px solid var(--primary); }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px 8px; border-radius: var(--radius-sm);
  font: 600 12px/16px var(--font-sans); white-space: nowrap; border: 1px solid transparent; }
.badge-success { color: var(--success); background: var(--success-bg); }
.badge-warning { color: var(--warning); background: var(--warning-bg); }
.badge-danger { color: var(--danger); background: var(--danger-bg); }
.badge-neutral { color: var(--body); background: var(--surface-sunk); border-color: var(--border); }
.badge-info { color: var(--primary); background: var(--tint); }
.badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---------- Notices ---------- */
.notice { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--surface-sunk); color: var(--ink); font-size: 15px; line-height: 22px; }
.notice strong { font-weight: 700; }
.notice-success { background: var(--success-bg); border-color: var(--success); }
.notice-success strong { color: var(--success); }
.notice-warning { background: var(--warning-bg); border-color: var(--warning); }
.notice-warning strong { color: var(--warning); }
.notice-danger { background: var(--danger-bg); border-color: var(--danger); }
.notice-danger strong { color: var(--danger); }

/* ---------- Cards and tables ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-6); }
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.table th { text-align: left; font-weight: 600; color: var(--ink); background: var(--surface-sunk); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); white-space: nowrap; }
.table td { padding: var(--space-3); border-bottom: 1px solid var(--border); color: var(--body); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table .when { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .who { color: var(--ink); font-weight: 600; }
.meta { font-size: 14px; line-height: 20px; color: var(--muted); }

/* ---------- Worker scan page ---------- */
.scan { max-width: 480px; margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-8); background: var(--surface); min-height: 100%; display: grid; gap: var(--space-6); box-sizing: border-box; }
.scan-head { display: grid; gap: var(--space-1); }
.scan-head .logo img { height: 20px; }
.scan-point { font: 700 24px/32px var(--font-sans); color: var(--ink); margin: 0; text-wrap: balance; }
.scan-reason { font-size: 16px; line-height: 24px; color: var(--body); margin: 0; }
.scan-who { font-size: 14px; line-height: 20px; color: var(--muted); margin: 0; }
.scan-form { display: grid; gap: var(--space-6); }
.photo-btn { display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--target);
  border: 2px dashed var(--border-strong); border-radius: var(--radius-md); color: var(--ink); background: var(--surface-sunk); font: 600 16px/22px var(--font-sans); cursor: pointer; }
.scan-foot { display: grid; gap: var(--space-3); justify-items: center; }
.scan-foot a { font-size: 15px; }

/* ScanNLog — our own layer over the design kit (D-220). Joined after tokens.css and bundle.css by
   scripts/build_css.py. It holds what the kit lacks, written against the kit's tokens only. */

/* ---------- Font ---------- */
/* Inter variable 4.1, the official file, unmodified (D-222). A browser fetches it only for a page
   that uses the family; the worker's pages do not. */
@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/InterVariable.woff2?v=693b77d4f32e") format("woff2"); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
h1, h2, h3 { color: var(--ink); text-wrap: balance; }
h1 { font: 700 24px/32px var(--font-sans); margin: 0; }
h2 { font: 700 18px/26px var(--font-sans); margin: var(--space-8) 0 var(--space-3); }
h3 { font: 600 16px/24px var(--font-sans); margin: var(--space-6) 0 var(--space-2); }
p { margin: 0; }
img { max-width: 100%; }

/* ---------- The languages, in the worker's footer and the public header ---------- */
.lang { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); }
.lang a { color: var(--muted); text-decoration: none; padding: var(--space-2) var(--space-1); font-size: 14px; }
.lang a[aria-current="true"] { color: var(--primary); font-weight: 600; }

/* ---------- Sign in with Google or Microsoft (D-374) ----------
   White, the provider's own mark drawn inline, the provider's own words; 44 px, 56 px on a worker's
   page. The border and text greys are the ones each provider's guidelines give for the light button,
   the only colours here not from a token. "or" sets them apart from the emailed code. */
.provider-or { display: flex; align-items: center; gap: var(--space-3); color: var(--muted); font-size: 14px; margin: var(--space-2) 0; }
.provider-or::before, .provider-or::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.provider-list { display: grid; gap: var(--space-3); }
.btn-provider { display: flex; align-items: center; justify-content: center; gap: var(--space-3); width: 100%; min-height: 44px; padding: 0 var(--space-4); border: 1px solid; border-radius: var(--radius-md); background: #ffffff; font: 600 15px/20px var(--font-sans); text-decoration: none; cursor: pointer; }
.btn-provider:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.provider-logo { flex: none; }
.btn-provider-google { border-color: #747775; color: #1f1f1f; }
.btn-provider-microsoft { border-color: #8c8c8c; color: #5e5e5e; }

/* ---------- The worker's pages, redrawn in round D (D-367) ----------
   The approved look, scoped to body.worker: navy, blue for a good status (no green), amber, red,
   10 and 16 px corners, 56 px targets. The system font at weight 800 for headings, so a worker's
   page never asks for a font file. The design kit's own classes draw with these tokens. */
body.worker {
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --navy: #172554;
  --on-navy: #cbd5e1;
  --on-navy-accent: #93c5fd;
  --page: #f3f4f6;
  --ink: #111827;
  --body: #4b5563;
  --muted: #6b7280;
  --border-strong: #6b7280;
  --primary: #1e40af;
  --primary-hover: #1e3a8a;
  --link: #1e40af;
  --tint: #eff6ff;
  --success: #1e40af;
  --success-bg: #eff6ff;
  --warning: #b45309;
  --warning-bg: #fffbeb;
  --danger: #b91c1c;
  --danger-bg: #fef2f2;
  --danger-fill: #b91c1c;
  --radius-md: 10px;
  --radius-lg: 16px;
  --target: 56px;
  background: var(--page);
  color: var(--body);
}
/* The column: white, edge to edge on a phone; a rounded card with room around it on a wider screen. */
.scan { gap: var(--space-6); padding-top: 0; overflow-wrap: anywhere; }
@media (min-width: 520px) {
  .scan { margin: var(--space-6) auto; min-height: 0; border-radius: var(--radius-lg); box-shadow: 0 1px 3px rgba(17, 24, 39, 0.08); overflow: hidden; }
}
/* The head: navy, the white logo, the account in small capitals, the point in heavy type. */
.scan-head { gap: var(--space-2); margin: 0 calc(-1 * var(--space-4)); padding: 22px var(--space-4); background: var(--navy); color: var(--on-navy); }
.scan-head .logo img { height: 21px; }
.scan-head .logo { margin-bottom: var(--space-2); }
.scan h1 { font: 800 26px/32px var(--font-sans); color: var(--ink); margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
.scan-head h1 { color: #ffffff; }
/* Every line in the navy head reads light: the place, the lead, a page's point name. */
.scan-head p { color: var(--on-navy); }
.scan-head .scan-eyebrow { font: 600 12px/16px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-navy-accent); }
/* The Done panel's time: a line of body text, on one line where it fits. */
.scan-time { font: 400 16px/24px var(--font-sans); color: inherit; font-variant-numeric: tabular-nums; }
.scan-text { display: grid; gap: var(--space-3); color: var(--body); }
.stack { display: grid; gap: var(--space-3); }
/* Fields: 56 px high, 16 px text so a phone never zooms in, a strong border for daylight. */
.scan .input, .scan .textarea { min-height: var(--target); font-size: 16px; border-color: var(--border-strong); }
.scan .textarea { min-height: 96px; }
.scan .field-label { font-size: 16px; }
.scan .btn-block { min-height: 58px; border-radius: 12px; font-weight: 700; }
body.worker .btn-provider { min-height: var(--target); border-radius: 12px; font-size: 16px; }
/* The one-time code: one field, drawn large and spaced so its six digits read as six boxes. */
.scan input[autocomplete="one-time-code"] { font: 700 24px/32px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.4em; text-align: center; }
.scan-remembered { color: var(--muted); }
/* The reasons: real radio buttons drawn as tiles, two to a row where they fit, each a 56 px
   target. The radio stays in the page, focusable and read out; only its circle is hidden. */
.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); gap: var(--space-2); border: 0; padding: 0; margin: 0; }
.options legend { font: 600 16px/22px var(--font-sans); color: var(--ink); padding: 0; margin-bottom: var(--space-2); }
.options .field-error { grid-column: 1 / -1; }
.option { position: relative; display: flex; align-items: center; justify-content: center; min-height: var(--target); padding: var(--space-2) var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-md); color: var(--ink); font-weight: 600; text-align: center; cursor: pointer; }
.option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.option:has(input:checked) { border: 2px solid var(--primary); background: var(--tint); color: var(--primary); font-weight: 700; }
.option:has(input:focus-visible) { outline: 3px solid var(--link); outline-offset: 2px; }
/* The camera control: the label is the target and holds its input, which is hidden from the eye
   only, so the keyboard and a screen reader still reach it and the browser's own file text is
   never shown. The chosen state is shown by CSS alone: a required file input is :valid once a
   photo is picked. */
.scan .photo-btn { position: relative; flex-wrap: wrap; min-height: 64px; padding: var(--space-2) var(--space-3); border-color: var(--border-strong); border-radius: 12px; text-align: center; }
.photo-btn:focus-within { outline: 3px solid var(--link); outline-offset: 2px; }
.file { position: absolute; left: 50%; bottom: 0; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ready { display: none; flex-basis: 100%; color: var(--primary); }
.file:valid ~ .ready { display: block; }
.scan .thumb { display: block; max-width: 160px; border-radius: var(--radius-md); }
.scan-foot .lang { justify-content: center; }
.scan-foot p { font-size: 14px; line-height: 20px; color: var(--muted); text-align: center; }
/* Nothing has a fixed height and nothing is wider than a 320 px phone leaves (288 px). */
.scan-place, .scan-point-name { color: var(--body); }
.scan-as { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 var(--space-3); padding: 2px var(--space-3); background: var(--page); border-radius: var(--radius-md); font-size: 16px; line-height: 22px; }
.scan-as p { padding: var(--space-2) 0; }
.scan-as strong { color: var(--ink); }
.scan-as-link { white-space: nowrap; }
.scan-last { padding: var(--space-3); background: var(--warning-bg); border: 1px solid var(--warning); border-radius: var(--radius-md); font-size: 16px; line-height: 22px; color: var(--ink); overflow-wrap: anywhere; }
.scan-last strong { color: var(--warning); }
.field-optional { font-weight: 400; color: var(--muted); }
.scan-next { font-size: 16px; line-height: 22px; color: var(--body); }
.scan .notice { font-size: 16px; line-height: 22px; }
/* What happened, in a panel: navy once saved, amber one more step or waiting, red not logged, grey
   a code that logs nothing. The status is always a word too. */
.scan-panel { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-6) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); text-align: center; color: var(--ink); }
.scan-panel h1 { color: inherit; }
.scan-panel-neutral { background: var(--page); }
.scan-panel-success { background: var(--navy); border-color: var(--navy); color: #ffffff; }
.scan-panel-success p { color: var(--on-navy); }
.scan-panel-warning { background: var(--warning-bg); border-color: var(--warning); }
.scan-panel-danger { background: var(--danger-bg); border-color: var(--danger); }
.scan-icon { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: #ffffff; color: var(--primary); }
.scan-panel .badge { background: #ffffff; font-size: 14px; line-height: 20px; padding: 2px 10px; }
.scan-rows { display: grid; margin: 0; }
.scan-rows div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.scan-rows dt { color: var(--body); }
.scan-rows dd { margin: 0; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.scan-closed { color: var(--primary); }
.scan-leave { padding: var(--space-3); background: var(--tint); border: 1px solid var(--primary); border-radius: var(--radius-md); color: var(--ink); font-size: 16px; line-height: 22px; }
.scan-end { display: grid; justify-items: center; text-align: center; }
/* Every link on a worker's page is a 56 px target. */
.scan-as-link, .scan-forget, .scan-cancel, .scan-foot a, .scan .btn-link { display: inline-flex; align-items: center; min-height: var(--target); }