/*
  Implements: openspec/changes/archive/gotthard-queue-monitor/design.md §7 (state rendering),
              Decision 3 (estimated marker); §13.2–§13.5 (responsive two-up/stacked cards,
              WP-15); WP-2, WP-6, WP-8 (mobile, contrast);
              portal-imagery/design.md §2–§4 (camera image + freshness);
              page-support-affordances/design.md §1–§2 (QR + build-id);
              record-currency-and-absence-states/design.md §6 (rendering); spec R2, R14
  Caused-by: run01-0067-developer-implement-currency-and-absence-prompt

  Phone-first, single-column, no horizontal scroll to read state (WP-8). Colour is
  never the only signal: the state word and the wait text carry the meaning; hue
  reinforces it. A CLEAR portal is styled as HEALTHY (calm green), never as a warning.
*/

:root {
  --bg: #0f1720;
  --card-bg: #1b2430;
  --ink: #eef2f6;
  --ink-dim: #9fb0c0;
  --queue: #e0a63a; /* amber — a live queue, attention without alarm */
  --clear: #4fbf87; /* green — healthy, free-flowing */
  --no-data: #7d8a99; /* grey — the whole page cannot obtain data (not an alarm colour) */
  --banner: #d9853b; /* document-level "updates interrupted" */
  --radius: 14px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.page {
  /* §13.3 upper bound (was 640px, too narrow to hold two cards — a root cause of the
     single-narrow-column-on-desktop bug). At 960px the two-up cards row is 928px, so
     each 1fr card is ~457px: bounded and comfortable, the camera image at a natural
     size. A centred two-up under this cap on a very wide monitor is correct, not the bug. */
  max-width: 960px;
  margin: 0 auto;
  padding: 20px 16px 32px;
}

.page__title {
  font-size: 1.25rem;
  margin: 0 0 4px;
}

.page__updated {
  margin: 0;
  color: var(--ink-dim);
  font-size: 0.85rem;
}

.page__banner {
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--banner) 22%, var(--card-bg));
  border: 1px solid var(--banner);
  color: var(--ink);
  font-weight: 600;
}

.page__banner[hidden] {
  display: none;
}

/* §13.2 — the arrangement is decided intrinsically by available width, with NO media
   query. `auto-fit` fits as many ≥ MIN_CARD columns as the cards row holds and collapses
   to one the instant it cannot, so the stack transition is a consequence of the one
   comfort number (MIN_CARD) rather than a second device-category constant that could drift
   out of step. `min(320px, 100%)` is the floor that keeps a sub-320px phone from
   overflowing into a horizontal scroll (the track clamps to 100% of the container).
   `align-items: start` (§13.4) lets unequal-height cards — a tall QUEUE-with-image beside
   a short CLEAR — take their natural height and top-align, rather than stretching the
   short one to match the tall one. */
.cards {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  align-items: start;
}

.card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 16px 18px;
  border-left: 6px solid var(--no-data);
}

.card--queue {
  border-left-color: var(--queue);
}
.card--clear {
  border-left-color: var(--clear);
}
.card--no-data {
  border-left-color: var(--no-data);
}

.card__name {
  font-size: 1.15rem;
  margin: 0;
}

.card__direction {
  margin: 2px 0 12px;
  color: var(--ink-dim);
  font-size: 0.9rem;
}

.card__state {
  display: inline-block;
  margin: 0 0 10px;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 0.8rem;
  background: color-mix(in srgb, var(--no-data) 30%, transparent);
}

.card--queue .card__state {
  background: color-mix(in srgb, var(--queue) 30%, transparent);
  color: #ffe6b8;
}
.card--clear .card__state {
  background: color-mix(in srgb, var(--clear) 26%, transparent);
  color: #c9f2dd;
}
.card--no-data .card__state {
  color: #dbe3ea;
}

.card__queue {
  margin: 0 0 6px;
  font-size: 1.4rem;
  font-weight: 700;
}

