/* The live panel (docs/pt/WORKSHOP-V2-SPEC.md, section 6.1; D-34): the dark theme of /status (demo-project/DESIGN.md),
   legible on a projector at 640 x 1080 and wide. Every view is the top strip plus at most 3 elements, the leaderboard
   being the main one. Main numbers are 64px or more, every text 24px or more. Only transform and opacity move, for
   400ms at most, and nothing moves with prefers-reduced-motion or ?lite=1. */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('fonts/bricolage-grotesque-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;
  --bg: #0f1311;
  --surface: #1a201d;
  --surface-2: #252c28;
  --ink: #e8ede9;
  --muted: #9ba59f;
  --accent: #7d9bff;
  --accent-ink: #0b1020;
  --status-gray: #3a423e;
  --status-yellow: #f1c232;
  --status-green: #2fbf6c;
  --status-red: #ef5b52;
  /* a mission square filling up: green, dark enough for --ink on top of it */
  --green-fill: color-mix(in srgb, var(--status-green) 46%, var(--surface));
  --font: 'Bricolage Grotesque', system-ui, sans-serif;
  --t-text: 24px;
  --t-title: 32px;
  --t-mid: 40px;
  --t-num: 64px;
  --t-huge: 128px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --move: 320ms;
  --gutter: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-text);
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
h2, h3, p, figure, ol { margin: 0; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }

/* the page is exactly one screen: the leaderboard takes what is left and shows the rows that fit */
.panel {
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: var(--gutter);
  overflow: hidden;
}

.num { font-size: var(--t-num); font-weight: 700; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }
.num.huge { font-size: var(--t-huge); }
.label, .note, .head, .status, .waiting { font-size: var(--t-text); }
.label, .note, .head, .status { color: var(--muted); }

/* bars: a gray track and a fill scaled with --v (0 to 1), set through CSSOM */
.bar { position: relative; height: 16px; background: var(--status-gray); overflow: hidden; }
.fill {
  position: absolute;
  inset: 0;
  background: var(--status-green);
  transform-origin: left center;
  transform: scaleX(var(--v, 0));
  transition: transform var(--move) var(--ease);
}
[data-tone='yellow'] .fill { background: var(--status-yellow); }
[data-tone='red'] .fill { background: var(--status-red); }

/* a room, as a small tag next to a name */
.room-tag {
  flex: none;
  min-width: 1.6em;
  padding: 0 6px;
  font-size: var(--t-text);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: var(--muted);
  background: var(--surface-2);
}

/* ---------- the top strip ---------- */

