/* =============================================================================
   MacroInsight — UX layer
   -----------------------------------------------------------------------------
   Loaded after macroinsight.css. Layout, hierarchy, alignment and affordance.
   Nothing is added, removed, renamed or rewired: every selector below already
   exists, every panel keeps its data, every control keeps its behaviour.

   What the product is
   -------------------
   A regime monitor that answers one question in a fixed order (per
   docs/TRADER_GUIDE.md): what mood is the market in → do the timeframes agree →
   what is the final call → how much do I trust it → how long will it last →
   what risks resize it. It is a filter and sizing aid, explicitly "an
   opportunity map — not an order ticket".

   The default product is three destinations — HOME, CRYPTO, TRADFI. The ~73-page
   research menu is behind ?full=1. So the boards are the product, and the boards
   are what this pass reorganises.

   The problems this fixes
   -----------------------
   1. 19% of the content column was unreachable. `margin: 0 auto` on a CSS-grid
      item makes it shrink-to-fit rather than fill its track, so every capped
      board rendered ~1097px inside a 1361px column. Tables were cramped while
      264px sat empty.
   2. No focal point. Every panel had the same width, weight and border, stacked
      in one column, so nothing said "read this first" — despite the product
      having a very definite first thing to read.
   3. No wayfinding. ~4000px of board with no persistent context. On HOME, where
      crypto and TradFi stack, you lose track of which universe you are in.
   4. Columns that should line up didn't. `auto` grid tracks size to content, so
      the score / delta / badge columns in the two side-by-side ranked lists
      landed at different x positions and could not be compared across.
   5. The command bar led with its least important controls. Source order put
      language, overflow and workspace prefs first, and the universe switch —
      the biggest context change in the app — fourth.
   6. Status messages overlaid the board. The banner shares a grid area with the
      view, so it painted on top of content instead of displacing it.
   7. Clickable things looked identical to static things. Asset cards, KPI tiles,
      breadth stats and matrix cells are all interactive; nothing said so.
   ========================================================================== */

:root {
  /* One page measure for the whole product. 1680 is wide enough for the 8×6
     matrix and the two-up board grids without letting text lines run long. */
  --mi-page-max: 1680px;
  --mi-page-gutter: clamp(16px, 2vw, 34px);
  /* Sticky offset — the topbar is sticky at top:0 and 84px tall at desktop. */
  --mi-topbar-h: 84px;
  --mi-gap-tight: 10px;
  --mi-gap: 16px;
  --mi-gap-loose: 26px;
}

/* =============================================================================
   1. PAGE FRAME
   -----------------------------------------------------------------------------
   Fill the track, then cap the measure — instead of shrink-to-fit inside it.
   ========================================================================== */
.app > .view {
  justify-self: center;
  width: min(100%, var(--mi-page-max));
  padding: 22px var(--mi-page-gutter) 96px;
  margin: 0;
}

/* Views the original design deliberately ran edge-to-edge stay edge-to-edge. */
.app > .view-forecast,
.app > .view-persistence,
.app > .view-expanded,
.app > .view-confidence,
.app > .view-portfolio,
.app > .view-ranking,
.app > .view-shadow,
.app > .view-tradfi-decision,
.app > .view-contagion,
.app > .view-supervisor,
.app > .view-tradfi-breadth,
.app > .view-tradfi-rotation,
.app > .view-tradfi-drivers,
.app > .view-tradfi-positioning,
.app > .view-tradfi-flows,
.app > .view-hmm {
  width: 100%;
  max-width: none;
}

/* Sections that carried their own copy of the old 1500px measure. */
.composite-section,
.tradfi-alignment-section,
.msgarch-alignment-section {
  max-width: none;
  padding-inline: 0;
}

/* =============================================================================
   2. SYSTEM MESSAGES — DOCKED, NOT FLOATING
   -----------------------------------------------------------------------------
   The banner shared `grid-area: content` with the view and painted over the
   board. It gets its own row, which collapses to zero height when hidden.
   ========================================================================== */
.app {
  grid-template-areas:
    "sidebar topbar"
    "sidebar banner"
    "sidebar content"
    "sidebar footer";
  grid-template-rows: auto auto 1fr auto;
}
.app > .status-banner {
  grid-area: banner;
  align-self: stretch;
  justify-self: center;
  /* Match the board's content edges exactly, gutters included. */
  width: min(
    calc(100% - 2 * var(--mi-page-gutter)),
    calc(var(--mi-page-max) - 2 * var(--mi-page-gutter))
  );
  max-width: none;
  margin: 14px auto 0;
  border-radius: var(--radius-sm);
  justify-content: flex-start;
}

