/* Trips (trips.js), a trip storybook (tripbook.js), and a trip's route on the map (map.js).
   Above the Storybook: Trips 36, a trip storybook 37; the map, the viewer and stories go over them. */

.trips-view {
  background: var(--bg); color: var(--fg); z-index: 36; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; animation: rise .26s cubic-bezier(.2,.8,.2,1);
}
.trips-view .m-title { padding-bottom: 10px; }
.trips-list { max-width: 640px; margin: 0 auto; padding: 4px 14px calc(var(--safe-b) + 32px); }
.trips-year { font-size: 17px; font-weight: 800; margin: 18px 2px 10px; letter-spacing: -.01em; display: flex; gap: 8px; align-items: baseline; }
.trips-year span { color: var(--muted); font-size: 12.5px; font-weight: 600; }

.trip { margin: 0 0 26px; }
.trip-cover {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; border: 0; padding: 0;
  border-radius: 18px; overflow: hidden; background: var(--tile); color: #fff;
}
.trip-cover img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.trip-lbl {
  position: absolute; inset: auto 0 0 0; padding: 48px 16px 13px; text-align: left;
  background: linear-gradient(transparent, rgba(0,0,0,.72));
}
.trip-lbl b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.015em; line-height: 1.2; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.trip-lbl span { display: block; font-size: 13px; opacity: .9; margin-top: 2px; }
.trip-meta { color: var(--muted); font-size: 13px; margin: 9px 2px 0; }
.trip-meta:empty { display: none; }
.trip-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.trip-actions .tab { display: inline-flex; align-items: center; gap: 6px; }
.trip-actions .tab svg { width: 15px; height: 15px; flex: none; }
.trip-actions .trip-fly { padding: 8px 13px; }
.trips-note { color: var(--muted); font-size: 12.5px; text-align: center; margin: 8px 8px 0; }
.trips-note:empty { display: none; }

/* the "Trips" row at the top of the Storybook */
.trips-row h2 { align-items: center; }
.trips-all { margin-left: auto; border: 0; background: none; color: var(--fg); font-weight: 700; font-size: 13.5px; padding: 4px 0; }

