/* ─────────────────────────────────────────────────────────────
   Page 13 — Layout & Grid
   ───────────────────────────────────────────────────────────── */

/* 12-column grid demo */
.grid-demo {
  position: relative;
  padding: 32px 32px 36px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(47,55,255,0.06), transparent 65%),
    rgba(255,255,255,0.02);
  overflow: hidden;
}
.grid-demo .head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.grid-demo .head .l { color: var(--blue-300); }
.grid-demo .head .r { color: var(--fg-muted); }
.grid-demo .ruler {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
.grid-demo .ruler .col {
  height: 12px;
  background: rgba(133,160,255,0.10);
  border-top: 1px solid rgba(133,160,255,0.32);
  border-bottom: 1px solid rgba(133,160,255,0.32);
  position: relative;
}
.grid-demo .ruler .col::after {
  content: attr(data-n);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 4px);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
}
.grid-demo .examples {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
  margin-top: 28px;
}
.grid-demo .examples .blk {
  background: rgba(133,160,255,0.12);
  border: 1px solid rgba(133,160,255,0.28);
  border-radius: var(--radius-sm);
  padding: 18px 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--blue-300);
  text-align: center;
  text-transform: uppercase;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.grid-demo.is-revealed .examples .blk { opacity: 1; transform: scale(1); }
.grid-demo.is-revealed .examples .blk:nth-child(1) { transition-delay: 150ms; }
.grid-demo.is-revealed .examples .blk:nth-child(2) { transition-delay: 250ms; }
.grid-demo.is-revealed .examples .blk:nth-child(3) { transition-delay: 350ms; }
.grid-demo.is-revealed .examples .blk:nth-child(4) { transition-delay: 450ms; }
.grid-demo.is-revealed .examples .blk:nth-child(5) { transition-delay: 550ms; }
.grid-demo .examples .span-12 { grid-column: span 12; }
.grid-demo .examples .span-8  { grid-column: span 8; }
.grid-demo .examples .span-6  { grid-column: span 6; }
.grid-demo .examples .span-4  { grid-column: span 4; }
.grid-demo .examples .span-3  { grid-column: span 3; }
@media (max-width: 720px) {
  .grid-demo .ruler { grid-template-columns: repeat(6, 1fr); }
  .grid-demo .ruler .col:nth-child(n+7) { display: none; }
}

/* Spacing scale */
.spacing-scale {
  display: grid;
  gap: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.spacing-scale .row {
  display: grid;
  grid-template-columns: 90px 1fr 100px;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-subtle);
  gap: 24px;
}
.spacing-scale .row:last-child { border-bottom: 0; }
.spacing-scale .row.head {
  background: rgba(255,255,255,0.025);
  padding: 12px 24px;
}
.spacing-scale .row.head > div {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.spacing-scale .token {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--blue-300);
}
.spacing-scale .bar {
  height: 12px;
  background: var(--blue-400);
  border-radius: 2px;
  width: 0;
  transition: width 1400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.spacing-scale.is-revealed .row[data-i="1"] .bar { width: 4px; transition-delay: 100ms; }
.spacing-scale.is-revealed .row[data-i="2"] .bar { width: 8px; transition-delay: 160ms; }
.spacing-scale.is-revealed .row[data-i="3"] .bar { width: 12px; transition-delay: 220ms; }
.spacing-scale.is-revealed .row[data-i="4"] .bar { width: 16px; transition-delay: 280ms; }
.spacing-scale.is-revealed .row[data-i="5"] .bar { width: 24px; transition-delay: 340ms; }
.spacing-scale.is-revealed .row[data-i="6"] .bar { width: 32px; transition-delay: 400ms; }
.spacing-scale.is-revealed .row[data-i="7"] .bar { width: 48px; transition-delay: 460ms; }
.spacing-scale.is-revealed .row[data-i="8"] .bar { width: 64px; transition-delay: 520ms; }
.spacing-scale.is-revealed .row[data-i="9"] .bar { width: 80px; transition-delay: 580ms; }
.spacing-scale.is-revealed .row[data-i="10"] .bar { width: 96px; transition-delay: 640ms; }
.spacing-scale .pixels {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-default);
  text-align: right;
}
.spacing-scale .pixels b { color: var(--fg-default); }
.spacing-scale .pixels em {
  font-style: normal;
  color: var(--fg-muted);
  margin-left: 8px;
  font-size: 11px;
}

