:root{
  --bg:#f4f6f9; --panel:#ffffff; --panel2:#f7f9fc; --line:#e7eaf0; --line2:#dde2ec;
  --ink:#0f1628; --ink2:#38415a; --mut:#6b7488; --faint:#9aa2b4;
  --brand:#0e1626; --brand2:#182338;
  --accent:#2563eb; --accent2:#1d4ed8; --accent-soft:#eaf1ff; --indigo:#4f46e5; --indigo-soft:#eceafe;
  --ok:#16a34a; --ok-bg:#e7f6ec; --soon:#d97706; --soon-bg:#fdf0df; --bad:#dc2626; --bad-bg:#fdeaea;
  --radius:15px; --radius-s:11px;
  --shadow:0 1px 2px rgba(15,22,40,.04),0 4px 16px rgba(15,22,40,.05);
  --shadow-s:0 1px 2px rgba(15,22,40,.05);
  --font:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-head:'Space Grotesk','Poppins',system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:'JetBrains Mono',ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --side-w:236px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0b1120; --panel:#141d31; --panel2:#1a2438; --line:#25314a; --line2:#31405f;
  --ink:#eaf0fb; --ink2:#c3ccdd; --mut:#93a0ba; --faint:#6b7794; --brand:#0a1120; --brand2:#141d31;
  --accent:#5b8cff; --accent2:#3b73f0; --accent-soft:#182642; --indigo:#8b83ff; --indigo-soft:#231f45;
  --ok:#3ecb7d; --ok-bg:#123024; --soon:#f0a83a; --soon-bg:#33280f; --bad:#f56b6b; --bad-bg:#331717;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.30);
}}
:root[data-theme="dark"]{
  --bg:#0b1120; --panel:#141d31; --panel2:#1a2438; --line:#25314a; --line2:#31405f;
  --ink:#eaf0fb; --ink2:#c3ccdd; --mut:#93a0ba; --faint:#6b7794; --brand:#0a1120; --brand2:#141d31;
  --accent:#5b8cff; --accent2:#3b73f0; --accent-soft:#182642; --indigo:#8b83ff; --indigo-soft:#231f45;
  --ok:#3ecb7d; --ok-bg:#123024; --soon:#f0a83a; --soon-bg:#33280f; --bad:#f56b6b; --bad-bg:#331717;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.30);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);line-height:1.45;-webkit-text-size-adjust:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-family:var(--font-head);letter-spacing:-.02em}
.mono{font-family:var(--mono)}

.app{display:flex;min-height:100vh}

/* ---------- sidebar ---------- */
.sidebar{width:var(--side-w);flex:none;background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:40}
.side-brand{display:flex;align-items:center;gap:.6rem;padding:1.1rem 1.1rem .9rem}
.side-brand .mark{width:34px;height:34px;border-radius:9px}
.side-brand-t b{font-family:var(--font-head);font-weight:800;font-size:1.15rem;display:block;letter-spacing:-.02em}
.side-brand-t small{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:700}
.side-nav{display:flex;flex-direction:column;gap:.12rem;padding:.4rem .6rem;overflow-y:auto;flex:1}
.side-nav a{display:flex;align-items:center;gap:.7rem;padding:.6rem .7rem;border-radius:10px;
  font-weight:600;font-size:.92rem;color:var(--ink2);position:relative}
.side-nav a i{font-style:normal;font-size:1.15rem;width:1.4rem;text-align:center;line-height:1}
.side-nav a:hover{background:var(--panel2)}
.side-nav a.active{background:var(--accent-soft);color:var(--accent2)}
.side-nav a.active::before{content:"";position:absolute;left:-.6rem;top:.5rem;bottom:.5rem;width:3px;border-radius:3px;background:var(--accent)}
.side-foot{border-top:1px solid var(--line);padding:.8rem;display:flex;flex-direction:column;gap:.5rem}
.tenant-card,.user-mini{display:flex;align-items:center;gap:.6rem}
.tenant-card{background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:.55rem .65rem}
.tenant-card .tlogo{width:44px;height:44px;flex:none;display:grid;place-items:center;font-size:1.6rem}
.tenant-card .tlogo img{width:100%;height:100%;object-fit:contain}
/* both text lines switched off → the logo fills the card on its own */
.tenant-card.solo{background:none;border-color:transparent;padding:.35rem 0;margin:0 -.8rem}
.tenant-card .tlogo.solo{display:block;width:100%;height:auto;text-align:center;font-size:2.4rem}
.tenant-card .tlogo.solo img{width:100%;height:auto;max-height:120px;object-fit:contain}
.tenant-card b,.user-mini b{font-size:.85rem;display:block;letter-spacing:-.01em}
.tenant-card small,.user-mini small{font-size:.7rem;color:var(--faint)}
.user-mini{padding:.1rem .3rem}
/* display:flex above beats the UA's [hidden] rule, so restate it */
.user-mini[hidden]{display:none}
.user-mini .role.acting{color:var(--soon);font-weight:700}
.ua{width:32px;height:32px;border-radius:9px;background:var(--indigo-soft);color:var(--indigo);
  display:grid;place-items:center;font-weight:800;font-size:.8rem;flex:none}
.role{color:var(--indigo)!important;font-weight:700}

/* ---------- topbar ---------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:.8rem;background:var(--panel);
  border-bottom:1px solid var(--line);padding:.65rem 1.3rem;padding-top:calc(.65rem + env(safe-area-inset-top))}
.hamburger{display:none;background:var(--panel2);border:1px solid var(--line);border-radius:9px;width:36px;height:36px;font-size:1.1rem;cursor:pointer;color:var(--ink)}
.crumb{font-family:var(--font-head);font-weight:700;font-size:1rem;color:var(--ink)}
.tenant{margin:0 auto;display:flex;align-items:center;gap:.5rem;min-width:0;font-weight:800;font-family:var(--font-head);letter-spacing:-.01em;color:var(--ink);font-size:1.02rem}
.tenant .tlogo-top{height:28px;max-width:150px;object-fit:contain;flex:none}
.tenant .tname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-right{display:flex;align-items:center;gap:.7rem}
.icon-btn{background:var(--panel2);border:1px solid var(--line);border-radius:9px;width:36px;height:36px;font-size:1rem;cursor:pointer;color:var(--ink)}
.rolesel{background:var(--panel2);border:1px solid var(--line);border-radius:9px;color:var(--ink);font-size:.78rem;font-weight:700;padding:.35rem .5rem;cursor:pointer}
.sync{display:inline-flex;align-items:center;gap:.4rem;font-size:.73rem;font-weight:700;background:var(--panel2);
  border:1px solid var(--line);padding:.32rem .6rem;border-radius:999px;color:var(--mut)}
.sync .d{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.sync.off .d{background:var(--soon)} .sync.pending .d{background:#f5b301}
.user-chip{display:flex;align-items:center;gap:.5rem}
.user-chip .uc-t b{font-size:.82rem;display:block;line-height:1.1}
.user-chip .uc-t small{font-size:.68rem;color:var(--faint)}

.scrim{display:none;position:fixed;inset:0;background:rgba(8,12,22,.45);z-index:35}

/* ---------- page ---------- */
main{padding:1.5rem 1.8rem 3rem;max-width:1240px;width:100%;margin:0 auto}
.loading{color:var(--faint);padding:2rem 0}
.page-head{display:flex;align-items:flex-start;gap:.8rem;margin:.2rem 0 1.3rem;flex-wrap:wrap}
.page-head .ph-ic{font-size:1.7rem;line-height:1}
.page-head h1{font-size:1.75rem;font-weight:800}
.page-head .sub{color:var(--mut);font-size:.9rem;margin-top:.15rem}
.page-head .spacer{margin-left:auto}
.count-chip{font-size:.75rem;font-weight:700;color:var(--mut);background:var(--panel);border:1px solid var(--line);padding:.3rem .7rem;border-radius:999px}

/* toolbar / filter card */
.toolbar{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:.8rem;display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin-bottom:1.3rem}
.search{flex:1;min-width:200px;position:relative}
.search input{width:100%;padding:.65rem .8rem .65rem 2.2rem}
.search::before{content:"🔍";position:absolute;left:.7rem;top:50%;transform:translateY(-50%);font-size:.85rem;opacity:.6}
input,select,textarea{background:var(--panel);border:1px solid var(--line2);border-radius:10px;color:var(--ink);
  padding:.65rem .75rem;font-size:.92rem;font-family:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
select{cursor:pointer}

/* stat cards */
.statgrid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-bottom:1.6rem}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.05rem 1.15rem;position:relative}
.stat .k{font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.stat .v{font-family:var(--font-head);font-size:2rem;font-weight:800;letter-spacing:-.03em;margin-top:.2rem;line-height:1}
.stat .c{font-size:.78rem;color:var(--faint);margin-top:.35rem}
.stat .ic{position:absolute;top:1rem;right:1.1rem;font-size:1.05rem;opacity:.85}
.stat.bad .v{color:var(--bad)} .stat.warn .v{color:var(--soon)} .stat.good .v{color:var(--ok)}
.stat.dark{background:var(--brand);border-color:var(--brand2);color:#eaf0fb}
.stat.dark .k{color:#9fb0d0} .stat.dark .c{color:#8494b4}
.stat.clickable{cursor:pointer;transition:transform .08s ease,box-shadow .14s ease,border-color .14s ease}
.stat.clickable:hover{transform:translateY(-1px);box-shadow:0 5px 20px rgba(15,22,40,.09);border-color:var(--line2)}
.stat.clickable:active{transform:translateY(0)}

/* card grid + entity cards */
.cardgrid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
.ecard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.55rem}
.ecard-top{display:flex;align-items:center;gap:.6rem}
.idchip{font-family:var(--mono);font-weight:700;font-size:.86rem;background:var(--brand);color:#eaf0fb;
  padding:.28rem .55rem;border-radius:8px;letter-spacing:.02em;white-space:nowrap}
.ecard-sub{font-family:var(--mono);font-size:.8rem;color:var(--mut)}
/* "NEW" marker on freshly-added forms */
.formtile{position:relative;overflow:hidden}
.formtile.isnew{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--shadow)}
.newflag{position:absolute;top:0;right:0;background:var(--accent);color:#fff;font-family:var(--font-head);
  font-weight:800;font-size:.66rem;letter-spacing:.04em;padding:.2rem .55rem;border-bottom-left-radius:9px;
  box-shadow:0 2px 6px rgba(0,0,0,.18);z-index:1}
.tabbar.sub{margin:.1rem 0 .7rem}
.tabbar.sub button{font-size:.82rem;padding:.32rem .7rem}
.ecard-fields{display:grid;grid-template-columns:1fr 1fr;gap:.5rem .8rem;margin-top:.1rem}
.ecard-fields .fl{font-size:.66rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--faint)}
.ecard-fields .fv{font-size:.9rem;font-weight:600;color:var(--ink)}
.compliance{display:flex;flex-direction:column;gap:.3rem;border-top:1px dashed var(--line2);padding-top:.55rem}
.crow{display:flex;align-items:center;gap:.5rem;font-size:.82rem}
.crow .cl{color:var(--mut);min-width:74px}
.crow .cv{margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums}
.dot{width:9px;height:9px;border-radius:50%;background:var(--faint);flex:none}
.dot.ok{background:var(--ok)} .dot.soon{background:var(--soon)} .dot.overdue{background:var(--bad)}
.ecard-foot{display:flex;align-items:center;gap:.5rem;border-top:1px solid var(--line);padding-top:.6rem;margin-top:.1rem}
.ecard-foot .fnote{font-size:.7rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--faint)}
.ecard-foot .acts{margin-left:auto;display:flex;gap:.35rem}
.iconbtn{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--mut);cursor:pointer;font-size:.8rem}
.iconbtn:hover{background:var(--panel2);color:var(--ink)}
.avatar-tile{width:40px;height:40px;border-radius:10px;background:var(--panel2);border:1px solid var(--line);display:grid;place-items:center;font-size:1.1rem;flex:none}

