/* Sleep Sound Study — participant-facing styles.
   Light scheme only. One 520px column. Everything sized so it is legible at
   arm's length on a phone at 7am; nothing depends on colour alone. */

:root {
  --ink: #16171a;
  --ink-2: #5a5c63;
  --ink-3: #85878f;
  --line: #e4e4e8;
  --line-2: #d4d5da;
  --bg: #ffffff;
  --surface: #f6f6f7;
  --blue: #1b56c9;
  --blue-ink: #17459f;
  --blue-wash: #eef3fd;
  --blue-line: #cddcf8;
  --warn-wash: #fdf6e8;
  --warn-ink: #7a5712;
  --warn-line: #f0dfb8;
  --err: #b4283f;
  --err-wash: #fdeef0;
  --err-line: #f3ccd3;
  --ok: #1d7a4a;
  --ok-wash: #ecf7f0;
  --col: 520px;
  --r: 12px;
  --tap: 52px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 560px) { .wrap { padding: 0 16px; } }

main.wrap { flex: 1 0 auto; padding-top: 44px; padding-bottom: 72px; }
.col { max-width: var(--col); margin: 0 auto; }
/* The landing and instruction pages run wider, as the sheets do. Inside that
   wider column the prose keeps its own comfortable measure and stays left
   aligned, rather than being centred into a wide ragged block. */
.col.wide { --col: 900px; }
.col.admin-col { --col: 1100px; }
.col.wide > h1 { max-width: 560px; }
.col.wide > .lede { max-width: 700px; }
/* Full-bleed is for the facts row and the two-column instructions. A form, a
   card and a button keep the narrow measure they have on every other page, so
   the code field does not become a 900px-wide target. */
.col.wide > .card,
.col.wide > form { max-width: 520px; }
.col.wide > .facts,
.col.wide > .two-col,
.col.wide > .disclose { max-width: none; }
.col.wide > .btn { max-width: 360px; }
.col.wide > .card > form > .btn,
.col.wide > .card .btn { max-width: none; }
@media (max-width: 560px) { main.wrap { padding-top: 28px; padding-bottom: 48px; } }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  background: var(--blue); color: #fff; padding: 12px 18px; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

/* ---------------------------------------------------------------- masthead */

