/* Metro Sofia UI · moments component layer.
   Extends ui.css, which extends tokens.css + tokens-ui.css. Load in that
   order. Same rules as ui.css: every rule resolves only to token names,
   states are CSS, SVG only where a shape cannot be drawn in CSS. Port
   wholesale or lift a block. This layer designs the game's MOMENTS: the
   transmission card, the record book, the clock, the events on the map,
   and the diagram on the platform wall.

   New tokens this pass needs live in the :root block at the top of THIS file so
   the deliverable is one drop-in; fold them into tokens-ui.css when convenient.

   Type note: everything the GAME says is Fira Sans, its numbers and
   headlines Oswald (Night Line, 2026-10-04). Credit the fonts in the About panel
   (pass-03 licence rule). */

:root {
  /* Era motif colours, from data.js LINE / corridor colours. A surface sets
     --tb-era to one of these and every motif slot follows. */
  --tb-era-1998: var(--tb-net-red);
  --tb-era-2009: var(--tb-net-red);
  --tb-era-2012: var(--tb-net-blue);
  --tb-era-2015: var(--tb-net-yellow);
  --tb-era-2020: var(--tb-net-green);
  --tb-era-2026: var(--tb-net-future);
  --tb-era: var(--tb-net-red);   /* default; per-surface override */

  /* Rush grades resolve to existing aspect colours; meaning, not new hues.
     A/B proceed, C neutral, D/E are information (amber then red), never alarm. */
  --tb-grade-a: var(--tb-green);
  --tb-grade-b: var(--tb-green-dim);
  --tb-grade-c: var(--tb-muted);
  --tb-grade-d: var(--tb-amber);
  --tb-grade-e: var(--tb-red);

  /* Schematic diagram surface. A sibling of the night map, not the same file.
     It shares the interface ground. */
  --tb-dia-bg: var(--tb-bg);
  --tb-dia-grid: color-mix(in srgb, var(--tb-line-hi) 28%, transparent);
  --tb-dia-tick: var(--tb-ink);
  --tb-dia-label: var(--tb-muted);
  --tb-dia-line-w: 7px;       /* trunk line weight on the diagram */
  --tb-dia-tick-w: 2.5px;

  /* Graph treatment for the statistics page. */
  --tb-graph-grid: var(--tb-line);
  --tb-graph-axis: var(--tb-line-hi);
  --tb-graph-money: var(--tb-amber);
  --tb-graph-riders: var(--tb-green);
  --tb-graph-trust: var(--tb-politic);
}

/* ============================================================================
   a · THE TRANSMISSION CARD  (Night Line, phase 3)
   Every era moment and the final edition: one wide card docked above the
   status dock, the map still visible above it. The era is carried by
   --tb-era (set inline per edition) on the left edge, the pulsing dot, the
   kicker, the notice label and the rules over the figures; the network
   drawing keeps its own line colours. Release rules kept: the sim holds
   while it is open, Escape closes it like Continue, and the OVERLAY (not
   the card) scrolls when the card is taller than the room above the dock,
   so a wheel anywhere reaches Continue. probe-console checks 3 window
   sizes x 3 UI scales x the 2009 card and the final edition.
   ========================================================================== */
.tb-moment { inset: 0 0 var(--tb-dock-h); flex-direction: column; align-items: center;
  overflow-y: auto; padding: 1rem 1rem .75rem;
  background: linear-gradient(to bottom, transparent 30%, var(--tb-veil));
  -webkit-backdrop-filter: none; backdrop-filter: none; }
/* auto top margin: docked at the foot when it fits, scrolls from the top when it does not */
.tb-tx { position: relative; flex: none; margin-top: auto; width: min(100%, 70rem);
  background: var(--tb-panel); color: var(--tb-ink);
  border: var(--tb-border) solid var(--tb-line); border-left: 4px solid var(--tb-era);
  border-radius: var(--tb-radius-panel); overflow: hidden;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.45); }
.tb-tx__main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.7fr);
  gap: 1.2rem 2rem; padding: 1rem 1.4rem 1.1rem 1.3rem; }
