/* ==========================================================================
   K04 Layout & Surfaces — page styles
   ========================================================================== */


/* ── 04.1 Grid: breakpoint switch ───────────────────────────────────────── */

.bp-switch {
  display: flex;
  padding: 3px;
  border: 1px solid var(--ink-a16);
  border-radius: var(--radius-pill);
  background: var(--graphite-0);
}

.bp-switch__option {
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--graphite-600);
  font: 500 13px/1 'Geist Mono', monospace;
  cursor: pointer;
}
.bp-switch__option[aria-checked="true"] {
  background: var(--graphite-900);
  color: var(--graphite-50);
}

/* ── 04.1 Grid: spec strip ──────────────────────────────────────────────── */

.grid-spec {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  border: 1px solid var(--color-hairline);
  border-radius: 12px;
  background: var(--graphite-0);
}

.grid-spec__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border-right: 1px solid var(--ink-a08);
}

.grid-spec__key {
  font: 500 11px/1 'Geist Mono', monospace;
  letter-spacing: .08em;
  color: var(--graphite-500);
}

.grid-spec__value {
  margin: 0;
  font: 500 20px/1 'Geist', sans-serif;
  font-variant-numeric: tabular-nums;
}

/* ── 04.1 Grid: live preview ────────────────────────────────────────────
   Each breakpoint sets its column count, gutter, margin, frame width and
   the two block spans; the switch only changes [data-bp]. */

.grid-preview {
  --cols: 12;
  --gutter: 24px;
  --margin: 60px;
  --frame: 100%;
  --span-a: 1 / span 7;
  --span-b: 8 / span 5;
  position: relative;
  padding: 28px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-l);
  background: var(--graphite-0);
  overflow: hidden;
}
.grid-preview[data-bp="tablet"] {
  --cols: 8;
  --gutter: 20px;
  --margin: 40px;
  --frame: 72%;
  --span-a: 1 / span 5;
  --span-b: 6 / span 3;
}
.grid-preview[data-bp="mobile"] {
  --cols: 4;
  --gutter: 16px;
  --margin: 20px;
  --frame: 320px;
  --span-a: 1 / span 4;
  --span-b: 1 / span 4;
}

.grid-preview__frame {
  max-width: var(--frame);
  margin: 0 auto;
  transition: max-width var(--dur-4) var(--ease-diastole);
}

.grid-preview__columns,
.grid-preview__blocks {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--gutter);
}

.grid-preview__columns {
  height: 120px;
  padding: 0 var(--margin);
  border-left: 1px dashed rgba(10, 18, 22, .25);
  border-right: 1px dashed rgba(10, 18, 22, .25);
}

.grid-preview__blocks { padding: 16px var(--margin) 0; }

.grid-preview__col {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 6px;
  background: rgba(10, 122, 95, .1);
  border-left: 1px solid rgba(10, 122, 95, .35);
  border-right: 1px solid rgba(10, 122, 95, .35);
  font: 500 10px/1 'Geist Mono', monospace;
  color: var(--scrub-600);
}
/* Only the first --cols columns exist at each breakpoint */
.grid-preview[data-bp="tablet"] .grid-preview__col:nth-child(n+9),
.grid-preview[data-bp="mobile"] .grid-preview__col:nth-child(n+5) { display: none; }

.grid-preview__block {
  height: 72px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-radius: var(--radius-m);
  font: 500 12px/1.3 'Geist Mono', monospace;
}

.grid-preview__block--headline {
  grid-column: var(--span-a);
  background: var(--graphite-900);
  color: var(--graphite-50);
}

.grid-preview__block--media {
  grid-column: var(--span-b);
  border: 1px solid var(--ink-a20);
  color: var(--graphite-600);
}

.grid-preview__caption {
  position: absolute;
  left: 28px;
  bottom: 10px;
  font: 400 11px/1 'Geist Mono', monospace;
  color: var(--graphite-500);
}

/* ── 04.2 Spacing scale ─────────────────────────────────────────────────── */

.space-scale {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ink-a08);
}

.space-scale__row {
  display: grid;
  grid-template-columns: 110px 70px minmax(0, 1fr) minmax(0, 220px);
  gap: 16px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(10, 18, 22, .06);
}

.space-scale__token { font: 400 13px/1 'Geist Mono', monospace; }

