/* Where is your organization with AI? The stylesheet, forked from the sibling poll's dark theme. */

/* ---- Fonts, self-hosted so no voter's IP goes to a font CDN ----
   Inter and Libre Baskerville, latin subset, woff2, from Google Fonts on
   2026-10-13. Both under the SIL Open Font License 1.1; the licenses sit beside
   the files in /fonts/. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("/fonts/inter-300.woff2") format("woff2");
  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: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/inter-400.woff2") format("woff2");
  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: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/inter-500.woff2") format("woff2");
  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: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/inter-600.woff2") format("woff2");
  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: "Libre Baskerville"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/fonts/libre-baskerville-400-italic.woff2") format("woff2");
  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: "Libre Baskerville"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/libre-baskerville-400.woff2") format("woff2");
  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: "Libre Baskerville"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/libre-baskerville-700.woff2") format("woff2");
  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;
}

/* ---- Brand layer (LMF) ---- */
:root {
  --bg: #08080A; --bg-2: #0F0F12; --bg-3: #16161B;
  --ink: #E8E8EC; --ink-2: #9A9AA3; --ink-3: #5E5E66;
  --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.14);
  --accent: #0A8B9C; --accent-2: #5DC0CD; --callout: #534AB7; --callout-2: #6A61D0;
  --warn: #E6A33A;
  --sans: "Inter", -apple-system, system-ui, sans-serif;
  --display: "Libre Baskerville", Georgia, serif;
  /* The results (prototypes/001-bars/mock.html): one sequential ramp of the Last Mile First
     cyan, rung 1 (dark) to rung 6 (light), and one neutral grey for the escape on every bar. */
  --r1: #0B4650; --r2: #0A6472; --r3: #0A8B9C; --r4: #3AA9B8; --r5: #6FC6D1; --r6: #AEE2E8;
  --r0: #74747C;
  /* The diagnostic's gap and growth colors, for the bars on an axis when the star is in a zone. */
  --gap: #d0605e; --growth: #5f9e6e;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans);
  -webkit-font-smoothing: antialiased; font-weight: 300; line-height: 1.55;
  background-image:
    radial-gradient(900px 600px at 15% -10%, rgba(10,139,156,.22), transparent 60%),
    radial-gradient(800px 500px at 90% 0%, rgba(83,74,183,.18), transparent 60%);
  background-repeat: no-repeat;
}
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--bg-3); color: var(--ink); padding: 8px 14px; border-radius: 6px; z-index: 10; }
.skip:focus { top: 12px; }

.page { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 36px 0 60px; }
.label { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); margin: 0 0 10px; }
.label::before { content: ""; display: inline-block; width: 24px; height: 2px; background: var(--accent); margin: 0 10px 4px 0; vertical-align: middle; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; letter-spacing: -.01em; }

/* ---- Mast ---- */
.mast { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: end; padding-bottom: 44px; border-bottom: 1px solid var(--line); }
.lockup { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; margin-bottom: 22px; min-height: 1.2em; }
.lockup .presenter { font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.lockup .presenter b { color: var(--accent-2); font-weight: 600; }
.lockup .joint { font-size: .74rem; color: var(--ink-2); padding-left: 14px; border-left: 1px solid var(--line-2); }
h1 { font-size: clamp(2.8rem, 6.5vw, 5.4rem); line-height: .98; }
h1 em { font-style: italic; color: var(--accent-2); }
.event-chip { display: inline-flex; align-items: center; gap: 10px; margin: 22px 0 0; padding: 6px 14px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg-2); font-size: .8rem; font-weight: 500; letter-spacing: .04em; color: var(--ink); }
.event-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 10px var(--accent-2); }
.deck { font-family: var(--display); font-size: 1.15rem; color: var(--ink-2); line-height: 1.5; margin: 0; }
.deck strong { color: var(--ink); font-weight: 400; }
.notice { margin: 20px 0 0; padding: 12px 16px; border: 1px solid var(--warn); border-radius: 10px; background: rgba(230,163,58,.08); color: var(--ink); font-size: .88rem; }

