/* ==========================================================================
   The Notebook - tool-specific styles
   base.css handles tokens, reset, fonts, .home-btn, .util-btn, .overlay,
   .overlay-card, .menu-btn, .menu-seg, .menu-row, .menu-field, focus-visible.
   Layout: sidebar (notebooks) + main (bar, scrolling stage, drawing tray).
   Themes live on body[data-theme]: tagwhy (site look, default), paper
   (light), minecraft (pixel font, generated textures, hotbar tray). The
   themes only re-map tokens; the --nb-* tokens describe the sheet itself.
   ========================================================================== */

@font-face {
  font-family: "Monocraft";
  src: url("vendor/monocraft.woff") format("woff");
  font-display: swap;
}

[hidden] { display: none !important; }

body {
  --side-w: 272px;
  --nb-sheet: var(--panel-2);
  --nb-sheet-tex: none;
  --nb-sheet-line: var(--line);
  --nb-rule: rgba(255, 255, 255, 0.055);
  --nb-dot: rgba(255, 255, 255, 0.17);
  --nb-margin: none;
  --nb-text: var(--text);
  --nb-muted: var(--muted);
  --nb-ink: var(--text);
  --nb-code: rgba(255, 255, 255, 0.05);
  --nb-callout: rgba(255, 255, 255, 0.045);
  --nb-font-title: var(--font-serif);
  --nb-font-text: var(--font-sans);
}

html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body { min-height: 0; }
/* the app fills the viewport; the shared footer would sit on top of the sheet */
.site-foot { display: none; }

.app { position: fixed; inset: 0; display: flex; }

/* ---------- sidebar ---------- */
.side {
  flex: 0 0 var(--side-w);
  width: var(--side-w);
  display: flex; flex-direction: column;
  background: var(--bg-deep);
  border-right: 1px solid var(--line);
  transition: margin-left 0.25s ease;
  min-height: 0;
}
body.side-closed .side { margin-left: calc(var(--side-w) * -1); }
.side-head { padding: 16px 12px 0 62px; }
.brand {
  font-family: var(--nb-font-title); font-weight: 400; font-size: 22px; line-height: 38px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 12px 8px; padding: 8px 10px;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  color: var(--muted);
}
.search .icon { width: 16px; height: 16px; }
.search input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  color: var(--text); font: inherit; font-size: 14px;
}
.search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search:focus-within { border-color: var(--line-3); }