/* =============================================================================
   3. READING ORDER
   -----------------------------------------------------------------------------
   The guide's first instruction is "look at top mood". Give that module the
   typographic primacy it never had, and let everything below it step down.
   ========================================================================== */
.srb-shell { padding: 22px 22px 24px; }
.srb-top { margin-bottom: 14px; }
.srb-kicker {
  font: 600 9.5px/1 var(--font-sans);
  letter-spacing: 0.19em;
  color: var(--text-faint);
  margin-bottom: 10px;
}
/* The single most important word on the page. */
.srb-market {
  font: 680 40px/1.02 var(--font-sans);
  letter-spacing: -0.025em;
}
.srb-market-sub {
  margin-top: 10px;
  font: 400 13.5px/1.5 var(--font-sans);
  color: var(--text-dim);
  max-width: 60ch;
}
/* Orientation copy is help, not data — it reads as a caption now. */
.srb-legend,
.mb-mission {
  font: 400 12px/1.55 var(--font-sans);
  color: var(--text-faint);
  max-width: 88ch;
}
.mb-mission strong,
.srb-legend strong { color: var(--text-dim); font-weight: 600; }

/* Step 2: the three regime columns. */
.srb-grid { gap: var(--mi-gap); }
.srb-col { padding: 14px; border-radius: var(--radius); }
.srb-col-head { margin-bottom: 2px; }
.srb-col-title { font: 650 13px/1 var(--font-sans); letter-spacing: 0.14em; }
.srb-col-count {
  font: 500 12px/1 var(--font-mono);
  color: var(--text-faint);
  letter-spacing: -0.01em;
}
.srb-col-hint {
  font: 400 11.5px/1.45 var(--font-sans);
  color: var(--text-faint);
  margin: 4px 0 12px;
}
.srb-col-body { gap: 6px; }

/* Step 3: the opportunity board sits below the verdict, so its own headings
   step down rather than competing with it. */
.mb-content { gap: var(--mi-gap); }
.mb-home-stack { gap: var(--mi-gap-loose); }
.mb-panel { padding: 14px 16px; }
.mb-panel-head { margin-bottom: 12px; }
.mb-uni-card { padding: 16px; }
.mb-uni-card-head { margin: 0 0 14px; padding: 0 0 12px; }
.mb-uni-card-body { display: flex; flex-direction: column; gap: var(--mi-gap); }
.mb-uni-card-sub { font: 400 11px/1.4 var(--font-sans); color: var(--text-faint); }
.mb-two,
.mb-movers { gap: var(--mi-gap); }

/* =============================================================================
   4. WAYFINDING
   -----------------------------------------------------------------------------
   On a 4000px board you should never have to scroll back up to find out which
   universe or section you are reading. Desktop only — on narrow screens the
   topbar height is not fixed, so the offset cannot be trusted.
   ========================================================================== */
