/* Travel page (PW-024): dot-matrix map, trip logs and galleries. Loaded by travel.html only. */

.travel-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 2px;
  margin-top: 2rem;
}

.travel-stats > div {
  background: var(--surface);
  padding: 1rem 1.1rem 1.15rem;
  display: grid;
  align-content: start;
  gap: 0.45rem;
}

.travel-stats dt { order: 2; font-family: var(--font-mono); font-size: var(--step-small); color: var(--muted); }
.travel-stats dd { order: 1; font-family: var(--font-mono); font-size: var(--step-head); line-height: 1; letter-spacing: -0.03em; }

/* Timeline (PW-047): a row per year, a bar per trip. JS lays the bars out; --tl-lane and --tl-foot set the
   row height and the smallest tappable bar. */
.timeline {
  --tl-label: 3rem;
  --tl-lane: 28px;
  --tl-foot: 16px;
  position: relative;
}

@media (pointer: coarse), (max-width: 640px) {
  .timeline { --tl-label: 2.5rem; --tl-lane: 36px; --tl-foot: 24px; }
}

.tl-head,
.tl-year {
  display: grid;
  grid-template-columns: var(--tl-label) minmax(0, 1fr);
}

.tl-months {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  padding-bottom: 0.35rem;
  font: 0.6875rem/1 var(--font-mono);
  color: var(--muted);
}

.tl-months > span { padding-left: 4px; }
.tl-months .init { display: none; }
@media (max-width: 640px) {
  .tl-months .full { display: none; }
  .tl-months .init { display: inline; }
}

.tl-years { list-style: none; }
.tl-year { border-top: 1px solid var(--rule); }
.tl-year:last-child { border-bottom: 1px solid var(--rule); }

.tl-label,
.tl-none {
  font: 0.75rem/var(--tl-lane) var(--font-mono);
  color: var(--muted);
}

.tl-none { padding-left: 4px; opacity: 0.7; }

/* A hairline at the start of every month */
.tl-track {
  position: relative;
  background: linear-gradient(to right, var(--rule) 1px, transparent 1px) 0 0 / calc(100% / 12) 100%;
}

.timeline .tl-tip { width: max-content; max-width: min(330px, 100%); } /* max-content: an absolutely placed box would otherwise wrap at the room left of its anchor */

.tl-bar {
  position: absolute;
  padding: 0;
  border: 0;
  background: none;
  height: var(--tl-lane);
  cursor: pointer;
}

.tl-mark {
  position: absolute;
  top: 50%;
  height: 12px;
  margin-top: -6px;
  border-radius: 1px;
  background: var(--visit-1);
  transition: background var(--fast) var(--ease);
}

.tl-bar:hover .tl-mark { background: var(--visit-2); }
.tl-bar:focus-visible { outline: none; }
.tl-bar:focus-visible .tl-mark { background: var(--visit-2); outline: 2px solid var(--accent); outline-offset: 2px; }
.tl-bar[aria-pressed="true"] .tl-mark { background: var(--visit-3); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--visit-3); }

.map-legend .key-bar::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.45rem;
  width: 14px;
  height: 8px;
  background: var(--visit-1);
}
.map-legend .key-bar.on::before { background: var(--visit-3); }

/* Map */
.map-tabs-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.map-tabs-wrap.has-overflow { grid-template-columns: auto minmax(0, 1fr) auto; }
.map-tabs-wrap .tabs-arrow { display: none; }
.map-tabs-wrap.has-overflow .tabs-arrow { display: inline-grid; }

/* Arrows either side of the trip list: one click moves it about a page */
.tabs-arrow {
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  font: 500 1rem/1 var(--font-mono);
  cursor: pointer;
}
.tabs-arrow:hover:not(:disabled) { background: var(--surface); border-color: var(--ink); }
.tabs-arrow:disabled { opacity: 0.3; cursor: default; }
.tabs-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.map-tabs {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.map-tabs button {
  font-family: var(--font-mono);
  font-size: var(--step-small);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  padding: 0.55rem 0;
  min-height: 44px;
  white-space: nowrap;
  cursor: pointer;
}

.map-tabs button:hover { color: var(--ink); }
.map-tabs button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--accent); }

.map-frame {
  position: relative;
  background: var(--surface);
  aspect-ratio: 2.3 / 1;
  min-height: 260px;
  overflow: hidden;
  touch-action: pan-y;
}

.map-frame canvas { width: 100%; height: 100%; cursor: grab; }
/* The arrowheads' canvas, over the map and out of the pointer's way */
.map-frame canvas.map-flow { position: absolute; inset: 0; pointer-events: none; }
.map-frame canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* How many trips stopped at a place: once, twice, three or more. Deeper green = more visits
   (on the dark theme, "deeper" reads as brighter). */
