:root {
  /* the whole palette turns on these three; a theme swap is a hue change */
  --hue: 130;         /* the kit's green — #6E7F5E lit, #4E5C41 deep */
  --hue-warm: 79;     /* washi paper and the ink it carries */
  --hue-amber: 66;

  --bg: oklch(97.7% 0.007 81);
  --surface: oklch(100% 0 0);
  --raised: oklch(94% 0.017 79);
  --line: oklch(91% 0.018 78);
  /* the kit's lightest rule is 1.5:1 — enough for a divider, not for a control's only boundary (1.4.11) */
  --field: oklch(60% 0.018 var(--hue-warm));
  --ink: oklch(26.1% 0.01 89);
  --muted: oklch(50.9% 0.017 81);
  /* 2.8:1 on paper, so it carries dots and rules there and text only on --night */
  --faint: oklch(67.1% 0.017 74);
  --on-brand: oklch(97.7% 0.007 81);
  --brand: oklch(45.5% 0.046 var(--hue));
  --brand-deep: oklch(38% 0.045 var(--hue));
  --brand-lit: oklch(57.3% 0.053 var(--hue));
  --brand-soft: oklch(94.2% 0.016 127);
  --wood: oklch(55% 0.065 70);
  --wood-light: oklch(74.6% 0.06 76);
  --night: oklch(25.3% 0.006 78);
  --night-soft: oklch(30.8% 0.01 74);
  --warn: oklch(48% 0.1 var(--hue-amber));
  --warn-bg: oklch(94% 0.045 85);
  --warn-lit: oklch(65.2% 0.099 var(--hue-amber));
  --danger: oklch(47% 0.17 25);

  /* the kit's own ramp, 1:1 — cap 12, bs 13, bm 15, bl/hs 17, hm 20, hl 26, hero 32 */
  --t-cap: .75rem;
  --t-bs: .8125rem;
  --t-sm: .9375rem;
  --t-base: 1.0625rem;
  --t-md: 1.25rem;
  --t-lg: 1.625rem;
  --t-hero: 2rem;

  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;

  /* comfortable Japanese measure — a glyph is 1em, so ch would halve this */
  --measure: 34em;

  --r-pill: 999px;
  --r-card: 20px;
  --r-field: 14px;

  --sans: "Zen Kaku Gothic New", system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  --mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

@media (min-width: 40rem) {
  :root { --t-hero: 3.75rem; --t-lg: 2.75rem; --t-base: 1.125rem; }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  background: var(--bg);
  color: var(--ink);
  font: var(--t-base)/2 var(--sans);
  letter-spacing: .01em;
  /* wraps Japanese at phrase boundaries instead of mid-word */
  word-break: auto-phrase;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--brand-soft); color: var(--ink); }

main { display: flex; flex-direction: column; min-height: 100dvh; }

/* auto margins centre a short screen without ever clipping a tall one */
main > section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 27rem;
  min-height: 100dvh;
  margin: 0 auto;
  padding: var(--s-7) var(--s-5) var(--s-6);
}

/* an auto top margin beats justify-content, so the action falls to the foot and the copy rises */
#mic-start, #start-call, #nopartner-retry, #error-retry, #call .row { margin-top: auto; }
#entry-form, #survey-form { display: flex; flex: 1; flex-direction: column; }
#entry-form button[type="submit"], #survey-form button[type="submit"] { margin-top: auto; }

section:not([hidden]) { animation: rise 220ms var(--ease) both; }

@keyframes rise {
  from { opacity: 0; translate: 0 12px; }
}

h1, h2, h3 { margin: 0 0 var(--s-3); font-weight: 500; text-wrap: balance; }
h1 { font-size: var(--t-lg); line-height: 1.68; letter-spacing: -.005em; }
h2 { font-size: var(--t-md); line-height: 1.72; }
h3 { font-size: var(--t-base); line-height: 1.72; }
p { margin: 0; text-wrap: pretty; }

.lead { color: var(--muted); margin-bottom: var(--s-5); }
.hint { display: inline-block; font-size: var(--t-cap); color: var(--muted); margin: var(--s-2) 0; line-height: 1.8; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  width: max-content;
  padding: .55rem var(--s-4);
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  color: var(--brand);
  font-size: var(--t-cap);
  letter-spacing: .02em;
}

.pill.amber { background: var(--warn-bg); color: var(--warn); }
.pill.amber::before { background: var(--warn); animation: pulse 1.8s ease-in-out infinite; }