@media (prefers-reduced-motion: reduce) {
  .spacing-scale .bar { transition: none !important; }
  .grid-demo .examples .blk { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Breakpoints — viewport silhouettes */
.bp-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1000px) { .bp-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .bp-row { grid-template-columns: 1fr; } }
.bp-card {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,0.02);
  overflow: hidden;
}
.bp-card .stage {
  position: relative;
  height: 200px;
  padding: 16px;
  background: rgba(0,0,0,0.18);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-bottom: 1px solid var(--border-subtle);
  overflow: hidden;
}
.bp-card .device {
  position: relative;
  border: 1.5px solid rgba(255,255,255,0.3);
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 5px;
}
.bp-card .device .slot {
  background: rgba(133,160,255,0.4);
  border-radius: 1px;
  height: 6px;
}
.bp-card.mobile  .device { width: 50px; height: 88px; }
.bp-card.mobile  .device .slot.wide { width: 100%; }
.bp-card.mobile  .device .slot { width: 100%; }
.bp-card.tablet  .device { width: 96px; height: 76px; }
.bp-card.tablet  .device .slot.split { display: flex; gap: 4px; height: 6px; background: transparent; }
.bp-card.tablet  .device .slot.split > span { flex: 1; background: rgba(133,160,255,0.4); border-radius: 1px; }
.bp-card.desktop .device { width: 140px; height: 88px; }
.bp-card.desktop .device .slot.cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; height: 24px; background: transparent; }
.bp-card.desktop .device .slot.cols > span { background: rgba(133,160,255,0.4); border-radius: 1px; }
.bp-card.wide    .device { width: 170px; height: 92px; }
.bp-card.wide    .device .slot.cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; height: 28px; background: transparent; }
.bp-card.wide    .device .slot.cols > span { background: rgba(133,160,255,0.4); border-radius: 1px; }
.bp-card .info {
  padding: 16px 18px 18px;
}
.bp-card .info .name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--fg-default);
  margin-bottom: 4px;
}
.bp-card .info .range {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--blue-300);
  margin-bottom: 8px;
}
.bp-card .info .meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
  text-transform: uppercase;
  border-top: 1px solid var(--border-subtle);
  padding-top: 8px;
  margin-top: 8px;
}
.bp-card .info .meta b { color: var(--fg-default); font-weight: 500; }

/* Container width comparison */
.container-strip {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 32px 32px 38px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,0.02);
}
.container-strip .row {
  position: relative;
  height: 36px;
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
  overflow: hidden;
}
.container-strip .row .fill {
  height: 100%;
  background: rgba(133,160,255,0.18);
  border-left: 2px solid rgba(133,160,255,0.6);
  border-right: 2px solid rgba(133,160,255,0.6);
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--blue-300);
  text-transform: uppercase;
  width: 0;
  margin: 0 auto;
  transition: width 1600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.container-strip.is-revealed .row[data-c="narrow"] .fill { width: 45%; transition-delay: 200ms; }
.container-strip.is-revealed .row[data-c="default"] .fill { width: 68%; transition-delay: 400ms; }
.container-strip.is-revealed .row[data-c="wide"] .fill { width: 86%; transition-delay: 600ms; }
.container-strip.is-revealed .row[data-c="full"] .fill { width: 100%; transition-delay: 800ms; }
.container-strip .row .meta {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
  text-transform: uppercase;
}

/* Card grid patterns — 2/3/4/6 */
.card-grid-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1000px) { .card-grid-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .card-grid-row { grid-template-columns: 1fr; } }
.cg-card {
  padding: 20px 20px 22px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,0.02);
}
.cg-card .head {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-300);
  margin-bottom: 4px;
}
.cg-card h5 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0 0 12px;
  color: var(--fg-default);
}
.cg-card .skeleton {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
  height: 80px;
}
.cg-card .skeleton .b {
  background: rgba(133,160,255,0.2);
  border-radius: 2px;
}
.cg-card.c-2 .skeleton { grid-template-columns: 1fr 1fr; }
.cg-card.c-3 .skeleton { grid-template-columns: 1fr 1fr 1fr; }
.cg-card.c-4 .skeleton { grid-template-columns: repeat(4, 1fr); }
.cg-card.c-6 .skeleton { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; }
.cg-card .desc {
  font-size: 12px;
  color: var(--fg-muted);
  line-height: 1.5;
  margin: 0;
}

