/* =============================================================================
   MacroInsight — brand & design-system layer
   -----------------------------------------------------------------------------
   Loaded AFTER style.css. Purely presentational: it re-tokenises the foundation
   and refines shell/surface/control primitives. No layout logic, no content,
   no behaviour is changed here — every selector already exists in the product.

   Design principles
   -----------------
   1. ACHROMATIC CHROME. The MacroInsight mark is monochrome, so the interface
      chrome is monochrome. Green/red are demoted from "brand colour" to
      "data colour" and appear only where they encode a regime, a delta or a
      state. Previously the accent green sat on nav items, buttons, the mode
      switch and the topbar, which put UI furniture in direct competition with
      the signals the product exists to communicate.
   2. ONE ELEVATION STORY. Flat surfaces separated by hairlines and space, not
      by gradients and glows. Shadow is reserved for things that genuinely float
      (modals, popovers, flyouts).
   3. NUMBERS ARE THE INTERFACE. Tabular figures everywhere, so columns of
      prices, scores and percentages align and stay scannable.
   4. QUIETER TYPOGRAPHY. Wide-tracked uppercase is reserved for micro-labels.
      Titles get size and weight instead of letter-spacing.
   ========================================================================== */

/* =============================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* --- Ink ramp: neutral, very slightly cool. No hue in the chrome. ------- */
  --mi-ink-950:  #08090B;        /* page                                     */
  --mi-ink-900:  #0C0E11;        /* sidebar / topbar                         */
  --mi-ink-850:  #121417;        /* panel                                    */
  --mi-ink-800:  #171A1E;        /* raised panel                             */
  --mi-ink-750:  #1D2126;        /* hover / pressed                          */
  --mi-ink-700:  #262B32;        /* strong divider                           */

  /* --- Surfaces (remap the original tokens) ------------------------------ */
  --bg:      var(--mi-ink-950);
  --bg-2:    var(--mi-ink-900);
  --panel:   var(--mi-ink-850);
  --panel-2: var(--mi-ink-800);
  --panel-3: var(--mi-ink-750);

  --border:        rgba(255, 255, 255, 0.065);
  --border-strong: rgba(255, 255, 255, 0.125);
  --mi-border-loud: rgba(255, 255, 255, 0.20);

  /* --- Text ------------------------------------------------------------- */
  --text:       #ECEEF2;
  --text-dim:   #A3AAB6;
  --text-faint: #6F7783;
  --text-primary:   var(--text);
  --text-secondary: var(--text-dim);
  --text-muted:     var(--text-dim);

  /* --- Brand ------------------------------------------------------------
     The identity is black/white, so the "accent" is light. Primary actions
     invert to near-white on ink; selection states are achromatic. This frees
     green and red to mean only one thing each.                              */
  --mi-brand:        #F2F4F7;
  --mi-brand-ink:    #0A0B0D;
  --mi-brand-soft:   rgba(255, 255, 255, 0.09);
  --mi-brand-softer: rgba(255, 255, 255, 0.045);
  --accent:      var(--mi-brand);
  --accent-glow: rgba(255, 255, 255, 0.12);

  /* --- Data semantics ----------------------------------------------------
     Tuned for dark surfaces: enough chroma to read at 10px, not so much that
     a wall of badges vibrates.                                              */
  --bull:      #3ECF8E;
  --bull-dim:  #2A8F65;
  --bull-glow: rgba(62, 207, 142, 0.22);
  --bull-wash: rgba(62, 207, 142, 0.10);
  --bear:      #F0616C;
  --bear-dim:  #A8414A;
  --bear-glow: rgba(240, 97, 108, 0.22);
  --bear-wash: rgba(240, 97, 108, 0.10);
  --chop:      #8B94A2;
  --chop-glow: rgba(139, 148, 162, 0.18);
  --chop-wash: rgba(139, 148, 162, 0.09);
  --mi-warn:   #E3B04B;
  --mi-warn-wash: rgba(227, 176, 75, 0.11);
  --mi-info:   #6AA2F0;
  --mi-info-wash: rgba(106, 162, 240, 0.11);

  /* --- Elevation --------------------------------------------------------- */
  --mi-shadow-0: none;
  --mi-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30);
  --mi-shadow-2: 0 4px 16px rgba(0, 0, 0, 0.34);
  --mi-shadow-3: 0 16px 48px rgba(0, 0, 0, 0.52), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow:      var(--mi-shadow-1);
  --shadow-soft: var(--mi-shadow-1);

  /* --- Geometry ----------------------------------------------------------
     16.4% corner ratio, taken from the mark's own rounded square.           */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* --- Type -------------------------------------------------------------- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --mi-track-label: 0.11em;   /* micro caps        */
  --mi-track-tight: -0.011em; /* display / titles  */

  /* --- Motion ------------------------------------------------------------ */
  --mi-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --mi-fast: 120ms;
  --mi-med:  200ms;
}

