/* Atelier · control roles, the one owner of how each kind of control looks (2026-10-27).
   The partner of type-roles.css: per-page sheets had re-decided controls screen by screen (a sweep of 27
   screens found 16 button looks and 15 choice looks: two "primary" buttons, one an orange fill and one a
   ghost outline barely different from "secondary"; three chip styles; native and drawn radios side by
   side; four ways to show "checked"). Each role is decided here once and lists every class that plays it;
   the look properties are !important, so a page sheet may place a control, never restyle it.
   The instrument's language: buttons are KEYS (one orange key for the action, graphite keys for the
   alternatives), a choice is marked in INK (the light ink fills what is chosen), and blue is only focus.
   Loaded after type-roles.css, before the remix lab. Scoped to the Instrument look; Standard keeps its own. */

html[data-look="instrument"] {
  --key: color-mix(in oklch, var(--on-surface) 11%, var(--surface-page));
  --key-hover: color-mix(in oklch, var(--on-surface) 17%, var(--surface-page));
  --key-ink: var(--on-surface);
  --mark-ground: var(--surface-sunken);
  --dock: color-mix(in oklch, var(--on-surface) 5%, var(--surface-page));
}

/* ── Keys ──────────────────────────────────────────────────────────────────────────────────────────
   One size and one voice for every button. */
html[data-look="instrument"] .main :is(.btn, .inst-btn) {
  appearance: none !important;
  min-height: 44px !important;
  padding: 0 20px !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  transition: background-color .15s var(--inst-ease, ease), color .15s var(--inst-ease, ease) !important;
}

/* The action key: what this screen is for. Orange, and on most screens only once (Home: Start a chat, the
   first of the three ways in). */
html[data-look="instrument"] .main :is(.btn--live, .btn--primary, .inst-btn--live) {
  background: var(--action-live) !important;
  color: var(--on-action-live) !important;
}
html[data-look="instrument"] .main :is(.btn--live, .btn--primary, .inst-btn--live):hover { background: var(--action-live-hover) !important; }

/* One orange key per screen: where something live starts here (Chat, Start a Run, Add source), any other
   primary action on the screen steps back to a graphite key. */
html[data-look="instrument"] .main:has(:is(.btn--live, .inst-btn--live)) .btn--primary { background: var(--key) !important; color: var(--key-ink) !important; }
html[data-look="instrument"] .main:has(:is(.btn--live, .inst-btn--live)) .btn--primary:hover { background: var(--key-hover) !important; }

/* The alternative key: share, edit, open the catalog. A filled graphite key, so it holds its shape on a
   plate, on the grid and in a sticky bar alike (an outline dissolves into whatever is behind it). */
html[data-look="instrument"] .main :is(.btn--secondary, .inst-btn:not(.inst-btn--live), .saved-group__action) {
  background: var(--key) !important;
  color: var(--key-ink) !important;
}
html[data-look="instrument"] .main :is(.btn--secondary, .inst-btn:not(.inst-btn--live), .saved-group__action):hover { background: var(--key-hover) !important; }

/* A row of keys: a page's actions sit together with one gap; a quiet link at the end stays a link */
html[data-look="instrument"] .main .page-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
html[data-look="instrument"] .main .page-head__actions > form { display: contents; }

/* Home's first way in (Start a chat) is the screen's action key, though its markup says secondary */
html[data-look="instrument"]:not([data-remix~="zone"]) .main .scale-tile--one .scale-tile__go.btn { background: var(--action-live) !important; color: var(--on-action-live) !important; }
html[data-look="instrument"]:not([data-remix~="zone"]) .main .scale-tile--one:hover .scale-tile__go.btn { background: var(--action-live-hover) !important; }

html[data-look="instrument"] .main :is(.btn, .inst-btn):focus-visible { outline: 2px solid var(--selection) !important; outline-offset: 2px !important; }
html[data-look="instrument"] .main .btn:is(:disabled, [aria-disabled="true"]) { opacity: .45 !important; cursor: not-allowed; }

/* ── Rectangle means do, pill means choose ──────────────────────────────────────────────────────────
   A key inside a card is the same key, compact (36px): the library card's Chat, a chat pick's "Chat →",
   a saved group's "Read findings". */