/* Page rhythm — section spacing visualization */
.rhythm-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  padding: 36px 36px 36px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,0.02);
  overflow: hidden;
  align-items: stretch;
}
@media (max-width: 900px) { .rhythm-card { grid-template-columns: 1fr; } }
.rhythm-card .copy h4 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.018em;
  margin: 0 0 12px;
  color: var(--fg-default);
}
.rhythm-card .copy p {
  font-size: 14px;
  color: var(--fg-secondary);
  line-height: 1.55;
  margin: 0 0 8px;
}
.rhythm-card .copy .tokens {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
  display: grid;
  gap: 6px;
}
.rhythm-card .copy .tokens b { color: var(--blue-300); font-weight: 500; margin-right: 8px; }
.rhythm-card .visual {
  background: rgba(0,0,0,0.22);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;  /* centre the rhythm so leftover space splits evenly */
  gap: 0;
}
/* content bands — clearly visible, labelled inline */
.rhythm-card .visual .block {
  position: relative;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding-left: 14px;
  background: rgba(133,160,255,0.14);
  border: 1px solid rgba(133,160,255,0.22);
}
.rhythm-card .visual .block .lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
}
.rhythm-card .visual .block.hero {
  height: 48px;
  background: rgba(133,160,255,0.24);
  border-color: rgba(133,160,255,0.40);
}
.rhythm-card .visual .block.hero .lbl { color: rgba(255,255,255,0.9); font-size: 11px; }
.rhythm-card .visual .block.head { height: 30px; }
.rhythm-card .visual .block.body { height: 40px; }
.rhythm-card .visual .block.body.short { height: 26px; background: rgba(133,160,255,0.10); }

/* gap rows — bracket + value + token, all anchored LEFT and connected */
.rhythm-card .visual .gap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 14px;
}
.rhythm-card .visual .gap.g-12 { height: 12px; }
.rhythm-card .visual .gap.g-24 { height: 24px; }
.rhythm-card .visual .gap.g-48 { height: 48px; }
.rhythm-card .visual .gap.g-80 { height: 80px; }
/* the measuring bracket spans the full gap height on the left */
.rhythm-card .visual .gap .bracket {
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 8px;
  border-left: 1.5px solid var(--blue-300);
  border-top: 1.5px solid var(--blue-300);
  border-bottom: 1.5px solid var(--blue-300);
  border-radius: 2px 0 0 2px;
  opacity: 0.85;
}
/* tiny gaps: keep the bracket from collapsing visually */
.rhythm-card .visual .gap.g-12 .bracket { top: 1px; bottom: 1px; }
.rhythm-card .visual .gap .val {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--blue-300);
  line-height: 1;
}
.rhythm-card .visual .gap .val em { font-style: normal; font-size: 9px; opacity: 0.7; margin-left: 1px; }
.rhythm-card .visual .gap .tk {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
}
/* the smallest gap can't fit its label inline — float it just right of the bracket */
.rhythm-card .visual .gap.g-12 { gap: 8px; }
.rhythm-card .visual .gap.g-12 .val,
.rhythm-card .visual .gap.g-12 .tk { font-size: 10px; }

/* Layout don'ts */
.layout-donts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 820px) { .layout-donts { grid-template-columns: 1fr; } }
.layout-dont {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: rgba(255,255,255,0.02);
}
.layout-dont .stage {
  height: 180px;
  position: relative;
  padding: 16px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 24px),
    rgba(0,0,0,0.18);
  border-bottom: 1px solid var(--border-subtle);
  overflow: hidden;
}
.layout-dont .stage::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 50%;
  height: 2px;
  background: var(--orange-500);
  transform: rotate(-10deg);
  z-index: 2;
}
.layout-dont .stage .mockup-text {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  line-height: 1.4;
}
.layout-dont .meta {
  padding: 14px 18px 18px;
}
.layout-dont .x {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange-300);
  margin-bottom: 4px;
}
.layout-dont h5 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0 0 4px;
  color: var(--fg-default);
}
.layout-dont p {
  font-size: 12px;
  color: var(--fg-muted);
  line-height: 1.5;
  margin: 0;
}

