/* Atelier · the instrument look, a preview theme chosen in the navigation (html[data-look=instrument]).
   Base: the B2 exploration. A flat graphite workspace, the result leading, mono for labels and
   numbers, colour only for answers, and vermilion only on what starts something live. No shadows,
   no gloss: depth comes from hairlines and value. The grid lives only in the open background;
   panels are solid, so our own hairlines are the only lines inside them. The surface tokens are
   redefined for the whole app, so shared components follow without special cases. */

html[data-look="instrument"] {
  --surface-page: oklch(0.205 0.004 70);
  --surface-raised: color-mix(in oklch, var(--on-surface) 2%, var(--surface-page));
  --accent: var(--on-surface);
  --accent-hover: oklch(1 0 0);
  --on-accent: var(--surface-page);
  --accent-subtle: color-mix(in oklch, var(--on-surface) 7%, var(--surface-page));
  --accent-soft: color-mix(in oklch, var(--on-surface) 13%, var(--surface-page));
  --surface-sunken: color-mix(in oklch, var(--on-surface) 8%, var(--surface-page));
  --surface-control: color-mix(in oklch, var(--on-surface) 8%, var(--surface-page));
  --on-surface: oklch(0.95 0.008 80);
  --on-surface-muted: oklch(0.76 0.006 75);
  --on-surface-faint: oklch(0.6 0.006 75);
  --line: oklch(0.33 0.004 70);
  --line-strong: oklch(0.46 0.004 70);
  --data-a: oklch(0.68 0.13 250);
  --data-b: oklch(0.68 0.12 155);
  --data-c: oklch(0.66 0.16 350);
  --data-d: oklch(0.75 0.12 75);
  --data-e: oklch(0.64 0.02 60);
  --signal-positive: oklch(0.74 0.14 155);
  /* The other signals and the selection fills, retoned for the dark ground like positive above. Left at
     their light-look values they read as dark text and pale fills on graphite: a checked choice became a
     pale pill under pale text, and the focus ring sat near 3:1 (2026-10-27). */
  --signal-activity: oklch(0.74 0.11 250);
  --signal-review: oklch(0.76 0.12 70);
  --signal-negative: oklch(0.72 0.14 25);
  --selection-subtle: oklch(0.29 0.035 250);
  --error-subtle: oklch(0.28 0.05 25);
  --inst-grid: oklch(1 0 0 / .035);
  --inst-ease: cubic-bezier(.2, .7, .1, 1);
  color-scheme: dark;
}
html[data-look="instrument"] body { background-color: var(--surface-page); color: var(--on-surface); }
html[data-look="instrument"] .main {
  min-height: 100dvh;
  background-image: linear-gradient(var(--inst-grid) 1px, transparent 1px), linear-gradient(90deg, var(--inst-grid) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ── Shared components, app-wide ───────────────────────────────────────────── */

/* Cards and panels: flat, nearly the page's own value, a hairline edge and a small radius.
   The list is every selector the other stylesheets give a card radius (10–28px or the md/lg
   tokens), taken from them on 2026-10-15; pills, avatars and dots keep their round shapes. */
html[data-look="instrument"] :is(
  .collection--list .item.is-selected,
  .composer,
  .fieldset,
  .form:has(> .fieldset + .fieldset),
  .input,
  .item,
  .msg__body,
  .notice,
  .section,
  .select,
  .stat,
  .textarea,
  .buying-committee,
  .cast-card,
  .chat-pick__link,
  .context-read,
  .conversation-empty,
  .conversation-page .chat-welcome,
  .evidence,
  .excerpt,
  .follow-up-origin,
  .group-readiness,
  .home-context,
  .home-updates,
  .home-updates--quiet,
  .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,
  .persona-review .source-strip + .source-legend,
  .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,
  .research-workspace textarea[name$='[objective]'],
  .run-page .outcome-count,
  .saved-conversation__link,
  .saved-group,
  .saved-research-empty,
  .scale-tile,
  .source-card,
  .source-kind-choice,
  .source-link,
  .source-stance .choice,
  .source-topic-note,
  .summary-doc,
  .summary-doc__limit,
  .summary-outdated,
  .summary-validate,
  .tabbar__link,
  .tested-concept,
  .thumb,
  .topic-matrix,
  .transcript-empty,
  .unused-card,
  .update-card__link,
  .attribute-group,
  .brief-start,
  .conversation-page .chat-composer,
  .conversation-page .chat-message--persona,
  .conversation-page .conversation-header,
  .finding,
  .persona-approval,
  .persona-library .persona-card,
  .persona-review .attribute-group,
  .persona-review .readiness-panel,
  .persona-review > .page-head,
  .template-choice__item,
  .transcript-turn,
  :root[data-register='type'] .persona-library .library-filter .select,
  :root[data-register] .conversation-page .chat-composer,
  :root[data-register] .conversation-page .chat-composer .textarea,
  :root[data-register] .conversation-page .msg--user .msg__body,
  :root[data-register] .conversation-page details,
  :root[data-register] .outcome-count,
  :root[data-register] .research-workspace .research-form
) { border-radius: 4px; }

/* Buttons, chips and choices: their look is owned by control-roles.css (keys, chips, marks, choices). */

/* Portraits shown as photographs are framed like the panels; small list avatars stay round */
html[data-look="instrument"] .main :is(.persona-identity, .persona-library .persona-card, .chat-pick) .avatar,
html[data-look="instrument"] .main :is(.persona-identity, .persona-library .persona-card, .chat-pick) .avatar img { border-radius: 4px; }

/* Titles never break inside a word: a phone wraps them at spaces instead */
html[data-look="instrument"] .main :is(h1, h2, h3) { hyphens: manual; overflow-wrap: normal; }

/* ── Home: the latest simulation leads, the three ways in sit on hairlines, the cast is a list ── */

html[data-look="instrument"] .home-head:has(.home-field) { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; gap: 12px 40px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
html[data-look="instrument"] .home-head:has(.home-field) .page-head__kicker { grid-column: 1 / -1; }
html[data-look="instrument"] .home-head:has(.home-field) .home-head__title { max-width: none; font-size: clamp(2.2rem, 3.9vw, 3.3rem); }
html[data-look="instrument"] .home-head { margin-bottom: 0; }
html[data-look="instrument"] .home-field { display: grid; gap: 14px; padding-left: 36px; border-left: 1px solid var(--line); color: inherit; text-decoration: none; }
html[data-look="instrument"] .home-field__label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--on-surface-muted); }
html[data-look="instrument"] .home-field__label > span { white-space: nowrap; }
html[data-look="instrument"] .home-field__groups { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 22px; }
html[data-look="instrument"] .home-field__group { display: grid; justify-items: start; gap: 10px; }
html[data-look="instrument"] .home-field__dots { display: grid; grid-template-rows: repeat(4, 12px); grid-auto-flow: column; grid-auto-columns: 12px; gap: 8px; }
html[data-look="instrument"] .home-field__dots .sim-dot { width: 12px; height: 12px; animation: inst-light .38s var(--inst-ease) backwards; animation-delay: calc(var(--i) * 14ms); }
html[data-look="instrument"] .home-field__count { display: grid; gap: 6px; font-family: var(--font-mono); font-size: var(--text-md); }
html[data-look="instrument"] .home-field__count::after { content: ''; width: 18px; height: 3px; border-radius: 2px; background: var(--group, var(--on-surface)); }
html[data-look="instrument"] :is(.home-field__group--a) { --group: var(--data-a); }
html[data-look="instrument"] :is(.home-field__group--b) { --group: var(--data-b); }
html[data-look="instrument"] :is(.home-field__group--c) { --group: var(--data-c); }
html[data-look="instrument"] :is(.home-field__group--d) { --group: var(--data-d); }
html[data-look="instrument"] :is(.home-field__group--e) { --group: var(--data-e); }
html[data-look="instrument"] .home-field__question { font-size: var(--text-sm); color: var(--on-surface-faint); }
html[data-look="instrument"] .home-field:hover .home-field__question { color: var(--on-surface); text-decoration: underline; text-underline-offset: 3px; }
html[data-look="instrument"] .home-field:focus-visible { outline: 2px solid var(--on-surface); outline-offset: 6px; }
@keyframes inst-light { from { opacity: 0; transform: scale(.3); } }

html[data-look="instrument"] .home-scales { gap: 0; margin-top: 0; padding-block: 8px; border-bottom: 1px solid var(--line); }
html[data-look="instrument"] .scale-tile { padding: 22px 28px 24px; border-radius: 0; background: transparent; box-shadow: none; transform: none; }
html[data-look="instrument"] .scale-tile:first-child { padding-left: 0; }
html[data-look="instrument"] .scale-tile + .scale-tile { border-left: 1px solid var(--line); }
html[data-look="instrument"] .scale-tile:hover { box-shadow: none; transform: none; }
html[data-look="instrument"] .scale-tile:hover .scale-tile__title { text-decoration: underline; text-underline-offset: 4px; }
html[data-look="instrument"] .scale-tile__go { align-self: flex-start; }
html[data-look="instrument"] .scale-tile--one .scale-tile__go { border-color: transparent; background: var(--action-live); color: var(--on-action-live); }
html[data-look="instrument"] .scale-tile--one:hover .scale-tile__go { background: var(--action-live-hover); }

html[data-look="instrument"] .home-cast__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line); }
html[data-look="instrument"] .home-cast__grid .cast-card {
  display: grid; grid-template-columns: 40px minmax(0, 1.1fr) minmax(0, 1fr) auto; align-items: center; justify-items: start; gap: 16px;
  min-height: 0; padding: 10px 4px; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; text-align: left;
}
html[data-look="instrument"] .home-cast__grid .cast-card:hover { background: var(--surface-raised); box-shadow: none; transform: none; }
html[data-look="instrument"] .home-cast__grid .cast-card .avatar { width: 40px; height: 40px; margin: 0; font-size: var(--text-md); }
html[data-look="instrument"] .home-cast__grid .cast-card__name { font-size: var(--text-md); }
html[data-look="instrument"] .home-cast__grid .cast-card__role { font-size: var(--text-sm); color: var(--on-surface-muted); }
html[data-look="instrument"] .home-cast__grid .cast-card .status { margin: 0; align-self: center; }
html[data-look="instrument"] .home-cast__grid .cast-card--new .cast-card__plus { width: 40px; height: 40px; margin: 0; font-size: 1.2rem; }
html[data-look="instrument"] .home-cast__grid .cast-card--new { box-shadow: none; border-style: solid; }
@media (max-width: 64rem) {
  html[data-look="instrument"] .home-head:has(.home-field) { grid-template-columns: minmax(0, 1fr); }
  html[data-look="instrument"] .home-field { padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 40rem) {
  html[data-look="instrument"] .scale-tile { padding-inline: 0; }
  html[data-look="instrument"] .scale-tile + .scale-tile { border-left: 0; border-top: 1px solid var(--line); }
  html[data-look="instrument"] .home-cast__grid .cast-card { grid-template-columns: 40px minmax(0, 1fr) auto; }
  html[data-look="instrument"] .home-cast__grid .cast-card__role { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-look="instrument"] .home-field__dots .sim-dot { animation: none; }
}

/* ── Persona: provenance reads like a spec sheet. Each value's source sits at the right edge,
   reached by a leader line, so supplied and AI-completed traits form one column to scan. ── */

html[data-look="instrument"] .main .persona-review .attribute-value dd:has(> .attribute-value__text) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; width: 100%; align-self: stretch; }
html[data-look="instrument"] .main .persona-review .attribute-value dd:has(> .attribute-value__text) > .attribute-value__text { grid-column: 1 / -1; }
html[data-look="instrument"] .main .persona-review .attribute-value dd:has(> .attribute-value__text)::after { content: ''; grid-row: 2; grid-column: 1; height: 1px; margin-top: 10px; background: var(--line-strong); }
html[data-look="instrument"] .main .persona-review .attribute-value dd:has(> .attribute-value__text) > .field__source { grid-row: 2; grid-column: 2; margin: 10px 0 0; }
html[data-look="instrument"] .main .persona-review .attribute-value dd > .field__source--supplied { color: var(--on-surface); }
/* How a persona buys reads the same way: value, then a leader line out to its source */
html[data-look="instrument"] .main .buying-committee__rows > div { padding-top: 0; border-top: 0; }
html[data-look="instrument"] .main .buying-committee__rows dd { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; }
html[data-look="instrument"] .main .buying-committee__rows dd > span:first-child { grid-column: 1 / -1; }
html[data-look="instrument"] .main .buying-committee__rows dd::after { content: ''; grid-row: 2; grid-column: 1; height: 1px; margin-top: 10px; background: var(--line-strong); }
html[data-look="instrument"] .main .buying-committee__rows dd > .field__source { grid-row: 2; grid-column: 2; margin: 10px 0 0; }
html[data-look="instrument"] .main .buying-committee__rows dd > .field__source--supplied { color: var(--on-surface); }
html[data-look="instrument"] .main .buying-committee__rows { row-gap: 22px; }

