/* KolTheia product app -- imports ott-core.css first (see base.html), this
   file only adds what the capture/verify instrument actually needs.
   Restrained, instrument-like (KOLTHEIA_BUILD_PROMPT.md §4/§5): a hairline
   border and one surface step, never a glow or heavy shadow. */

/* An author `display` rule (e.g. .signing-trace { display:flex }) beats the
   browser's built-in [hidden] rule, which left the "Signing capture..."
   overlay covering the camera before anything was captured. */
[hidden] { display: none !important; }

:root {
  /* Identity "A · Sealed lens" (OTT, 2026-09-30; decisions/0022): KolTheia is Veridact 2.0 and
     leaves the shared royal purple. Marker yellow is the brand's voice (what is selected, what to do
     next), signal red is the instant of capture only (shutter, record light, seal). */
  --accent: #FFD21F;
  --accent-on: #0B0B0A;        /* text on a yellow fill: yellow never carries white text */
  --signal: #E0221B;
  --ott-signature: #E0221B;
}
.btn-primary { color: var(--accent-on); }

/* ---- Light and dark (decisions/0023) ------------------------------------------------------
   Dark is ink (#0B0B0A); light is paper (#F6F4EE), the same two grounds as the landing page.
   Yellow is a fill in both, never text on paper: --accent-text is what an accent WORD uses
   (yellow on ink, ink with a yellow underline on paper). */
:root { --bg: #0B0B0A; --surface: #151412; --elevated: #1E1D1A; --border: #2D2B27; --accent-text: #FFD21F;
        --accent-ink: #FFD21F; }   /* links and link-buttons: dark had no value, so they fell back to the retired purple (#B79CFB) */
:root[data-theme="light"] {
  --bg: #F6F4EE; --surface: #FFFFFF; --elevated: #FBFAF6; --sunk: #EEEBE3; --text: #0B0B0A; --muted: #55504A;
  --disabled: #8A8479; --border: #D9D3C6; --accent-text: #0B0B0A; --accent-ink: #0B0B0A; color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #F6F4EE; --surface: #FFFFFF; --elevated: #FBFAF6; --sunk: #EEEBE3; --text: #0B0B0A; --muted: #55504A;
    --disabled: #8A8479; --border: #D9D3C6; --accent-text: #0B0B0A; --accent-ink: #0B0B0A; color-scheme: light;
  }
}
:root[data-theme="dark"] { color-scheme: dark; }
.pill { color: var(--accent-text); }
.verdict-panel a:not(.btn), #result-panel a:not(.btn) { text-decoration-color: var(--accent) !important; text-decoration-thickness: 2px; }
.theme-switch { margin-left: 14px; width: 36px; height: 36px; display: grid; place-items: center; flex: none; border: 1px solid var(--border); border-radius: 3px; background: none; color: var(--muted); cursor: pointer; }
.theme-switch:hover { color: var(--text); border-color: var(--text); }
.theme-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-switch svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.theme-switch .to-dark { display: none; }
:root[data-theme="light"] .theme-switch .to-light { display: none; }
:root[data-theme="light"] .theme-switch .to-dark { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .theme-switch .to-light { display: none; }
  :root:not([data-theme]) .theme-switch .to-dark { display: block; }
}
.topbar nav { margin-left: auto; }
.topbar .wordmark { font-family: var(--font-poster); font-weight: 800; font-size: 22px; letter-spacing: .01em; text-transform: uppercase; }
.topbar .wordmark img { width: 24px; height: 24px; display: block; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---- Top bar: minimal, a wordmark + one live signal, nothing else ---- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.topbar .wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.topbar nav {
  display: flex;
  gap: 18px;
  font-size: 13px;
}
.topbar nav a {
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .topbar { flex-wrap: wrap; row-gap: 6px; padding: 12px 16px; }
  .topbar nav { flex-wrap: wrap; gap: 4px 16px; }
}
.topbar nav a:hover { color: var(--text); }

main { flex: 1; display: flex; flex-direction: column; }

/* ---- Verdict result panel: spatial, not just a badge color ---- */
.verdict-panel {
  max-width: 560px;
  margin: 0 auto;
  padding: 32px 20px;
}
.verdict-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.01em;
  border: 1px solid var(--border);
}
.verdict-badge[data-verdict="VERIFIED_CAPTURE"] { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--border)); background: color-mix(in srgb, var(--ok) 10%, transparent); }
.verdict-badge[data-verdict="TRACKED_EDIT"],
.verdict-badge[data-verdict="ALTERED_TRACED"] { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.verdict-badge[data-verdict="ALTERED"],
.verdict-badge[data-verdict="SIGNATURE_INVALID"] { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--border)); background: color-mix(in srgb, var(--bad) 10%, transparent); }
.verdict-badge[data-verdict="UNVERIFIED"] { color: var(--muted); }
/* Someone else's credentials: informational blue, unless they don't check out. */
.verdict-badge[data-verdict="C2PA_CREDENTIALS"] { color: var(--info); border-color: color-mix(in srgb, var(--info) 40%, var(--border)); background: color-mix(in srgb, var(--info) 10%, transparent); }
.verdict-badge[data-verdict="C2PA_CREDENTIALS"][data-state="invalid"] { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--border)); background: color-mix(in srgb, var(--bad) 10%, transparent); }

