/* Shared building blocks of the settings panels (Teoria: teoria/impostazioni.js; program: settings.js), built by impostazioni-comp.js: sections with a small-caps title,
   big option buttons (segmented, font, background), wide switches, groups that fold. Imported by teoria.css and app.css; every rule is under .impset. */
.impset{font-size:15px;line-height:1.5;letter-spacing:normal;word-spacing:normal}
.impset fieldset{border:0;margin:0;padding:10px 0 0;min-width:0}.impset legend{font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:0;margin:0 0 6px}
.impset details.imp-g{border-top:1px solid var(--line);margin-top:12px;padding-top:6px}
.impset details.imp-g>summary{display:flex;align-items:center;gap:8px;min-height:36px;cursor:pointer;font-weight:700;list-style:none}
.impset details.imp-g>summary::-webkit-details-marker{display:none}
.impset details.imp-g>summary .gi{color:var(--accent);display:inline-flex;flex:none}
.impset details.imp-g>summary .car{margin-left:auto;transition:transform .2s;color:var(--muted);display:inline-flex}
.impset details.imp-g[open]>summary .car{transform:rotate(180deg)}
.impset details.imp-g>.imp-b{animation:imp-open .2s ease-out}
@keyframes imp-open{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.impset details.imp-g>summary .car,.impset input[role=switch]::before{transition:none}.impset details.imp-g>.imp-b{animation:none}}
:root[data-a11y-reduce] .impset details.imp-g>.imp-b{animation:none}
.impset .ic{display:inline-flex;vertical-align:middle;margin-right:6px;color:var(--accent)}
.impset .seg2{grid-template-columns:repeat(2,1fr)}
.impset .hint{margin:4px 0 0;font-size:13px;color:var(--muted)}
.impset .imp-fld{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px}
.impset .imp-fld select,.impset .imp-fld input[type=number]{font:inherit;min-height:32px}
.impset .opts{display:grid;gap:6px}.impset .seg3{grid-template-columns:repeat(3,1fr)}.impset .f3{grid-template-columns:repeat(3,1fr)}.impset .f4{grid-template-columns:repeat(4,1fr)}
.impset .opt{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:48px;padding:6px 4px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font-size:13px;line-height:1.2;text-align:center;cursor:pointer}
.impset .opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.impset .opt>:not(input){pointer-events:none}
.impset .opt:hover{border-color:var(--accent)}
.impset .opt:has(input:checked){border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:var(--sel)}
.impset .opt:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:2px}
.impset .seg svg{color:var(--accent)}
.impset .aa{font-size:22px;line-height:1;font-weight:600}
.impset .aa[data-f=atkinson]{font-family:"Atkinson Hyperlegible Next",system-ui,sans-serif}.impset .aa[data-f=dyslexic]{font-family:"OpenDyslexic","Comic Sans MS",system-ui,sans-serif}
.impset .bg{padding-top:8px}
.impset .chip{position:relative;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:2px solid var(--muted);background:var(--c,var(--bg));color:transparent}
.impset .chip[data-v=""]{background:linear-gradient(135deg,var(--bg) 50%,var(--panel) 50%)}
.impset .chip[data-v=cream]{--c:#faf3e0}.impset .chip[data-v=blue]{--c:#e8f1f8}.impset .chip[data-v=hc]{background:linear-gradient(135deg,#fff 50%,#000 50%)}
:root[data-theme=dark] .impset .chip[data-v=cream]{--c:#1e1b16}:root[data-theme=dark] .impset .chip[data-v=blue]{--c:#14212b}
.impset .opt:has(input:checked) .chip{border-color:var(--accent);color:#fff;box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--accent)}
.impset .opt:has(input:checked) .chip .tick{background:var(--accent);border-radius:50%;padding:3px;width:18px;height:18px}
.impset .swrow{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;padding:2px 0;cursor:pointer}
.impset input[type=checkbox][role=switch]{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:44px;height:26px;margin:0;border-radius:13px;border:2px solid var(--muted);background:var(--bg);cursor:pointer}
.impset input[role=switch]::before{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--muted);transition:transform .15s}
.impset input[role=switch]:checked{background:var(--accent);border-color:var(--accent)}
.impset input[role=switch]:checked::before{transform:translateX(18px);background:#fff}
.impset input[role=switch]:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.impset button{font:inherit;font-size:14px;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:4px 10px;color:var(--ink);cursor:pointer}
.impset button:hover,.impset button:focus-visible{border-color:var(--accent);outline:2px solid var(--accent)}