/* 603010rule.com: the tool, the Read/Swatch views and the swatch tray. */
@layer themes {
  :root {
    --tray-shadow: 0 8px 28px oklch(0% 0 0 / 0.18);
    /* Until tray.js reads the saved palette: the default one. */
    --p60: #F3EFE6; --p30: #D9D1C3; --p10: #233B82;
    --ink60: #111111; --ink30: #111111; --ink10: #FFFFFF;
  }

  /* ---------- Read / Swatch switch ---------- */
  .mode-switch {
    display: inline-flex;
    border: var(--kw-border);
    border-radius: var(--radius-pill);
    padding: 2px;
    background: var(--color-background);
  }
  .mode-switch__btn {
    min-block-size: 2.5rem;
    min-inline-size: 4.5rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text);
    padding-inline: var(--space-s);
    cursor: pointer;
  }
  .mode-switch__btn[aria-pressed="true"] { background: var(--color-text); color: var(--color-background); }

  /* ---------- Swatch view ----------
     The viewport is the palette at 60/30/10. The page wears the 60: its background is the
     60 color and its text the ink that reads on it. The 30 and 10 stay as full-height bands
     beside it in landscape (left to right) and as bands below it in portrait (top to bottom);
     the page scrolls under them. tray.js sets --p60/--p30/--p10 and their inks. */
  .swatch-stage { display: none; }
  html[data-mode="swatch"] {
    --color-background: var(--p60);
    --color-surface: color-mix(in oklab, var(--ink60) 6%, var(--p60));
    --color-surface-raised: color-mix(in oklab, var(--ink60) 9%, var(--p60));
    --color-text: var(--ink60);
    --color-text-muted: color-mix(in oklab, var(--ink60) 72%, var(--p60));
    --color-text-subtle: color-mix(in oklab, var(--ink60) 60%, var(--p60));
    --color-border: color-mix(in oklab, var(--ink60) 30%, var(--p60));
    --color-border-subtle: color-mix(in oklab, var(--ink60) 16%, var(--p60));
    --color-border-strong: color-mix(in oklab, var(--ink60) 55%, var(--p60));
    --accent: var(--p10);
    --accent-ink: var(--ink60);
    --on-accent: var(--ink10);
    background: var(--p60);
  }
  html[data-mode="swatch"] body,
  html[data-mode="swatch"] :is(.site-header, .kw-section, .kw-section[data-bg="tinted"], .kw-footer, .rule-card) {
    background: transparent;
  }
  html[data-mode="swatch"] .swatch-stage {
    display: grid;
    position: fixed;
    inset: 0;
    z-index: 40;            /* above the page, under the tray */
    pointer-events: none;   /* the 60 band is a window onto the page */
    grid-template-columns: 60fr 30fr 10fr;
  }
  html[data-mode="swatch"] .swatch-stage__band[data-band="0"] { background: transparent !important; }
  /* The 60 is the page itself: say so, in a chip at the foot of the 60 area. */
  html[data-mode="swatch"] .swatch-stage__band[data-band="0"] .swatch-stage__label { display: none; }
  .swatch-60-chip { display: none; }
  html[data-mode="swatch"] .swatch-60-chip {
    display: inline-block; padding: 0.2rem 0.5rem; font-family: var(--font-mono); font-size: var(--step--2);
    border: 1px solid var(--color-border-strong);
  }
  /* Landscape: the page lives in the 60 column. */
  html[data-mode="swatch"] body > :is(.site-header, main, .kw-footer) { inline-size: 60vw; }
  html[data-mode="swatch"] main { container-type: inline-size; }
  /* In the 60 column the links get their own row under the logo, the view switch and the palette. */
  html[data-mode="swatch"] .site-header .nav__list { order: 3; flex: 1 0 100%; }
  @media (orientation: portrait) {
    html[data-mode="swatch"] .swatch-stage { grid-template-columns: 1fr; grid-template-rows: 60fr 30fr 10fr; }
    html[data-mode="swatch"] body > :is(.site-header, main, .kw-footer) { inline-size: auto; }
    html[data-mode="swatch"] body { padding-block-end: 40vh; }   /* the page can scroll fully into the 60 */
  }
  .swatch-stage__band { position: relative; transition: background-color 0.3s ease; }
  .swatch-stage__label {
    position: absolute;
    inset-inline: var(--space-s);
    inset-block-start: var(--space-s);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
  @media (orientation: landscape) {
    .swatch-stage__band[data-band="2"] .swatch-stage__label { writing-mode: vertical-rl; inset-inline: auto; inset-inline-end: 0.6rem; }
  }

  /* ---------- swatch tray (in the header; the body drops down) ---------- */
  .tray { position: relative; }
  .tray__handle {
    display: inline-flex; align-items: center; gap: var(--space-xs);
    min-block-size: 2.75rem; padding-inline: var(--space-s);
    border: var(--kw-border); border-radius: var(--radius-pill);
    background: var(--color-background); color: var(--color-text);
    font: inherit; font-size: var(--step--2); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em;
    cursor: pointer;
  }
  .tray__handle[aria-expanded="true"] { border-color: var(--color-text); }
  .tray__mini { display: inline-flex; overflow: hidden; outline: 1px solid var(--color-border-strong); }
  .tray__mini span { display: block; block-size: 1rem; }
  .tray__mini span:nth-child(1) { inline-size: 1.5rem; }
  .tray__mini span:nth-child(2) { inline-size: 0.75rem; }
  .tray__mini span:nth-child(3) { inline-size: 0.25rem; }
  .tray__body {
    position: absolute; z-index: 60; inset-block-start: calc(100% + 0.5rem); inset-inline-end: 0;
    inline-size: min(30rem, calc(100vw - 2 * var(--space-s)));
    padding: var(--space-s);
    background: var(--color-background); border: var(--kw-border); box-shadow: var(--tray-shadow);
  }
  .tray__swatches { display: flex; block-size: 5rem; overflow: hidden; box-shadow: var(--kw-swatch-shadow); }
  .tray__swatch {
    position: relative; flex-basis: 0; min-inline-size: 2.75rem;
    background: var(--swatch); color: var(--ink);
    display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-xs);
    cursor: pointer; font-size: var(--step--2);
  }
  .tray__swatch:focus-within { outline: 3px solid var(--color-focus); outline-offset: -3px; }
  .tray__pct { font-weight: 700; }
  .tray__codes { font-family: var(--font-mono); font-size: var(--step--1); margin-block: var(--space-xs) 0; }
  .tray__picker { position: absolute; inset: 0; opacity: 0; inline-size: 100%; block-size: 100%; cursor: pointer; }
  .tray__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; margin-block-start: var(--space-s); }
  .tray__actions .button { font-size: var(--step--2); min-block-size: 2.75rem; padding-inline: var(--space-s); }
  .tray__status { font-size: var(--step--1); color: var(--color-text-muted); }
  .site-header .nav { align-items: center; }
  .site-header .nav__list li { margin: 0; }
  .site-header .mode-switch { margin-inline-start: auto; }
  /* Laptop widths: the palette button shows only its swatches so the header stays on one row. */
  @media (max-width: 80rem) {
    .tray__handle { padding-inline: 0.7rem; }
    .tray__handle-text { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .site-header .nav { column-gap: var(--space-s); }
    .site-header .nav__list { column-gap: 0.8rem; }
    .site-header .nav__link { letter-spacing: 0.06em; }
    .mode-switch__btn { min-inline-size: 3.8rem; padding-inline: 0.6rem; }
  }

  /* ---------- tool ---------- */
  :is(.tool-hero, .tool, .prose-page) { padding-inline: var(--page-edge); }
  .tool-hero { padding-block: var(--space-l) var(--space-xs); }
  .tool-hero h1 { font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.6rem); line-height: 1.02; margin-block: var(--space-xs) var(--space-s); }
  .tool-hero__lede { max-inline-size: 70ch; font-size: var(--step-0); }
  main { container-type: inline-size; }
  .tool { padding-block: var(--space-m) var(--space-xl); }
  .tool-noscript { padding: var(--space-s); border: var(--kw-border); }
  .tool__grid { display: grid; gap: var(--space-l); grid-template-columns: 1fr; }
  @container (min-width: 52rem) { .tool__grid { grid-template-columns: minmax(18rem, 2fr) 3fr; align-items: start; } }
  /* Role cards: a big swatch, its shades and a texture chip, the code, and quiet actions. */
  .roles { display: grid; gap: var(--space-s); }
  .role {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    grid-template-areas: "swatch body" "shades body";
    column-gap: var(--space-s);
    border: var(--kw-border);
    background: var(--color-background);
  }
  .role__swatch { grid-area: swatch; position: relative; display: block; block-size: 5.5rem; background: var(--swatch); box-shadow: var(--kw-swatch-shadow); cursor: pointer; }
  .role__swatch:focus-within { outline: 3px solid var(--color-focus); outline-offset: -3px; }
  .role__swatch input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: 0; cursor: pointer; }
  .role__shades { grid-area: shades; display: grid; grid-template-columns: repeat(5, 1fr); block-size: 1.1rem; }
  .role__tex[data-tex="stucco"] { background-image: radial-gradient(oklch(0% 0 0 / .22) 1px, transparent 1.4px); background-size: 6px 6px; }
  .role__tex[data-tex="knit"] { background-image: repeating-linear-gradient(45deg, oklch(0% 0 0 / .18) 0 1px, transparent 1px 4px), repeating-linear-gradient(-45deg, oklch(0% 0 0 / .18) 0 1px, transparent 1px 4px); }
  .role__tex[data-tex="stripes"] { background-image: repeating-linear-gradient(-45deg, oklch(100% 0 0 / .35) 0 2px, transparent 2px 6px); }
  .role__body { grid-area: body; display: grid; gap: 0.2rem; align-content: center; padding-block: var(--space-xs); padding-inline-end: var(--space-xs); }
  .role__name { margin: 0; font-size: var(--step--1); }
  .role__where { color: var(--color-text-muted); }
  .role__hex { font-family: var(--font-mono); max-inline-size: 8.5rem; min-block-size: 2.4rem; padding-block: 0.2rem; }
  .role__hex[aria-invalid="true"] { border-color: var(--color-error); }
  .role__meta { font-size: var(--step--2); color: var(--color-text-muted); }
  .link-button {
    justify-self: start;
    border: 0; padding: 0.35rem 0; min-block-size: 2rem;
    background: none; color: var(--color-text);
    font: inherit; font-size: var(--step--1); text-transform: none; letter-spacing: 0; font-weight: 500;
    text-decoration: underline; text-decoration-color: var(--color-border-strong); text-underline-offset: 0.2em;
    cursor: pointer;
  }
  .link-button:hover { text-decoration-color: currentColor; }
  .roles__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-m); margin-block: var(--space-s) var(--space-m); font-size: var(--step--1); }
  /* Remix menu: our own listbox, each style previewed as a 60/30/10 bar. */
  .remix { position: relative; }
  .remix__toggle {
    display: inline-flex; align-items: center; gap: var(--space-xs);
    min-block-size: 2.75rem; padding-inline: var(--space-s);
    border: var(--kw-border); background: var(--color-background); color: var(--color-text);
    font: inherit; font-size: var(--step--1); text-transform: none; letter-spacing: 0; font-weight: 400; cursor: pointer;
  }
  .remix__toggle[aria-expanded="true"] { border-color: var(--color-text); }
  .remix__caret { inline-size: 0.5rem; block-size: 0.5rem; border-inline-end: 2px solid; border-block-end: 2px solid; transform: rotate(45deg) translateY(-2px); margin-inline-start: 0.25rem; }
  .remix__bar { display: inline-flex; inline-size: 3.5rem; block-size: 1.1rem; flex: none; outline: 1px solid var(--color-border); outline-offset: -1px; }
  .remix__bar span { flex-basis: 0; }
  .remix__panel {
    position: absolute; z-index: 30; inset-block-start: calc(100% + 0.35rem); inset-inline-start: 0;
    inline-size: min(24rem, 90vw); padding: var(--space-xs);
    background: var(--color-background); border: var(--kw-border); box-shadow: var(--tray-shadow);
  }
  .remix__keep { display: flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.4rem var(--space-xs); font-size: var(--step--1); color: var(--color-text-muted); }
  .remix__keep button {
    min-inline-size: 2.75rem; min-block-size: 2.25rem; border: var(--kw-border); background: transparent; color: var(--color-text);
    font: inherit; font-weight: 600; cursor: pointer; text-transform: none; letter-spacing: 0;
  }
  .remix__keep button[aria-pressed="true"] { background: var(--color-text); color: var(--color-background); border-color: var(--color-text); }
  .remix__list { list-style: none; margin: 0; padding: 0; outline: none; }
  .remix__list [role="option"] {
    display: grid; grid-template-columns: 5.5rem auto 1fr; align-items: center; gap: var(--space-xs);
    padding: 0.55rem 0.5rem; cursor: pointer; font-size: var(--step--1);
  }
  .remix__list [role="option"] .remix__bar { inline-size: 5.5rem; block-size: 1.6rem; }
  .remix__list [role="option"]:hover, .remix__list [data-active] { background: var(--color-surface); }
  .remix__list:focus-visible [data-active] { outline: 2px solid var(--color-focus); outline-offset: -2px; }
  .remix__list [aria-selected="true"] .remix__name::after { content: " ✓"; }
  .remix__name { font-weight: 600; }
  .remix__note { color: var(--color-text-muted); font-size: var(--step--2); }
  .roles__status { color: var(--color-text-muted); }

  .starters { margin-block-end: var(--space-m); }
  .starters__head { margin-block: 0 var(--space-xs); font-size: var(--step--1); }
  .starters__head a { margin-inline-start: var(--space-s); }
  .starters__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--space-xs); }
  .starter {
    inline-size: 100%; display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; justify-items: stretch; gap: 0.3rem; padding: 0.4rem; text-align: start; min-block-size: 0;
    border: var(--kw-border); background: var(--color-background); color: var(--color-text); cursor: pointer;
    font: inherit; font-size: var(--step--2); text-transform: none; letter-spacing: 0; font-weight: 500;
  }
  .starter:hover { border-color: var(--color-text); }
  .starter__bar { display: flex; inline-size: 100%; block-size: 1.8rem; outline: 1px solid var(--color-border); outline-offset: -1px; }
  .starter__name { text-align: start; overflow-wrap: anywhere; }
  .starter__bar span { flex-basis: 0; }

  .preview-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-s); margin-block-end: var(--space-s); }
  .preview-bar .tabs { margin: 0; }
  .light-control { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--step--1); color: var(--color-text-muted); }
  .light-control input { inline-size: 9rem; accent-color: var(--color-text); }
  .tool__hint { font-size: var(--step--1); color: var(--color-text-muted); }
  .tabs { display: flex; gap: var(--space-xs); flex-wrap: wrap; margin-block-end: var(--space-s); }
  .tabs label {
    display: inline-flex; align-items: center; gap: 0.4rem;
    min-block-size: 2.75rem; padding-inline: var(--space-s);
    border: var(--kw-border); border-radius: var(--radius-pill); cursor: pointer;
  }
  .tabs label:has(input:checked) { background: var(--color-text); color: var(--color-background); }
  /* The photo tab is a call to action: the accent, not the outline. */
  .tabs .tabs__cta { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
  .tabs .tabs__cta:has(input:checked) { background: var(--color-text); color: var(--color-background); border-color: var(--color-text); }
  .tabs input { accent-color: currentColor; }
  .scene { margin: 0; }
  .scene__art { border: var(--kw-border); background: var(--color-surface); }
  .scene__art svg { display: block; inline-size: 100%; block-size: auto; max-block-size: 70vh; margin-inline: auto; }
  .scene__measure { font-size: var(--step--1); color: var(--color-text-muted); margin-block-start: var(--space-xs); font-variant-numeric: tabular-nums; }

  .export { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
  .export__status { font-size: var(--step--1); color: var(--color-text-muted); }
  .export__preview:empty { display: none; }
  .export__preview { margin-block-start: var(--space-s); padding: var(--space-s); border: var(--kw-border); background: var(--color-surface); overflow-x: auto; font-size: var(--step--1); }

  .photo__drop {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-xs);
    padding: var(--space-l); border: 2px dashed var(--color-border-strong); cursor: pointer; text-align: center;
  }
  .photo__drop.is-over { background: var(--color-surface); }
  .photo__drop:focus-within { outline: 3px solid var(--color-focus); outline-offset: 2px; }
  .photo__hint { font-size: var(--step--1); color: var(--color-text-muted); }
  .photo { container-type: inline-size; }
  .photo__result { display: grid; gap: var(--space-m); margin-block-start: var(--space-m); }
  @container (min-width: 40rem) { .photo__result { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; } }
  .photo-slot .photo__drop { padding: var(--space-m); }
  .photo-home__moved { padding: var(--space-s); border: var(--kw-border); }
  .photo__stage { position: relative; }
  .photo__canvas { display: block; inline-size: 100%; block-size: auto; border: var(--kw-border); cursor: crosshair; touch-action: none; }
  .photo__canvas:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
  .photo__tip { font-size: var(--step--1); color: var(--color-text-muted); margin-block-start: var(--space-xs); }
  .loupe {
    position: absolute; z-index: 5; inline-size: 110px; block-size: 110px; pointer-events: none;
    border-radius: 50%; overflow: hidden; border: 4px solid var(--hex, #fff); box-shadow: 0 6px 18px oklch(0% 0 0 / .35);
  }
  .loupe canvas { display: block; }
  .loupe__hex { position: absolute; inset-inline: 0; inset-block-end: 8px; text-align: center; font-family: var(--font-mono); font-size: 11px; color: #fff; text-shadow: 0 0 3px #000; }
  .picked { display: flex; align-items: center; gap: var(--space-s); flex-wrap: wrap; padding: var(--space-s); border: var(--kw-border); margin-block-end: var(--space-s); }
  .picked__chip { inline-size: 3rem; block-size: 3rem; background: var(--hex); box-shadow: var(--kw-swatch-shadow); }
  .picked__note { font-size: var(--step--1); color: var(--color-text-muted); }
  .picked__use { margin-inline-start: auto; font-size: var(--step--1); display: inline-flex; gap: var(--space-xs); align-items: center; }
  .photo__bar { display: flex; block-size: 3rem; overflow: hidden; box-shadow: var(--kw-swatch-shadow); margin-block: var(--space-s); }
  .photo__bar span { flex-basis: 0; }
  .photo__list { list-style: none; padding: 0; display: grid; gap: var(--space-2xs); margin-block-end: var(--space-s); }
  .photo__list li { display: flex; align-items: center; gap: var(--space-xs); font-variant-numeric: tabular-nums; flex-wrap: wrap; }
  .photo__share { min-inline-size: 2.5rem; }
  .photo__use { margin-inline-start: auto; font-size: var(--step--1); color: var(--color-text-muted); display: inline-flex; gap: 0.4rem; align-items: center; }
  .photo__use .link-button { min-inline-size: 2rem; text-align: center; }
  .photo__chip { inline-size: 1.5rem; block-size: 1.5rem; box-shadow: var(--kw-swatch-shadow); }

  .rule-cards { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
  .rule-card { border: var(--kw-border); padding: var(--space-m); background: var(--color-background); }
  .rule-card h3 { margin-block-start: 0; }

  .kw-footer__about { font-size: var(--step--1); color: var(--color-text-muted); margin-block: 0 var(--space-s); }

  /* Pages carried over from the draft keep their header; the nav must leave room for the switch.
     On a phone the links scroll sideways in one row instead of wrapping into three. */
  .site-header .nav { row-gap: var(--space-xs); }
  @media (max-width: 47.99rem) {
    .site-header .nav__list { order: 3; flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: var(--space-s); }
    .site-header .nav__link { white-space: nowrap; }
  }


  /* Starter palette links */
  .use-palette { margin-block-start: var(--space-xs); }

  /* Plain text pages (about, FAQ, privacy, terms, status) */
  .prose-page { padding-block: var(--space-xl); }
  .prose-page > * { max-inline-size: 68ch; }
  .prose-page h1 { font-size: clamp(2.2rem, 1.6rem + 2.5vw, 3.6rem); }
}

@layer themes {
  /* Guide endings: the next guide first, then the references as the very last thing (Neil, 2026-11-05). */
  .next-guide {
    margin-block: var(--space-l) var(--space-m);
    padding-block-start: var(--space-s);
    border-block-start: var(--kw-border);
    font-weight: 600;
  }
  .references { margin-block-start: var(--space-m); font-size: var(--step--1); color: var(--color-text-muted); }
  .references__title { margin: 0 0 var(--space-2xs); font-size: var(--step--2); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; }
  .references__list { margin: 0; padding-inline-start: 1.4em; }
  .references__list a { color: var(--color-text); }
}

@layer themes {
  /* Logo study: six marks, each drawn in the live palette (--p60/--p30/--p10 from tray.js). */
  .study__pick { color: var(--color-text-muted); }
  .study__grid { list-style: none; padding: 0; margin: var(--space-l) 0; display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); max-inline-size: none; }
  .study.prose-page > .study__grid { max-inline-size: none; }
  .study__card { border: var(--kw-border); padding: var(--space-m); display: grid; gap: var(--space-xs); align-content: start; }
  .study__card.is-mine { border-color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-text); }
  .study__stage { display: flex; align-items: center; gap: 0.7rem; min-block-size: 6rem; padding: var(--space-s); background: var(--color-surface); overflow: hidden; font-family: var(--font-heading); font-size: clamp(1.3rem, 1rem + 0.8vw, 1.7rem); font-weight: calc(var(--weight-display) + var(--_dark-weight, 0)); }
  .study__name { font-size: var(--step-0); margin: var(--space-xs) 0 0; font-family: var(--font-body); font-weight: 700; }
  .study__tag { font-weight: 400; color: var(--color-text-muted); font-size: var(--step--1); }
  .study__note { margin: 0; font-size: var(--step--1); color: var(--color-text-muted); }
  .study__vote { display: flex; align-items: center; gap: var(--space-s); flex-wrap: wrap; margin-block-start: var(--space-xs); }
  .study__vote .button[aria-pressed="true"] { background: var(--color-text); border-color: var(--color-text); color: var(--color-background); }
  .study__result { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--step--1); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
  .study__meter { inline-size: 6rem; block-size: 0.5rem; background: var(--color-border-subtle); }
  .study__meter span { display: block; block-size: 100%; inline-size: 0; background: var(--color-text); transition: inline-size 0.3s ease; }
  .study__fine { font-size: var(--step--1); color: var(--color-text-muted); }

  .logo { flex: none; outline: 1px solid var(--color-border-strong); outline-offset: -1px; }
  .logo--squares { display: inline-flex; gap: 3px; outline: none; }
  .logo--squares span { inline-size: 0.6em; block-size: 1em; outline: 1px solid var(--color-border-strong); outline-offset: -1px; }
  .logo--squares span:nth-child(1), .logo--bar span:nth-child(1), .logo--nested { background: var(--p60); }
  .logo--squares span:nth-child(2), .logo--bar span:nth-child(2), .logo--nested > span { background: var(--p30); }
  .logo--squares span:nth-child(3), .logo--bar span:nth-child(3), .logo--nested > span > span { background: var(--p10); }
  .logo--bar { display: inline-flex; inline-size: 2.4em; block-size: 1em; }
  .logo--bar span:nth-child(1) { flex: 60; }
  .logo--bar span:nth-child(2) { flex: 30; }
  .logo--bar span:nth-child(3) { flex: 10; }
  .logo--ring {
    inline-size: 1.5em; block-size: 1.5em; border-radius: 50%; outline: none;
    background: conic-gradient(var(--p60) 0 60%, var(--p30) 0 90%, var(--p10) 0);
    -webkit-mask: radial-gradient(circle, transparent 38%, #000 39%); mask: radial-gradient(circle, transparent 38%, #000 39%);
    box-shadow: 0 0 0 1px var(--color-border-strong);
  }
  /* D and E: grid columns in true 60:30:10 proportions; the text sits in the 60. */
  .logo--box { display: inline-grid; grid-template-columns: 60fr 30fr 10fr; font-size: 0.8em; }
  .logo--box .logo__boxword { padding: 0.15em 0.4em; background: var(--p60); color: var(--ink60); white-space: nowrap; }
  .logo--box span:nth-child(2) { background: var(--p30); }
  .logo--box span:nth-child(3) { background: var(--p10); }
  .logo--numbers { display: inline-grid; grid-template-columns: 60fr 30fr 10fr; font-family: var(--font-body); font-size: 0.7em; font-weight: 700; }
  .logo--numbers span { padding: 0.15em 0.35em; text-align: center; }
  .logo--numbers span:nth-child(1) { background: var(--p60); color: var(--ink60); }
  .logo--numbers span:nth-child(2) { background: var(--p30); color: var(--ink30); }
  .logo--numbers span:nth-child(3) { background: var(--p10); }
  .logo__ten { font-family: var(--font-body); font-size: 0.7em; font-weight: 700; margin-inline-start: -0.4rem; }
  /* F: side lengths 1, √0.4 and √0.1, so the visible areas are 60%, 30% and 10%. */
  .logo--nested { display: grid; place-items: center; inline-size: 1.3em; block-size: 1.3em; }
  .logo--nested > span { display: grid; place-items: center; inline-size: 63.25%; block-size: 63.25%; }
  .logo--nested > span > span { display: block; inline-size: 50%; block-size: 50%; }
}

@layer themes {
  /* ---------- Layout audit fixes, 2026-11-05 (this site's own CSS) ---------- */

  /* Starter cards are buttons: let long names wrap (the theme keeps real buttons on one line). */
  .starter, .starter__name { white-space: normal; }
  /* Eight across when there is room (container, so Swatch view's narrower column gets four). */
  .starters__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  @container (min-width: 70rem) { .starters__list { grid-template-columns: repeat(8, minmax(0, 1fr)); } }

  /* Home: tighter gap between a section head and what it introduces. */
  .kw-section-head { margin-block-end: var(--space-m); }

  /* Home: rule cards line up their headings, text and links across the row. */
  .rule-cards { grid-auto-rows: auto; }
  .rule-card { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--space-xs); }
  .rule-card > * { margin: 0; }

  /* Palette cards (Palettes and Rooms): the same parts line up across a row, the button sits inside. */
  .palette-card { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; justify-content: stretch; }
  .palette-grid { grid-auto-rows: auto; row-gap: var(--space-l); }
  .use-palette { margin: 0; padding: var(--space-s) var(--space-m) var(--space-m); }

  /* Rooms: the room drawing and notes stay in view while its palettes scroll past. */
  @media (min-width: 62rem) {
    .room-showcase > :first-child { position: sticky; inset-block-start: var(--space-m); align-self: start; }
  }

  /* Filters: wrapped buttons line up under the first button, not under the label. */
  .filter-group { display: grid; grid-template-columns: max-content 1fr; align-items: start; column-gap: var(--space-xs); }
  .filter-group__label { padding-block-start: 0.7rem; margin: 0; }
  .filter-group__buttons { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }


  /* Plain pages: one text width, and the same rule above the title as the other pages.
     Headings and lists inside get the theme's .prose rhythm (Operator engine, 2026-11-05). */
  .prose-page > * { max-inline-size: var(--measure); }
  .prose-page > .eyebrow:first-child { border-block-start: 2px solid var(--color-text); padding-block-start: var(--space-s); }
  .study.prose-page > .study__grid { max-inline-size: none; }

  /* Logo study: cards the same height, vote row at the foot. */
  .study__grid { align-items: stretch; }
  .study__card { grid-template-rows: auto auto 1fr auto; }

  /* Footer: link text lines up with the text beside it; tighter list. */
  .kw-footer__list { gap: 0.15rem; }
  .kw-footer__list a { min-block-size: 2rem; align-items: flex-start; padding-block-start: 0.1rem; }

  /* Diagrams use the site's fonts, not the browser's default sans and mono. */
  svg text[font-family="sans-serif"] { font-family: var(--font-body); }
  svg text[font-family="monospace"] { font-family: var(--font-mono); }
  /* Lists in prose keep the paragraph width. */
  :where(.kw-section) :is(ul, ol):not([role="list"], .article-shell *) { max-inline-size: var(--measure); }

  /* Swatch view: a compact header in the 60 column; the remix control fits its column. */
  html[data-mode="swatch"] .tray__handle-text { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html[data-mode="swatch"] .tray__handle { padding-inline: 0.7rem; }
  html[data-mode="swatch"] .swatch-60-chip { order: 4; }
  .remix, .remix__toggle { max-inline-size: 100%; }
  .remix__toggle { flex-wrap: wrap; text-align: start; }
}

@layer themes { .nobr { white-space: nowrap; } }

@layer themes {
  .kw-footer__list li { margin: 0; }
  .kw-footer__list a { min-block-size: 1.75rem; }
}

@layer themes {
  /* Logo study: list items carry no margin (the last one had none, so cards differed); card titles sit close to their mark. */
  .study__grid > li { margin: 0; }
  .prose-page .study__name { margin-block-start: var(--space-xs); }
}

@layer themes {
  /* Guides: the article is one reading width, so text, diagrams, the next-guide line and the
     references all end at the same right edge (.prose caps p and li at --measure). */
  .article-shell { max-inline-size: var(--measure); }
  .references__list { max-inline-size: none; }
}

@layer themes {
  /* .prose rhythm, tuned for this site (the theme's 1.5x chapter space is very airy at our sizes). */
  .prose > h2 { margin-block-start: var(--space-xl); }
  .prose > :is(figure, blockquote, .pullquote, table, pre) + :is(h2, h3) { margin-block-start: var(--space-l); }
  /* FAQ: questions are small heads under the page title, with a hairline between them. */
  .prose[data-faq] > h2 { font-size: var(--step-1); margin-block-start: var(--space-l); padding-block-start: var(--space-s); }
}