/* ArthaCharts (public/stock-charts.js), 2026-09-24.
   Reads the v3.css tokens only: no token block here and no colour of its own.
   Marks live in a stretched SVG (preserveAspectRatio="none", strokes
   non-scaling); every label is HTML over it, so text stays sharp at any width.
   Colour slots: promoter --brand, fii --ink-raised, dii --brass, the remainder
   --rule-strong (drawn --faint and dashed where it is a line, which a 1.5:1
   hairline would not survive). */

.ac {
  position: relative;
  width: 100%;
  min-width: 0;
  color: var(--text);
  font: 400 12px/1.4 var(--ui);
  font-variant-numeric: tabular-nums;
}
.ac-bars,
.ac-lines {
  container: ac / inline-size;
}

/* ---- slots: --ac-color fills a mark, --ac-stroke draws a line ---- */
.ac-c0 { --ac-color: var(--brand); }
.ac-c1 { --ac-color: var(--series-2); }
.ac-c2 { --ac-color: var(--brass); }
.ac-c3 { --ac-color: var(--rule-strong); --ac-stroke: var(--faint); --ac-dash: 5 3; }
.ac-dash { --ac-dash: 6 4; }
.ac-up { --ac-color: var(--positive); }
.ac-down { --ac-color: var(--negative); }

/* ---- head: legend and unit ---- */
.ac-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4px 16px;
  margin: 0 0 8px;
}
.ac-head .ac-legend { margin: 0; }
.ac-unit {
  margin-left: auto;
  color: var(--muted);
  font: 500 11px/1.3 var(--ui);
}
.ac-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font: 500 12px/1.35 var(--ui);
}
.ac-li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.ac-li-l { overflow-wrap: anywhere; }
.ac-li-v { color: var(--text-strong); font-weight: 600; }
.ac-li-v.is-up { color: var(--positive); }
.ac-li-v.is-down { color: var(--negative); }
.ac-li-n { color: var(--faint); }
.ac-note {
  margin: 0 0 8px;
  color: var(--muted);
  font: 400 12px/1.4 var(--ui);
}
.ac-key {
  flex: none;
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: var(--ac-stroke, var(--ac-color, var(--faint)));
}
.ac-key.is-box {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--ac-color, var(--faint));
}
.ac-c3 .ac-key.is-line,
.ac-dash .ac-key.is-line {
  background: repeating-linear-gradient(90deg, var(--ac-stroke, var(--ac-color)) 0 4px, transparent 4px 6px);
}

/* ---- frame: plot beside a y-axis gutter ---- */
.ac-frame {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ac-gutter, 48px);
  border-radius: 6px;
  outline-offset: 4px;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.ac-price .ac-frame,
.ac-lines .ac-frame { cursor: crosshair; }
.ac-frame:focus { outline: none; }
.ac-frame:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.ac-plot {
  position: relative;
  min-width: 0;
}
.ac-svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ac-yaxis { position: relative; }
.ac-yl {
  position: absolute;
  left: 8px;
  transform: translateY(-50%);
  color: var(--muted);
  font: 500 11px/1 var(--ui);
  white-space: nowrap;
}
.ac-xaxis {
  position: relative;
  height: 22px;
  margin-right: var(--ac-gutter, 48px);
  color: var(--muted);
  font: 500 11px/1.25 var(--ui);
}
.ac-xaxis .ac-xl {
  position: absolute;
  top: 6px;
  transform: translateX(-50%);
  white-space: nowrap;
}
.ac-xaxis .ac-xl.is-start { transform: none; }
.ac-xaxis .ac-xl.is-end { transform: translateX(-100%); }
.ac-xaxis.is-bands {
  display: flex;
  height: auto;
  padding-top: 6px;
}
.ac-xaxis.is-bands .ac-xl {
  position: static;
  flex: 1 1 0;
  min-width: 0;
  transform: none;
  white-space: normal;
  text-align: center;
  overflow-wrap: anywhere;
}

