/* Atelier · Zones, a trial inside the instrument look (html[data-zones], chosen in the navigation).
   Material in three flat values, as on Peter's SEQTRAK reference: the rail is a lighter chassis,
   the page is the body, and the readouts are deep plates set in it, divided by 2px dark seams
   rather than hairlines. No bevels, no inner shadows, no glow. "Grille" also draws the simulation
   field as a plate of holes: every column fills to the same rows, and the places nobody occupies
   stay dark. Off is the instrument look unchanged. Built on the simulation screen, then home
   (2026-10-21); a light/lamp pass was tried and rejected by Peter the same day. Deleting this
   file, the zones controller, the helper and the navigation row removes the trial. */

.sim-hole { display: none; }

html[data-look="instrument"]:is([data-zones="on"], [data-zones="grille"]) {
  --plate: oklch(0.158 0.004 70);
  --seam: oklch(0.112 0.003 70);
  --hole: color-mix(in oklch, var(--seam) 80%, var(--plate));
}

/* The readouts are plates set into the body */
:root:is([data-zones="on"], [data-zones="grille"]) .sim-instrument :is(.sim-field-sheet__body, .sim-cols, .sim-next) {
  --line: color-mix(in oklch, var(--on-surface) 14%, var(--plate));
  border-width: 2px; border-color: var(--seam); background-color: var(--plate);
}
:root:is([data-zones="on"], [data-zones="grille"]) .sim-instrument .sim-next { border-top-width: 0; }
:root:is([data-zones="on"], [data-zones="grille"]) .sim-instrument .sim-table__scroll { --line: color-mix(in oklch, var(--on-surface) 14%, var(--plate)); box-shadow: 0 0 0 2px var(--seam); background-color: var(--plate); }
:root:is([data-zones="on"], [data-zones="grille"]) .sim-instrument .sim-table th { background: var(--plate); }
/* The selection ring's gap is cut from the plate, not the page */
:root:is([data-zones="on"], [data-zones="grille"]) .sim-instrument .sim-dot.is-selected { box-shadow: 0 0 0 3px var(--plate), 0 0 0 4.5px var(--on-surface); }

/* The rail is the chassis on every screen: a step lighter than the body, closed by a seam.
   It is shared chrome, so it never changes value between pages. */
html[data-look="instrument"]:is([data-zones="on"], [data-zones="grille"]) {
  --surface-navigation: oklch(0.262 0.004 70);
  --navigation-active: oklch(0.325 0.005 70);
}
html[data-look="instrument"]:is([data-zones="on"], [data-zones="grille"]) .nav-primary { box-shadow: inset -2px 0 0 var(--seam); }

/* ── Home: the latest simulation and the two side readouts are plates; the three ways in, the
   cast and recent research stay printed on the body ── */
html[data-look="instrument"]:is([data-zones="on"], [data-zones="grille"]) .home-field {
  padding: 18px 24px 20px; border: 2px solid var(--seam); background: var(--plate);
}
html[data-look="instrument"]:is([data-zones="on"], [data-zones="grille"]) .home-field:hover { background: color-mix(in oklch, var(--on-surface) 2.5%, var(--plate)); }
html[data-look="instrument"]:is([data-zones="on"], [data-zones="grille"]) :is(.home-updates, .home-updates--quiet, .home-context) {
  border: 2px solid var(--seam); border-radius: 0; background: var(--plate); box-shadow: none;
}
/* Waiting updates keep their review edge, set into the plate */
html[data-look="instrument"]:is([data-zones="on"], [data-zones="grille"]) .home-updates:not(.home-updates--quiet) { border-left: 3px solid var(--attention); background: color-mix(in oklch, var(--attention) 7%, var(--plate)); }
html[data-look="instrument"]:is([data-zones="on"], [data-zones="grille"]) :is(a.home-updates, .home-context):hover { background: color-mix(in oklch, var(--on-surface) 2.5%, var(--plate)); box-shadow: none; }

