/* ==========================================================================
 * 帳 THE LEARNER'S BOOK: the notebook's dress (Phase 5, seat P4; js/course-book.js)
 *
 * The room's own dress, nothing minted (css/course-lesson.css: the tokens, the
 * ten type steps on the lesson unit, the ink dress for pictures, the seal, the
 * right drawer): one paper, one ink, the past ink for what an earlier lesson
 * wrote, the seal's vermilion for a lesson closed. Cards rest; nothing floats,
 * glows or counts. (⚖ 20 October 2026, the owner's "drop it": the kintsugi gold
 * under a word that slipped and held left the book's lists and the word card.)
 *
 * The book's overlay lives on <body>, outside #kotobaLesson, so it declares the
 * room's tokens itself (the same values, read from the room where they exist);
 * the pieces printed INSIDE the room (.cb-embed: the fork, the close's entry,
 * the quiet link) read the room's own.
 * ==========================================================================*/

.cb-root,
.cb-embed,
.cb-glance {
    --cb-u: var(--cl-u, clamp(16px, 9px + 0.625vw, 19px));
    --cb-paper: var(--cl-paper, #F3F0EA);
    --cb-sheet: var(--cl-sheet, #FBF8F2);
    --cb-ink: var(--cl-ink, #3A3633);
    --cb-ink-rgb: 58, 54, 51;
    --cb-past: var(--cl-ink-past, #57534E);
    --cb-quiet: var(--cl-quiet, #6E6860);
    --cb-jp: var(--color-jp-text, #523E1E);
    --cb-rule: var(--cl-rule, #D8D2C8);
    --cb-accent: var(--cl-accent, #3D5A80);
    /* the owner's walk of 11 October 2026, item 13: the two kinds of sound in the app's one convention (css/tokens.css:
       kun the accent indigo, on the kanji surfaces' terracotta; the kanji page, the wall and the peek wear the same) */
    --cb-kun: var(--color-accent, #3D5A80);
    --cb-on: var(--color-kanji-on, #9E5E43);
    /* (18 October 2026: the readings as the app groups them; a word said as one wears the app's まるごと bronze,
       css/kanji-page.css .kjr-family--whole) */
    --cb-whole: #8A6A33;
    --cb-known: var(--cl-known, color-mix(in srgb, rgb(74, 107, 58) 78%, #3A3633));
    --cb-hanko: 181, 73, 58;
    --cb-sh: 67, 50, 30;
    --cb-font-jp: var(--font-jp, 'Klee One', 'Noto Sans JP', serif);
    --cb-font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --cb-font-tell: var(--cl-font-tell, 'Literata', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif);
    --cb-k2: calc(4.4 * var(--cb-u));
    --cb-k3: calc(2.9 * var(--cb-u));
    --cb-k4: calc(2.05 * var(--cb-u));
    --cb-k5: calc(1.6 * var(--cb-u));
    --cb-k6: calc(1.125 * var(--cb-u));
    --cb-e1: calc(1.5 * var(--cb-u));
    --cb-e2: var(--cb-u);
    --cb-e3: calc(0.8125 * var(--cb-u));
    --cb-e4: calc(0.6875 * var(--cb-u));
    --cb-col: calc(45 * var(--cb-u));                 /* 765 at 1280, 855 from 1600: the room's column */
    --cb-gutter: calc(4 * var(--cb-u));
    --cb-ind: calc(5.2 * var(--cb-u) + 0.9rem);        /* the entry's label column */
    --cb-ring: 2px solid var(--cb-accent);
}

/* ── the overlay ─────────────────────────────────────────────────────────── */
.cb-root {
    position: fixed;
    inset: 0;
    /* over the lesson (9400), under the hall (9500) and the high ladder's floor
       (tests/voice/zindex_ladder_test.js): opened from the hall, the book steps the
       hall down and back up, as the lesson does (js/course-book.js mount) */
    z-index: 9450;
    font-family: var(--cb-font-ui);
    color: var(--cb-ink);
    -webkit-font-smoothing: antialiased;
}
.cb-root [lang="ja"],
.cb-embed [lang="ja"] { font-family: var(--cb-font-jp); }
:where(.cb-root, .cb-embed) button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    text-align: inherit;
    /* the integrator, live in the app: components.css gives EVERY <button> a raised shadow and a
       bigger one on hover (0-0-1 and 0-1-1), so each word of the book and of the close's entry
       floated on a pale card; the book's buttons are flat print (this sheet loads after it) */
    box-shadow: none;
}
:where(.cb-root, .cb-embed) button:hover { box-shadow: none; }
:where(.cb-root, .cb-embed) button:focus-visible { outline: var(--cb-ring); outline-offset: 2px; border-radius: 2px; }
:where(.cb-root) p { margin: 0; }
:where(.cb-root, .cb-embed) i { font-style: normal; }

/* ── the pictures: the room's ink dress (washi lifted, multiplied, feathered) ── */
/* the seat is the paper itself: a picture row inside its own compositing group (an opacity
   arrival, a transform) multiplies against its seat, never the page (the room: .cl-kpic--ink) */
.cb-ink { display: block; position: relative; overflow: hidden; background: var(--cb-paper); }
/* Phase 5 P5 (decision 72, R-102): a portrait whose ink fills less than the floor of its seat is
   printed one size up INSIDE the seat (CourseLesson.seatThumbs measures it; .cb-ink clips) */
.cb-ink img.cl-thumb--up { transform: translate(var(--cl-tx, 0%), var(--cl-ty, 0%)) scale(var(--cl-tz, 1)); transform-origin: 50% 50%; }
.cb-side .cb-ink { background: var(--cb-sheet); }
.cb-ink img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: url(#cl-washi);
    mix-blend-mode: multiply;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent),
                        linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent),
                linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
    mask-composite: intersect;
}

/* ── the book: the table of contents grown by hand ───────────────────────── */
.cb-book {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    background: var(--cb-paper);
}
.cb-book:focus { outline: none; }
.cb-book-inner {
    box-sizing: border-box;
    width: min(var(--cb-col), calc(100% - 3rem));
    min-height: 100%;
    margin: 0 auto;
    padding: calc(2.4 * var(--cb-u)) 0 calc(1.4 * var(--cb-u));
    display: flex;
    flex-direction: column;
}
.cb-book-head { display: flex; align-items: baseline; gap: 0.9rem; margin: 0 0 0.55rem; }
.cb-book-name {
    margin: 0;
    font-weight: 400;
    font-size: var(--cb-k4);
    line-height: 1.1;
    letter-spacing: 0.06em;
    color: var(--cb-jp);
}
.cb-book-sub { font-size: var(--cb-e3); color: var(--cb-quiet); }
.cb-book-foot { margin-top: auto; padding-top: 1rem; }
.cb-back {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid transparent;
    color: var(--cb-quiet);
    font-size: var(--cb-k6);
}
.cb-back i { font-size: var(--cb-e3); }
.cb-back:hover { color: var(--cb-accent); border-bottom-color: rgba(61, 90, 128, 0.4); }

/* one entry a lesson, one rule under it; the seal at the rule's end */
.cb-ch {
    position: relative;
    padding: 0.5rem 0 0.6rem;
    border-bottom: 1px solid var(--cb-rule);
}
.cb-ch-head { display: flex; align-items: baseline; gap: 0.9rem; padding-right: 64px; }
.cb-ch-n {
    flex: none;
    width: calc(5.2 * var(--cb-u));
    font-size: var(--cb-e4);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cb-quiet);
}
.cb-ch-title { font-size: var(--cb-k6); line-height: 1.3; color: var(--cb-jp); }
.cb-ch-en { font-size: var(--cb-e3); color: var(--cb-quiet); }
.cb-ch-kanji {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.75rem;
    margin: 0.05rem 64px 0 var(--cb-ind);
    font-size: var(--cb-k4);
    line-height: 1.18;
    color: var(--cb-past);
}
.cb-k { line-height: inherit; color: inherit; transition: color var(--duration-fast, .15s) ease; }
.cb-k:hover { color: var(--cb-accent); }
.cb-ch-words {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.2rem 1.05rem;
    margin: 0.15rem 64px 0 var(--cb-ind);
    padding: 0;
    font-size: var(--cb-k6);
    color: var(--cb-past);
}
.cb-ch-words--kana { padding-bottom: calc(1.25 * var(--cb-e3)); row-gap: calc(1.4 * var(--cb-e3)); }
.cb-wc { position: relative; }
.cb-w {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.35;
    color: inherit;
}
.cb-w-word { transition: color var(--duration-fast, .15s) ease; white-space: nowrap; }
.cb-w:hover .cb-w-word,
.cb-w:focus-visible .cb-w-word { color: var(--cb-accent); }
/* ⭐ the ONE mark: kana under a word that comes back (⚖ 20 October 2026, the owner's "drop it": the gold underline of a
   word that slipped and held, .cb-w--gold and .cb-gold, left every course surface) */
.cb-w-kana {
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 0.05rem;
    font-size: var(--cb-e3);
    line-height: 1.2;
    letter-spacing: 0.04em;
    white-space: nowrap;
    color: var(--cb-quiet);
    pointer-events: none;
}
/* the peek: the sound and the meaning under the pointer, and nowhere else */
.cb-peek {
    position: absolute;
    left: -0.6rem;
    top: calc(100% + 0.3rem);
    z-index: 3;
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    padding: 0.35rem 0.6rem 0.4rem;
    background: var(--cb-sheet);
    box-shadow: 0 1px 0 var(--cb-rule), 0 2px 8px rgba(var(--cb-sh), 0.06);
    border-radius: 4px;
    white-space: nowrap;
    font-family: var(--cb-font-ui);
    font-size: var(--cb-e3);
    line-height: 1.3;
    color: var(--cb-ink);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-fast, .15s) ease;
}
.cb-peek-r { font-size: var(--cb-k6); color: var(--cb-jp); letter-spacing: 0.04em; }
.cb-w:hover .cb-peek,
.cb-w:focus-visible .cb-peek { opacity: 1; }
.cb-ch-seal { position: absolute; right: 0; top: 0.45rem; width: 56px; height: 56px; line-height: 0; }
.cb-seal { display: block; width: 100%; height: 100%; transform: rotate(-4deg); overflow: visible; }
.cb-seal-rim { fill: none; stroke: rgba(var(--cb-hanko), 0.85); stroke-width: 2.6; }
.cb-seal-k { font-family: var(--cb-font-jp); font-weight: 700; font-size: 40px; fill: rgba(var(--cb-hanko), 0.85); }

/* ⭐ the newest lesson stands in ink, in the heavier hand, its words over their portraits
   across the whole column (the map's line of little paintings; twelve words, not shrunk) */
.cb-ch--now .cb-ch-kanji,
.cb-ch--now .cb-ch-words { color: var(--cb-jp); }
.cb-ch--now .cb-ch-kanji { font-weight: 600; }
.cb-ch-words--pics {
    margin: 0.55rem 0 0;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.45rem 0.3rem;
}
.cb-ch-words--pics .cb-w { align-items: center; min-width: calc(3.4 * var(--cb-u)); }
.cb-w-pic { width: calc(3.4 * var(--cb-u)); height: calc(3.4 * var(--cb-u)); margin: 0 0 0.15rem; }
.cb-ch-words--pics .cb-w-kana { left: 50%; transform: translateX(-50%); }
/* in the close the kana stands in the flow: a second row of portraits sits right under it */
.cb-entry .cb-w-kana { position: static; margin-top: 0.05rem; }
.cb-ch-words--pics .cb-peek,
.cb-entry .cb-peek { left: 50%; transform: translateX(-50%); }
.cb-ch-seal--held { pointer-events: none; }

/* ── the close's word list as the book's entry (entryHTML) ────────────────── */
.cb-entry { margin: 0; }
.cb-entry-words {
    list-style: none;
    margin: 0;
    padding: 0 0 calc(1.3 * var(--cb-e3));
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.7rem 0.4rem;
}
.cb-entry .cb-wc { display: flex; flex-direction: column; align-items: center; }
/* the phrases a word anchors, under it, quiet (the pattern listed under its word) */
.cb-w-ph { display: block; margin-top: 0.15rem; font-size: var(--cb-e3); line-height: 1.35; letter-spacing: 0.02em; text-align: center; white-space: nowrap; color: var(--cb-jp); }
.cb-entry .cb-w { align-items: center; color: var(--cb-jp); }
.cb-entry .cb-w-pic { width: calc(4 * var(--cb-u)); height: calc(4 * var(--cb-u)); }
.cb-entry .cb-w-word { font-size: var(--cb-k5); line-height: 1.25; }
.cb-entry:not(.cb-entry--pics) .cb-entry-words { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; }

/* ── the quiet link (the close's, beside はじめから) and the hall's ─────────── */
.cb-link,
.hc-notebook {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border: 0;
    border-bottom: 1px solid transparent;
    background: none;
    box-shadow: none;      /* the integrator: no global button shadow on a quiet link (components.css) */
    font: inherit;
    font-size: var(--cb-k6, 1.2rem);
    color: var(--cb-quiet, #6E6860);
    cursor: pointer;
}
.cb-link i,
.hc-notebook i { font-style: normal; font-size: var(--cb-e3, 0.85rem); }
.hc-notebook [lang="ja"] { font-family: var(--font-jp, 'Klee One', 'Noto Sans JP', serif); }
.cb-link:hover,
.hc-notebook:hover { color: var(--cb-accent, #3D5A80); border-bottom-color: rgba(61, 90, 128, 0.4); box-shadow: none; }
.cb-link:focus-visible,
.hc-notebook:focus-visible { outline: 2px solid var(--cb-accent, #3D5A80); outline-offset: 2px; }
/* ⭐ Phase 5 M1 (repair round 1): THE HALL'S LINK, SEATED IN THE COURSE CARD. js/home-hall.js
   renderCourseCard prints .hc-notebook after the card's presses (P4 ASK 7; the main session's ASK 1).
   Appended to the card's flex row as it stands, it was a third column jammed into the card's top right
   corner, flush with its edge, at the title's size (shot with ASK 1 on a scratch copy of the hall).
   Here it takes its own quiet line under the presses, at the card's left, at the card line's size: a
   zero-height breaker (::after) ends the presses' row, the book press grows from nothing so the two
   presses never wrap apart, and the link keeps its own width, so its hover underlines its words, not
   the card. Only a card that holds the link changes; nothing here moves a hall without the book. */
.hall-course:has(> .hc-notebook) { flex-wrap: wrap; }
.hall-course:has(> .hc-notebook) > .hc-book { flex-basis: 0; }
.hall-course:has(> .hc-notebook)::after { content: ''; flex: 0 0 100%; order: 1; height: 0; }
.hall-course > .hc-notebook { order: 2; align-self: flex-start; margin: 0 0 10px 12px; padding: 2px 0 3px; gap: 0.45rem; font-size: 15px; line-height: 1.3; }
.hall-course > .hc-notebook i { font-family: 'Inter', sans-serif; font-size: 12.5px; }

/* ── ⭐ THE ONE ASIDE SHEET (the elevate round, 10 October 2026; CONTRACT 14.11 ¶1, ¶4; REPORT §5.2 (2),
   §5.5; GUARD B9). Every side (the kanji drawer, the word panel, 活用 Forms, 数 Counting, the character's page
   told) is one sheet of sheet paper laid in from the right edge over the column: the
   column's width (js/course-book.js seatFrame reads the column's box and lays --cb-sheet-w on the layer),
   from the head's foot to just above the foot (the layer's top and bottom, in px), so the head and the foot
   stay live and are never covered (B9: the old 340 px drawer covered half of 次へ Next). The page beneath
   dims to 60 per cent (a paper veil at 40 per cent over it). The course's one slide: 260 ms on the house
   curve. Cards rest: a 1 px rule on the sheet's left edge, the faintest sumi shadow, no lift. ── */
.cb-root--aside { pointer-events: none; }
.cb-root--aside .cb-layer { pointer-events: auto; }
.cb-layer { position: absolute; inset: 0; }
.cb-layer--sheet {
    left: 0;
    right: 0;
    background-color: rgba(243, 240, 234, 0);
    transition: background-color 260ms cubic-bezier(0.4, 0, 0.2, 1);
}
.cb-layer--sheet.cb-layer--in { background-color: rgba(243, 240, 234, 0.4); }
.cb-side {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    width: var(--cb-sheet-w, min(var(--cb-col), 100%));
    max-width: 100%;
    display: flex;
    flex-direction: column;
    background: var(--cb-sheet);
    border-left: 1px solid var(--cb-rule);
    box-shadow: -2px 0 10px rgba(var(--cb-sh), 0.04);
    transform: translateX(100%);
    transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
}
.cb-side--in { transform: none; }
.cb-side-body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: calc(1.6 * var(--cb-u)) calc(2.2 * var(--cb-u)) calc(1.3 * var(--cb-u));
}
.cb-side-foot {
    flex: none;
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    padding: 0.8rem calc(2.2 * var(--cb-u)) 1.1rem;
}
.cb-x {
    position: absolute;
    top: 0.7rem;
    right: 0.9rem;
    z-index: 2;
    padding: 0.4rem 0.5rem;
    font-size: var(--cb-e2);
    line-height: 1;
    color: var(--cb-quiet);
    border-radius: 4px;
    transition: color 160ms ease;
}
.cb-x:hover { color: var(--cb-accent); }
@media (prefers-reduced-motion: reduce) {
    .cb-side, .cb-layer--sheet { transform: none; transition: none; }
}

/* the drawer's head: the glyph, what it means, the card's hook */
.cb-dr-glyph { font-size: var(--cb-k2); line-height: 1.05; color: var(--cb-jp); }
.cb-dr-mean { margin: 0.6rem 0 0; font-size: var(--cb-e1); line-height: 1.3; color: var(--cb-ink); }
.cb-dr-hook { margin: 0.45rem 0 0; font-size: var(--cb-e3); line-height: 1.5; color: var(--cb-quiet); }

/* ── B3 (the simpler pipeline, 6 October 2026; CONTRACT §6.2): THE WORD PAGE'S PRESS in this housing:
   活用 Forms on a verb or an adjective, 数 Counting on a counter (js/course-book.js pressHTML). The dress is
   the mock's (docs/course_v2/reviews/word_page_2026-10-04/mock/mock.css), ported under cb- names: the title
   kanji and English in the quiet ink, the glyph with its sound over the kanji, the meaning as the drawer
   prints it; the forms each under their name in the small capitals of the drawer's captions, a hairline
   between rows (the main app's table has one), none set above another; the counting rows one to five and
   six to ten in two columns, the question row under them, the rows whose sound changes in darker ink ─ */
.cb-pr-title { margin: 0 0 1.1rem; font-size: var(--cb-e2); line-height: 1.3; color: var(--cb-quiet); }
.cb-pr-title [lang="ja"] { margin-right: 0.2em; font-size: var(--cb-k6); color: var(--cb-jp); }   /* (a space follows it in the markup) */
.cb-pr-glyph { display: inline-block; }
.cb-pr-glyph ruby { ruby-position: over; ruby-align: center; }
.cb-pr-glyph rt { font-size: var(--cb-k6); font-weight: 600; line-height: 1.4; letter-spacing: 0.12em; color: var(--cb-quiet); }
.cb-pr-glyph .cb-pr-wave { font-size: 0.5em; color: var(--cb-quiet); }
.cb-forms { list-style: none; margin: 1.4rem 0 0; padding: 0; }
.cb-form { padding: 0.55rem 0 0.5rem; }
.cb-form + .cb-form { border-top: 1px solid var(--cb-rule); }
.cb-form-name {
    margin: 0;
    font-size: var(--cb-e4);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cb-quiet);
}
/* "て form": the kana keeps its own face inside the small capitals */
.cb-form-name [lang="ja"] { font-family: var(--cb-font-jp); font-size: 1.15em; letter-spacing: 0; font-weight: 400; color: var(--cb-jp); }
.cb-form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.1rem 0.45rem;
    margin: 0.15rem 0 0;
    min-height: 2rem;
}
.cb-form-w { font-size: var(--cb-k6); line-height: 1.35; color: var(--cb-jp); white-space: nowrap; }
.cb-form-r { font-size: var(--cb-e3); line-height: 1.35; letter-spacing: 0; font-feature-settings: "palt"; color: var(--cb-past); white-space: nowrap; }
.cb-form-row .cb-chip { margin-left: 0.2rem; width: 1.9rem; height: 1.9rem; }
.cb-count {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
    gap: 0.55rem 1rem;
    list-style: none;
    margin: 1.4rem 0 0;
    padding: 0;
}
.cb-c { display: flex; align-items: baseline; gap: 0 0.5rem; white-space: nowrap; }
.cb-c-w { font-size: var(--cb-k6); line-height: 1.3; color: var(--cb-past); }
.cb-c-r { font-size: var(--cb-e3); line-height: 1.3; letter-spacing: 0.04em; color: var(--cb-quiet); }
.cb-c--changed .cb-c-w { color: var(--cb-jp); font-weight: 600; }
.cb-c--changed .cb-c-r { color: var(--cb-ink); font-weight: 600; }
.cb-count-q { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem; margin: 0.9rem 0 0; }
.cb-count-q .cb-c-en { font-size: var(--cb-e3); color: var(--cb-quiet); }
.cb-pr-foot { margin: 1.5rem 0 0; font-size: var(--cb-e3); line-height: 1.5; color: var(--cb-quiet); }
/* (the Why two ways? panel and its definition at 24u left with the press: the owner, 11 October 2026, Round C) */
.cb-dr-second {
    margin: 1.2rem 0 0;
    font-family: var(--cb-font-tell);
    font-size: var(--cb-e2);
    line-height: 1.55;
    color: var(--cb-ink);
}
.cb-dr-extra { margin-top: 1.4rem; }

/* (18 October 2026: the drawer's list of every word met gave way to the readings block the kanji card prints, the app's
   groups below; the reading's span in ink, spanHTML, stays the sheet's: never a string search) */
.cb-on { color: var(--cb-ink); }
.cb-off { color: rgba(110, 104, 96, 0.68); }

/* the drawer's foot: the kanji's own page, one press away (the honest horizon) */
.cb-kpage {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: var(--cb-k6);
    color: var(--cb-quiet);
}
.cb-kpage i { font-size: var(--cb-e3); }
.cb-kpage:hover { color: var(--cb-accent); }

/* ── the word card (the word panel until 17 October 2026): portrait, word, sound, meaning, then its story, its lines,
   its press, and its kanji at the foot (cards CONTRACT §3.1) ── */
.cb-pn-lede {
    margin: 0 0 0.75rem;
    font-size: var(--cb-e4);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cb-quiet);
}
/* ⭐ THE WORD'S TYPE ON A WORD CARD (the owner's pick B, 24 October 2026: "as for parts of speech tag I agree with your
   recommendation B"; js posTagHTML): it joins the card's LESSON n line after a quiet dot ("LESSON 13 · 名詞 NOUN"), and the
   guest's small card's own line the same way (the lead: one voice on every word card), in the micro-label voice (Inter
   600 at --cb-e4, tracked caps; the kanji in the chrome face, a size up and untracked, D33: never kana over it), the quiet
   ink, the dot in the rule's. The lesson's word page prints the same pair over its word (css/course-lesson.css .cl-pos). */
.cb-root .cb-pos {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45em;
    margin-left: 0.7em;
    white-space: nowrap;
    font-family: var(--cb-font-ui);
    font-size: var(--cb-e4);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cb-quiet);
}
.cb-root .cb-pos::before { content: '·'; margin-right: 0.7em; color: var(--cb-rule); letter-spacing: 0; }
.cb-root .cb-pos .cb-pos-en { font-style: normal; }
.cb-root .cb-pos .cb-pos-k {
    font-family: 'Noto Sans JP', var(--cb-font-ui);
    font-size: var(--cb-e3);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--cb-quiet);
}
.cb-pn-head { display: flex; align-items: flex-start; gap: 1rem; }
.cb-pn-pic { flex: none; width: 112px; height: 112px; }
.cb-pn-text { min-width: 0; padding-top: 0.2rem; }
.cb-pn-word { font-size: var(--cb-k3); line-height: 1.05; color: var(--cb-jp); }
.cb-pn-read {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.45rem 0 0;
    font-size: var(--cb-k6);
    letter-spacing: 0.1em;
    color: var(--cb-jp);
}
/* ⭐ U-055 (the deep review of 25 October 2026; the type rule of 10 October): the card's meaning and its lines' English are
   the teacher's English, so the panel sets them in the teacher's face, as the word page does */
.cb-pn-gloss { margin: 0.3rem 0 0; font-family: var(--cb-font-tell); font-size: var(--cb-e2); font-weight: 500; line-height: 1.35; color: var(--cb-ink); }
/* ⭐ the card's one relation line (the owner's D44, 19 October 2026): quiet, under the meaning; each opposite a press to its
   own card, in the ink a press wears (the hover keeps its pointer and its ink; nothing opens on hover, rule 30) */
.cb-pn-opp { margin: 0.35rem 0 0; font-size: var(--cb-e3); line-height: 1.4; color: var(--cb-quiet); }
.cb-pn-opp-w { color: var(--cb-accent); border-bottom: 1px solid transparent; }
.cb-pn-opp-w [lang="ja"] { font-family: var(--cb-font-jp); font-size: 1.1em; }
.cb-pn-opp-w .cb-pn-opp-r { font-size: 0.95em; color: var(--cb-past); }
.cb-pn-opp-w:hover { border-bottom-color: rgba(61, 90, 128, 0.4); }
.cb-pn-opp-w:focus-visible { outline: var(--cb-ring); outline-offset: 2px; border-radius: 2px; }
/* ⭐ THE WORD CARD'S STORY (17 October 2026; the owner's answer Q2: the word's story whole, in the app's word-story format;
   js storyBlockHTML): the lesson's own dress (css/course-lesson.css .cl-wstory-*), ported: the lead in the story's serif
   at the story's size; a mark on its own line, the kanji in the chrome's face in the word's warm ink, then the English in
   the micro-labels' tracked caps, no box (a tinted box means "press me"); a note in the sans, one step under; no Japanese
   word broken across two lines. Where the card would run past the sheet the notes fold under `続き More` (js fitStory),
   the beats' own fold dress (.cb-tell-more-press). */
.cb-pn-story { margin: 1.15rem 0 0; }
.cb-pn-lead { margin: 0; font-family: var(--cb-font-tell); font-size: var(--cb-e2); line-height: 1.55; color: var(--cb-ink); }
.cb-pn-notes:focus { outline: none; }
.cb-pn-mark { display: flex; align-items: baseline; gap: 0 0.55em; margin: 0.8rem 0 0.2rem; line-height: 1.3; }
.cb-root .cb-pn-mark-k { font-family: 'Noto Sans JP', var(--cb-font-ui); font-size: var(--cb-e2); font-weight: 500; color: var(--cb-jp); }
.cb-pn-mark-en { font-size: var(--cb-e4); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cb-quiet); }
.cb-pn-note { margin: 0; font-size: var(--cb-e3); line-height: 1.4; color: var(--cb-ink); }
.cb-pn-lead [lang="ja"], .cb-pn-note [lang="ja"] { color: var(--cb-jp); white-space: nowrap; }
.cb-pn-more {
    display: inline-flex;
    align-items: baseline;
    padding: 0.15rem 0;
    font-family: var(--cb-font-ui);
    font-size: var(--cb-e4);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cb-quiet);
    transition: color 160ms ease;
}
.cb-pn-more { margin-top: 0.55rem; }
.cb-pn-more[hidden] { display: none; }
.cb-root .cb-pn-more [lang="ja"] {
    margin-right: 0.45em;
    font-family: 'Noto Sans JP', var(--cb-font-ui);
    font-size: var(--cb-e2);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--cb-jp);
    transition: color 160ms ease;
}
.cb-pn-more i { margin-left: 0.4em; letter-spacing: 0; }
.cb-pn-more:hover, .cb-root .cb-pn-more:hover [lang="ja"] { color: var(--cb-accent); }
/* THE CARD'S LINES (js panelLinesHTML): today's dress exactly (the owner's ruling of 17 October 2026: "keep the previous
   version, just make the logical changes"), less the label (his answer Q1) and with the line's sound after its Japanese,
   the ear the book's piece prints (.cb-pc-jp) */
.cb-pn-lines { list-style: none; margin: 1.4rem 0 0; padding: 0; }
.cb-pn-line {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 12px;
    align-items: start;
    padding: 0.5rem 0 0.55rem;
}
.cb-pn-thumb { width: 48px; height: 48px; margin-top: 0.1rem; }
.cb-pn-label {
    font-size: var(--cb-e4);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--cb-quiet);
}
.cb-pn-jp { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.6rem; margin: 0.1rem 0 0; font-size: var(--cb-k6); line-height: 1.55; color: var(--cb-jp); }
.cb-pn-jt { min-width: 0; }
/* ⭐ WORD TO WORD (the owner's round 2, item 4; js lineSegs, travel): a word of a line a press to its card, in today's dress
   at rest (the line reads as it did), the accent under the pointer, the house's outline on the keyboard */
/* ⭐ the owner's item 4a (18 October 2026): a word taught by this point wears the lesson's "known" (--cl-known: the moss
   softened toward the sumi), a press where it has a card here (button), its print where it has none (--still); a word
   not taught yet stays the line's own ink, a guest in its ruby form (js segsHTML) */
.cb-pn-tk { color: var(--cb-known); }
/* ⭐ the graded reader (19 October 2026; js segsHTML): a word with no card here is a press too, pinning its slip; one taught
   by this point keeps the tint (--still), a guest, a later word and a kana word the line's own ink (--later) */
.cb-pn-tk.cb-pn-tk--later { color: inherit; }
button.cb-pn-tk { transition: color 160ms ease; }
button.cb-pn-tk:hover { color: var(--cb-accent); }
button.cb-pn-tk:focus-visible { outline: 1px solid var(--cb-accent); outline-offset: 2px; border-radius: 2px; }
.cb-pn-jt ruby { ruby-position: over; }
/* (U-051, the deep review of 25 October 2026: the ruby half the line, as it was, in Klee One's 600 cut, which fills the pixel
   where the 400 printed a grey hairline) */
.cb-pn-jt rt { font-size: 0.5em; font-weight: 600; letter-spacing: 0.02em; color: var(--cb-quiet); }
.cb-pn-jp .cb-chip { width: 1.9rem; height: 1.9rem; }
.cb-pn-en { margin: 0.05rem 0 0; font-family: var(--cb-font-tell); font-size: var(--cb-e3); line-height: 1.45; color: var(--cb-quiet); }
/* THE CARD'S FOOT: today's foot, its glyph and its quiet words, each kanji of the word now with its meaning in the place of
   `the kanji`, `家 house ›` (cards CONTRACT §3.3, the kanji chip), a press to the kanji's card */
/* ⭐ THE WORD CARD'S KANJI (the owner, 18 October 2026: "an image kanji and meaning an own row and make clearly tappable";
   js panelKanjiHTML), where the foot's `家 house ›` stood: at the card's end a row a kanji, one press each, the readings
   rows' grammar: the painting its card shows, 40 px square in the house's ink dress (no frame where it has none), the kanji
   in Klee, its meaning in the quiet sans, a quiet › at its end; the house's accent under the pointer. No divider, no label. */
.cb-pn-ks { margin: 1.1rem 0 0; display: flex; flex-direction: column; gap: 0.15rem; }
.cb-pn-krow {
    display: grid;
    grid-template-columns: 40px max-content minmax(0, 1fr);
    align-items: center;
    column-gap: 0.8rem;
    min-height: 40px;
    width: 100%;
    text-align: left;
}
.cb-pn-kpic { width: 40px; height: 40px; }
.cb-pn-kk { font-size: var(--cb-k5); line-height: 1; color: var(--cb-jp); transition: color 160ms ease; }
.cb-pn-ken { font-size: var(--cb-e3); line-height: 1.35; color: var(--cb-quiet); min-width: 0; transition: color 160ms ease; }
.cb-pn-kgo { margin-left: 0.15rem; color: var(--cb-quiet); transition: color 160ms ease; }
button.cb-pn-krow:hover .cb-pn-kk, button.cb-pn-krow:hover .cb-pn-ken, button.cb-pn-krow:hover .cb-pn-kgo { color: var(--cb-accent); }
button.cb-pn-krow:focus-visible { outline: 1px solid var(--cb-accent); outline-offset: 2px; border-radius: 2px; }
/* the word card's give past its fold (js fitStory): its airs and its kanji rows closer, the paintings at 32 px; a line laid
   aside by the last give takes no room */
.cb-pn--snug .cb-pn-story { margin-top: 0.8rem; }
.cb-pn--snug .cb-pn-lines { margin-top: 0.9rem; }
.cb-pn--snug .cb-pn-line { padding: 0.35rem 0 0.4rem; }
.cb-pn--snug .cb-pn-ks { margin-top: 0.7rem; gap: 0.1rem; }
.cb-pn--snug .cb-pn-krow { grid-template-columns: 32px max-content minmax(0, 1fr); min-height: 32px; }
.cb-pn--snug .cb-pn-kpic { width: 32px; height: 32px; }
.cb-pn-line[hidden] { display: none; }
.cb-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.125rem;
    height: 2.125rem;
    border: 1.4px solid rgba(var(--cb-sh), 0.55);
    border-radius: 50%;
    background: var(--cb-sheet);
    color: var(--cb-ink);
}
.cb-chip svg { width: 0.875rem; height: 0.875rem; display: block; }
.cb-chip path { fill: currentColor; }
.cb-chip .cb-chip-w { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.cb-chip:hover, .cb-chip--on { color: var(--cb-jp); border-color: var(--cb-jp); }

/* ── the edge fork: the map's figure beside the returning tag ─────────────── */
.cb-fork { display: inline-block; margin: 0; line-height: 0; vertical-align: top; }
.cb-fork-svg { display: block; overflow: visible; }
.cb-fork-st { fill: var(--cb-sheet); stroke: var(--cb-jp); stroke-width: 2; }
.cb-fork-k { font-family: var(--cb-font-jp); font-size: 19px; fill: var(--cb-jp); }
.cb-fork-c { fill: none; stroke: var(--cb-past); stroke-width: 1.6; stroke-linecap: round; opacity: 0.8; }
.cb-fork-c--now { stroke: var(--cb-jp); stroke-width: 2.2; opacity: 1; }
.cb-fork-stop { fill: var(--cb-past); stroke: var(--cb-paper); stroke-width: 2; }
.cb-fork-stop--now { fill: var(--cb-jp); }
.cb-fork-r {
    font-family: var(--cb-font-jp);
    font-size: var(--cb-k6);
    fill: var(--cb-past);
    paint-order: stroke;
    stroke: var(--cb-paper);
    stroke-width: 6px;
    stroke-linejoin: round;
}
.cb-fork-r--now { fill: var(--cb-jp); }
.cb-fork-w { font-family: var(--cb-font-jp); font-size: var(--cb-k5); fill: var(--cb-past); }
.cb-fork-w--now { fill: var(--cb-jp); }
.cb-fork-l { font-family: var(--cb-font-ui); font-size: var(--cb-e4); letter-spacing: 0.12em; fill: var(--cb-quiet); }
.cb-fork-l--now { fill: var(--cb-ink); }

/* ── ⭐ THE ROWS (the elevate round; CONTRACT 14.11 ¶4; REPORT §5.3; mock m1): `時 has two ways.`, one row a way
   in the file's order, each its label in quiet sans, its kana in Klee at 1.2u and the learner's own word; the
   row this word uses in ink, the others quiet. One dress for the card (printed inside the lesson: .cb-embed carries
   the tokens), the aside, the drawer and the main app's kanji entry. The hairline press `Why two ways?` under the
   rows was retired by the owner on 11 October 2026 (Round C): the line and the rows say it. ── */
.cb-ways { margin: 0.9rem 0 0; font-family: var(--cb-font-ui); }
.cb-ways [lang="ja"] { font-family: var(--cb-font-jp); }
.cb-ways-line { margin: 0 0 0.4rem; font-size: var(--cb-e3); line-height: 1.4; color: var(--cb-quiet); }
.cb-ways-line [lang="ja"] { font-size: 1.1em; color: var(--cb-jp); }
.cb-ways-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: max-content max-content minmax(0, 1fr);
    column-gap: calc(1.1 * var(--cb-u));
    row-gap: 0.2rem;
    align-items: baseline;
}
.cb-way { display: contents; }
.cb-way-l { font-size: var(--cb-e3); line-height: 1.5; color: var(--cb-quiet); white-space: nowrap; }
.cb-way-k { font-size: calc(1.2 * var(--cb-u)); line-height: 1.35; letter-spacing: 0.04em; color: var(--cb-quiet); white-space: nowrap; }
.cb-way-w { font-size: calc(1.1 * var(--cb-u)); line-height: 1.35; color: var(--cb-quiet); white-space: nowrap; }
.cb-way--here .cb-way-l { color: var(--cb-ink); }
.cb-way--here .cb-way-k,
.cb-way--here .cb-way-w { color: var(--cb-jp); }
/* ⭐ THE ROWS IN TWO GROUPS BY THE KIND OF SOUND (the owner's walk of 11 October 2026, item 13: "native and borrowed
   sounds look the same"; js waysGroups). Where the file tells each row's kind, the Japanese way's rows stand first and
   the Chinese way's after them as one block, a little apart; each group's kana wear its ink, the row this word uses in
   full and the others softened; no head names the kinds (rule 20: the kinds' names print nowhere on a page). Rows with
   no kind keep the dress above, as before. */
.cb-way--kun .cb-way-k { color: color-mix(in srgb, var(--cb-kun) 72%, transparent); }
.cb-way--on .cb-way-k { color: color-mix(in srgb, var(--cb-on) 75%, transparent); }
.cb-way--here.cb-way--kun .cb-way-k { color: var(--cb-kun); }
.cb-way--here.cb-way--on .cb-way-k { color: var(--cb-on); }
.cb-way--g > span { margin-top: 0.2rem; }
/* the grouped rows sit a little closer to the story and to their line, so a card of five ways (日) keeps the glass at
   1280 by 900 (the walk of 11 October 2026: 907, then 903 of 900 px) */
.cb-ways--kinds { margin-top: 0.5rem; }
.cb-ways--kinds .cb-ways-line { margin-bottom: 0.25rem; }

/* ── ⭐ THE CHARACTER'S PAGE TOLD, in the sheet (the elevate round; CONTRACT 14.11 ¶1; REPORT §5.2 (2); mock m3):
   the glyph at the left, beside it the meaning (Literata), the parts with their glosses, the code line (or the
   rows), the painting square at the right; the punch line and the story in Literata as approved; at the foot
   the look-alike seat. ── */
.cb-tell-body { display: flex; flex-direction: column; }
.cb-tell-top {
    display: grid;
    grid-template-columns: calc(6.2 * var(--cb-u)) minmax(0, 1fr) calc(11.5 * var(--cb-u));
    column-gap: calc(1.3 * var(--cb-u));
    align-items: start;
    margin-right: calc(1.6 * var(--cb-u));
}
.cb-tell-top--bare { grid-template-columns: calc(6.2 * var(--cb-u)) minmax(0, 1fr); }
/* ⭐ THE PAINTING WHOLE (the owner, 17 October 2026: "we might compress/reduce kanji image too much"): where the page has
   its painting, the head's right seat holds it at its own 3:2, never cropped (contain, inside the house's ink dress), at
   clearly more room than the 11.5u square that cut a third of it away: 22u wide, 374 by 249 at 1280 by 900, 418 by 279 at
   1680 by 1050. Today's pieces keep today's type and dress at its left: the glyph with its press 書き順 Stroke order under
   it and the meaning beside it, as they stood; the parts take the row under the two (the meta column folds into the head's
   grid: display contents). Nothing added. */
.cb-tell-top:not(.cb-tell-top--bare) {
    --cb-tell-pic-w: calc(22 * var(--cb-u));
    grid-template-columns: calc(6.2 * var(--cb-u)) minmax(0, 1fr) var(--cb-tell-pic-w);
    grid-template-rows: auto 1fr;
}
.cb-tell-top:not(.cb-tell-top--bare) > .cb-tell-hand { grid-column: 1; grid-row: 1; }
.cb-tell-top:not(.cb-tell-top--bare) > .cb-tell-meta { display: contents; }
.cb-tell-top:not(.cb-tell-top--bare) .cb-tell-mean { grid-column: 2; grid-row: 1; padding-top: 0.45rem; }
.cb-tell-top:not(.cb-tell-top--bare) .cb-tell-parts { grid-column: 1 / span 2; grid-row: 2; margin-top: 0.75rem; }
.cb-tell-top:not(.cb-tell-top--bare) > .cb-tell-pic { grid-column: 3; grid-row: 1 / span 2; width: var(--cb-tell-pic-w); height: auto; aspect-ratio: 3 / 2; }
.cb-tell-pic img { object-fit: contain; }
/* (a page of three parts or more, 円 遅 金 毎 後 親: its painting at 20u, still whole and larger than the old square, so the
   three parts keep one row at its left, as they stood beside the glyph; and a card that would still run past the sheet with
   its look-alike folded steps its painting down to the same 20u: the snug give, js fitSnug) */
.cb-tell-top--many:not(.cb-tell-top--bare),
.cb-tell--snug .cb-tell-top:not(.cb-tell-top--bare) { --cb-tell-pic-w: calc(20 * var(--cb-u)); }
/* ⭐ THE GLYPH AND ITS PRESS (the owner's walk of 11 October 2026, item 4): the printed glyph at rest, and under it
   the quiet ghost press `書き順 Stroke order` (the dress of 教えて Tell me, one step smaller) that writes it once when
   pressed (js writeGlyph). The glyph's column is the glyph's width: the press, a little wider, stands centred under
   it and runs into the gutter, never into the meaning's column. */
.cb-tell-hand { display: flex; flex-direction: column; align-items: center; min-width: 0; }
/* (the owner's round 2, item 1, 17 October 2026: "stroke order button can be made a little sleeker and more gap between it
   and kanji just a little bit": a lighter hairline, a slimmer box, the English in the quiet ink, the kanji at the label's
   own size; a little more air above it) */
.cb-tell-write {
    flex: none;
    width: max-content;
    margin-top: 1.05rem;
    display: inline-flex;
    align-items: baseline;
    gap: 0.35em;
    padding: 0.16rem 0.5rem 0.18rem;
    border: 1px solid rgba(var(--cb-sh), 0.18);
    border-radius: 4px;
    font-family: var(--cb-font-ui);
    font-size: var(--cb-e4);
    line-height: 1.25;
    letter-spacing: 0.02em;
    white-space: nowrap;
    color: var(--cb-quiet);
    transition: color 160ms ease, border-color 160ms ease;
}
.cb-tell-write[hidden] { display: none; }
.cb-root .cb-tell-write [lang="ja"] { font-family: 'Noto Sans JP', var(--cb-font-ui); font-size: 1em; letter-spacing: 0; color: var(--cb-jp); }
.cb-tell-write:hover { border-color: var(--cb-accent); color: var(--cb-accent); }
.cb-tell-glyph {
    position: relative;
    width: 1em;
    height: 1em;
    padding-top: 0.04em;
    font-size: calc(6.2 * var(--cb-u));
    line-height: 1;
    color: var(--cb-jp);
}
.cb-tell-ink { display: block; }
/* the seat is empty while the hand is on its way (the owner, 11 September); the written strokes rest */
.cb-tell-glyph--hold .cb-tell-ink,
.cb-tell-glyph--live .cb-tell-ink { visibility: hidden; }
.cb-tell-svg {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.02em;
    height: 1.02em;
    transform: translate(-50%, -48%);
    overflow: visible;
}
.cb-tell-svg path {
    fill: none;
    stroke: var(--cb-jp);
    stroke-width: 5.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1 2;
    stroke-dashoffset: 1;
    animation-name: cb-write;
    animation-timing-function: linear;
    animation-fill-mode: both;
}
.cb-tell-svg--still path { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
/* one stroke at writing speed (180 ms, 60 between, the whole at most 2.4 s: js strokePace); unseen until its turn */
@keyframes cb-write {
    0% { stroke-dashoffset: 1; opacity: 0; }
    1% { opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .cb-tell-svg path { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
}
.cb-tell-meta { min-width: 0; padding-top: 0.45rem; }
.cb-tell-mean { margin: 0 0 0.55rem; font-family: var(--cb-font-tell); font-size: var(--cb-e1); line-height: 1.2; color: var(--cb-ink); }
/* a kanji that is one drawing (心 alone): its caption, one quiet line */
p.cb-tell-parts { margin: 0 0 0.6rem; font-family: var(--cb-font-tell); font-size: var(--cb-e3); line-height: 1.55; color: var(--cb-ink); }
p.cb-tell-parts [lang="ja"] { font-size: calc(1.15 * var(--cb-u)); color: var(--cb-jp); }
/* ⭐ THE PARTS AS GLYPH TILES (the owner's walk of 11 October 2026, item 6; the runner's own parts row, the earlier
   design): a row under the meaning, each part its glyph in Klee at 2.2u and its caption under it in the quiet sans (no
   role captions: the term table retired them on 10 October; ⚖ the role comes back as a tag, the owner, 20 October 2026,
   below .cb-tell-part-c); the tiles share the row, so three parts stand on one line, and a caption wraps inside its tile,
   never setting the glyphs' spacing */
ul.cb-tell-parts {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.6rem calc(1.5 * var(--cb-u));
    margin: 0.1rem 0 0.75rem;
    padding: 0;
}
.cb-tell-part { flex: 1 1 0; min-width: 5.5em; max-width: 9.5em; display: flex; flex-direction: column; align-items: center; text-align: center; font-size: var(--cb-e3); }
.cb-tell-part-g { font-size: calc(2.2 * var(--cb-u)); line-height: 1.05; color: var(--cb-jp); }
.cb-tell-part-c { margin-top: 0.3rem; font-family: var(--cb-font-ui); font-size: var(--cb-e3); line-height: 1.35; color: var(--cb-quiet); text-wrap: balance; }
.cb-tell-part-c [lang="ja"] { color: var(--cb-jp); }
/* ⚖ A PART WRITTEN AS STROKES (the lead, 22 October 2026, lesson 12's 赤: its worn flame, 丿亅丿乀, has no character of its own,
   and the four strokes broke over two lines in a 9.5em tile): a glyph of more than one character (js isWide) is one drawing
   on one line, its tile as wide as the drawing and its caption held to a tile's width */
.cb-tell-part--wide { flex: 0 0 auto; max-width: none; }
.cb-tell-part--wide .cb-tell-part-g { white-space: nowrap; }
.cb-tell-part--wide .cb-tell-part-c { max-width: 9.5em; }
/* ⚖ THE PARTS ROW BY MEANING AND ROLE (the owner, 20 October 2026: the app's chips, 金 metal · 意 MEANING; it overrides the
   walk's "no role captions" of 11 October, which retired the sentences FOR ITS MEANING / FOR ITS SOUND): under each part's
   caption its job as a small tag, kanji and plain tracked caps (意 MEANING · 音 SOUND · 形 FORM · 古 WORN, js partRoleHTML),
   the house's e4 micro-label in the quiet ink, its kanji untracked in the sans; on a one-drawing kanji's line it follows
   the caption on the line, and it wears the same dress where the book's row is printed inside another page (.cb-embed: the
   shelf's kanji page, js/kanji-page.js courseBodyHTML, where .cb-embed [lang="ja"] alone would set it in Klee, tracked).
   css/course-lesson.css .cl-glyph-role is the same dress */
.cb-tell-part-r {
    display: block;
    margin-top: 0.2rem;
    font-family: var(--cb-font-ui);
    font-size: var(--cb-e4);
    font-style: normal;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--cb-quiet);
}
:is(.cb-root, .cb-embed) .cb-tell-part-r [lang="ja"] { font-family: 'Noto Sans JP', var(--cb-font-ui); font-size: 1em; font-weight: 400; letter-spacing: 0.04em; color: inherit; }
p.cb-tell-parts .cb-tell-part-r { display: inline; margin-left: 0.35em; }
/* ⭐ THE READINGS BLOCK (17 October 2026; the owner's report on lessons 7 and 8, item 4: "kanji page has reading squeezed
   in a way that clutters things and reading should include a gloss and tapping on a word should open or take me to a word
   page"; pages_diag CONTRACT §4.4; js readsBlockHTML). The reading leaves the meta column beside the glyph, so the top
   band is as tall as its painting or its parts and the story starts right under it; under the story, before the beats'
   fold and the look-alike seat, the rows stand across the sheet's text column on one baseline grid: label (quiet sans) ·
   kana (Klee, in its kind's ink) · word (Klee, a press to its card) · meaning (quiet, the first sense), the row this word
   uses in ink. No box, no border, no colour of its own; the house's air above and below it. (Since 18 October 2026 the
   app's groups, below: no label and no line by code.) */
/* (the owner, 18 October 2026: "go") 8 px less air between the story and the readings at every give, 41 to 33 px at
   1280 by 900 and 43 to 35 at 1680 by 1050; never below none */
.cb-tell-reads { margin: max(0px, calc(1.1 * var(--cb-u) - 8px)) 0 0; }
.cb-tell-reads > .cb-ways { margin: 0; }
/* ⭐ THE READINGS AS THE APP GROUPS THEM (the owner, 18 October 2026: "remove English labels 'on its own' and 'with other
   kanji', make reading a sub header and words grouped under subheader, rows should show text, reading, gloss and images.
   Maybe target kanji and kana in reading highlighted via different colour"; js readsBlockHTML; the main app's kanji page,
   css/kanji-page.css .kjr-group, .kjr-head, .kjr-name, .kjw-row, .kjw-hl, .kjw-kana-hl, .kjr-more, in the book's own type
   and dress). Each sound a head: its kana in Klee at 1.2u in its kind's ink (the Japanese way indigo, the Chinese
   terracotta, a word said as one the app's まるごと bronze), a hairline under it, a voiced head's one note beside it; under
   it its words, one press a row: the portrait at 40 px (its seat kept where it has none), the word (Klee) with the kanji
   in the head's ink, its reading (quiet) with the kana the kanji gives in that ink and the app's hand-laid stitch under
   them, its English (quiet); the word the card was opened from in the word's ink; the house's accent under the pointer;
   three rows a group, then the app's `… and N more` under them. The groups stand close, a new kind a little apart. No box,
   no badge, no label. Every row of the block lays its cells on the block's one grid (subgrid), so the readings and the
   meanings stand in one column down the card, whatever the word's length.
   ⭐ SUBTLER RULES, MORE AIR (the owner's decision of 19 October 2026 on the readings block: "i would stick with original
   one for readings however i would make dividing lines subtle, then make slightly more gaps between reading groups because
   the new proposal makes things too cluttered"): the layout stands as it was; the hairline under each head (and under a
   shut group) is the house rule at half its strength (--cb-rd-rule: an alpha of --cb-rule, no new colour), and the groups
   stand about half a line further apart, a little more again where the kind of sound changes, in each give in proportion
   (the snug and the tight gives keep their order: tighter, never wider, than the block at rest). */
.cb-rd {
    --cb-rd-ink: var(--cb-quiet);
    --cb-rd-rule: color-mix(in srgb, var(--cb-rule) 50%, transparent);
    display: grid;
    grid-template-columns: 40px max-content max-content minmax(0, 1fr);
    column-gap: 0.7rem;
    font-family: var(--cb-font-ui);
}
.cb-rd [lang="ja"] { font-family: var(--cb-font-jp); }
.cb-rd-group--kun { --cb-rd-ink: var(--cb-kun); }
.cb-rd-group--on { --cb-rd-ink: var(--cb-on); }
.cb-rd-group--whole { --cb-rd-ink: var(--cb-whole); }
.cb-rd-group { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; }
.cb-rd-group + .cb-rd-group { margin-top: calc(0.5rem + 0.7 * var(--cb-u)); }
.cb-rd-group + .cb-rd-group--fam { margin-top: calc(0.85rem + 0.9 * var(--cb-u)); }
.cb-rd-head { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 0.65rem; margin: 0 0 0.15rem; padding: 0 0 0.1rem; border-bottom: 1px solid var(--cb-rd-rule); }
.cb-rd-name { font-size: calc(1.1 * var(--cb-u)); font-weight: 600; line-height: 1.25; letter-spacing: 0.04em; color: var(--cb-rd-ink); }
.cb-rd-voiced { font-size: var(--cb-e4); line-height: 1.3; color: var(--cb-quiet); }
.cb-rd-voiced [lang="ja"] { font-size: 1.15em; }
.cb-rd-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
    min-height: 40px;
    width: 100%;
    text-align: left;
}
.cb-rd-row[hidden] { display: none; }
.cb-rd-pic { width: 40px; height: 40px; }
.cb-rd-w { font-size: calc(1.1 * var(--cb-u)); line-height: 1.3; color: var(--cb-past); white-space: nowrap; transition: color 160ms ease; }
.cb-rd-hl { color: var(--cb-rd-ink); }
.cb-rd-r { font-size: var(--cb-e3); line-height: 1.3; letter-spacing: 0.04em; color: var(--cb-quiet); white-space: nowrap; transition: color 160ms ease; }
.cb-rd-khl {
    color: var(--cb-rd-ink);
    background-image: linear-gradient(color-mix(in srgb, var(--cb-rd-ink) 78%, transparent), color-mix(in srgb, var(--cb-rd-ink) 78%, transparent));
    background-repeat: no-repeat;
    background-position: 0 calc(100% - 1px);
    background-size: 100% 1.5px;
    padding-bottom: 2px;
}
.cb-rd-en { font-size: var(--cb-e3); line-height: 1.35; color: var(--cb-quiet); min-width: 0; transition: color 160ms ease; }
.cb-rd-row--here .cb-rd-w { color: var(--cb-jp); }
.cb-rd-row--here .cb-rd-en { color: var(--cb-ink); }
button.cb-rd-row:hover .cb-rd-w, button.cb-rd-row:hover .cb-rd-r, button.cb-rd-row:hover .cb-rd-en { color: var(--cb-accent); }
button.cb-rd-row:focus-visible { outline: 1px solid var(--cb-accent); outline-offset: 2px; border-radius: 2px; }
.cb-rd-more {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    grid-column: 2 / -1;
    justify-self: start;
    margin: 0.1rem 0 0;
    font-size: var(--cb-e3);
    line-height: 1.5;
    white-space: nowrap;
    color: var(--cb-quiet);
    transition: color 160ms ease;
}
.cb-rd-more:hover { color: var(--cb-accent); }
.cb-rd-caret { width: 12px; height: 12px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cb-way-en { font-size: var(--cb-e3); line-height: 1.5; color: var(--cb-quiet); min-width: 0; }
.cb-way--here .cb-way-en { color: var(--cb-ink); }
/* (17 October 2026, the Evaluator's problem 9) a word that holds the kanji twice (日曜日) inks only the one this row's sound
   covers, the rest quiet, so the two 日曜日 rows (にち, び) show which 日 each means; a hover inks the whole word, as ever */
.cb-way-w .cb-way-wk { color: var(--cb-jp); }
.cb-way-w .cb-way-wq { color: var(--cb-quiet); }
button.cb-way-w:hover .cb-way-wk, button.cb-way-w:hover .cb-way-wq { color: inherit; }
button.cb-way-w { transition: color 160ms ease; }
button.cb-way-w { color: var(--cb-quiet); }
.cb-way--here button.cb-way-w { color: var(--cb-jp); }
button.cb-way-w:hover { color: var(--cb-accent); }
button.cb-way-w:focus-visible { outline: 1px solid var(--cb-accent); outline-offset: 2px; border-radius: 2px; }
/* the snug give (js fitSnug): a page still past the sheet with its look-alike folded (a kanji of four ways, 日 opened from
   昨日, at 1280 by 900) steps its airs closer: the punch line's, the block's, the rows' leading; nothing cut */
.cb-tell--snug .cb-tell-punch { margin: calc(0.9 * var(--cb-u)) 0; }
.cb-tell--snug .cb-tell-reads { margin-top: max(0px, calc(0.7 * var(--cb-u) - 8px)); }
.cb-tell--snug .cb-rd-head { margin-bottom: 0.1rem; padding-bottom: 0.05rem; }
.cb-tell--snug .cb-rd-group + .cb-rd-group { margin-top: calc(0.4rem + 0.5 * var(--cb-u)); }
.cb-tell--snug .cb-rd-group + .cb-rd-group--fam { margin-top: calc(0.65rem + 0.7 * var(--cb-u)); }
/* the tight give (js fitReads): a page still past the sheet at one row a way (日 in the notebook at lesson 14, six ways, at
   1280 by 900) lays its painting at the glyph's height (16u, whole), its portraits at 30 px, its heads and its groups
   closer and no air under the block */
.cb-tell--tight .cb-tell-top:not(.cb-tell-top--bare) { --cb-tell-pic-w: calc(16 * var(--cb-u)); }
.cb-tell--tight .cb-tell-reads { margin-bottom: 0; }
.cb-tell--tight .cb-rd { grid-template-columns: 30px max-content max-content minmax(0, 1fr); }
.cb-tell--tight .cb-rd-row { min-height: 30px; }
.cb-tell--tight .cb-rd-pic { width: 30px; height: 30px; }
.cb-tell--tight .cb-rd-name { font-size: calc(0.95 * var(--cb-u)); line-height: 1.1; }
.cb-tell--tight .cb-rd-head { margin-bottom: 0.05rem; padding-bottom: 0; }
.cb-tell--tight .cb-rd-group + .cb-rd-group { margin-top: calc(0.2rem + 0.25 * var(--cb-u)); }
.cb-tell--tight .cb-rd-group + .cb-rd-group--fam { margin-top: calc(0.4rem + 0.45 * var(--cb-u)); }
/* the last give (js fitReads, capReads at 0): a card still past the sheet with its telling folded shows each sound as one
   line, its head and the press that names its words (`3 words`) side by side over the head's rule */
.cb-rd-group--shut { display: flex; align-items: baseline; gap: 0.9rem; border-bottom: 1px solid var(--cb-rd-rule); }
.cb-rd-group--shut > .cb-rd-head { margin: 0; padding: 0; border-bottom: 0; }
.cb-rd-group--shut > .cb-rd-more { margin: 0; }
.cb-tell--tight .cb-tell-punch { margin: calc(0.6 * var(--cb-u)) 0; }
.cb-tell--tight .cb-tell-reads { margin-top: max(0px, calc(0.5 * var(--cb-u) - 8px)); }
/* the telling's fold (js foldTell, the readings' last give): a page still past the sheet when tight (日 in a lesson at 1280
   by 900, five ways) lays its story behind `続き More` in the beats' fold dress, where the story stood; then its punch line */
.cb-tell-fold { margin: calc(0.5 * var(--cb-u)) 0 0; }
.cb-tell-more-press[hidden], .cb-tell-fold[hidden], .cb-tell-story[hidden], .cb-tell-punch[hidden], .cb-tell-more[hidden] { display: none; }
.cb-tell-pic { margin: 0; width: calc(11.5 * var(--cb-u)); height: calc(11.5 * var(--cb-u)); }
/* ⭐ THE PUNCH LINE SET APART (the owner's walk of 11 October 2026, item 6): the one-line summary before the story, in
   the bold sans (Inter 600 at 1.3u, the ink), with air above and below; the story keeps Literata under it */
.cb-tell-punch { margin: calc(1.4 * var(--cb-u)) 0; font-family: var(--cb-font-ui); font-weight: 600; font-size: calc(1.3 * var(--cb-u)); line-height: 1.35; color: var(--cb-ink); }
.cb-tell-story { margin: 0; font-family: var(--cb-font-tell); font-size: var(--cb-e2); line-height: 1.6; color: var(--cb-ink); }
.cb-tell-story [lang="ja"], .cb-tell-punch [lang="ja"] { color: var(--cb-jp); }
/* ⭐ THE RECIPE'S PAGE (the owner's ruling of 15 October 2026; js markedHTML, beatsHTML): the main app's recipe, used as
   it is. Its <b> (a word the story names, its Japanese in the jp ink) at 600; its <i> (the opener's meaning punch) in
   italics. Under the story the beats wait behind `続き More`, a fold in the dress of 物語 STORY (plain tracked caps, the
   kanji in the chrome's face, no fill, the chevron turning when open), closed when the page opens so its screen never
   grows; open, each beat its head in the bold sans and its text in the story's face, and the sheet scrolls inside
   itself (.cb-side-body), never the page. */
.cb-tell-story b, .cb-tell-beat-text b, .cb-tell-beat-head b, .cb-tell-part-c b { font-weight: 600; }
.cb-tell-story i, .cb-tell-beat-text i { font-style: italic; }
.cb-tell-more { margin: calc(0.8 * var(--cb-u)) 0 0; }
.cb-tell-more-press {
    display: inline-flex;
    align-items: baseline;
    padding: 0.15rem 0;
    list-style: none;
    cursor: pointer;
    font-family: var(--cb-font-ui);
    font-size: var(--cb-e4);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cb-quiet);
    transition: color 160ms ease;
}
.cb-tell-more-press::-webkit-details-marker { display: none; }
.cb-tell-more-press::marker { content: ''; }
.cb-root .cb-tell-more-press [lang="ja"] {
    margin-right: 0.45em;
    font-family: 'Noto Sans JP', var(--cb-font-ui);
    font-size: var(--cb-e2);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--cb-jp);
    transition: color 160ms ease;
}
.cb-tell-more-press i { display: inline-block; margin-left: 0.4em; font-style: normal; letter-spacing: 0; transition: transform 160ms ease; }
.cb-tell-more-press:hover,
.cb-root .cb-tell-more-press:hover [lang="ja"],
.cb-tell-more[open] > .cb-tell-more-press,
.cb-root .cb-tell-more[open] > .cb-tell-more-press [lang="ja"] { color: var(--cb-accent); }
.cb-tell-more[open] > .cb-tell-more-press i { transform: rotate(90deg); }
.cb-tell-more-press:focus { outline: none; }
.cb-tell-more-press:focus-visible { outline: 1px solid var(--cb-accent); outline-offset: 3px; border-radius: 2px; }
.cb-tell-beats { display: flex; flex-direction: column; gap: calc(0.9 * var(--cb-u)); margin-top: calc(0.6 * var(--cb-u)); }
.cb-tell-beat { margin: 0; }
.cb-tell-beat-head { margin: 0 0 0.3rem; font-family: var(--cb-font-ui); font-weight: 600; font-size: var(--cb-e3); line-height: 1.35; letter-spacing: 0.01em; color: var(--cb-ink); }
.cb-tell-beat-text { margin: 0; font-family: var(--cb-font-tell); font-size: var(--cb-e2); line-height: 1.6; color: var(--cb-ink); }
.cb-tell-beat-head [lang="ja"], .cb-tell-beat-text [lang="ja"] { color: var(--cb-jp); }
@media (prefers-reduced-motion: reduce) {
    .cb-tell-more-press i { transition: none; }
}

/* ⭐ THE LOOK-ALIKE IN THE KANJI'S STORY (the owner, 20 October 2026: "look-alike should not be a side note always folded but
   part of the kanji story"; rule 5; js lookalikeHTML, alikesOf): inline under the story, never folded and never behind a
   press: a small block headed `似ている LOOK-ALIKE` (the tags' dress: the kanji in the chrome's face, tracked caps), then a row
   of pairs, the page's own first and its further pairs after it (cards[].twins_more), wrapping as the sheet narrows; each pair
   the kanji and its partner side by side in the parts row's dress (a glyph, under it the part that tells it apart in the quiet
   sans, the part's mark in the JP ink), the partner's one-word meaning under its part in the story's face; a partner the
   course has taught a press to its own card (the accent under the pointer). No sentence (the owner, 17 October 2026). The
   rule above it is the readings' half-strength hairline. */
.cb-alike {
    margin: calc(1 * var(--cb-u)) 0 0;
    padding-top: calc(0.6 * var(--cb-u));
    border-top: 1px solid color-mix(in srgb, var(--cb-rule) 60%, transparent);
}
.cb-alike-tag {
    margin: 0;
    font-size: var(--cb-e4);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cb-quiet);
}
.cb-root .cb-alike-tag [lang="ja"] { font-family: 'Noto Sans JP', var(--cb-font-ui); font-weight: 400; letter-spacing: 0.04em; }
.cb-alike > .cb-alike-tag { line-height: 1.25; }
.cb-alike-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem 0.7rem; margin-top: 0.4rem; }
/* each pair a quiet tile of its own (the house's resting paper tint, no border, no lift), so a row of pairs reads as pairs */
.cb-alike-pair {
    display: flex;
    align-items: flex-start;
    gap: calc(0.7 * var(--cb-u));
    padding: 0.3rem calc(0.65 * var(--cb-u)) 0.35rem;
    border-radius: 6px;
    background: rgba(var(--cb-sh), 0.035);
}
.cb-alike-c { display: flex; flex-direction: column; align-items: center; min-width: calc(2.6 * var(--cb-u)); max-width: calc(8.6 * var(--cb-u)); text-align: center; }
.cb-alike-k { font-size: calc(1.9 * var(--cb-u)); line-height: 1; color: var(--cb-jp); }
.cb-alike-k:focus { outline: none; }
button.cb-alike-k:focus-visible { outline: 1px solid var(--cb-accent); outline-offset: 2px; border-radius: 2px; }
/* (U-055, the deep review of 25 October 2026: the part captions at e3, was e4, about 11.7 px at 1280) */
.cb-alike-d { margin-top: 0.25rem; font-family: var(--cb-font-ui); font-size: var(--cb-e3); line-height: 1.3; color: var(--cb-quiet); text-wrap: balance; }
.cb-alike-d [lang="ja"] { color: var(--cb-jp); margin-right: 0.12em; }
.cb-alike-g { margin-top: 0.15rem; font-family: var(--cb-font-tell); font-size: var(--cb-e3); line-height: 1.3; color: var(--cb-ink); }
/* the gives (js fitSnug, fitReads): a card still past the sheet takes its block a little closer */
.cb-tell--snug .cb-alike { margin-top: calc(0.8 * var(--cb-u)); padding-top: calc(0.5 * var(--cb-u)); }
.cb-tell--tight .cb-alike { margin-top: calc(0.55 * var(--cb-u)); padding-top: calc(0.4 * var(--cb-u)); }
.cb-tell--tight .cb-alike-row { margin-top: 0.3rem; row-gap: 0.4rem; }
/* the readings stand a breath under the block, at every give */
.cb-tell-body > .cb-alike + .cb-tell-reads { margin-top: calc(0.9 * var(--cb-u)); }
.cb-tell--tight .cb-tell-body > .cb-alike + .cb-tell-reads { margin-top: calc(0.2 * var(--cb-u)); }
/* (the pair's tell line of 16 October 2026 stays out of the block: the owner, 17 October 2026, cards CONTRACT §0; Practice's
   miss note keeps it on its own surface; `似ている Look-alike ›`, the block's press form at the sheet's foot, retired with the
   fold, 20 October 2026) */
