/**
 * Scheme 1 — game chrome
 * Everything that is NOT the chemistry: board, cards, deck, roster, dials, buttons, holo.
 * Rules of the table:
 *   · Bench Warm palette from tokens.css; copper is the only hot accent and it is CTA-only.
 *   · The plate (#scheme-stage / .scheme) is a flat publication-white figure. The rules under
 *     "PLATE" are spacing/typography only — no gradients, shadows or colour on the chemistry.
 *     The only shadow near the chemistry is the hover/drag drop-shadow filter under
 *     "Plate drag affordance", on the item being moved, never on the plate.
 *   · Stage type/stroke sizes (--type-*-stage-size, --stroke-scheme, …) are overwritten at
 *     runtime by controls.js applyStyleVars() from the JS geometry, so the DOM plate always
 *     matches the export. tokens.css holds the defaults only.
 *   · Holo/tilt lives on .holo elements and is driven by CSS custom properties set from
 *     assets/holo.js (pointer → --px/--py/--rx/--ry/--bx/--by/--pc/--holo-o). Deck chips
 *     only — species on the plate opt out (see HOLO).
 *     Adapted from the poke-holo technique (simeydotme/pokemon-cards-css); no code copied.
 */

:root {
  --line: rgba(26, 21, 16, 0.16);
  --hair: rgba(26, 21, 16, 0.08);
  --ok: var(--hood);
  --err: #8b2e1f;
  --card: #fffdf9;
  --card-2: #fbf6ee;
  --outline: var(--ink);
  --outline-w: 2px;
  --r-card: 22px;
  --r-pill: 999px;
  --shadow-card: 0 14px 30px -18px rgba(26, 21, 16, 0.35), 0 2px 0 0 rgba(26, 21, 16, 0.06);
  --shadow-lift: 0 22px 40px -20px rgba(26, 21, 16, 0.4);
  --press: 4px;
  --ease-pop: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { color-scheme: light; }
body {
  font-family: var(--font-ui);
  font-weight: 500;
  color: var(--ink);
  min-height: 100vh;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  background: var(--paper);
}
:focus-visible {
  outline: 3px solid var(--hood);
  outline-offset: 3px;
  border-radius: 6px;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }

/* ————— Board (page field) ————— */
.field {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 45% at 6% 0%, rgba(196, 92, 38, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 45% at 100% 100%, rgba(31, 107, 90, 0.16) 0%, transparent 62%),
    radial-gradient(rgba(26, 21, 16, 0.085) 1.1px, transparent 1.6px) 0 0 / 22px 22px,
    var(--paper);
}
.stage {
  position: relative; z-index: 1;
  max-width: 1040px; margin: 0 auto;
  padding: clamp(1rem, 3vw, 2.25rem) clamp(0.9rem, 3vw, 2rem) 3rem;
}
.board { display: flex; flex-direction: column; gap: 1.1rem; }

/* ————— Cards ————— */
.card {
  background: var(--card);
  border: var(--outline-w) solid var(--outline);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}

/* ————— Masthead: wordmark + one line. No card, no tags. ————— */
.masthead {
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
  padding: 0.6rem 0 0.2rem;
}
.brand { display: inline-flex; line-height: 0; }
.brand img.wordmark { display: block; height: 30px; width: auto; }
.title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.6rem, 3.6vw, 2.3rem); line-height: 1.05; letter-spacing: -0.01em;
  text-align: center; text-wrap: balance;
}
.title em { font-style: normal; color: var(--copper); }

/* ————— Labels & fields ————— */
label { display: flex; flex-direction: column; gap: 0.32rem; }
.lbl {
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mute);
}
.lbl .opt { font-family: var(--font-ui); font-weight: 600; letter-spacing: 0.02em; text-transform: none; opacity: 0.75; }
.panel { --panel-x: 1.25rem; --panel-b: 1rem; padding: 1.1rem var(--panel-x) var(--panel-b); display: flex; flex-direction: column; gap: 0.7rem; }
.fieldset { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0.75rem 0.9rem; }
.panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; flex-wrap: wrap; }
#reaction, #conditions {
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--type-mono-size); color: var(--ink); line-height: 1.45;
  caret-color: var(--copper);
  background: var(--paper);
  border: var(--outline-w) solid var(--outline);
  border-radius: 14px;
  padding: 0.6rem 0.8rem;
  outline: none;
  box-shadow: inset 0 3px 0 rgba(26, 21, 16, 0.06);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
