/* ==========================================================================
 * 棚 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')).
 * ==========================================================================*/

body.course-shelf-active {
    --cs-paper: var(--cl-paper, #F3F0EA);
    --cs-sheet: var(--cl-sheet, #FBF8F2);
    --cs-ink: var(--cl-ink, #3A3633);
    --cs-past: var(--cl-ink-past, #57534E);
    --cs-quiet: var(--cl-quiet, #6E6860);
    --cs-jp: var(--color-jp-text, #523E1E);
    --cs-rule: var(--cl-rule, #D8D2C8);
    --cs-accent: var(--cl-accent, #3D5A80);
    --cs-font-jp: var(--font-jp, 'Klee One', 'Noto Sans JP', 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 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 at 1440, five at 1680, 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 ── */
body.course-shelf-active .grid-cards:not(.masonry-layout) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 44px 28px;
    padding: 24px 24px 40px;
    --painting-h: calc(var(--wall-col, 300px) - var(--wall-pad) * 2);
    --placard-h: calc(126px + var(--ruby-seat));
}
@media (min-width: 1400px) {
    body.course-shelf-active .grid-cards:not(.masonry-layout) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1660px) {
    body.course-shelf-active .grid-cards:not(.masonry-layout) { grid-template-columns: repeat(5, minmax(0, 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(3, minmax(0, 1fr)); }
}
@media (min-width: 1660px) {
    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(4, minmax(0, 1fr)); }
}

/* ── the head: the two counts and the words waiting, ‹ 稽古 Course (back to the portal) at its right; 読み物 Texts
   read stood there until 20 October 2026 ── */
.cs-head {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 1.5rem;
    padding: 4px 4px 14px;
    border-bottom: 1px solid var(--cs-rule);
    font-family: var(--cs-font-ui);
    color: var(--cs-past);
}
.cs-head-counts {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0;
    font-size: 0.9375rem;
    line-height: 1.4;
    letter-spacing: 0.005em;
}
.cs-head-counts > span + span::before {
    content: '·';
    margin: 0 0.6em;
    color: var(--cs-quiet);
}
.cs-head-wait { color: var(--cs-accent); }
.cs-head-back {
    flex: none;
    margin-left: auto;
    display: inline-flex;
    align-items: baseline;
    gap: 0.45em;
    padding: 2px 0 3px;
    font: inherit;
    font-size: 0.9375rem;
    color: var(--cs-accent);
    background: none;
    border: 0;
    border-bottom: 1px solid transparent;
    box-shadow: none;
    cursor: pointer;
}
.cs-head-back i { font-style: normal; margin-right: 0.1em; }
.cs-head-back [lang="ja"] { font-family: var(--cs-font-jp); }
/* ⚖ 20 October 2026 (the owner's screenshot: under the pointer the door wore a white pill with a drop shadow): the app's
   `button:hover` (css/components.css, 0,1,1: box-shadow 0 6px 20px) outranked the door's own rest (.cs-head-back, 0,1,0),
   and the app's `select, button` radius (12px, never reset here) gave that shadow a pill's shape. The door is a ghost text
   door: under the pointer and the press only its hairline at 40% of the accent, at 0,3,0 so no app button rule reaches it;
   the chevron, the kanji and the English as they stand; the focus keeps its outline. */
.cs-head .cs-head-back:hover,
.cs-head .cs-head-back:active {
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(61, 90, 128, 0.4);
    border-radius: 0;
    box-shadow: none;
    transform: none;
}
.cs-head-back:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 3px; border-radius: 2px; }

/* ── the head's two views (step 6): 言葉 Words and 漢字 Kanji, the beam's own tab idiom (ink and an indigo rule
   under the one standing), chrome in kanji + English ── */
.cs-views {
    flex: none;
    display: inline-flex;
    align-items: baseline;
    gap: 1.1rem;
}
.cs-view {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4em;
    padding: 2px 0 4px;
    font: inherit;
    font-size: 0.9375rem;
    line-height: 1.35;
    color: var(--cs-quiet);
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease;
}
.cs-view [lang="ja"] { font-family: var(--cs-font-jp); }
.cs-view:hover { color: var(--cs-ink); }
/* ⚖ 20 October 2026 (the same inherited hover, found beside the back door): the app's `button:hover` (0,1,1) laid its
   drop shadow under the two views too, past their own rest (.cs-view, 0,1,0); under the pointer and the press a view keeps
   its ink and its rule alone */
.cs-head .cs-view:hover,
.cs-head .cs-view:active { background: none; box-shadow: none; transform: none; }
.cs-view.is-on { color: var(--cs-ink); border-bottom-color: var(--cs-accent); }
.cs-view:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 3px; border-radius: 2px; }

/* ── 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 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 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 marks' two voices fit a narrower placard (four and five columns): each mark takes the room its words need
   (まだ Still learning is the longer), the caption a hair tighter */
/* (the pressed mark's receipt keeps the same seat: the app's .active dress would hand it back an even half) */
.grid-cards .grid-card--cw .grid-card-status-btn,
.grid-cards .grid-card--cw .grid-card-status-btn.active { flex: 1 1 auto; padding-left: 4px; padding-right: 4px; gap: 5px; }
.grid-cards .grid-card--cw .grid-card-status-btn .cap { font-size: 10px; letter-spacing: 0.04em; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.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; }
/* 裏 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 */
.grid-card--cw .cs-turn {
    position: absolute;
    top: 12px;
    right: 52px;
    z-index: 5;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(250, 250, 247, 0.88);
    box-shadow: 0 1px 4px rgba(25, 22, 18, 0.18);
    color: #57534E;
    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: rgba(250, 250, 247, 0.96); box-shadow: 0 2px 7px rgba(25, 22, 18, 0.22); 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; }
@media (prefers-reduced-motion: reduce) {
    .grid-card--cw .cs-turn { 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 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(--color-jp-text, #523E1E);
}

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

/* ── the facets in the panel: the app's own section dress (its head, its ×), the course's rows ── */
.cs-sec { border-bottom: 1px solid var(--cs-rule, #D8D2C8); padding-bottom: 6px; }
.cs-sec-body { padding: 2px 0 6px; }
.cs-sec .cs-sec-toggle.collapsed ~ .section-clear { display: none; }
.cs-sec:has(.cs-sec-toggle.collapsed) > .cs-sec-body { display: none; }
.cs-row {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 6px 12px 6px 16px;
    font-family: var(--cs-font-ui, 'Inter', sans-serif);
    font-size: 0.875rem;
    line-height: 1.35;
    color: var(--cs-ink, #3A3633);
    border-radius: 6px;
    cursor: pointer;
}
.cs-row:hover { background: rgba(61, 90, 128, 0.05); }
.cs-row:focus-visible { outline: 2px solid var(--cs-accent, #3D5A80); outline-offset: -2px; }
.cs-row.selected { background: rgba(61, 90, 128, 0.09); color: var(--cs-accent, #3D5A80); }
.cs-row.is-empty { color: var(--cs-quiet, #6E6860); opacity: 0.55; cursor: default; }
.cs-row-jp {
    flex: none;
    min-width: 1.6rem;
    font-family: var(--cs-font-jp, 'Klee One', serif);
    color: var(--cs-past, #57534E);
}
#csSecLesson .cs-row-jp { font-family: var(--cs-font-ui, 'Inter', sans-serif); font-variant-numeric: tabular-nums; }
.cs-row-label { flex: 1 1 auto; min-width: 0; }
#csSecLesson .cs-row-label { font-family: var(--cs-font-tell); }
.cs-row-count {
    flex: none;
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
    color: var(--cs-quiet, #6E6860);
}
.cs-chips {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
    gap: 6px;
    padding: 4px 12px 10px 16px;
}
.cs-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 0 3px;
    border-radius: 6px;
    border: 1px solid var(--cs-rule, #D8D2C8);
    background: var(--color-card, #FAFAF7);
    cursor: pointer;
}
.cs-chip:hover { border-color: rgba(61, 90, 128, 0.35); }
.cs-chip:focus-visible { outline: 2px solid var(--cs-accent, #3D5A80); outline-offset: 1px; }
.cs-chip.selected { border-color: var(--cs-accent, #3D5A80); background: rgba(61, 90, 128, 0.08); }
.cs-chip.is-empty { opacity: 0.45; cursor: default; }
.cs-chip-k { font-family: var(--cs-font-jp, 'Klee One', serif); font-size: 1.25rem; line-height: 1.2; color: var(--cs-jp, #523E1E); }
.cs-chip-n { font-family: var(--cs-font-ui, 'Inter', sans-serif); font-size: 0.6875rem; color: var(--cs-quiet, #6E6860); font-variant-numeric: tabular-nums; }
.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);
}