/* Demo-page styles. Same contract as the library: layered, semantic tokens only. */
@layer components {
  /* --- Toolbar ------------------------------------------------------------ */
  .toolbar {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky);
    border-block-end: var(--border-width) solid var(--color-border-subtle);
    background-color: var(--color-surface);
  }

  .toolbar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2xs) var(--space-sm);
    padding-block: calc(var(--space-2xs) - var(--border-width)) var(--space-2xs);
  }

  .toolbar__brand {
    font-size: var(--step-1);
    line-height: var(--leading-1);
    font-weight: var(--weight-bold);
    color: var(--color-text-main);
    text-decoration: none;
  }

  .toolbar__select .input {
    inline-size: auto;
  }

  .toolbar__check {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    font-size: var(--step--1);
    line-height: var(--leading--1);
  }

  /* --- Page sections ------------------------------------------------------ */
  main > * + * {
    margin-block-start: 0;
  }

  .band {
    padding-block: var(--space-xl);
    background-color: var(--color-surface-sunken);
  }

  main > section.container {
    padding-block: var(--space-xl);
  }

  .section-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
  }

  .footer {
    padding-block: var(--space-lg);
    border-block-start: var(--border-width) solid var(--color-border-subtle);
  }

  /* --- Golden spiral frame -------------------------------------------------- */
  .spiral {
    margin: 0;
    padding: var(--space-xs);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface-sunken);
    border: var(--border-width) solid var(--color-border-container);
  }

  .spiral svg {
    overflow: visible;
    object-fit: contain;
  }

  .spiral__squares rect {
    fill: none;
    stroke: var(--color-border);
    stroke-width: 0.4;
  }

  .spiral__squares rect:first-child {
    fill: var(--color-action-subtle);
  }

  .spiral__curve {
    fill: none;
    stroke: var(--color-action);
    stroke-width: 1.2;
    stroke-linecap: round;
  }

  .spiral__labels text {
    fill: var(--color-text-muted);
    font-size: 6px;
    text-anchor: middle;
    font-weight: var(--weight-semibold);
  }

  /* --- Layer proof -------------------------------------------------------- */
  .layer-proof {
    display: flex;
    align-items: center;
    min-block-size: var(--space-lg);
    padding-inline: var(--space-xs);
    border: var(--border-width) dashed var(--color-border);
    border-radius: var(--radius-md);
  }

  /* --- Token chain ----------------------------------------------------------- */
  .token-chain {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: 0;
  }

  .token-chain li {
    display: grid;
    grid-template-columns: 7rem 1fr;
    column-gap: var(--space-2xs);
    align-items: center;
  }

  .token-chain .card__meta {
    grid-column: 2;
  }

  .token-chain .badge {
    justify-self: start;
  }

  /* --- Space scale ------------------------------------------------------------ */
  .space-scale {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding: 0;
  }

  .space-scale li {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--step--1);
    line-height: var(--leading--1);
  }

  .space-scale__bar {
    block-size: var(--space-2xs);
    border-radius: var(--radius-sm);
    background-color: var(--color-action);
    max-inline-size: 100%;
  }

  .space-scale__label code {
    color: var(--color-text-main);
  }

  .space-scale__label span {
    display: block;
    color: var(--color-text-muted);
  }

  @media (forced-colors: active) {
    .space-scale__bar {
      background-color: CanvasText;
      forced-color-adjust: none;
    }
  }

  /* --- Type scale ------------------------------------------------------------- */
  .type-scale {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding: 0;
    overflow: hidden;
  }

  .type-scale li {
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
    white-space: nowrap;
  }

  .type-scale__meta {
    flex: none;
    inline-size: 5.5rem;
    font-size: var(--step--1);
    line-height: var(--leading--1);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
  }

  .type-scale__sample {
    font-weight: var(--weight-bold);
    letter-spacing: -0.01em;
  }

  /* --- Swatches ---------------------------------------------------------------- */
  .swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: var(--space-xs);
  }

  .swatch {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding: calc(var(--space-xs) - var(--border-width));
    border: var(--border-width) solid var(--color-border-subtle);
    border-radius: var(--radius-md);
  }

  .swatch__sample {
    font-size: var(--step-2);
    line-height: var(--leading-2);
    font-weight: var(--weight-bold);
  }

  .swatch__name {
    font-size: var(--step--1);
    line-height: var(--leading--1);
    font-family: var(--font-mono);
  }

  .swatch__ratio {
    display: flex;
    gap: var(--space-2xs);
    align-items: center;
    font-size: var(--step--1);
    line-height: var(--leading--1);
    font-variant-numeric: tabular-nums;
  }

  /* --- Chart extras --------------------------------------------------------------- */
  .chart.card {
    margin: 0;
  }

  .chart details {
    font-size: var(--step--1);
    line-height: var(--leading--1);
  }

  .chart summary {
    cursor: pointer;
    color: var(--color-link);
    font-weight: var(--weight-semibold);
  }

  .chart .table-scroll {
    margin-block-start: var(--space-2xs);
  }

  /* --- Layout playground ---------------------------------------------------------- */
  .layout-demo {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    margin: 0;
  }

  .layout-demo figcaption {
    font-size: var(--step--1);
    line-height: var(--leading--1);
    color: var(--color-text-muted);
  }

  /* Drag the corner to resize; the width readout comes from demo.js. */
  .stage {
    position: relative;
    inline-size: 100%;
    min-inline-size: 12rem;
    max-inline-size: 100%;
    padding: calc(var(--space-xs) - var(--border-width));
    padding-block-start: var(--space-md);
    border: var(--border-width) dashed var(--color-border);
    border-radius: var(--radius-md);
    resize: horizontal;
    overflow: hidden;
  }

  .stage[data-scroll] {
    max-block-size: 24rem;
    overflow: auto;
  }

  .stage::before {
    content: attr(data-width);
    position: absolute;
    inset-block-start: var(--space-3xs);
    inset-inline-end: var(--space-2xs);
    font-size: var(--step--1);
    line-height: var(--leading--1);
    font-family: var(--font-mono);
    color: var(--color-text-muted);
  }

  .demo-block {
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--space-lg);
    padding: calc(var(--space-2xs) - var(--border-width));
    border: var(--border-width) solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background-color: var(--color-action-subtle);
    color: var(--color-text-main);
    font-size: var(--step--1);
    line-height: var(--leading--1);
    font-weight: var(--weight-semibold);
    text-align: center;
  }

  .demo-block[data-tall] {
    min-block-size: var(--space-2xl);
  }

  /* CVD simulation target */
  main[data-cvd="protanopia"]    { filter: url(#cvd-protanopia); }
  main[data-cvd="deuteranopia"]  { filter: url(#cvd-deuteranopia); }
  main[data-cvd="tritanopia"]    { filter: url(#cvd-tritanopia); }
  main[data-cvd="achromatopsia"] { filter: url(#cvd-achromatopsia); }
}