/* Atelier · remix lab (2026-10-27). Each remix was one combination of moves taken as RELATIONSHIPS from the
   Reference Atlas (never a palette or an asset), layered over the instrument look with its zones. Peter made
   Two Scales the app's design the same day and took the choice out of the navigation, so only the "scales"
   move is in use (ApplicationHelper#interface_remix_moves); the other remixes below are dormant, kept as the
   lab's record (Peter's project notes, docs/remix-lab/, outside this repo) until a cleanup removes them.
   Loaded after type-roles.css, so a remix may restyle a role on purpose (type properties there are !important,
   so they are here too). */

/* ── 1 · Spec Sheet ────────────────────────────────────────────────────────────────────────────────
   The app as its own printed manual. Numbered sections hang in the margin (Patchwork: numbering turns a
   page into a document); a single hairline frames every header (Neue Montreal: one rule can be the whole
   layout system); the step bar becomes a RULER, start and end with ticks (Casey). */
/* The plates become line drawings: no fill, the page's grid shows through, each plate outlined by its seam,
   so the whole instrument reads as its own technical drawing */
html[data-look="instrument"][data-remix~="spec"] { --plate: transparent; --seam: oklch(0.4 0.006 70); --hole: oklch(0.3 0.005 70); }
html[data-look="instrument"][data-remix~="spec"] .main { --inst-grid: oklch(0.95 0.008 80 / .055); }
/* What stays on screen while the page scrolls under it keeps a fill: a line-drawn sticky bar would show
   the form through it */
html[data-look="instrument"]:is([data-remix~="spec"], [data-remix~="manual"]):not([data-remix~="zone"]) .main :is(.action-bar, .chat-composer) { background-color: var(--surface-page) !important; }
html[data-look="instrument"][data-remix~="spec"] .main :is(.home-field, a.home-updates, .home-context, .scale-tile, a:is(.chat-pick__link, .saved-conversation__link, .output-card, .update-card__link, .item)):hover { background-color: oklch(0.95 0.008 80 / .04) !important; }
html[data-remix~="spec"] .main :is(main.page, div.page, article.page) { counter-reset: spec-section; }
html[data-remix~="spec"] .main :is(.section__title, .sim-block__title, .analysis-heading h2, .research-section-head h2, .section > h2, .research-next h2) { counter-increment: spec-section; position: relative; }
html[data-remix~="spec"] .main :is(.section__title, .sim-block__title, .analysis-heading h2, .research-section-head h2, .section > h2, .research-next h2)::before {
  content: counter(spec-section, decimal-leading-zero);
  position: absolute; right: calc(100% + 14px); top: .3em;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; color: var(--on-surface-faint);
}
html[data-remix~="spec"] .main .page-head { padding-block: 18px 22px; border-block: 1px solid var(--line-strong); }
html[data-remix~="spec"] .main .inst-head { padding-top: 18px; border-top: 1px solid var(--line-strong); }
html[data-remix~="spec"] .main .page-head__kicker::after,
html[data-remix~="spec"] .main .inst-kicker::after { content: " — sheet"; color: var(--on-surface-faint); }
/* The ruler: one baseline with a tick per step; done steps solid, the current one tall */
html[data-remix~="spec"] .main .research-progress ol { position: relative; gap: 0; padding-top: 14px; }
html[data-remix~="spec"] .main .research-progress ol::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: var(--line-strong); }
html[data-remix~="spec"] .main .research-progress li { position: relative; padding: 0 22px 0 0; border: 0; }
html[data-remix~="spec"] .main .research-progress li::before { content: ""; position: absolute; left: 0; top: -14px; width: 1px; height: 7px; background: var(--line-strong); }
html[data-remix~="spec"] .main .research-progress li[aria-current="step"]::before { top: -18px; height: 14px; width: 2px; background: var(--action-live); }
html[data-remix~="spec"] .main .research-progress li.is-done::before { background: var(--on-surface); }
html[data-remix~="spec"] .main .research-progress li > span[aria-hidden] { white-space: nowrap; width: auto; height: auto; margin-right: 6px; border-radius: 0; background: none !important; box-shadow: none !important; color: inherit !important; font-size: 11px; }
html[data-remix~="spec"] .main .research-progress li > span[aria-hidden]::before { content: "0"; }

