/* Studora — non-critical stylesheet. Loaded asynchronously after first paint.
 * Contains every component and page that isn't part of the above-the-fold bundle. */

/* ==== components/user-menu.css ==== */
.nb-user{position:relative}
.nb-user-btn{
  display:inline-flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;
  border:1.5px solid var(--ink);background:var(--paper);border-radius:999px;
  font-family:var(--mono);font-size:12.5px;font-weight:600;cursor:pointer;
  transition:transform .12s, box-shadow .12s;
}
.nb-user-btn:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow-pop)}
.nb-avatar{
  width:28px;height:28px;border-radius:50%;background:var(--yellow);
  display:grid;place-items:center;font-family:var(--sans);font-weight:800;
  font-size:13px;overflow:hidden;border:1.5px solid var(--ink);flex-shrink:0;
}
.nb-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.nb-user-name{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:640px){.nb-user-name{display:none}}

.nb-user-pop{
  position:absolute;top:calc(100% + 8px);right:0;
  min-width:240px;background:var(--paper);border:1.5px solid var(--ink);
  border-radius:6px;padding:6px;display:none;flex-direction:column;
  box-shadow:var(--shadow-pop);z-index:60;
}
.nb-user.open .nb-user-pop{display:flex}
.nb-user-id{padding:10px 12px;border-bottom:1px dashed var(--rule-ink);margin-bottom:6px}
.nb-user-name-full{font-family:var(--sans);font-size:14px;font-weight:700;color:var(--ink)}
.nb-user-email{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:2px;overflow:hidden;text-overflow:ellipsis}
.nb-user-pop button{
  text-align:left;padding:8px 12px;border-radius:4px;
  font-family:var(--mono);font-size:12.5px;color:var(--ink);cursor:pointer;
  border:0;background:none;
}
.nb-user-pop button:hover{background:var(--yellow)}

/* ==== components/search.css ==== */
/* Hero search bar */
.nb-search{
  display:flex;gap:0;max-width:680px;border:1.5px solid var(--ink);
  background:var(--paper);border-radius:8px;position:relative;
  /* No overflow:hidden — the .nb-sdrop child positions absolutely beneath. */
}
.nb-search.nb-search-wide{max-width:none;width:100%}
.nb-search::before{
  content:"";position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;flex-shrink:0;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b7c84' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-4-4'/></svg>");
  background-repeat:no-repeat;background-size:contain;
}
.nb-search input{
  flex:1;border:0;outline:0;background:transparent;font:inherit;
  font-size:15px;padding:14px 18px 14px 42px;
  font-family:var(--mono);color:var(--ink);border-radius:6px 0 0 6px;
}
.nb-search input::placeholder{color:var(--ink-3)}
.nb-search button{
  background:var(--ink);color:var(--paper);padding:0 22px;
  font-family:var(--mono);font-weight:600;font-size:13px;flex-shrink:0;
  border:0;cursor:pointer;letter-spacing:.04em;border-radius:0 6px 6px 0;
}
.nb-search button:hover{background:#000}

/* ─── Results panel ─────────────────────────────────────────────────────── */
.nb-sdrop{
  position:absolute;top:calc(100% + 8px);left:0;right:0;
  background:var(--paper);border:1.5px solid var(--ink);
  z-index:60;max-height:520px;overflow-y:auto;
  border-radius:10px;box-shadow:3px 3px 0 var(--ink);
  padding:10px;animation:nbRise .22s ease-out;
}
.nb-sdrop::-webkit-scrollbar{width:8px}
.nb-sdrop::-webkit-scrollbar-thumb{background:var(--rule-ink);border-radius:4px}

/* group of results — feels like a notebook section */
.nb-sgrp{margin:0;padding:6px 0 8px}
.nb-sgrp + .nb-sgrp{margin-top:6px;border-top:1px dashed var(--rule-ink);padding-top:10px}
.nb-sgrp-h{
  display:flex;justify-content:space-between;align-items:center;
  padding:4px 10px 8px;font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}
.nb-sgrp-h .n{
  display:inline-flex;align-items:center;gap:5px;
  padding:2px 8px;border-radius:999px;background:var(--paper-2);
  color:var(--ink-2);font-weight:700;letter-spacing:.04em;
  text-transform:none;font-size:10.5px;
}

/* row — paper card with hover lift */
.nb-srow{
  display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;
  padding:10px 12px;margin:3px 0;border-radius:8px;
  text-decoration:none;color:var(--ink);cursor:pointer;
  border:1.5px solid transparent;background:transparent;
  transition:background .12s, border-color .12s, transform .12s, box-shadow .12s;
}
.nb-srow:hover, .nb-srow:focus-visible{
  background:var(--paper);border-color:var(--ink);
  transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--ink);
  outline:none;
}
.nb-srow .ico{
  width:34px;height:34px;display:grid;place-items:center;
  border:1.5px solid var(--ink);border-radius:7px;background:var(--paper-2);
  color:var(--ink-2);flex-shrink:0;
}
.nb-srow .ico svg{width:18px;height:18px}
.nb-srow .ico img{width:24px;height:24px;object-fit:contain;display:block}

/* kind-specific icon backgrounds — subtle colour cue */
.nb-srow[data-kind="subject"]  .ico{background:var(--mint)}
.nb-srow[data-kind="exam"]     .ico{background:var(--sky)}
.nb-srow[data-kind="bookmark"] .ico{background:var(--yellow)}
.nb-srow[data-kind="mcq"]      .ico{background:var(--paper-2)}

.nb-srow .t{
  font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink);
  line-height:1.4;overflow:hidden;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.nb-srow .t em{
  font-family:var(--serif);font-style:italic;font-weight:500;
  color:var(--ink-3);font-size:12.5px;margin-left:6px;
}
.nb-srow .t mark.hl{
  background:var(--yellow-2);padding:0 .15em;border-radius:3px;
  font-weight:700;color:var(--ink);
}
.nb-srow:hover .t mark.hl{background:var(--yellow)}

.nb-srow .m{
  font-family:var(--mono);font-size:10.5px;color:var(--ink-3);
  letter-spacing:.04em;flex-shrink:0;
  padding:3px 8px;border-radius:999px;border:1px solid var(--rule-ink);
  background:var(--paper);white-space:nowrap;
}
.nb-srow[data-kind="bookmark"] .m{background:var(--yellow);color:var(--ink);border-color:var(--ink)}

.nb-srow-empty{
  padding:18px 14px;font-family:var(--serif);font-style:italic;
  font-size:14px;color:var(--ink-3);text-align:center;
}

/* Mobile — drop the right-side chip, keep icon + text */
@media(max-width:560px){
  .nb-search input{font-size:14px;padding-left:38px}
  .nb-search button{padding:0 14px}
  .nb-srow{grid-template-columns:30px 1fr;gap:10px;padding:8px 10px}
  .nb-srow .ico{width:30px;height:30px}
  .nb-srow .ico svg{width:16px;height:16px}
  .nb-srow .m{display:none}
}

