/* A-Bridge Studios booking app — shared theme, matching abridgestudios.co.uk's own
   design language (Barlow Condensed + DM Sans, monochrome black/cream, sharp
   corners, thin low-opacity borders, uppercase letter-spaced labels/buttons) so the
   booking app reads as part of the same brand instead of a bolted-on generic admin
   tool. Status colours (--good/--bad/--warn) are the one deliberate deviation from
   the marketing site's pure monochrome — an operational app needs to distinguish
   confirmed/declined/pending at a glance — kept desaturated to stay in the same
   tonal family rather than looking like a different product.
*/
:root{
  --paper:#08080a; --surface:#0c0c0e; --surface2:#141416; --ink:#f0ede8;
  --muted:#938f88; --line:rgba(255,255,255,.14); --line-soft:rgba(255,255,255,.08);
  --accent:#f0ede8; --accent-ink:#08080a;
  --good:#7fae82; --bad:#c97a6d; --warn:#c9a86a;
}
*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',-apple-system,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
.page{max-width:1200px;margin:0 auto;padding:0 clamp(1.2rem,3vw,3rem) 5rem}
.page.wide{max-width:1500px}
.page.narrow{max-width:760px}

h1,h2,h3,.brand span,button,.tab{font-family:'Barlow Condensed',sans-serif}
h1,h2,h3{text-transform:uppercase;font-weight:900;letter-spacing:.01em;line-height:1.02;margin:0 0 1.2rem}
h1{font-size:2.6rem}
h2{font-size:1.5rem;margin:0 0 .9rem}
h3{font-size:1.15rem;margin:1.3rem 0 .6rem;color:var(--ink);font-weight:700}

.eyebrow{font-family:'DM Sans',sans-serif;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-size:.72rem;margin:0 0 .5rem}

/* ── Branded header, shared across every page ── */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;max-width:1200px;margin:0 auto;padding:1.6rem clamp(1.2rem,3vw,3rem) 2.2rem;flex-wrap:wrap}
.topbar.wide{max-width:1500px}
.topbar.narrow{max-width:760px}
.topbar .brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink)}
.topbar .brand img{height:24px;width:auto;display:block}
.topbar .brand span{font-size:1rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.topbar nav{display:flex;gap:1.4rem;flex-wrap:wrap}
.topbar nav a{color:var(--muted);text-decoration:none;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;border-bottom:1px solid transparent;padding-bottom:.2rem}
.topbar nav a:hover,.topbar nav a.current{color:var(--ink);border-bottom-color:var(--line)}

/* Public booking pages share the marketing site's navigation rather than presenting
   a second, app-shaped site. Staff and admin keep the compact workspace header
   above, because their links are operational rather than marketing navigation. */
.topbar.public-site-nav{
  position:sticky;top:0;z-index:30;max-width:none;min-height:64px;margin:0;
  padding:0 clamp(1.2rem,3vw,3rem);background:rgba(8,8,10,.96);
  border-bottom:1px solid rgba(255,255,255,.08);flex-wrap:nowrap;
}
.public-site-nav .brand{flex:none}
.public-site-nav .brand img{height:28px}
.public-site-nav nav{margin-left:auto;align-items:center;gap:clamp(.8rem,2vw,2rem);flex-wrap:nowrap}
.public-site-nav nav a{padding:.25rem 0;border-bottom:0;color:var(--ink);font-size:.68rem;letter-spacing:.1em;white-space:nowrap}
.public-site-nav nav a:hover,.public-site-nav nav a.current{color:var(--muted);border-bottom:0}
.public-site-nav nav a.site-nav-book{border:1px solid var(--ink);padding:.55rem .85rem;color:var(--ink)}
.public-site-nav nav a.site-nav-book:hover{background:var(--ink);color:var(--accent-ink)}
.site-login,.site-account-toggle{background:transparent;border:0;color:var(--ink);padding:.25rem 0;font-family:'DM Sans',sans-serif;font-size:.68rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.site-login{text-decoration:none}
.site-login:hover,.site-account-toggle:hover{color:var(--muted);opacity:1;transform:none}
.site-account-toggle span{display:inline-block;margin-left:.25rem;font-size:.9rem;line-height:0;transition:transform .15s ease}
.site-account-toggle[aria-expanded="true"] span{transform:rotate(180deg)}
.site-account-menu{position:relative;margin-left:.2rem}
.site-account-popover{display:none;position:absolute;right:0;top:calc(100% + .9rem);min-width:174px;background:var(--surface);border:1px solid var(--line);padding:.45rem 0}
.site-account-popover.open{display:block}
.site-account-popover a{display:block;padding:.65rem .85rem;color:var(--ink);font-size:.72rem;letter-spacing:.08em;text-decoration:none;text-transform:uppercase;white-space:nowrap}
.site-account-popover a:hover{background:var(--surface2);color:var(--ink)}

/* Hidden on desktop — every page's nav used to just flex-wrap its full link list at
   narrow widths, which at 5+ links (customer/staff/admin all have that many now)
   ate 250-300px of vertical space above the fold before any real content, on every
   single page. Collapsed behind a toggle below instead. */
.nav-toggle{display:none;background:none;border:1px solid var(--line);color:var(--ink);width:40px;height:36px;padding:0;cursor:pointer;font-size:1.1rem;line-height:1;align-items:center;justify-content:center}
@media (max-width:760px){
  .nav-toggle{display:flex}
  .topbar nav{display:none;flex-direction:column;gap:0;width:100%;order:3;margin-top:1.2rem}
  .topbar nav.open{display:flex}
  .topbar nav a{padding:.8rem .2rem;border-bottom:1px solid var(--line-soft)}
  .topbar nav a:last-of-type{border-bottom:none}
  .topbar.public-site-nav{min-height:64px;flex-wrap:wrap}
  .public-site-nav .nav-toggle{margin-left:auto;border:0;width:40px;height:48px;font-size:1.2rem}
  .public-site-nav nav{margin:0 -1.2rem;order:3;width:calc(100% + 2.4rem);background:var(--paper);border-top:1px solid var(--line-soft)}
  .public-site-nav nav a{padding:1rem 1.2rem;border-bottom:1px solid var(--line-soft);font-size:.76rem}
  .public-site-nav nav a.site-nav-book{margin:1rem 1.2rem;border:1px solid var(--ink);padding:.85rem 1rem;text-align:center}
  .site-login,.site-account-menu{margin-left:0}
  .site-account-popover{top:calc(100% + .5rem);right:0}
}

.card{background:var(--surface);border:1px solid var(--line-soft);border-radius:0;padding:1.5rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 16px 40px -24px rgba(0,0,0,.7)}
.card + .card{margin-top:1rem}
/* .card + .card above is meant for a vertically-stacked flow of cards (account.html's
   booking lists, etc.) — but the adjacent-sibling selector doesn't know or care whether
   its sibling is actually stacked below it or just happens to be the next element in the
   DOM. Every side-by-side two-column grid on this site (profile pages, the booking
   wizard, staff/account dashboards) puts its right-hand box right after the main content
   in DOM order, so it was silently inheriting a spurious 1rem top margin and rendering
   visibly offset/misaligned from its row partner — the "crooked right-hand box" reported
   on every page that uses one of these grids. Grid `gap` already provides the spacing
   these containers want, so their direct children should never carry this margin. */
.profile-layout > .card,
.booking-layout > .card,
.staff-dash-grid > .card,
.account-overview-grid > .card{margin-top:0}

label{display:block;font-family:'DM Sans',sans-serif;font-size:.7rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:.9rem 0 .4rem}
label:first-child{margin-top:0}
label.inline{display:inline-flex;align-items:center;gap:.5rem;text-transform:none;letter-spacing:0;font-size:.9rem;font-weight:400;margin:.6rem .9rem .6rem 0;color:var(--ink)}
label.inline input[type=checkbox]{width:18px}

input,select,textarea{
  width:100%;background:var(--paper);border:1px solid var(--line);color:var(--ink);
  padding:.7rem .8rem;border-radius:0;font-family:'DM Sans',sans-serif;font-size:.95rem;
  transition:border-color .15s ease;
}
textarea{min-height:5.5rem;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink)}
/* The input rule above is for text fields; without this, checkboxes/radios inherit its
   full width and padding (and the phone min-heights below), which iOS Safari draws as a
   stretched box beside squashed label text. */
input[type=checkbox],input[type=radio]{width:18px;height:18px;min-height:0;padding:0;margin:0;flex:none;accent-color:var(--ink);cursor:pointer;vertical-align:middle}
/* One checkbox look everywhere (Chrome, iOS Safari alike): thin cream outline on the
   dark UI, filled cream with a dark tick when on. Radios stay native (accent-colour). */
/* min/max clamp so no stray width/height rule (whatever its specificity) can collapse or stretch a box. */
input[type=checkbox]{min-width:18px;max-width:18px;min-height:18px;max-height:18px;-webkit-appearance:none;appearance:none;border:1.5px solid rgba(240,237,232,.55);border-radius:3px;background:transparent center/12px no-repeat;transition:background-color .15s ease,border-color .15s ease}
input[type=checkbox]:hover{border-color:var(--ink)}
input[type=checkbox]:checked{background-color:var(--ink);border-color:var(--ink);background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27%3E%3Cpath d=%27M2.5 6.2l2.3 2.3 4.7-5%27 fill=%27none%27 stroke=%27%2308080a%27 stroke-width=%271.8%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E")}
input[type=checkbox]:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
input[type=checkbox]:disabled{opacity:.4;cursor:default}
input::placeholder,textarea::placeholder{color:var(--muted)}

button{
  background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent);border-radius:0;
  padding:.85rem 1.1rem;font-family:'DM Sans',sans-serif;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  font-size:.78rem;cursor:pointer;transition:opacity .15s ease,transform .1s ease,background-color .15s ease,border-color .15s ease;
}
button:hover{opacity:.85;transform:translateY(-1px)}
button:active{transform:translateY(0)}
button:disabled{opacity:.4;cursor:default;transform:none}
button.secondary{background:transparent;border:1px solid var(--line);color:var(--ink)}
button.secondary:hover{background:var(--surface2);border-color:var(--ink)}
button.decline,button.danger{background:transparent;border:1px solid var(--bad);color:var(--bad)}
button.decline:hover,button.danger:hover{background:rgba(201,122,109,.1)}
button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

.room{border:1px solid var(--line);border-radius:0;padding:1.1rem 1.2rem;margin-bottom:.7rem;cursor:pointer;transition:border-color .15s ease,background-color .15s ease}
.room:hover{border-color:var(--ink)}
.room.selected{border-color:var(--ink);background:var(--surface2)}
.room .name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.15rem;text-transform:uppercase}
.room .price{font-family:'DM Sans',sans-serif;font-size:.82rem;color:var(--muted);letter-spacing:.04em}

.msg{font-family:'DM Sans',sans-serif;font-size:.88rem;padding:.8rem 1rem;border-radius:0;margin-bottom:1.2rem;border:1px solid transparent}
.msg.error{background:rgba(201,122,109,.1);color:var(--bad);border-color:rgba(201,122,109,.35)}
.msg.ok{background:rgba(127,174,130,.1);color:var(--good);border-color:rgba(127,174,130,.35)}

.booking,.item{border-top:1px solid var(--line-soft);padding:1.1rem 0}
.booking:first-child,.item:first-child{border-top:none}
.booking-row{border-top:1px solid var(--line-soft);padding:.8rem 0;font-size:.9rem}
.booking-row:first-child{border-top:none}
.top,.item-top{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;flex-wrap:wrap}
.top{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.15rem;text-transform:uppercase}
.booking-row .top{font-size:1rem}
.item-title{font-weight:600;font-family:'DM Sans',sans-serif}
.meta,.item-meta{color:var(--muted);font-size:.85rem;margin-top:.35rem;line-height:1.5}

.status-pill,.pill{font-family:'DM Sans',sans-serif;font-size:.65rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:.28em .6em;border:1px solid var(--line);color:var(--muted);border-radius:0;white-space:nowrap}
.pill.on{color:var(--good);border-color:rgba(127,174,130,.4)}
.pill.off{color:var(--bad);border-color:rgba(201,122,109,.4)}

.actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.8rem}
.row{display:flex;flex-wrap:wrap;gap:.7rem}
.row > *{flex:1;min-width:150px}

.hint{color:var(--muted);font-size:.83rem;margin-top:.5rem;line-height:1.5}

.tabs{display:flex;gap:.2rem;flex-wrap:wrap;margin-bottom:1.8rem;border-bottom:1px solid var(--line-soft)}
.tab{background:transparent;border:none;border-bottom:2px solid transparent;color:var(--muted);padding:.7rem .9rem;font-weight:500;letter-spacing:.1em;font-size:.78rem;cursor:pointer;margin-bottom:-1px;transition:color .15s ease,border-color .15s ease}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--ink);border-bottom-color:var(--ink)}

/* ── Admin console shell — sidebar nav + main content, replacing the old horizontal
   tab row so the console reads as a real dashboard product rather than a stack of
   tabs. Reuses the exact same .tab buttons/data-tab wiring and #tab-* panes as
   before (admin.js's switchTab() didn't need to change at all) — this is a layout
   change only, not a rewire of how tabs work. ── */
.admin-shell{display:flex;align-items:flex-start;gap:2.6rem}
.sidebar{width:220px;flex-shrink:0;position:sticky;top:1.5rem;display:flex;flex-direction:column;gap:.1rem;border-bottom:none}
.sidebar .tab{width:100%;text-align:left;border-bottom:none;border-left:2px solid transparent;margin-bottom:0;padding:.6rem .9rem;text-transform:none;letter-spacing:.01em;font-weight:400;font-size:.92rem;display:flex;align-items:center;gap:.7rem;color:var(--muted)}
.sidebar .tab-icon{flex-shrink:0;opacity:.85}
.sidebar .tab:hover{background:var(--surface);color:var(--ink)}
.sidebar .tab.active{border-left-color:var(--ink);background:var(--surface);color:var(--ink);font-weight:500}
.sidebar-group-label{font-family:'DM Sans',sans-serif;font-size:.6rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);opacity:.55;margin:1.1rem 0 .3rem;padding:0 .9rem}
.sidebar-group-label:first-of-type{margin-top:.9rem}
.admin-main{flex:1;min-width:0}

/* Account chip pinned under the nav list — a small, real "who's signed in" signal
   most SaaS sidebars have and this one was missing entirely. */
.sidebar-account{margin:1.4rem .9rem 0;padding-top:1rem;border-top:1px solid var(--line-soft);display:flex;align-items:center;gap:.65rem}
.sidebar-account-avatar{width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.8rem;flex-shrink:0}
.sidebar-account-name{font-size:.78rem;font-weight:500;color:var(--ink)}
.sidebar-account-role{font-size:.66rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}

