/* Approved projector prototype port (CASE-083, CASE-113–117), scoped to the served display.
   Existing field-line/ink tokens satisfy the shipped contrast gate; QR SVG owns its white quiet zone. */

body.projector {
    --p-label: max(18px, calc(1.05vw * var(--s, 1)));
    --p-body: max(var(--projector-body), calc(1.3vw * var(--s, 1)));
    --p-scene: max(var(--projector-body), calc(1.46vw * var(--s, 1)));
    --p-h1: max(var(--projector-body), calc(1.9vw * var(--s, 1)));
    --p-h2: max(var(--projector-body), calc(1.56vw * var(--s, 1)));
    --p-vital: max(var(--projector-body), calc(1.88vw * var(--s, 1)));
    --p-gap: max(8px, calc(1.25vw * var(--sp, 1)));
    --p-pad: max(10px, calc(1.05vw * var(--sp, 1)));
    --edge: 2.5vw;
  }
html:has(body.projector), body.projector { height: 100%; overflow: hidden; }
body.projector { font-size: var(--p-body); line-height: 1.35; }
body.projector .screen { height: 100vh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
body.projector svg.ic { width: 1em; height: 1em; stroke-width: 2; }
body.projector .eyebrow { font-size: var(--p-label); letter-spacing: .1em; }
body.projector .top { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 2vw; align-items: center; padding: 1.4vh var(--edge); background: var(--nav-bg); border-bottom: 1px solid var(--field-line); color: var(--nav-ink); }
body.projector .top .title { min-width: 0; display: grid; gap: .1em; }
body.projector .top .title .case { margin: 0; font-size: var(--p-body); font-weight: var(--w-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.projector #banners { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5em; align-items: center; }
body.projector .top .pill { font-size: var(--p-label); padding: .3em .85em; }
body.projector .layer { display: inline-flex; align-items: center; gap: .45em; padding: .3em .8em; border-radius: var(--radius-pill); font-size: var(--p-label); font-weight: var(--w-semibold); }
body.projector .layer.manual { background: var(--manual-tint); color: var(--manual-ink); }
body.projector .layer.replay { background: var(--surface); color: var(--ink); border: 1px dashed var(--field-line); }
body.projector .layer.lost { background: var(--alert-tint); color: var(--alert-ink); }
body.projector .meta { display: flex; gap: 1.6vw; align-items: center; font-size: var(--p-body); white-space: nowrap; }
body.projector .meta .count, body.projector .meta .timer { display: inline-flex; gap: .4em; align-items: center; font-weight: var(--w-medium); }
body.projector .meta .num { font-family: var(--mono); font-weight: var(--w-semibold); font-variant-numeric: tabular-nums; }
body.projector .meta:empty { display: none; }
body.projector main { --s: 1; --sp: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); gap: var(--p-gap); padding: var(--p-gap) var(--edge); }
body.projector main.single { grid-template-columns: minmax(0, 1fr); }
body.projector .col { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: var(--p-gap); }
body.projector .card { padding: var(--p-pad) calc(var(--p-pad) * 1.3); border-radius: var(--radius-lg); }
body.projector .card > .eyebrow { margin-bottom: .35em; }
body.projector .scene h1 { margin: 0; font-size: var(--p-h1); font-weight: var(--w-semibold); }
body.projector .scene .prose { margin: calc(.45em * var(--sp)) 0 0; font-size: var(--p-scene); line-height: calc(1.3 + .12 * var(--sp)); max-width: 62ch; text-wrap: pretty; }
body.projector .scene[data-kind="consequence"], body.projector .scene[data-kind="terminal"] { box-shadow: inset 6px 0 0 var(--ph-consequence), var(--shadow-1); }
body.projector ul.vitals { margin: 0; padding: calc(var(--p-pad) * .7) calc(var(--p-pad) * 1.3); list-style: none; display: flex; flex-wrap: wrap; gap: calc(var(--p-pad) * .5) calc(var(--p-pad) * 1.9); background: var(--surface); border: 1px solid var(--field-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
body.projector ul.vitals li { display: grid; gap: .05em; align-content: start; min-width: 0; }
body.projector ul.vitals .vl { font-size: var(--p-label); font-weight: var(--w-semibold); color: var(--ink-muted); white-space: nowrap; }
body.projector ul.vitals .vrow { display: flex; align-items: baseline; gap: .25em; white-space: nowrap; }
body.projector ul.vitals .vv { font: var(--w-semibold) var(--p-vital)/1.1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
body.projector ul.vitals .vu { font-size: var(--p-label); color: var(--ink-muted); }
body.projector ul.vitals .va { font: var(--w-medium) var(--p-label)/1.2 var(--mono); color: var(--ink); white-space: nowrap; }
body.projector .tiles2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22vw), 1fr)); gap: calc(var(--p-gap) * .6); align-items: start; }
body.projector .find ul { margin: 0; padding: 0 0 0 1.1em; display: grid; gap: calc(.3em * var(--sp)); font-size: var(--p-body); line-height: 1.3; }
body.projector .findings ul { font-size: var(--p-find, var(--p-body)); }
body.projector .findings li.more { list-style: none; margin-left: -1.1em; font-weight: var(--w-semibold); color: var(--petrol-ink); }
body.projector .find li { text-wrap: pretty; }
body.projector .find li::marker { color: var(--petrol-ink); }
body.projector .find.cols2 ul { display: block; columns: 2; column-gap: 2vw; }
body.projector .find.cols2 li { break-inside: avoid; margin-bottom: calc(.3em * var(--sp)); }
body.projector .decision { display: flex; flex-direction: column; gap: calc(var(--p-gap) * .7); min-height: 0; box-shadow: inset 0 6px 0 var(--ph, var(--petrol)), var(--shadow-1); }
body.projector .decision .call { display: flex; flex-wrap: wrap; align-items: center; gap: .4em .6em; margin: 0; font-size: var(--p-label); font-weight: var(--w-semibold); color: var(--ph-ink, var(--ink)); }
body.projector .decision h2 { margin: 0; font-size: var(--p-h2); font-weight: var(--w-semibold); line-height: 1.25; text-wrap: pretty; }
body.projector ol.tiles { margin: 0; padding: 0; list-style: none; display: grid; gap: calc(var(--p-gap) * .5); }
body.projector .tile { display: flex; align-items: center; gap: .7em; min-width: 0; padding: calc(var(--p-pad) * .65) calc(var(--p-pad) * .9); font-size: max(var(--projector-body), calc(1.46vw * var(--s))); font-weight: var(--w-medium); line-height: 1.25; }
body.projector .tile svg.mark { width: 1.75em; height: 1.75em; flex: none; }
body.projector .tile .lbl { flex: 1; min-width: 0; overflow-wrap: anywhere; }
body.projector .tile .tag { font-size: var(--p-label); padding: .15em .7em; }
body.projector .tile.dim { background: var(--sunken); border-style: dashed; color: var(--ink-muted); }
body.projector .tile.dim svg.mark { opacity: .5; }
body.projector .result ul { margin: 0; padding: 0; list-style: none; display: grid; gap: calc(.35em * var(--sp)); font-size: var(--p-body); }
body.projector .result li { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(2em, 4em) 2.4em; gap: .6em; align-items: center; line-height: 1.2; }
body.projector .result li.ranking-result { grid-template-columns: auto minmax(0, 1fr); }
body.projector .result ul.positions { grid-column: 2; display: flex; flex-wrap: wrap; gap: .25em .7em; font-size: var(--p-body); }
body.projector .result .positions li { display: block; font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); background: var(--surface); }
body.projector .result svg.mark { width: 1.3em; height: 1.3em; }
body.projector .result .bar { display: block; height: .55em; background: var(--sunken); border-radius: var(--radius-pill); overflow: hidden; }
body.projector .result .bar i { display: block; height: 100%; background: var(--petrol); color: var(--on-petrol); border-radius: var(--radius-pill); }
body.projector .result .n { font-family: var(--mono); font-weight: var(--w-semibold); text-align: right; font-variant-numeric: tabular-nums; }
body.projector .result p { margin: .5em 0 0; font-size: var(--p-label); color: var(--ink-muted); font-weight: var(--w-medium); }
body.projector .lobby-left { justify-content: center; }
body.projector .lobby-left .check { margin: 0; font-size: var(--p-h2); font-weight: var(--w-semibold); letter-spacing: .04em; color: var(--ink-muted); }
body.projector .lobby-left h1 { margin: 0; font-size: max(32px, calc(2.6vw * var(--s))); font-weight: var(--w-semibold); line-height: 1.12; letter-spacing: -.015em; }
body.projector .status-line { margin: 0; color: var(--ink-muted); font-weight: var(--w-medium); }
body.projector .joinpanel { justify-self: center; align-self: center; display: grid; justify-items: center; gap: .55em; padding: calc(var(--p-pad) * 1.4) calc(var(--p-pad) * 2); text-align: center; background: var(--nav-bg); border-color: var(--field-line); }
body.projector .joinpanel h2 { margin: 0; font-size: var(--p-h2); font-weight: var(--w-semibold); }
body.projector .joinpanel .qrcard { padding: 14px;  border-radius: var(--radius); box-shadow: var(--shadow-1); line-height: 0; }
body.projector .joinpanel .qrcard svg { display: block; width: max(25vh, clamp(180px, 17vw, 340px)); height: auto; }
body.projector .joinpanel .url { font: var(--w-medium) var(--p-body) var(--mono); overflow-wrap: anywhere; }
body.projector .joinpanel .code-label { font-size: var(--p-label); font-weight: var(--w-semibold); color: var(--ink-muted); letter-spacing: .08em; text-transform: uppercase; margin-top: .2em; }
body.projector .joinpanel .code { font: var(--w-semibold) max(96px, calc(3.6vw * var(--s)))/1 var(--mono); letter-spacing: .08em; white-space: nowrap; }
body.projector .endcard { box-shadow: inset 0 6px 0 var(--ph-reveal), var(--shadow-1); }
body.projector .endcard h2 { margin: 0; font-size: var(--p-h2); font-weight: var(--w-semibold); }
body.projector .endcard p { margin: .4em 0 0; color: var(--ink-muted); }
body.projector .waiting-note { margin: auto; color: var(--ink-muted); font-size: var(--p-h2); font-weight: var(--w-medium); }
body.projector footer { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 1.6vw; align-items: center; padding: 1.1vh var(--edge); background: var(--nav-bg); border-top: 1px solid var(--field-line); color: var(--nav-ink); min-height: 6vh; }
body.projector footer .qrcell { padding: 6px;  border-radius: var(--radius-sm); box-shadow: var(--shadow-1); line-height: 0; }
body.projector footer .qrcell svg { display: block; width: clamp(80px, 6.2vw, 132px); height: auto; }
body.projector footer .route { display: grid; gap: .15em; }
body.projector footer .route .url { font: var(--w-medium) var(--p-body)/1.2 var(--mono); white-space: nowrap; }
body.projector footer .route .code { display: flex; align-items: baseline; gap: .45em; white-space: nowrap; }
body.projector footer .route .code .k { font-size: var(--p-label); font-weight: var(--w-semibold); color: var(--ink-muted); letter-spacing: .08em; text-transform: uppercase; }
body.projector footer .route .code b { font: var(--w-semibold) max(28px, 1.9vw)/1.1 var(--mono); letter-spacing: .08em; }
body.projector footer .closed { font-weight: var(--w-medium); color: var(--ink-muted); white-space: nowrap; }
body.projector footer.noroute { grid-template-columns: auto minmax(0, 1fr) auto; }
body.projector .names { min-width: 0; display: flex; align-items: center; gap: .8em; }
body.projector .names h2 { flex: none; margin: 0; font-size: var(--p-label); font-weight: var(--w-semibold); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; }
body.projector .names ul { flex: 1; min-width: 0; margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: nowrap; gap: .5em; overflow: hidden; }
body.projector .chip { flex: none; display: inline-flex; align-items: center; gap: .4em; max-width: 12em; padding: 4px .8em 4px 4px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--field-line); font-size: var(--p-label); font-weight: var(--w-medium); }
body.projector .chip[hidden] { display: none; }
body.projector .chip .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.projector .chip.anonymous { padding-right: 4px; }
body.projector .chip.more { padding: 4px .8em; font-family: var(--mono); font-weight: var(--w-semibold); min-height: 42px; }
body.projector .names .count { font-weight: var(--w-medium); white-space: nowrap; }
body.projector .sound { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 50%; border: 1px solid var(--field-line); background: var(--surface); color: var(--nav-ink); }
body.projector .sound svg.ic { width: 22px; height: 22px; }
body.projector .sound[aria-pressed="true"] { background: var(--petrol-tint); color: var(--petrol-ink); border-color: var(--petrol); }
body.projector .conn { display: inline-flex; align-items: center; gap: .4em; font-size: var(--p-label); font-weight: var(--w-semibold); }