/* ── 2 · Two Scales ────────────────────────────────────────────────────────────────────────────────
   Two type levels and nothing between (Simon Holm, Horeca): display, and one reading size for all the
   rest, with hierarchy carried by weight and ink. Figures set about five times their caption (State of
   AI Design). Sizes only: where the parts of a head sit is page-head.css's, the same in every remix. A field's
   label keeps the type role's smaller size, so a section never reads as a field (Bishop, 2026-10-27). */
html[data-remix~="scales"] .main :is(.page-head__title, .inst-head__title, .page-head > h1, .page-head > div > h1, .home-head__title) {
  font-size: clamp(3rem, 6vw, 5.25rem) !important; font-weight: 500 !important; letter-spacing: -.045em !important; line-height: .95 !important;
}
html[data-remix~="scales"] .main :is(
  .section__title, .sim-block__title, .analysis-heading h2, .brief-start__head h2, .research-section-head h2, .conversation-empty h2,
  .section > h2, .research-next h2, .item__title, .item > h2, .saved-group__head h2, .saved-group__question, .output-feature__title,
  .page-head__kicker, .inst-kicker, .summary-doc__kind, .scale-tile__kicker, .home-updates__kicker, .home-field__label, .home-field__label span,
  .sim-step__n, .form-step__n, .summary-doc__label, .recent-item__kind, .output-card__kind, .finding-label,
  .attribute-value > dt, .home-context dt, .finding-context dt, .page-head__sub, .scale-tile__title, .home-updates__title
) { font-size: var(--text-md) !important; letter-spacing: 0 !important; text-transform: none !important; line-height: calc(1.1em + .4rem) !important; }
html[data-remix~="scales"] .main :is(.section__title, .sim-block__title, .item__title, .item > h2, .saved-group__head h2, .saved-group__question, .output-feature__title, .scale-tile__title, .home-updates__title, .research-next h2) { font-weight: 700 !important; }
html[data-remix~="scales"] .main :is(.page-head__kicker, .inst-kicker, .summary-doc__label, .form-step__n, .sim-step__n, .recent-item__kind, .output-card__kind, .scale-tile__kicker) { font-family: var(--font-mono) !important; font-weight: 400 !important; color: var(--on-surface-faint) !important; }
/* A name can be a poster; a research question is a sentence, and at poster size it pushes the answers
   below the fold (a Run's first finding must show on a 1280×800 laptop). Questions take the display
   scale's lower step: the same weight and tracking, two or three lines. */
html[data-remix~="scales"] .main :is(.page-head .page-head__title--question, .inst-head .inst-head__title) { font-size: clamp(2.25rem, 3.2vw, 3rem) !important; line-height: 1.02 !important; }
/* The figures are the display size */
html[data-remix~="scales"] .main :is(.sim-column__count, .source-legend__count) { font-size: clamp(3rem, 5vw, 4.5rem) !important; font-weight: 500 !important; letter-spacing: -.04em !important; line-height: .9 !important; font-family: var(--font-sans) !important; }
html[data-remix~="scales"] .main .home-field__count { font-size: 2.6rem !important; font-weight: 500; letter-spacing: -.04em; }
@media (max-width: 47.99rem) {
  html[data-remix~="scales"] .main :is(.page-head__title, .inst-head__title, .page-head > h1, .page-head > div > h1, .home-head__title) { font-size: clamp(2.4rem, 11vw, 3rem) !important; }
}

/* ── 3 · Orange Zone ───────────────────────────────────────────────────────────────────────────────
   Colour as a REGION, as on the SEQTRAK's function zone: the place you act on a screen is the one orange
   plate, and colour is spent nowhere else (Paul Kalkbrenner: spend colour once). Controls go neutral and
   monospace so the zone can be loud (Akufen: one element carries all the colour). */
