@layer components {
  /* Controls on the left, a sticky phone preview on the right */
  .theme-editor {
    display: grid;
    gap: var(--space-l);
    align-items: start;
    inline-size: 100%;

    @container main (inline-size > 56rem) {
      grid-template-columns: minmax(0, 1fr) 24.5rem;
    }
  }

  .theme-controls {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
  }

  .theme-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin: 0;
    padding: var(--space-s);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-l);
    background-color: var(--color-surface);

    & legend {
      float: left;
      inline-size: 100%;
      margin-block-end: var(--space-2xs);
      font-family: var(--font-display);
      font-size: var(--step-1);
    }
  }

  .theme-group__label {
    margin-block-start: var(--space-2xs);
    color: var(--color-text-muted);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .theme-group__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    margin-block-start: var(--space-2xs);
  }

  .theme-controls__actions {
    position: sticky;
    inset-block-end: var(--space-s);
    z-index: 2;
  }

  /* Option cards: a swatch plus a label, the radio itself is visually hidden */
  .choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
    gap: var(--space-2xs);
  }

  .choice {
    display: grid;
    justify-items: center;
    gap: var(--space-3xs);
    padding: var(--space-2xs);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-m);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);

    &:hover { border-color: var(--color-border-strong); }

    &:has(input:checked) {
      border-color: var(--color-accent);
      background-color: var(--color-accent-subtle);
    }

    &:has(input:focus-visible) { box-shadow: var(--focus-ring); }
  }

  .choice__swatch {
    display: grid;
    place-items: center;
    inline-size: 100%;
    block-size: 3rem;
    overflow: hidden;
    border-radius: var(--radius-s);
    background-color: var(--color-surface-sunken);
  }

  .choice__label {
    font-size: var(--step--1);
    font-weight: 560;
    text-align: center;
  }

  /* Preset swatches: accent dot on a tinted background */
  .preset-swatch {
    --swatch-hue: 155;
    --swatch-chroma: 0.07;
    background:
      radial-gradient(circle at 50% 50%, oklch(55% var(--swatch-chroma) var(--swatch-hue)) 0 0.85rem, transparent 0.9rem),
      oklch(95% calc(var(--swatch-chroma) * 0.4) var(--swatch-hue));

    &[data-mode="dark"] {
      background:
        radial-gradient(circle at 50% 50%, oklch(75% var(--swatch-chroma) var(--swatch-hue)) 0 0.85rem, transparent 0.9rem),
        oklch(22% calc(var(--swatch-chroma) * 0.3) var(--swatch-hue));
    }
  }

  .font-sample {
    font-size: 1.6rem;
    line-height: 1;
  }
  .font-sample--fraunces { font-family: "Fraunces Variable", serif; font-weight: 480; }
  .font-sample--playfair { font-family: "Playfair Display Variable", serif; font-weight: 600; }
  .font-sample--inter { font-family: var(--font-sans); font-weight: 750; letter-spacing: -0.03em; }
  .font-sample--bricolage { font-family: "Bricolage Grotesque Variable", sans-serif; font-weight: 720; }
  .font-sample--caveat { font-family: "Caveat Variable", cursive; font-weight: 650; font-size: 2rem; }

  .shape-sample {
    inline-size: 2.6rem;
    block-size: 1.7rem;
    background-color: var(--color-accent);
  }
  .shape-sample--rounded { border-radius: 0.5rem; }
  .shape-sample--squircle { border-radius: 0.8rem; corner-shape: squircle; }
  .shape-sample--square { border-radius: 0; }
  .shape-sample--pill { border-radius: 999px; }
  .shape-sample--leaf { border-radius: 0.9rem 0.15rem; }
  .shape-sample--bevel {
    clip-path: polygon(0.45rem 0, calc(100% - 0.45rem) 0, 100% 0.45rem, 100% calc(100% - 0.45rem), calc(100% - 0.45rem) 100%, 0.45rem 100%, 0 calc(100% - 0.45rem), 0 0.45rem);
  }

  .background-sample--plain { background: var(--color-surface-sunken); }
  .background-sample--glow {
    background: radial-gradient(circle at 50% 0%, color-mix(in oklab, var(--color-accent) 35%, transparent), transparent 75%), var(--color-surface-sunken);
  }
  .background-sample--dots {
    background: radial-gradient(color-mix(in oklab, var(--color-accent) 45%, transparent) 1.2px, transparent 1.7px) 0 0 / 10px 10px, var(--color-surface-sunken);
  }
  .background-sample--grid {
    background:
      linear-gradient(color-mix(in oklab, var(--color-accent) 25%, transparent) 1px, transparent 1px) 0 0 / 12px 12px,
      linear-gradient(90deg, color-mix(in oklab, var(--color-accent) 25%, transparent) 1px, transparent 1px) 0 0 / 12px 12px,
      var(--color-surface-sunken);
  }

  /* Radio buttons styled as a segmented control */
  .segmented__option--radio {
    cursor: pointer;

    &:has(input:checked) {
      background-color: var(--color-surface);
      color: var(--color-text);
      box-shadow: var(--shadow-s);
    }

    &:has(input:focus-visible) { box-shadow: var(--focus-ring); }
  }

  /* Sliders */
  .slider-field {
    display: grid;
    gap: var(--space-3xs);
    font-size: var(--step--1);
    font-weight: 560;
  }

  .slider {
    --track: linear-gradient(to right, var(--color-surface-sunken), var(--color-accent));
    inline-size: 100%;
    block-size: 1.75rem;
    margin: 0;
    appearance: none;
    background: transparent;
    cursor: pointer;

    &::-webkit-slider-runnable-track {
      block-size: 0.6rem;
      border-radius: var(--radius-full);
      background: var(--track);
      box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-text) 10%, transparent);
    }
    &::-moz-range-track {
      block-size: 0.6rem;
      border-radius: var(--radius-full);
      background: var(--track);
    }
    &::-webkit-slider-thumb {
      appearance: none;
      inline-size: 1.4rem;
      block-size: 1.4rem;
      margin-block-start: -0.4rem;
      border: 3px solid #fff;
      border-radius: 50%;
      background: var(--color-text);
      box-shadow: var(--shadow-m);
    }
    &::-moz-range-thumb {
      inline-size: 1.1rem;
      block-size: 1.1rem;
      border: 3px solid #fff;
      border-radius: 50%;
      background: var(--color-text);
      box-shadow: var(--shadow-m);
    }

    &:focus-visible {
      box-shadow: none;

      &::-webkit-slider-thumb { box-shadow: var(--focus-ring); }
      &::-moz-range-thumb { box-shadow: var(--focus-ring); }
    }
  }

  /* The full hue circle, interpolated in OKLCH so every color is equally bright */
  .slider--hue {
    --track: linear-gradient(to right in oklch longer hue, oklch(65% 0.16 0), oklch(65% 0.16 0));
  }

  /* From grey to the chosen hue at full intensity */
  .slider--chroma {
    --track: linear-gradient(to right, oklch(62% 0 var(--theme-hue, 155)), oklch(62% 0.2 var(--theme-hue, 155)));
  }

  /* Phone frame for the live preview */
  .theme-preview {
    position: sticky;
    inset-block-start: calc(3.75rem + var(--space-s));
    inline-size: 100%;
    display: grid;
    justify-items: center;
  }

  .phone {
    inline-size: 100%;
    max-inline-size: 24.5rem;
    padding: 0.7rem;
    border-radius: 3rem;
    background: oklch(18% 0.005 70);
    box-shadow: var(--shadow-l), inset 0 0 0 2px oklch(35% 0.005 70);
  }

  .phone__screen {
    block-size: min(46rem, 80dvh);
    overflow-y: auto;
    border-radius: 2.4rem;
    scrollbar-width: none;
  }

  .phone__page {
    min-block-size: 100%;
    padding-block: var(--space-l);
  }
}