/* Font roles (font-tokens.js sets --ui-font / --num-font / --title-font / --glyph-font on :root). Loaded after every
 * other stylesheet; font-family and font-variant-numeric only.
 *   - form controls inherit the interface font instead of the browser's control font (zero specificity: any rule wins)
 *   - numbers: table cells, Cast / Library inputs, time-row values read --num-font (tabular figures)
 *   - astro symbols: .gl and the symbol classes read --glyph-font
 *   - even planet glyph sizes need no rule here: glyph-faces.js size-adjusts the 'TopoGlyph' faces per glyph
 */
:where(input, select, textarea, button, optgroup) { font-family: var(--ui-font); }
:where(input, select, textarea)::placeholder { font-family: var(--ui-font); }

html:not(#o) :is(td:not(.gl), .num, #sidebar input, #sidebar select, #ws-date, #ws-timerow .ws-val, [style*="--num-font"]) {
  font-family: var(--num-font);
  font-variant-numeric: var(--num-variant, tabular-nums);
}
html:not(#o) :is(th, td, .num, input, #ws-date) { font-variant-numeric: var(--num-variant, tabular-nums); }
html:not(#o) :is(.gl, .zodiac-glyph, .planet-glyph) { font-family: var(--glyph-font); font-variant-emoji: text; }
.font-preview .gl { font-family: var(--glyph-font); }