:root { --visit-1: #5f9e77; --visit-2: #1a6b3c; --visit-3: #0b3a1f; }
:root[data-theme="dark"] { --visit-1: #3f7d5a; --visit-2: #57b884; --visit-3: #a6ecc4; }

.map-controls {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  display: grid;
  gap: 2px;
}

.map-controls button {
  min-width: 34px;
  height: 34px;
  padding: 0 0.4rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  font: 500 var(--step-small) var(--font-mono);
  cursor: pointer;
}

.map-controls button:hover { background: var(--surface-2); }
.map-controls button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.map-readout {
  position: absolute;
  left: 0.75rem;
  bottom: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
  pointer-events: none;
}

/* Shown briefly when you scroll over the map before clicking into it */
.map-wheel-hint {
  position: absolute;
  left: 50%;
  bottom: 0.8rem;
  transform: translateX(-50%);
  margin: 0;
  padding: 0.4rem 0.75rem;
  background: var(--tip-bg);
  color: var(--tip-fg);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  white-space: nowrap;
  pointer-events: none;
}

.map-wheel-hint[hidden] { display: none; }

.map-tip {
  position: absolute;
  z-index: 2;
  max-width: 260px;
  padding: 0.55rem 0.7rem;
  background: var(--tip-bg);
  color: var(--tip-fg);
  border-radius: var(--radius);
  font-size: var(--step-small);
  line-height: 1.35;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 12px));
}

.map-tip[hidden] { display: none; }
.map-tip strong { font-weight: 500; }
.map-tip .meta { color: var(--tip-muted); display: block; margin-top: 0.15rem; }

.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin-top: 0.6rem;
}

.map-legend .key-dot::before,
.map-legend .key-line::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.45rem;
}

.map-legend .key-dot::before { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.map-legend .key-dot.v1::before { background: var(--visit-1); }
.map-legend .key-dot.v2::before { background: var(--visit-2); width: 9px; height: 9px; }
.map-legend .key-dot.v3::before { background: var(--visit-3); width: 10px; height: 10px; }
.map-legend .map-hint { margin-left: auto; }
.map-legend .hint-touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .map-legend .hint-mouse { display: none; }
  .map-legend .hint-touch { display: inline; }
}
.map-legend .key-line::before { width: 18px; border-top: 2px dashed var(--accent); }

/* Trip logs */
.link-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  cursor: pointer;
}

.trip-list {
  list-style: none;
  display: grid;
  gap: clamp(56px, 7vw, 96px);
}
.trip-list[hidden] { display: none; }

/* Trip log filters (PW-046): one row per filter, a small caps caption in its own column, then outlined
   chips (single choice, with how many each would show). The caption reads as a label and the chips as
   buttons, so the two don't blend (Jon, 2026-11-01). */
.trip-filters {
  display: grid;
  gap: 0.75rem;
}

.filter-group {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  align-items: start;
  gap: 0.5rem 1rem;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.filter-label {
  display: flex;
  align-items: center;
  min-height: 44px; /* lines up with the first row of chips when they wrap */
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.filter-group button {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--step-small);
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  padding: 0 0.85rem;
  min-height: 44px;
  cursor: pointer;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.filter-group button:hover { background: var(--surface); }
.filter-group button[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
.filter-group button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip-count { margin-left: 0.4rem; font-size: 0.75rem; color: var(--muted); }

/* Phones: the caption sits above its chips */
@media (max-width: 560px) {
  .filter-group { grid-template-columns: 1fr; gap: 0.25rem; }
  .filter-label { min-height: 0; }
}

/* What the filters let through, or why nothing shows (with the way out) */
.filter-status {
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--step-small);
  color: var(--muted);
}
.filter-status:empty { display: none; }
.filter-status.is-empty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  padding: 1.25rem;
  border: 1px dashed var(--line);
  color: var(--ink);
}

/* One group per year (PW-057): a button with the year and its trip count, and the logs under it. Earlier years
   start folded; a picked trip shows on its own with the button out of the way. The top margin keeps the
   first year bar off the filters even when the status line above is empty and hidden (Jon, 2026-11-01). */
.year-list {
  list-style: none;
  display: grid;
  gap: 2px;
  margin-top: 1.75rem;
}

.year-toggle {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  width: 100%;
  min-height: 56px;
  padding: 0.85rem 1.1rem;
  border: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--step-small);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--fast) var(--ease);
}

.year-toggle:hover { background: var(--surface-2); }
.year-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.year-toggle[hidden] { display: none; }
.year-name { font-size: var(--step-lead); letter-spacing: -0.02em; }
.year-count { color: var(--muted); }
.year-toggle::after {
  content: '+';
  margin-left: auto;
  font-size: 1.25rem;
  line-height: 1;
  align-self: center;
}
.year-toggle[aria-expanded="true"]::after { content: '\2212'; }

/* An open year's logs, spaced off its button and the next one */
.year-trips { margin: clamp(32px, 4vw, 56px) 0 clamp(56px, 7vw, 96px); }
.year-group:last-child .year-trips { margin-bottom: 0; }