.evidence-grid {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.evidence-grid .cell {
  background: var(--surface);
  padding: 14px 16px;
}
.evidence-grid .cell .k {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 4px;
}
.evidence-grid .cell .v {
  font-family: var(--font-mono);
  font-size: 13px;
  word-break: break-all;
}

.confidence-note {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  color: var(--muted);
}

.location-note {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 4px;
}

/* ---- Auth pages ---- */
.auth-panel {
  max-width: 380px;
  margin: 64px auto;
  padding: 0 20px;
}
.auth-panel input[type="email"], .auth-panel input[type="text"], .auth-panel input[type="password"] {
  width: 100%;
  box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  padding: 10px 12px;
  font-size: 14px;
  margin: 10px 0;
}

.auth-lede { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0 0 14px; }
.btn.wide { width: 100%; margin-top: 8px; }
.account-block { margin-top: 28px; }
.account-block h2 { font-size: 1.05rem; margin: 0 0 8px; }
.account-block p { color: var(--muted); font-size: 14px; line-height: 1.6; }
.muted-p { color: var(--muted); }
.gate-banner {
  position: absolute; top: 0; left: 0; right: 0; z-index: 4;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border-bottom: 1px solid var(--accent-border);
  font-size: 13px; line-height: 1.5;
}
.gate-banner strong { color: var(--text); }

.enrol-overlay { position: fixed; inset: 0; z-index: 20; background: var(--bg); overflow-y: auto; }

.camera-problem {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; padding-top: 72px; text-align: center;
  background: var(--bg);
}
.camera-problem > div { max-width: 360px; }
.camera-problem h2 { margin: 0 0 8px; }
.camera-problem p { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0 0 16px; }

.coarse-note { color: var(--warn); }

/* ==========================================================================
   The camera, drawn like the iPhone's (decisions/0011; the structure is from 0007 and 0008).
   A black stage. The picture is shown whole and pinned under the top row. Round zoom buttons
   sit on the picture's lower edge, then a deck: a mode carousel that slides its chosen label to
   the middle, and the shutter row (last capture, shutter, flip). Yellow means "chosen", red
   means only "recording". The one KolTheia mark that stays is the purple seal chip, because it
   is always true: every capture is sealed.
   Controls float on a dark glass (legible over any scene) and move like objects: pressing
   springs, selection slides.
   ========================================================================== */
body.immersive { height: 100dvh; min-height: 0; overflow: hidden; overscroll-behavior: none; background: #000; }
body.immersive .topbar { display: none; }
body.immersive main { flex: 1; min-height: 0; }

.cam {
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --pad: 16px;
  --vf-top: calc(var(--safe-t) + 64px);              /* where an upright picture starts: just under the top row */
  --stack-h: 146px;                                  /* the deck: mode carousel + shutter row, above the safe area */
  --stops-bottom: calc(var(--safe-b) + var(--stack-h) + 10px);   /* the zoom buttons; studio.js sets it to hug the picture's lower edge */
  --yellow: #FFD60A;                                 /* the iPhone's yellow: chosen */
  --rec: #E0221B;                                    /* signal red: recording, and nothing else */
  --tint: rgba(28, 28, 30, 0.55);
  --tint-strong: rgba(28, 28, 30, 0.88);
  --hair: rgba(255, 255, 255, 0.14);
  --ink: #fff;
  --ink-2: rgba(255, 255, 255, 0.7);
  --accent-ink: #FFD21F;                             /* marker yellow, which reads on black as it is */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);         /* exponential ease-out: fast start, long calm settle, no overshoot */
  --glass: blur(20px) saturate(1.4);
  --cam-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  position: relative; flex: 1; min-height: 0; overflow: hidden;
  background: #000; color: var(--ink); font-family: var(--cam-font);
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.cam button, .cam a { -webkit-tap-highlight-color: transparent; font-family: inherit; }
.cam :focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

/* The picture, shown whole so what you see is what is captured. studio.js places it (--pic-*):
   upright phones pin it under the top row, everything else centres it. */
.cam-video {
  position: absolute; left: var(--pic-x, 0px); top: var(--pic-y, 0px); width: var(--pic-w, 100%); height: var(--pic-h, 100%);
  object-fit: contain; background: #000; touch-action: none;
}
.cam[data-facing="user"] .cam-video { transform: scaleX(-1); }   /* a mirror to look into; the capture itself is not mirrored */
.cam-grid {
  position: absolute; pointer-events: none;
  left: var(--pic-x, 0px); top: var(--pic-y, 0px); width: var(--pic-w, 100%); height: var(--pic-h, 100%);
  background:
    linear-gradient(to right, transparent calc(33.333% - 0.5px), rgba(255, 255, 255, 0.26) calc(33.333% - 0.5px), rgba(255, 255, 255, 0.26) calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px)),
    linear-gradient(to right, transparent calc(66.666% - 0.5px), rgba(255, 255, 255, 0.26) calc(66.666% - 0.5px), rgba(255, 255, 255, 0.26) calc(66.666% + 0.5px), transparent calc(66.666% + 0.5px)),
    linear-gradient(to bottom, transparent calc(33.333% - 0.5px), rgba(255, 255, 255, 0.26) calc(33.333% - 0.5px), rgba(255, 255, 255, 0.26) calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px)),
    linear-gradient(to bottom, transparent calc(66.666% - 0.5px), rgba(255, 255, 255, 0.26) calc(66.666% - 0.5px), rgba(255, 255, 255, 0.26) calc(66.666% + 0.5px), transparent calc(66.666% + 0.5px));
}
/* The level, as on the iPhone: a broken line that lies along the real horizon and joins into one yellow line when the phone is level, or
   two crosses (one fixed, one that slides like a bubble) when the phone lies flat. Over the middle of the picture, never part of it. */
.level {
  position: absolute; z-index: 3; pointer-events: none; display: grid; place-items: center;
  left: var(--pic-x, 0px); top: var(--pic-y, 0px); width: var(--pic-w, 100%); height: var(--pic-h, 100%);
  --lvl-ink: rgba(255, 255, 255, 0.88);
}
.level[hidden], .lvl-horizon[hidden], .lvl-flat[hidden] { display: none; }
.lvl-horizon {
  display: flex; align-items: center; gap: 14px; filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.55));
  transform: rotate(calc(var(--lvl-tilt, 0) * 1deg)); transition: gap 160ms var(--ease-out);
}
.lvl-horizon i { display: block; height: 2px; border-radius: 1px; background: var(--lvl-ink); transition: background 160ms ease; }
.lvl-horizon i:nth-child(1), .lvl-horizon i:nth-child(3) { width: 34px; }
.lvl-horizon i:nth-child(2) { width: 26px; }
.lvl-horizon[data-level="1"] { gap: 0; }
.lvl-horizon[data-level="1"] i { background: var(--yellow); }
.lvl-flat { position: relative; width: 0; height: 0; filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.55)); }
.lvl-flat b { position: absolute; left: -12px; top: -12px; width: 24px; height: 24px; }
.lvl-flat b::before, .lvl-flat b::after { content: ""; position: absolute; border-radius: 1px; background: var(--lvl-ink); transition: background 160ms ease; }
.lvl-flat b::before { left: 11px; top: 0; width: 2px; height: 24px; }
.lvl-flat b::after { left: 0; top: 11px; width: 24px; height: 2px; }
.lvl-bubble { transform: translate(calc(var(--lvl-x, 0) * 64px), calc(var(--lvl-y, 0) * 64px)); }
.lvl-flat[data-level="1"] b::before, .lvl-flat[data-level="1"] b::after { background: var(--yellow); }

/* Things worth saying about the shot, under the top row: it is dark, or the level needs the phone's permission. */
.hints {
  position: absolute; z-index: 5; left: 50%; transform: translateX(-50%); top: calc(var(--safe-t) + var(--pad) + 44px + 46px);
  display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: calc(100% - 32px); pointer-events: none;
}
.dark-chip {
  display: inline-flex; align-items: flex-start; gap: 8px; padding: 8px 13px 8px 10px; border-radius: 14px; background: var(--tint-strong);
  border: 1px solid var(--hair); font: 500 12.5px/1.4 var(--cam-font); color: var(--ink-2); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass);
}
.dark-chip[hidden], .level-ask[hidden] { display: none; }
.dark-chip .ic { flex: none; width: 17px; height: 17px; margin-top: 1px; color: var(--yellow); }
.dark-chip strong { color: var(--yellow); font-weight: 600; }
.level-ask {
  pointer-events: auto; cursor: pointer; min-height: 44px; padding: 0 16px; border: 1px solid var(--hair); border-radius: 999px; color: var(--yellow);   /* a finger's size, like the round buttons */
  background: var(--tint-strong); font: 600 12.5px var(--cam-font);
}
.cam .flash-overlay { position: absolute; inset: 0; z-index: 6; background: #fff; opacity: 0; pointer-events: none; transition: opacity 40ms linear; }
.cam .flash-overlay.on { opacity: 1; }
.cam-scrim { position: absolute; left: 0; right: 0; z-index: 3; pointer-events: none; }
.cam-scrim-top { top: 0; height: calc(var(--safe-t) + 110px); background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent); }
.cam-scrim-bottom { bottom: 0; height: calc(var(--safe-b) + var(--stack-h) + 70px); background: linear-gradient(to top, rgba(0, 0, 0, 0.62), transparent); }

/* Icons and round buttons */
.ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cam-btn {
  width: 44px; height: 44px; padding: 0; display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 50%; color: var(--ink); text-decoration: none;
  background: var(--tint); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass);
  transition: transform 220ms var(--ease-out), background 160ms ease, color 160ms ease;
}
.cam-btn:active { transform: scale(0.88); transition-duration: 60ms; }
.cam-btn[aria-pressed="true"], .cam-btn[aria-expanded="true"] { color: var(--yellow); }
.cam-btn:disabled { opacity: 0.4; cursor: default; }

