/* Home: address entry, pending box, recent sites and the deal feed on the front page. */
.home-mount { text-align: left; }
.home-mount:empty { display: none; }
#home-address { margin: 0 0 20px; }
#home-sites,
#home-deals { margin: 32px 0 0; }

.home-address {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
}
.home-address h2,
.home-sites h2 { margin: 0; font-size: 15px; font-weight: 550; }
.home-address-row { display: flex; gap: 8px; margin-top: 10px; }
.home-address-row input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  font: 14px var(--sans);
}

.home-follow {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.home-follow:hover:not(:disabled) { background: var(--surface-2); }
.home-follow.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.home-follow.primary:hover:not(:disabled) { background: color-mix(in oklch, var(--accent) 86%, var(--bg)); }
.home-follow:disabled { opacity: 0.5; cursor: not-allowed; }
.home-deals-pager .home-follow[aria-disabled="true"] { opacity: 0.5; cursor: progress; }
html.dark .home-follow.primary { background: var(--ink); border-color: var(--ink); color: var(--bg); }

.home-pending {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding: 12px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  font-size: 13px;
}
.home-pending[hidden] { display: none; }
/* On /sites the box stays in view while the user browses the listings below it. */
.core-screen .home-pending {
  position: sticky;
  top: 12px;
  z-index: 3;
  margin: 0 0 28px;
  background: var(--paper);
}
.home-pending p { margin: 0; }
.home-pending.is-failed { border-color: color-mix(in oklch, var(--danger) 55%, transparent); }

.home-sites-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.home-all-sites {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  font-size: 12.5px;
  color: var(--ink-muted);
}
.home-all-sites:hover { color: var(--ink); }
.home-all-sites[hidden] { display: none; }
.home-site-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.home-site-list > .retry-line { grid-column: 1 / -1; }
.home-site-skeleton { gap: 8px; pointer-events: none; }
.deal-card-skeleton { pointer-events: none; }
.deal-card-skeleton .deal-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.home-site {
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink);
  text-decoration: none;
  transition: background-color var(--dur-2) var(--ease);
}
.home-site:hover { background: var(--surface-2); }
.home-site strong { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-site small { font-size: 12px; color: var(--ink-muted); }
.home-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 14px 16px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--ink-muted);
}

/* Deal feed: ten underwritten listings at a time, each on the deal card. */
.home-deals-sort { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-muted); }
.home-deals-sort select {
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  font: 13px var(--sans);
}
.home-deals-intro { margin: 0 0 12px; font-size: 13px; color: var(--ink-muted); }
.home-deal-list { display: grid; gap: 10px; }
.home-deals[aria-busy="true"] .home-deal-list { opacity: 0.6; }
.home-deals-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.home-deals-status { font-size: 12.5px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

.deal-card {
  display: grid;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
}
.deal-card:focus-visible,
.home-deal-list > .home-empty:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.deal-card:focus:not(:focus-visible) { outline: none; }
.home-deals-error { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.home-deals-error p { margin: 0; }
.deal-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.deal-card-title { min-width: 0; }
.deal-card-title h3 { margin: 0; font-size: 15px; font-weight: 550; overflow-wrap: anywhere; }
.deal-card-district { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-muted); }
.deal-card-underwrite { flex: none; }

.deal-card-hold { margin: 0; font-size: 12.5px; color: var(--ink); padding-left: 8px; border-left: 2px solid var(--warning); }
.deal-figures,
.deal-projections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.deal-figure dt,
.deal-projections dt { font-size: 12px; color: var(--ink-muted); }
.deal-figure dd,
.deal-projections dd { display: grid; gap: 2px; margin: 2px 0 0; }
.deal-figure strong { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.deal-figure small { font-size: 12px; color: var(--ink-muted); }
.deal-projections { padding-top: 12px; border-top: 1px solid var(--line); }
.deal-projections dd { font-size: 14px; font-weight: 550; font-variant-numeric: tabular-nums; }
.deal-listing-link { display: inline-flex; align-items: center; align-self: start; min-height: 28px; color: var(--accent); font-size: 12px; text-underline-offset: 3px; }
.deal-listing-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-sm); }