/* Page header row — eyebrow+title on the left, one primary action on the right
   (only shown where there's an obvious primary action, e.g. Overview/Bookings). */
.admin-header-row{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1.8rem}
.admin-header-row h1{margin-bottom:0}
#newBookingBtn{display:flex;align-items:center;gap:.5rem;width:auto;margin-bottom:.3rem}

/* Vertical rhythm between stacked sections inside a tab pane — a .card butted
   straight against the next h2 with zero gap (h2's own margin-top is 0, and .card
   carries no margin-bottom of its own) read as cramped/broken across every tab
   with more than one section: Resources & Pricing, Settings, Hours & Blocks. */
.admin-main h2{margin-top:2rem}
.admin-main h2:first-child{margin-top:0}

/* ── Resources & Pricing — collapsible per-resource management, so the default
   view is a scannable list instead of every room's full photo/description/pricing
   editing surface being open at once (looked cluttered/cheap with more than one
   room on the page — real client-facing feedback). Summary row stays visible;
   the actual editing controls (unchanged markup/handlers) move inside <details>. ── */
.resource-summary{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.resource-summary-price{color:var(--muted);font-size:.85rem;margin-top:.3rem}
.resource-manage{margin-top:.9rem}
.resource-manage > summary{font-size:.72rem}

/* ── Settings — grouped business-rule fields (was one flat 9-field list) and
   collapsed-by-default email templates (was all 7 subject+body pairs open at
   once) — same "everything open" problem as Resources & Pricing. ── */
.settings-fields-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 1.2rem}
.field-with-unit{position:relative}
.field-with-unit input{padding-right:2.8rem}
.field-unit{position:absolute;right:.9rem;top:50%;transform:translateY(-50%);color:var(--muted);font-size:.78rem;pointer-events:none}
.settings-preview{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line-soft);color:var(--muted);font-size:.85rem;line-height:1.6}
.settings-preview strong{color:var(--ink);font-weight:600}

.hours-compact-row{display:grid;grid-template-columns:100px 1fr auto 1fr auto auto;align-items:center;gap:.7rem;
  padding:.55rem 0;border-bottom:1px solid var(--line-soft)}
.hours-compact-row:last-child{border-bottom:none}
.hours-compact-day{font-weight:500;font-size:.85rem}
.hours-compact-sep{color:var(--muted);text-align:center}
.hours-compact-row input[type="time"]{padding:.5rem .6rem}
.hours-compact-row button{padding:.5rem .9rem;font-size:.68rem}
@media (max-width:700px){.hours-compact-row{grid-template-columns:1fr auto 1fr;row-gap:.4rem}
  .hours-compact-day{grid-column:1/-1}
  .hours-compact-row label.inline{grid-column:1/-1}
  .hours-compact-row button{grid-column:1/-1;width:100%}}
.template-item{border-bottom:1px solid var(--line-soft);padding:.2rem 0}
.template-item:last-of-type{border-bottom:none}
.template-item > summary{padding:.9rem .2rem;font-size:.88rem;color:var(--ink);text-transform:none;letter-spacing:0;font-weight:500;
  display:flex;align-items:center;gap:.7rem;list-style:none}
.template-item > summary::-webkit-details-marker{display:none}
.template-item > summary::before,.template-item[open] > summary::before{content:none}
.template-item > summary::after{content:'▾';color:var(--muted);transition:transform .15s;flex-shrink:0}
.template-item[open] > summary::after{transform:rotate(180deg)}
.template-item-title{flex:1}
.template-item .sub{margin-left:0;padding-left:0;border-left:none}

/* ── Packages — a hours-remaining progress bar on each granted-package row,
   and a filter box above what could otherwise grow into a long flat list. ── */
.progress-bar{height:5px;background:var(--surface2);border:1px solid var(--line-soft);margin-top:.5rem;overflow:hidden}
.progress-bar-fill{height:100%;background:var(--good)}

/* ── Availability blocks — a real calendar range picker, replacing raw
   datetime-local inputs that looked/felt like a bare browser control clashing
   with the rest of the branded UI. Reuses the exact same .mini-cal-* classes
   as the customer booking wizard's calendar (public/book.js) so it doesn't
   need its own visual language — .in-range is the one addition, marking days
   between a picked start and end. ── */
.mini-cal-day.range-start,.mini-cal-day.range-end{background:var(--accent);color:var(--accent-ink)}
.mini-cal-day.in-range{background:var(--surface2)}

@media (max-width:900px){
  /* align-items:flex-start (set above for the desktop row layout, sidebar+main
     side by side) becomes a CROSS-axis rule once flex-direction flips to column
     here — it makes admin-main shrink-to-fit instead of stretching to the full
     width, so any child needing more than the available width (e.g. the revenue
     date-filter row) silently pushes the whole page a few pixels wider than the
     viewport. align-items:stretch forces admin-main back to full width so its
     children wrap/scroll internally instead of overflowing the page. */
  .admin-shell{flex-direction:column;gap:1.3rem;align-items:stretch}
  .sidebar{position:static;width:100%;flex-direction:row;overflow-x:auto;gap:0;padding-bottom:.3rem;border-bottom:1px solid var(--line-soft);-webkit-overflow-scrolling:touch;
    /* This is a real, working horizontal scroller holding all 10 sections (Bookings,
       Revenue, Spaces... same tabs as the desktop sidebar) — but with overflow:auto's
       invisible-until-touched scrollbar and every tab the same visual weight, it read
       as if "Overview" were the only option, with no hint anything else existed off
       to the right. Fading the trailing edge is the standard "this scrolls" affordance
       for exactly this shape of horizontal strip. */
    mask-image:linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  }
  .sidebar-group-label{display:none}
  .sidebar .tab{white-space:nowrap;flex-shrink:0;border-left:none;border-bottom:2px solid transparent}
  .sidebar .tab.active{border-left:none;background:transparent;border-bottom-color:var(--ink)}
  .sidebar-account{display:none}
}

/* ── Overview dashboard — stat tiles + recent activity feed, the console's new
   landing page instead of dropping straight into the bookings list. Elevated
   version: an icon badge per tile, a thin-weight number (matches the site's own
   .pricing-card price treatment elsewhere), and a real trend line/sparkline on
   the revenue tile rather than a bare number in an identical box to everything
   else. ── */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem;margin-bottom:2rem}
.stat-card{background:var(--surface);border:1px solid var(--line-soft);padding:1.3rem 1.4rem;cursor:pointer;text-align:left;width:auto;transition:border-color .15s ease,transform .15s ease}
.stat-card:hover{border-color:var(--ink);transform:translateY(-2px)}
.stat-card.plain{cursor:default}
.stat-card.plain:hover{border-color:var(--line-soft);transform:none}
.stat-card.hero{grid-column:span 2;display:flex;justify-content:space-between;align-items:flex-end;gap:1rem}
.stat-icon{width:34px;height:34px;background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;margin-bottom:1.1rem}
.stat-card .stat-value{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:300;font-size:2.4rem;line-height:1;color:var(--ink)}
.stat-card .stat-label{display:flex;align-items:center;gap:.5rem;color:var(--muted);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;margin-top:.6rem}
.stat-trend{font-family:'DM Sans',sans-serif;font-weight:500;letter-spacing:0;text-transform:none;font-size:.72rem}
.stat-trend.up{color:var(--good)}
.stat-trend.down{color:var(--bad)}
.sparkline{flex-shrink:0}

@media (max-width:1100px){ .stat-grid{grid-template-columns:repeat(2,1fr)} .stat-card.hero{grid-column:span 2} }
@media (max-width:560px){ .stat-grid{grid-template-columns:1fr} .stat-card.hero{grid-column:span 1} .rev-hero{flex-direction:column;align-items:flex-start} }

/* The staff dashboard's own 3-stat row — same borderless/divider treatment as the
   customer account overview (#overviewStats below), because 3 numbers stacking into 3 full
   screen-width blocks reads as bulky, desktop-dashboard-shaped, not the "check your phone
   between sessions" glance this portal is actually for. The (ID) selector out-specifies the
   generic .stat-grid mobile rule above, so this stays 3-across at every width; only the
   sizing shrinks further under 560px. */
#bookingStats{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-bottom:1.4rem;border-bottom:1px solid var(--line-soft);padding-bottom:1.1rem}
#bookingStats .stat-card{padding:0 1.1rem;background:transparent;border:0;border-left:1px solid var(--line-soft)}
#bookingStats .stat-card:first-child{padding-left:0;border-left:0}
#bookingStats .stat-icon{display:none}
#bookingStats .stat-card .stat-value{font-size:1.9rem}
#bookingStats .stat-card .stat-label{margin-top:.4rem}
@media (max-width:560px){
  #bookingStats{gap:0;padding-bottom:.9rem}
  #bookingStats .stat-card{padding:0 .6rem}
  #bookingStats .stat-card .stat-value{font-size:1.35rem}
  #bookingStats .stat-card .stat-label{font-size:.56rem;letter-spacing:.04em;margin-top:.3rem}
}

/* Recent activity — a connecting-line timeline instead of a bare bordered list. */
.activity-feed{margin-top:.3rem}
.timeline-row{display:flex;gap:.85rem;padding:.7rem 0}
.timeline-dot{width:7px;height:7px;border-radius:50%;margin-top:.45rem;flex-shrink:0}
.timeline-body{flex:1;display:flex;justify-content:space-between;gap:.8rem;font-size:.85rem;border-top:1px solid var(--line-soft);padding-top:.7rem;margin-top:-.7rem}
.timeline-row:first-child .timeline-body{border-top:none;padding-top:0;margin-top:0}
.timeline-who{color:var(--muted)}
.timeline-time{color:var(--muted);font-size:.75rem;white-space:nowrap}

/* Today's schedule — a compact agenda list, small enough to sit beside activity. */
.agenda-row{display:flex;align-items:center;gap:.75rem;padding:.65rem 0;border-top:1px solid var(--line-soft);font-size:.82rem}
.agenda-row:first-child{border-top:none}
.agenda-time{font-family:'Barlow Condensed',sans-serif;font-weight:700;color:var(--muted);width:2.9rem;flex-shrink:0}
.avatar-chip{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.08);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:700;flex-shrink:0}
.agenda-title{flex:1;min-width:0;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Revenue tab — a hero card (big number + trend line) and a real breakdown
   bar per row (was plain text bars, now labelled tracks matching the room-card
   pricing style), plus a real <table> for transactions instead of a stacked
   list. ── */
.rev-hero{background:var(--surface);border:1px solid var(--line-soft);padding:1.8rem 2rem;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;margin-bottom:1.2rem}
.rev-hero-value{font-family:'Barlow Condensed',sans-serif;font-weight:300;font-size:3.4rem;line-height:1;color:var(--ink)}
.rev-hero-meta{display:flex;align-items:center;gap:1.1rem;margin-top:.7rem;font-size:.8rem}
.period-pills{display:flex;gap:.4rem;flex-wrap:wrap}
.period-pill{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:.55em 1em;border:1px solid var(--line);color:var(--muted);cursor:pointer;background:transparent}
.period-pill.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.revenue-bar-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-size:.88rem;margin-bottom:.5rem}
.revenue-bar-track{height:6px;background:var(--surface2);margin-bottom:1.1rem}
.revenue-bar-fill{height:100%;background:var(--ink)}
.rev-table{border-collapse:collapse;width:100%;font-size:.85rem}
/* Zero horizontal padding relied entirely on whatever slack a column's own content
   happened to leave — fine at desktop widths, but two adjacent short-but-not-that-
   short headers (PENDING/AVAILABLE) with nothing forcing a gap between them
   literally touched at mobile table widths. A real minimum gap, not a coincidental
   one. */
.rev-table th{text-align:left;font-size:.65rem;font-weight:500;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;padding:0 .6rem .7rem 0;border-bottom:1px solid var(--line)}
.rev-table td{padding:.75rem .6rem .75rem 0;border-bottom:1px solid var(--line-soft)}
.rev-table th:last-child,.rev-table td:last-child{padding-right:0}
.rev-table tr:last-child td{border-bottom:none}
.rev-table td.num{text-align:right;font-weight:500}
.rev-table td.muted{color:var(--muted)}

/* ── Room cards (Resources & Pricing) — a real card grid with an icon-badge
   placeholder image, a toggle switch, and a large price teaser, replacing the
   plain bordered-list summary row. ── */
.room-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.1rem}
.room-card{background:var(--surface);border:1px solid var(--line-soft);transition:border-color .18s ease,transform .18s ease}
.room-card:hover{border-color:var(--line);transform:translateY(-2px)}
.room-card-media{position:relative;aspect-ratio:16/10;background:var(--surface2);display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line-soft);color:#3a3835}
.room-card-body{padding:1.2rem 1.3rem 1.3rem}
.room-card-price{font-family:'Barlow Condensed',sans-serif;font-weight:300;font-size:1.7rem;color:var(--ink)}
.room-card-price small{font-size:.62em;color:var(--muted);font-weight:400;font-family:'DM Sans',sans-serif}
.room-card-tags{display:flex;gap:.5rem;flex-wrap:wrap;margin:.9rem 0 1rem}
.room-card-tag{font-size:.62rem;letter-spacing:.05em;color:var(--muted);border:1px solid var(--line);padding:.3em .6em}
.room-card-manage{display:flex;align-items:center;justify-content:space-between;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-decoration:none;border-top:1px solid var(--line-soft);padding-top:1rem;cursor:pointer}

.room-card-media.avatar{aspect-ratio:1/1}
.room-card-media.avatar-placeholder{color:var(--muted);font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:2.4rem}

