/* Inventory (/land/). Round 4 (Jon + Gunn, 2026-10-22): a search tool, not a brochure.
   Round 5 (Jon, 2026-10-23): a full-width header band, the filter bar under it, then the map on
   the left (sticky, full height) and the cards scrolling on the right, Zillow-style; a List / Map
   switch on phones. Filter bar (filters.js), map and switch (map.js), then the parcels already taken. */

/* Header band: navy, running on from the navy banner, everything centred. */
.land-hero{background:var(--navy,#161922);color:#fff}
.land-hero-inner{padding-top:36px;padding-bottom:40px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.land-hero h1{font-size:60px;color:#fff}
.land-hero p{font-size:18px;margin:0;max-width:640px;color:#C9CCD4}

/* Filter bar: centred under the band, and sticks to the top of the window while you scroll. */
.fbar{position:sticky;top:0;z-index:30;background:var(--linen);border-bottom:1px solid var(--hair);box-shadow:0 6px 16px -12px rgba(22,25,34,0.25)}
/* Edge to edge rather than .wrap width, so on a wide screen the pills and the selects make one row. */
.fbar-inner{max-width:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 24px;padding:14px 28px}
/* Round 7 (Jon): the uses are pick-one, but as five separate pills they read as pick-several. So
   they sit in ONE sunken track, like a phone's segmented switch, and the chosen one rises out of
   it as a dark pill. One shape, one choice. */
.fbar-uses{display:inline-flex;flex-wrap:nowrap;align-items:center;gap:2px;padding:4px;border-radius:999px;background:#E6E0D3;box-shadow:inset 0 1px 3px rgba(22,25,34,0.16),inset 0 0 0 1px rgba(22,25,34,0.06)}
.fpill{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 16px 0 18px;border:none;border-radius:999px;background:transparent;color:var(--ink);font-family:var(--sans);font-size:14px;font-weight:500;white-space:nowrap;cursor:pointer;transition:background-color .15s ease,color .15s ease,box-shadow .15s ease}
.fpill:hover{background:rgba(255,255,255,0.6)}
.fpill.on,.fpill[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:0 1px 2px rgba(22,25,34,0.25),0 4px 10px -2px rgba(22,25,34,0.35)}
.fpill.on:hover{background:var(--ink)}
/* The live count (filters.js). Empty without script, so it takes no room. */
.fpill-n{font-size:12px;font-weight:600;color:var(--stone);font-variant-numeric:tabular-nums}
.fpill-n:empty{display:none}
.fpill.on .fpill-n{color:#C9CCD4}
/* A choice that would show nothing: still there, so you can see it exists, but greyed out. */
.fpill.none,.fpill:disabled{background:transparent;color:#A39C8F;cursor:not-allowed}
.fpill.none .fpill-n{color:#A39C8F}
.fbar-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px}
.fsel{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 34px 0 16px;border:1px solid #CFC8BA;border-radius:999px;background:#fff;cursor:pointer}
.fsel:hover{border-color:var(--ink)}
.fsel::after{content:"";position:absolute;right:15px;top:50%;width:7px;height:7px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.fsel-k{font-size:11px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:#0F6F64}
.fsel select{appearance:none;-webkit-appearance:none;border:none;background:transparent;font-family:var(--sans);font-size:14px;font-weight:500;color:var(--ink);cursor:pointer;padding:0 34px 0 0;margin-right:-34px;min-height:40px}
.fsel select:focus-visible{outline:2px solid var(--teal);outline-offset:4px}
.fbar .price-toggle{align-self:center;border-color:#CFC8BA;background:#fff}

/* Results: map left, list right, edge to edge. --fbar-h is the filter bar's height (map.js). */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(400px,46%);align-items:start}
.split-map{position:sticky;top:var(--fbar-h,72px);height:calc(100vh - var(--fbar-h,72px));min-height:460px;background:#E8E4DA;border-right:1px solid var(--hair)}
.land-map{width:100%;height:100%}
.split-list{padding:20px 28px 96px;min-width:0}
.results-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:16px}
.results-count{margin:0;font-size:15px;font-weight:600}
.view-toggle{display:none}
.land-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:28px 24px}
.tile[hidden]{display:none}
.card.pin-hot{box-shadow:0 0 0 2px var(--ink),0 10px 28px rgba(22,25,34,0.16)}
/* Round 7: nothing matched. Sorry, the buyers list, then the same use elsewhere (filters.js). */
.land-empty{display:flex;flex-direction:column;gap:12px;margin:0 0 28px;padding:28px;background:#fff;border:1px solid var(--hair);border-radius:var(--radius,3px);font-size:15px}
.land-empty[hidden]{display:none}
.empty-h{margin:0;font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.2}
.land-empty p{margin:0}
.empty-signup{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.empty-signup .field{flex:1 1 220px;min-height:48px}
.empty-signup .btn{min-height:48px}
.empty-alt{padding-top:16px;margin-top:8px !important;border-top:1px solid var(--hair);font-weight:600;color:var(--ink)}
.empty-alt[hidden]{display:none}

/* Dots (map.js draws them as circle markers): the price on hover. Dots too close to point at
   become one round count in the dot colours; it goes navy while one of its cards is hovered. */
.land-map .dot-tip{padding:3px 8px;border:none;border-radius:999px;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,0.18),0 2px 8px rgba(0,0,0,0.18)}
.land-map .dot-tip::before{display:none}
.dot-count{background:none;border:none}
.dot-count span{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:28px;height:28px;border:2px solid #fff;border-radius:50%;background:#C34271;color:#fff;font-family:var(--sans);font-size:13px;font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,0.25);cursor:pointer;transition:transform .12s}
.dot-count.hot span{background:#161922;transform:scale(1.2)}
.pin-list{display:flex;flex-direction:column;max-height:320px;overflow-y:auto}
.pin-list .pin-pop+.pin-pop{border-top:1px solid #E2DDD3}
.land-map .leaflet-popup-content-wrapper{padding:0;border-radius:12px;overflow:hidden}
.land-map .leaflet-popup-content{margin:0;width:240px !important}
.pin-pop{display:flex;flex-direction:column;color:var(--ink) !important;text-decoration:none;font-family:var(--sans)}
.pin-pop img{width:100%;height:130px;object-fit:cover;display:block}
.pin-pop-body{display:flex;flex-direction:column;gap:3px;padding:10px 12px 12px}
.pin-pop-where{font-size:10px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:#0F6F64}
.pin-pop strong{font-family:var(--serif);font-weight:400;font-size:17px;line-height:1.2}
.pin-pop-price{font-size:13px;color:#4A4439}

/* Under contract and recently sold: real cards in the results, dimmed and flagged, linked to their page */
.card-gone{box-shadow:none}
.card-gone .card-media img{filter:grayscale(0.55);opacity:0.85}
.card-gone .card-body{opacity:0.8}
.card-flag{color:#fff !important}
.card-flag.spoken{background:#9A6B12 !important}
.card-flag.sold{background:var(--raspberry-dark,#A63659) !important}

/* Below 1024px: one column, list first; the List / Map switch swaps the cards for a tall map. */
@media (max-width:1023px){
  .split{display:flex;flex-direction:column;align-items:stretch}
  .split-list{display:contents}
  .results-head{order:1;padding:20px 40px 16px}
  .split-map{order:2;display:none;position:relative;top:auto;height:calc(100vh - 140px);min-height:360px;border-right:none;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
  .land-grid,.land-empty{order:3;margin-left:40px;margin-right:40px}
  .land-grid{margin-bottom:72px}
  body.map-open .split-map{display:block}
  body.map-open .land-grid,body.map-open .land-empty{display:none}
  .view-toggle{display:inline-flex;border:1px solid var(--ink);border-radius:999px;padding:3px;gap:2px;background:#fff}
  .view-toggle[hidden]{display:none}
  .view-toggle button{min-height:38px;padding:0 18px;border:none;border-radius:999px;background:transparent;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink);cursor:pointer}
  .view-toggle button[aria-pressed="true"]{background:var(--ink);color:#fff}
}
@media (max-width:900px){
  .land-hero-inner{padding-top:32px;padding-bottom:36px}
  .land-hero h1{font-size:46px}
  .land-hero p{font-size:16px}
  .fbar{position:static}
  /* The track keeps its rounded ends and scrolls inside them if the five don't fit. */
  .fbar-uses{display:flex;justify-content:flex-start;overflow-x:auto;max-width:100%;scrollbar-width:none}
  .fbar-uses::-webkit-scrollbar{display:none}
  .fpill{flex:none;min-height:42px}
  .fsel{min-height:44px}
  .view-toggle button{min-height:44px}
  .gone-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gone-head h2{font-size:32px}
}
/* base.css drops .wrap to a 20px gutter here; the edge-to-edge list follows it. */
@media (max-width:860px){
  .fbar-inner{padding-left:20px;padding-right:20px}
  .results-head{padding-left:20px;padding-right:20px}
  .land-grid,.land-empty{margin-left:20px;margin-right:20px}
}
@media (max-width:640px){
  .land-grid,.gone-grid{grid-template-columns:minmax(0,1fr)}
  /* State and sort side by side, the price switch under them; the selects say what they are. */
  .fbar-tools{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:100%;gap:8px}
  .fsel{min-width:0;padding-left:14px;padding-right:30px}
  .fsel-k{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  /* The key is hidden here, so the select can cover the whole pill and needs no script to open. */
  .fsel select{width:calc(100% + 44px);min-width:0;text-overflow:ellipsis;margin-left:-14px;padding-left:14px;margin-right:-30px;padding-right:30px}
  .fbar .price-toggle{grid-column:1/-1;justify-self:center}
}