/* Saved-list interactions: scoped to the picker and list-management pages. */
.saved-list-picker[hidden],
.saved-list-picker__options[hidden],
.saved-list-picker__feedback[hidden] { display: none !important; }

.saved-list-picker {
  position: fixed;
  z-index: 110;
  width: min(23rem, calc(100vw - 1rem));
  max-height: min(80vh, 32rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.125rem;
  border: 1px solid hsl(var(--border));
  border-radius: .75rem;
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  box-shadow: 0 16px 45px hsl(var(--foreground) / .2);
}

.saved-list-picker__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: 1rem;
}
.saved-list-picker__header h2 {
  margin: 0;
  font-size: 1.375rem;
  font-family: var(--font-heading, Georgia, serif);
  line-height: 1.3;
}
.saved-list-picker__artwork {
  margin: .25rem 0 0;
  color: hsl(var(--muted-foreground));
  font-size: .875rem;
}
.saved-list-picker__close {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border: 1px solid hsl(var(--border));
  border-radius: .35rem;
  font-size: 1.25rem;
  line-height: 1;
}
.saved-list-picker__label {
  display: block;
  margin-bottom: .5rem;
  font-weight: 500;
}
.saved-list-picker__input {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  padding: .625rem .75rem;
  border: 1px solid hsl(var(--border));
  border-radius: .4rem;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}
.saved-list-picker__input[aria-expanded="true"] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.saved-list-picker__options {
  max-height: 12rem;
  overflow-y: auto;
  border: 1px solid hsl(var(--border));
  border-top: 0;
  border-radius: 0 0 .4rem .4rem;
  background: hsl(var(--card));
}
.saved-list-picker__option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .65rem;
  width: 100%;
  padding: .7rem .75rem;
  text-align: left;
  border-bottom: 1px solid hsl(var(--border));
  font-size: .9rem;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.saved-list-picker__option:last-child { border-bottom: 0; }
.saved-list-picker__option:hover,
.saved-list-picker__option.is-active { background: hsl(var(--accent) / .12); }
.saved-list-picker__option-status {
  flex: 0 0 auto;
  color: hsl(var(--muted-foreground));
  font-size: .75rem;
}
.saved-list-picker__option.is-create {
  color: hsl(var(--primary));
  font-weight: 600;
}
.saved-list-picker__feedback {
  margin-top: .75rem;
  font-size: .875rem;
}
.saved-list-picker__feedback.is-error { color: hsl(var(--destructive)); }
.saved-list-picker__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  margin-top: 1rem;
}
.saved-list-picker__actions .btn {
  min-width: 8rem;
  justify-content: center;
}
.saved-list-picker__fallback {
  text-decoration: underline;
  text-underline-offset: .18rem;
  font-size: .8rem;
  color: hsl(var(--muted-foreground));
}

.lists-page .lists-create-card {
  gap: 1rem;
}
.lists-page .lists-create-card input,
.lists-page .lists-item-card input {
  min-height: 2.75rem;
}
.lists-page .lists-create-card .btn,
.lists-page .lists-item-card form .btn {
  margin-top: .75rem;
}
.lists-page .lists-item-card .saved-list-open-action {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  text-decoration: none;
}
.lists-page .lists-item-card .saved-list-open-action:focus-visible {
  outline-offset: 3px;
}
.lists-page .lists-item-card .saved-list-name-link {
  text-decoration: underline;
  text-decoration-color: hsl(var(--primary) / .45);
  text-underline-offset: .24rem;
}
.lists-page .lists-item-card .saved-list-name-link:hover {
  text-decoration-color: hsl(var(--primary));
}
.saved-list-add-fallback__create .btn {
  display: inline-flex;
  margin-top: 1rem;
}
.saved-list-add-fallback__create input {
  display: block;
  min-height: 2.75rem;
  width: 100%;
  max-width: 25rem;
  margin-top: .5rem;
}
@media (min-width: 640px) {
  .lists-page .lists-create-card .btn,
  .lists-page .lists-item-card form .btn {
    margin-top: 0;
  }
}
@media (max-width: 639px) {
  .saved-list-picker { max-height: calc(100dvh - 1rem); }
  .saved-list-picker__actions .btn { width: 100%; }
  .saved-list-picker__fallback { order: 2; }
}