/* ═══════════════════════════════════════════════════════════════════
   21 FRACTALS — PLATFORM STYLESHEET
   src/main/resources/web/css/platform.css  →  served at /static/css/platform.css

   Single source of truth for all platform styles.
   Handler Kotlin files contain zero <style> blocks.

   Z-SCORE COLOR SYSTEM (used in Asset Performance Tracker)
   Colors are applied by retStyle() and tileColors() in AssetPriceTrackerHandler.kt.
   Both functions use identical thresholds — same z-score → same color family member
   whether rendered as text (table/barometer) or filled background (heat map).

   GREEN (positive, vol-adjusted outperformance):
     z ≥ 2.5σ  #22c55e  bright green    — rare event (~1% of days)
     z ≥ 2.0σ  #4ade80  medium green
     z ≥ 1.5σ  #86efac  soft green
     z ≥ 1.0σ  #6ee7b7  teal green
     z ≥ 0.5σ  #a7f3d0  pale teal
   NEUTRAL:
     |z| < 0.5σ  #4b5563 muted gray     — within normal noise, visually silent
   RED (negative, vol-adjusted underperformance):
     z > -1.0σ  #fca5a5  pale red
     z > -1.5σ  #f87171  soft red
     z > -2.0σ  #ef4444  red
     z > -2.5σ  #dc2626  deep red
     else        #b91c1c  hard red       — rare event

   SECTIONS
   01. Google Fonts import
   02. Reset & base
   03. Layout containers
   04. Navigation
   05. Buttons
   06. Type + status badges
   07. Toggle switch
   08. Forms
   09. Admin tables (global default — separate + sticky top:38px)
   10. Icon action buttons
   11. Arrow reorder buttons
   12. Toasts
   13. Scrollbar
   14. Dense full-width layout  (body.layout-dense — tracker, calendar)
   15. Category filter dropdown (tracker + calendar)
   16. Asset Performance Tracker table  (body.page-tracker scope)
   17. Loading / initialising state  (.loading-state — shared, no body class)
   18. Calendar page
   19. Desk Performance dashboard  (body.page-perf)
   20. Benchmark admin extras
   21. Book Snapshot admin extras
   22. Design System reference page
   23. Login page  (body.page-login)
   24. Footer (shared)
   ...
   31. Convex Carry dashboard (body.page-carry)
   32. Search terminal overlay
   33. Landing page (body.page-landing)
   34. Structural hierarchy — semantic structural roles (.sh-*)
   ═══════════════════════════════════════════════════════════════════ */

/* ── 01. Google Fonts ─────────────────────────────────────────────── */
/* Fonts are loaded via <link> tags in fontLinks() (HtmlComponents.kt).
   The <link> approach is faster than @import — the browser discovers fonts
   early in the HTML parse and fetches them in parallel with other resources.
   Do NOT add an @import here — it creates a waterfall (CSS blocks → discovers
   @import → second request) and causes FOUT flicker on first load. */

/* ── Surface palette — CSS custom properties ─────────────────────────
 * Single source of truth for all surface and border colors.
 * Every background, border, and surface reference in this file uses
 * var(--name) instead of a raw hex. To change the palette, edit here only.
 * Handler inline styles also reference these variables.
 * ─────────────────────────────────────────────────────────────────── */
:root {
  --surface-body:    #0c0c0c;   /* Page background */
  --surface-deep:    #0a0a0a;   /* Category rows — darker than body */
  --surface-nav:     #111111;   /* Top nav, table header sticky bg, label pill bg */
  --surface-panel:   #141414;   /* View switcher, dropdown panels, modals */
  --surface-login:   #151515;   /* Login card */
  --surface-card:    #161616;   /* Form cards, metric cards, chart cards, tbl-wrap, hover bg */
  --surface-input:   #1a1a1a;   /* Form input backgrounds — between card and border */
  --surface-hover:   #1e1e1e;   /* Table row hover, filter item hover */
  --border-subtle:   #1c1c1c;   /* Dense table row separators — tracker, list tables */
  --border:          #232323;   /* All standard borders, dividers, scrollbar thumb */
  --border-nav:      #222222;   /* Nav border-bottom, login card border */
  --border-login:    #2e2e2e;   /* Login field border */
  --border-muted:    #3a3a3a;   /* Input borders, disabled states, dim dividers */

  /* Accent — institutional gold. Change these four values to re-theme the entire platform. */
  --accent:          #C19A5B;   /* Primary — buttons, titles, active states, icons */
  --accent-hover:    #A07D42;   /* Button hover, interactive darken */
  --accent-deep:     #7A5E2D;   /* Toggle tracks, edit borders, deep accents */
  --accent-light:    #D4B478;   /* Hover highlights on dark backgrounds */

  /* Display font — serif for brand marks and page headlines.
     Change this value to re-theme the entire display typography. */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;

  /* Structural text hierarchy — titles, headers, labels, utilities.
     Change these four values to re-grade the entire structural hierarchy. */
  --text-headline: #f1f5f9;   /* S1 — page title, one per page */
  --text-section:  #d1d5db;   /* S2 — section titles, modal titles, content divisions */
  --text-group:    #9ca3af;   /* S3 — category rows, group labels, structural organizers */
  --text-utility:  #6b7280;   /* S4 — timestamps, arrow buttons, minor affordances */

  /* Volatility palette — blue/slate family.
     When you see these colors, your brain reads "volatility."
     Distinct from gold (price), green/red (returns), gray (technical overlays). */
  --vol-primary:   #7c9fc4;   /* 30D — clear institutional blue, primary vol signal */
  --vol-secondary: #5a80a3;   /* 90D — medium slate blue, supporting context */
  --vol-tertiary:  #3d6585;   /* 1Y (252D) — dim steel blue, long-term reference */
  --corr-primary:  #5eead4;   /* Correlation — teal/cyan, distinct from vol (blue) and returns (green/red) */
  --volume-line:   #e2c87a;   /* Volume/liquidity — pale yellow, distinct from price gold and amber accent */

  /* Chart height tiers — T-shirt sizes for all SVG chart containers.
     CSS is the single source of truth; JS reads el.offsetHeight for viewBox.
     Three tiers cover all current and foreseeable chart contexts.
     Exception: if a chart genuinely needs a custom height, inline style works. */
  --chart-height-sm: 180px;   /* Compact — sparklines, tight grid cells */
  --chart-height-md: 260px;   /* Standard — the default for all charts */
  --chart-height-lg: 340px;   /* Hero — detailed analysis, full-width features */
}

/* Chart height utility classes — apply to chart container divs.
   JS reads el.offsetHeight for the SVG viewBox — no hardcoded heights needed.
   Default: .chart-h-md. Use .chart-h-sm for compact, .chart-h-lg for hero. */
.chart-h-sm { height: var(--chart-height-sm) }
.chart-h-md { height: var(--chart-height-md) }
.chart-h-lg { height: var(--chart-height-lg) }

/* ── 02. Reset & base ─────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box }
body {
  background: var(--surface-body);
  color: #e5e7eb;
  font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ── 03. Layout containers ────────────────────────────────────────── */
.page       { max-width: 1200px; margin: 0 auto; padding: 24px 22px; flex: 1; width: 100% }
.page-wide  { max-width: 1280px }

/* Admin list pages — sticky header keeps title + CTA buttons accessible while scrolling */
.page-wide > .hdr {
  position: sticky;
  top: 58px;                           /* below nav (38px) + regime strip (20px) */
  z-index: 15;
  background: var(--surface-body);
  padding: 24px 0 0;                   /* replaces .page top padding above the header */
  margin-top: -24px;                   /* pull up into .page's top padding so there's no gap */
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
  padding-bottom: 12px;
}
.page-wide > .hdr ~ * tr[id] { scroll-margin-top: 120px }

