/* Metrics Explorer: persistent investor-facing navigation shell. */
#metrics-view .metrics-hero { padding: 34px 0 18px; }
#metrics-view .metrics-hero h1 { font-size: clamp(30px, 3vw, 46px); }
.metrics-explorer-shell { display: grid; grid-template-columns: minmax(220px, 18%) minmax(0, 1fr); gap: 24px; align-items: start; width: 100%; max-width: 100%; margin-bottom: 36px; }
.metrics-explorer-shell > * { min-width: 0; }
.metric-selector { position: sticky; top: 92px; max-height: calc(100vh - 112px); overflow: auto; padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.metric-selector-head { display: grid; grid-template-columns: 1fr auto; align-items: center; margin-bottom: 14px; }
.metric-selector-head .eyebrow { grid-column: 1; margin: 0; }
.metric-selector-head h2 { grid-column: 1; margin: 3px 0 0; font: 400 24px Georgia, serif; }
.metric-selector-head button { grid-column: 2; grid-row: 1 / 3; padding: 4px 9px; font-size: 20px; background: transparent; }
.metric-selector > label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; }
.metric-selector input { min-width: 0; width: 100%; }
.metric-list { display: grid; gap: 8px; margin-top: 16px; }
.metric-nav-category { border-top: 1px solid var(--line); padding-top: 8px; }
.metric-category-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; border: 0; background: transparent; padding: 7px 4px; font-weight: 700; text-align: left; }
.metric-category-toggle b { font-weight: 400; transition: transform .18s ease; }
.metric-nav-category.is-collapsed .metric-category-toggle b { transform: rotate(-90deg); }
.metric-nav-category.is-collapsed .metric-category-items { display: none; }
.metric-category-items { display: grid; gap: 3px; }
.metric-button { display: grid; width: 100%; gap: 2px; border: 0; border-left: 3px solid transparent; background: transparent; padding: 9px 10px; text-align: left; }
.metric-button:hover { background: #f1eee6; }
.metric-button.is-selected { border-left-color: var(--orange); background: #f5eadc; color: var(--ink); }
.metric-button span { font-weight: 650; }
.metric-button small { color: var(--muted); font-size: 9px; letter-spacing: .04em; }
.metric-mobile-selector { display: none; }
.metrics-explorer-shell.is-selector-collapsed { grid-template-columns: 48px minmax(0, 1fr); }
.metrics-explorer-shell.is-selector-collapsed .metric-selector { overflow: hidden; padding: 8px; }
.metrics-explorer-shell.is-selector-collapsed .metric-selector-head > :not(button),
.metrics-explorer-shell.is-selector-collapsed .metric-selector > label,
.metrics-explorer-shell.is-selector-collapsed .metric-list { display: none; }
.metrics-explorer-shell.is-selector-collapsed .metric-selector-head { display: block; margin: 0; }
.metrics-explorer-shell.is-selector-collapsed .metric-selector-head button { width: 100%; padding: 6px; }
.mvrv-explorer-active #metrics-view .metrics-hero { display: flex; }
.metrics-explorer-shell:has(.is-mvrv-page) > .metric-selector { display: block; }

@media (max-width: 800px) {
  #metrics-view .metrics-hero { padding-bottom: 12px; }
  .metrics-explorer-shell,
  .metrics-explorer-shell.is-selector-collapsed { display: block; }
  .metric-mobile-selector { display: grid; grid-template-columns: 1fr auto; gap: 2px; width: 100%; margin-bottom: 12px; text-align: left; }
  .metric-mobile-selector span { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
  .metric-mobile-selector strong { grid-column: 1; }
  .metric-mobile-selector b { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .metric-selector,
  .metrics-explorer-shell.is-selector-collapsed .metric-selector { display: none; position: static; max-height: 65vh; margin-bottom: 14px; padding: 16px; overflow: auto; }
  .metrics-explorer-shell:has(.is-mvrv-page):not(.is-mobile-selector-open) > .metric-selector { display: none; }
  .metrics-explorer-shell.is-mobile-selector-open .metric-selector,
  .metrics-explorer-shell.is-selector-collapsed.is-mobile-selector-open .metric-selector,
  .metrics-explorer-shell:has(.is-mvrv-page).is-mobile-selector-open > .metric-selector { display: block; }
  .metrics-explorer-shell.is-selector-collapsed .metric-selector-head > :not(button),
  .metrics-explorer-shell.is-selector-collapsed .metric-selector > label,
  .metrics-explorer-shell.is-selector-collapsed .metric-list { display: initial; }
  .metric-selector-head button { display: none; }
}