.masthead { border-bottom: 1px solid var(--line); background: #fff; flex: 0 0 auto; }
.masthead-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 60px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; font-size: 16px; letter-spacing: -0.01em; }
.brand-mark {
  width: 26px; height: 26px; border-radius: 7px; background: var(--blue);
  display: inline-grid; place-items: center; flex: 0 0 auto;
}
.brand-mark .ic { width: 16px; height: 16px; color: #fff; stroke-width: 1.9; }
.chrome { color: var(--ink-3); font-size: 14px; display: inline-flex; align-items: center; gap: 6px; text-align: right; }
.chrome .ic { width: 14px; height: 14px; }
@media (max-width: 560px) { .chrome { display: none; } }

.draft-bar {
  background: var(--warn-wash); color: var(--warn-ink);
  border-bottom: 1px solid var(--warn-line);
  font-size: 14px; font-weight: 620; text-align: center;
  padding: 11px 16px; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.draft-bar .ic { width: 16px; height: 16px; flex: 0 0 auto; }

.foot {
  border-top: 1px solid var(--line); color: var(--ink-3); font-size: 13.5px;
  padding: 18px 0; flex: 0 0 auto;
}

/* -------------------------------------------------------------- typography */

h1 {
  font-size: 42px; line-height: 1.04; letter-spacing: -0.028em;
  font-weight: 680; margin: 0 0 14px;
}
@media (max-width: 560px) { h1 { font-size: 31px; } }

h2 { font-size: 17px; font-weight: 660; letter-spacing: -0.008em; margin: 0 0 8px; }

.lede { font-size: 19px; line-height: 1.47; color: var(--ink-2); margin: 0 0 26px; }
@media (max-width: 560px) { .lede { font-size: 17px; } }

p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }
a { color: var(--blue); text-underline-offset: 2px; }
/* Inline links inside prose keep their underline; standalone navigation links
   are drawn without one in the sheets, and they are unambiguous on their own. */
.quiet-link a, .filerow > a, .btn, .disclose summary a { text-decoration: none; }
.quiet-link a:hover, .filerow > a:hover { text-decoration: underline; }
strong { font-weight: 650; }
.mono { font-variant-numeric: tabular-nums; letter-spacing: 0.06em; }

.help { font-size: 14px; color: var(--ink-3); margin: 7px 0 0; }
.quiet-link { margin: 14px 0 0; font-size: 15px; }
.quiet-link + .quiet-link { margin-top: 6px; }

.pill {
  display: inline-block; font-size: 13px; font-weight: 640; letter-spacing: 0.01em;
  padding: 5px 11px; border-radius: 999px; background: var(--surface); color: var(--ink-2);
  margin: 0 0 16px;
}
.pill.blue { background: var(--blue-wash); color: var(--blue-ink); }
.pill.warn { background: var(--warn-wash); color: var(--warn-ink); }
.pill.ok { background: var(--ok-wash); color: var(--ok); }

.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------------ steps */

.steps { margin-bottom: 26px; }
.steps-label { font-size: 13.5px; font-weight: 620; color: var(--ink-2); margin: 0 0 8px; }
.steps-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.steps-bar span { height: 3px; border-radius: 2px; background: var(--line-2); }
.steps-bar span.on { background: var(--blue); }

/* ------------------------------------------------------------------ cards */

.card {
  border: 1px solid var(--line); border-radius: var(--r); background: #fff;
  padding: 22px; margin: 0 0 18px;
}
.card.flush { padding: 0; }
.card.tint { background: var(--surface); border-color: transparent; }

.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 0 20px; }
@media (max-width: 760px) { .facts { grid-template-columns: 1fr; } }
.fact { background: var(--surface); border-radius: var(--r); padding: 15px; }
.fact .ic { width: 18px; height: 18px; color: var(--ink-2); }
.fact-ic { width: 30px; height: 30px; border-radius: 8px; background: #fff; display: grid; place-items: center; margin-bottom: 11px; }
.fact h3 { font-size: 15px; font-weight: 650; margin: 0 0 5px; letter-spacing: -0.006em; }
.fact p { font-size: 14px; line-height: 1.45; color: var(--ink-2); margin: 0; }

/* ------------------------------------------------------------------ notes */

.note {
  display: flex; gap: 11px; align-items: flex-start;
  border-radius: var(--r); padding: 14px 16px; margin: 0 0 18px; font-size: 15px; line-height: 1.5;
}
.note .ic { flex: 0 0 auto; margin-top: 1px; }
.note-t { font-weight: 650; margin: 0; }
.note-b { margin-top: 3px; }
.note-b p { margin: 0 0 8px; }
.note-info { background: var(--blue-wash); color: var(--blue-ink); }
.note-warn { background: var(--warn-wash); color: var(--warn-ink); }
.note-error { background: var(--err-wash); color: var(--err); }
.note-ok { background: var(--ok-wash); color: var(--ok); }
.note-info a, .note-warn a, .note-error a, .note-ok a { color: inherit; }

.err { color: var(--err); font-size: 14.5px; margin: 8px 0 0; display: flex; gap: 6px; align-items: flex-start; }
.err .ic { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; }
.err-sub { color: var(--err); font-size: 14px; margin: 5px 0 0 32px; }

/* ----------------------------------------------------------------- fields */

.field { margin: 0 0 18px; }
.field > label { display: block; font-size: 14.5px; font-weight: 620; margin: 0 0 7px; }
input[type=text], input[type=email], input[type=password] {
  width: 100%; min-height: var(--tap); padding: 13px 15px;
  font: inherit; font-size: 17px; color: var(--ink);
  background: #fff; border: 1px solid var(--line-2); border-radius: 10px;
  appearance: none;
}
input:focus-visible, .btn:focus-visible, summary:focus-visible, .chip:focus-within, .check:focus-within {
  outline: 2px solid var(--blue); outline-offset: 2px;
}
select {
  width: 100%; min-height: var(--tap); padding: 13px 15px;
  font: inherit; font-size: 17px; color: var(--ink);
  background: #fff; border: 1px solid var(--line-2); border-radius: 10px;
  appearance: none;
}
select:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
input[type=date] { width: 100%; min-height: var(--tap); padding: 13px 15px; font: inherit; font-size: 17px; background: #fff; border: 1px solid var(--line-2); border-radius: 10px; appearance: none; }
input[aria-invalid=true] { border-color: var(--err); }
input::placeholder { color: #a9abb2; }

.code-input {
  font-size: 26px; letter-spacing: 0.42em; text-indent: 0.42em;
  text-align: center; font-variant-numeric: tabular-nums; font-weight: 500;
  max-width: 290px; min-height: 60px;
}

/* --------------------------------------------------------------- choices */

.choice { border: 0; padding: 0; margin: 0 0 20px; }
.choice legend { font-size: 15.5px; font-weight: 650; padding: 0 0 9px; width: 100%; border-bottom: 1px solid var(--line); margin-bottom: 11px; }
.choice-row { display: flex; gap: 9px; flex-wrap: wrap; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span {
  display: grid; place-items: center; min-height: 46px; min-width: 78px; padding: 0 18px;
  border: 1px solid var(--line-2); border-radius: 10px; background: #fff;
  font-size: 16px; font-weight: 520; color: var(--ink);
}
/* Two selectors, deliberately. `:checked` is the live state and needs no
   JavaScript, which is what this page actually renders with; `.on` is the
   server-rendered class, kept so a re-render after a validation error still
   matches. Filled AND outlined AND bold, never colour alone, so the choice
   survives colour-blindness and a greyscale print. */
.chip.on span,
.chip input:checked + span { border-color: var(--blue); border-width: 2px; background: var(--blue-wash); color: var(--blue-ink); font-weight: 680; }
.choice.has-err .chip span { border-color: var(--err-line); }

.sub-choice { border-left: 2px solid var(--line); padding-left: 16px; margin: 0 0 20px; }
.sub-choice .choice:last-child { margin-bottom: 0; }
.sub-choice .choice legend { border-bottom: 0; padding-bottom: 6px; margin-bottom: 8px; font-size: 15px; }

.check-wrap { margin: 0 0 11px; }
.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: 16px; line-height: 1.45; }
.check input {
  appearance: none; flex: 0 0 auto; width: 22px; height: 22px; margin: 1px 0 0;
  border: 1.5px solid var(--line-2); border-radius: 5px; background: #fff; cursor: pointer;
}
.check input:checked { background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 10.5 3.5 3.5 7.5-8'/%3E%3C/svg%3E") center/16px no-repeat; border-color: var(--blue); }
.check-wrap.has-err .check input { border-color: var(--err); }
.check-boxed { border: 1px solid var(--line-2); border-radius: 10px; padding: 14px 16px; }
.check-wrap.has-err .check-boxed { border-color: var(--err-line); background: #fffafb; }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: 100%; min-height: var(--tap); padding: 14px 20px;
  font: inherit; font-size: 17px; font-weight: 650; letter-spacing: -0.005em;
  border-radius: 10px; border: 1px solid transparent; cursor: pointer;
  text-decoration: none; margin: 0 0 10px;
  transition: background-color .14s ease, opacity .14s ease;
}
.btn.primary { background: var(--blue); color: #fff; }
.btn.primary:hover { background: #1849a8; }
.btn.secondary { background: var(--surface); color: var(--ink); }
.btn.secondary:hover { background: #eeeef0; }
.btn.ghost { background: transparent; color: var(--blue); }
.btn.danger { background: var(--err-wash); color: var(--err); }
.btn[disabled] { opacity: .55; cursor: default; }
.btn.narrow { width: auto; min-width: 200px; display: inline-flex; }
.btn .ic { width: 18px; height: 18px; margin-right: 8px; }

/* ------------------------------------------------------------------- rows */

.rows { border: 1px solid var(--line); border-radius: var(--r); }
.row { display: flex; justify-content: space-between; gap: 16px; padding: 14px 16px; font-size: 15.5px; }
.row + .row { border-top: 1px solid var(--line); }
.row > span:first-child { color: var(--ink-2); }
.row > span:last-child { text-align: right; font-weight: 600; }

.idcard { border: 1px solid var(--line); border-radius: var(--r); padding: 18px; margin: 0 0 18px; }
.idcard-label { font-size: 13px; color: var(--ink-2); margin: 0 0 4px; }
.idcard-id { font-size: 29px; font-weight: 660; letter-spacing: 0.07em; margin: 0 0 8px; font-variant-numeric: tabular-nums; }
.idcard p { font-size: 14px; color: var(--ink-2); margin: 0; }
.idcard .rows { border: 0; margin-top: 14px; }
.idcard .rows .row { padding: 12px 0; }
.idcard .rows .row:first-child { border-top: 1px solid var(--line); }

.idstrip {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: var(--surface); border-radius: 10px; padding: 14px 16px; margin: 0 0 18px;
}
.idstrip b { font-size: 17px; font-weight: 650; letter-spacing: 0.07em; }
.idstrip span { color: var(--ok); font-weight: 620; font-size: 14.5px; display: inline-flex; gap: 5px; align-items: center; }
.idstrip span .ic { width: 16px; height: 16px; }

/* --------------------------------------------------------------- filerow */

.filerow {
  display: flex; gap: 13px; align-items: center;
  border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; margin: 0 0 16px;
}
.filerow.bad { border-color: var(--err-line); background: #fffafb; }
.filerow-ic { width: 34px; height: 34px; border-radius: 9px; background: var(--blue-wash); display: grid; place-items: center; flex: 0 0 auto; }
.filerow-ic .ic { width: 19px; height: 19px; color: var(--blue); }
.filerow.bad .filerow-ic { background: var(--err-wash); }
.filerow.bad .filerow-ic .ic { color: var(--err); }
.filerow-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.filerow-txt strong { font-size: 15.5px; font-weight: 640; overflow-wrap: anywhere; }
.filerow-txt span { font-size: 14px; color: var(--ink-2); }
.filerow > a { font-size: 15px; font-weight: 600; flex: 0 0 auto; }

/* ------------------------------------------------------------- dropzone */

.drop {
  border: 1.5px dashed var(--line-2); border-radius: var(--r);
  padding: 32px 20px; text-align: center; margin: 0 0 14px; background: #fff;
  transition: border-color .15s ease, background-color .15s ease;
}
.drop.over { border-color: var(--blue); background: var(--blue-wash); }
.drop-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--blue-wash); display: grid; place-items: center; margin: 0 auto 14px; }
.drop-ic .ic { width: 22px; height: 22px; color: var(--blue); }
.drop p { font-size: 16px; color: var(--ink-2); margin: 0 0 12px; }
.drop .btn { max-width: 190px; margin: 0 auto 10px; }
.drop .help { margin-top: 0; }
input[type=file].hidden-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

/* ------------------------------------------------------------- timeline */

.timeline { list-style: none; margin: 0 0 20px; padding: 0; }
.timeline li { display: flex; gap: 13px; padding-bottom: 20px; position: relative; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: 10px; top: 24px; bottom: 0; width: 2px; background: var(--line);
}
.timeline li:last-child::before { display: none; }
.timeline li.tl-done::before { background: var(--blue); }
.tl-dot {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; z-index: 1;
  border: 2px solid var(--line-2); background: #fff; display: grid; place-items: center;
}
.tl-done .tl-dot { background: var(--blue); border-color: var(--blue); }
.tl-done .tl-dot .ic { width: 13px; height: 13px; color: #fff; stroke-width: 2.6; }
.tl-current .tl-dot { border-color: var(--blue); border-width: 2.5px; }
.tl-current .tl-dot::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--blue); }
.tl-action .tl-dot { border-color: #c79a2a; border-width: 2.5px; }
.tl-action .tl-dot::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #c79a2a; }
.tl-closed .tl-dot { background: var(--ink-3); border-color: var(--ink-3); }
.tl-closed .tl-dot .ic { width: 13px; height: 13px; color: #fff; stroke-width: 2.6; }
.tl-t { font-weight: 650; font-size: 16px; margin: 0; }
.tl-todo .tl-t { color: var(--ink-2); font-weight: 600; }
.tl-b { font-size: 15px; color: var(--ink-2); margin: 2px 0 0; line-height: 1.45; }

/* ------------------------------------------------------------- stepped */

.stepped { list-style: none; margin: 0 0 18px; padding: 0; counter-reset: s; }
.stepped li { display: flex; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.stepped li:last-child { border-bottom: 0; }
.stepped:not(.plain) li::before {
  counter-increment: s; content: counter(s);
  width: 25px; height: 25px; border-radius: 50%; background: var(--surface);
  display: grid; place-items: center; font-size: 13.5px; font-weight: 640; color: var(--ink-2); flex: 0 0 auto;
}
.st-ic { width: 27px; height: 27px; border-radius: 8px; background: var(--blue-wash); display: grid; place-items: center; flex: 0 0 auto; }
.st-ic .ic { width: 16px; height: 16px; color: var(--blue); }
.st-t { font-weight: 650; font-size: 15.5px; margin: 0; }
.st-b { font-size: 15px; color: var(--ink-2); margin: 2px 0 0; line-height: 1.45; }
.stepped li > div { min-width: 0; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 18px; }
@media (max-width: 760px) { .two-col { grid-template-columns: 1fr; gap: 8px; } }
.two-col h2 { padding-bottom: 6px; }

/* ------------------------------------------------------------ disclosure */

.disclose { border-top: 1px solid var(--line); margin: 18px 0; }
.disclose summary {
  display: flex; align-items: center; gap: 12px; padding: 16px 0;
  cursor: pointer; list-style: none; font-size: 16px;
}
.disclose summary::-webkit-details-marker { display: none; }
.disclose-ic { width: 28px; height: 28px; border-radius: 8px; background: var(--blue-wash); display: grid; place-items: center; flex: 0 0 auto; }
.disclose-ic .ic { width: 16px; height: 16px; color: var(--blue); }
.disclose-t { display: flex; flex-direction: column; flex: 1 1 auto; }
.disclose-t strong { font-weight: 650; }
.disclose-t span { font-size: 14px; color: var(--ink-3); }
.chev { width: 9px; height: 9px; border-right: 1.8px solid var(--ink-3); border-bottom: 1.8px solid var(--ink-3); transform: rotate(45deg) translate(-2px, -2px); flex: 0 0 auto; }
.disclose[open] .chev { transform: rotate(-135deg) translate(-2px, -2px); }
.disclose-body { padding: 0 0 16px; }

/* ------------------------------------------------------------- consent */

.consent h2 { padding-top: 22px; border-top: 1px solid var(--line); margin-top: 22px; }
/* The rule above draws the divider that separates one section from the next.
   Each section is now its own <section> wrapper, so plain :first-child would
   match every heading and delete every divider — leaving an initials box
   floating ambiguously between two sections. Only the first heading in the
   whole summary loses it. */
.consent > *:first-child h2,
.consent > h2:first-child { padding-top: 0; border-top: 0; margin-top: 0; }
.consent p { font-size: 16px; line-height: 1.52; color: var(--ink); margin: 0 0 10px; }
.ph { background: var(--warn-wash); color: var(--warn-ink); padding: 2px 6px; border-radius: 4px; font-weight: 600; }
/* Consent form tables (sections 13 and 14, and the identity header).
   Two columns on a wide screen. Below 560px each row stacks: the label cell
   becomes a small bold line and the value sits under it, because section 13's
   right-hand column is a paragraph and squeezing a paragraph into half of a
   320px screen produces a column four words wide. The <th> row is hidden there
   rather than repeated above every stacked row, where it would be noise. */
.ctable-wrap { margin: 0 0 14px; }
.ctable { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; }
.ctable th {
  text-align: left; font-size: 13px; font-weight: 650; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--ink-3);
  padding: 0 12px 7px 0; border-bottom: 1px solid var(--line);
}
.ctable td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.ctable td:first-child { font-weight: 620; width: 34%; }
.ctable tr:last-child td { border-bottom: 0; }
.ctable.chead td:first-child { color: var(--ink-2); font-weight: 600; }

@media (max-width: 560px) {
  .ctable, .ctable tbody, .ctable tr, .ctable td { display: block; width: auto; }
  .ctable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ctable tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .ctable tr:last-child { border-bottom: 0; }
  .ctable td { border-bottom: 0; padding: 0 0 4px; }
  .ctable td:first-child { width: auto; font-weight: 650; font-size: 14px; color: var(--ink-2); }
}

/* Consent bullet lists. Tighter than a default <ul> and with the marker pulled
   out of the text column, so a bold lead-in still starts on the same line. */
.cbul { margin: 0 0 12px; padding-left: 22px; }
.cbul li { font-size: 16px; line-height: 1.52; margin: 0 0 9px; }
.cbul li::marker { color: var(--ink-3); }

/* The per-section initials row.
   One row on a phone: label on the left, a narrow box on the right, 52px tall
   like every other tap target. It wraps to two lines below about 330px rather
   than squeezing the box, because a 40px-wide box invites a typo nobody can
   see. Marked, not coloured: has-err draws a border and a wash as well, so the
   state survives greyscale. */
.consent-sec { margin: 0; }
.ack {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 16px 0 6px; padding: 11px 14px;
  border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface);
}
.ack-l { flex: 1 1 140px; font-size: 14.5px; font-weight: 620; margin: 0; }
.ack .ack-in {
  flex: 0 0 auto; width: 104px; min-height: 46px; padding: 11px 12px;
  text-align: center; letter-spacing: 0.1em; font-weight: 620;
  background: #fff;
}
.ack .err { flex: 1 0 100%; margin-top: 2px; }
/* Jumping from the error summary lands on the box itself, which browsers also
   focus because it is a form control. The margin keeps the end of the section
   it belongs to on screen, so the box never arrives context-free at y=0. */
.ack, .ack .ack-in { scroll-margin-top: 110px; }
.ack.has-err { border-color: var(--err-line); background: #fffafb; }
/* The same row on a read-back copy, where the initials are a fact rather than
   a field. Same geometry so the stored copy looks like the page that was
   signed, which is the point of showing it at all. */
.ack-done .ack-in {
  display: grid; place-items: center; width: 104px; min-height: 46px;
  border: 1px solid var(--line-2); border-radius: 10px; background: #fff;
  font-weight: 620; letter-spacing: 0.1em; font-size: 17px;
}
.ack.has-err .ack-in { border-color: var(--err); }

/* Available to a screen reader, absent from the page. Used to give each
   identical "Your initials" label the section it belongs to. */
.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.sig-date { display: flex; justify-content: space-between; font-size: 15.5px; margin: 14px 0 18px; }
.sig-date span:first-child { color: var(--ink-2); }
.sig-date span:last-child { font-weight: 600; }

/* ---------------------------------------------------------- step numbers */

.stepnum {
  width: 26px; height: 26px; border-radius: 50%; background: var(--surface);
  display: inline-grid; place-items: center; flex: 0 0 auto;
  font-size: 14px; font-weight: 640; color: var(--ink-2);
}
.step h2 { font-size: 17px; }
.step .stepnum.done { background: var(--blue); color: #fff; }

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

.prog-head { display: flex; justify-content: space-between; font-size: 15.5px; margin: 0 0 8px; }
.prog-head b { font-weight: 650; }
.prog-head span { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bar { height: 7px; border-radius: 4px; background: var(--line); overflow: hidden; margin: 0 0 10px; }
.bar i { display: block; height: 100%; background: var(--blue); border-radius: 4px; width: 0; transition: width .3s ease; }
.bar.stalled i { background: #b07d13; }
.bar.done i { background: var(--blue); }

dialog.modal {
  border: 0; border-radius: 14px; padding: 22px; max-width: 420px; width: calc(100% - 32px);
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
}
dialog.modal::backdrop { background: rgba(22,23,26,.45); }
dialog.modal h2 { font-size: 19px; margin-bottom: 10px; }
dialog.modal p { font-size: 15.5px; color: var(--ink-2); margin-bottom: 18px; }

/* --------------------------------------------------------------- hero ok */

.hero-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; margin: 0 0 20px; }
.hero-ic .ic { width: 26px; height: 26px; stroke-width: 2.1; }
.hero-ok { background: var(--ok-wash); } .hero-ok .ic { color: var(--ok); }
.hero-neutral { background: var(--surface); } .hero-neutral .ic { color: var(--ink-2); }
.hero-blue { background: var(--blue-wash); } .hero-blue .ic { color: var(--blue); }

.ticks { list-style: none; margin: 0 0 20px; padding: 0; }
.ticks li { display: flex; gap: 11px; align-items: flex-start; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.ticks li:last-child { border-bottom: 0; }
.ticks .ic { width: 18px; height: 18px; color: var(--ink-2); flex: 0 0 auto; margin-top: 3px; }

/* ----------------------------------------------------------------- admin */

/* Operations pages get their own measure; see .col.admin-col. */
/* Staff work on a laptop, but the queue must not break the page if someone
   opens it on a phone, so the table scrolls inside its own box. */
.admin .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.admin table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 560px; }
.admin th, .admin td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin th { font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.admin td.num { font-variant-numeric: tabular-nums; }
.admin .tag { font-size: 12px; font-weight: 640; padding: 3px 8px; border-radius: 999px; background: var(--surface); color: var(--ink-2); white-space: nowrap; }
.admin .tag.ok { background: var(--ok-wash); color: var(--ok); }
.admin .tag.warn { background: var(--warn-wash); color: var(--warn-ink); }
.admin .tag.err { background: var(--err-wash); color: var(--err); }
.admin .tag.blue { background: var(--blue-wash); color: var(--blue-ink); }
.admin .btn { width: auto; min-height: 40px; padding: 8px 14px; font-size: 14.5px; display: inline-flex; margin: 0 6px 6px 0; }
.admin textarea { width: 100%; font: inherit; font-size: 15px; padding: 11px 13px; border: 1px solid var(--line-2); border-radius: 9px; min-height: 76px; }
.admin .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 22px; }
.admin .metric { background: var(--surface); border-radius: var(--r); padding: 14px 16px; }
.admin .metric b { display: block; font-size: 25px; font-weight: 660; letter-spacing: -0.02em; }
.admin .metric span { font-size: 13.5px; color: var(--ink-2); }
.admin pre { background: var(--surface); padding: 14px; border-radius: 9px; overflow-x: auto; font-size: 12.5px; line-height: 1.5; }

/* --------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.spin { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; margin-right: 9px; }
@keyframes spin { to { transform: rotate(360deg); } }

.fade-in { animation: fade .22s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------- utility classes
   These replace inline style="..." attributes. They are not a design system;
   they exist because the Content-Security-Policy sends `style-src 'self'` with
   no `unsafe-inline`, and under CSP3 a style attribute falls back to style-src.
   Every inline style in the templates was therefore silently inert — the pages
   only looked right because the real layout is class-based. Rather than loosen
   the policy, the declarations moved here.

   The upload progress bar is unaffected and stays in JavaScript: setting
   `el.style.width` through the CSSOM is not restricted by CSP, only style
   attributes written into the markup are. */

.u-h6   { height: 6px; }
.u-h8   { height: 8px; }
.u-h14  { height: 14px; }
.u-h16  { height: 16px; }
.u-h18  { height: 18px; }
.u-h22  { height: 22px; }

.u-mb6  { margin-bottom: 6px; }
.u-mb12 { margin-bottom: 12px; }
.u-mb14 { margin-bottom: 14px; }
.u-mb16 { margin-bottom: 16px; }
.u-mb18 { margin-bottom: 18px; }
.u-mb22 { margin-bottom: 22px; }
.u-mt4  { margin-top: 4px; }
.u-mt18 { margin-top: 18px; }
.u-m04  { margin: 0 0 4px; }
.u-m014 { margin: 0 0 14px; }
.u-m016 { margin: 0 0 16px; }
.u-m022 { margin: 0 0 22px; }

.u-sec-a { margin: 28px 0 10px; }
.u-sec-b { margin: 26px 0 12px; }
.u-sec-c { margin: 24px 0 10px; }

.u-muted    { color: var(--ink-3); }
.u-muted-xs { font-size: 12px; color: var(--ink-3); }
.u-err-xs   { color: var(--err); font-size: 12px; }
.u-inline   { display: inline; }
.u-nowrap   { white-space: nowrap; }

.u-h1-sm { font-size: 25px; margin-bottom: 12px; }
.u-h2-sm { font-size: 19px; margin-bottom: 14px; }
.u-mb18-sm { margin-bottom: 18px; font-size: 14px; }

.u-label    { font-size: 14.5px; font-weight: 620; margin: 0 0 9px; }
.u-label-7  { font-size: 14.5px; font-weight: 620; margin-bottom: 7px; }
.u-sublabel { margin: 18px 0 8px; font-size: 14.5px; font-weight: 620; }

.u-list { margin: 0; padding-left: 20px; font-size: 15.5px; line-height: 1.7; color: var(--ink-2); }
.u-narrow-center { max-width: 190px; margin: 0 auto 10px; }

.u-steph-a { display: flex; gap: 11px; align-items: center; margin: 22px 0 6px; }
.u-steph-b { display: flex; gap: 11px; align-items: center; margin: 22px 0 14px; }
.u-steph-c { display: flex; gap: 11px; align-items: center; margin-bottom: 14px; }

.u-btn-inline,
.u-btn-inline-15 { width: auto; min-height: auto; padding: 0; display: inline; }
.u-btn-inline    { font-size: 14px; }
.u-btn-inline-15 { font-size: 15px; }

/* The reviewer's audio player. Full width so the scrub bar is usable on a long
   recording; the element itself is the browser's own controls. */
.revaudio { width: 100%; margin: 0 0 10px; display: block; }

/* The TOTP key, shown once during setup. Monospaced and loose enough to read
   a character at a time, because people type these by hand from a phone. */
.u-key {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.05rem;
  letter-spacing: .08em;
  line-height: 1.7;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  word-break: break-all;
}