/* Leader lines in one grid row sit at one height: each cell stretches, the value stays at the top
   and its leader line goes to the bottom */
html[data-look="instrument"] .main :is(.persona-review .attribute-grid .attribute-value:has(> dd > .attribute-value__text), .buying-committee__rows > div) { display: grid; grid-template-rows: auto 1fr; }
html[data-look="instrument"] .main :is(.persona-review .attribute-grid .attribute-value dd:has(> .attribute-value__text), .buying-committee__rows dd) { grid-template-rows: 1fr 30px; align-items: start; }
html[data-look="instrument"] .main :is(.persona-review .attribute-grid .attribute-value dd:has(> .attribute-value__text), .buying-committee__rows dd)::after { align-self: center; margin-top: 0; }
html[data-look="instrument"] .main :is(.persona-review .attribute-grid .attribute-value dd:has(> .attribute-value__text), .buying-committee__rows dd) > .field__source { align-self: center; margin-top: 0; }

/* The leader line is the divider, so the row keeps no second rule of its own */
html[data-look="instrument"] .main .persona-review .attribute-value:has(> dd > .attribute-value__text) { border-bottom-color: transparent; }

/* Shadows mixed from the text colour turn into a glow on graphite, so they become hairlines;
   hover marks an edge instead of lifting the card */
