/* ==========================================================================
   CREW — Booking flow
   Brand tokens lifted from the public pages (forest/cream, Engravers Gothic +
   Pitch Sans, square edges). Layout and component structure carried over from
   the Uno app screens in CrewBookingOrdering/Presentation/*.xaml.

   @font-face lives in each page's <head>, not here: the build stamps a content
   hash onto every root-absolute `?v=` reference it finds in HTML, so declaring
   the faces there gets the booking pages the same font URLs — and the same warm
   cache — as the rest of the site. A copy in this file would ask for a second,
   unstamped URL and re-download all six faces.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* Surfaces */
  --cream:#EEEFE3;
  --cream-2:#E6E7D9;      /* card fill on cream */
  --cream-3:#e4e5d7;      /* image placeholder */
  --field:#F3F4EA;        /* a field to fill in, a shade lighter than the page */
  --forest:#212E2B;
  --forest-soft:#2C3B37;  /* raised surface inside forest sections */

  /* Ink */
  --ink:#212E2B;
  --body:#4a544c;
  --muted:#6f786e;
  --on-forest:#EEEFE3;
  --on-forest-body:#d7dbcf;
  --on-forest-muted:#8f9a90;

  /* Lines */
  --line:rgba(28,24,15,.14);
  --line-strong:rgba(28,24,15,.24);
  --line-on-forest:rgba(238,239,227,.22);

  /* Feedback */
  --danger:#8C2F22;
  --danger-bg:#F6E7E4;
  --ok:#3F6B4A;

  /* Type */
  --eg:'Engravers Gothic',sans-serif;
  --egx:'Engravers Gothic Ext',sans-serif;
  --ps:'Pitch Sans',sans-serif;

  /* Metrics */
  --pad:22px;             /* page gutter (mobile) */
  --header-h:90px;        /* the site's header height, matched exactly */
  --maxw:640px;           /* the flow is mobile-first; cap it on desktop */
}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--cream);-webkit-text-size-adjust:100%}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--ps);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
img{max-width:100%;display:block}
input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--forest);outline-offset:2px}

/* ---------- Page shell ---------- */
/* Full width, like the site: the header and footer run edge to edge and only
   the content between them is capped. */
.shell{min-height:100dvh;display:flex;flex-direction:column;background:var(--cream)}
.page{flex:1 0 auto;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) 64px}
.page--flush{padding-left:0;padding-right:0}
.dt-media{margin-top:12px}
.dt-first{margin-top:18px}

/* Site header — matches the site's page headers (burger, centred logo, lang, IG) */
/* Ported from the site's <header id="hdr"> — same height, gutter, burger
   proportions, logo size and type. See assets/chrome.js for the source. */
.hdr{
  position:sticky;top:0;z-index:60;flex:0 0 auto;
  height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:env(safe-area-inset-top) 30px 0;
  background:var(--cream);
  border-bottom:1px solid rgba(28,24,15,.12);
}
.hdr__burger{display:flex;flex-direction:column;gap:5px;width:34px;padding:6px 0;background:none;border:none;cursor:pointer}
.hdr__burger span{display:block;height:2px;background:var(--forest)}
.hdr__burger span:nth-child(1),.hdr__burger span:nth-child(3){width:30px}
.hdr__burger span:nth-child(2){width:15px}
.hdr__brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;line-height:1}
.hdr__brand img{display:block;height:52px;width:auto}
.hdr__right{display:flex;align-items:center;gap:22px}
.hdr__lang{font-family:var(--ps);font-weight:500;font-size:16px;letter-spacing:2px;color:var(--forest);position:relative;top:1px}
.hdr__ig,.hdr__acct{display:flex;color:var(--forest)}
/* The bell (mail at the front desk) and its count. The count also rides on the
   account icon, but only on a phone, where the bell itself does not fit. */
.hdr__acct{position:relative}
.hdr__bell{position:relative;display:flex}
.hdr__bell[hidden]{display:none}
.hdr__bell-btn{display:flex;position:relative;padding:0;background:none;border:none;color:var(--forest);cursor:pointer}
.hdr__badge{position:absolute;top:-6px;right:-8px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--danger);color:#fff;font-family:var(--ps);font-weight:500;font-size:11px;line-height:18px;text-align:center;box-shadow:0 0 0 2px var(--cream)}
.hdr__badge[hidden],.hdr__badge--acct{display:none}
.hdr__bell-pop{position:absolute;right:-10px;top:calc(100% + 14px);z-index:60;width:320px;max-width:calc(100vw - 32px);background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:12px;box-shadow:0 14px 32px -12px rgba(0,0,0,.28);padding:16px 18px;text-align:left}
.hdr__bell-pop[hidden]{display:none}
.hdr__bell-title{font-family:var(--eg);font-weight:700;font-size:12px;letter-spacing:1.8px;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.hdr__bell-list{list-style:none;margin:0;padding:0}
.hdr__bell-list li{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-top:1px solid rgba(0,0,0,.06);font-family:var(--ps);font-size:15px;color:var(--ink)}
.hdr__bell-list li:first-child{border-top:0}
.hdr__bell-list strong{display:block;font-weight:500}
.hdr__bell-list small{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.hdr__bell-ico{font-size:18px;line-height:1.2}
.hdr__bell-empty{font-family:var(--ps);font-size:15px;color:var(--muted);margin:0}
.hdr__bell-more{display:inline-block;margin-top:12px;font-family:var(--ps);font-size:14px;color:var(--forest);text-decoration:underline;text-underline-offset:3px}

/* Narrow phones: the wordmark is centred on the header, not on the space left
   between the burger and the icons, so every icon added to the right pushes
   the collision leftwards — at 320px "FR" sat on top of CREW. The account is
   the one that has to be here (it is how you get back to your invoices);
   Instagram is in the menu and in the footer, so it is the one that goes. */
@media (max-width:480px){
  /* 22px is the page gutter, so the burger lines up with the content below. */
  .hdr{padding-left:var(--pad);padding-right:var(--pad)}
  .hdr__right{gap:16px}
  .hdr__ig{display:none}
  /* No room for the bell: its count moves onto the account icon. */
  .hdr__bell{display:none}
  .hdr__badge--acct:not([hidden]){display:block}
}
@media (max-width:359px){
  .hdr__brand img{height:44px}
}

/* ---------- Menu overlay (ported from the site's .menu-ov) ---------- */
.menu-ov{
  position:fixed;inset:0;z-index:100;
  background:rgba(20,17,10,.975);
  display:flex;flex-direction:column;
  overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;
}
.menu-ov::-webkit-scrollbar{width:0;height:0;display:none}
.menu-ov__bar{position:relative;height:90px;flex:0 0 auto}
.menu-ov__close{
  position:absolute;left:30px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;color:#f4efe3;display:flex;
}
.menu-ov__brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;line-height:1}
.menu-ov__brand img{display:block;height:52px;width:auto}
#menu-topright{
  position:absolute;right:30px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;gap:22px;
}
#menu-topright a{font-family:var(--ps);font-weight:500;font-size:16px;letter-spacing:2px;color:#f4efe3;display:flex}
#menu-nav{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:24px;text-align:center;padding:20px 30px;
}
#menu-nav a{
  font-family:var(--eg);font-weight:700;font-size:40px;color:#f4efe3;width:max-content;
  transition:opacity .25s ease;
}
@media(hover:hover){#menu-nav a:hover{opacity:.66}}
@media (max-width:600px){
  #menu-nav a{font-size:32px}
  #menu-topright{
    position:fixed;left:0;right:0;width:100%;top:auto;bottom:60px;
    transform:none;justify-content:center;
  }
}

