/* ============================================================
   AWASE — Layout  (SSOT: docs/design/07 §7-3 全幅リキッド)
   PCはブラウザ横幅をMAX活用。ページを固定max-widthで囲わない。
   本文カラム(prose)のみ可読行長を保つハイブリッド。
   ============================================================ */
@layer layout {

  /* ---- app shell: header / main / (SP) tab-bar ---- */
  .app {
    min-height: 100dvh;
    display: grid;
    grid-template-rows: var(--header-h) 1fr auto;
  }

  /* ---- full-bleed section: spans the whole viewport width ---- */
  .section { padding-block: clamp(var(--sp-4), 6vw, var(--sp-6)); padding-inline: var(--gutter); }
  .section--tint { background: var(--tint); }
  .section--brand { background: var(--brand-900); color: #F4F5F2; }
  .section--surface { background: var(--surface); }

  /* three content rails (choose per block, never a page-wide wrapper) */
  .rail-full  { width: 100%; }
  .rail-wide  { width: min(100%, var(--wide)); margin-inline: auto; }
  .rail-prose { width: min(100%, var(--prose)); margin-inline: auto; }

  /* ---- auto-fill card grid: columns grow/shrink with available width ---- */
  .grid {
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: repeat(auto-fill, minmax(var(--col, 260px), 1fr));
  }
  .grid--wide { --col: 320px; }
  .grid--narrow { --col: 200px; }
  /* On very wide screens the grid keeps filling — that's the MAX-width intent. */

  /* ---- bento / dashboard: 12-col named grid on large, stack on small ---- */
  .bento {
    display: grid; gap: var(--grid-gap);
    grid-template-columns: repeat(12, 1fr);
  }
  .bento > * { grid-column: span 12; }
  @media (min-width: 768px) {
    .bento > .col-6 { grid-column: span 6; }
    .bento > .col-4 { grid-column: span 4; }
    .bento > .col-8 { grid-column: span 8; }
    .bento > .col-3 { grid-column: span 3; }
  }

  /* ---- simulator 3-pane (PC) → wizard stack (SP) ---- */
  .panes { display: grid; gap: var(--grid-gap); grid-template-columns: 1fr; }
  @media (min-width: 1024px) {
    .panes { grid-template-columns: 1fr 1fr 1.1fr; align-items: start; }
  }

  /* cluster / row helpers */
  .cluster { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
  .between { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; justify-content: space-between; }

  /* container-query aware cards */
  .cq { container-type: inline-size; }

  /* main content offset for fixed header, room for SP tab-bar */
  .main { padding-block-end: calc(var(--tabbar-h) + var(--sp-4)); }
  @media (min-width: 768px) { .main { padding-block-end: var(--sp-5); } }
}