/* ===== New look (2026-11-07): design E made to feel like a native phone app. Loaded after theme-e.css. ===== */
:root{
  --bg:#f2f3f0; --paper:#ffffff; --fg:#141614; --muted:#5d635f; --faint:#8f9590; --line:#e3e5e0; --line2:#d3d6d0;
  --fill:#eceee9; --accent:#1f6b52; --accent-ink:#ffffff; --accent-soft:#e3f1ea; --warn:#c2570c; --warn-soft:#fcefe4;
  --lock:#eceee9; --ok:var(--accent); --ok-soft:var(--accent-soft); --r:18px; --r2:12px;
  --sans:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"Geist Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0f1110; --paper:#1a1c1b; --fg:#eceeeb; --muted:#a3a9a5; --faint:#727873; --line:#2a2d2b; --line2:#363a37;
  --fill:#242725; --accent:#5cc79d; --accent-ink:#06140e; --accent-soft:#17291f; --warn:#f0965a; --warn-soft:#2e1d10; --lock:#242725; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f1110; --paper:#1a1c1b; --fg:#eceeeb; --muted:#a3a9a5; --faint:#727873; --line:#2a2d2b; --line2:#363a37;
  --fill:#242725; --accent:#5cc79d; --accent-ink:#06140e; --accent-soft:#17291f; --warn:#f0965a; --warn-soft:#2e1d10; --lock:#242725; color-scheme:dark}

html{-webkit-text-size-adjust:100%}
body{background:var(--bg);font-size:16px;line-height:1.45;padding-block:0 calc(110px + env(safe-area-inset-bottom,0px));-webkit-tap-highlight-color:transparent}
.wrap{gap:14px;max-width:620px}
button,label,a{touch-action:manipulation}
@media (hover:none){*:hover{transition:none}}

/* top bar: quiet, translucent */
.topbar{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
  border-bottom:1px solid transparent;padding-block:calc(10px + env(safe-area-inset-top,0px)) 10px;top:0}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:19}
.topbar .logo{border-radius:9px;width:30px;height:30px;background:var(--accent);color:var(--accent-ink);font-weight:600}
.topbar b{font-size:17px;font-weight:600;color:var(--fg);letter-spacing:-.01em}

/* titles */
h1{font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.12;margin:6px 0 2px}
.sub{font-size:14px;color:var(--muted)}
.back{font-size:16px;color:var(--accent);font-weight:500;padding:6px 0;margin:0}
.dprog{display:flex;gap:4px;margin-top:12px}
.dprog i{flex:1;height:5px;border-radius:9px;background:var(--fill);transition:background .25s}
.dprog i.on{background:var(--accent)}

/* cards: filled surfaces, no hairline borders */
.visit,.todo,.robanner{border:0!important;border-radius:var(--r);background:var(--paper)}
.visit{padding:16px;gap:12px}
#visits>.visit{padding:0;gap:0;overflow:hidden}
#visits>.visit>.vtop{padding:16px 16px 12px;border-bottom:0}
#visits>.visit>*:not(.vtop){margin-inline:0}
.vhead{font-size:17px;font-weight:600;letter-spacing:-.015em}
.vwin{margin-top:2px;font-size:14px;font-weight:600;color:var(--accent)}
.vaddr{font-size:14px;color:var(--muted);font-family:var(--sans)}
.vaddr a{color:var(--accent);text-decoration:none;font-weight:500}

/* visit buttons: big, labelled-looking chips */
.vtop>.vbtns{gap:8px}
.pbtn,.pbtn.ib{width:40px;height:40px;border-radius:var(--r2);border:0;background:var(--fill);color:var(--fg)}
.pbtn.ib svg{width:20px;height:20px}
.pbtn.has{background:var(--accent-soft);color:var(--accent)}
.pbtn:hover{background:var(--fill)}
.cnt{background:var(--accent);color:var(--accent-ink);box-shadow:0 0 0 2px var(--paper)}
.gallery{margin:0 16px 12px!important;border:0;border-radius:var(--r2);background:var(--fill);padding:12px}
.thumbs img{border-radius:10px}

