/* AI Spend and Value Tracker. Hand-written, no framework, no web fonts, no images.
   Colours are tokens. Dark mode follows the reader's system setting. Chart colours are the validated categorical palette
   (adjacent-pair separation checked in light and dark). Every chart mark also has an outline and a pattern or label, so
   colour is never the only signal. The page targets WCAG 2.2 AA, with the limits listed in docs/ACCESSIBILITY.md. */

:root {
  --bg: #f9f9f7;
  --surface: #ffffff;
  --head: #f0efec;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #65645f;
  --line: #d9d8d3;
  --grid: #e1e0d9;
  --outline: #52514e;
  --accent: #1c5cab;
  --accent-2: #2a78d6;
  --on-accent: #ffffff;
  --focus: #1c5cab;
  --track: #e8e7e2;
  --warn: #9a3f00;
  --neg: #eb6834;
  --shade: #fdf0e9;
  --banner: #fff4d6;
  --v-keep: #dff0df;
  --v-right-size: #fbefc7;
  --v-consolidate: #dce9f8;
  --v-cut: #f8dcdc;
  --v-investigate: #e6e1f8;
  --st-use: #2a78d6;
  --st-idle: #eb6834;
  --st-never: #1baf7a;
  --st-unknown: #eda100;
  --st-returning: #e87ba4;
  --st-leave: #008300;
  --st-ramping: #898781;
  --st-orphaned: #e34948;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d0d0d;
    --surface: #1a1a19;
    --head: #262625;
    --ink: #f0efec;
    --ink-2: #c3c2b7;
    --muted: #a8a79e;
    --line: #383835;
    --grid: #2c2c2a;
    --outline: #c3c2b7;
    --accent: #86b6ef;
    --accent-2: #3987e5;
    --on-accent: #0b0b0b;
    --focus: #86b6ef;
    --track: #2f2f2d;
    --warn: #ffb27d;
    --neg: #d95926;
    --shade: #2d2119;
    --banner: #3a2f10;
    --v-keep: #1f3a1f;
    --v-right-size: #3c3210;
    --v-consolidate: #1c3350;
    --v-cut: #4a2020;
    --v-investigate: #2f2a52;
    --st-use: #3987e5;
    --st-idle: #d95926;
    --st-never: #199e70;
    --st-unknown: #c98500;
    --st-returning: #d55181;
    --st-leave: #008300;
    --st-ramping: #898781;
    --st-orphaned: #e66767;
  }
}

* { box-sizing: border-box; }

html { font-size: 100%; scroll-padding: 1.5rem 0 2rem; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
}

h1 { font-size: 1.9rem; line-height: 1.2; margin: 0.75rem 0 0.4rem; }
h2 { font-size: 1.35rem; line-height: 1.25; margin: 0 0 0.75rem; padding-top: 0.5rem; border-top: 2px solid var(--line); }
h3 { font-size: 1.05rem; line-height: 1.3; margin: 0.6rem 0 0.25rem; }
p { margin: 0.5rem 0; }
section { margin: 2rem 0; }
.lede { font-size: 1.1rem; color: var(--ink-2); }
.note { color: var(--ink-2); font-size: 0.95rem; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; text-align: right; }
.does { color: var(--ink-2); font-size: 0.95rem; margin: 0.25rem 0 0.5rem; }

