/* ===== Savvy Bee Cleaners ===== */
:root{
  --purple:#5D3FD3; --purple-dark:#4930A8; --purple-soft:#EFEAFC;
  --yellow:#FFCB4D; --yellow-dark:#E5A900;
  --ink:#211A3E; --muted:#6B6485; --line:#E4DFF5;
  --paper:#FFFFFF; --bg:#F7F5FE; --good:#1E9E6A; --bad:#D64545;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;color:var(--ink);background:var(--bg);
  font-family:'Sora',-apple-system,'Segoe UI',Roboto,sans-serif;
  padding-bottom:env(safe-area-inset-bottom)}
img{max-width:100%}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}

/* ---- Header / hero ---- */
.nav{display:flex;align-items:center;gap:14px;padding:14px 18px;max-width:1060px;margin:0 auto}
.nav img{width:46px;height:46px}
.nav .brand{font-weight:800;font-size:18px;letter-spacing:-.01em}
.nav .brand b{color:var(--purple)}
.nav nav{margin-left:auto;display:flex;gap:18px}
.nav a{color:var(--ink);text-decoration:none;font-weight:600;font-size:14.5px}
.nav a:hover{color:var(--purple)}
.hero{max-width:1060px;margin:0 auto;padding:26px 18px 8px;display:grid;
  grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}
.hero h1{margin:0;font-size:clamp(30px,5vw,50px);font-weight:800;letter-spacing:-.03em;line-height:1.05}
.hero h1 em{font-style:normal;color:var(--purple);
  background:linear-gradient(transparent 62%,var(--yellow) 62%, var(--yellow) 92%, transparent 92%)}
.hero p{color:var(--muted);font-size:17px;line-height:1.55;margin:14px 0 22px}
.hero .badge{width:min(320px,70vw);margin:0 auto;display:block;
  filter:drop-shadow(0 16px 30px rgba(93,63,211,.22))}
/* The hero is a two-column grid with THREE children: the text block, the
   insurance line, and the bee. Left to auto-placement the bee has no cell on
   row one, so it wrapped onto row two and centred itself underneath the text —
   which is how the desktop hero looked from v126 (when the insurance line was
   added) until v140. Mobile was never affected: that breakpoint collapses to a
   single column, where auto-placement is correct.
   These rules are deliberately scoped to the desktop side of the 800px
   breakpoint. Setting grid-column:2 inside a 1fr grid would invent an implicit
   second column and break the phone layout instead. */
@media(min-width:801px){
  .hero > div{grid-column:1;grid-row:1}
  .hero .badge{grid-column:2;grid-row:1}
  .hero .insured-line{grid-column:2;grid-row:2;margin:12px 0 0;text-align:center}
}
.cta{display:inline-block;background:var(--purple);color:#fff;text-decoration:none;font-weight:700;
  padding:14px 26px;border-radius:999px;font-size:16px;box-shadow:0 8px 20px rgba(93,63,211,.35);
  transition:background .15s, transform .15s}
.cta:hover{background:var(--purple-dark);transform:translateY(-1px)}
.cta.alt{background:var(--yellow);color:var(--ink);box-shadow:0 8px 20px rgba(229,169,0,.3);margin-left:10px}
.cta.alt:hover{background:var(--yellow-dark)}
.stripe{height:14px;background:repeating-linear-gradient(-45deg,var(--yellow) 0 26px,var(--ink) 26px 52px);
  opacity:.9;margin:34px 0}

/* ---- Sections ---- */
.section{max-width:1060px;margin:0 auto;padding:34px 18px}
.section>h2{font-size:clamp(24px,3.4vw,34px);font-weight:800;letter-spacing:-.02em;margin:0 0 6px}
.section>.sub{color:var(--muted);margin:0 0 22px;font-size:16px}
.pill{display:inline-block;background:var(--purple-soft);color:var(--purple);font-weight:700;
  font-size:12px;letter-spacing:.14em;padding:6px 14px;border-radius:999px;margin-bottom:12px}

/* ---- Cards / quote UI ---- */
.grid2{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}
@media(max-width:800px){.grid2{grid-template-columns:1fr}.receipt-wrap{position:static}.hero{grid-template-columns:1fr;text-align:center}.hero .badge{order:-1}}
.controls{display:flex;flex-direction:column;gap:16px}
.card{background:var(--paper);border-radius:16px;padding:20px 20px 14px;
  box-shadow:0 1px 2px rgba(33,26,62,.06),0 10px 26px rgba(33,26,62,.06)}
