/* Deedective — map-first property risk interface.
   Palette from the validated data-viz reference: sequential blue for risk
   magnitude, orange and aqua as the two accent identities. Both modes were
   run through the palette validator; light-mode aqua sits below 3:1 on the
   surface, so flight paths always carry a visible label (the "relief" rule)
   and the dossier ships a table view. */

:root {
  color-scheme: light;

  --surface-0: #f4f3f0;
  --surface-1: #fcfcfb;
  --surface-2: #eceae5;
  --border:    #dcd9d2;
  --border-strong: #c3bfb5;

  --ink-1: #0b0b0b;
  --ink-2: #52514e;
  --ink-3: #7d7b74;

  /* Sequential blue — risk magnitude. 100 = near zero, 700 = worst. */
  --seq-100: #cde2fb;
  --seq-250: #86b6ef;
  --seq-400: #3987e5;
  --seq-550: #1c5cab;
  --seq-700: #0d366b;

  /* Categorical identities (slots 1–3, all-pairs validated) */
  --accent-flood:  #eb6834;  /* orange — FEMA overlay */
  --accent-flight: #1baf7a;  /* aqua  — ADS-B paths */
  --accent-focus:  #2a78d6;  /* blue  — selection */

  --status-critical: #b3261e;
  --status-warning:  #8a6100;
  --status-good:     #1c6b3f;

  --shadow-panel: 0 1px 2px rgb(0 0 0 / 0.06), 0 8px 28px rgb(0 0 0 / 0.10);
  --radius: 10px;
  --font: ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-0: #121211;
    --surface-1: #1a1a19;
    --surface-2: #242422;
    --border:    #33322f;
    --border-strong: #4a4944;
    --ink-1: #ffffff;
    --ink-2: #c3c2b7;
    --ink-3: #8d8b82;
    --seq-100: #0d366b;
    --seq-250: #1c5cab;
    --seq-400: #3987e5;
    --seq-550: #86b6ef;
    --seq-700: #cde2fb;
    --accent-flood:  #d95926;
    --accent-flight: #199e70;
    --accent-focus:  #3987e5;
    --status-critical: #e66767;
    --status-warning:  #eda100;
    --status-good:     #4bb37a;
    --shadow-panel: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 28px rgb(0 0 0 / 0.55);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-0: #121211; --surface-1: #1a1a19; --surface-2: #242422;
  --border: #33322f; --border-strong: #4a4944;
  --ink-1: #ffffff; --ink-2: #c3c2b7; --ink-3: #8d8b82;
  --seq-100: #0d366b; --seq-250: #1c5cab; --seq-400: #3987e5;
  --seq-550: #86b6ef; --seq-700: #cde2fb;
  --accent-flood: #d95926; --accent-flight: #199e70; --accent-focus: #3987e5;
  --status-critical: #e66767; --status-warning: #eda100; --status-good: #4bb37a;
  --shadow-panel: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 28px rgb(0 0 0 / 0.55);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font);
  background: var(--surface-0);
  color: var(--ink-1);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
#map { position: absolute; inset: 0; }

/* ---------- Search ---------- */
.search {
  position: absolute; top: 16px; left: 16px; z-index: 10;
  width: min(380px, calc(100vw - 32px));
}
.search-field {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
  padding: 0 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.search-field:focus-within {
  border-color: var(--accent-focus);
  box-shadow: var(--shadow-panel), 0 0 0 3px color-mix(in srgb, var(--accent-focus) 22%, transparent);
}
.search-field svg { flex: none; color: var(--ink-3); }
.search-field input {
  flex: 1; border: 0; outline: 0; background: transparent;
  padding: 13px 0; font: inherit; font-size: 15px; color: var(--ink-1);
}
.search-field input::placeholder { color: var(--ink-3); }
.search-field kbd {
  font: 500 11px/1 var(--mono); color: var(--ink-3);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 5px; padding: 4px 6px;
}

.suggestions {
  margin-top: 6px; background: var(--surface-1);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-panel); overflow: hidden;
}
.suggestions button {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  width: 100%; text-align: left; border: 0; background: transparent;
  padding: 11px 14px; font: inherit; color: var(--ink-1); cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.suggestions button:last-child { border-bottom: 0; }
.suggestions button:hover, .suggestions button[aria-selected="true"] { background: var(--surface-2); }
.suggestions .town { font-size: 12px; color: var(--ink-3); flex: none; }

/* ---------- Dossier panel ---------- */
.dossier {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 12;
  width: clamp(420px, 50vw, 760px);
  background: var(--surface-1);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-panel);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.22,.61,.36,1);
}
.dossier[data-open="true"] { transform: none; }
@media (prefers-reduced-motion: reduce) { .dossier { transition: none; } }