/* =============================================================================
   2. BASE
   ========================================================================== */
html, body {
  /* The old body had two green radial washes. The page is now truly neutral —
     the only colour on screen comes from data. */
  background: var(--bg);
  font-family: var(--font-sans);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv05' 1, 'ss03' 1;
}

/* Tabular figures wherever numbers are compared vertically. */
.mono,
[class*='-value'],
[class*='-score'],
[class*='-price'],
[class*='-pct'],
[class*='-num'],
[class*='-delta'],
table, td, th,
input, select {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 1;
}
.mono { font-family: var(--font-mono); letter-spacing: -0.01em; }

::selection { background: rgba(255, 255, 255, 0.16); color: #fff; }

/* Focus: one visible, consistent ring across every interactive element. */
a:focus-visible, button:focus-visible, select:focus-visible,
input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Scrollbars: thin, neutral, only visible against their track on hover. */
* { scrollbar-width: thin; scrollbar-color: var(--mi-ink-700) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--mi-ink-700);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover { background: #363C45; background-clip: content-box; }

/* =============================================================================
   3. BRAND LOCKUP
   -----------------------------------------------------------------------------
   The mark and wordmark are painted with CSS masks so they inherit currentColor
   and stay crisp at any size — no second asset for light/dark, no recolour.
   ========================================================================== */
.mi-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
  transition: opacity var(--mi-fast) var(--mi-ease);
}
.mi-brand:hover { opacity: 0.72; }

.mi-mark,
.mi-wordmark {
  display: block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  flex-shrink: 0;
}
.mi-mark {
  width: 22px;
  height: 22px;
  -webkit-mask-image: url('brand/macroinsight-icon.svg');
  mask-image: url('brand/macroinsight-icon.svg');
}
.mi-wordmark {
  /* 1008 x 172 artwork → 13px cap height reads as ~76px wide */
  width: 88px;
  height: 15px;
  -webkit-mask-image: url('brand/macroinsight-wordmark.svg');
  mask-image: url('brand/macroinsight-wordmark.svg');
}

/* Product name sits under the identity, not next to it: MacroInsight is the
   company, Quant Regime is the product. */
.mi-product {
  display: block;
  margin-top: 7px;
  padding-left: 31px;
  font: 600 9px/1 var(--font-sans);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-brand {
  display: block;
  padding: 2px 8px 16px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.sidebar-brand .sidebar-collapse-btn {
  position: absolute;
  top: 0;
  right: 4px;
  margin-left: 0;
}

/* Collapsed rail: mark only, centred. */
.app.sidebar-collapsed:not(.sidebar-flyout-open) .mi-wordmark,
.app.sidebar-collapsed:not(.sidebar-flyout-open) .mi-product { display: none; }
.app.sidebar-collapsed:not(.sidebar-flyout-open) .mi-brand { justify-content: center; }
.app.sidebar-collapsed:not(.sidebar-flyout-open) .sidebar-brand { padding-bottom: 12px; }
.app.sidebar-collapsed:not(.sidebar-flyout-open) .sidebar-brand .sidebar-collapse-btn {
  position: static;
  display: block;
  margin: 10px auto 0;
}

/* =============================================================================
   4. SIDEBAR
   ========================================================================== */
.sidebar {
  background: var(--mi-ink-900);
  border-right: 1px solid var(--border);
  padding: 18px 10px;
  gap: 18px;
}

.nav-section-label {
  font: 600 9px/1 var(--font-sans);
  letter-spacing: 0.19em;
  color: var(--text-faint);
  padding: 12px 10px 6px;
  opacity: 1;
}

/* Nav items lose their boxes. Weight, colour and a 2px marker carry state —
   73 filled rounded rectangles was more chrome than the content deserved. */
.nav-item {
  border: 0;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  padding-right: 52px;
  gap: 10px;
  font: 500 12px/1.2 var(--font-sans);
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--text-dim);
  transition: background var(--mi-fast) var(--mi-ease),
              color var(--mi-fast) var(--mi-ease);
}
.nav-item .nav-icon { color: var(--text-faint); font-size: 14px; }
.nav-item:hover {
  background: var(--mi-brand-softer);
  border-color: transparent;
  color: var(--text);
}
.nav-item:hover .nav-icon { color: var(--text-dim); }
.nav-item.active {
  background: var(--mi-brand-soft);
  border-color: transparent;
  color: var(--text);
  font-weight: 600;
  box-shadow: none;
}
.nav-item.active .nav-icon { color: var(--text); }
/* The active marker: a hairline rule flush to the rail, not a glow. */
.nav-item.active::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 16px;
  border-radius: 0 2px 2px 0;
  background: var(--mi-brand);
}

.nav-group-header {
  font: 600 10px/1 var(--font-sans);
  letter-spacing: 0.14em;
  color: var(--text-faint);
}
.nav-favorite-toggle { color: var(--text-faint); }

/* Sidebar status block: label/value pairs read as a spec sheet. */
.sidebar-status { border-top: 1px solid var(--border); padding: 14px 6px; gap: 11px; }
.sidebar-status .ss-label {
  font: 600 8.5px/1 var(--font-sans);
  letter-spacing: 0.18em;
  color: var(--text-faint);
}
.sidebar-status .ss-value {
  font: 500 11.5px/1.3 var(--font-mono);
  color: var(--text-dim);
  letter-spacing: -0.01em;
}

/* Regime key: the one place in the chrome where semantic colour belongs. */
.regime-key { gap: 6px; }
.rk-item {
  font: 600 9.5px/1 var(--font-sans);
  letter-spacing: 0.12em;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 5px 9px;
}
.rk-dot { box-shadow: none; }

.sidebar-foot { border-top: 1px solid var(--border); }
.sidebar-foot-meta { font-size: 10px; color: var(--text-faint); }
.sidebar-foot-clock { color: var(--text-dim); }

/* =============================================================================
   5. TOPBAR
   ========================================================================== */
.topbar {
  background: color-mix(in srgb, var(--mi-ink-900) 88%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--border);
  padding: 12px 24px;
  gap: 20px;
}

/* Page identity: breadcrumb → title → description, a clean 3-step hierarchy.
   The title previously carried 0.18em tracking at 16px, which made it read as
   a label rather than a heading. */
.brand-text h1 {
  font-size: 19px;
  font-weight: 650;
  letter-spacing: var(--mi-track-tight);
  text-transform: none;
  color: var(--text);
  line-height: 1.15;
}
.brand-text .sub {
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-faint);
  text-transform: none;
  font-family: var(--font-sans);
}
.page-breadcrumb {
  font: 600 9px/1 var(--font-sans);
  letter-spacing: 0.16em;
  color: var(--text-faint);
  margin-bottom: 5px;
}
/* The green underline beneath the page title was decoration masquerading as
   meaning. */
