/* Demo chrome for the MCSS-Lite instruction booklet. Tokens only, like any consumer CSS. */

/* Rubik (SIL OFL 1.1, see fonts/OFL.txt), self-hosted variable font, Latin subset. */
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("fonts/rubik-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.demo {
  background-color: var(--color-background-canvas);
  /* The stud grid every part aligns to. */
  background-image: radial-gradient(
    circle,
    color-mix(in srgb, var(--color-border-keyline) 14%, transparent) 1.5px,
    transparent 1.75px
  );
  background-size: var(--space-4) var(--space-4);
}

.demo code {
  padding: 0.1em 0.35em;
  border-radius: var(--border-radius-sm);
  background-color: var(--color-background-raised);
  box-shadow: inset 0 0 0 1px var(--color-border-default);
  color: var(--color-text-default);
  /* A class name is one word: never split it at its hyphens. */
  white-space: nowrap;
}

.demo-install__alt code {
  white-space: normal;
  overflow-wrap: anywhere;
}

.demo-skip {
  position: absolute;
  inset-inline-start: var(--space-4);
  inset-block-start: -10rem;
  z-index: var(--z-index-sticky);
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-background-raised);
  border: var(--border-width-thick) solid var(--color-border-keyline);
  border-radius: var(--border-radius-base);
  color: var(--color-text-link);
  font-weight: var(--font-weight-semibold);
}

.demo-skip:focus-visible {
  inset-block-start: var(--space-2);
}

/* Top bar */
.demo-bar {
  background-color: var(--color-background-raised);
  border-block-end: var(--border-width-thick) solid var(--color-border-keyline);
}

.demo-bar__inner {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "mark theme" "nav nav";
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  padding-block: var(--space-2);
}

.demo-bar__inner > .demo-wordmark { grid-area: mark; }
.demo-bar__inner > .demo-bar__nav { grid-area: nav; }
.demo-bar__inner > [role="group"] {
  grid-area: theme;
  flex-wrap: nowrap;
  gap: var(--space-1);
}

/* The narrowest phones: wordmark, theme switch and page links each get a row. */
@media (max-width: 24rem) {
  .demo-bar__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "mark" "theme" "nav";
  }

  .demo-bar__inner > [role="group"] {
    justify-self: start;
  }
}

@media (min-width: 48rem) {
  .demo-bar__inner {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "mark nav theme";
    padding-block: var(--space-3);
  }

  .demo-bar__inner > .demo-bar__nav {
    justify-self: center;
  }
}

.demo-wordmark {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.demo-wordmark__version {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-subtle);
}

/* First viewport */
.demo-hero {
  padding-block: var(--space-12) var(--space-10);
}

.demo-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-10);
  align-items: center;
}

.demo-hero__title {
  margin-block-end: var(--space-5);
  font-family: var(--font-family-display);
  font-size: clamp(2.5rem, 6.5vw, 4.75rem);
  font-weight: var(--font-weight-extrabold);
  line-height: 1.02;
  letter-spacing: -0.025em;
}

.demo-hero__lede {
  max-width: 58ch;
  margin-block-end: var(--space-6);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-muted);
}

.demo-install {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-3);
  width: fit-content;
  max-width: 100%;
  margin-block-end: var(--space-6);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  background-color: var(--color-background-raised);
  border: var(--border-width-thick) solid var(--color-border-keyline);
  border-radius: var(--border-radius-base);
  box-shadow: var(--shadow-raised);
}

.demo .demo-install__cmd {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  padding: 0;
  background: none;
  box-shadow: none;
  font-size: var(--font-size-sm);
}

.demo-install__alt {
  max-width: 48ch;
  margin-block: calc(var(--space-3) * -1) var(--space-6);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.demo-links {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: var(--font-weight-semibold);
}

.demo-links a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
}

/* Parts inventory */
.demo-inventory {
  padding: var(--space-6);
  background-color: var(--color-background-raised);
  border: var(--border-width-thick) solid var(--color-border-keyline);
  border-radius: var(--border-radius-base);
  box-shadow: var(--shadow-elevated);
  display: grid;
  gap: var(--space-4);
}

.demo-inventory__title {
  margin: 0;
  font-size: var(--font-size-xl);
}

/* Each bag is a keylined, sealed parts bag: a folded top edge over a subtle fill. */
.demo-bag {
  padding: var(--space-4);
  background-color: var(--color-background-subtle);
  border: var(--border-width-thick) solid var(--color-border-keyline);
  border-block-start-width: var(--border-width-thicker);
  border-radius: var(--border-radius-base);
}

.demo-bag__part {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.demo-bag__note {
  margin: var(--space-3) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
}

.demo-glyph {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-text-default);
}

.demo-part__head {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  justify-self: start;
}

.demo-bag__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-block-end: var(--space-3);
  font-weight: var(--font-weight-bold);
}

