/* ============================================================
   Land is green, water is blue, and development parcels carry a
   warm ordinal ramp so they never read as terrain. Every colour
   token is declared on bare :root first so the un-stamped
   (system-theme) state always resolves.

   Validated with the dataviz ordinal checks:
     light  ramp #e8801f..#6b2c03 on land #d9e6d0 -> 2.15:1
     dark   ramp #9c5518..#ffc98d on land #182317 -> 2.88:1
   ============================================================ */


.plat.big,.mapbox.big{position:fixed;inset:0;z-index:9000;border:none;margin:0;
  /* dvh, because on iOS the URL bar makes vh taller than the visible area and
     the bottom of the map ends up under the browser chrome */
  height:100dvh;max-height:100dvh;width:100vw;padding:0}
/* The svg sizes off its wrapper, and one of the two map pages never gave that
   wrapper a height, so height:100% on the svg alone resolved to auto and the
   map filled only its natural aspect: about half a phone screen.

   ONLY the mount. An earlier version used .plat.big>div, which also caught
   .zoomers, .scalebar, .satnote, .maphint and .mapsheet, stretching all five
   to full height so their backgrounds covered the map with white slabs. */
.plat.big #platmount{height:100%}
.plat.big svg,.mapbox.big svg{height:100%;width:100%}
body.mapbig{overflow:hidden}
/* Sits with the zoom buttons on the map pages, and alone on the ward map. */
/* Bottom right, because the other three corners are taken: the satellite
   toggle is top left, the zoom column top right, the scale bar bottom left. */
.expander{position:absolute;z-index:2;bottom:var(--sp-3);right:var(--sp-3);
  font-family:var(--f-mono);font-size:var(--fs-xs);background:var(--sheet);
  color:var(--ink);border:1px solid var(--rule-2);padding:0 12px;min-height:34px;
  cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.expander:hover{border-color:var(--accent);color:var(--accent)}
.expander:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.big .expander{position:fixed;bottom:var(--sp-3);right:var(--sp-3)}
@media (max-width:700px){
  /* A 34px target is fine for a zoom nudge but not for the control that gets
     someone out of a fullscreen map. */
  .expander{min-height:44px;padding:0 14px}
}


@media (max-width:700px){
  .rankrow{
    grid-template-columns:26px 12px minmax(0,1fr) auto;
    grid-template-areas:
      "rk tick name name"
      "rk tick case case"
      "rk tick bar  val";
    row-gap:5px;align-items:center;padding:10px 6px;
    /* a comfortable target now that the row is a three-line block */
    min-height:44px}
  .rankrow .rk{grid-area:rk;align-self:start;padding-top:3px}
  .rankrow .tick{grid-area:tick;align-self:start;margin-top:6px}
  .rankrow .rname{grid-area:name;white-space:normal;overflow:visible;
    text-overflow:clip;line-height:1.35;font-size:var(--fs-sm)}
  .rankrow .rcase{grid-area:case;white-space:normal}
  /* the Mooresville page passes no case number, so the row would sit empty */
  .rankrow .rcase:empty{display:none}
  .rankrow .rbar{grid-area:bar;height:11px}
  .rankrow .rval{grid-area:val;text-align:right;min-width:0}
}

:root {
 /* base map -- deliberately pale so the parcels stay the loudest thing */
 --land: #eef4e6;
 --water: #b9d6ee;
 --water-ink: #3f6f99;
 --road: #ffffff;
 --road-case: #c2b49c;
 --road-ink: #6b5e49;
 --bound: #8b959c;
 /* pipeline stage, early -> built */
 --s1: #ee9633;
 --s2: #d4611a;
 --s3: #a83313;
 --s4: #661607;
 --s-x: #8a8880;
 /* Stale/selection markers ride as a dark casing under a light dash, so
 they read on every ramp step and on the land alike. */
 --mk-case: #1a1a1a;
 --mk-top: #ffffff;
 }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
 --land: #141d12;
 --water: #14293e;
 --water-ink: #7aa6cd;
 --road: #5d6670;
 --road-case: #2a3138;
 --road-ink: #aab3bc;
 --bound: #79858e;
 --s1: #8a3212;
 --s2: #c2521d;
 --s3: #ea8730;
 --s4: #ffc78f;
 --s-x: #7a7870;
 --mk-case: #000000;
 --mk-top: #ffffff;
 }
}
:root[data-theme="dark"] {
 --land: #141d12;
 --water: #14293e;
 --water-ink: #7aa6cd;
 --road: #5d6670;
 --road-case: #2a3138;
 --road-ink: #aab3bc;
 --bound: #79858e;
 --s1: #8a3212;
 --s2: #c2521d;
 --s3: #ea8730;
 --s4: #ffc78f;
 --s-x: #7a7870;
 --mk-case: #000000;
 --mk-top: #ffffff;
 }

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--f-sans); font-size: var(--fs-body); line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.sheet { max-width: var(--maxw); margin: 0 auto; padding: var(--sp-6) var(--sp-4) var(--sp-7);
  display: flex; flex-direction: column; gap: var(--sp-6); }

