/* Why Molecules Have Shapes: the ball-and-stick plate.
   Identity: Newsreader (a text face with real optical sizes and a heavy display weight) for reading and titles, set big;
   IBM Plex Sans for figure labels and controls (the technical voice of a lab manual). White page. One accent, the
   violet of the electron-domain lobes ("electron violet"): lone pairs, links, the title field. Atoms keep the CPK
   colours chemists already read (C black, H white, O red, N blue, F/Cl green, S yellow). Data colours, fixed meanings:
   primary (vermilion) = bond angles and measurements; ref (ink) = ideal/model; second (blue) = bond dipoles; third
   (violet) = lone pairs and electron domains; ok (green) = agreement. */
:root {
  --bg: #fff; --surface: #f5f4f1; --ink: #141414; --ink-soft: #343434; --muted: #5d5d5d; --rule: #e2e0dc;
  --accent: #5a2ea6; --accent-ink: #fff; --link: #5a2ea6; --focus: #5a2ea6; --mark: rgba(90, 46, 166, .1);
  --font-display: "Newsreader", Georgia, serif;
  --font-serif: "Newsreader", Charter, Georgia, serif;
  --font-sans: "IBM Plex Sans", -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.2rem; --lh-body: 1.55; --prose: 40rem; --wide: 68rem; --radius: 2px;
  --fig-bg: #fff; --fig-surface: #f5f4f1; --fig-ink: #141414; --fig-muted: #5b5b5b; --fig-grid: rgba(0,0,0,.08);
  --fig-grid-strong: rgba(0,0,0,.4); --fig-border: transparent;
  --c-primary: #c2410c;  /* measured / bond angles */
  --c-ref: #1f1f1f;      /* ideal, model */
  --c-second: #1665b8;   /* bond dipoles */
  --c-third: #6a3bc0;    /* lone pairs, electron domains */
  --c-ok: #0f7d5c; --c-warn: #9a6400;
  --ctl-accent: #5a2ea6;
  --band-bg: #3b1d75; --band-ink: #fff; --band-muted: rgba(255,255,255,.84);
  --t-primary: #a8380a; --t-second: #1259a3; --t-third: #5a2ea6;
}
:root[data-theme="dark"] {
  --bg: #121214; --surface: #1c1c20; --ink: #ecebe8; --ink-soft: #cfcdc8; --muted: #a3a09a; --rule: #34343a;
  --accent: #a98ae8; --link: #b9a0f0; --focus: #b9a0f0; --mark: rgba(169, 138, 232, .16);
  --fig-bg: #121214; --fig-surface: #1c1c20; --fig-ink: #ecebe8; --fig-muted: #a7a49e; --fig-grid: rgba(255,255,255,.09);
  --fig-grid-strong: rgba(255,255,255,.45);
  --c-primary: #f08a4b; --c-ref: #f0f0f0; --c-second: #5aa7f0; --c-third: #b393f2; --c-ok: #3cc39a; --c-warn: #e0a640;
  --ctl-accent: #9c7be6; --band-bg: #2a1557;
  --t-primary: #f08a4b; --t-second: #5aa7f0; --t-third: #b9a0f0;
}

/* Header */
.site-header { border-bottom: 1px solid var(--rule); }
.wordmark { font: 800 1.15rem/1 var(--font-display); letter-spacing: -.01em; }
.wordmark .wm-v { color: var(--accent); font-style: italic; font-weight: 600; }
.site-nav a { font-size: .92rem; }

/* Headings: a heavy Newsreader against calm text */
h1 { font-family: var(--font-h1); font-weight: 800; letter-spacing: -.02em; line-height: .98; }
h2 { font: 800 clamp(1.55rem, 3.4vw, 2.05rem)/1.12 var(--font-display); letter-spacing: -.012em; margin-top: 2.6rem; }
h3 { font: 600 1.25rem/1.25 var(--font-display); }
.prose .lede { font-size: 1.24em; line-height: 1.48; }
sub, sup { line-height: 0; }
.chem { white-space: nowrap; }
var { font-style: italic; }

/* Chapter title field */
.essay-head-wrap.band { padding: 0; margin-bottom: 0; }
.essay-head-wrap.band .essay-head { padding: 2rem var(--gutter) 1.6rem; }
.essay-head h1 { font-size: clamp(2.4rem, 7vw, 4.4rem); margin: .1em 0 .2em; }
.band .kicker { font: 500 .98rem/1.3 var(--font-ui); }
.band .kicker span { color: var(--band-muted); }
.band .dek { font-size: clamp(1.12rem, 2.4vw, 1.4rem); max-width: 38rem; }
.essay-plate { max-width: var(--wide); margin: 0 auto 2rem; padding: .2rem 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: 1.1rem var(--gutter) .9rem; } .band .dek { margin-bottom: .2rem; font-size: 1.05rem; } .essay-head h1 { font-size: 2.3rem; } .band .meta-line { display: none; } }

