/* ============================================================
   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;
 --infra: #6b3fa0;
 /* 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;
 --infra: #9f78d8;
 --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;
 --infra: #9f78d8;
 --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; } }
/* Side by side, the map grows to the legend column's height instead of
   leaving a gap under it, and letterboxes inside; content() in wireMapNav
   keeps pointer maths on the drawn map rather than the box. */
@media (min-width: 901px) {
  .mapgrid { align-items: stretch; }
  /* A spacer in the map's own shape keeps the box at least the map's height;
     the mount fills whatever the row stretches it to. */
  .mapgrid .plat:not(.big)::before { content: ""; display: block; aspect-ratio: var(--map-ratio, 1600 / 1369); }
  .mapgrid .plat #platmount { position: absolute; inset: 0; height: auto; }
  .mapgrid .plat svg { height: 100%; }
}
.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); }
/* The selected record spans the sheet under the map rather than squeezing
   into the 268px side column: its labels and NCDOT's free text are long, and
   the column grew far below the map while the space under the map sat empty.
   Head, then the record and its context side by side, stacked on a phone. */
#detail.detailrow{margin-top:var(--sp-4)}
#detail .dhead{margin-bottom:var(--sp-3)}
#detail .dbody{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--sp-3) var(--sp-6);align-items:start}
#detail .dside>:first-child{margin-top:0}
#detail .dside .news:first-child{padding-top:0;border-top:0}
@media (max-width:760px){#detail .dbody{grid-template-columns:minmax(0,1fr)}}
#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; }
  /* The Full screen button sits in the map's bottom-right corner, over the
     sheet (#60). Inline, it steps aside while a sheet is open; closing the
     sheet brings it back, and moving the sheet up instead covered the zoom
     buttons on the short phone map. In full screen it is the way out, so it
     stays, and the sheet ends above its strip: 44px plus its inset twice. */
  .plat.has-sel:not(.big) .expander { display: none; }
  .plat.big.has-sel .mapsheet { bottom: calc(44px + 2 * var(--sp-3)); }
}


.ic{fill:none;stroke:var(--sheet);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;opacity:.9;pointer-events:none}
.il{fill:none;stroke:var(--infra);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;pointer-events:none}
.im-bp{stroke-dasharray:7 4}
.im-rail{stroke-dasharray:2 4}
.im-tr{stroke-dasharray:10 3 2 3}
.im-other{stroke-dasharray:4 2}
.ipt{fill:var(--infra);stroke:var(--sheet);stroke-width:1.5;vector-effect:non-scaling-stroke;pointer-events:none}
/* CRTPO plan: hollow, the usual map sign for a proposed road */
.pc{fill:none;stroke:var(--infra);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;pointer-events:none;opacity:.85}
.pi{fill:none;stroke:var(--land);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;pointer-events:none}
.ppt{fill:var(--land);stroke:var(--infra);stroke-width:2.2;vector-effect:non-scaling-stroke;pointer-events:none}
#plat.sat .pi{stroke:#000000}
#plat.sat .pc{stroke:#ffffff}
.ihit{fill:none;stroke:transparent;stroke-width:16;vector-effect:non-scaling-stroke;cursor:pointer;pointer-events:stroke}
.ihit-pt{fill:transparent;stroke:none;pointer-events:all}
.isel-case{fill:none;stroke:var(--mk-case);stroke-width:9;opacity:.9;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke}
.isel-top{fill:none;stroke:var(--infra);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke}
#plat.sat .ic{stroke:#000000}
#plat.sat .il{stroke:#ffffff}
#plat.sat .ipt{fill:#ffffff;stroke:#000000}
/* Specific enough to beat ".plat svg" (the phone sheet sits inside .plat) and
   ".plat.big svg" (full screen), which would stretch it across the sheet */
svg.iswatch,.plat svg.iswatch,.plat.big svg.iswatch{width:22px;height:10px;flex:none;display:inline-block;vertical-align:middle;overflow:visible;
  touch-action:auto;cursor:auto}
.lrow svg.iswatch{display:block}
.itoggle{display:flex;align-items:center;gap:var(--sp-2);width:100%;min-height:44px;margin:0 0 var(--sp-1);
  padding:var(--sp-1) var(--sp-2);font:inherit;font-size:var(--fs-sm);color:var(--ink);text-align:left;
  background:var(--sheet);border:1px solid var(--rule-2);border-radius:4px;cursor:pointer}
.itoggle:hover{border-color:var(--accent)}
.itoggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.itoggle .box{width:16px;height:16px;flex:none;border:1.5px solid var(--ink-2);border-radius:3px;
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);line-height:1}
.itoggle[aria-pressed="true"] .box{background:var(--infra);border-color:var(--infra);color:var(--sheet)}
.inote{font-size:var(--fs-xs);color:var(--ink-3);margin:var(--sp-1) 0 0;line-height:1.5}
.inote a{color:var(--accent)}
.itown-edge{color:var(--ink-3)}
.iwas{color:var(--ink-3)}
/* Label beside value now the record spans the sheet; the label column is
   capped so NCDOT's long labels wrap rather than squeeze the value. Stacked
   on a phone, where two columns would leave the value a few letters wide. */
#detail dl.idl{grid-template-columns:minmax(8rem,13rem) minmax(0,1fr);gap:var(--sp-2) var(--sp-4)}
#detail dl.idl dd{font-family:inherit;font-size:var(--fs-sm);overflow-wrap:anywhere}
@media (max-width:600px){
  #detail dl.idl{grid-template-columns:minmax(0,1fr);gap:0}
  #detail dl.idl dt{margin-top:var(--sp-2)}
}
#detail .dside>.ihist-h:first-child{margin-top:0}
.ihist-h{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);
  margin:var(--sp-3) 0 var(--sp-1);font-weight:600}
.ihist{margin:0;padding-left:1.1em;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.5}
.ilinks{display:flex;flex-direction:column;gap:var(--sp-1);margin-top:var(--sp-2)}
.ilinks a{color:var(--accent)}

.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); }