/* Stylesheet for the content pages (start page, features, app, about, legal, errors).
   The map view and the routebook keep their own styles. */

/* Without a theme cookie the system scheme decides which menu entry is checked */
.theme-check-auto-dark { visibility: hidden; }
.theme-auto-light { background: var(--ui-active); font-weight: 600; }
@media (prefers-color-scheme: dark) {
  .theme-check-auto-dark { visibility: visible; }
  .theme-check-auto-light { visibility: hidden; }
  .theme-auto-dark { background: var(--ui-active); font-weight: 600; }
  .theme-auto-light { background: none; font-weight: 400; }
}

/* ===== Base (content pages) ===== */
body.site {
  margin: 0;
  min-height: 100vh;
  /* svh: height with the mobile browser bars shown, so short pages do not scroll */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--ui-bg);
  color: var(--ui-text);
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
}
.site :focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 2px; }
/* Zero-specificity link default, so every component rule below still wins */
:where(.site) a { color: var(--ui-primary); }
.site summary { cursor: pointer; list-style: none; }
.site summary::-webkit-details-marker { display: none; }
.site-main { flex: 1 1 auto; }

/* ===== Skip link: off-screen until it gets keyboard focus ===== */
.site-skip {
  position: absolute; left: 16px; top: -100px; z-index: 1040; display: flex; align-items: center; min-height: 44px; padding: 0 16px;
  border-radius: 8px; background: var(--ui-btn); color: var(--ui-on-btn); font-weight: 600; text-decoration: none;
}
.site-skip:focus { top: 8px; }

/* ===== Banner ===== */
.site-banner { background: var(--ui-banner-bg); color: var(--ui-heading); font-size: 15px; line-height: 1.4; }
.site-banner p { max-width: 1200px; margin: 0 auto; padding: 9px 20px; display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.site-banner .bi { flex: none; font-size: 17px; }
.site-banner a { color: inherit; }

/* ===== Header ===== */
.site-header { border-bottom: 1px solid var(--ui-line); background: var(--ui-bg); }
.site-header__inner { max-width: 1200px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 12px 28px; }
.site-brand {
  margin-right: auto; display: flex; align-items: center; min-height: 44px; text-decoration: none;
  font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 700; font-size: 27px; line-height: 1; letter-spacing: -.2px; color: var(--ui-heading);
}
.site-brand:hover { color: var(--ui-heading); }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; font-size: 16px; }
.site-nav__link { padding: 10px 0; text-decoration: none; color: var(--ui-muted); }
.site-nav__link[aria-current="page"] { color: var(--ui-heading); font-weight: 600; box-shadow: inset 0 -2px 0 var(--ui-primary); }
.site-header__tools { display: flex; align-items: center; gap: 8px; }
.site-iconbtn {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; box-sizing: border-box;
  border: 1px solid var(--ui-line); border-radius: 6px; color: var(--ui-heading); font-size: 20px;
}
.site-menu .site-iconbtn { font-size: 24px; }

/* Popovers (settings and mobile menu) */
.site-pop { position: relative; }
.site-pop__panel {
  position: absolute; right: 0; top: 52px; z-index: 1030; width: 240px; box-sizing: border-box;
  display: flex; flex-direction: column; padding: 6px;
  background: var(--ui-raised); border: 1px solid var(--ui-line); border-radius: 10px;
  box-shadow: 0 12px 32px -12px var(--ui-pop-shadow);
}
.site-menu__panel { width: 280px; max-width: calc(100vw - 32px); }
.site-menu__nav { display: flex; flex-direction: column; }
.site-pop__label { padding: 6px 10px 2px; font-size: 14px; font-weight: 600; letter-spacing: .3px; color: var(--ui-muted); }
.site-pop__divider { height: 1px; margin: 6px 0; border: 0; background: var(--ui-line); opacity: 1; }
.site-pop__item {
  display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; min-height: 44px; padding: 0 10px;
  border-radius: 6px; text-decoration: none; font-size: 16px; color: var(--ui-heading);
}
.site-pop__item:hover { color: var(--ui-heading); }
.site-pop__item[aria-current="true"], .site-pop__item[aria-current="page"] { background: var(--ui-active); font-weight: 600; }
.site-pop__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.site-flag { border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.site-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--ui-swatch-line); }
.site-menu { display: none; }

@media (max-width: 900px) {
  .site-nav, .site-settings { display: none; }
  .site-menu { display: block; }
}
@media (max-width: 640px) {
  .site-header__inner { padding: 8px 16px; }
}