.trip-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(220px, 26vw, 300px);
  gap: 0.5rem 2rem;
  align-items: start;
  margin-bottom: 1.25rem;
}

/* The mini route map (PW-044) over the "Show on map" button */
.trip-side { display: grid; gap: 0.6rem; justify-items: start; }
.trip-side .btn { justify-self: end; }

.mini-map {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 2.4 / 1;
  padding: 0;
  border: 0;
  background: var(--surface);
  overflow: hidden;
  cursor: pointer;
}

.mini-map canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.mini-map:hover { outline: 1px solid var(--line); }

.trip-head h3 {
  font-size: var(--step-head);
  margin-bottom: 0.5rem;
}

.trip-head .note {
  max-width: var(--measure);
  margin-top: 0.75rem;
}

.trip-route {
  font-family: var(--font-mono);
  font-size: var(--step-small);
  color: var(--accent);
  margin-top: 0.75rem;
  max-width: 52rem;
}

.gallery {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 0.75rem;
}

.gallery button {
  display: grid;
  gap: 0.4rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: zoom-in;
}

.gallery img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--surface);
  outline: 2px solid transparent;
  outline-offset: 3px;
  transition: outline-color var(--fast) var(--ease);
}

/* A photo (or place) a map dot just pointed at */
.gallery li.is-linked img { outline-color: var(--accent); }

/* A place in the route line that has photos: it jumps to them */
.route-stop {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: underline dotted;
  text-underline-offset: 0.3em;
  cursor: pointer;
}
.route-stop:hover { text-decoration-style: solid; }
.route-stop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (pointer: coarse) {
  .route-stop { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* A trip with no photos yet: a hatched, dashed box where the gallery will go */
.gallery-empty {
  display: grid;
  place-items: center;
  min-height: clamp(120px, 16vw, 168px);
  padding: 1.25rem;
  border: 1px dashed var(--line);
  background: repeating-linear-gradient(135deg, transparent 0 9px, var(--rule) 9px 10px);
  font-family: var(--font-mono);
  font-size: var(--step-small);
  color: var(--muted);
  text-align: center;
}

.gallery-empty span { background: var(--bg); padding: 0.3rem 0.7rem; }

.gallery button:hover img,
.gallery button:focus-visible img { outline-color: var(--accent); }

/* "More photos": the rest of a trip, under its 5 or 10 highlights */
.trip-list .more-bar,
#food .more-bar { margin: 1rem 0 0; }
.gallery-more { margin-top: 1rem; }
.gallery-more .more-place {
  margin: 1.5rem 0 0.6rem;
  font: 500 var(--step-small) var(--font-mono);
  color: var(--muted);
}
.gallery-more .more-place:first-child { margin-top: 0; }
.gallery-more[hidden] { display: none; }

/* Food from everywhere (PW-046): the same tiles as a trip's photos, each with its dish, place and trip underneath */
.food-gallery + .more-bar,
.food-gallery + .gallery-more { margin-top: 0.75rem; }
/* The ten picks are a 5 by 2 grid on wide screens and 2 by 5 below that; "More food" keeps the same columns */
.food-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .food-gallery { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.gallery .dish { font-size: var(--step-small); line-height: 1.3; }
.gallery .dish + .meta { margin-top: -0.2rem; }
/* Jon's top 10 are numbered before the dish, in the same mono green as the ranks on Media */
.food-top { counter-reset: rank; }
.food-top > li { counter-increment: rank; }
.food-top .dish::before {
  content: counter(rank, decimal-leading-zero);
  margin-right: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--accent);
}

/* Lightbox */
.lightbox {
  border: 0;
  padding: 0;
  margin: auto;
  max-width: min(1200px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  background: var(--bg);
  color: var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
}

.lightbox::backdrop { background: var(--backdrop); }

.lightbox img {
  display: block;
  max-width: 100%;
  max-height: calc(100dvh - 140px);
  width: auto;
  height: auto;
  margin: 0 auto;
  background: var(--surface);
}

.lightbox-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
}

.lightbox-caption { font-size: var(--step-small); }
.lightbox-caption .meta { display: block; margin-top: 0.15rem; }
.lightbox-nav { display: flex; gap: 0.5rem; flex-shrink: 0; }

/* Back to all trips (Jon, 2026-11-02): floats at the bottom while one trip is picked, and returns to every
   trip where you left the page. Above the mascot, under the nav and the photo viewer. */
.back-to-all {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 45;
  background: var(--ink);
  color: var(--bg);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
}

.back-to-all:hover { background: var(--accent); color: var(--accent-ink); }
.back-to-all:active { transform: translateX(-50%) translateY(1px); }
.back-to-all:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.back-to-all[hidden] { display: none; }

@media (max-width: 640px) {
  .map-frame { aspect-ratio: 1.3 / 1; }
  .trip-head { grid-template-columns: 1fr; }
  .trip-side .btn { justify-self: start; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
}