html[data-look="instrument"] .main :is(.conversation-page .chat-composer, .summary-doc, .output-feature__paper) { box-shadow: 0 0 0 1px var(--line); }
html[data-look="instrument"] .main .conversation-page .chat-composer:focus-within { box-shadow: 0 0 0 1px var(--on-surface); }
html[data-look="instrument"] .main :is(:root[data-register='card'] .persona-library .persona-card, .chat-pick__link, :root[data-register='card'] .template-choice__item, .update-card__link):hover { box-shadow: 0 0 0 1px var(--on-surface); transform: none; }

/* ── Focus group: the round table is drawn, not filled. One ring, seats as outlined rings,
   and the moderator the only filled seat ── */
html[data-look="instrument"] .main .round-table { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
html[data-look="instrument"] .main .chair__face { background: var(--surface-page); box-shadow: 0 0 0 1px var(--line-strong); }
html[data-look="instrument"] .main a.chair:hover .chair__face,
html[data-look="instrument"] .main a.chair:focus-visible .chair__face { box-shadow: 0 0 0 1px var(--on-surface); }
html[data-look="instrument"] .main .chair--mod .chair__face { background: var(--on-surface); box-shadow: none; }
html[data-look="instrument"] .main .chair__name { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; }

/* ── Focus group findings: the four positions read as one row of readouts ── */

html[data-look="instrument"] .outcome-counts { gap: 0; border: 1px solid var(--line); background: var(--surface-page); }
html[data-look="instrument"] .outcome-count { padding: 16px 18px; border-top: 2px solid var(--outcome-tone, var(--line-strong)); border-radius: 0; background: transparent; }
html[data-look="instrument"] .outcome-count + .outcome-count { border-left: 1px solid var(--line); }
html[data-look="instrument"] .main .outcome-count__label { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500; }
html[data-look="instrument"] .main .outcome-count__value { font-family: var(--font-mono); font-size: clamp(1.8rem, 2.6vw, 2.4rem); font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; }
html[data-look="instrument"] .outcome-count__total { font-family: var(--font-mono); }
@media (max-width: 40rem) {
  html[data-look="instrument"] .outcome-count:nth-child(odd) { border-left: 0; }
  html[data-look="instrument"] .outcome-count:nth-child(n + 3) { border-top-width: 2px; }
}

/* ── Simulation ─────────────────────────────────────────────────────────────── */

.sim-instrument { max-width: 84rem; gap: 0; }
.sim-instrument .study-bar__crumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-bottom: 20px; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--on-surface-muted); }
.sim-instrument .study-bar__crumbs a { color: var(--on-surface-muted); }

