/* ============================================================
   Notebook skin — v12.12.0
   Loaded AFTER app-theme.css in app.html. Pure presentation:
   no markup changes, one attribute hook (see below).

   Everything here is built on the tokens app-theme.css already
   defines (--a1, --a2, --acc, --line, --paper), so Bright Sparks
   gets its blue→green palette automatically from
   body.brand-bright. Nothing in this file hard-codes indigo.

   DENSITY: texture tracks teaching, plainness tracks testing.
   The hook is data-nb on #cb-root / #quiz-box:

     data-nb="full"   everything that is practice — the concept
                      builder, classwork and both homework days.
                      Graph paper, handwriting, flavoured cards
                      built as objects rather than tinted boxes.
     data-nb="plain"  the weekly quiz, and only that. A measurement,
                      not a lesson: no texture, no handwriting,
                      calm spacing.

   v12.12.0 dropped a third "light" density. It had homework in
   the middle on the assumption that homework meant something more
   exam-like; it does not. Classwork and homework are the same
   question set, one sat in class and one at home.

   With no attribute nothing below applies and the old look stands,
   so this file is safe to ship before the hook is wired.
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --nb-paper:#FBFAFF;
  --nb-grid:rgba(63,39,189,.07);
  --nb-line:var(--line);
  --nb-ink:#241F3D;
  --nb-muted:#6B6390;
  --nb-card:#ffffff;

  --nb-amber:#FBBF24;  --nb-amber-bg:#FEF3C7;  --nb-amber-ink:#8A5A00;
  --nb-rose:#E11D48;   --nb-rose-bg:#FFE4E6;   --nb-rose-ink:#A81236;
  --nb-green:#059669;  --nb-green-bg:#D1FAE5;  --nb-green-ink:#05614A;
  --nb-index:#FFFDF4;  --nb-index-bd:#EFE5C6;

  --nb-hand:'Caveat','Segoe Script',cursive;

  /* height-led scale: a slide-shaped view is constrained by height,
     not width, so the type follows the viewport height. A 14" laptop
     gets the tight end, a 27" monitor the generous one. */
  --nb-body:clamp(14.5px, 1.85vh, 17px);
  --nb-small:clamp(12.5px, 1.55vh, 14.5px);
  --nb-h2:clamp(19px, 2.9vh, 26px);
  --nb-h3:clamp(15px, 1.95vh, 17.5px);
  --nb-gap:clamp(8px, 1.15vh, 14px);
  --nb-pad:clamp(10px, 1.4vh, 16px);
}

/* Caveat is requested in app.html's font link, not @import'ed:
   an @import blocks rendering until it resolves. */

/* ============================================================
   1. Shared pieces — apply to any notebook density
   ============================================================ */
[data-nb] { font-size:var(--nb-body); }
[data-nb] .small,
[data-nb] .muted { font-size:var(--nb-small); }

[data-nb] h2 { font-size:var(--nb-h2); line-height:1.14; }
[data-nb] h3 { font-size:var(--nb-h3); }

/* graph ground — full density only */
[data-nb="full"]{
  background-color:var(--nb-paper);
  background-image:
    linear-gradient(var(--nb-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--nb-grid) 1px, transparent 1px);
  background-size:28px 28px;
}

/* the tutor's voice. Never used for anything a child must read
   carefully — only for asides, encouragement and explanation. */
[data-nb="full"] .nb-hand{
  font-family:var(--nb-hand);
  font-size:calc(var(--nb-body) * 1.32);
  line-height:1.3;
  color:var(--a1);
  transform:rotate(-.4deg);
}
[data-nb="plain"] .nb-hand{ font-family:inherit; transform:none; color:var(--nb-muted); }

/* ============================================================
   2. Concept builder — full notebook
   The deck is pure instruction, so it takes the strongest
   treatment: paper ground, slots drawn as ruled boxes, the
   method steps as loose cards you pick up.
   ============================================================ */
#cb-root[data-nb="full"] .cb-head{
  border-bottom:2px solid var(--nb-line);
  padding-bottom:var(--nb-pad);
  margin-bottom:var(--nb-gap);
}
#cb-root[data-nb="full"] .cb-title{
  font-family:var(--font-display);
  color:var(--a1);
  margin:2px 0 0;
}
#cb-root[data-nb="full"] .cb-sp{
  background:var(--nb-amber-bg);
  color:var(--nb-amber-ink);
  border:2px solid var(--nb-amber);
  border-radius:999px;
  padding:4px 14px;
  font-weight:800;
  font-size:var(--nb-small);
}

