/* ==========================================================================
   Global Prime Tools — dashboard styles.

   Brand tokens are lifted from globalprime.com's own Webflow stylesheet, so the
   dashboard matches the site rather than approximating it:

     --colour-primary--500   #ade512   the lime
     --colour-secondary--100 #bebebe   secondary ink
     --colour-secondary--200 #2c2c2c   borders
     --colour-secondary--300 #1b1b1b   elevated surface
     --colour-secondary--400 #141414   surface
     --colour-secondary--500 #0f0f0f   page
     --font--headings/body   Delight
     radii                   .25 / .5 / .75 / 1 / 1.25em

   DARK IS THE DEFAULT, deliberately. Global Prime's brand has no light theme —
   every secondary step is a dark neutral — and the lime measures 12.3:1 on the
   brand dark but only 1.5:1 on white. So the dashboard ships dark like the site,
   and light mode is opt-in via the toggle.

   Light mode can't use #ade512 for anything interactive at 1.5:1, so it uses
   #577309 — the same hue darkened 50% — which measures 5.30:1 on the light
   surface. It reads as the brand lime while actually being legible.

   The lime is brand chrome only (logo, active chip, focus ring). Gains and
   losses keep the reserved status green/red, always paired with a ▲/▼ glyph and
   a signed number. Lime and the status green measure ΔE 21.6 apart under protan
   simulation, so brand accent and "up" can share a screen without being
   confused.
   ========================================================================== */

/* Delight ships two weights only — 400 and 500. Nothing here asks for more, so
   the browser never has to synthesise a faux-bold (which smears a CFF face).
   Hierarchy comes from size, case, colour and letter-spacing instead — the same
   approach the brand site takes. */
@font-face {
  font-family: Delight;
  src: url("fonts/delight-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Delight;
  src: url("fonts/delight-medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Brand */
  --brand-lime: #ade512;
  --accent: #ade512;
  --accent-ink: #0f0f0f; /* text on a lime fill — 12.8:1 */

  /* Surfaces (brand secondary scale) */
  --page: #0f0f0f;
  --surface-1: #141414;
  --surface-2: #1b1b1b;

  /* Ink */
  --text-primary: #ffffff;
  --text-secondary: #bebebe;
  --text-muted: #8a8a8a;

  /* Lines */
  --gridline: #1f1f1f;
  --baseline: #2c2c2c;
  --border: #2c2c2c;

  /* Delta + status tokens (reserved; never reused as brand or series colour) */
  --delta-up: #4ec44e;
  --delta-down: #ef5f5f;
  --status-good: #4ec44e;
  --status-warning: #fab219;
  --status-serious: #ec835a;
  --status-critical: #ef5f5f;
  --status-neutral: #8a8a8a;

  /* Brand radii */
  --radius-s: 0.5em;
  --radius-m: 0.75em;
  --radius-l: 1em;
  --radius: 0.75em;

  --shadow: none;

  --font: Delight, "Helvetica Neue", Arial, sans-serif;
  /* Delight has proportional figures only (no `tnum`; its "1" is 40% narrower
     than its "0"), which makes a 59-row price table jitter and defeats column
     comparison. Numbers therefore use the system UI stack, whose faces all
     carry tabular figures. Brand type everywhere it reads as type; aligned
     digits everywhere they read as data. */
  --font-num: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

:root[data-theme="light"] {
  color-scheme: light;

  --accent: #577309; /* brand lime darkened 50% — 5.30:1 on --surface-1 */
  --accent-ink: #ffffff;

  --page: #f7f7f4;
  --surface-1: #ffffff;
  --surface-2: #fbfbf9;

  --text-primary: #0f0f0f;
  --text-secondary: #4a4a4a;
  --text-muted: #767674;

  --gridline: #ececE6;
  --baseline: #d6d6cf;
  --border: #e2e2db;

  --delta-up: #1a7a1a;
  --delta-down: #c1272d;
  --status-good: #1a7a1a;
  --status-warning: #a06800;
  --status-serious: #b4531f;
  --status-critical: #c1272d;
  --status-neutral: #767674;

  --shadow: 0 1px 2px rgba(15, 15, 15, 0.04), 0 20px 40px -10px rgba(15, 15, 15, 0.06);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}

.wrap {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface-1);
  color: var(--text-primary);
  padding: 10px 16px;
  z-index: 20;
  border-radius: 0 0 var(--radius-s) 0;
}
.skip:focus {
  left: 0;
}

:where(a, button, input):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}

/* Delight carries no geometric symbols — ▲ ▼ ● ↑ ↓ are all absent from its
   cmap, so they fall to whatever the fallback stack provides (on some systems
   ◑ renders as "›"). The direction arrows are load-bearing: they are what stops
   gain/loss depending on colour alone, so they must not be left to chance.
   Anything carrying a symbol therefore opts into the system stack, which has
   full coverage. */
.sym,
.badge-icon,
.col-title [aria-hidden],
.sortable::after {
  font-family: var(--font-num);
}

/* ── Masthead ─────────────────────────────────────────────────────────── */

.masthead {
  border-bottom: 1px solid var(--border);
  background: var(--surface-1);
  position: sticky;
  top: 0;
  z-index: 10;
}

.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 15px;
  padding-bottom: 15px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

/* The logo is two-tone: its spiral holds the brand lime, its wordmark inherits
   currentColor, so one asset serves both themes. */
.brand-logo {
  height: 30px;
  width: auto;
  flex-shrink: 0;
  color: var(--text-primary);
}

.brand-divider {
  width: 1px;
  height: 26px;
  background: var(--border);
  flex-shrink: 0;
}

.masthead h1 {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

.brand-sub {
  margin: 0;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--text-muted);
  white-space: nowrap;
}

.masthead-meta {
  display: flex;
  align-items: center;
  gap: 14px;
}

.stamp {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-muted);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

.ghost-btn {
  font: inherit;
  font-size: 13px;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  padding: 6px 12px;
  cursor: pointer;
}
.ghost-btn:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}
.ghost-btn svg {
  width: 13px;
  height: 13px;
  vertical-align: -2px;
  margin-right: 5px;
}

