/* index.css — Analyse page. Loads after base.css. */

main {
  padding: 3rem 2rem;
}

.main-inner {
  max-width: 680px;
  margin: 0 auto;
}

/* ── Search section ── */
.search-label {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  line-height: 1.2;
  margin-bottom: 0.5rem;
  color: var(--ink);
}

/* Eyebrow above the H1 (2026-09-27). Carries the geography so the H1
   itself can stay short, and gives the page a start point above the
   fold that is not brand chrome. */
.hero-eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
  margin-bottom: 0.35rem;
}

.search-sub {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
  font-weight: 300;
  line-height: 1.6;
  max-width: 46ch;
}

.field-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 0.4rem;
}

/* ── Mode Toggle ── */
.mode-toggle-wrap {
  display: inline-flex;
  align-items: center;
  background: var(--border);
  border-radius: 20px;
  padding: 3px;
  margin-bottom: 1.5rem;
  gap: 2px;
}

.mode-toggle-btn {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.35rem 1rem;
  border-radius: 16px;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.mode-toggle-btn.active {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.mode-toggle-btn.active.develop {
  color: #6b4a8a;
}

.mode-toggle-btn.active.invest {
  color: var(--accent);
}

.mode-toggle-btn.active.home {
  color: #7c5c2e;
}

/* Result mode label (shown in results) */

/* Verdict — the one-sentence answer under the score */
.verdict-text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink);
  font-weight: 300;
  margin: 0.875rem 0 0;
}

.is-loading #res-verdict { visibility: hidden; }

/* ── Home Fake Door Panel ── */
#home-interest-panel {
  display: none;
  background: #fef9f2;
  border: 1px solid #f0dfc0;
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin-top: 1rem;
}

.home-panel-title {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
  letter-spacing: 0.02em;
}

.home-interest-form {
  display: flex;
  gap: 0.5rem;
}

.home-interest-input {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  outline: none;
  min-width: 0;
}

.home-interest-input:focus {
  border-color: #c4a265;
}

.home-interest-btn {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.55rem 1rem;
  border-radius: var(--radius);
  border: none;
  background: #7c5c2e;
  color: var(--white);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
  flex-shrink: 0;
}

.home-interest-btn:hover { background: #5e4422; }
.home-interest-btn:disabled { opacity: 0.5; cursor: default; }

.home-interest-thanks {
  font-size: 0.8rem;
  color: #7c5c2e;
  font-weight: 500;
  display: none;
  padding: 0.25rem 0;
}

.search-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.autocomplete-wrap {
  flex: 1;
  position: relative;
}

#autocomplete-container {
  position: relative;
  width: 100%;
}

.address-input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  transition: border-color 0.15s;
  appearance: none;
  box-sizing: border-box;
}

.address-input:focus { border-color: var(--ink); }
.address-input::placeholder { color: var(--ink-faint); }

/* Leading pin marks the field as an address field before a single
   character is typed. Pointer-events off so it never blocks focus. */
.addr-pin {
  position: absolute;
  left: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  color: var(--ink-faint);
  pointer-events: none;
}
.addr-pin svg { width: 15px; height: 15px; }
.address-input { padding-left: 2.3rem; }

/* Clear (×) button inside input */
.input-clear {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-faint);
  border-radius: 50%;
  padding: 0;
  transition: color 0.15s, background 0.15s;
}
.input-clear:hover { color: var(--ink); background: var(--border); }
.input-clear svg { width: 13px; height: 13px; }
/* Push input text left so it doesn't go under the × button */
.address-input.has-clear { padding-right: 2.2rem; }

.suggestions-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  z-index: 100;
  list-style: none;
  margin: 0; padding: 0;
}

.suggestions-list.open { display: block; }

.suggestions-list li {
  padding: 0.6rem 1rem;
  font-size: 0.875rem;
  color: var(--ink);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}

.suggestions-list li:last-child { border-bottom: none; }
.suggestions-list li:hover { background: var(--accent-lt); }

/* Honeypot */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; }

/* Accent green rather than ink (2026-09-27): this is the one action on
   the page, and green separates it from the neutral chrome around it. */
.btn-analyse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.75rem 1.5rem;
  background: var(--accent);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-analyse svg { width: 15px; height: 15px; flex-shrink: 0; }

/* "More ways to search" section (2026-09-27). The three value-lens
   cards that used to sit here were removed: the hero sub-copy now names
   all three lenses in a sentence, so the cards were repeating it at the
   cost of a screenful on mobile. */
.nav-section {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.nav-section-eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
}
.nav-section-title {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  line-height: 1.2;
  margin: 0.3rem 0 1rem;
}

/* Helper navigation cards. Icon, title and one line of description so a
   first-time visitor knows what each one does. White with a hairline
   border keeps them lighter than the Analyse button. */
.tool-nav {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.tool-nav a {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s;
}
.tool-nav a:hover { border-color: var(--ink-faint); }
.tool-nav .nav-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: var(--radius);
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
}
.tool-nav .nav-icon svg { width: 15px; height: 15px; }
.tool-nav .nav-body { flex: 1; min-width: 0; }
.tool-nav .nav-title {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
}
.tool-nav .nav-desc {
  display: block;
  font-size: 0.8rem;
  color: var(--ink-soft);
  font-weight: 300;
  line-height: 1.45;
}
.tool-nav .chev {
  flex-shrink: 0;
  align-self: center;
  color: var(--ink-faint);
  display: flex;
}
.tool-nav .chev svg { width: 14px; height: 14px; }

.try-example {
  margin-top: 0.65rem;
  font-size: 0.8rem;
  color: var(--ink-faint);
}
.try-example a {
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.try-example a:hover { color: var(--ink); }

.btn-analyse:hover { background: #24492f; }
.btn-analyse:disabled { background: var(--accent); opacity: 0.62; cursor: not-allowed; }

/* ── States ── */
/* Reserved-height slot so the eta hint and the live status occupy the
   same vertical space. Without it the page jumps when one swaps for
   the other. */
/* ══ Results: verdict card ══════════════════════════════════════
   Replaces the map thumbnail as the thing that anchors the top of the
   report. Score, recommendation and the one-line verdict read as one
   object rather than three stacked rows. */
.verdict-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 1.25rem;
}
/* The card clips to its rounded corners, which also cut off the score
   tooltip. Let it overflow only while a tooltip is open (2026-10-26). */
.verdict-card:has(.info-icon-wrap:hover),
.verdict-card:has(.info-icon-wrap.tooltip-open) { overflow: visible; }
/* Padding lives on the cells, not here — see the rating-row comment. */
.verdict-top { padding: 0; }

/* The score gets a ring so it reads as one object rather than a large
   number floating next to a badge. */
.verdict-card .rating-score-row {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid var(--accent-lt);
  background: #f2f7f3;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-shrink: 0;
  position: relative;
}
.verdict-card .rating-score { font-size: 1.75rem; }
.verdict-card .rating-score span { display: block; margin: 0; font-size: 0.6rem; }
/* The weighting tooltip would not fit inside the ring, so it sits just
   outside it, still beside the score it explains. */
.verdict-card #score-info-slot {
  position: absolute;
  right: -6px;
  bottom: -2px;
  background: var(--white);
  border-radius: 50%;
}
/* Ring left, badge over the verdict in the middle, parcel thumbnail right.
   Placement is explicit rather than auto-flow because .rating-left is a
   display:contents wrapper and the thumbnail can be absent — auto-placement
   would reshuffle the whole head the moment it appears. */
.verdict-card .rating-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 33.333%;
  align-items: start;
  gap: 0;
}
.verdict-card .rating-left { display: contents; }
/* Each cell carries its own gutter. The card gutter is 1.15rem, so the
   ring and the thumbnail keep it on the outside edges and the middle
   column is spaced by 1rem, matching the old grid gap. */
.verdict-card .rating-score-row {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin: 1.1rem 0 0.9rem 1.15rem;
}
.verdict-card .opportunity-badge {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  align-self: start;
  margin: 1.1rem 1rem 0 1rem;
}
.verdict-card .verdict-text {
  grid-column: 2;
  grid-row: 2;
  margin: 0.4rem 1rem 0.9rem 1rem;
  text-align: left;
}
.verdict-card .verdict-more { display: inline; }
.verdict-card .verdict-guide { display: block; margin-top: 0.4rem; font-size: 0.72rem; font-weight: 300; color: var(--ink-soft); }