.books { flex: 1; overflow-y: auto; padding: 4px 8px 12px; min-height: 0; }
.book-row { display: flex; align-items: center; border-radius: var(--radius-sm); }
.book-row:hover { background: var(--surface); }
.book-btn {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  padding: 8px; background: none; border: 0; color: var(--text);
  font: inherit; font-size: 14px; font-weight: 500; text-align: left; cursor: pointer;
}
.book-ic {
  flex: none; width: 12px; height: 16px; border-radius: 2px;
  background-color: var(--c);
  box-shadow: inset 3px 0 0 rgba(0, 0, 0, 0.28);
}
.book-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.book-n { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.book-row .nb-icon.sm { opacity: 0; transition: opacity 0.15s ease; }
.book-row:hover .nb-icon.sm, .book-row .nb-icon.sm:focus-visible, .book.active .nb-icon.sm { opacity: 1; }
@media (hover: none) { .book-row .nb-icon.sm { opacity: 1; } }

.pages { padding: 2px 0 8px 20px; }
.page-row {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 8px; background: none; border: 0; border-radius: var(--radius-sm);
  color: var(--text-soft); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.page-row .icon { width: 16px; height: 16px; color: var(--muted); }
.page-row span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-row em { font-style: normal; font-size: 11px; color: var(--muted); white-space: nowrap; max-width: 40%; overflow: hidden; text-overflow: ellipsis; }
.page-row:hover { background: var(--surface); color: var(--text); }
.page-row.on { background: var(--surface-hover); color: var(--text); }
.books > .pages { padding-left: 0; }
.side-label { font-size: 12px; color: var(--muted); padding: 6px 8px; }
.side-foot { padding: 12px; border-top: 1px solid var(--line); }

.scrim { position: fixed; inset: 0; z-index: 55; background: var(--overlay); }

/* ---------- shared small controls ---------- */
.nb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 9px 14px;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  background: none; color: var(--text); font: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease;
}
.nb-btn:hover { background: var(--surface); border-color: var(--line-3); }
.nb-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.nb-btn.primary:hover { opacity: 0.9; }
.nb-btn.wide { width: 100%; }
.nb-btn .icon { width: 18px; height: 18px; }

.nb-icon {
  flex: none; width: 38px; height: 38px; display: inline-grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--muted); cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.nb-icon:hover { color: var(--text); border-color: var(--line-3); }
.nb-icon .icon { width: 18px; height: 18px; }
.nb-icon.sm { width: 30px; height: 30px; border: 0; background: none; }

/* ---------- main column ---------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.bar {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 16px 66px 10px 16px;
}
body.side-closed .bar { padding-left: 62px; }
.crumb { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; white-space: nowrap; }
.crumb-b {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 45%;
  background: none; border: 0; padding: 6px 2px; color: var(--muted); font: inherit; cursor: pointer;
}
.crumb-b span:last-child { overflow: hidden; text-overflow: ellipsis; }
.crumb-b:hover { color: var(--text); }
.crumb-dot { flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.crumb-sep { color: var(--line-3); }
.crumb-p { overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.bar-end { display: flex; align-items: center; gap: 8px; }
.bar-insert { min-height: 38px; padding: 0 12px; }
.pop-head { font-size: 11px; color: var(--muted); padding: 6px 10px 2px; }

.seg { display: flex; height: 38px; overflow: hidden; }
.seg-b {
  display: inline-flex; align-items: center; gap: 6px; padding: 0 12px;
  background: none; border: 0; color: var(--muted); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.seg-b + .seg-b { border-left: 1px solid var(--line-2); }
.seg-b .icon { width: 17px; height: 17px; }
.seg-b:hover { color: var(--text); }
.seg-b[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.zoom { display: flex; align-items: center; gap: 2px; }
.zoom-v { min-width: 46px; text-align: center; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

.stage {
  flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain;
  padding: 4px 28px 150px;
  -webkit-overflow-scrolling: touch;
}
.stage-inner { min-height: 100%; }

/* ---------- notebook overview / empty ---------- */
.overview { max-width: 760px; margin: 40px auto 0; }
.overview .eyebrow { display: inline-flex; gap: 8px; }
.overview .eyebrow > * { align-self: center; }
.ov-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--c, var(--muted)); }
.ov-title { font-family: var(--nb-font-title); font-weight: 400; font-size: 44px; line-height: 1.1; letter-spacing: -0.015em; margin: 8px 0 6px; overflow-wrap: anywhere; }
.ov-facts { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ov-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 28px; }
.ov-list { border-top: 1px solid var(--line); }
.ov-row {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 4px;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  color: var(--text); font: inherit; font-size: 15px; text-align: left; cursor: pointer;
}
.ov-row:hover { background: var(--surface); }
.ov-row .icon { width: 18px; height: 18px; color: var(--muted); }
.ov-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-meta { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- the sheet (typed page) ----------
   Every line is 28px so text sits on the ruling: padding 56 + header 112
   (title 56, facts 28, gap 28) = blocks start on line 6. */
.sheet {
  position: relative; margin: 0 auto;
  background-color: var(--nb-sheet);
  border: 1px solid var(--nb-sheet-line); border-radius: var(--radius-sm);
  color: var(--nb-text);
}
.sheet img, .sheet canvas { image-rendering: auto; }
.sheet-wrap { padding-top: 6px; }
.sheet.note {
  width: 100%; max-width: 860px;
  padding: 56px 64px 84px;
  font-family: var(--nb-font-text);
}
.sheet.note, .sheet.blank {
  background-image: var(--nb-margin), var(--nb-paper, none), var(--nb-sheet-tex);
  background-size: 100% 100%, var(--nb-paper-size, auto), 64px 64px;
  background-position: 0 0, var(--nb-paper-pos, 0 0), 0 0;
}
.sheet[data-paper="lined"] {
  --nb-paper: repeating-linear-gradient(to bottom, transparent 0 27px, var(--nb-rule) 27px 28px);
  --nb-paper-size: 100% 28px;
}
.sheet[data-paper="grid"] {
  --nb-paper: linear-gradient(var(--nb-rule) 1px, transparent 1px), linear-gradient(90deg, var(--nb-rule) 1px, transparent 1px);
  --nb-paper-size: 28px 28px;
  --nb-margin: none;
}
.sheet[data-paper="grid"] { background-image: var(--nb-paper), var(--nb-sheet-tex); background-size: 28px 28px, 28px 28px, 64px 64px; background-position: -1px -1px, -1px -1px, 0 0; }
.sheet[data-paper="dots"] {
  background-image: radial-gradient(circle, var(--nb-dot) 1.3px, transparent 1.7px), var(--nb-sheet-tex);
  background-size: 28px 28px, 64px 64px; background-position: -14px -14px, 0 0;
}
.sheet[data-paper="plain"] { background-image: var(--nb-sheet-tex); background-size: 64px 64px; }

.sheet-head { position: relative; z-index: 1; margin-bottom: 28px; }
.page-title {
  font-family: var(--nb-font-title); font-size: 34px; font-weight: 400; line-height: 56px;
  letter-spacing: -0.01em; outline: none; min-height: 56px; overflow-wrap: anywhere; color: var(--nb-text);
}
.page-title:empty::before { content: attr(data-ph); color: var(--nb-muted); opacity: 0.6; }
.page-facts { font-size: 12px; line-height: 28px; color: var(--nb-muted); font-variant-numeric: tabular-nums; }

.blocks { position: relative; z-index: 1; }
.blk { position: relative; --ind: 0; }
.blk[data-indent="1"] { --ind: 1; }
.blk[data-indent="2"] { --ind: 2; }
.blk[data-indent="3"] { --ind: 3; }
.blk[data-indent="4"] { --ind: 4; }
.blk-text {
  outline: none; min-height: 28px; font-size: 16px; line-height: 28px;
  white-space: pre-wrap; overflow-wrap: anywhere; color: var(--nb-text);
  margin-left: calc(var(--ind) * 28px);
}
.blk-text:empty:focus::before, .blocks > .blk:only-child .blk-text:empty::before { content: attr(data-ph); color: var(--nb-muted); opacity: 0.7; pointer-events: none; }
.blk-text a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.blk-text code, .tbox-text code { font-family: var(--font-mono); font-size: 0.88em; background: var(--nb-code); padding: 1px 5px; border-radius: 3px; }
.blk-text mark, .tbox-text mark { background: rgba(255, 212, 59, 0.42); color: inherit; padding: 0 1px; border-radius: 2px; }

.blk[data-type="h1"] .blk-text { font-family: var(--nb-font-title); font-size: 30px; font-weight: 400; line-height: 56px; letter-spacing: -0.01em; }
.blk[data-type="h2"] .blk-text { font-family: var(--nb-font-title); font-size: 23px; font-weight: 500; line-height: 28px; padding-top: 28px; }
.blk[data-type="h3"] .blk-text { font-size: 17px; font-weight: 600; line-height: 28px; padding-top: 28px; }
.blocks > .blk:first-child .blk-text { padding-top: 0; }

.blk[data-type="ul"] .blk-text, .blk[data-type="ol"] .blk-text, .blk[data-type="todo"] .blk-text { margin-left: calc(var(--ind) * 28px + 28px); }
.blk[data-type="ul"]::before, .blk[data-type="ol"]::before {
  position: absolute; top: 0; left: calc(var(--ind) * 28px); width: 22px;
  line-height: 28px; text-align: center; color: var(--nb-muted); font-variant-numeric: tabular-nums;
}
.blk[data-type="ul"]::before { content: "\2022"; font-size: 18px; }
.blk[data-type="ul"][data-indent="1"]::before, .blk[data-type="ul"][data-indent="3"]::before { content: "\25E6"; }
.blk[data-type="ul"][data-indent="2"]::before, .blk[data-type="ul"][data-indent="4"]::before { content: "\25AA"; font-size: 14px; }
.blk[data-type="ol"]::before { content: attr(data-num); text-align: right; font-size: 15px; }
.blk-check {
  position: absolute; top: 5px; left: calc(var(--ind) * 28px + 2px);
  width: 18px; height: 18px; display: grid; place-items: center; padding: 0;
  border: 1.5px solid var(--nb-muted); border-radius: 4px; background: none; color: var(--nb-sheet); cursor: pointer;
}
.blk-check .icon { width: 13px; height: 13px; stroke-width: 3; opacity: 0; }
.blk.done .blk-check { background: var(--nb-text); border-color: var(--nb-text); }
.blk.done .blk-check .icon { opacity: 1; }
.blk.done .blk-text { color: var(--nb-muted); text-decoration: line-through; }
.blk[data-type="quote"] .blk-text { border-left: 3px solid var(--nb-text); padding-left: 16px; }
.blk[data-type="callout"] .blk-text { background: var(--nb-callout); border-radius: var(--radius-sm); padding: 14px 16px 14px 46px; }
.blk[data-type="callout"]::before {
  content: "!"; position: absolute; left: calc(var(--ind) * 28px + 16px); top: 19px;
  width: 18px; height: 18px; border-radius: 50%; background: var(--nb-text); color: var(--nb-sheet);
  font-size: 12px; font-weight: 700; line-height: 18px; text-align: center; font-family: var(--font-sans);
}
.blk[data-type="code"] .blk-text { font-family: var(--font-mono); font-size: 14px; background: var(--nb-code); padding: 14px 16px; border-radius: var(--radius-sm); tab-size: 2; }
.blk[data-type="hr"] { height: 28px; display: flex; align-items: center; outline: none; cursor: default; }
.blk[data-type="hr"] hr { flex: 1; border: 0; height: 1px; background: var(--nb-text); opacity: 0.3; }
.blk[data-type="hr"]:focus hr { height: 2px; opacity: 0.8; }
.blk[data-type="img"] { outline: none; padding: 14px 0; }
.blk-img img { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin: 0; }
.blk[data-type="img"]:focus .blk-img img { outline: 2px solid var(--nb-text); outline-offset: 3px; }

/* ---------- ink + text boxes (both page kinds) ---------- */
.ink { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ink-seg { position: absolute; left: 0; right: 0; }
.ink-seg canvas { display: block; width: 100%; height: 100%; }
.is-light .ink canvas { mix-blend-mode: multiply; }
body.drawing .ink { pointer-events: auto; touch-action: none; cursor: crosshair; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.drawing[data-tool="text"] .ink { pointer-events: none; }
body.drawing[data-tool="eraser"] .ink { cursor: cell; }
body.drawing[data-tool="text"] .sheet { cursor: text; }
body.drawing .blocks { -webkit-user-select: none; user-select: none; }

.boxes { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.tbox { position: absolute; pointer-events: auto; line-height: 1.35; font-family: var(--nb-font-text); }
.tbox-text { outline: none; min-height: 1.35em; padding: 1px 4px; border-radius: 3px; white-space: pre-wrap; overflow-wrap: anywhere; }
.tbox-text:focus, body.drawing[data-tool="text"] .tbox-text { box-shadow: 0 0 0 1px rgba(128, 128, 128, 0.55); }
.tbox-grip {
  position: absolute; left: -16px; top: 1px; width: 14px; height: 20px; cursor: move; touch-action: none; opacity: 0;
  background: radial-gradient(circle, rgba(128, 128, 128, 0.9) 1.3px, transparent 1.6px) 0 0 / 7px 6px;
  transition: opacity 0.15s ease;
}
.tbox:hover .tbox-grip, .tbox:focus-within .tbox-grip, body.drawing[data-tool="text"] .tbox-grip { opacity: 1; }

/* ---------- documents: fixed sheets (PDF pages, blank pages) ---------- */
.doc { width: max-content; min-width: 100%; display: flex; flex-direction: column; align-items: center; padding-top: 6px; }
.doc > .sheet-wrap { width: 100%; }
.doc-head { width: 100%; max-width: 860px; margin-bottom: 18px; }
.sheets { display: flex; flex-direction: column; align-items: center; width: 100%; }
.doc > .sheet-wrap + .sheets { margin-top: 18px; }
.sheet.fx { flex: none; border-radius: 2px; }
.sheet.pdf-page { background: #fff; border-color: rgba(0, 0, 0, 0.12); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35); }
.pdf-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pdf-ph { position: absolute; inset: 0; display: grid; place-items: center; color: #b5b5b0; font-size: 15px; font-variant-numeric: tabular-nums; }
.pdf-page.ready .pdf-ph { display: none; }
.sheet-cap { font-size: 12px; color: var(--muted); margin: 8px 0 22px; font-variant-numeric: tabular-nums; }
.book-no { display: none; }
.add-row { padding: 4px 0 20px; }

/* free images + selection + lasso */
.imgs { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.fimg { position: absolute; pointer-events: auto; cursor: grab; touch-action: none; }
.fimg img { display: block; width: 100%; height: 100%; object-fit: fill; border-radius: 2px; -webkit-user-drag: none; user-select: none; }
body.drawing .fimg { pointer-events: none; }
.sel {
  position: absolute; z-index: 6; touch-action: none; cursor: move;
  border: 1.5px dashed #3e7bfa; border-radius: 3px; background: rgba(62, 123, 250, 0.06);
}
.sel-h {
  position: absolute; right: -11px; bottom: -11px; width: 22px; height: 22px; cursor: nwse-resize;
  border-radius: 50%; background: #fff; border: 2px solid #3e7bfa; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.sel-bar {
  position: absolute; left: 0; bottom: calc(100% + 8px); display: flex; gap: 2px; padding: 3px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-md);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35); cursor: default; white-space: nowrap;
}
.sel.bar-below .sel-bar { bottom: auto; top: calc(100% + 14px); }
.sel-bar .nb-icon.sm { color: var(--text); width: 34px; height: 34px; }
.sel-bar .nb-icon.sm:hover { background: var(--surface-hover); }
.lasso { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 7; pointer-events: none; overflow: visible; }
.lasso polyline { fill: rgba(62, 123, 250, 0.08); stroke: #3e7bfa; stroke-width: 1.5; stroke-dasharray: 5 4; }
body.drawing[data-tool="select"] .ink { cursor: default; }

/* inline images in typed text: corner handle resizes */
.blk-img { position: relative; display: inline-block; max-width: 100%; }
.blk-img img { width: 100%; }
.blk-img-h {
  position: absolute; right: -6px; bottom: -6px; width: 16px; height: 16px; cursor: nwse-resize; touch-action: none;
  border-radius: 50%; background: var(--nb-sheet); border: 2px solid var(--nb-text); opacity: 0; transition: opacity 0.15s ease;
}
.blk[data-type="img"]:hover .blk-img-h, .blk[data-type="img"]:focus .blk-img-h { opacity: 1; }
@media (hover: none) { .blk[data-type="img"]:focus .blk-img-h { opacity: 1; } }

/* page strip */
.thumbs {
  position: absolute; top: 64px; right: 0; bottom: 0; width: 196px; z-index: 15;
  display: flex; flex-direction: column; background: var(--bg-deep); border-left: 1px solid var(--line);
}
body.thumbs-open .stage { margin-right: 196px; }
.thumbs-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 6px 16px; }
.thumbs-list { flex: 1; overflow-y: auto; padding: 4px 16px 24px; display: flex; flex-direction: column; gap: 14px; }
.th { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.th-btn { display: block; width: 100%; padding: 0; border: 1px solid var(--line-2); border-radius: 3px; background: var(--nb-sheet); cursor: pointer; overflow: hidden; }
.th-btn canvas { display: block; width: 100%; height: 100%; }
.th-btn:hover { border-color: var(--text); }
.th-note { aspect-ratio: 595 / 842; padding: 12px 10px; text-align: left; font-family: var(--nb-font-title); font-size: 13px; line-height: 1.3; color: var(--nb-text); }
.th-n { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.th-more { position: absolute; right: 2px; bottom: 0; }

/* ---------- drawing tray ---------- */
.tray {
  position: absolute; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 20; display: flex; gap: 6px; padding: 6px;
  max-width: calc(100% - 24px); overflow-x: auto; scrollbar-width: none;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-md);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}
.tray::-webkit-scrollbar { display: none; }
.tray-g { display: flex; gap: 2px; flex: none; }
.tray-g + .tray-g { border-left: 1px solid var(--line-2); padding-left: 6px; }
.slot {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  border: 0; border-radius: var(--radius-sm); background: none; color: var(--muted); cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.slot .icon { width: 20px; height: 20px; }
.slot:hover { color: var(--text); background: var(--surface); }
.slot[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.slot.sw i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.35); }
.slot.sw[aria-pressed="true"] { background: var(--surface-hover); box-shadow: inset 0 0 0 1px var(--text); }
.slot.sz i { display: block; border-radius: 50%; background: currentColor; }

/* ---------- popovers ---------- */
.pop {
  position: fixed; z-index: 200; min-width: 210px; max-width: calc(100vw - 16px); max-height: 60vh; overflow-y: auto;
  padding: 6px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-md);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}
.pop.slash { width: 270px; max-height: 330px; }
.pop-i {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px;
  background: none; border: 0; border-radius: var(--radius-sm);
  color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.pop-i:hover, .pop-i.on { background: var(--surface-hover); }
.pop-i .icon { width: 18px; height: 18px; color: var(--muted); }
.pop-k { flex: none; width: 26px; text-align: center; font-size: 13px; font-weight: 600; color: var(--muted); }
.pop-l { flex: 1; min-width: 0; }
.pop-h { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.pop-i.danger, .pop-i.danger .icon { color: #e0745a; }
.pop-i.armed { background: rgba(224, 116, 90, 0.14); }
.pop-sep { height: 1px; background: var(--line-2); margin: 6px 4px; }

/* ---------- sheets (overlays) ---------- */
.nb-sheet .field { display: flex; flex-direction: column; gap: 6px; }
.colors { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 0; }
.color { width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--c); cursor: pointer; }
.color[aria-checked="true"] { box-shadow: 0 0 0 2px var(--panel-2), 0 0 0 4px var(--text); }
.danger.armed { background: rgba(201, 106, 74, 0.14); }

/* ---------- toasts + drop hint ---------- */
.toasts { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; width: max-content; max-width: calc(100vw - 140px); }
.toast {
  padding: 9px 14px; border-radius: var(--radius-sm); background: var(--text); color: var(--bg);
  font-size: 14px; opacity: 0; transform: translateY(-6px); transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.in { opacity: 1; transform: none; }
.toast.ach b { display: block; font-weight: 600; }
.drop-hint {
  position: fixed; inset: 12px; z-index: 400; pointer-events: none;
  display: grid; place-items: center;
  border: 2px dashed var(--muted); border-radius: var(--radius-lg); background: var(--overlay);
  font-size: 18px; color: var(--text);
}

/* ---------- XP (Minecraft only) ---------- */
.xp { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-bottom: 12px; }
.xp-lvl { font-size: 16px; line-height: 1; color: #80ff20; text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000; }
.xp-bar { position: relative; width: 100%; height: 12px; background: #000; border: 2px solid #000; }
.xp-bar i { display: block; height: 100%; background: linear-gradient(#c3ff7a 0 30%, #80ff20 30% 70%, #4aa80c 70%); transition: width 0.4s ease; }
.xp-bar::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 18 - 2px), #000 calc(100% / 18 - 2px) calc(100% / 18)); }

/* ==========================================================================
   Theme: Paper (light)
   ========================================================================== */
body[data-theme="paper"] {
  color-scheme: light;
  --bg: #f1efe8; --bg-deep: #e9e6dd; --panel: #fbfaf6; --panel-2: #f6f4ee; --panel-raised: #fff;
  --text: #1d1d1b; --text-soft: #3b3b38; --muted: #74726b;
  --line: #dedad0; --line-2: #d1cdc1; --line-3: #bdb9ad;
  --accent: #1d1d1b; --accent-soft: rgba(0, 0, 0, 0.08);
  --surface: rgba(0, 0, 0, 0.035); --surface-hover: rgba(0, 0, 0, 0.07); --overlay: rgba(241, 239, 232, 0.82);
  --nb-sheet: #ffffff; --nb-sheet-line: #e2ded3;
  --nb-rule: rgba(70, 110, 190, 0.22); --nb-dot: rgba(0, 0, 0, 0.22);
  --nb-margin: linear-gradient(90deg, transparent 47px, rgba(214, 72, 72, 0.4) 47px 48px, transparent 48px);
  --nb-margin-c: rgba(214, 72, 72, 0.4);
  --nb-text: #1d1d1b; --nb-muted: #8a877e; --nb-ink: #1f2a44;
  --nb-code: rgba(0, 0, 0, 0.05); --nb-callout: #f4f1e6;
}
body[data-theme="paper"] .menu-btn.primary { color: var(--bg); }
body[data-theme="paper"] .menu-btn.primary:hover { background: #333; }
body[data-theme="paper"] .sheet.pdf-page { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); }
body[data-theme="paper"] .tray, body[data-theme="paper"] .pop { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12); }

/* ==========================================================================
   Theme: Minecraft
   Own art (generated in script.js: landscape, --tx-planks/-paper, quill cursor),
   Monocraft pixel font (SIL OFL, vendor/). GUI = grey bevelled buttons,
   inventory-slot notebooks, hotbar tray, tooltip-style menus, book-paper sheet.
   ========================================================================== */
body[data-theme="minecraft"] {
  color-scheme: dark;
  --font-sans: "Monocraft", ui-monospace, monospace;
  --font-serif: "Monocraft", ui-monospace, monospace;
  --bg: #1e1712; --bg-deep: #15100c; --panel: #3b3b3b; --panel-2: #2d2d2d; --panel-raised: #444;
  --text: #ffffff; --text-soft: #e0e0e0; --muted: #a8a8a8;
  --line: #000; --line-2: #000; --line-3: #2b2b2b;
  --accent: #ffffff; --surface: rgba(255, 255, 255, 0.08); --surface-hover: rgba(255, 255, 255, 0.16); --overlay: rgba(0, 0, 0, 0.6);
  --nb-sheet: #efe3c6; --nb-sheet-tex: var(--tx-paper); --nb-sheet-line: #3b2a17;
  --nb-rule: rgba(110, 80, 40, 0.3); --nb-dot: rgba(90, 60, 30, 0.42);
  --nb-text: #2b1d10; --nb-muted: #8a7350; --nb-ink: #2b1d10;
  --nb-code: rgba(80, 50, 20, 0.1); --nb-callout: rgba(80, 50, 20, 0.08);
  --nb-font-title: "Monocraft", ui-monospace, monospace;
  --nb-font-text: "IBM Plex Sans", system-ui, sans-serif;
  --mc-shadow: 2px 2px 0 #3f3f3f;
}
body[data-theme="minecraft"].pixel-text { --nb-font-text: "Monocraft", ui-monospace, monospace; }
body[data-theme="minecraft"] { background: var(--mc-sky, #6e9ff3); }
body[data-theme="minecraft"] .side { background: rgba(0, 0, 0, 0.55); border-right: 3px solid #000; }
body[data-theme="minecraft"] .side, body[data-theme="minecraft"] .bar, body[data-theme="minecraft"] .overview { text-shadow: var(--mc-shadow); }
body[data-theme="minecraft"] .brand { font-size: 18px; }
body[data-theme="minecraft"] .search { background: #000; border: 2px solid #a0a0a0; border-radius: 0; color: #a0a0a0; }
body[data-theme="minecraft"] .search input { color: #fff; text-shadow: none; }
body[data-theme="minecraft"] .side-foot { border-top: 3px solid #000; }
body[data-theme="minecraft"] .book-row, body[data-theme="minecraft"] .page-row { border-radius: 0; }
body[data-theme="minecraft"] .book-row:hover, body[data-theme="minecraft"] .page-row:hover { background: rgba(255, 255, 255, 0.12); }
body[data-theme="minecraft"] .page-row.on { background: rgba(255, 255, 255, 0.22); }
body[data-theme="minecraft"] .page-row .icon, body[data-theme="minecraft"] .book-n { color: #d0d0d0; }
body[data-theme="minecraft"] .book-ic {
  width: 34px; height: 34px; border-radius: 0;
  background-color: #8b8b8b; background-size: 24px 24px; background-position: center; background-repeat: no-repeat;
  image-rendering: pixelated;
  box-shadow: inset 2px 2px 0 #373737, inset -2px -2px 0 #ffffff;
}
body[data-theme="minecraft"] .book.active .book-ic { outline: 2px solid #fff; outline-offset: 0; }
body[data-theme="minecraft"] .book-btn { padding: 5px 6px; }

/* bevelled grey buttons */
body[data-theme="minecraft"] .nb-btn, body[data-theme="minecraft"] .nb-icon:not(.sm), body[data-theme="minecraft"] .menu-btn,
body[data-theme="minecraft"] .home-btn, body[data-theme="minecraft"] .util-btn, body[data-theme="minecraft"] .seg-b,
body[data-theme="minecraft"] .menu-seg-btn {
  background: #6f6f6f; color: #e8e8e8; border: 2px solid #000; border-radius: 0;
  box-shadow: inset 2px 2px 0 #a9a9a9, inset -2px -3px 0 #4c4c4c;
  text-shadow: var(--mc-shadow);
}
body[data-theme="minecraft"] .nb-btn:hover, body[data-theme="minecraft"] .nb-icon:not(.sm):hover, body[data-theme="minecraft"] .menu-btn:hover,
body[data-theme="minecraft"] .home-btn:hover, body[data-theme="minecraft"] .util-btn:hover, body[data-theme="minecraft"] .seg-b:hover,
body[data-theme="minecraft"] .menu-seg-btn:hover { background: #7b7b7b; border-color: #fff; color: #ffffa0; opacity: 1; }
body[data-theme="minecraft"] .nb-btn.primary, body[data-theme="minecraft"] .menu-btn.primary { background: #6f6f6f; color: #e8e8e8; border-color: #000; }
body[data-theme="minecraft"] .menu-btn.danger { color: #ff5555; }
body[data-theme="minecraft"] .seg, body[data-theme="minecraft"] .menu-seg { border: 0; border-radius: 0; gap: 0; }
body[data-theme="minecraft"] .seg-b + .seg-b, body[data-theme="minecraft"] .menu-seg-btn + .menu-seg-btn { border-left: 0; margin-left: -2px; }
body[data-theme="minecraft"] .seg-b[aria-pressed="true"], body[data-theme="minecraft"] .menu-seg-btn[aria-pressed="true"] {
  background: #3e3e3e; color: #ffff55; box-shadow: inset 2px 2px 0 #262626;
}
body[data-theme="minecraft"] .nb-icon.sm { color: #e0e0e0; }
body[data-theme="minecraft"] .crumb-b { color: #d0d0d0; }
body[data-theme="minecraft"] .crumb-dot, body[data-theme="minecraft"] .ov-dot { border-radius: 0; }
body[data-theme="minecraft"] .zoom-v { color: #fff; }

/* overview rows on the dirt */
body[data-theme="minecraft"] .ov-list { border-top: 2px solid #000; }
body[data-theme="minecraft"] .ov-row { border-bottom: 2px solid #000; background: rgba(0, 0, 0, 0.3); }
body[data-theme="minecraft"] .ov-row:hover { background: rgba(255, 255, 255, 0.12); }
body[data-theme="minecraft"] .ov-row .icon, body[data-theme="minecraft"] .ov-meta, body[data-theme="minecraft"] .ov-facts { color: #c8c8c8; }
body[data-theme="minecraft"] .ov-title { font-size: 34px; letter-spacing: 0; }

/* book & quill page: cream paper in a stepped brown frame, page number top right */
body[data-theme="minecraft"] .sheet.note, body[data-theme="minecraft"] .sheet.blank {
  border: 0; border-radius: 0; image-rendering: pixelated;
  box-shadow:
    inset 0 0 0 3px #f8f0d8,
    inset 0 0 0 6px #ddcb9e,
    inset 0 0 0 8px #c7b07c,
    0 0 0 4px #5a3d1e,
    0 0 0 8px #2b1a0b,
    12px 14px 0 8px rgba(0, 0, 0, 0.35);
}
body[data-theme="minecraft"] .sheet.note::before, body[data-theme="minecraft"] .sheet.blank::before {
  content: ""; position: absolute; top: 8px; bottom: 8px; left: 8px; width: 22px; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(110, 78, 34, 0.22), rgba(110, 78, 34, 0));
}
body[data-theme="minecraft"] .doc > .sheet-wrap { padding: 14px 12px 0; }
body[data-theme="minecraft"] .sheets { padding: 0 12px; }
body[data-theme="minecraft"] .book-no {
  display: block; position: absolute; top: 18px; right: 26px; z-index: 1;
  font-family: "Monocraft", monospace; font-size: 12px; color: #6b5636; text-shadow: none; pointer-events: none;
}
body[data-theme="minecraft"] .sheet.fx { margin-top: 10px; }
body[data-theme="minecraft"] .sheet.blank + .sheet-cap { display: none; }
body[data-theme="minecraft"] .sheet-cap { color: #fff; }
body[data-theme="minecraft"].drawing[data-tool="pen"] .ink { cursor: var(--mc-quill) 1 29, crosshair; }
body[data-theme="minecraft"] .doc-head .page-title { color: #fff; text-shadow: var(--mc-shadow); }
body[data-theme="minecraft"] .doc-head .page-facts { color: #e0e0e0; text-shadow: var(--mc-shadow); }
body[data-theme="minecraft"] .doc-head .page-title:empty::before { color: rgba(255, 255, 255, 0.7); opacity: 1; }
body[data-theme="minecraft"] .thumbs { background: rgba(0, 0, 0, 0.55); border-left: 3px solid #000; text-shadow: var(--mc-shadow); }
body[data-theme="minecraft"] .th-btn { border: 2px solid #000; border-radius: 0; }
body[data-theme="minecraft"] .th-n { color: #e0e0e0; }
body[data-theme="minecraft"] .sel-bar { background: rgba(16, 0, 16, 0.95); border: 2px solid #100010; border-radius: 0; box-shadow: inset 0 0 0 2px #2d0a6b; }
body[data-theme="minecraft"] .sel-bar .nb-icon.sm { color: #fff; }
body[data-theme="minecraft"] .page-title { font-size: 26px; letter-spacing: 0; }
body[data-theme="minecraft"] .blk[data-type="h1"] .blk-text { font-size: 24px; letter-spacing: 0; }
body[data-theme="minecraft"] .blk[data-type="h2"] .blk-text { font-size: 19px; }
body[data-theme="minecraft"].pixel-text .blk-text { font-size: 15px; }
body[data-theme="minecraft"] .blk-check { border-radius: 0; border-width: 2px; }
body[data-theme="minecraft"] .blk[data-type="callout"] .blk-text, body[data-theme="minecraft"] .blk[data-type="code"] .blk-text { border-radius: 0; }
body[data-theme="minecraft"] .sheet.pdf-page { border-radius: 0; box-shadow: 0 0 0 4px #5a3d1e, 0 0 0 8px #2b1a0b, 12px 14px 0 8px rgba(0, 0, 0, 0.35); }

/* hotbar */
body[data-theme="minecraft"] .tray {
  gap: 4px; padding: 4px; border-radius: 0;
  background: rgba(0, 0, 0, 0.55); border: 2px solid #000; box-shadow: inset 0 0 0 2px #555;
}
body[data-theme="minecraft"] .tray-g { gap: 0; }
body[data-theme="minecraft"] .tray-g + .tray-g { border-left: 2px solid #000; padding-left: 4px; }
body[data-theme="minecraft"] .slot {
  width: 44px; height: 44px; border-radius: 0; color: #fff;
  background: rgba(139, 139, 139, 0.55); box-shadow: inset 2px 2px 0 #373737, inset -2px -2px 0 #a8a8a8;
}
body[data-theme="minecraft"] .slot:hover { background: rgba(170, 170, 170, 0.6); color: #fff; }
body[data-theme="minecraft"] .slot[aria-pressed="true"], body[data-theme="minecraft"] .slot.sw[aria-pressed="true"] {
  position: relative; z-index: 1; color: #fff; background: rgba(139, 139, 139, 0.55);
  box-shadow: inset 2px 2px 0 #373737, inset -2px -2px 0 #a8a8a8; outline: 3px solid #fff; outline-offset: -1px;
}
body[data-theme="minecraft"] .slot.sw i, body[data-theme="minecraft"] .slot.sz i { border-radius: 0; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45); }

/* tooltip-style menus */
body[data-theme="minecraft"] .pop {
  background: rgba(16, 0, 16, 0.95); border: 2px solid #100010; border-radius: 0;
  box-shadow: inset 0 0 0 2px #2d0a6b, 0 10px 0 rgba(0, 0, 0, 0.3); text-shadow: var(--mc-shadow);
}
body[data-theme="minecraft"] .pop-i { border-radius: 0; }
body[data-theme="minecraft"] .pop-i:hover, body[data-theme="minecraft"] .pop-i.on { background: rgba(255, 255, 255, 0.14); color: #ffffa0; }
body[data-theme="minecraft"] .pop-i.danger { color: #ff5555; }
body[data-theme="minecraft"] .pop-sep { background: #2d0a6b; }

/* inventory-grey sheets */
body[data-theme="minecraft"] .overlay-card {
  --text: #3f3f3f; --muted: #555; --line: #8b8b8b; --line-2: #000; --surface: rgba(0, 0, 0, 0.07); --surface-hover: rgba(0, 0, 0, 0.12);
  --panel-2: #c6c6c6;
  border: 2px solid #000; border-radius: 0;
  box-shadow: inset 3px 3px 0 #fff, inset -3px -3px 0 #555;
}
body[data-theme="minecraft"] .overlay-card h2 { font-size: 22px; letter-spacing: 0; }
body[data-theme="minecraft"] .overlay-card .menu-field { background: #000; border: 2px solid #a0a0a0; color: #fff; padding: 8px 10px; font-size: 16px; }
body[data-theme="minecraft"] .overlay-card .menu-field:focus { border-color: #fff; }
body[data-theme="minecraft"] .overlay-card .menu-row { border-bottom: 2px solid #8b8b8b; }
body[data-theme="minecraft"] .overlay-card .menu-list { border-top: 2px solid #8b8b8b; }
body[data-theme="minecraft"] .color { border-radius: 0; box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.35), inset -2px -2px 0 rgba(0, 0, 0, 0.35); }
body[data-theme="minecraft"] .color[aria-checked="true"] { outline: 3px solid #fff; outline-offset: 0; box-shadow: 0 0 0 5px #000; }

/* toasts */
body[data-theme="minecraft"] .toast {
  background: #212121; color: #fff; border: 2px solid #000; border-radius: 0;
  box-shadow: inset 0 0 0 2px #555; text-shadow: var(--mc-shadow); padding: 10px 16px;
}
body[data-theme="minecraft"] .toast.ach { padding-left: 52px; position: relative; min-width: 240px; }
body[data-theme="minecraft"] .toast.ach::before {
  content: ""; position: absolute; left: 12px; top: 50%; width: 28px; height: 28px; margin-top: -14px;
  background: var(--tx-planks); background-size: 28px 28px; image-rendering: pixelated; box-shadow: 0 0 0 2px #000;
}
body[data-theme="minecraft"] .toast.ach b { color: #ffff55; font-weight: 400; }

/* landscape behind everything (drawn in script.js, changes with the time of day) */
.mc-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; display: none; }
body[data-theme="minecraft"] .mc-bg { display: block; }
.mc-bg canvas { position: absolute; top: 0; left: 0; height: 100%; image-rendering: pixelated; }
#mc-scene { width: 100%; }
#mc-clouds { width: 200%; animation: mc-drift 260s linear infinite; }
@keyframes mc-drift { to { transform: translateX(-50%); } }

/* ==========================================================================
   Phones
   ========================================================================== */
@media (max-width: 600px) {
  .side {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 60;
    width: min(86vw, 320px); margin-left: 0 !important;
    transform: translateX(-102%); transition: transform 0.25s ease;
  }
  body.side-open .side { transform: none; }
  .bar, body.side-closed .bar { padding: 16px 62px 8px; gap: 8px; }
  .crumb-b, .crumb-sep { display: none; }
  .seg-b { padding: 0 11px; }
  .seg-b span { display: none; }
  .zoom-v { display: none; }
  .stage { padding: 2px 8px 160px; }
  .sheet.note { padding: 28px 18px 60px; }
  .page-title { font-size: 28px; }
  .overview { margin-top: 20px; }
  .ov-title { font-size: 34px; }
  .slot { width: 44px; height: 44px; }
  .tray { bottom: calc(12px + env(safe-area-inset-bottom)); }
  .book-btn { padding: 11px 8px; }
  .page-row { padding: 10px 8px; }
  .nb-icon.sm { width: 40px; height: 40px; }
  .toasts { max-width: calc(100vw - 32px); top: 62px; }
  .bar-insert span { display: none; }
  .bar-insert { padding: 0 10px; }
  .thumbs { top: 0; width: min(70vw, 240px); z-index: 70; box-shadow: -10px 0 30px rgba(0, 0, 0, 0.4); }
  body.thumbs-open .stage { margin-right: 0; }
  .sel-h { width: 28px; height: 28px; right: -14px; bottom: -14px; }
}

/* ==========================================================================
   2026-10-08: sync, upcoming, find, viewer, fixed layout, text layer,
   favourite pens, math, due dates, stickers
   ========================================================================== */
.stage { touch-action: pan-x pan-y; }

/* sync status (sidebar foot) */
.sync {
  display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: 10px; padding: 6px 2px;
  background: none; border: 0; color: var(--muted); font: inherit; font-size: 12px; text-align: left; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sync:hover { color: var(--text); }
.sync-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--line-3); }
.sync[data-state="ok"] .sync-dot { background: #3fb46a; }
.sync[data-state="busy"] .sync-dot { background: #e0a530; animation: nb-pulse 1s ease-in-out infinite alternate; }
.sync[data-state="err"] .sync-dot { background: #e0745a; }
.sync[data-state="offline"] .sync-dot { background: var(--muted); }
@keyframes nb-pulse { to { opacity: 0.35; } }

/* upcoming entry + due badges */
.side-up {
  display: flex; align-items: center; gap: 10px; margin: 0 8px 4px; padding: 8px;
  background: none; border: 0; border-radius: var(--radius-sm); color: var(--text-soft); font: inherit; font-size: 14px; cursor: pointer; text-align: left;
}
.side-up .icon { width: 16px; height: 16px; color: var(--muted); }
.side-up span:nth-child(2) { flex: 1; }
.side-up:hover, .side-up.on { background: var(--surface-hover); color: var(--text); }
.due-b { font-size: 11px; padding: 1px 6px; border-radius: var(--radius-pill); border: 1px solid var(--line-3); color: var(--muted); font-variant-numeric: tabular-nums; }
.due-b.hot { border-color: #e0745a; color: #e0745a; }

/* find bar */
.find {
  position: absolute; top: 64px; right: 66px; z-index: 30; display: flex; align-items: center; gap: 4px;
  padding: 4px 4px 4px 10px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-md);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
.find input { width: 200px; background: none; border: 0; outline: none; color: var(--text); font: inherit; font-size: 14px; }
.find input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.find-n { min-width: 56px; font-size: 12px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }

/* read-only viewer (share link) */
.viewer-bar { flex: none; padding: 0 66px 8px; font-size: 13px; color: var(--muted); }
body.viewer .side, body.viewer .scrim, body.viewer #btn-side, body.viewer #btn-insert, body.viewer #mode-seg, body.viewer #btn-paper,
body.viewer #btn-page-menu, body.viewer #btn-settings, body.viewer .tray, body.viewer .add-row, body.viewer .th-more, body.viewer [data-act="add-sheet"] { display: none !important; }
body.viewer .bar { padding-left: 62px; }
body.viewer .fimg, body.viewer .tbox { pointer-events: none; }

/* same layout on every device: sheet laid out at 860px and scaled */
.sheet-wrap.fixed { box-sizing: content-box; margin: 0 auto; }
.sheet-wrap.fixed > .sheet.note { max-width: none; margin: 0; transform-origin: 0 0; }

/* PDF text layer (pdf.js), selectable in Read mode */
.textLayer {
  position: absolute; inset: 0; z-index: 1; overflow: hidden; line-height: 1; opacity: 1;
  text-align: initial; -webkit-text-size-adjust: none; text-size-adjust: none; forced-color-adjust: none; transform-origin: 0 0;
}
.textLayer :is(span, br) { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; }
.textLayer span.markedContent { top: 0; height: 0; }
.textLayer ::selection { background: rgba(0, 90, 255, 0.28); }
.textLayer br::selection { background: transparent; }
.textLayer .endOfContent { display: block; position: absolute; inset: 100% 0 0; z-index: 0; cursor: default; user-select: none; }
.textLayer .hit { background: rgba(255, 200, 0, 0.38); border-radius: 2px; }
.textLayer .hit.cur { background: rgba(255, 120, 0, 0.55); box-shadow: 0 0 0 2px rgba(255, 120, 0, 0.55); }
body.drawing .textLayer { pointer-events: none; }

/* favourite pens */
.slot.fav { position: relative; }
.slot.fav .icon { width: 16px; height: 16px; position: absolute; left: 7px; top: 7px; }
.slot.fav i { position: absolute; right: 7px; bottom: 7px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3); }
.slot.fav[aria-pressed="true"] { background: var(--surface-hover); box-shadow: inset 0 0 0 1px var(--text); color: var(--text); }
.slot.fav-add .icon { width: 18px; height: 18px; }

/* pixel stickers + menus with pictures */
.fimg.px img { image-rendering: pixelated; border-radius: 0; }
.pop-img { width: 24px; height: 24px; image-rendering: pixelated; flex: none; }

/* math */
.blk-text .m { display: inline-block; padding: 0 2px; border-radius: 3px; cursor: pointer; line-height: 1; }
.blk-text .m:hover { background: var(--nb-code); }
.blk-text .m .katex { font-size: 1.08em; }
.blk[data-type="math"] .blk-text { font-family: var(--font-mono); font-size: 14px; background: var(--nb-code); padding: 6px 12px; border-radius: var(--radius-sm); display: none; }
.blk[data-type="math"]:focus-within .blk-text, .blk[data-type="math"] .blk-text:empty { display: block; }
.math-out { text-align: center; padding: 14px 0; cursor: pointer; overflow-x: auto; overflow-y: hidden; min-height: 28px; }
.math-out .katex-display { margin: 0; }
.math-out:empty { display: none; }

/* due dates */
.due { margin: 0 0 30px; }
.due-t { font-family: var(--nb-font-title); font-weight: 400; font-size: 22px; margin: 6px 0 10px; }
.due-list { border-top: 1px solid var(--line); }
.due-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line); font-size: 15px;
}
.due-check { flex: none; width: 22px; height: 22px; display: grid; place-items: center; padding: 0; border: 1.5px solid var(--muted); border-radius: 5px; background: none; color: var(--bg); cursor: pointer; }
.due-check .icon { width: 14px; height: 14px; stroke-width: 3; opacity: 0; }
.due-row.done .due-check { background: var(--text); border-color: var(--text); }
.due-row.done .due-check .icon { opacity: 1; }
.due-kind { flex: none; font-size: 11px; padding: 2px 7px; border-radius: var(--radius-pill); border: 1px solid var(--line-3); color: var(--muted); }
.due-kind.exam { border-color: #e0745a; color: #e0745a; }
.due-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.due-name em { font-style: normal; font-size: 12px; color: var(--muted); margin-left: 10px; }
.due-name em i { display: inline-block; width: 7px; height: 7px; border-radius: 2px; background: var(--c); margin-right: 5px; }
.due-when { flex: none; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.due-row.soon .due-when { color: #e0a530; }
.due-row.late .due-when, .due-row.late .due-name { color: #e0745a; }
.due-row.done .due-name, .due-row.done .due-when { color: var(--muted); text-decoration: line-through; }
.due-add { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.due-add input { width: auto; flex: 1 1 180px; font-size: 15px; padding: 8px 0; }
.due-add input[type="date"] { flex: 0 1 150px; color-scheme: inherit; }
.due-add .menu-seg { flex: none; }
.due-add .menu-seg-btn { padding: 8px 12px; font-size: 13px; }
.exam-cards { display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0 8px; }
.exam-card { min-width: 130px; padding: 14px 16px; border: 1px solid var(--line-2); border-left: 3px solid var(--c); border-radius: var(--radius-sm); display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: baseline; }
.exam-card b { font-family: var(--nb-font-title); font-weight: 400; font-size: 36px; line-height: 1; }
.exam-card span { font-size: 13px; color: var(--muted); }
.exam-card em { grid-column: 1 / -1; font-style: normal; font-size: 13px; margin-top: 6px; }

/* Minecraft touches for the new parts */
body[data-theme="minecraft"] .find, body[data-theme="minecraft"] .sel-bar { border-radius: 0; }
body[data-theme="minecraft"] .find { background: rgba(16, 0, 16, 0.95); border: 2px solid #100010; box-shadow: inset 0 0 0 2px #2d0a6b; }
body[data-theme="minecraft"] .find input { color: #fff; }
body[data-theme="minecraft"] .due-row { border-bottom: 2px solid #000; background: rgba(0, 0, 0, 0.3); padding-left: 8px; padding-right: 8px; }
body[data-theme="minecraft"] .due-list { border-top: 2px solid #000; }
body[data-theme="minecraft"] .due-check, body[data-theme="minecraft"] .due-kind, body[data-theme="minecraft"] .due-b { border-radius: 0; }
body[data-theme="minecraft"] .exam-card { border: 2px solid #000; border-left: 6px solid var(--c); border-radius: 0; background: rgba(0, 0, 0, 0.35); }
body[data-theme="minecraft"] .due-row.done .due-check { background: #80ff20; border-color: #000; }
body[data-theme="minecraft"] .sync, body[data-theme="minecraft"] .side-up { color: #e0e0e0; }
body[data-theme="minecraft"] .viewer-bar { color: #fff; text-shadow: var(--mc-shadow); }
#mc-weather { width: 100%; }

@media (max-width: 600px) {
  .find { top: 62px; right: 8px; left: 8px; }
  .find input { width: auto; flex: 1; }
  .due-row { flex-wrap: wrap; row-gap: 4px; }
  .due-when { order: 5; width: 100%; padding-left: 34px; }
  .viewer-bar { padding: 0 16px 8px; }
}

/* the account button (account.js) joins settings in the top-right cluster:
   keep the bar clear of both */
.bar { padding-right: 118px; }
.find { right: 118px; }
@media (max-width: 600px) {
  .bar, body.side-closed .bar { flex-wrap: wrap; row-gap: 8px; padding: 16px 12px 8px; }
  #btn-side { margin-left: 50px; }
  .crumb { flex: 1 1 0; margin-right: 96px; min-height: 38px; }
  .bar-end { flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .bar-end::-webkit-scrollbar { display: none; }
  #zoom { display: none !important; }
  .find { top: 112px; right: 8px; }
  body.viewer .bar { padding-left: 12px; }
}

/* ==========================================================================
   2026-10-08 (2): editable shapes, formula editor, selection bubble
   ========================================================================== */
.shp-hs { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.shp-h {
  position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; pointer-events: auto; touch-action: none; cursor: move;
  border-radius: 50%; background: #fff; border: 2px solid #3e7bfa; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.shp-h.corner { width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 3px; }
@media (pointer: coarse) { .shp-h { width: 26px; height: 26px; margin: -13px 0 0 -13px; } .shp-h.corner { width: 20px; height: 20px; margin: -10px 0 0 -10px; } }

.bar-math { min-height: 38px; padding: 0 12px; }
.math-ed { width: 400px; padding: 12px; display: flex; flex-direction: column; gap: 10px; max-height: none; overflow: visible; z-index: 210; }
.math-ed .menu-seg-btn { padding: 8px; font-size: 13px; }
.math-prev {
  min-height: 64px; display: grid; place-items: center; padding: 10px; overflow-x: auto;
  background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--radius-sm); color: var(--text); font-size: 18px;
}
.math-prev .katex-display { margin: 0; }
.math-ph { font-size: 13px; color: var(--muted); }
#math-src {
  width: 100%; resize: vertical; min-height: 44px; padding: 8px 10px;
  background: var(--bg); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 14px; line-height: 1.5; outline: none;
}
#math-src:focus { border-color: var(--line-3); }
.math-keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; max-height: 168px; overflow-y: auto; }
.mk {
  min-height: 34px; padding: 0 4px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: none;
  color: var(--text); font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap;
}
.mk:hover { background: var(--surface-hover); }
.math-act { display: flex; align-items: center; gap: 8px; }
.math-hint { flex: 1; font-size: 11px; color: var(--muted); }
.math-ed.sheet-mode { position: fixed; left: 8px !important; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); top: auto !important; width: auto; }

.fmt {
  position: fixed; z-index: 205; display: flex; gap: 2px; padding: 4px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-md); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
}
.fmt button {
  min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 8px;
  border: 0; border-radius: var(--radius-sm); background: none; color: var(--text); font: inherit; font-size: 14px; cursor: pointer;
}
.fmt button:hover { background: var(--surface-hover); }
.fmt .icon { width: 16px; height: 16px; }
.fmt-mark { background: rgba(255, 212, 59, 0.5); padding: 0 4px; border-radius: 2px; }
.fmt-code { font-family: var(--font-mono); font-size: 12px; }
.fmt .fmt-math { border-left: 1px solid var(--line-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

body[data-theme="minecraft"] .fmt, body[data-theme="minecraft"] .math-ed { border-radius: 0; background: rgba(16, 0, 16, 0.95); border: 2px solid #100010; box-shadow: inset 0 0 0 2px #2d0a6b; }
body[data-theme="minecraft"] .fmt button, body[data-theme="minecraft"] .mk { color: #fff; border-radius: 0; }
body[data-theme="minecraft"] .math-prev { background: #efe3c6; color: #2b1d10; border: 2px solid #3b2a17; border-radius: 0; }
body[data-theme="minecraft"] #math-src { background: #000; color: #fff; border: 2px solid #a0a0a0; border-radius: 0; }
body[data-theme="minecraft"] .shp-h { border-radius: 0; border-color: #fff; background: #3e7bfa; }
@media (max-width: 600px) { .bar-math span { display: none; } .bar-math { padding: 0 10px; } }
.sel.shape .sel-h { display: none; }

/* ==========================================================================
   Function plots, code colours, links + tags, graph, study timer,
   ruler + protractor, presentation + laser
   ========================================================================== */
/* function plot block */
.blk[data-type="plot"] .blk-text { font-family: var(--font-mono); font-size: 14px; background: var(--nb-code); padding: 8px 14px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; tab-size: 2; }
.plot-out { border: 1px solid var(--nb-code); border-top: 0; border-radius: 0 0 var(--radius-sm) var(--radius-sm); margin-bottom: 14px; user-select: none; -webkit-user-select: none; }
.plot-cv { position: relative; height: 320px; overflow: hidden; }
.plot-cv canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.plot-cv canvas:active { cursor: grabbing; }
.plot-tools { position: absolute; top: 8px; right: 8px; display: flex; gap: 2px; padding: 2px; background: var(--nb-sheet); border: 1px solid var(--nb-code); border-radius: var(--radius-sm); opacity: 0.6; transition: opacity 0.15s ease; }
.plot-cv:hover .plot-tools, .plot-tools:focus-within { opacity: 1; }
@media (hover: none) { .plot-tools { opacity: 1; } }
.plot-tools button { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--nb-text); cursor: pointer; }
.plot-tools button:hover { background: var(--nb-code); }
.plot-tools .icon { width: 16px; height: 16px; }
.plot-tip { position: absolute; z-index: 2; pointer-events: none; display: flex; flex-direction: column; gap: 1px; padding: 5px 8px; font-size: 12px; line-height: 1.35; font-variant-numeric: tabular-nums; background: var(--nb-sheet); color: var(--nb-text); border: 1px solid var(--line-2); border-radius: var(--radius-sm); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); white-space: nowrap; }
.plot-tip b { font-weight: 600; }
.plot-legend { padding: 6px 12px 8px; font-size: 13px; line-height: 1.5; }
.pl-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding: 3px 0; }
.pl-row i { flex: none; width: 14px; height: 3px; border-radius: 2px; transform: translateY(-3px); }
.pl-row i.pl-cut { height: 8px; width: 8px; border-radius: 50%; background: var(--nb-text); transform: none; }
.pl-f { font-family: var(--font-mono); font-size: 13px; color: var(--nb-text); }
.pl-x { color: var(--nb-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.pl-err { color: #e0745a; font-size: 12px; }
.pl-par { align-items: center; cursor: pointer; }
.pl-par b { font-family: var(--font-mono); font-weight: 500; min-width: 80px; }
.pl-par input { flex: 1; min-width: 140px; accent-color: var(--nb-text); }

/* code: coloured copy under transparent editable text */
.blk[data-type="code"] { background: var(--nb-code); border-radius: var(--radius-sm); margin: 4px 0; }
.blk[data-type="code"] .blk-text { position: relative; z-index: 1; background: none; color: transparent; caret-color: var(--nb-text); line-height: 22px; }
.blk[data-type="code"] .blk-text::selection { color: transparent; background: rgba(62, 123, 250, 0.32); }
.code-hl {
  position: absolute; top: 0; left: 0; right: 0; margin: 0; pointer-events: none;
  font-family: var(--font-mono); font-size: 14px; line-height: 22px; padding: 14px 16px; tab-size: 2;
  white-space: pre-wrap; overflow-wrap: anywhere; color: var(--nb-text);
}
.blk[data-type="code"] .blk-text:empty::before { color: var(--nb-muted); }
.code-lang {
  position: absolute; top: 6px; right: 8px; z-index: 2; padding: 2px 8px; font: 500 11px var(--font-sans); letter-spacing: 0.02em;
  color: var(--nb-muted); background: var(--nb-sheet); border: 1px solid var(--nb-code); border-radius: var(--radius-pill); cursor: pointer; opacity: 0.75;
}
.code-lang:hover { opacity: 1; color: var(--nb-text); }
.c-com { color: #8b9a87; font-style: italic; }
.c-str { color: #d6a35c; }
.c-num { color: #c98bd9; }
.c-kw { color: #6fa8ff; font-weight: 600; }
.c-con { color: #e06c75; font-weight: 600; }
.c-fn { color: #5fc2b3; }
.c-op { color: #e5c07b; }
body[data-theme="paper"] .c-com { color: #7a8a76; }
body[data-theme="paper"] .c-str { color: #a3620a; }
body[data-theme="paper"] .c-num { color: #8e3fa8; }
body[data-theme="paper"] .c-kw { color: #1f5fd1; }
body[data-theme="paper"] .c-con { color: #c2303d; }
body[data-theme="paper"] .c-fn { color: #0f7d6e; }
body[data-theme="paper"] .c-op { color: #9c6a00; }
body[data-theme="minecraft"] .c-com { color: #5a6b4a; }
body[data-theme="minecraft"] .c-str { color: #8a4f00; }
body[data-theme="minecraft"] .c-num { color: #7a2f8f; }
body[data-theme="minecraft"] .c-kw { color: #1d4fb0; }
body[data-theme="minecraft"] .c-con { color: #a51e2a; }
body[data-theme="minecraft"] .c-fn { color: #0b6b5d; }
body[data-theme="minecraft"] .c-op { color: #7a5300; }
body[data-theme="minecraft"] .blk[data-type="code"], body[data-theme="minecraft"] .code-lang { border-radius: 0; }

/* page links + tags */
.wl {
  display: inline; padding: 0 3px; margin: 0 1px; border-radius: 4px; cursor: pointer;
  color: var(--nb-text); background: rgba(62, 123, 250, 0.12); box-shadow: inset 0 -1.5px 0 rgba(62, 123, 250, 0.55);
  -webkit-user-modify: read-only;
}
.wl::before { content: ""; display: inline-block; width: 0.62em; height: 0.62em; margin-right: 4px; vertical-align: 0.02em; border: 1.6px solid currentColor; border-radius: 2px; opacity: 0.55; }
.wl:hover { background: rgba(62, 123, 250, 0.22); }
.wl.new { background: none; box-shadow: inset 0 -1.5px 0 var(--nb-muted); color: var(--nb-muted); }
.wl.new::before { border-style: dashed; }
.wl.broken { text-decoration: line-through; opacity: 0.6; box-shadow: none; }
.tg { display: inline; padding: 0 5px; border-radius: var(--radius-pill); cursor: pointer; font-size: 0.9em; color: var(--nb-text); background: var(--nb-code); box-shadow: inset 0 0 0 1px var(--line-2); white-space: nowrap; }
.tg:hover { box-shadow: inset 0 0 0 1px var(--nb-text); }
.pop.linkac { width: 320px; }
.pop.linkac .pop-head { display: flex; justify-content: space-between; gap: 8px; }
.pop.linkac .pop-head span { opacity: 0.7; }
.pop.linkac .pop-h { font-family: var(--font-sans); font-size: 11px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop.linkac .pop-h i { display: inline-block; width: 6px; height: 6px; border-radius: 2px; background: var(--c); margin-right: 5px; }
.pop.peek { width: 320px; padding: 14px 16px; cursor: pointer; z-index: 220; }
.pk-t { display: block; font-family: var(--nb-font-title); font-weight: 400; font-size: 19px; line-height: 1.25; }
.pk-m { font-size: 12px; color: var(--muted); margin: 4px 0 8px; }
.pk-b i { display: inline-block; width: 7px; height: 7px; border-radius: 2px; background: var(--c); margin-right: 5px; }
.pk-x { font-size: 13px; line-height: 1.5; color: var(--text-soft); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.pk-e { color: var(--muted); font-style: italic; }
.pk-tags { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px; font-size: 13px; }
.crumb-back { flex: none; margin-right: 2px; }
.flash { animation: nb-flash 1.6s ease; }
@keyframes nb-flash { 0%, 30% { box-shadow: 0 0 0 3px rgba(62, 123, 250, 0.55); background-color: rgba(62, 123, 250, 0.08); } 100% { box-shadow: 0 0 0 3px transparent; } }

/* backlinks panel under the page */
.links-panel { max-width: 860px; margin: 26px auto 0; padding: 18px 4px 0; border-top: 1px solid var(--line); }
.lp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.lp-head h3 { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; margin: 0; }
.lp-head h3 .icon { width: 16px; height: 16px; color: var(--muted); }
.nb-btn.sm { padding: 5px 10px; font-size: 12px; }
.nb-btn.sm .icon { width: 14px; height: 14px; }
.lp-sec { margin: 10px 0 16px; }
.lp-l { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.lp-l b { font-weight: 600; color: var(--text-soft); margin-left: 4px; }
.lp-e { font-size: 13px; color: var(--muted); }
.lp-e kbd { font-family: var(--font-mono); font-size: 12px; padding: 1px 5px; border: 1px solid var(--line-2); border-radius: 4px; }
.lp-row { display: flex; align-items: center; gap: 8px; }
.lp-open { flex: 1; min-width: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; text-align: left; padding: 8px; background: none; border: 0; border-radius: var(--radius-sm); color: var(--text); font: inherit; cursor: pointer; }
.lp-open:hover { background: var(--surface-hover); }
.lp-open .icon { width: 16px; height: 16px; color: var(--muted); }
.lp-t { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-t em { font-style: normal; font-size: 12px; color: var(--muted); margin-left: 10px; }
.lp-t em i { display: inline-block; width: 7px; height: 7px; border-radius: 2px; background: var(--c); margin-right: 5px; }
.lp-c { grid-column: 2; font-size: 12.5px; line-height: 1.45; color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-chip { padding: 4px 10px; font: inherit; font-size: 13px; background: none; color: var(--text-soft); border: 1px solid var(--line-2); border-radius: var(--radius-pill); cursor: pointer; }
.lp-chip:hover { border-color: var(--text); color: var(--text); }

/* tag view + sidebar */
.side-row2 { display: flex; gap: 2px; margin: 0 8px 4px; }
.side-row2 .side-up { flex: 1; margin: 0; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tag-c { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; font: inherit; font-size: 14px; background: none; color: var(--text-soft); border: 1px solid var(--line-2); border-radius: var(--radius-pill); cursor: pointer; }
.tag-c b { font-weight: 500; font-size: 11px; color: var(--muted); }
.tag-c:hover, .tag-c.on { border-color: var(--text); color: var(--text); }

/* graph */
.graph-wrap { position: relative; height: calc(100dvh - 110px); min-height: 380px; margin: 0 -24px; }
.graph-bar { position: absolute; top: 8px; left: 16px; right: 16px; z-index: 2; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; pointer-events: none; }
.graph-bar > * { pointer-events: auto; }
.graph-bar .eyebrow { display: inline-flex; gap: 8px; }
.graph-bar .eyebrow > * { align-self: center; }
.graph-n { font-size: 12px; color: var(--muted); flex: 1; }
.graph-bar .menu-seg-btn { padding: 6px 12px; font-size: 13px; }
.graph-cv { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.graph-tip { position: absolute; z-index: 3; pointer-events: none; padding: 6px 10px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-sm); font-size: 13px; display: flex; flex-direction: column; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); }
.graph-tip span { font-size: 11px; color: var(--muted); }
.graph-hint { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font-size: 12px; color: var(--muted); pointer-events: none; }

/* study timer */
.bar-timer { padding: 6px 10px; gap: 6px; font-variant-numeric: tabular-nums; }
.bar-timer #timer-t { font-size: 13px; min-width: 38px; text-align: left; }
.bar-timer.run { border-color: #2fa66a; color: var(--text); }
.bar-timer.run .icon { color: #2fa66a; }
.bar-timer.brk { border-color: #3e7bfa; }
.bar-timer.brk .icon { color: #3e7bfa; }
.pop.timer { width: 320px; max-height: none; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.tm-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tm-sel { width: auto; max-width: 170px; padding: 4px 0; font-size: 13px; }
#tm-mode .menu-seg-btn { padding: 7px 8px; font-size: 13px; flex: 1; }
#tm-mode .menu-seg-btn:disabled { opacity: 0.45; cursor: default; }
.tm-clock { position: relative; width: 168px; height: 168px; margin: 2px auto 0; }
.tm-clock svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tm-ring-bg { fill: none; stroke: var(--line-2); stroke-width: 6; }
.tm-ring { fill: none; stroke: #2fa66a; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 0.9s linear; }
.timer.brk .tm-ring { stroke: #3e7bfa; }
.tm-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tm-in b { font-family: var(--nb-font-title); font-weight: 400; font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; }
.tm-in span { font-size: 12px; color: var(--muted); margin-top: 6px; letter-spacing: 0.06em; text-transform: uppercase; }
.tm-act { display: flex; gap: 8px; justify-content: center; }
.tm-act .nb-btn { min-width: 110px; justify-content: center; }
.tm-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; padding-top: 10px; border-top: 1px solid var(--line); }
.tm-sum b { display: block; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tm-sum span { font-size: 11px; color: var(--muted); }
.tm-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; height: 64px; margin-top: 10px; }
.tm-d { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; height: 100%; }
.tm-d i { display: block; width: 100%; min-height: 2px; background: var(--line-3); border-radius: 3px 3px 1px 1px; }
.tm-d.on i { background: #2fa66a; }
.tm-d span { font-size: 10px; color: var(--muted); }
.tm-books { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.tm-b { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; font-size: 13px; align-items: center; }
.tm-b i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.tm-b em { grid-column: 2; font-style: normal; font-size: 11.5px; color: var(--muted); }
.tm-e { font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 8px; }
body.viewer #btn-timer { display: none; }
body[data-theme="minecraft"] .tm-ring { stroke: #7fcc19; stroke-linecap: butt; }
body[data-theme="minecraft"] .tm-d.on i { background: #7fcc19; border-radius: 0; }

/* ruler + protractor */
.geo { position: fixed; z-index: 19; touch-action: none; user-select: none; -webkit-user-select: none; }
.geo-ruler {
  background: rgba(240, 236, 220, 0.16); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 6px; transform-origin: 50% 50%;
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); cursor: move;
}
.geo-ruler canvas { position: absolute; inset: 0; pointer-events: none; }
body[data-theme="paper"] .geo-ruler, body[data-theme="minecraft"] .geo-ruler { background: rgba(255, 255, 255, 0.55); border-color: rgba(0, 0, 0, 0.3); }
.geo-ang { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -18%); font: 600 12px var(--font-sans); color: var(--nb-text); font-variant-numeric: tabular-nums; pointer-events: none; }
.geo-rot, .geo-x { position: absolute; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid var(--line-3); background: var(--panel); color: var(--text); cursor: pointer; }
.geo-rot .icon, .geo-x .icon { width: 15px; height: 15px; }
.geo-ruler .geo-rot { right: -38px; top: 50%; margin-top: -15px; cursor: grab; }
.geo-ruler .geo-x { left: -38px; top: 50%; margin-top: -15px; }
.geo-prot { cursor: move; }
.geo-svg { display: block; overflow: visible; }
.geo-svg line { stroke: var(--nb-text); stroke-width: 1; }
.geo-svg text { fill: var(--nb-text); font: 9px var(--font-sans); text-anchor: middle; }
.geo-svg text.in { fill: var(--nb-muted); font-size: 8px; }
.geo-body { fill: rgba(240, 236, 220, 0.16); stroke: rgba(255, 255, 255, 0.4); stroke-width: 1; }
body[data-theme="paper"] .geo-body, body[data-theme="minecraft"] .geo-body { fill: rgba(255, 255, 255, 0.55); stroke: rgba(0, 0, 0, 0.3); }
.geo-svg .geo-base { stroke-width: 1.2; }
.geo-c { fill: none; stroke: var(--nb-text); stroke-width: 1.2; }
.geo-svg .geo-armline { stroke: #e5484d; stroke-width: 2; }
.geo-prot .geo-ang { top: auto; bottom: 34px; transform: translateX(-50%); font-size: 14px; color: #e5484d; }
.geo-arm { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; padding: 0; border-radius: 50%; border: 2px solid #fff; background: #e5484d; cursor: grab; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); }
.geo-prot .geo-rot { right: -6px; bottom: -8px; cursor: grab; }
.geo-prot .geo-x { left: -6px; bottom: -8px; }
.geo-meas { position: fixed; z-index: 250; pointer-events: none; padding: 3px 8px; border-radius: var(--radius-pill); background: var(--text); color: var(--bg); font: 600 12px var(--font-sans); font-variant-numeric: tabular-nums; }

/* presentation + laser */
.laser { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 290; pointer-events: none; }
.laser-cap { position: fixed; z-index: 18; cursor: none; touch-action: none; }
body.lasering .laser-cap { cursor: none; }
.pres-bar {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 240;
  display: flex; align-items: center; gap: 2px; padding: 5px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius-md);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4); opacity: 0.35; transition: opacity 0.2s ease;
}
.pres-bar:hover, .pres-bar:focus-within { opacity: 1; }
@media (hover: none) { .pres-bar { opacity: 0.9; } }
.pres-n { min-width: 64px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text-soft); }
.pres-sep { width: 1px; height: 22px; background: var(--line-2); margin: 0 4px; }
body.presenting .side, body.presenting .bar, body.presenting .home-btn, body.presenting .util-btns, body.presenting .thumbs,
body.presenting .links-panel, body.presenting .add-row, body.presenting .sheet-cap, body.presenting .doc-head, body.presenting .tbox-grip,
body.presenting .scrim, body.presenting .find, body.presenting #account-btn, body.presenting .account-btn { display: none !important; }
body.presenting .stage { padding: 12px 12px 80px; }
body.presenting .tray { bottom: calc(76px + env(safe-area-inset-bottom)); }
body.presenting .sheet.fx { margin-left: auto; margin-right: auto; }
body.presenting { background: #000; }
body.presenting .app { background: none; }
body.presenting .stage { scrollbar-width: none; }
body.presenting .stage::-webkit-scrollbar { display: none; }
body .blk[data-type="code"] .blk-text, body .code-hl { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0; }
/* the protractor body lets the pen through (centre = rays, arc = curves); move it by the bottom strip */
.geo-prot { pointer-events: none; cursor: default; }
.geo-prot .geo-grip, .geo-prot .geo-rot, .geo-prot .geo-x, .geo-prot .geo-arm { pointer-events: auto; }
.geo-grip { position: absolute; left: 0; right: 0; bottom: 0; cursor: move; touch-action: none; }
.graph-bar .menu-seg-btn { white-space: nowrap; }
@media (max-width: 600px) {
  .graph-wrap { margin: 0 -8px; height: calc(100dvh - 130px); }
  .pop.timer { width: auto; }
  .bar-timer { padding: 6px 8px; }
  .geo-ruler .geo-x { left: 4px; top: -36px; margin: 0; }
  .geo-ruler .geo-rot { right: 4px; top: -36px; margin: 0; }
}
.links-panel { width: 100%; contain: inline-size; box-sizing: border-box; }
/* crowded top bar: icons only on medium widths */
@media (max-width: 1320px) and (min-width: 601px) {
  .bar-insert span, .bar-math span, #mode-seg .seg-b span { display: none; }
  .bar-insert, .bar-math { padding-left: 10px; padding-right: 10px; }
  #mode-seg .seg-b { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 1000px) and (min-width: 601px) { .zoom-v { display: none; } }
.wl::before {
  border: 0; border-radius: 0; width: 0.8em; height: 0.8em; vertical-align: -0.08em; background: currentColor; opacity: 0.6;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 3H7a2 2 0 00-2 2v14a2 2 0 002 2h10a2 2 0 002-2V8.5z'/%3E%3Cpath d='M13.5 3v5.5H19'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 3H7a2 2 0 00-2 2v14a2 2 0 002 2h10a2 2 0 002-2V8.5z'/%3E%3Cpath d='M13.5 3v5.5H19'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wl.new::before { opacity: 0.4; }
/* pdf.js appends a measuring canvas to <body> (opaque, so it shows as a black box in Safari) */
.hiddenCanvasElement { position: absolute; top: 0; left: 0; width: 0 !important; height: 0 !important; display: none !important; }

/* ---------- calmer UI (2026-10-08): fewer things on screen, same features ---------- */
/* sidebar: Due / Tags / Graph as one quiet row */
.side-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 0 8px 10px; }
.side-nav .side-up { margin: 0; flex-direction: column; gap: 4px; padding: 8px 4px 7px; font-size: 12px; text-align: center; position: relative; }
.side-nav .side-up span:nth-child(2) { flex: none; }
.side-nav .side-up .icon { width: 17px; height: 17px; }
.side-nav .book-n { position: absolute; top: 4px; right: 10px; font-size: 10px; min-width: 16px; padding: 0 4px; border-radius: 8px; background: var(--text); color: var(--bg); line-height: 16px; }
.side-nav .book-n:empty { display: none; }
body[data-theme="minecraft"] .side-nav .book-n { border-radius: 0; }
/* zoom: one button with the value */
.zoom-b { padding: 6px 10px; font-variant-numeric: tabular-nums; min-width: 62px; justify-content: center; }
.zoom-b .zoom-v { display: inline !important; font-size: 13px; }
/* tray: single size button + "more" menu */
.slot.sz.cyc { position: relative; flex-direction: column; gap: 4px; }
.slot.sz.cyc > i { display: block; border-radius: 50%; background: currentColor; }
.slot.sz.cyc b { display: flex; gap: 3px; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); }
.slot.sz.cyc u { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.25; text-decoration: none; }
.slot.sz.cyc u.on { opacity: 0.9; }
#btn-tmore { position: relative; }
#btn-tmore.dot::after { content: ""; position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: #3e7bfa; }
#btn-tmore[aria-expanded="true"] { background: var(--surface-hover); }
.pop.tools-pop { width: 260px; max-height: none; z-index: 210; }
.tp { position: relative; }
.tp .pop-l { display: flex; flex-direction: column; flex: 1; }
.tp .pop-l small { font-size: 11px; color: var(--muted); margin-top: 1px; }
.tp kbd { font: 11px var(--font-mono); color: var(--muted); border: 1px solid var(--line-2); border-radius: 4px; padding: 0 5px; }
.tp[aria-pressed="true"] { background: var(--surface-hover); color: var(--text); }
.tp[aria-pressed="true"] > .icon { color: #3e7bfa; }
.tp-sw { flex: none; width: 30px; height: 18px; border-radius: 9px; background: var(--line-3); position: relative; transition: background 0.15s ease; }
.tp-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); transition: transform 0.15s ease; }
.tp[aria-pressed="true"] .tp-sw { background: #3e7bfa; }
.tp[aria-pressed="true"] .tp-sw::after { transform: translateX(12px); background: #fff; }
body[data-theme="minecraft"] .tp-sw, body[data-theme="minecraft"] .tp-sw::after { border-radius: 0; }
body[data-theme="minecraft"] #btn-tmore.dot::after { background: #7fcc19; border-radius: 0; }
/* code language label: only when you look at the block */
.code-lang { opacity: 0; transition: opacity 0.15s ease; }
.blk[data-type="code"]:hover .code-lang, .blk[data-type="code"]:focus-within .code-lang { opacity: 0.75; }
@media (hover: none) { .blk[data-type="code"]:focus-within .code-lang { opacity: 0.75; } }

/* colour picker: 3 quick colours in the tray + full palette */
.slot.sw.pal i { position: relative; width: 22px; height: 22px; border-radius: 50%; box-shadow: none;
  background: conic-gradient(#e5484d, #f5b700, #2fa66a, #00a2c7, #3e7bfa, #b04ec6, #e5484d); }
.slot.sw.pal i::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--cur); box-shadow: 0 0 0 2px var(--panel); }
.slot.sw.pal[aria-expanded="true"] { background: var(--surface-hover); }
.pop.color-pop { width: 292px; max-height: none; padding: 8px 10px 12px; z-index: 215; }
.cp-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 2px 2px 6px; }
.cp-sw { position: relative; aspect-ratio: 1; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.cp-sw i { width: 78%; height: 78%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.4); transition: transform 0.12s ease; }
.cp-sw:hover i { transform: scale(1.08); }
.cp-sw[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--text); }
.cp-add { border: 1.5px dashed var(--line-3); color: var(--muted); width: 78%; height: 78%; justify-self: center; align-self: center; overflow: hidden; }
.cp-add:hover { color: var(--text); border-color: var(--text); }
.cp-add input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.cp-add .icon { width: 16px; height: 16px; pointer-events: none; }
.cp-row { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px; }
.cp-row .slot.sz i { display: block; border-radius: 50%; background: currentColor; }
.cp-row .slot[aria-pressed="true"] { background: var(--surface-hover); color: var(--text); }
body[data-theme="minecraft"] .cp-sw, body[data-theme="minecraft"] .cp-sw i, body[data-theme="minecraft"] .slot.sw.pal i, body[data-theme="minecraft"] .slot.sw.pal i::after { border-radius: 0; }
/* phone: tray fits without scrolling (quick colours + favourites live in the palette) */
@media (max-width: 600px) {
  .tray { gap: 2px; padding: 4px; }
  .tray .slot { width: 32px; height: 38px; }
  .tray .slot .icon { width: 19px; height: 19px; }
  .tray .slot.sw.quick, .tray #favs { display: none; }
  .tray-g { gap: 0; }
  .pop.color-pop { width: calc(100vw - 16px); max-width: 340px; }
}

/* table block */
.blk[data-type="table"] { margin: 6px 0 10px; }
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--nb-sheet); }
.tbl { border-collapse: collapse; min-width: 100%; font-size: 15px; font-variant-numeric: tabular-nums; }
.tbl th, .tbl td { border: 1px solid var(--line); padding: 0; min-width: 90px; vertical-align: top; position: relative; }
.tbl tr > *:first-child { border-left: 0; } .tbl tr > *:last-child { border-right: 0; }
.tbl thead tr > * { border-top: 0; } .tbl tbody tr:last-child > * { border-bottom: 0; }
.tbl th { background: var(--nb-code); font-weight: 600; text-align: left; }
.tc { outline: none; padding: 6px 10px; min-height: 34px; line-height: 22px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--nb-text); }
.tbl th .tc { padding-right: 30px; }
.tc:focus { box-shadow: inset 0 0 0 2px #3e7bfa; border-radius: 2px; }
.tbl-sort { position: absolute; top: 6px; right: 4px; width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--nb-muted); cursor: pointer; opacity: 0; transition: opacity 0.15s ease; }
.tbl-sort .icon { width: 14px; height: 14px; }
.tbl th:hover .tbl-sort, .tbl th.asc .tbl-sort, .tbl th.desc .tbl-sort { opacity: 1; }
.tbl th.asc .tbl-sort, .tbl th.desc .tbl-sort { color: #3e7bfa; }
.tbl th.desc .tbl-sort .icon { transform: scaleY(-1); }
@media (hover: none) { .tbl-sort { opacity: 0.6; } }
.tbl-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 4px; min-height: 30px; opacity: 0.35; transition: opacity 0.15s ease; }
.blk[data-type="table"]:hover .tbl-bar, .blk[data-type="table"]:focus-within .tbl-bar { opacity: 1; }
@media (hover: none) { .tbl-bar { opacity: 1; } }
.tbl-bar button { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; font: inherit; font-size: 12px; color: var(--nb-muted); background: none; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; }
.tbl-bar button:hover { color: var(--nb-text); border-color: var(--line-2); }
.tbl-bar .icon { width: 13px; height: 13px; }
.tbl-info { margin-left: auto; font-size: 12px; color: var(--nb-muted); font-variant-numeric: tabular-nums; }
body[data-theme="minecraft"] .tbl-wrap, body[data-theme="minecraft"] .tc:focus { border-radius: 0; }
.pl-row i.pl-ser { height: 8px; width: 8px; border-radius: 50%; transform: none; }

/* pages panel: Pages | Outline */
.th-tabs { flex: 1; margin-right: 6px; }
.th-tabs .menu-seg-btn { flex: 1; padding: 5px 8px; font-size: 12px; }
.ol-src { display: flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin: 10px 4px 4px; }
.ol-src .icon { width: 13px; height: 13px; }
.ol-i { display: flex; align-items: baseline; gap: 6px; width: 100%; padding: 6px 6px 6px calc(6px + var(--l, 0) * 12px); background: none; border: 0; border-radius: var(--radius-sm); color: var(--text-soft); font: inherit; font-size: 13px; line-height: 1.35; text-align: left; cursor: pointer; }
.ol-i span { flex: 1; min-width: 0; }
.ol-i em { font-style: normal; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ol-i:hover { background: var(--surface-hover); color: var(--text); }
.ol-i:disabled { opacity: 0.5; cursor: default; }
.ol-i[style*="--l:0"] { font-weight: 600; color: var(--text); }
.ol-wait, .ol-none { font-size: 12px; color: var(--muted); padding: 8px 6px; line-height: 1.5; }

/* calendars + timetable (Due view) */
.cal-sec { margin: 6px 0 26px; }
.cal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 10px; }
.cal-subform { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.cal-subform input { flex: 1 1 260px; width: auto; font-size: 14px; padding: 8px 0; }
.cal-subform p { flex-basis: 100%; font-size: 12px; color: var(--muted); line-height: 1.5; margin: 0; }
.cal-subs { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.cal-sub { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.cal-sub > .icon { width: 16px; height: 16px; color: var(--muted); }
.cal-sn { flex: 1; min-width: 0; font-size: 14px; display: flex; flex-direction: column; }
.cal-sn em { font-style: normal; font-size: 12px; color: var(--muted); }
.cal-sub .spin .icon { animation: nb-spin 0.9s linear infinite; }
@keyframes nb-spin { to { transform: rotate(360deg); } }
.tt-today { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: none; }
.tt-now { flex: none; display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: baseline; text-align: left; padding: 10px 12px; min-width: 150px; max-width: 240px;
  background: none; border: 1px solid var(--line-2); border-left: 3px solid var(--c); border-radius: var(--radius-sm); color: var(--text); font: inherit; cursor: pointer; position: relative; }
.tt-now b { grid-column: 1 / -1; font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.tt-now span { grid-column: 1 / -1; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-now em { grid-column: 1 / -1; font-style: normal; font-size: 12px; color: var(--muted); }
.tt-now i { position: absolute; top: 8px; right: 10px; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #2fa66a; }
.tt-now.on { border-color: #2fa66a; border-left-color: var(--c); }
.tt-now.past { opacity: 0.5; }
.tt-week { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.tt-day p { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; text-align: center; }
.tt-day.on p { color: var(--text); font-weight: 600; }
.tt-day.on { background: var(--surface); border-radius: var(--radius-sm); padding: 4px; margin: -4px; }
.tt-c { display: flex; flex-direction: column; gap: 1px; padding: 6px 7px; margin-bottom: 5px; border-radius: 4px; background: color-mix(in srgb, var(--c) 16%, transparent); border-left: 3px solid var(--c); cursor: pointer; font-size: 12px; line-height: 1.3; min-width: 0; }
.tt-c b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-soft); }
.tt-c span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.tt-c em { font-style: normal; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-c:hover { background: color-mix(in srgb, var(--c) 26%, transparent); }
.tt-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--muted); }
@media (max-width: 600px) { .tt-week { grid-template-columns: repeat(var(--n), minmax(110px, 1fr)); overflow-x: auto; } }
.due-kind.ev { border-color: var(--line-3); color: var(--muted); }
/* import sheet */
.cal-card { width: min(680px, calc(100vw - 24px)); max-height: calc(100dvh - 40px); display: flex; flex-direction: column; }
.cal-sum { font-size: 13px; color: var(--muted); margin: 4px 0 10px; }
.cal-sum b { color: var(--text); font-weight: 600; }
.cal-warn { font-size: 13px; color: #e0745a; }
.cal-opts { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; margin-bottom: 10px; font-size: 14px; }
.cal-chk { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.cal-chk input, .cal-row input { width: 16px; height: 16px; accent-color: var(--text); }
.cal-def { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.cal-def .menu-field, .cal-b { width: auto; max-width: 160px; font-size: 13px; padding: 4px 0; }
.cal-list { overflow-y: auto; min-height: 80px; max-height: 44vh; border-top: 1px solid var(--line); }
.cal-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--line); }
.cal-row.off .cal-n, .cal-row.off .due-kind { opacity: 0.45; }
.cal-row .due-kind { cursor: pointer; background: none; font: inherit; font-size: 11px; }
.cal-n { flex: 1; min-width: 0; font-size: 14px; display: flex; flex-direction: column; overflow: hidden; }
.cal-n em { font-style: normal; font-size: 12px; color: var(--muted); }
.cal-ttc { margin-top: 12px; }
.cal-tt { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--muted); margin: 6px 0 4px 24px; }

/* split view: second page on the right (or below on narrow screens) */
.split-pane { position: absolute; right: 0; bottom: 0; width: var(--split, 50%); z-index: 12; display: flex; border-left: 1px solid var(--line-2); background: var(--bg); }
.split-pane iframe { flex: 1; width: 100%; height: 100%; border: 0; background: transparent; }
.split-div { position: absolute; left: -6px; top: 0; bottom: 0; width: 11px; cursor: col-resize; z-index: 2; touch-action: none; }
.split-div::after { content: ""; position: absolute; left: 4px; top: 50%; width: 3px; height: 44px; margin-top: -22px; border-radius: 2px; background: var(--line-3); transition: background 0.15s ease; }
.split-div:hover::after, body.split-drag .split-div::after { background: var(--text); }
body.split .stage { margin-right: var(--split, 50%); }
body.split .tray { left: calc((100% - var(--split, 50%)) / 2); max-width: calc(100% - var(--split, 50%) - 24px); }
body.split .thumbs, body.split .find { right: var(--split, 50%); }
body.split-drag { cursor: col-resize; user-select: none; -webkit-user-select: none; }
body.split-v .split-pane { left: 0; width: auto; top: auto !important; height: var(--split, 50%); border-left: 0; border-top: 1px solid var(--line-2); }
body.split-v .split-div { left: 0; right: 0; top: -6px; bottom: auto; width: auto; height: 11px; cursor: row-resize; }
body.split-v .split-div::after { left: 50%; top: 4px; width: 44px; height: 3px; margin: 0 0 0 -22px; }
body.split-v .stage { margin-right: 0; margin-bottom: var(--split, 50%); }
body.split-v .tray { left: 50%; max-width: calc(100% - 24px); bottom: calc(var(--split, 50%) + 12px); }
body.presenting .split-pane { display: none; }
body.presenting.split .stage { margin: 0; }
/* inside the pane */
body.embed .side, body.embed .home-btn, body.embed .util-btns, body.embed #btn-timer, body.embed #btn-side, body.embed .mc-bg, body.embed .scrim, body.embed .site-foot { display: none !important; }
body.embed .bar { padding: 10px 12px 8px; }
body.embed .crumb-p { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 4px; }
body.embed .crumb-b { pointer-events: none; }
body.embed .stage { padding-left: 14px; padding-right: 14px; }
body[data-theme="minecraft"].embed { background: transparent; }
html:has(body.embed[data-theme="minecraft"]) { background: transparent; }

/* side video (floating 9:16) */
.vid { position: fixed; z-index: 180; width: 230px; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); border: 1px solid var(--line-2); touch-action: none; }
.vid.moving { opacity: 0.9; }
.vid-head { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; gap: 4px; padding: 6px; background: linear-gradient(rgba(0, 0, 0, 0.55), transparent); opacity: 0; transition: opacity 0.15s ease; cursor: move; }
.vid:hover .vid-head, .vid.moving .vid-head, .vid:focus-within .vid-head { opacity: 1; }
@media (hover: none) { .vid-head { opacity: 1; } }
.vid-src { display: inline-flex; align-items: center; gap: 5px; max-width: 70%; padding: 4px 8px; border: 0; border-radius: var(--radius-pill); background: rgba(0, 0, 0, 0.5); color: #fff; font: 500 12px var(--font-sans); cursor: pointer; }
.vid-src span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vid-src .icon { width: 13px; height: 13px; flex: none; }
.vid-grip { flex: 1; align-self: stretch; }
.vid-x { color: #fff; background: rgba(0, 0, 0, 0.5); border-radius: 50%; }
.vid-body { aspect-ratio: 9 / 16; background: #000; }
.vid-body canvas, .vid-body iframe, .vid-body video { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; }
.vid-add { position: absolute; left: 6px; right: 6px; bottom: 6px; z-index: 3; display: flex; gap: 4px; padding: 6px; background: var(--panel); border-radius: 10px; }
.vid-add input { flex: 1; min-width: 0; font-size: 12px; padding: 4px 0; }
.vid-rs { position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; z-index: 2; cursor: nwse-resize; background: linear-gradient(135deg, transparent 55%, rgba(255, 255, 255, 0.5) 55% 62%, transparent 62% 72%, rgba(255, 255, 255, 0.5) 72% 79%, transparent 79%); opacity: 0; }
.vid:hover .vid-rs { opacity: 1; }
#btn-vid[aria-pressed="true"] { background: var(--surface-hover); color: var(--text); }
body.embed #btn-vid, body.presenting .vid, body.viewer #btn-vid { display: none !important; }
body[data-theme="minecraft"] .vid { border-radius: 0; border: 2px solid #000; }
.vid-body { position: relative; overflow: hidden; }
.vid-body.crop iframe { position: absolute; top: 0; height: 100%; width: 316.05%; left: -108.03%; max-width: none; }
.vid-b { color: #fff; background: rgba(0, 0, 0, 0.5); border-radius: 50%; }
.vid-b .icon { width: 15px; height: 15px; }
.vid-src { max-width: 46%; }
/* side video docked as a column next to the page */
.vid.docked { position: relative; z-index: 5; flex: none; align-self: stretch; height: 100%; border-radius: 0; border: 0; border-left: 1px solid var(--line-2); box-shadow: none; display: flex; flex-direction: column; justify-content: center; }
.vid.docked .vid-rs, .vid.docked .vid-grip { display: none; }
.vid.docked .vid-head { cursor: default; }
.vid-drs { display: none; }
.vid.docked .vid-drs { display: block; position: absolute; left: -5px; top: 0; bottom: 0; width: 10px; cursor: col-resize; z-index: 3; }
.vid.docked .vid-drs::after { content: ""; position: absolute; left: 3px; top: 50%; width: 3px; height: 44px; margin-top: -22px; border-radius: 2px; background: rgba(255, 255, 255, 0.25); }
.vid.docked .vid-drs:hover::after { background: rgba(255, 255, 255, 0.7); }
body[data-theme="minecraft"] .vid.docked { border: 0; border-left: 2px solid #000; }
body.vid-docked .util-btns { right: calc(var(--vid-w, 320px) + 12px); }
body.vid-docked .bar-insert span, body.vid-docked .bar-math span, body.vid-docked #mode-seg .seg-b span { display: none; }
body.vid-docked .bar-insert, body.vid-docked .bar-math, body.vid-docked #mode-seg .seg-b { padding-left: 10px; padding-right: 10px; }

/* scrollbars: thin, quiet, follow the theme (standard props for Chrome/Firefox, webkit for Safari) */
:root { --sb-thumb: rgba(255, 255, 255, 0.16); --sb-thumb-hover: rgba(255, 255, 255, 0.32); }
body[data-theme="paper"] { --sb-thumb: rgba(0, 0, 0, 0.18); --sb-thumb-hover: rgba(0, 0, 0, 0.36); }
body[data-theme="minecraft"] { --sb-thumb: rgba(139, 139, 139, 0.85); --sb-thumb-hover: #c6c6c6; }
.stage, .books, .side, .thumbs-list, .pop, .cal-list, .tbl-wrap, .math-out, .tt-week, .overlay-card, .code-hl, .blk-text, .tm-stats, .plot-legend {
  scrollbar-width: thin; scrollbar-color: var(--sb-thumb) transparent;
}
.stage::-webkit-scrollbar, .books::-webkit-scrollbar, .side::-webkit-scrollbar, .thumbs-list::-webkit-scrollbar, .pop::-webkit-scrollbar,
.cal-list::-webkit-scrollbar, .tbl-wrap::-webkit-scrollbar, .math-out::-webkit-scrollbar, .tt-week::-webkit-scrollbar, .overlay-card::-webkit-scrollbar { width: 10px; height: 10px; }
.stage::-webkit-scrollbar-track, .books::-webkit-scrollbar-track, .side::-webkit-scrollbar-track, .thumbs-list::-webkit-scrollbar-track, .pop::-webkit-scrollbar-track,
.cal-list::-webkit-scrollbar-track, .tbl-wrap::-webkit-scrollbar-track, .math-out::-webkit-scrollbar-track, .tt-week::-webkit-scrollbar-track, .overlay-card::-webkit-scrollbar-track { background: transparent; }
.stage::-webkit-scrollbar-thumb, .books::-webkit-scrollbar-thumb, .side::-webkit-scrollbar-thumb, .thumbs-list::-webkit-scrollbar-thumb, .pop::-webkit-scrollbar-thumb,
.cal-list::-webkit-scrollbar-thumb, .tbl-wrap::-webkit-scrollbar-thumb, .math-out::-webkit-scrollbar-thumb, .tt-week::-webkit-scrollbar-thumb, .overlay-card::-webkit-scrollbar-thumb {
  background: var(--sb-thumb); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box;
}
.stage::-webkit-scrollbar-thumb:hover, .books::-webkit-scrollbar-thumb:hover, .side::-webkit-scrollbar-thumb:hover, .thumbs-list::-webkit-scrollbar-thumb:hover, .pop::-webkit-scrollbar-thumb:hover,
.cal-list::-webkit-scrollbar-thumb:hover, .tbl-wrap::-webkit-scrollbar-thumb:hover, .tt-week::-webkit-scrollbar-thumb:hover, .overlay-card::-webkit-scrollbar-thumb:hover { background: var(--sb-thumb-hover); background-clip: padding-box; }
.stage::-webkit-scrollbar-corner, .tbl-wrap::-webkit-scrollbar-corner { background: transparent; }
body[data-theme="minecraft"] .stage::-webkit-scrollbar-thumb, body[data-theme="minecraft"] .books::-webkit-scrollbar-thumb, body[data-theme="minecraft"] .pop::-webkit-scrollbar-thumb, body[data-theme="minecraft"] .thumbs-list::-webkit-scrollbar-thumb { border-radius: 0; box-shadow: inset 2px 2px 0 #fff3, inset -2px -2px 0 #0005; }
/* the main page scroll: no gutter jump, bar hides when the stage is not scrollable */
.stage { scrollbar-gutter: auto; }
body.presenting .stage { scrollbar-width: none; }

/* multiple side videos: tiles stacked like split-screen */
.vid-tiles { display: flex; flex-direction: column; gap: 2px; background: #000; }
.vid:not(.docked) .vid-tiles { aspect-ratio: 9 / 16; }
.vid.docked { justify-content: stretch; }
.vid.docked .vid-tiles { flex: 1; height: 100%; }
.vt { position: relative; flex: 1 1 0; min-height: 0; overflow: hidden; background: #000; }
.vt-media { position: absolute; inset: 0; overflow: hidden; }
.vt-media iframe { position: absolute; border: 0; max-width: none; }
.vt-media canvas, .vt-media video { display: block; width: 100%; height: 100%; }
.vt-bar { position: absolute; left: 6px; right: 6px; bottom: 6px; z-index: 2; display: flex; align-items: center; gap: 4px; opacity: 0; transition: opacity 0.15s ease; }
.vt:hover .vt-bar, .vt:focus-within .vt-bar { opacity: 1; }
@media (hover: none) { .vt-bar { opacity: 1; } }
.vt-bar .vid-src { max-width: none; flex: 0 1 auto; min-width: 0; }
.vid-head { justify-content: flex-end; }
.vid-head .vid-grip { flex: 1; align-self: stretch; min-height: 28px; }
.vid.docked .vid-head .vid-grip { cursor: default; }
/* YouTube tiles: thumbnail while loading, pause on tap, progress, play when autoplay is blocked */
.vt-media { background: #000 center / cover no-repeat; }
.vt.loading .vt-media::after { content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.25); border-top-color: #fff; animation: nb-spin 0.9s linear infinite; z-index: 1; }
.vt-media iframe { pointer-events: none; }
.vt-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 3; background: rgba(255, 255, 255, 0.15); cursor: pointer; transition: height 0.12s ease; }
.vt-prog i { display: block; height: 100%; width: 0; background: #ff3b3b; transition: width 1s linear; }
.vt:hover .vt-prog { height: 6px; }
.vt-bar { bottom: 12px; }
.vt-play { position: absolute; left: 50%; top: 50%; z-index: 3; width: 54px; height: 54px; margin: -27px 0 0 -27px; display: none; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff; cursor: pointer; }
.vt-play .icon { width: 26px; height: 26px; margin-left: 3px; }
.vt.blocked .vt-play, .vt.paused .vt-play { display: grid; }
.vt.paused .vt-media { filter: brightness(0.7); }
.vt-err { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; text-align: center; color: #ccc; font-size: 13px; line-height: 1.5; }

/* block selection */
.blocks:focus { outline: none; }
.blk.bsel { background: rgba(62, 123, 250, 0.16); box-shadow: -6px 0 0 rgba(62, 123, 250, 0.16), 6px 0 0 rgba(62, 123, 250, 0.16); border-radius: 2px; }
.blk.bsel + .blk.bsel { border-top-left-radius: 0; border-top-right-radius: 0; }
body.bsel-drag .blocks, body.bsel-drag .blocks * { -webkit-user-select: none !important; user-select: none !important; cursor: default; }
body.bselecting .blk-text::selection { background: transparent; }
.toast-btn { pointer-events: auto; margin-left: 10px; padding: 2px 10px; border: 1px solid currentColor; border-radius: var(--radius-pill); background: none; color: inherit; font: inherit; font-size: 12px; cursor: pointer; }
body[data-theme="paper"] .blk.bsel { background: rgba(62, 123, 250, 0.12); box-shadow: -6px 0 0 rgba(62, 123, 250, 0.12), 6px 0 0 rgba(62, 123, 250, 0.12); }
body[data-theme="minecraft"] .blk.bsel { background: rgba(80, 120, 255, 0.22); border-radius: 0; }

/* ==========================================================================
   Theme picker (settings): little preview cards
   ========================================================================== */
.theme-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
@media (max-width: 380px) { .theme-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.theme-card {
  display: flex; flex-direction: column; gap: 5px; padding: 4px; min-width: 0;
  background: none; border: 1px solid var(--line-2); border-radius: var(--radius-md);
  color: var(--text-soft); font: inherit; font-size: 11px; cursor: pointer; text-align: left;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.theme-card:hover { border-color: var(--line-3); transform: translateY(-1px); }
.theme-card[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); color: var(--text); }
.tc-pv { position: relative; display: block; height: 40px; border-radius: 5px; overflow: hidden; }
.tc-pv i { position: absolute; left: 14%; right: 14%; top: 7px; bottom: -4px; border-radius: 3px 3px 0 0; padding: 7px 6px; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); }
.tc-pv b { display: block; height: 3px; width: 80%; border-radius: 2px; opacity: 0.85; }
.tc-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 0 1px; text-align: center; font-size: 10.5px; letter-spacing: -0.01em; }
body[data-theme="minecraft"] .theme-card { border-radius: 0; border: 2px solid #000; }
body[data-theme="minecraft"] .theme-card[aria-pressed="true"] { border-color: #fff; box-shadow: none; }

/* ==========================================================================
   More themes. Like paper, they only re-map tokens (+ a few touches).
   light ones (library, soft) get the paper fixes for primary buttons,
   shadows, code colours and scrollbars.
   ========================================================================== */
/* --- Midnight: deep navy, cool blue accent --- */
body[data-theme="midnight"] {
  --bg: #0b1020; --bg-deep: #080c19; --panel: #121a33; --panel-2: #0f162c; --panel-raised: #18213f;
  --text: #dfe6ff; --text-soft: #c2ccef; --muted: #7d89b3;
  --line: #1c2546; --line-2: #263159; --line-3: #33406e;
  --accent: #7aa2ff; --accent-soft: rgba(122, 162, 255, 0.16);
  --surface: rgba(122, 162, 255, 0.05); --surface-hover: rgba(122, 162, 255, 0.12); --overlay: rgba(6, 9, 20, 0.8);
  --nb-sheet: #141c3a; --nb-sheet-line: #222c55;
  --nb-rule: rgba(122, 162, 255, 0.12); --nb-dot: rgba(160, 185, 255, 0.24);
  --nb-text: #dfe6ff; --nb-muted: #7d89b3; --nb-ink: #dfe6ff;
  --nb-code: rgba(122, 162, 255, 0.08); --nb-callout: rgba(122, 162, 255, 0.07);
  --sb-thumb: rgba(122, 162, 255, 0.22); --sb-thumb-hover: rgba(122, 162, 255, 0.4);
}
body[data-theme="midnight"] .menu-btn.primary { color: #0b1020; }

/* --- Library: cream paper, brown ink, serif everywhere --- */
body[data-theme="library"] {
  color-scheme: light;
  --bg: #e9dfca; --bg-deep: #e0d4bb; --panel: #f6eedc; --panel-2: #f1e7d1; --panel-raised: #fbf5e7;
  --text: #2e2116; --text-soft: #4a3828; --muted: #85705a;
  --line: #d6c7a8; --line-2: #c9b793; --line-3: #b49f7b;
  --accent: #8c3b2e; --accent-soft: rgba(140, 59, 46, 0.12);
  --surface: rgba(80, 50, 20, 0.04); --surface-hover: rgba(80, 50, 20, 0.08); --overlay: rgba(233, 223, 202, 0.84);
  --nb-sheet: #fbf4e3; --nb-sheet-line: #e1d2b2;
  --nb-rule: rgba(120, 85, 50, 0.2); --nb-dot: rgba(90, 60, 30, 0.25);
  --nb-margin: linear-gradient(90deg, transparent 47px, rgba(140, 59, 46, 0.45) 47px 48px, transparent 48px);
  --nb-margin-c: rgba(140, 59, 46, 0.45);
  --nb-text: #2e2116; --nb-muted: #8a755d; --nb-ink: #3a2a1a;
  --nb-code: rgba(80, 50, 20, 0.07); --nb-callout: #f2e6cb;
  --nb-font-text: var(--font-serif);
  --sb-thumb: rgba(80, 50, 20, 0.22); --sb-thumb-hover: rgba(80, 50, 20, 0.4);
}
body[data-theme="library"] .blk-text { font-size: 1.06em; }
body[data-theme="library"] .menu-btn.primary { color: #fbf4e3; background: #8c3b2e; }
body[data-theme="library"] .menu-btn.primary:hover { background: #6f2c22; }

/* --- Blueprint: blue drafting paper with a white grid --- */
body[data-theme="blueprint"] {
  --bg: #0d2747; --bg-deep: #0a1f3a; --panel: #113258; --panel-2: #0f2c4f; --panel-raised: #163c68;
  --text: #f2f8ff; --text-soft: #cfe3fa; --muted: #8fb1d6;
  --line: #1c4373; --line-2: #255189; --line-3: #3063a0;
  --accent: #7fd3ff; --accent-soft: rgba(127, 211, 255, 0.16);
  --surface: rgba(255, 255, 255, 0.04); --surface-hover: rgba(255, 255, 255, 0.1); --overlay: rgba(8, 26, 48, 0.82);
  --nb-sheet: #17467a; --nb-sheet-line: #2a5d96;
  --nb-sheet-tex: conic-gradient(from 90deg at 1px 1px, transparent 25%, rgba(255, 255, 255, 0.07) 0);
  --nb-rule: rgba(255, 255, 255, 0.18); --nb-dot: rgba(255, 255, 255, 0.35);
  --nb-text: #ffffff; --nb-muted: #a9c8ea; --nb-ink: #ffffff;
  --nb-code: rgba(0, 20, 50, 0.35); --nb-callout: rgba(255, 255, 255, 0.07);
  --nb-font-title: var(--font-mono);
  --sb-thumb: rgba(255, 255, 255, 0.2); --sb-thumb-hover: rgba(255, 255, 255, 0.38);
}
body[data-theme="blueprint"] .page-title, body[data-theme="blueprint"] .blk[data-type="h1"] .blk-text,
body[data-theme="blueprint"] .blk[data-type="h2"] .blk-text { text-transform: uppercase; letter-spacing: 0.04em; }
body[data-theme="blueprint"] .menu-btn.primary { color: #0d2747; }

/* --- Chalkboard: green board, chalk-white handwriting --- */
body[data-theme="chalk"] {
  --bg: #1c2620; --bg-deep: #151d18; --panel: #24332b; --panel-2: #202d26; --panel-raised: #2b3d33;
  --text: #f5f5f0; --text-soft: #dcdfd6; --muted: #9fae9f;
  --line: #2f4237; --line-2: #3a5144; --line-3: #486352;
  --accent: #ffe066; --accent-soft: rgba(255, 224, 102, 0.15);
  --surface: rgba(255, 255, 255, 0.04); --surface-hover: rgba(255, 255, 255, 0.09); --overlay: rgba(15, 22, 18, 0.82);
  --nb-sheet: #2d4a3b; --nb-sheet-line: #5b4128;
  --nb-rule: rgba(255, 255, 255, 0.1); --nb-dot: rgba(255, 255, 255, 0.22);
  --nb-text: #f5f5f0; --nb-muted: #b5c4b5; --nb-ink: #f5f5f0;
  --nb-code: rgba(0, 0, 0, 0.2); --nb-callout: rgba(255, 255, 255, 0.06);
  --nb-font-title: "Chalkboard SE", "Chalkduster", "Segoe Print", "Comic Sans MS", cursive;
  --nb-font-text: "Chalkboard SE", "Segoe Print", "Comic Sans MS", cursive;
  --sb-thumb: rgba(255, 255, 255, 0.2); --sb-thumb-hover: rgba(255, 255, 255, 0.36);
}
body[data-theme="chalk"] .sheet.note, body[data-theme="chalk"] .sheet.blank { box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.28), 0 0 0 6px #6b4a2b, 0 0 0 8px #3e2a17, 0 12px 30px rgba(0, 0, 0, 0.45); }
body[data-theme="chalk"] .blk-text, body[data-theme="chalk"] .page-title { text-shadow: 0 0 1px rgba(255, 255, 255, 0.35); }
body[data-theme="chalk"] .menu-btn.primary { color: #1c2620; background: #ffe066; }

/* --- Soft: lavender pastel, rounder corners --- */
body[data-theme="soft"] {
  color-scheme: light;
  --bg: #f6f1fb; --bg-deep: #efe7f8; --panel: #fdfbff; --panel-2: #f9f5fd; --panel-raised: #ffffff;
  --text: #2c2347; --text-soft: #463b68; --muted: #8a80a8;
  --line: #e6dcf3; --line-2: #dacdee; --line-3: #c7b6e3;
  --accent: #8b6cf0; --accent-soft: rgba(167, 139, 250, 0.18);
  --surface: rgba(120, 90, 200, 0.05); --surface-hover: rgba(120, 90, 200, 0.1); --overlay: rgba(246, 241, 251, 0.84);
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px;
  --nb-sheet: #ffffff; --nb-sheet-line: #ece3f7;
  --nb-rule: rgba(167, 139, 250, 0.22); --nb-dot: rgba(120, 90, 200, 0.25);
  --nb-margin: linear-gradient(90deg, transparent 47px, rgba(244, 114, 182, 0.4) 47px 48px, transparent 48px);
  --nb-margin-c: rgba(244, 114, 182, 0.4);
  --nb-text: #2c2347; --nb-muted: #9187ad; --nb-ink: #3b2f63;
  --nb-code: rgba(167, 139, 250, 0.1); --nb-callout: #f4effd;
  --sb-thumb: rgba(120, 90, 200, 0.2); --sb-thumb-hover: rgba(120, 90, 200, 0.38);
}
body[data-theme="soft"] .sheet.note, body[data-theme="soft"] .sheet.blank { border-radius: 14px; box-shadow: 0 10px 30px rgba(120, 90, 200, 0.1); }
body[data-theme="soft"] .menu-btn.primary { color: #fff; background: #8b6cf0; }
body[data-theme="soft"] .menu-btn.primary:hover { background: #7656e0; }

/* --- Terminal: black, green mono, faint glow --- */
body[data-theme="terminal"] {
  --bg: #050805; --bg-deep: #020402; --panel: #0a120a; --panel-2: #081008; --panel-raised: #0e180e;
  --text: #9dffa6; --text-soft: #7fe98a; --muted: #3f8f48;
  --line: #123018; --line-2: #1a4221; --line-3: #23552b;
  --accent: #3cff6b; --accent-soft: rgba(60, 255, 107, 0.14);
  --surface: rgba(60, 255, 107, 0.04); --surface-hover: rgba(60, 255, 107, 0.1); --overlay: rgba(2, 5, 2, 0.86);
  --radius-sm: 2px; --radius-md: 3px; --radius-lg: 4px;
  --font-sans: var(--font-mono); --font-serif: var(--font-mono);
  --nb-sheet: #081008; --nb-sheet-line: #1a4221;
  --nb-sheet-tex: repeating-linear-gradient(0deg, rgba(60, 255, 107, 0.03) 0 1px, transparent 1px 4px);
  --nb-rule: rgba(60, 255, 107, 0.1); --nb-dot: rgba(60, 255, 107, 0.25);
  --nb-text: #9dffa6; --nb-muted: #4fae5a; --nb-ink: #7dff8a;
  --nb-code: rgba(60, 255, 107, 0.06); --nb-callout: rgba(60, 255, 107, 0.05);
  --nb-font-title: var(--font-mono); --nb-font-text: var(--font-mono);
  --sb-thumb: rgba(60, 255, 107, 0.2); --sb-thumb-hover: rgba(60, 255, 107, 0.38);
}
body[data-theme="terminal"] .blk-text, body[data-theme="terminal"] .page-title, body[data-theme="terminal"] .brand { text-shadow: 0 0 6px rgba(60, 255, 107, 0.35); }
body[data-theme="terminal"] .menu-btn.primary { color: #050805; background: #3cff6b; }

/* --- Sunset: warm plum with a peach accent --- */
body[data-theme="sunset"] {
  --bg: #24141f; --bg-deep: #1b0f18; --panel: #301b2a; --panel-2: #2a1824; --panel-raised: #3a2133;
  --text: #ffe9dc; --text-soft: #f5d2c0; --muted: #b58a8f;
  --line: #3d2235; --line-2: #4c2b42; --line-3: #5e3652;
  --accent: #ff8a5c; --accent-soft: rgba(255, 138, 92, 0.16);
  --surface: rgba(255, 170, 130, 0.05); --surface-hover: rgba(255, 170, 130, 0.11); --overlay: rgba(22, 12, 19, 0.82);
  --nb-sheet: #2f1b29; --nb-sheet-line: #4a2a40;
  --nb-rule: rgba(255, 170, 130, 0.12); --nb-dot: rgba(255, 190, 160, 0.24);
  --nb-text: #ffe9dc; --nb-muted: #c09296; --nb-ink: #ffd9c4;
  --nb-code: rgba(255, 138, 92, 0.08); --nb-callout: rgba(255, 138, 92, 0.07);
  --sb-thumb: rgba(255, 170, 130, 0.22); --sb-thumb-hover: rgba(255, 170, 130, 0.4);
}
body[data-theme="sunset"] .sheet.note, body[data-theme="sunset"] .sheet.blank { box-shadow: inset 0 -120px 140px -100px rgba(255, 138, 92, 0.12), 0 10px 30px rgba(0, 0, 0, 0.35); }
body[data-theme="library"] .sheet.note, body[data-theme="library"] .sheet.blank { box-shadow: inset 0 0 70px rgba(150, 110, 60, 0.1), 0 6px 20px rgba(60, 40, 10, 0.12); }
body[data-theme="sunset"] .menu-btn.primary { color: #24141f; background: #ff8a5c; }

/* light themes share the paper fixes */
body[data-theme="library"] .sheet.pdf-page, body[data-theme="soft"] .sheet.pdf-page { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); }
body[data-theme="library"] .tray, body[data-theme="library"] .pop,
body[data-theme="soft"] .tray, body[data-theme="soft"] .pop { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12); }
body[data-theme="library"] .geo-ruler, body[data-theme="soft"] .geo-ruler { background: rgba(255, 255, 255, 0.55); border-color: rgba(0, 0, 0, 0.3); }
body[data-theme="library"] .geo-body, body[data-theme="soft"] .geo-body { fill: rgba(255, 255, 255, 0.55); stroke: rgba(0, 0, 0, 0.3); }
body[data-theme="library"] .blk.bsel, body[data-theme="soft"] .blk.bsel { background: rgba(62, 123, 250, 0.12); box-shadow: -6px 0 0 rgba(62, 123, 250, 0.12), 6px 0 0 rgba(62, 123, 250, 0.12); }
body[data-theme="library"] .c-com, body[data-theme="soft"] .c-com { color: #7a8a76; }
body[data-theme="library"] .c-str, body[data-theme="soft"] .c-str { color: #a3620a; }
body[data-theme="library"] .c-num, body[data-theme="soft"] .c-num { color: #8e3fa8; }
body[data-theme="library"] .c-kw, body[data-theme="soft"] .c-kw { color: #1f5fd1; }
body[data-theme="library"] .c-con, body[data-theme="soft"] .c-con { color: #c2303d; }
body[data-theme="library"] .c-fn, body[data-theme="soft"] .c-fn { color: #0f7d6e; }
body[data-theme="library"] .c-op, body[data-theme="soft"] .c-op { color: #9c6a00; }
body[data-theme="terminal"] .c-kw, body[data-theme="terminal"] .c-fn { color: #c8ffcf; }