.brand-text h1::after,
.brand::after { display: none !important; }

.status-bar { gap: 10px; }

.topbar-macro-pill {
  background: var(--mi-brand-softer);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  box-shadow: none;
}
.topbar-macro-label {
  font: 600 8.5px/1 var(--font-sans);
  letter-spacing: 0.16em;
  color: var(--text-faint);
}
.topbar-macro-value { font-weight: 600; letter-spacing: 0; }

/* =============================================================================
   6. CONTROLS
   ========================================================================== */

/* --- Buttons ------------------------------------------------------------ */
.btn {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--mi-brand-softer);
  color: var(--text-dim);
  font: 600 10.5px/1 var(--font-sans);
  letter-spacing: var(--mi-track-label);
  padding: 8px 13px;
  box-shadow: none;
  transition: background var(--mi-fast) var(--mi-ease),
              border-color var(--mi-fast) var(--mi-ease),
              color var(--mi-fast) var(--mi-ease);
}
.btn:hover {
  background: var(--mi-brand-soft);
  border-color: var(--mi-border-loud);
  color: var(--text);
}
.btn:active { transform: none; background: var(--panel-3); }
.btn .btn-icon { font-size: 12px; opacity: 0.85; }

/* Primary inverts to the brand's white-on-black. It is the only high-contrast
   element in the chrome, so it is unambiguously the primary action. */