/* Head: kicker and the one live action on top, then the question, then status and the honesty line */
.inst-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 24px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.inst-kicker { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.inst-kicker .sim-scale-mark { background-image: radial-gradient(circle, var(--on-surface) 1.3px, transparent 1.6px); }
.inst-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.inst-head__title { grid-column: 1 / -1; margin: 0; max-width: 28ch; font-size: clamp(2rem, 3.6vw, 3.1rem); font-weight: 600; line-height: 1.05; letter-spacing: -.03em; text-wrap: balance; hyphens: manual; overflow-wrap: normal; }
.inst-head__meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--on-surface-muted); }
.inst-head__meta strong { color: var(--on-surface); font-weight: 500; }
.inst-head__meta .status { padding: 0; background: none; font-family: var(--font-sans); font-size: var(--text-md); color: var(--signal-positive); }
.inst-limit { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: var(--text-sm); line-height: 1.45; color: var(--on-surface-faint); }
.inst-limit strong { color: var(--on-surface-muted); font-weight: 600; }
.inst-limit .sim-limit__mark { flex: none; margin: 0; transform: translateY(1px); box-shadow: inset 0 0 0 1.5px var(--on-surface-faint); background: linear-gradient(90deg, var(--on-surface-faint) 50%, transparent 50%); }

