/* Overlay top-bar frost on every authenticated page.
 *
 * Dashboard already scrolls `.content-left`, so cards pass under the bar.
 * Markets / Watchlist / Desk / Analysts / etc. size an inner shell to
 * `100vh - topbar` and scroll THAT, so nothing ever travels under the bar
 * and the frost looks solid. This sheet loads after `{% block after_quiet %}`
 * so it beats those page !important height/overflow locks.
 */

html,
html body,
html body .main-content,
html body .app-layout {
  --oc-topbar-stack: calc(var(--topbar-height) + var(--sat-fix, env(safe-area-inset-top, 0px)));
  --oc-statusbar-stack: 0px;
}
@media (min-width: 1025px) {
  html body.has-status-bar,
  html body.has-status-bar .main-content,
  html body.has-status-bar .app-layout {
    --oc-statusbar-stack: calc(var(--statusbar-height, 32px) + env(safe-area-inset-bottom, 0px));
  }
}

/* ---- Full-bleed workspaces: the first child is the page scroller ---- */
html body .content-left:has(> .mkt-shell),
html body .content-left:has(> #markets-root),
html body .content-left:has(> .wl-root),
html body .content-left:has(> #desk-root),
html body .content-left:has(> .st-root--builder),
html body .content-left:has(> .th-pg),
html body .content-left:has(> .an-root),
html body .content-left:has(> .im-root),
html body .content-left:has(> .finder),
html body .content-left:has(> .cal-root),
html body .content-left:has(> .mc-root),
html body .content-left:has(> .pw-root),
html body .content-left:has(> .pipeline-workspace) {
  overflow: hidden !important;
  padding-top: 0 !important;
}

html body .content-left:has(> .mkt-shell)::before,
html body .content-left:has(> #markets-root)::before,
html body .content-left:has(> .wl-root)::before,
html body .content-left:has(> #desk-root)::before,
html body .content-left:has(> .st-root--builder)::before,
html body .content-left:has(> .th-pg)::before,
html body .content-left:has(> .an-root)::before,
html body .content-left:has(> .im-root)::before,
html body .content-left:has(> .finder)::before,
html body .content-left:has(> .cal-root)::before,
html body .content-left:has(> .mc-root)::before,
html body .content-left:has(> .pw-root)::before,
html body .content-left:has(> .pipeline-workspace)::before {
  display: none !important;
  content: none !important;
  height: 0 !important;
}

html body .content-left > .mkt-shell,
html body .content-left > #markets-root,
html body .content-left > .wl-root,
html body .content-left > #desk-root,
html body .content-left > .st-root--builder,
html body .content-left > .th-pg,
html body .content-left > .an-root,
html body .content-left > .im-root,
html body .content-left > .finder,
html body .content-left > .cal-root,
html body .content-left > .mc-root,
html body .content-left > .pw-root,
html body .content-left > .pipeline-workspace {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}

/* Scrollable shells: spacer as first flex/block child so rows pass under frost. */
html body .content-left > .finder,
html body .content-left > .mc-root {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
html body .content-left > .mkt-shell,
html body .content-left > #markets-root,
html body .content-left > .cal-root,
html body .content-left > .wl-root {
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding-top: var(--oc-topbar-stack, var(--topbar-height)) !important;
}
html body .content-left > .mkt-shell::before,
html body .content-left > #markets-root::before,
html body .content-left > .cal-root::before,
html body .content-left > .wl-root::before {
  content: none !important;
  display: none !important;
  height: 0 !important;
}

html body .content-left > .mkt-shell::before,
html body .content-left > #markets-root::before,
html body .content-left > .finder::before,
html body .content-left > .mc-root::before {
  content: "";
  display: block;
  height: var(--oc-topbar-stack, var(--topbar-height));
  flex-shrink: 0;
  pointer-events: none;
}

/* Ticker: padding-top, not ::before. A flex spacer was collapsing so the
   masthead sat under the fixed top bar and looked cut in half. */
html body .content-left > .th-pg {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding-top: calc(var(--oc-topbar-stack, var(--topbar-height)) + 8px) !important;
}
html body .content-left > .th-pg::before {
  content: none !important;
  display: none !important;
  height: 0 !important;
}
/* Statements / thesis / profile live below the chart. Company plates clip
   with overflow:hidden, which zeros flex min-height — a 100%-tall .th-pg then
   shrinks those sections to nothing instead of scrolling to them. */
html body .content-left > .th-pg > * {
  flex-shrink: 0;
}

/* Watchlist: the table wrap is the scroller (sticky thead + wide table).
   Do not flatten it to overflow:visible — that clips the list. */
html body .content-left > .wl-root .wl-table-wrap {
  overflow: auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
}
html body.wl-is-fs .content-left > .wl-root {
  padding-top: 0 !important;
}

/* Grid workspaces (analysts, IM, desk, studio): keep inner panes, pad
   the shell so chrome sits below the bar. The bar still frosts whatever
   is in the overlay slot. */
html body .content-left > .an-root,
html body .content-left > .im-root,
html body .content-left > #desk-root,
html body .content-left > .st-root--builder {
  overflow: hidden !important;
  padding-top: var(--oc-topbar-stack, var(--topbar-height)) !important;
}

html body .content-left > .an-root::before,
html body .content-left > .im-root::before,
html body .content-left > #desk-root::before,
html body .content-left > .st-root--builder::before {
  content: none !important;
  display: none !important;
  height: 0 !important;
}

/* Bottom chrome (status bar / command tray) is position:fixed. Page shells
   use height:100% and many pages set .content-left { padding: 0 !important },
   so padding on .content-left never clears the bar. Shorten .main-content
   instead — 100% children then end above the bar. */
@media (min-width: 1025px) {
  html body.has-status-bar .main-content {
    height: calc(100vh - var(--oc-statusbar-stack, 0px)) !important;
    height: calc(100dvh - var(--oc-statusbar-stack, 0px)) !important;
    max-height: calc(100vh - var(--oc-statusbar-stack, 0px)) !important;
    max-height: calc(100dvh - var(--oc-statusbar-stack, 0px)) !important;
    min-height: 0 !important;
  }
  html body.has-status-bar {
    --chat-fab-bottom: calc(var(--oc-statusbar-stack, 32px) + 16px);
  }
}
@media (max-width: 1023px) {
  html body .main-content {
    height: calc(100vh - var(--command-tray-pad, 0px)) !important;
    height: calc(100dvh - var(--command-tray-pad, 0px)) !important;
    max-height: calc(100vh - var(--command-tray-pad, 0px)) !important;
    max-height: calc(100dvh - var(--command-tray-pad, 0px)) !important;
    min-height: 0 !important;
  }
  /* Tray inset now lives on .main-content; do not add it again on the wrapper. */
  html body .main-content .content-wrapper {
    padding-bottom: 0 !important;
  }
  html body .content-left {
    padding-bottom: 8px !important;
  }
}

/* ---- Brand sits on the left rail's columns (desktop) ----
   The sidebar is a plate inset 10px from the viewport. Open, its content
   column (section titles, search, nav icons) starts 14px inside the plate;
   closed, the rail centres its icons 32px inside. The top bar pads 20px, so
   the wordmark sat 4px left of the open column and the symbol 10px left of
   the rail's icon centre. The symbol is the image's left 24px, ink centred
   12px in, so the margins below put its edge on the open column and its
   centre on the rail. The margin moves on the rail's own clock. */
@media (min-width: 1025px) {
  html body .top-bar-brand .sidebar-brand {
    margin-left: 4px;
    transition: width var(--dur-sheet, 320ms) var(--ease-out, ease),
                margin-left var(--dur-sheet, 320ms) var(--ease-out, ease);
  }
  html body.sidebar-collapsed .top-bar-brand .sidebar-brand,
  html[data-sidebar-init="collapsed"] body .top-bar-brand .sidebar-brand {
    margin-left: 10px;
  }
}
@media (min-width: 1025px) and (prefers-reduced-motion: reduce) {
  html body .top-bar-brand .sidebar-brand { transition: none; }
}