/* ced-charts.css — Premium chart styling for ced-charts.js
   Depends on Ced design tokens (--bg-*, --tx-*, --f-*, --sh-*, --r-*).
   Chart palette: --ch-1 through --ch-12.
   Glass tooltip, synced crosshair, legend toggle, minimal ink grid. */

/* ── CHART PALETTE ───────────────────────────────────────── */
:root {
  --ch-1:#3b82f6; --ch-2:#ef4444; --ch-3:#22c55e; --ch-4:#f59e0b;
  --ch-5:#8b5cf6; --ch-6:#ec4899; --ch-7:#06b6d4; --ch-8:#f97316;
  --ch-9:#14b8a6; --ch-10:#a855f7; --ch-11:#6366f1; --ch-12:#84cc16;

  --ch-grid:rgba(255,255,255,.08);
  --ch-axis:rgba(255,255,255,.45);
  --ch-tip-bg:rgba(9,8,13,.82);
  --ch-tip-bdr:rgba(255,255,255,.10);
}

/* Koligo theme — warm gold palette, navy grid */
[data-theme="koligo"] {
  --ch-1:#c4a265; --ch-2:#ef6b4a; --ch-3:#2db88a; --ch-4:#4a8ff0;
  --ch-5:#dbb97a; --ch-6:#e0607e; --ch-7:#3ac9c1; --ch-8:#f0a830;
  --ch-9:#6b9f5b; --ch-10:#a87be0; --ch-11:#5b8dd9; --ch-12:#d4c26a;

  --ch-grid:rgba(196,162,101,.08);
  --ch-axis:rgba(255,255,255,.50);
  --ch-tip-bg:rgba(6,13,26,.85);
  --ch-tip-bdr:rgba(196,162,101,.12);
}

/* Cream surface — dark chart ink on light background */
[data-surface="cream"] {
  --ch-1:#8c6430; --ch-2:#c44a2e; --ch-3:#1a8a5a; --ch-4:#2d6bc4;
  --ch-5:#a07038; --ch-6:#b8405a; --ch-7:#1a8a8a; --ch-8:#c47820;
  --ch-9:#4a7a3a; --ch-10:#7a50b8; --ch-11:#3a60b8; --ch-12:#8a9a30;

  --ch-grid:rgba(26,21,16,.12);
  --ch-axis:rgba(26,21,16,.92);
  --ch-tip-bg:rgba(26,21,16,.92);
  --ch-tip-bdr:rgba(196,162,101,.15);
}

/* ── CONTAINER ───────────────────────────────────────────── */
.ax {
  position: relative;
  width: 100%;
}
.ax svg {
  display: block;
}
.ax-wrap {
  position: relative;
  width: 100%;
}

/* ── RANGE SELECTOR ─────────────────────────────────────── */
.ax-range {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0 0 10px;
}
.ax-range-presets {
  display: flex;
  gap: 2px;
  border: 1px solid var(--ch-grid);
  border-radius: 8px;
  padding: 2px;
}
.ax-range-btn {
  background: none;
  border: none;
  padding: 4px 12px;
  border-radius: 6px;
  font-family: var(--f-mono);
  font-size: .72rem;
  color: var(--ch-axis);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.ax-range-btn:hover { background: var(--ch-grid); }
.ax-range-btn.active {
  background: #c4a265;
  color: #0a0d1a;
}
.ax-range-custom {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.ax-range-sep {
  color: var(--ch-axis);
  font-size: .75rem;
}
.ax-range-input {
  background: transparent;
  border: 1px solid var(--ch-grid);
  border-radius: 6px;
  padding: 3px 8px;
  font-family: var(--f-mono);
  font-size: .72rem;
  color: var(--ch-axis);
  outline: none;
  transition: border-color .15s;
}
.ax-range-input:focus { border-color: var(--ch-axis); }
.ax-range-input::-webkit-calendar-picker-indicator {
  filter: invert(.5);
}

/* ── GRID (horizontal only, minimal ink) ─────────────────── */
.ax-grid line {
  stroke: var(--ch-grid);
  stroke-width: 1;
  stroke-dasharray: 4,4;
}

/* ── AXES (floating labels, no axis lines) ───────────────── */
.ax-axes text {
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 500;
  fill: var(--ch-axis);
  letter-spacing: .02em;
}

/* ── MARKS (reference lines + bands, behind data) ────────── */
.ax-mark-line {
  stroke-width: 1;
  stroke-dasharray: 6,3;
  opacity: 0.6;
}
.ax-mark-label {
  font-family: var(--f-mono);
  font-size: 9px;
  fill: var(--ch-axis);
}

/* ── SERIES ──────────────────────────────────────────────── */
.ax-s {
  transition: opacity .2s ease;
}
.ax-line {
  vector-effect: non-scaling-stroke;
}
.ax-bar {
  transition: opacity .15s ease;
}
.ax-dot {
  transition: opacity .15s ease;
}
.ax-wedge {
  stroke: var(--bg-0);
  stroke-width: 2;
}
.ax-pie-label {
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 500;
  fill: var(--bg-0);
}

/* ── CROSSHAIR (dashed, subtle) ──────────────────────────── */
.ax-cross {
  stroke: var(--ch-axis);
  stroke-width: 1;
  stroke-dasharray: 4,3;
  opacity: 0.4;
  pointer-events: none;
}

/* ── TOOLTIP (glass panel, sorted values) ────────────────── */
.ax-tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  background: var(--ch-tip-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--ch-tip-bdr);
  border-radius: var(--r-lg, 12px);
  box-shadow: var(--sh-lg, 0 12px 48px rgba(0,0,0,.7));
  padding: 10px 14px;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  font-family: var(--f-ui);
  min-width: 140px;
}

.ax-tip-time {
  font-family: var(--f-mono);
  font-size: .7rem;
  color: rgba(255,255,255,.55);
  letter-spacing: .04em;
  margin-bottom: 6px;
  white-space: nowrap;
}

.ax-tip-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: .8rem;
  line-height: 1.6;
}

.ax-tip-name {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.85);
  white-space: nowrap;
}

.ax-tip-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ax-tip-val {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #fff;
  white-space: nowrap;
}

/* ── LEGEND (cluster, click to toggle) ───────────────────── */
.ax-leg {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 8px 0 0;
}

.ax-leg-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  transition: opacity .2s ease;
  font-size: .78rem;
}
.ax-leg-item.off {
  opacity: 0.3;
}
.ax-leg-item.off .ax-leg-dot {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 2px,
    var(--tx-3) 2px,
    var(--tx-3) 3px
  ) !important;
}

.ax-leg-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ax-leg-name {
  font-family: var(--f-mono);
  font-size: .72rem;
  color: var(--tx-2);
}

.ax-leg-val {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--tx-1);
  margin-left: 2px;
}

/* ── REDUCED MOTION ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ax-tip,
  .ax-s,
  .ax-bar,
  .ax-dot,
  .ax-leg-item { transition: none; }
}