html[data-remix~="zone"] {
  --zone: oklch(0.64 0.17 42);
  --on-zone: oklch(0.19 0.02 40);
}
html[data-remix~="zone"] .main :is(.action-bar, .scale-tile--one, .conversation-page .chat-composer) {
  background: var(--zone) !important; color: var(--on-zone) !important; box-shadow: 0 0 0 2px var(--seam, transparent) !important;
}
html[data-remix~="zone"] .main .action-bar { padding: 14px 20px !important; border-top: 0 !important; }
html[data-remix~="zone"] .main :is(.action-bar, .scale-tile--one, .chat-composer) :is(p, span, small, strong, a:not(.btn), label, .gemini-data-notice, .action-bar__note) { color: var(--on-zone) !important; }
html[data-remix~="zone"] .main :is(.action-bar, .scale-tile--one, .chat-composer) :is(.btn, input[type="submit"], button, .scale-tile__go) {
  background: var(--on-zone) !important; color: var(--zone) !important; border-color: transparent !important;
}
html[data-remix~="zone"] .main .scale-tile--one .scale-tile__art i { background: var(--on-zone) !important; }
html[data-remix~="zone"] .main .chat-composer :is(.textarea, textarea) { background: color-mix(in oklch, var(--on-zone) 12%, var(--zone)) !important; color: var(--on-zone) !important; border-color: transparent !important; }
/* Everywhere else, colour is spent nowhere: the live buttons and lamps outside the zone go neutral */
html[data-remix~="zone"] .main :is(.btn--live, .inst-btn--live):not(.action-bar *, .scale-tile--one *, .chat-composer *) { background: transparent !important; color: var(--on-surface) !important; border: 1px solid var(--on-surface) !important; }
html[data-remix~="zone"] .main .research-progress li[aria-current="step"] > span[aria-hidden] { background: var(--on-surface) !important; color: var(--surface-page) !important; }
html[data-remix~="zone"] .main :is(.btn, .inst-btn, .filter-chip) { font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; }

/* ── 4 · Halftone People ───────────────────────────────────────────────────────────────────────────
   Portraits reduced to one rendering rule, a dot screen (Content Architecture: a single rendering rule
   stops showcase imagery competing). In this product a dot already IS one synthetic person, so a face made
   of dots reads as synthetic at a glance, and its square lattice is the grille's own. Light ink dots on a
   transparent ground (rendered from the demo photos by scripts/halftone.py in the project notes, outside
   this repo), so the face sits on the plate. Only the big portraits (library cards, the persona's page,
   chat picks) can hold a screen of dots; the small avatars stay faces, in grey. */
html[data-remix~="halftone"] .main :is(.card-top, .persona-identity, .chat-pick__link) img[data-portrait="woman-middle"] { content: url("/assets/personas/woman-middle-halftone-795201e8.png"); }
html[data-remix~="halftone"] .main :is(.card-top, .persona-identity, .chat-pick__link) img[data-portrait="woman-younger"] { content: url("/assets/personas/woman-younger-halftone-51be9d96.png"); }
html[data-remix~="halftone"] .main :is(.card-top, .persona-identity, .chat-pick__link) img[data-portrait="man-middle"] { content: url("/assets/personas/man-middle-halftone-15341a0c.png"); }
html[data-remix~="halftone"] .main :is(.card-top, .persona-identity, .chat-pick__link) img[data-portrait="man-younger"] { content: url("/assets/personas/man-younger-halftone-4725f365.png"); }
html[data-remix~="halftone"] .main :is(.card-top, .persona-identity, .chat-pick__link) .avatar:has(img[data-portrait]) { background: var(--plate, var(--surface-sunken)); }
html[data-remix~="halftone"] .main :not(.card-top, .persona-identity, .chat-pick__link) > .avatar img[data-portrait] { filter: grayscale(1) contrast(1.1); }

/* ── 5 · Paper Instrument ────────────────────────────────────────────────────────────────────────── The
   same instrument in the SEQTRAK's light colourway: warm aluminium body, deeper grey plates, a darker
   graphite chassis, ink for type (Mindmarket: warmth is a positioning choice, premium need not be dark). A
   flat light ground gets a fine dither so it reads as a material, not an unfinished background (PX Push). */
