/* =============================================================================
   MacroInsight v2 — app shell
   -----------------------------------------------------------------------------
   Icon rail + hover flyout, a quiet command bar, and a single page frame.

   The rail uses machinery that already exists: app-core.js binds a hover flyout
   to `.sidebar` whenever `.sidebar-collapsed` is set, and the collapse button
   pins it open. v2 only changes the default state, so nothing here adds
   behaviour — the button, the flyout timing and the keyboard focus trap all
   work exactly as they did.
   ========================================================================== */

html[data-ui='v2'][data-v2] body.app {
  background: var(--v2-canvas);
  color: var(--v2-ink);
  font-family: var(--v2-sans);
  font-size: var(--v2-t-md);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv05' 1, 'ss03' 1;
}

html[data-ui='v2'][data-v2] .app {
  column-gap: 0;
  grid-template-areas:
    'sidebar topbar'
    'sidebar banner'
    'sidebar content'
    'sidebar footer';
  grid-template-rows: auto auto 1fr auto;
}

/* =============================================================================
   1. RAIL
   ========================================================================== */
html[data-ui='v2'][data-v2] .sidebar {
  background: var(--v2-surface);
  border-right: 1px solid var(--v2-line);
  padding: var(--v2-s3) var(--v2-s2);
  gap: var(--v2-s3);
  box-shadow: none;
}

/* Collapsed = the default. 64px of icons, nothing else. */
html[data-ui='v2'][data-v2] .app.sidebar-collapsed:not(.sidebar-flyout-open) .sidebar {
  padding-inline: 10px;
}

/* The flyout overlays the canvas instead of pushing it, so the boards never
   reflow when you reach for navigation. */
/* `!important` on the geometry only: `.sidebar { width: 100% }` in style.css is
   sized by the grid track at rest, but once the flyout goes `position: fixed`
   that 100% resolves against the viewport and the panel fills the screen. The
   base rule cannot be edited without touching v1, so v2 pins the overlay box. */
/* The rail's hover flyout used to appear and vanish with no transition, which
   read as a glitch rather than a reveal. Width and shadow are animated, and the
   easing is asymmetric on purpose: quick to open, slower to close, so brushing
   past the rail does not feel like the panel is snapping at you. */
html[data-ui='v2'][data-v2] .app.sidebar-collapsed .sidebar {
  transition: width var(--v2-med) var(--v2-ease),
              max-width var(--v2-med) var(--v2-ease),
              box-shadow var(--v2-med) var(--v2-ease),
              padding var(--v2-med) var(--v2-ease);
  will-change: width;
}
html[data-ui='v2'][data-v2] .app.sidebar-collapsed.sidebar-flyout-open .sidebar {
  transition-duration: 140ms;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  width: var(--v2-rail-open) !important;
  max-width: var(--v2-rail-open) !important;
  height: 100vh !important;
  z-index: var(--z-sidebar-flyout);
  box-shadow: var(--v2-e3);
  border-right: 1px solid var(--v2-line);
  padding-inline: var(--v2-s3);
}

/* ---- Brand lockup ------------------------------------------------------
   Mark and wordmark are painted with CSS masks so they inherit currentColor
   and need no separate light/dark asset. Paths are relative to this file.
   In the rail only the mark shows; the wordmark arrives with the flyout. */
