/* Site audits screens (audits/ app). Every audits page wraps in <div class="body audits">. Linked from
   core/templates/core/base.html. Every class starts au- so it can't collide with another area. Shared parts come from
   jeevz.css: .jz-lt, .jz-sec, .jz-group, .jz-row, .jz-area, .jz-file, .jz-go, .jz-st, .jz-who/.jz-pk, .jz-foot, .safe
   and the Dock. Rules start #app so they beat the shared kit (design-learnings 56).
   The one-check screen is the loud one: the check in big words, a progress strip, and three thumb-sized answers
   (Pass forest, Fail red, N/A grey) pinned where a gloved thumb reaches. The printed report has its own inline CSS. */

/* ---- kind tiles: one colour per kind, so a list reads at a glance ---- */
#app .audits .au-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--jz-r-icon);background:var(--jz-soft)}
#app .audits .au-ic svg{width:22px;height:22px;fill:none;stroke:var(--jz-forest);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
#app .audits .au-ic:is(.au-k-scaffold,.au-k-ladder,.au-k-excavation){background:var(--jz-amber-soft)}
#app .audits .au-ic:is(.au-k-scaffold,.au-k-ladder,.au-k-excavation) svg{stroke:var(--jz-amber)}
#app .audits .au-ic:is(.au-k-rams,.au-k-electrical){background:var(--jz-info-soft)}
#app .audits .au-ic:is(.au-k-rams,.au-k-electrical) svg{stroke:var(--jz-info)}
#app .audits .au-ic.au-k-quality{background:var(--jz-field)}
#app .audits .au-ic.au-k-quality svg{stroke:var(--jz-ink)}
#app .audits .au-ic.is-fail{background:var(--jz-red-soft)}
#app .audits .au-ic.is-fail svg{stroke:var(--jz-red)}
#app .audits .au-ic.is-due{background:var(--jz-amber-soft)}
#app .audits .au-ic.is-due svg{stroke:var(--jz-amber)}
#app .audits .au-ic.is-ok{background:var(--jz-ok-soft)}
#app .audits .au-ic.is-ok svg{stroke:var(--jz-ok);stroke-width:2.25}

/* ---- rows ---- */
#app .audits .au-list>.au-row+.au-row::before{left:68px}
#app .audits .au-row{position:relative;display:flex;align-items:center;gap:var(--jz-s3);min-height:68px;padding:var(--jz-s2) var(--jz-s4);color:var(--jz-ink);text-decoration:none}
#app .audits a.au-row:active{background:var(--jz-field)}
#app .audits .au-row-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#app .audits .au-row-t b{font:600 17px/22px var(--jz-sans);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
#app .audits .au-row-t small{font:400 15px/20px var(--jz-sans);color:var(--jz-muted);text-wrap:pretty}
#app .audits .au-row-t small.au-clip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#app .audits .au-row-t .jz-st{font-size:15px;line-height:20px}
#app .audits .au-row-r{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:0;text-align:right}
#app .audits .au-row-r b{font:700 17px/22px var(--jz-sans);color:var(--jz-ink);font-variant-numeric:tabular-nums}
#app .audits .au-sm{font:400 13px/18px var(--jz-sans);color:var(--jz-muted)}
#app .audits .au-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--jz-amber-dot)}
#app .audits .au-dot.is-late{background:var(--jz-red)}
#app .audits .au-row .jz-go-chev{flex:none}

/* action rows that are form buttons look like every other row (design-learnings 38) */
#app .audits .jz-group>form{position:relative;margin:0}
#app .audits button.jz-go{width:100%;margin:0;border:0;border-radius:0;background:none;box-shadow:none;text-align:left;font:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
#app .audits button.jz-go:active{background:var(--jz-field)}
#app .audits button.jz-go .jz-go-t small{white-space:normal}
#app .audits .jz-group>form+form::before,#app .audits .jz-group>*+form::before{content:"";position:absolute;top:0;left:60px;right:0;height:.5px;background:var(--jz-chev);opacity:.5;pointer-events:none;z-index:1}

