/* Shared look for the visualization pages: chart cards, controls, data tables.
   Series colors are validated slots (blue, orange, aqua, yellow, magenta);
   past three series every chart also varies marker shape or labels directly. */
:root {
  --c1: #2a78d6; --c2: #eb6834; --c3: #1baf7a; --c4: #eda100; --c5: #e87ba4;
  --seq-0: #cde2fb; --seq-1: #86b6ef; --seq-2: #3987e5; --seq-3: #1c5cab; --seq-4: #0d366b;
  --mid: #e6e9ec;
}
:root:not([data-theme="light"]) {
  --c1: #3987e5; --c2: #d95926; --c3: #199e70; --c4: #c98500; --c5: #d55181;
  --seq-0: #1d2a38; --seq-1: #184f95; --seq-2: #256abf; --seq-3: #5598e7; --seq-4: #b7d3f6;
  --mid: #2b333c;
}

.byline { margin: 14px 0 0; font-size: .86rem; color: var(--muted); }
.byline a { color: var(--ink-soft); text-decoration: none; }
.byline a:hover { color: var(--accent); }

.controls { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: end; margin-top: 28px; }
.ctl { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ctl label { font: 600 .68rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ctl select {
  font: 500 .9rem var(--sans); color: var(--ink); background: var(--panel); border: 1px solid var(--rule);
  border-radius: 8px; height: 36px; padding: 0 30px 0 12px; min-width: 170px; max-width: 100%; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) 15px, calc(100% - 10px) 15px; background-size: 5px 5px; background-repeat: no-repeat;
}
.ctl select:hover { border-color: var(--accent); }
.ctl select:disabled { opacity: .45; cursor: default; }
.status { margin: 14px 0 0; font-size: .9rem; color: var(--ink-soft); min-height: 1.5em; }
.status b { color: var(--ink); font-weight: 600; }

.plot { width: 100%; min-height: 320px; }
.plot.tall { min-height: 440px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 980px) { .grid2, .grid3 { grid-template-columns: minmax(0, 1fr); } }
.step .step-head { margin-bottom: 8px; }
.step-title.sm { font-size: 1.08rem; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .8rem; color: var(--ink-soft); margin: 4px 0 0; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }

.pager { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 10px; font: .8rem var(--mono); color: var(--muted); }
.pager button { font: 500 .8rem var(--mono); color: var(--ink-soft); background: transparent; border: 1px solid var(--rule); border-radius: 6px; height: 28px; min-width: 32px; cursor: pointer; }
.pager button:disabled { opacity: .4; cursor: default; }
th[data-k] { cursor: pointer; user-select: none; }
th[data-k]:hover { color: var(--ink); }
th[aria-sort="ascending"]::after { content: " ↑"; } th[aria-sort="descending"]::after { content: " ↓"; }

.notes { margin-top: 44px; }
.notes dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 22px; margin: 0; font-size: .9rem; max-width: 86ch; }
.notes dt { color: var(--muted); }
.notes dd { margin: 0; color: var(--ink-soft); }
@media (max-width: 640px) { .notes dl { grid-template-columns: minmax(0, 1fr); gap: 2px; } .notes dd { margin-bottom: 10px; } .ctl, .ctl select { width: 100%; } }
.loading { display: grid; place-items: center; min-height: 240px; color: var(--muted); font-size: .86rem; }