/* ============================================================================
   TUTOR SHEET, PAPER AND INK — the notes tutor as the cream sheet on the desk,
   brought to life (owner, 2026-10-22: "the old tutor had more character and
   life", then, of the prototype, "i like the cream look it matches the paper
   and ink", without the reading strip, Check yourself, the pen doodle or a
   ruled box, and the question "nice apple-style ui").

   A LAYER, LOADED AFTER notebook-tutor.css on the notes page only
   (nb_resource_detail.html, under the same chat_panel_state test). That sheet
   still draws the paper: the cream in both themes, the grain, the punched
   edge, the tab and the phone sheet. This one adds:
     · the opening: the note's number in big light sepia figures, its name,
       one plain line (tutor-sheet.js builds them), folding to one line once
       a conversation starts
     · the suggestions as a numbered list between hairlines, following the
       part of the note being read (tutor-sheet.js), and a tip for asking
       about words picked in the note
     · the student's question as a yellow sticky note stuck on the right,
       the picked words copied onto its top when there are some; the tutor's answer in
       black ink, written in a word at a time with its nib, sepia dashes for
       its lists; the notes it used as one line of sepia links; the next
       steps as sepia words, Show me in the note among them
     · the box plain lighter paper with no ruling and no nib, the AI notice
       on Send's line, Send and Stop as ink rectangles
     · the "Ask about this" button that rides a selection in the note
   ============================================================================ */

/* ── No outlines (owner, 2026-10-23: "I DONT like outliens like this, remove it") ──
   The sheet keeps its cream, its grain and its soft shadow, but loses its hairline edge, by day and by night; the punched
   holes lose the hairline rim the day desk gave them, so each is just the page showing through. */
.nb-tutor-body,
html.theme-light .nb-tutor-body { border-color: transparent; }
html.theme-light .nb-chat::before { display: none; }
/* No seam where the punched strip meets the paper (owner, same day, of a grey line down the sheet beside the holes: "this
   line apears when pressing on tutor"). On a screen scaled to 125% or 150% the strip's mask leaves its last column of
   pixels half see-through, so the desk showed through as a line, dark by night (measured 115 against the paper's 236 at
   1.25). The strip now runs one pixel over the paper, so that column sits on cream. */
.nb-tutor-bind { margin-right: -1px; }
@media (max-width: 1080px) {
  .nb-tutor-bind { margin-right: 0; margin-bottom: -1px; }
}

/* ── The sheet opens already written (owner, same day: "when opening tutor it shows shrunk text and then expands, i dont
   like that, it sohuld show text immediately") ──
   The desk's third track grows from the tab's 44px to 400px as the sheet slides in (notebook-page.css 8b), and the sheet
   used to take the track's width, so for 420ms its words wrapped in a narrow strip and spread out as it widened. The
   sheet now keeps its full 400px from the first frame, held to the track's right edge, and only slides; the track still
   grows so the note makes room. It never covers the note on the way in or out: the slide (478px) and the track (356px)
   run on the same curve, so the visible sheet is always narrower than the track. The opening and the suggestions no
   longer fade in one after another as it opens either (notebook-tutor.css's deal-in): they are on the sheet as it
   arrives. The suggestions still deal in when they change with the part of the note being read (.is-swap). */
@media (min-width: 1081px) {
  .nb-page-layout:has(> .nb-tutor-margin) > .nb-tutor-margin { width: 400px; justify-self: end; }
}
html.nb-tutor-open .nb-tutor-sub,
html.nb-tutor-open .nb-tutor-starters > :not(.nb-tutor-starter),
html.nb-tutor-open .nb-tutor-starters:not(.is-swap) > .nb-tutor-starter { animation: none; }

/* ── The head ── */
/* No logo: the tutor is named in plain words, "Ask your tutor", in the head, down the folded tab, and as "Ask" in the phone's
   button (owner, 2026-10-23, after every drawn mark was turned down: "put the ask your tutor") */
