/* Sprntr app: the iOS look (Liquid Glass, iOS 26), loaded last on every signed-in page.
   Apple's rules, as the iOS app follows them (mobile/src/ui):
   - Glass is only for the control layer that floats above content: tab bar, top bar, sheet headers, menus, toasts.
     Never on content, never glass on glass.
   - Content sits on solid surfaces: grouped background, white inset sections with hairline separators.
   - Only the one primary action is tinted (lime); everything else is a neutral capsule or a text button.
   - Capsule controls, concentric corners, large bold titles.
   Light only, like the iOS app. */
:root{
  color-scheme:light;
  --ink:#101415;--soft:#686e70;--faint:#8a9091;--line:#e9ebeb;--separator:#e3e5e6;
  --lime:#86e20b;--limeInk:#132010;--limeTint:#effbd6;--limeDeep:#446e0c;
  --group:#f2f3f4;--page:#f2f3f4;--muted:#f5f6f6;--fill:rgba(16,20,21,.06);--fill2:rgba(16,20,21,.1);
  --danger:#c94a4c;--dangerTint:#fbeaea;--link:#2c6cb5;
  --r-section:22px;--r-control:12px;--r-sheet:28px;
  --side-w:264px;--gutter:clamp(24px,3.4vw,56px);--top-h:56px;
  --glass-bg:rgba(255,255,255,.68);
  --glass-blur:blur(24px) saturate(180%);
  --glass-edge:inset 0 0 0 1px rgba(255,255,255,.6),0 0 0 .5px rgba(16,20,21,.08),0 8px 28px -10px rgba(16,20,21,.22);
  --ease:cubic-bezier(.2,.9,.25,1);
}
@media(max-width:1050px){:root{--side-w:232px}}
@media(max-width:700px){:root{--gutter:16px;--top-h:48px}}

/* ---------- Glass material (control layer only) ---------- */
.topBar,.tabBar,.toast,.updateBar,.wsMenu,.selectMenu,.comboMenu,dialog .modalHead,dialog .detailTop,.moreDrawer .drawerHead,
dialog form>footer{
  background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .topBar,.tabBar,.toast,.updateBar,.wsMenu,.selectMenu,.comboMenu,dialog .modalHead,dialog .detailTop,.moreDrawer .drawerHead,dialog form>footer{background:rgba(255,255,255,.97)}}
@media(prefers-reduced-transparency:reduce){
  .topBar,.tabBar,.toast,.updateBar,.wsMenu,.selectMenu,.comboMenu,dialog .modalHead,dialog .detailTop,.moreDrawer .drawerHead,dialog form>footer{
    background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}}