/* Home: the title in ink at full size, the plate under it */
.mg-home-head { max-width: var(--wide); margin: 0 auto; padding: 1.6rem var(--gutter) 0; }
.mg-home-head h1 { font-size: clamp(2.6rem, 7vw, 4.9rem); margin: 0 0 .12em; }
.mg-home-head h1 em { font-style: italic; font-weight: 600; color: var(--accent); }
.mg-home-head .dek { margin: 0; max-width: 40rem; font-size: clamp(1.08rem, 2.3vw, 1.38rem); }
.mg-plate { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }
.mg-plate .figure { margin: .4rem 0 0; }
.mg-plate figcaption { max-width: 46rem; }
.mg-plate .start { margin: .8rem 0 0; }
.btn-start { font: 600 1.05rem var(--font-ui); }
@media (max-width: 559px) { .mg-home-head { padding-top: .9rem; } .mg-home-head h1 { font-size: 2.55rem; } .mg-home-head .dek { font-size: 1.02rem; line-height: 1.38; } }
.home-cards li::marker { font: 800 1.25rem var(--font-display); color: var(--accent); }
.home-cards .card-t { font-weight: 800; }
.home-tools { max-width: var(--prose); margin: 0 auto 3rem; padding: 0 var(--gutter); }
.home-tools ul { list-style: none; padding: 0; }
.home-tools li { margin: 0 0 1rem; }
.home-tools a { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }

/* Figures */
.fig-n { font: 600 .84rem var(--font-ui); font-variant: all-small-caps; letter-spacing: .04em; color: var(--accent); }
.fig-n::after { content: ""; }
.figure figcaption { font-size: .96rem; }
.w-note { font-size: 1rem; color: var(--ink-soft); max-width: 44rem; }
.w-note b { color: var(--fig-ink); font-weight: 600; }
.w-stage canvas { border-radius: 0; }
.mol-stage canvas:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* Shape builder controls: steppers in a row, options under them */
.sb-deck { margin-top: .5rem; gap: .8rem 1.4rem; align-items: center; }
.stepper .st-row { display: flex; align-items: stretch; gap: 0; }
.stepper .st-btn { min-width: 44px; min-height: 44px; font: 600 1.25rem/1 var(--font-ui); padding: 0; }
.stepper .st-btn:first-child { border-right: 0; }
.stepper .st-btn:last-child { border-left: 0; }
.stepper input { width: 3.2rem; text-align: center; font: 600 1.15rem var(--font-ui); border: 1px solid var(--fig-grid-strong); border-radius: 0; background: var(--fig-bg); color: var(--fig-ink); -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.sb-opts { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; align-items: center; }
.sb-say { margin: .6rem 0 0; font-size: 1.02rem; line-height: 1.45; }
.sb-axe { font-weight: 600; color: var(--t-third); margin-right: .2em; }

/* Tables in prose */
.prose table { font-family: var(--font-ui); font-size: .95rem; border-collapse: collapse; width: 100%; }
.prose th, .prose td { padding: .35rem .5rem; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.prose td.num, .prose th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.eq { font-size: 1.22rem; }
.callout-history { border-left-color: var(--accent); }
.simplification { border-left-color: var(--c-primary); }
.lp-word { color: var(--t-third); font-weight: 600; }
.ang-word { color: var(--t-primary); font-weight: 600; }
.dip-word { color: var(--t-second); font-weight: 600; }

.theme-toggle { white-space: nowrap; }
@media (max-width: 559px) { .wordmark { font-size: 1rem; } }
.sb-deck { display: grid; grid-template-columns: auto auto; justify-content: start; gap: .7rem 1.2rem; }
.sb-deck .sb-opts { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .sb-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; column-gap: 2rem; align-items: center; }
  .sb-wrap > .w-stage { grid-row: 1 / span 3; }
  .sb-wrap .sb-deck { grid-template-columns: auto auto; align-self: end; }
  .sb-wrap .sb-say { align-self: start; }
}
/* VSEPR chart (tool page): a plate of small specimens */
.sb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .9rem .6rem; margin-top: 1.6rem; }
.sb-cell { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; padding: .3rem .4rem .5rem; background: var(--fig-bg); border: 1px solid transparent; border-radius: var(--radius); color: var(--fig-ink); cursor: pointer; text-align: left; font-family: var(--font-ui); }
.sb-cell canvas { width: 140px; height: 110px; align-self: center; }
.sb-cell-t { font: 600 .95rem/1.2 var(--font-ui); }
.sb-cell-d { font: 400 .8rem/1.3 var(--font-ui); color: var(--fig-muted); }
.sb-cell[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.sb-cell:hover { border-color: var(--fig-grid-strong); }
.sb-grid { list-style: none; padding: 0; }
.sb-grid li { display: flex; }
.sb-grid li > .sb-cell { flex: 1; }
.ls-step { font: 600 1.05rem/1.3 var(--font-ui); margin: 0 0 .5rem; color: var(--fig-ink); }
.ls-deck { margin-bottom: .2rem; }
.ls-ledger { margin-top: .3rem; }
.ls-ledger canvas { touch-action: auto; }

.tb-count table { font-family: var(--font-ui); font-size: .92rem; border-collapse: collapse; width: 100%; }
.tb-count th, .tb-count td { padding: .3rem .4rem; border-bottom: 1px solid var(--rule); text-align: left; }
.tb-count .num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 559px) { .tb-count table { font-size: .82rem; } .tb-count th, .tb-count td { padding: .25rem .2rem; } }