/* Site-wide reading font-size control — shared widget + scaling helpers. The widget (reading-scale.js) sets --reading-scale on ; content scales by referencing calc( * var(--reading-scale, 1)) in its own font-size rules. Scaling is font-size only (never zoom) so content reflows without overflowing. */ :root { --reading-scale: 1; } /* Floating ก-/%/ก+ pill (bottom-right, identical on every page) */ .rs-ctrl { position: fixed; right: 1rem; bottom: 1rem; z-index: 45; /* above page chrome, below full-screen modals (z-50+) */ display: inline-flex; align-items: stretch; gap: 0.15rem; padding: 0.25rem; border-radius: 999px; background: #fff; border: 1px solid #e0e7ff; box-shadow: 0 6px 20px -6px rgba(49, 46, 129, 0.35); } .rs-ctrl__btn { display: inline-flex; align-items: center; justify-content: center; gap: 1px; min-width: 2.1rem; height: 2.1rem; padding: 0 0.5rem; border: 0; border-radius: 999px; background: transparent; color: #4338ca; font-weight: 800; line-height: 1; cursor: pointer; font-family: inherit; } .rs-ctrl__btn:hover:not(:disabled) { background: #eef2ff; } .rs-ctrl__btn:disabled { opacity: 0.4; cursor: not-allowed; } .rs-ctrl__pct { font-size: 0.72rem; font-weight: 700; color: #6b7280; min-width: 2.9rem; } .rs-ctrl__a--sm { font-size: 0.8rem; } .rs-ctrl__a--lg { font-size: 1.1rem; } .rs-ctrl__sign { font-size: 0.7rem; } @media (max-width: 640px) { .rs-ctrl { right: 0.6rem; bottom: 0.6rem; } .rs-ctrl__btn { min-width: 1.9rem; height: 1.9rem; padding: 0 0.4rem; } } /* Helper for Tailwind-utility content (e.g. the Roadmap checklist): override the text-size utilities actually used there so labels scale by font-size only. Higher specificity than the single-class utilities, so these win. */ .rs-scale { font-size: calc(1rem * var(--reading-scale, 1)); } .rs-scale .text-xs { font-size: calc(0.75rem * var(--reading-scale, 1)); } .rs-scale .text-sm { font-size: calc(0.875rem * var(--reading-scale, 1)); } .rs-scale .text-base { font-size: calc(1rem * var(--reading-scale, 1)); } .rs-scale .text-lg { font-size: calc(1.125rem * var(--reading-scale, 1)); } .rs-scale .text-xl { font-size: calc(1.25rem * var(--reading-scale, 1)); }