.dossier-head {
  padding: 18px 20px 14px; border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
}
.dossier-head h2 { margin: 0 0 3px; font-size: 17px; letter-spacing: -0.01em; }
.dossier-head .sub { font-size: 13px; color: var(--ink-2); }
.icon-btn {
  flex: none; border: 1px solid var(--border); background: var(--surface-2);
  color: var(--ink-2); border-radius: 8px; width: 30px; height: 30px;
  display: grid; place-items: center; cursor: pointer;
}
.icon-btn:hover { color: var(--ink-1); border-color: var(--border-strong); }

.dossier-body { overflow-y: auto; padding: 4px 20px 24px; flex: 1; }

/* ---------- Risk gauge ---------- */
.risk { display: flex; align-items: center; gap: 16px; padding: 18px 0 14px; }
.gauge { position: relative; flex: none; width: 92px; height: 92px; }
.gauge svg { transform: rotate(-90deg); }
.gauge-track { stroke: var(--surface-2); }
.gauge-value { transition: stroke-dashoffset .7s cubic-bezier(.22,.61,.36,1); }
.gauge-num {
  position: absolute; inset: 0; display: grid; place-content: center;
  font: 700 26px/1 var(--font); letter-spacing: -0.02em;
}
.risk-meta h3 { margin: 0 0 5px; font-size: 15px; }
.risk-meta p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }

.band { font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; }
.band-low       { color: var(--status-good); }
.band-moderate  { color: var(--ink-2); }
.band-elevated  { color: var(--status-warning); }
.band-high      { color: var(--status-critical); }

