/* AI Career Threat Index explorer — zero-dependency, theme-aware.
   Palette roles per the validated reference palette; band colors are the
   status palette and never carry meaning without a text label. */
:root {
  color-scheme: light;
  --surface: #fcfcfb;
  --plane: #f9f9f7;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #898781;
  --grid: #e1e0d9;
  --baseline: #c3c2b7;
  --border: rgba(11, 11, 11, 0.10);
  --accent: #2a78d6;          /* series-1 blue */
  --seq-lo: #cde2fb;          /* sequential blue 100 */
  --seq-hi: #0d366b;          /* sequential blue 700 */
  --band-low: #0ca30c;        /* status: good */
  --band-moderate: #fab219;   /* status: warning */
  --band-high: #ec835a;       /* status: serious */
  --band-veryhigh: #d03b3b;   /* status: critical */
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #1a1a19;
  --plane: #0d0d0d;
  --ink: #ffffff;
  --ink-2: #c3c2b7;
  --muted: #898781;
  --grid: #2c2c2a;
  --baseline: #383835;
  --border: rgba(255, 255, 255, 0.10);
  --accent: #3987e5;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface: #1a1a19;
    --plane: #0d0d0d;
    --ink: #ffffff;
    --ink-2: #c3c2b7;
    --grid: #2c2c2a;
    --baseline: #383835;
    --border: rgba(255, 255, 255, 0.10);
    --accent: #3987e5;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--plane);
  color: var(--ink);
  line-height: 1.45;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.pad { padding: 1rem; }

.masthead {
  position: relative;
  padding: 2rem 1.25rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.masthead-inner { max-width: 1080px; margin: 0 auto; }
.masthead h1 { margin: 0 0 0.25rem; font-size: 1.6rem; }
.masthead h1 a { color: var(--ink); }
.tagline { margin: 0 0 0.75rem; color: var(--ink-2); max-width: 60ch; }
.gh-link { white-space: nowrap; }
#theme-toggle {
  position: absolute; top: 1rem; right: 1rem;
  background: none; border: 1px solid var(--border); border-radius: 6px;
  color: var(--ink); font-size: 1rem; padding: 0.2rem 0.5rem; cursor: pointer;
}

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  font-size: 0.8rem; padding: 0.15rem 0.6rem; border-radius: 999px;
  border: 1px solid var(--border); color: var(--ink-2); background: var(--plane);
}
.chip .dot { display: inline-block; width: 0.6em; height: 0.6em; border-radius: 50%; margin-right: 0.35em; }

main { max-width: 1080px; margin: 0 auto; padding: 1.25rem; }

.controls {
  display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center;
  margin-bottom: 1rem;
}
.controls input[type="search"], .controls select {
  font: inherit; padding: 0.45rem 0.6rem; border-radius: 8px;
  border: 1px solid var(--baseline); background: var(--surface); color: var(--ink);
}
.controls input[type="search"] { flex: 1 1 220px; min-width: 180px; }
.count-note { color: var(--muted); font-size: 0.85rem; margin-left: auto; }

.panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 1rem; margin-bottom: 1.25rem;
  overflow-x: auto;
}
.panel h2 { margin: 0 0 0.25rem; font-size: 1.05rem; }
.panel .sub { margin: 0 0 0.75rem; color: var(--muted); font-size: 0.85rem; }

