/* The pages the server renders (DECISIONS #332): the past rooms' index and pages, About, How to play. app.css gives
   the cards, labels, chips and the How to play blocks; this file adds the page frame, in the tokens of §7.1 only. */
.pages { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--gap-col); }
/* DECISIONS #340: the footer follows the content; the app's screen height (.page) had pushed it a screen down on a
   short page, empty ground above it */
.page.pages { min-height: 0; }
.pages h1 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 22px; letter-spacing: 0.5px; }
.pages h2 { margin: 0; font-family: var(--font-mono); font-weight: 400; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.pages p { margin: 0; font-size: 17px; line-height: 1.5; }
.pages p.hint { font-size: 14px; }
.pages .muted { color: var(--text-soft); }
.pages a { color: var(--good); text-decoration: underline; text-underline-offset: 3px; }
.pages .btn-ghost, .pages .brand, .pages .rooms-list a { text-decoration: none; color: var(--text); }
.pages .card--pad { gap: 10px; }
.pages .card--pad .label { margin-top: 6px; }
.pages .card--pad .label:first-child { margin-top: 0; }
.pages .showrunner__text { color: var(--text); }
.pages__header { gap: 12px 16px; }
.pages a.pages__play { display: inline-flex; align-items: center; text-decoration: none; color: var(--ground); }
.pages .scene-card .scene > svg { display: block; width: 100%; height: auto; }
.room-page { display: flex; flex-direction: column; gap: var(--gap-card); }
.room-page__meta { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1px; color: var(--muted); }
.room-page__closing { margin-top: 6px; }
.kit-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 16px; line-height: 1.45; }
.notes-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 16px; line-height: 1.45; }
.stats-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 13px; }
.stats-table th, .stats-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.stats-table th { width: 38%; font-size: 11px; letter-spacing: 1px; color: var(--muted); font-weight: 400; }
.stats-table td { font-family: var(--font-body); font-size: 15px; line-height: 1.45; }
.wall-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-style: italic; font-size: 15px; line-height: 1.45; }
.wall-list .who { font-style: normal; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.rooms-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
/* DECISIONS #343: the keeper's medallion beside the room's name (an <img>, GET /medallion/{n}.svg), the date and the
   escapes at the right; on a phone they go under the name, the medallion beside both */
.rooms-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "medal title meta"; align-items: center; gap: 4px 14px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-tile); }
.rooms-list .room-medallion { grid-area: medal; width: 40px; height: 40px; }
.rooms-list a { grid-area: title; font-family: var(--font-display); font-size: 16px; letter-spacing: 0.5px; }
.rooms-list .meta { grid-area: meta; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.5px; color: var(--muted); }
/* The front page before the app draws (the server-rendered block, server/pages/front.py) */
.ssr__line { margin: 0; font-size: 16px; line-height: 1.45; }
.ssr__how { display: flex; flex-direction: column; gap: 8px; }
.ssr__how p { margin: 0; font-size: 16px; line-height: 1.5; }
@media (max-width: 759px) {
  /* app.css reorders the classic phone page's cards (.scene-card, .objective); a room page keeps its own order */
  .room-page .scene-card, .room-page .objective { order: 0; }
  /* DECISIONS #340: no spare room on a phone. The nav's three links in equal thirds over the full-width Play today's
     room, every button 44 px (a link's padding no longer added to it, app.css); the room list's cards, the content
     cards (14 px, as the phone shell's) and the gaps between them closer. */
  .pages { gap: 16px; }
  .pages__header { padding: 12px; gap: 12px; }
  .pages .header__actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
  .pages .header__actions .btn-ghost { min-height: 44px; padding: 0 2px; white-space: nowrap; }
  .pages .header__actions .pages__play { grid-column: 1 / -1; justify-content: center; min-height: 44px; }
  .pages .card--pad { padding: 14px; }
  .room-page { gap: 12px; }
  .rooms-list { gap: 8px; }
  .rooms-list li { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "medal title" "medal meta"; gap: 2px 12px; padding: 10px 14px; }
  .rooms-list a { line-height: 1.25; }
  .rooms-list .meta { line-height: 1.35; }
}