/* ⭐ THE KANJI CARD'S FOOT IN THE NOTEBOOK (17 October 2026; cards CONTRACT §3.2 block 7): outside a lesson the main app's 字
   the kanji's page */
.cb-tell-foot { flex-wrap: wrap; gap: 0.4rem calc(1.6 * var(--cb-u)); }
/* ⭐ THE MEANING'S ROOM (the owner, 20 October 2026, shelf review item F: the head cut the meaning where the painting's column
   starts, "th" for think, "fr" for friend; js fitHead): where the meaning cannot stand beside the glyph at the painting's
   width (the shelf's sheet, 40 per cent of the glass), it moves under the glyph's line, across the glyph's column and its
   own; the parts take the whole row under the head, so they stand side by side as they do in a lesson; the painting keeps
   its seat at the right, never wider than the sheet leaves it beside the glyph (it ran 87 px past a 576 px sheet at rest) */
.cb-tell--meanwrap .cb-tell-top:not(.cb-tell-top--bare) {
    grid-template-columns: calc(6.2 * var(--cb-u)) minmax(0, 1fr) min(var(--cb-tell-pic-w), calc(100% - 9 * var(--cb-u)));
    grid-template-rows: auto auto auto;
}
.cb-tell--meanwrap .cb-tell-top:not(.cb-tell-top--bare) .cb-tell-mean { grid-column: 1 / span 2; grid-row: 2; margin: 0.8rem 0 0; padding-top: 0; }
.cb-tell--meanwrap .cb-tell-top:not(.cb-tell-top--bare) .cb-tell-parts { grid-column: 1 / -1; grid-row: 3; }
.cb-tell--meanwrap .cb-tell-top:not(.cb-tell-top--bare) > .cb-tell-pic { grid-row: 1 / span 2; width: 100%; }

