/* =========================================================
   Version 2.5 — 22 September 2026 (one button bar, About/List View in the panel, saved sheet)
   Location panel — bottom sheet on mobile, side card on desktop
   ========================================================= */

#location-panel {
    position: fixed;
    /* below the logo box (z 1000) and the About/List boxes (z 1000 / 900 keep their own) */
    z-index: 950;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;

    /* desktop: sits in the column between the logo box and the About / List buttons.
       92px clears the logo box, 172px leaves room for About/List at the bottom. */
    top: 92px;
    left: 20px;
    width: 360px;
    max-height: calc(100vh - 172px);
}

#location-panel.is-hidden {
    display: none;
}

.panel-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.panel-handle {
    display: none;
}

/* ---------- Sections ---------- */

.panel-section {
    display: flex;
    flex-direction: column;
}

.panel-section + .panel-section {
    border-top: 8px solid var(--gray1);
}

.panel-image {
    height: 160px;
    background: var(--gray1);
    overflow: hidden;
    flex-shrink: 0;
}

.panel-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.panel-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 14px 12px 10px 16px;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
}

.panel-title {
    flex-grow: 1;
    min-width: 0;
}

.panel-header h2 {
    margin: 0 0 4px;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.15;
}

.panel-meta {
    font-size: var(--font-size-small);
    color: var(--gray7);
}

.map-code {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 7px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--gray8);
}

.panel-back {
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--gray7);
    font-family: inherit;
    font-size: var(--font-size-small);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    min-height: 44px;
}

.panel-close {
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--gray7);
    font-family: inherit;
    font-size: var(--font-size-small);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 7px;
    height: 24px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius)
.2em
;
}

.panel-close:hover,
.panel-back:hover {
    color: var(--black);
}

.panel-header-item {
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--gray3);
}

.panel-count {
    font-size: var(--font-size-small);
    color: var(--gray6);
}

/* ---------- Buttons ---------- */

.panel-actions,
.panel-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 16px 14px;
}

.panel-button {
    flex: 1 1 auto;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 12px;
    background: #fff;
    color: var(--black);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-family: inherit;
    font-size: var(--font-size-small);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.panel-button:hover {
    background: var(--gray1);
}

.panel-button.is-primary {
    background: var(--black);
    color: var(--white);
    border-color: var(--black);
}

.panel-button.is-primary:hover {
    background: #000;
}

.panel-button .bookmark-icon-filled {
    display: none;
}

.panel-button.is-saved .bookmark-icon {
    display: none;
}

.panel-button.is-saved .bookmark-icon-filled {
    display: inline;
}

/* Inside .panel-single the padding is already there — don't add it twice,
   or these buttons sit indented from Save / Walking route above them. */
.panel-single .panel-links,
.panel-single .panel-actions {
    padding-left: 0;
    padding-right: 0;
}

/* ddw link + "Broken link?", centered under the buttons */
.panel-footlinks {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 2px 16px;
    padding: 2px 0 0;
    font-size: var(--font-size-small);
}

.panel-footlinks a {
    color: var(--gray7);
    padding: 6px 0;
}

.panel-footlinks a:hover {
    color: var(--black);
}

.panel-report {
    text-decoration: underline;
    /* border-bottom: 1px dotted var(--gray5); */
}

/* ---------- Single exhibition ---------- */

.panel-single {
    padding: 0 16px 18px;
}

.panel-single h3 {
    margin: 0 0 4px;
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.25;
}

.panel-participant {
    margin: 0 0 8px;
    font-size: var(--font-size-small);
    color: var(--gray7);
}

.panel-desc {
    margin: 0 0 12px;
    font-size: var(--font-size-small);
    line-height: 1.5;
}

.panel-tags {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-top: 14px;
}

.panel-tag {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gray6);
}

/* ---------- Exhibition list ---------- */

.panel-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid var(--gray3);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gray7);
}

.panel-link,
.panel-more {
    background: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--font-size-small);
    font-weight: 500;
    color: var(--black);
    text-decoration: underline;
    padding: 8px 0;
}

.panel-more {
    text-align: left;
    padding: 12px 16px 16px;
    color: var(--gray7);
}

.panel-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 16px 8px;
    padding: 0 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.panel-filter input {
    flex-grow: 1;
    min-height: 40px;
    border: 0;
    outline: none;
    font-family: inherit;
    font-size: var(--font-size-small);
    background: none;
}

.panel-items {
    padding: 0 16px 8px;
}