html[data-ui='v2'][data-v2] .sidebar-brand {
  display: block;
  border-bottom: 1px solid var(--v2-line);
  padding: 4px 6px 14px;
  position: relative;
}
html[data-ui='v2'][data-v2] .mi-brand {
  display: flex;
  align-items: center;
  gap: var(--v2-s2);
  min-width: 0;
  color: var(--v2-ink);
  text-decoration: none;
  transition: opacity var(--v2-fast) var(--v2-ease);
}
html[data-ui='v2'][data-v2] .mi-brand:hover { opacity: 0.65; }
html[data-ui='v2'][data-v2] .mi-mark,
html[data-ui='v2'][data-v2] .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;
}
html[data-ui='v2'][data-v2] .mi-mark {
  width: 24px;
  height: 24px;
  -webkit-mask-image: url('../brand/macroinsight-icon.svg');
  mask-image: url('../brand/macroinsight-icon.svg');
}
html[data-ui='v2'][data-v2] .mi-wordmark {
  width: 96px;
  height: 16px;
  -webkit-mask-image: url('../brand/macroinsight-wordmark.svg');
  mask-image: url('../brand/macroinsight-wordmark.svg');
}
html[data-ui='v2'][data-v2] .mi-product {
  display: block;
  margin-top: 8px;
  padding-left: 34px;
  font: 500 var(--v2-t-xs)/1 var(--v2-sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--v2-ink-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-ui='v2'][data-v2] .sidebar-brand .sidebar-collapse-btn {
  position: absolute;
  top: 0;
  right: 2px;
  margin-left: 0;
}

/* Rail: mark only, centred, no wordmark and no product label. */
html[data-ui='v2'][data-v2] .app.sidebar-collapsed:not(.sidebar-flyout-open) .mi-wordmark,
html[data-ui='v2'][data-v2] .app.sidebar-collapsed:not(.sidebar-flyout-open) .mi-product {
  display: none;
}
html[data-ui='v2'][data-v2] .app.sidebar-collapsed:not(.sidebar-flyout-open) .mi-brand {
  justify-content: center;
}
html[data-ui='v2'][data-v2] .app.sidebar-collapsed:not(.sidebar-flyout-open) .sidebar-brand {
  padding: 4px 0 12px;
}
html[data-ui='v2'][data-v2] .app.sidebar-collapsed:not(.sidebar-flyout-open) .sidebar-brand .sidebar-collapse-btn {
  position: static;
  display: block;
  margin: 12px auto 0;
}
html[data-ui='v2'][data-v2] .logo-dot { display: none !important; }
html[data-ui='v2'][data-v2] .sidebar-collapse-btn {
  border: 1px solid var(--v2-line);
  background: var(--v2-surface);
  color: var(--v2-ink-3);
  border-radius: var(--v2-r-xs);
  box-shadow: none;
}
html[data-ui='v2'][data-v2] .sidebar-collapse-btn:hover {
  color: var(--v2-ink);
  border-color: var(--v2-line-2);
}

/* ---- Nav items --------------------------------------------------------- */
html[data-ui='v2'][data-v2] .nav-section-label {
  font: 500 var(--v2-t-xs)/1 var(--v2-sans);
  letter-spacing: 0;
  color: var(--v2-ink-4);
  padding: var(--v2-s5) 10px 6px;
  text-transform: none;
}
html[data-ui='v2'][data-v2] .nav-item,
html[data-ui='v2'][data-v2] .sidebar .nav-item,
html[data-ui='v2'][data-v2] .sidebar .nav-item.nav-command {
  background: transparent;
  border: 0;
  border-radius: var(--v2-r-sm);
  color: var(--v2-ink-2);
  font: 450 var(--v2-t-md)/1.3 var(--v2-sans);
  letter-spacing: 0;
  text-transform: none;
  min-height: 40px;
  padding: 9px 10px;
  padding-right: 46px;
  gap: var(--v2-s3);
  box-shadow: none;
  transition: background var(--v2-fast) var(--v2-ease),
              color var(--v2-fast) var(--v2-ease);
}
html[data-ui='v2'][data-v2] .nav-item .nav-icon {
  color: var(--v2-ink-3);
  font-size: 16px;
  width: 22px;
}
html[data-ui='v2'][data-v2] .nav-item:hover,
html[data-ui='v2'][data-v2] .sidebar .nav-item:hover {
  background: var(--v2-sunk-2);
  color: var(--v2-ink);
  border: 0;
}
html[data-ui='v2'][data-v2] .nav-item.active,
html[data-ui='v2'][data-v2] .sidebar .nav-item.active {
  background: var(--v2-sunk-2);
  color: var(--v2-ink);
  font-weight: 550;
  border: 0;
  box-shadow: none;
}
html[data-ui='v2'][data-v2] .nav-item.active .nav-icon { color: var(--v2-ink); }
html[data-ui='v2'][data-v2] .nav-item.active::before { display: none; }

/* The legacy dark-theme TradFi rule in style.css (.app.mode-tradfi
   .sidebar-nav … .tradfi-route.active) is more specific than the v2 nav-item
   states above, so in TradFi mode it repaints the row pale mint (#d1fae5) over
   a near-white sidebar and the label disappears. Restate the v2 treatment at
   higher specificity so TradFi reads like every other nav item. */
html[data-ui='v2'][data-v2] .app.mode-tradfi .sidebar-nav .nav-item.tradfi-route:hover,
html[data-ui='v2'][data-v2] .app.mode-tradfi .sidebar-nav .nav-item.tradfi-route.active,
html[data-ui='v2'][data-v2] .app.mode-tradfi .sidebar-nav .nav-item.nav-command.tradfi-route:hover,
html[data-ui='v2'][data-v2] .app.mode-tradfi .sidebar-nav .nav-item.nav-command.tradfi-route.active {
  background: var(--v2-sunk-2);
  color: var(--v2-ink);
  border: 0;
}
html[data-ui='v2'][data-v2] .app.mode-tradfi .sidebar-nav .nav-item.tradfi-route.active .nav-icon,
html[data-ui='v2'][data-v2] .app.mode-tradfi .sidebar-nav .nav-item.nav-command.tradfi-route.active .nav-icon {
  color: var(--v2-ink);
}

/* In the rail the icon is the whole control, so centre it and hide the rest. */
html[data-ui='v2'][data-v2] .app.sidebar-collapsed:not(.sidebar-flyout-open) .nav-item {
  justify-content: center;
  padding: 10px 0;
  min-height: 42px;
  border-radius: var(--v2-r-sm);
}
html[data-ui='v2'][data-v2] .app.sidebar-collapsed:not(.sidebar-flyout-open) .nav-section-label {
  height: 1px;
  padding: 8px 12px;
  overflow: hidden;
  color: transparent;
  border-top: 1px solid var(--v2-line);
  margin: 4px 0;
  box-sizing: content-box;
}

html[data-ui='v2'][data-v2] .nav-group-header,
html[data-ui='v2'][data-v2] .sidebar .nav-group-header {
  background: transparent;
  border: 0;
  border-radius: var(--v2-r-xs);
  color: var(--v2-ink-3);
  font: 500 var(--v2-t-sm)/1 var(--v2-sans);
  letter-spacing: 0;
  text-transform: none;
}
html[data-ui='v2'][data-v2] .sidebar .nav-group-header:hover,
html[data-ui='v2'][data-v2] .sidebar .nav-group.open > .nav-group-header {
  background: var(--v2-sunk-2);
  color: var(--v2-ink);
  border: 0;
}
html[data-ui='v2'][data-v2] .sidebar .nav-group.open > .nav-group-items {
  border-left: 1px solid var(--v2-line);
}

/* ---- Rail footer ------------------------------------------------------- */
html[data-ui='v2'][data-v2] .sidebar-status,
html[data-ui='v2'][data-v2] .sidebar-foot {
  border-top: 1px solid var(--v2-line);
}
html[data-ui='v2'][data-v2] .sidebar-status .ss-label {
  font: 400 var(--v2-t-xs)/1 var(--v2-sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--v2-ink-4);
}
html[data-ui='v2'][data-v2] .sidebar-status .ss-value {
  font: 400 var(--v2-t-sm)/1.4 var(--v2-mono);
  letter-spacing: -0.02em;
  color: var(--v2-ink-2);
}
html[data-ui='v2'][data-v2] .rk-item {
  border: 1px solid var(--v2-line);
  background: var(--v2-surface);
  color: var(--v2-ink-2);
  border-radius: var(--v2-r-pill);
  font: 400 var(--v2-t-xs)/1 var(--v2-sans);
  letter-spacing: 0;
  text-transform: none;
}
html[data-ui='v2'][data-v2] .sidebar-foot-meta { color: var(--v2-ink-4); }
html[data-ui='v2'][data-v2] .sidebar-foot-clock { color: var(--v2-ink-2); }

/* =============================================================================
   2. COMMAND BAR
   ========================================================================== */
html[data-ui='v2'][data-v2] .topbar {
  background: var(--v2-surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--v2-line);
  padding: var(--v2-s3) var(--v2-gutter);
  gap: var(--v2-s6);
  min-height: var(--v2-topbar);
  box-shadow: none;
}
html[data-ui='v2'][data-scheme='dark'][data-v2] .topbar {
  background: var(--v2-surface);
}

html[data-ui='v2'][data-v2] .page-breadcrumb {
  font: 400 var(--v2-t-sm)/1 var(--v2-sans);
  letter-spacing: 0;
  color: var(--v2-ink-3);
  text-transform: none;
  margin-bottom: 5px;
}
html[data-ui='v2'][data-v2] .brand-text h1 {
  font: 600 var(--v2-t-2xl)/1.15 var(--v2-sans);
  letter-spacing: var(--v2-tighter);
  color: var(--v2-ink);
  text-transform: none;
  border-bottom: 0;
  padding-bottom: 0;
}
html[data-ui='v2'][data-v2] .brand-text .sub {
  font: 400 var(--v2-t-sm)/1.5 var(--v2-sans);
  color: var(--v2-ink-3);
  letter-spacing: 0;
  text-transform: none;
}
html[data-ui='v2'][data-v2] #page-title { border-bottom: 0 !important; }

/* Order: audience → market context → utilities → primary action. */
html[data-ui='v2'][data-v2] .topbar .status-bar { gap: var(--v2-s1); }
html[data-ui='v2'][data-v2] .status-bar > .audience-switch      { order: 0; }
html[data-ui='v2'][data-v2] .status-bar > .topbar-guide-btn     { order: 0; }
html[data-ui='v2'][data-v2] .status-bar > .mode-switch          { order: 1; }
html[data-ui='v2'][data-v2] .status-bar > .topbar-asset-cluster { order: 2; }
html[data-ui='v2'][data-v2] .status-bar > .global-asset-context { order: 3; }
html[data-ui='v2'][data-v2] .status-bar > #workspace-menu-btn   { order: 4; margin-left: 18px; }
html[data-ui='v2'][data-v2] .status-bar > .topbar-lang-switch   { order: 5; }
html[data-ui='v2'][data-v2] .status-bar > .topbar-scheme-btn    { order: 6; }
html[data-ui='v2'][data-v2] .status-bar > .topbar-overflow-wrap { order: 7; }
html[data-ui='v2'][data-v2] .status-bar > .topbar-aux           { order: 8; }
html[data-ui='v2'][data-v2] .status-bar > #refresh-btn          { order: 9; margin-left: 18px; }

/* Light / dark scheme toggle — sits with the other top-right utilities. */
html[data-ui='v2'][data-v2] .topbar-scheme-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--v2-r-sm);
  color: var(--v2-ink-2);
}
html[data-ui='v2'][data-v2] .topbar-scheme-btn:hover {
  color: var(--v2-ink);
  background: var(--v2-sunk);
  border-color: var(--v2-line-2);
}
html[data-ui='v2'][data-v2] .topbar-scheme-btn[aria-pressed='true'] {
  color: var(--v2-accent);
  background: var(--v2-accent-soft);
  border-color: var(--v2-accent-line);
}
html[data-ui='v2'][data-v2] .topbar-scheme-btn .btn-icon {
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
html[data-ui='v2'][data-v2] .topbar-scheme-btn .ui-icon-svg {
  width: 18px;
  height: 18px;
}

html[data-ui='v2'][data-v2] .topbar-macro-pill {
  background: var(--v2-sunk-2);
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-pill);
  box-shadow: none;
}

