/* Phone booking flow (homepage and /properties/): trip sheet, sticky trip bar, photo strips, filter chips.
 * Waterline tokens only. Phone rules sit under 700px; wider screens keep the existing layouts. */
.ts-pill,.ts-bar,.ts-overlay,.ts-chips,.ts-status{display:none}
.ts-strip{display:contents}
.guest-site .ts-extra{display:none}
.catalog-available{display:flex;align-items:center;gap:6px;margin:8px 0 0;font:500 13px/1.4 Poppins,sans-serif;color:var(--g-ink)}
.catalog-available .ui-icon{flex:none;width:18px;height:18px;color:var(--g-ink)}
.guest-site .catalog-page .catalog-available[hidden]{display:none!important}

/* The sheet: a native dialog docked to the bottom edge. It only opens on phones. */
.ts-dialog{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:100%;max-height:92dvh;padding:0 16px calc(16px + env(safe-area-inset-bottom));background:var(--g-paper);color:var(--g-ink);border:0;border-top:1px solid var(--g-rule);border-radius:4px 4px 0 0;overflow-y:auto;overscroll-behavior:contain;transform:translateY(16px);opacity:0;transition:opacity var(--g-overlay-out) var(--g-ease-out),transform var(--g-overlay-out) var(--g-ease-out),overlay var(--g-overlay-out) var(--g-ease-out) allow-discrete,display var(--g-overlay-out) var(--g-ease-out) allow-discrete}
.ts-dialog[open]{transform:none;opacity:1;transition-duration:var(--g-overlay-in)}
@starting-style{.ts-dialog[open]{transform:translateY(16px);opacity:0}}
.ts-dialog::backdrop{background:#173d42d9;opacity:0;transition:opacity var(--g-overlay-out) var(--g-ease-out),overlay var(--g-overlay-out) var(--g-ease-out) allow-discrete,display var(--g-overlay-out) var(--g-ease-out) allow-discrete}
.ts-dialog[open]::backdrop{opacity:1;transition-duration:var(--g-overlay-in)}
@starting-style{.ts-dialog[open]::backdrop{opacity:0}}
@media(prefers-reduced-motion:reduce){.ts-dialog,.ts-dialog::backdrop{transition:none}}
body:has(.ts-dialog[open]){overflow:hidden}
.ts-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}
.ts-dialog-head h2{font-size:28px;margin:0}
.ts-close{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:none;color:var(--g-ink);border:0;border-radius:4px;font-size:22px;cursor:pointer;touch-action:manipulation}
.guest-site .ts-dialog .g-trip-form,.guest-site .ts-dialog #catalog-trip-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:end}
.guest-site .ts-dialog .g-trip-form>div,.guest-site .ts-dialog #catalog-trip-form>div{min-width:0}
.guest-site .ts-dialog .g-trip-form>div:nth-child(3),.guest-site .ts-dialog #catalog-trip-form>div:nth-child(3),.guest-site .ts-dialog .g-trip-form>button,.guest-site .ts-dialog #catalog-trip-form>button,.guest-site .ts-dialog .g-form-status{grid-column:1/-1}
.guest-site .ts-dialog label,.guest-site .ts-dialog #catalog-trip-form label{display:block;font-size:13px;font-weight:400;letter-spacing:0;margin-bottom:4px;color:var(--g-muted)}
.guest-site .ts-dialog input,.guest-site .ts-dialog select,.guest-site .ts-dialog #catalog-trip-form input,.guest-site .ts-dialog #catalog-trip-form select{box-sizing:border-box;width:100%;min-width:0;height:52px;min-height:52px;font-size:16px;border:1px solid var(--g-rule);border-radius:4px;padding:0 12px;background:var(--g-paper);color:var(--g-ink)}
.guest-site .ts-dialog .g-trip-form .g-button,.guest-site .ts-dialog #catalog-trip-form .btn{min-height:56px;width:100%;background:var(--g-citron);color:var(--g-ink);border:0;font:500 15px/1.35 Poppins,sans-serif}
.guest-site .ts-dialog .catalog-trip{margin:0;padding:0;border:0}
.guest-site .ts-dialog .catalog-trip-heading{display:none}
.guest-site .ts-dialog .catalog-trip-status{margin:12px 0 0}
@media(hover:hover) and (pointer:fine){.guest-site .ts-dialog .g-trip-form .g-button:hover,.guest-site .ts-dialog #catalog-trip-form .btn:hover{background:var(--g-citron);color:var(--g-ink)}}

@media(max-width:700px){
  /* Search pill */
  .ts-pill:not([hidden]){display:flex;align-items:center;gap:12px;width:100%;min-height:60px;margin-top:16px;padding:8px 16px;background:var(--g-paper);color:var(--g-ink);border:1px solid var(--g-rule);border-radius:4px;font:inherit;text-align:left;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  .catalog-page .ts-pill:not([hidden]){order:2;width:auto;margin:16px 0 8px}
  .ts-pill-icon{flex:none}
  .ts-pill-text{display:flex;flex-direction:column;min-width:0}
  .ts-pill-label{font-weight:500;font-size:15px;line-height:1.3}
  .ts-pill-value{font-size:13px;line-height:1.4;color:var(--g-muted)}
  .ts-sheet-on .g-home-trip{padding-bottom:8px}
  /* Sticky trip bar */
  .ts-bar:not([hidden]){position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--g-paper);border-top:1px solid var(--g-rule)}
  .ts-bar-trip{display:flex;flex-direction:column;min-width:0;margin:0}
  .ts-bar-label{font-weight:500;font-size:13px;line-height:1.3}
  .ts-bar-value{font-size:13px;line-height:1.4;color:var(--g-muted)}
  .guest-site .ts-bar-action{flex:none;min-height:48px}
  .ts-bar-on body{padding-bottom:76px}
  .has-catalog-shortlist .ts-bar{display:none!important}
  /* Photo strips */
  .guest-site .ts-strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;touch-action:pan-x pan-y}
  .ts-strip::-webkit-scrollbar{display:none}
  .guest-site .ts-strip img,.guest-site .ts-strip .ts-extra{display:block;flex:0 0 100%;width:100%;scroll-snap-align:start}
  .ts-overlay{display:block;position:absolute;inset:0;pointer-events:none}
  .ts-count::before{content:attr(data-n) " / " attr(data-of)}
  .ts-count{position:absolute;top:12px;right:12px;padding:4px 8px;background:var(--g-ink);color:var(--g-paper);border-radius:4px;font:400 12px/1.3 Poppins,sans-serif}
  /* Dots sit on an ink plate so they hold 3:1 against any photo. Active is larger and citron; idle is rule. */
  .ts-dots{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--g-ink);border-radius:4px}
  .ts-dots i{display:block;width:6px;height:6px;border-radius:50%;background:var(--g-rule)}
  .ts-dots i.on{width:8px;height:8px;background:var(--g-citron)}
  /* Chips and live count */
  .ts-sheet-on .ts-chips{display:flex;gap:8px;margin:16px -16px 0;padding:0 16px 4px;overflow-x:auto;scroll-padding-inline:16px;scrollbar-width:none}
  .ts-chips::-webkit-scrollbar{display:none}
  .ts-chip,.guest-site .catalog-page .catalog-filter{flex:none;min-height:44px;padding:8px 16px;background:var(--g-paper);color:var(--g-ink);border:1px solid var(--g-rule);border-radius:4px;font:500 14px/1.3 Poppins,sans-serif;white-space:nowrap;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  .ts-chip[aria-pressed="true"],.guest-site .catalog-page .catalog-filter[aria-pressed="true"]{background:var(--g-citron);color:var(--g-ink);border-color:var(--g-ink)}
  .ts-sheet-on .ts-status{display:block;margin:12px 0 0;font-size:13px;color:var(--g-muted)}
  .guest-site .catalog-page .catalog-filters{flex-wrap:nowrap;overflow-x:auto;margin-inline:-16px;padding:0 16px 4px;scroll-padding-inline:16px;scrollbar-width:none}
  .catalog-filters::-webkit-scrollbar{display:none}
  .catalog-page .catalog-count{margin:12px 0 20px}
  /* Homepage cards stack, one photo strip each */
  .g-home .g-postcards{display:grid;grid-auto-flow:row;grid-template-columns:minmax(0,1fr);grid-auto-columns:auto;gap:28px;overflow:visible;margin-inline:0;padding:16px 0 8px;scroll-snap-type:none}
  .g-home .g-postcard,.g-home .g-postcard:nth-child(n){width:auto;max-width:none;flex:none;margin:0}
  .g-home .g-postcard.ts-filtered{display:none}
  .g-home .g-postcard-photo img{height:260px}
  .g-home .g-postcard-photo>span{display:none}
  .g-home .g-postcard>p{max-width:none}
  /* Catalog cards: the strip fills the existing photo box */
  .guest-site .catalog-page .ts-strip{position:absolute;inset:0}
  .guest-site .catalog-page .ts-strip img,.guest-site .catalog-page .ts-strip .ts-extra{position:static;height:100%;min-height:0}
}
/* Prototype: phone layout closer to Airbnb. Phone only; wider screens are untouched. */
@media(max-width:700px){
  .ts-sheet-on body{padding-top:68px}
  .ts-sheet-on body::before{content:"";position:fixed;top:0;left:0;right:0;height:68px;background:var(--g-paper);z-index:24}
  /* Until trip-sheet.js moves the form into the sheet, keep it out of the page so its space does not collapse after first paint. */
  .ts-sheet-on:not(.ts-ready) [data-trip-sheet-source]{display:none}
  .ts-pill:not([hidden]),.catalog-page .ts-pill:not([hidden]){position:fixed;top:8px;left:16px;right:16px;z-index:25;width:auto;min-height:52px;margin:0;padding:8px 52px;justify-content:center;background:var(--g-paper);border:1px solid var(--g-rule);border-radius:999px;box-shadow:0 2px 12px #173d4226}
  .ts-pill-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%)}
  .ts-pill-text{align-items:center;text-align:center}
  .ts-pill-label{font-size:14px;line-height:1.25}
  .ts-pill-value{font-size:12px;line-height:1.3}
  .ts-bar,.ts-bar:not([hidden]){display:none!important}
  .ts-bar-on body{padding-bottom:0}
  .ts-dialog{border-radius:20px 20px 0 0}
  .guest-site .ts-dialog input,.guest-site .ts-dialog select,.guest-site .ts-dialog #catalog-trip-form input,.guest-site .ts-dialog #catalog-trip-form select{border-radius:12px}
  .guest-site .ts-dialog .g-trip-form .g-button,.guest-site .ts-dialog #catalog-trip-form .btn{border-radius:12px}
  /* Chips: soft tinted pills, no outline; the selected one is citron */
  .ts-chip,.guest-site .catalog-page .catalog-filter{border-radius:999px;border-color:transparent;background:color-mix(in srgb,var(--g-ink) 7%,var(--g-paper))}
  .ts-chip[aria-pressed="true"],.guest-site .catalog-page .catalog-filter[aria-pressed="true"]{border-color:transparent;background:var(--g-citron)}
  .ts-chip:focus-visible,.guest-site .catalog-page .catalog-filter:focus-visible{outline:2px solid var(--g-ink);outline-offset:2px}
  /* Photos: rounded, no count badge, plain dots over the photo */
  .ts-count{display:none}
  .ts-dots{bottom:10px;padding:0;background:none;gap:5px;filter:drop-shadow(0 1px 2px #0006)}
  .ts-dots i{width:6px;height:6px;background:#fff;opacity:.6}
  .ts-dots i.on{width:6px;height:6px;background:#fff;opacity:1}
  .guest-site .ts-strip,.guest-site .catalog-page .catalog-card-media,.g-postcard-photo{border-radius:16px}
  .guest-site .catalog-page .catalog-card-media{overflow:hidden}
  /* Homepage: homes first, hero and intro below */
  .g-homepage .g-header{position:relative;color:var(--g-ink);background:var(--g-paper);border-color:var(--g-rule)}
  .g-homepage .g-header .g-wordmark{color:var(--g-ink)}
  .g-homepage .g-header-phone,.g-homepage .g-menu-button{color:var(--g-ink);border-color:var(--g-rule)}
  .g-homepage .g-header-actions .g-button{background:var(--g-ink);color:var(--g-paper);border-color:var(--g-ink)}
  .g-homepage .g-home{display:flex;flex-direction:column}
  .g-home>.g-wrap{display:contents}
  .g-home>.g-wrap>*{order:4;width:calc(100% - 32px);margin-inline:auto}
  .g-home>.g-wrap>.g-home-trip{order:1}
  .g-home>.g-wrap>.g-collection{order:2;padding-top:0;margin-top:0}
  .g-home>.g-arrival,.g-home>.g-scene-picker{order:3}
  .g-home>.g-scene-status{order:3}
  /* Phone homepage is the catalog: hide the hero, the second homes strip and the two "go find homes" sections; reviews come right after the homes */
  .g-home>.g-scene-picker,.g-home>.g-scene-status,.g-home>.g-wrap>.g-organizer,.g-home>.g-wrap>.g-return{display:none}
  /* The hero is off screen on phones, but its H1 stays readable for screen readers */
  html .guest-site .g-home>.g-arrival{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
  html .guest-site .g-home>.g-arrival .g-scenes,html .guest-site .g-home>.g-arrival .g-arrival-seal{display:none}
  .g-home>.g-wrap>.g-home-reviews{order:3}
  .g-home-owners h2,.g-home-owners>div>p:not(.g-label){display:none}
  html .guest-site .g-home-owners{gap:10px;padding:24px 0 28px}
  html .guest-site .g-home-owners .g-label{margin:0}
  html .guest-site .g-home-owners .g-inline-link{margin-top:14px}
  .g-homepage .g-header-actions .g-button{display:none}
  .g-home>.g-wrap>.g-home-trip{margin-top:0}
  .ts-sheet-on .g-home-trip{height:0;margin:0;padding:0;border:0}
  .ts-sheet-on .g-home-trip>div:first-child{display:none}
  .g-home .g-collection .g-section-heading{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .g-arrival{height:500px}
  .g-arrival-copy{top:48px}
  /* Cards: no frame, large photo, plain text */
  .g-home .g-postcards{gap:32px;padding:4px 0 8px}
  .g-home .g-postcard,.g-home .g-postcard:nth-child(n){display:grid;background:none;box-shadow:none;padding:0;transform:none}
  .g-home .g-postcard.ts-filtered,.g-home .g-postcard.ts-filtered:nth-child(n){display:none}
  .g-home .g-postcard>a{display:contents}
  .g-home .g-postcard-photo{aspect-ratio:1/1;margin-bottom:12px}
  .g-home .g-postcard-photo .ts-strip,.g-home .g-postcard-photo img,.g-home .g-postcard-photo .ts-extra{height:100%}
  /* Card type: serif name, plain sans tagline (italic serif read poorly at phone size), small muted facts line (Instrument Serif is already loaded) */
  .g-home .g-postcard h3{order:1;margin:0;font:400 24px/1.1 'Instrument Serif',Georgia,serif;letter-spacing:-.01em;color:var(--g-ink)}
  .g-home .g-postcard>p{order:2;margin:4px 0 0;font:400 15px/1.45 Poppins,sans-serif;color:var(--g-ink)}
  .g-home .g-postcard .g-label{order:3;margin:6px 0 0;font:400 13px/1.4 Poppins,sans-serif;letter-spacing:0;text-transform:none;color:var(--g-muted)}
  .g-home .g-postcard:has(a:focus-visible){outline:2px solid var(--g-ink);outline-offset:4px}
  /* /properties/: search first, then the homes */
  .catalog-page .catalog-breadcrumb,.catalog-page .catalog-intro-photo{display:none}
  .catalog-page .catalog-intro{display:block;margin:0;padding:0;min-height:0}
  .catalog-page .catalog-intro-copy>:not(h1),.catalog-page .catalog-collection-heading>p,.catalog-page .catalog-collection-heading .section-tag{display:none}
  .catalog-page .catalog-intro h1,.catalog-page .catalog-collection-heading h2{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .catalog-page .catalog-collection-heading{display:block;margin:0}
  .catalog-page .catalog-collection{margin-top:0;padding-top:0}
  .catalog-page .ts-chips{margin-top:0}
}
/* Prototype: rounded phone pass (Emil Kowalski / Jakub Krehel surface rules). Phone only. */
@media(max-width:700px){
  .guest-site{--r-field:12px;--r-card:20px;--shadow-ring:0 0 0 1px oklch(0 0 0 / .06),0 1px 2px -1px oklch(0 0 0 / .06),0 2px 4px 0 oklch(0 0 0 / .04);--shadow-lift:0 0 0 1px oklch(0 0 0 / .04),0 6px 20px -4px oklch(0 0 0 / .14)}
  /* White page on phones (DESIGN.md decision: cream stays on wider screens) */
  html .guest-site,html .guest-shell .g-header,html .guest-shell .g-footer{--g-paper:#fff}
  html{-webkit-tap-highlight-color:transparent}
  /* Header: no rule line, round icon buttons */
  html .guest-site .g-header{border-bottom:0}
  html .guest-site .g-header-phone{width:44px;height:44px;border:0;border-radius:999px;box-shadow:var(--shadow-ring)}
  /* Search pill floats on a shadow, not a border */
  .ts-pill:not([hidden]),.catalog-page .ts-pill:not([hidden]){border:0;box-shadow:var(--shadow-lift)}
  .ts-sheet-on body::before{box-shadow:none}
  /* Buttons: 12px corners, full width CTAs stay rectangles with soft corners */
  html .guest-site .g-button,html .guest-site .btn,html .guest-site .btn-brand{border-radius:var(--r-field)}
  html .guest-site .catalog-compare-toggle{border:0;border-radius:999px;box-shadow:var(--shadow-ring);background:var(--g-paper)}
  html .guest-site .catalog-compare-toggle[aria-pressed=true]{box-shadow:none}
  /* Fields: 12px corners and 16px text so iPhone does not zoom on focus */
  html .guest-site input:not([type=checkbox]):not([type=radio]),html .guest-site select,html .guest-site textarea{border-radius:var(--r-field);font-size:16px}
  /* Photos: hairline neutral edge so light photos keep their shape */
  html .guest-site .ts-strip,.g-postcard-photo,html .guest-site .catalog-page .catalog-card-media{outline:1px solid oklch(0 0 0 / .1);outline-offset:-1px}
  /* Cards press like a native tile */
  .g-home .g-postcard,html .guest-site .catalog-page .catalog-card{transition:transform 160ms cubic-bezier(.23,1,.32,1)}
  .g-home .g-postcard:active,html .guest-site .catalog-page .catalog-card:active{transform:scale(.98)}
  /* Flat bands become rounded soft panels */
  html .guest-site .catalog-help,.g-home-signup{border-radius:var(--r-card)}
  .g-home-signup{border-top:0;background:var(--g-soft);padding:24px 20px;margin-block:24px}
  html .guest-site .catalog-help{border-top:0}
  /* /properties/ card names match the homepage cards */
  html .guest-site .catalog-page .catalog-card h3{font:400 26px/1.1 'Instrument Serif',Georgia,serif;letter-spacing:-.01em;margin:0}
  /* /properties/ phone cards: the same facts in less height. The photo and name already open the home, so the second details link goes; the price note and fit note stay. */
  html .guest-site .catalog-page .catalog-card-body{padding-top:12px}
  html .guest-site .catalog-page .catalog-title-link{display:inline-flex;align-items:center;min-height:44px}
  html .guest-site .catalog-page .catalog-card-specs{margin:0}
  html .guest-site .catalog-page .catalog-card-reason{margin:8px 0 0}
  html .guest-site .catalog-page .catalog-card-reason p{font-size:14px;line-height:1.45}
  html .guest-site .catalog-page .catalog-fit-note{border-left:0;padding-left:0;margin:6px 0 0!important;font-size:13px;line-height:1.45}
  html .guest-site .catalog-page .catalog-card-foot{margin-top:14px;padding-top:0}
  html .guest-site .catalog-page .catalog-details-link{display:none}
  html .guest-site .catalog-page .catalog-quote-note{margin:8px 0 0;line-height:1.45}
  html .guest-site .catalog-page .catalog-opening{margin-top:4px;padding-top:0;border-top:0}
}
@media(max-width:700px) and (prefers-reduced-motion:reduce){
  .g-home .g-postcard:active,html .guest-site .catalog-page .catalog-card:active{transform:none}
}

/* Home-card rating line and phone filter chips. The build appends this file to /css/trip-sheet.css (eleventy.config.js), so pages still load one stylesheet. */
/* Airbnb-style rating (Sawyer, 2026-11-07): "★ 5.0 (44)" at the right of the name row; one "Ratings from Airbnb" label per list */
.g-card-name{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;column-gap:10px;row-gap:2px}
.g-card-name h3{min-width:0}
.g-card-rating{flex:none;margin-left:auto;font:500 15px/1.3 Poppins,sans-serif;color:var(--g-ink);white-space:nowrap}
.g-card-source{margin:0 0 16px;font:400 13px/1.4 Poppins,sans-serif;color:var(--g-muted)}
/* Desktop homepage postcards are narrow: a smaller rating that sits on its own line under the name, left-aligned */
@media(min-width:701px){.g-postcard .g-card-name{margin:0 4px}.g-postcard .g-card-name h3{margin:0}.g-postcard .g-card-rating{margin-left:0;font-size:13px}}
@media(max-width:700px){
  .g-home .g-postcard .g-card-name{order:1}
  .g-home .g-postcard .g-card-name h3{order:0}
  .g-home .g-postcard .g-card-rating{order:1}
  .g-home .ts-status+.g-card-source{margin:2px 0 0}
  .catalog-page .g-card-source{margin:12px 0 0}
  .catalog-page .g-card-source+.catalog-count{margin-top:2px}
  /* Chips: a 34px Airbnb-size pill drawn inside a 44px tap area (design floor F2) */
  html .guest-site .ts-chip,html .guest-site .catalog-page .catalog-filter{position:relative;isolation:isolate;min-height:44px;padding:0 14px;background:transparent;border-color:transparent;font:500 14px/1.3 Poppins,sans-serif}
  html .guest-site .ts-chip::before,html .guest-site .catalog-page .catalog-filter::before{content:"";position:absolute;inset:5px 0;z-index:-1;border-radius:999px;background:color-mix(in srgb,var(--g-ink) 7%,var(--g-paper))}
  html .guest-site .ts-chip[aria-pressed="true"]::before,html .guest-site .catalog-page .catalog-filter[aria-pressed="true"]::before{background:var(--g-citron)}
  html .guest-site .ts-chip:focus-visible,html .guest-site .catalog-page .catalog-filter:focus-visible{outline:none}
  html .guest-site .ts-chip:focus-visible::before,html .guest-site .catalog-page .catalog-filter:focus-visible::before{outline:2px solid var(--g-ink);outline-offset:2px}
}