.saved-page .topbar .sp-back {
  display: inline-flex;
  text-decoration: none;
  color: var(--text);
}

.saved-page .sp-back:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.sp-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.75rem 1.25rem 1.5rem;
}

/* Desktop matches the plot locator: full width, same rail and map height. */
@media (min-width: 900px) {
  .sp-layout {
    grid-template-columns: clamp(430px, 42vw, 580px) minmax(0, 1fr);
    align-items: start;
    max-width: none;
    padding-inline: 1.5rem;
    padding-bottom: 1rem;
  }

  /* The list card ends on the map's bottom edge: the plots scroll inside it
     and Delete All stays at its bottom. */
  .sp-panel {
    align-self: stretch;
    height: calc(100vh - 6.25rem);
    height: calc(100dvh - 6.25rem);
    min-height: 420px;
    overflow: hidden;
  }

  .sp-panel > .sp-card {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
  }

  .sp-panel .sp-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    /* Room for the selected item's outline. */
    padding: 2px;
    margin: -2px;
  }

  /* The "No plots saved yet" note sits under the intro; Delete All stays last. */
  .sp-panel .sp-list {
    order: 1;
  }

  .sp-panel .sp-actions {
    flex: 0 0 auto;
    order: 2;
  }

  .sp-map-card {
    position: sticky;
    top: 1rem;
    height: calc(100vh - 6.25rem);
    height: calc(100dvh - 6.25rem);
    min-height: 420px;
  }
}

.sp-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 0;
  overflow-y: auto;
}

.sp-card,
.sp-map-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.sp-card {
  padding: 1rem 1.1rem;
}