/* =============================================================================
   3. PAGE FRAME
   ========================================================================== */
html[data-ui='v2'][data-v2] .app > .view {
  justify-self: center;
  width: min(100%, var(--v2-page-max));
  max-width: none;
  margin: 0;
  padding: var(--v2-s7) var(--v2-gutter) var(--v2-s9);
  background: transparent;
}
html[data-ui='v2'][data-v2] .app > .view-hmm,
html[data-ui='v2'][data-v2] .app > .view-forecast,
html[data-ui='v2'][data-v2] .app > .view-persistence,
html[data-ui='v2'][data-v2] .app > .view-expanded,
html[data-ui='v2'][data-v2] .app > .view-portfolio,
html[data-ui='v2'][data-v2] .app > .view-ranking,
html[data-ui='v2'][data-v2] .app > .view-shadow,
html[data-ui='v2'][data-v2] .app > .view-contagion,
html[data-ui='v2'][data-v2] .app > .view-supervisor,
html[data-ui='v2'][data-v2] .app > .view-tradfi-decision,
html[data-ui='v2'][data-v2] .app > .view-tradfi-breadth,
html[data-ui='v2'][data-v2] .app > .view-tradfi-rotation,
html[data-ui='v2'][data-v2] .app > .view-tradfi-drivers,
html[data-ui='v2'][data-v2] .app > .view-tradfi-positioning,
html[data-ui='v2'][data-v2] .app > .view-tradfi-flows { width: 100%; }