.nb-tutor-head { margin-bottom: 22px; }
.nb-tutor-kick {
  font-size: var(--nb-text-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
  text-transform: none;
}
.nb-tutor-tab-lbl {
  margin-top: 0;
  font-size: var(--nb-text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
}
/* the diamond shows only while an answer waits on the folded sheet; the padlock always */
.nb-tutor-tab-dm:not(.nb-tutor-tab-dm--lock) { display: none; }
.nb-tutor-tab--wait .nb-tutor-tab-dm { display: flex; }
#nb-tbar .nb-tutor-orb-word {
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--nb-tutor-ink);
}
#nb-tbar .nb-tutor-orb.is-wait > .nb-tutor-orb-word { color: var(--nb-tutor-accent); }
@media (max-width: 860px) and (orientation: landscape) and (max-height: 500px) {
  #nb-tbar .nb-tutor-orb-word { font-size: 13px; }
}
@media (max-width: 860px) and (orientation: landscape) and (max-height: 319px) {
  #nb-tbar .nb-tutor-orb-word { font-size: 11px; }
}
/* Premium is said by the sheet working; a locked sheet keeps the word as its way to the plans */
span.nb-tutor-chip { display: none; }
.nb-tutor-head .nb-tutor-fold { margin-left: auto; }
.nb-tutor-head a.nb-tutor-chip + .nb-tutor-fold { margin-left: 0; }