/* ==== components/exam-table.css ==== */
.nb-exams{border:1.5px solid var(--ink);background:var(--paper)}
.nb-exams .row{display:grid;grid-template-columns:80px 1.2fr 2fr 1fr 1fr 100px;border-bottom:1px solid var(--rule-ink);padding:0;align-items:center;text-decoration:none;color:inherit;transition:background .15s;cursor:pointer}
/* Compact 5-column variant (home page) — drops the "next sitting" column */
.nb-exams.compact .row{grid-template-columns:80px 1.2fr 2fr 1fr 100px}
.nb-exams .row:last-child{border-bottom:0}
.nb-exams .row.head{background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.14em;font-weight:600;cursor:default}
.nb-exams .row.head > div{padding:10px 14px}
.nb-exams .row:not(.head):hover{background:var(--paper-2)}
.nb-exams .row > div{padding:14px}
.nb-exams .row .n{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.nb-exams .row h3{margin:0;font-size:20px;font-weight:800;letter-spacing:-.015em}
.nb-exams .row .tag{font-family:var(--serif);font-style:italic;color:var(--ink-2);font-size:14px}
.nb-exams .row .count{font-family:var(--mono);font-size:14px;font-weight:600}
.nb-exams .row .season{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.nb-exams .row .go{font-family:var(--mono);font-size:12px;color:var(--ink);font-weight:600;text-align:right}
.nb-exams .row .go::after{content:"→";margin-left:4px;display:inline-block;transition:transform .2s}
.nb-exams .row:not(.head):hover .go::after{transform:translateX(3px)}
@media(max-width:900px){
  .nb-exams .row,.nb-exams.compact .row{grid-template-columns:60px 1fr 80px}
  .nb-exams .row > div.tag,.nb-exams .row > div.season,.nb-exams .row > div.count{display:none}
}

/* ==== components/category-grid.css ==== */
.nb-cats{background:var(--paper);border:1.5px solid var(--ink);padding:0;columns:3;column-gap:0;column-rule:1px dashed var(--rule-ink)}
@media(max-width:800px){.nb-cats{columns:2}}
@media(max-width:500px){.nb-cats{columns:1}}
.nb-cats a{display:flex;align-items:center;gap:12px;padding:12px 20px;text-decoration:none;color:inherit;break-inside:avoid;border-bottom:1px dashed var(--rule-ink);transition:background .15s;cursor:pointer}
.nb-cats a:hover{background:var(--yellow)}
/* Subject icons are full-colour illustrations under /assets/img/subject-icons/.
   Bumped from 24px to 38px so the artwork reads at a glance without
   crowding the title. The svg rule below is kept for any legacy caller
   that still returns the inline stroke icon set. */
.nb-cats a .ico{width:38px;height:38px;color:var(--ink-2);flex-shrink:0;display:flex;align-items:center;justify-content:center}
.nb-cats a .ico img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .18s ease}
.nb-cats a:hover .ico img{transform:scale(1.08) rotate(-3deg)}
.nb-cats a .ico svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.nb-cats a h4{margin:0;font-size:14.5px;font-weight:600;flex:1}
.nb-cats a span{font-family:var(--mono);font-size:11px;color:var(--ink-3)}

/* Topic-mastery margin annotation (#57). Italic small-caps in Fraunces —
 * reads like a quiet hand-written note in the right margin, not a badge.
 * Resting "untouched" state is muted; once the visitor has any history on
 * the subject the label deepens to --ink-2 so it gains a little weight
 * without ever shouting (no colour, no glow, no progress bars). */
.nb-cats a .mastery-label{
  font-family:var(--serif);
  font-style:italic;
  font-variant-caps:all-small-caps;
  letter-spacing:.06em;
  font-size:11.5px;
  font-weight:500;
  color:var(--ink-2);
  flex-shrink:0;
  margin-right:6px;
}
.nb-cats a .mastery-label.is-untouched{color:var(--ink-3);font-weight:400}

/* ==== components/daily.css ==== */
.nb-daily-wrap{display:grid;grid-template-columns:1fr 340px;gap:24px}
@media(max-width:780px){.nb-daily-wrap{grid-template-columns:1fr}}

.nb-daily{border:1.5px solid var(--ink);background:var(--paper);padding:0}
.nb-daily .head{background:var(--yellow);padding:14px 20px;border-bottom:1.5px solid var(--ink);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.nb-daily .head h3{margin:0;font-size:18px;font-weight:800;letter-spacing:-.015em}
.nb-daily .head .live{font-family:var(--mono);font-size:11px;color:var(--green);display:flex;align-items:center;gap:6px}
.nb-daily .head .live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0;animation:nbPulse 2s infinite}
.nb-daily .item{padding:14px 20px;border-bottom:1px dashed var(--rule-ink)}
.nb-daily .item:last-child{border-bottom:0}
.nb-daily .item .date{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-bottom:4px;text-transform:uppercase;letter-spacing:.1em}
.nb-daily .item q{quotes:none;font-family:var(--serif);font-size:17px;font-style:italic;line-height:1.4;color:var(--ink)}

.nb-qod{background:var(--ink);color:var(--paper);border:1.5px solid var(--ink);padding:30px;display:flex;flex-direction:column;gap:14px;justify-content:space-between}
.nb-qod h3{margin:0;font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.nb-qod h3 em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--yellow)}
.nb-qod p{margin:0;font-family:var(--serif);font-style:italic;font-size:15px;color:#bfbfc5}
.nb-qod button{background:var(--yellow);color:var(--ink);padding:12px 22px;font-family:var(--mono);font-weight:700;font-size:13px;text-decoration:none;display:inline-block;align-self:flex-start;border:1.5px solid rgba(255,255,255,.2);transition:transform .15s,box-shadow .15s;cursor:pointer;border-radius:6px;letter-spacing:.04em}
.nb-qod button:hover{transform:translate(-1px,-1px);box-shadow:2px 2px 0 rgba(255,255,255,.3)}

/* ==== components/qotd.css ==== */
/* Question of the day — calm notebook-margin card. Lives on the home page
 * directly above "Today's notes". Mirrors the visual language of .nb-mcq
 * (border, paper background, mono caption, serif italics for warmth) but
 * sits on its own without a quiz toolbar. */

.nb-qotd{
  border:1.5px solid var(--ink);
  background:var(--paper);
  border-left:4px solid var(--ink);
  border-radius:0 4px 4px 0;
  box-shadow:var(--shadow-pop);
  /* +2px top padding gives the italic heading more breathing room from the border. */
  padding:20px 22px 20px;
  margin:0 0 22px;
  position:relative;
  animation:nbPageIn .25s ease both;
}

/* Hand-drawn paperclip flourish in the top-right corner. Two thin ink arcs
 * rendered with border + border-radius, no images, no extra requests. The
 * inner span is the open mouth of the clip. */
.nb-qotd::before{
  content:"";
  position:absolute;
  top:-6px;
  right:18px;
  width:14px;
  height:30px;
  border:1.25px solid var(--ink-3);
  border-radius:8px 8px 6px 6px;
  background:transparent;
  pointer-events:none;
  opacity:.55;
}
.nb-qotd::after{
  content:"";
  position:absolute;
  top:-1px;
  right:21.5px;
  width:7px;
  height:18px;
  border:1.25px solid var(--ink-3);
  border-top:0;
  border-radius:0 0 4px 4px;
  background:transparent;
  pointer-events:none;
  opacity:.55;
}

/* Subtle lift on hover so the card feels physical without losing its calm.
 * Wrapped in no-preference so reduced-motion users see a static card. */
@media (prefers-reduced-motion: no-preference){
  .nb-qotd{transition:transform .15s ease, box-shadow .15s ease}
  .nb-qotd:hover{
    transform:translateY(-1px);
    box-shadow:4px 4px 0 var(--ink);
  }
}

.nb-qotd-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
  padding-bottom:10px;
  border-bottom:1px dashed var(--rule-ink);
}
.nb-qotd-head h3{
  margin:0;
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:24px;
  letter-spacing:-.015em;
  color:var(--ink);
  line-height:1.1;
}
.nb-qotd-head h3 em{
  font-style:italic;
  color:var(--ink-2);
}
.nb-qotd-date{
  font-family:var(--mono);
  font-size:11px;
  color:var(--ink-3);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.nb-qotd-cat{
  font-family:var(--mono);
  font-size:11px;
  color:var(--ink-3);
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:6px;
}

.nb-qotd-q{
  margin:0 0 14px;
  font-size:17px;
  font-weight:600;
  line-height:1.4;
  letter-spacing:-.005em;
  color:var(--ink);
}

.nb-qotd-opts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:0 0 12px;
}
@media(max-width:600px){
  .nb-qotd-opts{grid-template-columns:1fr}
}

/* Pill-shaped option buttons — reset native button chrome, lean on the
 * paper/ink token pair so they read as part of the notebook surface. */
.nb-qotd-opt{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 14px;
  border:1.5px solid var(--rule-ink);
  border-radius:999px;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:14.5px;
  text-align:left;
  cursor:pointer;
  transition:border-color .18s,background .18s,transform .12s;
  font:inherit;
  width:100%;
}
.nb-qotd-opt:hover:not(:disabled){
  border-color:var(--ink);
  background:var(--paper-2);
}
/* Brand-yellow focus ring matches the skip-link pattern — high contrast on
 * paper, still inside the notebook palette. */
.nb-qotd-opt:focus-visible{
  outline:2px solid var(--yellow);
  outline-offset:2px;
}
.nb-qotd-opt:disabled{cursor:default}

.nb-qotd-opt .k{
  width:24px;
  height:24px;
  flex-shrink:0;
  border:1.5px solid var(--ink);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  background:var(--paper);
}
.nb-qotd-opt .txt{
  flex:1;
  line-height:1.35;
}

/* Answered states — same palette tokens as .nb-mcq so the two cards feel
 * cut from the same notebook. */
.nb-qotd-opt.correct{
  background:var(--mint);
  border-color:var(--green);
}
.nb-qotd-opt.correct .k{
  background:var(--green);
  color:var(--paper);
  border-color:var(--green);
}
.nb-qotd-opt.wrong{
  background:var(--blush);
  border-color:var(--red);
}
.nb-qotd-opt.wrong .k{
  background:var(--red);
  color:var(--paper);
  border-color:var(--red);
}
.nb-qotd-opt.picked{
  font-weight:600;
}

.nb-qotd-foot{
  margin:8px 0 0;
  font-family:var(--serif);
  font-size:14px;
  font-style:italic;
  color:var(--ink-2);
  line-height:1.45;
}
.nb-qotd-foot strong{
  font-family:var(--sans);
  font-style:normal;
  font-weight:700;
  color:var(--ink);
}
.nb-qotd-foot.ok{color:var(--ink)}
.nb-qotd-foot.no{color:var(--ink)}
.nb-qotd-foot.hint{color:var(--ink-3)}

.nb-qotd-err{
  margin:8px 0 0;
  font-family:var(--serif);
  font-style:italic;
  font-size:14px;
  color:var(--ink-3);
}

/* Loading skeleton — quiet shimmer in the paper palette, no flash. */
.nb-qotd-skel{display:grid;gap:9px}
.nb-qotd-skel .line,
.nb-qotd-skel .opt{
  height:14px;
  border-radius:4px;
  background:linear-gradient(90deg,var(--paper-2) 0%,var(--rule) 50%,var(--paper-2) 100%);
  background-size:200% 100%;
  animation:nbShimmer 1.4s linear infinite;
}
.nb-qotd-skel .line.w90{width:90%}
.nb-qotd-skel .line.w70{width:70%;margin-bottom:6px}
.nb-qotd-skel .opt{height:38px;border-radius:999px}

@keyframes nbShimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
@media (prefers-reduced-motion: reduce){
  .nb-qotd{animation:none}
  .nb-qotd-skel .line,
  .nb-qotd-skel .opt{animation:none}
}

/* ==== components/quick-quiz.css ==== */
/* Quick-quiz builder — single-step "make me a quiz" card that sits on the
 * home page directly below the Question of the Day. Visual language mirrors
 * .nb-qotd so the two cards read as a pair: same paper background, ink
 * border, ink-shadow pop, dashed-rule header divider. */

.nb-qq{
  border:1.5px solid var(--ink);
  background:var(--paper);
  border-left:4px solid var(--ink);
  border-radius:0 4px 4px 0;
  box-shadow:var(--shadow-pop);
  /* +2px top padding so the italic heading isn't crowded by the border. */
  padding:20px 22px 20px;
  margin:0 0 22px;
  position:relative;
  animation:nbPageIn .25s ease both;
  /* Required so the folded-corner pseudo-element clips at the card edge. */
  overflow:hidden;
}

/* Folded note-card corner in the top-right — a small triangle made by
 * stacking two borders on a 14px square. Quiet yellow tint of the paper
 * palette so it reads as a dog-ear rather than a sticker. */
.nb-qq::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:0;
  height:0;
  border-style:solid;
  border-width:0 14px 14px 0;
  border-color:transparent var(--yellow-2) transparent transparent;
  pointer-events:none;
}
.nb-qq::before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:14px;
  height:14px;
  /* Thin diagonal ink line traces the fold so it reads as hand-drawn. */
  background:linear-gradient(45deg,transparent 46%,var(--ink-3) 46%,var(--ink-3) 54%,transparent 54%);
  pointer-events:none;
  opacity:.5;
}

/* Subtle paper-lift on hover — same idiom as the QOTD card so the two read
 * as a pair. Reduced-motion users get a static card. */
@media (prefers-reduced-motion: no-preference){
  .nb-qq{transition:transform .15s ease, box-shadow .15s ease}
  .nb-qq:hover{
    transform:translateY(-1px);
    box-shadow:4px 4px 0 var(--ink);
  }
}

