/* Chemistry topics: the pictures of the practice topics (practice/visuals.js) and the
   library card. Every colour, space and radius comes from the Visual_Token_Set in
   styles.css; element families use the periodic-table tokens (--alkali, --noble, ...),
   the same colours the Periodic Table Lab shows. Sizes of SVG text are in the SVG's
   own units, so they scale with the picture. */

/* ---------------------------------------------------------------- library card */
.chem-card-art { background: var(--cream); }

/* ---------------------------------------------------------------- atoms */
svg.cv .cv-proton { fill: var(--coral); stroke: var(--coral-strong); stroke-width: 1.5; }
svg.cv .cv-neutron { fill: var(--line); stroke: var(--muted); stroke-width: 1.5; }
svg.cv .cv-electron { fill: var(--blue-dark); stroke: var(--paper); stroke-width: 1.5; }
svg.cv .cv-proton.is-hi, svg.cv .cv-neutron.is-hi, svg.cv .cv-electron.is-hi { stroke: var(--yellow); stroke-width: 3; }
svg.cv .cv-sign { font-size: 10px; font-weight: 700; fill: var(--paper); }
svg.cv .cv-nucleus { fill: var(--alkali); stroke: var(--coral-strong); stroke-width: 2; }
svg.cv .cv-nucleus.is-hi { stroke: var(--yellow); stroke-width: 4; }
svg.cv .cv-nucleus-text { font-size: 15px; font-weight: 700; fill: var(--ink); }
svg.cv .cv-nucleus-dot { fill: var(--coral-strong); }
svg.cv .cv-shell { fill: none; stroke: var(--muted); stroke-width: 1.5; }
svg.cv .cv-shell.is-hi { stroke: var(--coral-strong); stroke-width: 3; }
svg.cv .cv-cloud-1 { fill: var(--noble); fill-opacity: .35; }
svg.cv .cv-cloud-2 { fill: var(--noble); fill-opacity: .45; }
svg.cv .cv-cloud-3 { fill: var(--blue); fill-opacity: .3; }
svg.cv .cv-cloud-1.is-hi, svg.cv .cv-cloud-2.is-hi { stroke: var(--coral-strong); stroke-width: 2; }
svg.cv .cv-cloud-dot { fill: var(--blue-dark); fill-opacity: .7; }
svg.cv .cv-dalton { fill: var(--muted); stroke: var(--ink); stroke-width: 2; }
svg.cv .cv-shine { fill: var(--paper); fill-opacity: .45; }
svg.cv .cv-pudding { fill: var(--alkali); fill-opacity: .55; stroke: var(--coral-strong); stroke-width: 2; }
svg.cv .cv-plus { font-size: 15px; font-weight: 700; fill: var(--coral-strong); }
svg.cv .cv-space { fill: var(--paper); stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 5; }
svg.cv .cv-symbol { font-family: var(--font-display); font-size: 34px; font-weight: 700; fill: var(--blue-dark); }
svg.cv .cv-count { font-family: var(--font-display); font-size: 26px; font-weight: 700; fill: var(--ink); }
svg.cv .cv-small { font-size: 13px; fill: var(--muted); font-weight: 700; }
svg.cv .cv-label { font-size: 16px; fill: var(--ink); font-weight: 700; }
/* Labels that carry a picture's information, drawn large enough to stay readable when the picture shrinks to a
   320-px phone (about 11 px on screen) and at 1280×720 (12 px or more) (re-audit USE-001). */
svg.cv .cv-axis-big { font-size: 22px; fill: var(--ink); font-weight: 700; }
svg.cv .cv-legend { font-size: 22px; fill: var(--ink); font-weight: 700; }
svg.cv .cv-mark-big { font-size: 22px; font-weight: 700; fill: var(--ink); }
svg.cv .cv-letter-big { font-size: 22px; font-weight: 700; fill: var(--ink); }
/* A picture drawn two ways: a wide row on laptops, a column on phones. Only one is displayed (and read). */
.cv-resp, .cv-only-wide, .cv-only-narrow { width: 100%; }
.cv-only-narrow { display: none; }
@media (max-width: 520px) { .cv-only-wide { display: none; } .cv-only-narrow { display: block; } }
svg.cv .cv-sign-mark { stroke: var(--paper); stroke-width: 2; stroke-linecap: round; fill: none; }
svg.cv .cv-divider { stroke: var(--line); stroke-width: 2; stroke-dasharray: 6 6; }
svg.cv .cv-timeline { stroke: var(--line); stroke-width: 4; stroke-linecap: round; }
svg.cv .cv-timeline-dot { fill: var(--blue-dark); }