table.roles { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table.roles th, table.roles td {
  text-align: left; padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--grid); white-space: nowrap;
}
table.roles th {
  cursor: pointer; user-select: none; color: var(--ink-2);
  font-weight: 600; font-size: 0.8rem; position: sticky; top: 0;
  background: var(--surface);
}
table.roles th .arrow { color: var(--accent); }
table.roles tbody tr { cursor: pointer; }
table.roles tbody tr:hover { background: color-mix(in oklab, var(--accent) 7%, transparent); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.scorebar { display: inline-block; vertical-align: middle; width: 84px; height: 8px;
  background: var(--grid); border-radius: 4px; margin-right: 0.5em; overflow: hidden; }
.scorebar i { display: block; height: 100%; border-radius: 4px; }

.band { font-size: 0.75rem; font-weight: 600; padding: 0.1rem 0.5rem;
  border-radius: 999px; border: 1px solid var(--border); white-space: nowrap; }
.band .dot { display: inline-block; width: 0.55em; height: 0.55em; border-radius: 50%; margin-right: 0.3em; }

.delta-up { color: var(--band-veryhigh); }
.delta-down { color: var(--band-low); }
.delta-flat { color: var(--muted); }

.spark { vertical-align: middle; }
.spark path { fill: none; stroke: var(--accent); stroke-width: 2; }
.spark circle { fill: var(--accent); }

/* scatter */
.scatter text { fill: var(--muted); font-size: 11px; }
.scatter .axis-label { fill: var(--ink-2); font-size: 12px; }
.scatter line.grid { stroke: var(--grid); stroke-width: 1; }
.scatter line.axis { stroke: var(--baseline); stroke-width: 1; }
.scatter circle { stroke: var(--surface); stroke-width: 2; cursor: pointer; }
.legend-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; font-size: 0.8rem; color: var(--ink-2); }

/* detail view */
.detail-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem; }
.detail-head h2 { font-size: 1.5rem; margin: 0; }
.backlink { display: inline-block; margin-bottom: 0.75rem; }
.score-hero { font-size: 3rem; font-weight: 700; line-height: 1; }
.hero-row { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; margin: 0.75rem 0 1rem; }
.hero-block .lbl { color: var(--muted); font-size: 0.8rem; }
.subscores { display: grid; gap: 0.6rem; margin: 0.5rem 0 0.25rem; }
.subscore .lbl { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--ink-2); }
.subscore .lbl b { color: var(--ink); font-variant-numeric: tabular-nums; }
.subscore .bar { height: 8px; background: var(--grid); border-radius: 4px; overflow: hidden; }
.subscore .bar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.subscore .why { font-size: 0.8rem; color: var(--muted); margin-top: 0.15rem; }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.tasklist { margin: 0.25rem 0 0; padding-left: 1.2rem; font-size: 0.9rem; }
.tasklist li { margin-bottom: 0.25rem; }
.skills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.skill-chip { font-size: 0.82rem; padding: 0.3rem 0.7rem; border-radius: 999px;
  border: 1px solid var(--accent); }
.meta-table { font-size: 0.85rem; border-collapse: collapse; }
.meta-table td { padding: 0.2rem 0.75rem 0.2rem 0; color: var(--ink-2); }
.meta-table td:first-child { color: var(--muted); }
.insight-block { border-left: 3px solid var(--accent); padding: 0.25rem 0 0.25rem 0.9rem;
  margin: 0.75rem 0; color: var(--ink-2); font-size: 0.95rem; }
.history-chart line.grid { stroke: var(--grid); }
.history-chart line.axis { stroke: var(--baseline); }
.history-chart path { fill: none; stroke: var(--accent); stroke-width: 2; }
.history-chart circle { fill: var(--accent); }
.history-chart text { fill: var(--muted); font-size: 11px; }
.share-row { margin-top: 0.75rem; }
.share-row button { font: inherit; font-size: 0.85rem; padding: 0.35rem 0.8rem;
  border-radius: 8px; border: 1px solid var(--baseline); background: var(--surface);
  color: var(--ink); cursor: pointer; }

.tooltip {
  position: fixed; pointer-events: none; z-index: 10; display: none;
  background: var(--surface); color: var(--ink); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.4rem 0.6rem; font-size: 0.8rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); max-width: 260px; white-space: normal;
}
.tooltip b { display: block; }
.tooltip .t2 { color: var(--ink-2); }

.site-footer {
  max-width: 1080px; margin: 0 auto; padding: 1.5rem 1.25rem 2.5rem;
  color: var(--muted); font-size: 0.85rem; border-top: 1px solid var(--border);
}
@media (max-width: 640px) {
  .masthead { padding: 1.25rem 1rem 1rem; }
  main { padding: 1rem 0.75rem; }
  .hide-sm { display: none; }
}