/* ═══════════════════════════════════════════════════════════════════════════
   FEDERATION INTELLIGENCE — TELEMETRY CHROME
   fed-telemetry.css · D3 · styles ORIGINAL status.html classes; the program
   posture layer is static page content the API never overrides. No pulsing
   activity indicators; the single live-dot sits only beside the real
   UPDATED clock and is static under reduced motion.
   ═══════════════════════════════════════════════════════════════════════ */
.tlm-page { padding-block: var(--space-6) var(--space-8); }
.tlm-head { max-width: var(--fed-reading-max); margin-bottom: var(--space-5); }
.tlm-head h1 { font-family: var(--font-fed-display); font-weight: 900; font-size: var(--heading-lg); line-height: var(--line-heading); text-transform: uppercase; color: var(--fed-text-display); }
.tlm-head .rec-sub, .tlm-scope .disclaimer { font-family: var(--font-fed-body); font-size: var(--text-sm); line-height: var(--line-body); color: var(--fed-muted); max-width: var(--fed-reading-max); }
/* PROGRAM POSTURE — static, record-sourced, above all live telemetry */
.tlm-posture { display: grid; gap: var(--space-2); border: 1px solid color-mix(in srgb, var(--fed-warning) 35%, transparent); border-left: 2px solid var(--fed-warning); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--fed-warning) 5%, transparent); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5); }
.tlm-posture__state { font-family: var(--font-fed-system); font-size: var(--text-sm); letter-spacing: var(--system-letter-spacing); text-transform: uppercase; color: var(--fed-warning); display: inline-flex; align-items: center; gap: var(--space-2); }
.tlm-posture__state::before { content: ""; width: 7px; height: 7px; border-radius: 1px; background: currentColor; }
.tlm-posture__note { font-family: var(--font-fed-body); font-size: var(--text-sm); line-height: var(--line-body); color: var(--fed-text); }
/* Live infrastructure banner (re-scoped copy from JS) */
.tlm-scope .banner { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; border: 1px solid var(--fed-border-default); border-left: 2px solid var(--fed-command); border-radius: var(--radius-sm); background: var(--surface-panel); padding: var(--space-5); margin-bottom: var(--space-6); }
.tlm-scope .banner.warn { border-left-color: var(--fed-warning); }
.tlm-scope .banner.down { border-left-color: var(--fed-danger); }
.tlm-scope .banner.ok { border-left-color: var(--fed-verified); }
.tlm-scope .banner .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--fed-command); flex-shrink: 0; margin-top: 4px; }
.tlm-scope .banner.warn .dot { background: var(--fed-warning); }
.tlm-scope .banner.down .dot { background: var(--fed-danger); }
.tlm-scope .banner.ok .dot { background: var(--fed-verified); }
.tlm-scope #banner-state { font-family: var(--font-fed-display); font-weight: 700; font-size: var(--heading-sm); color: var(--fed-text-display); }
.tlm-scope #banner-note { font-family: var(--font-fed-body); font-size: var(--text-sm); line-height: var(--line-body); color: var(--fed-text); margin-top: var(--space-2); max-width: 62ch; }
.tlm-scope #updated { font-family: var(--font-fed-system); font-size: var(--text-xs); letter-spacing: var(--system-letter-spacing); color: var(--fed-muted); text-align: right; }
.tlm-scope .live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--fed-verified); margin-right: var(--space-2); }
.tlm-scope .marker, .tlm-scope .panel-top { font-family: var(--font-fed-system); font-size: var(--text-xs); letter-spacing: var(--system-letter-spacing-wide); text-transform: uppercase; color: var(--fed-command); margin: var(--space-6) 0 var(--space-3); }
.tlm-scope .gl { color: var(--fed-command); }
.tlm-scope .svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.tlm-scope .svc { border: 1px solid var(--fed-border-soft); border-radius: var(--radius-xs); background: var(--surface-panel); padding: var(--space-4); }
.tlm-scope .svc-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.tlm-scope .svc-name { font-family: var(--font-fed-system); font-size: var(--text-sm); color: var(--fed-text-display); }
.tlm-scope .svc-state { font-family: var(--font-fed-system); font-size: var(--text-xs); letter-spacing: var(--system-letter-spacing); text-transform: uppercase; margin-left: auto; color: var(--fed-muted); }
.tlm-scope .svc-detail { font-family: var(--font-fed-body); font-size: var(--text-sm); color: var(--fed-text); }
.tlm-scope .svc-beat { font-family: var(--font-fed-system); font-size: var(--text-xs); letter-spacing: var(--system-letter-spacing); color: var(--fed-muted); margin-top: var(--space-1); }
.tlm-scope .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--fed-muted); flex-shrink: 0; }
.tlm-scope .dot.live { background: var(--fed-verified); }
.tlm-scope .dot.down, .tlm-scope .dot.pending { background: var(--fed-danger); }
.tlm-scope .svc-state.live { color: var(--fed-verified); }
.tlm-scope .feed { border: 1px solid var(--fed-border-default); border-radius: var(--radius-sm); background: var(--surface-panel); padding: var(--space-5); margin-top: var(--space-3); }
.tlm-scope .feed.interrupted { border-left: 2px solid var(--fed-warning); }
.tlm-scope .feed-flag { font-family: var(--font-fed-system); font-size: var(--text-xs); letter-spacing: var(--system-letter-spacing); text-transform: uppercase; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--fed-border-default); }
.tlm-scope .feed-flag.warn { color: var(--fed-warning); border-color: color-mix(in srgb, var(--fed-warning) 40%, transparent); }
.tlm-scope .feed-flag.ok { color: var(--fed-verified); border-color: color-mix(in srgb, var(--fed-verified) 40%, transparent); }
.tlm-scope .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
.tlm-scope .metric { border: 1px solid var(--fed-border-soft); border-radius: var(--radius-xs); background: var(--surface-space); padding: var(--space-3) var(--space-4); }
.tlm-scope .metric .k { font-family: var(--font-fed-system); font-size: var(--text-xs); letter-spacing: var(--system-letter-spacing); text-transform: uppercase; color: var(--fed-muted); }
.tlm-scope .metric .v { font-family: var(--font-fed-display); font-weight: 700; font-size: var(--heading-sm); color: var(--fed-text-display); }
.tlm-scope .metric .v.sm { font-size: var(--text-lg); }
.tlm-scope .metric .v.caution { color: var(--fed-warning); }
.tlm-scope .metric .v.faint { color: var(--fed-muted); }
.tlm-scope .cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 767px) { .tlm-scope .cols { grid-template-columns: 1fr; } }
.tlm-scope .panel { border: 1px solid var(--fed-border-soft); border-radius: var(--radius-sm); background: var(--surface-panel); padding: var(--space-5); }
.tlm-scope .stat-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--fed-border-soft); }
.tlm-scope .stat-row .k { font-family: var(--font-fed-body); font-size: var(--text-sm); color: var(--fed-text); }
.tlm-scope .stat-row .v { font-family: var(--font-fed-system); font-size: var(--text-sm); color: var(--fed-text-display); }
.tlm-scope .stat-row .v.big { font-family: var(--font-fed-display); font-weight: 700; font-size: var(--text-xl); }
.tlm-scope .stat-ctx { font-family: var(--font-fed-system); font-size: var(--text-xs); letter-spacing: var(--system-letter-spacing); text-transform: uppercase; color: var(--fed-muted); }
.tlm-scope .unavail { display: grid; gap: var(--space-2); padding: var(--space-5); }
.tlm-scope .unavail h3 { font-family: var(--font-fed-interface); font-weight: 700; font-size: var(--text-lg); color: var(--fed-text-display); }
.tlm-scope .demo-tag { display: none; font-family: var(--font-fed-system); font-size: var(--text-xs); letter-spacing: var(--system-letter-spacing); text-transform: uppercase; color: var(--fed-warning); border: 1px solid color-mix(in srgb, var(--fed-warning) 40%, transparent); border-radius: var(--radius-xs); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-4); }
@media (prefers-reduced-motion: reduce) { .tlm-scope .live-dot { animation: none; } }