/* The listing's sheets (sheet.js): the shared bottom-sheet / dialog frame
   and buttons, then the Where sheet's controls (Distance slider,
   switch, My rinks list, star toggle, place search), then the Saved
   searches sheet (filter-card, saved-search rows, "..." disclosure, inline
   rename) and the nested Save sheet.

   DESIGN.md > Component conventions > Where sheet and Saved searches;
   Brand Primitives > The filter-card gradient; Buttons; Border radius
   (16px top corners on the mobile bottom sheet); Motion (enter 250ms
   ease-out); Spacing > Touch targets (44px). Below 768px a bottom sheet
   with a grab handle over a boards-deep scrim at 50%; from 768px a
   centred dialog, except the Saved searches sheet, anchored under the
   avatar. White surface, light-surface tokens throughout; every text and
   background pair meets WCAG 2 AA (axe color-contrast runs on each sheet).
   Every z-index here stays below the red-line stripe's 1000. */

/* --- Frame ---------------------------------------------------------------- */

.sheet-layer {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
/* A layer hidden until opened (the nested Save sheet): the display above
   would otherwise beat the UA [hidden] rule. */
.sheet-layer[hidden] { display: none; }
/* The Save sheet opens on top of the Saved searches sheet. */
.save-search-layer { z-index: 310; }
.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 24, 48, 0.5); /* --color-boards-deep at 50% */
}
.sheet-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: calc(100dvh - 24px);
  background: var(--color-fresh-sheet);
  color: var(--color-text);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 32px rgba(12, 24, 48, 0.25);
  animation: sheet-enter-up 250ms ease-out;
}
.sheet-grab {
  flex-shrink: 0;
  width: 36px;
  height: 4px;
  margin: 8px auto 0;
  border-radius: var(--radius-pill);
  background: var(--color-blue-line);
}
.sheet-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-lg);
}
.sheet-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.sheet-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
}
.sheet-close:hover { background: var(--color-border-light); }
.sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--spacing-lg) var(--spacing-lg);
}
.sheet-foot {
  flex-shrink: 0;
  padding: var(--spacing-md) var(--spacing-lg);
  padding-bottom: max(var(--spacing-md), env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-border);
  background: var(--color-fresh-sheet);
}

/* Buttons on the sheet (DESIGN.md > Buttons). The primary apply uses the
   rink-blue fill: white on ice-blue is 2.77:1 and fails the axe
   color-contrast scan every sheet runs; rink-blue carries white at 5.93:1.
   Save (success) fills with money-green-text: white on it is 5.0:1, where
   white on money-green is 3.3:1 (Decisions log, 2026-09-30). Ghost is
   text-secondary on the white sheet (10.4:1). */
.btn-primary,
.btn-deep,
.btn-success,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  min-height: 44px;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: background-color 150ms ease-out;
}
.btn-primary {
  background: var(--color-rink-blue);
  border: 1px solid var(--color-rink-blue);
}
.btn-primary:hover { filter: brightness(0.9); }
.btn-deep {
  background: var(--color-boards-deep);
  border: 1px solid var(--color-boards-deep);
}
.btn-deep:hover { background: var(--color-boards); }
.btn-success {
  background: var(--color-money-green-text);
  border: 1px solid var(--color-money-green-text);
}
.btn-success:hover { filter: brightness(0.9); }
.btn-ghost {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}
.btn-ghost:hover { background: var(--color-border-light); }
/* A text button (Sign out): rink-blue on white, 5.93:1, 44px tall. */
.btn-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--spacing-xs);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-rink-blue);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
}
.btn-link:hover { text-decoration: underline; }
.sheet-apply {
  width: 100%;
  min-height: 48px;
}
.where-apply-label { font-variant-numeric: tabular-nums; }

.sheet-close:focus-visible,
.btn-primary:focus-visible,
.btn-deep:focus-visible,
.btn-success:focus-visible,
.btn-ghost:focus-visible,
.btn-link:focus-visible,
.where-result:focus-visible,
.rink-star:focus-visible,
.saved-search-apply:focus-visible,
.saved-search-more:focus-visible,
.saved-search-menu-item:focus-visible {
  outline: 2px solid var(--color-ice-blue);
  outline-offset: 2px;
}

/* Errors in a sheet: red-line text on the white sheet, 4.83:1. */
.sheet-error {
  margin-bottom: var(--spacing-md);
  padding: 10px 14px;
  border-left: 3px solid var(--color-red-line);
  border-radius: var(--radius-md);
  color: var(--color-red-line);
  font-size: var(--font-size-sm);
  font-weight: 600;
}
.field-error {
  margin-top: var(--spacing-xs);
  color: var(--color-red-line);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

/* Mobile: the page under an open sheet does not scroll. */
@media (max-width: 767px) {
  html.sheet-open,
  html.sheet-open body { overflow: hidden; }
}

@media (min-width: 768px) {
  .sheet-layer { align-items: center; padding: var(--spacing-xl); }
  .sheet-dialog {
    max-width: 440px;
    max-height: min(720px, calc(100vh - 48px));
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 48px rgba(12, 24, 48, 0.3);
    animation-name: sheet-enter-fade;
  }
  .sheet-grab { display: none; }
  .sheet-head { padding-top: var(--spacing-md); }
  /* The Saved searches sheet is a dialog anchored under the avatar (top
     right). The nested Save sheet is its own layer and stays centred. */
  .saved-searches-layer {
    align-items: flex-start;
    justify-content: flex-end;
    padding: 64px var(--spacing-xl) var(--spacing-xl);
  }
  .saved-searches-layer .sheet-dialog {
    max-height: min(720px, calc(100vh - 88px));
  }
}

@keyframes sheet-enter-up {
  from { transform: translateY(100%); }
  to { transform: none; }
}
@keyframes sheet-enter-fade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sheet-dialog { animation: none; }
}

/* --- Where sheet ------------------------------------------------------------ */

.where-locate-block { margin-bottom: var(--spacing-md); }
/* The IP guess's line above "Use my exact location": plain secondary text. */
.where-guess {
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.where-locate { width: 100%; }
.where-locate-icon { color: var(--color-ice-blue); flex-shrink: 0; }
/* An empty status line keeps its live region but takes no space. */
.where-located:empty { margin: 0; }
.where-located,
.where-locate-error {
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
}
.where-located { color: var(--color-rink-blue); }
.where-locate-error { color: var(--color-red-line); }

.where-search { margin-bottom: var(--spacing-lg); }
.where-search-input {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-fresh-sheet);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px; /* 16px keeps iOS Safari from zooming on focus */
}
.where-search-input::placeholder { color: var(--color-text-secondary); }
.where-search-input:focus {
  outline: none;
  border-color: var(--color-ice-blue);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}
.where-results-list {
  list-style: none;
  margin-top: var(--spacing-xs);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.where-results-list li + li { border-top: 1px solid var(--color-border); }
.where-result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  background: var(--color-fresh-sheet);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.where-result:hover { background: var(--color-border-light); }
.where-result-secondary {
  font-size: var(--font-size-sm);
  font-weight: 400;
  color: var(--color-text-secondary);
}
.where-results-empty {
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.where-section {
  border: 0;
  margin: 0 0 var(--spacing-lg);
  padding: 0;
  min-width: 0;
}
.where-label {
  display: block;
  margin-bottom: var(--spacing-sm);
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
}
.where-note,
.where-hint {
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* Distance: a native range over the eight steps (5 ... 100 km, Any).
   The label row holds the live readout; the ticks under the track are
   decorative (the input's aria-valuetext names the step). The filled
   part of the rail reads --where-distance-fill, which where-sheet.js
   sets from the slider's position (CSSOM, so no inline style attribute
   reaches the CSP). The input is 44px tall so the whole row is the hit
   area (Spacing > Touch targets). */
.where-distance-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-md);
}
.where-distance-head .where-label { margin-bottom: 0; }
.where-distance-readout {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-boards-deep);
  white-space: nowrap;
}
.where-distance-input {
  --thumb: 24px;
  display: block;
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.where-distance-input::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--color-ice-blue) var(--where-distance-fill, 0%), var(--color-blue-line) var(--where-distance-fill, 0%));
}
.where-distance-input::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--color-blue-line);
}
.where-distance-input::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--color-ice-blue);
}
.where-distance-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--thumb);
  height: var(--thumb);
  margin-top: -10px;
  border: 2px solid var(--color-ice-blue);
  border-radius: 50%;
  background: var(--color-fresh-sheet);
  box-shadow: 0 1px 3px rgba(12, 24, 48, 0.25);
}
.where-distance-input::-moz-range-thumb {
  width: var(--thumb);
  height: var(--thumb);
  box-sizing: border-box;
  border: 2px solid var(--color-ice-blue);
  border-radius: 50%;
  background: var(--color-fresh-sheet);
  box-shadow: 0 1px 3px rgba(12, 24, 48, 0.25);
}
.where-distance-input:focus-visible { outline: none; }
.where-distance-input:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--color-ice-blue);
  outline-offset: 2px;
}
.where-distance-input:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--color-ice-blue);
  outline-offset: 2px;
}
/* Greyed out while "Only these" is on: the position stays, the colour
   goes; the readout keeps --color-text-secondary so it still reads at
   AA contrast. */
.where-distance-input:disabled { cursor: not-allowed; }
.where-distance-input:disabled::-webkit-slider-runnable-track {
  background: var(--color-blue-line);
}
.where-distance-input:disabled::-moz-range-progress { background: var(--color-blue-line); }
.where-distance-input:disabled::-webkit-slider-thumb {
  border-color: var(--color-glass);
  box-shadow: none;
}
.where-distance-input:disabled::-moz-range-thumb {
  border-color: var(--color-glass);
  box-shadow: none;
}
.where-distance:has(.where-distance-input:disabled) .where-distance-readout {
  color: var(--color-text-secondary);
  font-weight: 500;
}
/* The ticks sit under the thumb's centre at each step: the thumb's
   centre runs from half a thumb in from the left to half a thumb in
   from the right. */
.where-distance-ticks {
  position: relative;
  height: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.where-distance-tick {
  position: absolute;
  top: 0;
  left: calc(12px + (100% - 24px) * var(--step) / 7);
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.where-distance-tick:nth-child(1) { --step: 0; }
.where-distance-tick:nth-child(2) { --step: 1; }
.where-distance-tick:nth-child(3) { --step: 2; }
.where-distance-tick:nth-child(4) { --step: 3; }
.where-distance-tick:nth-child(5) { --step: 4; }
.where-distance-tick:nth-child(6) { --step: 5; }
.where-distance-tick:nth-child(7) { --step: 6; }
.where-distance-tick:nth-child(8) { --step: 7; }
.where-distance-tick.is-current {
  color: var(--color-boards-deep);
  font-weight: 600;
}

/* My rinks: the label row with the "Only these" switch, then the list. */
.where-my-rinks-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
}
.where-my-rinks-head .where-label { margin-bottom: 0; }
.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  min-height: 44px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
}
.switch-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.switch-track {
  position: relative;
  width: 40px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--color-glass);
  transition: background-color 150ms ease-out;
  pointer-events: none;
}
.switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(12, 24, 48, 0.3);
  transition: transform 150ms ease-out;
}
.switch-text { pointer-events: none; }
.switch-input:checked + .switch-track { background: var(--color-rink-blue); }
.switch-input:checked + .switch-track::after { transform: translateX(16px); }
.switch-input:focus-visible + .switch-track {
  outline: 2px solid var(--color-ice-blue);
  outline-offset: 2px;
}
.switch-input:disabled { cursor: not-allowed; }
.switch-input:disabled + .switch-track { background: var(--color-blue-line); }
.switch-input:disabled ~ .switch-text { color: var(--color-text-secondary); }

.rink-list {
  list-style: none;
  margin-top: var(--spacing-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.rink-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--spacing-xs);
  min-height: 52px;
  padding: 0 var(--spacing-md) 0 var(--spacing-xs);
}
.rink-row + .rink-row { border-top: 1px solid var(--color-border); }
.rink-row-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.rink-row-name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rink-row-town {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.rink-row-distance {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
}

/* Star toggle: filled rink blue when starred, outline glass when not. */
.rink-star-slot {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}
.rink-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-glass);
  cursor: pointer;
}
.rink-star .rink-star-icon { fill: none; }
.rink-star[aria-pressed="true"] { color: var(--color-rink-blue); }
.rink-star[aria-pressed="true"] .rink-star-icon { fill: currentColor; }
.rink-star:hover { background: var(--color-border-light); }
.rink-star-error {
  max-width: 14rem;
  padding: 0 var(--spacing-xs) var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--color-red-line);
}

/* --- Saved searches sheet and Save sheet ------------------------------------- */

/* The filter-card brand primitive (DESIGN.md > Brand Primitives > 2): the
   current search at the top of the Saved searches sheet and the preview in
   the Save sheet. A dark card, so its text is light: #fff on the gradient
   is 10.4:1 at its lightest end (#1e3a8a), the eyebrow and "Saved as"
   line in band secondary text 7.0:1, and a chip's #fff on its 12% white
   fill 7.4:1. */
.filter-card {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--spacing-lg);
  padding: 18px 16px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, #0c1830 0%, #1e3a8a 100%);
  box-shadow: 0 8px 16px -4px rgba(12, 24, 48, 0.3);
  color: var(--color-band-text);
}
.filter-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-red-line);
  opacity: 0.85;
}
.filter-card-label {
  margin: 0 0 var(--spacing-xs);
  color: var(--color-band-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 1.5px;
  line-height: 1.4;
  text-transform: uppercase;
}
.filter-card-name {
  margin: 0 0 var(--spacing-md);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.filter-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.filter-card-chip {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-band-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
.filter-card-saved-as {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: var(--spacing-md) 0 0;
  color: var(--color-band-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 600;
}
.filter-card-saved-as svg { flex-shrink: 0; }
.filter-card-save { margin-top: var(--spacing-md); }

/* The list of saved searches: one bordered container, a 60px row each. */
.saved-search-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.saved-search-row { min-height: 60px; }
.saved-search-row + .saved-search-row { border-top: 1px solid var(--color-border-light); }
.saved-search-main {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  min-height: 60px;
  padding-right: var(--spacing-xs);
}
.saved-search-apply {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--spacing-md);
  min-width: 0;
  min-height: 44px;
  padding: var(--spacing-sm) 0 var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
}
.saved-search-apply:hover { text-decoration: none; }
.saved-search-apply:hover .saved-search-name { text-decoration: underline; }
/* Bookmark, not star (DESIGN.md > What this system rejects): an outline
   for every saved search, filled for the default. */
.saved-search-bookmark {
  flex-shrink: 0;
  color: var(--color-rink-blue);
  fill: none;
}
.saved-search-bookmark.is-filled { fill: currentColor; }
.saved-search-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}
.saved-search-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  min-width: 0;
}
.saved-search-name {
  min-width: 0;
  overflow: hidden;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* DESIGN.md > Session row > Tags: rink blue on accent-light, 5.2:1. */
.saved-search-tag {
  flex-shrink: 0;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  background: var(--color-accent-light);
  color: var(--color-rink-blue);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1.3;
}
/* One line, text-secondary on white, 10.4:1. */
.saved-search-summary {
  overflow: hidden;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The "..." disclosure toggle: a 44px square. */
.saved-search-more {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
}
.saved-search-more:hover,
.saved-search-more[aria-expanded="true"] { background: var(--color-border-light); }

/* The disclosed actions sit under the row's text (12px padding, 16px
   bookmark, 12px gap). No display here, so the hidden attribute hides it. */
.saved-search-menu {
  padding: 0 var(--spacing-sm) var(--spacing-sm) 40px;
}
.saved-search-menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 0 var(--spacing-md);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.saved-search-menu-item:hover { background: var(--color-border-light); }
/* Red-line text on white is 4.83:1 but 4.41:1 on the hover fill, so a
   destructive item's hover underlines instead of filling. */
.saved-search-menu-item.is-destructive { color: var(--color-red-line); }
.saved-search-menu-item.is-destructive:hover {
  background: transparent;
  text-decoration: underline;
}

/* Rows' controls suppress the mobile tap-highlight overlay and the
   text-selection flash (specs/api.yaml 2026-04-18 tap suppression). */
.saved-search-apply,
.saved-search-more,
.saved-search-menu-item {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Inline rename: the input, then Save name and Cancel. */
.saved-search-rename {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 0 var(--spacing-md) var(--spacing-md) 40px;
}
.saved-search-rename[hidden] { display: none; }
.saved-search-rename-input { flex: 1 1 100%; }

.saved-search-empty {
  margin: 0;
  padding: var(--spacing-md) 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
}

.saved-searches-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
}
.saved-searches-account {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

/* The Save sheet's form: Name label, field, error, default switch. */
.save-search-form { margin-top: var(--spacing-xs); }
.save-search-label {
  display: block;
  margin-bottom: var(--spacing-sm);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: 600;
}
.save-search-input,
.saved-search-rename-input {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-fresh-sheet);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px; /* 16px keeps iOS Safari from zooming on focus */
}
.save-search-input:focus,
.saved-search-rename-input:focus {
  outline: none;
  border-color: var(--color-ice-blue);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}
.save-search-input[aria-invalid="true"] { border-color: var(--color-red-line); }
.save-search-default {
  display: flex;
  margin-top: var(--spacing-md);
}