html[data-ui='v2'][data-v2] .composite-section,
html[data-ui='v2'][data-v2] .tradfi-alignment-section,
html[data-ui='v2'][data-v2] .msgarch-alignment-section {
  max-width: none;
  padding-inline: 0;
}

html[data-ui='v2'][data-v2] .app > .status-banner {
  grid-area: banner;
  justify-self: center;
  width: min(
    calc(100% - 2 * var(--v2-gutter)),
    calc(var(--v2-page-max) - 2 * var(--v2-gutter))
  );
  max-width: none;
  margin: var(--v2-s4) auto 0;
  padding: 11px 16px;
  border-radius: var(--v2-r-md);
  font: 400 var(--v2-t-sm)/1.4 var(--v2-sans);
  letter-spacing: 0;
  justify-content: flex-start;
  background: var(--v2-surface);
  border: 1px solid var(--v2-line);
  box-shadow: none;
  color: var(--v2-ink-2);
}
html[data-ui='v2'][data-v2] .app > .status-banner.warn {
  background: var(--v2-warn-soft);
  border-color: var(--v2-warn);
  color: var(--v2-warn);
}
html[data-ui='v2'][data-v2] .app > .status-banner.error {
  background: var(--v2-bear-soft);
  border-color: var(--v2-bear);
  color: var(--v2-bear);
}
html[data-ui='v2'][data-v2] .status-banner .banner-dot { box-shadow: none; }