a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.15em; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---- skip links, landmarks, layout ---- */
.skips { position: relative; }
.skip {
  position: absolute;
  left: -999px;
  top: 0.5rem;
  background: var(--surface);
  color: var(--ink);
  padding: 0.5rem 0.9rem;
  min-height: 1.5rem;
  border: 2px solid var(--ink);
  z-index: 20;
}
.skip:focus { left: 0.5rem; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.banner {
  margin: 0;
  padding: 0.5rem 1rem;
  background: var(--banner);
  color: var(--ink);
  border-bottom: 2px solid var(--ink-2);
  font-size: 0.95rem;
}
.masthead, footer { padding-left: 1.5rem; padding-right: 1.5rem; }
.masthead .banner { margin: 0 -1.5rem; }

/* Three layouts. Narrow: one column, both lists fold into disclosures. From 52rem: the company facts sit in a left sidebar
   that touches the left edge of the window. From 80rem: "On this page" also gets a sidebar on the right edge. Both sidebars
   are as tall as the window and stay in view while the middle scrolls. Only running text is held to a line length. */
.layout { display: block; padding: 0 1rem; }
main { min-width: 0; }
aside.about-aside { margin: 1rem 0; }
aside.about-aside > h2 { border-top: 0; font-size: 1.15rem; }
details.about > summary { font-weight: 600; }
.toc-wide { display: none; }
.toc-top { margin: 0.5rem 1.5rem; background: var(--surface); border: 1px solid var(--line); }
.toc-top > summary { padding: 0.4rem 0.75rem; }
nav ul { list-style: none; margin: 0; padding: 0; }
nav a { display: block; padding: 0.4rem 0.6rem; min-height: 1.75rem; border-left: 4px solid transparent; color: var(--ink); text-decoration: none; }
nav a:hover { text-decoration: underline; }
nav a[aria-current="location"] { border-left-color: var(--accent); font-weight: 700; background: var(--head); color: var(--ink); }
/* The line of links to every page of the site, the same on every page. */
.site-nav { background: var(--surface); border-bottom: 1px solid var(--line); padding: 0 1rem; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0 0.5rem; }
.site-nav a { display: inline-block; padding: 0.4rem 0.6rem; min-height: 1.75rem; border-left: 0; border-bottom: 3px solid transparent; }
.site-nav a[aria-current="page"] { border-bottom-color: var(--accent); font-weight: 700; background: var(--head); }
.nav-title { font-weight: 700; margin: 0 0 0.25rem; }
.skip-wide { display: none; }

@media (min-width: 52rem) {
  .layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); align-items: start; padding: 0; }
  .layout > main { padding: 0 1.5rem; }
  aside.about-aside > details > summary { display: none; }
  aside.about-aside { margin: 0; padding: 0.5rem 0.75rem 1rem; background: var(--surface); border-right: 1px solid var(--line); }
}
/* A sidebar is as tall as the window and scrolls inside itself when it is longer. The left one can take keyboard focus so the
   keyboard can reach all of it (the script drops that stop when nothing overflows). */