/* Top: close, the seal mark and the clock, flash and settings */
.cam-top {
  position: absolute; z-index: 7; top: 0; left: 0; right: 0; pointer-events: none;   /* above the camera-problem panel: there must always be a way out */
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  padding: calc(var(--safe-t) + var(--pad)) calc(var(--safe-r) + var(--pad)) 0 calc(var(--safe-l) + var(--pad));
}
.cam-top > * { pointer-events: auto; }
.cam-top-right { display: flex; gap: 8px; min-width: 44px; justify-content: flex-end; }
.cam-center { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 7px; pointer-events: none; }
.seal-chip {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 9px; cursor: pointer;
  border: 1px solid var(--hair); border-radius: 999px; color: var(--ink);
  background: var(--tint); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass);
  font: 600 10px var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
  transition: transform 220ms var(--ease-out);
}
.seal-chip:active { transform: scale(0.94); }
.seal-chip .ic { width: 15px; height: 15px; color: var(--accent-ink); stroke-width: 1.8; }
.hud-line { font: 500 10px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7); white-space: nowrap; }
.hud-line b { font-weight: 500; color: var(--ink); }
.hud-line i { font-style: normal; opacity: 0.45; margin: 0 5px; }
.hud-line .warn { color: var(--yellow); }

/* Recording: a red pill with the clock, and a little level meter that moves with the sound, so it is plain
   that sound is being recorded. A struck-through microphone in its place says it is not. */