/* ===== Footer ===== */
.site-footer { background: var(--ui-footer); color: var(--ui-on-footer); border-top: 1px solid var(--ui-footer-line); }
.site-footer :focus-visible { outline-color: var(--ui-on-footer); }
.site-footer__inner {
  max-width: 1200px; margin: 0 auto; padding: 36px 20px; display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: center; gap: 20px 48px; font-size: 15px;
}
.site-footer__brand, .site-footer__meta { display: flex; flex-direction: column; gap: 4px; }
.site-footer__brand { gap: 8px; }
.site-footer__name { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 700; font-size: 24px; line-height: 1; }
.site-footer__tagline { opacity: .8; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 0 24px; }
.site-footer__links a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: underline; }
.site-footer__links a[aria-current="page"] { font-weight: 600; }
.site-footer__copy { opacity: .7; font-size: 14px; font-variant-numeric: tabular-nums; }

/* ===== Back to top ===== */
.site-totop {
  position: fixed; right: 16px; bottom: 16px; z-index: 1020; display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
  background: var(--ui-btn); color: var(--ui-on-btn); font-size: 18px; box-shadow: 0 6px 18px -6px rgba(0,0,0,.35);
}
.site-totop[hidden] { display: none; }

/* ===== Hover only where a pointer can hover ===== */
@media (hover: hover) {
  .site-nav__link:not([aria-current="page"]):hover { color: var(--ui-heading); box-shadow: inset 0 -2px 0 var(--ui-line-strong); }
  .site-iconbtn:hover, .site-pop__item:hover { background: var(--ui-hover); }
  .site-totop:hover { background: var(--ui-btn-hover); }
  .site-footer__links a:not([aria-current="page"]):hover { text-decoration-thickness: 2px; text-underline-offset: 3px; }
}

/* ===== Shared UI pieces ===== */
.ui-card {
  background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -12px rgba(0,0,0,.12);
}
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border-radius: 8px; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.ui-btn--fill { border: 0; background: var(--ui-btn); color: var(--ui-on-btn); }
.ui-btn--fill:hover { color: var(--ui-on-btn); }
.ui-btn--line { border: 1.5px solid var(--ui-primary); background: var(--ui-surface); color: var(--ui-primary); }
.ui-btn--line:hover { color: var(--ui-primary); }
.ui-btn--block { width: 100%; min-height: 52px; font-size: 18px; }
.ui-hint { font-size: 14px; color: var(--ui-muted); }
.ui-hint:empty { display: none; }
.ui-label { font-weight: 600; color: var(--ui-heading); }
.ui-label--small { font-size: 15px; font-weight: 400; color: var(--ui-text); }
.ui-chev { transition: transform .15s; }
details[open] > summary .ui-chev { transform: rotate(180deg); }