.space-card{position:relative}
.space-card.inactive{opacity:.55}
.space-card.dragging{opacity:.35}
.space-card.drag-over{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.space-card-drag-handle{position:absolute;top:.5rem;left:.5rem;z-index:2;width:26px;height:26px;border-radius:50%;
  background:rgba(8,8,10,.55);color:#fff;display:flex;align-items:center;justify-content:center;cursor:grab}
.space-card-drag-handle:active{cursor:grabbing}
.space-card-empty{cursor:pointer}
.space-card-empty:hover{border-color:var(--line)}
.space-card-empty .room-card-body{padding:1.2rem 1.3rem 1.3rem;text-align:center}

/* A real colored status badge (Confirmed/Pending/Declined/...), same color
   mapping as the calendar's day chips, sized for a card header instead of a
   4px calendar cell. */
.status-badge{font-size:.62rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:.32em .7em;color:var(--paper);white-space:nowrap}
.status-badge.PENDING_APPROVAL,.status-badge.PENDING_PAYMENT_AUTHORISATION,.status-badge.Pending{background:var(--warn)}
.status-badge.CONFIRMED,.status-badge.Approved{background:var(--good)}
.status-badge.CANCELLED,.status-badge.DECLINED,.status-badge.EXPIRED,.status-badge.NO_SHOW{background:var(--bad)}
.status-badge.COMPLETED{background:var(--muted)}

/* ── Bookings — a real card per booking (was a flat border-separated list)
   with an avatar-initial chip echoing the same treatment used on Overview's
   Today's Schedule and the room cards' people-at-a-glance feel. ── */
.booking-card{background:var(--surface);border:1px solid var(--line-soft);padding:1.2rem 1.4rem;margin-bottom:.8rem}
.booking-card:last-child{margin-bottom:0}
.booking-card-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.booking-card-who{display:flex;align-items:center;gap:.7rem}
.avatar-chip.lg{width:32px;height:32px;font-size:.72rem}

/* A real toggle switch (checkbox styled as a pill) replacing a plain browser
   checkbox for "Active" — the one control on this page that's genuinely
   binary/instant, worth the extra visual weight. */
.toggle-switch{position:relative;display:inline-block;width:34px;height:19px;flex-shrink:0}
.toggle-switch input{opacity:0;width:0;height:0;min-width:0;max-width:0;min-height:0;max-height:0}
.toggle-switch .track{position:absolute;inset:0;background:var(--line);cursor:pointer;transition:background-color .15s ease}
.toggle-switch .track::before{content:'';position:absolute;width:15px;height:15px;left:2px;top:2px;background:var(--paper);transition:transform .15s ease}
.toggle-switch input:checked + .track{background:var(--good)}
.toggle-switch input:checked + .track::before{transform:translateX(15px)}
.activity-what{color:var(--ink)}
.activity-who{color:var(--muted);font-size:.78rem;margin-left:.5rem}
.activity-time{color:var(--muted);font-size:.75rem;white-space:nowrap}

/* ── Account bar — persistent identity/balance strip shown above the booking
   wizard and atop the portal itself, so the app reads as one connected system
   with a logged-in customer's context always visible, not two separate pages. ── */
.account-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem}
.account-bar-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.15rem;text-transform:uppercase}
.account-bar-stats{color:var(--muted);font-size:.85rem;margin-top:.35rem;display:flex;gap:1.3rem;flex-wrap:wrap}
.account-bar-stats strong{color:var(--ink);font-weight:600}
.account-bar-menu{position:relative}
.account-bar-menu > button{width:auto}
.account-bar-dropdown{position:absolute;right:0;top:calc(100% + .5rem);background:var(--surface);border:1px solid var(--line);min-width:200px;z-index:20;display:flex;flex-direction:column;box-shadow:0 8px 24px rgba(0,0,0,.4);
  animation:dropIn .14s ease}
@keyframes dropIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.account-bar-dropdown a,.account-bar-dropdown button{display:block;width:100%;text-align:left;padding:.75rem 1rem;background:transparent;border:none;border-bottom:1px solid var(--line-soft);color:var(--ink);text-decoration:none;font-family:'DM Sans',sans-serif;font-weight:400;text-transform:none;letter-spacing:0;font-size:.88rem;cursor:pointer}
.account-bar-dropdown a:last-child,.account-bar-dropdown button:last-child{border-bottom:none}
.account-bar-dropdown a:hover,.account-bar-dropdown button:hover{background:var(--surface2)}
.account-bar-dropdown a.current{color:var(--muted)}

.sub{margin-left:1.1rem;padding-left:1rem;border-left:1px solid var(--line-soft);margin-top:.7rem}

.edit-section{border:1px solid var(--line-soft);padding:1.2rem 1.3rem;margin-top:1rem}
.edit-section:first-child{margin-top:0}
.edit-section h3{margin-top:0}
.edit-section .sub{margin-left:0;padding-left:0;border-left:none;margin-top:.9rem}
.profile-editor-link{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:8px 0}
.profile-editor-link>span{flex:1;min-width:0;overflow-wrap:anywhere}
.profile-editor-link>button{flex:none}
@media(max-width:520px){.profile-editor-link{flex-direction:column;gap:8px}.profile-editor-link>span{width:100%}}

/* Admin gallery manager — small thumbnail grid + a Remove button under each, used
   identically for room and engineer photos. */
.photo-manager-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.7rem;margin-top:.6rem}
.photo-manager-item{display:flex;flex-direction:column;gap:.4rem}
.photo-manager-thumb{aspect-ratio:4/3;background-size:cover;background-position:center;background-color:var(--surface2);border:1px solid var(--line-soft)}
.photo-manager-item button{width:100%;font-size:.68rem;padding:.4rem 0}
details{margin-top:.7rem}
details > summary{cursor:pointer;color:var(--muted);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;list-style:none}
details > summary::-webkit-details-marker{display:none}
details > summary::before{content:'+ ';color:var(--muted)}
details[open] > summary::before{content:'– '}
hr{border:none;border-top:1px solid var(--line-soft);margin:1.4rem 0}

.addon-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.6rem 0;border-top:1px solid var(--line-soft)}
.addon-row:first-child{border-top:none}
.addon-row label{margin:0;text-transform:none;font-family:'DM Sans',sans-serif;font-size:.92rem;color:var(--ink);display:flex;align-items:center;gap:.5rem;font-weight:400;letter-spacing:0}
.addon-row .addon-price{color:var(--muted);font-size:.8rem}
.addon-row input[type="number"]{width:4rem;padding:.35rem}

/* ── Calendar page ── */
.toolbar{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-bottom:1.4rem}
.toolbar .month-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.3rem;min-width:11ch;text-transform:uppercase}
.toolbar button{padding:.55rem .8rem;width:auto}
.toolbar select{width:auto;padding:.55rem .8rem}
.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.dow{background:var(--surface);text-align:center;font-family:'DM Sans',sans-serif;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:.6rem 0}
.day{background:var(--paper);min-height:5.4rem;padding:.4rem;cursor:pointer}
.day.other-month{opacity:.3}
.day.selected{outline:1px solid var(--ink);outline-offset:-1px}
.day .num{font-family:'DM Sans',sans-serif;font-size:.75rem;color:var(--muted)}
.day .today-badge{background:var(--ink);color:var(--accent-ink);padding:0 .35rem}
.chip{font-family:'DM Sans',sans-serif;font-size:.6rem;letter-spacing:.02em;padding:.12rem .35rem;margin-top:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--paper);font-weight:500}
.chip.PENDING_APPROVAL,.chip.PENDING_PAYMENT_AUTHORISATION{background:var(--warn)}
.chip.CONFIRMED{background:var(--good)}
.chip.CANCELLED,.chip.DECLINED,.chip.EXPIRED,.chip.NO_SHOW{background:var(--bad)}
.chip.COMPLETED{background:var(--muted)}
.more{font-family:'DM Sans',sans-serif;font-size:.6rem;color:var(--muted);margin-top:.2rem}
.detail{margin-top:1.8rem;background:var(--surface);border:1px solid var(--line-soft);padding:1.2rem 1.4rem}
.detail h2{margin:0 0 .9rem;font-size:1.2rem}

/* ── Booking wizard (space / engineer / date-time / review steps) ── */
.wizard-step{margin-bottom:1.5rem}
.back-link{background:none;border:none;color:var(--muted);width:auto;padding:0;margin:0 0 1rem;font-family:'DM Sans',sans-serif;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.back-link:hover{color:var(--ink);opacity:1}
.selection-summary{color:var(--muted);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1rem}

/* A real numbered step tracker across the top of the wizard — was nothing before,
   just back-links, so there was no sense of "how much is left" while booking. Three
   steps, not four, because Date/Guests/Review genuinely share one wizard-step div
   in the markup — a 4th dot would claim a boundary that doesn't actually exist. */
.wizard-progress{display:flex;align-items:center;margin-bottom:2rem;max-width:600px}
.wizard-progress-step{display:flex;align-items:center;gap:.6rem;opacity:.4}
.wizard-progress-step.active,.wizard-progress-step.done{opacity:1}
.wizard-progress-step.done{cursor:pointer}
.wizard-progress-step.done:hover .wizard-progress-dot{background:var(--ink);color:var(--paper)}
.wizard-progress-dot{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);color:var(--muted);display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.85rem;flex-shrink:0}
.wizard-progress-step.active .wizard-progress-dot{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.wizard-progress-step.done .wizard-progress-dot{border-color:var(--ink);color:var(--ink)}
.wizard-progress-step span{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.wizard-progress-step:not(.active) span{color:var(--muted)}
.wizard-progress-line{flex:1;height:1px;background:var(--line-soft);margin:0 1rem}
@media (max-width:640px){.wizard-progress span{display:none}.wizard-progress-line{margin:0 .5rem}}

/* A sticky running-total sidebar beside the wizard, instead of the price only ever
   showing up as text at the very last step. */
.booking-layout{display:grid;grid-template-columns:1fr 320px;gap:2rem;align-items:start}
.booking-summary-card{position:sticky;top:1.5rem;background:var(--surface);border:1px solid var(--line-soft);padding:1.6rem}
.booking-summary-title{font-size:.68rem;font-weight:500;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;margin-bottom:1rem}
.booking-summary-empty{padding:2.2rem 0;text-align:center;color:var(--muted);font-size:.82rem;border:1px dashed var(--line-soft)}
.booking-summary-row{padding:.5rem 0;font-size:.92rem;border-top:1px solid var(--line-soft)}
.booking-summary-row:first-of-type{border-top:none}
.booking-summary-row.muted{color:var(--muted);font-size:.8rem}
.booking-summary-total{display:flex;justify-content:space-between;align-items:center;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line-soft);font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.3rem}
.booking-summary-total span:first-child{font-family:'DM Sans',sans-serif;font-weight:400;font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.booking-summary-breakdown{margin-top:.6rem;padding-top:.6rem;border-top:1px solid var(--line-soft)}
.booking-summary-line{display:flex;justify-content:space-between;gap:.8rem;font-size:.8rem;color:var(--muted);padding:.2rem 0}
.booking-summary-line span:last-child{color:var(--ink)}
.guest-overage-note{border:1px solid var(--warn);background:rgba(224,168,71,.06);padding:.7rem .9rem;font-size:.82rem;margin-top:.6rem}
@media (max-width:900px){.booking-layout{grid-template-columns:1fr}.booking-summary-card{position:static}}

/* Full-bleed photo cards for room selection — was a small thumbnail + text-below
   tile; the first room gets a wider "hero" treatment so the row doesn't read as a
   flat, evenly-weighted list of equally-important options. */
#roomGrid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.room-feature-tile{position:relative;height:280px;overflow:hidden;border:1px solid var(--line-soft);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
.room-feature-tile.hero{grid-column:span 2;height:380px}
.room-feature-tile:hover{transform:translateY(-3px);box-shadow:0 20px 40px -20px rgba(0,0,0,.8)}
.room-feature-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--surface2)}
.room-feature-scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,8,10,.92) 0%,rgba(8,8,10,.1) 55%,transparent 100%)}
.room-feature-tile .info-badge{position:absolute;top:1rem;right:1rem;z-index:2}
.room-feature-price{position:absolute;top:1rem;left:1rem;background:rgba(8,8,10,.7);backdrop-filter:blur(4px);border:1px solid var(--line);padding:.4em .8em;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1rem;z-index:2}
.room-feature-price small{font-size:.65em;font-weight:400;font-family:'DM Sans',sans-serif;color:var(--muted)}
.room-feature-body{position:absolute;left:1.5rem;bottom:1.3rem;right:1.5rem;z-index:1}
.room-feature-title{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.6rem;text-transform:uppercase;line-height:1}
.room-feature-tile.hero .room-feature-title{font-size:2.2rem}
.room-feature-meta{color:var(--muted);font-size:.8rem;margin-top:.3rem}
@media (max-width:700px){#roomGrid{grid-template-columns:1fr}.room-feature-tile.hero{grid-column:span 1;height:280px}}

/* auto-fit (not auto-fill) so a handful of cards stretch to fill the row instead of
   leaving invisible empty column tracks reserved beside them on a wide page. */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.9rem}
.choice-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

.card-tile{background:var(--surface);border:1px solid var(--line-soft);cursor:pointer;overflow:hidden;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.card-tile:hover{border-color:var(--line);transform:translateY(-3px);box-shadow:0 20px 40px -20px rgba(0,0,0,.8)}
.card-tile-img{aspect-ratio:4/3;background-size:cover;background-position:center;background-color:var(--surface2)}
.card-tile-img.placeholder{display:flex;align-items:center;justify-content:center}
.card-tile-img.avatar{aspect-ratio:1/1}
.card-tile-img.avatar.placeholder{color:var(--muted);font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:2.4rem}
.card-tile-img-wrap{position:relative;overflow:hidden}
.card-tile-img{transition:transform .35s ease}
.card-tile:hover .card-tile-img{transform:scale(1.045)}

/* Placeholder tiles (no photo uploaded yet) read as flat, dead boxes against
   the real photos beside them — a subtle off-center gradient plus a thin ring
   around the initial gives them an intentional "avatar" identity instead of
   looking like a broken image. */
.card-tile-img.placeholder{background:radial-gradient(130% 130% at 28% 18%,var(--surface2) 0%,var(--surface) 72%)}
.card-tile-img.avatar.placeholder{position:relative}
.card-tile-img.avatar.placeholder::before{content:'';position:absolute;width:52%;height:52%;max-width:88px;max-height:88px;border:1px solid var(--line);border-radius:50%}
.card-tile-img.avatar.placeholder span{position:relative}
.room-card-media.avatar-placeholder{background:radial-gradient(130% 130% at 28% 18%,var(--surface2) 0%,var(--surface) 72%)}

/* "More info" / "View profile" trigger, overlaid on the tile's photo — a click here
   opens a pop-out instead of selecting the room/engineer, so it needs its own stopped
   click and a target big enough to hit deliberately without ever being what someone
   taps by accident while just trying to pick the tile. */
.info-badge{position:absolute;top:.5rem;right:.5rem;width:28px;height:28px;padding:0;border-radius:50%;
  background:rgba(8,8,10,.68);border:1px solid rgba(255,255,255,.3);color:var(--ink);
  font-family:'DM Sans',serif;font-style:italic;font-weight:700;font-size:.85rem;
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px);
  transition:background-color .15s ease,transform .15s ease}
.info-badge:hover{background:rgba(8,8,10,.9);transform:scale(1.08)}