html[data-look="instrument"] .main :is(.persona-library .persona-card .item__link:last-child:not(:first-child), .chat-pick__go, .saved-group__action) {
  display: inline-flex !important; align-items: center !important; justify-content: center;
  min-height: 36px !important; padding: 0 16px !important; margin-inline: 0 !important;
  border: 1px solid transparent !important; border-radius: 4px !important; box-shadow: none !important;
  background: var(--key) !important; color: var(--key-ink) !important;
  font-family: var(--font-sans) !important; font-size: var(--text-sm) !important; font-weight: 600 !important;
  letter-spacing: 0 !important; text-decoration: none !important;
}
html[data-look="instrument"] .main :is(.persona-library .persona-card .item__link:last-child:not(:first-child), .saved-group__action):hover,
html[data-look="instrument"] .main .chat-pick__link:hover .chat-pick__go { background: var(--key-hover) !important; color: var(--key-ink) !important; }

/* ── Links: the third level, always underlined, with or without an arrow ──────────────────────────────── */
html[data-look="instrument"] .main :is(.item__link, .link-action, .section__action):not(.persona-library .persona-card .item__link:last-child:not(:first-child)) {
  padding-inline: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important;
  color: var(--on-surface) !important; font-weight: 600 !important;
  text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 4px !important;
}
html[data-look="instrument"] .main :is(.item__link, .link-action, .section__action):hover { text-decoration-thickness: 2px !important; }

/* ── The dock: a form's actions, the same on every form. Its own surface one step lifted from the ground, a
   hairline top and a soft shadow upward, so it reads as docked while the form scrolls under it; the summary
   on the left, Cancel and the action on the right. It spans the form: inside a panel it reaches the panel's
   edges. (Bishop, 2026-10-27: the bar had the panel's fill and no plane of its own.) ── */
html[data-look="instrument"] .main .action-bar {
  padding: 14px var(--inset, 24px) !important;
  border: 0 !important; border-top: 1px solid var(--line-strong) !important;
  background: var(--dock) !important;
  box-shadow: 0 -12px 24px -16px oklch(0 0 0 / .7) !important;
}
/* Reaching the panel's edges needs the panel's padding: only on wider screens, and never in Reading, whose
   sections have no side padding (there the dock spans the column) */
@media (min-width: 40.01rem) {
  html[data-look="instrument"]:not([data-register="type"]) .main :is(:is(.section, .research-form):not(:has(.form-step)), .editor-shell > form.form:not(:has(.section, .sim-step))) > .action-bar {
    margin: 0 calc(-1 * var(--inset, 24px)) calc(-1 * var(--inset, 24px)) !important;
  }
}
html[data-look="instrument"] .main .action-bar .form__actions { align-items: center; gap: 20px !important; }

/* ── Quiet ─────────────────────────────────────────────────────────────────────────────────────────
   A button some screens set as an underlined link, because a key there would outshout the content: the
   list of groups to return to under an approved persona, and the chat header's actions on a phone. */
html[data-look="instrument"] .main .persona-review .readiness-panel--approved .persona-group-return .btn {
  min-height: 0 !important; padding: 8px 0 !important; background: transparent !important; color: var(--on-surface) !important;
  font-weight: 500 !important; text-align: left; text-decoration: underline !important; text-underline-offset: 4px;
}
@media (max-width: 40rem) {
  html[data-look="instrument"] .main .conversation-header .btn {
    padding: 4px !important; background: transparent !important; color: var(--on-surface) !important;
    font-weight: 500 !important; text-decoration: underline !important; text-underline-offset: 3px;
  }
}

/* ── Chips ─────────────────────────────────────────────────────────────────────────────────────────
   Filters and quick answers: a pill outline. The chosen one is filled with ink. */
html[data-look="instrument"] .main :is(.filter-chip, .calibration__option) {
  appearance: none !important;
  min-height: 32px !important;
  padding: 0 14px !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--on-surface-muted) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}
html[data-look="instrument"] .main :is(.filter-chip, .calibration__option):hover { border-color: var(--on-surface) !important; color: var(--on-surface) !important; }
html[data-look="instrument"] .main .filter-chip:is([aria-pressed="true"], [aria-current="true"], [aria-current="page"]) {
  border-color: var(--on-surface) !important; background: var(--on-surface) !important; color: var(--surface-page) !important;
}

/* ── Segmented ─────────────────────────────────────────────────────────────────────────────────────
   One choice out of a few, in a sunken track: the chosen segment is filled with ink. */
html[data-look="instrument"] .main :is(.sim-group, .sim-weights, .sim-sizes) { background: var(--surface-sunken) !important; }
html[data-look="instrument"] .main :is(.sim-group button, .sim-weight span, .sim-size span) {
  min-height: 36px !important; border: 0 !important; border-radius: 999px !important;
  font-family: var(--font-sans) !important; font-size: var(--text-sm) !important; font-weight: 500 !important;
  color: var(--on-surface-muted) !important; background: transparent !important;
}
html[data-look="instrument"] .main :is(.sim-group button[aria-checked="true"], .sim-weight input:checked + span, .sim-size input:checked + span) {
  background: var(--on-surface) !important; color: var(--surface-page) !important;
}
html[data-look="instrument"] .main .sim-group button::before { content: none !important; }

