/* =============================================================================
   MacroInsight — dark chrome geometry
   -----------------------------------------------------------------------------
   A 240px rail runs from the top of the page; the top bar sits in the content
   column. Colors are v2 graphite. Desktop geometry is gated with
   :not(.vertical-layout) so the phone drawer stays an overlay.

   One gutter governs the whole shell. The bar and the page column both pad by
   --mds-gutter, so the page name, the actions and the content share a single
   left and right edge. Before this, the bar padded 24px against the page's
   80px and overhung the content it labels by 56px on both sides.
   ========================================================================== */

html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] {
  /* The rail is the only raised surface. The bar sits on the canvas so the
     content column reads as one plane under one hairline. */
  --mds-bar: var(--v2-canvas);
  --mds-nav: var(--v2-surface);
  --mds-nav-hover: var(--v2-hover);
  --mds-nav-line: var(--v2-line);
  --mds-on-dark: var(--v2-ink);
  --mds-on-dark-2: var(--v2-ink-2);
  /* 240 fits the labels: the longest ("Positioning") is 75px of text at a
     56px inset. 288 left 157px of the rail empty. */
  --v2-rail-open: 240px;
  /* Deliberately the same value the pages already gutter by, so the bar lands
     on the content's edges instead of inventing its own. */
  --mds-gutter: var(--v2-gutter);
}

/* Past ~1700px of content, table rows stretch rather than read. Let the gutter
   absorb the surplus instead of capping with a max-width — because every
   column pads by the same token, all the edges stay aligned as it grows. */
@media (min-width: 2000px) {
  html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] {
    --mds-gutter: max(var(--v2-gutter), calc((100vw - var(--sidebar-width, 240px) - 1700px) / 2));
  }
}

/* Legacy views gutter by --v2-gutter, which matches --mds-gutter up to 2000px
   but not past it. Point them at the shell's token so they keep the bar's
   edges at every width. */
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2]:not(.vertical-layout) .app > .view,
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2]:not(.vertical-layout) main.view {
  padding-inline: var(--mds-gutter);
}

/* =============================================================================
   1. GRID — rail owns the first column from the top
   ========================================================================== */
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2]:not(.vertical-layout) .app,
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2]:not(.vertical-layout) body.app {
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  grid-template-rows: var(--v2-topbar) auto 1fr auto;
  grid-template-areas:
    'sidebar topbar'
    'sidebar banner'
    'sidebar content'
    'sidebar footer';
}

/* =============================================================================
   2. TOP BAR — identity + actions, full width
   ========================================================================== */
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .topbar,
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .app > .topbar,
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-scheme='dark'][data-v2] .topbar {
  background: var(--mds-bar);
  border-bottom: 1px solid var(--mds-nav-line);
  box-shadow: none;
  color: var(--mds-on-dark);
  z-index: var(--z-topbar);
}

html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2]:not(.vertical-layout) .topbar,
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2]:not(.vertical-layout) .app > .topbar {
  height: var(--v2-topbar);
  min-height: var(--v2-topbar);
  padding: 0 var(--mds-gutter);
  gap: 0;
}

/* The bar states location + session state. No breadcrumb trail — one word. */
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .topbar .page-breadcrumb,
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .topbar #page-breadcrumb {
  display: none !important;
}

html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2]:not(.vertical-layout) .topbar .brand {
  order: -1;
  flex: 0 1 auto;
  min-width: 0;
}

/* Un-hide the router's H1 (shell.css keeps it screen-reader-only) and let it
   be the bar's location label. */
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2]:not(.vertical-layout) .topbar .brand-text h1,
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2]:not(.vertical-layout) .topbar #page-title {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: auto;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 550 15px/1.2 var(--v2-sans);
  letter-spacing: -0.01em;
  color: var(--mds-on-dark);
}

html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .mi-brand-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  color: var(--mds-on-dark);
  text-decoration: none;
}
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2]:not(.vertical-layout) .mi-brand-top {
  display: none;
}

/* "Session · Mon 31 Aug 21:48 · 20m ago" is one statement about what you are
   looking at, so freshness sits with the page name rather than across the bar
   from it — at 1920 that split left an 825px hole in the middle. */
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .topbar-fresh {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  font: 400 13px/1 var(--v2-sans);
  color: var(--mds-on-dark-2);
  font-variant-numeric: tabular-nums;
}
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2]:not(.vertical-layout) .topbar-fresh {
  margin-left: 14px;
  padding-left: 14px;
  border-left: 1px solid var(--mds-nav-line);
}
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .topbar-fresh #topbar-date {
  color: var(--mds-on-dark-2);
  font-weight: 500;
}
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .topbar-fresh #last-update {
  font-weight: 400;
}
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2]:not(.vertical-layout) .topbar .status-bar {
  margin-left: auto;
}
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2].vertical-layout .topbar-fresh-sep,
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2].vertical-layout .topbar-fresh #last-update {
  display: none;
}
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .mi-brand-top:hover { opacity: 0.72; }
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .mi-brand-top .mi-mark {
  width: 22px;
  height: 22px;
}
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .mi-brand-top .mi-wordmark {
  width: 96px;
  height: 15px;
}