#reaction {
  min-height: 2.9rem; height: auto; resize: none; overflow-y: hidden;
  line-height: 1.35; field-sizing: content;
}
#conditions { min-height: 0; }
#reaction::placeholder, #conditions::placeholder { color: rgba(92, 83, 72, 0.6); }
#reaction:focus, #conditions:focus {
  border-color: var(--copper);
  box-shadow: 0 0 0 4px rgba(196, 92, 38, 0.22), inset 0 3px 0 rgba(26, 21, 16, 0.06);
}
#reaction[aria-invalid="true"] { border-color: var(--err); }

/* ————— Status → game feedback badge ————— */
.status {
  display: inline-flex; align-items: center; gap: 0.45rem;
  align-self: flex-start;
  font-weight: 700; font-size: 0.8rem; line-height: 1.2;
  color: var(--mute);
  background: var(--card-2);
  border: var(--outline-w) solid var(--line);
  border-radius: var(--r-pill);
  padding: 0.38rem 0.8rem 0.38rem 0.6rem;
  min-height: 34px;
  transition: transform 0.35s var(--ease-pop), background-color 0.2s, border-color 0.2s;
}
.status:empty { display: none; }
.status::before {
  content: "·";
  display: inline-grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%;
  font-family: var(--font-display); font-weight: 700; font-size: 0.7rem; line-height: 1;
  color: var(--paper); background: var(--mute);
  flex: none;
}
.status[data-state="ok"] { color: var(--ok); border-color: var(--ok); background: rgba(31, 107, 90, 0.1); }
.status[data-state="ok"]::before { content: "✓"; background: var(--ok); }
.status[data-state="error"] { color: var(--err); border-color: var(--err); background: rgba(139, 46, 31, 0.08); }
.status[data-state="error"]::before { content: "!"; background: var(--err); }
.status[data-state="empty"]::before { content: "…"; }

/* ————— ChemDraw drop (compact; the whole panel accepts the file) ————— */
.drop { position: relative; display: inline-flex; margin-left: auto; }
.drop-target {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: var(--outline-w) dashed rgba(26, 21, 16, 0.35); border-radius: var(--r-pill);
  padding: 0.38rem 0.85rem; color: var(--mute); font-size: 0.8rem; font-weight: 600;
  cursor: pointer; background: transparent; min-height: 34px; line-height: 1.2;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}
.drop-target b { font-weight: 800; color: var(--ink); }
.drop-target::before {
  content: "⤓"; font-size: 0.95rem; color: var(--ink); line-height: 1;
}
.drop-target:hover, .drop.over .drop-target {
  border-color: var(--hood); color: var(--ink); background: rgba(31, 107, 90, 0.08);
}
.drop.over .drop-target { border-style: solid; }
.drop input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.drop input:focus-visible + .drop-target { outline: 3px solid var(--hood); outline-offset: 3px; }

/* ————— ChemDraw extract ————— */
.extract {
  border: var(--outline-w) solid var(--line);
  border-radius: 16px; padding: 0.8rem 0.9rem; background: var(--card-2);
}
.extract[hidden] { display: none; }
.extract-counts { font-size: 0.82rem; font-weight: 600; margin: 0.35rem 0 0.4rem; }
.extract-species { display: flex; flex-wrap: wrap; gap: 0.3rem; list-style: none; margin: 0.1rem 0 0.5rem; }
.extract-species li {
  font-size: 0.72rem; font-weight: 700;
  border: var(--outline-w) solid var(--outline); border-radius: var(--r-pill);
  padding: 0.2rem 0.55rem; background: var(--card);
}
.atom-graph { display: block; width: 100%; height: 7.5rem; margin: 0.15rem 0 0.5rem; }
.extract details { font-size: 0.78rem; color: var(--mute); }
.extract summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.extract pre {
  margin-top: 0.4rem; font-size: 0.7rem; line-height: 1.35;
  overflow: auto; max-height: 14rem; white-space: pre-wrap; word-break: break-word;
  color: var(--mute);
}