/* the example question reads as a card clipped to the page */
#cb-root[data-nb="full"] .cb-example{
  position:relative;
  background:var(--nb-index);
  border:2px solid var(--nb-index-bd);
  border-radius:14px;
  padding:var(--nb-pad) calc(var(--nb-pad) + 4px);
  box-shadow:0 3px 0 rgba(36,31,61,.06), 0 12px 26px rgba(36,31,61,.09);
  transform:rotate(-.4deg);
}
#cb-root[data-nb="full"] .cb-example::before{
  content:""; position:absolute; top:-11px; left:50%; width:78px; height:22px;
  transform:translateX(-50%) rotate(-2deg);
  background:color-mix(in srgb, var(--a1) 22%, transparent);
  border-left:1px dashed rgba(36,31,61,.22);
  border-right:1px dashed rgba(36,31,61,.22);
}
#cb-root[data-nb="full"] .cb-badge{
  background:linear-gradient(135deg,var(--a1),var(--a2));
  color:#fff; border-radius:999px;
  padding:3px 12px; font-size:var(--nb-small); font-weight:800;
  letter-spacing:.04em;
}

/* the instruction line is the tutor talking, so it is handwritten */
#cb-root[data-nb="full"] .cb-instr{
  font-family:var(--nb-hand);
  font-size:calc(var(--nb-body) * 1.28);
  color:var(--a1);
  transform:rotate(-.3deg);
  margin:var(--nb-gap) 0;
}

#cb-root[data-nb="full"] .cb-label{
  font-weight:800; letter-spacing:.06em; color:var(--nb-muted);
}

/* slots: ruled, numbered, obviously empty until filled.

   Filled is deliberately NOT green. styles.css uses .cb-right and
   .cb-wrong on the slot after checking, so green has to mean
   "verified correct" and nothing else. Colouring every filled slot
   green told a child their answer was right before anything had
   been checked, and left the wrong ones looking right afterwards. */
#cb-root[data-nb="full"] .cb-slot{
  border:2px dashed color-mix(in srgb, var(--a1) 32%, transparent);
  border-radius:12px;
  background:rgba(255,255,255,.72);
  padding:var(--nb-pad);
  transition:border-color .2s ease, background .2s ease;
}
#cb-root[data-nb="full"] .cb-slot.filled{
  border-style:solid;
  border-color:color-mix(in srgb, var(--a1) 45%, transparent);
  background:#fff;
}
/* after checking, the verdict wins over "filled" */
#cb-root[data-nb="full"] .cb-slot.cb-right{
  border-color:var(--nb-green) !important; background:var(--nb-green-bg) !important;
}
#cb-root[data-nb="full"] .cb-slot.cb-wrong{
  border-color:var(--nb-rose) !important; background:var(--nb-rose-bg) !important;
}
/* No transform on the drop target. The class is removed before
   document.elementFromPoint() runs the hit test, so a scaled slot
   highlights over ground it does not actually occupy — near the
   edges the child sees the slot light up and the drop then misses.
   Colour alone says "here" without moving the target. */
#cb-root[data-nb="full"] .cb-slot.cb-over{
  border-color:var(--acc);
  background:color-mix(in srgb, var(--acc) 12%, #fff);
}
#cb-root[data-nb="full"] .cb-num{
  /* the full gradient, not just its first colour — the brand is a gradient,
     and on Bright Sparks this is what carries blue through to green */
  background:linear-gradient(135deg,var(--a1),var(--a2));
  color:#fff; font-weight:800;
  border-radius:999px; width:26px; height:26px;
  display:inline-grid; place-items:center; font-size:var(--nb-small);
}
#cb-root[data-nb="full"] .cb-ghost{
  font-family:var(--nb-hand);
  font-size:calc(var(--nb-body) * 1.2);
  color:var(--nb-muted);
}

/* method steps: loose cards, lifted slightly, pick-up-able */
#cb-root[data-nb="full"] .cb-step{
  background:var(--nb-card);
  border:2px solid var(--nb-line);
  border-radius:12px;
  padding:calc(var(--nb-pad) * .8) var(--nb-pad);
  font-weight:700;
  box-shadow:0 2px 0 rgba(36,31,61,.07);
  transition:transform .12s ease, border-color .2s ease, box-shadow .2s ease;
}
#cb-root[data-nb="full"] .cb-step:hover{
  transform:translateY(-2px);
  border-color:var(--a1);
  box-shadow:0 5px 0 rgba(36,31,61,.09);
}
#cb-root[data-nb="full"] .cb-step.placed{
  border-color:var(--nb-green); background:#fff; box-shadow:none;
}
#cb-root[data-nb="full"] .cb-dragging{ opacity:.45; }