/* Home, all of it (Peter, 2026-10-21): the three ways in are three modules side by side, divided
   by seams; your personas and recent research are each one plate with their rows on hairlines.
   Recent research shares its list with the Simulations index, which follows. */
html[data-look="instrument"]:is([data-zones="on"], [data-zones="grille"]) .home-scales { gap: 0; margin-top: 28px; padding-block: 0; border-bottom: 0; }
html[data-look="instrument"]:is([data-zones="on"], [data-zones="grille"]) .scale-tile,
html[data-look="instrument"]:is([data-zones="on"], [data-zones="grille"]) .scale-tile:first-child {
  padding: 22px 24px 24px; border: 0; background: var(--plate); box-shadow: 0 0 0 2px var(--seam);
}
html[data-look="instrument"]:is([data-zones="on"], [data-zones="grille"]) .scale-tile:is(:hover, :focus-visible) { background: color-mix(in oklch, var(--on-surface) 2.5%, var(--plate)); box-shadow: 0 0 0 2px var(--seam); }
html[data-look="instrument"]:is([data-zones="on"], [data-zones="grille"]) :is(.home-cast__grid, .recent-list) {
  --line: color-mix(in oklch, var(--on-surface) 14%, var(--plate));
  padding: 2px 20px; border-top: 0; background: var(--plate); box-shadow: 0 0 0 2px var(--seam);
}
html[data-look="instrument"]:is([data-zones="on"], [data-zones="grille"]) :is(.home-cast__grid > li, .recent-list > li):last-child > a { border-bottom: 0; }
html[data-look="instrument"]:is([data-zones="on"], [data-zones="grille"]) .home-cast__grid .cast-card:hover { background: color-mix(in oklch, var(--on-surface) 2.5%, var(--plate)); }
html[data-look="instrument"]:is([data-zones="on"], [data-zones="grille"]) .recent-item__faces .avatar { box-shadow: 0 0 0 2px var(--plate); }
@media (max-width: 40rem) {
  html[data-look="instrument"]:is([data-zones="on"], [data-zones="grille"]) .scale-tile,
  html[data-look="instrument"]:is([data-zones="on"], [data-zones="grille"]) .scale-tile + .scale-tile { padding: 18px; border-top: 0; }
  html[data-look="instrument"]:is([data-zones="on"], [data-zones="grille"]) :is(.home-cast__grid, .recent-list) { padding-inline: 14px; }
}

/* Grille: the latest simulation sits on one continuous plate of holes. Groups are coloured regions
   of it, one empty column apart, and the holes run on to the plate's edge. The holes are a
   background on the dots' own pitch (four rows), so every dot lands on one. The pitch is tighter
   than the plain field's so 60 individuals fit one line, and tighter still on a narrow plate. */
html[data-look="instrument"][data-zones="grille"] .home-field { container-type: inline-size; }
html[data-look="instrument"][data-zones="grille"] .home-field__groups {
  --hd: 10px;
  --hg: 6px;
  --hp: calc(var(--hd) + var(--hg));
  --hole-at: radial-gradient(circle calc(var(--hd) / 2) at calc(var(--hd) / 2) calc(var(--hd) / 2), var(--hole) 97%, transparent 100%);
  column-gap: calc(var(--hp) + var(--hg));
  /* Whole holes only: the grille ends on a full column, never a half hole at the plate's edge */
  width: round(down, 100%, var(--hp));
  background-image: var(--hole-at), var(--hole-at), var(--hole-at), var(--hole-at);
  background-size: var(--hp) var(--hp);
  background-repeat: repeat-x;
  background-position: 0 0, 0 var(--hp), 0 calc(var(--hp) * 2), 0 calc(var(--hp) * 3);
}
@container (max-width: 330px) {
  html[data-look="instrument"][data-zones="grille"] .home-field__groups { --hd: 8px; --hg: 5px; }
}
html[data-look="instrument"][data-zones="grille"] .home-field__group { align-self: start; }
html[data-look="instrument"][data-zones="grille"] .home-field__dots { grid-template-rows: repeat(4, var(--hd)); grid-auto-columns: var(--hd); gap: var(--hg); }
html[data-look="instrument"][data-zones="grille"] .home-field__dots .sim-dot { width: var(--hd); height: var(--hd); }
/* A count wider than its group must not push the next group off the pitch */
html[data-look="instrument"][data-zones="grille"] .home-field__count { width: 0; white-space: nowrap; }