/* status pills */
.status{font-size:.68rem;font-weight:800;letter-spacing:.03em;padding:.22rem .6rem;border-radius:999px;white-space:nowrap;text-transform:uppercase}
.status.active,.status.available,.status.ok,.status.current,.status.passed{background:var(--ok-bg);color:var(--ok)}
.status.soon,.status.attention,.status.medium,.status.maintenance{background:var(--soon-bg);color:var(--soon)}
.status.overdue,.status.failed,.status.open,.status.high,.status.oos{background:var(--bad-bg);color:var(--bad)}
.status.none,.status.neutral{background:var(--panel2);color:var(--mut);border:1px solid var(--line)}
.status.role{background:var(--indigo-soft);color:var(--indigo)}
.status.done{background:var(--indigo-soft);color:var(--indigo)}
.ml-auto{margin-left:auto}

/* profile cards */
.profile{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1rem 1.1rem}
.profile-top{display:flex;align-items:center;gap:.7rem}
.profile-top .ua{width:40px;height:40px;font-size:.9rem;border-radius:10px}
.profile-top b{font-size:1rem;display:block}
.profile-top small{color:var(--mut);font-size:.8rem}
.profile-rows{margin-top:.7rem;display:flex;flex-direction:column;gap:.25rem;border-top:1px solid var(--line);padding-top:.6rem}
.profile-rows .r{display:flex;font-size:.82rem}.profile-rows .r .l{color:var(--faint)}.profile-rows .r .v{margin-left:auto;font-weight:600;font-family:var(--mono);font-size:.78rem}

/* tabs (segmented) */
.tabbar{display:inline-flex;gap:.2rem;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:.25rem;box-shadow:var(--shadow-s);margin-bottom:1.2rem;flex-wrap:wrap}
.tabbar button{border:none;background:transparent;color:var(--mut);font-weight:700;font-size:.85rem;padding:.45rem .85rem;border-radius:8px;cursor:pointer;font-family:inherit}
.tabbar button.on{background:var(--panel2);color:var(--ink);box-shadow:var(--shadow-s)}

/* issue / action cards */
.acard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1rem 1.15rem;margin-bottom:.8rem}
.acard .row1{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.4rem}
.acard h3{font-size:1rem;font-family:var(--font);font-weight:700;letter-spacing:0}
.acard .desc{color:var(--mut);font-size:.88rem;margin-top:.15rem}
.acard .meta{color:var(--faint);font-family:var(--mono);font-size:.74rem;margin-top:.5rem}
.acard .cta{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.7rem}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;background:var(--accent);color:#fff;
  border:none;border-radius:10px;padding:.62rem 1rem;font-weight:700;font-size:.9rem;cursor:pointer;font-family:inherit}
.btn:hover{background:var(--accent2)} .btn:active{transform:translateY(1px)}
.btn.block{width:100%} .btn.sm{padding:.42rem .7rem;font-size:.82rem;border-radius:9px}
.btn.ghost{background:var(--panel);color:var(--ink);border:1px solid var(--line2)}
.btn.ghost:hover{background:var(--panel2)}

/* inspections / form fill */
.formcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.2rem 1.3rem;max-width:640px}
label.fl{display:block;font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);margin:.9rem 0 .35rem}
.formsec{margin-top:1.1rem}.formsec h3{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);font-family:var(--font);font-weight:800}
.q{padding:.8rem 0;border-bottom:1px solid var(--line)}
.q .qt{font-weight:600;font-size:.94rem}
.q .crit{color:var(--bad);font-size:.64rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;margin-left:.4rem}
.seg{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.4rem;margin-top:.5rem}
.seg button{padding:.55rem;border-radius:9px;border:1px solid var(--line2);background:var(--panel);font-weight:700;color:var(--mut);cursor:pointer;font-size:.88rem;font-family:inherit;-webkit-tap-highlight-color:transparent}
.seg button:focus{outline:none}
.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.seg button.sel[data-v="Pass"],.seg button.sel[data-v="Yes"]{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.seg button.sel[data-v="Fail"],.seg button.sel[data-v="No"]{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)}
.seg button.sel[data-v="N/A"]{background:var(--soon-bg);border-color:var(--soon);color:var(--soon)}

.empty{color:var(--faint);text-align:center;padding:2.6rem 1rem;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);font-style:italic}
.eyebrow{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin:1.6rem 0 .7rem}
.list-plain{display:flex;flex-direction:column;gap:.55rem}
.lrow{display:flex;align-items:center;gap:.8rem;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.75rem .95rem;box-shadow:var(--shadow-s)}
.lrow .main{min-width:0;flex:1}
.lrow .t{font-weight:700;font-size:.92rem;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.lrow .s{color:var(--mut);font-size:.8rem;margin-top:.12rem}
.lrow .rt{margin-left:auto;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}

/* combobox */
.combo{position:relative}
.combo-list{position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--panel);border:1px solid var(--line2);
  border-radius:10px;max-height:264px;overflow:auto;z-index:25;box-shadow:var(--shadow)}
.combo-list>div{padding:.55rem .7rem;cursor:pointer;font-size:.9rem;border-bottom:1px solid var(--line)}
.combo-list>div:last-child{border-bottom:none}
.combo-list>div:hover{background:var(--accent-soft)}
.combo-list .none{color:var(--faint);cursor:default}
/* clear-selection ✕ inside a combo field (big enough to hit with a thumb) */
.combo.has-clear > input{padding-right:2.4rem}
.combo-clear{position:absolute;top:0;right:0;height:100%;width:2.3rem;display:flex;align-items:center;justify-content:center;
  background:none;border:none;padding:0;margin:0;cursor:pointer;color:var(--mut);font-size:.95rem;line-height:1;border-radius:0 10px 10px 0}
.combo-clear:hover{color:var(--bad);background:var(--panel2)}
.combo-clear[hidden]{display:none}

/* edit pages */
.detail-head{background:var(--brand);color:#eaf0fb;border-radius:var(--radius);padding:1.1rem 1.25rem;
  display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-bottom:1.2rem;box-shadow:var(--shadow)}
.editgrid{display:grid;grid-template-columns:1fr 1fr;gap:.35rem 1.1rem}
.editgrid input,.editgrid select{width:100%}
@media(max-width:640px){.editgrid{grid-template-columns:1fr}}

/* photos */
.photo-edit{display:flex;align-items:center;gap:1rem;margin-bottom:.7rem}
.photo-frame{width:96px;height:72px;border-radius:10px;border:1px solid var(--line2);background:var(--panel2);display:grid;place-items:center;overflow:hidden;flex:none}
.photo-frame img{width:100%;height:100%;object-fit:cover}
.photo-frame .ph{font-size:1.5rem;opacity:.5}
.thumb{width:36px;height:27px;border-radius:6px;overflow:hidden;flex:none;border:1px solid var(--line2)}
.thumb img{width:100%;height:100%;object-fit:cover}

/* status picker (colour-coded) */
.statuspick{position:relative}
.statuspick-btn{display:flex;align-items:center;gap:.4rem;width:100%;justify-content:flex-start;background:var(--panel);border:1px solid var(--line2);border-radius:10px;padding:.5rem .6rem;cursor:pointer;font-family:inherit}
.statuspick-btn .caret{margin-left:auto;color:var(--faint)}
.statuspick-btn:disabled{opacity:.55;cursor:default}
.statuspick-list{position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--panel);border:1px solid var(--line2);border-radius:10px;box-shadow:var(--shadow);z-index:26;padding:.3rem}
.statuspick-opt{padding:.4rem .5rem;border-radius:8px;cursor:pointer}
.statuspick-opt:hover{background:var(--panel2)}

/* inspection defect capture */
.faildetail{margin-top:.55rem;padding:.65rem;border:1px solid color-mix(in srgb,var(--bad) 32%,transparent);background:var(--bad-bg);border-radius:10px}
.faildetail textarea{width:100%}
.fdrow{display:flex;align-items:center;gap:.6rem;margin-top:.5rem}
.fdimg{width:58px;height:44px;object-fit:cover;border-radius:7px;border:1px solid var(--line2)}
.notify-block{margin-top:1rem;padding-top:.85rem;border-top:1px solid var(--line)}
.chk{display:inline-flex;align-items:center;gap:.4rem;margin-right:1.1rem;font-weight:600;font-size:.92rem;cursor:pointer}
.chk input{width:auto}