.nb-qq-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:16px;
  padding-bottom:10px;
  border-bottom:1px dashed var(--rule-ink);
}
.nb-qq-head h3{
  margin:0;
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:24px;
  letter-spacing:-.015em;
  color:var(--ink);
  line-height:1.1;
}
.nb-qq-head h3 em{
  font-style:italic;
  color:var(--ink-2);
}
.nb-qq-cap{
  font-family:var(--mono);
  font-size:11px;
  color:var(--ink-3);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.nb-qq-form{
  display:flex;
  align-items:flex-end;
  gap:14px;
  flex-wrap:wrap;
}

.nb-qq-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.nb-qq-field:first-child{flex:1 1 220px}

.nb-qq-label{
  font-family:var(--mono);
  font-size:10.5px;
  color:var(--ink-3);
  letter-spacing:.12em;
  text-transform:uppercase;
}

.nb-qq-select{
  width:100%;
  appearance:none;
  -webkit-appearance:none;
  padding:10px 36px 10px 14px;
  border:1.5px solid var(--ink);
  border-radius:var(--radius);
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:14.5px;
  line-height:1.2;
  cursor:pointer;
  /* Chevron drawn in SVG so it matches the ink palette without an image. */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2317181c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:14px 14px;
  transition:box-shadow .12s,transform .12s;
}
.nb-qq-select:hover{
  transform:translate(-1px,-1px);
  box-shadow:var(--shadow-pop);
}
/* Brand-yellow focus ring matches the skip-link pattern site-wide. */
.nb-qq-select:focus-visible{
  outline:2px solid var(--yellow);
  outline-offset:2px;
}

.nb-qq-counts{
  display:inline-flex;
  border:1.5px solid var(--ink);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--paper);
}
.nb-qq-count{
  appearance:none;
  border:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--mono);
  font-size:13px;
  font-weight:600;
  padding:10px 16px;
  cursor:pointer;
  min-width:48px;
  border-right:1.5px solid var(--ink);
  transition:background .12s,color .12s;
}
.nb-qq-count:last-child{border-right:0}
.nb-qq-count:hover:not(.on){background:var(--paper-2)}
.nb-qq-count.on,
.nb-qq-count[aria-checked="true"]{
  background:var(--ink);
  color:var(--paper);
}
.nb-qq-count:focus-visible{
  outline:2px solid var(--yellow);
  outline-offset:2px;
  position:relative;
  z-index:1;
}

.nb-qq-go{
  /* Anchor the start button to the right when there's room — it stays the
   * single visual call-to-action even when the form wraps. */
  margin-left:auto;
}

/* Under 600px the form stacks: dropdown full-width, counts on their own row,
 * primary button hugs the right. Matches the QOTD card's mobile rhythm. */
@media (max-width:600px){
  .nb-qq-form{
    align-items:stretch;
    gap:12px;
  }
  .nb-qq-field:first-child{flex:1 1 100%}
  .nb-qq-counts{align-self:flex-start}
  .nb-qq-go{
    margin-left:0;
    align-self:flex-end;
  }
}

@media (prefers-reduced-motion: reduce){
  .nb-qq{animation:none}
  .nb-qq-select:hover{transform:none}
}

/* ==== components/mcq.css ==== */
/* MCQ card — pixel-faithful to blueprint */
.nb-mcq{
  border:1.5px solid var(--ink);background:var(--paper);
  padding:20px 22px;margin-bottom:14px;position:relative;
  border-left:4px solid var(--ink);border-radius:0 4px 4px 0;
  animation:nbPageIn .25s ease both;
}
.nb-mcq.has-pin{overflow:visible}
.nb-mcq .qn{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.nb-mcq .qtx{font-size:17px;font-weight:600;margin:0 0 14px;letter-spacing:-.005em;line-height:1.4;color:var(--ink)}

.nb-mcq .opts{list-style:none;padding:0;margin:0;display:grid;gap:7px}
.nb-mcq .opts li{margin:0;padding:0;list-style:none;background:transparent}
.nb-mcq .opts li button.opt{
  width:100%;text-align:left;font:inherit;color:inherit;
  padding:11px 14px;border:1.5px solid var(--rule-ink);border-radius:4px;
  font-size:14.5px;display:flex;gap:12px;align-items:center;
  background:var(--paper);cursor:pointer;transition:.18s;user-select:none;
}
.nb-mcq .opts li button.opt:hover{border-color:var(--ink);background:var(--paper-2)}
.nb-mcq .opts li button.opt:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.nb-mcq .opts li button.opt .k{
  width:24px;height:24px;border:1.5px solid var(--ink);
  display:grid;place-items:center;font-family:var(--mono);font-size:11px;font-weight:700;
  flex-shrink:0;border-radius:3px;text-transform:uppercase;
}

/* Study mode (default): pre-highlight correct */
.nb-mcq:not(.test) .opts li.correct button.opt{background:var(--mint);border-color:var(--green)}
.nb-mcq:not(.test) .opts li.correct button.opt .k{background:var(--green);color:var(--paper);border-color:var(--green)}

/* Test mode: hide answers until pick */
.nb-mcq.test .opts li.picked.correct button.opt{background:var(--mint);border-color:var(--green);animation:nbSpring .45s cubic-bezier(.2,1.6,.3,1)}
.nb-mcq.test .opts li.picked.correct button.opt .k{background:var(--green);color:var(--paper);border-color:var(--green)}
.nb-mcq.test .opts li.picked.wrong button.opt{background:var(--blush);border-color:var(--red);animation:nbShake .35s}
.nb-mcq.test .opts li.picked.wrong button.opt .k{background:var(--red);color:var(--paper);border-color:var(--red)}
.nb-mcq.test.answered .opts li.correct:not(.picked) button.opt{border-color:var(--green);background:var(--mint);transition:background .3s ease .2s, border-color .3s ease .2s}
.nb-mcq.test.answered .opts li button.opt{cursor:default;pointer-events:none}

.nb-mcq .tools{
  display:flex;gap:14px;font-family:var(--mono);font-size:11px;color:var(--ink-3);
  margin-top:10px;text-transform:uppercase;letter-spacing:.08em;flex-wrap:wrap;
}
.nb-mcq .tools button{
  display:inline-flex;align-items:center;gap:5px;color:inherit;cursor:pointer;
  border-bottom:1px solid var(--rule-ink);padding:0;background:none;font:inherit;
  letter-spacing:inherit;text-transform:inherit;
}
.nb-mcq .tools button:hover{color:var(--ink);border-color:var(--ink)}
.nb-mcq .tools button.on{color:var(--ink);border-color:var(--ink);font-weight:700}
.nb-mcq .tools svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nb-mcq .tools .streak{margin-left:auto;color:var(--ink-2);border:0}
.nb-mcq .tools .streak b{color:var(--red);font-family:var(--sans);font-weight:800}

/* margin sticker (PB / teacher's note) */
.nb-mcq .nb-margin-note{
  position:absolute;left:-12px;top:14px;transform:translateX(-100%);
  background:var(--sky);border:1.5px solid var(--ink);padding:8px 12px;
  max-width:240px;font-family:var(--serif);font-style:italic;font-size:14px;
  border-radius:4px;animation:nbSlideIn .35s both;box-shadow:var(--shadow-pop);z-index:3;
}
@media(max-width:1100px){.nb-mcq .nb-margin-note{position:static;transform:none;display:block;margin:0 0 10px;max-width:none}}

/* toolbar above MCQ list */
.nb-toolbar{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  padding:12px 16px;border:1.5px solid var(--ink);background:var(--paper);
  margin-bottom:18px;font-family:var(--mono);font-size:12px;border-radius:6px;
}
.nb-toolbar .streak{color:var(--ink-3);display:flex;align-items:center;gap:6px}
.nb-toolbar .streak b{color:var(--red);font-family:var(--sans);font-size:16px;font-weight:800}
.nb-toolbar .streak b.bump{display:inline-block;animation:nbWobble .25s}

/* test-mode toggle */
.nb-testmode{
  display:inline-flex;align-items:center;gap:10px;padding:8px 14px;
  border:1.5px solid var(--ink);background:var(--paper);
  font-family:var(--mono);font-size:12px;font-weight:600;cursor:pointer;
  text-decoration:none;color:var(--ink);border-radius:6px;transition:background .15s;
}
.nb-testmode .sw{
  width:30px;height:16px;border:1.5px solid var(--ink);border-radius:999px;
  position:relative;transition:.25s;background:var(--paper);flex-shrink:0;
}
.nb-testmode .sw::before{
  content:"";position:absolute;top:1px;left:1px;width:10px;height:10px;
  border-radius:50%;background:var(--ink);transition:.25s;
}
.nb-testmode.on{background:var(--yellow)}
.nb-testmode.on .sw{background:var(--ink)}
.nb-testmode.on .sw::before{left:16px;background:var(--yellow)}

/* toolbar action cluster — download pdf + test-mode share a row */
.nb-toolbar-actions{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.nb-toolbar-actions .nb-btn svg{flex-shrink:0}

/* Card state once a report has been accepted — dim the report button. */
.nb-mcq .rp:disabled{opacity:.55;cursor:default}
.nb-mcq.reported .rp{color:var(--green)}

/* ==== components/pagination.css ==== */
.nb-pag{display:flex;gap:0;justify-content:center;padding:30px 0 10px;font-family:var(--mono);flex-wrap:wrap}
.nb-pag a,.nb-pag button,.nb-pag span{min-width:40px;height:40px;display:grid;place-items:center;border:1.5px solid var(--ink);border-right:0;font-size:13px;font-weight:600;text-decoration:none;color:var(--ink);padding:0 10px;background:var(--paper);cursor:pointer}
.nb-pag > *:last-child{border-right:1.5px solid var(--ink)}
.nb-pag .cur{background:var(--ink);color:var(--paper)}
.nb-pag .dots{background:transparent;cursor:default}
.nb-pag button:disabled{opacity:.35;cursor:default}
.nb-pag button:not(:disabled):not(.cur):hover{background:var(--paper-2)}

/* ==== components/tabs.css ==== */
.nb-tabs{display:flex;gap:0;border:1.5px solid var(--ink);overflow-x:auto;scrollbar-width:none;margin:18px 0;background:var(--paper)}
.nb-tabs::-webkit-scrollbar{display:none}
.nb-tabs button{padding:10px 18px;border-right:1px solid var(--rule-ink);font-family:var(--mono);font-size:12px;font-weight:600;white-space:nowrap;color:var(--ink-2);transition:.18s;background:var(--paper);cursor:pointer;border-top:0;border-bottom:0;border-left:0}
.nb-tabs button:last-child{border-right:0}
.nb-tabs button:hover{background:var(--paper-2)}
.nb-tabs button.active{background:var(--ink);color:var(--paper)}
.nb-tabs button .n{color:var(--ink-3);margin-left:6px;font-size:11px}
.nb-tabs button.active .n{color:#9a9aa0}

.nb-faq{margin:40px 0}
.nb-faq h2{font-size:26px;font-weight:800;letter-spacing:-.025em;margin:0 0 16px;padding-bottom:10px;border-bottom:1.5px solid var(--ink)}
.nb-faq details{border-bottom:1px dashed var(--rule-ink);padding:16px 0}
.nb-faq summary{font-weight:700;font-size:16px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px}
.nb-faq summary::-webkit-details-marker{display:none}
.nb-faq summary::after{content:"＋";font-family:var(--mono);font-size:18px;color:var(--ink-3);transition:transform .2s, color .2s}
.nb-faq details[open] summary::after{transform:rotate(45deg);color:var(--red)}
.nb-faq details > p{margin:10px 0 0;font-family:var(--serif);font-size:16px;font-style:italic;color:var(--ink-2);line-height:1.5}

/* ==== components/login-wall.css ==== */
.nb-wall{
  position:fixed;inset:0;display:grid;place-items:center;
  z-index:100;animation:nbFade .3s;padding:20px;
  background:rgba(22,22,26,.42);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nb-wall{background:rgba(22,22,26,.6)}
}
.nb-wall-card{background:var(--paper);border:2px solid var(--ink);padding:36px 32px;max-width:440px;width:100%;text-align:center;animation:nbRise .4s;position:relative;border-radius:6px}
.nb-wall-card::before{content:"";position:absolute;inset:-8px -8px auto auto;width:60px;height:60px;background:var(--yellow);border:1.5px solid var(--ink);transform:rotate(8deg);z-index:-1;border-radius:6px}
.nb-wall-card h3{margin:0 0 10px;font-size:26px;font-weight:800;letter-spacing:-.02em}
.nb-wall-card h3 em{font-family:var(--serif);font-style:italic;font-weight:500}
.nb-wall-card p{margin:0 0 24px;color:var(--ink-2);font-family:var(--serif);font-style:italic;font-size:16px;line-height:1.5}
.nb-wall-card .si{display:grid;gap:8px}
.nb-wall-card .si button{padding:12px;border:1.5px solid var(--ink);font-family:var(--mono);font-weight:600;font-size:13px;display:flex;justify-content:center;gap:10px;align-items:center;background:var(--paper);transition:transform .12s,box-shadow .12s;cursor:pointer;border-radius:6px}
.nb-wall-card .si button:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow-pop)}
.nb-wall-card .si button:disabled{opacity:.6;cursor:wait}
.nb-wall-card .si .p{background:var(--ink);color:var(--paper)}
.nb-wall-card .fi{margin-top:18px;font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.05em}

/* Hard variant — replaces the entire #app. No dismiss, no escape.
   Same visual language as the download modal: paper card, ink border,
   yellow corner sticker, structured sections. */
.nb-wall.is-hard{
  position:fixed;inset:0;width:100vw;height:100vh;
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
  background:linear-gradient(135deg,var(--paper) 0%,var(--paper-2) 100%);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  padding:0;overflow-y:auto;
}
.nb-wall.is-hard::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(transparent 31px,var(--rule) 31px,var(--rule) 32px,transparent 32px);
  background-size:100% 32px;opacity:.5;pointer-events:none;
}