/* ---- the list's empty state ---- */
#app .audits .au-empty{display:flex;flex-direction:column;align-items:center;gap:var(--jz-s2);margin:var(--jz-s6) 0;padding:var(--jz-s8) var(--jz-s5) var(--jz-s6);background:var(--jz-card);border-radius:var(--jz-r);box-shadow:var(--jz-shadow);text-align:center}
#app .audits .au-empty-ic{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;margin:0 0 var(--jz-s2);border-radius:var(--jz-r-icon);background:var(--jz-soft)}
#app .audits .au-empty-ic svg{width:34px;height:34px;fill:none;stroke:var(--jz-forest);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
#app .audits .au-empty b{font:700 22px/28px var(--jz-sans);letter-spacing:-.02em;color:var(--jz-ink)}
#app .audits .au-empty p{max-width:30ch;margin:0 0 var(--jz-s3);font:400 16px/22px var(--jz-sans);color:var(--jz-muted);text-wrap:pretty}
#app .audits .au-empty .btn{width:100%}

/* ---- picking a checklist: tiles instead of the picker's round icon ---- */

/* ---- one check at a time (6 Nov rebuild, docs/redesign/{light,night}/audit.html) ----
   Top card: Check n of m with the signal chip, the 12-segment strip (ok forest/lime, failed red, failed then fixed
   amber, N/A quiet, now ringed), the counts, the last failed check's history and the "not a sign-off" line. Then the
   check in big Cabinet words on paper, and the three answers in the Dock, 96px tall: Pass in the done colour, Fail in
   the danger fill, N/A as the secondary button. Same rule both looks; the tokens make the difference. */
