/* ==========================================================================
 * 棚 THE COURSE SHELF: the course's face on the gallery (the owner's D44, 19 October 2026; js/course-shelf.js)
 *
 * The main portal's wall, filters and practice, scoped to the words the lessons have taught, in the course's own
 * dress: one paper, one ink, the Klee hand for the Japanese, Literata for a lesson's title, kana and never romaji,
 * kanji + English on every piece of chrome (D33, rule 18). Cards rest; nothing floats, glows or counts a score.
 * Gated on body.course-shelf-active (js/grid-mode.js setActivePath('course')).
 * ⭐ Since the landing's step 3 (BUILD_SPEC.md §3, 31 October 2026): under the landing's own beam (one product), on the
 * course's paper, in its 1200 column, the head row above the wall (its views and its tools: 絞る Filter · 隠す Hide, 見る
 * Browse · 練習 Practice), the portraits as ink (no mount, no ring, no shadow).
 * ⭐ THE SHELF FINISH (1 November 2026; the designer's DESIGN.md and the owner's two changes, docs/course_v2/reviews/
 * shelf_finish_2026-11-01/BUILD.md): two materials, ink on the page's paper for content and one slip (the sheet, a shade
 * lighter than the page, a shadow, no ring) for every control but the two marks, which keep the app's hairline (the owner, 2 November 2026),
 * with a wash of the page's own paper for what is held (the keyboard's place, a turned card under the hand, the setting in force). The head row is quiet chrome, the
 * place marked once by a sumi rule; the way back (‹ 課程 Course) and the settings (⋮) stand in the beam, left of the pill. The
 * English is whole on every card: wrapped in a two-line seat, never clipped, faded or scrolled. Four
 * columns from 1400 px, never five. Colours only through the tokens below, so the elevation's palette re-points them.
 * ==========================================================================*/

/* ⭐ THE DESIGN ELEVATION'S STEPS 1 AND 2 ON THE SHELF (1 November 2026; css/course-lesson.css #kotobaLesson says the palette;
   docs/course_v2/reviews/elevate_step12_2026-11-01/STEP12.md §9): the rooms' one paper 白練 (shironeri) #FCFAF2, the slip
   胡粉 (gofun) #FFFFFB, the sumi #2A231F for every kanji and kana, the ink #38322D for English, the stone #514A44, the one
   quiet ink #69625A, so a step from the course page into the shelf changes nothing but the content. The shelf re-points the
   app's own inks for its lifetime, as every course room does (css/course-home.css .ch-room): the wall, the walk and the
   side panels read them. ⛔ Never under the hall: the local product's way home (‹ 課程 Course, ✕ 閉じる Close) opens the hall with
   the course path still standing and the class still on the body, and the hall keeps the app's own inks (css/tokens.css). */
