/* Three candidate looks, switched with <html data-look="night|banig|slip">.
   Layout is shared; each look only sets tokens plus a few signature touches. */

:root, [data-look="night"] {
  /* A. NIGHT SKY: Tala is the star goddess. Deep night ground, a warm star for an orb,
     notes on a cream index card with ruled lines. */
  --bg: #0d1322;
  --bg-2: #141c30;
  --ink: #f2ead8;
  --ink-2: #b9b2a0;
  --ink-3: #8a8676;
  --card: #f6efdf;
  --card-ink: #1f1a10;
  --card-ink-2: #5d5440;
  --card-rule: #e3d8bf;
  --accent: #f4b942;
  --accent-ink: #1f1a10;
  --flash: #ffe7a8;
  --focus: #f4b942;
  --orb-a: #f6c25a; --orb-b: #e0662e; --orb-core: #fff7df; --orb-halo: rgba(246, 194, 90, .22); --orb-style: glow;
  --f-display: 'Gloock', Georgia, serif;
  --f-body: 'Atkinson Hyperlegible', system-ui, sans-serif;
  --f-label: 'JetBrains Mono', ui-monospace, monospace;
  --f-value: 'Atkinson Hyperlegible', system-ui, sans-serif;
  --radius: 4px;
  --card-radius: 3px;
}

[data-look="banig"] {
  /* B. BANIG: the Filipino woven sleeping mat. Sun-bleached paper, terracotta, mustard and deep teal,
     a woven band as the frame, an orb with moving threads. */
  --bg: #f3e8d3;
  --bg-2: #ead9bb;
  --ink: #2a1f17;
  --ink-2: #5e4a39;
  --ink-3: #7d6650;
  --card: #fffaf0;
  --card-ink: #2a1f17;
  --card-ink-2: #6b5643;
  --card-rule: #ecdcc0;
  --accent: #1f5c5b;
  --accent-ink: #fffaf0;
  --flash: #f6dc9b;
  --focus: #c2502e;
  --orb-a: #c2502e; --orb-b: #e0a526; --orb-thread: rgba(255, 246, 225, .35); --orb-halo: rgba(194, 80, 46, .16); --orb-style: weave;
  --f-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --f-body: 'Bricolage Grotesque', system-ui, sans-serif;
  --f-label: 'Space Mono', ui-monospace, monospace;
  --f-value: 'Bricolage Grotesque', system-ui, sans-serif;
  --radius: 999px;
  --card-radius: 18px;
}

