/* browse-map.css — split from browse.css (lines 107-161), 2026-08-17.
   split view + Google map panel, map toggle, map pills
   LOAD ORDER IS LOAD-BEARING. Link in this exact sequence, after nothing and
   before the engine-*.css layer:
     browse-filterbar.css -> browse-datepicker.css -> browse-guests.css -> browse-map.css -> browse-cards.css -> browse-detail.css
   Slices are CONTIGUOUS: rule order is unchanged from browse.css, so the cascade is
   equivalent by construction. Some selectors are redefined in a later module on
   purpose — do not reorder, and do not "tidy" rules between files.
   browse.css itself is UNTOUCHED on disk and still serves the other 17 pages. */
.browse-map-panel { display:none; }
#gmap { width:100%; height:100%; background:var(--forest); }
.map-toggle { position:fixed; left:50%; transform:translateX(-50%); bottom:1.4rem; z-index:72; background:var(--gold); color:#0A2247; border:none; border-radius:999px; padding:0.7rem 1.6rem; font-family:var(--body); font-weight:600; font-size:0.9rem; letter-spacing:0.06em; box-shadow:0 8px 28px rgba(0,0,0,0.5); cursor:pointer; transition:transform 0.18s; }
.map-toggle:hover { transform:translateX(-50%) scale(1.06); }
@media(min-width:1025px) {
  .map-toggle { display:none; }
  .browse-split { display:grid; grid-template-columns:minmax(0,56%) minmax(0,44%); align-items:start; }
  .browse-map-panel { display:block; position:sticky; top:118px; height:calc(100vh - 118px); border-left:1px solid var(--gold-line); }
}
@media(max-width:1024px) {
  body.map-open .browse-map-panel { display:block; position:fixed; inset:0; z-index:70; height:100vh; height:100dvh; }
}
.map-pill { background:var(--gold); color:#0A2247; font-family:var(--body); font-weight:700; font-size:0.8rem; padding:0.28rem 0.65rem; border-radius:999px; border:2px solid #0A2247; box-shadow:0 3px 10px rgba(0,0,0,0.45); cursor:pointer; transition:transform 0.16s ease-out; will-change:transform; }
.map-pill.swell { transform:scale(1.3); }
.map-pill.bounce { animation:pillBounce 0.55s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes pillBounce { 0% { transform:scale(1); } 40% { transform:scale(1.28) translateY(-4px); } 100% { transform:scale(1); } }
.prop-card.map-hi { border-color:var(--gold); box-shadow:0 0 28px rgba(201,169,110,0.28), 0 22px 58px rgba(5,29,64,0.65); transform:translateY(-4px); }

/* ── MAP CONTROLS (Elec 2026-08-16: "lessen the size and opacity of the + and −
   zoom button… add a small re-center or home button directly above them", then
   "shrink the zoom in and out map buttons to be same size as the added home
   button. also to match its colors, rounded corners and navy gold stylings").
   Google's own zoom control is switched OFF in browse.js — its glyphs are
   images and its box carries inline styles, so it cannot be taken this far by
   overpainting. All three buttons are ours and share one rule, which is the
   point: they cannot drift apart. No inline copy of these selectors exists on
   either page, so browse.css governs both variants. */
.map-ctl-stack { display:flex; flex-direction:column; gap:5px; margin:0 10px 10px 0; }
.map-ctl-btn { -webkit-appearance:none; appearance:none; display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; padding:0; cursor:pointer;
  background:rgba(5,29,64,0.82); border:1px solid var(--gold-line); border-radius:var(--radius-sm);
  color:var(--gold); opacity:0.4; transition:opacity 0.3s var(--ease-out), border-color 0.3s, background 0.3s; }
.map-ctl-btn:hover { opacity:0.9; border-color:var(--gold); background:rgba(5,29,64,0.94); }
.map-ctl-btn:focus-visible { outline:2px solid var(--gold); outline-offset:2px; opacity:0.9; }
.map-ctl-btn svg { width:15px; height:15px; fill:currentColor; display:block; }

/* ── "STAY A NIGHT LONGER" strip (Elec 2026-08-16). Sits at the top of the list
   column when minimum stay — not bookings — is what is hiding homes. Reads as a
   quiet offer rather than an alert: navy ground, gold-line edge, the NUMBER in
   gold because that is the part worth reading, and a chevron because it acts.
   Full column width so it cannot be mistaken for a card. */
/* Elec 2026-08-23 rewrote this offer: a gold mini-header with a ghost
   underline, then a white ALL-CAPS sentence whose variables (the count, the
   date range, the night ordinal) come forward larger and gold. Column layout
   now - it is two stacked lines, not one row. */
.stay-longer { display:flex; flex-direction:column; align-items:flex-start; gap:0.3rem; width:100%;
  margin:0 0 0.7rem; padding:0.6rem 0.85rem; cursor:pointer; text-align:left;
  /* Elec 2026-08-23: "the open tonight in pagosa card should be more opaque
     too .. matching density of property cards." The cards sit on
     rgba(46,65,95,0.4); the strip was a bare 0.08 gold wash, so it read as a
     lighter object in the same column. It now takes the CARDS' navy density as
     its ground with the gold wash layered ON TOP - same weight as its
     neighbours, gold identity kept, and the palette rule that gold appears
     only as a wash (<=0.1 alpha) is not broken. */
  background-color:rgba(46,65,95,0.4);
  background-image:linear-gradient(rgba(201,169,110,0.08), rgba(201,169,110,0.08));
  border:1px solid var(--gold-line);
  border-radius:var(--radius-sm); font-family:var(--body); color:var(--sage);
  transition:background 0.2s var(--ease-out), border-color 0.2s; }
.stay-longer:hover { background:rgba(201,169,110,0.16); border-color:var(--gold); }
.stay-longer:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.stay-longer[hidden] { display:none; }
.stay-longer .sl-head { color:var(--gold); font-weight:600; font-size:0.78rem;
  letter-spacing:0.12em; text-transform:uppercase; white-space:nowrap;
  padding-bottom:0.28rem;
  /* the ghost underline: the line-work grammar - gold fading at both ends */
  background:linear-gradient(90deg, transparent, rgba(201,169,110,0.55), transparent)
    no-repeat bottom left / 100% 1px; }
.stay-longer .sl-body { font-size:0.7rem; line-height:1.45; color:var(--parchment);
  letter-spacing:0.07em; text-transform:uppercase; font-weight:600; }
.stay-longer .sl-body .sl-n { color:var(--gold); font-size:1.22em; font-weight:700;
  letter-spacing:0.02em; }
.stay-longer .sl-body .sl-range { white-space:nowrap; }
.stay-longer .sl-go { position:absolute; top:0.6rem; right:0.9rem; color:var(--gold);
  font-size:1.1rem; line-height:1; }
.stay-longer { position:relative; }

/* ── "TONIGHT IN PAGOSA" strip (Elec 2026-08-21, spots-filled priority). The
   no-dates sibling of .stay-longer: same quiet-offer family - navy ground,
   gold-line edge, small-caps gold label, count in parchment, the stay length
   in sage so the tap can never over-promise. Hidden the moment dates are set
   (body.dates-set), so it and .stay-longer can never co-show.
   (Also present in monolithic browse.css for the retired FULL variant - the
   split files are the ruled direction; keep the two in step if either moves.) */
.tonight-strip { display:block; width:100%;
  margin:0 0 0.7rem; padding:0.6rem 0.9rem 0.65rem; cursor:pointer; text-align:left;
  /* density matched to the property cards (Elec 2026-08-23) - see the same
     treatment on .stay-longer above; the two are one family and must weigh
     the same in the column. */
  background-color:rgba(46,65,95,0.4);
  background-image:linear-gradient(rgba(201,169,110,0.08), rgba(201,169,110,0.08));
  border:1px solid var(--gold-line);
  border-radius:var(--radius-sm); font-family:var(--body); color:var(--sage);
  transition:background 0.2s var(--ease-out), border-color 0.2s; }
.tonight-strip:hover { background-image:linear-gradient(rgba(201,169,110,0.16), rgba(201,169,110,0.16)); border-color:var(--gold); }
.tonight-strip:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.tonight-strip .tn-top { display:flex; align-items:center; margin-bottom:0.2rem; }
.tonight-strip .tn-label { font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); white-space:nowrap; font-weight:600; }
.tonight-strip .tn-go { margin-left:auto; color:var(--gold); font-size:1.1rem; line-height:1; }
.tonight-strip .tn-line { display:block; }
.tonight-strip .tn-count { font-size:0.85rem; font-weight:700; color:var(--parchment); }
.tonight-strip .tn-text { font-size:0.8rem; color:var(--sage); }
body.dates-set .tonight-strip { display:none; }

/* GRID */

/* THE EMPTY STATE (Elec 2026-08-23: make it "say something more beneficail").
   Heading in the serif voice, hint in body, and a human route out in gold. */
.no-results .nr-head { font-family:var(--display); font-size:1.15rem; color:var(--parchment);
  margin:0 0 0.35rem; }
.no-results .nr-hint { font-size:0.82rem; color:var(--sage); margin:0 0 0.5rem; line-height:1.5; }
.no-results .nr-call { font-size:0.78rem; color:var(--sage); margin:0; }
.no-results .nr-call a { color:var(--gold); text-decoration:none; font-weight:600;
  border-bottom:1px solid rgba(201,169,110,0.45); }
.no-results .nr-call a:hover { color:var(--parchment); border-bottom-color:var(--parchment); }