/* ── The opening ── */
.nb-tutor-sub {
  margin: 0;
  font-size: var(--nb-text-base);
  line-height: 1.5;
  text-wrap: pretty;
}
.nb-tutor-title { display: block; margin-bottom: 10px; }
.nb-tutor-num {
  display: block;
  margin: 0 0 6px -0.04em;
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-variant-numeric: lining-nums;
  color: var(--nb-tutor-accent);
}
.nb-tutor-sub .nb-tutor-note {
  display: block;
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.nb-tutor-ask { display: block; color: var(--nb-tutor-pencil); text-wrap: balance; }
/* with a conversation under it, the opening folds to one line over a hairline */
.nb-chat:has(.nb-tutor-log:not(:empty)) .nb-tutor-sub { padding-bottom: 14px; border-bottom: 1px solid color-mix(in srgb, var(--nb-tutor-ink) 13%, transparent); }
.nb-chat:has(.nb-tutor-log:not(:empty)) .nb-tutor-title { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.nb-chat:has(.nb-tutor-log:not(:empty)) .nb-tutor-num { margin: 0; font-size: 1.5rem; letter-spacing: -0.02em; }
.nb-chat:has(.nb-tutor-log:not(:empty)) .nb-tutor-sub .nb-tutor-note { font-size: var(--nb-text-md); }
.nb-chat:has(.nb-tutor-log:not(:empty)) .nb-tutor-ask { display: none; }

/* ── Try asking: a numbered list between hairlines, following the part being read ── */
.nb-tutor-starters { align-items: stretch; gap: 0; margin-top: 30px; counter-reset: tsp-q; }
.nb-tutor-starters .nb-tutor-kick2 { margin: 0 0 4px; }
.nb-tutor-starters .nb-tutor-starter {
  counter-increment: tsp-q;
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) 14px;
  gap: 0;
  align-items: baseline;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--nb-tutor-ink) 13%, transparent);
  border-radius: 0;
  font-size: var(--nb-text-base);
  font-weight: 500;
  line-height: 1.4;
  transition: background-color 200ms var(--nb-ease), box-shadow 200ms var(--nb-ease);
}
.nb-tutor-starters .nb-tutor-starter::before,
.nb-tutor-starters .nb-tutor-starter:hover::before {
  content: counter(tsp-q, decimal-leading-zero);
  width: auto;
  height: auto;
  border: 0;
  transform: none;
  opacity: 1;
  color: var(--nb-tutor-accent);
  font-size: var(--nb-text-xs);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.nb-tutor-starters .nb-tutor-starter::after {
  content: "";
  align-self: center;
  width: 14px;
  height: 14px;
  background: var(--nb-tutor-accent);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 200ms var(--nb-ease), transform 200ms var(--nb-ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}
@media (hover: hover) {
  .nb-tutor-starters .nb-tutor-starter:hover {
    --tsp-band: color-mix(in srgb, var(--nb-tutor-accent) 8%, transparent);
    background: var(--tsp-band);
    box-shadow: -12px 0 0 var(--tsp-band), 12px 0 0 var(--tsp-band);
    text-decoration: none;
  }
  .nb-tutor-starters .nb-tutor-starter:hover::after { opacity: 1; transform: none; }
}
.nb-tutor-starters .nb-tutor-starter:active { background: color-mix(in srgb, var(--nb-tutor-accent) 12%, transparent); }
/* the suggestions deal in again when the part being read changes */
.nb-tutor-starters.is-swap > .nb-tutor-starter { animation: nb-tutor-deal 420ms var(--nb-ease) backwards; }
.nb-tutor-starters.is-swap > .nb-tutor-starter:nth-of-type(2) { animation-delay: 60ms; }
.nb-tutor-starters.is-swap > .nb-tutor-starter:nth-of-type(3) { animation-delay: 120ms; }
.nb-tutor-tip {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 18px 0 0;
  font-size: var(--nb-text-sm);
  line-height: 1.5;
  color: var(--nb-tutor-pencil);
}
.nb-tutor-tip b {
  flex: none;
  padding: 1px 7px;
  border-radius: var(--nb-r-sm);
  background: color-mix(in srgb, var(--nb-tutor-accent) 10%, transparent);
  color: var(--nb-tutor-accent);
  font-size: var(--nb-text-xs);
  font-weight: 600;
}

/* ── A conversation ── */
.nb-tutor-log:not(:empty) { margin-top: 26px; }
.nb-tutor-log .chat-turn + .chat-turn { margin-top: 34px; }
/* the student's question: a yellow sticky note stuck to the sheet, its corner folded, a little crooked (owner, 2026-10-23:
   "i like the yellow sticky note look"). The note is drawn by ::before so the fold can be cut out of it while the shadow,
   a filter, still follows the cut. The same in both themes, as the paper is. */
.nb-tutor-log .chat-turn-q {
  --tsp-fold: 16px;
  position: relative;
  isolation: isolate;
  width: fit-content;
  min-width: min(9.5rem, 86%);
  max-width: 86%;
  margin: 0 2px 20px auto;
  padding: 13px 18px 17px 16px;
  border-radius: 0;
  background: none;
  color: #2B2614;
  font-size: var(--nb-text-base);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.005em;
  transform: rotate(1deg);
  filter: drop-shadow(0 1px 0.5px rgba(70, 56, 12, 0.2)) drop-shadow(0 7px 7px rgba(70, 56, 12, 0.13));
}
.nb-tutor-log .chat-turn-q::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, #F3E296, #F7E8A6 22%, #F6E6A2);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--tsp-fold)), calc(100% - var(--tsp-fold)) 100%, 0 100%);
}
.nb-tutor-log .chat-turn-q::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--tsp-fold);
  height: var(--tsp-fold);
  background: linear-gradient(135deg, #FBF1C4, #E3CF7E 50%, transparent 50%);
}
/* no two notes stuck on quite the same */
.nb-tutor-log .chat-turn:nth-child(even) > .chat-turn-q { transform: rotate(-0.8deg); }
.nb-tutor-log .chat-turn:last-child > .chat-turn-q { animation: tsp-stick 520ms var(--nb-ease) backwards; }
@keyframes tsp-stick { from { opacity: 0; transform: translateY(-10px) rotate(4deg) scale(1.04); } }
/* words picked in the note, copied onto the top of the note over what was asked (tutor-sheet.js) */
.nb-tutor-log .chat-turn-q .nb-tutor-quote {
  display: -webkit-box;
  margin: 0 0 7px;
  font-size: var(--nb-text-sm);
  font-weight: 400;
  line-height: 1.45;
  color: #5E5124;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.nb-tutor-log .chat-turn > .esa-tl { margin: 0 0 8px; }
/* the pen line is gone: the Thought Line says the tutor is working (owner, 2026-10-22: "i dont like the thinking animation") */
.nb-tutor-body .nb-tutor-write[data-phase] { display: none; }

/* the answer, in black ink */
.nb-tutor-log .chat-prose[data-tutor-set] { white-space: normal; }
.nb-tutor-log .chat-turn:last-child > .chat-prose[data-tutor-set] { -webkit-mask: none; mask: none; animation: none; }
.nb-tutor-log .nb-tutor-p { margin: 0; white-space: pre-line; }
.nb-tutor-log .chat-prose :is(.nb-tutor-p, .nb-tutor-list) + :is(.nb-tutor-p, .nb-tutor-list) { margin-top: 10px; }
.nb-tutor-log .nb-tutor-list { margin: 0; padding: 0 0 0 1.3em; }
.nb-tutor-log ul.nb-tutor-list { list-style: none; }
.nb-tutor-log ul.nb-tutor-list > li { position: relative; }
.nb-tutor-log ul.nb-tutor-list > li::before { content: ""; position: absolute; left: -1.1em; top: 0.82em; width: 9px; height: 1.5px; border-radius: 1px; background: var(--nb-tutor-accent); }
.nb-tutor-log ol.nb-tutor-list { list-style: decimal outside; }
/* Latest, the jump back to the newest answer, was an outlined capsule: the quiet ink tint of the site's buttons (nb-buttons.css), no edge */
.nb-tutor-jump:not([hidden]) { border-color: transparent; border-radius: var(--nb-r-md); background: color-mix(in srgb, var(--nb-tutor-ink) 7%, var(--nb-tutor-paper)); }
@media (hover: hover) { .nb-tutor-jump:not([hidden]):hover { background: color-mix(in srgb, var(--nb-tutor-ink) 11%, var(--nb-tutor-paper)); } }
.nb-tutor-log ol.nb-tutor-list > li::marker { color: var(--nb-tutor-accent); font-weight: 600; }
.nb-tutor-log .nb-tutor-list > li + li { margin-top: 5px; }
/* an answer as a page (tutor-prose.js; owner, 2026-10-23: "should it not show formatted nicely with nice elements"): headings in
   the ink at 600, bold words in the ink, a tip a sepia-tinted panel with its label in the sepia, a warning a quiet ink-tinted panel
   with its label in the ink (the sheet is the same cream by night, and the site's red turns pale by night); no edges, no icons */
.nb-tutor-log .chat-prose .nb-tutor-h { margin: 20px 0 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; color: var(--nb-tutor-ink); text-wrap: balance; }
.nb-tutor-log .chat-prose > .nb-tutor-h:first-child { margin-top: 2px; }
.nb-tutor-log .chat-prose .nb-tutor-h + :is(.nb-tutor-p, .nb-tutor-list) { margin-top: 6px; }
.nb-tutor-log .chat-prose :is(.nb-tutor-p, .nb-tutor-list, .nb-tutor-h, .nb-tutor-callout) + .nb-tutor-callout { margin-top: 18px; }
.nb-tutor-log .chat-prose .nb-tutor-callout + :is(.nb-tutor-p, .nb-tutor-list, .nb-tutor-h) { margin-top: 18px; }
.nb-tutor-log .chat-prose strong { font-weight: 600; color: var(--nb-tutor-ink); }
/* the tutor's callouts as cards, in the notes' callout colours (owner, 2026-10-23: "make it stand out"): a wash of the colour, no
   edge, the label on its own line in the colour deepened with the sheet's ink (the sheet is the same cream by night, so the
   night's lighter callout colours are deepened to read on it), the rest of the heading as the card's title in the ink */
.nb-tutor-log .chat-prose .nb-tutor-callout {
  --nb-tutor-co: var(--nb-adm-key, var(--nb-tutor-accent));
  margin-top: 18px;
  padding: 14px 16px 16px;
  border-radius: var(--nb-r-lg);
  background: color-mix(in srgb, var(--nb-tutor-co) 11%, transparent);
}
.nb-tutor-log .chat-prose .nb-tutor-callout--warn { --nb-tutor-co: var(--nb-adm-warn); }
.nb-tutor-log .chat-prose .nb-tutor-callout--examiner { --nb-tutor-co: var(--nb-adm-insight); }
.nb-tutor-log .chat-prose .nb-tutor-callout--tip { --nb-tutor-co: var(--nb-adm-tip); }
.nb-tutor-log .chat-prose .nb-tutor-callout-label { margin: 0 0 4px; font-size: 0.8125rem; font-weight: 600; line-height: 1.3; color: color-mix(in srgb, var(--nb-tutor-co) 62%, var(--nb-tutor-ink)); }
.nb-tutor-log .chat-prose .nb-tutor-callout > .nb-tutor-h { margin: 0 0 6px; font-size: 0.9375rem; color: var(--nb-tutor-ink); }
.nb-tutor-log .chat-prose .nb-tutor-callout > :is(.nb-tutor-p, .nb-tutor-list) + :is(.nb-tutor-p, .nb-tutor-list) { margin-top: 8px; }
.nb-tutor-log .chat-prose .nb-tutor-callout ul.nb-tutor-list > li::before { background: color-mix(in srgb, var(--nb-tutor-co) 62%, var(--nb-tutor-ink)); }
.nb-tutor-log .chat-prose .nb-tutor-callout ol.nb-tutor-list > li::marker { color: color-mix(in srgb, var(--nb-tutor-co) 62%, var(--nb-tutor-ink)); }
.nb-tutor-log .chat-prose .nb-tutor-callout .nb-tutor-lead { color: color-mix(in srgb, var(--nb-tutor-co) 62%, var(--nb-tutor-ink)); }
.nb-tutor-log .chat-prose--empty { color: var(--nb-tutor-pencil); }
/* written in: a word at a time, the nib riding the last one (tutor-sheet.js) */
.nb-tutor-log .nb-tutor-w { opacity: 0; transition: opacity 260ms linear; }
.nb-tutor-log .nb-tutor-w.is-on { opacity: 1; }
.nb-tutor-log .nb-tutor-pen { display: inline-block; width: 14px; height: 14px; margin-left: 2px; vertical-align: -1px; color: var(--nb-tutor-accent); animation: tsp-nib 260ms ease-in-out infinite alternate; }
.nb-tutor-log .nb-tutor-pen svg { display: block; width: 14px; height: 14px; }
@keyframes tsp-nib { to { transform: translate(1px, -2px) rotate(-6deg); } }

/* the notes it used: one line, the label then the notes as sepia links */
.nb-tutor-log .chat-cites-label {
  display: inline-block;
  margin: 14px 10px 0 0;
  font-size: var(--nb-text-sm);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--nb-tutor-pencil);
}
.nb-tutor-log .chat-cites { display: inline; margin: 0; padding: 0; list-style: none; }
.nb-tutor-log .chat-cite { display: inline; margin: 0; padding: 0; font-size: var(--nb-text-sm); line-height: 1.6; }
.nb-tutor-log .chat-cite::before { content: none; }
.nb-tutor-log .chat-cite + .chat-cite::before {
  content: "\00B7";
  display: inline;
  width: auto;
  height: auto;
  margin: 0 7px;
  background: none;
  -webkit-mask: none;
  mask: none;
  color: var(--nb-tutor-pencil);
}
.nb-tutor-log .chat-cite > a {
  color: var(--nb-tutor-accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--nb-tutor-accent) 35%, transparent);
  text-underline-offset: 3px;
}
@media (hover: hover) {
  .nb-tutor-log .chat-cite > a:hover { text-decoration-color: currentColor; }
}

