/*
 * surface_shell.css — <surface-shell> custom element styling.
 *
 * Phase 6 of the surface-architecture migration. Consolidates the page-grid
 * rules that previously lived split across:
 *   - styles.css       (.shell)           Concepts: rail | main
 *   - canvas.css       (.cv-shell, .cv-shell.panel-open, .cv-shell.is-rail-thin)
 *                                          Canvas: header-row, then rail | canvas | optional panel
 *
 * Spec: surface_architecture.md §4.4 + §5 (CSS ownership) + §7 Phase 6
 *
 * BEM-style: surface-shell carries no inner-part classes — it's a pure grid
 * container. Children carry `slot="rail|content|panel|header"` marker
 * attributes which the rules below use to place them in the grid.
 *
 * Layout model (CSS Grid):
 *   grid-template-rows:    auto 1fr;   (header row + content row)
 *   grid-template-columns: <rail-col> 1fr [panel-col?]
 *
 * The rail column width is driven by `data-rail`:
 *   normal  →  240px
 *   thin    →   46px
 *   hidden  →    0
 *
 * The panel column is added when `data-panel="open"`:
 *   open    →  420px appended on the right
 *   closed  →  no third column
 *
 * Children placement (light-DOM slot pattern, no Shadow DOM):
 *   - [slot="header"]   → row 1, spanning all columns (optional — Canvas uses)
 *   - [slot="rail"]     → row 2, column 1
 *   - [slot="content"]  → row 2, column 2
 *   - [slot="panel"]    → row 2, column 3 (only visible when data-panel="open")
 *
 * Edge: if a surface does NOT use a header slot (Concepts puts <surface-header>
 * inside its <main slot="content"> region), the header row collapses naturally
 * because `auto` row + no row-1 children = 0px row.
 */

/* ============================================================
   HOST — CSS Grid container, mode-driven columns
   ============================================================ */
surface-shell {
  display: grid;
  grid-template-rows: auto 1fr;
  /* Default to normal rail, no panel. Overridden below per data-rail / data-panel. */
  grid-template-columns: 240px 1fr;
  height: 100vh;
  overflow: hidden;
  background: var(--canvas, #FBF7F1);
  /* Default 10px padding + gap matches the old .shell on Concepts.
     Canvas overrides via the .surface-shell--canvas hook below. */
  padding: 10px;
  gap: 10px;
  box-sizing: border-box;
  transition: grid-template-columns 0.25s ease;
}

/* ============================================================
   DATA-RAIL — column 1 width
   ============================================================ */
surface-shell[data-rail="thin"] {
  grid-template-columns: 46px 1fr;
}
surface-shell[data-rail="hidden"] {
  grid-template-columns: 0 1fr;
}

/* ============================================================
   DATA-PANEL — optional column 3
   ============================================================ */
surface-shell[data-panel="open"] {
  grid-template-columns: 240px 1fr 420px;
}
surface-shell[data-rail="thin"][data-panel="open"] {
  grid-template-columns: 46px 1fr 420px;
}
surface-shell[data-rail="hidden"][data-panel="open"] {
  grid-template-columns: 0 1fr 420px;
}

/* ============================================================
   CHILDREN PLACEMENT — by slot marker attribute
   ============================================================ */
surface-shell > [slot="header"] {
  grid-column: 1 / -1;
  grid-row: 1;
}
surface-shell > [slot="rail"] {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
}
surface-shell > [slot="content"] {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  /* The content region typically owns its own scroll. */
}
surface-shell > [slot="panel"] {
  grid-column: 3;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
}

/* When panel is closed, hide any panel-slotted child so a stale element
   doesn't bleed into the layout. Surfaces should usually conditionally
   render the panel, but defense-in-depth. */
surface-shell[data-panel="closed"] > [slot="panel"] {
  display: none;
}

/* ============================================================
   VARIANT — Canvas surface
   ============================================================
   Canvas uses a different visual treatment than Concepts: no body padding
   on the host (the rail + content draw their own backgrounds edge-to-edge),
   and 44px of right-side breathing room so the chat-panel tab sits flush
   against the page edge without overlapping the right panel.
*/
surface-shell.surface-shell--canvas {
  padding: 0;
  padding-right: 44px;
  gap: 0;
}

/* ============================================================
   RESPONSIVE — collapse rail on narrow viewports (Concepts)
   ============================================================
   Mirrors the old @media (max-width: 900px) override on `.shell` —
   hide the rail and let content fill the viewport.
*/
@media (max-width: 900px) {
  surface-shell:not(.surface-shell--canvas) {
    grid-template-columns: 1fr;
    padding: 0;
    gap: 0;
  }
  surface-shell:not(.surface-shell--canvas) > [slot="rail"] {
    display: none;
  }
}

/* ============================================================
   Light-DOM cascade hint
   ============================================================
   Children of <surface-shell> often need `min-height: 0` so flex/grid
   children inside them can shrink. The rules above set that explicitly
   on the slotted regions; primitives inside continue to own their own
   min-* policy per spec §5.4.
*/

/* ============================================================
   SHELL-RAIL-WRAP — wrapping aside for the rail slot (Concepts)
   ============================================================
   Wave 19A2-FIX P3 — moved here from surface_rail.css per spec §5.4
   (scaffold owns its CSS; component does not).

   On Concepts the rail markup is `<aside slot="rail" class="shell-rail-wrap">
   <surface-rail>...</surface-rail></aside>`. The wrapping aside needs
   an explicit flex column AND min-height: 0 so its child <surface-rail>
   fills the grid row and the inner scroll container actually bounds.
   Without this the rail body can grow past viewport height (when the
   concept list is long) and the bottom items become unreachable.
*/
.shell-rail-wrap {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}