/* ============================================================
   Manzar — "Save to list" popover (save-popover.js). Desktop:
   a panel anchored to the clicked +List button (row-menu style).
   ≤600px: a bottom sheet (the botnav-sheet pattern).
   z-index ladder: botnav 70 < sheets 90 < save-pop 95 < toasts 100.
   ============================================================ */

.save-pop { position: absolute; z-index: 95; }
.save-pop[hidden] { display: none; }
.save-pop__backdrop { display: none; }

.save-pop__panel {
  width: 320px;
  max-width: calc(100vw - 16px);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--surface-raised);
  border: var(--bw-hair) solid var(--border-default);
  border-radius: var(--radius-control-lg);
  box-shadow: var(--shadow-pop);
}

.save-pop__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0 var(--space-1);
}
.save-pop__heading {
  font-family: var(--font-ui);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
}
.save-pop__close {
  display: none;                 /* mobile-sheet affordance only */
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--text-faint);
  cursor: pointer;
  padding: 0 var(--space-1);
}

.save-pop__rows {
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.save-pop__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-1);
  border-radius: var(--radius-control);
}
.save-pop__row:hover { background: var(--accent-tint-weak); }
.save-pop__pick {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--fs-body-sm);
  color: var(--text-strong);
}
.save-pop__pick input { accent-color: var(--accent); flex-shrink: 0; }
.save-pop__title {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.save-pop__count {
  flex-shrink: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-caption);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.save-pop__tools { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; }
.save-pop__tools a,
.save-pop__tools button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 0;
  background: transparent;
  border-radius: var(--radius-control);
  color: var(--text-faint);
  cursor: pointer;
}
.save-pop__tools svg { width: 15px; height: 15px; }
.save-pop__tools a:hover,
.save-pop__tools button:hover { color: var(--accent); background: var(--surface-fill); }

.save-pop__hint {
  margin: 0;
  padding: 0 var(--space-1);
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
  line-height: var(--lh-body);
}
.save-pop__signin {
  align-self: flex-start;
  margin: var(--space-2) var(--space-1) var(--space-1);
  padding: var(--space-2) var(--space-4);
  background: var(--accent);
  color: var(--text-on-accent);
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
}
.save-pop__retry {
  align-self: flex-start;
  margin: 0 var(--space-1);
  padding: var(--space-1) var(--space-3);
  border: var(--bw-hair) solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  font: inherit;
  font-size: var(--fs-body-sm);
  color: var(--text-strong);
  cursor: pointer;
}

.save-pop__new { display: flex; gap: var(--space-2); }
.save-pop__new input {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: var(--bw-hair) solid var(--border-default);
  border-radius: var(--radius-control);
  background: var(--surface-card);
  font: inherit;
  font-size: var(--fs-body-sm);
  color: var(--text-strong);
}
.save-pop__new input:focus { outline: none; border-color: var(--accent); }
.save-pop__new button {
  flex-shrink: 0;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-control);
  background: var(--accent);
  color: var(--text-on-accent);
  font-family: var(--font-ui);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
}
.save-pop__new button:disabled { opacity: 0.6; cursor: default; }

.save-pop__status {
  margin: 0;
  padding: 0 var(--space-1);
  min-height: 1em;
  font-family: var(--font-ui);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}
.save-pop__status.is-error { color: var(--danger); }
.save-pop__status:empty { display: none; }

/* --- ≤600px: bottom sheet (botnav-sheet pattern) --- */
@media (max-width: 600px) {
  .save-pop.is-sheet { position: fixed; inset: 0; }
  .save-pop.is-sheet .save-pop__backdrop {
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(40, 42, 47, 0.45);
  }
  .save-pop.is-sheet .save-pop__panel {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    width: auto;
    max-width: none;
    border: 0;
    border-radius: 16px 16px 0 0;
    padding: var(--space-4) var(--space-4) calc(16px + env(safe-area-inset-bottom));
    box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.18);
    background: var(--surface-card);
  }
  .save-pop.is-sheet .save-pop__close { display: inline-flex; }
  .save-pop.is-sheet .save-pop__rows { max-height: 50vh; }
}