/* Berkley Rental Evidence App — styles */
*{-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:#E9EFEC;font-family:"Source Sans 3","Segoe UI",Roboto,sans-serif}
body{overflow:hidden;overscroll-behavior:none}
.vpwrap{position:relative;max-width:480px;height:100%;margin:0 auto;overflow:hidden;background:#fff;box-shadow:0 0 40px rgba(10,25,18,.12)}
.viewport{height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.overlay{position:absolute;inset:0;pointer-events:none}
.overlay>*{pointer-events:auto}
:root{--font:"Source Sans 3","Segoe UI",Roboto,sans-serif}
/* ---------- Phone UI (fixed light look, Berkley green) ---------- */
.vpwrap{--g:#0D5640;--g2:#09402F;--gs:#E3EEE9;--ink:#14211C;--mut:#5B6B64;--ln:#E1E8E4;--ln2:#CCD6D1;--tint:#F2F6F4;--warn:#8A4B00;--warns:#FBEFD9;--bad:#8C1D18;--bads:#FBE4E2;font-family:var(--font);color:var(--ink)}
.scr{min-height:100%;display:flex;flex-direction:column;background:#fff;box-sizing:border-box}
.scr.tint{background:var(--tint)}
.scr.dark{background:#0F1513;color:#fff}
.scr button,.scr input{font-family:inherit}
.scr button{cursor:pointer}
.scr :focus-visible{outline:2px solid #2E8B65;outline-offset:2px}
.hdr{padding:48px 20px 14px;display:flex;flex-direction:column;gap:14px;border-bottom:1px solid var(--ln);background:#fff}
.dark .hdr{background:transparent;border-color:transparent}
.hrow{display:flex;align-items:center;gap:8px}
.back{width:44px;height:44px;margin-left:-12px;border:0;background:none;color:inherit;display:flex;align-items:center;justify-content:center}
.eb{font-size:13px;color:var(--mut)}
.dark .eb{color:#A9B8B1}
.ht{font-size:19px;font-weight:700}
.bars{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.bar{height:4px;border-radius:2px;background:#DCE5E0}
.bar.on{background:var(--g)}
.dark .bar{background:#33403B}.dark .bar.on{background:#7FD1AE}
.body{flex:1;padding:18px 20px;display:flex;flex-direction:column;gap:16px}
.foot{padding:12px 20px 32px;border-top:1px solid var(--ln);display:flex;flex-direction:column;gap:8px;background:#fff}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:54px;border-radius:12px;border:0;background:var(--g);color:#fff;font-size:17px;font-weight:600}
.btn:hover{background:var(--g2)}
.btn.sec{background:#fff;border:1.5px solid var(--g);color:var(--g);height:48px;font-size:16px}
.btn.lnk{background:none;color:var(--g);height:44px;font-size:15px}
.btn[disabled]{opacity:.4;cursor:default}
.err{font-size:13px;color:var(--bad)}
.fld{display:flex;flex-direction:column;gap:6px}
.fld label,.lbl{font-size:13px;font-weight:600;color:#3D4C46}
.inp{height:48px;border:1px solid var(--ln2);border-radius:10px;padding:0 14px;font-size:16px;color:var(--ink);background:#fff;min-width:0;box-sizing:border-box;width:100%}
.inp:focus{outline:2px solid var(--g);outline-offset:0;border-color:var(--g)}
.irow{display:flex;gap:8px}
.icob{width:48px;height:48px;flex-shrink:0;border-radius:10px;border:1px solid var(--g);background:var(--gs);color:var(--g);display:flex;align-items:center;justify-content:center}
.card{background:#fff;border:1px solid var(--ln);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px}
.sect{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.pill{font-size:12px;font-weight:600;border-radius:99px;padding:4px 10px;white-space:nowrap;background:var(--gs);color:var(--g)}
.pill.warn{background:var(--warns);color:var(--warn)}.pill.bad{background:var(--bads);color:var(--bad)}.pill.n{background:#EDF2EF;color:#3D4C46}
.seg{display:grid;gap:8px}
.opt{min-height:44px;border-radius:10px;border:1px solid var(--ln2);background:#fff;color:var(--ink);font-size:15px;padding:0 10px}
.opt.on{border:2px solid var(--g);background:var(--gs);color:var(--g);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{height:40px;border-radius:99px;border:1px solid var(--ln2);background:#fff;color:var(--ink);font-size:14px;padding:0 14px}
.chip.on{border:2px solid var(--g);background:var(--gs);color:var(--g);font-weight:600}
.note{display:flex;gap:10px;align-items:flex-start;background:var(--tint);border-radius:12px;padding:10px 12px;font-size:13px;color:#3D4C46}
.note.amber{background:var(--warns);color:#6B3A00}
.row{display:flex;align-items:center;gap:12px}
.lrow{box-sizing:border-box;display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid #EDF2EF;background:none;border-left:0;border-right:0;border-top:0;width:100%;text-align:left;color:inherit;font-size:inherit}
.lrow:last-child{border-bottom:0}
.lcol{display:flex;flex-direction:column;flex:1;min-width:0}
.t15{font-size:15px;font-weight:600}.s13{font-size:13px;color:var(--mut)}
.chk{width:26px;height:26px;border-radius:13px;background:var(--g);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chk.off{background:none;border:1.5px solid #8FA39A;box-sizing:border-box}
.tap{background:#fff;border:1px solid var(--ln);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px;text-align:left;color:inherit;width:100%}
.tabbar{display:flex;background:#fff;border-top:1px solid var(--ln);padding:8px 8px 28px;position:sticky;bottom:0}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px;font-size:12px;color:var(--mut);border:0;background:none}
.tab.on{color:var(--g);font-weight:600}
.ph{background:#3A4842;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#C3CFCA;font-size:12px;position:relative}
/* camera */
.vf{flex:1;margin:12px 12px 0;border-radius:18px;background:#26302C;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:330px}
.qchips{position:absolute;top:14px;left:14px;right:14px;display:flex;gap:8px;flex-wrap:wrap}
.qc{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;background:rgba(15,21,19,.75);border-radius:99px;padding:6px 10px;color:#fff}
.qc.y{color:#F5C26B}
.stamp{position:absolute;bottom:12px;left:14px;font-size:12px;color:#A9B8B1}
.strip{padding:12px 20px 0;display:flex;flex-direction:column;gap:6px}
.cells{display:grid;grid-template-columns:repeat(18,minmax(0,1fr));gap:3px}
.cell{height:22px;border-radius:4px;background:#33403B;border:0;padding:0}
.cell.done{background:#7FD1AE}.cell.cur{background:transparent;border:2px solid #fff;box-sizing:border-box}
.cell.wh{border-radius:11px}
.shutrow{padding:16px 20px 30px;display:flex;align-items:center;justify-content:space-between}
.shut{width:76px;height:76px;border-radius:38px;border:4px solid #fff;background:none;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:0}
.shut span{width:58px;height:58px;border-radius:29px;background:#fff;transition:transform .1s}
.shut:active span{transform:scale(.9)}
.ghost{width:76px;height:44px;border:0;background:none;color:#C3CFCA;font-size:15px;font-weight:600}
.flash{position:absolute;inset:0;background:#fff;animation:fl .35s ease-out forwards;pointer-events:none}
@keyframes fl{from{opacity:.85}to{opacity:0}}
.spin{width:22px;height:22px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#7FD1AE;animation:sp .8s linear infinite}
.spin.g{border-color:#DCE5E0;border-top-color:var(--g)}
@keyframes sp{to{transform:rotate(360deg)}}
/* sheet + toast */
.scrim{position:absolute;inset:0;background:rgba(10,20,15,.45);display:flex;align-items:flex-end}
.sheet{background:#fff;width:100%;border-radius:20px 20px 0 0;padding:20px 20px 34px;display:flex;flex-direction:column;gap:14px;box-sizing:border-box}
.toast{position:absolute;left:20px;right:20px;top:56px;box-shadow:0 8px 20px rgba(0,0,0,.2);background:#14211C;color:#fff;border-radius:12px;padding:12px 14px;font-size:14px;text-align:center}
.carsvg{cursor:crosshair;touch-action:manipulation}
.dseg{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:rgba(255,255,255,.08);border-radius:12px;padding:4px;margin:4px 20px 0}
.dseg button{height:36px;border:0;border-radius:9px;background:none;color:#C3CFCA;font-size:14px;font-weight:600}
.dseg button.on{background:#fff;color:#0F1513}
.walkbtn{height:56px;padding:0 24px;border-radius:28px;border:0;background:#7FD1AE;color:#0F1513;font-size:17px;font-weight:700}
@media (prefers-reduced-motion:reduce){.flash,.spin{animation:none}}

/* ---------- working-app additions ---------- */
.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.thumb{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.pairimg{height:104px;border-radius:10px;overflow:hidden;background:#3A4842;display:flex;align-items:center;justify-content:center;color:#C3CFCA;font-size:12px}
.pairimg img{width:100%;height:100%;object-fit:cover}
.bigimg{position:absolute;inset:0;background:#000;display:flex;align-items:center;justify-content:center}
.bigimg img{max-width:100%;max-height:100%}
.sync{font-size:12px;color:#A9B8B1;display:flex;align-items:center;gap:6px}


/* ---------- real-device spacing ---------- */
.hdr{padding-top:calc(env(safe-area-inset-top,0px) + 16px)!important}
.tabbar{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 12px)}
.foot{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 20px)}
.shutrow{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 18px)}
.scr{min-height:100%}
/* ---------- live camera ---------- */
.livevid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.vf{min-height:300px}
.lvguide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.lvguide svg{filter:drop-shadow(0 0 2px rgba(0,0,0,.6))}
.lvguide.ok svg path,.lvguide.ok svg circle,.lvguide.ok svg rect{stroke:#7FD1AE!important;stroke-dasharray:none!important}
.qc.off{color:#fff;opacity:.75}
.qc .dot{width:10px;height:10px;border-radius:5px;border:2px solid #F5C26B;box-sizing:border-box;display:inline-block}
.lvmsg{position:absolute;left:12px;right:12px;bottom:14px;text-align:center;font-size:16px;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.lvmsg:empty{display:none}
.lvring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:opacity .15s;pointer-events:none}
.lvthumb{position:absolute;inset:0;border:0;padding:0;background:#000}
.lvthumb img{width:100%;height:100%;object-fit:cover}
.lvflash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.lvflash.go{animation:fl .35s ease-out}
.autobtn{height:34px;border-radius:99px;border:1.5px solid #7FD1AE;background:none;color:#7FD1AE;font:700 13px var(--font);padding:0 12px;white-space:nowrap}
.autobtn.on{background:#7FD1AE;color:#0F1513}
@media print{body{overflow:visible;background:#fff}.vpwrap{max-width:none;height:auto;box-shadow:none;overflow:visible}.viewport{height:auto;overflow:visible}.overlay,.tabbar,.noprint,.back,[data-a="aiRun"],[data-a="togglePre"]{display:none!important}.card,.note{break-inside:avoid}}

/* ---------- layout guides (image outlines) ---------- */
.lvguide{filter:drop-shadow(0 0 1.5px rgba(0,0,0,.85))}
.gimg{width:90%;max-height:80%;background:#FFFFFF;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;pointer-events:none}
.vf>.gimg{margin-top:36px}
.lvguide.ok .gimg{background:#7FD1AE}

.shotframe{border:3px dashed rgba(255,255,255,.9);border-radius:14px;box-shadow:0 0 0 2000px rgba(0,0,0,.18)}
.lvguide.ok .shotframe{border-color:#7FD1AE;border-style:solid}
.lvdiag{display:none;position:absolute;left:10px;right:10px;top:96px;background:rgba(0,0,0,.68);color:#E6F2EC;font:11px/1.45 ui-monospace,Menlo,monospace;white-space:pre-wrap;border-radius:8px;padding:6px 8px;pointer-events:none;z-index:3}

.walkcard{position:absolute;left:14px;right:14px;bottom:14px;background:rgba(15,21,19,.86);color:#fff;border-radius:14px;padding:14px 16px;z-index:2}
.recpill{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:700;background:rgba(255,255,255,.12);border-radius:99px;padding:6px 12px;font-variant-numeric:tabular-nums}
.recdot{width:10px;height:10px;border-radius:5px;background:#EF4444;animation:recblink 1s infinite}
@keyframes recblink{50%{opacity:.25}}
.recbtn{width:76px;height:76px;border-radius:38px;border:4px solid #fff;background:none;padding:0;display:flex;align-items:center;justify-content:center}
.recbtn span{width:58px;height:58px;border-radius:29px;background:#EF4444;transition:all .15s}
.recbtn.on span{width:28px;height:28px;border-radius:6px}
.recbtn[disabled]{opacity:.4}