/* minimal top strip — logo only, no nav. The visitor cannot escape. */
.nb-wall-top{
  position:relative;z-index:2;
  border-bottom:1.5px solid var(--ink);background:var(--paper);
  padding:14px 24px;
}

/* centred content area */
.nb-wall-main{
  flex:1;display:grid;place-items:center;padding:36px 20px 48px;
  position:relative;z-index:1;
}

/* the card itself — mirrors .nb-dl-card */
.nb-wall.is-hard .nb-wall-card{
  max-width:520px;width:100%;padding:36px 36px 28px;text-align:left;
  position:relative;
}
@media(max-width:560px){.nb-wall.is-hard .nb-wall-card{padding:26px 22px}}

.nb-wall-tag{
  display:inline-block;padding:5px 11px;margin-bottom:14px;
  border:1.5px solid var(--ink);border-radius:999px;background:var(--yellow);
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);
}

.nb-wall.is-hard h3{
  font-size:28px;margin:0 0 10px;letter-spacing:-.02em;line-height:1.1;
}
.nb-wall.is-hard h3 em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--ink-2)}

.nb-wall-sub{
  margin:0 0 22px;color:var(--ink-2);font-family:var(--serif);
  font-style:italic;font-size:15.5px;line-height:1.55;
}

/* perks list — checkmark + plain copy, no card chrome */
.nb-wall-perks{
  list-style:none;padding:14px 16px;margin:0 0 22px;
  border:1.5px dashed var(--ink);border-radius:8px;background:var(--paper-2);
  display:flex;flex-direction:column;gap:10px;
}
.nb-wall-perks li{
  display:flex;align-items:flex-start;gap:11px;
  font-family:var(--sans);font-size:14px;color:var(--ink-2);line-height:1.45;
}
.nb-wall-perks li b{color:var(--ink);font-weight:700}
.nb-wall-perks .ck{
  width:22px;height:22px;flex-shrink:0;display:grid;place-items:center;
  border-radius:50%;background:var(--mint);color:var(--green);margin-top:1px;
  border:1.5px solid var(--green);
}

/* primary CTA — full-width, ink fill, hover lift */
.nb-wall-cta{
  width:100%;padding:14px 18px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  border:1.5px solid var(--ink);border-radius:8px;
  background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-weight:600;font-size:13.5px;letter-spacing:.02em;
  cursor:pointer;transition:transform .12s,box-shadow .12s,opacity .12s;
}
.nb-wall-cta:hover{transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--ink-3)}
.nb-wall-cta:active{transform:translate(0,0);box-shadow:none}
.nb-wall-cta:disabled{opacity:.65;cursor:wait}

.nb-wall-fine{
  margin:14px 0 0;text-align:center;
  font-family:var(--mono);font-size:11px;color:var(--ink-3);
  letter-spacing:.05em;font-style:normal;
}

/* ==== components/share-result.css ==== */
/* Share result panel (v2) — premium, brand-aligned scorecard sharer.
   Sits below the end-of-session card on quiz / exam pages. Reuses the
   notebook aesthetic: ink border, paper background, yellow corner sticker,
   mono chrome, Fraunces-italic for emotion. Adds: PNG preview, 7-channel
   share strip, native share sheet, download + caption utilities. */

.nb-share{margin:24px 0 36px;animation:nbRise .28s ease-out}

.nb-share-card.nb-share-v2{
  background:var(--paper);
  border:1.5px solid var(--ink);
  border-radius:10px;
  padding:28px 28px 24px;
  max-width:920px;margin:0 auto;
  position:relative;
  box-shadow:3px 3px 0 var(--ink);
}
.nb-share-card.nb-share-v2::before{
  content:"";position:absolute;
  inset:-9px -9px auto auto;
  width:56px;height:56px;
  background:var(--yellow);
  border:1.5px solid var(--ink);
  transform:rotate(8deg);
  z-index:-1;border-radius:6px;
}
.nb-share-card.nb-share-v2::after{
  content:"";position:absolute;
  inset:auto auto -8px -8px;
  width:46px;height:46px;
  background:var(--mint);
  border:1.5px solid var(--ink);
  transform:rotate(-7deg);
  z-index:-1;border-radius:6px;
}

@media(max-width:640px){
  .nb-share-card.nb-share-v2{padding:22px 18px 18px;border-radius:8px}
  .nb-share-card.nb-share-v2::before{width:42px;height:42px;inset:-6px -6px auto auto}
}

/* ---- Header ---- */
.nb-share-head{margin-bottom:18px}

.nb-share-tag{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 12px;margin-bottom:14px;
  border:1.5px solid var(--ink);border-radius:999px;background:var(--paper-2);
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);
}
.nb-share-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--ink-3);
}
.nb-share-green .nb-share-dot{background:var(--green)}
.nb-share-amber .nb-share-dot{background:#b88a2a}
.nb-share-ochre .nb-share-dot{background:#7a4a2a}
.nb-share-red   .nb-share-dot{background:var(--red)}

.nb-share-card h3{
  margin:0 0 8px;font-family:var(--sans);font-weight:800;
  font-size:26px;letter-spacing:-.02em;line-height:1.15;color:var(--ink);
}
.nb-share-card h3 em{
  font-family:var(--serif);font-style:italic;font-weight:500;color:var(--ink-2);
}

.nb-share-sub{
  margin:0;color:var(--ink-2);
  font-family:var(--serif);font-style:italic;font-size:16px;line-height:1.55;
  max-width:640px;
}
.nb-share-sub em{font-style:italic;color:var(--ink);font-weight:500}

/* ---- Hero: preview + side panel ---- */
.nb-share-hero{
  display:grid;grid-template-columns:1.2fr .8fr;gap:18px;
  margin:20px 0 18px;
}
@media(max-width:780px){.nb-share-hero{grid-template-columns:1fr}}

.nb-share-preview{
  margin:0;border:1.5px solid var(--ink);border-radius:8px;
  background:var(--paper-2);overflow:hidden;
  box-shadow:2px 2px 0 var(--ink);
}
.nb-share-preview img{
  display:block;width:100%;height:auto;background:var(--paper-2);
  /* The fetch isn't always instant; a soft skeleton keeps the layout calm. */
  min-height:140px;
}
.nb-share-preview figcaption{
  display:flex;justify-content:space-between;align-items:center;
  padding:9px 13px;border-top:1.5px solid var(--ink);background:var(--paper);
  font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.06em;
}
.nb-share-preview figcaption a{
  color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--ink-3);font-weight:600;
}
.nb-share-preview figcaption a:hover{border-bottom-color:var(--ink)}

.nb-share-side{display:flex;flex-direction:column;gap:14px}

.nb-share-statgrid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:8px;
}
.nb-share-statgrid .ss{
  border:1.5px solid var(--ink);border-radius:8px;background:var(--paper-2);
  padding:12px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;
}
.nb-share-statgrid .ss b{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:28px;letter-spacing:-.02em;line-height:1;color:var(--ink);
}
.nb-share-statgrid .ss b.g{color:var(--green)}
.nb-share-statgrid .ss b.r{color:var(--red)}
.nb-share-statgrid .ss b.a{color:#b88a2a}
.nb-share-statgrid .ss em{
  font-family:var(--mono);font-style:normal;font-size:10px;
  color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase;font-weight:600;
}

/* ---- URL row ---- */
.nb-share-url{
  display:flex;align-items:stretch;
  border:1.5px solid var(--ink);border-radius:8px;
  background:var(--paper);overflow:hidden;
  transition:box-shadow .12s;
}
.nb-share-url:focus-within{box-shadow:2px 2px 0 var(--ink)}

.nb-share-input{
  flex:1;min-width:0;border:0;outline:none;background:transparent;
  padding:11px 12px;
  font-family:var(--mono);font-size:12.5px;color:var(--ink-2);
  text-overflow:ellipsis;
}

.nb-share-copy{
  display:inline-flex;align-items:center;gap:8px;
  padding:0 16px;background:var(--paper-2);
  border:0;border-left:1.5px solid var(--ink);
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.04em;
  color:var(--ink);cursor:pointer;transition:background .12s;
}
.nb-share-copy:hover{background:var(--yellow)}
.nb-share-copy svg{flex-shrink:0}

/* ---- Channels grid ---- */
.nb-share-channels{
  display:grid;grid-template-columns:repeat(7,1fr);gap:8px;
  margin:0 0 14px;
}
@media(max-width:780px){.nb-share-channels{grid-template-columns:repeat(4,1fr)}}
@media(max-width:480px){.nb-share-channels{grid-template-columns:repeat(3,1fr)}}

.nb-ch{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:13px 6px;
  border:1.5px solid var(--ink);border-radius:8px;
  background:var(--paper);color:var(--ink);text-decoration:none;cursor:pointer;
  font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;text-align:center;
  transition:transform .12s,box-shadow .12s,background .12s,color .12s;
}
.nb-ch:hover{transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--ink)}
.nb-ch:active{transform:translate(0,0);box-shadow:none}
.nb-ch svg{width:22px;height:22px}
.nb-ch span{display:block}

