/* Style & accessibility hooks (palette vars are applied inline by ui/js/style.js). */
html[data-text="large"] #app, html[data-text="xl"] #app { zoom: var(--zoom); width: 100%; max-width: calc(480px / var(--zoom)); height: calc(100dvh / var(--zoom)); }
html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html[data-style="contrast"] .row, html[data-style="contrast"] .card, html[data-style="contrast"] .tile { border: 2px solid #fff; }
html[data-style="contrast"] .btn { border: 2px solid #ffe94d; }
html[data-style="contrast"] :focus-visible, :focus-visible { outline: 3px solid #ffe94d; outline-offset: 2px; }
.stylechip { display:inline-block; width:18px; height:18px; border-radius:5px; margin-right:3px; border:1px solid #0004; vertical-align:middle; }