/*
 * Survey: the site drawn like a surveyor's sheet. Blue ink on drafting vellum, Archivo for reading,
 * Overpass (a highway-sign face) for map lettering and the title block. Precision lives in the
 * drawings; controls stay roomy and soft. Dark mode is the same sheet as a blueprint.
 */
:root {
  --ground: #edf1ee;   /* vellum: page and sheet ground */
  --sheet: #f7f9f7;    /* lighter tile: inputs, ticked rows, panels */
  --ink: #1c3b5a;      /* survey ink: text, linework, primary buttons (10.1:1) */
  --ink-hover: #2d5a86;
  --lead: #4e5b66;     /* secondary text (6.1:1) */
  --pencil: #7b8790;   /* construction lines only, never text */
  --rule: #b9c4c9;     /* hairlines between rows */
  --red: #b42318;      /* correction red: left out, errors (5.8:1) */
  --hl: #f4e04d;       /* highlighter, behind the subject's label only */
  --hl-ink: #1c3b5a;
  --on-ink: #f7f9f7;   /* text on ink fills */
  --street: #fbfcfb;   /* basemap: street corridors, a shade lighter than the blocks */
  --street-edge: #c3ccd0;
  --water: #d6e2e7;    /* basemap: bay, ocean and lakes, hatched */
  --water-line: #b6cad3;
  --water-ink: #4c6f82;
  --park: #e2eadf;     /* basemap: parks, cross-hatched */
  --park-line: #c4d2c0;
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-map: "Overpass", "DIN Alternate", "Arial Narrow", sans-serif;
  --gutter: clamp(16px, 3vw, 32px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0f2539; --sheet: #15304a; --ink: #e4ecf2; --ink-hover: #ffffff; --lead: #a7b6c3;
    --pencil: #4c6680; --rule: #2c4762; --red: #ff8e7e; --on-ink: #0f2539;
    --street: #183553; --street-edge: #284562; --water: #0a1b2b; --water-line: #17324c; --water-ink: #7fa3bb; --park: #11293f; --park-line: #1f3d58;
  }
}
:root[data-theme="dark"] {
  --ground: #0f2539; --sheet: #15304a; --ink: #e4ecf2; --ink-hover: #ffffff; --lead: #a7b6c3;
  --pencil: #4c6680; --rule: #2c4762; --red: #ff8e7e; --on-ink: #0f2539;
  --street: #183553; --street-edge: #284562; --water: #0a1b2b; --water-line: #17324c; --water-ink: #7fa3bb; --park: #11293f; --park-line: #1f3d58;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 17px/1.55 var(--font); }
a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink-hover); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
::selection { background: var(--hl); color: var(--hl-ink); }
h1, h2, h3 { margin: 0 0 12px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.04; font-stretch: 110%; letter-spacing: -0.02em; }
h2 { font-size: clamp(22px, 2.4vw, 28px); font-stretch: 108%; }
h3 { font-size: 19px; font-stretch: 106%; }
p { margin: 0 0 12px; }
.muted { color: var(--lead); }
.small { font-size: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; }
code { padding: 1px 5px; font-size: 90%; background: var(--sheet); border: 1px solid var(--rule); border-radius: 3px; }

/* ---------- frame ---------- */
header.top { max-width: 1200px; margin: 0 auto; padding: 14px var(--gutter); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); text-decoration: none; font-size: 19px; font-weight: 700; font-stretch: 112%; letter-spacing: -0.01em; }
.brand:hover { color: var(--ink); }
/* The Golden Gate in the fog, engraved; light lines on navy in dark mode. */
.brand-mark { flex: none; width: 40px; height: 40px; background: url(/logo.svg) center / contain no-repeat; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand-mark { background-image: url(/logo-dark.svg); } }
:root[data-theme="dark"] .brand-mark { background-image: url(/logo-dark.svg); }
header.top nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
header.top nav a, .nav-form button.link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: 16px; font-weight: 500; color: var(--ink); text-decoration: none; }
header.top nav a:hover, .nav-form button.link:hover { text-decoration: underline; color: var(--ink); background: none; }
.nav-form { margin: 0; }
main { max-width: 1200px; margin: 0 auto; padding: 8px var(--gutter) 64px; }
footer { position: relative; max-width: 1200px; margin: 0 auto; padding: 26px var(--gutter) 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 12px 48px; font-size: 14px; color: var(--lead); }
footer::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1.5px; background: var(--ink); }
footer p { margin: 0; }
footer a { font-weight: 600; }

/* ---------- controls ---------- */
button, .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; font: inherit; font-size: 16px; font-weight: 650; color: var(--on-ink); background: var(--ink); border: 1.5px solid var(--ink); border-radius: 12px; cursor: pointer; text-decoration: none; }
button:hover, .button:hover { color: var(--on-ink); background: var(--ink-hover); border-color: var(--ink-hover); }
button.secondary, .button.secondary { color: var(--ink); background: transparent; }
button.secondary:hover, .button.secondary:hover { color: var(--ink); background: var(--sheet); border-color: var(--ink); }
button.link { min-height: 44px; padding: 0 6px; color: var(--ink); background: none; border: 0; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
button.link:hover { color: var(--ink-hover); background: none; }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea { font: inherit; color: var(--ink); background: var(--sheet); border: 1.5px solid var(--ink); border-radius: 12px; padding: 11px 14px; }
input::placeholder, textarea::placeholder { color: var(--lead); opacity: 1; }
input[type="checkbox"] { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); cursor: pointer; }
label { font-weight: 600; }
.flash { margin: 0 0 18px; padding: 12px 16px; background: var(--sheet); border: 1.5px solid var(--ink); border-radius: 4px; }
.error { margin: 0 0 12px; padding: 12px 16px; color: var(--ink); background: var(--sheet); border: 1.5px solid var(--red); border-radius: 4px; }
.card { padding: 20px 22px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 4px; }
.label { margin: 0; font-size: 14px; font-weight: 600; color: var(--lead); }
.lede { max-width: 34em; margin: 0 0 16px; font-size: 18px; }
.crumb { margin: 0 0 8px; font-size: 14px; color: var(--lead); }
.crumb a { font-weight: 600; text-decoration: none; }
.crumb a:hover { text-decoration: underline; }

