/* SecondSpeaker screen layout (screen.html only, loaded after app.css).
   The 1920 x 1080 stage is split into a deck area (left, 1620 x 1080, 3:2) and a fixed
   SecondSpeaker column (right, 300 px). Slides render inside the deck area only, so no
   text can run under the QR card. fitStage keeps scaling the whole 1920 x 1080 stage. */

:root {
  --deck-w: 1620px;
  --col-w: 300px;
  /* Column colours come from the --ss-* dark block in app.css (brand ink, gold rule). Kept as aliases. */
  --col-bg: #242220;
  --col-line: #3B3733;
}

/* ---------- deck area ---------- */
/* Round 3 (2026-08-26): the stage blocks the bottom about 15 percent of the LED wall, so the
   slide host is 910 px tall; the bottom 170 px stays empty (stage background). Overflow checks
   and shrinkToFit in slides.js measure against this height, so the safe zone is enforced. */
.stage .slide { position: absolute; top: 0; left: 0; right: auto; bottom: auto; width: var(--deck-w); height: 910px; overflow: hidden; }

/* Base padding: the old 420 px right padding (floating card) becomes a normal margin.
   Round 3: the safe zone lives in the 910 px slide host above, so bottom padding is light. */
.slide .slide-inner { padding: 100px 120px 60px 140px; }
.slide.kind-title .slide-inner, .slide.kind-part .slide-inner { padding-left: 160px; padding-right: 160px; }
.slide.kind-quote .slide-inner { padding-left: 200px; padding-right: 140px; }
.slide.kind-vote .slide-inner { padding-right: 120px; padding-bottom: 60px; }
.slide.kind-map .slide-inner { padding-right: 120px; }
.slide.kind-qa .slide-inner { padding-right: 140px; }
.slide.kind-qr .slide-inner { padding-right: 120px; padding-bottom: 60px; gap: 80px; }
.slide.kind-qr .qr-big .qr-box { width: 520px; height: 520px; }
.slide.kind-qr .qr-big .qr-box.qr-wait { display: flex; align-items: center; justify-content: center; }
.slide.kind-qr .qr-big .qr-box.qr-wait::after { content: "..."; font-size: 96px; color: var(--deck-ink-3, #9a9a94); letter-spacing: 0.2em; }
.slide.kind-qr .qr-big .qr-url { max-width: 660px; font-size: 34px; word-break: normal; overflow-wrap: anywhere; }
.slide.kind-backup .slide-inner { padding-right: 140px; }

/* Vote options: three columns share 1620 minus padding (E5, E14, E16, E17B).
   Deck light theme round 2 (2026-08-26): all sizing lives in app.css; here only the flex gap. */
.slide.kind-vote .opts, .slide.kind-vote ul.options { gap: 0; }

/* W6 label badges: small chips in a row to the right of the page title (Bowie 08-26:
   the old bottom row overlapped the brief once the slide host shrank to the 910 px LED safe zone). */
.slide .hl { font-size: 21px; font-weight: 700; padding: 6px 0; border-radius: 999px; bottom: auto; top: 108px; left: auto; width: 146px; box-sizing: border-box; text-align: center; }
.slide .hl-change { right: 1068px; }
.slide .hl-user { right: 910px; }
.slide .hl-benefit { right: 752px; }
.slide .hl-picture { right: 594px; }
.slide .hl-boundaries { right: 436px; }
.slide .hl-done { right: 278px; }
.slide .hl-delivery { right: 120px; }
/* The fragment wrapper must not be transformed while it fades in, otherwise it becomes the containing
   block of the absolutely positioned badge and the badge snaps 140 px left when the transition ends. */
.slide .fragment:has(> .hl) { transform: none; }

/* ---------- SecondSpeaker column (product chrome: ink ground, 3 px gold top rule, white QR tile) ----------
   Vertical order (W16, Bowie 2026-08-25): gold rule, session topic with the presenter name under it
   (one block), generous breathing space, then a tight group of the current slide line, the hint and
   the QR tile (short URL inside the tile, one line), the count line, flexible space, then the brand
   credit block at the bottom over a 40 px padding. Vertical rhythm rides multiples of 8 px. The bar
   only uses --ss-* tokens (dark block in app.css), never deck colours, so a deck theme cannot leak into it. */

/* Self hosted Montserrat for the wordmark only (same two files ask.html and index.html use, relative to css/,
   so it resolves over http and from file://). No CDN. */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/montserrat-600.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/montserrat-700.woff2") format("woff2"); }

.stage .ask-card {
  position: absolute; top: 0; left: var(--deck-w); right: auto; bottom: auto;
  width: var(--col-w); height: 1080px;
  margin: 0; padding: 0; border-radius: 0; box-shadow: none;
  background: var(--ss-paper); color: var(--ss-ink);
  border-left: 2px solid var(--ss-line);
  display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 0;
  font-family: var(--ss-font); font-size: 24px; line-height: 1.2; text-align: center;
}
/* The one brand flourish: a 3 px gold rule along the very top of the column (pseudo element, so the
   1080 px height and the layout are untouched). */
.stage .ask-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--ss-brand); }
/* Bottom padding 170 px: the hall stage LED wall hides roughly the bottom 15 percent (162 px of 1080,
   Bowie 2026-08-26), so no content may sit there; the ink ground simply continues. */
