/* The Golden Hands — brand deep green with warm gold; Bricolage Grotesque headings, Figtree body */
:root{
  --bg:#f6f3ec; --paper:#ffffff; --ink:#1c2a23; --muted:#5c6a62; --line:#e3ddd0; --soft:#eef3ef;
  --green:#0f3c26; --green-2:#1d5a3b; --on-green:#ffffff; --on-green-muted:#b9d0c2;
  --gold:#f5bb2e; --gold-ink:#1c2a23; --gold-deep:#2f6b4b; --gold-tint:#e3eee6; --gold-shadow:#c0820f;
  --gold-grad:linear-gradient(160deg,#ffe48f 0%,#f5bb2e 50%,#e09a1a 100%);
  --ok:#2f7a55; --ok-tint:#e1f0e8; --warn:#9a5a12; --warn-tint:#fbeedb; --bad:#a33a22; --bad-tint:#f6eadf;
  --display:"Bricolage Grotesque","Figtree",system-ui,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Figtree",system-ui,sans-serif;
  --radius:18px; --shadow:0 2px 10px rgb(15 60 38 / .07); --field:#ffffff;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0b120e; --paper:#1d2c24; --ink:#f5f8f5; --muted:#c4d2c9; --line:#466052; --soft:#2b3f34;
  --green:#14432d; --green-2:#1f5a3d; --on-green:#ffffff; --on-green-muted:#cfe2d6;
  --gold:#f7c548; --gold-ink:#1a1408; --gold-deep:#b5e3c7; --gold-tint:#24402f; --gold-shadow:#b5790f;
  --gold-grad:linear-gradient(160deg,#ffe69a 0%,#f7c548 50%,#e3a024 100%);
  --ok:#7fdcab; --ok-tint:#1d3a2b; --warn:#f3b878; --warn-tint:#3d2e1c; --bad:#ff9d8f; --bad-tint:#45231f;
  --field:#122019;
  --shadow:0 0 0 1px rgb(255 255 255 / .04), 0 4px 14px rgb(0 0 0 / .45); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0b120e; --paper:#1d2c24; --ink:#f5f8f5; --muted:#c4d2c9; --line:#466052; --soft:#2b3f34;
  --green:#14432d; --green-2:#1f5a3d; --on-green:#ffffff; --on-green-muted:#cfe2d6;
  --gold:#f7c548; --gold-ink:#1a1408; --gold-deep:#b5e3c7; --gold-tint:#24402f; --gold-shadow:#b5790f;
  --gold-grad:linear-gradient(160deg,#ffe69a 0%,#f7c548 50%,#e3a024 100%);
  --ok:#7fdcab; --ok-tint:#1d3a2b; --warn:#f3b878; --warn-tint:#3d2e1c; --bad:#ff9d8f; --bad-tint:#45231f;
  --field:#122019;
  --shadow:0 0 0 1px rgb(255 255 255 / .04), 0 4px 14px rgb(0 0 0 / .45); color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--body);
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.boot{padding:40px;text-align:center;color:var(--muted)}
a{color:var(--green-2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) a{color:var(--gold-deep)}}
:root[data-theme="dark"] a{color:var(--gold-deep)}
h1,h2,h3{margin:0;text-wrap:balance}
.gutter{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* Header: deep green band with the logo centered */
.top{position:sticky;top:0;z-index:5;background:var(--green);color:var(--on-green)}
.top .topbar{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding-block:12px 4px}
.brand{grid-column:2;display:flex;justify-content:center}
.brand img{height:56px;width:auto;display:block}
@media (max-width:420px){.brand img{height:48px}}
.top .who{grid-column:3;justify-self:end;display:flex;align-items:center;gap:8px;min-width:0}
.top .who .me{font-size:12.5px;line-height:1.25;text-align:right;color:var(--on-green-muted);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top .who .me b{display:block;color:var(--on-green);font-weight:600;overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){.top .who .me{display:none}}
.top button.link{background:transparent;border:1.5px solid rgb(255 255 255 / .45);border-radius:999px;color:var(--on-green);font:600 12.5px var(--body);padding:7px 12px;cursor:pointer;white-space:nowrap}
.top button.link:hover{border-color:var(--gold)}
nav.tabs{max-width:1120px;margin:0 auto;display:flex;justify-content:center;gap:4px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs button{background:none;border:0;border-bottom:3px solid transparent;color:var(--on-green-muted);font:600 15px var(--body);padding:10px 12px 8px;cursor:pointer;white-space:nowrap}
nav.tabs button[aria-current="page"]{color:var(--on-green);border-bottom-color:var(--gold)}
nav.tabs button:hover{color:var(--on-green)}

main{max-width:1120px;margin:0 auto;padding-block:18px 48px;display:grid;gap:16px}
.demo-bar{background:var(--gold-tint);color:var(--ink);font-size:13px;border-radius:12px;padding:8px 12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* Member home greeting */
.hero{background:var(--green);color:var(--on-green);border-radius:var(--radius);padding:20px 20px 22px}
.hero .eyebrow{margin:0;font-size:13px;font-weight:600;color:var(--gold)}
.hero h1{margin:6px 0 0;font-family:var(--display);font-size:clamp(30px,6vw,40px);font-weight:800;line-height:1.05;letter-spacing:-.01em}

/* Building blocks */
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.grid21{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:820px){.grid2,.grid21{grid-template-columns:minmax(0,1fr)}}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:16px;display:grid;gap:12px;min-width:0;align-content:start;box-shadow:var(--shadow)}
.card>h2,.section-h{font-family:var(--display);font-size:18px;font-weight:700;color:var(--green-2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .card>h2,:root:not([data-theme="light"]) .section-h{color:var(--ink)}}
:root[data-theme="dark"] .card>h2,:root[data-theme="dark"] .section-h{color:var(--ink)}
.page-h{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;justify-content:space-between}
.page-h h1{font-family:var(--display);font-size:30px;font-weight:800;line-height:1.05;letter-spacing:-.01em}
.muted{color:var(--muted)} .small{font-size:12.5px}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.spacer{flex:1}
.stack{display:grid;gap:10px}

label.f{display:grid;gap:4px;font-size:12.5px;font-weight:600;color:var(--muted);min-width:0}
input,select,textarea{font:inherit;font-size:15px;color:var(--ink);background:var(--field);border:1px solid var(--line);border-radius:12px;padding:10px 12px;width:100%;min-width:0}
textarea{min-height:84px;resize:vertical}
input[type=checkbox]{width:20px;height:20px;flex:none;padding:0;margin:2px 0 0;accent-color:var(--green-2);cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.form-grid .full{grid-column:1/-1}
@media (max-width:520px){.form-grid{grid-template-columns:minmax(0,1fr)}}

.btn{font:inherit;font-weight:700;font-size:14px;border-radius:12px;padding:10px 16px;cursor:pointer;border:1px solid var(--green);background:var(--paper);color:var(--green);white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;gap:6px;justify-content:center;min-height:42px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn{background:var(--soft);border-color:var(--line);color:var(--ink)}}
:root[data-theme="dark"] .btn{background:var(--soft);border-color:var(--line);color:var(--ink)}
.btn.primary{background:var(--gold-grad);border-color:var(--gold);color:var(--gold-ink);box-shadow:0 3px 0 var(--gold-shadow)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn.primary{background:var(--gold-grad)}}
:root[data-theme="dark"] .btn.primary{background:var(--gold-grad)}
:root .btn.primary,:root[data-theme] .btn.primary{color:var(--gold-ink);border-color:var(--gold)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn.primary{color:var(--gold-ink);border-color:var(--gold)}}
.btn.primary:active{transform:translateY(2px);box-shadow:0 1px 0 var(--gold-shadow)}
.btn.ghost{border-color:var(--line);background:var(--soft);color:var(--ink)}
.btn.sm{padding:5px 11px;font-size:13px;min-height:34px;border-radius:10px}
.btn:disabled{opacity:.5;cursor:default}
.btn.wide{width:100%}

.chip{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:3px 9px;background:var(--soft);color:var(--muted);white-space:nowrap}
.chip.gold{background:var(--gold-tint);color:var(--gold-deep)}
.chip.ok{background:var(--ok-tint);color:var(--ok)}
.chip.warn{background:var(--warn-tint);color:var(--warn)}
.chip.bad{background:var(--bad-tint);color:var(--bad)}

.list{display:grid}
.item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:12px 0;border-top:1px solid var(--line);align-items:start}
.item:first-child{border-top:0;padding-top:0}
.item .t{font-weight:700}
.item .sub{grid-column:1/-1;color:var(--muted);font-size:13px}
.item .full{grid-column:1/-1}
.n{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;text-align:right;white-space:nowrap}
.empty{color:var(--muted);font-size:14px}

.banner{border-radius:var(--radius);padding:12px 14px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.banner.warn{background:var(--warn-tint)} .banner.bad{background:var(--bad-tint)} .banner.gold{background:var(--gold-tint)}

/* Plan card */
.plan{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center}
@media (max-width:400px){.plan{grid-template-columns:minmax(0,1fr);justify-items:start}}
.gauge{width:128px;height:128px}
.tier{font-family:var(--display);font-size:30px;font-weight:800;line-height:1;color:var(--green-2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tier{color:var(--ink)}}
:root[data-theme="dark"] .tier{color:var(--ink)}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;font-size:13.5px;margin:0}
.kv dt{color:var(--muted)} .kv dd{margin:0;font-weight:600}

.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:640px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)}
.stat b{display:block;font-family:var(--display);font-size:30px;line-height:1.1;font-weight:800;color:var(--green-2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .stat b{color:var(--ink)}}
:root[data-theme="dark"] .stat b{color:var(--ink)}
.stat span{font-size:12.5px;color:var(--muted)}

.bar{height:8px;background:var(--soft);border-radius:4px;overflow:hidden;min-width:70px;flex:1}
.bar i{display:block;height:100%;background:var(--gold-grad)}
.bar i.over{background:var(--bad)}

.tablewrap{overflow-x:auto;margin-inline:-4px}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;min-width:640px}
th{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;text-align:left;padding:6px 8px;border-bottom:2px solid var(--line)}
td{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
tr.click{cursor:pointer} tr.click:hover td{background:var(--soft)}

.photos{display:flex;gap:6px;flex-wrap:wrap;grid-column:1/-1}
.photos img{width:76px;height:76px;object-fit:cover;border-radius:12px;border:1px solid var(--line);background:var(--soft)}
.inline-form{grid-column:1/-1;background:var(--soft);border-radius:14px;padding:12px;display:grid;gap:10px}
.lines{grid-column:1/-1;font-size:13px;color:var(--muted);display:grid;gap:2px}
.lines div{display:flex;justify-content:space-between;gap:10px}

/* Sign in */
.signin-band{background:var(--green);padding-block:40px 70px}
.signin-band img{display:block;margin:0 auto;height:84px;width:auto;max-width:100%}
.signin-band p{text-align:center;color:var(--on-green);font-family:var(--display);font-size:26px;font-weight:800;margin:18px 0 0}
.signin{max-width:420px;margin:-44px auto 0;display:grid;gap:16px}

#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));background:var(--green);color:var(--on-green);padding:10px 16px;border-radius:12px;font-size:14px;max-width:calc(100% - 32px);z-index:20;box-shadow:0 4px 20px rgb(0 0 0 / .2)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Tab icons; on phones the tabs become a bottom bar like a native app */
nav.tabs button{display:inline-flex;align-items:center;gap:7px}
nav.tabs button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:700px){
  nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:6;margin:0;max-width:none;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;
    background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -4px 16px rgb(15 60 38 / .08);
    padding:6px max(8px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))}
  nav.tabs button{flex-direction:column;gap:2px;border:0;border-radius:12px;padding:8px 4px;font-size:12px;color:var(--muted)}
  nav.tabs button svg{width:22px;height:22px}
  nav.tabs button[aria-current="page"]{color:var(--green-2);background:var(--soft)}
  main{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .top .topbar{padding-block:10px}
}
@media (max-width:700px) and (prefers-color-scheme:dark){:root:not([data-theme="light"]) nav.tabs button[aria-current="page"]{color:var(--gold)}
  :root:not([data-theme="light"]) nav.tabs{background:#16241c;border-top-color:var(--line)}}
:root[data-theme="dark"] nav.tabs button[aria-current="page"]{color:var(--on-green)}
.tip-done{color:var(--gold-deep);font-weight:600;font-size:14px}
.tip-form{margin-top:8px}

/* Dark mode: stronger edges and readable placeholder text */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) ::placeholder{color:#8fa597;opacity:1}
  :root:not([data-theme="light"]) .item+.item{border-color:var(--line)}}
:root[data-theme="dark"] ::placeholder{color:#8fa597;opacity:1}

/* Booking calendar */
.book{display:grid;gap:10px}
.book .days{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;scroll-snap-type:x proximity;scrollbar-width:thin}
.book .day{flex:none;scroll-snap-align:start;width:62px;display:grid;justify-items:center;gap:0;padding:8px 0;border-radius:14px;border:1.5px solid var(--line);background:var(--field);color:var(--ink);font:600 12px var(--body);cursor:pointer}
.book .day b{font:800 22px/1.1 var(--display)}
.book .day span{color:var(--muted)}
.book .day.on{background:var(--green);border-color:var(--green);color:var(--on-green)}
.book .day.on span{color:var(--on-green-muted)}
.book .day:disabled{opacity:.4;cursor:not-allowed}
.book .slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.book .slot{min-height:44px;border-radius:12px;border:1.5px solid var(--line);background:var(--field);color:var(--ink);font:700 14px var(--body);cursor:pointer}
.book .slot.on{background:var(--gold-grad);border-color:var(--gold);color:var(--gold-ink)}
.book .slot:disabled{opacity:.45;cursor:not-allowed;text-decoration:line-through}
.book .pick{margin:0;font-size:14px;color:var(--ink)}
.book .note{margin:0;font-size:13px;color:var(--ink);background:var(--gold-tint);border-radius:10px;padding:8px 10px}
.asked{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;background:var(--gold-tint);border-radius:12px;padding:8px 10px;font-size:14px}
.item .time{display:inline-block;font-size:12px;font-weight:700;background:var(--gold-tint);color:var(--gold-deep);border-radius:999px;padding:1px 8px;margin-right:4px}
.f>span{font-size:12.5px;font-weight:600;color:var(--muted)}
@media (max-width:700px){#toast{bottom:calc(92px + env(safe-area-inset-bottom,0px))}}

/* Sign-off pop-up */
body.modal-open{overflow:hidden}
.modal{position:fixed;inset:0;z-index:30;background:rgb(0 0 0 / .55);display:flex;align-items:flex-end;justify-content:center;padding:16px}
@media (min-width:701px){.modal{align-items:center}}
.modal .sheet{background:var(--paper);color:var(--ink);border-radius:22px;padding:20px;width:100%;max-width:460px;max-height:calc(100dvh - 32px);overflow:auto;display:grid;gap:12px;box-shadow:0 20px 50px rgb(0 0 0 / .35);padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
.modal h2{font-family:var(--display);font-size:24px;font-weight:800;line-height:1.1}
.modal .photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.modal .photos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px}
.btn.wide{width:100%}
.link-btn{background:none;border:0;color:var(--muted);font:600 14px var(--body);padding:8px;cursor:pointer;text-decoration:underline}

/* Clock in / out and receipts */
.card.clock{border:2px solid var(--gold)}
.card.clock.on{background:var(--gold-tint)}
.timer{font:800 28px/1 var(--display);color:var(--ink);letter-spacing:.02em}
.receipts{display:grid;gap:8px}
.rcpt{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:10px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:8px}
.rcpt img{width:64px;height:64px;object-fit:cover;border-radius:8px;background:var(--soft)}
label.upload{cursor:pointer}
.banner.ok{background:var(--ok-tint)}
/* Office scheduling row: roomy fields so the chosen date is always visible (iPhone collapses narrow date boxes) */
.sched{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sched .full{grid-column:1/-1}
input[type=date]{-webkit-appearance:none;appearance:none;min-height:46px;display:block;width:100%;text-align:left}
input[type=date]::-webkit-date-and-time-value{text-align:left}
.picked{margin:0;font-size:14px;font-weight:700;color:var(--ink)}
.modal .sheet{position:relative}
.modal .x{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;border:0;background:var(--soft);color:var(--ink);font-size:16px;cursor:pointer}
.modal h2{padding-right:40px}

/* "Request sent" celebration: hammer taps the nail home */
.celebrate{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:24px;background:rgb(0 0 0 / .35);animation:cel-in .2s ease-out;transition:opacity .4s}
.celebrate.out{opacity:0}
.cel-card{background:var(--paper);color:var(--ink);border-radius:24px;padding:22px 24px 24px;max-width:340px;width:100%;text-align:center;box-shadow:0 20px 50px rgb(0 0 0 / .3);animation:cel-pop .35s cubic-bezier(.2,1.4,.4,1)}
.cel-card h2{font:800 26px/1.1 var(--display);margin:6px 0 6px;color:var(--ink)}
.cel-card p{margin:0;color:var(--muted);font-size:15px}
.cel-art{width:170px;height:128px;display:block;margin:0 auto}
.cel-nail{animation:cel-nail 1.5s ease-in forwards}
.cel-nail,.cel-hammer,.cel-drop,.cel-spark{transform-box:view-box} /* Safari: pivot in drawing coordinates */
.cel-hammer{transform-origin:148px 50px;-webkit-transform-origin:148px 50px;animation:cel-swing .5s ease-in 3 both}
.cel-drop{animation:cel-nail 1.5s ease-in forwards}
.cel-spark{stroke:var(--gold);stroke-width:4;stroke-linecap:round;fill:none;opacity:0;animation:cel-spark .5s ease-out 3}
@keyframes cel-swing{0%{transform:rotate(40deg)}70%{transform:rotate(0)}78%{transform:rotate(3deg)}100%{transform:rotate(40deg)}}
@keyframes cel-nail{0%,23%{transform:translateY(0)}25%,56%{transform:translateY(6px)}58%,90%{transform:translateY(12px)}92%,100%{transform:translateY(17px)}}
@keyframes cel-spark{0%,65%{opacity:0;transform:scale(.6)}75%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.15)}}
@keyframes cel-pop{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
@keyframes cel-in{from{opacity:0}}
.cel-spark{transform-origin:80px 54px}
/* Reduce Motion (common on iPhones): skip the pop-in, but keep the small hammer tap so it still reads as "done". */
@media (prefers-reduced-motion:reduce){.celebrate,.celebrate .cel-card{animation:none!important}
  .celebrate .cel-hammer{animation:cel-swing .5s ease-in 3 both!important}
  .celebrate .cel-nail,.celebrate .cel-drop{animation:cel-nail 1.5s ease-in forwards!important}
  .celebrate .cel-spark{animation:cel-spark .5s ease-out 3!important}}

/* Headshots */
.avatar{border-radius:50%;object-fit:cover;flex:none;display:inline-flex;align-items:center;justify-content:center;background:var(--gold-tint);color:var(--gold-deep);font-weight:800;box-shadow:0 0 0 1px rgb(0 0 0 / .08)}
.avatar-edit{cursor:pointer;display:inline-flex;position:relative}
.avatar-edit::after{content:"📷";position:absolute;right:-4px;bottom:-4px;font-size:13px;background:var(--paper);border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgb(0 0 0 / .25)}
.me-card{display:flex;align-items:center;gap:14px}
.tech-row{display:flex;align-items:center;gap:12px;padding-top:4px}
.hero .with-face{display:flex;align-items:center;gap:12px}
.hero .avatar{box-shadow:0 0 0 1px rgb(255 255 255 / .18)}
.so-face{display:flex;align-items:center;gap:14px;padding-right:20px}
.so-face h2{padding-right:0}
a.addr{white-space:normal}
.btn.danger{border-color:var(--bad);color:var(--bad)}

/* Sign-up and plans */
.join-cta{text-align:left}
.plan-pick{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;border:1.5px solid var(--line);border-radius:14px;padding:12px;cursor:pointer;background:var(--field)}
.plan-pick:has(input:checked){border-color:var(--gold);box-shadow:0 0 0 2px var(--gold) inset}
.plan-pick input{margin-top:4px;accent-color:var(--green-2)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.upsell{background:var(--gold-tint);border-radius:14px;padding:12px;display:grid;gap:10px}
.upsell .plans{display:grid;gap:8px}
.plan-mini{background:var(--paper);border-radius:12px;padding:10px;display:grid;gap:4px}
.plan-mini .btn{justify-self:start;margin-top:4px}

/* AI job brief on the tech's job cards */
.brief{grid-column:1/-1;background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:grid;gap:8px;margin-top:4px}
.brief:empty{display:none}
.brief .brief-load{margin:0}
.brief-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.brief-h .link-btn{margin-left:auto}
.brief-sum{margin:0;font-weight:600;line-height:1.4}
.brief-sec{display:grid;gap:4px}
.brief-sec>b{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.brief-sec ul{margin:0;padding-left:20px;display:grid;gap:3px;line-height:1.4}
.brief-sec.heads{background:var(--warn-tint);border-radius:10px;padding:8px 10px}
.brief-sec.heads>b{color:var(--warn)}
.brief-chips{display:flex;flex-wrap:wrap;gap:6px}
.brief-orig summary{cursor:pointer;color:var(--muted);font-size:14px}
.brief-orig p{margin:6px 0 0;font-size:14px;white-space:pre-wrap}
.brief-chips .chip{text-transform:none;letter-spacing:0;font-weight:600;font-size:13px}

/* member pop-ups: extra hours, seasonal check-in */
.quote { font-style: italic; border-left: 3px solid var(--gold, #f5bb2e); padding-left: 10px; }
.checklist { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.checklist li::marker { color: var(--gold, #f5bb2e); }

/* owner dashboard */
.bars{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;align-items:end}
.bar-col{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.bar-track{height:140px;width:100%;max-width:44px;display:flex;align-items:flex-end}
.dbar{width:100%;background:var(--gold-deep);border-radius:6px 6px 2px 2px;opacity:.55}
.dbar.now{background:var(--gold);opacity:1}
.bar-v{font-size:11px;color:var(--muted);white-space:nowrap}
.bar-l{font-size:12px;color:var(--muted)}
.stat .up{color:var(--ok, #2f6b4b);font-weight:700}.stat .down{color:var(--bad, #b3261e);font-weight:700}

/* photos on a service request */
.rq-thumbs{display:flex;flex-wrap:wrap;gap:8px}
.rq-thumbs:empty{display:none}
.rq-thumb{position:relative;width:76px;height:76px}
.rq-thumb img{width:100%;height:100%;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
.rq-x{position:absolute;top:-6px;right:-6px;width:26px;height:26px;border-radius:50%;border:0;background:var(--ink);color:var(--paper);font-size:13px;line-height:26px;padding:0;cursor:pointer}
a.rph{display:block;line-height:0}

/* referral link */
.ref-link input{width:100%;font-size:14px;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:10px 12px;color:var(--ink)}

#ref-card{scroll-margin-top:90px}

/* service area map (Settings, owner only) */
.area-map{height:360px;border-radius:14px;border:1px solid var(--line);overflow:hidden;background:var(--soft);z-index:0}
.area-pt{background:#fff;border:3px solid #2f6b4b;border-radius:50%;box-shadow:0 1px 4px rgb(0 0 0 / .3)}