.btn.primary {
  background: var(--mi-brand);
  border-color: var(--mi-brand);
  color: var(--mi-brand-ink);
  font-weight: 700;
}
.btn.primary:hover { background: #fff; border-color: #fff; color: var(--mi-brand-ink); }
.btn.primary .btn-icon { opacity: 1; }

/* Toggled-on state: filled neutral, not a green glow. */
.btn.toggle[data-on='true'],
.btn.toggle[aria-pressed='true'] {
  background: rgba(255, 255, 255, 0.13);
  border-color: var(--mi-border-loud);
  color: var(--text);
  box-shadow: none;
}
.btn[disabled] { opacity: 0.4; }
.btn.icon-only { padding: 8px; width: 32px; height: 32px; justify-content: center; }

/* --- Segmented controls (mode switch, language, density, timeframe) -----
   One shared physical model: a recessed track with a raised light thumb. */
.mode-switch,
.topbar-lang-switch,
.workspace-segments {
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px;
  gap: 2px;
}
.mode-btn,
.topbar-lang-pill,
.workspace-segment {
  border: 0;
  background: transparent;
  color: var(--text-faint);
  border-radius: var(--radius-xs);
  padding: 6px 12px;
  font: 600 10px/1 var(--font-sans);
  letter-spacing: var(--mi-track-label);
  transition: background var(--mi-fast) var(--mi-ease),
              color var(--mi-fast) var(--mi-ease);
}
.mode-btn:hover,
.topbar-lang-pill:hover,
.workspace-segment:hover { background: var(--mi-brand-softer); color: var(--text-dim); }
.mode-btn.active,
.topbar-lang-pill.active,
.topbar-lang-pill[aria-pressed='true'],
.workspace-segment.active,
.workspace-segment[aria-pressed='true'] {
  background: rgba(255, 255, 255, 0.11);
  color: var(--text);
  box-shadow: var(--mi-shadow-1);
}

/* --- Selects ------------------------------------------------------------ */
.global-asset-context,
.workspace-select,
select {
  background: var(--mi-brand-softer);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font: 600 10.5px/1 var(--font-sans);
  letter-spacing: var(--mi-track-label);
  padding: 8px 12px;
}
.global-asset-context:hover,
select:hover { border-color: var(--mi-border-loud); color: var(--text); }

/* =============================================================================
   7. SURFACES
   -----------------------------------------------------------------------------
   The board nested up to three levels of bordered, shadowed, gradient-filled
   panels. Outer panels keep a hairline; nested panels drop to a background
   shift only, so the eye stops counting boxes and starts reading data.
   ========================================================================== */
.main-panel,
.mb-panel,
.panel,
.page-explainer-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
}
.page-explainer-panel { background: var(--mi-brand-softer); }

/* Nested surfaces: no border, no shadow — just a lift in value. */
.main-panel .mb-panel,
.mb-panel .mb-panel,
.main-panel .main-panel {
  background: var(--panel-2);
  border-color: transparent;
}

.section-header {
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
  margin-bottom: 14px;
}
.section-header h2 {
  font: 650 13px/1.2 var(--font-sans);
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text);
}
.feed-sub {
  font: 400 11px/1.4 var(--font-sans);
  letter-spacing: 0;
  color: var(--text-faint);
  text-transform: none;
}

.mb-panel-title {
  font: 600 10px/1 var(--font-sans);
  letter-spacing: 0.15em;
  color: var(--text-dim);
}
.mb-panel-sub {
  font: 500 9.5px/1 var(--font-mono);
  color: var(--text-faint);
  letter-spacing: -0.01em;
}

/* Regime read strip — the highest-value module on the board, so it gets the
   most typographic contrast on the page. */
.mb-regime-cell { border-radius: var(--radius-sm); }
.mb-rc-label {
  font: 600 9px/1 var(--font-sans);
  letter-spacing: 0.17em;
  color: var(--text-faint);
}
.mb-regime-big {
  font-size: 26px;
  font-weight: 680;
  letter-spacing: -0.02em;
}

/* --- Asset cards (simple regime board) ---------------------------------- */
.srb-card {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-left-width: 2px;
  border-radius: var(--radius-sm);
  box-shadow: none;
  transition: background var(--mi-fast) var(--mi-ease),
              border-color var(--mi-fast) var(--mi-ease);
}
.srb-card:hover { background: var(--panel-3); border-color: var(--border-strong); }
.srb-card-name { font: 600 12.5px/1.3 var(--font-sans); letter-spacing: -0.005em; }
.srb-card-regime { font: 600 9.5px/1 var(--font-sans); letter-spacing: 0.15em; }
.srb-card-meta {
  font: 400 10.5px/1.3 var(--font-mono);
  color: var(--text-faint);
  letter-spacing: -0.01em;
}
.srb-tone-risk_on   { border-left-color: var(--bull); }
.srb-tone-risk_off  { border-left-color: var(--bear); }
.srb-tone-chop      { border-left-color: var(--chop); }