.hd { display: flex; flex-direction: column; gap: var(--sp-2); }
.eyebrow { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3); }
h1 { font-family: var(--f-mono); font-size: var(--fs-display); font-weight: 600;
  letter-spacing: -0.02em; margin: 0; text-wrap: balance; line-height: 1.12; }
.lede { font-size: var(--fs-lead); color: var(--ink-2); margin: 0; max-width: 62ch; }
h2 { font-family: var(--f-mono); font-size: var(--fs-h2); font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-2); margin: 0 0 var(--sp-3);
  display: flex; align-items: center; gap: var(--sp-3); }
h2::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

.titleblock { display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--rule-2); background: var(--sheet); }
@media (max-width: 900px) { .titleblock { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .titleblock { grid-template-columns: 1fr; } }
.cell { padding: var(--sp-4); border-right: 1px solid var(--rule); }
.cell:last-child { border-right: 0; }
@media (max-width: 900px) {
  .cell:nth-child(2n) { border-right: 0; }
  .cell:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
}
@media (max-width: 520px) {
  .cell { border-right: 0; border-bottom: 1px solid var(--rule); }
  .cell:last-child { border-bottom: 0; }
}
.cell .k { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--sp-2); }
.cell .v { font-family: var(--f-mono); font-size: var(--fs-fig); font-weight: 600;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.cell .u { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 2px; }
.split { margin-top: var(--sp-3); border-top: 1px solid var(--rule); padding-top: var(--sp-2); }
.srow { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs);
  color: var(--ink-2); padding: 2.5px 0; }
.srow .tick { width: 3px; height: 13px; flex: none; }
.srow .n { margin-left: auto; font-family: var(--f-mono);
  font-variant-numeric: tabular-nums; color: var(--ink); }

.controls { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end;
  border: 1px solid var(--rule-2); background: var(--sheet); padding: var(--sp-3) var(--sp-4); }