@media (min-width: 1100px) {
  .mb-uni-card-head,
  .view.active > .section-header,
  .view.active > section > .section-header {
    position: sticky;
    top: var(--mi-topbar-h);
    z-index: var(--z-sticky);
    background: var(--panel-2);
    margin-inline: -16px;
    padding-inline: 16px;
    padding-block: 12px;
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .view.active > .section-header,
  .view.active > section > .section-header {
    background: var(--bg);
    margin-inline: 0;
    padding-inline: 0;
  }
}

/* =============================================================================
   5. COLUMN ALIGNMENT
   -----------------------------------------------------------------------------
   Fixed tracks instead of `auto`, so the same column lands at the same offset
   in both ranked lists and the numbers can actually be compared across.
   Badge track is 108px — the widest label ("DETERIORATING") measures 101px.
   ========================================================================== */
.mb-mrow {
  grid-template-columns: 22px minmax(0, 1fr) 32px 48px 58px 108px;
  gap: 8px;
  padding: 8px 4px;
  align-items: center;
}
.mb-mrank { text-align: right; }
.mb-mn { text-align: right; color: var(--text-faint); }
.mb-mscore { min-width: 0; text-align: right; font-size: 13px; }
.mb-mv { min-width: 0; text-align: right; }
.mb-mrow > .mb-badge { justify-self: end; text-align: center; }

/* Crypto benchmarks carry four metric columns, TradFi two. A fixed
   `repeat(4, …)` left two dead tracks on the TradFi board; auto columns size to
   whatever each universe actually renders. */
.mb-bench-row {
  grid-template-columns: 64px;
  grid-auto-flow: column;
  grid-auto-columns: minmax(52px, 1fr);
  gap: 8px;
  padding: 7px 4px;
}
.mb-bench-row:nth-child(even) { background: transparent; }
.mb-bench-headrow { border-bottom: 1px solid var(--border); padding-bottom: 6px; }

.mb-stat { padding: 8px 2px; }
.mb-stat-clickable { padding: 8px; }

/* Matrix cells now have the width for their state label to sit on one line,
   which keeps every cell head the same height and the grid scannable by row. */
.regime-chip { white-space: nowrap; }

/* The regime-read strip: four peers, so four equal cells with real gutters. */
.mb-regime { gap: var(--mi-gap-tight); }
.mb-regime-cell { padding: 12px 14px; }
.mb-regime-cell:first-child { padding-left: 14px; }

/* =============================================================================
   6. COMMAND BAR
   -----------------------------------------------------------------------------
   Reordered so the bar reads context → utilities → primary action, and grouped
   by proximity rather than by adding more lines to an already busy row.
   ========================================================================== */
.topbar .status-bar { gap: 6px; }
.topbar .status-bar > .mode-switch          { order: 1; }
.topbar .status-bar > .topbar-asset-cluster { order: 2; }
.topbar .status-bar > .global-asset-context { order: 3; }
.topbar .status-bar > #workspace-menu-btn   { order: 4; margin-left: 16px; }
.topbar .status-bar > .topbar-lang-switch   { order: 5; }
.topbar .status-bar > .topbar-overflow-wrap { order: 6; }
.topbar .status-bar > .topbar-aux           { order: 7; }
.topbar .status-bar > #refresh-btn          { order: 8; margin-left: 16px; }

/* The universe switch is the largest context change in the product; give it
   enough weight to read as a mode selector rather than another chip. */
.mode-switch .mode-btn { min-width: 74px; padding: 7px 14px; }

/* Keep the page identity from being squeezed by the control cluster. */
.topbar .brand { min-width: 0; flex: 1 1 auto; }
.topbar .brand-text .sub {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 62ch;
}
@media (min-width: 1100px) { .topbar { min-height: var(--mi-topbar-h); } }

/* =============================================================================
   7. SIDEBAR
   -----------------------------------------------------------------------------
   In the default product the sidebar holds three destinations under three
   section labels — a 1:1 label-to-item ratio. The labels become quiet dividers
   and the destinations become real, comfortable targets.
   ========================================================================== */
body.nav-simple-mode .nav-section-label {
  font-size: 8.5px;
  letter-spacing: 0.2em;
  padding: 16px 10px 5px;
  color: var(--text-faint);
  opacity: 0.75;
}
body.nav-simple-mode .sidebar-nav .nav-item,
body.nav-simple-mode .sidebar .nav-item.nav-command {
  min-height: 40px;
  padding: 10px 12px;
  padding-right: 52px;
  font-size: 12.5px;
  font-weight: 550;
}
body.nav-simple-mode .nav-item .nav-icon { font-size: 15px; }

/* Status block reads as a spec sheet: label above value, aligned baselines. */
.sidebar-status .ss-block { gap: 3px; }

/* =============================================================================
   8. AFFORDANCE
   -----------------------------------------------------------------------------
   Everything below is already clickable. Now it looks it, and all of it uses
   one hover language so "interactive" is learnable in a single glance.
   ========================================================================== */
.srb-card,
.mb-stat-clickable,
.macro-card,
.composite-card,
.cell,
.mb-regime-spotlight,
.mb-mrow,
.mb-bench-row:not(.mb-bench-headrow) {
  cursor: pointer;
  transition: background var(--mi-fast) var(--mi-ease),
              border-color var(--mi-fast) var(--mi-ease);
}
.macro-card:hover,
.composite-card:hover,
.mb-regime-spotlight:hover { border-color: var(--border-strong); }
.mb-stat-clickable:hover,
.mb-stat-clickable:focus-visible {
  background: var(--mi-brand-soft);
  box-shadow: none;
  outline: none;
}
.mb-stat-clickable.is-open {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}
.srb-card:hover { border-color: var(--border-strong); }
/* Non-interactive panels must not inherit the pointer. */
.mb-panel,
.mb-uni-card,
.srb-col { cursor: default; }

/* =============================================================================
   9. RESPONSIVE
   -----------------------------------------------------------------------------
   The two-up grids collapse before their columns get too narrow to read, and
   the three regime columns become one stack on phones.
   ========================================================================== */
@media (max-width: 1240px) {
  .mb-regime { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .mb-two,
  .mb-movers { grid-template-columns: minmax(0, 1fr); }
  .srb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .mb-regime,
  .srb-grid { grid-template-columns: minmax(0, 1fr); }
  .srb-market { font-size: 32px; }
  .mb-mrow {
    grid-template-columns: 18px minmax(0, 1fr) 26px 40px 48px 96px;
    gap: 6px;
  }
}