/* HSK Mastery — Decks (spaced-repetition flashcards). Reuses .wrap / .nav / .btn /
   .eyebrow / .dash-head / .player-top from styles.css; everything new here. */

/* ---------- deck list ---------- */
/* Shelves by purpose. 38 decks in one flat grid hides the good ones as well as deleting them
   would; the server decides the groups and their order (HSK_DECK_GROUPS). */
.deck-shelves { display: flex; flex-direction: column; gap: 34px; }
.deck-shelf-head {
  display: flex; align-items: baseline; gap: 10px; margin: 0 0 2px;
  font-family: var(--serif-display); font-size: 21px; font-weight: 600;
  padding-bottom: 8px; border-bottom: 1px solid var(--hairline);
}
.deck-shelf-en { font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: var(--ink-faded); text-transform: uppercase; letter-spacing: .06em; }
.deck-shelf-n { margin-left: auto; font-family: var(--sans); font-size: 13px;
  font-weight: 600; color: var(--ink-whisper); }
.deck-shelf-note { margin: 0 0 14px; font-size: 13px; color: var(--ink-whisper); }
.deck-attrib { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.deck-attrib:hover { color: var(--accent); }

/* HSK sub-shelves. The level is DERIVED from a deck's cards (tools/build_deck_levels.py), never
   read off its name, so 场景 decks that never declared a level get one too. */
.deck-level + .deck-level { margin-top: 22px; }
.deck-level-head {
  display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px;
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faded);
}
.deck-level-head::after {
  content: ""; flex: 1; height: 1px; background: var(--hairline);
}
/* Sits beside the level, not after the rule — ::after is the flex item that eats the slack, so
   anything ordered past it lands against the far edge of the shelf. */
.deck-level-you {
  text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--accent);
}
.deck-fold-btn {
  margin-top: 20px; background: none; border: 1px solid var(--hairline); border-radius: 999px;
  padding: 7px 16px; cursor: pointer;
  font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink-faded);
}
.deck-fold-btn:hover { color: var(--ink); border-color: var(--ink-whisper); }
.deck-fold-btn::before { content: "▸ "; }
.deck-fold-btn[aria-expanded="true"]::before { content: "▾ "; }
.deck-fold > .deck-level:first-child { margin-top: 22px; }

.deck-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.deck-card {
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 18px 20px;
  cursor: pointer;
  text-align: left;
  font-family: var(--serif-body);
  transition: transform .12s ease, box-shadow .2s;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.deck-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(var(--shadow-rgb),0.10); }