/* the quiz an answer carries: a sepia-washed well, its words, and an ink button */
.nb-tutor-log .chat-quiz {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 18px;
  padding: 16px 16px 16px 18px;
  border-radius: var(--nb-r-lg);
  background: color-mix(in srgb, var(--nb-tutor-accent) 8%, transparent);
}
.nb-tutor-quiz-text { display: flex; flex: 1 1 150px; flex-direction: column; gap: 2px; min-width: 0; }
.nb-tutor-quiz-title { font-weight: 600; line-height: 1.35; }
.nb-tutor-quiz-meta { font-size: var(--nb-text-sm); line-height: 1.4; color: var(--nb-tutor-pencil); }
.nb-tutor-log .chat-quiz-link { flex: none; min-height: 38px; border-radius: var(--nb-r-md); font-weight: 600; }

/* every note in a turn: a line under an answer quiet, a turn that stopped a soft panel */
.nb-tutor-log .chat-note { margin-top: 14px; padding-left: 0; border-left: 0; color: var(--nb-tutor-pencil); }
.nb-tutor-log .chat-note--stopped,
.nb-tutor-log .chat-note.chat-note--stopped {
  margin-top: 2px;
  padding: 14px 16px;
  border: 0;
  border-radius: var(--nb-r-lg);
  background: color-mix(in srgb, var(--nb-tutor-ink) 6%, transparent);
  color: var(--nb-tutor-ink);
  font-size: var(--nb-text-base);
}
.nb-tutor-log .chat-note--stopped.nb-tutor-note--error { background: rgba(166, 75, 6, 0.1); }
.nb-tutor-log .chat-note--stopped:is(.nb-tutor-note--info, .nb-tutor-note--premium) { background: rgba(37, 83, 207, 0.08); }
.nb-tutor-log .chat-note .nb-tutor-link { color: var(--nb-tutor-accent); text-underline-offset: 3px; }
.nb-tutor-log .nb-tutor-again {
  display: flex;
  align-items: center;
  width: fit-content;
  min-height: 32px;
  margin: 10px 0 0;
  padding: 0 12px;
  border-radius: var(--nb-r-md);
  background: color-mix(in srgb, var(--nb-tutor-paper) 50%, white);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--nb-tutor-ink) 12%, transparent), 0 0 0 1px color-mix(in srgb, var(--nb-tutor-ink) 14%, transparent);
  color: var(--nb-tutor-ink);
  font-size: var(--nb-text-sm);
  text-decoration: none;
}