/* QR overlay */
.qr-overlay{position:fixed;inset:0;background:rgba(8,12,22,.55);z-index:70;display:grid;place-items:center;padding:1rem}
.qr-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:1.3rem;text-align:center;max-width:340px;width:100%}
.qr-card .qr-label{font-family:var(--mono);font-weight:700;margin-bottom:.6rem}
.qr-img{width:250px;height:250px;max-width:100%;background:#fff;border-radius:10px;padding:8px;border:1px solid var(--line)}
.qr-url{font-size:.7rem;color:var(--faint);word-break:break-all;margin-top:.5rem}
.qr-actions{display:flex;gap:.5rem;justify-content:center;margin-top:.9rem}

/* jobs */
.jchips{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:.2rem 0 .3rem}
.jchip{display:inline-flex;align-items:center;gap:.35rem;background:var(--panel2);border:1px solid var(--line2);border-radius:999px;padding:.3rem .6rem;font-size:.82rem;font-weight:600}
.jchip small{color:var(--faint);font-weight:500}
.jchip .jx{border:none;background:none;color:var(--bad);cursor:pointer;font-size:.85rem;line-height:1;padding:0}
.muted{color:var(--faint);font-size:.85rem}
/* mobile-connectivity block on an asset (revealed by the tick box) */
.mobilebox{margin-top:.5rem;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;padding:.65rem .8rem;background:var(--panel2)}
.mobilebox[hidden]{display:none}
.mobile-toggle{align-items:center;gap:.4rem}
.mobilebox.locked{border-left-color:var(--faint);color:var(--mut);font-size:.85rem}
/* ---- switches instead of tick boxes -------------------------------------------------------------
   Red for off, green for on, as asked. Driven by a class on <body> so it is one preference rather
   than a change to every form in the app, and no markup moves.
   Deliberately NOT applied to multi-select answers on a form or to row-selection boxes in a list:
   those are "pick several of these", where a tick is the right idea and a row of red switches reads
   as a row of faults. */
/* A heading inside a card, for grouping settings. The field-label style is small grey uppercase,
   which is right for "Position" but reads as a caption when it is actually a section title. */
.subhead{font-family:var(--font-head);font-size:1rem;font-weight:800;color:var(--ink);
  letter-spacing:-.01em;margin:1.1rem 0 .5rem}
.subhead:first-of-type{margin-top:.2rem}
/* ---- control styles -------------------------------------------------------------------------
   One body class picks the look. Worth having more than a switch: a site phone is used in gloves,
   in the rain, at arm's length, and a 20px tick box is not a serious target. `chunky` and `tick`
   exist for that; `ios` for anyone who finds red/green shouty. */

/* TICK — a proper box with a tick, sized to be hit with a glove */
body.ctrl-tick input[type="checkbox"]:not(.qmulti input):not(.alert-cb):not(.tsel-all input){
  appearance:none;-webkit-appearance:none;flex:none;margin:0;cursor:pointer;position:relative;
  width:1.5rem;height:1.5rem;border-radius:6px;border:2px solid var(--line2);background:var(--panel);
  transition:background .12s ease,border-color .12s ease;vertical-align:middle}
body.ctrl-tick input[type="checkbox"]:checked:not(.qmulti input){background:var(--ok);border-color:var(--ok)}
body.ctrl-tick input[type="checkbox"]:checked:not(.qmulti input)::after{
  content:'';position:absolute;left:.42rem;top:.16rem;width:.32rem;height:.68rem;
  border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg)}

/* CHUNKY — big square, for gloves and bright sun */
body.ctrl-chunky input[type="checkbox"]:not(.qmulti input):not(.alert-cb):not(.tsel-all input){
  appearance:none;-webkit-appearance:none;flex:none;margin:0;cursor:pointer;position:relative;
  width:2.4rem;height:2.4rem;border-radius:10px;border:2px solid var(--line2);background:var(--panel);
  transition:background .12s ease,border-color .12s ease;vertical-align:middle}
body.ctrl-chunky input[type="checkbox"]:checked:not(.qmulti input){background:var(--ok);border-color:var(--ok)}
body.ctrl-chunky input[type="checkbox"]:checked:not(.qmulti input)::after{
  content:'';position:absolute;left:.78rem;top:.34rem;width:.5rem;height:1.05rem;
  border:solid #fff;border-width:0 4px 4px 0;transform:rotate(45deg)}
body.ctrl-chunky label.chk,body.ctrl-chunky label.fb-chk{gap:.7rem;font-size:1rem}

body.switches input[type="checkbox"]:not(.qmulti input):not(.alert-cb):not(.tsel-all input){
  appearance:none;-webkit-appearance:none;flex:none;margin:0;position:relative;cursor:pointer;
  width:2.5rem;height:1.4rem;border-radius:999px;border:1px solid rgba(0,0,0,.12);
  background:var(--sw-off);transition:background .18s ease;vertical-align:middle}
body.switches input[type="checkbox"]:not(.qmulti input):not(.alert-cb):not(.tsel-all input)::after{
  content:'';position:absolute;top:50%;left:3px;transform:translateY(-50%);
  width:1.05rem;height:1.05rem;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.35);transition:left .18s ease}
body.switches input[type="checkbox"]:not(.qmulti input):not(.alert-cb):not(.tsel-all input):checked{background:var(--sw-on)}
body.switches input[type="checkbox"]:not(.qmulti input):not(.alert-cb):not(.tsel-all input):checked::after{left:calc(100% - 1.05rem - 3px)}
/* ON / OFF written on the switch, so there is no reading of colour required — which also covers
   anyone who cannot tell the red from the green. The knob is ::after, so the word is ::before, and
   it sits on whichever side the knob is not. */
body.switches.sw-labels input[type="checkbox"]:not(.qmulti input):not(.alert-cb):not(.tsel-all input){width:3.5rem}
body.switches.sw-labels input[type="checkbox"]:not(.qmulti input):not(.alert-cb):not(.tsel-all input)::before{
  content:'OFF';position:absolute;top:50%;right:.4rem;transform:translateY(-50%);
  font-size:.56rem;font-weight:800;letter-spacing:.06em;color:#fff;line-height:1;
  font-family:var(--font);text-shadow:0 1px 1px rgba(0,0,0,.25)}
body.switches.sw-labels input[type="checkbox"]:not(.qmulti input):not(.alert-cb):not(.tsel-all input):checked::before{
  content:'ON';right:auto;left:.52rem}
body.switches input[type="checkbox"]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
body.switches input[type="checkbox"]:disabled{opacity:.5;cursor:default}
body.switches label.chk,body.switches label.fb-chk{gap:.6rem;align-items:center}
/* switch colours are a preference — red/green reads as fault/ok on plant, but a wall of red
   switches for ordinary options bothers some people, so grey-off is offered too */
