/* ==========================================================================
 * 稽古 COURSE: the course portal's dress (js/course-home.js), the BOOKSHELF of
 * Round B (B1, 11 October 2026: elevate_2026-10-09/REPORT.md §5.4 and §5.6,
 * PLAN.md §2 row B1).
 *
 * The room takes the lesson's paper, unit and Literata, so a lesson's door does
 * not change the light. The --cl-* tokens live on #kotobaLesson, not :root, so
 * the room aliases them with fallbacks the way css/course-book.css does. The
 * strip wears the hall cover's dress (css/home-hall.css .hall-course--cover):
 * the picture in a 3:2 seat at the left, the eyebrow, the mark in Noto Sans JP
 * with the name in Literata, the one line, the verb in indigo. The shelf is
 * one row a lesson: the number, the kanji in Klee 1.25u, the title in
 * Literata, the painting in the same small seat, and one quiet status label
 * at the row's end (D48, 21 October 2026: 途中 In progress · at Practice,
 * 済 Finished · 20 Oct; the ink dot it replaces is gone). The type rule (§5.6):
 * Klee One for the Japanese a learner reads,
 * Noto Sans JP for every Japanese string of the chrome, Literata for English
 * read as content, Inter for the app's own voice. One accent (indigo, the
 * presses); cards rest; no gradient, no lift, no zoom. Hover is colour only;
 * the one motion is the room's fade, off under reduced motion.
 *
 * The room sits at z 9400, the lesson's seat: under the hall (9500), which it
 * steps down on open (tests/voice/zindex_ladder_test.js, BENEATH THE HALL).
 *
 * ⚖ 21 October 2026 (the owner's decisions of 20 October 2026, his go of 21 October): 探す SEARCH left the room; the
 * head's glass with its ⌘K hint opens the course's search, the app's palette configured for the course
 * (css/vocab-palette.css, its course rules). The glass wears the house's one door (.lookup-glass) in the room's inks,
 * the hint the old field's key dress (.ch-key); the field's rules, its lines and its stuck shadow are gone.
 *
 * ⚖ 22 October 2026 (the owner's D60; COURSE_RULES rule 17's line of that day): the head's quiet numbers (.ch-nums)
 * take the count line's place; the panel's side covers keep one picture column. Until D63 the same evening (below) a
 * row's end carried two marks, a dot and a homework strip, with their cards; their rules left with them. The row is the
 * hall card's pattern: its link stretched under it (.ch-row-go), the kanji over it for their hover card.
 *
 * ⚖ 22 October 2026 (the owner's D63: the designer's round three "as a base", "apply extra polish, make it sleeker"): THE
 * PAINTING CARRIES THE STATE, THE ROW GIVES WAY TO A STUB. The dot, the strip and their cards are gone. A row's painting
 * sinks into the sheet (mix-blend-mode: multiply) and wears the lesson's state: .ch-seat--wash before it is opened (the
 * figure faint, its paper dropped into the sheet), .ch-seat--part inked as far as the part (the inked copy over its wash,
 * masked to --ink with a feathered edge: the one gradient on the sheet, an alpha mask, never a fill), .ch-seat--whole once
 * finished. Under the pointer, keyboard focus (:focus-visible on the row's link or its stub) or a long press (.is-held), the
 * verb beside the title fades in (.ch-verb, the accent), and on a finished lesson with a set (.has-set) the painting slides
 * aside (--ch-slide: the stub's width and one column's air past the fore-edge, 56 px at 1280) for the stub (.ch-stub), flush
 * with the sheet's fore-edge, one paper step under the row's ground. The slide is the sheet's one motion besides the room's
 * fade: it waits a breath for the pointer to rest (--ch-intent), runs on the house's settle curve with no overshoot, and
 * goes home quicker than it came; under reduced motion everything simply appears. Cards rest: no lift, no shadow.
 * ⚖ The same night (the designer's verdict on the build: SHIP, with two changes): the in-progress wipe's feather widens,
 * so a lesson in progress never reads as finished: the ink runs solid to 30 points before the part and the wash is whole
 * 12 points after it, both stops clamped to the painting (Practice 45% to 87%, New words 20% to 62%, Review 0 to 37%);
 * and the stub's keyboard ring, the heaviest mark on the sheet at full accent, drops to the accent at 68%, still inside:
 * the least that keeps 3:1 against the stub's paper (WCAG 1.4.11; the lead's call on the verdict's 55%, which measured 2.4:1).
 *
 * ⚖ 24 October 2026 (the owner, of lesson 13's row: "can you also remove 'read' tab from the course row given we now changed
 * course navigation system"): THE STUB GOES WITH D66, the Reading read inside the lesson as its fourth part. .ch-stub, its
 * paper, its ring and its tokens are gone, and the slide with them (.has-set, --ch-slide, --ch-give, --ch-give-back): under
 * the pointer, keyboard focus or a long press the ground takes its breath of tone and the verb fades in, and the painting
 * stays where it stands at rest. Nothing on the sheet moves now; the room's fade is its one motion.
 * ==========================================================================*/