.strip {
  flex: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 24px;
  padding: 12px 16px;
  background: var(--surface);
}
.strip-cell { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cost-line { display: flex; align-items: center; gap: 16px; min-width: 0; }
.cost-line .meter { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cost-line .note { align-self: flex-end; white-space: nowrap; }

/* ---------- views ---------- */

.view { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.view > * { flex: none; }
.view-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.view-title { font-size: var(--t-title); font-weight: 650; line-height: 1.15; text-wrap: balance; }
.status[data-tone='yellow'] { color: var(--status-yellow); }
.block { min-width: 0; }
.block .head { font-weight: 600; margin-bottom: 10px; text-wrap: balance; }
.waiting { color: var(--muted); }
.empty { color: var(--muted); }

/* stats: a big number and its label */
.stat { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pair-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ---------- the leaderboard (the main element of every view) ---------- */

.view > .main { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.board-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 16px; margin-bottom: 10px; }
.board-head .head { margin: 0; }
.board-list {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.brow {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 4px 12px 4px 8px;
  background: var(--surface);
  border-left: 6px solid transparent;
}
.brow .rank { flex: none; width: 2ch; text-align: right; font-weight: 700; color: var(--muted); }
.brow .name { flex: 1 1 auto; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brow .anon { color: var(--muted); }
.brow .pts { flex: none; min-width: 2ch; text-align: right; font-size: var(--t-title); font-weight: 700; line-height: 1; }
/* the first three, subtly: the accent on the rank and on the left edge */
.brow.podium { border-left-color: var(--accent); }
.brow.podium .rank { color: var(--accent); }
.board-list > .empty { padding: 8px 0; }

/* each person's missions: one small square per mission */
.squares { flex: none; display: flex; gap: 3px; }
.sq { display: block; width: 16px; height: 16px; background: var(--status-gray); }
.sq.on { background: var(--status-green); }

/* the stage of a project: one segment per stage, then its name */
.stage { flex: none; display: flex; align-items: center; gap: 10px; }
.segs { display: flex; gap: 3px; }
.seg { display: block; width: 16px; height: 12px; background: var(--status-gray); }
.seg.on { background: var(--accent); }
.seg.on.warn { background: var(--status-yellow); }
.seg.on.ok { background: var(--status-green); }
.stage-name { min-width: 7.5ch; color: var(--ink); }
.stage-name.none { color: var(--muted); }

/* the closing: the full leaderboard (15 to 20 rows), a points bar */
.mode-points .board-list { gap: 3px; }
.mode-points .brow { min-height: 36px; padding-block: 2px; }
.pbar { flex: 0 1 34%; min-width: 60px; height: 12px; }
.pbar .fill { background: var(--accent); }
.podium .pbar .fill { background: var(--status-green); }

/* the opening's names: as many columns as fit */
.names-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-auto-rows: min-content; align-content: start; }
.names-list > .empty { grid-column: 1 / -1; }
.names-list .brow { padding-left: 12px; }

/* ---------- missions ---------- */

.mgrid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; }
.mcell {
  position: relative;
  min-height: 72px;
  padding: 4px 2px;
  background: var(--surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.mcell .fill { background: var(--green-fill); transform-origin: center bottom; transform: scaleY(var(--v, 0)); }
.mcell > :not(.fill) { position: relative; }
.mcell .id { font-size: var(--t-text); font-weight: 600; color: var(--muted); }
.mcell .pct { font-size: var(--t-text); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; }
.mcell.least { outline: 4px solid var(--status-yellow); outline-offset: -4px; }
.try {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  margin-top: 10px;
  padding: 6px 14px;
  background: var(--surface);
  border-left: 8px solid var(--status-yellow);
}
.try-label { font-size: var(--t-text); color: var(--muted); }
.try-what { font-size: var(--t-text); font-weight: 700; }

/* the feed */
.feed { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.feed li { font-size: var(--t-text); line-height: 1.25; }
.feed .who { font-weight: 700; }
.feed .room-tag { display: inline-block; }
.nick {
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  background: var(--surface-2);
  border: 0;
  border-radius: 0;
  padding: 0 8px;
  text-align: left;
  cursor: pointer;
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

/* charts (inline SVG built in panel.js) */
.chart { min-width: 0; }
.chart svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.tick { font-size: var(--t-text); fill: var(--muted); font-family: var(--font); }
.chart .empty { font-size: var(--t-text); fill: var(--muted); font-family: var(--font); }
.gridline { stroke: var(--surface-2); stroke-width: 2; }
.axisline { stroke: var(--status-gray); stroke-width: 2; }
.dot { fill: var(--muted); }
.dot.par-4 { fill: var(--status-yellow); }
.dot.par-8 { fill: var(--accent); }
.dot.par-12 { fill: var(--ink); }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 8px; }
.legend .key { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-text); }
.legend .key.text { color: var(--muted); margin-right: 8px; }

/* project 2: the funnel, one cell per step */
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.step {
  position: relative;
  min-height: 84px;
  padding: 6px 10px;
  background: var(--surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.step .fill { background: var(--green-fill); transform-origin: center bottom; transform: scaleY(var(--v, 0)); }
.step > :not(.fill) { position: relative; }
.step .stage { font-size: var(--t-text); color: var(--muted); }
.step .n { font-size: var(--t-mid); font-weight: 700; line-height: 1; }

/* closing: the 3 numbers side by side */
.better-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.better-row .label { text-wrap: balance; }

/* the presenter's messages */
.toast {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: var(--gutter);
  padding: 12px 16px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: var(--t-text);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
  pointer-events: none;
}
.toast.on { opacity: 1; transform: none; }

/* a wide window: the leaderboard on the left, the rest of the view on the right */
@media (min-width: 1100px) {
  .panel { padding: 24px 32px; gap: 28px; }
  .strip { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); padding: 14px 24px; }
  .cost-line .meter { max-width: 640px; }
  .view {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    gap: 28px 56px;
  }
  .view-head, .view > .waiting { grid-column: 1 / -1; }
  .view > .main { grid-column: 1; grid-row: 2 / -1; }
  .view > .block:not(.main) { grid-column: 2; }
  .brow { min-height: 48px; }
  .mode-points .brow { min-height: 38px; }
  .mcell { min-height: 96px; }
  .mcell .pct { font-size: var(--t-title); }
  .try-what { font-size: var(--t-mid); }
  .step { min-height: 120px; }
  .step .n { font-size: var(--t-num); }
  .better-row { grid-template-columns: 1fr; gap: 28px; }
  .better-row .stat { flex-direction: row; align-items: baseline; gap: 24px; }
  .better-row .num { font-size: var(--t-huge); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
.lite *, .lite *::before, .lite *::after { transition: none !important; animation: none !important; }