.space-scale__px {
  font: 500 13px/1 'Geist Mono', monospace;
  color: var(--graphite-500);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* --value: token size relative to the largest step (160px) */
.space-scale__bar {
  width: var(--value);
  height: 12px;
  border-radius: 2px;
  background: var(--graphite-900);
}

.space-scale__use {
  font: 400 13px/1.3 'Geist', sans-serif;
  color: var(--graphite-600);
}

/* Section rhythm cards */
.rhythm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.rhythm-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border: 1px solid var(--color-hairline);
  border-radius: 12px;
  background: var(--graphite-0);
}

.rhythm-card__token { font: 400 13px/1 'Geist Mono', monospace; }

.rhythm-card__diagram {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.rhythm-card__block {
  height: 10px;
  border-radius: 3px;
  background: var(--graphite-200);
}

/* --value: drawn height of the gap */
.rhythm-card__gap {
  position: relative;
  height: var(--value);
  margin-left: 50%;
  border-left: 1px dashed var(--scrub-600);
}

.rhythm-card__gap-label {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font: 500 11px/1 'Geist Mono', monospace;
  color: var(--scrub-600);
}

.rhythm-card__use {
  font: 400 14px/1.4 'Geist', sans-serif;
  color: var(--graphite-600);
}

/* ── 04.3 Radius ────────────────────────────────────────────────────────── */

.radius-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.radius-sample {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.radius-sample__shape {
  height: 120px;
  border: 1px solid var(--ink-a20);
  background: var(--graphite-0);
}
.radius-sample__shape--s    { border-radius: var(--radius-s); }
.radius-sample__shape--m    { border-radius: var(--radius-m); }
.radius-sample__shape--l    { border-radius: var(--radius-l); }
.radius-sample__shape--pill { border-radius: var(--radius-pill); }

.radius-sample__meta {
  display: flex;
  justify-content: space-between;
  font: 400 13px/1 'Geist Mono', monospace;
}

.radius-sample__value { color: var(--graphite-500); }

.radius-sample__use {
  font: 400 13px/1.4 'Geist', sans-serif;
  color: var(--graphite-600);
}

/* ── 04.3 Elevation ─────────────────────────────────────────────────────── */

.elevation-stage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  padding: 40px 28px;
  border-radius: var(--radius-l);
  background: var(--graphite-100);
  overflow: hidden;
}

/* Hatched disc behind the cards, so the glass blur is visible */
.elevation-stage__backdrop {
  position: absolute;
  right: 40px;
  top: 30px;
  z-index: 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: repeating-linear-gradient(135deg, var(--scrub-200) 0 10px, var(--scrub-100) 10px 20px);
}

.elevation-card {
  position: relative;
  z-index: 1;
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px;
  border: 1px solid var(--ink-a08);
  border-radius: var(--radius-l);
  background: var(--graphite-0);
}
.elevation-card--0 { border-color: var(--color-hairline); }
.elevation-card--1 { box-shadow: var(--elevation-1); }
.elevation-card--2 { box-shadow: var(--elevation-2); }
.elevation-card--3 {
  border-color: rgba(255, 255, 255, .6);
  background: var(--color-overlay);
  box-shadow: var(--elevation-3);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.elevation-card__level {
  font: 500 11px/1 'Geist Mono', monospace;
  letter-spacing: .08em;
  color: var(--graphite-600);
}

.elevation-card__use {
  font: 400 13px/1.4 'Geist', sans-serif;
  color: var(--graphite-750);
}

/* ── 04.4 Breakpoint behavior table ─────────────────────────────────────── */

.behavior-table {
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-l);
  background: var(--graphite-0);
  overflow-x: auto;
}

.behavior-table__table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font: 400 14px/1.45 'Geist', sans-serif;
}

.behavior-table__table thead tr {
  text-align: left;
  font: 500 11px/1 'Geist Mono', monospace;
  letter-spacing: .08em;
  color: var(--graphite-500);
}

.behavior-table__table th {
  padding: 16px 20px;
  border-bottom: 1px solid var(--ink-a10);
}

.behavior-table__table td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--ink-a07);
  color: var(--graphite-750);
}
.behavior-table__table td:first-child {
  font-weight: 500;
  color: inherit;
}