/* xt-page-chrome.css — standard page header + footer + page canvas.
   Tokens come from xtrius_design.css / colors_and_type.css (--xt-*).
   Load AFTER xtrius_design.css in _md3_app_layout.html. */

/* ── page canvas ──────────────────────────────────────────────────────
   Pages read as documents, not an edge-to-edge SPA: width capped via
   --xt-canvas-max app-wide (matches base.css's #1305 cap — operator decision
   on #1338 follow-up: ALL pages 1320, no tighter, no wider; the value lives
   in tokens.css) and centered, fixed vertical rhythm (crumbs always land at
   the same y). The
   {% set page_wide = true %} → .xt-main--wide full-bleed opt-out stays
   wired but is currently used by NO page. */
/* Footer pinning without hardcoding the appbar height: the app shell column
   becomes a full-viewport flex column and .xt-main absorbs the slack. The
   sticky .xt-appbar keeps its in-flow (deliberately elastic) height, so no
   measured constant can drift out of sync when the module nav wraps. */
body.xt-page > .container-fluid {
  display: flex;
  flex-direction: column;
  /* -16px = the UA-default 8px body margin (the app's baked-in inset frame,
     deliberately not reset) on top + bottom. */
  min-height: calc(100vh - 16px);
  min-height: calc(100dvh - 16px);
}
.xt-main {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  box-sizing: border-box;
  /* App-wide horizontal canvas gutter (UAT #10). Lives here, on the full-width
     shell layer, so the page-chrome header inner, the content shell
     (#md3-content) and the footer inner all centre-cap inside the SAME inset
     and resolve to identical left/right edges at every viewport. The header +
     footer negate this margin below to keep their bands full-bleed. */
  padding-inline: var(--xt-canvas-gutter, 22px);
}
/* Header + footer bands stay edge-to-edge: cancel .xt-main's gutter with a
   negative margin, then their own padding re-insets the __inner so it caps +
   centres exactly like #md3-content. Net effect on the header/footer is zero —
   only the content shell newly adopts the shared gutter.
   NOTE: this bleed assumes an .xt-main parent supplies the cancelling
   padding-inline. Reusing .xt-page-chrome / .xt-page-footer OUTSIDE the app
   shell (e.g. the public legal pages — body.legal-page-body) must neutralise
   it (`margin-inline: 0`), as static/css/legal.css does. */
.xt-page-chrome,
.xt-page-footer {
  margin-inline: calc(-1 * var(--xt-canvas-gutter, 22px));
}
.xt-main > #md3-content {
  flex: 1 0 auto;
  /* border-box keeps the capped width within --xt-canvas-max. The inline
     gutter now lives on the parent .xt-main (UAT #10), not here — previously
     #md3-content's own inline padding under content-box rendered 1352px and
     overflowed viewports just above the cap (1366px laptops; codex P2 on
     #1339, the #1319 scar class). */
  box-sizing: border-box;
}
/* (.xt-page-footer__inner caps + centres itself in xtrius_design.css — see the
   "Page footer (global chrome)" block there — so it works on base.html-only
   pages too.) */
.xt-page-chrome__inner,
.xt-main:not(.xt-main--wide) > #md3-content {
  width: 100%;
  max-width: var(--xt-canvas-max, 1320px);
  margin-inline: auto;
}
/* Wide opt-out: full bleed. width:100% is load-bearing — base.css gives
   #md3-content `margin-inline: auto`, and an auto-margin block item inside
   this column flexbox would otherwise shrink to its intrinsic width.
   max-width:none lifts base.css's app-wide 1320px cap (#1305); the body
   qualifier out-specifies that base rule (body.xt-page #md3-content). */
body.xt-page .xt-main--wide > #md3-content {
  width: 100%;
  max-width: none;
}

/* ── header ─────────────────────────────────────────────────────────── */
.xt-page-chrome { background: var(--xt-bg-1, #F4F5F7); }
.xt-page-chrome--stacked { padding: 20px 22px 0; }
.xt-page-chrome--compact { padding: 12px 22px; border-bottom: 1px solid var(--xt-rule); }
.xt-page-chrome--banded  { padding: 22px 22px 20px; background: var(--xt-bg-3, #FFFFFF); border-bottom: 1px solid var(--xt-rule); }

.xt-page-chrome__crumbs {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline;
  font-family: var(--xt-font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--xt-fg-3);
}
.xt-page-chrome__crumbs a {
  color: var(--xt-fg-3); text-decoration: none;
}
.xt-page-chrome__crumbs a:hover { color: var(--xt-signal); }
.xt-page-chrome__sep { color: var(--xt-fg-4); }
.xt-page-chrome__current { color: var(--xt-fg-1); }

.xt-page-chrome__title {
  font-family: var(--xt-font-display);
  font-weight: 600; font-size: 25px; line-height: 1.2;
  letter-spacing: -0.01em; color: var(--xt-fg-1);
  margin: 7px 0 0;
}
.xt-page-chrome--compact .xt-page-chrome__title { font-size: 18px; margin-top: 4px; }
.xt-page-chrome--banded  .xt-page-chrome__title { font-size: 28px; margin-top: 8px; }

.xt-page-chrome__rule {
  border-bottom: 1px solid var(--xt-rule);
  margin-top: 14px;
  max-width: var(--xt-canvas-max, 1320px); margin-inline: auto;
}
.xt-main--wide .xt-page-chrome__rule { max-width: none; }

/* Legacy title suppression happens server-side: the page_heading macro
   guard (when page_chrome_active()) plus this PR's physical removal of
   every hand-rolled .md3-page-header block. xt-page-chrome.js remains the
   runtime fallback for HTMX-swapped duplicate h1/h2 titles. */

/* ── footer ─────────────────────────────────────────────────────────── */
/* Footer VISUAL rules (band bg/border/padding, __inner flex+cap, __text,
   __links) live in static/css/xtrius_design.css ("Page footer (global chrome)")
   so they apply on base.html-only pages (auth/error/legal) too. Only the
   app-shell-specific edge-to-edge bleed (margin-inline, above) stays here. */