@media (min-width: 52rem) {
  aside.about-aside, .toc-wide { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
}
@media (min-width: 80rem) {
  .layout { grid-template-columns: 15rem minmax(0, 1fr) 13rem; }
  .toc-top { display: none; }
  .skip-narrow { display: none; }
  .skip-wide { display: block; }
  .toc-wide { display: block; padding: 0.75rem 0.5rem; background: var(--surface); border-left: 1px solid var(--line); }
}

/* Running text keeps to a readable line. Cards, tables, charts and tiles use the whole width. */
main > section > p, main > section > ul, main > section > ol, .lede, .note { max-width: 70ch; }

/* ---- columns and cards ---- */
/* Card grids use the full width, up to four columns where each stays at least 14rem wide. */
.cols3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(14rem, calc(25% - 1.5rem))), 1fr)); gap: 1rem 1.5rem; align-items: start; }
.cols3.cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(14rem, calc(33.3% - 1.5rem))), 1fr)); }
.col { min-width: 0; }
.cols3 > .col, .vcard, .tile { background: var(--surface); border: 1px solid var(--line); padding: 0.25rem 1rem 0.75rem; }
.cols3.examples > figure.example.wide { grid-column: 1 / -1; }
.cols3.cards { margin: 1rem 0; }
.vcard h3 { margin-top: 0.5rem; }
.vline { margin: 0.4rem 0; }
.vsure, .vmoney { font-size: 0.95rem; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.tile p { margin: 0.1rem 0; }
.tile-label { color: var(--ink-2); font-size: 0.9rem; }
.tile-value { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.tile-cap { color: var(--ink-2); font-size: 0.85rem; }

/* ---- disclosures ---- */
details { margin: 0.5rem 0; }
summary { cursor: pointer; min-height: 2rem; padding: 0.35rem 0.6rem; font-weight: 600; color: var(--ink); background: var(--head); border: 1px solid var(--line); }
details[open] > summary { border-bottom-color: var(--ink-2); }
details.alt > summary { background: var(--bg); color: var(--accent); font-weight: 400; border: 0; padding-left: 0; min-height: 1.75rem; }
details.tool, details.seatbox, details.words, details.adjust { background: var(--surface); border: 1px solid var(--line); }
details.tool > .cols3, details.words > .terms, details.seatbox > div, details.adjust > fieldset { margin: 0.75rem; }
details.tool > .cols3 > .col { border-color: var(--line); }

/* ---- controls ---- */
fieldset { border: 1px solid var(--ink-2); background: var(--surface); padding: 0.4rem 1rem 0.75rem; margin: 0.75rem 0; min-width: 0; }
legend { padding: 0 0.4rem; font-weight: 700; }
.choices { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.choice { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 1.75rem; cursor: pointer; }
input[type="radio"], input[type="checkbox"] { width: 1.5rem; height: 1.5rem; accent-color: var(--accent); margin: 0; }

.button {
  background: var(--accent);
  color: var(--on-accent);
  border: 2px solid var(--ink);
  padding: 0.4rem 1rem;
  min-height: 2rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.filters { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: end; margin-bottom: 0.5rem; }
.filters label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.9rem; color: var(--ink-2); min-width: 0; max-width: 100%; }
.filters label.check { flex-direction: row; align-items: center; gap: 0.5rem; }
select, input[type="search"] {
  max-width: 100%;
  font: inherit;
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--ink-2);
  padding: 0.3rem 0.5rem;
  min-height: 2rem;
  min-width: 11rem;
}

.slider { display: grid; grid-template-columns: minmax(5rem, 8rem) minmax(0, 1fr) minmax(3rem, auto); gap: 0.5rem; align-items: center; min-height: 2rem; }
.slider label { font-size: 0.95rem; color: var(--ink); }
.slider output { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.live { background: var(--head); border-left: 4px solid var(--accent); padding: 0.4rem 0.75rem; margin: 0.5rem 0 0; }
.moved-summary { background: var(--surface); border: 1px solid var(--line); padding: 0.5rem 1rem; }

input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 2rem; margin: 0; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 0.5rem; background: var(--track); color: var(--ink); border: 2px solid var(--ink-2); border-radius: 0.25rem; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 1.75rem; height: 1.75rem; margin-top: -0.7rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); border: 3px solid var(--ink); }
input[type="range"]::-moz-range-track { height: 0.5rem; background: var(--track); color: var(--ink); border: 2px solid var(--ink-2); border-radius: 0.25rem; }
input[type="range"]::-moz-range-thumb { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); border: 3px solid var(--ink); }

html.js .needs-js, html.js #live-fallback { display: none; }
html:not(.js) .js-only { display: none; }

/* ---- verdicts, tags, chips ---- */
.chip {
  display: inline-block;
  padding: 0.1rem 0.6rem;
  border: 2px solid var(--outline);
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
}
.chip.verdict-keep { background: var(--v-keep); color: var(--ink); }
.chip.verdict-right-size { background: var(--v-right-size); color: var(--ink); }
.chip.verdict-consolidate { background: var(--v-consolidate); color: var(--ink); }
.chip.verdict-cut { background: var(--v-cut); color: var(--ink); border-width: 3px; }
.chip.verdict-investigate { background: var(--v-investigate); color: var(--ink); border-width: 3px; }
.strength { white-space: nowrap; font-weight: 700; }
.moved { display: inline-block; margin-left: 0.5rem; font-size: 0.85rem; color: var(--warn); font-weight: 700; }

.tag { display: inline-block; padding: 0 0.45rem; margin: 0.1rem 0; border: 1px solid var(--outline); border-left: 6px solid var(--c, var(--outline)); background: var(--surface); color: var(--ink); font-size: 0.9rem; }
.tag.flag { font-weight: 700; }
ul.counts, ul.why { margin: 0.25rem 0; padding-left: 1.1rem; }
ul.counts { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.1rem 0.5rem; }
ul.why { color: var(--ink); }