/* ── Panels ───────────────────────────────────────────────────────────── */

.panel {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 24px;
  margin: 20px 0;
  box-shadow: var(--shadow);
}

.panel-head {
  margin-bottom: 18px;
}

.panel h2 {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.panel-note {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}

/* Shown when a large share of the universe has no 24h move — normal outside
   market hours, and otherwise indistinguishable from a broken pipeline. */
.closed-note {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--surface-2);
}

/* ── Hero / pulse ─────────────────────────────────────────────────────── */

.hero {
  margin-top: 24px;
}

.hero-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.hero-text {
  margin: 0 0 22px;
  font-size: 24px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: -0.014em;
  max-width: 70ch;
}

.skeleton-text {
  color: var(--text-muted);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-primary);
  white-space: nowrap;
}
.badge-icon {
  font-size: 9px;
  line-height: 1;
}
.badge-on .badge-icon {
  color: var(--status-good);
}
.badge-off .badge-icon {
  color: var(--status-critical);
}
.badge-mixed .badge-icon {
  color: var(--status-warning);
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  overflow: hidden;
}

.stat {
  background: var(--surface-1);
  padding: 14px 17px;
}

.stat dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.stat dd {
  margin: 0;
  font-size: 25px;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

/* ── Health strip ─────────────────────────────────────────────────────── */

.health {
  border: 1px solid var(--border);
  border-left: 3px solid var(--status-serious);
  background: var(--surface-1);
  border-radius: var(--radius-s);
  padding: 13px 17px;
  margin: 20px 0;
  font-size: 13px;
  color: var(--text-secondary);
}
.health strong {
  color: var(--text-primary);
  font-weight: 500;
}
.health ul {
  margin: 7px 0 0;
  padding-left: 18px;
}

/* ── Momentum ─────────────────────────────────────────────────────────── */

.momentum-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
}

.col-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 11.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.delta-up {
  color: var(--delta-up);
}
.delta-down {
  color: var(--delta-down);
}
.delta-flat {
  color: var(--text-muted);
}

.mover-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mover {
  display: grid;
  grid-template-columns: 1fr 72px auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--gridline);
}
.mover:last-child {
  border-bottom: 0;
}