.fg { display: flex; flex-direction: column; gap: 5px; }
.fg > label, .fg > .mslabel { font-family: var(--f-mono); font-size: var(--fs-micro);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
select, input[type="search"] { font-family: var(--f-mono); font-size: var(--fs-sm);
  padding: 8px 10px; min-height: 42px; background: var(--sheet); color: var(--ink);
  border: 1px solid var(--rule-2); border-radius: 0; }
select { min-width: 196px; }
input[type="search"] { min-width: 240px; font-family: var(--f-sans); }
button { font-family: var(--f-mono); font-size: var(--fs-sm); padding: 9px 16px; min-height: 42px;
  background: var(--sheet-2); color: var(--ink); border: 1px solid var(--rule-2);
  border-radius: 0; cursor: pointer; }
button:hover { border-color: var(--accent); color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tally { margin-left: auto; font-family: var(--f-mono); font-size: var(--fs-sm);
  color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tally b { color: var(--ink); }

.mapgrid { display: grid; grid-template-columns: 1fr 268px; gap: var(--sp-4); align-items: start; }
@media (max-width: 900px) { .mapgrid { grid-template-columns: 1fr; } }
.plat { border: 1px solid var(--rule-2); background: var(--land); position: relative; overflow: hidden; }
/* touch-action none is what lets the pinch handler own two-finger gestures */
.plat svg { display: block; width: 100%; height: auto; touch-action: none; cursor: grab; }
.plat svg.drag { cursor: grabbing; }
.zoomers { position: absolute; top: var(--sp-3); right: var(--sp-3); display: flex; flex-direction: column; }
.zoomers button { width: 34px; height: 34px; padding: 0; font-size: var(--fs-body);
  line-height: 1; background: var(--sheet); margin-bottom: -1px; }
.scalebar { position: absolute; left: var(--sp-3); bottom: var(--sp-3); font-family: var(--f-mono);
  font-size: var(--fs-micro); color: var(--ink-2); background: var(--sheet);
  padding: 3px 7px; border: 1px solid var(--rule); }
.sattoggle { position: absolute; top: var(--sp-3); left: var(--sp-3); min-height: 32px;
  padding: 5px 12px; font-size: var(--fs-xs); background: var(--sheet); }
.sattoggle[aria-pressed="true"] { background: var(--ink); color: var(--sheet); border-color: var(--ink); }
.plat.sat-on { background: #1c2b22; }
.satnote { position: absolute; left: var(--sp-3); bottom: calc(var(--sp-3) + 26px);
  font-family: var(--f-mono); font-size: var(--fs-micro); color: var(--ink-3);
  background: var(--sheet); padding: 3px 7px; border: 1px solid var(--rule);
  max-width: 60%; display: none; }
.plat.sat-on .satnote { display: block; }
/* over imagery the pale schematic fills vanish, so lift the strokes */
#plat.sat .ctx-town { stroke: #ffffff; opacity: .9; stroke-width: 2; }
#plat.sat .ctx-etj, #plat.sat .ctx-ward { stroke: #ffffff; opacity: .55; }
#plat.sat .rd, #plat.sat .rd-case { display: none; }
#plat.sat .plabel { fill: #ffffff; stroke: #000000; stroke-width: 3.5; }
#plat.sat .shield { display: none; }
#plat.sat .proj { stroke: #ffffff; stroke-width: 1.1; }
.maphint { position: absolute; right: var(--sp-3); bottom: var(--sp-3); font-family: var(--f-mono);
  font-size: var(--fs-micro); color: var(--ink-3); background: var(--sheet);
  padding: 3px 7px; border: 1px solid var(--rule); }

.w-fill  { fill: var(--water); }
.rd-case { fill: none; stroke: var(--road-case); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.rd      { fill: none; stroke: var(--road); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.rd-mot.rd-case { stroke-width: 5.5; } .rd-mot.rd { stroke-width: 3.5; }
.rd-pri.rd-case { stroke-width: 3.6; } .rd-pri.rd { stroke-width: 2.1; }
.rd-sec.rd-case { stroke-width: 2.6; } .rd-sec.rd { stroke-width: 1.3; }

.ctx-town { fill: none; stroke: var(--bound); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.ctx-etj  { fill: none; stroke: var(--bound); stroke-width: 1.1; stroke-dasharray: 7 5;
  vector-effect: non-scaling-stroke; opacity: .75; }
.ctx-ward { fill: none; stroke: var(--bound); stroke-width: .8; stroke-dasharray: 2 3;
  vector-effect: non-scaling-stroke; opacity: .6; }
.ctx-ward.on { stroke: var(--accent); stroke-width: 2; stroke-dasharray: none; opacity: 1; }

.proj { stroke: var(--ink); stroke-width: .6; vector-effect: non-scaling-stroke; cursor: pointer; }
.proj:hover { stroke-width: 2.2; }
.mk { fill: none; vector-effect: non-scaling-stroke; pointer-events: none; }
.mk-case { stroke: var(--mk-case); stroke-width: 3.4; opacity: .85; }
.mk-top  { stroke: var(--mk-top);  stroke-width: 1.6; stroke-dasharray: 5 3; }
.sel-case { stroke: var(--mk-case); stroke-width: 5; opacity: .9; }
.sel-top  { stroke: var(--mk-top);  stroke-width: 2.4; }

.plabel { font-family: var(--f-sans); fill: var(--ink); stroke: var(--land); stroke-width: 3;
  paint-order: stroke; text-anchor: middle; font-size: var(--fs-xs); }
.plabel.big { font-size: var(--fs-body); font-weight: 600; letter-spacing: .04em; }
.wlabel { font-family: var(--f-sans); font-style: italic; fill: var(--water-ink);
  stroke: var(--water); stroke-width: 3; paint-order: stroke; text-anchor: middle; font-size: var(--fs-sm); }
.shield { font-family: var(--f-mono); font-size: var(--fs-micro); font-weight: 600; fill: var(--road-ink);
  stroke: var(--land); stroke-width: 3.5; paint-order: stroke; text-anchor: middle; }

.side { display: flex; flex-direction: column; gap: var(--sp-4); }
.panel { border: 1px solid var(--rule-2); background: var(--sheet); padding: var(--sp-4); }
.panel h3 { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--sp-3); font-weight: 600; }
.panel h3.sub { margin-top: var(--sp-4); }
.lrow { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm);
  padding: 3.5px 0; color: var(--ink-2); }
.lrow .tick { width: 14px; height: 14px; flex: none; border: 1px solid var(--rule-2); }
.lrow .n { margin-left: auto; font-family: var(--f-mono); font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums; color: var(--ink); }
.lrow .dashbox { width: 14px; height: 14px; flex: none; background: var(--s3);
  border: 2px dashed var(--mk-top); outline: 1px solid var(--mk-case); }
.lrow .line { width: 14px; height: 0; border-top: 3px solid var(--road);
  outline: 1px solid var(--road-case); flex: none; }

#detail .empty { font-size: var(--fs-sm); color: var(--ink-3); }
#detail dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px var(--sp-3); font-size: var(--fs-sm); }
#detail dt { color: var(--ink-3); font-size: var(--fs-xs); }
#detail dd { margin: 0; font-family: var(--f-mono); font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums; word-break: break-word; }
#detail .pname { font-size: var(--fs-body); font-weight: 600; margin: 0 0 var(--sp-1); line-height: 1.25; }
#detail .pstage { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono);
  font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-2); margin-bottom: var(--sp-3); }
#detail .pstage .tick { width: 10px; height: 10px; }
.flagline { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--flag-ink);
  background: var(--flag-bg); border: 1px solid var(--flag-bd); padding: 5px 8px; }
.news { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 3px; }
.news .newshit { font-size: var(--fs-sm); color: var(--accent); line-height: 1.35; }
.news .newssrc { font-family: var(--f-mono); font-size: var(--fs-micro); color: var(--ink-3); }
.news .newssearch { font-size: var(--fs-xs); color: var(--ink-3); margin-top: var(--sp-1); }
.news .newssearch:hover { color: var(--accent); }

.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--sp-4); }
.chart { border: 1px solid var(--rule-2); background: var(--sheet); padding: var(--sp-4); }
.chart h3 { font-size: var(--fs-body); margin: 0 0 2px; font-weight: 600; }
.chart .cap { font-size: var(--fs-xs); color: var(--ink-3); margin: 0 0 var(--sp-4); }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.axlab { fill: var(--ink-2); font-size: var(--fs-xs); font-family: var(--f-sans); }
.vallab { fill: var(--ink); font-size: var(--fs-xs); font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

.rankgrid { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--sp-4); align-items: start; }
@media (max-width: 900px) { .rankgrid { grid-template-columns: 1fr; } }
.rankcard { border: 1px solid var(--rule-2); background: var(--sheet); padding: var(--sp-4); }
.rankcard h3 { font-size: var(--fs-body); margin: 0 0 2px; font-weight: 600; }
.rankcard .cap { font-size: var(--fs-xs); color: var(--ink-3); margin: 0 0 var(--sp-3); }
.seg { display: flex; gap: -1px; margin-bottom: var(--sp-3); flex-wrap: wrap; }
.seg button { margin-right: -1px; min-height: 34px; padding: 5px 12px; font-size: var(--fs-xs); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--sheet); border-color: var(--ink); }
.headline { font-family: var(--f-mono); font-size: var(--fs-sm); color: var(--ink-2);
  border-left: 3px solid var(--s2); padding: var(--sp-2) var(--sp-3);
  background: var(--sheet-2); margin: 0 0 var(--sp-3); }
