/* tor-charts.css — the only stylesheet this package ships.
 *
 * It defines NO colours of its own: every rule consumes the host skin's tokens
 * (--good / --bad / --accent / --accent-2 / --warn / --line / --text / --muted)
 * with a dark-neon fallback, so Swap, Screener, DarkWeb and Pump.fun keep one
 * look and a re-skin repaints the charts without touching the engine.
 */

.tor-chart {
  position: relative;
  width: 100%;
  min-height: 120px;
  border-radius: 14px;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(10, 165, 255, 0.07), transparent 62%),
    radial-gradient(120% 120% at 100% 0%, rgba(53, 255, 138, 0.05), transparent 58%);
  transition: box-shadow 220ms ease;
}

.tor-chart:hover {
  box-shadow:
    0 0 0 1px var(--line, rgba(120, 200, 255, 0.16)),
    0 18px 40px -28px rgba(0, 240, 208, 0.55);
}

.tor-chart canvas {
  border-radius: 14px;
}

/* The defined empty state: a brand-new token, or a symbol with no pool yet.
   It is a panel, never a throw and never a fake flat line. */
.tor-chart-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px;
  text-align: center;
  border: 1px dashed var(--line, rgba(120, 200, 255, 0.18));
  border-radius: 14px;
  background: rgba(4, 10, 18, 0.4);
  font: 500 11px/1.55 "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  color: var(--muted, #8ba3c1);
}

.tor-chart-empty strong {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent, #00f0d0);
}

.tor-chart-empty button {
  margin-top: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line, rgba(120, 200, 255, 0.24));
  background: transparent;
  color: var(--text, #e8f4ff);
  font: inherit;
  cursor: pointer;
}

.tor-chart-empty button:hover {
  border-color: var(--accent, #00f0d0);
  color: var(--accent, #00f0d0);
}

/* Row sparklines — SVG, so 30 rows cost 30 tiny paths and no canvases. */
.tor-spark {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.tor-spark .tor-spark-line {
  fill: none;
  stroke: var(--accent, #00f0d0);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.tor-spark .tor-spark-area {
  stroke: none;
  fill: var(--accent, #00f0d0);
  opacity: 0.12;
}

.tor-spark.is-down .tor-spark-line {
  stroke: var(--bad, #ff4d7d);
}

.tor-spark.is-down .tor-spark-area {
  fill: var(--bad, #ff4d7d);
}

.tor-spark .tor-spark-dot {
  fill: var(--good, #35ff8a);
}

.tor-spark.is-down .tor-spark-dot {
  fill: var(--bad, #ff4d7d);
}

/* Allocation / pool-count rings. */
.tor-donut {
  display: block;
  overflow: visible;
}

.tor-donut .tor-donut-track {
  stroke: var(--line, rgba(120, 200, 255, 0.16));
  fill: none;
}

.tor-donut .tor-donut-slice {
  fill: none;
  stroke-linecap: butt;
  transition: stroke-width 160ms ease;
}

.tor-donut .tor-donut-slice:hover {
  stroke-width: 16;
}

.tor-donut .tor-donut-label {
  fill: var(--text, #e8f4ff);
  font: 600 15px/1 "JetBrains Mono", ui-monospace, monospace;
  text-anchor: middle;
}

.tor-donut .tor-donut-caption {
  fill: var(--muted, #8ba3c1);
  font: 500 9px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-anchor: middle;
}


/* Ranked bars — one bar per pool / token, with an optional compliance band. */
.tor-bars {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px 0;
  font: 500 11px/1.4 "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  color: var(--muted, #8ba3c1);
}

.tor-bars-band {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px dashed var(--accent-2, #0aa5ff);
  border-right: 1px dashed var(--accent-2, #0aa5ff);
  background: rgba(10, 165, 255, 0.06);
  pointer-events: none;
}

.tor-bars-band-tag {
  position: absolute;
  top: -14px;
  left: 0;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-2, #0aa5ff);
  white-space: nowrap;
}

.tor-bar {
  position: relative;
  display: flex;
  align-items: center;
  height: 20px;
  border-radius: 6px;
  overflow: hidden;
}

.tor-bar-rail {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: rgba(120, 200, 255, 0.06);
}

.tor-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 6px;
  opacity: 0.82;
}

.tor-bar-label {
  position: relative;
  padding-left: 8px;
  color: var(--text, #e8f4ff);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.tor-bar-value {
  position: relative;
  margin-left: auto;
  padding-right: 8px;
  color: var(--text, #e8f4ff);
}

.tor-bar-note {
  position: relative;
  padding-right: 8px;
  color: var(--muted, #8ba3c1);
}

.tor-bars-empty {
  padding: 10px 0;
  font-style: italic;
  color: var(--muted, #8ba3c1);
}

/* The rate strip — live figures where a chart would have to invent history. */
.tor-rate {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--line, rgba(120, 200, 255, 0.16));
  border-radius: 14px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(0, 240, 208, 0.08), transparent 62%),
    rgba(4, 10, 18, 0.5);
  font: 500 11px/1.45 "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
}

.tor-rate-cells {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.tor-rate-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 92px;
}

.tor-rate-label {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #8ba3c1);
}

.tor-rate-value {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text, #e8f4ff);
}

.tor-rate-note {
  margin: 0;
  font-size: 10px;
  line-height: 1.5;
  color: var(--muted, #8ba3c1);
  opacity: 0.85;
}

/* Tokenisation — the supply split every meme-coin page needs and almost none draws.
   Ring on the left (in pools / circulating / not observed), legend beside it, pool
   liquidity per quote asset underneath, and one sentence that names the source of
   every number on the panel. */
.tor-tokenize {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line, rgba(120, 200, 255, 0.16));
  border-radius: 14px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(53, 255, 138, 0.06), transparent 60%),
    rgba(4, 10, 18, 0.5);
  font: 500 11px/1.45 "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  color: var(--muted, #8ba3c1);
}

.tor-tokenize-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

.tor-tokenize-ring {
  flex: 0 0 auto;
  line-height: 0;
}

.tor-tokenize-legend {
  display: flex;
  flex: 1 1 210px;
  flex-direction: column;
  gap: 6px;
  min-width: 180px;
}

.tor-tokenize-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}

.tor-tokenize-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.tor-tokenize-name {
  color: var(--text, #e8f4ff);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.tor-tokenize-amount {
  margin-left: auto;
  color: var(--muted, #8ba3c1);
  font-variant-numeric: tabular-nums;
}

.tor-tokenize-pct {
  min-width: 54px;
  color: var(--accent, #00f0d0);
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tor-tokenize-venues {
  border-top: 1px dashed var(--line, rgba(120, 200, 255, 0.16));
  padding-top: 10px;
}

.tor-tokenize-venue-head {
  margin-bottom: 6px;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #8ba3c1);
}

.tor-tokenize-note {
  margin: 0;
  font-size: 10px;
  line-height: 1.5;
  color: var(--muted, #8ba3c1);
  opacity: 0.85;
}

.tor-tokenize-empty {
  padding: 12px 0;
  border: 1px dashed var(--line, rgba(120, 200, 255, 0.16));
  border-radius: 10px;
  font-style: italic;
  text-align: center;
  color: var(--muted, #8ba3c1);
}