/* Dialog staging. Every value here is DESIGN.md v0.13's: the tokens of section 3, the six sizes of section 4, the
   spacing, radii and one shadow of section 5, the Seal of section 6, the motion of section 9. Nothing is invented;
   where the spec is silent the page does less. */
@font-face { font-family: "Hanken Grotesk"; src: url(fonts/hankengrotesk.ttf); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Newsreader; src: url(fonts/newsreader.ttf); font-weight: 200 800; font-display: swap; }

:root {
  --paper: #F7F8FA; --surface: #FFFFFF; --ink: #0E1726; --ink-2: #5B6577; --rule: #DDE1E8; --border: #868FA0;
  --blue: #1F3FD9; --blue-pressed: #1832B4; --on-blue: #FFFFFF; --amber: #9A5B00; --danger: #B3261E;
  --live-bg: #1F3FD9; --live-ink: #F7F8FA; --live-ink-2: #C3CDF7; --live-amber: #F6C878;
  --sheet-shadow: 0 -8px 32px rgba(14,23,38,.12);
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0C111B; --surface: #141B28; --ink: #E9EDF5; --ink-2: #97A1B3; --rule: #263042; --border: #5E6B85;
    --blue: #6F8CFF; --blue-pressed: #5C79F0; --on-blue: #0C111B; --amber: #F0B354; --danger: #FF8F85;
    --sheet-shadow: 0 -8px 32px rgba(0,0,0,.4); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0C111B; --surface: #141B28; --ink: #E9EDF5; --ink-2: #97A1B3; --rule: #263042; --border: #5E6B85;
  --blue: #6F8CFF; --blue-pressed: #5C79F0; --on-blue: #0C111B; --amber: #F0B354; --danger: #FF8F85;
  --sheet-shadow: 0 -8px 32px rgba(0,0,0,.4); color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--paper); color: var(--ink); font: 400 16px/24px var(--sans); -webkit-text-size-adjust: 100%; }
button, input, textarea { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 20px; top: 12px; z-index: 30; background: var(--surface); padding: 8px 12px; }

/* type: six sizes, no more than four on a screen */
.meta { font-size: 13px; line-height: 18px; color: var(--ink-2); margin: 0; }
.title { font: 500 30px/36px var(--serif); margin: 0; }
.serif { font-family: var(--serif); }
.body-record { font: 400 18px/29px var(--serif); margin: 0; max-width: 34em; }
.strong { font-weight: 600; }
.p { margin: 0; }
h2.group { font: 400 13px/18px var(--sans); color: var(--ink-2); margin: 32px 0 8px; }

/* layout */
.app { min-height: 100vh; display: flex; flex-direction: column; }
.screen { flex: 1; width: 100%; max-width: 480px; margin: 0 auto; padding: 48px 20px 32px; display: flex; flex-direction: column; gap: 24px; }
.screen.has-tabs { padding-bottom: 96px; }
.stack-8 { display: flex; flex-direction: column; gap: 8px; }
.stack-12 { display: flex; flex-direction: column; gap: 12px; }
.stack-16 { display: flex; flex-direction: column; gap: 16px; }
.grow { flex: 1; }
.foot { display: flex; flex-direction: column; gap: 12px; }
.center { text-align: center; align-items: center; }

/* buttons, links, inputs */
.btn, .btn2 { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px; border-radius: 8px; font: 600 16px/24px var(--sans); text-decoration: none; cursor: pointer; width: 100%; }
.btn { background: var(--blue); color: var(--on-blue); border: 0; }
.btn:active { background: var(--blue-pressed); }
.btn2 { background: none; color: var(--ink); border: 1px solid var(--border); }
.btn2:active { background: var(--paper); }
.btn[disabled], .btn2[disabled], .btn[aria-disabled="true"] { background: var(--rule); color: var(--ink-2); border-color: var(--rule); cursor: default; }
.btn.danger { background: var(--danger); color: var(--on-blue); }
.link { background: none; border: 0; padding: 12px 0; min-height: 44px; font: 400 16px/24px var(--sans); color: var(--ink); text-decoration: underline; cursor: pointer; text-align: left; display: inline-flex; align-items: center; }
.link.quiet { color: var(--ink-2); }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label, .label { font-size: 13px; line-height: 18px; color: var(--ink-2); }
.input, textarea.input { height: 48px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); padding: 0 12px; width: 100%; }
textarea.input { height: auto; min-height: 168px; padding: 12px; resize: vertical; font: 400 18px/29px var(--serif); }
.input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.input[aria-invalid="true"] { border-color: var(--danger); }
.error { color: var(--danger); font-size: 13px; line-height: 18px; margin: 0; }
.status { margin: 0; }
.addrow { display: flex; gap: 8px; }
.addrow .btn2 { width: auto; }

