/* ==========================================================================
   Riverside Rentals — Where / When / Who search bar
   Shared by the hero, the second search band and the results page header.
   Assumes the site's own tokens (--ink, --paper, --sail, --glass, --line,
   --display, --sans) are already declared on :root.
   ========================================================================== */

.sbar{
  width:100%;display:grid;gap:0;grid-template-columns:1fr;
  padding:7px;border-radius:30px;
  /* Deliberately heavier than the rest of the site's glass. The bar lands
     wherever the hero happens to be, and over a bright sky the labels were
     disappearing into the photograph. */
  background:linear-gradient(180deg,rgba(6,24,29,.80),rgba(6,24,29,.86));
  border:1px solid rgba(244,241,233,.20);
  backdrop-filter:blur(26px) saturate(1.3);-webkit-backdrop-filter:blur(26px) saturate(1.3);
  box-shadow:0 30px 80px -28px rgba(0,0,0,.92),inset 0 1px 0 rgba(244,241,233,.07);
  will-change:transform,opacity;
}

/* --- a field: label above, value below, the whole thing a button --- */
.sfld{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  min-width:0;width:100%;padding:13px 20px;
  /* the bar's radius less its 7px padding, so a field's highlight follows
     the bar's own curve exactly */
  border:0;border-radius:23px;cursor:pointer;text-align:left;
  background:transparent;color:var(--paper);
  transition:background-color .25s ease,box-shadow .25s ease;
}
.sfld + .sfld,.sbar__togs,.sbar__acts{border-top:1px solid rgba(244,241,233,.10)}
.sfld:hover{background:rgba(244,241,233,.07)}
.sfld.is-open{
  background:rgba(244,241,233,.13);
  box-shadow:0 10px 30px -14px rgba(0,0,0,.8),inset 0 0 0 1px rgba(244,241,233,.16);
}
.sfld__label{
  font-size:9.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(244,241,233,.75);transition:color .25s ease;
}
.sfld.is-open .sfld__label{color:var(--mist)}
.sfld__val{
  display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:15px;font-weight:450;letter-spacing:.005em;color:var(--paper);
}
.sfld__val.is-empty{color:rgba(244,241,233,.75)}

/* --- the filters: switches, not tickboxes, so they read as filters --- */
.sbar__togs{
  display:flex;flex-direction:column;justify-content:center;gap:9px;
  padding:12px 20px;
}
.sbar__tog{
  display:flex;align-items:center;gap:11px;cursor:pointer;white-space:nowrap;
  font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mist);transition:color .2s ease;
}
.sbar__tog:hover{color:var(--paper)}
.sbar__tog input{position:absolute;width:0;height:0;opacity:0}
.swtch{
  flex:0 0 auto;position:relative;width:34px;height:19px;border-radius:999px;
  background:rgba(244,241,233,.13);border:1px solid rgba(244,241,233,.26);
  transition:background-color .25s ease,border-color .25s ease;
}
.swtch::after{
  content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;
  background:var(--paper);transition:transform .25s cubic-bezier(.2,.8,.2,1);
}
.sbar__tog input:checked ~ .swtch{background:var(--sail);border-color:var(--sail)}
.sbar__tog input:checked ~ .swtch::after{transform:translateX(15px)}
.sbar__tog:has(input:checked){color:var(--paper)}
.sbar__tog input:focus-visible ~ .swtch{outline:2px solid var(--focus,var(--sail));outline-offset:3px}

.sbar__acts{display:flex;gap:8px;padding:7px;align-items:stretch}
/* a true circle as tall as Search, with the two-arrow "autorenew" icon
   centred in it (Danny, 5 Nov 2026) */
