/* Gas pack screens (gaspack/*): landlord gas safety check (CP12) access log, unsafe-situation notices, the
   reasonable-steps pack and the payer's two public pages.
   Every gaspack page wraps in <div class="body dz cp12">, so it uses the diary kit (screens/diary.css: dzf forms,
   dz-sec, dz-kv, duecard, ticon rows, dz-empty, dz-foot) and only what is unique lives here, scoped to .cp12.
   Read --jz-* tokens only. No gradient on any button here: the one send button uses .btn.is-send from jeevz.css. */

/* ===== 0. The safety paperwork kit (pk-), 6 Nov rebuild pass 7a =====
   Certificates, Gas safety, EICR fixes, the audit forms and the VAT / quarterly pages share these few layouts. They
   only lay out the shared parts (.jz-card, .jz-list/.jz-li, .jz-chip, .jz-field, .jz-btn, jz_ring, .jz-sechead) and read
   role tokens only, so both looks come from the tokens. Every class starts pk- so it can't collide.
   main.pk                  the page (sets the gaps)
   .pk-due                  the due-date hero: a ring (days left) beside the big date, a chip and one quiet line
   .pk-err                  the error card (red words on the danger chip colour, an icon)
   .pk-fold                 a card that opens (details): a row-like summary, then fields inside
   .pk-kv / .pk-kv-r        facts in a card: words left, value right
   .pk-opts / .pk-opt       big radio rows in a card, a ring that fills forest when picked
   .pk-sw                   a switch row in a card (label + input.switch)
   .pk-file                 the photo / PDF picker: a dashed card with an icon tile (.jz-file keeps its script hooks)
   .pk-red                  a row whose words are danger red (Stop the link, Bin)
   .pk-dock / .pk-tray      the floating tray in the Dock: the lock line over the one action
   .pk-photos               a grid of photos */
#app main.pk{padding-bottom:var(--jz-s4)}
#app main.pk>.jz-lt{margin-bottom:var(--jz-s5)}
#app main.pk .jz-sechead{margin-top:var(--jz-s6)}
#app main.pk .jz-sechead>span{font-variant-numeric:tabular-nums}
#app main.pk .jz-list .jz-li-av{width:48px;height:48px}
#app main.pk .jz-li-av svg:not(.jz-ic){width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#app main.pk .jz-li-t small .jz-chip{min-height:28px;margin:4px 0 0;padding:0 10px 0 8px;font-size:var(--jz-t-label)}
#app main.pk .jz-li-t small .jz-chip .jz-ic{width:14px;height:14px}
#app main.pk .jz-li-t small:has(.jz-chip){display:flex;flex-wrap:wrap;align-items:center;column-gap:8px}
#app main.pk .jz-li-v.is-s{font:600 var(--jz-t-meta)/1.2 var(--jz-sans);letter-spacing:0;color:var(--jz-ink-2)}
#app main.pk form.jz-li-f{margin:0}
#app main.pk form.jz-li-f>button.jz-li{cursor:pointer}
#app main.pk .jz-list>form+form>.jz-li::before,#app main.pk .jz-list>.jz-li+form>.jz-li::before,#app main.pk .jz-list>form+.jz-li::before,#app main.pk .jz-list>details+.jz-li::before,#app main.pk .jz-list>.jz-li+details::before,#app main.pk .jz-list>details+form>.jz-li::before{content:"";position:absolute;top:0;left:18px;right:18px;height:1.5px;background:var(--jz-hair)}
#app main.pk .jz-list>.jz-li+details{position:relative;display:block}
#app main.pk .pk-red .jz-li-t b{color:var(--jz-danger)}
#app main.pk .pk-red .jz-li-av{background:var(--jz-chip-danger);color:var(--jz-on-chip-danger)}
#app main.pk .jz-btn>svg:not(.jz-ic){flex:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#app main.pk .pk-note{margin:calc(-1 * var(--jz-s1)) var(--jz-s1) var(--jz-s4);font:500 var(--jz-t-meta)/1.4 var(--jz-sans);color:var(--jz-ink-2);text-wrap:pretty}
#app main.pk .pk-note a{color:var(--jz-forest);font-weight:600}
#app main.pk .jz-lock{display:block;margin:var(--jz-s5) var(--jz-s2) 0;text-align:center;text-wrap:balance}
#app main.pk .jz-lock>.jz-ic{display:inline-block;margin:-3px 6px 0 0;vertical-align:middle}

