/* ═══ ANNOTATION · css/layout.css ═══
   WHAT:   Where the four regions sit: rune pillar · slab column · main frame · utility rail.
   SIZES:  ≥1100 px  four columns
           720–1099  pillar + main; slabs become a strip; the rail sits beside the strip
           <720      top bar (menu · title · tools); pillar becomes a drawer; slabs scroll sideways
   RULE:   Nothing floats over the reading surface. On narrow screens the rail lives in the
           top bar or beside the slab strip, never fixed over content.
   AVOID:  Never let anything cause horizontal page scroll. Wide things (matrices, code)
           scroll inside their own box.
*/

.app {
  display: grid;
  grid-template-columns: 92px 248px minmax(0, 1fr) 60px;
  grid-template-areas: "pillar slabs main rail";
  gap: 22px;
  padding: 22px 22px 40px;
  min-height: 100vh;
  max-width: 1680px;
  margin: 0 auto;
}
.topbar { display: none; }
.pillar { grid-area: pillar; }
.slabs  { grid-area: slabs; }
.stage  { grid-area: main; min-width: 0; position: relative; }
.rail   { grid-area: rail; }

.pillar, .slabs, .rail { position: sticky; top: 22px; align-self: start; max-height: calc(100vh - 44px); }
.slabs { overflow-y: auto; overflow-x: visible; padding: 2px 8px 14px 2px; scrollbar-width: thin; z-index: 4; }
.rail { z-index: 5; }

/* ── Tablet ───────────────────────────────────────────────────────────────── */
@media (max-width: 1099px) {
  .app {
    grid-template-columns: 84px minmax(0, 1fr) auto;
    grid-template-areas: "pillar slabs rail" "pillar main main";
    grid-template-rows: auto 1fr;
    gap: 16px;
  }
  .slabs { position: static; max-height: none; overflow-x: auto; overflow-y: hidden; padding: 4px 4px 10px; }
  .slabs .slab-list { display: flex; gap: 10px; }
  .slabs .slabs__title { display: none; }
  .rail { position: static; max-height: none; align-self: center; }
  .rail .rail__list { flex-direction: row; }
  .stage { overflow-x: clip; overflow-clip-margin: 8px; }   /* decor may not widen the page */
}

/* ── Phone ────────────────────────────────────────────────────────────────── */
@media (max-width: 719px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "top" "slabs" "main";
    grid-template-rows: auto auto 1fr;
    padding: 0 12px 32px;
    gap: 12px;
  }
  .topbar {
    grid-area: top;
    display: flex; align-items: center; gap: 10px;
    position: sticky; top: 0; z-index: 40;
    margin: 0 -12px; padding: 8px 12px; padding-right: 116px;   /* room for the rail tools */
    background: color-mix(in srgb, var(--page-bg) 86%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid color-mix(in srgb, var(--bevel-hi) 30%, transparent);
  }
  .topbar__title { flex: 1; min-width: 0; font-family: var(--font-carved); font-weight: 700; font-size: 1.2rem; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* the rail joins the top bar (fixed to its right end), so no tool floats over content */
  .rail { position: fixed; top: 8px; right: 12px; z-index: 41; grid-area: auto; align-self: auto; }
  .rail .rail__list { flex-direction: row; gap: 8px; }
  .rail .return-sfw { display: none !important; }            /* the top bar has its own */
  .pillar {
    grid-area: auto;   /* fixed drawer: keep it out of the grid */
    position: fixed; inset: 0 auto 0 0; top: 0; z-index: 60; width: 104px; max-height: none;
    transform: translateX(-110%); transition: transform 220ms var(--ease-stone);
    background: color-mix(in srgb, var(--page-bg) 94%, transparent); padding: 10px 6px; box-shadow: 0 0 40px rgb(0 0 0 / .6);
    overflow-y: auto;
  }
  .pillar[data-open="true"] { transform: none; }
  .scrim { position: fixed; inset: 0; z-index: 55; background: rgb(0 0 0 / .5); }
  .slabs { margin: 0 -12px; padding: 4px 12px 8px; scroll-snap-type: x mandatory; }
  .slabs .slab-list > li { scroll-snap-align: start; }
  .stage { overflow-x: clip; }
}