.demo-bag__num {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: var(--border-width-thick) solid var(--color-border-keyline);
  border-radius: var(--border-radius-full);
  background-color: var(--color-background-raised);
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-extrabold);
}

.demo-bag__count {
  margin-inline-start: auto;
  font-family: var(--font-family-display);
  font-variant-numeric: tabular-nums;
}

.demo-bag__list,
.demo-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.demo-swatch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
}

.demo-swatch__chip {
  width: 1.5rem;
  height: 1.5rem;
  border: var(--border-width-thick) solid var(--color-border-keyline);
  border-radius: var(--border-radius-base);
}

/* Steps */
.demo-step {
  padding-block: var(--space-16);
  border-block-start: var(--border-width-thin) solid var(--color-border-default);
}

.demo-step__grid {
  display: grid;
  gap: var(--space-8);
  align-items: start;
}

.demo-step__numeral {
  margin: 0 0 var(--space-2);
  font-family: var(--font-family-display);
  font-size: clamp(4rem, 11vw, 6rem);
  font-weight: var(--font-weight-extrabold);
  line-height: 0.9;
  letter-spacing: -0.04em;
}

.demo-step__numeral--wrong {
  color: var(--color-action-danger);
}

.demo-step__numeral svg {
  width: 0.8em;
  height: 0.8em;
}

.demo-step__title {
  margin-block-end: var(--space-3);
  font-size: var(--font-size-2xl);
}

.demo-step__text {
  max-width: 48ch;
  margin-block-end: var(--space-6);
  color: var(--color-text-muted);
}

.demo-callout {
  padding: var(--space-5);
  background-color: var(--color-background-callout);
  border: var(--border-width-thick) solid var(--color-border-keyline);
  border-radius: var(--border-radius-base);
}

.demo-callout__label {
  margin-block-end: var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.demo-callout__hint {
  font-weight: var(--font-weight-normal);
  color: var(--color-text-subtle);
}

.demo-callout__also {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: var(--space-4) 0 0;
  padding-block-start: var(--space-3);
  border-block-start: var(--border-width-thin) solid var(--color-border-default);
  font-size: var(--font-size-sm);
}

/* Parts that belong to another step are ghosted, like finished steps in a booklet. */
.demo-also {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  opacity: 0.72;
}

.demo-also .demo-glyph {
  width: 1.125rem;
  height: 1.125rem;
}

.demo-parts {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.demo-part {
  display: grid;
  gap: var(--space-1);
}

.demo .demo-part__name {
  justify-self: start;
  font-weight: var(--font-weight-bold);
  box-shadow: inset 0 0 0 var(--border-width-thick) var(--color-border-keyline);
}

.demo-part__meta {
  display: grid;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
}

.demo-part__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
}

.demo-part__key {
  color: var(--color-text-subtle);
  font-weight: var(--font-weight-semibold);
}

.demo-step__build {
  position: relative;
  min-width: 0;
}

.demo-arrow {
  display: none;
  position: absolute;
  inset-inline-start: -7.5rem;
  inset-block-start: 1.5rem;
  width: 7rem;
  color: var(--color-text-default);
}

.demo-stage {
  /* A <figure>: each stage is one self-contained build, so the validator counts it as its own region. */
  margin: 0;
  padding: var(--space-6);
  background-color: var(--color-background-default);
  /* The stud grid carries on inside the build area. */
  background-image: radial-gradient(
    circle,
    color-mix(in srgb, var(--color-border-keyline) 10%, transparent) 1.25px,
    transparent 1.5px
  );
  background-size: var(--space-4) var(--space-4);
  border: var(--border-width-thick) solid var(--color-border-keyline);
  border-radius: var(--border-radius-base);
  box-shadow: var(--shadow-raised);
  overflow-x: auto;
}

.demo-stage > * + * {
  margin-block-start: var(--space-4);
}

/* Step 1: a full-width baseplate; every layout primitive is outlined and tagged. */
.demo-stage--baseplate :where([class^="l-"], [class*=" l-"]) {
  position: relative;
  outline: var(--border-width-thick) dashed color-mix(in srgb, var(--color-border-keyline) 45%, transparent);
  outline-offset: 2px;
}

.demo-stage--baseplate :where([class^="l-"], [class*=" l-"])::before {
  content: attr(class);
  position: absolute;
  inset-block-start: calc(var(--space-3) * -1 - 2px);
  inset-inline-start: var(--space-2);
  z-index: 1;
  padding: 0 var(--space-1);
  border-radius: var(--border-radius-sm);
  background-color: var(--color-background-callout);
  color: var(--color-text-default);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  line-height: 1.5;
  white-space: nowrap;
  pointer-events: none;
}

/* Nested primitives that share a top edge keep their tags apart. */
.demo-stage--baseplate .l-container::before {
  inset-inline: auto var(--space-2);
}

/* Each outlined primitive gets a strip for its tag, so tags never sit on the parts or on each other. */
.demo-stage--baseplate :where([class^="l-"], [class*=" l-"]) {
  padding-block: var(--space-6) var(--space-2);
}

/* On phones the outer section outline would only add a fifth nested box. */
@media (max-width: 40rem) {
  .demo-stage--baseplate .l-section {
    outline: 0;
    padding-block: 0;
  }

  .demo-stage--baseplate .l-section::before {
    content: none;
  }
}

/* Contains the fixed-position modal preview inside the stage. */
.demo-stage--contain {
  position: relative;
  min-height: 26rem;
  padding: 0;
  overflow: hidden;
  transform: translateZ(0);
}

.demo-stage-actions {
  margin-block-start: var(--space-4);
}

/* Count tag: how many times the part is used in this step. */
.demo-count {
  display: inline-grid;
  place-items: center;
  min-inline-size: 2rem;
  padding: 0 var(--space-1);
  border: var(--border-width-thick) solid var(--color-border-keyline);
  border-radius: var(--border-radius-full);
  background-color: var(--color-background-raised);
  font-family: var(--font-family-display);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-extrabold);
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}