.deck-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.deck-card-name { font-family: var(--serif-display); font-size: 19px; font-weight: 600; color: var(--ink); margin: 0; }
.deck-card-menu { background: none; border: none; color: var(--ink-whisper); font-size: 18px; cursor: pointer; padding: 2px 6px; line-height: 1; }
.deck-card-menu:hover { color: var(--ink); }
.deck-card-counts { display: flex; gap: 14px; font-size: 14px; }
.deck-count { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.deck-count::before { content: ""; width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.deck-count-new::before      { background: var(--hsk6); }
.deck-count-learning::before { background: var(--accent); }
.deck-count-due::before      { background: var(--correct); }
.deck-count-ready::before    { background: var(--ink-whisper); }
.deck-count-new      { color: var(--hsk6-text); }
.deck-count-learning { color: var(--accent); }
.deck-count-due       { color: var(--correct); }
.deck-count-ready    { color: var(--ink-whisper); }
.deck-card-level {
  align-self: flex-start; margin-top: -6px;
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faded);
  border: 1px solid var(--hairline); border-radius: 999px; padding: 2px 9px;
}
/* started / total. The counts above are all capped, so this is the only number on the tile that
   tells you how big the deck actually is. */
.deck-card-progress { display: flex; align-items: center; gap: 10px; margin-top: -4px; }
.deck-bar { flex: 1; height: 4px; border-radius: 999px; background: var(--hairline); overflow: hidden; }
.deck-bar span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.deck-bar-n { font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--ink-whisper);
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.deck-card-meta { font-size: 12px; color: var(--ink-whisper); }
/* Findable, not sold: a learner who wants the levers goes looking, and everyone else should not
   have a settings pitch above their decks. */
.deck-method-note { font-size: 13px; color: var(--ink-whisper); margin-top: 2px; }
.deck-method-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.deck-method-note a:hover { color: var(--accent); }

.deck-empty {
  max-width: 560px;
  padding: 40px 8px;
  text-align: center;
  margin: 20px auto;
}
.deck-empty-glyph {
  font-family: var(--han); font-size: 56px; color: var(--azure);
  width: 92px; height: 92px; line-height: 92px; margin: 0 auto 18px;
  border-radius: 50%; background: var(--paper-sunken);
}
.deck-empty h2 { font-family: var(--serif-display); font-size: 26px; margin: 0 0 12px; }
.deck-empty p { color: var(--ink-faded); font-size: 15px; margin: 0 0 10px; }
.deck-empty-note { font-size: 13px; color: var(--ink-whisper); font-style: italic; }
.deck-empty .btn { margin-top: 14px; }

/* ---------- review screen ---------- */
.review-layout { display: flex; gap: 24px; align-items: flex-start; }
.review-main { flex: 1; min-width: 0; }
.review-shell { display: flex; flex-direction: column; align-items: center; gap: 12px; }
/* The card is a real two-sided object. Both faces are always in the DOM,
   stacked in the same grid cell (so the card is as tall as its tallest side
   and never jumps on flip), and the card itself rotates. backface-visibility
   hides whichever side is facing away. */
.review-shell { perspective: 1600px; }
.review-card {
  position: relative;
  width: 100%; max-width: 560px; min-height: 320px;
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(var(--shadow-rgb),0.08);
  display: grid; align-items: center; justify-items: center;
  padding: 40px 28px;
  text-align: center;
  cursor: pointer;            /* the whole face is the flip target */
  user-select: none;
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .18s ease, border-color .18s ease;
}
.review-card.is-flipped { transform: rotateY(180deg); }
.review-card > .review-face { grid-area: 1 / 1; backface-visibility: hidden; }
.review-card > .review-back { transform: rotateY(180deg); }
/* The preview flag rides the front face only. */
.review-preview-flag { backface-visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .review-card { transition: box-shadow .18s ease, border-color .18s ease; }
}
.review-card:hover { box-shadow: 0 14px 36px rgba(var(--shadow-rgb),0.13); }
.review-card:focus-visible { outline: 2px solid var(--azure); outline-offset: 3px; }
.review-face { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; }
.review-hanzi { font-family: var(--han); font-size: clamp(52px, 12vw, 88px); line-height: 1.1; color: var(--ink); }
.review-hanzi-small { font-size: clamp(36px, 8vw, 56px); }
.review-meaning { font-size: 18px; color: var(--ink); max-width: 440px; }
.review-extra { font-size: 14px; color: var(--ink-faded); white-space: pre-wrap; max-width: 440px; }
/* The header ruby is the only pinyin surface (styles.css) — but 10.5px over a
   56px answer glyph is unreadable, so scale it to the card. */
.py-on .review-hanzi .hz[data-py]::before { font-size: 15px; margin-bottom: 2px; }
.review-hint { font-size: 12.5px; color: var(--ink-whisper); text-align: center; margin: 0; min-height: 18px; }
.review-preview-flag {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--hsk6-text); border: 1px solid var(--hairline);
  border-radius: 999px; padding: 3px 12px; background: var(--paper-sunken);
}
.preview-actions { display: flex; justify-content: center; margin-top: 20px; }