.st-use { --c: var(--st-use); }
.st-idle { --c: var(--st-idle); }
.st-never { --c: var(--st-never); }
.st-unknown { --c: var(--st-unknown); }
.st-returning { --c: var(--st-returning); }
.st-leave { --c: var(--st-leave); }
.st-ramping { --c: var(--st-ramping); }
.st-orphaned { --c: var(--st-orphaned); }

/* ---- tables ---- */
.scroll { overflow-x: auto; margin: 0.5rem 0; max-width: 100%; }
.scroll:focus-visible { outline-offset: -3px; }
.scroll.tall { max-height: 32rem; overflow-y: auto; border: 1px solid var(--line); }
table { border-collapse: collapse; width: 100%; background: var(--surface); font-size: 0.92rem; }
caption { text-align: left; color: var(--ink-2); padding: 0.4rem 0; font-size: 0.9rem; caption-side: top; }
th, td { padding: 0.4rem 0.55rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
thead th { background: var(--head); color: var(--ink); }
tbody th { font-weight: 600; }
td.why { min-width: 16rem; color: var(--ink); }
tr.total th, tr.total td { border-top: 2px solid var(--ink-2); font-weight: 700; }
table.seats { min-width: 46rem; }

/* ---- charts ---- */
figure { margin: 1rem 0; padding: 0; }
figure.chart figcaption, figure.example figcaption { margin-bottom: 0.25rem; }
.cap { display: block; color: var(--ink-2); font-size: 0.9rem; }
.svg { width: 100%; max-width: 30rem; height: auto; display: block; }
.svg-label { fill: var(--ink); font-size: 14px; }
.svg-muted { fill: var(--muted); font-size: 13px; }
.svg-count { fill: var(--ink); stroke: var(--surface); stroke-width: 3px; paint-order: stroke; font-size: 14px; font-weight: 700; }
.svg-grid { stroke: var(--grid); stroke-width: 1; }
.seg { fill: var(--c); stroke: var(--outline); stroke-width: 1.5; }
.seg-pat { stroke: none; pointer-events: none; }
.pat-ink { fill: var(--ink); opacity: 0.55; }
.pat-stroke { stroke: var(--ink); stroke-width: 1; opacity: 0.55; fill: none; }
.svg-below { fill: var(--shade); stroke: var(--outline); stroke-width: 1.5; stroke-dasharray: 5 3; }
.svg-assumed { fill: var(--accent-2); stroke: var(--outline); stroke-width: 1; }
.svg-assumed-base { fill: var(--ink); }
.svg-need-line { stroke: var(--neg); stroke-width: 2.5; }
.svg-need { fill: var(--neg); stroke: var(--outline); stroke-width: 1.5; }
.svg-neg { fill: var(--neg); stroke: var(--outline); stroke-width: 1; }
.svg-pos { fill: var(--accent-2); stroke: var(--outline); stroke-width: 1; }
.svg-zero { stroke: var(--ink-2); stroke-width: 1.5; }
.svg-base { fill: var(--surface); stroke: var(--ink); stroke-width: 3; }
.be-value { stroke: var(--accent-2); stroke-width: 3; }
.cell { stroke: var(--outline); stroke-width: 2; fill: var(--surface); }
.cell-letter { fill: var(--ink); font-size: 18px; font-weight: 700; pointer-events: none; }
.verdict-cell-keep { fill: var(--v-keep); }
.verdict-cell-right-size { fill: var(--v-right-size); }
.verdict-cell-consolidate { fill: var(--v-consolidate); }
.verdict-cell-cut { fill: var(--v-cut); }
.verdict-cell-investigate { fill: var(--v-investigate); }
.eq-box { fill: var(--surface); stroke: var(--outline); stroke-width: 1.5; }
.eq-result { fill: var(--head); stroke-width: 2.5; }
.eq-value { fill: var(--ink); font-size: 16px; font-weight: 700; }
.strip-on { fill: var(--accent-2); stroke: var(--outline); stroke-width: 1; }
.strip-off { fill: var(--surface); stroke: var(--muted); stroke-width: 1; }
.strip-recent { stroke: var(--ink); stroke-width: 2.5; }
.strip-text { margin: 0.25rem 0; font-size: 0.92rem; }
.strip-title { font-weight: 700; margin: 0.5rem 0 0.25rem; }

.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; padding: 0; margin: 0.5rem 0; }
.legend li { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.9rem; }
.swatch { display: inline-block; flex: none; }
.letter-key { display: inline-block; min-width: 1.5rem; text-align: center; font-weight: 700; border: 2px solid var(--outline); color: var(--ink); }
.letter-key.verdict-cell-keep { background: var(--v-keep); }
.letter-key.verdict-cell-right-size { background: var(--v-right-size); }
.letter-key.verdict-cell-consolidate { background: var(--v-consolidate); }
.letter-key.verdict-cell-cut { background: var(--v-cut); }
.letter-key.verdict-cell-investigate { background: var(--v-investigate); }