html[data-ui='v2'][data-v2] .footer {
  background: var(--v2-surface);
  border-top: 1px solid var(--v2-line);
  color: var(--v2-ink-3);
  font: 400 var(--v2-t-xs)/1 var(--v2-sans);
  letter-spacing: 0;
}

/* =============================================================================
   Compact shell
   -----------------------------------------------------------------------------
   The topbar stacked breadcrumb + title + description + a control row, which
   measured 154px of chrome before any content. It is now one ~56px row:
   title on the left, page actions on the right.

   Scope controls (universe, audience) moved to the sidebar because they choose
   what the whole app is about; they are not actions on the current page. Run
   freshness moved to the footer, next to the other run state.
   ========================================================================== */

html[data-ui='v2'][data-v2] .topbar {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--v2-s4);
  padding: 0 var(--v2-gutter);
  min-height: 56px;
  height: 56px;
}
html[data-ui='v2'][data-v2] .topbar .brand,
html[data-ui='v2'][data-v2] .topbar .brand-text {
  display: flex;
  align-items: baseline;
  gap: var(--v2-s3);
  min-width: 0;
}
html[data-ui='v2'][data-v2] .brand-text h1 {
  font: 600 var(--v2-t-lg)/1.2 var(--v2-sans);
  letter-spacing: var(--v2-tight);
  white-space: nowrap;
}
/* Breadcrumb only earns space when it says something the title does not. */
html[data-ui='v2'][data-v2] .page-breadcrumb {
  margin-bottom: 0;
  font-size: var(--v2-t-xs);
  color: var(--v2-ink-4);
  white-space: nowrap;
}
html[data-ui='v2'][data-v2] .page-breadcrumb:empty { display: none; }
html[data-ui='v2'][data-v2] .brand-text .sub,
html[data-ui='v2'][data-v2] #page-sub { display: none !important; }