html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .topbar .status-bar .btn,
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .topbar .status-bar > a.btn,
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .topbar-scheme-btn {
  color: var(--mds-on-dark-2);
}
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .topbar .status-bar .btn:hover,
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .topbar .status-bar > a.btn:hover,
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .topbar-scheme-btn:hover {
  background: var(--mds-nav-hover);
  color: var(--mds-on-dark);
  border-color: transparent;
}
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .topbar .status-bar .btn.toggle[aria-pressed='true'],
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .topbar .status-bar .btn.toggle[data-on='true'] {
  background: var(--mds-nav-hover);
  color: var(--mds-on-dark);
}

/* The bar's right cluster read as three unrelated parts: a pill switch, two
   ghost buttons that were a pixel apart in height, and a bare "?" standing in
   front of a word like stray punctuation. The spacing inverted the grouping as
   well — 12px between the mode switch and Walkthrough but 30px between the two
   actions — so the switch looked attached to the help button.

   One height and one radius for both actions, and the pair sits away from the
   switch: a mode you set once is not the same kind of control as something you
   press. */
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .topbar .status-bar {
  gap: 4px;
}

html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2]:not(.vertical-layout) .topbar .status-bar .btn.toggle {
  height: 34px;
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  font: 500 13px/1 var(--v2-sans);
}

/* Narrow layouts keep the 44px touch target the mobile sheet asks for, and
   both actions take it — Walkthrough was the odd one out at 34. */
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2].vertical-layout .topbar .status-bar .btn.toggle {
  height: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  font: 500 13px/1 var(--v2-sans);
}

/* Four stylesheets each handed these three controls a margin of their own —
   4px here, 10px there, 18px from a third — which is how the gaps ended up
   inverted. Spacing comes from the flex gap now, and the switch keeps the one
   margin that means something: the break between a mode and an action. */
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .topbar .status-bar #mi-shell-top .topbar-guide-btn,
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .topbar .status-bar > .topbar-guide-btn,
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .topbar .status-bar > #refresh-btn,
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .topbar .status-bar > #workspace-menu-btn {
  margin: 0;
}

html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .topbar .status-bar #mi-shell-top .audience-switch,
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .topbar .status-bar > .audience-switch {
  margin: 0 10px 0 0;
}

/* "?" and "↻" are typographic characters pressed into service as icons; they
   land at different widths and weights, and neither tells you anything the
   label beside it does not. */
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .topbar .status-bar .btn .btn-icon {
  display: none;
}

/* Analyst Picks sits on the floor of the rail. margin-top:auto parks it when
   the trader list is short; sticky keeps the card in view while a long
   Professional menu scrolls underneath. The wrapper is opaque so rows do not
   read through, and the inner well is a step darker so the metal CTA has a
   black field to sit on. */
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .sidebar .nav-picks {
  margin-top: auto;
  position: sticky;
  bottom: 0;
  z-index: 2;
  flex-shrink: 0;
  padding: 16px 14px 8px;
  background: linear-gradient(to bottom, transparent, var(--mds-nav) 14px);
}
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .sidebar .nav-picks-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 12px 12px 16px;
  border-radius: var(--v2-r-lg);
  background: var(--v2-sunk);
  box-shadow: var(--v2-e1);
}
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .sidebar .nav-picks-kicker {
  margin: 0 0 8px;
  color: var(--v2-ink-3);
  font: 500 11px/1 var(--v2-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .sidebar .nav-picks-stat {
  margin: 0;
  color: var(--v2-ink);
  font: 650 22px/1.1 var(--v2-sans);
  letter-spacing: var(--v2-tighter);
  font-variant-numeric: tabular-nums;
}
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .sidebar .nav-picks-vs {
  margin: 4px 0 0;
  color: var(--v2-ink-2);
  font: 400 12px/1.35 var(--v2-sans);
}
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .sidebar .nav-picks-copy {
  margin: 8px 0 14px;
  color: var(--v2-ink-3);
  font: 400 12px/1.4 var(--v2-sans);
  text-wrap: pretty;
}
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .sidebar .nav-picks-metal {
  display: flex;
  align-self: stretch;
  width: 100%;
  flex-shrink: 0;
}
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .sidebar .nav-picks-cta {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--v2-r-pill);
  background: #0a0a0a;
  color: var(--v2-ink);
  font: 550 13px/1 var(--v2-sans);
  letter-spacing: -0.005em;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
}
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .sidebar .nav-picks-metal:focus-within {
  outline: none;
  box-shadow: var(--v2-ring);
  border-radius: var(--v2-r-pill);
}
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .app.sidebar-collapsed:not(.sidebar-flyout-open) .sidebar .nav-picks {
  display: none;
}

html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .topbar .audience-switch {
  border-color: var(--mds-nav-line);
  background: var(--v2-sunk);
}
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .topbar .audience-btn {
  color: var(--mds-on-dark-2);
}
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .topbar .audience-btn:hover {
  color: var(--mds-on-dark);
}
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .topbar .audience-btn.active,
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-scheme='dark'][data-v2] .topbar .audience-btn.active {
  background: var(--mds-nav-hover);
  color: var(--mds-on-dark);
  box-shadow: none;
}