dl.facts { display: grid; gap: 0.4rem; margin: 0.5rem 0; }
dl.facts dt { font-size: 0.85rem; color: var(--ink-2); }
dl.facts dd { margin: 0; }
dl.terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.25rem 1.5rem; margin: 0.75rem; }
dl.terms > div { padding: 0.35rem 0; border-bottom: 1px solid var(--line); }
dl.terms dt { font-weight: 700; }
dl.terms dd { margin: 0; color: var(--ink-2); font-size: 0.95rem; }
.limits { color: var(--ink-2); }
footer { padding-bottom: 3rem; margin-top: 2rem; border-top: 2px solid var(--line); color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Windows high contrast and other forced-colour modes: use system colours, keep borders, keep patterns and letters. */
@media (forced-colors: active) {
  .chip, .tag, .tile, .vcard, .cols3 > .col, fieldset, details, summary, table, th, td, select, input, .button, .skip { border-color: CanvasText; }
  .seg, .cell, .eq-box, .strip-on, .strip-off, .svg-assumed, .svg-pos, .svg-neg, .svg-need { stroke: CanvasText; }
  .stool .g-fill, .stool .g-line, .stool .g-pole, .stool .g-star, .stool .g-cover, .stool .g-fog, .stool-seat, .card, .stamp, .counter-bar { stroke: CanvasText; }
  .stool .g-fill, .stool-seat, .stool .g-star, .stamp { fill: Canvas; }
  .stool .g-line, .stool .g-cover, .card, .counter-bar { fill: Canvas; }
  .stool .g-arrow, .stool-leg, .stamp-check { stroke: CanvasText; }
  .card-part { fill: Highlight; }
  .seg { fill: Canvas; }
  .strip-on, .svg-assumed, .svg-pos { fill: Highlight; }
  .svg-label, .svg-muted, .svg-count, .cell-letter, .eq-value { fill: CanvasText; }
  .pat-ink { fill: CanvasText; opacity: 1; }
  .pat-stroke { stroke: CanvasText; opacity: 1; }
  nav a[aria-current="location"] { border-left-color: Highlight; }
  .site-nav a[aria-current="page"] { border-bottom-color: Highlight; }
  :focus-visible { outline-color: Highlight; }
  .chip.verdict-keep, .chip.verdict-right-size, .chip.verdict-consolidate, .chip.verdict-cut, .chip.verdict-investigate { background: Canvas; }
}

@media (max-width: 40rem) {
  h1 { font-size: 1.6rem; }
  .slider { grid-template-columns: 1fr 4.5rem; }
  .slider label { grid-column: 1 / -1; }
  .slider input[type="range"] { grid-column: 1; }
}

/* Tables in a card or beside a chart are set a little smaller, so they fit the column without sideways scrolling. */
.col table, figure table { font-size: 0.85rem; }
.col th, .col td, figure th, figure td { padding: 0.3rem 0.4rem; }
.cols3.examples, details.tool > .cols3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(23rem, calc(25% - 1.5rem))), 1fr)); }
.tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 1rem 1.5rem; align-items: start; margin-top: 1rem; }
.svg-leader { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 3; }