#app .audits.au-check{padding-bottom:calc(var(--jz-tabbar) + var(--jz-safe-b) + 170px)}
#app .audits.au-check.is-failing{padding-bottom:calc(var(--jz-tabbar) + var(--jz-safe-b) + 112px)}
#app .audits .au-head{margin:0 0 var(--jz-s4)}
#app .audits .au-name{margin:0;font:700 var(--jz-t-card)/1.1 var(--jz-display);letter-spacing:-.015em;color:var(--jz-ink);text-wrap:balance}
#app .audits .au-head .jz-meta{margin:4px 0 0}
#app .audits .au-top{padding:var(--jz-s4) var(--jz-s5)}
#app .audits .au-prog{margin:0}
#app .audits .au-of{display:flex;align-items:center;justify-content:space-between;gap:var(--jz-s3);margin:0}
#app .audits .au-of b{font:700 20px/1.1 var(--jz-display);color:var(--jz-ink);font-variant-numeric:tabular-nums}
#app .audits .au-net{min-height:32px;font-size:var(--jz-t-meta)}
#app .audits .au-net .jz-ic{width:16px;height:16px}
#app .audits .au-bar{display:flex;gap:4px;height:14px;margin:var(--jz-s3) 0 0}
#app .audits .au-bar i{flex:1;min-width:0;border-radius:var(--jz-r-full);background:var(--jz-ring-track)}
#app .audits .au-bar i.is-pass{background:var(--jz-done)}
#app .audits .au-bar i.is-fail{background:var(--jz-danger-fill)}
#app .audits .au-bar i.is-fix{background:var(--jz-late-fill)}
#app .audits .au-bar i.is-na{background:var(--jz-faint)}
#app .audits .au-bar i.is-now{background:var(--jz-surface);box-shadow:inset 0 0 0 2.5px var(--jz-ink)}
#app .audits .au-tally{display:flex;justify-content:space-between;gap:var(--jz-s3);margin:var(--jz-s2) 0 0;font:500 var(--jz-t-meta)/1.3 var(--jz-sans);color:var(--jz-ink-2)}
#app .audits .au-tally-fail{color:var(--jz-danger);font-weight:600}
#app .audits .au-hist{display:flex;align-items:center;gap:var(--jz-s3);min-height:64px;margin:var(--jz-s3) 0 0;padding:var(--jz-s2);border-radius:var(--jz-r-inner);background:var(--jz-surface-2);color:var(--jz-ink);text-decoration:none}
#app .audits .au-hist-ic{position:relative;flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:var(--jz-r-m);background:var(--jz-chip-danger);overflow:hidden}
#app .audits .au-hist-ic.is-fix{background:var(--jz-wash)}
#app .audits .au-hist-ic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#app .audits .au-hist-ic i{position:relative;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--jz-danger-fill);color:var(--jz-on-danger)}
#app .audits .au-hist-ic.is-fix i{background:var(--jz-late-fill);color:var(--jz-on-late)}
#app .audits .au-hist-ic img+i{position:absolute;right:3px;bottom:3px;width:22px;height:22px;box-shadow:0 0 0 2px var(--jz-surface)}
#app .audits .au-hist-ic .jz-ic{width:15px;height:15px;stroke-width:3.2}
#app .audits .au-hist-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#app .audits .au-hist-t b{font:600 16px/1.25 var(--jz-sans);overflow-wrap:anywhere}
#app .audits .au-hist-t small{font:500 var(--jz-t-meta)/1.3 var(--jz-sans);color:var(--jz-ink-2)}
#app .audits .au-rec{display:flex;align-items:center;gap:6px;margin:var(--jz-s3) 0 0;font:500 var(--jz-t-meta)/1.3 var(--jz-sans);color:var(--jz-ink)}
#app .audits .au-rec .jz-ic{flex:none;width:16px;height:16px}
#app .audits .au-q{padding:var(--jz-s5) var(--jz-s5) var(--jz-s6)}
#app .audits .au-qk{margin:0;font:600 var(--jz-t-meta)/1.3 var(--jz-sans);color:var(--jz-ink-2)}
#app .audits .au-item{margin:var(--jz-s2) 0 0;font:800 32px/1.06 var(--jz-display);letter-spacing:-.02em;color:var(--jz-ink);text-wrap:balance;overflow-wrap:anywhere}
#app .audits .au-where{margin:var(--jz-s2) 0 0}
#app .audits .au-form{margin:0}
#app .audits .au-opt{margin-left:6px;font-weight:400;color:var(--jz-faint)}
#app .audits .au-sub{display:flex;align-items:center;gap:8px;margin:var(--jz-s6) 0 var(--jz-s2);padding:0 var(--jz-s1);font:700 22px/1.15 var(--jz-display);color:var(--jz-ink)}
#app .audits .au-sub .jz-ic{width:20px;height:20px}
#app .audits .au-more{margin:var(--jz-s1) 0 var(--jz-s3)}
#app .audits .au-more>summary{display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:0 var(--jz-s4);border-radius:var(--jz-r-btn);background:var(--jz-btn2-bg);color:var(--jz-btn2-fg);box-shadow:inset 0 0 0 1.5px var(--jz-btn2-ring);font:600 17px/1 var(--jz-sans);list-style:none;cursor:pointer}
#app .audits .au-more>summary::-webkit-details-marker{display:none}
#app .audits .au-more>summary small{font:500 var(--jz-t-meta)/1 var(--jz-sans);color:var(--jz-ink-2)}
#app .audits .au-more>summary .jz-ic{width:20px;height:20px}
#app .audits .au-more[open]>summary{margin-bottom:var(--jz-s3)}
#app .audits .au-was{margin-top:var(--jz-s2)}
#app .audits .au-res{flex:none;font:700 var(--jz-t-meta)/1.3 var(--jz-sans);white-space:nowrap}
#app .audits .au-res.is-pass{color:var(--jz-forest)}
#app .audits .au-res.is-fail{color:var(--jz-danger)}
#app .audits .au-res.is-na{color:var(--jz-ink-2)}
#app .audits .au-res.is-none{font-weight:500;color:var(--jz-faint)}

