/* Caissonix shared UI (one look across VendorGuard, HOA Docs and Rebuild Tracker).
   SOURCE OF TRUTH: /workspace/caissonix-accounts/ui/cx-ui.css (scripts/sync.sh copies it to each app's public/cx/). */
:root{--cx-accent:#fd5806;--cx-accent-ink:#16191d;--cx-accent-soft:#fff1e8;--cx-navy:#1c232c;--cx-navy-2:#2a3442;--cx-slate:#475569;--cx-muted:#64748b;--cx-line:#e2e8f0;--cx-bg:#f6f7f9;--cx-ok:#15803d;--cx-bad:#b91c1c;--cx-radius:14px;--cx-shadow:0 10px 30px rgba(15,23,42,.14)}
.cx-skip{position:absolute;left:-999px;top:0;background:var(--cx-navy);color:#fff;padding:8px 14px;z-index:100;border-radius:0 0 8px 0}.cx-skip:focus{left:0}
:focus-visible{outline:3px solid var(--cx-accent);outline-offset:2px}
.cx-banner{background:var(--cx-navy);color:#e2e8f0;text-align:center;font-size:.8rem;padding:6px 12px;line-height:1.4}.cx-banner b{color:var(--cx-accent)}.cx-banner a{color:#fdba74}
/* header */
.cxh{background:#fff;border-bottom:1px solid var(--cx-line);box-shadow:0 1px 10px rgba(15,23,42,.05);position:sticky;top:0;z-index:30}
.cxh-bar{max-width:1240px;margin:0 auto;padding:0 20px;height:62px;display:flex;align-items:center;gap:14px}
.cxh-menu{display:none;border:0;background:transparent;width:40px;height:40px;border-radius:10px;cursor:pointer;color:var(--cx-navy);font-size:1.3rem;line-height:1}
.cxh-menu:hover{background:var(--cx-bg)}
.cxh-brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.cxh-brand img{height:34px;display:block}
.cxh-brand span{font-weight:800;color:var(--cx-navy);letter-spacing:.03em;border-left:2px solid var(--cx-line);padding-left:10px;white-space:nowrap;font-size:.95rem;text-transform:uppercase}
.cxh-brand span b{color:var(--cx-accent)}
.cxh-tabs{display:flex;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none}.cxh-tabs::-webkit-scrollbar{display:none}
.cxh-tabs a{text-decoration:none;color:var(--cx-slate);font-weight:600;font-size:.88rem;padding:8px 11px;border-radius:9px;white-space:nowrap}
.cxh-tabs a:hover{background:var(--cx-bg);color:var(--cx-navy)}
.cxh-tabs a.on,.cxh-tabs a[aria-current=page]{background:var(--cx-navy);color:#fff}
.cxh-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex-shrink:0}
.cxh-icon{border:1.5px solid var(--cx-line);background:#fff;border-radius:999px;width:34px;height:34px;cursor:pointer;font-weight:800;color:var(--cx-navy);font-size:.9rem}
.cxh-icon:hover{border-color:var(--cx-accent)}
.cxh-acct{position:relative}
.cxh-acct-btn{display:flex;align-items:center;gap:8px;border:1.5px solid var(--cx-line);background:#fff;border-radius:999px;padding:3px 12px 3px 3px;cursor:pointer;font:inherit;font-size:.84rem;color:var(--cx-navy);max-width:230px}
.cxh-acct-btn:hover{border-color:var(--cx-accent)}
.cxh-av{width:28px;height:28px;border-radius:50%;background:var(--cx-navy);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.75rem;flex-shrink:0}
.cxh-acct-btn .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cxh-pop{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--cx-line);border-radius:var(--cx-radius);box-shadow:var(--cx-shadow);width:290px;padding:8px;z-index:40}
.cxh-pop[hidden]{display:none}
.cxh-pop .hd{padding:8px 10px 10px;border-bottom:1px solid var(--cx-line);margin-bottom:6px;font-size:.82rem;color:var(--cx-slate)}.cxh-pop .hd b{display:block;color:var(--cx-navy);font-size:.9rem;overflow:hidden;text-overflow:ellipsis}
.cxh-pop .sec{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--cx-muted);font-weight:800;padding:8px 10px 4px}
.cxh-pop a,.cxh-pop button.it{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 10px;border-radius:9px;text-decoration:none;color:var(--cx-navy);font:inherit;font-size:.88rem;background:none;border:0;cursor:pointer}
.cxh-pop a:hover,.cxh-pop button.it:hover,.cxh-pop a:focus-visible,.cxh-pop button.it:focus-visible{background:var(--cx-bg)}
.cxh-pop .cur{font-weight:800}.cxh-pop .cur::after{content:"✓";margin-left:auto;color:var(--cx-accent)}
.cxh-pop .dot{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.cxh-pop .out{color:var(--cx-bad);border-top:1px solid var(--cx-line);border-radius:0 0 9px 9px;margin-top:6px}
.cxh-signin{font-weight:700;font-size:.88rem;color:var(--cx-navy)}
.cxh-drawer{position:fixed;inset:0;z-index:50;background:rgba(15,23,42,.45)}
.cxh-drawer[hidden]{display:none}
.cxh-drawer .pane{position:absolute;left:0;top:0;bottom:0;width:min(86vw,320px);background:#fff;padding:14px;overflow:auto;box-shadow:var(--cx-shadow);display:flex;flex-direction:column;gap:2px}
.cxh-drawer .pane a,.cxh-drawer .pane button.it{display:block;padding:12px 12px;border-radius:10px;text-decoration:none;color:var(--cx-navy);font-weight:600;font:inherit;font-weight:600;background:none;border:0;text-align:left;cursor:pointer;width:100%}
.cxh-drawer .pane a.on{background:var(--cx-navy);color:#fff}
.cxh-drawer .sec{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--cx-muted);font-weight:800;padding:14px 12px 4px}
.cxh-drawer .out{color:var(--cx-bad)}
@media (max-width:980px){.cxh-tabs{display:none}.cxh-menu{display:block}.cxh-acct-btn .lbl{display:none}.cxh-acct-btn{padding:3px}.cxh-bar{padding:0 12px;gap:8px}}
@media (max-width:420px){.cxh-brand{min-width:0;gap:8px}.cxh-brand img{height:26px;width:auto}.cxh-brand span{font-size:.78rem;padding-left:8px;white-space:nowrap}.cxh-right{gap:6px;flex-shrink:0}.cxh-icon{width:30px;height:30px}.cxh-signin{padding:5px 10px;font-size:.8rem}}
@media (max-width:360px){.cxh-brand img{display:none}.cxh-brand span{border-left:0;padding-left:0}}
/* toast */
.cx-toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(10px);background:var(--cx-navy);color:#fff;padding:11px 18px;border-radius:12px;font-size:.9rem;opacity:0;transition:opacity .18s,transform .18s;pointer-events:none;z-index:90;max-width:min(92vw,560px);box-shadow:var(--cx-shadow)}
.cx-toast.on{opacity:1;transform:translateX(-50%)}.cx-toast.err{background:var(--cx-bad)}.cx-toast.ok::before{content:"✓ ";color:#86efac;font-weight:800}
/* dialog */
dialog.cx-dlg{border:0;border-radius:16px;padding:0;max-width:min(92vw,480px);width:100%;box-shadow:var(--cx-shadow)}
dialog.cx-dlg::backdrop{background:rgba(15,23,42,.5)}
dialog.cx-dlg .in{padding:22px 22px 18px}dialog.cx-dlg h2{font-size:1.1rem;color:var(--cx-navy);margin:0 0 8px}dialog.cx-dlg p{color:var(--cx-slate);font-size:.92rem;margin:0}
dialog.cx-dlg .acts{display:flex;gap:10px;justify-content:flex-end;padding:0 22px 20px}
.cx-btn{display:inline-flex;align-items:center;gap:6px;background:var(--cx-accent);color:var(--cx-accent-ink);font-weight:700;border:0;border-radius:999px;padding:9px 18px;cursor:pointer;font:inherit;font-weight:700;font-size:.9rem;text-decoration:none}
.cx-btn.ghost{background:#fff;border:1.5px solid var(--cx-line);color:var(--cx-navy)}.cx-btn.danger{background:var(--cx-bad);color:#fff}
/* tour */
.cx-tour-ring{position:fixed;z-index:80;border-radius:12px;box-shadow:0 0 0 4px var(--cx-accent),0 0 0 9999px rgba(15,23,42,.55);pointer-events:none;transition:all .2s}
.cx-tour{position:fixed;z-index:81;background:#fff;border-radius:16px;box-shadow:var(--cx-shadow);width:min(92vw,360px);padding:18px 18px 14px}
.cx-tour .step{font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--cx-accent)}
.cx-tour h3{font-size:1.05rem;color:var(--cx-navy);margin:4px 0 6px}.cx-tour p{font-size:.9rem;color:var(--cx-slate);margin:0 0 12px;line-height:1.5}
.cx-tour .acts{display:flex;gap:8px;align-items:center}.cx-tour .acts .skip{margin-right:auto;background:none;border:0;color:var(--cx-muted);cursor:pointer;font:inherit;font-size:.84rem}
@media (max-width:600px){.cx-tour{left:4vw!important;right:4vw;bottom:14px!important;top:auto!important;width:auto}}
/* empty states, skeletons, search bars */
.cx-empty{text-align:center;padding:34px 20px;background:#fff;border:1.5px dashed var(--cx-line);border-radius:var(--cx-radius);color:var(--cx-slate)}
.cx-empty .ic{font-size:2rem;line-height:1;margin-bottom:8px}.cx-empty h3{color:var(--cx-navy);font-size:1.02rem;margin:0 0 4px}.cx-empty p{margin:0 auto 12px;max-width:460px;font-size:.9rem}
.cx-skel{display:grid;gap:12px}.cx-skel i{display:block;height:16px;border-radius:8px;background:linear-gradient(90deg,#eef2f7 0,#f8fafc 40%,#eef2f7 80%);background-size:300% 100%;animation:cxsk 1.2s infinite}
.cx-skel i.h{height:28px;width:40%}.cx-skel i.b{height:90px}@keyframes cxsk{0%{background-position:100% 0}100%{background-position:0 0}}
.cx-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:14px 0 12px}
.cx-search{position:relative;flex:1;min-width:200px;max-width:380px}.cx-search input{width:100%;padding:9px 12px 9px 34px!important;border:1.5px solid var(--cx-line);border-radius:999px;font:inherit;font-size:.9rem;background:#fff}
.cx-search::before{content:"";position:absolute;left:13px;top:50%;width:11px;height:11px;border:2px solid var(--cx-muted);border-radius:50%;transform:translateY(-62%)}
.cx-search::after{content:"";position:absolute;left:24px;top:58%;width:2px;height:6px;background:var(--cx-muted);transform:rotate(-45deg)}
.cx-seg{display:inline-flex;border:1.5px solid var(--cx-line);border-radius:999px;overflow:hidden;background:#fff;flex-wrap:wrap}
.cx-seg button{border:0;background:none;padding:6px 12px;font:inherit;font-size:.8rem;font-weight:700;color:var(--cx-slate);cursor:pointer}
.cx-seg button[aria-pressed=true]{background:var(--cx-navy);color:#fff}
.cx-count{font-size:.8rem;color:var(--cx-muted)}
.cx-bulk{display:flex;gap:10px;align-items:center;background:var(--cx-navy);color:#fff;border-radius:12px;padding:8px 12px;margin:8px 0;font-size:.88rem;flex-wrap:wrap}.cx-bulk[hidden]{display:none}
.cx-bulk .cx-btn{padding:6px 12px;font-size:.8rem}
.cx-err{color:var(--cx-bad);font-size:.78rem;font-weight:600;margin-top:2px}
input[aria-invalid=true],select[aria-invalid=true]{border-color:var(--cx-bad)!important;background:#fff7f7}
.cx-help-list{list-style:none;display:grid;gap:8px;margin:10px 0 0;padding:0}.cx-help-list kbd{display:inline-block;min-width:22px;text-align:center;border:1px solid var(--cx-line);border-bottom-width:2px;border-radius:6px;padding:1px 6px;font:inherit;font-size:.8rem;font-weight:700;background:#f8fafc;margin-right:8px}
.cx-tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
tr[data-href]{cursor:pointer}tr[data-href]:focus-visible{outline:3px solid var(--cx-accent);outline-offset:-3px}
/* phone layout for data tables: each row becomes a card with labeled cells */
@media (max-width:700px){
 table.cx-resp,table.cx-resp tbody,table.cx-resp tr,table.cx-resp td{display:block;width:100%!important}
 table.cx-resp{border:0!important;background:transparent!important}
 table.cx-resp tr.cx-head,table.cx-resp thead{display:none}
 table.cx-resp tr{background:#fff;border:1px solid var(--cx-line);border-radius:12px;margin-bottom:10px;padding:6px 4px}
 table.cx-resp td{border:0!important;padding:5px 10px!important}
 table.cx-resp td[data-label]:not([data-label=""])::before{content:attr(data-label);display:block;font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--cx-muted);margin-bottom:1px}
 table.cx-resp td:empty{display:none}
 table.cx-resp input:not([type=checkbox]):not([type=radio]),table.cx-resp select{width:100%!important;max-width:100%}
}
@media print{.cxh,.cx-banner,.cx-toast,.cx-tour,.cx-tour-ring,.cx-noprint,.cx-tools,.cx-bulk{display:none!important}}
/* sign-in page */
.cx-auth,.cx-auth *{box-sizing:border-box}
.cx-auth{min-height:calc(100vh - 34px);display:grid;place-items:center;padding:30px 16px;background:radial-gradient(1200px 500px at 50% -10%,#fff1e8,transparent),var(--cx-bg)}
.cx-auth .box{width:100%;max-width:440px;background:#fff;border:1px solid var(--cx-line);border-radius:20px;padding:30px 28px;box-shadow:0 20px 50px rgba(15,23,42,.08);text-align:center}
.cx-auth .box img{height:44px;margin-bottom:12px}.cx-auth h1{font-size:1.45rem;color:var(--cx-navy);margin:0 0 4px}.cx-auth h1 b{color:var(--cx-accent)}
.cx-auth .lead{color:var(--cx-slate);margin:0 0 18px;font-size:.95rem}
.cx-auth .cx-btn{width:100%;justify-content:center;padding:12px 18px;font-size:.95rem}
.cx-auth .demo-note{font-size:.8rem;color:var(--cx-muted);margin:8px 0 0}
.cx-auth .or{display:flex;align-items:center;gap:10px;color:var(--cx-muted);font-size:.78rem;margin:20px 0 14px}.cx-auth .or::before,.cx-auth .or::after{content:"";flex:1;height:1px;background:var(--cx-line)}
.cx-auth form{display:grid;gap:8px;text-align:left}.cx-auth label{font-size:.8rem;font-weight:700;color:var(--cx-slate)}
.cx-auth input[type=email]{width:100%;font:inherit;padding:11px 13px;border:1.5px solid var(--cx-line);border-radius:12px}
.cx-auth .msg{margin-top:12px;font-size:.88rem;border-radius:10px;padding:0;text-align:left}.cx-auth .msg:not(:empty){padding:10px 12px;background:#f1f5f9;color:var(--cx-navy)}.cx-auth .msg.err:not(:empty){background:#fee2e2;color:#7f1d1d}.cx-auth .msg.ok:not(:empty){background:#dcfce7;color:#14532d}
.cx-auth .apps{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:18px}.cx-auth .apps span{font-size:.72rem;font-weight:700;border:1px solid var(--cx-line);border-radius:999px;padding:3px 9px;color:var(--cx-slate)}.cx-auth .apps span.cur{border-color:var(--cx-accent);color:var(--cx-navy)}
.cx-auth .fine{font-size:.75rem;color:var(--cx-muted);margin-top:16px}
.cxh-tabs{min-width:0;overflow-x:auto;scrollbar-width:none}.cxh-tabs::-webkit-scrollbar{display:none}
.cxh-acct-btn .lbl{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width:1180px){.cxh-acct-btn .lbl{display:none}.cxh-acct-btn{padding:3px}}
@media (max-width:1240px){.cxh-tabs a{padding:7px 8px;font-size:.85rem}}@media (max-width:1100px){.cxh.many .cxh-tabs{display:none}.cxh.many .cxh-menu{display:block}}
dialog.cx-dlg{margin:auto}dialog.cx-dlg[open]{position:fixed;inset:0}
/* install hint (cx-pwa.js) */
.cx-pwa{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:35;display:flex;align-items:center;gap:12px;max-width:440px;background:#fff;border:1px solid var(--cx-line);border-radius:var(--cx-radius);box-shadow:var(--cx-shadow);padding:12px 40px 12px 12px;font-size:.86rem;color:var(--cx-slate);opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s}
.cx-pwa.on{opacity:1;transform:none}
.cx-pwa img{border-radius:10px;flex-shrink:0}
.cx-pwa .t{display:flex;flex-direction:column;gap:2px;min-width:0}.cx-pwa .t>b{color:var(--cx-navy);font-size:.92rem}.cx-pwa .cx-pwa-note{font-size:.76rem;color:var(--cx-muted)}
.cx-pwa .a{display:flex;gap:6px;flex-shrink:0}.cx-pwa .cx-btn{padding:7px 12px;font-size:.84rem}
.cx-pwa .x{position:absolute;top:6px;right:6px;width:28px;height:28px;border:0;background:transparent;border-radius:8px;font-size:1.2rem;line-height:1;color:var(--cx-muted);cursor:pointer}.cx-pwa .x:hover{background:var(--cx-bg);color:var(--cx-navy)}
@media (max-width:600px){.cx-pwa{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));max-width:none;display:grid;grid-template-columns:40px 1fr;align-items:start;column-gap:12px;row-gap:10px}.cx-pwa.on{display:grid}.cx-pwa .a{grid-column:2}}
@media (display-mode:standalone){.cx-pwa{display:none}}