.deal-scale { display: grid; gap: 6px; }
.deal-scale-track { position: relative; height: 8px; border-radius: var(--r-pill); background: var(--surface-3); }
.deal-scale-zone { position: absolute; top: 0; bottom: 0; }
.deal-scale-zone.zone-great { border-radius: var(--r-pill) 0 0 var(--r-pill); background: var(--success); }
.deal-scale-zone.zone-good { background: color-mix(in oklab, var(--success) 68%, var(--surface)); }
.deal-scale-zone.zone-fair { background: color-mix(in oklab, var(--ink) 42%, var(--surface)); }
.deal-scale-zone.zone-full { border-radius: 0 var(--r-pill) var(--r-pill) 0; background: var(--danger); }
.deal-scale-ask {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--ink);
  transform: translate(-50%, -50%);
  box-shadow: var(--shadow-1);
}
.deal-scale-labels { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.deal-scale-note { margin: 0; font-size: 12px; color: var(--ink-muted); }

@media (max-width: 640px) {
  .home-address-row { flex-direction: column; }
  .home-site-list { grid-template-columns: minmax(0, 1fr); }
  .home-sites-head { flex-wrap: wrap; }
  .deal-card-head { flex-direction: column; }
  .deal-card-underwrite { width: 100%; }
  .deal-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deal-projections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .home-follow,
  .home-site,
  .deal-map-pin-dot { transition: none; }
}

/* Map of New York beside the feed: a dot on each listing's location and one numbered pin per card,
   linked both ways. The map comes first, on the left from 700px up, so reading order and tab order
   match at every width; a page with nothing to map keeps the full width for its cards. */
.home-deals { container-type: inline-size; }
.home-deals-body { display: grid; gap: 16px; }
.home-deal-map:empty { display: none; }
.home-deal-map { width: 100%; max-width: 360px; justify-self: center; }
@container (min-width: 700px) {
  .home-deals-body:has(> .home-deal-map:not(:empty)) { grid-template-columns: 272px minmax(0, 1fr); align-items: start; }
  .home-deal-map { position: sticky; top: 16px; max-width: none; }
}
.deal-map {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
}
.deal-map-canvas { position: relative; width: 100%; overflow: hidden; border-radius: var(--r-md); }
.deal-map-canvas svg,
.deal-map-names,
.deal-map-pins { position: absolute; inset: 0; }
.deal-map-canvas svg { display: block; width: 100%; height: 100%; }
.deal-map-names,
.deal-map-pins { pointer-events: none; }
/* The outlines carry the geography, so they hold 3:1 against the water in both themes. */
.deal-map-borough {
  fill: color-mix(in oklab, var(--ink) 6%, var(--surface));
  stroke: var(--ink-faint);
  stroke-width: 1;
  stroke-linejoin: round;
}
.deal-map-label {
  position: absolute;
  transform: translate(-50%, -50%);
  font: 500 11px/14px var(--sans);
  color: var(--ink-muted);
  white-space: nowrap;
}
.deal-map-leader { stroke: var(--ink-muted); stroke-width: 1.5; }
.deal-map-spot { fill: var(--ink); stroke: var(--surface); stroke-width: 1.5; }
/* A 28px target around a 24px disc; deal-map.js keeps targets this far apart. */
.deal-map-pin {
  position: absolute;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  transform: translate(-50%, -50%);
  cursor: pointer;
  pointer-events: auto;
}
.deal-map-pin-dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid var(--surface);
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--surface);
  font: 600 11px var(--sans);
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.deal-map-pin:hover,
.deal-map-pin[aria-current="true"] { z-index: 1; }
.deal-map-pin:hover .deal-map-pin-dot,
.deal-map-pin[aria-current="true"] .deal-map-pin-dot { border-color: var(--ink); background: var(--surface); color: var(--ink); transform: scale(1.25); }
.deal-map-pin:focus-visible { z-index: 2; outline: 2px solid var(--green); outline-offset: -2px; }
.deal-map-pin:focus:not(:focus-visible) { outline: none; }
.deal-map-caption { margin: 8px 2px 0; font-size: 12px; color: var(--ink-muted); }

/* The card's pin number sits beside its address and district, on every width. */
.deal-card-title:has(> .deal-card-pin) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; }
.deal-card-pin {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--ink);
  font: 600 11px var(--sans);
  font-variant-numeric: tabular-nums;
}
.home-deal-list .deal-card.is-active { border-color: var(--ink-muted); box-shadow: var(--shadow-1); }
.home-deal-list .deal-card.is-active .deal-card-pin { background: var(--ink); color: var(--surface); }