/* ---------- Base ---------- */
html{background:var(--group)}
body{background:var(--group);color:var(--ink);font:15px/1.45 Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
h1,h2,h3,h4{letter-spacing:-.01em}
h2{font-weight:650}
.eyebrow{font:600 12px/1.3 Inter,system-ui,sans-serif;letter-spacing:.04em;color:var(--faint);text-transform:uppercase}
a{color:inherit}
.textLink,.sourceLink,.inlineAdd,.feedSource a,.wmSite a,.mwWhy a,.mwOwn a,.researchCard a,.meetLink a{color:var(--link)}
.textLink{font-size:14px;font-weight:500}
.loader{background:var(--group)}
.loaderRing{border-color:var(--separator);border-top-color:var(--lime)}
::selection{background:#dff5b5}

/* ---------- Shell: light iPadOS-style sidebar + grouped content ---------- */
.shell{display:block;max-width:none;min-height:100vh;background:none;margin:0}
.sidebar{position:fixed;z-index:20;inset:0 auto 0 0;width:var(--side-w);height:100vh;padding:22px 14px 16px;overflow-y:auto;
  background:#f7f8f8;color:var(--ink);border-right:1px solid var(--separator);scrollbar-width:none}
.brand{color:var(--ink);padding:0 10px}.brand img{height:28px}
.sidebar nav{display:grid;gap:2px;margin-top:22px}
.sidebar nav p,.sidebar nav p:nth-of-type(2){margin:18px 12px 6px;font:600 12px/1.3 Inter,system-ui,sans-serif;letter-spacing:.04em;color:var(--faint)}
.sidebar nav p:first-child{margin-top:4px}
.navLink{display:flex;align-items:center;gap:0;height:40px;padding:0 12px;border-radius:999px;color:var(--ink);font:500 15px Inter,system-ui,sans-serif;transition:background .15s,color .15s}
.navLink .navIcon{width:20px;height:20px;margin-right:12px;color:var(--soft)}
.navLink:not(.active):hover{background:var(--fill);color:var(--ink)}
.navLink:not(.active):hover i{transform:none}
.navLink.active,.navLink.active:hover{background:var(--limeTint);color:var(--ink);font-weight:600}
.navLink.active .navIcon{color:var(--limeDeep);stroke-width:2}
.navLink:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.profile{border-top:1px solid var(--separator);padding:14px 6px 0;margin-top:auto}
.profile strong{color:var(--ink);font-size:13px}.profile small{color:var(--soft);font-size:12px}
.logout,.wsSwitch{background:var(--fill);color:var(--soft);border-radius:999px;width:32px;height:32px}
.logout:hover,.wsSwitch:hover,.wsSwitch[aria-expanded=true]{background:var(--fill2);color:var(--ink)}
.wsMenu{border:0;border-radius:18px;padding:6px;box-shadow:var(--glass-edge)}
.wsMenu p{color:var(--faint);letter-spacing:.04em}
.wsMenu button{color:var(--ink);border-radius:12px}
.wsMenu button:hover,.wsMenu button[aria-checked=true]{background:var(--fill)}
.wsMenu span{background:var(--limeTint);color:var(--limeDeep)}.wsMenu i{color:var(--limeDeep)}
.avatar{background:linear-gradient(135deg,#d9dcdd,#b9bec0);color:#fff}

.workspace{min-height:100vh;margin-left:var(--side-w);background:none;border-radius:0;overflow:visible;
  padding:40px var(--gutter) 64px}
.detailPage{overflow:visible}

/* Large titles */
.workspace>header{align-items:flex-end;gap:16px 20px}
.workspace>header h1,.leadTitle h1,.bookingHero h1,.clientDetailHead h1{font-size:34px;line-height:1.12;font-weight:700;letter-spacing:-.025em;margin:2px 0 6px}
.workspace>header p:not(.eyebrow){color:var(--soft);font-size:15px;line-height:1.5}
.workspace>header .eyebrow{margin:0 0 2px}
.backLink{display:inline-flex;align-items:center;gap:4px;color:var(--link);font-weight:500;font-size:15px;margin-bottom:14px}
.backLink:hover{text-decoration:underline;text-underline-offset:3px}
.identity small{color:var(--soft)}

/* ---------- Compact glass top bar (appears on scroll) ---------- */
.topBar{position:fixed;z-index:40;top:0;left:var(--side-w);right:0;height:calc(var(--top-h) + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) var(--gutter) 0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;
  box-shadow:inset 0 -.5px 0 rgba(16,20,21,.12);opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s,transform .25s var(--ease),visibility 0s .25s}
.topBar.on{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .25s var(--ease)}
.topTitle{font:650 17px/1.2 Inter,system-ui,sans-serif;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topBack a{display:inline-flex;align-items:center;gap:2px;height:36px;padding:0 12px 0 6px;border-radius:999px;background:var(--fill);color:var(--ink);font:600 14px Inter,sans-serif;text-decoration:none}
.topBack svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.topActions{display:flex;gap:8px;justify-content:flex-end}
.topAction{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 16px;border:0;border-radius:999px;background:var(--lime);color:var(--limeInk);font:600 14px/1 Inter,system-ui,sans-serif;text-decoration:none;cursor:pointer;white-space:nowrap}
.topAction svg{width:1em;height:1em}

/* ---------- Content: solid white inset sections ---------- */
.salesCard,.dateCard,.scheduleCard,.activityCard,.leadList,.leadCard,.detailCard,.appointmentCard,.appointmentSummary,.billingCard,
.bookingGrid .card,.wsCard,.calCard,.featureCard,.statGrid article,.mwTodo,.wmHero>div,.segCard,.qLocked,.comingSoon,.leadHero,
.calOverview,.guardCard,.nativeBanner,.detailSkel .card,.toConfirm,.planCard{
  border:0!important;border-radius:var(--r-section);background:#fff;box-shadow:none}
.statGrid{gap:14px;margin:32px 0 20px}
.statGrid article{min-height:128px;padding:18px}
.statGrid p{color:var(--soft);font-size:14px;font-weight:500}
.statGrid strong{font-size:32px;font-weight:700;letter-spacing:-.025em}
.statGrid i{background:var(--muted);color:var(--soft)}
.dashboardGrid{gap:18px}.rightStack{gap:18px}
.cardHeading h2{font-size:19px;font-weight:650;letter-spacing:-.01em}
.cardHeading p{color:var(--soft)}
.bars{border-bottom-color:var(--separator);background:repeating-linear-gradient(to bottom,transparent 0,transparent 56px,var(--muted) 57px)}
.bars i{background:linear-gradient(var(--muted),var(--muted)) bottom/100% 100% no-repeat;border-radius:999px}
.bars i:before{border-radius:999px}
.bars i.selected em{background:var(--ink);border-radius:14px}.bars i.selected em:after{border-top-color:var(--ink)}
.mix i{background:var(--muted);border-radius:999px;height:10px}
.scheduleRows,.scheduleItem{border-color:var(--separator)}
.scheduleItem b{border-radius:999px;border-color:#c5cacb}
.dates .today{background:var(--lime);color:var(--limeInk)}

/* Inner tiles inside a section: soft fill, no outline, concentric corners */
.detailGrid div,.profileFacts div,.factGrid div,.contactLine,.recoveryStats>div,.campDetailNums div,.campAudience,.wsFacts,.wsEmpty,.staffNote,
.clientTodo,.qNotes,.plSoFar,.plDashTop,.confirmChange,.autoLocked,.inboxImages,.mwTodoLine,.mwTip{background:var(--muted);border:0;border-radius:14px}
.wsGroup,.wsInt,.petTile,.petPick,.featureToggle,.autoStat,.autoList li,.plAction,.plDashNums div,.mwAction,.wmSite,.competitor,.teamList li,
.clientRow,.wsClosure,.visitRow,.campMessage,.campMail,.wsSoon article,.attachFile,.attachThumb,.mwOwn,.autoPreview{border-color:var(--line);border-radius:16px;background:#fff}
.wsSoon article{background:var(--muted);border-color:transparent}
.wsGroup{background:#fff;border:1px solid var(--line)}
.mwAction.high{background:#f7fbee;border-color:#e2f0c8}.plAction.high{background:#fff8f7;border-color:#f5d6d2}

/* Dark panels from the old dashboard become light sections */
.appointmentSummary{color:var(--ink)}
.appointmentSummary .eyebrow,.calOverview .eyebrow,.guardCard .eyebrow,.nativeBanner small{color:var(--faint)}
.appointmentSummary>p:not(.eyebrow),.appointmentSummary>div small,.summaryStats small,.bookingCard small,.ovToday p:not(.eyebrow),.ovStat small{color:var(--soft)}
.appointmentSummary>div,.bookingCard{border-color:var(--separator)}
.summaryStats span,.appointmentSummary>div span{color:var(--ink)}
.bookingCard .ghost,.calOverview .bookingCard .ghost{background:var(--fill);color:var(--ink);border:0}
.calOverview{color:var(--ink)}
.calOverview::before{display:none}
.ovToday strong span{color:var(--soft)}
.ovStat{background:var(--muted);border:0}
.ovStat span{color:var(--ink);font-weight:700;letter-spacing:-.02em}
.ovStat.alert.on{background:#fff0d7;border:0;color:#8a5a12}.ovStat.alert.on span{color:#8a5a12}.ovStat.alert.on small{color:#8a5a12}
.calOverview .bookingCard{border-left-color:var(--separator)}
.ovEdit{background:var(--fill);color:var(--ink);border:0;border-radius:999px}
.ovEdit:hover{background:var(--fill2);color:var(--ink)}
.ovWeek{border-top-color:var(--separator)}
.ovDay{background:var(--muted);border:0;color:var(--ink);border-radius:16px}
.ovDay:hover{background:#eceeef;border:0}
.ovDay small{color:var(--faint)}.ovDay span{color:var(--soft)}.ovDay.empty span{color:var(--faint)}.ovDay span em{color:#a36b17}
.ovDay i{background:rgba(16,20,21,.08)}
.ovDay.today{background:var(--limeTint);color:var(--ink)}
.ovDay.today small,.ovDay.today span,.ovDay.today span em{color:#3d5a00}
.ovDay.today i{background:rgba(68,110,12,.15)}.ovDay.today i::after{background:var(--limeDeep)}
@media(max-width:1250px){.calOverview .bookingCard{border-top-color:var(--separator)}.appointmentSummary>.bookingCard{border-left-color:var(--separator)}}
.guardCard{color:var(--ink)}.guardCard ul{color:var(--soft)}.guardCard b{color:var(--ink)}
.nativeBanner{color:var(--ink)}.nativeBanner p{color:var(--soft)}
.planCard{background:var(--limeTint)}
.wsIcon,.comingIcon{background:var(--limeTint);color:var(--limeDeep)}
.wsSoon .wsIcon{background:#fff;color:var(--soft)}
.leadMono{background:var(--limeTint);color:var(--limeDeep);border-radius:16px;box-shadow:none;font-weight:700}
.leadMark{flex:none;border-radius:999px;background:var(--limeTint);color:var(--limeDeep)}
.inboxAvatar,.qAvatar{background:#e6e8e9;color:var(--ink)}
.inboxRow.unread .inboxAvatar{background:var(--lime);color:var(--limeInk)}
.attachFile i,.attachThumb.broken::before{background:var(--limeTint);color:var(--limeDeep)}
.wsNav a[aria-current=page]{background:var(--limeTint);color:var(--ink)}
.wsNav a[aria-current=page] small{color:var(--soft)}
.wsDays input:checked+span{background:var(--limeTint);border-color:transparent;color:var(--ink)}
.feedFilters button[aria-pressed=true]{background:var(--limeTint);border-color:transparent;color:var(--ink)}
.catTag.hot{background:var(--ink);color:#fff}

/* ---------- Buttons: capsules; lime only for the primary action ---------- */
.primary,.addLead,.sendBtn,.ghost,.ghostBtn,.wsBtnSoft,.appointmentStatus,.checkBtn,.ovEdit,.lostToggle,.secondary{
  height:40px;padding:0 18px;border:0;border-radius:999px;font:600 15px/1 Inter,system-ui,sans-serif;box-shadow:none;
  transition:background-color .15s,transform .15s var(--ease),opacity .15s}
.primary,.addLead,.sendBtn,.primary:hover,.addLead:hover,.sendBtn:hover{background:var(--lime);color:var(--limeInk);border:0}
.primary:not(:disabled):hover,.addLead:not(:disabled):hover,.sendBtn:not(:disabled):hover{background:#7ed40a}
.ghost,.ghostBtn,.wsBtnSoft,.appointmentStatus,.checkBtn,.secondary{background:var(--fill);color:var(--ink);border:0}
.ghost:hover,.ghostBtn:hover,.wsBtnSoft:hover,.appointmentStatus:hover,.checkBtn:hover,.secondary:hover{background:var(--fill2);border:0}
.primary.danger,.primary.danger:hover{background:var(--danger);color:#fff}
.ghost.danger,.ghostBtn.danger,.appointmentStatus.danger,.wsBtnSoft.danger,.btnGroup button.danger,.qActions .danger,.campDanger{color:var(--danger)}
.ghostBtn.danger:hover,.ghost.danger:hover{background:var(--dangerTint)}
:is(.primary,.addLead,.sendBtn,.ghost,.ghostBtn,.wsBtnSoft,.appointmentStatus,.checkBtn,.ovEdit,.lostToggle,.secondary,.topAction,.refresh,.rowAction):not(:disabled):active{transform:scale(.96)}
.checkBtn,.qActions .ghost,.pInline .ghost,.pButtons .ghost,.pButtons .wsBtnSoft{height:34px;padding:0 14px;font-size:14px}
.refresh,.rowAction{width:38px;height:38px;border:0;border-radius:999px;background:var(--fill);color:var(--ink)}
.refresh:hover,.rowAction:hover{background:var(--fill2)}
.close{width:30px;height:30px;border-radius:999px;background:var(--fill);color:var(--soft);font-size:20px;line-height:1;display:inline-grid;place-items:center;flex:none}
.close:hover{background:var(--fill2);color:var(--ink)}
.lostToggle{background:var(--dangerTint);color:var(--danger)}
.lostToggle:hover{background:#f7dede}
.stageBar.isLost+.lostToggle{background:var(--limeTint);color:var(--limeDeep);border:0}
.composerBar .ghost{background:none;height:auto;padding:8px 2px;color:var(--soft);font-size:14px}
.wsTextBtn,.linkBtn{color:var(--link);text-decoration:none}.wsTextBtn:hover,.linkBtn:hover{text-decoration:underline}
.wsTextBtn.danger{color:var(--danger)}
.iconBtn{border-radius:999px}.iconBtn:hover{background:var(--fill)}
.plNavBtn{width:38px;height:38px;padding:0;border-radius:999px}

/* Segmented controls and grouped buttons: one capsule track, the chosen segment raised in white */
.seg,.calViews,.btnGroup,.inboxActions,.calNav{display:inline-flex;gap:2px;padding:3px;border:0;border-radius:999px;background:rgba(118,118,128,.12);box-shadow:none;overflow:visible}
.seg button,.calViews button,.btnGroup button,.inboxActions .appointmentStatus,.calBtn{height:32px;border:0!important;border-radius:999px;background:transparent;color:var(--ink);padding:0 14px;font:600 14px Inter,system-ui,sans-serif}
.btnGroup button:hover,.inboxActions .appointmentStatus:hover,.calBtn:hover{background:rgba(255,255,255,.7)}
.seg button[aria-selected=true],.calViews button[aria-selected=true]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(16,20,21,.12),0 0 0 .5px rgba(16,20,21,.04)}
.btnGroup{height:auto}.btnGroup button{height:36px}
.inboxActions{align-self:flex-start}.inboxActions .appointmentStatus{display:inline-flex;align-items:center;height:30px;padding:0 12px;font-size:13px}
.calBtn{display:inline-grid;place-items:center;min-width:36px;padding:0 10px}

/* Chips */
.wsTabs a,.feedFilters button,.channel,.reasonPicks button,.campChips button,.dayPicks label,.formGrid .dayPicks label{border:0;border-radius:999px;background:var(--fill);color:var(--ink);font-weight:600}
.wsTabs a:hover,.feedFilters button:hover,.reasonPicks button:hover,.campChips button:hover{background:var(--fill2);border:0}
.channel.active{background:var(--limeTint);color:var(--ink)}
.stage,.statusPill,.qPill,.campStatus,.campTag,.wsPill,.pendingTag,.petChip,.catTag{border-radius:999px;font-weight:700;letter-spacing:.02em}

/* ---------- Forms: soft-filled fields ---------- */
.formGrid label,.formLabel,.wsInline label,.wsClosureForm label,.teamInvite label,.pField,.wmForm label,.priceForm label,.pitchPanel label{color:var(--soft);font-size:13px;font-weight:500}
.formGrid input,.formGrid textarea,.formGrid select,.formLabel select,.pageRow select,.pageRow input,.emailBox input,.emailBox textarea,
.composer input,.composer textarea,.wsInline input,.wsDayTimes input,.wsClosureForm input,.wsClosureForm select,.teamInvite input,
.pField select,.pField input,.qActions select,.premiumFilters select,.wmForm input,.wsLink input,.qLink input,.pitchPanel input,.pitchPanel textarea,
.inboxCompose textarea,.priceForm input,.qItem input,.tagEditor input,.comboTrigger,.selectTrigger,.comboSearch,.selectMenu input,.cardHeading select,.listControls select,
.teamList select,.slugField,dialog input:not([type=checkbox]):not([type=radio]):not([type=color]),dialog textarea,dialog select{
  background-color:var(--muted);border:1px solid transparent;border-radius:var(--r-control);color:var(--ink);box-shadow:none;min-height:42px;font-size:15px}
.formGrid input,.formGrid select,.pageRow input,.pageRow select,.wsInline input,.teamInvite input,.wsClosureForm input,.wsClosureForm select,.pField input,.pField select{padding:0 13px}
select,.cardHeading select,.listControls select{border-color:transparent;border-radius:var(--r-control);box-shadow:none}
.formGrid input:hover,.formGrid select:hover,select:hover,.comboTrigger:hover,.selectTrigger:hover{border-color:transparent;background-color:#eff1f1}
.formGrid input:focus,.formGrid textarea:focus,.formGrid select:focus,.wsInline input:focus,.pageRow input:focus,.pageRow select:focus,.emailBox input:focus,.emailBox textarea:focus,
.composer input:focus,.composer textarea:focus,.teamInvite input:focus,.wsDayTimes input:focus,.wsClosureForm input:focus,.pField input:focus,.pField select:focus,.wmForm input:focus,
.pitchPanel input:focus,.pitchPanel textarea:focus,.inboxCompose textarea:focus,.qItem input:focus,select:focus,.comboTrigger:focus-visible,.combo.open .comboTrigger,.open .selectTrigger,
dialog input:focus,dialog textarea:focus,.comboSearch:focus{
  outline:0;background-color:#fff;border-color:#a6dc57;box-shadow:0 0 0 3px rgba(134,226,11,.2)}
.search{height:40px;border:0;border-radius:999px;background:var(--fill);color:var(--soft);padding:0 12px}
.search input{background:transparent;font-size:15px}
.search:focus-within{background:#fff;box-shadow:0 0 0 1px #a6dc57,0 0 0 4px rgba(134,226,11,.18)}
.combo.invalid .comboTrigger{border-color:var(--danger)}
.slugField{overflow:hidden}.slugField input{background:transparent!important;min-height:40px}
.formError,.loginError,.cancelWarn,.reasonNote{background:var(--dangerTint);color:#8f2a2b;border-radius:14px}

/* iOS switches for on/off settings */
.wsToggle input[type=checkbox],.featureToggle input[type=checkbox],.minorToggle input[type=checkbox],.calLegend input[type=checkbox],input.switch{
  -webkit-appearance:none;appearance:none;position:relative;flex:none;width:51px;height:31px;margin:0;border-radius:999px;background:rgba(120,120,128,.16);cursor:pointer;
  transition:background-color .2s}
:is(.wsToggle,.featureToggle,.minorToggle,.calLegend) input[type=checkbox]::before,input.switch::before{content:'';position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:999px;background:#fff;
  box-shadow:0 3px 8px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.16);transition:transform .25s var(--ease)}
:is(.wsToggle,.featureToggle,.minorToggle,.calLegend) input[type=checkbox]:checked,input.switch:checked{background:var(--lime)}
:is(.wsToggle,.featureToggle,.minorToggle,.calLegend) input[type=checkbox]:checked::before,input.switch:checked::before{transform:translateX(20px)}
:is(.wsToggle,.featureToggle,.minorToggle,.calLegend) input[type=checkbox]:focus-visible,input.switch:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
:is(.wsToggle,.featureToggle) input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}
.minorToggle input[type=checkbox],.calLegend input[type=checkbox]{width:40px;height:24px}
.minorToggle input[type=checkbox]::before,.calLegend input[type=checkbox]::before{width:20px;height:20px}
.minorToggle input[type=checkbox]:checked::before,.calLegend input[type=checkbox]:checked::before{transform:translateX(16px)}
.wsToggle{align-items:center;justify-content:space-between;gap:16px}
.wsToggle input[type=checkbox]{order:2;margin:0 0 0 auto}
.wsToggles{gap:0}.wsToggles .wsToggle{padding:12px 0;border-top:1px solid var(--separator)}.wsToggles .wsToggle:first-child{border-top:0;padding-top:0}
.featureToggle{justify-content:space-between;background:var(--muted);border:0}
.featureToggle input[type=checkbox]{order:2}
.wsDayName input,.petPick input{accent-color:var(--limeDeep)}

/* Menus and dropdowns float above content: glass popovers */
.selectMenu,.comboMenu{border:0;border-radius:18px;box-shadow:var(--glass-edge)}
.selectOptions button,.comboList li{border-radius:10px}
.selectOptions button:hover,.comboList li.active{background:var(--fill)}
.selectOptions button[aria-selected=true],.comboList li[aria-selected=true]{background:var(--limeTint)}
.selectOptions button[aria-selected=true]::after,.comboList li[aria-selected=true]::after{color:var(--limeDeep)}
.qLeadResults{border:0;border-radius:16px;box-shadow:0 0 0 .5px rgba(16,20,21,.08),0 16px 40px -12px rgba(16,20,21,.3)}

/* ---------- Lists ---------- */
.leadRows,.appointmentRows,.inboxRows,.campList,.campRecipients,.scheduleRows{border-top:0}
.leadRow,.appointmentRow,.inboxRow,.feedItem,.wmIssue,.campList>li,.campRecipients li,.memberList li,.riskList a,.qRow,.billingRow,.event,.factRow,.monPage,.wmIncident,.calRow{border-color:var(--separator)}
.leadTableHead{color:var(--faint);font-size:12px;letter-spacing:.04em;font-weight:600}
.leadsPage .leadRow{border-radius:14px}
.leadsPage .leadRow:hover,.inboxRow:hover,.campRow:hover,.qRow:hover{background:var(--muted)}
.inboxRow.selected{background:var(--limeTint)}
.company span,.leadContact small,.leadWhen,.leadMeta{color:var(--soft)}
.rowGo{color:#c4c8c9}
.appointmentRow>time,.confirmRow time{background:var(--muted);border-radius:14px}
.appointmentRow.pending>time,.confirmRow time{background:#fff0d7}
.toConfirm{background:#fffaf1}
.calRow.today .calDate b{color:var(--limeInk)}
.calHead{background:#fff}

/* ---------- Lead page ---------- */
.leadHero{display:block;padding:22px 22px 18px}
.leadHeroTop{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.leadTitle .eyebrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;text-transform:none;letter-spacing:0;font-size:13px;font-weight:500;color:var(--soft)}
.srcChip{display:inline-flex;padding:3px 10px;border-radius:99px;font-weight:600;font-size:12px;color:var(--limeDeep);background:var(--limeTint)}
.leadHeroActions{gap:8px}
.leadHero .stageWrap{margin:20px 0 0;padding:0;border:0;background:none;gap:10px}
.stageWrap{background:#fff;border:0;border-radius:var(--r-section)}
.stageBar{display:flex;gap:2px;padding:3px;border-radius:999px;background:rgba(118,118,128,.12)}
.stageBar button,.stageBar button:first-child,.stageBar button:last-child{flex:1;clip-path:none;border-radius:999px;height:36px;padding:0 12px;background:transparent;color:var(--soft);
  transition:background .2s,color .2s,transform .2s var(--ease)}
.stageBar button:hover{background:rgba(255,255,255,.7);color:var(--ink)}
.stageBar button span{background:rgba(255,255,255,.9);color:var(--soft)}
.stageBar button.done{background:transparent;color:var(--limeDeep)}
.stageBar button.done span{background:var(--limeTint);color:var(--limeDeep)}
.stageBar button.current,.stageBar button.current:hover{background:var(--lime);color:var(--limeInk);box-shadow:0 1px 3px rgba(16,20,21,.12)}
.stageBar button.current span{background:var(--limeInk);color:var(--lime)}
.stageBar button:active{transform:scale(.97)}
.stageBar.isLost button{background:transparent;color:#a9a1a1}
.stageWrap .lostToggle{height:42px}
.waitBanner{border:0;border-radius:var(--r-section);background:#fff8e6}
.leadHero+.leadLayout,.waitBanner+.leadLayout{margin-top:18px}
.leadLayout,.leadMain,.leadSide{gap:18px}
.leadCard h3{color:var(--faint);letter-spacing:.04em}
.msg.in .msgBody{background:var(--muted);border-radius:20px;border-bottom-left-radius:6px;border-top-left-radius:20px}
.msg.out .msgBody{background:var(--rail);color:#f1f4f2;border-radius:20px;border-bottom-right-radius:6px;border-top-right-radius:20px}
.msgTag{background:var(--limeTint);color:#607c24;border-radius:99px}
.composer{border-top-color:var(--separator)}
.composer input,.composer textarea{border-radius:16px}
.threadEmpty{border:0;background:var(--muted);border-radius:16px}
.factRow{border-top-color:var(--separator)}
.factRow a{background:var(--limeTint);color:var(--limeDeep)}
.activity li:not(:last-child)::before{background:var(--separator)}
.brief div,.researchBlocks article{border-left-color:var(--lime)}
.bubble.in .bubbleBody{background:var(--muted)}
.bubble.out .bubbleBody{background:var(--lime);color:var(--limeInk)}
.inboxCompose{border-top-color:var(--separator)}.inboxCompose textarea{border-radius:22px}

/* ---------- Settings ---------- */
.wsLayout{gap:22px}
.wsNav{padding:6px;gap:2px}
.wsNav a{border-radius:14px}
.wsNav a:hover{background:var(--muted)}
.wsNav svg{color:var(--soft)}.wsNav a[aria-current=page] svg{color:var(--limeDeep)}
.wsCard{padding:24px 26px}
.wsHead h2{font-size:22px;font-weight:700;letter-spacing:-.015em}
.wsPreview{background:var(--muted)}
.wsDays span{border:0;background:var(--fill);color:var(--ink)}
.wsDay{border-top-color:var(--separator)}
.wsClosure.on{background:var(--muted)}

/* ---------- Dialogs: centred card on desktop, iOS sheet on phones ---------- */
dialog{--dlg-pad:28px;border:0;border-radius:var(--r-sheet);background:#fff;color:var(--ink);
  box-shadow:0 0 0 .5px rgba(16,20,21,.06),0 30px 80px -20px rgba(16,20,21,.38);overscroll-behavior:contain}
dialog::backdrop{background:rgba(16,20,21,.26)}
dialog[open]{animation:dlgIn .26s var(--ease)}
@keyframes dlgIn{from{opacity:0;transform:translateY(10px) scale(.98)}}
dialog :is(form,#detail,.campDetail):has(>.modalHead:first-child),dialog form:has(>.detailTop:first-child),dialog #detail:has(>.detailTop:first-child){padding:0 var(--dlg-pad) var(--dlg-pad)}
dialog :is(form,#detail,.campDetail)>.modalHead:first-child,dialog :is(form,#detail)>.detailTop:first-child{position:sticky;top:0;z-index:5;margin:0 calc(-1*var(--dlg-pad)) 18px;padding:20px var(--dlg-pad) 14px;align-items:center;
  box-shadow:inset 0 -.5px 0 rgba(16,20,21,.1)}
dialog>.modalHead:first-child{position:sticky;top:0;z-index:5;padding:20px var(--dlg-pad) 14px!important;margin:0;align-items:center;box-shadow:inset 0 -.5px 0 rgba(16,20,21,.1)}
dialog .modalHead h2,dialog .detailTop h2{margin:2px 0 0;font-size:20px;font-weight:700;letter-spacing:-.015em}
dialog form>footer{position:sticky;bottom:0;z-index:4;margin:22px calc(-1*var(--dlg-pad)) calc(-1*var(--dlg-pad));padding:12px var(--dlg-pad) var(--dlg-pad);box-shadow:inset 0 .5px 0 rgba(16,20,21,.1)}
dialog form>footer:only-child{margin:0;padding:0;box-shadow:none;background:none}
.confirmDialog footer{background:none;box-shadow:none}
.confirmIcon{background:var(--limeTint);color:var(--limeDeep)}
.confirmDialog footer button{border-radius:999px;height:46px}
.qDetailBody{padding:14px var(--dlg-pad) var(--dlg-pad)}

/* ---------- Toast and update bar: glass capsules at the top ---------- */
.toast{top:calc(14px + env(safe-area-inset-top));bottom:auto!important;transform:translate(-50%,-14px);background:var(--glass-bg);color:var(--ink);
  padding:12px 20px;border-radius:999px;font:600 14px/1.3 Inter,system-ui,sans-serif;box-shadow:var(--glass-edge);max-width:calc(100vw - 32px);text-align:center;
  transition:opacity .2s,transform .3s var(--ease);z-index:300}
.toast.show{transform:translate(-50%,0)}
.toast[data-kind=error]{background:var(--glass-bg);color:var(--danger)}
.updateBar{color:var(--ink);border-radius:999px;box-shadow:var(--glass-edge);padding:6px 6px 6px 18px}
.updateBar strong{color:var(--ink)}
.updateBar .updateNow{background:var(--lime);color:var(--limeInk)}
.updateBar .updateLater{color:var(--soft)}.updateBar .updateLater:hover{color:var(--ink)}

/* ---------- Phone tab bar and More sheet ---------- */
.tabBar,.moreDrawer{display:none}
@media(min-width:701px){.moreDrawer[open]{display:none}}

/* ---------- Phones ---------- */
@media(max-width:700px){
  body{font-size:15px}
  .workspace{margin-left:0;padding:calc(18px + env(safe-area-inset-top)) 16px calc(100px + env(safe-area-inset-bottom))}
  .topBar{left:0;grid-template-columns:1fr minmax(0,auto) 1fr;padding:env(safe-area-inset-top) 12px 0}
  .topTitle{text-align:center;font-size:17px}
  .topBack{justify-self:start}.topActions{justify-self:end}
  .topAction{height:34px;padding:0 14px}
  .workspace>header h1,.leadTitle h1,.bookingHero h1,.clientDetailHead h1{font-size:32px}
  .workspace>header{align-items:flex-start}
  .workspace>header .pageAdd,.workspace>header>.addLead{align-self:flex-start}
  .salesCard,.dateCard,.scheduleCard,.activityCard,.leadCard,.detailCard,.appointmentCard,.billingCard,.bookingGrid .card,.wsCard,.calCard,.featureCard,
  .mwTodo,.segCard,.qLocked,.comingSoon,.leadHero,.calOverview,.guardCard,.nativeBanner,.appointmentSummary{border-radius:var(--r-section)}
  .wsCard{padding:18px 16px}
  .statGrid{gap:10px;margin-top:22px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .statGrid article{min-height:0;padding:14px 16px}
  .statGrid strong{font-size:28px}
  .primary,.addLead,.sendBtn,.ghost,.ghostBtn,.wsBtnSoft,.secondary,.lostToggle{height:44px}
  /* 16px stops iOS zooming into fields */
  input,textarea,select,.comboTrigger,.search input{font-size:16px!important}

  /* Leads: controls on the grouped background, rows in one inset section */
  .leadsPage{background:none;padding:0;margin-top:22px;min-height:0}
  .leadsPage>.cardHeading{gap:12px}
  .leadsPage>.cardHeading h2{display:none}
  .leadsPage>.cardHeading p{font-size:13px}
  .leadsPage .listControls{gap:8px}
  .leadsPage .search{flex:1 1 100%;background:rgba(118,118,128,.12)}
  .leadsPage .listControls .combo,.leadsPage .listControls select{flex:1}
  .leadsPage .comboTrigger{background:#fff}
  .leadsPage .refresh{background:#fff}
  .premiumFilters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:10px -16px 0;padding:0 16px}
  .premiumFilters select{flex:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236d7674' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 13px center;min-height:36px;height:36px;border-radius:999px;padding:0 34px 0 14px;font-size:15px!important}
  .leadsPage .leadRows{margin-top:12px;background:#fff;border-radius:var(--r-section);overflow:hidden}
  .leadsPage .leadRows:has(.empty){background:none}
  .leadRowList>li{position:relative}
  .leadRowList>li+li::before{content:'';position:absolute;top:0;left:60px;right:0;height:1px;background:var(--separator);transform:scaleY(.5);transform-origin:top}
  .leadsPage .leadRow{border:0;border-radius:0;padding:12px 16px;min-height:60px}
  .leadsPage .leadRow>.leadWhen{padding-left:44px}
  .leadsPage .leadRow>.stage{align-self:center}
  .leadMark{width:34px;height:34px}
  .pager{padding:16px 0 0}

  /* Generic rows inside sections */
  .appointmentRow,.feedItem,.qRow,.inboxRow{padding-left:0;padding-right:0}
  .queueRows .qRow,.campList .campRow{padding:12px 4px}

  /* Lead page */
  .leadHero{padding:18px 16px 16px}
  .leadHeroTop{flex-direction:column;gap:14px}
  .stageBar{overflow-x:auto;scrollbar-width:none}
  .stageBar button,.stageBar button:first-child,.stageBar button:last-child{flex:none;padding:0 12px}
  .stageBar button.current{flex:1}
  .leadCard{padding:16px}
  .msg{max-width:92%}

  /* Settings: the section list scrolls sideways as capsules */
  .wsNav{background:none!important;padding:0;gap:6px}
  .wsNav a{border-radius:999px;background:#fff;padding:8px 14px}
  .wsNav a[aria-current=page]{background:var(--limeTint)}

  /* Dialogs become sheets */
  dialog{--dlg-pad:16px}
  dialog[open]{margin:auto 0 0;width:100%;max-width:100%;max-height:calc(100dvh - 10px - env(safe-area-inset-top));border-radius:var(--r-sheet) var(--r-sheet) 0 0;
    animation:sheetUp .34s var(--ease)}
  dialog::before{content:'';display:block;position:sticky;top:6px;z-index:6;width:36px;height:5px;margin:6px auto -11px;border-radius:999px;background:rgba(16,20,21,.2)}
  @keyframes sheetUp{from{transform:translateY(100%)}}
  dialog :is(form,#detail,.campDetail)>.modalHead:first-child,dialog :is(form,#detail)>.detailTop:first-child,dialog>.modalHead:first-child{padding-top:22px!important}
  dialog form>footer{padding-bottom:calc(14px + env(safe-area-inset-bottom));flex-wrap:wrap}
  dialog form>footer button{flex:1 1 auto}
  .campDetail,.confirmBody{padding-left:16px;padding-right:16px}
  .confirmDialog footer{padding:12px 16px calc(16px + env(safe-area-inset-bottom))}

  /* The floating glass tab bar */
  .tabBar{display:flex;position:fixed;z-index:60;left:16px;right:16px;bottom:calc(10px + env(safe-area-inset-bottom));max-width:480px;margin:0 auto;height:64px;padding:5px;gap:2px;
    border-radius:999px;box-shadow:var(--glass-edge)}
  .tabBar a,.tabBar button{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;border-radius:999px;background:none;padding:0;
    color:var(--soft);font:600 10.5px/1.1 Inter,system-ui,sans-serif;text-decoration:none;cursor:pointer;transition:background-color .2s,color .2s,transform .2s var(--ease)}
  .tabBar .navIcon{width:24px;height:24px;margin:0;stroke-width:1.7}
  .tabBar .active{background:var(--limeTint);color:var(--ink)}
  .tabBar .active .navIcon{stroke-width:2;color:var(--limeDeep)}
  .tabBar a:active,.tabBar button:active{transform:scale(.94)}
  .tabBar a:focus-visible,.tabBar button:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
  .tabBar span{white-space:nowrap}

  /* "More": the whole menu as an iOS sheet with inset grouped lists */
  .moreDrawer[open]{display:block;background:var(--group);padding:0 0 calc(20px + env(safe-area-inset-bottom))}
  .moreDrawer .drawerHead{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;padding:22px 16px 12px;box-shadow:inset 0 -.5px 0 rgba(16,20,21,.1)}
  .moreDrawer .drawerHead div{flex:1;min-width:0;display:grid}
  .moreDrawer .drawerHead strong{font-size:17px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .moreDrawer .drawerHead small{color:var(--soft);font-size:13px}
  .moreDrawer .avatar{width:40px;height:40px}
  .moreDrawer nav{display:block;padding:0 16px}
  .moreDrawer nav p,.drawerSpaces p{margin:22px 16px 7px;font:600 13px/1.3 Inter,system-ui,sans-serif;letter-spacing:.03em;text-transform:uppercase;color:var(--soft)}
  .drawerList{background:#fff;border-radius:var(--r-section);overflow:hidden}
  .moreDrawer nav>.drawerList:last-child{margin-top:22px}
  .drawerList>a,.drawerList>button{position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:50px;padding:0 16px;border:0;background:none;
    color:var(--ink);font:500 16px Inter,system-ui,sans-serif;text-decoration:none;text-align:left;cursor:pointer}
  .drawerList>*+*::before{content:'';position:absolute;top:0;left:50px;right:0;height:1px;background:var(--separator);transform:scaleY(.5);transform-origin:top}
  .drawerList>a:active,.drawerList>button:active{background:var(--muted)}
  .drawerList>a.active{background:var(--limeTint);font-weight:600}
  .drawerList .navIcon{width:22px;height:22px;margin:0;color:var(--soft)}
  .drawerList>a.active .navIcon{color:var(--limeDeep)}
  .drawerList>a span{flex:1}
  .drawerList .chev{width:16px;height:16px;fill:none;stroke:#c4c8c9;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  .drawerList .drawerOut{justify-content:center;color:var(--danger);font-weight:600}
  .drawerSwitch{display:flex;align-items:center;gap:2px;height:32px;padding:0 8px 0 10px;border:0;border-radius:999px;background:var(--fill);color:var(--ink);cursor:pointer}
  .drawerSwitch[aria-expanded=true]{background:var(--limeTint)}
  .drawerSwitch .btnIcon{width:17px;height:17px}.drawerSwitch .caret{width:15px;height:15px;transition:transform .2s}.drawerSwitch[aria-expanded=true] .caret{transform:rotate(180deg)}
  .drawerSpaces{padding:0 16px}
  .drawerWs span{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--limeTint);color:var(--limeDeep);font-weight:700;flex:none}
  .drawerWs i{margin-left:auto;font-style:normal;color:var(--limeDeep)}
  .moreDrawer .drawerList>a,.moreDrawer .drawerList>button{font-size:16px}
}

/* ---------- Sign in ---------- */
.loginBody{background:var(--group)}
.loginCard{border-radius:var(--r-sheet);box-shadow:0 0 0 .5px rgba(16,20,21,.05),0 24px 60px -24px rgba(16,20,21,.25)}
.loginCard h1{font-size:34px;font-weight:700;letter-spacing:-.025em}
.loginCard .sub{color:var(--soft);margin:0}
.googleButton{border-radius:999px;background:var(--lime);color:var(--limeInk);padding:15px;font-size:16px}
.googleButton:hover{background:#7ed40a}

/* ---------- Motion ---------- */
@media(prefers-reduced-motion:reduce){
  .topBar,.topBar.on,.toast,.tabBar a,.tabBar button,.stageBar button,:is(.wsToggle,.featureToggle,.minorToggle,.calLegend) input::before{transition:none}
  dialog[open]{animation:none}
  :is(.primary,.addLead,.sendBtn,.ghost,.ghostBtn,.wsBtnSoft,.appointmentStatus,.checkBtn,.ovEdit,.lostToggle,.secondary,.topAction,.refresh,.rowAction,.tabBar a,.tabBar button):active{transform:none!important}
}

/* Fields that sit on a soft-filled tile turn white so they still read as fields */
:is(.wsEmpty,.wsFacts,.clientTodo,.plSoFar,.campAudience,.staffNote,.autoLocked,.wsSoon article,.wsClosure.on) :is(input:not([type=checkbox]):not([type=radio]),select,textarea,.comboTrigger){background-color:#fff}
.queueLayout{margin-top:28px}
.seg.queueTabs{display:flex;flex-wrap:nowrap;width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg.queueTabs::-webkit-scrollbar{display:none}
.seg.queueTabs button{flex:none;white-space:nowrap}
.leadHero+.waitBanner{margin:14px 0 0}

/* ---------- Liquid Glass, stronger (iOS 26 / iPadOS 26) ----------
   The glass needs something behind it to bend, so the grouped background carries a faint colour wash, the sidebar
   floats as a glass pane like iPadOS 26, and every glass surface gets the specular rim (bright top edge, soft
   inner glow). Content stays on solid white sections. */
:root{
  --glass-bg:rgba(255,255,255,.56);
  --glass-blur:blur(26px) saturate(190%) brightness(1.03);
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 1px rgba(255,255,255,.4),inset 0 0 0 1px rgba(255,255,255,.5),
    0 0 0 .5px rgba(16,20,21,.1),0 12px 34px -12px rgba(16,20,21,.26);
}
body:not(.loginBody){background:transparent}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(70vw 55vh at 0% -12%,rgba(134,226,11,.15),transparent 62%),
  radial-gradient(55vw 50vh at 104% 0%,rgba(122,168,255,.15),transparent 62%),
  radial-gradient(60vw 55vh at 78% 112%,rgba(255,186,150,.13),transparent 62%)}
.loginBody::before{display:none}
.topBar{box-shadow:inset 0 -.5px 0 rgba(16,20,21,.1),inset 0 1px 0 rgba(255,255,255,.7)}

/* Floating glass sidebar */
@media(min-width:701px){
  .sidebar{inset:12px auto 12px 12px;width:calc(var(--side-w) - 22px);height:auto;padding:20px 12px 14px;border:0;border-radius:28px;
    background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-edge)}
  .navLink:not(.active):hover{background:rgba(255,255,255,.6)}
  .navLink.active,.navLink.active:hover{background:#fff;box-shadow:0 1px 2px rgba(16,20,21,.06),0 4px 14px -6px rgba(16,20,21,.18);color:var(--ink)}
  .profile{border-top-color:rgba(16,20,21,.08)}
  .logout,.wsSwitch{background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 .5px rgba(16,20,21,.08)}
  .workspace{padding-left:calc(var(--gutter) - 6px)}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.sidebar{background:rgba(250,251,251,.97)}}
@media(prefers-reduced-transparency:reduce){.sidebar{background:#f7f8f8!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}body::before{display:none}}

/* Sections lift a hair off the tinted background */
.salesCard,.dateCard,.scheduleCard,.activityCard,.leadList,.leadCard,.detailCard,.appointmentCard,.appointmentSummary,.billingCard,
.bookingGrid .card,.wsCard,.calCard,.featureCard,.statGrid article,.mwTodo,.wmHero>div,.segCard,.qLocked,.comingSoon,.leadHero,
.calOverview,.guardCard,.nativeBanner,.toConfirm,.planCard,.drawerList{box-shadow:0 0 0 .5px rgba(16,20,21,.04),0 1px 2px rgba(16,20,21,.03)}

/* Secondary controls on the background are glass capsules, like iOS 26 toolbar buttons */
.workspace>header :is(.ghost,.ghostBtn,.wsBtnSoft,.refresh,.secondary),.listControls .refresh,.backLink{
  background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-edge)}
.backLink{height:36px;padding:0 14px 0 10px;border-radius:999px;color:var(--ink);text-decoration:none}
.backLink:hover{text-decoration:none;background:rgba(255,255,255,.8)}
.seg,.calViews,.stageBar{background:rgba(118,118,128,.1);box-shadow:inset 0 0 0 .5px rgba(16,20,21,.04)}
.topBack a{background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 .5px rgba(16,20,21,.08)}

/* Phone tab bar: the selected tab is a raised glass lens */
@media(max-width:700px){
  .tabBar{height:66px;padding:6px}
  .tabBar .active{background:rgba(255,255,255,.85);color:var(--ink);box-shadow:inset 0 1px 0 #fff,0 0 0 .5px rgba(16,20,21,.06),0 4px 14px -4px rgba(16,20,21,.2)}
  .moreBtn.active{background:none;box-shadow:none;color:var(--soft)}
  .moreDrawer[open]{background:rgba(242,243,244,.9);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%)}
}

/* ---------- Layout fixes: nothing wider than the screen ---------- */
.dashboardGrid>*,.rightStack>*,.queueLayout>*,.leadLayout>*,.wsLayout>*{min-width:0}
.queueLayout{grid-template-columns:minmax(0,1fr) 320px}
.cardHeading{flex-wrap:wrap}
.listControls{flex-wrap:wrap;min-width:0}
@media(max-width:1100px){
  .queueLayout{grid-template-columns:minmax(0,1fr)}
  .leadsPage>.cardHeading,.clientsPage>.cardHeading{flex-direction:column;align-items:stretch}
  .leadsPage .listControls,.clientsPage .listControls{width:100%}
  .leadsPage .listControls .search,.clientsPage .listControls .search{flex:1 1 220px}
  .leadsPage .listControls .search input,.clientsPage .listControls .search input{width:100%}
}
@media(max-width:1050px){
  .dashboardGrid{grid-template-columns:minmax(0,1fr)}
  .rightStack{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
}
@media(max-width:700px){
  .queuePage .cardHeading{flex-direction:column;align-items:stretch}
  .queuePage .listControls select{flex:1}
  .seg.queueTabs{width:auto}
  .qActions select{max-width:none;flex:1 1 120px}
}
@media(max-width:700px){.leadsPage{box-shadow:none}}
.queueLayout>.queueMain{grid-column:auto}

/* ---------- Emails: Mail-style list → message on phones and tablets ---------- */
.inboxLayout{grid-template-columns:minmax(0,380px) minmax(0,1fr)}
.inboxLayout>*{min-width:0}
.inboxBack{display:none}
.inboxText{overflow-wrap:anywhere}
.inboxHead>div{min-width:0}.inboxHead h2,.inboxHead p{overflow-wrap:anywhere}
@media(max-width:1050px){
  .inboxLayout{grid-template-columns:minmax(0,1fr)}
  .inboxLayout.reading>.inboxList{display:none}
  .inboxLayout:not(.reading)>.inboxReader{display:none}
  .inboxLayout.reading{margin-top:18px}
  .inboxBack{display:inline-flex;align-items:center;gap:2px;align-self:flex-start;height:36px;padding:0 14px 0 8px;margin:0 0 16px;border:0;border-radius:999px;cursor:pointer;
    background:var(--fill);color:var(--ink);font:600 15px Inter,system-ui,sans-serif}
  .inboxBack svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  .inboxBack:active{transform:scale(.96)}
}
@media(max-width:700px){
  .inboxReader{padding:16px;min-height:0}
  .inboxHead h2{font-size:20px}
  .inboxHead .inboxActions{width:100%;display:flex}.inboxHead .inboxActions .appointmentStatus{flex:1;justify-content:center;height:34px}
  .bubble{max-width:100%}.bubble.in{width:100%}.bubble.in>.inboxAvatar{display:none}.bubble.in>div{flex:1}
  .bubble.out{max-width:88%}
  .inboxCompose{flex-wrap:wrap;margin-top:18px}.inboxCompose textarea{flex:1 1 100%}.inboxCompose .addLead{flex:1}
  .inboxList{padding:16px}
}
@media(max-width:1050px){.workspace:has(.inboxLayout.reading)>header{display:none}.inboxLayout.reading{margin-top:0}}
@media(max-width:1050px){.workspace:has(.inboxLayout.reading){padding-top:calc(var(--top-h) + 14px + env(safe-area-inset-top))}}