/* +1 XP tick, floating up off the card as a grade lands */
.xp-tick {
  position: absolute; top: 14px; right: 16px;
  font-family: var(--serif-body); font-weight: 700; font-size: 14px;
  color: var(--correct); pointer-events: none;
  animation: xp-float 1s ease-out forwards;
}
@keyframes xp-float {
  0%   { opacity: 0; transform: translateY(6px); }
  22%  { opacity: 1; transform: translateY(0); }
  70%  { opacity: 1; transform: translateY(-6px); }
  100% { opacity: 0; transform: translateY(-16px); }
}
@media (prefers-reduced-motion: reduce) {
  .xp-tick { animation: none; opacity: 1; }
}

/* stroke-order drawing — one animated glyph per character of the answer */
.review-glyphs { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.review-glyph-frame {
  width: 74px; height: 74px; border-radius: 10px; cursor: pointer;
  background: var(--paper-sunken); border: 1px solid var(--hairline);
  color: var(--ink); padding: 4px; transition: border-color .15s;
}
.review-glyph-frame:hover { border-color: var(--azure); }
.review-glyph-frame .cc-glyph { width: 100%; height: 100%; display: block; }

/* ---------- grading ---------- */
.grade-row {
  display: flex; justify-content: center; gap: 12px;
  margin-top: 20px; max-width: 560px; margin-left: auto; margin-right: auto;
}
.grade-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  flex: 1 1 0; max-width: 170px;
  padding: 14px 10px; border-radius: 12px; border: 1px solid var(--hairline);
  background: var(--paper-raised); cursor: pointer; font-family: var(--serif-body);
  transition: transform .1s ease, box-shadow .15s, border-color .15s;
}
.grade-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(var(--shadow-rgb),0.10); }
.grade-btn:active { transform: translateY(1px); }
.grade-label { font-weight: 700; font-size: 15px; }
.grade-ivl { font-size: 12px; color: var(--ink-whisper); }
.grade-btn kbd {
  font-family: var(--serif-body); font-size: 10.5px; color: var(--ink-whisper);
  border: 1px solid var(--hairline); border-bottom-width: 2px;
  border-radius: 4px; padding: 0 5px; margin-top: 3px; background: var(--paper-sunken);
}
body.hints-decks-off .grade-btn kbd,
body.keys-decks-off  .grade-btn kbd { display: none; }
/* Four buttons is the default (FSRS needs the difficulty signal); two is a preference and
   renders the same Again and Good, in the same places. */
.grade-row-4 { max-width: 680px; gap: 10px; }
.grade-row-4 .grade-btn { max-width: none; padding: 12px 8px; }
.grade-again .grade-label { color: var(--wrong); }
.grade-hard  .grade-label { color: var(--ink-faded); }
.grade-good  .grade-label { color: var(--correct); }
.grade-easy  .grade-label { color: var(--azure); }
.grade-again:hover { border-color: var(--wrong); }
.grade-hard:hover  { border-color: var(--ink-faded); }
.grade-good:hover  { border-color: var(--correct); }
.grade-easy:hover  { border-color: var(--azure); }
/* The interval is the point of the button, so it is not a footnote. */
.grade-row-4 .grade-ivl { font-size: 13px; font-variant-numeric: tabular-nums; }

.review-replay { font-size: 13px; margin-top: 10px; }
.review-media {
  display: block; max-width: 100%; max-height: 240px;
  margin: 10px auto 4px; border-radius: 8px; border: 1px solid var(--hairline);
}

/* ---------- import ---------- */
.dash-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.deck-import-status {
  margin: 0 0 18px; padding: 12px 14px; border-radius: 10px; font-size: 14px;
  border: 1px solid var(--hairline); background: var(--paper-sunken); color: var(--ink-faded);
  white-space: pre-line;
}
.deck-import-status.is-err { border-color: var(--wrong); background: rgba(var(--wrong-rgb), 0.06); color: var(--ink); }

