/* 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;          /* unchanged: also the colour of the withdrawn decision dot (map.js DECISION_COLOUR), one colour on the map, rows, list, graph and card */
  --text-caption: #7A6555;          /* the same brown as the colour of small CAPTION text: darker, so it reads at 4.5:1 on cream and on the darker paper */
  --accent-terracotta: #C05630;
  --accent-ochre: #C07018;
  --accent-terracotta-text: #A74B2A;          /* terracotta as the colour of TEXT (links, ghost buttons, tags): darker than the fill, so it reads at 4.5:1 on cream and on its own tint */
  --accent-ochre-text: #8A5011;
  --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; }
.pm-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }          /* text for screen readers only (2026-10-30): the page looks as before */
.pm-skip { position: absolute; left: 8px; top: -100px; z-index: 100; padding: 8px 14px; background: var(--card-bg); color: var(--text-primary); border: 2px solid var(--accent-ochre); border-radius: 8px; font-family: var(--font-sans); font-size: 0.95rem; }
.pm-skip:focus { top: 8px; }          /* the "Skip to ..." link shows only while the keyboard is on it */
main:focus { outline: none; }          /* <main> is the target of that link, not a control */
.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-caption); }

/* ---- 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-caption); }
.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-text); }
.pd-tag--featured { background: rgba(192, 112, 24, 0.14); color: var(--accent-ochre-text); 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-caption); }
.pd-card-source { font-size: 0.74rem; color: var(--text-caption); margin-top: 7px; }
.pd-empty { text-align: center; color: var(--text-caption); 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-text); 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-text); 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-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--card-border); margin: 4px 0 14px; }
.pd-tab { background: none; border: none; border-bottom: 3px solid transparent; padding: 8px 12px; font: inherit; font-weight: 700; font-size: 0.88rem; color: var(--text-caption); cursor: pointer; }
.pd-tab[aria-selected="true"] { color: var(--accent-terracotta-text); border-bottom-color: var(--accent-terracotta); }
.pd-history-note { font-size: 0.82rem; color: var(--text-secondary); background: var(--bg-paper-2); border-radius: 10px; padding: 10px 12px; margin: 0 0 14px; line-height: 1.5; }
.pd-timeline { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--card-border); }
.pd-event { margin: 0 0 6px; padding: 0 0 8px 12px; }
.pd-event h3 { margin: 4px 0 6px; }
.pd-evidence { list-style: none; margin: 8px 0 0; padding: 0; font-size: 0.78rem; color: var(--text-caption); line-height: 1.5; }
.pd-evidence li { margin: 3px 0; overflow-wrap: anywhere; }
.pd-evidence a { color: var(--accent-terracotta-text); }
.pd-grounds { margin: 4px 0 10px; padding-left: 20px; font-size: 0.88rem; color: var(--text-secondary); line-height: 1.5; }
.pd-values { list-style: none; margin: 6px 0 8px; padding: 0; }
.pd-values li { margin: 0 0 8px; padding: 6px 0 6px 10px; border-left: 3px solid var(--card-border); font-size: 0.95rem; }
.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-caption); 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-text); }
.pd-detail-links { font-size: 0.78rem; color: var(--text-caption); margin-top: 6px; }
.pd-detail-note { font-size: 0.76rem; color: var(--text-caption); 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-caption); }

/* ---- footer ---- */
.pd-footer { max-width: 1400px; margin: 0 auto; padding: 20px 28px 40px; font-size: 0.78rem; color: var(--text-caption); 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-text); }
.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-caption); 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-caption); 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-text); }
.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-caption); margin-bottom: 8px; }
.pm-item-meta a, .pm-cand-info a, .pm-history a { color: var(--accent-terracotta-text); }
.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-caption); 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-caption); 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-caption); }