/* Step rail: a sticky row of studs; on wide screens a column in the left gutter. */
.demo-rail {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-index-sticky);
  padding-block: var(--space-2);
  background-color: var(--color-background-raised);
  border-block-end: var(--border-width-thick) solid var(--color-border-keyline);
}

.demo-rail__list {
  display: flex;
  justify-content: safe center;
  gap: var(--space-1);
  margin: 0;
  padding: 0 0 var(--space-1);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}

.demo-rail__stud {
  position: relative;
  display: grid;
  place-items: center;
  /* Studs stay a full 44px target; when they don't fit the row scrolls sideways instead of shrinking. */
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border: var(--border-width-thick) solid var(--color-border-keyline);
  border-radius: var(--border-radius-full);
  background-color: var(--color-background-raised);
  box-shadow: var(--shadow-raised);
  color: var(--color-text-default);
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-extrabold);
  text-decoration: none;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.demo-rail__stud svg {
  width: 1rem;
  height: 1rem;
}

.demo-rail__stud:focus-visible {
  box-shadow: 0 0 0 5px var(--color-focus-halo);
}

.demo-rail__stud:hover {
  color: var(--color-text-default);
  background-color: var(--color-background-interactive-hover);
}

/* The current step is seated: ink-filled and pressed onto its edge. */
/* The name of the step you're on (or pointing at), under the studs. The column rail shows labels instead. */
.demo-rail__now {
  margin: var(--space-1) 0 0;
  min-block-size: 1.25em;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  text-align: center;
  color: var(--color-text-muted);
}

.demo-rail__stud[aria-current="step"] {
  background-color: var(--color-text-default);
  color: var(--color-text-inverse);
  box-shadow: none;
  transform: translateY(2px);
}

.demo-rail__stud--wrong[aria-current="step"] {
  background-color: var(--color-action-danger);
  border-color: var(--color-action-danger);
  color: var(--color-text-on-danger);
}

/* The column rail needs a gutter wide enough for its labels, so they never cover the page. */
@media (min-width: 100rem) {
  .demo-rail__now {
    display: none;
  }

  .demo-rail {
    position: fixed;
    inset-inline-start: var(--space-4);
    inset-block-start: 50%;
    transform: translateY(-50%);
    padding: 0;
    background: none;
    border: 0;
  }

  .demo-rail__list {
    flex-direction: column;
    gap: var(--space-2);
  }

  .demo-rail__stud {
    width: 2.75rem;
    height: 2.75rem;
  }

  /* The step title slides out beside the stud on hover and keyboard focus. */
  .demo-rail__stud::after {
    content: attr(data-label);
    position: absolute;
    inset-inline-start: calc(100% + var(--space-2));
    padding: var(--space-1) var(--space-2);
    border: var(--border-width-thick) solid var(--color-border-keyline);
    border-radius: var(--border-radius-base);
    background-color: var(--color-background-raised);
    color: var(--color-text-default);
    font-family: var(--font-family-sans);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    inline-size: max-content;
    max-inline-size: 9.5rem;
    opacity: 0;
    transform: translateX(calc(var(--space-2) * -1));
    transition:
      opacity var(--duration-fast) var(--ease-out),
      transform var(--duration-fast) var(--ease-out);
    pointer-events: none;
  }

  .demo-rail__stud:hover::after,
  .demo-rail__stud:focus-visible::after {
    opacity: 1;
    transform: none;
  }
}

/* The misfit drawing */
.demo-misfit {
  display: block;
  width: 100%;
  max-width: 28rem;
  height: auto;
  color: var(--color-text-default);
}

