/* The planner's own view (P2.22 step 3): the "Plan a journey" search
   screen and the results list — docs/design.md's "Search", "Planner
   results" and the Buttons/Map pin styles they share. Split out of
   unified.css in the same step: unified.css's planner block was literal
   hex pending this step (P2.22 step 1's "As built"), and this step
   redraws the whole view, the same reasoning step 2 used for shell.css/
   stop-board.css.

   Shared with the search form AND the results timeline: .plan-pin — a 10px
   dot, a hollow ring (origin / a stop the rider is waiting at) or filled
   with a colour (the chosen "To" stop, or a route colour in the timeline),
   matching docs/design.md's Map pin styles at search-field scale. */

/* ── The board header (both screens use #sidebar's own header slot —
   shell.css's generic .sb-header is hidden here the same way stop-board.css
   hides it for the stop view: #sidebar.plan-board-open .sb-header, added
   below) ─────────────────────────────────────────────────────────────── */
#sidebar.plan-board-open .sb-header { display: none; }

.plan-head {
  padding: 0 16px 12px;
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.plan-head-text { flex: 1; min-width: 0; }
.plan-title {
  font-size: 15px; font-weight: 700; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.plan-meta { font-size: 12px; color: var(--ink-secondary); margin-top: 4px; }
.plan-pad { padding: 0 16px 16px; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.plan-pad::-webkit-scrollbar { display: none; }

/* Icon buttons in the plan header (back / save) — identical shape to
   stop-board.css's .stop-icon-btn (design.md's one "Icon" button type,
   44px round, surface-raised fill); kept as this view's own class rather
   than reused across files, matching step 2's own precedent for the stop
   header's icon buttons living in their own view's stylesheet. */
.plan-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;
}
.plan-icon-btn:hover { color: var(--navy); }
body.dark .plan-icon-btn:hover { color: #93c5fd; }
.plan-icon-btn.on { background: var(--accent); color: var(--accent-ink); }

/* ── Search: From/To fields ──────────────────────────────────────────── */
.plan-fields { display: flex; align-items: center; gap: 8px; }
.plan-field-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.plan-field-group { position: relative; }
.plan-field {
  display: flex; align-items: center; gap: 12px;
  background: var(--page); border-radius: var(--radius-button);
  padding: 4px 12px; min-height: 52px; box-sizing: border-box; cursor: text;
  transition: background .15s, box-shadow .15s;
}
.plan-field:focus-within { box-shadow: 0 0 0 1.5px var(--navy) inset; background: var(--surface); }
.plan-field:has(.plan-input.selected) { background: var(--surface); }
.plan-field:has(.plan-input.awaiting-map) { box-shadow: 0 0 0 1.5px var(--accent) inset; background: #fffbeb; }
body.dark .plan-field:has(.plan-input.awaiting-map) { background: #2a2510; }

/* A 10px pin dot — docs/design.md's Map pin styles, at search/timeline
   scale: a hollow ring (origin / "waiting here") or filled with a colour
   (destination, or a route colour in the timeline below). */
.plan-pin { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; box-sizing: border-box; }
.plan-pin-ring { background: var(--surface); border: 3px solid; }

.plan-field-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.plan-flabel {
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-muted);
}
.plan-input {
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ink);
  background: transparent; border: none; padding: 0; margin-top: 2px;
  outline: none; width: 100%;
}
.plan-input::placeholder { color: var(--ink-muted); }

.map-select-hint {
  font-size: 11px; color: var(--accent-ink); margin-top: var(--space-4);
  display: flex; align-items: center; gap: var(--space-4);
}
body.dark .map-select-hint { color: #fbbf24; }

.dropdown {
  position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 600;
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--radius-button); max-height: 200px; overflow-y: auto;
  box-shadow: 0 6px 20px rgba(0,0,0,.14);
}
.dropdown-item {
  padding: 9px 12px; cursor: pointer; font-size: 13px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--line); color: var(--ink);
}
.dropdown-item:last-child { border-bottom: none; }
.dropdown-item:hover, .dropdown-item.active { background: var(--surface-raised); }
.dropdown-item .nm { font-weight: 500; }
.dropdown-item .cd {
  font-size: 11px; color: var(--ink-muted); background: var(--surface-raised);
  padding: 2px 6px; border-radius: 4px; white-space: nowrap;
}

/* The 44px round swap button, beside the field column (design.md: "a 44px
   round swap button"). */
.plan-swap-btn {
  width: 44px; height: 44px; flex-shrink: 0;
  background: var(--surface-raised); border: none; border-radius: var(--radius-pill);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--ink-muted); transition: background .15s, color .15s, transform .3s;
}
.plan-swap-btn:hover { background: var(--line); color: var(--navy); }
body.dark .plan-swap-btn:hover { color: #93c5fd; }
.plan-swap-btn.spinning { transform: rotate(180deg); }

/* ── Search: the "Leave now / Leave at…" segmented switch ────────────── */
.plan-when {
  display: flex; background: var(--page); border-radius: var(--radius-pill);
  padding: 4px; gap: 4px; margin-top: 12px;
}
.plan-seg {
  flex: 1; font-family: inherit; font-size: 13px; font-weight: 600;
  color: var(--ink-secondary); background: transparent; border: none;
  border-radius: var(--radius-pill); min-height: 44px; cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.plan-seg.active {
  font-weight: 700; color: var(--navy); background: var(--surface);
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
body.dark .plan-seg.active { color: #93c5fd; }
.plan-time-input {
  width: 100%; margin-top: 8px; padding: 9px 12px;
  border: 1.5px solid var(--navy); border-radius: var(--radius-button);
  font-size: 13px; font-weight: 600; outline: none;
  background: var(--page); color: var(--navy);
}
body.dark .plan-time-input { border-color: #4a7fbf; color: #93c5fd; color-scheme: dark; }

/* ── Search: the primary Search button ────────────────────────────────
   design.md's Buttons table has no row named "Search" specifically, but
   it's the view's one main action — same shape as the bus sheet's named
   "Filled" button (navy, white text, 10px corners). */
.plan-primary {
  width: 100%; font-family: inherit; font-size: 13px; font-weight: 800;
  color: #fff; background: var(--navy); border: none;
  border-radius: var(--radius-button); min-height: 44px; margin-top: 12px;
  cursor: pointer; transition: background .15s, opacity .15s;
}
.plan-primary:hover:not(:disabled) { background: #0057b8; }
.plan-primary:disabled { opacity: .45; cursor: default; }
.plan-hint { font-size: 12px; color: var(--ink-muted); margin-top: 10px; text-align: center; }

/* ── Results: the card (docs/design.md "Planner results") ────────────── */
.route-pill {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 16px; margin-bottom: 8px;
  cursor: pointer; transition: border-color .12s, box-shadow .12s;
  position: relative; outline: none;
}
.route-pill:hover, .route-pill:focus-visible { border-color: var(--pill-color, var(--navy)); }
.route-pill.active { box-shadow: 0 0 0 1.5px var(--pill-color, var(--navy)) inset; }

.pill-row1 { display: flex; align-items: center; gap: 8px; }
.pill-times { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; flex: 1; min-width: 0; color: var(--ink); }
.pill-arrow { color: var(--ink-muted); font-weight: 600; }
.pill-dur { font-size: 13px; font-weight: 700; color: var(--ink-secondary); white-space: nowrap; }
.pill-row2 { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--ink-secondary); flex-wrap: wrap; }
.pill-meta-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pill-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; color: #fff; flex-shrink: 0;
}
.live-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--live-dot); margin-left: -4px;
  animation: plan-pulse 1.4s ease infinite; flex-shrink: 0;
}
@keyframes plan-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* Expand/collapse: the details panel animates open (docs/design.md: the
   first/best card starts expanded; tapping any card expands it alone). */
.pill-details { max-height: 0; overflow: hidden; transition: max-height .25s ease, opacity .2s ease; opacity: 0; }
.route-pill.expanded .pill-details { max-height: 700px; opacity: 1; }

/* ── Results: the inline timeline ─────────────────────────────────────
   Stop rows (13/700) with a pin + name, time on the right; a solid
   route-colour strip for a ride leg, a dotted grey strip for a walk leg
   (docs/design.md: "walk legs as a dotted grey line, ride legs as a solid
   route-colour line"). */
.tl { display: block; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.tl-row { display: flex; align-items: center; gap: 12px; font-size: 13px; padding: 2px 0; }
.tl-pin { display: inline-flex; flex-shrink: 0; }
.tl-stop { flex: 1; min-width: 0; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-sub { display: block; font-size: 10px; font-weight: 400; color: var(--ink-muted); margin-top: 1px; }
.tl-time { font-weight: 700; color: var(--ink); white-space: nowrap; flex-shrink: 0; }
.tl-leg {
  display: block; margin: 4px 0 4px 5px; padding: 8px 0 8px 18px;
  border-left: 3px solid; font-size: 12px; color: var(--ink-secondary);
}
.tl-walk {
  display: block; margin: 4px 0 4px 5px; padding: 8px 0 8px 18px;
  border-left: 3px dotted var(--ink-muted); font-size: 12px; color: var(--ink-secondary);
}

/* ── Live tracking bus (plan map) — pulse halo ───────────────────────── */
.plan-bus-icon .plan-bus-pulse {
  position: absolute; left: -14px; top: -14px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bus-c); opacity: .35;
  animation: plan-bus-ring 1.6s ease-out infinite;
}
@keyframes plan-bus-ring { 0% { transform: scale(.55); opacity: .5; } 100% { transform: scale(1.7); opacity: 0; } }

/* ── Loading skeleton (plan-only: .empty-msg is shared with stop-mode.js/
   vehicle-sheet.js/favs.js and stays defined in unified.css) ───────────── */
.skeleton { background: var(--line); border-radius: 6px; animation: plan-shimmer 1.2s ease infinite; }
@keyframes plan-shimmer { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.skel-pill { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 16px; margin-bottom: 8px; }

@media (prefers-reduced-motion: reduce) {
  .live-dot, .skeleton, .sk-block, .plan-bus-pulse { animation: none !important; }
}

@media (min-width: 600px) {
  .plan-head { padding: 16px 16px 12px; }
  .plan-pad { padding: 0 16px 16px; }
}