/* Copied from utopia-post-map 0.5.0 (World Art Utopia) — keep in sync: copy the file again rather than editing it here. SAU-only rules are at the end of post-map.css. */
/* Utopia Post Map. Colours follow the theme's light/dark switch (html[data-sau-theme]). */
.upm{--upm-ink:#1B1A3A;--upm-muted:#5E5C7A;--upm-card:#fff;--upm-paper:#F2F2F6;--upm-rule:#E1E1EA;--upm-pink:#FF48B0;--upm-blue:#005A94;margin:2.2em 0 1.8em;clear:both}
html[data-sau-theme="dark"] .upm{--upm-ink:#F2F3F4;--upm-muted:#B7BBC0;--upm-card:#1A1D20;--upm-paper:#23272B;--upm-rule:#3C4248;--upm-blue:#8FB4FF}
.upm *,.upm *::before,.upm *::after{box-sizing:border-box}
.upm .upm-h{margin:0 0 .25em}
.upm .upm-sub{margin:0 0 .9em;color:var(--upm-muted);font-size:.95em}
.upm-stage{position:relative;height:420px;border-radius:16px;overflow:hidden;background:var(--upm-paper)}
@media (max-width:640px){.upm-stage{height:360px;margin-inline:calc(50% - 50vw);border-radius:0}} /* Full width, like the photos. */
.upm-stage > .upm-map{position:absolute!important;inset:0;width:auto;height:auto}
.upm.is-nomap .upm-stage{display:none}
.upm-list{list-style:none;margin:.9em 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.upm-list li{margin:0;padding:0}
.upm-list li::before{content:none}
.upm a,.upm-jump a,.upm-back a{text-decoration:none!important;background-image:none!important;box-shadow:none!important}
.upm-list a{display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 5px;border:1px solid var(--upm-rule);border-radius:999px;font-size:.82em;line-height:1.2;text-decoration:none;color:var(--upm-ink)!important;background:var(--upm-card)}
.upm-list a:hover{border-color:var(--upm-ink)}
.upm-list b{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;border-radius:10px;background:var(--upm-ink);color:var(--upm-card);font-size:.8em}
.upm-jump{margin:.2em 0 1.2em;font-size:.92em}
.upm-jump a,.upm-back a{text-decoration:none;font-weight:700;color:#005A94}
html[data-sau-theme="dark"] .upm-jump a,html[data-sau-theme="dark"] .upm-back a{color:#8FB4FF}
p.upm-back{margin:-.35em 0 .8em;font-size:.82em;line-height:1.3}
.upm-back a{font-weight:600}

/* numbered photo pins */
.upm-mk{position:relative;display:block;width:46px;height:46px;padding:0;margin:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.upm-mk-ph{display:block;width:46px;height:46px;border-radius:10px;background:#C9CAD3 center/cover no-repeat;border:2.5px solid #fff;box-shadow:2px 2px 0 rgba(255,72,176,.85),0 2px 8px rgba(0,0,0,.28);transition:transform .15s}
.upm-mk.is-cluster .upm-mk-ph{box-shadow:2px 2px 0 rgba(255,72,176,.85),5px 5px 0 rgba(0,120,191,.55),0 2px 8px rgba(0,0,0,.28)}
.upm-mk.is-cluster .upm-mk-n{background:#FF48B0}
.upm-mk-n{position:absolute;top:-9px;left:-9px;min-width:22px;height:22px;padding:0 5px;border-radius:11px;background:#1B1A3A;color:#fff;font:800 11px/22px system-ui,sans-serif;text-align:center;box-shadow:0 0 0 2px #fff;white-space:nowrap}
.upm-mk:hover .upm-mk-ph,.upm-mk:focus-visible .upm-mk-ph,.upm-mk.is-on .upm-mk-ph{transform:scale(1.14)}
.upm-mk.is-on .upm-mk-ph{border-color:#FF48B0}
.upm-mk:focus-visible{outline:3px solid #FF48B0;outline-offset:4px;border-radius:12px}
html[data-sau-theme="dark"] .upm-mk-ph{border-color:#23272B}
html[data-sau-theme="dark"] .upm-mk-n{background:#F2F3F4;color:#111315;box-shadow:0 0 0 2px #23272B}

/* the card */
.upm-card{position:absolute;left:10px;right:10px;bottom:10px;z-index:4;display:flex;gap:12px;align-items:stretch;background:var(--upm-card);color:var(--upm-ink);border-radius:14px;padding:10px;box-shadow:0 10px 30px rgba(27,26,58,.3);max-height:calc(100% - 20px);overflow:hidden}
.upm-card[hidden]{display:none}
.upm-card:focus{outline:none}
@media (min-width:641px){.upm-card{left:auto;right:14px;bottom:30px;width:380px}}
.upm-card-img{position:relative;flex:0 0 108px;min-height:108px;border-radius:10px;overflow:hidden;background:var(--upm-paper);display:block}
.upm-card-ph{position:absolute;inset:0;background:center/cover no-repeat}
.upm-card-img b{position:absolute;left:6px;top:6px;min-width:22px;height:22px;padding:0 5px;border-radius:11px;background:#1B1A3A;color:#fff;font:800 11px/22px system-ui,sans-serif;text-align:center}
.upm-card-b{min-width:0;flex:1;padding-right:24px;overflow-y:auto;overscroll-behavior:contain}
.upm .upm-card-t{margin:2px 0 3px;font-weight:800;font-size:1rem;line-height:1.25}
.upm .upm-card-s{margin:0 0 8px;font-size:.82rem;color:var(--upm-muted);line-height:1.35}
.upm-card-s span{opacity:.75}
.upm .upm-card-go{margin:0;display:flex;flex-wrap:wrap;gap:6px}
.upm-btn{display:inline-block;background:var(--upm-ink);color:var(--upm-card)!important;text-decoration:none!important;font-weight:700;font-size:.8rem;padding:7px 12px;border-radius:999px;line-height:1.2}
.upm-btn.is-light{background:transparent;color:var(--upm-ink)!important;border:1.5px solid var(--upm-ink);padding:5.5px 11px}
.upm-x{position:absolute;right:4px;top:4px;width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--upm-muted);font-size:22px;line-height:1;cursor:pointer;padding:0}
.upm-x:hover{background:var(--upm-paper);color:var(--upm-ink)}
.upm .maplibregl-ctrl-group{border-radius:10px}
.upm .maplibregl-ctrl-group button{width:34px;height:34px}
.upm .maplibregl-ctrl-attrib{font-size:10px}

.upm-anchor{display:block;height:0;scroll-margin-top:72px}
.upm.is-nomap .upm-sub{display:none}
html[data-sau-theme="dark"] .upm .maplibregl-ctrl-group{background:#23272B}
html[data-sau-theme="dark"] .upm .maplibregl-ctrl-group button+button{border-top-color:#3C4248}
html[data-sau-theme="dark"] .upm .maplibregl-ctrl-icon{filter:invert(1)}

/* onward: another post here, Street Art Utopia */
.upm-card-on,.upm-stop-on{display:flex;flex-direction:column;gap:4px;margin-top:9px;padding-top:8px;border-top:1px solid var(--upm-rule);font-size:.78rem;line-height:1.3}
.upm-card-on a,.upm-stop-on a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:700;color:#005A94!important}
.upm-card-on a::after,.upm-stop-on a::after,.upm-sau-l a::after{content:none!important} /* The theme's external-link arrow: these carry their own. */
html[data-sau-theme="dark"] .upm-card-on a,html[data-sau-theme="dark"] .upm-stop-on a{color:#8FB4FF!important}
.upm-stop-on{margin-top:6px;padding-top:6px}
@media (max-width:640px){.upm-card-on{margin-top:7px;padding-top:6px;gap:3px}.upm-card-on a{-webkit-line-clamp:1}}
.upm-sau{margin:1.4em 0 0}
.upm .upm-sau-h{margin:0 0 .55em;font-weight:800;font-size:.95em;color:var(--upm-ink)}
.upm-sau-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.upm-sau-l li{margin:0;padding:0}
.upm-sau-l li::before{content:none}
.upm-sau-l a{display:flex;flex-direction:column;height:100%;background:var(--upm-card);border:1.5px solid var(--upm-rule);border-radius:12px;overflow:hidden;color:var(--upm-ink)!important}
.upm-sau-l a:hover,.upm-sau-l a:focus{border-color:var(--upm-ink);background:var(--upm-card)!important}
.upm-sau-ph{display:block;aspect-ratio:4/3;background:var(--upm-paper) center/cover no-repeat}
.upm-sau-c{padding:7px 9px 0;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--upm-muted)}
.upm-sau-t{padding:2px 9px 9px;font-size:.82rem;font-weight:700;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:640px){.upm-sau-l{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Design B: the trip ---------- */
.upm.is-trip .upm-list{display:none}
.upm-bar{display:flex;align-items:center;gap:8px;margin:10px 0 8px;flex-wrap:wrap}
.upm-tb{font:700 .85rem/1 system-ui,sans-serif;border:1.5px solid var(--upm-ink);background:var(--upm-card);color:var(--upm-ink);border-radius:999px;height:36px;min-width:36px;padding:0 12px;cursor:pointer}
.upm-tb[data-go]{padding:0;font-size:1.2rem}
.upm-tb:hover{background:var(--upm-paper)}
.upm-play{margin-left:auto;background:var(--upm-ink);color:var(--upm-card)}
.upm-play:hover{background:var(--upm-ink);opacity:.9}
.upm-tb-n{font-weight:700;font-size:.9rem;color:var(--upm-ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:48%}
.upm-tb-short{display:none}
.upm-tb:disabled{opacity:.35;cursor:default}
@media (max-width:420px){.upm-tb-long{display:none}.upm-tb-short{display:inline}.upm-tb-n{max-width:none;flex:1}.upm-play{min-width:44px}}
.upm-stops{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:4px 0 12px;margin:0;scrollbar-width:thin}
.upm-stops-end{flex:0 0 calc(100% - 242px);min-width:0}
@media (max-width:640px){.upm-stops{margin-inline:calc(50% - 50vw);padding-inline:16px;scroll-padding-left:16px}}
.upm-stop{flex:0 0 232px;scroll-snap-align:start;display:flex;flex-direction:column;background:var(--upm-card);border:1.5px solid var(--upm-rule);border-radius:14px;overflow:hidden;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.upm-stop.is-on{border-color:#FF48B0;box-shadow:3px 3px 0 rgba(255,72,176,.35)}
.upm-stop-ph{position:relative;display:block;height:132px;background:var(--upm-paper) center/cover no-repeat}
.upm-stop-ph b{position:absolute;left:8px;top:8px;min-width:24px;height:24px;padding:0 6px;border-radius:12px;background:#1B1A3A;color:#fff;font:800 12px/24px system-ui,sans-serif;text-align:center}
.upm-stop.is-on .upm-stop-ph b{background:#FF48B0}
.upm-stop-b{display:flex;flex-direction:column;gap:3px;padding:9px 11px 11px;flex:1}
.upm-stop-l{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--upm-muted)}
.upm-stop-t{font-weight:800;font-size:.92rem;line-height:1.25;color:var(--upm-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.upm-stop-d{font-size:.78rem;color:var(--upm-muted)}
.upm-stop-go{margin-top:auto;padding-top:6px;display:flex;gap:12px;font-size:.8rem}
.upm-stop-go a{font-weight:700;color:#005A94!important}
html[data-sau-theme="dark"] .upm-stop-go a{color:#8FB4FF!important}
/* stops on the map */
.upm-dot{position:relative;display:block;width:24px;height:24px;padding:0;border:2px solid #fff;border-radius:50%;background:#1B1A3A;color:#fff;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.35);transition:width .2s,height .2s}
.upm-dot b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:800 11px/1 system-ui,sans-serif}
.upm-dot.is-past{background:#FF48B0}
.upm-dot-ph{display:none}
.upm-dot.is-on{width:58px;height:58px;border-radius:12px;border-width:3px;border-color:#FF48B0;background:#C9CAD3;box-shadow:3px 3px 0 rgba(255,72,176,.5),0 3px 12px rgba(0,0,0,.35)}
.upm-dot.is-on .upm-dot-ph{display:block;position:absolute;inset:0;border-radius:9px;background:center/cover no-repeat}
.upm-dot.is-on b{inset:auto auto -10px -10px;width:22px;height:22px;border-radius:11px;background:#FF48B0;box-shadow:0 0 0 2px #fff}
.upm-dot:focus-visible{outline:3px solid #FF48B0;outline-offset:3px}
html[data-sau-theme="dark"] .upm-dot{border-color:#F2F3F4;background:#5E5C7A}
html[data-sau-theme="dark"] .upm-dot.is-past{background:#FF48B0}
.upm.is-nomap .upm-bar{margin-top:0}

/* ---------- Design C: a small map before the first work ---------- */
/* Hidden by an inline style; the inline chooser right after it shows it for design C before it is painted. */
.upm-top{margin:0 0 1.4em;--upm-ink:#1B1A3A;--upm-muted:#5E5C7A;--upm-paper:#F2F2F6}
html[data-sau-theme="dark"] .upm-top{--upm-ink:#F2F3F4;--upm-muted:#B7BBC0;--upm-paper:#23272B}
.upm-top.is-nomap .upm-top-map{display:none}
.upm-top.is-nomap .upm-top-stage::after{content:"The map could not load here. The list of places is at the end of the post.";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 20px;text-align:center;font-size:.85em;color:var(--upm-muted)}
.upm-top .upm-top-h{margin:0 0 .5em;font-size:.92em;color:var(--upm-muted)}
.upm-top .upm-top-h b{color:var(--upm-ink)}
.upm-top-stage{position:relative;border-radius:14px;overflow:hidden;background:var(--upm-paper)}
@media (max-width:640px){.upm-top-stage{margin-inline:calc(50% - 50vw);border-radius:0}}
.upm-top-stage > .upm-top-map{position:absolute!important;inset:0;width:auto;height:auto}
.upm-top .upm-top-more{margin:.45em 0 0;font-size:.85em}
.upm-top .upm-top-more a{font-weight:700;color:#005A94!important;text-decoration:none!important;background-image:none!important}
html[data-sau-theme="dark"] .upm-top .upm-top-more a{color:#8FB4FF!important}
/* C and D share the box; each shows its own lines (the chooser adds is-c / is-d before paint). */
.upm-top:not(.is-d) .upm-for-d,.upm-top.is-d .upm-for-c{display:none}
.upm-dot.is-small{width:24px;height:24px;border-width:2px;cursor:pointer}
.upm-dot.is-small b{font-size:10px}
.upm-dot.is-small:hover,.upm-dot.is-small:focus-visible{background:#FF48B0;color:#1B1A3A}
.upm-dot.is-small.is-group{width:30px;height:30px;background:#FF48B0;color:#1B1A3A;box-shadow:3px 3px 0 rgba(27,26,58,.35),0 1px 4px rgba(0,0,0,.35)}
.upm-dot.is-small.is-group b{font-size:11px}
.upm-mk.is-small,.upm-mk.is-small .upm-mk-ph{width:36px;height:36px}
.upm-mk.is-small .upm-mk-ph{border-radius:8px;border-width:2px}
.upm-mk.is-small .upm-mk-n{min-width:18px;height:18px;line-height:18px;font-size:10px;top:-7px;left:-7px;padding:0 4px}
.upm-top .maplibregl-ctrl-attrib{font-size:9px}
.upm-top .maplibregl-ctrl-attrib:not([data-upm-folded]) .maplibregl-ctrl-attrib-inner{display:none} /* Credits start folded: no shift when they fold. */

/* ---------- SAU (utopia-city-atlas) only ---------- */
.upm-list a small{opacity:.65;font-weight:500}
.upm-preview{display:inline-block;margin:0 0 .5em;padding:2px 8px;border-radius:6px;background:#FFE800;color:#1B1A3A;font-size:.75rem;font-weight:700}
.upm-list-more{align-self:center;font-size:.8em;color:var(--upm-muted);padding:5px 4px}