.card-tile-body{padding:1rem 1.1rem}
.card-tile-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.05rem;text-transform:uppercase;letter-spacing:.01em}
.card-tile-meta{color:var(--muted);font-size:.78rem;margin-top:.3rem;letter-spacing:.02em}
.card-tile-bio{color:var(--muted);font-size:.8rem;margin-top:.5rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.choice-tile{background:var(--surface);border:1px solid var(--line-soft);cursor:pointer;padding:2.2rem 1.4rem;text-align:center;
  transition:border-color .18s ease,background .18s ease,transform .18s ease,box-shadow .18s ease}
.choice-tile:hover{border-color:var(--ink);background:var(--surface2);transform:translateY(-3px);box-shadow:0 20px 40px -20px rgba(0,0,0,.8)}
.choice-icon{width:42px;height:42px;color:var(--ink);margin-bottom:1rem}
.choice-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.35rem;text-transform:uppercase}
.choice-sub{color:var(--muted);font-size:.85rem;margin-top:.5rem}

/* Compact +/- stepper standing in for the (hidden, still-live) #durationHours number
   input — same field, same events, just not a bare spinner box on the page. */
.duration-stepper{display:flex;align-items:stretch;gap:.5rem;margin-top:.3rem}
.duration-stepper button{width:2.8rem;padding:.65rem 0;font-size:1.1rem;flex-shrink:0}
.duration-readout{flex:1;display:flex;align-items:center;justify-content:center;background:var(--paper);border:1px solid var(--line);font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.15rem;letter-spacing:.02em}

/* ── Start-time chips — a plain, obvious tap-to-pick grid (a free-drag timeline shipped
   briefly here and proved more confusing than useful for picking one of a short list of
   valid times — real feedback: "so confusing to navigate"). Grid instead of the old
   flex-wrap wall so rows stay tidy at any count, bigger touch targets than before. */
.time-chip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:.5rem;margin-top:.3rem}
.time-chip{width:auto;background:var(--surface2);border:1px solid var(--line);color:var(--ink);padding:.65rem .5rem;font-size:.85rem;letter-spacing:.02em;text-transform:none;font-weight:400}
.time-chip.selected{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.time-chip.taken,.time-chip:disabled{background:transparent;border-style:dashed;border-color:var(--line-soft);color:var(--muted);opacity:.45;text-decoration:line-through;cursor:not-allowed}
.time-chip-legend{margin:.6rem 0 0}

/* ── Passive time-range preview — confirms the picked span within the day's opening
   hours. Purely visual, deliberately not interactive: nothing to drag, nothing to learn,
   the chips above are the only control. */
.time-preview{margin-top:1rem}
.time-preview-edges{display:flex;justify-content:space-between;font-family:'DM Sans',sans-serif;font-size:.7rem;color:var(--muted);margin-bottom:.4rem}
.time-preview-track{position:relative;height:12px;background:var(--surface2);border:1px solid var(--line-soft)}
.time-preview-blackout{position:absolute;top:0;bottom:0;left:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 6px,transparent 6px 12px)}
.time-preview-fill{position:absolute;top:-1px;bottom:-1px;background:var(--accent)}

/* ── Booking wizard: compact single-select month calendar ── */
/* Side-by-side on wider screens so the extra page width goes toward showing the
   calendar and the times at once, instead of the calendar alone stretching to fill
   the whole card while everything else stacks underneath it. */
@media (min-width:720px){
  .datetime-grid{display:grid;grid-template-columns:400px 1fr;gap:2.4rem;align-items:start}
}
.mini-cal{margin:0 0 1.2rem;max-width:400px}
.block-form-layout{display:grid;grid-template-columns:400px 1fr;gap:2rem;align-items:start}
@media (max-width:760px){.block-form-layout{grid-template-columns:1fr}}
.mini-cal-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7rem}
.mini-cal-toolbar button{width:auto;padding:.4rem .7rem;font-size:.7rem}
.mini-cal-toolbar button:disabled{opacity:.2}
.mini-cal-month{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;font-size:1rem;letter-spacing:.02em}
.mini-cal-dow{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;color:var(--muted);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.4rem}
.mini-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.mini-cal-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid transparent;cursor:pointer;font-family:'DM Sans',sans-serif;font-size:.82rem;color:var(--ink);transition:border-color .15s ease,background-color .15s ease}
.mini-cal-day:hover:not(.disabled):not(.other-month){border-color:var(--line)}
.mini-cal-day.other-month{color:var(--muted);opacity:.3;cursor:default;pointer-events:none}
.mini-cal-day.disabled{color:var(--muted);opacity:.25;cursor:default;pointer-events:none;text-decoration:line-through}
/* Distinct from .disabled — a day that's open but has nothing left bookable (today,
   almost always, once minimum notice is accounted for) stays clickable on purpose,
   so clicking it can explain why via a popup instead of just doing nothing. */
.mini-cal-day.unavailable{color:var(--muted);opacity:.4;cursor:pointer;text-decoration:line-through}
.mini-cal-day.today{border-color:var(--line)}
.mini-cal-day.selected{background:var(--accent);color:var(--accent-ink)}

/* Unambiguous "here's exactly what you're booking" strip — deliberately more
   prominent than a .hint line, since chip-grid highlighting alone (labelled by
   start time only) has proven confusing about where a session actually ends. */
.booking-time-summary{margin-top:1rem;padding:.9rem 1.1rem;background:var(--accent);border:1px solid var(--accent);font-family:'DM Sans',sans-serif;font-size:1rem;color:var(--accent-ink)}
.booking-time-summary b{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.01em}

/* Unowned packages — a real "pop out" (modal) to view details, not just a text line.
   Sits under the time-slot grid, inside the Date & Time card. Deliberately visually
   secondary to #pricingOptions above (this is the only one of the three pricing/
   package sections that isn't already discounting/applying anything). */
.deal-promo{margin-top:1rem;padding:1rem 1.1rem;border:1px solid var(--line);background:var(--surface2)}
.deal-promo .deal-group + .deal-group{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line-soft)}
.deal-promo .deal-row{display:flex;justify-content:space-between;align-items:flex-start;width:100%;background:transparent;border:none;border-top:1px solid var(--line-soft);color:inherit;padding:.6rem 0;font-family:'DM Sans',sans-serif;font-size:.85rem;text-align:left;cursor:pointer;gap:1rem}
.deal-promo .deal-row:first-of-type{border-top:none}
.deal-promo .deal-row:hover .deal-name{color:var(--ink);text-decoration:underline}
.deal-promo .deal-name{color:var(--ink);line-height:1.5}
.deal-promo .deal-price{color:var(--muted);white-space:nowrap}

/* Block/half-day/full-day quick-select — at the top of the Date & Time card, above
   the calendar, deliberately the most visually prominent pricing section (big price
   type) since these are pure win-win discounts requiring nothing to already own,
   unlike the owned-entitlement toggle (moved to Review & Confirm, the checkout step —
   it's a payment-time decision, not a date-picking one). One card per admin-
   configured non-HOURLY pricing rule; clicking sets the duration to exactly what
   that tier needs. */
#pricingOptions{margin-bottom:1.6rem}
.pricing-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.9rem;margin-top:.8rem}
.pricing-card{background:var(--surface2);border:1px solid var(--line);cursor:pointer;padding:1.2rem 1.3rem;text-align:left;width:auto;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.pricing-card:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:0 16px 32px -20px rgba(0,0,0,.8)}
.pricing-card.active{background:var(--accent);border-color:var(--accent)}
.pricing-card .pc-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.05rem;text-transform:uppercase;color:var(--ink)}
.pricing-card.active .pc-label{color:var(--accent-ink)}
.pricing-card .pc-window{font-family:'DM Sans',sans-serif;font-size:.78rem;color:var(--muted);margin-top:.3rem;letter-spacing:.02em}
.pricing-card.active .pc-window{color:var(--accent-ink);opacity:.75}
.pricing-card .pc-price{font-family:'Barlow Condensed',sans-serif;font-weight:300;font-size:1.7rem;margin-top:.6rem;color:var(--ink)}
.pricing-card.active .pc-price{color:var(--accent-ink)}

/* ── Portfolio player (engineer.html + the booking-flow profile pop-out) — a real
   embedded, playable player instead of plain outbound links, per the brief's own
   "detect service, render appropriate embed/player safely" requirement. One "now
   playing" stage plus a track list underneath, so tracks from different services
   (Spotify/YouTube/Apple Music) read as one cohesive player. Embed URLs are built
   from each platform's own official /embed/ pattern — never raw third-party embed
   HTML accepted or injected. ── */
.portfolio-player{margin-top:1rem}
/* Stage + transport bar share one bordered frame so a multi-track portfolio
   reads as one player with controls attached, not a widget floating above an
   unrelated list. */
.portfolio-player-frame{border:1px solid var(--line-soft);overflow:hidden;margin-bottom:.8rem}
.portfolio-player-stage{background:var(--surface2);overflow:hidden}
.portfolio-player-empty{padding:2.4rem 1rem;text-align:center;color:var(--muted);font-size:.85rem}
.portfolio-yt-wrap{position:relative;padding-bottom:56.25%;height:0}
.portfolio-yt-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:none}
.portfolio-player-transport{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.5rem .8rem;border-top:1px solid var(--line-soft);background:var(--surface)}
.portfolio-player-transport-btn{width:28px;height:28px;flex-shrink:0;border-radius:50%;background:transparent;border:1px solid var(--line-soft);color:var(--ink);font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer}
.portfolio-player-transport-btn:hover{background:var(--surface2)}
.portfolio-player-transport-btn:disabled{opacity:.3;cursor:default}
.portfolio-player-counter{color:var(--muted);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase}
.portfolio-player-tracks{border:1px solid var(--line-soft)}
.portfolio-track-row{display:flex;align-items:center;gap:.65rem;width:100%;background:transparent;border:none;border-top:1px solid var(--line-soft);color:var(--ink);padding:.65rem .9rem;text-align:left;cursor:pointer;font-family:'DM Sans',sans-serif;font-size:.85rem}
.portfolio-track-row:first-child{border-top:none}
.portfolio-track-row:hover{background:var(--surface)}
.portfolio-track-row.active{background:var(--surface)}
.portfolio-track-row.active .portfolio-track-title{font-weight:600}
.portfolio-track-num{width:1.3rem;flex-shrink:0;color:var(--muted);font-size:.72rem;font-variant-numeric:tabular-nums}
.portfolio-track-row.active .portfolio-track-num{color:var(--ink)}
.portfolio-track-icon{width:16px;height:16px;flex-shrink:0;opacity:.75}
.portfolio-track-row.active .portfolio-track-icon{display:none}
.portfolio-now-playing{display:none;align-items:flex-end;gap:2px;width:16px;height:14px;flex-shrink:0}
.portfolio-track-row.active .portfolio-now-playing{display:inline-flex}
.portfolio-now-playing span{width:3px;background:var(--ink);border-radius:1px;animation:portfolioNowPlaying .9s ease-in-out infinite}
.portfolio-now-playing span:nth-child(2){animation-delay:.2s}
.portfolio-now-playing span:nth-child(3){animation-delay:.4s}
@keyframes portfolioNowPlaying{0%,100%{height:4px}50%{height:14px}}
.portfolio-track-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.portfolio-track-service{color:var(--muted);font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;flex-shrink:0}

/* ── Staff portal — a real hero header (photo/initials, name, capability tags, an
   approval badge) instead of a generic page title, plus a two-column dashboard
   (stats + requests, a profile snapshot in the sidebar) instead of the requests
   list being the entire page. ── */
.staff-hero{position:relative;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;
  padding-bottom:1.6rem;margin-bottom:1.6rem;border-bottom:1px solid var(--line-soft);background-size:cover;background-position:center}
.staff-hero.with-banner{padding:1.8rem;margin-bottom:1.6rem;border:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);overflow:hidden}
/* Only an uploaded photo needs a heavy scrim for text contrast — the built-in
   gradient styles are already dark and legible on their own, and a strong scrim
   on top of one just washes it out to near-black, defeating the point of
   showing "their chosen banner" at all. */
.staff-hero.with-photo-banner::before{content:'';position:absolute;inset:0;background:linear-gradient(100deg,rgba(8,8,10,.88),rgba(8,8,10,.45));z-index:0}
.staff-hero.with-banner > *{position:relative;z-index:1}
.staff-hero-who{display:flex;align-items:center;gap:1.2rem}
/* min-width:0 overrides the flex default (min-width:auto), which otherwise refuses
   to shrink this column below its content's longest unbreakable run — the email
   address — and overflows the viewport at mobile widths instead of wrapping,
   clipping the "Verified" tag that follows it clean off the edge. */
.staff-hero-info{min-width:0}
.staff-hero-avatar{width:92px;height:92px;border-radius:50%;background:var(--surface2);border:1px solid var(--line);color:var(--muted);display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.9rem;flex-shrink:0;background-size:cover;background-position:center}
.staff-hero.with-banner .staff-hero-avatar{border:3px solid var(--paper)}
.staff-hero-name{margin:0;font-size:1.7rem}
.staff-hero-contact{display:flex;gap:1rem;flex-wrap:wrap;font-size:.78rem;color:var(--muted);margin-top:.35rem}
.staff-hero.with-banner .staff-hero-contact{color:rgba(240,237,232,.75)}
.verified-tag{color:var(--good);font-size:.65rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;margin-left:.4rem}
.staff-hero-meta{color:var(--muted);font-size:.8rem;margin-top:.3rem}
.staff-hero-meta a{color:var(--muted);text-decoration:underline}
.staff-hero.with-banner .staff-hero-meta a{color:rgba(240,237,232,.75)}
.staff-hero-actions{display:flex;flex-direction:column;align-items:flex-end;gap:.6rem}
.staff-hero-logout{width:auto;font-size:.75rem;padding:.4rem .9rem}

/* Reusable built-in banner gradients — same values as engineer.html's own copy
   (kept there too rather than risk touching that file's inline styles this pass),
   shared here so any other page's hero can use a bannerStyle without duplicating
   the six gradients a third time. */