/* the next steps under the newest answer: sepia words under a hairline, Show me in the note among them */
.nb-tutor-followups {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--nb-tutor-ink) 13%, transparent);
}
.nb-tutor-followups :is(.nb-tutor-starter, .nb-tutor-show) {
  min-height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--nb-tutor-accent);
  font-family: inherit;
  font-size: var(--nb-text-sm);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: text-decoration-color 160ms var(--nb-ease);
}
.nb-tutor-followups .nb-tutor-starter::before { content: none; }
@media (hover: hover) {
  .nb-tutor-followups :is(.nb-tutor-starter, .nb-tutor-show):hover { background: none; color: var(--nb-tutor-accent); text-decoration-color: currentColor; }
}
.nb-tutor-followups :is(.nb-tutor-starter, .nb-tutor-show):focus-visible { outline: 2px solid var(--nb-tutor-accent); outline-offset: 2px; border-radius: var(--nb-r-sm); }

/* the part of the note an answer is shown in: its heading washed once */
.nb-notes .nb-tutor-flash { animation: tsp-flash 1.8s var(--nb-ease); }
@keyframes tsp-flash {
  0%, 35% {
    background: color-mix(in srgb, var(--nb-blue) 14%, transparent);
    box-shadow: -12px 0 0 color-mix(in srgb, var(--nb-blue) 14%, transparent), 12px 0 0 color-mix(in srgb, var(--nb-blue) 14%, transparent);
  }
}