body.projector main { max-width: none; margin: 0; background: var(--ground); padding: var(--p-gap) var(--edge); }
body.projector #projectorCheck { position: fixed; inset: 0; z-index: var(--z-overlay); display: grid; place-items: center; background: var(--surface); color: var(--ink); font: 600 clamp(64px,14vw,220px)/1 var(--sans); }
body.projector #projectorCheck[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  body.projector .presentation-new-group { animation: presentation-share 240ms ease-out both; }
  @keyframes presentation-share { from { opacity: .72; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}

.chip.arrival-new, .arrival-note.arrival-new { animation: lobby-arrival 1.5s ease-out; }
@keyframes lobby-arrival { from { transform: translateY(6px); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .chip.arrival-new, .arrival-note.arrival-new { animation: none; } }

.arrival-note { font-size: var(--p-label); font-weight: var(--w-semibold); white-space: nowrap; }

body.projector .rank-table-card h2 { margin: .2em 0; font-size: var(--p-body); line-height: 1.1; }
body.projector .rank-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--p-body); line-height: 1.1; }
body.projector .rank-table th, body.projector .rank-table td { padding: 3px 4px; border-bottom: 1px solid var(--field-line); color: var(--ink); background: var(--surface); }
body.projector .rank-table th:first-child { width: 62%; text-align: left; overflow-wrap: anywhere; font-weight: var(--w-medium); }
body.projector .rank-table th:not(:first-child) { font-size: var(--p-label); font-weight: var(--w-semibold); }
body.projector .rank-table td { text-align: center; font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* CASE-145: complete response columns supersede the option pager for new closures. */
body.projector .ranked-result { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: max(2px, calc(8px * var(--sp, 1))); }
body.projector .ranked-result > :not(.ranked-columns) { flex-shrink: 0; }
body.projector .ranked-result h2 { margin: 0; font-size: max(24px, calc(26px * var(--s, 1))); line-height: 1.15; overflow-wrap: anywhere; }
body.projector .ranked-columns { flex: 1; min-height: min-content; display: grid; grid-template-columns: repeat(var(--ranked-columns), minmax(0, 1fr)); gap: 16px; }
body.projector .ranked-column { min-width: 0; min-height: min-content; display: grid; grid-template-rows: minmax(min-content, 1fr) auto; gap: 8px; }
body.projector .ranked-order { min-height: min-content; margin: 0; padding: 0; list-style: none; display: grid; grid-template-rows: repeat(var(--ranked-positions), minmax(min-content, 1fr)); gap: 8px; }
body.projector .result li.ranked-tile { min-width: 0; display: grid; grid-template-columns: 32px 40px minmax(0, 1fr); gap: 12px; padding: 10px; align-items: center; line-height: 1.15; }
body.projector .ranked-label, .ranked-rank { font-size: max(24px, calc(26px * var(--s, 1))); font-weight: var(--w-medium); }
body.projector .ranked-label { min-width: 0; overflow-wrap: anywhere; }
body.projector .ranked-rank { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: center; }
body.projector .result .ranked-tile svg.mark { width: 40px; height: 40px; }
body.projector .result p.ranked-total { margin: 0; font-size: 32px; line-height: 1.1; font-weight: var(--w-semibold); color: var(--ink); text-align: center; font-variant-numeric: tabular-nums; }
body.projector .result p.ranked-overall, .result p.ranked-empty { margin: 0; font-size: 24px; line-height: 1.15; color: var(--ink); }
body.projector .result p.ranked-meaning, .result p.ranked-continuation, .result p.ranked-group-page, .result p.ranked-residual { margin: 0; line-height: 1.15; }