/* the three answers: pinned, 96px tall, one tap saves (design-learnings 37: the Dock holds the main action) */
#app .audits .dock.au-dock{padding-top:var(--jz-s3)}
#app .audits .au-answers{display:grid;grid-template-columns:1.2fr 1.2fr 1fr;gap:10px}
#app .audits .au-lock{margin:var(--jz-s2) 0 0;font:500 var(--jz-t-meta)/1.3 var(--jz-sans);color:var(--jz-ink-2);text-align:center}
#app .audits .au-big{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:96px;margin:0;padding:0;border:0;border-radius:var(--jz-r-card);font:800 22px/1 var(--jz-display);letter-spacing:-.01em;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform var(--jz-dur-press) var(--jz-ease-out)}
#app .audits .au-big:active{transform:scale(.97)}
#app .audits .au-big svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
#app .audits .au-big.is-pass{background:var(--jz-done);color:var(--jz-on-done)}
#app .audits .au-big.is-fail{background:var(--jz-danger-fill);color:var(--jz-on-danger)}
#app .audits .au-big.is-na{background:var(--jz-btn2-bg);color:var(--jz-btn2-fg);box-shadow:inset 0 0 0 2px var(--jz-btn2-ring)}
#app .audits .au-big[aria-pressed=true]{box-shadow:0 0 0 3px var(--jz-page),0 0 0 6px var(--jz-ink)}
/* once answered, the other two go quiet so the chosen one reads at a glance (judge 5 Nov: the ring alone was weak) */
#app .audits .au-answers.has-pick .au-big:not([aria-pressed=true]){background:var(--jz-surface-2);color:var(--jz-ink-2);box-shadow:inset 0 0 0 1.5px var(--jz-edge)}
/* a failed check keeps the same three big answers, in the page above "What's wrong", Fail chosen */
#app .audits .au-wrong{color:var(--jz-danger)}
#app .audits .au-date{position:relative}
#app .audits .au-date input[type=date]{position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer}
#app .audits .au-dv{margin-left:auto;font:400 17px/22px var(--jz-sans);color:var(--jz-ink)}
#app .audits .au-dv.is-none{color:var(--jz-faint)}
#app .audits .au-dv::after{content:"";display:inline-block;width:7px;height:7px;margin:0 2px 2px 10px;border:solid var(--jz-chev);border-width:0 2px 2px 0;transform:rotate(-45deg)}
#app .audits .au-file .jz-file-ic.au-thumb{background:var(--jz-field)}
#app .audits .au-file .jz-file-t small{white-space:normal}

/* step between checks, and the saved-as-you-go line */
#app .audits .au-step{display:flex;justify-content:space-between;align-items:center;margin:var(--jz-s2) 0 var(--jz-s3)}
#app .audits .au-step a{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 var(--jz-s3);font:600 16px/20px var(--jz-sans);color:var(--jz-forest);text-decoration:none}
#app .audits .au-step .jz-ic,#app .audits .au-step svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}

/* ---- one audit: the result hero (6 Nov rebuild: a card with the result in Cabinet, the strip, the counts) ---- */
#app .audits .au-hero{position:relative;margin:0 0 var(--jz-s6);padding:var(--jz-s5);border-radius:var(--jz-r-card);background:var(--jz-surface);box-shadow:var(--jz-shadow);color:var(--jz-ink);overflow:hidden}
#app .audits .au-hero p{margin:0}
#app .audits .au-hero-v{margin:var(--jz-s3) 0 var(--jz-s2) !important;font:800 34px/1.05 var(--jz-display);letter-spacing:-.02em;text-wrap:balance}
#app .audits .au-hero-s{font:500 var(--jz-t-meta)/1.35 var(--jz-sans);color:var(--jz-ink-2)}
#app .audits .au-hero-c{display:flex;gap:var(--jz-s6);margin-top:var(--jz-s4) !important;padding-top:var(--jz-s3);box-shadow:inset 0 1px 0 var(--jz-hair);font:500 var(--jz-t-meta)/1.3 var(--jz-sans);color:var(--jz-ink-2)}
#app .audits .au-hero-c b{margin-right:6px;font:800 28px/1 var(--jz-display);color:var(--jz-ink);font-variant-numeric:tabular-nums}
#app .audits .au-o-unsafe{background:var(--jz-danger-fill);color:var(--jz-on-danger);box-shadow:var(--jz-shadow-danger)}
#app .audits .au-o-unsafe :is(.au-hero-s,.au-hero-c,.au-hero-c b){color:var(--jz-on-danger)}
#app .audits .au-o-unsafe .au-hero-c{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--jz-on-danger) 35%,transparent)}
#app .audits .au-bar.is-hero{margin:0 0 var(--jz-s3)}

/* a re-check reminder: a white notice card (design-learnings 18) */