/* ── The box: lighter plain paper, no ruling, no nib ── */
.nb-tutor-nib,
.nb-tutor-hint { display: none; }
.nb-tutor-input {
  gap: 8px 10px;
  padding: 14px 12px 10px 16px;
  border-color: transparent;
  background-color: color-mix(in srgb, var(--nb-tutor-paper) 55%, white);
  border-radius: var(--nb-r-lg);
  /* the cream fade over the answers scrolling under it, and nothing else: no edge, no drop shadow */
  box-shadow: 0 -14px 12px 2px var(--nb-tutor-paper);
  transition: background-color var(--nb-dur-1) var(--nb-ease);
}
/* in use it only grows whiter: no ring (owner, 2026-10-23: "I DONT like outliens like this, remove it") */
.nb-tutor-input:focus-within {
  border-color: transparent;
  background-color: color-mix(in srgb, var(--nb-tutor-paper) 25%, white);
  box-shadow: 0 -14px 12px 2px var(--nb-tutor-paper);
}
.nb-tutor-body .nb-tutor-input .nb-ai-notice {
  order: 3;
  flex: 1 1 0;
  min-width: 0;
  margin: 0 auto 0 0;
  font-size: var(--nb-text-xs);
  line-height: 1.4;
  color: var(--nb-tutor-pencil);
}
.nb-tutor-body .nb-ai-notice { color: var(--nb-tutor-pencil); }
/* Send and Stop: ink rectangles; Send stays quiet until there is a question to send */
.nb-tutor-input .nb-tutor-send,
.nb-tutor-input .nb-tutor-act--stop:not([hidden]) {
  min-height: 34px;
  margin: 0 0 0 auto;
  padding: 0 14px;
  border: 0;
  border-radius: var(--nb-r-md);
  background: color-mix(in srgb, var(--nb-tutor-ink) 8%, transparent);
  color: var(--nb-tutor-ink);
  text-decoration: none;
}
.nb-tutor-input:has(.nb-tutor-field:not(:placeholder-shown)) .nb-tutor-send:not(:disabled),
.nb-tutor-input .nb-tutor-act--stop:not([hidden]) { background: var(--nb-tutor-ink); color: var(--nb-tutor-paper); }
@media (hover: hover) {
  .nb-tutor-input .nb-tutor-send:hover:not(:disabled) { background: color-mix(in srgb, var(--nb-tutor-ink) 14%, transparent); border-color: transparent; transform: none; }
  .nb-tutor-input:has(.nb-tutor-field:not(:placeholder-shown)) .nb-tutor-send:hover:not(:disabled) { background: color-mix(in srgb, var(--nb-tutor-ink) 84%, var(--nb-tutor-paper)); }
  .nb-tutor-input .nb-tutor-act--stop:not([hidden]):hover { background: color-mix(in srgb, var(--nb-tutor-ink) 84%, var(--nb-tutor-paper)); }
}
.nb-tutor-input .nb-tutor-send:focus-visible { border-radius: var(--nb-r-md); }
.nb-tutor-jump:not([hidden]) { border-radius: var(--nb-r-md); }
.nb-tutor-status,
.nb-tutor-act { color: var(--nb-tutor-pencil); }