.headline b { color: var(--ink); font-variant-numeric: tabular-nums; }
.ranklist { display: flex; flex-direction: column; gap: 3px; }
.rankrow { display: grid; grid-template-columns: 26px 10px minmax(0,1fr) auto 26% auto; align-items: center;
  gap: var(--sp-2); width: 100%; text-align: left; background: none; border: 0;
  border-radius: 0; padding: 5px 4px; min-height: 34px; cursor: pointer; font: inherit; }
.rankrow:hover { background: var(--sheet-2); }
.rankrow[aria-current="true"] { background: var(--sheet-2); box-shadow: inset 3px 0 0 var(--ink); }
.rankrow .rk { font-family: var(--f-mono); font-size: var(--fs-micro); color: var(--ink-3);
  font-variant-numeric: tabular-nums; text-align: right; }
.rankrow .tick { width: 10px; height: 10px; }
.rankrow .rname { font-size: var(--fs-sm); color: var(--ink); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.rankrow .rbar { height: 9px; background: var(--sheet-2); }
.rankrow .rbar i { display: block; height: 100%; }
.rankrow .rval { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--ink);
  font-variant-numeric: tabular-nums; text-align: right; min-width: 72px; }
.rankrow .rcase { font-family: var(--f-mono); font-size: var(--fs-micro); color: var(--ink-3);
  white-space: nowrap; }
