/* Tampa Maids phone app — mobile-first shell with a bottom tab bar. */
:root{
  --teal:#0b6e8f;--teal-dark:#07506a;--teal-deep:#053b4e;--teal-50:#eef7fa;--teal-100:#d5ebf2;
  --amber:#f2a541;--amber-50:#fef6e9;--sand:#f7f3ec;
  --ink:#0d2028;--ink-2:#3c5560;--ink-3:#6c828c;
  --line:#e2e6e8;--bg:#f4f6f7;--card:#fff;
  --ok:#1a7f52;--ok-bg:#e7f5ee;--warn:#9a6412;--warn-bg:#fdf3e2;
  --bad:#a52f2f;--bad-bg:#fbebeb;
  --r:14px;--r-lg:20px;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Fraunces","Iowan Old Style",Georgia,serif;
  --tabh:64px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --ink:#eaf1f3;--ink-2:#b3c4cb;--ink-3:#8397a0;
    --line:#22343c;--bg:#0b1519;--card:#12212734;--card:#122127;
    --teal-50:#0f2b36;--teal-100:#123a48;--sand:#16232a;
    --ok-bg:#0f2b1f;--warn-bg:#2e2312;--bad-bg:#2e1616;
  }
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0;height:100%}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);font-size:16px;
  line-height:1.55;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none;
  -webkit-tap-highlight-color:transparent}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.015em;line-height:1.2;margin:0}
h1{font-size:1.7rem}h2{font-size:1.3rem}
h3{font-family:var(--sans);font-weight:650;font-size:1.02rem;letter-spacing:-.005em}
p{margin:0 0 .8em}
a{color:var(--teal);text-underline-offset:2px}
.muted{color:var(--ink-3)}
.small{font-size:.85rem}
.center{text-align:center}

/* ---- app frame ---- */
#app{max-width:560px;margin:0 auto;min-height:100%;background:var(--bg);
  padding-bottom:calc(var(--tabh) + var(--safe-b) + 12px);position:relative}
.appbar{position:sticky;top:0;z-index:20;background:var(--teal);color:#fff;
  padding:calc(var(--safe-t) + 14px) 18px 14px;display:flex;align-items:center;gap:12px;
  box-shadow:0 1px 0 rgba(0,0,0,.06)}
.appbar h1{font-size:1.22rem;color:#fff;flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.appbar .sub{font-size:.78rem;opacity:.85;font-family:var(--sans);font-weight:400;
  display:block;letter-spacing:0}
.appbar button{background:rgba(255,255,255,.16);border:0;color:#fff;border-radius:10px;
  width:38px;height:38px;display:grid;place-items:center;cursor:pointer;flex-shrink:0}
.appbar button:active{background:rgba(255,255,255,.3)}
.appbar svg{width:20px;height:20px}
.view{padding:18px 16px 8px;animation:in .22s ease}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---- tab bar ---- */
.tabbar{position:fixed;bottom:0;left:0;right:0;z-index:40;background:var(--card);
  border-top:1px solid var(--line);display:flex;
  padding-bottom:var(--safe-b);max-width:560px;margin:0 auto}
.tabbar button{flex:1;background:none;border:0;padding:9px 4px 7px;display:flex;
  flex-direction:column;align-items:center;gap:3px;cursor:pointer;color:var(--ink-3);
  font-size:.68rem;font-weight:600;letter-spacing:.01em;height:var(--tabh);
  justify-content:center;position:relative}
.tabbar button svg{width:23px;height:23px;stroke-width:1.8}
.tabbar button.on{color:var(--teal)}
.tabbar button.on::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:26px;height:3px;background:var(--teal);border-radius:0 0 3px 3px}
.tabbar .dot{position:absolute;top:8px;right:calc(50% - 20px);min-width:17px;height:17px;
  background:var(--amber);color:#40260a;border-radius:9px;font-size:.62rem;font-weight:800;
  display:grid;place-items:center;padding:0 4px}

/* ---- cards ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px;margin-bottom:14px}
.card.flush{padding:0;overflow:hidden}
.card h2{margin-bottom:.3em}
.row{display:flex;justify-content:space-between;gap:12px;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--line);font-size:.93rem}
.row:last-child{border-bottom:0}
.row .k{color:var(--ink-3);flex-shrink:0}
.row .v{font-weight:600;text-align:right;min-width:0;overflow-wrap:anywhere}

.hero-card{background:linear-gradient(150deg,var(--teal),var(--teal-deep));color:#fff;
  border:0;padding:24px}
.hero-card h2{color:#fff;font-size:1.5rem}
.hero-card p{color:rgba(255,255,255,.85);font-size:.93rem}

.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.stat .n{font-family:var(--display);font-size:1.7rem;font-weight:600;line-height:1.1}
.stat .l{font-size:.75rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;
  font-weight:650;margin-top:2px}
.stat.accent .n{color:var(--teal)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-weight:650;
  font-size:.97rem;padding:.82em 1.3em;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;transition:.15s;width:100%}
.btn:active{transform:scale(.985)}
.btn svg{width:17px;height:17px;flex-shrink:0;stroke-width:2}
.btn-primary{background:var(--teal);color:#fff}
.btn-accent{background:var(--amber);color:#40260a}
.btn-ghost{background:transparent;color:var(--teal);border-color:var(--line)}
.btn-danger{background:var(--bad-bg);color:var(--bad)}
.btn-sm{font-size:.87rem;padding:.6em 1em;width:auto}
.btn:disabled{opacity:.55}
.btn-row{display:flex;gap:9px}
.btn-row .btn{width:auto;flex:1}

/* ---- forms ---- */
label{display:block;font-size:.82rem;font-weight:650;margin-bottom:5px;color:var(--ink-2)}
input,select,textarea{width:100%;padding:.75em .85em;border:1.5px solid var(--line);
  border-radius:12px;background:var(--card);font-size:16px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(11,110,143,.15)}