/* ── A sheet that cannot ask: the same opening, the questions numbered, the card with ink ways in ── */
.nb-tutor-examples { margin-top: 30px; }
.nb-tutor-example-list { gap: 0; counter-reset: tsp-q; }
.nb-tutor-example {
  counter-increment: tsp-q;
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--nb-tutor-ink) 13%, transparent);
  font-size: var(--nb-text-base);
}
.nb-tutor-example::before {
  content: counter(tsp-q, decimal-leading-zero);
  position: static;
  width: auto;
  height: auto;
  border: 0;
  transform: none;
  color: var(--nb-tutor-accent);
  font-size: var(--nb-text-xs);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.nb-tutor-lock-ic,
.nb-tutor-body .nb-ai-notice .ai-notice-ic { display: none; }
.nb-tutor-lock { background-color: color-mix(in srgb, var(--nb-tutor-paper) 55%, white); border-color: transparent; }
/* ── Not studying this subject (owner, 2026-10-23, of a bare line and an underlined link: "its so bland and ugly"): the sheet opens
   like the others, the note's number and name and its own line; what the tutor answers, numbered; then one card in the composer's
   place, lighter paper with the sheet's soft lift and no edge, its words in the ink and the way in as Send's ink rectangle ── */
.nb-tutor-join {
  order: 9;
  position: relative;
  z-index: 1;
  margin: 26px 0 0;
  padding: 18px 18px 20px;
  border-radius: var(--nb-r-lg);
  background-color: color-mix(in srgb, var(--nb-tutor-paper) 55%, white);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--nb-tutor-ink) 10%, transparent);
  color: var(--nb-tutor-ink);
}
.nb-tutor-join .nb-tutor-quiet-line { margin: 0; font-size: var(--nb-text-base); font-weight: 600; line-height: 1.4; color: var(--nb-tutor-ink); }
.nb-tutor-join .nb-tutor-lock-sub { margin-top: 6px; color: var(--nb-tutor-pencil); }
.nb-tutor-join .nb-tutor-lock-ways { margin-top: 16px; }
.nb-tutor-join .nb-tutor-lock-go { order: 0; margin: 0; min-height: 40px; padding-inline: 18px; border-radius: var(--nb-r-md); text-decoration: none; }
.nb-tutor-lock .nb-tutor-lock-go { min-height: 38px; border-radius: var(--nb-r-md); }