/* ---------- Typography ---------- */
.eyebrow{font-family:var(--eg);font-weight:700;font-size:12px;letter-spacing:2.4px;text-transform:uppercase;color:var(--muted)}
.eyebrow--onforest{color:var(--on-forest-muted)}
/* The When sheet's "Today": a heading-sized link back to this week. */
.tftoday{background:none;border:0;padding:0;cursor:pointer;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.tftoday[hidden]{display:none}

/* The floor is 30px, not 38px: at 38px the two hero lines overflow a 320px
   phone, and the French lines are set from the same rule. */
.h-display{font-family:var(--egx);font-weight:700;font-size:clamp(30px,10.5vw,58px);line-height:1.02;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.h1{font-family:var(--eg);font-weight:700;font-size:clamp(30px,8vw,40px);line-height:1.06;letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.h2{font-family:var(--eg);font-weight:700;font-size:22px;letter-spacing:2px;text-transform:uppercase;color:var(--ink)}
.h3{font-family:var(--eg);font-weight:700;font-size:17px;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink)}
.lede{font-family:var(--ps);font-size:16px;line-height:1.62;color:var(--body);text-wrap:pretty}
.body{font-family:var(--ps);font-size:15px;line-height:1.62;color:var(--body);text-wrap:pretty}
.small{font-family:var(--ps);font-size:13.5px;line-height:1.55;color:var(--muted)}
.num{font-family:var(--egx);font-weight:700;letter-spacing:.02em}

/* ---------- Section rhythm ---------- */
.stack{display:flex;flex-direction:column}
.stack>*+*{margin-top:var(--gap,16px)}
.section{margin-top:38px}
.section__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:15px 30px;
  font-family:var(--ps);font-weight:500;font-size:13px;letter-spacing:3px;text-transform:uppercase;
  border:2px solid var(--forest);background:transparent;color:var(--forest);
  transition:background .25s ease,color .25s ease,opacity .2s ease;
  text-align:center;
}
.btn--block{display:flex;width:100%}
.btn--solid{background:var(--forest);color:var(--cream)}
.btn--lg{padding:21px 30px;font-size:14px;letter-spacing:3.4px}
.btn--onforest{border-color:var(--cream);color:var(--cream)}
.btn--danger{border-color:rgba(140,47,34,.5);color:var(--danger)}
.btn--quiet{border-color:transparent;color:var(--muted);letter-spacing:2px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.42;pointer-events:none}
@media(hover:hover){
  .btn:hover{background:var(--forest);color:var(--cream)}
  .btn--solid:hover{background:var(--forest-soft)}
  .btn--onforest:hover{background:var(--cream);color:var(--forest)}
  .btn--danger:hover{background:var(--danger);border-color:var(--danger);color:#fff}
  .btn--quiet:hover{background:transparent;color:var(--forest)}
}
.btn svg{flex:0 0 auto}

/* Circular icon button (back / bell / avatar) */
.iconbtn{
  width:44px;height:44px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line-strong);background:transparent;color:var(--forest);
  transition:background .25s ease,color .25s ease;
}
@media(hover:hover){.iconbtn:hover{background:var(--forest);color:var(--cream)}}

/* Back bar sits above page content */
.backbar{padding:18px 0 4px}

/* ---------- Cards ---------- */
.card{border:1px solid var(--line-strong);background:transparent}
.card--fill{background:var(--cream-2)}
.card__body{padding:20px}
.card--onforest{border-color:var(--line-on-forest)}

/* Tappable row: icon + label/value + chevron (Home timeframe, My Bookings) */
.row{
  display:flex;align-items:center;gap:16px;width:100%;
  padding:18px 20px;text-align:left;
  border:1px solid var(--line-strong);background:transparent;
  transition:background .25s ease;
}
@media(hover:hover){.row:hover{background:var(--cream-2)}}
.row__icon{flex:0 0 auto;width:26px;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.row__main{flex:1;min-width:0}
/* These are <span>s inside buttons and anchors, so they must be blockified
   explicitly — left inline they run together and wrap mid-value. */
.row__label{display:block;font-family:var(--eg);font-weight:700;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.row__value{display:block;font-family:var(--eg);font-weight:700;font-size:17px;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink);margin-top:3px}
.row__sub{display:block;font-family:var(--ps);font-size:14px;color:var(--body);margin-top:3px}
.row__chev{flex:0 0 auto;color:var(--muted);transition:transform .2s ease}

/* A booking inside the panel on the home screen. Deliberately NOT .row: that
   is the bordered box the form fields use, and a booking that has already
   happened is not a field. Rules between, no box around. */
/* Mobile-first: the countdown drops to its own line rather than squeezing the
   date into two. They are both "when", so stacking them costs nothing. */
.bkrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:15px 0;border-top:1px solid var(--line);margin-top:14px}
.bkrow + .bkrow{margin-top:0}
.bkrow__main{flex:1 1 100%;min-width:0}
.bkrow__name{display:block;font-family:var(--eg);font-weight:700;font-size:16px;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink)}
.bkrow__when{display:block;font-family:var(--ps);font-size:14px;color:var(--body);margin-top:4px}
.bkrow__in{flex:1 1 auto;font-family:var(--ps);font-size:13.5px;color:var(--muted)}
.bkrow__chev{flex:0 0 auto;color:var(--muted)}
@media(hover:hover){.bkrow:hover .bkrow__name{opacity:.62}}

/* ---------- Chips ---------- */
.chiprow{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;margin:0 calc(var(--pad) * -1);padding-left:var(--pad);padding-right:var(--pad)}
.chiprow::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
  padding:11px 16px;
  font-family:var(--ps);font-weight:500;font-size:13px;letter-spacing:1.6px;text-transform:uppercase;
  border:1px solid var(--line-strong);background:transparent;color:var(--ink);
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.chip[aria-pressed="true"]{background:var(--forest);border-color:var(--forest);color:var(--cream)}
.chip svg{flex:0 0 auto}

