/* Business app behaviour only. The existing brand and customer pages are retained. */
.sl-install-card[hidden],.sl-install-dialog [hidden],.sl-network-banner[hidden],.sl-network-banner [hidden]{display:none!important}
.sl-install-card{display:flex;align-items:flex-start;gap:13px;background:#fff;border:1px solid #dfe6df;border-radius:14px;padding:18px}
.sl-install-card img,.sl-install-heading img{flex:none;border-radius:12px}
.sl-install-card strong{font-size:14px;line-height:1.45;color:#24332d}
.sl-install-card p{font-size:12px;line-height:1.6;color:#59675f;margin:5px 0 7px}
.sl-install-card-actions{display:flex;flex-wrap:wrap;gap:4px 14px}
.sl-install-card-actions button{background:none;border:0;color:#275b49;padding:7px 0;min-height:44px;font-size:13px;font-weight:650}
.sl-install-card-actions #installLater{font-weight:500;color:#59675f}
.sl-install-dialog{border:1px solid #dfe6df;border-radius:22px;padding:26px;max-width:480px;width:calc(100% - 28px);max-height:90dvh;overflow-y:auto;overscroll-behavior:contain;color:#24332d;background:#fff;box-shadow:0 20px 80px #13261d33}
.sl-install-dialog::backdrop{background:#17271f77}
.sl-install-heading{display:flex;align-items:center;gap:13px;position:relative;padding-right:28px}
.sl-install-heading>div{min-width:0}
.sl-install-heading h2{margin:3px 0 0;font-size:23px!important;letter-spacing:-.6px;line-height:1.25}
.sl-install-eyebrow{margin:0;font-size:9px!important;letter-spacing:1.1px;color:#526c5d;font-weight:700;line-height:1.45}
.sl-install-close{position:absolute;top:-12px;right:-14px;border:0;background:transparent;color:#53645a;width:44px;height:44px;font-size:26px}
#installIntro{font-size:14px;line-height:1.65;color:#59675f;margin:20px 0}
.sl-install-steps{list-style:none;counter-reset:install;padding:0;margin:18px 0}
.sl-install-steps li{counter-increment:install;position:relative;padding:0 0 21px 40px;margin:0;font-size:14px;line-height:1.5}
.sl-install-steps li::before{content:counter(install);position:absolute;left:0;top:1px;display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#edf3e7;color:#275b49;font-size:12px;font-weight:700}
.sl-install-steps strong{display:block;font-size:14px;line-height:1.45;font-weight:650}
.sl-install-steps p{font-size:13px;line-height:1.65;color:#59675f;margin:5px 0 0}
.sl-install-note{background:#f3f6ef;border-radius:10px;padding:13px;font-size:12px;line-height:1.65;color:#53645a;margin:0 0 18px}
.sl-install-buttons{display:flex;gap:9px;flex-wrap:wrap}
.sl-install-buttons .btn{flex:1;min-width:100px}
.sl-install-footnote{font-size:11px;line-height:1.65;color:#59675f;margin:14px 0 0}
#installFeedback{padding:12px;border-radius:9px;border:1px solid #b8d0be;color:#28593c;font-size:13px;line-height:1.6;margin:12px 0;overflow-wrap:anywhere}
.sl-network-banner{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;background:#fff6e7;color:#624a24;border-bottom:1px solid #eedfc2;padding:10px 16px;font:13px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;z-index:31}
.sl-network-banner span{max-width:700px}
.sl-network-banner button{flex-shrink:0;border:0;background:transparent;color:inherit;font:600 12px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;text-decoration:underline;min-height:44px;padding:8px}
.sl-network-banner .sl-network-close{font-size:22px;text-decoration:none;width:36px;padding:0}
.sl-network-banner :focus-visible{outline:3px solid #366c54;outline-offset:2px}
.sl-standalone body{min-height:100dvh}
@media (display-mode:standalone){
 [data-interface=app] .topbar{height:auto;min-height:calc(74px + env(safe-area-inset-top));padding-top:calc(11px + env(safe-area-inset-top));padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
 [data-interface=app] .gate{padding-top:calc(24px + env(safe-area-inset-top));padding-bottom:calc(24px + env(safe-area-inset-bottom));min-height:100dvh}
 [data-interface=page-editor] .editor-top,[data-interface=deposits] .pay-top{padding-top:calc(14px + env(safe-area-inset-top));height:auto;min-height:calc(68px + env(safe-area-inset-top))}
 .sl-network-banner{padding-top:calc(10px + env(safe-area-inset-top))}
 .sl-offline [data-interface=app] .topbar{padding-top:11px;min-height:74px}
}
@media(max-width:700px){
 .sl-install-dialog{margin:auto 0 0;width:100%;max-width:none;border-radius:22px 22px 0 0;padding:23px 20px calc(20px + env(safe-area-inset-bottom));max-height:94dvh}
 .sl-install-heading h2{font-size:22px!important}
 .sl-install-heading img{width:46px;height:46px}
 .sl-network-banner{padding-left:12px;padding-right:8px;font-size:12px;flex-wrap:wrap;gap:2px 8px;justify-content:flex-start}
 .sl-network-banner span{flex:1;min-width:200px}
 .sl-network-banner .sl-network-close{margin-left:auto}
 .sl-keyboard-open [data-interface=app] .mobile-nav{display:none}
 .sl-keyboard-open [data-interface=app] .shell{padding-bottom:20px}
}
@media(prefers-reduced-motion:no-preference){
 [data-interface=app] .mobile-nav button{transition:background-color 120ms ease,color 120ms ease}
 [data-interface=app] .mobile-nav button:active{transform:translateY(1px)}
}

/* Business switcher (shown only when an account has two or more businesses). */
.business-switch{margin:-6px 0 14px}
.business-switch select{width:100%;font-weight:600}
.ui-menu-links .business-switch{margin:10px 0;padding:0 4px}
.ui-menu-links .business-switch label{display:block;font-size:.85rem;margin-bottom:4px}
.service-order{display:inline-flex;gap:4px;margin-right:6px}
.service-order button{min-width:36px;min-height:36px;padding:0;border-radius:10px}
.appt .staff-name{font-weight:600}

/* "Get ready to take bookings" guide on Today (TestFlight feedback). */
[data-interface=app] .setup-guide{border:1px solid #cfe0c9;background:#f6faef;margin-bottom:18px;padding:18px}
[data-interface=app] .setup-guide h2{margin:0 0 4px;font-size:19px}
[data-interface=app] .setup-guide .help{margin:0 0 12px}
[data-interface=app] .setup-guide ol{list-style:none;margin:0;padding:0;display:grid;gap:10px}
[data-interface=app] .setup-guide li{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:#fff;border:1px solid #e1e8dc}
[data-interface=app] .setup-guide li.done{opacity:.7}
[data-interface=app] .setup-mark{flex:0 0 30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#275b49;color:#fff;font-weight:700;font-size:14px}
[data-interface=app] .setup-guide li.done .setup-mark{background:#dfe9d6;color:#275b49}
[data-interface=app] .setup-text{flex:1;min-width:0;display:grid}
[data-interface=app] .setup-text small{color:#5d6b64;font-size:13px}
[data-interface=app] .setup-guide .btn{white-space:nowrap}
@media(max-width:700px){[data-interface=app] #overview>.setup-guide{order:1}}
.gate .show-password{display:flex;align-items:center;gap:8px;margin:10px 0 0;font-weight:400;font-size:14px;color:#4f6158}.gate .show-password input{width:18px;height:18px;min-height:0;margin:0;flex:none}
#settingsForm.is-dirty .ui-settings-save{position:fixed;left:16px;right:16px;bottom:calc(90px + env(safe-area-inset-bottom));z-index:30;margin:0;box-shadow:0 10px 28px rgba(20,40,30,.28)}#settingsForm.is-dirty{padding-bottom:72px}@media (min-width:900px){#settingsForm.is-dirty .ui-settings-save{left:auto;right:32px;bottom:24px;min-width:200px}}
#clientList .contact-link{color:#275b49;font-weight:600;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}#clientList .contact-line{display:block;margin-top:4px}
#clientList .contact-lines{font-size:13px;color:#5f6f66;margin-top:2px;min-width:0}#clientList .service-row>div:first-child{min-width:0}
.phone-setting{margin-top:18px;padding-top:16px;border-top:1px solid #e3e8df}.phone-setting .phone-current{margin:4px 0 10px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}.phone-badge{background:#e3eed8;color:#275b49;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:700}.phone-setting .toggle{margin-bottom:12px}
#phoneGate #phoneCode{font-size:24px;letter-spacing:.35em;text-align:center}#phoneGate .switch button+button{margin-left:16px}
.gate .field-error,#phoneGate .field-error{color:#9b3b2f;font-size:13px;font-weight:600;margin:6px 0 0;line-height:1.5}.gate .field-error[hidden]{display:none}.gate input[aria-invalid=true]{border-color:#c0533f}
.phone-preview{color:#275b49;font-weight:600;min-height:0;margin:6px 0 0}.phone-preview:empty{display:none}
/* Pop-up messages are text only: never let one block a tap on the button
   underneath (it covered the pinned "Save changes" button on phones). */
.toast{pointer-events:none}
body:has(#settingsForm.is-dirty) .toast{bottom:calc(158px + env(safe-area-inset-bottom))}
.gate input[type=checkbox]{accent-color:#275b49}

/* ---------------------------------------------------------- opening animation */
.launch{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:#275b49;color:#e7f0c9;
  animation:launch-leave .5s cubic-bezier(.7,0,.2,1) .95s forwards}
.launch-brand{display:grid;justify-items:center;gap:12px}
/* Calendar slot becomes a booking (the idea from the iPhone app's launch). */
.launch-calendar{overflow:visible;animation:launch-arrive .26s ease-out both}
.launch-paper{fill:#fffef9;stroke:#fffef9;stroke-width:2}
.launch-lines{stroke:#275b49;stroke-width:3;stroke-linecap:round}
.launch-days{stroke:#b3c1b1;stroke-width:4;stroke-linecap:round}
.launch-slot{fill:#275b49;transform-box:fill-box;transform-origin:center;animation:launch-slot .3s .2s cubic-bezier(.2,.7,.2,1) both}
.launch-ring{stroke:#cfe6a8;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;animation:launch-settle .38s .46s ease-out both}
.launch-tick{stroke:#e5efcc;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:launch-tick .24s .46s ease-out forwards}
.launch-word{font:800 34px/1 Manrope,Arial,sans-serif;letter-spacing:-1.7px;color:#fff;animation:launch-arrive .3s .3s ease-out both}
.launch-word i{font-style:normal;color:#b9d38f}
@keyframes launch-arrive{from{opacity:0;transform:translateY(5px) scale(.96)}to{opacity:1;transform:none}}
@keyframes launch-slot{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@keyframes launch-tick{to{stroke-dashoffset:0}}
@keyframes launch-settle{from{opacity:.45;transform:scale(1)}to{opacity:0;transform:scale(1.4)}}
@keyframes launch-leave{to{transform:translateY(-100%);visibility:hidden}}
@keyframes screen-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* The rise only plays at launch (html.launching is set by launch.js for ~1.7s),
   so switching screens later never waits on it. */
html.launching .gate-card,html.launching #onboard .wiz{animation:screen-rise .55s cubic-bezier(.2,.8,.2,1) 1.1s both}
html.skip-launch .launch{display:none}
@media (prefers-reduced-motion:reduce){.launch{display:none}.gate-card,#onboard .wiz{animation:none!important}}

/* ------------------------------------------- create account: welcome screen */
/* Sign in is the calm card. Create account is a full-screen welcome in Slotly
   green with the form in a sheet that slides up, like signing up for an app. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.welcome-hero{display:none}
#gate.is-welcome{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:0;min-height:100dvh;
  background:radial-gradient(120% 70% at 85% 0%,#3f7d63 0%,rgba(63,125,99,0) 60%),radial-gradient(90% 60% at 0% 35%,#2f6b54 0%,rgba(47,107,84,0) 65%),#1d4436;color:#fff;overflow:hidden}
#gate.is-welcome .welcome-hero{display:block;width:100%;max-width:520px;padding:calc(22px + env(safe-area-inset-top)) 24px 18px;position:relative}
.welcome-brand{display:flex;align-items:center;gap:8px;font:800 26px/1 Manrope,Arial,sans-serif;letter-spacing:-1.2px;color:#fff}
.welcome-brand i{font-style:normal;color:#b9d38f}
.welcome-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:rgba(231,240,201,.14);color:#e7f0c9}
.welcome-mark svg{width:22px;height:22px;animation:welcome-spin 14s linear infinite}
.welcome-title{margin:26px 0 0;font:800 clamp(34px,10vw,46px)/1.05 Manrope,Arial,sans-serif;letter-spacing:-1.8px;color:#fff}
.welcome-rotator{display:block;height:1.1em;overflow:hidden;color:#cfe6a8}
.welcome-rotator span{display:block;height:1.1em;animation:welcome-words 7.5s cubic-bezier(.7,0,.2,1) infinite}
.welcome-lead{margin:16px 0 0;max-width:30ch;font-size:15.5px;line-height:1.55;color:rgba(255,255,255,.82)}
#gate.is-welcome .gate-card{width:100%;max-width:520px;border:0;border-radius:28px 28px 0 0;padding:22px 22px calc(16px + env(safe-area-inset-bottom));margin-top:auto;color:#22382e;box-shadow:0 -12px 40px rgba(0,0,0,.25);animation:sheet-up .6s cubic-bezier(.2,.9,.25,1) both}
html.launching #gate.is-welcome .gate-card{animation:sheet-up .6s cubic-bezier(.2,.9,.25,1) 1.05s both}
#gate.is-welcome .gate-card>.logo{display:none}
#gate.is-welcome #gateTitle{text-align:left;font-size:22px;margin:0}
#gate.is-welcome #gateSub{text-align:left;margin:4px 0 10px}
#gate.is-welcome #passwordHint{display:none}
#gate.is-welcome #authForm label{margin-top:10px}
#gate.is-welcome #authSubmit{margin-top:14px!important}
#gate.is-welcome .switch{margin-top:10px}
#gate.is-welcome #authSubmit{min-height:54px;font-size:16px;border-radius:14px;background:linear-gradient(135deg,#2d6a54,#1d4436);box-shadow:0 8px 20px rgba(29,68,54,.35)}
@keyframes welcome-words{0%,22%{transform:translateY(0)}25%,47%{transform:translateY(-100%)}50%,72%{transform:translateY(-200%)}75%,100%{transform:translateY(-300%)}}
@keyframes welcome-spin{to{transform:rotate(360deg)}}
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:none}}
.gate-card.is-switching{animation:auth-swap .35s cubic-bezier(.2,.8,.2,1)}
@keyframes auth-swap{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (min-width:900px){#gate.is-welcome{justify-content:center}#gate.is-welcome .gate-card{border-radius:28px;margin-bottom:40px}}
@media (max-height:700px){.welcome-title{margin-top:18px}}
@media (prefers-reduced-motion:reduce){.welcome-rotator span,.welcome-mark svg,#gate.is-welcome .gate-card,.gate-card.is-switching{animation:none!important;opacity:1}}

/* ---- type of business picker (setup step 1) ---- */
.type-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:20px 0 6px}
.type-tile{position:relative;flex:0 0 calc((100% - 20px)/3);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:116px;padding:14px 6px 12px;border:1.5px solid #e3e8e0;border-radius:16px;background:#fff;color:#1f4a3a;text-align:center;font:inherit;font-weight:650;font-size:13px;line-height:1.25;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:border-color .22s,background .22s,box-shadow .3s,transform .1s}
.type-tile:hover{border-color:#b6cbb9}
.type-tile:active{transform:scale(.97)}
.type-tile[aria-checked=true]{border-color:#1f4a3a;background:#f1f7e9;box-shadow:0 0 0 3px rgba(31,74,58,.10)}
.type-icon{flex:none;display:grid;place-items:center;color:#1f4a3a}
.type-tile .type-icon svg{width:52px;height:52px;overflow:visible}
.type-label{display:block;max-width:100%;overflow-wrap:anywhere}
.wiz-step h1[tabindex="-1"]:focus{outline:none}
.type-chip{display:inline-flex;align-items:center;gap:9px;margin:0 0 16px;padding:5px 14px 5px 6px;min-height:44px;border:1px solid #dfe5de;border-radius:99px;background:#fff;color:#22382e;font:inherit;font-weight:600;font-size:14px;cursor:pointer}
.type-chip .type-icon{width:34px;height:34px;border-radius:50%;background:#f1f7e9}
.type-chip .type-icon svg{width:26px;height:26px}
.type-chip small{color:var(--green,#275b49);font-weight:600;text-decoration:underline;text-underline-offset:3px;margin-left:4px}
@media(max-width:350px){.type-tile{flex-basis:calc((100% - 10px)/2)}}

/* Category gestures: a press, an icon-specific movement, then a quiet rest. */
.type-check{position:absolute;top:7px;right:7px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#86ad62;opacity:0;transform:scale(.5);pointer-events:none;transition:opacity .13s,transform .3s cubic-bezier(.2,.8,.2,1)}
.type-check svg{width:13px;height:13px}
.type-check path{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .26s .1s}
.type-tile[aria-checked=true] .type-check{opacity:1;transform:scale(1)}
.type-tile[aria-checked=true] .type-check path{stroke-dashoffset:0}
.type-tile::before{content:'';position:absolute;inset:-3px;border:2px solid #86ad62;border-radius:19px;opacity:0;pointer-events:none}
.type-tile [data-type-part]{transform-box:view-box;transform-origin:24px 24px}
.type-tile[data-type=barber] [data-type-part]{transform-origin:20px 22px}
.type-tile[data-type=makeup] [data-type-part=primary]{transform-origin:18px 29px}
.type-tile[data-type=nails_lashes] [data-type-part=primary]{transform-origin:12px 24px}
.type-tile[data-type=beauty] [data-type-part=accent]{transform-origin:38px 29px}
.type-tile[data-type=massage] [data-type-part=accent]{transform-origin:29px 23px}
.type-tile[data-type=cleaning] [data-type-part=primary]{transform-origin:21px 38px}
.type-tile[data-type=cleaning] [data-type-part=accent]{transform-origin:38px 24px}
.type-tile[data-type=car_detailing] [data-type-part=accent]{transform-origin:40px 9px}
.type-tile[data-type=car_rental] [data-type-part=accent]{transform-origin:32px 8.5px}
.type-tile[data-type=other] [data-type-part=accent]{transform-origin:33.5px 33.5px}

@media(prefers-reduced-motion:no-preference){
  .type-tile.is-type-animating{animation:type-press .54s cubic-bezier(.25,.7,.25,1)}
  .type-tile.is-type-animating::before{animation:type-ring .52s ease-out}
  .type-tile.is-type-animating [data-type-part=primary]{animation:var(--type-primary,none) .68s ease-in-out}
  .type-tile.is-type-animating [data-type-part=secondary]{animation:var(--type-secondary,none) .68s ease-in-out}
  .type-tile.is-type-animating [data-type-part=accent]{animation:var(--type-accent,none) .68s ease-in-out}
  .type-tile[data-type=barber]{--type-primary:type-snip-a;--type-secondary:type-snip-b}
  .type-tile[data-type=hair]{--type-accent:type-air}
  .type-tile[data-type=makeup]{--type-primary:type-brush}
  .type-tile[data-type=nails_lashes]{--type-primary:type-blink}
  .type-tile[data-type=beauty]{--type-accent:type-drop}
  .type-tile[data-type=massage]{--type-primary:type-stones;--type-accent:type-leaf}
  .type-tile[data-type=trainer]{--type-primary:type-lift}
  .type-tile[data-type=cleaning]{--type-primary:type-spray;--type-accent:type-shine}
  .type-tile[data-type=car_detailing]{--type-primary:type-polish;--type-accent:type-sparkle}
  .type-tile[data-type=car_rental]{--type-primary:type-drive;--type-accent:type-key}
  .type-tile[data-type=other]{--type-accent:type-plus}
}
@keyframes type-press{0%,100%{transform:scale(1)}16%{transform:scale(.975)}54%{transform:scale(1.012)}}
@keyframes type-ring{0%{opacity:0;transform:scale(.99)}25%{opacity:.3;transform:scale(1.01)}100%{opacity:0;transform:scale(1.055)}}
@keyframes type-snip-a{0%,100%{transform:rotate(0)}24%{transform:rotate(9deg)}55%{transform:rotate(-2deg)}}
@keyframes type-snip-b{0%,100%{transform:rotate(0)}24%{transform:rotate(-9deg)}55%{transform:rotate(2deg)}}
@keyframes type-air{0%,100%{transform:translateX(0);opacity:1}32%{transform:translateX(2px);opacity:.75}}
@keyframes type-brush{0%,100%{transform:rotate(0)}24%{transform:rotate(-8deg)}55%{transform:rotate(1.8deg)}}
@keyframes type-blink{0%,100%{transform:scaleY(1)}32%{transform:scaleY(.65)}}
@keyframes type-drop{0%,100%{transform:translateY(0) scale(1)}32%{transform:translateY(-1.6px) scale(1.065)}}
@keyframes type-stones{0%,100%{transform:translateY(0)}32%{transform:translateY(-1px)}}
@keyframes type-leaf{0%,100%{transform:rotate(0)}24%{transform:rotate(7deg)}55%{transform:rotate(-1.6deg)}}
@keyframes type-lift{0%,100%{transform:translateY(0) rotate(0)}28%{transform:translateY(-2px) rotate(-3deg)}60%{transform:translateY(-.5px) rotate(.7deg)}}
@keyframes type-spray{0%,100%{transform:rotate(0)}24%{transform:rotate(-3deg)}55%{transform:rotate(.7deg)}}
@keyframes type-shine{0%,100%{transform:scale(1) rotate(0)}28%{transform:scale(1.12) rotate(20deg)}60%{transform:scale(1.03) rotate(-4deg)}}
@keyframes type-polish{0%,100%{transform:translateY(0)}32%{transform:translateY(-.5px)}}
@keyframes type-sparkle{0%,100%{transform:scale(1) rotate(0)}28%{transform:scale(1.16) rotate(25deg)}60%{transform:scale(1.04) rotate(-5deg)}}
@keyframes type-drive{0%,100%{transform:translateX(0)}24%{transform:translateX(2.2px)}55%{transform:translateX(-.5px)}}
@keyframes type-key{0%,100%{transform:rotate(0)}24%{transform:rotate(-12deg)}55%{transform:rotate(2.8deg)}}
@keyframes type-plus{0%{transform:rotate(90deg)}100%{transform:rotate(0)}}
@media(prefers-reduced-motion:reduce){
  .type-tile,.type-tile::before,.type-tile [data-type-part],.type-check,.type-check path{animation:none!important;transition:none!important}
  .type-tile:active{transform:none}
}

/* ---- setup step 1: compact booking-link preview and quiet extras ---- */
.link-preview{display:flex;align-items:center;gap:10px;margin:10px 0 4px;padding:10px 12px;border-radius:14px;background:#f1f7e9;border:1px solid #dfeccd;min-height:48px}
.link-preview-icon{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;color:#275b49}
.link-preview-icon svg{width:16px;height:16px}
.link-preview-text{flex:1;min-width:0;font-size:14px;color:#2f4a3e}
.link-preview-text b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.link-preview .linkbtn{flex:none;margin:0;padding:8px 4px;min-height:40px}
.tz-line{margin:14px 0 0;text-align:center;font-size:13px;color:#6a776f}
.tz-line b{font-weight:600;color:#2f4a3e}
.tz-line .linkbtn{display:inline;margin:0;padding:6px 2px;font-size:13px;min-height:0}
.private-note{text-align:center;font-size:12.5px;margin-top:6px}

/* ---- iPhone notch / status bar: keep setup and sign-in clear of it ----
   env() is 0 in ordinary browsers, so this only adds space where needed
   (the iPhone app draws edge to edge). */
[data-interface=app] .gate,[data-interface=app] .gate.tall{padding-top:max(18px,calc(12px + env(safe-area-inset-top)));padding-bottom:calc(35px + env(safe-area-inset-bottom))}
@media (max-width:700px){[data-interface=app] .topbar{height:auto;min-height:calc(74px + env(safe-area-inset-top));padding-top:max(11px,calc(6px + env(safe-area-inset-top)))}}
/* The full stop belongs right after "slotly" — only the icon gets a gap. */
.gate .logo,.wiz .logo,aside .logo{gap:0}
.logo>.mark,.logo>.slotly-mark{margin-right:10px}

/* =====================================================================
   Premium setup (#onboard): soft backdrop, floating card, filled inputs
   with icons, gradient progress and a confident Continue button.
   ===================================================================== */
[data-interface=app] #onboard{background:radial-gradient(120% 60% at 50% -10%,#e3eedb 0%,rgba(227,238,219,0) 60%),#f5f7f2}
#onboard .wiz{border:0;border-radius:28px;background:#fff;box-shadow:0 1px 2px rgba(23,48,38,.05),0 18px 50px -18px rgba(23,62,49,.22);padding:30px 24px 28px}
#onboard .wiz .logo{margin-bottom:24px}
#onboard .step-count{font-size:11px;letter-spacing:1.6px;color:#5b7a69;margin-bottom:10px}
#onboard .steps{gap:6px;margin-bottom:28px}
#onboard .steps div{height:6px;border-radius:99px;background:#edf0ea}
#onboard .steps div.on{background:linear-gradient(90deg,#275b49,#3f7d63)}
#onboard .steps div.done{background:#a9c58f}
#onboard .wiz h1{font-size:27px;line-height:1.15;letter-spacing:-.9px;color:#17302a;margin-bottom:8px}
#onboard .wiz .sub{font-size:15px;color:#62726a;margin-bottom:24px}
#onboard label{font-size:13px;font-weight:650;color:#2b3f36;margin:18px 0 8px}
#onboard input:not([type=checkbox]):not([type=radio]):not([type=color]),#onboard select,#onboard textarea{min-height:54px;border-radius:14px;border:1.5px solid #e4e9e1;background:#f8faf6;padding:14px 16px;font-size:16px;transition:border-color .15s,background .15s,box-shadow .15s}
#onboard input:not([type=checkbox]):not([type=radio]):focus,#onboard select:focus,#onboard textarea:focus{outline:none;border-color:#275b49;background:#fff;box-shadow:0 0 0 4px rgba(39,91,73,.12)}
#onboard .prefix{border:1.5px solid #e4e9e1;border-radius:14px;background:#f8faf6}
#onboard .prefix span{background:transparent;border-right:1.5px solid #e4e9e1;padding:0 16px}
#onboard .prefix input:not([type=checkbox]){border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0}
#onboard .prefix:focus-within{border-color:#275b49;background:#fff;box-shadow:0 0 0 4px rgba(39,91,73,.12)}
/* little icons inside the first-step fields */
#obName,#obPhone{padding-left:48px!important;background-repeat:no-repeat!important;background-position:16px 50%!important;background-size:20px!important}
#obName{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23275b49' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V8l7-4 7 4v13M9 21v-6h6v6'/%3E%3C/svg%3E")!important}
#obPhone{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23275b49' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6.5' y='2.5' width='11' height='19' rx='2.5'/%3E%3Cpath d='M11 18.5h2'/%3E%3C/svg%3E")!important}
#onboard .link-preview{border-radius:14px;background:linear-gradient(135deg,#f1f7e9,#e9f2df);border-color:#dbe8cc}
#onboard .btn.wide,#onboard .wiz-nav .btn:not(.ghost):not(.secondary){min-height:56px;border-radius:16px;font-size:16px;font-weight:700;background:linear-gradient(180deg,#2c6651,#1f4a3a);box-shadow:0 10px 22px -10px rgba(31,74,58,.55),inset 0 1px 0 rgba(255,255,255,.12);letter-spacing:.1px}
#onboard .btn.wide:active,#onboard .wiz-nav .btn:active{transform:translateY(1px)}
#obSubmit1::after{content:'→';margin-left:6px;font-weight:700}
#onboard .suggest-chip{border-radius:99px;padding:10px 15px;font-size:13px;background:#fff;border:1.5px solid #e1e9d9;box-shadow:0 1px 2px rgba(23,48,38,.04)}
#onboard .suggest-chip:hover{border-color:#a9c58f}
#onboard .type-chip{border:1.5px solid #e4e9e1;box-shadow:0 1px 2px rgba(23,48,38,.04)}
@media (max-width:480px){#onboard .wiz{padding:26px 20px 24px;border-radius:24px}}

/* ---- Days off ---- */
.off-heading{margin:18px 0 8px;font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#5b7a69}
.off-list{display:grid;gap:8px}
.off-item{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 14px;border:1px solid #e4e9e1;border-radius:14px;background:#fff}
.off-icon{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#eef4e8;color:#275b49}
.off-icon svg{width:20px;height:20px}
.off-text{flex:1;min-width:0;display:grid;gap:2px}
.off-text b{font-size:15px;color:#1f3a30}
.off-text small{font-size:13px;color:#6a776f}
.off-remove{flex:none;min-height:40px;padding:8px 12px;border-radius:10px;border:1px solid #ecd9d4;background:#fff7f5;color:#a1412f;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.off-empty{margin:0;padding:14px;border:1px dashed #dfe5dc;border-radius:14px;color:#6a776f;font-size:14px;text-align:center}
.off-form{margin-top:18px;padding:16px;border-radius:16px;background:#f7f9f5;border:1px solid #e8ece5}
.off-form .off-heading{margin-top:0}
.seg{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:4px;border-radius:12px;background:#eaefe6}
.seg button{min-height:40px;border:0;border-radius:9px;background:transparent;color:#3d5248;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.seg button[aria-checked=true]{background:#fff;color:#1f4a3a;box-shadow:0 1px 3px rgba(23,48,38,.12)}
.off-summary{margin:12px 0 0;font-size:14px;color:#2f4a3e;font-weight:600;min-height:1.4em}
@media(max-width:380px){.seg{grid-template-columns:repeat(2,1fr)}}

/* ---- Car rental (0012) ---- */
.vehicle-row{display:grid;grid-template-columns:84px 1fr;gap:14px;align-items:center;padding:16px 18px;border-bottom:1px solid #edf0eb}
.vehicle-row:last-child{border-bottom:0}
.vehicle-row.archived{opacity:.6}
.vehicle-row .row-actions{grid-column:1/-1;justify-content:flex-end;display:flex;gap:8px}
.vehicle-thumb{width:84px;height:63px;border-radius:12px;background:#eef4e8 center/cover no-repeat;display:grid;place-items:center;color:#5b7a69}
.vehicle-thumb svg{width:34px;height:34px}
.vehicle-info b{font-size:16px;color:#1f3a30}
.vehicle-info p{margin:4px 0 0;font-size:14px;color:#55655d}
.vehicle-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:5px}
.vehicle-meta small{font-size:12.5px;color:#6a776f}
.reg-plate{display:inline-block;padding:2px 8px;border-radius:5px;background:#f6d64a;color:#111;border:1px solid #d3b41f;font:700 13px/1.4 "Arial Narrow",Arial,sans-serif;letter-spacing:1px;white-space:nowrap}
.vehicle-modal{max-width:560px}
.reg-row{display:flex;gap:8px}
.reg-row .btn{flex:none;min-height:54px}
.reg-input{text-transform:uppercase;font:700 20px/1 "Arial Narrow",Arial,sans-serif!important;letter-spacing:2px;text-align:center;background:#f6d64a!important;border:2px solid #d3b41f!important;color:#111;border-radius:10px!important;min-height:54px}
.reg-input::placeholder{color:rgba(0,0,0,.35)}
.help.good{color:#2f6b55}.help.bad{color:#a1412f}
.vehicle-photos{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:4px 0 10px}
.vphoto{position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:#eef1ec}
.vphoto-img{position:absolute;inset:0;background:center/cover no-repeat}
.vphoto.busy{display:grid;place-items:center;font-size:12px;color:#5b7a69}
.vphoto-rm,.vphoto-first{position:absolute;top:4px;width:28px;height:28px;border-radius:50%;border:0;background:rgba(17,30,25,.7);color:#fff;font-size:16px;line-height:1;cursor:pointer}
.vphoto-rm{right:4px}.vphoto-first{left:4px;font-size:13px}
.vphoto-cover{position:absolute;left:4px;bottom:4px;padding:2px 7px;border-radius:99px;background:#1f4a3a;color:#fff;font-size:11px;font-weight:700}
.photo-add{cursor:pointer;justify-content:center}
.appt.hire .hire-when{display:flex;flex-direction:column;gap:4px}
.hire-kind{display:inline-block;padding:3px 8px;border-radius:99px;background:#e4f0dc;color:#1f4a3a;font-size:12px;font-weight:700;white-space:nowrap}
.hire-kind.is-return{background:#fdf0dc;color:#8a5a12}
#hireModal{max-width:520px}
@media(max-width:420px){.vehicle-photos{grid-template-columns:repeat(3,1fr)}}
/* setup step 2 for car rental: no "how long" */
#obStep2.is-rental .form-grid{grid-template-columns:1fr}

/* ---- Car rental hire screen (0013) ---- */
.hire-desk{max-width:560px}
.hd-summary{padding:12px 14px;border-radius:14px;background:#f5f8f2;font-size:14px;line-height:1.6}
.hd-stage{display:inline-block;margin-left:6px;padding:2px 9px;border-radius:99px;background:#e4f0dc;color:#1f4a3a;font-size:12px;font-weight:700}
.hd-stage.out{background:#fdf0dc;color:#8a5a12}.hd-stage.returned{background:#eef1ec;color:#55655d}
.hd-sec{padding:16px 0;border-bottom:1px solid #edf0eb}
.hd-sec:last-of-type{border-bottom:0}
.hd-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.hd-actions textarea{width:100%}
.hd-thumbs{display:flex;gap:8px;margin-top:10px}
.hd-thumb{position:relative;width:104px;height:72px;border-radius:10px;border:1px solid #e3e8e0;background:#eef1ec center/cover no-repeat;cursor:pointer;padding:0;font:inherit}
.hd-thumb small{position:absolute;left:4px;bottom:4px;padding:1px 6px;border-radius:99px;background:rgba(17,30,25,.7);color:#fff;font-size:10.5px;text-transform:capitalize}
.hd-thumb.pdf{display:grid;place-items:center;font-weight:700;color:#a1412f}
.hd-agreement{margin-top:10px}
.hd-agreement summary{cursor:pointer;font-weight:600;color:#275b49;min-height:40px;display:flex;align-items:center}
.hd-agreement div{max-height:240px;overflow:auto;padding:12px;border-radius:12px;background:#f6f8f4;font-size:13px;line-height:1.6}
.hd-go .btn.wide{margin-top:14px;min-height:52px}
.hd-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.hd-shot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;aspect-ratio:4/3;margin:0;border:1.5px dashed #c9d6c4;border-radius:12px;background:#fafcf8 center/cover no-repeat;cursor:pointer;text-align:center;padding:4px}
.hd-shot small{font-size:11px;line-height:1.2;color:#3d5148;font-weight:600}
.hd-shot.is-done{border-style:solid;border-color:#bcd6a3}
.hd-shot.is-done small{position:absolute;left:4px;bottom:4px;padding:1px 6px;border-radius:99px;background:rgba(17,30,25,.7);color:#fff;font-size:10px}
.hd-shot-icon{font-size:18px}
.hd-shot.is-done .hd-shot-icon{position:absolute;top:4px;right:4px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#2f6b55;color:#fff;font-size:12px}
.hd-count{margin:8px 0 4px}
.hd-extra{margin:4px 0 8px}.hd-extra summary{cursor:pointer;color:#275b49;font-weight:600;min-height:40px;display:flex;align-items:center}
.hd-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
.hd-photos .hd-thumb{width:100%;height:auto;aspect-ratio:4/3}
.hd-sub{margin:12px 0 0;font-size:13px;font-weight:650;color:#2b3f36}

/* ---- Pay in person (0016) ---- */
.tag.paid{border:0;cursor:pointer;background:#e4f0dc;color:#1f4a3a;font:inherit;font-size:12px;font-weight:700;padding:5px 10px;border-radius:99px}
.pay-chose{display:block;font-size:12px;color:#6a776f;text-align:right}
.btn.small.pay-mark{min-height:36px}
.pay-dialog{max-width:440px}
.pay-label{margin:16px 0 8px;font-size:13px;font-weight:650;color:#2b3f36}
.pay-methods{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pay-methods .btn{min-height:50px;margin:0}
.pay-set{display:grid;gap:4px;margin:6px 0 14px}
.pay-set .check-row{display:flex;align-items:center;gap:12px;min-height:44px;margin:0;font-weight:500;font-size:15px}
.pay-set .check-row input{width:20px;height:20px;min-height:0;accent-color:#2f6b55}
.pay-ask{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;margin:0 0 12px;border:1px solid #e3e9de;border-radius:14px;background:#fafcf8;font-weight:400}
.pay-ask b{display:block;font-size:15px;color:#17251f}.pay-ask small{display:block;font-size:12.5px;color:#6a776f;margin-top:2px}
.pay-ask input{flex:none;appearance:none;-webkit-appearance:none;width:48px;height:28px;min-height:0;border-radius:99px;background:#cfd8cb;position:relative;cursor:pointer;transition:background .2s;border:0;margin:0}
.pay-ask input::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s}
.pay-ask input:checked{background:#2f6b55}.pay-ask input:checked::after{transform:translateX(20px)}
.pay-ask input:focus-visible{outline:3px solid #9cc7b3;outline-offset:2px}

/* ---- Themes (0018) ---- */
.theme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 18px}
.theme-tile{display:flex;flex-direction:column;gap:7px;padding:8px;border:2px solid #e4e7e2;border-radius:16px;background:#fff;cursor:pointer;font:inherit;text-align:left;transition:border-color .15s,transform .15s}
.theme-tile.is-on{border-color:#17251f;box-shadow:0 0 0 1px #17251f inset}
.theme-tile:active{transform:scale(.97)}
.theme-mini{position:relative;display:block;height:78px;border-radius:10px;overflow:hidden}
.theme-mini-bar{position:absolute;left:0;right:0;top:0;height:14px}
.theme-mini-card{position:absolute;left:8px;right:8px;top:22px;height:30px;border-radius:6px;background:#fff;display:flex;flex-direction:column;gap:4px;padding:6px}
.theme-mini-card span{display:block;height:5px;border-radius:3px}
.theme-mini-btn{position:absolute;left:8px;right:8px;bottom:8px;height:12px;border-radius:6px}
.theme-name{font-weight:700;font-size:14px;color:#1b1f1d;padding:0 2px}
.theme-name small{font-weight:500;font-size:11px;color:#7a807c}
.theme-head{margin:4px 0 0;font-size:15px}
.theme-note{margin-top:-6px}
#obTheme .btn.wide{width:100%;margin-top:6px}