/* .cb-right and .cb-wrong are NOT message panels — app.js puts them on
   the .cb-slot after checking (`$(".cb-slot").each(... addClass(...))`).
   They are styled with the slots above. Anything written here as a
   panel restyles every marked slot into a margin block. */
#cb-root[data-nb="full"] .cb-method{
  background:var(--nb-amber-bg);
  border:none; border-top:4px solid var(--nb-amber);
  border-radius:6px; padding:var(--nb-pad);
  color:var(--nb-amber-ink);
}

/* ============================================================
   3. Quiz player — three densities
   ============================================================ */

/* --- shared across light and plain --- */
#quiz-box[data-nb] .paper-head h2{ font-family:var(--font-display); color:var(--a1); }
#quiz-box[data-nb] .q-split{ gap:var(--nb-gap); }
#quiz-box[data-nb] #q-body{ margin-top:var(--nb-gap) !important; }

#quiz-box[data-nb] .q-option{
  border:2px solid var(--nb-line);
  border-radius:12px;
  padding:calc(var(--nb-pad) * .85) var(--nb-pad);
  font-size:var(--nb-body);
  transition:transform .12s ease, border-color .18s ease, background .18s ease;
}
#quiz-box[data-nb] .q-option:hover{ transform:translateX(3px); border-color:var(--a1); }
#quiz-box[data-nb] .q-option .key{
  background:color-mix(in srgb, var(--a1) 10%, #fff);
  color:var(--a1); font-weight:800; border-radius:8px;
}
#quiz-box[data-nb] .q-option.selected{
  border-color:var(--a1);
  background:color-mix(in srgb, var(--a1) 7%, #fff);
}
#quiz-box[data-nb] .q-option.correct{
  border-color:var(--nb-green); background:var(--nb-green-bg); color:var(--nb-green-ink);
}
#quiz-box[data-nb] .q-option.wrong{
  border-color:var(--nb-rose); background:var(--nb-rose-bg); color:var(--nb-rose-ink);
}
#quiz-box[data-nb] .stimulus{
  border:2px dashed color-mix(in srgb, var(--a1) 28%, transparent);
  border-radius:12px;
  padding:var(--nb-pad);
  background:#fff;
  font-size:calc(var(--nb-body) * 1.02);
  line-height:1.62;
}

/* The explanation after each answer is the one moment the tutor is
   talking again, so it is the one place the handwriting appears
   inside a quiz. */
#quiz-box[data-nb="full"] #q-explain{
  font-family:var(--nb-hand);
  font-size:calc(var(--nb-body) * 1.3);
  line-height:1.32;
  color:var(--a1);
  background:var(--nb-index);
  border:2px solid var(--nb-index-bd);
  border-radius:12px;
  padding:var(--nb-pad);
  transform:rotate(-.3deg);
}

/* --- weekly: plain -------------------------------------------
   A measurement. No texture, no handwriting, nothing decorative
   competing with the question. Slightly airier than the others
   because there is nothing else on the screen to carry the eye. */
#quiz-box[data-nb="plain"]{
  background:#fff;
  --nb-gap:clamp(10px, 1.5vh, 18px);
}
#quiz-box[data-nb="plain"] .q-option{ border-width:1.5px; }
#quiz-box[data-nb="plain"] .q-option:hover{ transform:none; }
#quiz-box[data-nb="plain"] #q-explain{
  border-left:4px solid var(--a1);
  background:transparent;
  padding:6px 0 6px var(--nb-pad);
  font-size:var(--nb-small);
  color:var(--nb-muted);
}

/* the results screen is teaching again, whatever the quiz was */
.celebrate-card[data-nb] .score-ring{ font-family:var(--font-display); }

/* ============================================================
   4. The lesson page in full screen
   ------------------------------------------------------------
   The title was printed three times: the app bar, .wk-viewer-head,
   and then the player's own <h1>. On a 14" laptop that third one
   cost about 90px of a ~420px content area, which is why a
   nine-slide activity arrived needing a scroll.

   Presentation only — the heading stays in the markup for the
   standalone lesson page, where it is the only title there is.
   ============================================================ */