.panel-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 0;
    background: none;
    border: 0;
    border-top: 1px solid var(--gray3);
    text-align: left;
    font-family: inherit;
    cursor: pointer;
}

.panel-items .panel-item:first-child {
    border-top: 0;
}

.panel-item:hover {
    background: var(--gray1);
}

.panel-item.is-hidden {
    display: none;
}

.panel-item img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    background: var(--gray2);
    flex-shrink: 0;
}

.panel-item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.panel-item-title {
    font-size: var(--font-size-small);
    font-weight: 500;
    line-height: 1.25;
}

.panel-item-participant {
    font-size: 12px;
    color: var(--gray7);
}

.panel-empty {
    margin: 0;
    padding: 0 16px 18px;
    font-size: var(--font-size-small);
    color: var(--gray7);
    font-style: italic;
}

/* ---------- Mobile: bottom sheet ---------- */

@media (max-width: 768px) {
    #location-panel {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        max-width: none;
        height: 52vh;
        max-height: 92vh;
        border-radius: var(--border-radius) var(--border-radius) 0 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
        transition: height 0.25s ease;
    }

    #location-panel.is-expanded {
        height: 92vh;
    }

    .panel-handle {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 24px;
        background: none;
        border: 0;
        cursor: pointer;
        flex-shrink: 0;
    }

    .panel-handle span {
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: var(--gray4);
    }

    .panel-image {
        height: 130px;
    }

    .panel-body {
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    /* keep the walking-time bar clear of the sheet */
    #walking-time {
        bottom: auto;
        top: 12em;
    }
}


/* =========================================================
   Pins, sharing and Near me (added 20 September 2026)
   ========================================================= */

/* ---- Pin colours ----
   The pin is an inline SVG filled with currentColor, so one `color`
   declaration recolours it. Saved wins over venue-only. */

.map-pin {
    --pin: #e368f7;              /* the 2025 magenta — something to see */
    --pin-venue: #7c7b80;        /* grey 50 — café, bar, shop, or nothing on show */
    --pin-saved: #02b55f;        /* op green — on my list */
    --pin-shared: #0070ba;       /* op blue — arrived via a shared link */

    color: var(--pin);
    display: block;
    line-height: 0;
    /* the old raster pin needed a nudge; the SVG's point is already the anchor */
    translate: none;
    cursor: pointer;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}

.map-pin.is-venue  { color: var(--pin-venue); }
.map-pin.is-saved  { color: var(--pin-saved); }
.map-pin.is-shared { color: var(--pin-shared); }

/* The centre is the pin's own colour, 20% darker: a black disc at 20%
   opacity laid over currentColor. That is exactly the 2025 pin
   (#e368f7 → #b454c4), and every other state gets its own darker centre
   for free. Also set on the circle in CONFIG.pinSvg, so the pin survives
   without this rule. */
.map-pin svg circle {
    fill: #000;
    fill-opacity: 0.2;
}

.map-pin.is-bouncing {
    animation: pin-bounce 0.7s ease-in-out infinite;
}

@keyframes pin-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}

@media (prefers-reduced-motion: reduce) {
    .map-pin.is-bouncing {
        animation: none;
        filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.7));
    }
}

/* ---- Item-level opening hours ---- */

.panel-hours-note {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border: 1px solid var(--gray4);
    border-radius: var(--border-radius);
    font-size: 11px;
    color: var(--gray7);
    white-space: nowrap;
}

.panel-item-when {
    font-size: 11px;
    color: var(--gray7);
}

/* ---- Share this list ----
   Same footprint as the Advertise block below it, so the two stack evenly. */

#share-bar {
    margin-top: 1em;
}

.share-button,
.advertise-message {
    box-sizing: border-box;
    width: 100%;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1em;
    border: 1px solid var(--border-color);
    border-radius: 0;
    font-size: var(--font-size-small);
    line-height: 1.3;
}

.share-button {
    background: #fff;
    font-family: inherit;
    font-weight: 500;
    color: var(--black);
    cursor: pointer;
}

.share-button:hover {
    background: var(--gray1);
}

/* ---- A shared list someone opened ---- */

#shared-banner {
    margin: 0 0 12px;
    padding: 12px;
    background: var(--gray1);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

#shared-banner p {
    margin: 0 0 10px;
    font-size: var(--font-size-small);
}

#shared-banner div {
    display: flex;
    gap: 8px;
}

/* ---- Search + Near me bar ----
   Both buttons live in #map-tools, so the bar is positioned, not each button. */

