.sensory-settings{display:grid;gap:14px;color:#263855}
.sensory-toggle{display:flex;align-items:center;justify-content:space-between;position:relative;gap:18px;min-height:85px;margin:0;padding:17px 20px;border:2px solid #263855;border-radius:20px;box-shadow:0 5px 0 #263855;cursor:pointer;transition:transform .12s,box-shadow .12s}
.sensory-toggle--effects{background:#ffd971}.sensory-toggle--music{background:#bceca1}.sensory-toggle--haptics{background:#b6dcff}
.sensory-toggle:active{transform:translateY(3px);box-shadow:0 2px 0 #263855}
.sensory-toggle-copy{display:grid;gap:5px}.sensory-toggle-copy b{font-size:20px;line-height:1.25;letter-spacing:-.035em}.sensory-toggle-copy small{font-size:13px;font-weight:600;line-height:1.45;color:#36465e}
.sensory-toggle input{position:absolute;opacity:0;width:48px;height:48px;right:18px;margin:0;z-index:1;cursor:pointer}
.sensory-switch{display:block;flex:0 0 auto;width:62px;height:36px;border:2px solid #263855;border-radius:24px;background:#e9edee;box-shadow:inset 0 2px 0 #26385524;position:relative}
.sensory-switch:after{content:'';position:absolute;top:3px;left:3px;width:26px;height:26px;border:2px solid #263855;border-radius:50%;background:#fff;transition:transform .15s}
.sensory-toggle input:checked+.sensory-switch{background:#365172}.sensory-toggle input:checked+.sensory-switch:after{transform:translateX(26px)}
.sensory-toggle input:focus-visible+.sensory-switch{outline:4px solid #fff;outline-offset:3px;box-shadow:0 0 0 7px #314c81}
.sensory-toggle:has(input:disabled){cursor:default;background:#e8edf1;box-shadow:0 4px 0 #95a5b7;border-color:#95a5b7}.sensory-toggle input:disabled+.sensory-switch{opacity:.5}
.sensory-volume{display:grid;gap:12px;margin:7px 0 0;padding:15px 4px;color:#263855}.sensory-volume>span{display:flex;align-items:center;justify-content:space-between;gap:12px}.sensory-volume b{font-size:17px}.sensory-volume output{font-size:16px;font-weight:800;min-width:52px;text-align:right}
.sensory-volume input{width:100%;height:38px;margin:0;padding:0;accent-color:#386ce7;cursor:pointer;background:transparent;touch-action:pan-y}
.sensory-preview{display:grid;grid-template-columns:1fr 1fr;gap:12px}.sensory-test{min-height:50px;margin:0;padding:11px 8px!important;font-size:14px!important;font-weight:800!important;border:2px solid #263855!important;border-radius:16px!important;background:#fff!important;color:#263855!important;box-shadow:0 4px 0 #263855!important;cursor:pointer}.sensory-test:active{transform:translateY(3px)!important;box-shadow:0 1px 0 #263855!important}.sensory-test:disabled{cursor:default;opacity:.5;box-shadow:0 3px 0 #95a5b7!important}
.sensory-status{margin:4px 0 0;text-align:center;font-size:13px;font-weight:600;line-height:1.5;color:#52667e}
.sensory-settings .sensory-test:focus-visible{outline:3px solid #386ce7;outline-offset:4px}
@media(max-width:400px){.sensory-toggle{min-height:78px;padding:13px 14px;gap:10px}.sensory-toggle-copy b{font-size:19px}.sensory-toggle-copy small{font-size:12px;max-width:190px}.sensory-toggle input{right:14px}.sensory-switch{width:58px;height:34px}.sensory-switch:after{width:24px;height:24px}.sensory-toggle input:checked+.sensory-switch:after{transform:translateX(24px)}.sensory-settings{gap:12px}.sensory-preview{gap:10px}}
@media(prefers-reduced-motion:reduce){.sensory-toggle,.sensory-switch:after{transition:none}.sensory-toggle:active,.sensory-test:active{transform:none!important}}

/* Student sound controls keep their large touch targets without heavy outlines. */
body[data-role="student"] .modal:has(.accessibility-settings) .sensory-settings { color: #243d35; }
body[data-role="student"] .modal:has(.accessibility-settings) .sensory-toggle {
  border: 1px solid #d2dcd3;
  border-radius: 20px;
  box-shadow: 0 3px 0 #e2e8db;
}
body[data-role="student"] .modal:has(.accessibility-settings) .sensory-toggle--effects { background: #f9edb3; }
body[data-role="student"] .modal:has(.accessibility-settings) .sensory-toggle--music { background: #eef4e6; }
body[data-role="student"] .modal:has(.accessibility-settings) .sensory-toggle--haptics { background: #daedf6; }
body[data-role="student"] .modal:has(.accessibility-settings) .sensory-toggle:has(input:checked):not(:has(input:disabled)) { border-color: #b4cc5b; background: #eef4e6; box-shadow: 0 3px 0 #d4ddbf; }
body[data-role="student"] .modal:has(.accessibility-settings) .sensory-toggle:active { transform: translateY(2px); box-shadow: 0 1px 0 #e2e8db; }
body[data-role="student"] .modal:has(.accessibility-settings) .sensory-toggle-copy b {
  font-family: var(--classroom-display-font, "Ddanjit Jua", sans-serif);
  font-size: calc(21px * var(--reading-scale, 1));
  font-weight: 400;
  letter-spacing: 0;
}
body[data-role="student"] .modal:has(.accessibility-settings) .sensory-toggle-copy small { color: #66766d; }
body[data-role="student"] .modal:has(.accessibility-settings) .sensory-switch { border: 1px solid #b9c7b6; background: #f8f9f5; box-shadow: none; }
body[data-role="student"] .modal:has(.accessibility-settings) .sensory-switch::after { border: 1px solid #b9c7b6; box-shadow: 0 1px 2px #243d3510; }
body[data-role="student"] .modal:has(.accessibility-settings) .sensory-toggle input:checked + .sensory-switch { background: #d2eb67; border-color: #9eaf58; }
body[data-role="student"] .modal:has(.accessibility-settings) .sensory-toggle input:focus-visible + .sensory-switch { outline: 3px solid #243d35; outline-offset: 4px; box-shadow: none; }
body[data-role="student"] .modal:has(.accessibility-settings) .sensory-toggle:has(input:disabled) { background: #f0f2ed; border-color: #d2dcd3; box-shadow: none; }
body[data-role="student"] .modal:has(.accessibility-settings) .sensory-switch::before { color: #243d35; }
body[data-role="student"] .modal:has(.accessibility-settings) .sensory-volume { color: #243d35; border: 1px solid #d2dcd3; background: #fffdf7; }
body[data-role="student"] .modal:has(.accessibility-settings) .sensory-volume output { color: #243d35; }
body[data-role="student"] .modal:has(.accessibility-settings) .sensory-volume input { accent-color: #667b42; }
body[data-role="student"] .modal:has(.accessibility-settings) .sensory-volume select {
  width: 100%;
  min-height: 48px;
  border: 1px solid #bdc9ba;
  border-radius: 14px;
  padding: 10px 12px;
  background: #fffdf7;
  color: #243d35;
  font: inherit;
}
body[data-role="student"] .modal:has(.accessibility-settings) .sensory-test {
  border: 1px solid #d2dcd3 !important;
  color: #243d35 !important;
  background: #fffdf7 !important;
  box-shadow: 0 3px 0 #e2e8db !important;
}
body[data-role="student"] .modal:has(.accessibility-settings) .sensory-test:active { transform: translateY(2px) !important; box-shadow: 0 1px 0 #e2e8db !important; }
body[data-role="student"] .modal:has(.accessibility-settings) .sensory-test:disabled { box-shadow: none !important; }
body[data-role="student"] .modal:has(.accessibility-settings) :is(.sensory-status, .sensory-toggle-copy small) { color: #66766d; }
body[data-role="student"] .modal:has(.accessibility-settings) .sensory-settings .sensory-test:focus-visible { outline-color: #243d35; }
html[data-color-mode="contrast"] body[data-role="student"] .modal:has(.accessibility-settings) :is(.sensory-toggle, .sensory-switch, .sensory-switch::after, .sensory-volume select, .sensory-toggle input:checked + .sensory-switch) { background: #fff; color: #111; border: 2px solid #111; box-shadow: none; }
html[data-color-mode="contrast"] body[data-role="student"] .modal:has(.accessibility-settings) .sensory-toggle input:checked + .sensory-switch { background: #111; }
html[data-color-mode="contrast"] body[data-role="student"] .modal:has(.accessibility-settings) .sensory-toggle:has(input:checked):not(:has(input:disabled)) { background: #fff; border-color: #111; box-shadow: none; }
html[data-color-mode="contrast"] body[data-role="student"] .modal:has(.accessibility-settings) :is(.sensory-settings, .sensory-volume, .sensory-status, .sensory-toggle-copy small) { color: #111; }
html[data-color-mode="contrast"] body[data-role="student"] .modal:has(.accessibility-settings) .sensory-test { border: 2px solid #111 !important; background: #fff !important; color: #111 !important; box-shadow: none !important; }
html[data-reduced-motion="true"] body[data-role="student"] .modal:has(.accessibility-settings) :is(.sensory-toggle, .sensory-switch::after) { transition: none; }
html[data-reduced-motion="true"] body[data-role="student"] .modal:has(.accessibility-settings) :is(.sensory-toggle, .sensory-test):active { transform: none !important; }