/* UK project & post map (private prototype). Design tokens and components follow slava.it.com's public-discussions.css;
   the pm-* rules at the end are the only additions (map, review, evidence). */
:root {
  --bg-paper: #FAF6ED;
  --bg-paper-2: #F3ECDA;
  --card-bg: #FFFDF8;
  --card-border: rgba(160, 130, 100, 0.28);
  --text-primary: #261A14;
  --text-secondary: #594436;
  --text-muted: #8C7462;
  --accent-terracotta: #C85A32;
  --accent-ochre: #C07018;
  --accent-sage: #4E7C59;
  --accent-plum: #7A354A;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background-color: var(--bg-paper);
  background-image:
    radial-gradient(rgba(160, 130, 100, 0.05) 1px, transparent 1px),
    radial-gradient(rgba(160, 130, 100, 0.04) 1px, transparent 1px);
  background-size: 24px 24px, 40px 40px;
  background-position: 0 0, 12px 12px;
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* ---- nav ---- */
.pd-global-nav {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  padding: 8px 20px;
  border-bottom: 1px solid var(--card-border);
  background: rgba(250, 246, 237, 0.9);
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 40;
}
.pd-brand { font-family: var(--font-serif); font-weight: 700; font-size: 1.05rem; color: var(--text-primary); text-decoration: none; }
.pd-nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.pd-nav-links a {
  font-size: 0.83rem; font-weight: 600; text-decoration: none;
  color: var(--text-secondary);
  padding: 6px 14px; border-radius: 980px;
  border: 1px solid transparent;
}
.pd-nav-links a:hover { border-color: var(--card-border); }
.pd-nav-links a.is-current { background: var(--accent-terracotta); color: #fff; }

/* ---- header ---- */
.pd-header { padding: 28px 28px 6px; max-width: 1400px; margin: 0 auto; }
.pd-header h1 { font-family: var(--font-serif); font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 6px; }
.pd-sub { color: var(--text-secondary); font-size: 0.92rem; max-width: 72ch; line-height: 1.55; margin: 0 0 8px; }

/* ---- controls ---- */
.pd-controls { padding: 18px 28px 6px; max-width: 1400px; margin: 0 auto; }
.pd-controls-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.pd-search {
  flex: 1 1 320px; min-width: 0;
  padding: 11px 16px; font-size: 0.95rem;
  border: 1px solid var(--card-border); border-radius: 12px;
  background: var(--card-bg); color: var(--text-primary);
}
.pd-search:focus { outline: 2px solid var(--accent-ochre); outline-offset: 1px; }
.pd-count { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); }
.pd-tech { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pd-chip {
  padding: 7px 15px; border-radius: 980px; font-size: 0.8rem; font-weight: 600; font-family: inherit;
  border: 1px solid var(--card-border); background: transparent; color: var(--text-secondary); cursor: pointer;
}
.pd-chip:focus-visible { outline: 2px solid var(--accent-ochre); outline-offset: 2px; }
.pd-chip.is-active { background: var(--accent-terracotta); color: #fff; border-color: var(--accent-terracotta); }
.pm-group-name { align-self: center; font-size: 0.74rem; color: var(--text-muted); }

/* ---- cards ---- */
.pd-feed {
  padding-right: 4px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px; align-items: start;
}
.pd-card {
  border: 1px solid var(--card-border); border-radius: 12px; background: var(--card-bg);
  padding: 13px 15px; cursor: pointer; transition: border-color 0.15s, transform 0.15s;
  display: flex; flex-direction: column; text-align: left; font: inherit; color: inherit; width: 100%;
}
.pd-card:hover { border-color: var(--accent-ochre); }
.pd-card:focus-visible { outline: 2px solid var(--accent-terracotta); outline-offset: 2px; }
.pd-card.is-selected { border-color: var(--accent-terracotta); box-shadow: 0 0 0 1px var(--accent-terracotta); }
.pd-card-title {
  font-family: var(--font-serif); font-size: 1rem; line-height: 1.3; margin: 0 0 4px; color: var(--text-primary);
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
}
.pd-card-summary { font-size: 0.85rem; color: var(--text-secondary); margin: 0 0 8px; line-height: 1.45; }
.pd-card-summary.pd-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.pd-card-thumb { width: 100%; height: 140px; flex-shrink: 0; object-fit: contain; background: var(--bg-paper-2); border-radius: 8px; margin-bottom: 8px; display: block; }
.pd-card-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.pd-tag { font-size: 0.68rem; font-weight: 600; padding: 3px 8px; border-radius: 980px; background: var(--bg-paper-2); color: var(--text-muted); }
.pd-tag--tech { background: rgba(78, 124, 89, 0.14); color: #3c5f47; }
.pd-tag--exact { background: rgba(200, 90, 50, 0.16); color: var(--accent-terracotta); }
.pd-tag--featured { background: rgba(192, 112, 24, 0.14); color: var(--accent-ochre); font-weight: 700; }
.pd-tag--warn { background: rgba(122, 53, 74, 0.12); color: var(--accent-plum); }
.pd-field { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.5; }
.pd-field span { font-weight: 700; color: var(--text-muted); }
.pd-card-source { font-size: 0.74rem; color: var(--text-muted); margin-top: 7px; }
.pd-empty { text-align: center; color: var(--text-muted); padding: 40px 16px; font-size: 0.9rem; line-height: 1.6; }

/* ---- detail panel ---- */
.pd-detail-panel { position: fixed; inset: 0; z-index: 50; overflow-y: auto; background: var(--bg-paper); padding: 24px 28px 60px; display: none; }
.pd-detail-panel .pd-detail { max-width: 720px; margin: 0 auto; }
body.pd-showing-detail { overflow: hidden; }
body.pd-showing-detail .pd-detail-panel { display: block; }
.pd-back { background: none; border: none; color: var(--accent-terracotta); font-weight: 700; font-size: 0.85rem; cursor: pointer; padding: 0 0 12px; font-family: inherit; }
.pd-detail h2 { font-family: var(--font-serif); font-size: 1.5rem; margin: 6px 0 10px; }
.pd-detail h3 { font-family: var(--font-serif); font-size: 1.1rem; margin: 22px 0 6px; color: var(--accent-plum); }
.pd-detail-date { font-size: 0.8rem; color: var(--accent-plum); font-weight: 700; }
.pd-detail-summary { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.55; }
.pd-detail-body { font-size: 0.95rem; color: var(--text-primary); line-height: 1.6; white-space: pre-wrap; margin: 12px 0; overflow-wrap: anywhere; }
.pd-detail-body a { color: var(--accent-terracotta); overflow-wrap: anywhere; }
.pd-detail-body mark { background: rgba(200, 90, 50, 0.22); color: var(--text-primary); border-radius: 3px; padding: 0 2px; font-weight: 700; }
.pd-detail-photos { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.pd-detail-photos img { max-width: 100%; max-height: 360px; border-radius: 10px; border: 1px solid var(--card-border); object-fit: contain; background: var(--bg-paper-2); }
.pd-project-panel { margin: 14px 0; border: 1px solid var(--card-border); border-radius: 10px; padding: 10px 12px; background: var(--card-bg); }
.pd-project-panel summary { font-weight: 700; font-size: 0.85rem; cursor: pointer; }
.pd-project-body { font-size: 0.82rem; color: var(--text-muted); margin-top: 8px; line-height: 1.55; }
.pd-detail-source { font-size: 0.82rem; margin-top: 14px; }
.pd-detail-source a, .pd-detail-links a { color: var(--accent-terracotta); }
.pd-detail-links { font-size: 0.78rem; color: var(--text-muted); margin-top: 6px; }
.pd-detail-note { font-size: 0.76rem; color: var(--text-muted); font-style: italic; margin-top: 18px; line-height: 1.5; }
.pd-detail-empty { margin-top: 18px; padding: 18px; border: 1px dashed var(--card-border); border-radius: 12px; background: var(--bg-paper-2); text-align: center; font-size: 0.85rem; color: var(--text-muted); }

/* ---- footer ---- */
.pd-footer { max-width: 1400px; margin: 0 auto; padding: 20px 28px 40px; font-size: 0.78rem; color: var(--text-muted); line-height: 1.6; border-top: 1px solid var(--card-border); }

/* ============ additions for the map prototype ============ */
.pm-banner { background: rgba(192, 112, 24, 0.10); border-bottom: 1px solid var(--card-border); color: var(--text-secondary); font-size: 0.82rem; padding: 8px 28px; text-align: center; }
.pm-badge { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 980px; background: var(--accent-ochre); color: #fff; font-size: 0.7rem; line-height: 18px; text-align: center; }
.pd-nav-links a.is-current .pm-badge { background: #fff; color: var(--accent-terracotta); }
.pm-view[hidden], [hidden] { display: none !important; }


.pm-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 0.74rem; color: var(--text-muted); align-items: center; }
.pm-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.pm-swatch { width: 22px; height: 0; border-top-width: 3px; border-top-style: solid; border-radius: 2px; }
.pm-swatch.is-dashed { border-top-style: dashed; }
.pm-dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #333; display: inline-block; }

.pm-marker { width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #000; border: 3px dashed #000; box-shadow: 0 1px 6px rgba(38, 26, 20, 0.45);
  font: 700 0.78rem var(--font-sans); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.pm-marker--offshore { background: #1a64c8; color: #fff; }                          /* a single project: white onshore (the default above), blue offshore (the register says "Wind Offshore"); asked for 2026-10-11 */
.pm-marker:hover, .pm-marker.is-selected { box-shadow: 0 0 0 3px var(--accent-ochre), 0 1px 6px rgba(38, 26, 20, 0.45); }
.pm-marker:focus-visible { outline: 3px solid var(--accent-ochre); outline-offset: 2px; }
/* Review sheet (review.html): names the matcher could not place, with the post text and the candidate records. */
.rv-wrap { max-width: 920px; margin: 0 auto; padding: 0 16px 48px; }
.rv-progress { margin: 12px 0; font-size: 0.85rem; color: var(--text-secondary); }
.rv-cand { display: flex; gap: 12px; align-items: center; justify-content: space-between; border-top: 1px solid var(--card-border); padding: 10px 0; }
.rv-cand-main { flex: 1; min-width: 0; }
.rv-small { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.45; margin-top: 4px; }
.rv-status { font-size: 0.8rem; color: var(--text-secondary); align-self: center; margin-left: 12px; }
/* Overlapping projects merge into one circle, the inverse of a project marker (white, black ring, black number); approved 2026-10-08. */
.pm-marker.is-clustered { display: none; }
.pm-marker--estimate { background: #fff; color: #000; border: 3px dashed #000; }       /* an estimated place: the same white circle with a dashed ring as every other project (the popup says it is an estimate) */
.pm-marker--estimate:hover, .pm-marker--estimate.is-selected { background: #fff; }
.pm-marker--cluster { width: 40px; height: 40px; background: #fff; color: #000; border: 3px dashed #000; font-size: 0.86rem; }       /* the same dashed ring as a single project, larger: the number counts the projects inside */
.pm-marker--cluster:hover { background: #fff; box-shadow: 0 0 0 3px var(--accent-ochre), 0 1px 6px rgba(38, 26, 20, 0.45); }

.maplibregl-popup-content { background: var(--card-bg); color: var(--text-primary); border: 1px solid var(--card-border); border-radius: 12px; font-family: var(--font-sans); padding: 12px 14px; max-width: 280px; }
.maplibregl-popup-tip { border-top-color: var(--card-bg) !important; border-bottom-color: var(--card-bg) !important; }
.pm-pop-title { font-family: var(--font-serif); font-size: 1rem; margin: 0 0 4px; }
.pm-pop-line { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.45; margin: 2px 0; }
.pm-pop-source { font-size: 0.72rem; color: var(--text-muted); margin-top: 6px; line-height: 1.4; }

.pm-btn { padding: 8px 16px; border-radius: 980px; border: 1px solid var(--accent-terracotta); background: var(--accent-terracotta); color: #fff; font: 700 0.8rem var(--font-sans); cursor: pointer; }
.pm-btn:hover { background: var(--accent-ochre); border-color: var(--accent-ochre); }
.pm-btn:focus-visible { outline: 2px solid var(--accent-ochre); outline-offset: 2px; }
.pm-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.pm-btn--ghost { background: none; color: var(--accent-terracotta); }
.pm-btn--ghost:hover { background: var(--accent-terracotta); color: #fff; }
.pm-btn--small { padding: 5px 12px; font-size: 0.74rem; }

.pm-review { max-width: 1400px; margin: 0 auto; padding: 8px 28px 10px; display: flex; flex-direction: column; gap: 12px; }
.pm-item { border: 1px solid var(--card-border); border-radius: 12px; background: var(--card-bg); padding: 14px 16px; }
.pm-item h3 { font-family: var(--font-serif); font-size: 1.05rem; margin: 0 0 4px; }
.pm-item-meta { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 8px; }
.pm-item-meta a, .pm-cand-info a, .pm-history a { color: var(--accent-terracotta); }
.pm-ctx { font-size: 0.88rem; line-height: 1.55; color: var(--text-secondary); background: var(--bg-paper-2); border-radius: 8px; padding: 9px 12px; margin: 8px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.pm-ctx mark { background: rgba(200, 90, 50, 0.22); color: var(--text-primary); border-radius: 3px; padding: 0 2px; font-weight: 700; }
.pm-hints { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; }
.pm-cand { border-top: 1px dashed var(--card-border); padding: 10px 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: start; }
.pm-cand-name { font-weight: 700; font-size: 0.9rem; }
.pm-cand-info { font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; }
.pm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.pm-find { margin-top: 10px; border-top: 1px dashed var(--card-border); padding-top: 10px; }
.pm-find input { width: 100%; max-width: 420px; padding: 8px 12px; border: 1px solid var(--card-border); border-radius: 10px; background: var(--card-bg); font: inherit; font-size: 0.85rem; }
.pm-find-results { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.pm-find-row { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: 0.82rem; border: 1px solid var(--card-border); border-radius: 8px; padding: 6px 10px; }
.pm-history { font-size: 0.74rem; color: var(--text-muted); margin-top: 8px; }
.pm-section-h { font-family: var(--font-serif); font-size: 1.2rem; margin: 18px 0 2px; }
.pm-error { color: var(--accent-plum); font-size: 0.82rem; font-weight: 600; margin-top: 6px; }

.pm-evidence { display: flex; flex-direction: column; gap: 16px; }
.pm-evidence h2 { font-family: var(--font-serif); font-size: 1.2rem; margin: 10px 0 4px; }
.pm-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 10px; overflow: hidden; }
.pm-table th, .pm-table td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--card-border); vertical-align: top; overflow-wrap: anywhere; }
.pm-table th { background: var(--bg-paper-2); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }

/* ============ site layers and object profiles (version 1.3) ============ */
.pm-legend-break { margin-left: 10px; }
.pm-legend-icon { width: 18px; height: 18px; display: inline-block; background-repeat: no-repeat; background-position: center; background-size: contain; }
.pm-legend-icon[data-icon="power_plant_wind"] { background-image: url("/icons/power_plant_wind.svg"); }
.pm-legend-icon[data-icon="power_wind"] { background-image: url("/icons/power_wind.svg"); }
.pm-legend-icon[data-icon="power_plant_solar"] { background-image: url("/icons/power_plant_solar.svg"); }
.pm-legend-icon[data-icon="power_plant_hydro"] { background-image: url("/icons/power_plant_hydro.svg"); }
.pm-legend-icon[data-icon="power_plant_battery"] { background-image: url("/icons/power_plant_battery.svg"); }
.pm-legend-icon[data-icon="telecom_datacenter"] { background-image: url("/icons/telecom_datacenter.svg"); }
.pm-legend-icon[data-icon="power_generator"] { background-image: url("/icons/power_generator.svg"); }

.pm-stages { align-items: center; margin-top: 8px; }

/* The profile of a clicked object floats on the right of the map while an object is selected. */
.pm-side:not(.is-object) { display: none; }
.pm-obj h2 { font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.25; margin: 2px 0 4px; }
.pm-obj-sub { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 6px; }
.pm-obj-loading { padding: 20px 4px; font-size: 0.85rem; color: var(--text-muted); }
.pm-sub-empty { margin: 12px 0; padding: 14px; border: 1px dashed var(--card-border); border-radius: 12px; background: var(--bg-paper-2); font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5; }

.pm-verdict { margin: 8px 0 10px; padding: 8px 11px; border-radius: 10px; border: 1px solid var(--card-border); border-left-width: 4px; background: var(--card-bg); font-size: 0.78rem; line-height: 1.5; color: var(--text-secondary); }
.pm-verdict strong { color: var(--text-primary); }
.pm-verdict.tone-good { border-left-color: var(--accent-sage); }
.pm-verdict.tone-ok { border-left-color: var(--accent-ochre); }
.pm-verdict.tone-warn { border-left-color: var(--accent-plum); }
.pm-verdict.tone-muted { border-left-color: var(--text-muted); }

.pd-tag.tone-good, .pd-tag.tone-operational { background: rgba(78, 124, 89, 0.14); color: #3c5f47; }
.pd-tag.tone-ok, .pd-tag.tone-construction { background: rgba(192, 112, 24, 0.14); color: var(--accent-ochre); }
.pd-tag.tone-warn, .pd-tag.tone-consented { background: rgba(122, 53, 74, 0.12); color: var(--accent-plum); }
.pd-tag.tone-type { background: rgba(200, 90, 50, 0.16); color: var(--accent-terracotta); }

.pm-section > summary { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pm-count-badge { flex: none; min-width: 20px; padding: 0 7px; border-radius: 980px; background: var(--bg-paper-2); color: var(--text-secondary); font-size: 0.7rem; line-height: 18px; text-align: center; }
.pm-section-body > * + * { margin-top: 10px; }
.pm-kv { margin: 0; }
.pm-kv > div { display: grid; grid-template-columns: 36% minmax(0, 1fr); gap: 8px; padding: 4px 0; border-bottom: 1px dashed var(--card-border); }
.pm-kv dt { font-weight: 700; color: var(--text-muted); }
.pm-kv dd { margin: 0; color: var(--text-secondary); overflow-wrap: anywhere; }
.pm-kv a, .pm-links a, .pm-rowcard a, .pm-table a { color: var(--accent-terracotta); }
.pm-text { margin: 0; font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5; }
.pm-note { margin: 0; font-size: 0.74rem; color: var(--text-muted); font-style: italic; line-height: 1.5; }
.pm-links { font-size: 0.78rem; line-height: 1.6; }
.pm-scroll { overflow-x: auto; }
.pm-cards-stack { display: flex; flex-direction: column; gap: 6px; }
.pm-rowcard { border: 1px solid var(--card-border); border-radius: 8px; background: var(--card-bg); padding: 7px 10px; }
.pm-rowcard-title { font-weight: 700; font-size: 0.8rem; color: var(--text-primary); }
.pm-rowcard-line { font-size: 0.74rem; color: var(--text-secondary); line-height: 1.5; }
.pm-rowcard-line span { color: var(--text-muted); font-weight: 600; }

.pm-bars-title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 4px; }
.pm-bar-row { display: grid; grid-template-columns: 38% minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 0.74rem; margin: 3px 0; }
.pm-bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.pm-bar-track { display: block; height: 10px; border-radius: 5px; background: var(--bg-paper-2); overflow: hidden; }
.pm-bar-fill { display: block; height: 100%; border-radius: 5px; background: var(--text-muted); }
.pm-bar-fill.tone-plain { background: var(--accent-terracotta); }
.pm-bar-fill.tone-operational { background: var(--accent-sage); }
.pm-bar-fill.tone-construction { background: var(--accent-ochre); }
.pm-bar-fill.tone-consented { background: var(--accent-plum); }
.pm-bar-fill.tone-application, .pm-bar-fill.tone-scoping { background: var(--text-muted); }
.pm-bar-num { font-weight: 700; color: var(--text-primary); white-space: nowrap; }

.pm-item { border: 1px solid var(--card-border); border-left-width: 4px; border-radius: 10px; background: var(--card-bg); padding: 8px 11px; margin: 0 0 8px; }
.pm-item.tone-operational { border-left-color: var(--accent-sage); }
.pm-item.tone-construction { border-left-color: var(--accent-ochre); }
.pm-item.tone-consented { border-left-color: var(--accent-plum); }
.pm-item.tone-application, .pm-item.tone-scoping, .pm-item.tone-muted { border-left-color: var(--card-border); }
.pm-item-title { display: block; width: 100%; text-align: left; font: inherit; font-family: var(--font-serif); font-size: 0.92rem; line-height: 1.3; color: var(--text-primary); background: none; border: none; padding: 0; }
.pm-item-title.is-link { cursor: pointer; color: var(--accent-terracotta); }
.pm-item-title.is-link:hover { text-decoration: underline; }
.pm-item-title.is-link:focus-visible { outline: 2px solid var(--accent-terracotta); outline-offset: 2px; }
.pm-item-meta { font-size: 0.74rem; color: var(--text-muted); margin-top: 2px; }
.pm-item-line { font-size: 0.74rem; color: var(--text-secondary); line-height: 1.45; margin-top: 3px; overflow-wrap: anywhere; }
.pm-item-more { margin-top: 6px; font-size: 0.74rem; }
.pm-item-more summary, .pm-fold > summary { cursor: pointer; font-weight: 700; color: var(--text-secondary); }
.pm-fold > summary { margin-bottom: 8px; font-size: 0.8rem; }

@media (max-width: 900px) {
    .pm-map { height: 60vh; min-height: 380px; }
  .pm-side { max-height: none; min-height: 0; }
  .pd-controls, .pd-header, .pm-review { padding-left: 16px; padding-right: 16px; }
  .pd-detail-panel { padding: 18px 16px 50px; }
  .pm-cand { grid-template-columns: 1fr; }
}

/* ---- Version 2.5: the map fills the screen; the layers sit in one floating panel with collapsible groups (as in Searchland); asked for 2026-10-11 ---- */
.pm-view { position: relative; }
.pm-stage { position: relative; height: calc(100vh - var(--nav-h, 47px)); min-height: 480px; }
.pm-map { position: relative; border: 1px solid var(--card-border); border-radius: 12px; overflow: hidden; background: var(--bg-paper-2); }       /* the report page's map is also a .pm-map: it keeps its own box and its own height (.rp-map) */
.pm-stage .pm-map { position: absolute; inset: 0; border: 0; border-radius: 0; }
.pm-panel { position: absolute; top: 12px; left: 12px; z-index: 5; width: 340px; max-height: calc(100% - 24px); display: flex; flex-direction: column;
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; box-shadow: 0 2px 14px rgba(38, 26, 20, 0.22); }
.pm-panel-body { overflow-y: auto; padding: 12px 14px 14px; }
.pm-panel.is-collapsed .pm-panel-body { display: none; }
.pm-panel-toggle { position: absolute; top: 8px; right: 8px; z-index: 1; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--card-border); background: var(--card-bg); color: var(--text-secondary); cursor: pointer; padding: 0; font: 700 1rem var(--font-sans); line-height: 1; }
.pm-panel-toggle::before { content: "\2039"; }
.pm-panel.is-collapsed .pm-panel-toggle { position: static; margin: 6px; }
.pm-panel.is-collapsed .pm-panel-toggle::before { content: "\203A"; }
.pm-panel-toggle:focus-visible { outline: 2px solid var(--accent-ochre); outline-offset: 2px; }
.pm-panel .pd-controls-row { padding-right: 34px; }
.pm-panel .pd-search { flex: 1 1 auto; padding: 8px 12px; font-size: 0.88rem; border-radius: 8px; }
.pm-acc { border-top: 1px solid var(--card-border); margin-top: 10px; padding-top: 6px; }
.pm-acc > summary { cursor: pointer; font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); padding: 4px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.pm-acc > summary::-webkit-details-marker { display: none; }
.pm-acc > summary::after { content: "\203A"; transform: rotate(90deg); font-size: 1.1rem; color: var(--text-muted); transition: transform 0.12s; }
.pm-acc[open] > summary::after { transform: rotate(-90deg); }
.pm-acc > summary:focus-visible { outline: 2px solid var(--accent-ochre); outline-offset: 2px; }
.pm-panel .pd-tech { flex-direction: column; flex-wrap: nowrap; gap: 0; margin-top: 2px; }
.pm-panel .pm-stages { margin-top: 0; align-items: stretch; }
.pm-panel .pm-constraints .pd-tech { margin-top: 2px; }
/* each layer is a row with a switch, not a pill */
.pm-panel .pd-chip { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; border: 0; border-radius: 6px; padding: 6px 4px; font-size: 0.82rem; font-weight: 500; color: var(--text-primary); background: transparent; }
.pm-panel .pd-chip:hover { background: var(--bg-paper); }
.pm-panel .pd-chip::after { content: ""; flex: none; width: 30px; height: 17px; border-radius: 980px; background: rgba(160, 130, 100, 0.38); background-image: radial-gradient(circle at 8px 50%, #fff 6px, transparent 6.5px); background-repeat: no-repeat; transition: background-color 0.12s; }
.pm-panel .pd-chip.is-active { background: transparent; color: var(--text-primary); border: 0; }
.pm-panel .pd-chip.is-active::after { background-color: var(--accent-sage); background-image: radial-gradient(circle at 22px 50%, #fff 6px, transparent 6.5px); }
.pm-panel .pd-chip[data-group-all] { font-weight: 700; color: var(--text-secondary); }
.pm-panel .pm-legend { margin-top: 10px; }
.pm-panel .pm-legend:empty { display: none; }
.pm-panel .pd-detail-note:empty { display: none; }
.pm-side { position: absolute; top: 12px; right: 12px; z-index: 5; width: 380px; max-height: calc(100% - 24px); overflow-y: auto; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; box-shadow: 0 2px 14px rgba(38, 26, 20, 0.22); padding: 14px; }
.pm-marker--cluster.pm-marker--offshore { background: #1a64c8; color: #fff; }
.pm-marker--cluster.pm-marker--offshore:hover { background: #1a64c8; }

/* The base map chooser (asked for 2026-10-11, modelled on Searchland's): a button showing the current style; it opens a row of tiles. Page tokens only. */
.pm-basemaps { position: absolute; right: 12px; bottom: 42px; z-index: 6; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.pm-bm-toggle { display: flex; flex-direction: column; width: 76px; padding: 3px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 10px; box-shadow: 0 2px 10px rgba(38, 26, 20, 0.22); cursor: pointer; font: inherit; }
.pm-bm-tray { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: calc(100vw - 24px); padding: 8px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; box-shadow: 0 2px 14px rgba(38, 26, 20, 0.22); }
.pm-bm { width: 90px; padding: 2px; border: 2px solid transparent; border-radius: 10px; background: transparent; cursor: pointer; font: inherit; }
.pm-bm:hover { background: var(--bg-paper); }
.pm-bm[aria-checked="true"] { border-color: var(--accent-sage); }
.pm-bm:focus-visible, .pm-bm-toggle:focus-visible { outline: 2px solid var(--accent-ochre); outline-offset: 2px; }
.pm-bm-thumb { position: relative; display: block; width: 100%; height: 56px; border-radius: 7px; overflow: hidden; background: var(--bg-paper-2); }
.pm-bm-toggle .pm-bm-thumb { height: 44px; }
.pm-bm-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pm-bm-thumb.is-dim img { filter: saturate(0.2) brightness(0.93) contrast(0.8); }
.pm-bm-label { display: block; margin-top: 3px; font: 600 0.72rem var(--font-sans); color: var(--text-primary); text-align: center; }

/* The map's Legend box (2026-10-12, as in Searchland: bottom right of the map, beside the base map chooser; opens and closes). */
.pm-keybox { position: absolute; right: 100px; bottom: 42px; z-index: 4; width: 360px; max-width: calc(100vw - 124px); background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; box-shadow: 0 2px 14px rgba(38, 26, 20, 0.22); }
.pm-keybox-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 12px; border: 0; background: transparent; font: 700 0.82rem var(--font-sans); color: var(--text-secondary); cursor: pointer; }
.pm-keybox-toggle::after { content: "\203A"; transform: rotate(90deg); font-size: 1.1rem; color: var(--text-muted); }
.pm-keybox-toggle[aria-expanded="true"]::after { transform: rotate(-90deg); }
.pm-keybox-toggle:focus-visible { outline: 2px solid var(--accent-ochre); outline-offset: 2px; }
.pm-keybox-body { max-height: 42vh; overflow-y: auto; padding: 0 12px 10px; border-top: 1px solid var(--card-border); }
.pm-keybox-body[hidden] { display: none; }
.pm-keybox .pm-legend { margin-top: 8px; }
.pm-keybox .pm-legend:empty { display: none; }
.pm-key-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; width: 100%; }
.pm-key-label { min-width: 58px; font-weight: 700; color: var(--text-secondary); }
.pm-key-ring { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; border: 2px solid; background: #fff; box-sizing: border-box; }
.pm-key-ring.is-major { width: 15px; height: 15px; }
@media (max-width: 700px) { .pm-keybox { right: 96px; bottom: 12px; z-index: 7; max-width: calc(100vw - 108px); } .pm-panel { max-height: calc(100% - 24px - 52px); } }      /* on a phone the layers panel covers the map: the key sits under it (the panel stops 52 px short, so no row is hidden behind the key) and starts closed */

/* The key (2026-10-12): drawn as the map draws each mark. */
.pm-key-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; border: 1px solid transparent; box-sizing: border-box; }
.pm-key-dot.is-ringed { border-width: 2.5px; }
.pm-key-dot.is-faint, .pm-legend-icon.is-faint, .pm-swatch.is-faint { opacity: 0.4; }
.pm-key-area { display: inline-block; flex: none; width: 14px; height: 10px; border: 1.5px solid; border-radius: 2px; box-sizing: border-box; }
.pm-swatch.is-dotted { border-top-style: dotted; }
.pm-key-marker { display: inline-block; flex: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px dashed #000; box-sizing: border-box; }
.pm-key-marker.is-offshore { background: #1a64c8; }
.pm-key-marker.is-cluster { width: 18px; height: 18px; }

/* The overview dots of solar, battery and hydro plants (2026-10-12): their colours beside the switch rows that turn them on and off, and the stage designs beside the stage rows. */
.pm-panel .pd-chip[data-layer="wind_on"], .pm-panel .pd-chip[data-layer="solar"], .pm-panel .pd-chip[data-layer="battery"], .pm-panel .pd-chip[data-layer="hydro"], .pm-panel .pd-chip[data-stage] { justify-content: flex-start; }
.pm-panel .pd-chip[data-layer="wind_on"]::before, .pm-panel .pd-chip[data-layer="solar"]::before, .pm-panel .pd-chip[data-layer="battery"]::before, .pm-panel .pd-chip[data-layer="hydro"]::before,
.pm-panel .pd-chip[data-stage]::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; margin-right: 2px; box-sizing: border-box; }
.pm-panel .pd-chip[data-layer="wind_on"]::before { background: #8A4FBF; }
.pm-panel .pd-chip[data-layer="solar"]::before { background: #E0A100; }
.pm-panel .pd-chip[data-layer="battery"]::before { background: #1F7A8C; }
.pm-panel .pd-chip[data-layer="hydro"]::before { background: #2F80ED; }
.pm-panel .pd-chip[data-stage="construction"]::before { background: #6B6B6B; border: 2.5px solid #261A14; }
.pm-panel .pd-chip[data-stage="planning"]::before { background: #fff; border: 2.5px solid #6B6B6B; }
.pm-panel .pd-chip[data-stage="not_proceeding"]::before { background: #D8D2C8; border: 2.5px solid #6B6B6B; }
.pm-panel .pd-chip[data-layer="wind_on"]::after, .pm-panel .pd-chip[data-layer="solar"]::after, .pm-panel .pd-chip[data-layer="battery"]::after, .pm-panel .pd-chip[data-layer="hydro"]::after, .pm-panel .pd-chip[data-stage]::after { margin-left: auto; }

/* ---- Version 2.5: the Planning applications group (asked for 2026-10-11, modelled on Searchland's planning tool). Page tokens only: a decision keeps one colour on the map, the rows, the list, the graph and the card. ---- */
.pm-apps .pm-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; border: 0; background: var(--text-muted); }
.pm-apps .pm-dot--approved, .pm-apps .pm-g-approved, .pm-g-approved { background: var(--accent-sage); fill: var(--accent-sage); }
.pm-apps .pm-dot--refused, .pm-apps .pm-g-refused, .pm-g-refused { background: var(--accent-plum); fill: var(--accent-plum); }
.pm-apps .pm-dot--pending { background: var(--accent-ochre); }
.pm-apps .pm-dot--withdrawn, .pm-apps .pm-g-other, .pm-g-other { background: var(--text-muted); fill: var(--text-muted); }
.pm-apps .pm-dot--expired { background: var(--text-secondary); }
.pm-chip-label { display: inline-flex; align-items: center; }
.pd-tag.pm-dec--approved { background: rgba(78, 124, 89, 0.14); color: #3c5f47; }
.pd-tag.pm-dec--refused { background: rgba(122, 53, 74, 0.12); color: var(--accent-plum); }
.pd-tag.pm-dec--pending { background: rgba(192, 112, 24, 0.14); color: var(--accent-ochre); }
.pd-tag.pm-dec--withdrawn, .pd-tag.pm-dec--expired { background: var(--bg-paper-2); color: var(--text-secondary); }
.pm-apps-tools { margin-top: 4px; }
.pm-apps-tools[hidden], .pm-apps-form[hidden], .pm-apps-save[hidden] { display: none; }
.pm-apps-filters, .pm-apps-saved { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.pm-apps-filter { display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 10px; border: 1px solid var(--card-border); border-radius: 8px; background: var(--bg-paper); font-size: 0.78rem; color: var(--text-primary); }
.pm-apps-filter-text, .pm-apps-saved-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.pm-apps-saved-name { background: none; border: 0; padding: 0; text-align: left; font: inherit; color: var(--accent-terracotta); font-weight: 600; cursor: pointer; }
.pm-apps-saved-name:hover { text-decoration: underline; }
.pm-apps-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 0; border-radius: 6px; background: transparent; color: var(--text-secondary); cursor: pointer; padding: 0; }
.pm-apps-icon:hover { background: var(--bg-paper-2); color: var(--accent-terracotta); }
.pm-apps-saved-name:focus-visible, .pm-apps-icon:focus-visible, .pm-apps-item:focus-visible { outline: 2px solid var(--accent-ochre); outline-offset: 2px; }
.pm-apps-form, .pm-apps-save { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding: 8px; border: 1px solid var(--card-border); border-radius: 8px; background: var(--bg-paper); }
.pm-apps-inputs { display: flex; align-items: center; gap: 6px; }
.pm-apps-input { flex: 1 1 0; min-width: 0; padding: 6px 8px; border: 1px solid var(--card-border); border-radius: 8px; background: var(--card-bg); color: var(--text-primary); font: inherit; font-size: 0.8rem; }
.pm-apps-input:focus { outline: 2px solid var(--accent-ochre); outline-offset: 1px; }
.pm-apps-to { flex: none; font-size: 0.74rem; color: var(--text-muted); }
.pm-apps-row, .pm-apps-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pm-apps-form .pm-apps-row, .pm-apps-save .pm-apps-row { margin-top: 0; }
.pm-apps-actions .pm-btn.is-on, .pm-apps-row .pm-btn.is-on { background: var(--accent-terracotta); color: #fff; }
.pm-apps-count { margin-top: 10px; font-size: 0.82rem; font-weight: 700; color: var(--text-secondary); }
.pm-apps-view { margin-top: 6px; }
.pm-apps-list { display: flex; flex-direction: column; max-height: 240px; overflow-y: auto; border: 1px solid var(--card-border); border-radius: 8px; background: var(--bg-paper); }
.pm-apps-item { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 6px 8px; border: 0; border-bottom: 1px solid var(--card-border); background: transparent; text-align: left; font: inherit; cursor: pointer; }
.pm-apps-item:last-child { border-bottom: 0; }
.pm-apps-item:hover { background: var(--bg-paper-2); }
.pm-apps-item-name { display: flex; align-items: center; font-size: 0.8rem; font-weight: 600; color: var(--text-primary); }
.pm-apps-item-meta { padding-left: 18px; font-size: 0.72rem; color: var(--text-muted); }
.pm-apps-empty { padding: 6px 2px; font-size: 0.76rem; color: var(--text-muted); }
.pm-graph { display: block; width: 100%; height: auto; margin-top: 8px; }
.pm-g-grid { stroke: var(--card-border); stroke-width: 1; }
.pm-g-axis { font: 9px var(--font-sans); fill: var(--text-muted); }
.pm-g-key { display: flex; gap: 12px; margin-top: 4px; font-size: 0.72rem; color: var(--text-secondary); }
.pm-g-key > span { display: inline-flex; align-items: center; }

/* ============ site report page (report.html): layout only, existing tokens and components, no new colour ============ */
.rp-wrap { max-width: 1400px; margin: 0 auto; padding: 0 28px 20px; scroll-margin-top: 70px; }
.rp-search-row { display: flex; gap: 10px; align-items: center; margin-top: 14px; max-width: 920px; }
.rp-status { min-height: 1.3em; margin: 8px 0; font-size: 0.85rem; color: var(--text-secondary); }
.rp-cands { display: flex; flex-direction: column; gap: 2px; max-width: 920px; }
.rp-head { margin-top: 12px; }
.rp-title { font-family: var(--font-serif); font-size: 1.5rem; margin: 6px 0 4px; }
.rp-line { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; margin-top: 3px; }
.rp-radius { font-size: 0.78rem; font-weight: 700; color: var(--text-muted); }
.rp-num { width: 90px; padding: 5px 8px; border: 1px solid var(--card-border); border-radius: 8px; background: var(--card-bg); font: inherit; font-size: 0.82rem; }
.rp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 16px; align-items: start; margin-top: 12px; }
.rp-side { position: sticky; top: 74px; }
.rp-map { height: 420px; min-height: 320px; }
.rp-side .pm-legend { flex-direction: column; align-items: flex-start; gap: 5px; }
.rp-key-title { font-weight: 700; }
.rp-swatch { flex: none; }
.rp-topic-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--font-serif); font-size: 1.1rem; margin: 0 0 6px; }
.rp-facts { margin: 0; padding-left: 18px; font-size: 0.85rem; line-height: 1.55; color: var(--text-primary); }
.rp-fact + .rp-fact { margin-top: 3px; }
.rp-rule { font-size: 0.78rem; color: var(--text-muted); margin: 0 0 6px; }
.rp-src { font-size: 0.74rem; color: var(--accent-terracotta); margin-left: 4px; }
.rp-ref { font-size: 0.74rem; color: var(--text-muted); margin-left: 4px; overflow-wrap: anywhere; }
.rp-check { margin-top: 12px; }
.rp-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--card-border); font-size: 0.74rem; color: var(--text-muted); line-height: 1.6; }
.rp-select { padding: 8px 10px; border: 1px solid var(--card-border); border-radius: 10px; background: var(--card-bg); color: var(--text-primary); font: inherit; font-size: 0.82rem; }
.rp-cell-state { display: block; font-size: 0.68rem; color: var(--text-muted); margin-top: 2px; }
.rp-name a { color: var(--accent-terracotta); font-weight: 700; }
.rp-rank th { overflow-wrap: normal; min-width: 92px; }
.rp-rank .pd-tag { white-space: nowrap; }
@media (max-width: 900px) {
  .rp-grid { grid-template-columns: 1fr; }
  .rp-side { position: static; }
  .rp-wrap { padding: 0 16px 20px; }
}


/* ---- Version 3.0 draft: phones (asked for 2026-10-13: "not really good design and not good navigating" on a phone). Below 700 px the floating panels become bottom sheets, the map takes the whole screen
   (the old 60vh rule left half of it blank), touch targets are 44 px and the three buttons along the bottom edge do not overlap. Page tokens only; desktop is unchanged. ---- */
@media (max-width: 700px) {
  .pd-global-nav { padding: 6px 14px; gap: 6px; }
  .pd-nav-links a { padding: 8px 14px; font-size: 0.86rem; }
  .pm-stage { height: calc(100vh - var(--nav-h, 47px)); height: calc(100dvh - var(--nav-h, 47px)); min-height: 0; }
  .pm-stage .pm-map { height: auto; min-height: 0; }

  /* the layers: a bottom sheet that opens from a "Layers" button, and a close button on the sheet */
  .pm-panel { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 64vh; max-height: 64dvh; border-radius: 16px 16px 0 0; z-index: 8; box-shadow: 0 -4px 20px rgba(38, 26, 20, 0.22); padding-bottom: env(safe-area-inset-bottom); }
  .pm-panel-body { padding: 6px 16px 18px; overscroll-behavior: contain; }
  .pm-panel-toggle { top: 6px; right: 8px; width: 44px; height: 44px; font-size: 1.4rem; }
  .pm-panel-toggle::before { content: "\00D7"; font-size: 1.7rem; line-height: 1; }
  .pm-panel .pd-controls-row { padding-right: 52px; padding-top: 6px; }
  .pm-panel .pd-search { padding: 12px 14px; font-size: 16px; border-radius: 10px; }
  .pm-panel .pd-chip { padding: 12px 4px; font-size: 0.98rem; }
  .pm-panel .pm-group-name { padding: 14px 0; font-size: 1rem; }
  .pm-panel.is-collapsed { left: 12px; right: auto; bottom: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: auto; max-height: none; border-radius: 980px; box-shadow: 0 2px 12px rgba(38, 26, 20, 0.28); padding-bottom: 0; }
  .pm-panel.is-collapsed .pm-panel-toggle { position: static; width: auto; height: 46px; margin: 0; padding: 0 20px; border: 0; border-radius: 980px; background: var(--card-bg); font: 700 0.95rem var(--font-sans); color: var(--text-primary); }
  .pm-panel.is-collapsed .pm-panel-toggle::before { content: "Layers"; font: inherit; }

  /* a clicked object: a bottom sheet over the map, with its Close button always in reach */
  .pm-side { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 62vh; max-height: 62dvh; border-radius: 16px 16px 0 0; z-index: 9; padding: 10px 16px calc(16px + env(safe-area-inset-bottom)); overscroll-behavior: contain; }
  .pm-side .pm-back, .pm-side button[class*="close"], .pm-side .pd-back { min-height: 44px; }

  /* the three buttons along the bottom edge: Layers (left), Legend (beside it), base map (right) */
  .pm-keybox { left: 112px; right: auto; bottom: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: auto; max-width: calc(100vw - 112px - 84px); z-index: 7; }
  .pm-keybox-toggle { min-height: 46px; padding: 0 16px; border-radius: 980px; gap: 12px; justify-content: center; }
  .pm-keybox:has(.pm-keybox-toggle[aria-expanded="true"]) { left: 12px; right: 12px; max-width: none; bottom: 70px; border-radius: 14px; }
  .pm-keybox-body { max-height: 46vh; max-height: 46dvh; }
  .pm-basemaps { right: 12px; bottom: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 7; }
  .pm-bm-toggle { width: 62px; }
  .pm-bm-toggle .pm-bm-thumb { height: 34px; }
  .pm-bm-tray { position: absolute; right: 0; bottom: 74px; max-width: calc(100vw - 24px); }
  .pm-bm { width: 78px; }
  .pm-panel:not(.is-collapsed) ~ .pm-keybox, .pm-panel:not(.is-collapsed) ~ .pm-basemaps { visibility: hidden; }      /* under the open sheet */
  .maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right { margin-bottom: 70px; }

  /* the full-screen detail and the report and review pages */
  .pd-detail-panel { padding: 12px 16px 60px; }
  .pd-detail-photos img { max-width: 100%; height: auto; }
  .pd-detail-panel h2 { font-size: 1.35rem; }
  .pm-banner { padding: 8px 14px; font-size: 0.8rem; text-align: left; }
  .rp-wrap { padding: 0 14px 28px; }
  .rp-wrap input, .rp-wrap select { font-size: 16px; min-height: 44px; }
}

/* The map search's results (2026-10-13): a short list under the search box. Page tokens only. */
.pm-results { margin: 6px 0 4px; border: 1px solid var(--card-border); border-radius: 10px; background: var(--card-bg); max-height: 260px; overflow-y: auto; }
.pm-result-head { padding: 7px 12px 3px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.pm-result { display: flex; flex-direction: column; gap: 1px; width: 100%; padding: 8px 12px; border: 0; border-top: 1px solid var(--card-border); background: transparent; text-align: left; font: inherit; cursor: pointer; color: var(--text-primary); }
.pm-result:first-of-type { border-top: 0; }
.pm-result:hover, .pm-result:focus-visible { background: var(--bg-paper); outline: none; }
.pm-result strong { font-size: 0.86rem; }
.pm-result span { font-size: 0.75rem; color: var(--text-secondary); }
.pm-result-none { padding: 10px 12px; font-size: 0.82rem; color: var(--text-secondary); }
@media (max-width: 700px) { .pm-result { padding: 12px 14px; } .pm-results { max-height: 36vh; } }

/* The NESO queue group (prototype 2026-10-14): the same dots as the map draws. */
.pm-dot--q2, .pm-apps .pm-dot--q2 { background: #2F7D4F; }
.pm-dot--q1, .pm-apps .pm-dot--q1 { background: #C85A32; }
.pm-dot--q0, .pm-apps .pm-dot--q0 { background: #A99B8E; }
.pm-dot--qB, .pm-apps .pm-dot--qB { background: #4A3A2E; }
.pm-obj .pm-dot { margin-right: 8px; }
.pm-apps-sub { font-size: 0.74rem; color: var(--text-muted); margin-top: 2px; }
.pm-item--queue { border: 1px solid var(--card-border); border-radius: 8px; padding: 6px 10px; margin-top: 6px; background: var(--bg-paper); }
.pm-item--queue > summary { cursor: pointer; font-weight: 600; font-size: 0.84rem; }
.pm-item--queue .pm-item-meta { margin: 2px 0 4px 18px; }

/* 2026-10-14: the footer shows only while a layer credit is written in it, so the map is the whole screen. */
.pd-footer:has(#pm-constraint-credits[hidden]) { display: none; }

/* 2026-10-14: on a desktop the Legend is a small round icon at the top right of the map, left of the zoom buttons (and left of an open object card); its key opens below it. A phone keeps the rules above. */
.pm-keybox-icon { display: none; }
@media (min-width: 701px) {
  .pm-keybox { top: 12px; right: 54px; bottom: auto; width: auto; max-width: none; background: transparent; border: 0; box-shadow: none; }
  .pm-keybox-toggle { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 50%; background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: 0 2px 10px rgba(38, 26, 20, 0.22); }
  .pm-keybox-toggle::after { content: none; }
  .pm-keybox-toggle[aria-expanded="true"] { color: var(--accent-terracotta); border-color: var(--accent-terracotta); }
  .pm-keybox-icon { display: block; }
  .pm-keybox-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pm-keybox-body { position: absolute; top: 44px; right: 0; width: 360px; max-width: calc(100vw - 96px); max-height: calc(100vh - var(--nav-h, 47px) - 96px); background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; box-shadow: 0 2px 14px rgba(38, 26, 20, 0.22); padding: 0 12px 10px; }
  .pm-stage:has(.pm-side.is-object) .pm-keybox { right: 404px; }
}