/* browse.css — shared styles for the property browse grid (browse.js).
 * Extracted from vacation-rentals.html so book.simplyhome.us's guest index and the
 * main-site browse share one look. Depends on shared.css design tokens.
 * (vacation-rentals.html still carries its own inline copy for now; dedupe later.) */

/* FILTER BAR */
.filter-bar { position:sticky; top:82px; z-index:50; background:rgba(5,29,64,0.97); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid transparent; border-image:linear-gradient(90deg, transparent, var(--gold), transparent) 1; padding:1.2rem 4vw; display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; }
.filter-label { font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--sage); white-space:nowrap; margin-right:0.25rem; }
.filter-btn { padding:0.5rem 1.05rem; border:1px solid var(--gold-line); background:transparent; color:var(--sage); font-size:0.78rem; font-weight:600; letter-spacing:0.09em; text-transform:uppercase; cursor:pointer; transition:all 0.18s; font-family:var(--body); white-space:nowrap; border-radius:999px; }
.filter-btn:hover, .filter-btn.active { border-color:var(--gold); color:var(--parchment); background:rgba(201,169,110,0.1); }
.filter-right { margin-left:auto; display:flex; align-items:center; gap:0.75rem; }
.filter-count { font-size:0.76rem; color:var(--sage); white-space:nowrap; }

/* FILTER BAR, DATE-SEARCH VARIANT (.filter-bar.has-dates) — the ONE grouped
   sticky bar from vacation-rentals.html (Elec's 2026-07-26 spec, ported for the
   guest booking home): labels row on top ("Stay dates" far left · "Amenities
   filter" above the All button · the count at the right end), controls row
   beneath (date box on the same line as the chips). Mobile stacks. */
.filter-bar.has-dates { display:grid; grid-template-columns:auto 1fr; column-gap:1.5rem; row-gap:0.55rem; align-items:center; padding:1rem 4vw 1.1rem; }
.fb-datelabel { grid-column:1; grid-row:1; }
.fb-labelrow { grid-column:2; grid-row:1; display:flex; align-items:baseline; justify-content:space-between; gap:0.75rem; }
.fb-datecell { grid-column:1; grid-row:2; display:flex; align-items:center; gap:0.6rem; }
.fb-chips { grid-column:2; grid-row:2; display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; }

/* ONE-DROPDOWN DATE-RANGE PICKER (dr-*) — flyout v2 (2026-07-30, Elec: "sleek and
   elegant… mini super modal calendar fly out"). Desktop: two-month spread anchored
   to the field, dimming veil behind. Mobile: centered modal. Range endpoints are
   gold circles, the span a soft band, today gets a dot, and hovering a checkout
   date previews the span (.pre, set by browse.js). Entrance animations are killed
   by shared.css's global prefers-reduced-motion block. */
