/* ==========================================================================
   Orderbook — article charts
   Furniture for the SVG charts drawn by charts.js. Everything structural —
   gridlines, axes, tick labels, the crosshair — is styled here rather than
   from script, so it follows the theme tokens and prints without a redraw.
   Only the series colours are set from JS, because only JS knows which token
   each series asked for.
   ========================================================================== */

/* --- The figure ----------------------------------------------------------- */

.chart {
  position: relative;
  margin: 0;
  font-family: var(--font-sans);
}

/* Before the script runs the table is all there is, so it must not be hidden
   by anything here; .is-rendered is added only once an SVG exists. */
.chart.is-rendered .chart__data {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Head ----------------------------------------------------------------- */

.chart__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.chart__heading { min-width: 0; }      /* a long title wraps rather than shoving */

/* --- Enlarging ------------------------------------------------------------ */

.chart__zoom {
  flex: none;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: none;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 0.2rem 0.5rem;
  cursor: pointer;
}
.chart__zoom:hover { color: var(--ink); border-color: var(--rule-strong); }
.chart__zoom[aria-pressed="true"] { color: var(--claret); border-color: var(--claret); }

/* Half as big again, and out of the column the article's text is set in. The
   width can never exceed the viewport less its gutters, so enlarging on a
   phone adds height and whatever width is going — never a sideways scroll. */
.chart.is-large {
  width: min(150%, calc(100vw - 2 * var(--gutter, 1rem)));
  margin-inline: calc((100% - min(150%, calc(100vw - 2 * var(--gutter, 1rem)))) / 2);
}

.chart__title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.chart__subtitle {
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--ink-muted);
  margin-top: 0.2rem;
}

/* --- Range buttons -------------------------------------------------------- */

.chart__ranges {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 0.45rem;
  border-bottom: 1px solid var(--rule);
}

.chart__range {
  font: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
}
.chart__range:first-child { padding-left: 0; }
.chart__range:hover { color: var(--ink); }
.chart__range[aria-pressed="true"] { color: var(--claret); border-bottom-color: var(--claret); }

/* --- Plot ----------------------------------------------------------------- */

.chart__plot {
  position: relative;
  width: 100%;
  touch-action: pan-y;          /* let the page scroll; we only read the x axis */
}
.chart__plot:focus-visible { outline: 2px solid var(--oxford); outline-offset: 2px; }

.chart__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* --- Axes and grid -------------------------------------------------------- */

.chart__grid line {
  stroke: var(--rule);
  stroke-width: 1;
  shape-rendering: crispEdges;
}

/* Zero is the reader's anchor on a chart that crosses it, so it gets weight. */
.chart__grid line.chart__grid-zero { stroke: var(--rule-strong); }

.chart__axis line {
  stroke: var(--rule-strong);
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.chart__tick {
  fill: var(--ink-faint);
  font-family: var(--font-sans);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.chart__axis-label {
  fill: var(--ink-muted);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- Marks ---------------------------------------------------------------- */

.chart__line {
  fill: none;
  stroke-width: 1.75;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* A wash rather than a gradient: the FT fills an area with one flat tint. */
.chart__area {
  stroke: none;
  fill-opacity: 0.12;
}

/* Stacked, the bands are the chart rather than a tint behind a line, and each
   has to be told apart from the one above it. */
.chart__area--stacked { fill-opacity: 0.8; }

.chart__dot { stroke: var(--paper); stroke-width: 1.5; }

.chart__wick { stroke-width: 1; }

.chart__crosshair line {
  stroke: var(--ink-faint);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  shape-rendering: crispEdges;
}

/* --- Tooltip -------------------------------------------------------------- */

.chart__tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  min-width: 6.5rem;
  max-width: min(14rem, calc(100% - 8px));
  pointer-events: none;
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.55rem;
  font-size: 0.76rem;
  line-height: 1.35;
  color: var(--ink);
}

.chart__tip-x {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  padding-bottom: 0.25rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}

.chart__tip-name {
  font-weight: 700;
  color: var(--ink-muted);
  white-space: nowrap;
}

.chart__tip-row {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  white-space: nowrap;
}
.chart__tip-row + .chart__tip-row { margin-top: 0.1rem; }

.chart__tip-label {
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

.chart__tip-value {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--ink);
}

.chart__swatch {
  flex: none;
  width: 9px;
  height: 9px;
  align-self: center;
  background: var(--ink-faint);
}

/* --- Legend --------------------------------------------------------------- */

.chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  list-style: none;
  margin: 0.45rem 0 0;
  padding: 0;
}

.chart__legend-item { margin: 0; }

.chart__legend-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font: inherit;
  font-size: 0.78rem;
  color: var(--ink-muted);
  background: none;
  border: 0;
  padding: 0.15rem 0;
  cursor: pointer;
}
.chart__legend-button:hover { color: var(--ink); }
.chart__legend-button:hover .chart__legend-name { text-decoration: underline; }

.chart__legend-item.is-off .chart__legend-button { color: var(--ink-faint); }
.chart__legend-item.is-off .chart__swatch { opacity: 0.25; }
.chart__legend-item.is-off .chart__legend-name { text-decoration: line-through; }

/* --- Message and note ----------------------------------------------------- */

.chart__message {
  font-size: 0.78rem;
  color: var(--ink-muted);
  margin-top: 0.5rem;
  padding-left: 0.6rem;
  border-left: 2px solid var(--rule-strong);
}

.chart__note {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--ink-faint);
  margin-top: 0.5rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--rule);
}

