/* Book A Tradie — web. Colours mirror the mobile app's design tokens exactly. */
:root{
  --ink:#002454; --ink-soft:#2A2F3A; --muted:#5B6472;
  --line:#E6E8EC; --bg:#F4F5F7; --surface:#FFFFFF;
  --accent:#E20028; --accent-ink:#FFFFFF;
  --green:#1F9D63; --green-bg:#E7F5EE;
  --blue:#2E6BE6; --blue-bg:#E9F0FF;
  --red:#E5484D;  --red-bg:#FDECEC;
  --grey-bg:#EEF0F3;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --shadow:0 1px 2px rgba(0,36,84,.05), 0 8px 24px rgba(0,36,84,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink-soft);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100vh; min-height:100dvh;
  overflow-x:hidden;
}
img,video,canvas{max-width:100%}
h1,h2,h3,.brand,.amount{font-family:Poppins,Inter,system-ui,sans-serif}
a{color:var(--blue)}
:focus-visible{outline:2px solid var(--blue); outline-offset:2px; border-radius:4px}

/* ---- top bar ---- */
.topbar{background:var(--ink); color:#fff}
.topbar-in{max-width:1000px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; gap:16px}
.brand{color:#fff; text-decoration:none; font-weight:800; font-size:18px; letter-spacing:-.3px}
.brand span{color:var(--accent)}
.who{margin-left:auto; display:flex; align-items:center; gap:12px; font-size:13.5px}
.who-name{color:#fff; font-weight:600}
.tag{
  background:rgba(255,255,255,.14); color:#fff; text-transform:uppercase;
  font-size:10.5px; font-weight:700; letter-spacing:.06em; padding:4px 9px; border-radius:var(--r-pill);
}

/* ---- layout ---- */
.wrap{flex:1; width:100%; max-width:1000px; margin:0 auto; padding:28px 20px 56px}
.foot{max-width:1000px; margin:0 auto; padding:20px; color:var(--muted); font-size:12.5px; text-align:center}
.foot p{margin:4px 0}
.foot-note{color:#8A93A2}

/* ---- type ---- */
h1{font-size:26px; font-weight:700; color:var(--ink); letter-spacing:-.5px; margin:0 0 4px}
h2{font-size:18px; font-weight:700; color:var(--ink); margin:0 0 12px}
.sub{color:var(--muted); margin:0 0 24px; font-size:14px}
.eyebrow{
  text-transform:uppercase; font-size:11px; font-weight:700; letter-spacing:.08em;
  color:var(--muted); margin:0 0 8px;
}

/* ---- cards ---- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; box-shadow:var(--shadow)}
.card + .card{margin-top:14px}

/* ---- buttons ---- */
.btn{
  font:inherit; font-weight:700; font-size:14px; border:0; cursor:pointer;
  padding:11px 18px; border-radius:var(--r-pill); transition:filter .15s, background .15s;
}
.btn:disabled{opacity:.55; cursor:default}
.btn-primary{background:var(--accent); color:var(--accent-ink)}
.btn-primary:hover:not(:disabled){filter:brightness(1.08)}
.btn-accept{background:var(--green); color:#fff; width:100%}
.btn-accept:hover:not(:disabled){filter:brightness(1.06)}
.btn-quiet{background:var(--surface); color:var(--ink); border:1px solid var(--line)}
.btn-quiet:hover:not(:disabled){background:var(--grey-bg)}
.btn-ghost{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.28); padding:7px 14px; font-size:13px}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-link{background:none; border:0; color:var(--blue); font-weight:600; cursor:pointer; padding:0; font-size:13.5px}
.btn-row{display:flex; gap:10px; align-items:center; margin-top:14px; flex-wrap:wrap}

/* ---- forms ---- */
label{display:block; font-size:12.5px; font-weight:700; color:var(--ink-soft); margin:14px 0 6px}
input,textarea{
  width:100%; min-width:0; font:inherit; font-size:14px; color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-md);
  padding:12px 13px; background:var(--surface);
}
textarea{min-height:88px; resize:vertical}
input:focus,textarea:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-bg)}

/* ---- sign in ---- */
.auth{max-width:400px; margin:6vh auto 0}
.auth .card{padding:28px}
.auth h1{font-size:24px}
.auth-foot{margin-top:18px; font-size:13px; color:var(--muted); text-align:center}

/* ---- messages ---- */
.msg{border-radius:var(--r-md); padding:12px 14px; font-size:13.5px; margin-top:14px}
.msg-err{background:var(--red-bg); color:#8E2126}
.msg-ok{background:var(--green-bg); color:#0F5B39}
.msg-info{background:var(--blue-bg); color:#1B478F}

/* ---- job list ---- */
.rows{display:grid; grid-template-columns:minmax(0,1fr); gap:12px}
.row{
  display:flex; align-items:center; gap:16px; width:100%; text-align:left;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:16px 18px; cursor:pointer; font:inherit; transition:border-color .15s, transform .06s;
}
.row:hover{border-color:#C9D3E2}
.row:active{transform:translateY(1px)}
.row-main{min-width:0; flex:1}
.row-title{font-weight:700; color:var(--ink); font-size:15px; margin:0 0 3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.row-meta{color:var(--muted); font-size:12.5px; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.row-right{margin-left:auto; display:flex; align-items:center; gap:12px; flex-shrink:0}
.chev{color:#C2C8D2; font-size:18px; line-height:1}

/* count of quotes on a job row */
.qcount{
  background:var(--blue-bg); color:var(--blue); font-weight:700; font-size:12px;
  padding:5px 11px; border-radius:var(--r-pill); white-space:nowrap;
}
.qcount.zero{background:var(--grey-bg); color:var(--muted)}

/* ---- badges ---- */
.badge{
  font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:5px 10px; border-radius:var(--r-pill); white-space:nowrap;
}
.badge-open{background:var(--blue-bg); color:var(--blue)}
.badge-booked{background:var(--green-bg); color:var(--green)}
.badge-done{background:var(--grey-bg); color:var(--muted)}
.badge-cancelled{background:var(--red-bg); color:var(--red)}
.badge-pending{background:var(--grey-bg); color:var(--muted)}
.badge-accepted{background:var(--green-bg); color:var(--green)}
.badge-declined{background:var(--red-bg); color:var(--red)}

/* ---- SIGNATURE: quote comparison ---- */
/* On a laptop you can see every quote at once and read the spread at a glance —
   the one thing the phone can't do. The bar encodes each quote's position
   between the lowest and highest received. */
.quotes{display:grid; grid-template-columns:minmax(0,1fr); gap:0}
.quote{border-top:1px solid var(--line); padding:18px 0}
.quote:first-child{border-top:0; padding-top:4px}
.quote-head{display:flex; align-items:baseline; gap:14px; width:100%; background:none; border:0; padding:0; cursor:pointer; text-align:left; font:inherit}
.rank{
  font-family:Poppins,sans-serif; font-weight:700; font-size:12px; color:var(--muted);
  min-width:22px; font-variant-numeric:tabular-nums;
}
.quote-who{font-weight:700; color:var(--ink); font-size:15px}
.amount{
  margin-left:auto; font-weight:800; font-size:20px; color:var(--ink);
  letter-spacing:-.4px; font-variant-numeric:tabular-nums;
}
.spread{height:4px; background:var(--grey-bg); border-radius:var(--r-pill); margin:10px 0 0; position:relative; overflow:hidden}
.spread-fill{position:absolute; inset:0 auto 0 0; background:var(--ink); border-radius:var(--r-pill); opacity:.28}
.quote.low .spread-fill{background:var(--green); opacity:.55}
.quote-body{padding-top:14px}
.quote-note{color:var(--ink-soft); font-size:14px; margin:0 0 14px; white-space:pre-wrap}
.lowest{
  font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--green); margin-left:10px;
}

/* ---- empty state ---- */
.empty{text-align:center; padding:44px 20px; color:var(--muted)}
.empty h2{color:var(--ink)}
.empty p{margin:0 auto; max-width:380px; font-size:14px}

/* ---- misc ---- */
.back{background:none; border:0; color:var(--muted); font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; padding:0; margin-bottom:16px}
.back:hover{color:var(--ink)}
.loading{display:flex; align-items:center; justify-content:center; gap:10px; padding:60px; color:var(--muted); font-size:14px}
.spin{
  width:16px; height:16px; border:2px solid var(--line); border-top-color:var(--ink);
  border-radius:50%; animation:spin .7s linear infinite; display:inline-block;
}
@keyframes spin{to{transform:rotate(360deg)}}
.detail-meta{color:var(--muted); font-size:13.5px; margin:0 0 18px}
.desc{white-space:pre-wrap; margin:0}
.hint{color:var(--muted); font-size:12.5px; margin:8px 0 0}


@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}

/* brand mark in the top bar (uses the site's existing white logo) */
.brand img{height:26px; display:block}

/* ============ nav ============ */
.mainnav{display:flex; gap:4px; margin-left:24px}
.mainnav a{
  color:rgba(255,255,255,.72); text-decoration:none; font-size:13.5px; font-weight:600;
  padding:8px 12px; border-radius:var(--r-pill); position:relative; white-space:nowrap;
}
.mainnav a:hover{color:#fff; background:rgba(255,255,255,.08)}
.mainnav a.on{color:#fff; background:rgba(255,255,255,.14)}
.pip{
  background:var(--accent); color:#fff; font-size:10px; font-weight:800;
  border-radius:var(--r-pill); padding:1px 6px; margin-left:5px; vertical-align:1px;
}
.brand img{height:26px; display:block}

/* ============ layout bits ============ */
.head-row{display:flex; align-items:flex-start; gap:16px; margin-bottom:8px}
.head-row .btn{margin-left:auto; flex-shrink:0}
.head-row h1{margin-bottom:2px}
.count{color:var(--muted); font-weight:600; font-size:14px}
.cta-card{background:linear-gradient(180deg,#fff, #FBFCFD)}
.cta-card h2{margin-bottom:6px}
.row-static{cursor:default}
.row.unread .row-title{font-weight:800}
.dot{width:9px; height:9px; border-radius:50%; background:var(--accent); display:inline-block}
.locked{background:var(--grey-bg)}
select{
  width:100%; font:inherit; font-size:14px; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-md); padding:12px 13px;
}
.row-right select{width:auto; padding:8px 10px; font-size:13px}
input[type=range]{padding:0; accent-color:var(--accent)}
.btn-danger{background:var(--red-bg); color:#8E2126}
.btn-danger:hover:not(:disabled){background:#F9DADB}

/* ============ password eye ============ */
.pw-wrap{position:relative}
.pw-eye{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:none; border:0; color:var(--muted); font-weight:700; font-size:12.5px; cursor:pointer; padding:6px;
}

/* ============ onboarding picks ============ */
.pick{
  display:block; width:100%; text-align:left; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg); padding:18px; cursor:pointer;
  font:inherit; margin-bottom:12px; transition:border-color .15s;
}
.pick:hover{border-color:var(--ink)}
.pick strong{display:block; color:var(--ink); font-size:16px; font-weight:700; margin-bottom:4px}
.pick span{color:var(--muted); font-size:13.5px}

/* ============ chips ============ */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px}
.chip{
  font:inherit; font-size:13px; font-weight:600; cursor:pointer;
  background:var(--surface); color:var(--ink-soft);
  border:1px solid var(--line); border-radius:var(--r-pill); padding:9px 14px;
  transition:background .12s, border-color .12s, color .12s;
}
.chip:hover{border-color:#C9D3E2}
.chip.on{background:var(--ink); border-color:var(--ink); color:#fff}

/* ============ address autocomplete ============ */
.ac{position:relative}
.ac-list{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:40;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow); overflow:hidden; max-height:260px; overflow-y:auto;
}
.ac-hit{
  display:block; width:100%; text-align:left; background:none; border:0;
  padding:12px 14px; font:inherit; font-size:13.5px; color:var(--ink); cursor:pointer;
}
.ac-hit + .ac-hit{border-top:1px solid var(--line)}
.ac-hit:hover{background:var(--grey-bg)}

/* ============ photos ============ */
.photos{display:flex; flex-wrap:wrap; gap:10px; margin-top:6px}
.photo{position:relative; width:96px; height:96px; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line)}
.photo img{width:100%; height:100%; object-fit:cover; display:block}
.photo-x{
  position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%;
  border:0; background:rgba(0,0,0,.6); color:#fff; cursor:pointer; font-size:14px; line-height:1;
}
.photo-add{
  width:96px; height:96px; border-radius:var(--r-md); border:1px dashed #C9D3E2;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  color:var(--muted); font-size:12.5px; font-weight:600; text-align:center; background:var(--surface);
}
.photo-add:hover{border-color:var(--ink); color:var(--ink)}

/* ============ map ============ */
.map{height:280px; border-radius:var(--r-lg); border:1px solid var(--line); margin-bottom:16px; z-index:1}

/* ============ verification docs ============ */
.doc{display:flex; align-items:center; gap:16px; padding:14px 0; border-top:1px solid var(--line)}
.doc:first-of-type{border-top:0}
.doc-name{font-weight:700; color:var(--ink); margin:0 0 2px; font-size:14px}
.doc .btn{margin-left:auto; flex-shrink:0}
.req{color:var(--accent); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-left:6px}

/* ============ messages ============ */
.convo .thumb{position:relative; width:56px; height:56px; flex-shrink:0}
.thumb-job{width:56px; height:56px; border-radius:var(--r-md); object-fit:cover; display:block; border:1px solid var(--line)}
.thumb-blank{background:var(--grey-bg)}
.thumb-face{
  position:absolute; left:-6px; bottom:-6px; width:28px; height:28px; border-radius:50%;
  border:2px solid #fff; object-fit:cover; background:var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;
}
.convo-last{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.convo-addr{color:#8A93A2; font-size:12px}
.row.unread .convo-last{color:var(--ink); font-weight:600}

/* ============ chat ============ */
.chat-head h1{margin-bottom:2px}
.chat-card{padding:0; overflow:hidden; display:flex; flex-direction:column; height:min(62vh,560px)}
.stream{flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:10px}
.bub{max-width:76%; min-width:0; padding:10px 14px; border-radius:16px; font-size:14.5px; line-height:1.45; position:relative; overflow-wrap:break-word}
.bub p{margin:0; white-space:pre-wrap; overflow-wrap:break-word; word-break:break-word}
.bub.mine{align-self:flex-end; background:var(--ink); color:#fff; border-bottom-right-radius:5px}
.bub.theirs{align-self:flex-start; background:var(--grey-bg); color:var(--ink); border-bottom-left-radius:5px}
.bub-img{max-width:100%; border-radius:10px; display:block; margin-bottom:6px}
.bub-time{display:block; font-size:10.5px; opacity:.6; margin-top:5px}
.composer{display:flex; align-items:flex-end; gap:10px; padding:14px; border-top:1px solid var(--line); background:var(--surface)}
.composer textarea{flex:1; min-height:44px; max-height:120px; border-radius:var(--r-pill); padding:12px 16px; resize:none}
.attach{cursor:pointer; font-size:20px; padding:8px; line-height:1; flex-shrink:0}

/* ============ modal ============ */
.modal-wrap{
  position:fixed; inset:0; background:rgba(0,20,45,.5); z-index:100;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal{
  background:var(--surface); border-radius:var(--r-lg); padding:24px; max-width:420px; width:100%;
  box-shadow:0 20px 60px rgba(0,20,45,.3);
}
.modal h3{font-family:Poppins,sans-serif; font-size:18px; font-weight:700; color:var(--ink); margin:0 0 8px}
.modal p{color:var(--muted); font-size:14px; margin:0; line-height:1.5}

/* ============ toast ============ */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%);
  background:var(--ink); color:#fff; padding:13px 20px; border-radius:var(--r-pill);
  font-size:14px; font-weight:600; z-index:200; box-shadow:0 10px 30px rgba(0,20,45,.28);
  animation:rise .22s ease-out;
}
.toast-err{background:var(--red)}
.toast.out{opacity:0; transition:opacity .3s}
@keyframes rise{from{opacity:0; transform:translate(-50%,10px)} to{opacity:1; transform:translate(-50%,0)}}



/* ============ avatars & faces ============ */
.face{width:44px; height:44px; border-radius:50%; object-fit:cover; flex-shrink:0; border:1px solid var(--line)}
.face-initial{
  background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:16px; font-family:Poppins,sans-serif; border:0;
}
.face-lg{width:72px; height:72px; font-size:26px}
.avatar-row{display:flex; align-items:center; gap:16px}
.avatar-row .btn{margin-left:auto}
.profile-head{display:flex; align-items:center; gap:18px; margin-bottom:20px}
.profile-head h1{margin-bottom:2px}
.tick{
  color:var(--green); font-size:15px; font-weight:800; vertical-align:1px;
}

/* ============ reviews ============ */
.review{padding:14px 0; border-top:1px solid var(--line)}
.review:first-of-type{border-top:0; padding-top:2px}
.review-top{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:5px}
.review-top strong{color:var(--ink); font-size:14px}
.review-stars{color:#E8A33D; font-size:14px; letter-spacing:1px}
.review-body{margin:0; font-size:14px; color:var(--ink-soft); line-height:1.5}

.starpick{display:flex; gap:6px; margin-top:4px}
.star{
  background:none; border:0; cursor:pointer; font-size:34px; line-height:1;
  color:var(--line); padding:0; transition:color .12s, transform .08s;
}
.star:hover{transform:scale(1.08)}
.star.on{color:#E8A33D}

/* ============ toggles ============ */
.toggle-row{display:flex; align-items:center; gap:16px; padding:14px 0; border-top:1px solid var(--line)}
.toggle-row:first-of-type{border-top:0}
.toggle-row > div{flex:1}
.switch{position:relative; width:46px; height:27px; flex-shrink:0; cursor:pointer}
.switch input{opacity:0; width:0; height:0}
.slider{
  position:absolute; inset:0; background:#CFD5DE; border-radius:var(--r-pill);
  transition:background .18s;
}
.slider::before{
  content:''; position:absolute; height:21px; width:21px; left:3px; top:3px;
  background:#fff; border-radius:50%; transition:transform .18s;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.switch input:checked + .slider{background:var(--green)}
.switch input:checked + .slider::before{transform:translateX(19px)}
.switch input:focus-visible + .slider{outline:2px solid var(--blue); outline-offset:2px}

/* ============ misc ============ */
.doc-actions{margin-left:auto; display:flex; gap:8px; flex-shrink:0}
.chat-head{display:flex; align-items:flex-start; gap:16px}
.chat-head .btn{margin-left:auto; text-decoration:none; flex-shrink:0}

.pip-dot{padding:0; width:7px; height:7px; border-radius:50%; display:inline-block; margin-left:5px; vertical-align:2px}

/* ============ notification bell (header icon, like the app) ============ */
.bell{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%; color:rgba(255,255,255,.8);
  text-decoration:none; transition:background .15s, color .15s; flex-shrink:0;
}
.bell:hover{background:rgba(255,255,255,.1); color:#fff}
.bell.on{background:rgba(255,255,255,.14); color:#fff}
.bell-count{
  position:absolute; top:1px; right:0;
  background:var(--accent); color:#fff; font-size:9.5px; font-weight:800;
  min-width:15px; height:15px; padding:0 3px; border-radius:var(--r-pill);
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--ink); box-sizing:content-box;
}

/* ==================================================================
   APP PARITY — values taken straight from the mobile app's stylesheets
   ================================================================== */

/* ---- header: light, like the app (was a dark bar) ---- */
.topbar{background:var(--surface); border-bottom:1px solid var(--line)}
.topbar-in{padding:10px 20px}
.brand img{height:44px; width:auto}
.mainnav a{color:var(--muted)}
.mainnav a:hover{color:var(--ink); background:var(--grey-bg)}
.mainnav a.on{color:var(--ink); background:var(--grey-bg)}
.who-name{color:var(--ink)}
.tag{background:var(--blue-bg); color:var(--blue)}
.btn-ghost{color:var(--ink); border:1px solid var(--line); background:var(--surface)}
.btn-ghost:hover{background:var(--grey-bg)}

/* bell = 38x38 bordered icon button + red dot (app: iconBtn + bellDot) */
.bell{
  width:38px; height:38px; border-radius:11px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-soft);
}
.bell:hover{background:var(--grey-bg); color:var(--ink)}
.bell.on{background:var(--grey-bg); color:var(--ink)}
.bell-dot{
  position:absolute; top:7px; right:8px; width:9px; height:9px; border-radius:50%;
  background:var(--red); border:2px solid var(--surface);
}

/* ---- search bar (app: search / searchPlaceholder) ---- */
.search{
  display:flex; align-items:center; gap:8px; height:48px;
  background:var(--grey-bg); border-radius:13px; padding:0 12px;
  cursor:pointer; margin-bottom:16px;
}
.search:hover{background:#E6E9ED}
.search span{flex:1; font-size:14.5px; color:#8A93A2}

/* ---- map (app: mapTitle / mapCard / mapHint / locateFab) — square, wheel-zooms ---- */
.map-section{margin-bottom:20px}
.map-title{font-size:16px; font-weight:800; color:var(--ink); margin:0 0 8px}
.map-card{
  position:relative; z-index:0; width:100%; aspect-ratio:4 / 3;
  border-radius:16px; overflow:hidden; border:1px solid var(--line);
}
@media (min-width:760px){
  /* full-width map, capped height so it doesn't dominate wide screens */
  .map-card{ aspect-ratio:auto; height:400px }
}
.map-card #nearmap{position:absolute; inset:0}
.map-hint{color:var(--muted); font-size:12.5px; margin:8px 0 20px}
.locate-fab{
  position:absolute; right:12px; bottom:12px; z-index:500;
  width:42px; height:42px; border-radius:21px; border:0; background:#fff; color:var(--ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 3px 6px rgba(20,24,31,.18);
}
.locate-fab:hover{background:var(--grey-bg)}

/* ---- the "Post a job" CTA (app: cta / ctaIcon / ctaTitle / ctaSub) ---- */
.cta{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:var(--ink); border:0; border-radius:var(--r-lg); padding:16px;
  cursor:pointer; font:inherit; transition:filter .15s;
}
.cta:hover{filter:brightness(1.12)}
.cta-icon{
  width:44px; height:44px; border-radius:12px; background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.cta-text{flex:1; min-width:0}
.cta-text strong{display:block; color:#fff; font-weight:700; font-size:16px}
.cta-text small{display:block; color:#AEB6C4; margin-top:2px; font-size:12.5px}
.cta-chev{color:#AEB6C4; font-size:20px; line-height:1}

/* ---- previously used (app: usedCard) ---- */
.section-head{display:flex; align-items:center; justify-content:space-between; margin:24px 0 12px}
.section-head h2{margin:0}
.used-row{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px}
.used-card{
  width:100px; flex-shrink:0; display:flex; flex-direction:column; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:12px 6px; cursor:pointer; font:inherit;
}
.used-card:hover{border-color:#C9D3E2}
.used-name{font-size:12.5px; font-weight:700; color:var(--ink); margin-top:6px; text-align:center;
  max-width:88px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.used-trade{font-size:11px; color:var(--muted); margin-top:1px; text-align:center;
  max-width:88px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.used-rating{font-size:11px; color:var(--ink); margin-top:4px; font-weight:600}

/* ---- profile (app: profile tab) ---- */
.prof-head{display:flex; align-items:center; gap:16px; margin-bottom:14px}
.prof-head h1{margin-bottom:6px}
.prof-av{position:relative; cursor:pointer; flex-shrink:0; display:block}
.prof-cam{
  position:absolute; right:-2px; bottom:-2px; width:26px; height:26px; border-radius:50%;
  background:var(--ink); border:2px solid var(--surface); font-size:11px;
  display:flex; align-items:center; justify-content:center;
}
.badge-amber{background:#FDE8EC; color:var(--accent)}

.kv-card{padding:4px 20px}
.kv{display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--line)}
.kv:last-child{border-bottom:0}
.kv span{color:var(--muted); font-size:14px}
.kv strong{color:var(--ink); font-size:15px; font-weight:700}

h2.sec{margin:26px 0 12px; font-size:16px; font-weight:800; color:var(--ink)}

.avg-row{display:flex; align-items:center; gap:6px; margin-bottom:6px}
.avg-star{color:#E8A33D; font-size:20px}
.avg{font-size:20px; font-weight:800; color:var(--ink); font-family:Poppins,sans-serif}
.avg-count{color:var(--muted); font-size:13.5px}

/* nav rows (app: accredRow) */
.nav-row{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left; text-decoration:none;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:14px 16px; cursor:pointer; font:inherit; margin-bottom:10px;
}
.nav-row:hover{border-color:#C9D3E2}
.nav-ico{font-size:19px; flex-shrink:0}
.nav-text{flex:1; min-width:0}
.nav-text strong{display:block; font-size:15px; font-weight:700; color:var(--ink)}
.nav-text small{display:block; font-size:12.5px; color:var(--muted); margin-top:1px}
.pill{font-size:11px; font-weight:800; padding:3px 9px; border-radius:9px; white-space:nowrap; flex-shrink:0}
.pill-green{background:var(--green-bg); color:var(--green)}
.pill-amber{background:#FFF4DB; color:#8A6400}
.pill-red{background:#FDE7E7; color:var(--red)}
.pill-blue{background:#EEF2FB; color:var(--blue)}

/* ghost buttons + sign out (app: ghostBtn / signout) */
.ghost-btn{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:14px; font:inherit; font-size:14.5px; font-weight:700; color:var(--ink); cursor:pointer;
}
.ghost-btn:hover{background:var(--grey-bg)}
.divider{height:1px; background:var(--line); margin:22px 0}
.signout{
  display:block; width:100%; margin-top:10px; background:none; border:0;
  padding:14px; font:inherit; font-size:14.5px; font-weight:700; color:var(--red); cursor:pointer;
}
.signout:hover{color:#C13236}

/* ---- subscription price card (app: freePill / price / trialLine) ---- */
.price-head{margin-bottom:10px}
.free-pill{
  display:inline-block; background:var(--green-bg); color:var(--green);
  font-size:10.5px; font-weight:800; letter-spacing:.4px;
  padding:4px 10px; border-radius:var(--r-pill);
}
.price-row{display:flex; align-items:baseline; gap:6px}
.price{font-family:Poppins,sans-serif; font-size:38px; font-weight:800; color:var(--ink); letter-spacing:-1px}
.per{color:var(--muted); font-size:14px}
.trial-line{color:var(--muted); font-size:13.5px; margin:8px 0 0}

/* ==================================================================
   NAV — top bar on desktop, bottom tab bar on mobile (like the app)
   ================================================================== */
.mainnav{display:flex; gap:4px; margin-left:24px}
.mainnav a{
  display:flex; align-items:center; gap:7px;
  color:var(--muted); text-decoration:none; font-size:13.5px; font-weight:600;
  padding:8px 12px; border-radius:var(--r-pill); white-space:nowrap; position:relative;
}
.mainnav a:hover{color:var(--ink); background:var(--grey-bg)}
.mainnav a.on{color:var(--ink); background:var(--grey-bg)}
.nav-ic{position:relative; display:flex}
.nav-dot{
  position:absolute; top:-1px; right:-2px; width:8px; height:8px; border-radius:50%;
  background:var(--accent); border:1.5px solid var(--surface);
}
.map{width:100%; aspect-ratio:1 / 1; max-width:560px; margin-inline:auto; height:auto}

/* ---------------- MOBILE: make it feel like the app ---------------- */
@media (max-width:760px){
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}

  /* Inputs at 16px so iOS Safari doesn't zoom in when you tap a field. */
  input,textarea,select,.row-right select{font-size:16px}

  /* header: just the logo and the bell, like the app. padding-top clears the
     notch / status bar when added to the home screen (needs viewport-fit=cover). */
  .topbar{position:sticky; top:0; z-index:60; padding-top:env(safe-area-inset-top)}
  .topbar-in{padding:8px 14px}
  .brand img{height:36px}
  .mainnav{
    position:fixed; left:0; right:0; bottom:0; z-index:70;
    margin:0; gap:0; background:var(--surface);
    border-top:1px solid var(--line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -1px 12px rgba(0,20,45,.06);
  }
  .mainnav a{
    flex:1; flex-direction:column; gap:3px; justify-content:center;
    padding:6px 2px; border-radius:10px; font-size:10.5px; font-weight:600;
    color:#9098A6;                       /* app's inactive tint */
  }
  .mainnav a:hover{background:none; color:#9098A6}
  .mainnav a.on{background:none; color:var(--ink)}   /* app's active tint */
  .nav-lbl{line-height:1}

  .who{margin-left:auto; gap:8px}
  .who-name, .tag{display:none}          /* the app doesn't show these either */
  .btn-ghost{display:none}               /* sign out lives on the Profile tab */

  .wrap{padding:16px 14px 28px}
  h1{font-size:21px}
  h2{font-size:16px}
  .card{padding:16px; border-radius:14px}
  .amount{font-size:18px}

  /* full-bleed square map — adapts to the screen, never lopsided */
  .map-card{aspect-ratio:4 / 3; border-radius:14px}
  .map{aspect-ratio:1 / 1; border-radius:14px}

  /* stack the header rows instead of squashing them */
  .head-row{flex-direction:column; align-items:stretch; gap:10px}
  .head-row .btn{margin-left:0; width:100%}
  .chat-head{flex-direction:column; align-items:stretch; gap:10px}
  .chat-head .btn{margin-left:0; text-align:center}
  .prof-head{gap:12px}
  .face-lg{width:60px; height:60px; font-size:22px}

  .btn-row{flex-direction:column; align-items:stretch}
  .btn-row .btn{width:100%}
  .doc{flex-wrap:wrap}
  .doc .btn, .doc-actions{margin-left:0; width:100%}
  .doc-actions .btn{flex:1}

  .chat-card{height:calc(100dvh - 330px - env(safe-area-inset-bottom)); min-height:300px}
  .quote-head{flex-wrap:wrap}
  .amount{margin-left:auto}
  .photo, .photo-add{width:84px; height:84px}
  .starpick .star{font-size:30px}
  .modal{border-radius:14px}
  .toast{left:14px; right:14px; bottom:calc(76px + env(safe-area-inset-bottom)); transform:none; text-align:center}
  @keyframes rise{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)}}
}

/* very small phones */
@media (max-width:360px){
  .mainnav a{font-size:9.5px}
  .wrap{padding:14px 12px 24px}
}

/* ---- password rules ---- */
.pw-rules{list-style:none; margin:10px 0 0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:5px}
.pw-rules li{font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:7px}
.pw-rules li.ok{color:var(--green)}
.tickbox{font-size:11px; width:12px}

/* ---- pipeline (stages are read-only now) ---- */
.stage-head{display:flex; align-items:center; gap:8px; margin:26px 0 4px}
.stage-head h2{margin:0}
.stage-count{
  font-size:11px; font-weight:800; padding:2px 8px; border-radius:var(--r-pill);
  background:var(--grey-bg); color:var(--muted);
}
.stage-count.stage-won{background:var(--green-bg); color:var(--green)}
.stage-count.stage-lost{background:var(--red-bg); color:var(--red)}
.stage-count.stage-quoted{background:var(--blue-bg); color:var(--blue)}
.stage-count.stage-cancelled{background:var(--grey-bg); color:var(--muted)}
.btn-link.danger{color:var(--red)}

/* ---- itemised quotes ---- */
.item-row{display:flex; gap:8px; align-items:center; margin-bottom:8px}
.item-desc{flex:1; min-width:0}
.item-amt-wrap{position:relative; width:130px; flex-shrink:0}
.item-r{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:14px}
.item-amt{padding-left:26px; text-align:right}
.item-x{
  width:30px; height:30px; flex-shrink:0; border:0; border-radius:50%;
  background:var(--grey-bg); color:var(--muted); font-size:17px; cursor:pointer; line-height:1;
}
.item-x:hover{background:var(--red-bg); color:var(--red)}
.item-x-gap{width:30px; flex-shrink:0}
.total-row{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:16px; padding-top:14px; border-top:2px solid var(--line);
}
.total-row span{color:var(--muted); font-size:13.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em}
.total-row strong{font-family:Poppins,sans-serif; font-size:24px; font-weight:800; color:var(--ink)}
.items-list{margin:12px 0 0; border-top:1px solid var(--line)}
.item-line{display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px solid var(--line); font-size:14px}
.item-line span:last-child{font-variant-numeric:tabular-nums; color:var(--ink); font-weight:600}
.item-line.item-total{border-bottom:0; font-weight:800; color:var(--ink); padding-top:12px}

/* ---- avatar pins on the map ---- */
.avatar-pin-wrap{background:none; border:0}
.property-pin-wrap{background:none; border:0}
.property-pin-wrap svg{filter:drop-shadow(0 2px 4px rgba(0,20,45,.35))}
.avatar-pin{
  width:40px; height:40px; border-radius:50%; overflow:hidden;
  border:3px solid #fff; background:var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:15px; font-family:Poppins,sans-serif;
  box-shadow:0 2px 8px rgba(0,20,45,.35);
}
.avatar-pin img{width:100%; height:100%; object-fit:cover; display:block}

/* ---- Airbnb-style split: list left, sticky map right ---- */
.split{display:block}
.split-map{margin-top:22px}
@media (min-width:980px){
  .split{display:grid; grid-template-columns:minmax(0,1fr) 420px; gap:28px; align-items:start}
  .split-list{min-width:0}
  .split-map{position:sticky; top:88px; margin-top:0}
  .split-map .map-card{max-width:none; aspect-ratio:3 / 4}
}

/* a job that has quietly stopped reaching tradies */
.row-warn{margin:4px 0 0; font-size:12.5px; font-weight:600; color:var(--red)}

/* ============ NATIVE FULL-SCREEN CHAT ============ */
/* A fixed overlay: pinned header, pinned composer, scrolling messages between.
   Paints over the tab bar so the composer is always reachable. */
.chat-screen{
  position:fixed; inset:0; z-index:150;
  display:flex; flex-direction:column;
  background:var(--bg);
}
.chat-bar{
  display:flex; align-items:center; gap:10px;
  padding:calc(8px + env(safe-area-inset-top)) 10px 8px;
  background:var(--surface); border-bottom:1px solid var(--line);
  flex-shrink:0;
}
.chat-back{
  background:none; border:0; color:var(--ink); cursor:pointer;
  padding:4px; margin:0; display:flex; align-items:center; flex-shrink:0; border-radius:8px;
}
.chat-back:hover{background:var(--grey-bg)}
.chat-avatar{
  width:40px; height:40px; border-radius:50%; object-fit:cover; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.chat-avatar-initial{
  background:var(--ink); color:#fff; font-weight:700; font-size:16px; font-family:Poppins,sans-serif;
}
.chat-who{flex:1; min-width:0}
.chat-name{margin:0; font-weight:700; font-size:16px; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.chat-status{margin:1px 0 0; font-size:12.5px; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.chat-call{
  flex-shrink:0; width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink); text-decoration:none;
}
.chat-call:hover{background:var(--grey-bg)}

/* the .chat-screen owns its own scroll region + composer, overriding the old card styles */
.chat-screen .stream{
  flex:1; overflow-y:auto; padding:16px;
  display:flex; flex-direction:column; gap:8px;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
}
.chat-empty{margin:auto; color:var(--muted); font-size:14px; text-align:center}
.day-divider{display:flex; justify-content:center; margin:8px 0}
.day-divider span{
  font-size:11.5px; font-weight:700; color:var(--muted);
  background:var(--grey-bg); padding:4px 12px; border-radius:var(--r-pill);
}
.chat-screen .composer{
  display:flex; align-items:flex-end; gap:8px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line); background:var(--surface); flex-shrink:0;
}
.chat-screen .composer textarea{
  flex:1; min-width:0; min-height:44px; max-height:120px;
  border-radius:22px; padding:11px 16px; resize:none;
}
.send-btn{
  flex-shrink:0; width:44px; height:44px; border-radius:50%; border:0; cursor:pointer;
  background:var(--accent); color:var(--accent-ink,#fff);
  display:flex; align-items:center; justify-content:center; padding:0;
}
.send-btn:disabled{opacity:.5}
.send-btn:hover:not(:disabled){filter:brightness(1.08)}
.chat-screen .attach{cursor:pointer; font-size:22px; padding:8px; line-height:1; flex-shrink:0; align-self:center}

/* Desktop: don't stretch the full-screen chat across a wide monitor — centre it */
@media (min-width:760px){
  .chat-bar, .chat-screen .stream, .chat-screen .composer{
    max-width:760px; margin-inline:auto; width:100%;
  }
}

/* ---- tradie profile: accreditations + work photos ---- */
.accreds{display:flex; flex-wrap:wrap; gap:8px}
.accred{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--grey-bg); color:var(--ink); font-size:13px; font-weight:600;
  padding:6px 12px; border-radius:var(--r-pill); border:1px solid var(--line);
}
.accred-tick{color:var(--green, #2E9B5B); font-weight:800}
.accred-pirb{background:#EAF3FF; border-color:#CFE3FB; color:#1D5FB8}
.work-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));
  gap:10px; margin-top:6px;
}
.work-photo{margin:0; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line); background:var(--grey-bg)}
.work-photo img{width:100%; aspect-ratio:1/1; object-fit:cover; display:block}
.work-photo figcaption{
  font-size:12px; color:var(--muted); padding:6px 8px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---- inline search typeahead ---- */
.search-wrap{position:relative; margin-bottom:16px; z-index:1000}
.search{margin-bottom:0}
.search input{
  flex:1; min-width:0; border:0; background:none; outline:none;
  font:inherit; font-size:15px; color:var(--ink); padding:0;
}
.search input::placeholder{color:#8A93A2}
.search-drop{
  position:absolute; left:0; right:0; top:calc(100% + 6px);
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 12px 32px rgba(0,20,45,.16); overflow:hidden; max-height:60vh; overflow-y:auto;
}
.drop-sec{font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted); padding:10px 14px 4px}
.drop-item{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:none; border:0; padding:9px 14px; cursor:pointer; font:inherit;
}
.drop-item:hover{background:var(--grey-bg)}
.drop-face{width:38px; height:38px; border-radius:50%; object-fit:cover; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; background:var(--grey-bg)}
.drop-initial{background:var(--ink); color:#fff; font-weight:700; font-size:15px}
.drop-svc{font-size:18px}
.drop-text{min-width:0; display:flex; flex-direction:column}
.drop-main{font-weight:700; color:var(--ink); font-size:14.5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.drop-sub{font-size:12.5px; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.drop-empty{padding:16px 14px; color:var(--muted); font-size:14px}

/* Option A: Title Case on UI chrome — headings, buttons, tab labels, form labels, chips.
   Deliberately NOT applied to names (.row-title/.used-name/.chat-name/.drop-main),
   sentences (.sub/.hint/.map-hint/.row-meta/.cta-text small), or already-uppercase eyebrows. */
h1, h2, .btn, label, .nav-lbl, .mainnav a, .cta-text strong, .chip { text-transform: capitalize; }
.profile-head h1 { text-transform: none; }   /* the tradie's name — leave exactly as entered */

/* ===== App-matching screens: Leads / Pipeline / Places ===== */
.scr-head{display:flex; align-items:center; justify-content:space-between; margin:0 0 14px}
.scr-title{font-size:22px; font-weight:800; color:var(--ink); letter-spacing:-.4px; margin:0}
.scr-actions{display:flex; align-items:center; gap:8px}
.pill-amber{background:#FFF3D6; color:#946200; font-weight:800; font-size:12px; padding:5px 11px; border-radius:999px; white-space:nowrap}
.icon-btn{width:38px; height:38px; border-radius:11px; border:1px solid var(--line); background:var(--surface); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink-soft); flex-shrink:0}
.add-btn{width:40px; height:40px; border-radius:12px; background:var(--accent); color:#fff; border:0; display:flex; align-items:center; justify-content:center; font-size:26px; cursor:pointer; line-height:1; flex-shrink:0}

/* Leads: "My area" bar */
.area-bar{display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:12px; margin-bottom:12px; cursor:pointer; font:inherit}
.area-bar .area-ic{color:var(--ink); flex-shrink:0}
.area-txt{flex:1; min-width:0}
.area-title{display:block; color:var(--ink); font-size:14px; font-weight:800}
.area-sub{display:block; color:var(--muted); font-size:12px; margin-top:1px}
.area-bar .chev{color:var(--muted)}

/* Centered empty state */
.empty-state{display:flex; flex-direction:column; align-items:center; text-align:center; padding:50px 20px}
.empty-state .empty-ic{color:var(--muted); margin-bottom:12px}
.empty-state h3{font-size:16px; font-weight:700; color:var(--ink); margin:0}
.empty-state p{color:var(--muted); margin:4px 0 0; font-size:13.5px}

/* Pipeline: stage pill tabs */
.stage-tabs{display:flex; gap:7px; overflow-x:auto; padding-bottom:2px; margin:0 0 16px; scrollbar-width:none}
.stage-tabs::-webkit-scrollbar{display:none}
.stage-tab{display:inline-flex; align-items:center; gap:7px; flex:0 0 auto; border:1px solid var(--line); background:var(--surface); border-radius:10px; padding:8px 12px; height:38px; cursor:pointer; font:inherit; color:var(--ink-soft); font-size:12.5px; font-weight:700}
.stage-tab.on{background:var(--ink); border-color:var(--ink); color:#fff}
.stage-tab .cnt{background:var(--grey-bg); color:var(--ink-soft); font-size:11px; font-weight:700; border-radius:999px; padding:1px 7px; min-width:18px; text-align:center}
.stage-tab.on .cnt{background:rgba(255,255,255,.2); color:#fff}

/* Places: property card */
.place-card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px; margin-bottom:14px; box-shadow:0 6px 12px rgba(20,24,31,.06)}
.place-row{display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:none; border:0; cursor:pointer; font:inherit}
.place-icon{width:46px; height:46px; border-radius:12px; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0}
.place-body{flex:1; min-width:0}
.place-name{display:block; font-weight:700; font-size:15px; color:var(--ink); margin:0}
.place-addr{display:block; color:var(--muted); font-size:12.5px; margin:2px 0 0}
.place-tag{background:var(--grey-bg); color:var(--muted); font-weight:700; font-size:11.5px; padding:3px 9px; border-radius:999px; flex-shrink:0; white-space:nowrap}
.place-strip{display:flex; gap:8px; margin-top:12px; overflow-x:auto; scrollbar-width:none}
.place-strip::-webkit-scrollbar{display:none}
.place-thumb{width:64px; height:64px; border-radius:10px; object-fit:cover; background:var(--grey-bg); flex-shrink:0}
.add-photo{width:64px; height:64px; border-radius:10px; border:1.5px dashed var(--line); background:var(--surface); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; cursor:pointer; flex-shrink:0; color:var(--muted)}
.add-photo span{font-size:9.5px; font-weight:600}

/* Work photos — manage grid on own profile (add/delete, cap 5) */
.work-manage .work-photo{position:relative}
.work-del{position:absolute; top:5px; right:5px; width:22px; height:22px; border-radius:50%;
  border:0; background:rgba(0,20,45,.65); color:#fff; font-size:12px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center}
.work-add{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  aspect-ratio:1/1; border:1.5px dashed var(--line); border-radius:var(--r-md); cursor:pointer;
  color:var(--muted); background:var(--surface)}
.work-add-plus{font-size:24px; line-height:1}
.work-add small{font-size:11px; font-weight:600}

/* ============ Native app feel (mobile web) ============ */
* { -webkit-tap-highlight-color: transparent; }
html, body { overscroll-behavior-y: none; }              /* no rubber-band / pull-to-refresh */
button, a, .btn, .row, .cta, .chip, .stage-tab, .area-bar, .place-row,
.nav-lbl, [data-go], [role="button"], .icon-btn, .add-btn, .work-add, .work-del {
  touch-action: manipulation;                            /* remove 300ms tap delay + double-tap zoom */
  -webkit-touch-callout: none;                           /* no long-press callout on controls */
}
/* UI chrome shouldn't be text-selectable like a web page (inputs & content stay selectable) */
.btn, .cta, .mainnav, .nav-lbl, .chip, .stage-tab, .chev, .brand, h1, h2,
.row-title, .row-right, .section-head, .pill-amber, .place-tag, .scr-title, .area-title {
  -webkit-user-select: none; user-select: none;
}
input, textarea, .bub, .row-meta, .place-addr, .msg, .hint, .sub { -webkit-user-select: text; user-select: text; }
/* Tactile press feedback */
.btn, .cta, .add-btn, .icon-btn, .row, .place-row, .stage-tab, .chip, .area-bar {
  transition: transform .08s ease, opacity .08s ease;
}
.btn:active, .cta:active, .add-btn:active, .icon-btn:active { transform: scale(.97); }
.row:active, .place-row:active, .stage-tab:active, .chip:active, .area-bar:active { opacity: .6; }
/* In standalone (Add to Home Screen) mode, feel a touch more app-like */
@media (display-mode: standalone) {
  body { -webkit-user-select: none; user-select: none; }
  input, textarea, .bub, .row-meta, .place-addr { -webkit-user-select: text; user-select: text; }
}

/* Onboarding back link (so signup steps are never a dead end) */
.auth-back{background:none; border:0; color:var(--muted); font-weight:600; font-size:13.5px;
  cursor:pointer; padding:0 0 12px; display:inline-flex; align-items:center; gap:3px}
.auth-back span{font-size:19px; line-height:1}
.auth-back:active{opacity:.6}

/* Lead row thumbnail (job photo) */
.lead-row{align-items:center}
.lead-thumb{width:52px; height:52px; border-radius:10px; object-fit:cover; background:var(--grey-bg);
  flex-shrink:0; margin-right:12px}

/* Service-area map: guarantee a sized container so Leaflet always renders */
#areaMap{min-height:240px}