/* Counting Atoms: the chemist's ledger.
   Identity: Lavoisier balanced chemistry like an account (he was a tax farmer, and wrote that a reaction could be read
   "as forming an algebraic equation"). So the site is set like a good eighteenth-century book and kept like a ledger:
   Libre Caslon (text and display) for the reading voice, Source Sans 3 with tabular figures for every number in a
   figure, ledger-green rules, totals closed with the bookkeeper's double rule, and red ink for anything that does not
   balance. White page; one accent, ledger green. Atoms keep the CPK colours chemists already read.
   Data colours, fixed meanings: primary (blue ink) = reactants / what you put in; second (umber) = products / what
   comes out; ok (green) = balanced; warn (red ink) = short or over, does not balance; ref (ink) = reference. */
/* Sub- and superscript digits (H₂O, SO₄²⁻), derived from each face's own ² by factory/tools/mksups.py */
@font-face { font-family: "Libre Caslon Text"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/libre-caslon-text-sups-400-normal.woff2") format("woff2"); unicode-range: U+2070-209F; }
@font-face { font-family: "Libre Caslon Text"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/libre-caslon-text-sups-400-italic.woff2") format("woff2"); unicode-range: U+2070-209F; }
@font-face { font-family: "Libre Caslon Text"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/libre-caslon-text-sups-700-normal.woff2") format("woff2"); unicode-range: U+2070-209F; }
@font-face { font-family: "Libre Caslon Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/libre-caslon-display-sups-400-normal.woff2") format("woff2"); unicode-range: U+2070-209F; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/source-sans-3-sups-400-normal.woff2") format("woff2"); unicode-range: U+2070-209F; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/source-sans-3-sups-600-normal.woff2") format("woff2"); unicode-range: U+2070-209F; }
:root {
  --bg: #fff; --surface: #f4f7f3; --ink: #161616; --ink-soft: #333; --muted: #5a5a5a; --rule: #dfe5dd;
  --accent: #14613f; --accent-ink: #fff; --link: #14613f; --focus: #14613f; --mark: rgba(20, 97, 63, .1);
  --font-display: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif;
  --font-serif: "Libre Caslon Text", Georgia, serif;
  --font-sans: "Source Sans 3", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: var(--font-serif); --font-ui: var(--font-sans); --font-h1: var(--font-display);
  --fs-body: 1.13rem; --lh-body: 1.62; --prose: 41rem; --wide: 68rem; --radius: 2px;
  --fig-bg: #fff; --fig-surface: #f4f7f3; --fig-ink: #161616; --fig-muted: #575757; --fig-grid: rgba(20, 97, 63, .14);
  --fig-grid-strong: rgba(20, 97, 63, .55); --fig-border: transparent;
  --ledger-rule: #b9cdbf; --ledger-paper: #f6faf5; --ink-red: #b42318;
  --c-primary: #1f5fa8;  /* reactants */
  --c-ref: #1f1f1f;
  --c-second: #a4500f;   /* products */
  --c-third: #7a4fa0;
  --c-ok: #0b7a55; --c-warn: #b42318;
  --ctl-accent: #14613f;
  --band-bg: #114f34; --band-ink: #fff; --band-muted: rgba(255,255,255,.86);
}
:root[data-theme="dark"] {
  --bg: #111312; --surface: #1a1e1b; --ink: #ecece8; --ink-soft: #cfd0cb; --muted: #a2a49e; --rule: #2e3530;
  --accent: #6cc79a; --link: #7fd3a8; --focus: #7fd3a8; --mark: rgba(108, 199, 154, .15);
  --fig-bg: #111312; --fig-surface: #1a1e1b; --fig-ink: #ecece8; --fig-muted: #a9aba5; --fig-grid: rgba(127, 211, 168, .14);
  --fig-grid-strong: rgba(127, 211, 168, .5);
  --ledger-rule: #355443; --ledger-paper: #151a17; --ink-red: #ff7b6e;
  --c-primary: #6ea8ec; --c-ref: #f0f0f0; --c-second: #e3955a; --c-third: #b393f2; --c-ok: #4fcf9b; --c-warn: #ff7b6e;
  --ctl-accent: #6cc79a; --band-bg: #0d3a27;
}

/* Header */
.site-header { border-bottom: 1px solid var(--rule); }
.wordmark { font: 400 1.25rem/1 var(--font-display); letter-spacing: 0; }
.wordmark .wm-n { color: var(--accent); }
.site-nav a { font-family: var(--font-ui); font-size: .95rem; }

/* Headings */
h1 { font-family: var(--font-h1); font-weight: 400; letter-spacing: -.01em; line-height: 1; }
h2 { font: 700 clamp(1.45rem, 3.2vw, 1.85rem)/1.18 var(--font-serif); margin-top: 2.8rem; }
h3 { font: 700 1.16rem/1.3 var(--font-serif); }
.prose .lede { font-size: 1.2em; line-height: 1.5; }
sub, sup { line-height: 0; font-size: .72em; }
.chem { white-space: nowrap; }
var { font-style: italic; }
.num, .prose td.num { font-family: var(--font-ui); font-variant-numeric: tabular-nums lining-nums; }

/* The bookkeeper's double rule: closes a title, a total, a balanced account */
.dbl { border: 0; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; height: 3px; margin: 0; }

/* Chapter title on the ledger-green cloth */
.essay-head-wrap.band { padding: 0; margin-bottom: 0; }
.essay-head-wrap.band .essay-head { padding: 2.1rem var(--gutter) 1.5rem; }
.essay-head h1 { font-size: clamp(2.5rem, 6.4vw, 4.2rem); margin: .08em 0 .18em; }
.band .kicker { font: 600 .98rem/1.3 var(--font-ui); }
.band .kicker span { color: var(--band-muted); font-weight: 400; }
.band .dek { font-size: clamp(1.1rem, 2.3vw, 1.36rem); max-width: 40rem; line-height: 1.42; }
.band .meta-line { font-family: var(--font-ui); }
.essay-head-wrap.band::after { content: ""; display: block; height: 3px; border-top: 1px solid var(--band-bg); border-bottom: 1px solid var(--band-bg); background: var(--bg); }
.essay-plate { max-width: var(--wide); margin: 0 auto 2rem; padding: .8rem var(--gutter) 0; }
.essay-plate .figure { margin: 0; }
.essay-plate figcaption { max-width: 46rem; }
@media (max-width: 559px) {
  .essay-head-wrap.band .essay-head { padding: .95rem var(--gutter) .8rem; }
  .band .dek { margin-bottom: .1rem; font-size: 1.02rem; line-height: 1.36; }
  .essay-head h1 { font-size: 2.3rem; }
  .band .meta-line { display: none; }
  .band .kicker { font-size: .9rem; margin-bottom: .1rem; }
  .essay-plate { padding-top: .4rem; }
}

/* Home */
.ca-home-head { max-width: var(--wide); margin: 0 auto; padding: 1.7rem var(--gutter) .3rem; }
.ca-home-head h1 { font-size: clamp(3rem, 9.5vw, 6.4rem); margin: 0; line-height: .95; }
.ca-home-head h1 em { font-style: normal; color: var(--accent); }
.ca-title { display: inline-block; }
.ca-home-head h1 { padding-bottom: .16em; }
.ca-home-head .dbl { color: var(--ink); margin: 0 0 .8rem; }
.ca-home-head .dek { margin: 0; max-width: 42rem; font-size: clamp(1.08rem, 2.3vw, 1.36rem); line-height: 1.42; }
.ca-plate { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }
.ca-plate .figure { margin: .5rem 0 0; }
.ca-plate figcaption { max-width: 46rem; }
.ca-plate .start { margin: .9rem 0 0; }
.btn-start { font: 600 1.05rem var(--font-ui); }
@media (max-width: 559px) {
  .ca-home-head { padding-top: .8rem; }
  .ca-home-head h1 { font-size: 2.9rem; }
  .ca-home-head .dbl { margin: 0 0 .5rem; }
  .ca-home-head .dek { font-size: 1rem; line-height: 1.36; }
}
.home-cards li::marker { font: 400 1.4rem var(--font-display); color: var(--accent); }
.home-cards .card-t { font: 400 1.45rem/1.2 var(--font-display); }
.home-tools { max-width: var(--prose); margin: 0 auto 3rem; padding: 0 var(--gutter); }
.home-tools ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ledger-rule); }
.home-tools li { border-bottom: 1px solid var(--ledger-rule); }
.home-tools a { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); padding: .7rem 0; }
.home-tools .card-t { font-weight: 700; color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.home-tools .card-d { color: var(--ink-soft); font-size: .98rem; }

/* Figures */
.fig-n { font: 600 .84rem var(--font-ui); font-variant: all-small-caps; letter-spacing: .04em; color: var(--accent); }
.figure figcaption { font-size: .97rem; }
.w-note { font-family: var(--font-ui); font-size: 1.02rem; color: var(--ink-soft); max-width: 46rem; line-height: 1.45; }
.w-note b, .w-note strong { color: var(--fig-ink); font-weight: 600; }
.w-stage canvas { border-radius: 0; }
.w-stage canvas:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.callout-history { border-left-color: var(--accent); }
.simplification { border-left-color: var(--c-second); }

/* Tables in prose */
.prose table { font-family: var(--font-ui); font-size: .97rem; border-collapse: collapse; width: 100%; }
.prose th, .prose td { padding: .35rem .5rem; border-bottom: 1px solid var(--ledger-rule); text-align: left; vertical-align: top; }
.prose th { font-weight: 600; }
.prose td.num, .prose th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.eq { font-size: 1.18rem; }
.in-word { color: var(--c-primary); font-weight: 700; }
.out-word { color: var(--c-second); font-weight: 700; }
.red-ink { color: var(--ink-red); }

/* ---------------- The ledger (shared by the reaction ledger, balancer and calculators) */
.lg { font-family: var(--font-ui); font-variant-numeric: tabular-nums lining-nums; width: 100%; border-collapse: collapse; background: var(--ledger-paper); color: var(--fig-ink); font-size: 1rem; }
.lg caption { text-align: left; font: 600 .95rem var(--font-ui); color: var(--fig-muted); padding: 0 0 .3rem; caption-side: top; }
.lg th, .lg td { padding: .32rem .55rem; border-bottom: 1px solid var(--ledger-rule); text-align: right; white-space: nowrap; }
.lg th:first-child, .lg td:first-child { text-align: left; }
.lg thead th { font-weight: 600; color: var(--fig-muted); border-bottom: 1px solid var(--fig-grid-strong); }
.lg td + td, .lg th + th { border-left: 1px solid var(--ledger-rule); }
.lg tfoot td { border-bottom: 0; border-top: 1px solid var(--fig-ink); font-weight: 600; }
.lg tfoot tr:last-child td { box-shadow: inset 0 -4px 0 -3px var(--fig-ink); }
.lg .short { color: var(--ink-red); }
.lg .even { color: var(--c-ok); }
.lg .el-name { color: var(--fig-muted); font-size: .9em; margin-left: .3em; }
.lg .in { color: var(--c-primary); }
.lg .out { color: var(--c-second); }
.lg-wrap { overflow-x: auto; }
.lg .mark { font-weight: 600; }
.lg-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; font-family: var(--font-ui); margin: .55rem 0 0; font-variant-numeric: tabular-nums; }
.lg-total .big { font-size: 1.12rem; font-weight: 600; }

