/* ============================================================
   Four towns, four schemas. Land green, water blue, projects on a
   warm ordinal ramp. Validated with the dataviz ordinal checks:
     light #ee9633..#4d0f04 on land #eef4e6 -> 2.07:1
     dark  #8a3212..#ffd0a4 on land #141d12 -> 2.10: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 {
 --land:#eef4e6; --water:#b9d6ee; --water-ink:#3f6f99;
 --road:#ffffff; --road-case:#c2b49c; --road-ink:#6b5e49; --bound:#8b959c;
 --s1:#ee9633; --s2:#d1601a; --s3:#ab3d13; --s4:#82230d; --s5:#4d0f04;
 --s-x:#8a8880;
 --infra:#6b3fa0;
 --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:#b04a18; --s3:#d4711f; --s4:#eda152; --s5:#ffd0a4;
 --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:#b04a18; --s3:#d4711f; --s4:#eda152; --s5:#ffd0a4;
 --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:.16em;
  text-transform:uppercase;color:var(--ink-3)}
h1{font-family:var(--f-mono);font-size:var(--fs-display);font-weight:600;letter-spacing:-.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:.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)}

/* town switcher */
.towns{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--rule-2);background:var(--sheet)}
.towns button{flex:1 1 auto;min-width:120px;border:0;border-right:1px solid var(--rule);
  background:none;font-family:var(--f-mono);font-size:var(--fs-sm);padding:var(--sp-3) var(--sp-3);
  min-height:56px;cursor:pointer;color:var(--ink-2);display:flex;flex-direction:column;
  align-items:flex-start;gap:2px;border-radius:0}
.towns button:last-child{border-right:0}
.towns button .cnt{font-size:var(--fs-micro);color:var(--ink-3);font-variant-numeric:tabular-nums}
.towns button[aria-pressed="true"]{background:var(--ink);color:var(--sheet)}
.towns button[aria-pressed="true"] .cnt{color:var(--sheet)}
.towns button:hover:not([aria-pressed="true"]){background:var(--sheet-2);color:var(--ink)}

.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:.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:-.02em;
  font-variant-numeric:tabular-nums;line-height:1.1}
.cell .u{font-size:var(--fs-xs);color:var(--ink-3);margin-top:2px}
.cell .partial{font-size:var(--fs-micro);color:var(--flag-ink);margin-top:var(--sp-2);
  border-top:1px solid var(--rule);padding-top:var(--sp-2)}
.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:.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:186px}
input[type="search"]{min-width:230px;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 whichever is shorter; content() keeps pointer maths
   right while the map letterboxes inside the taller box. */
/* The mount is taken out of flow so the map's tall natural shape does not
   set the height: the box is the screen-fitting clamp or the legend column,
   whichever is taller. */
@media (min-width:901px){.mapgrid{align-items:stretch}
  .mapgrid .plat{height:auto;min-height:clamp(560px,92vh,1100px)}
  .mapgrid .plat #platmount{position:absolute;inset:0;height:auto}}
.plat{border:1px solid var(--rule-2);background:var(--land);position:relative;overflow:hidden;
  height:clamp(560px,92vh,1100px)}
#platmount{height:100%}
.plat svg{display:block;width:100%;height:100%;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)}
.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)}
.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)}
/* the letterbox around the viewBox must not show pale land beside imagery */
.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 .twn{stroke:#ffffff;opacity:.9;stroke-width:2}
#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}
.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.4}.rd-pri.rd{stroke-width:2}
.rd-sec.rd-case{stroke-width:2.4}.rd-sec.rd{stroke-width:1.2}
.twn{fill:none;stroke:var(--bound);stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:.8}
.twn.on{stroke:var(--accent);stroke-width:2.4;opacity:1}
.proj{stroke:var(--ink);stroke-width:.6;vector-effect:non-scaling-stroke;cursor:pointer}
.proj:hover{stroke-width:2.2}
.pdot{stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke;cursor:pointer}
.pdot:hover{stroke-width:2.4}
.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}
.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:.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}
.lrow .dot{width:12px;height:12px;border-radius:50%;background:var(--s3);border:1px solid var(--ink);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}
#detail a{color:var(--accent)}
.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;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 24% 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:.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)}
.na{color:var(--ink-3);font-style:italic;font-size:var(--fs-micro)}
.norows{padding:var(--sp-5);text-align:center;color:var(--ink-3);font-size:var(--fs-sm)}

/* coverage matrix */
.cov{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.cov th,.cov td{padding:9px 12px;border-bottom:1px solid var(--rule);text-align:left;white-space:nowrap}
.cov th{position:static;background:var(--sheet-2);cursor:default}
.cov td.c{text-align:center;font-family:var(--f-mono)}
.yes{color:var(--ink)}
.no{color:var(--flag-ink)}

#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:280px;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)}