/* Wals Paint Time Clock — two shells: .app (phone) and .desk (website) */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700;800&family=Barlow:wght@400;500;600&family=JetBrains+Mono:wght@500&display=swap');
:root{
  --tape:#F2C14E;--tape-ink:#3A2A00;--enamel:#1F5FA8;--enamel-soft:#DCE8F7;--wet:#D64545;--wet-soft:#FBE1E1;--fresh:#2E9E5B;--fresh-soft:#DDF3E4;
  --ink:#14181E;--ink-2:#3B434E;--ink-3:#6B7480;--primer:#EEF1F4;--coat:#FFFFFF;--line:#D9DEE5;
  --r:14px;--disp:"Barlow Condensed",Impact,"Arial Narrow",sans-serif;--body:"Barlow","Segoe UI",Roboto,sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.45 var(--body);background:var(--primer);color:var(--ink)}
.hidden{display:none!important}.muted{color:var(--ink-3)}.right{text-align:right}.mono{font-family:var(--mono);font-size:.92em}
a{color:var(--enamel)}h1,h2,h3{font-family:var(--disp);letter-spacing:.01em;margin:0}
button{font:inherit;border:0;border-radius:10px;padding:11px 16px;background:var(--coat);color:var(--ink);cursor:pointer;box-shadow:inset 0 0 0 1px var(--line);transition:transform .08s,box-shadow .15s}
button:active{transform:translateY(1px)}button:disabled{opacity:.5;cursor:default}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--tape);outline-offset:2px}
.btn-accent{background:var(--enamel);color:#fff;box-shadow:none;font-weight:600}.btn-danger{background:var(--wet-soft);color:#8b1e1e;box-shadow:none}.btn-sm{padding:7px 11px;font-size:13px;border-radius:8px}
input,select,textarea{font:inherit;width:100%;padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:var(--coat);color:var(--ink);margin:4px 0 12px}
label{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.row{display:flex;gap:12px;flex-wrap:wrap}.row>*{flex:1;min-width:150px}
.msg{font-size:14px;min-height:20px;color:var(--ink-3)}.msg.err{color:var(--wet)}
/* tape label: the status vocabulary */
.tape{display:inline-block;font:700 12px/1 var(--disp);letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;background:var(--tape);color:var(--tape-ink);transform:rotate(-1.5deg);box-shadow:0 1px 2px rgba(0,0,0,.15)}
.tape.on{background:var(--fresh);color:#fff}.tape.away{background:var(--wet);color:#fff}.tape.off{background:#C9CFD7;color:var(--ink-2)}.tape.blue{background:var(--enamel);color:#fff}.tape.flat{transform:none}
/* color chip: job sites */
.chip{display:inline-flex;align-items:center;gap:8px}.chip i{width:14px;height:14px;border-radius:3px;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
/* tables */
table{width:100%;border-collapse:collapse;font-size:14px}th,td{text-align:left;padding:10px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font:700 11px/1 var(--disp);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
tr.click{cursor:pointer}tr.click:hover td{background:#F6F8FA}
.scroll{overflow-x:auto}
/* timeline */
.tl{list-style:none;margin:0;padding:0}.tl li{display:grid;grid-template-columns:58px 14px 1fr;gap:10px;padding:9px 0;position:relative}
.tl li::before{content:"";grid-column:2;grid-row:1;width:10px;height:10px;border-radius:50%;margin-top:5px;background:var(--dot,#9AA3AE);box-shadow:0 0 0 3px var(--primer)}
.tl li::after{content:"";position:absolute;left:62px;top:0;bottom:0;width:2px;background:var(--line);z-index:-1}
.tl time{grid-column:1;grid-row:1;font-family:var(--mono);font-size:13px;color:var(--ink-3);padding-top:2px}.tl li>div{grid-column:3;grid-row:1;min-width:0}.tl b{display:block;font-weight:600}.tl small{color:var(--ink-3)}
.ev-clock_in{--dot:var(--fresh)}.ev-clock_out{--dot:var(--wet)}.ev-left_site{--dot:#F08A24}.ev-returned{--dot:var(--enamel)}
.empty{padding:28px;text-align:center;color:var(--ink-3);border:2px dashed var(--line);border-radius:var(--r)}
.empty b{display:block;font-family:var(--disp);font-size:20px;color:var(--ink-2);margin-bottom:4px}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;font-weight:500;opacity:0;transition:.25s;z-index:50;pointer-events:none;max-width:90vw}
.toast.show{opacity:1;transform:translateX(-50%)}.toast.err{background:var(--wet)}
#map{height:320px;border-radius:12px;margin-top:12px;background:#dde3ea}
.card{background:var(--coat);border-radius:var(--r);padding:18px;margin-bottom:14px;box-shadow:0 1px 2px rgba(20,24,30,.05),0 0 0 1px var(--line)}
.card>h2{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px;font-weight:700}
.login{max-width:400px;margin:10vh auto 0;padding:0 16px}
.login .brand{text-align:center;margin-bottom:22px}.brand .w{font:800 44px/1 var(--disp);letter-spacing:.02em}.brand .w em{font-style:normal;color:var(--enamel)}
.brand .sub{display:inline-block;margin-top:8px}
/* ================= PHONE APP SHELL ================= */
.app{--primer:#14181E;--coat:#1E242C;--line:#2B333D;--ink:#F2F4F6;--ink-2:#C9CFD7;--ink-3:#8A94A0;--enamel-soft:#1D3556;--fresh-soft:#17362A;--wet-soft:#44201F}
.app .topbar{display:flex;align-items:center;justify-content:space-between;padding:calc(14px + env(safe-area-inset-top)) 18px 10px}
.app .topbar .w{font:800 22px/1 var(--disp)}.app .topbar .w em{font-style:normal;color:var(--tape)}
.app main{padding:8px 16px calc(92px + env(safe-area-inset-bottom));max-width:560px;margin:0 auto}
.tabbar{position:fixed;left:0;right:0;bottom:0;display:flex;background:var(--coat);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom));z-index:10}
.tabbar button{flex:1;background:none;box-shadow:none;border-radius:12px;padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--ink-3);font:600 11px/1 var(--body);letter-spacing:.04em}
.tabbar button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tabbar button.active{color:var(--tape)}
/* the paint-can lid punch control */
.punch{display:flex;flex-direction:column;align-items:center;padding:14px 0 6px}
.lid{--p:0;position:relative;width:232px;height:232px;border-radius:50%;padding:0;box-shadow:none;
  background:conic-gradient(var(--tape) calc(var(--p)*1%),var(--line) 0);transition:transform .1s}
.lid::before{content:"";position:absolute;inset:10px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#2A323C,#161B21 70%);box-shadow:inset 0 2px 8px rgba(255,255,255,.06),inset 0 -6px 14px rgba(0,0,0,.45),0 10px 24px rgba(0,0,0,.4)}
.lid>span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.lid .act{font:800 34px/1 var(--disp);letter-spacing:.04em;text-transform:uppercase}
.lid .t{font-family:var(--mono);font-size:15px;color:var(--ink-2)}
.lid.in .act{color:var(--tape)}.lid.out .act{color:#FF7B7B}
.lid:active{transform:scale(.97)}.lid.busy .act{color:var(--ink-3)}
.lid.pulse::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--tape);opacity:0;animation:ring 2.4s ease-out infinite}
@keyframes ring{0%{transform:scale(.96);opacity:.7}100%{transform:scale(1.12);opacity:0}}
.punch .meta{margin-top:16px;text-align:center;color:var(--ink-2);font-size:15px}.punch .meta .big{font:700 26px/1.1 var(--disp);color:var(--ink)}
.sitepick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 4px}
.sitepick button{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:12px;border-radius:12px;text-align:left;font-size:14px;line-height:1.2}
.sitepick button i{display:block;width:100%;height:26px;border-radius:6px}
.sitepick button.sel{box-shadow:inset 0 0 0 2px var(--tape)}
.sitepick button small{color:var(--ink-3);font-size:12px}
.shiftrow{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.shiftrow b{display:block;font-family:var(--disp);font-size:18px;font-weight:700}.shiftrow small{color:var(--ink-3)}
.shiftrow .h{font:700 22px/1 var(--disp);text-align:right}.shiftrow .h small{display:block;font:12px var(--body)}
.app .card{padding:16px}.app .login{--coat:#1E242C}
.install{width:100%;background:var(--enamel-soft);color:var(--ink);box-shadow:none;margin-bottom:12px;font-size:14px}
@media (prefers-reduced-motion:reduce){.lid.pulse::after{animation:none}*{transition:none!important}}
/* ================= DESKTOP WEBSITE SHELL ================= */
.desk{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.side{background:var(--ink);color:#E6EAEF;padding:26px 18px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh}
.side .w{font:800 28px/1 var(--disp);margin-bottom:26px;padding-left:10px}.side .w em{font-style:normal;color:var(--tape)}
.side button{background:none;box-shadow:none;color:#B7C0CB;text-align:left;padding:10px 12px;display:flex;gap:10px;align-items:center;font-weight:500;border-radius:9px}
.side button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.side button:hover{color:#fff;background:rgba(255,255,255,.06)}.side button.active{color:var(--tape-ink);background:var(--tape);font-weight:700}
.side .grow{flex:1}.side .who{font-size:13px;color:#8A94A0;padding:10px 12px}.side .who b{display:block;color:#fff;font-weight:600}
.desk main{padding:32px 40px;max-width:1180px;width:100%}
.desk .ph{display:flex;align-items:end;justify-content:space-between;margin-bottom:22px}.ph h1{font-size:38px;font-weight:800}.ph p{margin:2px 0 0;color:var(--ink-3)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.stats div{background:var(--coat);border-radius:12px;padding:14px 16px;box-shadow:0 0 0 1px var(--line)}.stats b{display:block;font:800 30px/1.1 var(--disp)}.stats small{color:var(--ink-3);font-weight:500}
.grid2{display:grid;grid-template-columns:3fr 2fr;gap:14px}
.crew{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.crew .p{background:var(--coat);border-radius:12px;padding:14px;box-shadow:0 0 0 1px var(--line);display:flex;gap:12px;align-items:center;cursor:pointer}
.crew .p:hover{box-shadow:0 0 0 2px var(--enamel)}
.av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font:700 17px var(--disp);color:#fff;flex:none}
.crew .p b{display:block}.crew .p small{color:var(--ink-3);display:block}
.desk .tl li{grid-template-columns:70px 14px 1fr}.desk .tl li::after{left:74px}
.filters{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin-bottom:14px}.filters>div{min-width:150px}.filters input,.filters select{margin-bottom:0}
.desk .login{margin-top:14vh}
@media (max-width:900px){.desk{grid-template-columns:1fr}.side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;padding:12px}.side .w{width:100%;margin-bottom:6px}.side .grow,.side .who{display:none}.desk main{padding:18px}.grid2{grid-template-columns:1fr}.ph h1{font-size:30px}}