/* A journey thread's programme: the stops map, the stop list and the days.
   functions/_lib/news-event-details.ts writes the markup; assets/news-journey-map.js
   draws the map in the same two palettes (keep --pin and --sea in step with it). */
.journey { --pin: #1b2c55; --pin-ink: #ffffff; --sea: #dfe6ea; }
:root[data-theme="dark"] .journey { --pin: #d3b36a; --pin-ink: #0f1524; --sea: #0b111e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .journey { --pin: #d3b36a; --pin-ink: #0f1524; --sea: #0b111e; } }

/* The map, and MapLibre's own controls in the page's colours. */
.journey-map { width: 100%; min-height: 300px; max-height: min(70vh, 560px); margin-top: .9rem; border: 1px solid var(--rule); border-radius: 2px; background: var(--sea); overflow: hidden; }
.journey-map .maplibregl-ctrl-group { background: var(--panel); border: 1px solid var(--rule); border-radius: 2px; box-shadow: none; }
.journey-map .maplibregl-ctrl-group button { width: 44px; height: 44px; }
.journey-map .maplibregl-ctrl-group button + button { border-top: 1px solid var(--rule); }
.journey-map .maplibregl-ctrl button:not(:disabled):hover { background-color: var(--wash); }
.journey-map .maplibregl-ctrl button:focus-visible { box-shadow: none; }
:root[data-theme="dark"] .journey-map .maplibregl-ctrl-icon { filter: invert(.9); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .journey-map .maplibregl-ctrl-icon { filter: invert(.9); } }
/* One line of credit, no toggle: MapLibre's info button would sit over it. */
.journey-map .maplibregl-ctrl-attrib { margin: 0; padding: 1px 6px; background: color-mix(in srgb, var(--panel) 85%, transparent); color: var(--faint); font-size: 11px; }
.journey-map .maplibregl-ctrl-attrib-button { display: none; }
.journey-map .maplibregl-ctrl-attrib a { color: var(--faint); }
.journey-pop .maplibregl-popup-content { background: var(--panel); color: var(--ink); border: 1px solid var(--rule); border-radius: 2px; padding: 8px 12px; font: 14px/1.45 inherit; box-shadow: 0 2px 10px rgb(0 0 0 / .22); }
.journey-pop strong { color: var(--ink); }
.journey-pop a { color: var(--accent); text-underline-offset: 3px; }
.journey-pop .maplibregl-popup-tip { display: none; }

/* The stop number, on the map and in the lists. */
.stop-n { display: inline-grid; place-items: center; flex: none; min-width: 1.5rem; height: 1.5rem; padding: 0 .3rem; border-radius: .75rem; background: var(--pin); color: var(--pin-ink); font-size: .78rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }

/* Stops, in programme order. */
.journey .stops-h { margin: 1.4rem 0 0; }
ol.stops { list-style: none; margin: .6rem 0 0; padding: 0; columns: 2 22rem; column-gap: 2rem; }
ol.stops > li { break-inside: avoid; padding: .55rem 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 5rem; }
ol.stops > li:target { background: var(--wash); box-shadow: -.5rem 0 0 var(--wash), .5rem 0 0 var(--wash); }
.stop { margin: 0; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.stop span:not(.stop-n) { color: var(--faint); font-size: .9rem; }
ol.stops ul { list-style: none; margin: .3rem 0 0 2rem; padding: 0; }
ol.stops ul li { padding: .15rem 0; font-size: .95rem; line-height: 1.4; }
ol.stops ul a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
ol.stops ul a:hover { text-decoration-color: var(--gold); }
ol.stops details { margin-left: 2rem; }
ol.stops summary { cursor: pointer; color: var(--accent); font-size: .9rem; min-height: 44px; display: flex; align-items: center; }
.stop-rest { margin: .3rem 0 0; color: var(--faint); font-size: .9rem; }

/* Day by day: a date column, the day's places (each a link to its stop) and the summary. */
ol.days { list-style: none; margin: .4rem 0 0; padding: 0; }
ol.days > li { display: grid; grid-template-columns: 6.5rem 1fr; gap: .15rem 1rem; padding: .6rem 0; border-bottom: 1px solid var(--rule); }
ol.days time { color: var(--faint); font-size: .92rem; padding-top: .1rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
ol.days p { margin: 0; }
ol.days .where { display: flex; flex-wrap: wrap; gap: .25rem .75rem; font-weight: 600; }
ol.days .where a { display: inline-flex; align-items: center; gap: .35rem; color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
ol.days .where a:hover { text-decoration-color: var(--gold); }
ol.days .where .stop-n { min-width: 1.25rem; height: 1.25rem; font-size: .7rem; }
ol.days .what { color: var(--muted); }
@media (max-width: 30rem) { ol.days > li { grid-template-columns: 1fr; } }