/* The map's record-sleeve identity. Layout and behavior live in home.css. */
body.hppn-home-map-page {
    --shadow: 0 3px 12px #202c2912;
    --shadow-hover: 0 5px 18px #202c2920;
    background: var(--bg);
}

body.hppn-home-map-page .hppn-map-frame,
body.hppn-home-map-page .hppn-map-canvas { background: var(--bg); }

body.hppn-home-map-page .hppn-map-controls { top: 18px; left: 24px; right: 24px; }
body.hppn-home-map-page .hppn-map-filter-row { gap: 8px; }
body.hppn-home-map-page .hppn-map-filter-pill,
body.hppn-home-map-page .hppn-map-select-wrap select,
body.hppn-home-map-page .hppn-map-concert-switch,
body.hppn-home-map-page .hppn-map-chip,
body.hppn-home-map-page .hppn-map-corner-btn {
    min-height: 42px;
    border: 2px solid var(--ink);
    background: var(--paper);
    font-weight: 700;
    font-size: 12px;
    text-transform: none;
    box-shadow: 2px 2px 0 var(--ink);
}
body.hppn-home-map-page .hppn-map-filter-pill.is-active {
    background: var(--peach);
    border-color: var(--ink);
    color: var(--ink);
}
body.hppn-home-map-page .hppn-map-mode-toggle {
    gap: 2px;
    padding: 4px;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--paper);
    box-shadow: 2px 2px 0 var(--ink);
}
body.hppn-home-map-page .hppn-map-mode-toggle .hppn-map-chip {
    min-height: 32px;
    border: 0;
    box-shadow: none;
    background: transparent;
}
body.hppn-home-map-page .hppn-map-mode-toggle .hppn-map-chip.is-active {
    color: var(--ink);
    background: var(--peach);
}
body.hppn-home-map-page .hppn-map-calendar-popover {
    border: 1px solid #202c2930;
    box-shadow: 0 12px 36px #202c2924;
}
body.hppn-home-map-page .hppn-map-corner-controls { right: 24px; bottom: 28px; gap: 12px; }
body.hppn-home-map-page .hppn-map-zoom-stack { border-width: 1px; box-shadow: 0 3px 12px #202c2912; }
body.hppn-home-map-page .hppn-map-corner-btn { box-shadow: none; }

/* Artwork emerges as the numbered clusters separate into individual venues. */
body.hppn-home-map-page .hppn-venue-marker:not(.is-concert-pin) { width: 50px; height: 50px; }
body.hppn-home-map-page .hppn-venue-marker:not(.is-concert-pin) .hppn-marker-visual {
    border: 2px solid var(--ink);
    background: var(--paper);
    box-shadow: 0 0 0 2px #f47b472b, 0 3px 8px #202c2933;
}
body.hppn-home-map-page .hppn-venue-marker:not(.is-concert-pin) .hppn-marker-art {
    inset: 2px;
    background: var(--ink);
    color: var(--paper);
    overflow: hidden;
    filter: none;
    opacity: 1;
}
.hppn-marker-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hppn-marker-initial {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1px solid #fffcf34d;
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--ink), 0 0 0 4px #fffcf333;
    font: 700 18px/1 var(--font-serif);
}
body.hppn-home-map-page .hppn-venue-marker:not(.is-concert-pin):is(.is-selected, .is-playing) .hppn-marker-visual {
    transform: scale(1.12);
    box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--accent), 0 0 0 6px var(--ink), 0 5px 12px #202c292b;
}
body.hppn-home-map-page .hppn-venue-marker.is-dimmed { opacity: 0.88; }
body.hppn-home-map-page .hppn-venue-marker.is-playing:not(.is-concert-pin)::after {
    bottom: calc(100% + 20px);
    transform: translateX(calc(-50% + var(--hppn-badge-offset, 0px)));
    padding: 4px 8px;
    font: 800 10px/1 var(--font-serif);
    letter-spacing: 0.04em;
    box-shadow: none;
    pointer-events: none;
}
body.hppn-home-map-page .hppn-venue-marker.is-playing.badge-below::after { top: calc(100% + 20px); bottom: auto; }
body.hppn-home-map-page .hppn-venue-marker.is-playing:not(.is-concert-pin) .hppn-marker-pulse {
    display: block;
    inset: -14px;
    border: 2px solid var(--accent);
    animation: scene-playing 1800ms ease-out infinite;
    z-index: -1;
}
@keyframes scene-playing {
    from { transform: scale(1); opacity: 0.32; }
    to { transform: scale(1.25); opacity: 0; }
}
@media (hover: hover) and (pointer: fine) {
    body.hppn-home-map-page .hppn-venue-marker:not(.is-concert-pin):not(.is-selected):not(.is-playing):hover .hppn-marker-visual { transform: scale(1.06); }
}
body.hppn-home-map-page .hppn-venue-marker:not(.is-concert-pin):focus-visible .hppn-marker-visual { transform: scale(1.12); }