/* Buttons: flat. Outline navigates or shares; vermilion starts a new run. */
.inst-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border: 1px solid var(--line-strong); border-radius: 4px; background: transparent; color: var(--on-surface); font-size: var(--text-md); font-weight: 500; text-decoration: none; transition: border-color .15s var(--inst-ease), background-color .15s var(--inst-ease); }
.inst-btn:hover { border-color: var(--on-surface); }
.inst-btn--live { border-color: transparent; background: var(--action-live); color: var(--on-action-live); }
.inst-btn--live:hover { border-color: transparent; background: var(--action-live-hover); }
.inst-btn:focus-visible { outline: 2px solid var(--on-surface); outline-offset: 2px; }

/* Audience: one row between hairlines, separated by rules */
.sim-instrument .sim-audience-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 0; margin: 0; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: var(--text-md); }
.sim-instrument .sim-audience-strip__item { gap: 10px; padding: 0 22px; font-weight: 500; }
.sim-instrument .sim-audience-strip__item:first-child { padding-left: 0; }
.sim-instrument .sim-audience-strip__item + .sim-audience-strip__item { border-left: 1px solid var(--line); }
.sim-instrument .sim-audience-strip__item .avatar { width: 30px; height: 30px; }
.sim-instrument .sim-audience-strip__item .num { color: var(--on-surface-faint); }
/* What varies is part of the run's status, so it sits on the status line, not with the people */
.sim-instrument .sim-audience-strip__vary { display: none; }
.inst-head__vary { padding-left: 18px; border-left: 1px solid var(--line); }

.sim-instrument .sim-progress { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: var(--text-sm); }

/* The field leads: full width, columns on hairlines, dots large and flat */
.sim-instrument .sim-field-sheet { padding: 0; border-radius: 0; background: transparent; box-shadow: none; }
.sim-instrument .sim-field-sheet__bar { flex-direction: row-reverse; flex-wrap: nowrap; align-items: center; margin: 0; padding: 14px 0; }
.sim-instrument .sim-field-sheet__bar > div:first-child { flex: 1 1 16rem; min-width: 0; text-align: right; }
.sim-instrument .sim-field-sheet__bar .sim-group { flex: none; }
.sim-instrument .sim-field-sheet__bar .section__title { margin: 0; font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500; letter-spacing: 0; }
.sim-instrument .sim-field-sheet__bar p { margin-top: 4px; font-size: var(--text-sm); }
.sim-instrument .summary-doc__label { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--on-surface-muted); }
.sim-instrument .sim-group { gap: 0; padding: 4px; border-radius: 999px; background: color-mix(in oklch, var(--on-surface) 6%, var(--surface-page)); }
.sim-instrument .sim-group .summary-doc__label { margin: 0 12px 0 14px; }
.sim-instrument .sim-group button { position: relative; min-height: 40px; padding: 0 18px; border: 1px solid transparent; border-radius: 999px; background: none; font-size: var(--text-sm); color: var(--on-surface-muted); }
.sim-instrument .sim-group button + button::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 1px; background: var(--line); }
.sim-instrument .sim-group button[aria-checked="true"] { border-color: var(--on-surface); background: transparent; color: var(--on-surface); }
.sim-instrument .sim-group button[aria-checked="true"]::before,
.sim-instrument .sim-group button[aria-checked="true"] + button::before { opacity: 0; }