/* a trip's route on the map */
.trip-stop { display: grid !important; place-items: center; }
.trip-stop span {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  background: #0eadff; color: #fff; font-weight: 800; font-size: 13px;
  border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.leaflet-tooltip.trip-stop-tip {
  font: 700 12.5px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #121214;
  padding: 4px 9px; border: 0; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.leaflet-tooltip.trip-stop-tip::before { display: none; }

/* the Trips list: hidden trips */
.trip.is-hidden { opacity: .62; }
.trips-hidden-btn { display: block; margin: 6px auto 16px; }
.trips-hidden-btn[aria-expanded="true"] { background: var(--chip-on); color: var(--chip-on-fg); }

/* ------------------------------------------------------------- a trip storybook (tripbook.js) */
.tripbook {
  background: var(--bg); color: var(--fg); z-index: 37; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; animation: rise .26s cubic-bezier(.2,.8,.2,1);
}
.tb-top {
  position: sticky; top: 0; z-index: 5; padding-top: var(--safe-t);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}
.tb-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px 6px; }
.tb-bar-title { flex: 1; min-width: 0; text-align: center; }
.tb-bar-title b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-bar-title span { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.tb-pills { display: flex; gap: 6px; overflow-x: auto; padding: 2px 12px 10px; scrollbar-width: none; }
.tb-pills::-webkit-scrollbar { display: none; }
.tb-pills .tab { flex: none; padding: 6px 12px; font-size: 13px; max-width: 70vw; overflow: hidden; text-overflow: ellipsis; }
.tb-pills .tab[aria-current="true"] { background: var(--chip-on); color: var(--chip-on-fg); }

.tb-cover {
  position: relative; min-height: min(76vh, 680px); display: flex; flex-direction: column; justify-content: flex-end;
  color: #fff; overflow: hidden; background: #16161a;
}
.tb-hero { position: absolute; inset: 0; }
.tb-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tb-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.78)); pointer-events: none; }
.tb-cover-text { position: relative; z-index: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: 0 20px 26px; }
.tb-kicker { text-transform: uppercase; letter-spacing: .14em; font-size: 11.5px; font-weight: 800; opacity: .85; margin: 0 0 8px; }
.tb-cover h1 { font-size: clamp(30px, 8.5vw, 44px); line-height: 1.05; letter-spacing: -.025em; font-weight: 800; margin: 0 0 10px; text-wrap: balance; text-shadow: 0 2px 14px rgba(0,0,0,.35); }
.tb-when { font-size: 16px; font-weight: 700; margin: 0; }
.tb-facts { font-size: 14px; opacity: .88; margin: 4px 0 18px; }
.tb-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tb-actions .tab {
  display: inline-flex; align-items: center; gap: 6px; color: #fff; background: rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.tb-actions .tab svg { width: 15px; height: 15px; flex: none; }
.tb-actions .tb-play { background: #fff; color: #111; }

.tb-ch { max-width: 640px; margin: 0 auto; padding: 34px 14px 6px; }
.tb-ch-num { color: var(--muted); font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin: 0 2px 6px; }
.tb-ch-title { display: flex; align-items: flex-start; gap: 8px; }
.tb-ch-title h2 { flex: 1; min-width: 0; font-size: 27px; line-height: 1.12; font-weight: 800; letter-spacing: -.02em; margin: 0 2px; overflow-wrap: anywhere; }
.tb-edit { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; padding: 8px; background: var(--chip); color: var(--muted); }
.tb-edit svg { width: 100%; height: 100%; display: block; }
.tb-ch-dates { color: var(--muted); font-size: 13.5px; margin: 5px 2px 12px; }
.tb-strip { display: block; width: 100%; border: 0; padding: 0; margin: 0 0 12px; border-radius: 12px; overflow: hidden; background: var(--chip); }
.tb-strip svg { display: block; width: 100%; height: 56px; }
.tb-route { fill: none; stroke: var(--muted); stroke-opacity: .55; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.tb-route-here { fill: none; stroke: #0eadff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tb-here { fill: #0eadff; stroke: var(--bg); stroke-width: 2.5; }
.tb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; border-radius: 14px; overflow: hidden; }
@media (min-width: 600px) { .tb-grid { grid-template-columns: repeat(4, 1fr); } }
.tb-grid .tile { border-radius: 0; }
.tb-grid .tile.big { grid-column: span 2; grid-row: span 2; }
.tb-more { grid-column: 1 / -1; margin: 10px auto; }
.tb-next {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; margin: 18px 0 0; padding: 14px 16px;
  border: 0; border-radius: 16px; background: var(--chip); color: var(--fg); text-align: left;
}
.tb-next span { font-size: 11.5px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.tb-next b { font-size: 17px; }
.tb-next b::after { content: " \2192"; }
.tb-end { text-align: center; padding: 34px 0 calc(var(--safe-b) + 44px); }
.tb-end b { display: block; font-size: 22px; font-weight: 600; font-style: italic; font-family: Georgia, "Times New Roman", serif; margin: 0 0 14px; }

/* contents and edit sheets */
.tb-toc, .tb-menu { display: grid; gap: 6px; margin: 12px 0 4px; }
.tb-toc-item {
  display: grid; grid-template-columns: 28px 1fr; column-gap: 8px; align-items: baseline; width: 100%; border: 0; border-radius: 14px;
  padding: 11px 12px; background: var(--chip); color: var(--fg); text-align: left;
}
.tb-toc-item i { grid-row: span 2; font-style: normal; font-weight: 800; color: var(--muted); text-align: center; }
.tb-toc-item b { font-size: 15px; }
.tb-toc-item span { grid-column: 2; font-size: 12.5px; color: var(--muted); }
.tb-toc-item.on { box-shadow: inset 0 0 0 2px var(--fg); }
.tb-menu-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; border: 0; border-radius: 14px;
  padding: 12px 14px; background: var(--chip); color: var(--fg); text-align: left;
}
.tb-menu-item b { font-size: 15px; }
.tb-menu-item span { font-size: 12.5px; color: var(--muted); }
.tb-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin: 6px 0 4px; border-radius: 12px; overflow: hidden; }
.tb-pick .tile { border-radius: 0; }
.tb-pick .tile.on { outline: 3px solid var(--accent); outline-offset: -3px; }
.tb-pick-when { position: absolute; left: 4px; right: 4px; bottom: 3px; font-size: 10.5px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.85); text-align: left; }