/* ═══════════════ Trivia Rumble — the editorial guides ═══════════════ */
/* From Guide.dc.html. Loaded only by /trivia/:id/questions. The page frame and
   tokens come from topic.css and tokens.css.

   The reader is often a quizmaster with the page open and a room in front of
   them, reading aloud. That is why the question is 19px at 1.3 on a phone
   rather than body size, and why the answer sits on one line with its label. */

.gd-wrap {
  max-width: 1440px; margin: 0 auto; padding: 24px 20px 24px;
  display: flex; flex-direction: column; gap: 20px;
}
.gd-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.gd-h1 {
  font-weight: 900; font-size: 2rem; line-height: 0.95; letter-spacing: -0.03em;
  text-transform: uppercase; text-wrap: balance;
}
.gd-lede { font-weight: 500; font-size: 0.95rem; line-height: 1.55; max-width: 30em; }
/* A topic name and its emoji are one thing, so they do not break apart. */
.gd-crumb-topic { white-space: nowrap; }

/* ─────────── jumping ─────────── */
/* Chips on a phone, a rail on a wide screen. Neither is sticky: the bar at the
   bottom already owns sticky, and two things competing for the same edge is
   how a page starts feeling busy. */
.gd-chips { display: flex; gap: 6px; }
.gd-chip {
  flex: 1; text-align: center; border-radius: 12px; padding: 10px 6px;
  font-weight: 800; font-size: 0.875rem; color: var(--ink-dim);
  background: var(--bg-raise); box-shadow: inset 0 0 0 2px var(--line);
}
.gd-chip.is-first { color: var(--ink); box-shadow: inset 0 0 0 2px var(--gold); }
.gd-chip span { font-weight: 700; font-variant-numeric: tabular-nums; }
.gd-jump-rail { display: none; }

/* The promise, in green because it is a success state rather than decoration.
   It is the one fact that changes how the whole page can be read, so it sits
   with the answers and not only in the lede. */
.gd-safe {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 0.82rem; color: var(--good);
}
.gd-safe svg { flex: none; }

/* ─────────── the bands ─────────── */
/* Not a shelf. A shelf is for things that compete side by side and a guide is
   read in order, so a band is a rule across the page with its range on it. */