/* =============================================================================
   8. DATA DISPLAY
   ========================================================================== */

/* Badges were saturated, heavy and everywhere — 61 on the home board alone.
   Tinted text on a wash reads as an annotation; solid fills read as an alarm.
   Alarms should be rare. */
.mb-badge,
.badge,
.pill {
  border-radius: var(--radius-xs);
  padding: 3px 7px;
  font: 600 9px/1.35 var(--font-sans);
  letter-spacing: 0.11em;
  border: 1px solid transparent;
  background: var(--chop-wash);
  color: var(--text-dim);
  box-shadow: none;
}
.mb-badge-improving { background: var(--bull-wash); color: var(--bull); border-color: rgba(62, 207, 142, 0.22); }
.mb-badge-deteriorating { background: var(--bear-wash); color: var(--bear); border-color: rgba(240, 97, 108, 0.22); }
.mb-badge-neutral { background: rgba(255, 255, 255, 0.05); color: var(--text-faint); border-color: transparent; }

.mb-pos { color: var(--bull); }
.mb-neg { color: var(--bear); }
.mb-flat { color: var(--text-faint); }
.tone-green { color: var(--bull); }
.tone-slate { color: var(--chop); }

/* --- Tabular rows ------------------------------------------------------- */
.mb-mrow,
.mb-bench-row {
  border-bottom: 1px solid var(--border);
  transition: background var(--mi-fast) var(--mi-ease);
}
.mb-mrow:last-child,
.mb-bench-row:last-child { border-bottom: 0; }
.mb-mrow:hover,
.mb-bench-row:hover { background: var(--mi-brand-softer); }
.mb-mrank {
  font: 500 9.5px/1 var(--font-mono);
  color: var(--text-faint);
}
.mb-mname,
.mb-bench-sym { font: 600 11.5px/1 var(--font-sans); letter-spacing: 0.01em; color: var(--text); }
.mb-mscore,
.mb-bench-c { font-family: var(--font-mono); letter-spacing: -0.02em; }

.mb-stat-label {
  font: 500 10px/1.2 var(--font-sans);
  letter-spacing: 0.09em;
  color: var(--text-faint);
}
.mb-stat-value { font: 600 13px/1 var(--font-mono); letter-spacing: -0.02em; color: var(--text); }

table { border-collapse: collapse; }
th {
  font: 600 9px/1 var(--font-sans) !important;
  letter-spacing: 0.16em;
  color: var(--text-faint);
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  padding: 8px 10px;
}
td { border-bottom: 1px solid var(--border); padding: 8px 10px; }
tr:last-child td { border-bottom: 0; }

/* --- Timeframe / filter chips ------------------------------------------- */
.mb-tf-chip,
.ov-micro-chip {
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-faint);
  font: 600 9.5px/1 var(--font-sans);
  letter-spacing: 0.1em;
  padding: 5px 10px;
  transition: all var(--mi-fast) var(--mi-ease);
}
.mb-tf-chip:hover,
.ov-micro-chip:hover { border-color: var(--mi-border-loud); color: var(--text-dim); }
.mb-tf-chip.active,
.ov-micro-chip.active {
  background: rgba(255, 255, 255, 0.11);
  border-color: transparent;
  color: var(--text);
}

/* =============================================================================
   9. OVERLAYS
   ========================================================================== */
.modal-backdrop,
#modal-backdrop, #ms-modal-backdrop, #rule-modal-backdrop,
#diag-backdrop, #docs-backdrop {
  background: rgba(4, 5, 6, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal {
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--mi-shadow-3);
}
.modal-head { border-bottom: 1px solid var(--border); }
.modal-head h3 {
  font: 650 15px/1.2 var(--font-sans);
  letter-spacing: var(--mi-track-tight);
  text-transform: none;
}
.modal-subtitle { font-size: 11.5px; color: var(--text-faint); letter-spacing: 0; }
.modal-section-label {
  font: 600 9px/1 var(--font-sans);
  letter-spacing: 0.17em;
  color: var(--text-faint);
}
.modal-close {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-faint);
}
.modal-close:hover { background: var(--mi-brand-soft); color: var(--text); border-color: var(--border-strong); }

