/* The plan sheet: envelope plan and town map. */

.plan {
  display: block;
  width: 100%;
  height: auto;
  background: var(--panel);
  font-family: var(--face-mono);
}

.plan__lot {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.9;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.plan__setback {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.7;
  stroke-opacity: 0.92;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* The gap drawn as ground, not a hairline: the strip between the lot line and
   the setback line, so a reader sees how much of the lot the rule takes. */
.plan__setback-band { fill: var(--ink); fill-opacity: 0.085; stroke: none; pointer-events: none; }
.plan__setback-fig {
  font-family: var(--face-mono); font-weight: 600; fill: var(--ink); fill-opacity: .8;
  letter-spacing: .04em; paint-order: stroke; stroke: var(--panel); stroke-width: .3em; stroke-linejoin: round;
}
/* Which boundary lines actually carry frontage. */
.plan__frontage-run {
  fill: none; stroke: var(--municipal); stroke-width: 6; stroke-opacity: .85;
  stroke-linecap: round; vector-effect: non-scaling-stroke;
}
/* Struck around the lot on first paint, the way you would swing it by hand. */
.plan__setback--draw { transition: stroke-dashoffset var(--slow) var(--ease); }
.plan__setback--draw.is-drawn { stroke-dashoffset: 0 !important; }

.plan__protected-fill  { fill: var(--wetland-wash); stroke: none; }
.plan__protected-hatch {
  fill: url(#gw-hatch-wet);
  stroke: var(--wetland);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
}

.plan__buildable-fill { fill: url(#gw-hatch-buildable); stroke: none; }
.plan__buildable-edge {
  fill: var(--magenta-wash);
  stroke: var(--magenta);
  stroke-width: 1.3;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.plan__hatch-line { stroke-width: 1; vector-effect: non-scaling-stroke; }
.plan__hatch-line--flag { stroke: var(--magenta); stroke-opacity: 0.55; }
.plan__hatch-line--wet  { stroke: var(--wetland); stroke-opacity: 0.55; }

.plan__monument { fill: var(--panel); stroke: var(--ink); stroke-width: 1.2; vector-effect: non-scaling-stroke; }

.plan__course { fill: var(--ink-soft); letter-spacing: 0.05em; }
.plan__course--front { fill: var(--ink); font-weight: 600; }
.plan__frontage-run {
  fill: none; stroke: var(--municipal); stroke-width: 5; stroke-opacity: 0.85;
  stroke-linecap: butt; vector-effect: non-scaling-stroke;
}
.plan__frontage-out {
  fill: none; stroke: var(--caution); stroke-width: 4; stroke-opacity: 0.8;
  stroke-dasharray: 7 4; stroke-linecap: butt; vector-effect: non-scaling-stroke;
}
.plan__frontage-unknown {
  fill: none; stroke: var(--ink-faint); stroke-width: 4; stroke-opacity: 0.9;
  stroke-dasharray: 2 5; stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.plan__frontage-label { letter-spacing: 0.1em; font-weight: 600; }
.plan__frontage-unknown-label { fill: var(--ink-faint); }
.plan__frontage-run-label { fill: var(--municipal); }
.plan__frontage-out-label { fill: var(--caution); }

.plan__leader { fill: none; stroke: var(--magenta); stroke-width: 1; vector-effect: non-scaling-stroke; }
.plan__arrowhead { fill: var(--magenta); }
.plan__callout-label { fill: var(--ink-soft); letter-spacing: 0.18em; }
.plan__callout-value { fill: var(--magenta); font-weight: 600; letter-spacing: 0.01em; }
.plan__callout-sub   { fill: var(--ink-soft); }
.plan__callout-warn  { fill: var(--caution); letter-spacing: 0.12em; }

.plan__north-ring   { fill: none; stroke: var(--ink); stroke-width: 1; stroke-opacity: 0.45; vector-effect: non-scaling-stroke; }
.plan__north-needle { fill: var(--ink); }
.plan__north-n      { fill: var(--ink); letter-spacing: 0.1em; }

.plan__scale-bar      { fill: var(--ink); stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.plan__scale-bar--alt { fill: var(--panel); }
.plan__scale-text     { fill: var(--ink-soft); letter-spacing: 0.08em; }

.plan__title-box  { fill: var(--panel); stroke: var(--ink); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.plan__title-rule { stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.plan__title-1    { fill: var(--ink); font-weight: 600; letter-spacing: 0.12em; }
.plan__title-2    { fill: var(--ink-soft); letter-spacing: 0.08em; }
.plan__title-3    { fill: var(--ink-faint); letter-spacing: 0.08em; }

.plan__stamp {
  fill: var(--magenta); fill-opacity: 0.13; font-weight: 700;
  letter-spacing: 0.3em; pointer-events: none; user-select: none;
}

/* ------------------------------------------------------------- legend ---- */

.plan-legend { display: flex; flex-wrap: wrap; gap: 14px 22px; padding: 14px 18px; border-top: var(--rule); }
.plan-legend__item { display: flex; align-items: center; gap: 8px; font: 500 10px/1 var(--face-mono);
                     letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-soft); }
.plan-legend__swatch { width: 22px; height: 11px; border: 1px solid var(--ink); flex: none; }
.plan-legend__swatch--lot { border: 0; border-top: 2px solid var(--ink); height: 1px; align-self: center; }
.plan-legend__swatch--setback { border: 1px dashed var(--ink); background: rgba(22, 35, 59, 0.085); }
.plan-legend__swatch--wet   { background: var(--wetland-wash); border-color: var(--wetland); }
.plan-legend__swatch--build { background: var(--magenta-wash); border-color: var(--magenta); }
.plan-legend__swatch--front { border: 0; border-top: 4px solid var(--municipal); height: 1px; align-self: center; }
.plan-legend__swatch--front-out { border: 0; border-top: 3px dashed var(--caution); height: 1px; align-self: center; }
.plan-legend__swatch--front-unknown { border: 0; border-top: 3px dotted var(--ink-faint); height: 1px; align-self: center; }

/* ----------------------------------------------------------- town map ---- */

.townmap { display: block; width: 100%; height: auto; background: var(--panel); touch-action: none;
           cursor: grab; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
/* No fill transition: with a thousand-plus lots under a moving cursor, every
   lot it crosses animated separately and the map flickered. */
.townmap__parcel {
  stroke: var(--ink); stroke-width: 0.6; stroke-opacity: 0.55;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
}
.townmap__parcel:hover { fill: var(--ink) !important; fill-opacity: 0.22; }
/* While the map is being dragged: one cursor for the whole sheet, and no lot
   lighting up as the pointer passes over it. */
.townmap.is-dragging, .townmap.is-dragging * { cursor: grabbing !important; }
.townmap.is-dragging .townmap__parcel { pointer-events: none; }
.townmap__parcel.is-active { fill: var(--magenta) !important; fill-opacity: 0.5; stroke: var(--magenta); stroke-width: 1.6; }
.townmap__parcel:focus-visible { outline: none; stroke: var(--magenta); stroke-width: 2; }

/* Zoning category colours, after the planners' convention: residential
   yellow, commercial red, industrial violet, rural light green, conservation
   deep green, institutional blue. Muted to sit on the vellum sheet. One set of
   variables drives both the map fill and the legend swatch, so they match. */
:root {
  --cat-residential: #E6CF8B;
  --cat-rural: #BFD19E;
  --cat-commercial: #DE9A8E;
  --cat-industrial: #B3A4CF;
  --cat-conservation: #86B394;
  --cat-institutional: #9EB9D3;
  --cat-none: #E2E4DD;
}
.cat-residential  { fill: var(--cat-residential);  fill-opacity: 0.9; }
.cat-rural        { fill: var(--cat-rural);        fill-opacity: 0.9; }
.cat-commercial   { fill: var(--cat-commercial);   fill-opacity: 0.9; }
.cat-industrial   { fill: var(--cat-industrial);   fill-opacity: 0.9; }
.cat-conservation { fill: var(--cat-conservation); fill-opacity: 0.9; }
.cat-institutional{ fill: var(--cat-institutional);fill-opacity: 0.9; }
.cat-none         { fill: var(--cat-none);         fill-opacity: 0.8; }
.plan-legend__swatch.cat-residential  { background: var(--cat-residential); }
.plan-legend__swatch.cat-rural        { background: var(--cat-rural); }
.plan-legend__swatch.cat-commercial   { background: var(--cat-commercial); }
.plan-legend__swatch.cat-industrial   { background: var(--cat-industrial); }
.plan-legend__swatch.cat-conservation { background: var(--cat-conservation); }
.plan-legend__swatch.cat-institutional{ background: var(--cat-institutional); }
.plan-legend__swatch.cat-none         { background: var(--cat-none); }
.plan-legend__swatch.cat-none.wet-1   { background: #D5E0E6; }
.plan-legend__swatch.cat-none.wet-2   { background: #A9C0CD; }
.plan-legend__swatch.cat-none.wet-3   { background: #7E9DB0; }

/* Mapped wetland and water on the town map, drawn from the overlay tile
   archive (ui/town-map.ts). A thin edge as well as a wash, so the boundary of
   the resource reads over the aerial photo as well as over the vellum. */
.townmap__wet {
  fill: var(--wetland); fill-opacity: 0.35;
  stroke: var(--wetland); stroke-opacity: 0.55; stroke-width: 1;
  vector-effect: non-scaling-stroke; pointer-events: none;
}
.townmap--aerial .townmap__wet { fill-opacity: 0.3; stroke-opacity: 0.8; }
/* A town's wetlands are ten thousand shapes, and the browser re-rasterises
   them on every frame of a drag: timed on Keene at 4x CPU throttle, a
   twelve-step drag went 4.7 s with the layer off to 11.3 s with it on. The
   layer is hidden while the map is actually being dragged and comes straight
   back on release, which keeps the pan at the speed it was. Hiding costs a
   compositor bit; it does not re-ask for anything. */
.townmap.is-dragging .townmap__wetlands { visibility: hidden; }

/* Lots touched by a mapped wetland, stream or water body: a wetland-blue edge,
   so the regulated pattern of a town reads even where no zoning layer exists. */
.townmap__parcel--wet { stroke: var(--wetland); stroke-opacity: 0.9; }
.cat-none.townmap__parcel--wet { fill: #C9D6DD; fill-opacity: 0.75; }
.cat-none.townmap__parcel--wet:not(.wet-1):not(.wet-2):not(.wet-3) { fill: #E2E4DD; }
.cat-none.wet-1 { fill: #D5E0E6; fill-opacity: 0.85; }
.cat-none.wet-2 { fill: #A9C0CD; fill-opacity: 0.85; }
.cat-none.wet-3 { fill: #7E9DB0; fill-opacity: 0.9; }
.townmap-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 10px 14px; border-top: var(--rule);
                  font: 500 10px/1 var(--face-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.townmap-legend span { display: inline-flex; align-items: center; gap: 6px; }
.townmap-legend i { width: 14px; height: 10px; display: inline-block; border: 1px solid var(--hairline); }
/* Lots in a local historic district: an umber dashed edge over the zoning fill. */
.townmap__parcel--historic { stroke: #7A4E2D; stroke-opacity: 1; stroke-width: 1.4; stroke-dasharray: 3 2; }
.plan-legend__swatch--historic { background: transparent; border: 1.5px dashed #7A4E2D; }

/* -- report jump nav --------------------------------------------------------- */
.report-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 18px; }
.report-nav a { font: 500 11px/1 var(--face-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
  text-decoration: none; padding: 8px 11px; border: 1px solid var(--hairline); background: var(--panel);
  display: inline-flex; gap: 8px; align-items: center; }
.report-nav a:hover { border-color: var(--ink); }
.report-nav__hot { border-color: var(--ink) !important; }
.report-nav__badge { font-size: 10px; letter-spacing: .06em; text-transform: none; padding: 2px 6px;
  background: var(--municipal-wash); color: var(--municipal); border: 1px solid var(--municipal); }
html { scroll-padding-top: 84px; }

/* -- subdivision --------------------------------------------------------------- */
/* One column, held to the card: the implicit auto track grew to the widest
   descendant and carried the whole section off the side of a phone. */
.sub { margin-top: 28px; padding: clamp(18px, 3vw, 30px); display: grid;
  grid-template-columns: minmax(0, 1fr); gap: 22px; }
.sub__head h2 { margin: 4px 0 6px; }
.sub__lead { margin: 0; max-width: 70ch; color: var(--ink-soft); }
.sub-bounds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: var(--rule); border-bottom: var(--rule); }
.sub-bound { padding: 14px 16px 14px 0; }
.sub-bound + .sub-bound { padding-left: 16px; border-left: var(--rule-soft); }
.sub-bound__value { font-size: clamp(24px, 3.4vw, 34px); line-height: 1.1; margin-top: 4px; }
.sub-bound.is-hot .sub-bound__value { color: var(--municipal); font-weight: 600; }
.sub-bound__note { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }
@media (max-width: 560px) {
  .sub-bounds { grid-template-columns: 1fr; }
  .sub-bound + .sub-bound { padding-left: 0; border-left: 0; border-top: var(--rule-soft); }
}

.sub-grid { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
.sub-grid > * { min-width: 0; }
@media (min-width: 1000px) { .sub-grid { grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.6fr); align-items: start; } }
.sub-grid__matrix { display: grid; gap: 10px; align-content: start; }
@media (min-width: 1000px) { .sub-grid__matrix { position: sticky; top: 84px; } }

.sub-matrix-wrap { overflow-x: auto; max-width: 100%; }
.sub-matrix { border-collapse: collapse; width: 100%; font-size: 12px; }
.sub-matrix th { font: 600 10px/1.2 var(--face-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
  text-align: left; padding: 6px 6px 8px 0; }
.sub-matrix tbody th { font-size: 14px; color: var(--ink); letter-spacing: 0; padding-right: 10px; }
.sub-matrix td { padding: 3px 4px 3px 0; }
.sub-cell { appearance: none; width: 100%; min-width: 84px; display: flex; gap: 6px; align-items: center; justify-content: flex-start;
  padding: 8px 9px; border: 1px solid var(--hairline); background: var(--panel); color: var(--ink); cursor: pointer;
  font: 500 11.5px/1 var(--face-mono); border-radius: 0; transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease); }
.sub-cell:hover { border-color: var(--ink); }
.sub-cell:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sub-cell.is-ok { color: var(--municipal); background: var(--municipal-wash); border-color: var(--municipal); }
.sub-cell.is-bad { color: var(--ink-soft); }
.sub-cell.is-bad .sub-cell__mark { color: var(--caution); }
.sub-cell[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ink); border-color: var(--ink); }
.sub-cell__mark { font-weight: 700; }
.sub-cell--na { color: var(--ink-faint); }

.sub-detail { border: var(--rule); background: var(--vellum); padding: clamp(14px, 2.4vw, 22px); display: grid; gap: 16px; min-width: 0; }
.sub-detail__head { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.sub-detail__head h3 { margin: 4px 0 6px; font-size: clamp(17px, 2vw, 21px); }
.sub-detail__why { margin: 0 0 4px; }
.sub-detail__body { display: grid; gap: 16px; }
.sub-detail__body .sub-figure { max-width: 720px; }

.sub-figure { margin: 0; background: var(--panel); border: var(--rule); }
.sub-plan { display: block; width: 100%; height: auto; max-height: min(72vh, 760px); }
.sub-plan__parent { fill: none; stroke: var(--ink); stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.sub-plan__lot { fill: var(--panel); stroke: var(--ink); stroke-width: 1.1; stroke-dasharray: 7 4; vector-effect: non-scaling-stroke;
  transition: fill var(--fast) var(--ease); }
.sub-plan__lot.is-alt { fill: var(--panel-sunk); }
.sub-plan__lot.is-bad { fill: var(--caution-wash); }
.sub-plan__lot.is-focus { fill: rgba(22, 35, 59, 0.10); stroke-width: 2; stroke-dasharray: none; }
.sub-plan__pad { fill: var(--magenta-wash); stroke: var(--magenta); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sub-plan__protected { fill: var(--wetland-wash); stroke: var(--wetland); stroke-width: .6; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.sub-plan__road { stroke: var(--municipal); stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .75; }
.sub-plan__label { font-family: var(--face-mono); font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: var(--panel);
  stroke-width: 4px; vector-effect: non-scaling-stroke; }
.sub-plan__label.is-bad { fill: var(--caution); }
.sub-key { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 12px; border-top: var(--rule); font-size: 10.5px; color: var(--ink-soft); }
.sub-key span { display: inline-flex; gap: 6px; align-items: center; }
.sw { display: inline-block; width: 14px; height: 10px; border: 1px solid transparent; }
.sw--road { height: 0; border-top: 4px solid var(--municipal); }
.sw--pad { background: var(--magenta-wash); border-color: var(--magenta); }
.sw--wet { background: var(--wetland-wash); border-color: var(--wetland); border-style: dashed; }
.sw--bad { background: var(--caution-wash); border-color: var(--caution); }

.sub-lots { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sub-lot { border: var(--rule); background: var(--panel); padding: 10px 12px; outline: none; }
.sub-lot:hover, .sub-lot:focus-visible { border-color: var(--ink); }
.sub-lot.is-bad { border-left: 3px solid var(--caution); }
.sub-lot.is-ok { border-left: 3px solid var(--municipal); }
.sub-lot__head { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.sub-lot__letter { font-size: 16px; font-weight: 700; width: 22px; }
.sub-lot__area { font-size: 13px; flex: 1; }
.sub-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sub-checks li { display: grid; grid-template-columns: 16px 104px minmax(0, 1fr); gap: 6px; font-size: 12.5px; align-items: baseline; }
.sub-checks__mark { font-weight: 700; }
.sub-checks li.is-ok .sub-checks__mark { color: var(--municipal); }
.sub-checks li.is-bad .sub-checks__mark { color: var(--caution); }
.sub-checks li.is-bad .sub-checks__label { font-weight: 600; }
.sub-checks__vals { font-size: 11.5px; overflow-wrap: anywhere; }
.sub-checks__need { color: var(--ink-faint); }
.sub__notes p { margin: 0 0 6px; } .sub__notes p:last-child { margin: 0; }
.sub__assumptions ul { margin: 8px 0 0; padding-left: 20px; font-size: 13px; color: var(--ink-soft); }
.sub__assumptions li { margin-bottom: 4px; }
@media print { .sub-grid__matrix { position: static; } }

.sub-t-wrap { overflow-x: auto; max-width: 100%; border: var(--rule); background: var(--panel); }
.sub-t { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 12.5px; }
.sub-t th, .sub-t td { text-align: left; vertical-align: top; padding: 9px 12px; border-bottom: var(--rule-soft); }
.sub-t thead th { font: 600 10px/1.3 var(--face-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.sub-t__req { display: block; font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--ink-faint); margin-top: 3px; }
.sub-t tbody tr { cursor: default; outline: none; }
.sub-t tbody tr:hover, .sub-t tbody tr:focus-visible { background: rgba(22, 35, 59, 0.05); }
.sub-t tbody th { white-space: nowrap; }
.sub-t__letter { font-size: 15px; font-weight: 700; margin-right: 8px; }
.sub-t tbody tr.is-bad .sub-t__letter { color: var(--caution); }
.sub-t__acres { font-size: 12px; color: var(--ink-soft); }
.sub-t__mark { font-weight: 700; margin-right: 6px; }
.sub-t td.is-ok .sub-t__mark { color: var(--municipal); }
.sub-t td.is-bad { background: var(--caution-wash); }
.sub-t td.is-bad .sub-t__mark { color: var(--caution); }
.sub-t__need { font-size: 11px; color: var(--caution); margin-top: 3px; }

/* -- town map: "could split" layer -------------------------------------------- */
.townmap__split-labels { display: none; pointer-events: none; }
.townmap__split-labels text { font-family: var(--face-mono); font-weight: 700; fill: var(--municipal);
  paint-order: stroke; stroke: var(--panel); stroke-width: 3px; vector-effect: non-scaling-stroke; }
.townmap--splits .townmap__split-labels { display: inline; }
.townmap--splits .townmap__parcel { fill-opacity: 0.18; stroke-opacity: 0.3; }
.townmap--splits .townmap__parcel.is-split { fill: var(--municipal) !important; fill-opacity: 0.28; stroke: var(--municipal);
  stroke-opacity: 1; stroke-width: 1.4; }
.townmap--splits .townmap__parcel.is-active { fill: var(--magenta) !important; fill-opacity: 0.5; stroke: var(--magenta); }
.townmap-split-toggle[aria-pressed="true"] { background: var(--municipal); border-color: var(--municipal); color: var(--panel); }
.townmap-readout__split { color: var(--municipal); font-weight: 600; margin-left: 6px; }

/* -- plain-English layer: story, guide, glossary, questions, what-if ---------- */

.gloss { text-decoration: underline dotted var(--ink-soft); text-underline-offset: 3px; cursor: help; }
.gloss:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }


.asks { margin: 0; padding-left: 24px; }
.asks__item { margin: 0 0 14px; font-size: 14.5px; line-height: 1.5; }
.asks__item::marker { font-family: var(--face-mono); color: var(--ink-soft); }
.asks__q { font-weight: 600; }
.asks__lede { margin: 0 0 14px; max-width: 70ch; }

  paint-order: stroke; stroke: var(--panel); stroke-width: 3px; }

.onepager-banner { display: none; }

@media print {
  .report--onepager .op-hide, .report--onepager #subdivision, .report--onepager .report-nav,
  .report--onepager .district-picker, .report--onepager .report__warn + .report__warn { display: none !important; }
  .report--onepager .onepager-banner { display: block; border-bottom: 2px solid #000; padding: 0 0 8px; margin-bottom: 12px; }
  .report--onepager .onepager-banner__motto { font: 700 20pt/1.1 var(--face-condensed); text-transform: uppercase; }
  .report--onepager .report__sheet { break-after: auto; break-inside: avoid; }
  .report--onepager .report__sheet svg { max-height: 3.7in; width: 100%; }
  .report--onepager .report__aside { margin-top: 10px; }
  .report--onepager .story { border-left-width: 2px; }
  .report--onepager .story__actions { display: none; }
  .gloss { text-decoration: none; }
}

/* Aerial photo under the envelope plan (ui/aerial.ts). The photo fades in once
   decoded; the linework gets a light halo so it reads over trees and roofs. */
.plan__aerial { opacity: 0; transition: opacity var(--slow) var(--ease); }
.plan--aerial .plan__aerial.is-loaded { opacity: 1; }
.plan:not(.plan--aerial) .plan__aerial { display: none; }
.plan--aerial .plan__lot { stroke: #fff; stroke-width: 2.4; filter: drop-shadow(0 0 1.2px rgba(22, 35, 59, 0.95)); }
.plan--aerial .plan__setback { stroke: #fff; stroke-opacity: 0.95; filter: drop-shadow(0 0 1px rgba(22, 35, 59, 0.9)); }
.plan--aerial .plan__setback-band, .plan--terrain .plan__setback-band { fill: #fff; fill-opacity: 0.22; }
.plan--aerial .plan__setback-fig, .plan--terrain .plan__setback-fig { fill: #fff; stroke: rgba(22, 35, 59, .75); }
.plan--aerial .plan__frontage-run, .plan--terrain .plan__frontage-run { stroke-opacity: 1; filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, .9)); }
.plan--aerial .road-casing--legal { opacity: .42; }
.plan--aerial .plan__roads .road-name { stroke: rgba(22, 35, 59, .72); fill: #fff; }
.plan--aerial .plan__protected-fill { fill: var(--wetland); fill-opacity: 0.32; }
.plan--aerial .plan__protected-hatch { stroke: #d6e6ef; }
.plan--aerial .plan__buildable-edge { fill: var(--magenta); fill-opacity: 0.16; stroke-width: 2; }
.plan--aerial .plan__course, .plan--aerial .plan__callout-label, .plan--aerial .plan__callout-value {
  paint-order: stroke; stroke: rgba(242, 244, 239, 0.9); stroke-width: 0.28em; stroke-linejoin: round;
}
.plan--aerial .plan__monument { fill: #fff; }
/* The frontage layer over a photo: the colours stay (they carry the meaning),
   a halo keeps them readable on dark tree cover and light roofs alike. */
.plan--aerial .plan__frontage-run,
.plan--aerial .plan__frontage-out,
.plan--aerial .plan__frontage-unknown,
.plan--terrain .plan__frontage-run,
.plan--terrain .plan__frontage-out,
.plan--terrain .plan__frontage-unknown {
  stroke-opacity: 1; filter: drop-shadow(0 0 1.4px rgba(255, 255, 255, 0.95));
}
.plan--aerial .plan__frontage-unknown, .plan--terrain .plan__frontage-unknown { stroke: #E7EAE4; }
.plan--aerial .plan__frontage-label, .plan--terrain .plan__frontage-label {
  paint-order: stroke; stroke: rgba(255, 255, 255, 0.9); stroke-width: 2.6px; stroke-linejoin: round;
}

.aerial-toggle { display: inline-flex; border: 1px solid var(--hairline); background: var(--panel); }
.aerial-toggle > * {
  font: 600 10.5px/1 var(--face-mono); letter-spacing: 0.14em; text-transform: uppercase;
  padding: 7px 11px; border: 0; background: none; color: var(--ink-soft); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none; min-height: 30px;
}
.aerial-toggle > * + * { border-left: 1px solid var(--hairline); }
.aerial-toggle [aria-pressed="true"] { background: var(--ink); color: var(--panel); }
.aerial-toggle__locked { color: var(--ink-faint) !important; }
.aerial-toggle__tag { font-size: 9px; letter-spacing: 0.1em; padding: 2px 4px; border: 1px solid currentColor; }
@media (max-width: 560px) {
  .aerial-toggle { flex-wrap: wrap; max-width: 100%; }
}
.aerial-note { margin: 0; padding: 10px 16px 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); max-width: 90ch; }
.aerial-note__status { color: var(--ink-faint); }
@media (prefers-reduced-motion: reduce) { .plan__aerial { transition: none; } }
/* Terrain and Slope views (ui/aerial.ts): USGS elevation pictures under the plan. The linework stays
   navy on the gray hillshade and gets a light halo over the slope colours. */
.plan__layer { opacity: 0; transition: opacity var(--slow) var(--ease); }
.plan__layer:not(.is-on) { display: none; }
.plan__layer.is-on.is-loaded { opacity: 1; }
.plan__layer--contours.is-on.is-loaded { opacity: 0.85; }
.plan--terrain .plan__lot { stroke-width: 2.4; filter: drop-shadow(0 0 1.2px rgba(255, 255, 255, 0.95)); }
.plan--terrain .plan__setback { stroke-opacity: 1; filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.9)); }
.plan--terrain .plan__protected-fill { fill: var(--wetland); fill-opacity: 0.3; }
.plan--terrain .plan__buildable-edge { fill: var(--magenta); fill-opacity: 0.14; stroke-width: 2; }
.plan--terrain .plan__course, .plan--terrain .plan__callout-label, .plan--terrain .plan__callout-value {
  paint-order: stroke; stroke: rgba(242, 244, 239, 0.92); stroke-width: 0.28em; stroke-linejoin: round;
}
.terrain-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font: 600 10.5px/1.3 var(--face-mono);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.terrain-legend:empty { display: none; }
.terrain-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.terrain-legend__item i { width: 14px; height: 10px; border: 1px solid var(--hairline); display: inline-block; }
.terrain-legend__title { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .plan__layer { transition: none; } }


/* Simple view: the drawing keeps distances and the buildable callout, drops the surveyor's bearings. */

/* Picture layers under the town map (ui/town-map.ts): aerial photo, NWI wetlands, FEMA flood. */
.townmap__pic { pointer-events: none; }
.townmap__pic--wetlands { opacity: 0.8; }
.townmap__pic--flood { opacity: 0.6; }
.townmap-layers { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border-top: var(--rule); }
.townmap-layers .btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--panel); }
.townmap-layers__locked { text-decoration: none; }
.townmap-layers__status { color: var(--ink-soft); font-family: var(--face-mono); font-size: 12px; }
.townmap-layers__note { padding: 0 14px 10px; margin: 0; }
/* With the photo on, the zoning tint steps back so the ground shows, and the lines turn white with a dark edge. */
/* The town's own municipal line. A wide soft halo under a crisp line: one
   stroke cannot hold on dark tree cover and bare field at once, and this is
   the one line that has to stay legible in every view. */
.townmap__boundary-halo {
  fill: none; stroke: rgba(22, 35, 59, 0.28); stroke-width: 6;
  stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
.townmap__boundary-line {
  fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-opacity: 0.9;
  stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
.townmap--aerial .townmap__boundary-halo { stroke: rgba(22, 35, 59, 0.75); stroke-width: 7; }
.townmap--aerial .townmap__boundary-line { stroke: #fff; stroke-opacity: 1; stroke-width: 2.4; }

.sw--boundary { border: 0; border-top: 3px solid var(--ink); height: 1px; align-self: center; opacity: 0.9; }
.sw--road-major { background: var(--ink); }
.sw--road-town { background: var(--municipal); }

.townmap--aerial .townmap__parcel { fill-opacity: 0.08; stroke: #fff; stroke-opacity: 0.95; stroke-width: 0.9; }
.townmap--aerial .townmap__parcel:hover { fill: #fff !important; fill-opacity: 0.25; }
.townmap--aerial .townmap__parcel.is-active { fill-opacity: 0.35; }
/* ---- roads and road-cut ground: one look on every map of a lot ---------- */
/* A colour band around every road, with the centreline on top. */
.road-casing { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.road-casing--legal { stroke: var(--municipal); stroke-width: 13; opacity: .20; }
.road-casing--other { stroke: var(--ink-faint, #6b7685); stroke-width: 10; opacity: .13; }
.road-line { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* Three tiers (ui/road-layer.ts roadTier), so a map has a shape you can read at
   a glance instead of one green for everything: the state's through routes
   heaviest, town roads lighter, and anything that cannot carry frontage in the
   same caution umber the Frontage layer uses for exactly that. */
.road-line--major { stroke: var(--ink); stroke-width: 4; opacity: .85; }
.road-line--town  { stroke: var(--municipal); stroke-width: 2.6; opacity: .8; }
.road-line--none  { stroke: var(--caution); stroke-width: 2; stroke-dasharray: 6 4; opacity: .85; }
/* The older pair, kept so any drawing still asking for them looks right. */
.road-line--legal { stroke: var(--municipal); stroke-width: 3; opacity: .8; }
.road-line--other { stroke: var(--caution); stroke-width: 2; stroke-dasharray: 6 4; opacity: .85; }
.road-side { fill: rgba(22, 35, 59, 0.06); stroke: var(--hairline); stroke-width: .8; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.road-keepout { fill: rgba(44, 106, 76, 0.10); stroke: var(--municipal); stroke-width: .8; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.road-name { font-family: var(--face-body); font-weight: 650; fill: var(--ink); letter-spacing: .01em;
  paint-order: stroke; stroke: var(--panel); stroke-width: .34em; stroke-linejoin: round; }
.road-name--other { fill: #4d586a; font-style: italic; }
.plan__roads .road-name, .sub-plan__roads .road-name {
  paint-order: stroke; stroke: var(--panel); stroke-width: .38em; stroke-linejoin: round;
}
.sub-plan__setback { fill: none; stroke: var(--ink); stroke-width: .8; stroke-dasharray: 5 3; vector-effect: non-scaling-stroke; opacity: .7; }
.sub-plan__sub { font-family: var(--face-mono); font-weight: 600; fill: var(--ink); paint-order: stroke; stroke: var(--panel); stroke-width: 2px; }
.sw--frontage { background: var(--municipal); border-color: var(--municipal); }
/* A road in the key looks like a road on the map: centreline inside its band. */
.sw--road-legal { background: linear-gradient(to bottom, rgba(44, 106, 76, .22) 0 28%, var(--municipal) 28% 72%, rgba(44, 106, 76, .22) 72% 100%); }
/* The tier that carries no frontage is drawn in caution dashes
   (.road-line--none), so its swatch is drawn the same way. */
.sw--road-other { background: repeating-linear-gradient(90deg, var(--caution) 0 4px, transparent 4px 7px); }
.sw--side { background: rgba(22, 35, 59, 0.12); border: 1px dashed var(--hairline); }
.sw--keepout { background: rgba(44, 106, 76, 0.18); border: 1px dashed var(--municipal); }
.sw--setback { background: transparent; border: 1px dashed var(--ink); }
.sub-rules { border: 1px solid var(--hairline); background: var(--panel); padding: 12px 14px; margin: 14px 0; }
.sub-rules__head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.sub-rules__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 16px; }
.sub-cases { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.sub-cases li { overflow-wrap: anywhere; }
.sub-rule__v { font-size: 13px; }
/* Roads read first on the town map (owner, Nov 3 2026: "make roads very bold so you can see it"). */
/* --road-k is set by town-map.ts: 1 across a whole town, up to ~1.9 when a lot
   or two fills the screen. A road held at one screen width looks right far out
   and far too thin against a single lot. */
.townmap-wrap { --road-k: 1; }
.townmap__road.road-line--major { stroke-width: calc(4.6px * var(--road-k)); opacity: 1; }
.townmap__road.road-line--town  { stroke-width: calc(3px * var(--road-k)); opacity: .95; }
.townmap__road.road-line--none  { stroke-width: calc(2.2px * var(--road-k)); opacity: .9; }
/* The casing: one step wider than the colour it carries, in the sheet's ink at
   a low alpha, so the road sits on the land instead of in it and two roads
   still read as two where they cross. */
.townmap__road-casing { stroke: var(--ink); stroke-opacity: .34; }
.townmap__road-casing.road-casing--major { stroke-width: calc(7.4px * var(--road-k)); }
.townmap__road-casing.road-casing--town  { stroke-width: calc(5.4px * var(--road-k)); }
.townmap__road-casing.road-casing--none  { stroke-width: calc(4.2px * var(--road-k)); stroke-dasharray: none; }
.townmap--aerial .townmap__road-casing { stroke: #0B1424; stroke-opacity: .6; }
.townmap__road.road-line--legal { stroke-width: 3.4; opacity: .95; }
.townmap__road.road-line--other { stroke-width: 2.2; opacity: .85; }
/* Over a photo the roads keep their meaning but have to beat the ground under them. */
.townmap--aerial .townmap__road.road-line--major { stroke: #fff; opacity: 1; }
.townmap--aerial .townmap__road.road-line--town  { stroke: #8FD6AE; opacity: 1; }
.townmap--aerial .townmap__road.road-line--none  { stroke: #E6C27A; opacity: 1; }
.townmap__road-names .road-name { stroke-width: .42em; font-weight: 750; }

/* ---- road index under the town map ---------------------------------------- */
.townmap-names-toggle[aria-pressed="true"] { background: var(--municipal); border-color: var(--municipal); color: var(--panel); }
.townmap-roadlist { border-top: 1px solid var(--hairline); padding: 8px 12px; }
.townmap-roadlist > summary { cursor: pointer; font-family: var(--face-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.townmap-roadlist__items { list-style: none; margin: 8px 0 0; padding: 0; max-height: 260px; overflow: auto;
  columns: 200px; column-gap: 16px; }
.townmap-roadlist__items li { break-inside: avoid; }
.townmap-roadlist__btn { display: flex; justify-content: space-between; gap: 8px; width: 100%; text-align: left; background: none;
  border: 0; border-bottom: 1px solid var(--hairline); padding: 4px 2px; cursor: pointer; font: inherit; color: inherit; }
.townmap-roadlist__btn:hover { background: var(--vellum); }
.townmap-roadlist__name { font-size: 13px; }
.townmap-roadlist__meta { font-family: var(--face-mono); font-size: 10.5px; color: var(--ink-faint, #6b7685); white-space: nowrap; }

/* ------------------------------------------------------------- map key ---- */
/* One key for the town map, the lot plan and the subdivision drawing (ui/map-key.ts). */
.mapkey { border-top: var(--rule); background: var(--panel); }
.mapkey__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px;
  cursor: pointer; list-style: none; min-height: 44px; }
.mapkey__head::-webkit-details-marker { display: none; }
.mapkey__head::after { content: "+"; font: 600 16px/1 var(--face-mono); color: var(--ink-soft); margin-left: auto; padding-left: 12px; }
.mapkey[open] > .mapkey__head::after { content: "−"; }
.mapkey__count { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.mapkey__body { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px 28px; padding: 2px 18px 16px; }
.mapkey__title { margin: 0 0 8px; font: 600 10.5px/1.2 var(--face-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.mapkey__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.mapkey__item { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.35; color: var(--ink); }
.mapkey__swatch { margin-top: 1px; width: 22px; height: 14px; flex: 0 0 auto; }
.mapkey__sw--active { background: rgba(214, 0, 110, .5); border-color: var(--magenta); }
.mapkey__swatch.sw { width: 22px; height: 11px; }
.mapkey__swatch.sw--road-legal { border-color: var(--municipal); }
.mapkey__note { margin: 8px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--ink-faint); }
.mapkey__sw--split { background: var(--municipal-wash); border-color: var(--municipal); }
.mapkey__sw--photo { background: linear-gradient(135deg, #5d7451, #8a8566 55%, #6d8296); }
.mapkey__sw--relief { background: linear-gradient(90deg, #f4f4f2, #9a9a98); }
.mapkey__sw--contour { background: transparent; border: 0; border-top: 2px solid #7a4e2d; height: 1px; }
.mapkey__sw--nwi { background: rgba(70, 140, 180, 0.55); border-color: #3f7ea3; }
.mapkey__sw--flood { background: repeating-linear-gradient(45deg, rgba(60, 120, 200, 0.55) 0 3px, rgba(60, 120, 200, 0.15) 3px 6px); border-color: #3c78c8; }
@media (max-width: 639px) {
  .mapkey__head { padding: 12px 14px; }
  .mapkey__body { grid-template-columns: 1fr 1fr; gap: 14px 16px; padding: 2px 14px 14px; }
}
@media (max-width: 420px) { .mapkey__body { grid-template-columns: 1fr; } }
.mapkey .plan-legend__swatch--lot, .mapkey .plan-legend__swatch--setback { width: 22px; }

/* ----------------------------------------------------------- coming soon --- */
.coming { margin-top: 36px; }
.coming h3 { margin: 0 0 6px; }
.coming__states { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 14px; }
.coming__list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.coming__list .tag { border-style: dashed; color: var(--ink-soft); background: transparent; }

/* ------------------------------------------------------------- land lab ---- */
.lab__body { padding: 16px 18px 18px; display: grid; gap: 14px; }
.lab__lead { margin: 0; color: var(--ink-soft); max-width: 70ch; }
.lab__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.lab__stats:empty, .lab__bands:empty, .lab__sentence:empty, .lab__profile:empty { display: none; }
.lab-tile { border: var(--rule); padding: 10px 12px; background: var(--panel); }
.lab-tile__v { font-size: 20px; margin-top: 4px; color: var(--ink); }
.lab-tile__n { font-size: 12px; color: var(--ink-faint); margin-top: 2px; }
.lab-bar { display: flex; height: 16px; border: 1px solid var(--ink); overflow: hidden; }
.lab-bar span { display: block; height: 100%; }
.lab-bar__key { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font: 500 11px/1.3 var(--face-mono); color: var(--ink-soft); }
.lab-bar__key i { display: inline-block; width: 12px; height: 10px; margin-right: 6px; border: 1px solid var(--hairline); vertical-align: -1px; }
.lab__sentence { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); max-width: 75ch; }
.lab__tools { display: flex; flex-wrap: wrap; gap: 8px; }
.lab__tools .btn[aria-pressed="true"] { background: var(--ink); color: var(--paper, #fff); }
.lab__tools .btn { min-height: 40px; }
.lab__readout { margin: 0; padding: 10px 12px; border-left: 3px solid var(--magenta); background: var(--magenta-wash); font: 500 12.5px/1.45 var(--face-mono); min-height: 20px; }
.lab-chart { width: 100%; height: auto; display: block; border: var(--rule); background: var(--panel); }
.lab-chart__fill { fill: var(--municipal-wash); }
.lab-chart__line { fill: none; stroke: var(--municipal); stroke-width: 2; }
.lab-chart__t { font: 500 11px var(--face-mono); fill: var(--ink-soft); }
/* the overlay on the plan: inert until a tool is on, so the page still scrolls under a finger */
.lab-catch { fill: transparent; pointer-events: none; }
.lab-layer.is-active .lab-catch { pointer-events: all; cursor: crosshair; touch-action: none; }
.lab-dot { fill: var(--magenta); stroke: #fff; stroke-width: 1; pointer-events: none; }
.lab-cross { stroke: var(--magenta); stroke-width: 0.6; stroke-dasharray: 3 3; opacity: 0.7; pointer-events: none; vector-effect: non-scaling-stroke; }
.lab-section { stroke: var(--ink); stroke-linecap: round; pointer-events: none; }
.lab-end { fill: var(--ink); stroke: #fff; stroke-width: 1; pointer-events: none; }

/* placer: buildings kept on the plan */
.placer__pin { fill: rgba(22, 35, 59, 0.14); stroke: var(--ink); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.placer__pin-label { fill: var(--ink-soft); font-family: var(--face-mono); pointer-events: none; }

/* split lots: how it was counted, and a place to put a building */
.sub-how { margin: 14px 0; padding: 12px 16px; border: var(--rule); background: var(--panel); }
.sub-how summary { cursor: pointer; }
.sub-how__steps { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); max-width: 78ch; }
.sub-site { margin-top: 14px; display: grid; gap: 10px; }
.sub-site__bar { display: flex; flex-wrap: wrap; gap: 8px; }
.sub-site__bar .btn { min-height: 40px; }
.sub-site__bar .btn[aria-pressed="true"] { background: var(--ink); color: var(--paper, #fff); }
.sub-plan.is-placing { cursor: crosshair; touch-action: none; }
.sub-site__fp { stroke-width: 1.5; vector-effect: non-scaling-stroke; pointer-events: none; }
.sub-site__fp.is-ok { fill: rgba(44, 106, 76, 0.35); stroke: var(--municipal); }
.sub-site__fp.is-bad, .sub-site__fp.is-warn { fill: rgba(214, 0, 110, 0.25); stroke: var(--magenta); }
.sub-site__kept { fill: rgba(22, 35, 59, 0.14); stroke: var(--ink); stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.sub-site__label { fill: var(--ink); font-family: var(--face-mono); pointer-events: none; paint-order: stroke; stroke: #fff; stroke-width: 2.5; }
@media (max-width: 639px) { .lab__body { padding: 14px; } .lab-tile__v { font-size: 18px; } }
.mapkey__sw--height { background: linear-gradient(90deg, #2f6f8f, #6aa86a, #d9d27a, #b58a5a, #f1eee8); }
.mapkey__sw--flow { background: transparent; border: 0; position: relative; }
.mapkey__sw--flow::after { content: "→"; position: absolute; inset: -4px 0 0 0; text-align: center; font: 700 15px/1 var(--face-mono); color: var(--ink); }
.lab-sheet { mix-blend-mode: multiply; pointer-events: none; image-rendering: auto; }
.lab-flow path { fill: none; stroke: #0d2a45; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.lab__tools .label { align-self: center; margin-right: 4px; }

/* Soils and septic panel */
.sub-soils .scroll { overflow-x: auto; max-width: 100%; }
.soils__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.soils__table th, .soils__table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line, #d3d9d0); vertical-align: top; }
.soils__table th { font-weight: 600; white-space: nowrap; }

/* Jump-to menu: stays under the header while you scroll a lot's report. */
.report-jump { padding: 8px 0; margin: 0 0 10px; }
@media (min-width: 961px) { .report-jump { position: sticky; top: 63px; z-index: 30;
  background: color-mix(in srgb, var(--vellum) 94%, transparent); backdrop-filter: blur(6px); } }
.report-jump__select { width: 100%; max-width: 360px; }
.report [id] { scroll-margin-top: 120px; }

/* The canvas lot layer (parcel-raster.ts), behind the SVG that still carries
   the roads, the names and the selected lot. The stage exists so the canvas
   covers the map and not the key and controls under it. */
.townmap__stage { position: relative; display: block; }
.townmap__stage > .townmap { position: relative; z-index: 1; background: transparent; }
.townmap__raster { position: absolute; left: 0; top: 0; width: 100%; height: 100%;
                   z-index: 0; background: var(--panel); pointer-events: none; }

/* ---- full-screen map: the map fills the viewport, its bar and layers sit over it ---- */
.townmap-wrap--full { position: fixed; inset: 0; z-index: 60; background: var(--vellum); display: flex; flex-direction: column; overflow: auto; }
.townmap-wrap--full > .townmap, .townmap-wrap--full > .townmap__stage { flex: 1 1 auto; min-height: 0; }
.townmap-wrap--full .townmap, .townmap-wrap--full .townmap__stage > .townmap { height: 100%; aspect-ratio: auto !important; }
.townmap-wrap--full .townmap__stage > canvas { height: 100%; }
.townmap-wrap--full .townmap-bar { position: absolute; left: 12px; right: 12px; bottom: 12px; border: 1px solid var(--hairline); background: color-mix(in srgb, var(--panel) 92%, transparent); z-index: 2; }
.townmap-wrap--full .townmap-layers { position: absolute; left: 12px; top: 12px; border: 1px solid var(--hairline); background: color-mix(in srgb, var(--panel) 92%, transparent); z-index: 2; max-width: calc(100% - 24px); }
.townmap-wrap--full .townmap-layers__note, .townmap-wrap--full .townmap-roadlist { display: none; }
.townmap-wrap--full .mapkey { position: absolute; right: 12px; top: 12px; max-width: 280px; background: color-mix(in srgb, var(--panel) 92%, transparent); z-index: 2; }
body.has-full-map { overflow: hidden; }
.townmap-full[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--panel); }

/* ---- the lot drawing's own controls (Nov 3 2026): layers, zoom, full screen ---- */
.plan-frame { position: relative; background: var(--panel); }
.plan-frame .plan { cursor: grab; touch-action: none; user-select: none; }
.plan-frame .plan.is-dragging { cursor: grabbing; }
.plan-frame .plan.is-placing { cursor: crosshair; }
/* The switches sit in a strip above the drawing; in full screen they float over it. */
.plan-frame { display: flex; flex-direction: column; }
/* Tool strip: the switches on one row, the key docked under them. A column, so
   the key follows the row however far the switches wrap. */
.plan-frame__tools { order: -1; display: flex; flex-direction: column; gap: 8px; padding: 8px 10px; border-bottom: var(--rule); }
.plan-frame__bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.plan-frame.is-full .plan-frame__tools { position: absolute; left: 10px; right: 10px; top: 10px; border: 0; padding: 0; pointer-events: none; }
.plan-frame.is-full .plan-frame__tools > * { pointer-events: auto; }
.plan-frame.is-full .plan-frame__bar > * { pointer-events: auto; }

/* The key, docked in the strip (owner, Nov 4 2026). On the page it is a band
   across the top of the drawing; in full screen it floats at the right, over
   the drawing, capped so a long key scrolls rather than covering the lot. */
.plan-frame__tools > .mapkey { border: 1px solid var(--hairline); background: color-mix(in srgb, var(--panel) 94%, transparent); }
/* Switched off, the docked key goes altogether rather than leaving its own
   header behind: the Key button in the strip is the only switch it needs, and
   on a phone in full screen that header was a whole band of the drawing. */
.plan-frame__tools > .mapkey:not([open]) { display: none; }
@media print { .plan-frame__tools > .mapkey:not([open]) { display: block; } }
.plan-frame__tools > .mapkey .mapkey__head { padding: 8px 12px; }
.plan-frame__tools > .mapkey .mapkey__body { padding: 2px 12px 12px; gap: 12px 20px; }
.plan-frame.is-full .plan-frame__tools > .mapkey { align-self: flex-end; width: min(340px, 100%); max-height: calc(100vh - 140px); overflow: auto; }
.plan-frame.is-full .plan-frame__tools > .mapkey .mapkey__body { grid-template-columns: 1fr; }
@media (max-width: 640px) {
  .plan-frame.is-full .plan-frame__tools > .mapkey { width: 100%; max-height: 42vh; }
}
/* The Key switch sits with the zoom controls, at the right of the strip. */
.zoom-bar--key { margin-left: auto; }
.plan-frame__bar .zoom-bar--key + .zoom-bar, .sub-figure .plan-frame__bar .zoom-bar--key + .zoom-bar { margin-left: 0; }
.lot-layers, .zoom-bar { display: inline-flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--hairline); background: color-mix(in srgb, var(--panel) 92%, transparent); }
.lot-layers .btn, .zoom-bar .btn { border: 0; border-radius: 0; min-height: 32px; }
.lot-layers .btn + .btn, .zoom-bar .btn + .btn { border-left: 1px solid var(--hairline); }
.lot-layers .btn[aria-pressed="true"] { background: var(--ink); color: var(--panel); }
.lot-layer--septic[aria-pressed="true"] { background: var(--municipal) !important; }
.lot-layer--whatif[aria-pressed="true"] { background: var(--magenta) !important; }
.zoom-bar { margin-left: auto; }
.lot-layers__below:empty { display: none; }
.lot-layers__note { padding: 10px 14px 0; margin: 0; }
/* Layer switches: each hides one group of the drawing. */
.plan--no-wet .plan__protected { display: none; }
.plan--no-setback .plan__setback, .plan--no-setback .plan__setback-band,
.plan--no-setback .plan__setback-figs { display: none; }
.plan--no-build .plan__buildable, .plan--no-build .plan__callout { display: none; }
.plan--no-dims .plan__courses { display: none; }
.plan--no-front .plan__frontage { display: none; }
.plan--no-roads .plan__roads { display: none; }
/* Septic ground: hatched green inside the buildable area. */
/* Septic ground: dark blue, outlined, with the shading strength set by the reader (--septic-alpha). */
.plan__septic { --septic-alpha: .55; --septic: #1E3F8A; }
.plan__septic-fill { fill: var(--septic); fill-opacity: calc(var(--septic-alpha) * .35); }
.plan__septic-edge { fill: none; stroke: var(--septic); stroke-opacity: var(--septic-alpha); stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.plan-legend__swatch--septic { background: rgba(30, 63, 138, .3); border: 2px solid #1E3F8A; }
.lot-layers__slider { display: flex; align-items: center; gap: 10px; padding: 4px 14px 10px; }
.lot-layers__range { width: 180px; accent-color: #1E3F8A; }
.plan__fp--septic.is-ok { fill: rgba(30, 63, 138, .35); stroke: #1E3F8A; }
.plan__fp--well { rx: 3; }
.plan__fp--well.is-ok { fill: rgba(126, 157, 176, .6); stroke: var(--ink); }
.sw--fp-septic { background: rgba(30, 63, 138, .35); border: 1px solid #1E3F8A; }
.sw--fp-well { background: rgba(126, 157, 176, .6); border: 1px solid var(--ink); border-radius: 50%; }
.whatif__sewer { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 0 6px; }
/* What-if footprints. */
.plan__fp { stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.plan__fp.is-ok { fill: rgba(44, 106, 76, .35); stroke: var(--municipal); }
.plan__fp.is-bad { fill: rgba(214, 0, 110, .25); stroke: var(--magenta); }
.plan__fp.is-kept { stroke-dasharray: 0; fill-opacity: .9; }
.plan__whatif-label { font-family: var(--face-mono); font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: var(--panel); stroke-width: 2.5px; pointer-events: none; }
.sw--fp-ok { background: rgba(44, 106, 76, .35); border: 1px solid var(--municipal); }
.sw--fp-bad { background: rgba(214, 0, 110, .25); border: 1px solid var(--magenta); }
.whatif { padding: 10px 14px; border-top: var(--rule); }
.whatif__row { flex-wrap: wrap; gap: 8px; align-items: center; }
.whatif__size { display: inline-flex; align-items: center; gap: 4px; }
.input--xs { width: 64px; min-height: 32px; padding: 2px 6px; }
.whatif__out { margin-top: 10px; }
.whatif__out .row { gap: 10px; align-items: center; }
/* Full screen: the drawing fills the viewport, its tools stay over it. */
.plan-frame.is-full { position: fixed; inset: 0; z-index: 60; background: var(--vellum); justify-content: center; }
.plan-frame.is-full .plan { width: 100%; height: 100%; max-height: 100vh; }
.sub-figure .plan-frame__bar .zoom-bar { margin-left: auto; }

/* ---- the lot panel on the town map ---------------------------------------- */
.lotpanel { position: absolute; top: 10px; right: 10px; z-index: 3; width: min(340px, calc(100% - 20px)); max-height: calc(100% - 20px); overflow: auto;
  background: color-mix(in srgb, var(--panel) 96%, transparent); border: 1px solid var(--ink); box-shadow: 0 6px 24px rgba(22, 35, 59, .18); }
.lotpanel[hidden] { display: none; }
.lotpanel__head { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--hairline); }
.lotpanel__title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lotpanel__lot { font-weight: 700; }
.lotpanel__addr { font-size: 13px; color: var(--ink-soft); }
.lotpanel__close { border: 0; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink); padding: 0 4px; }
.lotpanel__body { padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.lotpanel__bigs { display: grid; grid-template-columns: 1fr 1fr 1fr; border: 1px solid var(--ink); }
.lotpanel__big { display: flex; flex-direction: column; padding: 8px; min-width: 0; }
.lotpanel__big + .lotpanel__big { border-left: 1px solid var(--ink); }
.lotpanel__label { font-family: var(--face-head); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; font-size: 10px; }
.lotpanel__value { font-size: 20px; font-weight: 700; line-height: 1.1; }
.lotpanel__note { font-size: 10px; color: var(--ink-soft); overflow-wrap: anywhere; }
.lotpanel__thumb { width: 100%; height: auto; max-height: 180px; background: var(--vellum); border: 1px solid var(--hairline); }
.lotpanel__rows { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.lotpanel__row { display: flex; justify-content: space-between; gap: 10px; }
.lotpanel__row .mono { text-align: right; }
.lotpanel__actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 720px) { .lotpanel { top: auto; bottom: 10px; left: 10px; right: 10px; width: auto; max-height: 70%; } }
.townmap-wrap--full .lotpanel { top: 12px; right: 12px; }
.townmap-wrap--full .mapkey { right: 12px; top: auto; bottom: 64px; }
.plan__whatif-dim { font-family: var(--face-mono); fill: var(--ink); paint-order: stroke; stroke: var(--panel); stroke-width: 2px; pointer-events: none; }