@layer layout {
/*
 * Layout shell — the grid contract every page renders inside.
 * Markup counterpart: see the plugin's MARKUP.md ("Page skeleton").
 *
 * Canonical container-query breakpoints (rem), used as literals because
 * `var()` in @container dimensional conditions is not Baseline
 * (no Firefox/Safari support):
 *   sm = 36rem  first page-grid step
 *   md = 52rem  second page-grid step
 *   lg = 64rem  layout-swap threshold
 * Keep the values consistent across layout, blocks, components, and markup.
 */
  [data-layout-type] {
    container-type: inline-size;
    container-name: layout;
  }

  [data-layout="boundary"] {
    --_inset-block: var(--sem-space-shell-inset-compact);
    --_inset-inline: var(--sem-space-shell-inset-compact);

    @container layout (width >= 64rem) {
      --_inset-block: var(--sem-space-shell-inset);
      --_inset-inline: var(--sem-space-shell-inset);
    }

    display: grid;
    min-height: var(--raw-layout-shell-min-height);
    max-width: var(--raw-layout-shell-max-width);
    margin-inline: auto;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
      "toolbar"
      "topbar"
      "page"
      "footer";
  }

  [data-layout="toolbar"] {
    grid-area: toolbar;
    min-inline-size: 0;
  }

  [data-layout="topbar"] {
    grid-area: topbar;
    min-inline-size: 0;
  }

  [data-layout="page"] {
    grid-area: page;
    min-inline-size: 0;
    display: grid;
    grid-template-columns:
      var(--sem-space-shell-inset-relaxed) repeat(
        var(--raw-layout-page-grid-columns),
        1fr
      )
      var(--sem-space-shell-inset-relaxed);
    align-content: start;
  }

  [data-layout="footer"] {
    grid-area: footer;
    min-inline-size: 0;
  }

  /*
   * Topbar und Footer sind ruhige Strukturbereiche — keine dekorativen Karten.
   */
  [data-layout="topbar"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sem-ui-gap-icon-relaxed) var(--raw-space-sm);
    padding-block: var(--raw-space-sm) var(--sem-ui-padding-block);
    padding-inline: var(--sem-space-shell-inset-relaxed);
    /* Kompakte Ränder, damit die Klaviatur auf Akkordseiten ohne Scrollen
     * in den Viewport passt (Spec 13.2). */
    margin-block: var(--raw-space-md);

    & > .comp-primary-nav {
      margin-inline-start: auto;
    }
  }

  [data-layout="footer"] {
    padding-block: var(--sem-space-vertical-section-compact) var(--raw-space-md);
    padding-inline: var(--sem-space-shell-inset-relaxed);
    text-align: end;
  }

  /*
   * Alternative arrangements: add your own [data-layout-type="layout-N"]
   * rules that re-map the grid-template-areas of [data-layout="boundary"]
   * at >= 64rem (e.g. a left drawer column). The four area names
   * toolbar/topbar/page/footer stay stable so components keep working.
   */

}