/* il-charts.css — the chart readout. Paired with the crosshair in charts.js
   line(): swatched rows, and the two optional readings (change in view, and
   one series against another). Tokens only. Loads after style.css's base
   .tooltip rule and refines it rather than replacing it. */

.tooltip { min-width: 150px; font-variant-numeric: tabular-nums; }
.tooltip .tip-row {
  display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; align-items: center;
  gap: 0 .5rem; line-height: 1.55;
}
.tooltip .tip-row i { width: 9px; height: 9px; border-radius: 2px; }
.tooltip .tip-row span { color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tooltip .tip-row b {
  display: inline; margin: 0; font-family: var(--font-mono); font-weight: 600;
  color: var(--text-primary); text-align: right;
}
.tooltip .tip-note {
  display: block; margin-top: .35rem; padding-top: .35rem;
  border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: .72rem;
}
.tooltip .tip-note + .tip-note { margin-top: .15rem; padding-top: 0; border-top: 0; }
/* Up is good for a price since the start of the view; for price against fair
   value the caller flips the sense (below value is the good side), so the
   class carries the judgement and the colour just follows it. */
.tooltip .tip-note.up { color: var(--good); }
.tooltip .tip-note.down { color: var(--critical); }

/* A chart that can be read from the keyboard says so when it has focus. */
svg.chart-readable:focus { outline: none; }
svg.chart-readable:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand) 70%, transparent);
  outline-offset: 3px; border-radius: 6px;
}