/* ============================================================
   The Market Terminal — chart kit (pairs with tmt-plot.js)
   Every colour is a token, so a theme switch restyles a chart without a
   redraw. Text on a chart wears text colours; a series colour marks only
   its own line, dot, bar and swatch.
   ============================================================ */

/* A chart takes the width its box is given and never asks for more: the
   SVG is drawn at the box's width, so without inline-size containment a
   grid track sized to its content grows with each redraw (commodities at
   phone width ran to 8,000px). */
.tmt-plot { position: relative; outline: none; contain: inline-size; min-width: 0; }
.tmt-plot:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.tmt-plot__svg { display: block; overflow: visible; }

/* styles-mobile.css gives every .chart-container 480px and padding
   (!important) for the older charts. A kit chart is drawn to its box, so
   the padding would offset its crosshair; a page sets its own phone height
   the same way, after this. 40px of it is the phone readout (below). */
@media (max-width: 768px) {
  .chart-container.tmt-plot { height: 300px !important; padding: 0 !important; }
}

/* Axes: 11px Inter, tabular digits; a horizontal grid only. */
.tmt-plot__axis {
  fill: var(--chart-axis);
  font-family: var(--sans);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.tmt-plot__grid line {
  stroke: var(--chart-grid);
  stroke-width: 1;
  shape-rendering: crispEdges;
}
.tmt-plot__zero {
  stroke: var(--chart-zero);
  stroke-width: 1;
  shape-rendering: crispEdges;
}

/* Marks */
.tmt-plot__line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.tmt-plot__line.is-dash { stroke-dasharray: 5 4; stroke-width: 1.5; }
.tmt-plot__dot { stroke: var(--card); stroke-width: 2; }
.tmt-plot__bars rect { fill: color-mix(in oklab, var(--bar) 62%, transparent); }
/* A signed series (a surprise, a revision): the sign picks the colour, and a
   zero is neither. */
.tmt-plot__bars rect.is-up { fill: color-mix(in oklab, var(--up) 72%, transparent); }
.tmt-plot__bars rect.is-down { fill: color-mix(in oklab, var(--down) 72%, transparent); }
.tmt-plot__bars rect.is-flat { fill: var(--ink-4); }

/* A fill runs from the line to its baseline, tinted by which side it is on. */
.tmt-plot__fill.is-up { fill: var(--up-soft); }
.tmt-plot__fill.is-down { fill: var(--down-soft); }

/* Reference lines: a threshold is dashed in the threshold colour; zero is
   the solid zero rule. Their labels are text, in ink. */
.tmt-plot__ref { stroke: var(--chart-threshold); stroke-width: 1; stroke-dasharray: 4 4; }
.tmt-plot__ref.is-zero { stroke: var(--chart-zero); stroke-dasharray: none; }
/* Text laid over marks keeps a halo in the card colour, so a line running
   through it never strikes it out. */
.tmt-plot__reflabel,
.tmt-plot__plabel {
  paint-order: stroke;
  stroke: var(--card);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.tmt-plot__reflabel {
  fill: var(--ink-3);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
}
.tmt-plot__vlabel {
  paint-order: stroke;
  stroke: var(--card);
  stroke-width: 3px;
  stroke-linejoin: round;
  fill: var(--ink-2);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.tmt-plot__vlabel.is-muted { fill: var(--ink-3); font-weight: 500; }
.tmt-plot__plabel {
  fill: var(--ink);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* End labels: text in ink beside a dot in the series colour. */
.tmt-plot__end {
  fill: var(--ink-2);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.tmt-plot__leader { fill: none; stroke: var(--chart-grid); stroke-width: 1; }

/* Grouped bars: each bar in its series colour, 2px apart; a group still
   in progress is outlined, not filled. The active group's band lights. */
.tmt-plot__gbar { fill: color-mix(in oklab, var(--key) 88%, transparent); }
.tmt-plot__gbar.is-up { fill: color-mix(in oklab, var(--up) 72%, transparent); }
.tmt-plot__gbar.is-down { fill: color-mix(in oklab, var(--down) 72%, transparent); }
.tmt-plot__gbar.is-flat { fill: var(--ink-4); }
.tmt-plot__gbar.is-muted {
  fill: color-mix(in oklab, var(--key) 22%, transparent);
  stroke: var(--key);
  stroke-width: 1;
  stroke-dasharray: 3 2;
}
.tmt-plot__hl { fill: color-mix(in oklab, var(--ink) 6%, transparent); }

/* Lanes: a hairline per row, the row's name as its label (the legend),
   and an optional column of notes at the right. */
.tmt-plot__lane { stroke: var(--chart-grid); stroke-width: 1; }
.tmt-plot__lanelabel { fill: var(--ink); font-family: var(--sans); font-size: 12px; font-weight: 500; }
.tmt-plot__lanelabel.is-muted { fill: var(--ink-2); }
.tmt-plot__aside-h {
  fill: var(--ink-3);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tmt-plot__aside { fill: var(--ink-2); font-family: var(--sans); font-size: 11px; }
.tmt-plot__aside .is-sub { fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.tmt-plot__ring { fill: none; stroke: var(--ink); stroke-width: 1.5; pointer-events: none; }

/* Crosshair */
.tmt-plot__cross line { stroke: var(--chart-crosshair); stroke-width: 1; stroke-dasharray: 3 3; }
.tmt-plot__cross circle { stroke: var(--card); stroke-width: 2; }
.tmt-plot__hit { cursor: crosshair; }

/* Legend: shown for two or more series. */
.tmt-plot__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-bottom: 6px;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-2);
}
.tmt-plot__key { display: inline-flex; align-items: center; gap: 6px; }
.tmt-plot__key i {
  display: inline-block;
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: var(--key);
}
.tmt-plot__key.is-dash i {
  background: repeating-linear-gradient(90deg, var(--key) 0 4px, transparent 4px 7px);
}
.tmt-plot__key.is-bar i {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: color-mix(in oklab, var(--key) 62%, transparent);
}

/* ---------- Phones (docs/MOBILE.md section 1) ----------
   Axis text takes the 12px text floor (tmt-plot.js sizes the margins for
   it), and a legend wraps an item that is wider than the chart. */
@media (max-width: 820px), (pointer: coarse) and (max-height: 500px) {
  .tmt-plot__axis { font-size: 12px; }
  .tmt-plot__key { max-width: 100%; }
}

/* A finger on a chart: a vertical drag is the page's (it scrolls), a
   horizontal one or a hold is the chart's (it scrubs). pan-y leaves the
   page exactly those; pinch-zoom keeps zooming the page (Safari, which
   does not know it, keeps the pan-y line). No text selection, callout or
   tap flash under a scrubbing thumb. */
@media (max-width: 820px), (pointer: coarse) {
  .tmt-plot__svg {
    touch-action: pan-y;
    touch-action: pan-y pinch-zoom;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }
}
/* While a finger scrubs, the crosshair is solid. */
.tmt-plot.is-scrub .tmt-plot__cross line { stroke: var(--ink-2); stroke-dasharray: none; }

/* The readout (phones): the latest point at rest, the point under the
   finger while it scrubs. Its height is fixed once drawn and each value's
   width reserved (tmt-plot.js), so the chart never moves under the finger.
   One series reads as a figure; several read as the legend with values. */
.tmt-plot__read {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-height: 36px;
  margin-bottom: 4px;
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
}
.tmt-plot__read-body {
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.tmt-plot__read-vals {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 10px;
  min-width: 0;
  line-height: 20px;
}
.tmt-plot__rv { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; max-width: 100%; }
.tmt-plot__rv i {
  flex: none;
  align-self: center;
  width: 10px;
  height: 3px;
  border-radius: 2px;
  background: var(--key);
}
.tmt-plot__rv i[hidden],
.tmt-plot__rv-l[hidden] { display: none; }
.tmt-plot__rv-l {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
}
.tmt-plot__rv b {
  flex: none;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.tmt-plot__read-vals.is-solo .tmt-plot__rv b { font-size: 17px; letter-spacing: -0.01em; }
/* An event (a lane's dot) reads as a name, in proportional figures. */
.tmt-plot__read.is-event .tmt-plot__rv b { overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; font-variant-numeric: normal; }
.tmt-plot__read-when {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-3);
}
.tmt-plot__read.is-scrub .tmt-plot__read-when { color: var(--ink); font-weight: 600; }
/* At rest on a card that already shows the figure: the dates alone. */
.tmt-plot__read.is-quiet .tmt-plot__read-vals { display: none; }
/* Several series whose values would wrap beside Expand: the date beside
   it, the values under both at the full width (tmt-plot.js decides). */
.tmt-plot__read.is-multi {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 28px minmax(0, 1fr);
  gap: 0 8px;
}
.tmt-plot__read.is-multi .tmt-plot__read-body { display: contents; }
.tmt-plot__read.is-multi .tmt-plot__read-when { grid-area: 1 / 1; align-self: center; }
.tmt-plot__read.is-multi .tmt-plot__read-vals { grid-area: 2 / 1 / 3 / 3; overflow: hidden; }
.tmt-plot__read.is-multi .tmt-plot__expand { grid-area: 1 / 2; margin: -8px -10px -8px 0; }

/* Expand: a 44px icon button (docs/MOBILE.md 1), its icon (two arrows
   apart) a mask in the text colour, set into the readout's corner. */
.tmt-plot__expand {
  --tmt-plot-expand-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E");
  position: relative;
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: -4px -10px -4px 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tmt-plot__expand::after {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--tmt-plot-expand-icon) center / contain no-repeat;
  mask: var(--tmt-plot-expand-icon) center / contain no-repeat;
}
.tmt-plot__expand:active { background: var(--paper-2); color: var(--ink); }
.tmt-plot__expand:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
@media (hover: hover) {
  .tmt-plot__expand:hover { background: var(--paper-2); color: var(--ink); }
}

/* ---------- Full screen (phones) ----------
   A fixed overlay over the whole page (the chrome and the tab bar too),
   under the tooltip, padded for the notch and the home indicator. The
   chart fills what the heading leaves; sideways, the heading row slims. */
html.tmt-plot-full-open,
html.tmt-plot-full-open body { overflow: hidden; }
.tmt-plot-full {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-popover) - 1);
  display: flex;
  flex-direction: column;
  padding:
    env(safe-area-inset-top)
    max(12px, env(safe-area-inset-right))
    max(10px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
  background: var(--card);
  overscroll-behavior: contain;
  touch-action: none;
}
.tmt-plot-full__bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
}
.tmt-plot-full__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}
.tmt-plot-full__close {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 -8px 0 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tmt-plot-full__close:active { background: var(--paper-2); color: var(--ink); }
.tmt-plot-full__close:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.tmt-plot-full__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* Upright, a chart as tall as the screen would stretch every move: it
   keeps a readable shape, with the hint to turn the phone under it. */
.tmt-plot-full__chart { flex: 0 1 auto; width: 100%; height: min(100%, 150vw); min-height: 0; }
@media (orientation: landscape) {
  .tmt-plot-full__chart { flex: 1 1 auto; height: auto; }
}
/* Nothing to scroll here: every drag on the chart scrubs. */
.tmt-plot-full .tmt-plot__svg { touch-action: none; }
.tmt-plot-full__hint {
  flex: none;
  margin: 16px 0 0;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-3);
  text-align: center;
}
@media (orientation: landscape), (hover: hover) and (pointer: fine) {
  .tmt-plot-full__hint { display: none; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .tmt-plot-full__bar { min-height: 44px; }
  .tmt-plot-full__title { font-size: 15px; }
}
@media (prefers-reduced-motion: no-preference) {
  .tmt-plot-full { animation: tmt-plot-full-in var(--dur-mid) var(--ease-out); }
}
@keyframes tmt-plot-full-in {
  from { opacity: 0; transform: translateY(8px); }
}