/* ————— Examples: one quiet row ————— */
.demos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.45rem; padding: 0 0.35rem; }
.demos > .lbl { margin-right: 0.3rem; }
/* ChemDraw fixtures sit at the right end of the row and wrap as one group. */
.demo-files { display: inline-flex; flex-wrap: wrap; gap: 0.35rem 0.4rem; margin-left: auto; }
.example {
  font-family: var(--font-display); font-weight: 600; font-size: 0.84rem; letter-spacing: 0.01em;
  color: var(--ink); background: var(--card);
  border: var(--outline-w) solid var(--outline);
  border-radius: var(--r-pill); padding: 0.45rem 0.85rem; min-height: 38px;
  box-shadow: 0 3px 0 var(--outline);
  transition: box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.example:hover { background: var(--card-2); box-shadow: 0 4px 0 var(--outline); }
.example:active { box-shadow: 0 0 0 var(--outline); }
.example.active { color: var(--paper); background: var(--ink); }
.example--file {
  font-family: var(--font-mono); font-size: 0.76rem; font-weight: 500; color: var(--mute);
  background: transparent; border-color: var(--line); box-shadow: none; min-height: 32px; padding: 0.3rem 0.7rem;
}
.example--file:hover { color: var(--ink); border-color: var(--outline); background: var(--card); box-shadow: none; }

/* ————— Roster (editor): folded under the input as a disclosure, no second card ————— */
/* The <details> bleeds to the card edges (negative panel padding) so its hairline
   spans the full width and the summary row reads as the card's own foot. */
.roster {
  margin: 0.15rem calc(-1 * var(--panel-x)) calc(-1 * var(--panel-b));
  border-top: var(--outline-w) solid var(--hair);
}
.roster-summary {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.65rem var(--panel-x);
  cursor: pointer; list-style: none;
  border-radius: 0 0 calc(var(--r-card) - var(--outline-w)) calc(var(--r-card) - var(--outline-w));
  transition: background-color 0.15s ease;
}
.roster-summary::-webkit-details-marker { display: none; }
.roster-summary:hover { background: var(--card-2); }
.roster[open] .roster-summary { border-radius: 0; }
.roster-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mute);
}
.roster-counts { font-size: 0.82rem; font-weight: 700; color: var(--ink); }
/* "edit ▾" at the right end; flips to "▴" when open. */
.roster-open {
  margin-left: auto; display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.76rem; font-weight: 700; color: var(--mute);
  transition: color 0.15s ease;
}
.roster-open::after {
  content: ""; width: 7px; height: 7px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.25s var(--ease-pop);
}
.roster[open] .roster-open::after { transform: translateY(2px) rotate(-135deg); }
.roster-summary:hover .roster-open { color: var(--ink); }
.editor {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1.1rem;
  padding: 0.35rem var(--panel-x) 1rem;
}
.editor-stack {
  position: relative;
  display: flex; flex-direction: column; gap: 0.45rem;
  padding: 0.1rem 0;
}
.editor-stack + .editor-stack { border-left: var(--outline-w) solid var(--hair); padding-left: 1.1rem; }
.roster-head { display: flex; align-items: center; gap: 0.5rem; min-height: 26px; }
.roster-sub { font-size: 0.74rem; font-weight: 600; color: var(--mute); }
.badge {
  display: inline-flex; align-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 0.64rem;
  letter-spacing: 0.12em; text-transform: uppercase; line-height: 1;
  border-radius: var(--r-pill); padding: 0.35rem 0.65rem;
  color: var(--paper); background: var(--mute);
  border: var(--outline-w) solid transparent;
}
.badge--reactant { background: var(--ink); }
.badge--reagent { background: var(--card); color: var(--ink); border-color: var(--outline); }
.badge--product { background: var(--hood); }
.editor-stack > div[id^="editor-"] { display: flex; flex-direction: column; gap: 0.4rem; }
.editor-stack > div[id^="editor-"]:empty { display: none; }
.editor-row {
  display: flex; align-items: center; gap: 0.1rem;
  background: var(--paper);
  border: var(--outline-w) solid var(--outline);
  border-radius: 12px;
  padding: 0.1rem 0.2rem 0.1rem 0.45rem;
  transition: box-shadow 0.2s ease;
}
.editor-row:focus-within { box-shadow: 0 3px 0 var(--outline); }
.editor-row input {
  flex: 1; min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--type-mono-size);
  color: var(--ink);
  background: transparent;
  border: none; border-radius: 8px;
  padding: 0.45rem 0.3rem;
  outline: none;
}
.editor-row input:focus-visible { outline: none; background: rgba(196, 92, 38, 0.08); }
.editor-icon,
.ghost.editor-icon {
  font-family: var(--font-display); font-size: 0.9rem; font-weight: 700;
  color: var(--mute); background: transparent; border: none; border-radius: 50%;
  padding: 0; min-width: 32px; min-height: 40px; width: 32px; line-height: 1;
  display: grid; place-items: center;
  transition: background-color 0.15s, color 0.15s;
}
.editor-icon:hover, .editor-icon:focus-visible { color: var(--ink); background: rgba(26, 21, 16, 0.08); }
.editor-icon[data-action="remove"]:hover { color: var(--paper); background: var(--err); }
.editor-display { font-size: 0.72rem; letter-spacing: 0.01em; }
.editor-display svg { display: block; }
.editor-display[hidden] { display: none; }
.editor [data-add] {
  align-self: flex-start;
  font-size: 0.78rem; padding: 0.35rem 0.75rem; min-height: 34px;
  color: var(--mute); background: transparent;
  border-style: dashed; border-color: rgba(26, 21, 16, 0.4);
  box-shadow: none;
}
.editor [data-add]::before { content: "+"; margin-right: 0.35rem; font-weight: 700; }
.editor [data-add]:hover { color: var(--ink); border-color: var(--outline); background: var(--card-2); box-shadow: none; }

