/* ===== Snacknap layout width system =====
   Semantic width tiers driven by tokens in snk-theme.css.
   Spec: docs/superpowers/specs/2026-06-17-page-width-system-design.md

   Default tier (1140) applies to nav, footer and every page automatically by
   capping Bootstrap's .container. Narrowing tiers (reading/stats) shrink only
   the content block via .snk-shell. The wide tier (admin) lifts the whole
   shell — nav + content + footer — via the .snk-layout-wide page class. */

/* 1. Cap .container at the default token on wide screens (kills the 1320 xxl
      jump). Lower breakpoints keep Bootstrap's stepped margins untouched. */
@media (min-width:1400px){
  .container{ max-width:var(--snk-w-default); }
}

/* 2. Content primitive for the narrowing tiers. Mirrors .container gutters so
      swapping .container -> .snk-shell is visually seamless. */
.snk-shell{
  width:100%;
  margin-inline:auto;
  padding-right:calc(var(--bs-gutter-x, 1.5rem) * .5);
  padding-left:calc(var(--bs-gutter-x, 1.5rem) * .5);
  max-width:var(--snk-w-default);
}
.snk-shell--reading{ max-width:var(--snk-w-reading); }
.snk-shell--stats{ max-width:var(--snk-w-stats); }
.snk-shell--wide{ max-width:var(--snk-w-wide); }

/* 3. Wide tier: a page sets $set_layout="wide" -> body.snk-layout-wide. Lift
      every .container on the page (nav, content, footer) to 1320 in lockstep
      so the chrome stays aligned with the wider content. Outranks the cap
      above by specificity (0,2,0 vs 0,1,0). Intentionally has NO media query:
      it applies at every breakpoint, so admin sits at 1320 wherever it fits
      (below ~1320px the container simply stays at its Bootstrap step). */
.snk-layout-wide .container{ max-width:var(--snk-w-wide); }