html { scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* the app's own good/bad pair (ui/css/app.css) — the DS sheet carries no such ramp */
:root { --color-good: #2f7d4f; --color-good-100: #e2f3e8; --color-good-deep: #245c3c; --color-bad: #a33a25; --color-bad-100: #fbe6e1; }
body { margin: 0; text-wrap: pretty; overflow-x: clip; background: var(--color-bg); color: var(--color-text); }
summary::-webkit-details-marker { display: none; }
details[open] > summary > span[aria-hidden] { transform: rotate(180deg); }
a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent-800); }
/* inline display:block on the phase images would otherwise override [hidden] */
[hidden] { display: none !important; }

/* !important: these links carry their resting colours as inline styles */
.nav-link:hover { background: var(--color-bg) !important; color: var(--color-accent-800) !important; }
.lang-link:hover { background: var(--color-surface) !important; color: var(--color-accent-800) !important; }
.footer-link:hover { color: var(--color-accent-800) !important; }