html[data-look="instrument"][data-remix~="paper"] {
  --surface-page: oklch(0.915 0.005 85);
  --surface-raised: oklch(0.945 0.004 85);
  --surface-sunken: oklch(0.875 0.005 85);
  --surface-control: oklch(0.955 0.004 85);
  --accent: oklch(0.22 0.01 70);
  --accent-hover: oklch(0.1 0.01 70);
  --on-accent: oklch(0.97 0.004 85);
  --accent-subtle: oklch(0.88 0.005 85);
  --accent-soft: oklch(0.84 0.005 85);
  --on-surface: oklch(0.21 0.01 70);
  --on-surface-muted: oklch(0.42 0.01 70);
  --on-surface-faint: oklch(0.55 0.008 70);
  --line: oklch(0.8 0.005 80);
  --line-strong: oklch(0.64 0.006 80);
  --signal-positive: oklch(0.5 0.12 155);
  --signal-activity: oklch(0.5 0.12 250);
  --signal-review: oklch(0.52 0.11 65);
  --signal-negative: oklch(0.52 0.15 25);
  --selection-subtle: oklch(0.9 0.03 250);
  --error-subtle: oklch(0.92 0.03 25);
  --surface-navigation: oklch(0.3 0.008 70);
  --navigation-active: oklch(0.38 0.008 70);
  --inst-grid: oklch(0.2 0.01 70 / .045);
  --plate: oklch(0.86 0.005 85);
  --seam: oklch(0.7 0.006 80);
  --hole: oklch(0.79 0.005 85);
  --key: oklch(0.835 0.005 85);
  --key-hover: oklch(0.79 0.005 85);
  --mark-ground: oklch(0.95 0.004 85);
  --dock: oklch(0.945 0.004 85);
  color-scheme: light;
}
html[data-look="instrument"][data-remix~="paper"] .main {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .07 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"),
    linear-gradient(var(--inst-grid) 1px, transparent 1px), linear-gradient(90deg, var(--inst-grid) 1px, transparent 1px);
  background-size: 160px 160px, 32px 32px, 32px 32px;
}
/* Lifted values written for the dark look, re-set for paper */
html[data-look="instrument"][data-remix~="paper"] .main :is(.home-field, a.home-updates, .home-context, a:is(.chat-pick__link, .saved-conversation__link, .output-card, .update-card__link, .item), .scale-tile):hover { background-color: oklch(0.83 0.005 85) !important; }
html[data-look="instrument"][data-remix~="paper"] .main .sim-group { background: var(--surface-sunken); }
html[data-look="instrument"][data-remix~="paper"] .nav-primary { --on-navigation: oklch(0.95 0.005 85); --on-navigation-muted: oklch(0.75 0.006 85); }

/* ── 6 · Running Machine ───────────────────────────────────────────────────────────────────────────
   One motion system. A single default curve with a slight overshoot gives the whole app a character no
   element owns (Aardvark); two durations in a 1:2 ratio (Son Daven); state carried by dimming the
   inactive instead of marking the active (Tiny Wins); plates arrive in beats; and a clock with seconds in
   the rail makes it read as a running machine (and2es, drawn by remix_controller.js). */
html[data-remix~="machine"] {
  --inst-ease: cubic-bezier(.3, 1.18, .45, 1);
  --ease-standard: cubic-bezier(.3, 1.18, .45, 1);
  --beat: 180ms;
}
html[data-remix~="machine"] .nav-primary__link:not([aria-current="page"]) { opacity: .5; transition: opacity var(--beat) var(--inst-ease); }
html[data-remix~="machine"] .nav-primary__link:not([aria-current="page"]):hover { opacity: 1; }
html[data-remix~="machine"] .main :is(.sim-group button, .analysis-tabs a, .filter-chip):not([aria-checked="true"], [aria-current="page"], [aria-pressed="true"]) { opacity: .55; }
html[data-remix~="machine"] .main :is(.section, .sim-field-sheet__body, .sim-cols, .home-field, .scale-tile, .home-cast__grid, .recent-list, .chat-pick, .saved-group, .persona-card, .research-mode, .output-card) {
  animation: machine-arrive calc(var(--beat) * 2) var(--inst-ease) backwards;
}
html[data-remix~="machine"] .main :is(.scale-tile, .chat-pick, .persona-card, .output-card, .saved-group):nth-child(2) { animation-delay: var(--beat); }
html[data-remix~="machine"] .main :is(.scale-tile, .chat-pick, .persona-card, .output-card, .saved-group):nth-child(3) { animation-delay: calc(var(--beat) * 2); }
html[data-remix~="machine"] .main :is(.chat-pick, .persona-card):nth-child(n + 4) { animation-delay: calc(var(--beat) * 3); }
@keyframes machine-arrive { from { opacity: 0; transform: translateY(10px); } }
html[data-remix~="machine"] .main :is(a, button, .btn) { transition-duration: var(--beat) !important; transition-timing-function: var(--inst-ease) !important; }
.remix-clock { margin: 12px 0 0; font-family: var(--font-mono); font-size: 22px; font-weight: 400; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--on-navigation, oklch(0.95 0.008 80)); }
@media (prefers-reduced-motion: reduce) { html[data-remix~="machine"] .main * { animation: none !important; } }

