/* ==========================================================================
   Beyond Design Roundtable · brand.css
   Hike One house style. Light theme only. No framework, no build step.

   FONT: Epilogue 300 / 400 / 500 / 700 (OFL). Self-hosted from ../fonts so the
   stage still renders on a bad venue wifi. If you prefer Google Fonts instead,
   delete the four @font-face blocks below and add this to <head> of each view:
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Epilogue:wght@300;400;500;700&display=swap" rel="stylesheet">
   (CSS equivalent: @import url("https://fonts.googleapis.com/css2?family=Epilogue:wght@300;400;500;700&display=swap");)

   SECTIONS
     1 Fonts        2 Tokens        3 Base         4 Shared components
     5 Stage        6 Phone         7 Presenter    8 Preview helpers (design-preview only)

   RULES THAT MATTER
   - Orange (--c-sun) is a FILL, never text: on Sand it is ~2:1. Text on orange = Charcoal.
   - Coral (--c-coral) is a FILL or an icon, never body text. Text on coral = Charcoal.
   - Marine text on Sand/White is fine (~6:1). White text on Marine is fine.
   - Orange means ONE thing per chart: "you" on distribution charts (.you),
     "leading" on vote contests (.lead). Never both in the same chart.
   - State is never colour only: selected = fill + check icon, error = icon + words.
   ========================================================================== */