/* ---------------------------------------------------------------- particles */
svg.cv .cv-box { fill: var(--paper); stroke: var(--ink); stroke-width: 2.5; }
svg.cv .cv-box.is-hi { stroke: var(--coral-strong); stroke-width: 4; }
svg.cv .cv-particle { fill: var(--blue); stroke: var(--blue-dark); stroke-width: 1.5; }
svg.cv .cv-particle-hot { fill: var(--coral); stroke: var(--coral-strong); }
svg.cv .cv-particle-2 { fill: var(--yellow); stroke: var(--ink); }
svg.cv .cv-hbond { stroke: var(--muted); stroke-width: 2; stroke-dasharray: 3 3; }
svg.cv .cv-vibe { fill: none; stroke: var(--coral-strong); stroke-width: 2; stroke-linecap: round; }
svg.cv .cv-surface { stroke: var(--blue-dark); stroke-width: 2; stroke-dasharray: 6 5; opacity: .6; }
svg.cv .cv-motion line { stroke: var(--coral-strong); stroke-width: 2.5; stroke-linecap: round; }
svg.cv .cv-motion polygon { fill: var(--coral-strong); }
svg.cv .cv-change { fill: none; stroke-width: 3; stroke-linecap: round; }
svg.cv .cv-change-up { stroke: var(--coral-strong); }
svg.cv .cv-change-down { stroke: var(--blue-dark); }
svg.cv .cv-change.is-hi { stroke: var(--coral-strong); stroke-width: 6; }
svg.cv .cv-change-head.cv-change-up, svg.cv .cv-change-head.is-hi { fill: var(--coral-strong); stroke: none; }
svg.cv .cv-change-head.cv-change-down { fill: var(--blue-dark); stroke: none; }

