/* Colour roles (Instrument look). One meaning per colour (Peter, after Bishop, 2026-10-28):
   - Ink, the off-white: structure and state. A state is told by a shape, not a hue: a filled dot is done,
     a ring is under way, a faint ring is not started.
   - Signal orange (--action-live): a persona, and the one key that starts something. Nothing else.
   - The answer colours (--data-a to -e: blue, green, pink, violet, grey): a simulation's answers and a concept
     test's positions. Nothing else, so a colour on a page is always an answer.
   - Amber (--attention): something waits for you (a persona to review, an update, a contradiction).
   - Red (--signal-negative): something failed.
   The tokens below re-point the old signal tokens at those roles, so every sheet that used them follows. */
html[data-look="instrument"] {
  --signal-positive: var(--on-surface);
  --signal-activity: var(--on-surface);
  --selection: var(--on-surface);
  --selection-subtle: color-mix(in oklch, var(--on-surface) 9%, var(--surface-page));
  /* the fourth answer was amber, the colour of "waiting for you"; it is violet now */
  --data-d: oklch(0.7 0.12 300);
  --outcome-yes: var(--data-b);
  --outcome-if: var(--data-a);
  --outcome-no: var(--data-c);
  --outcome-unclear: var(--data-e);
}

/* Status: the label in the quiet ink, the dot carries the state */
html[data-look="instrument"] .main .status { color: var(--on-surface-muted) !important; }
html[data-look="instrument"] .main .status::before { background: var(--on-surface) !important; border: 0 !important; box-shadow: none !important; }
html[data-look="instrument"] .main :is(.status--queued, .status--generating, .status--running, .status--pending, .status--open)::before { background: transparent !important; box-shadow: inset 0 0 0 1.5px var(--on-surface) !important; }
html[data-look="instrument"] .main .status--draft::before { background: transparent !important; box-shadow: inset 0 0 0 1.5px var(--on-surface-faint) !important; }
html[data-look="instrument"] .main .status--needs-review { color: var(--attention) !important; }
html[data-look="instrument"] .main .status--needs-review::before { background: var(--attention) !important; }
html[data-look="instrument"] .main :is(.status--needs-attention, .status--failed) { color: var(--signal-negative) !important; }
html[data-look="instrument"] .main :is(.status--needs-attention, .status--failed)::before { background: var(--signal-negative) !important; }

/* A stance in the evidence is a shape too: filled supports, a ring counters, half is both. The role labels
   lose their coloured rules and carry the same mark as the finding's seats. */
html[data-look="instrument"] .main .evidence-role { border-color: var(--line-strong) !important; display: inline-flex; align-items: center; gap: 6px; }
html[data-look="instrument"] .main .evidence-role::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--on-surface); }
html[data-look="instrument"] .main .evidence-role[data-evidence-role="counterexample"]::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--on-surface); }
html[data-look="instrument"] .main .evidence-role[data-evidence-role="mixed"]::before { background: linear-gradient(90deg, var(--on-surface) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--on-surface); }
html[data-look="instrument"] .main .finding-seat[data-role="counterexample"] { box-shadow: inset 0 0 0 1.5px var(--on-surface) !important; }
html[data-look="instrument"] .main .finding-seat[data-role="mixed"] { background: linear-gradient(90deg, var(--on-surface) 50%, transparent 50%) !important; box-shadow: inset 0 0 0 1.5px var(--on-surface) !important; }
html[data-look="instrument"] .main .outside-counterexamples { border-inline-start-color: var(--line-strong) !important; }

/* Where you are is ink, not orange: the current step, the current tab, a linked turn */
html[data-look="instrument"] .research-progress li[aria-current='step'] > span[aria-hidden] { background: var(--on-surface) !important; color: var(--surface-page) !important; }
html[data-look="instrument"] .tabbar__link[aria-current="page"] .tabbar__glyph { background: var(--on-surface) !important; }
html[data-look="instrument"] .tabbar__link[aria-current="page"] { color: var(--on-surface) !important; }
html[data-look="instrument"] .transcript-turn:target { box-shadow: -14px 0 0 -10px var(--on-surface) !important; }