.ranknote { font-size: var(--fs-xs); color: var(--ink-3); margin: var(--sp-3) 0 0;
  padding-top: var(--sp-3); border-top: 1px solid var(--rule); }

:root { --ms-shadow: rgba(15,23,32,.16); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ms-shadow: rgba(0,0,0,.55); } }
:root[data-theme="dark"] { --ms-shadow: rgba(0,0,0,.55); }
.ms { position: relative; }
.ms-btn {
  font-family: var(--f-mono); font-size: var(--fs-sm); padding: 8px 26px 8px 10px;
  min-height: 42px; min-width: 196px; text-align: left; background: var(--sheet);
  color: var(--ink); border: 1px solid var(--rule-2); border-radius: 0; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ms-btn::after {
  content: ""; position: absolute; right: 10px; top: 50%; margin-top: -2px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--ink-3); pointer-events: none;
}
.ms-btn.on { border-color: var(--ink); box-shadow: inset 2px 0 0 var(--ink); }
.ms-panel {
  position: absolute; z-index: 40; top: calc(100% + 2px); left: 0; min-width: 100%;
  max-height: 320px; overflow-y: auto; background: var(--sheet);
  border: 1px solid var(--rule-2); box-shadow: 0 6px 18px var(--ms-shadow, rgba(0,0,0,.14));
  padding: 4px;
}
.ms-opt {
  display: flex; align-items: center; gap: var(--sp-2); padding: 6px 8px;
  font-size: var(--fs-sm); cursor: pointer; white-space: nowrap; min-height: 34px;
}
.ms-opt:hover { background: var(--sheet-2); }
.ms-opt input { accent-color: var(--ink); width: 15px; height: 15px; flex: none; margin: 0; }
.ms-opt .ms-t { flex: 1; }
.ms-opt .ms-n {
  font-family: var(--f-mono); font-size: var(--fs-micro); color: var(--ink-3);
  font-variant-numeric: tabular-nums; margin-left: var(--sp-3);
}
.ms-opt.none .ms-t, .ms-opt.none .ms-n { color: var(--ink-3); opacity: .65; }
.ms-clear {
  display: block; width: 100%; text-align: left; font-family: var(--f-mono);
  font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); background: none; border: 0; border-top: 1px solid var(--rule);
  padding: 8px; min-height: 32px; cursor: pointer; margin-top: 4px;
}
.ms-clear:hover { color: var(--accent); }