/* ============ 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-caption); margin-bottom: 6px; }
.pm-obj-loading { padding: 20px 4px; font-size: 0.85rem; color: var(--text-caption); }
.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-text); }
.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-text); }

.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-caption); }
.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-text); }
.pm-dc-details { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--card-border); }
.pm-dc-details h3 { font-size: 0.95rem; margin: 0 0 4px; }
.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-caption); font-style: italic; line-height: 1.5; }
.pm-links { font-size: 0.78rem; line-height: 1.6; }
.pm-item[hidden], details.pm-section[hidden] { display: none; }
.pm-tabs { display: flex; gap: 4px; margin: 8px 0 12px; border-bottom: 1px solid var(--card-border); }
.pm-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 6px 10px; margin-bottom: -1px; font: inherit; font-size: 0.82rem; font-weight: 700; color: var(--text-caption); cursor: pointer; }
.pm-tab.is-active { color: var(--accent-terracotta-text); border-bottom-color: var(--accent-terracotta); }
.pm-tab-content > * + * { margin-top: 10px; }
.pm-facts { margin: 0; padding: 0; list-style: none; }
.pm-facts li { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5; padding: 4px 0; border-top: 1px solid var(--card-border); }
.pm-facts li:first-child { border-top: 0; }
.pm-fact-src { font-size: 0.72rem; color: var(--accent-terracotta-text); margin-left: 2px; }
.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-caption); font-weight: 600; }

.pm-bars-title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-caption); 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); }
/* Green Cat Renewables' score colours for the considered risk of a consideration (Near this point, 2026-10-16) */
.pm-item.tone-risk-0, .pm-item.tone-risk-1 { border-left-color: #00B050; }
.pm-item.tone-risk-2 { border-left-color: #FFC000; }
.pm-item.tone-risk-3 { border-left-color: #FF0000; }
.pm-item.tone-risk-4 { border-left-color: #262626; }
.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-text); }
.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-caption); 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-caption); 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 .pm-discussions { margin-top: 6px; }
.pm-panel .pd-chip.is-locked { cursor: not-allowed; color: var(--text-caption); }
.pm-panel .pd-chip.is-locked::after { content: "\1F512"; width: auto; height: auto; background: none; border-radius: 0; font-size: 0.85rem; }
.pm-panel .pm-group-name .pm-lock-mark { margin-left: 4px; font-size: 0.85rem; }          /* 2026-10-27 (owner): the Local development plans heading shows the lock for a visitor without a permit (its arrow stays) */
.pm-panel .pm-lock-note { margin: 2px 4px 6px; padding: 6px 8px; font-size: 0.78rem; line-height: 1.35; color: var(--text-secondary); background: var(--bg-paper); border-radius: 6px; }
.pm-panel .pm-lock-note[hidden] { display: none; }
.pm-panel .pm-lock-note > .pm-btn { display: block; margin-top: 6px; }
.pm-panel .pm-lock-form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.pm-panel .pm-lock-form[hidden] { display: none; }
.pm-panel .pm-lock-form input, .pm-panel .pm-lock-form textarea { font: inherit; font-size: 0.78rem; padding: 5px 7px; border: 1px solid var(--card-border); border-radius: 6px; background: #fff; color: var(--text-primary, inherit); }
.pm-panel .pm-lock-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.pm-panel .pm-lock-privacy, .pm-panel .pm-lock-msg { font-size: 0.72rem; color: var(--text-caption); }
.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-map .maplibregl-ctrl-attrib-button { top: auto; bottom: 0; }          /* the credit "i" at the foot of the open two-line credit box, so the base map button never covers part of it (touch target 24 x 24) */
.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-caption); }
.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-offshore-farm { background: #0B4F8A; box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px rgba(11, 79, 138, 0.35); }      /* 2026-10-23: the offshore wind farm mark: the same blue dot in a halo as the map draws */
.pm-key-marker.is-cluster { width: 18px; height: 18px; }
.pm-key-ramp { display: inline-block; flex: none; width: 64px; height: 8px; border-radius: 2px; background: linear-gradient(to right, #FFFCFA, #FDE0D0, #FC9272, #CB181D, #67000D); }      /* the wind speed ramp of pipeline/wind_pilot.py RAMP, light red (4 m/s) to dark red (14 m/s) */

/* 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="wind_off"], .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="wind_off"]::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: #43A047; }      /* 2026-10-23 (owner): onshore wind is a green dot; the map's dots use OVERVIEW_COLOUR in app/static/js/map.js */
.pm-panel .pd-chip[data-layer="wind_off"]::before { background: #0B4F8A; box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px #0B4F8A; }      /* 2026-10-22: a dot in a ring, as the offshore farms are drawn on the map */
.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: #2E7D32; border: 2.5px solid #2E7D32; }      /* 2026-10-23 (owner): Under construction is green in the panel buttons */          /* 2026-10-22: under construction is gold, planned is silver */
.pm-panel .pd-chip[data-stage="planning"]::before { background: #D32F2F; border: 2.5px solid #D32F2F; }      /* 2026-10-23 (owner): In planning is red in the panel buttons */
.pm-panel .pd-chip[data-stage="not_proceeding"]::before { background: #D8D2C8; border: 2.5px solid #6B6B6B; }
.pm-stages-head { font-size: 0.74rem; color: var(--text-caption); margin: 10px 0 4px; }      /* 2026-10-23 (owner): names the three stage rows below, which are projects, not Scottish data centres */
.pm-panel .pd-chip[data-layer="wind_on"]::after, .pm-panel .pd-chip[data-layer="wind_off"]::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-text); 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-text); }
.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-caption); }
.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-caption); }
.pm-apps-empty { padding: 6px 2px; font-size: 0.76rem; color: var(--text-caption); }
.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-caption); }
.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-caption); }
.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) minmax(420px, 46%); gap: 16px; align-items: start; margin-top: 12px; }
.rp-side { position: sticky; top: 74px; }
.rp-map { height: 68vh; min-height: 420px; }        /* 2026-10-21: the footer under the report is gone and the map takes the room (it was 420 px) */
.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-caption); margin: 0 0 6px; }
.rp-src { font-size: 0.74rem; color: var(--accent-terracotta-text); margin-left: 4px; }
.rp-ref { font-size: 0.74rem; color: var(--text-caption); margin-left: 4px; overflow-wrap: anywhere; }
.rp-check { margin-top: 12px; }
@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-caption); }
.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-caption); 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: 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-text); 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; }
}

