/* Header geometry depends on the card width, never on the current digits or sign. */
#graphs .chart-card{container-type:inline-size;container-name:telemetry-card}
#graphs .chart-head{display:grid;grid-template-columns:minmax(84px,max-content) auto 13px minmax(0,1fr);column-gap:7px;row-gap:4px;align-items:center;min-height:34px}
#graphs .chart-head .metric-select{grid-column:1;grid-row:1;min-width:0;max-width:100%}
#graphs .chart-head .chart-unit{grid-column:2;grid-row:1;white-space:nowrap}
#graphs .chart-head .metric-help{grid-column:3;grid-row:1}
#graphs .chart-head .chart-readouts{grid-column:4;grid-row:1;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:6px;margin-left:0;min-width:0;max-width:none;min-height:16px;line-height:16px}
#graphs .chart-readouts>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Comparison cards share a second value row when the controls and both laps
   cannot reliably fit together. The same row is reserved for Time difference. */
@container telemetry-card (max-width:520px){
 #graphs:has(.chart-readouts>[data-value-b]) .chart-head .chart-readouts{grid-column:1/-1;grid-row:2}
}
@container telemetry-card (max-width:400px){
 #graphs .chart-head .chart-readouts{grid-column:1/-1;grid-row:2}
}
/* A pinned label is still part of the plot's hit area. Only its explicit
   unpin button intercepts input, so a new drag can begin under either value. */
#graphs .chart-value-tooltip.cursor-pinned{pointer-events:none}
#graphs .chart-value-tooltip [data-unpin]{pointer-events:auto}