/* ---- Vote ---- */
.vote { padding: 56px 0; border-bottom: 1px solid var(--line); }
.vote-head, .res-head { display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: end; margin-bottom: 28px; }
.vote h2, .results h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.08; }
.vote-intro, .res-copy { color: var(--ink-2); margin: 0; }
.vote-intro strong { color: var(--ink); font-weight: 500; }
.ballot { display: flex; flex-direction: column; gap: 36px; max-width: 760px; }
.q { margin: 0; padding: 0; border: 0; min-width: 0; }
.q legend { padding: 0; margin: 0 0 14px; font-family: var(--display); font-size: 1.2rem; line-height: 1.4; color: var(--ink); }
.opts { display: flex; flex-direction: column; gap: 8px; }
.opt { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); cursor: pointer; transition: border-color .15s, background .15s; }
.opt:hover { border-color: var(--line-2); }
.opt:has(input:checked) { border-color: var(--accent-2); background: rgba(10,139,156,.12); }
.opt:has(input:disabled) { cursor: default; opacity: .6; }
.opt input { flex: none; margin: 3px 0 0; width: 18px; height: 18px; accent-color: var(--accent-2); }
.opt span { font-size: .95rem; line-height: 1.45; }
.vote-check { margin-top: 20px; max-width: 400px; }
.vote-check:empty { display: none; }
.vote-foot { display: flex; align-items: center; gap: 18px; margin-top: 20px; }
.btn { background: var(--callout); color: #fff; border: 0; border-radius: 999px; padding: 14px 26px; font: inherit; font-weight: 600; font-size: 1rem; cursor: pointer; transition: background .15s; }
.btn:hover:not(:disabled) { background: var(--callout-2); }
.btn:disabled { background: var(--bg-3); color: var(--ink-2); cursor: default; }
.vote-foot small { color: var(--ink-2); font-size: .82rem; }
.status { min-height: 1.5em; margin: 14px 0 0; font-size: .88rem; color: var(--ink-2); }
.status.ok { color: var(--accent-2); }
.status.err { color: #F08A73; }

/* ---- Results ---- */
.results { padding: 56px 0; }
.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.charts.single { grid-template-columns: minmax(0, 560px); }
.chart { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px 18px; }
.chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.chart-head h3 { font-size: 1.15rem; }
.meta { font-size: .78rem; color: var(--ink-2); text-align: right; }
.meta b { color: var(--ink); font-weight: 500; }
.live { display: inline-flex; align-items: center; gap: 8px; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 12px var(--accent-2); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.tally-status { margin: 14px 0 0; font-size: .82rem; color: #F08A73; }
.mast-count { margin: 14px 0 0; color: var(--ink-2); }

/* ---- The bars (from prototypes/001-bars/mock.html; the mock wins where they differ) ----
   Three stacked bars, rung 1 at the bottom, the escape on top; app.js sets each segment's
   height (or width, on the coordination bar) through the CSSOM. Colors are classes here, never
   read from CSS by the script. */
.bars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.axis { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.bar { height: 300px; display: flex; flex-direction: column-reverse; gap: 2px; border-radius: 6px; overflow: hidden; background: var(--bg-3); }
.seg { display: flex; align-items: center; justify-content: center; min-height: 0; min-width: 0; font-size: .76rem; font-weight: 600; font-variant-numeric: tabular-nums; overflow: hidden; transition: height .9s cubic-bezier(.2,.7,.2,1), width .9s cubic-bezier(.2,.7,.2,1); }
.bar .seg { height: 0; }
.hbar .seg { width: 0; }
.r0, .r1, .r2, .r3 { color: #fff; }
.r4, .r5, .r6 { color: #08262B; }
.r0 { background: var(--r0); } .r1 { background: var(--r1); } .r2 { background: var(--r2); }
.r3 { background: var(--r3); } .r4 { background: var(--r4); } .r5 { background: var(--r5); } .r6 { background: var(--r6); }
.axis figcaption { margin-top: 10px; font-size: .82rem; line-height: 1.35; color: var(--ink); }
.hbar { display: flex; height: 22px; gap: 2px; border-radius: 5px; overflow: hidden; background: var(--bg-3); }
.hbar .seg { font-size: .7rem; }
.coord-key { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; font-size: .74rem; color: var(--ink-2); }
.coord-key li { display: flex; gap: 8px; align-items: baseline; }
.coord-key i { flex: none; width: 10px; height: 10px; border-radius: 2px; transform: translateY(1px); }
.coord-key b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.legend { margin: 22px 0 0; font-size: .86rem; color: var(--ink-2); display: flex; flex-direction: column; gap: 6px; }
.legend span { display: flex; gap: 10px; align-items: center; }
.legend i { flex: none; width: 14px; height: 14px; border-radius: 3px; }
.filling { padding: 30px 0 10px; }
.filling p { margin: 0; font-family: var(--display); font-size: 1.3rem; }
.filling small { display: block; margin-top: 8px; color: var(--ink-2); font-size: .86rem; }
.post-link { margin: 32px 0 0; }
.post-link a { color: var(--accent-2); }
.axis-names { display: none; }
.btn.ghost { background: transparent; border: 1px solid var(--line-2); color: var(--ink); }
.btn.ghost:hover { background: var(--bg-3); }

/* ---- Screen three: the step after the bars (from prototypes/002-box/mock.html; the mock wins where
   they differ). Its own screen since M1.6, so it opens at the top as screen two does, with no rule
   over it; the post's link and the way back close it. ---- */
.step { padding: 36px 0 56px; }
.step h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.08; margin-bottom: 32px; }
/* The four parts: one readable column. */
.part { max-width: 660px; margin: 0 0 34px; }
.part h3 { font-size: 1.3rem; line-height: 1.25; margin-bottom: 10px; }
.part > p { margin: 0; font-size: 1.04rem; color: var(--ink); }
/* The coordination bars, moved here from the results: the room's, then everyone's. */
.coord { margin-top: 20px; padding: 18px 20px 16px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; }
.coord > p { margin: 0 0 14px; font-size: .9rem; color: var(--ink); }
.coord > p.held { margin: 14px 0 0; }
.coord-row + .coord-row { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.coord-name { display: flex; justify-content: space-between; gap: 12px; font-size: .78rem; color: var(--ink-2); margin-bottom: 6px; }
.coord-name .meta { font-size: inherit; }
/* Part 4: one card per block, the drawing and its lines. */
.boxes { display: flex; flex-direction: column; gap: 28px; }
.boxes > .held { margin: 0; font-size: .8rem; color: var(--ink-2); }
.card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.card-head h3 { font-size: 1.15rem; }
.card-body { display: grid; grid-template-columns: 1.45fr 1fr; gap: 28px; align-items: center; }
.drawing { width: 100%; min-width: 0; }
.drawing svg { display: block; width: 100%; height: auto; overflow: visible; }
.lines p { margin: 0 0 14px; }
.read { font-family: var(--display); font-size: 1.12rem; line-height: 1.45; }
.lines .small { font-size: .8rem; color: var(--ink-2); }
.lines .small span { display: block; }
/* The drawing's parts (box.js gives each element one of these classes). */
.drawing .cube { stroke: var(--ink); stroke-opacity: .13; stroke-width: 1; fill: none; }
.drawing .ax { stroke: var(--ink-2); stroke-width: 1.6; stroke-linecap: round; }
.drawing .tick { stroke: var(--ink-2); stroke-width: 1.2; }
.drawing .bx-face { fill: var(--r3); fill-opacity: .10; stroke: none; }
.drawing .bx-edge { stroke: var(--r4); stroke-width: 1.5; fill: none; stroke-linejoin: round; }
.drawing .drop { stroke: var(--r5); stroke-width: 1.2; stroke-dasharray: 3 3; fill: none; }
.drawing .foot { stroke: var(--r5); stroke-width: 1.4; fill: none; }
.drawing .star { fill: var(--r6); stroke: var(--bg); stroke-width: 1; }
.drawing .halo { fill: var(--r6); fill-opacity: .18; }
.drawing .bal-guide { stroke: var(--r3); stroke-opacity: .5; stroke-width: 1.2; stroke-dasharray: 3 3; fill: none; }
.drawing .bal-mark { fill: var(--r3); }
.drawing .bar-gap { stroke: var(--gap); fill: var(--gap); }
.drawing .bar-growth { stroke: var(--growth); fill: var(--growth); }
.drawing .axlabel { fill: var(--ink); font-family: var(--sans); font-weight: 400; }
.drawing .grey { fill: var(--r0); font-family: var(--sans); font-weight: 500; }
/* The build-up's marker dot (screen two, stages 1 to 4). */
.drawing .point { fill: var(--r6); }
/* Stage 2's rectangle: its area is the caption's subject, so it is shaded more than a box's faces
   (owner, 2026-10-17: the stronger fill carried from the mock). */
.drawing.flat .bx-face { fill-opacity: .24; }
/* What arrives with the room (stage 5): the star, its drop and footprint, the grey shares. */
.drawing.arrive .star, .drawing.arrive .halo, .drawing.arrive .drop, .drawing.arrive .foot, .drawing.arrive .grey { animation: fade .4s ease-out both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- Screen two, the build-up (from prototypes/003-screens/mock.html; the mock wins where they differ) ---- */
.buildup { padding: 36px 0 56px; }
.buildup h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.08; margin-bottom: 22px; }
.stage { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.figure { width: 100%; max-width: calc((100vh - 230px) * 1.4); }
.which { margin: 0 0 6px; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); min-height: 1.2em; }
.which.room { color: var(--ink-2); }
.controls { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; }
.controls .btn { padding: 12px 26px; min-width: 104px; }
.counter { font-size: .86rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.counter b { color: var(--ink); font-weight: 500; }
.caption p { margin: 0; }
.caption .say { font-family: var(--display); font-size: clamp(1.15rem, 1.75vw, 1.6rem); line-height: 1.45; }
.caption .read { margin-top: 22px; font-size: clamp(1rem, 1.3vw, 1.2rem); }
.caption .small { margin-top: 12px; font-size: .8rem; color: var(--ink-2); }
.caption .small span { display: block; }
.caption .held { margin-top: 14px; font-size: .8rem; color: var(--ink-2); }
.caption.enter { animation: fade .35s ease-out both; }

/* ---- The three screens (plan 001, M1.6). app.js puts on-1, on-2 or on-3 on the body from the
   route; without it (no script) screen one is all there is. Panel mode's QR card stays on all three. */
body:not(.on-2) .buildup, body:not(.on-3) .step { display: none; }
body.on-2 .page > :not(.buildup):not(.present-panel),
body.on-3 .page > :not(.step):not(.present-panel) { display: none; }
.screen-nav { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); }
.screen-nav .btn { min-width: 120px; }
body.present .screen-nav { display: none; }

/* ---- Panel mode (QR card hidden outside it) ---- */
.present-panel { display: none; }
.keys { color: var(--ink-3); }

@media (max-width: 860px) {
  .mast, .vote-head, .res-head, .charts { grid-template-columns: 1fr; }
  .mast { gap: 28px; }
  .card-body { grid-template-columns: 1fr; gap: 18px; }
  .stage { grid-template-columns: 1fr; gap: 22px; }
  .figure { max-width: none; }
  .caption .say { font-size: 1.15rem; }
}
@media (max-width: 520px) {
  .page { width: calc(100% - 32px); padding-top: 28px; }
  .lockup .joint { padding-left: 0; border-left: 0; flex-basis: 100%; }
  .vote-foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .btn { border-radius: 26px; padding: 14px 20px; }
  .vote-foot small { text-align: center; }
  .chart { padding: 18px 16px 14px; }
  .chart-head { flex-direction: column; gap: 4px; }
  .meta { text-align: left; }
  .bars { gap: 8px; }
  .bar { height: 260px; }
  .axis figcaption { font-size: .76rem; }
  .coord-key { grid-template-columns: 1fr; }
  .card { padding: 18px 12px; }
  .coord { padding: 16px 14px 14px; }
  .card-head, .lines { padding: 0 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .opt, .seg { transition: none; }
  .live i { animation: none; }
  .caption.enter, .drawing.arrive * { animation: none !important; }
}

/* ---- Panel mode: ?present=1. Sized in vh so 1920×1080 and 1366×768 fit without scrolling. ---- */
body.present { overflow: hidden; }
body.present .vote, body.present .res-head, body.present .lockup .joint,
body.present .mast-copy, body.present .skip { display: none; }
body.present .page {
  width: calc(100% - 7vh); max-width: none; height: 100vh; padding: 3vh 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr);
  column-gap: 4vh; row-gap: 3vh;
}
body.present .mast { grid-column: 1; grid-row: 1; display: block; padding: 0; border: 0; }
body.present .lockup { margin-bottom: 1.4vh; }
body.present .lockup .presenter { font-size: 1.5vh; }
body.present h1 { font-size: 7.4vh; line-height: 1; }
body.present h1 br { display: none; }
body.present .event-chip { margin-top: 1.8vh; font-size: 1.9vh; padding: .6vh 1.6vh; }
body.present .notice { font-size: 1.7vh; margin-top: 1.4vh; }
body.present .results { grid-column: 1; grid-row: 2; padding: 0; min-height: 0; }
body.present .charts { height: 100%; gap: 3vh; grid-template-columns: 1fr 1fr; }
body.present .charts.single { grid-template-columns: minmax(0, 1fr); }
body.present .chart { display: flex; flex-direction: column; padding: 2.6vh 3vh 2.2vh; min-height: 0; }
body.present .chart-head { margin-bottom: 1.6vh; }
body.present .chart-head h3 { font-size: 3vh; }
body.present .meta, body.present .live { font-size: 1.8vh; }
body.present .live i { width: 1.2vh; height: 1.2vh; }
body.present .chart { padding: 2vh 3vh 1.6vh; }
body.present.revealed .chart-head { margin-bottom: 1vh; }
body.present .present-panel {
  grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 2vh; width: 34vh; text-align: center;
}
.qr { width: 100%; aspect-ratio: 1; background: #fff; border-radius: 1.4vh; padding: 1.6vh; }
.qr svg { width: 100%; height: 100%; display: block; }
.qr-cap { margin: 0; font-size: 2vh; color: var(--ink-2); line-height: 1.4; }
.qr-cap b { display: block; font-size: 2.4vh; color: var(--ink); font-weight: 500; word-break: break-all; }
body.present .keys { font-size: 1.3vh; margin: 0; }
.mast .notice { grid-column: 1 / -1; }

/* ---- Panel mode reveal (owner decision 2026-10-12) ----
   Before reveal: a large live total, no distribution; the global panel is hidden
   when there is a room panel. */
.big-total { display: none; }
body.present:not(.revealed) .big-total {
  display: block; margin: 0 0 2.4vh; font-family: var(--display); font-size: 4.2vh; color: var(--ink-2); line-height: 1.1;
}
body.present:not(.revealed) .big-total b { font-weight: 400; color: var(--ink); font-size: 1.5em; font-variant-numeric: tabular-nums; }
/* Before the reveal: the event name, the live total and the three axis names, no bars. */
body.present:not(.revealed) .charts, body.present:not(.revealed) .legend { display: none !important; }
body.present:not(.revealed) .axis-names {
  display: flex; flex-direction: column; gap: 2.2vh; list-style: none; padding: 0; margin: 2vh 0 0;
}
body.present:not(.revealed) .axis-names li {
  font-family: var(--display); font-size: 4.4vh; line-height: 1.2; color: var(--ink);
  padding-left: 2.4vh; border-left: .5vh solid var(--accent);
}
/* After the reveal: the bars, sized to the screen. */
body.present .bar { height: 31vh; }
body.present .bars { gap: 1.6vh; }
body.present .seg { font-size: 1.6vh; }
body.present .axis figcaption { font-size: 1.8vh; margin-top: 1.2vh; }
body.present .hbar { height: 2.6vh; }
body.present .hbar .seg { font-size: 1.4vh; }
body.present .coord-key { font-size: 1.5vh; margin-top: 1vh; }
body.present .coord-key i { width: 1.2vh; height: 1.2vh; }
body.present .legend { font-size: 1.7vh; margin-top: 1.6vh; gap: .6vh; }
body.present .filling p { font-size: 4vh; }
body.present .filling small { font-size: 2vh; }
body.present .results { display: flex; flex-direction: column; }
body.present .charts { flex: 1; min-height: 0; }

/* Panel mode on a portrait screen (a phone opening the panel link): one scrolling column, the QR
   under the title, the bars at their normal size. The projector layout above assumes landscape. */
@media (orientation: portrait) {
  body.present { overflow: auto; }
  body.present .page { display: block; height: auto; width: calc(100% - 32px); padding: 28px 0 40px; }
  body.present h1 { font-size: clamp(2.4rem, 11vw, 4rem); line-height: 1; }
  body.present .event-chip { font-size: .85rem; padding: 6px 14px; }
  body.present .present-panel { width: min(300px, 75vw); margin: 28px auto; gap: 12px; }
  body.present .qr-cap, body.present .qr-cap b { font-size: 1rem; }
  body.present .keys { font-size: .75rem; }
  body.present .charts { grid-template-columns: minmax(0, 1fr); }
  body.present:not(.revealed) .big-total { font-size: 2rem; }
  body.present:not(.revealed) .axis-names li { font-size: 1.5rem; }
  body.present .chart { padding: 18px 14px 16px; }
  body.present .chart-head h3 { font-size: 1.15rem; }
  body.present .meta, body.present .live { font-size: .74rem; }
  body.present .live i { width: 8px; height: 8px; }
  body.present .lockup .presenter { font-size: .74rem; }
  body.present .bar { height: 260px; }
  body.present .bars { gap: 8px; }
  body.present .seg { font-size: .76rem; }
  body.present .axis figcaption, body.present .coord p { font-size: .8rem; }
  body.present .hbar { height: 22px; }
  body.present .hbar .seg { font-size: .7rem; }
  body.present .coord-key { font-size: .74rem; grid-template-columns: 1fr; }
  body.present .coord-key i { width: 10px; height: 10px; }
  body.present .legend { font-size: .86rem; }
  body.present .filling p { font-size: 1.3rem; }
  body.present .filling small { font-size: .86rem; }
}

/* ---- Panel mode's second screen: the build-up (plan 001, step 14f) ----
   The keys drive it, so the stage shows its counter and not its buttons; the drawing is sized to
   the screen's height. */
body.present .controls .btn { visibility: hidden; }
@media (orientation: landscape) {
  body.present .buildup { grid-column: 1; grid-row: 1 / span 2; min-height: 0; padding: 0; }
  body.present .buildup > .label { font-size: 1.5vh; margin-bottom: 1vh; }
  body.present .buildup h2 { font-size: 6vh; margin-bottom: 2vh; }
  body.present .stage { gap: 4vh; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
  body.present .figure { max-width: calc((100vh - 26vh) * 1.4); }
  body.present .which { font-size: 1.5vh; }
  body.present .counter { font-size: 1.8vh; }
  body.present .controls { margin-top: 0; }
  body.present .caption .say { font-size: 3.4vh; }
  body.present .caption .read { font-size: 2.6vh; margin-top: 2.4vh; }
  body.present .caption .small, body.present .caption .held { font-size: 1.7vh; }
}

/* ---- Panel mode's third screen: the step (plan 001, steps 11e and 14f) ----
   Space reveals the bars, then moves on a screen at a time. On a projector screen three carries the
   heading, the coordination bars and the drawing; the parts' prose is for a phone, and the
   presenter says it. */
@media (orientation: landscape) {
  body.present .step {
    grid-column: 1; grid-row: 1 / span 2; min-height: 0; padding: 0; border: 0;
    display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); grid-template-rows: auto auto minmax(0, 1fr);
    column-gap: 3vh; align-content: start;
  }
  body.present .step > .label { grid-column: 1 / -1; font-size: 1.5vh; margin-bottom: 1vh; }
  body.present .step h2 { grid-column: 1 / -1; font-size: 6vh; margin-bottom: 3vh; }
  body.present #part-1, body.present #part-2, body.present #part-4,
  body.present #part-3 > h3, body.present #part-3 > p, body.present .step .post-link { display: none; }
  body.present #part-3 { grid-column: 1; grid-row: 3; margin: 0; max-width: none; }
  body.present .boxes { grid-column: 2; grid-row: 3; gap: 2vh; min-height: 0; }
  body.present .coord { margin: 0; padding: 2.2vh 2.4vh 2vh; }
  body.present .coord > p { font-size: 2vh; margin-bottom: 1.6vh; }
  body.present .coord > p.held { margin: 1.6vh 0 0; }
  body.present .coord-row + .coord-row { margin-top: 2vh; padding-top: 1.8vh; }
  body.present .coord-name { font-size: 1.7vh; margin-bottom: .8vh; }
  body.present .hbar { height: 3vh; }
  body.present .hbar .seg { font-size: 1.5vh; }
  body.present .coord-key { font-size: 1.6vh; grid-template-columns: 1fr; margin-top: 1.2vh; gap: .5vh; }
  body.present .coord-key i { width: 1.3vh; height: 1.3vh; }
  body.present .card { padding: 2vh 2.4vh; }
  body.present .card-head { margin-bottom: 1vh; }
  body.present .card-head h3 { font-size: 2.6vh; }
  body.present .card-head .meta { font-size: 1.7vh; }
  /* One block: the drawing over its lines. Two: side by side within the card, drawing smaller. */
  body.present .card-body { grid-template-columns: 1fr; gap: 1.4vh; justify-items: center; }
  body.present .drawing { width: min(100%, 64vh); }
  body.present .boxes:has(.card + .card) .card-body { grid-template-columns: auto minmax(0, 1fr); justify-items: start; gap: 2.4vh; }
  body.present .boxes:has(.card + .card) .drawing { width: 38vh; }
  body.present .lines { width: 100%; }
  body.present .read { font-size: 2.5vh; margin-bottom: 1.2vh; }
  body.present .lines .small { font-size: 1.6vh; margin: 0; }
  body.present .boxes > .held { font-size: 1.8vh; }
}