/* ═══════════════════════════════════════════════════════════════════ GUARD — the only unlayered stylesheet in the theme. Everything else lives in a cascade layer, which is what keeps the theme's own cascade honest. The trade-off is that ANY unlayered rule from a plugin outranks every layered theme rule, regardless of specificity. This file exists to win those specific fights and no others. Selectors are written at `html body` (0,0,2) so they also beat a plugin's `html, body` (0,0,1) on specificity, not just on layering. Keep this file small. If you are tempted to add a component rule here, it belongs in components.css instead. ═══════════════════════════════════════════════════════════════════ */ html body { background-color: var(--bg); color: var(--fg); font-family: var(--font-ui); font-size: var(--step-0); line-height: var(--lh-read); } /* A plugin painting a background-image onto tints every page. */ html body { background-image: none; } /* The theme-toggle icon pair: exactly one half is ever visible. Stated here because a generic `svg { display: block }` from anywhere — the critical block, a plugin reset — otherwise reveals both. */ html .tdn-theme-toggle .tdn-icon-sun { display: none; } html .tdn-theme-toggle .tdn-icon-moon { display: block; } html[data-theme="dark"] .tdn-theme-toggle .tdn-icon-sun { display: block; } html[data-theme="dark"] .tdn-theme-toggle .tdn-icon-moon { display: none; } /* Keep the header opaque enough to own its strip even if a plugin paints behind it — but preserve the frosted translucency, which v4.0.2's guard was flattening to a solid fill. */ html body .tdn-header { background-color: color-mix(in srgb, var(--bg) 88%, transparent); } @supports not (backdrop-filter: blur(1px)) { html body .tdn-header { background-color: var(--bg); } }