.banner-style-picker{display:flex;flex-wrap:wrap;gap:.5rem;margin:.6rem 0 1rem}
.banner-style-swatch{width:64px;height:38px;border:2px solid var(--line);cursor:pointer;flex-shrink:0;padding:0}
.banner-style-swatch:hover{border-color:var(--muted)}
.banner-style-swatch.active{border-color:var(--ink)}
.banner-style-none{width:64px;height:38px;border:1px dashed var(--line);cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:.62rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:.03em;text-align:center;line-height:1.15;background:none;font-family:'DM Sans',sans-serif}
.banner-style-none.active{border-style:solid;border-color:var(--ink);color:var(--ink)}
.banner-style-charcoal{background:linear-gradient(135deg,#2a2a2d,#0a0a0b)}
.banner-style-amber{background:linear-gradient(135deg,#4a3418,#0f0d0a)}
.banner-style-forest{background:linear-gradient(135deg,#213524,#0a0d0a)}
.banner-style-rust{background:linear-gradient(135deg,#48281f,#0f0a09)}
.banner-style-slate{background:linear-gradient(135deg,#262b33,#0a0b0d)}
.banner-style-stripe{background:repeating-linear-gradient(45deg,#17171a,#17171a 12px,#0c0c0e 12px,#0c0c0e 24px)}

/* Pending requests get real visual weight — an accent-bordered section that's
   always present, even empty, so it never leaves a bare line of muted text
   floating next to the full-height profile card beside it (the "smaller box
   looks crooked/out of place" complaint on this page). */
.pending-section{border:1px solid var(--warn);background:rgba(224,168,71,.06);padding:1.2rem 1.4rem;margin-bottom:1.2rem}
.pending-section h2{margin-top:0;display:flex;align-items:center;font-size:1.05rem}
.pending-empty{border:1px solid var(--line-soft);padding:1.2rem 1.4rem;color:var(--muted);margin-bottom:1.2rem;text-align:center;font-size:.88rem}
.staff-dash-grid{display:grid;grid-template-columns:1fr 300px;gap:1.3rem;align-items:start;margin-top:1.5rem}
@media (max-width:900px){.staff-dash-grid{grid-template-columns:1fr}}

/* Admin's Overview (Recent Activity / Today's Schedule) and Revenue (By Room / Owed
   to Staff) tabs shared this exact same two-even-column layout, both previously an
   inline style with no mobile override at all — same class for both since neither
   actually needed a different ratio, just consistent side-by-side-on-desktop,
   stacked-on-mobile behaviour every other two-column area in this app already has. */
.admin-overview-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media (max-width:900px){.admin-overview-grid{grid-template-columns:1fr}}

/* .row's flex:1/min-width:150px children (e.g. the revenue From/To/Apply date
   filter) can't actually shrink below that on narrow phones — native
   input[type=date] controls carry their own intrinsic min-content width that
   flex-shrink can't override, so the row pushes the whole page into a few
   pixels of horizontal scroll instead of wrapping cleanly. Below 520px, force
   every row child to full width so they stack instead of fighting for space. */
@media (max-width:520px){.row>*{min-width:100%}}

/* ── Account overview — a featured next-session banner (real room photo, when the
   room has one) and a two-column layout (packages + a real recent-activity feed,
   derived from actual booking/package timestamps — never fabricated) instead of
   everything stacked in one column. ── */
.next-session-banner{position:relative;height:180px;overflow:hidden;border:1px solid var(--line-soft);margin-bottom:2rem;cursor:pointer}
.next-session-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--surface2)}
.next-session-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,8,10,.94) 35%,rgba(8,8,10,.5) 70%,transparent 100%)}
.next-session-body{position:absolute;left:2rem;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center}
.account-overview-grid{display:grid;grid-template-columns:1fr 320px;gap:1.5rem;align-items:start}
@media (max-width:900px){.account-overview-grid{grid-template-columns:1fr}}

/* A real, owned entitlement the customer can actually apply — auto-applied by
   default (on by default per request), toggle to turn off. Distinct from
   .deal-promo, which only ever advertises packages they don't have yet. */
.entitlement-card{border:1px solid var(--good);background:rgba(127,174,130,.08);padding:1.1rem 1.2rem;margin-bottom:1.2rem}
.entitlement-card label.inline{margin:0;display:flex;align-items:flex-start;gap:.6rem;text-transform:none;letter-spacing:0;font-size:.92rem;color:var(--ink)}
.entitlement-card label.inline input[type=checkbox]{margin-top:.2rem}
.entitlement-card select{margin-top:.7rem;max-width:340px}
.entitlement-card .entitlement-hours{color:var(--good);font-weight:500}

/* Package detail pop-out */
/* Above #siteNav's sticky header (site-nav.css, z-index:100) — at z-index:60 this sat BEHIND
   the nav, hiding the close button under it on every page that uses the plain workspace
   header (staff, admin); only customer-site pages had their own override for this already. */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;z-index:150;padding:1.5rem;
  animation:overlayIn .16s ease}
.modal-box{background:var(--surface);border:1px solid var(--line);max-width:440px;width:100%;padding:1.8rem;position:relative;
  max-height:calc(100vh - 3rem);overflow-y:auto;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.85);animation:modalIn .18s ease}
.modal-box.wide{max-width:760px}
@keyframes overlayIn{from{opacity:0}to{opacity:1}}
@keyframes modalIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal-close{position:absolute;top:.7rem;right:.9rem;width:auto;background:transparent;border:none;color:var(--muted);font-size:1.6rem;padding:.2rem .5rem;line-height:1}
.modal-close:hover{color:var(--ink);opacity:1}
.modal-box .modal-price{font-family:'Barlow Condensed',sans-serif;font-weight:300;font-size:2.2rem;color:var(--ink);margin:.8rem 0}

/* Room / engineer "quick review" pop-out (reuses the same .modal-overlay/.modal-box
   shell as the package pop-out above) — a photo gallery bleeding to the modal's edges,
   admin-set description/bio copy, every rate + any deals, and (for engineers) their
   social/portfolio links. */
.modal-gallery{position:relative;margin:.9rem -1.8rem 1rem;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.modal-gallery-main{aspect-ratio:16/10;background-size:cover;background-position:center;background-color:var(--surface2)}
.modal-gallery-nav{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;padding:0;border-radius:50%;
  background:rgba(8,8,10,.6);border:1px solid rgba(255,255,255,.35);color:#fff;font-size:1.2rem;line-height:1;
  display:flex;align-items:center;justify-content:center}
.modal-gallery-nav:hover{background:rgba(8,8,10,.85);opacity:1;transform:translateY(-50%)}
.modal-gallery-nav.prev{left:.6rem}
.modal-gallery-nav.next{right:.6rem}
.modal-gallery-dots{position:absolute;bottom:.6rem;left:0;right:0;display:flex;justify-content:center;gap:.4rem}
.modal-gallery-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4);cursor:pointer}
.modal-gallery-dot.active{background:#fff}

.modal-body-text{color:var(--ink);font-size:.92rem;line-height:1.55;margin-top:1rem}
.amenity-list{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.9rem}
.amenity-chip{font-family:'DM Sans',sans-serif;font-size:.72rem;letter-spacing:.03em;color:var(--muted);
  border:1px solid var(--line);padding:.3rem .6rem}

/* An engineer's own editable genre tags (staff.html) — same visual weight as an
   amenity chip, plus an inline remove button, since this list is theirs to manage. */
.genre-tag-list{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.6rem}
.genre-tag{display:inline-flex;align-items:center;gap:.4rem;font-family:'DM Sans',sans-serif;font-size:.72rem;
  letter-spacing:.03em;color:var(--ink);border:1px solid var(--line);padding:.3rem .3rem .3rem .6rem}
.genre-tag-remove{background:none;border:none;color:var(--muted);cursor:pointer;font-size:.9rem;line-height:1;padding:0 .15rem}
.genre-tag-remove:hover{color:var(--bad)}

/* One-click suggested pills (specialisms today) — visually lighter/dashed than an
   already-added tag, so the two states ("suggested" vs. "yours") read differently
   at a glance without needing separate copy to explain it. */
.pill-suggestion-list{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem}
.pill-suggestion{font-family:'DM Sans',sans-serif;font-size:.72rem;letter-spacing:.03em;color:var(--muted);
  background:none;border:1px dashed var(--line);padding:.3rem .6rem;cursor:pointer}
.pill-suggestion:hover{border-color:var(--muted);color:var(--ink)}
.pill-suggestion:disabled{opacity:.5;cursor:default}

/* A small icon badge next to a platform picker (social links) so the control
   isn't just plain option text — reused for both the add-row form and the
   already-added list. */
.social-platform-row{display:flex;align-items:center;gap:.5rem}
.social-platform-icon{width:20px;height:20px;flex-shrink:0;color:var(--muted)}
.social-platform-icon svg{width:100%;height:100%}
.profile-editor-link .social-platform-icon{margin-right:.2rem}

/* A small circular pencil badge overlaid on a photo to trigger a real file-upload
   picker — used anywhere in the app an image is editable in place (engineer
   profile banner/avatar, admin's room card photo), instead of a plain "paste a
   URL" text field. Positioning is left to the parent (which needs its own
   position:relative) via a modifier class or inline style per use site. */
.photo-edit-btn{position:absolute;width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--paper);
  border:2px solid var(--paper);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3;padding:0}
.photo-edit-btn:hover{opacity:.85}
.photo-edit-btn svg{width:15px;height:15px}

.modal-section-label{font-family:'DM Sans',sans-serif;font-size:.68rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin:1.1rem 0 .2rem}
.modal-rate-list{margin-top:.7rem;border-top:1px solid var(--line-soft)}
.modal-rate-row{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--line-soft);
  font-size:.88rem;color:var(--ink)}

.modal-link-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.modal-link-btn{display:inline-block;background:transparent;border:1px solid var(--line);color:var(--ink);
  padding:.5rem .9rem;font-family:'DM Sans',sans-serif;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  font-size:.7rem;text-decoration:none;transition:border-color .15s ease,background-color .15s ease}
.modal-link-btn:hover{border-color:var(--ink);background:var(--surface2)}
.modal-link-list{margin-top:.9rem;border-top:1px solid var(--line-soft)}
.modal-link-row-item{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.75rem 0;
  border-bottom:1px solid var(--line-soft);color:var(--ink);text-decoration:none;font-size:.88rem}
.modal-link-row-item:hover span:first-child{text-decoration:underline}
.modal-link-service{color:var(--muted);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}

.modal-full-profile-link{display:block;margin-top:1.2rem;color:var(--ink);font-size:.82rem;text-decoration:underline;text-underline-offset:3px}
.modal-full-profile-link:hover{color:var(--muted)}

.contact-social-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.contact-social-btn{display:flex;align-items:center;justify-content:center;width:42px;height:42px;flex-shrink:0;
  border-radius:50%;background:transparent;border:1px solid var(--line);color:var(--ink);
  transition:border-color .15s ease,background-color .15s ease,color .15s ease}
.contact-social-btn svg{width:18px;height:18px}
.contact-social-btn:hover{border-color:var(--ink);background:var(--surface2)}

[hidden]{display:none!important}

/* Customer pages follow the approved homepage: 1360px canvas, cream/black,
   condensed editorial headings, square edges and quiet section dividers.
   Scoped so operational dashboards and the homepage keep their own layouts. */
.customer-site{
  --page-max:1360px;--page-gutter:clamp(24px,5vw,56px);--section-gap:clamp(32px,4vw,56px);
  --muted:#aaa69f;--line:rgba(240,237,232,.18);--line-soft:rgba(240,237,232,.1);
  line-height:1.65;
}
.customer-site>.page{max-width:var(--page-max);padding:clamp(32px,4vw,56px) var(--page-gutter) 80px}
.customer-site>.page.narrow{max-width:760px}
.customer-site h1{font-size:clamp(48px,6vw,80px);line-height:.94;letter-spacing:-.01em;margin-bottom:24px;text-wrap:balance}
.customer-site h2{font-size:clamp(26px,2.7vw,36px);line-height:1.05;margin-bottom:16px}
.customer-site h3{font-size:24px;line-height:1.1}
.customer-site .eyebrow{font-size:11px;letter-spacing:.2em;margin-bottom:12px}
.customer-site .page-intro{max-width:60ch;color:var(--muted);font-size:16px;margin:0 0 var(--section-gap)}
.customer-site .hint{font-size:14px;line-height:1.65}
.customer-site .card{box-shadow:none;border-color:var(--line-soft);padding:24px}
.customer-site :is(.card,.item,.booking,.booking-row,.profile-section)>:last-child{margin-bottom:0}
.customer-site :is(.row,.booking-layout,.profile-layout,.account-overview-grid)>*{min-width:0}
.customer-site :is(.meta,.hint,.item-meta,.booking-summary-row,.account-bar-name){overflow-wrap:anywhere}

/* Controls share dimensions and feedback. Selection controls keep their own
   compact layout; primary form actions retain the homepage's uppercase language. */
.customer-site :is(button,.modal-link-btn,.deal-store-link){min-height:44px;border-radius:0;box-shadow:none;transition:color .15s,background-color .15s,border-color .15s,opacity .15s}
.customer-site button:hover,.customer-site button:active{transform:none}
.customer-site button:not(.secondary):not(.tab):not(.back-link){letter-spacing:.08em}
.customer-site button.secondary{border-color:var(--line);background:transparent}
.customer-site button:disabled{opacity:.45;cursor:not-allowed}
.customer-site :is(input,select,textarea){font-size:16px;line-height:1.5;min-width:0;border-color:var(--line);color-scheme:dark}
.customer-site :is(input:not([type=checkbox]):not([type=radio]),select){min-height:48px}
.customer-site a{color:var(--ink);text-underline-offset:3px}
.customer-site a:hover{color:var(--ink)}
.customer-site .hint a,.customer-site .msg a,.customer-site main a:not(.public-button):not(.staff-store-card){color:var(--ink)}
.customer-site .core-price-options>div span:first-child,.customer-site .core-price-choice span:first-child{font-family:'Barlow Condensed',sans-serif;font-size:.95rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em}
.customer-site .core-price-options strong{font-size:1.35rem;font-weight:300;letter-spacing:0}
.customer-site .core-price-choice[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);outline:0}
.customer-site .core-price-choice[aria-pressed="true"] span{color:inherit;opacity:.8}
.customer-site .core-price-choice[aria-pressed="true"] strong{color:inherit;opacity:1}
.customer-site label{font-size:13px;letter-spacing:0;text-transform:none;line-height:1.5;color:var(--ink);margin:20px 0 8px}
.customer-site label.inline{font-size:14px;gap:8px}
.customer-site :is(input[type=checkbox],input[type=radio]){accent-color:var(--ink);width:18px;height:18px;flex-shrink:0}
.customer-site :is(input,select,textarea):focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.customer-site .field-error{font-size:13px;color:var(--bad)}
.customer-site .password-visibility{min-height:36px;padding:6px 0;border:0;text-transform:none;letter-spacing:0;font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.customer-site .auth-wrap{max-width:480px;margin:0 auto}
.customer-site .auth-card{background:transparent;border:0;border-top:1px solid var(--line);padding:24px 0 0}
.customer-site .auth-card h2{font-size:24px}
.customer-site .auth-card label:first-of-type{margin-top:0}

/* Compact account context, consistent with navigation rather than another card. */
.customer-site .account-bar{padding:16px 0;margin:8px 0 28px;background:transparent;border:0;border-bottom:1px solid var(--line);gap:12px 24px}
.customer-site .account-bar>div:first-child{min-width:0;flex:1}
.customer-site .account-bar-name{font-size:18px;line-height:1.3}
.customer-site .account-bar-stats{font-size:13px;line-height:1.6;gap:4px 16px;margin-top:6px}
.customer-site .account-bar-menu>button{background:transparent;border:0;padding:8px 0;letter-spacing:.04em;font-size:12px}
.customer-site .account-bar-dropdown{max-width:calc(100vw - 48px);box-shadow:0 2px 8px #0003;animation:none;z-index:110}
.customer-site .account-bar-dropdown :is(a,button){min-height:44px;font-size:14px}

/* Booking: equal space choices, legible progress and a summary below the header. */
.customer-site .wizard-progress{max-width:none;gap:0;margin:0 0 32px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.customer-site .wizard-progress-step{opacity:1;gap:8px}
.customer-site .wizard-progress-step span{display:inline;font-size:12px;letter-spacing:0;text-transform:none;color:var(--muted)}
.customer-site .wizard-progress-step.active span{color:var(--ink);font-weight:700}
.customer-site .wizard-progress-dot{width:28px;height:28px;font-family:'DM Sans',sans-serif;font-size:12px}
.customer-site .wizard-progress-line{margin:0 20px;background:var(--line)}
.customer-site .booking-layout{grid-template-columns:minmax(0,1fr) 300px;gap:40px}
.customer-site .booking-layout:has(.booking-summary-empty){grid-template-columns:minmax(0,1fr)}
.customer-site .booking-summary-card:has(.booking-summary-empty){display:none}
.customer-site .booking-summary-card{top:96px;padding:24px;max-height:calc(100dvh - 120px);overflow-y:auto;border:1px solid var(--line);box-shadow:none}
.customer-site .booking-summary-title{font-size:12px;letter-spacing:.12em}
.customer-site .booking-summary-total{font-size:32px;border-color:var(--line)}
.customer-site .booking-summary-line{gap:16px;font-size:13px;line-height:1.6}
.customer-site .booking-summary-line span:first-child{flex:0 0 35%}
.customer-site .booking-summary-line span:last-child{min-width:0;overflow-wrap:anywhere;text-align:right}
.customer-site #roomGrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.customer-site :is(.room-feature-tile,.room-feature-tile.hero){grid-column:auto;height:340px;box-shadow:none;transform:none;transition:border-color .15s}
.customer-site .room-feature-tile:hover{border-color:var(--ink)}
.customer-site .room-feature-body{left:24px;right:24px;bottom:24px}
.customer-site :is(.room-feature-title,.room-feature-tile.hero .room-feature-title){font-size:clamp(28px,3vw,40px)}
.customer-site .room-feature-price{background:var(--paper);backdrop-filter:none;border:0;font-size:18px;padding:8px 12px}
.customer-site .room-feature-meta{color:#c7c2ba;font-size:14px}
.customer-site .info-badge{width:44px;height:44px;min-height:44px;backdrop-filter:none;background:var(--paper);font-size:16px;border-radius:50%;font-style:normal;text-transform:none}
.customer-site .back-link{min-height:44px;margin:0 0 16px;letter-spacing:.06em;font-size:12px;text-align:left}
.customer-site .selection-summary{font-size:13px;letter-spacing:0;text-transform:none;line-height:1.6}
.customer-site .choice-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.customer-site .choice-tile{padding:24px;text-align:left;box-shadow:none;transform:none;border-color:var(--line);transition:border-color .15s,background-color .15s}
.customer-site .choice-icon{width:32px;height:32px;margin-bottom:16px}
.customer-site .choice-title{font-size:26px;line-height:1.1}
.customer-site .choice-sub{font-size:14px}
.customer-site #stepDetails>.card{padding:24px 0 0;margin-top:28px;background:transparent;border:0;border-top:1px solid var(--line)}
.customer-site .datetime-grid{display:grid;grid-template-columns:minmax(250px,1fr) minmax(0,1fr);gap:24px;align-items:start}
.customer-site .mini-cal{max-width:none;margin-bottom:24px}
.customer-site .mini-cal-toolbar button{min-width:44px;font-size:16px}
.customer-site .mini-cal-month{font-size:22px}
.customer-site .mini-cal-dow{font-size:11px}
.customer-site .mini-cal-day{font-size:14px;min-height:36px;line-height:1;padding:0}
.customer-site .mini-cal-day.selected{border-color:var(--ink)}
.customer-site .mini-cal-day.disabled{opacity:.45}
.customer-site .duration-stepper button{width:48px;min-height:48px}
.customer-site .duration-readout{font-size:24px}
.customer-site .time-chip-grid{grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:8px}
.customer-site .time-chip{min-height:44px;font-size:14px;letter-spacing:0!important}
.customer-site .booking-time-summary{background:var(--surface2);border-color:var(--line);color:var(--ink);font-size:15px;padding:16px}
.customer-site .booking-time-summary b{font-weight:700}
.customer-site :is(.pricing-card,.card-tile,.room-card):hover{transform:none;box-shadow:none}
.customer-site .pricing-card-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.customer-site .pricing-card{padding:20px;background:transparent}
.customer-site .pricing-card.active{background:var(--accent)}
.customer-site .pricing-card .pc-label{font-size:22px;line-height:1.15}
.customer-site .pricing-card .pc-price{font-size:32px}
.customer-site .booking-package-offers{margin-top:24px;border-top:1px solid var(--line-soft);padding-top:8px}
.customer-site .booking-package-offers:has(#dealPromo[hidden]){display:none}
.customer-site .booking-package-offers>summary{min-height:44px;display:flex;align-items:center;gap:8px;font-size:14px;letter-spacing:0;text-transform:none;color:var(--ink)}
.customer-site .deal-promo-stack{display:grid;gap:8px;margin:24px 0 0}
.customer-site .deal-promo{padding:0;margin:0;background:transparent;border:0}
.customer-site .deal-promo>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;background:transparent;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--ink);font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:900;text-transform:uppercase;letter-spacing:.01em}
.customer-site .deal-promo>summary::before{content:none}
.customer-site .deal-promo>summary::-webkit-details-marker{display:none}
.customer-site .deal-promo>summary>span{font-family:'DM Sans',sans-serif;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.customer-site .deal-promo>summary>span b{font-family:'Barlow Condensed',sans-serif;font-size:20px;line-height:0;margin-left:6px}
.customer-site .deal-promo[open]>summary>span b{font-size:18px}
.customer-site .deal-promo-body{padding:16px 0 0}
.customer-site .deal-promo .deal-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
.customer-site .deal-promo .deal-group>.eyebrow{grid-column:1/-1}
.customer-site .deal-promo .deal-package-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;grid-column:1/-1}
.customer-site .deal-promo .deal-cycle{border-top:1px solid var(--line-soft);padding:12px 0 0;min-width:0}
.customer-site .deal-promo .deal-cycle h4{margin:0;font-family:'Barlow Condensed',sans-serif;font-size:16px;text-transform:uppercase;letter-spacing:.02em}
.customer-site .deal-promo .deal-cycle .hint{margin:2px 0 4px;font-size:12px}
.customer-site .deal-promo .deal-row{min-height:0;padding:12px 0;text-transform:none;letter-spacing:0!important;gap:12px;font-size:14px}
.customer-site .deal-promo .deal-name{min-width:0;overflow-wrap:anywhere}
.customer-site .deal-promo .deal-price{font-size:13px}
.customer-site .deal-promo-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding-bottom:12px}
.customer-site .deal-promo-heading strong{font-family:'Barlow Condensed',sans-serif;font-size:22px;text-transform:uppercase}
.customer-site .deal-promo-heading a{font-size:12px;font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.customer-site .deal-promo .deal-name b,.customer-site .deal-promo .deal-name span{display:block}
.customer-site .deal-promo .deal-name span,.customer-site .deal-staff-rate{color:var(--muted);font-size:12px;margin-top:3px}
.customer-site .deal-staff-rate{display:block;margin:0 0 8px}
@media(max-width:640px){.customer-site .deal-promo .deal-package-columns{grid-template-columns:minmax(0,1fr);gap:0}}
.customer-site #submitBooking{min-height:48px;margin-top:20px;min-width:240px}
.customer-site #guestCount{max-width:160px}

/* Staff directory and profiles: consistent image scale and readable names. */
.customer-site #teamGrid{margin-top:0}
.customer-site #teamGrid>.card-grid,/* auto-fit (not a fixed 4 columns) so a section with fewer people — Photography
   & Video only ever has two — stretches to fill the row instead of leaving half
   of it as dead black space next to two undersized cards. */
.customer-site #teamGrid>section>.card-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.customer-site #teamGrid>section>h2{margin:32px 0 20px!important;padding-top:24px;border-top:1px solid var(--line)}
.customer-site #teamGrid>section:first-child>h2{margin-top:0!important}
.customer-site :is(#teamGrid,#engineerGrid) .card-tile{background:transparent;border:0;border-bottom:1px solid var(--line);display:flex;flex-direction:column}
.customer-site :is(#teamGrid,#engineerGrid) .card-tile-img.avatar{aspect-ratio:4/3}
.customer-site :is(#teamGrid,#engineerGrid) .card-tile-body{padding:20px 0 12px}
.customer-site .card-tile-title{font-size:24px;line-height:1.1}
.customer-site .card-tile-bio{font-size:14px;line-height:1.65;-webkit-line-clamp:3}
.customer-site .team-card-tags{padding:0 0 20px;gap:8px;margin-top:auto}
.customer-site .team-card-tags .room-card-tag{border:0;padding:0;font-size:12px;letter-spacing:0}
.customer-site .team-card-tags .room-card-tag+.room-card-tag::before{content:' / ';padding-right:8px}
.customer-site .engineer-hero{margin-bottom:32px;border:0;border-bottom:1px solid var(--line);background:transparent}
.customer-site .engineer-hero-body{padding:0 0 28px;gap:24px}
.customer-site .engineer-hero-name{font-size:clamp(40px,5vw,64px);margin:0;overflow-wrap:anywhere}
.customer-site .engineer-hero-body>div:last-child{min-width:0}
.customer-site .engineer-hero.with-photo{height:360px}
.customer-site .engineer-hero.with-photo .engineer-hero-body{padding:24px}
.customer-site .profile-layout>.card{padding:24px 0 0;border:0;border-top:1px solid var(--line);background:transparent}
.customer-site .public-deals-card{border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0;background:transparent}
.customer-site .public-deals-prompt{border-left:0;border-top:1px solid var(--line);padding:20px 0;background:transparent}
.customer-site .deal-store-link{align-items:center;justify-content:center;font-size:12px;text-transform:uppercase;letter-spacing:.08em;padding:12px 20px;font-weight:500}
.customer-site .public-deals-prompt .deal-store-link{background:transparent;color:var(--ink);border-color:var(--line)}
.customer-site #engineerSidebarCard>.public-deals-prompt:first-child{border-top:0;padding-top:0}
.customer-site .contact-social-btn{border-radius:0;min-width:44px;min-height:44px}
.customer-site .deal-page{max-width:var(--page-max)}
.customer-site .deal-owner{gap:24px;padding-bottom:28px}
.customer-site .deal-owner-avatar{flex-shrink:0;width:80px;height:80px}
.customer-site .deal-owner h1{font-size:clamp(40px,5vw,64px);margin:0;overflow-wrap:anywhere}
.customer-site .deal-group{margin:40px 0}
.customer-site .deal-group h2{padding-bottom:16px}
.customer-site .deal-row{padding:24px;background:var(--paper)}
.customer-site .deal-row h3{font-size:24px;line-height:1.15}
.customer-site .deal-row p{font-size:14px;line-height:1.65;margin-top:8px}

/* Catalogue sections and customer account use dividers instead of nested boxes. */
.customer-site #packagesSection{padding:24px 0 0;border:0;border-top:1px solid var(--line);background:transparent}
.customer-site #packagesSection .section-icon{display:none}
.customer-site #packagesSection .store-pkg-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;border:0}
.customer-site #packagesSection .store-pkg-card{border:0;border-bottom:1px solid var(--line);padding:24px 0;min-height:0}
.customer-site #packagesSection .pc-icon{display:none}
.customer-site .package-facts{gap:16px;padding-top:16px}
.customer-site .package-fact-value{font-size:28px}
.customer-site .package-kind{font-size:11px;letter-spacing:.1em}
.customer-site .package-scope{font-size:14px;line-height:1.6}
.customer-site .package-section{margin-top:32px}
.customer-site .package-section-heading{padding-bottom:16px;gap:16px}
.customer-site .package-section-heading h3{font-size:28px}
.customer-site .staff-store-grid{background:transparent;border:0;gap:0 24px;grid-template-columns:repeat(2,minmax(0,1fr))}
.customer-site .staff-store-card{padding:20px 0;background:transparent;border-bottom:1px solid var(--line)}
.customer-site .staff-store-card-body strong{font-size:22px;line-height:1.2}
.customer-site .staff-store-card-body span{font-size:13px;line-height:1.6}
.customer-site .staff-store-link{font-size:11px;letter-spacing:.06em}
.customer-site #studio-credit{padding:24px;margin-top:40px;scroll-margin-top:96px}
.customer-site #portalWrap>.tabs{gap:24px;margin-bottom:32px;border-color:var(--line)}
.customer-site #portalWrap>.tabs .tab{padding:12px 0;font-size:14px;letter-spacing:0;text-transform:none}
.customer-site #overviewStats{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-bottom:1px solid var(--line);padding-bottom:24px}
.customer-site #overviewStats .stat-card{padding:0 24px;background:transparent;border:0;border-left:1px solid var(--line)}
.customer-site #overviewStats .stat-card:first-child{padding-left:0;border-left:0}
.customer-site #overviewStats .stat-icon{display:none}
.customer-site #overviewStats .stat-value{font-size:40px;line-height:1.2}
.customer-site #overviewStats .stat-label{font-size:12px;letter-spacing:0;text-transform:none;margin-top:8px}
.customer-site .account-overview-grid>.card{padding:24px 0 0;border:0;border-top:1px solid var(--line);background:transparent}
.customer-site #tab-details{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:32px}
.customer-site #tab-details>.card{padding:24px 0 0;border:0;border-top:1px solid var(--line);margin:0;background:transparent;align-self:start}
.customer-site #tab-details>.card:first-child{grid-row:span 2}
.customer-site #tab-details form{max-width:520px}
.customer-site .status-badge{font-size:11px;line-height:1.5;letter-spacing:.03em;display:inline-block;white-space:normal}
.customer-site .booking-actions{flex-wrap:wrap}
.customer-site .next-session-body{left:24px;right:24px}

/* Modal chrome sits above the shared header and fits narrow screens. */
.customer-site .modal-overlay{z-index:200;padding:24px;animation:none}
.customer-site .modal-box{padding:28px;max-height:calc(100dvh - 48px);box-shadow:none;animation:none}
.customer-site .modal-close{width:44px;height:44px;padding:0;top:8px;right:8px;background:var(--surface);z-index:3}
.customer-site .modal-box h2{padding-right:32px}
.customer-site .modal-gallery{margin-left:-28px;margin-right:-28px}
.customer-site .modal-gallery-nav{width:44px;height:44px}
.customer-site .modal-gallery-nav:hover{transform:translateY(-50%)}
.customer-site .modal-link-btn{display:inline-flex;align-items:center;justify-content:center}
@media(max-width:1100px){
  .customer-site .booking-layout{grid-template-columns:minmax(0,1fr);gap:24px}
  .customer-site .booking-summary-card{position:static;max-height:none}
  .customer-site #teamGrid>section>.card-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .customer-site #packagesSection .store-pkg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .customer-site #roomGrid{grid-template-columns:minmax(0,1fr)}
  .customer-site :is(.room-feature-tile,.room-feature-tile.hero){height:260px}
  .customer-site .datetime-grid{grid-template-columns:minmax(0,1fr)}
  .customer-site .deal-promo .deal-group{grid-template-columns:minmax(0,1fr)}
  .customer-site #teamGrid>section>.card-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
  .customer-site #packagesSection .store-pkg-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .customer-site #tab-details{grid-template-columns:minmax(0,1fr)}
  .customer-site #tab-details>.card:first-child{grid-row:auto}
  .customer-site .staff-store-grid{grid-template-columns:minmax(0,1fr)}
  .customer-site .engineer-hero-avatar{width:88px;height:88px;font-size:36px}
  .customer-site .engineer-hero-body{gap:16px;align-items:flex-start}
  .customer-site .engineer-hero.with-photo .engineer-hero-body{align-items:flex-end}
  .customer-site .engineer-hero.with-photo{height:300px}
  .customer-site .profile-layout{display:grid;gap:24px}
  .customer-site .public-deals-list{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:520px){
  .customer-site>.page{padding-bottom:56px}
  .customer-site .row>*{min-width:100%}
  .customer-site .wizard-progress{padding-bottom:20px;margin-bottom:24px}
  .customer-site .wizard-progress-line{margin:0 8px}
  .customer-site .wizard-progress-step{gap:6px}
  .customer-site .wizard-progress-step span{font-size:11px}
  .customer-site .wizard-progress-dot{width:24px;height:24px;font-size:11px}
  .customer-site .account-bar>div:first-child{flex-basis:100%}
  .customer-site .account-bar-menu{margin-left:52px}
  .customer-site .account-bar-dropdown{left:-52px;right:auto}
  .customer-site .choice-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .customer-site .choice-tile{display:grid;grid-template-columns:32px 1fr;gap:4px 16px;padding:20px}
  .customer-site .choice-icon{grid-row:span 2;margin:0}
  .customer-site .choice-title{font-size:24px}
  .customer-site .choice-sub{margin:0}
  .customer-site #teamGrid>section>.card-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .customer-site #teamGrid .card-tile{display:grid;grid-template-columns:88px minmax(0,1fr);gap:0 20px;padding-bottom:20px}
  .customer-site #teamGrid .card-tile-img-wrap{grid-row:span 2}
  .customer-site #teamGrid .card-tile-img.avatar{aspect-ratio:1}
  .customer-site #teamGrid .card-tile-body{padding:0 0 8px}
  .customer-site .team-card-tags{padding:0}
  .customer-site #teamGrid .card-tile-bio{-webkit-line-clamp:2}
  .customer-site #engineerGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .customer-site #engineerGrid .card-tile-title{font-size:22px}
  .customer-site #engineerGrid .card-tile-bio{-webkit-line-clamp:2;font-size:13px}
  .customer-site #submitBooking{width:100%;min-width:0}
  .customer-site #overviewStats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px}
  .customer-site #overviewStats .stat-card{padding:0 16px}
  .customer-site #overviewStats .stat-card:last-child{grid-column:1/-1;border:0;padding:0}
  .customer-site #overviewStats .stat-value{font-size:36px}
  .customer-site .deal-owner{align-items:flex-start;gap:16px}
  .customer-site .deal-owner-avatar{width:56px;height:56px}
  .customer-site .deal-row{padding:20px}
  .customer-site .modal-overlay{padding:16px}
  .customer-site .modal-box{padding:24px;max-height:calc(100dvh - 32px)}
  .customer-site .modal-gallery{margin-left:-24px;margin-right:-24px}
  .customer-site .staff-store-link{white-space:normal;max-width:58px;text-align:right}
  .customer-site #studio-credit{padding:20px;margin-top:32px}
}

/* Commercial controls use the existing monochrome type and spacing. */
.core-price-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0}
.core-price-options>div,.core-price-choice{display:flex;flex-direction:column;gap:5px;text-align:left;padding:12px;border:1px solid var(--line);min-width:0}
.core-price-options strong{font-size:1.1rem}.core-price-options span{font-size:.8rem}.core-price-choice[aria-pressed="true"]{border-color:var(--ink);outline:1px solid var(--ink)}
.room-feature-body .core-price-options{margin-bottom:0}.room-feature-body .core-price-options>div{border-color:rgba(255,255,255,.4);background:rgba(0,0,0,.45)}
.booking-package-promo{border-top:1px solid var(--line);padding:18px 0}.booking-package-promo p{margin:4px 0 8px}
.booking-package-link{margin:0 0 1.25rem;color:var(--muted);font-size:.88rem;max-width:52ch}
.booking-package-link a{color:var(--ink);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.core-price-note{max-width:70ch}
.package-comparison{border-top:1px solid var(--line)}
.package-comparison .package-option{display:grid;grid-template-columns:minmax(180px,1.5fr) 1fr 1fr auto;gap:16px;padding:20px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none}
.package-option>div{min-width:0}.package-option strong,.package-option span{display:block}.package-option span{font-size:.82rem;color:var(--muted);margin-top:5px}.package-option strong{font-size:1rem}.package-option-terms{grid-column:1/-1;display:flex;justify-content:space-between;gap:12px}.package-option-terms label{font-size:.8rem;margin:0}.package-option-action button{white-space:nowrap;width:auto}
.package-comparison .package-option{transition:background-color .15s ease}
.package-comparison .package-option:hover{background:var(--surface2)}
.package-option-saving strong{color:var(--good)}
#formatPills{border-bottom:1px solid var(--line);gap:20px}#formatPills .filter-pill{border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:var(--ink);padding:14px 0}#formatPills .filter-pill.active{border-bottom-color:var(--ink);font-weight:700}
.onboarding-panel{margin:0 0 1.8rem;padding:1.25rem 0 1.5rem;border-bottom:1px solid var(--line)}
.onboarding-steps-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.65rem 1.2rem;margin:.8rem 0 1.2rem;padding:0;list-style:none;color:var(--muted);font-size:.82rem}
.onboarding-steps-legend strong{color:var(--ink)}
.onboarding-pending-list{display:grid;gap:.75rem;margin-bottom:1.4rem}
.onboarding-pending-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 0;border-top:1px solid var(--line-soft)}
.onboarding-pending-row>div{display:grid;gap:.15rem;min-width:0}
.onboarding-pending-row span{color:var(--muted);font-size:.82rem;overflow-wrap:anywhere}
.onboarding-status{color:var(--ink)!important}
.onboarding-invite-form{padding-top:1rem;border-top:1px solid var(--line)}
.onboarding-invite-form h4{margin:0 0 .4rem;font-size:1.05rem}
.admin-field-group{border:1px solid var(--line-soft);padding:1rem 1rem .4rem;margin:0 0 1rem}
.admin-field-group legend{padding:0 .4rem;font-family:'Barlow Condensed',sans-serif;font-size:.95rem;text-transform:uppercase;letter-spacing:.04em}
.staff-signup{max-width:720px}
.staff-signup .setup-progress{display:flex;list-style:none;padding:0;margin:0 0 1.6rem;gap:0;border-bottom:1px solid var(--line)}
.staff-signup .setup-progress li{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.7rem .15rem .6rem;margin:0;color:var(--muted);font-size:.7rem;line-height:1.2;text-align:center;border-bottom:2px solid transparent}
.staff-signup .setup-step-label{max-width:100%;overflow-wrap:anywhere}
.staff-signup .setup-progress li.is-current{color:var(--ink);border-bottom-color:var(--ink);font-weight:700}
.staff-signup .setup-progress li.is-done{color:var(--ink)}
.staff-signup .setup-step-num{display:inline-flex;align-items:center;justify-content:center;width:1.4rem;height:1.4rem;border:1px solid var(--line);font-family:'Barlow Condensed',sans-serif;font-size:.9rem}
.staff-signup .setup-progress li.is-current .setup-step-num,.staff-signup .setup-progress li.is-done .setup-step-num{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.staff-signup .setup-panel{border:0;border-top:1px solid var(--line);padding:1.4rem 0 1.5rem;background:transparent;box-shadow:none}
.staff-signup .setup-panel h2{margin-top:0}
.staff-signup .req,.staff-signup .opt{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;margin-left:.35rem;color:var(--muted);font-weight:500}
.staff-signup .field-label{display:block;margin:1rem 0 .45rem;font-size:.9rem}
.staff-signup .setup-service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;margin:.4rem 0 1rem}
.staff-signup .setup-service{display:block;border:1px solid var(--line);padding:.9rem;cursor:pointer;margin:0}
.staff-signup .setup-service:has(input:checked){border-color:var(--ink);background:var(--surface2)}
.staff-signup .setup-service input{margin:0 .4rem 0 0}
.staff-signup .setup-service strong{display:block;margin-top:.55rem;font-family:'Barlow Condensed',sans-serif;font-size:1.15rem;text-transform:uppercase}
.staff-signup .setup-service span{display:block;color:var(--muted);font-size:.78rem;line-height:1.4;margin-top:.25rem}
.staff-signup .setup-actions{display:flex;gap:1rem;margin-top:1.5rem}
.staff-signup .setup-actions button{width:auto;min-width:10rem}
.staff-signup .setup-day{display:grid;grid-template-columns:110px 1fr 1fr;gap:.75rem;align-items:center;margin:.65rem 0}
.staff-signup .setup-day label{margin:0}
.staff-signup .setup-check{display:flex;align-items:center;gap:.55rem;margin:1rem 0}
.staff-signup #photoPreview{object-fit:cover;margin-top:1rem;border:1px solid var(--line)}
.staff-signup .setup-review{border-top:1px solid var(--line);padding-top:1rem;margin-top:.5rem}
.staff-signup .setup-review-photo{display:block;margin-bottom:1rem;object-fit:cover;border:1px solid var(--line)}
.staff-signup .setup-review dl{margin:0;display:grid;gap:1rem}
.staff-signup .setup-review dt{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.2rem}
.staff-signup .setup-review dd{margin:0;overflow-wrap:anywhere}
.staff-signup .setup-login-link a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media(max-width:640px){
  .staff-signup .setup-service-grid{grid-template-columns:1fr}
  .staff-signup .setup-day{grid-template-columns:85px 1fr 1fr}
  .staff-signup .setup-panel{padding:1.1rem}
  .staff-signup .setup-actions{flex-direction:column}
  .staff-signup .setup-actions button{width:100%}
  .onboarding-pending-row{flex-direction:column;align-items:stretch}
}
@media(max-width:640px){.core-price-options{gap:6px}.core-price-options>div,.core-price-choice{padding:9px 7px}.core-price-options strong{font-size:.95rem}.core-price-options span{font-size:.73rem}.room-feature-body .core-price-options{display:grid}.package-comparison .package-option{grid-template-columns:1fr 1fr;gap:12px}.package-option-action{text-align:right}.package-option-terms{display:block}.package-option-terms label{margin-top:8px}}

/* Complete staff setup: repeatable fields stay readable on phone screens. */
.staff-signup .setup-two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem 1rem}
.staff-signup .setup-field{min-width:0}
.staff-signup .setup-field input,.staff-signup .setup-field select{width:100%;min-width:0}
.staff-signup .setup-repeat-row{min-width:0;border:1px solid var(--line);padding:1rem;margin:1rem 0 1.3rem}
.staff-signup .setup-repeat-row legend{padding:0 .4rem;font-weight:700;font-size:.9rem}
.staff-signup .setup-repeat-row .setup-remove{margin-top:.85rem}
.staff-signup .setup-package-once,.staff-signup .setup-package-monthly{grid-column:1/-1}
.staff-signup .setup-photo-list img{width:100%;max-width:240px;height:160px;object-fit:cover}
.staff-signup .setup-row-tools{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.7rem}
.staff-signup .setup-banner-preview{display:block;width:100%;height:180px;object-fit:cover;margin:.8rem 0}
.staff-signup #photoPreview{object-fit:cover;margin:.8rem 0}
.staff-signup [hidden]{display:none!important}
.staff-signup .setup-actions{flex-wrap:wrap;gap:.6rem}
.staff-signup .setup-actions button{min-width:0}
.staff-signup #setupNext{margin-left:auto}
.staff-signup .setup-review-section{padding:1rem 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.staff-signup .setup-review-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.staff-signup .setup-review-heading h3{margin:0}
.staff-signup .setup-review-heading button{font-size:.8rem;padding:.45rem .65rem;flex-shrink:0}
.staff-signup .setup-review-section p,.staff-signup .setup-review-section li{font-size:.9rem;line-height:1.6}
.staff-signup #saveStatus{min-height:1.5em}
.staff-signup #payoutStatus{padding:1rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.staff-signup input[type="range"]{padding:.6rem 0;accent-color:var(--ink)}
@media(max-width:600px){
 .staff-signup .setup-two-col{grid-template-columns:minmax(0,1fr)}
 .staff-signup .setup-repeat-row{padding:.85rem}
 .staff-signup .setup-actions{flex-direction:column-reverse}
 .staff-signup #setupNext{margin-left:0}
 .staff-signup .setup-review-heading{align-items:flex-start;gap:.5rem}
 .staff-signup .setup-day{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .staff-signup .setup-day label{grid-column:1/-1}
 .staff-signup .setup-day input{min-width:0;width:100%}
 .staff-signup .setup-day input[type="checkbox"]{width:18px}
}

/* Repeating unavailability and the skip button (staff setup). */
.staff-signup .setup-series{display:flex;align-items:center;justify-content:space-between;gap:1rem;border:1px solid var(--line);padding:.7rem 1rem;margin:.6rem 0}
.staff-signup .setup-series p{margin:0;font-size:.9rem;line-height:1.5;min-width:0;overflow-wrap:anywhere}
.staff-signup .setup-series button{flex-shrink:0;font-size:.8rem;padding:.45rem .65rem}
.staff-signup .setup-recurring{margin:1.4rem 0 0;border:1px solid var(--line);padding:.9rem 1rem}
.staff-signup .setup-recurring summary{cursor:pointer;font-weight:700}
.staff-signup .setup-recurring[open] summary{margin-bottom:.6rem}
.staff-signup .setup-recurring .setup-field{margin-bottom:.75rem}
@media(max-width:640px){
  .staff-signup .setup-step-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .staff-signup .setup-progress li{padding:.6rem 0}
  .staff-signup .setup-series{flex-direction:column;align-items:stretch}
}

/* Booking flow: choose which service a room's specialist is for (e.g. photo or video). */
.service-switch{display:inline-grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;padding:3px;margin:0 0 1.2rem;background:var(--surface);border:1px solid var(--line-soft);max-width:100%}
.service-switch[hidden]{display:none}
.service-switch button{min-height:42px;padding:0 1.1rem;background:transparent;border:0;color:var(--muted);font-size:.72rem;letter-spacing:.1em;width:auto}
.service-switch button:hover{color:var(--ink);opacity:1;transform:none}
.service-switch button.active{background:var(--ink);color:var(--accent-ink)}
.cap-checks{display:flex;flex-wrap:wrap;gap:0 .4rem;margin:.2rem 0 .3rem}
.button-link{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 1.1rem;background:var(--ink);color:var(--accent-ink);text-decoration:none;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.button-link:hover{opacity:.85}

/* ── Staff offers: prices per service, packages, extras (staff-offers.js) ── */
.offer-rates{display:flex;flex-direction:column;gap:.8rem}
.offer-rate-card{margin:0;padding:1rem;border:1px solid var(--line-soft);background:var(--surface);min-width:0}
.offer-rate-card legend{padding:0 .4rem;margin-left:-.4rem;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.2rem;text-transform:uppercase;letter-spacing:.03em}
.offer-copy{display:flex;flex-wrap:wrap;gap:.4rem;margin:-.1rem 0 .8rem}
.offer-chip{width:auto;min-height:34px;padding:0 .75rem;background:transparent;border:1px dashed var(--line);color:var(--muted);font-size:.66rem;letter-spacing:.08em}
.offer-chip:hover{color:var(--ink);border-color:var(--ink);opacity:1;transform:none}
.offer-rate-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.offer-money{display:flex;flex-direction:column;gap:.35rem;margin:0;font-size:.64rem}
.offer-money em,.offer-label em{font-style:normal;color:var(--muted);opacity:.7;text-transform:none;letter-spacing:0}
.offer-money > span{position:relative;display:block}
.offer-money > span b{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:400;font-size:1rem;pointer-events:none}
.offer-money input{padding-left:1.6rem;font-size:16px;min-height:48px;width:100%}
.offer-hint{margin:.5rem 0 0;color:var(--muted);font-size:.78rem;line-height:1.45}
.offer-hint:empty{display:none}
.offer-field{display:flex;flex-direction:column;gap:.35rem;margin:0 0 .9rem;text-transform:none;letter-spacing:0;font-size:.9rem;color:var(--ink)}
.offer-label{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500}
.offer-field input:not([type=checkbox]):not([type=radio]),.offer-field textarea{font-size:16px;min-height:48px;width:100%}
.offer-pair{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.offer-seg{display:grid;grid-template-columns:1fr 1fr;padding:3px;background:var(--surface);border:1px solid var(--line-soft)}
.offer-seg label{margin:0;cursor:pointer}
.offer-seg input{position:absolute;opacity:0;pointer-events:none}
.offer-seg span{display:flex;align-items:center;justify-content:center;min-height:42px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.offer-seg input:checked + span{background:var(--ink);color:var(--accent-ink)}
.offer-choices{display:flex;flex-wrap:wrap;gap:.4rem}
.offer-choice{width:auto;min-height:40px;padding:0 .85rem;background:transparent;border:1px solid var(--line);color:var(--muted);font-size:.7rem;letter-spacing:.06em}
.offer-choice:hover{color:var(--ink);border-color:var(--ink);opacity:1;transform:none}
.offer-choice.on{background:var(--ink);border-color:var(--ink);color:var(--accent-ink)}
.offer-choice.on:hover{color:var(--accent-ink)}
.offer-seg input:focus-visible + span{outline:2px solid var(--ink);outline-offset:2px}
.offer-ticks{display:flex;flex-wrap:wrap;gap:.5rem}
.offer-tick{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;margin:0;padding:0 .8rem;border:1px solid var(--line);text-transform:none;letter-spacing:0;font-size:.9rem;color:var(--ink);cursor:pointer}
.offer-tick:has(input:checked){border-color:var(--ink);background:var(--surface2)}
.offer-switch{display:flex;align-items:flex-start;gap:.8rem;margin:.4rem 0 0;padding:.9rem 1rem;border:1px solid var(--line-soft);text-transform:none;letter-spacing:0;cursor:pointer}
.offer-switch input{margin-top:.2rem;flex-shrink:0;width:20px;height:20px;min-height:0}
.offer-switch strong{display:block;font-weight:500;color:var(--ink);font-size:.92rem}
.offer-switch small{display:block;color:var(--muted);font-size:.8rem;margin-top:.15rem}
.offer-list{border:1px solid var(--line-soft);background:var(--surface)}
.offer-row{display:flex;align-items:center;gap:.8rem;width:100%;min-height:64px;padding:.8rem 1rem;background:transparent;border:0;border-top:1px solid var(--line-soft);color:var(--ink);text-align:left;text-transform:none;letter-spacing:0;font-size:.95rem}
.offer-row:first-child{border-top:0}
.offer-row:hover{background:var(--surface2);opacity:1;transform:none}
.offer-row > span:first-child{flex:1;min-width:0;display:flex;flex-direction:column}
.offer-row strong{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.offer-row small{color:var(--muted);font-size:.78rem;margin-top:.1rem}
.offer-row b{font-family:'Barlow Condensed',sans-serif;font-weight:500;font-size:1.25rem;white-space:nowrap}
.offer-row.inactive{opacity:.5}
.offer-price-card{padding:1rem;border:1px solid var(--line-soft);background:var(--surface)}
.offer-price-card + .offer-price-card{margin-top:.6rem}
.offer-price-card h3{margin:0 0 .6rem;font-size:1.05rem}
.offer-price-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}
.offer-price-row div{display:flex;flex-direction:column}
.offer-price-row strong{font-family:'Barlow Condensed',sans-serif;font-weight:500;font-size:1.4rem;line-height:1.1}
.offer-price-row span{color:var(--muted);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase}
@media (max-width:420px){.offer-rate-grid{grid-template-columns:1fr 1fr}.offer-rate-grid label:first-child{grid-column:1/-1}}

/* ── Staff setup wizard: app-like on phones ── */
.staff-signup .offer-list-wrap:not(:empty){margin:.2rem 0 .8rem}
.staff-signup .offer-row .secondary{width:auto;min-height:38px;padding:0 .9rem;font-size:.7rem}
.staff-signup .offer-inline{margin:1.2rem 0 0;padding:1.1rem;border:1px solid var(--ink);background:var(--surface)}
.staff-signup .offer-inline-title{margin:0 0 .9rem;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.25rem;text-transform:uppercase}
.staff-signup .offer-inline-actions{display:flex;gap:.6rem;justify-content:flex-end;flex-wrap:wrap;margin-top:1rem}
.staff-signup .offer-inline-actions button{width:auto;min-width:6.5rem}
.staff-signup .offer-inline-actions .setup-remove{margin:0 auto 0 0}
.staff-signup input[type="file"]{padding:.5rem;font-size:.85rem;color:var(--muted)}
.staff-signup input[type="file"]::file-selector-button{margin-right:.8rem;padding:.65rem 1rem;border:1px solid var(--line);background:var(--surface2);color:var(--ink);font:500 .72rem 'DM Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
@media (max-width:760px){
  /* Marketing links and "Book now" step aside, as in the staff app. */
  body.staff-setup #siteNav .abridge-book,body.staff-setup #siteNav .abridge-menu-toggle{display:none!important}
  body.staff-setup #siteNav .abridge-account-panel{right:0}
  body.staff-setup .page.staff-signup{padding:12px 16px calc(9rem + env(safe-area-inset-bottom,0px))}
  /* After the first step the big title and intro make way for the step itself. */
  body.staff-setup[data-wizard-step]:not([data-wizard-step="0"]) #setupTitle,
  body.staff-setup[data-wizard-step]:not([data-wizard-step="0"]) #setupIntro{display:none}
  body.staff-setup .staff-signup h1{font-size:2rem;margin-bottom:.6rem}
  body.staff-setup #setupEyebrow{margin-bottom:.2rem}
  body.staff-setup #setupStepCount{margin:.2rem 0 .5rem;color:var(--ink);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
  /* Progress as one thin segmented bar rather than nine numbered boxes. */
  body.staff-setup .staff-signup .setup-progress{gap:3px;border:0;margin:0 0 .6rem}
  body.staff-setup .staff-signup .setup-progress li{padding:0;height:4px;background:var(--line-soft);border:0}
  body.staff-setup .staff-signup .setup-progress li.is-done{background:var(--muted)}
  body.staff-setup .staff-signup .setup-progress li.is-current{background:var(--ink)}
  body.staff-setup .staff-signup .setup-step-num,body.staff-setup .staff-signup .setup-step-label{display:none}
  body.staff-setup #saveStatus{font-size:.74rem;min-height:1.2em;margin:0 0 .4rem}
  body.staff-setup .staff-signup .setup-panel{padding:1rem 0 0;border-top:1px solid var(--line-soft)}
  body.staff-setup .staff-signup .setup-panel h2{font-size:1.7rem;margin-bottom:.5rem}
  body.staff-setup .staff-signup .setup-service{display:flex;align-items:center;gap:.8rem;padding:.8rem .9rem}
  body.staff-setup .staff-signup .setup-service input{width:20px;height:20px;min-height:0;flex-shrink:0}
  body.staff-setup .staff-signup .setup-service strong{margin:0;font-size:1.05rem}
  body.staff-setup .staff-signup .setup-service span{margin:0 0 0 auto;text-align:right;font-size:.72rem;max-width:48%}
  body.staff-setup .staff-signup input,body.staff-setup .staff-signup select,body.staff-setup .staff-signup textarea{font-size:16px}
  /* One pinned action bar: primary action full width, Back beside it, skip/save as links above. */
  body.staff-setup.setup-has-account .staff-signup .setup-actions{position:fixed;left:0;right:0;bottom:0;z-index:90;margin:0;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"aux aux" "back next";gap:.5rem .6rem;
    padding:.6rem 16px calc(.8rem + env(safe-area-inset-bottom,0px));background:rgba(8,8,10,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line)}
  body.staff-setup.setup-has-account .staff-signup .setup-actions button{width:100%;min-height:50px;margin:0}
  body.staff-setup.setup-has-account #setupNext{grid-area:next}
  body.staff-setup.setup-has-account #setupBack{grid-area:back;width:auto!important;padding:0 1.1rem}
  body.staff-setup.setup-has-account #setupBack[hidden] + *{grid-column:auto}
  body.staff-setup.setup-has-account #saveExit,body.staff-setup.setup-has-account #skipStep{grid-area:aux;min-height:36px!important;background:transparent;border:0;color:var(--muted);font-size:.7rem;text-decoration:underline;text-underline-offset:3px}
  body.staff-setup.setup-has-account[data-wizard-step="0"] .staff-signup .setup-actions{grid-template-areas:"aux aux" "next next"}
  body.staff-setup .staff-signup .offer-inline{margin-left:-16px;margin-right:-16px;border-left:0;border-right:0}
  body.staff-setup .setup-login-link{display:none}
}
.staff-extra-row label{flex:1;min-width:0;align-items:flex-start}
.staff-extra-row label input{margin-top:.2rem;flex-shrink:0}
.staff-extra-row label small{display:block;color:var(--muted);font-size:.8rem;line-height:1.4;margin-top:.15rem}
.staff-extra-row .addon-price{flex-shrink:0;white-space:nowrap}

/* ── Installed-app launch splash (login.html static copy + nav.js hand-over copy).
   The mark sits where the iOS launch images put it (112px wide, 24px above centre), so
   the native image → animated splash → dashboard hand-over doesn't jump. */
.app-splash{position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  background:#08080a;transition:opacity .4s ease,visibility .4s;padding-bottom:48px}
.app-splash img{width:112px;height:auto;animation:app-splash-in .7s cubic-bezier(.2,.7,.2,1) both}
.app-splash-name{margin-top:22px;font:500 11px/1 'DM Sans',sans-serif;letter-spacing:.34em;text-transform:uppercase;color:rgba(240,237,232,.62);animation:app-splash-fade .8s .25s ease both}
.app-splash-bar{position:relative;width:88px;height:2px;margin-top:26px;overflow:hidden;background:rgba(240,237,232,.12);animation:app-splash-fade .6s .4s ease both}
.app-splash-bar::after{content:'';position:absolute;inset:0;width:40%;background:rgba(240,237,232,.85);animation:app-splash-load 1.1s .4s cubic-bezier(.6,0,.4,1) infinite}
.app-splash.done{opacity:0;visibility:hidden}
.app-splash-launch{display:none}
/* Failsafe: if login.js never runs, the splash clears itself so the form is usable. */
.app-splash-launch.show{display:flex;animation:app-splash-failsafe 0s 8s forwards}
@keyframes app-splash-in{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes app-splash-fade{from{opacity:0}to{opacity:1}}
@keyframes app-splash-load{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
@keyframes app-splash-failsafe{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){.app-splash img,.app-splash-name,.app-splash-bar,.app-splash-bar::after{animation:none}}

/* ── Push notifications panel (window.abridgePush.mount, in the More sheets) */
.push-card{border:1px solid var(--line-soft);background:var(--surface);padding:1rem 1rem .9rem;margin:0 0 1rem}
.push-card-head{display:flex;align-items:center;gap:.6rem}
.push-card-head strong{font-family:'Barlow Condensed',sans-serif;font-size:1.1rem;text-transform:uppercase;letter-spacing:.02em}
.push-dot{width:9px;height:9px;border-radius:50%;background:var(--muted);flex:none}
.push-on .push-dot{background:var(--good);box-shadow:0 0 0 4px rgba(127,174,130,.18)}
.push-denied .push-dot{background:var(--bad)}
.push-needs-install .push-dot{background:var(--warn)}
.push-card p{margin:.45rem 0 0;color:var(--muted);font-size:.86rem;line-height:1.5}
.push-card-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.8rem}
.push-card-actions:empty{display:none}
.push-card-actions button{width:auto;min-height:44px;margin:0}
.push-card-msg{font-size:.8rem!important}
.push-card-msg:empty{display:none}