.demo-misfit__bad {
  stroke: var(--color-border-error);
}

.demo-misfit__wobble {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

/* The wrong brick drops once and lands askew: one smooth, decelerating move. */
@keyframes demo-misfit-drop {
  from { transform: translateY(-12px) rotate(10deg); }
  to { transform: none; }
}

.demo-step.is-seating .demo-misfit__wobble {
  animation: demo-misfit-drop var(--duration-slower) var(--ease-out-expo) 200ms both;
}

.demo-misfit__good {
  stroke: var(--color-text-default);
}

/* The wrong piece */
.demo-check {
  padding: var(--space-6);
  background-color: var(--color-background-raised);
  border: var(--border-width-thick) solid var(--color-border-error);
  border-radius: var(--border-radius-base);
  box-shadow: var(--shadow-raised);
}

.demo-check__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.demo-check__why {
  color: var(--color-text-muted);
}

.demo-check__issues {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.demo-check__issue--error {
  color: var(--color-text-error);
}

.demo-check__issue--warning {
  color: var(--color-text-warning);
}

.demo-code {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-background-subtle);
  border: var(--border-width-thin) solid var(--color-border-default);
  border-radius: var(--border-radius-base);
  white-space: pre-wrap;
  overflow-x: auto;
}

.demo-code__token {
  white-space: nowrap;
}

.demo .demo-code code {
  white-space: inherit;
  padding: 0;
  background: none;
  box-shadow: none;
  overflow-wrap: normal;
}

.demo-footer {
  padding-block: var(--space-10);
  border-block-start: var(--border-width-thick) solid var(--color-border-keyline);
  background-color: var(--color-background-raised);
  color: var(--color-text-subtle);
  font-size: var(--font-size-sm);
}

/* Parts drop into place along the arrow, press onto their 2px brick edge, and settle.
   Content is visible throughout; only the position moves. */
@keyframes demo-seat {
  0% { transform: translateY(calc(var(--space-4) * -1)); }
  70% { transform: translateY(2px); }
  100% { transform: none; }
}

@keyframes demo-draw {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

.demo-step.is-seating .demo-stage {
  animation: demo-seat var(--duration-slower) var(--ease-out-expo) both;
}

.demo-step.is-seating .demo-callout {
  animation: demo-seat var(--duration-slow) var(--ease-out-expo) both;
}

.demo-step.is-seating .demo-arrow {
  animation: demo-draw var(--duration-slower) var(--ease-out) both;
}

@media (min-width: 60rem) {
  .demo-step--wide .demo-step__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }

  .demo-step--wide .demo-step__head {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto auto 1fr;
    column-gap: var(--space-16);
    align-items: start;
  }

  .demo-step--wide .demo-step__head > :not(.demo-callout) {
    grid-column: 1;
  }

  .demo-step--wide .demo-callout {
    grid-column: 2;
    grid-row: 1 / span 3;
  }

  .demo-step--wide .demo-arrow {
    display: none;
  }

  .demo-hero__grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--space-16);
  }

  .demo-step__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-16);
  }

  .demo-arrow {
    display: block;
    inset-inline-start: calc(var(--space-16) * -1 - 0.5rem);
    width: calc(var(--space-16) + 0.25rem);
  }
}

/* Inset steps: the call-out is set onto the stage one stud deep, like an inset on a booklet page,
   and the parts seat one after another. Showcase only. */
@media (min-width: 60rem) {
  .demo-step--inset .demo-callout {
    position: relative;
    z-index: 1;
    margin-block-end: calc((var(--space-8) + var(--space-4)) * -1);
    box-shadow: var(--shadow-raised);
  }

  .demo-step--inset .demo-stage {
    padding: var(--space-10) var(--space-8) var(--space-8);
  }
}

.demo-step--inset.is-seating .demo-stage :is(.c-checkbox, .c-radio, .c-toggle, .c-alert) {
  animation: demo-seat var(--duration-slow) var(--ease-out-expo) both;
  animation-delay: calc(var(--demo-i, 0) * 70ms + var(--duration-base));
}

/* The switch flips once, after it has seated: the thumb slides, then its tick appears. */
@keyframes demo-slide {
  from { inset-inline-start: 0.125rem; }
}

@keyframes demo-appear {
  from { opacity: 0; }
}

.demo-step--inset.is-seating .c-toggle__input:checked::before {
  animation: demo-slide var(--duration-slow) var(--ease-out) both;
  animation-delay: calc(var(--duration-slower) * 2);
}

.demo-step--inset.is-seating .c-toggle__input:checked::after {
  animation: demo-appear var(--duration-fast) var(--ease-out) both;
  animation-delay: calc(var(--duration-slower) * 2 + var(--duration-slow));
}