/* ————— Scheme board (frame) ————— */
.scheme-stage {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: var(--card);
  border: var(--outline-w) solid var(--outline);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  font-family: var(--font-scheme);
}
/* Slim tool row: hint left, stale note + text buttons right. No bar, no fill. */
.scheme-tools {
  display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end;
  gap: 0.25rem 0.5rem;
  min-height: 40px;
  padding: 0.3rem 0.6rem 0 0.9rem;
  font-family: var(--font-ui);
  background: var(--export-bg);
}
.plate-hint { margin-right: auto; font-size: 0.74rem; font-weight: 600; color: rgba(92, 83, 72, 0.75); }
.scheme-tools .btn--text { font-size: 0.8rem; min-height: 32px; padding: 0.2rem 0.5rem; }
.scheme-tools .btn--text:disabled { opacity: 0.35; }
#reset-layout[hidden] { display: none; }
#scheme-stale { margin: 0; min-height: 0; color: var(--err); border-color: var(--err); background: rgba(139, 46, 31, 0.07); }
#scheme-stale::before { content: "↻"; background: var(--err); }
#scheme-stale[hidden] { display: none; }

/* ————— Dials: live drawing style (controls.js builds the rows from STYLE_DIALS) ————— */
.dials-toggle { gap: 0.35rem; }
.dials-toggle .dials-icon { display: block; }
.dials-toggle[aria-expanded="true"] { color: var(--ink); }
/* A hood dot says "this drawing is not on the defaults" while the panel is folded. */
.dials-toggle.is-tuned::after {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hood); flex: none;
}
.dials-panel {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem 1.4rem; align-items: start;
  padding: 0.65rem 0.9rem 0.7rem;
  font-family: var(--font-ui);
  background: var(--card-2);
  border-top: var(--outline-w) solid var(--hair);
  border-bottom: var(--outline-w) solid var(--hair);
  animation: unfold 0.28s var(--ease-pop);
}
.dials-panel[hidden] { display: none; }
@keyframes unfold { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.dial {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "swatch label value" "swatch range range" "hint hint hint";
  column-gap: 0.6rem; row-gap: 0.2rem; align-items: center;
}
.dial-label { grid-area: label; font-family: var(--font-display); font-weight: 600; font-size: 0.86rem; color: var(--ink); }
/* Mini plate: the swatch is drawn in the plate font at true stage px, so it is the
   one bit of Helvetica in the chrome — on purpose, it previews the figure. */
.dial-swatch {
  grid-area: swatch; align-self: center;
  display: block; width: 72px; height: 28px; padding: 3px 4px; box-sizing: content-box;
  color: var(--ink); background: var(--export-bg);
  border: var(--outline-w) solid var(--line); border-radius: 10px;
  font-family: var(--font-scheme);
  overflow: visible;
}
.dial-value {
  grid-area: value; justify-self: end;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--ink); background: var(--card);
  border: var(--outline-w) solid var(--line); border-radius: var(--r-pill);
  padding: 0.1rem 0.5rem; min-width: 4.6em; text-align: center; white-space: nowrap;
}
.dial-hint { grid-area: hint; font-size: 0.72rem; font-weight: 600; color: var(--mute); line-height: 1.3; }
/* Chunky range: hairline track, ink-rimmed thumb with the same "press" shadow as the chips. */
.dial-range {
  grid-area: range; width: 100%; height: 26px; margin: 0;
  appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer;
}
.dial-range:focus-visible { outline: none; }
.dial-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--line); }
.dial-range::-moz-range-track { height: 6px; border-radius: 3px; background: var(--line); }
.dial-range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--ink); }
.dial-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -8px; border-radius: 50%;
  background: var(--card); border: var(--outline-w) solid var(--outline);
  box-shadow: 0 3px 0 var(--outline);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.15s ease;
}
.dial-range::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--card); border: var(--outline-w) solid var(--outline);
  box-shadow: 0 3px 0 var(--outline);
}
.dial-range:hover::-webkit-slider-thumb { background: var(--card-2); transform: translateY(-1px); box-shadow: 0 4px 0 var(--outline); }
.dial-range:active::-webkit-slider-thumb { transform: translateY(3px); box-shadow: 0 0 0 var(--outline); }
.dial-range:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--hood); outline-offset: 2px; }
.dial-range:focus-visible::-moz-range-thumb { outline: 3px solid var(--hood); outline-offset: 2px; }
/* Reset lives in a slim fourth column that only exists while a dial is off-default,
   level with the dial labels, so the panel reads as one row of controls. */