/* Component bars — 2px gap between fills, thin marks, rounded data-end */
.components { display: grid; gap: 9px; margin: 4px 0 20px; }
.component { display: grid; grid-template-columns: 74px 1fr 34px; align-items: center; gap: 10px; }
.component-label { font-size: 12px; color: var(--ink-2); }
.component-track { height: 7px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.component-fill { height: 100%; border-radius: 4px; transition: width .6s cubic-bezier(.22,.61,.36,1); }
.component-num { font: 500 12px var(--mono); color: var(--ink-2); text-align: right; }

/* ---------- Sections ---------- */
section { border-top: 1px solid var(--border); padding: 16px 0; }
section h4 {
  margin: 0 0 11px; font-size: 11px; font-weight: 650; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
}
.kv { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; font-size: 13px; }
.kv dt { color: var(--ink-2); }
.kv dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  border: 1px solid currentColor;
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill-sfha { color: var(--status-critical); }
.pill-clear { color: var(--status-good); }

.record { padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.record:last-child { border-bottom: 0; }
.record-top { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.record-date { font: 500 12px var(--mono); color: var(--ink-3); }
.record-summary { color: var(--ink-2); line-height: 1.5; margin: 0; }
.record-board { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }

.caveats { font-size: 12px; color: var(--ink-3); line-height: 1.55; }
.caveats li { margin-bottom: 5px; }

.empty { font-size: 13px; color: var(--ink-3); font-style: italic; padding: 4px 0; }

/* ---------- Legend ---------- */
.legend {
  position: absolute; left: 16px; bottom: 28px; z-index: 10;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-panel);
  padding: 12px 14px; font-size: 12px; min-width: 190px;
}
.legend h5 { margin: 0 0 9px; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.ramp { display: flex; height: 9px; border-radius: 3px; overflow: hidden; margin-bottom: 5px; }
.ramp span { flex: 1; }
.ramp-labels { display: flex; justify-content: space-between; color: var(--ink-3); font-size: 11px; }
.legend-row { display: flex; align-items: center; gap: 8px; margin-top: 9px; color: var(--ink-2); }
.legend-swatch { width: 15px; height: 3px; border-radius: 2px; flex: none; }
.legend-swatch.hatch {
  height: 11px; border-radius: 2px;
  background-image: repeating-linear-gradient(45deg, var(--accent-flood) 0 2px, transparent 2px 5px);
  border: 1px solid var(--accent-flood);
}

/* ---------- Map chrome ---------- */
.controls { position: absolute; top: 16px; right: 16px; z-index: 10; display: grid; gap: 8px; }
.controls .icon-btn { width: 34px; height: 34px; background: var(--surface-1); box-shadow: var(--shadow-panel); }
.dossier[data-open="true"] ~ .controls { right: calc(clamp(420px, 50vw, 760px) + 16px); }
.controls, .dossier { transition: transform .32s cubic-bezier(.22,.61,.36,1), right .32s cubic-bezier(.22,.61,.36,1); }

.hint {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 9;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 16px; font-size: 12.5px; color: var(--ink-2); box-shadow: var(--shadow-panel);
  pointer-events: none;
}

.maplibregl-popup-content {
  background: var(--surface-1); color: var(--ink-1);
  border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow-panel); padding: 9px 12px; font: 13px var(--font);
}
.maplibregl-popup-tip { border-top-color: var(--border) !important; }
.pop-addr { font-weight: 600; margin-bottom: 2px; }
.pop-meta { font-size: 12px; color: var(--ink-2); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Brand ---------- */
.brand {
  display: flex; align-items: center; gap: 11px;
  margin-bottom: 10px; padding: 9px 12px;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-panel);
  text-decoration: none; color: inherit;
  width: fit-content;
}
.brand-mark {
  width: 30px; height: 30px; flex: none; color: var(--accent-focus);
  background: currentColor;
  -webkit-mask: url("/static/logo.svg") center / contain no-repeat;
  mask: url("/static/logo.svg") center / contain no-repeat;
}
.brand-text { display: grid; line-height: 1.2; }
.brand-name {
  font-size: 16px; font-weight: 680; letter-spacing: -0.021em;
  /* The two halves of the portmanteau, weighted apart very slightly. */
  font-feature-settings: "ss01";
}
.brand-sub { font-size: 11px; color: var(--ink-3); letter-spacing: 0.01em; }

/* ---------- Provisional-data disclaimer ---------- */
.disclaimer {
  position: absolute; right: 16px; bottom: 28px; z-index: 9;
  max-width: 300px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-left: 3px solid var(--status-warning);
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
  padding: 10px 13px; font-size: 11.5px; line-height: 1.5; color: var(--ink-2);
}
.disclaimer strong { color: var(--ink-1); display: block; margin-bottom: 2px; }
.dossier[data-open="true"] ~ .disclaimer { right: calc(clamp(420px, 50vw, 760px) + 16px); }
.disclaimer { transition: right .32s cubic-bezier(.22,.61,.36,1); }

/* Provisional zone codes carry a visible marker in the dossier, never colour alone. */
.provisional-tag {
  display: inline-block; font-size: 10px; font-weight: 650;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--status-warning); border: 1px solid currentColor;
  border-radius: 4px; padding: 1px 5px; margin-left: 6px; vertical-align: 1px;
}

@media (max-width: 720px) {
  .disclaimer { display: none; }
  .legend { bottom: 16px; }
  .dossier { width: 100vw; }
}

/* ---------- Layer control ---------- */
.layers {
  position: absolute; left: 16px; bottom: 178px; z-index: 10;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-panel);
  padding: 12px 14px; min-width: 232px;
}
.layers h5 {
  margin: 0 0 9px; font-size: 10px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
}
.layer-row {
  display: grid; grid-template-columns: 15px 16px 1fr auto;
  align-items: center; gap: 9px;
  padding: 5px 0; font-size: 12.5px; cursor: pointer; color: var(--ink-1);
}
.layer-row input { margin: 0; accent-color: var(--accent-focus); cursor: pointer; }
.layer-key { width: 16px; height: 11px; border-radius: 3px; }
.layer-key.parcels { background: var(--seq-400); opacity: .75; }
.layer-key.flood {
  background-image: repeating-linear-gradient(45deg, var(--accent-flood) 0 2px, transparent 2px 5px);
  border: 1px solid var(--accent-flood);
}
.layer-key.noise { background: var(--accent-flight); opacity: .45; border: 1px solid var(--accent-flight); }
.layer-count { font: 500 11px var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.layer-note { margin: 9px 0 0; font-size: 11px; color: var(--ink-3); line-height: 1.45; }

/* ---------- Corridor exposure headline ---------- */
.exposure {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 10;
  display: flex; align-items: stretch; gap: 0;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-panel);
  overflow: hidden;
}
.exposure-item { display: grid; gap: 1px; padding: 10px 18px; text-align: center; }
.exposure-num {
  font-size: 19px; font-weight: 680; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; color: var(--ink-1);
}
.exposure-label { font-size: 10.5px; color: var(--ink-3); letter-spacing: .01em; }
.exposure-sep { width: 1px; background: var(--border); }
.dossier[data-open="true"] ~ .exposure { transform: translateX(calc(-50% - clamp(210px, 25vw, 380px))); }
.exposure { transition: transform .32s cubic-bezier(.22,.61,.36,1); }