/* ---------- backlog notice ---------- */
.deck-backlog { margin: 0 0 18px; display: grid; gap: 8px; }
.deck-backlog-msg {
  margin: 0; padding: 12px 14px; border-radius: 10px; font-size: 14px;
  border: 1px solid var(--hairline); background: var(--paper-sunken); color: var(--ink-faded);
}

/* ---------- deck options ---------- */
.deck-opts {
  border: 1px solid var(--hairline); border-radius: 14px; padding: 0;
  background: var(--paper-raised); color: var(--ink);
  width: min(620px, 94vw); max-height: 88vh;
}
.deck-opts::backdrop { background: rgba(var(--shadow-rgb), 0.45); }
.deck-opts-form { display: flex; flex-direction: column; max-height: 88vh; }
.deck-opts-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px 12px; border-bottom: 1px solid var(--hairline);
}
.deck-opts-head h2 { margin: 0; font-size: 18px; flex: 1 1 auto; }
.opts-tabs { display: flex; gap: 4px; padding: 10px 18px 0; }
.opts-tab {
  border: 1px solid transparent; border-bottom: 2px solid transparent;
  background: none; cursor: pointer; padding: 6px 12px; font-size: 14px;
  font-family: var(--serif-body); color: var(--ink-faded);
}
.opts-tab.on { color: var(--ink); border-bottom-color: var(--azure); font-weight: 700; }
.opts-pane { padding: 14px 18px 4px; overflow-y: auto; flex: 1 1 auto; }
.opts-row {
  display: flex; align-items: center; gap: 12px; margin: 0 0 4px;
  font-size: 14px;
}
.opts-label { flex: 1 1 auto; }
.opts-row input[type="number"], .opts-row input[type="text"], .opts-row select {
  flex: 0 0 auto; width: 168px; padding: 7px 9px; font-size: 14px;
  border: 1px solid var(--hairline); border-radius: 8px;
  background: var(--paper); color: var(--ink); font-family: var(--serif-body);
}
.opts-row-check { align-items: flex-start; }
.opts-row-check input { margin-top: 3px; flex: 0 0 auto; width: auto; }
.opts-note {
  margin: 0 0 16px; font-size: 12.5px; line-height: 1.5; color: var(--ink-whisper);
}
.opts-easy { border: 1px solid var(--hairline); border-radius: 10px; padding: 10px 12px; margin: 6px 0 16px; }
.opts-easy legend { font-size: 12.5px; color: var(--ink-faded); padding: 0 6px; }
.opts-easy-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 8px; }
.opts-easy-day { display: flex; flex-direction: column; gap: 3px; font-size: 11px; text-align: center; }
.opts-easy-day select { width: 100%; padding: 4px 2px; font-size: 11.5px;
  border: 1px solid var(--hairline); border-radius: 6px; background: var(--paper); color: var(--ink); }
.opts-fsrs { border-top: 1px solid var(--hairline); padding-top: 14px; margin-top: 4px; }
.opts-fsrs h3 { margin: 0 0 4px; font-size: 15px; }
.deck-opts-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 18px; border-top: 1px solid var(--hairline);
}
.deck-opts-foot .spacer { flex: 1 1 auto; }
.opts-danger { color: var(--wrong); }

.opts-stats h3 { margin: 14px 0 6px; font-size: 15px; }
.opts-stats h3:first-child { margin-top: 0; }
.opts-stat-list { list-style: none; margin: 0 0 10px; padding: 0; font-size: 14px; }
.opts-stat-list li { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid var(--hairline); }
.opts-stat-big { margin: 0 0 4px; font-size: 26px; font-weight: 700; }
.opts-stat-big small { font-size: 12.5px; font-weight: 400; color: var(--ink-whisper); display: block; }
.opts-forecast { display: grid; gap: 2px; margin-bottom: 10px; }
.opts-fc-row { display: grid; grid-template-columns: 44px 1fr 34px; align-items: center; gap: 6px; font-size: 11.5px; }
.opts-fc-day { color: var(--ink-whisper); text-align: right; }
.opts-fc-n { color: var(--ink-faded); font-variant-numeric: tabular-nums; }
.opts-bar { display: block; height: 9px; border-radius: 3px; background: var(--azure); min-width: 0; }
.opts-fc-row:first-child .opts-bar { background: var(--wrong); }

