/* ============================================================
   vocab-decks.css — shared deck-manager (popover + list + detail).
   Used on /vocabulary (Decks tab + add-to-deck popover) and /decks.
   Theme-token based so light/dark track automatically.
   ============================================================ */

/* ── Add-to-deck popover ────────────────────────────────── */
.vdm-pop {
  position: absolute;
  z-index: 200;
  width: 248px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--bg, #fbf6ea);
  border: 1.5px solid var(--container-border, #d9cdb4);
  border-radius: 12px;
  box-shadow: 0 12px 30px -8px rgba(40, 30, 20, 0.3);
  padding: 10px;
}
.vdm-pop-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint, #7a6260);
  padding: 2px 4px 8px;
}
.vdm-pop-decks { display: flex; flex-direction: column; gap: 2px; }
.vdm-pop-deck,
.vdm-pop-folder-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 14px;
  color: var(--text, #1f1a1a);
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
}
@media (hover: hover) {
  .vdm-pop-deck:hover:not(:disabled),
  .vdm-pop-folder-row:hover { background: var(--accent-hover, rgba(179, 42, 42, 0.10)); }
}
.vdm-pop-deck:disabled { color: var(--text-faint, #7a6260); cursor: default; }
.vdm-pop-deck-name, .vdm-pop-folder-name { flex: 1; }
.vdm-pop-deck-check { color: var(--accent, #b32a2a); }
.vdm-pop-folder-count {
  font-size: 11px;
  color: var(--text-faint, #7a6260);
  background: var(--bg-outer, #f4ede0);
  border-radius: 999px;
  padding: 1px 7px;
}
.vdm-pop-chevron { transition: transform 0.15s; font-size: 11px; color: var(--text-faint, #7a6260); }
.vdm-pop-folder.is-expanded .vdm-pop-chevron { transform: rotate(90deg); }
.vdm-pop-folder-decks { display: none; padding-left: 14px; }
.vdm-pop-folder.is-expanded .vdm-pop-folder-decks { display: block; }
.vdm-pop-empty { font-size: 13px; color: var(--text-faint, #7a6260); padding: 8px 4px; }
.vdm-pop-newrow { display: flex; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line, rgba(31,26,26,.08)); }
.vdm-pop-newinput {
  flex: 1; min-width: 0; font-family: inherit; font-size: 13px;
  padding: 6px 9px; border: 1.5px solid var(--container-border, #d9cdb4);
  border-radius: 8px; background: var(--bg, #fbf6ea); color: var(--text, #1f1a1a);
}
.vdm-pop-newadd, .vdm-new-deck-btn, .vdm-new-folder-btn {
  font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 6px 12px; border-radius: 8px; cursor: pointer;
  background: var(--accent, #b32a2a); color: #fff; border: none;
  white-space: nowrap;
}

/* ── Deck list ──────────────────────────────────────────── */
.vdm-list { display: flex; flex-direction: column; gap: 12px; }
.vdm-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vdm-newrow { display: flex; gap: 6px; flex: 1; min-width: 200px; }
.vdm-new-deck-input {
  flex: 1; min-width: 0; font-family: inherit; font-size: 14px;
  padding: 8px 11px; border: 1.5px solid var(--container-border, #d9cdb4);
  border-radius: 9px; background: var(--bg, #fbf6ea); color: var(--text, #1f1a1a);
}
.vdm-new-folder-btn { background: var(--ink-fill, #4a4248); }
.vdm-settings-btn {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 9px; cursor: pointer; font-size: 17px; line-height: 1;
  background: transparent; color: var(--text-muted, #54403a);
  border: 1.5px solid var(--container-border, #d9cdb4);
}
@media (hover: hover) { .vdm-settings-btn:hover { border-color: var(--accent, #b32a2a); color: var(--accent, #b32a2a); } }

/* ── SRS settings ───────────────────────────────────────── */
.vdm-settings { display: flex; flex-direction: column; gap: 10px; }
.vdm-params-reset {
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 7px 13px; border-radius: 9px;
  background: transparent; color: var(--text-muted, #54403a);
  border: 1.5px solid var(--container-border, #d9cdb4);
}
@media (hover: hover) { .vdm-params-reset:hover { border-color: var(--red, #b1322a); color: var(--red, #b1322a); } }
.vdm-params-body { display: flex; flex-direction: column; gap: 18px; margin-top: 4px; }
.vdm-pgroup-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent, #b32a2a); margin: 0 0 8px;
}
.vdm-prows { display: flex; flex-direction: column; gap: 14px; }
.vdm-prow-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.vdm-plabel { font-size: 14px; font-weight: 600; color: var(--text, #1f1a1a); }
.vdm-pval {
  font-size: 13px; font-variant-numeric: tabular-nums; color: var(--accent, #b32a2a);
  background: var(--accent-bg, rgba(179,42,42,.07)); border-radius: 6px; padding: 1px 8px;
}
.vdm-pslider { width: 100%; margin: 6px 0 2px; accent-color: var(--accent, #b32a2a); }
.vdm-pselect {
  width: 100%; margin: 4px 0 2px; font-family: inherit; font-size: 14px;
  padding: 7px 10px; border-radius: 8px;
  border: 1.5px solid var(--container-border, #d9cdb4);
  background: var(--bg, #fbf6ea); color: var(--text, #1f1a1a);
}
.vdm-pdesc { font-size: 12px; color: var(--text-faint, #7a6260); line-height: 1.4; }

.vdm-decks { display: flex; flex-direction: column; gap: 6px; }
.vdm-empty { padding: 28px 12px; text-align: center; color: var(--text-faint, #7a6260); font-size: 14px; }

.vdm-deck {
  display: flex; align-items: stretch; gap: 0;
  border: 1.5px solid var(--container-border, #d9cdb4);
  border-radius: 11px; background: var(--bg, #fbf6ea); overflow: hidden;
}
.vdm-deck-open {
  flex: 1; min-width: 0; text-align: left; font-family: inherit;
  background: transparent; border: none; cursor: pointer;
  padding: 11px 14px; display: flex; flex-direction: column; gap: 5px;
}
@media (hover: hover) { .vdm-deck-open:hover { background: var(--accent-hover, rgba(179, 42, 42, 0.08)); } }
.vdm-deck-name { font-size: 15px; font-weight: 600; color: var(--text, #1f1a1a); }
.vdm-deck-meta { font-size: 12px; color: var(--text-faint, #7a6260); }
.vdm-deck-meta b { color: var(--accent, #b32a2a); font-weight: 700; }
.vdm-prog { height: 4px; border-radius: 999px; background: var(--line, rgba(31,26,26,.10)); overflow: hidden; }
.vdm-prog-fill { height: 100%; background: var(--accent, #b32a2a); border-radius: 999px; }
.vdm-deck-del, .vdm-folder-del {
  flex: 0 0 auto; width: 38px; border: none; background: transparent;
  color: var(--text-faint, #7a6260); font-size: 20px; line-height: 1; cursor: pointer;
}
@media (hover: hover) { .vdm-deck-del:hover, .vdm-folder-del:hover { color: var(--accent, #b32a2a); background: var(--accent-hover, rgba(179,42,42,.08)); } }

.vdm-folder { border: 1.5px solid var(--container-border, #d9cdb4); border-radius: 11px; overflow: hidden; }
.vdm-folder-row { display: flex; align-items: stretch; background: var(--bg-outer, #f4ede0); }
.vdm-folder-toggle {
  flex: 1; display: flex; align-items: center; gap: 8px;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--text, #1f1a1a);
  background: transparent; border: none; cursor: pointer; padding: 10px 12px; text-align: left;
}
.vdm-chevron { font-size: 11px; color: var(--text-faint, #7a6260); transition: transform 0.15s; }
.vdm-folder.is-open .vdm-chevron { transform: rotate(90deg); }
.vdm-folder-name { flex: 1; }
.vdm-folder-count { font-size: 11px; color: var(--text-faint, #7a6260); background: var(--bg, #fbf6ea); border-radius: 999px; padding: 1px 7px; }
.vdm-folder-decks { display: none; padding: 6px; flex-direction: column; gap: 6px; }
.vdm-folder.is-open .vdm-folder-decks { display: flex; }

/* ── Deck detail ────────────────────────────────────────── */
.vdm-detail { display: flex; flex-direction: column; gap: 10px; }
.vdm-back {
  font-family: inherit; font-size: 14px; color: var(--text-muted, #54403a);
  background: transparent; border: none; cursor: pointer; padding: 4px 0; align-self: flex-start;
}
.vdm-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vdm-detail-name { font-size: 22px; font-weight: 700; color: var(--text, #1f1a1a); margin: 0; }
.vdm-detail-actions { display: flex; gap: 8px; }
.vdm-rename {
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 7px 13px; border-radius: 9px;
  background: transparent; color: var(--text-muted, #54403a);
  border: 1.5px solid var(--container-border, #d9cdb4);
}
.vdm-study {
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  padding: 7px 15px; border-radius: 9px; border: none;
  background: var(--accent, #b32a2a); color: #fff;
}
.vdm-study:disabled { opacity: 0.5; cursor: default; }
.vdm-detail-meta { font-size: 12px; color: var(--text-faint, #7a6260); }

/* Exercise picker — Study / Match (/ Crossword). */
.vdm-exercises { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 6px; }
.vdm-ex {
  flex: 1 1 140px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  font-family: inherit; cursor: pointer; text-align: left;
  padding: 12px 16px; border-radius: 12px;
  border: 1.5px solid var(--container-border, #d9cdb4);
  background: var(--bg, #fbf6ea); color: var(--text, #1f1a1a);
}
.vdm-ex-study { border-color: var(--accent, #b32a2a); background: var(--accent, #b32a2a); color: #fff; }
@media (hover: hover) { .vdm-ex:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px -4px rgba(40,30,20,.25); } }
.vdm-ex:disabled { opacity: 0.5; cursor: default; }
.vdm-ex-name { font-size: 15px; font-weight: 700; }
.vdm-ex-sub { font-size: 12px; opacity: 0.8; }
.vdm-cards { display: flex; flex-direction: column; gap: 1px; margin-top: 4px; }
.vdm-card {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center;
  padding: 9px 4px; border-bottom: 1px solid var(--line, rgba(31,26,26,.07));
}
.vdm-card-word { font-family: 'Klee One', 'Noto Sans JP', serif; font-size: 16px; font-weight: 600; color: var(--text, #1f1a1a); }
.vdm-card-sub { font-size: 13px; color: var(--text-faint, #7a6260); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vdm-card-due { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.vdm-card-due.due-now { color: var(--accent, #b32a2a); background: var(--accent-bg, rgba(179,42,42,.08)); }
.vdm-card-due.overdue { color: #fff; background: var(--accent, #b32a2a); }
.vdm-card-due.future { color: var(--text-faint, #7a6260); background: var(--bg-outer, #f4ede0); }
.vdm-card-del { border: none; background: transparent; color: var(--text-faint, #7a6260); font-size: 18px; cursor: pointer; line-height: 1; }
@media (hover: hover) { .vdm-card-del:hover { color: var(--accent, #b32a2a); } }

/* The deck-manager home wrapper (used on /decks + the /kanji-recall set
   manager). Fills the content column to align with the header + hero card,
   matching the rest of the site (no narrower inset). */
.vocab-decks-pane { margin: 0 auto; }
/* Inside the ad rail's main column (a column flexbox), the `margin:0 auto`
   above makes the pane a flex item with auto cross-axis margins — which
   overrides stretch and centers it at content width. Reset to margin:0 so it
   fills the column and left-aligns, matching the grammar lesson list scale. */
.layout-with-rail__main .vocab-decks-pane { margin: 0; width: 100%; }

/* "Manage decks & study →" link in the library search row. */
.vocab-decks-link {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent, #b32a2a);
  text-decoration: none;
  white-space: nowrap;
}
@media (hover: hover) { .vocab-decks-link:hover { text-decoration: underline; } }

/* In-deck pip on the library "+" buttons. */
.vocab-add-btn {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px;
  border: 1.5px solid var(--container-border, #d9cdb4);
  background: var(--bg-outer, #f4ede0); color: var(--text-muted, #54403a);
  font-size: 18px; line-height: 1; cursor: pointer; padding: 0;
}
@media (hover: hover) { .vocab-add-btn:hover { border-color: var(--accent, #b32a2a); color: var(--accent, #b32a2a); } }
.vocab-add-btn.in-deck { background: var(--accent, #b32a2a); color: #fff; border-color: var(--accent, #b32a2a); }
.vocab-detail-add {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 9px 16px;
  border-radius: 10px;
  background: var(--accent-bg, rgba(179, 42, 42, 0.07));
  color: var(--accent, #b32a2a);
  border: 1.5px solid var(--accent-border, rgba(179, 42, 42, 0.16));
}
.vocab-detail-add.in-deck { background: var(--accent, #b32a2a); color: #fff; border-color: var(--accent, #b32a2a); }
@media (hover: hover) { .vocab-detail-add:hover { background: var(--accent-hover, rgba(179, 42, 42, 0.10)); } }