.live-label { font-weight: 700; }

/* ---- the members' cafe ---- */
/* Scene on the left and sliders on the right when the section is wide enough, scene above the sliders when it is not. */
#assumptions { container-type: inline-size; }
.stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem 2rem; align-items: start; }
@container (min-width: 44rem) {
  .stage { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); }
}
.stage-scene h3.subhead { margin-top: 1.25rem; }
.counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 1rem; margin: 0.75rem 0; }
.counter { background: var(--surface); border: 1px solid var(--line); padding: 0.1rem 0.75rem 0.6rem; min-width: 0; }
.counter h4 { margin: 0.5rem 0 0.2rem; font-size: 1rem; line-height: 1.3; }
.counter-sign { margin: 0.2rem 0 0.4rem; }
.svg.cafe { max-width: 15rem; }
.stool .g-fill { fill: var(--c); stroke: var(--outline); stroke-width: 1.2; }
.stool .g-line { fill: var(--surface); stroke: var(--outline); stroke-width: 1.4; }
.stool .g-pole { fill: none; stroke: var(--outline); stroke-width: 1.4; stroke-linecap: round; }
.stool .g-arrow { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.stool .g-star { fill: var(--accent-2); stroke: var(--outline); stroke-width: 1; }
.stool .g-cover { fill: var(--surface); stroke: var(--outline); stroke-width: 1.2; stroke-dasharray: 2 2; }
.stool .g-fog { fill: none; stroke: var(--outline); stroke-width: 1.2; stroke-dasharray: 3 2; }
.stool .g-cover-hatch, .stool .g-fog-hatch { stroke: none; pointer-events: none; }
.stool-seat { fill: var(--c); stroke: var(--outline); stroke-width: 0.8; }
.stool-leg { fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linecap: round; }
.counter-bar { fill: var(--head); stroke: var(--outline); stroke-width: 1.5; }
.legend.stools { gap: 0.4rem 1.25rem; }
.legend.stools li { align-items: center; }

.stampcards { display: grid; gap: 0.75rem; margin: 0.5rem 0; }
.stampcard { background: var(--surface); border: 1px solid var(--line); padding: 0.25rem 0.75rem 0.5rem; min-width: 0; }
.card-head { margin: 0.3rem 0; }
.card-words { margin: 0.3rem 0 0; }
.svg.cards { max-width: 26rem; }
.card { fill: var(--surface); stroke: var(--outline); stroke-width: 1.5; }
.stamp-card.full .card { fill: var(--head); }
.stamp { fill: var(--accent-2); stroke: var(--outline); stroke-width: 1.5; }
.stamp-check { fill: none; stroke: var(--on-accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.card-part { fill: var(--accent-2); stroke: none; }
.card-part-hatch { stroke: none; pointer-events: none; }
.note.analogy { border-left: 4px solid var(--accent); padding-left: 0.75rem; margin-top: 1rem; }
.pick { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.75rem 0; font-weight: 600; }
.scene-alts { margin-top: 1rem; }
label.pick select { font-weight: 400; }

/* ---- the cafe in pixels ---- */
/* Four greens of my own. The picture is a framed panel with its own palette in light and dark mode. Every sprite has a dark
   outline, so shapes read without colour. There is no text in the picture: all words are HTML. */
:root {
  --px-0: #10291c;
  --px-1: #2b6a45;
  --px-2: #7cae66;
  --px-3: #d3e8b6;
}
.pixel { margin: 1rem 0; }
.px-controls { margin: 0.5rem 0; }
.motion-note { display: none; color: var(--ink-2); }
.px-wrap { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: flex-start; }
#px-stage { flex: 1 1 16rem; min-width: 0; }
.px-side { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.px-card-title { margin: 0 0 0.4rem; }
.px-key { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.6rem 0; color: var(--ink-2); font-size: 0.95rem; }
.px-swatch { border: 2px solid var(--px-0); }
svg.px { display: block; width: 100%; max-width: 30rem; height: auto; border: 2px solid var(--px-0); }
svg.px.px-card { width: calc(var(--w) * 0.3rem); }
.px-bg, .px-s3 { fill: var(--px-3); }
.px-s0 { fill: var(--px-0); }
.px-s1 { fill: var(--px-1); }
.px-s2 { fill: var(--px-2); }

/* Motion is in steps, like frames. Everything is paused until the Play button is pressed, and the starting picture is the
   still one: everyone seated. A member bobs between two frames. A few walk out of the picture and back in. */
@keyframes px-bob { 0% { transform: translateY(0); } 50% { transform: translateY(1px); } }
@keyframes px-walk { 0%, 30% { transform: translateX(0); } 45%, 55% { transform: translateX(var(--dx)); } 70%, 100% { transform: translateX(0); } }
@keyframes px-sit { 0%, 29.99% { visibility: visible; } 30%, 69.99% { visibility: hidden; } 70%, 100% { visibility: visible; } }
@keyframes px-go { 0%, 29.99% { visibility: hidden; } 30%, 69.99% { visibility: visible; } 70%, 100% { visibility: hidden; } }
@keyframes px-frame-a { 0% { visibility: visible; } 50% { visibility: hidden; } }
@keyframes px-frame-b { 0% { visibility: hidden; } 50% { visibility: visible; } }
.px .member { animation: px-bob 1s steps(1, end) infinite; animation-delay: calc(var(--i) * 0.17s); animation-play-state: paused; }
.px .walker { animation: px-walk 20s steps(24, end) infinite; animation-delay: calc(var(--w) * 5s); animation-play-state: paused; }
.px .w-seat { animation: px-sit 20s steps(1, end) infinite; animation-delay: calc(var(--w) * 5s); animation-play-state: paused; }
.px .w-walk { visibility: hidden; animation: px-go 20s steps(1, end) infinite; animation-delay: calc(var(--w) * 5s); animation-play-state: paused; }
.px .w-a { animation: px-frame-a 0.8s steps(1, end) infinite; animation-play-state: paused; }
.px .w-b { animation: px-frame-b 0.8s steps(1, end) infinite; animation-play-state: paused; }
.pixel.playing .px .member, .pixel.playing .px .walker, .pixel.playing .px .w-seat, .pixel.playing .px .w-walk, .pixel.playing .px .w-a, .pixel.playing .px .w-b { animation-play-state: running; }

@media (prefers-reduced-motion: reduce) {
  .px .member, .px .walker, .px .w-seat, .px .w-walk, .px .w-a, .px .w-b { animation: none; }
  .px-controls { display: none; }
  .motion-note { display: block; }
}
@media (forced-colors: active) {
  svg.px { border-color: CanvasText; }
  .px-bg, .px-s3 { fill: Canvas; }
  .px-s0, .px-s1 { fill: CanvasText; }
  .px-s2 { fill: GrayText; }
}

/* The strip of answers beside the sliders: one small chip for each tool. */
.verdict-strip { margin: 0 0 1rem; }
.strip-title { margin: 0 0 0.4rem; }
.strip { list-style: none; margin: 0; padding: 0; columns: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.4rem; }
.strip-chip { margin: 0; padding: 0.35rem 0.5rem; background: var(--surface); border: 1px solid var(--line); font-size: 0.9rem; overflow-wrap: anywhere; }
.strip-tool { display: block; font-weight: 700; }
.strip-chip .chip { margin: 0.15rem 0; }
@media (forced-colors: active) { .strip-chip { border-color: CanvasText; } }

.svg-tick { stroke: var(--muted); stroke-width: 1; }
.grid-title { font-style: italic; }

details.stamp-detail { background: var(--surface); border: 1px solid var(--line); }
details.stamp-detail > :not(summary) { margin-left: 0.75rem; margin-right: 0.75rem; }
details.stamp-detail > .note { margin-bottom: 0.75rem; }