/* I PAINT CO. client app · same panel-label system as Crew Log / Site Visit */
:root{--paper:#F4F0E6;--ink:#141412;--body:#4A4741;--gold:#7D5F31;--goldl:#C6A45E;--card:#fff;--rule:rgba(20,20,18,.16);--green:#4E6B4A;--red:#B8362E;
--f:"League Spartan","Futura","Century Gothic",sans-serif;--disp:"Avenir Next",Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;
--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--tabs:64px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--disp);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
body{max-width:520px;margin:0 auto;min-height:100dvh;overscroll-behavior-y:none}
button,input,textarea{font:inherit;color:inherit}
a{color:inherit}
[hidden]{display:none!important}
#demo-bar{position:sticky;top:0;z-index:20;background:var(--ink);color:var(--paper);text-align:center;font:700 11px/1 var(--f);letter-spacing:.16em;padding:calc(7px + var(--sat)) 8px 7px}
.mast{display:flex;align-items:center;gap:12px;padding:calc(10px + var(--sat)) 18px 12px;border-bottom:2px solid var(--ink);background:var(--paper);position:sticky;top:0;z-index:10}
body.demo .mast{top:25px;padding-top:10px}
.em{width:46px;height:38px;background:url(icons/logo.png) center/contain no-repeat;flex:none}
.nm{font:700 21px/1.1 var(--disp)} .sub{font:600 11.5px/1.4 var(--f);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.back{border:0;background:none;font:600 26px/1 var(--disp);padding:4px 8px 4px 0;min-width:40px;min-height:44px;cursor:pointer}
.body{padding:14px 18px calc(var(--tabs) + var(--sab) + 70px)}
.lab{font:600 12px/1.2 var(--f);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0 0 8px;display:block}
.box{background:var(--card);border:1px solid var(--rule);border-radius:10px;padding:14px 16px;margin:0 0 12px}
.box.strong{border:2px solid var(--ink)}
.big{font:700 32px/1.1 var(--disp)} .h{font:700 24px/1.2 var(--disp);margin:0 0 6px}
.p{font-size:16px;line-height:1.45;color:var(--body);margin:0 0 8px} .s{font-size:13.5px;color:var(--body);line-height:1.4}
.note{font-size:12.5px;color:var(--body);line-height:1.4}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;width:100%;border-radius:12px;border:2px solid var(--ink);background:var(--card);font:700 17px var(--disp);margin:0 0 10px;text-decoration:none;cursor:pointer;padding:0 14px;text-align:center}
.btn.k{background:var(--ink);color:var(--paper)} .btn.sm{min-height:48px;font-size:15px} .btn.row{justify-content:space-between}
.row{display:flex;gap:10px}.row>*{flex:1}
.status{display:flex;align-items:center;gap:14px}
.dot{width:16px;height:16px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(78,107,74,.18);flex:none}
.dot.gold{background:var(--goldl);box-shadow:0 0 0 5px rgba(198,164,94,.25);animation:pulse 1.6s infinite} .dot.grey{background:#9b968a;box-shadow:none}
@keyframes pulse{50%{box-shadow:0 0 0 9px rgba(198,164,94,.12)}}
.bar{height:12px;border-radius:6px;background:#E3DCCB;overflow:hidden;margin:8px 0 4px}.bar b{display:block;height:100%;background:var(--ink)}
.tabs{position:fixed;left:0;right:0;bottom:0;max-width:520px;margin:0 auto;border-top:2px solid var(--ink);background:var(--paper);display:grid;grid-template-columns:repeat(4,1fr);padding-bottom:var(--sab);z-index:10}
.tabs a{text-align:center;padding:10px 0 12px;font:700 11.5px var(--f);letter-spacing:.1em;text-transform:uppercase;color:#7a7466;text-decoration:none;position:relative}
.tabs svg{display:block;margin:0 auto 5px;width:24px;height:24px}
.tabs .on{color:var(--ink);background:rgba(20,20,18,.05)}
.bd{position:absolute;top:5px;left:calc(50% + 6px);background:var(--red);color:#fff;border-radius:9px;font:800 11px/18px var(--f);padding:0 5px;letter-spacing:0}
.foot{display:flex;justify-content:space-between;padding:16px 0 0;font:600 9.5px var(--f);letter-spacing:.16em;color:#7a7466;border-top:1px solid var(--rule);margin-top:8px}
.feed .it{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--rule)} .feed .it:first-of-type{border-top:0}
.feed .t{font:700 12px var(--f);color:var(--gold);letter-spacing:.06em;min-width:64px;padding-top:2px;text-transform:uppercase}
.feed .m{font-size:15px;line-height:1.35}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.chip{font:700 11px var(--f);letter-spacing:.12em;text-transform:uppercase;padding:7px 10px;border-radius:6px;border:1px solid var(--ink);background:none;cursor:pointer}
.chip.k{background:var(--ink);color:var(--paper)}
.thumb{border-radius:8px;background:#ddd center/cover no-repeat}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ph{position:relative;aspect-ratio:4/3;border:0;padding:0;cursor:pointer}
.ph .tag{position:absolute;left:6px;top:6px;background:#fff;font:700 9.5px var(--f);letter-spacing:.1em;padding:3px 5px;border-radius:3px;text-transform:uppercase}
.ph .vid{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.72);color:#fff;font:700 11px var(--f);padding:3px 7px;border-radius:4px}
.step{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--rule)} .step:first-child{border-top:0}
.step i{width:26px;height:26px;border-radius:50%;flex:none;color:#fff;font:800 14px/26px var(--f);text-align:center;font-style:normal}
.mat{display:flex;gap:12px;padding:11px 0;border-top:1px solid var(--rule);align-items:center} .mat:first-child{border-top:0}
.mat b{color:var(--ink)}
.sw{width:44px;height:44px;border-radius:8px;border:1px solid var(--rule);flex:none}
.tg{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-top:1px solid var(--rule);font-size:16px;text-decoration:none}
.tg:first-child{border-top:0}
.bub{display:flex;flex-direction:column;margin:8px 0}.bub.me{align-items:flex-end}
.bub .w{font-size:11.5px;color:var(--body);margin-bottom:2px}
.bub .x{max-width:80%;background:#fff;border:1px solid var(--rule);border-radius:14px;padding:10px 13px;font-size:15.5px;line-height:1.35;white-space:pre-wrap}
.bub.me .x{background:var(--ink);color:var(--paper)}
.composer{position:fixed;left:0;right:0;bottom:calc(var(--tabs) + var(--sab) + 2px);max-width:520px;margin:0 auto;display:flex;gap:8px;padding:10px 18px;background:var(--paper);border-top:1px solid var(--rule)}
.composer textarea{flex:1;min-height:50px;max-height:120px;border:2px solid var(--ink);border-radius:12px;background:#fff;padding:12px;resize:none;font-size:16px}
.composer button{width:56px;border-radius:12px;border:0;background:var(--ink);color:var(--paper);font:700 22px var(--disp)}
#map{height:340px;border-radius:10px;border:1px solid var(--rule);z-index:1}
.pin-crew{width:22px;height:22px;border-radius:50%;background:var(--ink);border:3px solid #fff;box-shadow:0 0 0 6px rgba(198,164,94,.45)}
.pin-home{width:20px;height:20px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--red);border:3px solid #fff}
.gal{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin:0 -18px;padding:0 18px;scrollbar-width:none}
.gal::-webkit-scrollbar{display:none}
.gal figure{flex:0 0 88%;scroll-snap-align:center;margin:0}
.gal .thumb{aspect-ratio:4/5;width:100%}
.gal figcaption{font:700 17px/1.3 var(--disp);margin-top:8px}
.viewer{position:fixed;inset:0;background:rgba(10,10,9,.94);z-index:50;display:flex;flex-direction:column;justify-content:center;padding:20px}
.viewer img{max-width:100%;max-height:75vh;margin:0 auto;border-radius:6px}
.viewer .c{color:#eee;text-align:center;margin-top:12px;font-size:15px}
.viewer button{position:absolute;top:calc(14px + var(--sat));right:16px;background:none;border:2px solid #fff;color:#fff;border-radius:22px;width:44px;height:44px;font-size:20px}
.field{border:2px solid var(--ink);border-radius:12px;background:#fff;padding:14px;font-size:17px;width:100%;margin-bottom:10px}
.err{color:var(--red);font-size:14.5px;margin:6px 0}
.read{display:flex;gap:12px;align-items:center;padding:8px 0;border-top:1px solid var(--rule);text-decoration:none}.read:first-of-type{border-top:0}
.read .thumb{width:64px;height:64px;flex:none}
.read b{font:700 15.5px/1.25 var(--disp);display:block}
.toggle{width:50px;height:30px;border-radius:15px;background:#cfc8b8;position:relative;border:0;flex:none;cursor:pointer}
.toggle:after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:left .15s}
.toggle.on{background:var(--green)}.toggle.on:after{left:23px}
.demo-ctl{border:1px dashed var(--gold);border-radius:10px;padding:10px 12px;margin:14px 0}

.av{border-radius:50%;background:#e9e4d8 center/cover no-repeat;flex:none;display:flex;align-items:center;justify-content:center;border:1px solid #d9d4c8}
.av.big{margin:0 auto}.crewrow{display:flex;gap:14px;margin-top:12px;overflow-x:auto}.crewrow .cm{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:72px;text-align:center}
.crewrow b{font-size:14.5px;color:var(--ink,#1c1c1c)}.crewp{display:flex;gap:14px;align-items:center;text-decoration:none;color:inherit}
.tags{display:flex;flex-wrap:wrap;gap:6px}.tag{border:1px solid #cfc8b8;border-radius:14px;padding:5px 10px;font-size:14px}