/* ============================================================
   On the Radar — Responsive Grid (4 / 8 / 12 columns)
   Container caps measure. Row lays out columns. Col spans them.
   Every number here is a token from tokens.css — nothing local.

   Column COUNT changes per breakpoint (4 mobile, 8 tablet, 12
   desktop), not just margin/gutter — so "span 6" means something
   different at each breakpoint. Numbered col-N utilities don't
   work here. Use the semantic classes below instead: they carry
   their own per-breakpoint span values so "half" always means half.
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
}

/* A real gap until now: nothing in the app ever reset native button
   chrome. Every button class sets its own visible background/border,
   so it mostly didn't matter — except on a big, borderless, fully-
   transparent button like .add-show-toggle, where the browser's own
   (invisible) native control padding/appearance can sit on top of our
   box model and throw off centering in a way `padding: 0` alone
   doesn't fix, since it's inset baked into the native control itself,
   not a CSS box property. `appearance: none` removes that native
   rendering entirely so our own CSS is the only thing sizing the
   button — this is the actual fix for "Add a show" reading off-center;
   the icon-sizing pass earlier addressed a real but smaller issue,
   not this one. */
button, input {
  font: inherit;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
}

.container {
  width: 100%;
  max-width: calc(var(--grid-max-width) + (var(--grid-margin) * 2));
  margin-inline: auto;
  padding-inline: var(--grid-margin);
}

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

/* Semantic column spans. Each one is correct at every breakpoint —
   col-half is 2 of 4 on mobile, 4 of 8 on tablet, 6 of 12 on desktop,
   always exactly half. Add a new class here only if a component
   genuinely needs a span these four don't cover. */

.col-full {
  grid-column: 1 / -1; /* full row, any column count */
}

.col-half {
  grid-column: span 2; /* mobile: 2 of 4 */
}
@media (min-width: 600px)  { .col-half { grid-column: span 4; } } /* tablet: 4 of 8 */
@media (min-width: 1024px) { .col-half { grid-column: span 6; } } /* desktop: 6 of 12 */

.col-quarter {
  grid-column: span 1; /* mobile: 1 of 4 */
}
@media (min-width: 600px)  { .col-quarter { grid-column: span 2; } } /* tablet: 2 of 8 */
@media (min-width: 1024px) { .col-quarter { grid-column: span 3; } } /* desktop: 3 of 12 */

/* Thirds don't divide evenly on a 4- or 8-column grid, so col-third
   falls back to full width until desktop, where 12 handles it cleanly. */
.col-third {
  grid-column: 1 / -1;
}
@media (min-width: 1024px) { .col-third { grid-column: span 4; } } /* desktop: 4 of 12 */

/* Caps body copy at a readable measure regardless of the column
   span it's sitting in. Use on any text block, not just full-width ones. */
.prose {
  max-width: 65ch;
}

/* Grid overlay — debug only, toggled on the frame preview page.
   Never ships in a real component. Cells are generated by JS to
   match whatever --grid-columns is at the current breakpoint. */
.grid-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
}

.grid-overlay .row {
  height: 100%;
}

.grid-overlay .cell {
  grid-column: span 1;
  background: rgba(179, 18, 27, 0.08);
  outline: 1px dashed rgba(179, 18, 27, 0.35);
}