/* HowToGet map mode — full-page map, floating route panel. */

body.map-mode { overflow: hidden; }
#map { position: fixed; inset: 0; background: var(--paper2); }

.panel {
  position: fixed;
  top: 1.25rem;
  left: 1.25rem;
  bottom: 1.25rem;
  width: min(24.5rem, calc(100vw - 2.5rem));
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(20, 35, 60, 0.16), 0 2px 8px rgba(20, 35, 60, 0.08);
  z-index: 10;
}
.panel-body { flex: 1; overflow-y: auto; padding: 1.3rem 1.4rem; }
.panel .tl-row { opacity: 1; transform: none; }
.panel .tl-leg .tl-icon { border-color: #ffffff; }

/* intro / destination list */
.panel-intro h1 {
  font-size: 1.9rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-weight: 660;
  margin-bottom: 0.6rem;
}
.panel-intro p { font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 1.4rem; }
.dest-list { list-style: none; margin: 0; padding: 0; }
.dest-list li { border-top: 1px solid var(--hairline); }
.dest-list button {
  all: unset;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  width: 100%;
  padding: 0.55rem 0.1rem;
  cursor: pointer;
  font-size: 0.92rem;
}
.dest-list button:hover .dl-name { color: var(--sienna); }
.dl-name { font-weight: 560; }
.dest-list .featured .dl-name { color: var(--sienna); }
.dl-time { color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dl-none { color: var(--ink-faint); }

/* selected destination */
.panel-dest .pd-back {
  all: unset;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--ink-soft);
  display: inline-block;
  white-space: nowrap;
}
.panel-dest .pd-back:hover { color: var(--ink); }

/* The panel's top bar: back link on the left, and the place's name, which only shows
   once the headline has scrolled out of view. Sticky inside the scrolling panel body,
   with the body's own padding pulled back in so it spans edge to edge. */
.pd-top {
  position: sticky;
  top: -1.3rem;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: -1.3rem -1.4rem 1rem;
  padding: 0.85rem 1.4rem 0.7rem;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.pd-top.is-stuck { border-bottom-color: var(--hairline); }
.pd-top-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.92rem;
  font-weight: 650;
  letter-spacing: -0.005em;
  color: var(--ink);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.pd-top.is-stuck .pd-top-name { opacity: 1; transform: none; }
.panel-dest h1 { font-size: 1.85rem; line-height: 1.08; letter-spacing: -0.01em; font-weight: 660; }
.pd-meta { font-size: 0.85rem; color: var(--ink-soft); margin: 0.5rem 0 1.2rem; }
.panel-dest .legs-total { font-size: 0.8rem; margin-top: 0.2rem; }
.pd-note {
  margin-top: 1.2rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--hairline);
  padding-top: 0.9rem;
}
.pd-letter {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.5;
  margin-top: 0.6rem;
}

/* selected destination extras */
.pd-photo { margin: 0 0 1.1rem; }
.pd-photo img {
  width: 100%;
  aspect-ratio: 16 / 9.5;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.pd-story {
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.45;
  font-weight: 400;
  margin: 0 0 1.2rem;
}
.panel-dest .pd-meta { margin-bottom: 0.8rem; }

/* hover popup */
.place-popup .maplibregl-popup-content {
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 32px rgba(20, 35, 60, 0.22);
  font-family: var(--sans);
  color: var(--ink);
}
.place-popup .maplibregl-popup-tip { border-top-color: #fff; border-bottom-color: #fff; }
.pp { width: 240px; background: #fff; }
.pp img { width: 100%; height: 110px; object-fit: cover; display: block; }
.pp-body { padding: 0.65rem 0.85rem 0.75rem; display: grid; gap: 0.25rem; }
.pp-body strong { font-size: 0.95rem; font-weight: 650; letter-spacing: -0.005em; }
.pp-body span { font-size: 0.78rem; line-height: 1.35; color: var(--ink-soft); }
.pp-body em { font-style: normal; font-size: 0.76rem; font-weight: 600; color: var(--sienna); }



/* map / satellite switch: one pill, two halves, the pressed half filled with ink.
   Selectors carry .maplibregl-ctrl so they outrank maplibre's own
   `.maplibregl-ctrl button:hover` rule, which used to wash the background out. */
.maplibregl-ctrl.style-toggle {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(20, 35, 60, 0.14);
}
.maplibregl-ctrl.style-toggle button {
  all: unset;
  cursor: pointer;
  border-radius: 999px;
  padding: 0.38rem 0.8rem;
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 650;
  line-height: 1;
  color: var(--ink-soft);
  background: transparent;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.maplibregl-ctrl.style-toggle button:not(:disabled):hover {
  background: var(--paper3);
  color: var(--ink);
}
.maplibregl-ctrl.style-toggle button[aria-pressed='true'],
.maplibregl-ctrl.style-toggle button[aria-pressed='true']:not(:disabled):hover {
  background: var(--ink);
  color: #fff;
}
.maplibregl-ctrl.style-toggle button:focus-visible {
  outline: 2px solid var(--sienna);
  outline-offset: 1px;
}

/* mobile-only home chip (hidden on desktop) */
.map-home {
  display: none;
  position: fixed;
  top: 0.9rem;
  left: 0.9rem;
  z-index: 11;
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  font-weight: 650;
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(20, 35, 60, 0.14);
}

/* a destination nothing reaches */
.dest-list li.dead .dl-name { color: var(--ink-soft); }

.pd-deadend {
  margin-top: 1.2rem;
  border-top: 1px solid var(--hairline);
  padding-top: 1rem;
}
.pd-deadend-head {
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.25;
  font-weight: 600;
  margin: 0 0 0.35rem;
}
.pd-deadend-sub { font-size: 0.83rem; color: var(--ink-soft); margin: 0; }

/* check it against a conventional planner - we make no claim, they look.
   Sits directly under the description; whatever follows (.legs-board or
   .pd-deadend) brings its own 1.2rem top margin, so this needs none. */
.pd-check {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0;
  padding: 0.62rem 0.85rem;
  border: 1px solid var(--hairline);
  border-radius: 11px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.pd-check:hover { border-color: var(--ink); color: var(--sienna); }
.pd-check svg { width: 15px; height: 15px; flex: none; }

/* ---------- mobile (additive only - desktop rules untouched) ---------- */
@media (max-width: 700px) {
  .panel {
    top: auto;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    width: auto;
    max-height: 54vh;
    border-radius: 16px;
  }
  .panel-body { padding: 1rem 1.1rem; }
  .panel-intro h1, .panel-dest h1 { font-size: 1.45rem; }
  .pd-photo img { aspect-ratio: 16 / 8; }
  .map-home { display: inline-flex; }
  .pd-top { margin: -1rem -1.1rem 0.8rem; padding: 0.7rem 1.1rem 0.6rem; top: -1rem; }
}

/* ---------------------------------------------------- before and after board

   The comparison sits directly under the destination's story, above the route
   itself: the argument first, the itinerary as evidence. Both rows carry the
   same origin, day and departure minute, so the eye can go straight down the
   right-hand column and read the difference off. */
.cmp {
  margin: 0 0 0.9rem;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  overflow: hidden;
}
.cmp-head {
  padding: 0.7rem 0.85rem 0.62rem;
  background: var(--paper3);
  border-bottom: 1px solid var(--hairline);
}
.cmp-big {
  display: block;
  font-family: var(--serif);
  font-size: 1.28rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--sienna);
}
.cmp-tied .cmp-big { color: var(--ink); }
.cmp-sub {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.cmp-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.15rem 0.8rem;
  padding: 0.62rem 0.85rem;
  align-items: baseline;
}
.cmp-after { border-top: 1px solid var(--hairline); background: rgba(191, 74, 43, 0.05); }
.cmp-who { font-size: 0.82rem; font-weight: 600; }
.cmp-val {
  font-size: 0.92rem;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cmp-after .cmp-val { color: var(--sienna); }
.cmp-at { font-weight: 400; color: var(--ink-soft); font-size: 0.8rem; }
/* Grid column 1 so the note sits under the name, not beside the number. */
.cmp-note {
  grid-column: 1 / -1;
  font-size: 0.75rem;
  color: var(--ink-soft);
  line-height: 1.35;
}
.cmp-none { color: var(--ink-faint); font-weight: 500; font-style: italic; }

/* The verdict rides under the duration in the destination list, so the list
   itself reads as a tally rather than a menu. */
.dest-list button { flex-wrap: wrap; }
.dl-verdict {
  width: 100%;
  text-align: right;
  font-size: 0.72rem;
  color: var(--sienna);
  margin-top: -0.15rem;
}
.dest-list li.dead .dl-verdict { color: var(--ink-faint); }

.panel-by {
  margin: 1.6rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.76rem;
  color: var(--ink-soft);
}

/* Departure the visitor controls. The baked times assume 08:00 Saturday; changing this
   re-plans live, which is the only way to reach services that never run on a Saturday. */
.dep-field { display: block; margin: 14px 0 8px; }
.dep-field-lbl {
  display: block; margin-bottom: 6px;
  font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft);
}
.dep-hint { margin: 0 0 14px; font-size: 12px; line-height: 1.5; color: var(--ink-soft, #6b6b6b); }

/* Day + time, as two fields of one control. Each is a button that opens its own
   popover; the pair sits on paper with a hairline, like the rest of the panel. */
.dep { position: relative; }
.dep-fields {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  background: var(--paper2);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  overflow: hidden;
}
.dep-btn {
  all: unset;
  cursor: pointer;
  display: grid;
  gap: 2px;
  padding: 0.55rem 0.85rem 0.6rem;
  font-family: var(--sans);
  color: var(--ink);
  transition: background-color 0.15s ease;
}
.dep-btn + .dep-btn { border-left: 1px solid var(--hairline); }
.dep-btn:hover { background: var(--paper3); }
.dep-btn[aria-expanded='true'] { background: #fff; }
.dep-btn:focus-visible { outline: 2px solid var(--sienna); outline-offset: -2px; }
.dep-lbl { font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.dep-val { display: flex; align-items: center; gap: 0.4rem; font-size: 0.92rem; font-weight: 620; }
.dep-val b { font-weight: inherit; font-variant-numeric: tabular-nums; }
.dep-val svg { width: 15px; height: 15px; color: var(--sienna); flex: none; }

.dep-pop {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 5;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(20, 35, 60, 0.18), 0 2px 8px rgba(20, 35, 60, 0.08);
  padding: 0.7rem;
  font-family: var(--sans);
  animation: dep-in 0.16s ease-out;
}
.dep-pop[hidden] { display: none; }
@keyframes dep-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.dep-pop-day { width: 100%; }
.dep-pop-time { right: 0; left: auto; width: 9.5rem; padding: 0.45rem; }

.dep-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.dep-cal-title { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; }
.dep-cal-title em { font-style: normal; font-weight: 400; color: var(--ink-soft); }
.dep-nav {
  all: unset; cursor: pointer; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink-soft);
}
.dep-nav svg { width: 16px; height: 16px; }
.dep-nav:hover { background: var(--paper2); color: var(--ink); }
.dep-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dep-dow span {
  text-align: center; font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-faint); padding: 0.2rem 0 0.35rem;
}
.dep-cell {
  all: unset; cursor: pointer; text-align: center; aspect-ratio: 1; display: grid; place-items: center;
  border-radius: 8px; font-size: 0.84rem; font-variant-numeric: tabular-nums; color: var(--ink);
  transition: background-color 0.12s ease;
}
.dep-pad { cursor: default; }
.dep-cell.is-sat { color: var(--sienna); font-weight: 600; }
.dep-cell.is-past { color: var(--ink-faint); }
.dep-cell.is-today { box-shadow: inset 0 0 0 1px var(--hairline); }
.dep-cell:not(.dep-pad):hover { background: var(--paper2); }
.dep-cell.is-sel, .dep-cell.is-sel:hover { background: var(--ink); color: #fff; font-weight: 650; }

.dep-time-list { max-height: 13rem; overflow-y: auto; display: grid; gap: 1px; padding-right: 2px; }
.dep-time {
  all: unset; cursor: pointer; padding: 0.38rem 0.7rem; border-radius: 8px;
  font-size: 0.86rem; font-variant-numeric: tabular-nums; color: var(--ink);
}
.dep-time:hover { background: var(--paper2); }
.dep-time.is-sel, .dep-time.is-sel:hover { background: var(--ink); color: #fff; font-weight: 650; }
.dep-time-exact {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  margin: 0.45rem 0.2rem 0.1rem; padding-top: 0.5rem; border-top: 1px solid var(--hairline);
  font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft);
}
.dep-time-exact input {
  font: inherit; font-size: 0.84rem; letter-spacing: 0; text-transform: none; color: var(--ink);
  border: 1px solid var(--hairline); border-radius: 7px; padding: 0.2rem 0.4rem; background: #fff;
}

/* The verdict names Google Maps, so the means to check it sits directly beside the claim
   rather than further down the panel. */
.cmp-check {
  margin-left: auto; align-self: center; flex: 0 0 auto;
  font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-soft, #6b6b6b); text-decoration: underline;
  text-underline-offset: 3px; white-space: nowrap;
}
.cmp-check:hover { color: var(--ink); }
.cmp-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.panel-by a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Which router answered is a material fact about the numbers on this page, so it is
   stated rather than implied. */
.panel-engine {
  margin: 12px 0 4px; font-size: 12px; line-height: 1.5;
  color: var(--ink-soft, #6b6b6b);
}
.panel-engine strong { color: var(--ink); font-weight: 600; }

/* Baked figures stay readable while the live engine answers, rather than blanking. */
.legs-board.is-refreshing { opacity: 0.45; transition: opacity 0.15s ease; }

/* ── Side-by-side comparison ─────────────────────────────────────────────────
   The claim this project makes is comparative, so both answers sit on one screen
   at the same size. The left column is the measured baseline (TfNSW + OSRM); the
   check link is what makes the claim verifiable rather than asserted. */
.cmp2 { margin: 0 0 0.4rem; padding: 0.9rem 0 0; border-top: 1px solid var(--hairline); }
.cmp2-grid { display: grid; grid-template-columns: 1fr 1fr; }
.cmp2-col { display: flex; flex-direction: column; gap: 2px; padding: 0 0.9rem 0 0; }
.cmp2-us { padding: 0 0 0 0.9rem; border-left: 1px solid var(--hairline); }
.cmp2-who { font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-soft); }
.cmp2-big {
  font-family: var(--serif);
  font-size: 1.55rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  margin-top: 2px;
}
.cmp2-them .cmp2-big { color: #e3362b; }
.cmp2-us   .cmp2-big { color: #10b981; }
.cmp2-sub { font-size: 12px; line-height: 1.4; color: var(--ink-soft); }
.cmp2-gain {
  margin: 0.75rem 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.4;
  color: var(--ink);
}
.cmp2-check {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.cmp2-check svg { width: 13px; height: 13px; }
.cmp2-check:hover { color: var(--sienna); border-bottom-color: currentColor; }

/* While the engine is out, our column shows a breathing bar the size of the number
   that will land there, so the layout does not jump when it does. */
.cmp2-wait {
  display: inline-block;
  width: 4.2rem;
  height: 1.3rem;
  vertical-align: -0.2rem;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--paper3) 0%, #fff 50%, var(--paper3) 100%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.4s ease-in-out infinite;
}

@media (max-width: 520px) {
  .cmp2-grid { grid-template-columns: 1fr; gap: 0.7rem; }
  .cmp2-col { padding: 0; }
  .cmp2-us { border-left: 0; padding-top: 0.7rem; border-top: 1px solid var(--hairline); }
}

/* ── Loading: a ghost of the timeline to come ────────────────────────────────
   Same grid as .tl-row, so the real itinerary lands in the same place. */
.pd-loading { margin-top: 1.2rem; --sk: rgba(20, 35, 60, 0.09); --sk-hi: rgba(20, 35, 60, 0.03); }
.legs-board.pd-loading.is-refreshing { opacity: 1; } /* the ghost is the loading state; do not dim it */
.pd-loading-text { margin: 0 0 0.6rem; font-size: 0.9rem; font-weight: 600; line-height: 1.45; }
.pd-loading-text small { display: block; font-weight: 400; font-size: 12px; color: var(--ink-soft); }
.sk-timeline { display: grid; }
.sk-row {
  display: grid;
  grid-template-columns: 22px 1fr;
  column-gap: 0.9rem;
  align-items: center;
  position: relative;
}
.sk-stop { padding: 0.15rem 0; }
.sk-leg { min-height: 3.2rem; }
.sk-node {
  width: 11px; height: 11px; justify-self: center; border-radius: 50%;
  border: 2.5px solid var(--ink-faint); background: transparent;
}
.sk-node.sk-end { background: var(--ink-faint); }
.sk-rail { justify-self: center; align-self: stretch; width: 0; border-left: 2.5px solid var(--ink-faint); }
.sk-icon {
  position: absolute; left: -4px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff;
  background: var(--sk);
}
.sk-info { grid-column: 2; display: grid; gap: 6px; padding: 0.5rem 0; }
.sk-line {
  display: block; height: 0.8rem; width: var(--w, 50%); border-radius: 5px;
  background: linear-gradient(90deg, var(--sk) 0%, var(--sk-hi) 50%, var(--sk) 100%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.4s ease-in-out infinite;
}
.sk-line.sk-thin { height: 0.6rem; opacity: 0.8; }
.sk-timeline .sk-row:nth-child(2) .sk-line { animation-delay: 0.1s; }
.sk-timeline .sk-row:nth-child(4) .sk-line { animation-delay: 0.2s; }
.sk-timeline .sk-row:nth-child(6) .sk-line { animation-delay: 0.3s; }
@keyframes sk-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
  .sk-line { animation: none; background: var(--sk); }
  .cmp2-wait { animation: none; background: var(--paper3); }
}

/* The dropped-pin panel reuses the comparison's check bar in its header. */
.panel-dest > .cmp2-check { margin: 10px 0 4px; border-radius: 8px; border-bottom: 0; }