/* ============================================================================
 * engine-base.css - filter bar, results grid, property cards
 * ---------------------------------------------------------------------------
 * The engine's base look at every width: the sticky filter bar, the results grid,
 * the property card and its parts. This was the first inline <style> block.
 *
 * LOAD ORDER: 3 of 5. After tokens + motion, before layout.
 *
 * ORDER IS LOAD-BEARING. Ten selectors here are redefined in engine-layout /
 * engine-surface (.filter-bar, .browse-grid, .browse-detail, .browse-section,
 * .date-field, .filter-btn among them) and the LATER file is meant to win.
 * Do not reorder these <link>s, and do not regroup rules across files until those
 * duplicates are consolidated - that consolidation is the prerequisite for true
 * topic-based modules, and is deliberately a separate pass.
 * ==========================================================================*/


    /* browse.css (above) provides the shared filter-bar/card/date-widget rules;
       this inline block keeps the page-specific tuning and wins where they
       overlap because it loads second. Date-first search restored 2026-08-05. */

    /* ★★ BRAND-NAVY GROUND — Elec 2026-08-16: "map is more on brand than the rest. lets
       make entire rebuild closer to brand."  THE MAP IS THE REFERENCE, not the outlier:
       its cloud style is painted in the LOGO navy (land #0b2545 over water #051d40) while
       every other surface used the shipped v4 charcoal --forest #0D1119. That is why the
       map read as a slab set into a different page — the two were never the same family.
       ⚑ SCOPED TO THIS PAGE ON PURPOSE. These tokens live in shared.css, which every page
       of the site loads; editing them there would repaint the main site, and the standing
       scope is the BOOK SUBDOMAIN only ("nothing will land or change on main site"). This
       :root block overrides them for the engine alone, and shared.css is untouched.
       ⚠ The ground was ALSO hardcoded as rgba(13,17,25,…) in 15 rules and #131926 in 4 —
       tokens alone would have moved almost nothing. Those literals were swapped with it, so
       the ground is consistent rather than half-converted.
       Values, derived from the map rather than picked: ground #0A1E3A sits between the logo
       navy #051D40 and the map's land #0b2545 — same family, a shade deeper, so the map
       still lifts slightly off the page instead of dissolving into it. */
    :root {
      --forest: #04142E;                  /* was #0D1119 charcoal, then #0A1E3A — Elec: darker, and it
                                             has to READ navy. Red drops 10→4 and blue holds, so the
                                             hue is unmistakable while the whole thing sits deeper. */
      --slate:  #2E415F;                  /* was #364253 — navy-shifted card wash */
      --pine:   rgba(46,65,95,0.40);      /* was rgba(54,66,83,0.40), tracks --slate */
    }
    .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-count { font-size:0.76rem; color:var(--sage); white-space:nowrap; }

    /* GRID */
    .browse-section { padding:4.5rem 4vw 3.5rem; }
    .browse-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2.9rem; }

    /* CARD — each card is now an <a> straight to the property's page on the
       booking site (browse.js), so the anchor needs the text-decoration/color
       resets the old div cards never did. Visuals unchanged. */
    .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; }
    .prop-card:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
    /* 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.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(54,66,83,0.55); border:2px solid var(--gold); padding:0.24rem 0.6rem; font-size: 0.75rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--parchment); border-radius:var(--radius-sm); transition:background 0.18s; }
    .card-badge:hover { background:#364253; }
    .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; }
    
    .loading-text { font-family:var(--display); font-style:italic; font-size:1rem; color:var(--sage); }

    @media(max-width:1024.98px) { .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; }
    }

    /* ── SPLIT VIEW + MAP (rebuild P-E/P-D, 2026-08-14). This inline block WINS
       over browse.css by load order — browse.css carries the same rules for
       book-home parity; edit BOTH (documented lockstep rule). ── */
    .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); }
    /* CALENDAR PROMINENCE (Elec round 4): the date field is the loudest control
       — larger type, gold border, and a slow breathing glow until dates are
       chosen; settles once .has-dates. */
    .date-field { min-width:265px; font-size:0.95rem; padding:0.7rem 1.1rem; border-color:var(--gold); color:var(--parchment); }
    .date-field:not(.has-dates) { animation:datePulse 2.6s ease-in-out infinite; }
    .date-field.has-dates { animation:none; border-color:var(--gold-line); color:var(--parchment); }
    
    .gp-field { min-width:120px; font-size:0.85rem; }
    .browse-detail { display:none; }
    @media(min-width:1025px) and (max-width:1279.98px) {
      .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); }
      .browse-section { padding:2rem 1.6vw 3rem 3vw; }
      .browse-grid { grid-template-columns:repeat(2,1fr); gap:1.5rem; }
    }
    /* ── THREE-PANE ≥1280px (Elec round 4): LIST column left (single column,
       own scroll) · DETAIL center (last-selected property, prices tracking the
       search variables) · MAP right. ── */
    @media(min-width:1280px) {
      .map-toggle { display:none; }
      .browse-split { display:grid; grid-template-columns:minmax(300px,25%) minmax(0,37%) minmax(0,38%); align-items:start; }
      .browse-section { position:sticky; top:118px; height:calc(100vh - 118px); overflow-y:auto; overscroll-behavior:contain; padding:1.2rem 0.9rem 2rem 1.4vw; scrollbar-width:thin; scrollbar-color:var(--gold-line) transparent; }
      .browse-grid { grid-template-columns:1fr; gap:1.1rem; }
      .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); scrollbar-width:thin; scrollbar-color:var(--gold-line) transparent; }
      .browse-map-panel { display:block; position:sticky; top:118px; height:calc(100vh - 118px); border-left:1px solid var(--gold-line); }
      .prop-card.selected { border-color:var(--gold); box-shadow:0 0 22px rgba(201,169,110,0.22); }
    }
    @media(max-width:1024.98px) {
      body.map-open .browse-map-panel { display:block; position:fixed; inset:0; z-index:70; height:100vh; height:100dvh; }
      body.map-open .map-toggle { bottom:max(1.4rem, env(safe-area-inset-bottom)); }
    }
    /* Detail panel — round-4 refinement: the ORIGINAL property modal's chrome,
       inline (classes lifted from the pre-Phase-2 modal, 07-26 backup). */
    .bd-modal { background:#232B36; border:2px solid var(--gold-border); border-radius:var(--radius); overflow:hidden; }
    /* Elec 2026-08-16: "switch gradient bar in book pane header with solid bar
       and header font to have more emphasis and strength." The fading
       transparent→gold→transparent rule becomes a solid gold one, matching the
       bar under the page header.
       ⚠ LONGHANDS deliberately, and border-image explicitly cleared: the
       shorthand `border-bottom:1px solid var(--gold)` becomes a
       pending-substitution value in Chrome and has already silently outranked a
       later rule on this page once — see the note on .filter-bar. */
    /* Elec 2026-08-16: "reduce it to 1px". 2px → 1px. ⚠ This value is COUPLED to two
       others further down and all three must move together: the tab's `margin-bottom:-2px`
       / `padding-bottom:calc(... + 2px)` seats the tab exactly ON this bar, and
       `.mt-outline`'s `stroke-width:2` is the same line continuing round the tab tops —
       which is the connection he pointed out. Change one alone and the tab either floats
       above the bar or overlaps it. */
    .modal-header { display:flex; align-items:center; justify-content:space-between; gap:0.8rem; padding:1.1rem 1.4rem; border-image:none; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#C9A96E; background:#232B36; }
    /* Elec 2026-08-16: "book modal header text should switch to all cap match
       from header earlier. only slightly larger to fill the space as needed."
       So it takes the page header's grammar — Inter, uppercase, spaced, 600 —
       rather than the display serif, and sits a step above those labels
       (0.72rem) at 1rem so it still reads as the pane's title.
       ⚠ Tracking is 0.14em, not the labels' 0.30em: property names run to
       30-odd characters ("A/C Cloud Cap Home w/Lake Views!") and the title box
       is ~342px before the tabs — at 0.30em they would wrap to three lines. */
    /* ⛑ Elec: "book header was better with other font" — back to the DISPLAY
       face (Cormorant Garamond), keeping the all-caps and the 0.14em he
       approved. Size steps 1 → 1.18rem because a serif at the same nominal size
       reads smaller than Inter, and the brief was "slightly larger to fill the
       space". Tracking is still set per-name in browse.js. */
    .modal-title { font-family:var(--display); font-size:1.18rem; font-weight:600; color:var(--parchment); line-height:1.25; letter-spacing:0.14em; text-transform:uppercase; }
    .modal-header-right { display:flex; align-items:center; gap:1rem; }
    .modal-location { font-family:var(--display); font-style:italic; font-size:1.02rem; font-weight:400; color:var(--gold); white-space:nowrap; }    .modal-body { padding:1.3rem 1.4rem; }
    .modal-tabs { display:flex; align-items:center; gap:0.5rem; margin-bottom:1.2rem; flex-wrap:wrap; }
    /* Elec 2026-08-16: radius matches the amenity chips and the date/guest
       boxes (--radius-sm), not the 999px pill they used to be — same family of
       control, same corners. */
    .modal-tab { padding:0.5rem 1.05rem; font-size:0.76rem; font-weight:600; letter-spacing:0.09em; text-transform:uppercase; color:var(--sage); cursor:pointer; border:1px solid var(--gold-line); border-radius:var(--radius-sm); background:transparent; font-family:var(--body); transition:all 0.18s; white-space:nowrap; }
    .modal-tab:hover, .modal-tab.active { color:var(--parchment); border-color:var(--gold); background:rgba(201,169,110,0.1); }
    .tab-pane { display:none; }
    .tab-pane.active { display:block; }
    .detail-cover { aspect-ratio:16/10; overflow:hidden; border-radius:var(--radius); position:relative; background:var(--mist); }
    .detail-cover img { width:100%; height:100%; object-fit:cover; display:block; }
    .detail-summary { font-size:0.86rem; color:var(--sage); line-height:1.7; margin:0.9rem 0 0.8rem; }
    .detail-rating-block { display:flex; align-items:center; gap:0.5rem; margin-top:0.85rem; flex-wrap:wrap; }
    .detail-rating-stars { display:flex; gap:0.1rem; }
    .detail-star { color:var(--sage); font-size:1.05rem; }
    .detail-star.filled { color:var(--gold); }
    .detail-rating-val { font-family:var(--display); font-size:1.05rem; color:var(--parchment); font-weight:600; }
    .detail-rating-count { font-size:0.78rem; color:var(--sage); margin-left:0.2rem; }
    .bd-meta { display:flex; gap:0.8rem; font-size:0.76rem; letter-spacing:0.07em; text-transform:uppercase; color:var(--sage); margin:0.7rem 0; flex-wrap:wrap; }
    .bd-meta strong { color:var(--parchment); }
    .bd-price { padding:0.85rem 1rem; border:1px solid var(--gold-line); border-radius:var(--radius-sm); background:rgba(201,169,110,0.06); margin-bottom:1rem; }
    .bd-price .card-price strong { font-size:1.25rem; }
    /* ── MAP TAG (Elec round 4: "too pill shaped... make tilt version") — a
       tag/flag shape with a pointer notch, resting at a slight tilt; hover
       swells AND tilts further; filter changes wobble-tilt every tag. ── */
    /* ══ PIN: QUIET → BLOSSOM (Elec 2026-08-16, "quiet and elegant… quiet till
       you get close then the elegance blossoms"). At rest each property is a
       small gold dot. Within 130px of the cursor it opens into a price chip
       with real depth — gradient, crisp shadow, lifted off the map. Hovered or
       selected, it turns solid gold and lifts furthest. No tail, no tilt.
       Structure: .map-pin wrapper (never clipped) > .map-pill chip + tooltip.
       This inline block loads after browse.css and WINS. ══ */
    .map-pin { position:relative; display:inline-block; }
    .map-pin.pill-hidden { visibility:hidden; pointer-events:none; }
    .map-pin.hot, .map-pin.sel { visibility:visible; pointer-events:auto; }
    .map-pill {
      display:flex; align-items:center; justify-content:center; box-sizing:border-box;
      height:13px; max-width:13px; padding:0; overflow:hidden;
      border-radius:999px; border:2px solid rgba(5,29,64,0.9);
      background:radial-gradient(circle at 35% 30%, #E4CB98, #C9A96E 70%);
      box-shadow:0 1px 3px rgba(0,0,0,0.55);
      color:#0A2247; opacity:0.82; cursor:pointer;
      /* Elec: a slow bloom, not a fast burst — long ease-out so the chip
         unfurls; the price fades in later still. */
      transition:max-width 0.62s cubic-bezier(0.16,1,0.3,1),
                 height 0.62s cubic-bezier(0.16,1,0.3,1),
                 padding 0.62s cubic-bezier(0.16,1,0.3,1),
                 border-radius 0.5s ease, background 0.45s ease,
                 box-shadow 0.55s ease, opacity 0.45s ease, transform 0.5s cubic-bezier(0.16,1,0.3,1);
    }
    .pill-amt { opacity:0; white-space:nowrap; font-family:var(--body); font-weight:600;
      font-size:0.72rem; letter-spacing:0.01em; transition:opacity 0.34s ease 0.2s; }
    /* near the cursor: blossom open, dark chip lifted off the map.
       NOTE 2026-08-26: ALSO at zoom depth - .pins-zoom-open on the map div,
       set by the zoom driver at k>=0.5. The touch bands have no cursor and
       were seeing bare dots at every zoom (Elec live). .hot/.sel still win
       below by cascade order. */
    .map-pin.near .map-pill, .pins-zoom-open .map-pin .map-pill {
      max-width:160px; height:22px; padding:0 0.55rem; border-radius:6px;
      background:linear-gradient(180deg, rgba(26,34,48,0.96), rgba(5,29,64,0.96));
      border-color:rgba(201,169,110,0.55); color:var(--gold);
      box-shadow:0 6px 16px rgba(0,0,0,0.5); opacity:1; transform:translateY(-1px);
    }
    .map-pin.near .pill-amt, .pins-zoom-open .map-pin .pill-amt { opacity:1; }
    /* HOVERED (.hot) or CLICKED (.sel): solid gold, highest lift. The clicked
       pin HOLDS this bloom until the next selection; only the hovered one
       pulses (Elec 2026-08-16). */
    .map-pin.hot .map-pill, .map-pin.sel .map-pill {
      max-width:180px; height:24px; padding:0 0.6rem; border-radius:6px;
      background:linear-gradient(180deg, #E6CD9B, #C9A96E);
      border-color:var(--gold); color:#0A2247; opacity:1;
      box-shadow:0 12px 26px rgba(0,0,0,0.55), 0 0 0 4px rgba(201,169,110,0.16);
      transform:translateY(-3px) scale(1.04);
    }
    .map-pin.hot .pill-amt, .map-pin.sel .pill-amt { opacity:1; }
    /* pulse is HOVER-ONLY and shares the card's 2.6s beat — both classes flip
       in the same instant, so pin and card stay in phase. */
    .map-pin.hot .map-pill { animation:pairBeat 2.6s ease-in-out infinite; }
    /* a clicked pin that is no longer hovered: bloomed, but still */
    .map-pin.sel:not(.hot) .map-pill { animation:none; }
    
    /* filter change: a straight pop, no tilt */
    .map-pin.bounce .map-pill { animation:pinPop 0.5s cubic-bezier(0.34,1.56,0.64,1); }
    
    /* tooltip now lives beside the chip, so it is never clipped */
    .map-pin .pill-tip {
      position:absolute; bottom:calc(100% + 10px); left:50%;
      transform:translateX(-50%) translateY(4px);
      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;
      white-space:nowrap; opacity:0; pointer-events:none; z-index:6;
      box-shadow:0 8px 20px rgba(0,0,0,0.5);
      transition:opacity 0.16s ease, transform 0.16s ease;
    }
    /* Elec 2026-08-16: the name bubble shows for a hover from EITHER side (the
       pin or its list card — both set .hot) and STAYS open on click, since the
       clicked property keeps .sel until the next selection. */
    .map-pin.tip-on .pill-tip,
    .map-pin.hot .pill-tip,
    .map-pin.sel .pill-tip { opacity:0.72; transform:translateX(-50%) translateY(0); }
    .map-pill.swell { transform:rotate(-11deg) scale(1.32); }
    .map-pill.bounce { animation:tagTilt 0.6s cubic-bezier(0.34,1.56,0.64,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); }

    /* ── Elec 2026-08-16: Instagram as a superscript on the wordmark. It keeps
       .nav-instagram (so the coarse-pointer touch-target overlay in shared.css
       still applies — it matters more at this size, not less) and only gains
       placement. Two-class selectors so the shared.css sizing and the two
       media-query paddings are outranked rather than merely out-ordered.
       Gold is inherited from .nav-instagram, which is the same gold as "Home",
       so it reads as part of the mark rather than a link parked beside it. */
    /* ── Elec 2026-08-16: "match the guest support header button style to that
       of the amenities filter toggles style, including on hover effects.
       maintains current size and spacing."
       Taken from .filter-btn, read off the live rules rather than retyped:
       rest = transparent ground, 1px var(--gold-line), var(--sage) text;
       hover = gold border, parchment text, rgba(gold,0.1) wash, 0.18s.
       ⚠ NOT taken, because they would resize the button: its padding
       (8.8/22.4px vs the chip's 8/16.8px), 13px/500/1.82px type, and its place
       in the nav. Only the surface and the hover behaviour change. The border
       does go 1.7px → 1px, which is the chip's weight — a sub-2px box change,
       the one geometry consequence of matching. Specificity 1,1,0 / 1,2,0 so
       shared.css's own .nav-cta rules are outranked, not merely out-ordered. */
    /* ⚠ !important on the colour ONLY, and it is not a shortcut: shared.css
       line 380 declares `.nav-cta { color: var(--parchment) !important }`, so
       nothing short of !important can reach it. Verified by measurement — the
       first attempt left the button parchment while every other property took.
       shared.css is site-wide and this is the book-sub rebuild, so the fix
       stays in this page's block rather than touching that file. */
    /* ⛑ CORRECTED (Elec, same session): "i dont like what happened to guest
       support button. took too much away. its rest state should match
       activated amenities filter state." So rest is now the chip's ACTIVE
       look — gold border, parchment text, rgba(gold,0.1) wash — not its
       resting sage-on-transparent one. Hover has to move somewhere from
       there, so it takes the one heavier wash already in this family,
       .filter-btn.locked's rgba(gold,0.22). */
    #nav .nav-cta { background:rgba(201,169,110,0.1); border:1px solid var(--gold);
      color:var(--parchment) !important; transition:0.18s; }
    #nav .nav-cta:hover { border-color:var(--gold); color:var(--parchment) !important;
      background:rgba(201,169,110,0.22); }

    /* ── GUEST SUPPORT POP-OUT (Elec 2026-08-16). Same grammar as the date
       pop-out: anchored under its button, navy ground, gold edge.
       ORDER IS THE MESSAGE — after-hours emergency first, Breezeway largest,
       office hours below it, and 911 last as the floor under all of it. */
    .gs-wrap { position:relative; }
    /* FIXED, not absolute, and reparented to <body> by browse.js — see the
       stacking-context note there. Its top/right are set at open time from the
       button's rect, so it still reads as anchored to the button. */
    .gs-pop { position:fixed; z-index:200;
      /* Elec 2026-08-16: "sufficient size that it doesn't cause word wrap for a
         single word" — 21 → 24.5rem. At 21 the 911 line broke with "first."
         orphaned on a line of its own. text-wrap:pretty is belt and braces: it
         asks the browser to avoid orphans if the copy ever changes length. */
      width:min(24.5rem, 88vw); padding:1rem 1.15rem 0.9rem; text-wrap:pretty;
      /* GLASS GRAMMAR, ALL BANDS (Elec 2026-08-25: phone match approved, then
         "yes push that to all bands") - same chrome as .dr-pop/.gp-pop by
         token: 165deg navy gradient, 0.62-alpha gold edge, radius 16, inset
         gold hairline + layered drop. Was: flat #182E51, full gold, radius-sm,
         single shadow. */
      background:linear-gradient(165deg, #0A2247 0%, var(--forest) 55%);
      border:1px solid var(--gold-border); border-radius:16px;
      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);
      text-align:left; }
    .gs-pop[hidden] { display:none; }
    .gs-head { font-family:var(--body); font-size:0.68rem; font-weight:600;
      letter-spacing:0.26em; text-transform:uppercase; color:var(--gold);
      margin:0 0 0.55rem; }
    .gs-sep { font-family:var(--body); font-size:0.68rem; font-weight:600;
      letter-spacing:0.26em; text-transform:uppercase; color:var(--sage);
      margin:0.9rem 0 0.45rem; padding-top:0.7rem;
      border-top:1px solid rgba(201,169,110,0.28); }
    .gs-line { display:block; text-decoration:none; margin-bottom:0.5rem;
      transition:filter 0.2s var(--ease-out); }
    .gs-line:hover { filter:brightness(1.2); }
    .gs-num { display:block; font-family:var(--body); color:var(--parchment);
      letter-spacing:0.02em; }
    .gs-who { display:block; font-size:0.72rem; color:var(--sage);
      letter-spacing:0.06em; margin-top:0.1rem; }
    /* Breezeway is the one to reach first, so it is the biggest thing here. */
    .gs-primary .gs-num { font-size:1.42rem; font-weight:700; color:var(--gold); }
    .gs-secondary .gs-num { font-size:1.12rem; font-weight:600; }
    .gs-office .gs-num { font-size:0.95rem; }
    .gs-email { font-size:0.82rem !important; word-break:break-all; color:var(--sage) !important; }
    .gs-911 { font-size:0.72rem; line-height:1.5; color:var(--sage);
      margin:0.85rem 0 0; padding-top:0.6rem;
      border-top:1px solid rgba(201,169,110,0.18); }
    .gs-911 strong { color:var(--parchment); }

    /* The wordmark is a brand mark here, not a link (see the markup comment): the engine is
       the front door, so there is nowhere to go. shared.css gives .nav-logo `cursor:pointer`
       and a hover brighten — both promise a destination that no longer exists, so they are
       withdrawn. The drop-shadow stays; only the affordance goes. */
    .nav-logo-static { cursor:default; }
    .nav-logo-static:hover { filter:drop-shadow(0 0 6px rgba(201,169,110,0.07)); }
    /* Elec 2026-08-16: "move instagram logo to the right where its right edge is in
       line with the right edge of guest box, but stays on its vertical."
       Measured on the live page, not eyeballed: the mark's right edge sat at 384 and
       the Guests box ends at 402 — an 18px shift, so the wordmark's superscript and
       the search block below it share one right margin.
       `position:relative` + `left` rather than a margin ON PURPOSE: the mark is the
       last child of .logo-ig, so a margin would widen that wrapper and push the whole
       header group, moving the very box we are aligning to. A relative offset paints
       it 18px right and reflows nothing. Vertical is untouched. */
    /* Elec 2026-08-16: "All of 'simply home' could be bigger, but only covering the
       empty space surrounding, not pushing anything further away."
       Space measured before touching anything: 14px above the type, 2px below (the nav
       ends at 62 and "Home" already reaches 60), and 46px to the right of the Instagram
       mark before the first amenity chip. So the headroom is up and right — and the
       Instagram glyph is the only thing standing in it.
       +8% on both words uses that room. The type grows for real (font-size, not a
       transform) so it stays crisp at this size. */
    /* ⚠ line-height pinned BELOW 1 on purpose. At the larger size the line box grew and
       took the whole nav from 62px to 65px with it — which pushed the search row and the
       chips down, i.e. exactly the "pushing things further away" he ruled out. Tightening
       the leading lets the glyphs grow UP into the 14px of dead space above them while
       the box they sit in stays the height it was. Bigger letters, same footprint. */
    .nav-logo strong { font-size:2.81rem; line-height:0.94; }
    .nav-logo span   { font-size:3.13rem; line-height:0.94; }
    /* Elec 2026-08-16: "'SimplyHome' text logo move to the left, have the distance of
       the gap to small logo… half." Gap measured at 32px, so −16px halves it to 16.
       Relative offset, not a margin — the Instagram glyph is laid out after this text,
       and a margin would carry it 16px left off the Guests-box edge it is pinned to.
       A relative shift moves the letters and leaves the flow (and therefore Instagram)
       exactly where it is. */
    .nav-logo strong, .nav-logo span { position:relative; left:-16px; }
    /* ⚠ The Instagram offset is RE-PINNED, not left alone. It is laid out after the
       wordmark, so wider type carries it right and the +18px that had it flush with the
       Guests box would overshoot. This number is the offset measured against the NEW
       type width — the alignment Elec asked for survives the resize. */
    .logo-ig .nav-ig-sup { position:relative; left:-2px; }
    /* Elec 2026-08-16: "little padding between logo and simply in header. where logo
       moves to the left a little" — the gap opens by moving the MARK, not by pushing
       the wordmark right. Measured: mark ended at 100, "Simply" began at 111, an 11px
       gap; −7px takes it to 18. Relative offset again, for the same reason as the
       Instagram mark: a margin would re-flow the wordmark and drag the Instagram glyph
       off the right edge we just aligned it to. Room to spare on the left — the mark
       lands at 59 and the date box below already starts at 24. */
    /* ══ THE MARK: BIGGER, AND IT BREATHES ════════════════════════════════════
       Elec 2026-08-17: "should be a little bigger to more fill the space. every couple
       seconds it should kind of pulse breath too. like a double little inflate and puff
       with slow return and a little wiggle back and forth after returning to beginning
       size."
       ⚑ SIZE VIA TRANSFORM, NOT width/height. The mark is an inline image sitting BEFORE
       the wordmark, so growing its box would push "Simply" right and carry the Instagram
       glyph off the Guests-box edge it is pinned to — both of which were set by hand
       earlier tonight. A transform paints it ~18% larger and reflows nothing.
       ⚑ THE BASE SCALE LIVES IN THE KEYFRAMES. An animation's transform REPLACES a static
       one, so `transform:scale(1.18)` here would be discarded the moment the animation
       ran and the mark would snap back to 34px. Every frame therefore carries the 1.18.
       ★ TEMPO: 5.2s = 2 × the page's 2.6s beat. Everything that pulses here runs on 2.6s
       (dates, guests, pin+card, Book & Pay, the active-chip ember) under the rule that
       intensity varies but frequency does not. A one-off gesture on its own clock would
       fight all of them; on a MULTIPLE it stays in step — the move plays through the first
       beat and rests through the second, which is also what makes it read as "every couple
       of seconds" rather than constant fidgeting.
       The shape, in his words: inflate · small release · bigger puff · slow return · then
       the wiggle, which starts only AFTER the mark is back to size. */
    
    .nav-logo .nav-mark {
      position:relative; left:-21px;
      transform:scale(1.18);
      transform-origin:50% 50%;
      will-change:transform;
      animation:markBreath 5.2s ease-in-out infinite; }
    @media (prefers-reduced-motion:reduce) {
      .nav-logo .nav-mark { animation:none; transform:scale(1.18); } }
    .logo-ig { display:inline-flex; align-items:flex-start; }
    /* Elec: "+50%, placement is good so far" — 14 → 21px. The top margin drops
       0.3rem → 0.08rem so the icon grows about its own CENTRE (25.4px) instead
       of hanging further down from a fixed top edge; left edge unmoved. */
    .logo-ig .nav-ig-sup { padding:0; margin-left:0.12rem; margin-top:0.08rem; gap:0; }
    .logo-ig .nav-ig-sup svg { width:21px; height:21px; }

  
/* 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); }