.workspace-popover,
.topbar-overflow-popover,
.tz-menu-popover,
.mb-spot-pop {
  background: var(--panel-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--mi-shadow-3);
}
.workspace-label {
  font: 600 9px/1 var(--font-sans);
  letter-spacing: 0.17em;
  color: var(--text-faint);
}

/* --- Status banner ------------------------------------------------------
   It previously floated over content with a transparent background, so the
   board showed through the text. Now it is an opaque, self-contained strip. */
.status-banner {
  background: var(--panel-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  box-shadow: var(--mi-shadow-2);
  padding: 7px 15px;
  font: 500 11px/1 var(--font-sans);
  letter-spacing: 0;
  color: var(--text-dim);
}
.status-banner.warn { border-color: rgba(227, 176, 75, 0.35); color: var(--mi-warn); background: var(--panel-2); }
.status-banner.error { border-color: rgba(240, 97, 108, 0.35); color: var(--bear); background: var(--panel-2); }
.status-banner .banner-dot { box-shadow: none; }

/* --- Footer ------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--border);
  background: var(--mi-ink-900);
  font: 500 10px/1 var(--font-sans);
  letter-spacing: 0.09em;
  color: var(--text-faint);
}

/* =============================================================================
   10. DE-GREENING THE CHROME
   -----------------------------------------------------------------------------
   These selectors used the old accent green as UI furniture: nav wrappers,
   selected chips, container tints, save buttons. Each is remapped to the
   achromatic scale. Data-bearing green (regime columns, positive deltas,
   bull dots, probability bars) is deliberately left untouched.
   ========================================================================== */

/* --- Sidebar: command routes, group rails, persona tabs ----------------- */
.nav-item.nav-command,
.sidebar .nav-item.nav-command,
.app.mode-tradfi .sidebar-nav .tradfi-route,
.app.mode-tradfi .sidebar-nav .nav-item.nav-command.tradfi-route {
  background: var(--mi-brand-softer);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
}
.app.mode-tradfi .sidebar-nav .tradfi-route:hover,
.app.mode-tradfi .sidebar-nav .nav-item.nav-command.tradfi-route:hover {
  background: var(--mi-brand-soft);
  border-color: var(--border-strong);
  color: var(--text);
}
.app.mode-tradfi .sidebar-nav .tradfi-route.active,
.app.mode-tradfi .sidebar-nav .nav-item.nav-command.tradfi-route.active,
.nav-item.nav-command.active {
  background: rgba(255, 255, 255, 0.11);
  border-color: var(--mi-border-loud);
  color: var(--text);
}
.app.mode-tradfi .sidebar-nav .tradfi-route .nav-icon,
.app.mode-tradfi .sidebar-nav .nav-item.nav-command.tradfi-route .nav-icon { color: var(--text-dim); }

.sidebar .nav-group.open > .nav-group-items { border-left-color: var(--border); }
.nav-group.open > .nav-group-header .nav-group-chevron { color: var(--text-dim); }
.nav-group.has-active:not(.open) > .nav-group-header .nav-group-title { color: var(--text); }

.persona-tab { border-radius: var(--radius-xs); font-weight: 600; }
.persona-tab.active {
  background: rgba(255, 255, 255, 0.11);
  border-color: var(--mi-border-loud);
  color: var(--text);
}

/* --- Selected chips and secondary actions ------------------------------ */
.srb-tf,
.overview-layout-btn {
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-faint);
  font-weight: 600;
  letter-spacing: 0.1em;
}
.srb-tf:hover,
.overview-layout-btn:hover {
  border-color: var(--mi-border-loud);
  background: var(--mi-brand-softer);
  color: var(--text-dim);
}
.srb-tf.active,
.overview-layout-btn.active {
  background: rgba(255, 255, 255, 0.12);
  border-color: transparent;
  color: var(--text);
}

.workspace-save-btn { border-color: var(--border-strong); color: var(--text-dim); }
.workspace-save-btn:hover { border-color: var(--mi-border-loud); color: var(--text); }

.hoi-btn-primary {
  background: var(--mi-brand);
  border-color: var(--mi-brand);
  color: var(--mi-brand-ink);
  font-weight: 700;
}
.hoi-btn-primary:hover { background: #fff; border-color: #fff; color: var(--mi-brand-ink); }

/* --- Container tints ---------------------------------------------------- */
.srb-shell {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
}
/* Orientation copy is a caption, not a card — a box around it made help text
   look like a data panel. */
.mb-mission {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  color: var(--text-faint);
}
.mb-mission strong { color: var(--text-dim); }
.morning-brief-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}