@media (prefers-reduced-motion: reduce) {
  .demo-step--inset.is-seating .demo-stage :is(.c-checkbox, .c-radio, .c-toggle, .c-alert),
  .demo-step--inset.is-seating .c-toggle__input:checked::before,
  .demo-step--inset.is-seating .c-toggle__input:checked::after {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .demo-rail__stud { transition: none; }
  .demo-step.is-seating .demo-stage,
  .demo-step.is-seating .demo-callout,
  .demo-step.is-seating .demo-arrow,
  .demo-step.is-seating .demo-misfit__wobble {
    animation: none;
  }
}

/* ===== Part sheets, parts inventory and "Read before you build" =====
   More pages of the same booklet: keylined plates, numbered sections, check-your-build panels. */

.demo-wordmark__link {
  color: inherit;
  text-decoration: none;
}

.demo-bar__links {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.demo-bar__links a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
}

/* Sheet header: the part on its own plate, element ID first, like a parts-list entry. */
.demo-sheet__head {
  padding-block: var(--space-12) var(--space-10);
}

.demo-sheet__head-grid {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

.demo-sheet__plate {
  display: grid;
  place-items: center;
  width: 8rem;
  aspect-ratio: 1;
  background-color: var(--color-background-raised);
  border: var(--border-width-thick) solid var(--color-border-keyline);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-raised);
}

.demo-sheet__plate .demo-glyph {
  width: 4.5rem;
  height: 4.5rem;
}


.demo-sheet__title {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: clamp(var(--font-size-3xl), 6vw, var(--font-size-5xl));
  font-weight: var(--font-weight-extrabold);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.demo-sheet__id {
  display: block;
  margin-block-start: var(--space-2);
  font-family: var(--font-family-mono);
  font-size: 0.55em;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
  color: var(--color-text-muted);
}

.demo-sheet__since {
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
}

.demo-sheet__row {
  display: grid;
  gap: var(--space-2) var(--space-8);
  align-items: start;
}

.demo-sheet__body {
  min-width: 0;
}

.demo-sheet__body > .demo-step__title {
  margin: 0;
}

.demo-sheet__section {
  padding-block: var(--space-12);
}

/* Status sticker: a monochrome filled tag, never a status color (One Blue Rule). No keyline and no brick edge,
   so it never reads as a button. */
.demo-sticker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-2) 0 var(--space-1);
  border-radius: var(--border-radius-full);
  background-color: var(--color-background-muted);
  color: var(--color-text-default);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1.6;
  white-space: nowrap;
}

.demo-sticker svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.demo-sticker--deprecated {
  /* The cross says "deprecated"; the text stays readable. */
  background-color: transparent;
  box-shadow: inset 0 0 0 var(--border-width-thin) var(--color-border-strong);
  color: var(--color-text-muted);
}

/* Pick this part / Pick another part */
.demo-pick {
  display: grid;
  gap: var(--space-4);
}

.demo-pick__col {
  padding: var(--space-5);
  background-color: var(--color-background-raised);
  border: var(--border-width-thick) solid var(--color-border-keyline);
  border-radius: var(--border-radius-base);
}

.demo-pick__col--other {
  background-color: var(--color-background-subtle);
  border-color: var(--color-border-strong);
}

.demo-pick__list,
.demo-safe__list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-inline-start: var(--space-5);
}

/* Build it: numbered steps, then the finished build on the stud grid. */
.demo-build-steps {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: build;
}

.demo-build-steps li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: baseline;
  counter-increment: build;
}

.demo-build-steps li::before {
  content: counter(build);
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: var(--border-width-thick) solid var(--color-border-keyline);
  border-radius: var(--border-radius-full);
  background-color: var(--color-background-raised);
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-extrabold);
}

.demo-sheet__stage {
  position: relative;
}

.demo-sheet__stage .demo-arrow {
  display: none;
}

/* Check your build: ✓ fits / ✗ doesn't fit, side by side. */


.demo-checks {
  display: grid;
  gap: var(--space-6);
}

.demo-checks__pair {
  display: grid;
  gap: var(--space-4);
}

.demo-checks__card {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  min-width: 0;
  padding: var(--space-5);
  background-color: var(--color-background-raised);
  border: var(--border-width-thick) solid var(--color-border-keyline);
  border-radius: var(--border-radius-base);
  box-shadow: var(--shadow-raised);
}

.demo-checks__card > p {
  margin: 0;
}

.demo-checks__card--dont {
  /* Sized to its own content, not stretched to the height of the ✓ beside it. */
  align-self: start;
  border-color: var(--color-border-error);
  border-style: dashed;
  box-shadow: none;
}

.demo-misfit-mini {
  inline-size: 3rem;
  block-size: 2rem;
  margin-inline-start: auto;
  color: var(--color-border-error);
}

.demo-checks__card--dont .demo-checks__head {
  display: flex;
}