/* Static amenity tag (room card / pay summary) */
.tag{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 12px;border:1px solid var(--line);background:var(--cream-2);
  font-family:var(--ps);font-size:12.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--body);
}
.tagwrap{display:flex;flex-wrap:wrap;gap:8px}

/* Badge over an image */
.badge{
  position:absolute;z-index:2;
  padding:7px 12px;
  font-family:var(--eg);font-weight:700;font-size:10.5px;letter-spacing:2px;text-transform:uppercase;
  background:var(--forest);color:var(--cream);
}

/* ---------- Segmented control (Hourly / Daily, List / Map) ---------- */
.seg{display:flex;border:1px solid var(--line-strong);background:transparent}
.seg__btn{
  flex:1;padding:16px 10px;
  font-family:var(--ps);font-weight:500;font-size:13px;letter-spacing:2.6px;text-transform:uppercase;
  color:var(--muted);transition:background .2s ease,color .2s ease;
}
.seg__btn[aria-selected="true"]{background:var(--forest);color:var(--cream)}
.seg--sm .seg__btn{padding:9px 16px;font-size:12px;letter-spacing:2px;display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:0 0 auto}

/* ---------- Stepper (guest count) ---------- */
.stepper{display:flex;align-items:center;gap:0}
.stepper__btn{
  width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-strong);color:var(--forest);
  transition:background .2s ease,color .2s ease;
}
.stepper__btn+.stepper__btn{border-left:none}
@media(hover:hover){.stepper__btn:hover{background:var(--forest);color:var(--cream)}}
.stepper__btn[disabled]{opacity:.3;pointer-events:none}

/* ---------- Date strip ---------- */
.datestrip{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--pad) * -1);padding:2px var(--pad)}

/* The arrows sit ON the row of days, because the days are what they move. The
   strip keeps its own sideways scroll for the days between one arrow press and
   the next, and gives up the full-bleed margin: the arrows now mark where it
   starts and ends, so bleeding past the gutter would only run under them. */
.datenav{display:flex;align-items:stretch;gap:6px}
.datenav .datestrip{flex:1 1 auto;min-width:0;margin:0;padding:2px 0}
/* Grow to fill the row where there is room, never shrink below the width the
   numbers need — so a week spreads across a desktop dialog and still scrolls
   under the arrows on a phone. */
.datenav .dateopt{flex:1 0 62px;width:auto}
.datenav__arrow{width:28px;height:auto;border-color:transparent}
.datestrip::-webkit-scrollbar{display:none}
.dateopt{
  flex:0 0 auto;width:62px;padding:16px 6px;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  border:1px solid var(--line-strong);background:transparent;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
/* The cell is a fixed 62px, and the label is uppercased and letter-spaced, so
   anything longer than a short weekday has to clip rather than run into the
   next cell. T.todayShort is why French says 'Auj.' here. */
.dateopt__dow{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-family:var(--eg);font-weight:700;font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}
.dateopt__day{font-family:var(--egx);font-weight:700;font-size:22px;color:var(--ink)}
.dateopt[disabled]{opacity:.3;pointer-events:none}
.dateopt[aria-pressed="true"]{background:var(--forest);border-color:var(--forest)}
.dateopt[aria-pressed="true"] .dateopt__dow{color:var(--on-forest-muted)}
.dateopt[aria-pressed="true"] .dateopt__day{color:var(--cream)}

/* ---------- Slot grid ----------
   The chosen range is the highlighted run of cells; the only thing they cannot
   say for themselves is where the last one ENDS, so that goes in the section
   head beside the heading — the same place CHOOSE DATE keeps its month. */
.rangelabel{font-family:var(--egx);font-weight:700;font-size:15px;color:var(--ink);white-space:nowrap}

/* Auto-fit rather than a fixed column count at three breakpoints: a cell has
   to hold '10:30 AM' on one line, and how many fit follows from the width
   available. Chasing that with breakpoints put two-line cells in the middle
   of an otherwise even grid. */
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.slot{
  padding:15px 4px;white-space:nowrap;
  font-family:var(--ps);font-weight:500;font-size:14px;letter-spacing:.5px;
  border:1px solid var(--line-strong);background:transparent;color:var(--ink);
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.slot[aria-pressed="true"]{background:var(--forest);border-color:var(--forest);color:var(--cream)}
.slot[disabled]{opacity:.3;pointer-events:none;text-decoration:line-through}

/* The next-opening chips in the empty state. A centred wrap rather than
   .chiprow: that one bleeds past the page gutter to signal "scroll me", which
   inside a centred card reads as a mistake. */
.altrow{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px}
.altrow .slot{padding-left:16px;padding-right:16px}

/* ---------- Note / callout ---------- */
.note{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);background:var(--cream-2)}
/* A note that costs something: the late cancellation's "no refund". */
.note--danger{border-color:var(--danger);color:var(--danger)}
.note svg{flex:0 0 auto;margin-top:1px;color:var(--muted)}
.note--center{justify-content:center;text-align:center}

/* ---------- Media ---------- */
/* display:block is load-bearing on the <a class="media"> cards: aspect-ratio
   has no effect on an inline box, so the room photos were laying out at their
   natural portrait ratio instead of the 16:10 the card asks for. */
.media{display:block;position:relative;overflow:hidden;background:var(--cream-3)}
.media img{width:100%;height:100%;object-fit:cover}
.media--16x10{aspect-ratio:16/10}
.media--4x3{aspect-ratio:4/3}
.media--hero{aspect-ratio:5/4}
.media__scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(19,26,24,.82) 0%,rgba(19,26,24,0) 55%)}
.media__caption{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;z-index:2}
/* Only captions that actually sit over a photo/scrim go light. A caption on a
   light card keeps the ink palette — forcing cream there makes it invisible. */
.media__caption--onphoto .h2,.media__caption--onphoto .h3{color:var(--cream)}
.media__caption--onphoto .small,
.media__caption--onphoto .eyebrow{color:var(--on-forest-body)}

/* ---------- Room list ----------
   One column on a phone, two from 720px, three on a wide desktop. Declared as
   a grid at every size so the breakpoints only ever change the column count. */
/* A SHELF of shortcut cards, not a grid. Two saved rooms should read as two
   cards at the left edge, which a grid cannot do: auto-fill would leave four
   empty tracks beside them and auto-fit would stretch two thumbnails to 500px
   each. Scrolls on a phone the way the chip rows do, and wraps once there is
   width for it — a horizontal scrollbar on a desktop is friction, not a hint. */
.roomshelf{
  display:flex;gap:12px;
  overflow-x:auto;scrollbar-width:none;
  margin:0 calc(var(--pad) * -1);padding:2px var(--pad);
}
.roomshelf::-webkit-scrollbar{display:none}
.roomshelf > *{flex:0 0 180px}

/* A caption on a 180px card, not on a hero: smaller type and a tighter inset,
   so a two-word room name stays on one line. */