/* Fills its third of the card, less the right gutter — so its left edge
   sits on the Satellite/Share divider below and its right edge on the same
   line as the chips. The aspect ratio matches the subflow export
   (size=600,280), so object-fit: cover crops nothing; widening the cell
   shows more land rather than a tighter crop of the same frame.

   It also caps the verdict's line length, which was running the full
   680px of the card. */
.parcel-thumb {
  grid-column: 3;
  grid-row: 1 / span 2;
  width: auto;
  margin: 1.1rem 1.15rem 0.9rem 0;
  aspect-ratio: 600 / 280;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: border-color 0.15s;
}
.parcel-thumb:hover { border-color: var(--ink-faint); }
.parcel-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Marks the subject property. "Build BBox" buffers equally either side of
   the geocoded point, so it is always dead centre of the export; and
   object-fit: cover crops from the edges inward, so the centre survives at
   both sizes. Without this the thumbnail is just a street grid — it shows
   a neighbourhood but never says which parcel is yours. */
.parcel-thumb::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  background: #e53e3e;
  border: 2px solid var(--white);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
  pointer-events: none;
}
/* A 9px dot on a 62px square reads as a blob, so it shrinks with it. */
@media (max-width: 520px) {
  .parcel-thumb::after { width: 7px; height: 7px; border-width: 1.5px; }
}
.parcel-thumb-cap {
  position: absolute;
  right: 3px;
  bottom: 3px;
  background: rgba(255,255,255,0.92);
  border-radius: 2px;
  padding: 1px 4px;
  font-size: 0.6rem;
  color: var(--ink-soft);
  line-height: 1.4;
}
/* Never show a half-built card during the skeleton pass. */
.is-loading .parcel-thumb { display: none !important; }
.verdict-card .rating-row { margin: 0; }
.verdict-card .verdict-text { margin-top: 0.7rem; }

.chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 1.15rem;
  border-top: 1px solid var(--border);
}
/* The vision badges share the strip with the fact chips, so they take the
   chip treatment too — otherwise half the row is boxed and half is not.
   Their own separators and row spacing would double up. */
.verdict-card .vision-meta { display: contents; }
.verdict-card .vision-badge + .vision-badge::before { content: none; }
.verdict-card .vision-badge {
  font-size: 0.72rem;
  padding: 0.22rem 0.55rem;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--ink);
}
/* Condition keeps its sentiment colour, but on the chip text only. */
.verdict-card .vision-badge.good { color: var(--accent); }
.verdict-card .vision-badge.fair { color: var(--caution); }
.verdict-card .vision-badge.poor { color: var(--warn); }

/* Equal-width columns so this row lines up with the lens tabs directly
   below it — as inline-width buttons the two rows read as unrelated.
   flex with flex:1 rather than a grid, because Satellite stays hidden
   until coordinates arrive and a grid would hold its column open. */
/* Full-bleed row of equal thirds, divided by hairlines rather than
   gaps. Inset by the card gutters the buttons did not line up with the
   lens tabs below; edge to edge, the two rows read as one control
   stack. flex with flex:1 rather than a grid, because Satellite stays
   hidden until coordinates arrive and a grid would hold its column. */
.verdict-card .map-controls {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 0;
}
.verdict-card .map-controls .btn-frontage {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  padding: 0.7rem 0.4rem;
  border: none;
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: var(--white);
}
/* :last-of-type, not :last-child — Satellite can be hidden, so the
   last VISIBLE button is not always the last element. */
.verdict-card .map-controls .btn-frontage:last-of-type { border-right: none; }
.verdict-card .map-controls .btn-frontage:hover { background: var(--paper); }

/* Share now opens inside the card, so it takes the card's gutters
   instead of its old standalone margins and full-width rule. */
.verdict-card .share-bar {
  margin: 0;
  padding: 0.7rem 1.15rem;
  border-top: 1px solid var(--border);
}
@media (max-width: 520px) {
  .verdict-card .share-bar { padding-left: 0.9rem; padding-right: 0.9rem; }
  .verdict-card .share-bar .share-buttons { margin-left: 0; }
}

/* ══ Results: lens tabs ═════════════════════════════════════════
   A real tablist, not the old pill toggle. On mobile the single
   continuous report buried Invest and Home under a long scroll. */
.lens-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2px;
  margin-bottom: 1.5rem;
}
.lens-tab {
  padding: 0.55rem 0.3rem;
  background: transparent;
  border: none;
  border-radius: 3px;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s, color 0.18s;
}
.lens-tab.active {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.lens-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lens-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
/* Score chip: muted on inactive tabs, accent on the active one, so the
   highlighted number matches the report on screen. */
.lens-tab-score {
  font-size: 0.72rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
  background: rgba(0,0,0,0.05);
  color: var(--ink-soft);
}
.lens-tab-score:empty { display: none; }
/* Home score pending (2026-10-25): it arrives from /api/dailylife shortly after the result. */
.lens-tab-score.pending { animation: scorePulse 1.2s ease-in-out infinite; }
@keyframes scorePulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.persona-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin: 0 1.15rem 0.9rem; font-size: 0.75rem; color: var(--ink-soft); }
.persona-row .persona-label { margin-right: 0.2rem; }
.persona-btn { font: inherit; font-size: 0.75rem; padding: 0.25rem 0.6rem; border: 1px solid var(--border); border-radius: 999px; background: var(--white); color: var(--ink-soft); cursor: pointer; }
.persona-btn.active { background: var(--accent-lt); border-color: var(--accent); color: var(--accent); font-weight: 500; }
.persona-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lens-tab.active .lens-tab-score { background: var(--accent-lt); color: var(--accent); }

.lens-panel { display: none; }
.lens-panel.active { display: block; }
/* Every panel is hidden while the skeleton shows, so a half-populated
   grid never flashes before the payload lands. */
.is-loading .lens-panel,
.is-loading .lens-tabs { display: none !important; }

.block-label {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
  margin: 1.5rem 0 0.5rem;
}
.lens-panel > .block-label:first-child { margin-top: 0; }