.card h3{margin:0 0 14px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.slider-row{margin-bottom:18px}
.slider-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px}
.slider-label{font-weight:600;font-size:15px}
.slider-value{font-weight:700;font-size:20px;color:var(--purple-dark);white-space:nowrap;display:flex;align-items:baseline;gap:4px}
.slider-value small{font-size:12px;font-weight:500;color:var(--muted)}
.slider-value input[type=number]{font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:700;
  font-size:20px;color:var(--purple-dark);width:76px;text-align:right;background:var(--purple-soft);
  border:1.5px solid var(--line);border-radius:8px;padding:4px 8px}
.slider-value input[type=number]:focus{outline:3px solid var(--purple);outline-offset:1px}
input[type=range]{width:100%;accent-color:var(--purple);cursor:pointer;height:30px;margin:0}
.ticks{display:flex;justify-content:space-between;font-size:11px;color:#A79FCB;margin-top:-2px}
.note{display:flex;align-items:center;gap:10px;background:#FFF6DC;border:1px solid #F1DA9A;color:#7A5C08;
  border-radius:10px;padding:10px 12px;font-size:13.5px;margin-bottom:16px;line-height:1.35}
.note .i{flex-shrink:0;width:20px;height:20px;border-radius:50%;background:var(--yellow);color:#5C420A;
  font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
.chips{display:flex;flex-direction:column;gap:8px;padding-bottom:6px}
.chip{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:#F6F4FD;
  border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;font-size:14.5px;font-weight:600;
  color:var(--ink);cursor:pointer;transition:background .15s,border-color .15s;font-family:inherit}
.chip:hover{border-color:var(--purple)}
.chip[aria-pressed=true]{background:var(--purple-soft);border-color:var(--purple)}
.chip .check{width:20px;height:20px;border-radius:6px;background:#fff;border:1px solid #CFC7EE;
  display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--purple-dark);flex-shrink:0}

/* ---- Receipt ---- */
.receipt-wrap{position:sticky;top:16px}
.receipt{background:var(--paper);border-radius:6px 6px 0 0;padding:22px 20px 26px;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  box-shadow:0 2px 4px rgba(33,26,62,.08),0 14px 34px rgba(33,26,62,.1);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),97.5% 100%,95% calc(100% - 8px),92.5% 100%,90% calc(100% - 8px),87.5% 100%,85% calc(100% - 8px),82.5% 100%,80% calc(100% - 8px),77.5% 100%,75% calc(100% - 8px),72.5% 100%,70% calc(100% - 8px),67.5% 100%,65% calc(100% - 8px),62.5% 100%,60% calc(100% - 8px),57.5% 100%,55% calc(100% - 8px),52.5% 100%,50% calc(100% - 8px),47.5% 100%,45% calc(100% - 8px),42.5% 100%,40% calc(100% - 8px),37.5% 100%,35% calc(100% - 8px),32.5% 100%,30% calc(100% - 8px),27.5% 100%,25% calc(100% - 8px),22.5% 100%,20% calc(100% - 8px),17.5% 100%,15% calc(100% - 8px),12.5% 100%,10% calc(100% - 8px),7.5% 100%,5% calc(100% - 8px),2.5% 100%,0 calc(100% - 8px))}
.r-brand{text-align:center;font-weight:700;letter-spacing:.24em;font-size:13px;margin-bottom:12px}
.rule{border-top:1.5px dashed #CFC7EE;margin:10px 0}
.r-empty{font-size:12.5px;color:var(--muted);text-align:center;padding:18px 6px;line-height:1.5}
.r-line{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:6px 0}
.l-name{font-size:12.5px;font-weight:600}
.l-detail{font-size:11px;color:var(--muted);margin-top:1px}
.l-amt{font-size:13px;font-weight:700;white-space:nowrap}
.total{display:flex;justify-content:space-between;align-items:center;padding:6px 0 2px}
.t-label{font-size:13px;font-weight:700;letter-spacing:.12em}
.t-amt{font-size:24px;font-weight:800;color:var(--purple-dark)}
/* A range is roughly twice as wide as a single figure, so the big total needs
   to come down or it overflows the receipt on a phone. */
.t-amt.is-range{font-size:17px;letter-spacing:-.2px}
/* The first-clean fee before the history question is answered: shown as part
   of the receipt, but visibly not yet settled. */
.r-line.pending{opacity:.75}
.r-line.pending .l-amt{color:var(--purple-dark);font-weight:700}
.r-line.pending .l-detail{color:#C2410C;font-weight:600}
.dur{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted);padding:2px 0 0}
.dur b{color:var(--ink);font-size:13px}
.btn{width:100%;margin-top:14px;background:var(--purple);color:#fff;border:none;border-radius:10px;
  padding:13px 0;font-size:14.5px;font-weight:700;cursor:pointer;font-family:'Sora',sans-serif;transition:background .15s}
.btn:hover:not(:disabled){background:var(--purple-dark)}
.btn:disabled{opacity:.45;cursor:default}
.btn.yellow{background:var(--yellow);color:var(--ink)}
.btn.yellow:hover:not(:disabled){background:var(--yellow-dark)}
.btn.ghost{background:transparent;color:var(--purple);border:1.5px solid var(--purple)}
.r-foot{margin-top:12px;font-size:10.5px;color:#A79FCB;text-align:center}

/* ---- Booking ---- */
.book-grid{display:grid;grid-template-columns:340px 1fr;gap:20px;align-items:start}
@media(max-width:800px){.book-grid{grid-template-columns:1fr}}
.cal{background:var(--paper);border-radius:16px;padding:16px;box-shadow:0 1px 2px rgba(33,26,62,.06),0 10px 26px rgba(33,26,62,.06)}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cal-head b{font-size:15px}
.cal-nav{background:var(--purple-soft);border:none;color:var(--purple-dark);width:34px;height:34px;border-radius:9px;
  font-size:17px;font-weight:700;cursor:pointer}
.cal-nav:disabled{opacity:.35;cursor:default}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-grid .dow{font-size:10.5px;font-weight:700;color:var(--muted);text-align:center;padding:4px 0;letter-spacing:.06em}
.day{aspect-ratio:1;border:none;border-radius:9px;background:transparent;font-family:inherit;font-size:13.5px;
  font-weight:600;color:var(--ink);cursor:pointer}
.day:hover:not(:disabled){background:var(--purple-soft)}
.day:disabled{color:#C9C3E4;cursor:default}
.day.sel{background:var(--purple);color:#fff}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:8px;margin-top:6px}
.slot{border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:10px 4px;font-family:'IBM Plex Mono',monospace;
  font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s}
.slot:hover:not(:disabled){border-color:var(--purple);background:var(--purple-soft)}
.slot.sel{background:var(--purple);border-color:var(--purple);color:#fff}
.slot:disabled{background:#F1EFF9;color:#B7B0D6;cursor:default;text-decoration:line-through}
.field{margin-bottom:12px}
.field label{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:5px;letter-spacing:.04em}
.field input,.field textarea,.field select{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:11px 12px;
  font-family:inherit;font-size:14.5px;color:var(--ink);background:#fff}
.field input:focus,.field textarea:focus,.field select:focus{outline:3px solid var(--purple);outline-offset:1px;border-color:var(--purple)}
.msg{border-radius:10px;padding:12px 14px;font-size:14px;margin:10px 0;line-height:1.45}
.msg.ok{background:#E4F6EE;color:#116644;border:1px solid #BCE6D2}
.msg.err{background:#FBE9E9;color:#8C2626;border:1px solid #F0C6C6}
.msg.info{background:var(--purple-soft);color:var(--purple-dark);border:1px solid #D9D0F6}
.hidden{display:none!important}

/* ---- Services strip ---- */
.svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.svc .card{padding:20px}
.svc h4{margin:8px 0 6px;font-size:16px}
.svc p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.5}
.svc .ico{width:40px;height:40px;border-radius:12px;background:var(--purple-soft);display:flex;
  align-items:center;justify-content:center;font-size:20px}

/* ---- Footer ---- */
footer{background:var(--ink);color:#CFC9E8;margin-top:50px;padding:30px 18px 40px}
footer .inner{max-width:1060px;margin:0 auto;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
footer img{width:52px;height:52px;background:#fff;border-radius:50%}
footer b{color:#fff}
footer .adm{margin-left:auto;color:#8F86BC;font-size:12.5px;text-decoration:none}
footer .adm:hover{color:#fff}

/* ---- Admin ---- */
.admin-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;max-width:1160px;margin:0 auto;padding:14px 18px}
.admin-bar .grow{flex:1}
.seg{display:flex;background:var(--purple-soft);border-radius:10px;padding:3px}
.seg button{border:none;background:transparent;padding:8px 16px;border-radius:8px;font-family:inherit;
  font-weight:700;font-size:13.5px;color:var(--purple-dark);cursor:pointer}
.seg button.on{background:var(--purple);color:#fff}
.admin-wrap{max-width:1160px;margin:0 auto;padding:0 18px 40px}
.mcal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.mcal .dow{font-size:11px;font-weight:700;color:var(--muted);text-align:center;padding:4px 0}
.mcell{background:#fff;border-radius:10px;min-height:96px;padding:6px;border:1.5px solid var(--line)}
.mcell.dim{opacity:.45}
.mcell .dnum{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:4px}
.mcell.today{border-color:var(--yellow-dark);box-shadow:0 0 0 2px var(--yellow)}
.evt{display:block;width:100%;text-align:left;background:var(--purple);color:#fff;border:none;border-radius:6px;
  padding:4px 6px;font-size:11px;font-weight:600;margin-bottom:3px;cursor:pointer;font-family:'IBM Plex Mono',monospace;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* No overflow here. An overflow value on ANY ancestor between a sticky
   element and its scroll container silently disables the sticky — that is
   what unpinned the time column and clipped the hour lines. Rounded corners
   are handled by the scroller instead. */
.tgrid{position:relative;background:#fff;border:1.5px solid var(--line)}
.tgrid .hrow{display:grid;grid-template-columns:64px 1fr;border-top:1px solid #F0EDFB;height:56px}
.tgrid .hlabel{font-size:11px;color:var(--muted);padding:4px 8px;font-family:'IBM Plex Mono',monospace}
.wk-head{display:grid;grid-template-columns:64px repeat(7,1fr);font-size:12px;font-weight:700;text-align:center;padding:8px 0;background:var(--purple-soft);border-radius:14px 14px 0 0}
.wk-body{position:relative;display:grid;grid-template-columns:64px repeat(7,1fr)}
.wk-col{position:relative;border-left:1px solid #F0EDFB}
.blk{position:absolute;left:3px;right:3px;background:var(--purple);color:#fff;border-radius:7px;border:none;
  padding:3px 6px;font-size:10.5px;font-weight:600;cursor:pointer;text-align:left;overflow:hidden;font-family:'IBM Plex Mono',monospace}
.blk small{display:block;font-weight:400;opacity:.85}
.modal-bg{position:fixed;inset:0;background:rgba(33,26,62,.5);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}
.modal{background:#fff;border-radius:16px;max-width:520px;width:100%;max-height:86vh;overflow:auto;padding:22px}
.modal h3{margin:0 0 4px;font-size:19px}
.modal .when{color:var(--purple-dark);font-weight:700;font-family:'IBM Plex Mono',monospace;font-size:14px;margin-bottom:12px}
.kv{display:grid;grid-template-columns:110px 1fr;gap:4px 10px;font-size:14px;margin-bottom:12px}
.kv b{color:var(--muted);font-size:12px;letter-spacing:.04em;text-transform:uppercase;font-weight:700}
.split2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 14px}
.split2 .col{background:var(--purple-soft);border-radius:10px;padding:10px}
.split2 h5{margin:0 0 6px;font-size:12px;color:var(--purple-dark)}
.split2 ul{margin:0;padding-left:16px;font-size:12px;line-height:1.5}
.login-card{max-width:400px;margin:60px auto;background:#fff;border-radius:18px;padding:28px;
  box-shadow:0 14px 40px rgba(33,26,62,.12)}
.login-card img{width:88px;display:block;margin:0 auto 10px}
.login-card h2{text-align:center;margin:0 0 18px}
@media(prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}
.chip:focus-visible,.btn:focus-visible,.slot:focus-visible,.day:focus-visible,input:focus-visible{outline:3px solid var(--purple);outline-offset:2px}

/* ---- Bee animation overlays (screen wipe + thank you) ---- */
.bee-overlay{position:fixed;inset:0;z-index:9999;background:#F3F2EB;
  display:none;align-items:flex-end;justify-content:center;overflow:hidden;
  opacity:0;transition:opacity .18s ease;cursor:pointer}
.bee-overlay.on{display:flex}
.bee-overlay.vis{opacity:1}
.bee-overlay video{width:100%;height:100%;display:block;
  object-fit:contain;object-position:center bottom}
.bee-close{position:absolute;top:calc(14px + env(safe-area-inset-top));right:14px;
  width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.92);color:var(--ink);font-size:16px;line-height:1;
  box-shadow:0 4px 14px rgba(33,26,62,.18)}
.bee-close:hover{background:#fff;color:var(--purple)}
.bee-hint{position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(20px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);color:var(--purple);
  font-weight:700;font-size:14.5px;padding:9px 16px;border-radius:999px;
  box-shadow:0 4px 14px rgba(33,26,62,.16);
  opacity:0;transition:opacity .45s ease;pointer-events:none;white-space:nowrap;max-width:92vw}
.bee-hint.show{opacity:1}
@media (prefers-reduced-motion: reduce){ .bee-overlay{transition:none} }

/* ---- "Build your quote first" nudge ---- */
@keyframes bee-flash{0%{box-shadow:0 0 0 0 rgba(93,63,211,.45)}100%{box-shadow:0 0 0 14px rgba(93,63,211,0)}}
#need-quote.flash{animation:bee-flash .9s ease-out 2}

/* ---- A required field that is currently blocking the quote ---- */
.needs-input{border-color:#C2410C !important;box-shadow:0 0 0 3px rgba(194,65,12,.13)}

/* ---- Phone header: stop the menu running off the screen ---- */
@media (max-width:640px){
  .nav{flex-wrap:wrap;justify-content:center;gap:10px;padding:12px 14px 0}
  .nav img{width:38px;height:38px}
  .nav .brand{font-size:16px;letter-spacing:-.02em}
  .nav nav{margin-left:0;width:100%;justify-content:center;flex-wrap:wrap;
    gap:8px;padding:10px 0 12px;border-top:1.5px solid var(--line)}
  .nav nav a{font-size:14px;padding:7px 12px;border-radius:999px;
    background:#fff;border:1.5px solid var(--line);white-space:nowrap}
  .nav nav a:active{background:var(--purple);color:#fff;border-color:var(--purple)}
  .hero{padding-top:16px}
  .cta,.cta.alt{display:block;width:100%;max-width:320px;margin:0 auto;text-align:center}
  .cta.alt{margin-top:10px}
}
@media (max-width:380px){
  .nav .brand{font-size:15px}
  .nav nav a{font-size:13px;padding:6px 10px}
}

/* ---- Sliders: stop them grabbing the page scroll on phones ----
   A native range input treats any touch that lands on it as its own, so a
   finger that happens to brush one while scrolling drags the value instead
   of scrolling the page. touch-action:pan-y hands vertical gestures back to
   the browser, leaving the slider only the horizontal ones it actually wants. */
input[type=range]{touch-action:pan-y}

@media (pointer:coarse){
  /* Breathing room so a scrolling thumb lands between sliders, not on one */
  .slider-row{margin-bottom:30px}
  .slider-row + .slider-row{margin-top:26px}
  /* Bigger, easier-to-grab handle for deliberate drags */
  input[type=range]{height:40px}
  input[type=range]::-webkit-slider-thumb{width:30px;height:30px}
  input[type=range]::-moz-range-thumb{width:30px;height:30px}
}

/* ---- A time slot only one cleaner is free for ---- */
.slot.solo{border-style:dashed}
.slot small{display:block;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:700;color:var(--muted);margin-top:1px}
.slot.sel small{color:rgba(255,255,255,.85)}

/* ---- Two-day clean: choosing what happens on which visit ---- */
.split-grid{border:1.5px solid var(--line);border-radius:14px;overflow:hidden}
.split-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;border-bottom:1px solid var(--line)}
.split-row:last-child{border-bottom:0}
.split-name{font-weight:600;font-size:14px}
.split-name small{color:var(--muted);font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:11.5px}
.split-days{display:flex;gap:4px;flex-shrink:0}
.split-days button{border:1.5px solid var(--line);background:#fff;border-radius:999px;
  padding:6px 12px;font-family:inherit;font-weight:700;font-size:12.5px;color:var(--muted);cursor:pointer}
.split-days button.on{background:var(--purple);border-color:var(--purple);color:#fff}

/* ---- Service area line + call buttons ---- */
.hero .area{font-weight:700;color:var(--purple);font-size:15px;letter-spacing:.01em;margin:0 0 10px}
.nav a.call{background:var(--yellow);color:var(--ink);padding:8px 14px;border-radius:999px;font-weight:800}
.nav a.call:hover{background:#F5B800;color:var(--ink)}
.cta.call-cta{background:#fff;color:var(--purple);border:2px solid var(--purple);box-shadow:none}
.cta.call-cta:hover{background:var(--purple);color:#fff}
@media (max-width:640px){
  .cta.call-cta{margin-top:10px}
}

/* ---- The one question that gates the quote ---- */
.card.ask-first{border:2px solid var(--purple);box-shadow:0 6px 22px rgba(93,63,211,.13)}
.r-ask{text-align:center;padding:6px 2px}
.r-ask-q{font-size:14px;color:var(--ink);line-height:1.5;margin-bottom:12px}
.r-ask-btns{display:flex;gap:8px}
.r-ask-btns button{flex:1;border:2px solid var(--purple);background:#fff;color:var(--purple);
  border-radius:14px;padding:12px;font-family:inherit;font-weight:800;font-size:15px;cursor:pointer}
.r-ask-btns button:hover{background:var(--purple);color:#fff}

/* ---- A job this person is working ---- */
.blk.mine{background:var(--purple)!important;border-color:var(--purple)!important;color:#fff!important}
.blk.mine small{color:rgba(255,255,255,.85)!important}

/* ---- Going back: the same bee, mirrored, running the other way ---- */
#bee-back-vid{display:none;transform:scaleX(-1)}
#bee-back-vid.showing{display:block}
#bee-wipe-vid.hidden-vid{display:none}

/* ---- My hours: a calendar of when this person works ---- */
.hv-tabs{display:flex;gap:6px;margin-bottom:10px}
.hv-tabs button{flex:1;border:1.5px solid var(--line);background:#fff;color:var(--muted);
  border-radius:12px;padding:9px;font-family:inherit;font-weight:700;font-size:13px;cursor:pointer}
.hv-tabs button.on{background:var(--purple);border-color:var(--purple);color:#fff}
.hv-nav{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.hv-nav b{flex:1;text-align:center;font-size:14.5px}

.hv-week{border:1.5px solid var(--line);border-radius:14px;overflow:hidden}
.hv-row{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;background:#fff;
  border:0;border-bottom:1px solid var(--line);font-family:inherit;cursor:pointer;text-align:left}
.hv-row:last-child{border-bottom:0}
.hv-row.sel{background:#F2EEFF}
.hv-rowday{width:66px;flex-shrink:0;font-weight:700;font-size:13px;color:var(--ink)}
.hv-bar{position:relative;flex:1;height:16px;border-radius:8px;background:#E7E5EE;overflow:hidden}
.hv-bar i{position:absolute;top:0;bottom:0;background:#22A06B;border-radius:8px}
.hv-bar.hv-part i{background:#E8963A}
.hv-bar.hv-none i{background:transparent}
.hv-scale{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);
  padding:5px 12px 0;margin-left:66px}

.hv-month{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.hv-dow{text-align:center;font-size:11px;font-weight:700;color:var(--muted);padding-bottom:2px}
.hv-cell{aspect-ratio:1;border:1.5px solid var(--line);background:#fff;border-radius:10px;
  font-family:inherit;font-weight:700;font-size:13px;cursor:pointer;color:var(--ink);padding:0}
.hv-cell.hv-full{background:#E7F6EF;border-color:#B7E4CE}
.hv-cell.hv-part{background:#FDF1E3;border-color:#F3D2A8}
.hv-cell.hv-none{background:#F1F0F4;color:var(--muted)}
.hv-cell.sel{outline:2.5px solid var(--purple);outline-offset:-2px}

.hv-day .hv-line{display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:9px 12px;border-radius:12px;margin-bottom:6px;font-size:13.5px}
.hv-line small{display:block;font-weight:600;color:var(--muted);font-size:12px;margin-top:1px}
.hv-line.ok{background:#E7F6EF}
.hv-line.no{background:#F1F0F4;color:var(--muted)}
.hv-line.set{background:#F2EEFF}
.hv-line.cut{background:#FDF1E3}

/* ---- When the crew is off, drawn behind the appointments ---- */
.cov{position:absolute;left:0;right:0;pointer-events:none;display:flex;align-items:center;
  justify-content:center;font-size:10.5px;font-weight:700;letter-spacing:.03em;z-index:0}
.cov span{opacity:.75;padding:0 6px;text-align:center}
.cov-off{background:repeating-linear-gradient(45deg,#EDEBF2,#EDEBF2 7px,#E4E1EC 7px,#E4E1EC 14px);color:#6B6480}
.cov-thin{background:repeating-linear-gradient(45deg,#FDF3E6,#FDF3E6 7px,#F8E8D2 7px,#F8E8D2 14px);color:#9A6520}
.wk-col .blk{z-index:1}

/* ---- "You're on this job" — a cleaner must not have to look for it ---- */
/* The whole point is that it cannot be missed at a glance. */
.blk .yours{display:flex;align-items:center;justify-content:center;gap:5px;
  font-size:9.5px;font-weight:800;letter-spacing:.09em;
  background:#FFCB4D;color:#211A3E;border-radius:7px;padding:3px 6px;margin:0 0 4px;
  width:100%;box-shadow:0 1px 0 rgba(0,0,0,.12)}
.blk .yours i{font-style:normal;font-size:15px;line-height:1;color:#211A3E}
.blk.mine{box-shadow:0 0 0 2.5px #FFCB4D inset}
.mine-count{background:var(--purple);color:#fff;font-weight:800;font-size:12px;
  border-radius:999px;padding:6px 12px;white-space:nowrap}
.yours-banner{border:2px solid var(--purple);background:#F2EEFF;border-radius:14px;
  padding:12px 14px;margin-bottom:12px}
.yours-title{font-weight:800;font-size:15.5px;color:var(--purple)}
.yours-when{font-weight:700;font-size:14px;margin-top:3px}
.yours-where{font-size:13.5px;color:var(--muted);margin-top:2px}
.yours-map{display:inline-block;margin-top:8px;font-weight:700;font-size:13.5px;
  color:var(--purple);text-decoration:none}

/* ---- Who is who: staff vs client ---- */
.tagline{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.08em;
  border-radius:5px;padding:1px 6px;vertical-align:middle;margin-left:4px;
  background:#EFEDF6;color:#5F5787}
.tagline.owner{background:var(--purple);color:#fff}
.tagline.staff{background:#FFCB4D;color:#211A3E}

/* ---- Expenses as cards: a long vendor name must not break the layout ---- */
.ex-total{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:10px 2px 12px;border-bottom:1.5px solid var(--line);margin-bottom:10px;
  font-size:13.5px;color:var(--muted)}
.ex-total b{font-family:'IBM Plex Mono',monospace;font-size:19px;color:var(--ink)}
.ex-card{border:1.5px solid var(--line);border-radius:14px;padding:11px 13px;margin-bottom:9px;background:#fff}
.ex-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.ex-cat{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--purple);background:#F2EEFF;border-radius:5px;padding:2px 7px;white-space:nowrap}
.ex-amt{font-family:'IBM Plex Mono',monospace;font-size:17px;white-space:nowrap}
/* The part that used to break the page: long names and URLs wrap and clip. */
.ex-vendor{font-weight:700;font-size:14.5px;margin-top:7px;line-height:1.35;
  overflow-wrap:anywhere;word-break:break-word}
.ex-note{font-size:13px;color:var(--muted);margin-top:3px;overflow-wrap:anywhere}
.ex-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:9px}
.ex-date{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted)}
.ex-btns{display:flex;gap:6px;flex-shrink:0}
.ex-btns .cal-nav{width:auto;padding:0 10px;font-size:12px;height:30px}
.ex-btns .ex-del{color:var(--bad)}

/* Any remaining table scrolls sideways rather than stretching the page. */
table.rec{table-layout:auto}
table.rec td, table.rec th{overflow-wrap:anywhere}
.rec-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---- Coverage: who is actually working ---- */
.cov-who{margin-top:6px;text-align:left;font-weight:600}
.cov-who .who-on{display:flex;flex-direction:column;line-height:1.25;margin-bottom:3px;
  background:#E7F6EF;border-radius:6px;padding:3px 5px}
.cov-who .who-on b{font-size:11px;color:#166B4A}
.cov-who .who-on span{font-size:9.5px;color:#3E7A61;font-family:'IBM Plex Mono',monospace}
.cov-who .who-none{font-size:10px;font-weight:700;color:#6B6480;background:#EDEBF2;
  border-radius:6px;padding:3px 5px;text-align:center}
.cov-who .who-off{font-size:9.5px;color:var(--muted);margin-top:2px;line-height:1.3}
.cov-day-who{padding:8px 0 4px}
.cov-day-who .cov-who{max-width:340px}

/* One descriptive h1 per page; it should read like the h2 it replaced. */
.section h1{font-size:clamp(28px,4.4vw,42px);letter-spacing:-.02em;line-height:1.12;margin:6px 0 8px}

/* ---- Last-resort guards against a sideways-scrolling page ---- */
html, body{overflow-x:hidden}
/* Long unbroken strings — a pasted URL, an email address — wrap instead of
   forcing the page wider than the screen. */
body{overflow-wrap:break-word}
.l-name, .l-detail, .prop-addr, .ex-vendor, td, th{overflow-wrap:anywhere}
/* Anything absolutely sized stays inside the viewport. */
img, video, canvas, iframe{max-width:100%;height:auto}

/* ================= The schedule, and how it behaves on a phone =========
   Seven day columns plus a time gutter will not fit a phone. Rather than
   shrink them until the text collides, the whole calendar — day header AND
   grid together — scrolls sideways inside one box, so a day always sits
   above its own column. */
.cal-scroll{overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;
  border-radius:14px}
/* width:max-content is load-bearing. With only min-width:100% this box is as
   wide as the SCREEN, while the grid inside it is as wide as seven days. The
   day names still painted (children overflow visibly) but every background and
   border stopped at the screen edge — the white card and the lavender header
   bar both cut off mid-Wednesday, and .tgrid's right border drew a stray
   vertical line down the middle of the grid. Sizing to content fixes all three.
   min-width:100% is kept so a narrow week still fills a wide screen. */
.cal-inner{width:max-content;min-width:100%}

/* Column widths live here, not inline, so the media queries below can change
   them. --n is the number of days; --gut the time column; --cmin the least a
   day may be squeezed to. */
.wk-head, .wk-body{
  grid-template-columns: var(--gut,64px) repeat(var(--n,7), minmax(var(--cmin,0px), 1fr));
}
/* Keep the clock visible while the days slide past it. */
.wk-body{position:relative}
/* Hour lines span the whole grid, behind everything, and do not scroll away
   with the time column — they used to be drawn inside it. */
.wk-lines{position:absolute;inset:0;pointer-events:none;z-index:0}
.wk-lines .hline{position:absolute;left:0;right:0;border-top:1px solid #F0EDFB}
/* The clock stays put while the days slide past. */
.wk-gutter, .wk-gutter-head{position:sticky;left:0;z-index:4;background:#fff;
  border-right:1px solid #F0EDFB}
.wk-gutter .hlabel{position:absolute;left:0;padding:4px 8px}
.wk-gutter-head{background:var(--purple-soft)}

@media (max-width:760px){
  .admin-wrap{padding:0 10px 40px}
  .cal-inner{--gut:52px;--cmin:96px}
  .cov span{display:none}          /* labels collided at this width */
  .cov-who{font-size:10px}
  .cov-who .who-on b{font-size:10px}
  .cov-who .who-on span{font-size:9px;white-space:nowrap}
  .cov-who .who-off{font-size:9px}
  .blk{font-size:10px;padding:3px 4px}
  .blk small{font-size:9px}
  .admin-bar{gap:6px}
  .admin-bar .btn.ghost{font-size:12.5px;padding:8px 11px!important}
}

@media (max-width:400px){
  .cal-inner{--gut:44px;--cmin:88px}
}

/* Month and Day views are single-column and already fit; leave them alone. */
.cal-inner:has(.wk-body > .wk-col:only-of-type){--cmin:0px}

/* Two-up field grid for the owner's new-booking form. Collapses to one column
   on a phone so the number inputs stay tappable. */
.nb-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media (max-width:480px){ .nb-grid{grid-template-columns:1fr} }

/* Checkbox groups in the owner's new-booking form (rooms, extra services).
   Two columns on desktop, one on a phone so the labels stay tappable. */
.nb-checks{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
.nb-checks label{display:flex;gap:7px;align-items:center;font-size:13.5px;line-height:1.3}
.nb-checks input{flex:none}
@media (max-width:480px){ .nb-checks{grid-template-columns:1fr} }

/* Insurance line under the hero buttons. Real coverage, stated plainly —
   deliberately says "insured" and not "bonded", because the policy is general
   liability only and there is no janitorial bond behind that word. */
.insured-line{margin:14px 0 0;font-size:14px;font-weight:700;color:var(--brand);
  display:flex;align-items:center;gap:7px;justify-content:center}
@media (max-width:600px){ .insured-line{font-size:13px} }

/* Subtotal and sales tax lines above the receipt total. Texas taxes cleaning
   as a real property service, so the quote has to show it separately rather
   than folding it into one number. */
.receipt .subline{display:flex;justify-content:space-between;gap:10px;
  font-size:13.5px;color:var(--muted);padding:3px 0}