/* ── 13.4 Live breakpoint resizer ─────────────────────────── */
.reflow {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,0.02);
  padding: 18px;
}
/* control row: readout + range */
.reflow-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px;
}
.reflow-bar .readout {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 0 0 auto;
  min-width: 168px;
}
.reflow-bar .readout .bp {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg-default);
}
.reflow-bar .readout .dims {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
}
.reflow-bar .readout .dims b { color: var(--blue-300); font-weight: 500; }

/* the range slider — restyled to match the system */
.reflow-range {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(
    to right,
    var(--blue-400) 0%,
    var(--blue-400) var(--reflow-pos, 80%),
    rgba(255,255,255,0.10) var(--reflow-pos, 80%),
    rgba(255,255,255,0.10) 100%
  );
  cursor: ew-resize;
  outline: none;
}
.reflow-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--fg-default);
  border: 3px solid var(--blue-400);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  cursor: ew-resize;
  transition: transform 120ms ease;
}
.reflow-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--fg-default);
  border: 3px solid var(--blue-400);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  cursor: ew-resize;
}
.reflow-range:hover::-webkit-slider-thumb { transform: scale(1.12); }
.reflow-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(133,160,255,0.3); }

/* the stage the viewport lives in */
.reflow-frame {
  position: relative;
  background: rgba(0,0,0,0.18);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 12px);
  padding: 22px;
  display: flex;
  justify-content: center;
  overflow: hidden;
  min-height: 268px;
}
/* SCALE wrapper — shrinks the viewport visually to fit the frame.
   The transform lives HERE, never on the container element (the two on the
   same element break container queries). */
.reflow-scale {
  transform-origin: top center;
  transform: scale(var(--reflow-scale, 1));
  transition: transform 60ms linear;
}
/* the resizable viewport — logical width driven by JS via --reflow-w, and the
   container-query container. No transform of its own → measures true width. */
.reflow-vp {
  position: relative;
  width: var(--reflow-w, 1024px);
  container-type: inline-size;
  container-name: reflow;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  padding: var(--reflow-pad, 16px);
  transition: width 60ms linear;
}

/* the layout inside — 12-col grid that reflows by the viewport's width */
.reflow-layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
}
.reflow-layout > * {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.66);
  background: rgba(133,160,255,0.16);
  border: 1px solid rgba(133,160,255,0.28);
  border-radius: 4px;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4px;
}
/* ── DESKTOP default (≥1024 container) ───────────────────── */
/* nav bar: brand + inline links, burger hidden */
.reflow-layout .r-nav {
  grid-column: span 12;
  min-height: 30px;
  justify-content: space-between;
  padding: 0 12px;
  background: rgba(133,160,255,0.20);
}
.r-nav .r-brand { font-weight: 600; letter-spacing: 0.12em; color: rgba(255,255,255,0.85); }
.r-nav .r-navlinks { display: inline-flex; gap: 10px; }
.r-nav .r-navlinks i { width: 22px; height: 5px; border-radius: 2px; background: rgba(255,255,255,0.34); }
.r-nav .r-burger { display: none; flex-direction: column; gap: 3px; }
.r-nav .r-burger i { width: 16px; height: 2px; border-radius: 2px; background: rgba(255,255,255,0.7); }

.reflow-layout .r-hero { grid-column: span 12; min-height: 52px; background: rgba(133,160,255,0.24); }
.reflow-layout .r-main { grid-column: span 8; min-height: 92px; }
.reflow-layout .r-side { grid-column: span 4; min-height: 92px; background: rgba(133,160,255,0.10); }
.reflow-layout .r-stat { grid-column: span 3; min-height: 44px; }
.reflow-layout .r-cell { grid-column: span 6; min-height: 56px; }
.reflow-layout .r-foot {
  grid-column: span 12;
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
  color: var(--fg-muted);
}

/* Breakpoints query the viewport's CONTENT width (= --reflow-w minus padding),
   so thresholds sit a little below the labelled px to match after padding. */
