/* Membaca (/reading): the list of passages, a passage with its furigana,
 * and under it the words and kanji it holds, each with its JLPT level.
 * Passages and terms filed under a level take its tone (learning-path.css);
 * the rest use the accent, and terms outside JLPT stay neutral. */
.reading-page:not([class*=tone-]),.admin-reading-panel:not([class*=tone-]){--tone:var(--color-accent-solid);--tone-edge:color-mix(in oklch,var(--color-accent),black 20%);--tone-text:var(--color-accent);--tone-soft:var(--color-accent-soft)}
.reading-terms li:not([class*=tone-]),.reading-filter button:not([class*=tone-]){--tone:var(--color-muted);--tone-edge:var(--color-muted);--tone-text:var(--color-muted);--tone-soft:var(--color-paper-2)}

/* List: one row per passage, its title, the opening words and its size */
.reading-hub{display:grid;gap:20px}
.reading-list{display:grid;margin:0;padding:6px 8px;list-style:none;border-radius:var(--radius-surface);background:var(--color-surface)}
.reading-list li+li{border-top:1px solid var(--color-rule)}
.reading-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;padding:16px 14px;border-radius:12px;color:var(--color-ink);text-decoration:none}
.reading-row:hover{background:var(--color-paper-2)}
.reading-row-copy{display:grid;gap:4px;min-width:0}
.reading-row-copy strong{font-size:16px;font-weight:500;line-height:1.45;overflow-wrap:anywhere}
.reading-row:hover strong{text-decoration:underline}
.reading-row-excerpt{font:14px/1.8 var(--font-japanese);color:var(--color-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reading-row-copy small{font-size:12px;color:var(--color-muted)}
.reading-row-go{width:18px;height:18px;fill:none;stroke:var(--color-muted);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.reading-row:hover .reading-row-go{stroke:var(--color-ink)}
.reading-counts{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;font-size:12px}
.reading-counts span{padding:3px 9px;border-radius:99px;background:var(--color-paper-2);color:var(--color-muted)}
.reading-counts .reading-level{background:var(--tone);color:#fff;font-weight:600}

/* Passage: like a video's watch page, the text on the left and the words
   and kanji beside it, where the transcript would be */
.reading-page{display:grid;gap:16px}
.reading-page .deck-back{margin:0}
.reading-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,420px);gap:20px;align-items:start}
.reading-main{display:grid;gap:12px;min-width:0}
.reading-head{display:grid;gap:6px}
.reading-head p{margin:0}
.reading-head h1{margin:0;font-size:clamp(18px,1.8vw,21px);line-height:1.4;overflow-wrap:anywhere}
.reading-info{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px}
.reading-credit{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:12px;color:var(--color-muted);overflow-wrap:anywhere}
.reading-credit-label{font-weight:600;color:var(--color-ink)}
.reading-sheet{padding:28px 32px;border-radius:var(--radius-surface);background:var(--color-surface)}
.reading-text{max-width:40em;font:400 clamp(18px,1.6vw,20px)/2.3 var(--font-japanese);color:var(--color-ink)}
.reading-text p{margin:0 0 .9em;text-indent:1em;overflow-wrap:anywhere}
.reading-text p:last-child{margin-bottom:0}
.reading-text rt{font-size:.5em;color:var(--color-muted)}

/* The display switches */
.reading-page.hide-furigana :is(rt,rp){display:none}
.reading-page.hide-furigana .reading-text{line-height:2}
html[data-furigana=off] .reading-page:not(.hide-furigana) rt{display:revert}
.reading-page.hide-romaji .reading-word-romaji{display:none}
.reading-page.hide-meaning .reading-word-gloss{display:none}

/* Words and kanji */
.reading-terms{position:sticky;top:calc(var(--sticky-top) + 4px);display:flex;flex-direction:column;max-height:calc(100dvh - var(--sticky-top) - 24px);border-radius:var(--radius-surface);background:var(--color-surface);overflow:hidden}
.reading-terms-head{display:grid;gap:10px;padding:14px 16px;border-bottom:1px solid var(--color-rule)}
.reading-toggles,.reading-filter{display:flex;flex-wrap:wrap;gap:6px}
.reading-toggles button{min-height:32px;padding:0 12px;border:0;border-radius:99px;background:var(--color-paper-2);color:var(--color-muted);font:inherit;font-size:12px;cursor:pointer}
.reading-toggles button[aria-pressed=true]{background:var(--tone-soft);color:var(--tone-text);font-weight:600}
.reading-tabs{display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:99px;background:var(--color-paper-2)}
.reading-tabs button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:34px;border:0;border-radius:99px;background:transparent;color:var(--color-muted);font:inherit;font-size:13px;cursor:pointer}
.reading-tabs button span{font-size:11px;font-variant-numeric:tabular-nums;opacity:.75}
.reading-tabs button[aria-selected=true]{background:var(--color-surface);color:var(--color-ink);font-weight:600;box-shadow:0 1px 2px var(--color-shadow)}
.reading-filter button{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 10px;border:0;border-radius:99px;background:transparent;color:var(--color-muted);font:inherit;font-size:12px;cursor:pointer}
.reading-filter button[class*=tone-]::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tone)}
.reading-filter button span{font-variant-numeric:tabular-nums;opacity:.75}
.reading-filter button:hover{background:var(--color-paper-2);color:var(--color-ink)}
.reading-filter button[aria-pressed=true]{background:var(--color-ink);color:var(--color-surface);font-weight:600}
.reading-filter button[class*=tone-][aria-pressed=true]{background:var(--tone);color:#fff}
.reading-filter button[class*=tone-][aria-pressed=true]::before{background:#fff}
.reading-terms-body{flex:1;padding:8px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.reading-group{display:grid;gap:8px;min-width:0}
.reading-group[hidden],.reading-filter button[hidden]{display:none}
.reading-terms-note{margin:0;padding:12px;font-size:13px;color:var(--color-muted)}
.reading-terms > .reading-terms-note{padding:20px}
.reading-badge{flex-shrink:0;padding:3px 8px;border-radius:6px;background:var(--tone-soft);color:var(--tone-text);font-size:11px;font-weight:600;letter-spacing:.02em;white-space:nowrap}
.reading-terms li:not([class*=tone-]) .reading-badge{font-weight:500}
.reading-word-copy{display:grid;gap:1px;min-width:0}
.reading-word-romaji{font-size:12px;color:var(--color-muted);overflow-wrap:anywhere}
.reading-word-gloss{font-size:13px;color:var(--color-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}

.reading-words{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.reading-word{display:grid;grid-template-columns:minmax(4.5em,auto) minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 12px;border-radius:12px;color:var(--color-ink);text-decoration:none}
a.reading-word:hover{background:var(--color-paper-2)}
.reading-word-ja{max-width:11em;font:500 17px/1.8 var(--font-japanese);overflow-wrap:anywhere}
.reading-word-ja rt{font-size:.5em;font-weight:400;color:var(--color-muted)}

.reading-kanji{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.reading-kanji-card{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 12px;border-radius:12px;color:var(--color-ink);text-decoration:none}
.reading-kanji-card:hover{background:var(--color-paper-2)}
.reading-kanji-char{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;background:var(--color-paper-2);font:500 26px/1 var(--font-japanese);box-shadow:inset 0 -3px 0 var(--tone)}
.reading-kanji-card:hover .reading-kanji-char{background:var(--color-surface)}
.reading-kanji-readings{font:12px/1.6 var(--font-japanese);color:var(--color-muted);overflow-wrap:anywhere}

/* Admin editor */
.admin-reading-panel{margin-bottom:20px}
.admin-reading-panel h2{margin-top:0}
.admin-reading-danger summary{cursor:pointer;color:var(--color-error);font-weight:500}
.admin-reading-danger p{color:var(--color-muted);font-size:13px}
.admin-reading-panel textarea.admin-reading-body{min-height:320px;font:16px/1.9 var(--font-japanese)}
.admin-reading-found{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;font-size:12px}
.admin-reading-found span{padding:3px 9px;border-radius:99px;background:var(--color-paper-2);color:var(--color-muted)}
.admin-reading-found .reading-level{background:var(--tone);color:#fff;font-weight:600}

@media (max-width:1023px){
  .reading-layout{grid-template-columns:minmax(0,1fr)}
  .reading-terms{position:static;max-height:min(70dvh,640px)}
}
@media (max-width:767px){
  .reading-sheet{padding:22px 18px}
  .reading-word{gap:10px;padding:8px}
  .reading-word-ja{max-width:7em}
  .reading-kanji-card{padding:8px}
  .reading-list{padding:4px}
  .reading-row{gap:10px;padding:14px 10px}
  .reading-row-excerpt{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}