/* Chemistry in text (web/shared/chem.js) and its Balance card (web/js/chembal.js) */
.chem{white-space:nowrap}
.chem sub,.chem sup{font-size:.7em;line-height:0}
.chem sub{vertical-align:-.28em}
.chem sup{vertical-align:.5em}
.chem .chst{font-size:.82em;opacity:.8}
.chemeq{cursor:pointer;border-radius:6px;white-space:normal}
.chemeq:focus-visible{outline:2px solid var(--focus,var(--accent));outline-offset:2px}
@media (hover:hover){.chemeq:hover{background:color-mix(in srgb,var(--accent) 22%,transparent)}}
.chempop{position:absolute;z-index:200;background:var(--paper);color:var(--ink);border-radius:var(--r2,16px);padding:10px 12px;box-shadow:0 12px 40px var(--shadow),0 0 0 1px color-mix(in srgb,var(--ink) 6%,transparent);font-size:.9375rem;line-height:1.4}
.chembal .cbhead{font-weight:600}
.chembal .cbhead.ok{color:var(--ok)}
.chembal .cbhead.no{color:var(--bad)}
.chembal .cbfix{margin-top:4px}
.chembal .sub{color:var(--muted)}
.chembal .cbatoms{margin-top:6px;padding:4px 0;background:none;border:0;color:var(--ink);font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.chemtab{border-collapse:collapse;margin-top:4px;font-variant-numeric:tabular-nums}
.chemtab th,.chemtab td{padding-block:3px 3px;padding-inline:0 12px;text-align:start}
.chemtab thead th{color:var(--muted);font-weight:500;font-size:.8125rem}
.chemtab tr.off td{color:var(--bad);font-weight:600}
/* the whiteboard's Balance card sits above the selection bar */
.board .chempop{position:absolute}