#appTabs [data-tab="tools"] { position:relative; }
#appTabs .has-new-release::after { content:""; position:absolute; inset-block-start:5px; inset-inline-end:9px; width:6px; height:6px; border-radius:50%; background:var(--accent); }
#panel[data-current-pane="tools"] #whatsNewButton { min-height:44px; min-block-size:44px; height:auto; width:auto; text-align:start; margin:0; grid-column:2; grid-row:2; }
#panel[open][data-current-pane="tools"] { height:auto; max-block-size:calc(var(--vv-height) * .25); }
#panel[open][data-current-pane="tools"]:has(#appearanceStatus[open]) { max-block-size:calc(var(--vv-height) * .7); }
#panel[open][data-current-pane="tools"] [data-pane="tools"] { display:grid; grid-template-columns:minmax(0,1fr) auto; align-content:start; column-gap:8px; }
#panel[data-current-pane="tools"] .settings-controls { grid-column:1 / -1; }
#panel[data-current-pane="tools"] #storageProtection, #panel[data-current-pane="tools"] #storageProtectionHelp { grid-column:1 / -1; min-width:0; }
#panel[data-current-pane="tools"] #appearanceStatus { grid-column:1; grid-row:2; min-width:0; margin:0; }
#panel[data-current-pane="tools"] #appearanceStatus[open] { grid-column:1 / -1; grid-row:3; }
#panel[open][data-current-pane="whatsNew"] { height:auto; max-block-size:calc(var(--vv-height) * .65); }
#panel[data-current-pane="whatsNew"] #panelBack { min-height:44px; min-block-size:44px; flex:none; }
[data-pane="whatsNew"] { overflow-wrap:anywhere; }
.release-entry { border-block-end:1px solid var(--rule); padding-block:8px 12px; }
.release-entry h3 { margin-block:4px 8px; }
.release-entry ul { padding-inline-start:22px; }
.release-entry li { margin-block:8px; line-height:1.5; }
#readerDebug { box-sizing:border-box; position:fixed; inset:0; margin:auto; width:min(680px,calc(100vw - 20px)); max-width:calc(100vw - 20px); max-height:calc(100dvh - 24px); padding:14px; border:1px solid var(--rule,#68737f); border-radius:12px; background:var(--surface,#fffdf8); color:var(--ink,#263029); font:14px/1.45 system-ui,sans-serif; overflow:auto; }
#readerDebug::backdrop { background:rgb(0 0 0 / .45); }
#readerDebug[open] { display:block; }
#readerDebug h2 { font-size:18px; margin:0 0 10px; }
#readerDebug .debug-actions { display:flex; flex-wrap:wrap; gap:8px; position:sticky; inset-block-start:-14px; background:var(--surface,#fffdf8); padding-block:8px; }
#readerDebug button { min-height:44px; min-width:44px; padding:8px 12px; background:var(--soft,#eeece3); color:inherit; border:1px solid var(--rule,#68737f); border-radius:8px; font:inherit; cursor:pointer; }
#readerDebug pre { white-space:pre-wrap; overflow-wrap:anywhere; direction:ltr; unicode-bidi:isolate; font:12px/1.5 monospace; }
#readerDebug textarea { box-sizing:border-box; width:100%; min-height:150px; direction:ltr; font:12px/1.5 monospace; color:inherit; background:var(--page,#f8f5ed); }
#readerDebug button:focus-visible,#readerDebug textarea:focus-visible { outline:2px solid var(--focus,#8a511c); outline-offset:2px; }
/* The waiting-update action has its own target, separate from Text settings. */
#readerUpdateButton{position:fixed;left:calc(var(--vv-left,0px) + var(--vv-width,100vw) / 2);transform:translateX(-50%);bottom:calc(var(--vv-bottom-gap,0px) + var(--tabs-height) + 6px);z-index:90;width:min(600px,calc(var(--vv-width,100vw) - 24px));min-height:48px;padding:10px 16px;border:2px solid #287aca;border-radius:24px;background:var(--surface);color:var(--ink);font:600 13px/1.4 var(--ui);box-shadow:0 2px 12px #0003;cursor:pointer}
#readerUpdateButton[hidden]{display:none}
:root[data-theme="dark"] #readerUpdateButton{border-color:#78baff}
/* Reserve the update action's row, including when a sheet is open. */
body:has(#readerUpdateButton:not([hidden])){--update-gap:60px}
body:has(#readerUpdateButton:not([hidden])) #readerViewport{inset-block-end:calc(var(--vv-bottom-gap,0px) + var(--tabs-height) + var(--update-gap))}
body.mark-bar-open:has(#readerUpdateButton:not([hidden])) #readerViewport{inset-block-end:calc(var(--vv-bottom-gap,0px) + var(--tabs-height) + var(--update-gap) + 49px)}
body:has(#readerUpdateButton:not([hidden])) #markBar{bottom:calc(var(--vv-bottom-gap,0px) + var(--tabs-height) + var(--update-gap))}
#panel[open]{translate:0 calc(-1 * var(--update-gap,0px))}
/* One handle for every pane; title/debug taps and Back retain their handlers. */
#panel[open] .dialog-head{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);align-items:center;gap:0;flex:none;height:auto;min-height:44px}
#panel[open] #panelTitle{grid-column:1;min-width:0;overflow-wrap:anywhere}
#panel[open] #closePanel{grid-column:3;justify-self:end}
#panel[open] #panelExpand{grid-column:2;grid-row:1;display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;min-block-size:44px;padding:0;border:0;background:transparent;cursor:pointer}
#panelExpand span{width:24px;height:4px;border-radius:2px;background:var(--muted);pointer-events:none}
#panel[open] [data-pane]{overscroll-behavior:contain}
#panel[open][data-expanded="true"],#panel[open][data-expanded="true"]:has(#appearanceStatus[open]){height:min(calc(var(--vv-height) * .75),calc(var(--vv-height) - var(--tabs-height) - var(--update-gap,0px) - env(safe-area-inset-top,0px) - 8px));max-block-size:min(calc(var(--vv-height) * .75),calc(var(--vv-height) - var(--tabs-height) - var(--update-gap,0px) - env(safe-area-inset-top,0px) - 8px));overflow:hidden}

#panelExpand:focus:not(:focus-visible){outline:none}

/* Answer-key excerpts use the existing Notebook rows and actions. */
.nb-answer-highlight>.nb-highlight-remove{margin-inline-start:calc(8px*var(--fs,1))}
.nb-answer-text{display:block;white-space:pre-wrap;overflow-wrap:anywhere}
.nb-answer-highlight small{display:block;margin-block-start:calc(3px*var(--fs,1));line-height:1.4;overflow-wrap:anywhere}
.nb-answer-list{margin-block:calc(4px*var(--fs,1)) calc(8px*var(--fs,1))}