/* Chart styling, shared.
 *
 * Lived in styles.css until 2026-08-21, when the buy/sell page needed the same
 * chart. That page carries its own inline CSS and does not load styles.css, so
 * these rules moved here and both pages link this file — one source rather
 * than a copy that quietly drifts. Every variable used below is defined by
 * BOTH pages (--panel, --line, --dim, --muted, --text, --mono); --fg-3 keeps
 * its inline fallback for the same reason.
 */
/* ----------------------------------------------------------------- chart */

.chart-panel {
  margin-bottom: 18px;
}

.chart-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  gap: 12px;
}

.chart-title {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3, #7d8892);
}

.chart-range {
  font-size: 12px;
  color: var(--fg-3, #7d8892);
  font-variant-numeric: tabular-nums;
}

.chart {
  width: 100%;
  height: 220px;
  display: block;
  overflow: visible;
}

.chart-area { pointer-events: none; }
.chart-line {
  fill: none;
  stroke: #7fe3a6;   /* overridden by the brand gradient attribute when present */
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}

/* Buys and sells are coloured, but the LINE is not: tinting the whole series
   by the last trade's side is how a chart starts editorialising. */
.chart-dot.buy { fill: #7fe3a6; }
.chart-dot.sell { fill: #d0603c; }

/* Swatches take the dot colours verbatim, so the legend cannot drift from the
   chart it explains. */
.chart-legend { display: flex; gap: 14px; margin: 6px 0 0; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.swatch { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.swatch.buy { background: #7fe3a6; }
.swatch.sell { background: #d0603c; }

/* Graduation is an event, not a trade — dashed and unsaturated so it reads as
   an annotation on the series rather than part of it. */
.chart-grad-rule {
  stroke: #6b7a8c;
  stroke-width: 1;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
}

.chart-ctl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0 8px; }
.chart-ctl .chip-group { display: flex; gap: 4px; }
.chart-ctl .chip-group.right { margin-left: auto; }
.chart-ctl .chip { font-family: var(--mono); font-size: 11px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--dim); cursor: pointer; }
.chart-ctl .chip.active { border-color: #35d6e0; color: #e6f7ec; box-shadow: 0 0 0 1px rgba(53,214,224,.35), 0 0 10px rgba(53,214,224,.35); background: rgba(53,214,224,.08); }
.chart-ctl .chip:hover { border-color: var(--muted); color: var(--text); }
@media (max-width: 720px) {
  /* Phones: the interval group wraps inside the panel instead of poking past
   * its edge; the right-side group loses its auto margin so it wraps under. */
  .chart-ctl { max-width: 100%; }
  .chart-ctl .chip-group { flex-wrap: wrap; }
  .chart-ctl .chip-group.right { margin-left: 0; }
  .chart-ctl .chip { padding: 2px 7px; font-size: 10px; }
}
.candle.up line, .candle.up rect { stroke: var(--c, #3ee38f); fill: var(--c, #3ee38f); }
.candle.down line, .candle.down rect { stroke: #ff5c7a; fill: #ff5c7a; }
.axis-label.last.up { background: #3ee38f; }
.axis-label.last.down { background: #ff5c7a; }
.chart-last.up { stroke: #3ee38f; }
.chart-last.down { stroke: #ff5c7a; }
.vol.up { fill: var(--c, #3ee38f); opacity: .38; }
.vol.down { fill: rgba(255,92,122,.4); }
.chart-panel { background: radial-gradient(120% 90% at 50% 0%, rgba(53,214,224,.06), transparent 60%), var(--panel); }
.candle line { stroke-width: 1; }
.chart.candles { cursor: grab; touch-action: none; overflow: hidden; }
.chart.candles:active { cursor: grabbing; }
.chart-readout { display: flex; flex-wrap: wrap; gap: 10px 14px; font-family: var(--mono); font-size: 11px; color: var(--muted); margin: 0 0 6px; min-height: 16px; }
.chart-readout .ro b { color: var(--dim); font-weight: 600; }
.chart-readout .up { color: #3ee38f; }
.chart-readout .down { color: #ff5c7a; }
.chart-readout .time { margin-left: auto; color: var(--dim); }
.chart-pool-tint { fill: rgba(63,157,255,.05); pointer-events: none; }
.chart-cross { stroke: rgba(230,240,255,.35); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.axis-label.cursor { background: #2a313c; color: #e8edf4; border-radius: 3px; padding: 1px 4px; }
.chart-guide { fill: none; stroke-width: 1; opacity: .35; vector-effect: non-scaling-stroke; }
.chart-guide.curve { stroke-dasharray: 2 4; }
.chart-guide.pool { opacity: .5; }
/* Curve-era candles are hollow chips; pool-era candles are solid. */
.candle.curve rect { fill: rgba(11,13,16,.85); stroke-width: 1.5; }
.chart-grid { stroke: rgba(120,200,230,.14); stroke-width: 1; stroke-dasharray: 2 6; vector-effect: non-scaling-stroke; }
.chart-wrap { display: flex; align-items: stretch; gap: 0; }
.chart-wrap .chart { flex: 1 1 auto; min-width: 0; }
.chart-axis { position: relative; width: 64px; flex: 0 0 64px; height: 220px; border-left: 1px solid var(--line); }
.axis-label { position: absolute; right: 0; transform: translateY(-50%); font-family: var(--mono); font-size: 10px; color: var(--dim); padding: 0 4px; white-space: nowrap; }
.axis-label.last { color: #0b0d10; border-radius: 3px; padding: 1px 4px; }
.axis-label.last.up { background: #7fe3a6; }
.axis-label.last.down { background: #d0603c; }
.axis-unit { position: absolute; right: 4px; bottom: 0; font-family: var(--mono); font-size: 10px; color: var(--dim); opacity: .7; }
.vol.up { fill: rgba(127,227,166,.35); }
.vol.down { fill: rgba(208,96,60,.4); }
.chart-last { stroke-width: 1; stroke-dasharray: 3 3; opacity: .7; }
.chart-last.up { stroke: #7fe3a6; }
.chart-last.down { stroke: #d0603c; }

.chart-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 12px;
  color: var(--fg-3, #7d8892);
  font-variant-numeric: tabular-nums;
}