/* Live Stage look: the kit's wrkshp Exercises tokens (/kit/live-stage.css, vendor/exercise-kit v0.1.0) under this
   exercise's names, plus the two scale colours (manager blue, team amber). */
:root {
  --stage: var(--kit-bg, #0b2330); --stage-2: var(--kit-surface, #123342); --stage-3: #1b4253; --line: var(--kit-border, #53717e);
  --cream: var(--kit-ink, #faf3e8); --muted: var(--kit-muted, #b5c7cf); --amber: var(--kit-accent, #ffad65); --amber-ink: var(--kit-on-accent, #0b2330);
  --manager: #8fb8d6; --team: #ffcf8a; --danger: var(--kit-danger, #ffb4a7); --ok: var(--kit-gain, #a6e3c5);
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--stage); color: var(--cream); font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
button { font: inherit; font-weight: 650; min-height: 44px; padding: 10px 16px; border-radius: 10px; border: 1px solid var(--amber); background: var(--amber); color: var(--amber-ink); cursor: pointer; }
button.ghost { background: transparent; color: var(--cream); border-color: var(--line); }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
input, select { font: inherit; min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--stage-2); color: var(--cream); width: 100%; }
.eyebrow { color: var(--amber); font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 700; margin: 0 0 6px; }
.muted { color: var(--muted); }
.error { color: var(--danger); }
.build { position: fixed; left: 10px; bottom: 6px; font-size: 11px; color: var(--muted); opacity: .7; }
.ribbon { position: fixed; top: 14px; right: -40px; transform: rotate(35deg); background: var(--amber); color: var(--amber-ink); font-weight: 800; padding: 4px 48px; font-size: 13px; letter-spacing: 1px; z-index: 50; }
.tag { height: 18px; display: block; margin: 0 0 14px; }

/* level colour: manager end blue, team end amber */
.lv { display: inline-flex; align-items: center; justify-content: center; font-weight: 800; border-radius: 8px; color: var(--amber-ink); }
.lv-1 { background: #8fb8d6; } .lv-2 { background: #a3c2d4; } .lv-3 { background: #b9cdd0; } .lv-4 { background: #d6d6c4; }
.lv-5 { background: #ead4a8; } .lv-6 { background: #f6d094; } .lv-7 { background: #ffcf8a; }

/* ---------- phone ---------- */
body.phone main { max-width: 520px; margin: 0 auto; padding: 20px 16px calc(40px + var(--wrkshp-follow-bottom, 16px)); }
body.phone h1 { font-size: 1.5rem; margin: 0 0 8px; line-height: 1.2; }
body.phone h2 { font-size: 1.2rem; margin: 18px 0 8px; }
.cards { display: grid; gap: 8px; margin: 12px 0; }
.card-btn { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; text-align: left; background: var(--stage-2); color: var(--cream); border: 2px solid var(--line); padding: 8px 10px; }
.card-btn .lv { width: 40px; height: 40px; font-size: 1.2rem; }
.card-btn strong { display: block; }
.card-btn small { color: var(--muted); font-weight: 400; }
.card-btn[aria-pressed="true"] { border-color: var(--amber); background: var(--stage-3); }
.compact { grid-template-columns: repeat(7, 1fr); }
.compact .card-btn { grid-template-columns: 1fr; padding: 4px; justify-items: center; }
.compact .card-btn small, .compact .card-btn strong { display: none; }
.compact .card-btn { gap: 4px; min-height: 64px; }
.compact .card-btn .lv { width: 34px; height: 34px; }
.compact .card-btn .short { font-size: 10.5px; line-height: 1.15; font-weight: 600; text-align: center; color: var(--muted); overflow-wrap: anywhere; hyphens: auto; }
.compact { gap: 4px; }
.list { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; background: var(--stage-2); border-radius: 8px; overflow-wrap: anywhere; }
.list li .lv { width: 32px; height: 32px; flex: 0 0 32px; }
.consequence { background: var(--stage-3); border-left: 4px solid var(--amber); padding: 12px 14px; border-radius: 8px; margin: 14px 0; }
.lens { display: grid; gap: 8px; margin: 10px 0; }

/* ---------- wall ---------- */
body.wall { overflow: hidden; }
.wall-root { height: 100vh; padding: 3vh 3vw calc(3vh + var(--wrkshp-join-space, 0px)); box-sizing: border-box; display: flex; flex-direction: column; gap: 2vh; }
.wall-root h1 { font-size: 5vh; margin: 0; line-height: 1.15; }
.wall-root h2 { font-size: 3.4vh; margin: 0; }
.wall-root .lead { font-size: 3vh; color: var(--muted); margin: 0; max-width: 70ch; }
.plate { flex: 1; display: grid; grid-template-rows: auto 1fr auto; gap: 2vh; }
.plate .draw { display: flex; align-items: center; justify-content: center; gap: 1.2vw; flex-wrap: wrap; }
.plate .line { font-size: 3.4vh; border-top: 2px solid var(--line); padding-top: 1.4vh; }
.bigcard { display: inline-flex; align-items: center; justify-content: center; width: 8vh; height: 11vh; font-size: 5vh; border-radius: 1.2vh; }
.facedown { background: repeating-linear-gradient(45deg, var(--stage-3), var(--stage-3) 8px, var(--stage-2) 8px, var(--stage-2) 16px); border: 2px solid var(--line); }
.scale { display: grid; grid-template-columns: repeat(7, 1fr); gap: .8vw; width: 100%; }
.scale div { padding: 1.2vh .6vw; border-radius: 1vh; font-size: 2vh; text-align: center; min-height: 14vh; }
.scale b { display: block; font-size: 4vh; }
.scenario-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2vw; }
.scenario-head .text { font-size: 2.8vh; color: var(--muted); margin: .6vh 0 0; max-width: 80ch; }
.stagebar { font-size: 2.4vh; color: var(--amber); white-space: nowrap; }
.wall-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 34%; gap: 2vw; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(15vw, 1fr)); gap: 1vh; align-content: start; overflow: hidden; }
.tile { background: var(--stage-2); border: 2px solid var(--stage-3); border-radius: 1vh; padding: 1vh; }
.tile.spot { border-color: var(--amber); }
.tile h3 { margin: 0 0 .6vh; font-size: 2vh; display: flex; justify-content: space-between; gap: .5vw; }
.tile .row { display: flex; gap: .4vw; flex-wrap: wrap; }
.tile .mini { width: 2.8vh; height: 3.6vh; font-size: 1.9vh; border-radius: .5vh; }
.tile .gap { font-size: 1.7vh; color: var(--muted); margin-top: .5vh; }
.tile .agreed { color: var(--ok); }
.side { display: flex; flex-direction: column; gap: 2vh; min-height: 0; }
.panel { background: var(--stage-2); border-radius: 1.2vh; padding: 1.6vh 1.2vw; }
.hist { display: grid; grid-template-columns: repeat(7, 1fr); gap: .4vw; align-items: end; height: 16vh; }
.hist div { border-radius: .5vh .5vh 0 0; min-height: 2px; position: relative; }
.hist span { position: absolute; top: -2.4vh; left: 0; right: 0; text-align: center; font-size: 1.7vh; color: var(--cream); }
.hist-axis { display: grid; grid-template-columns: repeat(7, 1fr); gap: .4vw; text-align: center; font-size: 1.6vh; color: var(--muted); margin-top: .4vh; }
.spotlight .names { display: grid; gap: .6vh; margin-top: 1vh; }
.spotlight .names div { display: flex; justify-content: space-between; align-items: center; font-size: 2.2vh; }
.spotlight .names .lv { width: 3.6vh; height: 3.6vh; }
.board { width: 100%; border-collapse: collapse; font-size: 2vh; }
.board th, .board td { border-bottom: 1px solid var(--stage-3); padding: .6vh .4vw; text-align: center; vertical-align: middle; }
.board th:first-child, .board td:first-child { text-align: left; width: 26%; }
/* Header: the level badge sits above its word with room around it (Playtest 11: the badges overlapped the words). */
.board th .lv { width: 3.4vh; height: 3.4vh; font-size: 2vh; line-height: 1; margin: 0 auto .6vh; display: flex; }
.board th .muted { display: block; line-height: 1.2; white-space: nowrap; }
.board .chips { display: flex; flex-wrap: wrap; gap: .3vw; justify-content: center; }
.board .chip { font-size: 1.4vh; padding: .2vh .4vw; border-radius: .6vh; background: var(--cream); color: var(--amber-ink); font-weight: 700; }
.board td.inrange { background: rgba(255, 173, 101, .08); }
.debrief-card { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 2.4vh; max-width: 80vw; }
.debrief-card .big { font-size: 4.4vh; line-height: 1.3; margin: 0; }
.debrief-card ul { font-size: 3vh; margin: 0; padding-left: 1.4em; display: grid; gap: 1.2vh; }
.naming .name { font-size: 7vh; color: var(--amber); margin: 0; }
.example { position: fixed; inset: 6vh 8vw calc(6vh + var(--wrkshp-join-space, 0px)); background: var(--stage-3); border: 2px solid var(--amber); border-radius: 2vh; padding: 4vh 4vw; display: flex; flex-direction: column; gap: 2vh; font-size: 3vh; z-index: 20; }
.example .connect { color: var(--amber); font-weight: 700; }

/* ---------- console ---------- */
body.console main { max-width: 1040px; margin: 0 auto; padding: 22px 18px 48px; }
.status { background: var(--stage-2); border-radius: 10px; padding: 14px 16px; margin: 12px 0 18px; }
.status .line { font-weight: 650; font-size: 1.05rem; }
.strip { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0; }
.strip select { width: auto; min-width: 180px; }
.console table { width: 100%; border-collapse: collapse; }
.console td, .console th { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--stage-3); }
.links { display: grid; gap: 6px; font-size: .9rem; overflow-wrap: anywhere; }
.links a { color: var(--amber); }
.footnote { font-size: .85rem; color: var(--muted); }
@media (max-width: 600px) { body.console main { padding: 16px; } }