/* People and mics v2 · page styles (W2B, 2026-10-16, Rick).
   Tokens only (tokens.css). Page-local tokens are --local-* and built FROM tokens (no raw hex):
   --local-primary-deep  darker-downward stop of the tactile primary (wave-1 recipe)
   --local-metal-*       charcoal grille of the 3D mic (Ink mixed toward White)
   --local-chrome-*      chrome body / stand of the 3D mic
   --local-mic-shadow    contact shadow colour · --local-mic-rim  a 1 px rim so the grille reads on Ink
   --local-pop           the 180 ms overshoot ease for the logo mics (spring-like, CSS only)
   --local-dir           +1 LTR / −1 RTL */
:root,[data-theme="light"]{
  --local-primary-deep: var(--primary-hover);
  --local-key-hi: color-mix(in srgb, var(--ph-white) 90%, transparent);
  --local-key-lo: color-mix(in srgb, var(--ph-ink) 9%, transparent);
  --local-key-drop: 0 1px 2px color-mix(in srgb, var(--ph-ink) 16%, transparent), 0 6px 14px color-mix(in srgb, var(--ph-ink) 9%, transparent);
  --local-metal-lo: color-mix(in srgb, var(--ph-ink) 90%, var(--ph-white));
  --local-metal-mid: color-mix(in srgb, var(--ph-ink) 62%, var(--ph-white));
  --local-chrome-lo: color-mix(in srgb, var(--ph-ink) 58%, var(--ph-white));
  --local-chrome-mid: color-mix(in srgb, var(--ph-ink) 24%, var(--ph-white));
  --local-chrome-hi: var(--ph-white);
  --local-mic-shadow: var(--ph-ink);
  --local-mic-rim: color-mix(in srgb, var(--ph-ink) 35%, transparent);
  --local-tag-glow: color-mix(in srgb, var(--ph-amber) 40%, transparent);
  --local-pop: cubic-bezier(.34, 1.56, .64, 1);
  --local-dir: 1;
}
[data-theme="dark"]{
  --local-primary-deep: var(--primary-active);
  --local-key-hi: color-mix(in srgb, var(--ph-white) 10%, transparent);
  --local-key-lo: color-mix(in srgb, var(--ph-ink) 60%, transparent);
  --local-key-drop: 0 0 0 transparent;
  --local-metal-lo: color-mix(in srgb, var(--ph-ink) 70%, var(--ph-white));
  --local-metal-mid: color-mix(in srgb, var(--ph-ink) 42%, var(--ph-white));
  --local-mic-shadow: var(--ph-sky);
  --local-mic-rim: color-mix(in srgb, var(--ph-white) 35%, transparent);
  --local-tag-glow: transparent;
}
[dir="rtl"]{ --local-dir: -1; }