.sbar__reset{
  flex:0 0 52px;width:52px;height:52px;min-height:52px;padding:0;align-self:center;border-radius:50%;cursor:pointer;
  border:1px solid rgba(244,241,233,.32);background:rgba(244,241,233,.08);color:var(--paper);
  display:grid;place-items:center;
  transition:background-color .25s ease,border-color .25s ease,color .25s ease;
}
.sbar__reset svg{width:24px;height:24px;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.sbar__reset:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.sbar__reset:active svg{transform:rotate(-160deg)}
.sbar__go{
  flex:1 1 auto;border:0;border-radius:999px;cursor:pointer;
  background:var(--sail);color:var(--on-accent);
  font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:16px 30px;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  transition:background-color .25s ease;
}
.sbar__go:hover{background:var(--sail-hi)}
.sbar__go svg{width:15px;height:15px;flex:0 0 auto}

@media (min-width:980px){
  .sbar{grid-template-columns:1.2fr 1.1fr .95fr auto auto;align-items:stretch;border-radius:999px}
  /* on the pill-shaped bar the highlight is a pill too, 7px in all round */
  .sfld{border-radius:999px}
  /* a bar with no cottage filters on it — the boat hire one */
  .sbar--plain{grid-template-columns:1.2fr 1.1fr .95fr auto}
  .sfld + .sfld,.sbar__togs,.sbar__acts{border-top:0}
  .sfld + .sfld::before,.sbar__togs::before{
    content:"";position:absolute;left:0;top:14px;bottom:14px;width:1px;
    background:rgba(244,241,233,.16);transition:opacity .2s ease;
  }
  /* three switches stacked in the height two used to take, so the pill stays
     the same height as the fields beside it */
  .sbar__togs{position:relative;padding-inline:22px;padding-block:6px;gap:5px}
  .sbar__togs .swtch{width:30px;height:16px}
  .sbar__togs .swtch::after{top:1.5px;left:2px;width:11px;height:11px}
  .sbar__togs .sbar__tog input:checked ~ .swtch::after{transform:translateX(13px)}
  /* A rule butting up against a raised field reads as a seam, so both of the
     ones touching the live field are taken out — the same trick Airbnb uses. */
  .sfld:hover::before,
  .sfld:hover + .sfld::before,
  .sfld:hover + .sbar__togs::before,
  .sfld.is-open::before,
  .sfld.is-open + .sfld::before,
  .sfld.is-open + .sbar__togs::before,
  .sbar__togs:hover::before{opacity:0}
  .sbar__acts{padding:0 0 0 6px;align-items:center}
  .sbar__go{padding-inline:34px}
}

/* ==========================================================================
   the panels — one floating card per field, on the same glass as the rest
   ========================================================================== */
.spanel{
  position:fixed;z-index:70;top:0;left:0;
  border-radius:26px;border:1px solid var(--line);background:rgba(6,24,29,.90);
  backdrop-filter:blur(26px) saturate(1.2);-webkit-backdrop-filter:blur(26px) saturate(1.2);
  box-shadow:0 44px 100px -40px rgba(0,0,0,.95);
  color:var(--paper);
  opacity:0;transform:translateY(-8px);
  transition:opacity .22s ease,transform .22s ease;
}
.spanel.is-open{opacity:1;transform:none}
/* opening above the bar, it rises into place instead of dropping */
.spanel--up{transform:translateY(8px)}
.spanel[hidden]{display:none}
.spanel__h{
  margin:0 0 12px;font-size:10px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mist-2);
}

/* --- where --- */
.spanel--where{width:min(430px,94vw);padding:16px}
.wfind{
  display:flex;align-items:center;gap:10px;margin-bottom:10px;
  padding:11px 15px;border-radius:14px;
  border:1px solid rgba(244,241,233,.16);background:rgba(244,241,233,.06);
  transition:border-color .2s ease;
}
.wfind:focus-within{border-color:var(--sail)}
.wfind svg{width:15px;height:15px;flex:0 0 auto;opacity:.6}
.wfind input{
  flex:1 1 auto;min-width:0;background:none;border:0;padding:0;outline:0;
  font-size:14px;color:var(--paper);
}
.wfind input::placeholder{color:var(--mist-2)}
.wlist{
  display:flex;flex-direction:column;gap:1px;
  max-height:min(56vh,400px);overflow:auto;overscroll-behavior:contain;
  margin:0;padding:0;list-style:none;
}
/* the scrollbar is just a rounded pill: no track, no border (Danny, 20 Oct 2026).
   Chrome and Safari draw it from the ::-webkit-scrollbar rules, which they
   ignore once scrollbar-width/colour are set, so those are for Firefox only */