/* ── ⭐ ROUND B, LANE B2 (11 October 2026): THE NOTEBOOK'S DRAWERS (PLAN §2 row B2; CONTRACT 14.3 "Progress", 14.11 ¶1,
   ¶4; js/course-book.js drawerHTML, panelHTML, textsHTML, pieceHTML). A kanji's drawer: under its head the press
   `物語 STORY` in the tags' dress (plain tracked caps, the kanji in the chrome's face, no fill; the lesson's 活用 FORMS),
   which unfolds the character's page in the head's seat (the aside's own markup and dress: .cb-tell-*) and folds it
   back; then the look-alike pairs, smaller than the head's glyph, the partner a press to its drawer; then the rows and
   the words. A word's drawer: the pairs under its head; a piece read is a press. The notebook: the third figure
   `12 読み物 Texts read` at the head's right, its shelf and a piece re-opened in the one sheet. ── */
.cb-dr-head[hidden],
.cb-dr-story[hidden],
.cb-tell-body[hidden] { display: none; }
.cb-dr-story:focus { outline: none; }
/* the page unfolds above the press: the sheet keeps its top, so the page reads from its start */
.cb-drawer .cb-side-body { overflow-anchor: none; }
.cb-dr-story { padding-top: 0.15rem; }
.cb-story { margin: 1rem 0 0; }
.cb-drawer--story .cb-story { margin-top: 1.2rem; }
.cb-story-press {
    display: inline-flex;
    align-items: baseline;
    padding: 0.15rem 0;
    font-family: var(--cb-font-ui);
    font-size: var(--cb-e4);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cb-quiet);
    transition: color 160ms ease;
}
.cb-root .cb-story-press [lang="ja"] {
    margin-right: 0.45em;
    font-family: 'Noto Sans JP', var(--cb-font-ui);
    font-size: var(--cb-e2);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--cb-jp);
    transition: color 160ms ease;
}
.cb-story-press i { display: inline-block; margin-left: 0.4em; letter-spacing: 0; transition: transform 160ms ease; }
.cb-story-press:hover,
.cb-root .cb-story-press:hover [lang="ja"],
.cb-story-press[aria-expanded="true"],
.cb-root .cb-story-press[aria-expanded="true"] [lang="ja"] { color: var(--cb-accent); }
.cb-story-press[aria-expanded="true"] i { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
    .cb-story-press i { transition: none; }
}