/* The icon set on the c-icon sheet: a keylined tile per icon with its name. */
.demo-icon-set {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.demo-icon-set__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-2);
  border: var(--border-width-thick) solid var(--color-border-keyline);
  border-radius: var(--border-radius-base);
  background-color: var(--color-background-raised);
  font-size: var(--font-size-sm);
}

/* A live chip of the token's color in the current theme. */
.demo-spec__swatch {
  display: inline-block;
  inline-size: 1rem;
  block-size: 1rem;
  margin-inline-end: var(--space-2);
  vertical-align: -0.2em;
  border: var(--border-width-thin) solid var(--color-border-strong);
  border-radius: var(--border-radius-sm);
}

.demo-checks__head {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
}

.demo-mark {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.demo-checks__card--do .demo-checks__head .demo-mark {
  color: var(--color-text-success);
}

.demo-checks__card--dont .demo-checks__head .demo-mark {
  color: var(--color-text-error);
}

.demo-checks__verdict {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.demo-checks__verdict .demo-mark {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-text-success);
}

.demo-checks__guidance {
  padding: var(--space-3);
  background-color: var(--color-background-subtle);
  border-radius: var(--border-radius-base);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.demo-checks .demo-stage {
  padding: var(--space-4);
}

/* Spec sheet tables */
.demo-spec {
  overflow-x: auto;
}

.demo-spec table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--color-background-raised);
  border: var(--border-width-thick) solid var(--color-border-keyline);
  font-size: var(--font-size-sm);
}

.demo-spec caption {
  padding-block-end: var(--space-2);
  text-align: start;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
}

.demo-spec th,
.demo-spec td {
  padding: var(--space-3);
  border-block-end: var(--border-width-thin) solid var(--color-border-default);
  text-align: start;
  vertical-align: top;
}

.demo-spec thead th {
  background-color: var(--color-background-subtle);
  border-block-end: var(--border-width-thick) solid var(--color-border-keyline);
}

.demo-spec tbody th {
  font-weight: var(--font-weight-normal);
  white-space: nowrap;
}

.demo-spec__muted {
  color: var(--color-text-subtle);
  font-size: var(--font-size-xs);
}

.demo kbd {
  padding: 0.05em 0.4em;
  border: var(--border-width-thick) solid var(--color-border-keyline);
  border-block-end-width: var(--border-width-thicker);
  border-radius: var(--border-radius-base);
  background-color: var(--color-background-raised);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
}

/* Fits with: a mini bag of linked parts */
.demo-fits a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2);
}

.demo-sheet__sources {
  padding-block: var(--space-8);
  font-size: var(--font-size-sm);
}

.demo-sheet__sources-title {
  margin-block-end: var(--space-3);
  font-size: var(--font-size-base);
}

.demo-sheet__sources-list {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding-inline-start: var(--space-5);
}

.demo-sheet__pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-8) var(--space-12);
  font-weight: var(--font-weight-semibold);
}

.demo-sheet__pager a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 2.75rem;
}

/* Parts inventory: bags per layer at the back of the booklet. */
.demo-legend {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-sm);
}

.demo-legend li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.demo-bag--wide {
  background-color: var(--color-background-raised);
}

.demo-inventory-table__part {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Read before you build: numbered notices, like the safety page of a booklet. */
.demo-notices {
  display: grid;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.demo-notices--compact {
  gap: var(--space-2);
  padding-inline-start: var(--space-5);
  list-style: decimal;
}

.demo-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-5);
  background-color: var(--color-background-raised);
  border: var(--border-width-thick) solid var(--color-border-keyline);
  border-radius: var(--border-radius-base);
  box-shadow: var(--shadow-raised);
  scroll-margin-block-start: var(--space-16);
}

.demo-notice__num {
  margin: 0;
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: var(--border-width-thick) solid var(--color-border-keyline);
  border-radius: var(--border-radius-full);
  background-color: var(--color-background-raised);
  font-family: var(--font-family-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-extrabold);
}

.demo-notice p,
.demo-notice__title {
  margin: 0;
  max-inline-size: 60ch;
}

.demo-notice__title {
  font-size: var(--font-size-lg);
}

.demo-notice__pair {
  display: grid;
  gap: var(--space-2);
  max-inline-size: 60ch;
}

.demo-notice__do,
.demo-notice__dont {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-1);
  font-weight: var(--font-weight-semibold);
}

.demo-notice__do .demo-mark {
  color: var(--color-text-success);
}

.demo-notice__dont {
  color: var(--color-text-muted);
}

.demo-notice__dont .demo-mark {
  color: var(--color-text-error);
}

.demo-notice__checked {
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
}