/* .card-head is shared: the quiz header is .card-head.paper-head and
   must keep its own layout, so every rule here excludes it. */
.wk-viewer .card-head:not(.paper-head) h1{ display:none; }
.wk-viewer .card-head:not(.paper-head) .muted{ margin:2px 0 0; }

/* With the title hidden, the header card became a near-empty white
   band carrying one button. Collapse it onto the button.
   :has() is unsupported on older Firefox; there it simply keeps
   today's padding, which is the current behaviour, not a break. */
.wk-viewer .card:has(> .card-head:not(.paper-head)){ padding:8px 12px !important; }
.wk-viewer .card-head:not(.paper-head){
  display:flex; align-items:center; justify-content:flex-end;
  gap:10px; margin-top:0 !important; min-height:0 !important;
}
.wk-viewer .card-head:not(.paper-head) .btn{
  padding:8px 18px !important;
  font-size:var(--nb-small) !important;
  line-height:1.2 !important;
}

/* The bottom strip — "Whole paper pacing / Course home / next item" —
   is course navigation. In full screen the child is inside one item
   with a Close control of its own, so the strip is both redundant and
   the thing pushing the activity below the fold. It returns the moment
   full screen closes. */
.wk-viewer.is-full .course-navbar{ display:none; }

/* ============================================================
   5. Quiz at full density — presence, not just texture
   ------------------------------------------------------------
   The graph ground alone left the quiz reading flat: a pale
   question, five pale boxes, and a lot of nothing. The options
   are the whole interface here, so they carry the weight.
   ============================================================ */
#quiz-box[data-nb="full"] .q-side-q{
  background:#fff;
  border:2px solid var(--nb-line);
  border-radius:14px;
  padding:var(--nb-pad) calc(var(--nb-pad) + 4px);
  box-shadow:0 2px 0 rgba(36,31,61,.05), 0 8px 20px rgba(36,31,61,.06);
  font-size:calc(var(--nb-body) * 1.05);
  line-height:1.62;
}
#quiz-box[data-nb="full"] .stimulus{
  border:none; background:transparent; padding:0 0 10px;
  margin:0 0 10px;
  border-bottom:2px dashed color-mix(in srgb, var(--a1) 25%, transparent);
}
/* the options do the work: a real edge, a real hover, a real letter */
#quiz-box[data-nb="full"] .q-option{
  border-width:2px;
  box-shadow:0 2px 0 rgba(36,31,61,.05);
  padding:calc(var(--nb-pad) * .95) var(--nb-pad);
}
#quiz-box[data-nb="full"] .q-option .key{
  background:linear-gradient(135deg,var(--a1),var(--a2));
  color:#fff; width:28px; height:28px;
  display:inline-grid; place-items:center; border-radius:9px;
}
#quiz-box[data-nb="full"] .q-option:hover:not(.correct):not(.wrong){
  box-shadow:0 4px 0 rgba(36,31,61,.07);
}
/* the counter was set in a monospace face, which read as telemetry */
#quiz-box[data-nb] .q-progress-label{
  font-family:var(--font-display);
  font-size:var(--nb-small);
  color:var(--nb-muted);
  letter-spacing:0;
}
/* the columns were stretching to the taller side, leaving a tall
   empty box under a two-line question */
#quiz-box[data-nb] .q-split{ align-items:start; }

/* ============================================================
   6. Concept builder — wider, tighter
   ------------------------------------------------------------
   .cb-card is capped at 980px, so on any normal laptop the deck
   sat in a narrow column with the method steps pushed below the
   fold. The steps are short lines of text: they do not need a
   card each with 16px of padding.
   ============================================================ */
#cb-root[data-nb="full"].cb-card,
#cb-root[data-nb="full"]{ max-width:1320px !important; }

