/* 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 ---------- */
.stage .slide { position: absolute; top: 0; left: 0; right: auto; bottom: auto; width: var(--deck-w); height: 1080px; overflow: hidden; }

/* Base padding: the old 420 px right padding (floating card) becomes a normal margin. */
.slide .slide-inner { padding: 100px 120px 120px 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: 120px; }
.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: 100px; gap: 80px; }
.slide.kind-qr .qr-big .qr-box { width: 520px; height: 520px; }
.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 boxes must fit in 1620 minus padding (E5, E14, E16). */
.slide.kind-vote .opts, .slide.kind-vote ul.options { gap: 48px; }
.slide.kind-vote .opts span, .slide.kind-vote ul.options li { font-size: 88px; }

/* W6 label badges: re-spaced for the 1620 px deck (fixed lefts in app.css were laid out for 1920). */
.slide .hl { font-size: 36px; bottom: 60px; }
.slide .hl-change { left: 140px; }
.slide .hl-user { left: 348px; }
.slide .hl-benefit { left: 503px; }
.slide .hl-picture { left: 702px; }
.slide .hl-boundaries { left: 899px; }
.slide .hl-done { left: 1169px; }
.slide .hl-delivery { left: 1333px; }
/* 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 (W10): gold rule, branding block (SecondSpeaker wordmark, tagline, thin rule, "by" plus the
   Dawnbreaker lockup), then the live block (QR tile or the closed message, URL, hint, slide id, count line)
   vertically centred in the remaining space, then a 40 px bottom padding. 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); }
.ask-card .card-inner { display: flex; flex-direction: column; align-items: center; gap: 0; width: 100%; height: 100%; box-sizing: border-box; padding: 52px 8px 40px; }

/* Branding block (about 280 px tall in design space, top of the bar). */
.ask-card .brand { display: flex; flex-direction: column; align-items: center; width: 100%; flex: 0 0 auto; }
/* Wordmark: Montserrat 700, 32 px, tight tracking; "Second" in paper, "Speaker" in gold. One line, no wrap. */
.ask-card .brand-name { font-family: var(--ss-font-en); font-size: 34px; font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; white-space: nowrap; color: var(--ss-ink); }
.ask-card .brand-a { color: var(--ss-ink); }
.ask-card .brand-b { color: var(--ss-brand); }
/* Tagline: one quiet line in muted paper under the wordmark. */
.ask-card .brand-tag { margin-top: 10px; font-size: 19px; 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: 30px 0 26px; }
/* "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: column; align-items: center; justify-content: center; gap: 10px; font-size: 17px; color: var(--ss-muted); line-height: 1; letter-spacing: 0.04em; }
.ask-card .brand-by img { width: 220px; height: auto; display: block; opacity: 0.96; }

/* Live block: fills the rest of the column and centres its children vertically. */
.ask-card .card-main { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; width: 100%; flex: 1 1 auto; min-height: 0; }
/* QR tile: 260 px pure white tile, 8 px radius, 10 px inner padding, so the code itself is 240 px in design space. */
.ask-card .qr { width: 260px; height: 260px; background: #ffffff; border-radius: var(--ss-radius); padding: 10px; box-sizing: border-box; flex: 0 0 auto; }
.ask-card .qr svg { width: 100%; height: 100%; display: block; }
/* Closed message: takes the place of the QR tile and URL (same height as the tile plus the gap plus the URL block),
   one calm line, no spinner, so the hint, slide id and count do not move when the bar flips. */
.ask-card .closed { width: 100%; height: 331px; 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; }
/* URL breaks only at the <wbr> after the host (host on one line, path on the next). */
.ask-card .url { font-size: 22px; font-weight: 700; color: var(--ss-ink); letter-spacing: 0; overflow-wrap: normal; word-break: keep-all; white-space: normal; line-height: 1.2; max-width: 288px; min-height: 53px; }
.ask-card .hint { font-size: 22px; color: var(--ss-ink-body); line-height: 1.25; max-width: 210px; } /* breaks as "Ask or comment on" and "this slide" */
/* Current slide id under the hint ("Slide E4"), muted, 20 px design size. */
.ask-card .slide-id { font-size: 20px; color: var(--ss-muted); line-height: 1.2; min-height: 1.2em; letter-spacing: 0.02em; }
.ask-card .count { 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). */
.stage.on-qa .ask-card { width: var(--col-w); }
.stage.on-qa .ask-card .qr { width: 260px; height: 260px; }

/* 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; }