/**
 * Public visitor map (src/pages/public-map.php, public/js/pages/public-map.js): Field Journal look.
 * Desktop (900px and up): the left column scrolls with the page and the map stays fixed beside it.
 * Below 900px: one column, title and numbers, then the map, its legend and the lists.
 * Data colors (choropleth ramp, source key) live in the script; the source key matches the
 * homepage report key: guest book #C4956A, QR #5A9E78, kiosk #2D6B4A.
 */

.pm {
    --pm-panel: clamp(340px, 31vw, 420px);
    --pm-pad: 32px;
    background: var(--color-stone);
    color: var(--color-forest);
    font-family: var(--font-body);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
.pm p { margin: 0; }
.pm a { color: var(--color-pine); }
.pm a:hover { color: var(--color-forest); }
.pm :focus-visible { outline: 2px solid var(--color-forest); outline-offset: 2px; }

/* ---------- Header: logo, label, title, the number and its definition ---------- */
.pm-head { padding: 36px var(--pm-pad) 24px; display: flex; flex-direction: column; align-items: flex-start; }
.pm-logo { display: block; width: auto; height: auto; max-height: 56px; max-width: 220px; object-fit: contain; margin-bottom: 18px; }
.pm-label { margin: 0 0 12px; }
.pm-label span {
    display: inline-block; font-family: var(--font-hand); font-weight: 600; font-size: 26px; line-height: 1;
    color: var(--color-trail-dark); transform: rotate(-2deg); transform-origin: left bottom;
    padding-bottom: 3px; border-bottom: 2px solid currentColor;
}
.pm-title {
    font-family: var(--font-heading); font-weight: 400; font-size: 36px; line-height: 1.06; letter-spacing: -0.01em;
    color: var(--color-forest); margin: 0 0 22px; text-wrap: balance; overflow-wrap: anywhere;
}
.pm-title--long { font-size: 29px; line-height: 1.1; }
.pm-title__name { font-style: italic; }
.pm .pm-example-note { font-size: 14px; line-height: 1.5; color: var(--color-body); margin: -10px 0 18px; max-width: 30em; }

.pm-figure { width: 100%; }
.pm-figure__main { display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: 12px; row-gap: 4px; margin-bottom: 16px; }
.pm-figure__value { font-family: var(--font-heading); font-weight: 400; font-size: 52px; line-height: 0.95; color: var(--color-forest); }
.pm-figure__label { font-size: 15px; line-height: 1.3; color: var(--color-body); max-width: 10.5em; padding-bottom: 3px; }
.pm-figure.is-loading .pm-figure__value { min-width: 3.4ch; border-radius: 6px; background: rgba(27, 58, 45, .07); }

.pm-sources { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 12px; width: 100%; }
.pm-sources:empty { display: none; }
.pm-source { border-top: 3px solid var(--pm-source, var(--color-trail)); padding-top: 7px; display: flex; flex-direction: column; gap: 3px; }
.pm-source__value { font-family: var(--font-heading); font-size: 26px; line-height: 1; color: var(--color-forest); }
.pm-source__label { font-size: 12.5px; line-height: 1.3; color: var(--color-muted-green); }

.pm-meta { font-size: 13.5px; line-height: 1.45; color: var(--color-body); margin-bottom: 4px; }
.pm-reach { font-size: 13.5px; line-height: 1.45; color: var(--color-body); margin-bottom: 4px; }
.pm-coverage { font-size: 13.5px; line-height: 1.45; color: var(--color-body); margin-bottom: 10px; }
.pm-meta:empty, .pm-reach:empty, .pm-coverage:empty { display: none; }
.pm-note { font-size: 12.5px; line-height: 1.45; color: var(--color-muted-green); }

.pm-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.pm-btn {
    display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 8px 14px;
    font: 600 14px/1.2 var(--font-body); color: var(--color-forest); background: var(--color-paper);
    border: 1px solid var(--color-input-border); border-radius: 6px; cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.pm-btn:hover { background: #FFFFFF; border-color: var(--color-forest); }
.pm a.pm-btn, .pm a.pm-btn:hover { color: var(--color-forest); text-decoration: none; }
.pm-btn svg, .pm-btn [data-lucide] { width: 16px; height: 16px; flex-shrink: 0; }
.pm-btn--small { min-height: 34px; padding: 6px 12px; font-size: 13.5px; }
.pm-share-status { font-size: 13px; color: var(--color-pine); }

/* ---------- Map stage: view switch, map, status, legend ---------- */
.pm-stage { position: relative; background: #E9E5DC; }
.pm-canvas { position: relative; }
.pm-map { width: 100%; height: 100%; }
.pm-map .mapboxgl-canvas:focus-visible { outline: 2px solid var(--color-forest); outline-offset: -2px; }

.pm-views {
    display: inline-flex; gap: 2px; padding: 3px; background: rgba(250, 250, 248, .96);
    border: 1px solid var(--color-rule); border-radius: 9px; box-shadow: 0 2px 10px rgba(27, 58, 45, .10);
}
.pm-view {
    min-height: 34px; padding: 6px 15px; border: 0; border-radius: 6px; background: transparent;
    font: 600 13.5px/1 var(--font-body); color: var(--color-forest); cursor: pointer; transition: background .15s ease, color .15s ease;
}
.pm-view:hover { background: rgba(27, 58, 45, .07); }
.pm-view[aria-pressed="true"] { background: var(--color-forest); color: var(--color-paper); }

.pm-status { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; padding: 24px; pointer-events: none; }
.pm-status[hidden] { display: none; }
.pm-status__card {
    pointer-events: auto; max-width: 380px; padding: 14px 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    background: rgba(250, 250, 248, .97); border: 1px solid var(--color-rule); border-radius: 10px; box-shadow: 0 10px 30px rgba(27, 58, 45, .14);
}
.pm-status__text { font-size: 14px; line-height: 1.5; color: var(--color-body); }
.pm-status.is-loading .pm-status__card { flex-direction: row; align-items: center; padding: 10px 16px; border-radius: 100px; }
.pm-status.is-loading .pm-status__text::before {
    content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 10px; vertical-align: -1px;
    border: 2px solid var(--color-rule); border-top-color: var(--color-pine); border-radius: 50%; animation: pm-spin .8s linear infinite;
}
@keyframes pm-spin { to { transform: rotate(360deg); } }

.pm-legend {
    background: rgba(250, 250, 248, .96); border: 1px solid var(--color-rule); border-radius: 10px;
    padding: 12px 14px 11px; box-shadow: 0 4px 16px rgba(27, 58, 45, .10); color: var(--color-body);
}
.pm-legend:empty { display: none; }
.pm-legend__title { font-size: 12.5px; font-weight: 600; color: var(--color-forest); margin-bottom: 8px; }
.pm-legend__scale { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 3px; }
.pm-legend__step { display: flex; flex-direction: column; gap: 4px; min-width: 58px; }
.pm-legend__swatch { display: block; height: 10px; border-radius: 2px; background: var(--pm-swatch); }
.pm-legend__step--none { margin-left: 10px; }
.pm-legend__step--none .pm-legend__swatch { border: 1px solid #CFC7B8; }
.pm-legend__value { font-size: 11.5px; line-height: 1; color: var(--color-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pm-legend__note { font-size: 12px; line-height: 1.45; color: var(--color-muted-green); margin-top: 8px; }
.pm-legend__note strong { color: var(--color-forest); font-weight: 600; }
.pm-legend__gradient { height: 10px; border-radius: 2px; background: linear-gradient(to right, rgba(169, 205, 183, .55), #5A9E78, #2D6B4A, #1B3A2D); }
.pm-legend__ends { display: flex; justify-content: space-between; font-size: 11.5px; margin-top: 4px; }
.pm-legend__bubbles { display: flex; align-items: flex-end; gap: 14px; }
.pm-legend__bubble { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.pm-legend__bubble i { display: block; border-radius: 50%; background: rgba(45, 107, 74, .88); box-shadow: 0 0 0 2px #FAFAF8; }
.pm-legend__site { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; }

/* Map popups and center markers */
.pm .mapboxgl-popup-content {
    padding: 10px 14px; border-radius: 8px; font: 13px/1.45 var(--font-body); color: var(--color-body);
    box-shadow: 0 8px 24px rgba(27, 58, 45, .16);
}
.pm .mapboxgl-popup-close-button { font-size: 18px; padding: 2px 7px; color: var(--color-muted-green); }
.pm-pop__name { display: block; font-weight: 600; font-size: 14px; color: var(--color-forest); padding-right: 14px; }
.pm-pop__count { display: block; }
.pm-pop__split { display: block; font-size: 12px; color: var(--color-muted-green); margin-top: 2px; }

.pm-site-marker { display: flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; cursor: pointer; }
.pm-site-marker__dot { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--color-trail); box-shadow: 0 0 0 3px #FAFAF8, 0 2px 6px rgba(27, 58, 45, .35); }
.pm-site-marker__count {
    font: 700 11.5px/1 var(--font-body); color: var(--color-paper); background: var(--color-forest);
    padding: 4px 7px; border-radius: 10px; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.pm-site-marker:focus-visible { outline: 2px solid var(--color-forest); outline-offset: 3px; border-radius: 12px; }

/* ---------- Lists: the table view of the map ---------- */
.pm-lists { padding: 0 var(--pm-pad); }
.pm-section { border-top: 1px solid var(--color-rule); padding: 20px 0 22px; }
.pm-section[hidden] { display: none; }
.pm-h2 { font-family: var(--font-heading); font-weight: 400; font-size: 23px; line-height: 1.15; letter-spacing: normal; color: var(--color-forest); margin: 0 0 10px; }
.pm-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.pm-table th, .pm-table td { padding: 0; text-align: left; font-weight: 400; }
.pm-table tbody tr { border-bottom: 1px solid #E6E0D4; }
.pm-table tbody tr:last-child { border-bottom: 0; }
.pm-table tbody tr[hidden] { display: none; }
.pm-table .pm-row__place { position: relative; padding: 8px 10px 12px 0; font-size: 14px; color: var(--color-forest); }
.pm-row__label, .pm-row__name {
    display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left;
    font: inherit; line-height: 1.35; color: inherit; overflow-wrap: anywhere;
}
.pm-row__name { cursor: pointer; }
.pm-row__name:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-rule); }
.pm-row__bar {
    position: absolute; left: 0; bottom: 5px; height: 3px; width: var(--w, 0%); min-width: 2px;
    border-radius: 2px; background: var(--c, var(--color-sage));
}
.pm-col-count { width: 64px; }
.pm-col-share { width: 58px; }
.pm-table .pm-row__count { text-align: right; font-size: 14px; font-weight: 600; color: var(--color-forest); font-variant-numeric: tabular-nums; vertical-align: top; padding-top: 8px; }
.pm-table .pm-row__share { text-align: right; font-size: 12.5px; color: var(--color-muted-green); font-variant-numeric: tabular-nums; vertical-align: top; padding-top: 9px; }
.pm-table tbody tr.is-active { background: rgba(90, 158, 120, .10); }
.pm-more {
    margin-top: 10px; padding: 6px 0; border: 0; background: none; cursor: pointer;
    font: 600 13.5px/1.2 var(--font-body); color: var(--color-pine);
}
.pm-more:hover { color: var(--color-forest); text-decoration: underline; text-underline-offset: 3px; }

.pm-about { border-top: 1px solid var(--color-rule); padding: 16px 0 18px; }
.pm-about summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--color-forest); }
.pm-about summary:hover { color: var(--color-pine); }
.pm-about__list { margin: 12px 0 0; padding-left: 18px; list-style: disc; display: flex; flex-direction: column; gap: 8px; }
.pm-about__list li { font-size: 13px; line-height: 1.55; color: var(--color-body); }

.pm-credit {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px;
    border-top: 1px solid var(--color-rule); padding: 14px 0 18px; background: var(--color-stone);
}
.pm .pm-credit__brand { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-muted-green); text-decoration: none; }
.pm .pm-credit__brand:hover { color: var(--color-forest); }
.pm-credit__brand img { width: 20px; height: 20px; }
.pm-credit__name { font-family: var(--font-wordmark); font-weight: 800; letter-spacing: -0.02em; color: var(--color-forest); }
.pm .pm-credit__cta { font-size: 13px; font-weight: 600; color: var(--color-pine); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(45, 107, 74, .35); }

/* ---------- Desktop: fixed map beside a scrolling column ---------- */
@media (min-width: 900px) {
    .pm-head, .pm-lists { width: var(--pm-panel); }
    .pm-stage { position: fixed; top: 0; right: 0; bottom: 0; left: var(--pm-panel); border-left: 1px solid var(--color-rule); z-index: 1; }
    .pm-canvas { position: absolute; inset: 0; }
    .pm-views { position: absolute; top: 16px; left: 16px; z-index: 2; }
    .pm-legend { position: absolute; left: 16px; bottom: 34px; z-index: 2; max-width: min(440px, calc(100% - 96px)); }
    .pm-credit { position: sticky; bottom: 0; z-index: 1; }
}

/* ---------- Under 900px: one column ---------- */
@media (max-width: 899px) {
    .pm { --pm-pad: 20px; }
    .pm-head { padding: 26px var(--pm-pad) 20px; }
    .pm-title { font-size: 31px; margin-bottom: 18px; }
    .pm-title--long { font-size: 26px; }
    .pm-figure__value { font-size: 46px; }
    .pm-stage { background: none; }
    .pm-views { display: flex; margin: 0 var(--pm-pad) 10px; box-shadow: none; }
    .pm-view { flex: 1 1 0; padding: 6px 8px; }
    .pm-canvas { height: clamp(260px, min(86vw, 72vh), 520px); border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); background: #E9E5DC; }
    .pm-legend { margin: 12px var(--pm-pad) 4px; box-shadow: none; }
    .pm-lists { padding-top: 12px; }
}
@media (max-width: 420px) {
    .pm { --pm-pad: 16px; }
    .pm-title { font-size: 28px; }
    .pm-title--long { font-size: 24px; }
    .pm-figure__value { font-size: 42px; }
    .pm-source__value { font-size: 23px; }
    .pm-sources { gap: 10px; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .pm-status.is-loading .pm-status__text::before { animation: none; }
}