/* ═══════════════════════════════════════════════════════════════════
   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)
   ═══════════════════════════════════════════════════════════════════ */

/* ── 01. Google Fonts ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ── 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 */
}

/* ── 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;
}

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

.hdr         { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; flex-wrap: wrap }
.hdr-title   { font-size: 18px; font-weight: 700; color: #d97706; letter-spacing: .01em }
.hdr-info    { display: flex; flex-direction: column; gap: 3px }
.hdr-meta    { font-size: 13px; color: #6b7280 }
.hdr-time    { color: #d97706; 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: #6b7280; 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: #9ca3af; font-size: 11px; font-weight: 400;
  padding: 6px 10px; border-radius: 6px; white-space: nowrap; z-index: 100;
  border: 1px solid var(--border-muted); pointer-events: none;
}
.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: #d97706 }
  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-size: 12px; font-weight: 700; letter-spacing: .5px; white-space: nowrap }
.top-nav-brand-21 { color: #d97706 }
.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: #d97706 }

/* 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: #d97706 }

.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: #d97706 }

/* 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: #d97706 }

.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: #d97706 }
.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: #d97706 }
.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: #d97706; color: var(--surface-card); border: 1px solid #d97706 }
.btn-amber:hover   { background: #b45309; color: var(--surface-card); border-color: #b45309 }

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

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


.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 }

/* 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: #d97706; font-size: 10px; vertical-align: middle; margin-left: 3px }
body.page-tracker .hm-tile .marquee-dot { color: #0f172a }

/* 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: #d97706;
  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: #fbbf24; }

/* ── 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: #92400e }
.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-edit { border-color: #92400e }   /* 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: #d97706 }   /* AMBER — was blue #2563eb */
.form-input[readonly]      { color: #6b7280; cursor: not-allowed }
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='%23d97706' 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: #d97706 }

/* 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: #d97706; font-weight: 700 }
.dp-day.dp-today:hover { background: var(--surface-hover) }
.dp-day.dp-selected { background: #d97706; color: var(--surface-card); font-weight: 700 }
.dp-day.dp-selected:hover { background: #b45309 }
.dp-day.dp-selected.dp-today { background: #d97706; 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: #d97706 }
.dp-today-btn:hover { color: #fbbf24 }

/* 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: 38px;           /* nav bar height — header row stays below nav when scrolling */
  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: #d97706;
  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: #fbbf24; 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: #d97706; cursor: pointer; padding: 2px 4px; font-size: 12px; line-height: 1; border-radius: 3px; transition: all .15s; opacity: .7 }
.arrow-btn:hover    { color: #fbbf24; background: #78350f33; 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: #d97706;
  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   { font-size: 15px }

/* ── 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: #d97706; border-color: #92400e }
.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: #d97706; 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: #fbbf24 }
.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 */

/* ── 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: 38px;   /* sticks below nav bar (38px nav height) */
  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: #d97706;
  background: var(--surface-nav);
  border-right: 2px solid var(--border);
  padding: 8px 5px;
}
body.page-tracker td.name      { color: #cbd5e1 }
body.page-tracker td.ticker    { font-weight: 700; color: #f1f5f9; letter-spacing: .03em; min-width: 58px }
/* .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: #d97706; 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   { font-size: 15px }
.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: #d97706 }

.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 #d97706; color: #d97706; 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 }
body.page-perf .page      { padding: 18px 22px }
body.page-perf .hdr-title { font-size: 15px }

.section       { margin-bottom: 28px }
.section-title { font-size: 15px; font-weight: 700; color: #d97706; letter-spacing: .02em; margin-bottom: 14px; padding-bottom: 6px; border-bottom: 1px solid var(--border) }

/* 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: #d97706; 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: 12px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; padding-left: 10px; border-left: 3px solid #d97706 }

/* primary-badge: outline style, amber — was filled dark amber */
.primary-badge { background: transparent; color: #d97706; border: 1px solid #92400e; 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: #d97706; border-color: #d97706 }
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: #d97706; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px }
.modal-body       { font-size: 13px; color: #d1d5db; line-height: 1.6 }
.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 }
@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: #d97706; border-color: #d97706 }
.info-tip .tip-text {
  display: none;
  position: absolute; bottom: calc(100% + 8px); right: 0;
  width: 280px; padding: 10px 12px;
  background: var(--border); border: 1px solid var(--border-muted); border-radius: 6px;
  font-size: 12px; color: #d1d5db; 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: 50; 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 #92400e; border-radius: 4px; padding: 12px 16px; font-size: 13px; color: #9ca3af; line-height: 1.7; margin-bottom: 16px }
.ds-note strong { color: #d97706; 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: #d97706; 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 */
.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 }

/* 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: 'IBM Plex Mono', ui-monospace, monospace; font-size: 36px; font-weight: 700; color: #d97706; letter-spacing: -0.5px; line-height: 1 }
.login-brand-name { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 36px; font-weight: 700; color: #4b5563; letter-spacing: -0.5px; line-height: 1; margin-left: 8px }
.login-brand-sub { font-size: 10px; font-weight: 500; color: var(--border-muted); letter-spacing: 1.8px; text-transform: uppercase }
.login-brand-desc { font-size: 12px; color: #4b5563; line-height: 1.6; margin-top: 28px }

/* Amber vertical divider — inset from panel edges */
.login-divider { width: 1px; background: #d97706; 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-size: 14px; font-weight: 500; color: #6b7280; margin-bottom: 28px; letter-spacing: .3px }
.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: #d97706 }
.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: #d97706; 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: #b45309 }
.btn-login:active { background: #92400e }
.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-size: 20px; font-weight: 600; color: #f1f5f9; margin-bottom: 8px; letter-spacing: .2px }
.logout-sub     { font-size: 13px; color: #6b7280; 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: 'IBM Plex Mono', ui-monospace, monospace; font-size: 28px; font-weight: 700; color: #d97706; letter-spacing: -0.5px; line-height: 1 }
.site-footer-logo-name { font-family: 'IBM Plex Mono', ui-monospace, monospace; 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 #d97706 }
.site-footer-col a { font-size: 12px; color: #4b5563; text-decoration: none; transition: color .15s }
.site-footer-col a:hover { color: #d97706 }

/* 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 }

.sleeve-kpi { display: flex; gap: 8px; margin-bottom: 16px }
.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 }
.sleeve-kpi .mc-label { font-size: 10px; color: #6b7280; text-transform: uppercase; letter-spacing: .4px }
.sleeve-kpi .mc-val { font-size: 15px; font-weight: 700; color: #f1f5f9; font-family: 'IBM Plex Mono', monospace; margin-top: 2px }
.sleeve-kpi .mc-sub { font-size: 11px; 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: 38px; 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) }
.sleeve-table th.sortable { cursor: pointer; user-select: none }
.sleeve-table th.sortable:hover { color: #e5e7eb }
.sleeve-table th.sortable::after { content: ''; display: inline-block; margin-left: 4px; font-size: 9px; color: var(--border-muted) }
.sleeve-table th.sort-asc::after  { content: '\25B2'; color: #d97706 }
.sleeve-table th.sort-desc::after { content: '\25BC'; color: #d97706 }

.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: #d97706 }

/* Roll form — old→new leg comparison layout */
.roll-compare { display: grid; grid-template-columns: 1fr 28px 1fr; gap: 0; margin-bottom: 4px }
.roll-side { padding: 12px; border-radius: 6px }
.roll-closing { background: var(--surface-nav); border: 1px solid var(--border) }
.roll-opening { background: var(--surface-card); border: 1px solid var(--border) }
.roll-arrow { display: flex; align-items: center; justify-content: center; color: var(--border-muted); font-size: 18px }
.roll-side-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: #4b5563; margin-bottom: 8px }
.roll-opening .roll-side-label { color: #d97706 }
.roll-old-summary { font-size: 12px; color: #c9d1d9; margin-bottom: 6px }
.roll-old-detail { font-size: 11px; color: #6b7280; margin-bottom: 10px }

/* ── 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: #d97706 }
.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: #d97706 }
.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: #d97706;
  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: #d97706;
  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: #d97706 }
.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: 38px; 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: #d97706; 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: #d97706; border-color: #92400e; 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 #92400e }

/* 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: #d97706; color: #d97706 }
/* Reset button — muted, signals reversible untrigger */
.thesis-checklist .reset-btn { padding: 2px 6px; color: #6b7280 }
.thesis-checklist .reset-btn:hover { border-color: #92400e; color: #d97706 }

/* 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: #d97706 }
/* Content column */
.tl-body { flex: 1; padding-left: 14px }
.tl-body .j-status { font-size: 10px; font-weight: 600; letter-spacing: .04em; color: #d97706; 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: #d97706; 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: #d97706 }


/* ── 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: #d97706 }

/* 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: #d97706; 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: #d97706 }
.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: #d97706 }
.rte-body h3 { font-size: 13px; font-weight: 700; color: #d97706; 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: #d97706; font-style: normal }
.thesis-summary h3 { font-size: 13px; font-weight: 700; color: #d97706; 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: #d97706; border-color: #92400e; background: #1a1400 }

/* ── 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: #d97706 }  /* summary row labels only (Cumulative, Total) */