/* Narrow screens: spec tables stack into labelled rows. */
@media (max-width: 40rem) {
  .demo-spec thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .demo-spec tr {
    display: grid;
    padding: var(--space-2) 0;
    border-block-end: var(--border-width-thin) solid var(--color-border-default);
  }

  .demo-spec th,
  .demo-spec td {
    display: block;
    padding: var(--space-1) var(--space-3);
    border: 0;
  }

  .demo-spec tbody th {
    white-space: normal;
  }

  .demo-spec td[data-label]::before {
    content: attr(data-label) ": ";
    content: attr(data-label) ": " / "";
    font-weight: var(--font-weight-bold);
  }
}

@media (min-width: 48rem) {
  .demo-sheet__head-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-10);
    align-items: center;
  }

  .demo-pick,
  .demo-notice__pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .demo-sheet__row {
    grid-template-columns: 6rem minmax(0, 1fr);
  }
}

@media (min-width: 64rem) {
  .demo-checks__pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.demo-fits code,
.demo-inventory-table code {
  overflow-wrap: normal;
  white-space: nowrap;
}

/* Booklet: links from the inventory and call-outs to each part sheet, and the fit panel. */
.demo-bag__link,
.demo-part__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-block-size: 2.75rem;
  color: inherit;
  text-decoration: none;
}

.demo-bag__link:hover code,
.demo-part__link:hover code {
  box-shadow: inset 0 0 0 var(--border-width-thick) var(--color-border-keyline);
}

/* Review fixes: the wrong piece stays visible, the inventory bag holds its table without a second box,
   the sticky rail never covers what receives focus. */
.demo-bag--wide .demo-spec table {
  border: 0;
  background-color: transparent;
}

.demo-code,
.demo-checks__card,
.demo-sheet__section {
  scroll-margin-block-start: var(--space-20);
}

/* Inventory: every layer's table shares one set of column widths, so the columns line up down the page. */
@media (min-width: 40rem) {
  .demo-inventory-table table {
    table-layout: fixed;
    inline-size: 100%;
  }

  .demo-inventory-table :is(th, td):nth-child(1) { inline-size: 24%; }
  .demo-inventory-table :is(th, td):nth-child(2) { inline-size: 16%; }
  .demo-inventory-table :is(th, td):nth-child(3) { inline-size: 10%; }
}

/* The page you're on, in the top bar. */
.demo-bar__links a[aria-current="page"] {
  color: var(--color-text-default);
  text-decoration: none;
  box-shadow: inset 0 calc(var(--border-width-thick) * -1) 0 var(--color-border-keyline);
}

/* Hero proof: the validator's first rejection, a glance before the build. */
.demo-proof {
  display: grid;
  gap: var(--space-2);
  max-inline-size: 36rem;
  margin-block-end: var(--space-6);
  padding: var(--space-4);
  background-color: var(--color-background-raised);
  border: var(--border-width-thick) dashed var(--color-border-error);
  border-radius: var(--border-radius-base);
}

.demo-proof p {
  margin: 0;
}

.demo-proof__key {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.demo-proof__verdict {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2);
  align-items: start;
  font-size: var(--font-size-sm);
  color: var(--color-text-error);
}

.demo-proof__verdict .demo-mark {
  width: 1.25rem;
  height: 1.25rem;
  margin-block-start: 0.05em;
}