/* ── TABLET (641–1023) → two-up rhythm ───────────────────── */
@container reflow (max-width: 980px) {
  .reflow-layout .r-main { grid-column: span 12; min-height: 72px; }
  .reflow-layout .r-side { grid-column: span 12; min-height: 44px; }
  .reflow-layout .r-stat { grid-column: span 6; }   /* 4 → 2×2 */
  .reflow-layout .r-cell { grid-column: span 6; }
}
/* ── MOBILE (≤640) → single column, nav collapses ────────── */
@container reflow (max-width: 600px) {
  .reflow-layout { gap: 8px; }
  .reflow-layout .r-stat { grid-column: span 12; min-height: 36px; }
  .reflow-layout .r-cell { grid-column: span 12; }
  .reflow-layout .r-nav { padding: 0 10px; }
  .r-nav .r-navlinks { display: none; }   /* links fold away */
  .r-nav .r-burger { display: inline-flex; }  /* burger appears */
}

/* the grip on the viewport's trailing edge (decorative cue) */
.reflow-grip {
  position: absolute;
  top: 50%;
  right: -1px;
  transform: translateY(-50%);
  width: 14px;
  height: 46px;
  border-radius: 5px;
  background: var(--blue-400);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
  pointer-events: none;
}
.reflow-grip span {
  width: 5px;
  height: 1.5px;
  border-radius: 2px;
  background: rgba(255,255,255,0.85);
}

/* breakpoint tick legend under the frame */
.reflow-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  padding: 0 2px;
}
.reflow-ticks span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: color 160ms ease;
}
.reflow-ticks span em {
  font-style: normal;
  font-size: 9px;
  color: rgba(255,255,255,0.32);
}
.reflow-ticks span[data-active] { color: var(--blue-300); }
.reflow-ticks span[data-active] em { color: var(--blue-300); opacity: 0.7; }

@media (prefers-reduced-motion: reduce) {
  .reflow-vp { transition: none; }
  .reflow-range::-webkit-slider-thumb { transition: none; }
}
@media (max-width: 720px) {
  .reflow-bar { flex-direction: column; align-items: stretch; gap: 12px; }
  .reflow-bar .readout { min-width: 0; }
}

/* ── 13.7 Elevation & z-index ─────────────────────────────── */
.elevation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,0.02);
  padding: 36px 40px;
}
@media (max-width: 820px) { .elevation { grid-template-columns: 1fr; gap: 28px; } }
/* the stair of stacked layers */
.elev-stack {
  position: relative;
  height: 220px;
  perspective: 900px;
}
.elev-stack .layer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 188px;
  height: 56px;
  margin-top: -28px;
  border-radius: 10px;
  border: 1px solid rgba(133,160,255,0.30);
  background: linear-gradient(180deg, #1A1E3A 0%, #12152B 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 16px;
  transform: translate(-50%, 0);
  opacity: 0;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1), opacity 500ms ease;
}
.elev-stack .layer .z {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--blue-300);
}
.elev-stack .layer .nm {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-default);
}
/* resting (stacked) positions — climb up & back as z rises */
.elevation.is-revealed .elev-stack .layer { opacity: 1; }
.elevation.is-revealed .elev-stack .l0 { transform: translate(-50%,  74px) scale(1.00); box-shadow: var(--shadow-xs); transition-delay: 80ms; }
.elevation.is-revealed .elev-stack .l1 { transform: translate(-50%,  44px) scale(0.97); box-shadow: var(--shadow-sm); transition-delay: 150ms; }
.elevation.is-revealed .elev-stack .l2 { transform: translate(-50%,  16px) scale(0.94); box-shadow: var(--shadow-md); transition-delay: 220ms; }
.elevation.is-revealed .elev-stack .l3 { transform: translate(-50%, -12px) scale(0.91); box-shadow: var(--shadow-lg); transition-delay: 290ms; }
.elevation.is-revealed .elev-stack .l4 { transform: translate(-50%, -40px) scale(0.88); box-shadow: var(--shadow-xl); transition-delay: 360ms; }
.elevation.is-revealed .elev-stack .l5 { transform: translate(-50%, -68px) scale(0.85); box-shadow: var(--shadow-2xl); transition-delay: 430ms; }
/* legend */
.elev-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.elev-legend li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--fg-secondary, #B9BAC0);
  line-height: 1.3;
}
.elev-legend li b { color: var(--fg-default); font-weight: 600; font-family: var(--font-mono); font-size: 12px; min-width: 46px; }
.elev-legend li code { font-family: var(--font-mono); font-size: 11px; color: var(--blue-300); margin-left: auto; }
.elev-legend .sw { width: 14px; height: 14px; border-radius: 4px; flex: 0 0 14px; background: #12152B; border: 1px solid rgba(133,160,255,0.30); }
.elev-legend .s0 { box-shadow: var(--shadow-xs); }
.elev-legend .s1 { box-shadow: var(--shadow-sm); }
.elev-legend .s2 { box-shadow: var(--shadow-md); }
.elev-legend .s3 { box-shadow: var(--shadow-lg); }
.elev-legend .s4 { box-shadow: var(--shadow-xl); }
.elev-legend .s5 { box-shadow: var(--shadow-2xl); }

/* ── 13.8 Responsive behaviour patterns ───────────────────── */
.rb-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1000px) { .rb-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .rb-row { grid-template-columns: 1fr; } }
.rb-card {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,0.02);
  overflow: hidden;
}
.rb-card .stage {
  height: 120px;
  padding: 18px;
  background: rgba(0,0,0,0.18);
  border-bottom: 1px solid var(--border-subtle);
  display: grid;
  place-items: center;
  overflow: hidden;
}
/* Motion: animate TRANSFORM only (GPU-composited) for buttery loops.
   Each element sits in a fixed-size box; only translate/scale move.
   Cubic-bezier eases gently in and out of each hold — no lurch. */