/* ── 7 · Drawn Cast ────────────────────────────────────────────────────────────────────────────────
   The demo cast drawn with one technical-pen line, like the figures in a product manual, instead of
   studio headshots: a drawing is plainly made, so the face reads as synthetic before any label does
   (Round C's drawn portraits, Bishop's finding on the photos). Two image registers held by one grid
   (On Energy): drawings beside halftone initials. The drawings are ink on paper, inverted to light line
   on the dark look. Images: GPT Image through the tOS2 courier, receipts in user/out/generated_images. */
html[data-remix~="drawn"] .main img[data-portrait="woman-middle"] { content: url("/assets/personas/woman-middle-drawn-2867a435.png"); }
html[data-remix~="drawn"] .main img[data-portrait="woman-younger"] { content: url("/assets/personas/woman-younger-drawn-da5bb5ba.png"); }
html[data-remix~="drawn"] .main img[data-portrait="man-middle"] { content: url("/assets/personas/man-middle-drawn-5455e47e.png"); }
html[data-remix~="drawn"] .main img[data-portrait="man-younger"] { content: url("/assets/personas/man-younger-drawn-de2433ca.png"); }
html[data-look="instrument"][data-remix~="drawn"] .main img[data-portrait] { filter: grayscale(1) invert(1) brightness(.9) contrast(1.2); }
html[data-remix~="drawn"] .main .avatar:has(img[data-portrait]) { background: var(--plate, var(--surface-sunken)); }

/* ══ Combinations ══════════════════════════════════════════════════════════════════════════════════
   A combination was a list of moves (the helper's former REMIXES table) plus a few rules of its own, under its
   own name, for the places where two moves meet. */

/* ── 8 · Field Manual (paper + spec + drawn) ───────────────────────────────────────────────────────
   The drawn cast belongs on paper: the drawings sit in their own ink, the plates are drawn in that same
   ink, and the rail goes to paper too, so the whole product is one printed field manual. */
html[data-look="instrument"][data-remix~="manual"] {
  --plate: transparent; --seam: oklch(0.3 0.008 70); --hole: oklch(0.8 0.005 85);
  --surface-navigation: oklch(0.885 0.006 85); --navigation-active: oklch(0.83 0.006 85);
}
html[data-look="instrument"][data-remix~="manual"] .main { --inst-grid: oklch(0.2 0.01 70 / .06); }
html[data-look="instrument"][data-remix~="manual"] .main :is(.home-field, a.home-updates, .home-context, .scale-tile, a:is(.chat-pick__link, .saved-conversation__link, .output-card, .update-card__link, .item)):hover { background-color: oklch(0.2 0.01 70 / .05) !important; }
html[data-look="instrument"][data-remix~="manual"] .nav-primary { --on-navigation: oklch(0.21 0.01 70); --on-navigation-muted: oklch(0.45 0.01 70); box-shadow: inset -1px 0 0 var(--seam); }
html[data-look="instrument"][data-remix~="manual"] .main img[data-portrait] { filter: grayscale(1) contrast(1.15); mix-blend-mode: multiply; }

/* ── 9 · Poster (scales + zone + halftone) ─────────────────────────────────────────────────────────
   Display type, one orange plate and printed faces: the louder half of the lab in one place. A heavy
   rule under the headline holds the poster's top, the way a printed bill hangs from its first line. */
html[data-remix~="poster"] .main .page-head { padding-bottom: 22px; border-bottom: 6px solid var(--on-surface); }
html[data-remix~="poster"] .main .home-head__title { padding-bottom: 22px; border-bottom: 6px solid var(--on-surface); }

/* ── 10 · Live Console (machine + zone + spec) ─────────────────────────────────────────────────────
   The line-drawn instrument switched on: plates drawn as lines, one orange zone where you act, and the
   machine's motion and clock. The zone is the only filled surface left, so it reads as the lit panel. */
html[data-remix~="console"] .main :is(.action-bar, .scale-tile--one, .conversation-page .chat-composer) { box-shadow: none !important; }