/* A shelf card is the photo link plus the heart that sits on it. The heart is
   a sibling rather than a child of the link — a button inside an anchor is
   invalid, and the tap would follow the link on its way through — so this is
   what the two are positioned against. */
.shelfcard{position:relative}
.favdot{
  position:absolute;top:8px;right:8px;z-index:2;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;cursor:pointer;
  background:rgba(238,239,227,.92);color:var(--forest);
  transition:transform .15s ease;
}
.favdot:active{transform:scale(.9)}
.roomshelf .media__caption{padding:12px 13px}
.roomshelf .media__caption .h3{display:block;font-size:14px;letter-spacing:1.1px}
/* One width, top to bottom — and it is the SHELL's width, the same one
   /spaces/ and /room/ use. A 764px home screen beside a 1180px room list made
   the app look like two apps. What keeps the form from reading as stretched at
   that width is the one-row search bar (.qbar), not a narrower column. */
.home__hero{margin-top:44px}

/* The seam between "search for a space" and "go back to one". The rule and the
   gap are the hierarchy: two things stacked with 38px between them read as
   equals, which is what made this page hard to enter. */
.home__shortcuts{margin-top:64px;padding-top:36px;border-top:1px solid var(--line)}
.home__shortcuts > .section:first-child{margin-top:0}

/* ---------- Home: the search bar ----------
   One bordered strip of four fields. The 1px gap over a line-coloured
   background is the dividers, so they stay right however the fields wrap:
   date and guests full width on a phone, two by two from 600px, one row
   with the button on a desktop. */

/* Fields, then what they add up to, then the button; on a desktop the
   button moves up beside the fields and the line stays under them. */
.qbar{margin-top:44px;display:grid;grid-template-columns:minmax(0,1fr);row-gap:12px}
.qbar__fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line-strong);border:1px solid var(--line-strong)}
.qf--date,.qf--guests{grid-column:1 / -1}
@media (min-width:600px){.qf--date,.qf--guests{grid-column:auto}}
.qf{position:relative;background:var(--field)}
/* The browser's own dropdown, over the whole field and invisible: the field
   underneath is what shows, the select is what a tap or a key opens. 16px so
   iOS does not zoom the page when it takes focus. */
.qf__native{position:absolute;inset:0;z-index:1;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px;-webkit-appearance:none;appearance:none;border:0}
.qf__native:disabled{cursor:default}
/* The list the browser opens. Firefox takes padding on an option as it is;
   Chrome only lets a page dress its list once the select opts in to
   base-select (Chrome 135+, desktop and Android), and then it gets the site's
   colours and some air. Safari and iOS keep their own menu or wheel. */
.qf__native option{padding:8px 16px}
@supports (appearance: base-select){
  .qf__native,.qf__native::picker(select){appearance:base-select}
  .qf__native::picker-icon{display:none}
  .qf__native::picker(select){
    margin-top:6px;padding:6px 0;max-height:320px;
    background:var(--field);border:1px solid var(--line-strong);
    box-shadow:0 12px 30px rgba(28,24,15,.14);
  }
  .qf__native option{padding:10px 18px;font-family:var(--ps);font-weight:700;font-size:15px;color:var(--ink);background:none}
  .qf__native option::checkmark{display:none}
  .qf__native option:hover,.qf__native option:focus-visible{background:var(--cream-2);outline:none}
  .qf__native option:checked{background:var(--forest);color:var(--cream)}
  .qf__native option:disabled{color:var(--muted)}
}
.qf__native:focus-visible + .qf__btn{outline:2px solid var(--forest);outline-offset:-3px}
@media(hover:hover){.qf__native:not(:disabled):hover + .qf__btn{background:var(--cream-2)}}
/* Off (To, on a full day or before a start): plainly not a field to use —
   hatched, faded, no chevron, and the cursor says no. */
.qf--off{background:repeating-linear-gradient(135deg,transparent 0 7px,rgba(28,24,15,.06) 7px 8px),var(--cream-2)}
.qf--off .qf__native{cursor:not-allowed}
.qf__native:disabled + .qf__btn{opacity:.4}
.qf__native:disabled + .qf__btn .qf__chev{visibility:hidden}
.qf__btn{display:flex;align-items:center;gap:14px;width:100%;height:100%;min-height:68px;padding:12px 18px;
  background:transparent;border:0;text-align:left;font-family:inherit;color:var(--ink);cursor:pointer;transition:background .2s ease}
