/* =============================================================
   Showcase-only additions.
   -------------------------------------------------------------
   The page is mostly classless. These helpers handle the small
   amount of layout the design system doesn't ship by default:
   color-swatch grids, side-by-side do/don't blocks, the floating
   theme switcher, the spacing-scale ladder. Nothing here invents
   new visual language; everything composes existing tokens.
   ============================================================= */

main section {
  scroll-margin-top: 24px;
}

/* Section dividers are redundant with the eyebrow + heading rhythm;
   each section already announces itself. Drop the 2px top rule that
   kauz.css ships, but keep the vertical breathing space. */
main section + section {
  border-top: 0;
  padding-top: 0;
  margin-top: calc(var(--space-unit) * 8);
}

/* Section eyebrow: every section opens with one so the doc reads
   like a stack of specimen cards instead of one long essay. */
.eyebrow {
  display: block;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-loose);
  color: var(--color-fg-muted);
  font-weight: 600;
  margin: 0 0 4px;
  font-family: var(--font-sans);
}

/* WHY block: same affordance the design system uses on its
   specimen cards. Heavy left rule, monospace WHY tag in ember. */
.why {
  margin: 16px 0 0;
  padding: 10px 14px;
  background: var(--color-bg-elev);
  border-left: var(--border-heavy);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.why::before {
  content: "WHY";
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--color-accent);
  margin-right: 10px;
  font-weight: 700;
  vertical-align: 0.08em;
}

/* Monospace tag: for token names, sample values, footnotes. */
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--color-fg-muted);
}
.mono.dim { color: var(--color-fg-dim); }

.grid {
  display: grid;
  gap: 12px;
}
.grid.two   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.four  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.auto  { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
@media (max-width: 720px) {
  .grid.two, .grid.three, .grid.four { grid-template-columns: 1fr 1fr; }
}

.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.row.tight { gap: 6px; }
.col { display: flex; flex-direction: column; gap: 12px; }

/* kauz.css ships a couple of sibling rules that target button-after-button
   and (input,select,textarea)-after-(button-ish). Inside a .row those
   rules collide with the flex gap: buttons end up pushed right and,
   worse, an <input type="submit"/"reset"> following a <button> picks
   up a 24 px top margin, breaking the row's vertical alignment. Inside
   a .row, the gap is the only spacing that should apply. */
.row :is(button, input[type="button"], input[type="submit"], input[type="reset"]) {
  margin: 0 !important;
}
.row :is(input, select, textarea, output, label) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.swatch {
  border: var(--border-thin);
  padding: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
}
.swatch .chip {
  height: 72px;
  display: block;
}
.swatch .meta {
  padding: 8px 10px;
  font-size: var(--fs-xs);
  line-height: 1.5;
  font-family: var(--font-mono);
  color: var(--color-fg-muted);
  border-top: var(--border-thin);
}
.swatch .meta b {
  display: block;
  color: var(--color-fg);
  font-weight: 600;
}

/* Signal swatches: slightly different read so they can't be confused
   with the neutral ramp at a glance. */
.signal {
  border: var(--border-thin);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.signal .dot {
  width: 18px;
  height: 18px;
  flex: none;
  border: 1px solid var(--color-border-soft);
}
.signal .name {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--color-fg);
}
.signal .role {
  font-size: var(--fs-xs);
  color: var(--color-fg-muted);
  margin-left: auto;
  text-align: right;
}

.type-row {
  display: grid;
  grid-template-columns: 90px 1fr 90px;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-top: var(--border-thin);
}
.type-row:last-child { border-bottom: var(--border-thin); }
.type-row .label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-fg-muted);
  letter-spacing: var(--tracking-loose);
  text-transform: uppercase;
}
.type-row .sample {
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg);
}
.type-row .size {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-fg-dim);
  text-align: right;
}

.scale {
  border: var(--border-thin);
  padding: 14px 16px;
  background: var(--color-bg-elev);
}
.scale-row {
  display: grid;
  grid-template-columns: 80px 80px 1fr;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}
.scale-row .token {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-fg);
}
.scale-row .px {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-fg-muted);
}
.scale-row .bar {
  height: 8px;
  background: var(--color-accent);
}

.border-demo {
  padding: 16px;
  background: var(--color-bg-elev);
}
.border-demo.thin   { border: var(--border-thin); }
.border-demo.normal { border: var(--border-normal); }
.border-demo.heavy  { border-left: var(--border-heavy); border-top: var(--border-normal); border-right: var(--border-normal); border-bottom: var(--border-normal); }

.elev {
  padding: 14px;
  border: var(--border-thin);
  font-size: var(--fs-sm);
}
.elev.l0 { background: var(--soot-0); }
.elev.l1 { background: var(--soot-1); }
.elev.l2 { background: var(--soot-2); }

