*{box-sizing:border-box}
:root{
  --ink:#171717;--muted:#6f706f;--paper:#f6f3eb;--panel:#fff;
  --line:#e7e2d8;--gold:#f4c430;--blue:#176cab;--brewpub:#e4a320;--green:#3f8f46;
}
html,body{height:100%}
body{margin:0;font-size:14px;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--paper);color:var(--ink);overflow:hidden}
button,input,textarea{font:inherit}
button{touch-action:manipulation}
header{position:static;z-index:auto;height:68px;display:flex;align-items:center;padding:0 20px;background:var(--ink);color:#fff;border-bottom:1px solid #292929}
.map-brand{display:flex;align-items:center;margin-right:auto;color:#fff;text-decoration:none}
.map-brand .wordmark{display:inline-flex;align-items:center;white-space:nowrap;font-size:34px;line-height:1;font-weight:800;letter-spacing:-1.2px}
.map-brand .wordmark strong{color:#ffc329;font:inherit}.map-brand .wordmark em{margin-left:6px;font-size:25px;font-style:normal}
.map-menu-btn{padding:8px;border:0;background:transparent;color:#fff;font-size:27px;line-height:1;cursor:pointer}
.map-menu{display:none;position:absolute;z-index:2000;top:68px;right:14px;width:250px;padding:10px;background:#fff;color:#10233b;border-radius:0 0 14px 14px;box-shadow:0 18px 40px #0003}
.map-menu.open{display:grid}.map-menu a,.map-menu button{display:block;width:100%;padding:13px 12px;border:0;border-radius:8px;background:transparent;color:#10233b;text-align:left;font-weight:700;text-decoration:none;cursor:pointer}
.map-menu a:hover,.map-menu button:hover{background:#f6f0e4}.map-menu-divider{height:1px;margin:7px 5px;background:#e8e1d5}.map-lang.active{color:#9a6810;background:#fff7e6}

.view{display:none}.view.active{display:block}
#explore{height:calc(100vh - 68px);height:calc(100dvh - 68px)}
.layout{height:100%;display:grid;grid-template-columns:390px minmax(0,1fr) 0;transition:grid-template-columns .18s ease}
body.details-open .layout{grid-template-columns:390px minmax(0,1fr) 410px}

.sidebar{min-width:0;overflow:auto;padding:18px 16px 28px;background:#fff;border-right:1px solid var(--line)}
.search-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-bottom:18px}.search-field-wrap{position:relative;min-width:0}.search-field-wrap .search{padding-right:40px}.search-clear{position:absolute;top:50%;right:7px;transform:translateY(-50%);width:30px;height:30px;padding:0;border:0;border-radius:50%;background:transparent;color:#777;font-size:22px;line-height:30px;cursor:pointer}.search-clear:hover{background:#f0ede6;color:#171717}.search-clear[hidden]{display:none}
.search{width:100%;min-width:0;margin:0;padding:12px 13px;border:1px solid #d7d2c7;border-radius:12px;background:#fff;color:var(--ink);outline:none}
.search:focus,textarea:focus{border-color:#b59a2a;box-shadow:0 0 0 3px #f4c4302b}
.search-btn{min-height:42px;padding:9px 16px;border:0;border-radius:999px;background:var(--gold);color:var(--ink);font-weight:850;cursor:pointer}
.search-btn:hover{background:#e6b91e}.search-btn:disabled{background:#e4dfc3;color:#8d8975}

.filter-block{margin-bottom:17px}.filter-section-label{margin:0 0 8px;font-size:14px;font-weight:900;letter-spacing:0;text-transform:none;color:#777}
.region-filters,.type-filters,.filters{display:flex;gap:7px;flex-wrap:wrap}
.type-filters{margin-bottom:12px}.personal-filter-label{margin-top:2px}.personal-filters{padding-top:0;border-top:0}
.pill{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid #ddd7cc;border-radius:999px;background:#fff;color:var(--ink);font-size:14px;font-weight:800;cursor:pointer}
.pill:hover{border-color:#bdb5a6}.pill.active{background:var(--ink);border-color:var(--ink);color:#fff}
.filter-count{color:#92979c;font-weight:900}.pill.active .filter-count{color:#d2d5d8}
.type-dot{width:8px;height:8px;border-radius:50%;display:inline-block}.brewery-dot{background:var(--blue)}.brewpub-dot{background:var(--brewpub)}
.enriched-filter{border-color:#e1c04c}.enriched-filter.active{background:var(--gold);border-color:#d7ad13;color:var(--ink)}.enriched-filter.active .filter-count{color:#665000}

.results-heading{position:static;display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:4px -16px 0;padding:14px 16px 10px;background:#fff;border-bottom:1px solid var(--line)}
.results-heading strong{font-size:14px}.results-hint{font-size:14px;color:#999}
.place{padding:14px 10px;margin:0 -10px;border-bottom:1px solid #eee;border-left:3px solid transparent;cursor:pointer;outline:none}
.place:hover{background:#faf8f3}.place:focus-visible{box-shadow:inset 0 0 0 2px var(--gold)}
.place.selected{background:#fff9df;border-left-color:var(--gold)}
.place-main{display:flex;justify-content:space-between;gap:12px}.place h3{margin:0 0 4px;font-size:14px;line-height:1.25}.place-chevron{font-size:22px;color:#aaa;line-height:1}
.muted{font-size:14px;color:#777}.badges{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap}.badge{padding:3px 7px;border-radius:999px;background:#eee;font-size:14px}.badge.hot{background:#fff0d8}.badge.visit{background:#e7f4e7}.badge.enriched{background:#fff4c7;color:#6b5200;border:1px solid #e8c957}
.visited-check{color:var(--green);font-weight:900}.place-visit-date,.popup-visit-date{margin-top:6px;font-size:14px;color:#687468}
.empty-state{padding:18px 12px;border:1px dashed #d8d3c8;border-radius:12px;background:#faf8f3;color:#6f6b63;font-size:14px;line-height:1.45}

#map{position:relative;height:100%;min-width:0}
.region-legend{position:absolute;z-index:500;left:12px;bottom:18px;display:flex;flex-direction:column;gap:5px;padding:8px 10px;border-radius:10px;background:#fff;box-shadow:0 2px 10px #0002;font-size:14px;font-weight:800}
.swatch{display:inline-block;width:18px;height:11px;margin-right:6px;vertical-align:-1px;border:2px solid}.swatch-mf{background:#f4c65b55;border-color:#ff8a24}.swatch-of{background:#6aa7d955;border-color:#176cab}.swatch-uf{background:#74b88a55;border-color:#2f7d4a}
.surprise-map-btn{position:absolute;right:16px;bottom:30px;z-index:1000;display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 14px;border:1px solid #0002;border-radius:12px;background:#fff;color:#222;font-weight:800;font-size:14px;box-shadow:0 3px 14px #0003;cursor:pointer}.surprise-map-btn:hover{background:#f8f6ef}

.beer-place-marker{background:transparent;border:0}
.beer-marker-dot{position:relative;width:18px;height:18px;border:2px solid #fff;border-radius:50%;box-shadow:0 1px 5px #0006;transition:transform .12s ease,box-shadow .12s ease}
.beer-marker-dot.brewery{background:var(--blue)}.beer-marker-dot.brewpub{background:var(--brewpub)}
.beer-marker-dot.hot{box-shadow:0 0 0 3px #f4c430,0 2px 7px #0005}.beer-marker-dot.visited{box-shadow:0 0 0 3px var(--green),0 2px 7px #0005}
.beer-marker-dot.enriched:not(.visited):not(.hot){box-shadow:0 0 0 3px var(--gold),0 2px 7px #0005}
.beer-marker-dot:hover{transform:scale(1.16)}
.marker-price{position:absolute;right:-10px;top:-10px;display:grid;place-items:center;width:15px;height:15px;border:1px solid #fff;border-radius:50%;background:var(--ink);color:#fff;font-size:9px;font-weight:900;box-shadow:0 1px 3px #0005}

/* Marker clusters: same decluttering principle as Fuelwise, adapted to BeerKönig types. */
.leaflet-marker-icon.marker-cluster{background:transparent}
.leaflet-marker-icon.marker-cluster>div{margin:0}
.beer-cluster-icon{background:transparent;border:0}
.beer-cluster{--cluster-a:#176cab;--cluster-b:#176cab;position:relative;display:grid;place-items:center;width:44px;height:44px;border:3px solid #fff;border-radius:50%;background:conic-gradient(var(--cluster-a) 0 var(--brewery-share),var(--cluster-b) var(--brewery-share) 100%);box-shadow:0 2px 9px #0005;transition:transform .12s ease}
.beer-cluster:hover{transform:scale(1.06)}
.beer-cluster.has-enriched{box-shadow:0 0 0 3px #f4c430,0 2px 9px #0005}
.beer-cluster-count{display:grid;place-items:center;min-width:25px;height:25px;padding:0 5px;border-radius:999px;background:#fff;color:#171717;font-size:11px;font-weight:900;line-height:1;box-shadow:0 1px 4px #0003}
.details-panel{min-width:0;overflow:auto;background:#fff;border-left:1px solid var(--line);transform:translateX(20px);opacity:0;pointer-events:none;transition:transform .18s ease,opacity .18s ease}
.details-panel.open{transform:none;opacity:1;pointer-events:auto}
.details-empty{height:100%;min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:32px;text-align:center;color:#8b887f}.details-empty-icon{font-size:30px}.details-empty strong{color:#555}.details-empty span{max-width:260px;font-size:14px;line-height:1.5}
.detail{padding:22px 22px 34px}.detail-topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.detail h2{margin:3px 0 0;font-size:24px;line-height:1.12;letter-spacing:-.02em}.detail-eyebrow{font-size:14px;font-weight:850;text-transform:capitalize;color:#777}
.detail-address{margin-top:7px;color:#777;font-size:14px;line-height:1.35}
.details-close{display:grid;place-items:center;flex:0 0 auto;width:34px;height:34px;padding:0;border:1px solid #ddd7cc;border-radius:50%;background:#fff;color:#555;cursor:pointer}.details-close svg{display:block;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}.details-close:hover{background:#f7f4ed}
.detail-data-badge{display:inline-flex;margin-top:12px;padding:5px 8px;border-radius:999px;background:#fff4c7;color:#6b5200;font-size:14px;font-weight:850}
.external-links{display:flex;align-items:center;gap:16px;margin:14px 0 4px;flex-wrap:wrap}.external-link{color:#1769aa;text-decoration:none;font-size:14px;font-weight:800}.external-link:hover{text-decoration:underline}

.beer-loading{margin:16px 0;padding:12px;border-radius:10px;background:#faf7ef;color:#777;font-size:14px}
.beer-section{margin:18px 0 0;padding:18px 0 0;border-top:1px solid var(--line)}
.beer-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;list-style:none;font-size:15px;font-weight:900;cursor:pointer;user-select:none}.beer-heading::-webkit-details-marker{display:none}.beer-heading-label{display:flex;align-items:center;min-width:0}.beer-chevron{display:inline-block;margin-right:7px;font-size:20px;line-height:1;transform:rotate(90deg);transition:transform .16s ease}.beer-section:not([open]) .beer-chevron{transform:rotate(0)}.beer-summary{color:#8a6a18;font-size:14px;white-space:nowrap}.beer-content{padding-top:8px}
.beer-list{display:grid}.beer-row{padding:10px 0;border-bottom:1px solid #f0ece4}.beer-row-main{display:flex;justify-content:space-between;gap:12px;align-items:baseline}.beer-row-main strong{font-size:14px}.beer-price{font-size:14px;font-weight:900;white-space:nowrap}.beer-meta{margin-top:3px;color:#777;font-size:14px;line-height:1.4}
.beer-source-note{margin-top:14px;padding:10px 11px;border-radius:9px;background:#faf8f3;color:#716e66;font-size:14px;line-height:1.5}.beer-source-note a{color:#555;text-decoration:underline}

.passport-card{margin-top:20px;padding:16px;border:1px solid var(--line);border-radius:16px;background:#faf9f5}.personal-heading{margin:0 0 10px;font-size:14px;font-weight:900}.passport-actions{display:flex;gap:8px;flex-wrap:wrap}.action{padding:8px 10px;border:1px solid #d7d2c7;border-radius:9px;background:#fff;font-weight:800;cursor:pointer}.action.on{background:var(--ink);color:#fff}.rating-label{margin-top:14px;font-size:14px;color:#777}
.stars{display:flex;gap:1px}.star{padding:0 2px;border:0;background:transparent;color:#ccc;font-size:27px;cursor:pointer}.star.on{color:#e6ae00}
.notes-spoiler{margin-top:10px}.notes-spoiler summary{list-style:none;cursor:pointer;font-size:14px;font-weight:800}.notes-spoiler summary::-webkit-details-marker{display:none}.notes-spoiler summary::before{content:"›";display:inline-block;margin-right:5px;font-size:17px;transition:transform .15s}.notes-spoiler[open] summary::before{transform:rotate(90deg)}
.notes-content{margin-top:10px}.field-label{display:block;margin:9px 0 5px;font-size:14px;font-weight:800;color:#666}textarea{width:100%;min-height:76px;padding:9px;border:1px solid #ddd;border-radius:9px;resize:vertical}.save{width:100%;margin-top:8px;padding:9px;border:0;border-radius:9px;background:var(--gold);font-weight:900;cursor:pointer}.save:disabled{background:#e4e1d9;color:#999;cursor:not-allowed}

.details-backdrop,.mobile-view-switch{display:none}

@media(max-width:1100px) and (min-width:721px){
  .layout{grid-template-columns:340px minmax(0,1fr) 0}
  body.details-open .layout{grid-template-columns:340px minmax(0,1fr) 360px}
  .detail{padding:18px 18px 28px}.detail h2{font-size:21px}
}

@media(max-width:720px){
  body{overflow:hidden}
  header{height:62px;padding:0 14px;overflow:hidden;transition:height .18s ease,padding .18s ease,border-width .18s ease}.map-brand .wordmark{font-size:27px;letter-spacing:-.8px}.map-brand .wordmark em{margin-left:4px;font-size:21px}.map-menu{top:62px;right:10px;width:min(260px,calc(100vw - 20px))}
  #explore{height:calc(100vh - 62px);height:calc(100dvh - 62px);padding-top:0;display:flex;flex-direction:column;min-height:0;transition:height .18s ease}
  body.mobile-header-hidden header{height:0;padding-top:0;padding-bottom:0;border-bottom-width:0}
  body.mobile-header-hidden #explore{height:100vh;height:100dvh}
  .mobile-view-switch{position:relative;z-index:900;flex:0 0 48px;height:48px;display:grid;grid-template-columns:1fr 1fr;padding:6px;background:#fff;border-bottom:1px solid var(--line)}
  .layout,.details-open .layout,body.details-open .layout{flex:1 1 auto;min-height:0}
  .mobile-view-btn{border:0;border-radius:9px;background:transparent;font-size:14px;font-weight:850;cursor:pointer}.mobile-view-btn.active{background:var(--ink);color:#fff}
  .layout,.details-open .layout,body.details-open .layout{display:block;height:auto}
  .sidebar,#map{height:100%;min-height:0}
  body[data-mobile-view="list"] #map{display:none}
  body[data-mobile-view="map"] .sidebar{display:none}
  .sidebar{padding:14px 14px 28px;border:0}
  .search-row{position:sticky;top:-14px;z-index:8;margin:0 -14px 14px;padding:10px 14px;background:#fff;border-bottom:1px solid #f0ece4}
  .region-filters,.type-filters,.personal-filters,.filters{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;padding-bottom:3px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.region-filters::-webkit-scrollbar,.type-filters::-webkit-scrollbar,.personal-filters::-webkit-scrollbar{display:none}.pill{flex:0 0 auto;white-space:nowrap}
  .results-heading{position:static;margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}
  .results-hint{display:none}.place{padding:15px 8px}
  .leaflet-control-zoom{display:none}.region-legend{left:8px;bottom:10px;padding:5px 7px;border-radius:8px;gap:3px;font-size:14px}.swatch{width:12px;height:8px;border-width:1.5px;margin-right:4px}.surprise-map-btn{right:12px;bottom:20px}
  .details-panel{position:fixed;z-index:3000;left:0;right:0;bottom:0;width:100%;height:min(78vh,720px);border:0;border-radius:20px 20px 0 0;box-shadow:0 -12px 40px #0003;transform:translateY(100%);opacity:1;pointer-events:none}
  .details-panel.open{transform:none;pointer-events:auto}.detail{padding:18px 18px 32px}
  .empty-state{margin-top:10px;margin-bottom:10px}
  .detail-map-preview{display:block}.detail-topbar:before{content:"";position:absolute;top:7px;left:50%;width:42px;height:4px;margin-left:-21px;border-radius:999px;background:#d8d3c8}.detail h2{font-size:22px}
  .details-backdrop{position:fixed;z-index:2990;inset:0;display:block;background:#0005}.details-backdrop[hidden]{display:none}
  body.details-open{overflow:hidden}
}

@supports (padding: max(0px)) {
  @media(max-width:720px){
    header{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
    .sidebar{padding-bottom:max(28px,env(safe-area-inset-bottom))}
    .details-panel{padding-bottom:env(safe-area-inset-bottom)}
  }
}

/* v1.8.3 — resilient lazy beer-data loading */
.beer-loading{display:flex;align-items:center;gap:9px}
.beer-loading-dot{width:9px;height:9px;flex:0 0 auto;border-radius:50%;background:var(--gold);animation:beerLoadingPulse 1s ease-in-out infinite alternate}
@keyframes beerLoadingPulse{from{opacity:.35;transform:scale(.8)}to{opacity:1;transform:scale(1.15)}}
.beer-load-error{display:grid;gap:5px;margin:16px 0;padding:13px 14px;border:1px solid #e4ded2;border-radius:12px;background:#faf8f3;color:#67645d;font-size:14px;line-height:1.4}
.beer-load-error strong{color:var(--ink);font-size:14px}
.beer-retry{justify-self:start;margin-top:5px;padding:7px 11px;border:1px solid #d6cfbf;border-radius:999px;background:#fff;color:var(--ink);font-weight:850;cursor:pointer}
.beer-retry:hover{background:#fff7d8;border-color:#d7b93b}

.detail-map-preview{position:relative;display:none;width:100%;height:92px;margin:14px 0 2px;padding:0;overflow:hidden;border:1px solid #ddd7cc;border-radius:13px;background:#ece9df;text-align:left;cursor:pointer}
.detail-minimap{position:absolute;inset:0;display:block;background:#ece9df}
.detail-minimap-placeholder{position:absolute;inset:0;background:linear-gradient(135deg,#e8eee5 0 35%,#f2efe5 35% 68%,#e7ede3 68% 100%);transition:opacity .2s ease}
.detail-minimap.is-loaded .detail-minimap-placeholder{opacity:0;pointer-events:none}
.detail-minimap .leaflet-pane,.detail-minimap .leaflet-control-container{pointer-events:none}
.detail-minimap .leaflet-tile-pane{filter:saturate(.78) contrast(.94)}
.detail-map-preview-label{position:absolute;z-index:500;left:10px;bottom:9px;padding:6px 9px;border-radius:999px;background:#fff;color:#1769aa;box-shadow:0 1px 5px #0002;font-size:14px;font-weight:900}
.detail-map-preview:hover{border-color:#c8b86e}.detail-map-preview:hover .detail-map-preview-label{text-decoration:underline}

/* v1.8.8 — View on map is intentionally mobile-only.
   Keep this override after the base .detail-map-preview{display:none} rule so the cascade cannot hide it. */
@media(max-width:720px){
  .detail-map-preview{display:block}
}


/* v1.8.9 — address visibility in list cards and detail sheet */
.place-address{margin-top:5px;color:#7a7a74;font-size:14px;line-height:1.35}


/* v2.0.0 — unified BeerKönig typography */
:root{
  --font-ui:"DM Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-display:"Fraunces",Georgia,serif;
}
body{font-family:var(--font-ui)}
.map-brand .wordmark{font-family:var(--font-ui)}
.detail h2{font-family:var(--font-display);font-weight:700}

/* v2.0.1 — shared BeerKönig color system & semantic design tokens */
:root{
  --color-bg:#f8f5ee;
  --color-surface:#ffffff;
  --color-surface-warm:#fffaf0;
  --color-surface-subtle:#f3eee4;
  --color-ink:#171717;
  --color-text:#26302d;
  --color-muted:#68716d;
  --color-border:#e4ded3;
  --color-border-strong:#cfc6b8;
  --color-brand:#123f38;
  --color-brand-strong:#0b302c;
  --color-brand-soft:#e6efeb;
  --color-gold:#f4c430;
  --color-gold-strong:#b77a0b;
  --color-gold-soft:#fff4c7;
  --color-brewery:#176cab;
  --color-brewpub:#e4a320;
  --color-visited:#2f7d4a;
  --color-danger:#a94b3f;
  --color-on-brand:#ffffff;
  --focus-ring:rgba(244,196,48,.22);
  --shadow-soft:0 12px 32px rgba(23,23,23,.10);
  --shadow-float:0 18px 48px rgba(23,23,23,.16);

  /* legacy aliases */
  --ink:var(--color-ink);
  --muted:var(--color-muted);
  --paper:var(--color-bg);
  --panel:var(--color-surface);
  --line:var(--color-border);
  --gold:var(--color-gold);
  --blue:var(--color-brewery);
  --brewpub:var(--color-brewpub);
  --green:var(--color-visited);
}
body{background:var(--color-bg);color:var(--color-ink)}
header{background:var(--color-ink);border-bottom-color:#292929}
.map-menu{background:var(--color-surface);color:var(--color-ink)}
.map-menu a,.map-menu button{color:var(--color-ink)}
.map-menu a:hover,.map-menu button:hover{background:var(--color-surface-subtle)}
.map-menu-divider{background:var(--color-border)}
.map-lang.active{color:var(--color-gold-strong);background:var(--color-surface-warm)}
.sidebar,.results-heading,.mobile-view-switch{background:var(--color-surface)}
.search-row{background:var(--color-surface);border-bottom-color:var(--color-border)}
.search{border-color:var(--color-border-strong);background:var(--color-surface)}
.search:focus,textarea:focus{border-color:var(--color-gold-strong);box-shadow:0 0 0 3px var(--focus-ring)}
.search-clear{color:var(--color-muted)}
.search-clear:hover{background:var(--color-surface-subtle);color:var(--color-ink)}
.search-btn{background:var(--color-gold);color:var(--color-ink)}
.search-btn:hover{background:#e6b91e}
.filter-section-label,.muted,.detail-eyebrow,.detail-address,.rating-label,.beer-meta,.beer-loading{color:var(--color-muted)}
.pill{border-color:var(--color-border);background:var(--color-surface);color:var(--color-ink)}
.pill:hover{border-color:var(--color-border-strong)}
.pill.active{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-on-brand)}
.filter-count{color:#8a928e}.pill.active .filter-count{color:#d6d9d7}
.enriched-filter{border-color:#d8bc55}.enriched-filter.active{background:var(--color-gold);border-color:var(--color-gold-strong);color:var(--color-ink)}
.place{border-bottom-color:var(--color-border)}
.place:hover{background:#fbf9f4}.place.selected{background:var(--color-gold-soft);border-left-color:var(--color-gold)}
.badge{background:var(--color-surface-subtle)}.badge.hot{background:#fff0d8}.badge.visit{background:var(--color-brand-soft)}.badge.enriched,.detail-data-badge{background:var(--color-gold-soft);color:#6b5200;border-color:#e3c95b}
.empty-state,.beer-source-note,.beer-load-error{background:#fbf9f4;border-color:var(--color-border);color:var(--color-muted)}
.region-legend,.surprise-map-btn,.details-panel{background:var(--color-surface)}
.surprise-map-btn{color:var(--color-ink);border-color:rgba(23,23,23,.12)}.surprise-map-btn:hover{background:var(--color-surface-subtle)}
.details-panel{border-left-color:var(--color-border)}
.details-empty{color:var(--color-muted)}.details-empty strong{color:var(--color-ink)}
.details-close{border-color:var(--color-border);background:var(--color-surface);color:var(--color-muted)}.details-close:hover{background:var(--color-surface-subtle)}
.external-link,.detail-map-preview-label{color:var(--color-brewery)}
.beer-section{border-top-color:var(--color-border)}
.beer-row{border-bottom-color:var(--color-border)}
.passport-card{border-color:var(--color-border);background:#fbf9f4}
.action{border-color:var(--color-border-strong);background:var(--color-surface)}.action.on{background:var(--color-ink);color:var(--color-on-brand)}
.star.on{color:var(--color-gold-strong)}
textarea{border-color:var(--color-border);background:var(--color-surface)}
.save{background:var(--color-gold);color:var(--color-ink)}
.detail-map-preview{border-color:var(--color-border);background:var(--color-surface-subtle)}
.detail-map-preview:hover{border-color:#c8ad48}
.detail-map-preview-label{background:var(--color-surface)}
@media(max-width:720px){
  .details-panel{background:var(--color-surface);box-shadow:0 -12px 40px rgba(23,23,23,.20)}
  .detail-topbar:before{background:var(--color-border-strong)}
}


/* v2.0.2.1 — unified BeerKönig buttons, chips and segmented controls */
:root{
  --control-radius:12px;
  --control-radius-sm:10px;
  --control-height:42px;
  --chip-height:34px;
  --control-transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease;
}

button,a{ -webkit-tap-highlight-color:transparent; }

/* Icon buttons */
.map-menu-btn,.details-close,.search-clear{
  transition:var(--control-transition);
}
.map-menu-btn{
  width:42px;height:42px;padding:0;border-radius:var(--control-radius-sm);
  display:grid;place-items:center;
}
.map-menu-btn:hover{background:rgba(255,255,255,.09)}
.map-menu-btn:active{background:rgba(255,255,255,.14)}
.details-close{width:38px;height:38px;border-radius:50%}
.details-close:hover{border-color:var(--color-border-strong);background:var(--color-surface-subtle)}
.details-close:active{transform:scale(.96)}
.search-clear:hover{background:var(--color-surface-subtle)}

/* Menu actions */
.map-menu{border:1px solid var(--color-border);box-shadow:var(--shadow-float)}
.map-menu a,.map-menu button{
  min-height:42px;padding:11px 12px;border-radius:var(--control-radius-sm);
  display:flex;align-items:center;
  transition:var(--control-transition);
}
.map-menu a:active,.map-menu button:active{background:#ece5d9}

/* Primary action */
.search-btn,.save{
  min-height:var(--control-height);
  border:1px solid transparent;
  border-radius:var(--control-radius);
  background:var(--color-gold);
  color:var(--color-ink);
  box-shadow:0 3px 10px rgba(23,23,23,.08);
  transition:var(--control-transition);
}
.search-btn:hover,.save:not(:disabled):hover{background:#eab927;box-shadow:0 5px 14px rgba(23,23,23,.12);transform:translateY(-1px)}
.search-btn:active,.save:not(:disabled):active{transform:translateY(0);box-shadow:0 2px 7px rgba(23,23,23,.10)}
.search-btn:disabled,.save:disabled{box-shadow:none;transform:none}

/* Filter chips */
.pill{
  min-height:var(--chip-height);
  padding:7px 11px;
  border:1px solid var(--color-border);
  border-radius:999px;
  background:var(--color-surface);
  color:var(--color-ink);
  box-shadow:none;
  transition:var(--control-transition);
}
.pill:hover{border-color:var(--color-border-strong);background:var(--color-surface-subtle)}
.pill:active{transform:scale(.98)}
.pill.active{
  background:var(--color-ink);
  border-color:var(--color-ink);
  color:var(--color-on-brand);
  box-shadow:0 2px 7px rgba(23,23,23,.12);
}
.pill.active:hover{background:#282828;border-color:#282828}
.enriched-filter{border-color:#d8bc55;background:#fffdf5}
.enriched-filter:hover{background:var(--color-gold-soft);border-color:#cfad35}
.enriched-filter.active{background:var(--color-gold);border-color:var(--color-gold-strong);color:var(--color-ink);box-shadow:0 2px 7px rgba(183,122,11,.16)}

/* Mobile List / Map is a true segmented control */
.mobile-view-switch{gap:4px;padding:6px;background:var(--color-surface);border-bottom:1px solid var(--color-border)}
.mobile-view-btn{
  min-height:36px;border:1px solid transparent;border-radius:var(--control-radius-sm);
  background:transparent;color:var(--color-muted);
  transition:var(--control-transition);
}
.mobile-view-btn:hover{background:var(--color-surface-subtle);color:var(--color-ink)}
.mobile-view-btn.active{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-on-brand);box-shadow:0 2px 8px rgba(23,23,23,.12)}

/* Secondary / floating action */
.surprise-map-btn{
  min-height:var(--control-height);padding:0 14px;
  border:1px solid var(--color-border-strong);border-radius:var(--control-radius);
  background:var(--color-surface);color:var(--color-ink);
  box-shadow:0 5px 18px rgba(23,23,23,.16);
  transition:var(--control-transition);
}
.surprise-map-btn:hover{background:var(--color-surface-subtle);border-color:#bdb4a6;transform:translateY(-1px);box-shadow:0 7px 22px rgba(23,23,23,.19)}
.surprise-map-btn:active{transform:translateY(0)}

/* Detail actions */
.external-links{gap:8px;margin-top:14px}
.external-link{
  display:inline-flex;align-items:center;justify-content:center;min-height:38px;
  padding:8px 11px;border:1px solid var(--color-border-strong);border-radius:var(--control-radius-sm);
  background:var(--color-surface);color:var(--color-ink);text-decoration:none;
  transition:var(--control-transition);
}
.external-link:hover{background:var(--color-surface-subtle);border-color:#bdb4a6;text-decoration:none}
.external-link:active{transform:scale(.98)}
.action{
  min-height:38px;padding:8px 11px;border:1px solid var(--color-border-strong);
  border-radius:var(--control-radius-sm);background:var(--color-surface);color:var(--color-ink);
  transition:var(--control-transition);
}
.action:hover{background:var(--color-surface-subtle);border-color:#bdb4a6}
.action:active{transform:scale(.98)}
.action.on{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-on-brand);box-shadow:0 2px 7px rgba(23,23,23,.12)}
.detail-map-preview-label{
  min-height:34px;display:inline-flex;align-items:center;padding:6px 10px;
  border:1px solid var(--color-border);border-radius:999px;
  color:var(--color-ink);text-decoration:none;box-shadow:0 2px 8px rgba(23,23,23,.10);
}
.detail-map-preview:hover .detail-map-preview-label{text-decoration:none;background:var(--color-surface-subtle)}

/* Rating stars remain visually light, but get proper control states */
.star{border-radius:8px;transition:var(--control-transition)}
.star:hover{background:var(--color-surface-subtle);transform:translateY(-1px)}
.star:active{transform:translateY(0) scale(.96)}

/* Unified keyboard focus */
.map-menu-btn:focus-visible,.map-menu a:focus-visible,.map-menu button:focus-visible,
.search-btn:focus-visible,.search-clear:focus-visible,.pill:focus-visible,.mobile-view-btn:focus-visible,
.surprise-map-btn:focus-visible,.details-close:focus-visible,.external-link:focus-visible,.action:focus-visible,
.save:focus-visible,.star:focus-visible,.detail-map-preview:focus-visible{
  outline:0;
  box-shadow:0 0 0 3px var(--focus-ring),0 0 0 1px var(--color-gold-strong);
}

/* v2.0.3.2 — address punctuation + SVG chevron hotfix */
:root{
  --card-radius:16px;
  --card-radius-sm:14px;
  --card-border:1px solid var(--color-border);
  --card-shadow:0 2px 10px rgba(23,23,23,.045);
  --card-shadow-hover:0 8px 22px rgba(23,23,23,.085);
  --card-padding:14px;
}

/* Result list cards */
#places{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:8px 0 2px;
}
.place{
  margin:0;
  padding:var(--card-padding);
  border:var(--card-border);
  border-left:1px solid var(--color-border);
  border-radius:var(--card-radius-sm);
  background:var(--color-surface);
  box-shadow:var(--card-shadow);
  transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.place:hover{
  background:var(--color-surface);
  border-color:var(--color-border-strong);
  box-shadow:var(--card-shadow-hover);
  transform:translateY(-1px);
}
.place:active{transform:translateY(0)}
.place.selected{
  background:var(--color-gold-soft);
  border-color:#ddc454;
  border-left-color:#ddc454;
  box-shadow:0 0 0 1px rgba(183,122,11,.05),0 6px 18px rgba(23,23,23,.07);
}
.place:focus-visible{
  box-shadow:0 0 0 3px var(--focus-ring),0 0 0 1px var(--color-gold-strong);
}
.place-main{align-items:center}
.place h3{margin-bottom:5px;font-size:15px;font-weight:800;letter-spacing:-.01em}
.place-chevron{
  flex:0 0 auto;
  align-self:center;
  width:36px;height:36px;
  display:grid;place-items:center;
  margin-top:0;
  border-radius:50%;
  color:#757873;
  font-size:28px;
  font-weight:700;
  line-height:1;
  transition:background-color .16s ease,color .16s ease,transform .16s ease;
}
.place-chevron svg{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.place:hover .place-chevron{background:var(--color-surface-subtle);color:var(--color-ink);transform:translateX(1px)}
.place.selected .place-chevron{background:rgba(255,255,255,.72);color:var(--color-ink)}
.place-address{margin-top:6px;color:var(--color-muted)}
.badges{gap:6px;margin-top:9px}
.badge{
  display:inline-flex;align-items:center;
  min-height:24px;
  padding:3px 8px;
  border:1px solid transparent;
  font-weight:700;
}
.badge.hot{border-color:#f0d2a1}
.badge.visit{border-color:#bfd8c8}
.badge.enriched{border-color:#e3c95b}
.place-visit-date{margin-top:8px}

/* Supporting card-like states */
.empty-state{
  margin-top:8px;
  padding:16px;
  border:1px dashed var(--color-border-strong);
  border-radius:var(--card-radius-sm);
  background:var(--color-surface-subtle);
}
.passport-card{
  border-radius:var(--card-radius);
  box-shadow:var(--card-shadow);
}

@media(max-width:720px){
  #places{gap:8px;padding-top:8px}
  .place{padding:13px 14px}
  .place h3{font-size:15px}
}


/* v2.0.4 — unified BeerKönig header system */
:root{
  --header-height:68px;
  --header-height-mobile:62px;
  --header-pad-x:20px;
  --header-pad-x-mobile:14px;
  --header-bg:#171717;
  --header-border:#2a2a2a;
  --header-logo-size:34px;
  --header-logo-size-mobile:27px;
  --header-crown-size:25px;
  --header-crown-size-mobile:21px;
  --header-menu-size:42px;
  --header-menu-radius:10px;
  --header-popover-width:260px;
}
.menu-icon{width:24px;height:24px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.menu-close-icon{display:none}
[aria-expanded="true"] .menu-open-icon{display:none}
[aria-expanded="true"] .menu-close-icon{display:block}

header{
  height:var(--header-height);padding:0 var(--header-pad-x);gap:0;
  background:var(--header-bg);color:var(--color-on-brand);border-bottom:1px solid var(--header-border);
  position:relative;z-index:950;overflow:visible;
}
.map-brand .wordmark{font-size:var(--header-logo-size);letter-spacing:-1.2px;color:var(--color-on-brand)}
.map-brand .wordmark em{margin-left:6px;font-size:var(--header-crown-size)}
.map-menu-btn{
  width:var(--header-menu-size);height:var(--header-menu-size);padding:0;margin-left:auto;
  display:grid;place-items:center;border-radius:var(--header-menu-radius);font-size:inherit;
}
.map-menu{
  top:calc(100% + 8px);right:var(--header-pad-x);width:var(--header-popover-width);
  border-radius:14px;padding:8px;
}
.map-menu a{min-height:44px;padding:11px 12px;border-radius:10px}
@media(max-width:720px){
  header{height:var(--header-height-mobile);padding:0 var(--header-pad-x-mobile)}
  .map-brand .wordmark{font-size:var(--header-logo-size-mobile);letter-spacing:-.8px}
  .map-brand .wordmark em{margin-left:4px;font-size:var(--header-crown-size-mobile)}
  .map-menu{top:calc(100% + 8px);right:10px;width:min(var(--header-popover-width),calc(100vw - 20px))}
  body.mobile-header-hidden header{height:0;padding-top:0;padding-bottom:0;border-bottom-width:0;overflow:hidden}
}


/* v2.0.5 — detail sheet refinement */
.detail{
  padding:24px 22px 36px;
}
.detail-topbar{
  align-items:flex-start;
  gap:18px;
  padding-bottom:2px;
}
.detail-identity{min-width:0;flex:1}
.detail-eyebrow{
  margin-bottom:5px;
  color:var(--color-muted);
  font-weight:800;
  letter-spacing:.01em;
  text-transform:none;
}
.detail h2{
  margin:0;
  font-size:26px;
  line-height:1.08;
  letter-spacing:-.025em;
}
.detail-address{
  margin-top:8px;
  line-height:1.45;
}
.detail-data-badge{
  min-height:30px;
  align-items:center;
  margin-top:14px;
  padding:5px 9px;
  border:1px solid #e3c95b;
  border-radius:999px;
}
.external-links{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin:16px 0 0;
}
.external-link{
  width:100%;
  min-height:42px;
  gap:7px;
  font-weight:800;
}
.external-link svg{
  width:17px;height:17px;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
.beer-section{
  margin:18px 0 0;
  padding:16px;
  border:1px solid var(--color-border);
  border-radius:var(--card-radius);
  background:var(--color-surface);
  box-shadow:var(--card-shadow);
}
.beer-heading{font-size:16px}
.beer-summary{font-weight:800}
.beer-content{padding-top:10px}
.beer-row{padding:11px 0}
.beer-row:first-child{padding-top:4px}
.beer-row:last-child{border-bottom:0;padding-bottom:4px}
.beer-source-note{
  margin-top:12px;
  border:1px solid var(--color-border);
  background:var(--color-surface-subtle);
}
.beer-loading,.beer-load-error{
  margin:18px 0 0;
  padding:15px 16px;
  border:1px solid var(--color-border);
  border-radius:var(--card-radius);
  background:var(--color-surface-subtle);
}
.passport-card{
  margin-top:16px;
  padding:18px;
  border:1px solid var(--color-border);
  border-radius:var(--card-radius);
  background:var(--color-surface-subtle);
  box-shadow:none;
}
.personal-heading{
  margin:0;
  font-family:var(--font-display);
  font-size:20px;
  line-height:1.15;
  font-weight:700;
}
.personal-subcopy{
  margin:5px 0 14px;
  color:var(--color-muted);
  font-size:14px;
  line-height:1.45;
}
.passport-actions{gap:8px}
.rating-label{margin-top:18px;font-weight:700}
.notes-spoiler{margin-top:14px;padding-top:14px;border-top:1px solid var(--color-border)}
.detail-map-preview{
  height:116px;
  margin:14px 0 0;
  border-radius:var(--card-radius-sm);
  box-shadow:var(--card-shadow);
}
.detail-map-preview-label{
  left:10px;bottom:10px;
  min-height:36px;
  padding:7px 11px;
}
.details-panel{scrollbar-gutter:stable}

@media(max-width:1024px) and (min-width:721px){
  .detail{padding:20px 18px 30px}
  .detail h2{font-size:23px}
}
@media(max-width:720px){
  .details-panel{
    height:min(86vh,780px);
    border-radius:24px 24px 0 0;
  }
  .detail{
    padding:28px 20px 34px;
  }
  .detail-topbar:before{
    top:9px;width:44px;height:4px;margin-left:-22px;
  }
  .detail h2{font-size:25px}
  .detail-eyebrow{margin-bottom:6px}
  .details-close{width:42px;height:42px}
  .detail-map-preview{height:132px}
  .external-links{margin-top:15px}
  .external-link{min-height:44px}
  .beer-section{padding:16px;margin-top:16px}
  .passport-card{padding:17px;margin-top:14px}
}
@media(max-width:420px){
  .external-links{grid-template-columns:1fr}
}


/* v2.0.7.2 — browser location + selected-place pin */
.location-btn{
  width:100%;min-height:40px;margin:-8px 0 18px;padding:8px 10px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--color-border);border-radius:12px;
  background:var(--color-surface);color:var(--color-brand);
  font:inherit;font-weight:800;cursor:pointer;
  transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.location-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.location-btn:hover{background:var(--color-brand-soft);border-color:#b9cec7}
.location-btn:active{transform:translateY(1px)}
.location-btn:focus-visible{outline:0;box-shadow:0 0 0 3px var(--focus-ring)}
.location-btn:disabled{cursor:wait;opacity:.66}
.location-btn.is-error{color:var(--color-danger);border-color:#e4c0ba;background:#fff7f5}

.user-location-marker{background:transparent;border:0}
.user-location-dot{
  width:16px;height:16px;border:4px solid #fff;border-radius:50%;
  background:#2563eb;box-shadow:0 0 0 2px rgba(37,99,235,.35),0 2px 8px rgba(0,0,0,.28);
}

.beer-place-marker.selected-place-marker{overflow:visible!important}
.selected-place-pin{position:relative;width:28px;height:44px;display:block}
.selected-place-pin-stem{
  position:absolute;left:50%;top:15px;width:2px;height:27px;
  background:var(--color-ink);border-radius:999px;transform:translateX(-50%);
  box-shadow:0 1px 2px rgba(0,0,0,.16);
}
.selected-place-pin-dot{
  position:absolute;left:50%;top:0;width:22px;height:22px;transform:translateX(-50%);
  border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 2px var(--color-ink),0 3px 8px rgba(0,0,0,.28);
  z-index:2;
}
.selected-place-pin-dot.brewery{background:var(--color-brewery)}
.selected-place-pin-dot.brewpub{background:var(--color-brewpub)}
.selected-place-pin-dot.visited{box-shadow:0 0 0 3px var(--color-visited),0 3px 8px rgba(0,0,0,.28)}
.selected-place-pin-dot.hot{box-shadow:0 0 0 3px var(--color-gold),0 3px 8px rgba(0,0,0,.28)}
.selected-place-pin .marker-price{right:-8px;top:-8px}

@media(max-width:720px){
  .location-btn{margin:-5px 0 16px}
}


/* v2.0.7.3 — map controls + source-note cleanup */
.map-fab-stack{
  position:absolute;
  right:16px;
  bottom:30px;
  z-index:1000;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
  pointer-events:none;
}
.map-fab-stack > button{position:static!important;right:auto!important;bottom:auto!important;pointer-events:auto}
.location-btn{
  width:auto;
  min-height:var(--control-height);
  margin:0;
  padding:0 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid var(--color-border-strong);
  border-radius:var(--control-radius);
  background:var(--color-surface);
  color:var(--color-ink);
  box-shadow:0 5px 18px rgba(23,23,23,.16);
}
.location-btn:hover{background:var(--color-surface-subtle);border-color:#bdb4a6;transform:translateY(-1px)}
.location-btn:active{transform:translateY(0)}
.location-btn.is-error{color:var(--color-danger);border-color:#e4c0ba;background:#fff7f5}
.beer-source-note{
  margin-top:14px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:var(--color-muted);
}
@media(max-width:720px){
  .map-fab-stack{right:12px;bottom:20px;gap:8px}
  .location-btn{margin:0}
}


/* v2.0.7.5 — iOS Safari detail-sheet viewport hotfix */
@media(max-width:720px){
  .details-panel{
    /* Safari's browser chrome changes the visual viewport without always matching vh.
       Keep the entire sheet inside the actually visible viewport. */
    bottom:var(--bk-vv-bottom,0px);
    height:min(86dvh,780px,calc(var(--bk-vv-height,100dvh) - 16px));
    max-height:calc(var(--bk-vv-height,100dvh) - 16px);
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .detail-topbar{
    position:sticky;
    top:0;
    z-index:24;
    margin:-10px -4px 0;
    padding:10px 4px 8px;
    background:var(--color-surface);
  }
  .details-close{
    position:relative;
    z-index:25;
  }
}
@supports (padding:max(0px)){
  @media(max-width:720px){
    .details-panel{
      padding-bottom:max(env(safe-area-inset-bottom),8px);
    }
  }
}

/* v2.0.7.6 — keep the sticky detail header above the embedded Leaflet preview */
@media(max-width:720px){
  .detail-topbar{
    z-index:1200;
    isolation:isolate;
    /* Opaque surface prevents map tiles/text bleeding through while scrolling. */
    background:var(--color-surface);
  }
  .details-close{z-index:1201}
  .detail-map-preview{
    z-index:1;
    isolation:isolate;
  }
}

/* v2.0.7.7 — mobile Safari search + compact map controls */
@media(max-width:720px){
  /* iOS Safari auto-zooms focused inputs below 16px. */
  input.search{
    font-size:16px;
  }

  /* Keep map actions available without covering useful map area. */
  .map-fab-stack{
    right:max(12px,env(safe-area-inset-right));
    bottom:max(20px,env(safe-area-inset-bottom));
    gap:8px;
  }
  .map-fab-stack .surprise-map-btn,
  .map-fab-stack .location-btn{
    width:44px;
    height:44px;
    min-width:44px;
    min-height:44px;
    padding:0;
    border-radius:50%;
    justify-content:center;
    gap:0;
  }
  .map-fab-stack .surprise-map-btn > span:last-child,
  .map-fab-stack .location-btn > span{
    display:none;
  }
  .map-fab-stack .surprise-map-icon{
    display:block;
    font-size:20px;
    line-height:1;
  }
  .map-fab-stack .location-btn svg{
    width:20px;
    height:20px;
  }

  /* Region boundaries remain visible on the map; the full legend costs too much
     screen space on phones. !important beats the zoom handler's inline display. */
  .region-legend{
    display:none!important;
  }
}


/* v2.0.7.10 — mobile interaction stability */
@media(max-width:720px){
  /* Slower, softer sheet entrance. */
  .details-panel{
    transition:transform .34s cubic-bezier(.22,.72,.24,1), opacity .24s ease;
    will-change:transform;
  }
  .details-backdrop{transition:opacity .24s ease}
}

/* Touch devices should never depend on sticky :hover states. */
@media(max-width:720px) and (hover:none), (max-width:720px) and (pointer:coarse){
  .map-menu a:hover,.map-menu button:hover{background:transparent}
  .search-clear:hover{background:transparent;color:#777}
  .search-btn:hover{background:var(--color-gold);box-shadow:none;transform:none}
  .pill:hover{background:var(--color-surface);border-color:var(--color-border)}
  .pill.active:hover{background:var(--color-ink);border-color:var(--color-ink);color:#fff}
  .enriched-filter:hover{background:var(--color-surface);border-color:var(--color-border)}
  .place:hover{background:var(--color-surface);border-color:var(--color-border);box-shadow:var(--card-shadow);transform:none}
  .place.selected:hover{background:var(--color-gold-soft);border-color:#ddc454;box-shadow:0 0 0 1px rgba(183,122,11,.05),0 6px 18px rgba(23,23,23,.07)}
  .place:hover .place-chevron{background:transparent;color:#757873;transform:none}
  .mobile-view-btn:hover{background:transparent;color:var(--color-ink)}
  .mobile-view-btn.active:hover{background:var(--color-ink);color:#fff}
  .surprise-map-btn:hover,.location-btn:hover{background:var(--color-surface);border-color:rgba(23,23,23,.12);box-shadow:var(--shadow-soft);transform:none}
  .details-close:hover{background:var(--color-surface);border-color:var(--color-border)}
  .external-link:hover{background:var(--color-surface);border-color:var(--color-border);text-decoration:none}
  .action:hover{background:var(--color-surface);border-color:var(--color-border)}
  .action.on:hover{background:var(--color-ink);color:#fff}
  .detail-map-preview:hover{border-color:var(--color-border)}
  .detail-map-preview:hover .detail-map-preview-label{background:var(--color-surface);text-decoration:none}
  .star:hover{background:transparent;transform:none}
  .save:not(:disabled):hover{background:var(--color-gold);box-shadow:none;transform:none}
  .beer-retry:hover{background:var(--color-surface);border-color:var(--color-border)}
}


/* v2.0.7.11 — Safari compositing / detail-map stability */
@media(max-width:720px){
  /* Keep the backdrop permanently composited. Toggling display/hidden in Safari can
     produce a one-frame black flash before the bottom sheet animation begins. */
  .details-backdrop{
    display:block!important;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .18s linear, visibility 0s linear .18s;
    will-change:opacity;
    transform:translateZ(0);
    -webkit-transform:translateZ(0);
  }
  .details-backdrop.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition:opacity .18s linear, visibility 0s linear 0s;
  }

  /* Keep the preview on its own stable compositing layer. */
  .detail-map-preview,
  .detail-minimap,
  .detail-minimap .leaflet-map-pane,
  .detail-minimap .leaflet-tile-pane{
    transform:translateZ(0);
    -webkit-transform:translateZ(0);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }
}
.trail-filter{border-top:1px solid #e0dfd4;padding-top:14px;margin-top:12px}.trail-filter select{width:100%;min-width:0;border:1px solid #d2d5c9;border-radius:9px;background:#fff;padding:10px;font:inherit;font-size:13px;color:#163d34}.trail-summary{font-size:12px;line-height:1.6;color:#5f6f64;margin-top:9px}.trail-summary a{color:#195642;text-underline-offset:3px}.trail-alert{color:#8b4c16}.trail-stop-pin{width:32px;height:32px;display:grid;place-items:center;border:3px solid white;color:white;border-radius:50%;font:bold 12px system-ui;box-shadow:0 2px 5px #0005}.trail-open-place{margin-top:8px;border:1px solid #ccd2c6;border-radius:6px;padding:6px 9px;background:white;color:#163d34;cursor:pointer}
.trail-map-control{background:white;padding:10px;border:1px solid #d9ded4;border-radius:10px;box-shadow:0 2px 10px #0002;max-width:240px}.trail-map-control label{display:block;font-size:11px;font-weight:700;color:#163d34;margin-bottom:4px}.trail-map-control select{width:100%;min-width:0;max-width:218px;background:white;border:1px solid #d0d6cd;border-radius:6px;padding:6px;color:#163d34;font-size:12px}.trail-map-link{display:block;font-size:11px;color:#195642;margin-top:5px}@media(max-width:720px){.trail-map-control{max-width:195px;padding:8px}.trail-map-control select{max-width:175px}}
.trail-map-control{width:255px;max-width:255px}.trail-map-control select{max-width:none}.trail-callout{border-top:1px solid #e0e6dd;margin-top:9px;padding-top:10px;color:#183d32;font:12px/1.45 'DM Sans',system-ui}.trail-callout strong{display:block;font-size:14px;line-height:1.3;margin-bottom:9px}.trail-callout-stats{display:flex;gap:25px;margin:10px 0}.trail-callout-stats span{font-size:10px;color:#65736a}.trail-callout-stats b{display:block;font-size:19px;line-height:1.2;color:#183d32}.trail-callout-meta{font-size:11px;color:#53665b}.trail-callout p{font-size:11px;margin:7px 0}.trail-callout a{color:#195642;display:inline-block;margin-top:8px;font-size:11px}.trail-callout-actions{display:flex;gap:6px;margin-top:10px}.trail-callout-actions button{border:1px solid #cdd7cb;border-radius:6px;padding:6px 9px;background:#f5f8f1;color:#183d32;font-size:11px;cursor:pointer}.trail-mode .region-legend{display:none!important}@media(max-width:720px){.trail-map-control{width:225px;max-width:225px}.trail-map-control select{max-width:none}.trail-callout strong{font-size:13px}.trail-callout{padding-top:8px;margin-top:8px}.trail-callout-stats{margin:7px 0}.trail-callout-actions{margin-top:8px}}

.swatch-nb{background:#b18bc855;border-color:#8757a6}

.swatch-opf{background:#65bdb655;border-color:#17847f}