.ask-card .card-inner { display: flex; flex-direction: column; align-items: center; gap: 0; width: 100%; height: 100%; box-sizing: border-box; padding: 36px 8px 186px; }

/* School logo tile at the very top: white tile (the PNG carries a baked white ground), same radius
   family as the QR tile. 232 px wide keeps the college name clearly readable from the room. */
.ask-card .school { width: 232px; background: #ffffff; border-radius: 10px; padding: 10px 12px; box-sizing: border-box; flex: 0 0 auto; margin-bottom: 28px; }
.ask-card .school img { width: 100%; height: auto; display: block; }

/* Brand credit block (bottom of the bar, unchanged position from W10/W11). */
.ask-card .brand { display: flex; flex-direction: column; align-items: center; width: 100%; flex: 0 0 auto; padding-bottom: 6px; }
/* Wordmark: Montserrat 700, tight tracking; "Second" in paper, "Speaker" in gold. One line, no wrap. */
.ask-card .brand-name { font-family: var(--ss-font-en); font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; white-space: nowrap; color: var(--ss-ink); opacity: 0.92; }
.ask-card .brand-a { color: var(--ss-ink); }
/* "Speaker" in a gold gradient in the spirit of the Dawnbreaker sun (W16: a wider dawn range, light
   yellow through amber to deep orange, so the gradient clearly reads at 26 px; no red). Solid brand
   gold is the fallback for engines without background-clip: text; the @supports block upgrades it. */
.ask-card .brand-b { color: var(--ss-brand); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ask-card .brand-b {
    background-image: linear-gradient(180deg, #FCE08A 0%, #FACB45 50%, #F8B500 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}
/* Tagline: one quiet line in muted paper under the wordmark. */
.ask-card .brand-tag { margin-top: 6px; font-size: 16px; font-weight: 500; color: var(--ss-muted); line-height: 1.3; letter-spacing: 0.01em; white-space: nowrap; }
/* Thin divider between the product and the maker. */
.ask-card .brand-rule { width: 220px; height: 1px; background: var(--ss-line); margin: 16px 0 14px; opacity: 0.6; }
/* "by" on its own quiet line, then the light Dawnbreaker lockup centred under it (220 px wide, about 48 px tall,
   clearly visible from the room; the PNG carries its own clear space). */
.ask-card .brand-by { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 12px; font-size: 15px; color: var(--ss-muted); line-height: 1; letter-spacing: 0.03em; white-space: nowrap; }
.ask-card .brand-by img { width: 150px; height: auto; display: block; opacity: 0.92; }

/* Live block: fills the space above the brand credit; rhythm through per element margins (gap 0). */
.ask-card .card-main { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0; width: 100%; flex: 1 1 auto; min-height: 0; }
/* Session topic at the top of the bar (up to 3 lines, then clipped; W16 larger read from the room). */
.ask-card .topic { font-size: 31px; font-weight: 700; line-height: 1.3; color: var(--ss-ink); text-align: center; max-width: 276px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Presenter name right under the topic, smaller and muted (scaled with the topic, W16). */
.ask-card .presenter { margin-top: 8px; font-size: 20px; font-weight: 500; color: var(--ss-muted); line-height: 1.3; letter-spacing: 0.02em; min-height: 1.3em; }
/* Generous breathing space after the topic block, then the slide line opens the tight
   slide plus hint plus QR group. */
.ask-card .slide-id { margin-top: 30px; font-size: 20px; color: var(--ss-muted); line-height: 1.2; min-height: 1.2em; letter-spacing: 0.02em; }
/* Hint sits close under the slide line and right above the QR tile (one line, W16). */
.ask-card .hint { margin-top: 12px; font-size: 21px; color: var(--ss-ink-body); line-height: 1.25; }
/* QR tile: 216 px wide pure white tile, 10 px radius, 8 px padding; the code (200 px, fills the tile)
   sits above the short URL, which lives INSIDE the tile on one thin line. Tile height 240 px (8+200+8+16+8). */
.ask-card .qr-tile { margin-top: 12px; width: 216px; background: #ffffff; border-radius: 10px; padding: 8px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; }
.ask-card .qr { width: 200px; height: 200px; flex: 0 0 auto; }
.ask-card .qr svg { width: 100%; height: 100%; display: block; }
/* Short URL inside the tile: one line, thin, small, dark grey on white. Must never wrap and never
   ellipsise (ss.dawnbreaker.ai/ask/workshop is the longest string; verified to fit at this size). */
.ask-card .qr-url { margin-top: 8px; max-width: 200px; font-size: 13px; font-weight: 400; color: #6b6b6b; letter-spacing: 0; line-height: 16px; white-space: nowrap; }
/* screen.js toggles .hidden on the inner .qr when the session closes; the tile follows it. */
.ask-card .qr-tile:has(> .qr.hidden) { display: none; }
/* The old below-the-tile URL element stays in the DOM for screen.js but is never shown (W13). */
.ask-card .url { display: none; }
/* Closed message: replaces the QR tile with the same vertical footprint (margin 12 + height 240),
   one calm line, no spinner, so the count line does not move when the bar flips. */
.ask-card .closed { margin-top: 12px; width: 100%; height: 240px; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 600; color: var(--ss-ink); white-space: nowrap; flex: 0 0 auto; }
/* While closed, screen.js also hides the hint and the slide line; keep their boxes so nothing above
   the closed message shifts (app.css .hidden is display:none !important, hence the override here). */
.ask-card .hint.hidden, .ask-card .slide-id.hidden { display: block !important; visibility: hidden; }
.ask-card .count { margin-top: 24px; font-size: 24px; font-weight: 700; color: var(--ss-ink); min-height: 1.2em; display: flex; align-items: center; justify-content: center; gap: 10px; }
/* Live indicator: gold dot before the count text (CSS only); offline the JS leaves just the grey dot. */
.ask-card .count::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--ss-brand); display: inline-block; flex: 0 0 12px; }
.ask-card .count:has(.dot)::before, .ask-card .count:empty::before { display: none; }
.ask-card .count .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--ss-muted); display: inline-block; }
/* On the qa slide the column stays exactly as is (the headline list lives in the deck area).
   The qr rule counters the larger on-qa size in app.css (higher specificity there). */
.stage.on-qa .ask-card { width: var(--col-w); }
.stage.on-qa .ask-card .qr { width: 200px; height: 200px; }

/* Rehearsal marker (wave 5 fix 7): small corner tag on the stage while ?mock=1 is on. Stays visible
   under the black screen on purpose: a rehearsal window should never pass for the real deck. */
.stage .mock-tag { position: absolute; top: 14px; left: 14px; z-index: 40; font-family: var(--ss-mono); font-size: 20px; font-weight: 700; letter-spacing: 0.1em; color: #242220; background: #F5A623; padding: 4px 12px; border-radius: 6px; opacity: 0.92; }

/* Black screen (key B) hides the deck and the whole column, background included. */
.stage.black .slide, .stage.black .ask-card { visibility: hidden; }