/* The sheet stays white in both themes. Only the tools follow the app theme. */
.notes-launcher { position:fixed; right:0; top:45%; z-index:45; display:flex; align-items:center; gap:5px; min-height:64px; padding:10px 9px; border:1px solid var(--line); border-right:0; border-radius:16px 0 0 16px; background:var(--surface); color:var(--brand); box-shadow:var(--shadow); font:800 13px var(--font); cursor:pointer; }
.notes-launcher b { font-size:25px; }
.lesson-notes { position:fixed; top:var(--zoom-top,0px); right:0; bottom:0; width:var(--notes-width,50vw); z-index:50; display:flex; flex-direction:column; overflow-y:auto; background:var(--surface); border-left:1px solid var(--line); box-shadow:-8px 0 28px rgba(30,20,70,.13); font:600 14px/1.45 var(--font); }
.lesson-notes[hidden],.notes-launcher[hidden] { display:none; }
.notes-heading { display:flex; align-items:center; justify-content:space-between; gap:5px; padding:9px 10px 0 14px; position:sticky; top:0; z-index:3; background:var(--surface); flex:none; }
.notes-heading h2 { margin:0; font:800 19px var(--font); }
.notes-lesson { margin:0; padding:2px 14px 8px; color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lesson-notes button { cursor:pointer; }
.notes-button { display:inline-flex; align-items:center; justify-content:center; flex:none; min-width:40px; min-height:40px; padding:7px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); font:800 14px var(--font); }
.notes-button svg { width:21px; height:21px; flex:none; }
.notes-button[aria-pressed="true"] { color:var(--brand); border-color:var(--brand); background:var(--brand-l); }
.notes-button:disabled { opacity:.4; cursor:default; }
.notes-tools { display:flex; gap:5px; flex-wrap:wrap; padding:6px 10px 9px 14px; flex:none; }
.notes-options { flex:none; border-block:1px solid var(--line); }
.notes-options summary { min-height:40px; padding:10px 14px; cursor:pointer; font-size:12px; }
.notes-settings { padding:0 14px 12px; display:grid; gap:12px; max-height:38dvh; overflow-y:auto; overscroll-behavior:contain; }
.notes-setting { display:grid; gap:5px; }
.notes-setting label,.notes-setting legend { font-size:12px; font-weight:800; }
.notes-setting input[type="range"] { width:100%; min-width:0; min-height:32px; accent-color:var(--brand); }
.notes-colors,.notes-sizes,.notes-positions { display:flex; gap:6px; flex-wrap:wrap; }
.notes-color { width:30px; height:30px; padding:0; border:3px solid var(--surface); border-radius:50%; background:var(--swatch); outline:1px solid var(--line); }
.notes-color[aria-pressed="true"] { outline:2px solid var(--brand); box-shadow:inset 0 0 0 2px white; }
.notes-color-picker { width:35px; height:32px; min-width:0; padding:2px; border:1px solid var(--line); background:var(--surface); border-radius:7px; }
.notes-check { display:flex; align-items:flex-start; gap:7px; font-size:12px; cursor:pointer; }
.notes-check input { flex:none; width:17px; height:17px; accent-color:var(--brand); margin:0; }
.notes-hint { margin:0; color:var(--ink-2); font-size:12px; }
.notes-viewport { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding:10px 12px 10px 16px; background:var(--surface-2); }
.notes-paper { background:#fff; border-radius:2px; box-shadow:0 1px 6px #0001; }
.notes-canvas { display:block; width:100%; height:auto; aspect-ratio:1/3; background:#fff; touch-action:none; cursor:crosshair; border-radius:2px; }
.notes-canvas[data-tool="pan"] { touch-action:pan-x pan-y; cursor:grab; }
.notes-canvas[data-tool="erase"] { cursor:cell; }
.notes-canvas[aria-disabled="true"] { pointer-events:none; }
.notes-pages { display:flex; align-items:center; justify-content:center; gap:5px; padding:7px 8px 2px; flex-wrap:wrap; }
.notes-page-number { font-size:12px; min-width:42px; text-align:center; }
.notes-status { padding:5px 12px max(9px, env(safe-area-inset-bottom)); font-size:11px; line-height:1.4; color:var(--muted); }
.notes-status[data-error="true"] { color:var(--bad-d); }
.notes-status button { margin-top:5px; }
.notes-resize { position:absolute; left:0; top:40%; width:12px; height:100px; border:0; padding:0; background:transparent; touch-action:none; cursor:ew-resize; z-index:4; }
.notes-resize::after { content:''; display:block; width:4px; height:38px; background:var(--muted); border-radius:9px; margin-left:2px; }
.notes-confirm { margin:0 12px 8px; padding:10px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); }
.notes-confirm p { font-size:12px; margin:0 0 8px; }
.notes-confirm > div { display:flex; gap:6px; flex-wrap:wrap; }
.notes-confirm .notes-button { font-size:12px; }
body.notes-open .player-foot { padding-inline:18px; }
body[data-notes-side="left"] .notes-launcher { left:0; right:auto; border-left:0; border-right:1px solid var(--line); border-radius:0 16px 16px 0; }
body[data-notes-side="left"] .lesson-notes { left:0; right:auto; border-left:0; border-right:1px solid var(--line); }
body[data-notes-side="left"] .notes-resize { right:0; left:auto; }
body[data-notes-side="left"] .notes-heading svg { transform:rotate(180deg); }
body[data-notes-side="top"] .notes-launcher,body[data-notes-side="bottom"] .notes-launcher { left:50%; right:auto; transform:translateX(-50%); min-height:36px; padding:3px 14px; }
body[data-notes-side="top"] .notes-launcher { top:var(--zoom-top,0px); border-radius:0 0 12px 12px; border-top:0; }
body[data-notes-side="bottom"] .notes-launcher { top:auto; bottom:0; border-radius:12px 12px 0 0; border-bottom:0; }
.lesson-notes.notes-horizontal { left:0; right:0; width:var(--zoom-view-width,100vw); height:var(--notes-height,50vh); bottom:auto; border-inline:0; }
body[data-notes-side="bottom"] .lesson-notes { top:auto; bottom:0; border-top:1px solid var(--line); }
body[data-notes-side="top"] .lesson-notes { border-bottom:1px solid var(--line); }
.notes-horizontal .notes-lesson { display:none; }
.notes-horizontal .notes-tools { flex-wrap:nowrap; overflow-x:auto; padding-block:3px; }
.notes-horizontal .notes-heading { padding-top:3px; }
.notes-horizontal .notes-options summary { min-height:32px; padding-block:6px; }
.notes-horizontal .notes-viewport { min-height:72px; }
.notes-horizontal .notes-pages { flex-wrap:nowrap; padding-top:3px; }
.notes-horizontal .notes-pages .notes-button { min-width:30px; min-height:32px; padding:3px; }
.notes-horizontal .notes-status { padding-block:3px; }
.notes-horizontal .notes-resize { top:0; left:calc(50% - 50px); width:100px; height:12px; cursor:ns-resize; }
.notes-horizontal .notes-resize::after { width:38px; height:4px; margin:2px auto; }
body[data-notes-side="top"] .notes-resize { top:auto; bottom:0; }
body[data-notes-side="top"] .notes-heading svg { transform:rotate(-90deg); }
body[data-notes-side="bottom"] .notes-heading svg { transform:rotate(90deg); }
body.notes-open[data-notes-side="top"] #app { margin-top:var(--notes-height); }
body.notes-open[data-notes-side="bottom"] #app { padding-bottom:var(--notes-height); }
body.notes-open[data-notes-side="top"] .player-top { top:calc(var(--zoom-top,0px) + var(--notes-height)); }
body.notes-open[data-notes-side="bottom"] .player-foot { bottom:var(--notes-height); }
@media(min-width:700px) {
 body.notes-open[data-notes-side="right"] #app { margin-right:var(--notes-width); }
 body.notes-open[data-notes-side="left"] #app { margin-left:var(--notes-width); }
}
@media(max-height:500px) { .notes-heading{padding-top:3px}.notes-lesson{display:none}.notes-tools{padding-block:3px}.notes-options summary{min-height:32px;padding-block:6px}.notes-pages{padding-top:3px}.notes-status{padding-block:3px} }
@media print { .lesson-notes,.notes-launcher { display:none!important; } body.notes-open #app { margin:0!important; padding-bottom:0!important; } }
.notes-source-setting select { max-width:100%; width:100%; min-width:0; padding:8px; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:8px; }