/* The stop view's own content (P2.22 step 2): the stop header and the
   departure rows — docs/design.md's "Stop header" and "Departure row"
   components. Split out of unified.css in the same commit as shell.css —
   see that file's header for why.

   The stop search screen, the favourites lists and the loading skeleton
   that used to sit here moved to search-saved.css and board-states.css in
   P2.22 step 6, redrawn. */

/* ── The stop header (docs/design.md "Stop header") ──────────────────────
   One markup for both layouts: the back arrow and the "Plan a trip from
   here" CTA exist in the DOM always and are hidden under 600px via CSS —
   the canvas's phone boards show neither (just the name/meta + two icon
   buttons); the panel boards add both. Pure CSS switch, no JS layout
   branch, so there's nothing to re-render across the breakpoint. */
.stop-head {
  padding: 0 16px 8px;
  display: flex; align-items: flex-start; gap: 8px;
  flex-shrink: 0;
}
.stop-head-info { flex: 1; min-width: 0; }
.stop-detail-name { font-size: 15px; font-weight: 700; color: var(--ink); }
.stop-detail-meta { font-size: 12px; color: var(--ink-secondary); margin-top: 4px; }

.stop-icon-btn {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: var(--radius-pill); border: none;
  background: var(--surface-raised);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--ink-muted);
  cursor: pointer;
}
.stop-icon-btn:hover { color: var(--navy); }
body.dark .stop-icon-btn:hover { color: #93c5fd; }
/* The save-to-favourites icon button's "on" state — not drawn on the
   canvas (its two icon buttons are always the resting state), but still
   needed: a favourited stop must look different from one that isn't.
   --accent is always paired with --accent-ink text (design.md: "the Track
   button, with #1f2937 text") — accent as a *background*, never as small
   text directly on a light surface, which is why this isn't simply
   `color: var(--accent)` (amber-on-near-white text would fail 4.5:1). */
.stop-icon-btn.on { background: var(--accent); color: var(--accent-ink); }
.stop-back { display: none; }   /* panel-only (600px+) */

/* design.md's Buttons table names this exact button — "Outline ('Plan a
   trip from here')" — white, navy text 12/700, a 1.5px #d6dbe2 border,
   10px corners. That's the text this file wins with (its own stated
   rule): the canvas's own pixels (StopMapR1366x768.dc.html etc.) actually
   render it navy-filled, 13.5/800, 12px corners, matching the *other*
   named button ("Filled — the bus sheet's main action") instead — a
   mock-up/text mismatch the brief doesn't list under "Mock-ups that don't
   follow the system yet", so left for this build to settle; settled here
   in the text's favour, per the file's own precedence rule. */
.stop-plan-cta {
  display: none;   /* panel-only (600px+) */
  width: calc(100% - 32px);
  margin: 0 16px 8px;
  padding: 0 16px; min-height: 44px;
  background: var(--surface); color: var(--navy);
  border: 1.5px solid #d6dbe2; border-radius: var(--radius-button);
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .15s, background .15s;
}
.stop-plan-cta:hover { border-color: var(--navy); background: var(--surface-raised); }
/* Navy reads fine as a *background* in both themes (design.md), but not
   as small *text* sitting directly on a dark surface — same exception
   unified.css already carries for .share-btn/.results-refresh hovers. */
body.dark .stop-plan-cta { border-color: #34373f; color: #93c5fd; }
body.dark .stop-plan-cta:hover { border-color: #4a7fbf; background: #2e3038; }

@media (min-width: 600px) {
  .stop-head { padding: 16px; margin-bottom: 0; }
  .stop-back { display: inline-flex; }
  .stop-plan-cta { display: block; width: calc(100% - 32px); margin: 0 16px 16px; }
}

/* ── Departure rows (docs/design.md "Departure row") ─────────────────────
   One centre line — badge, destination, time — as a flex row, not a
   table; at least 44px tall. */
.stop-rowlist {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 0 16px 16px;
  scrollbar-width: none;
  /* A soft fade at the bottom on short screens (design.md: "rows scroll
     inside the sheet/panel with a soft fade") rather than a hard cut. */
  mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent 100%);
}
.stop-rowlist::-webkit-scrollbar { display: none; }
@media (min-width: 600px) {
  .stop-rowlist { padding: 0 16px 16px; }
}

.stop-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; min-height: 44px; box-sizing: border-box;
  border-bottom: 1px solid var(--line);
  cursor: pointer; transition: background .12s;
}
.stop-row:last-child { border-bottom: none; }
.stop-row:hover { background: var(--surface-raised); }
/* The selected row (P2.22 step 4, docs/design.md "Map and list"): its bus is
   highlighted on the map and the rest dimmed. The route colour at 8% over
   the surface, a 1.5px outline in that colour, 10px corners; --row-color is
   set inline on the row. The 8px side margin widens the row into the list's
   16px padding so the text doesn't shift. */
.stop-row-open {
  /* The selected row's cue to open the bus sheet: a 44x44 chevron at the
     row's right edge (review round 1). Negative margins keep the row's own
     height; the right one pulls it into the row's 8px side padding. */
  width: 44px; height: 44px; flex-shrink: 0; margin: -12px -8px -12px -6px; padding: 0;
  border: none; background: transparent; cursor: pointer;
  font-size: 26px; font-weight: 700; line-height: 1;
  color: var(--row-color, var(--ink-muted));
}
.stop-row.selected {
  background: color-mix(in srgb, var(--row-color, var(--navy)) 8%, var(--surface));
  border: 1.5px solid var(--row-color, var(--navy));
  border-radius: 10px; padding: 10px 8px; margin: 0 -8px;
}

.stop-row-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 22px; padding: 0 8px;
  border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 800; flex-shrink: 0;
}
.stop-row-dest {
  flex: 1; min-width: 0;
  font-size: 13px; font-weight: 400; color: var(--ink-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stop-row-dest-empty { color: var(--ink-muted); }
.stop-row-time {
  font-size: 16px; font-weight: 800; color: var(--ink);
  white-space: nowrap; flex-shrink: 0;
}
/* "Due" takes its own colour (design.md), never the early/late green/red. */
.row-due { color: var(--due); }
/* The clock-time suffix on a wait over 20 minutes: "29 min · 22:25". */
.row-clock { font-weight: 600; font-size: 12.5px; opacity: .72; }
.due-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--live-dot); margin-left: 4px; vertical-align: middle;
  animation: pulse 1.4s ease infinite;
}
.due-late  { color: var(--due-late);  font-weight: 700; font-size: 11px; margin-left: 3px; }
.due-early { color: var(--due-early); font-weight: 700; font-size: 11px; margin-left: 3px; }

.stop-row-empty {
  padding: 20px; color: var(--ink-muted); text-align: center; font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
  .due-dot { animation: none !important; }
}