/* Stanza / one dark color system. Original Composer values, shared by all pages.
   STIX Two Text is loaded remotely; no font binaries are distributed. */
:root {
  color-scheme: dark;
  --stanza-font: "STIX Two Text", Georgia, "Times New Roman", serif;
  --display: var(--stanza-font);
  --mono: var(--stanza-font);
  --bg: #0A0E14;
  --surface-1: #111822;
  --surface-2: #1A2432;
  --border: #24303F;
  --text-1: #E8EFF7;
  --text-2: #AABBCE;
  --text-3: #6B7E95;
  --accent: #5EEAD4;
  --good: #4ADE80;
  --warn: #FBBF24;
  --bad: #F87171;
  --neutral-bar: #3E5068;
  --atom-c: #D5DDE8;
  --atom-n: #7A6CFF;
  --atom-o: #FF2D55;
  --atom-s: #F2D24B;
  --atom-f: #7BD88F;
  --protein: #6F93C4;
  --accent-bg: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-bd: color-mix(in srgb, var(--accent) 38%, transparent);
  --good-bg: color-mix(in srgb, var(--good) 14%, transparent);
  --good-bd: color-mix(in srgb, var(--good) 40%, transparent);
  --warn-bg: color-mix(in srgb, var(--warn) 14%, transparent);
  --warn-bd: color-mix(in srgb, var(--warn) 40%, transparent);
  --bad-bg: color-mix(in srgb, var(--bad) 14%, transparent);
  --bad-bd: color-mix(in srgb, var(--bad) 40%, transparent);
  --scrim: color-mix(in srgb, var(--bg) 93%, transparent);
  /* Compatibility aliases for the original Stanza Studio primitives. */
  --white: var(--surface-1);
  --paper: var(--surface-1);
  --paper-2: var(--surface-2);
  --ink: var(--text-1);
  --ink-2: var(--text-1);
  --slate: var(--text-2);
  --slate-2: var(--text-2);
  --line: var(--border);
  --line-soft: color-mix(in srgb, var(--border) 72%, transparent);
  --blue: var(--accent);
  --violet: var(--protein);
  --ice: var(--text-2);
  --chrome-0: #647B93;
  --chrome-1: #344557;
  --chrome-2: #263546;
  --chrome-3: #40566D;
  --chrome-4: #AABBCE;
  --edge-light: inset 0 1px 0 rgba(232,239,247,.07);
  --edge-dark: inset 0 -1px 0 rgba(0,0,0,.32);
  --edge-light-d: inset 0 1px 0 rgba(232,239,247,.14);
  --edge-dark-d: inset 0 -1px 0 rgba(0,0,0,.55);
  --shadow-sm: 0 4px 18px rgba(0,0,0,.13);
  --shadow-md: 0 18px 45px rgba(0,0,0,.2);
  --shadow-lg: 0 30px 85px rgba(0,0,0,.4);
  --page-max: 1580px;
  --surface-sheen: linear-gradient(140deg, color-mix(in srgb, var(--surface-2) 54%, var(--surface-1)), var(--surface-1) 62%);
}
html { background: var(--bg); }
body { color: var(--text-1); background: var(--bg); }
/* Also overrides the legacy inline monospace styles and SVG chart labels. */
html, body, body *, body *::before, body *::after {
  font-family: var(--stanza-font) !important;
}
body { font-variant-numeric: lining-nums tabular-nums; }
::selection { background: var(--accent); color: var(--bg); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
input, select, textarea { color-scheme: dark; }
input::placeholder, textarea::placeholder { color: var(--text-2); opacity: .8; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-1);
  -webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset;
  caret-color: var(--text-1);
}
button, input, select, textarea { font-variant-numeric: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
.s-page-light {
  background: radial-gradient(ellipse at 80% 24%, rgba(111,147,196,.07), transparent 50%),
    radial-gradient(ellipse at 15% 85%, rgba(94,234,212,.025), transparent 48%), var(--bg);
}
.s-page-grain { opacity: .02; }
.s-metal, .s-bezel {
  border: 1px solid var(--border);
  background: var(--surface-sheen);
  box-shadow: var(--edge-light), var(--edge-dark), var(--shadow-sm);
}
.s-graphite {
  color: var(--text-1);
  border: 1px solid color-mix(in srgb, var(--border) 80%, var(--text-2));
  background: linear-gradient(var(--surface-2), var(--surface-1));
  box-shadow: var(--edge-light-d), var(--edge-dark-d), var(--shadow-sm);
}
h1, h2, h3 { letter-spacing: -.025em; font-weight: 500; }
/* Inline labels overlay only: original image identity/selection is retained. */
.stanza-svg-frame { display: inline-block; position: relative; vertical-align: middle; }
.stanza-svg-frame > img.stanza-svg-loaded { opacity: 0; }
.stanza-svg-frame > .stanza-inline-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cd-mol > .stanza-svg-frame { width: 104px; height: 72px; }
.cd-molcard-img > .stanza-svg-frame { width: 84%; height: 100%; }
.cd-molcard-img .stanza-svg-frame > img { width: 100%; height: 100%; }
.molecule-plate > .stanza-svg-frame, .detail-molecule > .stanza-svg-frame { display: block; width: 100%; height: 100%; }