#map-tools {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 900;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#map-tools button {
    background: #fff;
    border: 1px var(--border-color) solid;
    border-radius: 4px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
    font-family: inherit;
    color: var(--black);
    cursor: pointer;
}

#map-tools button:hover {
    background: var(--gray1);
}

/* One size for the map buttons. 12px top and bottom around a 20px line
   gives a 44px target, which is the minimum for a thumb. */
#map-tools button {
    margin: 0;
    padding: 12px 14px;
    font-size: var(--font-size-normal);
    font-weight: 400;
    line-height: 20px;
    text-align: left;
}

@media (max-width: 768px) {
    /* top is set by app.js to sit just under the title box; 4em is the fallback */
    #map-tools {
        top: 4em;
        left: 1em;
        right: 1em;
        bottom: auto;
    }
}


/* =========================================================
   Search and filter (added 21 September 2026)
   ========================================================= */

#search-open {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Filled when a search is active: the map is showing a subset */
#search-open.is-active {
    background: var(--black);
    color: var(--white);
    border-color: var(--black);
}

.search-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: 10px;
    background: var(--white);
    color: var(--black);
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    text-align: center;
}

.search-badge[hidden] {
    display: none;
}

/* Header, field and chips stay put while the results scroll */
.search-top {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #fff;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--gray3);
}

.search-top .panel-header {
    position: static;
    align-items: center;
}

.search-clear[hidden] {
    display: none;
}

.search-box {
    margin-bottom: 10px;
}

/* 16px stops iOS zooming in when the field gets focus */
.search-box input {
    font-size: 16px;
}

.search-box input::-webkit-search-cancel-button {
    cursor: pointer;
}

/* One row of chips per filter, scrolling sideways instead of wrapping
   into a wall of buttons on a phone */
.search-chips {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 0 16px 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.search-chips::-webkit-scrollbar {
    display: none;
}

.search-chip {
    flex-shrink: 0;
    min-height: 32px;
    padding: 0 12px;
    background: #fff;
    color: var(--black);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    font-family: inherit;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
}

.search-chip:hover {
    background: var(--gray1);
}

.search-chip[aria-pressed="true"] {
    background: var(--black);
    color: var(--white);
    border-color: var(--black);
}

.search-results .panel-list-head:first-child {
    border-top: 0;
}

.search-results .panel-items {
    padding-bottom: 4px;
}

.search-row .map-code {
    margin-left: auto;
    align-self: flex-start;
}

.search-snippet {
    font-size: 12px;
    line-height: 1.4;
    color: var(--gray7);
}

.search-results mark {
    background: #fdf2a8;
    color: inherit;
    border-radius: 2px;
}

.search-hint {
    padding-top: 14px;
    font-style: normal;
    line-height: 1.5;
}

.search-hint kbd {
    display: inline-block;
    padding: 0 5px;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    font-family: inherit;
    font-size: 12px;
}

/* On a location card reached from search */
.panel-back-bar {
    width: 100%;
    justify-content: flex-start;
    padding: 6px 12px;
    border-bottom: 1px solid var(--gray3);
}

/* Pins outside the current search step back, but stay clickable */
.map-pin.is-dimmed {
    opacity: 0.22;
    filter: grayscale(1);
}

.map-pin.is-dimmed.is-bouncing {
    opacity: 1;
    filter: none;
}


/* =========================================================
   One panel for everything (added 22 September 2026)
   ========================================================= */

/* The About and List View boxes stay in the HTML, because the list is what
   search engines and AI crawlers read. People see the same content in the
   panel, opened from the button bar. */
#about-box,
#list-box {
    display: none !important;
}

/* A tap leaves focus on the handle; only show the ring for keyboard users */
.panel-handle:focus:not(:focus-visible),
.saved-locations-title:focus:not(:focus-visible) {
    outline: none;
}

.panel-handle:focus-visible {
    outline: 2px solid var(--black);
    outline-offset: -2px;
}

/* ---- About, shown in the panel ---- */

.panel-about {
    padding: 0 16px 18px;
    font-size: var(--font-size-small);
    line-height: 1.5;
    color: var(--text);
    text-wrap: var(--balance);
}

.panel-about p:first-child {
    margin-top: 0;
}

.panel-about > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.panel-about .submit-button,
.panel-about .info-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    box-sizing: border-box;
    white-space: nowrap;
}

/* In the old box the white border blended into the box; on the panel the
   buttons need an edge like the panel's own buttons */
.panel-about .info-button {
    border-color: var(--border-color);
}

.panel-about .info-button:hover {
    border-color: var(--black);
}