.tb-tx--final .tb-tx__main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 760px) { .tb-tx__main, .tb-tx--final .tb-tx__main { grid-template-columns: 1fr; } }
.tb-tx__text { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.tb-tx__eyebrow { display: flex; align-items: center; gap: .55rem;
  font: 500 var(--tb-fs-caption)/1.2 var(--tb-mono); color: var(--tb-muted); }
.tb-tx__dot { width: .55rem; height: .55rem; flex: none; border-radius: 50%; background: var(--tb-era);
  animation: tb-tx-pulse 2.2s ease-out infinite; }
@keyframes tb-tx-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tb-era) 70%, transparent); }
  70%, 100% { box-shadow: 0 0 0 .5rem transparent; } }
.tb-tx__price { margin-left: auto; font: 400 var(--tb-fs-label)/1 var(--tb-num); color: var(--tb-ghost);
  white-space: nowrap; }
.tb-tx__kicker { margin-top: .3rem; font: 600 var(--tb-fs-caption)/1.2 var(--tb-mono); color: var(--tb-era); }
.tb-tx__head { font: 500 2.05rem/1.08 var(--tb-num); letter-spacing: .005em; text-wrap: balance; }
.tb-tx__lede { font: 400 .9rem/1.55 var(--tb-mono); color: var(--tb-ink); max-width: 64ch; text-wrap: pretty; }
.tb-tx__notice { font: 400 var(--tb-fs-body)/1.5 var(--tb-mono); color: var(--tb-muted); max-width: 64ch; }
.tb-tx__notice b { font-weight: 600; color: var(--tb-era); margin-right: .2rem; }
.tb-tx__brag { margin-top: .3rem; font: 500 1.6rem/1.15 var(--tb-num); color: var(--tb-ink); text-wrap: balance; }
.tb-tx__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: .5rem; }
.tb-tx__go { background: var(--tb-green); border-color: var(--tb-green); color: var(--tb-void); font-weight: var(--tb-weight-semi); }
.tb-tx__go:hover { background: color-mix(in srgb, var(--tb-green) 82%, white); border-color: var(--tb-green); }
.tb-tx__side { display: flex; flex-direction: column; gap: .85rem; min-width: 0; }
.tb-tx__map { flex: 1 1 0; min-height: 9rem; background: var(--tb-void);
  border: var(--tb-border) solid var(--tb-line); border-radius: var(--tb-radius-panel); overflow: hidden; }
.tb-tx__map svg { display: block; }
/* the final edition's drawing: the whole network, larger */
.tb-tx--final .tb-tx__map { min-height: min(17rem, 38vh); }
.tb-tx__figs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .9rem; }
.tb-tx__fig { display: flex; flex-direction: column; gap: .2rem; border-top: 2px solid var(--tb-era); padding-top: .45rem; min-width: 0; }
.tb-tx__fig b { font: 500 1.45rem/1 var(--tb-num); white-space: nowrap; }
.tb-tx__fig span { font: 400 var(--tb-fs-caption)/1.25 var(--tb-mono); color: var(--tb-muted); }
/* The ticker: two identical runs, the track slides by one run's width. */
.tb-tx__ticker { overflow: hidden; border-top: var(--tb-border) solid var(--tb-line); background: var(--tb-void);
  font: 400 var(--tb-fs-caption)/1.45 var(--tb-mono); color: var(--tb-muted); }
.tb-tx__track { display: flex; width: max-content; animation: tb-tx-tick var(--tb-tick-dur, 60s) linear infinite; }
.tb-tx__ticker:hover .tb-tx__track { animation-play-state: paused; }
@keyframes tb-tx-tick { to { transform: translateX(-50%); } }
.tb-tx__run { display: flex; gap: 3rem; padding: .55rem 1.6rem .55rem 1.4rem; white-space: nowrap; }
.tb-tx__run b { font-weight: var(--tb-weight-semi); color: var(--tb-ink); }
@media (prefers-reduced-motion: reduce) {
  .tb-tx__dot { animation: none; }
  .tb-tx__track { animation: none; width: auto; }
  .tb-tx__run { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; white-space: normal; }
  #news-foot-dup { display: none; }
}

/* ============================================================================
   b · ACHIEVEMENTS AT SCALE
   The 22-row list will not survive 100+. Categorised, counted, with hidden and
   tiered states. Glyph per category in the pass-01 icon grammar.
   ========================================================================== */
