/* Kai — mobile-first PWA styles · Route 2 "Bold & Vibrant" (Indigo) */
:root{
  /* brand */
  --brand:#4F46E5;        /* indigo primary */
  --brand-strong:#4338CA; /* pressed / gradient end */
  --brand-deep:#312E81;   /* darkest indigo (splash/tour) */
  --brand-soft:#7C3AED;   /* violet accent for gradients */
  --brand-light:#EEF2FF;  /* indigo tint backgrounds */
  --brand-border:#C7D2FE;
  --accent:#F97316;       /* amber / orange */
  --accent-bg:#FFF3E8;
  --good:#10B981;         /* emerald */
  --good-bg:#E7F8F1;
  --red:#DC2626; --red-bg:#FEE2E2;
  /* neutrals */
  --ink:#0F172A; --ink-2:#64748B; --ink-3:#94A3B8;
  --bg:#F6F7FB; --card:#FFFFFF; --line:#E5E7EB;
  --radius:8px; --nav-h:66px;
  /* legacy aliases — old inline styles still resolve */
  --green:var(--brand); --green-dark:var(--brand-strong); --green-deep:var(--brand-deep);
  --green-light:var(--brand-light); --amber:#C2410C; --amber-bg:var(--accent-bg); --gold:var(--accent);
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
html,body{height:100%; height:100dvh; background:var(--bg);} /* dvh = true full screen in installed apps; 100% is the fallback */
html,body{overscroll-behavior:none;} /* stop a bounced scroll inside the app dragging the DOCUMENT — that offset is what leaves a dead band at the top */
body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--ink); overflow:hidden;
}
#root{height:100%; height:100dvh; height:var(--app-h,100dvh); display:flex; flex-direction:column;}
button{font-family:inherit;}
input,textarea,select{font-family:inherit; font-size:16px;} /* 16px prevents iOS zoom */

/* desktop nicety: centre a phone-ish column */
@media (min-width:600px){
  body{background:#0F172A; display:flex; justify-content:center;}
  #root{width:430px; box-shadow:0 0 60px rgba(0,0,0,.5); background:var(--bg);}
  #toast,#sheet{max-width:430px; left:50% !important; transform:translateX(-50%);}
  #sheet.show{transform:translateX(-50%) !important;}
  #sheet{transform:translate(-50%,105%);}
}

/* ---------- generic ---------- */
.scroll{flex:1; overflow-y:auto; overflow-x:hidden; padding:18px 16px calc(var(--nav-h) + 24px);
  padding-top:calc(18px + env(safe-area-inset-top)); /* clear the iOS clock in installed (standalone) mode */
  -webkit-overflow-scrolling:touch;}
.scroll.nonav{padding-bottom:32px;}
.scroll > *{max-width:100%; min-width:0;} /* nothing gets to drag the page sideways */
h1{font-size:32px; font-weight:700; letter-spacing:-.02em; line-height:1.1;}
h2{font-size:20px; font-weight:700; letter-spacing:-.01em; line-height:1.15;}
.sub{color:var(--ink-2); font-size:14px; font-weight:500; margin-top:4px; line-height:1.45;}
.sect{font-size:12.5px; font-weight:700; color:var(--ink-2); text-transform:uppercase; letter-spacing:.07em; margin:24px 0 10px;}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px;
  box-shadow:0 1px 2px rgba(15,23,42,.04); margin-bottom:12px;}
.row{display:flex; align-items:center; gap:12px;}
.grow{flex:1; min-width:0;}
.center{text-align:center;}
.mt{margin-top:14px;}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; border:0; border-radius:var(--radius);
  font-weight:700; font-size:15px; cursor:pointer; padding:13px 16px; min-height:48px;}
