/* wrkshp Exercises: the Live Stage visual family for every Workshop Pro exercise.
   Tokens come from Flowport's facilitator page (web/facilitator/style.css, body.wrkshp-console) and the apps' console
   foundation (wrkshp-apps/template/web/shared/style.css), plus the platform join strip's teal, cream and amber.
   Link once per page: <link rel="stylesheet" href="/kit/live-stage.css">. Then add a body class: kit-phone, kit-wall
   or kit-console. Wall and console are dark only (rooms are dim, projectors wash out light pages); the phone follows
   the device's light or dark setting. */
:root {
  --kit-bg: #0b2330;          /* deep teal: wall and console background */
  --kit-surface: #123342;     /* cards, panels */
  --kit-deep: #071b26;        /* sunken status areas */
  --kit-ink: #faf3e8;         /* cream text */
  --kit-muted: #b5c7cf;
  --kit-accent: #ffad65;      /* amber: primary buttons, round chip, focus */
  --kit-on-accent: #0b2330;
  --kit-code: #f2b33d;        /* join codes (the platform join strip's amber) */
  --kit-border: #35535f;
  --kit-gain: #b2e4c4;
  --kit-loss: #ffb18c;
  --kit-danger: #ffb4a7;
  --kit-table-1: #7cc4d8; --kit-table-2: #f2b33d; --kit-table-3: #c9a7f0; --kit-table-4: #9fd89a;
  --kit-table-5: #f59e9e; --kit-table-6: #8fb3ff; --kit-table-7: #f0c987; --kit-table-8: #a8e0d4;
  --kit-radius: 12px;
  --kit-font: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --kit-gutter: 16px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { font-family: var(--kit-font); line-height: 1.45; }
button { font: inherit; font-weight: 700; min-height: 48px; padding: 12px 18px; border-radius: 10px; border: 1px solid var(--kit-border); background: transparent; color: inherit; cursor: pointer; }
button.kit-primary, .kit-primary { background: var(--kit-accent); color: var(--kit-on-accent); border-color: var(--kit-accent); }
button:disabled { opacity: .45; cursor: not-allowed; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--kit-accent); outline-offset: 2px; }
.kit-gain { color: var(--kit-gain); } .kit-loss { color: var(--kit-loss); }
.kit-chip { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--kit-surface); color: var(--kit-accent); font-weight: 700; font-size: .85rem; font-variant-numeric: tabular-nums; }
.kit-ribbon { position: fixed; top: 14px; right: -42px; transform: rotate(35deg); background: var(--kit-accent); color: var(--kit-on-accent); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 6px 54px; z-index: 50; font-size: 13px; pointer-events: none; }

