/* engine-responsive.css — narrow and constrained viewports for the book engine. Created 2026-08-17. Elec: "mobile and limited view versions plan and implementation on you now." Plan + measurements: knowledge\Mobile-And-Limited-View-Plan.md. LOAD ORDER IS LOAD-BEARING. This file is LAST: site-* -> browse-* -> engine-tokens -> engine-motion -> engine-base -> engine-layout -> engine-surface -> engine-responsive Being last is deliberate: every rule here is scoped to a max-width (or a short viewport), so the reviewed >=1280 three-pane layout is untouched by construction. Nothing in this file fires above 1279px wide except the short-viewport valve. WHY A SEPARATE FILE rather than more media queries in engine-layout: Elec's standing rule — many small stylesheets per group/look, values CALLED not restated. The band work is one look; it lives in one place and can be handed to the apex rebuild whole. STAGES (see the plan): B1 overflow · B2 header budget · B3 touch targets · B4 map button · L laptop band · Z short-viewport valve. ★ BAND NAMES (Elec 2026-08-19, his vocabulary - use these in every conversation and comment from here on): DESKTOP = >=1280 (three panes, reviewed look) PANEL = 1025-1279.98 (map drops to the header button) TABLET = 768-1024.98 PHONE = <=767.98 (aka mobile; the one-question flow) ⚠ WHY EVERY UPPER BOUND ENDS IN .98 — a real defect, found 2026-08-17 while screenshotting an emulated 1024x768 tablet. Its device pixel ratio came out at 1.9999999, so the CSS viewport was 1024.5px: `(max-width:1024px)` was FALSE and `(min-width:1025px)` was ALSO FALSE. Neither band applied, and the guest got a bare list — no booking pane, no map panel. Any fractional viewport between an integer max and the next integer min falls through the same crack (zoom, DPR rounding, scrollbar-inclusive widths). Upper bounds are therefore 767.98 / 1024.98 / 1279.98, which meet the next band's integer min with no gap. ⛑ Same fix applied to engine-base.css's bands. If you add a breakpoint, pair it `max-width:N.98px` / `min-width:(N+1)px` — never `N` / `N+1`. */ :root{ /* The tap-target floor. Called by every control rule below — do not restate 44px. */ --sh-touch:44px; /* Header stack in the laptop band. The 208 below is the NO-JS FALLBACK only: it was hand-measured (nav 62 + filter bar 145 = 207 on build 2111737f) and the filter bar later grew to 160, so panes overflowed the fold by ~14px across the whole panel band - a magic number drifts whenever the header is retuned. Since 2026-08-21 browse.js MEASURES the real header (nav + filter bar) and sets this property on init / resize / dates-set changes, so the sticky top and pane height track reality by construction. */ --sh-lap-header:208px; /* Breathing room under the last card so the floating Map button never covers it. */ --sh-map-clearance:calc(var(--sh-touch) + 2.6rem); } /* ⚠ UNCONDITIONAL, and it has to be: engine-flow.js mounts the stage-C skip control at ANY width (so a resize into phone territory needs no re-mount), and its `display:block` lives in a <=767 query. Without a default here it rendered at 1280 — where `main#main` is a flex column, so a 108px bar simply STOLE that height from the three panes. Caught by the computed-style digest, not by eye. */ .sh-flow-skip{ display:none; } /* ══════════════════════════════════════════════════════════════════════════ L · THE LAPTOP BAND (1025–1279) The defect: `.browse-detail` was display:none until 1280 and `.map-toggle` was hidden from 1025 up, so a laptop got a list and a map and NO WAY TO BOOK. Elec, in the work record: "two panes, list and booking, with the map behind a button." That is exactly this block. The pane's interior (deck, panes, trust strip, quote type) is NOT restated here — engine-layout's media query was widened 1280 -> 1025 so it is defined once. ══════════════════════════════════════════════════════════════════════════ */ @media (min-width:1025px) and (max-width:1279.98px){ /* ⛑ REBUILT 2026-08-23 — THE PANEL BAND ADOPTS THE TABLET BODY (Elec, verbatim: "since map is toggleable at this width we should implement the tablet style columns. hide the book/details modal and have the nonscrollable map background across the screen that fades and softens behind property cards. fades in and out with map button click"). ⚑ The 08-17 two-pane laptop layout (list | booking, and the sticky-column machinery that went with it) is RETIRED HERE. Its reason — "a laptop got a list and a map and NO WAY TO BOOK" — is answered the way tablet answers it: cards route to their /stay page, which books end to end. The old block is in git history; the sticky-vs-relative trap it documented (site-footer-forms.css's `section:not(.page-hero){position:relative}` at (0,1,1) outranking a bare class) still applies to anything that tries to stick a column at this band — that is why nothing here does. */ .browse-split{ display:block; } .browse-split .browse-section{ position:relative; height:auto; overflow:visible; padding:0.9rem 0.8rem 1.4rem 2vw; } /* ⚑ 50/50 (Elec 2026-08-23: "when down to 2 columns they should split the screen width 50/50"). The tablet build's 405px cap is a HALF at 820 (405/820 = 49.4%) but only 35% at 1154 — the same constant reads as a different layout across the band. Expressed as the half it always meant: the cards column takes 50% of the viewport, the map reads as the other half, and it holds at every width in the band by construction. (The locked tablet band keeps its 405px: it already measures ~49.4%, and its lock stands.) */ .browse-split .browse-section{ width:50vw; } .browse-grid{ grid-template-columns:1fr; max-width:none; margin-inline:0; gap:1.1rem; } .tonight-strip{ max-width:none; } .stay-longer{ max-width:none; } .map-toggle{ display:block; } /* ══ THE BACKGROUND MAP, ported from the tablet band verbatim in mechanism: panel FIXED under the measured header token at z 0, the cards column rides over at z 1 and scrolls, and the left fade is a ::after veil of the page ground whose OPACITY transitions (mask-image cannot animate, a veil can). The MAP button flips body.map-open: veil fades OUT to nothing (map solid across), cards fade to a 0.1 ghost and release pointer-events so the map takes every touch. Every piece on the same 1.3s curve, both directions — his "fades in and out with map button click". Exits: MAP button, the ✕, Esc. */ .browse-map-panel{ display:block; position:fixed; z-index:0; border:none; top:var(--sh-lap-header); right:0; bottom:0; left:0; width:auto; height:auto; transition:opacity 1.3s cubic-bezier(0.45,0,0.25,1); } .browse-map-panel::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg, var(--forest) 0%, var(--forest) 15%, rgba(13,17,25,0.87) 37%, rgba(13,17,25,0.42) 60%, rgba(13,17,25,0.07) 84%, rgba(13,17,25,0) 100%); transition:opacity 1.3s cubic-bezier(0.45,0,0.25,1); opacity:1; } body.map-open .browse-map-panel{ position:fixed; top:var(--sh-lap-header); right:0; bottom:0; left:0; height:auto; z-index:0; opacity:1; } body.map-open .browse-map-panel::after{ opacity:0; } .browse-section{ position:relative; z-index:1; transition:opacity 1.3s cubic-bezier(0.45,0,0.25,1); } body.map-open .browse-section{ visibility:visible; opacity:0; pointer-events:none; } .prop-card.selected{ border-color:var(--gold); box-shadow:0 0 22px rgba(201,169,110,0.22); } /* ══════════════════════════════════════════════════════════════════════════ THE HEADER TAKES THE NARROW-WIDTH STRUCTURE (Elec 2026-08-23). HIS DIAGNOSIS, which the measurements confirm: with the count block beside the MAP button, shrinking width ran the number into the Instagram glyph, pushed it over the wordmark, and shoved GUEST SUPPORT off the right edge — "this issue is prevented at narrower widths by having amenities chips go fullpage width and then placing date and guest boxes above the chips." ⇒ From the moment the 3rd column collapses (map to background, MAP button appears) the header IS the narrow structure. Measured at the locked tablet (vw 1003): chips AND boxes are four equal 218px tracks, column gap 12.8, row gap 8.8, box/chip padding 4.8/11.2, MAP and GUEST SUPPORT both 32px tall at 8.5/10 — this band scales those UP and lands exactly on them at 1025, so the two bands meet with no jump. Type is NOT scaled: he asked for padding and spacing, and scaling type would break the equal widths. ══════════════════════════════════════════════════════════════════════════ */ .filter-bar{ --fb-gap-x:clamp(12.8px, calc(12.8px + (100vw - 1025px) * 0.02835), 20px); --fb-gap-y:clamp(8.8px, calc(8.8px + (100vw - 1025px) * 0.01654), 13px); --fb-pad-y:clamp(4.8px, calc(4.8px + (100vw - 1025px) * 0.00866), 7px); --fb-pad-x:clamp(11.2px, calc(11.2px + (100vw - 1025px) * 0.02677), 18px); } /* ⛑ THE BAR IS A SINGLE COLUMN, as it is at tablet. First build of this port kept the inherited two-track bar (auto | 1fr): the boxes sized track 1 and squeezed the chips into a 24px sliver at the far right — measured, not guessed. Full-width rows stacked is the whole point of the narrow structure. */ /* ⚠ EVERY structural selector here carries `.has-dates` as well, and that is load-bearing: the base grid is `.filter-bar.has-dates` (0,2,0) in browse-filterbar.css, so a bare `.filter-bar` (0,1,0) LOSES and the two-track template survives — measured as 72px boxes in 167px chip tracks before this was fixed. Same-weight + later file = these win. */ .filter-bar, .filter-bar.has-dates{ display:grid; grid-template-columns:1fr; column-gap:0; row-gap:var(--fb-gap-y); align-items:center; } .filter-bar .fb-datelabelrow, .filter-bar.has-dates .fb-datelabelrow{ grid-column:1; grid-row:1; margin-bottom:0; } .filter-bar .fb-datecell, .filter-bar.has-dates .fb-datecell{ grid-column:1; grid-row:2; } .filter-bar .filter-count, .filter-bar.has-dates .filter-count{ grid-column:1; grid-row:2; } .filter-bar .fb-labelrow, .filter-bar.has-dates .fb-labelrow{ grid-column:1; grid-row:3; margin-bottom:0; } /* chips: four full-width tracks, stretched by the scaled gap */ .filter-bar .fb-chips, .filter-bar.has-dates .fb-chips{ grid-column:1; grid-row:3; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); column-gap:var(--fb-gap-x); row-gap:var(--fb-gap-y); width:100%; } /* ⛑ The gap needs the extra weight: measured chips gap 6.4px against the fields' 18.97 on identical 1133px containers, which is exactly why the tracks came out 278 vs 269. A `gap` shorthand elsewhere was still winning. Both grids must share ONE gap or the columns cannot line up. */ body .filter-bar .fb-chips, body .filter-bar.has-dates .fb-chips, body.dates-set .filter-bar.has-dates .fb-chips{ column-gap:var(--fb-gap-x); row-gap:var(--fb-gap-y); } /* boxes ABOVE the chips, on the chips' OWN grid — date over ALL, guests over PET FRIENDLY, equal widths BY CONSTRUCTION (his "widest box as the model" resolves to equal tracks, which cannot drift like copied numbers). */ /* ⚠ `.has-dates` again — the 08-19 sweep caps this cell at the left half for 768–1279 at (0,3,0); without the matching weight the boxes came out 127 in 278 tracks. His chip-width instruction supersedes that cap in this band, exactly as it did at tablet. */ .filter-bar .fb-datecell, .filter-bar.has-dates .fb-datecell, body.dates-set .filter-bar.has-dates .fb-datecell{ width:100%; max-width:none; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); column-gap:var(--fb-gap-x); justify-content:start; } /* ⛑ The fields carry --fb-date-stretch / --fb-guest-stretch MIN-WIDTHS from the desktop build; those beat a grid track (measured: box 265 in a 219 track, and guests spilling out of track 2 entirely). Zero them here and let the tracks govern — that is what makes every box and chip the same width by construction. First and second children are pinned to tracks 1 and 2 so the pairing is structural, not source-order luck. */ /* the wrappers contribute nothing: a field measured 269 inside its 278 track until their own padding/margin was zeroed — the box must BE the track */ .filter-bar .fb-datecell > *{ grid-row:1; min-width:0; padding:0; margin:0; } .filter-bar .fb-datecell > *:nth-child(1){ grid-column:1; } .filter-bar .fb-datecell > *:nth-child(2){ grid-column:2; } .filter-bar .fb-datecell .dr-wrap, .filter-bar .fb-datecell .date-field, .filter-bar .fb-datecell #gpBtn{ width:100%; max-width:none; min-width:0; } .filter-bar .filter-btn, .filter-bar.has-dates .date-field, .filter-bar.has-dates #gpBtn{ padding-block:var(--fb-pad-y); padding-inline:var(--fb-pad-x); } .filter-bar.has-dates #gpBtn{ padding-right:calc(var(--fb-pad-x) + 25.6px); } /* the ☐🐾 glyph's lane */ /* the label row rides its own track-1 width, as it does at tablet */ .filter-bar .fb-datelabelrow{ width:calc((100% - 3 * var(--fb-gap-x)) / 4); min-width:0; display:flex; align-items:baseline; justify-content:space-between; } /* THE COUNT comes home to the bar — out of the nav, into the zone his layout frees for it: below MAP, right of the guests box, free to wrap and scale. It shares row 2 with the fields and right-justifies over the empty tracks 3–4, which the fields can never reach (the tablet mechanism). */ .filter-bar .filter-count{ justify-self:end; align-self:center; text-align:right; max-width:calc((100% - 3 * var(--fb-gap-x)) / 2 - 0.6rem); margin-right:0; margin-top:0; position:relative; } .filter-bar .filter-count .fc-main{ white-space:normal; line-height:1.25; } .filter-bar .filter-count .fc-low{ position:static; display:block; margin-top:0.12rem; } /* ══ MAP + GUEST SUPPORT: matched to each other and sized off the header boxes (Elec: the MAP button's "high internal padding.. would better more closely hav[e] the size of the boxes in the header, so does the guest support button" · "scaled to match each other from the map button creation and both tied to the top right"). The 44px touch floor is released here — desktop-class pointers, and the compaction grammar allows it. */ #nav .nav-right{ align-items:flex-start; } /* ⛑ #nav #mapToggle, NOT #nav .map-toggle (Elec 2026-08-27, panel band at 1113: "how small the map button is when compared the support button.. definitely the same height and same internal padding"). The pair rule's two selectors carried UNEQUAL specificity — #nav #gsBtn is two ids and outranked the ≤1200 collapsed-nav shrink (0.28rem pads), while #nav .map-toggle (one id) lost to it — so through the 1025–1200 overlap GUEST SUPPORT kept this clamp and MAP fell to the shrink: measured 23.3px vs 34.5px tall on the same axis. Two ids on BOTH halves keeps the pair matched by construction; width still differs only by text. */ #nav #mapToggle, #nav #gsBtn{ min-height:0; padding-block:clamp(8.5px, calc(8.5px + (100vw - 1025px) * 0.01772), 13px); padding-inline:clamp(10px, calc(10px + (100vw - 1025px) * 0.0315), 18px); line-height:1.1; } /* ⚑ Elec, mid-build: "the map and guest support buttons can and should be larger than the chips.. not in width, but in internal padding." The vertical clamp above runs 8.5 → 13 against the chips' 4.8 → 7, so the buttons stay visibly the more generous control at every width in the band while remaining matched to EACH OTHER and landing on the locked tablet's 8.5/10 at 1025. */ /* ~~THE GHOST LINE ON MAP ("CLICK TO ACTIVATE" ::before)~~ REMOVED 2026-08-27 on Elec's word, verbatim: "the faint 'click to activate' text behind the map button should go." It was his 08-22-era ask; reversed by him after the button pair was matched. The ::before, its position:relative host rule, and the two sizing lessons that lived here went together — restore point: rebuild-draft-backup-2026-08-27_0941. */ } /* The full-screen map overlay. ⚑ CEILING PULLED 1279.98 -> 1024.98 on 2026-08-23: the panel band now runs the background-map build above (its own block), and tablet overrides this with its own. What is left underneath is the PHONE, which still wants the map full screen. */ @media (max-width:1024.98px){ body.map-open .browse-map-panel{ display:block; position:fixed; inset:0; z-index:70; height:100vh; height:100dvh; border-left:none; } body.map-open .browse-section{ visibility:hidden; } } /* ── SECOND EXIT FROM THE MAP OVERLAY (Elec 2026-08-23: "there should be more than one exit mode.. map button is the easiest number 1.. would key binding to Esc work? or just putting an X button in a corner? random map click seems like to easy for end user to inadvertantly do.") BOTH ship: the ✕ is the visible route (this overlay lives on touch tablets, where Esc does not exist) and Esc rides along free for keyboards — wired in browse.js. Random-click exit stays out, per his ruling. The button exists only below 1280 (the two bands that have an overlay: tablet focus mode and the panel fullscreen map) and only while the map is open. Sits under the .map-brand chip (top 12 + 34 + 10), same outline-on-air grammar as every header button. */ .map-exit{ display:none; } /* The detail-overlay X is created at every width (browse.js) but only the overlay band ever shows it — default off everywhere, on under body.bd-open inside the panel-band block. */ .bd-exit{ display:none; } @media (max-width:1279.98px){ body.map-open .browse-map-panel .map-exit{ display:flex; align-items:center; justify-content:center; position:absolute; top:56px; right:12px; z-index:6; width:40px; height:40px; border-radius:50%; border:1px solid var(--gold); background:rgba(5,29,64,0.85); color:var(--parchment); font-size:1rem; line-height:1; cursor:pointer; } body.map-open .browse-map-panel .map-exit:hover{ background:rgba(201,169,110,0.15); } } /* ── PANEL BAND HEADER: the count pair gets a PLACED cell (2026-08-21, Elec: "headers should all be clean and sleek with a percise flow"). At 1025-1279.98 the bar is a two-track grid and .filter-count had grid-column:auto - it auto-flowed into the first free cell, bottom-LEFT, squeezed under the date labels (measured: top 153, left 51, in the left track). Deliberate placement: right track, the row under the chips, right-aligned - the count pairs with the booking column the way desktop pairs it with the map column. One rule, both date states. */ /* ⛑ RETIRED 2026-08-23: this placed the count in a second bar column at the panel band, from the era when that bar had two tracks. The band now runs the narrow-width structure (single column; count right-justified over the empty half of the fields row) — see the panel block above. Leaving the rule here silently re-placed the count into a column that no longer exists. */ /* ── TABLET (768-1024.98): the card grid goes SINGLE column, reading width, centered (2026-08-21). Elec called it in advance: "2-across cards will end up being changed.. wont work." Measured at 820: the 2-across card's content column fell to ~200px - "PAGOSA SPRINGS, CO" wrapped into the rating cluster and every card orphaned ". N SQ FT" onto a dangling dot line (the floating-end class the design law forbids). One roomy horizontal card per row is the anatomy working as designed at every width in the band. ⚑ THIS RULE LIVES HERE, NOT IN browse-cards.css, BY LOAD ORDER: engine-base redefines .browse-grid per band and loads after browse-* - a first attempt in browse-cards silently lost to it (max-width applied, columns did not). This file loads LAST; band overrides belong here, same as the panel band's. */ @media (min-width:768px) and (max-width:1024.98px){ /* Elec, stepping away 2026-08-21 (verbatim style brief in the ledger): cards "very wide with lots of internal space wasted.. stay the narrower size used earlier on desktop, the modals themselves still tied to the left, leaving the right side temporarily empty till i get back." The desktop list column is 405px - the cards keep that width, LEFT-tied. */ .browse-grid{ grid-template-columns:1fr; max-width:405px; margin-inline:0; } .tonight-strip{ max-width:405px; } /* the strip shares the cards' left column edge */ .stay-longer{ max-width:405px; } /* and so does its dated-state sibling */ /* DATES-SET state: the "Stay dates / x All dates" label row becomes visible and would land in row 1 ON TOP of the fields (measured overlap after the row collapse). With dates set the header takes three rows - label, fields +count, chips - same 0.55rem beat throughout. */ body.dates-set .filter-bar.has-dates .fb-datelabelrow{ grid-row:1; } body.dates-set .filter-bar.has-dates .fb-datecell{ grid-row:2; } body.dates-set .filter-bar.has-dates .fb-chips{ grid-row:3; } /* Round 2 on the dated state (Elec: "the x properties available line dropped back under the amenities chips. it needs to back above ac and hot tub"). The original slide-under-the-guests-box was the INFLATED DATE RANGE eating width - with the range back at body size (rule below) the dated line fits the right half, so it keeps the idle placement: fields row, right-aligned over the A/C + HOT TUB zone. */ body.dates-set .filter-bar.has-dates .filter-count{ grid-row:2; max-width:calc(50% - 1rem); } /* Round 3 (Elec: "too much vertical spacing.. the properties available and as low as lines could set closer together" + the standing rule this round bought: A MOVED ITEM MUST NEVER PUSH SPACING OTHERS ALREADY OWN). Measured cause of every pushed gap: the dated count had wrapped to THREE lines, 60px tall - its row grew, fields floated, chips sank. The availability line fits its half unwrapped (~270px in ~360), so: nowrap, tight leading, the price line snug beneath - the block sizes to the fields row instead of sizing it. */ body.dates-set .filter-bar.has-dates .filter-count .fc-main{ white-space:nowrap; line-height:1.15; } body.dates-set .filter-bar.has-dates .filter-count .fc-low{ display:block; margin-left:0; margin-top:0.1rem; line-height:1.1; } /* "Stay dates is a little too small now" */ body.dates-set .filter-bar.has-dates .fb-datelabel{ font-size:0.66rem; } /* "xAll dates needs to go above date box, but stay dates will need it[s] horizontal spacing and stretch lowered to allow it to fit." The label row narrows to the date box's own track (the chip-grid col-1 width) and the STAY DATES tracking compresses so label + clear share that width. */ body.dates-set .filter-bar.has-dates .fb-datelabelrow{ width:calc((100% - 2.4rem) / 4); min-width:0; display:flex; align-items:baseline; justify-content:space-between; gap:0.4rem; /* Elec: "so close that the top border of the date box is like an underlining for the labels" - the hug law at its edge. The negative bottom margin shrinks THIS row's contribution so the rows below pull up; the labels ride ~2px off the box border. */ margin-bottom:-9px; } body.dates-set .filter-bar.has-dates .fb-datelabel{ letter-spacing:0.07em; font-size:0.6rem; white-space:nowrap; } body.dates-set .filter-bar.has-dates .date-clear{ white-space:nowrap; } /* And only the FIRST value (the count) carries the big size - the date range is also a .fc-v in the dated markup and 1.06rem made it shout. */ .filter-bar.has-dates .filter-count .fc-main b.fc-v ~ b.fc-v{ font-size:inherit; } /* The 405px card wants the DESKTOP LIST'S compact anatomy, not the wide card's - at wide-card padding the facts row orphaned ". N SQ FT" again. These mirror the .browse-section compact rules (engine-surface, scoped >=1025 by media) for this band; the class is on the markup at every width. */ .browse-grid{ gap:1.1rem; } .browse-section .card-img{ aspect-ratio:auto; height:100%; min-height:104px; } .browse-section .card-badges{ display:none; } .browse-section .card-body{ padding:0.5rem 0.7rem 0.55rem; } .browse-section .card-name{ font-size:1rem; margin-bottom:0.2rem; } .browse-section .card-desc{ display:none; } .browse-section .card-location-row{ margin-bottom:0.1rem; } .browse-section .card-location{ font-size:0.75rem; } .browse-section .card-meta{ font-size:0.75rem; font-weight:600; } /* And his direct catch: the faint "starting at" behind the nightly price was MISSING here - the desktop rule lives inside the >=1025 layout block, so the band never got it. Same label, same measured offsets, band-scoped. */ .card-price strong{ position:relative; } .card-price strong::before{ content:"starting at"; position:absolute; left:calc(100% + 0.15em); top:-1.30em; transform:translateX(-50%); font-family:var(--display); font-style:italic; font-weight:400; font-size:0.788em; letter-spacing:0.03em; white-space:nowrap; color:rgba(245,240,232,0.42); pointer-events:none; } /* ══ THE COLUMN'S RIGHT SIDE - THE BACKGROUND MAP (Elec 2026-08-22, "heres the kicker"): the map lives as a BACKGROUND on the right, fading across to the left; it stays in place while the property modals scroll over it; still interactive - pins and movement same as desktop. The MAP button (or a click on the map) darkens the fade and turns the modals half transparent - the whole map visible. Another press, or a click on a modal, fades the map back and resolidifies the cards. Mechanics: panel FIXED under the measured header token, z 0; the cards column rides above at z 1 and scrolls; the left fade is a ::after veil of the page ground (a gradient of --forest) whose OPACITY transitions - mask-image cannot animate, a veil can. Focus mode thins the veil to 0.22 and drops the cards to 0.45. */ .browse-map-panel{ display:block; position:fixed; z-index:0; border:none; top:var(--sh-lap-header); right:0; bottom:0; left:0; width:auto; height:auto; transition:opacity 1.3s cubic-bezier(0.45,0,0.25,1); } /* Focus fades: 1.3s = HALF THE 2.6s BEAT (the motion system's clock, never free-running), symmetric in-out curve - Elec: "make the transition smoother and slower." Same duration+curve on veil and section below so the three pieces dissolve as one. */ .browse-map-panel::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg, var(--forest) 0%, var(--forest) 15%, rgba(13,17,25,0.87) 37%, rgba(13,17,25,0.42) 60%, rgba(13,17,25,0.07) 84%, rgba(13,17,25,0) 100%); transition:opacity 1.3s cubic-bezier(0.45,0,0.25,1); opacity:1; } body.map-open .browse-map-panel{ position:fixed; top:var(--sh-lap-header); right:0; bottom:0; left:0; height:auto; z-index:0; opacity:1; } /* FOCUS MODE, settled across Elec's four live rounds 2026-08-22 night: "map should move on top when cards dim, then behind once cards are active again" -> "still see the property cards some.. smooth fade.. more to do with transparency than the sudden zlevel pop" -> "map becomes bold" -> "smooth fades by each peice each way." A literal z swap (0->2) was built and retired the same night: a z-index flip cannot fade, so some piece always snapped. Final mechanics are PURE TRANSPARENCY, no z change: the map stays z 0 and FULLY SOLID (bold - the veil thins to 0.12 instead of the panel going translucent), the cards dim to a 0.3 ghost ON TOP (readable "some"), and the section drops pointer-events so every touch in focus reaches the map - the functional half of "map on top". Every piece is an opacity transition, both directions. Knobs: veil 0.12 = map boldness, section 0.3 = card ghost. Exit is the button (ghost cards swallow no clicks now). */ body.map-open .browse-map-panel::after{ opacity:0; } /* 0.12 -> 0 (Elec: "take the wash away while active, slowly fading out matching pace of the other elements fade") - active map is solid 100 across; the veil rides the same 1.3s curve as the cards both ways. */ .browse-section{ position:relative; z-index:1; transition:opacity 1.3s cubic-bezier(0.45,0,0.25,1); } body.map-open .browse-section{ visibility:visible; opacity:0; pointer-events:none; } /* 0.3 -> 0.2 -> 0.1 (Elec: "fade the properties a little more out.." then "might have to take the cards to .1 or gone completely.. its too busy still"). 0.1 = the faintest trace; his "gone" option = 0 here. */ /* FINAL WORDS of this block - same-specificity rules earlier in the block kept winning by order (third bite of that trap this band). These close the round-3 items definitively: label at 0.66rem, count stripped of padding so its two tight lines size to the fields row instead of inflating it. */ body.dates-set .filter-bar.has-dates .fb-datelabel{ font-size:0.66rem; } body.dates-set .filter-bar.has-dates .filter-count{ padding:0; min-height:0; display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:2px; } /* flex column: anonymous line-box leading is gone by construction - two content-height lines, right edge shared, centered against the fields */ body.dates-set .filter-bar.has-dates .filter-count .fc-low{ margin-top:0; } /* Elec: "stay dates and xAll dates a little closer to date box still" + the fields back on the even beat. The mechanism: the dated values at 16.96px made the count 40.8px tall - taller than the 32px fields - so its row stretched and the slack pushed label and chips off the 8.8 beat. At 14px the two value lines total ~31px, the count fits the fields row, and every gap in the dated header lands back on 8.8 BY CONSTRUCTION. */ /* Round 4 (Elec: "all the numbers larger again.. they shrunk even though theres a huge gap above them"). He is right - fitting the count into the 32px row was the wrong trade. The zone ABOVE the count is genuinely empty (the label strip spans only the date-box column), so the count leaves the grid entirely: absolute, right-anchored, its BOTTOM tied to the fields' bottom line - it grows UPWARD into the blank space and can never push a row again. Values return to the idle grammar size. */ body.dates-set .filter-bar.has-dates .filter-count{ position:absolute; right:4vw; bottom:calc(62px + 1.1rem); /* chips block 62 + gap + foot: the fields' bottom line */ max-width:none; } } /* ══════════════════════════════════════════════════════════════════════════ B4 · THE MAP BUTTON — clear of content, clear of the notch ══════════════════════════════════════════════════════════════════════════ */ @media (max-width:1279.98px){ .map-toggle{ min-height:var(--sh-touch); padding:0.7rem 1.7rem; bottom:max(1.4rem, env(safe-area-inset-bottom)); } /* Longhand, and after the band rules above on purpose: it must survive the padding shorthand they set. Two classes for the same specificity reason. */ .browse-split .browse-section{ padding-bottom:var(--sh-map-clearance); } } /* ══════════════════════════════════════════════════════════════════════════ B3 · TOUCH TARGETS Measured under the 44px guideline on build 2111737f: date-field 39, filter-btn 34, map-toggle 39, dr-arrow 35, nav-cta 35. Two conditions, one block: width covers what can be verified in a desktop browser sweep, `pointer:coarse` covers a real finger at any width. ══════════════════════════════════════════════════════════════════════════ */ @media (max-width:1024.98px), (pointer:coarse){ .filter-btn, .date-field, .gp-field, .date-clear, .map-toggle, .nav-cta, .dr-arrow, .gp-step button{ min-height:var(--sh-touch); } .dr-arrow, .gp-step button{ min-width:var(--sh-touch); } .filter-btn{ padding-block:0.55rem; } /* Calendar cells are aspect-ratio:1 inside a 7-column grid — 44px each would be 308px of grid inside a 320px screen once the popover's own padding is counted, so the floor here is what actually fits, stated rather than pretended. */ .dr-cell{ min-height:38px; } } /* ══════════════════════════════════════════════════════════════════════════ B1 + B2 · PHONE AND TABLET (<=1024): stop the overflow, give the header a budget B1 cause, measured at 390: the guests field ended at x=411 and .fb-chips was 395px wide, both against a 390px viewport — 20px of horizontal overflow. The bar's two-track grid cannot hold a 265px date box plus a 130px guests box plus gaps on a phone, so below the laptop band it becomes ONE track. B2: 350px of header before the first home was 41% of an iPhone 14 screen. ⚑ CEILING RAISED 767 -> 1024 after measuring 820x1180: the tablet band was WORSE than the phone (bar 270px, first home at 404px), because the two-track grid wrapped there while the phone rules stopped at 767 — and the 44px tap targets made every wrapped row taller. One treatment for both bands is also one thing to maintain. The wordmark keeps its own <=767 block below; 38% of an 820px screen is fine. ══════════════════════════════════════════════════════════════════════════ */ @media (max-width:1024.98px){ /* ⚠ minmax(0,1fr), NOT 1fr — and this is the second half of the overflow fix. `1fr` is `minmax(auto,1fr)`, and `auto` floors the track at the widest item's MIN-CONTENT. `.filter-count .fc-main` is `white-space:nowrap`, so once the count line reads "29 PROPERTIES · AS LOW AS $168" its min-content was 390px and it pushed the whole bar to 422px inside a 391px screen — 14px of page overflow that appeared only after dates were chosen. minmax(0,…) lets the track shrink; the count then wraps instead of shoving. */ .filter-bar.has-dates{ grid-template-columns:minmax(0,1fr); column-gap:0; row-gap:0.4rem; padding:0.5rem 4vw 0.7rem; } .filter-bar.has-dates .filter-count, .filter-bar.has-dates .filter-count .fc-main{ white-space:normal; } /* Wrapping stopped the overflow but cost height: once dates are chosen the line becomes "11 properties available Aug 19 – Aug 22" and took two rows, pushing the first home from 235px to 302px. Smaller type puts it back on one line at 359px of usable width; `white-space:normal` above stays as the safety net for a longer string rather than being the everyday behaviour. */ .filter-bar.has-dates .filter-count .fc-main{ font-size:0.62rem; letter-spacing:0.06em; } .filter-bar.has-dates .filter-count .fc-main .fc-v{ font-size:1.05em; } .filter-bar.has-dates .filter-count .fc-low{ font-size:0.62rem; } /* Every child onto the single track, in reading order: label · fields · chips. The explicit grid-row values matter — the bar's children carry hard-coded column/row placements from browse-filterbar.css and engine-layout.css, and without resetting them the items would keep stacking into two columns. */ .filter-bar.has-dates .fb-datelabelrow{ grid-column:1; grid-row:1; width:auto; } .filter-bar.has-dates .fb-datecell{ grid-column:1; grid-row:2; display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; } .filter-bar.has-dates .fb-labelrow{ grid-column:1; grid-row:3; } .filter-bar.has-dates .fb-chips{ grid-column:1; grid-row:4; } .filter-bar.has-dates .filter-count{ grid-column:1; grid-row:5; text-align:left; } /* Dates and Guests share one row, each taking half the width. min-width:0 is what actually stops the overflow — the fields carry min-width 265px/130px from browse-filterbar.css, and a grid item cannot shrink below its own min-width no matter what the track says. */ .filter-bar.has-dates .dr-wrap, .filter-bar.has-dates .gp-wrap{ min-width:0; } .filter-bar.has-dates .date-field, .filter-bar.has-dates .gp-field{ width:100%; min-width:0; padding-inline:0.7rem; } .filter-bar.has-dates .date-msg{ grid-column:1 / -1; } /* The chips become one horizontally scrollable row instead of two wrapped rows: eight 44px chips wrapped is 96px of header on a screen that has none to give. Scrollbar hidden — the partial chip at the right edge is the affordance. */ .filter-bar.has-dates .fb-chips{ flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; -ms-overflow-style:none; } .filter-bar.has-dates .fb-chips::-webkit-scrollbar{ display:none; } .filter-bar.has-dates .fb-chips .filter-btn{ flex:0 0 auto; } /* B2 · the header's appetite. Measured at 391px: nav 43 + bar 196 = 274px before the first home. The two LABEL ROWS are what is left to give — "Stay dates" over a field that already reads ADD DATES, and "Amenities" over eight chips that are self-evident. Both go on a phone; neither carries information the control below it does not. ⚠ EXCEPT when dates are chosen: "× All dates" lives in the date label row and is the only way to clear them. `:has()` brings that row back the moment the clear button loses its `hidden` attribute — the row costs nothing while it is empty, and reappears exactly when it has something to hold. (`:has()` is already used in engine-layout.css, so this is not a new dependency.) */ .filter-bar.has-dates .fb-datelabelrow{ display:none; } /* ~~:has(.date-clear:not([hidden])) resurrection rule~~ DELETED 2026-08-26. It existed to bring the row back for "x All dates" - a control RETIRED on 2026-08-26 for the inline xClear, so the rule could only ever show an empty row. It was also the long-unhunted rival: :has() arguments count toward specificity, so it weighed (0,5,1) and beat every (0,4,x) hide - the reason the count-line block below needed !important (now dropped). */ .filter-bar.has-dates .fb-labelrow{ display:none; } /* The list's own top padding is the last of it. */ .browse-split .browse-section{ padding-top:0.6rem; } } /* ── TABLET HEADER - Elec's four called items, 2026-08-21 night review. All measured before writing (values in the ledger). */ @media (min-width:768px) and (max-width:1024.98px){ /* 1. "text logo is covering image logo." engine-base shifts the wordmark text left:-16px AND the mark left:-21px - numbers tuned TOGETHER at desktop. This band had the mark pull neutralized but kept the text pull, so the letters slid 13.3px over the mark (ink 62.2 vs mark edge 75.5). The pair moves together: text back to 0. */ .nav-logo strong, .nav-logo span{ left:0; } /* 2. "pet icon and checkbox.. should be centered vertically." Round 2 of this item taught the real lesson: the geometric center was ALREADY exact (computed 12.49px top in a 24.97px content box resolves to precisely 50%/-50%) - what reads low is the GLYPH INK. The checkbox and paw sit on the text BASELINE, leaving their ascent empty above, so a perfectly centered line box still looks bottom-heavy. Centering the ink takes a ~2px lift on top of the geometry. Measure boxes, but judge INK. */ #gpBtn::after{ top:calc(50% - 2px); transform:translateY(-50%); } /* 3b. "make the widths of the date and guest boxes the same as the amenity chips beneath them." By CONSTRUCTION, not by copied numbers: the datecell becomes the same four-track grid the chips use (same 0.8rem column gap, full row width), date in track 1, guests in track 2 - the boxes and the chips below them share column edges at every width in the band. The single-line count still overlays tracks 3-4 (right-justified), which the fields can never reach. */ /* max-width:none overrides the earlier sweep's "date+guests pair capped at the left half" (768-1279) - Elec's chip-width instruction supersedes it in THIS band; the panel band above keeps its cap. */ .filter-bar.has-dates .fb-datecell{ width:100%; max-width:none; grid-template-columns:repeat(4, minmax(0,1fr)); column-gap:0.8rem; } .filter-bar.has-dates .fb-datecell .dr-wrap, .filter-bar.has-dates .fb-datecell .date-field, .filter-bar.has-dates .fb-datecell #gpBtn{ width:100%; } /* Round 4 (Elec): "spacing between the items in the logo group should be increased so that the overall width.. extends as far as the end of the guests box." Measured at 820: group ended at 369, guests box at 398.7 - 29.7px short, split evenly across the three gaps (mark|Simply, Simply|Home, Home|instagram) at +9.9px each. Scoped to #nav so the footer's logo copy keeps its own spacing. */ /* Round 7, Elec's final header geometry (his three anchors, verbatim in the ledger): the group grows RIGHT past the old guest-box marker - the p's tail passes the right of "x All dates", the Instagram glyph's right edge aligned near the A/C chip (superseded same night: half gaps - Elec: "that was too much.. gaps between items should be half of that"; logo size kept), all components evenly spaced, the mark a tiny bit further right and a bit larger. Gaps solved from measured widths (mark 40 + Simply ~139 + Home ~127 + IG 21 across 40->500). */ #nav img.nav-mark{ margin-left:7px; margin-right:21.2px; width:40px; height:40px; } #nav .nav-logo span{ margin-left:21.2px; } #nav .logo-ig .nav-ig-sup{ margin-left:21.2px; } /* "font size of the number of available properties should be larger, like the price is but staying the same color" - the 29 takes the $74's exact 16.96px; color stays parchment (only the size rule changes). */ .filter-bar.has-dates .filter-count .fc-main .fc-v{ font-size:1.06rem; } /* Round 5 (Elec): "map and guest support buttons should be a little larger, but.. just cover more of the surrounding blank space not push items any further away." Growth with a CONSTANT MARGIN BOX: padding grows the visual button (+6px tall, +10px wide), the exactly-equal negative margin gives it back, so the flow box every neighbour sees is byte-identical - the buttons eat their own whitespace and nothing else moves. */ #nav .nav-right .nav-cta{ padding:8.5px 10px; margin:-4px -2px; } /* Round 6: "a little more space between the 2" - the growth had thinned the pair's visual gap to 4.8px; widening the container gap restores an 8.8px beat. nav-right is right-anchored, so MAP slides LEFT into blank space - Guest Support and everything else hold position. */ #nav .nav-right{ gap:12.8px; } /* (first cut grew 5px/side horizontally and the pair's 8.8px gap went to -1.2 - they touched. The blank space around this pair is mostly ABOVE, BELOW and OUTSIDE it, so the growth goes there: +8 tall, +4 wide, inter-button gap keeps 4.8px of air.) */ /* .fc-main in the chain: the dictated 1.05em rule carries it and outguns a shorter selector */ /* 3. "29 Properties as low as.. should move up to same line as dates and guest boxes but sit above the a/c and hot tub chips in the open space." Row 2 is the fields row; right-justified lands it over the A/C + HOT TUB chip zone. Same-cell overlap with the datecell is safe by geometry: fields end ~405px at 820, the count is right-aligned - they cannot meet anywhere in this band. */ /* .has-dates is HARDCODED on the bar since the date-first redesign (the fields always show), so the dictated has-dates rules govern every state and their 0,3,0 specificity beat the bare-class first cut of this rule on grid-row while its other properties survived - a half-applied rule, the same tell as the engine-base grid override. Match the specificity. */ .filter-bar.has-dates .filter-count{ grid-row:1; grid-column:1; justify-self:end; align-self:center; text-align:right; } /* Round 2 (Elec: "still odd spacing.. shrunk to match the space between the 2 amenities rows.. logo grouping should also move down.. map and guest support buttons.. the same amount. basically shrinking the padding all around"). MEASURED CAUSE of the odd gap: fields sat in row 2 and chips in row 4, so the EMPTY implicit rows (1 and 3, 0px tall) each still charged a row-gap - fields-to-chips ran 21.6px against the amenity rows' 8.8. Rows collapse to [fields+count | chips], one gap, sized to the chips' own 0.55rem rhythm; the nav content takes a lower seat by the same beat. */ .filter-bar.has-dates .fb-datecell{ grid-row:1; } .filter-bar.has-dates .fb-chips{ grid-row:2; } .filter-bar.has-dates{ row-gap:0.55rem; padding-top:0.5rem; padding-bottom:0.55rem; } #nav{ padding-top:1.3rem; } /* The residual double-gap (17.6 vs 8.8) was the two-line count making row 1 taller than the 32px fields - the slack below the fields read as spacing. One line ("29 properties - as low as $X/night") sizes the row to the fields and the rhythm lands exactly on the chips' 0.55rem beat. */ .filter-bar.has-dates .filter-count .fc-main, .filter-bar.has-dates .filter-count .fc-low{ display:inline; margin-top:0; } .filter-bar.has-dates .filter-count .fc-low{ margin-left:0.6rem; } /* 4. "then bottom of header can pull up closer to the bottom of the lower row of chips" - row 5 is vacated by item 3; the 68px of dead space below the last chip row becomes a tight, even foot. */ .filter-bar{ padding-bottom:1.1rem; } } /* ══════════════════════════════════════════════════════════════════════════ THE POPOVERS — 701–767 only, and this block is smaller than it started ⛑ MY FIRST VERSION OF THIS BROKE BOTH POPOVERS, and the lesson is the useful part: `browse-datepicker.css` (<=700) and `browse-guests.css` (<=768) ALREADY turn their flyouts into CENTRED FIXED MODALS — `position:fixed; left:50%; top:50%; transform:translate(-50%,-50%)`. I wrote `left:0; right:0; width:auto` over them without checking, which left the -50% transform in place with nothing to centre against: the guests pane landed at left -165px, half of it off the screen. Measured, not noticed by eye. ⇒ The only thing genuinely missing was the 701–767 gap, where the date picker was still the desktop flyout while the phone rules had already begun. So this EXTENDS the existing treatment to the phone ceiling rather than inventing a second one — same declarations, same animation, one breakpoint wider. ══════════════════════════════════════════════════════════════════════════ */ @media (min-width:701px) and (max-width:767.98px){ .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); } .dr-cols{ display:block; } .dr-cal{ width:100%; } } /* ══════════════════════════════════════════════════════════════════════════ B2 · THE WORDMARK — phones only (<=767) It measured 315px: 75% of a 390px screen, before a guest saw anything else. Fluid rather than a fixed step, so it keeps shrinking on a 320px phone instead of falling off a breakpoint. The -16px pull is scaled with the type; at this size the original would drag the wordmark into the logo mark. Left at full size on tablets — 38% of an 820px screen is not the problem. ══════════════════════════════════════════════════════════════════════════ */ @media (max-width:767.98px){ .nav-logo strong{ font-size:clamp(1.35rem, 5.2vw, 1.85rem); } .nav-logo span { font-size:clamp(1.5rem, 5.8vw, 2.05rem); } .nav-logo strong, .nav-logo span{ left:-6px; } /* ⛑ `left:0` is the fix for a defect the screenshots caught and the measurements did not: engine-base pulls the mark `left:-21px` to tighten the desktop gap, which at this size dragged it clean off the left edge — the logo was CLIPPED in half on every phone screen. I scaled the wordmark and left the mark's pull behind. ★ Numbers that are tuned together have to move together. */ /* ⚠ `.nav-logo .nav-mark` (0,2,0) — a bare `.nav-mark` (0,1,0) LOSES to engine-base's `.nav-logo .nav-mark`, which is where the -21px lives. The first attempt at this fix wrote the bare class and moved the mark from -21 to… -21. Measured again afterwards: still clipped at -8. Second time this exact specificity trap has bitten in this file. */ .nav-logo .nav-mark{ width:26px; height:26px; margin-right:1rem; /* Elec: 1.15 was "a little too much, only back like 20%" -> 0.35 + 0.8*(1.15-0.35) = 0.99 ~ 1rem. Real gap knob - the later bare .nav-mark rule was outranked by this one */ left:0; /* the +18% desktop scale spills a 26px mark past the 4vw gutter, so the mark sits at its own size here and keeps the breath animation */ transform:none; } } /* ══════════════════════════════════════════════════════════════════════════ THE "AS LOW AS" LINE — below the laptop band it must sit IN FLOW `.fc-low` is `position:absolute; top:100%` on `.filter-count`, so it hangs BELOW its parent. At >=1280 that is fine — there is room under the count. In every narrower band the count is the bar's last row, so the hanging line lands ON the bar's gold rule and reads as a collision. Visible in the 1200 and 390 screenshots; it is the "price line collides with the gold rule" item from the 08-16 audit, still alive in the narrow bands. Scoped to <=1279.98 so the approved three-pane layout keeps its own treatment. ══════════════════════════════════════════════════════════════════════════ */ @media (max-width:1279.98px){ .filter-bar .filter-count .fc-low{ position:static; display:block; margin-top:0.2rem; text-align:inherit; } } /* ══════════════════════════════════════════════════════════════════════════ C · ONE QUESTION PER SCREEN (phones, <=767) — Elec's chosen shape: "Dates first on their own screen, then the matching homes, then the property and its price. Each screen asks one thing and leads to the next." Three screens, and every one of them ALREADY EXISTS: 1 DATES — #detailPanel's centre calendar (.cd-wrap). browse.js renders it whenever no dates are set, at every width; on a phone it was simply display:none. Here it becomes the whole screen. 2 HOMES — the list, with the filter bar as its summary: the date field reads back the chosen range, the count reads "11 properties available Aug 19 – Aug 22". No second summary bar is invented. 3 PROPERTY — the existing /stay/ page the cards already link to. Bookings and checkout are done and are not touched. State comes from `body.sh-step-dates` / `.sh-step-results`, set by engine-flow.js off browse.js's OWN `body.dates-set` class. ══════════════════════════════════════════════════════════════════════════ */ @media (max-width:767.98px){ /* ── SCREEN 1 · DATES ─────────────────────────────────────────────────── */ body.sh-flow.sh-step-dates .browse-section{ display:none; } body.sh-flow.sh-step-dates .browse-detail{ display:block; grid-column:1 / -1; padding:0.2rem 4vw 1rem; /* 2026-09-21 (full-audit finding 2, CLS 0.909): the panel is EMPTY in the served HTML and browse.js fills it with the dates splash after the deferred scripts run. Reserving the viewport keeps the skip link / footer below from jumping up then down; the splash is taller than a phone screen anyway, so nothing visible changes once it renders. */ min-height:100vh; } /* Everything that belongs to the RESULTS question is silent while the dates question is on screen — that is the whole point of the shape. */ body.sh-flow.sh-step-dates .fb-chips, body.sh-flow.sh-step-dates .filter-count, body.sh-flow.sh-step-dates .map-toggle, body.sh-flow.sh-step-dates .engine-footer{ display:none; } /* The guests field stays: it is part of the same question as the dates. */ /* Two months side by side is a desktop shape — .cd-cols is a flex row with .dr-cal at min(330px,46%), which on a 390px screen leaves each month about 165px wide. Stacked, each month gets the full width and the page scrolls; both arrows survive, which a "hide the second month" fix would not (prev lives in month 1, next in month 2). */ body.sh-flow.sh-step-dates .cd-cols{ flex-direction:column; gap:1.5rem; } body.sh-flow.sh-step-dates .cd-wrap .dr-cal{ width:100%; } body.sh-flow.sh-step-dates .cd-wrap{ height:auto; } body.sh-flow.sh-step-dates .cd-title{ font-size:1.9rem; } body.sh-flow.sh-step-dates .cd-sub{ font-size:0.92rem; margin-bottom:1.1rem; } /* Calendar cells get the tap-target treatment here specifically: on this screen they are the ONLY thing being asked for, so they can afford it. */ body.sh-flow.sh-step-dates .cd-wrap .dr-cell{ min-height:var(--sh-touch); font-size:1rem; } /* The way past the question, for a guest who does not have dates yet. Placed after the split rather than inside the panel because browse.js rewrites the panel's innerHTML on every render — see the note in engine-flow.js. */ body.sh-flow.sh-step-dates .sh-flow-skip{ display:block; text-align:center; padding:0.2rem 4vw 2rem; } .sh-skip-btn{ display:inline-flex; align-items:center; gap:0.5rem; min-height:var(--sh-touch); padding:0.6rem 1.5rem; background:transparent; color:var(--parchment); border:1px solid var(--gold-line); border-radius:999px; font-family:var(--body); font-size:0.78rem; font-weight:600; letter-spacing:0.09em; text-transform:uppercase; cursor:pointer; transition:border-color 0.18s, background 0.18s; } .sh-skip-btn:hover, .sh-skip-btn:focus-visible{ border-color:var(--gold); background:rgba(201,169,110,0.10); } .sh-skip-arrow{ transition:transform 0.18s; } .sh-skip-btn:hover .sh-skip-arrow{ transform:translateX(3px); } .sh-skip-note{ margin:0.6rem 0 0; font-size:0.72rem; color:var(--sage); letter-spacing:0.04em; } /* ── SCREEN 2 · HOMES ─────────────────────────────────────────────────── */ /* The panel goes back to being absent, so the list owns the screen. ⚑ :not(.bd-open) added 2026-08-24: the detail overlay now reaches the phone (Elec: activate the same fade-over here), and this display:none — at (0,3,1) — outranked every overlay rule, so the modal opened invisible. While the overlay is up the panel is the modal; closed, it is absent again, exactly as before. */ body.sh-flow.sh-step-results:not(.bd-open) .browse-detail{ display:none; } } /* ══════════════════════════════════════════════════════════════════════════ Z · SHORT-VIEWPORT VALVE The >=1280 layout locks the page to the viewport (html,body overflow:hidden). That is right on a desktop and wrong the moment the viewport is short — a laptop at 150% browser zoom, or a phone held sideways — because content then has nowhere to go and is simply unreachable. The lock's condition now carries `and (min-height:620px)` (engine-layout.css). This block is what the page falls back to when it does not: normal flow, normal scrolling, panes stacked, map behind the button. ⚠ HONEST LIMIT: this catches browser zoom (which shrinks the CSS viewport) and short screens. It does NOT catch text-only scaling, which changes font size without changing the viewport. That case is unmeasured — see the plan. ══════════════════════════════════════════════════════════════════════════ */ @media (min-width:1280px) and (max-height:619.98px){ .browse-split{ display:grid; grid-template-columns:minmax(0,44%) minmax(0,56%); align-items:start; } /* Same specificity note as the laptop band above — a bare class loses to `section:not(.page-hero)` in site-footer-forms.css. */ .browse-split .browse-section, .browse-split .browse-detail{ position:static; top:auto; height:auto; max-height:none; overflow:visible; } .browse-detail{ display:block; min-height:70vh; } .browse-map-panel{ display:none; } .map-toggle{ display:block; } /* ⛑ THE HEADER SLID OVER THE NAV (Elec 2026-08-24, screenshots: the dated count striking through ghosted MAP / GUEST SUPPORT while scrolling). Reproduced at 1643x560: this valve releases the viewport lock so the page scrolls — but the desktop bar is position:relative at z101, ABOVE the sticky nav's z100, so mid-scroll it painted OVER the translucent nav. Same treatment the narrow bands already have: the bar sticks to the nav's measured bottom and sits BELOW it in z, so the two travel as one block — his standing ruling ("locked together, header should never move"). ⚠ The !importants are not optional: the desktop dated rule (engine-layout.css ~403, `.filter-bar.has-dates{ position:relative; top:0 !important; z-index:101 }`) carries its own !important and won the first round of this fix — measured: sticky applied, top stayed 0. They are scoped to THIS valve media only; the locked desktop keeps its rule. */ .filter-bar, .filter-bar.has-dates{ position:sticky !important; top:var(--sh-nav-h, 62px) !important; z-index:50 !important; } } /* ══════════════════════════════════════════════════════════════════════════ SCREEN-1 CORRECTIONS (Elec 2026-08-19, dictated per screen — his list, verbatim targets, in his order): · "× All dates" above the date box, right-justified to the box edge · no hamburger — Guest Support on the logo line, right, scaling to fit · count + "as low as" above the guests box, under the support button · the guest-support pop-out restyled (centred sheet on phones) · less padding logo↔Stay-dates and Stay-dates↔date-box · amenity chips wrap to as many lines as needed, scaling to help ══════════════════════════════════════════════════════════════════════════ */ /* No hamburger anywhere the nav collapses (≤1200): on this page the collapsed menu held ONE item — Guest Support — a door in front of a single button. The button itself takes the logo line, right side, and may shrink. */ @media (max-width:1200px){ /* NO HAMBURGER on the engine (Elec 2026-08-19): the collapsed nav held ONE item - Guest Support - a door in front of a single button. The button takes the logo line, right side, tight to its text (his ruling), and the 44px floor is released on it or the padding cannot bite. */ .nav-hamburger, .nav-menu-wrap{ display:none !important; } .nav-links{ display:-webkit-flex; display:flex !important; } #gsBtn.nav-cta, #mapToggle.nav-cta{ font-size:clamp(0.56rem, 1.8vw, 0.72rem); padding:0.28rem 0.5rem; white-space:nowrap; min-height:0; } .nav-instagram{ border-right:none; padding-right:0; } } /* MAP BUTTON IN THE HEADER (Elec 2026-08-19): left of Guest Support, same style and effect. The old bottom-pill declarations (fixed, gold fill, centring transform) are neutralised for the in-nav placement; the nav-cta class supplies the shared chip look and hover. Ember beats in time with the rest via the same keyframes when the map is open. */ .nav-right{ -webkit-align-items:center; align-items:center; gap:0.55rem; } /* Elec: "should be aligned in row with guest support button" - measured 2.8px off: gsBtn lives inside ul.nav-links > li, whose own box rode lower than the bare Map button. Flatten the list chrome so both buttons centre on the same axis. */ .nav-right .nav-links{ margin:0; padding:0; -webkit-align-items:center; align-items:center; } .nav-right .nav-links li.gs-wrap{ display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; } .nav-right .map-toggle{ position:static; transform:none; left:auto; bottom:auto; box-shadow:none; } /* look + hover come from the SHARED #gsBtn/#mapToggle rule in engine-surface.css (Elec: "match guest support. back ground and hover") */ .nav-right .map-toggle:hover{ transform:none; } body.map-open .nav-right .map-toggle{ animation:chipEmber 2.6s ease-in-out infinite; } /* ========================================================================== MOBILE COMPACTION (<=767.98) - Elec's dictated pass, 2026-08-19, one correction at a time over ~30 rounds, consolidated the same night on his instruction: "take those ideas through all aspects of mobile.. reaudit to collect all changes into callable aspects, reducing any redundancy." THE GRAMMAR (his rulings, applied everywhere below): - block paddings and row gaps give back what the desktop look spent - touch floors (44px) are RELEASED on decorative/secondary controls, kept on money-path and date-picking controls (his "they wont be able to click correct dates that small" ruling bounds the release) - type scales with the viewport (clamp + vw) instead of wrapping - one-line rules: nowrap + scale, never mid-phrase wraps CALLABLE TOKENS below; values used once stay literal on purpose. OFF-LIMITS: the detail-deck tab row (Elec closed it after a reverted night - only his exact coordinates reopen it), booking-pane steppers/CTA. ========================================================================== */ @media (max-width:767.98px){ :root{ --mb-arrow:32px; /* calendar arrow circles, both calendars */ --mb-type-micro:clamp(0.42rem, 2.3vw, 0.56rem); /* count + as-low-as lines */ --mb-type-chip:clamp(0.5rem, 2.1vw, 0.58rem); /* amenity chips */ --mb-type-field:clamp(0.52rem, 2.2vw, 0.62rem); /* date + guests fields */ } /* -- HEADER: two columns mirroring the date|guests split; label row over the date box ("x All dates" right-justified to the box edge), count over the guests box under the support button. The datecell dissolves (display:contents) so its fields sit on the same tracks - alignment by construction. Every margin here is a specific Elec ruling. */ nav{ padding-block:0.25rem; } .filter-bar.has-dates{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:0.5rem; row-gap:0.22rem; padding:0.1rem 4vw 0.4rem; } .filter-bar.has-dates .fb-datelabelrow{ grid-column:1; grid-row:1; width:100%; align-self:end; margin:0 0 -0.3rem; } .filter-bar.has-dates .date-clear{ padding:0.05rem 0.3rem; min-height:0; line-height:1.1; } .filter-bar.has-dates .fb-datelabel{ line-height:1.1; } .filter-bar.has-dates .filter-count{ grid-column:2; grid-row:1; text-align:right; align-self:end; margin:0; min-width:0; overflow:visible; } .filter-bar.has-dates .filter-count .fc-main, .filter-bar.has-dates .filter-count .fc-low{ white-space:nowrap; font-size:var(--mb-type-micro); line-height:1.05; } .filter-bar.has-dates .filter-count .fc-low{ margin-top:0; } .filter-bar.has-dates .fb-datecell{ display:contents; } .filter-bar.has-dates .dr-wrap{ grid-column:1; grid-row:2; min-width:0; } .filter-bar.has-dates .gp-wrap{ grid-column:2; grid-row:2; min-width:0; } .filter-bar.has-dates .date-msg{ grid-column:1 / -1; grid-row:3; } .filter-bar.has-dates .date-msg:empty{ display:none; } /* an empty row paid the gap twice */ .filter-bar.has-dates .fb-labelrow{ display:none; } /* -- FIELDS: same caps grammar as the chips; floors released (the 38px min-height WAS the "growth" he kept seeing). */ .filter-bar.has-dates .date-field, .filter-bar.has-dates .gp-field{ text-transform:uppercase; letter-spacing:0.09em; font-weight:600; font-size:var(--mb-type-field); padding-block:0.24rem; min-height:0; } /* -- CHIPS (phone part): grid placement + text-hugging size. The 4-per-row LAW itself is unconditional - see the rule after this media block. */ .filter-bar.has-dates .fb-chips{ grid-column:1 / -1; grid-row:4; } .filter-bar.has-dates .fb-chips .filter-btn{ width:100%; min-width:0; text-align:center; white-space:nowrap; font-size:var(--mb-type-chip); padding:0.18rem 0.15rem; min-height:0; } /* -- CALENDAR (screen 1): ONE month per screen, both arrows around it (Elec's final ruling after a both-months experiment). The second month collapses to just its next-arrow, seated top-right. Day cells keep their touch size - his explicit bound on the compaction. */ body.sh-flow.sh-step-dates .cd-cols{ position:relative; } body.sh-flow.sh-step-dates .cd-cols .dr-cal:nth-child(2){ position:absolute; top:0; right:0; width:auto; } body.sh-flow.sh-step-dates .cd-cols .dr-cal:nth-child(2) .dr-dow, body.sh-flow.sh-step-dates .cd-cols .dr-cal:nth-child(2) .dr-grid, body.sh-flow.sh-step-dates .cd-cols .dr-cal:nth-child(2) .cd-arrow-spacer{ display:none; } /* ⛑ ARROW SYMMETRY (Elec 2026-08-24: "the left and right arrows that change months on the calendar are not symetrical. they should match"). Measured: prev y317, next y310 — a 7px offset, because the LEFT arrow centres in month 1's 46px title row while the RIGHT arrow's collapsed row (its title was display:none) shrank to the arrow's own 32px. The second month's title now stays IN the row — invisible, zero width — so both rows take their height from the same text line and both arrows centre on the same axis BY CONSTRUCTION (the same geometry cannot drift). */ body.sh-flow.sh-step-dates .cd-cols .dr-cal:nth-child(2) .dr-month{ visibility:hidden; width:0; min-width:0; max-width:0; padding:0; margin-inline:0; overflow:hidden; white-space:nowrap; } /* margin-INLINE only: the base .dr-month margin-bottom (9.6px) is part of what sizes month 1's row to 46px — zeroing it here left this row 36px and the right arrow 5px high (measured). Block margins stay shared. */ body.sh-flow.sh-step-dates .cd-sub{ margin-bottom:0.5rem; } body.sh-flow.sh-step-dates .cd-monthrow{ margin-bottom:0.15rem; } body.sh-flow.sh-step-dates .dr-dow{ margin-bottom:0.1rem; } body.sh-flow.sh-step-dates .dr-grid{ row-gap:0.12rem; } body.sh-flow.sh-step-dates #cdHint, body.sh-flow.sh-step-dates .dr-hint{ margin-top:0.35rem; } #detailPanel .cd-sub{ white-space:nowrap; font-size:clamp(0.55rem, 2.3vw, 0.85rem); } .cd-arrow, .cd-arrow.dr-arrow{ min-width:var(--mb-arrow); min-height:var(--mb-arrow); width:2rem; height:2rem; } /* -- POP-OUTS: the date pop anchors from the top (centred, it was taller than the screen and its top half hung above it) and scrolls in itself; the guest-support pop is a centred sheet; both lose spare padding. */ .dr-pop{ top:4vh; transform:translateX(-50%); max-height:92vh; overflow-y:auto; padding:0.8rem 0.9rem 0.7rem; animation:drInTop 0.42s cubic-bezier(0.34,1.56,0.64,1); } @keyframes drInTop { from { opacity:0; transform:translateX(-50%) translateY(14px) scale(0.94); } to { opacity:1; transform:translateX(-50%); } } .gp-pop{ padding:0.7rem 0.85rem; /* Elec 2026-08-25: "the guest box popup is too high on load" — measured opening at y6, OVER the nav: the base ≤768 centring rule's translate(-50%,-50%) survived while its top:50% lost, so the pane rode half its height above whatever top won. Anchored like the date pop: just under the measured header, translateX only. */ top:calc(var(--sh-nav-h, 41px) + 14px); transform:translateX(-50%); } /* (the #gpPet checkbox restyle lived here phone-scoped for one round — Elec pushed it to every band: "that one can go everywhere... the check box color". It now sits unscoped after this media block.) */ .gs-pop{ left:50% !important; right:auto !important; transform:translateX(-50%); width:min(94vw, 26rem); padding:0.75rem 0.9rem 0.7rem; } /* -- LIST: narrower cards, tight stack (his measured complaints), and the same grammar carried INTO the card + pagination (the "take those ideas through all aspects" extension - card interior was still desktop-padded). */ .browse-section{ padding-top:0.6rem; padding-inline:6.5vw; padding-bottom:3rem; } #propGrid{ gap:0.9rem; } .prop-card .card-body{ padding:0.85rem 1rem 0.95rem; } .prop-card .card-location-row{ margin-bottom:0.25rem; } .prop-card .card-meta{ gap:0.55rem; margin-bottom:0.4rem; } .pagination{ padding:1rem 4vw 2.4rem; } /* -- FOOTER: same compaction grammar; floors released on signup + legal. */ footer{ padding:1.4rem 5vw 0.9rem; } .footer-grid{ margin-bottom:1.2rem; gap:1rem; } .footer-brand .nav-logo{ margin-bottom:0.7rem; } .footer-contact > div{ line-height:1.45; } .footer-signup{ margin-bottom:0.9rem; padding-bottom:0.9rem; } .footer-signup-eyebrow, .footer-signup-text{ margin-bottom:0.2rem; } .footer-signup-note{ margin-bottom:0.6rem !important; } /* inline style on the note */ .footer-signup-input, .footer-signup-btn{ min-height:0; padding-block:0.42rem; } .footer-bottom{ padding-top:0.9rem; gap:0.5rem; } .footer-legal a{ min-height:0; padding-block:0.15rem; } } /* Pop-out calendar arrows: small circles on every coarse pointer (Elec) - wider scope than the phone block because tablets get the same pop-out. */ @media (max-width:1024.98px), (pointer:coarse){ .dr-pop .dr-arrow{ min-width:32px; min-height:32px; width:2rem; height:2rem; } } /* (Logo-gap knob: the .nav-logo .nav-mark rule in the phone band above - 1rem, Elec-tuned. One knob; a duplicate bare .nav-mark rule was removed after it was found silently outranked.) */ /* Elec 2026-08-19: "the amenities filter list of chips should ALWAYS break evenly with 4 chips per row" - the 4-column grid is the law at EVERY width now (it was phone-only; tablets scrolled one long row, desktop wrapped freely). Equal columns by construction; each band keeps its own chip type/padding. Overrides the <=1024 scroll-row treatment by later order. */ .filter-bar.has-dates .fb-chips{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:0.3rem 0.4rem; overflow-x:visible; } .filter-bar.has-dates .fb-chips .filter-btn{ width:100%; min-width:0; text-align:center; } /* Elec 2026-08-19: "on TABLET the chips are crowded, add more gap between them" - tablet band only; phone keeps its tight 0.3/0.4. */ @media (min-width:768px) and (max-width:1024.98px){ .filter-bar.has-dates .fb-chips{ gap:0.55rem 0.8rem; } } /* Elec 2026-08-19: "Date and Guest input boxes should ALWAYS have matching text font and style as all cap text used in other header boxes" - the caps grammar goes unconditional (it was phone-only). Sizes stay per-band: the phone block's clamp() still wins there (it sets font-size inside its own media); wider bands take the chips' 0.78rem. */ .filter-bar .date-field, .filter-bar .gp-field{ text-transform:uppercase; letter-spacing:0.09em; font-weight:600; font-family:var(--body); } @media (min-width:768px){ .filter-bar .date-field, .filter-bar .gp-field{ font-size:0.78rem; } } /* Elec 2026-08-19: "all chips and boxes in header should have tighter internal padding with out floor from PANEL width down." Scoped 768-1279.98 (tablet + panel) - the phone band below already has its own tighter set and must keep winning there. Floors released, paddings hug the 0.78rem type. */ @media (min-width:768px) and (max-width:1279.98px){ .filter-bar .filter-btn{ min-height:0; padding:0.3rem 0.7rem; } .filter-bar .date-field, .filter-bar .gp-field{ min-height:0; padding-block:0.3rem; /* Elec: "tighter horizontal padding for dates and guests boxes" */ padding-inline:0.45rem; } .filter-bar .date-clear{ min-height:0; padding:0.1rem 0.35rem; } /* Elec: "...where they both together take up half width across page starting from the left" - the pair's container stops at 50%. */ .filter-bar .fb-datecell{ width:50%; max-width:50%; } } /* Elec 2026-08-19: "shift logo grouping.. to the right.. starting point lines up with starting point of items below." The group's LAYOUT was already aligned to the 4vw column - what pokes left is the logo-breath transform (scale 1.30 about the centre) overflowing the mark 26px past its box. Anchoring the scale to the LEFT edge pins the visual starting point to the column; the breath grows rightward into the (Elec-widened) gap instead. Unconditional: the same overflow existed at every band, desktop included. */ .nav-logo .nav-mark{ transform-origin:left center; } /* ...and the second and larger poke: engine-base pins the mark left:-21px (a desktop-era placement ruling, kept THERE). From panel down the group starts at the column: offset zeroed. Phone already carries left:0 in its own band. */ @media (min-width:768px) and (max-width:1279.98px){ .nav-logo .nav-mark{ left:0; } /* ⛑ 2026-08-23, Elec's width sweep: the PANEL band (1025-1279) showed the wordmark 11.2px over the mark - the mark's -21 was zeroed here but the text's -16 was zeroed only in the tablet block (768-1024.98). The pair moves together (the recorded 08-21 lesson, third occurrence): both zero across the same range. Tablet's own left:0 remains, harmlessly. */ .nav-logo strong, .nav-logo span{ left:0; } } /* Elec 2026-08-19 (top-down sweep, called at his live width 1558): "the left list column should stop scaling down width and start scaling down from center column instead." The desktop grid is percentage-based (26% / 42% / 32%), so ALL THREE panes shrank together. From 1558 down through the desktop floor, the list holds the 405px it had at the call width and the CENTRE absorbs the shrink; the map keeps its 32% share. (405px = 26% of 1558, measured on his screen, not derived.) */ @media (min-width:1280px) and (max-width:1558.98px){ .browse-split{ grid-template-columns:405px minmax(0,1fr) minmax(0,32%); } /* (2026-08-20: a track re-coupling to the frozen columns lived here for two rounds and was REVERTED - centring the chips over the shrinking centre column also NARROWED their track, compressing the pills until text overflowed ("didnt say to scale backgrounds down") and skewing the rows. The chips-vs-column offset needs Elec's pick of trade-off.) */ } /* (an orphaned brace + comment fragment sat here 2026-08-20 - remnants of a stripped rule whose real home is the file-end settled block; removed in the structural repair. This orphan silently killed parsing of later rules.) */ /* Elec 2026-08-20: "bottom of amenities lower row of chips should line up with the bottom of the dates and guest boxes" - measured 3.0px high at 1282 (chips 125.8 vs fields 128.8), a constant from the rows' paddings. */ /* (chip-bottom seat also reverted with the recoupling - remeasure on the settled build) */ /* Elec 2026-08-20: "move the chips group to the right so that it evenly overlaps on both sides the center column." TRANSLATE, not track surgery (the reverted re-coupling proved narrowing the track shrinks the pills): the block keeps its full size and slides so its centre sits on the centre column's centre, overhanging evenly. Math: column centre = (405px + 68vw)/2; track centre = 26vw + 21vw; shift = 202.5px - 13vw. Converges to 0 at 1558 where the freeze meets the base 26% - so no jump at the band edge. */ @media (min-width:1280px) and (max-width:1558.98px){ .filter-bar.has-dates .fb-chips, .filter-bar.has-dates .fb-labelrow{ transform:translateX(calc(202.5px - 13vw)); } /* Elec 2026-08-20: "date and guest boxes, along with stay dates and xAll dates should center of left column" - same drift class as the chips: the group centres on the 26vw track, the frozen column is 405px. Same converging shift: real centre 202.5px minus var centre 13vw. */ .filter-bar.has-dates .fb-datelabelrow, .filter-bar.has-dates .fb-datecell{ transform:translateX(calc(202.5px - 13vw)); } } /* -- DESKTOP 1280-1399.98 - hero-calendar month row crunch (2026-08-20 ~23:1x, found by the post-repair screenshot pass at 1282; Elec's "go for all"). MEASURED, not guessed: .cd-monthrow is flex space-between [arrow|title|spacer]. At 1282 September's row is over-full (spacer 28.2 + title 127.9 + arrow 28.5 = 184.6 = row width exactly), so flex SQUASHED the arrow circles 35.2 -> 28.4 and the gaps hit 0 - a clipped circle and text collision (design law: curves are geometry, not layout slack; TYPE is what scales). One knob each way: circles may never shrink; the month title scales 17.6px @1280 and converges to its base 21.6px at 1400 - no jump at either edge (verified: title space per row at 1280 is ~114px, scaled title ~104px, ~5px air each side). */ @media (min-width:1280px) and (max-width:1399.98px){ .cd-monthrow .cd-arrow, .cd-monthrow .cd-arrow-spacer{ flex-shrink:0; } .cd-monthrow .dr-month{ font-size:clamp(17.6px, calc(17.6px + (100vw - 1280px) * 0.0334), 21.6px); } } /* (orphan brace lived here 2026-08-20 ~02-03h - it silently killed every rule after it in this stretch and caused the night's "silently outranked" hunts) */ /* ══ DESKTOP HEADER, SETTLED (2026-08-20, after a night of experiments Elec judged "blocky.. your aesthetic suffers"): the ORIGINAL interleaved design (engine-layout's lift) is the aesthetic - it stays. Tonight's real defects on it were only ever X-DRIFT from the list-column freeze, plus two of his direct asks. Surgical fixes only: - chips + labels + fields re-centred over the FROZEN columns (the two translate blocks above, converging to zero at 1558) - logo group centred over the left column - IN FLOW (the absolute version put Guest Support on top of the wordmark) - instagram tucked to the wordmark at the selector that actually wins */ @media (min-width:1280px){ /* the nav's own 4vw left padding shifted the centering box 38px right of the column - pull the box back to true x0 so centre = column centre */ .nav-left{ -webkit-flex:0 0 26vw; flex:0 0 26vw; margin-left:-4vw; -webkit-justify-content:center; justify-content:center; } .nav-right{ margin-left:auto; } /* fourth attempt on this gap - every unforced margin lost to a rule the CSSOM would not even show (nested serialization). !important, measured after: computed must read -14px or this line is a lie. */ .logo-ig .nav-ig-sup{ margin-left:-14px !important; } } @media (min-width:1280px) and (max-width:1558.98px){ .nav-left{ -webkit-flex-basis:405px; flex-basis:405px; } } /* ══ THE HEADER, FROM ELEC'S OWN SYSTEM (2026-08-20 ~03:0x) ══ Derived, not asked: months of his rulings say labels HUG their stacks (x-All-dates on the box edge, count "tightly above", "less padding" twice), the ONE shared line is the BOTTOM (his "chips flush with boxes" call), and flow comes from stacks of different heights rising off that baseline - the interleave, organically. No label-to-label alignment anywhere. */ @media (min-width:1280px){ /* 2026-08-23, Elec: "the vertical space between logo group and stay dates could be minimized, the empty space above chips also minimized, also the space between guest support button and homes available lines minimized." The columns TOP-anchor now - everything rides up to the nav line. This replaces the baseline-flush look (align-self:end + the 30px label drop) that previously bottom-anchored the short stacks to the chips. */ /* Elec 2026-08-23: "now move the chips all up a row" - the amenities group rises one chip-row (~37px): the label rides into the nav band's empty centre, chip row 1 lands level with the other labels, chip row 2 lands flush with the boxes' bottom line, and the bar shrinks by what the chips no longer occupy. Negative margin so the rows genuinely recharge. */ .filter-bar.has-dates .fb-labelrow{ margin-top:-37px; align-self:start; margin-bottom:0.3rem; } .filter-bar.has-dates .fb-chips{ margin-top:-37px; align-self:start; } .filter-bar.has-dates .fb-datecell{ align-self:start; } .filter-bar.has-dates .fb-datelabelrow{ align-self:start; margin-bottom:0.3rem; transform:translateX(calc(202.5px - 13vw)); } /* count block: top-anchored under Guest Support; the fixed-height box keeps zero-push, content hangs from the top (see engine-surface foot). */ .filter-bar.has-dates .filter-count{ grid-row:1 / 3; align-self:start; text-align:right; margin-right:4vw; } /* grid-row 2 -> 1/3: the count block's cell now starts at the bar's top, so its first line sits just under Guest Support instead of hanging at the second row (measured 47px gap; Elec's red-marker zone). */ .filter-bar .filter-count .fc-low{ position:static; display:block; margin-top:0.15rem; } } @media (min-width:1559px){ /* above the freeze the columns match the tracks - no X shift */ .filter-bar.has-dates .fb-datelabelrow{ transform:none; } } /* ══════════════════════════════════════════════════════════════════════════ THE BOOK/DETAILS MODAL OVERLAY — TABLET *AND* PANEL (768–1279.98) Elec 2026-08-23: "extend the overlay so that the modal is used.. linking to stay page from the modal footer is fine and intended." ⚑ EXTRACTED from the panel block into its own band deliberately: that block also carries panel-ONLY layout (the 50vw split, the header restructure) which must never reach the LOCKED tablet header. Only the overlay travels. ~~Below 768 the phone keeps its staged sh-flow, where screen 3 IS the /stay page — so the overlay stops at the tablet floor.~~ ⚑ FLOOR REMOVED 2026-08-24 (Elec: "its the same method used on wider views should just activate it to the narrower widths") — the phone keeps screens 1–2 of the sh-flow, and a card/pin tap on screen 2 now fades this same modal up instead of navigating. The base presentation is scoped :not(.sh-step-dates) because on the PHONE DATES STEP #detailPanel is the centre calendar itself — fixing/hiding it there would blank screen 1. The modal's own footer link ("See the full property details →") goes to /stay/, which is the intended route out, not a fallback. ══════════════════════════════════════════════════════════════════════════ */ @media (max-width:1279.98px){ /* ══ THE BOOK/DETAILS MODAL AS A FADE-UP OVERLAY (Elec 2026-08-23: "when a property card is clicked the book/details modal should fade up and cover the body of the page. centered about list and map and below the header. there should be a X style close button added to the modal to fade it back out and allow list and map to be active again.") ⚑ HIS EFFICIENCY QUESTION, ANSWERED BY REUSE: the modal is NOT rebuilt or re-mounted per open. The existing #detailPanel stays in the DOM exactly as the desktop three-pane uses it — same deck, same tabs, same quote machinery, same audited booking path — and only its PRESENTATION changes here. Nothing re-renders on open beyond the property swap that already happens (selectProperty → renderDetail), so it is both the cheapest option and the one that cannot drift from the desktop build. Sits BELOW the header (top = the measured header token), centred over the list+map body, above the map (z 60) but under the nav and every popover. */ body:not(.sh-step-dates) .browse-detail{ display:flex; align-items:center; justify-content:center; position:fixed; z-index:60; top:var(--sh-lap-header); left:0; right:0; bottom:0; height:auto; padding:1.1rem 2vw 1.4rem; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(16px); transition:opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), visibility 0s linear 0.5s; } /* the ground the modal fades up over — list and map read as "behind" */ body:not(.sh-step-dates) .browse-detail::before{ content:""; position:absolute; inset:0; background:rgba(4,20,46,0.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); } body.bd-open .browse-detail{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); transition:opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), visibility 0s; } .browse-detail .bd-modal{ position:relative; z-index:1; width:min(760px, 100%); max-height:100%; } /* X close - IN THE MODAL's rounded top corner (Elec 2026-08-25: "should be in the modal, in one of the rounded top corners. might have pull back the circle size from the surrounding layouts" - 40 -> 32 everywhere). It still cannot LIVE in the panel (renderDetail rewrites it), so browse.js re-seats the held node into .bd-modal after every render - the Tonight-strip pattern. Absolute against the modal box. */ body.bd-open .bd-exit{ display:flex; align-items:center; justify-content:center; position:absolute; top:10px; right:10px; z-index:6; width:32px; height:32px; border-radius:50%; border:1px solid var(--gold); background:rgba(5,29,64,0.85); color:var(--parchment); font-size:0.85rem; line-height:1; cursor:pointer; } body.bd-open .bd-exit:hover{ background:rgba(201,169,110,0.15); } } /* ~~TABLET ONLY: modal narrowed to 660 so the scrim-✕ had ground~~ RETIRED 2026-08-25: the ✕ lives INSIDE the modal now, so the workaround's reason is gone - tablet returns to the 760 Elec approved on the panel band. */ /* ~~DECK BANDS: ✕ below the tab row (corner occupied by BOOK NOW)~~ RETIRED 2026-08-26 within hours: Elec merged book+details on ALL layouts - no tabs anywhere, the corners are free, the ✕ owns the true top-right at every band. */ /* ⚑ PHONE (2026-08-24, the overlay's new floor): at 390 there is no side scrim for the ✕ to live in — the modal takes the width — so the ✕ keeps its top-right post and the modal starts BELOW it (top padding clears the 40px button + its 0.7rem offset). Top-anchored, not centred: a phone modal is taller than its viewport more often than not, and centring a taller-than-viewport panel hangs its head off-screen (the recorded pop-out rule, same physics). */ @media (max-width:767.98px){ body:not(.sh-step-dates) .browse-detail{ align-items:flex-start; /* Elec 2026-08-26: "minimize the space between book modal and the header above since closing X went inside modal" - the 3.4rem existed only to clear the old fixed scrim-✕. */ padding:0.9rem 2vw 0.8rem; } /* min-width:0 matters as much as the width: the deck's min-content held the modal at 397px inside a 374px container — measured overflowing the right viewport edge by 15px, totals clipped mid-digit. A flex item refuses to shrink below min-content until told. */ .browse-detail .bd-modal{ width:100%; min-width:0; max-width:100%; } /* The deck strip (the inactive pane's 69px peek) is a wide-modal luxury: at 374 it left the active pane 305px and the quote rows ran off the pane. Thinned for this band only — the deck still reads as a deck (26px of the photo peeks), and the active pane gets 348px. The 69px stays untouched from tablet up (Elec sized it there: "increase the visible strip by 50%"). */ .browse-detail .modal-body.bd-deck{ --deck-strip:26px; } /* ~~26px strip + hidden inactive-pane content~~ RETIRED same day: Elec's verdict "deck strip should go, tabs should go" - the phone modal is now the ONE-SHEET (block further down); both panes visible in one flow. */ /* RECEIPT COLUMN CAPS TO ITS PANE - phone sweep, same round: the quote's fixed 20.4rem blocks (sized on the desktop pane; applied here since the 08-24 booking-interior widening to 0) overflow the pane below ~400w - measured at 360: 12px past the VIEWPORT, the "negative margin" being auto-margins resolving -34px of free space. min() keeps the reviewed width wherever it fits and hugs the pane below. */ .browse-detail .bk-subtitle, .browse-detail .bk-reserve, .browse-detail .bk-q-total, .browse-detail .bk-inquire, .browse-detail .bk-q-dep{ width:min(20.4rem, 100%); } /* ⛑ THE DATED COUNT LINE WAS WIDENING THE WHOLE PAGE (2026-08-24, found chasing "the map was very far zoomed out"): at 390 the fc-main rendered nowrap, its range span ran to x412, the LAYOUT viewport grew to 413 — and every fixed element (the fullscreen map, the modal, the ✕) sized to 413 while the guest's glass is 390. The far-out map and the clipped modal were both downstream of this one line. The phone lets the line wrap BETWEEN its units (each .fc-v keeps nowrap so a range never splits), and the ceiling below is the belt-and-braces: nothing in the bar may widen the page, whatever the count says. */ body.dates-set .filter-bar.has-dates .filter-count .fc-main{ white-space:normal; } .filter-bar{ max-width:100vw; overflow-x:clip; } /* the UNITS stay whole while the line wraps between them — at phone the .fc-v spans computed white-space:normal and the date range split "Aug 24 –" / "Aug 26" across lines, half a unit per line */ .filter-count .fc-v{ white-space:nowrap; } /* ══ ONE-SHEET MODAL - phone (Elec 2026-08-25: "deck strip should go, tabs should go, title should be present, unsure how to integrate the pages or switch between but this way is not working"). His three calls plus my integration answer, one coherent form: the modal is ONE SCROLLING SHEET - title back in the header (the 08-24 hide REVERTED on his word, its veto flag resolved), NO tabs, booking module first (his standing ruling: selection lands on booking), a gold hairline, then the full details content below it. There is no switcher - the guest scrolls. The deck + tabs grammar is untouched from tablet up. ⛑ The 08-24 header-collapse trap stays covered: min-height 44 holds the header whether or not fitTitle has sized the title yet. */ /* ~~the one-sheet rules lived HERE, phone-scoped, for one day~~ MOVED to the unscoped ALL-BANDS block at the end of this file on Elec's 2026-08-26 ruling: "merge all book and detail pages together per property.. done with all the tabs and deck lines". Nothing phone-specific remains. */ /* ── PHONE DATED-HEADER SPACING ROUND (Elec 2026-08-24 evening, dictated on his ~517 view: "header is very tight and needs some help with spacing"). His items, in his order; all scoped to this band and the dated state. */ /* 1. "Remove xAll dates completely." ⚠ scoped to the phone band — the desktop header he approved still carries it. Consequence stated, not hidden: the phone loses its one-tap clear-dates affordance; changing dates still works through the date pill. His word governs; one line to revert. */ body.dates-set .filter-bar.has-dates .date-clear{ display:none; } /* 2→FINAL (his evolution, same round: "we can get the header state text on one line with minimal additional scaling by also removing the stay dates label. X homes DateRange as low as PRICE/night can all be one line that begins where Stay Dates use to be."). The whole label row goes (STAY DATES + the already-removed ×All dates live in it), and the count block becomes ONE flex row spanning the bar, left-anchored at the old label's x. This also retires the two intermediate count forms this round tried (bottom-anchored stack, then absolute right-anchor) — one in-flow row has none of their overflow physics. First variable stays gold + larger; the $ keeps its gold size from the standing fc-amt rule. */ body.dates-set .filter-bar.has-dates .fb-datelabelrow{ display:none; } /* ~~!important after a measured loss: source unhunted~~ RESOLVED 2026-08-26: the rival was the B2 :has() resurrection rule ((0,5,1) via :has()'s argument specificity), deleted above as dead code once x All dates was retired. Plain display:none wins uncontested now. */ body.dates-set .filter-bar.has-dates .filter-count, body:not(.dates-set) .filter-bar .filter-count{ grid-column:1 / -1; grid-row:1; position:static; transform:none; display:flex; flex-direction:row; align-items:baseline; /* centered on the page (Elec 2026-08-25); +2px off the nav's gold bar (his ""shift the same text line down 2 px away from the gold bar"") */ justify-content:center; gap:0.45rem; text-align:center; margin-top:2px; max-width:none; min-height:0; padding:0; overflow:visible; } /* the WHOLE line scales to the glass (Elec 2026-08-25: it ran 126px off page at 430) — one vw clamp on both halves so they shrink together */ body.dates-set .filter-bar.has-dates .filter-count .fc-main, body:not(.dates-set) .filter-bar .filter-count .fc-main{ position:static; padding:0; white-space:nowrap; font-size:clamp(0.66rem, 3.1vw, 0.9rem); } body.dates-set .filter-bar.has-dates .filter-count .fc-low, body:not(.dates-set) .filter-bar .filter-count .fc-low{ position:static; display:inline; white-space:nowrap; margin:0; font-size:clamp(0.66rem, 3.1vw, 0.9rem); } /* "date can definitely be smaller and save almost all the room" — the range (the second .fc-v) drops below the line's body size */ body.dates-set .filter-bar.has-dates .filter-count .fc-main b.fc-v ~ b.fc-v{ font-size:0.82em; letter-spacing:0.01em; } body.dates-set .filter-bar.has-dates .filter-count .fc-low .fc-amt, body:not(.dates-set) .filter-bar .filter-count .fc-low .fc-amt{ font-size:1.25em; } body.dates-set .filter-bar.has-dates .filter-count .fc-main .fc-v:first-child, body:not(.dates-set) .filter-bar .filter-count .fc-main .fc-v:first-child{ color:var(--gold); font-size:1.45em; } } /* ── THE NAV LOCKS TO ITS POST-SCROLL VARIANT — PHONE ONLY (Elec 2026-08-24: "the nav bar still does a pop in padding on scroll, need it to be locked at the post scroll, lower down variant", then the scope ruling: "this was all phone only unless i say to push it to other layours"). Site chrome gives nav padding 1.4rem that TRANSITIONS to 1rem + solid ground + gold border under nav.scrolled — and at phone the compact 0.25rem override lost to .scrolled, so the nav GREW on scroll and dropped over the header (his screenshots). At this band the scrolled look runs from first paint at the band's own compact height: same values both states = nothing to pop. ⚠ A first cut of this rule was UNSCOPED and changed the resting nav on the locked desktop/panel/tablet bands — reverted by his scope ruling; the other bands keep site chrome's two-state nav untouched. */ @media (max-width:767.98px){ nav, nav.scrolled{ background:rgba(13,17,25,0.95); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); /* 4px -> 6px each side (Elec: "another 2px of padding above and below logo group. which would push everything from the bar down a total of 4px") — the flex centering carries the logo group and the MAP/GUEST SUPPORT buttons to the new middle by construction. */ padding:6px 4vw; border-bottom:1px solid transparent; border-image:linear-gradient(90deg, transparent, var(--gold), transparent) 1; transition:none; } /* THE TONIGHT STRIP HUGS ITS TEXT (Elec: "internal text centered and the extra horizontal padding brought down to hug the text") — a centered pill sized by its ink, not a full-width bar. The chevron keeps a fixed gap instead of margin-left:auto (which would pin it to the box edge and re-widen the box). Both placements (dates step + results list) share it. */ .tonight-strip{ width:fit-content; max-width:calc(100% - 2.4rem); margin-inline:auto; padding-inline:0.75rem; text-align:center; } .tonight-strip .tn-top{ justify-content:center; } .tonight-strip .tn-go{ margin-left:0.5rem; } /* BROWSE ALL HOMES in the strip's grammar (Elec 2026-08-25: "too rounded and doesnt match the style of anything else really... style it the same as the available tonight box") — the 999px pill retires; same ground wash, same gold-line border, same var(--radius-sm) corner as .tonight-strip (browse-map.css ~94), same hover. Type stays the button's own caps grammar. */ .sh-skip-btn{ border-radius:var(--radius-sm); border:1px solid var(--gold-line); background-color:rgba(46,65,95,0.4); background-image:linear-gradient(rgba(201,169,110,0.08), rgba(201,169,110,0.08)); color:var(--parchment); } .sh-skip-btn:hover, .sh-skip-btn:focus-visible{ background-image:linear-gradient(rgba(201,169,110,0.16), rgba(201,169,110,0.16)); border-color:var(--gold); } /* POPOVER ARROWS ON THE MONTH'S AXIS (Elec 2026-08-24: "both the calendars, pop out and first central load, have errors with size and placement of the control arrows"). Measured: absolute top 16.8px seated the arrows' centre at y111 against the month title's y104 — 7px low. 10px lands both on one axis at this band; desktop keeps its own geometry. */ .dr-pop .dr-arrow{ top:10px; } /* ONE GROUND BEHIND PILL + CALENDAR (Elec: "the background is now a different color behind the same day booking pill, id like it to match the rest of the page below"). The relocated strip sits in .browse-split ABOVE .browse-detail, so it sat on the bare body ground while the calendar below carried the column wash (engine-surface ~188). The SAME construction moves up to the split for this step — one continuous fall over pill and calendar — and the detail's own copy is nulled here so the wash cannot double where they overlap. */ body.sh-flow.sh-step-dates .browse-split{ background-image:linear-gradient(180deg, rgba(10,34,71,0.55) 0%, rgba(4,20,46,0.55) 100%), var(--mottle); background-repeat:repeat; } body.sh-flow.sh-step-dates .browse-detail{ background-image:none; } } /* ⛑ THE PROPERTY NAME CENTERS ON THE MODAL, NOT ON THE LEFTOVER SPACE (Elec 2026-08-23: "the centering of property name vs layout centering of book tab are off and look strange against each other"). MEASURED: title centre 396 against the modal's 406 — 10px left, and the cause is structural: .modal-header is flex space-between with UNEQUAL tab groups (DETAILS 91px, BOOK NOW 111px), so a flow-centred title splits the 20px difference. Any constant would drift the moment a tab's text changed. Taking the title OUT of the flow and pinning it to the header's own axis is alignment BY CONSTRUCTION — it cannot drift with tab widths. Capped and ellipsised so a long property name can never reach either tab group. */ @media (min-width:768px) and (max-width:1279.98px){ .browse-detail .modal-header{ position:relative; } /* ETC 2026-08-23: an ABSOLUTE title was the first attempt and it backfired - taking it out of flow collapsed the header 45 -> 25px, the tabs then rode 4px ABOVE the modal, and the modal's overflow:hidden sliced their tops (Elec: "that last change cut the top off pretty tight"). In-flow answer instead: make the two tab groups EQUAL and flexible, so the middle item lands on the header axis by construction and the header keeps the height the tabs need. */ .browse-detail .modal-header-left, .browse-detail .modal-header-right{ flex:1 1 0; min-width:0; display:flex; } .browse-detail .modal-header-left{ justify-content:flex-start; } .browse-detail .modal-header-right{ justify-content:flex-end; } .browse-detail .modal-title{ position:static; transform:none; flex:0 1 auto; max-width:calc(100% - 250px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } } /* ⛑ THE TAB ROW CLEARS THE MODAL'S CORNERS (Elec 2026-08-23: "the deselcted nonactive tab looks very rough"). MEASURED cause, not styling: the modal's corner radius is 14px and the tab SVGs' outer FLARE FEET sat 2px inside the modal edge — so each flare arc landed ON the corner curve and the two outlines tangled. His law: a line either meets something or it does not exist; two curves crossing at a corner is the seam that reads as "rough". The tab groups inset so the flare foot lands on STRAIGHT border with air: header padding-inline 16 -> 38 (the SVG hangs 16px left of its tab, so the foot moves from +2 to +24 — well clear of the 14px radius). Symmetric, so the absolutely-centred title above stays on the modal axis. */ @media (min-width:768px) and (max-width:1279.98px){ .browse-detail .modal-header{ padding-inline:38px; } } /* ══════════════════════════════════════════════════════════════════════════ THE TAB FOOT LINE (Elec 2026-08-23, with side-by-side renders: "the flares are perfect, arcs are great, the fills can change and make no difference to the user. its that base line that is ruining the aesthetic"). TWO things were making the doubled/floating segments in his "now" render: 1. .mt-base — a SECOND line drawn inside each inactive tab's own SVG, spanning only that tab's footprint. It sat on top of the shelf and ended in mid-air at both ends: the floating line ends his design law forbids. GONE here. The open/closed distinction does not need it — it is carried by FILL, which he just declared free: the inactive tab's fill is translucent (rgba 46,65,95,0.4) so the shelf shows THROUGH its foot and it reads closed, while the active tab's fill is opaque (#182E51) and covers the shelf, so it reads open into its pane. Same signal, no extra line. 2. The shelf itself stopped short of the modal's corners — and that was MY regression from the tab-inset change: the JS sets --shelf-l/--shelf-r from the flare feet, which moved inward with the padding, so the line floated between the tabs instead of meeting the frame. Forced back to the corners here; !important because those vars are written INLINE by paintTabShapes and a stylesheet cannot outrank inline any other way. Result is his second render: ONE continuous gold line corner to corner, the flares rising out of it, nothing drawn inside the tab feet. ══════════════════════════════════════════════════════════════════════════ */ @media (min-width:768px) and (max-width:1279.98px){ .browse-detail .mt-base{ display:none; } .browse-detail .modal-header{ --shelf-l:0px !important; --shelf-r:0px !important; } } /* Elec 2026-08-23, superseding the earlier ".1 will work": "when map is active drop transparency of property cards to zero and remove fade cover completely." Cards go to 0 (the ghost is gone, not faint) and the veil is already 0 in focus — the active map is the whole surface. Both bands, and both still transition on the 1.3s curve, so it is a fade-out not a cut. */ /* ══════════════════════════════════════════════════════════════════════════ HEADER LOCKED TO THE NAV, AND THE FOOTER STOPS CROWDING THE MAP (Elec 2026-08-23: "the page header scrolls under the nav section they should be locked together. header should never move" · "the footer shouldnt be allowed to start up so high, even when only displaying one or 2 properties because it covers the map" · "while the map is active scrolling should not cause the footer to scroll up but only affect the map".) ══════════════════════════════════════════════════════════════════════════ */ @media (min-width:768px) and (max-width:1279.98px){ /* The bar sticks to the nav's MEASURED bottom, not a hard-coded 82px — that mismatch was the slide. Fallback keeps the old number for no-JS. */ .filter-bar{ top:var(--sh-nav-h, 82px); } #nav{ position:sticky; top:0; z-index:100; } /* The list column owns at least a full screen below the header, so a 1–2 result page cannot pull the footer up over the map. */ .browse-split .browse-section{ min-height:calc(100vh - var(--sh-lap-header, 200px)); } /* MAP ACTIVE = THE MAP IS THE PAGE: the document stops scrolling entirely, so a scroll gesture reaches the map instead of dragging the footer up. */ /* overflow:hidden on BODY alone did not lock it (measured: scrollY still moved) — the scrolling element is the ROOT. Both, so the gesture has nowhere to go but the map. */ /* TWO RULES, NOT ONE LIST (audit 2026-08-27): in a browser without :has() (Firefox ESR 115 and older), one unsupported selector in a list drops the ENTIRE rule — so the body half of the lock died with it and the page scrolled behind the fullscreen map. Split, each half stands alone. */ html:has(body.map-open){ overflow:hidden; } body.map-open{ overflow:hidden; } body.map-open .engine-footer, body.map-open #browseFooter{ display:none; } /* ⛑ AND THE SITE FOOTER TOO (Elec 2026-08-28: "now the footer comes up and over the map the next time i just opened it" - seen on HIS screen: the brand logo, "56 Talisman Drive, Suite 2" and the office line printed across the lower half of the map). The two selectors above hide `.engine-footer` and `#browseFooter`, but the real site footer is a bare