/* ── Every other screen: panels are plates ───────────────────────────────────────
   The panels are the instrument look's own card list (instrument.css, "Cards and panels"), less
   what stays printed on the body: form controls, conversation (messages and transcript turns are a
   voice, not a readout), and home's ways in and cast. A panel at the top level is a plate with a
   seam; a panel inside a plate sits flush with a hairline, so plates never stack. */
html[data-look="instrument"]:is([data-zones="on"], [data-zones="grille"]) .main :is(
  .collection--list .item.is-selected, .composer, .fieldset, .form:has(> .fieldset + .fieldset), .item, .notice, .section, .stat,
  .buying-committee, .chat-pick__link, .context-read, .conversation-empty, .conversation-page .chat-welcome, .evidence, .excerpt,
  .follow-up-origin, .group-readiness, .loop, .output-card, .output-feature__doc, .output-feature__paper, .persona-library .research-next,
  .persona-option, .persona-proposals, .persona-review .source-legend, .persona-review .source-strip, .proposal-decision,
  .proposal-diff dd, .proposal-impact, .proposal-variant, .question-example, .reply-why__traits, .research-audience ul,
  .research-members .group-member, .research-mode, .research-next, .research-source, .saved-conversation__link, .saved-group,
  .saved-research-empty, .source-card, .source-kind-choice, .source-link, .source-stance .choice, .source-topic-note, .summary-doc,
  .summary-doc__limit, .summary-outdated, .summary-validate, .tested-concept, .topic-matrix, .transcript-empty, .unused-card,
  .update-card__link, .attribute-group, .brief-start, .conversation-page .chat-composer, .conversation-page .conversation-header,
  .finding, .persona-approval, .persona-library .persona-card, .persona-review .readiness-panel, .persona-review > .page-head,
  .template-choice__item, .outcome-count, .research-workspace .research-form,
  .run-history, .persona-evidence, .persona-history, .sim-step, .conversation-page > .conversation-tools, .research-details:not(.finding *)
) {
  --line: color-mix(in oklch, var(--on-surface) 14%, var(--plate));
  border-color: transparent; border-radius: 0; background-color: var(--plate); box-shadow: 0 0 0 2px var(--seam);
}
html[data-look="instrument"]:is([data-zones="on"], [data-zones="grille"]) .main :where(
  .collection--list .item.is-selected, .composer, .fieldset, .form:has(> .fieldset + .fieldset), .item, .notice, .section, .stat,
  .buying-committee, .chat-pick__link, .context-read, .conversation-empty, .conversation-page .chat-welcome, .evidence, .excerpt,
  .follow-up-origin, .group-readiness, .loop, .output-card, .output-feature__doc, .output-feature__paper, .persona-library .research-next,
  .persona-option, .persona-proposals, .persona-review .source-legend, .persona-review .source-strip, .proposal-decision,
  .proposal-diff dd, .proposal-impact, .proposal-variant, .question-example, .reply-why__traits, .research-audience ul,
  .research-members .group-member, .research-mode, .research-next, .research-source, .saved-conversation__link, .saved-group,
  .saved-research-empty, .source-card, .source-kind-choice, .source-link, .source-stance .choice, .source-topic-note, .summary-doc,
  .summary-doc__limit, .summary-outdated, .summary-validate, .tested-concept, .topic-matrix, .transcript-empty, .unused-card,
  .update-card__link, .attribute-group, .brief-start, .conversation-page .chat-composer, .conversation-page .conversation-header,
  .finding, .persona-approval, .persona-library .persona-card, .persona-review .readiness-panel, .persona-review > .page-head,
  .template-choice__item, .outcome-count, .research-workspace .research-form,
  .run-history, .persona-evidence, .persona-history, .sim-step, .conversation-page > .conversation-tools, .research-details:not(.finding *)
) :is(
  .collection--list .item.is-selected, .composer, .fieldset, .form:has(> .fieldset + .fieldset), .item, .notice, .section, .stat,
  .buying-committee, .chat-pick__link, .context-read, .conversation-empty, .conversation-page .chat-welcome, .evidence, .excerpt,
  .follow-up-origin, .group-readiness, .loop, .output-card, .output-feature__doc, .output-feature__paper, .persona-library .research-next,
  .persona-option, .persona-proposals, .persona-review .source-legend, .persona-review .source-strip, .proposal-decision,
  .proposal-diff dd, .proposal-impact, .proposal-variant, .question-example, .reply-why__traits, .research-audience ul,
  .research-members .group-member, .research-mode, .research-next, .research-source, .saved-conversation__link, .saved-group,
  .saved-research-empty, .source-card, .source-kind-choice, .source-link, .source-stance .choice, .source-topic-note, .summary-doc,
  .summary-doc__limit, .summary-outdated, .summary-validate, .tested-concept, .topic-matrix, .transcript-empty, .unused-card,
  .update-card__link, .attribute-group, .brief-start, .conversation-page .chat-composer, .conversation-page .conversation-header,
  .finding, .persona-approval, .persona-library .persona-card, .persona-review .readiness-panel, .persona-review > .page-head,
  .template-choice__item, .outcome-count, .research-workspace .research-form,
  .run-history, .persona-evidence, .persona-history, .sim-step, .conversation-page > .conversation-tools, .research-details:not(.finding *)
) {
  border-color: transparent; background-color: transparent; box-shadow: 0 0 0 1px var(--line);
}
/* Sections that were printed blocks until the coverage audit (2026-10-21) need their own inset as plates */
html[data-look="instrument"]:is([data-zones="on"], [data-zones="grille"]) .main :is(.persona-evidence, .persona-history, .sim-step) { padding: 20px 24px 22px; }
html[data-look="instrument"]:is([data-zones="on"], [data-zones="grille"]) .main .run-history { padding: 6px 20px; }
html[data-look="instrument"]:is([data-zones="on"], [data-zones="grille"]) .main .run-history > article:last-child { border-bottom: 0; }
html[data-look="instrument"]:is([data-zones="on"], [data-zones="grille"]) .main .research-details:not(.finding *) { padding: 10px 20px; }
html[data-look="instrument"]:is([data-zones="on"], [data-zones="grille"]) .main .conversation-page > .conversation-tools { padding-inline: 12px; }

