/* React app owns #root. Vanilla views live in #mi-legacy as a guest. */
.app > #root,
.app > #mi-legacy {
  grid-area: content;
  min-width: 0;
  min-height: 0;
}
html.mi-react-app #root {
  display: block;
  overflow: auto;
}
html.mi-react-app #mi-legacy { display: none; }
html.mi-react-app.mi-legacy-guest #root { display: none; }
html.mi-react-app.mi-legacy-guest #mi-legacy { display: block; overflow: auto; }
html:not(.mi-react-app) #root { display: none; }
html:not(.mi-react-app) #mi-legacy { display: block; }

/* The page column shares the shell's gutter so the top bar's title and actions
   land on the content's left and right edges. A 1500px cap with auto margins
   used to centre this column inside the rail's remainder, which pushed page
   headings ~90px right of the bar that labels them. Very wide screens are
   handled by the gutter growing (see --mds-gutter), not by centring. */
.mi-app-page {
  padding: 20px var(--mds-gutter, 28px) 32px;
  max-width: none;
  margin: 0;
}
.mi-page { display: flex; flex-direction: column; gap: var(--v2-s5, 1.25rem); }
.mi-page-meta { margin-top: 0.75rem; }
.mi-tool-page .mi-tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}
.mi-tool-page .mi-span-2 { grid-column: 1 / -1; }
.mi-tool-page label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--v2-ink-2, #a1a1aa); }
.mi-select, .mi-tool-page select {
  height: 36px;
  border: 1px solid var(--v2-line-2, #27272a);
  border-radius: 8px;
  background: var(--v2-sunk, #09090b);
  color: inherit;
  padding: 0 10px;
}
.mi-tool-actions, .mi-tool-filters, .mi-kpi-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mi-kpi { min-width: 8rem; }
.mi-kpi-k { display: block; font-size: 11px; color: var(--v2-ink-3, #71717a); }
.mi-trade-list, .mi-play-grid { display: grid; gap: 6px; }
.mi-trade-row, .mi-play-card {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr auto auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--v2-line, #27272a);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.mi-play-card { grid-template-columns: 1fr; }
.mi-play-name { font-weight: 600; }
.mi-play-one, .mi-play-detail p, .mi-workflow { color: var(--v2-ink-2, #a1a1aa); }
.mi-hits { display: grid; gap: 4px; margin-top: 6px; }
.mi-hits button { text-align: left; background: transparent; color: inherit; border: 0; padding: 4px 0; cursor: pointer; }
.mi-assets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
/* The asset detail page is styled entirely by v2/asset-page.css. */

/* Host plumbing for React islands. Tokens come from v2/tokens.css. */
#mi-react-root {
  display: none;
  padding: var(--v2-s6) var(--v2-gutter);
  max-width: var(--v2-page-max);
}
html.mi-react-on #mi-react-root { display: block; }
html.mi-react-on #view-sizing .mit-page[hidden] { display: none !important; }

#mi-home-react { min-height: 12rem; }
html[data-ui='v2'] #mi-home-react button:not(.mi-tip) {
  appearance: none;
}
html.mi-react-home .home-market-outlook .hmo-head,
html.mi-react-home .home-market-outlook #hmo-root { display: none !important; }
html.mi-react-home #mi-home-react { display: block; }

#mi-pos-react { min-height: 12rem; }
html[data-ui='v2'] #mi-pos-react button:not(.mi-tip) {
  appearance: none;
}
html.mi-react-pos #ip-root { display: none !important; }
html.mi-react-pos #mi-pos-react { display: block; }

/* React chrome — vanilla sidebar nav and audience/walkthrough stay in the DOM
   for command palette + host bindings; the visible controls are React. */
html.mi-react-shell #sidebar > nav.sidebar-nav:not(#mi-shell-nav),
html.mi-react-shell #sidebar > .nav-search-wrap,
html.mi-react-shell #sidebar > #nav-simple-toggle {
  display: none !important;
}
html.mi-react-shell #mi-shell-nav {
  display: flex;
}
html.mi-react-shell #mi-shell-nav[hidden] {
  display: none !important;
}
html.mi-react-shell .status-bar > .audience-switch,
html.mi-react-shell .status-bar > .topbar-guide-btn {
  display: none !important;
}
html.mi-react-shell #mi-shell-top {
  display: contents;
}
html.mi-react-shell #mi-shell-top[hidden] {
  display: none !important;
}
/* Order only. Spacing for the top bar's right cluster has one owner, in
   v2/mdps-shell.css — margins set here were part of what pulled it crooked. */