/* Universe cards keep a single identifying dot each; the card itself stays
   neutral so crypto and TradFi read as peers rather than as good/bad. */
.mb-uni-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel-2);
  box-shadow: none;
}
.mb-uni-card-crypto,
.mb-uni-card-tradfi { border-color: var(--border); box-shadow: none; }
.mb-uni-card-crypto .mb-uni-card-dot { background: var(--text-dim); box-shadow: none; }
.mb-uni-card-tradfi .mb-uni-card-dot { background: var(--mi-info); box-shadow: none; }

/* Universe card titles are labels, not signals. */
.mb-uni-card-title {
  color: var(--text);
  font: 650 11.5px/1 var(--font-sans);
  letter-spacing: 0.13em;
}

/* The page-title underline mirrors the market regime. Kept as an ambient cue,
   but drawn as a deliberate 2px accent rather than a washed-out glow colour
   that read like a rendering artefact. */
body[data-regime='bull'] #page-title { border-bottom-color: rgba(62, 207, 142, 0.55); }
body[data-regime='bear'] #page-title { border-bottom-color: rgba(240, 97, 108, 0.55); }
body[data-regime='chop'] #page-title { border-bottom-color: rgba(139, 148, 162, 0.45); }
#page-title { padding-bottom: 4px; }

/* Spotlight timeframe chips stay semantic — they say "look here" / "heating" /
   "avoid" — but drop to the calmer palette. */
.mb-regime-spotlight-look  .mb-tf-chip { color: var(--bull); background: var(--bull-wash); border-color: rgba(62, 207, 142, 0.28); }
.mb-regime-spotlight-heat  .mb-tf-chip { color: var(--mi-info); background: var(--mi-info-wash); border-color: rgba(106, 162, 240, 0.28); }
.mb-regime-spotlight-avoid .mb-tf-chip { color: var(--bear); background: var(--bear-wash); border-color: rgba(240, 97, 108, 0.28); }

/* --- Higher-specificity holdouts ---------------------------------------- */
.sidebar .nav-item:hover {
  background: var(--mi-brand-softer);
  border-color: transparent;
}
.sidebar .nav-item.active {
  background: var(--mi-brand-soft);
  border-color: transparent;
  box-shadow: none;
}
/* The active nav marker was recoloured by the page-level regime, which made
   navigation state look like a market signal. It is navigation; it stays neutral. */
body[data-regime='bull'] .nav-item.active,
body[data-regime='bear'] .nav-item.active,
body[data-regime='chop'] .nav-item.active { box-shadow: none; }

.sidebar .persona-tab.active {
  background: rgba(255, 255, 255, 0.11);
  border-color: var(--mi-border-loud);
  color: var(--text);
}

.shifts-fab {
  border: 1px solid var(--border-strong);
  background: var(--panel-2);
  color: var(--text-dim);
  box-shadow: var(--mi-shadow-2);
  letter-spacing: var(--mi-track-label);
}
.shifts-fab:hover {
  border-color: var(--mi-border-loud);
  background: var(--panel-3);
  color: var(--text);
  transform: none;
}
.shifts-fab .sf-count {
  background: rgba(255, 255, 255, 0.12);
  border-color: transparent;
  color: var(--text);
}

.matrix-mode-btn { border-radius: var(--radius-xs); font-weight: 600; letter-spacing: 0.12em; }
.matrix-mode-btn:hover { color: var(--text-dim); background: var(--mi-brand-softer); }
.matrix-mode-btn.active { color: var(--text); background: rgba(255, 255, 255, 0.12); }

/* =============================================================================
   11. DATA SURFACES — TURNING DOWN THE VOLUME
   -----------------------------------------------------------------------------
   In the 48-cell matrix every cell carried a coloured border AND a radial glow
   AND a filled chip, so the whole grid vibrated and nothing stood out. Each
   state is now expressed once, at low saturation, and the chip does the work.
   ========================================================================== */
.macro-card,
.composite-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
}
.composite-card.leaning-bull { border-color: rgba(62, 207, 142, 0.28); --cc-glow: transparent; }
.composite-card.leaning-bear { border-color: rgba(240, 97, 108, 0.28); --cc-glow: transparent; }

