:root {
  --bg: #f7f8fa; --fg: #1a1d21; --muted: #6b7280; --line: #dfe3e8;
  --card: #ffffff; --accent: #1d4ed8; --danger: #b91c1c;
  --marked: #dc2626; --candidate: #d97706;
  --verified: #dc2626; --unverified-c: #d97706; --missing: #6b7280; --unverified: #7c3aed;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#11141a; --fg:#e6e8eb; --muted:#9aa3af; --line:#272c36;
          --card:#171b22; --accent:#60a5fa; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
main { max-width: 1100px; margin: 0 auto; padding: 0 1rem 3rem; }
a { color: var(--accent); }
.muted { color: var(--muted); } .small { font-size: .85rem; }

/* --- masthead: Perch, the wordmark, and the CLODE mark ------------------ */
.masthead { background:linear-gradient(135deg,#123a5e 0%,#1c5c8a 55%,#2b7fb0 100%);
  color:#f2f6fa; border-bottom:3px solid #0d2a45; }
.mast-inner { max-width:1100px; margin:0 auto; padding:.85rem 1rem;
  display:flex; align-items:center; justify-content:space-between; gap:1.2rem;
  flex-wrap:wrap; }

.mast-brand { display:flex; align-items:center; gap:.85rem;
  color:inherit; text-decoration:none; min-width:0; }
/* Pale-blue disc, not white: Perch's head is white and disappeared against a
   white halo. The tint gives her something to read against. */
.mast-perch { flex:0 0 auto; width:64px; height:64px; border-radius:50%;
  background:radial-gradient(circle at 50% 46%, #e3eef8 0%, #bcd6ea 60%,
             rgba(188,214,234,.35) 72%, rgba(188,214,234,0) 78%);
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.28)); }
.mast-words { display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.mast-title { font-size:1.45rem; font-weight:700; letter-spacing:-.02em; line-height:1.1; }
.mast-tag { font-size:.86rem; color:#bcd8ee; }
.mast-tag b { color:#ffffff; font-weight:650; }

.mast-nav { display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap; }
.mast-links { display:flex; align-items:center; gap:1rem; font-size:.92rem; }
.mast-links a, .mast-links .linkish { color:#dceaf6; text-decoration:none; }
.mast-links a:hover, .mast-links .linkish:hover { color:#fff; text-decoration:underline; }

.clode-badge { display:flex; flex-direction:column; align-items:center;
  gap:.05rem; padding:.4rem .85rem; border:1.5px solid rgba(255,255,255,.45);
  border-radius:9px; text-decoration:none; color:#fff; line-height:1.1;
  background:rgba(255,255,255,.07); transition:background .15s, border-color .15s; }
.clode-badge:hover { background:rgba(255,255,255,.18); border-color:#fff; }
.cb-kicker { font-size:.62rem; text-transform:uppercase; letter-spacing:.13em;
  color:#bcd8ee; }
.cb-name { font-size:1.02rem; font-weight:800; letter-spacing:.06em; }

@media (max-width:640px) {
  .mast-inner { padding:.7rem .8rem; gap:.7rem; }
  .mast-perch { width:52px; height:52px; }
  .mast-title { font-size:1.2rem; }
  .mast-tag { font-size:.78rem; }
  .mast-nav { width:100%; justify-content:space-between; }
}

.page-head { padding: 1.4rem 0 .8rem; }
.page-head h1 { margin:0 0 .2rem; font-size:1.6rem; letter-spacing:-.01em; }
.crumb { margin:0 0 .4rem; font-size:.9rem; }

#map { height: 560px; border:1px solid var(--line); border-radius:10px; overflow:hidden;
  background:var(--card); }
#map.map-small { height: 340px; }

/* Small dot markers with an always-on label — carried over from the original. */
.rock-marker span { display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.4); }
.rock-marker span i { font:800 10px/1 ui-sans-serif,system-ui,sans-serif;
  color:#fff; font-style:normal; }
/* SHAPE = marked or not */
.rock-marker.sh-marked span    { border-radius:50%; }
.rock-marker.sh-candidate span { border-radius:2px; transform:rotate(45deg); }
.rock-marker.sh-candidate span i { transform:rotate(-45deg); }
/* COLOUR = verified or not */
.rock-marker.vf-yes span { background:var(--verified); }
.rock-marker.vf-no  span { background:var(--unverified-c); }
.rock-marker.is-hidden span { opacity:.4; border-style:dashed; }
.rock-marker.hot span { background:#facc15; }
.rock-marker.hot span i { color:#111; }
.rock-marker.ghost span { background:#22c55e; opacity:.85; border-radius:50%; }

.map-legend { background:rgba(255,255,255,.94); padding:.45rem .6rem; border-radius:7px;
  box-shadow:0 1px 4px rgba(0,0,0,.3); font:500 11px/1.5 ui-sans-serif,system-ui,sans-serif;
  color:#1a1d21; display:flex; flex-direction:column; gap:.1rem; max-width:210px; }
.map-legend b { font-size:9.5px; text-transform:uppercase; letter-spacing:.09em;
  color:#6b7280; margin-top:.2rem; }
.map-legend b:first-child { margin-top:0; }
.map-legend span { display:flex; align-items:center; gap:.45rem; }
.map-legend .lg { display:inline-flex; align-items:center; justify-content:center;
  width:13px; height:13px; border:2px solid #fff; flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(0,0,0,.4);
  font:800 8px/1 ui-sans-serif,system-ui,sans-serif; color:#fff; font-style:normal; }
.map-legend .lg.sh-marked { border-radius:50%; }
.map-legend .lg.sh-candidate { border-radius:2px; transform:rotate(45deg); }
.map-legend .lg.vf-yes { background:#dc2626; }
.map-legend .lg.vf-no { background:#d97706; }

.map-controls { display:flex; align-items:center; gap:.5rem; margin:.7rem 0 .2rem;
  font-size:.88rem; color:var(--muted); }
.map-controls label { flex-direction:row; align-items:center; gap:.4rem;
  font-size:.88rem; cursor:pointer; }
.map-controls input { width:auto; }

.pill-hidden { background:#334155; }
.row-hidden { opacity:.55; }
.marker-label span { font:600 11px/1 ui-sans-serif,system-ui,sans-serif; color:#111;
  background:rgba(255,255,255,.82); padding:1px 4px; border-radius:3px; white-space:nowrap; }
.popup h3 { margin:0 0 .25rem; font-size:1rem; }
.popup p { margin:.15rem 0; font-size:.86rem; }
.popup .pname { font-weight:600; } .popup .ded { font-style:italic; color:#555; }

.table-wrap { margin-top:1.4rem; }
#filter { width:100%; max-width:320px; padding:.5rem .7rem; margin-bottom:.7rem;
  border:1px solid var(--line); border-radius:7px; background:var(--card); color:var(--fg); }
table { width:100%; border-collapse:collapse; background:var(--card);
  border:1px solid var(--line); border-radius:10px; overflow:hidden; font-size:.92rem; }
th,td { text-align:left; padding:.5rem .7rem; border-bottom:1px solid var(--line); }
th { font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover { background:rgba(125,125,125,.08); cursor:pointer; }
td:nth-child(3),td:nth-child(4) { font-variant-numeric:tabular-nums; }

.pill { display:inline-block; padding:.1rem .5rem; border-radius:999px;
  font-size:.75rem; font-weight:600; color:#fff; background:var(--muted); }
.pill-marked{background:var(--marked)} .pill-candidate{background:var(--candidate)}
.pill-missing{background:var(--missing)} .pill-unverified{background:var(--unverified)}

.card { margin-top:1.6rem; padding:1.1rem 1.2rem; background:var(--card);
  border:1px solid var(--line); border-radius:10px; }
.card.narrow { max-width:420px; margin-inline:auto; }
.card h2 { margin:0 0 .3rem; font-size:1.1rem; }
.grid { display:grid; gap:.7rem; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  align-items:end; margin-top:.8rem; }
label { display:flex; flex-direction:column; gap:.25rem; font-size:.85rem; color:var(--muted); }
input,select { padding:.45rem .6rem; border:1px solid var(--line); border-radius:7px;
  background:var(--bg); color:var(--fg); font:inherit; font-size:.92rem; }
button { padding:.5rem .9rem; border:0; border-radius:7px; background:var(--accent);
  color:#fff; font:inherit; font-weight:600; cursor:pointer; }
button.danger { background:var(--danger); margin-top:.8rem; }
.error { color:var(--danger); font-size:.9rem; }

.facts { display:grid; grid-template-columns:max-content 1fr; gap:.4rem 1.2rem;
  margin:1.2rem 0; padding:1.1rem 1.2rem; background:var(--card);
  border:1px solid var(--line); border-radius:10px; }
.facts dt { color:var(--muted); font-size:.85rem; }
.facts dd { margin:0; } .facts .dedication { font-style:italic; }
.lakes { list-style:none; padding:0; } .lakes li { padding:.4rem 0; }

footer { max-width:1100px; margin:0 auto; padding:1.4rem 1rem 3rem;
  border-top:1px solid var(--line); color:var(--muted); font-size:.85rem; }
footer p { margin:.3rem 0; }

.flash { position:fixed; left:50%; bottom:1.2rem; transform:translate(-50%,140%);
  background:#111827; color:#fff; padding:.6rem 1rem; border-radius:8px;
  font-size:.9rem; box-shadow:0 6px 24px rgba(0,0,0,.3); transition:transform .25s;
  z-index:1000; }
.flash.show { transform:translate(-50%,0); }
.flash.bad { background:var(--danger); }

@media (max-width:640px) {
  #map { height:400px; }
  .facts { grid-template-columns:1fr; }
  td:nth-child(5),th:nth-child(5),td:nth-child(6),th:nth-child(6) { display:none; }
}


.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px;
  padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.pill-verified { background:var(--verified); }
.pill-marked { background:var(--marked); }
label.check { flex-direction:row; align-items:center; gap:.45rem; color:var(--fg);
  font-size:.88rem; }
label.check input { width:auto; }