.growth-tile {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1.75rem;
}
.growth-tile .demo-stats-row + .demo-stats-row { margin-top: 1px; }
/* Source line + confidence badge (5e, 15/10) */
.growth-src { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; font-size: 0.72rem; color: var(--ink-soft); margin-bottom: 0.75rem; }
.growth-badge { display: inline-block; font-size: 0.65rem; font-weight: 500; padding: 1px 7px; border-radius: 999px; letter-spacing: 0.02em; cursor: help; }
.growth-badge.t1 { background: var(--accent-lt); color: var(--accent); }
.growth-badge.t2 { background: var(--caution-lt); color: var(--caution); }
.growth-badge.t3 { background: #eef1f6; color: #4a5568; }
.growth-badge.t4 { background: var(--border); color: var(--ink-soft); }
.growth-note { font-size: 0.68rem; color: var(--ink-soft); font-style: italic; margin-top: 0.5rem; }
.val-note { display: block; font-size: 0.72rem; color: var(--ink-soft); font-weight: 300; margin-top: 0.2rem; line-height: 1.4; }
abbr.gloss { text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; position: relative; }
abbr.gloss:hover::after, abbr.gloss:focus::after {
  content: attr(data-tip);
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 50;
  width: max-content; max-width: 260px; white-space: normal;
  padding: 0.45rem 0.6rem; border-radius: 4px;
  background: #1a1a18; color: #fff;
  font-size: 0.72rem; font-weight: 400; line-height: 1.4; text-transform: none; letter-spacing: 0;
}
abbr.gloss:focus { outline: none; }
.val-note.warn { color: var(--caution); }
/* Est. value info tip (1c, 29/10) — hover on desktop, tap/focus on mobile */
.val-tip { position: relative; display: inline-block; cursor: help; margin-left: 0.2rem; outline: none; }
.val-tip .val-tip-text {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 100;
  width: max-content; max-width: 220px; padding: 0.45rem 0.65rem;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  font-size: 0.72rem; font-weight: 300; line-height: 1.4; color: var(--ink);
}
.val-tip:hover .val-tip-text,
.val-tip:focus .val-tip-text { display: block; }

@media (max-width: 520px) {
  .lens-tab { font-size: 0.75rem; padding: 0.55rem 0.15rem; gap: 0.3rem; }
  .lens-tab-score { font-size: 0.68rem; padding: 0.18rem 0.3rem; }
  .verdict-top, .chip-row, .verdict-card .map-controls { padding-left: 0.9rem; padding-right: 0.9rem; }
  /* Chips were wrapping to three rows on a phone. */
  .chip-row { gap: 0.3rem; }
  .verdict-card .vision-badge { font-size: 0.68rem; padding: 0.2rem 0.45rem; }
  .verdict-card .rating-score-row { width: 62px; height: 62px; }
  .verdict-card .rating-score { font-size: 1.5rem; }

  /* Phone: ring, thumbnail and badge share row one; the verdict takes the
     full width beneath. A 132px thumbnail here would squeeze the verdict
     into a three-word column, so it drops to a square matching the ring —
     the card grows by nothing. */
  .verdict-card .rating-row { grid-template-columns: auto auto minmax(0, 1fr); gap: 0 0.6rem; }
  .verdict-card .rating-score-row { grid-row: 1; }
  /* Phone head: two cells on top — score with its badge beneath, and the
     thumbnail taking the rest of the width — then the narration across
     the full width below.

     The thumbnail was a 62px square, which cropped a 2.14:1 export down
     to its middle third and threw away the neighbouring parcels either
     side. Letting it fill the second column instead means it keeps the
     export's own aspect ratio and crops nothing, which is the whole
     reason the thumbnail is worth its space.

     Three rows rather than two: stacking the badge under the ring frees
     the full card width for the verdict, which was wrapping to three
     lines in a squeezed column. */
  .verdict-card .rating-row {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 1.1rem 0.9rem 0.9rem;
    gap: 0 0.9rem;
  }
  .verdict-card .rating-score-row { grid-column: 1; grid-row: 1; margin: 0; }
  .verdict-card .opportunity-badge {
    grid-column: 1;
    grid-row: 2;
    margin: 0.55rem 0 0;
  }
  .parcel-thumb {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: auto;
    height: auto;
    aspect-ratio: 600 / 280;
    margin: 0;
    align-self: start;
  }
  /* Big enough again to carry its own affordance. */
  .parcel-thumb-cap { display: block; }
  .verdict-card .verdict-text {
    grid-column: 1 / -1;
    grid-row: 3;
    margin: 0.8rem 0 0;
  }
  /* Three equal thirds hold at phone width; only the type shrinks. */
  .verdict-card .map-controls .btn-frontage { font-size: 0.72rem; padding: 0.65rem 0.2rem; }
}

.reset-bar {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  text-align: center;
}

.btn-reset {
  padding: 0.7rem 1.4rem;
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 400;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.btn-reset:hover { border-color: var(--ink-faint); color: var(--ink); }

.is-loading .reset-bar { display: none !important; }

/* Header wordmark is a link to /. Users expect logo-equals-home, and it
   is a second, conventional route back to a clean search. */

/* The eta hint and the live status are built as the SAME card so one can
   replace the other without the page jumping. min-height matches a
   two-line card, which is what both render as. */
.status-slot {
  margin-top: 0.9rem;
  min-height: 3.6rem;
}

/* Once the run finishes, both cards are hidden and the reserved height
   would otherwise leave a visible band of empty space under the form. */
.status-slot.is-empty { min-height: 0; margin-top: 0; }

.status-card {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
}
.status-card > svg,
.status-card > .spinner { flex-shrink: 0; margin-top: 0.15rem; }
.status-card > svg { width: 15px; height: 15px; color: var(--ink-soft); }
.status-title { font-size: 0.82rem; font-weight: 500; color: var(--ink); }
.status-sub {
  font-size: 0.75rem;
  color: var(--ink-soft);
  font-weight: 300;
  line-height: 1.45;
}

#status {
  font-size: 0.875rem;
  color: var(--ink-soft);
  display: none;
  align-items: center;
  gap: 0.75rem;
}

/* Stage copy is given a reserved width because the messages differ in
   length; without it the counter that follows would jump sideways each
   time the message rotates. */
.status-line {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--ink);
}
#status-text {
  display: inline-block;
  min-width: 15.5rem;
}

#status-elapsed {
  font-size: 0.8rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 520px) {
  #status-text { min-width: 0; }
  #status { flex-wrap: wrap; gap: 0.4rem 0.6rem; }
}

#status.visible { display: flex; }

.spinner {
  width: 14px; height: 14px;
  border: 2px solid var(--ink-faint);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes spin { to { transform: rotate(360deg); } }

#error-msg {
  margin-top: 1.5rem;
  padding: 0.875rem 1rem;
  background: var(--warn-lt);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius);
  font-size: 0.875rem;
  color: var(--warn);
  display: none;
}

#error-msg.visible { display: block; }

/* ── Result card ── */
#result {
  margin-top: 2.5rem;
  display: none;
  animation: fadeUp 0.3s ease;
}

#result.visible { display: block; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Skeleton shimmer ─────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

.skel {
  display: inline-block;
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--border) 25%, #ebebE5 50%, var(--border) 75%);
  background-size: 600px 100%;
  animation: shimmer 1.4s infinite linear;
}

/* Hide real values during loading — skeletons render in their place */
.is-loading #res-summary,
.is-loading .data-cell-value,
.is-loading #flags-row,
.is-loading #res-badge,
.is-loading #res-rating,

/* Skeleton placeholder elements — visible only during loading */
.skel-item { display: none; }
.is-loading .skel-item {
  display: block;
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--border) 25%, #ebebE5 50%, var(--border) 75%);
  background-size: 600px 100%;
  animation: shimmer 1.4s infinite linear;
}
.is-loading .skel-item.inline { display: inline-block; }

/* Hide data-only sections until real data arrives */
.is-loading #comparables-block,
.is-loading #gradient-block,
.is-loading #unrecognised-block,
.is-loading #share-bar,
.is-loading #feedback-bar { display: none !important; }

/* Smooth fade when real data replaces skeleton */
#result.data-loaded { animation: fadeUp 0.25s ease; }

.result-address {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-bottom: 1.25rem;
  font-weight: 500;
}

/* Share bar */
.share-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.5rem 0 1.75rem;
  padding: 1rem 0 0;
  border-top: 1px solid var(--border);
}
.share-bar .share-buttons { margin-left: auto; }
.share-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-soft);
  margin-right: 0.25rem;
  white-space: nowrap;
}
.share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 500;
  font-family: var(--font-sans);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.share-btn:hover { background: var(--border); border-color: var(--ink-faint); }
.share-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.share-wa  { color: #128c4f; }
.share-li  { color: #0077b5; }
.share-copy.copied { color: var(--accent); border-color: var(--accent); }

/* Feedback bar */
.feedback-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding: 0.65rem 1rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.feedback-label {
  font-size: 0.8rem;
  color: var(--ink-soft);
  flex: 1;
}
.feedback-buttons { display: flex; gap: 0.4rem; }
.feedback-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.feedback-btn:hover { background: var(--accent-lt); border-color: var(--accent); color: var(--accent); }
.feedback-btn svg { width: 15px; height: 15px; }
.feedback-btn.active-up   { background: var(--accent-lt); border-color: var(--accent); color: var(--accent); }
.feedback-btn.active-down { background: var(--warn-lt);   border-color: var(--warn);   color: var(--warn); }

/* Rating bar */
/* One horizontal band: the number, what it means, and the lens that
   produced it. Separation comes from spacing, not rules. */
.rating-row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  flex-wrap: wrap;
  margin: 0.875rem 0 0;
}
.rating-left { display: flex; align-items: center; gap: 0.875rem; flex: 1; }
.rating-score-row { display: flex; align-items: baseline; gap: 0.5rem; }
.rating-badge-row { display: flex; align-items: center; gap: 0.5rem; }
#result-mode-toggle { margin-left: auto; }

/* Tooltip sits beside the score it explains. Muted until hovered so it
   doesn't compete with the number. */
#score-info-slot .info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: 0.65rem;
  font-style: italic;
  font-family: var(--font-serif);
  color: var(--ink-faint);
  cursor: pointer;
  transition: color 0.15s;
}
#score-info-slot .info-icon-wrap:hover .info-icon,
#score-info-slot .info-icon-wrap.tooltip-open .info-icon { color: var(--ink-soft); }
.is-loading #score-info-slot { visibility: hidden; }

