/* Studying Rocks demo: accessibility layer. AA contrast fixes, 44px targets, labelled icon buttons, reduced motion. */
:root{--a11y-min:44px}
/* touch targets >= 44px */
.pill,.x,.check,.modal-x,.icon-btn,.brand,summary,button.small,.btn.small,.tabs button,#demoNote button,select,input[type=time],input[type=date]{min-height:var(--a11y-min)}
.pill{display:inline-flex;align-items:center;min-height:44px}
.ft-w .pill{min-height:44px}
.x{min-width:44px;display:inline-flex;align-items:center;justify-content:center}
.check,.steps li .check{width:44px;height:44px;min-width:44px;font-size:18px}
.icon-btn{width:44px;height:44px;font-size:19px}
.brand{min-height:44px;padding:4px 0}
summary{display:flex;align-items:center;cursor:pointer}
#demoNote button{min-width:44px;padding-left:10px;padding-right:10px}
input[type=checkbox],input[type=radio]{width:24px;height:24px}
label.row,label:has(>input[type=checkbox]),label:has(>input[type=radio]){min-height:44px;display:flex;align-items:center;gap:10px}
.small a,a.small,.small button.linkish,.small[role=button],button.small.ghost,.link{min-height:44px;display:inline-flex;align-items:center}
.sr-sch,.sr-kick{min-height:44px;min-width:44px}
/* modal close shows a word under the icon */
.modal-x{width:56px;height:56px;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;line-height:1.1;font-size:17px;color:var(--t-ink)}
.modal-x .x-lb{font-size:12px;font-weight:700;color:var(--t-ink)}
/* contrast fixes (computed ratios in ACCESSIBILITY.md) */
.pill.on .small,.pill.on small,.pill.on span{color:#fff}
.msg.me .when{opacity:1;color:#fff;font-size:12px}
.msg .when{font-size:12px}
.muted,.sub,.small.muted{color:var(--t-muted)}
:focus-visible{outline:3px solid var(--t-ink);outline-offset:2px;box-shadow:0 0 0 5px #fff}
.toast{font-size:15px}
/* reflow at 200% zoom / small widths: nothing forces horizontal scroll */
html,body{overflow-wrap:anywhere}
img,svg{max-width:100%}
@media (max-width:420px){.tabs button{min-width:44px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
.pill .small,.pill small{opacity:1!important;color:inherit}
.pill:not(.on) .small{color:var(--t-muted)}
#moodShare,input[type=checkbox]{width:24px!important;height:24px!important;min-width:24px}
.modal-card label.row{min-height:44px}
.tabs button{font-size:11px;padding-left:1px;padding-right:1px;letter-spacing:-.1px}
.tabs-in{overflow-x:auto;max-width:100%}
.tabs-in button{min-width:48px}
@media (max-width:420px){.top{flex-wrap:wrap}.top-r{flex-wrap:wrap}.brand-t{font-size:17px}}