.dr-wrap { position:relative; }
.date-field { min-width:220px; text-align:left; padding:0.55rem 0.9rem; background:var(--forest); border:1px solid var(--gold-line); border-radius:var(--radius-sm); color:var(--sage); font-family:var(--body); font-size:0.85rem; cursor:pointer; transition:border-color 0.18s, color 0.18s, box-shadow 0.18s; }
.date-field:hover, .date-field[aria-expanded="true"] { border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,169,110,0.12); }
.date-field.has-dates { color:var(--parchment); }
.dr-veil { position:fixed; inset:0; z-index:58; background:rgba(5,29,64,0.45); -webkit-backdrop-filter:blur(2.5px); backdrop-filter:blur(2.5px); animation:drFade 0.25s ease; }
.dr-pop { position:absolute; top:calc(100% + 10px); left:0; z-index:60; background:linear-gradient(165deg, #0A2247 0%, var(--forest) 55%); border:1px solid var(--gold-border); border-radius:16px; padding:1.15rem 1.3rem 0.9rem; box-shadow:0 1px 0 rgba(201,169,110,0.18) inset, 0 18px 55px rgba(0,0,0,0.6), 0 4px 14px rgba(0,0,0,0.4); animation:drIn 0.42s cubic-bezier(0.34,1.56,0.64,1); }
/* Back-out curve overshoots then settles — the "bounce / breathe" Elec asked for
   (review round 1, 2026-07-30). */
@keyframes drIn { from { opacity:0; transform:translateY(-12px) scale(0.94); } to { opacity:1; transform:none; } }
@keyframes drFade { from { opacity:0; } to { opacity:1; } }
.dr-cols { display:flex; gap:1.6rem; }
.dr-cal { width:238px; }
.dr-month { font-family:var(--display); font-style:italic; font-size:1.05rem; letter-spacing:0.03em; color:var(--parchment); text-align:center; margin-bottom:0.6rem; }
.dr-arrow { position:absolute; top:1.05rem; background:none; border:1px solid var(--gold-line); border-radius:50%; width:1.8rem; height:1.8rem; color:var(--sage); font-size:1.05rem; line-height:1; cursor:pointer; transition:all 0.18s; z-index:2; }
.dr-prev { left:1.1rem; }
.dr-next { right:1.1rem; }
.dr-arrow:hover:not(:disabled) { border-color:var(--gold); color:var(--gold); transform:scale(1.08); }
.dr-arrow:disabled { opacity:0.3; cursor:default; }
.dr-dow { display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:0.58rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); opacity:0.75; margin-bottom:0.3rem; }
.dr-grid { display:grid; grid-template-columns:repeat(7,1fr); }
.dr-cell { position:relative; aspect-ratio:1; border:none; background:transparent; color:var(--parchment); font-family:var(--body); font-size:0.78rem; cursor:pointer; transition:background 0.13s, color 0.13s, transform 0.24s cubic-bezier(0.34,1.56,0.64,1); border-radius:50%; }
/* Press a date: quick soft deflate; release: the springy transition above
   reinflates with a slight overshoot — breath out / breath in (review round 2). */
.dr-cell:active:not(:disabled) { transform:scale(0.88); transition-duration:0.08s; transition-timing-function:ease; }
.dr-cell:hover:not(:disabled):not(.sel) { background:rgba(201,169,110,0.16); }
.dr-cell:disabled { color:rgba(146,154,160,0.3); cursor:default; }
/* Endpoints: translucent gold circle (Elec: "more see through"), drawn as a
   radial gradient so the range band can pass UNDERNEATH on the inner half —
   no hard band ends butting against the circles (review round 1). */
.dr-cell.sel { background:rgba(201,169,110,0.72); color:var(--forest); font-weight:700; }
.dr-cell.sel-start { border-radius:0; background:radial-gradient(circle closest-side, rgba(201,169,110,0.72) 0 99%, transparent 100%), linear-gradient(90deg, transparent 50%, rgba(201,169,110,0.13) 50%); }
.dr-cell.sel-end { border-radius:0; background:radial-gradient(circle closest-side, rgba(201,169,110,0.72) 0 99%, transparent 100%), linear-gradient(90deg, rgba(201,169,110,0.13) 50%, transparent 50%); }
.dr-cell.mid, .dr-cell.pre { background:rgba(201,169,110,0.13); border-radius:0; }
.dr-cell.pre { background:rgba(201,169,110,0.08); }
.dr-cell.tdy::after { content:""; position:absolute; left:50%; bottom:4px; width:3px; height:3px; margin-left:-1.5px; border-radius:50%; background:var(--gold); }
.dr-cell.sel.tdy::after { background:var(--forest); }
.dr-hint { margin-top:0.65rem; padding-top:0.55rem; border-top:1px solid rgba(201,169,110,0.18); font-size:0.68rem; letter-spacing:0.06em; color:var(--sage); text-align:center; min-height:1em; }
.date-clear { background:none; border:none; color:var(--gold); font-size:0.76rem; cursor:pointer; font-family:var(--body); text-decoration:underline; white-space:nowrap; }
.date-msg { font-size:0.76rem; color:var(--sage); }
.date-msg.err { color:#e8b9ad; }
@media (max-width:700px){
  .date-field { min-width:170px; font-size:16px; }
  .dr-pop { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:min(330px, 94vw); animation:drInM 0.42s cubic-bezier(0.34,1.56,0.64,1); }
  @keyframes drInM { from { opacity:0; transform:translate(-50%,-44%) scale(0.92); } to { opacity:1; transform:translate(-50%,-50%); } }
  .dr-cols { display:block; }
  .dr-cal { width:100%; }
}

/* GUESTS + PETS control (search-redesign P-C, 2026-08-13) — same visual grammar
   as the date field/popover: forest ground, gold-line borders, the drIn
   bounce-in. Lives inside .fb-datecell beside .dr-wrap. */
.gp-wrap { position:relative; }
.gp-field { min-width:120px; }
.gp-field.has-value { color:var(--parchment); }
.gp-pop { position:absolute; top:calc(100% + 10px); left:0; z-index:60; min-width:238px; background:linear-gradient(165deg, #0A2247 0%, var(--forest) 55%); border:1px solid var(--gold-border); border-radius:16px; padding:1rem 1.15rem; box-shadow:0 1px 0 rgba(201,169,110,0.18) inset, 0 18px 55px rgba(0,0,0,0.6), 0 4px 14px rgba(0,0,0,0.4); animation:drIn 0.42s cubic-bezier(0.34,1.56,0.64,1); }
.gp-row { display:flex; align-items:center; justify-content:space-between; gap:1.2rem; padding:0.35rem 0; }
.gp-petrow { cursor:pointer; }
.gp-name { color:var(--sage); font-size:0.88rem; }
.gp-step { display:flex; align-items:center; gap:0.65rem; }
.gp-step button { background:none; border:1px solid var(--gold-line); border-radius:50%; width:1.8rem; height:1.8rem; color:var(--sage); font-size:1.05rem; line-height:1; cursor:pointer; transition:all 0.18s; }
.gp-step button:hover:not(:disabled) { border-color:var(--gold); color:var(--gold); transform:scale(1.08); }
.gp-step button:disabled { opacity:0.3; cursor:default; }
#gpVal { min-width:2.2rem; text-align:center; color:var(--parchment); font-size:0.9rem; }
#gpPet { accent-color:var(--gold); width:1.05rem; height:1.05rem; cursor:pointer; }
@media (max-width:768px) {
  .gp-pop { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:min(300px, 92vw); animation:drInM 0.42s cubic-bezier(0.34,1.56,0.64,1); }
}

/* STAGED CARD PRICING (P-B): teaser -> per-stay -> fee-included pre-tax total. */
.card-price { display:block; color:var(--sage); font-size:0.82rem; letter-spacing:0.01em; margin-right:auto; }
.card-price strong { color:var(--gold); font-size:1.02rem; font-weight:600; }

/* ── SPLIT VIEW + MAP (rebuild P-E/P-D, 2026-08-14) — mirror of the inline
   block in vacation-rentals.html, which WINS there by load order (lockstep
   rule). book-home has no inline copy so these rules govern it if a map is
   ever added there; today only /vacation-rentals carries #gmap markup. */
.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. */
.stay-longer { display:flex; align-items:center; gap:0.5rem; width:100%;
  margin:0 0 0.7rem; padding:0.6rem 0.85rem; cursor:pointer; text-align:left;
  background: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-count { color:var(--gold); font-weight:700; font-size:0.82rem; letter-spacing:0.02em; white-space:nowrap; }
.stay-longer .sl-text { font-size:0.82rem; color:var(--parchment); }
.stay-longer .sl-go { margin-left:auto; color:var(--gold); font-size:1.1rem; line-height:1; }

/* ── "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. */
.tonight-strip { display:block; width:100%;
  margin:0 0 0.7rem; padding:0.6rem 0.9rem 0.65rem; cursor:pointer; text-align:left;
  background: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: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 */
.browse-section { padding:4.5rem 4vw 3.5rem; }
.browse-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2.9rem; }

/* CARD (an <a> link to the property's /stay page) */
.prop-card { background:var(--pine); cursor:pointer; border:2px solid var(--gold-border); border-radius:var(--radius); overflow:hidden; position:relative; z-index:1; transition:transform 0.5s var(--ease-out), border-color 0.35s, box-shadow 0.5s var(--ease-out), filter 0.35s, opacity 0.35s; display:flex; flex-direction:column; text-decoration:none; color:inherit; }
/* grow REMOVED 2026-08-19 (Elec: cards grew past the screen edge on hover; "loose the grow.. leave the glow and brighten") */ .prop-card:hover { border-color:var(--gold); z-index:3; box-shadow: 0 0 28px rgba(201,169,110,0.18), 0 22px 58px rgba(5,29,64,0.65); }
.prop-card:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.prop-card.hidden { display:none; }
.card-img { aspect-ratio:16/10; overflow:hidden; position:relative; background:var(--mist); flex-shrink:0; }
.card-img img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(0.96) brightness(0.96); transition:filter 1.1s var(--ease-out); }
.prop-card:hover .card-img img { filter:saturate(1.06) brightness(1.07) contrast(1.03); }
.card-badges { position:absolute; top:0.6rem; left:0.6rem; display:flex; gap:0.3rem; flex-wrap:wrap; z-index:2; }
.card-badge { background:rgba(5,29,64,0.88); border:1px solid var(--gold-line); padding:0.24rem 0.6rem; font-size: 0.75rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); border-radius:var(--radius-sm); }
.card-body { padding:1.5rem 1.65rem 1.75rem; flex:1; display:flex; flex-direction:column; }
.card-location-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.4rem; }
.card-location { font-size:0.8rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); margin-bottom:0; }
.card-rating { display:flex; align-items:center; gap:0.2rem; font-size:0.78rem; color:var(--parchment); font-weight:600; white-space:nowrap; }
.card-star { color:var(--gold); font-size:0.82rem; }
.card-review-count { color:var(--sage); font-weight:400; font-size: 0.75rem; margin-left:0.1rem; }
.card-desc { font-size:0.8rem; color:var(--sage); line-height:1.5; margin:0.4rem 0 0.7rem; display:-webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient:vertical; overflow:hidden; }
.card-name { font-family:var(--display); font-size:1.44rem; font-weight:600; color:var(--parchment); line-height:1.2; margin-bottom:0.6rem; }
.card-meta { display:flex; gap:0.75rem; font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--sage); margin-bottom:0.65rem; flex-wrap:wrap; }
.card-meta strong { color:var(--parchment); }
.card-footer { display:flex; align-items:center; justify-content:space-between; padding-top:0.75rem; border-top:1px solid transparent; border-image:linear-gradient(90deg, transparent, var(--gold), transparent) 1; margin-top:auto; }
.card-book { font-size:0.77rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold); transition:letter-spacing 0.2s; }
/* hover letter-spacing REMOVED 2026-08-19 (Elec: the size effect on View & Book "causes things to break and move around" - widening text reflows the flex footer). No substitute effect without his pick. */