/* Map controls sit directly under the map — they act on it. */
.map-controls {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.5rem 0 0;
}

/* Building metadata sits below the verdict, not above it. */
.vision-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem 0.5rem;
  flex-wrap: wrap;
  margin: 0.875rem 0 0;
}
.is-loading .vision-meta { visibility: hidden; }

.is-loading #res-rating { visibility: hidden; }

.rating-score {
  font-family: var(--font-serif);
  font-size: 3rem;
  line-height: 1;
  color: var(--ink);
}

.rating-score span {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-left: 0.25rem;
  font-weight: 300;
}

/* ── Score Tooltip ── */
/* ── Info Icon Tooltip Wrap ── */
.info-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.info-icon-wrap .score-tooltip {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 100;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  padding: 0.85rem 1rem;
  min-width: 230px;
  pointer-events: none;
}

.info-icon-wrap:hover .score-tooltip,
.info-icon-wrap.tooltip-open .score-tooltip {
  display: block;
}

.score-tooltip-title {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.6rem;
}

.score-tooltip table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.score-tooltip td {
  padding: 0.18rem 0;
  color: var(--ink);
  line-height: 1.4;
}

.score-tooltip td:last-child {
  text-align: right;
  color: var(--ink-soft);
  font-weight: 500;
}

.score-tooltip tr:not(:last-child) td {
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.28rem;
  margin-bottom: 0.28rem;
}

.score-tooltip-note {
  font-size: 0.7rem;
  color: var(--ink-soft);
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
  line-height: 1.4;
}

.rating-right {
  text-align: right;
}

.opportunity-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 2px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.badge-buy    { background: var(--accent-lt);  color: var(--accent); }
.badge-caution{ background: var(--caution-lt); color: var(--caution); }
.badge-avoid  { background: var(--warn-lt);    color: var(--warn); }
.badge-default{ background: var(--border);     color: var(--ink-soft); }

.rating-emoji { font-size: 1.25rem; margin-top: 0.4rem; display: block; }

/* Summary */
.summary-text {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: 1.75rem;
  font-weight: 300;
}

/* Data grid */
.data-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1.75rem;
}

.data-cell {
  background: var(--white);
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
}

.data-cell:nth-child(2n) {
  border-right: none;
}

.data-cell:nth-last-child(-n+2) {
  border-bottom: none;
}

.data-cell-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-soft);
  font-weight: 500;
  margin-bottom: 0.2rem;
}

.data-cell-value {
  font-size: 0.9375rem;
  color: var(--ink);
  font-weight: 400;
}

.data-cell-value.mono {
  font-variant-numeric: tabular-nums;
}

/* Market Type badge */
.market-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0.15rem 0.5rem;
  border-radius: 2rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.market-badge.established { background: var(--accent-lt); color: var(--accent); }
.market-badge.emerging    { background: var(--caution-lt); color: var(--caution); }
.market-badge.growth      { background: #e8f0ff; color: #2255cc; }

/* Demographics panel */
.demographics-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1.75rem;
}

.demographics-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--white);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  user-select: none;
}
.demographics-toggle:hover { background: var(--paper); }

.demo-chevron {
  font-size: 0.65rem;
  color: var(--ink-soft);
  transition: transform 0.2s;
}
.demo-chevron.open { transform: rotate(180deg); }

.demographics-body {
  padding: 1rem;
  background: var(--white);
  border-top: 1px solid var(--border);
}

.demo-chart-wrap {
  margin-bottom: 1rem;
}
.demo-chart-wrap canvas {
  width: 100%;
  display: block;
}

.demo-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

@media (max-width: 600px) {
  .demo-charts-row { grid-template-columns: 1fr; gap: 0.5rem; }
  .demo-stats-row { grid-template-columns: 1fr 1fr; }
}

.rental-flagged-note {
  font-size: 0.68rem;
  color: var(--ink-soft);
  margin-top: 0.35rem;
  font-style: italic;
}

.demo-chart-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-soft);
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.demo-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.demo-stat {
  background: var(--paper);
  padding: 0.75rem;
}

.demo-stat-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-soft);
  font-weight: 500;
  margin-bottom: 0.2rem;
}

.demo-stat-value {
  font-size: 0.9375rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
  .demo-stats-row { grid-template-columns: 1fr 1fr; }
}

/* Flags */
.flags-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.flags-block { }

.flags-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.flags-title.green { color: var(--accent); }
.flags-title.red   { color: var(--warn); }

.flags-list {
  list-style: none;
  font-size: 0.875rem;
  color: var(--ink);
  font-weight: 300;
}

.flags-list li {
  padding: 0.2rem 0;
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
}

.flags-list li::before {
  content: '—';
  color: var(--ink-faint);
  flex-shrink: 0;
  font-size: 0.75rem;
  margin-top: 0.15rem;
}

/* Subdivision */
.subdivision-block {
  padding: 1rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 1.75rem;
}

.subdivision-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-soft);
  font-weight: 500;
  margin-bottom: 0.35rem;
}

.scenario-caption {
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-style: italic;
  margin: 0 0 0.6rem;
}

.subdivision-text {
  font-size: 0.875rem;
  color: var(--ink);
  font-weight: 300;
  line-height: 1.6;
}

/* Free space assessment */
.fs-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 0.75rem; }
.fs-badge { font-size: 0.8rem; font-weight: 500; padding: 4px 10px; border-radius: 999px; }
.fs-badge.yes { background: #e8f3ec; color: #2f6b45; }
.fs-badge.no  { background: #f6e8e8; color: #8a2f2f; }
.fs-badge.na  { background: #f1f1f1; color: #666; }
.fs-badge-note { font-weight: 300; }
.fs-stats { font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 0.75rem; }
#freespace-map { height: 380px; border-radius: var(--radius); border: 1px solid var(--border); }
.fs-legend { display: flex; flex-wrap: wrap; gap: 0.9rem; font-size: 0.72rem; color: var(--ink-soft); margin-top: 0.5rem; }
.fs-legend span::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px; border-radius: 2px; background: var(--c); }
.fs-note { font-size: 0.72rem; color: var(--ink-soft); margin-top: 0.5rem; }

/* Zone rules table */
.zone-rules-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  margin-top: 1rem;
}

.zone-rules-table th {
  text-align: left;
  padding: 5px 8px;
  font-weight: 500;
  color: var(--ink-soft);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
}

.zone-rules-table th:not(:first-child) {
  text-align: center;
}

.zone-rules-table td {
  padding: 7px 8px;
  border-bottom: 1px solid #f0f0f0;
  color: var(--ink);
}

.zone-rules-table td:not(:first-child) {
  text-align: center;
}

.zone-rules-table tbody tr:last-child td {
  border-bottom: none;
}

.zone-rules-footnote {
  font-size: 0.7rem;
  color: var(--ink-faint);
  margin-top: 0.5rem;
}

.zone-src-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: 1px;
}
.zone-src-badge.src-code { background: #e8f3ec; color: #2f6b45; }
.zone-src-badge.src-tnv  { background: #e8eef8; color: #2f4f86; }
.zone-src-badge.src-ind  { background: #fbf1dc; color: #8a6412; }

.zone-rules-basis {
  font-size: 0.7rem;
  color: var(--ink-soft);
}

.zone-rules-caveat {
  font-size: 0.78rem;
  color: #8a6412;
  margin-top: 0.75rem;
  line-height: 1.5;
}

.zone-rules-notes {
  margin: 0.75rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.55;
}
.zone-rules-notes li { margin-bottom: 0.2rem; }

.zone-overlays {
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}
.zone-overlays-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  font-weight: 500;
}
.zone-overlays .zone-rules-notes { margin-top: 0.4rem; }
.zone-overlays-foot {
  font-size: 0.7rem;
  color: var(--ink-faint);
  margin-top: 0.4rem;
}

.verdict-more {
  display: inline;
  background: none;
  border: none;
  padding: 0;
  margin-left: 4px;
  font: inherit;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.verdict-more:hover { color: var(--ink); }

/* Unrecognised state */
.unrecognised-block {
  padding: 1.25rem;
  background: var(--caution-lt);
  border-left: 3px solid var(--caution);
  border-radius: var(--radius);
  font-size: 0.875rem;
  color: var(--caution);
  line-height: 1.6;
}

/* Gradient / Topographic table */
.gradient-block {
  padding: 1rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 1.75rem;
}

.gradient-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-soft);
  font-weight: 500;
  margin-bottom: 0.75rem;
}

.gradient-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.gradient-table th {
  text-align: left;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  font-weight: 500;
  padding: 0 0 0.4rem;
  border-bottom: 1px solid var(--border);
}

.gradient-table td {
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
  vertical-align: top;
  line-height: 1.5;
}

.gradient-table tr:last-child td { border-bottom: none; }

.gradient-table td:nth-child(2) {
  font-weight: 500;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  min-width: 110px;
}

.gradient-table td:nth-child(3) {
  color: var(--ink-soft);
  font-weight: 300;
}

@media (max-width: 600px) {
  .gradient-table td:nth-child(2) { min-width: 0; padding-left: 0.5rem; padding-right: 0.5rem; }
  .gradient-table td:nth-child(3) { font-size: 0.72rem; }
}

.slope-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 2px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.slope-flat     { background: var(--accent-lt);  color: var(--accent); }
.slope-gentle   { background: var(--accent-lt);  color: var(--accent); }
.slope-moderate { background: var(--caution-lt); color: var(--caution); }
.slope-steep    { background: var(--warn-lt);    color: var(--warn); }

/* ── Offer fake door (2026-10-08) ──
   Painted-door test: three ways to get an offer to the owner. Nothing is
   sent or charged; clicks and emails are logged to the Feedback tab via
   /api/feedback to measure demand and willingness to pay. */
.offer-section {
  display: none;
  margin-top: 1.75rem;
  padding: 1.1rem 1.15rem 1.2rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.offer-section.visible { display: block; }
.is-loading .offer-section { display: none !important; }
.offer-eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
}
.offer-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.25;
  margin: 0.25rem 0 0.2rem;
}
.offer-sub {
  font-size: 0.82rem;
  color: var(--ink-soft);
  font-weight: 300;
  margin-bottom: 0.9rem;
}
/* Compact selector (2026-10-23): one choice, one button. Nothing is
   preselected so the default does not skew the option mix. */