/* ── Ask about this: rides under words picked in the note (tutor-sheet.js) ── */
.nb-tutor-asksel {
  position: fixed;
  z-index: 880;
  display: none;
  align-items: center;
  height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--nb-r-md);
  background: var(--nb-tutor-ink);
  color: var(--nb-tutor-paper);
  font-family: var(--nb-sans);
  font-size: var(--nb-text-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transform: translateX(-50%);
  box-shadow: 0 10px 28px -10px color-mix(in srgb, var(--nb-tutor-ink) 70%, transparent);
}
.nb-tutor-asksel.is-on { display: inline-flex; }
.nb-tutor-asksel.is-swap { animation: tsp-rise 220ms var(--nb-ease); }
@keyframes tsp-rise { from { opacity: 0; transform: translate(-50%, 6px); } }
.nb-tutor-asksel:focus-visible { outline: 2px solid var(--nb-tutor-accent); outline-offset: 2px; }
html.note-focus-mode .nb-tutor-asksel { display: none; }

/* ── Phones and tablets ── */
@media (max-width: 1080px) {
  .nb-tutor-num { font-size: 2.75rem; }
  .nb-tutor-sub .nb-tutor-note { font-size: 1.5rem; }
}
@media (pointer: coarse) {
  .nb-tutor-input .nb-tutor-send,
  .nb-tutor-input .nb-tutor-act--stop:not([hidden]),
  .nb-tutor-followups :is(.nb-tutor-starter, .nb-tutor-show),
  .nb-tutor-asksel { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .nb-tutor-starters .nb-tutor-starter,
  .nb-tutor-starters .nb-tutor-starter::after,
  .nb-tutor-followups :is(.nb-tutor-starter, .nb-tutor-show) { transition: none; }
  .nb-tutor-log .chat-turn > :is(.chat-turn-q, .nb-tutor-quote),
  .nb-tutor-starters.is-swap > .nb-tutor-starter,
  .nb-tutor-log .nb-tutor-pen,
  .nb-tutor-asksel.is-swap,
  .nb-notes .nb-tutor-flash { animation: none; }
  .nb-tutor-log .nb-tutor-w { opacity: 1; transition: none; }
}