/* ── frame scaffold (same rhythm as wave 1) ── */
.frame.mv{display:flex;flex-direction:column;gap:16px}
.mv .kicker{margin:0;font-size:var(--fs-ui);font-weight:600;color:var(--fg-subtle);letter-spacing:.02em}
.mv h2{margin-top:-8px}
.mv .hint{margin:-10px 0 0;font-size:var(--fs-ui);color:var(--fg-muted)}
[dir="rtl"] .mv h2,[dir="rtl"] .mv .kicker{font-family:var(--font-arabic);font-stretch:normal;letter-spacing:0}
:where(.mv) button{font:inherit;color:inherit;margin:0;-webkit-tap-highlight-color:transparent;cursor:pointer;touch-action:manipulation}
.mv .ic{width:20px;height:20px;flex:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
.caphint{margin:-4px 0 0;display:flex;gap:8px;align-items:center;min-height:24px;font-size:var(--fs-ui);color:var(--fg-muted)}
.caphint .ic{color:var(--primary-ink)}
.caphint.at-max{color:var(--fg)} .caphint.at-max .ic{color:var(--warning)}
bdi{unicode-bidi:isolate}
.lm{fill:currentColor;flex:none}

/* ── running total: "2 hrs · 3 mics · AED 980" (aria-live lives in a sr-only twin; the rolling digits are aria-hidden) ── */
.tot{margin-top:auto;position:relative;display:flex;gap:12px;align-items:center;min-height:64px;padding:12px 16px;border-radius:var(--r-tile);background:var(--surface);border:1px solid var(--line-subtle);box-shadow:var(--shadow-1)}
[data-theme="dark"] .tot{background:var(--surface-raised);border-color:var(--line)}
.tot .lm{width:13px;height:28px;color:var(--primary-ink)}
.tot-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.tot-line{font-size:var(--fs-body);font-weight:600;line-height:1.3}
.tot-line .amt{font-weight:700;color:var(--fg)}
.tot-sub{font-size:var(--fs-ui);color:var(--fg-muted);line-height:1.35}
.tot.flash{animation:tot-flash 520ms var(--ease-brand)}
@keyframes tot-flash{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--primary) 0%,transparent)}35%{box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 22%,transparent)}100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--primary) 0%,transparent)}}

/* rolling digits (CSS NumberFlow, 0 KB): each digit is a 0–9 strip moved by translateY */
/* no overflow:hidden on the boxes (that moves the baseline to the bottom edge); clip-path clips without touching the baseline */
.roll{display:inline-flex;line-height:1;vertical-align:baseline}
.roll .d{display:inline-block;height:1em;clip-path:inset(0)}
.roll .s{display:flex;flex-direction:column;transform:translateY(calc(var(--n, 0) * -1em));transition:transform 420ms var(--ease-brand)}
.roll .s i{font-style:normal;display:block;height:1em;line-height:1}

/* the floating price tag: amber = money moved (the one accent), ink label 10:1 */
.ftag{position:absolute;z-index:6;pointer-events:none;padding:4px 10px;border-radius:var(--r-pill);background:var(--accent);color:var(--accent-on);font:700 var(--fs-ui)/1.25 var(--font-body);white-space:nowrap;box-shadow:0 4px 14px var(--local-tag-glow);animation:ftag 1200ms var(--ease-brand) forwards}
.ftag.minus{background:var(--surface-raised);color:var(--fg-muted);border:1px solid var(--line);box-shadow:none}
@keyframes ftag{0%{opacity:0;transform:translate(-50%,6px) scale(.95)}18%{opacity:1;transform:translate(-50%,-8px) scale(1)}72%{opacity:1;transform:translate(-50%,-14px)}100%{opacity:0;transform:translate(-50%,-26px)}}
@keyframes ftag-fade{0%{opacity:0;transform:translate(-50%,-8px)}15%,75%{opacity:1;transform:translate(-50%,-8px)}100%{opacity:0;transform:translate(-50%,-8px)}}