/* the checks, numbered */
#app .audits .au-n{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--jz-field);font:600 13px/1 var(--jz-sans);color:var(--jz-muted);font-variant-numeric:tabular-nums}
#app .audits .au-cam svg{display:block;width:18px;height:18px;fill:none;stroke:var(--jz-faint);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* ---- closing a fix: found / sorted, two-up ---- */
#app .audits .au-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--jz-s3);margin:0 0 var(--jz-s6)}
#app .audits .au-shot{margin:0}
#app .audits .au-shot a,#app .audits .au-shot-none{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:var(--jz-r-m);background:var(--jz-field)}
#app .audits .au-shot img{display:block;width:100%;height:100%;object-fit:cover}
#app .audits .au-shot-none{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
#app .audits .au-shot-none.is-after{background:none;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--jz-ink) 14%,transparent)}
#app .audits .au-shot-none svg{width:28px;height:28px;fill:none;stroke:var(--jz-faint);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
#app .audits .au-shot-none small{font:400 13px/18px var(--jz-sans);color:var(--jz-muted)}
#app .audits .au-shot figcaption{margin:6px 0 0;padding:0 var(--jz-s1);font:600 13px/18px var(--jz-sans);color:var(--jz-muted)}
#app .audits .au-kv{cursor:default}
#app .audits .au-kv:active{background:none}
#app .audits .au-kv .au-v{flex:1;min-width:0;padding:var(--jz-s3) 0;text-align:right;color:var(--jz-ink);text-wrap:pretty;overflow-wrap:anywhere}
/* Close the fix: the Dock is the camera until a photo is picked, then it's "Close the fix" (judge 5 Nov: a greyed
   "Add the photo first" with the real control hidden under the Dock). The file input sits off-screen, the label opens it. */
#app .audits .au-hidefile{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}
#app .audits .au-pickfirst{display:none;box-sizing:border-box;width:100%;margin:0;gap:10px;justify-content:center;align-items:center;cursor:pointer}
#app .audits .au-pickfirst svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#app .audits:has(#au-closephoto:invalid) #au-close{display:none}
#app .audits:has(#au-closephoto:invalid) .au-pickfirst{display:flex}
#app .audits .au-picked{display:none}
#app .audits:has(#au-closephoto:valid) .au-picked{display:block;font-weight:600;color:var(--jz-forest)}
#app .audits:has(#au-closephoto:valid) .au-notyet{display:none}
/* the fix's facts: label over value, every row the same way (judge 5 Nov: some values sat right, some wrapped left) */
#app .audits.au-fix .au-kv{flex-direction:column;align-items:flex-start;gap:2px;padding-top:var(--jz-s3);padding-bottom:var(--jz-s3)}
#app .audits.au-fix .au-kv .k{font:400 15px/20px var(--jz-sans);color:var(--jz-muted)}
#app .audits.au-fix .au-kv .au-v{padding:0;text-align:left;font:400 17px/22px var(--jz-sans)}

/* every form page leaves room for the Dock under its last row (design-learnings 28) */
#app .audits.au-fix{padding-bottom:calc(var(--jz-tabbar) + var(--jz-safe-b) + 112px)}

/* ---- signing ---- */
#app .audits .au-pad{margin:0 0 var(--jz-s6)}
#app .audits .au-pad canvas{position:absolute;inset:0;z-index:2;display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}
#app .audits .au-pad-hint{position:absolute;left:0;right:0;top:50%;transform:translateY(-70%);text-align:center;font:400 17px/22px var(--jz-sans);color:var(--jz-faint);pointer-events:none}
#app .audits .au-pad-line{position:absolute;left:24px;right:24px;bottom:44px;height:1.5px;background:color-mix(in srgb,var(--jz-ink) 22%,transparent);pointer-events:none}
#app .audits .au-pad.is-drawn .au-pad-hint{display:none}
#app .audits .au-pad-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--jz-s3);padding:var(--jz-s2) var(--jz-s1) 0}
#app .audits .au-typed{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:400 16px/21px var(--jz-sans);color:var(--jz-ink);cursor:pointer}
#app .audits .au-typed input{width:22px;height:22px;margin:0;accent-color:var(--jz-forest)}
#app .audits .au-clear{min-height:44px;margin:0;padding:0 var(--jz-s2);border:0;background:none;box-shadow:none;font:600 15px/20px var(--jz-sans);color:var(--jz-forest);cursor:pointer}

/* ---- sharing ---- */

/* ---- your own checklist: rows open in place to edit (design-learnings 35) ---- */

/* ---- the job card fold ---- */
#app .jobauditfold .jz-gogroup{margin:var(--jz-s2) 0 var(--jz-s3)}
#app .jobauditfold .jz-go-t small{white-space:normal}
#app .jobauditfold .jz-go-t small .jz-st{font-size:15px}

