/* Hallmark · shape: app screen · genre: playful · theme: Hum (deal 1/3, seed virtual-educational-escape-rooms-4d99·99df24ef·2026-11-05·r0)
 * nav: top bar · signature: the class ledger, teams down and clues across, each cell a clue's time with its hints and wrong tries · states: signed out, not listed, loading, empty, error, lobby, running, paused, ended
 * axes: light/rounded-sans/chromatic-yellow · posture: full-palette · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R4 V4 · weakest: P, a results table is expected; its job is to be read at a glance from the front of a room */
/* Hallmark · dismissed F4 · .btn is the card-stock secondary and only .btn--primary is filled pear, one per view */
@import url("./play.css");

.topbar .btn { margin-bottom: var(--space-2xs); }
.stack { display: grid; gap: var(--space-md); }
.stack h2, .new-session h2, .ledger-head h2 { max-width: none; font-size: var(--text-xl); letter-spacing: 0; outline: none; }
.screen__sheet h2 { max-width: none; font-size: var(--text-2xl); letter-spacing: 0; outline: none; }
.screen__sheet ol { display: grid; gap: var(--space-xs); margin: 0; padding-left: 1.4em; }
.or { padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }

.teach { display: grid; gap: var(--space-xl); width: min(100%, 90rem); margin-inline: auto; padding: var(--space-lg) var(--space-md) var(--space-2xl); }

.field { min-height: var(--control-h-lg); }
select.field { cursor: pointer; }

.new-session { display: grid; gap: var(--space-md); justify-items: start; padding: var(--space-lg); border-radius: var(--radius-card); background: var(--grain), var(--fibre), var(--color-card); box-shadow: var(--shadow-card); }
.new-session__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); width: 100%; align-items: start; }

.row-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.row-actions .btn { min-height: 40px; padding-inline: var(--space-md); }

.problem { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-stock); background: var(--color-paper-3); }
.problem .icon { color: var(--color-error); }
.uid { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.uid code { padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-input); background: var(--color-paper-3); font-family: var(--font-outlier); font-size: var(--text-sm); overflow-wrap: anywhere; }

/* Requests for access (admins) and the hand-adding note: closed until opened, so emails stay off a projector. */
.requests, .aside { border-radius: var(--radius-card); }
.requests { padding: var(--space-md) var(--space-lg); background: var(--grain), var(--fibre), var(--color-card); box-shadow: var(--shadow-card); }
.aside { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); border-radius: 0; }
.requests summary, .aside summary { min-height: 44px; padding-block: var(--space-sm); font-weight: 600; cursor: pointer; border-radius: var(--radius-input); }
.requests summary:focus-visible, .aside summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.requests[open] summary { margin-bottom: var(--space-sm); }
.requests__email { overflow-wrap: anywhere; }

.skeleton { display: grid; gap: var(--space-xs); }
.skeleton span { display: block; height: 44px; border-radius: var(--radius-input); background: var(--color-paper-3); }

.session-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md) var(--space-xl); padding: var(--space-lg); border-radius: var(--radius-card); background: var(--grain), var(--fibre), var(--color-card); box-shadow: var(--shadow-card); }
.session-code .field-label { margin: 0; }
.session-code__value { font: 600 clamp(2.5rem, 6vw, 4.5rem)/1.05 var(--font-outlier); }
.session-run { display: grid; gap: var(--space-sm); justify-items: start; }
.session-run__state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.session-status { font-weight: 600; }

.ledger-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-md); }
.grid-wrap { overflow-x: auto; border-radius: var(--radius-card); background: var(--grain), var(--fibre), var(--color-card); box-shadow: var(--shadow-card); }
.grid-wrap:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.grid-empty { padding: var(--space-xl) var(--space-lg); }
.ledger { min-width: max-content; }
.ledger caption { padding: var(--space-sm) var(--space-md) 0; }
.ledger th, .ledger td { min-width: 9rem; padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-rule); vertical-align: top; }
.ledger thead th { max-width: 11rem; min-width: 9rem; white-space: normal; }
.ledger tbody th { position: sticky; left: 0; z-index: var(--z-base); min-width: 11rem; background: var(--color-card); box-shadow: 1px 0 0 var(--color-rule); font-weight: 500; }
.ledger thead th:first-child { position: sticky; left: 0; z-index: var(--z-raised); background: var(--color-card); box-shadow: 1px 0 0 var(--color-rule); }
.ledger__team { display: block; font-size: var(--text-md); font-weight: 600; color: var(--color-ink); }
.cell--solved { background: color-mix(in oklab, var(--color-mint) 45%, transparent); }
.cell__time { display: inline-flex; align-items: center; gap: var(--space-2xs); font-size: var(--text-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.cell__none { display: block; color: var(--color-muted); }
.cell__detail { display: block; font-size: var(--text-sm); color: var(--color-ink-2); }
.cell__action { min-height: 36px; margin-top: var(--space-2xs); padding-inline: var(--space-sm); font-size: var(--text-sm); }

@media (max-width: 40rem) {
  .new-session__fields { grid-template-columns: minmax(0, 1fr); }
  .session-head, .new-session { padding: var(--space-md); }
  .ledger tbody th, .ledger thead th:first-child { position: static; }
}

/* Facilitator notes: closed until opened, so answers stay off a projector (D37). */
.notes { padding: var(--space-md) var(--space-lg); border-radius: var(--radius-card); background: var(--grain), var(--fibre), var(--color-card); box-shadow: var(--shadow-card); }
.notes > summary { min-height: 44px; padding-block: var(--space-sm); font-weight: 600; cursor: pointer; border-radius: var(--radius-input); }
.notes > summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.notes__open { display: grid; gap: var(--space-xs); justify-items: start; padding-block: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-rule); }
.notes__body { display: grid; gap: var(--space-lg); padding-top: var(--space-md); }
.notes__body section { display: grid; gap: var(--space-xs); max-width: 70ch; }
.notes__body h3 { font-size: var(--text-lg); letter-spacing: 0; }
.notes__facts { display: grid; gap: 2px; margin: 0; }
.notes__facts div { display: flex; gap: var(--space-sm); }
.notes__facts dt { min-width: 7rem; color: var(--color-muted); }
.notes__facts dd { margin: 0; font-weight: 600; }
.notes__file { display: grid; gap: var(--space-xs); justify-items: start; }
.notes__file > summary { min-height: 44px; padding-block: var(--space-sm); cursor: pointer; border-radius: var(--radius-input); }
.notes__file > summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

/* Teacher preview */
.preview-room__row { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-sm); }
.preview-room__row .btn { margin-bottom: var(--space-2xs); }