/* Steppers for coefficients */
.coef-row { display: grid; gap: .5rem 1rem; grid-template-columns: repeat(auto-fill, minmax(9.2rem, 1fr)); margin: .55rem 0 .2rem; }
.coef { display: flex; flex-direction: column; gap: .2rem; font-family: var(--font-ui); }
.coef .coef-lab { font-size: .98rem; color: var(--fig-ink); }
.coef .coef-lab .side { font-size: .85rem; color: var(--fig-muted); margin-left: .3em; }
.coef .st-row { display: flex; align-items: stretch; }
.coef button { min-width: 44px; min-height: 44px; font: 600 1.25rem/1 var(--font-ui); padding: 0; border: 1px solid var(--fig-grid-strong); background: var(--fig-bg); color: var(--fig-ink); cursor: pointer; border-radius: 0; }
.coef button:hover { background: var(--mark); }
.coef input { width: 3.4rem; text-align: center; font: 600 1.15rem var(--font-ui); border: 1px solid var(--fig-grid-strong); border-left: 0; border-right: 0; border-radius: 0; background: var(--fig-bg); color: var(--fig-ink); -moz-appearance: textfield; }
.coef input::-webkit-inner-spin-button, .coef input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.coef.in .coef-lab b { color: var(--c-primary); }
.coef.out .coef-lab b { color: var(--c-second); }