#cb-root[data-nb="full"] .cb-instr{
  font-size:calc(var(--nb-body) * 1.16);
  margin:calc(var(--nb-gap) * .7) 0;
}
#cb-root[data-nb="full"] .cb-slot{
  padding:calc(var(--nb-pad) * .68) var(--nb-pad);
  margin-bottom:6px;
}
#cb-root[data-nb="full"] .cb-step{
  padding:calc(var(--nb-pad) * .6) var(--nb-pad);
  margin-bottom:6px;
  font-size:var(--nb-body);
}
#cb-root[data-nb="full"] .cb-example{
  padding:calc(var(--nb-pad) * .85) calc(var(--nb-pad) + 2px);
}
#cb-root[data-nb="full"] .cb-label{
  font-size:var(--nb-small);
  margin:calc(var(--nb-gap) * .8) 0 5px;
}
/* --- navigation (v12.12.0) --- */
#cb-root[data-nb="full"] .cb-nav{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin:calc(var(--nb-gap) * .5) 0;
}
#cb-root[data-nb="full"] .cb-back{
  font:inherit; font-weight:800; font-size:var(--nb-small); cursor:pointer;
  border:2px solid var(--nb-line); background:#fff; color:var(--a1);
  border-radius:999px; padding:5px 14px;
}
#cb-root[data-nb="full"] .cb-back:disabled{ opacity:.35; cursor:default; }
#cb-root[data-nb="full"] .cb-dots{ display:flex; gap:5px; margin-left:auto; flex-wrap:wrap; }
#cb-root[data-nb="full"] .cb-dot{
  font:inherit; font-weight:800; font-size:var(--nb-small); cursor:pointer;
  width:26px; height:26px; padding:0; border-radius:999px;
  border:2px solid var(--nb-line); background:#fff; color:var(--nb-muted);
  transition:transform .14s ease, background .18s ease, color .18s ease;
}
#cb-root[data-nb="full"] .cb-dot:hover{ transform:translateY(-2px); }
#cb-root[data-nb="full"] .cb-dot.seen{
  border-color:var(--nb-green); color:var(--nb-green-ink); background:var(--nb-green-bg);
}
#cb-root[data-nb="full"] .cb-dot.on{
  background:linear-gradient(135deg,var(--a1),var(--a2));
  border-color:transparent; color:#fff;
}

/* --- the height budget ---------------------------------------
   A deck is a single screen: example, five slots, a pool and a
   button. It did not fit on a 22" monitor, let alone a 14"
   laptop, because a slot holding one line of text was 80px tall.

   Roughly, of ~620px on a 14": header and nav 84, example 62,
   instruction 26, two labels 40, pool 3 rows 120, actions 76.
   That leaves about 210px for five slots, so a slot gets 42
   including its margin. Everything below is sized to that. */
#cb-root[data-nb="full"] .cb-slot{
  min-height:0;
  padding:5px 10px;
  margin-bottom:5px;
  display:flex; align-items:center; gap:9px;
}
#cb-root[data-nb="full"] .cb-slot .cb-step{ flex:1 1 auto; margin:0; }
#cb-root[data-nb="full"] .cb-ghost{
  font-size:calc(var(--nb-body) * .95);
  line-height:1.25;
}
#cb-root[data-nb="full"] .cb-num{ width:23px; height:23px; flex:0 0 auto; }
#cb-root[data-nb="full"] .cb-slots{ margin-bottom:2px; }
#cb-root[data-nb="full"] .cb-pool{ display:flex; flex-wrap:wrap; gap:6px; }
#cb-root[data-nb="full"] .cb-pool .cb-step{ margin:0; }
#cb-root[data-nb="full"] .cb-actions{ margin-top:calc(var(--nb-gap) * .8) !important; gap:4px !important; }
#cb-root[data-nb="full"] .cb-head{ padding-bottom:calc(var(--nb-pad) * .5); margin-bottom:0; }

/* The method card is a numbered list of full sentences plus a
   paragraph. .cb-pop sets `width`, not `max-width`, so a
   max-width here never applied — at 460px every step wrapped to
   two lines and the yellow box ran out of room. */
.cb-pop{ width:min(680px, 94vw) !important; padding:20px 24px !important; }
.cb-pop .cb-method{ text-align:left; }
.cb-pop .cb-method li{ margin-bottom:5px; }
.cb-pop .cb-sensei{ text-align:left; }

/* No grid here. .cb-zone's children are four siblings — label,
   slots, label, pool — so a two-column grid puts the labels in one
   column and the content in the other, which is not a layout,
   it is an accident. */

/* ============================================================
   7. Motion
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  [data-nb] *,
  [data-nb] *::before,
  [data-nb] *::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}

/* ============================================================
   8. Real class dates (v12.12.0)
   ------------------------------------------------------------
   "w/c 5 September" told a parent which week it was, not when
   their child is in class. The week now names the real dates,
   with the repeat distinguished from the first sitting — a
   child may attend either, so both are shown, but they should
   not look like the same thing.
   ============================================================ */