.cam-status {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 8px; pointer-events: none;
  background: var(--rec); color: #fff; font: 600 15px var(--cam-font); font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
}
.cam-status .rec-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: rec-blink 1.2s ease-in-out infinite; }
@keyframes rec-blink { 50% { opacity: 0.35; } }
.cam-status .rec-limit { font-weight: 500; font-size: 12px; opacity: 0.78; }
.vu { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; margin-left: 2px; }
.vu i { width: 3px; height: 100%; border-radius: 2px; background: #fff; transform-origin: 50% 100%; transform: scaleY(calc(0.18 + var(--level, 0) * var(--k, 1))); transition: transform 90ms linear; }
.vu i:nth-child(1) { --k: 0.7; }
.vu i:nth-child(2) { --k: 1; }
.vu i:nth-child(3) { --k: 0.6; }
.cam-status .rec-nomic { width: 16px; height: 16px; color: #fff; }

.location-chip { display: none; }   /* shown in the HUD readout instead; kept in the page for screen readers */
.cam.recording .seal-chip { display: none; }

/* Video only: size, frame rate and microphone, as the iPhone's HD / 30 pair. Under the top row, at the right. */
.fmt-row {
  position: absolute; z-index: 5; right: calc(var(--safe-r) + var(--pad)); top: calc(var(--safe-t) + var(--pad) + 44px + 10px);
  display: flex; align-items: center; gap: 6px;
}
.fmt-pill {
  height: 28px; min-width: 38px; padding: 0 9px; border: 0; border-radius: 8px; cursor: pointer; display: inline-grid; place-items: center;
  background: var(--tint); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass);
  color: var(--ink); font: 600 13px var(--cam-font); letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
  transition: transform 220ms var(--ease-out), color 160ms ease, opacity 160ms ease;
}
.fmt-pill:active { transform: scale(0.92); transition-duration: 60ms; }
.fmt-pill:disabled { opacity: 0.45; cursor: default; }
.fmt-pill[data-alert="1"] { color: var(--yellow); }
.fmt-mic .ic { width: 16px; height: 16px; }
.fmt-mic[data-state="muted"], .fmt-mic[data-state="blocked"], .fmt-mic[data-state="none"] { color: var(--yellow); }

/* Bottom: the zoom buttons. Round, the chosen one bigger with a yellow number, on a faint capsule. Lenses and zoom
   share the row. studio.js sets --stops-bottom so the row rests on the picture's lower edge. */
.stops {
  position: absolute; z-index: 5; left: 50%; transform: translateX(-50%); bottom: var(--stops-bottom);
  display: inline-flex; align-items: center; gap: 3px; padding: 4px; max-width: calc(100% - 20px); border-radius: 999px;
  background: rgba(0, 0, 0, 0.3); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass);
}
.stop {
  flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(60, 60, 64, 0.55); color: #fff; font: 600 12px var(--cam-font); letter-spacing: 0; white-space: nowrap;
  transition: color 160ms ease, background 160ms ease, transform 220ms var(--ease-out);   /* the buttons are redrawn on every change (studio.js drawStops), so a size transition never ran */
}
.stop.on { width: 40px; height: 40px; color: var(--yellow); font-size: 13px; background: rgba(28, 28, 30, 0.8); }
.stop:active { transform: scale(0.9); transition-duration: 60ms; }
.stop:disabled { opacity: 0.45; cursor: default; }
.zoom-readout {
  position: absolute; z-index: 5; left: 50%; transform: translateX(-50%); bottom: calc(var(--stops-bottom) + 60px);
  min-width: 46px; height: 46px; padding: 0 13px; border-radius: 23px; display: grid; place-items: center;
  background: var(--tint-strong); color: var(--yellow); font: 600 15px var(--cam-font); pointer-events: none;
}
/* The dial that appears when a zoom button is held: a ruler that slides under a yellow mark. */
.zoom-dial {
  position: absolute; z-index: 6; left: 50%; transform: translateX(-50%); bottom: calc(var(--stops-bottom) + 2px);
  width: min(340px, calc(100% - 20px)); height: 62px; border-radius: 31px; overflow: hidden; touch-action: none;
  background: rgba(20, 20, 22, 0.86); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  animation: dial-in 220ms var(--ease-out);
}
@keyframes dial-in { from { opacity: 0; transform: translateX(-50%) scale(0.92); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
.dial-ticks { position: absolute; left: 50%; top: 0; width: 0; height: 100%; }
.dial-ticks i { position: absolute; bottom: 13px; width: 1.5px; height: 9px; margin-left: -0.75px; background: rgba(255, 255, 255, 0.5); }
.dial-ticks i.major { height: 15px; background: rgba(255, 255, 255, 0.9); }
.dial-ticks b { position: absolute; top: 9px; transform: translateX(-50%); font: 600 11px var(--cam-font); color: rgba(255, 255, 255, 0.85); }
.dial-mark { position: absolute; left: 50%; bottom: 8px; width: 2px; height: 26px; margin-left: -1px; border-radius: 1px; background: var(--yellow); }

/* The deck. The mode carousel: labels in a row, the chosen one slid to the middle and lit. */
.cam-bottom {
  position: absolute; z-index: 5; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 0 var(--pad) calc(var(--safe-b) + 18px);
}
.modes {
  position: relative; width: 100%; max-width: 440px; height: 34px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}
.modes-track {
  position: absolute; left: 0; top: 0; height: 100%; display: flex; align-items: center; gap: 22px; white-space: nowrap;
  transform: translateX(var(--shift, 0px)); transition: transform 340ms var(--ease-out);
}
.modes-track button {
  padding: 8px 4px; border: 0; background: none; cursor: pointer; color: rgba(255, 255, 255, 0.78);
  font: 600 13px var(--cam-font); letter-spacing: 0.06em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
  transition: color 200ms ease, transform 220ms var(--ease-out);
}
.modes-track button:active { transform: scale(0.94); }
.modes-track button[aria-selected="true"] { color: var(--yellow); }
.modes-track button:disabled { opacity: 0.45; cursor: default; }
.cam-shutter-row { width: 100%; max-width: 440px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.cam-shutter-row > :first-child { justify-self: start; margin-left: 22px; }
.cam-shutter-row > :last-child { justify-self: end; margin-right: 22px; }
.cam-side { width: 48px; height: 48px; }
#camera-toggle .ic { transition: transform 480ms var(--ease-out); }
#camera-toggle.flipped .ic { transform: rotate(180deg); }
/* The last capture, as the iPhone shows its last photo. KolTheia keeps no media, so this is the hash art of the file's
   fingerprint: the same picture My Captures and the certificate draw. Nothing but the hash is remembered on this device. */
.cam-thumb {
  position: relative; width: 48px; height: 48px; border-radius: 11px; overflow: hidden; display: grid; place-items: center; color: #fff; text-decoration: none;
  border: 1.5px solid rgba(255, 255, 255, 0.7); background: var(--tint); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass);
  transition: transform 220ms var(--ease-out);
}
.cam-thumb:active { transform: scale(0.9); transition-duration: 60ms; }
.thumb-art { position: absolute; inset: 0; display: block; }
.thumb-art svg { width: 100%; height: 100%; display: block; }
.cam-thumb .thumb-ic { width: 22px; height: 22px; }
.cam-thumb.has-art .thumb-ic { display: none; }

/* The shutter: a white ring around a disc. Red disc for video; while recording, a red square inside the ring, which
   fills with red toward the length limit. It springs when pressed. */
.shutter { position: relative; width: 78px; height: 78px; padding: 0; border: 0; background: none; cursor: pointer; }
.shutter-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: #fff; stroke-width: 3.2; transition: stroke 200ms ease; }
.ring-fg { fill: none; stroke: var(--rec); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 238.76; stroke-dashoffset: 238.76; opacity: 0; transition: stroke-dashoffset 260ms linear; }
.shutter-core { position: absolute; inset: 7px; border-radius: 50%; background: #fff; transition: inset 260ms var(--ease-out), border-radius 260ms var(--ease-out), background 200ms ease, transform 200ms var(--ease-out); }
.shutter:active .shutter-core { transform: scale(0.88); transition-duration: 60ms; }
.cam[data-mode="video"] .shutter-core { background: var(--rec); }
.cam.recording .shutter-core { inset: 25px; border-radius: 8px; background: var(--rec); }
.cam.recording .ring-bg { stroke: rgba(255, 255, 255, 0.3); }
.cam.recording .ring-fg { opacity: 1; }
.shutter.counting .shutter-core { background: var(--yellow); }
.shutter:disabled { opacity: 0.5; cursor: default; }

/* Over the picture: a yellow focus square with four ticks, and the sun that is dragged up or down to change the
   exposure, as on the iPhone. */
.focus-ring {
  position: absolute; z-index: 4; width: 76px; height: 76px; margin: -38px 0 0 -38px; pointer-events: none; opacity: 0;
  border: 1.5px solid var(--yellow); animation: focus-pop 3000ms var(--ease-out) forwards;
}
.focus-ring i { position: absolute; background: var(--yellow); }
.focus-ring i:nth-child(1) { left: 50%; top: 0; width: 1.5px; height: 7px; margin-left: -0.75px; }
.focus-ring i:nth-child(2) { left: 50%; bottom: 0; width: 1.5px; height: 7px; margin-left: -0.75px; }
.focus-ring i:nth-child(3) { top: 50%; left: 0; width: 7px; height: 1.5px; margin-top: -0.75px; }
.focus-ring i:nth-child(4) { top: 50%; right: 0; width: 7px; height: 1.5px; margin-top: -0.75px; }
@keyframes focus-pop { 0% { transform: scale(1.4); opacity: 0; } 8% { transform: scale(1); opacity: 1; } 78% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.ev-slider { position: absolute; z-index: 4; width: 44px; height: 150px; touch-action: none; cursor: ns-resize; color: var(--yellow); }
.ev-line { position: absolute; left: 50%; top: 4px; bottom: 4px; width: 1.5px; margin-left: -0.75px; border-radius: 1px; background: rgba(255, 214, 10, 0.55); }
.ev-sun { position: absolute; left: 50%; top: 0; width: 26px; height: 26px; margin-left: -13px; display: grid; place-items: center; transform: translateY(var(--sun-y, 62px)); }
.ev-sun .ic { width: 26px; height: 26px; stroke-width: 1.5; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6)); }
.countdown {
  position: absolute; inset: 0; z-index: 7; pointer-events: none; display: flex; align-items: center; justify-content: center;
  font: 700 132px var(--cam-font); color: #fff; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.7); animation: countdown-pop 1000ms var(--ease-out) infinite;
}
@keyframes countdown-pop { 0% { transform: scale(0.7); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.cam-note {
  position: absolute; z-index: 7; left: 50%; transform: translateX(-50%); bottom: calc(var(--stops-bottom) + 64px);
  max-width: calc(100% - 32px); padding: 9px 15px; border-radius: 14px; text-align: center; background: var(--tint-strong);
  border: 1px solid var(--hair); font: 600 12.5px var(--cam-font); line-height: 1.4;
}
.cam .gate-banner { top: calc(var(--safe-t) + 74px); left: 12px; right: 12px; z-index: 8; border: 1px solid var(--accent-border); border-radius: 14px; }
.cam .camera-problem { z-index: 6; padding-top: calc(var(--safe-t) + 72px); }

/* The settings tray */
.tray-backdrop { position: absolute; inset: 0; z-index: 8; background: rgba(0, 0, 0, 0.5); }
.tray {
  position: absolute; z-index: 9; left: 0; right: 0; bottom: 0; max-width: 560px; margin: 0 auto; max-height: 82%;
  display: flex; flex-direction: column; padding-bottom: var(--safe-b);
  background: rgba(17, 17, 21, 0.94); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid var(--border); border-bottom: 0; border-radius: 22px 22px 0 0; color: var(--text);
  animation: tray-up 360ms var(--ease-out);
}
@keyframes tray-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.tray-handle { height: 28px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; flex: none; }
.tray-handle span { width: 38px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.22); }
.tray-body { overflow-y: auto; padding: 0 20px 20px; -webkit-overflow-scrolling: touch; }
.tray .row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--border); }
.tray .row.col { flex-direction: column; align-items: stretch; gap: 11px; }
.tray .row-h { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tray .row.col .row-h { flex-direction: row; justify-content: space-between; align-items: baseline; }
.tray .row-t { font: 600 14px var(--font-text); }
.tray .row-s { font-size: 12px; line-height: 1.4; color: var(--muted); }
.tray .row-v { font: 500 12.5px var(--font-mono); color: var(--muted); }
.seg { display: inline-flex; flex: none; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: rgba(0, 0, 0, 0.35); }
.seg button, .chips button { border: 0; background: none; cursor: pointer; color: var(--muted); font: 600 12.5px var(--font-text); padding: 7px 14px; border-radius: 999px; white-space: nowrap; transition: background 180ms ease, color 180ms ease, transform 220ms var(--ease-out); }
.seg button:active, .chips button:active { transform: scale(0.94); }
.seg button small { display: block; font: 500 10.5px var(--font-mono); opacity: 0.75; }
.seg button[aria-pressed="true"], .chips button[aria-pressed="true"] { background: var(--accent); color: var(--accent-on); }
.cam .seg button[aria-pressed="true"], .cam .chips button[aria-pressed="true"] { background: var(--yellow); color: #000; }
.cam .chips button[aria-pressed="true"] { border-color: var(--yellow); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { border: 1px solid var(--border); }
.chips button[aria-pressed="true"] { border-color: var(--accent); }
.switch { position: relative; flex: none; width: 50px; height: 30px; padding: 0; cursor: pointer; border: 1px solid var(--border); border-radius: 999px; background: rgba(0, 0, 0, 0.35); transition: background 200ms ease, border-color 200ms ease; }
.switch span { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--muted); transition: transform 300ms var(--ease-out), background 200ms ease; }
.switch[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.switch[aria-checked="true"] span { transform: translateX(20px); background: #fff; }
.cam .switch[aria-checked="true"] { background: var(--yellow); border-color: var(--yellow); }
.cam .switch[aria-checked="true"] span { background: #000; }
.cam .slider { accent-color: var(--yellow); }
.slider { width: 100%; margin: 0; accent-color: var(--accent); }
.tray .about summary { cursor: pointer; padding: 15px 0; color: var(--muted); font-size: 13px; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 12px; font-size: 12.5px; }
.facts dt { color: var(--muted); }
.trace { margin: 0 0 12px; max-height: 170px; overflow: auto; white-space: pre-wrap; word-break: break-word; font: 11px/1.45 var(--font-mono); color: var(--muted); }
.facts dd { margin: 0; font-family: var(--font-mono); word-break: break-word; }
.about-note { margin: 0 0 4px; color: var(--muted); font-size: 12.5px; line-height: 1.6; }
.about-note strong { color: var(--text); }

/* Sealing: a screen of its own. The seal draws itself, and the clock keeps counting until the file is back. */
.cam .signing-trace {
  position: absolute; inset: 0; z-index: 14; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(120% 70% at 50% 28%, rgba(255, 210, 31, 0.12), rgba(0, 0, 0, 0.96) 62%), #000;
  animation: seal-in 300ms ease both;
}
@keyframes seal-in { from { opacity: 0; } to { opacity: 1; } }
.seal-stage { width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.seal-mark { width: 84px; height: 84px; margin-bottom: 14px; overflow: visible; }
.seal-outline { fill: rgba(224, 34, 27, 0.12); stroke: var(--accent-ink); stroke-width: 3; stroke-linejoin: round; stroke-dasharray: 330; stroke-dashoffset: 330; animation: seal-draw 2.6s ease-in-out infinite; }
.seal-tick { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 80; stroke-dashoffset: 80; animation: seal-tick 2.6s ease-in-out infinite; }
@keyframes seal-draw { 0% { stroke-dashoffset: 330; } 55%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -330; } }
@keyframes seal-tick { 0%, 45% { stroke-dashoffset: 80; } 65%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 80; } }
.seal-clock { font: 600 46px var(--font-mono); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: #fff; line-height: 1.1; }
.seal-phase { margin-top: 6px; min-height: 1.4em; font: 500 14px var(--font-text); color: var(--muted); }
.cam .signing-trace .trace-line { width: 200px; height: 1px; margin: 16px 0 18px; background: var(--border); position: relative; overflow: hidden; }
.cam .signing-trace .trace-line::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--accent-ink); animation: trace-sweep 1100ms var(--ease) infinite; }
@keyframes trace-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }
.seal-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; width: 100%; text-align: left; font-family: var(--font-text); font-size: 13.5px; }
.seal-steps li { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 12px; color: var(--disabled); transition: color 200ms ease; }
.seal-steps .dot { position: relative; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--disabled); box-sizing: border-box; transition: background 250ms ease, border-color 250ms ease; }
.seal-steps li.done { color: var(--muted); }
.seal-steps li.done .dot { background: var(--ok); border-color: var(--ok); }
.seal-steps li.done .dot::after { content: ""; position: absolute; left: 4px; top: 1.5px; width: 4px; height: 8px; border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: rotate(40deg); }
.seal-steps li.active { color: var(--text); font-weight: 600; }
.seal-steps li.active .dot { border-color: var(--accent-ink) transparent var(--accent-ink) var(--accent-ink); animation: spin 800ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.seal-steps .n { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
.seal-stop { margin-top: 20px; }
.seal-reassure { margin: 22px 0 0; max-width: 280px; font-size: 12px; line-height: 1.55; color: var(--disabled); }

/* Review before anything is signed or sent */
.review { position: absolute; inset: 0; z-index: 12; display: flex; flex-direction: column; background: #000; animation: sheet-in 320ms var(--ease-out) both; }
@keyframes sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
/* minmax(0,1fr) makes the one grid cell a definite size, so max-height:100% on the picture
   really is the cell (an auto track let a tall phone video spill over the panel below). */
.review-media { flex: 1; min-height: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; overflow: hidden; padding: calc(var(--safe-t) + 14px) 12px 12px; }
.review-media img, .review-media video { max-width: 100%; max-height: 100%; min-height: 0; object-fit: contain; border-radius: 10px; }
.review-media { position: relative; }
/* A video is played WITH its sound: this button mutes it, and says so plainly when there is none to hear. */
.review-sound {
  position: absolute; z-index: 2; right: 22px; bottom: 22px; height: 40px; min-width: 40px; padding: 0 12px; display: inline-flex; align-items: center; gap: 7px;
  border: 0; border-radius: 20px; cursor: pointer; color: #fff; font: 600 12.5px var(--cam-font, var(--font-text));
  background: rgba(28, 28, 30, 0.78); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.review-sound .ic { width: 20px; height: 20px; }
.review-sound[data-state="none"], .review-sound[data-state="muted"] { color: #FFD60A; }
.review-panel {
  display: flex; flex-direction: column; gap: 10px; padding: 16px 18px calc(var(--safe-b) + 16px);
  background: rgba(17, 17, 21, 0.96); border-top: 1px solid var(--border); border-radius: 22px 22px 0 0; color: var(--text);
}
.review-panel > * { width: 100%; max-width: 520px; margin-left: auto; margin-right: auto; }
.review-note { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.review-label { font: 600 12.5px var(--font-text); }
.review-label span { color: var(--muted); font-weight: 500; }
#review-label { box-sizing: border-box; width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: rgba(0, 0, 0, 0.4); color: var(--text); font: 500 14px var(--font-text); user-select: text; -webkit-user-select: text; }
#review-label:focus { outline: none; border-color: var(--accent); }
.review-actions { display: flex; gap: 10px; }
.review-actions .btn { flex: 1; }
/* The one choice in a continuous recording (decisions/0047): Keep or Discard, shown once, after Stop. */
.review-keep-discard-line { margin: 4px 0 10px; font: 600 14px var(--font-text); color: var(--text); }
/* One recording, played as one video from the phone's own pieces (static/timeline.js). Two players are stacked:
   the one on top is the one you see, and the next piece waits loaded underneath it, so the hand-over never shows
   a blank picture. One bar for the whole recording. */
.tl { width: 100%; height: 100%; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; }
.tl-stage { position: relative; min-height: 0; cursor: pointer; }
.tl-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 10px; z-index: 1; }
.tl-v.is-on { z-index: 2; }
.tl-bar { display: flex; align-items: center; gap: 10px; padding: 0 2px; }
.tl-play {
  flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: rgba(28, 28, 30, 0.78); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.tl-play::before { content: ""; margin-left: 3px; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #fff; }
.tl-play[data-state="playing"]::before { width: 12px; height: 14px; margin-left: 0; box-sizing: border-box; border-width: 0 4px; border-color: #fff; }
.tl-seek { flex: 1; min-width: 0; height: 28px; margin: 0; accent-color: var(--yellow); background: transparent; cursor: pointer; }
.tl-time { flex: none; font: 500 12px var(--font-mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.review-sound.tl-sound { position: static; flex: none; }

/* Discard asks first: a sheet over the screen, the same dark panel as Keep/Discard itself. */
.confirm-sheet {
  position: absolute; inset: 0; z-index: 20; display: grid; place-items: end center;
  padding: 16px 12px calc(var(--safe-b) + 16px); background: rgba(0, 0, 0, 0.62); animation: seal-in 200ms ease both;
}
.confirm-card {
  box-sizing: border-box; width: 100%; max-width: 440px; padding: 20px 18px 16px; border-radius: 22px;
  background: rgba(17, 17, 21, 0.98); border: 1px solid var(--border); color: var(--text);
}
.confirm-card h2 { margin: 0 0 8px; font: 700 18px var(--font-text); }
.confirm-card p { margin: 0 0 18px; color: var(--muted); font-size: 14px; line-height: 1.55; }
/* The error red already used for a broken signature (verdict badges), never the shutter's signal red. */
.btn-discard {
  color: #FF8A80; border: 1px solid color-mix(in srgb, var(--bad) 55%, var(--border));
  background: color-mix(in srgb, var(--bad) 14%, transparent);
}
.btn-discard:active { transform: translateY(1px); }

/* After Keep, if it can't finish: the seal stops drawing itself, the reason is readable, and two choices appear. */
.seal-retry { width: 100%; margin-top: 20px; }
.cam .signing-trace.is-stuck .seal-outline { animation: none; stroke-dashoffset: 0; }
.cam .signing-trace.is-stuck .seal-tick { animation: none; stroke-dashoffset: 80; }
.cam .signing-trace.is-stuck .trace-line::after { animation: none; display: none; }
.cam .signing-trace.is-stuck .seal-phase { color: var(--text); line-height: 1.5; }
.btn-seal { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-seal .ic { width: 18px; height: 18px; }

/* The result: the seal lands. */
.verdict-panel .verdict-badge[data-verdict="VERIFIED_CAPTURE"] { animation: seal-pop 560ms var(--ease-out) both; }
@keyframes seal-pop { 0% { transform: scale(0.6); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }

/* Landscape phone: the shutter column moves to the right edge, as on a real camera. */
@media (orientation: landscape) and (max-height: 540px) {
  .cam { --stack-w: 136px; }
  .cam-top { right: calc(var(--stack-w) + var(--safe-r)); padding-right: var(--pad); }
  .cam-bottom { top: 0; left: auto; width: calc(var(--stack-w) + var(--safe-r)); justify-content: center; gap: 12px; padding: var(--safe-t) calc(var(--safe-r) + 8px) var(--safe-b) 8px; }
  .modes { height: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .modes-track { position: static; flex-direction: row; justify-content: center; gap: 14px; transform: none !important; }
  .modes-track button { font-size: 11px; letter-spacing: 0.1em; }
  .cam-shutter-row { grid-template-columns: 1fr; justify-items: center; gap: 12px; width: auto; }
  .cam-shutter-row > :first-child, .cam-shutter-row > :last-child { justify-self: center; margin: 0; }
  .stops, .zoom-readout, .zoom-dial, .cam-note, .hints { left: calc((100% - var(--stack-w)) / 2); }
  .stops { bottom: calc(var(--safe-b) + 14px); }
  .zoom-readout { bottom: calc(var(--safe-b) + 72px); }
  .zoom-dial { bottom: calc(var(--safe-b) + 14px); }
  .cam-note { bottom: calc(var(--safe-b) + 108px); }
  .fmt-row { right: calc(var(--stack-w) + var(--safe-r) + var(--pad)); }
  .review { flex-direction: row; }
  .review-panel { width: 320px; flex: none; justify-content: center; border-top: 0; border-left: 1px solid var(--border); border-radius: 0; padding-top: 16px; }
  .review-media { padding: 12px; }
  .seal-mark { width: 60px; height: 60px; margin-bottom: 8px; }
  .seal-clock { font-size: 34px; }
  .seal-reassure { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .focus-ring, .tray, .review, .cam .signing-trace, .countdown, .seal-outline, .seal-tick, .zoom-dial, .cam-status .rec-dot { animation-duration: 1ms; animation-iteration-count: 1; }
  .shutter-core, .ring-fg, .switch span, .cam-btn, .modes-track, .stop, #camera-toggle .ic,
  .lvl-horizon, .lvl-horizon i, .lvl-flat b::before, .lvl-flat b::after { transition-duration: 1ms; }
}



/* ==========================================================================
   Wider panels, callouts, lists
   ========================================================================== */
.wide-panel { max-width: 760px; }
.evidence-grid .cell.wide { grid-column: 1 / -1; }
.section-h { font-size: 1.05rem; margin: 30px 0 4px; }
.code-title { font-size: 22px; margin: 14px 0 6px; letter-spacing: 0.01em; }
.inline-input {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--text); padding: 10px 12px; font-size: 14px; width: min(260px, 100%); margin-right: 8px;
}
.verdict-badge[data-verdict="CODE_ON_FILE"] { color: var(--info); border-color: color-mix(in srgb, var(--info) 40%, var(--border)); background: color-mix(in srgb, var(--info) 10%, transparent); }
.callout {
  margin: 18px 0; padding: 14px 16px; border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--border));
  background: color-mix(in srgb, var(--warn) 7%, transparent);
  font-size: 13.5px; line-height: 1.6; color: var(--muted);
}
.callout strong { color: var(--text); }
.fail-note { color: var(--bad); margin: 14px 0; }

/* ---- My Captures ---- */
.captures { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.capture-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  transition: border-color var(--dur-state) var(--ease);
}
.capture-row:hover { border-color: var(--accent-border, var(--accent)); }
.capture-top { display: flex; align-items: center; gap: 10px; }
.capture-code { font-size: 15px; font-weight: 600; letter-spacing: 0.02em; }
.capture-meta { margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.capture-actions { display: flex; gap: 8px; }
.chip {
  font: 600 10.5px var(--font-display); text-transform: uppercase; letter-spacing: 0.08em;
  padding: 3px 8px; border-radius: var(--r-pill); border: 1px solid var(--border); color: var(--muted);
}
.chip.video { color: var(--info); border-color: color-mix(in srgb, var(--info) 40%, var(--border)); }
.chip.photo { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--border)); }
.empty-state { margin-top: 24px; padding: 32px 20px; text-align: center; border: 1px dashed var(--border); border-radius: var(--r-md); color: var(--muted); }
.empty-state p { margin: 0 0 14px; }

/* ---- Sealing progress ---- */

/* ---- After sealing: save your file and code ---- */
#result-panel { padding-bottom: 60px; }
.sealed-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sealed-meta { color: var(--muted); font-size: 13px; }
.preview-wrap { margin: 18px 0 0; border-radius: var(--r-md); overflow: hidden; background: #000; border: 1px solid var(--border); }
.sealed-preview { display: block; width: 100%; max-height: 46vh; object-fit: contain; background: #000; }
.save-card {
  margin-top: 18px; padding: 20px; border-radius: var(--r-lg);
  border: 1px solid var(--accent-border, var(--accent));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}
.save-card h2 { margin: 0 0 8px; font-size: 1.15rem; }
.save-card p { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0 0 14px; }
.save-card p strong { color: var(--text); }
.code-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 16px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); }
.code-row .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 4px; }
.code-big { font-size: 20px; font-weight: 600; letter-spacing: 0.03em; user-select: all; }
.save-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.save-actions .btn { flex: 1 1 220px; text-align: center; }
.auto-save { display: flex; align-items: center; gap: 10px; margin: -4px 0 12px; color: var(--muted); font-size: 0.9rem; min-height: 44px; cursor: pointer; }
.auto-save input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
.btn.needs-tap { background: var(--accent); color: #0B0B0A; border-color: var(--accent); }
.checklist { list-style: none; margin: 4px 0 12px; padding: 0; display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.checklist li { display: inline-flex; align-items: center; gap: 8px; }
.checklist .tick { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--disabled); box-sizing: border-box; display: inline-block; }
.checklist li.done { color: var(--ok); }
.checklist li.done .tick { background: var(--ok); border-color: var(--ok); }
.result-links { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
/* Sealed but the file did not come back: recoverable, so a calm amber card, not an alarm. */
.retry-card { border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); background: color-mix(in srgb, var(--warn) 6%, var(--surface)); }
.retry-card h2 { font-size: 1.05rem; }
/* Links on the result screen: the browser's default blue is unreadable on the dark card. */
.verdict-panel a:not(.btn), #result-panel a:not(.btn) { color: var(--accent-ink, #B79CFB); text-decoration-color: color-mix(in srgb, var(--accent-ink, #B79CFB) 45%, transparent); text-underline-offset: 3px; }
.sealed-meta { font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 12px; letter-spacing: 0.02em; }
.sealed-head .verdict-badge::before { content: ""; width: 7px; height: 12px; margin: -3px 2px 0 0; border: solid currentColor; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); display: inline-block; }
.checklist .tick { position: relative; transition: background 180ms ease, border-color 180ms ease; }
.checklist li.done .tick::after { content: ""; position: absolute; left: 3px; top: 0; width: 3px; height: 7px; border: solid var(--bg); border-width: 0 2px 2px 0; transform: rotate(45deg); }

@media (max-width: 520px) {
  .evidence-grid { grid-template-columns: 1fr; }
  .code-big { font-size: 17px; }
}

/* ==========================================================================
   Verify page
   ========================================================================== */
.dropzone {
  margin-top: 22px; padding: 38px 20px; text-align: center; cursor: pointer;
  border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, var(--border)); border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  transition: border-color var(--dur-state) var(--ease), background var(--dur-state) var(--ease), transform var(--dur-state) var(--ease);
}
.dropzone:hover, .dropzone:focus-visible, .dropzone.over {
  border-color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, var(--surface)); outline: none;
}
.dropzone.over { transform: scale(1.01); }
.dropzone p { margin: 6px 0 0; }
.dropzone strong { color: var(--text); }
.dz-icon { color: var(--accent); display: inline-flex; padding: 12px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 14%, transparent); }

.code-lookup { margin-top: 14px; font-size: 14px; color: var(--muted); }
.code-lookup summary { cursor: pointer; padding: 6px 0; }
.code-lookup summary:hover { color: var(--text); }
.code-lookup-row { display: flex; gap: 8px; margin-top: 8px; }
.code-lookup-row input {
  flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--text); padding: 10px 12px; font: 500 14px var(--font-mono); text-transform: uppercase;
}

.result-card {
  margin-top: 26px; padding: 22px; border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--surface);
  animation: result-in var(--dur-reveal) var(--ease);
}
@keyframes result-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.result-card[data-tone="ok"]   { border-color: color-mix(in srgb, var(--ok) 45%, var(--border));   background: color-mix(in srgb, var(--ok) 5%, var(--surface)); }
.result-card[data-tone="warn"] { border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); background: color-mix(in srgb, var(--warn) 5%, var(--surface)); }
.result-card[data-tone="bad"]  { border-color: color-mix(in srgb, var(--bad) 50%, var(--border));  background: color-mix(in srgb, var(--bad) 6%, var(--surface)); }
.result-card[data-tone="info"] { border-color: color-mix(in srgb, var(--info) 45%, var(--border)); background: color-mix(in srgb, var(--info) 5%, var(--surface)); }
.result-head { display: flex; gap: 14px; align-items: flex-start; }
.result-icon { flex: none; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid currentColor; color: var(--muted); }
.result-card[data-tone="ok"] .result-icon   { color: var(--ok); }
.result-card[data-tone="warn"] .result-icon { color: var(--warn); }
.result-card[data-tone="bad"] .result-icon  { color: var(--bad); }
.result-card[data-tone="info"] .result-icon { color: var(--info); }
.result-icon.spin { border-color: var(--border); border-top-color: var(--accent); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.result-title { font: 700 1.25rem var(--font-display); letter-spacing: -0.01em; }
.result-card[data-tone="ok"] .result-title   { color: var(--ok); }
.result-card[data-tone="warn"] .result-title { color: var(--warn); }
.result-card[data-tone="bad"] .result-title  { color: var(--bad); }
.result-card[data-tone="info"] .result-title { color: var(--info); }
.result-sub { margin-top: 6px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.result-card .evidence-grid { background: var(--border); }
.result-actions { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
.checked-file { margin-top: 18px; display: flex; gap: 14px; align-items: center; }
.checked-file img, .checked-file video { width: 96px; height: 96px; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--border); background: #000; }
.checked-name { font: 500 12.5px var(--font-mono); color: var(--muted); word-break: break-all; }

@media (prefers-reduced-motion: reduce) {
  .result-card, .dropzone { animation: none; transition: none; }
}

/* Universal signature finder: per-mark inspection list */
.inspect-out { margin: 14px 0 0; }
.chk-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.chk { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.chk-ic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; border: 1px solid var(--border); }
.chk-pass .chk-ic { color: var(--ok); border-color: var(--ok); }
.chk-fail .chk-ic { color: var(--bad); border-color: var(--bad); }
.chk-t { font-size: 14px; }
.chk-s { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; opacity: .7; margin-left: 6px; }
.chk-d { font-size: 13px; overflow-wrap: anywhere; }

/* ---- Record seal ---- */
/* Sentences inside the evidence grid (whose value cells are built for hashes: monospace, broken anywhere). */
.evidence-grid .v .prose { font-family: var(--font-text); font-size: 14px; line-height: 1.6; word-break: normal; overflow-wrap: break-word; }
.evidence-grid .v .prose a { text-decoration: underline; }
.code-block { margin: 8px 0; padding: 10px 12px; overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; background: rgba(0, 0, 0, 0.35); font: 500 11.5px/1.6 var(--font-mono); white-space: pre; }
.seal-valid { color: var(--ok); }
.seal-invalid { color: var(--bad); font-weight: 700; }
.seal-none { color: var(--muted); }
.capture-row.is-hidden { opacity: 0.55; }
.capture-label { margin: 6px 0 2px; font-size: 14px; line-height: 1.4; color: var(--text); overflow-wrap: anywhere; }
.hidden-toggle { margin: 14px 0 0; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.hidden-toggle input { accent-color: var(--accent); }

/* ==========================================================================
   Sign-in: one page, several views (log in, create an account, code, finish, recover)
   ========================================================================== */
.auth-panel { max-width: 400px; margin: 40px auto 72px; padding: 0 20px; }
.auth-panel h1 { font-size: 1.75rem; letter-spacing: -0.015em; margin: 4px 0 12px; }
.auth-panel section[hidden] { display: none; }
.auth-panel .fld { display: block; margin: 14px 0 0; }
.auth-panel .fld > span:first-child { display: block; margin-bottom: 6px; font: 600 12.5px var(--font-text); color: var(--muted); }
.auth-panel input[type="text"], .auth-panel input[type="email"], .auth-panel input[type="password"] {
  margin: 0; padding: 12px 14px; font-size: 16px;            /* 16px: iPhones zoom the page in on anything smaller */
  transition: border-color var(--dur-state) var(--ease), box-shadow var(--dur-state) var(--ease);
}
.auth-panel input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
.auth-panel .location-note { margin: 8px 0 0; }
.pw { position: relative; display: block; }
.pw input { padding-right: 70px; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%); padding: 7px 10px; border: 0; border-radius: 8px;
  background: none; color: var(--accent-ink, #B79CFB); font: 600 12.5px var(--font-text); cursor: pointer;
}
.pw-toggle:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.check { display: flex; align-items: center; gap: 10px; margin: 16px 0 6px; font-size: 13.5px; color: var(--muted); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.auth-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; margin: 16px 0 14px; font-size: 13px; color: var(--muted); }
.auth-switch { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--border); text-align: center; font-size: 14px; color: var(--muted); }
.link-btn {
  padding: 4px 2px; border: 0; background: none; cursor: pointer; font: 600 13px var(--font-text); color: var(--accent-ink, #B79CFB);
  text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent-ink, #B79CFB) 45%, transparent); text-underline-offset: 3px;
}
.auth-switch .link-btn { font-size: 14px; }
.link-btn:hover { text-decoration-color: currentColor; }
.link-btn:focus-visible, .pw-toggle:focus-visible, .recent-go:focus-visible, .recent-x:focus-visible { outline: 2px solid var(--accent-ink, #B79CFB); outline-offset: 2px; }

/* "Continue as @name": people who have signed in on this device. Names only, never a secret. */
.recent { display: grid; gap: 8px; margin: 6px 0 4px; }
.recent-tile { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.recent-tile:hover { border-color: var(--accent-border); }
.recent-go { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; }
.recent-avatar { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--accent) 22%, var(--elevated)); color: var(--accent-ink, #B79CFB); font: 700 15px var(--font-display); }
.recent-text { display: grid; min-width: 0; }
.recent-hello { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.recent-name { font: 600 15px var(--font-text); overflow: hidden; text-overflow: ellipsis; }
.recent-x { flex: none; width: 44px; border: 0; border-left: 1px solid var(--border); background: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; border-radius: 0 var(--r-md) var(--r-md) 0; }
.recent-x:hover { color: var(--text); background: var(--elevated); }

.inline-form { max-width: 420px; }
.inline-form .fld { display: block; margin: 12px 0 0; }
.inline-form .fld > span:first-child { display: block; margin-bottom: 6px; font: 600 12.5px var(--font-text); color: var(--muted); }
.inline-form input[type="password"] { width: 100%; box-sizing: border-box; padding: 11px 14px; font-size: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); }
.inline-form input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
.inline-form .btn { margin-top: 12px; }

/* ==========================================================================
   Hash art: a picture drawn from a file's SHA-256 (static/hashart.js)
   ========================================================================== */
.hash-art { display: inline-block; flex: none; line-height: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px var(--border); background: #0f0f14; }
.hash-art svg { display: block; width: 100%; height: 100%; }
.hash-art-sm { width: 46px; height: 46px; border-radius: 11px; }
.hash-art-md { width: 68px; height: 68px; }
.hash-art-lg { width: 88px; height: 88px; border-radius: 16px; }
.hash-art:empty { background: var(--elevated); }
.capture-lead { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 260px; }
.capture-main { min-width: 0; }
.cert-head { display: flex; align-items: center; gap: 18px; margin: 14px 0 6px; }
.cert-head .code-title { margin: 0; overflow-wrap: anywhere; }
.hash-art-row { display: flex; align-items: center; gap: 14px; margin: 16px 0 4px; }
.hash-art-row p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.hash-art-note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.hash-art-note strong { color: var(--text); font-weight: 600; }
.code-id { display: flex; align-items: center; gap: 14px; min-width: 0; }

/* The wordmark in Big Shoulders capitals (decisions/0022). Placed last so it wins over the
   earlier .topbar .wordmark rule, which set the display serif. */
.topbar .wordmark { font-family: var(--font-poster); font-weight: 800; font-size: 22px; letter-spacing: .01em; text-transform: uppercase; }
.topbar .wordmark img { width: 24px; height: 24px; display: block; }
@media (max-width: 560px) {
  /* Phone: the name and the light/dark switch share the first row, the links take the second. */
  .topbar .theme-switch { order: 2; margin-left: auto; }
  .topbar nav { order: 3; flex: 0 0 100%; margin-left: 0; }
}

/* Location on the certificate (decisions/0025): the owner's reveal and the checker for anyone. */
.place-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
#place .code-lookup { margin-top: 12px; }
#place textarea { display: block; width: 100%; box-sizing: border-box; margin: 8px 0; padding: 10px 12px; font: 500 12px/1.5 var(--font-mono); color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); resize: vertical; }
#place input[type="file"] { display: block; margin: 8px 0; max-width: 100%; font-size: 13px; color: var(--muted); }
#place input[type="file"]::file-selector-button { margin-right: 10px; padding: 8px 14px; font: inherit; color: var(--text); background: transparent; border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer; }
#place input[type="file"]::file-selector-button:hover { border-color: var(--muted); }

/* What backs this up (decisions/0026): the evidence graph as plain lists, one renderer for the certificate and Verify. */
.evidence { margin: 22px 0 10px; }
.evidence-sum { margin: 2px 0 12px; font: 600 12.5px/1.5 var(--font-mono); color: var(--muted); letter-spacing: .02em; }
.evidence-group { margin-top: 16px; }
.evidence-h { margin: 0 0 6px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.evidence-h .muted { font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 6px; }
.evidence-group[data-kind="contradicted"] .evidence-h { color: var(--bad); }
.evidence .chk-d { color: var(--text); font-size: 14px; line-height: 1.5; }
.chk-unavailable .chk-ic { color: var(--muted); }
.strength { display: inline-block; margin-top: 4px; padding: 2px 8px; font: 600 10.5px/1.5 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; }
.strength[data-strength="cryptographic"], .strength[data-strength="external"] { color: var(--text); border-color: var(--text); }
.strength[data-strength="operator"] { border-style: solid; }
.strength[data-strength="self-reported"] { border-style: dashed; }
.strength[data-strength="soft-bound"] { border-style: dotted; color: var(--warn); border-color: var(--warn); }
.evidence-how { margin-top: 16px; }
.evidence-how summary { cursor: pointer; padding: 6px 0; color: var(--muted); font-size: 13px; }
.edge-list { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; }
.edge { font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.edge-from, .edge-to { font-weight: 600; }
.edge-arrow { color: var(--muted); margin: 0 4px; }
.edge-bad { color: var(--bad); font: 600 10.5px/1.5 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; }
.strength-legend { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); }

/* Terms, privacy and cookies pages, and the footer links to them */
.site-foot { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; padding: 22px 16px calc(22px + env(safe-area-inset-bottom)); font-size: 12px; }
.site-foot a { color: var(--disabled); text-decoration: none; }
.site-foot a:hover { text-decoration: underline; }
body.immersive .site-foot { display: none; }
.legal { max-width: 70ch; margin: 0 auto; padding: 28px 16px 8px; line-height: 1.6; }
.legal h1 { margin: 0 0 4px; }
.legal h2 { margin: 28px 0 8px; font-size: 1.1rem; }
.legal a { color: var(--accent-ink); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 2px; }   /* had none: the browser's dark blue, unreadable on dark */
.legal-date { color: var(--disabled); font-size: 12px; margin: 0 0 18px; }
.legal-draft { border: 1px solid #FFD60A; border-radius: 10px; padding: 10px 14px; font-size: 13px; }
.legal-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--border); }


/* What was found in a copy traced by its points and squares (decisions/0044): one coloured line each. Green = nothing wrong, yellow = look at it. */
.finding-list { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.finding-list li { padding: 4px 10px; border-radius: 999px; font-size: 0.9rem; border: 1px solid var(--border); }
.finding-list li[data-tone="ok"] { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--border)); background: color-mix(in srgb, var(--ok) 10%, transparent); }
.finding-list li[data-tone="caution"] { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.verdict-badge[data-verdict="RECOMPRESSED"] { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--border)); background: color-mix(in srgb, var(--ok) 10%, transparent); }

/* ---- Registered files (decisions/0062). A registration must never look like a capture: its badge is an outline in
   the plain text colour, dashed (a capture's is solid green), and the limit of its claim sits in a plain box. ---- */
.verdict-badge[data-verdict="REGISTERED"] { color: var(--text); border: 1px dashed color-mix(in srgb, var(--text) 55%, var(--border)); background: transparent; }
.claim-limit { margin: 18px 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-md); font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.claim-limit strong { color: var(--text); }
.reg-status { margin-top: 16px; }
.reg-status p { margin: 8px 0; }
.reg-fingerprint { font-size: 13px; word-break: break-all; }
.reg-fingerprint .k { color: var(--muted); }
.reg-form { margin-top: 12px; }
.reg-form label { display: block; font-size: 14px; margin-bottom: 6px; }
.reg-form textarea { display: block; width: 100%; box-sizing: border-box; margin: 0 0 8px; padding: 10px 12px; font: inherit; font-size: 14px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); resize: vertical; }
.reg-done { margin-top: 8px; }
.reg-done .capture-actions { margin-top: 12px; }
.reg-compare { margin-top: 10px; }
.reg-compare input[type="file"] { font-size: 14px; max-width: 100%; }
.chip.registered { border-style: dashed; }