/* Crowd pick (play.zaiphr.ai/crowd-pick and /crowd-pick-stage), after shell.css,
   play.css and host.css, in the same layers. Direction B, "Split" (Matt,
   2026-10-18): the question and a ranked chart of answers on the left, a
   scoreboard column on the right. The board is play-surface §7's: ranked bar-chart
   rows (rank, answer, count, a neutral bar that grows from the rank by scaleX),
   never panels that flip; misses are three small dots with words, never a red X;
   flame marks the row just revealed (a rail), the team that's up and the one
   primary button. Everything in .cstage is in STAGE px on the fixed 1920x1080
   stage that crowd.js zooms to fit (P6 §4). Host UI is CSS px.

   Designer's licence (P7), named: the raised shadow under the team cards and the
   results card (as the quiz's). Hard rules hold: contrast (bars are a tint of the
   ground under ink text), tokens only, transform and opacity motion, no flashing. */

@layer layout {
  .crowd-area { position: relative; min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(200px, 1fr) minmax(0, auto); gap: 12px; }
  @media (max-width: 899px) {
    .crowd-area { display: block; }
    .crowd-area .desk { margin-top: 12px; }
  }
}

@layer components {
  .desk-signal { color: var(--z-accent-text); }

  /* the host's sheet: the round's answers in rank order, two columns when there's room */
  .desk-main { container-type: inline-size; }
  .answers { display: grid; gap: 6px; }
  @container (min-width: 640px) { .answers { grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(var(--half, 4), auto); column-gap: 10px; } }
  .ans {
    position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px 6px 9px; overflow: hidden;
    border-radius: 12px; border: 1px solid var(--z-border-strong); background: var(--z-surface-1); color: var(--z-fg); font: inherit; text-align: left; cursor: pointer;
    transition: border-color var(--z-dur-micro) ease, transform var(--z-dur-micro) ease;
  }
  @media (hover: hover) { .ans:not([aria-disabled='true']):hover { border-color: var(--z-border-control); } .ans:not([aria-disabled='true']):hover .ans-state { color: var(--z-fg); } }
  .ans:not([aria-disabled='true']):active { transform: scale(0.98); }
  .ans[aria-disabled='true'] { cursor: default; background: transparent; }
  .ans > :not(.ans-bar) { position: relative; }
  .ans-bar { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--w, 0)); background: color-mix(in oklab, var(--z-fg) 6%, transparent); }
  .ans-key { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--z-border-control); font-size: 12px; font-weight: 600; color: var(--z-fg-muted); font-variant-numeric: tabular-nums; }
  .ans[aria-disabled='true'] .ans-key { border-color: var(--z-border-strong); }
  .ans-text { font-family: var(--z-font-display); font-size: 15.5px; font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; }
  .ans-n { font-family: var(--z-font-display); font-size: 15.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .ans-state { display: inline-flex; align-items: center; gap: 7px; min-width: 64px; justify-content: flex-end; font-size: 13px; color: var(--z-fg-muted); white-space: nowrap; }
  .ans.is-rest .ans-text { color: var(--z-fg-muted); }
  /* phones: who found it goes under the answer, so the answer keeps the width */
  @container (max-width: 459px) { .ans { grid-template-columns: 26px minmax(0, 1fr) auto; row-gap: 2px; } .ans-state { grid-column: 2 / -1; justify-content: flex-start; min-width: 0; white-space: normal; } }
  /* flame: the answer just revealed (P6 §2) */
  .ans.is-just { box-shadow: inset 4px 0 0 var(--z-accent); }
  .desk-miss { gap: 10px; }
  .desk-dots { display: inline-flex; gap: 4px; margin-left: 2px; }
  .desk-dots i { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--z-fg-muted); }
  .desk-dots i.is-on { background: var(--z-fg); box-shadow: none; }

  /* the Survey tab: one disclosure per round */
  .rounds-label { margin-bottom: 8px; }
  .rounds { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .round-edit { border-radius: 12px; background: var(--z-night); border: 1px solid var(--z-border); transition: border-color var(--z-dur-micro) ease; }
  .round-edit[open] { border-color: var(--z-border-strong); }
  .round-sum { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; list-style: none; cursor: pointer; font-family: var(--z-font-display); font-weight: 500; }
  .round-sum::-webkit-details-marker { display: none; }
  @media (hover: hover) { .round-sum:hover { background: var(--z-surface-1); } }
  .round-n { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; background: var(--z-surface-2); color: var(--z-fg-muted); font-size: 12px; }
  /* the round being played: its number in flame's ring (the "this one, now" mark) */
  .round-edit.is-now .round-n { box-shadow: inset 0 0 0 1.5px var(--z-accent); color: var(--z-fg); }
  .round-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .round-count { font-size: 12px; color: var(--z-fg-muted); white-space: nowrap; }
  .round-sum.is-unready .round-count { color: var(--z-warning-text); }
  .round-sum::after { content: ''; width: 7px; height: 7px; border-right: 1.5px solid var(--z-fg-muted); border-bottom: 1.5px solid var(--z-fg-muted); transform: rotate(45deg) translateY(-2px); transition: transform var(--z-dur-std) var(--z-spring); }
  .round-edit[open] .round-sum::after { transform: rotate(225deg) translate(-2px, -1px); }
  .round-body { display: grid; padding: 0 12px 12px; }
  .round-body > .field-label:first-child { margin-top: 4px; }
  .round-q { resize: vertical; min-height: 58px; line-height: 1.45; }
  .round-asked { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; }
  .round-asked .field-label { margin: 0; }
  .round-asked .opt { flex-basis: 100%; margin: 0; }
  .ans-head, .ans-edit { display: grid; grid-template-columns: minmax(0, 1fr) 72px 32px; gap: 6px; align-items: center; }
  .ans-head { margin: 14px 0 4px; font-size: 12px; color: var(--z-fg-subtle); }
  .ans-edit-list { display: grid; gap: 6px; }
  .ans-edit .input { padding-block: 7px; }
  .ans-edit .input-num { width: 100%; }
  .round-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .round-status:empty { display: none; }
  .round-status { color: var(--z-fg-muted); }
  .round-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--z-border); }
  .pane-survey > .tool-row { width: 100%; justify-content: center; }
  .double-switch { margin-top: 8px; }

  .rules { display: grid; gap: 8px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--z-border); font-size: 13px; color: var(--z-fg-muted); }
  .rules .field-label { margin: 0; color: var(--z-fg); font-weight: 500; }

  /* counting pasted answers: a dialog, so the list has room */
  .count-dialog {
    width: min(860px, calc(100vw - 32px)); max-height: min(720px, calc(100dvh - 32px)); padding: 0; overflow: hidden;
    border-radius: 18px; border: 1px solid var(--z-border-strong); background: var(--z-ground); color: var(--z-fg); box-shadow: var(--z-play-shadow-raised), var(--play-edge-top);
  }
  .count-dialog[open] { display: flex; flex-direction: column; animation: pop-in var(--z-dur-std) var(--z-spring); }
  .count-dialog::backdrop { background: color-mix(in oklab, var(--z-void) 70%, transparent); }
  .count-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 12px 20px; border-bottom: 1px solid var(--z-border); }
  .count-head h2 { font-family: var(--z-font-display); font-size: 18px; font-weight: 600; }
  .count-for { color: var(--z-fg-muted); font-weight: 500; }
  .count-body { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: 18px; padding: 14px 20px 16px; }
  @media (min-width: 720px) { .count-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
  .count-paste { display: grid; align-content: start; }
  .count-paste .field-label { margin-top: 0; }
  .count-paste textarea { resize: vertical; min-height: 220px; line-height: 1.5; }
  @media (max-width: 719px) { .count-paste textarea { min-height: 120px; height: 160px; } }
  .count-result { display: grid; align-content: start; gap: 8px; min-width: 0; }
  .count-sum { font-size: 13.5px; color: var(--z-fg); padding-top: 2px; }
  .count-list { display: grid; gap: 5px; max-height: 360px; overflow-y: auto; padding: 2px; }
  .count-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 2px 8px; }
  .count-row .input { padding-block: 6px; }
  .count-n { justify-self: end; font-family: var(--z-font-display); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--z-fg-muted); }
  .count-row.is-in .count-n { color: var(--z-fg); }
  .count-row:not(.is-in) .input { border-style: dashed; }
  .count-long { grid-column: 2; font-size: 12px; color: var(--z-warning-text); }
  .count-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--z-border); }
  .count-foot .hint { flex: 1 1 220px; margin: 0; }
}

