[hidden]{display:none!important}
/* real-app additions: no host skeleton, so the page owns the safe areas */
body::before{display:none}
.top{top:0;padding-top:calc(8px + env(safe-area-inset-top,0px))}
.side{padding-top:max(16px,env(safe-area-inset-top,0px))}
a.row{color:inherit;text-decoration:none}
body.bare .side,body.bare .top,body.bare .tabbar{display:none}
body.bare .app{grid-template-columns:minmax(0,1fr)}
body.bare .main{padding-top:calc(32px + env(safe-area-inset-top,0px));padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}

/* auth, onboarding and public page share a single narrow column */
.solo{max-width:540px;width:100%;margin:0 auto;display:grid;gap:24px}
.solo-h{display:grid;gap:8px;justify-items:start}
.solo-h h1{font-stretch:82%;font-size:44px;font-weight:790;letter-spacing:-.028em;line-height:1;margin-top:10px}
.solo-h p{color:var(--muted);font-size:17px;line-height:1.45;max-width:40ch}
.err{color:var(--bad);font-size:15px;font-weight:600}
.err:empty{display:none}
.obprog{display:flex;gap:5px}
.obprog i{flex:1;height:4px;border-radius:2px;background:var(--rule-2);transition:background-color 240ms var(--ease-out)}
.obprog i.on{background:var(--accent)}
.ob-b{display:grid;gap:16px}
.ob-b h1{font-stretch:84%;font-size:34px;font-weight:770;letter-spacing:-.024em;line-height:1.04}
.ob-b>p{color:var(--muted);font-size:16px;max-width:46ch}
.ob-f{display:flex;gap:8px;position:sticky;bottom:0;z-index:5;padding-top:16px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));background:linear-gradient(to bottom,transparent,var(--ground) 28%)}
.obsvc{display:grid;gap:8px;padding:12px 14px;position:relative}
.group>.obsvc+.obsvc::before{content:"";position:absolute;top:0;left:14px;right:0;height:.5px;background:var(--rule)}
.obsvc-r{display:flex;gap:8px;align-items:center}
.mini-in{display:flex;align-items:center;gap:6px;flex:1;min-width:0;font-size:15px;font-weight:600;color:var(--muted)}
.mini-in .in{flex:1;min-width:0;text-align:right}
.swatches{display:flex;flex-wrap:wrap;gap:12px;padding:2px}
.sw{width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1px rgb(0 0 0 / .12);transition:transform 120ms var(--ease-out)}
.sw:active{transform:scale(.9)}
.sw[aria-pressed="true"]{outline:2.5px solid var(--ink);outline-offset:3px}
.fcard{display:grid;gap:8px;padding:12px;border-radius:12px;background:var(--paper-2)}
.fcard .in{background:var(--paper)}
.fcard .inline .x-btn{align-self:center}
.checks{display:flex;flex-wrap:wrap;gap:6px 18px}
.group .row .in.sm{flex:1;min-width:0}
.pub-solo .pub-hero{padding-bottom:4px}
#net{display:none}
#net[data-state="error"]{display:block;position:fixed;z-index:80;left:50%;transform:translateX(-50%);top:calc(62px + env(safe-area-inset-top,0px));width:max-content;max-width:calc(100vw - 32px);padding:9px 14px;border-radius:12px;background:var(--bad);color:#fff;font-size:14px;font-weight:600;text-align:center;box-shadow:var(--lift)}
@media (min-width:900px){#net[data-state="error"]{top:16px}}

/* boot */
:root{--brand:#1F6B57;--brand-deep:#15493C;--on-brand:#EEF5F1;--on-brand-muted:rgb(238 245 241 / .74)}
.boot{min-height:70vh;display:grid;place-items:center}
.boot .mark{background:var(--brand);color:#fff;animation:breathe 1.6s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(.93);opacity:.75}}

/* auth: brand panel with tickets resting on the counter, form on paper */
body.is-auth .main{padding:0}
body.is-auth .wrap{max-width:none;display:block;padding:0}
.auth{min-height:100vh;min-height:100dvh;display:grid;grid-template-rows:auto 1fr;background:var(--paper)}
.auth-brand{position:relative;overflow:hidden;display:grid;gap:18px;background:var(--brand-deep);color:var(--on-brand);padding-top:calc(18px + env(safe-area-inset-top,0px));padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.wm{display:flex;align-items:center;gap:10px;font-family:var(--f-disp);font-stretch:112%;font-weight:800;font-size:19px;letter-spacing:-.005em}
.wm .mark{width:32px;height:32px;border-radius:9px;background:var(--on-brand);color:var(--brand-deep)}
.wm .mark svg{width:19px;height:19px}
.auth-copy h1{font-family:var(--f-disp);font-stretch:78%;font-weight:820;font-size:42px;line-height:.96;letter-spacing:-.032em;max-width:11ch;color:var(--on-brand)}
.auth-copy p{margin-top:12px;color:var(--on-brand-muted);font-size:16px;line-height:1.45;max-width:36ch}
.fan{position:relative;height:178px;margin:4px calc(-1 * max(20px,env(safe-area-inset-left,0px))) 0}
.fan::after{content:"";position:absolute;z-index:4;left:0;right:0;bottom:-1px;height:30px;background:var(--paper);border-radius:26px 26px 0 0}
.fan .tk{color:var(--ink);position:absolute;left:50%;top:14px;width:min(300px,78vw);transform:translateX(var(--x)) translateY(var(--y)) rotate(var(--r));pointer-events:none;filter:drop-shadow(0 2px 2px rgb(0 0 0 / .18)) drop-shadow(0 10px 22px rgb(0 0 0 / .22))}
.fan .tk:nth-child(1){--x:-88%;--y:26px;--r:-8deg;z-index:1}
.fan .tk:nth-child(2){--x:-50%;--y:0px;--r:-1.5deg;z-index:3}
.fan .tk:nth-child(3){--x:-12%;--y:30px;--r:7deg;z-index:2}
.auth.intro .fan .tk{animation:tkin 780ms var(--ease-out) both}
.auth.intro .fan .tk:nth-child(2){animation-delay:60ms}
.auth.intro .fan .tk:nth-child(1){animation-delay:150ms}
.auth.intro .fan .tk:nth-child(3){animation-delay:230ms}
@keyframes tkin{from{opacity:0;transform:translateX(var(--x)) translateY(calc(var(--y) + 80px)) rotate(0deg)}to{opacity:1;transform:translateX(var(--x)) translateY(var(--y)) rotate(var(--r))}}
.auth-main{position:relative;z-index:5;display:grid;align-content:start;justify-items:center;background:var(--paper);padding-top:4px;padding-bottom:calc(36px + env(safe-area-inset-bottom,0px));padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.auth-card{width:100%;max-width:400px;display:grid;gap:20px}
.auth-card .seg button{height:38px;font-size:15px}
.auth-card .seg button[aria-pressed="true"]{background:var(--paper)}
.auth-h h2{font-family:var(--f-disp);font-stretch:84%;font-weight:790;font-size:32px;letter-spacing:-.024em;line-height:1.04}
.auth-h p{color:var(--muted);margin-top:6px;font-size:15.5px}
.auth .form{gap:16px}
.auth .in{height:52px}
.pw{position:relative}
.pw .in{padding-right:54px}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:10px;display:grid;place-items:center;color:var(--muted);transition:background-color 120ms}
.pw-eye:active{background:var(--rule-2)}
.ferr{font-size:13.5px;font-weight:600;color:var(--bad)}
.ferr:empty{display:none}
.in[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--bad)}
.auth-alert{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;padding:12px 14px;border-radius:12px;background:color-mix(in oklab,var(--bad) 10%,var(--paper));color:var(--bad);font-size:15px;font-weight:600;line-height:1.4}
.auth-alert .ico{margin-top:1px}
.auth-alert span{flex:1;min-width:0}
.auth-alert .link{padding:0}
.auth-switch{text-align:center;color:var(--muted);font-size:15px}
.spin{width:18px;height:18px;border-radius:50%;border:2.2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
@media (min-width:900px){
  .auth{grid-template-rows:none;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);background:var(--ground)}
  .auth-brand{min-height:100vh;min-height:100dvh;align-content:start;grid-template-rows:auto auto 1fr;gap:0;padding:36px 56px 0}
  .auth-copy{margin-top:12vh}
  .auth-copy h1{font-size:clamp(56px,5.6vw,84px)}
  .auth-copy p{font-size:18px;margin-top:18px}
  .fan{height:auto;min-height:320px;margin:0 -56px;align-self:end}
  .fan::after{height:64px;border-radius:0;background:rgb(0 0 0 / .22);box-shadow:inset 0 1px 0 rgb(255 255 255 / .08)}
  .fan .tk{top:auto;bottom:34px;width:360px}
  .fan .tk:nth-child(1){--x:-96%;--y:-6px}
  .fan .tk:nth-child(3){--x:-4%;--y:-2px}
  .auth-main{background:var(--ground);align-content:center;padding:48px}
  .auth-card{background:var(--paper);padding:32px;border-radius:24px;box-shadow:var(--lift)}
}
@media (hover:hover) and (pointer:fine){.pw-eye:hover{background:var(--paper-2);color:var(--ink)}}
@media (prefers-reduced-motion:reduce){.auth.intro .fan .tk,.boot .mark{animation:none}}

/* setup wizard */
.ob-top{display:flex;align-items:center;gap:10px}
.ob-top-t{display:grid;line-height:1.25;min-width:0}
.ob-top-t b{font-family:var(--f-disp);font-stretch:90%;font-size:16px;font-weight:720;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ob-top-t small{color:var(--muted);font-size:13px}
.opt.has-pfx{justify-content:flex-start;gap:14px}
.opt.has-pfx>span:nth-child(2){flex:1;display:grid;min-width:0}
.opt.has-pfx::after{margin-left:auto}
.pfx{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;flex:none;font-family:var(--f-disp);font-stretch:118%;font-weight:800;font-size:14px;letter-spacing:.05em;color:#fff;background:var(--c)}
.pfx.new{background:var(--paper-2);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--rule)}

/* staff choice and pending requests on the calendar */
.staff-pick button{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;font-size:15px}
.staff-pick button .c{font-weight:500;font-size:13px;opacity:.75;font-variant-numeric:tabular-nums}
.ap.pend{background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--accent-line);background-image:repeating-linear-gradient(135deg,transparent 0 6px,var(--accent-soft) 6px 12px)}
.ap.pend .t{color:var(--accent-text)}
.callout .rm span{white-space:normal}

/* ---------- appointment switch and delivery dates ---------- */
.switch-row{display:flex;align-items:center;gap:14px;padding:12px 0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.switch-row .rm{flex:1;min-width:0}
.switch-row .rm span{white-space:normal}
.switch{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:51px;height:31px;border-radius:999px;margin:0;background:var(--rule-2);box-shadow:inset 0 0 0 1px var(--rule);cursor:pointer;transition:background-color 200ms var(--ease-out)}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18),0 3px 8px rgba(0,0,0,.1);transition:transform 260ms cubic-bezier(.3,1.4,.5,1)}
.switch:checked{background:var(--accent);box-shadow:none}
.switch:checked::after{transform:translateX(20px)}
.switch:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.switch,.switch::after{transition:none}}
.due-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:12px}
.due-pick{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.due-pick .optc{padding:8px 13px}
.due-pick input[type=date]{width:auto;min-width:150px}
.sec-h h2.down{color:var(--bad)}
.tk-age.bad{color:var(--bad)}