/* PAIOS Dashboard Design System v1.0 (Wave 8, 2026-07-29)
   ============================================================
   The one real, shared visual language every PAIOS dashboard draws
   from. Built because none existed: Career's stylesheet was a literal
   copy-paste of Investment's, down to an unrenamed header comment, and
   both files mixed this platform's own rem-based --space-* tokens with
   raw pixel values (13.5px, 13px, 9.5px, 10px) migrated verbatim from
   an external codebase's inline <style> block, never reconciled.

   ARCHITECTURE (no build tool, per this platform's standing constraint —
   Runtime is bash-only, and dashboards are plain static Cloudflare Pages
   sites):
     1. Each dashboard links THIS file first.
     2. Each dashboard's own assets/styles.css links second, and does
        exactly two things: (a) override the IDENTITY tokens below
        (--accent, --font-display if different, information-density
        knobs) to give itself a distinct visual identity, and
        (b) add any dashboard-specific component rules this file
        doesn't cover. It must never redefine STRUCTURE tokens
        (--space-*, --text-*, --radius-*) or duplicate a component rule
        already defined here — that duplication is exactly the problem
        this file exists to end.

   FONT DECISION (resolves the JetBrains Mono bug — Objective 2):
   No stylesheet in this repository, and no other file in this platform,
   ever actually loads a web font (checked directly: zero <link> or
   @font-face for any Google Fonts / CDN font host anywhere in this
   repo — the brief's assumption of an "existing CDN-import precedent"
   did not hold up). Rather than add this dashboard's first-ever
   external network dependency for a cosmetic font swap, the deliberate
   choice is a REAL system-monospace stack (--font-mono below) that
   every major OS already ships and every browser already has loaded —
   ticker symbols and data get a genuine, currently-rendering monospace
   typeface instead of a silent fallback to whatever generic monospace
   the browser picks. This is a considered choice, not an oversight:
   stated here plainly so a future session doesn't "fix" it back into
   the same silent-fallback bug by adding 'JetBrains Mono' again without
   also adding the font-loading it requires. */

:root {
  /* ---- STRUCTURE (do not override per-dashboard) ---- */

  /* Type scale — resolves the prior 0.95rem / 13.5px / 13px / 9.5px /
     10px / 0.75rem / 0.9rem / 0.85rem / 0.8rem / 0.7rem sprawl into one
     deliberate, limited rem-based scale. Every existing pixel value in
     both dashboards' CSS maps onto the nearest step below — nothing
     invented, just resolved. */
  --text-2xs: 0.6875rem;  /* 11px  — micro-labels: highlight-type, badges */
  --text-xs:  0.75rem;    /* 12px  — captions, footnotes, provenance text */
  --text-sm:  0.8125rem;  /* 13px  — dense table cells, secondary body */
  --text-base: 0.875rem;  /* 14px  — default widget body text */
  --text-md:  0.95rem;    /* 15.2px — widget headers, tab labels */
  --text-lg:  1.125rem;   /* 18px  — section-level emphasis */
  --text-xl:  1.4rem;     /* 22.4px — page title (h1) */

  /* Spacing — the existing --space-1..4 scale was real but only ever
     applied to ~half the file; extended with a --space-0 for the
     tightest gaps (badge padding, row gaps) that were previously raw
     2px/3px/6px values, and now actually used everywhere. */
  --space-0: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Motion — real, deliberate interactive-state timing. Nothing here
     animates ambiently; every transition is a direct response to a
     real user action (hover, focus, click, expand). */
  --transition-fast: 120ms ease;
  --transition: 180ms ease;

  --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--accent);

  /* ---- IDENTITY (each dashboard overrides these) ---- */
  /* Defaults below are neutral placeholders; every real dashboard
     overrides --accent (and may override --font-display / density
     knobs) in its own styles.css, loaded immediately after this file. */
  --font-display: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", "Liberation Mono", monospace;
  --accent: #5b8cff;
  --density: comfortable; /* informational only — no dashboard reads this via CSS, documents the intended feel */
}

* { box-sizing: border-box; }

*:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-display);
  line-height: 1.4;
}

/* ---- Header ---- */
.app-header {
  padding: var(--space-4);
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  border-bottom: 1px solid var(--color-panel-border);
  flex-wrap: wrap;
}
.app-header h1 { margin: 0; font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.01em; }
.header-summary { color: var(--color-text-dim); font-size: var(--text-base); font-variant-numeric: tabular-nums; }
.header-summary .neg { color: var(--color-loss); }
.header-summary .pos { color: var(--color-gain); }
.header-summary .stale { color: var(--color-stale); }

/* ---- Tabs (real hover + focus + active states) ---- */
.tabbar {
  display: flex;
  gap: var(--space-1);
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--color-panel-border);
  max-width: 1200px;
  margin: 0 auto;
}
.tab-btn {
  background: none;
  border: none;
  color: var(--color-text-dim);
  font: inherit;
  font-size: var(--text-md);
  padding: var(--space-3) var(--space-3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.tab-btn:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-text) 6%, transparent); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.tab-btn:active { transform: translateY(1px); }
.tab-btn.active { color: var(--color-text); border-bottom-color: var(--accent); font-weight: 600; }

.tab-panel {
  display: none;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  padding: var(--space-4);
  max-width: 1200px;
  margin: 0 auto;
}
.tab-panel.active { display: grid; }

@media (max-width: 900px) {
  .tab-panel { grid-template-columns: 1fr; }
}

