/* arena-chapter0-notebook.css — a literal spiral notebook for the Pony Arena.
   A kraft cover + wire-o binding + ruled paper. Three block types tape onto
   the page: handwritten free-text (on blue rules), a sketch canvas, and a
   monospace code printout. Scoped under .nb-* / .notebook so it never touches
   the host page's styles. */

/* the author's own hand, for the free-write blocks */
@font-face {
  font-family: 'Handwriting';
  src: url('fonts/custom/My handwriting.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.nb-overlay,
.notebook,
.nb-fab {
  --nb-rule: 30px;                 /* ruled-line pitch; text line-height matches */
  --nb-paper: #fffdf6;
  --nb-paper-edge: #efe7d2;
  --nb-line: #bcd6ec;              /* blue feint */
  --nb-margin: #ef9aa8;            /* red margin rule */
  --nb-ink: #2b3a52;
  --nb-kraft-1: #685444;
  --nb-kraft-2: #504034;
  --nb-kraft-edge: #3c3026;
  --nb-wire: #8b9099;
  --nb-pink-1: var(--pink-1, #ff9cbb);
  --nb-pink-2: var(--pink-2, #ff7ba1);
  --nb-mono: 'JetBrains Mono', ui-monospace, 'IBM Plex Mono', monospace;
  --nb-ui: 'Fredoka', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- floating trigger (bottom-right; cat-nav owns bottom-left) ---- */
.nb-fab {
  position: fixed;
  right: 22px;
  bottom: 20px;
  z-index: 1200;
  width: 54px;
  height: 56px;
  padding: 0;
  border: none;
  background: none;
  border-radius: 12px;
  cursor: pointer;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 6px 9px rgba(40,28,10,0.4));
  transition: transform 0.14s ease, filter 0.14s ease;
}
.nb-fab:hover { transform: translateY(-2px) scale(1.05); }
.nb-fab:active { transform: translateY(1px); }
.nb-fab-ic { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---------- overlay + the book ---------------------------------------- */
body.nb-open { overflow: hidden; }

.nb-overlay {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(45,32,68,0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.nb-overlay.is-open { display: flex; }

.notebook {
  position: relative;
  width: min(900px, 100%);
  min-height: min(560px, 82vh);   /* a near-empty book still reads as a full page */
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  filter: drop-shadow(0 30px 60px rgba(20,20,50,0.5));
  animation: nb-in 0.26s ease;
}
@keyframes nb-in {
  from { transform: translateY(16px) scale(0.965); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* the kraft cover that carries the title + tools */
.nb-cover {
  position: relative;
  /* deliberately no z-index: a positive z-index makes the cover its own stacking context,
     which traps the Export dropdown (.nb-export-menu) underneath the spiral binding (z-index:4).
     Positioned-but-auto, the cover still sits above the static paper, and the menu's own
     z-index can clear the spiral. */
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px 18px;
  background: linear-gradient(var(--nb-kraft-1), var(--nb-kraft-2));
  border-radius: 16px 16px 4px 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
.nb-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #ecd9b3;
  font-family: 'PonyDisplay', var(--nb-ui);
  font-size: 23px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
.nb-brand svg { width: 26px; height: 26px; }
.nb-brand b { font-weight: 400; }

.nb-tools {
  margin-left: auto;
  display: flex;
  gap: 8px;
}
.nb-tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px 7px 11px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--nb-ui);
  font-weight: 600;
  font-size: 13px;
  color: #fff;
  background: linear-gradient(var(--nb-pink-1), var(--nb-pink-2));
  border-bottom: 2px solid var(--pink-edge, #ef5e8a);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
  text-shadow: 0 1px 1px rgba(0,0,0,0.16);
  transition: transform 0.12s ease, filter 0.12s ease;
}
.nb-tool[data-add="draw"] { background: linear-gradient(var(--teal-1, #3fc8d6), var(--teal-2, #18a6b6)); border-bottom-color: var(--teal-edge, #11808d); }
.nb-tool[data-add="board"] { background: linear-gradient(#b79bff, #8f63f0); border-bottom-color: #6f44d4; }
.nb-tool:hover { filter: brightness(1.05); }
.nb-tool:active { transform: translateY(1px); }
.nb-tool svg { width: 16px; height: 16px; }

.nb-close {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #ecd9b3;
  background: rgba(0,0,0,0.18);
  display: grid;
  place-items: center;
  transition: background 0.12s ease;
}
.nb-close:hover { background: rgba(0,0,0,0.32); }
.nb-close svg { width: 18px; height: 18px; }

/* wire-o spiral binding straddling cover and paper */
.nb-spiral {
  position: relative;
  z-index: 4;
  height: 20px;
  margin: -11px 30px -8px;
  background-image:
    radial-gradient(circle at 50% 46%, transparent 0 3px, var(--nb-wire) 3px 5px, #cdd2da 5px 6.5px, transparent 6.9px),
    radial-gradient(ellipse 7px 9px at 50% 92%, rgba(0,0,0,0.20) 0 60%, transparent 64%);
  background-size: 27px 20px, 27px 20px;
  background-repeat: repeat-x, repeat-x;
  background-position: 0 0, 0 0;
  pointer-events: none;
}

/* the ruled paper — scroll area that holds the current page */
.nb-paper {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: var(--nb-paper);
  border: 1px solid var(--nb-paper-edge);
  border-top: none;
  border-radius: 0 0 5px 5px;
  box-shadow: inset 0 8px 14px -10px rgba(120,95,40,0.4);
}
.nb-page {
  position: relative;
  min-height: 100%;
  padding: 24px 26px 60px 58px;   /* left pad clears the red margin */
}
/* the red margin rule running down the page */
.nb-page::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 44px;
  width: 2px;
  background: var(--nb-margin);
  opacity: 0.7;
}
/* two punched-hole shadows up top to echo the binding */
.nb-page::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 14px;
  background: linear-gradient(rgba(120,95,40,0.10), transparent);
  pointer-events: none;
}

.nb-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px;
  text-align: center;
  color: #9bb0c4;
  font-family: 'Handwriting', var(--nb-ui);
  font-size: 21px;
  pointer-events: none;
}
.nb-empty span { font-family: var(--nb-ui); font-size: 13px; color: #b6c4d2; }

/* ---------- blocks ---------------------------------------------------- */
.nb-block {
  position: relative;
  margin: 4px 0 14px;
}
.nb-del-block {
  position: absolute;
  top: -9px;
  right: -9px;
  z-index: 5;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  font-size: 17px;
  line-height: 1;
  background: #e06a86;
  box-shadow: 0 2px 5px rgba(80,30,50,0.3);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.nb-block:hover .nb-del-block,
.nb-block:focus-within .nb-del-block { opacity: 1; transform: none; }
.nb-del-block:hover { background: #d2546f; }

/* Write block: raw-Markdown editor (ruled handwriting) ⇄ rendered view */
.nb-text-wrap .nb-text { display: none; }
.nb-text-wrap.is-editing .nb-text { display: block; }
.nb-text-wrap.is-editing .nb-text-view { display: none; }

/* free-write: handwriting that sits on its own blue feint */
.nb-text {
  width: 100%;
  resize: none;
  border: none;
  outline: none;
  overflow: hidden;
  background: transparent;
  background-image: repeating-linear-gradient(
      transparent 0 calc(var(--nb-rule) - 1px),
      var(--nb-line) calc(var(--nb-rule) - 1px) var(--nb-rule));
  background-position: 0 9px;
  color: var(--nb-ink);
  font-family: 'Handwriting', cursive;
  font-size: 21px;
  line-height: var(--nb-rule);
  padding: 1px 2px 0;
  caret-color: var(--nb-pink-2);
}
.nb-text::placeholder { color: #b9c8d6; }

/* rendered Markdown — keeps the handwritten voice, adds real structure */
.nb-text-view {
  cursor: text;
  min-height: var(--nb-rule);
  padding: 1px 2px;
  color: var(--nb-ink);
  font-family: 'Handwriting', cursive;
  font-size: 20px;
  line-height: 1.5;
}
.nb-md-empty { color: #b9c8d6; font-style: italic; font-size: 18px; }
.nb-md > :first-child { margin-top: 0; }
.nb-md > :last-child { margin-bottom: 0; }
.nb-md h1, .nb-md h2, .nb-md h3, .nb-md h4, .nb-md h5, .nb-md h6 {
  margin: 0.5em 0 0.3em;
  line-height: 1.2;
  color: #2b3a52;
  font-family: 'Handwriting', cursive;
  font-weight: 700;
}
.nb-md h1 { font-size: 1.7em; border-bottom: 2px solid var(--nb-line); padding-bottom: 0.12em; }
.nb-md h2 { font-size: 1.42em; }
.nb-md h3 { font-size: 1.2em; }
.nb-md h4, .nb-md h5, .nb-md h6 { font-size: 1.06em; color: #4b5563; }
.nb-md p { margin: 0.45em 0; }
.nb-md ul, .nb-md ol { margin: 0.45em 0; padding-left: 1.45em; }
.nb-md li { margin: 0.16em 0; }
.nb-md a { color: #2f6fb0; text-decoration: underline; text-underline-offset: 2px; }
.nb-md strong { font-weight: 800; }
.nb-md em { font-style: italic; }
.nb-md del { opacity: 0.7; }
.nb-md blockquote {
  margin: 0.55em 0;
  padding: 2px 12px;
  border-left: 3px solid var(--nb-pink-2);
  background: #fff5f9;
  border-radius: 0 8px 8px 0;
  color: #6a4a5a;
}
.nb-md hr { border: none; border-top: 2px dashed var(--nb-line); margin: 0.7em 0; }
.nb-md code {
  font-family: var(--nb-mono);
  font-size: 0.78em;
  background: #ffe4ef;
  color: #b5306b;
  padding: 1px 6px;
  border-radius: 6px;
}
.nb-md-pre {
  margin: 0.55em 0;
  padding: 11px 13px;
  background: #fff0f6;
  border: 1px solid #ffcfe0;
  border-radius: 9px;
  overflow-x: auto;
}
.nb-md-pre code { background: none; color: #7a1f47; padding: 0; font-size: 13px; }

/* task-list checkboxes  (- [ ] / - [x]) */
.nb-md-tasklist { list-style: none; padding-left: 0.1em; }
.nb-md .nb-task { display: flex; align-items: baseline; gap: 0.5em; list-style: none; }
.nb-md .nb-task-box {
  flex: none; width: 1.02em; height: 1.02em; margin: 0;
  cursor: pointer; accent-color: var(--nb-pink-2, #ff7ba1); transform: translateY(2px);
}
.nb-md .nb-task--done > span { text-decoration: line-through; opacity: 0.55; }

/* markdown tables */
.nb-md-table { border-collapse: collapse; margin: 0.6em 0; font-size: 0.94em; max-width: 100%; }
.nb-md-table th, .nb-md-table td { border: 1px solid var(--nb-line); padding: 4px 10px; text-align: left; }
.nb-md-table thead th { background: #fff0f6; color: #7a1f47; font-weight: 700; }
.nb-md-table tbody tr:nth-child(even) td { background: rgba(255, 240, 246, 0.5); }

/* KaTeX math (auto-rendered from $…$ / $$…$$) */
.nb-md .katex { font-size: 1.04em; }
.nb-md .katex-display { margin: 0.55em 0; overflow-x: auto; overflow-y: hidden; }
.nb-math-raw { font-family: var(--nb-mono); font-size: 0.85em; color: #b5306b; }

/* contents + whole-notebook search panel (overlays the paper) */
.nb-contents {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  background: var(--nb-paper);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--nb-paper-edge);
}
.nb-contents[hidden] { display: none; }
.nb-contents-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--nb-paper-edge);
}
.nb-search {
  flex: 1; min-width: 0;
  font: 15px/1.4 'Space Grotesk', system-ui, sans-serif;
  padding: 9px 13px; border: 1px solid var(--nb-line); border-radius: 10px;
  background: #fff; color: #2b2f36;
}
.nb-search:focus { outline: 2px solid #ffd66b; outline-offset: 1px; }
.nb-contents-close {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--nb-paper-edge); border-radius: 9px; background: #fff;
  color: #6a4a5a; cursor: pointer;
}
.nb-contents-close svg { width: 18px; height: 18px; }
.nb-contents-body { flex: 1; overflow: auto; padding: 8px 16px 22px; }
.nb-contents-h {
  margin: 16px 0 6px; font: 600 11px/1.3 var(--nb-mono);
  letter-spacing: 0.08em; text-transform: uppercase; color: #8a93a3;
}
.nb-contents-list { display: flex; flex-direction: column; gap: 4px; }
.nb-contents-item {
  display: flex; flex-direction: column; gap: 2px; width: 100%;
  text-align: left; padding: 8px 11px; cursor: pointer;
  border: 1px solid transparent; border-radius: 9px; background: #fff;
}
.nb-contents-item:hover { border-color: var(--nb-line); background: #fff7ef; }
.nb-ci-meta { font: 600 11px/1.3 var(--nb-mono); color: #b5306b; }
.nb-ci-snip { font-size: 14px; color: #43474e; }
.nb-ci-snip mark { background: #ffe7a0; color: inherit; padding: 0 1px; border-radius: 3px; }
.nb-contents-empty { color: #9aa6b2; font-style: italic; padding: 22px 4px; }
.nb-flash { animation: nb-flash 1.4s ease; }
@keyframes nb-flash {
  0%, 100% { box-shadow: none; }
  15% { box-shadow: 0 0 0 3px #ffd66b; }
}

/* a taped-in code printout — pink, to match the materials' code blocks */
.nb-code {
  position: relative;
  border-radius: 9px;
  background: #fff0f6;
  border: 1px solid #ffcfe0;
  box-shadow: 0 8px 18px rgba(180,48,107,0.13);
  overflow: hidden;
}
.nb-code-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: #ffe1ec;
  border-bottom: 1px solid #ffcfe0;
  color: #b5306b;
  font-family: var(--nb-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
}
.nb-code-glyph { display: inline-flex; }
.nb-code-glyph svg { width: 14px; height: 14px; }
.nb-code-lang { text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.85; }
.nb-code-copy {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: #b5306b;
  background: rgba(181,48,107,0.10);
  font-family: var(--nb-mono);
  font-size: 11px;
  transition: background 0.12s ease;
}
.nb-code-copy:hover { background: rgba(181,48,107,0.18); }
.nb-code-copy svg { width: 13px; height: 13px; }
.nb-code-copy.is-done { color: #2f8f2f; }
.nb-code-area {
  display: none;
  width: 100%;
  resize: none;
  border: none;
  outline: none;
  overflow: hidden;
  min-height: 78px;
  padding: 12px 14px 16px;
  background: transparent;
  color: #7a1f47;
  font-family: var(--nb-mono);
  font-size: 13.5px;
  line-height: 1.55;
  tab-size: 2;
}
.nb-code-area::placeholder { color: #d99bb6; }

/* highlighted read view ⇄ raw textarea */
.nb-code.is-editing .nb-code-area { display: block; }
.nb-code.is-editing .nb-code-view { display: none; }
.nb-code-view {
  margin: 0;
  padding: 12px 14px 16px;
  min-height: 78px;
  overflow-x: auto;
  cursor: text;
  color: #7a1f47;
  font-family: var(--nb-mono);
  font-size: 13.5px;
  line-height: 1.55;
  tab-size: 2;
  white-space: pre;
}
.nb-code-view code { font: inherit; background: none; padding: 0; }
.nb-code-empty { color: #d99bb6; }

/* shared syntax-highlight palette (reader materials, notebook code + fences,
   copied callouts) — tuned for the pink code surface */
.tok-com { color: #b08aa0; font-style: italic; }
.tok-str { color: #1b8a6b; }
.tok-kw { color: #a23fb0; font-weight: 700; }
.tok-num { color: #c4631f; }
.tok-builtin { color: #2f6fb0; }
.tok-fn { color: #7a45d8; }
.tok-dec { color: #c4631f; }
.tok-const { color: #a23fb0; font-style: italic; }

/* a sketch pad taped onto the page */
.nb-draw {
  position: relative;
  border-radius: 9px;
  background: #fff;
  border: 1px solid #e3e9ef;
  box-shadow: 0 8px 18px rgba(40,50,70,0.12);
  overflow: hidden;
}
/* washi-tape corners, shared by code + draw cards */
.nb-draw::before, .nb-draw::after,
.nb-code::before, .nb-code::after {
  content: "";
  position: absolute;
  top: -8px;
  width: 46px;
  height: 18px;
  background: rgba(255, 213, 120, 0.55);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  z-index: 3;
}
.nb-draw::before, .nb-code::before { left: 16px; transform: rotate(-6deg); }
.nb-draw::after,  .nb-code::after  { right: 16px; transform: rotate(5deg); background: rgba(168, 226, 255, 0.55); }

.nb-draw-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  padding: 8px 10px;
  background: linear-gradient(#fbfcfe, #eef2f7);
  border-bottom: 1px solid #e6ebf1;
}
.nb-swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #fff;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.12);
  padding: 0;
  transition: transform 0.1s ease;
}
.nb-swatch:hover { transform: scale(1.12); }
.nb-swatch.is-on { box-shadow: 0 0 0 2px #2b3a52; transform: scale(1.12); }
.nb-draw-sep { width: 1px; height: 20px; background: #d8dee6; margin: 0 3px; }
.nb-dtool {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  color: #57637a;
  background: #fff;
  border: 1px solid #dde4ec;
  font-family: var(--nb-ui);
  font-weight: 600;
  font-size: 12px;
  transition: background 0.12s ease, color 0.12s ease;
}
.nb-dtool:hover { background: #eef3f9; }
.nb-dtool.is-on { background: #2b3a52; color: #fff; border-color: #2b3a52; }
.nb-dtool svg { width: 14px; height: 14px; }
.nb-dtool--clear { margin-left: auto; color: #c0562b; }
.nb-draw-surface {
  position: relative;
  background-color: #fff;
  background-image: radial-gradient(#d2dde8 1.1px, transparent 1.3px);
  background-size: 18px 18px;
}
.nb-draw-surface canvas {
  display: block;
  width: 100%;
  height: 220px;
  touch-action: none;
  cursor: crosshair;
}

/* ---------- footer: page navigation ----------------------------------- */
.nb-foot {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  margin: 0 4px;
  background: linear-gradient(var(--nb-kraft-2), var(--nb-kraft-1));
  border-radius: 0 0 14px 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
}
.nb-count {
  font-family: 'PonyDisplay', var(--nb-ui);
  font-size: 15px;
  color: #ecd9b3;
  min-width: 96px;
  text-align: center;
}
.nb-pg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  color: #5c4a3c;
  background: rgba(255,255,255,0.62);
  font-family: var(--nb-ui);
  font-weight: 600;
  font-size: 13px;
  transition: background 0.12s ease, opacity 0.12s ease;
}
.nb-pg:hover { background: rgba(255,255,255,0.7); }
.nb-pg svg { width: 16px; height: 16px; }
.nb-pg:disabled { opacity: 0.4; cursor: default; }
.nb-foot-sp { margin-left: auto; }
.nb-del { color: #b0431f; }

/* ---------- export menu (in the cover) -------------------------------- */
.nb-export-wrap { position: relative; }
.nb-export {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  color: #5c4a3c;
  background: rgba(255,255,255,0.62);
  border-bottom: 2px solid rgba(60,48,38,0.4);
  font-family: var(--nb-ui);
  font-weight: 600;
  font-size: 13px;
  transition: background 0.12s ease;
}
.nb-export:hover { background: rgba(255,255,255,0.8); }
.nb-export svg { width: 16px; height: 16px; }
.nb-export-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 7px);
  z-index: 6;
  display: flex;
  flex-direction: column;
  min-width: 184px;
  padding: 6px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(20,20,50,0.3);
}
.nb-export-menu[hidden] { display: none; }
.nb-export-menu button {
  text-align: left;
  padding: 9px 12px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: none;
  color: #4b5563;
  font-family: var(--nb-ui);
  font-weight: 600;
  font-size: 13px;
}
.nb-export-menu button:hover { background: #f3f0fc; color: #7a45d8; }
.nb-menu-sep { height: 1px; margin: 5px 8px; background: #eee3f7; }

/* slash (/) command menu */
.nb-slash {
  position: fixed;
  z-index: 1450;
  min-width: 252px;
  max-width: 300px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  background: #fff;
  border: 1px solid #ece3d4;
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(20, 20, 50, 0.28);
  font-family: var(--nb-ui);
}
.nb-slash[hidden] { display: none; }
.nb-slash-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border-radius: 8px;
  cursor: pointer;
}
.nb-slash-item.is-sel { background: #f3f0fc; }
.nb-slash-ic {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #faf7ff;
  border: 1px solid #ece3f7;
  color: #7a45d8;
}
.nb-slash-ic svg { width: 17px; height: 17px; }
.nb-slash-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.nb-slash-txt b { font-weight: 700; font-size: 13px; color: #3a2f4a; }
.nb-slash-txt i { font-style: normal; font-size: 11px; color: #9a93a8; }

/* collapsible toggle ( > [!toggle] … ) */
.nb-md .nb-md-toggle {
  margin: 0.55em 0;
  border: 1px solid var(--nb-line);
  border-radius: 8px;
  padding: 2px 12px;
  background: rgba(255, 240, 246, 0.4);
}
.nb-md .nb-md-toggle > summary {
  cursor: pointer;
  padding: 5px 2px;
  font-weight: 700;
  color: #7a1f47;
}
.nb-md .nb-md-toggle > summary::marker,
.nb-md .nb-md-toggle > summary::-webkit-details-marker { color: #b5306b; }
.nb-md .nb-md-toggle-body { padding: 2px 0 7px; }
.nb-md .nb-md-toggle-body > :first-child { margin-top: 0; }

/* ---------- callout copied from the materials (purple block) ---------- */
.nb-callout {
  position: relative;
  border-radius: 12px;
  background: #f3f0fc;
  border: 1px solid #e0d8f5;
  padding: 10px 16px 14px;
}
.nb-callout-tag {
  display: inline-block;
  margin-bottom: 6px;
  font-family: var(--nb-ui);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7a5fc4;
}
.nb-callout-body { color: #43405a; font-family: var(--nb-ui); font-size: 15px; line-height: 1.55; }
.nb-callout-body > :first-child { margin-top: 0; }
.nb-callout-body > :last-child { margin-bottom: 0; }

/* ---------- commutative-diagram block (vendored quiver) --------------- */
.nb-diagram {
  position: relative;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e3e9ef;
  box-shadow: 0 8px 18px rgba(40,50,70,0.12);
  overflow: hidden;
}
.nb-diagram::before, .nb-diagram::after,
.nb-image::before, .nb-image::after {
  content: "";
  position: absolute;
  top: -8px;
  width: 46px;
  height: 18px;
  background: rgba(255,213,120,0.55);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  z-index: 3;
}
.nb-diagram::before, .nb-image::before { left: 16px; transform: rotate(-6deg); }
.nb-diagram::after, .nb-image::after  { right: 16px; transform: rotate(5deg); background: rgba(168,226,255,0.55); }

/* imported picture — taped onto the page */
.nb-image {
  position: relative;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e3e9ef;
  box-shadow: 0 8px 18px rgba(40,50,70,0.12);
  padding: 10px;
  text-align: center;
}
.nb-image-img {
  display: block;
  max-width: 100%;
  max-height: 460px;
  margin: 0 auto;
  border-radius: 6px;
}
.nb-image-cap {
  margin-top: 7px;
  font-family: var(--nb-ui);
  font-size: 11.5px;
  color: #8a93a3;
  word-break: break-all;
}
.nb-d-bar {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: linear-gradient(#fbfcfe, #eef2f7);
  border-bottom: 1px solid #e6ebf1;
}
.nb-d-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--nb-ui); font-weight: 600; font-size: 12px; color: #57637a; }
.nb-d-tag svg { width: 16px; height: 16px; }
.nb-d-actions { margin-left: auto; display: flex; gap: 7px; }
.nb-d-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border: 1px solid #dde4ec;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--nb-ui);
  font-weight: 600;
  font-size: 12px;
  color: #57637a;
  background: #fff;
  transition: background 0.12s ease, filter 0.12s ease;
}
.nb-d-btn:hover { background: #eef3f9; }
.nb-d-save { color: #fff; background: linear-gradient(#b79bff, #8f63f0); border-color: #6f44d4; }
.nb-d-save:hover { background: linear-gradient(#b79bff, #8f63f0); filter: brightness(1.05); }
.nb-d-frame { display: block; width: 100%; height: 300px; border: none; background: #fff; }
.nb-d-frame--edit { height: 440px; }
/* Excalidraw sketchboard needs more room to draw in */
.nb-board .nb-d-frame--edit { height: 540px; }
.nb-board-view { background: #fff; padding: 8px; display: flex; justify-content: center; }
.nb-board-view img { max-width: 100%; height: auto; display: block; }
.nb-d-hint { padding: 8px 12px; font-family: var(--nb-ui); font-size: 12.5px; line-height: 1.4; color: #8a93a3; background: #fafbfd; border-top: 1px solid #eef1f5; }
.nb-d-hint b { color: #7a45d8; }

/* ---------- toast + FAB pulse ----------------------------------------- */
.nb-toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translate(-50%, 16px);
  z-index: 1500;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(43,40,60,0.94);
  color: #fff;
  font-family: var(--ui, 'Fredoka', system-ui, sans-serif);
  font-weight: 600;
  font-size: 13px;
  box-shadow: 0 10px 28px rgba(20,20,50,0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.nb-toast.show { opacity: 1; transform: translate(-50%, 0); }

@keyframes nb-pulse-kf {
  0%   { box-shadow: 0 8px 18px rgba(80,55,15,0.28), 0 0 0 0 rgba(255,170,90,0.6); }
  70%  { box-shadow: 0 8px 18px rgba(80,55,15,0.28), 0 0 0 16px rgba(255,170,90,0); }
  100% { box-shadow: 0 8px 18px rgba(80,55,15,0.28), 0 0 0 0 rgba(255,170,90,0); }
}
.nb-fab.nb-pulse { animation: nb-pulse-kf 0.9s ease-out; }

/* ---------- materials-reader integration ------------------------------ */
/* "copy to notebook" button injected onto each purple blockquote */
.reader-body blockquote.nb-copyable { position: relative; }
.nb-copybtn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--ui, 'Fredoka', sans-serif);
  font-weight: 600;
  font-size: 11px;
  color: #7a45d8;
  background: #efe7ff;
  box-shadow: 0 1px 3px rgba(80,40,160,0.18);
  opacity: 0.5;
  transition: opacity 0.12s ease, background 0.12s ease;
}
blockquote.nb-copyable:hover .nb-copybtn, .nb-copybtn:focus { opacity: 1; }
.nb-copybtn:hover { background: #e2d3ff; opacity: 1; }
.nb-copybtn svg { width: 12px; height: 12px; }
.nb-copybtn.is-done { color: #2f8f2f; background: #e7f8e0; }

/* free-text answer field on "check your understanding" questions */
.nb-answer-wrap { margin: 12px 0 2px; }
.nb-answer-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
  font-family: var(--ui, 'Fredoka', sans-serif);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #7a45d8;
}
.nb-answer-label .nb-saved { font-size: 10.5px; font-weight: 500; text-transform: none; letter-spacing: 0; color: #8a93a3; opacity: 0; transition: opacity 0.2s ease; }
.nb-answer-label .nb-saved.show { opacity: 1; }
.nb-answer {
  width: 100%;
  min-height: 62px;
  resize: vertical;
  border: 1px solid #d8cdf2;
  border-radius: 10px;
  padding: 9px 11px;
  font-family: var(--ui, 'Fredoka', sans-serif);
  font-size: 14px;
  line-height: 1.5;
  color: #3a3550;
  background: #fff;
  outline: none;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.nb-answer:focus { border-color: #9a63f0; box-shadow: 0 0 0 3px rgba(154,99,240,0.16); }
.nb-answer::placeholder { color: #b3a8cf; }

/* floating "copy to notebook" popup shown over a text selection */
.nb-selpop {
  position: fixed;
  z-index: 1400;
  transform: translate(-50%, -100%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--ui, 'Fredoka', sans-serif);
  font-weight: 600;
  font-size: 12px;
  color: #fff;
  background: linear-gradient(#c79bff, #9a63f0);
  border-bottom: 2px solid #7a45d8;
  box-shadow: 0 6px 16px rgba(80,40,160,0.32);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
.nb-selpop.show { opacity: 1; pointer-events: auto; }
.nb-selpop svg { width: 14px; height: 14px; }
.nb-selpop::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 9px;
  height: 9px;
  background: #9a63f0;
  transform: translateX(-50%) rotate(45deg);
}

/* ---------- responsive ------------------------------------------------ */
@media (max-width: 600px) {
  .nb-overlay { padding: 10px; }
  .nb-cover { flex-wrap: wrap; gap: 10px; }
  .nb-brand { font-size: 20px; }
  .nb-tool span, .nb-export span { display: none; }
  /* icon-only tools, but a comfortable ~40px touch target */
  .nb-tool { padding: 11px 12px; }
  .nb-tool svg { width: 18px; height: 18px; }
  .nb-export { padding: 10px 12px; }
  .nb-close { width: 38px; height: 38px; }
  .nb-pg { padding: 9px 13px; }
  .nb-page { padding: 18px 16px 52px 48px; }
  .nb-page::before { left: 34px; }
  /* fill the viewport so the ruled paper actually has room (was collapsing to content) */
  .notebook { height: 96vh; max-height: 96vh; min-height: 0; }
  .nb-d-frame--edit { height: 360px; }
  .nb-d-btn { padding: 6px 10px; font-size: 11px; }
}

/* ---- read + take notes at once: dock the reader and notebook side by side
        when both are open (wide screens only; narrow keeps them stacked) ---- */
body.nb-open .nb-fab { display: none; }   /* the FAB is the "open" affordance */

@media (min-width: 1000px) {
  body.reader-open.nb-open .reader-overlay {
    justify-content: flex-start;
    pointer-events: none;            /* gutter clicks fall through; cards stay live */
  }
  body.reader-open.nb-open .nb-overlay {
    justify-content: flex-end;
    pointer-events: none;
    background: none;                /* one shared dim from the reader overlay */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body.reader-open.nb-open .reader,
  body.reader-open.nb-open .notebook {
    pointer-events: auto;
    width: min(48vw, 740px);
  }
}