/* Overlap share sits beside the zone letter - a clipped parcel is a different
   fact from one wholly inside, and the number is the only thing that says so. */
.overlap-note { font-size: 11px; color: var(--ink-3); margin-left: 6px; }

.zone-list { display: grid; gap: 6px; margin-top: 8px; }
.zone-chip {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; padding: 6px 9px; border-radius: 6px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.zone-chip.sfha { border-left: 3px solid var(--status-critical); }
.zone-chip .z { font-weight: 650; }

.value-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.value-cell { background: var(--surface-2); border-radius: 8px; padding: 9px 11px; }
.value-cell .k { font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.value-cell .v { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; margin-top: 2px; }

@media (max-width: 900px) {
  .exposure { display: none; }
  .layers { bottom: 16px; left: 16px; min-width: 0; padding: 9px 11px; }
  .legend { display: none; }
}

/* ---------- Data vintage ---------- */
.vintage {
  margin-top: 12px; padding: 10px 12px;
  background: var(--surface-2);
  border-left: 3px solid var(--status-warning);
  border-radius: 6px;
  font-size: 11.5px; line-height: 1.55; color: var(--ink-2);
}
.vintage strong { display: block; color: var(--ink-1); margin-bottom: 3px; }
.vintage a { display: inline-block; margin-top: 7px; color: var(--accent-focus); font-weight: 600; }
.vintage-none { display: block; margin-top: 6px; font-style: italic; }

/* A revaluation is the most consequential number on a property card. */
.reval {
  margin: 9px 0 0; padding: 7px 10px; border-radius: 6px;
  background: color-mix(in srgb, var(--status-warning) 12%, transparent);
  font-size: 12px; font-weight: 600; color: var(--ink-1);
}

/* ---------- Context layers (collapsed) ---------- */
.layer-more { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 7px; }
.layer-more summary {
  cursor: pointer; font-size: 11px; color: var(--ink-3);
  letter-spacing: .05em; text-transform: uppercase; list-style: none;
  padding: 2px 0; user-select: none;
}
.layer-more summary::-webkit-details-marker { display: none; }
.layer-more summary::before { content: "▸ "; }
.layer-more[open] summary::before { content: "▾ "; }
.layer-key.wetland { background: #1baf7a; opacity: .55; }
.layer-key.septic  { background: #8a6100; opacity: .55; }
.layer-key.traffic { background: #e34948; height: 3px; }
.layer-key.utilities { background: #6b4fa0; opacity: .55; }

/* ---------- About ---------- */
.about-link {
  margin-top: 8px; border: 1px solid var(--border); background: var(--surface-1);
  color: var(--ink-2); border-radius: 999px; padding: 5px 13px;
  font: 500 12px var(--font); cursor: pointer; box-shadow: var(--shadow-panel);
}
.about-link:hover { color: var(--ink-1); border-color: var(--border-strong); }

dialog.about {
  border: 1px solid var(--border); border-radius: 14px; padding: 0;
  max-width: 620px; width: calc(100vw - 40px);
  background: var(--surface-1); color: var(--ink-1);
  box-shadow: 0 24px 70px rgb(0 0 0 / .3);
}
dialog.about::backdrop { background: rgb(0 0 0 / .45); backdrop-filter: blur(2px); }
.about-inner { padding: 26px 30px 28px; position: relative; }
.about-close { position: absolute; top: 16px; right: 16px; }
.about-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.about-mark { width: 38px; height: 38px; flex: none; color: var(--accent-focus); }
.about-inner h1, .about-inner h2 { margin: 0; font-size: 21px; letter-spacing: -0.022em; }
.about-tag { margin: 3px 0 0; font-size: 13px; color: var(--ink-2); }
.about-inner h3 {
  margin: 20px 0 7px; font-size: 11px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
}
.about-inner p { margin: 0 0 11px; font-size: 14px; line-height: 1.62; color: var(--ink-2); }
.about-inner strong { color: var(--ink-1); }
.about-inner ul { margin: 0 0 11px; padding-left: 20px; }
.about-inner li { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); margin-bottom: 5px; }
.about-foot {
  margin-top: 20px !important; padding-top: 14px; border-top: 1px solid var(--border);
  font-size: 12.5px !important; color: var(--ink-3) !important;
}

/* ---------- Market estimate + context sections ---------- */
.market-box {
  margin-top: 12px; padding: 12px 14px; border-radius: 8px;
  background: color-mix(in srgb, var(--accent-focus) 8%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--accent-focus) 22%, transparent);
}
.market-num { font-size: 21px; font-weight: 680; letter-spacing: -0.02em; }
.market-basis { font-size: 11.5px; color: var(--ink-2); line-height: 1.5; margin-top: 5px; }
.comp-row {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 12.5px; padding: 6px 0; border-bottom: 1px solid var(--border);
}
.comp-row:last-child { border-bottom: 0; }
.comp-addr { color: var(--ink-1); }
.comp-meta { color: var(--ink-3); font-variant-numeric: tabular-nums; flex: none; }
.flag {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.5; padding: 8px 0;
  border-bottom: 1px solid var(--border); color: var(--ink-2);
}
.flag:last-child { border-bottom: 0; }
.flag-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; margin-top: 5px; }
.flag strong { color: var(--ink-1); }

/* A town-wide Census likelihood, never mistaken for per-parcel evidence:
   dashed separator (real evidence rows use a solid one), italic, and a
   distinct muted-tan dot rather than the sewer/water palette above. */
.flag-likelihood {
  border-bottom-style: dashed;
  font-style: italic;
}
.flag-likelihood strong { color: var(--ink-2); font-style: normal; }

/* Public sewer & water evidence. Deliberately quieter than a risk finding:
   it is corroboration a reader weighs, not a determination. */
.util-note {
  margin: 8px 0 0; font-size: 11.5px; line-height: 1.5;
  color: var(--muted, #6b7480); font-style: italic;
}

/* At-a-glance yes/no/unknown marker in front of the Sewer:/Water: label.
   Reuses the site's existing risk-band palette (good/critical) rather than
   inventing a new one - "yes, sewered" and "low flood risk" are the same
   kind of good news, visually. `unknown` is deliberately NOT red or grey-
   sad - it is a plain neutral dash, because a town not publishing this data
   is not evidence the parcel lacks the service. */
.util-status {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%; flex: none;
  font-size: 10px; font-weight: 700; line-height: 1; margin-right: 2px;
  position: relative; top: -1px;
}
.util-status.yes {
  background: color-mix(in srgb, var(--status-good) 16%, transparent);
  color: var(--status-good);
}
.util-status.no {
  background: color-mix(in srgb, var(--status-critical) 14%, transparent);
  color: var(--status-critical);
}
.util-status.unknown {
  background: color-mix(in srgb, var(--ink-3) 16%, transparent);
  color: var(--ink-3);
}

/* Tweed exposure sentence. Carries the judgement call, so it reads as prose
   rather than as another measured field. */
.noise-summary {
  margin: 9px 0 0; font-size: 12.5px; line-height: 1.55;
  color: var(--ink-2, #43535f);
}

/* ---------- Start card (landing state) ---------- */
.start {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 72px; z-index: 9;
  width: min(560px, calc(100vw - 32px));
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-panel); padding: 14px 16px; font-size: 13px; color: var(--ink-2);
}
.start[hidden] { display: none; }
.start-head { display: grid; gap: 2px; margin-bottom: 10px; }
.start-head strong { color: var(--ink-1); font-size: 14px; }
.start-row { display: flex; flex-wrap: wrap; gap: 6px; }
.start-row:empty { display: none; }
.start-chip {
  border: 1px solid var(--border); background: var(--surface-2, transparent); color: var(--ink-1);
  border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 12.5px; cursor: pointer;
  display: inline-flex; gap: 6px; align-items: baseline;
}
.start-chip:hover { border-color: var(--accent, #0d366b); }
.start-chip .tag { color: var(--ink-2); font-size: 11px; }
.start-foot { margin-top: 10px; }
.start-close { position: absolute; top: 12px; right: 12px; background: transparent; border-color: transparent; }
.start-close:hover { background: var(--surface-2); border-color: var(--border); color: var(--ink-1); }
.start-head { padding-right: 28px; }
.start-foot a { color: var(--ink-1); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 640px) { .start { bottom: 16px; } .hint { display: none; } }
@media (max-width: 900px) { .start { left: auto; right: 16px; transform: none; width: min(420px, calc(100vw - 32px)); } }

/* ---------- request forms (About dialog; town pages carry their own copy) ---------- */
.about-ask { margin: 0 0 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-0); }
.about-ask label { display: block; font-size: 12.5px; color: var(--ink-2); margin: 8px 0 4px; }
.about-ask input { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-1); color: var(--ink-1); font: inherit; font-size: 14px; }
.about-ask button { margin-top: 10px; padding: 9px 14px; border: 0; border-radius: 8px; background: var(--accent-focus); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.about-ask .done, .about-ask .err { font-size: 14px; margin: 0; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Property research workspace */
:root { --radius:14px; --accent-focus:#166a68; }
.search { width:min(360px,calc(100vw - 32px)); }
.brand { box-shadow:none; border-radius:14px; }
.search-field { min-height:52px; box-shadow:0 5px 20px #102c2510; }
.search-field input { font-size:16px; }
.town-filter { display:flex; gap:12px; align-items:center; padding:8px 12px; margin-top:8px; background:var(--surface-1); border:1px solid var(--border); border-radius:10px; color:var(--ink-2); font-size:12px; }
.town-filter select { flex:1; min-width:0; background:transparent; border:0; color:var(--ink-1); font:inherit; padding:6px; }
.dossier { top:16px; right:16px; bottom:16px; width:clamp(540px,54vw,830px); border:1px solid var(--border); border-radius:18px; overflow:hidden; transform:translateX(calc(100% + 20px)); box-shadow:0 15px 60px #12302e20; }
.dossier-head { padding:24px 28px 20px; background:var(--surface-1); align-items:center; }
.dossier-head h2 { font-size:25px; letter-spacing:-.8px; font-weight:750; }
.dossier-head .sub { font-size:13px; margin-top:6px; color:var(--ink-2); }
.dossier-body { padding:0 28px 32px; scroll-behavior:smooth; }
.icon-btn { width:40px; height:40px; }
.report-open .exposure, .report-open .legend, .report-open .hint { display:none; }
.report-open .controls { right:calc(clamp(540px,54vw,830px) + 48px); }
.report-facts { display:grid; grid-template-columns:repeat(4,1fr); padding:20px 0; gap:12px; border-bottom:1px solid var(--border); }
.report-facts strong { font-size:21px; display:block; letter-spacing:-.6px; font-variant-numeric:tabular-nums; }
.report-facts span { font-size:11px; color:var(--ink-2); display:block; margin-top:5px; }
.report-actions { display:flex; gap:8px; flex-wrap:wrap; padding:18px 0 12px; align-items:center; }
.report-actions button,.report-actions a,.compare-form button { border:1px solid var(--border); border-radius:8px; background:var(--surface-1); padding:10px 12px; min-height:42px; font:600 12px var(--font); cursor:pointer; color:var(--ink-1); text-decoration:none; }
.report-actions a { background:#166a68; border-color:#166a68; color:white; margin-left:auto; }
.report-status { display:flex; align-items:center; flex-wrap:wrap; gap:7px; color:var(--ink-2); font-size:11px; padding-bottom:18px; }
.report-status>span:last-child { margin-left:auto; }
.status-dot { width:6px; height:6px; background:#166a68; border-radius:50%; }
.report-nav { display:flex; gap:20px; overflow-x:auto; padding:14px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.report-nav a { color:var(--ink-1); font-size:12px; font-weight:650; white-space:nowrap; text-decoration:none; padding:4px 0; }
.report-nav a:hover { color:var(--accent-focus); }
.report-section { padding:27px 0; border-bottom:1px solid var(--border); scroll-margin-top:16px; }
.section-kicker { color:var(--accent-focus); font-weight:750; letter-spacing:1.6px; font-size:9px; margin-bottom:8px; }
.report-section h3 { font-size:22px; line-height:1.2; letter-spacing:-.55px; margin:0 0 20px; }
.report-section p { color:var(--ink-2); font-size:13px; line-height:1.65; }
.finding-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.finding { border:1px solid var(--border); border-radius:12px; padding:17px; background:var(--surface-0); }
.finding>span { font-size:9px; font-weight:650; color:var(--ink-2); letter-spacing:1.2px; }
.finding h4 { text-transform:none; font-size:14px; line-height:1.4; letter-spacing:0; color:var(--ink-1); margin:9px 0 6px; }
.finding p { font-size:12px; line-height:1.5; margin:0; }
.finding.unknown { border-style:dashed; }
.attention { border-left:3px solid var(--status-warning) !important; }
.report-detail { margin-top:14px; padding:13px 0 0; }
.report-detail summary { cursor:pointer; font-size:12px; font-weight:650; color:var(--accent-focus); padding:6px 0; }
.report-kv { margin:14px 0; font-size:12px; }
.report-kv>div { display:flex; gap:20px; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border); }
.report-kv dt { color:var(--ink-2); flex:1; }
.report-kv dd { margin:0; flex:1.2; text-align:right; overflow-wrap:anywhere; }
.valuation-hero { background:#163e3b; color:#f7faf6; border-radius:14px; padding:25px; }
.valuation-hero>span { font-size:9px; letter-spacing:1.5px; color:#b4d8cf; }
.valuation-hero>strong { display:block; font-size:43px; line-height:1.15; letter-spacing:-1.8px; padding:13px 0 6px; font-variant-numeric:tabular-nums; }
.valuation-hero p { color:#c8dcd4; margin:0; font-size:12px; }
.valuation-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; padding:10px 0; }
.valuation-grid>div { padding:16px 0; border-bottom:1px solid var(--border); }
.valuation-grid span,.valuation-grid strong,.valuation-grid small { display:block; }
.valuation-grid span { font-size:11px; color:var(--ink-2); }
.valuation-grid strong { font-size:21px; letter-spacing:-.6px; margin:7px 0; }
.valuation-grid small { color:var(--ink-2); font-size:10px; line-height:1.5; }
.report-note { font-size:11px !important; }
.compare-form { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.compare-form label { display:grid; gap:8px; font-size:11px; color:var(--ink-2); }
.compare-form input { min-width:0; width:100%; padding:12px; border:1px solid var(--border-strong); background:var(--surface-1); color:var(--ink-1); border-radius:8px; font:16px var(--font); }
.compare-form button { grid-column:1/-1; background:var(--surface-2); }
.comparison-result { margin-top:12px; font-size:12px; line-height:1.7; color:var(--ink-2); }
.report-links { display:flex; gap:14px; flex-wrap:wrap; padding-top:12px; }
.report-links a { color:var(--accent-focus); font-size:12px; text-underline-offset:3px; }
.freshness { background:var(--surface-2); border-radius:8px; padding:12px 14px; font-size:11px; line-height:1.6; color:var(--ink-2); }
.sale-history { display:flex; flex-wrap:wrap; gap:12px; padding:18px 0; align-items:center; }
.sale-history>span { font-size:11px; color:var(--ink-2); width:100%; }
.sale-history strong { font-size:14px; }
.sale-history small { font-weight:400; color:var(--ink-2); font-size:11px; }
.sales-table { overflow-x:auto; }
.sales-table table { border-collapse:collapse; width:100%; font-size:12px; }
.sales-table th { text-align:left; font-weight:500; color:var(--ink-2); font-size:10px; }
.sales-table th,.sales-table td { padding:12px 8px; border-bottom:1px solid var(--border); }
.sales-table th:last-child,.sales-table td:last-child { text-align:right; white-space:nowrap; }
.sales-table small { display:block; color:var(--ink-2); margin-top:5px; font-size:10px; }
.report-property { font:600 12px var(--font); color:var(--accent-focus); padding:0; background:none; border:0; text-align:left; cursor:pointer; min-height:30px; }
.due-diligence { list-style:none; padding:0; margin:0; }
.due-diligence li { padding:13px 0; border-bottom:1px solid var(--border); }
.due-diligence label { display:flex; gap:12px; align-items:flex-start; color:var(--ink-2); font-size:13px; line-height:1.6; cursor:pointer; }
.due-diligence input { flex-shrink:0; width:17px; height:17px; accent-color:#166a68; margin-top:3px; }
.report-loading { padding:35px 0; }
.report-loading h3 { font-size:25px; }
.report-loading p { color:var(--ink-2); line-height:1.7; }
.start { padding:27px; border-radius:16px; width:min(580px,calc(100vw - 32px)); }
.start-head strong { font-size:26px; letter-spacing:-.6px; line-height:1.2; margin-bottom:8px; }
.start-head { line-height:1.7; margin-bottom:20px; }
.start-chip { border-radius:9px; padding:12px; min-height:44px; flex-wrap:wrap; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid var(--accent-focus); outline-offset:3px; }
@media(max-width:1100px) and (min-width:721px) { .search { width:280px; } .dossier { width:55vw; min-width:430px; } .report-open .layers { max-width:240px; } }
@media(max-width:720px) {
  .dossier { inset:140px 0 0; width:100%; min-width:0; border-radius:20px 20px 0 0; }
  .dossier-head { padding:18px; }
  .dossier-head h2 { font-size:22px; }
  .dossier-body { padding:0 18px 30px; }
  .report-facts { gap:8px; }
  .report-facts strong { font-size:18px; }
  .report-facts span { font-size:10px; }
  .report-actions { gap:6px; }
  .report-actions a { margin-left:0; }
  .report-section h3 { font-size:21px; }
  .finding { padding:13px; }
  .finding h4 { font-size:13px; }
  .report-open .layers,.report-open .controls,.report-open .about-link,.report-open .town-filter { display:none; }
  /* Leave the right-hand column to the theme/fullscreen controls (34px + 16px inset). */
  .search { top:12px; left:12px; width:calc(100vw - 74px); }
  .brand { margin-bottom:8px; }
  .search-field { min-height:46px; }
  .report-nav { gap:18px; }
  .valuation-hero>strong { font-size:38px; }
  .compare-form { grid-template-columns:1fr; }
  .start { max-height:50vh; overflow:auto; bottom:20px; }
  .layers { max-height:30vh; overflow:auto; }
  /* One bottom sheet at a time: the layer panel covered the example
     addresses while the start card was up. It returns once it is dismissed. */
  body:has(#start:not([hidden])) .layers { display:none; }
}
@media print {
  html,body { height:auto; overflow:visible; background:white; color:black; }
  body>*:not(.dossier) { display:none !important; }
  .dossier { display:block; position:static; width:100%; max-width:none; height:auto; transform:none; border:0; box-shadow:none; }
  .dossier-body { overflow:visible; }
  .dossier-head .icon-btn,.report-actions,.report-nav,.compare-form { display:none; }
  .report-section { break-inside:avoid; }
  .valuation-hero { color:black; background:#eee; }
  .valuation-hero p,.valuation-hero>span { color:#333; }
}