.gd-band {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  border-bottom: 2px solid var(--line); padding-bottom: 10px; margin-top: 16px;
}
.gd-band-word { font-weight: 900; font-size: 1.75rem; text-transform: uppercase; letter-spacing: -0.03em; }
.gd-band-range { font-weight: 700; font-size: 0.82rem; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.gd-band-note { font-weight: 600; font-size: 0.82rem; color: var(--ink-dim); }
/* The keyword heading the page is indexed on, kept for a crawler and a screen
   reader while the band shows the short word a reader needs. */
.gd-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ─────────── a question ─────────── */
.gd-item { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.gd-num {
  font-weight: 900; font-size: 1.125rem; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.gd-q { font-weight: 800; font-size: 1.1875rem; line-height: 1.3; }
/* The number rides on the question's line, and everything after it hangs in by
   the same amount, so the eye runs down one edge. */
.gd-item { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 0; }
.gd-num { grid-column: 1; grid-row: 1; }
.gd-q { grid-column: 2; grid-row: 1; }
.gd-body { display: contents; }
.gd-a, .gd-note { grid-column: 2; }
.gd-a {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-top: 10px;
}
.gd-a-label {
  font-weight: 800; font-size: 0.6875rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gold); flex: none;
}
.gd-a b { font-weight: 800; font-size: 1.0625rem; }
/* The reason the page exists. Its own surface, full ink, body size: under the
   answer as dim text it read as a footnote to the thing people came for. */
.gd-note {
  background: var(--bg-sink); border-radius: var(--r-ctl);
  padding: 12px 14px; margin-top: 10px;
  font-weight: 500; font-size: 0.9375rem; line-height: 1.5; color: var(--ink);
}

/* ─────────── the closer ─────────── */
/* Not a second call to action. It is the sentence that makes the bar's button
   worth pressing, which is why it carries no button of its own. */
.gd-closer {
  background: var(--bg-raise); border-radius: var(--r-panel);
  box-shadow: inset 0 0 0 2px var(--line);
  padding: 18px; display: flex; flex-direction: column; gap: 10px; margin-top: 28px;
}
.gd-closer-kicker {
  font-weight: 800; font-size: 0.75rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-dim);
}
.gd-closer-title {
  font-weight: 900; font-size: 1.375rem; text-transform: uppercase;
  letter-spacing: -0.03em; line-height: 0.95; text-wrap: balance;
}
.gd-closer-body { font-weight: 600; font-size: 0.82rem; color: var(--ink-dim); line-height: 1.5; }

.gd-more { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.gd-more-head {
  font-weight: 800; font-size: 0.75rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-dim);
}
.gd-more-row {
  background: var(--bg-raise); border-radius: var(--r-ctl); padding: 12px;
  box-shadow: inset 0 0 0 2px var(--line);
  display: flex; align-items: center; gap: 10px; color: var(--ink);
}
.gd-more-emoji { font-size: 1.25rem; flex: none; }
.gd-more-titles { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.gd-more-titles b { font-weight: 800; font-size: 0.875rem; }
.gd-more-titles span { font-weight: 600; font-size: 0.6875rem; color: var(--ink-dim); }
.gd-more-go { font-weight: 700; font-size: 0.75rem; color: var(--gold); flex: none; }

/* ─────────── the bridge ─────────── */
/* One object. A bar pinned to the bottom of a phone, the same content as a card
   beside the prose on a wide screen, and no second button anywhere. */
.gd-play-rail { display: none; }
.gd-bar {
  position: sticky; bottom: 16px; z-index: 30; margin-top: auto;
  background: var(--bg-raise); border-radius: var(--r-ctl);
  box-shadow: inset 0 0 0 2px var(--gold), 0 8px 24px oklch(0.12 0.02 40 / 0.45);
  padding: 10px 10px 10px 14px;
  display: flex; align-items: center; gap: 12px; color: var(--ink);
}
.gd-bar-emoji { font-size: 1.375rem; flex: none; }
.gd-bar-titles { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
/* A long topic name is cut hard so the button never moves. */
.gd-bar-titles b { font-weight: 800; font-size: 0.875rem; overflow: hidden; white-space: nowrap; }
.gd-bar-titles span {
  font-weight: 600; font-size: 0.6875rem; color: var(--ink-dim);
  white-space: nowrap; overflow: hidden;
}
.gd-bar-go {
  flex: none; border-radius: 12px; background: var(--gold);
  box-shadow: 0 3px 0 var(--gold-edge); color: var(--gold-ink);
  font-weight: 800; font-size: 0.875rem; padding: 11px 16px;
}

@media (max-width: 359px) {
  .gd-wrap { padding: 14px 16px 20px; }
  .gd-h1 { font-size: 1.6rem; }
  .gd-band-word { font-size: 1.625rem; }
  .gd-item { grid-template-columns: 30px minmax(0, 1fr); }
  .gd-q { font-size: 1.125rem; }
  .gd-a b { font-size: 1rem; }
  .gd-note { font-size: 0.875rem; }
  .gd-bar { bottom: 14px; padding: 8px 8px 8px 12px; }
  .gd-bar-titles b { font-size: 0.8125rem; }
  .gd-bar-go { font-size: 0.8125rem; padding: 10px 14px; }
}

@media (min-width: 900px) {
  /* Three columns: jump, prose, bridge. Both rails sticky, the prose capped at
     30em because a line of reading has a length past which it stops being one. */
  .gd-wrap {
    display: grid; grid-template-columns: 200px minmax(0, 1fr) 380px;
    gap: 56px; align-items: start; padding: 32px 72px 64px;
  }
  .gd-main { gap: 24px; }
  .gd-h1 { font-size: clamp(2.4rem, 3.6vw, 3.5rem); line-height: 0.92; }
  .gd-lede { font-size: 1.125rem; line-height: 1.6; }
  .gd-lede { max-width: 30em; }

  .gd-chips { display: none; }
  .gd-jump-rail {
    display: flex; flex-direction: column; gap: 6px;
    position: sticky; top: 24px; min-width: 0;
  }
  .gd-rail-label {
    font-weight: 800; font-size: 0.75rem; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ink-dim); padding-bottom: 6px;
  }
  .gd-jump-rail .gd-chip {
    display: flex; justify-content: space-between; gap: 10px;
    text-align: left; background: transparent; box-shadow: none;
    font-size: 0.9375rem; padding: 10px 14px;
  }
  .gd-jump-rail .gd-chip.is-first {
    background: var(--bg-raise); box-shadow: inset 0 0 0 2px var(--gold);
  }
  .gd-aloud {
    margin-top: 20px; font-weight: 600; font-size: 0.75rem;
    color: var(--ink-dim); line-height: 1.5;
  }

  .gd-band-note { margin-left: auto; }
  .gd-band-word { font-size: 2.125rem; }
  .gd-item { grid-template-columns: 48px minmax(0, 1fr); margin-top: 20px; }
  .gd-num { font-size: 1.375rem; line-height: 1.2; }
  .gd-q { font-size: 1.375rem; }
  .gd-a b { font-size: 1.1875rem; }
  .gd-note { font-size: 1rem; line-height: 1.55; padding: 14px 18px; }

  /* The bar is the phone's shape for this. On a wide screen the same content
     is the card in the rail, so the bar goes rather than doubling it. */
  .gd-bar { display: none; }
  .gd-play-rail { display: block; position: sticky; top: 24px; min-width: 0; }
  .gd-play-card {
    background: var(--bg-raise); border-radius: var(--r-panel);
    box-shadow: inset 0 0 0 2px var(--gold);
    padding: 28px; display: flex; flex-direction: column; gap: 14px;
  }
  .gd-play-head { display: flex; align-items: center; gap: 12px; }
  .gd-play-emoji {
    width: 52px; height: 52px; border-radius: 16px; background: var(--bg-sink);
    display: grid; place-items: center; font-size: 1.75rem; flex: none;
  }
  .gd-play-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .gd-play-titles b {
    font-weight: 900; font-size: 1.375rem; text-transform: uppercase;
    letter-spacing: -0.02em; line-height: 1;
  }
  .gd-play-titles span { font-weight: 600; font-size: 0.82rem; color: var(--ink-dim); }
  .gd-play-body { font-weight: 600; font-size: 0.9375rem; color: var(--ink-dim); line-height: 1.5; }
  .gd-play-btn { width: 100%; }
  .gd-play-fine { font-weight: 600; font-size: 0.75rem; color: var(--ink-dim); text-align: center; }
  .gd-play-card .gd-safe { justify-content: center; font-size: 0.75rem; }

  .gd-closer { margin-top: 36px; }
}