.offer-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45rem; }
.offer-seg-btn {
  font-family: var(--font-sans);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 0.4rem;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}
.offer-seg-btn:hover { border-color: var(--ink-faint); }
.offer-seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.offer-seg-btn[aria-pressed="true"] { background: var(--accent-lt); border-color: var(--accent); }
.offer-price {
  display: block;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.offer-seg-btn[aria-pressed="true"] .offer-price { color: var(--accent); }
.offer-seg-lbl {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
  margin-top: 0.15rem;
}
.offer-desc {
  min-height: 2.6rem;
  font-size: 0.82rem;
  color: var(--ink);
  font-weight: 300;
  line-height: 1.5;
  margin: 0.75rem 0 0.85rem;
}
.offer-desc.empty { color: var(--ink-soft); }
.offer-btn {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.45rem 0.9rem;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--white);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.offer-btn:hover { background: #24492f; }
.offer-cta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-size: 0.9rem;
  padding: 0.8rem 1rem;
}
.offer-cta svg { width: 16px; height: 16px; flex-shrink: 0; }
.offer-cta:disabled { opacity: 0.45; cursor: not-allowed; }
.offer-cta:disabled:hover { background: var(--accent); }
.offer-foot {
  font-size: 0.7rem;
  color: var(--ink-soft);
  font-weight: 300;
  margin-top: 0.65rem;
  text-align: center;
}
@media (max-width: 420px) {
  .offer-price { font-size: 1rem; }
  .offer-seg-lbl { font-size: 0.6rem; letter-spacing: 0.03em; }
}

.offer-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 24, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 1000;
}
.offer-modal-backdrop.open { display: flex; }
.offer-modal {
  width: 100%;
  max-width: 420px;
  background: var(--white);
  border-radius: 6px;
  padding: 1.25rem 1.25rem 1.1rem;
  box-shadow: 0 10px 40px rgba(0,0,0,0.18);
}
.offer-modal h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.2rem;
  margin-bottom: 0.4rem;
}
.offer-modal p {
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-weight: 300;
  line-height: 1.55;
  margin-bottom: 0.9rem;
}
.offer-modal-chosen {
  font-size: 0.8rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.45rem 0.65rem;
  margin-bottom: 0.9rem;
}
.offer-modal label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 0.3rem;
}
.offer-modal input {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.8rem;
  outline: none;
}
.offer-modal input:focus { border-color: var(--ink); }
.offer-modal-error {
  display: none;
  font-size: 0.75rem;
  color: var(--warn);
  margin: -0.5rem 0 0.8rem;
}
.offer-modal input.invalid { border-color: var(--warn); }
.offer-modal-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
.offer-modal-actions .btn-reset { padding: 0.55rem 1rem; }
.offer-modal-thanks {
  display: none;
  font-size: 0.875rem;
  color: var(--accent);
  font-weight: 500;
  padding: 0.25rem 0 0.5rem;
}

/* Lens-scoped badge ("Development · BUY") is longer; on a phone it sits
   under the ring, so let it wrap rather than widen that column. */
@media (max-width: 520px) {
  .verdict-card .opportunity-badge {
    white-space: normal;
    max-width: 7.5rem;
    line-height: 1.35;
    letter-spacing: 0.06em;
  }
}

/* Print: drop interactive asks and keep the search links together. */
@media print {
  .offer-section, .feedback-bar, .offer-modal-backdrop, #btn-reset { display: none !important; }
  .nav-section, .tool-nav a { break-inside: avoid; page-break-inside: avoid; }
}

/* Divider */
.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.75rem 0;
}

/* Responsive */
@media (max-width: 520px) {
  .search-row { flex-direction: column; }
  .btn-analyse { width: 100%; }
  .data-grid { grid-template-columns: 1fr; }
  .data-cell { border-right: none; }
  .data-cell:nth-last-child(-n+2) { border-bottom: 1px solid var(--border); }
  .data-cell:last-child { border-bottom: none; }

  /* The single-column collapse above dates from the old ten-cell grid,
     where long labels genuinely needed the full width. Each lens panel
     now holds exactly four short cells, which read fine as a 2x2 on a
     phone and save most of a screen of scrolling — so the panels opt
     back out of it, and get their two-column borders back with it. */
  .lens-panel .data-grid { grid-template-columns: 1fr 1fr; }
  .lens-panel .data-cell { border-right: 1px solid var(--border); }
  .lens-panel .data-cell:nth-child(2n) { border-right: none; }
  .lens-panel .data-cell:nth-last-child(-n+2) { border-bottom: none; }
  /* An odd cell count leaves a lone cell on the last row; it owns the
     full width there, so it must not keep a right-hand border. */
  .lens-panel .data-cell:last-child:nth-child(odd) { border-right: none; }
  .lens-panel .data-cell { padding: 0.75rem 0.8rem; }

  .flags-row { grid-template-columns: 1fr; }
  .rating-score { font-size: 2.25rem; }
}

.rental-badge {
  display: inline-block;
  font-size: 0.65rem;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 600;
  vertical-align: middle;
  margin-left: 4px;
  letter-spacing: 0.03em;
}
.rental-badge-gov {
  background: #e8e8e8;
  color: #444;
}
.rental-badge-est {
  background: #faeeda;
  color: #854f0b;
}

/* Comparable sales */
.comparables-block {
  padding: 1rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 1.75rem;
}

.comparables-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-soft);
  font-weight: 500;
  margin-bottom: 0.75rem;
}

.comparables-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.comparables-table th {
  text-align: left;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  font-weight: 500;
  padding: 0 0 0.4rem;
  border-bottom: 1px solid var(--border);
}

.comparables-table td {
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
  vertical-align: top;
  line-height: 1.5;
}

.comparables-table tr:last-child td { border-bottom: none; }

.comparables-table td:nth-child(1) { width: 40%; }
.comparables-table td:nth-child(2) { font-weight: 500; padding-left: 0.5rem; padding-right: 0.5rem; white-space: nowrap; }
.comparables-table td:nth-child(3) { color: var(--ink-soft); white-space: nowrap; }
.comparables-table td:nth-child(4) { color: var(--ink-soft); white-space: nowrap; }
.comparables-table td:nth-child(5) { text-align: right; white-space: nowrap; }

.comparables-address {
  color: var(--ink);
  font-weight: 400;
}

