html.yosh-pacome-responsive body.y-app #mapcon #y-map-dock { position:absolute; bottom:92px; left:12px; right:12px; padding:12px; border:1px solid var(--y-line); border-radius:12px; background:var(--y-bg); pointer-events:auto; }
.y-map-modes { display:flex; gap:6px; overflow-x:auto; padding:2px 0 6px; scrollbar-width:thin; }
.y-map-modes button { flex:none; min-height:44px; border:1px solid var(--y-line); border-radius:24px; padding:8px 12px; font:700 12px var(--y-body); background:transparent; color:var(--y-muted); }
.y-map-modes button[aria-pressed=true] { background:var(--y-yellow); color:var(--y-ink); border-color:var(--y-yellow); }
.y-map-modes button:disabled { opacity:.4; cursor:default; }
#y-map-ambience-info { margin:10px 0 0; color:var(--y-muted); font:400 11px/1.5 var(--y-mono); }
#y-map-ambience-info[hidden] { display:none; }
.y-map-ambience-marker { position:relative; isolation:isolate; min-width:60px; min-height:60px; max-width:160px; padding:0; border:0; background:transparent; cursor:pointer; color:var(--y-fg); }
.y-map-ambience-marker::before { content:''; position:absolute; z-index:0; pointer-events:none; top:28px; left:50%; width:140px; height:140px; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle,#f6c32875 0%,#f6c32828 45%,#f6c32800 72%); }
.y-map-ambience-marker[data-band=medium]::before { width:180px; height:180px; background:radial-gradient(circle,#ef5a4ca0 0%,#f6c32845 42%,#f6c32800 72%); }
.y-map-ambience-marker[data-band=high]::before { width:220px; height:220px; background:radial-gradient(circle,#ef5a4cc0 0%,#ef5a4c60 35%,#f6c32825 55%,#f6c32800 72%); }
.y-map-ambience-marker img { position:relative; z-index:1; width:56px; height:56px; object-fit:cover; border:3px solid var(--y-yellow); border-radius:50%; }
.y-map-ambience-marker small,.y-map-ambience-marker span { position:relative; z-index:1; display:block; width:max-content; max-width:160px; padding:4px 8px; border-radius:4px; background:var(--y-bg); color:var(--y-fg); font:700 11px/1.4 var(--y-body); overflow-wrap:anywhere; }
.y-map-ambience-marker span { margin:3px auto 0; color:var(--y-yellow); font:400 10px/1.4 var(--y-mono); }
#y-map-kiosk-control { padding:12px 0; }
#y-map-kiosk-control[hidden],#y-map-kiosk-visit[hidden] { display:none; }
#y-map-friend-stories { display:flex; gap:10px; padding:14px 0 2px; max-width:100%; overflow-x:auto; }
#y-map-friend-stories[hidden] { display:none; }
#y-map-friend-stories button { display:flex; flex:none; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-width:64px; min-height:64px; max-width:80px; padding:3px; border:0; background:transparent; color:var(--y-muted); font:700 11px var(--y-body); }
#y-map-friend-stories button img { width:44px; height:44px; object-fit:cover; border:2px solid var(--y-line); border-radius:50%; }
#y-map-friend-stories button[aria-pressed=true] { color:var(--y-yellow); }
#y-map-friend-stories button[aria-pressed=true] img { border-color:var(--y-yellow); }
#y-map-friend-stories button:disabled { opacity:.35; cursor:default; }
#y-map-friend-stories button:disabled img { filter:grayscale(1); }
#y-map-friend-stories span { width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#y-map-friend-stories #y-map-friends-all { align-self:flex-start; min-width:44px; width:44px; min-height:44px; height:44px; margin:3px 4px 0; border:1px solid var(--y-line); border-radius:50%; }
#y-map-friend-stories #y-map-friends-all[aria-pressed=true] { border-color:var(--y-yellow); background:var(--y-card); }
.y-map-friend-marker { display:flex; flex-direction:column; align-items:center; min-width:44px; min-height:44px; padding:0; border:0; background:transparent; cursor:pointer; }
.y-map-friend-marker img { width:22.4px; height:22.4px; border:1.2px solid var(--y-yellow); border-radius:50%; object-fit:cover; }
.y-map-friend-marker small { max-width:140px; padding:5px 8px; border:1px solid var(--y-line); border-radius:4px; background:var(--y-bg); color:var(--y-fg); font:700 11px var(--y-body); }
#y-map-kiosk-control p { margin:0 0 12px; font:700 10px/1.5 var(--y-mono); color:var(--y-yellow); }
#y-map-kiosk-control button { min-height:44px; padding:10px 14px; border:1px solid var(--y-line); border-radius:24px; background:var(--y-card); color:var(--y-fg); font:700 12px var(--y-body); margin:0 6px 0 0; }
.y-map-bac-marker { min-width:60px; min-height:60px; padding:0; border:0; background:transparent; cursor:pointer; opacity:.4; }
.y-map-bac-marker img { width:60px; height:60px; border:3px solid var(--y-line); border-radius:50%; object-fit:cover; filter:grayscale(1); }
.y-map-bac-marker small { display:block; width:max-content; max-width:140px; padding:5px 8px; border-radius:4px; background:var(--y-bg); color:var(--y-fg); font:700 11px/1.3 var(--y-body); }
.y-map-bac-marker.is-playing { opacity:1; }
.y-map-bac-marker.is-playing img { filter:none; border-color:var(--y-yellow); box-shadow:0 0 0 6px #f6c32850; }
.y-map-tour-marker { position:relative; width:68px; min-height:68px; padding:0; border:0; border-radius:50%; background:none; cursor:pointer; }
.y-map-tour-marker img { width:60px; height:60px; object-fit:cover; border:3px solid var(--y-yellow); border-radius:50%; }
.y-map-tour-number { position:absolute; top:-4px; right:-4px; display:grid; place-items:center; width:26px; height:26px; border:2px solid var(--y-bg); border-radius:50%; color:var(--y-ink); background:var(--y-yellow); font:700 12px var(--y-mono); }
.y-map-tour-marker small { display:block; width:max-content; max-width:140px; margin:4px 0 0; padding:5px 8px; border-radius:4px; background:var(--y-bg); color:var(--y-fg); font:700 11px var(--y-body); }
html.yosh-pacome-responsive body.y-app #mapcon .y-map-sheet { position:absolute; bottom:92px; left:12px; right:12px; max-height:60dvh; padding:18px; overflow-y:auto; border:1px solid var(--y-line); border-top:4px solid var(--y-yellow); border-radius:12px; background:var(--y-bg); color:var(--y-fg); pointer-events:auto; }
.y-map-sheet-head { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.y-map-sheet-head h2 { margin:0; font:400 22px/1.1 var(--y-display); overflow-wrap:anywhere; }
.y-map-sheet-head .y-iconbtn { flex:none; color:var(--y-fg); font-size:24px; }
.y-map-sheet-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.y-map-sheet .y-btn { min-height:44px; border:1px solid var(--y-line); padding:10px 14px; background:var(--y-card); color:var(--y-fg); font:700 13px/1.4 var(--y-body); border-radius:24px; }
.y-map-sheet .y-map-sheet-event { display:block; width:100%; margin:12px 0; padding:12px; text-align:left; border-radius:6px; border-left:3px solid var(--y-yellow); }
.y-map-sheet-event small { display:block; margin-top:6px; font:400 11px/1.4 var(--y-mono); color:var(--y-muted); }
html.yosh-pacome-responsive body.y-app #mapcon #map-public-controls .map-state-control { position:static; inset:auto; width:100%; max-width:none; border:0; padding:12px 0 0; margin:0; background:none; }
html.yosh-pacome-responsive body.y-app #mapcon #map-public-controls .map-state-control .map-state-btn { display:block; min-height:44px; }
html.yosh-pacome-responsive body.y-app #mapcon #map-public-controls .map-action-btn:not([data-map-action=location]) { display:none; }
html.yosh-pacome-responsive body.y-app #mapcon #map-public-controls #map-public-status { top:80px; left:16px; right:72px; width:auto; border:1px solid var(--y-line); border-radius:8px; background:var(--y-bg); color:var(--y-fg); padding:12px; font:400 13px/1.5 var(--y-body); pointer-events:auto; }
html.yosh-pacome-responsive body.y-app #mapcon #map-public-controls #map-public-status:empty { display:none; }
html.yosh-pacome-responsive body.y-app #mapcon #map-public-controls #map-public-status.is-visible:not(:empty) { display:block!important; max-width:none; }
html.yosh-pacome-responsive body.y-app #mapcon .map-venue-strip { top:154px; left:16px; right:72px; width:auto; max-width:calc(100% - 88px); min-height:64px; background:transparent; }
html.yosh-pacome-responsive body.y-app #mapcon .map-venue-chip-logo { width:52px; height:52px; border:2px solid var(--y-line); }
html.yosh-pacome-responsive body.y-app #mapcon .map-event-marker { min-width:44px; min-height:44px; }
html.yosh-pacome-responsive body.y-app #mapcon .map-event-marker-logo { width:24px; height:24px; border:1px solid var(--y-fg); }
html.yosh-pacome-responsive body.y-app #mapcon .map-event-marker-label { max-width:150px; padding:5px 8px; border:1px solid var(--y-line); border-radius:4px; background:var(--y-bg); color:var(--y-fg); font:700 11px/1.3 var(--y-body); }
html.yosh-pacome-responsive body.y-app #mapcon .map-event-marker.is-live .map-event-marker-logo { border-color:var(--y-red); box-shadow:0 0 0 2px #ef5a4c40; }
@media(prefers-reduced-motion:no-preference) {
 html.yosh-pacome-responsive body.y-app #mapcon .map-event-marker.is-live .map-event-marker-logo { animation:y-live-ring 2s ease-in-out infinite; }
}
@keyframes y-live-ring { 50% { box-shadow:0 0 0 4px #ef5a4c10; } }
@media(max-width:1023px) {
 html.yosh-pacome-responsive body.y-app #mapcon :is(#y-map-dock,.y-map-sheet) { bottom:calc(var(--y-bottom-nav,76px) + 16px); }
 html.yosh-pacome-responsive body.y-app #mapcon #map-public-controls #map-public-status { top:140px; right:16px; }
}
@media(min-width:1024px) {
 html.yosh-pacome-responsive body.y-app #mapcon #y-map-dock { bottom:16px; max-width:620px; margin:auto; }
 html.yosh-pacome-responsive body.y-app #mapcon #map-public-controls #map-public-status { top:16px; left:72px; right:76px; }
 html.yosh-pacome-responsive body.y-app #mapcon .map-venue-strip { top:88px; left:72px; right:76px; }
 html.yosh-pacome-responsive body.y-app #mapcon .y-map-sheet { bottom:16px; max-width:480px; margin:auto; }
}

/* Every geographic marker shares one zoom scale and a stable 44px touch target.
   Leave the root transform to Mapbox: it positions markers during camera moves. */
html.yosh-pacome-responsive body.y-app #mapcon .y-map-point {
 display:grid; place-items:center; position:absolute; width:44px; height:44px;
 min-width:44px; min-height:44px; padding:0; margin:0; border:0; border-radius:50%;
 background:none; cursor:pointer; box-sizing:border-box;
}
html.yosh-pacome-responsive body.y-app #mapcon .y-map-point :is(img,.map-event-marker-logo) {
 width:var(--y-map-icon,24px); height:var(--y-map-icon,24px); min-width:0; margin:0;
 box-sizing:border-box; border:1.5px solid var(--y-fg); border-radius:50%; object-fit:cover;
 background-size:cover; background-position:center; box-shadow:0 2px 6px #0006;
}
html.yosh-pacome-responsive body.y-app #mapcon .y-map-friend-marker img { border-color:var(--y-yellow); }
html.yosh-pacome-responsive body.y-app #mapcon .y-map-point :is(small,.map-event-marker-label) {
 position:absolute; left:50%; top:50px; transform:translateX(-50%); width:max-content;
 max-width:150px; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
 padding:4px 7px; font:700 11px/1.4 var(--y-body); border:1px solid var(--y-line);
 border-radius:5px; background:var(--y-bg); color:var(--y-fg); visibility:hidden;
 pointer-events:none; box-shadow:0 2px 6px #0004;
}
html.yosh-pacome-responsive body.y-app #mapcon .y-map-point:is(.y-map-label-visible,:hover,:focus-visible,.y-map-selected,.y-map-hovered) :is(small,.map-event-marker-label) { visibility:visible; }
html.yosh-pacome-responsive body.y-app #mapcon .y-map-point:is(:hover,:focus-visible,.y-map-selected,.y-map-hovered) { z-index:40; }
html.yosh-pacome-responsive body.y-app #mapcon .y-map-point.y-map-clustered { display:none!important; }
html.yosh-pacome-responsive body.y-app #mapcon .y-map-point[hidden] { display:none!important; }
html.yosh-pacome-responsive body.y-app #mapcon .y-map-tour-number {
 top:0; right:0; width:18px; height:18px; border-width:1px; font-size:10px; z-index:2;
}
html.yosh-pacome-responsive body.y-app #mapcon .y-map-point.y-map-ambience-marker:before {
 top:22px; left:22px; width:calc(var(--y-map-icon,24px) * 2.4); height:calc(var(--y-map-icon,24px) * 2.4);
}
html.yosh-pacome-responsive body.y-app #mapcon .y-map-point.y-map-ambience-marker[data-band=medium]:before { width:calc(var(--y-map-icon,24px) * 3); height:calc(var(--y-map-icon,24px) * 3); }
html.yosh-pacome-responsive body.y-app #mapcon .y-map-point.y-map-ambience-marker[data-band=high]:before { width:calc(var(--y-map-icon,24px) * 3.6); height:calc(var(--y-map-icon,24px) * 3.6); }
html.yosh-pacome-responsive body.y-app #mapcon .y-map-ambience-marker > span { display:none; }
html.yosh-pacome-responsive body.y-app #mapcon .y-map-bac-marker.is-playing img { border-color:var(--y-yellow); box-shadow:0 0 0 3px #f6c32850; }
html.yosh-pacome-responsive body.y-app #mapcon .y-map-location {
 width:var(--y-map-icon,24px); height:var(--y-map-icon,24px); box-sizing:border-box;
 border:3px solid #fff; border-radius:50%; background:#6373e6;
 box-shadow:0 0 0 5px #6373e633,0 2px 6px #0006; pointer-events:none; z-index:2;
}
html.yosh-pacome-responsive body.y-app #mapcon .y-map-cluster {
 display:grid; place-items:center; width:44px; height:44px; min-width:44px; padding:0;
 box-sizing:border-box; border:3px solid var(--y-bg); border-radius:50%; cursor:pointer;
 background:var(--y-yellow); color:var(--y-ink); font:700 15px/1 var(--y-mono);
 box-shadow:0 0 0 2px #f6c32866,0 3px 12px #0005; z-index:20;
}
html.yosh-pacome-responsive body.y-app #mapcon .y-map-cluster[data-kind=friend] { background:#6373e6; color:#fff; box-shadow:0 0 0 2px #6373e666,0 3px 12px #0005; }
html.yosh-pacome-responsive body.y-app #mapcon .y-map-cluster.is-selected { border-color:var(--y-fg); }
html.yosh-pacome-responsive body.y-app #mapcon :is(.y-map-point,.y-map-cluster):focus-visible { outline:3px solid var(--y-yellow); outline-offset:3px; }
html.yosh-pacome-responsive body.y-app #mapcon .y-map-cluster-sheet {
 position:absolute; z-index:60; left:12px; right:12px; bottom:calc(var(--y-bottom-nav,76px) + 16px);
 max-width:380px; max-height:45dvh; margin:auto; padding:16px; overflow:auto; pointer-events:auto;
 border:1px solid var(--y-line); border-top:3px solid var(--y-yellow); border-radius:12px;
 background:var(--y-bg); color:var(--y-fg); box-shadow:0 8px 32px #0006;
}
.y-map-cluster-sheet header { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.y-map-cluster-sheet h2 { margin:0; font:400 22px/1.2 var(--y-display); }
.y-map-cluster-sheet header button { flex:none; width:44px; height:44px; border:0; background:none; color:var(--y-fg); font-size:26px; cursor:pointer; }
.y-map-cluster-choice { display:flex; align-items:center; gap:12px; width:100%; min-height:52px; padding:8px; margin-top:8px; border:1px solid var(--y-line); border-radius:8px; background:var(--y-card); color:var(--y-fg); text-align:left; cursor:pointer; font:700 13px/1.4 var(--y-body); }
.y-map-cluster-choice :is(img,div) { flex:none; width:28px; height:28px; border-radius:50%; object-fit:cover; background-size:cover; }
#y-map-friend-stories button img { width:32px; height:32px; }
@media(min-width:1024px) { html.yosh-pacome-responsive body.y-app #mapcon .y-map-cluster-sheet { bottom:16px; } }
/* Keep the map visible: compact controls and no persistent status banner. */
html.yosh-pacome-responsive body.y-app #mapcon #map-public-controls #map-public-status,
html.yosh-pacome-responsive body.y-app #mapcon #map-public-controls #map-public-status.is-visible:not(:empty) { display:none!important; }
html.yosh-pacome-responsive body.y-app #mapcon #y-map-dock { padding:5px 8px; }
#y-map-dock .y-map-modes { align-items:flex-start; gap:4px; padding:0; }
#y-map-dock [data-y-map-mode] { box-sizing:border-box; height:28px; min-height:28px; margin-bottom:6px; padding:3px 8px; font-size:11px; line-height:14px; }
html.yosh-pacome-responsive body.y-app #mapcon #y-map-dock .map-state-control { padding-top:4px; }

/* The date calendar is always open; keep its thumb centered on a single track. */
html.yosh-pacome-responsive body.y-app #mapcon #map-public-controls #y-map-dock .map-state-control {
 display:flex; flex-direction:column; gap:2px; align-items:stretch; padding:4px 0 0;
}
html.yosh-pacome-responsive body.y-app #mapcon #map-public-controls #y-map-dock #map-max-time {
 display:flex; justify-content:center; align-items:center; gap:9px; width:100%;
 text-align:center; margin:0; padding:0; color:var(--y-yellow); font:700 13.2px/1.2 var(--y-mono);
}
html.yosh-pacome-responsive body.y-app #mapcon #map-public-controls #y-map-dock #map-sld-time {
 appearance:none; -webkit-appearance:none; display:block; order:2; width:100%; min-width:0;
 height:26px; padding:0; margin:0; border:0; border-radius:0; background:transparent; cursor:pointer;
}
html.yosh-pacome-responsive body.y-app #mapcon #map-public-controls #y-map-dock #map-sld-time::-webkit-slider-runnable-track {
 height:5px; border:0; border-radius:4px; background:var(--y-line);
}
html.yosh-pacome-responsive body.y-app #mapcon #map-public-controls #y-map-dock #map-sld-time::-webkit-slider-thumb {
 appearance:none; -webkit-appearance:none; position:static; width:16px; height:16px;
 border:0; border-radius:50%; background:var(--y-yellow); margin-top:-5.5px;
}
html.yosh-pacome-responsive body.y-app #mapcon #map-public-controls #y-map-dock #map-sld-time::-moz-range-track {
 height:5px; border:0; border-radius:4px; background:var(--y-line);
}
html.yosh-pacome-responsive body.y-app #mapcon #map-public-controls #y-map-dock #map-sld-time::-moz-range-thumb {
 width:16px; height:16px; border:0; border-radius:50%; background:var(--y-yellow);
}
#y-map-dock .y-map-date-buttons { order:3; display:flex; justify-content:center; gap:6px; }
html.yosh-pacome-responsive body.y-app #mapcon #map-public-controls #y-map-dock .map-state-btn {
 display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:auto; min-width:0;
 height:24px; min-height:24px; margin:0; padding:1px 10px; font:700 11px/14px var(--y-body);
}