@supports not selector(::-webkit-scrollbar){
  .wlist{scrollbar-width:thin;scrollbar-color:rgba(244,241,233,.32) transparent}
}
.wlist::-webkit-scrollbar{width:10px;background:transparent}
.wlist::-webkit-scrollbar-track{background:transparent;border:0}
.wlist::-webkit-scrollbar-thumb{background:rgba(244,241,233,.32);border-radius:999px;border:3px solid transparent;background-clip:padding-box}
.wlist::-webkit-scrollbar-thumb:hover{background-color:rgba(244,241,233,.5)}
.wlist::-webkit-scrollbar-button{display:none;height:0}
.wlist li[hidden]{display:none}
.wopt{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 12px;border:0;border-radius:10px;cursor:pointer;text-align:left;
  background:transparent;color:var(--paper);
  transition:background-color .15s ease,color .15s ease;
}
.wopt:hover:not(:disabled),.wopt:focus-visible{background:rgba(244,241,233,.12);outline:0}
.wopt:disabled{opacity:.34;cursor:default}
.wopt[aria-selected="true"]{background:var(--sail);color:var(--on-accent)}
.wopt svg{width:15px;height:15px;flex:0 0 auto;opacity:.55}
.wopt[aria-selected="true"] svg{opacity:1}
.wopt__name{
  flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:14px;letter-spacing:.005em;
}
.wopt__n{flex:0 0 auto;font-size:11.5px;color:var(--mist);white-space:nowrap}
.wopt[aria-selected="true"] .wopt__n{color:rgba(255,255,255,.8)}
.wopt__img{width:34px;height:34px;border-radius:10px;object-fit:cover;flex:0 0 auto}
.wopt--boat .wopt__name{font-family:var(--display);font-weight:300;font-size:17px;letter-spacing:-.015em}
.spanel--boats{width:min(380px,94vw)}
.spanel--day .stabs{display:none}
.wopt--all{
  margin-bottom:5px;padding-block:11px;
  border-bottom:1px solid rgba(244,241,233,.10);border-radius:10px 10px 0 0;
}
.wopt--all .wopt__name{font-family:var(--display);font-weight:300;font-size:18px;letter-spacing:-.015em}

/* --- when --- */
.spanel--when{width:min(780px,95vw);padding:16px}
.stabs{
  display:flex;gap:4px;margin:0 auto 13px;padding:4px;width:max-content;
  border-radius:999px;background:rgba(244,241,233,.08);border:1px solid rgba(244,241,233,.10);
}
.stab{
  border:0;border-radius:999px;cursor:pointer;padding:8px 24px;
  background:transparent;color:var(--mist);
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  transition:background-color .25s ease,color .25s ease;
}
.stab:hover{color:var(--paper)}
.stab[aria-selected="true"]{background:var(--paper);color:var(--ink)}
.smonths{display:grid;grid-template-columns:1fr;gap:clamp(16px,3vw,34px)}
.smonth__top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
.smonth__name{
  flex:1 1 auto;text-align:center;
  font-family:var(--display);font-weight:300;font-size:19px;letter-spacing:-.01em;color:var(--paper);
}
.calnav{
  display:grid;place-items:center;width:32px;height:32px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--paper);
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,opacity .2s ease;
}
.calnav svg{width:13px;height:13px}
.calnav:hover:not(:disabled){background:var(--sail);border-color:var(--sail);color:var(--on-accent)}
.calnav:disabled{opacity:.25;cursor:default}
.calnav--ghost{visibility:hidden}
.sdow,.sgrid{display:grid;grid-template-columns:repeat(7,1fr)}
.sdow{margin-bottom:6px}
.sdow span{
  text-align:center;font-size:9.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mist-2);
}
.sday{
  /* a fixed row height, not a square: six rows of squares would push the
     panel past the bottom of the window on a laptop */
  position:relative;height:34px;display:grid;place-items:center;border:0;cursor:pointer;
  background:transparent;color:var(--paper);
  font-size:14px;font-variant-numeric:tabular-nums;
  transition:color .18s ease;
}
/* the rounded chip sits behind the number so a range can join up flush */
.sday::before{
  content:"";position:absolute;inset:1px 2px;border-radius:999px;z-index:-1;
  background:transparent;transition:background-color .18s ease;
}
.sday:hover:not(:disabled)::before{background:rgba(244,241,233,.13)}
.sday:disabled{color:rgba(244,241,233,.22);cursor:default}
.sday[data-out]{visibility:hidden;pointer-events:none}
/* today: a white ring round the date, not a dot (Danny, 23 Oct 2026);
   a dark ring on the booking card's white calendar (property.css) */