.hppn-scene {
    position: absolute;
    z-index: 8;
    left: 24px;
    bottom: 36px;
    width: 310px;
    padding: 20px;
    overflow: hidden;
    border: 1px solid #fffcf330;
    border-radius: 3px 22px 22px 22px;
    color: var(--paper);
    background: var(--ink);
    box-shadow: 0 8px 28px #202c2918;
    animation: scene-arrive 400ms ease-out both;
}
.hppn-scene[hidden],
.home-map-section.is-list-mode .hppn-scene,
.home-map-section:has(.hppn-map-card) .hppn-scene { display: none; }
.hppn-scene-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 700 9px/1.4 var(--font-sans);
    letter-spacing: 0.16em;
    color: #dfe0d0;
}
.hppn-scene-eyebrow > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px #f47b4720;
}
.hppn-scene h2 {
    margin: 18px 0 13px;
    font: 700 36px/1.04 var(--font-serif);
    letter-spacing: -0.055em;
}
.hppn-scene h2 br { display: none; }
.hppn-scene p { font-size: 12px; line-height: 1.5; color: #ced0c2; }
.hppn-scene-scopes { display: flex; gap: 4px; margin-top: 17px; padding: 3px; border: 1px solid #fffcf330; border-radius: 999px; background: #fffcf308; }
.hppn-scene-scopes button {
    flex: 1;
    min-height: 36px;
    padding: 5px 7px;
    border: 0;
    border-radius: 999px;
    color: var(--paper);
    background: transparent;
    font: 700 11px var(--font-sans);
    cursor: pointer;
}
.hppn-scene-scopes button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.hppn-scene-scopes button:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.hppn-scene-error { display: block; margin-top: 10px; font-size: 11px; line-height: 1.4; color: var(--peach); }
.hppn-scene-error[hidden] { display: none; }
.hppn-scene-shuffle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 50px;
    margin-top: 10px;
    padding: 0 15px;
    border: 0;
    box-shadow: none;
    border-radius: 11px;
    color: var(--ink);
    background: var(--accent);
    font: 700 14px var(--font-sans);
    cursor: pointer;
    transition: background 150ms, transform 150ms, box-shadow 150ms;
}
.hppn-scene-shuffle svg { width: 19px; height: 19px; }
.hppn-scene-shuffle > span:last-child { margin-left: auto; font-size: 21px; font-weight: 400; }
.hppn-scene-shuffle:hover:not(:disabled) { background: var(--accent-light); }
.hppn-scene-shuffle:active:not(:disabled) { transform: translateY(1px); }
.hppn-scene-shuffle:disabled { opacity: 0.6; cursor: default; transform: none; }
.hppn-scene-footnote { display: block; margin-top: 12px; font-size: 9px; color: #ced0c2; }
.hppn-scene-shuffle:focus-visible { outline: 3px solid var(--paper); outline-offset: 4px; }
.hppn-scene-return { margin-top: 12px; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--paper); font: 700 12px var(--font-sans); cursor: pointer; }
.hppn-scene-return:focus-visible { outline: 3px solid var(--paper); outline-offset: 4px; }

/* The navigation's peach, paper, and ink button treatment carries into shows. */
body.hppn-home-map-page .hppn-map-card {
    border: 2px solid var(--ink);
    border-radius: 20px;
    background: var(--paper);
    box-shadow: 4px 4px 0 var(--ink);
    background-image: url('/static/paper-grain.svg');
}
body.hppn-home-map-page .hppn-map-card-title { font: 700 27px/1.12 var(--font-serif); letter-spacing: -0.04em; }
body.hppn-home-map-page .hppn-map-card-kicker { font-size: 12px; line-height: 1.5; }
body.hppn-home-map-page .hppn-map-card-meta { font-size: 11px; letter-spacing: 0.02em; }
body.hppn-home-map-page .hppn-map-card-icon-btn,
body.hppn-home-map-page .hppn-map-card-transport,
body.hppn-home-map-page .hppn-map-card-close,
body.hppn-home-map-page .hppn-map-primary-btn,
body.hppn-home-map-page .hppn-map-list-play,
body.hppn-home-map-page .hppn-map-list-ticket,
body.hppn-home-map-page .hppn-world-pick-actions button {
    border: 2px solid var(--ink);
    color: var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
body.hppn-home-map-page .hppn-map-card-toolbar { gap: 10px; margin-top: 8px; }
body.hppn-home-map-page .hppn-map-card-icon-btn { background: var(--paper); }
body.hppn-home-map-page .hppn-map-card-icon-btn.is-saved { background: var(--peach); }
body.hppn-home-map-page .hppn-map-card-close { border-radius: 50%; background: var(--paper); }
body.hppn-home-map-page .hppn-map-card.has-performance .hppn-map-card-close { background: var(--paper); }
body.hppn-home-map-page .hppn-map-card-player { gap: 12px; padding-top: 10px; padding-bottom: 4px; }
body.hppn-home-map-page .hppn-map-card-transport { background: var(--paper); }
body.hppn-home-map-page .hppn-map-card-transport.is-main { background: var(--peach); color: var(--ink); }
body.hppn-home-map-page .hppn-map-card-transport.is-main.is-loading { background: var(--ink); color: var(--paper); }
body.hppn-home-map-page .hppn-map-primary-actions { gap: 12px; margin-top: 9px; padding-bottom: 3px; }
body.hppn-home-map-page .hppn-map-primary-btn {
    min-height: 46px;
    padding: 0 12px;
    font: 700 13px/1 var(--font-sans);
    letter-spacing: 0;
    text-transform: none;
}
body.hppn-home-map-page .hppn-map-primary-btn.is-ticket,
body.hppn-home-map-page .hppn-map-list-play { background: var(--peach); }
body.hppn-home-map-page .hppn-map-primary-btn.is-spotify { background: var(--paper); }
body.hppn-home-map-page .hppn-map-list-panel { background: #eee8da; }
body.hppn-home-map-page .hppn-map-list-item { border: 1px solid #202c2929; border-radius: 14px; background: var(--paper); box-shadow: none; }
body.hppn-home-map-page .hppn-map-list-artist { font-family: var(--font-serif); }
body.hppn-home-map-page .hppn-map-state { background: var(--paper); border: 1px solid #202c2929; box-shadow: 0 8px 28px #202c2918; }
body.hppn-home-map-page .hppn-map-state-title { font-family: var(--font-serif); }
body.hppn-home-map-page .hppn-map-library-heading strong { font-family: var(--font-serif); }
.hppn-world-pick-label { margin: 3px 40px 10px 2px; font: 700 9px/1.4 var(--font-sans); letter-spacing: 0.07em; }
.hppn-world-pick-label span { display: block; font-size: 13px; letter-spacing: 0; color: #865038; }
.hppn-world-pick-actions { display: flex; gap: 8px; margin-top: 12px; border-top: 1px dashed #202c2960; padding-top: 8px; }
.hppn-world-pick-actions button { flex: 1; min-height: 44px; border-radius: 999px; background: var(--paper); font: 700 11px var(--font-sans); cursor: pointer; }
.hppn-world-pick-actions button:last-child { background: var(--peach); }
.hppn-world-pick-actions button:disabled { opacity: 0.5; cursor: default; }
.hppn-world-pick-actions button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

@media (hover: hover) and (pointer: fine) {
    body.hppn-home-map-page :is(.hppn-map-card-icon-btn, .hppn-map-card-transport, .hppn-map-card-close, .hppn-map-primary-btn, .hppn-map-list-play, .hppn-map-list-ticket, .hppn-world-pick-actions button):hover:not(:disabled):not([aria-disabled="true"]) {
        transform: translate(-1px, -1px);
        box-shadow: 3px 3px 0 var(--ink);
    }
}
body.hppn-home-map-page :is(.hppn-map-card-icon-btn, .hppn-map-card-transport, .hppn-map-card-close, .hppn-map-primary-btn, .hppn-map-list-play, .hppn-map-list-ticket, .hppn-world-pick-actions button):active:not(:disabled):not([aria-disabled="true"]) {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 var(--ink);
}
body.hppn-home-map-page :is(.hppn-map-card-icon-btn, .hppn-map-card-transport, .hppn-map-card-close, .hppn-map-primary-btn, .hppn-map-list-play, .hppn-map-list-ticket):focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 5px;
}
body.hppn-home-map-page :is(.hppn-map-card-transport, .hppn-map-primary-btn, .hppn-world-pick-actions button):disabled,
body.hppn-home-map-page .hppn-map-primary-btn[aria-disabled="true"] { box-shadow: none; }

@keyframes scene-arrive {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 768px) {
    body.hppn-home-map-page .hppn-venue-marker:not(.is-concert-pin) { width: 52px; height: 52px; }
    body.hppn-home-map-page .hppn-venue-marker.is-playing:not(.is-concert-pin) .hppn-marker-pulse { inset: -16px; }
    body.hppn-home-map-page .hppn-map-card-slot,
    body.hppn-home-map-page .hppn-map-card-slot.has-performance { width: min(480px, calc(100% - 32px)); }
    body.hppn-home-map-page .hppn-map-card {
        display: flex;
        flex-direction: column;
        max-height: calc(100dvh - 168px);
        padding: 12px;
    }
    body.hppn-home-map-page .hppn-map-card-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
    body.hppn-home-map-page .hppn-map-card-footer { flex-shrink: 0; }
    body.hppn-home-map-page .hppn-map-event-media { margin-bottom: 12px; }
    body.hppn-home-map-page .hppn-map-card.has-performance .hppn-map-event-media { width: 100%; max-height: 214px; margin-bottom: 12px; }
    body.hppn-home-map-page .hppn-map-card-main { grid-template-columns: 108px minmax(0, 1fr); gap: 14px; min-height: 108px; padding-right: 0; }
    body.hppn-home-map-page .hppn-map-card.no-performance .hppn-map-card-main { padding-right: 36px; }
    body.hppn-home-map-page :is(.hppn-map-card-art-wrap, .hppn-map-card-art-link, .hppn-map-card-art) { width: 108px; height: 108px; }
    body.hppn-home-map-page .hppn-map-card-copy { gap: 4px; }
    body.hppn-home-map-page .hppn-map-card-title { margin: 0 0 4px; font-size: 30px; line-height: 1.12; }
    body.hppn-home-map-page .hppn-map-card-meta { font-size: 12.5px; line-height: 1.45; }
    body.hppn-home-map-page .hppn-map-card-kicker { font-size: 13px; overflow-wrap: anywhere; }
    body.hppn-home-map-page .hppn-map-card-copy :is(.event-time, .event-price) { font-size: 13px; }
    body.hppn-home-map-page .hppn-map-card-controls { margin-top: 12px; padding-top: 12px; padding-bottom: 4px; }
    body.hppn-home-map-page .hppn-map-card-icon-btn { width: 34px; height: 34px; flex-basis: 34px; }
    body.hppn-home-map-page .hppn-map-card-icon-btn svg { width: 16px; height: 16px; }
    body.hppn-home-map-page .hppn-map-card-player { grid-template-columns: repeat(3, 44px); }
    body.hppn-home-map-page .hppn-map-card-transport { width: 44px; height: 44px; }
    body.hppn-home-map-page .hppn-map-card-transport svg { width: 21px; height: 21px; }
    body.hppn-home-map-page .hppn-map-primary-actions { margin-top: 12px; }
    body.hppn-home-map-page .hppn-map-primary-btn { min-height: 50px; font-size: 14px; }
    body.hppn-home-map-page .hppn-map-card-close { width: 32px; height: 32px; top: 10px; right: 10px; }
    body.hppn-home-map-page .hppn-map-card.has-performance .hppn-map-card-close { top: 18px; right: 18px; }
    body.hppn-home-map-page .hppn-map-list-panel { padding-top: 80px; }
    body.hppn-saved-library-page .hppn-map-list-panel { padding-top: 0; }
}

@media (min-width: 768px) and (max-height: 680px) {
    body.hppn-home-map-page .hppn-map-card.has-performance .hppn-map-event-media {
        height: clamp(100px, calc(100dvh - 480px), 160px);
        aspect-ratio: auto;
    }
}

@media (max-width: 767px) {
    body.hppn-home-map-page .hppn-map-controls { top: 0; left: 0; right: 0; }
    body.hppn-home-map-page .site-header .city-dropdown-btn {
        color: var(--ink);
        background: var(--paper);
        border: 2px solid var(--ink);
        box-shadow: 2px 2px 0 var(--ink);
    }
    body.hppn-home-map-page .site-header .city-name { font-size: 12px; }
    body.hppn-home-map-page .hppn-map-mode-toggle {
        border: 2px solid var(--ink);
        background: var(--paper);
        box-shadow: 2px 2px 0 var(--ink);
    }
    body.hppn-home-map-page .hppn-map-mode-toggle .hppn-map-chip { font-size: 12px; }
    body.hppn-home-map-page .hppn-map-mode-toggle .hppn-map-chip.is-active { color: var(--ink); background: var(--peach); }
    body.hppn-home-map-page .hppn-mobile-filters-toggle { border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
    body.hppn-home-map-page .hppn-mobile-filters { border: 1px solid #202c292e; box-shadow: 0 -8px 40px #202c2920; }
    body.hppn-home-map-page .hppn-mobile-filters-header h2 { font-family: var(--font-serif); letter-spacing: -0.03em; }
    body.hppn-home-map-page .hppn-mobile-filters-done { border: 0; color: var(--paper); background: var(--ink); box-shadow: none; }
    .hppn-scene {
        left: 12px;
        bottom: calc(var(--safe-bottom, 0px) + 32px);
        width: min(275px, calc(100% - 84px));
        padding: 17px;
        border-radius: 3px 18px 18px 18px;
    }
    .hppn-scene-eyebrow { font-size: 8px; letter-spacing: 0.13em; }
    .hppn-scene-scopes { margin-top: 12px; }
    .hppn-scene-scopes button { min-height: 36px; font-size: 10px; }
    .hppn-scene h2 { margin: 11px 0 9px; font-size: 28px; }
    .hppn-scene p { font-size: 11px; }
    .hppn-scene-shuffle { margin-top: 13px; min-height: 44px; font-size: 12px; }
    .hppn-scene-footnote { display: block; font-size: 9px; }
    body.hppn-home-map-page .hppn-map-corner-controls { right: 12px; bottom: calc(var(--safe-bottom, 0px) + 32px); }
    body.hppn-home-map-page .hppn-map-card-title { font-size: 24px; }
    body.hppn-home-map-page .hppn-map-card-icon-btn { width: 44px; height: 44px; flex-basis: 44px; }
    body.hppn-home-map-page .hppn-map-card-icon-btn svg { width: 17px; height: 17px; }
    body.hppn-home-map-page .hppn-map-list-panel { background: var(--bg); }
}

@media (max-height: 560px) {
    .hppn-scene { padding: 14px 18px; }
    .hppn-scene h2, .hppn-scene-footnote { display: none; }
    .hppn-scene p { margin-top: 8px; }
    .hppn-scene-shuffle { margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .hppn-scene { animation: none; }
    body.hppn-home-map-page .hppn-venue-marker.is-playing:not(.is-concert-pin) .hppn-marker-pulse { display: none; animation: none; }
    body.hppn-home-map-page .hppn-marker-visual { transition: none; }
    body.hppn-home-map-page :is(.hppn-map-card-icon-btn, .hppn-map-card-transport, .hppn-map-card-close, .hppn-map-primary-btn, .hppn-map-list-play, .hppn-map-list-ticket, .hppn-world-pick-actions button, .hppn-scene-shuffle) { transition: none; }
}