html[data-ui='v2'][data-v2] .topbar .status-bar {
  margin-left: auto;
  gap: var(--v2-s2);
  flex-wrap: nowrap;
}
html[data-ui='v2'][data-v2] .status-bar > #workspace-menu-btn { margin-left: var(--v2-s3); }
html[data-ui='v2'][data-v2] .status-bar > #refresh-btn        { margin-left: var(--v2-s3); }
/* The joint-macro pill is data, not chrome — it belongs on the page. */
html[data-ui='v2'][data-v2] .topbar-macro-pill { display: none; }

/* ---- Sidebar scope block ----------------------------------------------- */

html[data-ui='v2'][data-v2] .sidebar-scope {
  display: flex;
  flex-direction: column;
  gap: var(--v2-s2);
  padding: var(--v2-s3) var(--v2-s4) var(--v2-s4);
  border-bottom: 1px solid var(--v2-line);
  margin-bottom: var(--v2-s2);
}
html[data-ui='v2'][data-v2] .sidebar-scope .audience-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--v2-s1);
  width: 100%;
  padding: var(--v2-s1);
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-sm);
  background: var(--v2-sunk);
}
html[data-ui='v2'][data-v2] .sidebar-scope .audience-btn {
  width: 100%;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--v2-r-xs);
  background: transparent;
  color: var(--v2-ink-3);
  font: 600 var(--v2-t-xs)/1 var(--v2-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--v2-fast) var(--v2-ease), color var(--v2-fast) var(--v2-ease);
}
html[data-ui='v2'][data-v2] .sidebar-scope .audience-btn:hover { color: var(--v2-ink); }
html[data-ui='v2'][data-v2] .sidebar-scope .audience-btn.active {
  background: var(--v2-surface);
  color: var(--v2-ink);
  box-shadow: none;
}
/* Collapsed rail has no room for scope; the flyout still shows it. */
html[data-ui='v2'][data-v2] .app.sidebar-collapsed:not(.sidebar-flyout-open) .sidebar-scope {
  display: none;
}

/* ---- Footer run freshness ---------------------------------------------- */

/* The footer is one row: run freshness left, TradFi ops centre, status right.
   style.css absolutely-centres .footer-ops in TradFi mode, which is why the new
   block gets its own class and the footer is given an explicit flex layout. */
