/* φ-trajectory sparkline — light & dark theme aware via root vars */

:root[data-theme="dark"] {
  --spark-phi:#ffb84d;
  --spark-hat:rgba(255,255,255,.55);
  --spark-grid:rgba(255,255,255,.10);
  --spark-tri-spike:#ffb84d;
  --spark-tri-calm:rgba(255,255,255,.45);
  --spark-bg:rgba(255,255,255,.04);
  --spark-tick:rgba(255,255,255,.40);
}
:root[data-theme="light"] {
  --spark-phi:#c8770a;
  --spark-hat:rgba(15,16,32,.55);
  --spark-grid:rgba(15,16,32,.10);
  --spark-tri-spike:#c8770a;
  --spark-tri-calm:rgba(15,16,32,.50);
  --spark-bg:rgba(15,16,32,.03);
  --spark-tick:rgba(15,16,32,.50);
}

.sparkline-wrap{
  margin:0 0 11px;
  padding:10px 12px 6px;
  background:var(--spark-bg);
  border-radius:8px;
  border:1px solid var(--glass-border);
}
.spark-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:4px;
}
.spark-title{
  font-size:10px;letter-spacing:.10em;text-transform:uppercase;
  color:var(--text-faint);font-weight:600;
}
.spark-tri{
  font-size:10px;font-weight:700;letter-spacing:.08em;
  padding:2px 7px;border-radius:5px;
  font-variant-numeric:tabular-nums;
}
.spark-tri.spike{ background:rgba(255,184,77,.18); color:var(--spark-tri-spike); }
.spark-tri.calm { background:var(--glass-bg); color:var(--spark-tri-calm); }

.sparkline{
  display:block;width:100%;height:70px;overflow:visible;
}
.spark-hat{ stroke:var(--spark-hat); stroke-width:1.4; }
.spark-phi{ stroke:var(--spark-phi); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.spark-phi-dot{ fill:var(--spark-phi); }
.spark-phi-dot.live{ stroke:var(--spark-phi); stroke-width:2; fill:var(--spark-phi); }
.spark-tri-bar{ stroke:var(--spark-tri-spike); stroke-width:2; stroke-dasharray:2 2; opacity:.85; }
.spark-tick{
  font-size:8px;font-family:"SF Mono",Menlo,Consolas,monospace;
  fill:var(--spark-tick);letter-spacing:.02em;
}
.spark-tick-d{ font-size:7.5px; opacity:.65; }

.spark-legend{
  display:flex;flex-wrap:wrap;gap:10px 14px;margin-top:6px;
  font-size:9.5px;letter-spacing:.04em;color:var(--text-faint);
  align-items:center;
}
.spark-leg{ display:inline-flex;align-items:center;gap:5px; }
.spark-swatch{ width:14px;height:2px;border-radius:1px; }
.spark-swatch.phi{ background:var(--spark-phi); }
.spark-swatch.hat{
  background:repeating-linear-gradient(to right,var(--spark-hat) 0 3px,transparent 3px 6px);
  height:2px;
}
.spark-shape em{ color:var(--text); font-style:normal; font-weight:600; }