.tb-ach-page { display: flex; flex-direction: column; gap: 1.1rem; }
.tb-ach-cat { display: flex; flex-direction: column; }
.tb-ach-cat__head { display: flex; align-items: center; gap: .6rem; padding: .4rem 0 .5rem;
  border-bottom: var(--tb-border) solid var(--tb-line); margin-bottom: .55rem; }
.tb-ach-cat__glyph { width: 22px; height: 22px; color: var(--tb-muted); flex: none; display: grid; place-items: center; }
.tb-ach-cat__name { font: var(--tb-weight-semi) var(--tb-fs-title)/1 var(--tb-mono); letter-spacing: var(--tb-track-caps);
  text-transform: uppercase; }
.tb-ach-cat__count { margin-left: auto; font: 400 var(--tb-fs-label)/1 var(--tb-num); color: var(--tb-muted);
  font-variant-numeric: tabular-nums; }
.tb-ach-cat__bar { height: 3px; background: var(--tb-line); position: relative; flex: 1 1 80px; max-width: 90px; margin-left: .3rem; }
.tb-ach-cat__bar > i { position: absolute; inset: 0 auto 0 0; background: var(--tb-green-dim); }
.tb-ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .5rem; }

.tb-ach { display: flex; align-items: flex-start; gap: .6rem; padding: .55rem .65rem;
  border: var(--tb-border) solid var(--tb-line); border-radius: var(--tb-radius-panel);
  background: var(--tb-panel-t); }
.tb-ach__mark { width: 26px; height: 26px; flex: none; border-radius: var(--tb-radius-pill);
  border: var(--tb-border) solid var(--tb-line); display: grid; place-items: center; color: var(--tb-ghost); }
.tb-ach__mark svg { width: 15px; height: 15px; }
.tb-ach__txt { display: flex; flex-direction: column; gap: .18rem; min-width: 0; }
.tb-ach__name { font: var(--tb-weight-semi) var(--tb-fs-body)/1.2 var(--tb-mono); color: var(--tb-ink); }
.tb-ach__bg { font: 400 var(--tb-fs-caption)/1.2 var(--tb-mono); color: var(--tb-muted); }
.tb-ach__hint { font: 400 var(--tb-fs-caption)/1.4 var(--tb-mono); color: var(--tb-muted); }
.tb-ach__tier { margin-top: .12rem; display: flex; gap: 3px; }
.tb-ach__tier i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--tb-line-hi); }
.tb-ach__tier i.on { background: var(--tb-amber); border-color: var(--tb-amber); }

/* earned: the mark fills green, the aim is stated in the past */
.tb-ach[data-state="earned"] .tb-ach__mark { border-color: var(--tb-green); color: var(--tb-green); background: var(--tb-hover-green); }
.tb-ach[data-state="earned"] .tb-ach__name { color: var(--tb-ink); }
/* locked: legible, the hint is the whole point (nothing is a secret except hidden) */
.tb-ach[data-state="locked"] .tb-ach__name { color: var(--tb-muted); }
/* hidden: ??? until earned, a dashed mark; hint replaced by a category tease */
.tb-ach[data-state="hidden"] { border-style: dashed; }
.tb-ach[data-state="hidden"] .tb-ach__mark { border-style: dashed; }
.tb-ach[data-state="hidden"] .tb-ach__name { color: var(--tb-ghost); }
.tb-ach[data-state="hidden"] .tb-ach__hint { color: var(--tb-ghost); font-style: italic; }

/* ============================================================================
   c · THE STATISTICS PAGE  (opens over the menu, a purchased reward)
   ========================================================================== */
