/* shell.css — GioBiz tri-surface responsive shell (Lane 2a slice 2, chief c544).
 * Vanilla. OPT-IN via [data-gb-shell] on a page root — EVERY rule is scoped under
 * [data-gb-shell], so a page that does NOT opt in is completely unaffected (additive law).
 *
 * PHONE (<=640) = PASS-THROUGH: the base rules impose NO grid / NO sidebar — the shell root is
 * plain block flow, so an adopting page renders IDENTICALLY to today on phone. This is the
 * no-regress guarantee: at phone width the shell adds nothing, so it cannot break the phone.
 * TABLET (641-1024) = two-column (main + optional aside). DESKTOP (>=1025) = left sidebar +
 * content capped at --shell-maxw (no infinite stretch) + optional right aside.
 *
 * React (new screens) mounts INSIDE .gb-shell__main as CONTENT ONLY — never React-ify the
 * chrome (chief c503/c544 r5). @media hardcodes 640/1024 because CSS @media cannot read var();
 * canonical source of those numbers = tokens.css (--bp-phone-max / --bp-tablet-max). */

/* ── BASE / PHONE (mobile-first) = pass-through, no chrome imposed ── */
[data-gb-shell] { display: block; width: 100%; }
[data-gb-shell] .gb-shell__main { width: 100%; min-width: 0; }
/* nav + aside sit in normal block flow on phone (page/content decides their phone look) */

/* ── TABLET 641–1024: main + aside two-column ── */
@media (min-width: 641px) and (max-width: 1024px) {
  [data-gb-shell] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    gap: var(--sp-5, 20px);
    align-items: start;
  }
  [data-gb-shell] .gb-shell__nav { grid-column: 1 / -1; }   /* nav spans the top */
  [data-gb-shell][data-gb-noaside] { grid-template-columns: 1fr; }
}

/* ── DESKTOP >=1025: left sidebar + capped content (+ optional right aside) ── */
@media (min-width: 1025px) {
  [data-gb-shell] {
    display: grid;
    grid-template-columns: var(--shell-sidebar-w, 248px) minmax(0, 1fr);
    gap: var(--sp-6, 24px);
    max-width: var(--shell-maxw, 1280px);
    margin: 0 auto;
    align-items: start;
  }
  [data-gb-shell] .gb-shell__nav { position: sticky; top: 0; align-self: start; }  /* sidebar */
  [data-gb-shell] .gb-shell__main { min-width: 0; }  /* min-width:0 => children can shrink, no overflow */
  [data-gb-shell][data-gb-aside] {
    grid-template-columns: var(--shell-sidebar-w, 248px) minmax(0, 1fr) minmax(0, 300px);
  }
  /* No vanilla sidebar (the ops app's nav is React-rendered inside .gb-shell__main): a shell that opts out of the
     aside is a SINGLE content column on desktop too. Without this, the lone .gb-shell__main lands in the 248px
     sidebar track and collapses (chief c1313 D1). Scoped to [data-gb-noaside] — additive, opt-in only. */
  [data-gb-shell][data-gb-noaside] { grid-template-columns: minmax(0, 1fr); }
}