.nb-ch-wa:hover{background:#cfe9d4}
.nb-ch-x:hover{background:var(--ink);color:var(--paper)}
.nb-ch-li:hover{background:#cfe1f5}
.nb-ch-fb:hover{background:#cfe1f5}
.nb-ch-tg:hover{background:#cfe5ef}
.nb-ch-mail:hover{background:var(--paper-2)}

.nb-ch-native{background:var(--ink);color:var(--paper)}
.nb-ch-native:hover{background:#0b0c10;color:var(--yellow)}

/* ---- Utility row (download / copy caption / open page) ---- */
.nb-share-util{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}

.nb-share-util-btn{
  flex:1;min-width:160px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 14px;
  border:1.5px solid var(--ink);border-radius:8px;background:var(--paper);
  color:var(--ink);text-decoration:none;cursor:pointer;
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.04em;
  transition:background .12s,transform .12s,box-shadow .12s;
}
.nb-share-util-btn:hover{background:var(--paper-2);transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--ink-3)}
.nb-share-util-btn svg{flex-shrink:0}

/* ---- Caption card ---- */
.nb-share-caption{
  border:1px dashed var(--ink-3);border-radius:8px;background:var(--paper-2);
  padding:14px 16px;margin:0 0 14px;
}
.nb-share-caption-label{
  display:block;margin-bottom:6px;
  font-family:var(--mono);font-size:10px;
  color:var(--ink-3);letter-spacing:.14em;text-transform:uppercase;font-weight:600;
}
.nb-share-caption p{
  margin:0;font-family:var(--serif);font-style:italic;font-size:15px;
  color:var(--ink);line-height:1.55;
}

/* ---- Foot note ---- */
.nb-share-foot{
  margin:0;color:var(--ink-3);
  font-family:var(--mono);font-size:11px;letter-spacing:.02em;
  line-height:1.55;
}

/* ---- Focus polish ---- */
.nb-share-input:focus-visible,
.nb-share-copy:focus-visible,
.nb-ch:focus-visible,
.nb-share-util-btn:focus-visible{
  outline:2px solid var(--ink-3);outline-offset:2px;
}

/* ==== components/download-modal.css ==== */
/* Download PDF modal — reuses the .nb-wall overlay, adds form-specific styles. */
.nb-wall.is-dl{overflow-y:auto;padding:20px}

.nb-dl-card{
  max-width:520px;width:100%;padding:30px 28px 26px;text-align:left;
  position:relative;
}
@media(max-width:560px){.nb-dl-card{padding:22px 18px 20px}}

.nb-dl-card h3{font-size:24px;margin:0 0 6px;text-align:left}
.nb-dl-card h3 em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--ink-2)}

.nb-dl-sub{
  margin:0 0 22px;font-family:var(--mono);font-size:12.5px;
  font-style:normal;color:var(--ink-3);letter-spacing:.02em;
}
.nb-dl-sub b{color:var(--ink);font-weight:700}

.nb-dl-close{
  position:absolute;top:14px;right:14px;width:30px;height:30px;
  display:grid;place-items:center;border:1.5px solid var(--ink);
  background:var(--paper);border-radius:6px;cursor:pointer;color:var(--ink);
  transition:transform .12s,box-shadow .12s;
}
.nb-dl-close:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow-pop)}

.nb-dl-form{display:flex;flex-direction:column;gap:18px}

/* filename field */
.nb-dl-field{display:flex;flex-direction:column;gap:6px}
.nb-dl-label{font-family:var(--mono);font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-2)}
.nb-dl-input{
  display:flex;align-items:stretch;border:1.5px solid var(--ink);
  border-radius:6px;background:var(--paper);overflow:hidden;
  transition:box-shadow .12s;
}
.nb-dl-input:focus-within{box-shadow:var(--shadow-pop)}
.nb-dl-input input{
  flex:1;border:0;outline:none;background:transparent;
  padding:11px 12px;font-family:var(--mono);font-size:13.5px;color:var(--ink);
  min-width:0;
}
.nb-dl-ext{
  display:grid;place-items:center;padding:0 12px;
  background:var(--paper-2);border-left:1.5px solid var(--ink);
  font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--ink-2);
}
.nb-dl-hint{
  font-family:var(--mono);font-size:11px;color:var(--ink-3);font-style:normal;
  line-height:1.5;
}
.nb-dl-hint b{color:var(--ink);font-weight:700}

/* mode chooser */
.nb-dl-mode{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.nb-dl-mode legend{
  font-family:var(--mono);font-size:11.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;color:var(--ink-2);margin-bottom:4px;padding:0;
}
.nb-dl-radio{
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  border:1.5px solid var(--ink);border-radius:6px;background:var(--paper);
  cursor:pointer;transition:background .12s,box-shadow .12s;
}
.nb-dl-radio:hover{box-shadow:var(--shadow-pop)}
.nb-dl-radio input{
  width:16px;height:16px;flex-shrink:0;accent-color:var(--ink);cursor:pointer;
}
.nb-dl-radio span{display:flex;flex-direction:column;gap:2px;font-family:var(--sans);font-size:14px}
.nb-dl-radio span b{font-weight:700;color:var(--ink)}
.nb-dl-radio span em{font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.nb-dl-radio:has(input:checked){background:var(--yellow)}
.nb-dl-radio:has(input:disabled){opacity:.5;cursor:not-allowed}

/* range picker */
.nb-dl-range{
  border:1.5px dashed var(--ink);border-radius:6px;padding:14px;
  background:var(--paper-2);display:flex;flex-direction:column;gap:8px;
  animation:nbFade .25s;
}
.nb-dl-range-row{display:flex;align-items:center;gap:12px}
.nb-dl-range-row input[type="range"]{flex:1;accent-color:var(--ink);cursor:pointer;min-width:0}
.nb-dl-range-row input[type="number"]{
  width:78px;flex-shrink:0;padding:8px 10px;
  border:1.5px solid var(--ink);border-radius:6px;background:var(--paper);
  font-family:var(--mono);font-size:13px;font-weight:600;text-align:center;
  -moz-appearance:textfield;outline:none;color:var(--ink);
}
.nb-dl-range-row input[type="number"]::-webkit-outer-spin-button,
.nb-dl-range-row input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0;
}
.nb-dl-range-row input[type="number"]:focus{box-shadow:var(--shadow-pop)}

/* footer actions */
.nb-dl-actions{
  display:flex;justify-content:flex-end;gap:10px;margin-top:6px;
  padding-top:14px;border-top:1px dashed var(--rule-ink);
}
.nb-dl-actions .nb-btn{padding:10px 16px;font-size:12.5px}
.nb-dl-actions .nb-btn.primary{padding:10px 18px}

@media(max-width:560px){
  .nb-dl-actions{flex-direction:column-reverse}
  .nb-dl-actions .nb-btn{width:100%;justify-content:center}
}

/* ─── Exam (multi-subject) variant ─────────────────────────────────────── */
.is-dl-exam .nb-dl-card{max-width:560px}

.nb-dle-subs{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.nb-dle-subs legend{
  display:flex;justify-content:space-between;align-items:center;width:100%;
  font-family:var(--mono);font-size:11.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;color:var(--ink-2);padding:0;margin-bottom:4px;
}
.nb-dle-bulk{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--ink-3);text-transform:none}
.nb-dle-bulk-btn{
  background:none;border:0;padding:0 2px;font:inherit;color:var(--ink-2);
  cursor:pointer;text-decoration:underline;
}
.nb-dle-bulk-btn:hover{color:var(--ink)}

.nb-dle-list{
  display:flex;flex-direction:column;gap:6px;max-height:280px;overflow-y:auto;
  border:1.5px solid var(--ink);border-radius:8px;background:var(--paper);
  padding:6px;
}
.nb-dle-list::-webkit-scrollbar{width:8px}
.nb-dle-list::-webkit-scrollbar-thumb{background:var(--rule-ink);border-radius:4px}

.nb-dle-row{
  display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:center;
  padding:8px 10px;border-radius:6px;cursor:pointer;
  border:1.5px solid transparent;transition:background .12s,border-color .12s;
}
.nb-dle-row:hover{background:var(--paper-2)}
.nb-dle-row:has(input:checked){background:var(--mint);border-color:var(--green)}
.nb-dle-row input{
  width:16px;height:16px;cursor:pointer;accent-color:var(--green);margin:0;
}
.nb-dle-row .t{
  font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--ink);
  line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.nb-dle-row .q{
  font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.04em;
  padding:2px 8px;border-radius:999px;background:var(--paper-2);
  border:1px solid var(--rule-ink);white-space:nowrap;
}
.nb-dle-row:has(input:checked) .q{background:var(--paper);border-color:var(--ink)}

/* Volume buttons — shown when the user picks the "split into volumes" mode */
.nb-dle-vols{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));margin-top:4px}
.nb-dle-vol-btn{justify-content:flex-start;padding:11px 14px;font-size:12.5px}
.nb-dle-vol-btn svg{flex-shrink:0}

/* ─── Report modal ─────────────────────────────────────────────────────── */
.is-rp .nb-rp-card{max-width:560px}

.nb-rp-preview{
  margin:0 0 16px;padding:12px 16px;border-left:3px solid var(--ink);
  background:var(--paper-2);border-radius:0 6px 6px 0;
  font-family:var(--serif);font-style:italic;font-size:14px;
  color:var(--ink-2);line-height:1.5;
}