textarea{min-height:88px;resize:vertical}
.field{margin-bottom:14px}
.field2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hint{font-size:.79rem;color:var(--ink-3);margin-top:4px}

/* ---- pills / alerts ---- */
.pill{display:inline-block;font-size:.68rem;font-weight:750;letter-spacing:.04em;
  text-transform:uppercase;padding:.28em .7em;border-radius:999px;white-space:nowrap}
.pill-ok{background:var(--ok-bg);color:var(--ok)}
.pill-info{background:var(--teal-50);color:var(--teal)}
.pill-warn{background:var(--warn-bg);color:var(--warn)}
.pill-bad{background:var(--bad-bg);color:var(--bad)}
.pill-grey{background:var(--line);color:var(--ink-3)}
.alert{padding:12px 14px;border-radius:12px;font-size:.88rem;margin-bottom:12px;
  display:flex;gap:9px;align-items:flex-start}
.alert svg{width:18px;height:18px;flex-shrink:0;margin-top:2px}
.alert-bad{background:var(--bad-bg);color:var(--bad)}
.alert-ok{background:var(--ok-bg);color:var(--ok)}
.alert-info{background:var(--teal-50);color:var(--teal-dark)}
.alert-warn{background:var(--warn-bg);color:var(--warn)}

/* ---- job list ---- */
.job{display:block;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:15px;margin-bottom:10px;cursor:pointer}
.job:active{background:var(--teal-50)}
.job-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;
  margin-bottom:6px}
.job-title{font-weight:660;font-size:1rem;line-height:1.3}
.job-meta{font-size:.85rem;color:var(--ink-3)}
.job-when{font-size:.85rem;color:var(--teal);font-weight:640;margin-top:5px;
  display:flex;align-items:center;gap:6px}
.job-when svg{width:15px;height:15px}
.progress{height:5px;background:var(--line);border-radius:3px;overflow:hidden;margin-top:10px}
.progress i{display:block;height:100%;background:var(--teal);border-radius:3px;transition:.3s}

/* ---- checklist ---- */
.area-h{font-size:.72rem;font-weight:750;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);margin:18px 0 7px;padding-left:2px}
.task{display:flex;gap:11px;align-items:flex-start;padding:11px 13px;background:var(--card);
  border:1px solid var(--line);border-radius:12px;margin-bottom:6px;cursor:pointer;
  font-size:.92rem;line-height:1.4;transition:.14s}
.task:active{background:var(--teal-50)}
.task .box{width:22px;height:22px;border:2px solid var(--line);border-radius:7px;flex-shrink:0;
  display:grid;place-items:center;margin-top:1px;transition:.14s}
.task.done{background:var(--ok-bg);border-color:transparent}
.task.done .box{background:var(--ok);border-color:var(--ok)}
.task.done .box svg{width:13px;height:13px;stroke:#fff;stroke-width:3.5}
.task.done span{text-decoration:line-through;color:var(--ink-3)}
.task .box svg{display:none}
.task.done .box svg{display:block}

/* ---- misc ---- */
.sheet{position:fixed;inset:0;z-index:60;background:rgba(8,20,26,.55);display:none;
  align-items:flex-end;backdrop-filter:blur(2px)}
.sheet.open{display:flex}
.sheet-body{background:var(--bg);width:100%;max-width:560px;margin:0 auto;
  border-radius:22px 22px 0 0;max-height:92vh;overflow-y:auto;
  padding:8px 16px calc(20px + var(--safe-b));animation:up .26s cubic-bezier(.2,.8,.3,1)}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
.grabber{width:38px;height:4px;background:var(--line);border-radius:2px;margin:8px auto 14px}
.sheet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  margin-bottom:14px}
.spinner{width:16px;height:16px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;
  border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.loading{padding:44px 0;text-align:center;color:var(--ink-3)}
.empty{padding:44px 20px;text-align:center;color:var(--ink-3)}
.empty svg{width:44px;height:44px;margin:0 auto 14px;opacity:.4}
.seg{display:flex;background:var(--line);border-radius:11px;padding:3px;margin-bottom:16px}
.seg button{flex:1;background:none;border:0;padding:.55em;border-radius:9px;font-size:.87rem;
  font-weight:640;color:var(--ink-3);cursor:pointer}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.09)}
.install-bar{background:var(--amber-50);border:1px solid #f0dcb4;border-radius:var(--r);
  padding:13px 15px;margin-bottom:14px;display:flex;gap:11px;align-items:center;font-size:.87rem}
.install-bar svg{width:22px;height:22px;color:var(--amber);flex-shrink:0}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition:none!important}}