/* Bootstrap form controls take the theme tokens */
.hero__form .form-control, .hero__form .form-select {
  height: 44px; border: 1px solid var(--ui-field); border-radius: 6px; background-color: var(--ui-surface);
  color: var(--ui-text); font-size: 17px;
}
.hero__form .form-select { padding-left: 42px; }
/* Bootstrap sets the arrow variable on .form-select itself, so the theme override has to land there too */
.site .form-select { --bs-form-select-bg-img: var(--ui-select-arrow, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")); }
.hero__form .form-control:focus, .hero__form .form-select:focus {
  border-color: var(--ui-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-primary) 30%, transparent);
}
.hero__form .form-check-input { width: 16px; height: 16px; margin: 0; border-color: var(--ui-field); background-color: var(--ui-surface); }
.hero__form .form-check-input:checked { background-color: var(--ui-btn); border-color: var(--ui-btn); }
.hero__form .form-control::placeholder { color: var(--ui-muted); opacity: 1; }

/* ===== Start page hero ===== */
.hero__inner {
  max-width: 1200px; margin: 0 auto; padding: 56px 20px 64px; box-sizing: border-box;
  display: flex; flex-direction: row-reverse; flex-wrap: wrap; gap: 48px; align-items: flex-start;
}
.hero__form { flex: 1 1 480px; min-width: 0; }
.hero__text { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 22px; padding-top: 8px; }
.hero__title { margin: 0; font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 700; font-size: 54px; line-height: 1.04; letter-spacing: -.5px; color: var(--ui-heading); }
.hero__lead { margin: 0; font-size: 19px; color: var(--ui-muted); max-width: 520px; }
.hero__trust { margin: 0; font-size: 15px; color: var(--ui-muted); }

/* Tabs (Bootstrap tab behaviour, own look) */
.ui-tabs { display: flex; margin: 0; padding: 0 8px; list-style: none; border-bottom: 1px solid var(--ui-line); }
.ui-tab {
  display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 16px; margin-bottom: -1px;
  border: 0; border-bottom: 3px solid transparent; background: transparent; cursor: pointer; white-space: nowrap;
  font: inherit; font-size: 16px; font-weight: 600; color: var(--ui-muted);
}
.ui-tab.active { color: var(--ui-heading); border-bottom-color: var(--ui-primary); }
.ui-count { font-variant-numeric: tabular-nums; font-size: 13px; padding: 1px 7px; border-radius: 10px; background: var(--ui-soft); color: var(--ui-muted); }

.ui-form { padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.ui-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

/* Native file input, button styled per theme */
.hero__form .ui-file { height: 48px; padding: 4px; font-size: 15px; color: var(--ui-muted); }
.ui-file::file-selector-button {
  height: 38px; margin: 0 12px 0 0; padding: 0 14px; border: 1px solid var(--ui-field); border-radius: 4px;
  background: var(--ui-fsb-bg); color: var(--ui-heading); font: inherit; font-weight: 600; cursor: pointer;
}
#gpxLengthHint:not(:empty) ~ .ui-file-hint { display: none; }

/* Distance + language: label / control / hint rows shared across both columns */
.ui-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto; gap: 8px 16px; position: relative; }
.ui-pair > .ui-field { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-items: end; gap: 0; }
.ui-label-row { display: flex; align-items: center; gap: 2px; }
.ui-unit-input { display: flex; border: 1px solid var(--ui-field); border-radius: 6px; overflow: hidden; background: var(--ui-surface); }
.hero__form .ui-unit-input .form-control { border: 0; border-radius: 0; height: 42px; font-variant-numeric: tabular-nums; background: transparent; }
.ui-unit-input:focus-within { outline: 2px solid var(--ui-primary); outline-offset: 2px; }
.hero__form .ui-unit-input .form-control:focus { box-shadow: none; }
.ui-unit { display: flex; align-items: center; padding: 0 12px; background: var(--ui-soft); color: var(--ui-muted); font-size: 15px; border-left: 1px solid var(--ui-line); }
.ui-flag-select { position: relative; display: block; }
.ui-flag-select img { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }

/* Validation: the error replaces the range hint at the same spot */
.ui-field-error { display: none; gap: 6px; font-size: 14px; line-height: 1.4; color: var(--ui-error); }
.ui-field-error .bi { flex: none; margin-top: 2px; }
.was-validated .ui-field:has(:invalid) > .ui-field-error,
.was-validated .ui-coords:has(:invalid) > .ui-field-error { display: flex; }
.was-validated .ui-field:has(:invalid) > .ui-field-hint,
.was-validated .ui-field:has(:invalid) > .ui-file-hint { display: none; }
/* Bootstrap's own valid/invalid icons and green borders are not part of the design */
.hero__form .was-validated .form-control:valid, .hero__form .was-validated .form-control:invalid,
.hero__form .was-validated .form-select:valid, .hero__form .was-validated .form-select:invalid {
  background-image: none; padding-right: 12px;
}
.hero__form .was-validated .form-select:valid, .hero__form .was-validated .form-select:invalid {
  background-image: var(--bs-form-select-bg-img); padding-right: 36px;
}
.hero__form .was-validated .form-control:valid, .hero__form .was-validated .form-select:valid { border-color: var(--ui-field); }
.was-validated .ui-field:has(:invalid) .ui-unit-input,
.was-validated .form-control:invalid { border-color: var(--ui-error); }

/* Info popover next to "map language" */
.ui-tip { position: static; }
.ui-tip__toggle { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: var(--ui-muted); font-size: 16px; }
.ui-tip__panel {
  position: absolute; left: 0; right: 0; top: 36px; z-index: 5; margin: 0; padding: 12px 14px; font-size: 15px; line-height: 1.45;
  background: var(--ui-tip-bg); color: var(--ui-tip-fg); border: 1px solid var(--ui-tip-line); border-radius: 8px;
  box-shadow: 0 12px 28px -12px rgba(0,0,0,.35);
}

/* Collapsible sections (categories, trim) */
.categories-section { display: flex; flex-direction: column; gap: 20px; }
.ui-acc { border-top: 1px solid var(--ui-line); padding-top: 16px; }
.ui-acc__head { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; color: var(--ui-heading); }
.ui-acc__head > .bi:first-child { color: var(--ui-primary); }
.ui-acc__head > span { flex: 1 1 auto; }
.ui-chips { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; }
.ui-chip {
  display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--ui-field);
  border-radius: 20px; font-size: 15px; cursor: pointer; background: var(--ui-surface);
}
.ui-trim { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-top: 8px; }
.ui-trim__note { grid-column: 1 / -1; margin: 0; }