/* zones and items */
.zone{font-size:12px;font-weight:600;letter-spacing:.07em;color:var(--faint);margin:6px 0 0;padding:10px 16px 4px}
.zone::after{display:none}
ul.items{padding:0}
li.item{border-top:0!important;padding:0;margin:0!important;border-radius:0!important;position:relative;background:none!important}
li.item+li.item::before{content:"";position:absolute;left:56px;right:0;top:0;height:1px;background:var(--line)}
.row{gap:12px;align-items:center;padding:6px 10px 6px 16px!important;min-height:56px;background:none!important;border-radius:0}
.row:active{background:var(--fill)!important}
.row label{font-size:16px;line-height:1.35;font-weight:400;padding:8px 0;cursor:pointer}
.row input[type=checkbox]{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:0;border:2px solid var(--line2);border-radius:6px;background:transparent;
  display:grid;place-content:center;cursor:pointer;flex:none;transition:background .18s,border-color .18s,transform .2s cubic-bezier(.3,1.6,.5,1)}
.row input[type=checkbox]::before{content:"";width:11px;height:11px;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);background:var(--accent-ink);transform:scale(0);transition:transform .18s .04s}
.row input[type=checkbox]::after{content:none}
.row input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent);transform:scale(1.06)}
.row input[type=checkbox]:checked::before{transform:scale(1)}
.row input[type=checkbox]:active{transform:scale(.9)}
li.item.done label{color:var(--muted)}
li.item.need .row{box-shadow:inset 3px 0 0 var(--warn)}
.cbtn{height:40px;min-width:40px;border:0;border-radius:var(--r2);background:transparent;color:var(--faint);font:500 13px var(--mono)}
.cbtn.has{background:transparent;color:var(--accent)}
.cbtn svg{width:19px;height:19px}
.newtag{font:500 11px var(--mono);color:var(--warn);background:var(--warn-soft);border-radius:6px;padding:1px 6px}

/* comment panel: a sheet-like block */
.panel{margin:0 12px 12px 56px;gap:8px}
.c{border-radius:14px 14px 14px 4px;background:var(--fill);padding:10px 12px;font-size:15px}
.c.mine{background:var(--accent-soft);border-radius:14px 14px 4px 14px}
.c textarea,.new textarea,.iedit textarea,.additem textarea{font-size:16px;border:0;border-radius:var(--r2);background:var(--fill);padding:11px 14px;min-height:48px;color:var(--fg)}
.new{display:flex;flex-direction:column;gap:8px}

/* buttons: thumb-sized, instant press feedback */
.btn{font:600 15px var(--sans);min-height:44px;padding:0 18px;border-radius:14px;border:0;background:var(--accent);color:var(--accent-ink);transition:transform .08s,opacity .15s}
.btn.ghost{background:var(--fill);color:var(--fg);border:0}
.btn:active,.pbtn:active,.cbtn:active,.seg button:active,.hchip:active,.tabbar button:active,.addph:active{transform:scale(.96)}
.btn.wide{min-height:52px;font-size:17px}
.link{font-size:14px;font-weight:500;padding:6px 2px}
.acts{gap:8px;flex-wrap:wrap}
.addph{border:0;border-radius:14px;background:var(--fill);color:var(--fg);font:600 15px var(--sans);min-height:44px;display:inline-flex;align-items:center;padding:0 16px}

/* inputs: 16px so iPhone never zooms */
input,select,textarea{font-size:16px!important}
input[type=text],input[type=email],input[type=url],input[type=number],input[type=date],select:not([data-tp]),.rgrid input,.signcard input[type=email],.signcard input[type=url]{
  border:0!important;border-radius:var(--r2)!important;background:var(--fill)!important;color:var(--fg);min-height:44px;padding:0 12px!important;box-sizing:border-box}
