/* Rent-a-bike pages (/<city>/rent-a-bike/), written by scripts/build-rent-pages.py. Builds on guides.css. */
.rent .lede { max-width: 62ch; }
.rent-quick { padding-left: 1.25em; }
.rent-quick li, .rent-other li { margin-bottom: 8px; max-width: 65ch; }
.rent-other { padding-left: 1.25em; }
.rent-cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.rent-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--paper); border: 1.5px solid var(--rule); border-radius: 12px; }
.rent-card h3 { margin: 0; }
.rent-card p { margin: 0; }
.rent-addr { color: var(--muted); font-size: .9375rem; }
.rent-facts { display: grid; gap: 6px; margin: 0; }
.rent-facts div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 8px; }
.rent-facts dt { color: var(--muted); font-size: .875rem; font-weight: 600; }
.rent-facts dd { margin: 0; }
.rent-date { display: block; color: var(--muted); font-size: .8125rem; }
.rent-src { font-size: .8125rem; }
.rent-note { color: var(--muted); font-size: .8125rem; }
.rent-link { margin-top: auto !important; padding-top: 4px; font-weight: 600; }
@media (max-width: 640px) { .rent-facts div { grid-template-columns: 1fr; gap: 0; } }

/* The map (site/rent-map.js). Hidden until the script shows it, so the list works without it.
   Pins follow the planner's (site/annecy/app.css .map-pin): brand colours, a paper ring, a 44 px tap target. */
.rent-map-section[hidden] { display: none; }
.rent-filters { display: grid; gap: 10px; margin: 16px 0 12px; }
.rent-legend, .rent-flag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rent-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px 6px 8px; font: 600 .9375rem/1.2 var(--font-body, inherit);
  color: var(--text); background: var(--background); border: 1.5px solid var(--rule); border-radius: 999px; cursor: pointer;
  transition: opacity 160ms cubic-bezier(.2, 0, 0, 1), background-color 160ms cubic-bezier(.2, 0, 0, 1), border-color 160ms cubic-bezier(.2, 0, 0, 1); }
.rent-chip svg { flex: none; }
.rent-chip:hover { border-color: var(--text); }
.rent-legend .rent-chip[aria-pressed="false"] { color: var(--muted); border-style: dashed; }
.rent-legend .rent-chip[aria-pressed="false"] svg { opacity: .35; filter: grayscale(1); }
.rent-flag-row .rent-chip { padding-left: 10px; color: var(--muted); }
.rent-flag-row .rent-chip[aria-pressed="true"] { background: var(--text); color: var(--background); border-color: var(--text); }
.rent-chip:focus-visible, .rent-pin:focus-visible, .rent-cluster:focus-visible, .rent-show:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.rent-flag-label { font-size: .875rem; color: var(--muted); font-weight: 600; margin-right: 2px; }
.rent-map { position: relative; height: 480px; border: 1.5px solid var(--rule); border-radius: 12px; overflow: hidden; background: var(--surface); }
.rent-map-note { margin: 8px 0 0; color: var(--muted); font-size: .875rem; }
.rent-map-note:empty { display: none; }
.rent-unmapped { margin: 12px 0 0; color: var(--muted); font-size: .9375rem; max-width: 65ch; }
.rent-unmapped + .rent-unmapped { margin-top: 4px; }

.rent-pin, .rent-cluster { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; line-height: 0; }
.rent-pin[hidden], .rent-cluster[hidden] { display: none; }
.rent-pin-face { display: block; line-height: 0; transform: scale(.875); transition: transform 160ms cubic-bezier(.2, 0, 0, 1); filter: drop-shadow(0 1px 1.5px rgba(14, 34, 64, .4)); }
.rent-map-near .rent-pin-face, .rent-pin:hover .rent-pin-face, .rent-pin:focus-visible .rent-pin-face { transform: none; }
.rent-pin-tour { position: absolute; right: 2px; bottom: 3px; line-height: 0; filter: drop-shadow(0 1px 1px rgba(14, 34, 64, .35)); }
.rent-pin-count { position: absolute; top: 2px; right: 1px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 9px; background: #F7F3EA; color: #13294B;
  font: 700 .6875rem/16px var(--font-body, inherit); text-align: center; border: 1px solid #13294B; }
.rent-cluster > span { display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 6px; box-sizing: border-box; border-radius: 17px;
  background: #13294B; color: #F7F3EA; border: 2px solid #F7F3EA; box-shadow: 0 0 0 4px rgba(19, 41, 75, .16), 0 1px 3px rgba(14, 34, 64, .4);
  font: 700 .875rem/1 var(--font-body, inherit); }
.rent-cluster:hover > span { background: #23477A; }

/* The popup: a small paper card in either theme. */
.rent-popup .maplibregl-popup-content { padding: 10px 14px; border-radius: 12px; background: #F7F3EA; box-shadow: 0 6px 20px rgba(14, 34, 64, .22); }
.rent-popup.maplibregl-popup-anchor-top .maplibregl-popup-tip, .rent-popup.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.rent-popup.maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: #F7F3EA; }
.rent-popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip, .rent-popup.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.rent-popup.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: #F7F3EA; }
.rent-popup.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: #F7F3EA; }
.rent-popup.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: #F7F3EA; }
.rent-pop { color: #13294B; font: .875rem/1.4 var(--font-body, system-ui, sans-serif); }
.rent-pop-item { display: flex; gap: 10px; padding: 8px 0; }
.rent-pop-item + .rent-pop-item { border-top: 1px solid #CBD3E0; }
.rent-pop-icons { display: flex; flex-direction: column; gap: 4px; flex: none; padding-top: 1px; }
.rent-pop-item > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rent-pop strong { font-size: .9375rem; line-height: 1.3; }
.rent-pop-flags { display: flex; flex-wrap: wrap; gap: 4px 12px; color: #4A5872; font-size: .8125rem; font-weight: 600; }
.rent-pop-flags > span { display: inline-flex; align-items: center; gap: 4px; }
.rent-pop-flags svg { color: #C7346F; }
.rent-pop a { display: inline-block; padding: 4px 0; color: #247783; font-weight: 600; }

.rent-show { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 44px; padding: 6px 14px 6px 10px; font: 600 .9375rem/1.2 var(--font-body, inherit);
  color: var(--text); background: transparent; border: 1.5px solid var(--rule); border-radius: 8px; cursor: pointer; }
.rent-show:hover { border-color: var(--text); }
.rent-map-section ~ section .rent-card[data-pt] { cursor: pointer; }
.rent-card:target { outline: 3px solid var(--focus); outline-offset: 2px; }
.rent-card { scroll-margin-top: 16px; }
@media (max-width: 640px) {
  .rent-map { height: min(400px, 58vh); min-height: 320px; }
  .rent-chip { font-size: .875rem; padding-right: 12px; }
}
@media (prefers-reduced-motion: reduce) { .rent-chip, .rent-pin-face { transition: none; } }