.tb-stats { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
@media (min-width: 720px) { .tb-stats { grid-template-columns: 1.4fr 1fr; } }
.tb-graph { border: var(--tb-border) solid var(--tb-line); background: var(--tb-panel-t); padding: .7rem .8rem; }
.tb-graph__head { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .5rem; }
.tb-graph__title { font: var(--tb-weight-semi) var(--tb-fs-caption)/1 var(--tb-mono);
  color: var(--tb-muted); }
.tb-graph__legend { margin-left: auto; display: flex; gap: .7rem; font: 400 var(--tb-fs-caption)/1 var(--tb-mono); }
.tb-graph__legend b { font-weight: 400; }
.tb-graph__legend i { display: inline-block; width: 9px; height: 3px; margin-right: 4px; vertical-align: middle; }
.tb-record { display: flex; align-items: baseline; gap: .5rem; padding: .5rem 0;
  border-top: var(--tb-border) solid var(--tb-line); }
.tb-record:first-child { border-top: 0; }
.tb-record__k { font: 400 var(--tb-fs-label)/1.2 var(--tb-mono); color: var(--tb-muted); flex: 1; }
.tb-record__v { font: 500 1rem/1 var(--tb-num); font-variant-numeric: tabular-nums; }
.tb-record__where { font: 400 var(--tb-fs-caption)/1 var(--tb-mono); color: var(--tb-ghost); }
.tb-linetable { width: 100%; border-collapse: collapse; font: 400 var(--tb-fs-label)/1 var(--tb-mono); }
.tb-linetable th { text-align: right; font: 400 var(--tb-fs-caption)/1 var(--tb-mono); color: var(--tb-ghost);
  padding: .35rem .5rem; border-bottom: var(--tb-border) solid var(--tb-line); }
.tb-linetable th:first-child { text-align: left; }
.tb-linetable td { padding: .38rem .5rem; border-bottom: var(--tb-border) solid var(--tb-line);
  text-align: right; font-family: var(--tb-num); font-variant-numeric: tabular-nums; color: var(--tb-ink); }
.tb-linetable td:first-child { text-align: left; color: var(--tb-ink); font-family: var(--tb-mono); }
.tb-linetable td.dim { color: var(--tb-muted); }
.tb-linetable .tb-linedot { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: .5rem; vertical-align: -1px; }

/* ============================================================================
   d · THE CLOCK AND THE RUSH GRADE
   ========================================================================== */
.tb-clock { display: inline-flex; align-items: center; gap: .5rem; font: 400 var(--tb-fs-label)/1 var(--tb-mono);
  color: var(--tb-muted); }
.tb-clock__face { width: 20px; height: 20px; flex: none; color: var(--tb-muted); }
.tb-clock__hm { color: var(--tb-ink); font-family: var(--tb-num); font-size: 1.15em; font-variant-numeric: tabular-nums; font-weight: 500;
  letter-spacing: var(--tb-track-tight); }
.tb-clock__phase { color: var(--tb-ghost);
  font-size: var(--tb-fs-caption); }
.tb-clock[data-phase="peak"] .tb-clock__phase { color: var(--tb-amber); }
.tb-clock[data-phase="night"] .tb-clock__phase { color: var(--tb-politic); }

.tb-rush { display: inline-flex; align-items: center; gap: .55rem; padding: .34rem .6rem;
  border: var(--tb-border) solid var(--tb-line); border-radius: var(--tb-radius-chip); background: var(--tb-panel-t);
  font: 400 var(--tb-fs-caption)/1 var(--tb-mono);
  color: var(--tb-muted); }
.tb-rush__pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--tb-amber); flex: none;
  animation: tb-rush-pulse 1.4s ease-in-out infinite; }
@keyframes tb-rush-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(1.35); } }
.tb-grade { display: inline-flex; align-items: center; gap: .5rem; padding: .34rem .6rem;
  border: var(--tb-border) solid var(--tb-line); border-radius: var(--tb-radius-chip); background: var(--tb-panel-t);
  font: 400 var(--tb-fs-caption)/1 var(--tb-mono); color: var(--tb-muted); }
.tb-grade__mark { width: 20px; height: 20px; border-radius: var(--tb-radius-chip); display: grid; place-items: center;
  font: var(--tb-weight-semi) var(--tb-fs-body)/1 var(--tb-mono); color: var(--tb-void); }
.tb-grade[data-grade="A"] { border-color: var(--tb-grade-a); } .tb-grade[data-grade="A"] .tb-grade__mark { background: var(--tb-grade-a); }
.tb-grade[data-grade="B"] { border-color: var(--tb-grade-b); } .tb-grade[data-grade="B"] .tb-grade__mark { background: var(--tb-grade-b); }
.tb-grade[data-grade="C"] .tb-grade__mark { background: var(--tb-grade-c); }
.tb-grade[data-grade="D"] { border-color: var(--tb-grade-d); } .tb-grade[data-grade="D"] .tb-grade__mark { background: var(--tb-grade-d); }
.tb-grade[data-grade="E"] { border-color: var(--tb-grade-e); } .tb-grade[data-grade="E"] .tb-grade__mark { background: var(--tb-grade-e); color: var(--tb-ink); }
.tb-grade__label { color: var(--tb-ink); }

