.chart { margin: 0; min-width: 0; }
.chart__head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.chart__title { margin: 0; font: 600 16px/1.2 var(--font-cond); }
.chart__unit { font-size: 13px; color: var(--ink-3); }
.chart__legend { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 0 0 6px; padding: 0; list-style: none; font-size: 12px; color: var(--ink-2); }
.chart__legend li, .chart__tip span { display: inline-flex; align-items: center; gap: 6px; }
.chart__legend i, .chart__tip i { width: 10px; height: 2px; border-radius: 1px; background: var(--sw); }
.chart__plot { position: relative; height: var(--h); touch-action: pan-y; }
.chart__svg { display: block; overflow: visible; }
.chart__grid { stroke: var(--rule); stroke-width: 1; }
.chart__tick { fill: var(--ink-3); font: 500 11px var(--font-cond); }
.chart__ref { stroke: var(--st-alarm); stroke-width: 1; stroke-dasharray: 4 4; opacity: 0.8; }
.chart__ref-label { fill: var(--ink-2); font: 500 11px var(--font); }
.chart__line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart__area { opacity: 0.07; }
.chart__end, .chart__hover { stroke: var(--surface); stroke-width: 2; }
.chart__direct { fill: var(--ink-2); font: 600 12px var(--font-cond); }
.chart__cross { stroke: var(--ink-3); stroke-width: 1; }
.chart__seg { fill: var(--tone); }
.chart__tip {
  position: absolute; top: 4px; z-index: 2; display: grid; gap: 2px; padding: 7px 9px; border-radius: var(--radius);
  background: var(--bg); box-shadow: 0 0 0 1px var(--rule-strong), var(--shadow); font-size: 12px; color: var(--ink-2);
  pointer-events: none; white-space: nowrap;
}
.chart__tip strong { color: var(--ink); font-weight: 600; }
.chart__tip b { color: var(--ink); font-weight: 600; }
.chart__tip b.chart__tip-state { color: var(--tone); font-weight: 600; }
.chart__tip[hidden] { display: none; }

/* Legend keys are buttons: click hides or shows a series. */
.chart__key { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px; margin: 0 -4px; border: 0; border-radius: 4px; background: none; cursor: pointer; font: inherit; color: inherit; }
.chart__key:hover { background: var(--surface-2); }
.chart__key i { width: 12px; height: 3px; border-radius: 2px; background: var(--sw); }
.chart__key[aria-pressed="false"] { opacity: 0.4; text-decoration: line-through; }
.chart__hint { font-size: 12px; color: var(--ink-3); }

/* 0/1 signal lanes under the plot. */
.chart__lane { fill: var(--lane-off); }
.chart__lane-on { opacity: 0.92; }
.chart__lane-name { fill: var(--ink-2); font: 600 11px var(--font-cond); }

/* Tooltip rows: label left, value right. */
.chart__tip { min-width: 210px; gap: 3px; padding: 8px 10px; background: var(--surface); }
.chart__tip-row { display: flex !important; align-items: center; gap: 6px; }
.chart__tip-row b { margin-left: auto; padding-left: 14px; }
.chart__tip-row i { width: 10px; height: 3px; }
.chart__tip-row i.is-dot { width: 9px; height: 9px; border-radius: 50%; }
.chart__tip-sep { margin-top: 3px; padding-top: 5px; border-top: 1px solid var(--rule); color: var(--ink-3); font-size: 11.5px; }