.btn:active{transform:scale(.97);}
.btn:disabled{opacity:.5;}
.btn-primary{background:var(--brand); color:#fff;}
.btn-primary:active{background:var(--brand-strong);}
.btn-ghost{background:#fff; color:var(--brand); border:1px solid var(--brand-border);}
.btn-soft{background:#fff; color:var(--ink); border:1px solid var(--line);}
.btn-danger{background:var(--red-bg); color:var(--red);}
.btn-block{width:100%;}
.btn-sm{min-height:38px; padding:8px 12px; font-size:13.5px;}
.btnrow{display:flex; gap:8px; margin-top:14px;}
.btnrow .btn{flex:1;}

.chip{display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700; border-radius:999px; padding:4px 10px; white-space:nowrap;}
.chip.ok{background:var(--good-bg); color:#047857;}
.chip.warn{background:var(--accent-bg); color:#C2410C;}
.chip.bad{background:var(--red-bg); color:var(--red);}
.chip.dim{background:#EEF1F6; color:var(--ink-2);}

.field{margin-bottom:14px;}
.field label{display:block; font-size:13.5px; font-weight:700; margin-bottom:6px; color:var(--ink-2);}
.field input,.field textarea,.field select{
  width:100%; border:1.5px solid var(--line); border-radius:var(--radius); padding:13px 14px; background:#fff; outline:none;
}
.field input:focus,.field textarea:focus{border-color:var(--brand);}
.hint{font-size:12.5px; color:var(--ink-3); margin-top:5px; line-height:1.4; overflow-wrap:anywhere;}

.avatar{width:40px; height:40px; border-radius:999px; background:var(--brand-light); color:var(--brand);
  font-weight:800; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0;}

.empty{text-align:center; color:var(--ink-2); font-size:14px; padding:26px 14px; line-height:1.5;}
.empty .big{font-size:34px; display:block; margin-bottom:8px;}

/* ---------- robot mascot ---------- */
.robot{flex-shrink:0;}

/* ---------- splash ---------- */
.splash{
  height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:radial-gradient(120% 90% at 70% 10%, #6366F1 0%, var(--brand-strong) 55%, var(--brand-deep) 100%);
  color:#fff; text-align:center; padding:32px; position:relative; overflow:hidden;
}
.splash img{width:112px; height:112px; border-radius:24px; box-shadow:0 18px 50px rgba(0,0,0,.4); animation:rise .7s ease both;}
.splash h1{font-size:44px; margin-top:22px; letter-spacing:-.03em; animation:rise .7s .15s ease both;}
.splash .tag{font-size:17px; opacity:.9; margin-top:8px; line-height:1.5; animation:rise .7s .3s ease both;}
.splash .foot{position:absolute; bottom:40px; left:32px; right:32px; animation:rise .7s .45s ease both;}
.splash .btn{background:#fff; color:var(--brand-strong); font-size:16px;}
@keyframes rise{from{opacity:0; transform:translateY(16px);} to{opacity:1;}}

/* ---------- tour ---------- */
.tour{height:100%; display:flex; flex-direction:column; background:var(--brand-deep); color:#fff;}
.tour-body{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:32px;}
.tour-emoji{font-size:74px; animation:rise .5s ease both;}
.tour h2{font-size:27px; margin-top:20px; letter-spacing:-.02em; animation:rise .5s .1s ease both;}
.tour p{font-size:16px; opacity:.88; margin-top:12px; line-height:1.6; max-width:320px; animation:rise .5s .2s ease both;}
.dots{display:flex; gap:7px; justify-content:center; margin-bottom:18px;}
.dots i{width:8px; height:8px; border-radius:99px; background:rgba(255,255,255,.3);}
.dots i.on{background:var(--accent); width:22px;}
.tour-foot{padding:0 24px calc(28px + env(safe-area-inset-bottom));}
.tour-skip{background:none; border:0; color:rgba(255,255,255,.6); font-size:14px; font-weight:600; padding:14px; width:100%; cursor:pointer;}

/* ---------- login ---------- */
.login-logo{width:76px; height:76px; border-radius:18px; margin:36px auto 14px; display:block;}

.magic{background:var(--brand-light); border:1px solid var(--brand-border); border-radius:var(--radius); padding:18px; text-align:center; margin-top:16px;}
.magic .env{font-size:38px;}

/* ---------- wizard ---------- */
.wiz-head{padding:18px 16px 0; padding-top:calc(18px + env(safe-area-inset-top));}
.progress{height:6px; background:var(--line); border-radius:99px; overflow:hidden; margin-top:14px;}
.progress i{display:block; height:100%; background:linear-gradient(90deg,var(--brand),var(--brand-soft)); border-radius:99px; transition:width .4s ease;}
.trades-grid{display:flex; flex-wrap:wrap; gap:8px;}
.tchip{border:1.5px solid var(--line); background:#fff; border-radius:999px; padding:10px 15px; font-size:14px; font-weight:600; cursor:pointer;}
.tchip.sel{border-color:var(--brand); background:var(--brand-light); color:var(--brand);}

/* interview chat */
.ichat{flex:1; display:flex; flex-direction:column; min-height:0;}
.ichat-scroll{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px;}
.imsg{max-width:86%; border-radius:12px; padding:11px 14px; font-size:14.5px; line-height:1.5; white-space:pre-line; animation:rise .25s ease;}
.imsg.bot{background:#fff; border:1px solid var(--line); align-self:flex-start; border-top-left-radius:4px; box-shadow:0 1px 2px rgba(15,23,42,.04);}
.imsg.me{background:var(--brand); color:#fff; align-self:flex-end; border-top-right-radius:4px;}
.imsg b{font-weight:800;}
.ichat-input{display:flex; gap:8px; padding:10px 12px calc(14px + env(safe-area-inset-bottom)); background:var(--bg); align-items:flex-end;}
.ichat-input textarea{flex:1; border:1.5px solid var(--line); border-radius:14px; padding:12px 14px; resize:none; max-height:120px; outline:none; background:#fff;}
.ichat-input textarea:focus{border-color:var(--brand);}
.send{width:48px; height:48px; border-radius:99px; background:var(--brand); color:#fff; border:0; font-size:19px; cursor:pointer; flex-shrink:0;}
.iactions{display:flex; gap:8px; padding:0 12px 10px;}
.photo-strip{display:flex; gap:8px; padding:0 16px 8px; overflow-x:auto;}
.photo-strip img{width:64px; height:64px; object-fit:cover; border-radius:8px; border:2px solid #fff; box-shadow:0 1px 3px rgba(15,23,42,.15);}
.typing{align-self:flex-start; background:#fff; border:1px solid var(--line); border-radius:12px; padding:13px 16px; display:flex; gap:4px; box-shadow:0 1px 2px rgba(15,23,42,.04);}
/* the typing dots are restyled in the onboarding visual system at the end of this file */
.typing i:nth-child(2){animation-delay:.2s;} .typing i:nth-child(3){animation-delay:.4s;}
@keyframes blink{0%,60%,100%{opacity:.3;} 30%{opacity:1;}}

/* hours editor */
.hrow{display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line);}
.hrow:last-child{border:0;}
.hrow .day{width:44px; font-weight:800; font-size:14px;}
.hrow input[type=time]{border:1.5px solid var(--line); border-radius:var(--radius); padding:8px; background:#fff;}
.hrow .dash{color:var(--ink-3);}

/* in-app viewer: booking page / PDFs open here instead of iOS's browser */
#viewer{position:fixed; inset:0; background:var(--bg); z-index:95; display:none; flex-direction:column;}
#viewer.show{display:flex; animation:fade .18s ease;}
#viewer .vhead{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px;
  padding-top:calc(10px + env(safe-area-inset-top)); background:var(--card); border-bottom:1px solid var(--line); flex-shrink:0;}
#viewer .vhead p{font-weight:700; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#viewer .vspace{width:70px; flex-shrink:0;}
#viewer iframe{flex:1; width:100%; border:0; background:#fff;}
@media (min-width:600px){#viewer{left:50%; transform:translateX(-50%); width:430px;}}

/* brand bar (all tabs) */
.brandbar{display:flex; align-items:center; gap:7px; margin-bottom:12px;}
.brandbar b{font-size:16px; font-weight:800; letter-spacing:-.02em; color:var(--brand);}

/* slim assistant-activity line (Home) */
.ai-line{display:flex; align-items:center; gap:10px; padding:11px 14px; cursor:pointer;}
.ai-line p{font-size:13.5px; color:var(--ink-2); line-height:1.45;}
.ai-line b{color:var(--ink);}

/* ---------- main app: Today hero ---------- */
.hero{
  background:linear-gradient(150deg,var(--brand) 0%,var(--brand-strong) 70%,#3B31B4 100%);
  color:#fff; border-radius:12px; padding:20px 18px 18px; margin-top:2px;
  box-shadow:0 10px 26px rgba(79,70,229,.28);
}
.hero-top{display:flex; align-items:flex-start;}
.hero-greet{font-size:17px; font-weight:600; opacity:.9;}
.hero-name{font-size:34px; font-weight:700; letter-spacing:-.02em; line-height:1.05; margin-top:2px;}
.hero-meta{font-size:13.5px; font-weight:500; opacity:.85; margin-top:8px;}
.gear{margin-left:auto; width:42px; height:42px; border-radius:10px; border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.12); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.gear svg{width:21px; height:21px;}
.asst-card{background:#fff; color:var(--ink); border-radius:10px; padding:14px; margin-top:16px; display:flex; gap:12px; align-items:center;}
.asst-rows{flex:1; min-width:0;}
.asst-title{font-size:15px; font-weight:700; line-height:1.25; margin-bottom:10px; color:var(--ink);}
.arow{display:flex; align-items:center; gap:10px; padding:5px 0;}
.aico{width:30px; height:30px; border-radius:8px; background:var(--brand-light); color:var(--brand);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.aico svg{width:16px; height:16px;}
.arow b{font-size:17px; font-weight:800; min-width:20px;}
.arow span{font-size:13.5px; color:var(--ink-2); font-weight:500;}

.time-pill{background:var(--brand-light); color:var(--brand); font-weight:800; border-radius:var(--radius); padding:8px 6px; font-size:13.5px; text-align:center; min-width:60px; flex-shrink:0;}
.time-pill.dim{background:#EEF1F6; color:var(--ink-3);}
.time-pill small{display:block; font-weight:600; font-size:10px; opacity:.8;}
.job-t{font-weight:700; font-size:15px;}
.job-s{color:var(--ink-2); font-size:13px; margin-top:1px;}
.jrow{display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); align-items:center;}
.jrow:last-child{border:0;}
.jrow.done{opacity:.45;}
.src-ai{color:var(--brand); font-size:11.5px; font-weight:700;}

.appr{border-left:4px solid var(--accent);}
.quote-q{background:#F8FAFC; border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px; font-size:14px; margin:10px 0 8px;}
.quote-a{background:var(--brand-light); border:1px solid var(--brand-border); border-radius:var(--radius); padding:10px 12px; font-size:14px;}
.quote-a em{display:block; font-style:normal; font-size:10.5px; font-weight:800; color:var(--brand); margin-bottom:4px; text-transform:uppercase; letter-spacing:.05em;}
.quote-a textarea{width:100%; border:1.5px solid var(--brand); border-radius:var(--radius); padding:8px; margin-top:6px; background:#fff; min-height:90px;}
.meta{font-size:12px; color:var(--ink-3); margin-top:2px;}

/* tappable time chips — "move this job" offers the real free gaps */
.chips{display:flex; flex-wrap:wrap; gap:8px;}
.chip-btn{background:var(--brand-light); border:1.5px solid var(--brand-border); color:var(--brand);
  border-radius:999px; padding:9px 14px; font-size:13.5px; font-weight:700; cursor:pointer; font-family:inherit;}
.chip-btn:active{background:var(--brand); color:#fff;}

/* phone-call summary — what the assistant took from the call, in plain English */
.callsum{background:var(--brand-light); border:1px solid var(--brand-border); border-radius:var(--radius); padding:12px 14px;}
.callsum em{display:block; font-style:normal; font-size:10.5px; font-weight:800; color:var(--brand);
  margin-bottom:5px; text-transform:uppercase; letter-spacing:.05em;}
.callsum p{font-size:14.5px; line-height:1.5;}
.tscript{margin-top:12px;}
.tscript summary{font-size:13px; font-weight:700; color:var(--ink-2); cursor:pointer; padding:8px 0; list-style:none;}
.tscript summary::-webkit-details-marker{display:none;}
.tscript summary:before{content:"▸ "; color:var(--ink-3);}
.tscript[open] summary:before{content:"▾ ";}
.tscript .hint{margin:0 0 8px;}

.feed-item{display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--line);}
.feed-item:last-child{border:0;}
.fico{width:36px; height:36px; border-radius:var(--radius); background:var(--brand-light); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0;}
.feed-item p{font-size:14px; line-height:1.4;}

/* ---------- Money stat cards ---------- */
.money-strip{display:flex; gap:8px; margin-top:16px; margin-bottom:12px;}
.mcard{flex:1; border-radius:10px; padding:12px 10px; color:#fff; background:linear-gradient(160deg,var(--brand),var(--brand-strong)); box-shadow:0 6px 16px rgba(79,70,229,.25); border:0; text-align:left;}
.mcard .mlabel{display:block; font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; opacity:.9;}
.mcard b{display:block; font-size:21px; font-weight:800; letter-spacing:-.01em; margin-top:6px;}
.mcard span{font-size:11px; font-weight:600; opacity:.85; display:block; margin-top:2px;}
.mcard.bad{background:linear-gradient(160deg,#FB923C,var(--accent) 60%,#EA580C); box-shadow:0 6px 16px rgba(249,115,22,.28);}
.mcard.ok{background:linear-gradient(160deg,#34D399,var(--good) 60%,#059669); box-shadow:0 6px 16px rgba(16,185,129,.28);}
.inv{display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--line); cursor:pointer;}
.inv:last-child{border:0;}
.inv b{font-size:15px;}
.inv .amt{font-weight:800; font-size:15px; text-align:right;}

/* assistant info card (auto-chase etc.) */
.ai-note{display:flex; gap:12px; align-items:center; background:var(--brand-light); border:1px solid var(--brand-border); box-shadow:none;}
.ai-note p{font-size:13.5px; line-height:1.5;}

.day-head{font-size:13px; font-weight:800; color:var(--ink-2); margin:18px 0 8px; text-transform:uppercase; letter-spacing:.04em;}
.fab{position:fixed; right:18px; bottom:calc(var(--nav-h) + 18px); width:58px; height:58px; border-radius:99px;
  background:var(--brand); color:#fff; border:0; font-size:26px; cursor:pointer; box-shadow:0 8px 24px rgba(79,70,229,.45); z-index:40;}
@media (min-width:600px){.fab{right:calc(50% - 215px + 18px);}}

.set-row{display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--line);}
.set-row:last-child{border:0;}
.set-row p{font-size:15px; font-weight:600;}
.toggle{width:48px; height:29px; border-radius:999px; background:#CBD5E1; position:relative; cursor:pointer; flex-shrink:0; transition:background .15s;}
.toggle::after{content:""; position:absolute; top:2.5px; left:3px; width:24px; height:24px; background:#fff; border-radius:999px; transition:left .15s; box-shadow:0 1px 3px rgba(15,23,42,.25);}
.toggle.on{background:var(--brand);}
.toggle.on::after{left:21px;}
.radio{display:flex; flex-direction:column; gap:8px;}
.radio .opt{display:flex; gap:10px; align-items:center; background:#fff; border:2px solid var(--line); border-radius:var(--radius); padding:12px; cursor:pointer; font-size:14px;}
.radio .opt.sel{border-color:var(--brand); background:var(--brand-light);}
.radio .opt .oico{width:34px; height:34px; border-radius:8px; background:var(--brand-light); color:var(--brand); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.radio .opt.sel .oico{background:var(--brand); color:#fff;}
.radio .opt b{display:block; font-size:14px;}
.radio .opt span{font-size:12.5px; color:var(--ink-2); line-height:1.4;}
.radio .opt .tick{margin-left:auto; color:var(--brand); font-weight:800; visibility:hidden;}
.radio .opt.sel .tick{visibility:visible;}

/* booking-page link card (More) */
.linkcard{background:linear-gradient(150deg,var(--brand),var(--brand-strong)); color:#fff; border:0; box-shadow:0 8px 22px rgba(79,70,229,.28);}
.linkcard .linkline{display:flex; align-items:center; gap:9px; font-size:14px; font-weight:700; word-break:break-all;}
.linkcard .btnrow .btn{background:#fff; color:var(--brand); border:0;}
.linkcard .hint{color:rgba(255,255,255,.85);}
.linkbox{background:var(--brand-deep); color:#fff; border-radius:var(--radius); padding:14px; font-size:14px; word-break:break-all; font-weight:600;}

/* bottom nav */
nav.tabs{
  position:fixed; bottom:0; left:0; right:0; height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97); backdrop-filter:blur(10px); border-top:1px solid var(--line);
  display:flex; z-index:45; padding-bottom:env(safe-area-inset-bottom);
}
@media (min-width:600px){nav.tabs{left:50%; transform:translateX(-50%); width:430px;}}
/* Installed (Home Screen) app only: don't double-reserve the home-indicator area —
   pull the icons down snug, keep a slim strip for the indicator. Safari & Android unaffected. */
@media (display-mode: standalone){
  nav.tabs{
    height:calc(var(--nav-h) + max(0px, calc(env(safe-area-inset-bottom) - 16px)));
    padding-bottom:max(0px, calc(env(safe-area-inset-bottom) - 16px));
  }
  #toast{bottom:calc(var(--nav-h) + max(0px, calc(env(safe-area-inset-bottom) - 16px)) + 12px);}
}
nav.tabs button{flex:1; border:0; background:none; cursor:pointer; position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:var(--ink-2); font-size:10.5px; font-weight:700;}
nav.tabs button svg{width:23px; height:23px;}
nav.tabs button.on{color:var(--brand);}
.nbadge{position:absolute; top:8px; left:calc(50% + 6px); background:var(--red); color:#fff; font-size:10px; font-weight:800;
  min-width:17px; height:17px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 4px;}
.nbadge.dot{min-width:10px; width:10px; height:10px; padding:0; background:var(--red);} /* "something new" dot */

/* Home glance tiles reuse .mcard; red variant for "needs you" */
.mcard.alert{background:linear-gradient(160deg,#F87171,var(--red) 65%,#B91C1C); box-shadow:0 6px 16px rgba(220,38,38,.28);}
button.mcard{cursor:pointer; font-family:inherit; margin:0; display:block;}
button.mcard:active{transform:scale(.97);}

/* iOS-style swipe-to-act rows */
.swipe-wrap{position:relative; overflow:hidden;}
.swipe-action{position:absolute; top:0; right:0; bottom:0; width:84px; border:0; background:var(--red); color:#fff;
  font-weight:800; font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.swipe-content{position:relative; background:var(--card); transition:transform .18s ease; will-change:transform;}

/* iOS-style grouped settings list */
.igroup{background:var(--card); border:1px solid var(--line); border-radius:10px; margin-bottom:4px; overflow:hidden; box-shadow:0 1px 2px rgba(15,23,42,.04);}
.irow{display:flex; align-items:center; gap:12px; padding:12px 14px; cursor:pointer; border-bottom:1px solid var(--line); background:var(--card);}
.irow:last-child{border-bottom:0;}
.irow:active{background:#F1F3F9;}
.itile{width:30px; height:30px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0;}
.irow .lbl{font-size:15px; font-weight:600; flex:1; min-width:0;}
.irow .ival{font-size:13px; font-weight:500; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:42%;}
.irow::after{content:"›"; color:var(--ink-3); font-size:19px; font-weight:400; flex-shrink:0;}
.irow.nochev::after{content:"";}

/* collapsible Settings sections */
.acc{padding:0;}
.acc summary{display:flex; align-items:center; gap:10px; padding:15px 16px; font-weight:700; font-size:15px; cursor:pointer; list-style:none;}
.acc summary::-webkit-details-marker{display:none;}
.acc summary .grow{min-width:0;}
.acc-st{color:var(--ink-2); font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:44%;}
.acc summary::after{content:"›"; color:var(--ink-3); font-size:19px; font-weight:400; transform:rotate(90deg); transition:transform .15s; flex-shrink:0;}
.acc[open] summary::after{transform:rotate(270deg);}
.acc-body{padding:0 16px 16px;}

/* wizard install-step illustrations */
.inst{display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-bottom:1px solid var(--line);}
.inst:last-child{border:0;}
.inst .n{width:26px; height:26px; border-radius:99px; background:var(--brand); color:#fff; font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.inst p{font-size:14.5px; line-height:1.45;}
.inst .ico{font-size:20px; flex-shrink:0;}

/* job screen (full-page drill-in) */
#jobScreen{position:fixed; inset:0; background:var(--bg); z-index:65; display:none; flex-direction:column;}
#jobScreen.show{display:flex; animation:fade .18s ease;}
@keyframes fade{from{opacity:0;} to{opacity:1;}}
#jobScreen .jhead{display:flex; align-items:center; justify-content:space-between; padding:12px 16px;
  padding-top:calc(12px + env(safe-area-inset-top)); background:var(--card); border-bottom:1px solid var(--line); flex-shrink:0;}
#jobScreen .jbody{flex:1; overflow-y:auto; overflow-x:hidden; padding:16px 16px 40px; -webkit-overflow-scrolling:touch;}
@media (min-width:600px){#jobScreen{left:50%; transform:translateX(-50%); width:430px;}}

/* toast & sheet */
#toast{position:fixed; bottom:calc(var(--nav-h) + 16px); left:16px; right:16px; z-index:90;
  background:var(--ink); color:#fff; border-radius:10px; padding:13px 16px; font-size:14px; font-weight:600;
  transform:translateY(20px); opacity:0; pointer-events:none; transition:all .22s ease; text-align:center;}
#toast.show{transform:none; opacity:1;}
/* THE GREY-BAND FIX.
   iOS reserves a 62px strip for the status bar (the web view is 812 tall on an 874 screen)
   and tints it by SAMPLING the top of the page. While this scrim was up, it sampled
   rgba(15,23,42,.45) over #F6F7FB = #8E929D — precisely the grey that then stuck, because
   iOS never re-samples once the scrim goes. Twenty builds of layout fixes could never have
   touched it: the strip is outside the page.
   Fix: the scrim now leaves the top 12px undimmed, so the colour iOS samples is always the
   app background. Visually imperceptible — the dim starts 12px down, behind nothing. */
#scrim{position:fixed; inset:0; z-index:70; opacity:0; pointer-events:none; transition:opacity .2s;
  background:linear-gradient(180deg,
    rgba(15,23,42,0)    0px,      /* the 12px iOS samples — must stay clear, see above */
    rgba(15,23,42,0)    12px,
    rgba(15,23,42,.14)  30px,     /* ...then ramp, so the light strip flows into the dim */
    rgba(15,23,42,.34)  52px,
    rgba(15,23,42,.45)  80px);}
#scrim.show{opacity:1; pointer-events:auto;}
#sheet{position:fixed; left:0; right:0; bottom:0; z-index:80; background:#fff; border-radius:16px 16px 0 0;
  padding:14px 18px calc(26px + env(safe-area-inset-bottom)); transform:translateY(105%); transition:transform .25s ease;
  max-height:86%; overflow-y:auto;}
#sheet.show{transform:none;}
.grab{width:38px; height:4px; background:#CBD5E1; border-radius:99px; margin:0 auto 14px;}
.hist{border-left:2px solid var(--line); margin:10px 0 0 6px; padding-left:14px;}
.hist>div{position:relative; padding-bottom:12px; font-size:13.5px; color:var(--ink-2);}
.hist>div::before{content:""; position:absolute; left:-19.5px; top:4px; width:9px; height:9px; border-radius:99px; background:var(--brand);}
.hist>div.next::before{background:#CBD5E1;}

/* ==========================================================================
   ONBOARDING VISUAL SYSTEM  (v3.26)
   Everything below is look-and-feel for splash → tour → login → wizard → finish.
   Rules observed:
     · motion is transform/opacity only, so it runs on the GPU and never repaints
     · every animation is switched off under prefers-reduced-motion
     · nothing here touches the safe-area / 100dvh / standalone rules above
   ========================================================================== */

:root{
  /* a real spring curve — overshoots slightly then settles, like iOS */
  --spring:linear(0,.006,.025 2.8%,.101 6.1%,.539 18.9%,.721 25.3%,.849 31.5%,
                  .937 38.1%,.968 41.8%,.991 45.7%,1.006 50.1%,1.015 55%,1.017 63.9%,1.001);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --glass:rgba(255,255,255,.72);
  /* MOTION SPEED — one number tunes every entrance animation in the app.
     1 = the original quick timing, 1.5 = half again as long (current), 2 = double.
     Change this single value to make the whole app faster or more languid. */
  --mo:1.5;
  /* THE DARK ONBOARDING BACKDROP — one definition shared by the splash and all four tour
     slides, so they can never drift apart again. The tour used to be a flat --brand-deep
     while the splash had this gradient, which made the tour look duller from slide two on. */
  --onboard-bg:radial-gradient(120% 90% at 70% 10%, #6366F1 0%, var(--brand-strong) 55%, var(--brand-deep) 100%);
}

/* ---------- aurora: three drifting blobs behind the dark screens ---------- */
.aurora{position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none;}
.aurora b{position:absolute; display:block; border-radius:50%; filter:blur(64px); opacity:.5;
  will-change:transform; animation:drift 24s ease-in-out infinite alternate;}
.aurora b:nth-child(1){width:62vw; height:62vw; background:#6366F1; top:-14%; left:-18%;}
.aurora b:nth-child(2){width:54vw; height:54vw; background:#A855F7; bottom:-12%; right:-16%; animation-duration:31s; animation-delay:-6s;}
.aurora b:nth-child(3){width:40vw; height:40vw; background:#F97316; top:38%; right:-8%; opacity:.28; animation-duration:27s; animation-delay:-13s;}
@keyframes drift{
  0%  {transform:translate3d(0,0,0) scale(1);}
  50% {transform:translate3d(6vw,-5vh,0) scale(1.14);}
  100%{transform:translate3d(-5vw,7vh,0) scale(.94);}
}
/* fine film grain — static image, costs nothing, stops flat colour looking cheap */
.grain{position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");}

/* ---------- reveal helpers: stagger children in ---------- */
@keyframes revealUp{from{opacity:0; transform:translate3d(0,22px,0);} to{opacity:1; transform:none;}}
@keyframes revealPop{from{opacity:0; transform:scale(.82);} to{opacity:1; transform:scale(1);}}
@keyframes revealBlur{from{opacity:0; filter:blur(10px); transform:translate3d(0,14px,0);} to{opacity:1; filter:blur(0); transform:none;}}
.rv{opacity:0; animation:revealUp calc(.62s * var(--mo)) var(--ease-out) both;}
.rv-blur{opacity:0; animation:revealBlur calc(.7s * var(--mo)) var(--ease-out) both;}
.rv-pop{opacity:0; animation:revealPop calc(.6s * var(--mo)) cubic-bezier(.34,1.56,.64,1) both; animation-timing-function:var(--spring);}
.d1{animation-delay:calc(.07s * var(--mo));} .d2{animation-delay:calc(.14s * var(--mo));} .d3{animation-delay:calc(.22s * var(--mo));}
.d4{animation-delay:calc(.3s * var(--mo));}  .d5{animation-delay:calc(.4s * var(--mo));}  .d6{animation-delay:calc(.52s * var(--mo));}

/* ---------- SPLASH ---------- */
.splash{position:relative; overflow:hidden; background:var(--onboard-bg);}
.splash > *{position:relative; z-index:2;}
.splash .mark{position:relative; width:128px; height:128px; margin:0 auto;
  animation:revealPop calc(.9s * var(--mo)) both; animation-timing-function:var(--spring);}
.splash .mark img{width:128px; height:128px; border-radius:30px; position:relative; z-index:2;
  box-shadow:0 26px 70px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.14) inset;}
/* breathing halo behind the icon */
.splash .mark:after{content:""; position:absolute; inset:-26%; border-radius:50%; z-index:1;
  background:radial-gradient(circle,rgba(255,255,255,.5),transparent 65%);
  animation:halo 3.4s ease-in-out infinite;}
@keyframes halo{0%,100%{transform:scale(.9); opacity:.35;} 50%{transform:scale(1.14); opacity:.68;}}
/* wordmark reveals letter by letter */
.splash h1{font-size:46px; margin-top:26px; letter-spacing:-.035em; display:flex; justify-content:center;}
.splash h1 span{display:inline-block; opacity:0; animation:revealBlur calc(.6s * var(--mo)) var(--ease-out) both;}
.splash .tag{font-size:17.5px; opacity:.92; margin-top:10px; line-height:1.55;}
.splash .foot{position:absolute; bottom:calc(40px + env(safe-area-inset-bottom)); left:32px; right:32px; z-index:2;}
.splash .btn{background:#fff; color:var(--brand-strong); font-size:16.5px; font-weight:800;
  position:relative; overflow:hidden; box-shadow:0 12px 34px rgba(0,0,0,.28);}
/* light sweeps across the button every few seconds */
.splash .btn:after{content:""; position:absolute; top:0; bottom:0; width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);
  transform:translateX(-160%); animation:sweep 3.6s 1.2s ease-in-out infinite;}
@keyframes sweep{0%{transform:translateX(-160%);} 55%,100%{transform:translateX(320%);}}

/* ---------- TOUR ---------- */
/* padding-top clears the notch / Dynamic Island — without it the artwork starts at y=0
   and its top edge sits under the island on every notched iPhone. */
.tour{position:relative; overflow:hidden; padding-top:env(safe-area-inset-top);
  background:var(--onboard-bg);}   /* same backdrop as the splash — see --onboard-bg */
.tour > *{position:relative; z-index:2;}
.tour-body{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:28px 30px; min-height:0;}
/* The artwork is capped by HEIGHT as well as width. Width alone (72vw) came out at 268px on
   an iPhone SE and pushed the body copy down underneath the progress dots — 36px of overlap. */
.tour-art{width:min(258px,66vw,30vh); height:min(258px,66vw,30vh); margin-bottom:6px; flex-shrink:0;}
.tour h2{font-size:28px; margin-top:18px; letter-spacing:-.025em; line-height:1.2;}
.tour p{font-size:16px; opacity:.9; margin-top:12px; line-height:1.62; max-width:330px;}
/* short screens (SE, mini, and any phone in landscape): tighten the type so the slide
   always resolves inside one screen rather than running under the dots */
@media (max-height:700px){
  .tour-body{padding:16px 26px;}
  .tour h2{font-size:24px; margin-top:12px;}
  .tour p{font-size:15px; margin-top:9px; line-height:1.5;}
  .tour-art{margin-bottom:0;}
}
/* slide transition: content drifts in from the side, backdrop lags behind (parallax) */
.tour-body.in-next{animation:slideInR calc(.5s * var(--mo)) var(--ease-out) both;}
.tour-body.in-prev{animation:slideInL calc(.5s * var(--mo)) var(--ease-out) both;}
@keyframes slideInR{from{opacity:0; transform:translate3d(38px,0,0);} to{opacity:1; transform:none;}}
@keyframes slideInL{from{opacity:0; transform:translate3d(-38px,0,0);} to{opacity:1; transform:none;}}
/* dots: the active one stretches into a pill */
.dots{display:flex; gap:7px; justify-content:center; padding:6px 0 18px;}
.dots i{width:7px; height:7px; border-radius:99px; background:rgba(255,255,255,.34);
  transition:width .45s var(--spring), background .3s ease;}
.dots i.on{width:26px; background:#fff;}
.tour-foot{padding:0 24px calc(28px + env(safe-area-inset-bottom));}
.tour-foot .btn{background:#fff; color:var(--brand-strong); font-weight:800; font-size:16px;
  box-shadow:0 12px 30px rgba(0,0,0,.26);}
.tour-skip{background:none; border:0; color:rgba(255,255,255,.62); font-size:14px; font-weight:600;
  padding:14px; width:100%; cursor:pointer;}

/* ---------- animated tour illustrations ---------- */
.tour-art .fl{animation:floaty 4.2s ease-in-out infinite;}
@keyframes floaty{0%,100%{transform:translateY(0);} 50%{transform:translateY(-7px);}}
.tour-art .rg1,.tour-art .rg2,.tour-art .rg3{transform-origin:center; animation:ring 2.1s ease-out infinite;}
.tour-art .rg2{animation-delay:calc(.35s * var(--mo));} .tour-art .rg3{animation-delay:calc(.7s * var(--mo));}
@keyframes ring{0%{opacity:.85; transform:scale(.55);} 100%{opacity:0; transform:scale(1.5);}}
.tour-art .pop{animation:popIn calc(.55s * var(--mo)) calc(.35s * var(--mo)) both; animation-timing-function:var(--spring); transform-origin:center;}
.tour-art .pop2{animation:popIn calc(.55s * var(--mo)) calc(.75s * var(--mo)) both; animation-timing-function:var(--spring); transform-origin:center;}
.tour-art .pop3{animation:popIn calc(.55s * var(--mo)) calc(1.15s * var(--mo)) both; animation-timing-function:var(--spring); transform-origin:center;}
@keyframes popIn{from{opacity:0; transform:scale(.3);} to{opacity:1; transform:scale(1);}}
.tour-art .draw{stroke-dasharray:200; stroke-dashoffset:200; animation:draw calc(1.1s * var(--mo)) calc(.3s * var(--mo)) var(--ease-out) both;}
@keyframes draw{to{stroke-dashoffset:0;}}
.tour-art .drop{animation:drop 1.5s ease-in-out infinite;}
@keyframes drop{0%{transform:translateY(-16px); opacity:0;} 25%{opacity:1;} 60%,100%{transform:translateY(0); opacity:1;}}
.tour-art .tick{stroke-dasharray:36; stroke-dashoffset:36; animation:draw calc(.5s * var(--mo)) calc(1.1s * var(--mo)) var(--ease-out) both;}

/* ---------- LOGIN ---------- */
.auth{position:relative; overflow-y:auto; overflow-x:hidden;}
.auth > *{position:relative; z-index:2;}
.auth .login-logo{width:82px; height:82px; border-radius:20px; margin:min(9vh,52px) auto 16px; display:block;
  box-shadow:0 18px 44px rgba(79,70,229,.34); animation:revealPop calc(.8s * var(--mo)) both; animation-timing-function:var(--spring);}
.glass{background:var(--glass); backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(255,255,255,.7); border-radius:20px; padding:22px;
  box-shadow:0 22px 60px rgba(15,23,42,.14), 0 1px 0 rgba(255,255,255,.9) inset;}
/* floating label input */
.ffield{position:relative; margin-bottom:14px;}
.ffield input{width:100%; border:1.5px solid var(--line); border-radius:13px; background:#fff;
  padding:22px 14px 9px; font-size:16px; outline:none;
  transition:border-color .22s ease, box-shadow .22s ease;}
.ffield label{position:absolute; left:14px; top:15px; font-size:15px; color:var(--ink-3); font-weight:600;
  pointer-events:none; transform-origin:left top;
  transition:transform .24s var(--ease-out), color .24s ease;}
.ffield input:focus{border-color:var(--brand); box-shadow:0 0 0 4px rgba(79,70,229,.14);}
.ffield input:focus + label,
.ffield input:not(:placeholder-shown) + label{transform:translateY(-9px) scale(.76); color:var(--brand);}
/* magic-link confirmation */
.magic{background:var(--brand-light); border:1px solid var(--brand-border); border-radius:16px;
  padding:22px 18px; text-align:center; margin-top:16px; animation:revealPop calc(.6s * var(--mo)) both; animation-timing-function:var(--spring);}
.magic .env{font-size:42px; display:inline-block; animation:envPop calc(.9s * var(--mo)) both; animation-timing-function:var(--spring);}
@keyframes envPop{0%{transform:scale(0) rotate(-25deg);} 100%{transform:scale(1) rotate(0);}}

/* ---------- WIZARD ---------- */
.wiz-head{padding:18px 16px 0; padding-top:calc(18px + env(safe-area-inset-top)); position:relative; z-index:3;}
.wiz-head h2{font-size:23px; letter-spacing:-.02em;}
.progress{height:7px; background:var(--line); border-radius:99px; overflow:hidden; margin-top:14px;
  box-shadow:0 1px 2px rgba(15,23,42,.05) inset;}
.progress i{display:block; height:100%; border-radius:99px; position:relative; overflow:hidden;
  background:linear-gradient(90deg,var(--brand),var(--brand-soft),var(--accent));
  background-size:220% 100%; animation:flow 4.5s linear infinite;
  transition:width .75s cubic-bezier(.34,1.56,.64,1); transition-timing-function:var(--spring);}
@keyframes flow{to{background-position:220% 0;}}
/* whole step slides in when you move forward */
.wiz-step{animation:stepIn calc(.48s * var(--mo)) var(--ease-out) both;}
@keyframes stepIn{from{opacity:0; transform:translate3d(0,16px,0);} to{opacity:1; transform:none;}}
/* cards on wizard screens lift off the page */
.wiz-step .card{border-radius:18px; border:1px solid rgba(226,232,240,.9);
  box-shadow:0 10px 30px rgba(15,23,42,.06), 0 1px 0 rgba(255,255,255,.8) inset;}

/* trade chips */
.tchip{border:1.5px solid var(--line); background:#fff; border-radius:999px; padding:10px 15px;
  font-size:14px; font-weight:600; cursor:pointer; position:relative;
  transition:transform .3s var(--spring), border-color .2s ease, background .2s ease, color .2s ease;}
.tchip:active{transform:scale(.94);}
.tchip.sel{border-color:var(--brand); background:var(--brand-light); color:var(--brand);
  transform:scale(1.06); box-shadow:0 6px 18px rgba(79,70,229,.2);}
.trades-grid{display:flex; flex-wrap:wrap; gap:8px;}

/* focus ring on every wizard input */
.wiz-step .field input:focus,.wiz-step .field textarea:focus,.wiz-step .field select:focus{
  border-color:var(--brand); box-shadow:0 0 0 4px rgba(79,70,229,.13); outline:none;}
.field input,.field textarea,.field select{transition:border-color .2s ease, box-shadow .2s ease;}

/* primary buttons get depth + a press dip */
.wiz-step .btn-primary,.tour-foot .btn,.splash .btn{
  box-shadow:0 10px 26px rgba(79,70,229,.28);
  transition:transform .22s var(--spring), box-shadow .22s ease;}
.wiz-step .btn-primary:active{transform:translateY(2px) scale(.985); box-shadow:0 4px 12px rgba(79,70,229,.24);}

/* ---------- INTERVIEW CHAT ---------- */
.imsg{max-width:86%; border-radius:16px; padding:11px 14px; font-size:14.5px; line-height:1.5;
  white-space:pre-line; animation:bubbleIn calc(.5s * var(--mo)) both; animation-timing-function:var(--spring);}
@keyframes bubbleIn{from{opacity:0; transform:translate3d(0,14px,0) scale(.94);} to{opacity:1; transform:none;}}
.imsg.bot{background:#fff; border:1px solid var(--line); align-self:flex-start; border-bottom-left-radius:5px;
  box-shadow:0 4px 14px rgba(15,23,42,.06);}
.imsg.me{background:linear-gradient(135deg,var(--brand),var(--brand-strong)); color:#fff;
  align-self:flex-end; border-bottom-right-radius:5px; box-shadow:0 6px 18px rgba(79,70,229,.28);}
.typing{align-self:flex-start; background:#fff; border:1px solid var(--line); border-radius:16px;
  border-bottom-left-radius:5px; padding:13px 16px; display:flex; gap:5px;
  box-shadow:0 4px 14px rgba(15,23,42,.06); animation:bubbleIn calc(.4s * var(--mo)) both;}
.typing i{width:7px; height:7px; background:var(--brand); border-radius:99px; opacity:.45;
  animation:bounce 1.3s infinite;}
.typing i:nth-child(2){animation-delay:calc(.16s * var(--mo));} .typing i:nth-child(3){animation-delay:calc(.32s * var(--mo));}
@keyframes bounce{0%,60%,100%{transform:translateY(0); opacity:.4;} 30%{transform:translateY(-6px); opacity:1;}}
.ichat-input textarea:focus{border-color:var(--brand); box-shadow:0 0 0 4px rgba(79,70,229,.12);}
.ichat-input .send{transition:transform .25s var(--spring);}
.ichat-input .send:active{transform:scale(.88);}

/* ---------- HOURS ---------- */
.hrow{animation:revealUp calc(.45s * var(--mo)) var(--ease-out) both;}
.hrow:nth-child(1){animation-delay:calc(.03s * var(--mo));} .hrow:nth-child(2){animation-delay:calc(.07s * var(--mo));}
.hrow:nth-child(3){animation-delay:calc(.11s * var(--mo));} .hrow:nth-child(4){animation-delay:calc(.15s * var(--mo));}
.hrow:nth-child(5){animation-delay:calc(.19s * var(--mo));} .hrow:nth-child(6){animation-delay:calc(.23s * var(--mo));}
.hrow:nth-child(7){animation-delay:calc(.27s * var(--mo));}
.hrow input[type=time]{transition:opacity .25s ease, border-color .2s ease;}
.hrow input:disabled{opacity:.42;}

/* ---------- INSTALL STEP ---------- */
.inst{display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-bottom:1px solid var(--line);
  animation:revealUp calc(.5s * var(--mo)) var(--ease-out) both;}
.inst:nth-child(1){animation-delay:calc(.06s * var(--mo));} .inst:nth-child(2){animation-delay:calc(.14s * var(--mo));} .inst:nth-child(3){animation-delay:calc(.22s * var(--mo));}
.inst .n{width:27px; height:27px; border-radius:99px; color:#fff; font-weight:800; font-size:13px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  background:linear-gradient(135deg,var(--brand),var(--brand-soft));
  box-shadow:0 4px 12px rgba(79,70,229,.32);}
.phone-demo{width:150px; margin:4px auto 14px; display:block;}
.phone-demo .hand{animation:tapUp 2.6s ease-in-out infinite;}
@keyframes tapUp{0%,100%{transform:translateY(0); opacity:.9;} 45%{transform:translateY(-22px); opacity:1;}}

/* ---------- FINISH ---------- */
.finish-hero{position:relative; text-align:center; padding:26px 16px 22px; border-radius:22px; overflow:hidden;
  background:linear-gradient(150deg,var(--brand) 0%,var(--brand-strong) 55%,var(--brand-deep) 100%);
  color:#fff; box-shadow:0 20px 50px rgba(79,70,229,.34);}
.finish-hero > *{position:relative; z-index:2;}
.finish-hero h2{font-size:26px; letter-spacing:-.02em; margin-top:8px;}
.finish-hero p{opacity:.9; font-size:14.5px; line-height:1.55; margin-top:8px;}
.finish-hero .robo{display:inline-block; animation:cheer 2.4s ease-in-out infinite;}
@keyframes cheer{0%,100%{transform:translateY(0) rotate(-3deg);} 50%{transform:translateY(-9px) rotate(3deg);}}
/* soft rays behind the robot */
.finish-hero:before{content:""; position:absolute; inset:-40% -10% auto; height:180%; z-index:1;
  background:conic-gradient(from 0deg,transparent 0 12%,rgba(255,255,255,.14) 12% 18%,transparent 18% 30%,
    rgba(255,255,255,.14) 30% 36%,transparent 36% 55%,rgba(255,255,255,.14) 55% 61%,transparent 61%);
  animation:spin 26s linear infinite;}
@keyframes spin{to{transform:rotate(1turn);}}
#confetti{position:fixed; inset:0; z-index:60; pointer-events:none;}
/* the "you're set up" checklist ticks itself off */
.ready{display:flex; gap:11px; align-items:center; padding:11px 0; border-bottom:1px solid var(--line);
  animation:revealUp calc(.5s * var(--mo)) var(--ease-out) both;}
.ready:last-child{border:0;}
.ready:nth-child(1){animation-delay:calc(.25s * var(--mo));} .ready:nth-child(2){animation-delay:calc(.45s * var(--mo));} .ready:nth-child(3){animation-delay:calc(.65s * var(--mo));}
.ready .rt{width:24px; height:24px; border-radius:99px; flex-shrink:0; display:flex; align-items:center;
  justify-content:center; background:var(--good-bg); color:#047857; font-size:13px; font-weight:900;}
.ready p{font-size:14.5px; font-weight:600;}

/* ---------- accessibility: honour the system setting ---------- */
@media (prefers-reduced-motion:reduce){
  .aurora b,.splash .mark:after,.splash .btn:after,.finish-hero:before,
  .tour-art *,.progress i,.typing i,.finish-hero .robo,.phone-demo .hand{animation:none !important;}
  .rv,.rv-blur,.rv-pop,.imsg,.typing,.hrow,.inst,.ready,.wiz-step,.tour-body,
  .splash h1 span,.splash .mark,.auth .login-logo,.magic,.magic .env{
    animation:none !important; opacity:1 !important; transform:none !important; filter:none !important;}
  .dots i,.tchip,.btn{transition-duration:.01ms !important;}
  #confetti{display:none !important;}
}

/* ==========================================================================
   MAIN APP VISUAL LAYER  (v3.27)
   The onboarding language — spring, depth, light, stagger — carried into the
   screens people actually live in. Deliberately calmer than onboarding:
   NOTHING here loops except the robot's occasional nudge. Every animation is
   an entrance or a press response, then it stops. This screen gets opened
   forty times a day, one-handed, in the rain.
   ========================================================================== */

body{background:#F4F5FA;}

/* ---------- HERO: contained light, not a screensaver ---------- */
.hero{position:relative; overflow:hidden; border-radius:22px; padding:22px 20px 20px;
  background:linear-gradient(145deg,#5B54EA 0%,var(--brand-strong) 52%,#2E2A7A 100%);
  box-shadow:0 18px 40px rgba(79,70,229,.32), 0 1px 0 rgba(255,255,255,.18) inset;}
.hero > *{position:relative; z-index:2;}
.hero-aurora{position:absolute; inset:0; z-index:1; overflow:hidden; border-radius:22px;}
.hero-aurora b{position:absolute; display:block; border-radius:50%; filter:blur(42px);}
/* these settle once on load and then hold — they do not drift */
.hero-aurora b:nth-child(1){width:230px; height:230px; background:#818CF8; opacity:.5; top:-120px; right:-60px;
  animation:heroLight calc(1.5s * var(--mo)) var(--ease-out) both;}
.hero-aurora b:nth-child(2){width:180px; height:180px; background:#F97316; opacity:.24; bottom:-110px; left:-40px;
  animation:heroLight calc(1.7s * var(--mo)) calc(.1s * var(--mo)) var(--ease-out) both;}
@keyframes heroLight{from{transform:translate3d(0,26px,0) scale(.7); opacity:0;} to{opacity:inherit;}}
.hero-greet{font-size:16px; opacity:.86; animation:revealUp calc(.55s * var(--mo)) var(--ease-out) both;}
.hero-name{font-size:35px; letter-spacing:-.03em; animation:revealUp calc(.55s * var(--mo)) calc(.06s * var(--mo)) var(--ease-out) both;}
.hero-meta{font-size:13.5px; opacity:.8; animation:revealUp calc(.55s * var(--mo)) calc(.12s * var(--mo)) var(--ease-out) both;}
.gear{border-radius:12px; transition:transform .3s var(--spring), background .2s;}
.gear:active{transform:scale(.9) rotate(-30deg);}

/* ---------- GLANCE TILES ---------- */
.money-strip{gap:9px; margin-top:14px;}
.mcard{border-radius:16px; padding:13px 12px 14px; position:relative; overflow:hidden;
  box-shadow:0 10px 24px rgba(79,70,229,.26), 0 1px 0 rgba(255,255,255,.22) inset;
  transition:transform .3s var(--spring), box-shadow .25s ease;
  animation:tileIn calc(.6s * var(--mo)) var(--ease-out) both;}
.money-strip .mcard:nth-child(1){animation-delay:calc(.10s * var(--mo));}
.money-strip .mcard:nth-child(2){animation-delay:calc(.17s * var(--mo));}
.money-strip .mcard:nth-child(3){animation-delay:calc(.24s * var(--mo));}
@keyframes tileIn{from{opacity:0; transform:translate3d(0,16px,0) scale(.96);} to{opacity:1; transform:none;}}
.mcard:before{content:""; position:absolute; top:0; left:0; right:0; height:52%;
  background:linear-gradient(180deg,rgba(255,255,255,.2),transparent);}
.mcard > *{position:relative;}
.mcard b{font-size:23px; letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.mcard .mlabel{opacity:.92; font-size:9px;}
button.mcard:active{transform:translateY(2px) scale(.97); box-shadow:0 4px 12px rgba(79,70,229,.22);}
.mcard.bad{box-shadow:0 10px 24px rgba(249,115,22,.28), 0 1px 0 rgba(255,255,255,.22) inset;}
.mcard.ok{box-shadow:0 10px 24px rgba(16,185,129,.26), 0 1px 0 rgba(255,255,255,.22) inset;}
.mcard.alert{box-shadow:0 10px 24px rgba(220,38,38,.3), 0 1px 0 rgba(255,255,255,.22) inset;}

/* ---------- CARDS & ROWS ---------- */
.card{border-radius:18px; border:1px solid rgba(226,232,240,.85);
  box-shadow:0 8px 22px rgba(15,23,42,.055), 0 1px 0 rgba(255,255,255,.9) inset;
  animation:revealUp calc(.5s * var(--mo)) var(--ease-out) both;}
.sect{color:var(--ink-3); font-size:11.5px; letter-spacing:.09em; margin:22px 0 9px;}
.ai-line{border-radius:16px; background:#fff;}
/* the one loop in the whole main app: a nudge every 10s, and only while the
   assistant line is on screen — which is only when it has something to report */
.ai-line .robot{animation:nudge 10s ease-in-out infinite;}
@keyframes nudge{0%,94%,100%{transform:translateY(0) rotate(0);} 97%{transform:translateY(-4px) rotate(-7deg);}}
.jrow{padding:12px 0; transition:transform .25s var(--spring);}
.jrow:active{transform:scale(.985);}
.job-t{font-size:15.5px;}
.time-pill{border-radius:12px; min-width:64px; padding:9px 7px; font-size:14px;
  background:linear-gradient(160deg,var(--brand-light),#E0E7FF); color:var(--brand-strong);
  box-shadow:0 2px 6px rgba(79,70,229,.14);}
.time-pill.dim{background:#F1F3F9; color:var(--ink-3); box-shadow:none;}
.card .jrow{animation:revealUp calc(.45s * var(--mo)) var(--ease-out) both;}
.card .jrow:nth-child(1){animation-delay:calc(.05s * var(--mo));}
.card .jrow:nth-child(2){animation-delay:calc(.11s * var(--mo));}
.card .jrow:nth-child(3){animation-delay:calc(.17s * var(--mo));}
.card .jrow:nth-child(4){animation-delay:calc(.23s * var(--mo));}

/* ---------- BUTTONS & NAV ---------- */
.btn{border-radius:13px; transition:transform .22s var(--spring), box-shadow .2s ease;}
.btn-primary{box-shadow:0 8px 20px rgba(79,70,229,.3);}
.btn-primary:active{transform:translateY(2px) scale(.985); box-shadow:0 3px 9px rgba(79,70,229,.26);}
.btn-ghost,.btn-soft{box-shadow:0 2px 6px rgba(15,23,42,.05);}
.brandbar b{font-size:16.5px;}
nav.tabs{background:rgba(255,255,255,.9); backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%); border-top:1px solid rgba(226,232,240,.8);}
nav.tabs button.on svg{animation:tabPop .4s var(--spring);}
@keyframes tabPop{from{transform:scale(.82);} to{transform:scale(1);}}
.nbadge{box-shadow:0 2px 8px rgba(220,38,38,.5);}

/* ---------- JOB SCREEN ---------- */
#jobScreen .jhead{background:linear-gradient(140deg,var(--brand) 0%,var(--brand-strong) 100%);
  border-bottom:0; padding-bottom:15px; position:relative;
  box-shadow:0 10px 26px rgba(79,70,229,.26);}
/* COLOUR BLEED — the header paints 200px ABOVE itself in the same gradient.
   If iOS ever shifts a fixed overlay upward (see pinViewport in app.js), the
   worst case is a bit more purple, never a white gap under the Dynamic Island. */
#jobScreen .jhead:before{content:""; position:absolute; left:0; right:0; bottom:100%; height:200px;
  background:var(--brand); pointer-events:none;}
#jobScreen .jhead .btn-soft{background:rgba(255,255,255,.16); color:#fff;
  border:1px solid rgba(255,255,255,.3); box-shadow:none;}
#jobScreen .jhead .chip{background:rgba(255,255,255,.2); color:#fff;}
#jobScreen .jbody{padding-top:18px;}
#jobScreen .jbody > h1{font-size:23px; letter-spacing:-.02em; animation:revealUp calc(.5s * var(--mo)) var(--ease-out) both;}
#jobScreen .jbody > .sub{animation:revealUp calc(.5s * var(--mo)) calc(.05s * var(--mo)) var(--ease-out) both;}
#jobScreen .card:nth-of-type(1){animation-delay:calc(.12s * var(--mo));}
#jobScreen .card:nth-of-type(2){animation-delay:calc(.2s * var(--mo));}
#jobScreen .card:nth-of-type(3){animation-delay:calc(.28s * var(--mo));}
.avatar{background:linear-gradient(150deg,var(--brand),var(--brand-soft)); color:#fff;
  box-shadow:0 6px 16px rgba(79,70,229,.3); font-size:15px;}
.hist>div::before{box-shadow:0 0 0 3px rgba(79,70,229,.14);}
/* the billing block is where the money is — give it presence */
#jobScreen .card:has(#jAmt),#jobScreen .card:has(.hist){
  border:1px solid var(--brand-border); background:linear-gradient(180deg,#fff,#FAFAFF);}

/* the in-app viewer gets the same upward bleed, for the same reason */
#viewer .vhead{position:relative;}
#viewer .vhead:before{content:""; position:absolute; left:0; right:0; bottom:100%; height:200px;
  background:var(--card); pointer-events:none;}

@media (prefers-reduced-motion:reduce){
  .hero-aurora b,.ai-line .robot,.mcard,.card,.card .jrow,
  .hero-greet,.hero-name,.hero-meta,#jobScreen .jbody > h1,#jobScreen .jbody > .sub,
  nav.tabs button.on svg{animation:none !important; opacity:1 !important; transform:none !important;}
}

/* Scroll containment: when one of these hits its end, the bounce must NOT chain up to the
   document. An offset document is what leaves the grey band under the status bar, and
   chaining is the most likely way it accumulates during ordinary use. */
.scroll,#jobScreen .jbody,#sheet,.ichat-scroll,#viewer iframe,.photo-strip{overscroll-behavior:contain;}

/* ==========================================================================
   TINTED WIZARD SLIDES (v3.36)
   The first two steps used to be FULL purple, which fought with the white form card
   and made the jump to step 3 jarring. They now sit on the app background with soft
   brand-coloured light bleeding in from the corners — the onboarding family resemblance
   without shouting, and no colour change when the wizard goes back to normal.
   ========================================================================== */
.wiz-tint{background:var(--bg); position:relative; overflow:hidden;}
.wiz-tint > *:not(.aurora):not(.grain){position:relative; z-index:2;}
/* the same aurora, dialled right down and settled rather than drifting — this is a screen
   people READ and TYPE on, so nothing here is allowed to move once it has arrived */
.wiz-tint .aurora b{filter:blur(78px); animation:tintIn calc(1.4s * var(--mo)) var(--ease-out) both;}
.wiz-tint .aurora b:nth-child(1){width:74vw; height:74vw; background:#A5B4FC; opacity:.55; top:-24%; left:-26%; right:auto;}
.wiz-tint .aurora b:nth-child(2){width:68vw; height:68vw; background:#C4B5FD; opacity:.45; bottom:-22%; right:-24%; top:auto; left:auto;
  animation-delay:calc(.12s * var(--mo));}
.wiz-tint .aurora b:nth-child(3){width:52vw; height:52vw; background:#DDD6FE; opacity:.4; bottom:-10%; left:-14%; top:auto; right:auto;
  animation-delay:calc(.22s * var(--mo));}
@keyframes tintIn{from{transform:scale(.75) translate3d(0,20px,0); opacity:0;} to{opacity:inherit;}}
.wiz-tint .grain{opacity:.05;}
/* the form card floats on top as frosted white */
.wiz-tint .glass{background:rgba(255,255,255,.82); border:1px solid rgba(255,255,255,.9);
  box-shadow:0 20px 50px rgba(79,70,229,.14), 0 1px 0 rgba(255,255,255,.9) inset;}
.wiz-skip{background:none; border:0; color:var(--ink-2); font-size:14.5px; font-weight:600;
  padding:15px; width:100%; cursor:pointer; font-family:inherit;}
.wiz-skip:active{color:var(--brand);}
/* what the import found, shown inline on the next slides */
.prefill{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700;
  color:var(--brand); background:var(--brand-light); border-radius:999px; padding:3px 9px; margin-left:7px;}

/* the call-divert code: one big tap target rather than a box plus a separate button.
   It cannot auto-dial — Apple blocks tel: links containing * or # so a web page can't
   silently set up call forwarding. So the best we can do is make copying effortless. */
.codebox{display:block; width:100%; border:0; font-family:inherit; cursor:pointer; text-align:center;
  background:var(--brand-deep); color:#fff; border-radius:14px; padding:16px 14px; margin-top:4px;
  transition:transform .25s var(--spring), background .2s ease;}
.codebox:active{transform:scale(.98);}
.codebox .code{display:block; font-size:19px; font-weight:800; letter-spacing:.04em; word-break:break-all;}
.codebox .tap{display:block; font-size:12px; font-weight:700; opacity:.75; margin-top:6px;}
.codebox.copied{background:#047857;}
.codebox.copied .tap{opacity:.95;}

/* ---------- line items on quotes and invoices (v3.37) ----------
   Deliberately free text — every trade prices differently and a dropdown of "standard"
   items would be wrong for most of them. */
.items{display:flex; flex-direction:column; gap:8px; margin-top:4px;}
.litem{display:flex; gap:7px; align-items:center;}
.litem .li-d{flex:1; min-width:0; border:1.5px solid var(--line); border-radius:11px;
  padding:11px 12px; background:#fff; outline:none; font-size:15px;
  transition:border-color .2s ease, box-shadow .2s ease;}
.litem .li-d:focus,.litem .li-a:focus{border-color:var(--brand); box-shadow:0 0 0 3px rgba(79,70,229,.12);}
.li-money{display:flex; align-items:center; gap:2px; border:1.5px solid var(--line); border-radius:11px;
  background:#fff; padding-left:10px; width:104px; flex-shrink:0;
  transition:border-color .2s ease, box-shadow .2s ease;}
.li-money:focus-within{border-color:var(--brand); box-shadow:0 0 0 3px rgba(79,70,229,.12);}
.li-money span{color:var(--ink-3); font-weight:700; font-size:15px;}
.li-money .li-a{width:100%; border:0; outline:none; padding:11px 8px 11px 2px; background:none; font-size:15px;
  -moz-appearance:textfield;}
.li-money .li-a::-webkit-outer-spin-button,.li-money .li-a::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.li-x{flex-shrink:0; width:34px; height:34px; border:0; border-radius:10px; background:#F1F3F9;
  color:var(--ink-3); font-size:14px; cursor:pointer; font-family:inherit;}
.li-x:active{background:var(--red-bg); color:var(--red);}
.li-total{display:flex; align-items:center; margin-top:12px; padding-top:12px;
  border-top:2px solid var(--ink); font-weight:800; font-size:16px;}
.li-total b{margin-left:auto; color:var(--brand); font-size:19px;}

/* ---------- job report photos ---------- */
.photo-strip .shot{position:relative; flex-shrink:0;}
.photo-strip .shot img{width:74px; height:74px; object-fit:cover; border-radius:10px;
  border:2px solid #fff; box-shadow:0 2px 8px rgba(15,23,42,.18);}
.shot-x{position:absolute; top:-5px; right:-5px; width:22px; height:22px; border:0; border-radius:99px;
  background:var(--ink); color:#fff; font-size:11px; line-height:1; cursor:pointer; font-family:inherit;
  box-shadow:0 2px 6px rgba(0,0,0,.3);}