.domain-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--accent);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 2px 6px;
  border: 1px solid var(--accent-lt);
  border-radius: 2px;
  background: var(--accent-lt);
  transition: background 0.15s;
}

.domain-link:hover { background: #d4e8d8; }

.comparables-method {
  font-size: 0.68rem;
  color: var(--ink-faint);
  margin-top: 0.5rem;
  font-weight: 300;
}

@media (max-width: 520px) {
  .comparables-table td:nth-child(3),
  .comparables-table td:nth-child(4) { display: none; }
}

/* ── Beta Features Row ── */
/* Full-width rows (2026-09-27). As inline-width buttons these wrapped to
   a ragged right edge and gave small, uneven tap targets on mobile. */
.beta-buttons-row {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 1.75rem;
}
.beta-buttons-row .btn-trees,
.beta-buttons-row .btn-utility {
  width: 100%;
  justify-content: flex-start;
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
}
/* The Beta pill goes to the far end of the row, clear of the label. */
.beta-buttons-row .utility-pill { margin-left: auto; }
.beta-buttons-row .utility-trigger-wrap,
.beta-buttons-row .trees-trigger-wrap {
  margin-bottom: 0;
  display: block;
}
.beta-buttons-row .utility-status { margin-top: 0.35rem; }

/* ── Significant trees ── */
.trees-trigger-wrap {
  margin-bottom: 1.75rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.btn-trees {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1.1rem;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.btn-trees:hover { background: #f0fdf4; border-color: #22c55e; }
.btn-trees:disabled { opacity: 0.55; cursor: not-allowed; }
.trees-block {
  display: none;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.75rem;
}
.trees-block.visible { display: block; }
.trees-verdict-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.75rem 0 1rem;
}
.trees-risk-badge {
  padding: 0.3rem 0.85rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.trees-risk-badge.red    { background: #fee2e2; color: #b91c1c; }
.trees-risk-badge.amber  { background: #fef3c7; color: #92400e; }
.trees-risk-badge.green  { background: #dcfce7; color: #166534; }
.trees-risk-label { font-size: 0.85rem; color: var(--ink-faint); }

/* ── Utility infrastructure ── */
.trees-icon { font-size: 0.9rem; line-height: 1; vertical-align: middle; }
.utility-trigger-wrap {
  margin-bottom: 1.75rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.btn-utility {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1.1rem;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  white-space: nowrap;
}

.btn-utility:hover  { border-color: var(--ink); background: var(--paper); }
.btn-utility:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-utility .utility-icon { font-size: 0.9rem; }

.utility-status {
  font-size: 0.8rem;
  color: var(--ink-soft);
  display: none;
  align-items: center;
  gap: 0.4rem;
}
.utility-status.visible { display: flex; }

.utility-block {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 1.75rem;
  overflow: hidden;
  display: none;
  animation: fadeUp 0.3s ease;
}
.utility-block.visible { display: block; }

.utility-block-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-soft);
  font-weight: 500;
  padding: 0.875rem 1rem 0.5rem;
}

.utility-map-wrap {
  width: 100%;
  height: 200px;
  background: var(--border);
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid var(--border);
}

.utility-map-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.utility-map-pin {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -100%);
  width: 0; height: 0;
  pointer-events: none;
  z-index: 2;
}

.utility-map-pin::before {
  content: '';
  position: absolute;
  left: 50%; top: 0;
  transform: translate(-50%, -100%);
  width: 12px; height: 12px;
  background: #2d5a3d;
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.utility-map-legend {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.7rem;
  color: var(--ink-soft);
}

.utility-legend-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.utility-legend-swatch {
  width: 18px; height: 3px;
  border-radius: 2px;
  flex-shrink: 0;
}

.utility-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.utility-table th {
  text-align: left;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--paper);
}

.utility-table td {
  padding: 0.55rem 1rem;
  border-bottom: 1px solid #f0f0ea;
  color: var(--ink);
  vertical-align: top;
  line-height: 1.5;
}

.utility-table tr:last-child td { border-bottom: none; }

.utility-table td:first-child { width: 28px; }
.utility-table td:nth-child(2) { font-weight: 500; min-width: 140px; }
.utility-table td:nth-child(3) { color: var(--ink-soft); font-weight: 300; font-size: 0.775rem; }
.utility-table td:nth-child(4) { color: var(--ink-soft); font-weight: 300; font-size: 0.775rem; }

@media (max-width: 600px) {
  .utility-table td:nth-child(2) { min-width: 0; }
  .utility-table th:nth-child(4),
  .utility-table td:nth-child(4) { display: none; }
}

.utility-absent { color: var(--ink-faint) !important; font-weight: 300 !important; font-style: italic; }

.utility-footnote {
  font-size: 0.68rem;
  color: var(--ink-faint);
  padding: 0.5rem 1rem 0.75rem;
  font-weight: 300;
}

.utility-pill {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 2px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-left: 0.3rem;
  vertical-align: middle;
}
.pill-beta { background: var(--caution-lt); color: var(--caution); }
/* Deep-dive pills (29/10): open = Hide, loading = … */
.pill-hide    { background: transparent; border: 1px solid var(--border); color: var(--ink-soft); font-weight: 500; }
.pill-loading { background: transparent; color: var(--ink-soft); }

/* ── Vision badges ── */
.vision-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.75rem;
}

.vision-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 400;
  background: none;
  border: none;
  color: var(--ink-soft);
  white-space: nowrap;
}

.vision-badge + .vision-badge::before {
  content: '|';
  color: var(--ink-faint);
  margin-right: 0.5rem;
  font-weight: 300;
}

.vision-badge.good { color: var(--accent); font-weight: 500; }
.vision-badge.fair { color: var(--caution); font-weight: 500; }
.vision-badge.poor { color: var(--warn); font-weight: 500; }

.btn-frontage {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 500;
  font-family: var(--font-sans);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.btn-frontage:hover { background: var(--paper); }

.frontage-img-wrap {
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 0.75rem;
  display: none;
}
.frontage-img-wrap img {
  width: 100%;
  display: block;
}

/* Satellite map */
.satellite-map-wrap {
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 0.75rem;
  display: none;
}
#satellite-map {
  width: 100%;
  height: 380px;
  border-radius: var(--radius);
}
/* Suppress Leaflet's default focus outline on the map container */
.leaflet-container:focus { outline: none; }

/* Home: land & outdoor space (2026-10-22) */
.home-land-status { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 1.75rem; }
.home-land-note { font-size: 0.72rem; color: var(--ink-soft); font-weight: 300; line-height: 1.45; margin: -1.25rem 0 1.75rem; }

/* Home: site & planning checks (2026-10-24) */
.site-checks { list-style: none; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 0.5rem; }
.site-checks li { display: grid; grid-template-columns: 1.1rem 8.5rem 1fr; gap: 0.6rem; align-items: baseline; padding: 0.65rem 1rem; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
.site-checks li:last-child { border-bottom: none; }
.sc-icon { font-weight: 600; text-align: center; }
.sc-ok .sc-icon { color: var(--accent); }
.sc-warn .sc-icon { color: var(--caution); }
.sc-info .sc-icon { color: var(--ink-soft); }
.sc-label { font-weight: 500; color: var(--ink); }
.sc-text { color: var(--ink-soft); font-weight: 300; line-height: 1.45; }
.site-checks-note { font-size: 0.72rem; color: var(--ink-soft); font-weight: 300; margin-bottom: 1.75rem; }
@media (max-width: 520px) {
  .site-checks li { grid-template-columns: 1.1rem 1fr; padding: 0.6rem 0.8rem; }
  .site-checks .sc-text { grid-column: 2; }
}

.search-label, .nav-section-title, .offer-title,
.offer-modal h3, .wordmark {
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Fixed-width figures only, never words */
.data-cell-value.mono, .demo-stat-value, .rating-score,
#status-elapsed, .lens-tab-score, .offer-price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
/* ── Phase 2: survey-report chrome (2026-10-27) ── */
/* Sentence case everywhere: no spaced-out capitals */
.tagline, .hero-eyebrow, .nav-section-eyebrow, .result-address, .data-cell-label,
.flags-title, .subdivision-title, .gradient-title, .comparables-title,
.utility-block-title, .demo-stat-label, .demo-chart-title, .offer-eyebrow,
.offer-seg-lbl, .share-label, .zone-overlays-title, .score-tooltip-title,
.zone-rules-table th, .gradient-table th, .comparables-table th, .utility-table th,
.utility-pill, .zone-src-badge, .market-badge {
  text-transform: none;
  letter-spacing: 0;
}
.data-cell-label, .demo-stat-label, .demo-chart-title { font-size: 0.75rem; font-weight: 400; }
.result-address { font-size: 0.9rem; color: var(--ink); }

/* Numbered report headings: 1.0, 2.0 … Hidden blocks don't count. */
#result { counter-reset: sec; }
.block-label {
  counter-increment: sec;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
  margin: 2rem 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--ink);
}
.block-label::before {
  content: counter(sec) ".0";
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--ink-soft);
  margin-right: 0.75rem;
}

/* Ruled lines instead of boxed cards */
.data-grid, .growth-tile, .comparables-block, .subdivision-block,
.gradient-block, .trees-block, .utility-block, .site-checks,
.feedback-bar, .offer-section, .status-card {
  border: 0;
  border-radius: 0;
  background: transparent;
}
.data-grid { border-bottom: 1px solid var(--border); }
.data-cell { background: transparent; }
.growth-tile, .comparables-block, .subdivision-block, .gradient-block,
.trees-block, .utility-block, .offer-section, .feedback-bar {
  border-top: 1px solid var(--ink);
  padding-left: 0;
  padding-right: 0;
}
.utility-block-title, .utility-table th, .utility-table td,
.utility-footnote, .utility-map-legend { padding-left: 0; }
.utility-table th { background: transparent; }
.site-checks { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.site-checks li { padding-left: 0; padding-right: 0; }
.status-card { border-left: 2px solid var(--ink); padding: 0.4rem 0.8rem; }

/* "More ways to search": numbered rows, not cards */
.tool-nav { gap: 0; border-top: 1px solid var(--ink); counter-reset: nav; }
.tool-nav a {
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  padding: 0.85rem 0;
}
.tool-nav a:hover { border-color: var(--border); }
.tool-nav a:hover .nav-title { text-decoration: underline; text-underline-offset: 2px; }
.tool-nav .nav-icon {
  counter-increment: nav;
  background: none;
  width: 2rem;
  height: auto;
  justify-content: flex-start;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-soft);
  padding-top: 0.15rem;
}
.tool-nav .nav-icon svg { display: none; }
.tool-nav .nav-icon::before { content: counter(nav, decimal-leading-zero); }

/* Beta buttons: plain rows, no emoji */
.trees-icon, .utility-icon { display: none; }
.beta-buttons-row { gap: 0; border-top: 1px solid var(--border); }
.beta-buttons-row .btn-trees, .beta-buttons-row .btn-utility {
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 0.75rem 0;
  background: transparent;
  font-family: var(--font-sans);
  font-weight: 500;
}
.beta-buttons-row .btn-trees:hover, .beta-buttons-row .btn-utility:hover {
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pill-beta { background: transparent; border: 1px solid var(--caution); color: var(--caution); font-weight: 500; }
/* ── Phase 3: survey-report results (2026-10-27) ── */
/* Lens tabs: left-aligned report headings with an underline */
.lens-tabs {
  display: flex;
  gap: 1.75rem;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 0;
}
.lens-tab {
  flex: none;
  padding: 0.6rem 0;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-size: 0.9rem;
}
.lens-tab.active { background: none; box-shadow: none; border-bottom-color: var(--ink); }
.lens-tab-score, .lens-tab.active .lens-tab-score { background: none; padding: 0; color: var(--ink-soft); }
@media (max-width: 520px) { .lens-tabs { gap: 1.25rem; } .lens-tab { padding: 0.6rem 0; } }

/* Verdict card: ruled, not boxed */
.verdict-card { border: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--border); border-radius: 0; }
.verdict-card .map-controls .btn-frontage { font-family: var(--font-sans); }

/* Score: plain figure + segmented scale bar, no ring */
.verdict-card .rating-score-row {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: none;
  align-items: flex-start;
  justify-content: flex-start;
  margin-left: 0;
}
.verdict-card .rating-score { font-size: 2rem; }
.verdict-card .rating-score span { display: inline; font-size: 0.8rem; margin-left: 0.2rem; font-family: var(--font-mono); }
.verdict-card .rating-score-row::after {
  content: '';
  display: block;
  width: 80px;
  height: 6px;
  margin-top: 0.45rem;
  background: linear-gradient(to right, var(--ink) calc(var(--score, 0) * 10%), var(--border) 0);
  -webkit-mask: repeating-linear-gradient(to right, #000 0 7px, transparent 7px 8px);
          mask: repeating-linear-gradient(to right, #000 0 7px, transparent 7px 8px);
}
.verdict-card #score-info-slot { right: -20px; top: 0.35rem; bottom: auto; }
@media (max-width: 520px) {
  .verdict-card .rating-score-row { width: auto; height: auto; }
  .verdict-card .rating-score { font-size: 1.75rem; }
}

/* Status marks: colour plus shape. Square = good, diamond = caution, bar = poor */
.opportunity-badge {
  background: none !important;
  padding: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink) !important;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.opportunity-badge::before, .flags-title::before {
  content: '';
  flex-shrink: 0;
  display: inline-block;
  width: 8px;
  height: 8px;
  border: 1px solid var(--ink-faint);
}
.badge-buy::before, .flags-title.green::before { background: var(--accent); border-color: var(--accent); }
.badge-caution::before { background: var(--caution); border-color: var(--caution); transform: rotate(45deg) scale(0.85); }
.badge-avoid::before, .flags-title.red::before { background: var(--warn); border-color: var(--warn); height: 3px; width: 11px; }
.flags-title { display: flex; align-items: center; gap: 0.5rem; color: var(--ink) !important; font-weight: 500; font-size: 0.8rem; }

/* Vision chips: plain text separated by dots */
.verdict-card .vision-badge { background: none; border: 0; padding: 0; color: var(--ink-soft); font-size: 0.8rem; }
.verdict-card .vision-badge + .vision-badge::before { content: '·'; color: var(--ink-faint); margin-right: 0.5rem; }
.verdict-card .vision-badge.good, .verdict-card .vision-badge.fair, .verdict-card .vision-badge.poor { color: var(--ink); }
.verdict-card .vision-badge.good::after, .verdict-card .vision-badge.fair::after, .verdict-card .vision-badge.poor::after {
  content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 0.4rem;
}
.verdict-card .vision-badge.good::after { background: var(--accent); }
.verdict-card .vision-badge.fair::after { background: var(--caution); transform: rotate(45deg) scale(0.85); }
.verdict-card .vision-badge.poor::after { background: var(--warn); height: 3px; width: 10px; }

/* Persona buttons: square-cornered */
.persona-btn { border-radius: var(--radius); }

/* Words stay in the text font inside mono figure cells */
.val-note, .val-qual, .rental-badge, .market-badge,
.data-cell-value.mono a { font-family: var(--font-sans); }
.val-qual { color: var(--ink-soft); font-size: 0.85em; }
/* ── Phase 3b (2026-10-27) ── */
/* Score bar removed */
.verdict-card .rating-score-row::after { content: none; }
/* Long black rule under the tabs removed; the tab underline is enough */
.verdict-card { border-top: 0; }
/* Each lens says who it is for, so the choice is obvious */
.lens-tab {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 0.4rem;
  justify-content: start;
  align-items: baseline;
  text-align: left;
  padding: 0.55rem 0 0.6rem;
}
.lens-tab-hint {
  grid-column: 1 / -1;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--ink-soft);
  white-space: nowrap;
  margin-top: 0.1rem;
}
.lens-tab:not(.active):hover .lens-tab-label { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 520px) {
  .lens-tabs { gap: 1rem; }
  .lens-tab-hint { font-size: 0.66rem; }
}
/* ── Search bar: input and button as one ruled field (2026-10-27) ── */
.search-row { gap: 0; align-items: stretch; }
.address-input {
  border: 1px solid var(--ink);
  border-right: 0;
  border-radius: 0;
  height: 100%;
}
.btn-analyse {
  background: #f2f3f3;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  font-weight: 500;
  letter-spacing: 0;
  padding: 0.75rem 1.4rem;
}
.btn-analyse svg { display: none; }
.btn-analyse:hover { background: var(--ink); color: var(--white); }
.btn-analyse:disabled,
.btn-analyse:disabled:hover { background: #f2f3f3; color: var(--ink-soft); opacity: 1; }
@media (max-width: 520px) {
  .address-input { border-right: 1px solid var(--ink); }
  .btn-analyse { border-top: 0; }
}
/* ── Phase 4 (2026-10-27) ── */
/* Lens verdict badge back as a rounded colour pill (no shape mark) */
.opportunity-badge {
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
}
.opportunity-badge::before { content: none; }
.badge-buy     { background: var(--accent-lt)  !important; color: var(--accent)   !important; }
.badge-caution { background: var(--caution-lt) !important; color: var(--caution)  !important; }
.badge-avoid   { background: var(--warn-lt)    !important; color: var(--warn)     !important; }
.badge-default { background: var(--border)     !important; color: var(--ink-soft) !important; }

/* Trees and Utility: drop the emoji icon column */
#trees-block table:has(#trees-tbody) th:first-child,
#trees-tbody td:first-child,
#utility-block .utility-table th:first-child,
#utility-tbody td:first-child { display: none; }

/* Offer section: ruled options, grey ink button like Analyse */
.offer-seg { gap: 0; border: 1px solid var(--ink); }
.offer-seg-btn {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--border);
  border-radius: 0;
}
.offer-seg-btn:last-child { border-right: 0; }
.offer-seg-btn:hover { background: #f7f7f7; }
.offer-seg-btn[aria-pressed="true"] { background: #f2f3f3; box-shadow: inset 0 -2px 0 var(--ink); }
.offer-seg-btn[aria-pressed="true"] .offer-price { color: var(--ink); }
.offer-btn, .offer-cta {
  background: #f2f3f3;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
}
.offer-btn:hover, .offer-cta:not(:disabled):hover { background: var(--ink); color: var(--white); }
.offer-cta:disabled, .offer-cta:disabled:hover { background: #f2f3f3; color: var(--ink-soft); opacity: 1; }
.offer-cta svg { display: none; }
.offer-modal { border-radius: 0; border: 1px solid var(--ink); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.offer-modal-chosen { border-radius: 0; background: transparent; border-left: 2px solid var(--ink); border-top: 0; border-right: 0; border-bottom: 0; }
.offer-modal input { border-radius: 0; border-color: var(--ink-faint); }
.btn-reset { border-radius: 0; }

/* Feedback: square buttons on a rule */
.feedback-bar { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.feedback-btn { border-radius: 0; border-color: var(--ink-faint); }
/* One rule only: a panel directly under a numbered heading drops its own top rule */
.block-label + .growth-tile, .block-label + .comparables-block, .block-label + .subdivision-block,
.block-label + .gradient-block, .block-label + .trees-block, .block-label + .utility-block,
.block-label + .offer-section, .block-label + .feedback-bar {
  border-top: 0;
  padding-top: 0.25rem;
}


/* ── Scoring block (Web9, 2026-11-01) ───────────────────────────────
   Question, address and property line left, score right; badge + summary
   beside the Main catch. Retired pieces are hidden, not deleted. */
.verdict-card .chip-row, .verdict-card .parcel-thumb, #key-signals { display: none !important; }
.lens-tab-hint { display: none; }
.lens-tab:not(.active) .lens-tab-label::after { content: ' \2192'; color: var(--ink-soft); }

.verdict-card .verdict-top { padding: 0; }
.score-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
  padding: 1rem 0 0.9rem; border-bottom: 1px solid var(--ink);
}
.score-head-text { min-width: 0; }
.score-question { font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 0.2rem; }
.verdict-card .result-address { font-size: 1rem; font-weight: 600; color: var(--ink); margin: 0 0 0.2rem; }
.score-meta { font-size: 0.8rem; color: var(--ink-soft); }
.score-meta:empty { display: none; }

.verdict-card .rating-score-row {
  grid-column: auto; grid-row: auto; margin: 0;
  flex-shrink: 0; flex-direction: row; align-items: baseline; position: relative;
}
.verdict-card .rating-score { font-size: 2.25rem; }
.verdict-card #score-info-slot { position: static; margin-left: 0.4rem; background: none; }

.score-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; padding: 1rem 0; }
.score-col { min-width: 0; }
.verdict-card .opportunity-badge { grid-column: auto; grid-row: auto; margin: 0 0 0.55rem; }
.verdict-card .verdict-text { grid-column: auto; grid-row: auto; margin: 0; font-size: 0.9rem; }
.catch-badge {
  display: inline-block; padding: 0.25rem 0.7rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 500; background: var(--caution-lt); color: var(--caution);
  margin-bottom: 0.55rem;
}
.catch-text { font-size: 0.9rem; line-height: 1.6; font-weight: 300; color: var(--ink); }
.catch-text.none { color: var(--ink-soft); }
.verdict-card .persona-row { margin: 0 0 0.9rem; }

@media (max-width: 520px) {
  .score-head { align-items: flex-start; }
  .verdict-card .rating-score { font-size: 1.9rem; }
  .score-cols { grid-template-columns: 1fr; gap: 1.1rem 0; }   /* pros first, then Main catch */
  .verdict-card .opportunity-badge { max-width: none; }
}


/* ── Home: collapsible sections 3.0–7.0 (2026-11-01) ─────────────────
   Closed by default; the key result sits on the right of each row so the
   page can be scanned without opening anything. Data is already loaded,
   so rows open instantly (unlike Develop's on-demand deep dives). */
.home-fold > summary.block-label {
  display: flex; align-items: baseline; gap: 0.75rem;
  cursor: pointer; list-style: none; margin: 1.25rem 0 0;
}
.home-fold > summary.block-label::-webkit-details-marker { display: none; }
.home-fold > summary.block-label::after { content: '\25BE'; color: var(--ink-soft); font-size: 0.75rem; }
.home-fold[open] > summary.block-label::after { content: '\25B4'; }
.home-fold[open] > summary.block-label { margin-bottom: 0.75rem; }
.home-fold > summary:hover .fold-label { text-decoration: underline; text-underline-offset: 3px; }
.home-fold > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.fold-label { flex-shrink: 0; }
.fold-sum { flex: 1; min-width: 0; text-align: right; font-size: 0.8rem; font-weight: 400; color: var(--ink-soft); }
.fold-sum.warn { color: var(--caution); }
.home-fold[open] .fold-sum { visibility: hidden; }
.home-fold:last-of-type { margin-bottom: 1.75rem; }
@media print { .home-fold:not([open]) > :not(summary) { display: block; } }


/* Stage 3 fix: hide the previous property's summary while a new one loads. */
.is-loading #res-meta, .is-loading .score-cols, .is-loading .persona-row { visibility: hidden; }


/* ── Intent: surveyor's-legend radios (Stage 4c, 2026-11-02) ─────
   Square 11px keys and 1px ink, like the map legends: no pills, no
   tints. Selected option is bold + underlined so it still reads as a
   choice at a glance. */
.intent { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 1.4rem; border: 0; padding: 0; margin: 0 0 1rem; }
.intent-label { float: left; padding: 0; font-size: 0.85rem; color: var(--ink-soft); margin-right: 0.2rem; }
.intent .chip { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--ink-soft); cursor: pointer; position: relative; }
.intent .chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.intent .key { width: 11px; height: 11px; border: 1px solid var(--ink); background: var(--white); flex-shrink: 0; }
.intent .chip:hover { color: var(--ink); }
.intent .chip.on { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.intent .chip.on .key { background: var(--ink); }
.intent .chip input:focus-visible + .key { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Phones (Stage 4d, 2026-11-02): label on its own line, three equal
   thirds below, each a 44px-tall tap target, so nothing wraps or orphans
   at larger system font sizes. Look is unchanged. */
@media (max-width: 520px) {
  .intent { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-bottom: 0.75rem; }
  .intent-label { float: none; grid-column: 1 / -1; margin: 0 0 0.1rem; }
  .intent .chip { min-height: 44px; padding: 0 0.25rem; white-space: nowrap; }
  .intent .chip:nth-of-type(2) { justify-content: center; }
  .intent .chip:nth-of-type(3) { justify-content: flex-end; }
}

/* Stage 4b: one perspective control at a time; chips before a search, tabs after. */
.has-result .intent { display: none; }