/* The cookie banner (consent.js). Uses the city page's colours when it has them (--chrome, --line, ...), with the
   light theme as the fallback for pages that don't. */
.consent { position: fixed; z-index: 10; left: 50%; transform: translateX(-50%);
  bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: min(440px, calc(100% - 24px)); box-sizing: border-box;
  padding: 14px 16px 12px; background: #fffcf4; color: #26303a;
  border: 1px solid var(--line, rgba(38, 48, 58, 0.16)); border-radius: 16px;
  box-shadow: var(--shadow, 0 1px 2px rgba(20, 24, 28, 0.10), 0 8px 24px rgba(20, 24, 28, 0.16));
  font: 500 13.5px/1.4 var(--font-ui, "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif); }
/* solid, not the page's see-through chrome: the banner is read over the busy map */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .consent { background: #181d22; color: #e8edf1; } }
:root[data-theme="dark"] .consent { background: #181d22; color: #e8edf1; }
.consent [hidden] { display: none !important; }
.consent-text { margin: 0 0 10px; }
.consent a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.consent-opts { display: grid; gap: 6px; margin: 0 0 10px; }
.consent-opt { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.consent-opt input { width: 16px; height: 16px; margin: 0; accent-color: var(--on, #26303a); }
.consent-row { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.consent-btn { font: 600 13px/1 var(--font-ui, "Barlow", system-ui, sans-serif); padding: 9px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line, rgba(38, 48, 58, 0.16)); background: transparent; color: var(--chrome-fg, #26303a); }
.consent-btn:hover { background: var(--hover, rgba(38, 48, 58, 0.07)); }
.consent-btn.on { background: var(--on, #26303a); color: var(--on-fg, #fffcf4); border-color: transparent; }
.consent-btn:focus-visible { outline: 2px solid var(--pin, #f2b705); outline-offset: 2px; }
/* the "Privacy & cookies" link in a city page's credits line */
.consent-link { color: inherit; font: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px; }