body.course-shelf-active:not(.home-hall) {
    --color-jp-text: #2A231F;
    --color-ink: #2A231F;
    --ink: #2A231F;
    --color-stone: #514A44;
    --stone: #514A44;
    --color-faint-warm: #69625A;
}
body.course-shelf-active {
    --cs-paper: var(--cl-paper, #FCFAF2);
    --cs-sheet: var(--cl-sheet, #FFFFFB);
    --cs-ink: var(--cl-ink, #38322D);
    --cs-past: var(--cl-ink-past, #514A44);
    --cs-stone: #514A44;
    --cs-quiet: var(--cl-quiet, #69625A);
    --cs-jp: var(--color-jp-text, #2A231F);
    --cs-rule: var(--cl-rule, #E6E1D7);
    --cs-hair: rgba(42, 35, 31, 0.08);
    --cs-accent: var(--cl-accent, #3D5A80);
    --cs-accent-deep: #2E4766;
    --cs-font-jp: var(--font-jp, 'Klee One', 'Noto Sans JP', serif);
    --cs-chrome-jp: 'Noto Sans JP', sans-serif;
    --cs-font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --cs-font-tell: 'Literata', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
    /* the course's unit and steps (17 at 1280, 18 at 1440, 19 from 1600) and its column: ONE token each for the beam, the
       course page and the shelf (css/course-home.css :root --course-u, --course-col), so a column that breathes with the
       window moves the beam and the shelf together and KOTOBA, the head row and the first card keep one left edge */
    --cs-u: var(--course-u, clamp(16px, 9px + 0.625vw, 19px));
    --cs-e2: var(--cs-u);
    --cs-e3: calc(0.8125 * var(--cs-u));
    --cs-k5: calc(1.6 * var(--cs-u));
    --cs-col: var(--course-col, 1200px);
    --cs-t: 160ms ease;
    /* ⭐ the shelf finish's materials, made of the inks above (no colour of their own): a wash pressed into the page (a held
       hand, a receipt, the setting in force), the keyboard's seat, a turned card under the hand; the slip a control is cut
       from, at rest and under the hand */
    --cs-wash: color-mix(in srgb, var(--cs-ink) 5.5%, transparent);
    --cs-wash-hi: color-mix(in srgb, var(--cs-ink) 8%, transparent);
    --cs-wash-focus: color-mix(in srgb, var(--cs-ink) 6.5%, transparent);
    --cs-wash-turn: color-mix(in srgb, var(--cs-ink) 4.5%, transparent);
    --cs-slip: var(--cs-sheet);
    --cs-slip-rest: 0 0 1px color-mix(in srgb, var(--cs-ink) 16%, transparent),
                    0 1px 2px color-mix(in srgb, var(--cs-ink) 6%, transparent),
                    0 2px 6px -3px color-mix(in srgb, var(--cs-ink) 10%, transparent);
    --cs-slip-hi: 0 0 1px color-mix(in srgb, var(--cs-ink) 20%, transparent),
                  0 1px 3px color-mix(in srgb, var(--cs-ink) 9%, transparent),
                  0 3px 9px -4px color-mix(in srgb, var(--cs-ink) 16%, transparent);
    /* ⭐ (the review round) the sound's ink: amber = how it sounds (the owner's scaffold, #313, 7 June 2026), a step deeper
       than the house's reading amber so it reads at AA on the course's paper: the deep amber with a fifth of the course's
       ink in it, 5.56:1 on 白練 #FCFAF2 (the house's #A8854B prints 3.31:1 there) */
    --cs-sound: color-mix(in srgb, var(--color-amber-deep, #8A6E35) 80%, var(--cs-ink));
    /* ⭐ (the two marks, 2 November 2026) the small ink of まだ and 覚えた under the hand, on their own wash on this paper: the walk's --amber-aa and --moss-aa
       (css/study-walk.css), a step deeper than the app's #8A6E35 and #6B7F5C, which read under AA here; still amber, still moss */
    --cs-mark-amber: #7A6230;
    --cs-mark-moss: #5E7050;
}

/* ── ⭐ THE COURSE'S OWN BEAM (BUILD_SPEC.md §3, the landing's step 3, 31 October 2026): js/course-landing.js shelfBeam
   stands the landing's beam over the shelf (#ldShelfBeam, css/course-landing.css) and marks the body cs-beam-on; the app's
   beam steps off the glass (its presses live on as the head row's: js/course-shelf.js tool), and the wall and the walk start
   under the course's 72 px band, whether or not the app's beam would have hidden on the scroll ── */
@media (min-width: 769px) {
    body.course-shelf-active.cs-beam-on .ink-wash-nav { display: none !important; }
    body.course-shelf-active.cs-beam-on { --nav-bar-total-height: 72px; }
    body.grid-mode.course-shelf-active.cs-beam-on .grid-container,
    body.grid-mode.course-shelf-active.cs-beam-on.nav-is-hidden .grid-container { margin-top: 72px; padding-top: 0; }
    /* ⭐ THE SHELF TOP (the owner's pick of 6 November 2026, docs/course_v2/reviews/shelf_elevation_2026-11-05/round2/, direction A):
       the app's 2vh over the page leaves while the course's beam stands, so the wall's scroller starts at the beam's foot and the head
       row, sticky at the scroller's top (below), stands exactly under the beam with no slit of cards between them */
    body.course-shelf-active.cs-beam-on:not(.home-hall) { padding-top: 0; }
    /* the beam's own 40 px gutters at every width (css/course-landing.css .ld-beam-in), so the column under it keeps
       KOTOBA's left edge; a side panel open takes its share of the wall's width from under the beam */
    body.grid-mode.course-shelf-active.cs-beam-on .grid-container { padding-left: 40px; padding-right: 40px; }
    /* ⭐ (the bar stands still, 2 November 2026) the wall's own gutter is always kept, whether the wall scrolls or not (a short filter, the walk),
       as the beam's seat keeps the same one (css/course-landing.css): under real scrollbars the column would otherwise slide 4 px under the pointer
       that pressed 練習 Practice, and stand 4 px off KOTOBA */
    body.grid-mode.course-shelf-active.cs-beam-on .grid-container { scrollbar-gutter: stable; }
    /* ⭐ (the bar stands still) the side panels open beneath the beam, which no longer steps aside for them (css/course-landing.css):
       their heads start under its 72 px band, the wall still gives them their width. The hall's rail stays its own */
    body.course-shelf-active.cs-beam-on:not(.home-hall) :is(#browseSidebar, #settingsSidebar) { top: 72px; }
}
/* ── the course's paper: one ground under the wall, the walk and the side panels (the gallery's time-of-day paper and its
   seasonal veil step aside while the course stands: the room lays its own paper, css/tokens.css --room-ground) ── */
body.course-shelf-active {
    --room-ground: #FCFAF2;
    background: #FCFAF2;
    transition: none;       /* the paper lands at once: the app's 0.6 s fade drew the day's paper under the course page as it handed over */
}
/* the app's 2vh under the page ended the wall 18 px short of the glass's foot (GROUND.md §7.1) */
body.course-shelf-active:not(.home-hall) { padding-bottom: 0; }
body.course-shelf-active::after { opacity: 0; }
/* the portraits' lift (js/course-shelf.js ensureDefs): a filter's holder takes no room in the body's column */
.cs-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── the chrome on the course path: the word filter chips under the beam and the app's language swap step off (the
   test face's language is a setting there: the owner's item 1, 19 October 2026), and so does the name board beside the
   logo (item 4); the beam's 隠す Hide stands, the wall-wide turn of the app's own cards; the course's facets replace the
   app's groups in the panel ── */
body.course-shelf-active.cs-kanji-view .tool-group-hide,
body.course-shelf-active #langToggleBtn,
body.course-shelf-active #journeyScopePill,
body.course-shelf-active #filterPillRow,
body.course-shelf-active #sidebarClearAll { display: none !important; }
/* (the filter panel's scroller alone: the settings rail keeps a .sidebar-scroll too, and an unscoped rule had emptied it
   on the course path) */
body.course-shelf-active #browseSidebar .sidebar-scroll > :not(.cs-sb) { display: none !important; }
.cs-sb { display: none; }
body.course-shelf-active .cs-sb { display: block; }
/* kanji + English on the beam's own presses while the course stands (js/course-shelf.js onPath lays the kanji) */
.cs-jp-chip { display: none; }
body.course-shelf-active .cs-jp-chip {
    display: inline;
    font-family: var(--cs-font-jp);
    margin-right: 0.35em;
    letter-spacing: 0.02em;
}
body.course-shelf-active #filterAddBtn .cs-plus { display: none; }

/* ── the wall (the owner's item 7, 19 October 2026): three columns at 1280, four from 1400, the kanji wall the same grid;
   the hanging spacing kept (rows breathe more than neighbours). A word's card is the app's (a painting over a placard),
   its painting the course's square portrait, so the card stands a step taller than the app's 3:2 ── */
/* ⭐ (the landing's step 3, BUILD_SPEC.md §3) in the course's 1200 column, the beam's own (css/course-landing.css .ld-beam-in),
   so KOTOBA, the head row and the first portrait stand on one left edge; the paintings hang unmounted (--wall-pad 0: the
   pad was the mount's shadow room), the gutters the mock's (2.2 u between rows, 2 u between neighbours).
   ⭐ THE SHELF FINISH: four columns at every width from 1400 px, never five (the fifth made the widest glass the narrowest
   card: 209.6 px at 1728 and 2000, its English cut); the placard the word's line (its kana seat), TWO lines of English held
   for every card, and the marks' row: 139 px plus the kana seat. The longest English (付く, 63 characters) needs 233 px for
   two lines; the narrowest card at 1280, 1440, 1728 and 2000 px gives it 264.
   ⭐ (the review round) A CARD IS NEVER NARROWER THAN ITS SEAT: 250 px, the two marks whole side by side (まだ Still
   learning needs 116.5 px of its half) and so the English's two lines too. Three columns under 1400 px and four from it,
   as before, while each card keeps 250 px; on a narrower glass (a window under about 895 px, or a side panel open under
   about 1115) the wall steps down to two columns, and to one where two would not hold (a panel open under about 810), so
   the card is never cut, its English never takes a third line and its standing never leaves its word. The widths of the
   finish (1280 to 2000 px, panels shut or open) keep their columns exactly */
body.course-shelf-active .grid-cards:not(.masonry-layout) {
    --cs-gap-col: calc(2 * var(--cs-u));
    --cs-card-min: 250px;
    grid-template-columns: repeat(auto-fill, minmax(max(var(--cs-card-min), calc((100% - 2 * var(--cs-gap-col)) / 3 - 0.5px)), 1fr));
    gap: calc(2.2 * var(--cs-u)) var(--cs-gap-col);
    width: 100%;
    max-width: var(--cs-col);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding: calc(1.8 * var(--cs-u)) 0 48px;
    --wall-pad: 0px;
    --painting-h: calc(var(--wall-col, 300px) - var(--wall-pad) * 2);
    --placard-h: calc(139px + var(--ruby-seat));
}
@media (min-width: 1400px) {
    body.course-shelf-active .grid-cards:not(.masonry-layout) { grid-template-columns: repeat(auto-fill, minmax(max(var(--cs-card-min), calc((100% - 3 * var(--cs-gap-col)) / 4 - 0.5px)), 1fr)); }
}
/* a panel open beside the wall (the filters, the settings) takes a column back, so a card keeps room for its marks */
@media (min-width: 1400px) {
    body.course-shelf-active.browse-sidebar-open .grid-cards:not(.masonry-layout),
    body.course-shelf-active.settings-sidebar-open .grid-cards:not(.masonry-layout) { grid-template-columns: repeat(auto-fill, minmax(max(var(--cs-card-min), calc((100% - 2 * var(--cs-gap-col)) / 3 - 0.5px)), 1fr)); }
}
/* ⭐ MY WORDS ON THE BEAM'S COLUMN (the deep review of 11 November 2026, call 12, VO-04 as checked; a choice the owner has not
   made, its own commit): the beam over the shelf stands on the landing room's breathing column (css/course-landing.css
   .ch-room.ld-room --ch-col, 1200/18 of a unit capped at 22: 1433 px at 2000, 1240 at 1536, 1133 at 1280), while the wall
   and its head row stood on the fixed 1200 the elevation's step 4 left behind, so at 2000 px the room stepped 117 px in under
   its own KOTOBA and its last pill. The two that read the column take the beam's: KOTOBA, the head row and the first card on
   one left edge again, as B11 meant (css/course-home.css). Four across from 1400 px as before (a card 330 px at 2000 instead
   of 271), the type on the card unchanged. Said by the shelf's class, never `body`: the token's default stays where it is */
.course-shelf-active .cs-head-host,
.course-shelf-active .grid-cards:not(.masonry-layout) { --cs-col: calc(1200 / 18 * clamp(16px, 9px + 0.625vw, 22px)); }
/* (the choice's own half, the deep review's mend of 12 November 2026) while a side panel stands beside the wall (絞る Filter,
   the settings), the wall and its head row keep the column they had before: the beam's column beside the filter panel ran
   them 130 px past the bar's right edge at 2000 px (409..1843 under a bar ending at 1713), and beside the settings 90 px past
   its left */
.course-shelf-active.browse-sidebar-open .cs-head-host,
.course-shelf-active.browse-sidebar-open .grid-cards:not(.masonry-layout),
.course-shelf-active.settings-sidebar-open .cs-head-host,
.course-shelf-active.settings-sidebar-open .grid-cards:not(.masonry-layout) { --cs-col: var(--course-col, 1200px); }

/* ── ⭐ THE HEAD ROW (BUILD_SPEC.md §3, the landing's step 3, 31 October 2026; the mock of record
   mocks/opus/flashcards.html): js/course-shelf.js draws it in its own seat above the wall and the walk (#csHead, the first
   child of the gallery's scroller), so it scrolls with the wall and 見る Browse stands over a walk too. The wall's two views
   at its left, its tools at its right; the counts are the beam's pill's. Chrome in kanji + English; hover and focus change
   ink only.
   ⭐ THE SHELF FINISH (1 November 2026): QUIET CHROME. One weight (400) and one quiet ink for the Japanese and the English
   alike, each Japanese label 0.92 em of its English (a kanji fills its em, a Latin letter does not); the views a step larger
   than the tools. The place you stand is marked once: ink and a 1 px sumi rule landed on the row's own hairline (the view on
   the wall, 練習 Practice in the walk). Indigo answers the hand only. The tools in a calmer order, the markup's too (Tab
   follows the eye): what the wall shows (絞る Filter · 隠す Hide), then how you use it (見る Browse · 練習 Practice). The way
   back to the course and the settings rail's ⋮ stand in the beam (the owner, 1 November 2026: "close and back to course
   is a duplication, setting dots should be moved to top"; css/course-landing.css) ── */
.cs-head-host { display: none; }
/* ⭐ THE SHELF TOP (6 November 2026, direction A, "the ledge"): the row STAYS. Sticky at the top of the wall's scroller, on the
   page's paper, its hairline its foot, over the wall and over the walk alike (見る Browse is the way back there), so a learner can
   switch wall, filter, hide or practise from anywhere on the shelf; its air above the words (14 px) is its own padding, since the
   paper must cover the cards passing beneath. z 6 inside the scroller's own stacking context: above the cards, under the beam */
body.course-shelf-active .cs-head-host {
    display: block;
    flex: none;
    position: sticky;
    top: 0;
    z-index: 6;
    width: 100%;
    max-width: var(--cs-col);
    margin: 0 auto;
    padding-top: 14px;
    box-sizing: border-box;
    background: var(--cs-paper);
}
/* ⭐ (the review round) where the row cannot hold its views and its tools on one line (a side panel open on a glass under
   about 850 px), it wraps in two clean tiers, never a staircase: the views keep the bottom tier and their rule on the
   hairline (wrap-reverse: the first line is the lowest; flex-start is its foot), the tools stand whole above them at the
   right. On one line nothing differs from the single row */
.cs-head {
    display: flex;
    flex-wrap: wrap-reverse;
    align-items: flex-start;
    gap: 6px calc(1.6 * var(--cs-u));
    padding-bottom: 0;
    border-bottom: 1px solid var(--cs-hair);
    font-family: var(--cs-font-ui);
    font-size: var(--cs-e3);
    color: var(--cs-quiet);
}
.cs-tools {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 0 calc(1.2 * var(--cs-u));
    margin-left: auto;
    min-width: 0;
}
/* a tool: the mock's .nx-tool, a text press standing on the row's hairline (its own 1 px rule lands on it, so the place's
   rule can sit under any press); the app's `button:hover` drop shadow and its 12 px radius reset: they outranked a text
   door on 20 October 2026, the owner's screenshot */
.cs-head .cs-tool {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4em;
    padding: 2px 0 calc(0.8 * var(--cs-u));
    margin-bottom: -1px;
    font: inherit;
    font-weight: 400;
    line-height: 1.35;
    color: var(--cs-quiet);
    background: none;
    border: 0;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: color var(--cs-t), border-color var(--cs-t);
}
/* ⭐ (the review round) a press's words in one label (js/course-shelf.js toolHTML, viewsHTML): the box the keyboard's ring
   and the walk's Escape cue are drawn round, so neither takes in the press's padded seat (0.8 u of air down to the row's
   hairline) nor 隠す Hide's 6 em one */
.cs-head .cs-label { display: inline-flex; align-items: baseline; gap: 0.4em; border-radius: 3px; }
/* the duet's Japanese: the same ink and weight as its English, a hair smaller */
.cs-head .cs-view [lang="ja"],
.cs-head .cs-tool [lang="ja"] {
    font-family: var(--cs-chrome-jp);
    font-weight: 400;
    font-size: 0.92em;
    letter-spacing: 0.02em;
    color: inherit;
}
/* the standing mode is not the place on the wall (the view's rule says where you stand), so 見る Browse keeps the row's
   ink; in the walk 練習 Practice is the place: ink and the rule. Two facets on: 絞る Filter in ink */
.cs-head .cs-tool[aria-current="true"] { color: var(--cs-quiet); text-decoration: none; }
body.keiko-walk-active .cs-head .cs-tool[data-cs-tool="practice"][aria-current="true"] { color: var(--cs-ink); border-bottom-color: var(--cs-jp); }
.cs-head .cs-tool[data-on] { color: var(--cs-ink); }
/* under the hand (and the keyboard): indigo ink, nothing moves */
.cs-head .cs-tool:hover,
.cs-head .cs-tool:active { color: var(--cs-accent); background: none; box-shadow: none; transform: none; }
/* the keyboard: ONE ring for the whole row, round the label (the views' and the tools' alike: base.css's halo stays off
   them, so no press wears two dresses), 4 px out from its words, clear of the hairline */
.cs-head .cs-tool:focus-visible,
.cs-head .cs-view:focus-visible { outline: none; box-shadow: none; }
.cs-head .cs-tool:focus-visible .cs-label,
.cs-head .cs-view:focus-visible .cs-label { outline: 1.5px solid var(--cs-accent); outline-offset: 4px; }
/* a panel the press opened stands open (絞る Filter): its press in ink */
.cs-head .cs-tool[aria-expanded="true"] { color: var(--cs-ink); }
/* ── ⭐ THE FILTERS IN FORCE (step 2 of the shelf top, round 2 §3, the owner's A of 6 November 2026): each facet on is a chip
   in the ledge's middle, after the views, in the row's own space. A filter you chose is a setting in force, and the shelf
   finish's material for that is a wash of the page's own paper (the thing held pressed in): the facet's kanji light, the value
   in ink, a × at its end; the whole chip is the press that puts the filter down. No colour: a filter is not a step forward.
   消す Clear follows them after two or more. 絞る Filter no longer counts beside itself (".cs-tool-n", "· 2 on", left): the
   chips say it; the press stands in ink while anything is on ([data-on]). The chips stand on the words' line: their seat
   ends where the words' padding does, so they sit level with the row's words ── */
.cs-head .cs-chips {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    min-width: 0;
    margin: 0 0 calc(0.8 * var(--cs-u) - 3px) calc(0.4 * var(--cs-u));
}
.cs-head .cs-chips[hidden] { display: none; }   /* (the walk: the chips leave with the filter; the [hidden] law, tests/css/hidden_reset_test.js) */
.cs-head .cs-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 3px 7px 4px 9px;
    margin: 0;
    border: 0;
    border-radius: 4px;
    background: var(--cs-wash);
    color: var(--cs-ink);
    font: inherit;
    line-height: 1.35;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    transition: background-color var(--cs-t), color var(--cs-t);
}
.cs-head .cs-chip:hover,
.cs-head .cs-chip:active { background: var(--cs-wash-hi); color: var(--cs-ink); box-shadow: none; transform: none; }
.cs-head .cs-chip:hover .cs-chip-x { color: var(--cs-accent); }
.cs-head .cs-chip:focus-visible { outline: 1.5px solid var(--cs-accent); outline-offset: 2px; box-shadow: none; }
.cs-head .cs-chip-jp { font-family: var(--cs-chrome-jp); font-size: 0.92em; letter-spacing: 0.02em; color: var(--cs-quiet); }
.cs-head .cs-chip-x { font-size: 1.05em; line-height: 1; color: var(--cs-quiet); transition: color var(--cs-t); }
/* a 状 Status chip: the app's own state dot in the kanji's seat (css/browse-sidebar.css .status-row-dot's inks, by token) */
.cs-head .cs-chip--dot { align-items: center; }
.cs-head .cs-chip-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--color-stone, #8C8578); }
.cs-head .cs-chip-dot[data-status="learning"] { background: var(--sb-state-learning, var(--color-amber, #A07850)); }
.cs-head .cs-chip-dot[data-status="coming"] { background: var(--sb-state-coming, var(--color-moss-bright, #5B8C5A)); }
.cs-head .cs-chip-dot[data-status="resting"] { background: var(--sb-state-resting, var(--color-moss, #6B7F5C)); }
.cs-head .cs-chips-clear {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4em;
    margin: 0 0 0 2px;
    padding: 3px 0 4px;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--cs-quiet);
    font: inherit;
    line-height: 1.35;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    transition: color var(--cs-t);
}
.cs-head .cs-chips-clear [lang="ja"] { font-family: var(--cs-chrome-jp); font-size: 0.92em; letter-spacing: 0.02em; }
.cs-head .cs-chips-clear:hover,
.cs-head .cs-chips-clear:active { color: var(--cs-accent); background: none; box-shadow: none; transform: none; }
.cs-head .cs-chips-clear:focus-visible { outline: 1.5px solid var(--cs-accent); outline-offset: 4px; box-shadow: none; }
/* where the row cannot hold the chips beside its words (a panel open on a glass under about 1540 px) the chips take a line of
   their own under the words, inside the ledge, above its hairline; the words keep one tier */
@media (max-width: 1540px) {
    body.browse-sidebar-open .cs-head-host .cs-head:has(.cs-chips) { flex-wrap: wrap; }
    body.browse-sidebar-open .cs-head-host .cs-head .cs-chips { order: 3; flex-basis: 100%; margin: 0 0 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .cs-head .cs-chip, .cs-head .cs-chip-x, .cs-head .cs-chips-clear { transition: none; }
}
/* the walk stands under the head row: its floor rises by the row's height, so a walk fits the glass without a scroll
   (css/study-walk.css #keikoWalk keeps 100vh − 210 px under the app's one-row beam) */
body.course-shelf-active #keikoWalk { min-height: calc(100vh - 240px); }
/* ⭐ (the shelf finish) 練習 Practice's first screen under the row: its count in the row's voice, the words quiet and the
   number in ink at the row's weight, never bold black; the walk's own 始める Begin and its ground line stay the walk's.
   (Since call 12 of the deep review, 12 November 2026, the course's sitting prints no count at all, js/study-walk.js
   renderThreshold: these two dress nothing on the course and are kept for the record) */
body.course-shelf-active #keikoWalk .kw-th-shape { color: var(--cs-quiet); }
body.course-shelf-active #keikoWalk .kw-th-shape b { color: var(--cs-ink); font-weight: 500; }
/* ⭐ 始める BEGIN IN THE ONE VERMILION (the deep review of 11 November 2026, call 12, VO-02 as checked; the owner's yes of 12
   November): 練習 Practice opens on the course's own step forward, the landing's 始める Begin by value (css/course-landing.css
   .ch-room.ld-room .ld-begin: 朱 #B63D1B with paper type cut into it, the deeper #993317 under the hand, the press and the
   keyboard, a seal's 4 px corner, the keyboard's 2 px indigo ring at 2 px), in the shelf's own unit; never the app's indigo
   pill with its shadow and its brightening (css/study-walk.css .kw-begin, the hall's, as it was). Under the hand colour
   alone: no transform, no filter, no shadow. The hex as the landing writes it (the lesson's --cl-shu lives on #kotobaLesson
   alone, which the shelf cannot read). Said by the shelf's class, never `body`: these rules dress no lesson page */
.course-shelf-active #keikoWalk .kw-threshold .kw-begin {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.55rem;
    min-width: calc(6.2 * var(--cs-u) + 3rem);
    padding: 0.6rem 1.1rem;
    border: 1px solid #B63D1B;
    border-radius: 4px;
    background: #B63D1B;
    color: #FFFFFB;
    box-shadow: none;
    filter: none;
    transform: none;
    font: 400 var(--cs-e3)/1.45 var(--cs-font-ui);
    letter-spacing: 0.03em;
    white-space: nowrap;
    transition: background-color var(--cs-t), border-color var(--cs-t);
}
.course-shelf-active #keikoWalk .kw-threshold .kw-begin .jp {
    margin: 0;
    font-family: var(--cs-chrome-jp);
    font-size: calc(1.125 * var(--cs-u));
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: 0;
    color: inherit;
}
.course-shelf-active #keikoWalk .kw-threshold .kw-begin:hover,
.course-shelf-active #keikoWalk .kw-threshold .kw-begin:active,
.course-shelf-active #keikoWalk .kw-threshold .kw-begin:focus-visible { background: #993317; border-color: #993317; color: #FFFFFB; box-shadow: none; }
.course-shelf-active #keikoWalk .kw-threshold .kw-begin:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 2px; }
/* the intro is the press alone, so the walk's floor line (css/study-walk.css .kw-ground) waits for the first card: hidden, its
   seat kept, so nothing below it moves when the card arrives */
.course-shelf-active #keikoWalk:has(.kw-threshold) .kw-ground { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
    .course-shelf-active #keikoWalk .kw-threshold .kw-begin { transition: none; }
}
/* the walk's first Escape points at the way back (js/study-walk.js escChipEl; css/study-walk.css's own cue, by value):
   ⭐ (the review round) round its label, as the ring is, never the padded seat the hairline crosses */
.cs-head .cs-tool.kw-esc-armed { color: var(--cs-accent); background: none; box-shadow: none; }
.cs-head .cs-tool.kw-esc-armed .cs-label {
    background: color-mix(in srgb, var(--cs-accent) 12%, transparent);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--cs-accent) 12%, transparent);
}
/* 見る Browse · 練習 Practice, told from 絞る Filter · 隠す Hide by air alone (the two hairlines that fenced them left) */
.cs-modes { display: inline-flex; align-items: flex-end; gap: calc(1.2 * var(--cs-u)); margin-left: calc(0.8 * var(--cs-u)); }
/* a tool that does not apply leaves the row (the walk: no views, no filter, no hide; the kanji wall: no hide), out of the
   tab order with it: the row is right-aligned and those tools stand at its left end, so nothing slides under the pointer
   that pressed 練習 Practice or 漢字 Kanji, and no hole is left between the others */
.cs-head [data-cs-off][hidden] { display: none; }
/* ⭐ (the review round) the views leave the walk's row the same way, out of sight and out of the tab order, but keep their
   line's height in a seat of no width: they are the row's tallest words (0.9 u to the tools' 0.8125), so with them gone
   the row was 1.2 px lower and 見る Browse, 練習 Practice and the hairline rose under the pointer that pressed Practice */
.cs-head .cs-views[data-cs-off][hidden] { display: inline-flex; visibility: hidden; width: 0; overflow: hidden; white-space: nowrap; }
/* (VO-06 c, the deep review of 11 November 2026; the lead's mend 5 of 12 November) 隠す Hide stands at the row's left end
   (js/course-shelf.js headHTML), so on the kanji wall it leaves seatless like any absent tool and 絞る Filter stays put */
/* 隠す Hide and 見せる Show share one seat, the wider label's, so the row never reflows when the label turns */
.cs-head .cs-tool[data-cs-tool="hide"] { min-width: 6em; justify-content: flex-end; }
/* ⭐ (mend 5b, 12 November 2026) the row reads as two groups: 隠す Hide (its label at its seat's inner end, the seat's spare
   air outside the pair) close to 絞る Filter, then the wide gap before 見る Browse · 練習 Practice, 3.25 u in all, the ink gap
   the seat's air made there before Hide moved left; only where Filter stands (the walk's row keeps the modes' 0.8 u) */
.cs-head .cs-tool[data-cs-tool="filter"]:not([hidden]) + .cs-modes { margin-left: calc(2.05 * var(--cs-u)); }

/* ── the head's two views (step 6): 言葉 Words and 漢字 Kanji, the mock's wall tabs, a step larger than the tools; the one
   standing in ink with the sumi rule on the hairline ── */
.cs-views {
    flex: none;
    display: inline-flex;
    align-items: flex-end;
    gap: calc(1.2 * var(--cs-u));
}
.cs-view {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4em;
    padding: 2px 0 calc(0.8 * var(--cs-u));
    margin-bottom: -1px;
    font: inherit;
    font-size: calc(0.9 * var(--cs-u));
    font-weight: 400;
    line-height: 1.35;
    color: var(--cs-quiet);
    background: none;
    border: 0;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    transition: color var(--cs-t), border-color var(--cs-t);
}
.cs-head .cs-view.is-on { color: var(--cs-ink); border-bottom-color: var(--cs-jp); }
/* ⚖ 20 October 2026: the app's `button:hover` (0,1,1) laid its drop shadow under the two views too; under the pointer and
   the press a view keeps its ink and its rule alone (indigo for the hand, the standing one stays ink) */
.cs-head .cs-view:hover,
.cs-head .cs-view:active { color: var(--cs-accent); background: none; box-shadow: none; transform: none; }
.cs-head .cs-view.is-on:hover { color: var(--cs-ink); }
/* ⭐ (the owner, 5 November 2026: "nav panel should show number of words and kanjis") a view's number after its English, how
   many cards its 練習 Practice deals from (js/course-shelf.js tabCountOf): the row's quiet ink at its one weight, figures of
   one width, the same on the view that stands (the place is said by the label's ink and the rule, never by the number) and
   under the hand (ink changes, nothing moves), as 絞る Filter's own count (.cs-tool-n) */
.cs-head .cs-view-n { font-weight: 400; color: var(--cs-quiet); font-variant-numeric: tabular-nums; }
/* ⭐ (step 2 of the shelf top) with a filter on, the standing view's number counts what the wall shows, in ink; the total
   returns in the quiet ink when the last chip is put down */
.cs-head .cs-view-n.is-narrowed { color: var(--cs-ink); }
@media (prefers-reduced-motion: reduce) {
    .cs-head .cs-tool, .cs-view { transition: none; }
}

/* ── a kanji's tile (the kanji wall, step 6): one face on its paper card; a press opens the kanji teacher's card ── */
.grid-cards .grid-card--course {
    height: auto;
    contain-intrinsic-size: auto 340px;
    display: block;
    overflow: visible;
    background: var(--color-card, #FAFAF7);
    border-radius: 8px;
    --cs-seat: 0 0 0 1px rgba(44, 44, 44, 0.05), 0 2px 8px -4px rgba(44, 44, 44, 0.06);
    box-shadow: var(--cs-seat);
    perspective: none;
    transform-style: flat;
    transition: box-shadow 0.2s ease;
}
/* the hover deepens the seat and never moves the card (the hover law: tests/css/hover_stability_test.js) */
.grid-cards .grid-card--course:hover {
    --cs-seat: 0 0 0 1px rgba(44, 44, 44, 0.06), 0 6px 16px -8px rgba(44, 44, 44, 0.06);
}
.grid-cards .grid-card--course:focus-visible {
    outline: 2px solid var(--cs-accent);
    outline-offset: 2px;
    box-shadow: var(--cs-seat);
}
.cs-inner { display: flex; flex-direction: column; min-width: 0; }
.cs-art {
    display: block;
    aspect-ratio: 1 / 1;
    margin: 10px 10px 0;
    border-radius: 4px;
    overflow: hidden;
    background: var(--cs-sheet);
}
.cs-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cs-art--empty { background: var(--cs-paper); }
.cs-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 12px 14px;
    text-align: center;
}
@media (prefers-reduced-motion: reduce) {
    .grid-cards .grid-card--course { transition: none; }
}

/* ── 単語帳 a word's card (the owner's items 1 and 2, 19 October 2026): the app's own card (js/grid-mode.js
   createCourseCardHTML), its painting the course's square portrait on the paper it was painted on; the placard the
   app's (the word with its kana as ruby, the meaning, the line and the two marks on the hover); no romaji seat ── */
.grid-cards .grid-card--cw .grid-card-back-image { aspect-ratio: 1 / 1; }
.grid-cards .grid-card--cw .grid-card-back-image img { object-fit: contain; }
.grid-cards .grid-card--cw .grid-card-back-image--bare { flex: 0 0 auto; }
/* ── ⭐ THE PORTRAITS AS INK (BUILD_SPEC.md §3: "the portraits as ink (no ring, no shadow)", the landing's step 3): the
   painting hangs on the course's paper unmounted, its washi lifted and multiplied away and its edge feathered, the
   landing's portrait dress (css/course-landing.css .ld-seat; the lift is js/course-shelf.js ensureDefs's #cs-washi-lift, the
   landing's #ld-washi-lift by value). The print's box keeps its isolation and lays the page's own paper under the painting
   (the 3-D card isolates every blend from the page beneath, so the paper the multiply meets is laid here, the same tone).
   Under the hand nothing moves: the app's breathing print (scale 1.035) stands still on the course (ink, never geometry). ── */
body.course-shelf-active .grid-cards .grid-card--cw .grid-card-back-image {
    background: var(--cs-paper) !important;   /* the card's inline tone (cardWordOf img_tone) gives way to the page's paper */
    box-shadow: none;
    border-radius: 0;
}
body.course-shelf-active .grid-cards .grid-card--cw .grid-card-back-image img,
body.course-shelf-active .cs-art img {
    filter: url(#cs-washi-lift);
    mix-blend-mode: multiply;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent),
                        linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent),
                linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
    mask-composite: intersect;
    transform: none;
    transition: none;
}
body.course-shelf-active .grid-cards .grid-card--cw:hover .grid-card-back-image img { transform: none; }
/* the placard in the course's type: the word in its hand with the kana over it (the app's Klee seat), the meaning in the
   teacher's serif, quiet until the hand is on the card */
body.course-shelf-active .grid-cards .grid-card--cw .grid-card-english-large {
    font-family: var(--cs-font-tell);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--cs-quiet);
    transition: color var(--cs-t);
}
body.course-shelf-active .grid-cards .grid-card--cw .grid-card-back-japanese { color: var(--cs-jp); }
body.course-shelf-active .grid-cards .grid-card--cw:hover .grid-card-english-large,
body.course-shelf-active .grid-cards .grid-card--cw:focus-visible .grid-card-english-large { color: var(--cs-accent); }
/* (the kintsugi hairline under the word of a card that slipped once and held, cs-gold, left the shelf card on 20 October
   2026: the owner read it as "an orange underline" on a waiting card and asked for it to go. ⚖ 20 October 2026, the
   owner's "drop it": the gold leaves every course surface, the card's class and the book's lists alike) */
/* ⭐ (the shelf finish) the reading over the word and the optional お: opaque quiet ink, AA on the paper (they were the
   app's 55 % reading, 2.82:1) */
body.course-shelf-active .grid-cards .grid-card--cw ruby rt { opacity: 1; color: var(--cs-quiet); }
body.course-shelf-active .grid-cards .grid-card--cw .opt-mark { opacity: 1; color: var(--cs-quiet); }
/* ⭐ (the shelf finish) THE ENGLISH IS WHOLE: the lesson's English as it is written, wrapped at word boundaries and
   balanced in a two-line seat every card keeps (the placard's --placard-h above), never clipped, faded or scrolled. The
   app's one-line seat cut it by the box with a right fade, and under the hand showed it a line at a time (js/grid-mode.js
   setupUnfurlScroll, which a course card no longer wakes); wrapped text never overflows sideways, so nothing moves */
body.course-shelf-active .grid-cards .grid-card--cw .grid-card-back-content {
    flex: 0 0 auto;
    min-height: 0;
    align-items: flex-start;
    padding: 3px 4px 0;
    overflow: visible;
}
body.course-shelf-active .grid-cards .grid-card--cw .grid-card-english-large {
    flex: 1 1 auto;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 21px;
}
body.course-shelf-active .grid-cards .grid-card--cw .unfurl-wrap,
body.course-shelf-active .grid-cards .grid-card--cw .unfurl-wrap.unfurling,
body.course-shelf-active .grid-cards .grid-card--cw .unfurl-wrap.gloss-fading {
    -webkit-mask-image: none;
    mask-image: none;
    overflow: visible;
    max-height: none;
}
body.course-shelf-active .grid-cards .grid-card--cw .unfurl-text {
    display: block;
    white-space: normal;
    text-wrap: balance;
    word-break: keep-all;     /* a Japanese word inside the English (お薬, 疲れた) never breaks across the two lines */
    transform: none !important;
    opacity: 1 !important;
}
/* ⭐ (the shelf finish) the standing (since 5 November 2026 the app's words: Learning, Coming back, Resting) on the word's line at the right, where the
   app's own card seats its meta, out of the English's line (its hidden seat took a third of it): sentence case, 12 px, the
   quiet ink and a 5 px dot; inked in only under the hand or the keyboard (the app's wake, css/grid-mode.css).
   ⭐ (the review round) Seated IN the word's line (js/grid-mode.js createCourseCardHTML writes it into the card's header,
   the word's own box), 1 px over the line's foot, so it rides with its word wherever the word stands: it was pinned to
   the painting's nominal height, and where a painting gave way to a third line of English the word rose and the standing
   stayed, over the English */
body.course-shelf-active .grid-cards .grid-card--cw .grid-card-back-header { position: relative; }
body.course-shelf-active .grid-cards .grid-card--cw .grid-card-statusline {
    position: absolute;
    right: 4px;
    bottom: 1px;
    margin: 0;
    gap: 6px;
    font-family: var(--cs-font-ui);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--cs-quiet);
}
body.course-shelf-active .grid-cards .grid-card--cw .grid-card-statusline .state-dot { width: 5px; height: 5px; }
/* the test face: the bare word, the course's ink on the app's paper card */
.grid-cards .grid-card--cw .grid-card-japanese { color: var(--cs-jp); }
/* ⭐ (the shelf finish) THE TWO MARKS, まだ Still learning · 覚えた Known, in the app's own dress (css/grid-mode.css: a hairline on the bare paper,
   amber or moss under the hand, the press its receipt; the owner, 2 November 2026: "restore original one ... same sleek buttons that becomes orange
   or green on hover"). Written here is only what the shelf must keep: two equal seats, Japanese first, no dot, the words WHOLE in sentence case
   (capitals are what cut them, "STILL LEA…": 86 px where sentence case needs 72). The words sit centred, so the side air is what they need at their
   narrowest: 104.47 px at the app's weight 600 (26.53 + 6 + 71.94), in the 116.5 px seat under the card's 250 px (106.5 inside its hairline at 4 px a
   side). The hairline stands at rest, so the hand changes ink, never geometry. Height 30 px: the seat the card's placard counts. */
body.course-shelf-active .grid-cards .grid-card--cw .grid-card-meta-row { margin: 0; padding: 7px 4px 10px; }
body.course-shelf-active .grid-cards .grid-card--cw .grid-card-back-actions { gap: 8px; }
body.course-shelf-active .grid-cards .grid-card--cw .grid-card-status-btn,
body.course-shelf-active .grid-cards .grid-card--cw .grid-card-status-btn.active {
    --text-secondary: var(--cs-past);
    flex: 1 1 0;
    min-width: 0;
    height: 30px;
    padding: 0 4px;
    gap: 6px;
    font-family: var(--cs-font-ui);
    letter-spacing: 0;
    text-transform: none;
    transition: color var(--cs-t), border-color var(--cs-t), background-color var(--cs-t);
}
.grid-cards .grid-card--cw .grid-card-status-btn .jp { flex: none; }
.grid-cards .grid-card--cw .grid-card-status-btn .status-dot { display: none; }
body.course-shelf-active .grid-cards .grid-card--cw .grid-card-status-btn .jp { font-family: var(--cs-font-jp); font-size: 13px; letter-spacing: 0.02em; color: inherit; }
body.course-shelf-active .grid-cards .grid-card--cw .grid-card-status-btn .cap {
    font-size: 12px; letter-spacing: 0; text-transform: none; min-width: 0; overflow: visible; text-overflow: clip; color: inherit;
}
/* the app's border and wash stand; its small ink, on its own wash on this paper, reads under AA, so the walk's own deeper inks (--cs-mark-amber, --cs-mark-moss) */
body.course-shelf-active .grid-cards .grid-card--cw .grid-card-status-btn.learning:hover,
body.course-shelf-active .grid-cards .grid-card--cw .grid-card-status-btn.learning:focus-visible,
body.course-shelf-active .grid-cards .grid-card--cw .grid-card-status-btn.learning.active { color: var(--cs-mark-amber); }
body.course-shelf-active .grid-cards .grid-card--cw .grid-card-status-btn.known:hover,
body.course-shelf-active .grid-cards .grid-card--cw .grid-card-status-btn.known:focus-visible,
body.course-shelf-active .grid-cards .grid-card--cw .grid-card-status-btn.known.active { color: var(--cs-mark-moss); }
body.course-shelf-active .grid-cards .grid-card--cw .grid-card-status-btn:focus-visible { outline: 1.5px solid var(--cs-accent); outline-offset: 2px; }
/* 裏 Flip: this one card to its test face, a quiet disc in the seat the app's room door keeps (left of the speaker),
   present only while the hand is near, as the speaker is; ⭐ (the shelf finish) the two discs cut from the rooms' slip */
.grid-card--cw .cs-turn {
    position: absolute;
    top: 12px;
    right: 52px;
    z-index: 5;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: color-mix(in srgb, var(--cs-slip) 94%, transparent);
    box-shadow: var(--cs-slip-rest);
    color: var(--cs-past);
    font-family: var(--cs-font-jp);
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    display: grid;
    place-items: center;
    padding: 0;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.92);
    transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.grid-card--cw:not(:has(.grid-card-back-audio)) .cs-turn { right: 12px; }
.grid-card--cw:hover .cs-turn,
.grid-card--cw:focus-within .cs-turn {
    opacity: 0.9;
    pointer-events: auto;
    transform: scale(1);
    transition-delay: var(--wake-3);
}
.grid-card--cw .cs-turn:hover { opacity: 1; background: var(--cs-slip); box-shadow: var(--cs-slip-hi); color: var(--cs-accent); transition-delay: 0s; }
.grid-card--cw .cs-turn:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 2px; opacity: 1; }
/* the disc leaves the tab order whenever its face is turned away (the app's own gate for every control of a face) */
.grid-cards.cards-flipped .grid-card--cw.flipped .cs-turn,
.grid-cards:not(.cards-flipped) .grid-card--cw:not(.flipped) .cs-turn { visibility: hidden; }
body.course-shelf-active .grid-card--cw .grid-card-back-audio {
    background: color-mix(in srgb, var(--cs-slip) 94%, transparent);
    box-shadow: var(--cs-slip-rest);
    color: var(--cs-past);
}
body.course-shelf-active .grid-card--cw .grid-card-back-audio svg { color: var(--cs-past); }
body.course-shelf-active .grid-card--cw .grid-card-back-audio:hover { background: var(--cs-slip); box-shadow: var(--cs-slip-hi); color: var(--cs-accent); }
body.course-shelf-active .grid-card--cw .grid-card-back-audio:hover svg { color: var(--cs-accent); }
/* ⭐ (the shelf finish; the ONE RING's one exception, B14) THE KEYBOARD'S PLACE on a course card: the card sits in a held
   wash, the page's own paper toned (no ring: the card has no edge of its own, and a line drawn round it became its first
   edge, the owner's blue box), the painting's paper the same tone so the seat is one piece; with the hover's reveals (the
   English in indigo, 裏 and the sound, the standing, the marks) it reads at a glance. The course's two cards alone: every
   control on them, and every card of the app's wall, keeps the ring (css/grid-mode.css ONE RING). On the seat's tone the
   quiet ink would fall under AA, so the reading, the optional お and the standing step up to the stone ink. In forced
   colours a 2 px CanvasText outline stands in */
body.course-shelf-active .grid-cards .grid-card.grid-card--cw:not(.rel-highlight):focus-visible,
body.course-shelf-active .grid-cards .grid-card.grid-card--course:not(.rel-highlight):focus-visible {
    outline: none;
    background: var(--cs-wash-focus);
    border-radius: 12px;
    box-shadow: 0 0 0 10px var(--cs-wash-focus);
}
body.course-shelf-active .grid-cards .grid-card--cw:focus-visible .grid-card-back-image,
body.course-shelf-active .grid-cards .grid-card--course:focus-visible .cs-art {
    background: color-mix(in srgb, var(--cs-ink) 6.5%, var(--cs-paper)) !important;
}
body.course-shelf-active .grid-cards .grid-card--cw:focus-visible ruby rt,
body.course-shelf-active .grid-cards .grid-card--cw:focus-visible .opt-mark,
body.course-shelf-active .grid-cards .grid-card--cw:focus-visible .grid-card-statusline { color: var(--cs-past); }
@media (forced-colors: active) {
    body.course-shelf-active .grid-cards .grid-card.grid-card--cw:not(.rel-highlight):focus-visible,
    body.course-shelf-active .grid-cards .grid-card.grid-card--course:not(.rel-highlight):focus-visible { outline: 2px solid CanvasText; outline-offset: 6px; }
}
/* ⭐ (the shelf finish) THE TURNED CARD (裏, and every card under 隠す Hide): the same material as the wall, the word in ink on
   the page's own paper (no white slip, no shadow, no grain); under the hand the card's extent shows as a wash of the
   paper, the sign of a press (ink, never geometry) */
body.course-shelf-active .grid-cards .grid-card--cw .grid-card-front {
    background: transparent;
    border-color: transparent;
    border-radius: 12px;
    box-shadow: none;
    transition: background-color var(--cs-t);
}
body.course-shelf-active .grid-cards .grid-card--cw:hover .grid-card-front { background: var(--cs-wash-turn); }
body.course-shelf-active .grid-cards .grid-card--cw .grid-card-front::after { display: none; }
body.course-shelf-active .grid-cards .grid-card--cw .grid-card-front .grid-card-content { background: transparent; }
body.course-shelf-active .grid-cards .grid-card--cw .grid-card-front .grid-card-japanese { font-weight: 400; }
body.course-shelf-active .grid-cards .grid-card--cw .grid-card-front .grid-card-en-text { color: var(--cs-ink); font-weight: 400; word-break: keep-all; }
/* ⭐ (the review round) the test face that asks in English (設定 Settings, 面 Test face: 英語 English) asks in the placard's
   voice, Literata, at the ask's own size and centred as the word it stands for (it was the app's Inter: content in the
   course's serif, chrome in Inter) */
body.course-shelf-active .grid-cards .grid-card--cw .grid-card-english-swap { font-family: var(--cs-font-tell); }
@media (prefers-reduced-motion: reduce) {
    .grid-card--cw .cs-turn { transition: none; }
    body.course-shelf-active .grid-cards .grid-card--cw .grid-card-status-btn,
    body.course-shelf-active .grid-cards .grid-card--cw .grid-card-front { transition: none; }
}

/* ── the kanji wall (step 6): the kanji teacher's painting (most are 3:2; a square one rests on its paper), the
   character, its meaning; one face, a press opens the kanji teacher's card ── */
.grid-cards .grid-card--ck { contain-intrinsic-size: auto 270px; }
.cs-art--k { aspect-ratio: 3 / 2; }
.cs-body--k { gap: 0; padding: 6px 12px 14px; }
.cs-glyph {
    font-family: var(--cs-font-jp);
    font-size: 2.5rem;
    line-height: 1.15;
    color: var(--cs-jp);
}
.cs-kmean {
    font-family: var(--cs-font-ui);
    font-size: 0.8125rem;
    line-height: 1.3;
    color: var(--cs-past);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* ⭐ (the landing's step 3) a kanji's tile in the same ink: no card, no seat, the painting on the course's paper, the glyph
   and its meaning under it on the painting's left edge, as a word's placard stands */
body.course-shelf-active .grid-cards .grid-card--course,
body.course-shelf-active .grid-cards .grid-card--course:hover { background: transparent; border-radius: 0; --cs-seat: none; box-shadow: none; }
body.course-shelf-active .grid-cards .grid-card--course:focus-visible { box-shadow: none; outline-offset: 4px; }
body.course-shelf-active .cs-art { margin: 0; border-radius: 0; background: var(--cs-paper); isolation: isolate; }
body.course-shelf-active .cs-body { align-items: flex-start; text-align: left; padding: 8px 0 4px; }
body.course-shelf-active .cs-kmean { font-family: var(--cs-font-tell); font-size: 0.9375rem; color: var(--cs-quiet); transition: color var(--cs-t); }
body.course-shelf-active .grid-cards .grid-card--course:hover .cs-kmean { color: var(--cs-accent); }
/* ⭐ (the shelf finish) the same hand as a word's card: under the pointer or the keyboard (its held seat, above) the
   character and its meaning take the indigo, nothing moves */
body.course-shelf-active .grid-cards .grid-card--course .cs-glyph { transition: color var(--cs-t); }
body.course-shelf-active .grid-cards .grid-card--course:hover .cs-glyph,
body.course-shelf-active .grid-cards .grid-card--course:focus-visible .cs-glyph,
body.course-shelf-active .grid-cards .grid-card--course:focus-visible .cs-kmean { color: var(--cs-accent); }
@media (prefers-reduced-motion: reduce) {
    body.course-shelf-active .grid-cards .grid-card--course .cs-glyph { transition: none; }
}

/* ── ⭐ THE WALK ON THE COURSE'S PAPER (the design elevation on the shelf, 1 November 2026): 練習 Practice's stone is a slip of
   the rooms' one paper, told by a soft shadow, no ring, no vignette, no grain (it stood as a beige slab on the white page);
   its choices are cut from the same slip; a picture to pick is the portrait as ink, whole (the app's 3:2 crop cut a hand
   off at the wrist) and lifted into the slip, as on the wall; every reading opaque. The app's own walk keeps its warm
   stone (css/study-walk.css). ── */
body.course-shelf-active #keikoWalk {
    --sh: 42, 35, 31;
    --kw-paper: var(--cs-sheet);
    --kw-paper-bright: var(--cs-sheet);
}
body.course-shelf-active #keikoWalk .kw-face-ask {
    border-color: transparent;
    box-shadow: var(--cs-slip-rest);
}
body.course-shelf-active #keikoWalk .kw-face-ask::before { display: none; }
body.course-shelf-active #keikoWalk .kw-ask-jp { color: var(--cs-jp); text-shadow: none; }
body.course-shelf-active #keikoWalk .kw-cloze-sent { color: var(--cs-ink); }       /* a sentence in the ink, as in the lesson */
body.course-shelf-active #keikoWalk .kw-fam-member .wj { color: var(--cs-quiet); }  /* the word round the kanji, opaque (was the cold ink at 55 per cent) */
body.course-shelf-active #keikoWalk ruby rt,
body.course-shelf-active #keikoWalk .opt-mark { opacity: 1; color: var(--cs-quiet); }
body.course-shelf-active #keikoWalk .kw-choice {
    border-color: transparent;
    box-shadow: var(--cs-slip-rest);
}
body.course-shelf-active #keikoWalk .kw-choice:hover {
    border-color: transparent;
    box-shadow: var(--cs-slip-hi);
    color: var(--cs-accent);
}
body.course-shelf-active #keikoWalk .kw-choice--image { justify-content: flex-start; background: var(--cs-sheet); box-shadow: var(--cs-slip-rest); }
body.course-shelf-active #keikoWalk .kw-choice--image:hover { box-shadow: var(--cs-slip-hi); }
body.course-shelf-active #keikoWalk .kw-choice--image img {
    aspect-ratio: 1 / 1;      /* the portraits are square: a picture to pick at its own size, on a glass that can hold it */
    max-height: 36vh;
    object-fit: contain;
    filter: url(#cs-washi-lift);
    mix-blend-mode: multiply;
}
body.course-shelf-active #keikoWalk .kw-choices.kw-locked .kw-choice:not(.is-answer):not(.is-chosen) { opacity: 1; color: var(--cs-quiet); }
body.course-shelf-active #keikoWalk .kw-listen-disc:hover { transform: none; }   /* a hover is ink, never geometry */
/* the painting on a settled face and on its sheet the same: the portrait whole on the page's paper, no print's shadow; its ring
   stays the verdict (house law: no marks on a watercolor) */
body.course-shelf-active #keikoWalk .kw-reveal-img {
    background: var(--cs-sheet);
    box-shadow: 0 0 0 1px var(--kw-ring, transparent);
}
body.course-shelf-active #keikoWalk .kw-reveal-img img {
    object-fit: contain;
    filter: url(#cs-washi-lift);
    mix-blend-mode: multiply;
}
body.course-shelf-active #keikoWalk :is(.kw-plq-furi, .kw-plq-en, .kw-choice--word .wg) { color: var(--cs-quiet); }
/* on the pixel, at 1x: a caption's reading at half its word (7.6 to 8.8 px) and a small placard's reach their ink at 11 px and 600; a
   slip's › in the ink and its seal's glyph at 600 (they reached 3.40 and 4.45:1) */
body.course-shelf-active #keikoWalk .kw-plq-furi { font-weight: 600; }
body.course-shelf-active #keikoWalk .wj rt { font-size: max(0.5em, 11px); font-weight: 600; color: var(--cs-past); }
body.course-shelf-active #keikoWalk .chev { color: var(--cs-ink); }
body.course-shelf-active #keikoWalk .kw-refsec-h .ink { font-weight: 600; }
/* (the verdict's rings stay, a ring for a state: moss the answer, sepia a wrong pick) */
body.course-shelf-active #keikoWalk .kw-choice.is-answer { box-shadow: inset 0 0 0 2px rgba(107, 127, 92, 0.42); }
body.course-shelf-active #keikoWalk .kw-choice--image.is-answer { background: color-mix(in srgb, var(--color-moss) 6%, var(--cs-sheet)); box-shadow: inset 0 0 0 2px rgba(107, 127, 92, 0.55), var(--cs-slip-rest); }
body.course-shelf-active #keikoWalk .kw-choice.is-chosen:not(.is-answer) { box-shadow: inset 0 0 0 2px rgba(138, 118, 98, 0.5); }
body.course-shelf-active #keikoWalk .kw-choice--image.is-chosen:not(.is-answer) { background: color-mix(in srgb, #8a7662 7%, var(--cs-sheet)); box-shadow: inset 0 0 0 2px rgba(138, 118, 98, 0.6), var(--cs-slip-rest); }

/* ── the kanji asks in the walk (step 6; js/study-walk.js renderCourseKanji): the two glyph tiles stand centred under
   the word, the way's kana under the character ── */
#keikoWalk .kw-ck .kw-choices--glyphs { justify-content: center; }
#keikoWalk .kw-ck .kw-ck-way {
    margin: 0 0 clamp(4px, 0.5vw, 8px);
    text-align: center;
    font-family: var(--font-jp, 'Klee One', serif);
    font-size: clamp(20px, 1.6vw, 26px);
    line-height: 1.3;
    letter-spacing: 0.04em;
    color: var(--cs-jp);
}

/* the empty wall: the course's own words under the head */
.cs-empty { grid-column: 1 / -1; }

/* ── ⭐ THE TWO PANELS, ONE FAMILY (step 3 of the shelf top, 8 November 2026; round 2 §4, the owner's A): 絞る Filter at the
   left, 設定 Settings at the right, both beneath the beam, both pushing the wall as before; what changes is inside them.
   THE HEAD says the press's word in the row's own voice: the kanji light beside the English at the views' size, sentence case,
   no letter-spaced capitals; its words stand on the LEDGE'S LINE (the same foot as the views: 2 px over the words, 0.8 u
   under them) and its rule is the ledge's hairline continued, so the panel and the wall read as one line across the glass.
   No find field, no tally (the ledge's number says the count). The groups always open, parted by a hairline; a row in force a
   wash, in ink (indigo on the shelf answers the hand, never a state). The settings' three sentences off (their slips show
   the choice); its group heads in the same voice. The panels' own markup is the app's (js/grid-mode.js, index.html), dressed
   here on the course path alone ── */
body.course-shelf-active :is(#browseSidebar, #settingsSidebar) .sidebar-header {
    align-items: flex-end;
    height: calc(14px + 2px + 1.215 * var(--cs-u) + 0.8 * var(--cs-u) + 1px);   /* the ledge: its 14 px of air, the views' line, their foot, the hairline */
    box-sizing: border-box;
    padding: 0 10px 0 16px;
    border-bottom: 1px solid var(--cs-hair);
}
body.course-shelf-active #browseSidebar .sidebar-head { border-bottom: 0; }
body.course-shelf-active #browseSidebar .sidebar-head .sidebar-header { padding-bottom: 0; border-bottom: 1px solid var(--cs-hair); }
/* the app's own title (選 Filters) steps off; the course's 絞る Filter stands in its seat (js/course-shelf.js panelTitleHTML) */
body.course-shelf-active #browseSidebar .sidebar-header-title:not(.cs-sb-title) { display: none; }
.cs-sb-title { display: none; }
body.course-shelf-active :is(#browseSidebar, #settingsSidebar) .sidebar-header-title {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4em;
    padding: 2px 0 calc(0.8 * var(--cs-u));
    font-family: var(--cs-font-ui);
    font-size: calc(0.9 * var(--cs-u));
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
    color: var(--cs-ink);
}
body.course-shelf-active :is(#browseSidebar, #settingsSidebar) .sidebar-header-title .sec-jp {
    font-family: var(--cs-chrome-jp);
    font-weight: 400;
    font-size: 0.92em;
    letter-spacing: 0.02em;
    color: var(--cs-quiet);
    margin: 0;
}
body.course-shelf-active :is(#browseSidebar, #settingsSidebar) .sidebar-header-title .sec-en { font-weight: 400; color: var(--cs-ink); }
/* the head's presses (消す Clear, the close) centred on the words' line */
body.course-shelf-active #browseSidebar .sidebar-header-actions,
body.course-shelf-active #settingsSidebar .sidebar-header > .sidebar-close-btn { margin-bottom: calc(0.8 * var(--cs-u) + (1.215 * var(--cs-u) - 34px) / 2); }
body.course-shelf-active :is(#browseSidebar, #settingsSidebar) .sidebar-close-btn { color: var(--cs-quiet); }
body.course-shelf-active #browseSidebar .sb-find,
body.course-shelf-active #browseSidebar .sb-tally { display: none; }
/* the groups: always open, parted by a hairline, their heads in the row's voice at the row's size */
.cs-sec { padding: 10px 0 8px; }
.cs-sec + .cs-sec { border-top: 1px solid var(--cs-hair); }
.cs-sec-body { padding: 2px 0 0; }
.cs-sec .cs-sec-head { display: flex; align-items: center; margin-bottom: 4px; }
/* (the app's own section-title dress, letter-spaced capitals, is written at the panel's weight: these say the course's by id) */
body.course-shelf-active #browseSidebar .cs-sec .cs-sec-title {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: baseline;
    gap: 0.4em;
    margin: 0;
    padding: 4px 4px;
    font-family: var(--cs-font-ui);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--cs-quiet);
}
body.course-shelf-active #browseSidebar .cs-sec .cs-sec-title .sec-jp { font-family: var(--cs-chrome-jp); font-weight: 400; font-size: 12px; letter-spacing: 0.02em; color: var(--cs-quiet); margin: 0; }
body.course-shelf-active #browseSidebar .cs-sec .cs-sec-title .sec-en { font-weight: 500; color: var(--cs-quiet); }
.cs-sec .cs-sec-clear { color: var(--cs-quiet); }
.cs-sec .cs-sec-clear:hover { color: var(--cs-accent); background: none; box-shadow: none; }
.cs-row {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 5px 12px 5px 16px;
    font-family: var(--cs-font-ui, 'Inter', sans-serif);
    font-size: 0.875rem;
    line-height: 1.35;
    color: var(--cs-ink, #38322D);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color var(--cs-t), color var(--cs-t);
}
.cs-row:hover { background: var(--cs-wash-turn); color: var(--cs-ink); }
.cs-row:focus-visible { outline: 2px solid var(--cs-accent, #3D5A80); outline-offset: -2px; }
.cs-row.selected { background: var(--cs-wash); color: var(--cs-ink); }
.cs-row.selected .cs-row-count { color: var(--cs-ink); }
/* ⭐ (the shelf finish) a facet with nothing in it (状 New, 0: a shelf word arrives taught) stays legible: the quiet ink at full strength,
   never a 55 % fade (2.6:1); js/course-shelf.js rowHTML says it is disabled (aria-disabled) */
.cs-row.is-empty { color: var(--cs-quiet, #69625A); opacity: 1; cursor: default; }
/* the row's Japanese light beside its English, as the head row's (the chrome face, the quiet ink) */
.cs-row-jp {
    flex: none;
    min-width: 1.6rem;
    font-family: var(--cs-chrome-jp, 'Noto Sans JP', sans-serif);
    font-size: 0.8125rem;
    color: var(--cs-quiet, #69625A);
}
.cs-row-label { flex: 1 1 auto; min-width: 0; }
.cs-row-count {
    flex: none;
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
    color: var(--cs-quiet, #69625A);
}
/* ⭐ (the owner, 5 November 2026: "100% alignment with the app") THE 状 STATUS ROWS: the app's own dot before the label
   (css/browse-sidebar.css .status-row-dot: the four state inks, New a hollow ring), spaced by the row's own gap rather than
   the app's margin, and the row centred on it as the app's .status-row is (a bare dot has no baseline of its own) */
.cs-row--status { align-items: center; }
.cs-row--status .status-row-dot { margin-right: 0; }
.cs-clear-all [lang="ja"] { font-family: var(--cs-font-jp, 'Klee One', serif); }

/* the lookup palette on the course's wall: a shelf word's kana where the app prints romaji (js/vocab-search.js) */
.result-kana { font-family: var(--font-jp, 'Klee One', 'Noto Sans JP', serif); color: var(--color-text-secondary, #57534e); }

/* (the beam's search glass stands alone on the course path, its aria-label its only words: the owner's item 4) */

/* the walk's go-on press on the course's sitting puts its kanji first, 次 Try them */
body.course-shelf-active #keikoWalk .kw-duel-on > .jp:first-child { margin: 0 0.45em 0 0; }

/* the reveal doors on the course's sitting wear their kanji, 仮名 kana and 訳 meaning */
body.course-shelf-active #keikoWalk .kw-furi-chip .jp,
body.course-shelf-active #keikoWalk .kw-en-chip .jp { font-family: var(--font-jp, 'Klee One', serif); margin-right: 0.4em; letter-spacing: 0.02em; }

/* ── 設定 the settings rail on the flashcards (the owner's item 5): the app's 記録 Progress steps off for the course's
   own (js/journey-settings.js seatCourseReset), the kanji of a label in the Klee hand ── */
body.course-shelf-active #settingsSidebar .settings-reset-section:not(.st-course-reset) { display: none; }
.st-course-reset .st-jp,
#shortcutsPanelContent .sk-jp {
    font-family: var(--font-jp, 'Klee One', 'Noto Sans JP', serif);
    margin-right: 0.45em;
    letter-spacing: 0.02em;
}
.st-course-note {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--color-text-secondary, #57534e);
}

/* ── ⭐ (the shelf finish) THE PANELS in the row's dress while the shelf stands: 絞る Filter (the app's panel, the course's
   facets) and the settings rail (its door, ⋮, in the beam). The Japanese light beside its English, every caption at AA on
   the room's ground (the heads were 3.22:1), a setting's two choices slips and the one in force pressed in. The section
   eyebrows keep the app's panel type (shared with the hall), only their ink. The panels keep the app's own push of the
   page (the app's wall moves the same way when its panels open) ── */
body.course-shelf-active #settingsSidebar .st-eyebrow,
body.course-shelf-active #settingsSidebar .settings-group-label { display: flex; align-items: baseline; gap: 0.4em; margin: 0 0 9px; }
body.course-shelf-active #settingsSidebar .st-eyebrow .ej,
body.course-shelf-active #settingsSidebar .settings-group-label .sec-jp {
    font-family: var(--cs-chrome-jp);
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.02em;
    color: var(--cs-quiet);
    margin: 0;
}
body.course-shelf-active #settingsSidebar .st-eyebrow em,
body.course-shelf-active #settingsSidebar .settings-group-label .sec-en {
    font-family: var(--cs-font-ui);
    font-style: normal;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--cs-quiet);
}
/* (the rail's eyebrows are written in lower case for the app's capitals: sentence case here, the first letter alone) */
body.course-shelf-active #settingsSidebar .st-eyebrow em { display: inline-block; }
body.course-shelf-active #settingsSidebar .st-eyebrow em::first-letter { text-transform: uppercase; }
/* ⭐ (step 3) the settings' three sentences go: 表示 Reading, 面 Test face and 音声 Word audio each keep their two slips, whose
   specimens already show the choice (the hint's aria-live still speaks the change to a reader) */
body.course-shelf-active #settingsSidebar .st-hint { display: none; }
body.course-shelf-active #settingsSidebar .st-group + .st-group { border-top-color: var(--cs-hair); }
/* 消す Clear, once a facet is on: the panel's one quiet ink (the app's #8C8578 printed 3.5:1 on the paper) */
body.course-shelf-active #browseSidebar .sidebar-clear-btn { color: var(--cs-quiet); }
body.course-shelf-active #browseSidebar .sidebar-clear-btn:hover { color: var(--cs-accent); }
/* the panels' foot, Press Esc to close, at AA */
body.course-shelf-active :is(#browseSidebar, #settingsSidebar) :is(.sidebar-foot, .settings-footer) span { color: var(--cs-quiet); }
/* a setting's two choices: two slips, the one in force pressed into the page (no ring round either) */
body.course-shelf-active #settingsSidebar .st-opt {
    border: 0;
    background: var(--cs-slip);
    box-shadow: var(--cs-slip-rest);
    color: var(--cs-quiet);
    transition: box-shadow var(--cs-t), background-color var(--cs-t), color var(--cs-t);
}
body.course-shelf-active #settingsSidebar .st-opt:hover { box-shadow: var(--cs-slip-hi); color: var(--cs-accent); }
body.course-shelf-active #settingsSidebar .st-opt.on,
body.course-shelf-active #settingsSidebar .st-opt[aria-pressed="true"] {
    background: var(--cs-wash);
    box-shadow: none;
    color: var(--cs-ink);
}
body.course-shelf-active #settingsSidebar .st-opt b { font-weight: 500; color: inherit; }
/* (the 表示 Reading setting's specimen: the kana over 言葉, 0.45 em of the slip's label, 6.3 px, reached 3.48:1 on the pixel: a size a reading
   can be read at, in the ink) */
body.course-shelf-active #settingsSidebar .st-opt b ruby rt { opacity: 1; font-size: 9px; color: var(--cs-ink); }
body.course-shelf-active #settingsSidebar .st-seg--samples .st-opt b { min-height: 2.6em; }   /* its seat, so the two labels stand level */
body.course-shelf-active #settingsSidebar .st-opt small { color: inherit; }
/* the keys' chips: washes */
body.course-shelf-active #settingsSidebar kbd,
body.course-shelf-active #browseSidebar kbd {
    border-color: transparent;
    background: var(--cs-wash);
    box-shadow: none;
    color: var(--cs-past);
}
body.course-shelf-active #settingsSidebar .shortcut-item { color: var(--cs-past); }
body.course-shelf-active #settingsSidebar .sk-jp { font-family: var(--cs-chrome-jp); font-weight: 400; color: var(--cs-quiet); }
@media (prefers-reduced-motion: reduce) {
    body.course-shelf-active #settingsSidebar .st-opt { transition: none; }
}

/* ── ⭐ (the shelf finish) THE PAGES A CARD OPENS (the word page and the kanji page under the course profile, the shelf
   beneath): the way home in the quiet ink (← 単語帳 MY WORDS: CourseShelf.COPY.page_back_en, one name for the place), the
   painting seated on the page's paper as the wall seats it (its own washi lifted and multiplied away: no paper rectangle),
   the controls slips with no outline, the two marks in the card's hairline dress and sentence case, every caption at AA ── */
body.course-shelf-active .wp-root.wp-course .wp-back .cap,
body.course-shelf-active .wp-root.kjp-course .wp-back .cap { color: var(--cs-quiet); }
body.course-shelf-active .wp-root.wp-course .wp-paint,
body.course-shelf-active .wp-root.kjp-course .wp-paint { filter: url(#cs-washi-lift); mix-blend-mode: multiply; }
/* the two marks in the card's dress, at the page's size: a hairline on the paper, the seat 44 px as the sound disc beside it (padding inside the hairline), amber or moss under the hand */
body.course-shelf-active .wp-root.wp-course .wp-verb {
    padding: 10px 21px 11px;
    border: 1px solid rgba(44, 44, 44, 0.14);
    border-radius: 7px;
    background: transparent;
    box-shadow: none;
    color: var(--cs-past);
    transition: color var(--cs-t), border-color var(--cs-t), background-color var(--cs-t);
}
@media (max-width: 900px) {
    body.course-shelf-active .wp-root.wp-course .wp-verb { padding: 10px 14px 11px; }
}
body.course-shelf-active .wp-root.wp-course .wp-verb .cap { text-transform: none; letter-spacing: 0; font-size: 14px; color: inherit; }
/* (Klee One at 400 on the marks' wash reaches 3.81:1 on the pixel at this size; 600, the weight every small reading of the lesson wears, at rest too so the hand moves nothing) */
body.course-shelf-active .wp-root.wp-course .wp-verb .jp { font-weight: 600; color: inherit; }
body.course-shelf-active .wp-root.wp-course .wp-save:hover,
body.course-shelf-active .wp-root.wp-course .wp-save:focus-visible {
    border-color: var(--color-amber, #A07850);
    background: color-mix(in srgb, var(--color-amber, #A07850) 10%, transparent);
    box-shadow: none;
    color: var(--cs-mark-amber);
}
body.course-shelf-active .wp-root.wp-course .wp-skip:hover,
body.course-shelf-active .wp-root.wp-course .wp-skip:focus-visible {
    border-color: var(--color-moss, #6B7F5C);
    background: color-mix(in srgb, var(--color-moss, #6B7F5C) 8%, transparent);
    box-shadow: none;
    color: var(--cs-mark-moss);
}
body.course-shelf-active .wp-root.wp-course .wp-save.active {
    border-color: color-mix(in srgb, var(--color-amber, #A07850) 55%, transparent);
    background: color-mix(in srgb, var(--color-amber, #A07850) 10%, transparent);
    color: var(--cs-mark-amber);
}
body.course-shelf-active .wp-root.wp-course .wp-skip.active {
    border-color: color-mix(in srgb, var(--color-moss, #6B7F5C) 55%, transparent);
    background: color-mix(in srgb, var(--color-moss, #6B7F5C) 8%, transparent);
    color: var(--cs-mark-moss);
}
body.course-shelf-active .wp-root.wp-course .wp-oto,
body.course-shelf-active .wp-root.kjp-course .wp-oto { border: 0; background: var(--cs-slip); box-shadow: var(--cs-slip-rest); }
body.course-shelf-active .wp-root.wp-course .wp-oto:hover,
body.course-shelf-active .wp-root.kjp-course .wp-oto:hover { box-shadow: var(--cs-slip-hi); }
/* ⭐ (the design elevation on the shelf) the sheet's sound discs (the entry's, each sentence's) from the same slip as the
   stage's: the app's #F7F2E6 under a dark ring stood as a beige coin on the white sheet */
body.course-shelf-active .wp-root.wp-course :is(.wp-eaudio, .wp-ex-hear),
body.course-shelf-active .wp-root.kjp-course :is(.wp-eaudio, .wp-ex-hear) { border: 0; background: var(--cs-slip); box-shadow: var(--cs-slip-rest); }
body.course-shelf-active .wp-root.wp-course :is(.wp-eaudio, .wp-ex-hear):hover,
body.course-shelf-active .wp-root.kjp-course :is(.wp-eaudio, .wp-ex-hear):hover { box-shadow: var(--cs-slip-hi); }
body.course-shelf-active .wp-root.wp-course .wp-rakkan .kg {
    border: 0;
    border-radius: 8px;
    background: var(--cs-slip);
    box-shadow: var(--cs-slip-rest);
}
body.course-shelf-active .wp-root.wp-course .wp-rakkan:hover .kg,
body.course-shelf-active .wp-root.wp-course .wp-rakkan:focus-visible .kg { color: var(--cs-accent); box-shadow: var(--cs-slip-hi); }
body.course-shelf-active .wp-root.wp-course .wp-rakkan .kc,
body.course-shelf-active .wp-root.wp-course .pe,
body.course-shelf-active .wp-root.kjp-course .pe { color: var(--cs-past); }
body.course-shelf-active .wp-root.wp-course .wp-lip .cap,
body.course-shelf-active .wp-root.kjp-course .wp-lip .cap { color: var(--cs-quiet); }
/* ⭐ (the review round) the kanji page's reading (病: びょう) keeps the sound's colour, at AA (--cs-sound above): the finish
   had dressed it in the eyebrow's grey for AA, and a beginner lost the colour that says "this is how it sounds" */
body.course-shelf-active .wp-root.kjp-course .wp-romaji { color: var(--cs-sound); }
@media (prefers-reduced-motion: reduce) {
    body.course-shelf-active .wp-root.wp-course .wp-verb { transition: none; }
}
/* ⭐ A WORD'S PAGE SPEAKS IN THE TEACHER'S SERIF (the deep review of 11 November 2026, call 12, VO-03 as checked; the owner's
   yes of 12 November): the content English of a course word page in Literata, as the shelf card prints the meaning and the
   lesson's own word page prints the meaning, the story and a sentence's English (css/course-lesson.css .cl-synth,
   .cl-sent-en), so one word reads in one voice on the card, its page and its lesson; the controls keep Inter. Sized off the
   course's unit: the meaning under the painting 1.6 u (it was Inter 29/500), the meaning again at the sheet's head 1.2 u
   (Inter 22), the owner's teaching note the lesson's telling step, 1.0625 u on 1.6, in the ink (Inter 16.5 on a 30.5 px line);
   an example's English, once 英語 English shows it, the same serif at its own size. The kanji page's bold sans punch line
   stays the owner's (his walk of 11 October 2026), and so do the labels. Said by the page's own class with every token's
   fallback, never `body`: the page opens from My words and from the course page's search (no shelf class on the body there),
   and these rules dress no lesson page */
.wp-root.wp-course .wp-gloss {
    font-family: var(--cs-font-tell, 'Literata', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif);
    font-weight: 400;
    font-size: calc(1.6 * var(--cs-u, var(--course-u)));
    line-height: 1.3;
}
.wp-root.wp-course .wp-egloss {
    font-family: var(--cs-font-tell, 'Literata', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif);
    font-size: calc(1.2 * var(--cs-u, var(--course-u)));
}
.wp-root.wp-course .wp-story-body {
    font-family: var(--cs-font-tell, 'Literata', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif);
    font-size: calc(1.0625 * var(--cs-u, var(--course-u)));
    line-height: 1.6;
    color: var(--cs-ink, #38322D);
}
.wp-root.wp-course .wp-ex-en { font-family: var(--cs-font-tell, 'Literata', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif); }