.dials-panel.is-tuned { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
.dial-reset { align-self: start; font-size: 0.78rem; min-height: 28px; padding: 0 0.45rem; margin: -0.15rem 0 0 -0.4rem; }
.dial-reset[hidden] { display: none; }

/* ————— Buttons ————— */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em;
  color: var(--ink); background: var(--card);
  border: var(--outline-w) solid var(--outline); border-radius: var(--r-pill);
  padding: 0.65rem 1.25rem; min-height: 46px;
  box-shadow: 0 var(--press) 0 var(--outline);
  transform: translateY(0);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.15s ease;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 calc(var(--press) + 1px) 0 var(--outline); }
.btn:active:not(:disabled) { transform: translateY(var(--press)); box-shadow: 0 0 0 var(--outline); }
.btn:disabled { opacity: 0.45; box-shadow: none; border-style: dashed; background: transparent; }
.btn--primary,
#download-png {
  font-size: 1.15rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: #fff; background: var(--copper);
  padding: 0.8rem 1.7rem; min-height: 54px;
  text-shadow: 0 1px 0 rgba(26, 21, 16, 0.25);
}
#download-png:hover:not(:disabled) { background: var(--copper); filter: saturate(1.1) brightness(1.04); }
#download-png:disabled,
#download-svg:disabled { color: var(--mute); background: transparent; filter: none; text-shadow: none; }
.btn--text {
  border-color: transparent; box-shadow: none; background: transparent; color: var(--mute);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.btn--text:hover:not(:disabled) { color: var(--ink); box-shadow: none; transform: none; background: transparent; }
.btn--text:active:not(:disabled) { transform: none; }
.btn--text:disabled { border-color: transparent; }
#draw { font-size: 0.85rem; min-height: 44px; padding: 0.45rem 1rem; --press: 3px; }
#draw::before { content: "↻"; font-size: 1rem; }
#draw:hover:not(:disabled)::before { display: inline-block; animation: spin 0.6s var(--ease-pop); }
@keyframes spin { to { transform: rotate(360deg); } }
.actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.75rem;
  margin-top: 0.15rem; padding: 0 0.25rem;
}
.after { font-size: 0.8rem; color: var(--mute); font-weight: 600; max-width: 46em; padding: 0 0.25rem; }
.after--inline { margin-left: auto; text-align: right; }
.after:not([hidden]) + .after { margin-top: -0.4rem; }

.foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.9rem;
  padding: 0.2rem 0.25rem 0;
}
.legal {
  margin: 0;
  font-size: 0.78rem; font-weight: 600; color: var(--mute);
  max-width: 44em; line-height: 1.45;
}

/* ————— Suggest an improvement: quiet button, then a paper sheet ————— */
.btn--quiet {
  font-size: 0.85rem; letter-spacing: 0.01em;
  padding: 0.4rem 0.95rem; min-height: 38px;
  color: var(--mute); background: var(--card-2);
  border-color: var(--line); box-shadow: none;
}
.btn--quiet:hover:not(:disabled) {
  color: var(--ink); background: var(--card);
  border-color: var(--outline); box-shadow: 0 2px 0 var(--outline);
}
.btn--quiet::before { content: "✎"; font-size: 0.95rem; }

.sheet {
  width: min(33rem, calc(100vw - 2rem));
  margin: auto; padding: 0;
  color: var(--ink); background: var(--card);
  border: var(--outline-w) solid var(--outline);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}
