/* 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; }
/* P5.13 F3: this box scrolls, so it clips whatever is drawn outside its edge:
   the fields' 2px focus ring lost its top. 3px of top padding gives the ring
   room; the equal negative margin keeps every field where it was. */
.plan-pad { padding: 3px 16px 16px; margin-top: -3px; 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;
}
/* P5.9l: one field style. The --page ground stays whether the field is empty,
   filled or being edited (it used to turn white once filled and yellow while
   waiting for a map tap); only the focus ring shows, the same 2px --navy ring
   (light blue in dark mode) as the When fields. "Tap a stop on the map" is the
   hint line under the field, not a colour. */
.plan-field:focus-within, .plan-field:has(.plan-input.awaiting-map) { box-shadow: 0 0 0 2px var(--navy); }
body.dark .plan-field:focus-within, body.dark .plan-field:has(.plan-input.awaiting-map) { box-shadow: 0 0 0 2px #93c5fd; }

/* 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 var(--pin-edge, var(--pin)); }
.plan-pin-fill { background: var(--pin-edge, var(--pin)); }
body.dark .plan-pin-ring { border-color: var(--pin); }
body.dark .plan-pin-fill { background: var(--pin); }
/* The search form's own pins carry --pin: the ring's border is a var() with no
   fallback, so without it the From ring drew no border at all (P5.9l). */
.plan-field .plan-pin { --pin: var(--navy); }
body.dark .plan-field .plan-pin { --pin: #93c5fd; }
/* P5.13 L7: a results timeline's start and end pins carry the navy inline; on a dark card they vanished */
body.dark .plan-pin[style*="--pin:var(--navy)"] { --pin: #93c5fd !important; --pin-edge: #93c5fd !important; }

.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%; text-overflow: ellipsis;   /* a name longer than the field ends in an ellipsis (PB-19) */
}
.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; }
/* P5.9y step 11: the highlighted suggestion (pointer or arrow keys) is a
   rounded box, 10px corners, 2px clear of the hairlines and 4px in from the
   list's sides, not a square fill edge to edge (search-saved.css, "A list
   row's highlight"); its code chip takes the surface so it still reads. */
.dropdown-item { position: relative; isolation: isolate; }
.dropdown-item::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: 2px; bottom: 2px; left: 4px; right: 4px; border-radius: var(--radius-button);
}
.dropdown-item:hover::before, .dropdown-item.active::before { background: var(--surface-raised); }
.dropdown-item:hover .cd, .dropdown-item.active .cd, .dropdown-item:hover .md, .dropdown-item.active .md { background: var(--surface); }
.dropdown-item .nm { font-weight: 500; }
/* P5.11: the "My location" row, first in From and To: the same row, the location blue on its target icon. */
.dropdown-loc .nm { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.dropdown-loc svg { flex-shrink: 0; color: var(--loc-dot); }
.plan-loc-msg { font-size: 12px; color: var(--ink-secondary); margin: 8px 0 0; line-height: 1.4; }
.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; }
/* P5.9l: the list's cards move when one opens and another closes; the browser's
   own scroll anchoring must not move the list as well. */
.sb-body { overflow-anchor: none; }
/* P5.8 step 1b: "Leave at" is one row, a Day dropdown (the app's own picker
   since P5.9y step 10, below) beside the Time field. Day gets 1.4 parts of the width to Time's 1. Each
   control is 52px tall with its small label inside at the top left, the value
   below (14px, 600), the --page fill and a 2px focus ring in --navy (light
   blue in dark mode, where navy doesn't show on the dark fill). */