/* the look-alike pair at the top of both drawers (rule 5): the aside's seat, under the head, its kanji smaller than the
   head's glyph; the drawer's own kanji first, the other a press to its own drawer */
.cb-alike--top { margin-top: 1.1rem; padding-top: 0.75rem; }
.cb-alike--top .cb-alike-row { margin-top: 0.4rem; }
button.cb-alike-k { color: var(--cb-jp); transition: color 160ms ease; }
button.cb-alike-k:hover { color: var(--cb-accent); }
.cb-drawer .cb-alike--top + .cb-ways,
.cb-drawer .cb-story + .cb-ways { margin-top: 1.1rem; }

/* the notebook's third figure, at the right of its head: `12 読み物 Texts read`, a quiet press to its shelf */
.cb-texts {
    margin-left: auto;
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.2rem 0;
    border-bottom: 1px solid transparent;
    font-size: var(--cb-e3);
    color: var(--cb-quiet);
    transition: color 160ms ease, border-color 160ms ease;
}
.cb-texts-n { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--cb-ink); }
.cb-root .cb-texts [lang="ja"] { font-family: 'Noto Sans JP', var(--cb-font-ui); font-size: var(--cb-k6); color: var(--cb-jp); }
.cb-texts:hover { color: var(--cb-accent); border-bottom-color: rgba(61, 90, 128, 0.4); }