.ch-room {
    --ch-u: var(--cl-u, clamp(16px, 9px + 0.625vw, 19px));     /* 17 at 1280, 18 at 1440, 19 from 1600 */
    --ch-paper: var(--cl-paper, #F3F0EA);
    --ch-sheet: var(--cl-sheet, #FBF8F2);
    --ch-rule: var(--cl-rule, #D8D2C8);
    --ch-hair: rgba(44, 44, 44, 0.06);
    --ch-ink: var(--cl-ink, #3A3633);
    --ch-jp: var(--color-jp-text, #523E1E);
    --ch-jp-quiet: rgba(82, 62, 30, 0.62);                        /* the Japanese of a lesson that does not open */
    --ch-stone: #57534E;
    --ch-quiet: var(--cl-quiet, #6E6860);
    --ch-accent: var(--cl-accent, #3D5A80);
    --ch-lit: rgba(61, 90, 128, 0.045);
    --ch-wash: rgba(140, 133, 120, 0.06);
    --ch-rest: 0 1px 2px rgba(0, 0, 0, 0.03);
    --ch-col: 1200px;
    --ch-num: calc(2.6 * var(--ch-u));
    --ch-markw: calc(15.5 * var(--ch-u));                         /* the kanji's column: ten kanji at 1.25u on one line (13 October 2026) */
    --ch-seat-h: calc(3.5 * var(--ch-u));                         /* a row's painting, 3:2 */
    --ch-seat-w: calc(5.25 * var(--ch-u));
    /* ⭐ (22 October 2026, D63) the row that gives way (24 October 2026: to its verb alone, the stub and the slide gone) */
    --ch-fore: 32px;                                              /* a row's painting from the sheet's fore-edge */
    --ch-row-hover: #F7F3EC;                                      /* a row under the pointer, one breath under the sheet */
    --ch-intent: 60ms;                                            /* the pointer rests a breath before the row gives way */
    --ch-air-in: calc(1.2 * var(--ch-u));
    --ch-air-between: calc(2.8 * var(--ch-u));
    /* the type steps, nothing else */
    --k4: calc(2.05 * var(--ch-u));
    --k5: calc(1.6 * var(--ch-u));
    --k6: calc(1.125 * var(--ch-u));
    --k7: calc(0.875 * var(--ch-u));
    --kmark: calc(1.25 * var(--ch-u));                            /* the shelf's kanji (REPORT §5.4) */
    --e1: calc(1.25 * var(--ch-u));
    --e2: var(--ch-u);
    --e3: calc(0.8125 * var(--ch-u));
    --e4: calc(0.6875 * var(--ch-u));
    --ch-jpf: var(--font-jp, 'Klee One', 'Noto Sans JP', serif);
    --ch-chrome-jp: 'Noto Sans JP', sans-serif;
    --ch-uif: 'Inter', 'Noto Sans JP', system-ui, sans-serif;
    --ch-tell: var(--cl-font-tell, 'Literata', 'Iowan Old Style', Palatino, Georgia, serif);
    --ch-ease-brush: var(--ease-brush, cubic-bezier(0.16, 1, 0.3, 1));
    --ch-ease-settle: var(--ease-settle, cubic-bezier(0.22, 1, 0.36, 1));

    position: fixed;
    inset: 0;
    z-index: 9400;                       /* the lesson's seat: under the hall (9500), which it steps down */
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scroll-behavior: auto;
    background: var(--ch-paper);
    color: var(--ch-ink);
    font-family: var(--ch-uif);
    font-size: var(--e3);
    line-height: 1.45;
    text-align: left;
    -webkit-font-smoothing: antialiased;
    outline: 0;
}
.ch-room[hidden] { display: none; }
.ch-room.ch-arrive { animation: ch-arrive 320ms var(--ch-ease-brush) both; }
.ch-room.ch-room--out { opacity: 0; pointer-events: none; transition: opacity 300ms var(--ch-ease-settle); }
@keyframes ch-arrive { from { opacity: 0; } to { opacity: 1; } }

.ch-room *, .ch-room *::before, .ch-room *::after { box-sizing: border-box; }
.ch-room [lang="ja"] { font-family: var(--ch-jpf); }
.ch-room h1, .ch-room h2, .ch-room h3, .ch-room p, .ch-room ol, .ch-room figure { margin: 0; padding: 0; }
.ch-room button {
    appearance: none; font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0;
    cursor: pointer; text-align: inherit; box-shadow: none; border-radius: 0; min-height: 0; width: auto; letter-spacing: inherit;
}
.ch-room a { color: inherit; text-decoration: none; }
/* the browser outline stays on the glass and Close; rows and covers take the inset bar */
.ch-room .ch-glass:focus-visible, .ch-room .ch-close:focus-visible,
.ch-room .ch-next button:focus-visible { outline: 2px solid var(--ch-accent); outline-offset: 2px; border-radius: 4px; }
.ch-room .ch-caps { font-family: var(--ch-uif); font-size: var(--e4); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ch-quiet); }

.ch-col { max-width: calc(var(--ch-col) + 80px); margin: 0 auto; padding: calc(var(--ch-air-in) / 2) 40px var(--ch-air-between); }
.ch-room .ch-fail { margin: var(--ch-air-between) 2px; font-size: var(--e3); color: var(--ch-quiet); }

/* ── 1 · the head ── */
.ch-head { display: flex; align-items: center; justify-content: space-between; height: calc(4 * var(--ch-u)); }
.ch-name { display: flex; align-items: baseline; gap: calc(var(--ch-air-in) / 2); font-weight: 400; }
.ch-room .ch-name [lang="ja"] { font-family: var(--ch-chrome-jp); font-weight: 500; font-size: var(--k5); color: var(--ch-jp); letter-spacing: 0.04em; line-height: 1.1; }
.ch-room .ch-close { display: inline-flex; align-items: center; gap: 8px; font-size: var(--e3); color: var(--ch-stone); padding: 7px 14px; border-radius: 999px; border: 1px solid var(--ch-rule); }
.ch-room .ch-close:hover { color: var(--ch-ink); }
/* ⭐ U-116 (the deep review, 26 October 2026): `✕ 閉じる Close`, the kanji in the chrome face in the Japanese brown, as the
   lesson's own pill prints it (css/course-lesson.css #kotobaLesson.cl-framed .cl-pill [lang="ja"]) */
.ch-room .ch-close [lang="ja"] { font-family: var(--ch-chrome-jp); font-size: var(--e3); font-weight: 500; letter-spacing: 0.04em; color: var(--ch-jp); }
/* the course's search (21 October 2026): the glass and its key hint beside Close, the house's one door in the room's
   inks; hover changes ink and wash, never geometry */
.ch-tools { display: flex; align-items: center; gap: 10px; }
/* ⭐ (22 October 2026, D60) the learner's own numbers, quiet, before the glass: `45 kanji · 78 words · 66 pieces read` */
.ch-room .ch-nums { margin: 0 10px 0 0; font-size: var(--e3); color: var(--ch-quiet); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ch-room .ch-nums[hidden] { display: none; }
/* ⭐ U-104 (the deep review, 26 October 2026): signed out with a lesson finished, the numbers end `· on this device` in their
   own quiet type; the words are a real press to the app's sign-in, so they wear a quiet underline at rest (a door must
   look like one at rest) and take the ink on hover and focus, never geometry */
.ch-room .ch-device-in { text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(110, 104, 96, 0.5); transition: color 160ms ease, text-decoration-color 160ms ease; }
.ch-room .ch-device-in:hover { color: var(--ch-ink); text-decoration-color: currentColor; }
.ch-room .ch-device-in:focus-visible { color: var(--ch-ink); outline: 2px solid var(--ch-accent); outline-offset: 2px; border-radius: 2px; }
.ch-room .ch-glass { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px; border-radius: 8px; color: var(--ch-quiet); transition: color 160ms ease, background-color 160ms ease; }
.ch-room .ch-glass svg { flex: 0 0 auto; width: 18px; height: 18px; }
.ch-room .ch-glass:hover, .ch-room .ch-glass:active { color: var(--ch-ink); background: var(--ch-wash); box-shadow: none; }
.ch-key { flex: 0 0 auto; font-size: var(--e4); line-height: 1.5; color: var(--ch-quiet); border: 1px solid var(--ch-rule); border-radius: 4px; padding: 0 6px; }
.ch-room kbd.ch-key { font-family: var(--ch-uif); }

/* ── 2 · the strip: tonight's cover, then the homework's and the notebook's in one column; the hall cover's
   dress (css/home-hall.css .hall-course--cover), sized to the room's unit ── */
.ch-strip { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); background: var(--ch-sheet); border: 1px solid var(--ch-rule); border-radius: 10px; box-shadow: var(--ch-rest); overflow: hidden; }
.ch-room .ch-cover { display: flex; align-items: center; gap: calc(1.4 * var(--ch-u)); min-width: 0; padding: var(--ch-air-in) calc(1.6 * var(--ch-u)) var(--ch-air-in) var(--ch-air-in); text-align: left; transition: background 160ms ease; }
.ch-room a.ch-cover:hover, .ch-room button.ch-cover:hover { background: var(--ch-wash); }
.ch-room .ch-cover:focus-visible { outline: 0; box-shadow: inset 2px 0 0 var(--ch-accent); }
.ch-strip-side { display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); min-width: 0; border-left: 1px solid var(--ch-hair); }
.ch-strip-side--one { grid-template-rows: minmax(0, 1fr); }
.ch-room .ch-strip-side .ch-cover { padding: calc(0.9 * var(--ch-u)) calc(1.4 * var(--ch-u)) calc(0.9 * var(--ch-u)) var(--ch-air-in); }
.ch-room .ch-strip-side .ch-cover + .ch-cover { border-top: 1px solid var(--ch-hair); }
/* where a side cover hangs a picture, both keep its column (an empty seat holds it, unseen): one line of words down the side */
.ch-room .ch-strip-side--pic .ch-cover-art--empty { display: block; visibility: hidden; }
.ch-cover-art { flex: 0 0 auto; display: block; width: calc(10.5 * var(--ch-u)); height: calc(7 * var(--ch-u)); border-radius: 6px; overflow: hidden; background: var(--ch-paper); box-shadow: inset 0 0 0 1px rgba(44, 44, 44, 0.05); }
.ch-strip-side .ch-cover-art { width: calc(6 * var(--ch-u)); height: calc(4 * var(--ch-u)); border-radius: 4px; }
.ch-cover-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* a portrait is one object on bare paper: shown whole, never cropped; a painting fills its 3:2 seat */
.ch-cover-art--portrait { background: transparent; box-shadow: none; border-radius: 0; }
.ch-cover-art--portrait img { object-fit: contain; }
/* no picture: the seat folds and the words take the cover (an empty box on the paper is wallpaper) */
.ch-cover-art--empty { display: none; }
.ch-cover-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ch-eyebrow { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 7px; font-family: var(--ch-uif); font-size: var(--e4); font-weight: 600; letter-spacing: 0.1em; line-height: 1.3; color: var(--ch-quiet); }
.ch-room .ch-eyebrow [lang="ja"] { font-family: var(--ch-chrome-jp); font-size: var(--k7); font-weight: 500; letter-spacing: 0; color: var(--ch-stone); }
.ch-cover-title { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 2px; margin-top: 2px; }
.ch-room .ch-cover .ch-cover-mark { font-family: var(--ch-chrome-jp); font-weight: 500; font-size: var(--k5); line-height: 1.15; color: var(--ch-jp); }
.ch-cover-name { font-family: var(--ch-tell); font-size: var(--e1); line-height: 1.25; color: var(--ch-ink); }
.ch-strip-side .ch-cover-name { font-size: var(--e2); }
.ch-room .ch-strip-side .ch-cover .ch-cover-mark { font-size: var(--k6); }
.ch-cover-line { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-width: 62ch; font-family: var(--ch-tell); font-size: calc(0.85 * var(--ch-u)); line-height: 1.5; color: var(--ch-stone); }
/* the homework's and the notebook's lines are the app's own voice (Inter), not content */
.ch-cover-line--ui { font-family: var(--ch-uif); font-size: var(--e3); line-height: 1.45; color: var(--ch-quiet); }
.ch-cover-press { display: inline-flex; align-items: baseline; gap: 6px; margin-top: 4px; font-family: var(--ch-uif); font-size: var(--e3); font-weight: 500; color: var(--ch-accent); transition: color 160ms ease; }
.ch-room .ch-cover-press [lang="ja"] { font-family: var(--ch-chrome-jp); font-size: calc(0.9 * var(--ch-u)); font-weight: 500; }
.ch-room .ch-cover:hover .ch-cover-press { color: #2E4766; }

/* ── 4 · the shelf: `課程 THE COURSE · 514 lessons`, one row a lesson ── */
.ch-course { margin-top: calc(var(--ch-air-between) - 10px); }
/* one line of text in flow (no flex gap): `課程 THE COURSE · 514 lessons`, one space each side of the middle dot */
.ch-h2 { display: block; margin: 0 2px var(--ch-air-in); font-weight: 400; line-height: 1.4; }
.ch-room .ch-h2 [lang="ja"] { font-family: var(--ch-chrome-jp); font-weight: 500; font-size: var(--k6); color: var(--ch-jp); letter-spacing: 0.04em; }
.ch-h2-count { font-family: var(--ch-uif); font-size: var(--e3); color: var(--ch-quiet); font-variant-numeric: tabular-nums; }
.ch-shelf { background: var(--ch-sheet); border: 1px solid var(--ch-rule); border-radius: 10px; box-shadow: var(--ch-rest); overflow: hidden; }
.ch-row {
    position: relative;
    display: grid;
    grid-template-columns: var(--ch-num) var(--ch-markw) minmax(0, 1fr) var(--ch-seat-w);
    column-gap: var(--ch-air-in);
    align-items: center;
    min-height: calc(var(--ch-seat-h) + 20px);
    padding: 10px var(--ch-fore) 10px var(--ch-air-in);
    scroll-margin-top: 112px;
    outline: 0;
    transition: background 160ms ease;
}
.ch-row + .ch-row, .ch-gap + .ch-row, .ch-row + .ch-gap, .ch-tail > :first-child { border-top: 1px solid var(--ch-hair); }
.ch-row[hidden] { display: none; }
/* ⭐ (22 October 2026) a lesson that opens: its link stretched under the row (the hall card's pattern, .hc-door), so a
   press anywhere on it opens the lesson and Tab and Enter reach it; the kanji stand over it for their hover card */
.ch-row-go { position: absolute; inset: 0; z-index: 0; outline: 0; }
.ch-row.is-opens { cursor: pointer; -webkit-touch-callout: none; }
.ch-row-go:focus-visible, .ch-row.is-shut:focus-visible { box-shadow: inset 2px 0 0 var(--ch-accent); }
.ch-row.is-lit { background: var(--ch-lit); }
.ch-num { font-family: var(--ch-tell); font-size: var(--k6); line-height: 1.3; color: var(--ch-quiet); font-variant-numeric: oldstyle-nums proportional-nums; padding-left: 2px; }
.ch-mark { position: relative; z-index: 1; min-width: 0; font-size: var(--kmark); line-height: 1.3; color: var(--ch-jp); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* the kanji a lesson teaches (13 October 2026): one line, cut with an ellipsis past the column, the hover card below */
.ch-mark--kanji { letter-spacing: 0; display: block; white-space: nowrap; text-overflow: ellipsis; }
/* a mark of ten glyphs or more prints at 1u on one line, so the rows stay even; the column stays 12.5u, and a mark
   longer still is cut with an ellipsis, its whole text on hover */
.ch-mark--long { display: block; font-size: var(--e2); white-space: nowrap; text-overflow: ellipsis; }
.ch-name { min-width: 0; font-family: var(--ch-tell); font-size: var(--e2); line-height: 1.35; color: var(--ch-ink); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition: color 160ms ease; }
/* a lesson that does not open: a quiet line, no press, no promise */
.ch-row.is-shut .ch-mark { color: var(--ch-jp-quiet); }
.ch-row.is-shut .ch-name { color: var(--ch-quiet); }

/* ⭐ (22 October 2026, the owner's D63) THE TITLE AND ITS VERB: one line of title, whole at rest, and beside it, once the row
   gives way, the verb of the row's own press, もう一度 Retake or 続き Resume, in the accent; it takes no room at rest, so a
   long title is never cut for a word nobody sees */
.ch-title { display: flex; align-items: baseline; justify-content: space-between; min-width: 0; }
.ch-row .ch-name { display: block; flex: 0 1 auto; white-space: nowrap; text-overflow: ellipsis; }
.ch-verb { flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 6px; max-width: 0; overflow: hidden; margin-left: 0;
    font-family: var(--ch-uif); font-size: var(--e3); font-weight: 500; line-height: 1.3; color: var(--ch-accent); white-space: nowrap;
    opacity: 0; transition: opacity 100ms ease, max-width 0s linear 100ms, margin 0s linear 100ms; }
.ch-room .ch-verb [lang="ja"] { font-family: var(--ch-chrome-jp); font-size: calc(0.85 * var(--ch-u)); font-weight: 500; letter-spacing: 0.02em; }

/* THE PAINTING CARRIES THE STATE: it sinks into the sheet (multiply, on the seat itself, which stays put since 24 October
   2026, the stub it slid aside for gone); a wash before the lesson is opened, inked as far as the part while in progress,
   whole once finished */
.ch-seat { position: relative; display: block; width: var(--ch-seat-w); height: var(--ch-seat-h); border-radius: 4px; overflow: hidden;
    mix-blend-mode: multiply; }
.ch-seat img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ch-seat--portrait { border-radius: 0; }
.ch-seat--portrait img { object-fit: contain; }
.ch-seat--empty { mix-blend-mode: normal; }
/* the wash: the figure faint and its paper dropped into the sheet, so a lesson not yet opened is a drawing on the page,
   not a grey box */
.ch-seat--wash img, .ch-seat-wash { opacity: 0.5; filter: grayscale(1) contrast(1.12) brightness(1.08); }
/* in progress: the inked copy laid over its wash, inked to --ink (Review a quarter, New words half, Practice three
   quarters; the front page a touch, the close nearly whole), its edge feathered like a brush running dry: solid to 30
   points before the part, the wash whole 12 points after it, both stops clamped to the painting (Practice 45% to 87%),
   so the wash shows well before the part (the designer's verdict); the one gradient on the sheet, an alpha mask, never
   a fill */
.ch-seat--part img { position: absolute; inset: 0; }
.ch-seat-ink { -webkit-mask-image: linear-gradient(90deg, #000 clamp(0%, calc(var(--ink) - 30%), 100%), transparent clamp(0%, calc(var(--ink) + 12%), 100%));
    mask-image: linear-gradient(90deg, #000 clamp(0%, calc(var(--ink) - 30%), 100%), transparent clamp(0%, calc(var(--ink) + 12%), 100%)); }

/* THE ROW GIVES WAY: under the pointer, on keyboard focus (its link's) and on a long press. The ground takes a breath of
   tone and the verb fades in once the pointer has rested a breath (--ch-intent), so a sweep down the list never ripples;
   the painting stays where it stands (24 October 2026: the stub it slid aside for went with D66) */
.ch-room .ch-row.is-opens:hover, .ch-room .ch-row.is-opens:has(:focus-visible), .ch-room .ch-row.is-opens.is-held { background: var(--ch-row-hover); }
.ch-room .ch-row.is-opens:hover .ch-verb, .ch-room .ch-row.is-opens:has(:focus-visible) .ch-verb, .ch-room .ch-row.is-opens.is-held .ch-verb {
    max-width: 20em; margin-left: var(--ch-air-in); opacity: 1; transition: opacity 160ms ease calc(var(--ch-intent) + 40ms), max-width 0s, margin 0s; }
.ch-gap { padding: 10px calc(1.2 * var(--ch-u)) 10px calc(2 * var(--ch-air-in) + var(--ch-num)); font-size: var(--e4); color: var(--ch-quiet); }
.ch-next { display: flex; justify-content: center; margin-top: calc(var(--ch-air-in) / 2); }
.ch-next[hidden] { display: none; }
.ch-room .ch-next button { padding: 12px 20px; font-size: var(--e3); font-weight: 500; color: var(--ch-accent); }
.ch-room .ch-next button span { color: var(--ch-quiet); font-weight: 400; }
.ch-room .ch-next button:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── the kanji column's hover card: each kanji, its meaning, the word it is met in ── */
.ch-pop { position: fixed; z-index: 9460; display: grid; grid-template-columns: auto auto minmax(0, 1fr); column-gap: 14px; row-gap: 5px; align-items: baseline;
    min-width: calc(16 * var(--ch-u)); max-width: calc(30 * var(--ch-u)); padding: 12px 16px 13px; background: var(--ch-sheet); border: 1px solid var(--ch-rule); border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.09), var(--ch-rest); font-family: var(--ch-tell); pointer-events: none; }
.ch-pop[hidden] { display: none; }
.ch-room .ch-pop .ch-pop-k { font-family: var(--ch-jpf); font-size: var(--kmark); line-height: 1.2; color: var(--ch-jp); }
.ch-room .ch-pop .ch-pop-k--word { font-size: var(--e2); white-space: nowrap; }
.ch-room .ch-pop .ch-pop-en { font-size: var(--e3); line-height: 1.3; color: var(--ch-ink); white-space: nowrap; }
.ch-room .ch-pop .ch-pop-w { font-size: var(--e3); line-height: 1.3; color: var(--ch-quiet); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-room .ch-pop .ch-pop-w [lang="ja"] { font-family: var(--ch-jpf); color: var(--ch-jp); }
.ch-room .ch-pop .ch-pop-wen::before { content: " · "; }

/* ── 5 · the foot ── */
.ch-room .ch-foot { margin: var(--ch-air-between) 0 0; text-align: center; font-size: var(--e4); color: var(--ch-quiet); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
    .ch-room.ch-arrive { animation: none; }
    .ch-room.ch-room--out { transition: none; }
    .ch-room .ch-cover, .ch-row, .ch-name, .ch-cover-press, .ch-room .ch-glass, .ch-room .ch-device-in { transition: none; }
    /* (D63) the row gives way with no motion: the verb simply appears (24 October 2026: no stub, no slide) */
    .ch-room .ch-row .ch-verb { transition: none !important; }
}

/* ── the phone: readable, no polish (D23) ── */
@media (max-width: 768px) {
    .ch-room { --ch-num: calc(2 * var(--ch-u)); }
    .ch-col { padding: 8px 16px 40px; }
    .ch-strip { grid-template-columns: minmax(0, 1fr); }
    .ch-strip-side { border-left: 0; border-top: 1px solid var(--ch-hair); }
    .ch-room .ch-cover { padding: 14px 16px; }
    .ch-cover-art { width: calc(6 * var(--ch-u)); height: calc(4 * var(--ch-u)); }
    /* the phone keeps no desktop door (css/vocab-palette.css: mobile never shows the glass) */
    .ch-room .ch-glass { display: none; }
    .ch-room .ch-nums { margin-right: 4px; font-size: var(--e4); }
    /* (D63) the painting stays, small, so the state still shows (no verb: the narrow row has no room for it, and the row's
       own press needs no word; 24 October 2026: no stub) */
    .ch-room { --ch-seat-w: calc(3.6 * var(--ch-u)); --ch-seat-h: calc(2.4 * var(--ch-u)); }
    .ch-room .ch-row .ch-verb { display: none; }
    .ch-row { grid-template-columns: var(--ch-num) minmax(0, 1fr) auto; row-gap: 2px; min-height: 0; padding: 12px var(--ch-fore) 12px 10px; }
    .ch-row .ch-num { grid-row: 1 / span 2; }
    .ch-row .ch-mark { grid-column: 2; grid-row: 1; }
    .ch-row .ch-title { grid-column: 2; grid-row: 2; }
    .ch-row .ch-seat { grid-column: 3; grid-row: 1 / span 2; }
}

/* ── the hall's course card (js/home-hall.js renderCourseCard) wears the hall's cover dress
   (css/home-hall.css .hall-course--cover since the elevate round, A13); nothing of it lives here ── */