.tpick{border:0;border-radius:var(--r2);background:var(--fill);height:44px;padding:0 8px}
.tpick select{background:transparent!important;min-height:0;padding:4px 0!important;color:var(--fg)}
.tpick.bad{box-shadow:0 0 0 2px var(--warn)}
.money i{left:12px}
.rgrid .money input{padding-left:24px!important}
.rgrid{gap:10px}
.rgrid label{font-size:13px;gap:6px}
.calc b{font-size:20px;padding-top:8px}
.car{gap:8px;margin:2px 0}
.car label{flex:1;justify-content:center;min-height:44px;border-radius:var(--r2);background:var(--fill);font-size:15px;font-weight:500;cursor:pointer;transition:background .15s,box-shadow .15s}
.car label:has(input:checked){background:var(--paper);box-shadow:0 0 0 2px var(--accent);color:var(--accent)}
.car input{position:absolute;opacity:0;pointer-events:none}
.chips{gap:8px}
.chip{border:0;border-radius:10px;background:var(--accent-soft);color:var(--accent);font-weight:500;padding:6px 12px;font-size:14px}
.chips select{border:0;border-radius:10px;background:var(--fill)!important;color:var(--accent);min-height:36px;padding:0 10px!important}
.jobadd{display:flex;gap:8px;margin:4px 0}
.jobadd input{flex:1;min-width:0}
.mile{border:0;background:var(--fill)}
.tot{border-top:0;background:var(--fill);border-radius:var(--r2);padding:14px 16px;margin-top:6px}
#dayrep .acts .btn:not(.ghost){flex:1;min-height:52px;font-size:17px}
.kv{border-bottom-color:var(--line);padding:12px 0}
.kv b{color:var(--fg)}
.rerr{color:var(--warn)}