/* the due-date hero */
#app .pk-due{padding:var(--jz-s5);isolation:isolate}
#app .pk-due-top{display:flex;align-items:center;gap:var(--jz-s5)}
#app .pk-due::after{content:"";position:absolute;z-index:-1;top:-110px;right:-110px;width:260px;height:260px;background:var(--jz-air);pointer-events:none}
#app .pk-due .jz-ring-in .jz-num{font-size:34px}
#app .pk-due .jz-ring-in small{margin-top:2px;font-size:var(--jz-t-label)}
#app .pk-due-t{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
#app .pk-due-l{font:600 var(--jz-t-meta)/1.2 var(--jz-sans);color:var(--jz-ink-2)}
#app .pk-due-d{margin:0;font:800 30px/1.05 var(--jz-display);letter-spacing:-.025em;color:var(--jz-ink);font-variant-numeric:tabular-nums}
#app .pk-due-d small{display:block;margin-top:4px;font:700 20px/1 var(--jz-display);letter-spacing:-.01em;color:var(--jz-ink-2)}
#app .pk-due-s{margin:var(--jz-s3) 0 0;padding-top:var(--jz-s3);border-top:1.5px solid var(--jz-hair);font:500 var(--jz-t-meta)/1.4 var(--jz-sans);color:var(--jz-ink-2);text-wrap:pretty}
#app .pk-due.is-late .pk-due-d{color:var(--jz-late)}
#app .pk-due.is-none .pk-due-d{font-size:28px;color:var(--jz-ink-2)}
#app .pk-hero{display:block;padding-bottom:var(--jz-s5)}
#app .pk-hero>.pk-due-s{margin-top:var(--jz-s4)}

/* the error card */
#app .pk-err{display:flex;gap:10px;align-items:flex-start;margin:0 0 14px;padding:var(--jz-s4) var(--jz-s5);border-radius:var(--jz-r-inner);background:var(--jz-chip-danger);color:var(--jz-on-chip-danger);font:600 var(--jz-t-body)/1.4 var(--jz-sans)}
#app .pk-err .jz-ic{flex:none;width:22px;height:22px;margin-top:1px}

/* a card that opens */
#app .pk-fold{padding:0}
#app .pk-fold>summary{list-style:none;display:flex;align-items:center;gap:14px;min-height:84px;padding:14px 18px;cursor:pointer}
#app .pk-fold>summary::-webkit-details-marker{display:none}
#app .pk-fold>summary>.pk-fold-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
#app .pk-fold>summary b{font:600 18px/1.25 var(--jz-sans);letter-spacing:-.01em}
#app .pk-fold>summary small{font:500 var(--jz-t-meta)/1.35 var(--jz-sans);color:var(--jz-ink-2)}
#app .pk-fold>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 .pk-fold[open]>summary>.jz-ic:last-child{transform:rotate(90deg)}
#app .pk-fold>summary .jz-li-av{flex:none}
#app .pk-fold-in{padding:0 18px 18px}
#app .pk-fold-in>.jz-sechead:first-child{margin-top:var(--jz-s2)}
#app .pk-fold-in .jz-sechead{margin:var(--jz-s5) 0 var(--jz-s3)}
#app .pk-fold-in .jz-sechead b{font-size:18px}
#app .pk-fold-in .jz-btn{margin-top:var(--jz-s2)}

/* fields: the shared .jz-field, two side by side, a money field with its £ */
#app main.pk .jz-field{margin-bottom:var(--jz-s4)}
#app#app main.pk .jz-field textarea{min-height:96px;resize:none;font:500 var(--jz-t-body)/1.4 var(--jz-sans)}
#app#app main.pk .jz-field textarea.is-short{min-height:56px}
#app main.pk .jz-field input[type=date],#app main.pk .jz-field input[type=time]{-webkit-appearance:none;appearance:none;text-align:left}
#app .pk-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#app .pk-two>.jz-field{min-width:0}
#app .pk-money{position:relative}
#app .pk-money>.pk-cur{position:absolute;left:16px;bottom:16px;font:700 20px/24px var(--jz-display);color:var(--jz-ink-2);pointer-events:none}
#app#app main.pk .pk-money input{padding-left:38px;font:700 20px/1 var(--jz-display);font-variant-numeric:tabular-nums}
#app main.pk .jz-field .jz-field-hint{margin-top:2px}
#app .pk-card-fields{padding:var(--jz-s5) var(--jz-s5) var(--jz-s1)}

/* facts */
#app .pk-kv{padding:4px 0}
#app .pk-kv-r{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:var(--jz-s4);min-height:56px;padding:16px 20px;box-sizing:border-box}
#app .pk-kv-r+.pk-kv-r::before{content:"";position:absolute;top:0;left:20px;right:20px;height:1.5px;background:var(--jz-hair)}
#app .pk-kv-r>span:first-child{flex:none;font:500 var(--jz-t-meta)/1.3 var(--jz-sans);color:var(--jz-ink-2)}
#app .pk-kv-r>:last-child{min-width:0;font:600 var(--jz-t-body)/1.35 var(--jz-sans);color:var(--jz-ink);text-align:right;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
#app .pk-kv-r .jz-chip{min-height:30px}