/* ============================================================================
   e · EVENT LANGUAGE ON THE MAP
   Marker families in the pass-01 station-glyph grammar, plus toast anatomy.
   ========================================================================== */
.tb-mark { position: relative; width: 28px; height: 28px; display: grid; place-items: center; color: var(--tb-ink); }
.tb-mark svg { overflow: visible; }
/* incident: amber family, resolvable - a ring that pulses attention, not alarm */
.tb-incident__halo { animation: tb-rush-pulse 1.6s ease-in-out infinite; transform-origin: center; }
/* curiosity: quiet, discoverable, must NOT read as a task - a faint politic diamond */
.tb-curiosity { opacity: .8; }

.tb-toast { display: inline-flex; align-items: stretch; gap: .55rem; max-width: 320px;
  background: var(--tb-panel-t); border: var(--tb-border) solid var(--tb-line); border-radius: var(--tb-radius-chip);
  -webkit-backdrop-filter: blur(var(--tb-blur)); backdrop-filter: blur(var(--tb-blur));
  padding: .5rem .6rem; font: 400 var(--tb-fs-caption)/1.4 var(--tb-mono); color: var(--tb-muted); }
.tb-toast__rail { width: 3px; border-radius: 2px; background: var(--tb-line-hi); flex: none; }
.tb-toast--fact .tb-toast__rail { background: var(--tb-muted); }
.tb-toast--commuter .tb-toast__rail { background: var(--tb-era, var(--tb-green)); }
.tb-toast--incident .tb-toast__rail { background: var(--tb-amber); }
.tb-toast__body { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.tb-toast__who { color: var(--tb-ink); font-weight: var(--tb-weight-semi); }
.tb-toast__trip { color: var(--tb-muted); }
.tb-toast__trip b { color: var(--tb-ink); font-weight: 400; }
.tb-toast__meta { color: var(--tb-ghost); font-size: var(--tb-fs-micro); }

/* ============================================================================
   f · THE SCHEMATIC MAP  (a full surface; its page owns layout, these are the parts)
   ========================================================================== */
.tb-dia { background: var(--tb-dia-bg); position: relative; }
.tb-dia__label { font: var(--tb-weight-semi) var(--tb-fs-micro) var(--tb-mono); fill: var(--tb-dia-label);
  letter-spacing: .01em; paint-order: stroke; stroke: var(--tb-dia-bg); stroke-width: 3px; stroke-linejoin: round; }
.tb-dia__label--term { fill: var(--tb-ink); }
.tb-dia__legend { position: absolute; display: flex; flex-direction: column; gap: .35rem; }
.tb-dia__legrow { display: flex; align-items: center; gap: .5rem; font: 400 var(--tb-fs-caption)/1 var(--tb-mono);
  color: var(--tb-muted); }
.tb-dia__legrow i { width: 16px; height: 4px; border-radius: 2px; flex: none; }

/* The commission note (Night Line, phase 3): the notes toast in the card's
   family. The era edge, a station square and the kicker in the era colour,
   the title in Oswald, the body in Fira Sans. --tb-era is set inline. */
.tb-toast--commission { border-left: 0; }
.tb-toast--commission .tb-toast__rail { width: 4px; border-radius: 0; background: var(--tb-era); }
.tb-toast--commission .tb-toast__who { font: 500 1.05rem/1.2 var(--tb-num); color: var(--tb-ink); }
.tb-toast--commission .tb-toast__who::before { content: attr(data-kicker); display: block; margin-bottom: .2rem;
  padding-left: .8rem; font: 600 var(--tb-fs-micro)/1.4 var(--tb-mono); color: var(--tb-era);
  background: linear-gradient(var(--tb-era), var(--tb-era)) no-repeat 0 50% / .45rem .45rem; }
.tb-toast--commission .tb-toast__trip { line-height: 1.5; }

/* The sandbox era panel: commission rows, then the scoreboard. */
#era-sandbox { display: flex; flex-direction: column; gap: .2rem; }
#era-sandbox[hidden] { display: none; }
.tb-comm { color: var(--tb-ghost); }
.tb-comm--done { color: var(--tb-green); }
.tb-comm-head { margin-top: .45rem; color: var(--tb-ink); }