@keyframes pulse {
  50% { opacity: .3; }
}

.pill::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-lit);
}

.card {
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
}

/* the round mark that opens every closing screen — decorative, never load-bearing */
.orb {
  display: grid;
  place-items: center;
  width: 7.5rem;
  height: 7.5rem;
  margin: 0 auto var(--s-5);
  border-radius: 50%;
  background: var(--brand-soft);
}

.orb::before {
  content: "";
  width: 2.75rem;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
}

.orb.wait { background: var(--raised); }
.orb.wait::before { background: var(--wood-light); }

#thanks, #nopartner, #error { text-align: center; }

/* ---- controls ---- */

label {
  display: block;
  margin: var(--s-5) 0 var(--s-2);
  font-size: var(--t-cap);
  letter-spacing: .05em;
  color: var(--muted);
}

input, select, textarea {
  width: 100%;
  min-height: 52px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--field);
  border-radius: var(--r-field);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

textarea { min-height: 0; line-height: 1.8; resize: vertical; }

button {
  width: 100%;
  min-height: 60px;
  margin-top: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: var(--on-brand);
  font: 500 var(--t-base)/1.4 var(--sans);
  letter-spacing: .02em;
  cursor: pointer;
  transition: background 160ms var(--ease), transform 160ms var(--ease),
              border-color 160ms var(--ease), color 160ms var(--ease);
}

button.ghost { background: transparent; border: 1px solid var(--field); color: var(--ink); }
button.ghost.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
button.danger { background: var(--warn-lit); color: var(--night); }

@media (hover: hover) and (pointer: fine) {
  input:hover, select:hover, textarea:hover { border-color: var(--brand); }
  button:hover { background: var(--brand-deep); transform: translateY(-1px); }
  button.ghost:hover { background: var(--raised); border-color: var(--brand); }
  button.danger:hover { background: oklch(59% 0.099 66); }
}

/* the lift has to be cancelled here or the press reads as a hover that shrank */
button:active { transform: translateY(0) scale(.98); }

button:disabled {
  background: var(--raised);
  color: var(--muted);
  cursor: not-allowed;
  transform: none;
}

:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
/* the heading takes focus on a screen change; it is a destination, not a control */
h1:focus { outline: none; }

.row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.row button { flex: 1 1 9rem; }

.error { color: var(--danger); font-size: var(--t-cap); line-height: 1.8; }
.error .hint { color: var(--muted); }

#mic-denied {
  margin-top: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--danger);
  border-radius: var(--r-card);
  background: oklch(97% 0.02 25);
}

/* ---- mic permission ---- */

.micring {
  position: relative;
  display: grid;
  place-items: center;
  width: 9.5rem;
  height: 9.5rem;
  margin: var(--s-6) auto;
  border-radius: 50%;
  background: var(--brand-soft);
}

.micring::before {
  content: "";
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background: var(--brand);
}

.micring::after {
  content: "";
  position: absolute;
  width: 1rem;
  height: 1.75rem;
  border-radius: var(--r-pill);
  background: var(--on-brand);
}

/* ---- ready: the house rules ---- */

.rules {
  margin: 0 0 var(--s-2);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  list-style: none;
  overflow: hidden;
}

.rules li {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--t-sm);
  line-height: 1.8;
}

.rules li:first-child { border-top: 0; }

.rules li::before {
  content: "○";
  flex: none;
  width: 1em;
  color: var(--brand);
}

.rules li.no::before { content: "×"; color: var(--danger); }

/* ---- waiting ---- */

#waiting .pill { margin-bottom: var(--s-4); }
#waiting h1 { font-size: var(--t-lg); }

.waited { display: flex; align-items: center; gap: var(--s-3); color: var(--muted); font-size: var(--t-cap); }

/* three fading dots, the way a search reads as still running */
.dots {
  position: relative;
  width: 5px;
  height: 5px;
  margin-right: 1.125rem;
}

.dots, .dots::before, .dots::after {
  border-radius: 50%;
  background: var(--wood-light);
  animation: fade 1.4s ease-in-out infinite;
}

.dots::before, .dots::after {
  content: "";
  position: absolute;
  top: 0;
  width: 5px;
  height: 5px;
}

.dots::before { left: 9px; animation-delay: .16s; }
.dots::after { left: 18px; animation-delay: .32s; }

@keyframes fade {
  50% { opacity: .25; }
}

