/* Every selector belongs to this dialog; measured stimuli are static. */
#extraRemediationDialog { box-sizing: border-box; width: min(850px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; margin: auto; padding: clamp(16px, 3vw, 28px); border: 1px solid var(--line, #64717a); border-radius: 12px; background: var(--surface, #fff); color: var(--ink, #18232c); font: inherit; line-height: 1.5; }
#extraRemediationDialog::backdrop { background: #0009; }
#extraRemediationDialog, #extraRemediationDialog * { animation: none !important; transition: none !important; box-sizing: border-box; }
#extraRemediationDialog [hidden] { display: none !important; }
#extraRemediationDialog h2 { margin: 0; font-size: 1.35rem; }
#extraRemediationDialog h3 { margin: 16px 0 8px; font-size: 1.1rem; }
#extraRemediationDialog p { white-space: pre-line; overflow-wrap: anywhere; margin: 12px 0; }
#extraRemediationDialog progress { width: 100%; display: block; margin: 10px 0; }
#extraRemediationDialog .extra-top, #extraRemediationDialog .extra-actions, #extraRemediationDialog .extra-choices { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#extraRemediationDialog .extra-top { justify-content: space-between; }
#extraRemediationDialog button { min-height: 44px; padding: 8px 12px; border: 1px solid var(--line, #64717a); border-radius: 7px; background: var(--surface, #fff); color: inherit; font: inherit; cursor: pointer; overflow-wrap: anywhere; }
#extraRemediationDialog button:disabled { opacity: .55; cursor: default; }
#extraRemediationDialog button[aria-pressed="true"] { border-width: 2px; font-weight: 650; }
#extraRemediationDialog :focus-visible { outline: 3px solid var(--accent, #22649d); outline-offset: 2px; }
#extraRemediationDialog .extra-grid { display: grid; grid-template-columns: repeat(var(--extra-size), 1fr); width: min(360px, 100%); aspect-ratio: 1; gap: 4px; margin: 12px 0; }
#extraRemediationDialog .extra-grid span { display: grid; place-items: center; border: 1px solid var(--line, #64717a); font-size: 1.4rem; }
#extraRemediationDialog .extra-blocked { background: var(--ink, #18232c); color: var(--surface, #fff); }
#extraRemediationDialog .extra-position { outline: 3px solid var(--accent, #22649d); outline-offset: -4px; font-weight: 700; }
#extraRemediationDialog .extra-goal { border: 3px double var(--ink, #18232c) !important; font-weight: 700; }
#extraRemediationDialog .extra-shapes { display: block; width: min(360px, 100%); height: auto; aspect-ratio: 1; fill: currentColor; }
#extraRemediationDialog .extra-word { font-size: clamp(1.7rem, 5vw, 2.5rem); font-weight: 650; }
#extraRemediationDialog label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
#extraRemediationDialog textarea { display: block; width: 100%; resize: vertical; }
#extraRemediationDialog textarea, #extraRemediationDialog select { min-height: 44px; padding: 8px; border: 1px solid var(--line, #64717a); border-radius: 6px; background: var(--surface, #fff); color: inherit; font: inherit; max-width: 100%; }
#extraRemediationDialog input[type="checkbox"] { width: 20px; height: 20px; }
#extraRemediationDialog .extra-help { border-left: 2px solid var(--line, #64717a); padding-left: 12px; }
#extraRemediationDialog .extra-note { font-size: .92rem; }
#extraRemediationDialog .extra-pairs { padding-left: 24px; font-size: 1.2rem; }