.card__waitline {
  margin: 0;
  color: var(--ink);
}

/* NO DATA: the page cannot obtain the feed — "no data can be obtained", never a guessed
   value and never a stale number passed off as current. Grey and matter-of-fact rather
   than alarming: it reads as "we cannot get the data right now", not as a broken page.
   Whole-page by construction, so both cards carry it together (spec R14). */
.card__no-data {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink-dim);
}

.card__wait-label {
  color: var(--ink-dim);
  font-size: 0.9rem;
}

.card__wait--none {
  color: var(--ink-dim);
  font-style: italic;
}

/* Estimated (derived) wait marker (Decision 3): present but subtle — a small,
   muted "estimated" tag beside the ~N min value, lower emphasis than the number,
   never dominating the card. The `~` + the visible word carry the distinction; the
   aria-label/title carry it non-visually. */
.card__estimated-tag {
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #f0d19a;
  background: color-mix(in srgb, var(--queue) 22%, transparent);
  vertical-align: middle;
}

/* Observation-age disclosure (run01-0046 Part B): how recently the feed last confirmed
   the queue — the record's own version time. Subtle and secondary to the number (small,
   dimmed), never competing with the queue length; present only on a QUEUE card. */
.card__observed {
  margin: 4px 0 0;
  color: var(--ink-dim);
  font-size: 0.75rem;
}

/* Corroborating camera image (portal-imagery WP-I1..WP-I4). The re-served frame
   fills the card width and scales down on a phone; the caption is honest about the
   frame's own freshness the same way the numbers are. */
.card__image {
  margin: 14px 0 0;
}

.card__image-frame {
  display: block;
  width: 100%;
  height: auto;
  /* §13.4 no-upscale ceiling. The frame stays fluid (width:100%/height:auto) and scales
     DOWN cleanly at the two-up width. The one hazard is the opposite direction: a lone
     full-width card (a portal absent, so auto-fit gives one card the whole row) or a wide
     monitor with the §13.3 cap removed would upscale the re-served frame past its native
     resolution and let it dominate. Capping max-width at the native frame width (1280px)
     stops that — the image never renders larger than its own pixels; height:auto keeps the
     aspect ratio, so no crop/distortion and no object-fit is needed. */
  max-width: 1280px;
  border-radius: 10px;
  background: #0b1016; /* placeholder while the frame loads */
}

.card__image-caption {
  margin: 6px 0 0;
  color: var(--ink-dim);
  font-size: 0.75rem;
}

/* A last-known ("not current") or unavailable frame: muted amber, honest not alarming. */
.card__image--stale .card__image-caption,
.card__image--unavailable .card__image-caption {
  color: #e0b779;
}

/* Self-service QR (WP-Q1): bottom of page, small, centred; a white quiet-zone plate
   so it scans against the dark page. Sized so it never overlays the cards/imagery —
   it sits in normal flow below the content, not over it. */
.page__qr {
  margin: 26px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.page__qr-label {
  margin: 0;
  color: var(--ink-dim);
  font-size: 0.78rem;
}

.page__qr-code {
  width: 128px;
  height: 128px;
  padding: 8px;
  background: #ffffff;
  border-radius: 8px;
}

.page__qr-code svg {
  display: block;
  width: 100%;
  height: 100%;
}

.page__attribution {
  margin: 22px 0 0;
  color: var(--ink-dim);
  font-size: 0.78rem;
}

/* Build identifier (WP-B1): bottom-right, small, low-contrast — legible when looked
   for, unobtrusive otherwise, and does not compete with the queue content. `user-select:
   all` makes the whole release basename select as ONE token on a single click/drag, so
   support copies it verbatim. Monospace so the id reads as a token, not prose. */
.page__build {
  position: fixed;
  right: 8px;
  bottom: 6px;
  margin: 0;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.01em;
  color: #5d6b78; /* low-contrast against --bg; legible when sought */
  -webkit-user-select: all;
  user-select: all;
}

.page__build--unstamped {
  font-style: italic;
}