/* ── stepper (wave-1 option 2 recipe: tactile +, quiet −) ── */
.stepper{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line-subtle);box-shadow:var(--shadow-1)}
[data-theme="dark"] .stepper{background:var(--surface-raised);border-color:var(--line)}
.step-btn{width:var(--t-button-lg);height:var(--t-button-lg);flex:none;border-radius:50%;border:1px solid var(--line);background:var(--canvas);display:grid;place-items:center;color:var(--fg);transition:transform var(--d-180) var(--ease-brand)}
.step-btn svg{width:24px;height:24px;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.step-btn:active:not(:disabled){transform:scale(var(--press-scale));transition-duration:var(--d-120)}
.step-btn[data-d="1"]{background:linear-gradient(180deg,var(--primary-fill),var(--local-primary-deep));color:var(--primary-on);border-color:transparent;box-shadow:var(--tactile-shadow)}
.step-btn[data-d="1"]:active:not(:disabled){box-shadow:var(--tactile-pressed)}
.step-btn:disabled{cursor:not-allowed;background:var(--surface-sunken);color:var(--fg-disabled);border-color:var(--line-subtle);box-shadow:none}
.step-val{display:flex;align-items:baseline;justify-content:center;gap:8px;min-width:0}
.step-val .num{font:700 44px/1 var(--font-display);font-stretch:var(--font-display-stretch);display:inline-block}
.step-val .num.bump{animation:bump var(--d-260) var(--ease-brand)}
@keyframes bump{from{transform:scale(.86);opacity:.4}to{transform:none;opacity:1}}
.step-val .unit{font-size:var(--fs-body);font-weight:600;color:var(--fg-muted)}

/* brackets: "Included" under slots 1–2, "+AED 100 each" under 3–5 (a dimension line, ticks up) */
.brackets{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:10px}
.br{position:relative;padding-top:12px;font-size:var(--fs-ui);font-weight:600;line-height:1.25;text-align:center;color:var(--fg-muted)}
.br::before{content:"";position:absolute;inset-inline:8px;top:0;height:8px;border:1.5px solid var(--line-strong);border-top:0;border-radius:0 0 6px 6px}
.br.inc{grid-column:1 / 3}
.br.ext{grid-column:3 / 6;color:var(--fg)}
.br.ext::before{border-color:var(--accent)}

/* ═════ Option 1 · Logo-mic chips ═════ */
.tray{padding:14px 10px 12px;border-radius:var(--r-card);background:var(--surface-sunken);border:1px solid var(--line-subtle)}
.slots{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.slot{position:relative;height:56px;border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;gap:5px;border:1.5px dashed var(--line-strong);color:var(--fg-disabled);transition:background-color var(--d-180) var(--ease-brand),border-color var(--d-180)}
.slot .lm{width:13px;height:28px;opacity:.55}
.slot .sn{font:700 var(--fs-ui)/1 var(--font-display);font-stretch:var(--font-display-stretch);opacity:0}
.slot.on{border:1px solid var(--line-subtle);background:var(--surface);box-shadow:var(--shadow-1);color:var(--primary-ink)}
[data-theme="dark"] .slot.on{background:var(--surface-raised);border-color:var(--line-strong)}
.slot.on .lm{opacity:1}
.slot.on .sn{opacity:1;color:var(--fg)}
.slot.on.extra{box-shadow:var(--shadow-1),inset 0 -3px 0 var(--accent)}
.slot.pop .lm,.slot.pop .sn{animation:lpop 180ms var(--local-pop) both}
.slot.pop .sn{animation-delay:30ms}
@keyframes lpop{0%{transform:translateY(6px) scale(.6);opacity:0}100%{transform:none;opacity:1}}

/* ═════ Option 2 · 3D-drawn mic ═════ */
.stage{position:relative;padding:4px 2px 0}
.row3{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,1fr);gap:2px;align-items:end}
.pos{position:relative;display:flex;justify-content:center}
.pos .m3{width:60px;height:124px;opacity:.12;filter:grayscale(1);transition:opacity var(--d-260) var(--ease-brand)}
.pos.on .m3{opacity:1;filter:none}
.pos.drop .m3{animation:drop3 320ms var(--ease-brand)}
@keyframes drop3{0%{transform:translateY(-20px);opacity:.25}65%{transform:translateY(2px);opacity:1}100%{transform:none}}
.ptag{position:absolute;left:50%;top:74px;padding:2px 8px;border-radius:var(--r-chip);background:var(--accent);color:var(--accent-on);font:700 var(--fs-ui)/1.25 var(--font-body);white-space:nowrap;transform:translateX(-50%) rotate(-5deg) scale(.7);transform-origin:50% 0;opacity:0;transition:transform var(--d-260) var(--local-pop),opacity var(--d-180)}
.pos.on.extra .ptag{opacity:1;transform:translateX(-50%) rotate(-5deg)}
.desk3{position:relative;height:24px;margin:-14px 0 0;border-radius:12px;background:linear-gradient(180deg,var(--surface-raised),var(--surface-sunken));border:1px solid var(--line-subtle);box-shadow:inset 0 1px 0 var(--local-key-hi),var(--shadow-1)}
[data-theme="dark"] .desk3{background:linear-gradient(180deg,var(--surface-active),var(--surface));border-color:var(--line-strong)}
.desk-note{margin:8px 0 0;font-size:var(--fs-ui);color:var(--fg-muted);text-align:center}

/* ═════ Option 3 · People, not silhouettes ═════ */
.meta{display:flex;flex-direction:column;gap:10px}
.mrow{padding:10px 12px 12px;border-radius:var(--r-tile);background:var(--surface);border:1px solid var(--line-subtle)}
[data-theme="dark"] .mrow{background:var(--surface-raised);border-color:var(--line)}
.mname{margin:0 0 8px;display:flex;gap:8px;align-items:center;font-size:var(--fs-ui);font-weight:600}
.mname b{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--primary-muted);color:var(--fg);font:700 var(--fs-ui)/1 var(--font-display);font-stretch:var(--font-display-stretch)}
/* A · initials */
.avs{display:flex;align-items:center;min-height:48px}
.av{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex:none;margin-inline-start:-8px;border:2px solid var(--surface);font:700 var(--fs-ui)/1 var(--font-body);color:var(--fg);background:var(--av, var(--primary-muted));transition:background-color var(--d-180),opacity var(--d-180)}
/* dark: the muted tints vanish on a raised Ink card, so each avatar mixes its brand hue 34 % into the card (white label stays ≥ 7:1) */
[data-theme="dark"] .av{border-color:var(--surface-raised);background:color-mix(in srgb,var(--av-d, var(--primary)) 34%,var(--surface-raised))}
.av:first-child{margin-inline-start:0}
.av.off{background:transparent;border:1.5px dashed var(--line-strong);color:transparent;margin-inline-start:4px}
.av.pop{animation:spop 180ms var(--local-pop)}
@keyframes spop{from{transform:scale(.7)}to{transform:none}}
/* B · headphones */
.phs{display:flex;gap:12px;align-items:center;min-height:44px}
.ph{width:38px;height:38px;fill:none;stroke:var(--line-strong);stroke-width:2;stroke-linecap:round;transition:stroke var(--d-180)}
.ph{--cup:transparent}
.ph.on{stroke:var(--primary-ink);--cup:var(--primary-ink)}
.ph.pop{animation:spop 180ms var(--local-pop)}
/* C · numbered hex seats (number UNDER the hex) */
.hseats{display:flex;gap:12px;align-items:flex-start}
.hs{display:flex;flex-direction:column;align-items:center;gap:2px}
.hs svg{width:48px;height:55.4px;overflow:visible}
.hs polygon{fill:transparent;stroke:var(--line-strong);stroke-width:1.5;stroke-linejoin:round;transition:fill var(--d-180),stroke var(--d-180)}
.hs .chk{fill:none;stroke:var(--primary-on);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.hs.on polygon{fill:var(--primary-fill);stroke:var(--primary);stroke-width:2}
.hs.on .chk{opacity:1}
.hs.on svg{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--primary) 40%,transparent))}
.hs span{font:600 var(--fs-ui)/1.2 var(--font-body);color:var(--fg-muted)}
.hs.on span{color:var(--fg)}
.hs.pop svg{animation:spop 180ms var(--local-pop)}
/* D · chairs at the table */
.tbl svg{display:block;width:100%;max-width:300px;height:auto;margin-inline:auto}
[dir="rtl"] .tbl svg{transform:scaleX(-1)}
.tbl .table{fill:var(--surface-sunken);stroke:var(--line-strong);stroke-width:1.5}
.tbl .chair{fill:transparent;stroke:var(--line-strong);stroke-width:1.5;stroke-dasharray:4 3;transition:fill var(--d-180)}
.tbl .chair.on{fill:var(--primary-fill);stroke:var(--primary);stroke-dasharray:none}
.tbl .tm{fill:var(--primary-ink);opacity:0;transition:opacity var(--d-180)}
.tbl .tm.on{opacity:1}

