/* Four physical units, one timeline. Scoped to the combined chart. */
#system-overview { margin-block:0 20px; min-width:0; }
.system-overview-card { padding:22px 24px 15px; background:#fff; border-color:#dce5e9; box-shadow:0 8px 28px #183f4d09; }
.system-overview-card .insight-card-head { margin-bottom:18px; }
.system-overview-card .insight-kicker, .system-overview-dialog .insight-kicker { color:#267476; }
.system-overview-card .insight-card-head h3 { font-size:23px; letter-spacing:-.6px; }
.system-overview-display-row { display:flex; align-items:center; flex-wrap:wrap; gap:10px 18px; margin-block:0 18px; }
.system-overview-display { display:inline-flex; flex-shrink:0; gap:4px; padding:4px; border:1px solid #d7e4e8; border-radius:11px; background:#eef4f5; }
.system-overview-display button { min-height:38px; min-width:112px; padding:8px 15px; border:1px solid transparent; border-radius:8px; background:transparent; color:#45616d; font:inherit; font-size:12px; font-weight:700; line-height:1.3; }
.system-overview-display button[aria-pressed="true"] { border-color:#246a70; background:#246a70; color:#fff; box-shadow:0 2px 5px #183f4d18; }
.system-overview-display button:hover:not([aria-pressed="true"]) { background:#e0ebed; color:#183f4d; }
.system-overview-display button:focus-visible { outline:3px solid #176b96; outline-offset:3px; }
.system-overview-display-note { flex:1 1 300px; margin:0; max-width:720px; color:#526d7a; font-size:11px; line-height:1.65; }
.system-overview-legend-heading { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin-block:0 8px; }
.system-overview-legend-heading strong { font-size:12px; color:#243946; }
.system-overview-legend-heading span { font-size:11px; color:#607481; }
.system-overview-controls { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-block:0 18px; }
.system-overview-metric { position:relative; display:grid; grid-template-columns:1fr auto; align-items:center; gap:3px 6px; min-width:0; padding:10px 14px 11px; border:1px solid #e1e8ec; border-radius:12px; background:linear-gradient(115deg,color-mix(in srgb,var(--metric-color) 5%,white),white); color:#17242c; text-align:start; box-shadow:inset 0 3px 0 var(--metric-color); transition:background .15s,border-color .15s; }
.system-overview-metric:hover { background:color-mix(in srgb,var(--metric-color) 8%,white); border-color:var(--metric-color); }
.system-overview-metric[aria-pressed="false"] { box-shadow:inset 0 3px 0 #b4bfc7; background:#f3f5f6; }
.system-overview-metric[aria-pressed="false"] .system-overview-metric-value { color:#71808b; }
.system-overview-metric[aria-pressed="false"] .system-overview-line-key { opacity:.38; }
.system-overview-metric-key { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:6px; margin-block-end:3px; }
.system-overview-line-key { display:block; width:68px; height:24px; flex:0 0 68px; }
.system-overview-visibility { display:flex; align-items:center; gap:5px; color:#4f6775; font-size:10px; font-weight:600; line-height:1.4; }
.system-overview-visibility::before { content:'✓'; display:grid; place-items:center; width:15px; height:15px; background:var(--metric-color); color:#fff; border-radius:4px; font-size:11px; }
[aria-pressed="false"] .system-overview-visibility::before { content:'−'; background:#788b96; }
.system-overview-metric:focus-visible, .system-overview-zoom button:focus-visible { outline:3px solid #176b96; outline-offset:3px; }
.system-overview-metric-name { grid-column:1/-1; color:#243946; font-size:13px; font-weight:700; line-height:1.4; overflow-wrap:anywhere; }
.system-overview-metric-value { grid-column:1/-1; display:flex; align-items:baseline; gap:6px; margin-block:3px 1px; color:var(--metric-color); font-size:27px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.7px; line-height:1.2; }
.system-overview-metric-value small { color:#607481; font-size:11px; font-weight:500; letter-spacing:0; }
.system-overview-metric-unit { grid-column:1/-1; color:#607481; font-size:10px; line-height:1.4; }
.system-overview-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 16px; padding:10px 0 12px; border-top:1px solid #e5ecef; }
.system-overview-window { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px; color:#243946; font-size:12px; font-variant-numeric:tabular-nums; }
.system-overview-window strong { font-size:11px; color:#37626b; }
.system-overview-window small { color:#607481; font-size:10px; }
.system-overview-zoom { display:flex; align-items:center; gap:5px; }
.system-overview-zoom button { display:inline-flex; align-items:center; justify-content:center; gap:4px; min-width:38px; min-height:38px; padding:6px 10px; border:1px solid #dbe5e9; border-radius:8px; color:#244855; background:#fff; font-size:12px; font-weight:600; line-height:1.2; }
.system-overview-zoom button:first-child:not(:disabled) { background:#eef6f6; border-color:#c7dfe0; }
.system-overview-zoom button:hover:not(:disabled) { background:#e0eeee; border-color:#7ea7ad; }
.system-overview-zoom button:disabled { opacity:.4; cursor:default; }
.system-overview-pan { display:inline-flex; gap:3px; }
.system-overview-pan button { font-size:16px; }
.system-overview-plot { direction:ltr; border:1px solid #dfe7ed; border-radius:12px; background:#fcfdff; box-shadow:none; cursor:crosshair; touch-action:pan-y; }
.system-overview-plot:focus-visible { outline:3px solid #176b96; }
.system-overview-plot .insight-svg { min-height:320px; }
.system-overview-plot .insight-grid text { fill:#526879; font-size:13px; }
.system-overview-plot .insight-empty { fill:#526879; }
.system-overview-plot .insight-multi-axis text { fill:var(--system-axis-color); font-size:13px; }
.system-overview-plot .insight-multi-axis .insight-unit { fill:var(--system-axis-color); font-size:13px; font-weight:700; }
.system-overview-plot .insight-line { filter:none; }
.system-overview-plot .insight-cursor line { stroke:#566c80; }
.system-overview-selection { fill:#167882; fill-opacity:.12; stroke:#167882; stroke-width:1; stroke-dasharray:4 3; pointer-events:none; }
.system-overview-guide { display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px 15px; color:#607481; font-size:10px; line-height:1.6; margin:7px 2px 12px; }
.system-overview-guide span:first-child { color:#2f6b77; }
.system-overview-card .insight-readout, .system-overview-dialog .insight-readout { border:1px solid #e0e9ed; background:#f5f8fa; border-radius:10px; padding:11px 13px; min-height:70px; margin-top:0; }
.system-overview-card .insight-point-values, .system-overview-dialog .insight-point-values { flex:1 1 500px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px 14px; }
.system-overview-card .insight-point-values > span, .system-overview-dialog .insight-point-values > span { display:flex; flex-wrap:wrap; gap:3px 5px; font-size:11px; }
.system-overview-card .insight-point-values strong, .system-overview-dialog .insight-point-values strong { color:var(--trace-color); font-size:14px; }
.system-overview-card .insight-point-values small, .system-overview-dialog .insight-point-values small { white-space:nowrap; font-size:9px; color:#637986; }
.system-overview-card .insight-actions { margin-top:9px; }
.system-overview-card .insight-quality { margin-block:8px; }
#system-overview-explorer { --insight-accent:#267476; width:min(1440px,96vw); max-width:1440px; max-height:94vh; max-height:94dvh; padding:0; border:1px solid #d9e2e8; border-radius:20px; background:#fff; color:#17242c; box-shadow:0 26px 110px #08182755; overflow:hidden; }
#system-overview-explorer[open] { display:flex; flex-direction:column; }
#system-overview-explorer::backdrop { background:#16191eaa; backdrop-filter:blur(5px); }
.system-overview-dialog .system-overview-plot .insight-svg { min-height:350px; }
.system-overview-dialog .insight-focus-summary { margin-bottom:14px; }
.system-overview-card .insight-data td small, .system-overview-dialog .insight-data td small { display:block; margin-top:3px; color:#647480; font-size:10px; }
@media(max-width:760px) {
  .system-overview-card { padding:17px 14px 13px; }
  .system-overview-card .insight-card-head h3 { font-size:20px; }
  .system-overview-display-row { gap:8px; margin-bottom:14px; }
  .system-overview-display { width:100%; }
  .system-overview-display button { flex:1; min-width:0; min-height:44px; }
  .system-overview-display-note { flex-basis:100%; font-size:10px; }
  .system-overview-controls { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-bottom:12px; }
  .system-overview-metric { padding:9px 11px; }
  .system-overview-metric-value { font-size:23px; }
  .system-overview-metric-unit { font-size:10px; }
  .system-overview-toolbar { gap:8px; }
  .system-overview-window { width:100%; font-size:11px; }
  .system-overview-zoom { width:100%; justify-content:space-between; }
  .system-overview-zoom button { min-height:44px; }
  .system-overview-card .insight-point-values, .system-overview-dialog .insight-point-values { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .system-overview-plot { overflow-x:auto; }
  .system-overview-plot .insight-svg, .system-overview-dialog .system-overview-plot .insight-svg { min-width:560px; min-height:310px; }
  #system-overview-explorer { width:96vw; max-height:94dvh; border-radius:14px; }
  .system-overview-dialog .insight-dialog-head { padding:18px 15px 14px; gap:12px; }
  .system-overview-dialog .insight-dialog-head h2 { font-size:21px; }
  .system-overview-dialog .insight-breadcrumb { padding:8px 15px; }
  .system-overview-dialog .insight-explorer-body { padding:16px 15px 20px; }
}
@media(max-width:360px) { .system-overview-metric { padding:8px; } .system-overview-metric-name { font-size:12px; } .system-overview-zoom button { padding:6px 8px; } }
@media(prefers-reduced-motion:reduce) { .system-overview-metric { transition:none; } }
@media(forced-colors:active) {
  .system-overview-plot .insight-grid text, .system-overview-plot .insight-multi-axis text { fill:CanvasText; }
  .system-overview-metric[aria-pressed="true"] { border-color:Highlight; }
  .system-overview-display button[aria-pressed="true"] { border:2px solid Highlight; color:HighlightText; background:Highlight; }
  .system-overview-selection { fill:Highlight; stroke:Highlight; }
}

.system-overview-mobile-hint { display:none; }
@media(max-width:760px) { .system-overview-desktop-hint { display:none; } .system-overview-mobile-hint { display:inline; } .system-overview-plot { touch-action:pan-x pan-y; } }

.system-overview-card .insight-point-values > .system-overview-readout-hint, .system-overview-dialog .insight-point-values > .system-overview-readout-hint { grid-column:1/-1; font-size:12px; color:#607481; }