.dashboard-grid {
  display: grid;
  grid-template-areas: "top" "middle" "bottom";
  gap: var(--space-4);
  padding: var(--space-4);
  max-width: 1200px;
  margin: 0 auto;
}
.zone-top { grid-area: top; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.zone-middle { grid-area: middle; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.zone-bottom { grid-area: bottom; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
@media (max-width: 900px) {
  .zone-top, .zone-middle, .zone-bottom { grid-template-columns: 1fr; }
}

/* ---- Widgets (real hover state on interactive rows) ---- */
.widget {
  background: var(--color-panel);
  border: 1px solid var(--color-panel-border);
  border-radius: var(--radius);
  padding: var(--space-3);
  transition: border-color var(--transition-fast);
}
.widget h2 {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--text-md);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-dim);
}
.widget h3 { font-size: var(--text-sm); margin: 0.75rem 0 0.2rem; color: var(--color-text-dim); }

.widget table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.widget th, .widget td { text-align: left; padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--color-panel-border); }
.widget th { color: var(--color-text-dim); font-weight: 500; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.03em; }
.widget tbody tr { transition: background var(--transition-fast); }
.widget tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

.pnl-pos { color: var(--color-gain); }
.pnl-neg { color: var(--color-loss); }

.badge { display: inline-block; padding: var(--space-0) var(--space-2); border-radius: var(--radius-pill); font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.02em; }
.badge-stale { background: rgba(232,179,57,0.15); color: var(--color-stale); }
.badge-fresh { background: rgba(62,207,142,0.15); color: var(--color-fresh); }
.badge-alert { background: rgba(239,90,90,0.15); color: var(--color-loss); }

.alert-row { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-1) 0; }

.allocation-bar-row { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); font-size: var(--text-sm); }
.allocation-bar-track { flex: 1; height: 8px; background: var(--color-panel-border); border-radius: var(--radius-sm); overflow: hidden; }
.allocation-bar-fill { height: 100%; background: var(--accent); transition: width var(--transition); }
.allocation-label { width: 160px; flex-shrink: 0; color: var(--color-text-dim); }
.allocation-pct { width: 48px; text-align: right; flex-shrink: 0; }

.app-footer {
  padding: var(--space-4);
  color: var(--color-text-dim);
  font-size: var(--text-xs);
  text-align: center;
  border-top: 1px solid var(--color-panel-border);
}
.app-footer code { background: var(--color-panel); padding: 1px 5px; border-radius: var(--radius-sm); font-family: var(--font-mono); }

.error-banner {
  background: rgba(239,90,90,0.15);
  border: 1px solid var(--color-loss);
  color: var(--color-loss);
  padding: var(--space-3);
  border-radius: var(--radius);
  margin: var(--space-4);
}

/* ---- IOS-fragment classes, reconciled onto the scale above ----
   Previously "migrated verbatim" at 13.5px/13px/10px/9.5px, unrelated
   to this file's --text-* scale. Same visual sizes, now real tokens. */
.narrative-card { background: var(--color-panel); border: 1px solid var(--color-panel-border); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2); }
.narrative-card .theme { font-weight: 600; font-size: var(--text-sm); margin-bottom: var(--space-1); }
.narrative-card .detail { font-size: var(--text-sm); color: var(--color-text-dim); line-height: 1.55; }
.sentiment-tag { font-size: var(--text-2xs); font-family: var(--font-mono); padding: 2px var(--space-2); border-radius: var(--radius-pill); letter-spacing: 0.04em; margin-left: var(--space-2); vertical-align: middle; background: var(--color-panel-border); }
.sentiment-Bullish { color: var(--color-gain); }
.sentiment-Bearish { color: var(--color-loss); }
.sentiment-Mixed { color: var(--color-stale); }
.highlight-row { display: flex; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-panel-border); }
.highlight-row:last-child { border-bottom: none; }
.highlight-ticker { font-family: var(--font-mono); font-weight: 700; min-width: 56px; }
.highlight-type { font-size: var(--text-2xs); font-family: var(--font-mono); color: var(--color-text-dim); text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 3px; }
.highlight-note { font-size: var(--text-sm); color: var(--color-text-dim); line-height: 1.5; }
.empty-state { color: var(--color-text-dim); font-size: var(--text-sm); font-family: var(--font-mono); padding: var(--space-2) 0; }

/* ---- Investor Cockpit reflow classes (Wave 7), reconciled here so
   both dashboards share one definition instead of Investment keeping
   a private copy. ---- */
.cockpit-top, .cockpit-cluster, .peripheral-strip { grid-column: 1 / -1; }
.cockpit-top { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.widget-risk { border-color: var(--color-loss); }
.cockpit-cluster { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 900px) {
  .cockpit-top, .cockpit-cluster { grid-template-columns: 1fr; }
}

.peripheral-strip {
  background: var(--color-panel);
  border: 1px solid var(--color-panel-border);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-dim);
  transition: border-color var(--transition-fast);
}
.peripheral-strip:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--color-panel-border)); }
.peripheral-strip summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  flex-wrap: wrap;
  border-radius: var(--radius-sm);
}
.peripheral-strip summary::-webkit-details-marker { display: none; }
.peripheral-strip summary:hover .peripheral-expand { color: var(--color-text); }
.peripheral-sep { opacity: 0.5; }
.peripheral-expand { margin-left: auto; font-size: var(--text-xs); transition: color var(--transition-fast); }
.peripheral-detail {
  margin-top: var(--space-3);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
@media (max-width: 900px) {
  .peripheral-detail { grid-template-columns: 1fr; }
}