html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .topbar .sidebar-toggle {
  color: var(--mds-on-dark);
  border-color: transparent;
  background: transparent;
}
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .topbar .sidebar-toggle:hover,
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .topbar .sidebar-toggle[aria-expanded='true'] {
  background: var(--mds-nav-hover);
  color: var(--mds-on-dark);
}

html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] #mi-shell-top {
  --background: var(--mds-bar);
  --foreground: var(--mds-on-dark);
  --muted-foreground: var(--mds-on-dark-2);
  --border: var(--mds-nav-line);
  --accent: var(--mds-nav-hover);
  color: var(--mds-on-dark);
}

/* =============================================================================
   3. LEFT NAV — graphite, 288px, full height
   ========================================================================== */
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .sidebar {
  background: var(--mds-nav);
  border-right: 1px solid var(--mds-nav-line);
  color: var(--mds-on-dark);
}

html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2]:not(.vertical-layout) .sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  max-height: 100vh;
  z-index: var(--z-sticky);
  padding: 0 14px 16px;
  gap: 10px;
}

html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2]:not(.vertical-layout) .app.sidebar-collapsed .sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  max-height: 100vh;
  width: var(--v2-rail);
  max-width: var(--v2-rail);
}

html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2]:not(.vertical-layout) .app.sidebar-collapsed.sidebar-flyout-open .sidebar {
  width: var(--v2-rail-open);
  max-width: var(--v2-rail-open);
  padding-inline: 16px;
}

/* The brand slot matches the top bar's height and hairline so one line runs
   across the whole top of the page. */
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2]:not(.vertical-layout) .sidebar-brand {
  display: flex !important;
  align-items: center;
  box-sizing: border-box;
  height: var(--v2-topbar);
  min-height: var(--v2-topbar);
  margin: 0 -14px 0;
  padding: 0 26px;
  border-bottom: 1px solid var(--mds-nav-line);
  flex-shrink: 0;
}

html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2]:not(.vertical-layout) .sidebar-brand .mi-brand {
  color: var(--mds-on-dark);
}

html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2]:not(.vertical-layout) .sidebar-brand .mi-mark {
  width: 22px;
  height: 22px;
}

html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2]:not(.vertical-layout) .sidebar-brand .mi-wordmark {
  display: block;
  width: 96px;
  height: 15px;
}

html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .sidebar-collapse-btn,
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .sidebar .sidebar-collapse-btn {
  display: none !important;
}

/* The rail reads as an index of the app, not a menu bolted to it.
   -----------------------------------------------------------------------------
   The page is type, hairlines and numbers. An icon on every row was the one
   element in the rail that answered to nothing else on screen, and with a
   filled pill for the current page it was the generic app-template sidebar.
   Type carries the hierarchy here, the way it does in the tables: a caption in
   the tables' own column-header style, labels beneath it, and the current row
   marked at the rail's edge. Everything — brand mark, captions, labels — sits
   on one 26px edge.

   Rows run wall-to-wall like the table rules do, so the nav lists cancel the
   rail's own 14px inset rather than floating inside it. */
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2]:not(.vertical-layout) .sidebar .sidebar-nav {
  margin-inline: -14px;
  padding-inline: 0;
}

/* Same spec as a table's column header: the rail and the boards agree on what
   a label for a group of rows looks like. */
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .sidebar .nav-section-label,
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .nav-section-label {
  color: var(--v2-ink-3);
  font: 500 12px/1 var(--v2-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 20px 26px 8px;
}
/* The first group needs no caption — Session and Positioning introduce
   themselves. Labels start where grouping actually helps. (!important because
   nav-simple-keep pins kept rows to display:flex !important.) */
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .sidebar .nav-section-label.nav-global-label,
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .nav-section-label.nav-global-label {
  display: none !important;
}

html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .nav-item,
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .sidebar .nav-item,
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .sidebar .nav-item.nav-command,
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .sidebar .nav-item.nav-overview,
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .sidebar .nav-item.nav-custom {
  color: var(--mds-on-dark-2);
  font: 450 14px/1.25 var(--v2-sans);
  letter-spacing: -0.005em;
  height: 36px;
  min-height: 36px;
  padding: 0 26px;
  gap: 0;
  border-radius: 0;
}
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .nav-item .nav-label {
  font: inherit;
}
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2]:not(.vertical-layout) .nav-item .nav-icon,
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2]:not(.vertical-layout) .sidebar .nav-item .nav-icon {
  display: none;
}

