/* ============================================================
   LabCompare - price tracker (/labs/history/)
   Chart series palette = validated 8-slot categorical set
   (dataviz reference palette; light/dark steps validated against
   --bg-elevated surfaces). Assigned by slot, never cycled.
   ============================================================ */

:root {
  --viz-s1: #2a78d6;
  --viz-s2: #1baf7a;
  --viz-s3: #eda100;
  --viz-s4: #008300;
  --viz-s5: #4a3aa7;
  --viz-s6: #e34948;
  --viz-s7: #e87ba4;
  --viz-s8: #eb6834;
  --viz-grid: #e1e0d9;
  --viz-axis: #c3c2b7;
  --delta-up: #b42318;   /* price increase = costs you more */
  --delta-down: #047857; /* price drop */
}
[data-theme="dark"] {
  --viz-s1: #3987e5;
  --viz-s2: #199e70;
  --viz-s3: #c98500;
  --viz-s4: #008300;
  --viz-s5: #9085e9;
  --viz-s6: #e66767;
  --viz-s7: #d55181;
  --viz-s8: #d95926;
  --viz-grid: #2c2c2a;
  --viz-axis: #383835;
  --delta-up: #f97066;
  --delta-down: #34d399;
}
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --viz-s1: #3987e5;
    --viz-s2: #199e70;
    --viz-s3: #c98500;
    --viz-s4: #008300;
    --viz-s5: #9085e9;
    --viz-s6: #e66767;
    --viz-s7: #d55181;
    --viz-s8: #d95926;
    --viz-grid: #2c2c2a;
    --viz-axis: #383835;
    --delta-up: #f97066;
    --delta-down: #34d399;
  }
}

.ph-shell { max-width: 980px; margin: 0 auto; padding: 0 16px; }

/* Tabs */
.ph-tabs { display: flex; gap: 8px; margin: 4px 0 16px; flex-wrap: wrap; }
.ph-tab {
  border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text);
  border-radius: 999px; padding: 7px 16px; font: inherit; font-size: 0.86rem; cursor: pointer;
}
.ph-tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }

.ph-card {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 18px; margin-bottom: 16px;
}
.ph-card h2 { margin: 0 0 4px; font-size: 1.02rem; }
.ph-sub { font-size: 0.8rem; color: var(--text-muted); margin: 0 0 12px; }

.ph-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.ph-row label { font-size: 0.82rem; color: var(--text-muted); }
.ph-row select {
  font: inherit; font-size: 0.88rem; padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text);
  max-width: 100%;
}

/* Chart */
.ph-chart-wrap { position: relative; }
.ph-chart-wrap svg { display: block; width: 100%; height: auto; }
.ph-tooltip {
  position: absolute; pointer-events: none; z-index: 5; display: none;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; font-size: 0.76rem; box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  min-width: 150px;
}
.ph-tooltip__date { font-weight: 600; margin-bottom: 4px; }
.ph-tooltip__row { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.ph-tooltip__row .sw { flex: none; }
.ph-tooltip__row .nm { flex: 1; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.ph-tooltip__row .pr { font-variant-numeric: tabular-nums; font-weight: 600; }

.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }

/* Legend (series pickers) */
.ph-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 10px; }
.ph-legend label {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem;
  cursor: pointer; padding: 3px 6px; border-radius: 6px;
}
.ph-legend label:hover { background: var(--bg-subtle); }
.ph-legend input { accent-color: var(--accent); }
.ph-legend .cur { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.ph-legend-note { font-size: 0.72rem; color: var(--text-faint); margin-top: 6px; }

/* Tables */
.ph-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.ph-table th, .ph-table td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--border); }
.ph-table th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); }
.ph-table td.num, .ph-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ph-table .up { color: var(--delta-up); font-weight: 600; }
.ph-table .down { color: var(--delta-down); font-weight: 600; }
.ph-table .muted { color: var(--text-faint); }
.ph-table-scroll { overflow-x: auto; }

.ph-empty { padding: 18px 4px; color: var(--text-muted); font-size: 0.86rem; }

.ph-downloads { text-align: center; font-size: 0.8rem; color: var(--text-muted); margin: 4px 0 24px; }

@media (max-width: 620px) {
  .ph-card { padding: 12px; }
  .ph-tooltip__row .nm { max-width: 120px; }
}