/* Wind pilot (internal, 2026-10-20; only with ?pilot=wind): the number of a clicked cell, nothing else */
.wp-tag { position: absolute; z-index: 6; transform: translate(-50%, calc(-100% - 8px)); background: #fff; color: #000; border: 1px solid #000; border-radius: 4px; padding: 2px 7px; font-size: 14px; font-weight: 700; pointer-events: none; white-space: nowrap; }

/* 2026-10-23 option B: the Scottish data-centre chips sit under the Data centres switch and the Data centres switch turns them on. 2026-10-25 (owner): a group inside Energy and grid looks like any other
   group (same heading size, rule above, no indent and no side bar): .pm-acc-sub carries no style of its own. */

/* ---- 2026-10-25 (owner): the header bar stays visible all the time on the map page (it had been a 5 px strip that opened on hover, 2026-10-24). The map starts below it: --nav-h is the bar's height,
   so the stage height formulas above keep the map exactly the rest of the screen and nothing is covered. The bar keeps the terracotta line the strip had. ---- */
body.pm-map-page { --nav-h: 51px; }
body.pm-map-page .pd-global-nav { position: sticky; top: 0; z-index: 60; border-bottom: 5px solid var(--accent-terracotta); }

/* 2026-10-25: shareable map links (share.js): a round "Copy a link" button beside the Legend icon, and a short confirmation under it. Colours are the page's own tokens.
   When the "Report a problem" button (notes) is also on the page it takes this place and this button moves one step left: right 138px on a desktop, 100px on a phone. */
.pm-sharebtn { position: absolute; top: 12px; right: 138px; z-index: 4; width: 36px; height: 36px; padding: 0; display: flex; align-items: center; 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); color: var(--text-primary); cursor: pointer; }
.pm-sharebtn[hidden] { display: none; }
.pm-sharebtn:focus-visible { outline: 2px solid var(--accent-ochre); outline-offset: 2px; }
.pm-stage:has(.pm-side.is-object) .pm-sharebtn { right: 488px; }
.pm-sharetoast { position: absolute; top: 19px; right: 224px; z-index: 6; max-width: 70vw; padding: 5px 12px; border-radius: 8px; background: var(--text-primary); color: #fff; font: 600 0.8rem var(--font-sans); opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.pm-sharetoast.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .pm-sharetoast { transition: none; } }
@media (max-width: 700px) {
  .pm-sharebtn { right: 100px; width: 40px; height: 40px; z-index: 7; }
  .pm-stage:has(.pm-side.is-object) .pm-sharebtn { right: 100px; }
  .pm-sharetoast { top: 22px; right: 196px; z-index: 8; }
}

/* 2026-10-31: the weather button (weather.js), one step left of the share button, and its panel with the wind / solar switches, the hour slider and Play. Colours are the page's own tokens. */
.pm-weatherbtn { position: absolute; top: 12px; right: 180px; z-index: 4; width: 36px; height: 36px; padding: 0; display: flex; align-items: center; 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); color: var(--text-primary); cursor: pointer; }
.pm-weatherbtn.is-on, .pm-weatherbtn[aria-expanded="true"] { color: var(--accent-terracotta-text); border-color: var(--accent-terracotta); }
.pm-weatherbtn:focus-visible, .pm-weather-x:focus-visible { outline: 2px solid var(--accent-ochre); outline-offset: 2px; }
.pm-stage:has(.pm-side.is-object) .pm-weatherbtn { right: 530px; }
.pm-weatherpop { position: absolute; top: 56px; right: 54px; z-index: 6; width: 320px; max-width: calc(100vw - 24px); box-sizing: border-box; padding: 10px 12px 12px; 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-weatherpop[hidden] { display: none; }
.pm-stage:has(.pm-side.is-object) .pm-weatherpop { right: 404px; }
.pm-weather-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font: 700 0.9rem var(--font-sans); color: var(--text-primary); }
.pm-weather-x { border: 0; background: transparent; font-size: 1.5rem; line-height: 1; color: var(--text-caption); cursor: pointer; min-width: 32px; min-height: 32px; }
.pm-weatherpop input[type="range"] { width: 100%; }
.pm-weatherclock { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 8px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 980px; box-shadow: 0 2px 10px rgba(38, 26, 20, 0.22); color: var(--text-primary); pointer-events: none; }
.pm-weatherclock[hidden] { display: none; }
.pm-clock-face { fill: #fff; stroke: var(--text-primary); stroke-width: 1.6; }
.pm-clock-tick { stroke: var(--text-caption); stroke-width: 1; }
.pm-clock-tick-big { stroke: var(--text-primary); stroke-width: 1.6; }
.pm-clock-hand { stroke: var(--text-primary); stroke-linecap: round; }
.pm-clock-hour { stroke-width: 2.6; }
.pm-clock-min { stroke-width: 1.6; }
.pm-clock-pin { fill: var(--accent-terracotta); }
.pm-clock-text { display: flex; flex-direction: column; line-height: 1.15; font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.pm-clock-day { font-size: 0.78rem; color: var(--text-caption); }
.pm-clock-time { font-size: 1.05rem; font-weight: 700; }
.pm-clock-ahead { font-size: 0.72rem; color: var(--text-caption); }
@media (max-width: 700px) {
  .pm-weatherbtn { right: 148px; width: 40px; height: 40px; z-index: 7; }
  .pm-stage:has(.pm-side.is-object) .pm-weatherbtn { right: 148px; }
  .pm-weatherclock { top: auto; bottom: 76px; z-index: 7; }
  .pm-weatherpop { top: 148px; right: 12px; z-index: 8; }          /* under the zoom buttons */
  .pm-stage:has(.pm-side.is-object) .pm-weatherpop { right: 12px; }
}

/* 2026-10-25: "Report a problem" notes (notes.js), modelled on OpenStreetMap's New Note panel. Colours are the page's own tokens. */
.pm-notebtn { position: absolute; top: 12px; right: 96px; z-index: 4; width: 36px; height: 36px; padding: 0; display: flex; align-items: center; 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); color: var(--text-primary); cursor: pointer; }
.pm-notebtn[hidden] { display: none; }
.pm-notebtn[aria-pressed="true"] { color: var(--accent-terracotta-text); border-color: var(--accent-terracotta); }
.pm-notebtn:focus-visible, .pm-note-add:focus-visible, .pm-note-x:focus-visible, .pm-note-link:focus-visible, .pm-note-text:focus-visible { outline: 2px solid var(--accent-ochre); outline-offset: 2px; }
.pm-stage:has(.pm-side.is-object) .pm-notebtn { right: 446px; }
.pm-note-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.pm-note-title { margin: 0; font-family: var(--font-serif); font-size: 1.5rem; color: var(--text-primary); }
.pm-note-x { border: 0; background: transparent; font-size: 1.6rem; line-height: 1; color: var(--text-caption); cursor: pointer; min-width: 36px; min-height: 36px; }
.pm-note-box { margin: 10px 0; padding: 10px 12px; border-radius: 8px; font-size: 0.86rem; line-height: 1.4; color: var(--text-primary); }
.pm-note-info { background: rgba(78, 124, 89, 0.12); border: 1px solid rgba(78, 124, 89, 0.35); }
.pm-note-warn { background: rgba(192, 112, 24, 0.12); border: 1px solid rgba(192, 112, 24, 0.4); }
.pm-note-ok { background: rgba(78, 124, 89, 0.12); border: 1px solid rgba(78, 124, 89, 0.35); }
.pm-note-link { border: 0; padding: 0; background: none; font: inherit; color: var(--accent-terracotta-text); text-decoration: underline; cursor: pointer; }
.pm-note-point { margin: 6px 0; font-size: 0.78rem; color: var(--text-caption); font-variant-numeric: tabular-nums; }
.pm-note-text { display: block; width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--card-border); border-radius: 8px; background: #fff; font: 0.92rem/1.4 var(--font-sans); color: var(--text-primary); resize: vertical; }
.pm-note-count { margin: 4px 2px 0; text-align: right; font-size: 0.72rem; color: var(--text-caption); font-variant-numeric: tabular-nums; }
.pm-note-add { margin-top: 10px; padding: 9px 18px; border: 0; border-radius: 8px; background: var(--accent-terracotta); color: #fff; font: 700 0.9rem var(--font-sans); cursor: pointer; min-height: 40px; }
.pm-note-add:disabled { opacity: 0.45; cursor: default; }
.pm-note-msg { min-height: 1.2em; margin: 6px 0 0; font-size: 0.84rem; color: var(--accent-plum); }
.pm-note-small, .pm-note-meta { margin: 10px 0 0; font-size: 0.76rem; color: var(--text-caption); }
.pm-note-thanks { font-size: 0.95rem; }
.pm-note-item { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--card-border); border-radius: 8px; background: var(--bg-paper); }
.pm-note-body, .pm-note-reply { margin: 6px 0 0; font-size: 0.88rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.pm-note-reply { padding-left: 10px; border-left: 3px solid var(--accent-sage); }
.pm-note-status { display: inline-block; padding: 1px 8px; border-radius: 980px; background: rgba(192, 112, 24, 0.14); color: var(--accent-ochre); font-weight: 700; text-transform: capitalize; }
.pm-note-status--answered { background: rgba(78, 124, 89, 0.16); color: var(--accent-sage); }
.pm-note-status--closed { background: rgba(140, 116, 98, 0.18); color: var(--text-caption); }
.pm-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
@media (max-width: 700px) {
  .pm-notebtn { right: 54px; width: 40px; height: 40px; z-index: 7; }
  .pm-stage:has(.pm-side.is-object) .pm-notebtn { right: 54px; }
  .pm-side.is-note { max-height: 56vh; max-height: 56dvh; }
  .pm-note-text { height: 84px; }                                  /* a short box on a phone so the Add note button stays in view above the keyboard-free sheet */
  .pm-note-box { margin: 6px 0; padding: 8px 10px; }
}

/* 2026-10-25 (owner): the description that opens when the report's map is clicked. Colours are the page's own tokens. */
.rp-pop { font: 0.82rem/1.4 var(--font-sans); color: var(--text-primary); }
.rp-pop ul { margin: 4px 0 8px; padding-left: 16px; }
.rp-pop p { margin: 4px 0 8px; color: var(--text-caption); }
#rp-map .maplibregl-popup { z-index: 5; }          /* above the map's credit line, so the New report here button is never behind it */

/* 2026-10-25 (owner): the choose-a-point map under the search box, and the numbered markers of a search. Colours are the page's own tokens. */
.rp-pick { margin-top: 14px; max-width: 920px; }
.rp-pick-map { height: calc(100vh - 300px); min-height: 360px; }          /* the room under the search row, so the whole map is on the first screen; the page script sets the exact height (sizePick) */
.rv-num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-terracotta); color: #fff; font: 700 0.75rem var(--font-sans); }
.rp-mark { width: 28px; height: 28px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: var(--accent-terracotta); color: #fff; font: 700 0.8rem var(--font-sans); cursor: pointer; box-shadow: 0 1px 6px rgba(38, 26, 20, 0.35); }
.rp-mark:focus-visible { outline: 2px solid var(--accent-ochre); outline-offset: 2px; }
#rp-pick-map .maplibregl-popup { z-index: 5; }
@media (max-width: 700px) { .rp-pick-map { height: calc(100vh - 340px); min-height: 340px; } }

/* 2026-10-27 (owner): while no report is open the search page is the whole screen under the header bar, as on the project map: the map fills it, the search box and its list float on it
   (top left), the base map chooser sits bottom right. The header bar keeps the terracotta line of the map page. A report is an ordinary page again (the class is removed). Page tokens only. */
body.rp-fullmap { --nav-h: 51px; }
body.rp-fullmap .pd-global-nav { z-index: 60; border-bottom: 5px solid var(--accent-terracotta); }
body.rp-fullmap .pm-banner { display: none; }
body.rp-fullmap .pd-header { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }          /* the "Site report" heading stays for screen readers (2026-10-30) */
body.rp-fullmap #rp-search-view { position: relative; max-width: none; margin: 0; padding: 0; height: calc(100vh - var(--nav-h)); height: calc(100dvh - var(--nav-h)); }
body.rp-fullmap .rp-pick { position: absolute; inset: 0; margin: 0; max-width: none; }
body.rp-fullmap .rp-pick-map { position: absolute; inset: 0; height: auto; min-height: 0; border: 0; border-radius: 0; }
body.rp-fullmap .rp-float { position: absolute; top: 12px; left: 12px; z-index: 6; width: min(440px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow-y: auto; padding: 10px 12px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; box-shadow: 0 2px 14px rgba(38, 26, 20, 0.22); }
body.rp-fullmap .rp-float .rp-search-row { margin-top: 0; max-width: none; }
body.rp-fullmap .rp-float .rp-status { margin: 6px 0 0; min-height: 0; }
body.rp-fullmap .rp-float .rp-status:empty { display: none; }
body.rp-fullmap .rp-float .rp-cands { max-width: none; margin-top: 6px; }
@media (max-width: 700px) {
  body.rp-fullmap { --nav-h: 53px; }          /* the bar is 53 px tall on a phone (the Back arrow is 36 px high) */
  body.rp-fullmap .rp-float { left: 8px; width: calc(100% - 16px); max-height: 52%; }
  body.rp-fullmap .maplibregl-ctrl-bottom-right { margin-bottom: 70px; }          /* the credit "i" above the base map button, as on the project map */
  body.rp-fullmap .rp-pick .maplibregl-ctrl-top-right { margin-top: 84px; }       /* the zoom buttons below the search box */
}

/* 2026-10-27 (owner, desktop, site report page): the Back button leaves the right-hand group: it stands at the left edge of the bar, before the name, with its word ("← Back", as drawn on the
   owner's screenshot). Its 12 px bottom padding (made for the panels) is dropped here so it sits level with the name. The phone rules below turn it into an arrow. */
body.rp-page .pd-nav-links { display: contents; }
body.rp-page .pd-brand { margin-right: auto; }
body.rp-page .pd-nav-back { order: -1; padding: 0; }

/* 2026-10-27 (owner, phone, site report page): the grey notice under the header bar is deleted, and the Back button leaves the right-hand group: it stands at the left edge of the bar, before the
   name, as an arrow of its own (its word stays for screen readers). */
@media (max-width: 700px) {
  body.rp-page .pm-banner { display: none; }
  body.rp-page .pd-nav-links { display: contents; }
  body.rp-page .pd-brand { margin-right: auto; }
  body.rp-page .pd-nav-back { order: -1; position: relative; width: 36px; height: 36px; padding: 0; margin-right: -2px; font-size: 0; line-height: 0; overflow: hidden; }
  body.rp-page .pd-nav-back::before { content: "\2190"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 1.5rem var(--font-sans); line-height: 1; }
}

/* 2026-10-30 (owner, PROTOTYPE, from his screenshot of the site report page's search card): the main page search is a card of its own over the map, above the layers panel: the box and a Search button,
   the results list drops from the card. The layers panel keeps its place below the card and gets a "Layers" title row (the panel's hide button used to sit beside the search box). Page tokens only. */
.pm-searchcard { position: absolute; top: 12px; left: 12px; z-index: 6; width: 340px; box-sizing: border-box; padding: 10px 12px; 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-searchrow { display: flex; gap: 10px; align-items: center; }
.pm-searchcard .pd-search { flex: 1 1 auto; height: 40px; box-sizing: border-box; padding: 8px 14px; font-size: 0.9rem; }
.pm-searchcard .pm-btn { flex: none; }
.pm-searchcard .pm-results { position: absolute; top: 100%; left: 0; right: 0; margin: 6px 0 0; box-shadow: 0 2px 14px rgba(38, 26, 20, 0.22); }
.pm-panel-title { padding: 2px 34px 6px 4px; font: 700 0.9rem var(--font-sans); color: var(--text-primary); }
@media (min-width: 701px) {
  .pm-panel { top: 82px; max-height: calc(100% - 94px); }
}
@media (max-width: 700px) {
  .pm-searchcard { top: 8px; left: 8px; right: 8px; width: auto; z-index: 10; }
  .pm-searchcard .pd-search { font-size: 16px; }
  .pm-sharebtn, .pm-notebtn, .pm-weatherbtn { top: 76px; }
  .pm-stage .maplibregl-ctrl-top-right { margin-top: 68px; }                  /* the zoom buttons below the search card, as on the site report page */
  .pm-panel-title { padding: 10px 52px 10px 0; font-size: 1.05rem; }
}

/* (2026-10-30, owner: "it open to whole screen - hide it") on a phone the open credit box was a block as tall as the map, with the report's twenty licence lines: it is now at most about six lines, smaller type, and scrolls inside itself. The credits stay one tap away; a tap or drag on the map closes the box (report-page.js, map.js). */
@media (max-width: 700px) {
  .maplibregl-compact-show .maplibregl-ctrl-attrib-inner { max-height: 8.5em; overflow-y: auto; font-size: 12px; line-height: 1.35; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
}

/* Site report: the technology choice beside the radius and buffer boxes (release TECH1, 2026-11-01) */
select.rp-select { width: auto; min-width: 130px; }

/* Project history: share and cite buttons, and the entry a shared link points to (prototype 2026-11-01, master plan Phase 1) */
.pd-cite-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.pd-copied { font-size: 0.85rem; color: var(--accent-terracotta-text); overflow-wrap: anywhere; }
.pd-event.is-target { outline: 2px solid var(--accent-ochre); outline-offset: 4px; }

/* Objections tab: category filter chips, the count line and the summary (scale-up plan U5). A separate class from .pd-chip, which is the map panel's own switch. */
.pd-catchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 6px; }
.pd-catchip { padding: 7px 14px; border-radius: 980px; font: inherit; font-size: 0.8rem; font-weight: 600; border: 1px solid var(--card-border); background: transparent; color: var(--text-secondary); cursor: pointer; }
.pd-catchip:focus-visible { outline: 2px solid var(--accent-ochre); outline-offset: 2px; }
.pd-catchip[aria-pressed="true"] { background: var(--accent-terracotta-text); color: #fff; border-color: var(--accent-terracotta-text); }
.pd-obj-count { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); margin: 14px 0 10px; }
.pd-obj-summary { margin: 0 0 8px; }
.pd-tabs { flex-wrap: wrap; }
.pd-method-link { color: var(--accent-terracotta-text); font-weight: 600; }
.pd-date-field { white-space: nowrap; }
@media (max-width: 700px) {
  .pd-catchip, .pd-tab, .pd-cite, .pd-detail-empty .pm-btn, .pd-method-link { min-height: 44px; }
  .pd-catchip { padding: 10px 14px; }
  .pd-method-link { display: inline-flex; align-items: center; }
}

/* Method page (scale-up plan U6): a plain reading page, one column, readable at phone width */
.mp-wrap { max-width: 720px; margin: 0 auto; padding: 24px 16px 64px; line-height: 1.6; color: var(--text-primary); overflow-wrap: anywhere; }
.mp-wrap h1 { font-family: var(--font-serif); font-size: 1.7rem; margin: 8px 0 12px; }
.mp-wrap h2 { font-family: var(--font-serif); font-size: 1.15rem; margin: 26px 0 6px; color: var(--accent-plum); }
.mp-wrap p, .mp-wrap li { font-size: 0.98rem; color: var(--text-secondary); }
.mp-wrap a { color: var(--accent-terracotta-text); }
.mp-back { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.mp-lead { font-size: 1.05rem; }
.mp-key { background: var(--bg-paper-2); border-radius: 10px; padding: 10px 12px; }

/* The "Record" badge (scale-up plan U7; the record chips were removed on 2026-11-03) */
.pm-record-badge { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 980px; font-size: 0.66rem; font-weight: 700; vertical-align: middle; background: var(--accent-sage); color: #fff; }

/* Offshore lease areas (Scotland), prototype 2026-11-03 */
.pm-lease-note { margin: 4px 0 10px; font-size: 0.82rem; color: var(--text-caption); }
.pm-lease-note[hidden] { display: none; }
.pm-lease-key { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; }
.pm-lease-key-item { display: inline-flex; align-items: center; gap: 5px; }
.pm-lease-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; border: 1px solid rgba(0, 0, 0, 0.25); }
.pm-lease-pop { font-size: 0.85rem; line-height: 1.35; color: var(--text-primary); }
.pm-lease-row { display: flex; gap: 8px; }
.pm-lease-k { min-width: 74px; color: var(--text-caption); }