@media(hover:hover){.qf__btn:not(:disabled):hover{background:var(--cream-2)}}
.qf__btn:disabled{cursor:default}
.qf__btn:disabled .qf__chev{visibility:hidden}
.qf__icon{flex:0 0 auto;display:flex;color:var(--ink)}
.qf__icon svg{width:18px;height:18px}
.qf__main{flex:1;min-width:0}
.qf__label{display:block;font-family:var(--eg);font-weight:700;font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.qf__value{display:block;margin-top:3px;font-family:var(--ps);font-weight:700;font-size:16px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qf__value--empty{color:var(--muted);font-weight:500}
.qf__chev{flex:0 0 auto;display:flex;color:var(--ink);transform:rotate(90deg);transition:transform .2s ease}
.qf__chev svg{width:6px;height:10px}
.qf__btn[aria-expanded="true"] .qf__chev{transform:rotate(-90deg)}
.qbar__go{min-height:68px;white-space:nowrap}
.qbar__hint{margin:0}
.qbrowse{display:flex;justify-content:center;margin-top:22px}

/* The date's dropdown: the footer's schedule calendar, on forest, in its
   three greens. */
.qpop{position:absolute;top:calc(100% + 6px);left:-1px;z-index:40;min-width:calc(100% + 2px)}
.qpop--cal{width:min(380px,calc(100vw - 2 * var(--pad)));padding:20px 20px 18px;background:var(--forest);box-shadow:0 14px 34px rgba(0,0,0,.24)}
.qcal__head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:12px}
.qcal__eyebrow{font-family:var(--eg);font-weight:700;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:#a7b0a3}
.qcal__month{margin-top:4px;font-family:var(--ps);font-weight:700;font-size:15px;color:var(--cream)}
.qcal__nav{display:flex;gap:6px}
.qcal__arrow{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--line-on-forest);color:var(--cream);cursor:pointer}
.qcal__arrow:disabled{opacity:.3;cursor:default}
.qcal__grid{width:calc(100% + 8px);margin:0 -4px;border-collapse:separate;border-spacing:4px;table-layout:fixed}
.qcal__grid th{font-family:var(--eg);font-weight:700;font-size:11px;letter-spacing:1.2px;color:#8f998c;padding:0 0 4px;text-align:center}
.qcal__grid td{padding:0}
.qcal__day{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:100%;height:44px;border:0;border-radius:2px;
  font-family:var(--ps);font-weight:700;font-size:14px;line-height:1;background:#2F3E39;color:#C8D0C4;cursor:pointer}
.qcal__day em{font-style:normal;font-size:9.5px}
.qcal__day.is-partial{background:#647A6D;color:#141C19}
.qcal__day.is-closed{background:#C4D4BE;color:#141C19}
.qcal__day.is-past,.qcal__day.is-off{opacity:.38}
.qcal__day:disabled{cursor:default}
@media(hover:hover){.qcal__day:not(:disabled):hover{box-shadow:0 0 0 1.5px rgba(238,239,227,.55)}}
.qcal__day.is-sel,.qcal__day.is-sel:hover{box-shadow:0 0 0 2px var(--cream)}
.qcal__legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px}
.qcal__legend span{display:inline-flex;align-items:center;gap:7px;font-family:var(--ps);font-size:12px;color:#a7b0a3}
.qcal__legend i{display:block;width:11px;height:11px;border-radius:2px;background:#2F3E39}
.qcal__legend i.is-partial{background:#647A6D}
.qcal__legend i.is-closed{background:#C4D4BE}

.roomgrid{display:grid;gap:22px}

/* /spaces/: the way back and the title on one line. */
.sphead{display:flex;align-items:center;gap:16px;padding-top:18px}
.sphead .h1{font-size:clamp(22px,6.4vw,40px)}

/* /spaces/ cards: the photo, with the name, size and price written on it.
   Two across on a phone, more as the screen allows. */
.spgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:720px){.spgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
@media (min-width:1000px){.spgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.spcard{display:block;color:var(--cream)}
.spcard__media{aspect-ratio:1/1}
@media (min-width:720px){.spcard__media{aspect-ratio:4/3}}
/* Dark at both edges: the name sits top left, size and price at the foot. */
.spcard .media__scrim{background:linear-gradient(to bottom,rgba(19,26,24,.7) 0%,rgba(19,26,24,0) 38%),linear-gradient(to top,rgba(19,26,24,.88) 0%,rgba(19,26,24,.45) 32%,rgba(19,26,24,0) 58%)}
.spcard img{transition:transform .5s ease}
@media(hover:hover){.spcard:hover img{transform:scale(1.04)}}
.spcard__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:12px 13px;display:flex;flex-direction:column;gap:6px}
.spcard__name{position:absolute;top:0;left:0;right:0;z-index:2;padding:12px 13px;font-family:var(--eg);font-weight:700;font-size:15px;line-height:1.15;letter-spacing:1.2px;text-transform:uppercase;color:var(--cream)}
/* When a narrow card cannot hold both on one line (two prices, a TV icon, a
   phone), the price moves up a line and the size stays at the foot — never
   clipped by the photo's edge. */
.spcard__row{display:flex;flex-wrap:wrap-reverse;align-items:flex-start;justify-content:space-between;gap:4px 8px}
.spcard__meta{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--ps);font-size:13px;color:var(--on-forest-body)}
.spcard__mark{display:inline-flex;margin-left:6px;color:var(--on-forest-body)}
.spcard__price{margin-left:auto;text-align:right;white-space:nowrap;color:var(--cream)}
.spcard__price .pr{display:block;line-height:1.1}
.spcard__price .amount{font-family:var(--egx);font-weight:700;font-size:17px}
.spcard__price .unit{margin-left:3px;font-family:var(--ps);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--on-forest-body)}
.spcard__price .pr + .pr .amount{font-size:13px}
@media (min-width:720px){
  .spcard__cap,.spcard__name{padding:14px 16px}
  .spcard__name{font-size:17px}
  .spcard__price .amount{font-size:20px}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Taken at that time, free soon: one row per room, its next times beside it. */
.nflist{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.nfrow{display:flex;flex-direction:column;gap:10px;padding:16px 0;border-bottom:1px solid var(--line)}
.nfrow__room{display:flex;align-items:center;gap:14px}
.nfrow__room .room__cap{margin-top:0}
.nfrow__name{font-family:var(--eg);font-weight:700;font-size:17px;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink)}
.nfrow__when{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.nfrow__day{font-family:var(--ps);font-size:13.5px;color:var(--muted)}
.nfrow__slots{display:flex;flex-wrap:wrap;gap:8px}
.nfrow__slots .slot{padding:10px 14px;cursor:pointer}
@media(hover:hover){.nfrow__slots .slot:hover{background:var(--forest);border-color:var(--forest);color:var(--cream)}}
@media (min-width:720px){
  .nfrow{flex-direction:row;align-items:center;justify-content:space-between;gap:20px}
  .nfrow__when{justify-content:flex-end}
}

/* ---------- Room details ----------
   Named parts. On a phone they stack in source order; from 1000px the desktop
   block below places them in two columns. */
.rd-media{margin-top:8px}
.rd-head{margin-top:26px}
.rd-chips{margin-top:22px}
/* display:contents so a phone sees the head and chips in plain source order,
   exactly as if this wrapper weren't here. It only becomes a box on desktop,
   where it is the whole right-hand column. */
.rd-side{display:contents}

/* ---------- Room card (space list) ---------- */
.room{border:1px solid var(--line-strong);background:transparent;overflow:hidden;display:flex;flex-direction:column}
.room__body{padding:22px 20px 24px;flex:1;display:flex;flex-direction:column}
/* Down to the card's foot, so View details lines up across a row. */
.room__go{margin-top:auto;padding-top:20px}
.room__head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.room__name{font-family:var(--eg);font-weight:700;font-size:24px;letter-spacing:1.8px;text-transform:uppercase;color:var(--ink)}
.room__cap{display:flex;align-items:center;gap:7px;margin-top:7px;font-family:var(--ps);font-size:13.5px;color:var(--muted)}
.room__price{text-align:right;white-space:nowrap}
.room__price .amount{display:block;font-family:var(--egx);font-weight:700;font-size:26px;color:var(--ink);white-space:nowrap}
.room__price .unit{font-family:var(--ps);font-size:13px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);display:block;margin-top:2px}

/* ---------- Info grid (booking details) ---------- */
.infogrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.infogrid__cell{padding:16px;border:1px solid var(--line-strong)}
.infogrid__cell .row__label{margin-top:9px}
.infogrid__cell .row__value{font-size:15px}

/* ---------- Forms ---------- */
.field{display:flex;flex-direction:column;gap:7px}
.field__label{font-family:var(--eg);font-weight:700;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.field__label .req{color:var(--danger)}
.input{
  width:100%;padding:15px 16px;
  font-family:var(--ps);font-size:16px;color:var(--ink);
  background:var(--cream-2);border:1px solid var(--line-strong);border-radius:0;
  transition:border-color .2s ease,background .2s ease;
  appearance:none;
}
.input::placeholder{color:var(--muted);opacity:.8}
.input:focus{outline:none;border-color:var(--forest);background:#F4F5EA}
.input[aria-invalid="true"]{border-color:var(--danger);background:var(--danger-bg)}
textarea.input{min-height:96px;resize:vertical;line-height:1.55}
select.input{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236f786e' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:42px;
}
.fieldrow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field__error{font-family:var(--ps);font-size:12.5px;color:var(--danger)}

/* ---------- Price summary ---------- */
.sumrow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:12px 2px}
.sumrow__k{font-family:var(--ps);font-size:15px;color:var(--body)}
.sumrow__v{font-family:var(--ps);font-size:15px;color:var(--body)}
.sumrow--rule{border-top:1px solid var(--line);margin-top:4px;padding-top:16px}
/* The opening-hours row a chosen date falls in: a band across the card,
   reaching past the row's own edges so the text keeps its place. */
.sumrow--on{background:var(--cream-2);margin:0 -12px;padding-left:12px!important;padding-right:12px!important}
.sumrow--on .sumrow__k,.sumrow--on .sumrow__v{font-weight:700;color:var(--ink)!important}
.sumrow--total .sumrow__k{font-family:var(--eg);font-weight:700;font-size:15px;letter-spacing:2px;text-transform:uppercase;color:var(--ink)}
.sumrow--total .sumrow__v{font-family:var(--egx);font-weight:700;font-size:26px;color:var(--ink)}
.sumrow--credit .sumrow__k,.sumrow--credit .sumrow__v{color:var(--ok)}

/* Whose credits pay: a short list of choices, one of them "none". */
.crpick{display:flex;flex-direction:column;border:1px solid var(--line-strong)}
.crpick__opt{display:flex;align-items:center;gap:12px;padding:14px 16px;border-top:1px solid var(--line);cursor:pointer;font-family:var(--ps);font-size:15px;color:var(--body)}
.crpick__opt:first-child{border-top:0}
.crpick__opt input{accent-color:var(--forest);width:18px;height:18px;margin:0;flex:0 0 auto}
.crpick__name{flex:1;color:var(--ink)}
.crpick__left{color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums}

/* ---------- Sticky footer CTA ---------- */
.stickycta{
  /* Nothing is fixed below it any more, so it sits on the viewport floor. */
  position:sticky;
  bottom:env(safe-area-inset-bottom);
  z-index:40;
  padding:14px var(--pad);
  background:var(--cream);border-top:1px solid var(--line);
}
.stickycta .small{text-align:center;margin-top:10px;letter-spacing:1.6px;text-transform:uppercase;font-size:11.5px}

/* ---------- Overlay / modal ---------- */
.overlay{position:fixed;inset:0;z-index:80;background:rgba(19,26,24,.72);display:flex;align-items:center;justify-content:center;padding:24px}
.modal{width:100%;max-width:360px;background:var(--cream);border:1px solid var(--line-strong);padding:26px 24px}
/* A dialog that holds a month of dates and a grid of half-hours. Wider than a
   confirm box, and it scrolls itself rather than pushing the page behind it:
   on a short screen the apply button would otherwise sit below the fold with
   no way to reach it. */
.modal--tall{max-width:440px;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);overflow-y:auto;-webkit-overflow-scrolling:touch}
/* On a desktop there is no reason to ask a nineteen-cell grid to live in a
   phone's width: wider means a whole week of dates on screen at once and the
   half-hours in five or six columns instead of three, so the length chips are
   under the fold on nobody's screen. */
/* Below that, the dialog IS the screen. A 24px ring of dimmed page around a
   month of dates and a grid of half-hours buys nothing and costs the rows that
   would have fitted in it — and a sheet that owns the viewport is what a phone
   expects of something this size. The controls scroll inside it so DONE stays
   on the glass instead of below a grid. */
@media (max-width:819px){
  .overlay{padding:0;align-items:stretch;justify-content:stretch}
  .modal--tall{
    max-width:none;width:100%;border:0;overflow:hidden;
    max-height:none;height:100vh;height:100dvh;
    display:flex;flex-direction:column;
    padding:calc(16px + env(safe-area-inset-top)) 20px calc(16px + env(safe-area-inset-bottom));
  }
  .modal--tall > :first-child{flex:0 0 auto}
  .modal--tall > #tf-controls{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .modal--tall > #tf-apply{flex:0 0 auto}
}
@media (min-width:820px){
  .modal--tall{max-width:720px;padding:30px 28px}
}
/* A question with a consequence — cancelling — rather than a picker: wide
   enough to read on a desktop, the actions side by side with the one that
   does it on the right; on a phone it IS the screen, like the sheets above,
   with the actions at the bottom where a thumb is. */
.modal--sheet{max-width:680px;padding:32px 32px;display:flex;flex-direction:column}
.sheet__acts{display:flex;flex-direction:row-reverse;flex-wrap:wrap;gap:10px;margin-top:26px}
/* Each label on one line: the buttons share the width by what they say, and
   when the two will not fit side by side (French says more) each takes a row. */
.sheet__acts .btn{flex:1 1 auto;width:auto;white-space:nowrap}
@media (max-width:819px){
  .modal--sheet{
    max-width:none;width:100%;border:0;height:100vh;height:100dvh;overflow-y:auto;
    padding:calc(16px + env(safe-area-inset-top)) 20px calc(16px + env(safe-area-inset-bottom));
  }
  .sheet__acts{flex-direction:column;margin-top:auto;padding-top:24px}
  .sheet__acts .btn{white-space:normal;width:100%}
}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);
  z-index:90;padding:11px 18px;background:var(--forest);color:var(--cream);
  /* A forest chip on the forest footer was indistinguishable from footer
     text — which is where a bottom-anchored toast lands on a desktop, where
     the whole page fits on the screen. The hairline outlines it there; the
     shadow lifts it off the cream everywhere else. */
  border:1px solid var(--cream-2);box-shadow:0 2px 14px rgba(20,17,10,.28);
  font-family:var(--ps);font-size:13px;letter-spacing:1.4px;text-transform:uppercase;
  opacity:0;pointer-events:none;transition:opacity .22s ease;white-space:nowrap;
}
.toast[data-show="true"]{opacity:1}

/* ---------- Spinner ---------- */
.spinner{width:34px;height:34px;margin:40px auto;border:2px solid var(--line-strong);border-top-color:var(--forest);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* A button that is waiting on something: a small spinner in place of its arrow. */
.btn__spin{display:none;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite;flex:0 0 auto}
.btn.is-loading .btn__spin{display:inline-block}
.btn.is-loading [data-ic="arrowRight"]{display:none}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:2s}*{transition-duration:.01ms!important}}

/* ---------- Confirmation ---------- */
.confirm{min-height:calc(100dvh - var(--header-h) - 120px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:26px;padding:40px var(--pad) 60px}
.confirm__mark{width:104px;height:104px;border:2px solid var(--forest);display:flex;align-items:center;justify-content:center;color:var(--forest)}

/* ==========================================================================
   Responsive

   Mobile-first to 680px, then the shell widens in steps. Which screens get to
   use that width is a per-screen decision, not a global one:

     wide    /spaces/  a grid of cards, 1 -> 2 -> 3 columns
             /room/    photo beside the name, price and amenities
             /pay/     form on the left, what you're paying for on the right

     narrow  /  /timeframe/  /details/  /confirmation/
             These are short forms and receipts. Stretching six fields across
             1100px reads as broken rather than spacious, so they stay a
             centred column and only the chrome around them grows.
   ========================================================================== */

/* ---------- Tablet ---------- */
@media (min-width:680px){
  :root{--pad:32px;--maxw:760px}

  /* Room for one line: the name and date at the left, how far off at the right. */
  .bkrow{flex-wrap:nowrap}
  .bkrow__main{flex:1 1 auto}
  .bkrow__in{flex:0 0 auto;text-align:right}
}

/* Two cards per row as soon as each is still ~330px wide. */
@media (min-width:720px){
  .roomgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- Desktop ---------- */
@media (min-width:1000px){
  :root{--maxw:1080px}

  .page--narrow{max-width:764px;margin-left:auto;margin-right:auto;width:100%}

  /* ---- Timeframe ----
     This screen used to be one of the narrow ones, and at 764px inside a
     1180px shell it read as a different app to the room list it leads into.
     It is the shell's width now, and the width is spent rather than absorbed:
     the date strip and the slot grid get more of the day on screen, while the
     blocks that are NOT grids — the prose, the mode toggle, the two range
     bubbles and the button — are capped so they cannot stretch into bars. */
  .tfpage .tfhead,
  .tfpage .tfmode,
  .tfpage .tfgo{max-width:560px}

  /* The search bar on one row, the button at its end. */
  .qbar{grid-template-columns:minmax(0,1fr) auto;column-gap:14px}
  .qbar__fields{grid-column:1;grid-row:1;grid-template-columns:1.3fr 1fr 1fr 1.15fr}
  .qbar__go{grid-column:2;grid-row:1;padding:0 44px}
  .qbar__hint{grid-column:1;grid-row:2}

  /* Room to wrap, so no scrollbar — and a grid whose columns share the
     width exactly, so a full row ends where the Find spaces button does.
     auto-fill, not auto-fit: two saved rooms stay two cards at the left,
     at the same size, rather than stretching across the page. */
  .roomshelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));overflow:visible;margin:0;padding:0}
  .roomshelf > *{min-width:0}


  /* There is room to show every option now, so stop hiding them off the edge.
     Both of these bleed past the gutter on a phone to signal "scroll me"; on a
     desktop that signal is just a horizontal scrollbar nobody wants. */
  .chiprow{flex-wrap:wrap;overflow:visible;margin:0;padding:0}
  .datestrip{margin:0;padding:2px 0}

  /* A block-width button at 1080px reads as a banner, not a button. */
  .stickycta .btn{max-width:520px;margin-left:auto;margin-right:auto}

  /* Room details. Rows are explicit because the photo has to span the two
     rows the name and amenities occupy beside it — left to auto-placement,
     the amenities would drop below the photo instead. */
  .roomdetail{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
    column-gap:44px;
    align-items:start;
  }
  .roomdetail>[data-back]{grid-column:1/-1}
  .rd-media{grid-column:1;grid-row:2;margin-top:0}
  .rd-side{display:block;grid-column:2;grid-row:2}
  .rd-head{margin-top:0}
  /* About and the hours ride inside the right-hand column now, so the only
     thing left to place is the policy: under the photo, in the column the
     photo is in. It no longer lines up with the hours, and does not need to —
     they are not a pair, they were only ever the same grid row. */
  .rd-policy{grid-column:1;grid-row:3}
  /* The first block under the amenities sets its own distance from them. */
  .rd-side > .rd-about{margin-top:30px}

  /* Booking details, the same two columns as the room: the photo, and beside
     it what was booked and how to get here. */
  .dtgrid{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
    column-gap:44px;
    align-items:start;
  }
  .dt-media{grid-column:1}
  .dt-side{grid-column:2}
  .dt-media, .dt-side .dt-first{margin-top:12px}

  /* A form of one field and one button reads as a banner at 1080px. */
  .formcol{max-width:560px}

  /* Checkout. The summary sticks, so what you're paying stays on screen while
     you work down the form. */
  .paygrid{
    display:grid;
    grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
    /* The form spans both rows and is far taller than the summary. Sizing row 1
       to its own content stops the grid from handing the form's surplus height
       to it and leaving a hole between the summary and the totals. */
    grid-template-rows:min-content 1fr;
    column-gap:44px;
    align-items:start;
  }
  .paygrid__form{grid-column:1;grid-row:1/span 2}
  .paygrid__summary{grid-column:2;grid-row:1}
  /* The room panel is always open in this column, so its row is a heading
     rather than a control — see paintDetail() in pay/index.html. */
  #sum-chev{display:none}
  #summary-toggle{cursor:default}
  .paygrid__aside{grid-column:2;grid-row:2;position:sticky;top:calc(var(--header-h) + 24px)}
  .paygrid__form>.section:first-child{margin-top:12px}
}

/* ---------- Wide desktop ---------- */
@media (min-width:1300px){
  :root{--maxw:1180px}
  .roomgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* One more step, for the displays where 1180px of content sat in the middle of
   the screen with a third of the width empty on either side. The form keeps its
   own cap regardless — this widens the photos and the card rows, not the
   fields. */
@media (min-width:1600px){
  :root{--maxw:1320px}

}

/* Hour or day not chosen yet: both prices, the day one a step smaller. */
.room__price--both .pr{display:flex;align-items:baseline;justify-content:flex-end;gap:6px;white-space:nowrap}
.room__price--both .pr + .pr{margin-top:4px}
.room__price--both .pr + .pr .amount{font-size:.72em}
.room__price--both .unit{display:inline;margin-top:0}
.room__price--both > .unit{display:block;text-align:right;margin-top:4px}

/* ---- Upcoming closures: the grid and the list ---------------------------
   A month at a glance and the dates spelled out are the same information read
   two ways, so they belong side by side where there is room. The grid is a
   fixed 360px at its large size; the list takes whatever is left and never
   less than 280px, below which the two stack and the GRID GOES FIRST — on a
   phone the calendar is what somebody checks, and the list is what they then
   read down. */
.acc-clos{display:flex;flex-direction:column;gap:18px}
.acc-clos__cal{min-width:0}
/* The grid carries its own top margin for the footer; here the flex gap sets it. */
.acc-clos__cal .crew-sch{margin-top:0}
/* …and its own "SCHEDULE" eyebrow, which sits directly under this section's own
   heading and says the same thing twice. The month caption below it stays. */
.acc-clos__cal .crew-sch__eyebrow{display:none}
.acc-clos__list{flex:1 1 280px;min-width:0}
@media (min-width:760px){
  .acc-clos{flex-direction:row-reverse;align-items:flex-start;gap:28px}
  /* The grid comes FIRST in the source, so stacking puts it above the list on a
     phone, as it should be. row-reverse then lays the row out list-left,
     grid-right without touching that order — reading order stays the same on
     both, and the dates still sit where the eye lands first on a wide screen. */
  .acc-clos__cal{flex:0 0 auto}
}

/* ======================================================================
   A LIST OF BOOKINGS, AND A SHEET OF FACTS
   Shared by the booking home page and the account portal, because they are
   the same list: these rules used to be inline in account/index.html, and
   moving the list onto the home page without moving them would have meant
   two stylesheets drawing one component. Everything here is prefixed .acc-
   still — renaming it would have touched every call site for nothing.
   ====================================================================== */
  .acc-sheet{display:flex;flex-direction:column}
.acc-sheet > .acc-fact:last-child{border-bottom:0}
/* The profile reads as one block of contact details, not a ruled table. */
.acc-sheet--plain > .acc-fact{border-bottom:0;padding:10px 0}
.acc-fact{display:grid;gap:3px 16px;align-items:baseline;
          padding:15px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.acc-fact__k{font-family:var(--eg);font-weight:700;font-size:11px;
              letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}
.acc-fact__v{font-family:var(--ps);font-weight:700;font-size:17px;line-height:1.35;color:var(--ink)}
.acc-fact__amt{font-family:var(--ps);font-weight:700;color:var(--ink);
                font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.acc-fact__sub{font-family:var(--ps);font-size:14px;color:var(--muted)}
/* booking.css strips underlines from every link; inside a sub line, where
   a reference sits beside plain text, the underline is the only thing that
   says which part is the link. */
.acc-fact__sub a{color:inherit;text-decoration:underline;text-underline-offset:3px}
a.acc-fact:hover .acc-fact__v{text-decoration:underline}
/* A row that is owed money says so in the label as well as the figure: the
   colour has to survive being read at a glance down the label column. */
.acc-fact--due .acc-fact__k,
.acc-fact--due .acc-fact__v,
.acc-fact--due .acc-fact__amt{color:var(--danger)}
/* An action that belongs to one row, not to the panel. */
.acc-fact__act{align-self:center}
.acc-fact__act .btn{padding:11px 16px;font-size:12.5px;letter-spacing:2px;white-space:nowrap}
/* The 8px square that says "nothing is wrong" without spending a line on it. */
.acc-dot{display:inline-block;width:8px;height:8px;flex:0 0 auto;background:var(--ok);margin-right:10px;
         position:relative;top:-1px}
/* A cancelled invoice: the row is still readable, the amount is not owed. */
.acc-fact--void{color:var(--muted)}
.acc-fact--void .acc-fact__v,.acc-fact--void .acc-fact__amt{color:var(--muted);font-weight:400}
.acc-fact--void .acc-fact__amt{text-decoration:line-through}
.acc-fact{grid-template-columns:1fr auto}
.acc-fact__k{grid-area:1/1}
.acc-fact__amt{grid-area:1/2;font-size:15px}
.acc-fact__v{grid-area:2/1/auto/-1}
.acc-fact__sub{grid-area:3/1/auto/-1}
/* ---- bookings --------------------------------------------------------
   A date tile and a block of detail, which is how a list of appointments is
   read: the date first, as a number, then what it is. .dateopt is the date
   strip's cell from booking.css, reused rather than redrawn. */
.acc-bk{display:flex;gap:18px;padding:16px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.acc-bk:first-of-type{border-top:1px solid var(--line)}
.acc-bk:last-child{border-bottom:0}
.acc-bk__tile{flex:0 0 62px;border:1px solid var(--line-strong);padding:12px 6px;
              display:flex;flex-direction:column;align-items:center;gap:6px}
.acc-bk--past .acc-bk__tile{border-color:var(--line);color:var(--muted)}
.acc-bk--past .acc-bk__tile .dateopt__day{color:var(--muted)}
.acc-bk__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.acc-bk__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.acc-bk__name{font-family:var(--ps);font-weight:700;font-size:17px;line-height:1.3;color:var(--ink)}
.acc-bk__when{font-family:var(--ps);font-size:15px;color:var(--body)}
.acc-bk__links{font-family:var(--ps);font-size:14px;color:var(--muted)}
.acc-bk__links a{color:inherit}
/* The month a run of bookings belongs to. Cheaper than repeating the month
   in every row, and it gives a long list somewhere to breathe. */
.acc-month{font-family:var(--eg);font-weight:700;font-size:12px;letter-spacing:1.8px;text-transform:uppercase;
           color:var(--muted);padding:18px 0 10px}
.acc-month:first-child{padding-top:0}
/* Nothing booked. A box, because an empty state is the one place on this
   page where a border is doing work: it marks out the absence. */
.acc-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:40px 20px;
           border:1px solid var(--line);background:var(--cream-2);text-align:center}
.acc-empty__t{font-family:var(--ps);font-weight:700;font-size:17px;color:var(--ink)}
.acc-empty__b{font-family:var(--ps);font-size:15px;color:var(--body)}

.acc-bk__links a{text-decoration:underline;text-underline-offset:3px}
/* A row of actions that belongs to one booking. */
.acc-bk .acc-acts{padding:12px 0 0}

/* USING THE WIDTH RATHER THAN SPANNING IT. A row of label-above-value leaves a
   room name alone on a 1600px line. Past 900px the label moves into a column of
   its own and the rows become a definition list, which is what they always were. */
@media (min-width:900px){
  .acc-fact{grid-template-columns:200px 1fr auto;padding:17px 0}
  .acc-fact__k{grid-area:1/1}
  .acc-fact__v{grid-area:1/2}
  .acc-fact__amt{grid-area:1/3;font-size:17px}
  .acc-fact__sub{grid-area:2/2/auto/-1}
}

/* The section heading over a sheet, the state chip on a row, and a row's actions. */
.acc-h{font-family:var(--eg);font-weight:700;font-size:12px;letter-spacing:1.8px;text-transform:uppercase;color:var(--muted);margin-top:22px;margin-bottom:-8px}
.acc-flag{font-family:var(--eg);font-weight:700;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;padding:3px 8px;border:1px solid var(--line-strong);color:var(--muted)}
.acc-flag--due{border-color:var(--danger);color:var(--danger)}
.acc-flag--ok{border-color:var(--ok);color:var(--ok)}
.acc-acts{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 14px}
.acc-acts .btn{padding:11px 16px;font-size:12.5px;letter-spacing:2px}