html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .nav-item:hover,
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .sidebar .nav-item:hover {
  background: rgba(250, 250, 250, 0.04);
  color: var(--mds-on-dark);
}

/* The current page is marked at the rail's edge rather than filled in as a
   pill, and the mark is ink, not accent. Every saturated colour in this app
   means something about the market — green up, red down — or points at
   something you can act on, and blue is the interactive colour: links, focus
   rings. Where you already are is neither. It follows the same rule the tables
   do, where the subject of a row sits at full ink and everything supporting it
   steps down in grey. */
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .nav-item.active,
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .sidebar .nav-item.active {
  background: var(--v2-hover);
  color: var(--mds-on-dark);
  font-weight: 550;
  box-shadow: inset 2px 0 0 var(--mds-on-dark);
}

/* app-insights.js hangs a per-route value off the nav (Crypto read "+5",
   TradFi "+0.01" — different units, no label, tone-coloured as if they were
   comparable). An unlabelled number in a financial UI is worse than none;
   the figures it teases live on the pages themselves. */
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .sidebar .nav-glance,
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .nav-item .nav-glance {
  display: none !important;
}

html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .app.mode-tradfi .sidebar-nav .nav-item.tradfi-route,
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .app.mode-tradfi .sidebar-nav .nav-item.nav-command.tradfi-route {
  color: var(--mds-on-dark-2);
  background: transparent;
}
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .app.mode-tradfi .sidebar-nav .nav-item.tradfi-route:hover {
  background: rgba(250, 250, 250, 0.04);
  color: var(--mds-on-dark);
}
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .app.mode-tradfi .sidebar-nav .nav-item.tradfi-route.active {
  background: var(--v2-hover);
  color: var(--mds-on-dark);
  box-shadow: inset 2px 0 0 var(--mds-on-dark);
}

html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .sidebar .nav-group-header,
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .sidebar .nav-group.open > .nav-group-header {
  color: var(--mds-on-dark-2);
  font: 500 14px/1.25 var(--v2-sans);
  height: 36px;
  min-height: 36px;
  padding: 0 26px;
  border-radius: 0;
}
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .sidebar .nav-group-header:hover,
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .sidebar .nav-group.open > .nav-group-header {
  background: rgba(250, 250, 250, 0.04);
  color: var(--mds-on-dark);
}
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .sidebar .nav-group.open > .nav-group-items {
  border-left-color: var(--mds-nav-line);
}

html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .sidebar .regime-key,
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] .sidebar-foot,
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2].vertical-layout .sidebar.open .sidebar-foot {
  display: none !important;
}

/* Grain now lives in v2/grain.css, so the funnel, pricing and styleguide pages
   get the same surface as the app. */

html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] #mi-feedback-root {
  display: none !important;
}

html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2] #mi-shell-nav {
  --sidebar: var(--mds-nav);
  --sidebar-foreground: var(--mds-on-dark);
  --sidebar-accent: var(--mds-nav-hover);
  --sidebar-accent-foreground: var(--mds-on-dark);
  --sidebar-border: var(--mds-nav-line);
  --muted-foreground: var(--mds-on-dark-2);
  color: var(--mds-on-dark);
}

/* =============================================================================
   4. PHONE — keep the drawer; same graphite
   ========================================================================== */
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2].vertical-layout .sidebar-brand,
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2].vertical-layout .sidebar.open .sidebar-brand {
  display: none !important;
}
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2].vertical-layout .mi-brand-top .mi-wordmark {
  display: none;
}
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2].vertical-layout .topbar .status-bar {
  margin-left: auto;
}
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2].vertical-layout .sidebar,
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2].vertical-layout .app.sidebar-collapsed .sidebar,
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2].vertical-layout .sidebar.open {
  background: var(--mds-nav) !important;
  border-bottom-color: var(--mds-nav-line);
}
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2].vertical-layout .sidebar.open .nav-item.active,
html:is([data-ui='v2'], [data-ui='v3'], [data-ui='v4'])[data-v2].vertical-layout .sidebar.open .nav-item.nav-command.active {
  background: var(--mds-nav-hover) !important;
  color: var(--mds-on-dark) !important;
}