.sday[data-today]::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:30px;height:30px;border-radius:50%;box-sizing:border-box;
  border:1px solid rgba(255,255,255,.6);pointer-events:none;   /* a light touch (Danny, 26 Oct 2026) */
}
.sday.in-range{color:var(--paper)}
.sday.in-range::before{background:rgba(0,90,146,.26);inset:1px 0;border-radius:0}
.sday.is-start::before,.sday.is-end::before{background:var(--sail);inset:1px 2px;border-radius:999px}
.sday.is-start.has-range::before{inset:1px 0 1px 2px;border-radius:999px 0 0 999px}
.sday.is-end.has-range::before{inset:1px 2px 1px 0;border-radius:0 999px 999px 0}
/* fully rounded, like every other button on the site (Danny, 23 Oct 2026):
   the range band rounds off where a week row starts or ends, too */
.sgrid .sday.in-range:nth-child(7n+1)::before{border-radius:999px 0 0 999px;left:2px}
.sgrid .sday.in-range:nth-child(7n)::before{border-radius:0 999px 999px 0;right:2px}
.sday.is-start,.sday.is-end{color:var(--on-accent)}
/* Each month is its own layer, so the day chips (z-index -1) sit on the
   panel rather than behind it. Where the panel was not a layer of its own
   (the phone's full-screen search) the chosen day's blue and the range band
   showed only faintly grey through it (Danny, 29 Oct 2026). */
.sgrid{isolation:isolate}
/* the chosen day stays brand blue under the pointer too: the hover tint
   used to win, so a picked start date looked grey, and on a phone the tap
   leaves "hover" on it (Danny, 29 Oct 2026). The booking card's white
   calendar has its own copy in property.css, which loads later. */
.sday.is-start:not(:disabled)::before,.sday.is-end:not(:disabled)::before{background:var(--sail)}
/* a quick second tap on a button is a tap, not a zoom */
.sbar button,.spanel button,.sfull button,.slaunch button,.slaunch{touch-action:manipulation}
.schips{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin-top:13px;padding-top:12px;border-top:1px solid rgba(244,241,233,.10);
}
.schip{
  border:1px solid rgba(244,241,233,.24);border-radius:999px;cursor:pointer;
  padding:8px 15px;background:transparent;color:var(--mist);
  font-size:12px;font-weight:500;letter-spacing:.02em;white-space:nowrap;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}
.schip:hover{color:var(--paper);border-color:rgba(244,241,233,.5)}
.schip[aria-pressed="true"]{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.sflex{display:flex;flex-direction:column;gap:20px;padding:4px 6px 0}
.sflex__grp{display:flex;flex-direction:column;gap:10px}
.sflex .schips{margin:0;padding:0;border:0}
.spanel__foot{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px 12px;
  margin-top:12px;padding-top:11px;border-top:1px solid rgba(244,241,233,.10);
}
.schips--foot{margin:0;padding:0;border:0;gap:6px}
.schips--foot .schip{padding:7px 12px}
.schips[hidden]{display:none}
.spanel__note{margin:0;font-size:12.5px;color:var(--mist)}
.spanel__acts{display:flex;align-items:center;gap:14px;margin-left:auto}
.sact{
  border:0;background:none;cursor:pointer;padding:7px 2px;
  font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mist);transition:color .2s ease;
}
.sact:hover{color:var(--paper)}
.sact--go{
  padding:10px 22px;border-radius:999px;background:var(--sail);color:var(--on-accent);
  transition:background-color .25s ease;
}
.sact--go:hover{background:var(--sail-hi);color:var(--on-accent)}

/* --- who --- */
.spanel--who{width:min(400px,94vw);padding:8px 20px 16px}
.spanel__foot--who{margin-top:0;border-top:0}   /* the last guest row's own line is the divider */
.wrow{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:17px 0;border-bottom:1px solid rgba(244,241,233,.10);
}
.wrow:last-of-type{border-bottom:0}
.wrow__txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.wrow__name{font-family:var(--display);font-weight:300;font-size:20px;letter-spacing:-.015em;color:var(--paper)}
.wrow__sub{font-size:12.5px;color:var(--mist)}
.wrow__sub a{color:var(--mist);text-decoration:underline;text-underline-offset:3px}
.wrow__sub a:hover{color:var(--paper)}
.step{display:flex;align-items:center;gap:13px;flex:0 0 auto}
.step__btn{
  display:grid;place-items:center;width:33px;height:33px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(244,241,233,.34);background:transparent;color:var(--paper);
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,opacity .2s ease;
}
.step__btn svg{width:12px;height:12px}
.step__btn:hover:not(:disabled){background:var(--sail);border-color:var(--sail);color:var(--on-accent)}
.step__btn:disabled{opacity:.28;cursor:default}
.step__n{min-width:20px;text-align:center;font-size:15px;font-variant-numeric:tabular-nums}
/* phones: a list of numbers instead of − and + (Danny, 29 Oct 2026). 16px
   text, or iPhone zooms the page when it opens. */