html.mi-react-shell #mi-shell-top .audience-switch,
html.mi-react-shell #mi-shell-top .topbar-guide-btn {
  order: 0;
}

/* React owns when research groups are on screen (Professional). Host
   nav-simple-mode would otherwise collapse them. Keep the collapsed rail icon-only. */
html.mi-react-shell #mi-shell-nav .nav-group,
html.mi-react-shell #mi-shell-nav .nav-group.open .nav-item,
html.mi-react-shell #mi-shell-nav .nav-group-head {
  display: flex !important;
  visibility: visible !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

html.mi-react-shell #mi-shell-nav .nav-group-head {
  align-items: center;
}

html.mi-react-shell #mi-shell-nav .nav-group-head .nav-item {
  flex: 1;
  min-width: 0;
}

html.mi-react-shell #mi-shell-nav .nav-group-toggle {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

html.mi-react-shell #mi-shell-nav .nav-group-toggle:hover {
  background: rgba(250, 250, 250, 0.04);
}

html.mi-react-shell #mi-shell-nav .nav-group.open .nav-group-toggle .nav-group-chevron {
  display: inline-block;
  transform: rotate(90deg);
}

html.mi-react-shell #mi-shell-nav .nav-group-items[hidden] {
  display: none !important;
  max-height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

html.mi-react-shell #mi-shell-nav .nav-group-items .nav-item.nav-sub {
  padding-left: 38px;
}
html.mi-react-shell .app.sidebar-collapsed:not(.sidebar-flyout-open) #mi-shell-nav .nav-group {
  display: none !important;
}

/* Loading gate — the page column only. The rail and the bar stay lit and
   clickable, so a load reads as the board thinking rather than the app
   restarting. */
