/* Shared spacing and controls, loaded after feature-specific styles. */
*{box-sizing:border-box}
.shell{min-width:0}
#app{width:100%;max-width:1500px;margin-inline:auto;padding:clamp(22px,3vw,44px)}
.intro{gap:16px;margin-bottom:28px}
.intro h1{line-height:1.18;letter-spacing:-.025em}
.intro p{line-height:1.7;max-width:74ch}
.card{padding:clamp(20px,2.2vw,32px);margin-bottom:24px;min-width:0}
.section-head{gap:14px;flex-wrap:wrap;margin-bottom:20px}
.section-head h2{margin:0;line-height:1.3}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.primary,.secondary,.danger{min-height:40px;line-height:1.35}
.form-grid{gap:18px;align-items:start}
.field{gap:8px;line-height:1.5}
.field input,.field select{min-height:44px}
.field textarea{line-height:1.7}
.form-grid>.field{margin-bottom:0;min-width:0}
fieldset{min-width:0}
p.notice,p.error-message{line-height:1.7}
.logo{width:42px;height:42px;flex:0 0 42px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:none!important}
.logo img{display:block;width:42px;height:42px;object-fit:contain}
nav a>.icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;line-height:1}
.notification-bell>span:first-child{display:flex;align-items:center}
.panel-drag-handle{cursor:grab;touch-action:none;user-select:none}
.panel-drag-handle:active{cursor:grabbing}
.panel-drag-handle:focus-visible{outline:3px solid var(--green);outline-offset:-3px}
.desmos-panel{resize:both;overflow:auto;min-width:300px;min-height:360px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);width:min(720px,calc(100vw - 32px));height:min(720px,calc(100dvh - 110px));display:flex;flex-direction:column}
.desmos-panel[hidden]{display:none}
.desmos-panel iframe{flex:1;min-height:200px;height:auto;width:100%}
.desmos-bar{flex-shrink:0;gap:12px;align-items:center;padding:10px 4px;border-bottom:1px solid var(--line)}
.desmos-bar strong{line-height:1.4}
.desmos-panel>p{margin-block:10px;font-size:12px}
.desmos-panel>a{display:block;margin-top:10px;font-size:12px;flex-shrink:0}
.name-dialog{max-height:calc(100dvh - 24px);overflow:auto}
.name-dialog h2{padding-block:8px}
.calendar-clock{border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;align-items:end;gap:10px;margin:0}
.calendar-clock legend{padding-inline:5px;font-size:13px;font-weight:600}
.calendar-clock label{display:grid;gap:5px;flex:1;font-size:11px;color:var(--muted)}
.calendar-clock select{min-width:0;min-height:44px;width:100%;color:var(--ink);background:var(--paper,#fff);border:1px solid var(--line);border-radius:8px;padding:8px}
.calendar-clock>span{padding-bottom:12px}
.note-drawing{border-top:1px solid var(--line);padding-top:18px;margin-top:20px}
.note-drawing>summary{cursor:pointer;font-weight:600;font-size:14px;padding-block:8px}
.drawing-tools{display:flex;align-items:end;flex-wrap:wrap;gap:10px;margin-block:16px}
.drawing-tools label{display:grid;gap:6px;font-size:12px}
.drawing-tools select{min-height:40px;border:1px solid var(--line);border-radius:8px;padding:8px;background:var(--paper,#fff);color:var(--ink)}
.note-canvas{display:block;width:100%;height:auto;aspect-ratio:1200/650;border:1px solid #d0d9d4;border-radius:12px;background:white;touch-action:none;cursor:crosshair}
.study-audio>.file-picker{display:inline-flex;margin:0 12px 20px 0}
.study-audio>#build-audio{margin-bottom:20px}
.study-audio>.actions{margin-top:18px}
.study-audio>p{max-width:85ch;line-height:1.7}
.quiz-dropzone{line-height:1.6;padding:22px}
@media(max-width:760px){
 #app{padding:22px 16px 100px}
 .card{padding:20px;margin-bottom:18px}
 .intro{margin-bottom:22px}
 .intro h1{font-size:28px}
 .section-head{gap:12px;margin-bottom:16px}
 .actions .primary,.actions .secondary{flex-grow:1}
 .desmos-panel{width:calc(100vw - 16px);min-width:260px;height:calc(100dvh - 110px)}
 .desmos-bar{flex-wrap:wrap}
 .drawing-tools{gap:8px}
 .note-canvas{min-height:240px}
}

.practice-question h3{white-space:pre-line;line-height:1.65}