/* ── Screen-reader utility ── */ .xwk-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* ── Font scaling: percentage on scales the entire rem grid ── Step mapping: 1=85% · 2=92.5% · 3=default (no attr) · 4=110% · 5=125% Scaling is on so the rem grid stretches proportionally. The widget itself scales with the page — this is correct UX. ── */ html[data-xwk-font="1"]{font-size:85%} html[data-xwk-font="2"]{font-size:92.5%} html[data-xwk-font="4"]{font-size:110%} html[data-xwk-font="5"]{font-size:125%} /* ── Widget layout ── */ .xwk-font-scale{display:inline-flex;align-items:center;gap:.5rem;flex-wrap:wrap} .xwk-font-scale__buttons{display:inline-flex;align-items:center;gap:.25rem} /* ── Buttons ── */ .xwk-font-scale__btn{-webkit-appearance:none;appearance:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-width:2.75rem;min-height:2.75rem;padding:.25rem .5rem;border:1px solid var(--border-default,rgba(0,0,0,.15));border-radius:var(--radius-sm,4px);background:var(--bg-secondary,transparent);color:var(--text-primary,inherit);cursor:pointer;font-family:inherit;line-height:1;transition:opacity .15s,background .15s} .xwk-font-scale__btn:hover{background:var(--bg-hover,rgba(0,0,0,.06))} .xwk-font-scale__btn:focus-visible{outline:2px solid var(--focus-ring,Highlight);outline-offset:2px} .xwk-font-scale__btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none} /* Visual "A" size indicators */ .xwk-font-scale__btn--decrease span{font-size:.7em;font-weight:400;line-height:1} .xwk-font-scale__btn--reset span{font-size:.95em;font-weight:600;line-height:1} .xwk-font-scale__btn--increase span{font-size:1.35em;font-weight:400;line-height:1} /* ── Step-position indicator dots ── */ .xwk-font-scale__steps{display:inline-flex;align-items:center;gap:4px;padding:0 4px} .xwk-font-scale__step-dot{width:6px;height:6px;border-radius:50%;background:var(--border-default,rgba(0,0,0,.2));transition:background .15s,transform .15s;flex-shrink:0} /* Highlight the active dot via the container's data-current-step */ [data-current-step="1"] .xwk-font-scale__step-dot[data-step="1"], [data-current-step="2"] .xwk-font-scale__step-dot[data-step="2"], [data-current-step="3"] .xwk-font-scale__step-dot[data-step="3"], [data-current-step="4"] .xwk-font-scale__step-dot[data-step="4"], [data-current-step="5"] .xwk-font-scale__step-dot[data-step="5"]{background:var(--fg-accent,var(--text-primary,#333));transform:scale(1.4)} @media(prefers-reduced-motion:reduce){.xwk-font-scale__btn,.xwk-font-scale__step-dot{transition:none}}