.sheet::backdrop { background: rgba(26, 21, 16, 0.42); }
.sheet[open] { animation: sheet-in 0.26s var(--ease-pop); }
@keyframes sheet-in {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
.sheet-form { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.05rem 1.2rem 1.15rem; }
.sheet-head { display: flex; align-items: center; gap: 0.6rem; }
.sheet-title {
  flex: 1; margin: 0;
  font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: 0.01em;
}
.sheet-x {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; margin: -0.2rem -0.3rem -0.2rem 0;
  border: none; border-radius: 50%;
  font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; line-height: 1;
  color: var(--ink); background: transparent; cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.sheet-x:hover, .sheet-x:focus-visible { color: var(--ink); background: rgba(26, 21, 16, 0.08); }
.sheet-sub { margin: -0.25rem 0 0.15rem; font-size: 0.85rem; font-weight: 600; color: var(--mute); line-height: 1.45; }
.sheet-field { display: flex; flex-direction: column; gap: 0.3rem; }
.sheet-field .lbl { margin: 0; }
.sheet-field textarea, .sheet-field input {
  width: 100%;
  font-family: var(--font-ui); font-weight: 600; font-size: 0.92rem; line-height: 1.45;
  color: var(--ink); caret-color: var(--copper);
  background: var(--paper);
  border: var(--outline-w) solid var(--outline); border-radius: 14px;
  padding: 0.55rem 0.75rem;
  outline: none;
  box-shadow: inset 0 3px 0 rgba(26, 21, 16, 0.06);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.sheet-field textarea { min-height: 6.4rem; resize: vertical; }
.sheet-field textarea::placeholder, .sheet-field input::placeholder { color: rgba(92, 83, 72, 0.6); }
.sheet-field textarea:focus, .sheet-field input:focus {
  border-color: var(--copper);
  box-shadow: 0 0 0 4px rgba(196, 92, 38, 0.22), inset 0 3px 0 rgba(26, 21, 16, 0.06);
}
.sheet-row { display: flex; align-items: flex-end; gap: 0.6rem; }
.sheet-field--grow { flex: 1; min-width: 0; }
.sheet-send { flex: none; font-size: 1rem; padding: 0.65rem 1.4rem; min-height: 48px; }
.sheet-fine {
  margin: 0.3rem 0 0; padding-top: 0.7rem;
  border-top: 1px solid var(--hair);
  font-size: 0.75rem; font-weight: 600; color: var(--mute); line-height: 1.4;
}
.note-honey {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
}
#after-download:not([hidden]) {
  align-self: flex-start;
  color: var(--ok); background: rgba(31, 107, 90, 0.1);
  border: var(--outline-w) solid var(--ok); border-radius: 14px; padding: 0.55rem 0.8rem;
  animation: pop 0.45s var(--ease-pop);
}
@keyframes pop { from { transform: scale(0.94); opacity: 0; } to { transform: none; opacity: 1; } }

/* ————— Plate editing affordances (inputs swapped in by editor.hydrateArrow) ————— */
.arrow-block .arrow-reagents,
.arrow-block .arrow-conditions {
  font-family: var(--font-scheme);
  font-size: var(--type-reagent-stage-size);
  font-weight: var(--type-reagent-weight);
  line-height: var(--type-cond-line-height);
  height: calc(var(--type-reagent-stage-size) * var(--type-cond-line-height));
  margin-bottom: var(--space-arrow-text-stage);
  text-align: center;
  color: var(--color-reagent);
  background: transparent;
  border: none;
  border-bottom: 1.5px solid transparent;
  border-radius: 0;
  padding: 0;
  width: 100%;
  outline: none;
}
.arrow-block .arrow-conditions {
  font-size: var(--type-condition-below-stage-size);
  font-weight: var(--type-condition-below-weight);
  height: calc(var(--type-condition-below-stage-size) * var(--type-cond-line-height));
  margin-bottom: 0;
  margin-top: var(--space-arrow-text-stage);
  color: var(--color-condition-below);
}
.arrow-block .arrow-reagents:focus,
.arrow-block .arrow-conditions:focus {
  border-bottom-color: var(--ink);
  box-shadow: var(--edit-focus);
}

/* ═════════════════ PLATE — publication figure, keep flat ═════════════════ */
/* Plate padding lives on the wrapper so applyFitToWidth (which reads #scheme-stage
   clientWidth and sets its height) measures exactly the drawing area. */
.scheme-scroll {
  overflow-x: hidden; overflow-y: hidden; background: var(--export-bg);
  padding: var(--space-plate-pad);
}
#scheme-stage {
  min-height: 0;
  padding: 0;
  background: var(--export-bg);
  color: var(--ink);
}
#scheme-stage.empty {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-weight: 600;
  color: rgba(92, 83, 72, 0.7); font-size: 0.9rem; min-height: 150px;
  text-align: center; padding: 1.5rem 1.25rem;
  outline: 2px dashed rgba(26, 21, 16, 0.18); outline-offset: -2px;
}
.scheme {
  display: flex; align-items: center; flex-wrap: nowrap;
  gap: var(--space-struct-arrow);
  overflow: visible;
  transform-origin: left center;
  width: fit-content; max-width: 100%; margin-inline: auto; /* centred when it fits; fit-to-width JS scales from left */
}
.species { display: flex; flex-direction: column; align-items: center; }
.species.is-ghost .ghost-slot {
  min-width: 7.5rem; min-height: 4.5rem;
  color: var(--scheme-ghost);
  border: 1px dashed var(--scheme-ghost);
  border-radius: 8px;
}
.struct-slot { display: flex; align-items: center; justify-content: center; background: transparent; padding: 0; }
.struct-slot svg, .struct-slot canvas { display: block; }
.struct-slot.label-only {
  /* unresolved species: plain label, medium weight, matches export.js 13 px */
  min-width: 5rem; padding: 0.3rem 0.2rem;
  font-family: var(--font-scheme);
  font-size: var(--type-label-fallback-size);
  font-weight: 500;
  line-height: var(--type-cond-line-height);
  text-align: center; word-break: break-word;
  color: var(--ink);
}
.struct-slot.text-species {
  /* MeOH / H2O / MeNH2 typeset like Indigo atom labels: 20 px regular */
  min-width: 0; padding: 0 0.15rem;
  font-size: var(--type-text-species-size);
  font-weight: 400;
  white-space: nowrap; word-break: normal;
}
.plus {
  font-family: var(--font-scheme);
  font-size: var(--type-plus-size); font-weight: 400; color: var(--ink);
  line-height: 1;
  margin-inline: calc(var(--space-frag-gap) - var(--space-struct-arrow));
}
.arrow-block {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0; padding: 0; /* text ↔ shaft distance comes from the stack margins (= export) */
  min-width: var(--space-arrow-len);
}
.arrow-block .stack {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  margin-bottom: var(--space-arrow-text-stage);
  font-family: var(--font-scheme);
  font-size: var(--type-reagent-stage-size);
  font-weight: var(--type-reagent-weight);
  line-height: var(--type-cond-line-height);
  text-align: center; color: var(--color-reagent);
  white-space: nowrap;
}
/* Typeset stacks open as a field on click (editor.hydrateArrow). */
.arrow-block .stack[data-edit] { cursor: text; min-width: 3em; border-radius: 4px; transition: background-color 0.15s; }
.arrow-block .stack[data-edit]:hover { background: rgba(196, 92, 38, 0.08); }
.arrow-block .stack[data-edit]:focus-visible { outline-offset: 1px; }
.arrow-block .stack.below {
  margin-bottom: 0;
  margin-top: var(--space-arrow-text-stage);
  color: var(--color-condition-below);
  font-size: var(--type-condition-below-stage-size);
  font-weight: var(--type-condition-below-weight);
}
/* formula.js subscripts (H2SO4, Pd(PPh3)4): shrink without inflating the line box */
.arrow-block .stack span sub,
.struct-slot.text-species sub {
  font-size: 0.72em; vertical-align: baseline; position: relative; top: 0.25em; line-height: 0;
}
.arrow-block svg { display: block; height: 14px; }
/* Hand-fit: every item on the plate can be dragged (plate.js). The preview is a
   CSS translate; the committed layout comes back through margins from export.js.
   The hover/drag look itself lives under "Plate drag affordance" further down. */