/* ---------- home ---------- */
.home-hero { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 40px 56px; padding: 20px 0 64px; }
.hero-text { flex: 1 1 420px; max-width: 560px; display: flex; flex-direction: column; gap: 22px; padding-top: 8px; }
.hero-text h1, .hero-text .lede, .hero-text p { margin: 0; }
.hero-map { flex: 1.5 1 540px; min-width: 0; }
.hero-map .sheet { margin: 0; }
.search { position: relative; display: flex; flex-direction: column; gap: 10px; margin: 0; }
.search label { font-size: 15px; }
.search-row { display: flex; flex-wrap: wrap; gap: 10px; }
.search-row input { flex: 1 1 240px; min-width: 0; height: 56px; padding: 0 16px; font-size: 17px; }
.search-row button { height: 56px; padding: 0 22px; font-size: 17px; }
.suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 5; margin: 6px 0 0; padding: 6px 0; list-style: none; background: var(--sheet); border: 1.5px solid var(--ink); border-radius: 12px; }
.suggest li a { display: block; padding: 10px 14px; text-decoration: none; }
.suggest li a:hover { background: var(--ground); }
.legend { padding: 0 0 72px; }
.legend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 32px 48px; margin-top: 24px; }
.legend-item { display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: start; }
.legend-item h3 { margin: 0 0 8px; }
.legend-item p { margin: 0 0 8px; font-size: 16px; }
.sym .s-ring { fill: none; stroke: var(--ink); stroke-width: 0.9; stroke-dasharray: 9 3 2 3; }
.sym .s-on { fill: var(--ink); stroke: var(--ground); stroke-width: 1.5; }
.sym .s-off { fill: var(--ground); stroke: var(--red); stroke-width: 1.5; }
.sym .s-line line { stroke: var(--ink); stroke-width: 1; }
.sym .s-fill { fill: var(--ink); }
.sym .s-hollow { fill: var(--ground); stroke: var(--ink); stroke-width: 1.5; }
.sym .s-dash { fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-dasharray: 4 3; stroke-linejoin: round; }
.guide-band { padding: 0 0 72px; }
.guide-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 48px; margin-bottom: 36px; }
.guide-head > div { flex: 1 1 420px; max-width: 640px; }
.guide-head p { margin: 0; }

/* The buying guide's stages are a survey traverse: numbered stations joined by a pencil line. */
.traverse { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); row-gap: 36px; }
.traverse li { position: relative; display: flex; flex-direction: column; gap: 10px; padding-right: 28px; }
.traverse li::before { content: ""; position: absolute; top: 19px; left: 38px; right: 0; height: 1px; background: var(--pencil); }
.traverse li:last-child::before { display: none; }
.traverse .station, .stage-cards .station { position: relative; z-index: 1; width: 38px; height: 38px; display: grid; place-items: center; font-family: var(--font-map); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--ground); border: 1.5px solid var(--ink); border-radius: 50%; }
.traverse a { font-size: 18px; font-weight: 650; line-height: 1.3; text-decoration: none; }
.traverse a:hover { text-decoration: underline; }
.traverse p { margin: 0; }
.results { list-style: none; padding: 0; }
.results li { padding: 12px 0; border-bottom: 1px solid var(--rule); }

/* ---------- property: subject and survey sheet ---------- */
.subject { padding: 8px 0 20px; }
.subject h1 { margin: 0 0 6px; font-size: clamp(30px, 4vw, 46px); }
.facts { margin: 0; color: var(--lead); }
.sheet { margin: 0 0 32px; padding: 4px; background: var(--ground); border: 1.5px solid var(--ink); }
.plat-frame { border: 0.75px solid var(--ink); border-bottom: 0; }
.sheet-foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); border: 0.75px solid var(--ink); }
.plat { display: block; width: 100%; height: auto; font-family: var(--font-map); }
.plat.narrow { display: none; }
.plat-grid line { stroke: var(--pencil); stroke-width: 0.6; opacity: 0.5; }
.plat-rings circle { fill: none; stroke: var(--ink); stroke-width: 0.9; }
.plat-rings .ring { stroke-dasharray: 10 3 2 3; }
.plat-rings .boundary { stroke-width: 1.4; }
.plat-dim line { stroke: var(--ink); stroke-width: 0.9; }
.plat-arrow { fill: var(--ink); }
.plat text { font-weight: 700; paint-order: stroke; stroke: var(--ground); stroke-width: 3.5px; stroke-linejoin: round; }
.plat-dim-text text { font-size: 10.5px; fill: var(--ink); }
.plat .pt { fill: var(--ground); stroke: var(--red); stroke-width: 1.4; }
.plat .pt.on { fill: var(--ink); stroke: var(--ground); stroke-width: 1.5; }
.plat .pl { font-size: 12px; fill: var(--ink); font-variant-numeric: tabular-nums; }
.plat .pl:not(.on) { display: none; }
.plat-target circle { fill: none; stroke: var(--ink); stroke-width: 1.3; }
.plat-target line { stroke: var(--ink); stroke-width: 1.3; }
.plat-target .dot { fill: var(--ink); stroke: none; }
.plat-hl { fill: var(--hl); }
.plat-leader { stroke: var(--ink); stroke-width: 1; }
.plat .plat-tag { font-size: 13px; font-weight: 800; fill: var(--hl-ink); stroke: none; }
.plat .plat-tag.sub { font-size: 11px; font-weight: 600; }
.plat-backing { fill: var(--ground); }
.plat-corner text { font-size: 10.5px; fill: var(--ink); }
.plat-corner .north { font-size: 12px; font-weight: 800; }
.plat-corner .sb-fill { fill: var(--ink); }
.plat-corner .sb-frame { fill: none; stroke: var(--ink); stroke-width: 0.8; }
.plat-corner .arrow-fill { fill: var(--ink); }
.plat-corner .arrow-open { fill: var(--ground); stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; }