/* PAGINATION */
.pagination { display:flex; align-items:center; justify-content:center; gap:0.5rem; padding:2.5rem 4vw 4rem; }
.page-btn { width:44px; height:44px; border:1px solid var(--gold-line); background:transparent; color:var(--sage); font-size:0.82rem; cursor:pointer; transition:all 0.18s; font-family:var(--body); display:flex; align-items:center; justify-content:center; border-radius:var(--radius-sm); }
.page-btn:hover, .page-btn.active { border-color:var(--gold); color:var(--parchment); background:rgba(201,169,110,0.1); }
.page-btn:disabled { opacity:0.3; cursor:default; }
.page-arrow { font-size:1rem; }

/* NO RESULTS */
.no-results { display:none; text-align:center; padding:5rem 2rem; }
.no-results.visible { display:block; }
.no-results p { font-family:var(--display); font-style:italic; font-size:1.4rem; color:var(--sage); }

/* LOADING */
.loading-state { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:6rem 2rem; gap:1.5rem; grid-column:1/-1; }
.loading-spinner { width:36px; height:36px; border:2px solid var(--gold-line); border-top-color:var(--gold); border-radius:50%; animation:spin 0.8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.loading-text { font-family:var(--display); font-style:italic; font-size:1rem; color:var(--sage); }

/* RESPONSIVE */
@media(max-width:1024px) { .browse-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:768px) {
  .browse-grid { grid-template-columns:1fr; }
  .filter-bar { padding:0.85rem 4vw; gap:0.4rem; }
  .filter-btn { font-size:0.68rem; padding:0.32rem 0.65rem; }
  /* Date-search variant stacks to a single column on mobile (same as the
     vacation-rentals original): label, date box, chip label+count, chips. */
  .filter-bar.has-dates { row-gap:0.45rem; column-gap:0; grid-template-columns:1fr; }
  .filter-bar.has-dates .fb-datelabel { grid-column:1; grid-row:1; }
  .filter-bar.has-dates .fb-datecell { grid-column:1; grid-row:2; }
  .filter-bar.has-dates .fb-labelrow { grid-column:1; grid-row:3; }
  .filter-bar.has-dates .fb-chips { grid-column:1; grid-row:4; gap:0.4rem; }
}

/* ── ROUND 4 mirror (2026-08-15): appended AFTER the earlier map/split rules so
   these WIN by cascade (the earlier .map-pill pill-shape block above is
   superseded here, kept for history). vacation-rentals.html's inline copy wins
   on that page; this keeps book-home / future adopters in step. ── */
.map-pill { position:relative; border-radius:9px 9px 9px 2px; transform:rotate(-4deg); transition:transform 0.22s cubic-bezier(0.34,1.56,0.64,1); }
.map-pill::after { content:""; position:absolute; left:2px; bottom:-7px; width:0; height:0; border-style:solid; border-width:8px 7px 0 0; border-color:#0A2247 transparent transparent transparent; }
/* group 1 (Elec 2026-08-15): hovering a property card makes its pin "pulse
   and glow a little" — gold halo breathing on top of the tilt-swell. */
.map-pill.swell { transform:rotate(-11deg) scale(1.32); animation:pillGlow 1.5s ease-in-out infinite; }
@keyframes pillGlow {
  0%, 100% { box-shadow:0 3px 10px rgba(0,0,0,0.45), 0 0 0 3px rgba(200,171,123,0.35), 0 0 14px 3px rgba(200,171,123,0.4); }
  50%      { box-shadow:0 3px 10px rgba(0,0,0,0.45), 0 0 0 5px rgba(200,171,123,0.5),  0 0 24px 7px rgba(200,171,123,0.62); }
}
.map-pill.bounce { animation:tagTilt 0.6s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes tagTilt { 0% { transform:rotate(-4deg) scale(1); } 30% { transform:rotate(-14deg) scale(1.26) translateY(-3px); } 65% { transform:rotate(3deg) scale(1.12); } 100% { transform:rotate(-4deg) scale(1); } }
.browse-detail { display:none; }
@media(min-width:1280px) {
  .browse-split { grid-template-columns:minmax(300px,25%) minmax(0,37%) minmax(0,38%); }
  /* SCOPED 2026-08-29. This rule was unscoped and therefore hit EVERY page that
     loads browse.css at >=1280 - including the apex /vacation-rentals, which has
     no split layout. There it turned the 29-card grid into a 785px internal
     scroll pane whose cards painted over the editorial copy below. It shipped to
     production with the 2026-08-28 cutover (the pre-cutover browse.css had no
     such rule) and was found by LOOKING at the live page on 2026-08-29.
     The three-column pane it was written for only ever exists inside
     .browse-split, so that is where it now lives. The engine does not load this
     file at all - it uses browse-detail.css, which carries its own copy. */
  .browse-split .browse-section { position:sticky; top:118px; height:calc(100vh - 118px); overflow-y:auto; overscroll-behavior:contain; }
  .browse-detail { display:block; position:sticky; top:118px; height:calc(100vh - 118px); overflow-y:auto; overscroll-behavior:contain; padding:1.4rem 1.4rem 2rem; border-left:1px solid var(--gold-line); }
  .browse-grid { grid-template-columns:1fr; gap:1.1rem; }
}
.bd-modal { background:#232B36; border:2px solid var(--gold-border); border-radius:var(--radius); overflow:hidden; }
.date-field { border-color:var(--gold); color:var(--parchment); }
.date-field:not(.has-dates) { animation:datePulse 2.8s ease-in-out infinite; }
.date-field.has-dates { animation:none; border-color:var(--gold-line); }
@keyframes datePulse { 0%,100% { box-shadow:0 0 0 0 rgba(201,169,110,0); } 50% { box-shadow:0 0 0 7px rgba(201,169,110,0.13); } }

/* ── GROUP 2 (Elec 2026-08-15, book-sub rebuild): pin transparency + breathing,
   date-line + pop-open calendar overlay. Appended AFTER everything above so
   these rules WIN by cascade (the earlier .swell hover rules are superseded —
   the JS now applies .breathe, never .swell). ── */

/* Pins rest "fairly transparent"; any breathing state is enlarged, opaque,
   with a steady slow pulse of breath (scale + gold halo oscillation). */
.map-pill { opacity:0.55; transition:transform 0.22s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s ease; }
.map-pill.breathe { opacity:1; animation:pillBreathe 2.6s ease-in-out infinite; }
@keyframes pillBreathe {
  0%, 100% { transform:rotate(-7deg) scale(1.14);
    box-shadow:0 3px 10px rgba(0,0,0,0.45), 0 0 0 3px rgba(200,171,123,0.3), 0 0 12px 3px rgba(200,171,123,0.35); }
  50%      { transform:rotate(-9deg) scale(1.26);
    box-shadow:0 3px 10px rgba(0,0,0,0.45), 0 0 0 5px rgba(200,171,123,0.5), 0 0 24px 8px rgba(200,171,123,0.6); }
}

/* Date LINE (calOverlay mode): the collapsed resting state of the calendar. */
.bk-dateline { display:flex; justify-content:space-between; align-items:center; gap:0.8rem; width:100%;
  padding:0.7rem 1rem; background:var(--forest); border:1px solid var(--gold); border-radius:var(--radius-sm);
  color:var(--parchment); font-family:var(--body); font-size:0.95rem; cursor:pointer; margin:0 0 0.7rem;
  transition:background 0.18s, box-shadow 0.18s; }
.bk-dateline:hover { background:rgba(201,169,110,0.08); box-shadow:0 0 0 3px rgba(201,169,110,0.12); }
.bk-dateline .bk-dl-dates { font-weight:600; }
.bk-dateline .bk-dl-dates.empty { color:var(--sage); font-weight:400; }
.bk-dateline .bk-dl-edit { font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); white-space:nowrap; }

/* Pop-open calendar: overlays what's beneath until a full range is chosen.
   Positioning context = the panel (.browse-detail is position:relative on the
   rebuild page). */
.bk-calwrap { display:none; }
.bk-calwrap.open { display:block; position:absolute; left:0.6rem; right:0.6rem; top:0.5rem; z-index:30;
  background:#232B36; border:2px solid var(--gold-border); border-radius:var(--radius);
  padding:1rem 1rem 1.1rem; box-shadow:0 22px 70px rgba(0,0,0,0.7); }

/* Pin decluttering (2026-08-15): overlap-hidden pins. A breathing pin (hover
   from list, or selected) always re-surfaces itself. */
.map-pill.pill-hidden { visibility:hidden; pointer-events:none; }
.map-pill.breathe { visibility:visible; pointer-events:auto; }

/* Details-tab extras (2026-08-15): thumbnail gallery + guest reviews. */
.bd-thumbs { display:flex; gap:0.4rem; flex-wrap:wrap; margin:0.5rem 0 0.6rem; }
.bd-thumb { width:62px; height:46px; padding:0; border:2px solid var(--gold-line); border-radius:6px; overflow:hidden; cursor:pointer; background:var(--forest); transition:border-color 0.16s, transform 0.16s; }
.bd-thumb:hover { border-color:var(--gold); transform:scale(1.06); }
.bd-thumb.on { border-color:var(--gold); }
.bd-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.bd-rev-h { font-family:var(--display); font-size:1.15rem; font-weight:600; color:var(--parchment); margin:1rem 0 0.5rem; }
.bd-rev { border-top:1px solid rgba(201,169,110,0.14); padding:0.6rem 0 0.2rem; }
.bd-rev-stars { font-size:0.8rem; }
.bd-rev-text { font-size:0.84rem; color:rgba(245,240,232,0.85); line-height:1.55; margin:0.25rem 0 0.3rem; }
.bd-rev-by { font-size:0.74rem; color:var(--sage); margin:0 0 0.3rem; }
.bd-rev-via { opacity:0.75; }

/* Book-pane trust band (2026-08-15): legit/backed/safe + mini contact. */
.bk-trust { margin-top:0.75rem; border-top:1px solid rgba(201,169,110,0.14); padding-top:0.55rem; }
.bk-t-line { font-size:0.78rem; color:#CDD4DA; margin:0 0 0.32rem; line-height:1.45; }
.bk-t-check { color:var(--gold); margin-right:0.25rem; }
.bk-trust-mini { display:none; font-size:0.73rem; color:#CDD4DA; margin:0 0 0.25rem; line-height:1.4; }
.bk-t-co { font-size:0.7rem; color:#B6BEC5; margin:0.35rem 0 0; letter-spacing:0.04em; }
.bk-t-co a { color:var(--gold); text-decoration:none; }
.modal-body:has(#bkQuote:not(:empty)) .bk-trust-full { display:none; }
.modal-body:has(#bkQuote:not(:empty)) .bk-trust-mini { display:block; }

/* Pin tooltip (2026-08-16) — replaces the browser's native `title` box, which
   renders black-on-white and cannot be styled. Navy ground, gold text, gold
   border; shown only on PIN hover (selection holds .breathe indefinitely, so
   it can't drive this). */
.map-pill .pill-tip {
  position:absolute; bottom:calc(100% + 9px); left:50%;
  transform:translateX(-50%) translateY(4px);   /* no counter-rotate: inherit the tag's tilt (Elec 2026-08-16) */
  background:rgba(5,29,64,0.97); color:var(--gold);
  border:1px solid var(--gold); border-radius:var(--radius-sm);
  padding:0.3rem 0.62rem; font-family:var(--body); font-size:0.72rem; font-weight:600;
  letter-spacing:0.02em; white-space:nowrap; text-transform:none;
  opacity:0; pointer-events:none; z-index:6;
  transition:opacity 0.16s ease, transform 0.16s ease;
}
.map-pill.tip-on .pill-tip { opacity:0.72; transform:translateX(-50%) translateY(0); }  /* Elec 2026-08-16: softer on hover */

/* PIN SHAPE (Elec 2026-08-16): rounded pill, NO tail, tilt kept — with a
   speech-bubble trail of two much smaller dots descending from the bottom
   corner. They overlap the pill and each other and paint above it (they are
   the pill's own pseudo-elements, so they inherit its tilt). */
.map-pill { border-radius:999px; padding:0.3rem 0.7rem; }
.map-pill::after {
  content:""; position:absolute; left:7px; bottom:-7px;
  width:10px; height:10px; box-sizing:border-box;
  border-radius:50%; border:2px solid #0A2247;
  background:var(--gold); z-index:3;
}
.map-pill::before {
  /* Elec 2026-08-16: trail pulled in closer to the tag. */
  content:""; position:absolute; left:4px; bottom:-13px;
  width:6px; height:6px; box-sizing:border-box;
  border-radius:50%; border:2px solid #0A2247;
  background:var(--gold); z-index:2;
}

/* Elec 2026-08-19: while one card brightens, its neighbours step back a touch */
#propGrid:has(.prop-card:hover) .prop-card:not(:hover){ filter:brightness(0.86) saturate(0.96); }