.scheme > [data-key] { cursor: grab; touch-action: none; }
.scheme > [data-key] input { cursor: text; }
.scheme > .is-dragging { cursor: grabbing; z-index: 7; }
#scheme-stage.is-plate-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
/* ═════════════════ HOLO — tilt + foil, pointer driven ═════════════════ */
.holo {
  --px: 50%; --py: 50%;      /* pointer position inside the card, % */
  --rx: 0deg; --ry: 0deg;    /* rotateY / rotateX */
  --bx: 50%; --by: 50%;      /* foil background offset */
  --pc: 0;                   /* pointer distance from centre, 0..1 */
  --holo-o: 0;               /* shine opacity gate */
  --holo-gain: 1;            /* per-element tilt multiplier */
  position: relative;
  --holo-scale: 1;
  transform: perspective(720px) rotateY(calc(var(--rx) * var(--holo-gain))) rotateX(calc(var(--ry) * var(--holo-gain))) scale(var(--holo-scale));
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.6s var(--ease-pop);
}
.holo.is-holo-active { transition: transform 0.1s ease-out; z-index: 6; }

/* holo.js still tags species on the plate (.holo / .is-holo-active / --rx …) but the
   plate opts out of the card treatment: no tilt, no foil, no badge. A structure
   you are about to drag must not lean or jump under the pointer. */