/* ---- Audits home (6 Nov rebuild): a re-check that's due is a card on paper with a chip, late ones with the late edge ---- */
#app .audits .au-due{margin:0 0 14px;color:var(--jz-ink)}
#app .audits .au-due .jz-rowline{margin:var(--jz-s3) 0 0;justify-content:flex-start}
#app .audits .au-due .jz-title{margin:0}
#app .audits .au-due .jz-meta{margin:2px 0 0}
#app .audits .au-due-go{width:100%;margin-top:var(--jz-s4)}
#app .audits .au-due-go .jz-ic{width:18px;height:18px}
#app .audits .au-empty .jz-btn{width:100%}

/* ===== Pass 7a: the audit forms and the lower half of one audit, on the pk- kit (screens/cp12.css) =====
   main.pk.audits: rows are .jz-li, choices .pk-opt, fields .jz-field, the Dock a .pk-tray. These rules only add what
   is the audits' own: the kind's avatar colour, the result chip with an icon, the progress card, numbered checks with
   their answer, the signature pad, the "On the report" fold, the checklist editor. Role tokens only. */
#app .au-kav{background:var(--jz-wash);color:var(--jz-forest)}
#app .au-kav:is(.au-k-rams,.au-k-electrical){background:var(--jz-info-soft);color:var(--jz-info)}
#app .au-kav svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#app main.pk.audits .au-hero{margin:0 0 14px}
#app .audits .au-hero-k{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 14px 0 11px;border-radius:var(--jz-r-full);background:var(--jz-surface-2);color:var(--jz-ink);font:600 var(--jz-t-chip)/1 var(--jz-sans)}
#app .audits .au-hero-k .jz-ic{width:17px;height:17px;stroke-width:2.4}
#app .audits .au-prog-card .jz-rowline{justify-content:flex-start;gap:var(--jz-s5)}
#app .audits .au-prog-card .jz-ring-in .jz-num{font-size:34px}
#app .audits .au-prog-v{margin:10px 0 2px;font:800 26px/1.05 var(--jz-display);letter-spacing:-.02em;color:var(--jz-ink)}
#app .audits .au-prog-card .jz-meta{margin:0}
#app .audits .au-prog-card .au-bar{margin-top:var(--jz-s4)}
/* numbered checks with their answer on the right */
#app .audits .au-checks{list-style:none}
#app .audits .au-checks .jz-li{min-height:64px;padding:12px 18px;gap:12px}
#app .audits .au-checks .jz-li-t b{font:500 var(--jz-t-body)/1.35 var(--jz-sans);letter-spacing:0}
#app .audits .au-n{flex:none;display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--jz-surface-2);font:700 15px/1 var(--jz-display);color:var(--jz-ink);font-variant-numeric:tabular-nums}
#app .audits .au-checks .au-res{display:inline-flex;align-items:center;gap:4px}
#app .audits .au-checks .au-res .jz-ic{width:16px;height:16px;stroke-width:2.8}
#app .audits .au-cam svg{display:block;width:20px;height:20px;fill:none;stroke:var(--jz-ink-2);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
/* notes and lock lines */
#app .audits .au-openfix{display:flex;gap:8px;align-items:flex-start;color:var(--jz-late);font-weight:600}
#app .audits .au-openfix .jz-ic{flex:none;width:18px;height:18px;margin-top:1px}
#app .audits .au-safe{justify-content:flex-start;align-items:flex-start;margin:var(--jz-s6) var(--jz-s1) 0;text-align:left}
#app .audits .au-safe .jz-ic{margin-top:1px}
#app .audits .au-explain .jz-li-t small{white-space:normal}
#app .audits .au-about{padding:var(--jz-s4) var(--jz-s5)}
#app .audits .au-about p{margin:0;font:500 var(--jz-t-body)/1.4 var(--jz-sans);color:var(--jz-ink)}
#app .audits .pk-opts.is-ask .pk-opts-in{box-shadow:var(--jz-shadow),0 0 0 2.5px var(--jz-danger)}
/* the signature pad: a paper card with a baseline */
#app .audits .au-pad{margin:0 0 var(--jz-s4)}
#app .audits .au-pad-box{position:relative;height:200px;border-radius:var(--jz-r-card);background:var(--jz-surface);box-shadow:inset 0 0 0 2px var(--jz-chev);overflow:hidden;touch-action:none}
#app .audits .au-pad-box:focus-within{box-shadow:inset 0 0 0 2px var(--jz-forest)}
#app .audits .au-pad-hint{font:500 var(--jz-t-body)/1.3 var(--jz-sans);color:var(--jz-ink-2)}
#app .audits .au-pad-line{left:28px;right:28px;bottom:48px;height:2px;background:var(--jz-hair)}
#app .audits .au-pad-bar{padding:var(--jz-s2) var(--jz-s1) 0}
#app .audits .au-typed{font:500 var(--jz-t-meta)/1.3 var(--jz-sans);min-height:48px}
#app .audits .au-clear{min-height:48px;font:600 var(--jz-t-meta)/1 var(--jz-sans);color:var(--jz-forest)}
#app .audits .au-x{flex:none;min-height:48px;margin:0;padding:0 var(--jz-s2);border:0;background:none;box-shadow:none;font:600 var(--jz-t-meta)/1 var(--jz-sans);color:var(--jz-danger);cursor:pointer}
#app .audits .jz-li form{margin:0}
#app .audits .au-worker{padding:var(--jz-s5)}
#app .audits .au-card-h{margin:0 0 var(--jz-s4);font:700 var(--jz-t-card)/1.1 var(--jz-display);letter-spacing:-.015em;color:var(--jz-ink)}
/* "On the report": a card that opens (the pk-fold look; the class name is fold au-details) */
#app .audits details.au-details{margin:0 0 14px;padding:0;background:var(--jz-surface);border-radius:var(--jz-r-card);box-shadow:var(--jz-shadow)}
#app .audits details.au-details>summary{flex-direction:row;align-items:center;gap:14px;min-height:84px;padding:14px 18px}
#app .audits details.au-details>summary::after{content:none}
#app .audits details.au-details>summary .pk-fold-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
#app .audits details.au-details>summary b{font:600 18px/1.25 var(--jz-sans);color:var(--jz-ink)}
#app .audits details.au-details>summary small{font:500 var(--jz-t-meta)/1.35 var(--jz-sans);color:var(--jz-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#app .audits details.au-details>summary>.jz-ic:last-child{width:20px;height:20px;color:var(--jz-ink-2);stroke-width:2.4;transition:transform var(--jz-dur-press)}
#app .audits details.au-details[open]>summary>.jz-ic:last-child{transform:rotate(90deg)}
#app .audits details.au-details[open]>.pk-fold-in{padding:0 18px 18px}
/* the made message */
#app .audits .au-msg{padding:var(--jz-s5)}
#app .audits .au-msg textarea{min-height:150px;font:500 16px/1.45 var(--jz-sans)}
#app .audits .au-copynote{margin:var(--jz-s2) 0 0;font:500 var(--jz-t-meta)/1.3 var(--jz-sans);color:var(--jz-ink-2);text-align:center}
/* your own checklist */
#app .audits .au-inline{display:flex;align-items:flex-end;gap:10px;padding:var(--jz-s4) var(--jz-s5)}
#app .audits .au-inline .jz-field{flex:1;min-width:0;margin:0}
#app .audits .au-inline .au-save{flex:none;width:auto;padding:0 22px}
#app .audits .au-edit{list-style:none}
#app .audits .au-edit>li{position:relative}
#app .audits .au-edit>li+li::before{content:"";position:absolute;top:0;left:18px;right:18px;height:1.5px;background:var(--jz-hair)}
#app .audits .au-ed>summary{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 18px;list-style:none;cursor:pointer}
#app .audits .au-ed>summary::-webkit-details-marker{display:none}
#app .audits .au-ed>summary b{flex:1;min-width:0;font:500 var(--jz-t-body)/1.35 var(--jz-sans);color:var(--jz-ink);overflow-wrap:anywhere}
#app .audits .au-ed>summary>.jz-ic{width:20px;height:20px;color:var(--jz-ink-2);stroke-width:2.4;transition:transform var(--jz-dur-press)}
#app .audits .au-ed[open]>summary>.jz-ic{transform:rotate(90deg)}
#app .audits .au-ed[open]{background:var(--jz-surface-2)}
#app .audits .au-edform{padding:0 18px 16px}
#app .audits .au-edform .jz-field{margin-bottom:var(--jz-s3)}
#app .audits .au-edbar{display:flex;gap:10px}
#app .audits .au-edbar>*{flex:1}
#app .audits .au-rm{color:var(--jz-danger)}
#app .audits .au-gap{margin-top:var(--jz-s6)}