:root{--sw-off:#d95757;--sw-on:#21a557}
:root[data-theme="dark"]{--sw-off:#b34141;--sw-on:#1d8f4c}
body.sw-greygreen{--sw-off:#b9c0cd;--sw-on:#21a557}
body.sw-greyblue{--sw-off:#b9c0cd;--sw-on:#2563eb}
body.sw-redblue{--sw-off:#d95757;--sw-on:#2563eb}
body.sw-amber{--sw-off:#b9c0cd;--sw-on:#d97706}
/* a quieter switch: no colour shouting, just on or off */
body.sw-ios{--sw-off:#d5d9e0;--sw-on:#34c759}
body.sw-ios input[type="checkbox"]:not(.qmulti input){border-color:transparent}
/* a bigger switch, same idea, sized for a gloved thumb */
body.switches.sw-big input[type="checkbox"]:not(.qmulti input):not(.alert-cb):not(.tsel-all input){width:4rem;height:2rem}
body.switches.sw-big input[type="checkbox"]:not(.qmulti input)::after{width:1.55rem;height:1.55rem}
body.switches.sw-big.sw-labels input[type="checkbox"]:not(.qmulti input)::before{font-size:.68rem}
:root[data-theme="dark"] body.sw-greygreen,:root[data-theme="dark"] body.sw-greyblue,:root[data-theme="dark"] body.sw-amber{--sw-off:#4a5568}
.swatch{display:inline-block;width:1.5rem;height:.85rem;border-radius:999px;vertical-align:middle;margin-right:.35rem}
/* printable QR label sheet */
.labelsheet{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.5rem}
.label{display:flex;align-items:center;gap:.55rem;border:1px dashed var(--line2);border-radius:8px;padding:.5rem;background:#fff}
.label .lqr{width:66px;height:66px;flex:none;display:block}
.label .ltext{min-width:0;color:#0f1628}
.label .lref{font-weight:800;font-size:.86rem;line-height:1.15;word-break:break-word}
.label .lname{font-size:.72rem;color:#6b7488;line-height:1.2;margin-top:.1rem}
.label .lcode{font-size:.68rem;color:#6b7488;letter-spacing:.06em;margin-top:.2rem}
@media print{
  body.label-print>*:not(.qr-overlay){display:none !important}
  body.label-print .qr-overlay{position:static;background:none;padding:0;display:block}
  body.label-print .qr-card{max-width:none;max-height:none;overflow:visible;box-shadow:none;border:none;padding:0}
  body.label-print .noprint{display:none !important}
  body.label-print .labelsheet{grid-template-columns:repeat(3,1fr);gap:3mm}
  body.label-print .label{break-inside:avoid;border:1px dashed #bbb}
}
.archbanner{display:flex;align-items:flex-start;gap:.7rem;max-width:840px;margin:0 0 1rem;padding:.75rem .9rem;
  border:1px solid var(--line);border-left:3px solid var(--mut);border-radius:var(--radius-s);background:var(--panel2)}
.archbanner b{font-family:var(--font-head);font-size:.95rem}
.archbanner .s{font-size:.8rem;color:var(--mut)}
.keepbox{border:1px solid var(--line);border-left:3px solid var(--ok);border-radius:10px;padding:.6rem .75rem;background:var(--panel2)}
.showarch{display:inline-flex;margin:.2rem 0 .8rem;font-size:.85rem}
.meter-row{display:flex;align-items:center;gap:.5rem;margin-top:.4rem}
.meter-row input{flex:1;min-width:0}
.meter-unit{font-weight:800;color:var(--mut);font-size:.85rem;flex:none}
.fb-qunit{max-width:110px}
/* Plain bar across the foot of the screen, in the same place and shape as the offline banner, so
   it reads as part of the app rather than a notification bubble. It stays until it is acted on. */
#updBanner{position:fixed;left:0;right:0;bottom:0;z-index:400;display:flex;align-items:center;gap:.7rem;
  background:var(--brand);color:#fff;padding:.55rem .9rem;font-size:.84rem;font-weight:600;
  box-shadow:0 -4px 14px -6px rgba(0,0,0,.35);padding-bottom:calc(.55rem + env(safe-area-inset-bottom))}
#updBanner .ub-t{flex:1;min-width:0}
#updBanner .ub-go{flex:none;border:none;border-radius:7px;background:#fff;color:var(--brand);
  font:inherit;font-weight:800;padding:.35rem .9rem;cursor:pointer}
#updBanner .ub-x{flex:none;border:none;background:transparent;color:rgba(255,255,255,.65);
  font:inherit;font-size:1rem;line-height:1;padding:.25rem .35rem;cursor:pointer}
#updBanner .ub-x:hover{color:#fff}
#updBanner.working{background:var(--accent)}
.ub-spin{display:inline-block;width:.8rem;height:.8rem;margin-right:.4rem;vertical-align:-1px;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:ubspin .7s linear infinite}
@keyframes ubspin{to{transform:rotate(360deg)}}
body.sitemode-on #updBanner{bottom:38px}
body.has-updbanner #offlineBanner{bottom:44px}
@media print{ #updBanner{display:none} }
/* base-map toggle, sitting on the map rather than beside it */
.mapbase{position:absolute;right:.5rem;top:.5rem;z-index:500;display:flex;gap:2px;
  background:var(--panel);border:1px solid var(--line2);border-radius:9px;padding:2px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.mapbase button{border:none;background:transparent;font:inherit;font-size:.74rem;font-weight:700;color:var(--ink2);
  padding:.32rem .5rem;border-radius:7px;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.mapbase button:hover{background:var(--panel2)}
.mapbase button.on{background:var(--accent);color:#fff}
.leaflet-canvas{position:relative}
@media(max-width:640px){ .mapbase button{font-size:.7rem;padding:.3rem .4rem} }
/* our own date picker — the native one behaves differently on every device and traps people in the
   month/year spinner on a phone */
.dp-input{cursor:pointer}
.dp-input::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}
.dp-overlay{z-index:1400}
.dp-card{background:var(--panel);border:1px solid var(--line2);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:.8rem;width:320px;max-width:94vw}
.dp-head{display:flex;align-items:center;gap:.35rem;margin-bottom:.6rem}
.dp-head select{flex:1;min-width:0;padding:.4rem .3rem;font-size:.9rem;font-weight:700}
.dp-nav{width:2.1rem;height:2.1rem;flex:none;border:1px solid var(--line2);background:var(--panel2);border-radius:9px;
  font-size:1.1rem;line-height:1;cursor:pointer;color:var(--ink);-webkit-tap-highlight-color:transparent}
.dp-nav:hover{border-color:var(--accent);color:var(--accent)}
.dp-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:.2rem}
.dp-dow span{text-align:center;font-size:.68rem;font-weight:800;color:var(--mut);text-transform:uppercase}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-pad{display:block}
.dp-day{aspect-ratio:1;border:none;background:transparent;border-radius:9px;font:inherit;font-size:.9rem;font-weight:600;
  color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
.dp-day:hover:not(:disabled){background:var(--accent-soft);color:var(--accent)}
.dp-day.istoday{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent);font-weight:800}
.dp-day.sel{background:var(--accent);color:#fff;font-weight:800}
.dp-day.off,.dp-day:disabled{color:var(--faint);cursor:default;opacity:.45}
.dp-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:.3rem;margin-top:.7rem}
.dp-quick button{padding:.4rem .2rem;border:1px solid var(--line2);background:var(--panel2);border-radius:8px;
  font:inherit;font-size:.74rem;font-weight:700;color:var(--ink2);cursor:pointer;-webkit-tap-highlight-color:transparent}
.dp-quick button:hover{border-color:var(--accent);color:var(--accent)}
.dp-foot{display:flex;justify-content:space-between;gap:.5rem;margin-top:.7rem}
@media(max-width:640px){ .dp-card{width:100%} .dp-day{font-size:1rem} }
/* while placing the pin, the cursor says so */
.leaflet-canvas.pinning{cursor:crosshair}
.leaflet-canvas.pinning .leaflet-container{cursor:crosshair}
.seg.toast-seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:.4rem}
.seg.toast-seg button{padding:.45rem .3rem;line-height:1.25}
.seg.toast-seg button small{font-weight:600;opacity:.7;font-size:.68rem}
.seg.toast-seg button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.seg.jsa-seg{display:grid;gap:.4rem}
.seg.jsa-seg button{padding:.5rem .3rem;line-height:1.25}
.seg.jsa-seg button small{font-weight:600;opacity:.7;font-size:.7rem}
.seg.jsa-seg button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.seg.risk-seg{display:grid;gap:.4rem}
.seg.risk-seg button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.lrow.off{opacity:.6}
.seg.colour-seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.4rem}
.seg.colour-seg button{text-align:left;padding:.5rem .6rem;font-size:.82rem}
.seg.colour-seg button.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);color:var(--accent)}
.seg.theme-seg,.seg.ctrl-seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:.4rem}
.seg.theme-seg button.on,.seg.ctrl-seg button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.seg.usage-seg{display:grid;gap:.4rem}
.seg.usage-seg button.on{background:var(--accent);border-color:var(--accent);color:#fff}
@media(max-width:640px){ .seg.usage-seg{grid-template-columns:1fr !important} }
/* the "how close to due" bar on register cards */
.ubar{height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin:.55rem 0 .25rem}
.ubar span{display:block;height:100%;border-radius:99px;background:var(--ok);transition:width .2s ease}
.ubar.soon span{background:var(--soon)}
.ubar.overdue span{background:var(--bad)}
.ubar.overdue{background:var(--bad-bg)}
.ubar.none span{background:var(--faint)}
.ulab{display:flex;justify-content:space-between;gap:.5rem;font-size:.74rem;color:var(--mut);font-weight:600}
.ulab .bad{color:var(--bad);font-weight:800}
.ulab .warn{color:var(--soon);font-weight:800}
/* form-email preview — the real HTML, in an iframe, so what you see is what sends */
.empreview{border:1px solid var(--line);border-radius:var(--radius-s);overflow:hidden;background:#f4f6f9;height:520px}
.empreview iframe{width:100%;height:100%;border:none;display:block;background:#f4f6f9}
@media(max-width:640px){ .empreview{height:380px} }
/* timesheets — a week per screen, staff down the side, days across */
.tsbar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:0 0 .8rem}
.tsweek{padding:0 .3rem}
.tsweek b{font-family:var(--font-head);font-size:.98rem}
.tsweek .s{display:block;font-size:.75rem;color:var(--mut)}
.tswrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--panel)}
.tstable{border-collapse:collapse;width:100%;min-width:640px;font-size:.9rem}
.tstable th,.tstable td{padding:.5rem .55rem;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
.tstable thead th{font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);font-weight:800;background:var(--panel2)}
.tstable thead th span{display:block;font-size:.68rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--faint)}
.tstable .tsname{text-align:left;position:sticky;left:0;background:var(--panel);min-width:180px}
.tstable thead .tsname{background:var(--panel2)}
.tstable .tsname .s{font-size:.74rem;color:var(--mut);font-weight:400;white-space:normal}
.tstable tbody tr{cursor:pointer}
.tstable tbody tr:hover td{background:var(--panel2)}
.tstable tbody tr:hover .tsname{background:var(--panel2)}
.tstable tr.islocked .tsname{color:var(--mut)}
.tstable .istoday{background:var(--accent-soft)}
.tstable .tstot{font-variant-numeric:tabular-nums}
.tstime{display:block;font-size:.66rem;font-weight:600;color:var(--mut);letter-spacing:-.02em;margin-top:.1rem}
.tstable tfoot th{background:var(--panel2);font-size:.85rem;color:var(--ink);border-bottom:none}
.ts-day{padding:.3rem 0}
.ts-dayhead{font-size:.76rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);margin:.5rem 0 .1rem}
@media print{ .tsbar,.side,.topbar,#offlineBanner,#siteBanner{display:none !important} .tswrap{border:none} .tstable{font-size:9pt} }
/* budgeted vs actual hours on a job — managers only */
.hoursbar{height:9px;border-radius:99px;background:var(--line);overflow:hidden;margin:.4rem 0 .25rem}
.hoursbar span{display:block;height:100%;background:var(--ok);border-radius:99px}
.hoursbar.warn span{background:var(--soon)} .hoursbar.over span{background:var(--bad)}
/* release history in the changelog modal */
.cl-rel{padding:.7rem 0;border-bottom:1px solid var(--line)}
.cl-rel:last-child{border-bottom:none}
.cl-relhead{display:flex;align-items:center;gap:.5rem}
.cl-relhead b{font-family:var(--font-head);font-size:1.05rem}
.cl-reldate{margin-left:auto;font-size:.78rem;color:var(--mut)}
.cl-reltitle{font-size:.88rem;color:var(--ink2);margin:.1rem 0 .3rem}
.cl-rel.latest .cl-relhead b{color:var(--accent)}
.cl-tag{font-size:.62rem;font-weight:800;letter-spacing:.06em;padding:.12rem .38rem;border-radius:5px;margin-right:.4rem;
  text-transform:uppercase;background:var(--panel2);color:var(--mut);border:1px solid var(--line);white-space:nowrap}
.cl-tag.new{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.cl-tag.fix{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.cl-tag.security{background:var(--bad-bg);color:var(--bad);border-color:transparent}
/* offline-pack status on the Inspections page — "is this phone ready for a job with no signal?" */
.packbar{display:flex;align-items:center;gap:.7rem;padding:.65rem .85rem;margin:0 0 .9rem;
  border:1px solid var(--line);border-left:3px solid var(--ok);border-radius:var(--radius-s);background:var(--panel2)}
.packbar.isoff{border-left-color:var(--soon)}
.packbar .pb-ico{font-size:1.2rem;flex:none}
.packbar b{font-family:var(--font-head);font-size:.94rem}
.packbar .s{font-size:.8rem;color:var(--mut)}
/* form tiles — an icon or picture per form, plus a colour band by type, so the right one is
   findable at a glance instead of by reading eighteen identical cards */
.ft-ico{width:52px;height:52px;border-radius:13px;display:grid;place-items:center;font-size:1.65rem;flex:none;
  background:var(--tone-bg,var(--panel2));border:1px solid var(--tone-line,var(--line));line-height:1}
.formtile{border-top:3px solid var(--tone,var(--line2))}
.formtile.tone-sun{--tone:#d97706;--tone-bg:#fdf0df;--tone-line:#f2d3a4}
.formtile.tone-sky{--tone:#2563eb;--tone-bg:#eaf1ff;--tone-line:#c5d8ff}
.formtile.tone-red{--tone:#dc2626;--tone-bg:#fdeaea;--tone-line:#f6c9c9}
.formtile.tone-amber{--tone:#b45309;--tone-bg:#fdf3e3;--tone-line:#f0d6ab}
.formtile.tone-indigo{--tone:#4f46e5;--tone-bg:#eceafe;--tone-line:#d3cdfa}
.formtile.tone-green{--tone:#16a34a;--tone-bg:#e7f6ec;--tone-line:#bfe6cc}
.formtile.tone-grey{--tone:#6b7488;--tone-bg:var(--panel2);--tone-line:var(--line)}
:root[data-theme="dark"] .formtile.tone-sun{--tone-bg:#33240f;--tone-line:#5c421c}
:root[data-theme="dark"] .formtile.tone-sky{--tone-bg:#152744;--tone-line:#26436f}
:root[data-theme="dark"] .formtile.tone-red{--tone-bg:#3a1a1a;--tone-line:#5f2a2a}
:root[data-theme="dark"] .formtile.tone-amber{--tone-bg:#352614;--tone-line:#5c4423}
:root[data-theme="dark"] .formtile.tone-indigo{--tone-bg:#231f45;--tone-line:#3a3370}
:root[data-theme="dark"] .formtile.tone-green{--tone-bg:#14301f;--tone-line:#245538}
/* a form with its own picture wears it as a banner, with the icon riding on the corner */
.formtile.haspic{padding-top:0}
.ft-pic{position:relative;margin:0 -1.1rem;height:118px;overflow:hidden;background:var(--panel2)}   /* bleeds to the .ecard padding */
.ft-pic img{width:100%;height:100%;object-fit:cover;display:block}
.ft-pic-ico{position:absolute;left:.7rem;bottom:.55rem;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  font-size:1.25rem;background:var(--panel);border:1px solid var(--line);box-shadow:0 2px 8px rgba(0,0,0,.25)}
@media(max-width:640px){ .ft-ico{width:46px;height:46px;font-size:1.45rem} .ft-pic{height:96px} }
/* the icon picker in the form builder */
.fb-icon{display:flex;gap:.8rem;align-items:flex-start;margin:.2rem 0 .1rem}
.fb-icon-prev{width:74px;height:74px;border-radius:14px;border:1px solid var(--line);background:var(--panel2);
  display:grid;place-items:center;font-size:2.1rem;flex:none;overflow:hidden}
.fb-icon-prev img{width:100%;height:100%;object-fit:cover}
.fb-icon-grid{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.5rem}
.fb-ic{width:36px;height:36px;border-radius:9px;border:1px solid var(--line);background:var(--panel);cursor:pointer;
  font-size:1.15rem;line-height:1;padding:0;-webkit-tap-highlight-color:transparent}
.fb-ic:hover{border-color:var(--accent)}
.fb-ic.on{background:var(--accent-soft);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.fb-icon-row{display:flex;gap:.45rem;align-items:center;flex-wrap:wrap}
@media(max-width:640px){ .fb-icon{flex-direction:column} .fb-icon-prev{width:62px;height:62px;font-size:1.8rem} }
/* collapsible sections on the job page — bigger, bolder headings that fold away */
details.jsec{border:1px solid var(--line);border-radius:var(--radius-s);background:var(--panel2);margin:.75rem 0;overflow:hidden}
details.jsec>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.6rem;padding:.72rem .85rem;
  font-family:var(--font-head);font-size:1.04rem;font-weight:800;letter-spacing:-.01em;color:var(--ink);-webkit-tap-highlight-color:transparent}
details.jsec>summary::-webkit-details-marker{display:none}
details.jsec>summary::marker{content:''}
details.jsec>summary:hover{background:var(--panel)}
details.jsec>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
details.jsec[open]>summary{border-bottom:1px solid var(--line);background:var(--panel)}
.jsec-t{flex:none}
.jsec-badge{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;font-family:var(--font);font-weight:600}
.jsec-warn{color:var(--bad);font-weight:800;font-size:.78rem;white-space:nowrap}
.jsec-chev{margin-left:auto;color:var(--mut);font-size:.85rem;transition:transform .16s ease;flex:none}
details.jsec[open]>summary .jsec-chev{transform:rotate(180deg)}
.jsec-body{padding:.7rem .85rem .95rem}
.jsec-body>.eyebrow:first-child{margin-top:.2rem}
.jsec-body>p:first-child{margin-top:0}
/* a nested section (the signed-off list inside the register) sits flush and quieter */
.jsec-body details.jsec{background:var(--panel);margin:.6rem 0 0}
.jsec-body details.jsec>summary{font-size:.92rem;padding:.55rem .7rem}
@media(max-width:640px){ details.jsec>summary{font-size:.98rem;padding:.65rem .7rem} .jsec-body{padding:.6rem .7rem .8rem} }
/* site register — sign-on buttons, muster list, induction box */
.regbar{display:flex;gap:.5rem;flex-wrap:wrap;margin:.1rem 0 .6rem}
.eyebrow.sub{opacity:.75;margin-top:.9rem}
.lrow.reg-row.off{opacity:.72}
.indbox{margin-top:.6rem;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;padding:.6rem .75rem;background:var(--panel2);max-height:150px;overflow:auto}
.seg.ind-dir{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.seg.ind-dir button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.musterlist{margin:.2rem 0 0;padding-left:1.4rem}
.musterlist li{padding:.4rem 0;border-bottom:1px solid var(--line);font-size:1.02rem}
.musterlist li:last-child{border-bottom:none}
.musterlist .s{font-size:.8rem;color:var(--mut);font-weight:400}
/* printing the muster prints the muster, not the app behind it */
@media print{
  body.muster-print>*:not(.qr-overlay){display:none !important}
  body.muster-print .qr-overlay{position:static;background:none;padding:0;display:block}
  body.muster-print .qr-card.muster{max-width:none;max-height:none;overflow:visible;box-shadow:none;border:none;background:#fff;color:#000}
  body.muster-print .qr-card.muster .btn{display:none}
  body.muster-print .musterlist li{break-inside:avoid}
}
/* asset that mirrors someone's company phone — say where it's really edited */
.assignedbox{margin-top:.9rem;border:1px solid var(--line);border-left:3px solid var(--soon);border-radius:10px;
  padding:.6rem .8rem;background:var(--panel2);font-size:.85rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
/* signature pad */
.sigwrap canvas{width:100%;height:150px;border:1px dashed var(--line2);border-radius:10px;background:#fff;touch-action:none;display:block}
.sigwrap .btn{margin-top:.4rem}

.toast{position:fixed;left:50%;transform:translateX(-50%);z-index:600;background:var(--brand);color:#fff;
  border-radius:12px;font-weight:600;box-shadow:0 6px 24px rgba(0,0,0,.35);max-width:92vw;
  display:flex;align-items:center;gap:.6rem;padding:.7rem .6rem .7rem 1.1rem;font-size:.9rem}
.toast[hidden]{display:none}
.toast .toast-msg{flex:1;min-width:0}
.toast .toast-x{flex:none;border:none;background:transparent;color:rgba(255,255,255,.6);font:inherit;
  font-size:.95rem;line-height:1;padding:.25rem .4rem;cursor:pointer;border-radius:6px}
.toast .toast-x:hover{color:#fff;background:rgba(255,255,255,.12)}
/* Full-width bar, the same shape as the offline banner, for anyone who wants a message they cannot
   miss rather than a pill floating in the corner. */
.toast.style-bar{left:0;right:0;transform:none;max-width:none;border-radius:0;
  padding:.7rem 1rem .7rem 1.2rem;box-shadow:0 -4px 14px -6px rgba(0,0,0,.35)}
.toast.style-bar.pos-top{top:0;bottom:auto;box-shadow:0 4px 14px -6px rgba(0,0,0,.35);
  padding-top:calc(.7rem + env(safe-area-inset-top))}
.toast.style-bar.pos-bottom{bottom:0;top:auto;padding-bottom:calc(.7rem + env(safe-area-inset-bottom))}
.toast.style-bar.pos-middle{top:50%;transform:translateY(-50%)}
/* a message that is waiting to be dismissed says so */
.toast.sticky{border-left:4px solid var(--soon)}
.toast.sticky .toast-x{color:#fff;background:rgba(255,255,255,.16)}
/* where it sits — clear of the offline and update bars at the foot */
.toast.pos-bottom{bottom:1.5rem;top:auto}
body.sitemode-on .toast.pos-bottom,body.has-updbanner .toast.pos-bottom{bottom:4rem}
.toast.pos-top{top:calc(1rem + env(safe-area-inset-top));bottom:auto}
.toast.pos-middle{top:50%;bottom:auto;transform:translate(-50%,-50%)}
/* how big */
.toast.size-sm{font-size:.8rem;padding:.5rem .5rem .5rem .85rem}
.toast.size-lg{font-size:1.05rem;padding:.95rem .8rem .95rem 1.3rem;font-weight:700}
@media(max-width:640px){ .toast{max-width:94vw} .toast.size-lg{font-size:1rem} }

/* responsive */
@media(max-width:900px){
  .sidebar{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .22s ease;box-shadow:0 10px 40px rgba(0,0,0,.25)}
  body.nav-open .sidebar{transform:none}
  body.nav-open .scrim{display:block}
  .hamburger{display:block}
  .tenant{display:none}
  main{padding:1.1rem 1rem 4rem}
  .user-chip .uc-t{display:none}
  .ecard-fields{grid-template-columns:1fr 1fr}
}

/* ---- admin "View as" impersonation ---- */
.actas-bar{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;padding:.5rem .9rem;margin:.6rem 1.1rem 0;
  background:var(--soon-bg);border:1px solid var(--soon);border-radius:10px;font-size:.86rem;color:var(--ink)}
.actas-bar .ai{font-size:1rem}
.actas-bar .ar{color:var(--mut)}
.actas-bar .btn{margin-left:auto}
.viewas{position:relative}
.viewas .va-btn{display:inline-flex;align-items:center;gap:.3rem;background:var(--panel);border:1px solid var(--line);
  border-radius:9px;padding:.34rem .55rem;font:inherit;font-size:.82rem;cursor:pointer;color:var(--ink);white-space:nowrap}
.viewas.acting .va-btn{border-color:var(--soon);background:var(--soon-bg)}
.viewas .va-cur{font-weight:600;max-width:130px;overflow:hidden;text-overflow:ellipsis}
.viewas .va-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:210px;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:.4rem;z-index:60}
.viewas .va-h{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);padding:.4rem .5rem .2rem}
.viewas .va-opt{display:block;width:100%;text-align:left;background:none;border:0;border-radius:8px;padding:.45rem .55rem;
  font:inherit;font-size:.86rem;cursor:pointer;color:var(--ink)}
.viewas .va-opt:hover{background:var(--accent-soft)}
.viewas .va-admin{color:var(--accent);font-weight:600}
.viewas .va-sep{height:1px;background:var(--line);margin:.35rem .3rem}

/* ---- import preview table ---- */
.imp-table{border-collapse:collapse;width:100%;font-size:.84rem}
.imp-table th,.imp-table td{text-align:left;padding:.4rem .6rem;border-bottom:1px solid var(--line);white-space:nowrap}
.imp-table th{position:sticky;top:0;background:var(--panel);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);z-index:1}
.imp-table td:nth-child(3),.imp-table td:nth-child(4){white-space:normal}
.imp-insert td:nth-child(2){color:var(--ok);font-weight:600}
.imp-update td:nth-child(2){color:var(--soon);font-weight:600}
.imp-skip{opacity:.7}
.imp-skip td:nth-child(2){color:var(--bad);font-weight:600}
.linkperson{margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--line)}

/* ---- driver licence photos (landscape card ratio) ---- */
.lic-photos{display:flex;gap:1.1rem;flex-wrap:wrap;margin-top:.4rem}
.lic-photo{flex:1;min-width:210px}
.lic-photo .fl{margin-bottom:.3rem}
.lic-frame{width:100%;max-width:300px;aspect-ratio:1.586/1;display:grid;place-items:center;overflow:hidden}
.lic-frame img{width:100%;height:100%;object-fit:cover}
.lic-frame .ph{font-size:1.8rem;opacity:.5}

/* ---- driver licence classes: at-a-glance chips + editor ---- */
.dlchips{display:inline-flex;flex-wrap:wrap;gap:.25rem;align-items:center;vertical-align:middle}
.dlchip{display:inline-grid;place-items:center;min-width:1.5rem;height:1.4rem;padding:0 .35rem;border-radius:6px;
  font:600 .74rem/1 var(--mono);border:1px solid var(--line);background:var(--panel);color:var(--ink)}
.dlchip.ok{border-color:var(--ok);color:var(--ok)}
.dlchip.soon{border-color:var(--soon);background:var(--soon-bg);color:var(--soon)}
.dlchip.overdue{border-color:var(--bad);background:var(--bad-bg);color:var(--bad)}
.dlchip.none{opacity:.85}
.dlsep{color:var(--mut);font-weight:700;padding:0 .1rem}
.dl-current{margin-left:.5rem}
.lc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:.4rem .9rem;margin:.3rem 0 .5rem}
.lc-row{display:flex;flex-direction:column;gap:.3rem;padding:.35rem 0;border-bottom:1px solid var(--line)}
.lc-tick{display:flex;align-items:center;gap:.45rem;cursor:pointer;font-size:.9rem}
.lc-tick input{width:auto}
.lc-tick b{font-family:var(--mono);min-width:1.1rem}
.lc-lbl{color:var(--mut);font-size:.84rem}
.lc-detail{display:flex;gap:.4rem;flex-wrap:wrap;padding-left:1.6rem}
.lc-detail select,.lc-detail input{padding:.3rem .4rem;font-size:.8rem}
.lc-detail input[type=date]{max-width:150px}

/* ---- training multi-select ---- */
.train-tools{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;padding:.4rem 0 .6rem;border-bottom:1px solid var(--line);margin-bottom:.4rem}
.train-tools .tsel-all{display:flex;align-items:center;gap:.4rem;font-size:.86rem;color:var(--mut);cursor:pointer}
.train-tools input{width:auto}
.tsel{width:auto;margin-right:.2rem;flex:none}

/* ---- per-course training config table ---- */
.cc-table{border-collapse:collapse;width:100%;min-width:640px;font-size:.84rem}
.cc-table th,.cc-table td{padding:.35rem .5rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.cc-table th{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);position:sticky;top:0;background:var(--panel)}
.cc-table input[type=number]{width:64px;padding:.25rem .35rem;font-size:.8rem}
.cc-table input[type=checkbox]{width:auto}
.cc-table td.s{color:var(--mut)}

/* ---- people categories ---- */
.cat-block{margin-bottom:1.3rem}
.cat-head{display:flex;align-items:center;gap:.6rem;margin:.2rem 0 .6rem;padding-bottom:.35rem;border-bottom:2px solid var(--line)}
.cat-name{font-family:var(--font-head);font-weight:800;font-size:1.02rem}
.cat-count{background:var(--accent-soft);color:var(--accent);border-radius:20px;padding:.05rem .5rem;font-size:.75rem;font-weight:700}
.cat-tools{margin-left:auto;display:flex;gap:.15rem}
.cat-tools .iconbtn:disabled{opacity:.3;cursor:default}

/* ---- job location map ---- */
.mapblock{margin:.3rem 0 .8rem}
.mapembed{margin-top:.5rem}
.mapembed iframe{width:100%;height:260px;border:1px solid var(--line);border-radius:10px}

/* ---- interactive job map (Leaflet) ---- */
.maprow{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:.4rem}
.maphint{color:var(--mut);font-size:.8rem}
.leaflet-canvas{height:320px;border:1px solid var(--line);border-radius:12px;overflow:hidden;z-index:1}
.leaflet-canvas .leaflet-tile{filter:none}
/* geofence editor under the job map */
.fencebox{margin-top:.55rem;border:1px solid var(--line);border-left:3px solid #2563eb;border-radius:10px;padding:.65rem .8rem;background:var(--panel2)}
.fencebox .fb-head{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;font-size:.92rem}
.fencebox .fb-read{color:var(--mut);font-size:.8rem;font-family:var(--mono)}
.fencebox .fb-row{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-top:.3rem}
.fencebox .fb-row .fl{margin:0;white-space:nowrap}
#j_fence_btn.on{background:var(--accent);color:#fff;border-color:transparent}
/* the drag-to-resize handle sitting on the circle's edge */
.fence-handle span{display:block;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid #2563eb;box-shadow:0 1px 4px rgba(0,0,0,.4);cursor:ew-resize}
/* the combo you're typing in must sit above later combos so its dropdown isn't covered */
.combo{position:relative}
.combo:focus-within{z-index:1000}
.combo-list{z-index:1200;max-height:280px;overflow-y:auto}

/* ---- form builder ---- */
.fb-sec{border:1px solid var(--line);border-radius:12px;padding:.7rem .8rem;margin-top:.7rem;background:var(--panel2)}
.fb-sechead{display:flex;align-items:center;gap:.35rem;margin-bottom:.5rem}
.fb-sectitle{flex:1;font-weight:700;font-family:var(--font-head)}
.fb-qs{display:flex;flex-direction:column;gap:.5rem}
.fb-q{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.5rem .6rem}
.fb-qrow{display:flex;gap:.35rem;align-items:center;flex-wrap:wrap}
.fb-qrow .fb-qtext{flex:1;min-width:160px}
.fb-qrow .fb-qtype{width:130px;flex:none}
.fb-qopts{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-top:.4rem;font-size:.82rem;color:var(--mut)}
.fb-chk{display:flex;align-items:center;gap:.35rem;cursor:pointer}
.fb-chk input{width:auto}
.fb-inline{display:flex;align-items:center}
.fb-inline input{padding:.3rem .4rem;font-size:.82rem}

/* ---- multi-select question ---- */
.qmulti{display:flex;flex-direction:column;gap:.5rem;margin-top:.5rem}
.mchk{display:flex;align-items:center;gap:.6rem;cursor:pointer;font-size:.92rem}
.mchk input{width:auto;flex:none}
.mchk.na-opt{padding-bottom:.55rem;border-bottom:1px dashed var(--line);margin-bottom:.15rem}

/* ---- form fill: use the screen better + stay tidy on mobile ---- */
.formfill{max-width:860px;width:100%}
.formfill .seg{grid-template-columns:repeat(3,minmax(0,1fr))}
.formfill .q{max-width:100%}
@media (max-width:520px){
  .seg{gap:.3rem}
  .seg button{padding:.5rem .3rem;font-size:.82rem}
}

/* ---- account menu (folds theme / view-as / logout) ---- */
.acct{position:relative}
.user-chip{background:none;border:none;cursor:pointer;padding:0;font:inherit;color:inherit}
.acct-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:210px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);padding:.4rem;z-index:1100}
.acct-menu .am-user{display:flex;align-items:center;gap:.55rem;padding:.4rem .5rem}
.acct-menu .am-user b{font-size:.86rem;display:block;line-height:1.15}
.acct-menu .am-user small{font-size:.7rem;color:var(--faint)}
.acct-menu .am-h{font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);padding:.35rem .5rem .15rem}
.acct-menu .am-item{display:block;width:100%;text-align:left;background:none;border:0;border-radius:8px;padding:.5rem .55rem;
  font:inherit;font-size:.88rem;color:var(--ink);cursor:pointer}
.acct-menu .am-item:hover{background:var(--accent-soft)}
.acct-menu .am-admin{color:var(--accent);font-weight:600}
.acct-menu .am-logout{color:var(--bad);font-weight:600}
.acct-menu .am-sep{height:1px;background:var(--line);margin:.35rem .3rem}

/* mobile: collapse right-side controls into the account menu so the page can't scroll sideways */
@media(max-width:900px){
  html,body{overflow-x:hidden}
  #themeBtn,#logoutBtn,#viewAs{display:none}
  #syncText{display:none}
  .sync{padding:.3rem;gap:0}
  .topbar{gap:.5rem;padding-left:1rem;padding-right:1rem}
  .crumb{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ---- permission groups editor ---- */
.capgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.4rem .9rem;margin:.3rem 0 .4rem}
.cap{padding:.3rem 0}
.grouptile .avatar-tile{font-size:1.2rem}

/* ---- egress IP box ---- */
.ipbox{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:.5rem .7rem;font-size:.86rem;margin:.3rem 0 .5rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.ipbox b{font-family:var(--mono)}

/* ---- dashboard reorderable blocks ---- */
.dashblock{margin-bottom:1.4rem}
.db-head{display:flex;align-items:center;gap:.5rem;margin:.2rem 0 .5rem}
.db-title{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);font-weight:800;font-family:var(--font)}
.db-move{margin-left:auto;display:flex;gap:.15rem;opacity:.5}
.dashblock:hover .db-move{opacity:1}
.db-move .iconbtn:disabled{opacity:.3;cursor:default}

/* ---- dashboard collapse ---- */
.signon-row.off{opacity:.6}
/* signed on from outside the job's geofence — flagged so it reads at a glance */
.lrow.offsite{background:rgba(209,22,22,.07);border-left:3px solid #d11616;padding-left:.5rem}
.signon-row .acts{display:flex;align-items:center;gap:.3rem;margin-left:auto}
/* declaration box (above the signature) */
.declaration { background: rgba(37, 194, 110, .08); border: 1px solid var(--line); border-left: 3px solid var(--ok, #25c26e); border-radius: 8px; padding: .6rem .8rem; font-size: .86rem; font-style: italic; margin: .3rem 0; }
.pdf-view .declaration { background: #f5faf6; color: #222; }
/* offline / syncing banner */
#offlineBanner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 300; padding: 9px 14px; text-align: center; font-size: .82rem; font-weight: 600; box-shadow: 0 -4px 14px -6px rgba(0, 0, 0, .3); }
/* site mode bar — sits under the offline banner so both can show at once */
#siteBanner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 299; display: flex; gap: .7rem; align-items: center; justify-content: center; flex-wrap: wrap;
  padding: 8px 14px; font-size: .82rem; font-weight: 600; background: #1f2937; color: #fff; box-shadow: 0 -4px 14px -6px rgba(0, 0, 0, .35); }
#siteBanner.on { background: #15803d; }
#siteBanner.warn { background: #b45309; }
#siteBanner .sb-acts { display: flex; gap: .4rem; }
#siteBanner .sb-btn { background: rgba(255, 255, 255, .18); color: #fff; border: 1px solid rgba(255, 255, 255, .35); border-radius: 6px; padding: 3px 10px; font: inherit; font-size: .78rem; cursor: pointer; }
#siteBanner .sb-btn:hover { background: rgba(255, 255, 255, .3); }
#siteBanner .sb-btn.ghost { background: transparent; }
body.sitemode-on #offlineBanner { bottom: 38px; }
#offlineBanner.offline { background: #b45309; color: #fff; }
#offlineBanner.pending { background: #2563eb; color: #fff; }
/* ---- print / Save-as-PDF (completed forms) ---- */
.print-head { display: none; }
@media print { #offlineBanner, #siteBanner { display: none !important; } .declaration { border: 1px solid #ccc; border-left: 3px solid #333; background: #f7f7f7 !important; font-size: .78rem; } }
.pdf-preview { background: #fff; color: #111; border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; margin-top: .3rem; box-shadow: 0 8px 22px -12px rgba(0, 0, 0, .35); max-width: 660px; overflow: hidden; }
.pdf-preview b { color: #000; }
/* completed-form view rendered like the PDF (white "paper", on screen, both themes) */
.formcard.pdf-view { background: #fff; color: #111; font-family: var(--pdf-font, 'Inter', system-ui, sans-serif); }
.pdf-view .ecard-fields { display: none; }
.pdf-view .print-head { display: flex; align-items: center; gap: 16px; border-bottom: 2.5px solid #222; padding-bottom: 10px; margin-bottom: 12px; }
.pdf-view .print-head.pos-center { flex-direction: column; align-items: center; text-align: center; }
.pdf-view .print-head.pos-center .print-meta { margin-left: 0; text-align: center; }
.pdf-view .print-head.pos-right .print-logo { order: 3; margin-left: 12px; }
.pdf-view .print-logo { max-height: var(--pdf-logo, 64px); max-width: 220px; }
.pdf-view .print-org-name { font-family: var(--font-head); font-weight: 800; font-size: calc(1.4rem * var(--pdf-org-scale, 1)); display: var(--pdf-org-display, block); }
.pdf-view .print-title { font-size: calc(.95rem * var(--pdf-title-scale, 1)); color: #444; }
/* signatures sized from one setting: register thumbs, the signer's and the approver's */
.pdf-view #soList .thumb { width: var(--pdf-sig-w, 91px) !important; height: var(--pdf-sig-h, 38px) !important; }
.pdf-view .thumb img { object-fit: contain; background: #fff; }
.pdf-view .sig-img { max-height: calc(var(--pdf-sig-h, 38px) * 1.9); max-width: 300px; }
.pdf-view .print-meta { margin-left: auto; text-align: right; font-size: .84rem; color: #333; line-height: 1.5; }
.pdf-view .print-meta b { color: #000; }
.pdf-view small, .pdf-view .muted { color: #555 !important; }
.pdf-view .eyebrow { color: var(--pdf-sec-color, #b45309) !important; font-weight: var(--pdf-sec-weight, 800); font-size: calc(.74rem * var(--pdf-sec-scale, 1)); margin-top: 1rem; }
.pdf-view .list-plain { display: grid; grid-template-columns: repeat(var(--pdf-cols, 2), 1fr); gap: 2px 20px; align-items: start; }
.pdf-view #soList { grid-template-columns: 1fr; }
.pdf-view .lrow { border: none; }
.pdf-view .lrow .t { color: var(--pdf-q-color, #111); font-size: calc(.92rem * var(--pdf-q-scale, 1)); }
.pdf-view .lrow .s { color: var(--pdf-a-color, #111); }
.pdf-view .lrow .s b { font-weight: var(--pdf-a-weight, 800); color: var(--pdf-a-color, #111); background: var(--pdf-a-bg, transparent); padding: var(--pdf-a-pad, 0); border-radius: 3px; }
.pdf-view .lrow.fail .t, .pdf-view .lrow.fail .s b { color: var(--pdf-fail-color, #d11616); }
.pdf-view .lrow.fail { background: var(--pdf-fail-bg, transparent); border-radius: 4px; padding: 2px 6px; }
.pdf-view.rs-table .lrow { border-bottom: 1px solid #ddd; padding: 3px 4px; }
.pdf-view.rs-table .lrow .main { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: baseline; }
.pdf-view.rs-table .lrow .s { text-align: right; }
.pdf-view.rs-boxed .lrow { border: 1px solid #ddd; border-radius: 6px; padding: 4px 8px; }
@media (max-width: 640px) {
  .pdf-view .list-plain { grid-template-columns: 1fr; }
  /* header stacks on mobile: logo + org on top, details below in a readable 2-col grid */
  .pdf-view .print-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .pdf-view .print-head.pos-center { align-items: center; }
  .pdf-view .print-head .print-meta { margin-left: 0; text-align: left; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 14px; font-size: .82rem; }
  .pdf-view .print-head.pos-center .print-meta { text-align: left; }
  .pdf-view .print-org-name { font-size: 1.25rem; }
  /* sign-on register → each person a tile with a big, readable signature */
  .signon-row { flex-direction: column; align-items: stretch; border: 1px solid var(--line); border-radius: 8px; padding: 8px !important; margin-bottom: 8px; }
  .signon-row .thumb { width: 100% !important; height: 74px !important; }
  .signon-row .thumb img { width: 100%; height: 100%; object-fit: contain; }
  .signon-row .acts { margin-left: 0; margin-top: 8px; justify-content: flex-start; }
}
@media print {
  @page { size: A4; margin: 8mm; }
  .sidebar, .topbar, .scrim, .toast, #menuBtn, .btn, .iconbtn, .review-row, .acts, .db-caret, .db-move, .maprow, .sync, .ver-badge, .detail-head { display: none !important; }
  html, body { background: #fff !important; font-size: var(--pdf-fs, 9px) !important; }
  .main { margin: 0 !important; padding: 0 !important; }
  #app { max-width: 100% !important; }
  .formcard, .formfill { box-shadow: none !important; border: none !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
  /* branded header (screen-hidden, print-only) */
  .formfill, .print-head, .print-head *, .list-plain, .lrow, .qt { font-family: var(--pdf-font, 'Inter', system-ui, sans-serif) !important; }
  .print-head { display: flex !important; align-items: center; gap: 16px; border-bottom: 2.5px solid #222; padding-bottom: 9px; margin-bottom: 11px; }
  .print-head.pos-center { flex-direction: column !important; align-items: center !important; text-align: center; }
  .print-head.pos-center .print-meta { margin-left: 0 !important; text-align: center; }
  .print-head.pos-right .print-logo { order: 3; margin-left: 12px; }
  .print-logo { max-height: var(--pdf-logo, 64px); max-width: 220px; }
  .print-org-name { font-family: var(--font-head); font-weight: 800; font-size: calc(1.5rem * var(--pdf-org-scale, 1)); line-height: 1.12; display: var(--pdf-org-display, block); }
  .print-title { font-size: calc(1.05rem * var(--pdf-title-scale, 1)); color: #333; margin-top: 1px; }
  .print-meta { margin-left: auto; text-align: right; font-size: .82rem; color: #222; line-height: 1.5; }
  .print-meta b { color: #000; }
  h2, h3 { font-size: .9rem !important; margin: .12rem 0 !important; }
  .eyebrow { margin: .3rem 0 .1rem !important; font-size: calc(.64rem * var(--pdf-sec-scale, 1)) !important; break-after: avoid; color: var(--pdf-sec-color, #b45309) !important; font-weight: var(--pdf-sec-weight, 800) !important; }
  .ecard-fields { display: none !important; }
  /* ANSWERS AS TILES — 2-column grid so a typical form fits one page (big crew lists overflow) */
  .list-plain { display: grid !important; grid-template-columns: repeat(var(--pdf-cols, 2), 1fr); gap: 1px 16px; align-items: start; margin: 0 !important; }
  .lrow, .signon-row { break-inside: avoid; margin: 0 !important; padding: .1rem 0 !important; border: none !important; display: flex !important; }
  .lrow .main { min-width: 0; }
  .qt, .lrow .t { font-size: calc(.78rem * var(--pdf-q-scale, 1)) !important; line-height: 1.22 !important; margin: 0 !important; color: var(--pdf-q-color, #111) !important; }
  .lrow .s { font-size: .74rem !important; line-height: 1.22 !important; color: var(--pdf-a-color, #111) !important; }
  .lrow .s b { font-weight: var(--pdf-a-weight, 800) !important; color: var(--pdf-a-color, #111) !important; background: var(--pdf-a-bg, transparent) !important; padding: var(--pdf-a-pad, 0) !important; border-radius: 3px; }
  .lrow.fail .s b { color: var(--pdf-fail-color, #d11616) !important; }
  .lrow.fail .t { color: var(--pdf-fail-color, #d11616) !important; }
  .lrow.fail { background: var(--pdf-fail-bg, transparent) !important; border-radius: 3px; padding-left: 4px !important; padding-right: 4px !important; }
  /* row layouts: table = Q left / A right with a rule; boxed = each Q/A in a border */
  .rs-table .lrow { border-bottom: 1px solid #bbb; padding: .18rem 0 !important; }
  .rs-table .lrow .main { display: grid !important; grid-template-columns: 1fr auto; gap: 3px 10px; align-items: baseline; }
  .rs-table .lrow .s { text-align: right; white-space: nowrap; }
  .rs-boxed .lrow { border: 1px solid #ccc; border-radius: 4px; padding: .2rem .4rem !important; }
  .dot { width: 5px !important; height: 5px !important; margin-top: 3px; }
  /* keep the sign-on register full-width (single column) so signatures line up */
  #soList { display: block !important; }
  #soList .signon-row { margin: .12rem 0 !important; }
  /* signatures are the point of a signed form — size them from the PDF setting, never squash them */
  .thumb { width: var(--pdf-sig-w, 91px) !important; height: var(--pdf-sig-h, 38px) !important; border: 1px solid #ddd !important; }
  .thumb img, .signon-row img { max-height: var(--pdf-sig-h, 38px) !important; width: 100% !important; height: 100% !important; object-fit: contain !important; background: #fff !important; }
  #soList .signon-row { align-items: center; gap: 8px; }
  .sig-img { max-height: calc(var(--pdf-sig-h, 38px) * 1.9) !important; max-width: 300px !important; }
  .formfill > img { max-height: calc(var(--pdf-sig-h, 38px) * 1.9) !important; max-width: 220px !important; }
  a[href]::after { content: '' !important; }
}
.db-caret{background:none;border:none;cursor:pointer;color:var(--mut);font-size:1.35rem;line-height:1;width:40px;height:40px;min-width:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;padding:0;transition:background .12s,color .12s}
.db-caret:hover{color:var(--ink);background:var(--soft,rgba(120,120,140,.12))}
.dashblock.collapsed{margin-bottom:.5rem}

/* ---- version badge + changelog ---- */
.side-brand{position:relative}
.ver-badge{margin-left:auto;background:var(--accent-soft);color:var(--accent2);border:none;border-radius:20px;
  padding:.15rem .5rem;font-size:.66rem;font-weight:800;cursor:pointer;font-family:var(--mono);letter-spacing:.02em}
.ver-badge:hover{background:var(--accent);color:#fff}
.changelog .cl-list{margin:.2rem 0 .2rem 1.1rem;padding:0;font-size:.86rem;color:var(--ink2);line-height:1.5}
.changelog .cl-list li{margin:.1rem 0}

/* ---- compliance alert actions ---- */
.alert-row .alert-acts{display:flex;gap:.1rem;margin-left:.4rem;opacity:.55}
.alert-row:hover .alert-acts{opacity:1}
.alert-row.is-muted{opacity:.6}
.ack-toggle{padding:.5rem 0 .2rem;text-align:center}
.resp-row:hover{background:var(--panel2)}

/* ---- compliance alert word-buttons + bulk ---- */
.alert-row .alert-cb{width:auto;flex:none;margin-right:.1rem}
.alert-acts{display:flex;gap:.3rem;margin-left:.5rem;flex-wrap:wrap}
.ab{border:1px solid var(--line2);background:var(--panel);border-radius:7px;padding:.28rem .55rem;font-size:.76rem;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap}
.ab:disabled{opacity:.4;cursor:default}
.ab-ack{color:var(--ok);border-color:var(--ok)} .ab-ack:hover:not(:disabled){background:var(--ok-bg)}
.ab-snooze{color:var(--soon);border-color:var(--soon)} .ab-snooze:hover:not(:disabled){background:var(--soon-bg)}
.ab-book{color:var(--accent);border-color:var(--accent)} .ab-book:hover:not(:disabled){background:var(--accent-soft)}
.ab-undo{color:var(--mut)}
.alert-bulk{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;padding:.5rem .1rem;border-bottom:1px solid var(--line);margin-bottom:.3rem}
.alert-bulk .tsel-all{display:flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--mut);cursor:pointer}
.alert-bulk input{width:auto}

/* ---- inspection review row ---- */
.review-row{margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--line);display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}

/* ---- date/time quick-fill row ---- */
.dt-row{display:flex;gap:.5rem;align-items:center;margin-top:.4rem}
.dt-row input{flex:0 0 auto}
.dt-now{white-space:nowrap}

/* ---- multi-person chips ---- */
.qpeople .pchips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.4rem}
.pchip{display:inline-flex;align-items:center;gap:.35rem;background:var(--accent-soft);color:var(--accent2);
  border-radius:20px;padding:.25rem .3rem .25rem .6rem;font-size:.84rem;font-weight:600}
.pchip-x{background:none;border:none;color:var(--accent2);cursor:pointer;font-size:.8rem;padding:0 .2rem;line-height:1}
.pchip-x:hover{color:var(--bad)}

/* ---- photo upload question + response photos ---- */
.qphoto .ph-thumbs{display:flex;flex-wrap:wrap;gap:.5rem}
.ph-thumb{position:relative;width:88px;height:88px;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.ph-thumb img{width:100%;height:100%;object-fit:cover}
.ph-del{position:absolute;top:2px;right:2px;background:rgba(0,0,0,.55);color:#fff;border:none;border-radius:50%;width:20px;height:20px;cursor:pointer;font-size:.7rem;line-height:1}
/* photo labels — a shot of a manhole is worth far more to the office marked MH-1 */
.ph-thumb{height:auto;padding-bottom:0}
.ph-thumb img{height:88px}
.ph-cap{position:absolute;left:0;right:0;bottom:0;border:none;background:rgba(15,22,40,.82);color:#fff;
  font:inherit;font-size:.66rem;font-weight:700;padding:.2rem .25rem;cursor:pointer;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-tap-highlight-color:transparent}
.ph-thumb.labelled .ph-cap{background:var(--accent);color:#fff}
.cap-preview{border:1px solid var(--line);border-radius:10px;overflow:hidden;max-height:180px;display:grid;place-items:center;background:var(--panel2)}
.cap-preview img{max-width:100%;max-height:180px;object-fit:contain;display:block}
.resp-photos{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.4rem}
.resp-photos img{width:120px;height:120px;object-fit:cover;border-radius:8px;border:1px solid var(--line);display:block}
.resp-photos .rp{position:relative;display:inline-block;text-decoration:none}
.rp-cap{position:absolute;left:0;right:0;bottom:0;background:rgba(15,22,40,.82);color:#fff;font-size:.68rem;
  font-weight:700;padding:.18rem .3rem;text-align:center;border-radius:0 0 8px 8px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media print{ .rp-cap{background:none;color:#000;position:static;padding:.1rem 0;font-size:8px} .resp-photos img{width:90px;height:90px} }

/* ---- mobile: stop compliance/expiring rows squishing ---- */
@media(max-width:560px){
  .lrow{flex-wrap:wrap}
  .lrow .rt{width:100%;text-align:left;margin-top:.2rem;padding-left:1.4rem}
  .alert-row .alert-acts{margin-left:1.4rem;margin-top:.3rem}
  .statgrid{grid-template-columns:1fr 1fr;gap:.6rem}
  .stat{padding:.8rem .9rem}
  .stat .v{font-size:1.6rem}
}

/* ---- collapsible settings cards ---- */
.formcard.collapsed > :not(h3){display:none !important}
.formcard > h3{display:flex;align-items:center;gap:.55rem}
.formcard > h3 .card-caret{display:inline-grid;place-items:center;width:26px;height:26px;flex:none;
  background:var(--accent);color:#fff;border-radius:8px;font-size:.95rem;font-weight:900;line-height:1}
.formcard > h3:hover .card-caret{background:var(--accent2)}
.formcard.collapsed{padding-bottom:1rem;cursor:pointer}
.formcard.collapsed:hover{border-color:var(--accent)}

/* ---- form builder: notify recipient toggles ---- */
.fb-notify{display:flex;gap:1rem;flex-wrap:wrap;margin:.2rem 0 .3rem}

/* ---- upload progress bar ---- */
.upl-progress{margin-top:.7rem;max-width:420px}
.upl-bar{height:8px;background:var(--panel2);border:1px solid var(--line);border-radius:999px;overflow:hidden}
.upl-bar span{display:block;height:100%;width:0;background:var(--accent);transition:width .25s ease}
.upl-text{font-size:.8rem;color:var(--mut);margin-top:.3rem}