/* ── folder-card ─────────────────────────────────────────────────────────── */
.folder-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  transition: box-shadow var(--dur-fast) var(--ease-out);
  min-width: 0;
}

.folder-card:hover {
  box-shadow: var(--shadow-2);
}


.folder-card > .-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  user-select: none;
}

.folder-card.-expanded > .-header {
  background: var(--slate-50);
  border-bottom: 1px solid var(--border-soft);
}

/* Two-book visual */
.folder-card > .-header > .-books {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  flex-shrink: 0;
  height: 36px;
}

.folder-card > .-header > .-books > .-book {
  border-radius: 3px;
  box-shadow: inset -1px 0 0 rgba(0,0,0,0.12);
}

.folder-card > .-header > .-books > .-book.-b0 {
  width: 13px;
  height: 36px;
  background: var(--slate-600);
}

.folder-card > .-header > .-books > .-book.-b1 {
  width: 10px;
  height: 28px;
  background: var(--slate-300);
}

.folder-card > .-header > .-info {
  flex: 1;
  min-width: 0;
}

.folder-card > .-header > .-info > .-name {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  color: var(--slate-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.folder-card > .-header > .-info > .-count {
  font-size: var(--fs-13);
  color: var(--fg-3);
  margin-top: 2px;
}

.folder-card > .-header > .-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}

.folder-card > .-header > .-actions > .-more-wrap {
  position: relative;
}

.folder-card > .-header > .-actions > .-more-wrap > .-more-btn,
.folder-card > .-header > .-actions > .-chevron-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg-3);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.folder-card > .-header > .-actions > .-more-wrap > .-more-btn:hover,
.folder-card > .-header > .-actions > .-chevron-btn:hover {
  background: var(--slate-100);
  color: var(--fg-1);
}

/* chevron rotation */
.folder-card > .-header > .-actions > .-chevron-btn > .-icon {
  transition: transform var(--dur-med) var(--ease-out);
}

.folder-card.-expanded > .-header > .-actions > .-chevron-btn > .-icon {
  transform: rotate(180deg);
}

/* folder dropdown menu */
.folder-card .-folder-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 160px;
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-3);
  z-index: 20;
  padding: 4px;
}

.folder-card .-folder-dropdown[data-open] {
  display: block;
}

/* items list inside expanded folder */
.folder-card > .-items {
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.folder-card > .-items[hidden] {
  display: none;
}

.folder-card > .-items > .-empty-notice {
  padding: var(--space-4);
  font-size: var(--fs-13);
  color: var(--fg-3);
  text-align: center;
}

/* ── folder-item (compact studdy row inside folder) ─────────────────────── */
a.folder-item,
.folder-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--fg-1);
  transition: background var(--dur-fast) var(--ease-out);
  border: 1px solid var(--border-soft);
  background: var(--bg-surface);
  min-width: 0;
}

a.folder-item:hover,
.folder-item:hover {
  background: var(--slate-50);
  border-bottom: 1px solid var(--border-soft);
}

.folder-item > .-mini-spine {
  width: 28px;
  height: 40px;
  border-radius: 3px;
  flex-shrink: 0;
  box-shadow: inset -1px 0 0 rgba(0,0,0,0.12);
}

.folder-item > .-mini-spine.-c0 { background: #557C99; }
.folder-item > .-mini-spine.-c1 { background: #47677F; }
.folder-item > .-mini-spine.-c2 { background: #7FA0B8; }
.folder-item > .-mini-spine.-c3 { background: #334A5B; }
.folder-item > .-mini-spine.-c4 { background: #5B85A4; }
.folder-item > .-mini-spine.-c5 { background: #A4BBCC; }

.folder-item > .-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.folder-item > .-body > .-title {
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  color: var(--slate-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.folder-item > .-body > .-progress {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.folder-item > .-body > .-progress > .-track {
  flex: 1;
  height: 3px;
  background: var(--slate-100);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.folder-item > .-body > .-progress > .-track > .-fill {
  height: 100%;
  width: var(--fill-pct, 0%);
  background: var(--slate-500);
  border-radius: var(--radius-pill);
}

.folder-item > .-body > .-progress > .-pct {
  font-size: var(--fs-12);
  color: var(--fg-3);
  white-space: nowrap;
}

.folder-item > .-arrow {
  color: var(--fg-3);
  flex-shrink: 0;
}