.mapsheet {
  position: absolute; left: 0; right: 0; bottom: 0; display: none;
  background: var(--sheet); border-top: 1px solid var(--rule-2);
  padding: var(--sp-3) var(--sp-4); box-shadow: 0 -6px 16px rgba(0,0,0,.16);
  max-height: 45%; overflow-y: auto;
}
.mapsheet .msheet-top { display: flex; align-items: flex-start; gap: var(--sp-3); }
.mapsheet .msheet-name {
  flex: 1; font-size: var(--fs-body); font-weight: 600; line-height: 1.25; margin: 0;
}
.mapsheet .msheet-x {
  flex: none; min-height: 32px; min-width: 32px; padding: 0 8px; line-height: 1;
  background: none; border: 1px solid var(--rule-2); color: var(--ink-2);
}
.mapsheet .msheet-stage {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono);
  font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-2); margin-top: var(--sp-2);
}
.mapsheet .msheet-stage .tick { width: 10px; height: 10px; flex: none; }
.mapsheet .msheet-facts {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-2);
  font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.mapsheet .msheet-facts b { color: var(--ink); font-weight: 600; }
.mapsheet .msheet-more {
  display: inline-block; margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--accent);
  background: none; border: 0; padding: 6px 0; min-height: 32px; cursor: pointer;
}
@media (max-width: 900px) {
  .plat.has-sel .mapsheet { display: block; }
  .plat.has-sel .maphint, .plat.has-sel .scalebar, .plat.has-sel .satnote { display: none; }
}

.tscroll { overflow-x: auto; border: 1px solid var(--rule-2); background: var(--sheet); }
table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
th, td { padding: 10px 13px; text-align: left; border-bottom: 1px solid var(--rule); white-space: nowrap; }
th { position: sticky; top: 0; background: var(--sheet-2); z-index: 2; cursor: pointer;
  font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-2); font-weight: 600; user-select: none; }
th:hover { color: var(--accent); }
td.n { text-align: right; font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--sheet-2); }
tbody tr.stale td:first-child { box-shadow: inset 3px 0 0 var(--flag-ink); }
.stage { display: inline-flex; align-items: center; gap: 7px; }
.stage .tick { width: 9px; height: 9px; flex: none; }
.flagtag { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .04em;
  color: var(--flag-ink); border: 1px solid var(--flag-bd); background: var(--flag-bg); padding: 1px 6px; }
.muted { color: var(--ink-3); }
.norows { padding: var(--sp-5); text-align: center; color: var(--ink-3); font-size: var(--fs-sm); }

#tip { position: fixed; pointer-events: none; z-index: 99; opacity: 0;
  background: var(--ink); color: var(--sheet); padding: 6px 9px;
  font-family: var(--f-mono); font-size: var(--fs-micro); max-width: 260px; transition: opacity .09s; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

footer { border-top: 1px solid var(--rule); padding-top: var(--sp-4); font-size: var(--fs-xs);
  color: var(--ink-3); line-height: 1.65; display: flex; flex-direction: column; gap: var(--sp-3); }
footer a { color: var(--accent); word-break: break-all; }
footer code { font-family: var(--f-mono); font-size: var(--fs-micro); }
footer strong { color: var(--ink-2); }
footer ul { margin: 0; padding-left: 1.1em; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }