/* Search and Saved (P2.22 step 6, docs/design.md "Search" and "Saved").

   Search is what the Stop tab shows before a stop is picked: on phones a full
   screen of its own (a back button, the field, a count, the results), from
   600 px the same content inside the panel under the navigation card.
   Saved is the lists of pinned stops, recently viewed stops and saved
   journeys: full screen under the navigation pill on phones, in the panel
   from 600 px.

   Both views set no layout of their own: ui.js's setMode() puts the mode on
   #sidebar as data-mode, and #sidebar has .stop-board-open once a stop is
   picked, so "search" is [data-mode="stop"]:not(.stop-board-open). One
   markup, two layouts, no JS switch (the same idea as shell.css).

   The favourites lists (.fav-*) are shared with the stop search's idle
   screen and the planner's saved journeys, so they are drawn once, here. */

/* Every rule here is for the Search and Saved views themselves. The ride
   sheet and the bus sheet take the same #sidebar over without changing its
   data-mode (the mode underneath comes back when they close), so each selector
   says :not(.ride-open):not(.vehicle-open):
   otherwise a ride opened from the pill while Search or Saved was the last
   view would be full screen over the navigation (review round 2). */

/* The generic header ("Stop departures" and its ×) isn't part of either view. */
#sidebar[data-mode="stop"]:not(.ride-open):not(.vehicle-open):not(.stop-board-open) .sb-header,
#sidebar[data-mode="favourites"]:not(.ride-open):not(.vehicle-open) .sb-header { display: none; }

/* ── Phones: Search is full screen, Saved fills the screen under the pill ── */
@media (max-width: 599.98px) {
  #sidebar.open[data-mode="stop"]:not(.ride-open):not(.vehicle-open):not(.stop-board-open),
  #sidebar.open[data-mode="favourites"]:not(.ride-open):not(.vehicle-open) {
    top: 0; height: 100% !important; max-height: none;
    border-radius: 0; box-shadow: none;
  }
  /* Search covers the navigation (its back button is the way out); Saved
     sits under it, so the pill floats above the lists. */
  #sidebar.open[data-mode="stop"]:not(.ride-open):not(.vehicle-open):not(.stop-board-open) { z-index: 1100; }
  #sidebar.open[data-mode="favourites"]:not(.ride-open):not(.vehicle-open) { z-index: 999; }
  #sidebar.open[data-mode="stop"]:not(.ride-open):not(.vehicle-open):not(.stop-board-open) .sheet-handle,
  #sidebar.open[data-mode="favourites"]:not(.ride-open):not(.vehicle-open) .sheet-handle { display: none; }
  #sidebar[data-mode="favourites"]:not(.ride-open):not(.vehicle-open) .sb-body { padding: 80px 16px 16px;   /* the title ~16px under the pill (the board has ~4px) */ }
}
@media (min-width: 600px) {
  #sidebar[data-mode="favourites"]:not(.ride-open):not(.vehicle-open) .sb-body { padding: 24px var(--panel-content-x) 16px; }
}
#sidebar[data-mode="stop"]:not(.ride-open):not(.vehicle-open):not(.stop-board-open) .sb-body { padding: 0; }
/* From 600px Search keeps the panel's gutter like every other view; its own
   16px insets (the field, the count, the idle text) then land on the shared
   content line, and its rows start on it too (below). */
@media (min-width: 600px) {
  #sidebar[data-mode="stop"]:not(.ride-open):not(.vehicle-open):not(.stop-board-open) .sb-body { padding: 0 var(--sb-gutter); }
}

/* ── Search ──────────────────────────────────────────────────────────────── */
.search-top {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
}
@media (min-width: 600px) { .search-top { padding: 16px var(--view-inset) 0; } }
.search-back { display: inline-flex; }          /* phones: the way out */
@media (min-width: 600px) { .search-back { display: none; } }   /* the tabs are above */