.wsel{display:none}
@media (max-width:719px){
  .spanel--who .step{display:none}
  .wsel{
    display:block;flex:0 0 auto;min-width:148px;min-height:48px;padding:0 40px 0 18px;
    -webkit-appearance:none;-moz-appearance:none;appearance:none;
    border:1px solid rgba(244,241,233,.34);border-radius:999px;cursor:pointer;
    background:rgba(244,241,233,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23F4F1E9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 4.5 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 16px center/12px;
    font:inherit;font-size:16px;color:var(--paper);
  }
  .wsel option{color:var(--ink);background:#fff}
  .wsel:focus-visible{outline:2px solid var(--focus,var(--sail));outline-offset:2px}
}

@media (min-width:640px){
  .smonths{grid-template-columns:1fr 1fr}
}
@media (max-width:639px){
  .smonths .smonth:nth-child(2){display:none}
  /* one month on a phone: it needs its own forward arrow (Danny, 28 Oct 2026) */
  .smonths .smonth:first-child .calnav--ghost{visibility:visible}
}
@media (max-height:860px){
  .sday{height:31px}
  .stabs{margin-bottom:10px}
  .smonth__top{margin-bottom:6px}
}
@media (prefers-reduced-motion:reduce){
  .spanel{transition:none}
}

/* ---------- accessibility, 18 Oct 2026 ---------- */
/* the small capitals over the glass bar: near full strength */
.sfld__label,.sbar__tog{color:rgba(244,241,233,.9)}

/* "Clear all" is the reset button's name; on the bar only its arrow shows */
.sbar__reset-txt{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ==========================================================================
   Phones: the bar folds into one button and the search opens over the
   whole screen, as Airbnb does (Danny, 28 Oct 2026). search.js moves the
   form into .sfull; each field is a card, and the open one's panel joins
   on underneath it (.spanel--inline). Clear all and Search stay along the
   bottom.
   ========================================================================== */
.slaunch{display:none}
.is-folded > .slaunch{
  display:flex;align-items:center;gap:14px;width:100%;min-height:64px;
  padding:10px 24px 10px 10px;border:0;border-radius:999px;cursor:pointer;text-align:left;
  background:#fff;color:var(--ink);box-shadow:0 22px 50px -28px rgba(0,0,0,.8);
}
.slaunch__icon{display:grid;place-items:center;flex:0 0 auto;width:44px;height:44px;border-radius:999px;background:var(--sail);color:var(--on-accent)}
.slaunch__icon svg{width:18px;height:18px}
.slaunch__txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.slaunch__txt b,.slaunch__txt span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slaunch__txt b{font-size:16px;font-weight:600;letter-spacing:.005em}
.slaunch__txt span{font-size:13.5px;color:rgba(6,24,29,.75)}

/* the desktop bar in miniature (Danny, 29 Oct 2026): the same dark glass,
   three questions side by side with a label over each answer, hairlines
   between them and the blue search button at the end */
.is-folded > .slaunch--bar{
  display:grid;grid-template-columns:1.1fr 1fr 1fr auto;align-items:center;
  width:100%;min-height:64px;padding:5px;border-radius:999px;gap:0;
  background:linear-gradient(180deg,rgba(6,24,29,.80),rgba(6,24,29,.86));
  border:1px solid rgba(244,241,233,.20);
  backdrop-filter:blur(26px) saturate(1.3);-webkit-backdrop-filter:blur(26px) saturate(1.3);
  box-shadow:0 30px 80px -28px rgba(0,0,0,.92),inset 0 1px 0 rgba(244,241,233,.07);
}
.slaunch__seg{
  position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px;
  min-width:0;min-height:52px;padding:4px 8px 4px 14px;border:0;border-radius:999px;cursor:pointer;
  background:transparent;color:var(--paper);text-align:left;
  transition:background-color .2s ease;
}
.slaunch__seg:active{background:rgba(244,241,233,.10)}
.slaunch__seg + .slaunch__seg::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:1px;background:rgba(244,241,233,.16);
}
.slaunch__lab{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,241,233,.75)}
.slaunch__val{
  display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:14px;font-weight:500;color:var(--paper);
}
.slaunch__val.is-empty{color:rgba(244,241,233,.75);font-weight:400}
.slaunch__go{
  display:grid;place-items:center;width:52px;height:52px;margin-left:4px;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:var(--sail);color:var(--on-accent);transition:background-color .2s ease;
}
.slaunch__go:hover{background:var(--sail-hi)}
.slaunch__go svg{width:19px;height:19px}

html.sfull-open{overflow:hidden}
.sfull{
  position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;
  background:var(--ink-2);color:var(--paper);
  opacity:0;transform:translateY(14px);transition:opacity .22s ease,transform .22s ease;
}
.sfull[hidden]{display:none}
.sfull.is-open{opacity:1;transform:none}
.sfull__head{
  position:relative;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  min-height:64px;padding:calc(10px + env(safe-area-inset-top)) 64px 10px;
  border-bottom:1px solid var(--line);
}
.sfull__h{margin:0;font-family:var(--display);font-weight:300;font-size:24px;letter-spacing:-.015em;text-align:center}
.sfull__close{
  position:absolute;right:12px;bottom:10px;display:grid;place-items:center;width:44px;height:44px;padding:0;
  border:1px solid var(--line);border-radius:999px;background:none;color:var(--paper);
  font-size:24px;line-height:1;cursor:pointer;
}
/* the whole search fits the screen: only the open card's panel scrolls,
   so Clear all and Search never sit over the calendar (Danny, 28 Oct 2026) */
.sfull__body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:12px 12px 0}
.sfull .sbar{
  flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:8px;padding:0;
  border:0;border-radius:0;background:none;box-shadow:none;will-change:auto;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.sfull .sfld{
  flex-direction:row;align-items:center;justify-content:space-between;gap:14px;
  flex:0 0 auto;min-height:56px;padding:12px 20px;border:1px solid var(--line);border-radius:20px;
  background:rgba(244,241,233,.05);
}
.sfull .sfld + .sfld{border-top:1px solid var(--line)}
.sfull .sfld__label{flex:0 0 auto;font-size:12px;letter-spacing:.16em}
.sfull .sfld__val{min-width:0;font-size:15px;text-align:right}
/* the open card asks its question as a heading, with its panel below */
.sfull .sfld.is-open{
  padding-bottom:4px;border-bottom:0;border-radius:20px 20px 0 0;
  background:rgba(244,241,233,.08);box-shadow:none;
}
.sfull .sfld.is-open .sfld__label{
  font-family:var(--display);font-weight:300;font-size:28px;letter-spacing:-.015em;
  text-transform:none;color:var(--paper);
}
.sfull .sfld.is-open .sfld__val{display:none}
.spanel--inline{
  position:static;flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  width:auto;margin-top:-8px;padding:8px 14px 14px;
  border:1px solid var(--line);border-top:0;border-radius:0 0 20px 20px;
  background:rgba(244,241,233,.08);box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  opacity:1;transform:none;
}
.spanel--inline.spanel--who{padding-top:0}
.spanel--inline .wlist{max-height:none;overflow:visible}
/* When (Danny, 29 Oct 2026): the Dates | Flexible switch, a size smaller,
   sits top right on the same row as the "When" heading instead of on a
   row of its own, and the ± days run along one line beside Next, so the
   month fits without scrolling. The panel scrolls on a short phone, which
   would clip anything lifted into the card above it, so the open card
   steps aside and the panel draws the heading itself (data-h). */
.sfull .sfld[data-fld=when].is-open{display:none}
.sfull .spanel--when{position:relative;margin-top:0;padding-top:12px;border-top:1px solid var(--line);border-radius:20px}
.sfull .spanel--when::before{
  content:attr(data-h);position:absolute;left:20px;top:12px;line-height:44px;
  font-family:var(--display);font-weight:300;font-size:28px;letter-spacing:-.015em;color:var(--paper);
}
.sfull .spanel--day{padding-top:62px}
.sfull .spanel--when .stabs{margin:0 0 6px auto;padding:2px;gap:2px}
.sfull .spanel--when .stab{min-height:32px;padding:4px 12px;letter-spacing:.06em}
.sfull .spanel--when .spanel__foot{flex-wrap:nowrap;margin-top:6px;padding-top:8px}
.sfull .spanel--when .schips--foot{flex:1 1 auto;min-width:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.sfull .spanel--when .schips--foot::-webkit-scrollbar{display:none}
.sfull .spanel--when .schips--foot .schip{flex:0 0 auto}
.sfull .spanel--when [data-clear]{display:none}
.sfull .spanel--when .spanel__acts{flex:0 0 auto;margin-left:0}
/* A phone with Safari's bars showing (about 660px to see): everything a
   little tighter, so the month still fits without scrolling. Days stay
   38px to tap. */
@media (max-width:719px) and (max-height:760px){
  .sfull__head{min-height:54px;padding-top:calc(6px + env(safe-area-inset-top));padding-bottom:6px}
  .sfull__close{bottom:5px}
  .sfull__body{padding-top:8px}
  .sfull .sbar{gap:6px}
  .sfull .sfld{min-height:46px;padding-block:8px}
  .sfull .spanel--when{padding-top:8px;padding-bottom:10px}
  .sfull .spanel--when::before{top:8px;line-height:40px;font-size:25px}
  .sfull .spanel--when .stab{min-height:30px}
  .sfull .spanel--when .stabs{margin-bottom:2px}
  .sfull .spanel--when .calnav{width:36px;height:36px}
  /* the days share whatever height is left, between 30 and 44px a row,
     so the month never needs to scroll (Danny, 29 Oct 2026): 426px is
     everything else on this screen, measured at 393×660 */
  .sfull .spanel--when .sday{height:clamp(30px,calc((100svh - 426px) / 6),44px)}
  .sfull .spanel--when .schip{min-height:38px}
  .sfull .spanel--when .sact{min-height:38px}
  .sfull .spanel--when .spanel__foot{margin-top:4px;padding-top:6px}
  .sfull .sbar__acts{padding-top:7px;padding-bottom:calc(7px + env(safe-area-inset-bottom))}
  .sfull .sbar__go{min-height:46px}
}
/* the filters wait until no card is open */
.sfull .sbar:has(.spanel--inline:not([hidden])) .sbar__togs{display:none}
.spanel--inline .stabs{margin-bottom:8px}
.spanel--inline .smonth__top{margin-bottom:4px}
.sfull .sbar__togs{
  gap:6px;padding:8px 20px;border:1px solid var(--line);border-radius:20px;background:rgba(244,241,233,.05);
}
.sfull .sbar__tog{min-height:44px;font-size:12px}
.sfull .sbar__acts{
  flex:0 0 auto;margin:auto -12px 0;
  justify-content:space-between;align-items:center;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:var(--ink-2);
}
.sfull .sbar__reset{
  flex:0 0 auto;width:auto;height:auto;min-height:44px;border-radius:999px;padding:0 6px;border:0;background:none;color:var(--paper);
  font-size:15px;font-weight:500;text-decoration:underline;text-underline-offset:4px;
}
.sfull .sbar__reset:hover{background:none;color:var(--paper)}
.sfull .sbar__reset svg{display:none}
.sfull .sbar__reset-txt{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}
.sfull .sbar__go{flex:0 0 auto;min-height:52px;padding:0 30px}
@media (prefers-reduced-motion:reduce){
  .sfull{transition:none}
}

/* Phones: every control in the panels at least 44px to tap (WCAG 2.5.5,
   MOBILE-AUDIT M3), wherever the panels open */
@media (max-width:719px){
  .sday,.spanel .sday{height:44px}
  .calnav,.step__btn{width:44px;height:44px}
  .stab{min-height:44px}
  .schip,.schips--foot .schip{min-height:44px}
  .sact{min-height:44px}
  .wopt{min-height:44px}
  .sfld__label{font-size:12px}
  .sbar__tog,.sdow span{font-size:12px}
}

/* Phones: nothing smaller than 12px (MOBILE-AUDIT L1) and every control
   at least 44px to tap (M3), 28 Oct 2026 */
@media (max-width:719px){
  .spanel__h,.wopt__n,.sact{font-size:12px}
}
/* the bar's first line on a small laptop or a tablet on its side: room for
   "Anywhere in the Broads" without cutting it off (MOBILE-AUDIT L7) */
@media (min-width:980px) and (max-width:1179px){
  .sfld{padding-inline:15px}
  .sfld__val{font-size:14px}
  .sbar__togs{padding-inline:16px}
}