/**
 * Layout Foundation → LABELfleet production bridge
 *
 * SSOT package: ../../layout/ (@portable/layout-foundation v1.3.0)
 * Runtime CSS mirror (Flask static): ./layout-foundation/{layout,utopia}.css
 *
 * Load order (base.html): ds-tokens → app.css → spacing.css → THIS → section-pattern
 *
 * Adapter overrides (design-adapter.contract.json → adapterMayOverrideLayoutTokens):
 * LABELfleet CD shell — User 2026-09-17: one max-width for header/content/footer,
 * --layout-page-max-width = 960px (= --container-wide). Refero design/ 1280 is
 * Look-reference only, not live product.
 */

@import url("./layout-foundation/layout.css");
@import url("./layout-foundation/utopia.css");

:root {
  /* ── Shell / container (CD §4.3 / §9.2 — all D18 bands share the same cap) ─ */
  --layout-page-max-width: 960px;
  --layout-content-max-width: 960px;
  --layout-form-max-width: 640px;
  --layout-header-min-block-size: 56px;
  --layout-toolbar-min-block-size: 52px;
  --layout-sidebar-width: 300px;
  --layout-detail-panel-width: 300px;

  /* Gutters — CD page padding 16 / 20 / 24 (not Refero 16/24/48) */
  --layout-gutter-phone: 16px;
  --layout-gutter-large-phone: 16px;
  --layout-gutter-tablet: 20px;
  --layout-gutter-desktop: 24px;
  --layout-gutter-wide: 24px;
  --layout-page-gutter: var(--layout-gutter-phone);

  /* Rhythm — section stack gap owned by section-pattern.css (D18 stepped);
     phone default here until that stylesheet loads. */
  --layout-section-gap: 48px;
  --layout-block-gap: 24px;
  --layout-element-gap: 16px;
  --layout-control-gap: 12px;
  --layout-grid-gap: 16px;

  /* Active padding alias used by chrome shells */
  --layout-page-padding-x: var(--layout-page-gutter);

  /* Look-layer aliases (design/ names) → live CD shell */
  --page-max-width: var(--layout-page-max-width);
  --page-padding-x: var(--layout-page-padding-x);
  --page-padding-x-mobile: var(--layout-gutter-phone);
  --page-padding-x-tablet: var(--layout-gutter-tablet);
  --page-padding-x-desktop: var(--layout-gutter-desktop);

  /* Legacy product container tokens → one shared shell */
  --container-wide: var(--layout-page-max-width);
  --container-dashboard: var(--layout-page-max-width);
  --container-settings: var(--layout-page-max-width);
  --container-subpage: var(--layout-page-max-width);
  --container-inbox: var(--layout-page-max-width);
  --layout-container-max-width: var(--layout-page-max-width);
}

@media (min-width: 480px) {
  :root {
    --layout-page-gutter: var(--layout-gutter-large-phone);
    --layout-page-padding-x: var(--layout-page-gutter);
  }
}

@media (min-width: 640px) {
  :root {
    --layout-page-gutter: var(--layout-gutter-tablet);
    --layout-page-padding-x: var(--layout-page-gutter);
  }
}

@media (min-width: 1024px) {
  :root {
    --layout-page-gutter: var(--layout-gutter-desktop);
    --layout-page-padding-x: var(--layout-page-gutter);
  }
}

@media (min-width: 1280px) {
  :root {
    --layout-page-gutter: var(--layout-gutter-wide);
    --layout-page-padding-x: var(--layout-page-gutter);
  }
}

/* ── Shared page container (skeleton Kit fills this — no page-local max-w) ─ */
.layout__page-container,
.page-shell,
.header-inner,
.footer-container,
.app-container,
.container,
.page-container,
.inbox-page,
.settings-page,
.lic-page,
.ka-setup-page,
.org-page,
.cat-page,
.smp-page,
.mpn-page,
.pa-wrap,
.stats-page,
.od-page {
  max-width: var(--layout-page-max-width);
  margin-inline: auto;
  box-sizing: border-box;
}

.header-inner,
.footer-container {
  padding-inline: var(--layout-page-padding-x);
}

.container,
.page-container,
.inbox-page,
.settings-page,
.lic-page,
.ka-setup-page,
.org-page,
.cat-page,
.smp-page,
.mpn-page,
.pa-wrap,
.stats-page,
.od-page {
  padding-inline: var(--layout-page-padding-x);
}

.page-container,
.od-page {
  padding-block: 24px;
}