/* Sold Nearby. Deliberately the same family as the net sheet it sits beside: cream ground,
   old-style serif for anything a person reads aloud, brass for money, ruled rows like a ledger. */
:root{
  --ground:#F1F2ED;
  --surface:#FFFFFF;
  --surface-2:#E9EBE3;
  --ink:#17242A;
  --ink-2:#4A5A60;
  --ink-3:#7C8A8E;
  --line:#D6D9CF;
  --line-soft:#E4E7DD;
  --brass:#8F6316;
  --brass-soft:#F3E8D2;
  --verdigris:#2F6659;
  --verdigris-soft:#DEEAE5;
  --display:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);
  display:flex;flex-direction:column;overflow:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------------------------------------------------------------- masthead */
.masthead{background:var(--surface);border-bottom:1px solid var(--line)}
.masthead .wrap{display:flex;align-items:center;gap:26px;padding:14px 22px;flex-wrap:wrap}
.eyebrow{margin:0 0 3px;font:600 .58rem/1 var(--mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--brass)}
.masthead h1{margin:0;font-family:var(--display);font-size:1.6rem;font-weight:400;line-height:1}
.find{display:flex;gap:8px;margin-left:auto;flex:1 1 340px;max-width:520px}
.find input{flex:1;padding:11px 13px;border:1px solid var(--line);border-radius:2px;
  font-family:var(--body);font-size:.95rem;background:var(--ground);color:var(--ink);min-width:0}
.find input:focus{outline:2px solid var(--brass);outline-offset:1px;border-color:var(--brass)}
.find button{padding:11px 20px;border:1px solid var(--ink);background:var(--ink);color:var(--surface);
  border-radius:2px;cursor:pointer;font:700 .66rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.find button:hover{background:var(--brass);border-color:var(--brass)}

/* ---------------------------------------------------------------- layout */
main{flex:1;display:flex;min-height:0}
.panel{width:400px;flex:0 0 400px;background:var(--surface);border-right:1px solid var(--line);
  overflow-y:auto;padding:18px 20px 24px;display:flex;flex-direction:column;gap:16px}
.mapwrap{flex:1;position:relative;min-width:0}
#map{position:absolute;inset:0}
.flag{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:5;background:var(--ink);
  color:var(--ground);padding:7px 14px;border-radius:2px;font:600 .58rem/1 var(--mono);
  letter-spacing:.14em;text-transform:uppercase}

/* ---------------------------------------------------------------- controls */
.controls{display:flex;flex-direction:column;gap:8px}
.seg{display:flex;gap:6px}
.seg button{flex:1;padding:9px 6px;border:1px solid var(--line);background:var(--ground);
  color:var(--ink-2);border-radius:2px;cursor:pointer;font:600 .62rem/1 var(--mono);
  letter-spacing:.08em;text-transform:uppercase;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.seg button:hover{border-color:var(--brass);color:var(--ink)}
.seg button.on{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.seg.small button{font-size:.58rem;padding:8px 4px}
.seg button:disabled{opacity:.4;cursor:not-allowed;border-style:dashed}
.seg button:disabled:hover{border-color:var(--line);color:var(--ink-2)}

.sortrow{display:flex;align-items:center;gap:10px}
.sortrow span{font:600 .58rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.sortrow select{flex:1;padding:9px 10px;border:1px solid var(--line);border-radius:2px;
  background:var(--ground);color:var(--ink);font-family:var(--body);font-size:.86rem}
.sortrow select:focus{outline:2px solid var(--brass);outline-offset:1px}

/* which register you are reading, said plainly, because the two are not the same thing */
.mode{margin:0;padding:10px 12px;border-radius:2px;font-size:.82rem;line-height:1.5}
.mode.sale{background:var(--verdigris-soft);border:1px solid #C9DCD5;color:var(--ink-2)}
.mode.assess{background:var(--brass-soft);border:1px solid #E3D2AC;color:var(--ink-2)}
.mode b{color:var(--ink)}

.sales li.grp{display:block;padding:14px 0 6px;border-bottom:1px solid var(--line);
  font:600 .58rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
  cursor:default}
.sales li.stat{cursor:default}
.sales li.stat:hover .addr{color:var(--ink)}
.sales li.stat .addr{font-variant-numeric:tabular-nums}

.figures{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:14px 0}
.fig b{display:block;font-family:var(--display);font-size:1.5rem;line-height:1.05;
  font-variant-numeric:tabular-nums}
.fig span{font:600 .54rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

.reading{margin:0;color:var(--ink-2);font-size:.92rem;line-height:1.55}

/* ---------------------------------------------------------------- ledger */
.sales{list-style:none;margin:0;padding:0}
.sales li{display:grid;grid-template-columns:1fr auto;gap:2px 14px;padding:11px 0;
  border-bottom:1px solid var(--line-soft);cursor:pointer}
.sales li:hover .addr{color:var(--brass)}
.addr{font-family:var(--display);font-size:1.02rem;line-height:1.2}
.price{font:700 1rem/1.2 var(--mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.meta{grid-column:1/2;font:600 .58rem/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.psf{grid-column:2/3;text-align:right;font:600 .58rem/1.4 var(--mono);color:var(--ink-3);white-space:nowrap}

.pair{background:var(--verdigris-soft);border:1px solid #C9DCD5;border-radius:2px;padding:14px 15px}
.pair h2{margin:0 0 6px;font-family:var(--display);font-size:1.12rem;font-weight:400}
.pair p{margin:0 0 10px;font-size:.86rem;line-height:1.5;color:var(--ink-2)}
.pair a{font:700 .64rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--verdigris);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}

.source{margin:0;font-size:.72rem;line-height:1.55;color:var(--ink-3)}

.maplibregl-popup-content{font-family:var(--body);border-radius:2px;padding:10px 12px}
.maplibregl-popup-content b{font-family:var(--display);font-weight:400;font-size:1.02rem}

@media (max-width:900px){
  body{overflow:auto}
  main{flex-direction:column}
  .panel{width:auto;flex:none;border-right:0;border-bottom:1px solid var(--line);order:2}
  .mapwrap{height:56vh;flex:none;order:1}
}