.chart.is-loading .chart__plot { opacity: 0.55; }

/* --- Motion --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .chart, .chart * { transition: none !important; animation: none !important; }
}

/* --- Print ---------------------------------------------------------------- */
/* Keep the chart, drop the controls: the crosshair and the range switcher are
   meaningless on paper, and the tooltip would print over the plot. */

@media print {
  .chart__ranges,
  .chart__views,
  .chart__tip,
  .chart__crosshair,
  .chart__zoom,
  .chart__message { display: none !important; }

  .chart__plot { break-inside: avoid; page-break-inside: avoid; }
  .chart.is-large { width: 100%; margin-inline: 0; }
  .chart__grid line { stroke: #c9c9c9 !important; }
  .chart__axis line { stroke: #555 !important; }
  .chart__tick { fill: #444 !important; }
  .chart__band { fill: #000 !important; fill-opacity: 0.08 !important; }
  .chart__rule { stroke: #777 !important; }
  .chart__mark-label { fill: #444 !important; stroke: #fff !important; }
  .chart__axis-label, .chart__subtitle, .chart__note { color: #444 !important; fill: #444 !important; }
  .chart__title, .chart__legend-button { color: #000 !important; }
}

/* --- Living inside an article --------------------------------------------
 *
 * A chart sits in .prose, whose rules are written for body copy and reach
 * every descendant. Three of them out-specify the styles above, so they are
 * answered here rather than by sprinkling !important through the file:
 *
 *   .prose figure { margin: 0 }   flattens the gap around the figure
 *   .prose ul     { padding-left } indents the legend
 *   .prose li + li{ margin-top }   nudges every legend item after the first
 *
 * Each selector below is one step more specific than the rule it answers.
 */

figure.chart {
  /* .prose > * + * gives other blocks 1.3em; a chart needs a little more air
     than a paragraph, and the same above as below. */
  margin-block: 2em;
}

ul.chart__legend {
  padding-left: 0;
}

.chart__legend .chart__legend-item {
  margin-top: 0;
}

/* --- Shaded regions and reference lines ----------------------------------- */

.chart__band {
  fill: var(--ink-faint);
  fill-opacity: 0.1;          /* the ground a line is read against, never a mark */
}

.chart__rule {
  stroke: var(--ink-faint);
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.chart__mark-label {
  fill: var(--ink-faint);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  /* A band's label frequently lands on the line it is describing, so it is
     drawn with the page colour behind its own strokes. */
  paint-order: stroke fill;
  stroke: var(--paper);
  stroke-width: 3px;
  stroke-linejoin: round;
}

/* The total on a stacked chart: what the column's height actually means. */
.chart__tip-row--total {
  margin-top: 0.3rem;
  padding-top: 0.25rem;
  border-top: 1px solid var(--rule);
}
.chart__tip-row--total .chart__tip-label { color: var(--ink); font-weight: 700; }

/* Volume beneath the price. Lighter than the candles above it: it is context
   for them, not a second chart competing for the reader's attention. */
.chart__vol { fill-opacity: 0.45; }

/* --- Choosing between versions of a chart --------------------------------- */

.chart__views {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.55rem;
}

.chart__view {
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  background: none;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 0.22rem 0.55rem;
  cursor: pointer;
}
.chart__view:hover { color: var(--ink); border-color: var(--rule-strong); }
.chart__view[aria-pressed="true"] {
  color: var(--paper);
  background: var(--claret);
  border-color: var(--claret);
}