.mover-name {
  min-width: 0;
}
.mover-ticker {
  font-weight: 500;
  font-size: 13.5px;
}
.mover-full {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mover-change,
.mover-price {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.mover-change {
  font-weight: 500;
  font-size: 14px;
}
.mover-price {
  font-size: 13px;
  color: var(--text-secondary);
}

/* ── Intel ────────────────────────────────────────────────────────────── */

/* 215px lets all five themes sit on one row at full width — a 4+1 wrap leaves an
   orphan card that reads as a sixth, missing theme. */
.intel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 14px;
}

/* One brand accent for every theme card, not a per-status colour. Two reasons:
   the status word is already displayed, so colour would be encoding nothing new;
   and green/red top borders sat directly above a table where green/red mean
   up/down, which invited exactly the wrong reading. */
.intel-card {
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-s);
  padding: 15px 17px 17px;
  background: var(--surface-2);
}

.intel-card h3 {
  margin: 0 0 9px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.008em;
}

.intel-status {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 10px;
}

.intel-card p {
  margin: 0 0 11px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.intel-markets {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.market-tag {
  font-size: 11.5px;
  color: var(--text-muted);
  background: var(--page);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  padding: 3px 8px;
}

/* ── Controls ─────────────────────────────────────────────────────────── */

.controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.chip {
  font: inherit;
  font-size: 12.5px;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
}
.chip:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}
.chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 500;
}

#search {
  font: inherit;
  font-size: 13px;
  padding: 7px 13px;
  min-width: 190px;
  color: var(--text-primary);
  background: var(--page);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
}
#search::placeholder {
  color: var(--text-muted);
}

/* ── Table ────────────────────────────────────────────────────────────── */

/* Wide content scrolls inside its own container so the page body never
   scrolls horizontally. */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
}

.pulse-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  min-width: 900px;
}

.pulse-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 11px 14px;
  border-bottom: 1px solid var(--baseline);
  background: var(--surface-1);
  position: sticky;
  top: 0;
  white-space: nowrap;
}

.pulse-table th.num,
.pulse-table td.num {
  text-align: right;
}
.pulse-table td.num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

.sortable {
  cursor: pointer;
  user-select: none;
}
.sortable:hover {
  color: var(--text-primary);
}
.sortable[aria-sort]::after {
  content: " ↓";
  color: var(--accent);
}
.sortable[aria-sort="ascending"]::after {
  content: " ↑";
}

.pulse-table tbody tr {
  border-bottom: 1px solid var(--gridline);
}
.pulse-table tbody tr:last-child {
  border-bottom: 0;
}
.pulse-table tbody tr:hover {
  background: var(--surface-2);
}

.pulse-table td {
  padding: 11px 14px;
  vertical-align: middle;
}

.inst-ticker {
  font-weight: 500;
  white-space: nowrap;
}
.inst-name {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 210px;
}

.class-tag {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  padding: 3px 8px;
  white-space: nowrap;
}

.narrative-col {
  min-width: 260px;
}
.narrative-cell {
  color: var(--text-secondary);
  font-size: 13px;
  max-width: 380px;
}

.spark {
  display: block;
  width: 92px;
  height: 26px;
  overflow: visible;
}
.spark-none {
  font-size: 11.5px;
  color: var(--text-muted);
}

.empty-note {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

.row-skeleton td {
  color: var(--text-muted);
  text-align: center;
  padding: 26px;
}

/* ── Tooltip ──────────────────────────────────────────────────────────── */

.tooltip {
  position: fixed;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.1s ease, transform 0.1s ease;
  background: var(--surface-2);
  color: var(--text-primary);
  border: 1px solid var(--baseline);
  border-radius: var(--radius-s);
  padding: 10px 13px;
  font-size: 12.5px;
  line-height: 1.5;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
  max-width: 280px;
}
.tooltip[data-show="true"] {
  opacity: 1;
  transform: translateY(0);
}
.tooltip dl {
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px 14px;
  margin: 0;
}
.tooltip dt {
  color: var(--text-muted);
}
.tooltip dd {
  margin: 0;
  text-align: right;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}
.tooltip .tip-title {
  font-weight: 500;
  margin: 0 0 6px;
}

/* ── Footer ───────────────────────────────────────────────────────────── */

.footer {
  margin: 32px 0 44px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-muted);
}
.footer p {
  margin: 0 0 8px;
  max-width: 90ch;
}
.footer strong {
  color: var(--text-secondary);
  font-weight: 500;
}

@media (max-width: 620px) {
  .hero-text {
    font-size: 19px;
  }
  .panel {
    padding: 18px 16px;
  }
  .stat dd {
    font-size: 21px;
  }
  .brand-sub,
  .brand-divider {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}