.cell.bull { --cell-glow: transparent; border-color: rgba(62, 207, 142, 0.26); }
.cell.bear { --cell-glow: transparent; border-color: rgba(240, 97, 108, 0.26); }
.cell.chop { --cell-glow: transparent; border-color: var(--border); }
.cell.error { --cell-glow: transparent; }

.regime-chip {
  border-radius: var(--radius-xs);
  font: 600 9px/1 var(--font-sans);
  letter-spacing: 0.12em;
  padding: 4px 7px;
}
.regime-chip.bull { background: var(--bull-wash); border-color: rgba(62, 207, 142, 0.26); color: var(--bull); }
.regime-chip.chop { background: var(--chop-wash); border-color: rgba(139, 148, 162, 0.24); color: var(--chop); }
.regime-chip.bear { background: var(--bear-wash); border-color: rgba(240, 97, 108, 0.26); color: var(--bear); }
.regime-chip .chip-dot { box-shadow: none; }

/* "just flipped" pulsed indefinitely on every fresh cell — a permanent
   animation is not an alert, it is a distraction. It keeps the accent, drops
   the pulse. */
.cell-dur-pill.fresh {
  background: var(--bull-wash);
  border-color: rgba(62, 207, 142, 0.35);
  color: var(--bull);
  animation: none;
}

/* =============================================================================
   12. SIDEBAR CONTROL SET
   -----------------------------------------------------------------------------
   The sidebar has its own control sizing system (--sidebar-control-h etc.).
   Keep that geometry; unify its colour with the rest of the chrome.
   ========================================================================== */
.sidebar .nav-group-header {
  border: 1px solid var(--border);
  background: var(--mi-brand-softer);
  font: 600 10px/1 var(--font-sans);
  letter-spacing: 0.13em;
  color: var(--text-dim);
}
.sidebar .nav-group-header:hover {
  background: var(--mi-brand-soft);
  border-color: var(--border-strong);
  color: var(--text);
}
.sidebar .nav-group.open > .nav-group-header {
  background: rgba(255, 255, 255, 0.09);
  border-color: var(--border-strong);
  color: var(--text);
}

.nav-search-input,
.sidebar input[type='text'],
.sidebar input[type='search'] {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: 400 11.5px/1 var(--font-sans);
  letter-spacing: 0;
}
.nav-search-input::placeholder { color: var(--text-faint); }
.nav-search-input:focus { border-color: var(--mi-border-loud); }

.favorite-chip {
  border-radius: var(--radius-xs);
  background: var(--mi-brand-softer);
  font: 600 8.5px/1 var(--font-sans);
  letter-spacing: 0.1em;
}
.favorite-chip:hover { background: var(--mi-brand-soft); color: var(--text); }

.sidebar .persona-tab {
  border-color: var(--border);
  background: var(--mi-brand-softer);
  font: 600 10px/1 var(--font-sans);
}
.sidebar .persona-strip-label {
  font: 600 9px/1 var(--font-sans);
  letter-spacing: 0.17em;
  color: var(--text-faint);
}

/* --- Matrix scaffolding -------------------------------------------------
   Header and asset labels are axes, not cards. They read as labels now, so the
   48 data cells are the only things that look clickable. */
.matrix-header-cell,
.matrix-asset-cell {
  background: transparent;
  border: 0;
  border-radius: 0;
  font: 600 9.5px/1 var(--font-sans);
  letter-spacing: 0.17em;
  color: var(--text-faint);
}
.matrix-header-cell { border-bottom: 1px solid var(--border); }
.matrix-asset-cell {
  font: 650 12px/1 var(--font-sans);
  letter-spacing: 0.06em;
  color: var(--text);
  border-right: 1px solid var(--border);
}

.cell { border-radius: var(--radius-sm); box-shadow: none; }
.cell:hover { border-color: var(--border-strong); }

/* The change flash keeps its 400ms one-shot behaviour at the calmer accent. */
@keyframes cellFlash {
  0%   { box-shadow: 0 0 0 0 rgba(62, 207, 142, 0.40); }
  100% { box-shadow: 0 0 0 7px rgba(62, 207, 142, 0); }
}

/* =============================================================================
   13. MOTION
   ========================================================================== */
.view.active { animation: miViewIn 180ms var(--mi-ease); }
@keyframes miViewIn {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}
/* The pulsing logo dot is gone with the old lockup; kill the keyframe's
   effect anywhere else it was reused. */
.logo-dot { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}