/* Modern Terminal - palette + components for /terminal/* */

:root {
  --bg: #0a0e14;
  --panel: #0f141a;
  --panel-2: #131922;
  --border: #1c2026;
  --border-2: #2a313a;

  --text: #e6e1cf;
  --text-dim: #8a93a3;
  --text-mute: #5c6773;
  --text-faint: #3e4451;

  --accent: #ffb454;
  --accent-dim: #cc8c41;
  --accent-faint: #5a3f1d;

  --pos: #7fd962;
  --pos-dim: #4f8c3e;
  --neg: #ff6b6b;
  --neg-dim: #b84747;
  --info: #5ac6e6;
  --warn: #ffcc66;

  --mono: 'JetBrains Mono', 'SF Mono', 'Menlo', 'Consolas', ui-monospace, monospace;
  --sans: system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radius: 0;
  --gap: 12px;
}

/* === Base === */

.terminal {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  min-height: 100vh;
  font-size: 14px;
  letter-spacing: 0.01em;
}

.terminal a {
  color: var(--accent);
  text-decoration: none;
}
.terminal a:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.terminal h1, .terminal h2, .terminal h3, .terminal h4 {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: 0.04em;
  margin: 0;
}

.terminal .mono, .terminal .num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.terminal hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 12px 0;
}

/* === Top bar === */

.term-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.term-brand {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.term-brand .logo {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}

.term-brand .crumb {
  color: var(--text-dim);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.term-clock {
  font-family: var(--mono);
  color: var(--text-dim);
  font-size: 12px;
  letter-spacing: 0.06em;
}

.fund-pick {
  display: inline-block;
  padding: 1px 7px;
  margin: 0 2px;
  border: 1px solid var(--border-2);
  color: var(--text-dim);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.fund-pick:hover {
  color: var(--text);
  border-color: var(--accent-dim);
  text-decoration: none;
}
.fund-pick.active {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
}

/* === Nav tabs === */

.term-nav {
  display: flex;
  gap: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
}

.term-nav a {
  padding: 12px 18px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  border-bottom: 2px solid transparent;
  transition: color 80ms ease, border-color 80ms ease;
}

.term-nav a:hover {
  color: var(--text);
  text-decoration: none;
}

.term-nav a.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* === Layout === */

.term-main {
  padding: 20px 24px 60px;
  max-width: 1600px;
  margin: 0 auto;
}

.term-grid {
  display: grid;
  gap: var(--gap);
}

.term-grid.cols-2 { grid-template-columns: 2fr 1fr; }
.term-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.term-grid.cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.term-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.term-grid.cols-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1100px) {
  .term-grid.cols-2,
  .term-grid.cols-3,
  .term-grid.cols-4 { grid-template-columns: 1fr; }
}

/* === Panel === */

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 16px 18px;
}

.panel.tight { padding: 12px 14px; }
.panel.flush { padding: 0; }

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
  color: var(--text-dim);
}

.panel-head .meta {
  font-family: var(--mono);
  color: var(--text-mute);
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0.04em;
}

/* === KPI strip === */

.kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}

.kpi {
  background: var(--panel);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kpi-label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
  color: var(--text-dim);
}