.plan-when-row { display: flex; gap: 8px; margin-top: 8px; }
.plan-when-field {
  position: relative; min-width: 0; min-height: 52px;
  background: var(--page); border-radius: var(--radius-button);
}
.plan-when-day { flex: 1.4 1 0; }
.plan-when-time { flex: 1 1 0; }
.plan-when-lab { position: absolute; left: 12px; top: 7px; z-index: 1; pointer-events: none; }
.plan-when-ctl {
  display: block; width: 100%; height: 52px; box-sizing: border-box; margin: 0;
  border: none; border-radius: var(--radius-button); background: transparent;
  padding: 22px 32px 0 12px; font-family: inherit; font-size: 14px; font-weight: 600;
  color: var(--ink); -webkit-appearance: none; appearance: none; outline: none;
  cursor: pointer; text-overflow: ellipsis;
  /* P5.8c: whatever the browser draws for a field (the Time field's caret
     and selection) follows the app's theme, not its own (app.html declares
     "light dark"). body.dark below turns it dark. */
  color-scheme: light;
}
.plan-when-time .plan-when-ctl { padding-right: 10px; cursor: text; }
.plan-when-ctl.bad { color: var(--due-late); }
.plan-when-field:has(.plan-when-ctl.bad) { box-shadow: 0 0 0 2px var(--due-late); }
.plan-when-err { margin: 6px 4px 0; font-size: 12px; font-weight: 600; color: var(--due-late); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.plan-when-field:focus-within { box-shadow: 0 0 0 2px var(--navy); }
.plan-when-chev {
  position: absolute; right: 10px; top: 50%; margin-top: -9px;
  color: var(--ink-muted); pointer-events: none;
}
body.dark .plan-when-field:focus-within { box-shadow: 0 0 0 2px #93c5fd; }
body.dark .plan-when-ctl { color-scheme: dark; }

/* P5.9y step 10: the Day picker (picker.js), the app's own list in place of
   the browser's <select> popup (owner, 10-30: "Ugly list as well"). The field
   is the same 52px box as the Time field, its value centred under the label.
   The open list is a card in <body> (picker.js places it, below the field or
   above), in the app's surface, ink and font: 44px rows, the active one (keys
   or pointer) a 10px-cornered --surface-raised box inset in the list, the
   chosen one in 700 with a tick. In dark the list is raised (--surface-raised)
   over the sheet's --surface, so its active row takes one step lighter. */
.pick.plan-when-ctl { display: flex; align-items: center; white-space: nowrap; overflow: hidden; }
.pick-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.plan-when-chev { transition: transform .15s; }
.pick[aria-expanded="true"] + .plan-when-chev { transform: rotate(180deg); }
.pick-list {
  position: fixed; z-index: 1300; box-sizing: border-box; margin: 0; padding: 4px;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-button);
  box-shadow: 0 8px 24px rgba(0,0,0,.16);
  font-family: inherit; font-size: 14px; font-weight: 500;
}
.pick-list.pick-up { box-shadow: 0 -8px 24px rgba(0,0,0,.16); }
.pick-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 44px; padding: 0 12px; box-sizing: border-box;
  border-radius: var(--radius-button); cursor: pointer;
  user-select: none; -webkit-user-select: none;
}
.pick-opt.active { background: var(--surface-raised); }
.pick-opt.sel { font-weight: 700; }
.pick-check { flex-shrink: 0; color: var(--navy); }
body.dark .pick-list { background: var(--surface-raised); border-color: #343844; box-shadow: 0 8px 24px rgba(0,0,0,.6); }
body.dark .pick-list.pick-up { box-shadow: 0 -8px 24px rgba(0,0,0,.6); }
body.dark .pick-opt.active { background: #343844; }
body.dark .pick-check { color: #93c5fd; }

/* ── 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-edge, var(--pill-color, var(--navy))); }
.route-pill.active { box-shadow: 0 0 0 1.5px var(--pill-edge, var(--pill-color, var(--navy))) inset; }
body.dark .route-pill:hover, body.dark .route-pill:focus-visible { border-color: var(--pill-color, var(--navy)); }
body.dark .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-day { font-size: 12px; font-weight: 700; color: var(--ink-secondary); margin-right: -2px; }   /* PB-11: the day of a journey that is not today */
.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 var(--pin-edge, var(--pin)); font-size: 12px; color: var(--ink-secondary);
}
body.dark .tl-leg { border-left-color: var(--pin); }
.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 var(--view-inset) 12px; }
  .plan-pad { padding: 3px var(--view-inset) 16px; }
}