.wk-class{
  font-weight:800;
  color:var(--a1);
}
.wk-class-repeat{
  font-weight:700;
  color:var(--nb-muted);
}
.wk-class-repeat::before{
  content:"↻ ";
  color:var(--acc);
  font-weight:800;
}

/* ============================================================
   9. Paper delivery (v12.12.0)
   ------------------------------------------------------------
   The Flourish Club sits the same classwork and homework on
   printed papers. Hiding those rows silently would leave a
   parent comparing notes with a PREP parent thinking their
   child gets less, so the week says what is happening.
   ============================================================ */
.wk-paper{
  margin:0 0 12px;
  padding:9px 14px;
  border-radius:10px;
  border-left:4px solid var(--amber, #FBBF24);
  background:var(--nb-amber-bg, #FEF3C7);
  color:var(--nb-amber-ink, #8A5A00);
  font-size:var(--nb-small, 14px);
  font-weight:700;
}

/* ============================================================
   10. The reveal gate (v12.12.0)
   ------------------------------------------------------------
   A 30-question classwork paper does not fit in a live hour, so
   the teacher opens it in sets. The child waits between sets —
   usually while the teacher talks through the last one — so the
   wait should read as part of the lesson, not as a fault.
   ============================================================ */
.live-gate-body{ text-align:center; padding:26px 20px 30px; }
.live-gate-ico{ font-size:44px; margin:0 0 6px; }
.live-gate-body h3{ font-size:22px; margin:0 0 8px; color:var(--a1); }
.live-gate-body p{ max-width:46ch; margin:0 auto 10px; }

.lb-reveal{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin:0 0 10px; padding:9px 13px;
  border-radius:10px; border-left:4px solid var(--amber, #FBBF24);
  background:var(--nb-amber-bg, #FEF3C7);
  font-size:var(--nb-small, 14px);
}

/* ============================================================
   11. The teacher's pen (v12.12.0)
   ------------------------------------------------------------
   Classes run over Zoom, so the class sees the teacher's shared
   screen — the ink is only ever drawn once, on one machine.
   Nothing here is shown to a student.
   ============================================================ */
.tp-host{ position:relative; }

.tp-canvas{
  position:absolute; inset:0; z-index:5;
  pointer-events:none;              /* until the pen is picked up */
  touch-action:none;                /* or a stylus scrolls the page instead */
}
body.tp-drawing .tp-canvas{ cursor:crosshair; }
/* while the pen is down nothing underneath should react to a stray drag */
body.tp-drawing .tp-host{ user-select:none; }

.tp-bar{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin:0 0 8px; padding:7px 11px;
  border:2px solid var(--nb-line); border-radius:12px;
  background:#fff; font-size:var(--nb-small, 14px);
}
.tp-bar .tp-tools{ display:none; align-items:center; gap:6px; flex-wrap:wrap; }
.tp-bar.is-on .tp-tools{ display:flex; }
.tp-bar.is-on{ border-color:var(--a1); box-shadow:0 0 0 3px rgba(63,39,189,.1); }

.tp-btn{
  font:inherit; font-weight:800; cursor:pointer; line-height:1;
  border:2px solid var(--nb-line); background:#fff; color:var(--ink);
  border-radius:9px; padding:6px 10px;
}
.tp-btn.is-on{ background:var(--a1); border-color:var(--a1); color:#fff; }
.tp-btn:disabled{ opacity:.35; cursor:default; }
.tp-power{ border-color:var(--a1); color:var(--a1); }
.tp-bar.is-on .tp-power{ background:var(--a1); color:#fff; }

.tp-cols{ display:flex; gap:5px; }
.tp-col{
  width:22px; height:22px; border-radius:999px; cursor:pointer;
  border:2px solid rgba(0,0,0,.15); padding:0;
}
.tp-col.is-on{ box-shadow:0 0 0 3px rgba(63,39,189,.35); }

.tp-note{ margin-left:auto; color:var(--nb-muted); font-weight:600; }
@media (max-width:760px){ .tp-note{ display:none; } }

/* v12.28.0 — the pen in the viewer's header: a button, not a row.
   The "nothing is saved" note moves to the button's tooltip; it is the
   one thing a teacher needs to know once, not to read on every slide. */
.tp-bar.in-head{ margin:0; padding:0; border:0; background:transparent; box-shadow:none; gap:6px; }
.tp-bar.in-head .tp-note{ display:none; }
.tp-bar.in-head.is-on{ box-shadow:none; }