/* Listing search, listing pages, alert forms and admin. Loaded only by the
   server-rendered pages; shares tokens with site.css. */

.sform{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 22px;align-items:end}
.sform .f{margin-bottom:18px}
.sform .types{grid-column:1/-1}
.sform .btn{grid-column:1/-1;justify-self:start}
fieldset.types{border:0;padding:0;margin:0 0 22px;display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center}
fieldset.types legend{margin-bottom:12px;float:left;width:100%}
.chk{display:inline-flex;gap:8px;align-items:center;font-size:15px}
.chk input{width:16px;height:16px;accent-color:#000;margin:0}

.lgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px clamp(20px,2.6vw,36px)}
.lcard{text-decoration:none;display:block}
.lcard .fr{position:relative;overflow:hidden;background:#f4f4f4;aspect-ratio:4/3}
.lcard .fr img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.lcard:hover .fr img{transform:scale(1.035)}
.badge{position:absolute;left:0;top:0;background:#fff;padding:7px 12px;font-size:10.5px;
  font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.badge.st{background:#000;color:#fff}
.lprice{font-family:var(--serif);font-size:26px;line-height:1.1;margin:16px 0 6px}
.lspec{font-size:15px;margin:0 0 4px}
.laddr{font-size:15px;margin:0 0 10px}
.lfoot{display:flex;gap:10px;align-items:center;font-size:15px;color:var(--quiet);margin:0}
.lcard:hover .laddr{text-decoration:underline;text-underline-offset:4px}

/* Rules 20.3.3: listing firm in type no smaller than the median of the listing data. */
.attr{font-size:17px;margin:14px 0}
.bmls{height:22px;width:auto;display:inline-block;vertical-align:middle}
.bmls.sm{height:16px}

.lhero{aspect-ratio:16/8;background:#f4f4f4;overflow:hidden}
.lhero img{width:100%;height:100%;object-fit:cover}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pgrid img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#f4f4f4}
.mlsdata{border-top:1px solid var(--ink);margin-top:34px;padding-top:22px}
.mlsdata .label{display:flex;align-items:center;gap:10px;margin-bottom:18px}

.savebox{border:1px solid var(--ink);padding:clamp(22px,2.6vw,34px)}
.savebox h2{margin-bottom:10px}
.savebox form{margin-top:18px}
.pager{display:flex;gap:28px;align-items:center;justify-content:center;margin-top:60px;font-size:15px}
.idx-updated{padding:0 0 40px}
.linkbtn{background:none;border:0;padding:0;font:inherit;text-decoration:underline;cursor:pointer;color:inherit}
.admin table td,.admin table th{font-size:14.5px}
.admin details summary{cursor:pointer}
.agrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 22px}

@media(max-width:1000px){
  .sform{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .agrid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .sform{grid-template-columns:1fr 1fr}
  .lgrid,.pgrid{grid-template-columns:1fr}
  .lhero{aspect-ratio:4/3}
}

/* ---- saved homes: the heart on cards (signed in only) ---- */
.lcw{position:relative}
.heart{position:absolute;top:10px;right:10px;margin:0}
.heart button{width:44px;height:44px;border-radius:50%;border:1px solid var(--rule);background:#fff;
  color:#000;display:grid;place-items:center;cursor:pointer;padding:0}
.heart button svg path{fill:none}
.heart button[aria-pressed="true"] svg path{fill:currentColor}
.heart button:hover{border-color:#000}
.heart button:focus-visible{outline:2px solid #000;outline-offset:2px}

/* ---- account pages ---- */
.acct-sec{padding-top:clamp(40px,6vw,80px)}
.acct{max-width:480px}
.acct .d2,.acct-wide .d2{margin-bottom:18px}
.acct .lead,.acct-wide .lead{font-size:clamp(17px,1.4vw,20px);margin-bottom:34px;max-width:60ch}
.formerr{border:1px solid #000;padding:14px 18px;font-size:15px;margin:0 0 28px}
.aform .btn{min-width:220px;cursor:pointer}
.alinks{margin-top:28px;line-height:2.1}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.inl{display:inline}
.mhh{display:block;margin:56px 0 22px}
.mhh:first-of-type{margin-top:10px}
.mhnote{margin:10px 0 0}
.mlist,.slist{list-style:none;padding:0;margin:0;border-top:1px solid #000}
.mlist{margin-top:34px}
.mlist li{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid var(--rule);font-size:15px}
.slist li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px 34px;align-items:center;
  padding:18px 0;border-bottom:1px solid var(--rule);font-size:15px}
.sname a{font-size:17px}
.slist select{border:0;border-bottom:1px solid #000;border-radius:0;background:transparent;font:inherit;
  padding:6px 0;margin-right:12px;color:inherit}
.sacts{display:flex;gap:22px}
.mhfoot{margin-top:70px;border-top:1px solid var(--rule);padding-top:28px;display:flex;
  justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap}
.mhfoot p{margin:0;max-width:60ch}
.mhfoot .btn{cursor:pointer}

/* ---- admin: client accounts ---- */
.asec{margin:44px 0 20px}
.invite{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:0 22px;align-items:end;margin:26px 0 30px}
.invite .btn{margin-bottom:22px;cursor:pointer}

@media(max-width:760px){
  .invite{grid-template-columns:1fr}
  .invite .btn{justify-self:start}
}
@media(max-width:620px){
  .slist li{grid-template-columns:1fr;gap:10px}
  .aform .btn,.mhfoot .btn{width:100%}
  .mhfoot{flex-direction:column;align-items:stretch}
}

/* ---- listings map (area pages). Black and white tiles, so the pins and
   popups stay in the Compass palette too. Leaflet's own CSS loads later, so
   these rules are scoped under .lmap to win. ---- */
.lmap{height:min(62vh,560px);min-height:340px;border:1px solid var(--ink);background:#fff;
  position:relative;z-index:0}
.lmap .mapnote{padding:22px}
.lmap.on .mapnote{display:none}
.lmap.grey .leaflet-tile-pane{filter:grayscale(1) contrast(.92) brightness(1.04)}
.lmap .lpin span{display:inline-block;position:relative;transform:translate(-50%,-100%);margin-top:-6px;
  background:#000;color:#fff;font:600 12px/1 var(--sans);padding:6px 8px;white-space:nowrap;
  border:1px solid #fff;letter-spacing:.02em}
.lmap .lpin span::after{content:"";position:absolute;left:50%;bottom:-6px;margin-left:-5px;
  border:5px solid transparent;border-top-color:#000;border-bottom:0}
.lmap .lpin.dot span{transform:none;margin:7px;width:14px;height:14px;padding:0;border-radius:50%;
  border:2px solid #fff;box-shadow:0 0 0 1px #000}
.lmap .lpin.dot span::after{display:none}
.lmap .lpin:hover span{background:#fff;color:#000;border-color:#000}
.lmap .lpin:hover span::after{border-top-color:#000}
.lmap .lpin:focus{outline:none}
.lmap .lpin:focus-visible span{outline:2px solid #000;outline-offset:2px}
.lmap.leaflet-container{font-family:var(--sans)}
.lmap .leaflet-popup-content-wrapper{border-radius:0;border:1px solid #000;box-shadow:none;padding:0}
.lmap .leaflet-popup-content{margin:12px;font-size:14px;line-height:1.45}
.lmap .leaflet-popup-tip{box-shadow:none;border:1px solid #000}
.lmap a.leaflet-popup-close-button{color:#000;width:28px;height:28px;font-size:20px}
.lmap .leaflet-control-zoom a{color:#000;border-radius:0}
.lmap .leaflet-bar{border-radius:0;border:1px solid #000}
.lmap .leaflet-control-attribution{font-size:10.5px}
.lmap .leaflet-control-attribution a{color:#000}
.lmap a.mcard{display:flex;gap:12px;text-decoration:none;color:#000}
.lmap .mcard img{width:96px;height:72px;object-fit:cover;flex:0 0 auto;background:#f4f4f4}
.lmap .mcard .mc{display:flex;flex-direction:column;gap:2px;min-width:0;padding-right:14px}
.lmap .mcard b{font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.1}
.lmap .mcard .mv{margin-top:4px;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px}
.lmap .mattr{margin:10px 0 0;padding-top:8px;border-top:1px solid var(--rule);font-size:14px;color:#000;display:flex;gap:8px;align-items:center}
.lmap .mattr img{height:14px;width:auto}
@media(max-width:620px){.lmap .mcard img{width:72px;height:54px}}

/* ---- 2026-09-26 accessibility fixes ---- */
/* Focus lands here after a save (tabindex=-1); no ring on the wrapper itself,
   idx.js moves focus on to the button, which has one. */
.lcw:focus,#save:focus,#results:focus{outline:none}
/* "Skip to results": out of the way until it has keyboard focus. */
.skipres{position:absolute;left:-9999px}
.skipres:focus{position:static;display:inline-block;margin-bottom:16px;background:#000;color:#fff;
  padding:10px 16px;text-decoration:none}
h2#results{font-weight:500}
.formerr ul{margin:10px 0 0 1.2em;padding:0}
.formerr li{margin:4px 0}
.admin .tscroll{margin-bottom:8px}

/* ---- admin: past clients (anniversaries and birthdays) ---- */
.cacts{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 30px}
.cviews{list-style:none;padding:0;margin:0 0 28px;display:flex;flex-wrap:wrap;gap:10px 28px;font-size:15px}
.cviews a{display:inline-block;padding:6px 0}
.cviews a[aria-current]{font-weight:600;text-decoration-thickness:2px}
.cfilters{display:flex;flex-wrap:wrap;gap:0 18px;align-items:end;margin:0 0 20px}
.cfilters .f{flex:1 1 260px;max-width:420px}
.cfilters .btn{margin-bottom:22px;cursor:pointer}
.cgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 22px}
fieldset.cbday{border:0;padding:0;margin:8px 0 10px}
fieldset.cbday legend{margin-bottom:10px}
.cstate{display:inline-block;min-width:2.2em}
.admin .linkbtn{padding:4px 0}
.rowerr{margin:0;padding-left:1.1em}
.admin form .btn{cursor:pointer}
@media(max-width:760px){
  .cgrid{grid-template-columns:1fr}
  .cacts .btn{flex:1 1 100%;text-align:center}
}