/* the shelf: the lead line, then each lesson's pieces under its number and title, newest first; a piece a row of its
   small painting (3:2), its first line and its place */
.cb-tx-lead { margin: -0.45rem 0 1.3rem; font-family: var(--cb-font-tell); font-size: var(--cb-e2); line-height: 1.5; color: var(--cb-quiet); }
.cb-tx-lesson + .cb-tx-lesson { margin-top: 1.4rem; }
.cb-tx-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.75rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--cb-rule); }
.cb-tx-n { font-size: var(--cb-e4); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cb-quiet); }
.cb-tx-title { font-size: var(--cb-k6); line-height: 1.3; color: var(--cb-jp); }
.cb-tx-en { font-size: var(--cb-e3); color: var(--cb-quiet); }
.cb-tx-list { list-style: none; margin: 0; padding: 0; }
.cb-tx-piece {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    column-gap: 14px;
    align-items: center;
    width: 100%;
    padding: 0.5rem 0;
}
.cb-tx-pic { width: 72px; height: 48px; }
.cb-tx-copy { min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.cb-tx-jp { font-size: var(--cb-k6); line-height: 1.45; color: var(--cb-jp); transition: color 160ms ease; }
.cb-tx-place { font-size: var(--cb-e3); line-height: 1.35; color: var(--cb-quiet); }
.cb-tx-piece:hover .cb-tx-jp { color: var(--cb-accent); }

/* a piece re-opened, without its question: its place, its painting, its lines with their English; at the foot the
   press back to the shelf */
.cb-pc-place { margin: 0 0 0.9rem; font-family: var(--cb-font-tell); font-size: var(--cb-e2); line-height: 1.45; color: var(--cb-quiet); }
.cb-pc-pic { margin: 0 0 1.2rem; width: min(100%, calc(24 * var(--cb-u))); aspect-ratio: 3 / 2; }
.cb-pc-lines { list-style: none; margin: 0; padding: 0; }
.cb-pc-line + .cb-pc-line { margin-top: 0.85rem; }
.cb-pc-jp { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; font-size: var(--cb-k5); line-height: 1.45; color: var(--cb-jp); }
.cb-pc-en { margin: 0.1rem 0 0; font-family: var(--cb-font-tell); font-size: var(--cb-e3); line-height: 1.45; color: var(--cb-quiet); }
/* ⭐ D65 (the owner, 23 October 2026: "person A: ... (row 1), person B: ... (row 2), not a text blob"): an exchange's row
   carries its speaker's letter in a narrow column of its own, on the line's first baseline, the line and its English
   in the column beside it; the letter the lesson's micro-label in the quiet ink (css/course-lesson.css .cl-spk) */
.cb-pc-line--spk { display: grid; grid-template-columns: calc(1.1 * var(--cb-k5)) minmax(0, 1fr); align-items: baseline; }
.cb-pc-line--spk > .cb-pc-spk { grid-column: 1; grid-row: 1; }
.cb-pc-line--spk > .cb-pc-jp, .cb-pc-line--spk > .cb-pc-en { grid-column: 2; }
.cb-pc-spk { font-family: var(--cb-font-ui); font-size: var(--cb-e4); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1; color: var(--cb-quiet); -webkit-user-select: none; user-select: none; }
.cb-pc-back {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    font-size: var(--cb-e3);
    color: var(--cb-quiet);
    transition: color 160ms ease;
}
.cb-root .cb-pc-back [lang="ja"] { font-family: 'Noto Sans JP', var(--cb-font-ui); font-size: var(--cb-k6); color: var(--cb-jp); }
.cb-pc-back:hover { color: var(--cb-accent); }

/* a word's drawer: a piece read is one press, its small painting beside its label, its line and its English */
.cb-pn-line--texts { display: block; }
.cb-pn-go {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 12px;
    align-items: start;
    width: 100%;
}
.cb-pn-go .cb-pn-label,
.cb-pn-go .cb-pn-jp,
.cb-pn-go .cb-pn-en { display: block; }
.cb-pn-go .cb-pn-jp { transition: color 160ms ease; }
.cb-pn-go:hover .cb-pn-jp { color: var(--cb-accent); }
.cb-root .cb-pn-label [lang="ja"] { font-family: 'Noto Sans JP', var(--cb-font-ui); letter-spacing: 0.04em; }

/* ── ⭐ ROUND C, LANE C1 (11 October 2026): THE ONE DRAWER (ROUND_C_DRAWER.md §2, §3; rule 30; CONTRACT 14.11 ¶17;
   js/course-book.js door, present, guestHTML, histHTML, headWordHTML). A card opens on a press only (the owner,
   18 October 2026: the hover's card and its see-through layer are retired; the notebook's word peeks under the pointer
   again). The press back to the card that opened this one, `‹ 思う`, sits at the sheet's top left in ✕'s row, in the dress of the
   piece's own `‹ 読み物 Texts read`; the word in the head of a word's card holds its kanji as doors, in the word's own
   ink and the accent under the pointer; the guest's small card is a word's card with no picture, its one line in the
   story's face. Nothing new moves: the sheet's one slide. ── */
.cb-hist {
    position: absolute;
    top: 0.7rem;
    left: calc(2.2 * var(--cb-u) - 0.5rem);
    z-index: 2;
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.4rem 0.5rem;
    font-size: var(--cb-e2);
    line-height: 1;
    color: var(--cb-quiet);
    border-radius: 4px;
    transition: color 160ms ease;
}
.cb-root .cb-hist [lang="ja"] {
    font-family: 'Noto Sans JP', var(--cb-font-ui);
    font-size: var(--cb-k6);
    color: var(--cb-jp);
    transition: color 160ms ease;
}
.cb-hist:hover,
.cb-root .cb-hist:hover [lang="ja"] { color: var(--cb-accent); }
.cb-side--hist > .cb-side-body { padding-top: calc(1.6 * var(--cb-u) + 1.7rem); }
/* ⭐ THE PANEL'S DOOR TO THE PAGE (the owner, 21 October 2026: a relation chip on the shelf's word page opens the side panel,
   never leaves the page; the lead's promise, one quiet link in the panel's head for those who want the word's full page;
   js/course-book.js pageLinkHTML): `頁 Page ›` in ✕'s row, just before ✕ (its right edge, its two paddings and its glyph,
   then a breath), in the dress of ‹ back: the quiet ink, the kanji in the sans, the accent under the pointer, nothing moves.
   Only where the card's opener holds the page (the shelf's word page); a lesson's panel prints none. */
.cb-pagelink {
    position: absolute;
    top: 0.7rem;
    right: calc(0.9rem + 1rem + var(--cb-e2) + 0.15rem);
    z-index: 2;
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    padding: 0.4rem 0.5rem;
    font-size: var(--cb-e3);
    line-height: var(--cb-e2);
    letter-spacing: 0.02em;
    color: var(--cb-quiet);
    border-radius: 4px;
    transition: color 160ms ease;
}
.cb-root .cb-pagelink [lang="ja"] {
    font-family: 'Noto Sans JP', var(--cb-font-ui);
    font-size: var(--cb-k6);
    letter-spacing: 0;
    color: var(--cb-jp);
    transition: color 160ms ease;
}
.cb-pagelink i { font-style: normal; }
.cb-pagelink:hover,
.cb-root .cb-pagelink:hover [lang="ja"] { color: var(--cb-accent); }
.cb-pn-k { color: inherit; transition: color 160ms ease; }
.cb-pn-k:hover { color: var(--cb-accent); }
.cb-gs-word--ruby { line-height: 1.5; }
.cb-gs-word rt { font-size: 0.38em; font-weight: 600; letter-spacing: 0.06em; color: var(--cb-quiet); }
.cb-gs-when { margin: 1.3rem 0 0; font-family: var(--cb-font-tell); font-size: var(--cb-e2); line-height: 1.45; color: var(--cb-quiet); }

/* ── ⭐ THE GLANCE (the owner's item 4a, 18 October 2026; js glanceShow) ──────────────────────────────────────────────
   A taught word's reading and meaning under a resting mouse: the main app's word glance (css/sentence-tokens.css
   .st-glance) mirrored, cut from the same slip stock (css/tokens.css --slip-*): the paper soaked 6% in clay, a print
   corner, the lit lip, the contact line and the lifted shadow thrown left; laid down, never slid (the air shadow settles
   as it lands). Three ranks, two inks: the word and its meaning in the sumi, its reading between them in the one quiet
   grey. A whisper, never a surface: no pointer; over the sheet (9450) and under the high ladder's floor (9500:
   tests/voice/zindex_ladder_test.js), so the book still registers no rung. */
.cb-glance {
    position: fixed;
    z-index: 9460;
    display: none;
    color: var(--slip-quiet, #6E6860);
    font: 400 12px/1.5 var(--font-ui, 'Inter', system-ui, sans-serif);   /* (on <body>, outside the room's own tokens) */
    text-align: left;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--slip-in, 190ms) var(--ease-page, ease);
}
.cb-glance.cb-glance--in { opacity: 1; }
/* ⭐⭐ THE SLIP AS A LINE (the graded reader's look, the owner's choice of the blend of design seats A and B, 19 October
   2026; js glanceLay). Where a sentence has no list under it (the word card's lines, a settled Review or Practice quote, a
   phrase's example) the slip is one of the example page's list rows laid as a line under the sentence's last line: a paper
   strip of the slip stock with one hairline above, no shadow, no corner, the row's own content in the row's own faces:
   the word (an inflected word's dictionary form) in Klee at k6 with its reading over its kanji, in the house accent (the
   row lit), its meaning in Literata at e3 in the ink, its lesson in the micro-label, quiet. (Was, 18 October 2026: a
   plank, the main app's word glance mirrored: three ranks on a lifted slip with a print corner and a thrown shadow.) */
.cb-glance.cb-glance--line {
    max-width: none;
    padding: 0.15em 0.75em 0.2em;
    background: var(--slip-paper, #FFFDF8);
    border: 0;
    border-top: 1px solid var(--cb-rule);
    border-radius: 0;
    box-shadow: none;
    white-space: nowrap;
}
.cb-gl-row { display: flex; align-items: baseline; column-gap: 0.75em; line-height: 1.5; }
.cb-gl-w { font-family: var(--cb-font-jp); font-size: var(--cb-k6); color: var(--cb-accent); }
.cb-gl-w ruby { ruby-position: over; ruby-align: start; }
.cb-gl-w rt { font-family: var(--cb-font-jp); font-size: var(--cb-e3); font-weight: 600; line-height: 1; letter-spacing: 0.02em; color: var(--cb-quiet); }
.cb-gl-en { font-family: var(--cb-font-tell); font-size: var(--cb-e3); color: var(--cb-ink); }
.cb-gl-n { font-size: var(--cb-e4); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cb-quiet); }
@media (prefers-reduced-motion: reduce) {
    .cb-glance { transition: none; }
}

/* ⭐ THE RELATIONS STRIP (the owner's look C, 20 October 2026: "I like C chips option", "design it super sleek and
   aesthetic"; js/course-book.js stripHTML): one dress for the course's word page (.cb-strip--page), the side panel's
   word card (.cb-strip--card) and a lesson's own word page (.cb-strip--lesson, laid in the page's grid by
   css/course-lesson.css), the owner's mock-up: a row a relation, its label in a fixed column so the chips align across
   the rows, then its pills. (⚖ 21 October 2026, the strip's second round, the owner's agreement: no head; the mock-up's
   quiet 関連 Related went, and the rows' own labels are the only heads.) (⚖ the lead, 20 October 2026, on the first shots: the label
   is one line always, never wrapped, so the column is as wide as the longest label, 字 SAME KANJI and its kanji, 106 px,
   on the page and in the panel alike, and the chips start at one x in every row.) The course's own
   tokens only, read from the room where it stands (the book's own fallbacks). A pill rests: its one ring in the rule's
   colour, no shadow beyond it, no lift, no glow, no motion; under the pointer or the focus its word alone takes the accent
   ink. The fill is the sheet on the paper page and the paper on the sheet panel. */
.cb-strip {
    --cbs-paper: var(--cl-paper, #F3F0EA);
    --cbs-sheet: var(--cl-sheet, #FBF8F2);
    --cbs-ink: var(--cl-ink, #3A3633);
    --cbs-quiet: var(--cl-quiet, #6E6860);
    --cbs-rule: var(--cl-rule, #D8D2C8);
    --cbs-accent: var(--cl-accent, #3D5A80);
    --cbs-font-jp: var(--font-jp, 'Klee One', 'Noto Sans JP', serif);
    --cbs-font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --cbs-font-num: 'Literata', Georgia, serif;
    --cbs-fill: var(--cbs-sheet);
    --cbs-lab: 106px;
    --cbs-row-gap: 12px;
    font-family: var(--cbs-font-ui);
    color: var(--cbs-ink);
}
.cb-strip--page { margin-top: 26px; }
.cb-strip--page.cb-strip--alone { margin-top: 88px; }
.cb-strip--card { --cbs-fill: var(--cbs-paper); --cbs-row-gap: 10px; margin-top: 26px; }
.cb-strip-rows { display: flex; flex-direction: column; gap: var(--cbs-row-gap); }
.cb-strip-row { display: grid; grid-template-columns: var(--cbs-lab) minmax(0, 1fr); column-gap: 10px; align-items: start; }
.cb-strip-lab { display: flex; align-items: center; min-height: 34px; }
.cb-strip-lt { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.cb-strip-lj { font-family: var(--cbs-font-jp); font-size: 12px; line-height: 1.3; color: var(--cbs-quiet); }
.cb-strip-le { font-size: 10px; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cbs-quiet); }
.cb-strip-lk { font-family: var(--cbs-font-jp); font-size: 13px; line-height: 1.3; color: var(--cbs-ink); }
.cb-strip-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
/* (.cb-strip doubles the class: the word page's button reset, `.wp-root button` and its :hover, must not strip the pill) */
.cb-strip .cb-rchip,
.cb-strip .cb-rchip:hover,
.cb-strip .cb-rchip:active {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    box-sizing: border-box;
    min-height: 34px;
    margin: 0;
    padding: 3px 13px 3px 3px;
    border: 0;
    border-radius: 999px;
    background: var(--cbs-fill);
    box-shadow: 0 0 0 1px var(--cbs-rule);
    color: var(--cbs-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transform: none;
}
.cb-strip .cb-rchip--bare { padding-left: 13px; }
.cb-rchip-pic { flex: none; display: block; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.cb-rchip-w { font-family: var(--cbs-font-jp); font-size: 15px; line-height: 1.2; color: var(--cbs-ink); white-space: nowrap; }
.cb-rchip-g { font-family: var(--cbs-font-ui); font-size: 11px; line-height: 1.3; color: var(--cbs-quiet); white-space: nowrap; }
.cb-strip .cb-rchip:hover .cb-rchip-w,
.cb-strip .cb-rchip:focus-visible .cb-rchip-w { color: var(--cbs-accent); }
.cb-strip .cb-rchip:focus-visible { outline: 2px solid var(--cbs-accent); outline-offset: 3px; border-radius: 999px; }
/* a family's door: the ghost chip, no fill, the rule's ring, the quiet ink; its words take the accent like a word does */
.cb-strip .cb-rchip--room,
.cb-strip .cb-rchip--room:hover,
.cb-strip .cb-rchip--room:active { gap: 8px; height: 34px; padding: 3px 13px; background: transparent; color: var(--cbs-quiet); }
.cb-room-n { font-family: var(--cbs-font-num); font-size: 13px; line-height: 1; }
.cb-room-j { font-family: var(--cbs-font-jp); font-size: 13px; line-height: 1; }
.cb-room-e { font-size: 11px; line-height: 1; }
.cb-strip .cb-rchip--room:hover,
.cb-strip .cb-rchip--room:focus-visible { color: var(--cbs-accent); }
/* the word card's give past its fold (js fitStory) reaches the strip too: its air and its rows a little closer */
.cb-pn--snug .cb-strip--card { --cbs-row-gap: 8px; margin-top: 18px; }
/* the room is a desktop surface (js/grid-mode.js loadConstellation stands down at 768 px and under): no door that opens
   nothing */
@media (max-width: 768px) {
    .cb-strip .cb-rchip--room { display: none; }
}