#scheme-stage .holo {
  transform: none; transform-style: flat; will-change: auto;
  transition: filter 0.18s ease; /* the drag-affordance shadow, nothing else */
}
#scheme-stage .holo::before, #scheme-stage .holo::after { content: none; }

/* Deck chips: gentle tilt + a foil sweep. */
.example.holo { --holo-gain: 0.45; overflow: hidden; }
.example.holo::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background-image:
    radial-gradient(farthest-corner circle at var(--px) var(--py), rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.4) 30%, rgba(255, 255, 255, 0) 70%),
    repeating-linear-gradient(115deg,
      #ffc2d1 0%, #ffe6b3 10%, #c9f7d5 20%, #bfe9ff 30%, #dcc6ff 40%, #ffc2d1 50%);
  background-size: 100% 100%, 320% 320%;
  background-position: center, calc((50% - var(--bx)) * 2.6 + 50%) calc((50% - var(--by)) * 3.5 + 50%);
  mix-blend-mode: multiply;
  opacity: calc(var(--holo-o) * 0.6);
  transition: opacity 0.35s ease, background-position 0.6s var(--ease-pop);
}
.example.holo.active::after { mix-blend-mode: screen; opacity: calc(var(--holo-o) * 0.4); }

/* ————— Plate drag affordance (screen only) ————— */
/* Sits outside the PLATE section on purpose: it is the one place the chemistry gets a
   shadow, and it is a filter on the item, never on #scheme-stage. export.js paints the
   PNG/SVG itself and never sees this. Hover lifts the item a hair off the paper; the
   drag lifts it further. No border, no fill, no scale — the footprint never changes. */
.scheme > [data-key] { transition: filter 0.18s ease; }
#scheme-stage:not(.is-plate-dragging) .scheme > [data-key]:hover {
  filter: drop-shadow(0 1.5px 1.5px rgba(26, 21, 16, 0.28));
}
.scheme > .is-dragging {
  filter: drop-shadow(0 6px 6px rgba(26, 21, 16, 0.26));
  transition: none;
}

/* ————— Responsive ————— */
@media (max-width: 720px) {
  .stage { padding-bottom: 2rem; }
  .board { gap: 0.9rem; }
  .card, .scheme-stage { border-radius: 18px; }
  .brand img.wordmark { height: 26px; }
  .title { font-size: clamp(1.5rem, 7vw, 2rem); }
  .panel { --panel-x: 0.9rem; --panel-b: 0.9rem; padding: 0.95rem var(--panel-x) var(--panel-b); }
  .fieldset { grid-template-columns: 1fr; }
  .panel-foot { align-items: flex-start; flex-direction: column; }
  .drop { margin-left: 0; }
  .roster-summary { flex-wrap: wrap; gap: 0.3rem 0.6rem; }
  .editor { grid-template-columns: 1fr; gap: 0.9rem; }
  .editor-stack + .editor-stack { border-left: none; padding-left: 0; border-top: var(--outline-w) solid var(--hair); padding-top: 0.8rem; }
  .scheme-tools { padding: 0.3rem 0.5rem 0 0.7rem; }
  .plate-hint { display: none; }
  .dials-panel, .dials-panel.is-tuned { grid-template-columns: 1fr; gap: 0.7rem; padding: 0.6rem 0.7rem 0.65rem; }
  .dial-reset { justify-self: end; margin: 0; }
  .after--inline { margin-left: 0; text-align: center; }
  .scheme-scroll { padding: var(--space-plate-pad-sm); }
  #scheme-stage { padding: 0; }
  .scheme-scroll { overflow-x: hidden; }
  .actions { flex-direction: column; align-items: stretch; }
  .actions .btn { width: 100%; }
  .after { text-align: center; }
  .sheet-form { padding: 0.95rem 1rem 1.05rem; }
  .sheet-row { flex-direction: column; align-items: stretch; }
  .sheet-send { width: 100%; }
  .foot { justify-content: center; text-align: center; }
  .example.holo { --holo-gain: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .holo { transform: none !important; will-change: auto; }
  .holo::after, .example.holo::after { display: none; }
  .btn:hover:not(:disabled), .editor-row:focus-within, .drop.over .drop-target { transform: none; }
  .dials-panel, .sheet[open] { animation: none; }
}