/* ═════ Option 4 · Fill meter (tactile keys + hex level ramp) ═════ */
.readout{display:flex;align-items:center;gap:14px;padding:0 4px}
.roll.big{font:700 80px/1 var(--font-display);font-stretch:var(--font-display-stretch);color:var(--primary-ink);letter-spacing:-.02em}
.readout-txt{display:flex;flex-direction:column;gap:2px}
.readout-unit{font:700 var(--fs-h2)/1.1 var(--font-display);font-stretch:var(--font-display-stretch)}
[dir="rtl"] .readout-unit{font-family:var(--font-arabic);font-stretch:normal}
.readout-sub{font-size:var(--fs-ui);color:var(--fg-muted)}
.meter{padding:0 2px}
.cells{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;height:82px}
.cell{position:relative;flex:none;width:var(--w);aspect-ratio:var(--hex-ratio);clip-path:var(--hex-clip);background:var(--line-strong);transition:background-color var(--d-260)}
.cell .in{position:absolute;inset:2px;clip-path:var(--hex-clip);background:var(--surface-sunken);overflow:hidden}
.cell .liq{position:absolute;left:-40%;right:-40%;top:6%;bottom:-40%;background:linear-gradient(180deg,var(--ph-sky) 0%,var(--primary-fill) 18%,var(--local-primary-deep) 100%);box-shadow:inset 0 2px 0 color-mix(in srgb,var(--ph-white) 70%,transparent);transform:translateY(110%) rotate(-9deg);transition:transform 300ms var(--ease-brand) var(--delay, 0ms)}
[dir="rtl"] .cell .liq{transform:translateY(110%) rotate(9deg)}
.cell.on{background:var(--primary)}
.cell.on .liq{transform:translateY(0) rotate(-9deg)}
[dir="rtl"] .cell.on .liq{transform:translateY(0) rotate(9deg)}
.brackets.m{display:flex;justify-content:space-between;gap:8px;margin-top:8px}
.brackets.m .br.inc{flex:none;width:calc(var(--w1) + var(--w2) + 8px)}
.mtag{flex:none;width:var(--w);text-align:center;font:700 var(--fs-ui)/1.25 var(--font-body);color:var(--fg-subtle);padding-top:12px;position:relative}
.mtag::before{content:"";position:absolute;inset-inline:6px;top:0;height:8px;border:1.5px solid var(--accent);border-top:0;border-radius:0 0 6px 6px}
.mtag.on{color:var(--fg)}
.keys{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding-bottom:4px}
.key{position:relative;height:68px;border-radius:18px;border:1px solid var(--line-subtle);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:linear-gradient(180deg,var(--surface-raised),var(--surface-hover));
  box-shadow:inset 0 1px 0 var(--local-key-hi),inset 0 -3px 0 var(--local-key-lo),var(--local-key-drop);transition:transform var(--d-180) var(--ease-brand)}