/* Never a plate in a plate (Bishop, 2026-10-21): a Run's numbered steps sit flush on the form's plate,
   divided by rules, and the people's input summaries are rows, not boxes */
html[data-look="instrument"]:is([data-zones="on"], [data-zones="grille"]) .main .research-form .form-step .setup-inputs > .attribute-group {
  padding: 10px 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none;
}

/* A plate that is a link marks hover and focus by lifting its value, keeping its seam */
html[data-look="instrument"]:is([data-zones="on"], [data-zones="grille"]) .main a:is(
  .collection--list .item.is-selected, .composer, .fieldset, .form:has(> .fieldset + .fieldset), .item, .notice, .section, .stat,
  .buying-committee, .chat-pick__link, .context-read, .conversation-empty, .conversation-page .chat-welcome, .evidence, .excerpt,
  .follow-up-origin, .group-readiness, .loop, .output-card, .output-feature__doc, .output-feature__paper, .persona-library .research-next,
  .persona-option, .persona-proposals, .persona-review .source-legend, .persona-review .source-strip, .proposal-decision,
  .proposal-diff dd, .proposal-impact, .proposal-variant, .question-example, .reply-why__traits, .research-audience ul,
  .research-members .group-member, .research-mode, .research-next, .research-source, .saved-conversation__link, .saved-group,
  .saved-research-empty, .source-card, .source-kind-choice, .source-link, .source-stance .choice, .source-topic-note, .summary-doc,
  .summary-doc__limit, .summary-outdated, .summary-validate, .tested-concept, .topic-matrix, .transcript-empty, .unused-card,
  .update-card__link, .attribute-group, .brief-start, .conversation-page .chat-composer, .conversation-page .conversation-header,
  .finding, .persona-approval, .persona-library .persona-card, .persona-review .readiness-panel, .persona-review > .page-head,
  .template-choice__item, .outcome-count, .research-workspace .research-form,
  .run-history, .persona-evidence, .persona-history, .sim-step, .conversation-page > .conversation-tools, .research-details:not(.finding *)
):is(:hover, :focus-visible) {
  background-color: color-mix(in oklch, var(--on-surface) 2.5%, var(--plate)); box-shadow: 0 0 0 2px var(--seam);
}

