/* Roundtable, replayed: the strip and the conductor's check, in the atlas's own tokens. */
body { display: flex; flex-direction: column; }
.app { flex: 1 1 auto; height: auto; min-height: 20rem; }
/* a replay takes no questions, so the question box is not shown */
#composer { display: none; }
.rp-strip { display: grid; gap: 6px; padding: 10px 20px 12px; background: var(--surface); border-bottom: 1px solid var(--border-2); }
.rp-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.rp-head a { color: var(--accent); }
.rp-strip h1 { font: 400 22px/1.2 var(--serif); }
.rp-line { max-width: 120ch; }
.rp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.rp-bar button { min-height: 32px; padding: 4px 11px; }
/* Pause/Play: one grid cell, so the button's width never changes */
.rp-pp { display: inline-grid; }
.rp-pp span { grid-area: 1 / 1; }
.rp-pp span + span, .rp-paused span:first-child { visibility: hidden; }
.rp-paused span + span { visibility: visible; }
/* basis = the longest stage name, so a new stage never re-wraps the row */
.rp-status { flex: 1 1 29ch; min-width: 29ch; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--muted); font: 12px/1.5 var(--mono); }
.rp-wrap { min-width: 0; white-space: normal; }
.rp-check { flex: none; max-height: 40vh; overflow: auto; padding: 12px 20px 14px; background: var(--bg); border-bottom: 1px solid var(--border-2); }
.rp-check[hidden] { display: none; }
.rp-check h2 { font: 400 20px/1.25 var(--serif); margin-bottom: 6px; }
.rp-check ul { margin: 6px 0; padding-left: 1.3em; }
.rp-check li { margin: 4px 0; }
.rp-check p, .rp-check li { max-width: 100ch; }
.rp-foot { margin-top: 8px; font-weight: 650; }
/* narrow: the atlas's overlay panes start under its header, not at a viewport offset */
@media (max-width: 980px) { #sidebar, #info { position: absolute; top: 0; } }
@media (max-width: 560px) { .rp-strip, .rp-check { padding-left: 16px; padding-right: 16px; } }
/* phones and short screens: the page scrolls, the strip scrolls away and the atlas gets the whole screen */
@media (max-width: 700px), (max-height: 640px) {
  html, body { height: auto; }
  .app { flex: none; height: 100vh; height: 100svh; min-height: 0; }
  /* the check follows the transcript, where scrolling past its end arrives */
  .rp-check { order: 1; max-height: none; border-top: 1px solid var(--border-2); }
}