/* Fahel & Co. house style — same tokens as arrears.fahelandco.com / staff.fahelandco.com */
:root{--ground:#F4F9F4;--surface:#FFFFFF;--raised:#F7FAF6;--line:#E3EBE3;--line-2:#D3DACF;
--ink:#0F120F;--ink-2:#5C6B5C;--ink-3:#8B948A;--mute:#5C6B5C;
--sage:#9FCE88;--sage-d:#6FA855;--accent-soft:#E7F1DD;--accent-line:#CBE0B7;--accent-deep:#4A7C3F;
--crit:#B3261E;--crit-bg:#FBEDEC;--warn:#C77D1F;--warn-bg:#FDF4E7;--ok:#3F7D3F;--ok-bg:#EAF3E4;--info:#2F5F8F;--info-bg:#E8F0F8;--purple:#6B4FA0;--purple-bg:#EFEAF8;
--btn:#0F120F;--btn-ink:#fff;--shadow:0 1px 2px rgba(18,21,15,.04);--r:11px;--r-s:6px;color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ground);color:var(--ink);font:400 15px/1.5 'DM Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent-deep)}
:focus-visible{outline:2px solid var(--accent-deep);outline-offset:3px;border-radius:4px}
.hidden{display:none!important}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.02em}
/* header */
header.top{position:sticky;top:0;z-index:20;background:var(--ground);border-bottom:1px solid var(--line);padding:14px 18px;display:flex;align-items:center;gap:12px}
header.top h1{font-size:18px;letter-spacing:-.02em}header.top h1 span{color:var(--ink-3);font-weight:500}
header.top .me{margin-left:auto;color:var(--ink-3);font-size:13px}
nav.tabs{display:flex;gap:6px;padding:10px 14px;background:var(--ground);position:sticky;top:53px;z-index:19;border-bottom:1px solid var(--line)}
nav.tabs button{flex:1;background:transparent;border:1px solid var(--line);border-radius:var(--r-s);padding:9px 6px;color:var(--ink-2);font-weight:500;cursor:pointer}
nav.tabs button.on{background:var(--btn);border-color:var(--btn);color:var(--btn-ink)}
main{padding:16px 14px 80px;max-width:980px;margin:0 auto}
/* chips & filters */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 14px}
.chip{background:var(--surface);border:1px solid var(--line);border-radius:100px;padding:6px 12px;font-size:13px;color:var(--ink-2);cursor:pointer;font-weight:500}
.chip b{color:var(--ink);margin-right:5px;font-weight:700}.chip.on{border-color:var(--ink);background:var(--ink);color:#fff}.chip.on b{color:#fff}
.chip.red b{color:var(--crit)}.chip.amber b{color:var(--warn)}.chip.blue b{color:var(--info)}.chip.green b{color:var(--ok)}.chip.purple b{color:var(--purple)}
.chip.on.red b,.chip.on.amber b,.chip.on.blue b,.chip.on.green b,.chip.on.purple b{color:#fff}
.filters{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.filters input,.filters select,input.txt,select.sel,textarea.ta{width:100%;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-s);padding:11px 13px;outline:none}
.filters input:focus,input.txt:focus,textarea.ta:focus,select.sel:focus{border-color:var(--accent-deep)}
/* buildings & units */
.bld{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;overflow:hidden;box-shadow:var(--shadow)}
.bld>summary{list-style:none;cursor:pointer;padding:13px 16px;display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.01em}
.bld>summary::-webkit-details-marker{display:none}
.bld>summary .n{margin-left:auto;display:flex;gap:6px;font-size:12px;font-weight:600}
.pill{border-radius:3px;padding:3px 7px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.pill.Overdue{background:var(--crit);color:#fff}.pill.Due{background:var(--warn-bg);color:var(--warn)}.pill.Notice{background:var(--info-bg);color:var(--info)}.pill.Tenant{background:var(--purple-bg);color:var(--purple)}.pill.Not{background:#F1F5F1;color:var(--ink-2)}.pill.Inspected{background:var(--ok-bg);color:var(--ok)}.pill.Processing{background:var(--info-bg);color:var(--info)}.pill.Issues{background:var(--warn-bg);color:var(--warn)}
.pill.hi{background:var(--ok-bg);color:var(--ok)}.pill.md{background:var(--warn-bg);color:var(--warn)}.pill.lo,.pill.none{background:var(--crit-bg);color:var(--crit)}
.unit{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 16px;border-top:1px solid var(--line);cursor:pointer;background:var(--surface)}
.unit:hover{background:#FAFCFA}
.unit .u{font-weight:700;font-size:16px;letter-spacing:-.02em}.unit .t{color:var(--ink-2);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.unit .d{text-align:right;font-size:12px;color:var(--ink-3);min-width:92px;white-space:nowrap}.unit .d b{display:block;font-size:13px;color:var(--ink)}
.empty{color:var(--ink-3);text-align:center;padding:40px 10px}
/* sheet */
.sheet-bg{position:fixed;inset:0;background:rgba(15,18,15,.42);z-index:30}
.sheet{position:fixed;left:0;right:0;bottom:0;max-height:92vh;overflow:auto;background:var(--surface);border-top-left-radius:16px;border-top-right-radius:16px;z-index:31;padding:16px 18px 30px;box-shadow:0 -10px 40px rgba(15,18,15,.18)}
@media(min-width:760px){.sheet{left:50%;right:auto;width:640px;transform:translateX(-50%);bottom:auto;top:6vh;border-radius:var(--r);max-height:88vh;padding:24px 26px 28px}}
.sheet h2{margin:4px 0 2px;font-size:22px}.sheet .sub{color:var(--ink-2);font-size:13px;margin-bottom:14px}
.kv{display:grid;grid-template-columns:120px 1fr;gap:6px 10px;font-size:14px;margin:10px 0}.kv div:nth-child(odd){color:var(--ink-3);font-size:12.5px}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-s);padding:11px 14px;font-weight:500;cursor:pointer;text-decoration:none;color:var(--ink);font-size:14px}
.btn:hover{background:var(--raised)}
.btn.p{background:var(--btn);border-color:var(--btn);color:var(--btn-ink);font-weight:600}.btn.p:hover{opacity:.88;background:var(--btn)}
.btn.danger{border-color:#F0D5D2;color:var(--crit)}.btn.sm{padding:7px 10px;font-size:13px}.btn:disabled{opacity:.5;cursor:default}
.btn.rec{background:var(--crit);border-color:var(--crit);color:#fff;font-weight:600}
.row{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}.row>*{flex:1 1 auto}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-bottom:10px;box-shadow:var(--shadow)}
.card h3{margin:0 0 4px;font-size:15px}.card .hint{color:var(--ink-2);font-size:13px;margin-bottom:8px;line-height:1.5}
.card.done{border-color:var(--accent-line);background:#FBFDF9}.card.done h3::after{content:" ✓";color:var(--ok)}
.close{position:absolute;right:14px;top:10px;background:none;border:0;color:var(--ink-3);font-size:22px;cursor:pointer}
.note{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--sage);border-radius:var(--r-s);padding:11px 14px;font-size:13px;color:var(--ink-2);margin:10px 0;line-height:1.55}
.warn{background:var(--warn-bg);border:1px solid #F3DDB8;border-radius:var(--r-s);padding:11px 14px;font-size:13px;color:var(--warn);margin:10px 0}
.err{background:var(--crit-bg);border:1px solid #F0D5D2;border-radius:var(--r-s);padding:11px 14px;font-size:13px;color:var(--crit);margin:10px 0}
.ok{background:var(--ok-bg);border:1px solid var(--accent-line);border-radius:var(--r-s);padding:11px 14px;font-size:13px;color:var(--ok);margin:10px 0}
/* recorder (stays dark — it's a camera viewfinder) */
.recorder{position:fixed;inset:0;background:#000;z-index:40;display:flex;flex-direction:column;color-scheme:dark}
.recorder video{flex:1;width:100%;object-fit:cover;background:#000}
.recorder .bar{padding:12px 16px calc(16px + env(safe-area-inset-bottom));background:rgba(0,0,0,.8);display:flex;align-items:center;gap:12px;color:#fff}
.recorder .bar .btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);color:#fff}
.recorder .bar .t{font-variant-numeric:tabular-nums;font-size:18px;font-weight:700}
.recorder .hud{position:absolute;top:0;left:0;right:0;padding:14px 16px;background:linear-gradient(180deg,rgba(0,0,0,.75),transparent);color:#fff}
.recorder .hud b{display:block;font-size:17px}.recorder .hud span{font-size:13px;opacity:.85}
.recdot{width:12px;height:12px;border-radius:50%;background:var(--crit);animation:blink 1s infinite}@keyframes blink{50%{opacity:.2}}
.prog{height:6px;background:#EEF3EE;border-radius:3px;overflow:hidden;margin-top:8px}.prog i{display:block;height:100%;background:var(--sage-d);width:0;transition:width .2s}
.thumbs{display:flex;gap:6px;overflow-x:auto;margin-top:8px}.thumbs img{height:54px;border-radius:4px;border:1px solid var(--line)}
/* login gate — same card as the staff hub */
.login{position:fixed;inset:0;display:grid;place-items:center;background:var(--ground);padding:24px;z-index:60}
.login .gate-card{width:min(390px,100%);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:34px;box-shadow:var(--shadow)}
.mark{display:flex;align-items:center;gap:11px;margin-bottom:26px}
.mark-badge{width:36px;height:36px;border-radius:var(--r-s);background:var(--btn);color:var(--btn-ink);display:grid;place-items:center;font-weight:700;font-size:13px}
.mark-name{font-weight:700;font-size:14px;letter-spacing:-.01em}.mark-sub{font-size:11.5px;color:var(--ink-3);margin-top:1px}
.login h1{font-size:23px;font-weight:700;letter-spacing:-.03em;margin-bottom:7px}
.login p{color:var(--ink-2);font-size:13.5px;margin:0 0 18px}
.login .btn{width:100%;margin-top:8px}
label.l{display:block;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:12px 0 6px}
.radios label{display:flex;gap:8px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}
.hist{display:grid;grid-template-columns:1fr auto;gap:6px 10px;padding:11px 0;border-top:1px solid var(--line);font-size:14px}.hist .m{color:var(--ink-3);font-size:12px}
.badge{display:inline-block;padding:3px 8px;border-radius:3px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.badge.Good{background:var(--ok-bg);color:var(--ok)}.badge.Fair{background:var(--warn-bg);color:var(--warn)}.badge.Poor{background:var(--crit-bg);color:var(--crit)}
.rep h4{margin:14px 0 4px;font-size:15px}.rep li{margin:3px 0}.rep .urgent{color:var(--crit)}.rep .major,.rep .high{color:var(--warn)}.rep .minor{color:var(--ink)}.rep .info{color:var(--ink-2)}
.small{font-size:12px;color:var(--ink-3)}
.lbl{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:500}