/* kept from before pass 7a: the check screen's inline answers and saved line, result chip tones, pad states */
#app .audits .au-inline-ans{margin:var(--jz-s4) 0 0;padding:6px}
#app .audits .au-inline-ans .au-big{min-height:72px;font-size:19px}
#app .audits .au-saved{margin:0 0 var(--jz-s4);padding:0 var(--jz-s4);font:500 var(--jz-t-meta)/1.35 var(--jz-sans);color:var(--jz-ink-2);text-wrap:pretty}
#app .audits .au-o-safe .au-hero-k{background:var(--jz-wash);color:var(--jz-forest)}
#app .audits .au-o-actions .au-hero-k{background:var(--jz-late-fill);color:var(--jz-on-late)}
#app .audits .au-o-rams .au-hero-k{background:var(--jz-info-soft);color:var(--jz-info)}
#app .audits .au-o-open .au-hero-k{color:var(--jz-ink-2)}
#app .audits .au-o-unsafe .au-hero-k{background:transparent;color:var(--jz-on-danger);box-shadow:inset 0 0 0 1.5px var(--jz-on-danger)}
#app .audits .au-pad.is-typed .au-pad-box{opacity:.4}
#app .audits .au-pad.is-nocanvas .au-pad-box{display:none}
/* Start the check waits for a checklist: dashed, and it says what's missing (the form still checks it) */
#app main.au-new form:not(:has(input[name=ref]:checked)) #au-go{background:transparent;color:var(--jz-ink-2);box-shadow:none;outline:2px dashed var(--jz-chev);outline-offset:-2px;font-size:0}
#app main.au-new form:not(:has(input[name=ref]:checked)) #au-go .jz-ic{display:none}
#app main.au-new form:not(:has(input[name=ref]:checked)) #au-go::after{content:"Pick a checklist first";font-size:19px}