/* The estimate is drawn as an engineering dimension: extension lines, arrowheads, a tick where it sits. */
.est { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 18px; }
.est-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.conf { margin: 0; font-family: var(--font-map); font-size: 13px; font-weight: 700; }
.conf.high { color: var(--ink); }
.conf.medium { color: var(--lead); }
.conf.low { color: var(--red); }
.big { margin: 0; font-size: clamp(34px, 3.6vw, 44px); line-height: 1; font-weight: 700; font-stretch: 110%; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.dimension { display: flex; align-items: center; height: 16px; margin-top: 6px; }
.dim-ext { flex: 0 0 1.25px; height: 16px; background: var(--ink); }
.dim-arrow { flex: none; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.dim-arrow.left { border-right: 8px solid var(--ink); }
.dim-arrow.right { border-left: 8px solid var(--ink); }
.dim-run { flex: 50 1 0; height: 1.25px; background: var(--ink); }
.dim-tick { flex: 0 0 1.5px; height: 12px; background: var(--ink); }
.dim-labels { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dim-labels .muted { font-weight: 500; }
.est-method { margin: 0; font-size: 15px; }
.est-none { margin: 0 0 6px; font-size: 22px; }
.sheet.empty .dimension, .sheet.empty .dim-labels { visibility: hidden; }
.sheet-link { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 650; }
.title-block { display: grid; grid-template-columns: 1fr 1fr; align-content: stretch; gap: 0.75px; margin: 0; font-family: var(--font-map); line-height: 1.3; background: var(--ink); box-shadow: -0.75px 0 0 var(--ink), 0 -0.75px 0 var(--ink); }
.title-block > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; background: var(--ground); }
.title-block .wide { grid-column: 1 / -1; }
.title-block dt { font-size: 12px; font-weight: 500; color: var(--lead); }
.title-block dd { margin: 0; font-size: 14.5px; font-weight: 650; }
.title-block .big dd { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.title-block .wide dd { font-size: 16px; font-weight: 700; }

/* ---------- property: offers, interest, comps, history ---------- */
.engage { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; align-items: start; margin: 0 0 36px; }
.engage h2, .overbid h2 { font-size: 22px; }
.offer-list { list-style: none; margin: 12px 0; padding: 0; }
.offer-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 10px 0; font-size: 14px; color: var(--lead); border-bottom: 1px solid var(--rule); }
.offer-list li:last-child { border-bottom: 0; }
.offer-list .amt { min-width: 120px; font-size: 18px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.offer-list.locked li { filter: blur(6px); user-select: none; pointer-events: none; }
.add-offer { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule); }
.add-offer summary { min-height: 44px; display: flex; align-items: center; font-weight: 650; cursor: pointer; }
.offer-form label, .contact-form label { display: block; margin: 12px 0; font-size: 14px; color: var(--lead); }
.offer-form input:not([type="hidden"]), .offer-form select, .contact-form input, .contact-form textarea { display: block; width: 100%; max-width: 440px; margin-top: 6px; }
.contact-form textarea { max-width: none; }
.resource-list { margin: 8px 0 14px; padding-left: 20px; }
.resource-list li { margin: 6px 0; }
.pill { display: inline-block; padding: 2px 8px; font-family: var(--font-map); font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--ink); border: 1.5px solid var(--ink); border-radius: 3px; }
.pill.high { color: var(--on-ink); background: var(--ink); }
.pill.low { color: var(--lead); border-color: var(--pencil); }
.pill.none { color: var(--lead); border-color: var(--pencil); text-decoration: line-through; }
.overbid, .comps, .sale-history { margin: 0 0 36px; padding: 18px 0 0; background: none; border: 0; border-top: 1.5px solid var(--ink); border-radius: 0; }
.comps-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; }
.comps-head h2 { margin: 0; }
.comps-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.comps-actions button.link { padding: 0 12px; font-size: 14px; text-decoration: none; border: 1.5px solid var(--ink); border-radius: 10px; }
.comps-actions button.link:hover { background: var(--sheet); }
.table-wrap { margin-top: 12px; overflow-x: auto; }
table { width: 100%; min-width: 860px; border-collapse: collapse; font-size: 14.5px; }
th, td { padding: 10px; text-align: left; vertical-align: middle; white-space: nowrap; border-bottom: 1px solid var(--rule); }
th { font-family: var(--font-map); font-size: 12.5px; font-weight: 700; color: var(--lead); border-bottom: 1.5px solid var(--ink); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
#comps-table tr.on td { background: var(--sheet); }
#comps-table tr:not(.on) td { color: var(--lead); }
#comps-table tr:not(.on) td.addr a, #comps-table tr:not(.on) td.money { text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
td.tags { max-width: 220px; white-space: normal; font-size: 13px; color: var(--lead); }
div.bar { width: 70px; height: 6px; background: var(--rule); }
div.bar span { display: block; height: 100%; background: var(--ink); }
.history { padding-left: 20px; }
.history li { margin: 6px 0; }

/* ---------- interest flow and sign-in ---------- */
.interest-flow, .auth { max-width: 640px; margin: 16px auto; }
.interest-flow h1, .auth h1 { font-size: clamp(28px, 3.2vw, 38px); }
.auth { max-width: 480px; }
.step-count { margin: 12px 0 4px; font-family: var(--font-map); font-size: 14px; font-weight: 700; color: var(--lead); }
.choices { display: grid; gap: 10px; margin: 18px 0; }
.choices .choice { justify-content: flex-start; width: 100%; min-height: 56px; padding: 14px 18px; text-align: left; color: var(--ink); background: var(--sheet); }
.choices .choice:hover { color: var(--ink); background: var(--ground); }
.choices .choice.chosen { color: var(--on-ink); background: var(--ink); }
.contact-form { margin: 24px 0; padding-top: 18px; border-top: 1px solid var(--rule); }
.answers { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; font-size: 14.5px; }
.answers dt { color: var(--lead); }
.answers dd { margin: 0; text-align: right; }
.auth form { display: flex; flex-direction: column; gap: 8px; margin: 18px 0 14px; }
.auth label { font-size: 15px; }
.auth input#code { font-family: var(--font-map); font-size: 26px; letter-spacing: 0.3em; text-align: center; font-variant-numeric: tabular-nums; }
.auth-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.auth-alt form { display: block; margin: 0; }

/* ---------- owner page ---------- */
.admin-page h2 { margin-top: 32px; }
.admin-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75px; margin: 16px 0; font-family: var(--font-map); background: var(--ink); border: 0.75px solid var(--ink); }
.admin-counts div { padding: 12px 14px; background: var(--ground); }
.admin-counts dt { font-size: 12.5px; color: var(--lead); }
.admin-counts dd { margin: 2px 0 0; font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
table.admin { min-width: 1100px; }
table.admin td.wrap { min-width: 220px; white-space: normal; }

/* ---------- buying guide ---------- */
.hero { padding: 16px 0 12px; }
.hero h1 { max-width: 18em; }
.stage-cards { list-style: none; margin: 16px 0 36px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.stage-cards .label { font-family: var(--font-map); font-weight: 700; }
.stage-cards h2 { margin: 6px 0 8px; font-size: 21px; }
.stage-cards h2 a { text-decoration: none; }
.stage-cards h2 a:hover { text-decoration: underline; }
.stage-cards .mini { margin: 10px 0 0; padding-left: 18px; font-size: 14.5px; }
.stage-cards .mini li { margin: 3px 0; }
.stage-nav { list-style: none; display: flex; margin: 0 0 28px; padding: 0; overflow-x: auto; }
.stage-nav li { position: relative; flex: 1; min-width: 84px; }
.stage-nav li::before { content: ""; position: absolute; top: 15px; left: 30px; right: 0; height: 1px; background: var(--pencil); }
.stage-nav li:last-child::before { display: none; }
.stage-nav a { display: flex; flex-direction: column; gap: 6px; padding: 0 8px 6px 0; font-size: 12.5px; line-height: 1.25; color: var(--lead); text-decoration: none; }
.stage-nav .n { position: relative; z-index: 1; width: 30px; height: 30px; display: grid; place-items: center; font-family: var(--font-map); font-size: 13px; font-weight: 700; color: var(--lead); background: var(--ground); border: 1.5px solid var(--pencil); border-radius: 50%; }
.stage-nav li.done .n { color: var(--ink); border-color: var(--ink); }
.stage-nav li.current .n { color: var(--on-ink); background: var(--ink); border-color: var(--ink); }
.stage-nav li.current a { color: var(--ink); font-weight: 650; }
.stage-nav .t { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.prose { max-width: 740px; }
.prose.article { max-width: 760px; }
.prose p, .prose li { color: var(--ink); }
.prose .body h2 { margin: 40px 0 10px; font-size: 25px; }
.prose .body h3 { margin: 26px 0 6px; font-size: 19px; }
.prose .body p, .prose .body li { font-size: 17.5px; line-height: 1.62; }
.prose .body li { margin: 4px 0; }
.prose .body table { min-width: 0; font-size: 15px; }
.prose .body th, .prose .body td { white-space: normal; }
.prose .body blockquote { margin: 20px 0; padding: 12px 18px; color: var(--ink); background: var(--sheet); border: 1px solid var(--rule); border-radius: 4px; }
.prose .body blockquote p:last-child { margin: 0; }
.toc { margin: 16px 0 28px; font-size: 14.5px; }
.toc ol { margin: 6px 0 0; padding-left: 20px; }
.toc li { margin: 3px 0; }
.checklist ul { list-style: none; padding: 0; }
.checklist li { position: relative; padding: 10px 0 10px 32px; border-bottom: 1px solid var(--rule); }
.checklist li::before { content: ""; position: absolute; left: 4px; top: 14px; width: 14px; height: 14px; border: 1.5px solid var(--ink); border-radius: 2px; }
.article-list { padding-left: 22px; }
.article-list li { margin: 12px 0; }
.article-list a { font-weight: 650; }
.shop-table table { min-width: 720px; font-size: 14px; }
.shop-table td { white-space: normal; vertical-align: top; }
.shop-table td.wrap { min-width: 240px; }
.shop-table td:first-child { min-width: 140px; }
.shop-table td:nth-child(2) { min-width: 150px; }
.shop-now, .shop-master, .prose .table-wrap { margin-bottom: 28px; }
.faq { margin-top: 32px; }
.faq details { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.faq details:first-of-type { border-top: 1.5px solid var(--ink); }
.faq summary { min-height: 32px; font-size: 17px; font-weight: 650; cursor: pointer; }
.faq details p { margin: 8px 0 4px; }
.next-step, .tool-cta { margin: 28px 0; border: 1.5px solid var(--ink); }
.next-step h2, .tool-cta h2 { margin: 4px 0 8px; font-size: 21px; }
.related ul, .sources ul { padding-left: 20px; }
.related li { margin: 6px 0; }
.sources { font-size: 14px; }
.sources li { margin: 4px 0; word-break: break-word; }
.prevnext { display: flex; justify-content: space-between; gap: 12px; margin: 32px 0 0; padding-top: 16px; font-weight: 650; border-top: 1.5px solid var(--ink); }
.prevnext .next { text-align: right; }
.prose section + section { margin-top: 24px; }

/* On wide screens the property sheet reads like a survey sheet: the map, with the estimate and title block beside it. */
@media (min-width: 1000px) {
  .sheet.full { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(330px, 1fr); }
  .sheet.full .plat-frame { border: 0.75px solid var(--ink); border-right: 0; }
  .sheet.full .sheet-foot { grid-template-columns: 1fr; align-content: start; }
}

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  .engage, .stage-cards { grid-template-columns: 1fr; }
  .stage-nav .t { display: none; }
  .prevnext { flex-direction: column; }
  .prevnext .next { text-align: left; }
  .answers { grid-template-columns: 1fr; }
  .answers dd { margin-bottom: 8px; text-align: left; }
}
@media (max-width: 640px) {
  .plat.wide { display: none; }
  .plat.narrow { display: block; }
  .home-hero { gap: 32px; padding-bottom: 48px; }
}

/* ---------- listings: homes and the evidence behind their prices ---------- */
.listings-header { padding: 22px 0 0; }
.listings-header h1 { max-width: 19ch; margin-bottom: 18px; }
.listings-header .lede { max-width: 44em; }
.listing-tabs { display: flex; flex-wrap: wrap; gap: 0 28px; margin: 24px 0; border-bottom: 1.5px solid var(--rule); }
.listing-tabs a { display: flex; align-items: center; gap: 10px; min-height: 54px; margin-bottom: -1.5px; padding: 8px 0; text-decoration: none; font-weight: 650; border-bottom: 3px solid transparent; }
.listing-tabs a[aria-current="page"] { border-bottom-color: var(--ink); }
.listing-tabs a:hover { color: var(--ink-hover); }
.listing-tabs span { font-size: 14px; color: var(--lead); font-variant-numeric: tabular-nums; }
.listing-search { max-width: 700px; margin: 0 0 22px; }
.listing-search label { display: block; margin-bottom: 8px; font-size: 15px; }
.listing-results-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; margin: 0 0 22px; }
.listing-results-meta p { margin: 0; }
.listing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 24px; }
.listing-card { min-width: 0; border-bottom: 1px solid var(--rule); }
.listing-photo { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 5px; background: var(--sheet); text-decoration: none; }
.listing-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.listing-photo-count { position: absolute; bottom: 10px; right: 10px; padding: 3px 8px; border-radius: 3px; color: var(--ink); background: var(--sheet); font-size: 12px; font-weight: 650; }
.listing-no-photo { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; color: var(--lead); background: var(--sheet); font-size: 14px; text-align: center; }
.listing-card-copy { padding: 16px 0 12px; }
.listing-card-copy h2 { margin: 12px 0 10px; font-size: 20px; line-height: 1.3; text-wrap: pretty; }
.listing-card-copy h2 a { text-decoration: none; }
.listing-card-copy h2 a:hover { text-decoration: underline; }
.listing-card-copy p { margin-bottom: 5px; }
.listing-card .listing-price { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.25; }
.listing-status { color: var(--lead); font-size: 14px; }
.listing-card .listing-over { font-size: 16px; font-weight: 700; letter-spacing: 0; white-space: nowrap; }
.listing-facts { display: flex; flex-wrap: wrap; gap: 3px 14px; list-style: none; padding: 0; margin: 0 0 8px; font-size: 14px; color: var(--lead); }
.listing-facts strong { color: var(--ink); font-weight: 600; }
.listing-pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin: 38px 0; }
.listing-pagination > :first-child { justify-self: start; }
.listing-pagination > :last-child { justify-self: end; }
.listing-pagination p { margin: 0; color: var(--lead); font-size: 14px; }
.listing-empty { padding: 36px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.listing-note { margin: 32px 0 0; max-width: 68em; }
.listing-detail-heading { padding: 12px 0 18px; }
.listing-detail-heading h1 { font-size: clamp(30px, 4vw, 46px); margin: 12px 0; }
.listing-overview { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); gap: 36px; align-items: start; margin: 0 0 48px; }
.listing-main-photo { aspect-ratio: 4 / 3; background: var(--sheet); border-radius: 5px; overflow: hidden; }
.listing-main-photo a { display: block; height: 100%; }
.listing-main-photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.listing-photo-viewer { min-width: 0; }
.listing-carousel { min-width: 0; border-radius: 5px; }
.listing-photo-track { display: flex; width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; border-radius: 5px; background: var(--sheet); }
.listing-photo-slide { flex: 0 0 100%; min-width: 0; aspect-ratio: 4 / 3; margin: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.listing-photo-slide a { display: block; height: 100%; }
.listing-photo-slide img { display: block; width: 100%; height: 100%; object-fit: contain; }
.listing-photo-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 16px; padding-top: 12px; }
.listing-photo-controls { display: flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; }
.listing-photo-controls button { min-width: 44px; min-height: 44px; padding: 0 12px; font-size: 28px; line-height: 1; }
.listing-photo-controls button:disabled { opacity: .4; cursor: default; }
.listing-photo-expand { min-height: 44px; padding: 0 14px; font-size: 14px; }
.listing-photo-controls[hidden], .listing-photo-expand[hidden], .listing-photo-fallback[hidden] { display: none; }
.listing-photo-provenance { margin: 12px 0 0; }
.listing-photo-fallback { margin-top: 14px; }
.listing-photo-fallback summary { cursor: pointer; min-height: 44px; font-weight: 600; }
.listing-photo-dialog { width: min(1160px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0 24px 24px; border: 1px solid var(--rule); border-radius: 10px; background: var(--ground); color: var(--ink); }
.listing-photo-dialog::backdrop { background: rgb(0 0 0 / 75%); }
.listing-photo-dialog-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; background: var(--ground); border-bottom: 1px solid var(--rule); margin-bottom: 20px; }
.listing-photo-dialog-head h2 { font-size: 23px; margin-bottom: 4px; }
.listing-photo-dialog-head p { margin: 0; }
.listing-photo-dialog-head button { flex-shrink: 0; }
.photo-dialog-open { overflow: hidden; }
.listing-analysis { scroll-margin-top: 24px; }
.listing-summary .listing-status { margin: 0 0 4px; }
.listing-detail-price { font-size: clamp(32px, 4vw, 46px); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.025em; line-height: 1.1; margin-bottom: 8px; }
.listing-summary .listing-facts { font-size: 17px; padding: 14px 0 6px; }
.listing-prediction { margin: 14px 0 0; }
.listing-prediction .label { margin: 0 0 2px; font-size: 15px; font-weight: 600; }
.listing-prediction .est-figure { gap: 8px 18px; }
.listing-prediction .listing-detail-price { margin: 0; }
.listing-prediction .over-ask span { font-size: 15px; }
.listing-estimate-link, .listing-match-note { margin: 22px 0; padding: 20px 0 0; border-top: 1px solid var(--rule); }
.listing-estimate-link .button { width: 100%; padding: 10px 16px; text-align: center; }
.listing-estimate-link p { margin: 10px 0 0; }
.listing-match-note h2 { font-size: 19px; }
.listing-match-note a { font-size: 15px; font-weight: 600; }
.listing-source a { display: inline-block; min-height: 30px; font-size: 15px; font-weight: 600; }
.listing-source p { margin: 0; }
.listing-asking-history { margin: 0 0 40px; padding: 20px 0 0; border-top: 1.5px solid var(--ink); }
.listing-asking-history h2 { font-size: 24px; }
.listing-asking-history > p { max-width: 76ch; }
.listing-asking-result { font-size: 20px; font-variant-numeric: tabular-nums; }
.asking-comparison-table { min-width: 650px; }
.price-history-table { min-width: 610px; }
.listing-price-history { margin: 20px 0; }
.listing-price-history summary { cursor: pointer; min-height: 44px; padding: 8px 0; font-weight: 600; }
.price-history-closing td { background: var(--sheet); font-weight: 600; }
.listing-asking-teaser { font-size: 15px; }
.listing-gallery-heading { max-width: 720px; margin: 0 0 24px; }
.listing-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
.listing-gallery figure { min-width: 0; margin: 0; }
.listing-gallery a { display: block; background: var(--sheet); }
.listing-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
.listing-gallery figcaption { margin-top: 8px; }
@media (max-width: 950px) {
  .listing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .listing-overview { grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr); gap: 24px; }
}
@media (max-width: 650px) {
  .listings-header { padding-top: 16px; }
  .listing-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .listing-tabs { gap: 0 22px; }
  .listing-tabs a { font-size: 15px; }
  .listing-tabs span { font-size: 13px; }
  .listing-overview { grid-template-columns: minmax(0, 1fr); }
  .listing-gallery { grid-template-columns: minmax(0, 1fr); }
  .listing-pagination { gap: 10px; }
  .listing-pagination .button { padding: 0 14px; }
  .listing-photo-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); padding: 0 12px 16px; }
  .listing-photo-dialog-head { align-items: start; gap: 10px; padding: 14px 0; }
  .listing-photo-dialog-head h2 { font-size: 20px; }
  .listing-photo-dialog-head button { padding: 0 12px; font-size: 14px; }
}
.listing-card-compact { display: grid; grid-template-columns: minmax(180px, 300px) minmax(0, 1fr); gap: 24px; align-items: start; padding: 0 0 20px; margin-bottom: 24px; }
.listing-card-compact .listing-card-copy { padding: 0; }
.listing-view-photos { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; }
@media (max-width: 650px) {
  .listing-card-compact { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* ---------- The buyer's search: drag the boundary circle and the strip of sales (src/search-client.ts) ---------- */
.plat .boundary-hit { fill: none; stroke: transparent; stroke-width: 18; pointer-events: stroke; cursor: grab; touch-action: none; }
.plat-handle { cursor: ew-resize; touch-action: none; outline: none; }
.plat-handle .hit { fill: transparent; }
.plat-handle .knob { fill: var(--ground); stroke: var(--ink); stroke-width: 1.8; }
.plat-handle:hover .knob, .plat-handle:focus-visible .knob, .plat.dragging .knob { fill: var(--hl); }
.plat-handle:focus-visible .hit { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 3 3; }
.plat .handle-read { font-size: 12px; fill: var(--ink); font-variant-numeric: tabular-nums; }
.plat.dragging, .plat.dragging .boundary-hit { cursor: grabbing; }
.plat .out { opacity: 0.2; }
.plat .beyond { display: none; }
.strip { padding: 10px 14px 2px; border-top: 0.75px solid var(--ink); font-family: var(--font-map); }
.strip-read { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; margin-bottom: 10px; }
.strip-read p { margin: 0; font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.strip-hint { font-size: 12.5px; color: var(--lead); }
.strip-listed { font-weight: 500; color: var(--lead); }
.strip-reset { font-size: 13px; font-weight: 650; }
.strip-track { position: relative; height: 48px; cursor: ew-resize; touch-action: pan-y; }
.strip-track:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.strip-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 1px; border-bottom: 1px solid var(--ink); }
.strip-bars > span { flex: 1 1 0; background: var(--pencil); opacity: 0.4; }
.strip-bars > span.on { background: var(--ink); opacity: 1; }
.strip-gap {
  position: absolute; top: 40%; bottom: 0; display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-size: 11px; font-weight: 600; color: var(--lead); white-space: nowrap; pointer-events: none;
  background: repeating-linear-gradient(135deg, var(--rule) 0 1px, transparent 1px 6px);
}
.strip-flag { position: absolute; top: -7px; bottom: -3px; border-left: 2px solid var(--ink); pointer-events: none; }
.strip-flag::before { content: ""; position: absolute; top: 0; left: 0; width: 13px; height: 9px; background: var(--hl); border: 1px solid var(--ink); border-left: 0; }
.strip.dragging .strip-flag::before, .strip-track:focus-visible .strip-flag::before { width: 17px; }
.strip-years { position: relative; height: 20px; font-size: 11px; color: var(--lead); }
.strip-years span { position: absolute; top: 4px; padding-left: 3px; border-left: 1px solid var(--rule); line-height: 1.2; }
.sheet[aria-busy] .est .big, .sheet[aria-busy] .dim-labels, .sheet[aria-busy] .over-ask, #comps[aria-busy] .table-wrap, #estimate-summary[aria-busy] .listing-estimate, #estimate-summary[aria-busy] .est-figure { opacity: 0.45; }
@media (prefers-reduced-motion: no-preference) {
  .sheet .est .big, .sheet .dim-labels, .sheet .over-ask, #comps .table-wrap, .listing-estimate, .listing-prediction .est-figure { transition: opacity 0.15s; }
}

/* ---------- The estimate against the asking price: set off from the figure by an extension line ---------- */
.est-figure { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.over-ask { display: flex; flex-direction: column; gap: 4px; margin: 0; padding-left: 14px; border-left: 1.25px solid var(--ink); }
.over-ask strong { font-size: 21px; font-weight: 750; font-stretch: 108%; line-height: 1.05; font-variant-numeric: tabular-nums; }
.over-ask span { font-family: var(--font-map); font-size: 13px; color: var(--lead); font-variant-numeric: tabular-nums; }
.listing-estimate { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0 0 16px; }
.listing-estimate .label { flex-basis: 100%; font-size: 14px; color: var(--lead); }
.listing-estimate strong { font-size: 27px; font-weight: 700; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.listing-estimate .over { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- What a listed home's asking price says: nearby sales against their asking prices, and what the owners paid ---------- */
.ask-check { margin: 0 0 36px; }
.ask-check h2 { font-size: 24px; }
.ask-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 20px 40px; }
.ask-part { padding-top: 12px; border-top: 1.5px solid var(--ink); }
.ask-part h3 { margin: 0 0 6px; font-family: var(--font-map); font-size: 14px; font-weight: 700; color: var(--lead); }
.ask-part p { max-width: 62ch; }
.ask-figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0 0 8px; }
.ask-figure strong { font-size: 30px; font-weight: 700; font-stretch: 108%; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.ask-figure span { font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; }

/* ---------- Neighborhood directory: an index sheet of neighborhoods and streets, then each street's homes ---------- */
.browse .lede { max-width: 40em; }
.browse-block { margin-top: 36px; }
.sheet-index { columns: 3 240px; column-gap: 36px; margin: 20px 0 0; padding: 0; list-style: none; border-top: 1.5px solid var(--ink); }
.sheet-index li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; break-inside: avoid; border-bottom: 1px dotted var(--pencil); }
.sheet-index a { font-weight: 600; text-decoration: none; }
.sheet-index a:hover { text-decoration: underline; }
.sheet-index span { font-family: var(--font-map); font-size: 13px; color: var(--lead); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sheet-index.streets { columns: 4 190px; }
table.browse-table { min-width: 560px; }
.browse-table td.home { min-width: 12em; white-space: normal; }
.hood-body table.browse-table { min-width: 520px; }
.hood-body .browse-table th, .hood-body .browse-table td { padding: 9px 8px; }
/* The market schedule: a ruled table like a drawing set's door schedule, labels in the map face, sale vs. asking first. */
table.market-table { width: 100%; max-width: 720px; min-width: 0; border: 1.5px solid var(--ink); font-variant-numeric: tabular-nums; }
.market-table th, .market-table td { padding: 10px 16px; border-bottom: 0.75px solid var(--rule); }
.market-table thead th, .market-table thead td { vertical-align: bottom; border-bottom: 1.5px solid var(--ink); }
.market-table thead th { font-family: var(--font); font-size: 15px; font-weight: 700; color: var(--ink); text-align: right; }
.market-table thead th span { display: block; font-family: var(--font-map); font-size: 12.5px; font-weight: 500; color: var(--lead); }
.market-table .market-period { font-family: var(--font-map); font-size: 12.5px; color: var(--lead); white-space: normal; border-right: 0.75px solid var(--rule); }
.market-table tbody th { font-family: var(--font-map); font-size: 13.5px; font-weight: 600; color: var(--lead); white-space: normal; border-right: 0.75px solid var(--rule); }
.market-table tbody td { width: 30%; font-size: 17px; font-weight: 700; }
.market-table tbody td .muted { font-size: 13px; font-weight: 500; }
.market-table tr.lead th { color: var(--ink); }
.market-table tr.lead td { font-size: 23px; font-stretch: 108%; letter-spacing: -0.01em; }
.market-note { max-width: 68ch; margin: 12px 0 0; }

/* A neighborhood's sheet: the schedules on the left, the neighborhood drawn on the right and held in view while they scroll. */
.hood-sheet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); grid-template-areas: "head map" "body map"; gap: 0 44px; align-items: start; }
.hood-head { grid-area: head; }
.hood-body { grid-area: body; min-width: 0; }
.hood-map { grid-area: map; position: sticky; top: 16px; margin: 10px 0 0; }
.hood-map .plat { border: 1.5px solid var(--ink); }
.plat.hood .bm-labels text { font-size: 11px; }
#bm-water-hood .bm-hatch { stroke: var(--water-line); }
#bm-park-hood .bm-hatch { stroke: var(--park-line); }
.hood-line { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-dasharray: 16 4 2.5 4; stroke-linejoin: round; }
.hood-band { fill: none; stroke: var(--ink); stroke-width: 12; opacity: 0.09; }
.hood-inset .plat-backing { stroke: var(--ink); stroke-width: 0.75; }
.hood-inset .city { fill: var(--sheet); stroke: var(--pencil); stroke-width: 0.4; }
.hood-inset .here { fill: var(--ink); }
.hood .hm { cursor: pointer; }
.hood .hm-hit { fill: transparent; }
.hood .hm-dot, .hood-legend circle { stroke-width: 1.5; }
.hood .hm.listing .hm-dot, .hood-legend .listing { fill: var(--ink); stroke: var(--ground); }
.hood .hm.sale .hm-dot, .hood-legend .sale { fill: var(--ground); stroke: var(--ink); stroke-width: 1.6; }
.hood .hm.hot .hm-hit { fill: var(--hl); stroke: var(--ink); stroke-width: 1; }
.hood .hm.hot .hm-dot { stroke: var(--ink); }
.hood .plat-tag { font-size: 12.5px; }
.hood-legend { margin-top: 10px; }
.hood-legend ul { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0 0 4px; padding: 0; list-style: none; font-family: var(--font-map); font-size: 14px; font-weight: 600; }
.hood-legend li { display: flex; align-items: center; gap: 6px; }
.hood-legend p { margin: 0; }
@media (hover: none) { .hover-hint { display: none; } }
/* A table row and its home's mark light up together (src/client.ts). */
.browse-table tr.hot td { background: var(--hl); color: var(--hl-ink); }
.browse-table tr.hot a, .browse-table tr.hot .muted { color: var(--hl-ink); }
@media (max-width: 980px) {
  .hood-sheet { display: block; }
  .hood-map { position: static; max-width: 560px; margin: 4px 0 8px; }
}
@media (max-width: 640px) {
  .market-table th, .market-table td { padding: 8px 10px; }
  .market-table tbody td { width: auto; font-size: 16px; }
  .market-table tr.lead td { font-size: 19px; }
  .market-table thead th { font-size: 14px; }
}
.for-sale { display: inline-block; margin-left: 8px; padding: 1px 6px; font-family: var(--font-map); font-size: 12px; font-weight: 700; border: 1.25px solid currentColor; border-radius: 3px; }

/* ---------- The real city under the map (src/basemap.ts): water and parks hatched, streets as corridors ---------- */
.bm-water-ground { fill: var(--water); }
.bm-park-ground { fill: var(--park); }
.basemap pattern .bm-hatch { stroke-width: 0.8; }
#bm-water-wide .bm-hatch, #bm-water-narrow .bm-hatch { stroke: var(--water-line); }
#bm-park-wide .bm-hatch, #bm-park-narrow .bm-hatch { stroke: var(--park-line); }
.bm-streets path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bm-streets .edge { stroke: var(--street-edge); }
.bm-streets .edge.f { stroke: var(--pencil); }
.bm-streets .road { stroke: var(--street); }
.bm-streets .road.w { stroke-dasharray: 2 2.5; }
.bm-streets.line .road { stroke: var(--street-edge); }
.bm-streets.line .road.a, .bm-streets.line .road.f { stroke: var(--pencil); }
.plat .bm-labels text { font-weight: 500; fill: var(--lead); stroke-width: 3px; letter-spacing: 0.01em; }
.plat.wide .bm-labels text { font-size: 10px; }
.plat.narrow .bm-labels text { font-size: 9px; }
.plat .bm-labels .street { stroke: var(--street); }
.plat .bm-labels .water { font-style: italic; fill: var(--water-ink); stroke: var(--water); letter-spacing: 0.08em; }
.plat .bm-labels .park { font-style: italic; stroke: var(--park); }
/* Outside the search circle the city sits behind a veil, so the circle reads as the area searched. */
.plat-veil { fill: var(--ground); opacity: 0.55; pointer-events: none; }
.plat .pt-hit { fill: transparent; cursor: pointer; }
.plat .pt-hit:hover { fill: color-mix(in srgb, var(--hl) 45%, transparent); stroke: var(--ink); stroke-width: 1; }
/* Every sale in the circle is a row: the table scrolls inside the page, its header staying put. */
#comps .table-wrap { max-height: 36rem; overflow: auto; }
#comps-table thead th { position: sticky; top: 0; z-index: 1; background: var(--ground); }

/* ---------- The market schedule by month: each home type's latest month beside its twelve months ---------- */
/* On a phone the schedule scrolls sideways inside its frame rather than squeezing the row labels to a word a line. */
.market-table.by-month { max-width: 820px; min-width: 560px; }
.market-table.by-month thead th[scope="colgroup"] { text-align: center; border-bottom: 0.75px solid var(--rule); }
.market-table .market-cols th { font-family: var(--font-map); font-size: 12.5px; font-weight: 600; color: var(--lead); }
.market-table.by-month tbody td { width: auto; }
.market-table.by-month td.month, .market-table.by-month .market-cols th:nth-child(odd) { border-left: 0.75px solid var(--rule); }
.market-table.by-month tr.lead td { font-size: 20px; }

/* ---------- The market page: a sheet per home type, its month in figures, then month by month ---------- */
.market-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; margin-top: 28px; }
.market-panel { min-width: 0; padding-top: 14px; border-top: 1.5px solid var(--ink); }
.market-panel h2 { margin-bottom: 2px; }
.market-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; margin: 16px 0 26px; }
.market-figs dt { font-family: var(--font-map); font-size: 13px; font-weight: 600; color: var(--lead); }
.market-figs dd { margin: 2px 0 0; font-size: 27px; font-weight: 700; font-stretch: 108%; letter-spacing: -0.015em; line-height: 1.15; }
.market-figs dd span { display: block; margin-top: 3px; font-size: 14px; font-weight: 500; font-stretch: 100%; letter-spacing: 0; color: var(--lead); }
.trend-fig { margin: 0 0 24px; }
.trend-fig figcaption { margin-bottom: 2px; font-family: var(--font-map); font-size: 14px; font-weight: 700; }
.trend-plot { position: relative; max-width: 560px; }
.trend { display: block; width: 100%; height: auto; overflow: visible; }
.trend.narrow { display: none; }
.trend:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.trend text { font-family: var(--font-map); font-size: 11.5px; fill: var(--lead); font-variant-numeric: tabular-nums; }
.trend .trend-label { font-size: 13px; font-weight: 700; fill: var(--ink); }
.trend-grid line { stroke: var(--rule); stroke-width: 1; }
.trend-grid line.zero { stroke: var(--lead); }
.trend-line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.trend-end { fill: var(--ink); stroke: var(--ground); stroke-width: 2; }
.trend-cols path { fill: var(--ink); }
.trend-cross { stroke: var(--lead); stroke-width: 1; }
.trend-hit rect { fill: transparent; }
.trend-hit rect.on { fill: var(--ink); fill-opacity: 0.06; }
.trend-tip { position: absolute; bottom: calc(100% - 6px); left: 0; z-index: 2; margin: 0; padding: 6px 10px; white-space: nowrap; background: var(--sheet); border: 1px solid var(--ink); border-radius: 6px; pointer-events: none; }
.trend-tip strong { display: block; font-size: 15px; }
.trend-tip span { display: block; font-family: var(--font-map); font-size: 12px; color: var(--lead); }
.hood-month thead th[scope="colgroup"] { text-align: center; border-bottom: 0.75px solid var(--rule); }
.hood-month tbody th, .market-months tbody th { font-family: var(--font); font-size: 14.5px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--rule); }
.hood-month td.num, .market-months td.num { padding-left: 14px; }
.market-months { margin-top: 32px; }
.market-months summary { min-height: 44px; display: flex; align-items: center; font-weight: 650; cursor: pointer; }
@media (max-width: 980px) {
  .market-panels { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .trend.wide { display: none; }
  .trend.narrow { display: block; }
  .market-figs dd { font-size: 23px; }
}

/* ---------- The newsletter: sign up, then change what you get from your own link ---------- */
.newsletter { max-width: 860px; }
.nl-form { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.nl-form > label { font-size: 15px; }
.nl-form > input[type="email"] { max-width: 440px; }
.nl-form fieldset { margin: 14px 0 0; padding: 14px 0 0; border: 0; border-top: 1.5px solid var(--ink); }
.nl-form legend { padding: 0; font-family: var(--font-map); font-size: 14px; font-weight: 700; }
.nl-check { display: flex; align-items: center; gap: 10px; min-height: 40px; font-weight: 500; cursor: pointer; }
.nl-city { font-weight: 600; }
.nl-hoods { columns: 3 220px; column-gap: 28px; margin: 6px 0 0; padding: 0; list-style: none; }
.nl-hoods li { break-inside: avoid; }
.nl-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 12px 18px; margin-top: 8px; }
.nl-row label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--lead); }
.nl-form button[type="submit"] { align-self: flex-start; margin-top: 14px; }
.nl-leave { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--rule); }
.nl-cta { margin: 4px 0 0; }