/* WAVERS shared components (WatchFace, Letter, Certificate, Seal). Unskinned: colours and fonts
   come only from tokens.css. No @keyframes here: the WatchFace animates from JS attributes so
   film frames are exact, and the waiver's notary stamp animation lives in waiver.css. */

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

/* ─── WatchFace ─────────────────────────────────────────────────────────────── */
wavers-watch { display: block; width: 100%; aspect-ratio: 1; }
wavers-watch > svg { display: block; width: 100%; height: 100%; }

.watch-strap { fill: var(--watch-strap); }
.watch-case { fill: var(--watch-case); }
.watch-bezel { fill: var(--watch-bezel); }
/* Steady screen colour: red only through the flash limiter's .is-red class (G-FLASH). */
.watch-screen { fill: var(--watch-screen); }
wavers-watch.is-red .watch-screen { fill: var(--wv-alert); }

.watch-layer { display: none; }
wavers-watch[data-state="idle"] .watch-idle-layer,
wavers-watch[data-state="alert"] .watch-ring-layer,
wavers-watch[data-state="crowd"] .watch-ring-layer,
wavers-watch[data-state="wave-now"] .watch-hand-layer,
wavers-watch[data-state="returned"] .watch-check-layer,
wavers-watch[data-state="breach"] .watch-breach-layer,
wavers-watch[data-state="suspended"] .watch-suspended-layer { display: inline; }

.watch-grid { fill: none; stroke: var(--watch-grid); stroke-width: 4; }
.watch-sweep { fill: var(--watch-grid); fill-opacity: 0.35; }
.watch-dot { fill: var(--watch-grid); }
.watch-ring { fill: none; stroke: var(--wv-on-alert); stroke-width: 14; }
.watch-hand { fill: var(--wv-on-alert); }
.watch-hand-muted { fill: var(--watch-muted); }
.watch-check { fill: none; stroke: var(--wv-ok); stroke-width: 30; stroke-linecap: round; stroke-linejoin: round; }
.watch-slash { stroke: var(--wv-alert); stroke-width: 22; stroke-linecap: round; }
.watch-pause { fill: var(--watch-muted); }

.watch-text { fill: var(--watch-text); font-family: var(--wv-font-body); font-weight: 800; letter-spacing: 0.02em; }
.watch-text-grid { fill: var(--watch-grid); }
.watch-text-alert { fill: var(--wv-alert); }
.watch-text-muted { fill: var(--watch-muted); }
wavers-watch[data-state="returned"] .watch-text { fill: var(--wv-ok); }

/* ─── Letter ────────────────────────────────────────────────────────────────── */
/* Page = A4 portrait at 679 x 960 CSS px (x4 = 2716 x 3840 for the film). Sizes in cqi scale with width. */
wavers-letter { display: block; width: 100%; max-width: 679px; container-type: inline-size; }

.wv-letter {
  position: relative;
  aspect-ratio: 679 / 960;
  overflow: hidden;
  padding: 9cqi 10cqi 8cqi;
  color: var(--wv-ink);
  background: var(--wv-paper);
  border: 1px solid var(--wv-line);
  font-family: var(--wv-font-display);
  font-size: 2.75cqi;
  line-height: 1.5;
}
.wv-letter p, .wv-letter ol, .wv-letter ul { margin: 0 0 1.1em; }

.letter-head { margin: 0 0 3.2em; padding-bottom: 1.2em; text-align: center; border-bottom: 0.3cqi solid var(--wv-ink); }
.letter-head p { margin: 0; }
.letter-office { font-size: 1.45em; letter-spacing: 0.14em; }
.letter-motto { margin-top: 0.3em !important; color: var(--wv-ink-soft); }
.letter-dateline { font-family: var(--wv-font-mono); font-size: 0.92em; }
.letter-title { font-family: var(--wv-font-mono); font-weight: 700; letter-spacing: 0.06em; font-size: 1.05em; }
.letter-notice { margin: 2.2em 0 1.6em; font-size: 1.3em; line-height: 1.35; }
.letter-notice p { margin: 0 0 0.2em; }
.letter-list { padding-left: 1.6em; }
.letter-list li { margin: 0 0 0.35em; padding-left: 0.2em; }
.letter-closing { margin-top: 2.4em; }
.letter-closing p { margin: 0 0 0.9em; }
.letter-signoff { font-family: var(--wv-font-mono); font-weight: 700; letter-spacing: 0.12em; }

.field { font-family: var(--wv-font-mono); font-size: 0.95em; }
.field.is-blank { display: inline-block; min-width: 9em; border-bottom: 0.2cqi solid var(--wv-ink); vertical-align: baseline; }
.fn-ref { font-size: 0.7em; line-height: 0; }

.letter-question { margin-top: 2.6em !important; font-size: 1.2em; }
.letter-options { display: flex; gap: 2.2em; padding: 0; list-style: none; font-size: 1.2em; }
.letter-options li { display: flex; align-items: center; gap: 0.45em; }
.letter-box { width: 1.3em; height: 1.3em; flex: none; }
.letter-box rect { fill: none; stroke: var(--wv-ink); stroke-width: 2; }
.letter-box path { fill: none; stroke: var(--wv-ink); stroke-width: 2.6; stroke-linecap: round; }
.letter-hand {
  min-height: 1.6em;
  margin-top: 1.4em !important;
  padding: 0 0.2em 0.1em;
  font-family: var(--wv-font-hand);
  font-size: 2.1em;
  line-height: 1.3;
  color: var(--wv-hand-ink);
  border-bottom: 0.2cqi solid var(--wv-line);
}
.letter-stamp {
  position: absolute;
  right: 11cqi;
  bottom: 22cqi;
  margin: 0 !important;
  padding: 0.15em 0.55em;
  font-family: var(--wv-font-mono);
  font-size: 7.2cqi;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--wv-stamp-ink);
  border: 0.9cqi solid var(--wv-stamp-ink);
  border-radius: 1.2cqi;
  transform: rotate(-11deg);
}
.letter-form-code {
  position: absolute;
  left: 10cqi;
  bottom: 4.5cqi;
  margin: 0 !important;
  font-family: var(--wv-font-mono);
  font-size: 0.8em;
  color: var(--wv-ink-soft);
}

/* ─── Certificate + Seal ────────────────────────────────────────────────────── */
wavers-certificate { display: block; width: 100%; }
.wv-certificate-canvas { display: block; width: 100%; height: auto; border: 1px solid var(--wv-line); }

.wv-seal { display: block; width: 100%; height: auto; overflow: visible; }
.wv-seal .seal-line { fill: none; stroke: currentColor; stroke-width: 2; }
.wv-seal .seal-line-bold { stroke-width: 5; }
.wv-seal .seal-ring-text { fill: currentColor; font-family: var(--wv-font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; }
.wv-seal .seal-hand { fill: currentColor; }
.wv-seal .seal-label { fill: currentColor; font-family: var(--wv-font-mono); font-size: 15px; font-weight: 800; letter-spacing: 0.08em; }