/* Winston V3 — layout. Mobile-first: top bar + content + bottom nav.
   Desktop (>=1024px): top bar + sidebar + content + (optional) chat dock. */

.app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  /* `auto` rows collapse to 0 when their content is hidden / empty — the
     banner row vanishes when the dashboard is healthy and the ticker row
     vanishes when the operator has no symbols set yet (it stays `hidden`
     until ticker-tape.js paints its first state, even the empty one). */
  grid-template-rows: var(--top-bar-h) auto auto 1fr var(--bottom-nav-h);
  grid-template-areas:
    "top"
    "banner"
    "ticker"
    "content"
    "bottom";
}

.top-bar                 { grid-area: top; }
.bottom-nav              { grid-area: bottom; }
.health-banner-container { grid-area: banner; }
.ticker-tape             { grid-area: ticker; }
.sidebar                 { display: none; }
/* Chat dock is desktop-only inline. Mobile keeps the legacy bottom-sheet
   styled by winston-chip.css; the empty <aside> stays out of layout. */
.chat-dock               { display: none; }

.content {
  grid-area: content;
  padding: var(--content-pad-mobile);
  /* Bottom padding clears the persistent last-action footer line that sits
     just above the bottom-nav PLUS the floating "Ask Winston" chip, which
     is fixed in the bottom-right above the bottom-nav (#347) — without this
     the final row's right edge tucks under the FAB at scroll-bottom.
     ~28px footer + 16px safety + ~48px FAB clearance. */
  padding-bottom: calc(var(--space-10) + var(--tap-min));
  /* Grid items default to min-width:auto (= min-content), so a single wide
     descendant blows the `1fr` content column past the viewport and the
     whole page scrolls sideways. Pin to 0 so the column tracks the viewport
     and inner grids/flexes shrink+wrap instead. Desktop already sets this
     in the >=1024px block; mobile needs it too (mobile-parity, 2026-06-01). */
  min-width: 0;
}

@media (min-width: 1024px) {
  /* Desktop has no bottom-nav, so the footer hugs the viewport bottom
     directly — reserve the same ~40px clearance. */
}

.screen {
  max-width: var(--content-max);
  margin: 0 auto;
}
/* Slice 4-density (2026-05-27): data-density drives the width cap so
   each screen fits its primary job above-the-fold without a 500px
   right-gutter on a 1920px viewport. narrative = 1100px (~70 char
   line length); dense = 1600px (data tables); fluid = no cap (Desk
   manages its own width via the inline ticket sidebar). */
.screen[data-density="dense"] { max-width: var(--content-max-dense); }
.screen[data-density="fluid"] { max-width: none; }
.screen[hidden] { display: none; }

/* Desktop layout: sidebar left, no bottom nav. The third column (chat
   dock) is 0fr until the operator opens the Winston chip, at which
   point `html.winston-chip-open` widens it. The grid transition gives
   the dock a smooth slide-in instead of a teleport. */
@media (min-width: 1024px) {
  .app {
    grid-template-columns: var(--sidebar-w) 1fr 0fr;
    grid-template-rows: var(--top-bar-h) auto auto 1fr;
    /* The sidebar is a full-height left rail: it spans the banner +
       ticker + content rows so it pins directly under the top-bar and
       does NOT travel as the page scrolls (the old layout placed banner +
       ticker ABOVE the sidebar, so it slid up by their height before the
       sticky pin engaged — read as "the menu scrolls with the page").
       Banner + ticker + dock now sit to the RIGHT of the rail, above the
       content only. The dock's natural top still aligns with the sticky
       pin so `height: calc(100vh - top-bar - footer)` stays correct. */
    /* The sidebar is a full-height left rail: it spans EVERY row (incl. the
       top row) so the Winston brand sits at its top and the vertical divider
       (.sidebar border-right) runs unbroken from the page top to the bottom.
       The top bar covers only the content columns to its right, so there's
       no horizontal divider between the brand and the menu below it. */
    grid-template-areas:
      "sidebar  top      top"
      "sidebar  banner   dock"
      "sidebar  ticker   dock"
      "sidebar  content  dock";
    transition: grid-template-columns 160ms ease;
  }
  html.winston-chip-open .app {
    /* Chat dock expands inline — content reflows left, no overlay. */
    grid-template-columns: var(--sidebar-w) 1fr 420px;
  }
  .top-bar    { grid-area: top; }
  .sidebar    { grid-area: sidebar; display: flex; }
  .content    {
    grid-area: content;
    padding: var(--content-pad);
    min-width: 0;   /* allow the column to shrink when the dock opens */
  }
  .bottom-nav { display: none; }
  html.winston-chip-open .chat-dock {
    grid-area: dock;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-left: 1px solid var(--border);
    overflow: hidden;
    min-height: 0;
    /* Sticky + fixed (not `max-`) height so the dock is a constant
       size — no grow-with-content, no shrink-when-empty — and the
       inner chat-thread scrolls independently of the page. Height is
       the full viewport minus the top bar and the fixed last-action
       footer (22px), so the dock bottoms out exactly at the footer's
       top border. Palette-hint is suppressed while the dock is open
       (rule below), so it doesn't need its own clearance. */
    position: sticky;
    top: var(--top-bar-h);
    align-self: start;
    /* `vh` first as the fallback; `dvh` overrides it on browsers that
       support it. Plain 100vh is the *large* (toolbar-hidden) viewport on
       a touch browser, so with the URL bar showing the dock overruns the
       visible fold — the composer drops below it and the sticky dock
       scrolls with the page. `dvh` tracks the currently-visible viewport,
       so the dock always bottoms out at the footer and the thread (not the
       page) scrolls. */
    height: calc(100vh - var(--top-bar-h) - var(--last-action-footer-h));
    height: calc(100dvh - var(--top-bar-h) - var(--last-action-footer-h));
  }
  /* Suppress the palette-hint while the dock is open — it competes
     with the composer for the same bottom-center space and the chip is
     already an obvious affordance. */
  html.winston-chip-open .palette-hint { display: none !important; }
}