[data-look="slip"] {
  /* C. REQUISITION SLIP in Honor Health Network blues. Off-white paper, navy ink, HHN blue as the one signal.
     The orb is a navy ink blot that turns bright blue when you talk. */
  --bg: #f5f8fb;
  --bg-2: #e8f4fa;
  --ink: #0b2440;
  --ink-2: #33506e;
  --ink-3: #4a6684;
  --card: #fff;
  --card-ink: #0b2440;
  --card-ink-2: #4a6684;
  --card-rule: #c8d4e3;
  --accent: #0f54aa;
  --accent-ink: #fff;
  --flash: #e8f4fa;
  --focus: #1a92d0;
  --orb-a: #09315d; --orb-b: #1a92d0; --orb-halo: rgba(0, 0, 0, 0); --orb-style: ink;
  --f-display: 'Archivo', system-ui, sans-serif;
  --f-body: 'Archivo', system-ui, sans-serif;
  --f-label: 'Archivo', system-ui, sans-serif;
  --f-value: 'Courier Prime', ui-monospace, monospace;
  --radius: 0;
  --card-radius: 0;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.5 var(--f-body);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- top bar ---------- */
.top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px clamp(16px, 4vw, 48px);
}
.brand { display: flex; align-items: center; gap: 10px; }
.mark { width: 14px; height: 14px; background: var(--accent); display: inline-block;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.word { font: 400 28px/1 var(--f-display); letter-spacing: .01em; }
.kicker { font: 12px/1 var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- stage ---------- */
.stage {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  gap: clamp(24px, 4vw, 64px);
  padding: 8px clamp(16px, 4vw, 48px) 48px;
  max-width: 1360px; margin: 0 auto;
  align-items: start;
}
.talk { position: sticky; top: 16px; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 8px; }
.orb-wrap { position: relative; width: min(440px, 80vw); aspect-ratio: 1; }
#orb { width: 100%; height: 100%; display: block; }
.orb-state {
  position: absolute; left: 0; right: 0; bottom: 4%;
  font: 12px/1 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.intro { max-width: 30em; font-size: 19px; color: var(--ink-2); margin: 8px 0 0; text-wrap: pretty; }
.caption { min-height: 3em; max-width: 30em; margin: 8px 0 0; font-size: 19px; color: var(--ink); text-wrap: pretty; }
body:not(.in-call) .caption { display: none; }
.controls { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; justify-content: center; }
.mic-note { margin: 12px 0 0; font-size: 14px; color: var(--ink-3); min-height: 1.5em; }
.escape { margin-top: 36px; font-size: 15px; color: var(--ink-3); }

.btn {
  border: 2px solid transparent; cursor: pointer; padding: 14px 26px; border-radius: var(--radius);
  font-weight: 700; font-size: 16px; transition: transform .12s ease, background .2s;
}
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.primary:disabled { opacity: .4; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--ink); border-color: currentColor; }
.link { background: none; border: 0; padding: 0; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- notes card ---------- */
.notes {
  background: var(--card); color: var(--card-ink); border-radius: var(--card-radius);
  padding: 24px 24px 20px;
}
.notes-head { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid var(--card-ink); padding-bottom: 12px; margin-bottom: 4px; }
.notes-kicker { font: 11px/1 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--card-ink-2); }
.notes-title { font: 400 26px/1.15 var(--f-display); margin-top: 6px; }
.progress { font: 600 14px/1 var(--f-label); color: var(--card-ink-2); }
fieldset { border: 0; margin: 0; padding: 0; }
legend { font: 11px/1 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--card-ink-2); padding: 18px 0 6px; }

.field {
  display: grid; grid-template-columns: 9.5em 1fr; align-items: baseline; gap: 2px 12px;
  border-bottom: 1px solid var(--card-rule); padding: 6px 4px; border-radius: 2px; transition: background .6s;
  cursor: text;
}
.field .label { font-size: 13px; color: var(--card-ink-2); }
.field .label em { font-style: normal; opacity: .7; font-size: 11px; }
.field input, .field select, .field textarea {
  width: 100%; border: 0; background: transparent; color: var(--card-ink);
  font: 16px/1.4 var(--f-value); padding: 4px 0; resize: vertical; min-width: 0;
}
.field select { cursor: pointer; }
.field textarea { field-sizing: content; min-height: 1.6em; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; }
.field:focus-within { background: var(--bg-2); }
[data-look="night"] .field:focus-within { background: #efe5cd; }
.field.filled .label::before { content: '✓ '; color: var(--accent); font-weight: 700; }
[data-look="night"] .field.filled .label::before { color: #b77a12; }
.field.flash { animation: flash 1.6s ease-out; }
@keyframes flash { 0% { background: var(--flash); } 100% { background: transparent; } }
.field .private, .field .err { grid-column: 2; font-size: 12px; }
.field .private { color: var(--card-ink-2); }
.field .err { color: #b3261e; }
.field.err-on { background: #fdecea; }
.send-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; flex-wrap: wrap; }
.send-hint { margin: 0; font-size: 14px; color: var(--card-ink-2); }
.reviewing #sendBtn:not(:disabled) { animation: nudge 1.8s ease-in-out 3; }
@keyframes nudge { 50% { transform: scale(1.05); } }

/* ---------- look signatures ---------- */
[data-look="night"] body, [data-look="night"] {
  background: radial-gradient(1200px 600px at 25% 30%, #182544 0%, var(--bg) 60%) fixed, var(--bg);
}
[data-look="night"] .notes {
  background-image: repeating-linear-gradient(transparent 0 35px, rgba(31, 26, 16, .04) 35px 36px);
  box-shadow: 0 1px 0 #d9caa6, 0 30px 60px -30px rgba(0, 0, 0, .6);
}
[data-look="night"] .notes-head { border-bottom-color: #c9452f; }

[data-look="banig"] body {
  border-top: 14px solid; border-image: repeating-linear-gradient(45deg, #c2502e 0 10px, #e0a526 10px 20px, #1f5c5b 20px 30px, #f3e8d3 30px 34px) 14;
}
[data-look="banig"] .notes { border: 2px solid var(--card-ink); box-shadow: 8px 8px 0 #c2502e; }
[data-look="banig"] .notes-title { font-weight: 800; letter-spacing: -.02em; }
[data-look="banig"] .word { font-weight: 800; letter-spacing: -.03em; }
[data-look="banig"] .mark { background: #c2502e; }
[data-look="banig"] .btn.ghost { border-color: var(--ink); }

[data-look="slip"] .notes { border: 1px solid #0b2440; box-shadow: 6px 6px 0 #0b2440; }
[data-look="slip"] .notes-head { border-bottom: 3px double #0b2440; }
[data-look="slip"] .notes-title { font-weight: 800; text-transform: uppercase; letter-spacing: .02em; font-size: 22px; }
[data-look="slip"] .word { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 24px; }
[data-look="slip"] .mark { background: var(--accent); clip-path: circle(50%); }
[data-look="slip"] .field { border-bottom-style: dashed; }
[data-look="slip"] .field.filled .label::before { color: var(--accent); }

/* ---------- done overlay ---------- */
.done { position: fixed; inset: 0; background: color-mix(in srgb, var(--bg) 88%, transparent); display: grid; place-items: center; padding: 16px; z-index: 10; }
.done-card { background: var(--card); color: var(--card-ink); padding: 32px; max-width: 520px; border-radius: var(--card-radius); }
.done-card h2 { font: 400 28px/1.2 var(--f-display); margin: 10px 0; }
.done-card p { color: var(--card-ink-2); }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .stage { grid-template-columns: 1fr; }
  .talk { position: static; }
  .orb-wrap { width: min(300px, 70vw); }
  .escape { margin-top: 20px; }
  .form-mode .orb-wrap, .form-mode .intro { display: none; }
}
@media (max-width: 520px) {
  .field { grid-template-columns: 1fr; }
  .field .private, .field .err { grid-column: 1; }
  .notes { padding: 18px 16px; }
  .kicker { display: none; }
}

/* ---------- chooser (first screen) ---------- */
.chooser {
  position: fixed; inset: 0; z-index: 20; background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px 16px; text-align: center; overflow: hidden;
}
.chooser-brand { position: absolute; top: 20px; left: clamp(16px, 4vw, 48px); display: flex; align-items: center; gap: 10px; }
.chooser-q { font: 800 clamp(30px, 4.6vw, 54px)/1.08 var(--f-display); letter-spacing: -.01em; margin: 0 0 clamp(28px, 6vh, 56px); max-width: 16em; text-wrap: balance; }
.choices { display: flex; gap: clamp(24px, 6vw, 96px); flex-wrap: wrap; justify-content: center; }
.choice {
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  animation: bob 4s ease-in-out infinite;
}
.choice:nth-child(2) { animation-delay: -2s; }
@keyframes bob { 50% { transform: translateY(-8px); } }
.bubble {
  width: clamp(240px, min(32vw, 46vh), 400px); aspect-ratio: 1; border-radius: 50%; position: relative;
  background: #fff; border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
  display: grid; place-items: center; margin-bottom: 14px;
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s;
}
.bubble img { width: 74%; height: auto; display: block; position: relative; }

/* entrance: words rise one by one, bubbles pop in with a springy overshoot, a ring draws around each,
   */
.chooser-q span { display: inline-block; opacity: 0; animation: rise .6s cubic-bezier(.2,.8,.2,1) forwards; }
.chooser-q span:nth-child(1) { animation-delay: .05s; } .chooser-q span:nth-child(2) { animation-delay: .12s; }
.chooser-q span:nth-child(3) { animation-delay: .19s; } .chooser-q span:nth-child(4) { animation-delay: .26s; }
.chooser-q span:nth-child(5) { animation-delay: .33s; } .chooser-q span:nth-child(6) { animation-delay: .40s; }
@keyframes rise { from { opacity: 0; transform: translateY(28px) rotate(4deg); } to { opacity: 1; transform: none; } }
.bubble { animation: pop .9s cubic-bezier(.34,1.56,.64,1) backwards; }
.choice:nth-child(1) .bubble { animation-delay: .55s; }
.choice:nth-child(2) .bubble { animation-delay: .75s; }
@keyframes pop { 0% { opacity: 0; transform: scale(.2) rotate(-25deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.choice-label, .choice-sub, .chooser-foot { opacity: 0; animation: fade .5s ease forwards 1.3s; }
@keyframes fade { to { opacity: 1; } }
.ring { position: absolute; inset: -14px; width: calc(100% + 28px); height: calc(100% + 28px); pointer-events: none; transform: rotate(-90deg); }
.ring circle { fill: none; stroke: var(--accent); stroke-width: .6; stroke-dasharray: 305; stroke-dashoffset: 305; animation: draw 1.1s cubic-bezier(.65,0,.35,1) forwards; }
.choice:nth-child(1) .ring circle { animation-delay: 1.1s; }
.choice:nth-child(2) .ring circle { animation-delay: 1.3s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.choice:nth-child(2) @keyframes spin { to { transform: rotate(360deg); } }
.opening .ring { opacity: 0 !important; transition: opacity .2s; }
@media (prefers-reduced-motion: reduce) {
  .chooser-q span, .bubble, .choice-label, .choice-sub, .chooser-foot { animation: none; opacity: 1; }
  .ring circle { animation: none; stroke-dashoffset: 0; } }
.choice:hover .bubble, .choice:focus-visible .bubble { transform: scale(1.06) rotate(-3deg); box-shadow: 9px 9px 0 var(--accent); }
.choice:active .bubble { transform: scale(.97); }
.choice:focus-visible { outline: none; }
.choice:focus-visible .bubble { outline: 3px solid var(--focus); outline-offset: 6px; }
.choice-label { font: 800 26px/1.1 var(--f-display); }
.choice-sub { font-size: 16px; color: var(--ink-3); max-width: 15em; }
.chooser-foot { margin-top: clamp(28px, 6vh, 56px); color: var(--ink-3); font-size: 15px; }
.opening .choice { animation: none; }
.opening .chooser { pointer-events: none; }

/* stage stays hidden behind the chooser until the bubble lands */
body:not(.opened) .top, body:not(.opened) .stage { opacity: 0; }
.opened .top, .opened .stage { opacity: 1; transition: opacity .45s ease; }
.top-right { display: flex; align-items: center; gap: 14px; }
.track-logo { height: 30px; width: auto; }
.track-logo:not([src]) { display: none; }
.escape.small { margin-top: 8px; font-size: 14px; }
@media (max-width: 520px) {
  .choices { gap: 20px; }
  .bubble { width: 170px; box-shadow: 4px 4px 0 var(--ink); }
  .choice-label { font-size: 19px; }
  .track-logo { height: 24px; }
}