/* ===================== Q7c (6 Nov): the sign-on page in both looks =====================
   The pad is always light paper (.jz-paper at night), because the pen draws dark ink that goes on a white report.
   In light it is the inner well, so it no longer vanishes into the white card around it. */
#app .audits .au-pad-box{background:var(--jz-surface-2);box-shadow:inset 0 0 0 2px var(--jz-chev)}
#app .audits .au-pad-box:focus-within{box-shadow:inset 0 0 0 2px var(--jz-forest)}
#app .audits .au-pad-line{background:var(--jz-chev)}
/* "Type my name instead": a drawn box that shows in both looks (the native one was black on graphite) */
#app .audits .au-typed input{-webkit-appearance:none;appearance:none;flex:none;display:inline-grid;place-items:center;width:24px;height:24px;margin:0;border-radius:7px;background:var(--jz-surface);box-shadow:inset 0 0 0 2px var(--jz-chev);cursor:pointer}
#app .audits .au-typed input:checked{background:var(--jz-forest);box-shadow:none}
#app .audits .au-typed input:checked::after{content:"";width:10px;height:5px;margin-top:-3px;border:solid var(--jz-on-forest);border-width:0 0 2.5px 2.5px;transform:rotate(-45deg)}
#app .audits .au-typed input:focus-visible{outline:2px solid var(--jz-forest);outline-offset:2px}
/* nobody signed on yet: one quiet card, not a "0" */
#app .audits .au-none{display:flex;align-items:center;gap:14px;margin:0 0 var(--jz-s3);padding:var(--jz-s4) var(--jz-s5)}
#app .audits .au-none-ic{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--jz-wash);color:var(--jz-forest)}
#app .audits .au-none-ic .jz-ic{width:22px;height:22px}
#app .audits .au-none-t{display:flex;flex-direction:column;gap:3px;min-width:0}
#app .audits .au-none-t b{font:600 var(--jz-t-body)/1.3 var(--jz-sans);color:var(--jz-ink)}
#app .audits .au-none-t small{font:500 var(--jz-t-meta)/1.4 var(--jz-sans);color:var(--jz-ink-2)}
#app .audits .au-booked{margin:0 0 var(--jz-s5)}
#app .audits .au-booked .pk-note{margin:0;padding:0 var(--jz-s1)}