.search-field { position: relative; flex: 1; min-width: 0; }
.search-glass {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--ink-muted); pointer-events: none;
}
.stop-search-input {
  width: 100%; height: 44px; box-sizing: border-box;
  padding: 0 44px 0 36px;
  border: 1.5px solid transparent; border-radius: var(--radius-button);
  background: var(--surface-raised); color: var(--ink);
  font-size: 15px; font-weight: 600; outline: none;
  -webkit-appearance: none; appearance: none;
}
.stop-search-input::placeholder { color: var(--ink-muted); font-weight: 400; }
.stop-search-input:focus { border-color: var(--navy); }
body.dark .stop-search-input:focus { border-color: #4a7fbf; }
.stop-search-input::-webkit-search-cancel-button { display: none; }
/* The clear button: 44x44, at the field's right edge. */
.search-clear {
  position: absolute; right: 0; top: 0; width: 44px; height: 44px;
  border: none; background: transparent; cursor: pointer;
  color: var(--ink-muted); font-size: 22px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.search-clear[hidden] { display: none; }
.search-clear:hover { color: var(--ink); }

.search-count {
  padding: 8px 16px; min-height: 16px;
  font-size: 12px; font-weight: 600; color: var(--ink-secondary);
}
.search-count:empty { padding: 0; min-height: 8px; }

.stop-list { margin: 0; }
.stop-list-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 52px; padding: 0 16px; box-sizing: border-box; --hl-x: 8px;   /* its highlight, inside its 16px (P5.9y step 11, below) */
  border: none; border-bottom: 1px solid var(--line); background: transparent;
  color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; text-align: left;
  cursor: pointer;
}
.stop-list-item .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stop-dot-badge {
  position: relative; width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 50%; background: var(--surface-raised);
}
.stop-dot-badge::after {
  content: ""; position: absolute; left: 50%; top: 50%; box-sizing: border-box; width: 14px; height: 14px;
  margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--rc, #fff); border: 3px solid var(--rt, var(--navy));   /* the map's ring (stop-style.js) */
}
body.dark .stop-dot-badge::after { background: var(--rc-d, #0b0f14); border-color: var(--rt-d, #93c5fd); }
/* The stop code, as a chip. */
.code-chip, .stop-list-item .cd {
  flex-shrink: 0; padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--surface-raised); color: var(--ink-secondary);
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
/* P5.9i: the line under a result's name (the destination, the distance); the empty screens. */
.stop-list-item .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 6px 0; }
.stop-list-item .tx .nm { flex: none; }
.stop-list-item .sub {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; font-weight: 400; color: var(--ink-secondary); line-height: 16px;
}
.stop-list-item .sub:empty { display: none; }
/* P5.9u: the name and its mode label (Bus, Train, Coach; a Luas station says Luas in its chip). */
.stop-list-item .ln { display: flex; align-items: center; gap: 6px; min-width: 0; }
.stop-list-item .tx .ln .nm { flex: 0 1 auto; }
.md {
  flex: none; margin: 0 auto 0 8px; padding: 0 6px; border-radius: 4px; line-height: 16px;
  background: var(--surface-raised); color: var(--ink-secondary);
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.stop-list-item .ln .md { margin: 0; }
.near-stops .fav-heading { margin-top: 8px; }
.near-stops .stop-list { padding: 0; }
.search-none { padding: 32px 16px; }
.empty-cta {
  display: block; margin: 16px auto 0; min-height: 44px; padding: 0 20px;
  border: none; border-radius: var(--radius-button); background: var(--navy); color: #fff;
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
body.dark .empty-cta { background: #4a7fbf; }
.saved-empty { padding: 32px 0; }
#search-idle { padding: 0 16px; }
@media (min-width: 600px) {   /* the rows' boxes are the content line, as Plan's cards and Saved's rows are */
  .stop-list { padding: 0 var(--view-inset); }
  .stop-list-item { padding: 0; --hl-x: -8px; }
}

/* ── A list row's highlight (P5.9y step 11) ──────────────────────────────────
   Hover, and keyboard focus with its 2px ring, show a rounded box: 10px
   corners (design.md's button radius, the selected board row's), 2px clear of
   the hairlines above and below, and 8px wider than the row's text on each
   side (the selected board row's 8px), so the text never touches its edge
   and it never fills the list edge to edge (owner, 10-30: "Ugly highlight box
   as well, rounding?"). It is a ::before behind the row's content, so the row's
   own box, the content line and the hairlines don't move. --hl-x is where its
   sides sit from the row's box: -8px where the row's box is its text (Recent,
   Saved, results from 600px), 8px where the row is full-width with 16px of
   its own padding (results on a phone). Shared by Saved stops, Recently viewed
   and Saved journeys (.fav-item, on Saved, Plan and the Stop screen), the
   stop search's results and Near you (.stop-list-item); the board's rows
   (stop-board.css), the planner's From/To suggestions (plan-board.css) and
   the ride sheet's stops (ride-sheet.css) do the same. A chip on a
   highlighted row takes the surface, so it still reads as a chip. */
.fav-item, .stop-list-item { position: relative; isolation: isolate; }
.fav-item::before, .stop-list-item::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: 2px; bottom: 2px; left: var(--hl-x, -8px); right: var(--hl-x, -8px);
  border-radius: var(--radius-button);
}
.fav-item:hover::before, .stop-list-item:hover::before, .stop-list-item:focus-visible::before { background: var(--surface-raised); }
.stop-list-item:focus-visible { outline: none; }
.stop-list-item:focus-visible::before { box-shadow: 0 0 0 2px var(--navy); }
body.dark .stop-list-item:focus-visible::before { box-shadow: 0 0 0 2px #93c5fd; }
/* :has() rules stand alone: a browser without it drops only these (the name's own outline stays, below). */
.fav-item:has(.label:focus-visible)::before { background: var(--surface-raised); box-shadow: 0 0 0 2px var(--navy); }
body.dark .fav-item:has(.label:focus-visible)::before { box-shadow: 0 0 0 2px #93c5fd; }
.fav-item:has(.label:focus-visible) .code-chip { background: var(--surface); }
.fav-item:hover .code-chip, .stop-list-item:hover .cd, .stop-list-item:focus-visible .cd,
.stop-list-item:hover .md, .stop-list-item:focus-visible .md { background: var(--surface); }

/* ── Saved, and the lists it shares ───────────────────────────────────────── */
.saved-hint { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--ink-secondary); }
.saved-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); line-height: 20px; }
.fav-section { margin: 0 0 24px; }
.fav-heading {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 32px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-secondary);
}
.fav-heading:has(.fav-clear) { min-height: 44px; }
.fav-item {
  display: flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0; box-sizing: border-box;
  border-bottom: 1px solid var(--line);
  font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer;
}
.fav-item:has(.rm) { padding: 6px 0; }
.fav-item .label {
  flex: 1; min-width: 0; min-height: 44px; padding: 0;
  border: none; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fav-item .label:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
body.dark .fav-item .label:focus-visible { outline-color: #93c5fd; }
/* Where :has() works the ring is the row's rounded highlight's (above), not the name's own outline. */
@supports selector(:has(*)) { .fav-item .label:focus-visible { outline: none; } }
.fav-star { flex-shrink: 0; color: var(--accent); }
.fav-arrow { color: var(--ink-muted); }
/* Every remove button is 44x44. */
.fav-item .rm {
  width: 44px; height: 44px; flex-shrink: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--radius-pill); background: transparent;
  color: var(--ink-muted); cursor: pointer;
}
.fav-item .rm:hover { background: var(--chip-late-bg); color: var(--chip-late-ink); }
.fav-clear {
  min-width: 44px; min-height: 44px; padding: 0 8px;
  border: none; background: transparent; cursor: pointer;
  color: var(--navy); font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none;
}
body.dark .fav-clear { color: #93c5fd; }
.fav-clear:hover { text-decoration: underline; }
.fav-empty { padding: 12px; font-size: 12px; color: var(--ink-muted); text-align: center; }