/*
 * layout.css · page shell: site chrome slots, project bar, tabs (top on >= 768, bottom bar on < 768), notices, view, grids.
 * Breakpoints (4): 1280 (three-pane), 1024 (rail layouts), 768 (top tabs; below it: bottom bar + sheets), 390 is the phone the rig shoots.
 * Every grid child has min-width: 0; every multi-column grid uses minmax(0, 1fr). No horizontal page overflow at any width.
 */
@layer layout {
  .sw-app { width: 100%; max-width: calc(var(--shell-max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); min-width: 0; display: block; }
  .sw-app--land { max-width: none; padding-inline: 0; }
  .sw-view { padding-block: var(--sp-6) var(--sp-10); min-width: 0; outline: none; }
  .sw-view:focus { outline: none; }

  /* ---- project bar (sticky under the site nav at --nav-h) ---- */
  .sw-bar { position: sticky; top: var(--nav-h); z-index: var(--z-sticky); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); background: var(--canvas); border-bottom: 1px solid var(--border); }
  .sw-bar__in { display: grid; grid-template-columns: minmax(180px, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--sp-3); min-height: var(--bar-h); }
  .sw-bar__start { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
  .sw-bar__end { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); min-width: 0; }
  .sw-proj { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--ctl); max-width: 100%; padding: 0 var(--sp-3) 0 var(--sp-2); border-radius: var(--r-md); color: var(--text); font-weight: var(--fw-bold); font-size: var(--fs-title); letter-spacing: var(--ls-tight); min-width: 0; }
  .sw-proj:hover, .sw-proj[aria-expanded="true"] { background: var(--surface-3); }
  .sw-proj .ico--lg { color: var(--accent-text); }
  .sw-saved { flex: none; }
  .sw-tabs { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-md); }
  .sw-tabs > button { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: calc(var(--ctl) - 2px); padding: 0 var(--sp-4); border-radius: var(--r-sm); color: var(--text-2); font-weight: var(--fw-medium); font-size: var(--fs-body); white-space: nowrap; transition: background var(--t-fast), color var(--t-fast); }
  .sw-tabs > button:hover { color: var(--text); background: var(--surface-2); }
  .sw-tabs > button[aria-selected="true"] { background: var(--surface-3); color: var(--text); box-shadow: 0 0 0 1px var(--border-control) inset; }
  .sw-tabs__ico { display: none; }
  .sw-notices { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); min-width: 0; }
  .sw-notices[hidden] { display: none; }

  /* mock-only concern kept honest: while the tab bar is fixed, the sticky export bar sits above it */
  .bnd__stick { position: sticky; bottom: calc(var(--tabbar-h) + var(--cookie-h)); z-index: var(--z-sticky); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-4); padding: var(--sp-3); background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--r-lg); box-shadow: var(--e-2); }
  .bnd__stat { display: inline-flex; align-items: center; gap: var(--sp-2); }

  .skl__lib { display: grid; gap: var(--sp-3); align-content: start; min-width: 0; }

  /* ---- the three-column / two-column workbench grids ---- */
  .pane-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); margin-bottom: var(--sp-4); min-width: 0; }
  .pane-head h2 { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); display: flex; align-items: baseline; gap: var(--sp-3); }
  .pane-head h2 .count { font-size: var(--fs-body); }
  .pane-head__act { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

  @media (min-width: 1024px) {
    .src-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: var(--sp-6); align-items: start; }
    .src-side { position: sticky; top: calc(var(--nav-h) + var(--bar-total) + var(--sp-4)); max-height: calc(100dvh - var(--nav-h) - var(--bar-total) - var(--cookie-h) - var(--sp-8)); overflow: auto; overscroll-behavior: contain; border-radius: var(--r-lg); }
    .skl { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
    .skl__lib { position: sticky; top: calc(var(--nav-h) + var(--bar-total) + var(--sp-4)); max-height: calc(100dvh - var(--nav-h) - var(--bar-total) - var(--cookie-h) - var(--sp-8)); overflow: auto; overscroll-behavior: contain; }
    .skl__lib .graphbox--lib { display: none; }
    .bnd__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-6); align-items: start; }
    .bnd__left { grid-column: 1; grid-row: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); align-items: start; }
    .bnd__main { grid-column: 1; grid-row: 2; display: grid; gap: var(--sp-4); min-width: 0; }
    .bnd__rail { grid-column: 2; grid-row: 1 / span 2; display: grid; gap: var(--sp-4); position: sticky; top: calc(var(--nav-h) + var(--bar-total) + var(--sp-4)); align-self: start; max-height: calc(100dvh - var(--nav-h) - var(--bar-total) - var(--cookie-h) - var(--sp-8)); overflow: auto; overscroll-behavior: contain; }
    .bnd__stick { display: none; }
  }
  @media (min-width: 1280px) {
    .skl__panes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
    .skl__edwrap.is-configure .skl__pv, .skl__edwrap.is-preview .skl__ed { display: block; }
    .bnd__grid { grid-template-columns: 280px minmax(0, 1fr) 340px; }
    .bnd__left { grid-column: 1; grid-row: 1 / span 2; grid-template-columns: minmax(0, 1fr); position: sticky; top: calc(var(--nav-h) + var(--bar-total) + var(--sp-4)); max-height: calc(100dvh - var(--nav-h) - var(--bar-total) - var(--cookie-h) - var(--sp-8)); overflow: auto; overscroll-behavior: contain; }
    .bnd__main { grid-column: 2; grid-row: 1 / span 2; }
    .bnd__rail { grid-column: 3; }
  }
  @media (min-width: 1024px) and (max-width: 1279.98px) {
    .skl__edwrap.is-configure .skl__pv, .skl__edwrap.is-preview .skl__ed { display: none; }
  }
  /* tablet 768-1023: single column; the skill library is a drawer; reader is a drawer */
  @media (min-width: 768px) and (max-width: 1023.98px) {
    .skl { display: block; }
    .skl__lib { display: none; }
    .skl__edwrap.is-configure .skl__pv, .skl__edwrap.is-preview .skl__ed { display: none; }
    .src-side { display: none; }
    .bnd__grid { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
    .bnd__left { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); align-items: start; }
    .bnd__main, .bnd__rail { display: grid; gap: var(--sp-4); min-width: 0; }
    .bnd__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  }
  /* phone < 768: bottom tab bar, list -> detail, sheets */
  @media (max-width: 767.98px) {
    .sw-bar { position: static; border-bottom: 0; }
    .sw-bar__in { grid-template-columns: minmax(0, 1fr) auto; min-height: 56px; }
    .sw-bar__start { grid-column: 1; }
    .sw-bar__end { grid-column: 2; }
    .sw-tabs { position: fixed; left: 0; right: 0; bottom: var(--cookie-h); z-index: var(--z-tabbar); height: var(--tabbar-h); padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); border: 0; border-top: 1px solid var(--border-strong); border-radius: 0; background: var(--surface-1); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
    .sw-tabs > button { flex-direction: column; gap: 2px; min-height: 52px; padding: 0 4px; font-size: var(--fs-meta); }
    .sw-tabs__ico { display: block; width: 20px; height: 20px; }
    .sw-view { padding-block: var(--sp-3) var(--sp-8); }
    .src-grid, .src-col { display: grid; gap: var(--sp-3); }
    .src-side { display: none; }
    .skl { display: block; }
    .skl__main { display: none; }
    .skl.is-open .skl__lib { display: none; }
    .skl.is-open .skl__main { display: block; }
    .skl__edwrap.is-configure .skl__pv, .skl__edwrap.is-preview .skl__ed { display: none; }
    .bnd__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
    .bnd__left, .bnd__main, .bnd__rail { display: grid; gap: var(--sp-4); min-width: 0; }
  }
}