.rb-anim { width: 96px; height: 56px; position: relative; }
.rb-anim .b, .rb-anim .bar {
  background: rgba(133,160,255,0.42);
  border: 1px solid rgba(133,160,255,0.3);
  border-radius: 3px;
  display: block;
  position: absolute;
  will-change: transform, opacity;
}
/* shared timing token for the loop */
.rb-anim .b, .rb-anim .bar { animation-duration: 4.2s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }

/* Stack: three columns glide down into a single stacked column */
.rb-anim.stack .b { width: 26px; height: 50px; top: 3px; border-radius: 4px; }
.rb-anim.stack .b:nth-child(1) { left: 5px;  animation-name: rbStack1; }
.rb-anim.stack .b:nth-child(2) { left: 35px; animation-name: rbStack2; }
.rb-anim.stack .b:nth-child(3) { left: 65px; animation-name: rbStack3; }
/* each travels to a shared column (x=35) at a staggered vertical slot, then back */
@keyframes rbStack1 {
  0%, 20%  { transform: translate(0, 0) scaleY(1); }
  46%, 74% { transform: translate(30px, -18px) scaleY(0.34); }
  100%     { transform: translate(0, 0) scaleY(1); }
}
@keyframes rbStack2 {
  0%, 20%  { transform: translate(0, 0) scaleY(1); }
  46%, 74% { transform: translate(0, 0) scaleY(0.34); }
  100%     { transform: translate(0, 0) scaleY(1); }
}
@keyframes rbStack3 {
  0%, 20%  { transform: translate(0, 0) scaleY(1); }
  46%, 74% { transform: translate(-30px, 18px) scaleY(0.34); }
  100%     { transform: translate(0, 0) scaleY(1); }
}

/* Reflow: four cells slide from a 4-wide row into a 2×2 block */
.rb-anim.reflow .b { width: 20px; height: 24px; border-radius: 4px; top: 16px; }
.rb-anim.reflow .b:nth-child(1) { left: 2px;  animation-name: rbReflow1; }
.rb-anim.reflow .b:nth-child(2) { left: 26px; animation-name: rbReflow2; }
.rb-anim.reflow .b:nth-child(3) { left: 50px; animation-name: rbReflow3; }
.rb-anim.reflow .b:nth-child(4) { left: 74px; animation-name: rbReflow4; }
/* cells 3 & 4 drop to a second row beneath cells 1 & 2 */
@keyframes rbReflow1 {
  0%, 20%  { transform: translate(0, 0); }
  46%, 74% { transform: translate(24px, -14px); }
  100%     { transform: translate(0, 0); }
}
@keyframes rbReflow2 {
  0%, 20%  { transform: translate(0, 0); }
  46%, 74% { transform: translate(24px, -14px); }
  100%     { transform: translate(0, 0); }
}
@keyframes rbReflow3 {
  0%, 20%  { transform: translate(0, 0); }
  46%, 74% { transform: translate(-24px, 14px); }
  100%     { transform: translate(0, 0); }
}
@keyframes rbReflow4 {
  0%, 20%  { transform: translate(0, 0); }
  46%, 74% { transform: translate(-24px, 14px); }
  100%     { transform: translate(0, 0); }
}