/* ---------- 1 Fonts ---------- */
@font-face{font-family:"Epilogue";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/epilogue-300.ttf") format("truetype")}
@font-face{font-family:"Epilogue";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/epilogue-400.ttf") format("truetype")}
@font-face{font-family:"Epilogue";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/epilogue-500.ttf") format("truetype")}
@font-face{font-family:"Epilogue";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/epilogue-700.ttf") format("truetype")}

/* ---------- 2 Tokens ---------- */
:root{
  /* brand */
  --c-marine:#0046FF;      /* primary / accent / data */
  --c-sun:#FFA011;         /* "you" / leading item (fill only) */
  --c-coral:#F55052;
  --c-sand:#FCF5EE;        /* default background */
  --c-clay:#F1E8DF;        /* panels, chart tracks */
  --c-white:#FFFFFF;
  --c-charcoal:#1D1D1D;    /* text */
  /* support (from Colors.pdf) */
  --c-success:#81CE16;
  --c-info:#0046FE;
  --c-warning:#FFA011;
  --c-error:#F55052;
  /* secondary: sparingly, currently unused */
  --c-electric:#00DDF6;
  --c-magenta:#FF59FF;
  /* derived (not in the PDF; documented in design.md) */
  --c-ink:var(--c-charcoal);
  --c-ink-2:color-mix(in srgb,var(--c-charcoal) 66%,var(--c-sand));  /* secondary text, 5.2:1 on Sand */
  --c-line:color-mix(in srgb,var(--c-charcoal) 14%,var(--c-sand));   /* hairlines, input borders */
  --c-clay-deep:color-mix(in srgb,var(--c-clay) 86%,var(--c-charcoal)); /* track on a Clay panel */
  --c-today:rgba(29,29,29,.22);                                       /* ladder "today" */
  --c-marine-tint:color-mix(in srgb,var(--c-marine) 10%,var(--c-white));

  /* type */
  --font:"Epilogue",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --w-light:300;--w-regular:400;--w-medium:500;--w-bold:700;
  --tr-title:-.035em;      /* big headings */
  --tr-ui:-.005em;
  --tr-label:.06em;        /* uppercase labels */

  /* spacing (phone + presenter; stage uses --u multiples) */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;
  /* radii */
  --r-sm:8px;--r-md:16px;--r-lg:28px;--r-pill:999px;
  /* phone type scale */
  --ph-q:30px;       /* question */
  --ph-body:17px;    /* options, inputs (>=16 so iOS never zooms) */
  --ph-hint:15px;
  --ph-label:13px;   /* uppercase labels, the only place bold+small is used */
  --tap:56px;        /* option height; 48px is the hard floor */
  /* presenter type scale */
  --pr-title:28px;--pr-body:18px;--pr-ask:24px;--pr-small:14px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- 3 Base ---------- */
[hidden]{display:none!important}   /* beats .banner/.tabcue/.held display rules */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--c-sand);color:var(--c-ink);font-family:var(--font);font-weight:var(--w-regular);
  line-height:1.4;letter-spacing:var(--tr-ui);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
button,input,textarea,select{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus{outline:none}
:focus-visible{outline:3px solid var(--c-marine);outline-offset:3px;border-radius:inherit}
.on-marine :focus-visible,.btn--primary:focus-visible,.opt[aria-pressed="true"]:focus-visible,.opt.on:focus-visible{outline-color:var(--c-charcoal);outline-offset:3px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- 4 Shared components ---------- */

/* icons: mask based so they take currentColor. Usage: <span class="icon i-check" aria-hidden="true"></span> */
.icon{display:inline-block;flex:none;width:1.25em;height:1.25em;background:currentColor;
  -webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.i-arrow-right{--icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='152 30 62 62' fill='black' aria-hidden='true'><path d='M156.078 64.9623C154.028 64.9623 152.366 63.3003 152.366 61.25C152.366 59.1998 154.028 57.5377 156.078 57.5377H203.278L183.125 37.3852C181.661 35.9207 181.661 33.5463 183.125 32.0818C184.589 30.6174 186.964 30.6174 188.428 32.0818L209.111 52.7647C213.797 57.451 213.797 65.049 209.111 69.7353L188.428 90.4182C186.964 91.8826 184.589 91.8826 183.125 90.4182C181.661 88.9537 181.661 86.5793 183.125 85.1149L203.278 64.9623H156.078Z'/></svg>")}
.i-check{--icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'><path d='M4.5 12.5l5 5L19.5 7'/></svg>")}
.i-plus{--icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'><path d='M12 4.5v15M4.5 12h15'/></svg>")}
.i-tab-switch{--icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'><rect x='3.5' y='6.5' width='13' height='11' rx='2.5'/><path d='M8 3.5h10.5a2 2 0 0 1 2 2V14'/><path d='M13 12h8m0 0l-3-3m3 3l-3 3'/></svg>")}
.i-wifi-off{--icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'><path d='M3 3l18 18'/><path d='M5 10.2a10 10 0 0 1 4-2.3M19 10.2a10 10 0 0 0-5-2.6'/><path d='M8.5 13.8a5.5 5.5 0 0 1 3.5-1.3M15.5 13.8a5.5 5.5 0 0 0-1.5-.9'/><path d='M12 18.2h.01'/></svg>")}
.i-x{--icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'><path d='M6 6l12 12M18 6L6 18'/></svg>")}
:root{--i-arrow-right:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='152 30 62 62' fill='black' aria-hidden='true'><path d='M156.078 64.9623C154.028 64.9623 152.366 63.3003 152.366 61.25C152.366 59.1998 154.028 57.5377 156.078 57.5377H203.278L183.125 37.3852C181.661 35.9207 181.661 33.5463 183.125 32.0818C184.589 30.6174 186.964 30.6174 188.428 32.0818L209.111 52.7647C213.797 57.451 213.797 65.049 209.111 69.7353L188.428 90.4182C186.964 91.8826 184.589 91.8826 183.125 90.4182C181.661 88.9537 181.661 86.5793 183.125 85.1149L203.278 64.9623H156.078Z'/></svg>");--i-check:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'><path d='M4.5 12.5l5 5L19.5 7'/></svg>");--i-plus:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'><path d='M12 4.5v15M4.5 12h15'/></svg>");--i-tab-switch:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'><rect x='3.5' y='6.5' width='13' height='11' rx='2.5'/><path d='M8 3.5h10.5a2 2 0 0 1 2 2V14'/><path d='M13 12h8m0 0l-3-3m3 3l-3 3'/></svg>");--i-wifi-off:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'><path d='M3 3l18 18'/><path d='M5 10.2a10 10 0 0 1 4-2.3M19 10.2a10 10 0 0 0-5-2.6'/><path d='M8.5 13.8a5.5 5.5 0 0 1 3.5-1.3M15.5 13.8a5.5 5.5 0 0 0-1.5-.9'/><path d='M12 18.2h.01'/></svg>");--i-x:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'><path d='M6 6l12 12M18 6L6 18'/></svg>");}



/* eyebrow: small uppercase label (bold is allowed here) */
.eyebrow{font-weight:var(--w-bold);text-transform:uppercase;letter-spacing:var(--tr-label);color:var(--c-marine)}

/* buttons (phone + presenter). pill shaped. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:48px;padding:0 var(--sp-5);
  border:2px solid var(--c-line);border-radius:var(--r-pill);background:var(--c-white);color:var(--c-ink);
  font-weight:var(--w-medium);font-size:var(--ph-body);line-height:1;transition:background .15s,border-color .15s,transform .1s}
.btn:hover{border-color:var(--c-charcoal)}
.btn:active{transform:scale(.98)}
.btn--primary{background:var(--c-marine);border-color:var(--c-marine);color:var(--c-white)}
.btn--primary:hover{background:#0039D1;border-color:#0039D1}
.btn--ghost{background:transparent;border-color:transparent;color:var(--c-marine)}
.btn--ghost:hover{background:var(--c-marine-tint);border-color:transparent}
.btn--block{display:flex;width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.4;cursor:not-allowed;transform:none}

/* connection dot: <span class="conn ok" role="status"><i></i><span class="conn-label">Live</span></span>
   states: .ok (green) .warn (orange, pulsing) .off (coral). Label is visible only when not .ok. */
.conn{display:inline-flex;align-items:center;gap:.5em;font-weight:var(--w-medium);color:var(--c-ink-2)}
.conn>i{width:.8em;height:.8em;border-radius:50%;background:var(--c-success);flex:none}
.conn.warn>i{background:var(--c-sun);animation:pulse 1.2s ease-in-out infinite}
.conn.off>i{background:var(--c-coral)}
.conn.ok .conn-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@keyframes pulse{50%{opacity:.35;transform:scale(.8)}}

/* status banner (phone, also fine on presenter):
   <div class="banner banner--warn" role="status"><span class="icon i-wifi-off"></span><span class="banner-text">Reconnecting…</span><button class="btn btn--ghost">Retry</button></div> */
.banner{display:flex;align-items:center;gap:var(--sp-3);min-height:44px;padding:var(--sp-2) var(--sp-4);font-size:15px;font-weight:var(--w-medium);line-height:1.25;color:var(--c-charcoal)}
.banner .banner-text{flex:1;min-width:0}
.banner .btn,.phone .banner .btn{min-height:48px;padding:0 var(--sp-4);font-size:15px;border-color:rgba(29,29,29,.5);color:var(--c-charcoal);background:transparent}
.banner--warn{background:var(--c-sun)}
.banner--error{background:var(--c-coral)}
.banner--ok{background:var(--c-success)}
.banner--info{background:var(--c-clay)}
.banner--warn .icon{animation:pulse 1.2s ease-in-out infinite}

/* tool chips: <span class="chip">Claude<b>8</b></span> */
.chip{display:inline-flex;align-items:center;gap:.5em;padding:.3em .4em .3em .85em;border-radius:var(--r-pill);background:var(--c-white);border:1.5px solid var(--c-line);font-weight:var(--w-medium);white-space:nowrap}
.chip b{display:inline-grid;place-items:center;min-width:1.7em;height:1.7em;padding:0 .4em;border-radius:var(--r-pill);background:var(--c-marine);color:var(--c-white);font-weight:var(--w-bold);font-size:.8em}
.chip--plain{padding:.3em .85em}

/* ---------- 5 Stage (projector) ----------
   Everything is sized in --u (1u = 1px at 1920x1080). --u follows the viewport, so
   1280x720 gives 0.667px per u. Floors at 1280: body 24px, titles 56px, labels 20px. */
.stage{--u:min(calc(100vw/1920),calc(100vh/1080));--track:var(--c-clay);
  position:relative;width:100vw;height:100vh;overflow:hidden;background:var(--c-sand);color:var(--c-ink);
  font-size:calc(36*var(--u));line-height:1.25;letter-spacing:-.01em}
.stage-main{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;gap:calc(32*var(--u));padding:calc(60*var(--u)) calc(96*var(--u)) calc(52*var(--u))}
.stage-head .eyebrow{font-size:calc(30*var(--u));margin-bottom:calc(12*var(--u))}
.stage h2{font-size:calc(84*var(--u));font-weight:var(--w-regular);line-height:1.02;letter-spacing:var(--tr-title);max-width:calc(1600*var(--u));text-wrap:balance}
.stage-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:calc(20*var(--u));overflow:hidden}
.stage-foot{display:flex;align-items:baseline;justify-content:space-between;gap:calc(48*var(--u));min-height:calc(56*var(--u));padding-top:calc(22*var(--u));border-top:calc(2*var(--u)) solid var(--c-line)}
.stage .insight{font-size:calc(40*var(--u));font-weight:var(--w-medium);letter-spacing:-.02em;line-height:1.15;display:flex;gap:calc(16*var(--u));align-items:baseline}
.stage .insight::before{content:"";flex:none;width:calc(18*var(--u));height:calc(18*var(--u));background:var(--c-marine);border-radius:50%;transform:translateY(calc(-3*var(--u)))}
.stage .count{font-size:calc(32*var(--u));color:var(--c-ink-2);white-space:nowrap}
.stage .count b{color:var(--c-ink);font-weight:var(--w-bold)}
.stage .conn{position:absolute;z-index:2;top:calc(28*var(--u));right:calc(36*var(--u));font-size:calc(28*var(--u))}
.stage .conn.ok{opacity:.55}
.stage .sub{font-size:calc(30*var(--u));font-weight:var(--w-bold);text-transform:uppercase;letter-spacing:var(--tr-label);color:var(--c-ink-2);margin:0 0 calc(10*var(--u))}
.stage .sub .you-key{color:var(--c-ink)}
/* split layout: heading left, content right (ladder, summary) */
.stage--split .stage-main{display:grid;grid-template-columns:minmax(0,.31fr) minmax(0,.69fr);grid-template-rows:1fr auto;column-gap:calc(72*var(--u));row-gap:calc(24*var(--u))}
.stage--split .stage-head{grid-row:1;grid-column:1;align-self:start}
.stage--split h2{font-size:calc(84*var(--u))}
.stage--split .stage-body{grid-row:1;grid-column:2}
.stage--split .stage-foot{grid-row:2;grid-column:1 / -1}

/* bars: <div class="bars"><div class="bar you"><span class="bl">Label</span><span class="bt"><span class="bf" style="width:62%"></span></span><span class="bn">9</span></div></div> */
.stage .bars{display:flex;flex-direction:column;gap:calc(10*var(--u))}
.stage .bar{display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1fr) calc(70*var(--u));align-items:center;gap:calc(24*var(--u))}
.stage .bl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage .bt{display:block;height:calc(36*var(--u));background:var(--track);border-radius:var(--r-pill);overflow:hidden}
.stage .bf{display:block;height:100%;min-width:calc(14*var(--u));background:var(--c-marine);border-radius:var(--r-pill);transition:width .5s var(--ease)}
.stage .bn{text-align:right;font-weight:var(--w-bold)}
.stage .bar.you .bf{background:var(--c-sun)}
/* stacked variant for long labels (barriers): label over track, number at the end of the label line */
.stage .bars--stack{gap:calc(6*var(--u))}
.stage .bars--stack .bar{grid-template-columns:minmax(0,1fr) auto;row-gap:calc(4*var(--u));column-gap:calc(16*var(--u))}
.stage .bars--stack .bl{grid-column:1;font-size:calc(30*var(--u));line-height:1.15}
.stage .bars--stack .bn{grid-column:2;grid-row:1;font-size:calc(30*var(--u))}
.stage .bars--stack .bt{grid-column:1 / -1;grid-row:2;height:calc(14*var(--u))}
.stage .bgrid{column-count:2;column-fill:balance;column-gap:calc(64*var(--u))}
.stage .bgroup{break-inside:avoid;margin-bottom:calc(10*var(--u))}
.stage .bgroup .sub{margin-bottom:calc(10*var(--u))}
/* "added by the room" label on open lists */
.stage .added-by{color:var(--c-marine)}

/* team size columns: <div class="vcols"><div class="vcol you"><span class="vn">4</span><span class="vf" style="height:62%"></span><span class="vl">6–15</span></div>…</div> */
.stage .vcols{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(24*var(--u));height:calc(380*var(--u));align-items:end}
.stage .vcol{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;gap:calc(8*var(--u));text-align:center}
.stage .vn{font-weight:var(--w-bold);font-size:calc(44*var(--u))}
.stage .vf{display:block;flex:none;height:calc((100% - 130*var(--u))*var(--p,0));background:var(--c-marine);border-radius:calc(12*var(--u));min-height:calc(10*var(--u));transition:height .5s var(--ease)}
.stage .vcol .vl{font-size:calc(32*var(--u));font-weight:var(--w-medium)}
.stage .vcol.you .vf{background:var(--c-sun)}
.stage .vcol .vl{white-space:nowrap;align-self:stretch;text-align:center;overflow:hidden;text-overflow:ellipsis;border-top:calc(2*var(--u)) solid var(--c-line);padding-top:calc(8*var(--u))}

/* heatmap: <table class="heat"><thead><tr><th></th><th>Not yet</th>…</tr></thead><tbody><tr><th class="rl">Task</th><td class="h3">4</td><td class="h0">0</td>…
   cell class hN: N = 0..5 = ceil(count / maxCount * 5). Add .hi to the single biggest cell. */
.stage .hwrap{flex:1 0 auto}   /* never shrinks below the table, so real overflow reaches .stage-body and stage.js fitBody() can react */
.stage .heat{width:100%;border-collapse:separate;border-spacing:calc(6*var(--u));table-layout:fixed}
.stage .heat thead th{font-size:calc(30*var(--u));font-weight:var(--w-bold);color:var(--c-ink-2);text-align:center;padding:0 0 calc(6*var(--u));line-height:1.1;vertical-align:bottom}
.stage .heat thead th:first-child{width:30%}   /* table-layout:fixed reads column widths from the FIRST row, so the label column is sized here */
.stage .heat th.rl{text-align:left;font-weight:var(--w-regular);font-size:calc(34*var(--u));padding-right:calc(16*var(--u));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage .heat td{height:calc(58*var(--u));text-align:center;font-weight:var(--w-bold);font-size:calc(34*var(--u));border-radius:calc(12*var(--u))}
.stage .h0{background:var(--c-clay);color:var(--c-ink-2);font-weight:var(--w-regular)}
.stage .h1{background:color-mix(in srgb,var(--c-marine) 12%,var(--c-clay))}
.stage .h2{background:color-mix(in srgb,var(--c-marine) 28%,var(--c-clay))}
.stage .h3{background:color-mix(in srgb,var(--c-marine) 48%,var(--c-clay))}
.stage .h4{background:color-mix(in srgb,var(--c-marine) 76%,var(--c-clay));color:var(--c-white)}
.stage .h5{background:var(--c-marine);color:var(--c-white)}
.stage .heat td.hi{outline:calc(5*var(--u)) solid var(--c-charcoal);outline-offset:calc(-1*var(--u))}
.stage .legend{display:flex;align-items:center;gap:calc(28*var(--u));font-size:calc(30*var(--u));color:var(--c-ink-2)}
.stage .legend-scale{display:inline-flex;gap:calc(4*var(--u))}
.stage .legend-scale i{width:calc(44*var(--u));height:calc(24*var(--u));border-radius:calc(6*var(--u))}
.stage .legend .hi-key{display:inline-block;width:calc(44*var(--u));height:calc(24*var(--u));border-radius:calc(6*var(--u));outline:calc(4*var(--u)) solid var(--c-charcoal);outline-offset:calc(-1*var(--u));vertical-align:middle;margin-right:calc(10*var(--u))}

/* ladder: <div class="ladder"><div class="rung has"><span class="rn">3</span><span class="rt"><b>Title</b><span>Description</span></span><span class="rd"><i></i><i class="me"></i></span><span class="rc">2</span></div>…</div>
   (rung 8 first, rung 0 last). Future mode: .rd holds <span class="lb now" style="width:%"></span><span class="lb fut" style="width:%"></span> and .rc reads "3→5". */
.stage .ladder{display:flex;flex-direction:column;gap:calc(8*var(--u));height:100%;justify-content:space-between}
.stage .rung{flex:1;min-height:0;display:grid;grid-template-columns:calc(60*var(--u)) minmax(0,1.5fr) minmax(0,.7fr) calc(88*var(--u));align-items:center;gap:calc(20*var(--u));padding:0 calc(20*var(--u)) 0 calc(14*var(--u));background:var(--c-clay);border-radius:calc(20*var(--u))}
/* Numbers in round badges: centre the figure itself, not the line box around it.
   Epilogue's tall ascent puts digits above centre in some browsers; text-box trims the line box to
   cap height and baseline (Chrome 133+, Safari 18.2+). Older browsers keep the line-box centring. */
.stage .rn,.opt .rk{line-height:1;text-box:trim-both cap alphabetic}
.stage .rn{display:grid;place-items:center;width:calc(48*var(--u));height:calc(48*var(--u));border-radius:50%;background:var(--c-white);font-weight:var(--w-bold);font-size:calc(30*var(--u))}
.stage .rung.has .rn{background:var(--c-marine);color:var(--c-white)}
.stage .rt{display:flex;flex-direction:column;min-width:0}
.stage .rt b{font-weight:var(--w-medium);font-size:calc(34*var(--u));line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage .rt span{font-size:calc(26*var(--u));color:var(--c-ink-2);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage .rd{display:flex;flex-wrap:wrap;align-content:center;gap:calc(6*var(--u));min-width:0}
.stage .rd i{width:calc(22*var(--u));height:calc(22*var(--u));border-radius:50%;background:var(--c-marine)}
.stage .rd i.me{background:var(--c-sun)}
.stage .rd:has(.lb){flex-direction:column;flex-wrap:nowrap;justify-content:center;gap:calc(5*var(--u))}
.stage .lb{display:block;height:calc(16*var(--u));min-width:0;border-radius:var(--r-pill);transition:width .5s var(--ease)}
.stage .lb.now{background:var(--c-today)}
.stage .lb.fut{background:var(--c-marine)}
.stage .rc{text-align:right;font-weight:var(--w-bold);font-size:calc(34*var(--u))}
.stage .ladder-key{display:flex;gap:calc(36*var(--u));font-size:calc(30*var(--u));color:var(--c-ink-2);margin-bottom:calc(14*var(--u))}
.stage .ladder-key i{display:inline-block;width:calc(44*var(--u));height:calc(16*var(--u));border-radius:var(--r-pill);margin-right:calc(12*var(--u));vertical-align:middle}
.stage .ladder-key .k-now i{background:var(--c-today)}
.stage .ladder-key .k-fut i{background:var(--c-marine)}

/* idea wall / fix wall: <div class="wall"><div class="cluster"><span class="sub">Insight · 4</span><div class="note">…</div><div class="note mine">…</div></div></div> */
.stage .wall{flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:calc(20*var(--u));min-height:0}
.stage .cluster{--track:var(--c-clay-deep);display:flex;flex-direction:column;gap:calc(10*var(--u));overflow:hidden;padding:calc(20*var(--u));background:var(--c-clay);border-radius:calc(28*var(--u));min-width:0}
.stage .cluster .sub{margin:0 0 calc(2*var(--u))}
.stage .note{flex:none;padding:0 calc(18*var(--u));border-block:calc(12*var(--u)) solid transparent;background:var(--c-white);border-radius:calc(16*var(--u));font-size:calc(30*var(--u));line-height:1.18;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;box-shadow:0 calc(2*var(--u)) 0 rgba(29,29,29,.08)}
.stage .note.mine{background:linear-gradient(var(--c-sun),var(--c-sun)) left/calc(8*var(--u)) 100% no-repeat,color-mix(in srgb,var(--c-sun) 22%,var(--c-white));box-shadow:0 calc(2*var(--u)) 0 rgba(29,29,29,.08);padding-left:calc(30*var(--u))}
.stage .note.new{animation:noteIn .5s var(--ease)}
.stage .more{align-self:flex-start;padding:calc(2*var(--u)) calc(16*var(--u));border-radius:var(--r-pill);background:var(--c-white);font-size:calc(28*var(--u));font-weight:var(--w-bold);color:var(--c-ink-2)}
.stage .note.empty{background:transparent;box-shadow:none;border:calc(2*var(--u)) dashed var(--c-ink-2);color:var(--c-ink-2);padding:calc(10*var(--u)) calc(18*var(--u))}
@keyframes noteIn{from{opacity:0;transform:translateY(calc(16*var(--u))) scale(.97)}}

/* topic vote (and any "pick one" contest): <div class="topics"><div class="topic lead"><span class="tag">Leading</span><span class="tn">Name</span><span class="tv">9</span></div>… */
.stage .topics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(24*var(--u))}
.stage .topic{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;gap:calc(12*var(--u)) calc(20*var(--u));min-height:calc(220*var(--u));padding:calc(28*var(--u));background:var(--c-white);border:calc(3*var(--u)) solid var(--c-line);border-radius:calc(28*var(--u))}
.stage .topic .tag{grid-column:1 / -1;justify-self:start;padding:calc(4*var(--u)) calc(16*var(--u));border-radius:var(--r-pill);background:var(--c-clay);font-size:calc(26*var(--u));font-weight:var(--w-bold);text-transform:uppercase;letter-spacing:var(--tr-label)}
.stage .topic .tn{font-size:calc(52*var(--u));font-weight:var(--w-medium);letter-spacing:-.025em;line-height:1.05;align-self:end}
.stage .topic .tv{font-size:calc(96*var(--u));font-weight:var(--w-light);letter-spacing:-.04em;line-height:1;align-self:end}
.stage .topic.lead{border-color:var(--c-sun);background:color-mix(in srgb,var(--c-sun) 12%,var(--c-white))}
.stage .topic.lead .tag{background:var(--c-sun)}

/* AI facilitator slide */
.stage .ai-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:calc(48*var(--u));align-items:start}
.stage .ai-panel{background:var(--c-clay);border-radius:calc(28*var(--u));padding:calc(26*var(--u)) calc(32*var(--u))}
.stage .aisum{display:flex;flex-direction:column;gap:calc(18*var(--u))}
.stage .aisum li{position:relative;padding-left:calc(40*var(--u));font-size:calc(36*var(--u));line-height:1.22}
.stage .aisum li::before{content:"";position:absolute;left:0;top:.48em;width:calc(16*var(--u));height:calc(16*var(--u));border-radius:50%;background:var(--c-marine)}
.stage .heard{margin-top:calc(26*var(--u));padding:calc(24*var(--u)) calc(30*var(--u));background:var(--c-white);border-radius:calc(24*var(--u));font-size:calc(34*var(--u));font-weight:var(--w-light);line-height:1.2;letter-spacing:-.015em}
.stage .heard .sub{display:block;margin-bottom:calc(8*var(--u))}
.stage .heard .fixfor{display:block;margin-top:calc(10*var(--u));font-size:calc(26*var(--u));font-weight:var(--w-regular);color:var(--c-ink-2)}
.stage .aiqs{display:flex;flex-direction:column;gap:calc(16*var(--u))}
.stage .aiq{display:grid;grid-template-columns:1fr auto;gap:calc(20*var(--u));align-items:center;padding:calc(22*var(--u)) calc(26*var(--u));background:var(--c-white);border:calc(3*var(--u)) solid var(--c-line);border-radius:calc(24*var(--u));font-size:calc(32*var(--u));line-height:1.2}
.stage .aiq b{display:grid;place-items:center;min-width:calc(64*var(--u));height:calc(64*var(--u));border-radius:var(--r-pill);background:var(--c-clay);font-size:calc(34*var(--u));font-weight:var(--w-bold)}
.stage .aiq.lead{border-color:var(--c-sun);background:color-mix(in srgb,var(--c-sun) 12%,var(--c-white))}
.stage .aiq.lead b{background:var(--c-sun)}

/* tool wall strip (bottom of every round slide) */
.stage .toolstrip{display:flex;align-items:center;gap:calc(24*var(--u));min-height:calc(64*var(--u))}
.stage .toolstrip .sub{margin:0;flex:none}
.stage .tools{display:flex;flex-wrap:wrap;gap:calc(10*var(--u));max-height:calc(64*var(--u));overflow:hidden}
.stage .chip{font-size:calc(30*var(--u))}

/* summary cards: <div class="cards"><div class="card"><span class="k">Label</span><span class="v">15 people</span><span class="d">detail</span></div>… */
.stage .cards{flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:calc(24*var(--u))}
.stage .card{overflow:hidden;display:flex;flex-direction:column;gap:calc(10*var(--u));padding:calc(26*var(--u));background:var(--c-white);border-radius:calc(28*var(--u));min-width:0;box-shadow:0 calc(3*var(--u)) 0 rgba(29,29,29,.07)}
.stage .card .k{font-size:calc(26*var(--u));font-weight:var(--w-bold);text-transform:uppercase;letter-spacing:var(--tr-label);color:var(--c-marine)}
.stage .card .v{font-size:calc(64*var(--u));font-weight:var(--w-regular);letter-spacing:var(--tr-title);line-height:1.02}
.stage .card .v small{font-size:.5em;color:var(--c-ink-2)}
.stage .card .d{font-size:calc(28*var(--u));color:var(--c-ink-2);line-height:1.2}
.stage .card ul{display:flex;flex-direction:column;gap:calc(8*var(--u));font-size:calc(30*var(--u));line-height:1.18}
.stage .card li{padding-left:calc(26*var(--u));position:relative;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.stage .card li::before{content:"";position:absolute;left:0;top:.5em;width:calc(12*var(--u));height:calc(12*var(--u));border-radius:50%;background:var(--c-marine)}
.stage .card .stack{display:flex;gap:calc(4*var(--u));height:calc(26*var(--u))}
.stage .card .stack span{display:block;min-width:calc(8*var(--u));border-radius:calc(8*var(--u))}
.stage .card .tools{max-height:none}
.stage .card .chip{font-size:calc(28*var(--u))}
.stage .card--wide{grid-column:span 2}

/* lobby / join:
   <div class="lobby"><div class="join-card"><div class="qr">…</div><p class="join-url">…</p><p class="join-code"><span>Code</span><b>4821</b></p></div>
   <div class="join-side"><p class="join-count"><b>12</b><span>in the room</span></p> …who-is-here charts… </div></div> */
.stage .lobby{display:grid;grid-template-columns:auto minmax(0,1fr);gap:calc(64*var(--u));align-items:center;flex:1;min-height:0}
.stage .join-card{width:calc(456*var(--u));max-width:100%;display:flex;flex-direction:column;gap:calc(16*var(--u));padding:calc(28*var(--u));background:var(--c-white);border-radius:calc(36*var(--u));box-shadow:0 calc(6*var(--u)) 0 rgba(29,29,29,.08)}
.qr{--qr:calc(430*var(--u, 1px));width:var(--qr);aspect-ratio:1;background:var(--c-white);color:var(--c-charcoal)}
.qr>svg,.qr>canvas,.qr>img{display:block;width:100%;height:100%}
.stage .join-url{font-size:calc(34*var(--u));font-weight:var(--w-medium);text-align:center;letter-spacing:-.01em;overflow-wrap:anywhere}
.stage .join-code{display:flex;align-items:baseline;justify-content:center;gap:calc(20*var(--u));padding-top:calc(16*var(--u));border-top:calc(2*var(--u)) solid var(--c-line)}
.stage .join-code span{font-size:calc(28*var(--u));font-weight:var(--w-bold);text-transform:uppercase;letter-spacing:var(--tr-label);color:var(--c-ink-2)}
.stage .join-code b{font-size:calc(88*var(--u));font-weight:var(--w-medium);letter-spacing:.06em;line-height:1}
.stage .join-count{display:flex;align-items:baseline;gap:calc(24*var(--u));margin-bottom:calc(18*var(--u))}
.stage .join-count b{font-size:calc(150*var(--u));font-weight:var(--w-light);letter-spacing:-.05em;line-height:.9}
.stage .join-count span{font-size:calc(44*var(--u));font-weight:var(--w-medium)}
.stage .join-card .qr{--qr:calc(400*var(--u))}
.stage .join-panel .bars{gap:calc(8*var(--u))}
.stage .join-side{min-width:0}
.stage .join-panel{background:var(--c-white);border-radius:calc(28*var(--u));padding:calc(26*var(--u));box-shadow:0 calc(6*var(--u)) 0 rgba(29,29,29,.08)}
.stage .join-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:calc(40*var(--u))}
.stage .join-panel .vcols{height:calc(330*var(--u));gap:calc(14*var(--u))}
.stage .join-panel .vcol .vl{font-size:calc(28*var(--u))}

/* stage: state panels, fit guard, split toolstrip, chrome (moved from stage.html) */
/* "Results hidden" / "Waiting for the AI facilitator": calm Clay panel, fills the body */
.stage .held{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(16*var(--u));padding:calc(48*var(--u));text-align:center;background:var(--c-clay);border-radius:calc(28*var(--u))}
.stage .held-t{font-size:calc(64*var(--u));font-weight:var(--w-regular);letter-spacing:var(--tr-title);line-height:1.05}
.stage .held-d{color:var(--c-ink-2);max-width:calc(1100*var(--u))}
.stage .held-d b{color:var(--c-ink);font-weight:var(--w-bold)}
.stage .join-panel .held{min-height:calc(380*var(--u));padding:calc(24*var(--u))}
.stage .join-panel .held-t{font-size:calc(40*var(--u))}
/* tool strip before the first tool arrives */
.stage .tools-empty{font-size:calc(30*var(--u));color:var(--c-ink-2)}
/* AI slide with 4 bullets: give the summary column more room */
.stage .ai-grid--4{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:calc(40*var(--u))}
.stage .ai-grid--4 .aisum{gap:calc(12*var(--u))}
/* split layout (ladder, future): the tool strip sits under the heading in the left column */
.stage--split .toolstrip{grid-row:1;grid-column:1;align-self:end;flex-direction:column;align-items:flex-start;gap:calc(12*var(--u))}
.stage--split .toolstrip .tools{max-height:calc(200*var(--u))}  /* 3 rows of chips */
/* heatmap: table-layout:fixed takes column widths from the FIRST row (thead), so the
   label column needs its width there; .rl's 34% alone leaves it at 1/6 and truncates labels */
.stage .heat thead th:first-child{width:30%}
/* plain bars: 10 rows + tool strip + a two-line insight must fit the body at 1080/720 */
.stage .bars:not(.bars--stack){gap:calc(8*var(--u))}
.stage .bars:not(.bars--stack) .bar{line-height:1.1}
/* AI slide: summary column wrapper (the "heard" quote can move here when the right column is full) */
.stage .ai-main{min-width:0}
.stage .ai-main .heard{margin-top:calc(20*var(--u))}
/* fit guard (stage.js fitBody): 1 = drop the tool strip, 2 = tighten spacing */
.stage.fit-1 .toolstrip{display:none}
.stage.fit-2 .aisum{gap:calc(8*var(--u))}
.stage.fit-2 .aisum li{line-height:1.15}
.stage.fit-2 .aiq{padding:calc(14*var(--u)) calc(22*var(--u))}
.stage.fit-2 .heard{margin-top:calc(16*var(--u));padding:calc(16*var(--u)) calc(24*var(--u))}
.stage.fit-2 .ai-panel{padding:calc(20*var(--u)) calc(28*var(--u))}
/* normal (non-embed) mode chrome */
.stage.no-cursor,.stage.no-cursor *{cursor:none}
.fs-hint{position:absolute;z-index:3;left:50%;top:calc(20*var(--u));transform:translateX(-50%);padding:calc(10*var(--u)) calc(24*var(--u));border-radius:var(--r-pill);background:var(--c-charcoal);color:var(--c-white);font-size:calc(30*var(--u));font-weight:var(--w-medium);transition:opacity .4s}
.fs-hint[hidden]{display:block!important;opacity:0;pointer-events:none}
.stage--embed .fs-hint{display:none}

/* ---------- 6 Phone ----------
   <div class="phone"><div class="banner …"/> <header class="ph-top">…</header><main class="ph-body">…</main><footer class="ph-foot">…</footer></div>
   Layout: top fixed, body scrolls, foot sticky. Everything reachable by the thumb; no horizontal scroll. */
.phone{position:relative;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;max-width:560px;margin:0 auto;background:var(--c-sand);font-size:var(--ph-body);line-height:1.35;overflow:visible;overflow-x:clip}   /* overflow:hidden would make .phone the scroll container and break sticky banner/footer; clip keeps the no-sideways-scroll intent */

.phone .banner{position:sticky;top:0;z-index:5}
.ph-top{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-5) var(--sp-5) var(--sp-3)}
.ph-top .eyebrow{font-size:var(--ph-label)}
.ph-top .q{font-size:var(--ph-q);font-weight:var(--w-regular);line-height:1.1;letter-spacing:var(--tr-title);text-wrap:balance}
.ph-top .h{font-size:var(--ph-hint);color:var(--c-ink-2)}
.ph-top .h b{color:var(--c-ink);font-weight:var(--w-bold)}
.ph-body{flex:1;display:flex;flex-direction:column;gap:10px;padding:var(--sp-2) var(--sp-5) var(--sp-6)}
.ph-body .grp{margin:var(--sp-3) 0 0;font-size:var(--ph-label);font-weight:var(--w-bold);text-transform:uppercase;letter-spacing:var(--tr-label);color:var(--c-ink-2)}
.ph-body .grp:first-child{margin-top:0}

/* option button: single or multi select.
   <button class="opt" aria-pressed="false"><span class="mark"></span><span class="ot">Label<small>optional description</small></span></button>
   selected: add .on and aria-pressed="true". At the limit: add .maxed (unselected options dim, still readable). */
.opt{display:flex;align-items:center;gap:var(--sp-3);width:100%;min-height:var(--tap);padding:var(--sp-3) var(--sp-4);text-align:left;background:var(--c-white);border:2px solid var(--c-line);border-radius:var(--r-md);font-size:var(--ph-body);font-weight:var(--w-medium);line-height:1.25;transition:background .12s,border-color .12s,transform .08s}
.opt:active{transform:scale(.985)}
.opt .mark{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:2px solid var(--c-ink-2);color:transparent;font-size:14px}
.opt .mark::after{content:"";width:14px;height:14px;background:currentColor;-webkit-mask:var(--i-check) center/contain no-repeat;mask:var(--i-check) center/contain no-repeat}
.opt--multi .mark{border-radius:7px}
.opt .ot{flex:1;min-width:0}
.opt .ot small{display:block;margin-top:2px;font-size:var(--ph-hint);font-weight:var(--w-regular);color:var(--c-ink-2)}
.opt .added{flex:none;padding:2px 10px;border-radius:var(--r-pill);background:var(--c-clay);font-size:12px;font-weight:var(--w-bold);text-transform:uppercase;letter-spacing:var(--tr-label)}
.opt .rk{flex:none;display:grid;place-items:center;min-width:40px;height:32px;padding:0 10px;border-radius:var(--r-pill);background:var(--c-white);color:var(--c-marine);font-weight:var(--w-bold);font-size:15px}
.opt.on,.opt[aria-pressed="true"]{background:var(--c-marine);border-color:var(--c-marine);color:var(--c-white)}
.opt.on .mark,.opt[aria-pressed="true"] .mark{background:var(--c-white);border-color:var(--c-white);color:var(--c-marine)}
.opt.on .ot small,.opt[aria-pressed="true"] .ot small{color:rgba(255,255,255,.82)}
.opt.on .added,.opt[aria-pressed="true"] .added{background:rgba(255,255,255,.2);color:var(--c-white)}
.opt.maxed:not(.on):not([aria-pressed="true"]){opacity:.45}
.opt[disabled]{cursor:not-allowed}

/* level chips: one row per task, 5 chips. <div class="lvrow"><span class="tn">Task</span><div class="lvchips"><button class="lvchip" aria-pressed="false">None</button>×5</div></div> */
.lvrow{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-3);background:var(--c-white);border:2px solid var(--c-line);border-radius:var(--r-md)}
.lvrow .tn{font-weight:var(--w-medium)}
.lvchips{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.lvchip{min-height:48px;padding:0 2px;border:2px solid var(--c-line);border-radius:12px;background:var(--c-sand);font-size:13px;font-weight:var(--w-medium);line-height:1.1;text-align:center}
.lvchip.on,.lvchip[aria-pressed="true"]{background:var(--c-marine);border-color:var(--c-marine);color:var(--c-white)}
.lv-legend{font-size:var(--ph-hint);color:var(--c-ink-2)}

/* text inputs */
.phone input[type="text"],.phone input:not([type]),.phone textarea{width:100%;min-height:52px;padding:var(--sp-3) var(--sp-4);background:var(--c-white);border:2px solid var(--c-line);border-radius:var(--r-md);font-size:var(--ph-body);line-height:1.3}
.phone textarea{min-height:132px;resize:vertical}
.phone input::placeholder,.phone textarea::placeholder{color:var(--c-ink-2);opacity:.8}
.phone input:focus-visible,.phone textarea:focus-visible{border-color:var(--c-marine);outline:3px solid color-mix(in srgb,var(--c-marine) 28%,transparent);outline-offset:0}
.phone .field-hint{display:flex;justify-content:space-between;font-size:var(--ph-hint);color:var(--c-ink-2)}
.phone .btn{min-height:var(--tap);font-size:var(--ph-body)}
.inrow{display:flex;gap:var(--sp-2)}
.inrow input{flex:1;min-width:0}
.inrow .btn{flex:none;padding:0 var(--sp-5)}
.addrow{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-3);border:2px dashed var(--c-line);border-radius:var(--r-md)}
.addrow .mini{font-size:var(--ph-hint);color:var(--c-ink-2)}

/* sticky footer: tool wall */
.ph-foot{position:sticky!important;bottom:0;z-index:4;display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-3) var(--sp-5) calc(var(--sp-4) + env(safe-area-inset-bottom));background:var(--c-clay);border-top:2px solid var(--c-line)}
.ph-foot .lab{font-size:var(--ph-label);font-weight:var(--w-bold);text-transform:uppercase;letter-spacing:var(--tr-label);color:var(--c-ink-2)}
.ph-foot .mytools{display:flex;flex-wrap:wrap;gap:6px}
.phone .chip{font-size:14px}

/* confirmation + waiting states (after answering, between questions) */
.ph-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-4);padding:var(--sp-7) var(--sp-5);text-align:center}
.ph-state .badge{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--c-success);color:var(--c-charcoal);font-size:32px}
.ph-state .badge--wait{background:var(--c-clay);font-size:28px}
.ph-state .badge .icon{width:1em;height:1em}
.ph-state h2{font-size:var(--ph-q);font-weight:var(--w-regular);letter-spacing:var(--tr-title);line-height:1.1}
.ph-state p{color:var(--c-ink-2);max-width:28ch}
.ph-summary{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-4);background:var(--c-white);border-radius:var(--r-md);font-size:var(--ph-hint)}
.ph-summary li{display:flex;justify-content:space-between;gap:var(--sp-4);padding:6px 0;border-bottom:1px solid var(--c-line)}
.ph-summary li:last-child{border:0}
.ph-summary li span:first-child{color:var(--c-ink-2);flex:none}
.ph-summary li span:last-child{text-align:right}

/* phone: join code, answer status, focus behaviour (moved from index.html) */
html:has(.phone){overflow-anchor:none}
/* while typing in the body the sticky tool wall would cover the field above the keyboard */
.phone:has(.ph-body input:focus,.ph-body textarea:focus) .ph-foot{position:static!important}
/* Answer status line under the question: "Saved · sending…" / "Sent". Fixed height, so it never shifts the layout. */
.ph-ack{display:flex;align-items:center;gap:6px;min-height:22px;font-size:var(--ph-hint);font-weight:var(--w-medium);color:var(--c-ink-2)}
.ph-ack .icon{width:18px;height:18px}
.ph-ack--sent{color:var(--c-ink)}
/* Join screen code field. */
.phone input.join-code{min-height:72px;font-size:34px;font-weight:var(--w-medium);text-align:center;letter-spacing:.3em}
.ph-state .ph-quote{color:var(--c-ink);font-size:var(--ph-body);font-weight:var(--w-medium);max-width:30ch}

/* ---------- 7 Presenter (laptop, 1280-1600 wide) ----------
   <div class="presenter"><header class="pr-top">…</header><nav class="pr-board">slots</nav><main class="pr-main">…</main></div> */
.presenter{display:grid;grid-template-columns:300px minmax(0,1fr);grid-template-rows:auto 1fr;height:100vh;background:var(--c-sand);font-size:var(--pr-body);line-height:1.4;overflow:hidden}
.pr-top{grid-column:1 / -1;display:flex;align-items:center;gap:var(--sp-5);padding:var(--sp-3) var(--sp-5);background:var(--c-white);border-bottom:2px solid var(--c-line)}
.pr-top h1{font-size:20px;font-weight:var(--w-medium);letter-spacing:var(--tr-title)}
.pr-top .pr-spacer{flex:1}
.pr-top .conn{font-size:var(--pr-small)}
.pr-pill{display:inline-flex;align-items:center;gap:var(--sp-2);padding:6px 14px;border-radius:var(--r-pill);background:var(--c-clay);font-size:var(--pr-small);font-weight:var(--w-medium)}
.pr-pill b{font-weight:var(--w-bold)}
.pr-board{display:flex;flex-direction:column;gap:6px;padding:var(--sp-4);overflow:auto;border-right:2px solid var(--c-line)}
.slot{display:grid;grid-template-columns:52px 1fr;grid-template-areas:"t l" "t g";column-gap:var(--sp-2);align-items:center;width:100%;min-height:48px;padding:8px 12px;text-align:left;background:transparent;border:2px solid transparent;border-radius:var(--r-md);font-size:15px}
.slot:hover{background:var(--c-clay)}
.slot .t{grid-area:t;font-weight:var(--w-bold);font-size:14px;color:var(--c-ink-2)}
.slot .l{grid-area:l;font-weight:var(--w-medium);line-height:1.2}
.slot .tab{grid-area:g;justify-self:start;margin-top:3px;padding:1px 8px;border-radius:var(--r-pill);background:var(--c-sun);font-size:11px;font-weight:var(--w-bold);letter-spacing:var(--tr-label);text-transform:uppercase}
.slot.done .l,.slot.done .t{color:var(--c-ink-2)}
.slot.done .l::before{content:"✓ "}
.slot.now{background:var(--c-marine);border-color:var(--c-marine);color:var(--c-white)}
.slot.now .t{color:rgba(255,255,255,.8)}
.pr-main{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto 1fr;gap:var(--sp-5);padding:var(--sp-5);min-height:0;overflow:auto}
.pr-stagecol{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}
.pr-preview{position:relative;aspect-ratio:16/9;background:var(--c-white);border:2px solid var(--c-line);border-radius:var(--r-md);overflow:hidden}
.pr-preview>iframe,.pr-preview>.pr-preview-inner{position:absolute;inset:0;width:100%;height:100%;border:0}
.pr-preview .pr-live{position:absolute;bottom:10px;right:10px;z-index:2;padding:3px 10px;border-radius:var(--r-pill);background:var(--c-charcoal);color:var(--c-white);font-size:12px;font-weight:var(--w-bold);letter-spacing:var(--tr-label);text-transform:uppercase}
.pr-controls{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-3)}
.pr-controls .btn{min-height:64px;font-size:20px}
.pr-progress{display:flex;flex-direction:column;gap:6px;padding:var(--sp-4);background:var(--c-white);border-radius:var(--r-md)}
.pr-progress .row{display:flex;justify-content:space-between;font-weight:var(--w-medium)}
.pr-progress .row b{font-weight:var(--w-bold)}
.pr-progress .bt{height:12px;background:var(--c-clay);border-radius:var(--r-pill);overflow:hidden}
.pr-progress .bf{display:block;height:100%;background:var(--c-marine);border-radius:var(--r-pill)}
.pr-notes{display:flex;flex-direction:column;gap:var(--sp-5);min-width:0}
.pr-notes h3{margin-bottom:var(--sp-2);font-size:var(--ph-label);font-weight:var(--w-bold);text-transform:uppercase;letter-spacing:var(--tr-label);color:var(--c-ink-2)}
.pr-notes ul{display:flex;flex-direction:column;gap:10px}
.pr-notes li{position:relative;padding-left:22px;font-size:var(--pr-body);line-height:1.35}
.pr-notes li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--c-marine)}
.pr-ask{padding:var(--sp-4) var(--sp-5);background:var(--c-white);border-left:6px solid var(--c-marine);border-radius:var(--r-md);font-size:var(--pr-ask);font-weight:var(--w-medium);line-height:1.25;letter-spacing:-.015em}
/* tab-switch cue: loud on purpose. Sits ABOVE the notes, full width of .pr-main. */
.tabcue{grid-column:1 / -1;display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-4) var(--sp-5);background:var(--c-sun);color:var(--c-charcoal);border-radius:var(--r-md);font-size:20px;line-height:1.25}
.tabcue .icon{font-size:30px}
.tabcue .tc-go{font-weight:var(--w-bold);text-transform:uppercase;letter-spacing:var(--tr-label);font-size:15px;white-space:nowrap}
.tabcue .tc-what{flex:1}
.tabcue .tc-what strong{font-weight:var(--w-bold)}
.tabcue .tc-back{margin-left:auto;padding:6px 14px;border-radius:var(--r-pill);background:rgba(29,29,29,.12);font-weight:var(--w-bold);font-size:14px;white-space:nowrap}

