/* ============================================================
   The Market Terminal — shared chart kit (pairs with tmt-charts.js)
   Tokens only. Marks carry state classes; colour lives here, so a theme
   switch re-skins without a redraw.
   ============================================================ */

/* ---------- Sparkline ----------
   The SVG stretches to its box; strokes stay crisp (non-scaling-stroke).
   The end dot is HTML, positioned in % of the box, so the stretch never
   squashes it into an ellipse. */
.tmt-spark {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 16px;
  color: var(--ink-3);
}
.tmt-spark svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tmt-spark.is-up      { color: var(--up); }
.tmt-spark.is-down    { color: var(--down); }
.tmt-spark.is-flat    { color: var(--ink-3); }
/* Macro series: the line recedes, the latest value carries the accent. */
.tmt-spark.is-neutral { color: var(--ink-3); }
.tmt-spark__line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.tmt-spark__area { stroke: none; }
.tmt-spark.is-neutral .tmt-spark__area { opacity: 0.7; }
/* The reference the move is measured from (prior close, window start). A
   reference line, not a gridline, so it is dotted. */
.tmt-spark__base {
  stroke: var(--chart-zero);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  vector-effect: non-scaling-stroke;
}
.tmt-spark__dot {
  position: absolute;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 2px var(--card);
  pointer-events: none;
}
.tmt-spark.is-neutral .tmt-spark__dot { background: var(--brand); }
/* While the session is open the latest point breathes. Never under reduced
   motion, and never as "live": quotes are delayed. */
.tmt-spark.is-live .tmt-spark__dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  opacity: 0;
  animation: tmt-spark-pulse 2.4s var(--ease-out) infinite;
}
@keyframes tmt-spark-pulse {
  0%   { transform: scale(0.6); opacity: 0.55; }
  70%  { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(1.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tmt-spark.is-live .tmt-spark__dot::after { animation: none; }
}

/* ---------- Diverging bar ----------
   Zero sits in the middle of the track (a hairline); gains grow right,
   losses left. Square at zero, rounded at the tip (the data end). No grey
   track behind it: this is a measurement, not a progress bar. Width
   animates (not scaleX, which would squash the rounded tip). */
.tmt-div { position: relative; display: block; align-self: stretch; min-height: 14px; }
.tmt-div::before {
  content: "";
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  margin-left: -0.5px;
  background: var(--chart-zero);
}
.tmt-div__bar {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 10px;
  margin-top: -5px;
  border-radius: 0 4px 4px 0;
  background: var(--ink-4);
  transition: width var(--dur-data) var(--ease-spring);
}
.tmt-div__bar.is-neg { left: auto; right: 50%; border-radius: 4px 0 0 4px; }
.tmt-div__bar.up   { background: var(--up); }
.tmt-div__bar.down { background: var(--down); }

/* ---------- Column bars from zero ---------- */
.tmt-cols {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 2px;
  height: 40px;
  /* A gutter for the reference label, so it never sits on a bar. */
  padding-right: 48px;
  border-bottom: 1px solid var(--chart-zero);
}
.tmt-cols__slot { position: relative; flex: 1; display: flex; justify-content: center; }
.tmt-cols__bar {
  position: absolute;
  width: min(24px, 62%);
  border-radius: 4px 4px 0 0;
  background: color-mix(in oklab, var(--brand) 30%, var(--card));
}
.tmt-cols__bar.is-neg { border-radius: 0 0 4px 4px; }
.tmt-cols__bar.is-last { background: var(--brand); }
/* A reference level (e.g. the 2% inflation goal): dotted, labelled at the end. */
.tmt-cols__ref {
  position: absolute;
  left: 0; right: 44px;
  height: 0;
  border-top: 1px dotted var(--ink-3);
  z-index: 1;
  pointer-events: none;
}
.tmt-cols__ref em {
  position: absolute;
  left: 100%;
  top: 0;
  transform: translateY(-50%);
  padding-left: 5px;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 9.5px;
  color: var(--ink-3);
  white-space: nowrap;
}

/* ---------- Yield curve on a maturity axis ---------- */
.tmt-curve { display: block; }
.tmt-curve__plot { position: relative; height: 40px; }
.tmt-curve__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tmt-curve__seg {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.tmt-curve__seg.is-inv { stroke: var(--down); }
.tmt-curve__dot {
  position: absolute;
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 2px var(--card);
}
/* A hit area bigger than the dot, for the hover title. */
.tmt-curve__dot::before { content: ""; position: absolute; inset: -8px; }
.tmt-curve__ticks { position: relative; height: 14px; margin-top: 3px; }
.tmt-curve__ticks span {
  position: absolute;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-3);
  white-space: nowrap;
}
.tmt-curve__ticks span:first-child { transform: none; }
.tmt-curve__ticks span:last-child { transform: translateX(-100%); }

/* ---------- Range bar (e.g. 52-week low..high) ---------- */
.tmt-range { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tmt-range.is-na { color: var(--ink-3); font-family: var(--font-mono); text-align: right; }
.tmt-range__track {
  position: relative;
  height: 4px;
  border-radius: 2px;
  background: var(--paper-3);
}
.tmt-range__mark {
  position: absolute;
  top: 50%;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--ink-1);
  box-shadow: 0 0 0 2px var(--card);
}
.tmt-range__ends {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}