/* A short one-of choice (Use / Exclude) is a segment too, not a radio in a pill: the radio stays as a borderless,
   transparent hit area over its segment (not opacity 0, which drivers and some assistive tech treat as hidden),
   for the keyboard, screen readers and the system tests */
html[data-look="instrument"] .main .setup-context__choice {
  display: inline-flex !important; flex-wrap: wrap; gap: 4px !important; padding: 3px !important; width: fit-content !important;
  align-self: flex-start; border-radius: 999px !important; background: var(--surface-sunken) !important;
}
html[data-look="instrument"] .main .setup-context__choice .choice {
  position: relative; min-height: 36px !important; padding: 0 16px !important; border: 0 !important; border-radius: 999px !important;
  box-shadow: none !important; background: transparent !important; color: var(--on-surface-muted) !important;
  font-size: var(--text-sm) !important; font-weight: 500 !important; cursor: pointer;
}
html[data-look="instrument"] .main .setup-context__choice .choice input { appearance: none; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border: 0; border-radius: 999px; background: transparent; cursor: pointer; }
html[data-look="instrument"] .main .setup-context__choice .choice:has(input:checked) { background: var(--on-surface) !important; color: var(--surface-page) !important; box-shadow: none !important; }
html[data-look="instrument"] .main .setup-context__choice .choice:has(input:focus-visible) { outline: 2px solid var(--selection); outline-offset: 2px; }

/* ── Marks ─────────────────────────────────────────────────────────────────────────────────────────
   Every radio and checkbox is drawn the same way: a 16px mark, round for one-of, square for any-of.
   Chosen = ink: an ink ring around an ink dot, or an ink square with a tick cut out of it. Inputs hidden behind a drawn segment
   (the simulation's weights and sizes) keep their own job. */
html[data-look="instrument"] .main input:is([type="radio"], [type="checkbox"]):not(.sim-weight input, .sim-size input, .setup-context__choice input, .visually-hidden) {
  appearance: none !important;
  position: relative;
  flex: none;
  inline-size: 16px !important;
  block-size: 16px !important;
  margin: 0 !important;
  border: 1.5px solid var(--on-surface-faint) !important;
  border-radius: 3px !important;
  background: var(--mark-ground) !important;
  box-shadow: none !important;
  cursor: pointer;
  vertical-align: -3px;
}
html[data-look="instrument"] .main input[type="radio"]:not(.sim-weight input, .sim-size input, .setup-context__choice input, .visually-hidden) { border-radius: 50% !important; }
html[data-look="instrument"] .main input:is([type="radio"], [type="checkbox"]):not(.sim-weight input, .sim-size input, .setup-context__choice input, .visually-hidden):checked {
  border-color: var(--on-surface) !important; background: var(--on-surface) !important;
}
html[data-look="instrument"] .main input[type="radio"]:not(.sim-weight input, .sim-size input, .setup-context__choice input, .visually-hidden):checked { box-shadow: inset 0 0 0 3px var(--mark-ground) !important; }
html[data-look="instrument"] .main input[type="checkbox"]:not(.sim-weight input, .sim-size input, .setup-context__choice input, .visually-hidden):checked::after {
  content: ""; position: absolute; left: 4.5px; top: 1px; width: 4px; height: 8px;
  border: solid var(--surface-page); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
html[data-look="instrument"] .main input:is([type="radio"], [type="checkbox"]):focus-visible { outline: 2px solid var(--selection) !important; outline-offset: 2px !important; }

/* ── Choices ───────────────────────────────────────────────────────────────────────────────────────
   A labelled option, small (a pill) or large (a card). Chosen = an ink ring, the same for both sizes;
   the weight never changes, so choosing doesn't move the text. */
html[data-look="instrument"] .main .choice { border-color: var(--line-strong) !important; background: transparent !important; color: var(--on-surface) !important; font-weight: 500 !important; }
html[data-look="instrument"] .main :is(.choice, .persona-option, .source-kind-choice):has(input:checked) {
  border-color: var(--on-surface) !important;
  box-shadow: inset 0 0 0 .5px var(--on-surface), 0 0 0 2px var(--seam, transparent) !important;
  background: var(--surface-raised) !important;
  font-weight: 500 !important;
}
html[data-look="instrument"] .main .choice:has(input:checked) { background: transparent !important; }