html[data-ui='v2'][data-v2] .footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v2-s5);
  padding: var(--v2-s2) var(--v2-gutter);
}
html[data-ui='v2'][data-v2] .footer-run {
  display: inline-flex;
  align-items: center;
  gap: var(--v2-s5);
  min-width: 0;
}
html[data-ui='v2'][data-v2] .footer-run .footer-op {
  display: inline-flex;
  align-items: baseline;
  gap: var(--v2-s2);
  white-space: nowrap;
}
html[data-ui='v2'][data-v2] .footer-run .footer-op-k {
  font-size: var(--v2-t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v2-ink-4);
}
html[data-ui='v2'][data-v2] .footer-run .footer-op strong {
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  color: var(--v2-ink-2);
}
/* Let the TradFi ops sit in the flow beside the others rather than on top. */
html[data-ui='v2'][data-v2] body.mode-tradfi .footer-ops {
  position: static;
  transform: none;
  left: auto;
  top: auto;
  gap: var(--v2-s5);
}

/* =============================================================================
   Nav icons — only where they carry meaning
   -----------------------------------------------------------------------------
   The nav had 76 items sharing 71 arbitrary glyphs: families like ◰◱◲◳ and
   ▤▥▦▧▨▩ with no relationship to their labels, and ⬢ on both CRYPTO and TRADFI.
   At that count an icon per row is noise, not wayfinding — nothing is
   recognisable, so the eye has 76 more things to skip past.

   Top-level destinations keep a real mark (house, grid, layers, hex, bars).
   Research pages inside a group are text under their group heading, which is
   what actually makes a long menu scannable.
   ========================================================================== */

html[data-ui='v2'][data-v2] .nav-group .nav-item > .nav-icon { display: none; }

/* Reclaim the icon's width so labels sit under their group heading. */
html[data-ui='v2'][data-v2] .nav-group .nav-item {
  padding-left: var(--v2-s5);
  gap: 0;
}

/* Top-level marks: inherit ink, never compete with the label. */
html[data-ui='v2'][data-v2] .nav-item > .nav-icon > svg {
  display: block;
  width: 17px;
  height: 17px;
  opacity: 0.85;
}
html[data-ui='v2'][data-v2] .nav-item.active > .nav-icon > svg { opacity: 1; }

/* The collapsed rail is icons-only, so an item with no mark has nothing to
   show. Only the top-level destinations belong there. */
html[data-ui='v2'][data-v2] .app.sidebar-collapsed:not(.sidebar-flyout-open) .nav-group { display: none; }

/* =============================================================================
   Menu size vs page density — decoupled
   -----------------------------------------------------------------------------
   `nav-simple-mode` was doing two unrelated jobs across 102 rules: restricting
   the menu to five items, and suppressing dense chrome on Home. Unlocking the
   research menu by turning it off therefore also dumped every hidden panel onto
   the home page — measured 4.7 → 11.5 screens.

   So `nav-simple-mode` keeps owning page density, and `nav-full` owns the menu.
   The block below re-opens only the navigation, leaving content untouched.
   ========================================================================== */

/* Items are un-hidden only inside an OPEN group — the accordion still governs
   what is on screen. A blanket un-hide forced all 75 routes visible at once and
   made the sidebar taller than the page. */
html[data-ui='v2'][data-v2] body.nav-simple-mode.nav-full .nav-group,
html[data-ui='v2'][data-v2] body.nav-simple-mode.nav-full .nav-group.open .nav-item,
html[data-ui='v2'][data-v2] body.nav-simple-mode.nav-full .sidebar-nav .nav-section-label:not(.nav-simple-keep),
html[data-ui='v2'][data-v2] body.nav-simple-mode.nav-full .nav-search-wrap,
html[data-ui='v2'][data-v2] body.nav-simple-mode.nav-full #nav-simple-toggle {
  display: revert !important;
  visibility: visible !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  margin: revert !important;
  padding: revert !important;
  pointer-events: auto !important;
}
/* The asset-detail entry is opened by clicking an asset, never navigated to. */
html[data-ui='v2'][data-v2] body.nav-full .sidebar-nav .nav-item.nav-asset-detail[hidden] {
  display: none !important;
}