/* Point search */
.ui-coords { display: flex; flex-wrap: wrap; gap: 8px 12px; }
/* Coordinates are rarely typed (the map fills them), so one compact row with the tag inside the field */
.ui-coord { flex: 1 1 170px; display: flex; min-width: 0; border: 1px solid var(--ui-field); border-radius: 6px; overflow: hidden; background: var(--ui-surface); }
.ui-coord__tag { display: flex; align-items: center; padding: 0 10px; background: var(--ui-soft); color: var(--ui-muted); font-size: 14px; white-space: nowrap; border-right: 1px solid var(--ui-line); }
.hero__form .ui-coord .form-control { min-width: 0; height: 36px; padding: 0 8px; border: 0; border-radius: 0; font-size: 16px; font-variant-numeric: tabular-nums; background: transparent; appearance: textfield; }
.ui-coord .form-control::-webkit-inner-spin-button, .ui-coord .form-control::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ui-coord:focus-within { outline: 2px solid var(--ui-primary); outline-offset: 2px; }
.hero__form .ui-coord .form-control:focus { box-shadow: none; }
.was-validated .ui-coord:has(:invalid) { border-color: var(--ui-error); }
.ui-coords .ui-field-error { flex-basis: 100%; }
/* Scales with the viewport so the form fits without scrolling; svh ignores mobile browser bars */
.point-map { height: 300px; height: clamp(260px, 38svh, 340px); border-radius: 6px; border: 1px solid var(--ui-line); }
/* Dark theme only: the fallbacks are Leaflet's own light defaults */
.point-map .leaflet-tile-pane { filter: var(--ui-map-tiles-filter, none); }
.point-map.leaflet-container { background: var(--ui-soft); }
.point-map .leaflet-bar a { background-color: var(--ui-map-control-bg, #fff); color: var(--ui-map-control-fg, #000); border-bottom-color: var(--ui-map-control-line, #ccc); }
.point-map.leaflet-container .leaflet-control-attribution { background: var(--ui-map-attr-bg, rgba(255,255,255,.8)); color: var(--ui-map-control-fg, #333); }
.point-map.leaflet-container .leaflet-control-attribution a { color: var(--ui-primary); }

/* My maps list (rendered by mymaps-menu.js) */
.ui-search { position: relative; }
.ui-search > .bi-search { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ui-muted); pointer-events: none; }
.hero__form .ui-search .form-control { padding: 0 44px 0 38px; }
.ui-search .form-control::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.ui-search__clear {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ui-muted);
}
.ui-search:has(.form-control:placeholder-shown) .ui-search__clear { display: none; }
.ui-maplist { margin: 0; padding: 0; list-style: none; }
.ui-maplist__item { padding: 2px 0; border-bottom: 1px solid var(--ui-line); }
.ui-maplist__row { display: flex; align-items: center; gap: 8px; }
.ui-maplist__icon { flex: none; width: 18px; font-size: 16px; color: var(--ui-primary); }
.ui-maplist__link { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding: 3px 0; line-height: 1.3; text-decoration: none; }
.ui-maplist__title { font-weight: 600; color: var(--ui-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-maplist__meta { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ui-muted); }
.ui-maplist__meta img { border-radius: 1px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.ui-maplist__tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 6px 26px; }
.ui-maplist__tags:empty { display: none; }
.ui-maplist__more { display: flex; gap: 8px; }
.ui-maplist__more-main { flex: 1 1 auto; }
.ui-iconbtn {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 6px; background: transparent; color: var(--ui-muted); font-size: 16px;
}
.ui-iconbtn--danger { color: var(--ui-copper-text); }
.ui-tag {
  display: inline-flex; align-items: center; gap: 2px; min-height: 32px; padding: 0 8px 0 10px; border: 1px solid var(--ui-field);
  border-radius: 16px; background: var(--ui-soft); color: var(--ui-heading); font: inherit; font-size: 14px;
}
.ui-tag .bi-x { font-size: 16px; }
.ui-tag--add { gap: 4px; padding: 0 10px; border-style: dashed; background: var(--ui-surface); }
.ui-tag--add .bi { font-size: 12px; }
.ui-tagedit { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 8px 28px; padding: 12px; border: 1px solid var(--ui-line); border-radius: 8px; background: var(--ui-soft); }
.ui-tagedit__known { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-tagedit__new { display: flex; gap: 6px; }
.ui-tagedit__input { flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 10px; border: 1px solid var(--ui-field); border-radius: 6px; background: var(--ui-surface); color: var(--ui-text); }
.ui-tagedit__input::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-tagedit__ok, .ui-tagedit__cancel { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 40px; padding: 0; border-radius: 6px; }
.ui-tagedit__ok { border: 0; background: var(--ui-btn); color: var(--ui-on-btn); font-size: 17px; }
.ui-tagedit__cancel { border: 1px solid var(--ui-field); background: var(--ui-surface); color: var(--ui-copper-text); font-size: 15px; }
.ui-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 8px; text-align: center; }
.ui-empty__icon { font-size: 32px; line-height: 1; color: var(--ui-muted); }
.ui-empty__title { margin: 0; font-weight: 600; font-size: 18px; color: var(--ui-heading); }
.ui-empty__text { margin: 0; max-width: 32ch; color: var(--ui-muted); }
.ui-empty .ui-btn { margin-top: 4px; }

.ui-processing { margin: -12px 24px 20px; text-align: center; font-size: 15px; color: var(--ui-muted); }
.ui-processing:empty { display: none; }

/* Routebook example below the headline */
.rb-example { margin: 14px 0 0; max-width: 540px; }
.rb-example figcaption { margin-bottom: 8px; font-size: 15px; font-weight: 600; color: var(--ui-heading); }
.rb-example__row {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) 84px 84px 80px; gap: 10px; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--ui-line);
}
.rb-example__row--head { align-items: end; padding: 8px 0; font-size: 14px; font-weight: 600; color: var(--ui-muted); }
.rb-example__row--head > span:nth-child(n+3) { text-align: right; }
.rb-example__icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; font-size: 13px; }
.rb-example__name { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.rb-example__name strong { font-weight: 600; color: var(--ui-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-example__name span { font-size: 14px; color: var(--ui-muted); }
.rb-example__km { text-align: right; font-variant-numeric: tabular-nums; font-size: 14px; color: var(--ui-muted); }
.rb-example__km--start { color: var(--ui-primary); }
.rb-example__km--end { color: var(--ui-copper-text); }

/* The four marker icons of the routebook example, from the map's local Font Awesome font */
@font-face { font-family: 'Font Awesome 6 Free'; font-style: normal; font-weight: 900; font-display: block; src: url('/static/map/webfonts/fa-solid-900.woff2') format('woff2'); }
.rb-example .fa::before { display: inline-block; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-style: normal; line-height: 1; -webkit-font-smoothing: antialiased; }
.rb-example .fa-cart-shopping::before { content: "\f07a"; }
.rb-example .fa-faucet::before { content: "\e005"; }
.rb-example .fa-cookie-bite::before { content: "\f564"; }
.rb-example .fa-gas-pump::before { content: "\f52f"; }

@media (hover: hover) {
  .ui-btn--fill:hover { background: var(--ui-btn-hover); }
  .ui-btn--line:hover, .ui-chip:hover, .ui-tip__toggle:hover { background: var(--ui-hover); }
  .ui-iconbtn:hover, .ui-tag:hover, .ui-tagedit__cancel:hover, .ui-search__clear:hover { background: var(--ui-hover); }
  .ui-tagedit__ok:hover { background: var(--ui-btn-hover); }
  .ui-maplist__link:hover .ui-maplist__title { text-decoration: underline; }
  .ui-file::file-selector-button:hover { background: var(--ui-hover); }
  .ui-tab:not(.active):hover { color: var(--ui-heading); border-bottom-color: var(--ui-line-strong); }
  .ui-acc__head:hover { color: var(--ui-primary); }
}

@media (max-width: 640px) {
  .hero__inner { padding: 12px 12px 40px; gap: 28px; }
  .hero__title { font-size: 34px; }
  .ui-form { padding: 16px; gap: 12px; }
  .ui-pair { column-gap: 10px; row-gap: 4px; }
  .ui-acc { padding-top: 2px; }
  .ui-tab { flex: 1 1 0; justify-content: center; min-height: 48px; padding: 0 4px; font-size: 15px; gap: 6px; }
  .ui-file-hint { display: none; }
  .rb-example__row { grid-template-columns: 30px minmax(0, 1fr) 82px 82px; }
  .rb-example__dist { display: none; }
}
@media (max-width: 480px) {
  .ui-tab__icon { display: none; }
}
@media (max-width: 360px) {
  .ui-tab { font-size: 14px; }
}

/* ===== Content sections ===== */
.sec--line { border-top: 1px solid var(--ui-line); }
.sec--soft { background: var(--ui-soft); border-top: 1px solid var(--ui-line); border-bottom: 1px solid var(--ui-line); }
.sec--soft + .sec--soft, .sec--soft + .sec--line { border-top: 0; }
.sec__inner { max-width: 1200px; margin: 0 auto; padding: 72px 20px; box-sizing: border-box; display: flex; flex-direction: column; gap: 36px; }
.sec__inner--split { flex-direction: row; flex-wrap: wrap; gap: 32px 64px; }
.sec__inner--split > .sec__title, .sec__inner--split > .sec__intro { flex: 1 1 280px; }
.sec__body { flex: 2 1 520px; min-width: 0; max-width: 720px; }
.sec__title { margin: 0; font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 700; font-size: 36px; line-height: 1.1; color: var(--ui-heading); }
.sec__intro { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.sec__intro p { margin: 0; color: var(--ui-muted); }
.sec__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 48px; }
.sec__head .sec__intro { flex: 1 1 420px; }
.prose { display: flex; flex-direction: column; gap: 16px; }
.prose p { margin: 0; }
.prose strong { font-weight: 600; }
.prose a, .faq a { color: var(--ui-primary); font-weight: 600; }
.faq__answer .faq__more { margin-top: 8px; }
.ui-more { display: inline-flex; align-items: center; min-height: 44px; color: var(--ui-primary); font-weight: 600; text-decoration: none; }
.ui-more:hover { color: var(--ui-primary); }
.prose .donate-line { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; color: var(--ui-muted); }
.donate-line .bi { color: var(--ui-copper); margin-right: 8px; }

.steps { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 32px; }
.steps li { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.steps .bi { font-size: 26px; color: var(--ui-primary); }
.steps h3, .card-item h3, .card-item h2 { margin: 0; font-size: 21px; font-weight: 600; color: var(--ui-heading); }
.steps p { margin: 0; color: var(--ui-muted); }

.events { margin: 0; padding: 0; list-style: none; }
.events li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 16px 0; border-bottom: 1px solid var(--ui-line); }
.events a { flex: 1 1 220px; font-weight: 600; font-size: 19px; color: var(--ui-heading); text-decoration: underline; text-decoration-color: var(--ui-line-strong); text-underline-offset: 4px; }
.events__region { flex: 1 1 150px; color: var(--ui-muted); }
.events__region .bi { margin-right: 6px; color: var(--ui-primary); }
.events__km { flex: 0 0 110px; text-align: right; font-variant-numeric: tabular-nums; font-size: 15px; color: var(--ui-heading); }

/* Sibling cards: equal height, action aligned at the bottom */
.cards { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.card-item { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 24px; box-shadow: none; }
.card-item h3, .card-item h2 { display: flex; align-items: center; gap: 10px; }
.card-item p { margin: 0; flex: 1 1 auto; color: var(--ui-muted); }
.card-item .ui-btn { align-self: flex-start; }
.card-item__icons { display: inline-flex; align-items: center; gap: 4px; color: var(--ui-primary); }
/* Crossed-out Play logo: iOS web app is for everyone without the Play Store */
.no-play { position: relative; display: inline-block; opacity: .5; color: var(--ui-heading); }
.no-play__slash { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--ui-copper); pointer-events: none; }

.faq details { border-bottom: 1px solid var(--ui-line-strong); }
.faq summary { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 0; font-weight: 600; font-size: 18px; color: var(--ui-heading); }
.faq summary > .bi:first-child { flex: none; font-size: 17px; color: var(--ui-primary); }
.faq summary > span { flex: 1 1 auto; }
/* Answers mix plain text, links and lists: keep normal text flow */
.faq__answer { display: block; padding: 0 0 20px 29px; color: var(--ui-text); }
.faq__answer > * + * { margin-top: 10px; }
.faq__answer ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }

@media (hover: hover) {
  .faq summary:hover { color: var(--ui-primary); }
  .events a:hover { text-decoration-thickness: 2px; }
  .ui-more:hover { text-decoration: underline; text-underline-offset: 3px; }
}
@media (max-width: 640px) {
  .sec__inner { padding: 48px 16px; }
  .sec__title { font-size: 28px; }
}

/* ===== Content page head ===== */
.page-head__inner { max-width: 1200px; margin: 0 auto; padding: 64px 20px 48px; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; }
.page-head__title { margin: 0; font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 700; font-size: 48px; line-height: 1.05; color: var(--ui-heading); }
.page-head__lead { margin: 0; font-size: 19px; color: var(--ui-muted); max-width: 720px; }

/* ===== Features page ===== */
.fgroup { padding: 56px 20px; align-items: flex-start; }
.fgroup__intro { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.fgroup__intro .sec__title { font-size: 34px; }
.fgroup__intro > p { margin: 0; color: var(--ui-muted); }
.fgroup__figure { margin: 10px 0 0; }
.fgroup__figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-soft); }
.fgroup__figure figcaption { margin-top: 8px; font-size: 14px; color: var(--ui-muted); }
.fgroup__list { flex: 2 1 520px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.fgroup__list li { display: flex; flex-direction: column; gap: 6px; padding: 20px 0; border-bottom: 1px solid var(--ui-line); }
.fgroup__list h3 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--ui-heading); }
.fgroup__list h3 .bi { color: var(--ui-primary); }
.fgroup__list p { margin: 0; }
.cta { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 48px; padding: 56px 20px; }
.cta .sec__intro { gap: 8px; }
.cta .sec__title { font-size: 32px; }
.cta a:not(.ui-btn) { color: var(--ui-primary); font-weight: 600; }
.cta__btn { min-height: 52px; padding: 0 28px; font-size: 18px; }