/* Text-entry tools */
.tool-form { display: flex; flex-wrap: wrap; gap: .5rem .6rem; align-items: flex-end; font-family: var(--font-ui); }
.tool-form label { display: flex; flex-direction: column; gap: .2rem; font-size: .98rem; color: var(--fig-ink); flex: 1 1 14rem; }
.tool-form input[type=text], .tool-form select { font: 500 1.2rem var(--font-ui); padding: .45rem .55rem; border: 1px solid var(--fig-grid-strong); border-radius: 2px; background: var(--fig-bg); color: var(--fig-ink); min-height: 44px; width: 100%; box-sizing: border-box; }
.tool-form input[type=text]:focus { outline: 2px solid var(--focus); outline-offset: 0; }
.tool-form .w-btn { min-height: 44px; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0 0; font-family: var(--font-ui); align-items: center; }
.chips .chips-lab { color: var(--fig-muted); font-size: .92rem; margin-right: .2rem; }
.chip { font: 500 .95rem var(--font-ui); padding: .3rem .6rem; min-height: 36px; border: 1px solid var(--ledger-rule); background: var(--fig-bg); color: var(--fig-ink); border-radius: 2px; cursor: pointer; }
.chip:hover { border-color: var(--accent); }
.chip[aria-pressed="true"] { border-color: var(--accent); background: var(--mark); }
.answer { font-family: var(--font-ui); margin: .8rem 0 .4rem; }
.answer .ans-big { font: 600 clamp(1.9rem, 6vw, 2.7rem)/1.1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--fig-ink); }
.answer .ans-unit { font-size: .55em; font-weight: 400; color: var(--fig-muted); }
.answer .ans-of { font-size: 1.05rem; color: var(--ink-soft); }
.answer .dbl { width: 12rem; color: var(--fig-ink); margin: .3rem 0 0; }
.refuse { font-family: var(--font-ui); border-left: 3px solid var(--ink-red); padding: .45rem .8rem; margin: .7rem 0; background: var(--ledger-paper); color: var(--fig-ink); }
.refuse .r-h { color: var(--ink-red); font-weight: 600; }
.refuse .chips { margin-top: .4rem; }
.notice { font-family: var(--font-ui); font-size: .95rem; color: var(--ink-soft); margin: .35rem 0; }
.working { font-family: var(--font-ui); margin-top: .8rem; }
.working summary { cursor: pointer; font-weight: 600; color: var(--link); min-height: 32px; }
.copy-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: .2rem 0 0; }
.share-bar { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.eq-out { font: 600 clamp(1.2rem, 4vw, 1.6rem)/1.35 var(--font-ui); margin: .7rem 0 .3rem; overflow-wrap: anywhere; }
.eq-out .cf { color: var(--accent); }
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; font-family: var(--font-ui); font-variant-numeric: tabular-nums; margin: .5rem 0; }
.chain .fr { display: inline-flex; flex-direction: column; align-items: center; }
.chain .fr .nu { border-bottom: 1px solid var(--fig-ink); padding: 0 .3rem; }
.chain .fr .de { padding: 0 .3rem; }
.chain .op { color: var(--fig-muted); }
.mx { border-collapse: collapse; font-family: var(--font-ui); font-variant-numeric: tabular-nums; margin: .3rem 0; }
.mx td, .mx th { padding: .25rem .5rem; text-align: right; min-width: 2.6rem; }
.mx th { color: var(--fig-muted); font-weight: 600; }
.mx tbody td { border-left: 1px solid var(--ledger-rule); }
.mx .pivot { color: var(--accent); font-weight: 700; }
.mx .zero { color: var(--fig-muted); }
.mx .changed { background: var(--mark); }
.theme-toggle { white-space: nowrap; }
@media (max-width: 559px) { .wordmark { font-size: 1.12rem; } }