.sp-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.sp-card h2 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.sp-count {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.sp-note,
.sp-empty {
  margin: 0.4rem 0 0.6rem;
  color: var(--muted);
  font-size: 0.84rem;
}

.sp-empty a {
  color: var(--primary);
  font-weight: 600;
}

.sp-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.15rem 0.75rem;
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sp-item:hover,
.sp-item.is-selected {
  border-color: var(--primary);
  background: #f0fdfa;
}

/* Each card carries its own delete button and, right of it, its krooki image. */
.sp-row {
  position: relative;
}

.sp-row .sp-item {
  padding-right: 6.2rem;
}

.sp-item-delete,
.sp-item-krooki {
  position: absolute;
  top: 50%;
  right: 0.45rem;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  transform: translateY(-50%);
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
}

.sp-item-delete:hover,
.sp-item-delete:focus-visible {
  border-color: #fecaca;
  background: var(--red-soft);
  color: var(--red);
}

.sp-item-delete:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sp-item-delete {
  right: calc(0.45rem + 40px + 0.3rem);
}

.sp-item-krooki:hover,
.sp-item-krooki:focus-visible {
  border-color: #99f6e4;
  background: var(--primary-soft);
  color: var(--primary);
}

/* Older plots have no stored krooki: greyed, but still shows its tooltip. */
.sp-item-krooki.is-unavailable,
.sp-item-krooki.is-unavailable:hover,
.sp-item-krooki.is-unavailable:focus-visible {
  border-color: transparent;
  background: transparent;
  color: #94a3b8;
  opacity: 0.45;
  cursor: not-allowed;
}

.sp-no {
  grid-row: span 2;
  align-self: center;
  min-width: 2.4rem;
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.sp-title {
  overflow: hidden;
  font-size: 0.9rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-meta {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-code {
  margin: 0.4rem 0 0;
  padding: 0.65rem 0.75rem;
  overflow-x: auto;
  border-radius: var(--radius-sm);
  background: #0f172a;
  color: #e2e8f0;
  font: 0.76rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.sp-response {
  max-height: 320px;
}

.sp-map-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.sp-map {
  width: 100%;
  height: 100%;
  min-height: 320px;
}

.sp-label {
  border: 0;
  border-radius: 6px;
  background: var(--primary);
  box-shadow: none;
  color: #fff;
  font-weight: 800;
  padding: 1px 6px;
}

.sp-label::before {
  display: none;
}

/* Phones get a short intro, an icon on Delete all, and a foldable Query card. */
.sp-note-short,
.sp-danger-icon,
.sp-query-toggle {
  display: none;
}

@media (max-width: 899px) {
  /* styles.css locks the plot locator to one screen on phones; this page
     scrolls like a normal web page instead. */
  body.saved-page {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: visible;
    overscroll-behavior: auto;
  }

  /* Same side gutters as the plot locator's map on phones. The list card
     reaches the bottom of the screen even with few plots, so Delete All
     always sits at the bottom (like Confirm Coordinates). */
  .sp-layout {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    padding: 0.4rem 0.55rem 0.55rem;
  }

  .sp-layout > .sp-panel {
    flex: 1 0 auto;
  }

  .sp-panel > .sp-card {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
  }

  .sp-panel > .sp-card > * {
    flex-shrink: 0;
  }

  .sp-map-card {
    order: -1;
    height: 35vh;
    min-height: 240px;
  }

  .sp-map {
    min-height: 0;
  }

  .sp-panel {
    overflow: visible;
  }

  .sp-note-long {
    display: none;
  }

  .sp-note-short {
    display: inline;
  }

  /* Delete All stays pinned to the bottom of the screen while the list scrolls
     (like Confirm Coordinates); it takes over the card's bottom padding. */
  .sp-card .sp-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    order: 2; /* after the "No plots saved yet" note */
    margin: auto -1.1rem -1rem;
    padding: 0.6rem 1.1rem calc(1rem + env(safe-area-inset-bottom));
    border-top: 0;
    border-radius: 0 0 var(--radius) var(--radius);
    background: var(--surface);
  }

  .sp-card .sp-actions .sp-danger {
    color: var(--red);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 46px;
    border-color: #fecaca;
    font-size: 0.95rem;
    font-weight: 800;
  }

  .sp-danger-icon {
    display: block;
  }

  .sp-query-card .sp-card-head {
    align-items: center;
  }

  .sp-query-toggle {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 0.5rem;
    border: 0;
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
  }

  .sp-query-card:not(.is-open) .sp-query-body {
    display: none;
  }
}

.sp-actions {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

.sp-actions .sp-note {
  margin: 0.5rem 0 0;
}

.sp-danger {
  width: 100%;
  color: var(--red);
  border-color: #fecaca;
}

.sp-danger:hover:not(:disabled) {
  border-color: var(--red);
  background: var(--red-soft);
  color: var(--red);
}

.sp-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Destructive action in the in-page confirm popup. */
.dialog-actions .btn.sp-dialog-danger {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}

.dialog-actions .btn.sp-dialog-danger:hover {
  border-color: #991b1b;
  background: #991b1b;
}

/* Phones: expand button on the map (styled like the map's other buttons) and a
   full-screen map while expanded. */
.sp-expand-btn {
  display: none;
}

@media (max-width: 899px) {
  .sp-map-card {
    position: relative;
  }

  .sp-expand-btn {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 650;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #d8e4e2;
    border-radius: 12px;
    background: #ffffff;
    color: var(--primary);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    cursor: pointer;
  }

  body.sp-map-expanded {
    overflow: hidden;
  }

  body.sp-map-expanded .sp-map-card {
    position: fixed;
    inset: 0;
    z-index: 2000;
    height: auto;
    min-height: 0;
    border: 0;
    border-radius: 0;
  }

  body.sp-map-expanded .sp-map {
    height: 100%;
  }

  body.sp-map-expanded .map-credits {
    padding-bottom: calc(3px + env(safe-area-inset-bottom));
  }
}

/* Phones: the map keeps its size when a plot is tapped; the Navigate card
   (styles.css .map-nav) only shows while the map is expanded to full screen. */
@media (max-width: 899px) {
  body:not(.sp-map-expanded) #spNav {
    display: none;
  }
}

/* Krooki popup: as large as the screen allows, the whole image always visible. */
.sp-krooki-dialog {
  width: min(56rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 0.8rem;
}

.sp-krooki-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.sp-krooki-head .dialog-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-krooki-close {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.sp-krooki-close:hover,
.sp-krooki-close:focus-visible {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--text);
}

.sp-krooki-frame {
  display: grid;
  place-items: center;
  min-height: 8rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.sp-krooki-frame img {
  display: block;
  max-width: 100%;
  max-height: calc(100dvh - 7.5rem);
  object-fit: contain;
}

.sp-krooki-frame img[hidden] {
  display: none;
}

.sp-krooki-frame .dialog-body {
  margin: 0;
  padding: 1rem;
}

.sp-krooki-frame .dialog-body[hidden] {
  display: none;
}