/* Hover must not undo the filled state, or the white text disappears */
#search-open.is-active:hover {
    background: #000;
}

/* The view that is open in the panel */
#map-tools button.is-current {
    box-shadow: inset 0 -3px 0 var(--black), 0 2px 2px 0 rgba(0, 0, 0, 0.16);
}

#search-open.is-active.is-current {
    box-shadow: inset 0 -3px 0 var(--white), 0 2px 2px 0 rgba(0, 0, 0, 0.16);
}

/* ---- Saved locations: count + caret in the title ---- */

.saved-count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: 10px;
    background: var(--black);
    color: var(--white);
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    text-align: center;
}

.saved-count[hidden],
.saved-caret {
    display: none;
}

/* ---- Mobile: the map fills the screen, saved locations become a sheet ---- */

@media (max-width: 768px) {
    :root {
        --saved-bar: 56px;
    }

    /* Was 80vh with the saved list below it, which made the page scroll */
    #map {
        height: calc(100vh - var(--saved-bar));
        height: calc(100dvh - var(--saved-bar));
        padding-top: 0;
    }

    #saved-locations {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 940;               /* under the location panel (950) */
        width: auto;
        max-width: none;
        max-height: none;
        margin: 0;
        box-sizing: border-box;
        height: calc(var(--saved-bar) + env(safe-area-inset-bottom, 0px));
        padding: 0 1em env(safe-area-inset-bottom, 0px);
        overflow: hidden;
        background: #fff;
        border: 0;
        border-top: 1px solid var(--border-color);
        border-radius: var(--border-radius) var(--border-radius) 0 0;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
        transition: height 0.25s ease, transform 0.25s ease;
    }

    #saved-locations.is-open {
        height: 70vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Out of the way while the location panel is up */
    body.has-panel #saved-locations {
        transform: translateY(100%);
    }

    .saved-locations-title {
        position: sticky;
        top: 0;
        z-index: 1;
        height: var(--saved-bar);
        margin: 0;
        background: #fff;
        cursor: pointer;
    }

    /* Same grab handle as the panel */
    .saved-locations-title::before {
        content: '';
        position: absolute;
        top: 6px;
        left: 50%;
        width: 40px;
        height: 4px;
        margin-left: -20px;
        border-radius: 2px;
        background: var(--gray4);
    }

    #saved-locations.is-open .saved-locations-title {
        border-bottom: 1px solid var(--gray3);
    }

    .saved-caret {
        display: inline-block;
        margin-left: auto;
        color: var(--text-subtle);
        transform: rotate(90deg);       /* points up: tap to open */
        transition: transform 0.25s ease;
    }

    #saved-locations.is-open .saved-caret {
        transform: rotate(-90deg);
    }

    #saved-locations .no-saved-locations {
        padding: 12px 0;
    }

    /* Expanded, the sheet stops under the button bar (app.js measures it),
       so Search / Near me / List View / About can be switched directly */
    #location-panel.is-expanded {
        height: calc(100vh - var(--tools-bottom, 8vh) - 8px);
        height: calc(100dvh - var(--tools-bottom, 8vh) - 8px);
    }

    /* Below the two rows of map buttons */
    #walking-time {
        top: 12em;
    }
}

@media (prefers-reduced-motion: reduce) {
    #saved-locations,
    .saved-caret {
        transition: none;
    }
}


/* =========================================================
   Saving one exhibition (added 25 September 2026, v2.7)
   ========================================================= */

/* Bookmark on a row in an exhibition list: this one is saved */
.panel-item-saved {
    width: 18px;
    height: 18px;
    margin-left: auto;
    flex-shrink: 0;
}

/* Exhibitions saved under their venue in Saved Locations */
.saved-makers {
    list-style: none;
    /* The maker's ✕ is pulled out to the right so it sits in the same column
       as the venue's ✕ (a remove-button is 8 + 18 + 8 = 34px wide) */
    margin: 6px -34px 0 0;
    padding: 0;
}

/* The venue's ✕ lines up with the venue name, not the middle of the row */
.saved-location-item > .remove-venue {
    align-self: flex-start;
    margin-top: -4px;
}

.saved-maker .remove-button {
    padding: 4px 8px;
}

.saved-maker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 0 4px 10px;
    border-left: 2px solid var(--gray3);
    margin-top: 4px;
}

.saved-maker-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: var(--font-size-small);
    line-height: 1.3;
}

.saved-maker-name {
    font-weight: 500;
}

.saved-maker-participant {
    font-size: 12px;
    color: var(--gray7);
}