.nb-rp-reasons{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.nb-rp-reasons legend{
  font-family:var(--mono);font-size:11.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;color:var(--ink-2);padding:0;margin-bottom:4px;
}

/* Two-column grid of reason cards, falls to one column on narrow screens. */
.nb-rp-grid{display:grid;gap:8px;grid-template-columns:1fr 1fr}
@media(max-width:520px){.nb-rp-grid{grid-template-columns:1fr}}

.nb-rp-row{
  display:grid;grid-template-columns:18px 28px 1fr;gap:10px;align-items:center;
  padding:10px 12px;border:1.5px solid var(--ink);border-radius:8px;
  background:var(--paper);cursor:pointer;
  transition:background .12s, transform .12s, box-shadow .12s;
}
.nb-rp-row:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow-pop)}
.nb-rp-row input{
  width:16px;height:16px;cursor:pointer;accent-color:var(--ink);margin:0;
}
.nb-rp-row .ico{
  width:28px;height:28px;display:grid;place-items:center;
  border:1.5px solid var(--ink);border-radius:6px;
  background:var(--paper-2);color:var(--ink-2);
}
.nb-rp-row .t{display:flex;flex-direction:column;gap:2px;min-width:0}
.nb-rp-row .t b{font-family:var(--sans);font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.2}
.nb-rp-row .t em{font-family:var(--mono);font-size:10.5px;font-style:normal;color:var(--ink-3);letter-spacing:.02em;line-height:1.3}
.nb-rp-row:has(input:checked){background:var(--yellow);box-shadow:var(--shadow-pop);transform:translate(-1px,-1px)}
.nb-rp-row:has(input:checked) .ico{background:var(--paper);color:var(--ink)}

/* Notes textarea */
.nb-rp-note textarea{
  width:100%;min-height:78px;resize:vertical;
  border:1.5px solid var(--ink);border-radius:6px;background:var(--paper);
  padding:11px 12px;font-family:var(--mono);font-size:13px;color:var(--ink);
  outline:none;line-height:1.55;
}
.nb-rp-note textarea:focus{box-shadow:var(--shadow-pop)}
.nb-rp-note textarea::placeholder{color:var(--ink-3);font-family:var(--mono)}
.nb-rp-note .opt{font-weight:400;color:var(--ink-3);text-transform:none;letter-spacing:0}
.nb-rp-note .nb-dl-hint{text-align:right}

/* ==== components/rail.css ==== */
/* Side rail — paper cards in the same visual language as the download modal
   (.nb-dl-card / .nb-dl-radio): paper ground, ink border, yellow dog-eared
   corner sticker, uppercase mono labels, hover-lift on every clickable row. */
.nb-rail{
  display:flex;flex-direction:column;gap:18px;position:sticky;top:84px;
}
@media(max-width:980px){.nb-rail{position:static}}

/* Card shell — mirrors .nb-wall-card / .nb-dl-card. */
.nb-rail-card{
  background:var(--paper);border:1.5px solid var(--ink);border-radius:6px;
  padding:18px 18px 14px;position:relative;
}
/* Yellow dog-eared corner sticker — the same `::before` trick used on the
   download modal card. */
.nb-rail-card::before{
  content:"";position:absolute;inset:-8px -8px auto auto;
  width:34px;height:34px;background:var(--yellow);
  border:1.5px solid var(--ink);transform:rotate(8deg);
  z-index:-1;border-radius:6px;
}

.nb-rail-card h4{
  margin:0 0 12px;padding:0;
  font-family:var(--mono);font-size:11.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
}

.nb-rail-card ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:8px;
}
.nb-rail-card li{margin:0}

/* Row — mirrors .nb-dl-radio: paper card with ink border, hover shadow-pop. */
.nb-rail-card li a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 12px;border-radius:6px;cursor:pointer;color:var(--ink);
  background:var(--paper);border:1.5px solid var(--ink);text-decoration:none;
  transition:transform .12s, box-shadow .12s, background .12s;
}
.nb-rail-card li a:hover{
  transform:translate(-1px,-1px);box-shadow:var(--shadow-pop);
  background:var(--yellow);
}
.nb-rail-card li a > span:first-child{
  font-family:var(--sans);font-size:14px;font-weight:700;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.nb-rail-card li a > span:last-child{
  font-family:var(--mono);font-size:11px;color:var(--ink-3);
  letter-spacing:.04em;flex-shrink:0;white-space:nowrap;
}

/* Exam rail uses italic-serif "muted" tagline instead of a count. */
.nb-rail-card li a > span.muted{
  font-family:var(--serif);font-style:italic;font-size:12.5px;color:var(--ink-3);
  letter-spacing:0;
}

/* Empty list — graceful fallback. */
.nb-rail-card ul:empty::after{
  content:"nothing here yet";display:block;
  font-family:var(--serif);font-style:italic;font-size:13px;
  color:var(--ink-3);padding:4px 6px;
}

/* ==== components/toast.css ==== */
.nb-toast-wrap{position:fixed;bottom:24px;right:24px;z-index:200;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.nb-toast{background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:12.5px;padding:10px 18px;border-radius:6px;animation:nbRise .25s;pointer-events:none;border:1.5px solid var(--ink)}
.nb-toast.ok{background:var(--green);border-color:var(--green)}
.nb-toast.err{background:var(--red);border-color:var(--red)}

/* Paper-shard confetti — fires from confetti() on every correct test-mode pick.
   z-index 90 puts it above the sticky topbar (50) but below the login wall
   (100) so a streak celebration never paints over the auth gate. */
.nb-cf{position:fixed;inset:0;pointer-events:none;z-index:90;overflow:hidden}
.nb-cf span{
  position:absolute;width:12px;height:12px;top:-20px;
  border:1.5px solid var(--ink);
  --drift:0px;
  animation:nbFall 1.8s cubic-bezier(.1,.3,.4,1) forwards;
}

/* ==== pages/category.css ==== */
.nb-cathead{padding:12px 0 30px;border-bottom:1.5px solid var(--ink);margin-bottom:24px;position:relative}
.nb-cathead .tag{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px}
.nb-cathead h1{font-size:clamp(34px,4.6vw,56px);font-weight:800;letter-spacing:-.03em;line-height:1.02;margin:0 0 14px}
.nb-cathead h1 em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--ink-2)}
.nb-cathead .meta{font-family:var(--mono);font-size:12px;color:var(--ink-3);display:flex;gap:22px;margin-bottom:18px;flex-wrap:wrap}
.nb-cathead .meta b{color:var(--ink);font-weight:600}
.nb-cathead .intro{font-family:var(--serif);font-size:19px;font-style:italic;color:var(--ink-2);max-width:760px;margin:0;line-height:1.6}

/* Topic-mastery margin annotation (#57). Sits below the H1 like a hand-
 * written note — italic small-caps, no badge, no colour bar. The trailing
 * full stop is rendered by the page (".Mastered."), giving the line the
 * cadence of a margin scribble. */
.nb-cathead .mastery-label{
  font-family:var(--serif);
  font-style:italic;
  font-variant-caps:all-small-caps;
  letter-spacing:.08em;
  font-size:14px;
  font-weight:500;
  color:var(--ink-2);
  margin:-6px 0 14px;
  line-height:1.2;
  cursor:help;
}
.nb-cathead .mastery-label.is-untouched{color:var(--ink-3);font-weight:400}

.nb-layout{display:grid;grid-template-columns:1fr 300px;gap:32px}
@media(max-width:980px){.nb-layout{grid-template-columns:1fr}}

/* ==== pages/exam.css ==== */
.nb-exhead{padding:24px 0 32px;border-bottom:1.5px solid var(--ink);margin-bottom:28px}
.nb-exhead .tag{font-family:var(--mono);font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.14em;margin-bottom:10px}
.nb-exhead h1{font-size:clamp(36px,5vw,60px);font-weight:800;letter-spacing:-.03em;line-height:1;margin:0 0 14px}
.nb-exhead h1 .y{background:var(--yellow);padding:0 .08em;font-family:var(--serif);font-style:italic;font-weight:500}
.nb-exhead p{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--ink-2);max-width:700px;margin:0 0 26px}
.nb-exhead .grid{display:grid;grid-template-columns:repeat(4,1fr);border:1.5px solid var(--ink);background:var(--paper)}
.nb-exhead .g{padding:16px 20px;border-right:1.5px solid var(--ink);font-family:var(--mono);font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.1em}
.nb-exhead .g:last-child{border-right:0}
.nb-exhead .g strong{display:block;font-family:var(--sans);font-size:28px;font-weight:800;color:var(--ink);margin-top:4px;letter-spacing:-.02em;text-transform:none;line-height:1}
@media(max-width:700px){
  .nb-exhead .grid{grid-template-columns:repeat(2,1fr)}
  .nb-exhead .g:nth-child(2){border-right:0}
  .nb-exhead .g:nth-child(1),.nb-exhead .g:nth-child(2){border-bottom:1.5px solid var(--ink)}
}

.nb-dl{border:1.5px solid var(--ink);background:var(--yellow);padding:22px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.nb-dl h4{margin:0 0 4px;font-size:19px;font-weight:800;letter-spacing:-.015em}
.nb-dl p{margin:0;font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.nb-dl a{background:var(--ink);color:var(--yellow);padding:12px 20px;font-family:var(--mono);font-weight:700;font-size:13px;text-decoration:none;border:1.5px solid var(--ink);border-radius:6px;display:inline-flex;align-items:center;gap:6px}
.nb-dl a:hover{background:#000}

/* ==== pages/about.css ==== */
.nb-about-hero{padding:48px 0 24px;text-align:center}
.nb-about-hero h1{font-size:clamp(34px,5vw,52px);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:0 0 14px}
.nb-about-hero h1 em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--ink-2)}
.nb-about-hero p{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--ink-2);max-width:680px;margin:0 auto 28px;line-height:1.5}

.nb-empty{padding:60px 24px;text-align:center;font-family:var(--serif);font-style:italic;color:var(--ink-3);font-size:17px;border:1.5px dashed var(--rule-ink);border-radius:6px;background:var(--paper)}

/* Error state variant — used by helpers.showErrorState. Solid ink border,
   tighter padding, inline retry button. */
.nb-empty-err{
  padding:32px 24px;border:1.5px solid var(--ink);background:var(--paper);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  max-width:520px;margin:24px auto;position:relative;
}
.nb-empty-err .ic{color:var(--red);margin-bottom:2px}
.nb-empty-err h4{
  font-family:var(--sans);font-size:18px;font-weight:800;color:var(--ink);
  margin:0;letter-spacing:-.01em;font-style:normal;
}
.nb-empty-err p{
  margin:0;font-family:var(--serif);font-style:italic;font-size:14.5px;
  color:var(--ink-2);max-width:380px;line-height:1.5;
}
.nb-empty-err .nb-empty-retry{
  margin-top:14px;padding:10px 18px;font-size:12.5px;
  display:inline-flex;align-items:center;gap:8px;
}
.nb-empty-err .nb-empty-retry svg{flex-shrink:0}
.nb-empty-err .nb-empty-retry:disabled{opacity:.7;cursor:wait}