/* ---- phone ------------------------------------------------------------------------------------------------------ */
body.kit-phone {
  --kit-p-bg: light-dark(#f7f4ee, #0b2330); --kit-p-ink: light-dark(#142f3b, #faf3e8); --kit-p-muted: light-dark(#43616e, #b5c7cf);
  --kit-p-card: light-dark(#ffffff, #123342); --kit-p-line: light-dark(#d9d3c7, #35535f);
  color-scheme: light dark; background: var(--kit-p-bg); color: var(--kit-p-ink); min-height: 100dvh;
  --wrkshp-follow-bottom: 96px; /* the follow pill ("Reconnecting", "Tap to catch up") clears the primary control */
}
.kit-phone main { max-width: 480px; margin: 0 auto; padding: 20px var(--kit-gutter) 120px; }
.kit-phone header.kit-phone-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.kit-phone .kit-name { font-weight: 700; overflow-wrap: anywhere; }
.kit-phone .kit-seat { color: var(--kit-p-muted); font-size: .9rem; }
.kit-phone .kit-card { background: var(--kit-p-card); border: 1px solid var(--kit-p-line); border-radius: var(--kit-radius); padding: 18px; }
.kit-phone .kit-wait { font-size: 1.25rem; font-weight: 600; }
.kit-phone .kit-result { font-size: 1.15rem; font-weight: 600; }
.kit-phone .kit-muted { color: var(--kit-p-muted); }
.kit-phone .kit-error { color: light-dark(#982b24, #ffb4a7); font-weight: 600; }
.kit-phone .kit-choices { display: grid; gap: 10px; }
.kit-phone .kit-choices button { width: 100%; text-align: left; min-height: 56px; background: var(--kit-p-card); border-color: var(--kit-p-line); }
.kit-phone .kit-choices button[aria-pressed="true"] { background: var(--kit-accent); color: var(--kit-on-accent); border-color: var(--kit-accent); }
.kit-phone input[type=text] { width: 100%; font: inherit; padding: 12px; border: 1px solid var(--kit-p-line); border-radius: 10px; background: var(--kit-p-card); color: inherit; }
.kit-phone .kit-tag { height: 18px; display: block; margin: 0 0 14px; }

/* ---- wall -------------------------------------------------------------------------------------------------------- */
body.kit-wall { background: var(--kit-bg); color: var(--kit-ink); color-scheme: dark; overflow: hidden; }
/* The wall keeps the platform join strip's room clear at the bottom of its root (STANDARD section 11); its own
   background runs under the strip. No body padding: a padded body made Flowport's TV scroll. */
.kit-wall-root { height: 100dvh; display: flex; flex-direction: column; padding: 2.5vh 3vw calc(2.5vh + var(--wrkshp-join-space, 0px)); box-sizing: border-box; }
.kit-wall-head { display: flex; justify-content: space-between; align-items: baseline; gap: 2vw; margin-bottom: 2vh; }
.kit-wall-head h1 { margin: 0; font-size: clamp(22px, 3.4vh, 44px); letter-spacing: -.02em; }
.kit-wall-head .kit-chip { font-size: clamp(14px, 2.2vh, 28px); padding: .3em .9em; }
.kit-wall-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.kit-wall-step { font-size: clamp(22px, 4.2vh, 56px); line-height: 1.25; max-width: 32ch; font-weight: 600; }
.kit-wall-step h2 { font-size: .6em; color: var(--kit-accent); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .6em; }
.kit-wall-question { margin-top: 1em; color: var(--kit-muted); font-size: .8em; }
.kit-wall-timer { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--kit-accent); font-size: clamp(28px, 6vh, 80px); }
.kit-wall-join { margin-top: auto; align-self: flex-end; background: var(--kit-surface); border: 1px solid var(--kit-border); border-radius: var(--kit-radius); padding: 1.4vh 1.6vw; font-size: clamp(14px, 2.4vh, 30px); }
.kit-wall-join strong { color: var(--kit-code); font-size: 1.5em; letter-spacing: .06em; }
.kit-paused { position: fixed; inset: auto 0 45% 0; text-align: center; font-size: clamp(30px, 8vh, 110px); font-weight: 800; color: var(--kit-accent); text-shadow: 0 4px 24px rgba(0,0,0,.5); pointer-events: none; }

/* ---- console (facilitator) --------------------------------------------------------------------------------------- */
body.kit-console { background: var(--kit-bg); color: var(--kit-ink); color-scheme: dark; min-height: 100dvh; }
.kit-console main { max-width: 1160px; margin: 0 auto; padding: 20px var(--kit-gutter) 40px; display: grid; gap: 18px; }
.kit-strip { position: sticky; top: 0; z-index: 10; background: var(--kit-deep); border: 1px solid var(--kit-border); border-radius: var(--kit-radius); padding: 16px; display: grid; gap: 12px; }
.kit-strip-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.kit-strip-line strong { font-size: 22px; letter-spacing: -.02em; }
.kit-strip-line .kit-timer { color: var(--kit-accent); font-weight: 800; font-size: 24px; font-variant-numeric: tabular-nums; }
.kit-strip-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.kit-strip-buttons button { flex: 1 1 140px; }
.kit-strip-error { color: var(--kit-danger); font-weight: 600; }
.kit-guide { background: var(--kit-surface); border: 1px solid var(--kit-border); border-radius: var(--kit-radius); padding: 18px; }
.kit-guide h2 { margin: 0 0 6px; font-size: 18px; }
.kit-guide-meta { color: var(--kit-muted); margin: 0 0 12px; font-size: 13px; }
.kit-guide-section { border-top: 1px solid var(--kit-border); padding: 10px 0; }
.kit-guide-section summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 700; }
.kit-guide-section.is-current summary { color: var(--kit-accent); }
.kit-guide-say strong, .kit-guide-watch strong { color: var(--kit-muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---- wall layouts (web/wall-layouts.js) ------------------------------------------------------------------------- */
.kit-table-grid { display: grid; gap: 1.2vh 1vw; flex: 1; min-height: 0; align-content: start; }
.kit-table { background: var(--kit-surface); border: 1px solid var(--kit-border); border-top: 6px solid var(--kit-table-color, var(--kit-accent)); border-radius: var(--kit-radius); padding: 1vh 1vw; min-width: 0; }
.kit-table.is-spotlit { outline: 4px solid var(--kit-accent); }
.kit-table h3 { margin: 0 0 .5vh; font-size: clamp(14px, 2.2vh, 28px); }
.kit-table-grid.is-dense .kit-table h3 { font-size: clamp(11px, 1.5vh, 18px); }
.kit-seats { list-style: none; margin: 0; padding: 0; display: grid; gap: .3vh; font-size: clamp(12px, 1.8vh, 22px); }
.kit-seats li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-seats li.is-bot { color: var(--kit-muted); font-style: italic; }
.kit-seats li.is-empty { color: var(--kit-muted); }
.kit-seats small { color: var(--kit-muted); }
.kit-spotlight { background: var(--kit-surface); border-top: 10px solid var(--kit-table-color, var(--kit-accent)); border-radius: var(--kit-radius); padding: 3vh 3vw; font-size: clamp(18px, 3vh, 40px); }
.kit-spotlight h2 { margin: 0 0 2vh; font-size: 1.8em; }
.kit-spotlight-label, .kit-example-label { color: var(--kit-accent); letter-spacing: .12em; text-transform: uppercase; font-weight: 800; font-size: .6em; margin: 0 0 1vh; }
.kit-reveal, .kit-leaderboard { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2vh; font-size: clamp(18px, 3.2vh, 42px); }
.kit-reveal-item, .kit-leaderboard li { display: flex; justify-content: space-between; gap: 2vw; background: var(--kit-surface); border-radius: var(--kit-radius); padding: 1.2vh 1.6vw; }
.kit-rank { color: var(--kit-accent); font-weight: 800; min-width: 2ch; }
.kit-example { margin-top: 2vh; background: var(--kit-deep); border-left: 6px solid var(--kit-accent); border-radius: var(--kit-radius); padding: 2vh 2vw; font-size: clamp(18px, 3vh, 38px); max-width: 60ch; }
.kit-example-connect { color: var(--kit-accent); font-weight: 700; }