.sim-instrument .sim-field-sheet__body { grid-template-columns: minmax(0, 1fr); gap: 0; border: 1px solid var(--line); }
.sim-instrument .sim-field {
  min-height: 240px; padding: 24px clamp(20px, 3vw, 36px) 22px; column-gap: 0; row-gap: 16px;
}
.sim-instrument .sim-column { padding-inline: clamp(12px, 2vw, 28px); }
.sim-instrument .sim-column:first-child { padding-left: 0; }
.sim-instrument .sim-column + .sim-column { border-left: 1px solid var(--line); }
.sim-instrument .sim-column__dots { gap: calc(var(--dot, 9px) * .5); }
.sim-instrument .sim-column__dots .sim-dot { width: calc(var(--dot, 9px) * 1.2); height: calc(var(--dot, 9px) * 1.2); }
.sim-instrument .sim-dot--pending { box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.sim-instrument .sim-dot.is-selected { box-shadow: 0 0 0 3px var(--surface-page), 0 0 0 4.5px var(--on-surface); }
.sim-instrument .sim-column__head { flex-direction: row-reverse; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 0; border-top: 0; }
.sim-instrument .sim-column__count { font-family: var(--font-mono); font-size: clamp(1.8rem, 2.6vw, 2.4rem); font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.sim-instrument .sim-column__label { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.35; color: var(--on-surface); }
.sim-instrument .sim-column:is([data-group="a"], [data-group="b"], [data-group="c"], [data-group="d"], [data-group="e"]) .sim-column__label::before { content: ''; flex: none; width: 12px; height: 12px; border-radius: 50%; transform: translateY(1px); }
.sim-instrument .sim-column[data-group="a"] .sim-column__label::before { background: var(--data-a); }
.sim-instrument .sim-column[data-group="b"] .sim-column__label::before { background: var(--data-b); }
.sim-instrument .sim-column[data-group="c"] .sim-column__label::before { background: var(--data-c); }
.sim-instrument .sim-column[data-group="d"] .sim-column__label::before { background: var(--data-d); }
.sim-instrument .sim-column[data-group="e"] .sim-column__label::before { background: var(--data-e); }
.sim-instrument .sim-column[data-group="pending"] .sim-column__count { color: var(--on-surface-faint); }

/* The grid lives only in the open background. Panels are solid, so our own hairlines are the only
   lines inside them, and the contrast between grid and clean ground is what marks a panel. */
.sim-instrument .sim-field-sheet__body,
.sim-instrument .sim-cols,
.sim-instrument .sim-next,
.sim-instrument .sim-table__scroll { background-color: var(--surface-page); }

/* The selected individual reads under the field, across its width */
.sim-instrument .sim-side { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px 24px; padding: 18px clamp(20px, 3vw, 36px); border-top: 1px solid var(--line); }
.sim-instrument .sim-legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sim-instrument .sim-individual { min-height: 0; padding: 0; border-radius: 0; background: none; }
.sim-instrument .sim-individual__id { font-size: var(--text-sm); }
.sim-instrument .sim-follow-up { align-self: center; }
.sim-instrument .sim-follow-up .btn--live { border-radius: 4px; }
.sim-instrument .tag-synthetic { padding: 1px 7px; border-radius: 3px; background: none; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--on-surface-muted); font-family: var(--font-mono); font-size: var(--text-xs); }
.sim-instrument .sim-table { margin: 0; padding: 14px 0; }
.sim-instrument .sim-table__scroll { border-radius: 0; box-shadow: 0 0 0 1px var(--line); }
.sim-instrument .sim-table th { background: var(--surface-page); }

/* Results continue on the same ground: bordered, flat */
.sim-instrument .sim-headline { max-width: 34ch; margin: 44px 0 20px; font-weight: 600; }
.sim-instrument .sim-cols { gap: 0; margin-top: 0; border: 1px solid var(--line); }
.sim-instrument .sim-block { border-radius: 0; background: transparent; box-shadow: none; }
.sim-instrument .sim-block + .sim-block { border-left: 1px solid var(--line); }
.sim-instrument .sim-reasons li { padding: 8px 0 10px; border-radius: 0; border-bottom: 1px solid var(--line); }
.sim-instrument .sim-reasons__bar { inset: auto auto -1px 0; height: 2px; background: var(--on-surface); }
.sim-instrument .sim-splits__bar { height: 10px; gap: 3px; border-radius: 0; }
.sim-instrument .sim-next { margin-top: 0; border: 1px solid var(--line); border-top: 0; border-radius: 0; background: transparent; }
.sim-instrument .sim-made { margin-top: 16px; }

/* The reading floats beside the chosen dot; it glides to the dot when the field regroups */
@media (min-width: 40.01rem) {
  .sim-instrument .sim-field-sheet__body { position: relative; }
  .sim-instrument .sim-side {
    position: absolute; z-index: 2; top: var(--pick-top, 12px); left: calc(var(--pick-x, 0px) + 28px);
    grid-template-columns: minmax(0, 1fr); width: min(22rem, 46%); padding: 18px 20px;
    border: 1px solid var(--line-strong); background: var(--surface-raised);
    opacity: 0; transform: translateX(-8px); pointer-events: none;
    transition: top .4s var(--inst-ease), left .4s var(--inst-ease), right .4s var(--inst-ease);
  }
  /* Opacity animates only when the reading opens or closes, never when the layout changes under it */
  .sim-instrument .sim-side:is(.is-floating, .is-closing) { transition: opacity .18s var(--inst-ease), transform .28s var(--inst-ease), top .4s var(--inst-ease), left .4s var(--inst-ease), right .4s var(--inst-ease); }
  .sim-instrument .sim-side[data-side="left"] { left: auto; right: calc(100% - var(--pick-x, 0px) + 28px); transform: translateX(8px); }
  .sim-instrument .sim-side::before { content: ''; position: absolute; top: var(--pick-line, 44px); right: 100%; width: 18px; height: 1px; background: var(--on-surface); transition: top .4s var(--inst-ease); }
  .sim-instrument .sim-side[data-side="left"]::before { right: auto; left: 100%; }
  .sim-instrument .sim-side.is-floating { opacity: 1; transform: none; pointer-events: auto; }
  .sim-instrument .sim-side .sim-follow-up { align-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .sim-instrument .sim-side { transition: none; }
}

@media (max-width: 64rem) {
  .sim-instrument .sim-field-sheet__bar { flex-direction: column-reverse; flex-wrap: wrap; align-items: flex-start; }
  .sim-instrument .sim-field-sheet__bar > div:first-child { flex: none; text-align: left; }
  .sim-instrument .sim-cols { grid-template-columns: minmax(0, 1fr); }
  .sim-instrument .sim-block + .sim-block { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 40rem) {
  .inst-head { grid-template-columns: minmax(0, 1fr); }
  .inst-actions { grid-row: 1; }
  /* On a phone the row wraps, so its dividers are gaps, never a line left at the start of a wrapped row */
  .sim-instrument .sim-audience-strip { column-gap: 16px; }
  .sim-instrument .sim-audience-strip__item, .sim-instrument .sim-audience-strip__item + .sim-audience-strip__item { padding-inline: 0; border-left: 0; }
  .inst-head__vary { padding-left: 0; border-left: 0; }
  .sim-instrument .sim-field { padding-inline: 14px; }
  .sim-instrument .sim-column { padding-inline: 8px; }
  .sim-instrument .sim-column__dots { gap: calc(var(--dot, 9px) * .45); }
  .sim-instrument .sim-column__dots .sim-dot { width: var(--dot, 9px); height: var(--dot, 9px); }
  /* The group-by segments stay one row and scroll sideways rather than wrap a segment onto a second line */
  .sim-instrument .sim-group { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; border-radius: 999px; }
  .sim-instrument .sim-group > * { flex: none; }
  .sim-instrument .sim-group button + button::before { display: none; }
  .sim-instrument .sim-column__head { flex-direction: column-reverse; align-items: flex-start; }
  .sim-instrument .sim-side { grid-template-columns: minmax(0, 1fr); }
}