/* ============================================================
   kanji-sets.css — user kanji recall sets: add-to-set popover,
   set-list manager, and the library "+" button. Theme-token based.
   Used on /kanji (library + buttons + popover) and /kanji-recall.
   ============================================================ */

/* ── Library "+" add-to-set button (per kanji row) ──────── */
.kanji-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) { .kanji-add-btn:hover { border-color: var(--accent, #b32a2a); color: var(--accent, #b32a2a); } }
.kanji-add-btn.in-set { background: var(--accent, #b32a2a); color: #fff; border-color: var(--accent, #b32a2a); }

/* ── Add-to-set popover ─────────────────────────────────── */
.ks-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;
}
.ks-pop-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-faint, #7a6260); padding: 2px 4px 8px;
}
.ks-pop-sets { display: flex; flex-direction: column; gap: 2px; }
.ks-pop-set {
  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) { .ks-pop-set:hover:not(:disabled) { background: var(--accent-hover, rgba(179, 42, 42, 0.10)); } }
.ks-pop-set:disabled { color: var(--text-faint, #7a6260); cursor: default; }
.ks-pop-set-name { flex: 1; }
.ks-pop-set-count { font-size: 11px; color: var(--text-faint, #7a6260); background: var(--bg-outer, #f4ede0); border-radius: 999px; padding: 1px 7px; }
.ks-pop-check { color: var(--accent, #b32a2a); }
.ks-pop-empty { font-size: 13px; color: var(--text-faint, #7a6260); padding: 8px 4px; }
.ks-pop-newrow { display: flex; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line, rgba(31,26,26,.08)); }
.ks-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);
}
.ks-pop-newadd, .ks-new-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;
}

/* ── Set list manager ───────────────────────────────────── */
.ks-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.ks-new-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);
}
.ks-sets { display: flex; flex-direction: column; gap: 8px; }
.ks-empty { padding: 28px 12px; text-align: center; color: var(--text-faint, #7a6260); font-size: 14px; }
.ks-empty a { color: var(--accent, #b32a2a); }

.ks-set {
  display: flex; align-items: stretch;
  border: 1.5px solid var(--container-border, #d9cdb4); border-radius: 11px;
  background: var(--bg, #fbf6ea); overflow: hidden;
}
.ks-set-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: 4px;
}
.ks-set-open:disabled { cursor: default; opacity: 0.6; }
@media (hover: hover) { .ks-set-open:not(:disabled):hover { background: var(--accent-hover, rgba(179, 42, 42, 0.08)); } }
.ks-set-name { font-size: 15px; font-weight: 600; color: var(--text, #1f1a1a); }
.ks-set-meta { font-size: 12px; color: var(--text-faint, #7a6260); }
.ks-set-chars {
  font-family: 'Klee One', 'Noto Sans JP', serif; font-size: 16px;
  color: var(--text-muted, #54403a); letter-spacing: 0.04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ks-set-rename, .ks-set-del {
  flex: 0 0 auto; width: 36px; border: none; background: transparent;
  color: var(--text-faint, #7a6260); font-size: 16px; line-height: 1; cursor: pointer;
}
.ks-set-del { font-size: 20px; }
@media (hover: hover) {
  .ks-set-rename:hover, .ks-set-del:hover { color: var(--accent, #b32a2a); background: var(--accent-hover, rgba(179,42,42,.08)); }
}