:root{
  --navy:#0d2b45; --navy2:#173f63; --accent:#0d7a8c; --line:#d6dde4;
  --bg:#f4f6f8; --card:#ffffff; --ink:#16232e; --muted:#5c6b78;
  --pass:#1c7c46; --pass-bg:#e4f4ea; --fail:#b3261e; --fail-bg:#fdeceb;
  --miss:#b4720f; --miss-bg:#fdf0da;
  --na:#6b6b6b; --na-bg:#eeeeee; --warn:#a8630a;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"Segoe UI",-apple-system,Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.45}
h1,h2,h3,h4{margin:0 0 .4em;font-weight:650;line-height:1.25}
button{font-family:inherit;font-size:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}

/* ---------- App chrome ---------- */
#topbar{position:sticky;top:0;z-index:50;background:var(--navy);color:#fff;display:flex;align-items:center;gap:14px;padding:9px 16px;box-shadow:0 2px 6px rgba(0,0,0,.2);flex-wrap:wrap}
#topbar .brand{font-weight:700;letter-spacing:.04em;font-size:15px;white-space:nowrap}
#topbar .brand span{opacity:.65;font-weight:400}
#docref{font-size:12px;opacity:.9;background:rgba(255,255,255,.12);padding:3px 9px;border-radius:3px;white-space:nowrap}
#topbar .spacer{flex:1}
.tbtn{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);color:#fff;padding:6px 12px;border-radius:4px}
.tbtn:hover{background:rgba(255,255,255,.26)}
.tbtn.primary{background:var(--accent);border-color:var(--accent)}
.tbtn.primary:hover{background:#0f8fa4}

#userbar{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);padding:4px 8px;border-radius:4px;border:1px solid rgba(255,255,255,.2)}
#userbar label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;opacity:.8}
#userbar select{background:#fff;color:var(--ink);border:0;border-radius:3px;padding:5px 8px;font-weight:600;min-width:180px}
#userbar select.unset{background:#ffe6a3;color:#6b4b00}

#layout{display:flex;align-items:flex-start;max-width:1500px;margin:0 auto;gap:18px;padding:18px}
#nav{position:sticky;top:64px;width:250px;flex:none;background:var(--card);border:1px solid var(--line);border-radius:6px;overflow:hidden;max-height:calc(100vh - 88px);overflow-y:auto}
#nav h4{margin:0;padding:9px 12px;background:var(--navy2);color:#fff;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
#navdocref{padding:8px 12px;font-size:11.5px;color:var(--muted);border-bottom:1px solid #eef1f4;
  background:#f7fafb;line-height:1.4}
#navdocref:empty{display:none}
#nav a{display:flex;justify-content:space-between;gap:6px;align-items:center;padding:7px 12px;border-bottom:1px solid #eef1f4;color:var(--ink);text-decoration:none;font-size:13px}
#nav a:hover{background:#f0f5f8}
#nav a.active{background:#e3eef3;border-left:3px solid var(--accent);padding-left:9px;font-weight:600}
#nav .prog{font-size:11px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
#nav .prog.done{color:var(--pass);font-weight:700}
#nav .prog.hasfail{color:var(--fail);font-weight:700}
#main{flex:1;min-width:0}

.card{background:var(--card);border:1px solid var(--line);border-radius:6px;margin-bottom:18px;overflow:hidden}
.card > h2{background:var(--navy2);color:#fff;padding:10px 16px;margin:0;font-size:15px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.card > h2 .badge{font-size:11px;font-weight:600;background:rgba(255,255,255,.18);padding:3px 9px;border-radius:10px}
.card .body{padding:16px}
.hint{color:var(--muted);font-size:12.5px;margin:0 0 12px}

/* ---------- Setup form ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px 16px}
.fld{display:flex;flex-direction:column;gap:4px}
.fld label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.fld label .req{color:var(--fail)}
.fld input,.fld select,.fld textarea{border:1px solid var(--line);border-radius:4px;padding:8px 9px;background:#fff;width:100%}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.fld input.bad{border-color:var(--fail);background:#fff6f5}
.filename-preview{margin-top:14px;padding:12px 14px;background:#eef6f8;border:1px dashed var(--accent);border-radius:5px}
.filename-preview .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.filename-preview .val{font-family:Consolas,"SF Mono",Menlo,monospace;font-size:14px;font-weight:700;color:var(--navy);word-break:break-all;margin-top:3px}

/* ---------- Personnel ---------- */
table.tbl{width:100%;border-collapse:collapse}
table.tbl th{background:#eef2f5;text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:7px 8px;border-bottom:2px solid var(--line);white-space:nowrap}
table.tbl td{border-bottom:1px solid #eef1f4;padding:5px 6px;vertical-align:middle}
table.tbl input,table.tbl select{border:1px solid var(--line);border-radius:3px;padding:6px 7px;width:100%;background:#fff}
.icon-btn{background:#fff;border:1px solid var(--line);border-radius:4px;padding:5px 9px;color:var(--fail);font-weight:700;line-height:1}
.icon-btn:hover{background:var(--fail-bg);border-color:var(--fail)}
.addrow{margin-top:10px;background:var(--card);border:1px solid var(--accent);color:var(--accent);font-weight:600;border-radius:4px;padding:7px 14px}
.addrow:hover{background:#e6f3f6}

/* ---------- Test rows ---------- */
.test{border-bottom:1px solid var(--line);padding:14px 16px;display:grid;grid-template-columns:54px minmax(0,1fr) 46px 300px;gap:14px;align-items:start}
.test:last-child{border-bottom:0}
.test.res-P{background:linear-gradient(90deg,var(--pass-bg) 0 4px,#fff 4px)}
.test.res-F{background:linear-gradient(90deg,var(--fail-bg) 0 4px,#fdf7f7 4px)}
.test.res-NA{background:linear-gradient(90deg,var(--na-bg) 0 4px,#fafafa 4px)}
.test .ref{font-weight:800;color:var(--navy);font-size:15px;font-variant-numeric:tabular-nums}
/* result box — tick / cross / dash, prints and exports */
.rmark{display:flex;flex-direction:column;align-items:center;gap:2px}
.rbox{margin-top:7px;width:34px;height:34px;border:2px solid var(--line);border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:800;line-height:1;background:#fff;color:var(--muted);-webkit-print-color-adjust:exact;print-color-adjust:exact}
.test.res-P .rbox{border-color:var(--pass);color:var(--pass);background:var(--pass-bg)}
.test.res-F .rbox{border-color:var(--fail);color:var(--fail);background:var(--fail-bg)}
.test.res-NA .rbox{border-color:var(--na);color:var(--na);background:var(--na-bg)}
.test .name{font-weight:650;font-size:14.5px;margin-bottom:3px}
.test .meta{font-size:12.5px;color:var(--muted);margin-bottom:3px}
.test .meta b{color:#3d4d5a;font-weight:700}
.test .inputs{display:flex;flex-direction:column;gap:7px}
.pf{display:flex;gap:6px}
.pf button{flex:1;border:1.5px solid var(--line);background:#fff;border-radius:4px;padding:9px 0;font-weight:750;letter-spacing:.03em;color:var(--muted);transition:.12s}
.pf button:hover{border-color:#9aa8b4}
.pf button.p.on{background:var(--pass);border-color:var(--pass);color:#fff}
.pf button.f.on{background:var(--fail);border-color:var(--fail);color:#fff}
.pf button.n.on{background:var(--na);border-color:var(--na);color:#fff}
.test input[type=text],.test textarea{border:1px solid var(--line);border-radius:4px;padding:7px 8px;width:100%;background:#fff}
.test textarea{resize:vertical;min-height:34px}
.stamp{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:6px;min-height:17px}
.stamp .who{background:var(--navy);color:#fff;font-weight:750;padding:1px 7px;border-radius:3px;letter-spacing:.04em}
.stamp .clr{margin-left:auto;background:none;border:0;color:var(--muted);text-decoration:underline;font-size:11px;padding:0}
.needs-punch{font-size:11.5px;color:var(--fail);font-weight:650}

/* ---------- measurement fields ----------
   The label and unit are real text, not placeholders, so a blank printed
   form still says what has to be measured and in what units. */
.test.measure{grid-template-columns:54px minmax(0,1fr) 46px 330px}
.test.measure .ref{color:var(--accent)}
.mtag{display:inline-block;margin-left:9px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);background:#e6f3f6;border:1px solid #b6dbe3;border-radius:9px;padding:1px 8px;vertical-align:2px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.specchip{display:inline-block;background:#eef2f5;border:1px solid var(--line);border-radius:3px;padding:0 7px;font-weight:750;color:var(--navy);-webkit-print-color-adjust:exact;print-color-adjust:exact}
.mfield{display:flex;align-items:center;flex-wrap:wrap;gap:7px;background:#f7fafb;border:1px solid #dbe6ea;border-radius:4px;padding:5px 8px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.mlab{flex:1;min-width:0;font-size:11px;font-weight:750;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mval{width:86px;flex:none;border:1px solid var(--line);border-radius:3px;padding:5px 7px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;background:#fff}
.mval:focus{outline:2px solid var(--accent);outline-offset:-1px}
.munit{flex:none;width:42px;font-size:12px;font-weight:750;color:var(--navy)}
/* unit choice — the label is the control */
.uopts{flex:none;display:flex;gap:3px}
.uopt{border:1px solid var(--line);background:#fff;border-radius:9px;padding:2px 8px;font-size:11px;font-weight:750;color:var(--muted);line-height:1.35}
.uopt:hover{border-color:#9aa8b4}
.uopt.on{background:var(--navy);border-color:var(--navy);color:#fff}
.pdhint{font-size:11px;color:var(--muted);font-style:italic;margin-top:-2px}
.mfield.choice{flex-wrap:wrap}
.mopts{display:flex;gap:4px}
.mopt{border:1px solid var(--line);background:#fff;border-radius:3px;padding:4px 9px;font-size:11.5px;font-weight:650;color:var(--muted)}
.mopt.on{background:var(--accent);border-color:var(--accent);color:#fff}

/* ---------- section intro, sub-groups, safety callouts ---------- */
.secintro{padding:12px 16px 4px;border-bottom:1px solid var(--line)}
.secnote{margin:0 0 10px;font-size:12.5px;color:var(--muted);line-height:1.5}
.callout{display:flex;gap:10px;align-items:baseline;border-radius:5px;padding:9px 13px;margin-bottom:9px;font-size:12.5px;line-height:1.5;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.callout b{flex:none;text-transform:uppercase;letter-spacing:.06em;font-size:10.5px;font-weight:800}
.callout.warning,.callout.caution{background:#fff5e2;border:1px solid #edcf94;color:#6b4b0a}
.callout.warning b,.callout.caution b{color:#a8630a}
.callout.note{background:#eef4f8;border:1px solid #cadbe6;color:#3d5567}
.callout.note b{color:#41708c}
.callout.critical,.callout.safety{background:var(--fail-bg);border:1.5px solid var(--fail);color:#7d1a15;font-weight:600}
.callout.critical b,.callout.safety b{color:var(--fail)}
.grouprow{background:#eef2f5;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:6px 16px;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);-webkit-print-color-adjust:exact;print-color-adjust:exact}

.signoff{background:#f7f9fa;border-top:2px solid var(--line);padding:12px 16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}

/* ---------- Summary ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-bottom:16px}
.stat{background:#fff;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:5px;padding:11px 13px}
.stat .n{font-size:26px;font-weight:750;line-height:1;font-variant-numeric:tabular-nums}
.stat .l{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-top:4px;font-weight:700}
.stat.p{border-left-color:var(--pass)} .stat.p .n{color:var(--pass)}
.stat.f{border-left-color:var(--fail)} .stat.f .n{color:var(--fail)}
.stat.n{border-left-color:var(--na)} .stat.n .n{color:var(--na)}
.stat.r{border-left-color:var(--warn)} .stat.r .n{color:var(--warn)}
.verdict{padding:14px 16px;border-radius:5px;font-weight:700;font-size:16px;text-align:center;margin-bottom:16px}
.verdict.ok{background:var(--pass-bg);color:var(--pass);border:1.5px solid var(--pass)}
.verdict.no{background:var(--fail-bg);color:var(--fail);border:1.5px solid var(--fail)}
.verdict.wip{background:#fff4e0;color:var(--warn);border:1.5px solid var(--warn)}
.bar{height:9px;border-radius:5px;background:#e6ebef;overflow:hidden;display:flex;margin-top:5px}
.bar i{display:block;height:100%}
.bar i.p{background:var(--pass)} .bar i.f{background:var(--fail)} .bar i.n{background:var(--na)}

.pill{display:inline-block;font-size:11px;font-weight:750;padding:2px 8px;border-radius:10px}
.pill.P{background:var(--pass-bg);color:var(--pass)}
.pill.F{background:var(--fail-bg);color:var(--fail)}
.pill.NA{background:var(--na-bg);color:var(--na)}
.pill.none{background:#fff4e0;color:var(--warn)}

/* ---------- Dashboard ---------- */
.dashbar{position:sticky;top:0;z-index:50;background:var(--navy);color:#fff;display:flex;align-items:center;gap:12px;padding:10px 20px;box-shadow:0 2px 6px rgba(0,0,0,.2);flex-wrap:wrap}
.dashbar .brand{font-weight:700;letter-spacing:.04em;font-size:15px}
.dashbar .brand span{opacity:.65;font-weight:400}
.dashbar .spacer{flex:1}
.dashwrap{max-width:1240px;margin:0 auto;padding:26px 20px 60px}
.dashhead h1{font-size:25px;color:var(--navy);margin:0 0 5px}
.dashhead p{color:var(--muted);margin:0 0 22px;max-width:760px}
.grouphead{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:22px 0 11px}
.grouphead:before{content:"";flex:none;width:3px;height:14px;background:var(--accent);border-radius:2px}
.grouphead b{background:#e3eaef;color:var(--navy);border-radius:9px;padding:1px 8px;font-size:11px}
.grouphead:after{content:"";flex:1;height:1px;background:var(--line)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px}

.tile{position:relative;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:15px 16px 14px;cursor:pointer;transition:.14s;display:flex;flex-direction:column;gap:3px;min-height:158px;font:inherit;color:inherit;border-top:4px solid var(--accent)}
.tile:hover{border-color:var(--accent);box-shadow:0 5px 16px rgba(13,43,69,.14);transform:translateY(-2px)}
.tile .code,.tile .sub,.tile .metaline{padding-right:74px}
.tile .code{font-size:29px;font-weight:800;color:var(--navy);letter-spacing:.03em;line-height:1.05;font-variant-numeric:tabular-nums}
.tile .sub{font-size:12.5px;color:var(--muted);font-weight:600}
.tile .metaline{font-size:11.5px;color:var(--muted);margin-top:2px}
.tile .foot{margin-top:auto;padding-top:10px}
.tile .cnt{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);font-weight:650;margin-bottom:4px}
.tile.fail{border-top-color:var(--fail)}
.tile.ready{border-top-color:var(--warn)}
.tile.done{border-top-color:var(--pass);background:#fafbfc}
.tile.done .code{color:#48606f}
.tile .tag{position:absolute;top:11px;right:12px;font-size:10px;font-weight:750;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:9px}
.tag.wip{background:#eef2f5;color:var(--muted)}
.tag.fail{background:var(--fail-bg);color:var(--fail)}
.tag.ready{background:#fff4e0;color:var(--warn)}
.tag.done{background:var(--pass-bg);color:var(--pass)}

.tilewrap{position:relative;display:flex}
.tilewrap .tile{flex:1}
.tiledel{position:absolute;top:37px;right:12px;border:0;background:#eef2f5;color:var(--muted);font-size:10px;font-weight:750;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:9px;opacity:.65;transition:.12s}
.tilewrap:hover .tiledel{opacity:1}
.tiledel:hover{background:var(--fail-bg);color:var(--fail)}

.tile.new .lbl,.tile.new .sm{padding-right:0}
.tile.new{border:2px dashed var(--accent);border-top:2px dashed var(--accent);background:#f2f9fb;align-items:center;justify-content:center;text-align:center;color:var(--accent);gap:7px}
.tile.new:hover{background:#e6f3f6}
.tile.new .plus{font-size:34px;line-height:1;font-weight:300}
.tile.new .lbl{font-weight:750;font-size:14.5px}
.tile.new .sm{font-size:11.5px;color:var(--muted);font-weight:500}

#linkbanner{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:#fff8e8;border:1px solid #f0d089;border-left:4px solid var(--warn);border-radius:6px;padding:14px 16px;margin-bottom:6px}
#linkbanner .lb-txt{flex:1;min-width:280px;font-size:13px;color:#6b4b0a;line-height:1.5}
#linkbanner .lb-btn{background:var(--warn);border:0;color:#fff;font-weight:700;padding:10px 20px;border-radius:5px;white-space:nowrap}
#linkbanner .lb-btn:hover{background:#8f5308}

.empty{background:var(--card);border:1px dashed var(--line);border-radius:8px;padding:26px;text-align:center;color:var(--muted);grid-column:1/-1}
#dash_note{margin-top:26px;font-size:12.5px;color:var(--muted);background:#fff;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:5px;padding:12px 15px}
#dash_note b{color:var(--ink)}
#unitchip{font-weight:800;letter-spacing:.05em;background:#fff;color:var(--navy);padding:3px 10px;border-radius:4px;font-size:14px}

/* ---------- type picker on the setup screen ---------- */
.typepick{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px}
.typecard{display:flex;gap:13px;align-items:center;text-align:left;background:#fff;border:2px solid var(--line);border-radius:7px;padding:13px 15px;font:inherit;color:inherit;transition:.13s}
.typecard:hover{border-color:#9dc3ce}
.typecard.on{border-color:var(--accent);background:#f2f9fb;box-shadow:0 2px 10px rgba(13,122,140,.14)}
.tc-letter{flex:none;width:42px;height:42px;border-radius:7px;background:#eef2f5;color:var(--muted);display:grid;place-items:center;font-size:21px;font-weight:800}
.typecard.on .tc-letter{background:var(--accent);color:#fff}
.tc-name{font-weight:750;font-size:15px}
.tc-blurb{font-size:11.5px;color:var(--muted);line-height:1.35;margin-top:1px}
.tc-count{font-size:11px;color:var(--accent);font-weight:700;margin-top:3px}

/* ---------- manage forms ---------- */
.ftabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.ftab{background:#fff;border:1px solid var(--line);border-radius:6px;padding:9px 16px;font-weight:650;color:var(--muted);display:flex;align-items:center;gap:8px}
.ftab b{background:#eef2f5;color:var(--navy);border-radius:9px;padding:1px 8px;font-size:11px}
.ftab.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.ftab.on b{background:rgba(255,255,255,.2);color:#fff}
.fsummary{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.fsum{background:#fff;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:5px;padding:9px 14px}
.fsum b{display:block;font-size:14px}
.fsum span{font-size:11.5px;color:var(--muted)}

.fsec{background:#fff;border:1px solid var(--line);border-radius:7px;margin-bottom:14px;overflow:hidden}
.fsechead{display:flex;align-items:center;gap:9px;background:var(--navy2);padding:8px 12px}
.fsechead input{border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.12);color:#fff;border-radius:4px;padding:6px 9px;font-weight:650}
.fsechead input::placeholder{color:rgba(255,255,255,.6)}
.fsecnum{width:62px;text-align:center}
.fsectitle{flex:1;min-width:120px}
.fseccount{color:rgba(255,255,255,.75);font-size:11.5px;white-space:nowrap}
.fsechead button{background:rgba(255,255,255,.16);border:0;color:#fff;border-radius:4px;padding:6px 10px;line-height:1}
.fsechead button:hover{background:rgba(255,255,255,.3)}
.fsechead button.del:hover{background:var(--fail)}
.fsecbody{padding:10px 12px 12px}

.frow{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid #eef1f4}
.frow:last-of-type{border-bottom:0}
.fref{width:64px;flex:none;border:1px solid var(--line);border-radius:4px;padding:7px 6px;text-align:center;font-weight:750;color:var(--navy)}
.fmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.fmain input,.fmain textarea{border:1px solid var(--line);border-radius:4px;padding:7px 9px;width:100%;background:#fff}
.fname{font-weight:650}
.fsub{resize:vertical;min-height:32px;color:var(--muted);font-size:13px}
.fextra,.fextra3{display:grid;gap:6px}
.fextra{grid-template-columns:1fr 1fr}
.fextra3{grid-template-columns:1fr 1fr 1fr}
.fmeas{border:1px dashed #cfdbe2;border-radius:5px;padding:8px 10px;background:#fafcfd}
.fmlbl{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.fmrow{display:flex;gap:5px;margin-bottom:5px}
.fmrow input{flex:1;min-width:0;border:1px solid var(--line);border-radius:4px;padding:5px 7px;font-size:12.5px}
.fmrow input:nth-child(2){flex:0 0 74px}
.fmrow select{flex:0 0 96px;border:1px solid var(--line);border-radius:4px;padding:5px;font-size:12.5px}
.fmrow .del{flex:0 0 26px;background:#fff;border:1px solid var(--line);border-radius:4px;color:var(--muted)}
.fmrow .del:hover{background:var(--fail-bg);border-color:var(--fail);color:var(--fail)}
.fnote{width:100%;border:1px solid var(--line);border-radius:4px;padding:7px 9px;margin-bottom:9px;resize:vertical;color:var(--muted);font-size:13px}
.fwarn{display:flex;gap:6px;align-items:flex-start;margin-bottom:6px}
.fwarn select{border:1px solid var(--line);border-radius:4px;padding:6px 8px;flex:none;font-weight:650}
.fwarn textarea{flex:1;border:1px solid var(--line);border-radius:4px;padding:7px 9px;resize:vertical;font-size:13px}
.fwarn .del{background:#fff;border:1px solid var(--line);border-radius:4px;width:28px;height:30px;color:var(--muted)}
.fwarn .del:hover{background:var(--fail-bg);border-color:var(--fail);color:var(--fail)}
.fextra input,.fextra3 input{font-size:12.5px}
.fticks{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);font-weight:650;padding-top:2px}
.tick{display:inline-flex;align-items:center;gap:5px;background:#f2f4f7;border:1px solid var(--line);border-radius:12px;padding:3px 11px 3px 8px;cursor:pointer;color:var(--muted)}
.tick.on{background:#e3f1f5;border-color:var(--accent);color:var(--accent)}
.tick input{margin:0}
.fbtns{display:flex;flex-direction:column;gap:3px;flex:none}
.fbtns button{background:#fff;border:1px solid var(--line);border-radius:4px;width:28px;height:26px;line-height:1;color:var(--muted);padding:0}
.fbtns button:hover{background:#eef2f5;color:var(--navy)}
.fbtns button.del:hover{background:var(--fail-bg);border-color:var(--fail);color:var(--fail)}

.chip{display:inline-flex;align-items:center;gap:7px;border-radius:14px;padding:5px 13px;font-size:12px;font-weight:650;border:1px solid transparent;max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip i{width:8px;height:8px;border-radius:50%;flex:none;display:block}
.chip.live{background:rgba(46,190,110,.18);color:#b6f5d2;border-color:rgba(46,190,110,.45);cursor:default}
.chip.live i{background:#3ddc84;box-shadow:0 0 0 3px rgba(61,220,132,.22)}
.chip.saving{background:rgba(255,255,255,.14);color:#e6eef4;border-color:rgba(255,255,255,.25)}
.chip.saving i{background:#ffd166;animation:pulse 1s infinite}
.chip.warn{background:rgba(255,193,74,.2);color:#ffe1a8;border-color:rgba(255,193,74,.5)}
.chip.warn i{background:#ffc14a}
.chip.warn:hover{background:rgba(255,193,74,.34)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ---------- PIN prompt ---------- */
.modalwrap{position:fixed;inset:0;background:rgba(13,43,69,.55);display:flex;
  align-items:center;justify-content:center;z-index:300;padding:20px}
.modalwrap.hidden{display:none}
.modal{background:var(--card);border-radius:8px;width:100%;max-width:430px;
  box-shadow:0 18px 50px rgba(0,0,0,.35);overflow:hidden}
.modalhead{background:var(--navy);color:#fff;padding:14px 20px}
.modalhead h3{margin:0;font-size:16px}
.modalbody{padding:18px 20px 6px}
.pinsummary{background:#f7f9fa;border:1px solid var(--line);border-radius:5px;
  padding:11px 13px;font-size:12.5px;line-height:1.55;color:#3d4d5a}
.pinsummary b{color:var(--navy)}
.pinwarn{font-size:12.5px;color:var(--fail);font-weight:650;margin:11px 0 15px}
.pinlabel{display:block;font-size:11px;font-weight:750;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.pininput{width:100%;border:1.5px solid var(--line);border-radius:5px;padding:11px 13px;
  font-size:21px;font-weight:700;letter-spacing:.35em;text-align:center;
  font-variant-numeric:tabular-nums;background:#fff}
.pininput:focus{outline:2px solid var(--accent);outline-offset:-1px}
.pininput.bad{border-color:var(--fail);background:#fff6f5}
.pinerr{min-height:19px;font-size:12px;font-weight:650;color:var(--fail);padding:5px 2px 0}
.modalfoot{display:flex;justify-content:flex-end;gap:9px;padding:8px 20px 18px}
.mbtn{background:#fff;border:1px solid var(--line);color:var(--navy);font-weight:700;
  padding:9px 18px;border-radius:5px}
.mbtn:hover{background:#eef2f5}
.mbtn.del{background:var(--fail);border-color:var(--fail);color:#fff}
.mbtn.del:hover{background:#8f1e17}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(90px);background:var(--navy);color:#fff;padding:11px 22px;border-radius:22px;box-shadow:0 5px 18px rgba(0,0,0,.28);z-index:200;opacity:0;transition:.25s;font-weight:600}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* ---------- sync status ----------
   Three states worth telling apart at a glance, and the words say the rest.
   Nothing here is ever a bare tick: "probably saved" is the one thing this
   chip must never manage to convey. */
.chip.sync-ok{background:rgba(46,190,110,.18);color:#b6f5d2;border-color:rgba(46,190,110,.45)}
.chip.sync-ok i{background:#3ddc84}
.chip.sync-waiting{background:rgba(255,193,74,.2);color:#ffe1a8;border-color:rgba(255,193,74,.5)}
.chip.sync-offline{background:rgba(255,255,255,.12);color:#dbe6ee;border-color:rgba(255,255,255,.28)}
.chip.sync-signin{background:rgba(179,38,30,.28);color:#ffd9d6;border-color:rgba(179,38,30,.6)}
.chip.sync-busy{background:rgba(255,255,255,.14);color:#e6eef4;border-color:rgba(255,255,255,.25)}
.chip.sync-na{display:none}
.chip:hover{filter:brightness(1.12)}

/* ---------- sign in ---------- */
.gatecard{max-width:430px;margin:8vh auto 0;background:var(--card);border:1px solid var(--line);
  border-radius:8px;padding:28px 30px 24px;box-shadow:0 6px 26px rgba(13,43,69,.13)}
.gatecard h1{margin:0 0 4px;color:var(--navy);font-size:26px;letter-spacing:.01em}
.gatelead{margin:0 0 20px;color:var(--muted);font-size:13px;line-height:1.5}
.gatecard .fld{margin-bottom:14px}
.gatecard input,.gatecard select{width:100%;padding:11px 12px;border:1px solid var(--line);
  border-radius:5px;background:#fff;font-size:16px}
.gatecard input:focus,.gatecard select:focus{outline:2px solid var(--accent);outline-offset:-1px}
.gate-err{color:var(--fail);font-size:13px;font-weight:650;min-height:19px;margin:-4px 0 8px}
.bigbtn{width:100%;padding:13px;border:0;border-radius:5px;background:var(--accent);color:#fff;
  font-size:16px;font-weight:700;letter-spacing:.02em}
.bigbtn:hover{background:#0b6a79}
.bigbtn[disabled]{opacity:.6;cursor:default}
.gatefoot{margin:16px 0 0;color:var(--muted);font-size:12px;text-align:center}

.gate{max-width:1100px;margin:34px auto;padding:0 18px}
.gate .banner{background:var(--navy);color:#fff;border-radius:6px 6px 0 0;padding:20px 24px}
.gate .banner h1{font-size:22px;margin:0}
.gate .banner p{margin:5px 0 0;opacity:.8;font-size:13.5px}
.hidden{display:none !important}

/* ---------- Print ---------- */
.printonly{display:none}
/* print-only text mirrors — hidden on screen, shown on paper */
.rword,.mtext,.notetext,.sigline,.cardref,.utext{display:none}
/* ---------- narrow windows and scaled displays ---------- */
/* ---------- the section drawer ----------
   On a laptop the section list is a column beside the work and the button that
   opens it is hidden. Below 1180px there is no room for a column, so the same
   list becomes a drawer over the top — the button appears, and the list slides
   in from the left when it is asked for and not before.
   One list, built once, in both places: buildNav fills #navlinks and neither
   layout knows about the other. */
/* Square, so a single character sits in the middle of it. */
.iconbtn{padding:6px 11px;font-size:15px;line-height:1.15}
.navbtn{display:none}
/* On a laptop the three buttons are simply part of the bar and the ⋯ that
   would reveal them does not exist. */
.topmenu{display:contents}
.topmore{display:none}
.navclose{display:none;background:none;border:0;color:#fff;font-size:20px;line-height:1;padding:0 2px;opacity:.8}
.navclose:hover{opacity:1}
#navback{display:none}

@media screen and (max-width:1180px){
  #layout{padding:12px;gap:12px}
  .navbtn{display:inline-flex}
  .navclose{display:block}

  /* Off the left edge until it is opened. Not display:none — it slides, and a
     hidden element cannot slide. */
  /* visibility, not just transform. A transform moves something off the screen
     and leaves it in the tab order: pressing Tab on a narrow window walked
     through sixteen invisible stops — the close button and every section link —
     before reaching the first PASS button, with the browser trying to scroll
     each one into view. Off the screen is not the same as gone.
     The transition delays visibility until the slide has finished, so it still
     slides out rather than vanishing. */
  #nav{position:fixed;top:0;left:0;bottom:0;width:270px;max-width:82vw;max-height:none;
       z-index:60;border-radius:0;border-left:0;border-top:0;border-bottom:0;
       transform:translateX(-102%);visibility:hidden;
       transition:transform .18s ease-out,visibility 0s .18s;
       overscroll-behavior:contain;
       box-shadow:2px 0 18px rgba(13,43,69,.28)}
  #nav.open{transform:translateX(0);visibility:visible;transition:transform .18s ease-out}
  #nav h4{display:flex;justify-content:space-between;align-items:center;padding:13px 12px}
  /* Roomier than the laptop list: this one is tapped, not clicked. */
  #nav a{padding:12px}

  #navback{display:block;position:fixed;inset:0;z-index:55;background:rgba(13,43,69,.42);touch-action:none}
  #navback.hidden{display:none}
}
@media screen and (max-width:860px){
  /* Put the entry boxes on their own full-width row so bar / m / min can
     never be pushed past the right edge. */
  .test,.test.measure{grid-template-columns:46px minmax(0,1fr);row-gap:10px}
  .test .rmark{grid-column:1;grid-row:2}
  .test .inputs{grid-column:2;grid-row:2}
  .test{padding:12px}
  .mval{width:100%}
  .mlab{flex:1 1 120px}
}
@media screen and (max-width:620px){
  .card > h2{font-size:14px;padding:9px 12px}
  .grid{grid-template-columns:1fr}

  /* ---------- a phone held upright ----------
     Six buttons across the top wrap onto three lines and take a third of the
     screen before a single check is visible. On a laptop that space is free;
     on a phone it is the difference between seeing one check and seeing three.
     So the bar keeps what somebody needs WHILE RECORDING — the sections, the
     way back, which vehicle, who is recording, and whether the work is safe —
     and the rest goes behind a menu. Nothing is removed; it moves. */
  #topbar{gap:8px;padding:7px 10px}
  #topbar .tbtn{padding:7px 10px}
  /* The word goes, the house stays. This was font-size:0 with a ::first-letter
     override, which is clever and unverifiable: whether the house counts as
     the "first letter" differs between engines, and where it does not the
     button reads as a lone "D". A span that is simply hidden does the same job
     the same way everywhere. */
  #topbar #dashbtn .lbl{display:none}
  #topbar #dashbtn{padding:7px 11px}
  #docref{display:none}                              /* it is on the printout, where it belongs */
  #userbar label{display:none}
  #userbar select{max-width:9.5em}
  /* The two status chips share one row rather than taking one each. Three rows
     of sticky bar was giving back most of the space this block exists to save. */
  .chip{max-width:none;flex:1 1 auto;min-width:0;order:9;justify-content:center}
  .topmore{display:inline-flex}
  .topmenu .tbtn{display:none}
  .topmenu.open .tbtn{display:inline-flex}
  /* Ordered BEFORE the chips, so what appears when you tap the button in the
     top row appears directly beneath it, not two rows down past the status. */
  .topmenu.open{display:flex;flex:1 1 100%;gap:8px;order:5;flex-wrap:wrap}

  /* The status line goes full width on its own row, which is the one thing on
     this bar that has to be readable at a glance without being tapped. */
  #layout{padding:8px;gap:8px}
  .card{margin-bottom:10px}
  .card .body{padding:11px}
  .test{padding:11px 10px}
}
/* Wide tables scroll inside their card rather than stretching the page. */
@media screen{ .card .body{overflow-x:auto} }

@media print{
  @page{size:A4;margin:15mm 13mm 16mm}

  /* --- what never belongs on paper --- */
  #topbar,#nav,#navback,#dash,#gate,#forms,.noprint,.addrow,.icon-btn,.modalwrap,
  .pf,.stamp .clr,.hint.noprint,.toast,#chip,.chip{display:none !important}
  .printonly{display:block}

  body{background:#fff;font-size:9.3pt;color:#1b2733}
  #layout{display:block;padding:0;max-width:none}
  #main{width:100%}
  a{color:inherit;text-decoration:none}

  /* Identity rides in each section's title bar. Nothing floats over the page,
     so nothing can ever land on top of the content. */
  .cardref{display:inline;font-size:7.6pt;font-weight:600;color:#c3d2dd;
    letter-spacing:.04em;white-space:nowrap}

  /* --- page 1 title block --- */
  #printhead{border-bottom:2.4pt solid #0d2b45;padding-bottom:7px;margin-bottom:12px}

  /* --- section cards --- */
  .card{border:0;border-radius:0;margin:0 0 7mm;break-inside:auto}
  .card > h2{background:#0d2b45 !important;color:#fff !important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
    font-size:11pt;padding:5px 9px;break-after:avoid}
  .card .body{padding:0}
  .sec-card{break-before:page}
  #sec-summary{break-before:auto}
  .secintro{padding:7px 9px 1px}
  .secnote{font-size:8.6pt;margin-bottom:6px}
  .callout{padding:5px 9px;margin-bottom:6px;font-size:8.6pt;break-inside:avoid}
  .grouprow{background:#eef2f5 !important;padding:3px 9px;font-size:8.2pt;
    font-weight:750;break-after:avoid}

  /* --- one test per row: ref+mark | what was tested | what was recorded --- */
  .test{grid-template-columns:40px 1fr 32px 152px;padding:6px 9px;gap:10px;
    break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .test.measure{grid-template-columns:40px 1fr 32px 152px}
  .test .ref{font-size:9.6pt}
  .test .name{font-size:9.6pt;margin-bottom:2px}
  .test .meta{font-size:8.5pt;line-height:1.35;margin-bottom:2px}
  .rbox{width:26px;height:26px;font-size:15px;margin-top:4px;border-width:1.4pt}

  /* result word under the box — says plainly what was recorded */
  .rword{display:block;width:26px;margin-top:2px;font-size:6.6pt;font-weight:800;
    letter-spacing:.03em;text-align:center;line-height:1.15}
  .test.res-P .rword{color:var(--pass)}
  .test.res-F .rword{color:var(--fail)}
  .test.res-NA .rword{color:var(--na)}
  .rword.none{color:#93a1ac;font-weight:650}

  /* recorded values print as text, not as empty boxes */
  .test textarea,.test input[type=text]{display:none !important}
  .notetext{display:block;font-size:8.5pt;line-height:1.35}
  .notetext .nlab{color:#5c6b78;font-weight:700}
  .notetext.is-empty{display:none !important}
  .mfield{padding:2px 6px;gap:5px;flex-wrap:nowrap;background:#f7fafb !important;border-color:#c9d8de !important}

  /* --- required but missing: keep the space, flag it orange --- */
  .mfield.is-empty{background:var(--miss-bg) !important;border-color:var(--miss) !important}
  .mfield.is-empty .mlab{color:#7d4f07;font-weight:750}
  .mfield.is-empty .mtext{display:inline-block;min-width:52px;
    border-bottom:.9pt solid var(--miss)}
  .mfield.is-empty .munit{color:#7d4f07}
  /* an unanswered choice shows the options it could have been, so the gap is plain */
  .mfield.choice.is-empty .mopt{display:inline-block !important;color:#7d4f07;
    border-color:var(--miss);background:transparent !important}
  .rbox:empty{border-color:var(--miss);background:var(--miss-bg)}
  .rword.none{color:var(--miss);font-weight:800}
  .mlab{font-size:7.6pt;white-space:normal}
  .mval{display:none !important}
  .mtext{display:inline;font-weight:750;font-size:8.6pt}
  .munit{width:auto;font-size:8pt}
  .uopt{display:none !important}          /* the choice is made; print the answer */
  .utext{display:inline;font-size:8pt;font-weight:750;color:#0d2b45}
  .mfield.is-empty .utext{color:#7d4f07}
  .mtag{display:none !important}
  .mopt{padding:1px 6px;font-size:8pt}
  .mopt:not(.on){display:none !important}
  .specchip{font-size:8.4pt}
  .stamp{font-size:7.8pt;min-height:0;margin-top:2px}
  .needs-punch{font-size:8pt}

  table.tbl{font-size:8.6pt}
  table.tbl th{-webkit-print-color-adjust:exact;print-color-adjust:exact;
    background:#eef2f5 !important;color:#0d2b45 !important}
  table.tbl td,table.tbl th{padding:3px 6px}
  table.tbl td input,table.tbl td select{border:0 !important;padding:1px 0;background:transparent !important;
    font-size:8.6pt}
  table.tbl tr{break-inside:avoid}

  /* --- acceptance certificate: proper ruled lines to sign on --- */
  #sec-accept .fld input,#sec-accept .fld select,#sec-accept .fld textarea{
    border:0 !important;border-bottom:.8pt solid #8fa3b0 !important;border-radius:0 !important;
    background:transparent !important;padding:2px 0 3px;font-size:9.4pt;font-weight:650}
  #sec-accept .fld select{display:none !important}
  #sec-accept .fld label{font-size:8pt;color:#5c6b78}
  .sigline{display:block;border-bottom:.8pt solid #8fa3b0;min-height:16pt;font-weight:650;font-size:9.4pt}
  #acceptsummary{background:#f7f9fa !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}

  .stats,.verdict{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .verdict{font-size:10pt;padding:7px 10px}
}