@layer stage {
  /* the host's preview frame: the stage zoomed into the space above the desk */
  .crowd-area .stage-frame { position: relative; inset: auto; min-height: 0; }
  @media (max-width: 899px) { .crowd-area .stage-frame { aspect-ratio: 16 / 9; } }
  .is-projector .crowd-area .stage-frame { position: fixed; inset: 0; aspect-ratio: auto; }
  .js .stage-frame:not(.is-ready) .cstage { visibility: hidden; }
  .crowd-area .stage-hint { position: absolute; left: 50%; bottom: 18px; z-index: 6; translate: -50% 0; max-width: calc(100% - 32px); padding: 8px 14px; border-radius: var(--z-radius-pill); background: var(--z-surface-1); border: 1px solid var(--z-border-strong); color: var(--z-fg-muted); font-family: var(--z-font-display); font-size: 13px; line-height: 1.3; text-align: center; }

  .cstage {
    position: relative; zoom: var(--stage-zoom, 0.4);
    width: 1920px; height: 1080px; padding: 44px 72px 40px;
    display: grid; grid-template-columns: minmax(0, 1fr) 500px; grid-template-rows: minmax(0, 1fr); column-gap: 56px;
    color: var(--z-fg); font-family: var(--z-font-display);
  }

  /* the left: the question over the chart */
  .c-left { grid-row: 1; grid-column: 1; min-width: 0; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; row-gap: 18px; transition: opacity var(--z-dur-enter) ease; }
  .c-kicker { font-size: var(--z-play-fs-meta); font-weight: 600; line-height: 1.1; letter-spacing: 0.01em; color: var(--z-fg-muted); }
  .c-signal { color: var(--z-accent-text); }
  .c-question { font-size: var(--z-play-fs-board); font-weight: 600; line-height: 1.12; letter-spacing: -0.015em; overflow-wrap: break-word; }
  .c-rows { display: grid; grid-auto-rows: minmax(var(--row-h, 80px), auto); gap: 8px; align-content: start; min-height: 0; }

  /* a row: rank, the answer, who found it and its count, over a neutral bar */
  .c-row { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 0 28px 10px 18px; border-radius: 14px; overflow: hidden; background: color-mix(in oklab, var(--z-ink) 4%, var(--stage-ground)); }
  .stage-frame[data-theme='dark'] .c-row { background: color-mix(in oklab, var(--z-fg) 5%, var(--stage-ground)); }
  /* the bar: a tint under the words plus a solid foot band, which is what still reads on a
     washed-out projector (band vs track 3.5:1 at A.10; the tint alone 1.15). scaleX never
     thins a horizontal band. */
  .c-bar { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--w, 0)); background: color-mix(in oklab, var(--z-ink) 11%, var(--stage-ground)); box-shadow: inset 0 -12px 0 var(--z-fg-muted); }
  .stage-frame[data-theme='dark'] .c-bar { background: color-mix(in oklab, var(--z-fg) 15%, var(--stage-ground)); }
  .c-row > :not(.c-bar) { position: relative; }
  /* the rank: a plain numeral, never a circled slot (the TV board's emblem; gate 5) */
  .c-rank { justify-self: center; font-size: var(--z-play-fs-meta); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
  .c-row.is-hidden .c-rank { color: var(--z-fg-muted); }
  .c-answer { min-width: 0; font-size: var(--answer-size, 72px); font-weight: 500; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; }
  .c-rows.is-wrap .c-answer { white-space: normal; overflow-wrap: anywhere; line-height: 1.05; padding-block: 8px; }
  .c-right { display: inline-flex; align-items: center; }
  .c-who { display: inline-flex; align-items: center; gap: 12px; margin-right: 44px; font-size: var(--z-play-fs-meta); font-weight: 500; line-height: 1; color: var(--z-fg-muted); white-space: nowrap; }
  .c-who[hidden] { display: none; }
  .c-chip { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--team, var(--z-fg-muted)); box-shadow: 0 0 0 3px var(--z-ink); }
  .stage-frame[data-theme='dark'] .c-left .c-chip { box-shadow: none; } /* on the paper results card the ink ring stays */
  .c-count { min-width: calc(var(--digits, 1) * 1ch); font-size: var(--z-play-fs-board); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; text-align: right; }
  /* shown with Reveal the rest: no team, no points */
  .c-row.is-rest .c-answer, .c-row.is-rest .c-count { color: var(--z-fg-muted); }
  /* the row just revealed: a flame rail above its bar (P6 §2); on Light, signal graphics are deep */
  .c-row.is-just::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; background: var(--z-accent-deep); }
  .stage-frame[data-theme='dark'] .c-row.is-just::after { background: var(--z-accent); }

  .c-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 32px; min-width: 0; }
  .c-note { min-width: 0; font-size: var(--z-play-fs-meta); font-weight: 500; line-height: 1.1; color: var(--z-fg-muted); overflow-wrap: break-word; }
  .c-credit { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: var(--z-play-fs-credit); line-height: 1; color: var(--z-fg-muted); white-space: nowrap; }
  .c-credit img { width: 28px; height: auto; }

  /* the right: the round's progress over the scoreboard, ranked by score */
  .c-side { grid-row: 1; grid-column: 2; min-height: 0; display: flex; flex-direction: column; gap: 16px; transition: opacity var(--z-dur-enter) ease; }
  .c-found { display: flex; align-items: baseline; gap: 18px; padding-bottom: 14px; border-bottom: 2px solid color-mix(in oklab, var(--z-fg) 14%, transparent); }
  .c-found b { font-size: var(--z-play-fs-board); font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .c-found span { font-size: var(--z-play-fs-meta); font-weight: 500; line-height: 1.1; color: var(--z-fg-muted); }
  .c-board { display: grid; gap: 14px; align-content: start; padding-top: 10px; }
  .c-side.is-min .c-board { gap: 8px; }
  .c-side.is-min .c-team { padding-block: 4px; }
  .c-side.is-min .c-miss { margin-top: 0; padding-top: 6px; }
  .c-team {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 10px 24px 10px 36px; border-radius: 16px;
    background: var(--z-surface-1); border: 2px solid color-mix(in oklab, var(--z-ink) 10%, transparent); box-shadow: var(--z-play-shadow-raised);
  }
  .stage-frame[data-theme='dark'] .c-team { border-color: var(--z-border-strong); box-shadow: inset 0 2px 0 var(--z-border-strong); }
  .c-team::before { content: ''; position: absolute; left: -2px; top: -2px; bottom: -2px; width: 14px; border-radius: 16px 0 0 16px; background: var(--team); }
  .c-up { display: none; grid-column: 1 / -1; font-size: var(--z-play-fs-meta); font-weight: 600; line-height: 1.1; color: var(--z-accent-text); }
  .c-team.is-up .c-up { display: block; }
  .c-team.is-up { outline: 6px solid var(--z-accent-deep); outline-offset: 4px; }
  .stage-frame[data-theme='dark'] .c-team.is-up { outline-color: var(--z-accent); }
  .c-tag { color: var(--z-fg-muted); white-space: nowrap; }
  .c-name { min-width: 0; font-size: var(--z-play-fs-meta); font-weight: 500; line-height: 1.1; overflow-wrap: break-word; hyphens: auto; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .c-score { font-size: var(--z-play-fs-figure); font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .c-side.is-step .c-score { font-size: var(--z-play-fs-board); }
  .c-team.is-stack { grid-template-columns: minmax(0, 1fr); }
  /* the misses: three small dots and the words, never a red X (play-surface §7) */
  .c-miss { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; margin-top: 6px; padding-top: 10px; border-top: 2px solid color-mix(in oklab, var(--z-fg) 12%, transparent); }
  .c-miss[hidden] { display: none; }
  .c-dots { display: inline-flex; gap: 10px; }
  .c-dots i { width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 3px var(--z-fg); }
  .c-dots i.is-on { background: var(--z-fg); }
  .c-miss-words { font-size: var(--z-play-fs-meta); font-weight: 600; line-height: 1; white-space: nowrap; }
  .c-team.is-out .c-miss-words { color: var(--z-fg-muted); }

  /* the results: a ranked card; ties share their place */
  .is-results .c-left, .is-results .c-side { opacity: 0; }
  .c-results {
    grid-row: 1; grid-column: 1 / -1; z-index: 2; align-self: center; margin: 0 200px;
    display: grid; gap: 28px; padding: 52px 64px 56px; border-radius: 24px; background: var(--z-paper); color: var(--z-fg);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--z-ink) 12%, transparent), 0 30px 80px -20px color-mix(in oklab, var(--z-ink) 45%, transparent);
  }
  .stage-frame[data-theme='dark'] .c-results { box-shadow: 0 0 0 2px var(--z-border-strong), 0 30px 80px -20px var(--z-void); }
  .c-res-kick { font-size: var(--z-play-fs-meta); font-weight: 600; line-height: 1.1; color: var(--z-fg-muted); }
  .c-ranks { display: grid; gap: 10px; }
  .c-ranks:empty { display: none; }
  .c-results.is-many { gap: 20px; padding-block: 40px 44px; }
  .c-results.is-many .c-ranks { gap: 2px; }
  .c-results.is-many .c-rank-row { padding-block: 6px; }
  .c-rank-row { display: grid; grid-template-columns: 250px 30px minmax(0, 1fr) auto; align-items: center; gap: 26px; padding: 12px 28px; border-radius: 16px; font-size: var(--z-play-fs-meta); line-height: 1.1; }
  .c-rank-row .c-chip { width: 30px; height: 30px; }
  .c-place { font-weight: 600; color: var(--z-fg-muted); white-space: nowrap; }
  .c-rname { font-weight: 600; overflow-wrap: break-word; hyphens: auto; }
  .c-rscore { font-size: var(--z-play-fs-board); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
  /* the winner's moment: the name at display size beside the score, on a flame rail (P6 §2) */
  .c-winner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 48px; padding: 6px 0 8px 36px; box-shadow: inset 8px 0 0 var(--z-accent-deep); }
  .c-win-kick { grid-column: 1 / -1; font-size: var(--z-play-fs-meta); font-weight: 600; line-height: 1.1; color: var(--z-accent-text); }
  .c-win-name { display: flex; align-items: center; gap: 28px; min-width: 0; margin-top: 10px; font-size: var(--z-play-fs-display); font-weight: 700; line-height: 1.02; letter-spacing: -0.02em; overflow-wrap: break-word; hyphens: auto; }
  .c-win-name .c-chip { width: 44px; height: 44px; }
  .c-win-name.is-step { font-size: var(--z-play-fs-figure); }
  .c-win-name.is-step .c-chip { width: 34px; height: 34px; }
  .c-win-score { font-size: var(--z-play-fs-figure); font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; padding-bottom: 8px; }

  /* the stage window before the host is open */
  .c-wait { grid-row: 1; grid-column: 1 / -1; align-self: center; justify-self: center; display: grid; gap: 28px; text-align: center; }
  .c-wait-h { font-size: var(--z-play-fs-figure); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }
  .c-wait-t { max-width: 30ch; justify-self: center; font-size: var(--z-play-fs-meta); line-height: 1.25; color: var(--z-fg-muted); }
  .is-waiting .c-left, .is-waiting .c-side { visibility: hidden; }
}