/* ---- marks ---- */
.ac-grid {
  fill: none;
  stroke: var(--rule);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.ac-zero {
  fill: none;
  stroke: var(--rule-strong);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.ac-line {
  fill: none;
  stroke: var(--ac-stroke, var(--ac-color));
  stroke-width: 2;
  stroke-dasharray: var(--ac-dash, none);
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.ac-stop-a { stop-color: var(--ac-color); stop-opacity: .16; }
.ac-stop-b { stop-color: var(--ac-color); stop-opacity: 0; }
.ac-baseline {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
}
.ac-base-l {
  position: absolute;
  left: 4px;
  transform: translateY(calc(-100% - 3px));
  padding: 0 4px;
  border-radius: 4px;
  color: var(--muted);
  background: var(--paper);
  font: 500 11px/1.4 var(--ui);
  white-space: nowrap;
  pointer-events: none;
}
.ac-vol { fill: var(--ac-color); fill-opacity: .28; }
.ac-end,
.ac-dot,
.ac-ldot {
  position: absolute;
  border-radius: 50%;
  background: var(--ac-stroke, var(--ac-color));
  box-shadow: 0 0 0 2px var(--paper);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.ac-end,
.ac-ldot { width: 8px; height: 8px; }
.ac-dot { z-index: 2; width: 11px; height: 11px; }
.ac-cross {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 0;
  border-left: 1px solid var(--faint);
  pointer-events: none;
}

/* ---- bars (HTML over the SVG grid: exact 4 px data ends, 24 px cap) ---- */
.ac-group {
  position: absolute;
  top: 0;
  bottom: 0;
}
/* Bars share the middle 72% of their band, 2 px apart. */
.ac-cols {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 2px;
  width: 72%;
  height: 100%;
  margin: 0 auto;
}
.ac-group::before {
  position: absolute;
  inset: 0 4%;
  border-radius: 6px;
  background: var(--canvas-wash);
  content: "";
  opacity: 0;
}
.ac-group.is-on::before { opacity: 1; }
.ac-col {
  position: relative;
  display: block;
  flex: 0 1 24px;
  min-width: 3px;
  max-width: 24px;
  height: 100%;
}
.ac-bar {
  position: absolute;
  left: 0;
  right: 0;
  border-radius: 4px 4px 0 0;
  background: var(--ac-color);
}
.ac-bar.is-neg {
  border-radius: 0 0 4px 4px;
  background: var(--negative);
}
.ac-bar.is-neg.is-s1 { opacity: .72; }
.ac-bar.is-neg.is-s2 { opacity: .5; }
.is-hl-last .ac-group:not(.is-last):not(.is-on) .ac-bar { opacity: .55; }
.ac-vl {
  position: absolute;
  left: 50%;
  display: none;
  transform: translate(-50%, calc(-100% - 3px));
  color: var(--text);
  font: 600 11px/1.2 var(--ui);
  white-space: nowrap;
  pointer-events: none;
}
.ac-vl.is-neg { transform: translate(-50%, 3px); }
.ac-vfit-0 .ac-vl { display: block; }
@container ac (min-width: 360px) { .ac-vfit-360 .ac-vl { display: block; } }
@container ac (min-width: 400px) { .ac-vfit-400 .ac-vl { display: block; } }
@container ac (min-width: 440px) { .ac-vfit-440 .ac-vl { display: block; } }
@container ac (min-width: 480px) { .ac-vfit-480 .ac-vl { display: block; } }
@container ac (min-width: 540px) { .ac-vfit-540 .ac-vl { display: block; } }
@container ac (min-width: 600px) { .ac-vfit-600 .ac-vl { display: block; } }
@container ac (min-width: 680px) { .ac-vfit-680 .ac-vl { display: block; } }
@container ac (min-width: 760px) { .ac-vfit-760 .ac-vl { display: block; } }
@container ac (min-width: 840px) { .ac-vfit-840 .ac-vl { display: block; } }
@container ac (min-width: 920px) { .ac-vfit-920 .ac-vl { display: block; } }
@container ac (min-width: 1000px) { .ac-vfit-1000 .ac-vl { display: block; } }
@container ac (min-width: 1100px) { .ac-vfit-1100 .ac-vl { display: block; } }
@container ac (min-width: 1200px) { .ac-vfit-1200 .ac-vl { display: block; } }
/* Below the width where every band label fits, every other one steps aside
   (the latest always stays). */
@container ac (max-width: 359.98px) { .ac-xfit-360 .ac-xl.is-alt { visibility: hidden; } }
@container ac (max-width: 399.98px) { .ac-xfit-400 .ac-xl.is-alt { visibility: hidden; } }
@container ac (max-width: 439.98px) { .ac-xfit-440 .ac-xl.is-alt { visibility: hidden; } }
@container ac (max-width: 479.98px) { .ac-xfit-480 .ac-xl.is-alt { visibility: hidden; } }
@container ac (max-width: 539.98px) { .ac-xfit-540 .ac-xl.is-alt { visibility: hidden; } }
@container ac (max-width: 599.98px) { .ac-xfit-600 .ac-xl.is-alt { visibility: hidden; } }
@container ac (max-width: 679.98px) { .ac-xfit-680 .ac-xl.is-alt { visibility: hidden; } }
@container ac (max-width: 759.98px) { .ac-xfit-760 .ac-xl.is-alt { visibility: hidden; } }
@container ac (max-width: 839.98px) { .ac-xfit-840 .ac-xl.is-alt { visibility: hidden; } }
@container ac (max-width: 919.98px) { .ac-xfit-920 .ac-xl.is-alt { visibility: hidden; } }
@container ac (max-width: 999.98px) { .ac-xfit-1000 .ac-xl.is-alt { visibility: hidden; } }
@container ac (max-width: 1099.98px) { .ac-xfit-1100 .ac-xl.is-alt { visibility: hidden; } }
@container ac (max-width: 1199.98px) { .ac-xfit-1200 .ac-xl.is-alt { visibility: hidden; } }
.ac-xfit-no .ac-xl.is-alt { visibility: hidden; }

/* ---- donut ---- */
.ac-donut-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}
.ac-donut .ac-frame {
  display: block;
  flex: none;
  width: var(--ac-size, 176px);
  height: var(--ac-size, 176px);
  border-radius: 50%;
}
.ac-svg-donut {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ac-seg {
  fill: var(--ac-color);
  stroke: var(--paper);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
}
.ac-track { fill: var(--rule); }
.ac-donut.is-hl .ac-seg:not(.is-on) { opacity: .35; }
.ac-donut-c {
  position: absolute;
  inset: 22%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.ac-donut-c strong {
  color: var(--text-strong);
  font: 600 20px/1.15 var(--ui);
  font-variant-numeric: proportional-nums;
}
.ac-donut-c span {
  color: var(--muted);
  font: 500 11px/1.3 var(--ui);
}
.ac-legend-donut {
  display: grid;
  flex: 1 1 180px;
  gap: 2px;
  margin: 0;
}
.ac-legend-donut .ac-li {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: default;
}
.ac-legend-donut .ac-li-l { color: var(--text); }
.ac-legend-donut .ac-li.is-on { background: var(--canvas-wash); }
.ac-legend-donut .ac-li.is-missing .ac-li-v { color: var(--faint); font-weight: 500; }
.ac-donut.is-hl .ac-li[data-i]:not(.is-on) { opacity: .55; }

/* ---- tooltip: values lead, labels follow ---- */
.ac-tip {
  position: absolute;
  top: 6px;
  left: 0;
  z-index: 3;
  min-width: 148px;
  max-width: 240px;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: var(--shadow-md);
  font: 400 12px/1.35 var(--ui);
  transform: translateX(12px);
  pointer-events: none;
}
.ac-tip.is-flip { transform: translateX(calc(-100% - 12px)); }
.ac-donut .ac-tip { transform: translate(8px, -50%); }
.ac-tip-t {
  margin: 0 0 4px;
  color: var(--text-strong);
  font-weight: 600;
  white-space: nowrap;
}
.ac-tip-r {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.ac-tip-k {
  width: 12px;
  height: 2px;
  border-radius: 1px;
  background: var(--ac-stroke, var(--ac-color));
}
.ac-tip-k.is-blank { background: none; }
.ac-tip-l {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ac-tip-v {
  color: var(--text-strong);
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}
.ac-tip-v.is-up { color: var(--positive); }
.ac-tip-v.is-down { color: var(--negative); }

.ac-tip[hidden],
.ac-cross[hidden],
.ac-dot[hidden] { display: none !important; }

.ac-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.ac-unavailable {
  margin: 0;
  padding: 28px 16px;
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius);
  color: var(--muted);
  background: var(--paper-sunk);
  font: 400 13px/1.5 var(--ui);
  text-align: center;
}

@media (pointer: coarse) {
  .ac-dot { width: 13px; height: 13px; }
}

/* Motion only for readers who have not asked for less. */
@media (prefers-reduced-motion: no-preference) {
  .ac-area { animation: ac-fade .35s ease-out both; }
  .ac-seg,
  .ac-bar,
  .ac-li,
  .ac-group::before { transition: opacity .15s ease; }
}
@keyframes ac-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ac *,
  .ac *::before { animation: none !important; transition: none !important; }
}