/* Reveal: a full-width bar shrinks to a menu glyph; two panels slide in */
.rb-anim.reveal .bar { width: 86px; height: 11px; top: 4px; left: 5px; transform-origin: left center; animation-name: rbRevealBar; }
.rb-anim.reveal .hide { width: 86px; height: 16px; left: 5px; opacity: 0; border-radius: 4px; }
.rb-anim.reveal .hide:nth-of-type(2) { top: 23px; animation-name: rbRevealPanel; }
.rb-anim.reveal .hide:nth-of-type(3) { top: 42px; animation-name: rbRevealPanel; animation-delay: 0.12s; }
@keyframes rbRevealBar {
  0%, 22%  { transform: scaleX(1); }
  48%, 72% { transform: scaleX(0.17); }
  100%     { transform: scaleX(1); }
}
@keyframes rbRevealPanel {
  0%, 30%   { opacity: 0; transform: translateY(-7px); }
  52%, 70%  { opacity: 1; transform: translateY(0); }
  92%, 100% { opacity: 0; transform: translateY(-7px); }
}

/* Reposition: a compact block sits LEFT of the main, then glides to sit ABOVE it
   while the main eases down to open the slot. Translate-only — no distortion. */
.rb-anim.reposition .side {
  width: 22px; height: 24px; top: 16px; left: 5px; border-radius: 4px;
  animation-name: rbReposSide;
}
.rb-anim.reposition .main {
  position: absolute; width: 56px; height: 24px; top: 16px; left: 35px;
  background: rgba(133,160,255,0.24); border: 1px solid rgba(133,160,255,0.3);
  border-radius: 4px; will-change: transform;
  animation: rbReposMain 4.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
/* side travels right + up to sit centred above where the main now rests */
@keyframes rbReposSide {
  0%, 22%  { transform: translate(0, 0); }
  48%, 74% { transform: translate(47px, -14px); }
  100%     { transform: translate(0, 0); }
}
/* main eases straight down to make room for the block above it */
@keyframes rbReposMain {
  0%, 22%  { transform: translate(0, 0); }
  48%, 74% { transform: translate(0, 14px); }
  100%     { transform: translate(0, 0); }
}
.rb-card .meta { padding: 14px 16px 16px; }
.rb-card .meta .ix {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--blue-300); margin-bottom: 6px;
}
.rb-card .meta h5 { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; margin: 0 0 4px; color: var(--fg-default); }
.rb-card .meta p { font-size: 12px; color: var(--fg-muted); line-height: 1.5; margin: 0; }

/* ── 13.9 Aspect ratios ───────────────────────────────────── */
/* Bento: every frame fills its cell, captions overlay — no dead space.
   4 cols × 2 rows. The proportion label lives top-left, the name bottom-left. */
.ratio-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 150px 150px;
  gap: 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,0.02);
  padding: 18px;
}
.ratio-card {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(133,160,255,0.28);
  background:
    repeating-linear-gradient(135deg, rgba(133,160,255,0.09) 0 8px, transparent 8px 16px),
    linear-gradient(160deg, rgba(133,160,255,0.10) 0%, rgba(133,160,255,0.03) 100%);
  transition: border-color 200ms ease, background 200ms ease;
}
.ratio-card:hover {
  border-color: rgba(133,160,255,0.55);
  background:
    repeating-linear-gradient(135deg, rgba(133,160,255,0.14) 0 8px, transparent 8px 16px),
    linear-gradient(160deg, rgba(133,160,255,0.16) 0%, rgba(133,160,255,0.05) 100%);
}
/* big mono ratio tag, top-left */
.ratio-card .rt {
  position: absolute;
  top: 12px; left: 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--blue-300);
}
/* overlaid caption, bottom-left, on a soft scrim */
.ratio-card .cap {
  position: absolute;
  left: 14px; right: 14px; bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ratio-card .cap b { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; color: var(--fg-default); }
.ratio-card .cap em {
  font-style: normal; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.04em; color: var(--fg-muted);
}
/* a true-ratio guide line so the proportion is still legible inside the cell */
.ratio-card::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border: 1px dashed rgba(133,160,255,0.45);
  border-radius: 4px;
  pointer-events: none;
}
/* the inner guide encodes the real aspect ratio (width:height) */
.ratio-card.a-16x9::after { width: 80px; height: 45px; }
.ratio-card.a-1x1::after  { width: 56px; height: 56px; }
.ratio-card.a-3x4::after  { width: 54px; height: 72px; }
.ratio-card.a-4x3::after  { width: 72px; height: 54px; }
.ratio-card.a-21x9::after { width: 126px; height: 54px; }