.dd {
  border: var(--border-normal);
  padding: 14px 16px;
  background: var(--color-bg-elev);
  position: relative;
}
.dd::before {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  font-weight: 700;
  margin-bottom: 6px;
}
.dd.ok::before {
  content: "DO";
  color: var(--color-success);
}
.dd.no::before {
  content: "DON'T";
  color: var(--color-critical);
}
.dd p { margin: 0; font-size: var(--fs-sm); }
.dd p + p { margin-top: 6px; }

/* The "anti" tile renders the BAD example using on-the-fly overrides.
   Each rule is opt-in via a data-attr so the rest of the page stays
   on-brand. None of these escape the .anti-x scope. */
.anti-rounded { border-radius: 8px !important; }
.anti-shadow  { box-shadow: 0 10px 40px rgba(0,0,0,0.6) !important; border: 0 !important; }
.anti-gradient {
  background: linear-gradient(135deg, #8a2be2, #00bfff) !important;
  color: #fff !important;
}
.anti-emoji::before { content: "🚀 "; }
.anti-marketing { font-style: italic; color: var(--color-accent-2); }

.config-panel {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  background: var(--color-bg-elev);
  border: var(--border-normal);
  border-left: var(--border-heavy);
  padding: 14px 16px;
  width: 280px;
  font-size: var(--fs-sm);
}
.config-panel .eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-mono);
}
.config-panel .field {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.config-panel .field label {
  margin: 0 !important;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-loose);
  color: var(--color-fg-muted);
}
.config-panel .swatches {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.config-panel .swatches button {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 2px solid var(--color-border-soft);
  cursor: pointer;
}
.config-panel .swatches button[aria-pressed="true"] {
  border-color: var(--color-fg);
}
.config-panel hr {
  border: 0;
  border-top: var(--border-thin);
  margin: 12px 0 0;
}
.config-panel .actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.config-panel .actions button {
  flex: 1;
}
.config-panel.collapsed .body { display: none; }
.config-panel .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.config-panel .head button {
  padding: 2px 8px;
}

.toc {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px 18px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.toc li {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
.toc li::before {
  content: "▸ ";
  color: var(--color-accent);
}

table.tokens {
  font-size: var(--fs-sm);
}
table.tokens code {
  font-size: 0.9em;
}
table.tokens th:first-child,
table.tokens td:first-child { white-space: nowrap; }

/* The chip cell in the color table is a tiny preview square. */
.tok-chip {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  margin-right: 6px;
  border: 1px solid var(--color-border-soft);
}

.logos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.logos figure {
  margin: 0;
  border: var(--border-thin);
  text-align: center;
  background: var(--color-bg);
}
.logos img {
  display: block;
  width: 100%;
  height: auto;
  background: #0A0A0A;
}
.logos figcaption {
  padding: 6px 8px;
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  border-top: var(--border-thin);
  color: var(--color-fg-muted);
}

.voice-ex {
  border: var(--border-thin);
  padding: 12px 14px;
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.voice-ex::before {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  font-weight: 700;
  margin-right: 8px;
  vertical-align: 0.08em;
}
.voice-ex.ok::before { content: "WE SAY"; color: var(--color-success); }
.voice-ex.no::before { content: "WE DON'T"; color: var(--color-critical); }

.hover-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: var(--border-thin);
}
.hover-pair > div {
  padding: 14px 16px;
  font-size: var(--fs-sm);
}
.hover-pair > div + div {
  border-left: var(--border-thin);
}
.hover-pair .state {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--color-fg-muted);
  margin-bottom: 8px;
}

/* Light-theme equivalents: only swap a few colors when toggled. */
:root[data-theme="light"] .border-demo,
:root[data-theme="light"] .scale,
:root[data-theme="light"] .why,
:root[data-theme="light"] .dd {
  background: #FFFFFF;
}

/* The .elev cards hard-code soot primitives so the dark elevation
   ladder always reads the same. In light mode those dark fills would
   sit against light page text and hide it. Swap to the light surfaces
   and let inherited text color do its thing. */
:root[data-theme="light"] .elev.l0 { background: #ECECEC; }
:root[data-theme="light"] .elev.l1 { background: #FFFFFF; }
:root[data-theme="light"] .elev.l2 { background: #D8D8D8; }

/* The hover-pair preview hard-codes ember on bone for the "hover"
   button to keep the brand inverting move. In light mode the swap
   needs to flip so the demo still reads as inverted (dark background,
   light text). */
:root[data-theme="light"] .hover-pair button[style*="background"] {
  background: #0A0A0A !important;
  color: #ECECEC !important;
}

/* Make the picsum demo image render as one block, not in flow. */
img.specimen {
  display: block;
  width: 100%;
  height: auto;
  border: var(--border-thin);
  filter: grayscale(1);
}

/* When a <pre> follows a <blockquote> (or vice versa) the two heavy
   left rules visually fuse into one tall block. Give them air so each
   reads as its own structural lift. */
blockquote + pre,
pre + blockquote {
  margin-top: calc(var(--space-unit) * 3);
}