/* big radio rows */
#app .pk-opts{margin:0 0 14px;padding:0;border:0;min-width:0}
#app .pk-opts>legend{padding:0;margin:0 0 var(--jz-s3) var(--jz-s1);font:700 var(--jz-t-h2)/1.1 var(--jz-display);letter-spacing:var(--jz-track-h2);color:var(--jz-ink)}
#app .pk-opts-in{background:var(--jz-surface);border-radius:var(--jz-r-card);box-shadow:var(--jz-shadow);overflow:hidden}
#app .pk-opt{position:relative;display:flex;align-items:center;gap:14px;min-height:68px;margin:0;padding:12px 18px;cursor:pointer;color:var(--jz-ink)}
#app .pk-opt+.pk-opt::before{content:"";position:absolute;top:0;left:18px;right:18px;height:1.5px;background:var(--jz-hair)}
#app .pk-opt>input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
#app .pk-opt-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#app .pk-opt-t b{font:600 18px/1.25 var(--jz-sans);letter-spacing:-.01em}
#app .pk-opt-t small{font:500 var(--jz-t-meta)/1.35 var(--jz-sans);color:var(--jz-ink-2)}
#app .pk-opt::after{content:"";flex:none;width:26px;height:26px;box-sizing:border-box;border-radius:50%;box-shadow:inset 0 0 0 2px var(--jz-chev)}
#app .pk-opt:has(input:checked){background:var(--jz-wash)}
#app .pk-opt:has(input:checked)::after{background:var(--jz-forest) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/15px no-repeat;box-shadow:none}
[data-theme=dark] #app .pk-opt:has(input:checked)::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306100c' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
@media (prefers-color-scheme:dark){[data-theme=auto] #app .pk-opt:has(input:checked)::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306100c' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}}
#app .pk-opt:has(input:focus-visible){outline:3px solid var(--jz-forest);outline-offset:-3px}
#app .pk-opt .jz-li-av{width:44px;height:44px}
#app .pk-opts.is-grid .pk-opts-in{display:grid;grid-template-columns:1fr 1fr;background:none;box-shadow:none;gap:10px;overflow:visible}
#app .pk-opts.is-grid .pk-opt{min-height:64px;border-radius:var(--jz-r-inner);background:var(--jz-surface);box-shadow:var(--jz-shadow)}
#app .pk-opts.is-grid .pk-opt::before{content:none}
#app .pk-opts.is-grid .pk-opt:has(input:checked){background:var(--jz-wash);box-shadow:inset 0 0 0 2px var(--jz-forest)}
#app .pk-opts.is-grid .pk-opt-t b{font-size:17px}

/* a switch row */
#app .pk-sw{position:relative;display:flex;align-items:center;gap:14px;min-height:68px;padding:12px 18px;cursor:pointer}
#app .pk-sw .pk-opt-t{flex:1}

/* the picker for a photo or PDF */
#app main.pk .jz-file.pk-file{min-height:88px;margin:0 0 14px;padding:14px 18px;border-radius:var(--jz-r-card);background:var(--jz-surface);box-shadow:inset 0 0 0 2px var(--jz-chev);outline:0}
#app main.pk .jz-file.pk-file:has(input:valid),#app main.pk .jz-file.pk-file.is-on{box-shadow:inset 0 0 0 2px var(--jz-forest);background:var(--jz-wash)}
#app main.pk .pk-file .jz-file-ic{width:52px;height:52px;border-radius:50%;background:var(--jz-wash)}
#app main.pk .pk-file .jz-file-ic svg{width:26px;height:26px;stroke:var(--jz-forest);stroke-width:2}
#app main.pk .pk-file .jz-file-t b{font:600 18px/1.25 var(--jz-sans);letter-spacing:-.01em}
#app main.pk .pk-file .jz-file-t small{font:500 var(--jz-t-meta)/1.35 var(--jz-sans);color:var(--jz-ink-2);white-space:normal}

/* photos */
#app .pk-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 14px}
#app .pk-photos>*{display:block;aspect-ratio:1;overflow:hidden;border-radius:var(--jz-r-inner);background:var(--jz-surface-2);box-shadow:var(--jz-shadow)}
#app .pk-photos img{display:block;width:100%;height:100%;object-fit:cover}
#app .pk-photos:has(>:only-child){grid-template-columns:1fr}
#app .pk-photos:has(>:only-child)>*{aspect-ratio:4/3}

/* the Dock tray: the lock line over the one action */
#app .dock.pk-dock{z-index:31;bottom:calc(var(--jz-tabbar) + var(--jz-safe-b) + 10px);padding-top:6px;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
#app .dock.pk-dock::before{content:none}
#app .pk-tray{padding:10px 12px 12px;border-radius:var(--jz-r-card);background:var(--jz-bar-solid);box-shadow:var(--jz-shadow-2)}
#app .pk-tray .jz-lock{display:block;margin:2px 10px 10px;font-size:var(--jz-t-meta);text-align:center;text-wrap:balance}
#app .pk-tray .jz-lock .jz-ic{display:inline-block;margin:-3px 6px 0 0;vertical-align:middle}
#app .pk-tray form{margin:0}
#app .pk-tray .pk-tray-row{display:flex;gap:10px;align-items:center}
#app .pk-tray .pk-tray-row>*{flex:1;min-width:0}
body:has(.pk-dock .jz-lock) #app{padding-bottom:calc(var(--jz-tabbar) + var(--jz-safe-b) + var(--jz-btn-l) + 120px)}
/* a page with no tab bar (the landlord's public pages): the tray sits on the bottom edge */
body:not(:has(#tabs)) #app .dock.pk-dock{bottom:0;padding-bottom:calc(var(--jz-dock-gap) + var(--jz-safe-b))}
body:not(:has(#tabs)):has(.pk-dock) #app{padding-bottom:calc(var(--jz-safe-b) + var(--jz-btn-l) + 72px)}
@media (max-height:520px){#app .dock.pk-dock{position:static;transform:none;width:auto;padding:var(--jz-s4) 0 0}}

/* ===== 1. Rows: a right-hand date, a photo thumb, a private note ===== */
.cp12 .cp-row .cp-when{flex:none;margin-left:auto;font:400 15px/20px var(--jz-sans);color:var(--jz-muted);font-variant-numeric:tabular-nums}
.cp12 .cp-row .rb small .jz-st{margin-left:6px;font:600 15px/20px var(--jz-sans)}
#app .cp12 .cp-row .rb small{white-space:normal;overflow:visible;text-overflow:clip}
.cp12 .cp-row .cp-note{color:var(--jz-faint);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cp12 .cp-try{cursor:default}
.cp12 .cp-try:active{background:var(--jz-card)}
.cp12 .cp-thumb{flex:none;display:block;width:48px;height:48px;margin-left:auto;overflow:hidden;border-radius:10px;background:var(--jz-field);box-shadow:inset 0 0 0 .5px var(--jz-hair)}
.cp12 .cp-thumb img{display:block;width:100%;height:100%;object-fit:cover}
/* "start one" plus tiles are mint like every other add row (snags, EICR fixes): no grey plus tiles */
.cp12 .cp-addjob{margin-top:var(--jz-s6)}
#app .cp12 :is(.ticon,.jz-go-ic).cp-ic-id{background:var(--jz-red-soft)}
#app .cp12 :is(.ticon,.jz-go-ic).cp-ic-id svg{stroke:var(--jz-red)}
.cp12 .ticon.cp-ic-ar{background:var(--jz-amber-soft)}
.cp12 .ticon.cp-ic-ar svg{stroke:var(--jz-amber)}
.cp12 .jz-go-ic svg{fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.cp12 .cp-empty>svg{fill:none}

/* ===== 2. The 12-month clock ===== */
.cp12 .cp-clock .cp-due .jz-st{font:600 15px/20px var(--jz-sans)}
.cp12 .cp-clock .cp-nodate{color:var(--jz-faint)}
.cp12 .dz-sec .val{float:right;margin:0;font:600 13px/18px var(--jz-sans);color:var(--jz-muted);font-variant-numeric:tabular-nums}

/* ===== 3. Sent / opened / read, with the red last row that stops the link ===== */
.cp12 .cp-sent .val .jz-st{font:600 17px/22px var(--jz-sans)}
.cp12 .cp-stop{position:relative;margin:0}
.cp12 .cp-stop::before{content:"";position:absolute;top:0;left:var(--jz-s4);right:0;height:.5px;background:var(--jz-chev);opacity:.5}
.cp12 .cp-redrow{display:flex;align-items:center;width:100%;min-height:52px;margin:0;padding:0 var(--jz-s4);border:0;border-radius:0;background:none;box-shadow:none;color:var(--jz-red);font:400 17px/22px var(--jz-sans);text-align:left;cursor:pointer}
.cp12 .cp-redrow:active{background:var(--jz-red-soft)}

/* ===== 4. Folds that hold a form ===== */
.cp12 details.cp-fold{margin:0 0 var(--jz-s6)}
.cp12 details.cp-fold[open]>form{padding:0 var(--jz-s4) var(--jz-s4)}
.cp12 details.cp-fold .dzf-group{box-shadow:inset 0 0 0 .5px var(--jz-hair);background:var(--jz-paper)}
.cp12 details.cp-fold .dz-sec{margin-top:var(--jz-s5)}
.cp12 details.cp-fold .btn.block{margin-top:var(--jz-s2)}

/* ===== 5. Choice rows with a second line (ID / AR) ===== */
.cp12 .cp-opt>span{display:flex;flex-direction:column;gap:2px}
.cp12 .cp-opt>span b{font:inherit;font-weight:600;color:var(--jz-ink)}
.cp12 .cp-opt>span small{font:400 15px/20px var(--jz-sans);color:var(--jz-muted)}
.cp12 .cp-opt-id:has(input:checked) b{color:var(--jz-red)}
.cp12 .cp-opt-ar:has(input:checked) b{color:var(--jz-amber)}
.cp12 .cp-opt:has(input:checked) small{font-weight:400}

/* ===== 6. The notice: classification card, the engineer's words, photos, the fix ===== */
.cp12 .cp-class{display:flex;align-items:flex-start;gap:var(--jz-s4);padding:var(--jz-s5)}
.cp12 .cp-class .cp-badge{flex:none;display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:var(--jz-r-icon);font:800 22px/1 var(--jz-sans);letter-spacing:-.02em}
.cp12 .cp-class-id{box-shadow:inset 0 0 0 1.5px var(--jz-red-line),var(--jz-shadow)}
.cp12 .cp-class-id .cp-badge{background:var(--jz-red);color:#fff}
.cp12 .cp-class-ar{box-shadow:inset 0 0 0 1.5px var(--jz-amber-line),var(--jz-shadow)}
.cp12 .cp-class-ar .cp-badge{background:var(--jz-amber-soft);color:var(--jz-amber)}
.cp12 .cp-class-t{min-width:0}
.cp12 .cp-class-t b{display:block;font:700 22px/28px var(--jz-sans);letter-spacing:-.02em;color:var(--jz-ink)}
.cp12 .cp-class-id .cp-class-t b{color:var(--jz-red)}
.cp12 .cp-class-ar .cp-class-t b{color:var(--jz-amber)}
.cp12 .cp-class-t p{margin:4px 0 0;font:400 15px/20px var(--jz-sans);color:var(--jz-muted)}
#app .cp12 .cp-facts .row{align-items:flex-start;padding-top:15px;padding-bottom:15px}
#app .cp12 .cp-facts .row .rb{flex:none}
#app .cp12 .cp-facts .val{max-width:72%;white-space:normal;overflow:visible;text-align:right;text-wrap:pretty}
#app .cp12 .jz-lt .jz-sub .jz-st{margin-left:6px}
.cp12 .cp-words p{margin:0;font:400 17px/24px var(--jz-sans);color:var(--jz-ink);overflow-wrap:anywhere}
.cp12 .cp-words p+p{margin-top:var(--jz-s3)}
.cp12 .cp-words .cp-sub{font-size:15px;line-height:20px;color:var(--jz-muted)}
.cp12 .cp-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 0 var(--jz-s6)}
.cp12 .cp-photo{display:block;aspect-ratio:1;overflow:hidden;border-radius:12px;background:var(--jz-field);box-shadow:var(--jz-shadow)}
.cp12 .cp-photo img{display:block;width:100%;height:100%;object-fit:cover}
.cp12 .cp-photos:has(.cp-photo:only-child){grid-template-columns:1fr}
.cp12 .cp-photos:has(.cp-photo:only-child) .cp-photo{aspect-ratio:4/3}
.cp12 .cp-fix .cp-cost{display:block;margin:0 0 var(--jz-s1);font:800 34px/40px var(--jz-sans);letter-spacing:-.03em;color:var(--jz-ink);font-variant-numeric:tabular-nums}
.cp12 .cp-fix .cp-cost .p{font-size:.55em;letter-spacing:0}
.cp12 .cp-fix p{margin:0;font:400 17px/24px var(--jz-sans);color:var(--jz-muted)}
.cp12 .cp-smell{margin:0 0 var(--jz-s6);padding:var(--jz-s3) var(--jz-s4);border-radius:var(--jz-r);background:var(--jz-red-soft);font:600 15px/20px var(--jz-sans);color:var(--jz-red)}

/* owner: adding and removing photos */
.cp12 .cp-addphoto{margin:0 0 var(--jz-s6)}
.cp12 .cp-addphoto .jz-file{margin-bottom:var(--jz-s2)}
.cp12 .cp-addphoto:not(:has(input:valid)) .cp-addgo{display:none}
.cp12 .cp-rmphotos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 var(--jz-s4) var(--jz-s4)}
.cp12 .cp-rmphotos form{margin:0}
.cp12 .cp-rm{position:relative;display:block;width:100%;aspect-ratio:1;margin:0;padding:0;overflow:hidden;border:0;border-radius:12px;background:var(--jz-field);cursor:pointer}
.cp12 .cp-rm img{display:block;width:100%;height:100%;object-fit:cover;opacity:.7}
.cp12 .cp-rm span{position:absolute;left:6px;right:6px;bottom:6px;padding:4px 0;border-radius:999px;background:rgba(255,255,255,.92);font:600 13px/16px var(--jz-sans);color:var(--jz-red);text-align:center}

/* ===== 7. Preview, draft and send ===== */
.cp12 .cp-preview{margin:0 0 var(--jz-s2)}
.cp12 .cp-draft{margin-bottom:var(--jz-s4)}
.cp12 .cp-draft textarea{min-height:200px}
.cp12 .cp-sendrow{display:flex;flex-direction:column;gap:var(--jz-s2);margin:0 0 var(--jz-s6)}
.cp12 .cp-sendrow .btn+.btn{margin:0}
.cp12 .cp-steps .cp-log:has(.dz-lead){background:none;box-shadow:none}
.cp12 .cp-duty{margin:var(--jz-s2) 0 var(--jz-s6);padding:0 var(--jz-s4);font:400 13px/18px var(--jz-sans);color:var(--jz-muted)}

/* ===== 8. The payer's public pages ===== */
.cp12.cp-pub .jz-lt{margin-top:var(--jz-s4)}
.cp12 .cp-readform{margin:0 0 var(--jz-s6)}
#app .cp12 .cp-readform .jz-foot{margin:var(--jz-s2) 0 0;padding:0 var(--jz-s4)}
.cp12 .cp-readok{box-shadow:inset 0 0 0 1.5px var(--jz-soft),var(--jz-shadow)}
.cp12 .cp-readok b{display:block;font:600 17px/22px var(--jz-sans);color:var(--jz-forest)}
.cp12 .cp-readok p{margin:4px 0 0;font:400 15px/20px var(--jz-sans);color:var(--jz-muted)}
.cp12 .cp-printbar{margin:0 0 var(--jz-s4)}
/* print is a row with a leading icon like Call below it (design-learnings 33); without script the row stays hidden */
.cp12 .cp-printbar:has(>[hidden]){display:none}
#app .cp12 button.cp-print{width:100%;margin:0;border:0;border-radius:0;background:none;box-shadow:none;font:inherit;text-align:left;cursor:pointer}

/* ===== 9. The reasonable-steps pack (printed) ===== */
.cp12.cp-pack .cp-packhead{margin:var(--jz-s4) 0 var(--jz-s6)}
.cp12.cp-pack .cp-firm{display:block;margin:0 0 var(--jz-s1);font:600 15px/20px var(--jz-sans);color:var(--jz-forest)}
.cp12.cp-pack .cp-packhead h1{margin:0;font:800 30px/36px var(--jz-sans);letter-spacing:-.03em}
.cp12.cp-pack .cp-packhead .jz-sub{margin:var(--jz-s1) 0 0;font:400 15px/20px var(--jz-sans);color:var(--jz-muted)}
.cp12 .cp-packlog{margin:0 0 var(--jz-s6);padding:0;list-style:none;background:var(--jz-card);border-radius:var(--jz-r);box-shadow:var(--jz-shadow);counter-reset:try}
.cp12 .cp-packlog li{position:relative;display:flex;gap:var(--jz-s3);align-items:flex-start;padding:var(--jz-s3) var(--jz-s4) var(--jz-s3) 48px;counter-increment:try;break-inside:avoid}
.cp12 .cp-packlog li::before{content:counter(try);position:absolute;left:var(--jz-s4);top:var(--jz-s3);width:22px;height:22px;border-radius:50%;background:var(--jz-soft);color:var(--jz-forest-ink);font:700 12px/22px var(--jz-sans);text-align:center}
.cp12 .cp-packlog li+li::after{content:"";position:absolute;top:0;left:48px;right:0;height:.5px;background:var(--jz-chev);opacity:.5}
.cp12 .cp-packlog li.cp-none{padding-left:var(--jz-s4);color:var(--jz-muted)}
.cp12 .cp-packlog li.cp-none::before{content:none}
.cp12 .cp-packrow{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cp12 .cp-packrow b{font:600 17px/22px var(--jz-sans);color:var(--jz-ink);font-variant-numeric:tabular-nums}
.cp12 .cp-packrow span{font:400 15px/20px var(--jz-sans);color:var(--jz-ink)}
.cp12 .cp-packrow small{font:400 15px/20px var(--jz-sans);color:var(--jz-muted)}
.cp12 .cp-packlog img{flex:none;width:96px;height:96px;object-fit:cover;border-radius:10px}
.cp12 .cp-printed{padding:0 var(--jz-s4);font:400 13px/18px var(--jz-sans);color:var(--jz-faint)}
@media print{
  .cp12 .cp-noprint,.cp12 .dock,#tabs,.top{display:none!important}
  #app,body,html{background:#fff!important;padding:0!important}
  .cp12 :is(.group,.card,.cp-packlog){box-shadow:none!important;border:.5pt solid #ccc}
  .cp12 .cp-photo,.cp12 .cp-thumb{box-shadow:none}
}
/* Gas radio rows: a trailing circle so a row reads as something to pick before anything is picked. */
.cp12 .dzf-opt{background-image:radial-gradient(circle at calc(100% - 27px) 50%,transparent 9.25px,var(--jz-chev) 9.75px,var(--jz-chev) 11px,transparent 11.5px)}
.cp12 .dzf-opt:has(input:checked){background-image:radial-gradient(circle at calc(100% - 27px) 50%,var(--jz-forest) 11px,transparent 11.5px)}
.cp12 .dzf-opt:has(input:checked)::after{right:25px;width:5px;height:10px;margin-top:-7px;border-color:var(--jz-on-forest);border-width:0 2px 2px 0}
.cp12 .dzf-opt:has(input:focus-visible){background-image:radial-gradient(circle at calc(100% - 27px) 50%,transparent 9px,var(--jz-forest) 9.5px,var(--jz-forest) 11px,transparent 11.5px)}
/* ID + refused: the ring-now card shows only for that pair (the server refuses the save without the tick). */
.cp12 .cp-gesp{display:none;margin:var(--jz-s3) 0}
.cp12 :is(.dzf,.cp-nform):has(input[name=classification][value=ID]:checked):has(input[name=action][value=refused]:checked) .cp-gesp{display:block}
.cp12 .cp-gesp p{margin:4px 0 8px;font:400 15px/20px var(--jz-sans)}
.cp12 .cp-gesp .jz-row{background:transparent;padding-left:0;padding-right:0}
/* The pack has no top bar, so the fixed back link sits where the firm line starts: clear it on screen (print hides it). */
@media screen{.cp12.cp-pack .cp-packhead{margin-top:calc(44px + var(--jz-s4))}}

/* Walkthrough 1 Nov fixes */
/* The payer's notice: photos shown whole, one under another, not links to a bare image page with no way back */
.cp12 .cp-photos.is-public{grid-template-columns:1fr;gap:var(--jz-s2)}
.cp12 .cp-photos.is-public .cp-photo{aspect-ratio:auto}
.cp12 .cp-photos.is-public .cp-photo img{height:auto;max-height:70vh;object-fit:contain;background:var(--jz-field)}
/* The copy status line draws nothing (no lone shield) until there is something to say */
#app#app .cp12 #copy-done:empty{margin:0;padding:0;min-height:0}
#app#app .cp12 #copy-done:empty::before{content:none}
/* No phone in the firm's details: the nudge under the send buttons */
#app .cp12 .cp-nophone{display:block;margin:0 0 var(--jz-s4);text-decoration:none;color:var(--jz-forest)}

/* ===== 10. Gas safety on the pk- kit (pass 7a): main.pk.cp12 ===== */
#app main.pk.cp12 .cp-thumb{flex:none;display:block;width:56px;height:56px;margin-left:auto;overflow:hidden;border-radius:var(--jz-r-s);background:var(--jz-surface-2);box-shadow:0 0 0 1.5px var(--jz-edge)}
#app main.pk.cp12 .cp-thumb img{display:block;width:100%;height:100%;object-fit:cover}
#app main.pk.cp12 .cp-try .cp-note{color:var(--jz-ink-2);font-style:italic;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#app main.pk.cp12 .cp-lead{margin-top:var(--jz-s2)}
#app main.pk.cp12 .cp-addjob{margin-top:var(--jz-s3)}
#app main.pk.cp12 .fx-sheet .jz-list{box-shadow:0 0 0 1.5px var(--jz-edge)}
/* the classification: ID is the danger card, AR the amber card */
#app main.pk.cp12 .cp-class{display:block;margin:0 0 14px;padding:var(--jz-s5)}
#app main.pk.cp12 .jz-latecard.cp-class{padding-left:calc(var(--jz-s5) + var(--jz-late-bar) - 2px);padding-top:calc(var(--jz-s5) + var(--jz-band))}
#app main.pk.cp12 .cp-class-w{margin:14px 0 6px;font:800 30px/1.04 var(--jz-display);letter-spacing:-.02em;color:inherit}
#app main.pk.cp12 .jz-latecard .cp-class-w{color:var(--jz-late)}
#app main.pk.cp12 .cp-class-m{margin:0;font:500 var(--jz-t-body)/1.4 var(--jz-sans);color:inherit;opacity:.92}
#app main.pk.cp12 .jz-latecard .cp-class-m{color:var(--jz-ink-2);opacity:1}
#app main.pk.cp12 .cp-words p{margin:0;font:500 var(--jz-t-body)/1.45 var(--jz-sans);color:var(--jz-ink);overflow-wrap:anywhere}
#app main.pk.cp12 .cp-words p.jz-say{font-size:var(--jz-t-say);line-height:1.35}
#app main.pk.cp12 .cp-words p+p{margin-top:var(--jz-s3)}
#app main.pk.cp12 .cp-words .cp-sub{font-size:var(--jz-t-meta);color:var(--jz-ink-2)}
#app main.pk.cp12 .cp-fix .cp-cost{display:block;margin:0 0 var(--jz-s2);font:800 48px/.95 var(--jz-display);letter-spacing:var(--jz-track-num);color:var(--jz-ink);font-variant-numeric:tabular-nums}
#app main.pk.cp12 .cp-fix .cp-cost .p{font-size:.5em;letter-spacing:0;color:var(--jz-ink-2)}
#app main.pk.cp12 .cp-fix p{margin:0;font:500 var(--jz-t-body)/1.4 var(--jz-sans);color:var(--jz-ink-2)}
#app main.pk.cp12 .cp-smell{display:flex;gap:10px;align-items:flex-start;margin:0 0 14px;padding:var(--jz-s4) var(--jz-s5);border-radius:var(--jz-r-inner);background:var(--jz-chip-danger);color:var(--jz-on-chip-danger);font:600 var(--jz-t-body)/1.4 var(--jz-sans)}
#app main.pk.cp12 .cp-smell .jz-ic{flex:none;width:22px;height:22px;margin-top:1px}
#app main.pk.cp12 .cp-preview{margin:0 0 var(--jz-s4);padding:var(--jz-s3);border-radius:var(--jz-r-card);box-shadow:inset 0 0 0 2px var(--jz-chev);outline:0}
#app main.pk.cp12 .cp-preview>section>:first-child{margin-top:0}
#app main.pk.cp12 .cp-duty{margin:var(--jz-s3) var(--jz-s1) 0;padding:0;font:500 var(--jz-t-meta)/1.45 var(--jz-sans);color:var(--jz-ink-2)}
/* the read answer on the public notice */
#app main.pk.cp12 .cp-readform{margin:var(--jz-s5) 0 14px}
#app main.pk.cp12 .cp-readform .pk-note{margin:var(--jz-s3) var(--jz-s1) 0}
#app main.pk.cp12 .cp-readok{margin:var(--jz-s5) 0 14px}
#app main.pk.cp12 .cp-readok b{display:flex;align-items:center;gap:8px;font:700 var(--jz-t-card)/1.15 var(--jz-display);color:var(--jz-forest)}
#app main.pk.cp12 .cp-readok p{margin:6px 0 0;font:500 var(--jz-t-body)/1.4 var(--jz-sans);color:var(--jz-ink-2)}
/* send */
#app#app main.pk.cp12 .cp-draft textarea{min-height:168px;height:168px}
#app main.pk.cp12 .cp-sendrow{display:flex;flex-direction:column;gap:10px;margin:0 0 var(--jz-s4)}
#app main.pk.cp12 #copy-done:empty{display:none}
#app main.pk.cp12 #copy-done:not(:empty){margin:0;text-align:center;font:600 var(--jz-t-meta)/1.3 var(--jz-sans);color:var(--jz-forest)}
#app main.pk.cp12 .cp-nophone{display:block;text-decoration:none;color:var(--jz-forest);font-weight:600}
/* photos to remove */
#app main.pk.cp12 .cp-addphoto{margin:var(--jz-s5) 0 14px}
#app main.pk.cp12 .cp-addphoto:not(:has(input:valid)) .cp-addgo{display:none}
#app main.pk.cp12 .cp-rmphotos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
#app main.pk.cp12 .cp-rm{position:relative;display:block;width:100%;aspect-ratio:1;margin:0;padding:0;overflow:hidden;border:0;border-radius:var(--jz-r-s);background:var(--jz-surface-2);cursor:pointer}
#app main.pk.cp12 .cp-rm img{display:block;width:100%;height:100%;object-fit:cover;opacity:.75}
#app main.pk.cp12 .cp-rm span{position:absolute;left:6px;right:6px;bottom:6px;padding:6px 0;border-radius:var(--jz-r-full);background:var(--jz-danger-fill);color:var(--jz-on-danger);font:600 var(--jz-t-label)/1 var(--jz-sans);text-align:center}
/* switches and the ID-refused card */
#app main.pk.cp12 .cp-proof{padding:0;margin-bottom:14px}
#app main.pk.cp12 .cp-proof .pk-sw+.pk-sw{border-top:1.5px solid var(--jz-hair)}
#app main.pk.cp12 .jz-danger.cp-gesp{margin:0 0 14px}
#app main.pk.cp12 .jz-danger.cp-gesp p{margin:10px 0 6px;font:500 var(--jz-t-body)/1.4 var(--jz-sans);color:var(--jz-on-danger)}
#app main.pk.cp12 .jz-danger.cp-gesp .pk-sw{padding:10px 0 0;min-height:56px;color:var(--jz-on-danger)}
#app main.pk.cp12 .pk-opt .jz-li-av{font:800 17px/1 var(--jz-display)}
/* talk: the privacy words behind "How talking works" (same behaviour as the diary's) */
#app main.pk.cp12 .cp-talk{position:relative;display:flex;flex-direction:column;align-items:flex-start;margin:calc(-1 * var(--jz-s2)) 0 var(--jz-s4);padding:0 var(--jz-s1)}
#app main.pk.cp12 .cp-talk .dz-tog{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
#app main.pk.cp12 .cp-talk .dz-tog~.mic-slot .talk-words{display:none}
#app main.pk.cp12 .cp-talk .dz-tog:checked~.mic-slot .talk-words{display:block}
#app main.pk.cp12 .cp-talk .mic-slot,#app main.pk.cp12 .cp-talk .talk{width:100%;margin:0}
#app main.pk.cp12 .cp-talk .talk-btn.btn{width:auto;min-height:48px;margin:0;padding:0 16px 0 12px;justify-content:flex-start;gap:10px;border:0;border-radius:var(--jz-r-full);background:var(--jz-wash);box-shadow:none;color:var(--jz-forest);font:600 var(--jz-t-meta)/1 var(--jz-sans)}
#app main.pk.cp12 .cp-talk .talk-btn.btn[aria-pressed=true]{background:var(--jz-chip-danger);color:var(--jz-on-chip-danger)}
#app main.pk.cp12 .cp-talk .dz-how{order:3;position:relative;display:inline-flex;align-items:center;gap:6px;min-height:48px;font:600 var(--jz-t-meta)/1 var(--jz-sans);color:var(--jz-forest);cursor:pointer}
#app main.pk.cp12 .cp-talk .dz-how::after{content:"";width:6px;height:6px;margin:-3px 0 0 2px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg)}
#app main.pk.cp12 .cp-talk .dz-tog:checked~.dz-how::after{margin-top:3px;transform:rotate(-135deg)}
#app main.pk.cp12 .cp-talk .dz-tog:focus-visible~.dz-how{outline:2px solid var(--jz-forest);outline-offset:2px}
#app main.pk.cp12 .cp-talk .talk-live{display:block;margin:0 0 var(--jz-s2);font:600 var(--jz-t-meta)/1.3 var(--jz-sans);color:var(--jz-danger)}
/* the payer's print row: a row like the others (the button keeps its old class for the print script) */
#app main.pk.cp12 .cp-printbar:has(>[hidden]){display:none}
#app main.pk.cp12 button.jz-go.cp-print{display:flex;align-items:center;gap:14px;width:100%;min-height:84px;margin:0;padding:14px 18px;border:0;border-radius:0;background:none;box-shadow:none;color:var(--jz-ink);font:inherit;text-align:left;cursor:pointer}
#app main.pk.cp12 .cp-print .jz-go-ic{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--jz-wash);color:var(--jz-forest)}
#app main.pk.cp12 .cp-print .jz-go-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#app main.pk.cp12 .cp-print .jz-go-t{display:flex;flex-direction:column;gap:3px}
#app main.pk.cp12 .cp-print .jz-go-t b{font:600 18px/1.25 var(--jz-sans)}
#app main.pk.cp12 .cp-print .jz-go-t small{font:500 var(--jz-t-meta)/1.35 var(--jz-sans);color:var(--jz-ink-2)}
#app main.pk.cp12 .fx-sheet .jz-list .jz-li{min-height:76px}