.wait-card {
  margin: var(--s-5) 0 var(--s-4);
  padding: var(--s-4);
  border-radius: 24px;
  background: var(--night);
}

.slot-label {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  padding: 0 var(--s-2);
  color: var(--faint);
  font-size: var(--t-cap);
  letter-spacing: .06em;
}

.slot-label::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--wood-light);
}

.video-slot {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  background: var(--night-soft);
  color: var(--faint);
  font-size: var(--t-cap);
  letter-spacing: .12em;
  overflow: hidden;
}

/* the slot is a fixed frame; whatever the operator publishes has to sit inside it */
.video-slot video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--night-soft);
}

/* the level bar lives on the card, so it reads as "your mic is live" and not as a stray rule */
.mic-line {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding: 0 var(--s-2);
  color: var(--faint);
  font-size: var(--t-cap);
}

.meter {
  flex: 1;
  height: .25rem;
  border-radius: var(--r-pill);
  background: var(--night-soft);
  overflow: hidden;
}

#mic-level {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--brand-lit);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 60ms linear;
}

.note { margin-top: auto; padding-top: var(--s-6); color: var(--muted); font-size: var(--t-cap); text-align: center; }

/* ---- the conversation, the one screen that goes dark ---- */

#call {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--night);
  color: var(--on-brand);
  /* a fixed overlay would be trapped by the rise animation's own containing block; a shadow is not */
  box-shadow: 0 0 0 100vmax var(--night);
}

#call :focus-visible { outline-color: var(--on-brand); }

.partner {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  width: max-content;
  margin: 0 0 var(--s-6);
  padding: .55rem var(--s-4);
  border-radius: var(--r-pill);
  background: var(--night-soft);
  color: var(--on-brand);
  font-size: var(--t-cap);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .02em;
}

.partner::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-lit);
}

.partner strong { font-weight: 500; }

/* the halo is the light the clock sits in — it is the whole screen */
.halo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  align-self: center;
  width: min(19rem, 84vw);
  aspect-ratio: 1;
  margin-bottom: var(--s-6);
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    oklch(62% 0.07 130 / .42), oklch(60% 0.06 130 / .14) 60%, transparent 78%);
}

/* the amber sits on top and fades in; transitioning the gradient itself repaints the whole circle */
.halo::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle closest-side,
    oklch(68% 0.12 66 / .4), oklch(65% 0.1 66 / .13) 60%, transparent 78%);
  opacity: 0;
  transition: opacity 600ms var(--ease);
}

#call.warn .halo::before { opacity: 1; }

.halo > * { position: relative; }

/* the halo carries the clock and the one line under it, and nothing else */
.halo-note {
  max-width: 14rem;
  color: var(--faint);
  font-size: var(--t-cap);
  line-height: 1.8;
}

.halo-note.on-warn, #call.warn .halo-note { display: none; }
#call.warn .halo-note.on-warn { display: block; }

.countdown {
  margin: 0;
  font-weight: 300;
  /* the kit sets 76px, but that overflows a 200%-zoomed phone and DESIGN.md requires 200% to work */
  font-size: min(4.75rem, 26vw);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  transition: color 400ms var(--ease);
}

#call.warn .countdown { color: var(--warn-lit); }

.warning {
  display: inline-block;
  margin-bottom: var(--s-3);
  padding: .5rem var(--s-4);
  border-radius: var(--r-pill);
  background: var(--night-soft);
  color: var(--warn-lit);
  font-size: var(--t-cap);
  letter-spacing: .02em;
}

#call .row { width: 100%; }

/* the mute control doubles as the mic-state readout the kit puts on this screen */
#mute.mic::before {
  content: "";
  width: 9px;
  height: 15px;
  margin-right: var(--s-2);
  border-radius: 5px;
  background: currentColor;
}

#mute.mic { display: flex; align-items: center; justify-content: center; }
#call button.ghost { border-color: var(--faint); color: var(--on-brand); }
#call button.ghost.on { background: var(--night-soft); border-color: var(--brand-lit); color: var(--on-brand); }

@media (hover: hover) and (pointer: fine) {
  #call button.ghost:hover { background: var(--night-soft); border-color: var(--on-brand); }
}

#audio-blocked { background: var(--bg); color: var(--ink); }

/* ---- survey ---- */

#questions label {
  margin: 0;
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: var(--t-base);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.72;
}

#questions label:first-child { padding-top: 0; border-top: 0; }
#questions textarea { margin: var(--s-3) 0 var(--s-5); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  button:active { transform: none; }
}