/* The chosen Studio appearance. workspace.css owns the equation layout,
   responsive sizing and interaction geometry; this file owns the palette. */
:root {
  --ink:#222321; --muted:#64645d; --line:#c7c8be;
  --page:#e7e8e0; --surface:#fff; --field:#f7f8f2;
  --accent:#252622; --accent-ink:#fff; --accent-hover:#45463d;
  --board:#fafbf6; --board-ink:#222321; --board-muted:#64645d;
  --board-line:#cbccc2; --board-control:#eaece3; --board-hover:#dfe2d5;
  --tile:#f3d437; --tile-ink:#272610; --tile-edge:#a18b1e;
  --number:#e2e5da; --number-ink:#2c3026; --number-edge:#9da494;
  --selected:#be351e; --select-text:#a42b18;
  --cue:#bc321c; --cue-fill:#f5ded4; --cue-ink:#8f2415;
  --good:#27603f; --good-bg:#e2eddf; --good-ink:#255134;
  --bad:#a12b1c; --bad-bg:#f7e1d9; --bad-ink:#8e2419;
  --radius:2px; --tile-radius:2px;
  --tile-shadow:0 3px 0 var(--tile-edge);
  --board-shadow:4px 4px 0 #bcbeb2;
  /* Existing base-layout color references. */
  --blue:var(--accent); --navy:var(--board); --cyan:var(--tile-ink);
  color:var(--ink); background:var(--page);
}
.topbar,.entry,.steps-panel { background:var(--surface); }
.entry { box-shadow:none; }
.brand-mark { background:var(--accent); color:var(--accent-ink); border-radius:4px; }
.quiet,.examples select { background:var(--surface); }
.quiet:hover { background:var(--field); }
#equation-input { background:var(--field); border-color:var(--line); border-radius:5px; }
.primary { color:var(--accent-ink); box-shadow:none; border-radius:5px; }
.primary:hover { background:var(--accent-hover); }
.board { background:var(--board); color:var(--board-ink); border-color:var(--board-line); box-shadow:var(--board-shadow); }
.board-heading { border-color:var(--board-line); }
.equation-stage { background-image:none; }
.eyebrow,.side-caption,.equals,.plus-sign { color:var(--board-muted); }
.history-controls button,.board-button { background:var(--board-control); color:var(--board-ink); border-color:var(--board-line); border-radius:5px; }
.board-button:hover:not(:disabled) { background:var(--board-hover); border-color:var(--board-muted); }
.board-button>span { color:inherit; }
.hint-button { background:transparent; border-color:transparent; color:var(--board-ink); }
.selection-bar { background:var(--board-control); border-color:var(--board-line); color:var(--board-muted); }
.selection-expression { color:var(--select-text); }
.text-button { color:var(--board-ink); }
.selection-actions .text-button:not(#clear-selection) { color:var(--board-ink); border-color:var(--board-muted); border-radius:4px; }
.selection-actions .text-button:hover { background:var(--board-hover); }
.operation-form>label { color:var(--board-muted); }
.operation-fields input,.operation-fields select { background:var(--board); border-color:var(--board-muted); color:var(--board-ink); border-radius:4px; }
.operation-fields input::placeholder { color:var(--board-muted); }
.apply { background:var(--tile); color:var(--tile-ink); border-color:var(--tile-edge); border-radius:4px; }
.apply:hover { background:var(--tile); filter:brightness(.94); }
.hint-panel { background:var(--board-control); border-color:var(--cue); border-radius:4px; }
.hint-panel button { background:var(--cue-fill); color:var(--cue-ink); border-radius:4px; }
.error,.operation-form .error { color:var(--bad); }
.result { background:var(--good-bg); color:var(--good-ink); border-color:var(--good); }
.result[data-kind=contradiction] { background:var(--bad-bg); color:var(--bad-ink); }
.result[data-kind=identity] { background:var(--board-control); color:var(--board-ink); }
.board.solved #goal { color:var(--good); }
/* Yellow always means variable-containing; neutral always means constant.
   Red outlines mark selection or a valid action, never a term's position. */
.term { background:var(--tile); color:var(--tile-ink); border-color:var(--tile-edge); border-radius:var(--tile-radius); box-shadow:var(--tile-shadow); }
.term.constant { background:var(--number); color:var(--number-ink); border-color:var(--number-edge); box-shadow:0 4px 0 var(--number-edge); }
.term:hover { border-color:var(--selected); box-shadow:var(--tile-shadow); }
.term.selected { border-color:var(--selected); outline:3px solid var(--selected); outline-offset:3px; box-shadow:var(--tile-shadow); }
.term.drag-ghost { border-color:var(--selected); box-shadow:0 12px 18px #0003; }
.term.drag-ghost.valid-drop,.term.combine-target { border-color:var(--cue); outline:3px solid var(--cue); outline-offset:3px; box-shadow:0 6px 12px #0002; }
.term.combine-candidate,.drag-over-left .equation-side[data-side=left],.drag-over-right .equation-side[data-side=right] { outline-color:var(--cue); }
.equation-stage.drag-over-left { box-shadow:inset 48vw 0 80px -60px var(--cue-fill); }
.equation-stage.drag-over-right { box-shadow:inset -48vw 0 80px -60px var(--cue-fill); }
.cancelling-term:after,.ghost-term.cancelled:after { background:var(--tile-ink); }
.board.solved .term { border-color:var(--good); }
.distribution-caption,.operation-echo { color:var(--cue); }
.distribution-factor,.flying-factor { background:var(--cue-fill); color:var(--cue-ink); border-color:var(--cue); border-radius:4px; }
.distribution-paren,.distribution-times,.distribution-plus { color:var(--board-muted); }
.distribution-target { color:var(--board-ink); border-color:var(--board-muted); background:var(--board); border-radius:4px; }
.receiving-factor { background:var(--cue-fill); color:var(--cue-ink); box-shadow:0 0 0 2px var(--cue); border-color:var(--cue); }
.distributed-target { background:var(--board-control); }
.distribution-arrows path { stroke:var(--cue); }
#steps li { border-left-color:var(--line); }
#steps li:last-child { border-left-color:transparent; }
#steps li:before { background:var(--line); box-shadow:0 0 0 4px var(--surface); }
#steps li.current:before { background:var(--accent); }
.step-equation { color:var(--muted); }
.current .step-equation { color:var(--ink); }
.variable-legend { background:var(--tile); border:1px solid var(--tile-edge); }
.number-legend { background:var(--number); border:1px solid var(--number-edge); }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline-color:var(--selected); }
.topbar button:focus-visible,.topbar a:focus-visible,.entry button:focus-visible,.entry input:focus-visible,.entry select:focus-visible { outline-color:var(--accent); }