/* Bigger variant used by the boot-error screen (full-page). */
.nb-boot-err{padding:48px 28px;margin:80px auto;max-width:520px}
.nb-boot-err h4{font-size:22px}

/* ==== pages/bookmarks.css ==== */
/* Bookmarks page — folder tabs, per-card chip, filter input, empty state */

/* Folder bar — folder tab strip + "new folder" / "rename · delete" actions.
   The tabs themselves mirror the existing .nb-tabs pattern (exam page) so
   the visual language stays consistent: monospace labels, ink-on-paper, the
   active tab inverts to paper-on-ink. */
.nb-bm-folderbar{
  display:flex;align-items:stretch;gap:12px;margin:18px 0 6px;flex-wrap:wrap;
}
.nb-bm-tabs{flex:1 1 320px;min-width:0;margin:0}
.nb-bm-folderbar-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch}
.nb-bm-folderbar-actions .nb-btn{align-self:stretch}

/* Inline prompt that replaces native prompt() for create / rename actions. */
.nb-bm-prompt{
  flex:1 1 100%;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  border:1.5px dashed var(--ink);background:var(--yellow-2);
  padding:10px 12px;border-radius:8px;margin-top:4px;
}
.nb-bm-prompt input{
  flex:1 1 220px;min-width:0;
  padding:8px 12px;border:1.5px solid var(--ink);border-radius:6px;
  background:var(--paper);font-family:var(--sans);font-size:14px;color:var(--ink);
  outline:none;
}
.nb-bm-prompt input:focus{box-shadow:var(--shadow-pop)}
.nb-bm-prompt-hint{
  flex:1 1 100%;
  font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.04em;
}

/* Folder chip on every MCQ card — a single button that opens a small picker
   dropdown. "has" = file is in a named folder (mint tint, calm). "none" =
   unfiled (paper-2, ink-3 label). */
.nb-bm-chip-wrap{display:inline-flex;align-items:center}
.nb-bm-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 9px;border:1.5px solid var(--ink) !important;
  border-bottom-width:1.5px;
  border-radius:999px;
  background:var(--paper-2);color:var(--ink-2);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;line-height:1.4;
}
.nb-bm-chip.has{background:var(--mint);color:var(--ink)}
.nb-bm-chip:hover{background:var(--yellow)}
.nb-bm-chip svg{width:12px;height:12px;flex-shrink:0}
.nb-bm-chip .lbl{
  max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Picker popover. Fixed-positioned by JS so it floats above whatever's
   underneath; visually a small notebook-style menu. */
.nb-bm-picker{
  position:fixed;z-index:120;
  min-width:200px;max-width:min(280px, calc(100vw - 16px));
  background:var(--paper);border:1.5px solid var(--ink);border-radius:8px;
  box-shadow:var(--shadow-pop);
  padding:6px;display:flex;flex-direction:column;gap:2px;
}
.nb-bm-picker-row{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;border:0;border-radius:5px;
  background:transparent;cursor:pointer;text-align:left;
  font-family:var(--sans);font-size:13.5px;color:var(--ink);
}
.nb-bm-picker-row .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nb-bm-picker-row:hover{background:var(--paper-2)}
.nb-bm-picker-row.sel{background:var(--mint);font-weight:600}
.nb-bm-picker-row.new{
  font-family:var(--mono);font-size:12px;color:var(--ink-2);letter-spacing:.04em;
}
.nb-bm-picker-row.danger{color:var(--red);font-weight:600}
.nb-bm-picker-row.danger:hover{background:#f5d8d2}
.nb-bm-picker-sep{height:1px;background:var(--rule-ink);margin:4px 2px}

.nb-bm-toolbar{margin:6px 0 18px}
.nb-bm-filter{
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  border:1.5px solid var(--ink);border-radius:8px;background:var(--paper);
  width:100%;
}
.nb-bm-filter:focus-within{box-shadow:var(--shadow-pop)}
.nb-bm-filter svg{color:var(--ink-3);flex-shrink:0}
.nb-bm-filter input{
  flex:1;border:0;outline:none;background:transparent;
  font-family:var(--sans);font-size:14.5px;color:var(--ink);min-width:0;
}
.nb-bm-filter input::placeholder{color:var(--ink-3);font-style:italic}

.nb-bm-empty{
  border:1.5px dashed var(--ink);border-radius:8px;background:var(--paper-2);
  padding:36px 28px;text-align:center;max-width:520px;margin:0 auto;
}
.nb-bm-empty h3{font-size:22px;margin:0 0 10px;font-weight:800;letter-spacing:-.01em}
.nb-bm-empty p{margin:0 0 18px;color:var(--ink-2);font-family:var(--serif);font-style:italic;font-size:15px}
.nb-bm-empty .nb-btn{display:inline-flex}

/* Spotlight question page (/q/<id>) — reuses the bookmarks layout grid. */
.nb-qp-spotlight{margin:8px 0 28px}
.nb-qp-spotlight .nb-mcq{box-shadow:var(--shadow-pop)}
.nb-qp-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.nb-qp-actions .nb-btn{padding:10px 16px;font-size:12.5px}

/* ==== pages/quiz.css ==== */
/* Quiz of the day — intro, run, results — all share .nb-qz-card paper styling. */
.nb-qz-stage{margin:8px 0 32px}

.nb-qz-card{
  background:var(--paper);border:1.5px solid var(--ink);border-radius:8px;
  padding:36px 32px 30px;position:relative;
  box-shadow:var(--shadow-pop);
  animation:nbRise .28s ease-out;
  max-width:760px;margin:0 auto;
}
.nb-qz-card::before{
  content:"";position:absolute;inset:-8px -8px auto auto;
  width:60px;height:60px;background:var(--yellow);
  border:1.5px solid var(--ink);transform:rotate(8deg);
  z-index:-1;border-radius:6px;
}
@media(max-width:640px){.nb-qz-card{padding:24px 20px 20px}}

.nb-qz-tag{
  display:inline-block;padding:5px 12px;margin-bottom:14px;
  border:1.5px solid var(--ink);border-radius:999px;background:var(--paper-2);
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);
}

/* ─── Intro ───────────────────────────────────────────────────────────── */
.nb-qz-intro h1{
  font-size:clamp(34px,5vw,52px);margin:0 0 12px;
  font-weight:800;letter-spacing:-.03em;line-height:1.04;
}
.nb-qz-intro h1 em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--ink-2)}
.nb-qz-sub{
  margin:0 0 22px;color:var(--ink-2);
  font-family:var(--serif);font-style:italic;font-size:16.5px;line-height:1.55;
}
.nb-qz-sub b{color:var(--ink);font-weight:700;font-style:normal;font-family:var(--sans)}

