/* obs-train.css — watch a machine come to mean. Scoped under .obs-train; tokens from observatory.css, no new colours
   (the family tones are the tokens, some mixed in pairs, computed in obs-train.js). */
.obs-train .lede { margin: 14px 0 6px; font-size: 14px; color: var(--ink); font-weight: 500; }
.obs-train .numbers p { margin: 0 0 4px; }
.train-controls { margin: 0 0 12px; gap: 8px 10px; }
.train-status { margin: 0; flex: 1 1 260px; font-size: 14px; color: var(--muted); min-height: 1.5em; overflow-wrap: anywhere; }
.train-status.err { color: var(--orange); }
.train-stage { display: grid; grid-template-columns: minmax(0, 620px) minmax(280px, 1fr); gap: 16px 28px; align-items: start; }
.train-piccol { min-width: 0; }

/* the picture: a square canvas for the dots, a layer of real text for the labels, a tooltip */
.train-pic { position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 620px; background: var(--space, #04060a); border: 1px solid var(--line); border-radius: var(--radius-s); overflow: hidden; cursor: crosshair; }
.train-pic canvas { display: block; width: 100%; height: 100%; }
.train-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.train-label { position: absolute; left: 0; top: 0; white-space: nowrap; font: 500 11.5px/16px var(--font-ui); letter-spacing: 0.01em; color: var(--ink); opacity: 0; will-change: transform, opacity; text-shadow: 0 0 2px var(--night), 0 0 5px var(--night), 0 1px 3px var(--night); }
.train-label.faint { font-weight: 400; }
.train-tip { position: absolute; left: 0; top: 0; pointer-events: none; padding: 5px 9px 6px; background: var(--panel2); border: 1px solid var(--line2); border-radius: var(--radius-s); font-size: 13px; line-height: 1.3; white-space: nowrap; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); z-index: 2; }
.train-tip .w { color: var(--gold); font-weight: 500; }
.train-tip .fam { display: block; color: var(--faint); font-size: 11.5px; }

/* the transport and the legend under the picture */
.train-transport { margin: 10px 0 0; gap: 8px 10px; }
.train-transport button { padding: 6px 12px; font-size: 14px; }
.train-scrub { flex: 1 1 160px; display: flex; align-items: center; min-width: 0; }
.train-scrub input { width: 100%; min-width: 0; }
.train-scrubread { font-size: 12px; color: var(--faint); white-space: nowrap; }
.train-legend { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 10px 0 0; }
.train-key { padding: 3px 9px; font-size: 12.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.train-key .swatch { margin: 0; }
.train-key .num { color: var(--faint); font-size: 11px; }
.train-key[aria-pressed=true] { color: var(--ink); border-color: var(--gold); }

/* the side: the clock, the stats, the analogy, the probes */
.train-side { min-width: 0; font-size: 14px; color: var(--muted); }
.train-clockline { margin: 0 0 8px; line-height: 1.1; }
.train-clock { font-size: 34px; color: var(--aqua); letter-spacing: 0.01em; }
.train-clockof { font-size: 14px; color: var(--faint); margin-left: 6px; }
.train-stats { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 14px; margin: 0; font-size: 13.5px; }
.train-stats dt { color: var(--faint); }
.train-stats dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.train-lossrow { display: flex; align-items: center; gap: 10px; }
.train-spark { width: 120px; height: 30px; flex: none; overflow: visible; }
.train-spark .all { fill: none; stroke: var(--line2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.train-spark .so { fill: none; stroke: var(--aqua); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.train-spark .dot { fill: var(--aqua); }
.train-analogy { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.train-eq { color: var(--ink); font-family: var(--font-read); font-size: 17px; margin-right: 2px; }
.train-rank { margin: 8px 0 0; font-size: 13.5px; }
.train-want { color: var(--ink); font-weight: 500; }
.train-want.first { color: var(--gold); }
.train-chip { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 9px; border: 1px solid var(--line2); border-radius: 999px; background: var(--panel2); color: var(--ink); font-size: 13.5px; line-height: 1.3; cursor: pointer; }
.train-chip:hover { border-color: var(--gold); }
.train-chip .num { color: var(--muted); font-size: 11px; }
.train-chip.want { border-color: var(--faint); }
.train-chip.first { border-color: var(--gold); color: var(--gold); }
.train-chip.probe { border-color: var(--line); color: var(--muted); }
.train-probes { display: grid; gap: 6px; }
.train-probe { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 6px; }
.train-probeword { flex: 0 0 92px; }
.train-probenb { display: flex; flex-wrap: wrap; gap: 4px 5px; min-width: 0; flex: 1 1 200px; }
.obs-train.rm .train-label { transition: none; }

@media (max-width: 860px) {
  .train-stage { grid-template-columns: minmax(0, 1fr); }
  .train-pic { max-height: none; }
}
@media (max-width: 600px) {
  .train-clock { font-size: 28px; }
  .train-transport button { padding: 6px 10px; font-size: 13px; }
  .train-scrub { flex-basis: 100%; order: 3; }
  .train-probeword { flex-basis: 100%; }
  .train-label { font-size: 11px; }
}