/* rows, not cards */
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.row { display: flex; gap: 12px; align-items: flex-start; min-height: 56px; padding: 16px 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit; }
a.row:active, button.row:active { background: var(--surface); }
button.row { width: 100%; background: none; border-left: 0; border-right: 0; border-top: 0; text-align: left; cursor: pointer; }
.row .seal { margin-top: 3px; flex-shrink: 0; }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-title { font: 500 18px/26px var(--serif); }
.row-action { font-weight: 600; }
.row .when { font-size: 13px; line-height: 18px; color: var(--ink-2); flex-shrink: 0; }

/* segmented tabs: text only, active underlined */
.seg { display: flex; gap: 24px; border-bottom: 1px solid var(--rule); }
.seg button { background: none; border: 0; padding: 10px 0; min-height: 44px; color: var(--ink-2); cursor: pointer; font: 400 16px/24px var(--sans); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.seg button[aria-checked="true"], .seg button[aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }

/* the tab bar: three labelled items, never blue */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; background: var(--paper); border-top: 1px solid var(--rule); display: flex; justify-content: center; padding-bottom: env(safe-area-inset-bottom); z-index: 5; }
.tabbar a { flex: 1; max-width: 160px; text-align: center; padding: 12px 0; min-height: 48px; text-decoration: none; color: var(--ink-2); }
.tabbar a[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* the Record sits on surface */
body.surface { background: var(--surface); }
.record { background: var(--surface); }
.concern { border-left: 2px solid var(--amber); padding-left: 12px; display: flex; flex-direction: column; gap: 4px; }
.concern .tag { color: var(--amber); font-size: 13px; line-height: 18px; }
.action { display: flex; flex-direction: column; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.action:first-of-type { border-top: 1px solid var(--rule); }
.set-in { animation: set-in 500ms ease-out both; }
@keyframes set-in { from { opacity: 0; } to { opacity: 1; } }

/* the Seal: round caps, open arcs thin in ink-2, locked arcs full weight in blue */
.seal { display: block; overflow: visible; }
.seal path { fill: none; stroke-linecap: round; }
.seal .open { stroke: var(--ink-2); }
.seal .fill { stroke: var(--blue); }
.seal .closed { stroke: var(--ink); }
.seal .notch { stroke: var(--amber); transition: stroke-dashoffset 500ms ease-out; }
.seal .notch.closing { stroke-dashoffset: 100; }
.seal.live .open, .seal.live .fill, .seal.live .closed { stroke: var(--live-ink); }
.seal.live .open { stroke: var(--live-ink-2); }
.ring { background: none; border: 0; padding: 0; cursor: pointer; border-radius: 50%; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.ring[disabled] { cursor: default; }
.ring .fill.holding { transition: stroke-dashoffset 1200ms linear; }
.names { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 16px; width: 100%; text-align: center; }
.names .who { font-weight: 400; }
.names .you { font-weight: 600; }

/* the live state: the whole screen is blue, text in live-ink, nothing in a box */
body.live { background: var(--live-bg); color: var(--live-ink); }
body.live .meta, body.live .label { color: var(--live-ink-2); }
body.live :focus-visible { outline-color: var(--live-ink); }
body.live .seg { border-bottom-color: var(--live-ink-2); }
body.live .seg button { color: var(--live-ink-2); }
body.live .seg button[aria-selected="true"] { color: var(--live-ink); border-bottom-color: var(--live-ink); }
body.live .link { color: var(--live-ink); }
body.live .rows, body.live .row { border-color: var(--live-ink-2); }
.live-screen { flex: 1; width: 100%; max-width: 480px; margin: 0 auto; padding: 24px 20px 32px; display: flex; flex-direction: column; gap: 24px; }
.live-head { display: flex; align-items: center; gap: 12px; }
.nudge { font: 500 24px/31px var(--sans); margin: 0; }
.nudge-tag { font-size: 13px; line-height: 18px; color: var(--live-ink-2); }
.nudge-tag.concern-tag { color: var(--live-amber); }
.nudges { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 16px; min-height: 240px; }
.nudge-choices { display: flex; gap: 24px; }
.table-mode .nudge { font-size: 40px; line-height: 46px; letter-spacing: -0.02em; }
.hold { position: relative; overflow: hidden; background: none; color: var(--live-ink); border: 1px solid var(--live-ink); border-radius: 8px; min-height: 48px; width: 100%; font: 600 16px/24px var(--sans); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.hold .bar { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--live-ink); transform-origin: 0 50%; transform: scaleX(0); }
.hold.holding .bar { transform: scaleX(1); transition: transform 1200ms linear; }
.hold .label-text { position: relative; }
.controls { display: flex; gap: 24px; }
.video { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; min-height: 0; }
.tile { position: relative; aspect-ratio: 4 / 3; background: var(--live-bg); border: 1px solid var(--live-ink-2); border-radius: 8px; overflow: hidden; }
.tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile video.mirror { transform: scaleX(-1); }
.tile .name { position: absolute; left: 8px; bottom: 6px; font-size: 13px; line-height: 18px; color: var(--live-ink); }
.video.names-only { display: flex; flex-wrap: wrap; gap: 16px; }
.live-screen:not(.desk) .video { max-height: 40vh; overflow: hidden; }
details.row { display: block; }
details.row summary { cursor: pointer; min-height: 24px; }
details.row[open] p { margin-top: 12px; }
.transcript { list-style: none; margin: 0; padding: 0; }
.transcript li { padding: 12px 0; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 2px; }
body.live .transcript li { border-color: var(--live-ink-2); }

/* the flood: blue expands from the Seal until it covers the screen (800ms). The one orchestrated animation. */
.flood { position: fixed; z-index: 20; width: 300vmax; height: 300vmax; margin: -150vmax 0 0 -150vmax; border-radius: 50%; background: var(--live-bg); transform: scale(0); pointer-events: none; }
.flood.go { transform: scale(1); transition: transform 800ms ease-in-out; }
.flood.drain { transform: scale(0); transition: transform 800ms ease-in-out; }

/* bottom sheet: the only rounded-and-shadowed box */
.scrim { position: fixed; inset: 0; background: transparent; z-index: 10; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 88vh; overflow-y: auto; z-index: 11; background: var(--surface); color: var(--ink); border-radius: 14px 14px 0 0; box-shadow: var(--sheet-shadow); padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 16px; max-width: 560px; margin: 0 auto; }
.private { border-left: 2px solid var(--ink); padding-left: 12px; display: flex; flex-direction: column; gap: 8px; }
.answer { white-space: pre-wrap; }

.done-mark { display: flex; flex-direction: column; gap: 16px; align-items: center; }

/* desktop is two panes, not a stretched phone */
@media (min-width: 1024px) {
  .app.panes { display: grid; grid-template-columns: 400px 1fr; min-height: 100vh; }
  .left { border-right: 1px solid var(--rule); padding: 32px 24px; display: flex; flex-direction: column; gap: 16px; height: 100vh; position: sticky; top: 0; overflow-y: auto; }
  .left nav { display: flex; gap: 24px; }
  .left nav a { text-decoration: none; color: var(--ink-2); padding: 10px 0; }
  .left nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
  .left .row[aria-current="true"] { background: var(--surface); }
  .right { background: var(--surface); min-height: 100vh; }
  .right .screen { max-width: 960px; padding: 48px 48px 64px; }
  .right .record-cols { display: grid; grid-template-columns: minmax(0, 560px) minmax(260px, 1fr); gap: 48px; align-items: start; }
  .panes .tabbar { display: none; }
  .screen.has-tabs { padding-bottom: 32px; }
  .live-screen.desk { max-width: none; display: grid; grid-template-columns: 1fr 480px; gap: 32px; padding: 32px; min-height: 100vh; }
  .live-screen.desk .video { align-content: start; }
  .live-screen.desk .side { display: flex; flex-direction: column; gap: 24px; }
}
@media (max-width: 1023px) { .left { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .ring .fill.holding, .hold.holding .bar { transition-duration: 1200ms !important; transition-timing-function: linear !important; }
}