/* home: hours strip */
.hchips{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.hchip{display:flex;flex-direction:column;align-items:center;gap:1px;border:0;border-radius:14px;background:var(--fill);color:var(--fg);padding:8px 0 9px;cursor:pointer;font-family:var(--sans);transition:transform .08s,background .15s;min-width:0}
.hchip span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.hchip b{font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.hchip i{font-style:normal;font:500 11px var(--mono);color:var(--accent)}
.hchip.ok{background:var(--accent-soft)}
.hchip.ok i{color:var(--accent)}
.hchip.today{box-shadow:inset 0 0 0 2px var(--accent)}
.hcard input[type=date]{flex:1;min-width:0}

/* status panels */
.todo{border-left:0!important;box-shadow:inset 4px 0 0 var(--warn)}
.todo.ok{box-shadow:none;background:var(--accent-soft)!important;color:var(--accent)!important;border-radius:var(--r)}
.todo li{border-top-color:var(--line)}
.cntb{background:var(--warn);color:#fff;border-radius:8px}
.okbar,.needbar{border:0;border-radius:var(--r);padding:14px 16px}
.needbar{background:var(--warn-soft)}
.pill{border-radius:8px;padding:2px 8px;font-size:12px}
.pill.late{border:0;background:var(--warn-soft);color:var(--warn)}
.vrow{border-top-color:var(--line);font-size:14px;padding-top:10px}
.bar{height:6px;border-radius:9px;width:64px;background:var(--fill)}
.seg{border:0;border-radius:12px;background:var(--fill);padding:2px;overflow:visible}
.seg button{border-radius:10px;background:transparent;color:var(--fg);min-height:36px;padding:0 14px;transition:background .2s,box-shadow .2s}
.seg button.on{background:var(--paper);color:var(--fg);box-shadow:0 1px 3px rgba(0,0,0,.14)}
.dsw button{min-height:28px;padding:0 9px}
.feed li{border-top-color:var(--line)}
.wkwrap{border-radius:var(--r);border:0;background:var(--paper)}

/* bottom tab bar: translucent, safe-area aware */
.tabbar{background:color-mix(in srgb,var(--paper) 80%,transparent)!important;backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);
  border-top:1px solid var(--line)!important;padding:6px max(16px,env(safe-area-inset-left,0px)) calc(8px + env(safe-area-inset-bottom,0px))}
.tabbar button{font:500 11px var(--sans);color:var(--faint);min-width:72px;min-height:48px;transition:transform .08s}
.tabbar button.on{color:var(--accent)}
.tabbar button.on svg{background:none;padding:0}
.tabbar svg{width:24px;height:24px}
.toast{bottom:calc(92px + env(safe-area-inset-bottom,0px));border-radius:14px;padding:12px 16px;font-size:15px}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (max-width:380px){h1{font-size:26px}.hchip b{font-size:17px}}
.hchip.off{background:transparent;box-shadow:inset 0 0 0 1px var(--line,rgba(0,0,0,.12))}
.hchip.off b,.hchip.off i{color:var(--muted)}
.vaddr a.maplink{color:var(--muted);font-weight:400}
.vtop>.vaddr .mpin svg{margin:2px 0 0;vertical-align:0}
#visits .drw{padding:0 16px 6px;margin:0}
#visits .dlist a{min-height:46px;padding:6px 0;font-size:15px;gap:12px}
#visits .dlist a svg{width:24px;height:24px}
#visits .dlist a svg:not(.pdf){color:var(--accent)}

/* ===== 2026-11-08: structure + polish pass (Team tab, one period switcher, calmer type) ===== */
body{font-variant-numeric:tabular-nums}
.wrap{gap:16px}
h1{font-weight:600}
.zone{display:block;text-transform:none!important;letter-spacing:0!important;font-size:14px!important;font-weight:600!important;color:var(--muted)!important}
.zone::first-letter{text-transform:uppercase}
.vwin{white-space:nowrap}
.hchip span{text-transform:none;letter-spacing:0;font-size:12px}
:root{--warn:#c2410c;--warn-soft:#fdeee3}
.sech{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;margin:6px 0 -6px}
.sech .seg{margin-left:auto}.sech select{width:auto;min-width:0;height:36px;font-size:14px;padding:0 8px;border-radius:10px}
.sp{flex:1}
/* period switcher: same on Team, Hours and Home; the second line never changes height */
.pernav span{gap:2px}
.pernav .persub{flex-direction:row;align-items:center;justify-content:center;gap:6px;height:22px;font-size:13px;color:var(--muted)}
.pernav .perback{margin:0;height:20px;padding:0 10px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:600;line-height:20px}
.perline{align-items:center}
.perline .link.w{color:var(--warn);font-weight:600;font-size:13px;padding:0;text-align:left}
/* list rows inside a card */
.lcard,.revb,.pinv{padding:6px 16px!important;gap:0!important}
.pinv{padding:14px 16px 6px!important}
.lrow{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;padding:10px 0;border:0;background:none;font:inherit;font-size:15px;color:var(--fg);text-align:left;cursor:pointer}
.lrow+.lrow{border-top:1px solid var(--line)}
.lrow.static{cursor:default}
.lrow .lmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.lrow .lmain .note{font-size:13px}
.lrow .chev,.tline .chev{color:var(--faint);font-size:20px;line-height:1}
.lrow .bar{width:64px;flex:none}
.lrow .num{font-size:13px;color:var(--muted);white-space:nowrap}
.lrow.fut{cursor:default;color:var(--faint)}.lrow.fut b,.lrow.fut .note{color:var(--faint)}
.lrow .w{color:var(--warn)}
.wdl{font-size:12px;color:var(--faint);line-height:1.2}
.revb{background:var(--paper)!important}
.revb .vhead{padding:10px 0 4px}
.revb .lrow{border-top:1px solid var(--line)}
.pinv .pih{display:flex;align-items:center;gap:8px}.pinv .pih b{font-size:16px;font-weight:600}.pinv .pih .tb{margin-left:auto}
.pinv>.note{margin-top:2px}.pinv .lrow{border-top:1px solid var(--line);margin-top:10px}
/* status chips */
.tb{border-radius:999px;padding:2px 9px;font-size:12px;font-weight:600;white-space:nowrap;background:var(--fill);color:var(--muted)}
.tb.w,.tb.r{background:var(--warn-soft);color:var(--warn)}.tb.w2{background:var(--warn-soft);color:var(--warn)}.tb.g{background:var(--accent-soft);color:var(--accent)}
.cntb{background:var(--warn-soft)!important;color:var(--warn)!important}
/* Team: period strip split into two work weeks */
.team{gap:10px}
.team .tdays,.team .tstrip{display:grid;gap:3px}
.team .tdays{margin-top:4px;font-size:10px;color:var(--muted);text-align:center;line-height:1.2}
.team .tdays span{display:flex;flex-direction:column}.team .tdays b{font-weight:600}
.trow2{padding:10px 0;gap:6px}
.tline{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;padding:0;font:inherit;color:var(--fg);cursor:pointer;text-align:left}
.tline .tname{flex:1;font-size:15px;font-weight:600}
.tline .thrs{font-size:14px;color:var(--muted);min-width:56px;text-align:right}
.tc.ok{background:var(--accent)}.tc.miss{background:#f5c4a1}.tc.open{background:var(--warn)}.tc.off{background:var(--bg);box-shadow:inset 0 0 0 1px var(--line2)}
.tleg{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--muted)}.tleg span{display:flex;align-items:center;gap:5px}
.hchip.open{background:var(--warn-soft)}.hchip.open i,.hchip.miss i{color:var(--warn)}
.perline .r{color:var(--warn)}
/* tab bar badge, name dot */
.tabbar .tbi{position:relative;display:flex}
.tbadge{position:absolute;top:-4px;left:16px;min-width:16px;height:16px;border-radius:8px;background:var(--warn);color:#fff;font:600 10px/16px var(--sans);text-align:center;padding:0 4px;box-sizing:border-box}
.tbadge[hidden]{display:none}
.wdot{display:none;width:8px;height:8px;border-radius:4px;background:var(--warn);margin-left:5px;vertical-align:1px}
.dot>.wdot{display:inline-block}
/* no coloured side stripes */
.todo{box-shadow:none!important}
li.item.need .row{box-shadow:none;background:var(--warn-soft)!important}
/* item row: narrow comment icon, count under the text */
.cbtn{min-width:32px;width:32px;padding:0;color:var(--faint);opacity:.7}
.cbtn.has{opacity:1}
.ccnt{display:flex;align-items:center;gap:4px;margin-top:3px;border:0;background:none;padding:0;font:500 13px var(--sans);color:var(--accent);cursor:pointer}
.ccnt svg{width:14px;height:14px}
/* day report: receipt button level with its field */
.xrow{align-items:flex-end}
.xlines .money input,.xrow .addph{height:48px!important;min-height:48px;box-sizing:border-box}
.xrow .addph{display:flex;align-items:center;padding-block:0!important;margin:0}
.hoursbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.hoursbar label{margin-left:auto;font-size:13px;color:var(--muted)}.hoursbar select{width:auto;height:40px}
.itag.service{background:var(--fill);color:var(--muted)}
.xrow{align-items:flex-end!important}.xrow .addph{align-self:flex-end!important}
/* Item row VE (2026-11-08): colour bar instead of a checkbox; tap = done; swipe left / hold = Can't do, Back to MKB.
   The checkbox stays in the page (keyboard, long press, tests) but is drawn as the bar. */
.swp>.row{align-items:stretch!important;gap:12px;padding:10px 14px 10px 2px!important;min-height:52px;background:var(--paper)!important}
.swp>.row:active{background:var(--fill)!important}
li.item.need .swp>.row{background:var(--warn-soft)!important}
li.item+li.item::before{left:16px;z-index:2}
.swp>.row input[type=checkbox],li.item.st-no .swp>.row input[type=checkbox],li.item.st-mkb .swp>.row input[type=checkbox]{width:5px;height:auto;min-height:30px;align-self:stretch;margin:0 0 0 2px;border:0;border-radius:3px;background:var(--line);transform:none!important;flex:none;cursor:pointer}
.swp>.row input[type=checkbox]::before{content:none!important}
.swp>.row input[type=checkbox]:checked{background:var(--accent)}
li.item.st-no .swp>.row input[type=checkbox]{background:#d92d20}
li.item.st-mkb .swp>.row input[type=checkbox]{background:#e0a100}
.swp>.row input[type=checkbox]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.swp>.row label{align-self:center;padding:0;display:block}
.swp .sttag{margin:0 6px 0 0;font-size:12px;padding:1px 7px;white-space:nowrap}
.sttag.no{color:#d92d20;background:#fdecec}.sttag.mkb{color:#8a6100;background:#fdf3d6}
.swp .ccnt{float:right;display:inline-flex;align-items:center;gap:3px;margin:-8px -10px -8px 6px;padding:8px 10px;min-height:40px;color:var(--faint);opacity:.75}
.swp .ccnt.has{color:var(--accent);opacity:1}
.swp .ccnt b{font:500 13px var(--sans)}
.swp .ccnt svg{width:16px;height:16px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sttag.no{background:#3a1d1b;color:#ff8a80}:root:not([data-theme="light"]) .sttag.mkb{background:#3a3017;color:#f1c75b}}
:root[data-theme="dark"] .sttag.no{background:#3a1d1b;color:#ff8a80}:root[data-theme="dark"] .sttag.mkb{background:#3a3017;color:#f1c75b}