/* ---------------------------------------------------------------- beaker */
svg.cv .cv-glass { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
svg.cv .cv-mark { stroke: var(--muted); stroke-width: 1.5; }
svg.cv .cv-liquid { fill: var(--metalloid); fill-opacity: .6; }
svg.cv .cv-solid-fill { fill: var(--lanthanide); fill-opacity: .8; }
svg.cv .cv-ice { fill: var(--paper); stroke: var(--metalloid); stroke-width: 2.5; }
svg.cv .cv-icebath { fill: var(--metalloid); fill-opacity: .3; stroke: var(--metalloid); stroke-width: 2; }
svg.cv .cv-steam { fill: none; stroke: var(--muted); stroke-width: 3; stroke-linecap: round; opacity: .6; }
svg.cv .cv-bubble { fill: var(--paper); stroke: var(--blue-dark); stroke-width: 1.5; }
svg.cv .cv-drop { fill: var(--metalloid); stroke: var(--blue-dark); stroke-width: 1; }
svg.cv .cv-thermo { fill: var(--paper); stroke: var(--ink); stroke-width: 1.8; }
svg.cv .cv-thermo-bulb { fill: var(--coral); stroke: var(--ink); stroke-width: 1.8; }
svg.cv .cv-thermo-fill { fill: var(--coral); }
svg.cv .cv-readout { fill: var(--cream); stroke: var(--line); stroke-width: 1.5; }
svg.cv .cv-flame { fill: var(--coral); }
svg.cv .cv-flame-core { fill: var(--yellow); }
svg.cv .cv-stand { stroke: var(--muted); stroke-width: 4; stroke-linecap: round; }
svg.cv .cv-zoomline { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 4; }
svg.cv .cv-zoomspot { fill: none; stroke: var(--coral-strong); stroke-width: 2.5; }
svg.cv .cv-lens { fill: none; stroke: var(--ink); stroke-width: 4; }

/* ---------------------------------------------------------------- molecules */
svg.cv .cv-bond { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
svg.cv .cv-atom { stroke: var(--ink); stroke-width: 2; }
svg.cv .cv-atom.is-hi { stroke: var(--coral-strong); stroke-width: 4; }
svg.cv .cv-atom-h { fill: var(--paper); }
svg.cv .cv-atom-o { fill: var(--coral); }
svg.cv .cv-atom-c { fill: var(--muted); }
svg.cv .cv-atom-n { fill: var(--blue); }
svg.cv .cv-atom-cl { fill: var(--green); }
svg.cv .cv-atom-na { fill: var(--halogen); }
svg.cv .cv-atom-text { font-size: 14px; font-weight: 700; fill: var(--ink); }
svg.cv .cv-atom-c + .cv-atom-text, svg.cv .cv-atom-n + .cv-atom-text { fill: var(--paper); }

/* ---------------------------------------------------------------- elements */
svg.cv .cv-tile { stroke: var(--ink); stroke-width: 3; }
svg.cv .cv-tile-number { font-family: var(--font-display); font-size: 26px; font-weight: 700; fill: var(--ink); }
svg.cv .cv-tile-symbol { font-family: var(--font-display); font-size: 64px; font-weight: 700; fill: var(--ink); }
svg.cv .cv-tile-name { font-size: 19px; font-weight: 700; fill: var(--ink); }
svg.cv .cv-tile-mass { font-size: 18px; fill: var(--ink); }
svg.cv .cv-tile.is-hi { stroke: var(--coral-strong); stroke-width: 5; }
svg.cv .cv-row-number { font-family: var(--font-display); font-size: 18px; font-weight: 700; fill: var(--ink); }
svg.cv .cv-row-symbol { font-family: var(--font-display); font-size: 40px; font-weight: 700; fill: var(--ink); }
svg.cv .cv-row-name { font-size: 14px; font-weight: 700; fill: var(--ink); }
svg.cv .cv-row-mass { font-size: 14px; fill: var(--ink); }
svg.cv .cv-callout { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 3; }
svg.cv .cv-card { fill: var(--cream); stroke: var(--line); stroke-width: 2; }
svg.cv .cv-nuclide { font-family: var(--font-display); font-size: 72px; font-weight: 700; fill: var(--ink); }
svg.cv .cv-nuclide-small { font-family: var(--font-display); font-size: 30px; font-weight: 700; fill: var(--blue-dark); }
svg.cv .cv-mini { stroke: var(--paper); stroke-width: 1; }
svg.cv .cv-mini.is-hi { stroke: var(--coral-strong); stroke-width: 3; }
svg.cv .cv-mini-text { font-size: 12px; font-weight: 700; fill: var(--ink); }
svg.cv .cv-mark-band { fill: var(--yellow); fill-opacity: .35; stroke: var(--coral-strong); stroke-width: 2; }
svg.cv .cv-cat-nonmetal { fill: var(--nonmetal); }
svg.cv .cv-cat-noble { fill: var(--noble); }
svg.cv .cv-cat-alkali { fill: var(--alkali); }
svg.cv .cv-cat-alkaline { fill: var(--alkaline); }
svg.cv .cv-cat-metalloid { fill: var(--metalloid); }
svg.cv .cv-cat-halogen { fill: var(--halogen); }
svg.cv .cv-cat-transition { fill: var(--transition); }
svg.cv .cv-cat-post-transition { fill: var(--post-transition); }
svg.cv .cv-cat-lanthanide { fill: var(--lanthanide); }
svg.cv .cv-cat-actinide { fill: var(--actinide); }

/* ---------------------------------------------------------------- pH, energy, arrows */
svg.cv .cv-ph { stroke: var(--paper); stroke-width: 1; }
svg.cv .cv-ph-a3 { fill: var(--coral); }
svg.cv .cv-ph-a2 { fill: var(--alkali); }
svg.cv .cv-ph-a1 { fill: var(--alkaline); }
svg.cv .cv-ph-n { fill: var(--green); }
svg.cv .cv-ph-b1 { fill: var(--nonmetal); }
svg.cv .cv-ph-b2 { fill: var(--noble); }
svg.cv .cv-ph-b3 { fill: var(--halogen); }
svg.cv .cv-ph-text { font-size: 15px; font-weight: 700; fill: var(--ink); }
svg.cv .cv-ph-frame { fill: none; stroke: var(--ink); stroke-width: 2; }
svg.cv .cv-pointer { fill: var(--coral-strong); }
svg.cv .cv-curve { fill: none; stroke: var(--blue-dark); stroke-width: 4; stroke-linejoin: round; }
svg.cv .cv-curve-alt { stroke: var(--green-strong); stroke-dasharray: 9 6; }
svg.cv .cv-level { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 4; }
svg.cv .cv-arrow line { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
svg.cv .cv-arrow polygon { fill: var(--ink); }
svg.cv .cv-arrow-alt line { stroke: var(--coral-strong); stroke-width: 2.5; stroke-linecap: round; }
svg.cv .cv-arrow-alt polygon { fill: var(--coral-strong); }
svg.cv .cv-scene { fill: var(--post-transition); fill-opacity: .35; }

/* ---------------------------------------------------------------- heating curves, state lines */
svg.cv .cv-flat-label { fill: var(--coral-strong); font-weight: 700; }
svg.cv .cv-curve-hi { stroke: var(--coral-strong); stroke-width: 7; }
svg.cv .cv-letter { fill: var(--paper); stroke: var(--blue-dark); stroke-width: 2; }
svg.cv .cv-letter-hi { fill: var(--coral-strong); stroke: var(--coral-strong); stroke-width: 2; }
svg.cv .cv-letter-text { font-size: 15px; font-weight: 700; fill: var(--ink); }
svg.cv .cv-on-hi { fill: var(--paper); }
svg.cv .cv-zone { stroke: var(--paper); stroke-width: 2; }
svg.cv .cv-zone-solid { fill: var(--noble); }
svg.cv .cv-zone-liquid { fill: var(--metalloid); }
svg.cv .cv-zone-gas { fill: var(--alkaline); }
svg.cv .cv-zone-frame { fill: none; stroke: var(--ink); stroke-width: 2; }
svg.cv .cv-tick-strong { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
svg.cv .cv-dot-from { fill: var(--blue-dark); }
svg.cv .cv-run { stroke: var(--coral-strong); stroke-width: 4; stroke-linecap: round; }
svg.cv .cv-run-head { fill: var(--coral-strong); }

/* ---------------------------------------------------------------- mass spectra, gold foil */
svg.cv .cv-peak { fill: var(--blue); stroke: var(--blue-dark); stroke-width: 1.5; }
svg.cv .cv-peak.is-hi { fill: var(--coral); stroke: var(--coral-strong); }
svg.cv .cv-average { stroke: var(--coral-strong); stroke-width: 2.5; stroke-dasharray: 6 5; }
svg.cv .cv-foil { fill: var(--alkaline); fill-opacity: .35; stroke: var(--lanthanide); stroke-width: 2; }
svg.cv .cv-atom-ghost { fill: var(--paper); fill-opacity: .6; stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 4 4; }
svg.cv .cv-source { fill: var(--line); stroke: var(--ink); stroke-width: 2; }
svg.cv .cv-alpha { fill: none; stroke: var(--blue-dark); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
svg.cv .cv-alpha.is-hi { stroke: var(--coral-strong); stroke-width: 5; }

/* ---------------------------------------------------------------- words as pictures */
.cv-facts { margin: 0; width: 100%; }
.cv-facts dl { display: grid; gap: var(--space-1); margin: 0; }
.cv-facts dl > div { display: grid; grid-template-columns: fit-content(55%) minmax(0, 1fr); gap: var(--space-3); padding: var(--space-1) var(--space-3); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.cv-facts dl > div.is-hi { border-color: var(--blue-strong); background: var(--cream); }
.cv-facts dt { font-weight: 700; color: var(--ink); }
.cv-facts dd { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.cv-compare { margin: 0; width: 100%; }
.cv-sides { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); }
.cv-side { padding: var(--space-3); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); }
.cv-side strong { display: block; margin-bottom: var(--space-2); color: var(--blue-dark); }
.cv-side ul { margin: 0; padding-left: var(--space-4); color: var(--ink); }
.cv-side li + li { margin-top: var(--space-1); }

@media (max-width: 480px) { .cv-facts dl > div { grid-template-columns: minmax(0, 1fr); gap: 0; } }
@media (max-width: 700px) { .cv-sides { grid-template-columns: 1fr; } }

/* A wide comparison table squeezed into a step column. */
.mp-step-visual .mv-table.cv-table-tight th, .mp-step-visual .mv-table.cv-table-tight td,
.mp-q-visual .mv-table.cv-table-tight th, .mp-q-visual .mv-table.cv-table-tight td { padding: var(--space-1) var(--space-2); font-size: 14px; }