@media (max-width: 560px) {
  .opts-row { flex-direction: column; align-items: stretch; gap: 5px; }
  .opts-row input[type="number"], .opts-row input[type="text"], .opts-row select { width: 100%; }
  .opts-easy-grid { grid-template-columns: repeat(4, 1fr); }
  .grade-row-4 { gap: 6px; }
}

/* ---------- sidebar: browse the deck ---------- */
.review-sidebar-toggle { font-size: 13px; padding: 7px 13px; margin-left: auto; }
.review-sidebar-toggle.on { border-color: var(--azure); color: var(--azure); }
.review-sidebar {
  flex: 0 0 216px; order: -1;
  max-height: 72vh; display: flex; flex-direction: column;
  background: var(--paper-raised); border: 1px solid var(--hairline);
  border-radius: 12px; padding: 10px;
}
.rs-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: var(--ink-whisper); padding: 2px 4px 8px;
  border-bottom: 1px solid var(--hairline);
}
.rs-close { background: none; border: none; color: var(--ink-whisper); cursor: pointer; font-size: 13px; padding: 2px 4px; }
.rs-close:hover { color: var(--ink); }
.rs-list { list-style: none; margin: 6px 0 0; padding: 0; overflow-y: auto; flex: 1; }
.rs-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: none; border: none; border-radius: 7px; cursor: pointer;
  padding: 7px 8px; text-align: left; font-family: var(--serif-body);
  color: var(--ink-faded);
}
.rs-item:hover { background: var(--paper-sunken); color: var(--ink); }
.rs-item.on { background: var(--paper-sunken); color: var(--ink); box-shadow: inset 2px 0 0 var(--azure); }
.rs-hanzi { font-family: var(--han); font-size: 16px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; background: var(--ink-whisper); }
.rs-new .rs-dot        { background: var(--hsk6); }
.rs-learning .rs-dot,
.rs-relearning .rs-dot { background: var(--accent); }
.rs-review .rs-dot     { background: var(--correct); }
.rs-tag { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--azure); }
.rs-note { font-size: 11px; color: var(--ink-whisper); margin: 8px 4px 0; font-style: italic; }

/* Mobile: grade row is a fixed thumb bar; sidebar becomes a drawer. */
@media (max-width: 860px) {
  .review-layout { display: block; }
  .review-sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; width: 240px;
    max-height: none; border-radius: 0; border-left: none;
    box-shadow: 6px 0 26px rgba(var(--shadow-rgb),0.18);
  }
}
@media (max-width: 640px) {
  .grade-row {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    margin: 0; max-width: none; gap: 8px;
    background: var(--paper-raised);
    border-top: 1px solid var(--hairline);
    padding: 10px 8px calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 20px rgba(var(--shadow-rgb),0.10);
  }
  .review-shell { padding-bottom: 108px; }
  .grade-btn { padding: 8px 4px; border-radius: 8px; }
  .grade-btn kbd { display: none; }   /* no physical keyboard to hint at */
  /* Beats `.grade-row-4 .grade-btn` on specificity, not on source order. */
  .grade-row-4 .grade-btn { padding: 8px 3px; border-radius: 8px; }
  .grade-row-4 .grade-label { font-size: 13px; }
  .grade-row-4 .grade-ivl { font-size: 11.5px; }
  .review-card { min-height: 260px; padding: 32px 20px; }
  .review-media { max-height: 150px; }

  /* Three things are pinned to the phone's bottom edge here and only one of them can be:
     the grade row, the tab bar (learning-center.css, z:40, later in the document so it
     won a same-z stack) and the two floating widgets from partials/feedback.php (z:900,
     which put the Pinyin toggle over Easy). A review is a session with its own exit
     (← Decks), so the bar stands down for its duration and the widgets ride above the row. */
  body.in-review .lc-tabbar { display: none; }
  body.in-review .py-fab,
  body.in-review .vc-fb { bottom: calc(92px + env(safe-area-inset-bottom)); }
}