/* Persona: the provenance strip and its legend are one plate, so the seam runs round both together */
html[data-look="instrument"]:is([data-zones="on"], [data-zones="grille"]) .main .persona-review .source-strip:has(+ .source-legend) {
  box-shadow: 0 -2px 0 0 var(--seam), 2px 0 0 0 var(--seam), -2px 0 0 0 var(--seam), 2px -2px 0 0 var(--seam), -2px -2px 0 0 var(--seam);
}
/* The section's row gap is set here with the pull that closes it, so the two can't drift apart */
html[data-look="instrument"]:is([data-zones="on"], [data-zones="grille"]) .main .persona-characteristics { --section-gap: 20px; row-gap: var(--section-gap); }
html[data-look="instrument"]:is([data-zones="on"], [data-zones="grille"]) .main .persona-review .source-strip + .source-legend {
  margin-top: calc(var(--section-gap, 0px) * -1);
  box-shadow: 0 2px 0 0 var(--seam), 2px 0 0 0 var(--seam), -2px 0 0 0 var(--seam), 2px 2px 0 0 var(--seam), -2px 2px 0 0 var(--seam);
}

/* Persona, Grille: each source gets its own block of holes above its count. Supplied traits are
   ink, AI-completed ones half ink, and an unknown trait is a ringed hole, an empty place on the
   plate. Blocks stretch to the tallest, so the shorter ones fill with plain holes. */
html[data-look="instrument"][data-zones="grille"] .persona-review .source-strip {
  --sd: 9px;
  --sg: 5px;
  --sp: calc(var(--sd) + var(--sg));
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 22px 28px 0;
}
html[data-look="instrument"][data-zones="grille"] .persona-review .source-strip__group {
  display: flex; flex-wrap: wrap; align-content: flex-start; gap: var(--sg); min-height: calc(var(--sp) * 2);
  width: round(down, 100%, var(--sp));
  background: radial-gradient(circle calc(var(--sd) / 2) at calc(var(--sd) / 2) calc(var(--sd) / 2), var(--hole) 97%, transparent 100%) 0 0 / var(--sp) var(--sp);
}
html[data-look="instrument"][data-zones="grille"] .persona-review .source-strip__mark { width: var(--sd); height: var(--sd); }
html[data-look="instrument"][data-zones="grille"] .persona-review .source-strip__mark--unknown { background: var(--hole); box-shadow: inset 0 0 0 1.5px var(--on-surface-faint); }
@media (max-width: 40rem) {
  html[data-look="instrument"][data-zones="grille"] .persona-review .source-strip { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 18px 18px 0; }
}

/* Grille: every place nobody occupies is a dark hole of the dot's size, on the dots' pitch */
:root[data-zones="grille"] .sim-instrument .sim-hole {
  display: inline-block; flex: none; width: calc(var(--dot, 9px) * 1.2); height: calc(var(--dot, 9px) * 1.2);
  border-radius: 50%; background: var(--hole); pointer-events: none;
}
@media (max-width: 40rem) {
  :root[data-zones="grille"] .sim-instrument .sim-hole { width: var(--dot, 9px); height: var(--dot, 9px); }
}