.kpi-value {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 500;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.kpi-sub {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}

/* === Stat grid (sub KPI) === */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px 24px;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-label {
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 10px;
  color: var(--text-dim);
}

.stat-value {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.stat-value.lg { font-size: 19px; }

/* === Tables === */

.tbl {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.tbl th, .tbl td {
  padding: 7px 10px;
  text-align: right;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.tbl th {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10px;
  color: var(--text-dim);
  font-weight: 500;
  background: var(--panel-2);
  border-bottom: 1px solid var(--border-2);
}

.tbl td.tk, .tbl th.tk { text-align: left; color: var(--text); }
.tbl td.tk a { color: var(--text); text-decoration: none; }
.tbl td.tk a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.tbl td.theme, .tbl th.theme {
  text-align: left;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
}

.tbl tr:hover td { background: var(--panel-2); }

/* Sortable column headers (driven by terminal-tables.js) */
.tbl thead th.sortable {
  cursor: pointer;
  user-select: none;
  padding-right: 18px;
  position: relative;
}
.tbl thead th.sortable:hover {
  color: var(--text);
}
.tbl thead th.sortable[data-sort-dir]::after {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  color: var(--accent);
}
.tbl thead th.sortable[data-sort-dir="asc"]::after  { content: "▲"; }
.tbl thead th.sortable[data-sort-dir="desc"]::after { content: "▼"; }

/* === Bars === */

.bar-row {
  display: grid;
  grid-template-columns: 100px 1fr 70px;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  font-family: var(--mono);
  font-size: 12px;
}

.bar-row .label {
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
}

.bar-row .pct {
  text-align: right;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.bar {
  position: relative;
  height: 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: var(--accent);
  transition: width 200ms ease;
}

.bar-fill.pos { background: var(--pos); }
.bar-fill.neg { background: var(--neg); }
.bar-fill.info { background: var(--info); }

.bar-cap {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 1px;
  background: var(--text-dim);
  opacity: 0.7;
}

.bar-cap.warn {
  background: var(--neg);
  width: 2px;
  opacity: 0.9;
}

/* === Color signals === */

.pos { color: var(--pos); }
.neg { color: var(--neg); }
.dim { color: var(--text-dim); }
.mute { color: var(--text-mute); }
.warn { color: var(--warn); }
.accent { color: var(--accent); }

/* === Status pills === */

.pill {
  display: inline-block;
  padding: 2px 8px;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 1px solid currentColor;
}

.pill.ok { color: var(--pos); }
.pill.warn { color: var(--warn); }
.pill.err { color: var(--neg); }
.pill.live { color: var(--accent); background: rgba(255,180,84,0.08); }
.pill.paper { color: var(--info); }

/* === Sparklines + charts === */

.spark {
  display: inline-block;
  vertical-align: middle;
}

.chart-block {
  background: var(--panel);
  padding: 4px;
}

svg.chart {
  display: block;
  width: 100%;
  height: auto;
}

.chart text {
  font-family: var(--mono);
  font-size: 10px;
  fill: var(--text-mute);
}

.chart .axis-line {
  stroke: var(--border);
  stroke-width: 1;
}

.chart .grid-line {
  stroke: var(--border);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: 0.6;
}

.chart .nav-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
}

.chart .bench-line {
  fill: none;
  stroke: var(--info);
  stroke-width: 1.25;
  stroke-dasharray: 3 3;
  opacity: 0.85;
}

.chart .macro-line {
  stroke: var(--text-mute);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: 0.5;
}

.chart .macro-line.macro-fomc { stroke: var(--warn); opacity: 0.55; }
.chart .macro-line.macro-cpi  { stroke: var(--accent-dim); opacity: 0.45; }
.chart .macro-line.macro-nfp  { stroke: var(--text-dim); opacity: 0.4; }

.chart .macro-label {
  fill: var(--text-mute);
  font-size: 8px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.chart .nav-area {
  fill: var(--accent);
  fill-opacity: 0.08;
}

.chart .dd-area {
  fill: var(--neg);
  fill-opacity: 0.18;
}

.chart .dd-line {
  fill: none;
  stroke: var(--neg);
  stroke-width: 1.25;
}

.chart .ret-bar.pos { fill: var(--pos); }
.chart .ret-bar.neg { fill: var(--neg); }

.chart .zero-line {
  stroke: var(--text-mute);
  stroke-width: 1;
  stroke-dasharray: 1 2;
}

.chart .label {
  fill: var(--text-dim);
}

/* === Donut === */

.donut .seg {
  fill: none;
  stroke-width: 14;
}

.donut-legend {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  font-family: var(--mono);
  font-size: 11px;
}

.donut-legend .row {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 8px;
  align-items: center;
}

.donut-legend .swatch {
  width: 10px;
  height: 10px;
  border: 1px solid var(--border-2);
}

/* === Empty state === */

.empty {
  padding: 36px 12px;
  text-align: center;
  color: var(--text-mute);
  font-family: var(--mono);
  font-size: 12px;
}

/* === Cycle event row === */

.cycle-events {
  font-family: var(--mono);
  font-size: 11px;
}

.cycle-events .row {
  display: grid;
  grid-template-columns: 140px 130px 60px 1fr;
  gap: 12px;
  padding: 4px 0;
  border-bottom: 1px dotted var(--border);
}

.cycle-events .ts { color: var(--text-mute); }
.cycle-events .ev { color: var(--text); text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px; }
.cycle-events .tk { color: var(--accent); }
.cycle-events .pl { color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* === Prose (methodology, glossary) === */

.prose {
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.65;
  max-width: 820px;
}

.prose h2 {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin: 28px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.prose h2:first-of-type { margin-top: 4px; }

.prose h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin: 18px 0 6px;
}

.prose p { margin: 8px 0; color: var(--text); }
.prose p.lead { color: var(--text-dim); }
.prose ul, .prose ol { padding-left: 22px; margin: 8px 0; }
.prose li { margin: 4px 0; }

.prose code {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--panel-2);
  padding: 1px 6px;
  border: 1px solid var(--border);
  color: var(--accent);
}

.prose .rule {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 0.04em;
}

.prose .footnote {
  color: var(--text-mute);
  font-size: 12px;
  font-style: italic;
}

.prose .pipeline {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
  background: var(--panel-2);
  border: 1px solid var(--border);
  padding: 12px 16px;
  letter-spacing: 0.02em;
  white-space: pre-wrap;
}

.glossary {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 8px 16px;
  font-size: 13px;
}
.glossary dt {
  font-family: var(--mono);
  color: var(--accent);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.08em;
  padding-top: 2px;
}
.glossary dd {
  margin: 0;
  color: var(--text);
}

.disclaimer {
  margin-top: 32px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text-dim);
  font-size: 12px;
  font-family: var(--mono);
  line-height: 1.6;
}

/* === Memo-specific === */

.memo-anchors {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.memo-anchors a {
  color: var(--text-mute);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 80ms ease, border-color 80ms ease;
}

.memo-anchors a:hover {
  color: var(--accent);
  text-decoration: none;
  border-bottom-color: var(--accent-dim);
}

.panel.alarm {
  border-left: 2px solid var(--neg);
}

.panel.alarm .panel-head {
  color: var(--neg);
}

.tbl tr.thesis-row td {
  background: var(--bg);
  border-bottom: 1px solid var(--border-2);
  text-align: left;
  padding: 6px 12px 10px 12px;
  font-style: italic;
  color: var(--text-dim);
}

.tbl tr.thesis-row + tr td {
  border-top: 1px solid var(--border-2);
}

/* Anchor target highlighting (a panel scrolled-to via #s-foo) */
.panel:target {
  border-left: 2px solid var(--accent);
}

/* === Chart hover tooltip (driven by terminal-charts.js) === */

.chart-tooltip {
  position: fixed;
  background: var(--panel-2);
  border: 1px solid var(--accent);
  color: var(--text);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 6px 10px;
  pointer-events: none;
  z-index: 1000;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chart-tooltip .ct-label {
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
}

.chart-tooltip .ct-value {
  color: var(--accent);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.chart-tooltip .ct-sub {
  color: var(--text-mute);
  font-size: 10px;
}

svg.chart[data-points],
svg.spark[data-points] {
  cursor: crosshair;
}

/* Footer */

.term-footer {
  margin-top: 24px;
  padding: 12px 24px;
  border-top: 1px solid var(--border);
  color: var(--text-mute);
  font-family: var(--mono);
  font-size: 11px;
  display: flex;
  justify-content: space-between;
}