/* Molar mass: share bar and swatches */
.mm-bar { display: flex; height: 26px; margin: .7rem 0 .2rem; border: 1px solid var(--fig-grid-strong); }
.mm-seg { display: flex; align-items: center; justify-content: center; min-width: 2px; border-right: 1px solid var(--fig-bg); }
.mm-seg:last-child { border-right: 0; }
.mm-seg-l { font: 600 .85rem var(--font-ui); color: #fff; }
.mm-seg-l.dark { color: #222; }
.lg .sw { display: inline-block; width: .8em; height: .8em; border-radius: 50%; border: 1px solid rgba(0,0,0,.45); margin-right: .4em; vertical-align: -.05em; }
.mm-conv { margin-top: 1.2rem; padding-top: .8rem; border-top: 1px solid var(--ledger-rule); }
.tool-form label.narrow { flex: 0 1 7rem; }
.ca-tool { padding-top: .1rem; }
.lim-grid { display: grid; gap: .6rem; margin: .8rem 0 .6rem; font-family: var(--font-ui); }
.lim-row { display: grid; grid-template-columns: minmax(10rem, 15rem) 1fr; gap: .3rem 1rem; align-items: center; }
.lim-row label { font-size: 1rem; }
.lim-in { display: flex; gap: .4rem; flex-wrap: wrap; }
.lim-in input { font: 500 1.1rem var(--font-ui); padding: .4rem .5rem; min-height: 44px; border: 1px solid var(--fig-grid-strong); border-radius: 2px; background: var(--fig-bg); color: var(--fig-ink); width: 9rem; box-sizing: border-box; }
.lim-in select { font: 500 1rem var(--font-ui); min-height: 44px; border: 1px solid var(--fig-grid-strong); border-radius: 2px; background: var(--fig-bg); color: var(--fig-ink); }
@media (max-width: 559px) { .lim-row { grid-template-columns: 1fr; } }
.lg + .lg { margin-top: .9rem; }
.lg td.muted { color: var(--fig-muted); }
.bal-basis { list-style: none; padding: 0; margin: .3rem 0; }
.bal-basis li { font-size: 1.15rem; margin: .2rem 0; }
.mx-fixed { table-layout: fixed; width: calc(var(--ncol) * 5.2rem + 4rem); }
.mx-fixed th:first-child { width: 4rem; }
.mx-fixed td { white-space: nowrap; }
.mx .mx-side td { color: var(--fig-muted); font-size: .85rem; border-left: 0; padding-top: 0; }
.mx thead th { text-align: right; }
.mx-wrap { background: var(--ledger-paper); padding: .3rem .4rem; }
.mx-op { min-height: 3em; }
.frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; font-size: .9em; margin: 0 .15em; }
.frac > span:first-child { border-bottom: 1px solid currentColor; padding: 0 .2em; }
.frac > span:last-child { padding: 0 .2em; }
.eq { overflow-x: auto; }

/* Libre Caslon Display has only a regular weight: never ask for a synthetic bold */
.card-t, .footer-title, .essay-nav a { font-weight: 400; }
.footer-title { font-size: 1.2rem; }
.home-tools .card-t { font: 700 1.05rem var(--font-serif); }

/* Phone: compact ledgers (short headers) and stacked tables (one card per row), so nothing scrolls sideways */
.lg .hs { display: none; }
@media (max-width: 559px) {
  .lg .hl { display: none; } .lg .hs { display: inline; }
  .lg .el-name { display: none; }
  .lg th, .lg td { padding: .3rem .4rem; }
  .lg.stack, .lg.stack tbody, .lg.stack tfoot, .lg.stack tr, .lg.stack td { display: block; width: auto; }
  .lg.stack thead { display: none; }
  .lg.stack caption { display: block; }
  .lg.stack tr { border-bottom: 1px solid var(--fig-grid-strong); padding: .3rem 0; }
  .lg.stack td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .15rem .5rem; text-align: right; white-space: normal; }
  .lg.stack td + td { border-left: 0; }
  .lg.stack td:first-child { display: block; font-weight: 600; text-align: left; }
  .lg.stack td:first-child::before { content: none; }
  .lg.stack td::before { content: attr(data-label); color: var(--fig-muted); text-align: left; font-weight: 400; }
  .lg.stack td.empty { display: none; }
  .lg.stack tfoot td { border-top: 0; }
  .lg.stack tfoot tr { border-top: 1px solid var(--fig-ink); }
}