.hdr         { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; flex-wrap: wrap }
.hdr-title   { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--text-headline); letter-spacing: .01em }
.hdr-info    { display: flex; flex-direction: column; gap: 3px }
.hdr-meta    { font-size: 13px; color: #6b7280 }
.hdr-time    { color: var(--text-utility); font-weight: 600 }
.hdr-tip     { display: inline-block; width: 15px; height: 15px; line-height: 15px; text-align: center;
               font-size: 10px; font-weight: 700; color: var(--text-utility); border: 1px solid var(--border-muted);
               border-radius: 50%; cursor: help; vertical-align: middle; margin-left: 2px; position: relative }
.hdr-tip:hover::after {
  content: attr(data-tip);
  position: absolute; left: 50%; top: 22px; transform: translateX(-50%);
  background: var(--border); color: var(--text-group); font-size: 11px; font-weight: 400;
  padding: 8px 12px; border-radius: 6px; white-space: normal; width: 280px; z-index: 100;
  border: 1px solid var(--border-muted); pointer-events: none;
  text-transform: none; letter-spacing: normal; text-align: left; line-height: 1.5;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.hdr-actions { margin-left: auto; display: flex; gap: 10px; align-items: center }

/* Refresh pulse — "Updated" line briefly flashes bright then fades back to gray.
   Signals fresh data arrived without drawing borders or boxes. */
@keyframes refresh-pulse {
  0%   { color: #f1f5f9 }
  15%  { color: var(--accent) }
  100% { color: #6b7280 }
}
.ticker-changed { animation: refresh-pulse 3s ease-out forwards }
.mono        { font-family: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums }

/* ── 04. Navigation ───────────────────────────────────────────────── */
.top-nav {
  background: var(--surface-nav);
  border-bottom: 1px solid var(--border-nav);
  padding: 0 22px;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 24px;
  position: sticky;
  top: 0;
  z-index: 100;
}
.top-nav-brand  { font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: .3px; white-space: nowrap }
.top-nav-brand-21 { color: var(--accent) }
.top-nav-brand-f  { color: #4b5563 }
.top-nav-links  { display: flex; gap: 20px; align-items: center; flex: 1 }

.nav-link       { color: #6b7280; text-decoration: none; font-size: 12px; font-weight: 500; white-space: nowrap; transition: color .15s }
.nav-link:hover,
.nav-link.active { color: var(--accent) }

/* Admin dropdown — pure CSS hover, no JS event handlers */
.admin-nav        { position: relative }
.admin-nav-trigger {
  color: #6b7280;
  font-size: 12px;
  font-weight: 500;
  cursor: default;
  white-space: nowrap;
  transition: color .15s;
}
.admin-nav-trigger.active,
.admin-nav:hover .admin-nav-trigger { color: var(--accent) }

.admin-dd { display: none; position: absolute; top: 100%; left: -8px; padding-top: 4px; z-index: 200 }
.admin-nav:hover .admin-dd { display: block }

.admin-dd-inner {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 0;
  min-width: 160px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.admin-dd-link       { display: block; padding: 6px 14px; color: #e5e7eb; text-decoration: none; font-size: 12px; font-weight: 500; white-space: nowrap }
.admin-dd-link:hover { background: var(--border) }
.admin-dd-link.active { color: var(--accent) }
.admin-dd-sep        { height: 1px; background: var(--border); margin: 4px 10px }

/* Market clock — ambient global market status strip */
.mkt-clock { display: flex; align-items: center; gap: 10px; margin-left: auto; padding-right: 12px; border-right: 1px solid var(--border-nav); margin-right: 0 }

/* Individual market unit — code + dot, with tooltip on hover */
.mkt-market { position: relative; display: flex; align-items: center; gap: 4px; cursor: default }
.mkt-code { font-size: 11px; font-weight: 600; color: #4b5563; font-family: 'IBM Plex Mono', monospace; letter-spacing: .3px; transition: color .3s }
.mkt-code--active { color: #c9d1d9 }
.mkt-code--amber  { color: var(--accent) }

.mkt-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; transition: background .3s }
.mkt-dot--green { background: #22c55e }
.mkt-dot--gray  { background: #4b5563 }
.mkt-dot--amber { background: var(--accent) }
.mkt-dot--pulse { animation: mkt-pulse 2s ease-in-out infinite }
@keyframes mkt-pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* Tooltip — appears on hover over each market unit */
.mkt-tip {
  display: none; position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  background: var(--surface-card); border: 1px solid var(--border); border-radius: 6px;
  padding: 8px 12px; white-space: nowrap; z-index: 300;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  font-size: 11px; line-height: 1.5;
}
.mkt-market:hover .mkt-tip { display: block }
.mkt-tip-name  { color: #e5e7eb; font-weight: 600 }
.mkt-tip-state { color: #6b7280; font-weight: 500 }
.mkt-tip-state--open  { color: #4ade80 }
.mkt-tip-state--amber { color: var(--accent) }
.mkt-tip-time  { color: #4b5563; font-family: 'IBM Plex Mono', monospace; font-size: 10px }

/* ET reference time */
.mkt-et { font-size: 11px; font-weight: 500; color: #4b5563; font-family: 'IBM Plex Mono', monospace; white-space: nowrap }

.top-nav-logout {
  color: #4b5563;
  text-decoration: none;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  padding: 4px 10px;
  border: 1px solid var(--border-nav);
  border-radius: 5px;
  transition: color .15s, border-color .15s;
}
.top-nav-logout:hover { color: #94a3b8; border-color: var(--border-muted) }

/* ── 05. Buttons ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: all .15s;
  color: #e5e7eb;
}

/* Amber — primary CTA (confirmed correct: bright amber bg, near-black text) */
.btn-amber         { background: var(--accent); color: var(--surface-card); border: 1px solid var(--accent) }
.btn-amber:hover   { background: var(--accent-hover); color: var(--surface-card); border-color: var(--accent-hover) }

/* btn-primary = alias for btn-amber — blue removed from platform */
.btn-primary       { background: var(--accent); color: var(--surface-card); border: 1px solid var(--accent) }
.btn-primary:hover { background: var(--accent-hover); color: var(--surface-card); border-color: var(--accent-hover) }

.btn-ghost         { background: transparent; color: #9ca3af; border: 1px solid var(--border-muted) }
.btn-ghost:hover   { background: var(--border); color: #e5e7eb }

.btn-nav           { background: transparent; color: #64748b; border: 1px solid #334155 }
.btn-nav:hover     { background: #1e293b; color: #94a3b8; border-color: #475569 }

.btn-danger        { background: transparent; color: #f87171; border: 1px solid #7f1d1d }
.btn-danger:hover  { background: #7f1d1d; color: #fecaca }

.btn-success       { background: transparent; color: #6ee7b7; border: 1px solid #064e3b }
.btn-success:hover { background: #064e3b; color: #a7f3d0 }

.btn-sm { padding: 4px 10px; font-size: 12px }

/* ── 06. Type + status badges ─────────────────────────────────────── */
/* Institutional palette — ~55% saturation, dark bg + brightened hue text */
.badge          { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; letter-spacing: .03em }
.badge-index    { background: #162538; color: #6aaad6 }
.badge-etf      { background: #1c1a3a; color: #8c84cc }
.badge-single   { background: #262010; color: #c8a852 }
.badge-commodity{ background: #2a1808; color: #c48c58 }
.badge-bond     { background: #0f2820; color: #5ab88e }
.badge-fx       { background: #0e2230; color: #52aac4 }

/* Macro regime badges — ≈55% saturation, same institutional palette as type badges */
.badge-regime-riskon       { background: #0f2820; color: #5ab88e }
.badge-regime-riskoff      { background: #2a1414; color: #c47070 }
.badge-regime-stagflation  { background: #2a2010; color: #c4a058 }
.badge-regime-transitional { background: #1a1a1a; color: var(--text-utility) }

/* Momentum rank indicator — inline with asset name on the tracker */

/* Ticker external-link icon — amber, platform-wide ───────────────── */
/* Reusable ticker element — white bold mono, consistent across all pages. */
.tkr { font-family: 'IBM Plex Mono', monospace; font-weight: 700; color: #f1f5f9; letter-spacing: .03em }

/* Marquee dot — appears before key tickers on the dashboard to draw attention.   */
/* Amber on dark backgrounds, dark on colored heat map tiles.                     */
.marquee-dot { color: var(--accent); font-size: 10px; vertical-align: middle; margin-left: 3px }
body.page-tracker .hm-tile .marquee-dot { color: #0f172a }

/* Opportunity dots — green signal dots after asset name, graduated: 1 dot = Emerging, 2 = Setup */
.opp-dots      { color: #22c55e; font-size: 8px; vertical-align: middle; margin-left: 3px }
.opp-dots-dark { color: #052e16; font-size: 8px; vertical-align: middle; margin-left: 3px }

/* Appears after every ticker symbol (table, heat map, barometer, admin, sleeve). */
/* Icon is the navigation action; ticker text keeps its parent-scoped color.      */
.ticker-ext-icon {
  display: inline-flex;
  align-items: center;
  color: var(--accent);
  text-decoration: none;
  margin-left: 3px;
  opacity: 0.5;
  vertical-align: middle;
  line-height: 1;
  transition: opacity .15s, color .15s;
}
.ticker-ext-icon:hover { opacity: 1; color: var(--accent-light); }

/* ── 07. Toggle switch ────────────────────────────────────────────── */
.toggle-wrap   { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #6b7280 }
.toggle-switch { position: relative; display: inline-block; width: 32px; height: 18px }
.toggle-switch input { opacity: 0; width: 0; height: 0 }
.toggle-slider {
  position: absolute; cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--border-muted); border-radius: 18px; transition: .2s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  height: 14px; width: 14px; left: 2px; bottom: 2px;
  background: #6b7280; border-radius: 50%; transition: .2s;
}
.toggle-switch input:checked + .toggle-slider              { background: var(--accent-deep) }
.toggle-switch input:checked + .toggle-slider::before     { transform: translateX(14px); background: #fff }

/* ── 08. Forms ────────────────────────────────────────────────────── */
.form-card      { background: var(--surface-card); border: 1px solid var(--border); border-radius: 8px; padding: 20px; margin-bottom: 20px }
.form-card th   { background: transparent; position: static; z-index: auto; border-bottom: 1px solid var(--border-subtle) }
.form-card-edit { border-color: var(--accent-deep) }   /* edit state — deep amber, was blue */
.form-title     { font-size: 15px; font-weight: 600; color: #f1f5f9; margin-bottom: 14px }
.form-grid      { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px }
.form-group     { display: flex; flex-direction: column; gap: 4px }
.form-label     { font-size: 12px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: .05em }
.form-input {
  background: var(--surface-input);
  border: 1px solid var(--border-muted);
  border-radius: 5px;
  padding: 7px 10px;
  color: #e5e7eb;
  font-size: 14px;
  font-family: 'IBM Plex Sans', sans-serif;
  outline: none;
  transition: border-color .15s;
  width: 100%;
}
.form-input:focus          { border-color: var(--accent) }   /* AMBER — was blue #2563eb */
.form-input[readonly]      { color: #6b7280; cursor: not-allowed }
/* Kill number input spinners — distracting, not helpful */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0 }
input[type='number'] { -moz-appearance: textfield }
select.form-input {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}
textarea.form-input { min-height: 60px; resize: vertical; font-family: 'IBM Plex Sans', sans-serif }
.form-actions   { display: flex; gap: 8px; margin-top: 14px }

/* ── 08b. Custom Date Picker ─────────────────────────────────────── */
.dp-wrap { position: relative; display: inline-block; width: 100% }

/* Trigger input — calendar icon on right */
.dp-trigger {
  cursor: pointer;
  padding-right: 34px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239ca3af' stroke-width='1.5' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
}
.dp-trigger:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23C19A5B' stroke-width='1.5' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
}
.dp-trigger::placeholder { color: #4b5563 }
.dp-trigger.dp-has-value { color: #e5e7eb }

/* Calendar dropdown */
.dp-cal {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 300;
  width: 260px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,.6);
  padding: 12px;
  font-family: 'IBM Plex Sans', sans-serif;
}
.dp-cal.dp-open { display: block }

/* Header: month label + arrows */
.dp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.dp-month-label {
  font-size: 14px;
  font-weight: 600;
  color: #e5e7eb;
}
.dp-nav { display: flex; gap: 2px }
.dp-arrow {
  background: none;
  border: 1px solid var(--border-muted);
  color: #9ca3af;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
.dp-arrow:hover { color: #e5e7eb; border-color: var(--accent) }

/* Day grid — 7 columns */
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center }

/* Day-of-week headers */
.dp-dow span {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  padding: 4px 0;
  text-transform: uppercase;
}

/* Day cells */
.dp-day {
  font-size: 13px;
  color: #c9d1d9;
  padding: 6px 0;
  border-radius: 5px;
  cursor: pointer;
  transition: background .1s, color .1s;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
}
.dp-day:hover { background: var(--surface-hover); color: #f1f5f9 }
.dp-day.dp-other { color: #3a3a3a; cursor: default }
.dp-day.dp-other:hover { background: none; color: #3a3a3a }
.dp-day.dp-today { color: var(--accent); font-weight: 700 }
.dp-day.dp-today:hover { background: var(--surface-hover) }
.dp-day.dp-selected { background: var(--accent); color: var(--surface-card); font-weight: 700 }
.dp-day.dp-selected:hover { background: var(--accent-hover) }
.dp-day.dp-selected.dp-today { background: var(--accent); color: var(--surface-card) }

/* Footer: Clear / Today */
.dp-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.dp-footer-btn {
  background: none;
  border: none;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color .15s;
  font-family: 'IBM Plex Sans', sans-serif;
}
.dp-clear { color: #6b7280 }
.dp-clear:hover { color: #9ca3af }
.dp-today-btn { color: var(--accent) }
.dp-today-btn:hover { color: var(--accent-light) }

/* Hide native date inputs when custom picker is active */
.dp-wrap input[type=hidden] { display: none }

/* ── 09. Admin tables ─────────────────────────────────────────────── */
/* border-collapse:separate so th top:38px sticky works correctly */
/* Subtle Panel — card-system surface (var(--surface-card)), thin border, rounded corners.
   Wraps all listing tables for consistent elevation above the page background. */
.tbl-wrap {
  background: var(--surface-card); border: 1px solid var(--border); border-radius: 8px;
  padding: 0; overflow: hidden; margin-bottom: 16px;
}
/* Override sticky inside tbl-wrap: overflow:hidden breaks sticky positioning,
   which kills z-index and lets data rows bleed through the header.
   Static position + panel-matching background is the correct fix. */
/* Override sticky inside tbl-wrap: overflow:hidden breaks sticky positioning,
   which kills z-index and lets data rows bleed through the header.
   Static position + panel-matching background is the correct fix. */
.tbl-wrap th,
.tbl-wrap .sleeve-table th,
.tbl-wrap .thesis-table th,
.tbl-wrap .list-tbl thead th { background: var(--surface-card); position: static; z-index: auto }
.tbl-wrap tr:hover td { background: var(--surface-hover) }
table { width: 100%; border-collapse: separate; border-spacing: 0 }
th {
  text-align: left;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 58px;           /* nav (38px) + regime strip (20px) — header stays below both */
  background: var(--surface-body);
  z-index: 10;
}
td {
  padding: 4px 10px;
  border-bottom: 1px solid var(--surface-card);
  font-size: 14px;
  white-space: nowrap;
  vertical-align: top;
}
tr:hover td        { background: var(--surface-card) }
tr[id]             { scroll-margin-top: 60px }
.inactive td       { opacity: 0.4 }
.actions-cell      { display: flex; gap: 4px; align-items: center }

/* ── 10. Icon action buttons ──────────────────────────────────────── */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border-muted);
  background: none;
  cursor: pointer;
  color: var(--accent);
  transition: all .15s;
  text-decoration: none;
  flex-shrink: 0;
}
.icon-btn:hover   { background: var(--surface-card) }
.ib-edit:hover    { color: #93c5fd; border-color: #1e40af }
.ib-on:hover      { color: var(--accent-light); border-color: #78350f }
.ib-off:hover     { color: #4ade80; border-color: #14532d }
.ib-del:hover     { color: #f87171; border-color: #7f1d1d }

/* ── 11. Arrow reorder buttons ────────────────────────────────────── */
.arrow-btn          { background: none; border: none; color: var(--text-utility); cursor: pointer; padding: 2px 4px; font-size: 12px; line-height: 1; border-radius: 3px; transition: all .15s; opacity: .7 }
.arrow-btn:hover    { color: #e5e7eb; background: var(--surface-hover); opacity: 1 }
.arrow-btn:disabled { color: var(--border); cursor: default; background: none; opacity: .3 }
.arrow-col  { width: 28px; text-align: center }
.cat-arrows { display: inline-flex; gap: 2px; margin-left: 8px }
.cat-row td {
  padding: 8px 10px 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-group);
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--border);
  background: var(--surface-deep);
}

/* ── 12. Toasts ───────────────────────────────────────────────────── */
/* Fixed top-right — never in page flow, no layout shift on dismiss */
.toast {
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  display: inline-block;
  position: fixed;
  top: 20px; right: 22px;
  z-index: 500;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.toast-ok  { background: #064e3b; color: #6ee7b7 }
.toast-err { background: #7f1d1d; color: #fca5a5 }

/* ── 13. Scrollbar ────────────────────────────────────────────────── */
::-webkit-scrollbar        { width: 8px; height: 8px }
::-webkit-scrollbar-track  { background: transparent }
::-webkit-scrollbar-thumb  { background: var(--border); border-radius: 4px; border: 2px solid transparent; background-clip: padding-box }
::-webkit-scrollbar-thumb:hover { background: var(--border-muted); border: 2px solid transparent; background-clip: padding-box }
::-webkit-scrollbar-corner { background: transparent }
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent }

/* ── 14. Dense full-width layout ──────────────────────────────────── */
/* Applied to tracker page: full-width, smaller base text */
body.layout-dense              { font-size: 13px }
body.layout-dense .page        { max-width: none; padding: 18px 22px }
body.layout-dense .hdr         { margin-bottom: 14px }
/* body.layout-dense .hdr-title — removed: inherits 18px serif from base .hdr-title */

/* ── 15. Category filter dropdown ─────────────────────────────────── */
/* Shared between tracker and calendar */
.filter-wrap        { position: relative }
.filter-btn {
  background: transparent;
  border: 1px solid var(--border-muted);
  color: #9ca3af;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-family: inherit;
  font-weight: 600;
}
.filter-btn:hover                      { background: var(--border); color: #e5e7eb }
.filter-btn:disabled                   { opacity: 0.35; cursor: not-allowed; pointer-events: none }
/* Amber border + text signals an active filter (subset selected, not "All") */
.filter-btn.filter-active              { color: var(--accent); border-color: var(--accent-deep) }
.filter-btn .arrow         { font-size: 9px; transition: transform .15s }
.filter-btn.open .arrow    { transform: rotate(180deg) }
.filter-panel {
  position: absolute;
  right: 0; top: calc(100% + 4px);
  z-index: 20;
  background: var(--surface-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 4px;
  min-width: 190px;
  display: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.6);
}
.filter-panel.open              { display: block }
.filter-item                    { display: flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: pointer; border-radius: 4px; color: #cbd5e1; font-size: 12px; user-select: none }
.filter-item:hover              { background: var(--surface-hover) }
.filter-item input[type=checkbox] { accent-color: var(--accent); width: 14px; height: 14px; cursor: pointer; flex-shrink: 0 }
.filter-divider                 { border: none; border-top: 1px solid var(--border); margin: 6px 0 }
.filter-all                     { font-size: 11px; color: #6b7280; padding: 4px 12px 2px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px }
.filter-all:hover               { color: var(--accent-light) }
.filter-section-title           { font-size: 10px; color: #4b5563; text-transform: uppercase; letter-spacing: .07em; padding: 4px 12px 2px }

/* Tracker: .hdr-actions inherits margin-left:auto from section 03 — no override needed */

/* ── 15b. EOD staleness badge ─────────────────────────────────────── */
/* Inline badge in the tracker header — hidden when data is current, visible
   when AssetPriceStore data is > 1 business day old. Amber = stale (attention),
   red = critical (action required). Driven by DataIntegrityMonitor.
   Incident context: SYNC_BOT_ENABLED was silently unset for 5+ days with
   no visual indication. This badge ensures the user sees stale data immediately. */
.eod-stale     { margin-left:8px; font-weight:600; padding:1px 6px; border-radius:3px; font-size:12px; font-family:var(--font-mono) }
.eod-warn      { color:#d97706; background:#3d2a00 }
.eod-critical  { color:#ef4444; background:#3b1010 }

/* ── 16. Asset Performance Tracker table ──────────────────────────── */
/* Scoped to body.page-tracker — overrides global admin table defaults */
/* Different: border-collapse:collapse, top:0 sticky, no vertical-align:top */
body.page-tracker table       { width: 100%; border-collapse: collapse }
body.page-tracker thead th {
  background: var(--surface-nav);
  color: #6b7280;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 8px 10px;
  text-align: right;
  border-bottom: 2px solid var(--border);
  position: sticky;
  top: 58px;   /* sticks below nav (38px) + regime strip (20px) */
  z-index: 10;
  white-space: nowrap;
}
body.page-tracker thead th.l  { text-align: left }
body.page-tracker thead th.cat { width: 26px }
body.page-tracker tbody tr     { border-bottom: 1px solid var(--border-subtle); transition: background .1s }
body.page-tracker tbody tr:hover td:not(.group-lbl) { background: var(--surface-hover) !important }
body.page-tracker td {
  padding: 3px 10px;
  white-space: nowrap;
  font-size: inherit;
  border-bottom: none;    /* row border is on tbody tr, not td */
  vertical-align: middle;
}
body.page-tracker td.r         { text-align: right }
body.page-tracker td.group-lbl {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  text-align: center;
  font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-group);
  background: var(--surface-nav);
  border-right: 2px solid var(--border);
  padding: 8px 5px;
}
/* Book categories — derived from active positions (Convex, Convex Carry, Income Carry).
   Amber signals "this is the trader's book" — where capital is actively deployed. */
body.page-tracker td.group-lbl-book { color: var(--accent) }
body.page-tracker td.name         { color: var(--text-group); font-weight: 400 }
/* Non-marquee tickers recede to group-tier brightness so marquee tickers pop by contrast.
   Marquee tickers stay at headline brightness — the eye finds them first. */
/* Non-marquee tickers recede to utility-tier; marquee stays at headline brightness.
   The brightness gap between utility (#6b7280) and headline (#f1f5f9) is immediately visible.
   .asset-dash-link inherits from td, so the link follows the ticker's brightness tier. */
body.page-tracker td.ticker         { font-weight: 500; color: var(--text-group); letter-spacing: .03em; min-width: 58px }
body.page-tracker td.tkr-marquee    { font-weight: 700; color: var(--text-headline) }
/* .ticker-ext-icon inside the ticker cell inherits the global amber icon styles — no overrides needed */
body.page-tracker td.spot      { color: #94a3b8; text-align: right }
body.page-tracker td.aum-lbl   { padding: 3px 14px 3px 10px; text-align: right; width: 60px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; cursor: default }
body.page-tracker .group-gap td { height: 3px; background: var(--border); border: none; padding: 0 }

/* ── 17. Loading / initialising state ─────────────────────────────── */
/* Shared by any page waiting for the in-memory store — standard layout */
/* (nav + .page), no special body class. loadingPage() in HtmlComponents. */
.loading-state       { text-align: center; padding-top: 80px }
.loading-state-title { color: var(--text-section); font-size: 16px; font-weight: 600 }
.loading-state-sub   { color: #6b7280; font-size: 13px; margin-top: 8px }

/* ── 18. Calendar page (body.page-calendar scope) ────────────────── */
body.page-calendar              { font-size: 13px }
body.page-calendar .hdr         { margin-bottom: 14px }
/* body.page-calendar .hdr-title — removed: inherits 18px serif from base .hdr-title */
.view-switcher   { display: flex; gap: 2px; background: var(--surface-panel); border: 1px solid var(--border); border-radius: 6px; padding: 2px }
.view-btn        { padding: 4px 14px; border-radius: 4px; font-size: 11px; font-weight: 600; cursor: pointer; background: none; border: none; color: #6b7280; font-family: inherit; letter-spacing: .03em; transition: color .1s, background .1s }
.view-btn:hover  { color: #cbd5e1 }
/* Active = amber — consistent with nav-link.active, admin-dd-link.active, and all other active states */
.view-btn-active { background: var(--border); color: var(--accent) }

.cal-nav          { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap }
.nav-btn          { background: var(--surface-panel); border: 1px solid var(--border); color: #94a3b8; padding: 5px 10px; border-radius: 5px; cursor: pointer; font-family: inherit; font-size: 12px }
.nav-btn:hover    { background: var(--surface-hover); border-color: var(--border-muted); color: #e5e7eb }
/* Today nav button — amber accent (was blue #1d4ed8 / #3b82f6) */
.nav-today-btn        { background: none; border: 1px solid var(--accent); color: var(--accent); padding: 5px 10px; border-radius: 5px; cursor: pointer; font-family: inherit; font-size: 12px }
.nav-today-btn:hover  { background: #78350f }

#cal-nav-title    { font-size: 14px; font-weight: 700; color: #f1f5f9; min-width: 180px }
.legend           { display: flex; gap: 14px; flex-wrap: wrap; align-items: center }
.legend-item      { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #9ca3af }
.legend-dot       { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0 }

.day-panel-wrap   { display: flex; gap: 14px; align-items: flex-start }
#day-panel        { display: none; min-width: 260px; max-width: 280px; background: var(--surface-nav); border: 1px solid var(--border); border-radius: 8px; padding: 12px; flex-shrink: 0 }
#day-panel.open   { display: block }
.dp-hdr           { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px }
.dp-date          { font-size: 12px; font-weight: 700; color: #cbd5e1 }
.dp-close         { background: none; border: none; color: #6b7280; cursor: pointer; font-size: 14px; line-height: 1; padding: 2px 4px }
.dp-close:hover   { color: #e5e7eb }
.dp-empty         { font-size: 12px; color: #4b5563; text-align: center; padding: 20px 0 }
.dp-event         { padding: 8px 10px; border-radius: 5px; margin-bottom: 6px; cursor: pointer; transition: opacity .1s }
.dp-event:hover   { opacity: .8 }
.dp-evt-type      { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em }
.dp-evt-title     { font-size: 12px; font-weight: 600; color: #e5e7eb; margin-top: 3px; line-height: 1.3 }
.dp-evt-time      { font-size: 10px; color: #6b7280; margin-top: 2px }

.cal-grid         { display: grid; grid-template-columns: repeat(7,1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 8px; overflow: hidden }
.cal-dow          { background: var(--surface-nav); color: #6b7280; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; padding: 8px; text-align: center }
.cal-cell         { background: var(--surface-body); min-height: 96px; padding: 6px; cursor: pointer; transition: background .1s }
.cal-cell:hover   { background: #0f1318 }
.cal-out          { background: #090b0e; cursor: default; pointer-events: none }
/* cal-today — intentional blue: semantic "current date" indicator, not a UI accent */
.cal-today        { background: #0d1826 !important; outline: 1px inset #1d4ed8 }
.cal-daynum       { font-size: 12px; font-weight: 600; color: #6b7280; display: block; margin-bottom: 4px }
.cal-daynum-today { color: #3b82f6; font-weight: 700 }   /* intentional blue — "today" */
.cal-evts         { display: flex; flex-direction: column; gap: 2px }
.cal-evt-pill     { font-size: 10px; padding: 2px 5px; border-radius: 3px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .1s; line-height: 1.4 }
.cal-evt-pill:hover { opacity: .75 }
.cal-evt-more     { font-size: 10px; color: #4b5563; padding: 1px 4px }

.week-grid        { display: grid; grid-template-columns: repeat(7,1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 8px; overflow: hidden }
.week-col         { background: var(--surface-body); padding: 8px 6px; min-height: 420px }
.week-today       { background: #0d1826 !important }     /* intentional blue */
.week-dow         { font-size: 10px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .07em; text-align: center; margin-bottom: 4px }
.week-daynum      { font-size: 20px; font-weight: 700; color: #6b7280; text-align: center; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border) }
.week-daynum-today { color: #3b82f6 }                    /* intentional blue */
.week-event       { padding: 6px 8px; border-radius: 4px; margin-bottom: 4px; cursor: pointer; transition: opacity .1s }
.week-event:hover { opacity: .8 }
.week-empty       { color: var(--border-muted); font-size: 11px; padding: 8px 0; text-align: center }

.list-tbl          { width: 100%; border-collapse: collapse }
.list-tbl thead th { background: var(--surface-nav); color: #6b7280; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 8px 10px; text-align: left; border-bottom: 2px solid var(--border); position: sticky; top: 0; z-index: 5; white-space: nowrap }
.list-tbl tbody td { padding: 8px 10px; border-bottom: 1px solid var(--border-subtle) }
.list-row          { cursor: pointer; transition: background .1s }
.list-row:hover td { background: #0f1318 }

#evt-modal         { display: none; position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.75); align-items: center; justify-content: center }
#evt-modal.open    { display: flex }
#evt-modal-content { background: var(--surface-panel); border: 1px solid var(--border); border-radius: 10px; padding: 20px; max-width: 440px; width: 90%; max-height: 80vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.8) }

/* ── 19. Desk Performance dashboard ──────────────────────────────── */
/* body.page-perf: 13px dense, inherits standard 1200px page width */
body.page-perf            { font-size: 13px }
/* Flatten inner cards when nested inside form-card — prevents panel-inside-panel.
   The form-card provides elevation; inner cards become flat layout containers. */
body.page-perf .form-card .hero-strategy { border: none; background: transparent }
body.page-perf .form-card .metric-card   { background: transparent }
body.page-perf .form-card .chart-card    { box-shadow: none; background: transparent }

.section       { margin-bottom: 28px }
.section-title { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text-section); letter-spacing: .02em; margin-bottom: 14px }

/* Currency toggle — amber active state (was blue #1e3a5f / #93c5fd) */
.ccy-toggle  { display: inline-flex; border: 1px solid var(--border-muted); border-radius: 5px; overflow: hidden }
.ccy-btn     { background: transparent; color: #6b7280; border: none; padding: 3px 10px; font-size: 11px; font-weight: 600; cursor: pointer; font-family: 'IBM Plex Mono', monospace; transition: all .15s; letter-spacing: .03em }
.ccy-btn:hover  { color: #e5e7eb }
.ccy-active     { background: var(--accent); color: var(--surface-card) }   /* btn-amber spec: bright amber bg, near-black text */

.hero-grid       { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px }
.hero-strategy   { background: var(--surface-card); border: 1px solid var(--border); border-radius: 8px; padding: 20px; display: flex; flex-direction: column; justify-content: center }
.hero-kpi-col    { display: flex; flex-direction: column; gap: 14px }
.metrics-grid    { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px }
.charts-grid     { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.metric-card     { background: var(--surface-card); border: 1px solid var(--border); border-radius: 8px; padding: 16px }
.metric-label    { font-size: 11px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px }
.metric-value    { font-size: 22px; font-weight: 700; color: #f1f5f9; font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums }
.metric-sub      { font-size: 12px; color: #6b7280; margin-top: 2px; font-family: 'IBM Plex Mono', monospace }
.ret-pos         { color: #22c55e }
.ret-neg         { color: #ef4444 }
.total-row td    { font-weight: 700; border-top: 2px solid var(--border-muted) }
.risk-breach     { border-color: #7f1d1d; background: #1a0505 }
.chart-card      { background: var(--surface-card); border: 1px solid var(--border); border-radius: 8px; padding: 16px; box-shadow: 0 4px 24px rgba(0,0,0,.4) }
.chart-title     { font-size: 13px; font-weight: 600; color: var(--text-group); letter-spacing: .02em; margin-bottom: 10px; padding-left: 10px; border-left: 3px solid var(--border-muted) }

/* primary-badge: outline style, amber — was filled dark amber */
.primary-badge { background: transparent; color: var(--text-group); border: 1px solid var(--border-muted); padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; letter-spacing: .04em; margin-left: 6px }

.badge-outperform  { background: #064e3b; color: #6ee7b7 }
.badge-match       { background: #1e3a5f; color: #93c5fd }
.badge-underperform{ background: #78350f; color: #fcd34d }
.badge-risk-breach { background: #7f1d1d; color: #fca5a5 }

/* Help button + modal */
.help-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1px solid var(--border-muted);
  color: #4b5563;
  font-size: 10px; font-weight: 700;
  cursor: pointer;
  margin-left: 4px;
  vertical-align: middle;
  line-height: 1;
  transition: all .15s;
  background: none; padding: 0;
  font-family: 'IBM Plex Sans', sans-serif;
}
.help-btn:hover   { color: #9ca3af; border-color: #9ca3af }
th .help-btn      { vertical-align: baseline }
.modal-overlay    { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.6); z-index: 500; align-items: center; justify-content: center }
.modal-overlay.open { display: flex }
.modal-box        { background: var(--surface-card); border: 1px solid var(--border); border-radius: 10px; padding: 24px; max-width: 480px; width: 90%; box-shadow: 0 16px 48px rgba(0,0,0,.6); position: relative }
.modal-title      { font-size: 14px; font-weight: 700; color: var(--text-section); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px }
.modal-body       { font-size: 13px; color: #d1d5db; line-height: 1.6; max-height: 70vh; overflow-y: auto }
.modal-body code  { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #93c5fd; background: #1e3a5f; padding: 1px 5px; border-radius: 3px }
.modal-close      { position: absolute; top: 12px; right: 14px; background: none; border: none; color: #6b7280; font-size: 18px; cursor: pointer; padding: 4px; line-height: 1; transition: color .15s }
.modal-close:hover { color: #e5e7eb }
.modal-form       { max-width: 600px }
.modal-form .form-grid   { grid-template-columns: 1fr 1fr; gap: 14px }
.modal-form .form-actions { margin-top: 18px }
.modal-form-wide  { max-width: 780px }
.modal-form-wide .form-actions { margin-top: 18px }
@media (max-width: 900px) {
  .hero-grid      { grid-template-columns: 1fr }
  .metrics-grid   { grid-template-columns: repeat(2,1fr) }
  .charts-grid    { grid-template-columns: 1fr }
}

/* ── 20. Benchmark admin extras ───────────────────────────────────── */
.form-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px }
.form-col   { display: flex; flex-direction: column; gap: 12px }

.kv-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 6px }
.kv-row  { display: grid; grid-template-columns: 1fr 80px 28px; gap: 6px; align-items: center }
.kv-row .form-input { margin: 0 }
.kv-remove {
  background: none; border: 1px solid var(--border-muted); color: #6b7280;
  width: 26px; height: 26px; border-radius: 5px; cursor: pointer;
  font-size: 13px; display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.kv-remove:hover     { color: #ef4444; border-color: #7f1d1d }
.alloc-total         { font-size: 12px; font-weight: 600; margin-top: 6px; font-family: 'IBM Plex Mono', monospace }
.alloc-total-ok      { color: #22c55e }
.alloc-total-err     { color: #ef4444 }

.alloc-pills { display: flex; flex-wrap: wrap; gap: 4px }
.alloc-pill  { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 4px; font-size: 12px; background: #1e3a5f; color: #93c5fd; font-weight: 600; font-family: 'IBM Plex Mono', monospace }

.bm-table                    { table-layout: fixed }
.bm-table td                 { padding: 8px }
.bm-table td.col-num         { padding-top: 9px; vertical-align: top }
.bm-table td.col-alloc       { padding-top: 11px; vertical-align: top }
.bm-table td.col-actions     { padding-top: 6px; vertical-align: top }
.bm-table td.col-status      { padding-top: 7px; vertical-align: top }
.si-active   { color: #22c55e }
.si-inactive { color: var(--border-muted) }

.info-tip {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  color: #6b7280; font-size: 13px;
  cursor: help; transition: all .15s;
  font-style: normal;
  border: 1px solid var(--border-muted);
}
.info-tip:hover { color: #9ca3af; border-color: #9ca3af }
.info-tip .tip-text {
  display: none;
  position: absolute; bottom: calc(100% + 8px); right: 0;
  width: 280px; padding: 8px 12px;
  background: var(--border); border: 1px solid var(--border-muted); border-radius: 6px;
  font-size: 11px; color: var(--text-group); line-height: 1.5;
  font-weight: 400; font-style: normal; white-space: normal;
  text-align: left; box-shadow: 0 8px 24px rgba(0,0,0,.5);
  z-index: 100; pointer-events: none;
}
.info-tip .tip-text::after {
  content: ''; position: absolute; top: 100%; right: 8px;
  border: 6px solid transparent; border-top-color: var(--border-muted);
}
.info-tip:hover .tip-text { display: block }

/* Remove number input spinners — allocation weights are integers only */
input[name=alloc_weight]                                  { -webkit-appearance: none; -moz-appearance: textfield }
input[name=alloc_weight]::-webkit-outer-spin-button,
input[name=alloc_weight]::-webkit-inner-spin-button       { -webkit-appearance: none; margin: 0 }

/* Asset autocomplete */
.ac-wrap       { position: relative }
.ac-dropdown   { position: absolute; top: 100%; left: 0; right: 0; background: var(--border); border: 1px solid var(--border-muted); border-radius: 6px; max-height: 200px; overflow-y: auto; z-index: 100; margin-top: 2px; box-shadow: 0 8px 24px rgba(0,0,0,.5); display: none }
.ac-item       { padding: 6px 10px; cursor: pointer; font-size: 13px; color: #d1d5db; font-family: 'IBM Plex Mono', monospace }
.ac-item:hover,
.ac-item.ac-focused { background: var(--border-muted); color: #f1f5f9 }

/* ── 21. Book Snapshot admin extras ───────────────────────────────── */
.num-input { text-align: right }
.inr-col   { color: #9ca3af; font-size: 12px }
.bs-table      { table-layout: fixed; width: 100% }
.bs-table td   { padding: 8px; vertical-align: top }
.bs-table th   { padding: 8px }
.note-cell     { color: #6b7280; font-size: 12px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

/* ── 22. Design System reference page ────────────────────────────── */
.ds-section   { margin-bottom: 52px }
.ds-heading   {
  font-size: 13px; font-weight: 700; color: #6b7280;
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 20px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
}
.ds-heading span { color: #4b5563; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 12px }
.ds-row       { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start }
.ds-card      { background: var(--surface-card); border: 1px solid var(--border); border-radius: 8px; padding: 20px; flex: 1; min-width: 220px }
.ds-card-title { font-size: 12px; color: #6b7280; margin-bottom: 14px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600 }
.ds-mono      { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #6b7280; margin-top: 6px }
.ds-label     { font-size: 12px; color: #6b7280; margin-top: 6px }
.ds-sublabel  { font-size: 12px; color: #4b5563; margin-top: 2px; font-family: 'IBM Plex Mono', monospace }

.swatch-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px,1fr)); gap: 12px }
.swatch       { border-radius: 6px; height: 44px; border: 1px solid rgba(255,255,255,.06) }
.swatch-label { font-size: 12px; font-family: 'IBM Plex Mono', monospace; color: #6b7280; margin-top: 6px }
.swatch-use   { font-size: 11px; color: #4b5563; margin-top: 2px }

.type-row           { padding: 10px 0; border-bottom: 1px solid var(--surface-card); display: flex; align-items: baseline; gap: 16px }
.type-row:last-child { border-bottom: none }
.type-meta          { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #4b5563; min-width: 90px }

.num-row            { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--surface-card) }
.num-row:last-child { border-bottom: none }
.num-desc           { font-size: 13px; color: #6b7280; min-width: 200px }

.ds-note        { background: var(--surface-nav); border: 1px solid var(--border); border-left: 3px solid var(--accent-deep); border-radius: 4px; padding: 12px 16px; font-size: 13px; color: #9ca3af; line-height: 1.7; margin-bottom: 16px }
.ds-note strong { color: var(--accent); font-weight: 600 }

.ds-table              { table-layout: fixed; width: 100% }
.ds-table td           { padding: 8px; vertical-align: top; border-bottom: 1px solid var(--surface-card) }
.ds-table th           { padding: 8px; font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--border) }
.ds-table tr:hover td  { background: var(--surface-card) }
.ds-divider            { border: none; border-top: 1px solid var(--surface-nav); margin: 4px 0 }

/* ── 23. Login page ───────────────────────────────────────────────── */
body.page-login { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px }

/* Full-page backdrop — fat-tail Gaussian distribution, overlays everything */
.login-backdrop { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0 }
.login-backdrop path { fill: none; stroke: var(--accent); stroke-linecap: round; transform-box: fill-box; will-change: transform; backface-visibility: hidden }
/* Parametric density family — 14 curves, progressive fade, staggered undulation */
.lb-c1  { stroke-width: 1.8; opacity: 0.22; animation: lb-breathe 24s ease-in-out infinite 0s }
.lb-c2  { stroke-width: 1.7; opacity: 0.19; animation: lb-breathe 24s ease-in-out infinite 0.5s }
.lb-c3  { stroke-width: 1.6; opacity: 0.17; animation: lb-breathe 24s ease-in-out infinite 1.0s }
.lb-c4  { stroke-width: 1.5; opacity: 0.15; animation: lb-breathe 24s ease-in-out infinite 1.5s }
.lb-c5  { stroke-width: 1.4; opacity: 0.13; animation: lb-breathe 24s ease-in-out infinite 2.0s }
.lb-c6  { stroke-width: 1.3; opacity: 0.11; animation: lb-breathe 24s ease-in-out infinite 2.5s }
.lb-c7  { stroke-width: 1.2; opacity: 0.10; animation: lb-breathe 24s ease-in-out infinite 3.0s }
.lb-c8  { stroke-width: 1.1; opacity: 0.08; animation: lb-breathe 24s ease-in-out infinite 3.5s }
.lb-c9  { stroke-width: 1.0; opacity: 0.07; animation: lb-breathe 24s ease-in-out infinite 4.0s }
.lb-c10 { stroke-width: 1.0; opacity: 0.06; animation: lb-breathe 24s ease-in-out infinite 4.5s }
.lb-c11 { stroke-width: 0.9; opacity: 0.05; animation: lb-breathe 24s ease-in-out infinite 5.0s }
.lb-c12 { stroke-width: 0.9; opacity: 0.04; animation: lb-breathe 24s ease-in-out infinite 5.5s }
.lb-c13 { stroke-width: 0.8; opacity: 0.04; animation: lb-breathe 24s ease-in-out infinite 6.0s }
.lb-c14 { stroke-width: 0.8; opacity: 0.03; animation: lb-breathe 24s ease-in-out infinite 6.5s }

@keyframes lb-breathe {
  0%, 100% { transform: translateY(0) }
  50%      { transform: translateY(-12px) }
}

/* Split panel: brand left | amber divider | form right */
@keyframes login-enter {
  from { opacity:0; transform:translateY(20px) }
  to   { opacity:1; transform:translateY(0) }
}
.login-panel { display: flex; background: var(--surface-login); border: 1px solid var(--border-nav); border-radius: 12px; overflow: hidden; max-width: 680px; width: 100%; box-shadow: 0 8px 32px rgba(0,0,0,.5); position: relative; z-index: 2; animation: login-enter 1s ease-out }

/* Left side — brand */
.login-brand { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 48px 40px }
.login-brand-logo { display: flex; align-items: baseline; gap: 0; margin-bottom: 14px }
.login-brand-21 { font-family: var(--font-display); font-size: 36px; font-weight: 700; color: var(--accent); letter-spacing: -0.5px; line-height: 1 }
.login-brand-name { font-family: var(--font-display); font-size: 36px; font-weight: 700; color: #9ca3af; letter-spacing: -0.5px; line-height: 1; margin-left: 8px }
.login-brand-sub { font-size: 11px; font-weight: 500; color: var(--border-muted); letter-spacing: 1.8px; text-transform: uppercase }
.login-brand-desc { font-family: 'Source Serif 4', Georgia, serif; font-size: 13px; color: #9ca3af; line-height: 1.7; margin-top: 28px }

/* Amber vertical divider — inset from panel edges */
.login-divider { width: 1px; background: var(--accent); flex-shrink: 0; margin: 24px 0 }

/* Right side — form */
.login-form-side { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 48px 40px }
.login-form-title { font-family: 'Source Serif 4', Georgia, serif; font-size: 15px; font-weight: 400; color: #9ca3af; margin-bottom: 28px }
.login-field      { margin-bottom: 18px }
.login-field label { display: block; font-size: 11px; font-weight: 600; color: #6b7280; margin-bottom: 6px; letter-spacing: .4px; text-transform: uppercase }
.login-field input[type="text"],
.login-field input[type="password"] {
  width: 100%;
  padding: 10px 14px;
  background: var(--surface-input);
  border: 1px solid var(--border-login);
  border-radius: 8px;
  color: #e2e8f0;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  outline: none;
  transition: border-color .2s;
}
.login-field input:focus       { border-color: var(--accent) }
.login-field input::placeholder { color: var(--border-muted) }
.login-remember { display: flex; align-items: center; gap: 10px; margin-bottom: 24px }
.login-remember label { font-size: 12px; color: #6b7280; cursor: pointer; user-select: none }
.btn-login       { width: 100%; padding: 11px; background: var(--accent); border: none; border-radius: 8px; color: var(--surface-card); font-family: 'IBM Plex Sans', sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .2s; letter-spacing: .3px }
.btn-login:hover  { background: var(--accent-hover) }
.btn-login:active { background: var(--accent-deep) }
.login-error  { background: #1c1012; border: 1px solid #7f1d1d; border-radius: 8px; padding: 10px 14px; margin-bottom: 20px; font-size: 13px; color: #fca5a5; text-align: center }
.login-footer { font-size: 10px; color: var(--border-muted); margin-top: 20px; text-align: center }

/* Logout interstitial — same panel, different content */
.logout-panel   { max-width: 680px }
.logout-content { align-items: center; text-align: center }
.logout-message { font-family: 'Playfair Display', Georgia, serif; font-size: 22px; font-weight: 700; color: #f1f5f9; margin-bottom: 8px }
.logout-sub     { font-family: 'Source Serif 4', Georgia, serif; font-size: 14px; color: #9ca3af; margin-bottom: 32px }
.logout-content .btn-login { display: block; text-decoration: none; text-align: center }

/* ── 24. Footer ──────────────────────────────────────────────────── */
/* Data footer — page-specific footnotes (tracker, calendar) */
.footer { margin-top: 14px; font-size: 11px; color: #4b5563; display: flex; gap: 20px; border-top: 1px solid var(--border); padding-top: 10px; flex-wrap: wrap }

/* Site footer — global institutional footer, outside .page container */
.site-footer { margin-top: 48px; border-top: 1px solid var(--border); padding: 0 22px }
.site-footer-inner { max-width: 1200px; margin: 0 auto }
body.layout-dense .site-footer-inner { max-width: none }

/* Top row: brand left + nav columns right */
.site-footer-top { display: flex; justify-content: space-between; align-items: flex-start; padding: 40px 0 36px; gap: 48px }
.site-footer-brand { display: flex; flex-direction: column; gap: 12px; min-width: 200px; flex-shrink: 0 }
.site-footer-logo { display: flex; align-items: baseline; gap: 0 }
.site-footer-logo-21 { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--accent); letter-spacing: -0.5px; line-height: 1 }
.site-footer-logo-name { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: #4b5563; letter-spacing: -0.5px; line-height: 1; margin-left: 6px }
.site-footer-tagline { font-size: 10px; color: var(--border-muted); letter-spacing: .12em; text-transform: uppercase; font-weight: 500 }

/* Nav columns */
.site-footer-nav { display: flex; gap: 48px }
.site-footer-col { display: flex; flex-direction: column; gap: 7px }
.site-footer-col-title { font-size: 10px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 2px; padding-bottom: 6px; border-bottom: 1.5px solid var(--border-muted) }
.site-footer-col a { font-size: 12px; color: #4b5563; text-decoration: none; transition: color .15s }
.site-footer-col a:hover { color: var(--accent) }

/* Bottom row: disclaimer + copyright */
.site-footer-bottom { border-top: 1px solid var(--border); margin-top: 8px; padding: 24px 0 28px; display: flex; justify-content: space-between; align-items: flex-start; gap: 40px }
.site-footer-disclaimer { font-size: 10px; color: var(--border-muted); line-height: 1.5; max-width: 760px }
.site-footer-copy { font-size: 10px; color: var(--border-muted); white-space: nowrap; flex-shrink: 0 }

/* ── 25. Convex Sleeve dashboard (body.page-sleeve scope) ────────── */
body.page-sleeve { font-size: 13px }

/* Detail page layout stability — min-heights prevent cards from jumping
   as you switch between positions with different content lengths */
body.page-sleeve .detail-lifecycle-row { min-height: 90px }
body.page-sleeve .detail-cards-row .form-card { min-height: 180px }
body.page-sleeve .detail-chart-row { min-height: 320px }

/* .kpi-row is the canonical name; .sleeve-kpi is a backward-compat alias.
   Use .kpi-row on new pages. Structure: .kpi-row > .mc > .mc-label + .mc-val + .mc-sub */
.kpi-row, .sleeve-kpi { display: flex; gap: 8px; margin-bottom: 16px }
.kpi-row .mc, .sleeve-kpi .mc { flex: 1; background: var(--surface-card); border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; display: flex; flex-direction: column }
.kpi-row .mc-label, .sleeve-kpi .mc-label { font-size: 10px; color: var(--text-utility); text-transform: uppercase; letter-spacing: .4px }
.kpi-row .mc-val, .sleeve-kpi .mc-val { font-size: 15px; font-weight: 700; color: var(--text-headline); font-family: 'IBM Plex Mono', monospace; margin-top: 2px }
.kpi-row .mc-sub, .sleeve-kpi .mc-sub { font-size: 11px; color: var(--text-utility); font-family: 'IBM Plex Mono', monospace; margin-top: 1px }

/* backward-compat shims — retained so stale imports compile */
.sleeve-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px }
.sleeve-card { background: var(--surface-card); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px }
.sleeve-card-label { font-size: 11px; color: #6b7280; text-transform: uppercase; letter-spacing: .5px }
.sleeve-card-value { font-size: 18px; font-weight: 700; color: #f1f5f9; margin-top: 4px; font-family: 'IBM Plex Mono', monospace }
.sleeve-card-sub { font-size: 12px; color: #9ca3af; margin-top: 2px }

.sleeve-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0 }
.sleeve-table th { position: sticky; top: 58px; background: var(--surface-body); z-index: 10; padding: 6px 8px; font-size: 12px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: .3px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap }
.sleeve-table td { padding: 8px; border-bottom: 1px solid var(--border); vertical-align: top; white-space: nowrap; color: #e5e7eb; font-size: 12px }
.sleeve-table td.mono { font-family: 'IBM Plex Mono', monospace }
.sleeve-table tr:hover td { background: var(--surface-hover) }
/* Sortable table headers — shared across all tables (sleeve, carry, income carry, benchmarks) */
th.sortable { cursor: pointer; user-select: none }
th.sortable:hover { color: #e5e7eb }
th.sortable::after { content: ''; display: inline-block; margin-left: 4px; font-size: 10px; color: var(--border-muted) }
th.sort-asc::after  { content: '\25B2'; color: var(--accent) }
th.sort-desc::after { content: '\25BC'; color: var(--accent) }

.sleeve-group-hdr td { padding: 10px 8px 4px; border-bottom: 1px solid var(--border); font-size: 12px }

.dte-warn    { color: #ef4444; font-weight: 600 }
.dte-caution { color: var(--text-section) }

/* Roll form classes removed — roll uses dynamic-modal.js with 3fr/2fr tape layout,
   no longer needs the old comparison-layout (.roll-compare, .roll-side, etc.) CSS. */

/* ── 26. AI Recommendation card (Convex Sleeve detail page) ─────── */
.rec-card { background: var(--surface-nav); border: 1px solid var(--border); border-left: 4px solid #4b5563; border-radius: 8px; padding: 12px 14px; margin-top: 12px }
.rec-card.action-roll   { border-left-color: var(--accent) }
.rec-card.action-add    { border-left-color: #22c55e }
.rec-card.action-close  { border-left-color: #3b82f6 }
.rec-card.action-reduce { border-left-color: #3b82f6 }
.rec-card.urgency-high  { border-left-color: #ef4444 }

.rec-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px }
.rec-action-badge { font-size: 11px; font-weight: 700; letter-spacing: .6px; padding: 3px 10px; border-radius: 4px; text-transform: uppercase }
.rec-action-badge.badge-hold   { background: var(--border); color: #9ca3af }
.rec-action-badge.badge-roll   { background: #3d2a00; color: var(--accent) }
.rec-action-badge.badge-add    { background: #052e16; color: #22c55e }
.rec-action-badge.badge-close  { background: #1e3a5f; color: #93c5fd }
.rec-action-badge.badge-reduce { background: #1e3a5f; color: #93c5fd }

.rec-urgency-chip { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; padding: 2px 7px; border-radius: 3px }
.rec-urgency-chip.urgency-low  { background: var(--border); color: #4b5563 }
.rec-urgency-chip.urgency-med  { background: #2a1808; color: #c48c58 }
.rec-urgency-chip.urgency-high { background: #1c0a0a; color: #ef4444 }

.rec-rationale { color: #c9d1d9; font-size: 13px; line-height: 1.6; margin-bottom: 10px }
.rec-flags     { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px }
.rec-flag      { font-size: 11px; background: #1c0a0a; color: #f87171; border: 1px solid #7f1d1d; border-radius: 4px; padding: 2px 8px }
.rec-trigger      { font-size: 12px; color: #9ca3af; padding: 6px 10px; background: var(--surface-card); border-radius: 4px; border: 1px solid var(--border); margin-bottom: 6px }
.rec-trigger-label { color: #4b5563; font-weight: 600; margin-right: 4px }
.rec-meta      { font-size: 10px; color: var(--border-muted); margin-top: 6px }

/* ── 27. Heat Map view  (body.page-tracker scope) ──────────────────── */
/* Design: filled bg = signal, black text on colored tiles (.hm-tile-on) */
/* Neutral tiles (|z|<0.5σ) stay dark — absence of color is itself a signal */
body.page-tracker .hm-grid { display: flex; flex-wrap: wrap; gap: 12px; padding: 4px 0 16px }

body.page-tracker .hm-cat-card {
  width: 100%;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px 10px;
  box-shadow: 0 4px 24px rgba(0,0,0,.4);
}

body.page-tracker .hm-cat-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 7px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
body.page-tracker .hm-cat-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--text-group);
  text-transform: uppercase;
  white-space: nowrap;
}
body.page-tracker .hm-cat-divider { flex: 1; height: 1px; background: var(--surface-hover) }

body.page-tracker .hm-tiles { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 4px }
body.page-tracker .hm-tile {
  width: 115px;
  padding: 9px 10px 7px;
  border-radius: 5px;
  border: 1px solid var(--surface-hover);
  cursor: default;
  transition: filter .1s, border-color .1s;
}
/* Every tile has a visible background — bg IS the signal.
   Gray for neutral (|z|<0.5σ), green/red scale for signal. Black text throughout.
   .hm-tile = base shape; .hm-tile-on = content colors (always applied now). */
body.page-tracker .hm-tile:hover                 { filter: brightness(0.88) }
body.page-tracker .hm-tile-on                    { border-color: transparent }
body.page-tracker .hm-ticker                     { font-family: 'IBM Plex Mono', monospace; font-size: 15px; font-weight: 700; line-height: 1; margin-bottom: 3px; color: var(--surface-panel) }
body.page-tracker .hm-ret                        { font-family: 'IBM Plex Mono', monospace; font-size: 14px; font-weight: 700; line-height: 1; margin-bottom: 5px; color: var(--surface-panel) }
body.page-tracker .hm-name                       { font-size: 12px; font-weight: 700; color: rgba(0,0,0,0.7); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
/* Dark icon on colored tile backgrounds — amber is invisible on green/red fills */
body.page-tracker .hm-tile .ticker-ext-icon        { color: var(--surface-panel); opacity: 0.45 }
body.page-tracker .hm-tile .ticker-ext-icon:hover  { color: var(--surface-panel); opacity: 0.8 }

body.page-tracker .hm-footer { font-size: 10px; color: var(--border-muted); padding: 10px 0 4px; border-top: 1px solid var(--border); margin-top: 8px }

/* ── 28. Barometer view — category columns  (body.page-tracker scope) ── */
/* Flex-wrap: columns are fixed width and flow naturally. Empty space at the right
   is intentional — columns must not stretch to fill the container. */
body.page-tracker .baro-col-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 4px 0 16px;
  align-items: flex-start;
}
body.page-tracker .baro-col {
  width: 260px;
  flex-shrink: 0;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px 8px;
  box-shadow: 0 4px 24px rgba(0,0,0,.4);
}
body.page-tracker .baro-col-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
body.page-tracker .baro-type-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--text-group);
  text-transform: uppercase;
}
body.page-tracker .baro-col-avg {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 600;
}
body.page-tracker .baro-col-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
body.page-tracker .baro-col-row:last-child { border-bottom: none }
body.page-tracker .baro-col-ticker {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: #f1f5f9;
  width: 52px;
  flex-shrink: 0;
}
body.page-tracker .baro-col-track {
  flex: 1;
  height: 5px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
body.page-tracker .baro-col-bar { height: 100%; border-radius: 2px; min-width: 2px }
body.page-tracker .baro-col-val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  width: 56px;
  text-align: right;
  flex-shrink: 0;
}

/* ── 27. Trade Thesis Registry (body.page-thesis scope) ─────────── */
body.page-thesis { font-size: 13px }
/* body.page-thesis .page — removed: inherits 1200px from .page base */

/* KPI row — reuses .mc structure from sleeve */
.thesis-kpi { display: flex; gap: 8px; margin-bottom: 16px }
.thesis-kpi .mc { flex: 1; background: var(--surface-card); border: 1px solid var(--border); border-radius: 6px; padding: 10px 14px; display: flex; flex-direction: column }
.thesis-kpi .mc-label { font-size: 10px; color: #6b7280; text-transform: uppercase; letter-spacing: .4px }
.thesis-kpi .mc-val { font-size: 16px; font-weight: 700; color: #f1f5f9; font-family: 'IBM Plex Mono', monospace; margin-top: 4px }
.thesis-kpi .mc-secondary { font-size: 11px; color: #4b5563; margin-top: 5px; border-top: 1px solid var(--border); padding-top: 5px }

/* Status badges */
.badge-thesis-open        { background: #3d2a00; color: var(--accent) }
.badge-thesis-monitoring  { background: #172554; color: #93c5fd }
.badge-thesis-confirmed   { background: #064e3b; color: #6ee7b7 }
.badge-thesis-invalidated { background: #450a0a; color: #fca5a5 }
.badge-thesis-closed      { background: var(--border); color: #9ca3af }

/* Detail header — meta row as flex so badges + status group all top-align cleanly */
body.page-thesis .hdr-meta { display: flex; flex-direction: row; align-items: flex-start; gap: 6px; flex-wrap: wrap }
/* Status + date stacked as a vertical unit */
.thesis-status-group { display: flex; flex-direction: column; gap: 3px }
.thesis-opened-date  { font-size: 10px; color: #4b5563; line-height: 1; padding-left: 2px }

/* Category badges */
.badge-cat-macro      { background: #162538; color: #6aaad6 }
.badge-cat-sector     { background: #1c1a3a; color: #8c84cc }
.badge-cat-instrument { background: #262010; color: #c8a852 }
.badge-cat-regime     { background: #2a1808; color: #c48c58 }

/* Thesis table */
.thesis-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed }
.thesis-table th { position: sticky; top: 58px; background: var(--surface-body); z-index: 10; padding: 6px 8px; font-size: 12px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: .3px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap }
.thesis-table td { padding: 8px; border-bottom: 1px solid var(--border); vertical-align: top; color: #e5e7eb; font-size: 12px; white-space: nowrap }
.thesis-table td.mono { font-family: 'IBM Plex Mono', monospace }
.thesis-table tr:hover td { background: var(--surface-hover) }
.thesis-table td a { color: #c9d1d9; text-decoration: none; font-weight: 600 }
.thesis-table td a:hover { text-decoration: underline }

/* Filter tabs */
.thesis-filters { display: flex; gap: 4px; margin-bottom: 14px }
.thesis-filters a { padding: 4px 12px; border-radius: 4px; font-size: 11px; font-weight: 600; color: #6b7280; text-decoration: none; border: 1px solid transparent; transition: all .15s }
.thesis-filters a:hover { color: #e5e7eb }
.thesis-filters a.active { color: var(--accent); border-color: var(--accent-deep); background: #1a1400 }

/* Thesis body — two-column layout: Notes (left) + Checklists (right) */
.thesis-body-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch }
.thesis-notes-col { border-right: 1px solid var(--border); padding-right: 24px }
/* Thesis summary prose — editorial, readable weight */
.thesis-summary { font-size: 14px; line-height: 1.75; color: #d1d5db; padding-left: 12px; border-left: 3px solid var(--accent-deep) }

/* Catalyst/Criterion checklist */
.thesis-checklist { list-style: none; padding: 0; margin: 8px 0 0 }
.thesis-checklist li { padding: 6px 0; border-bottom: 1px solid var(--surface-card); display: flex; align-items: flex-start; gap: 8px; font-size: 12px }
.thesis-checklist .check-icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px }
.thesis-checklist .triggered { color: #6ee7b7 }
.thesis-checklist .untriggered { color: #4b5563 }
.thesis-checklist .trigger-btn { font-size: 10px; padding: 2px 8px; border-radius: 3px; border: 1px solid var(--border-muted); background: transparent; color: #9ca3af; cursor: pointer; flex-shrink: 0; transition: all .15s }
.thesis-checklist .trigger-btn:hover { border-color: var(--accent); color: var(--accent) }
/* Reset button — muted, signals reversible untrigger */
.thesis-checklist .reset-btn { padding: 2px 6px; color: #6b7280 }
.thesis-checklist .reset-btn:hover { border-color: var(--accent-deep); color: var(--accent) }

/* Journal timeline — two-column layout: date rail | dot + spine | content */
.thesis-journal { list-style: none; padding: 0; margin: 12px 0 0; position: relative }
/* Continuous vertical line — left: 72px (date col) + 4px (dot radius, 9px/2 rounded) - 1px (half line width) = 75px */
.thesis-journal::before { content: ''; position: absolute; left: 75px; top: 0; bottom: 0; width: 2px; background: #2d4060 }
.tl-entry { display: flex; align-items: flex-start; margin-bottom: 20px }
.tl-entry:last-child { margin-bottom: 4px }
/* Date rail: relative label identifier + absolute date mono below */
.tl-date { width: 72px; flex-shrink: 0; text-align: right; padding-right: 14px; padding-top: 1px }
.tl-rel  { display: block; font-size: 11px; color: #c9d1d9; font-weight: 600; line-height: 1.3 }
.tl-abs  { display: block; font-size: 10px; color: #4b5563; font-family: 'IBM Plex Mono', monospace; margin-top: 2px; white-space: nowrap }
/* Dot: hollow circle centred on the spine line. No margin nudge needed — line position is exact. */
.tl-dot  { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-nav); border: 2px solid var(--border-muted); flex-shrink: 0; margin-top: 3px; position: relative; z-index: 1 }
/* Status-change entries get an amber dot to signal lifecycle transition */
.tl-dot-status { border-color: var(--accent) }
/* Content column */
.tl-body { flex: 1; padding-left: 14px }
.tl-body .j-status { font-size: 10px; font-weight: 600; letter-spacing: .04em; color: var(--text-group); display: block; margin-bottom: 3px }
.tl-body .j-note   { font-size: 13px; color: #e5e7eb; line-height: 1.55 }

/* Outcome card */
.thesis-outcome .outcome-result { font-size: 14px; font-weight: 700 }

/* Dynamic form rows (catalyst/criterion inputs) */
.dynamic-rows .row-entry { display: flex; gap: 8px; margin-bottom: 6px; align-items: center }
.dynamic-rows .row-entry .form-input { flex: 1 }
.dynamic-rows .remove-row { background: none; border: none; color: #6b7280; cursor: pointer; font-size: 16px; padding: 4px; line-height: 1; transition: color .15s }
.dynamic-rows .remove-row:hover { color: #ef4444 }
.add-row-btn { font-size: 11px; color: var(--text-utility); background: none; border: 1px dashed var(--border-muted); padding: 4px 12px; border-radius: 4px; cursor: pointer; margin-top: 4px; transition: all .15s }
.add-row-btn:hover { border-color: var(--text-group); color: #e5e7eb }


/* ── 29. Rich-text editor (thesis summary) ────────────────────── */
/* Outer wrapper replaces the textarea visually */
.rte-wrap { border: 1px solid var(--border-muted); border-radius: 6px; overflow: hidden; background: var(--surface-nav) }
.rte-wrap:focus-within { border-color: var(--accent) }

/* Toolbar row */
.rte-toolbar { display: flex; align-items: center; gap: 2px; padding: 5px 8px; background: var(--surface-card); border-bottom: 1px solid var(--border) }
.rte-btn { background: none; border: 1px solid transparent; border-radius: 4px; color: #9ca3af; cursor: pointer; font-size: 12px; font-family: 'IBM Plex Sans', sans-serif; padding: 3px 8px; line-height: 1.4; transition: all .15s; user-select: none }
.rte-btn:hover { background: var(--border); color: #f1f5f9; border-color: var(--border-muted) }
.rte-btn.active { background: var(--border); color: var(--accent); border-color: var(--border-muted) }
.rte-sep { width: 1px; height: 16px; background: var(--border-muted); margin: 0 4px }

/* Editable area */
.rte-body { padding: 12px 14px; min-height: 200px; color: #d1d5db; font-size: 13px; line-height: 1.75; outline: none; caret-color: var(--accent) }
.rte-body:empty:before { content: attr(data-placeholder); color: #4b5563 }
/* Inline formatting inside the editor */
.rte-body b, .rte-body strong { color: #f1f5f9; font-weight: 700 }
.rte-body u { text-decoration-color: var(--accent) }
.rte-body h3 { font-size: 13px; font-weight: 700; color: var(--text-section); margin: 10px 0 4px; letter-spacing: .02em; text-transform: none }
.rte-body ul, .rte-body ol { padding-left: 20px; margin: 6px 0 }
.rte-body li { margin: 2px 0 }
.rte-body p { margin: 4px 0 }

/* Detail view — rendered summary HTML — same formatting rules */
.thesis-summary b, .thesis-summary strong { color: #f1f5f9; font-weight: 700; font-style: normal }
.thesis-summary u { text-decoration-color: var(--accent); font-style: normal }
.thesis-summary h3 { font-size: 13px; font-weight: 700; color: var(--text-section); margin: 10px 0 4px; font-style: normal }
.thesis-summary ul, .thesis-summary ol { padding-left: 20px; margin: 6px 0 }
.thesis-summary li { margin: 2px 0 }
.thesis-summary p { margin: 4px 0 }

/* ── 30. Price Chart component (platform-wide, no body class scope) ─── */
/*
 * Reusable async price chart rendered by price-chart.js.
 * Used via priceChartHtml() / priceChartScriptTag() from HtmlComponents.kt.
 * Data fetched from GET /api/market/price-history?ticker=TICKER.
 * Any page can embed charts — include priceChartScriptTag() in <head> once.
 */
.price-chart-wrap   { margin-top: 12px }
/* Each chart now has its own chart-card — stacked-in-same-card pattern no longer used */
/* 2-column grid for side-by-side charts (2+ tickers) — gap replaces the stacked separator */
.price-chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start }
.price-chart-grid .price-chart-wrap + .price-chart-wrap { margin-top: 0; padding-top: 0; border-top: none }
.price-chart-svg    { width: 100%; line-height: 0 }
/* Range tabs: right-aligned row below the SVG */
.price-chart-footer { display: flex; justify-content: flex-end; margin-top: 6px }
.price-chart-tabs   { display: flex; gap: 2px }
.chart-range-btn { background: none; border: 1px solid transparent; border-radius: 4px; color: #6b7280; cursor: pointer; font-size: 10px; font-weight: 600; font-family: 'IBM Plex Mono', monospace; padding: 2px 7px; transition: all .15s; letter-spacing: .02em }
.chart-range-btn:hover  { color: #e5e7eb; border-color: var(--border-muted) }
.chart-range-btn.active { color: var(--accent); border-color: var(--accent-deep); background: #1a1400 }
.chart-range-btn.range-disabled { color: var(--border-muted); cursor: not-allowed; opacity: 0.4; pointer-events: none }
.chart-range-btn.range-disabled:hover { color: var(--border-muted); border-color: transparent }

/* ── 27. Data hierarchy — semantic type roles ──────────────────────
 * Five roles for all data display, plus two accent overlays.
 * Encode color + weight only (not size, family, or layout).
 * Font family comes from .mono class; alignment is inline.
 *
 * These classes bridge KPI cards (.metric-value = .dh-hero + size/family)
 * and table cells (where the hierarchy was previously ad-hoc inline styles).
 * ─────────────────────────────────────────────────────────────────── */
.dh-hero       { font-weight: 700; color: #f1f5f9 }  /* the number you opened the page to see */
.dh-primary    { font-weight: 600; color: #f1f5f9 }  /* table key values — totals, the number that matters in each row */
.dh-identifier { font-weight: 500; color: #c9d1d9 }  /* names, labels, tickers — orients you, not the signal */
.dh-secondary  { font-weight: 400; color: #6b7280 }  /* supporting context — sub-lines, rates, individual balances */
.dh-null       { color: var(--border-muted) }                     /* dashes, zeros, missing data */
.dh-accent     { font-weight: 700; color: var(--accent) }  /* summary row labels only (Cumulative, Total) */

/* Carry trade calculator tape — receipt-style computed metrics rail */
.carry-tape { padding: 12px 14px }
.tape-row { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--border-subtle) }
.tape-row:last-child { border-bottom: none }
.tape-label { font-size: 11px; color: var(--text-utility) }
.tape-value { font-size: 13px; font-weight: 600; color: var(--text-headline) }

/* ── 31. Convex Carry dashboard (body.page-carry scope) ──────────── */
body.page-carry { font-size: 13px }

/* Detail page layout stability — same approach as sleeve */
body.page-carry .detail-lifecycle-row { min-height: 90px }
body.page-carry .detail-cards-row .form-card { min-height: 180px }
body.page-carry .detail-chart-row { min-height: 320px }

/* ── 31b. Income Carry dashboard (body.page-income-carry scope) ──── */
body.page-income-carry { font-size: 13px }

/* Income carry table — compact layout matching the tracker aesthetic */
body.page-income-carry .ic-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0 }
/* position:static — sticky breaks inside .tbl-wrap (overflow:hidden).
   Matches the global .tbl-wrap th convention (see section 09). */
body.page-income-carry .ic-table th {
  position: static;
  background: var(--surface-card);
  font-size: 11px; font-weight: 600; color: var(--text-utility);
  text-transform: uppercase; letter-spacing: .05em;
  padding: 6px 8px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
body.page-income-carry .ic-table td {
  padding: 6px 8px; vertical-align: top;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 13px;
}
body.page-income-carry .ic-table tbody tr:hover td { background: var(--surface-hover) }

/* ── 32. Search terminal overlay ─────────────────────────────────── */

/* Backdrop — dark scrim over entire viewport */
.search-overlay { position:fixed; inset:0; z-index:250; background:rgba(0,0,0,0.7); display:none; justify-content:center; align-items:flex-start; padding-top:80px }
.search-overlay.open { display:flex }

/* Modal container */
.search-modal { width:580px; max-height:70vh; background:var(--surface-panel); border:1px solid var(--border); border-radius:8px; overflow:hidden; box-shadow:0 24px 48px rgba(0,0,0,0.5); display:flex; flex-direction:column }

/* Input row */
.search-input-row { display:flex; align-items:center; padding:10px 14px; gap:8px; border-bottom:1px solid var(--border) }
.search-input-row svg { color:#6b7280; flex-shrink:0 }
.search-input { flex:1; font-family:'IBM Plex Mono',monospace; font-size:14px; color:#f1f5f9; background:transparent; border:none; outline:none; caret-color:var(--accent) }
.search-input::placeholder { color:#4b5563 }
.search-hint { font-size:10px; font-family:'IBM Plex Mono',monospace; color:#4b5563; border:1px solid #2a2a2a; border-radius:3px; padding:1px 5px }

/* Results area */
.search-results { overflow-y:auto; flex:1; padding:4px 0 }
.search-results::-webkit-scrollbar { width:6px }
.search-results::-webkit-scrollbar-track { background:transparent }
.search-results::-webkit-scrollbar-thumb { background:#232323; border-radius:3px }

/* Group labels */
.search-group-label { padding:6px 14px 3px; font-size:10px; font-weight:600; color:#4b5563; text-transform:uppercase; letter-spacing:.08em }

/* Result items */
.search-item { display:flex; align-items:center; padding:6px 14px; gap:8px; cursor:pointer; border-left:2px solid transparent; transition:background .1s }
.search-item:hover { background:var(--surface-hover) }
.search-item.active { background:#1a1400; border-left-color:var(--accent) }

/* Result item parts */
.search-item-badge { font-size:9px; font-weight:600; padding:2px 5px; border-radius:3px; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; flex-shrink:0 }
.search-item-content { flex:1; min-width:0 }
.search-item-label { font-size:12px; font-weight:600; color:#e5e7eb }
.search-item-label mark { background:transparent; color:var(--accent); font-weight:700 }
.search-item-desc { font-size:11px; color:#6b7280; margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.search-item-meta { font-size:11px; font-family:'IBM Plex Mono',monospace; color:#6b7280; white-space:nowrap; flex-shrink:0; margin-left:auto }

/* Search-specific badges */
.search-badge-page      { background:#1a1a2e; color:#818cf8 }
.search-badge-asset     { } /* uses existing badge-index/etf/etc */
.search-badge-sleeve    { background:#3d2a00; color:var(--accent) }
.search-badge-carry     { background:#1e3a5f; color:#93c5fd }
.search-badge-thesis    { background:#172554; color:#93c5fd }
.search-badge-benchmark { background:#064e3b; color:#6ee7b7 }

/* Footer hint bar */
.search-footer { padding:6px 14px; border-top:1px solid var(--border); font-size:10px; font-family:'IBM Plex Mono',monospace; color:#4b5563; display:flex; gap:14px }
.search-footer kbd { font-size:9px; border:1px solid #2a2a2a; border-radius:3px; padding:0 3px; color:#6b7280; background:#1a1a1a }

/* Empty state */
.search-empty { padding:24px 14px; text-align:center; color:#4b5563; font-size:12px }

/* Nav trigger button */
.search-trigger { display:flex; align-items:center; gap:7px; padding:3px 9px; border:1px solid #2a2a2a; border-radius:5px; font-size:11px; color:#6b7280; cursor:pointer; transition:all .15s; margin-left:auto }
.search-trigger:hover { border-color:#3a3a3a; color:#9ca3af }
.search-trigger svg { flex-shrink:0 }
.search-trigger-hint { font-size:9px; font-family:'IBM Plex Mono',monospace; color:#4b5563; border:1px solid #2a2a2a; border-radius:3px; padding:1px 4px }

/* ── 33. Landing page (body.page-landing scope) ──────────────────── */

body.page-landing {
  min-height:100vh; padding:0;
}

/* ── Landing nav — minimal top bar ── */
.landing-nav {
  position:fixed; top:0; left:0; right:0; z-index:10;
  display:flex; align-items:center; justify-content:flex-end;
  max-width:1100px; margin:0 auto;
  padding:28px 48px;
}

.landing-nav-links {
  display:flex; gap:32px;
}

.landing-nav-link {
  font-family:'IBM Plex Sans',sans-serif;
  font-size:13px; font-weight:500; color:#9ca3af;
  text-decoration:none; letter-spacing:.3px;
  padding-bottom:2px;
  border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
.landing-nav-link:hover {
  color:#f1f5f9;
  border-bottom-color:var(--accent);
}

.landing-container {
  position:relative; z-index:2;
  max-width:1100px; width:100%;
  margin:0 auto;
  padding:0 48px;
}

/* ── Fade-in-up entrance animation ── */
@keyframes lp-enter {
  from { opacity:0; transform:translateY(28px) }
  to   { opacity:1; transform:translateY(0) }
}
.lp-reveal {
  opacity:0; animation:lp-enter 1.2s ease-out forwards;
}
.lp-delay-1 { animation-delay:0.35s }
.lp-delay-2 { animation-delay:0.8s }
.lp-delay-3 { animation-delay:1.1s }

/* ── Hero — asymmetric split ── */
.landing-hero {
  display:grid; grid-template-columns:1.1fr 0.9fr;
  gap:80px; align-items:end;
  min-height:auto;
  padding:220px 0 160px;
}

.landing-hero-left { text-align:left }

.landing-tagline {
  font-size:11px; font-weight:600; color:#6b7280;
  letter-spacing:2.4px; text-transform:uppercase;
  margin-bottom:24px;
}

.landing-headline {
  display:flex; align-items:baseline; gap:16px;
  margin-bottom:28px;
}
.landing-headline .login-brand-21   { font-size:88px }
.landing-headline .login-brand-name { font-size:88px; color:#c9d1d9 }

.landing-statement {
  font-family:'Source Serif 4',Georgia,serif;
  font-size:22px; font-weight:400; color:#c9d1d9; line-height:1.6;
  max-width:480px;
}

.landing-hero-right {
  text-align:left;
  padding-bottom:8px;
}

.landing-philosophy {
  font-family:'Source Serif 4',Georgia,serif;
  font-size:16px; font-weight:400; color:#9ca3af; line-height:1.8;
  margin-bottom:40px;
}

.landing-hero-cta {
  display:inline-block; width:auto; padding:16px 52px;
  text-decoration:none; text-align:center;
  font-size:15px; font-weight:600; letter-spacing:.3px;
}

/* ── Feature pillars — 1 + 2 hierarchy layout ── */
.landing-features {
  margin-bottom:100px;
}

/* Lead pillar — full-width, larger, the primary capability */
.landing-feature-lead-pillar {
  display:grid; grid-template-columns:300px 1fr;
  column-gap:56px;
  padding-bottom:64px;
  margin-bottom:64px;
  border-bottom:1px solid var(--border);
}
.landing-feature-lead-pillar .landing-feature-title {
  font-family:'Playfair Display',Georgia,serif;
  font-size:28px; font-weight:700; color:#f1f5f9;
  line-height:1.35;
}
.landing-feature-lead-pillar .landing-feature-content {
  border-left:2px solid var(--accent);
  padding-left:28px;
}
.landing-feature-lead-pillar .landing-feature-lead {
  font-family:'Source Serif 4',Georgia,serif;
  font-size:17px; font-weight:600; color:#c9d1d9; line-height:1.65;
  margin-bottom:16px;
}
.landing-feature-lead-pillar .landing-feature-body {
  font-family:'Source Serif 4',Georgia,serif;
  font-size:15px; font-weight:400; color:#9ca3af; line-height:1.8;
}

/* Supporting pillars — two columns, compact */
.landing-feature-pair {
  display:grid; grid-template-columns:1fr 1fr;
  gap:48px;
}

.landing-feature-supporting {}

.landing-feature-supporting .landing-feature-title {
  font-family:'Playfair Display',Georgia,serif;
  font-size:22px; font-weight:700; color:#f1f5f9;
  line-height:1.35;
  margin-bottom:16px;
  padding-bottom:14px;
  border-bottom:1px solid var(--border);
}

.landing-feature-supporting .landing-feature-content {
  border-left:2px solid var(--accent);
  padding-left:20px;
}

.landing-feature-supporting .landing-feature-lead {
  font-family:'Source Serif 4',Georgia,serif;
  font-size:15px; font-weight:600; color:#c9d1d9; line-height:1.65;
  margin-bottom:12px;
}

.landing-feature-supporting .landing-feature-body {
  font-family:'Source Serif 4',Georgia,serif;
  font-size:14px; font-weight:400; color:#9ca3af; line-height:1.75;
}

/* ── Footer ── */
.landing-footer {
  border-top:1px solid var(--border); padding:32px 0;
  text-align:center;
}
.landing-footer-brand {
  display:flex; align-items:baseline; justify-content:center;
  gap:6px; margin-bottom:12px;
}
.landing-footer-brand .login-brand-21   { font-size:18px }
.landing-footer-brand .login-brand-name { font-size:18px }

.landing-footer-disclaimer {
  font-size:10px; color:#4b5563; line-height:1.5;
  margin-bottom:8px;
}
.landing-footer-copy {
  font-size:10px; color:#4b5563;
}

/* ── Mobile — all public pages ── */
@media (max-width:800px) {

  /* Landing page */
  .landing-nav { padding:20px 24px }
  .landing-nav-links { gap:24px }
  .landing-container { padding:0 24px }
  .landing-hero {
    grid-template-columns:1fr; gap:40px;
    min-height:auto; padding:100px 0 48px;
  }
  .landing-headline .login-brand-21,
  .landing-headline .login-brand-name { font-size:48px }
  .landing-statement { font-size:17px }
  .landing-philosophy { font-size:14px }
  .landing-hero-cta { padding:14px 40px; font-size:14px }
  .landing-feature-lead-pillar { grid-template-columns:1fr; gap:20px }
  .landing-feature-lead-pillar .landing-feature-title { font-size:22px }
  .landing-feature-pair { grid-template-columns:1fr; gap:40px }

  /* Login / logout panel — stack vertically on mobile */
  .login-panel {
    flex-direction:column; max-width:400px;
  }
  .login-brand { padding:32px 28px 24px }
  .login-brand-21   { font-size:28px !important }
  .login-brand-name { font-size:28px !important }
  .login-brand-sub  { font-size:10px }
  .login-brand-desc { font-size:12px; margin-top:16px }
  .login-divider {
    width:auto; height:1px; margin:0 28px;
  }
  .login-form-side { padding:24px 28px 32px }
  .logout-message { font-size:18px }
  .logout-sub { font-size:13px }
}

/* ── 34. Structural hierarchy — semantic structural roles (.sh-*) ──
 * Four tiers for all structural text (titles, headers, labels, utilities).
 * Encode color + weight only (not size, family, or layout).
 * Mirrors the .dh-* data hierarchy — .dh-* is for numbers/values,
 * .sh-* is for structural chrome. Never mix them.
 *
 * Tokenized via --text-* custom properties in :root so the entire
 * hierarchy can be re-graded by changing four values.
 * ─────────────────────────────────────────────────────────────────── */
.sh-headline { font-weight: 700; color: var(--text-headline) }  /* page title — one per page */
.sh-section  { font-weight: 600; color: var(--text-section)  }  /* section divisions within a page */
.sh-group    { font-weight: 700; color: var(--text-group)    }  /* category rows, group organizers */
.sh-utility  { font-weight: 400; color: var(--text-utility)  }  /* timestamps, minor affordances */

/* Section title classes — shared typography, color creates hierarchy.
   .section-title = dashboard/list page sections (S2)
   .st-panel      = hero card panel headers on detail pages (S2, no border)
   .st-card       = secondary card titles on detail pages (S3, dimmer) */
.st-panel { font-size: 13px; font-weight: 600; color: var(--text-section); letter-spacing: .02em; margin-bottom: 10px }
.st-card  { font-size: 13px; font-weight: 600; color: var(--text-group);   letter-spacing: .02em; margin-bottom: 10px }

/* ── 35. Asset Dashboard (body.page-asset-dash scope) ────────────── */

/* Ticker link — inherits parent identifier color, amber on hover (Gate 19) */
.asset-dash-link { color: inherit; text-decoration: none; cursor: pointer }
.asset-dash-link:hover { color: #d97706 }

/* Header bar — slim horizontal strip with identity + metrics */
/* Sticky metrics panel — identity bar + table stay visible on scroll */
body.page-asset-dash .ad-sticky-panel {
  position: sticky; top: 59px; z-index: 90;  /* nav (38px) + regime strip (~20px) + 1px border */
  background: var(--surface-body); margin-bottom: 20px;
}
body.page-asset-dash .asset-hdr {
  display: flex; align-items: center;
  background: var(--surface-card); border: 1px solid var(--border);
  border-radius: 8px 8px 0 0; padding: 10px 14px; gap: 10px;
  flex-wrap: wrap; border-bottom: none;
}
body.page-asset-dash .asset-hdr-identity {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
body.page-asset-dash .asset-hdr-ticker {
  font-family: 'IBM Plex Mono', monospace; font-weight: 700;
  font-size: 18px; color: var(--text-headline); letter-spacing: .03em;
}
body.page-asset-dash .asset-hdr-name {
  font-size: 14px; font-weight: 500; color: var(--text-headline);
}
body.page-asset-dash .asset-hdr-cat {
  font-size: 11px; color: var(--text-utility); letter-spacing: .04em; text-transform: uppercase;
}
/* Metrics table — replaces the old flex metrics + risk card */
body.page-asset-dash .ad-metrics-tbl {
  width: 100%; border-collapse: collapse;
  background: var(--surface-card); border: 1px solid var(--border);
  border-radius: 0 0 8px 8px; margin-bottom: 20px;
  font-size: 13px;
}
body.page-asset-dash .ad-metrics-tbl td {
  padding: 4px 14px; text-align: left; white-space: nowrap;
}
/* Row label column — "Value", "Signal", "SPY" */
body.page-asset-dash .ad-metrics-row-label {
  font-size: 10px; font-weight: 500; color: var(--text-utility);
  text-transform: uppercase; letter-spacing: .06em; width: 52px;
}
/* Header labels row */
body.page-asset-dash .ad-metrics-labels td {
  font-size: 10px; font-weight: 500; color: var(--text-utility);
  text-transform: uppercase; letter-spacing: .06em;
  padding: 10px 14px 4px; border-bottom: 1px solid var(--border-subtle);
}
/* Value row — primary numbers with signal label below */
body.page-asset-dash .ad-metrics-values td {
  font-family: 'IBM Plex Mono', monospace; font-size: 14px; font-weight: 600;
  padding: 6px 14px 8px; border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}
/* Signal label — sits below the value in the same cell */
body.page-asset-dash .ad-signal-label {
  font-family: 'IBM Plex Sans', sans-serif; font-size: 10px; font-weight: 500;
  letter-spacing: .04em; margin-top: 2px;
}
/* SPY reference row — same visual treatment as ticker row, position is the differentiator */
body.page-asset-dash .ad-metrics-spy td {
  font-family: 'IBM Plex Mono', monospace; font-size: 14px; font-weight: 600;
  padding: 6px 14px 8px; vertical-align: top;
}
body.page-asset-dash .ad-metrics-spy .ad-signal-label {
  font-family: 'IBM Plex Sans', sans-serif; font-size: 10px; font-weight: 500;
  letter-spacing: .04em; margin-top: 2px;
}
/* Vol Rank badge — border tint makes heat color visible even at cool/gray ranks */
body.page-asset-dash .ad-vr-badge {
  border: 1px solid; border-radius: 4px; padding: 0 5px;
  font-size: 12px; line-height: 20px;
}
/* Analytics chart containers */
body.page-asset-dash .ad-chart-svg { width: 100%; overflow: visible }
body.page-asset-dash .ad-chart-svg svg { width: 100%; height: auto }
/* Vol legend — inline toggles for multi-window comparison */
body.page-asset-dash .vol-legend {
  display: flex; gap: 14px; margin-bottom: 8px; font-size: 11px;
  color: var(--text-utility);
}
/* Global time window — floats on the right side as user scrolls */
body.page-asset-dash .ad-global-range {
  position: fixed; right: 20px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  background: var(--surface-card); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 6px; z-index: 100;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
body.page-asset-dash .ad-global-range .chart-range-btn {
  width: 32px; text-align: center; padding: 3px 0; font-size: 10px;
}
body.page-asset-dash .ad-global-range-label {
  font-size: 9px; font-weight: 600; color: var(--text-utility);
  letter-spacing: .08em; margin-bottom: 2px;
}
/* Intelligence card — derived signals below each chart (table layout for alignment) */
body.page-asset-dash .insight-card {
  background: var(--surface-card); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 0; margin-top: 0;
}
body.page-asset-dash .insight-tbl {
  width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed;
}
body.page-asset-dash .insight-tbl td {
  padding: 5px 10px; vertical-align: baseline; line-height: 1.4;
}
body.page-asset-dash .insight-tbl tr + tr td {
  border-top: 1px solid var(--vol-tertiary);
}
body.page-asset-dash .insight-tbl tr + tr td:first-child { padding-left: 14px }
body.page-asset-dash .insight-tbl tr + tr td:last-child  { padding-right: 14px }
body.page-asset-dash .insight-tbl .ic-label {
  width: 120px; vertical-align: top; white-space: normal;
}
body.page-asset-dash .insight-tbl .ic-label-name {
  font-weight: 600; color: var(--text-section); font-size: 12px; margin-top: 3px;
}
body.page-asset-dash .insight-tbl .ic-detail {
  color: var(--text-utility); white-space: normal; word-wrap: break-word; overflow-wrap: break-word;
  cursor: pointer;
}
body.page-asset-dash .insight-tbl .ic-detail .ic-text {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.5;
}
body.page-asset-dash .insight-tbl .ic-detail:hover { color: var(--text-section) }
/* Signal detail modal */
body.page-asset-dash .signal-modal-overlay {
  display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,.6); z-index: 400; align-items: center; justify-content: center;
}
body.page-asset-dash .signal-modal-overlay.open { display: flex }
body.page-asset-dash .signal-modal {
  background: var(--surface-card); border: 1px solid var(--border);
  border-radius: 8px; padding: 20px 24px; max-width: 520px; width: 90%;
  max-height: 80vh; overflow-y: auto;
}
body.page-asset-dash .signal-modal-title {
  font-weight: 600; font-size: 13px; color: var(--text-section); margin-bottom: 8px;
}
body.page-asset-dash .signal-modal-body {
  font-size: 12px; color: var(--text-utility); line-height: 1.6;
}
body.page-asset-dash .signal-modal-close {
  float: right; background: none; border: none; color: var(--text-utility);
  font-size: 16px; cursor: pointer; padding: 0 4px;
}
body.page-asset-dash .signal-modal-close:hover { color: var(--text-headline) }
body.page-asset-dash .insight-badge {
  display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .03em;
  padding: 1px 6px; border-radius: 3px; border: 1px solid;
  font-family: 'IBM Plex Mono', monospace; text-align: left;
}
body.page-asset-dash .insight-neutral  { color: var(--text-utility); border-color: var(--border-muted) }
body.page-asset-dash .insight-watch    { color: var(--accent); border-color: var(--accent-deep) }
body.page-asset-dash .insight-alert    { color: #ef4444; border-color: #7f1d1d }
body.page-asset-dash .insight-setup    { color: #22c55e; border-color: #14532d }
body.page-asset-dash .insight-emerging { color: #86efac; border-color: #14532d }

/* Opportunity dots (.opp-dots) are now rendered inside assetDashLink() as ticker suffixes.
   Styling lives in the shared .opp-dots class near .marquee-dot (section 06). */

/* ── 36. Universe Intelligence page (body.page-universe scope) ────── */

body.page-universe { font-size: 13px }

/* KPI grid: 3 columns for macro/vol/breadth hero section */
body.page-universe .uni-kpi-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px;
  margin-bottom: 16px;
}
body.page-universe .uni-kpi-card {
  background: var(--surface-card); border: 1px solid var(--border);
  border-radius: 8px; padding: 16px;
}
body.page-universe .uni-kpi-label {
  font-size: 12px; font-weight: 600; color: var(--text-utility);
  letter-spacing: .02em; margin-bottom: 6px;
}
body.page-universe .uni-kpi-value {
  font-family: 'IBM Plex Mono', monospace; font-size: 20px;
  font-weight: 700; color: var(--text-headline); line-height: 28px;
}
body.page-universe .uni-kpi-sub {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px;
  color: var(--text-utility); margin-top: 3px;
}

/* Momentum split: 2 columns for leaders/laggards */
body.page-universe .uni-mom-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}

/* Breadth bar inline */
body.page-universe .uni-breadth-bar {
  display: flex; height: 6px; border-radius: 3px; overflow: hidden;
  background: var(--border); margin-top: 4px; margin-bottom: 6px;
}
body.page-universe .uni-breadth-fill {
  height: 100%; border-radius: 3px; transition: width .3s;
}

/* Anchor signals table */
body.page-universe .uni-anchor-tbl { width: 100%; border-collapse: collapse; table-layout: fixed }
body.page-universe .uni-anchor-tbl th {
  font-size: 11px; font-weight: 600; color: var(--text-utility);
  letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 8px;
  text-align: left; border-bottom: 1px solid var(--border);
  background: var(--surface-card);
  position: static;
}
body.page-universe .uni-anchor-tbl td {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px;
  padding: 6px 8px; border-bottom: 1px solid var(--border-subtle);
  text-align: left; vertical-align: top;
}

/* Direction badges — UP/DOWN/FLAT (not asset type badges) */
body.page-universe .dir-up   { background: #0f2820; color: #5ab88e; font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 600 }
body.page-universe .dir-down { background: #2a1808; color: #c48c58; font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 600 }
body.page-universe .dir-flat { background: #1a1a1a; color: var(--text-utility); font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 600 }

/* Correlation term structure */
body.page-universe .corr-ts-label { font-size: 11px; color: var(--text-utility); width: 28px; display: inline-block }
body.page-universe .corr-ts-val   { font-size: 12px; font-weight: 600; color: var(--text-headline); width: 36px; text-align: right; display: inline-block }

/* ── 37a. Global regime strip (persistent bar, all pages) ────────── */
/* 6-lane market headline bar below the nav. Sticky at top:38px
   (below the 38px nav bar), z-index 95 (below nav 100, above content).
   Pure neutral surface colors — no blue tint. */
.regime-strip {
  position: sticky; top: 38px; z-index: 95;
  padding: 6px 24px;
}
.regime-strip-inner {
  display: flex; align-items: center; gap: 0;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 16px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
}
.rs-lane {
  display: flex; align-items: baseline; gap: 5px;
}
.rs-label {
  color: var(--text-utility); font-weight: 400; font-size: 10px;
  text-transform: uppercase; letter-spacing: .03em;
}
.rs-value {
  font-weight: 600; font-size: 11px;
  white-space: nowrap;
}
.rs-sep {
  color: var(--border-muted); font-size: 10px;
  margin: 0 8px;
}

/* ── 37. Tracker universe context strip ──────────────────────────── */

.universe-strip {
  margin-bottom: 14px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--surface-card); overflow: hidden;
}
.universe-strip-toggle {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; cursor: pointer; border: none; background: none;
  width: 100%; text-align: left;
  font-size: 12px; font-weight: 600; color: var(--text-group);
  transition: color .15s;
}
.universe-strip-toggle:hover { color: var(--text-section) }
.universe-strip-toggle .us-arrow {
  font-size: 9px; transition: transform .15s; color: var(--text-utility);
}
.universe-strip-toggle.open .us-arrow { transform: rotate(90deg) }
.universe-strip-summary { color: var(--text-utility); font-weight: 400 }
.universe-strip-panel {
  display: none; padding: 0 14px 14px 14px;
  border-top: 1px solid var(--border-subtle);
}
.universe-strip-panel.open { display: block }
.universe-strip-cards {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px;
  margin-top: 10px;
}
.universe-strip-card {
  padding: 10px; border: 1px solid var(--border-subtle); border-radius: 6px;
}
.universe-strip-card .us-label {
  font-size: 11px; font-weight: 600; color: var(--text-utility);
  letter-spacing: .02em; margin-bottom: 4px;
}
.universe-strip-card .us-value {
  font-family: 'IBM Plex Mono', monospace; font-size: 14px;
  font-weight: 600; color: var(--text-headline);
}
.universe-strip-card .us-sub {
  font-size: 11px; color: var(--text-utility); margin-top: 2px;
}

/* ════════════════════════════════════════════════════════════════════
   38 · Opportunity Cost Tool — benchmark toggles
   Used on /d/tool/opportunity-cost. Uses the platform's standard
   .toggle-switch component (section 7) wrapped in .toggle-wrap rows.
   Additional modifiers here just provide the ticker + label layout
   next to each switch and the horizontal row container.
   ════════════════════════════════════════════════════════════════════ */
.opp-benchmark-row {
  display: flex; flex-wrap: wrap; gap: 18px;
  align-items: center;
  margin-top: 12px; margin-bottom: 4px;
  padding: 8px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  background: var(--surface-card);
}
.opp-bench-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer;
  font-family: 'IBM Plex Sans', sans-serif;
}
.opp-bench-toggle-ticker {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; font-weight: 700;
  color: var(--text-section);
  letter-spacing: .02em;
}
.opp-bench-toggle-label {
  font-size: 11px;
  color: var(--text-utility);
}

/* Correlation chip in chart title row — ρ=0.72 style. Teal tint (like
   other correlation signals on the platform, e.g. corr chart), small and
   structural — never competes with amber CTAs or green/red signal colors. */
.opp-corr-chip {
  display: inline-flex; align-items: baseline; gap: 3px;
  padding: 1px 7px;
  border: 1px solid var(--border-muted);
  border-radius: 4px;
  background: transparent;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; line-height: 1.4;
  color: var(--text-utility);
  cursor: default;
}
.opp-corr-chip .opp-corr-label {
  color: var(--corr-primary);
  font-weight: 600;
  font-family: 'IBM Plex Sans', sans-serif;
}
.opp-corr-chip .opp-corr-val {
  color: var(--text-section);
  font-weight: 600;
}

/* Limited-history flag — shown when benchmark history truncates the
   comparison window. Amber dot is the only accent use (matches WATCH
   severity convention — info, not alarm). Text stays utility gray. */
.opp-hist-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--text-utility);
  font-family: 'IBM Plex Sans', sans-serif;
}
.opp-hist-chip .opp-hist-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}

/* Winners/losers strip — horizontal ranking above the chart rows.
   One line per active benchmark, sorted worst-drag-first. */
.opp-winners-strip {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 16px 18px;
  margin-top: 12px;
  padding: 8px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  background: var(--surface-card);
}
.opp-winners-strip:empty { display: none; }
.opp-winners-label {
  font-size: 10px; font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-utility);
}
.opp-winner-item {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
}
.opp-winner-ticker {
  color: var(--text-section);
  font-weight: 600;
}
.opp-winner-gap {
  font-weight: 600;
}

/* ── 39. Rates & Fixed Income dashboard (body.page-rates scope) ── */
body.page-rates { font-size: 13px }
/* Insight card pattern — mirrors page-asset-dash insight-tbl. Duplicated under
   page-rates scope to avoid touching existing asset-dash CSS. A future refactor
   should extract to a shared scope (.insight-panel) — flagged for cleanup. */
body.page-rates .insight-tbl {
  width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed;
}
body.page-rates .insight-tbl td {
  padding: 5px 10px; vertical-align: baseline; line-height: 1.4;
}
body.page-rates .insight-tbl tr + tr td {
  border-top: 1px solid var(--vol-tertiary);
}
body.page-rates .insight-tbl .ic-label {
  width: 120px; vertical-align: top; white-space: normal;
}
body.page-rates .insight-tbl .ic-label-name {
  font-weight: 600; color: var(--text-section); font-size: 12px; margin-top: 3px;
}
body.page-rates .insight-tbl .ic-detail {
  color: var(--text-utility); white-space: normal; word-wrap: break-word; overflow-wrap: break-word;
  line-height: 1.5;
}
body.page-rates .insight-badge {
  display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .03em;
  padding: 1px 6px; border-radius: 3px; border: 1px solid;
  font-family: 'IBM Plex Mono', monospace; text-align: left;
}
body.page-rates .insight-neutral  { color: var(--text-utility); border-color: var(--border-muted) }
body.page-rates .insight-watch    { color: var(--accent); border-color: var(--accent-deep) }
body.page-rates .insight-alert    { color: #ef4444; border-color: #7f1d1d }
body.page-rates .insight-ok       { color: #86efac; border-color: #14532d }