/* 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.1;
  stroke-opacity: 0.62;
  stroke-linejoin: 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(--ink); stroke-width: 4.5; stroke-opacity: 0.12;
  vector-effect: non-scaling-stroke;
}

.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: 0; border-top: 1px dashed var(--ink); height: 1px; align-self: center; }
.plan-legend__swatch--wet   { background: var(--wetland-wash); border-color: var(--wetland); }
.plan-legend__swatch--build { background: var(--magenta-wash); border-color: var(--magenta); }

/* ----------------------------------------------------------- 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; }

.townmap__wet { fill: var(--wetland); fill-opacity: 0.35; stroke: none; pointer-events: none; }

/* 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__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; }

.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. */
.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 ---------- */
.road-line { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.road-line--legal { stroke: var(--municipal); stroke-width: 3; opacity: .8; }
.road-line--other { stroke: var(--ink-faint, #6b7685); stroke-width: 2; stroke-dasharray: 6 4; opacity: .8; }
.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; }
.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--road-legal { background: var(--municipal); }
.sw--road-other { background: repeating-linear-gradient(90deg, var(--ink-faint, #6b7685) 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"). */
.townmap__road.road-line--legal { stroke-width: 3.4; opacity: .95; }
.townmap__road.road-line--other { stroke-width: 2.2; opacity: .85; }
.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; }
.plan-frame__tools { order: -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; padding: 8px 10px; border-bottom: var(--rule); }
.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; }
.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 { display: none; }
.plan--no-build .plan__buildable, .plan--no-build .plan__callout { display: none; }
.plan--no-dims .plan__courses { 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 .zoom-bar { margin: 8px 0 0 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; }