[data-theme="dark"] .key{border-color:var(--line-strong);background:linear-gradient(180deg,var(--surface-active),var(--surface-raised))}
.key .n{font:700 24px/1 var(--font-display);font-stretch:var(--font-display-stretch)}
.key .led{width:16px;height:16px;display:grid;place-items:center}
.key .led::before{content:"";width:7px;height:7px;border-radius:50%;border:1.5px solid var(--line-strong)}
.key .led svg{display:none;width:16px;height:16px;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;fill:none}
.key:active{transform:translateY(2px) scale(var(--press-scale));box-shadow:inset 0 2px 6px var(--local-key-lo);transition-duration:var(--d-120)}
.key[aria-checked="true"]{background:linear-gradient(180deg,var(--primary-fill),var(--local-primary-deep));color:var(--primary-on);border-color:transparent;box-shadow:var(--tactile-shadow)}
.key[aria-checked="true"]:active{box-shadow:var(--tactile-pressed)}
.key[aria-checked="true"] .led::before{display:none}
.key[aria-checked="true"] .led svg{display:block}

/* ═════ Option 5 · Waveform channels ═════ */
.desk5{border-radius:var(--r-card);background:var(--surface-sunken);border:1px solid var(--line-subtle);padding:8px 12px 12px}
.desk5-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:var(--fs-ui);font-weight:600;color:var(--fg-muted);margin-bottom:4px}
.pause{min-height:var(--t-min);min-width:var(--t-min);padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);display:inline-flex;gap:6px;align-items:center;font-size:var(--fs-ui);font-weight:600;transition:transform var(--d-180) var(--ease-brand)}
[data-theme="dark"] .pause{background:var(--surface-raised);border-color:var(--line-strong)}
.pause:active{transform:scale(var(--press-scale))}
.pause svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;fill:currentColor}
.chans{display:flex;flex-direction:column;gap:4px}
.chan{display:grid;grid-template-columns:104px 1fr;gap:10px;align-items:center;min-height:46px}
.cl{display:flex;flex-direction:column;line-height:1.2}
.cl b{font-size:var(--fs-ui);color:var(--fg-subtle)}
.cl span{font-size:var(--fs-ui);color:var(--fg-subtle)}
.chan.on .cl b{color:var(--fg)}
.chan.on .cl span{color:var(--fg-muted)}
.chan.on.extra .cl span{color:var(--fg)}
.bars{display:flex;align-items:center;gap:2px;height:36px}
.bars i{flex:1;height:100%;border-radius:2px;background:var(--line-strong);transform:scaleY(.08);transition:transform 280ms var(--ease-brand) calc(var(--k) * 8ms),background-color var(--d-180)}
.chan.on .bars i{background:var(--primary-fill);transform:scaleY(var(--hi));animation:wv var(--dur) ease-in-out var(--del) infinite alternate}
@keyframes wv{from{transform:scaleY(var(--hi))}to{transform:scaleY(var(--lo))}}
.desk5.paused .chan.on .bars i{animation-play-state:paused}
.cchips{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.cchip{position:relative;height:52px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-1);display:flex;align-items:center;justify-content:center;gap:4px;font:700 18px/1 var(--font-display);font-stretch:var(--font-display-stretch);transition:transform var(--d-180) var(--ease-brand)}
[data-theme="dark"] .cchip{background:var(--surface-raised);border-color:var(--line-strong)}
.cchip:active{transform:scale(var(--press-scale));transition-duration:var(--d-120)}
.cchip svg{width:16px;height:16px;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;fill:none;display:none}
.cchip[aria-checked="true"]{background:linear-gradient(180deg,var(--primary-fill),var(--local-primary-deep));border-color:transparent;color:var(--primary-on);box-shadow:var(--tactile-shadow)}
.cchip[aria-checked="true"] svg{display:block}

/* ── reduced motion: decoration off, state stays (L22; rule 20 "a fade, never a flight") ── */
@media (prefers-reduced-motion:reduce){
  .frame.mv *,.frame.mv *::before,.frame.mv *::after{animation:none!important;transition:none!important}
  .frame.mv .ftag{animation:ftag-fade 1200ms linear forwards!important}
  .pause{display:none}
}

/* ── lab shell at a 390 px phone: drop the shell's side padding so the 390 column fits (shell not ours to edit) ── */
@media (max-width:421px){
  .options{padding-inline:0;grid-template-columns:390px;justify-content:start}
  .option .label{padding-inline:16px}
}
.option .label code{display:block;margin-top:6px;line-height:1.5}