.pr-main{align-content:start}
.pr-panel{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);background:var(--c-white);border-radius:var(--r-md);min-width:0}
.pr-panel h3,.pr-sub{font-size:var(--ph-label);font-weight:var(--w-bold);text-transform:uppercase;letter-spacing:var(--tr-label);color:var(--c-ink-2)}
.pr-panel h3{display:flex;align-items:center;gap:var(--sp-2)}
.pr-tools{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-5);align-items:start}
.pr-session{grid-column:1 / -1}
.pr-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
.pr-meta{font-size:var(--pr-small);color:var(--c-ink-2)}
.pr-meta b{color:var(--c-ink);font-weight:var(--w-bold)}
.pr-hint{font-size:var(--pr-small);color:var(--c-ink-2)}
.pr-hint code{font-size:.95em}
.pr-empty{font-size:16px;color:var(--c-ink-2)}
.presenter .btn{font-size:16px}
.presenter .pr-controls .btn{font-size:20px}
.btn.pr-sm{min-height:36px;padding:0 var(--sp-3);font-size:15px}
.btn--danger{background:var(--c-coral);border-color:var(--c-coral);color:var(--c-charcoal)}
.btn--danger:hover{border-color:var(--c-charcoal)}
.btn[aria-busy="true"],.slot[aria-busy="true"]{cursor:progress;opacity:.65}
.btn[aria-busy="true"]::after{content:"…"}
/* inputs */
.presenter input[type="text"],.presenter input[type="password"],.presenter textarea,.presenter select,.pr-gate input{width:100%;min-height:40px;padding:8px 12px;background:var(--c-white);border:2px solid var(--c-line);border-radius:var(--r-sm);font-size:16px;line-height:1.35}
.presenter textarea{resize:vertical}
.presenter select{width:auto;max-width:100%;min-height:36px;padding:4px 8px;font-size:15px}
.presenter input:focus-visible,.presenter textarea:focus-visible,.presenter select:focus-visible,.pr-gate input:focus-visible{border-color:var(--c-marine);outline:3px solid color-mix(in srgb,var(--c-marine) 28%,transparent);outline-offset:0}
.pr-field{display:flex;flex-direction:column;gap:6px;font-size:var(--pr-small);font-weight:var(--w-medium)}
.pr-field small{font-weight:var(--w-regular);color:var(--c-ink-2)}
fieldset.pr-field{margin:0;padding:0;border:0;min-width:0}
fieldset.pr-field legend{padding:0;margin-bottom:6px}
/* inline errors and notices: never colour only (icon + words) */
.pr-err{display:flex;align-items:flex-start;gap:var(--sp-2);padding:8px 12px;border-left:4px solid var(--c-coral);border-radius:var(--r-sm);background:color-mix(in srgb,var(--c-coral) 12%,var(--c-white));font-size:15px;font-weight:var(--w-medium);line-height:1.3}
.pr-err .icon{color:var(--c-coral);margin-top:1px}
.pr-err.is-info{border-left-color:var(--c-ink-2);background:var(--c-clay)}
.pr-err.is-info .icon{color:var(--c-ink-2)}
.pr-err span:not(.icon){flex:1}
.pr-err button{flex:none;border:0;background:transparent;padding:0 2px;font-size:15px;text-decoration:underline;cursor:pointer}
.pr-offline{grid-column:1 / -1;border-radius:var(--r-md)}
/* preview */
.pr-preview>iframe{width:1920px;height:1080px;right:auto;bottom:auto;transform-origin:0 0;pointer-events:none;background:var(--c-sand)}
.pr-preview-msg{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-3);padding:var(--sp-5);background:var(--c-sand);text-align:center;font-size:16px;color:var(--c-ink-2)}
/* current slide: per-question block */
.pr-q{display:flex;flex-direction:column;gap:var(--sp-2);padding-top:var(--sp-3);border-top:2px solid var(--c-line)}
.pr-q:first-of-type{padding-top:0;border-top:0}
.pr-q-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3)}
.pr-q-name{font-weight:var(--w-medium);font-size:17px;line-height:1.2}
.pr-q-n{font-size:var(--pr-small);color:var(--c-ink-2);white-space:nowrap}
.pr-q-n b{color:var(--c-ink);font-size:16px}
.pr-ctl{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);align-items:center}
.pr-seg{display:inline-flex;align-items:center;gap:var(--sp-2)}
.pr-seg>span{font-size:var(--pr-small);font-weight:var(--w-bold);text-transform:uppercase;letter-spacing:var(--tr-label);color:var(--c-ink-2);min-width:4.6em}
.pr-seg .btn[aria-pressed="true"]{background:var(--c-marine);border-color:var(--c-marine);color:var(--c-white);cursor:default}
.pr-seg .btn[aria-pressed="true"]:focus-visible{outline-color:var(--c-charcoal)}
.pr-seg .btn .icon{width:1em;height:1em}
.pr-nums{display:flex;flex-direction:column;gap:4px}
.pr-nums li{display:grid;grid-template-columns:minmax(0,1fr) 88px 4.2em;align-items:center;gap:var(--sp-3);font-size:16px;line-height:1.25}
.pr-nums .lb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr-nums .lb small{color:var(--c-ink-2);font-size:14px}
.pr-nums .bt{height:8px;background:var(--c-clay);border-radius:var(--r-pill);overflow:hidden}
.pr-nums .bf{display:block;height:100%;background:var(--c-marine);border-radius:var(--r-pill)}
.pr-nums .n{text-align:right;font-weight:var(--w-bold)}
.pr-nums .n small{font-weight:var(--w-regular);color:var(--c-ink-2);font-size:13px}
.pr-nums--text li{grid-template-columns:minmax(0,1fr);white-space:normal}
.pr-groups{font-size:var(--pr-small);color:var(--c-ink-2)}
.pr-groups b{color:var(--c-ink)}
.pr-chips{display:flex;flex-wrap:wrap;gap:6px;font-size:14px}
/* moderation */
.pr-mod-q{display:flex;flex-direction:column;gap:var(--sp-2)}
.pr-mod-list{display:flex;flex-direction:column}
.pr-mod-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px var(--sp-3);align-items:center;padding:8px 0;border-top:1px solid var(--c-line)}
.pr-mod-row:first-child{border-top:0}
.pr-mod-label{font-weight:var(--w-medium);font-size:16px;line-height:1.25;overflow-wrap:anywhere}
.pr-mod-label small{display:block;font-weight:var(--w-regular);font-size:13px;color:var(--c-ink-2)}
.pr-mod-row.is-off .pr-mod-label>span{text-decoration:line-through;color:var(--c-ink-2)}
.pr-mod-count{font-weight:var(--w-bold);font-size:16px;white-space:nowrap}
.pr-mod-actions{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
/* transcript */
.pr-tail{margin:0;max-height:7.5em;overflow:auto;padding:8px 12px;background:var(--c-sand);border-radius:var(--r-sm);font:inherit;font-size:15px;line-height:1.35;white-space:pre-wrap;overflow-wrap:anywhere}
.pr-confirm{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);border:2px solid var(--c-coral);border-radius:var(--r-sm);font-size:15px}
/* AI facilitator */
.pr-live-box{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-sm);background:var(--c-clay)}
.pr-live-box.is-live{background:var(--c-marine-tint);border-left:6px solid var(--c-marine)}
.pr-badge{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:var(--r-pill);background:var(--c-charcoal);color:var(--c-white);font-size:12px;font-weight:var(--w-bold);letter-spacing:var(--tr-label);text-transform:uppercase;white-space:nowrap}
.pr-badge--off{background:var(--c-white);color:var(--c-ink-2);border:1.5px solid var(--c-line)}
.pr-drafts{display:flex;flex-direction:column}
.pr-draft{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px var(--sp-3);align-items:center;padding:8px 0;border-top:1px solid var(--c-line)}
.pr-draft:first-child{border-top:0}
.pr-draft-meta{font-size:13px;color:var(--c-ink-2)}
.pr-draft-meta b{color:var(--c-ink)}
.pr-draft-text{font-size:15px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr-draft.is-editing{box-shadow:inset 4px 0 0 var(--c-marine);padding-left:12px}
.pr-editor{display:flex;flex-direction:column;gap:var(--sp-3);padding-top:var(--sp-3);border-top:2px solid var(--c-line)}
.pr-editor-title{font-weight:var(--w-medium);font-size:17px}
.pr-editor fieldset input+input{margin-top:6px}
.pr-code{display:block;padding:8px 12px;background:var(--c-sand);border-radius:var(--r-sm);font-size:13px;line-height:1.4;overflow-wrap:anywhere;user-select:all}
.pr-badge--dry{background:var(--c-sun);color:var(--c-charcoal);font-size:13px;padding:4px 12px}
/* session */
.pr-session-grid>.pr-field{align-items:flex-start}
.pr-session-grid>.pr-field>.pr-confirm,.pr-session-grid>.pr-field>.pr-err{align-self:stretch}
.pr-session-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-5);align-items:start}
.pr-switch{gap:var(--sp-3)}
.pr-switch .track{position:relative;width:40px;height:22px;border-radius:var(--r-pill);background:var(--c-clay-deep);flex:none;transition:background .15s}
.pr-switch .track::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--c-white);transition:transform .15s}
.pr-switch[aria-checked="true"] .track{background:var(--c-marine)}
.pr-switch[aria-checked="true"] .track::after{transform:translateX(18px)}
/* token gate */
.pr-gate{min-height:100vh;display:grid;place-items:center;padding:var(--sp-5);background:var(--c-sand)}
.pr-gate form{display:flex;flex-direction:column;gap:var(--sp-4);width:min(420px,100%);padding:var(--sp-6);background:var(--c-white);border-radius:var(--r-md)}
.pr-gate h1{font-size:var(--pr-title);font-weight:var(--w-regular);letter-spacing:var(--tr-title);line-height:1.1}
.pr-boot{min-height:100vh;display:grid;place-items:center;font-size:18px;color:var(--c-ink-2)}
@media (max-width:1350px){
  .presenter{grid-template-columns:250px minmax(0,1fr)}
  .pr-main{gap:var(--sp-4);padding:var(--sp-4)}
  .pr-top{gap:var(--sp-3)}
}

/* ---------- 8 Preview helpers (design-preview.html only; safe to ignore in views) ---------- */
.pv-note{max-width:70ch}