/* ---------- session end ---------- */
.done-shell { max-width: 480px; margin: 60px auto; text-align: center; }
.done-glyph {
  font-family: var(--han); font-size: 22px; letter-spacing: 0.14em;
  color: var(--on-accent); background: var(--accent-fill);
  display: inline-block; padding: 14px 26px; border-radius: 999px;
  box-shadow: 0 6px 20px rgba(var(--btn-glow-rgb),0.28);
  margin-bottom: 22px;
}
.done-shell h2 { font-family: var(--serif-display); font-size: 30px; margin: 0 0 12px; }
.done-shell p { color: var(--ink-faded); font-size: 16px; }
.done-actions { display: flex; gap: 12px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.done-actions-sub { margin-top: 12px; }

/* ══ 借力 lens (assets/deck-lens.js) ═══════════════════════════════════════
   Deleting deck-lens.js and this block removes the feature; nothing else
   depends on either. */
.deck-card-lens {
  display: block; width: 100%; margin-top: 10px; padding: 8px 10px;
  border: 1px dashed var(--hairline); border-radius: 9px; background: none;
  font: inherit; font-size: 12.5px; color: var(--ink-faded);
  text-align: left; cursor: pointer;
}
.deck-card-lens span { font-family: var(--han); color: var(--accent); margin-right: 6px; }
.deck-card-lens:hover { border-color: var(--accent); color: var(--ink); }

.deck-card-browse {
  display: block; width: 100%; margin-top: 10px; padding: 8px 10px;
  border: 1px dashed var(--hairline); border-radius: 9px; background: none;
  font: inherit; font-size: 12.5px; color: var(--ink-faded);
  text-align: left; cursor: pointer;
}
.deck-card-browse span { font-family: var(--han); color: var(--accent); margin-right: 6px; }
.deck-card-browse:hover { border-color: var(--accent); color: var(--ink); }

.done-elsewhere { margin: 18px auto 0; max-width: 460px; }
.done-elsewhere-lead { margin: 0 0 8px; font-size: 13px; color: var(--ink-faded); }
.done-elsewhere-list { display: grid; gap: 8px; }
.done-elsewhere-deck {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  width: 100%; padding: 10px 14px; font: inherit; text-align: left; cursor: pointer;
  border: 1px solid var(--hairline); border-radius: 10px;
  background: var(--paper-raised, var(--bg)); color: var(--ink);
}
.done-elsewhere-deck:hover { border-color: var(--accent); }
.ded-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ded-count { font-size: 12.5px; color: var(--ink-faded); white-space: nowrap; }

.rs-filter {
  width: calc(100% - 20px); margin: 0 10px 8px; padding: 6px 8px;
  font: inherit; font-size: 12.5px;
  border: 1px solid var(--hairline); border-radius: 8px;
  background: var(--paper-raised, var(--bg)); color: var(--ink);
}
.rs-filter:focus { outline: none; border-color: var(--accent); }
.rs-none { padding: 10px 12px; font-size: 12.5px; color: var(--ink-faded); list-style: none; }

.dl-ov {
  position: fixed; inset: 0; z-index: 1200; background: rgba(0,0,0,.55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 24px 16px; overflow: auto;
}
.dl-box {
  width: 100%; max-width: 720px; background: var(--paper-raised, var(--bg));
  border: 1px solid var(--hairline); border-radius: 16px; padding: 20px;
}
.dl-head { display: flex; align-items: flex-start; gap: 12px; }
.dl-head > div { flex: 1; min-width: 0; }
.dl-head h3 { margin: 0 0 6px; font-size: 18px; display: flex; align-items: center; gap: 9px; }
.dl-mark { font-family: var(--han); font-size: 14px; color: #fff; background: var(--accent);
  padding: 4px 8px; border-radius: 7px; flex: none; }
.dl-lede { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-faded); }
.dl-x { margin-left: auto; flex: none; border: 1px solid var(--hairline); border-radius: 8px;
  background: none; font: inherit; color: var(--ink-faded); cursor: pointer;
  width: 30px; height: 30px; line-height: 1; }
.dl-stage { position: relative; height: 280px; border-radius: 11px; overflow: hidden; margin-top: 16px; }
.dl-meter { height: 7px; border-radius: 4px; background: var(--hairline); margin-top: 12px; overflow: hidden; }
.dl-meter i { display: block; height: 100%; background: var(--accent); }
.dl-h { margin: 22px 0 3px; font-family: var(--han); font-size: 15px; }
.dl-sub { margin: 0 0 12px; font-size: 13px; color: var(--ink-faded); line-height: 1.6; }
.dl-gaps { display: flex; flex-direction: column; }
.dl-gap { display: flex; align-items: center; gap: 11px; padding: 9px 0;
  border-bottom: 1px solid var(--hairline); }
.dl-gap:last-child { border-bottom: none; }
.dl-gapc { font-family: var(--han); font-size: 27px; line-height: 1; flex: none; }
/* The gap list is now words, so the headword column has to hold 为什么 as well as 吗. */
.dl-gapc[data-len="2"] { font-size: 23px; }
.dl-gapc[data-len="3"] { font-size: 19px; }
.dl-gapc:not([data-len="1"]):not([data-len="2"]):not([data-len="3"]) { font-size: 16px; }
.dl-gapmeta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dl-gapmeta b { font-size: 12.5px; font-weight: 600; }
.dl-gapmeta small { font-size: 12px; color: var(--ink-faded); }
.dl-add { margin-left: auto; flex: none; font-size: 12.5px; padding: 6px 11px; }
.dl-add.on { color: var(--accent); border-color: var(--accent); }
.dl-foot { margin: 18px 0 0; font-size: 12px; color: var(--ink-whisper); line-height: 1.6; }
.dl-empty { margin: 0; font-size: 14px; color: var(--ink-faded); text-align: center; padding: 30px 0; }

/* Grade buckets: how the deck stands by LAST answer, and a way straight into each pile.
   The colours are the grade buttons' own, so "Again" means the same thing in both places. */
.review-buckets {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch;
  margin: 0 0 18px; padding: 0 2px;
}
.rb-cell {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  min-width: 76px; padding: 7px 12px; cursor: pointer;
  background: var(--paper-raised); border: 1px solid var(--hairline);
  border-radius: 10px; font-family: var(--serif-body); text-align: left;
  border-left-width: 3px;
}
.rb-cell:hover { border-color: var(--accent); }
.rb-cell.on { background: var(--paper-sunken); border-color: var(--accent); }
.rb-n { font-size: 18px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.rb-lab { font-size: 11.5px; color: var(--ink-whisper); }
.rb-again { border-left-color: var(--wrong); }
.rb-hard  { border-left-color: var(--gold); }
.rb-good  { border-left-color: var(--correct); }
.rb-easy  { border-left-color: var(--mastered); }
.rb-clear {
  align-self: center; margin-left: auto; padding: 7px 12px; cursor: pointer;
  background: none; border: 1px dashed var(--hairline); border-radius: 10px;
  font-family: var(--serif-body); font-size: 13px; color: var(--ink-faded);
}
.rb-clear:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 560px) {
  .rb-cell { flex: 1 1 0; min-width: 0; padding: 6px 8px; }
  .rb-clear { flex-basis: 100%; margin-left: 0; text-align: center; }
}