/* bento placement — packed, no gaps */
.ratio-card.a-16x9 { grid-column: 1 / 3; grid-row: 1; }
.ratio-card.a-1x1  { grid-column: 3;     grid-row: 1; }
.ratio-card.a-3x4  { grid-column: 4;     grid-row: 1 / 3; }
.ratio-card.a-4x3  { grid-column: 1;     grid-row: 2; }
.ratio-card.a-21x9 { grid-column: 2 / 4; grid-row: 2; }

@media (max-width: 720px) {
  .ratio-bento { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 132px); }
  .ratio-card.a-16x9 { grid-column: 1 / 3; grid-row: 1; }
  .ratio-card.a-1x1  { grid-column: 1;     grid-row: 2; }
  .ratio-card.a-3x4  { grid-column: 2;     grid-row: 2; }
  .ratio-card.a-4x3  { grid-column: 1;     grid-row: 3; }
  .ratio-card.a-21x9 { grid-column: 2;     grid-row: 3; }
}

/* ── 13.10 Safe areas & touch targets ─────────────────────── */
.safe-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 820px) { .safe-row { grid-template-columns: 1fr; } }
.safe-card {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,0.02);
  overflow: hidden;
}
.safe-card .stage {
  height: 150px;
  background: rgba(0,0,0,0.18);
  border-bottom: 1px solid var(--border-subtle);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.safe-card .meta { padding: 14px 16px 16px; }
.safe-card .meta .ix {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--blue-300); margin-bottom: 6px;
}
.safe-card .meta h5 { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; margin: 0 0 4px; color: var(--fg-default); }
.safe-card .meta p { font-size: 12px; color: var(--fg-muted); line-height: 1.5; margin: 0; }
/* touch target */
.touch-demo { position: relative; display: grid; place-items: center; }
.touch-demo .hit {
  position: absolute;
  width: 44px; height: 44px;
  border: 1.5px dashed rgba(133,160,255,0.6);
  border-radius: 8px;
  background: rgba(133,160,255,0.08);
}
.touch-demo .glyph { position: relative; color: var(--fg-default); display: grid; place-items: center; }
/* safe area */
.safe-demo {
  position: relative;
  width: 84px; height: 116px;
  border: 1.5px solid rgba(255,255,255,0.3);
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  overflow: hidden;
}
.safe-demo .notch {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 34px; height: 8px; border-radius: 0 0 6px 6px;
  background: rgba(255,255,255,0.3);
}
.safe-demo .inset {
  position: absolute; inset: 16px 10px 14px;
  border: 1px dashed rgba(133,160,255,0.5);
  border-radius: 6px;
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px 7px;
}
.safe-demo .line { height: 6px; border-radius: 2px; background: rgba(133,160,255,0.4); }
.safe-demo .line.short { width: 60%; }
/* focus ring */
.focus-demo { display: grid; place-items: center; }
.focus-demo .fbtn {
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  color: var(--fg-default);
  background: rgba(133,160,255,0.16);
  border: 1px solid rgba(133,160,255,0.4);
  border-radius: 8px;
  padding: 9px 18px;
  box-shadow: var(--shadow-focus);
  outline: 2px solid transparent;
  outline-offset: 2px;
  animation: focusPulse 2.8s ease-in-out infinite;
}
@keyframes focusPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(133,160,255,0.10); }
  50%      { box-shadow: var(--shadow-focus); }
}

@media (prefers-reduced-motion: reduce) {
  .rb-anim .b, .rb-anim .bar { animation: none !important; transform: none !important; }
  .rb-anim.reveal .hide { opacity: 1; }
  .focus-demo .fbtn { animation: none; box-shadow: var(--shadow-focus); }
  .elev-stack .layer { transition: none; }
}