.nb-qz-meta{
  list-style:none;margin:0 0 26px;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
.nb-qz-meta li{
  border:1.5px dashed var(--ink);border-radius:8px;
  padding:12px 14px;text-align:center;background:var(--paper-2);
}
.nb-qz-meta li b{display:block;font-size:24px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.nb-qz-meta li em{display:block;margin-top:2px;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;font-style:normal}

.nb-qz-start{
  padding:14px 22px;font-size:13.5px;display:inline-flex;align-items:center;gap:10px;
}
.nb-qz-change{
  display:block;margin-top:14px;
  font-family:var(--mono);font-size:11.5px;color:var(--ink-3);
  text-decoration:underline;letter-spacing:.04em;
}
.nb-qz-change:hover{color:var(--ink)}

/* ─── Run (active quiz) ──────────────────────────────────────────────── */
.nb-qz-run{max-width:760px;margin:0 auto;animation:nbPageIn .35s ease-out}

.nb-qz-head{margin-bottom:20px}
.nb-qz-progress{
  width:100%;height:6px;background:var(--paper-2);
  border:1.5px solid var(--ink);border-radius:999px;overflow:hidden;
}
.nb-qz-progress span{
  display:block;height:100%;background:var(--yellow);
  transition:width .35s ease;
}
.nb-qz-meta-row{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:10px;font-family:var(--mono);font-size:12px;color:var(--ink-3);
}
.nb-qz-meta-row b{color:var(--ink);font-weight:700}

.nb-qz-q{padding:30px 30px 28px}
.nb-qz-qtx{
  margin:0 0 24px;font-size:22px;font-weight:700;line-height:1.35;
  color:var(--ink);letter-spacing:-.01em;
}
@media(max-width:640px){.nb-qz-qtx{font-size:19px}}

.nb-qz-opts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.nb-qz-opt{
  display:flex;align-items:center;gap:14px;width:100%;
  padding:14px 16px;border:1.5px solid var(--ink);border-radius:8px;
  background:var(--paper);color:var(--ink);text-align:left;cursor:pointer;
  font:inherit;transition:background .12s, transform .12s, box-shadow .12s;
}
.nb-qz-opt:hover:not(:disabled){
  transform:translate(-1px,-1px);box-shadow:var(--shadow-pop);background:var(--paper-2);
}
.nb-qz-opt:disabled{cursor:default}
.nb-qz-opt .k{
  width:30px;height:30px;display:grid;place-items:center;flex-shrink:0;
  border:1.5px solid var(--ink);border-radius:6px;
  background:var(--paper-2);
  font-family:var(--mono);font-weight:700;font-size:13px;
}
.nb-qz-opt .t{
  font-family:var(--sans);font-size:15px;font-weight:500;line-height:1.4;
  flex:1;min-width:0;
}

.nb-qz-opt.picked{transform:translate(-1px,-1px);box-shadow:var(--shadow-pop)}
.nb-qz-opt.correct{background:var(--mint);border-color:var(--green)}
.nb-qz-opt.correct .k{background:var(--green);color:var(--paper);border-color:var(--green)}
.nb-qz-opt.wrong{background:var(--blush);border-color:var(--red)}
.nb-qz-opt.wrong .k{background:var(--red);color:var(--paper);border-color:var(--red)}

/* ─── Results ────────────────────────────────────────────────────────── */
.nb-qz-results .nb-qz-card{text-align:center}
.nb-qz-score{margin:18px 0 22px}
.nb-qz-score .ring{
  display:inline-grid;place-items:center;
  width:140px;height:140px;border-radius:50%;margin:0 auto 14px;
  position:relative;
  background:conic-gradient(var(--yellow) calc(var(--p) * 1%), var(--paper-2) 0);
  border:1.5px solid var(--ink);
}
.nb-qz-score .ring::after{
  content:"";position:absolute;inset:8px;border-radius:50%;background:var(--paper);
  box-shadow:inset 0 0 0 1.5px var(--ink);
}
.nb-qz-score .ring strong{
  position:relative;z-index:1;font-size:42px;font-weight:800;
  line-height:1;color:var(--ink);letter-spacing:-.02em;
}
.nb-qz-score .ring span{
  position:relative;z-index:1;display:block;
  font-family:var(--mono);font-size:11px;color:var(--ink-3);
  letter-spacing:.06em;margin-top:2px;
}
.nb-qz-results h2{font-size:28px;margin:0 0 6px;font-weight:800;letter-spacing:-.02em}
.nb-qz-verdict{font-family:var(--serif);font-style:italic;font-weight:500}
.nb-qz-verdict.high   {color:var(--green)}
.nb-qz-verdict.perfect{color:var(--green);text-decoration:underline}
.nb-qz-verdict.mid    {color:var(--ink-2)}
.nb-qz-verdict.low    {color:var(--red)}

.nb-qz-breakdown{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0 22px;
}
@media(max-width:520px){.nb-qz-breakdown{grid-template-columns:repeat(2,1fr)}}
.nb-qz-breakdown > div{
  border:1.5px solid var(--ink);border-radius:8px;background:var(--paper);
  padding:12px 10px;text-align:center;
}
.nb-qz-breakdown .num{
  display:block;font-size:22px;font-weight:800;color:var(--ink);
  letter-spacing:-.01em;
}
.nb-qz-breakdown .lbl{
  display:block;margin-top:2px;
  font-family:var(--mono);font-size:10px;color:var(--ink-3);
  letter-spacing:.06em;text-transform:uppercase;
}

.nb-qz-actions{
  display:flex;justify-content:center;flex-wrap:wrap;gap:10px;
  padding-top:14px;border-top:1px dashed var(--rule-ink);
}
.nb-qz-actions .nb-btn{padding:11px 18px;font-size:12.5px}

/* ==== pages/analytics.css ==== */
/* Personal analytics dashboard (/analytics).
   Quiet, paper-and-ink panels mirroring the home page's .nb-personal-card.
   Numbers in Fraunces italic, labels in JetBrains Mono small-caps. No new
   colors — everything routes through the existing yellow / mint / red /
   paper-2 tokens so a future palette swap touches one place. */

/* Top-line cards row. Four to a row on desktop, stacks to one on phones so
   the figures stay readable. The shadowed border matches .nb-personal-card,
   .nb-qotd and .nb-qq for visual consistency. */
.nb-an-cards{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
  margin:18px 0 24px;
}
.nb-an-card{
  background:var(--paper);
  border:1.5px solid var(--ink);
  border-radius:10px;
  padding:18px 20px;
  box-shadow:3px 3px 0 var(--ink);
  display:flex;flex-direction:column;gap:6px;
  min-width:0;
}
.nb-an-card strong{
  font-family:var(--serif);font-style:italic;font-weight:700;
  font-size:42px;line-height:1;color:var(--ink);
  letter-spacing:-.01em;
}
.nb-an-card .lbl{
  font-family:var(--mono);font-size:11px;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.08em;
}
.nb-an-card .sub{
  font-family:var(--mono);font-size:11px;color:var(--ink-2);
  letter-spacing:.04em;
}

/* Section block — used for the activity strip, weakest-topics list, and
   each summary card. Same paper-on-ink shell so the page reads as one
   coherent dashboard rather than a pile of unrelated widgets. */
.nb-an-block{
  background:var(--paper);
  border:1.5px solid var(--ink);
  border-radius:10px;
  padding:20px 22px;
  box-shadow:3px 3px 0 var(--ink);
  margin-bottom:18px;
  min-width:0;
}
.nb-an-block-head{
  display:flex;align-items:baseline;justify-content:space-between;
  flex-wrap:wrap;gap:8px;margin-bottom:14px;
}
.nb-an-block-head h2{
  font-size:24px;font-weight:800;letter-spacing:-.015em;margin:0;
}
.nb-an-block-head h2 em{
  font-family:var(--serif);font-style:italic;font-weight:500;color:var(--ink-2);
}
.nb-an-block-head .caption{
  font-family:var(--mono);font-size:11px;color:var(--ink-3);
  letter-spacing:.06em;text-transform:lowercase;
}

/* Activity strip — 30 tiles in a row, 12px each. Empty days fall back to
   paper-2 so the strip still reads as a "thing" rather than empty space.
   Light = yellow-2, heavy = yellow. We avoid a green/red scale to keep the
   feel calm rather than judgemental. */
.nb-an-strip{
  display:flex;align-items:center;gap:4px;flex-wrap:wrap;
  margin:4px 0 12px;
}
.nb-an-cell{
  width:12px;height:12px;border-radius:2px;
  background:var(--paper-2);
  border:1px solid var(--rule-ink);
  display:inline-block;flex-shrink:0;
}
.nb-an-cell.lvl-1{background:var(--yellow-2);border-color:var(--ink-3)}
.nb-an-cell.lvl-2{background:var(--yellow);border-color:var(--ink)}

/* Three-up grid for goal / mistakes / bookmarks summaries. Collapses to a
   single column under 760px so each card keeps its breathing room on
   narrower viewports. */
.nb-an-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
  margin-bottom:18px;
}
.nb-an-grid .nb-an-block{margin-bottom:0}

.nb-an-summary{
  display:flex;align-items:flex-start;gap:18px;
}
.nb-an-summary-figure{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  min-width:78px;
}
.nb-an-summary-figure strong{
  font-family:var(--serif);font-style:italic;font-weight:700;
  font-size:38px;line-height:1;color:var(--ink);
}
.nb-an-summary-figure span{
  font-family:var(--mono);font-size:10.5px;color:var(--ink-3);
  letter-spacing:.08em;text-transform:uppercase;
}
.nb-an-summary-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}
.nb-an-summary-body p{
  margin:0;font-family:var(--serif);font-style:italic;font-size:14.5px;
  color:var(--ink-2);line-height:1.5;
}
.nb-an-summary-body .nb-btn{align-self:flex-start}

/* Weekly progress — mirrors the home-page pattern but lives inside an
   analytics block so the bar stretches the full width of the panel. */
.nb-an-weekly{display:flex;flex-direction:column;gap:8px}
.nb-an-weekly-label{
  font-family:var(--mono);font-size:12px;color:var(--ink-3);
  letter-spacing:.04em;
}
.nb-an-weekly-label em{
  font-family:var(--serif);font-style:italic;color:var(--ink);
  font-weight:600;font-size:15px;letter-spacing:0;
}
.nb-an-weekly-bar{
  position:relative;height:10px;border-radius:999px;
  border:1.5px solid var(--ink);background:var(--paper-2);overflow:hidden;
}
.nb-an-weekly-fill{
  height:100%;background:var(--mint);
  transition:width .25s ease;
}
.nb-an-weekly-hint{
  margin:0;font-family:var(--mono);font-size:11px;color:var(--ink-3);
  letter-spacing:.04em;
}
.nb-an-weekly-empty p{
  margin:0;font-family:var(--serif);font-style:italic;font-size:14.5px;
  color:var(--ink-2);line-height:1.55;
}
.nb-an-weekly-empty a{
  color:var(--ink);font-weight:600;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1.5px;
}

/* Weakest topics — ordered list with a thin weakness bar per row. The
   highest-count topic anchors at 100% bar width so the relative gap
   between #1 and #4 is visible at a glance. */
.nb-an-topics{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:10px;
}
.nb-an-topic{
  display:grid;
  grid-template-columns:36px 1fr auto;
  align-items:center;gap:14px;
  padding:12px 14px;
  border:1.5px solid var(--rule-ink);
  border-radius:8px;
  background:var(--paper);
  transition:background .15s ease, border-color .15s ease;
}
.nb-an-topic:hover{background:var(--paper-2);border-color:var(--ink-3)}
.nb-an-topic .rank{
  font-family:var(--mono);font-size:12px;color:var(--ink-3);
  letter-spacing:.06em;
}
.nb-an-topic .body{display:flex;flex-direction:column;gap:6px;min-width:0}
.nb-an-topic .row{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;
}
.nb-an-topic .title{
  font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.nb-an-topic .count{
  font-family:var(--mono);font-size:11px;color:var(--ink-3);
  letter-spacing:.04em;flex-shrink:0;
}
.nb-an-topic .count b{
  font-family:var(--serif);font-style:italic;font-size:14px;
  color:var(--ink);font-weight:700;letter-spacing:0;
}
.nb-an-topic .bar{
  height:5px;border-radius:999px;background:var(--paper-2);
  border:1px solid var(--rule-ink);overflow:hidden;
}
.nb-an-topic .bar span{
  display:block;height:100%;background:var(--blush);
  transition:width .25s ease;
}
.nb-an-topic .cta{
  font-family:var(--mono);font-size:11.5px;color:var(--ink);
  letter-spacing:.06em;text-transform:lowercase;
  padding:7px 12px;border:1.5px solid var(--ink);border-radius:6px;
  background:var(--paper);cursor:pointer;text-decoration:none;
  transition:background .15s ease;
}
.nb-an-topic .cta:hover{background:var(--yellow)}

.nb-an-topics-empty{
  border:1.5px dashed var(--ink);border-radius:8px;background:var(--paper-2);
  padding:24px;text-align:center;
}
.nb-an-topics-empty p{
  margin:0 0 14px;font-family:var(--serif);font-style:italic;font-size:15px;
  color:var(--ink-2);line-height:1.55;
}
.nb-an-topics-loading{
  padding:18px;font-family:var(--mono);font-size:12px;color:var(--ink-3);
  text-align:center;letter-spacing:.04em;
}

/* Footnotes — small mono caption used twice (below the strip and at the
   page bottom). The `.end` variant adds extra top space to separate the
   privacy note from the topic list above. */
.nb-an-foot{
  margin:8px 0 0;font-family:var(--mono);font-size:11px;color:var(--ink-3);
  letter-spacing:.04em;line-height:1.5;
}
.nb-an-foot.end{margin-top:28px;text-align:center}

/* Responsive — phones get a single column for the cards and the summary
   grid, plus tighter padding so nothing crowds the edge. */
@media (max-width:760px){
  .nb-an-grid{grid-template-columns:1fr;gap:14px}
  .nb-an-cards{grid-template-columns:repeat(2, minmax(0, 1fr));gap:12px}
}
@media (max-width:600px){
  .nb-an-cards{grid-template-columns:1fr}
  .nb-an-card{padding:16px 18px}
  .nb-an-card strong{font-size:36px}
  .nb-an-block{padding:16px 18px}
  .nb-an-block-head h2{font-size:21px}
  .nb-an-summary{gap:14px}
  .nb-an-summary-figure strong{font-size:32px}
  .nb-an-topic{grid-template-columns:28px 1fr;row-gap:8px}
  .nb-an-topic .cta{grid-column:1 / -1;justify-self:flex-start}
}