/* Page frame: base elements, header and how the stage (scene, rail, detail) is arranged. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
/* The light theme paints a fixed blue gradient behind everything (--page-bg); dark stays solid. */
html { background: var(--page-bg, var(--bg)); min-height: 100%; }
/* Desktop is a fixed-height console, so the gradient can stay put; on phones it scrolls with the page
   (fixed backgrounds are unreliable there and leave a bare band below the first screen). */
@media (min-width: 960px) { html { background-attachment: fixed; } }
body { background: transparent; }
body { font: 400 15px/1.45 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--select); outline-offset: 2px; }
.num { font-family: var(--font-cond); font-variant-numeric: tabular-nums; }

/* Phones and tablets: one column that scrolls; the detail opens as a full-screen sheet. */
.app { display: grid; grid-template-columns: minmax(0, 1fr); }
.stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "scene" "rail"; }
.scene-cell { grid-area: scene; position: relative; height: clamp(360px, 62svh, 640px); overflow: hidden; }
.rail { grid-area: rail; min-width: 0; }
.detail { grid-area: rail; min-width: 0; }
html.has-sheet, html.has-sheet body { overflow: hidden; }

.head { display: flex; align-items: center; gap: 12px; padding: 10px var(--gutter); }
.head__brand { display: block; height: 24px; width: auto; flex: none; padding-right: 12px; border-right: 1px solid var(--rule-strong); }
.head__title { margin: 0; font: 600 17px/1.2 var(--font-cond); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.head__place { color: var(--ink-2); font-weight: 500; }
.head__live { margin: 0 0 0 auto; display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 13px; white-space: nowrap; }
.head__pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--st-loaded); box-shadow: 0 0 0 0 color-mix(in srgb, var(--st-loaded) 55%, transparent); animation: pulse 2.2s ease-out infinite; }
@keyframes pulse { to { box-shadow: 0 0 0 8px transparent; } }

@media (max-width: 559px) {
  .head { flex-wrap: wrap; }
  .head__title { white-space: normal; }
  .head__place { display: none; }
  .head__live { font-size: 12px; white-space: normal; text-align: right; }
}
@media (min-width: 720px) { .scene-cell { height: clamp(380px, 56svh, 640px); } }

/* Desktop and tablet landscape: a fixed-height console. The scene is the wide upper band and the
   rail hangs under it; in detail the scene keeps about two thirds and the panel scrolls beside it. */
@media (min-width: 960px) {
  html, body { height: 100%; }
  .app { height: 100dvh; grid-template-rows: auto auto auto minmax(0, 1fr); } /* header, page tabs, KPIs, stage */
  .stage { min-height: 0; grid-template-rows: minmax(0, 1fr) auto; }
  .scene-cell { height: auto; min-height: 0; }
  .app.is-detail .stage { grid-template-columns: minmax(0, 1fr) clamp(400px, 36vw, 560px); grid-template-rows: minmax(0, 1fr); grid-template-areas: "scene detail"; }
  .app.is-detail .detail { grid-area: detail; overflow-y: auto; overscroll-behavior: contain; background: var(--surface); }
  .head { padding: 16px 32px 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .head__pulse { animation: none; }
}

/* Feed status: amber pulse when stale, grey while waiting for the first snapshot. */
.head__live.is-stale { color: var(--st-unloaded); }
.head__live.is-stale .head__pulse, .head__live.is-waiting .head__pulse { animation: none; background: currentColor; box-shadow: none; }
.app.is-loading .kpis, .app.is-loading .rail__cols { opacity: 0.35; }