.demo-proof a {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

/* Closing: what to take away, who made it, and whether it's the right kit. */
/* The last page of the booklet: two plates on the canvas. */
.demo-end {
  padding-block: var(--space-16);
}

.demo-end__plate {
  padding: var(--space-8) var(--space-6);
  background-color: var(--color-background-raised);
  border: var(--border-width-thick) solid var(--color-border-keyline);
  border-radius: var(--border-radius-base);
  box-shadow: var(--shadow-elevated);
}

.demo-end__grid {
  display: grid;
  gap: var(--space-10);
}

.demo-end__links {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.demo-end__links li {
  display: grid;
  gap: var(--space-1);
}

.demo-end__links a {
  font-weight: var(--font-weight-semibold);
}

.demo-end__links span {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.demo-end__author {
  padding-block-start: var(--space-4);
  border-block-start: var(--border-width-thin) solid var(--color-border-default);
  color: var(--color-text-muted);
}

.demo-end__fit-title {
  margin: 0;
  font-size: var(--font-size-xl);
}

.demo-end .demo-pick__col {
  box-shadow: var(--shadow-raised);
}

.demo-end .demo-pick__col--other {
  box-shadow: none;
}

@media (min-width: 60rem) {
  .demo-end__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
}

/* Copyable code on part sheets. */
.demo-code-block {
  position: relative;
  min-width: 0;
}

.demo-code-block .demo-code {
  padding-inline-end: 5.5rem;
}

.demo-code-block__copy {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-end: var(--space-2);
}

/* Folded tables: open when you need them. */
.demo-details > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 2.75rem;
  padding-inline: var(--space-2) var(--space-3);
  border-radius: var(--border-radius-base);
  color: var(--color-text-link);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}

.demo-details > summary:hover {
  background-color: var(--color-background-interactive-hover);
}

.demo-details__chevron {
  transition: transform var(--duration-fast) var(--ease-out);
}

.demo-details[open] .demo-details__chevron {
  transform: rotate(180deg);
}

.demo-details[open] > summary {
  margin-block-end: var(--space-3);
}

.demo-details__count {
  color: var(--color-text-default);
  display: inline-grid;
  place-items: center;
  min-inline-size: 1.75rem;
  padding: 0 var(--space-1);
  border-radius: var(--border-radius-full);
  background-color: var(--color-background-muted);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}

/* Bag titles are headings now: keep them at label size. */
.demo-bag__head {
  font-size: var(--font-size-base);
}

/* Sheet header: a small glyph plate, the name, and the finished part beside it. */
.demo-sheet__head .demo-sheet__plate {
  width: 4rem;
}

.demo-sheet__head .demo-sheet__plate .demo-glyph {
  width: 2.25rem;
  height: 2.25rem;
}

.demo-sheet__specimen {
  min-width: 0;
}

.demo-sheet__specimen .demo-stage {
  box-shadow: var(--shadow-elevated);
}

/* Phones: each step shows the result first, then the parts it used. */
@media (max-width: 59.99rem) {
  .demo-step__grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .demo-step__head {
    display: contents;
  }

  .demo-step__build {
    order: 1;
    margin-block: var(--space-6);
  }

  .demo-step__grid > .demo-step__head > .demo-callout {
    order: 2;
  }
}

/* The finale: a full-width band, one scale up from a step. */
.demo-wrong {
  padding-block: var(--space-20);
  background-color: var(--color-background-raised);
  border-block: var(--border-width-thick) solid var(--color-border-keyline);
}

.demo-wrong__head {
  display: grid;
  gap: var(--space-6);
  align-items: end;
}

.demo-wrong__title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-family-display);
  font-size: clamp(var(--font-size-3xl), 5vw, var(--font-size-5xl));
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
  letter-spacing: -0.02em;
}

.demo-wrong__pair {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

.demo-wrong__fit {
  padding: var(--space-6);
  background-color: var(--color-background-raised);
  border: var(--border-width-thick) solid var(--color-border-keyline);
  border-radius: var(--border-radius-base);
  box-shadow: var(--shadow-raised);
}

.demo-wrong .demo-check {
  border-style: dashed;
  box-shadow: none;
}

.demo-wrong__issues {
  counter-reset: none;
}

.demo-wrong__line {
  display: inline-block;
  min-inline-size: 3.5rem;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

@media (min-width: 60rem) {
  .demo-wrong__head {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-16);
  }

  .demo-wrong__pair {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.demo-end__proof {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.demo-wrong__pair > *,
.demo-wrong__head > * {
  min-width: 0;
}

/* ✓ panels: one column that can shrink, so opened markup scrolls inside the card, never the page. */
.demo-checks__card {
  grid-template-columns: minmax(0, 1fr);
}

.demo-checks__card--do {
  align-self: start;
}

/* The sticky rail never covers what receives focus or a jumped-to step (WCAG 2.4.11). */
@media (max-width: 99.99rem) {
  html {
    scroll-padding-block-start: 7rem;
  }
}

/* Current page link: keep the halo on focus, like every other stop. */
.demo-bar__links a[aria-current="page"]:focus-visible {
  box-shadow: 0 0 0 5px var(--color-focus-halo);
}

/* Links in the closing plate are full targets; each sits right on top of its description. */
.demo-end__links li {
  gap: 0;
}

.demo-end__links a,
.demo-part__row a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
}

/* Part sheet title: the glyph sits beside the name, as a mark, not a tile you could press. */
.demo-sheet__titlebar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.demo-sheet__mark .demo-glyph {
  width: 3rem;
  height: 3rem;
}

/* Sheet rails carry their section names once there's room. */
.demo-rail__text {
  display: none;
}

@media (min-width: 64rem) and (max-width: 99.99rem) {
  .demo-rail--labelled .demo-rail__stud {
    grid-auto-flow: column;
    gap: var(--space-2);
    width: auto;
    padding-inline: var(--space-2) var(--space-4);
  }

  .demo-rail--labelled .demo-rail__text {
    display: inline;
    font-family: var(--font-family-sans);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
  }

  .demo-rail--labelled .demo-rail__now {
    display: none;
  }
}

/* The closing plate echoes the finale: one seated brick and its result. */
.demo-end__recap {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-background-subtle);
  border-radius: var(--border-radius-base);
  font-weight: var(--font-weight-semibold);
}

.demo-seated-mini {
  flex: none;
  inline-size: 3rem;
  block-size: 2rem;
}