:root {
  color-scheme: light;
  --paper: #f5f4ec;
  --card: #fcfbf6;
  --ink: #182b24;
  --muted: #58685e;
  --line: #dfe2d7;
  --green: #244d3b;
  --lime: #e5efab;
  font: 15px/1.45 system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--paper);
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
button, input { font: inherit; }
button { cursor: pointer; color: inherit; }
button:disabled { opacity: .35; cursor: default; }
a { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #779441; outline-offset: 3px; }
[hidden] { display: none !important; }
.shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(5px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
}
.masthead, .edition, .header-tools, .brand, .location { display: flex; align-items: center; }
.masthead, .edition { justify-content: space-between; }
.masthead { min-height: 48px; padding-inline: 5px; }
.brand { gap: 8px; text-decoration: none; font-size: 27px; font-weight: 850; letter-spacing: -.09em; line-height: 1; }
.brand .brand-dot { color: #658548; }
.brand-menu { position: relative; z-index: 505; }
.brand-menu summary { min-height: 44px; cursor: pointer; list-style: none; }
.brand-menu summary::-webkit-details-marker { display: none; }
.brand-menu summary::after { content: ""; width: 7px; height: 7px; border: solid var(--green); border-width: 0 2px 2px 0; transform: rotate(45deg); margin-inline: 3px 5px; }
.brand-menu summary:focus-visible { outline: 3px solid #779441; outline-offset: 3px; }
.brand-menu nav { position: absolute; inset-block-start: calc(100% + 4px); inset-inline-start: 0; width: min(240px, calc(100vw - 24px)); padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: 0 8px 24px #182b2426; }
.brand-menu nav :is(a, button) { display: flex; align-items: center; min-height: 44px; width: 100%; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; text-align: start; text-decoration: none; }
.brand-menu nav :is(a, button):is(:hover, :focus-visible) { background: #e8efe4; }
.detail-nav .brand-menu nav { inset-inline-start: auto; inset-inline-end: 0; }
.cookie-banner { position: fixed; z-index: 650; inset-inline: 8px; inset-block-end: max(8px, env(safe-area-inset-bottom)); width: min(calc(100% - 16px), 510px); margin-inline: auto; padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: 0 5px 24px #182b2430; }
.cookie-banner h2 { margin: 0; font-size: 17px; }
.cookie-banner p { margin: 5px 0; font-size: 13px; }
.cookie-banner > a { font-size: 13px; }
.cookie-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.cookie-actions .action-button { background: #e8efe4; border-color: #bccfba; color: var(--green); }
.header-tools { gap: 6px; }
.icon-button, .card-nav button { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--card); }
.search-button { background: var(--green); color: white; border-color: var(--green); }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.edition { gap: 8px; padding-inline: 6px; }
.location { border: 0; background: none; padding: 0; min-height: 44px; gap: 6px; font-size: 13px; font-weight: 650; color: var(--green); text-align: left; }
.location > :first-child, .counter { flex: none; }
#location-gps-status { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.location-results .location-context { font-size: 11px; font-weight: 500; color: var(--muted); }
.location .icon { width: 16px; height: 16px; }
.counter { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.feed-radius { margin: 0 6px 6px; color: var(--muted); font-size: 12px; }
.route-card { display: flex; flex-direction: column; flex: 1; touch-action: none; border: 1px solid var(--line); border-radius: 19px; background: var(--card); overflow: hidden; }
.cover { flex: 1; min-height: 170px; position: relative; isolation: isolate; background: #344c3b; color: white; }
.card-body { display: flex; flex-direction: column; }
.cover > img, .cover-map, .cover::after { position: absolute; inset: 0; width: 100%; height: 100%; }
.cover > img { object-fit: cover; }
.cover-map { z-index: 0; isolation: isolate; pointer-events: none; background: #d9e5d7; }
.cover-route-line { filter: drop-shadow(0 0 2px #fff); }
.cover::after { content: ""; z-index: 1; background: linear-gradient(180deg, #17241a38, transparent 31%, #101e1999 65%, #101e19f2 100%); pointer-events: none; }
.cover-top, .cover-copy, .card-nav { position: absolute; z-index: 2; }
.cover-top { display: flex; justify-content: flex-end; align-items: flex-start; gap: 6px; top: 9px; left: 9px; right: 9px; pointer-events: none; }
.cover-top > * { pointer-events: auto; }
.photo-credit, .cover-map-button { border: 0; border-radius: 12px; padding: 6px 9px; font-size: 11px; line-height: 1.25; }
.cover-map-button { margin-right: auto; min-height: 40px; font-weight: 750; background: #fcfbf6f2; color: var(--green); }
.cover-map-credit { max-width: 65%; border-radius: 6px; padding: 3px 5px; font-size: 9px; line-height: 1.25; background: #fcfbf6f2; color: var(--ink); text-align: right; }
.photo-credit { background: #15251dcc; color: white; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.cover-copy { bottom: 20px; left: 18px; right: 18px; }
.route-context { font-size: 10px; letter-spacing: .13em; font-weight: 750; color: #e5efab; margin: 0 0 5px; }
h1, .cover-copy h2 { font-family: Georgia, serif; font-size: clamp(27px, 7vw, 43px); font-weight: 500; line-height: 1.04; letter-spacing: -.035em; margin: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-nav { top: 42%; left: 8px; right: 8px; display: flex; justify-content: space-between; pointer-events: none; }
.card-nav button { pointer-events: auto; background: #182b24b8; color: white; border-color: #ffffff5e; }
.stats { display: flex; border-bottom: 1px solid var(--line); }
.stat { flex: 1; min-width: 0; padding: 7px 5px; text-align: center; overflow-wrap: anywhere; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat strong, .stat small { display: block; }
.stat strong { font-size: clamp(16px, 4.4vw, 22px); font-weight: 750; letter-spacing: -.045em; }
.stat small { font-size: 10px; color: var(--muted); }
.previews { display: flex; gap: 7px; padding: 7px 7px 0; }
.preview { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 0; text-align: left; background: #edf0e5; border: 1px solid var(--line); border-radius: 13px; overflow: hidden; }
.mini-map { display: block; width: 100%; height: clamp(84px, 16dvh, 150px); }
.mini-map { isolation: isolate; pointer-events: none; background: #e1e9d9; }
.map-credits { padding: 3px 8px 0; font-size: 9px; line-height: 1.25; color: var(--muted); }
.route-profile { padding: 5px 8px 0; }
.profile-chart { margin: 0; color: var(--green); }
.profile-chart figcaption { font-size: 11px; font-weight: 650; }
.profile-chart svg { display: block; width: 100%; height: auto; }
.route-profile .profile-chart svg { max-height: 94px; }
.profile-chart svg text { fill: var(--muted); font: 10px system-ui, sans-serif; }
.card-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 7px; }
.action-button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 7px; font-weight: 700; font-size: 12px; text-decoration: none; }
.action-button .icon { width: 17px; height: 17px; }
.card-actions .action-button { min-height: clamp(44px, 7dvh, 62px); }
.primary { background: var(--lime); border-color: var(--lime); color: #253821; }
.like[aria-pressed="true"] .icon { color: #ae263b; fill: #ae263b; }
.save[aria-pressed="true"] .icon { color: var(--green); fill: var(--green); }
.detail-preferences { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 440px) {
  .card-actions .action-button { flex-direction: column; gap: 3px; padding: 4px 2px; line-height: 1.15; }
  .card-actions .primary { flex-direction: column-reverse; }
}
.gesture-hint { text-align: center; color: var(--muted); margin: 5px 0 0; font-size: 11px; }
.gesture-hint span { font-weight: 800; margin-left: 5px; color: var(--green); }
.feed-empty { display: grid; flex: 1; place-content: center; justify-items: center; gap: 12px; padding: 20px; text-align: center; }
.feed-empty h2 { margin: 0; font-size: 19px; }
.status { position: fixed; z-index: 700; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: max-content; max-width: calc(100vw - 24px); text-align: center; color: white; background: var(--green); border-radius: 10px; padding: 7px 11px; margin: 0; font-size: 12px; pointer-events: none; }
.status:empty { display: none; }
dialog { color: var(--ink); background: var(--card); width: min(calc(100% - 20px), 532px); padding: 0; border: 1px solid var(--line); border-radius: 22px; max-height: 88dvh; }
dialog::backdrop { background: #11251bb0; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px 17px 10px; border-bottom: 1px solid var(--line); }
.panel-head h2 { font: 500 28px/1.1 Georgia, serif; margin: 7px 0; overflow-wrap: anywhere; }
.panel-head button { flex: none; }
.panel-content { padding: 14px 17px 19px; overflow-wrap: anywhere; }
.panel-content > :first-child { margin-top: 0; }
.panel-content h3 { margin-bottom: 6px; font-size: 15px; }
.panel-content p { color: var(--muted); }
.panel-buttons { display: grid; gap: 8px; }
.panel-buttons .action-button { justify-content: flex-start; padding-inline: 13px; font-size: 14px; }
.panel-input { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 12px; padding: 8px 11px; font-size: 16px; color: var(--ink); background: white; }
.route-list { list-style: none; padding: 0; margin: 12px 0 0; }
.route-list li { margin: 5px 0; }
.route-list :is(button, a) { width: 100%; min-height: 44px; text-align: left; justify-content: flex-start; }
.facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); margin: 0 0 12px; }
.facts dt, .facts dd { padding: 6px 0; margin: 0; border-bottom: 1px solid var(--line); }
.facts dt { font-weight: 650; padding-right: 6px; }
.map-full { height: min(320px, 43dvh); border: 1px solid var(--line); border-radius: 12px; margin-block: 10px; isolation: isolate; }
.leaflet-container .leaflet-control-attribution { font-size: 9px; }
.detail-bar { position: sticky; top: 0; z-index: 500; background: var(--paper); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top); }
.detail-nav, .detail-page { width: min(100%, 780px); margin-inline: auto; padding-inline: max(12px, env(safe-area-inset-left), env(safe-area-inset-right)); }
.detail-nav { display: flex; align-items: center; justify-content: space-between; min-height: 56px; gap: 10px; }
.detail-tools .brand-name { display: none; }
.back-to-feed { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; }
.back-to-feed { color: var(--green); font-weight: 750; text-decoration: none; }
.detail-page { padding-block: 13px max(18px, env(safe-area-inset-bottom)); }
.legal-page section { scroll-margin-top: 70px; }
.legal-page h2 { font-size: 18px; margin: 20px 0 6px; }
.cookie-inventory dt { font-weight: 700; margin-top: 8px; }
.cookie-inventory dd { margin: 2px 0 0; }
.detail-record { background: var(--card); border: 1px solid var(--line); border-radius: 18px; }
.detail-record h1 { display: block; margin: 0; padding: 17px 17px 6px; }
.detail-record .map-full { height: clamp(260px, 49dvh, 480px); scroll-margin-top: 64px; }
.route-map-surface { position: relative; display: flow-root; }
.map-fullscreen-toggle { position: absolute; z-index: 1; top: 18px; right: 8px; padding-inline: 9px; }
.route-map-dialog {
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
}
.route-map-dialog .route-map-surface, .route-map-dialog .map-full { height: 100%; }
.route-map-dialog .map-full { margin: 0; border: 0; border-radius: 0; }
.route-map-dialog .map-fullscreen-toggle { top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); }
.route-map-dialog .leaflet-top { top: env(safe-area-inset-top); }
.route-map-dialog .leaflet-left { left: env(safe-area-inset-left); }
.route-map-dialog .leaflet-bottom { bottom: env(safe-area-inset-bottom); }
body:has(.route-map-dialog[open]) { overflow: hidden; }
.detail-record .detail-preferences { margin-bottom: 12px; }
.detail-preferences .action-button { min-height: 38px; }
.route-quick-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.route-quick-facts > div, .mide-grid > div, .weather-days > li { border: 1px solid var(--line); border-radius: 9px; background: #f2f5eb; padding: 7px; }
.route-quick-facts dt, .route-quick-facts dd, .mide-grid dt, .mide-grid dd { padding: 0; margin: 0; border: 0; }
.route-quick-facts dt, .mide-grid dt, .weather-days span { font-size: 11px; color: var(--muted); }
.route-quick-facts dd, .mide-grid dd { font-weight: 750; }
.detail-mide { border: 1px solid var(--line); border-radius: 12px; padding: 8px 9px; }
.detail-mide h3 { margin: 0 0 6px; }
.mide-grid, .weather-days { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin: 0; }
.mide-grid > div { text-align: center; }
.mide-grid dt { font-size: 10px; }
.detail-mide small, .weather-days + small { color: var(--muted); }
.route-diagrams .profile-chart { padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; }
.route-tags { display: flex; flex-wrap: wrap; gap: 5px; padding: 0; margin: 10px 0; list-style: none; }
.route-tags li { border: 1px solid var(--line); border-radius: 999px; padding: 3px 8px; font-size: 11px; color: var(--green); }
.weather-days { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; list-style: none; margin-bottom: 6px; }
.weather-days li { display: grid; gap: 3px; }
.detail-record .gpx-note { margin: -7px 0 12px; font-size: 12px; }
.route-notices, .route-context-links { list-style: none; margin: 0 0 12px; padding: 0; }
.route-notices li { border-inline-start: 3px solid #9a6119; border-radius: 6px; background: #fbf1d9; padding: 8px 11px; margin-block: 6px; }
.route-notices p { margin: 4px 0; }
.route-context-links { display: flex; flex-wrap: wrap; gap: 6px; }
.route-context-links a { display: inline-block; border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px; color: var(--green); }
.route-context-groups details { margin-bottom: 12px; }
.route-context-groups summary { cursor: pointer; }
.group-type { margin: 0 0 8px; font-weight: 700; }
.group-members-note { margin: 5px 0 10px; font-size: 12px; }
.group-feed-page { width: 100%; padding: 4px max(6px, env(safe-area-inset-right)) 4px max(6px, env(safe-area-inset-left)); }
.group-feed-page .detail-record { border: 0; background: none; }
.group-feed-page .detail-record h1 { padding: 3px 6px; font-size: clamp(19px, 4.8vw, 25px); }
.group-feed-page #detail-content { padding: 0; }
.group-carousel { display: flex; flex-direction: column; min-height: calc(100dvh - 102px); gap: 4px; }
.group-carousel-bar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-inline: 5px; }
.group-carousel-bar .panel-input { width: auto; min-width: 0; margin-right: auto; }
.group-carousel-bar .counter { margin-block: 4px; }
.group-carousel .card-actions:has(.like[hidden]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.notice-level { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 700; color: #704614; }
.route-notices li[data-severity="info"] { background: #edf4f8; border-color: #426e85; }
.route-notices li[data-severity="info"] .notice-level { color: #30566a; }
.route-notices li[data-severity="closed"] { background: #faece9; border-color: #9c4239; }
.route-notices li[data-severity="closed"] .notice-level { color: #803830; }
.technical-link { margin-top: 12px; font-size: 14px; padding-inline: 12px; }
.card-actions [aria-disabled="true"] { opacity: .35; }
.route-transport { border: 1px solid var(--line); border-radius: 12px; padding: 10px; margin-block: 12px; }
.route-transport h3 { margin: 0 0 5px; }
.transport-note, .transport-method { font-size: 12px; color: var(--muted); }
.route-transport .transport-note { margin: 0 0 9px; }
.transport-date { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.transport-date input { min-width: 0; max-width: 160px; min-height: 42px; font: inherit; border: 1px solid var(--line); border-radius: 8px; padding: 5px 7px; color: var(--green); background: #fff; }
.transport-mode h4 { display: flex; align-items: center; gap: 6px; margin: 12px 0 5px; font-size: 14px; }
.transport-mode-icon { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #e4edda; color: #28533a; font-weight: 800; }
.transport-mode-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.transport-mode[data-mode="rail"] .transport-mode-icon { background: #e4edf6; color: #315b7c; }
.transport-mode[data-mode="taxi"] .transport-mode-icon { background: #fff0bf; color: #6e5010; }
.transport-stops { padding: 0; margin: 0; list-style: none; }
.transport-stop { border-top: 1px solid var(--line); padding: 8px 0; }
.transport-stop-title { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.transport-stop-title strong { overflow-wrap: anywhere; font-size: 14px; }
.transport-distance, .transport-service-state { color: var(--muted); font-size: 12px; }
.transport-stop[data-scheduled="true"] .transport-service-state { color: var(--green); }
.transport-lines { font-size: 12px; font-weight: 700; margin-top: 3px; overflow-wrap: anywhere; }
.transport-lines:empty { display: none; }
.transport-stop .transport-service-state { margin: 3px 0; }
.transport-stop .transport-links { margin: 1px 0 0; font-size: 12px; }
.transport-links a { display: inline-block; padding-block: 6px; }
.route-transport summary { cursor: pointer; padding-block: 9px; }
.transport-more summary { font-size: 13px; color: var(--green); }
.transport-method { border-top: 1px solid var(--line); margin-top: 6px; }
.transport-method p { margin-block: 6px; }
@media (max-width: 600px) {
  dialog { position: fixed; inset: auto 0 0; width: 100%; max-width: none; margin: 0; border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom); }
}
@media (max-height: 620px) and (max-width: 699px) {
  .cover { min-height: 140px; }
  .cover-copy { bottom: 13px; }
}
@media (min-width: 700px) {
  .route-card { flex-direction: row; }
  .card-body { width: clamp(285px, 37vw, 620px); }
  .map-strip { display: flex; flex: 1; min-height: 160px; flex-direction: column; }
  .previews { flex: 1; flex-direction: column; }
  .mini-map { flex: 1; height: 0; }
  .card-body:has(.map-strip[hidden]) .card-actions { flex: 1; grid-template-columns: 1fr; }
  .cover-copy { bottom: 28px; left: 25px; right: 25px; }
}