.mi-loading-gate {
  position: fixed;
  top: var(--v2-topbar, 56px);
  right: 0;
  bottom: 0;
  left: var(--sidebar-width, 240px);
  z-index: 30;
  display: grid;
  place-items: center;
  background: var(--v2-canvas, #09090b);
}
html.vertical-layout .mi-loading-gate {
  top: var(--vertical-nav-offset, 56px);
  left: 0;
}
.mi-loading-gate-mark {
  display: grid;
  justify-items: center;
  gap: 16px;
  /* The dither cells paint in currentColor. */
  color: var(--v2-ink-2, #a1a1aa);
}
.mi-loading-gate-note {
  font: 400 12px/1 var(--v2-sans);
  letter-spacing: 0.02em;
  color: var(--v2-ink-3, #71717a);
}

/* Feedback widget. Its own surface, because the shared shadcn tokens gave it a
   near-white submit pill and the browser's default font — a chat bubble from a
   different product. It borrows the top bar's control: 34px tall, 6px radius,
   one hairline, text over icon. */
.mi-fb-root {
  --mi-fb-trigger: 36px;
  position: fixed;
  bottom: 24px;
  z-index: 25;
  pointer-events: none;
}
.mi-fb-root-right { right: 24px; }
.mi-fb-root-left { left: 24px; }

.mi-fb-shell {
  position: absolute;
  bottom: 0;
  overflow: hidden;
  pointer-events: auto;
  border-radius: 8px;
  background: var(--v2-surface, #121216);
  color: var(--v2-ink, #fafafa);
  box-shadow: var(--v2-e3, 0 0 0 1px #2a2a32, 0 8px 28px #00000066);
}
.mi-fb-shell-closed {
  /* The trigger is absolute inside the shell, so it cannot size it. Both are
     given the same box instead. */
  width: var(--mi-fb-trigger);
  height: var(--mi-fb-trigger);
  padding: 0;
}
.mi-fb-shell-open {
  width: min(86vw, 300px);
  padding: 10px;
}

.mi-fb-trigger {
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--mi-fb-trigger);
  height: var(--mi-fb-trigger);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--v2-ink-2, #a1a1aa);
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease;
}
.mi-fb-trigger:hover {
  background: var(--v2-hover, #1b1b21);
  color: var(--v2-ink, #fafafa);
}
.mi-fb-trigger-mark {
  display: grid;
  place-items: center;
}
.mi-fb-trigger-mark svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.75;
}

.mi-fb-body {
  border-radius: 4px;
  background: var(--v2-sunk, #0c0c0f);
  padding: 12px;
}
.mi-fb-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.mi-fb-title {
  margin: 0;
  font: 550 13px/1.3 var(--v2-sans);
  letter-spacing: -0.005em;
  color: var(--v2-ink, #fafafa);
}
.mi-fb-note {
  margin: 0;
  font: 400 12px/1.45 var(--v2-sans);
  color: var(--v2-ink-3, #71717a);
  text-wrap: pretty;
}
.mi-fb-close {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: -2px -2px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--v2-ink-3, #71717a);
  cursor: pointer;
  transition: color 120ms ease;
}
.mi-fb-close:hover { color: var(--v2-ink, #fafafa); }
.mi-fb-close svg { width: 13px; height: 13px; }

.mi-fb-input {
  display: block;
  width: 100%;
  min-height: 64px;
  margin-top: 8px;
  padding: 0;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  /* Textareas do not inherit the page face. */
  font: 400 13px/1.5 var(--v2-sans);
  color: var(--v2-ink, #fafafa);
}
.mi-fb-input::placeholder { color: var(--v2-ink-4, #52525b); }

.mi-fb-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 8px;
}
.mi-fb-btn {
  flex: 1;
  height: 32px;
  border: 0;
  border-radius: 6px;
  font: 500 13px/1 var(--v2-sans);
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.mi-fb-btn:disabled { cursor: default; }
.mi-fb-btn-ghost {
  background: transparent;
  color: var(--v2-ink-2, #a1a1aa);
}
.mi-fb-btn-ghost:hover {
  background: var(--v2-hover, #1b1b21);
  color: var(--v2-ink, #fafafa);
}
.mi-fb-btn-solid {
  background: var(--v2-sunk-2, #1b1b21);
  color: var(--v2-ink, #fafafa);
  box-shadow: inset 0 0 0 1px var(--v2-line-2, #2a2a32);
}
.mi-fb-btn-solid:hover:not(:disabled) { background: var(--v2-hover-2, #26262d); }
.mi-fb-btn-solid:disabled { color: var(--v2-ink-4, #52525b); }

.mi-fb-state {
  display: grid;
  justify-items: start;
  gap: 6px;
  padding: 14px 12px 16px;
}
.mi-fb-check {
  width: 20px;
  height: 20px;
  margin-bottom: 2px;
  color: var(--v2-ink, #fafafa);
}
.mi-fb-alert {
  width: 18px;
  height: 18px;
  margin-bottom: 2px;
  color: var(--v2-warn, #f68f3c);
}
.mi-fb-retry {
  flex: 0 0 auto;
  margin-top: 6px;
  padding: 0 12px;
}

@media (max-width: 720px) {
  .mi-fb-root { bottom: 16px; }
  .mi-fb-root-right { right: 16px; }
  .mi-fb-root-left { left: 16px; }
}

.shd-page { display: flex; flex-direction: column; gap: var(--v2-s6); }
.shd-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v2-s3);
  padding: var(--v2-s3) var(--v2-s4);
  border-radius: var(--v2-r-md);
  background: var(--v2-accent-soft);
  color: var(--v2-ink-2);
  font-size: var(--v2-t-sm);
}
.shd-card {
  background: var(--v2-surface);
  border-radius: var(--v2-r-lg);
  box-shadow: var(--v2-e1);
  padding: var(--v2-s5);
}
.shd-title { margin: 0; font: 600 var(--v2-t-2xl)/1.2 var(--v2-sans); letter-spacing: var(--v2-tighter); }
.shd-sub { margin: var(--v2-s2) 0 0; color: var(--v2-ink-3); font-size: var(--v2-t-sm); line-height: 1.5; }
.shd-grid { display: grid; gap: var(--v2-s4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .shd-grid { grid-template-columns: 1fr; } }
.shd-field { display: flex; flex-direction: column; gap: var(--v2-s1); }
.shd-label { font-size: var(--v2-t-sm); font-weight: 500; color: var(--v2-ink-2); display: inline-flex; align-items: center; }
.shd-input {
  height: 36px;
  padding: 0 var(--v2-s3);
  border: 1px solid var(--v2-line-2);
  border-radius: var(--v2-r-md);
  background: var(--v2-sunk);
  color: var(--v2-ink);
  font: 400 var(--v2-t-sm)/1 var(--v2-sans);
}
.shd-stat { display: flex; flex-direction: column; gap: 4px; }
.shd-stat-k { font-size: var(--v2-t-xs); color: var(--v2-ink-3); }
.shd-stat-v { font: 600 var(--v2-t-xl)/1.2 var(--v2-sans); font-variant-numeric: tabular-nums; }
.shd-row { display: flex; gap: var(--v2-s3); flex-wrap: wrap; }