@media (max-width: 640px) {
  .page-head__inner { padding: 40px 16px 32px; }
  .page-head__title { font-size: 36px; }
  .fgroup, .cta { padding: 48px 16px; }
  .fgroup__intro .sec__title { font-size: 30px; }
  .cta .sec__title { font-size: 28px; }
}

/* ===== App page ===== */
.app-platforms { padding-top: 0; gap: 20px; }
.pwa-guide { padding: 0 24px; box-shadow: none; }
.pwa-guide summary { display: flex; align-items: center; gap: 12px; min-height: 60px; font-weight: 600; font-size: 18px; color: var(--ui-heading); }
.pwa-guide summary > .bi:first-child { flex: none; color: var(--ui-primary); }
.pwa-guide summary > span { flex: 1 1 auto; }
.pwa-guide__intro { margin: 0 0 12px; color: var(--ui-muted); }
.pwa-guide__steps { margin: 0 0 20px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0 32px; }
.pwa-guide__steps li { flex: 1 1 220px; min-width: 0; display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--ui-line); }
.pwa-guide__steps li > .bi { flex: none; width: 24px; padding-top: 1px; font-size: 20px; line-height: 1.2; color: var(--ui-primary); }
.pwa-guide__steps li > span { display: flex; flex-direction: column; gap: 2px; }
.pwa-guide__steps strong { font-weight: 600; color: var(--ui-heading); }
.pwa-guide__steps li > span > span { font-size: 15px; color: var(--ui-muted); }
.app-features { flex: 2 1 520px; min-width: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0 32px; }
.app-features > div { flex: 1 1 260px; min-width: 0; padding: 16px 0; border-bottom: 1px solid var(--ui-line-strong); }
.app-features dt { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 18px; color: var(--ui-heading); }
.app-features dt .bi { color: var(--ui-primary); }
.app-features dd { margin: 4px 0 0; color: var(--ui-muted); }
.app-shots { display: flex; flex-wrap: wrap; gap: 40px 32px; }
.app-shots figure { flex: 1 1 280px; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.app-shots img { width: 100%; max-width: 300px; height: auto; border: 1px solid var(--ui-line-strong); border-radius: 18px; background: var(--ui-soft); }
.app-shots figcaption { display: flex; flex-direction: column; gap: 6px; max-width: 340px; }
.app-shots strong { font-weight: 600; font-size: 19px; color: var(--ui-heading); }
.app-shots figcaption span { color: var(--ui-muted); }
@media (hover: hover) {
  .pwa-guide summary:hover { color: var(--ui-primary); }
}
@media (max-width: 640px) {
  .app-platforms { padding-top: 0; }
  .pwa-guide { padding: 0 16px; }
}

/* ===== About page ===== */
.about { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 48px 64px; padding: 64px 20px 72px; }
.about__main { flex: 2 1 520px; min-width: 0; max-width: 720px; display: flex; flex-direction: column; gap: 40px; }
.about__block { display: flex; flex-direction: column; gap: 12px; }
.about__block:first-child { gap: 16px; }
.about__block p { margin: 0; }
.about__block .about__lead { margin: 0 0 16px; }
.about__title { margin: 0; display: flex; align-items: center; gap: 10px; font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 700; font-size: 30px; line-height: 1.1; color: var(--ui-heading); }
.about__title .bi { font-size: 24px; color: var(--ui-primary); }
.about__title .about__heart { font-size: 22px; color: var(--ui-copper); }
.about__block .about__intro { font-size: 19px; }
.about__muted { color: var(--ui-muted); }
.about a:not(.ui-btn) { color: var(--ui-primary); font-weight: 600; }
.about a > .bi { margin-right: 4px; }
.thanks { margin: 0; padding: 0; list-style: none; }
.thanks li { display: flex; flex-wrap: wrap; gap: 2px 16px; padding: 10px 0; border-bottom: 1px solid var(--ui-line); }
.thanks__name { flex: 0 0 160px; font-weight: 600; color: var(--ui-heading); }
.thanks__role { color: var(--ui-muted); }
.about__aside { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.about__card { display: flex; flex-direction: column; gap: 14px; padding: 24px; }
.about__card h2 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 600; color: var(--ui-heading); }
.about__card h2 .bi { color: var(--ui-primary); }
.about__card p, .about__card form { margin: 0; }
.about__card--plain { gap: 8px; border: 1px solid var(--ui-line); border-radius: 10px; }
.about__card--plain h2 { font-size: 20px; }
.about__card .about__role { font-size: 15px; color: var(--ui-muted); }
.about__news-title { display: flex; align-items: flex-start; gap: 12px; }
.about__news-title .bi { font-size: 28px; color: var(--ui-primary); }
.news { margin: 0; padding: 0; list-style: none; }
.news li { display: flex; flex-wrap: wrap; gap: 2px 20px; padding: 12px 0; border-bottom: 1px solid var(--ui-line-strong); }
.news__date { flex: 0 0 130px; padding-top: 2px; font-variant-numeric: tabular-nums; font-size: 14px; color: var(--ui-copper-text); }
.news__text { flex: 1 1 300px; min-width: 0; }
.news__older summary { display: flex; align-items: center; gap: 8px; min-height: 52px; font-weight: 600; color: var(--ui-primary); }
@media (max-width: 640px) {
  .about { padding: 40px 16px 48px; }
  .about__title { font-size: 26px; }
}

/* ===== Legal page ===== */
.legal-page { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 40px 64px; padding: 64px 20px 80px; }
.legal-toc { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.legal-toc .legal-toc__title { font-size: 44px; }
.legal-toc .legal-toc__lead { margin-bottom: 8px; }
.legal-toc__label { font-size: 15px; font-weight: 600; color: var(--ui-heading); }
.legal-toc ol { margin: 0; padding: 0; list-style: none; }
.legal-toc li { border-bottom: 1px solid var(--ui-line); }
.legal-toc a { display: flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--ui-primary); font-weight: 500; }
.legal { flex: 3 1 560px; min-width: 0; max-width: 760px; color: var(--ui-text); }
.legal h2 { margin: 48px 0 12px; display: flex; align-items: center; gap: 10px; font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 700; font-size: 32px; color: var(--ui-heading); }
.legal h2:first-child { margin-top: 0; }
.legal h2 .bi { font-size: 26px; color: var(--ui-primary); }
.legal h3 { margin: 32px 0 8px; font-size: 21px; font-weight: 600; color: var(--ui-heading); }
.legal h4 { margin: 20px 0 6px; font-size: 18px; font-weight: 600; color: var(--ui-heading); }
.legal p, .legal ul { margin: 0 0 12px; }
.legal a { color: var(--ui-primary); font-weight: 600; overflow-wrap: anywhere; }
.legal address { margin: 0 0 12px; padding: 16px 20px; font-style: normal; border: 1px solid var(--ui-line); border-radius: 8px; background: var(--ui-surface); }
.legal__muted { color: var(--ui-muted); }
.legal dl { margin: 0 0 12px; }
.legal dl > div { padding: 14px 0; border-bottom: 1px solid var(--ui-line); }
.legal dt { font-weight: 600; color: var(--ui-heading); }
.legal dd { margin: 4px 0 0; }
.legal > p:last-child { font-variant-numeric: tabular-nums; font-size: 14px; color: var(--ui-muted); }
.legal [id] { scroll-margin-top: 16px; }
@media (hover: hover) {
  .legal-toc a:hover { text-decoration: underline; }
}
@media (max-width: 640px) {
  .legal-page { padding: 40px 16px 56px; }
  .legal-toc .legal-toc__title { font-size: 34px; }
  .legal h2 { font-size: 28px; }
}

/* ===== Error pages ===== */
.error-page__inner { max-width: 1200px; margin: 0 auto; padding: 88px 20px 104px; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; }
.error-page__inner > * { max-width: 640px; }
.error-page__code { font-size: 16px; color: var(--ui-muted); }
.error-page__title { margin: 0; font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 700; font-size: 48px; line-height: 1.05; color: var(--ui-heading); }
.error-page__text { margin: 0; font-size: 19px; }
.error-page__hint { margin: 0; color: var(--ui-muted); }
.error-page__detail { margin: 0; padding: 12px 16px; border: 1px solid var(--ui-line); border-radius: 8px; background: var(--ui-surface); font-size: 15px; }
.error-page__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.error-page__btn { min-height: 52px; padding: 0 24px; font-size: 18px; }
.error-page__btn.ui-btn--line { padding: 0 20px; font-size: 16px; }
@media (max-width: 640px) {
  .error-page__inner { padding: 56px 16px 72px; }
  .error-page__title { font-size: 36px; }
}

/* ===== Form states: route length hint, disabled and processing button ===== */
.ui-gpx-hint { margin: 0; display: flex; gap: 8px; font-size: 15px; }
.ui-gpx-hint .bi { flex: none; margin-top: 2px; }
.ui-gpx-hint--info { color: var(--ui-primary); }
.ui-gpx-hint--warn { color: var(--ui-copper-text); }
.ui-gpx-hint--error { color: var(--ui-error); }
.hero__form .ui-file.ui-file--error { border-color: var(--ui-error); }
.ui-btn--fill:disabled { background: var(--ui-disabled-bg); color: var(--ui-disabled-fg); cursor: not-allowed; }
.ui-btn--fill.is-processing:disabled { background: var(--ui-btn); color: var(--ui-on-btn); cursor: progress; }
.ui-spinner { flex: none; width: 18px; height: 18px; box-sizing: border-box; border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ui-spin .8s linear infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ui-spinner { animation-duration: 2.4s; }
}