/* Screen styles: Proof Pages (proof/templates/proof/*). Owner side (list, new, detail, record) and the payer's
   public page (.pfp). Every rule is scoped to .pfx, the wrapper only these pages use, and every class here starts
   pf- so nothing collides with another area (design-learnings 39). Read --jz-* tokens only. Shared rows, groups,
   status dots, the Dock and the safety line come from jeevz.css; this file adds only what is unique to proof. */

/* ---------- severity colours: the owner's code, never the loudest thing but never missed ---------- */
.pfx{--pf-late:var(--jz-red);--pf-late-bg:var(--jz-red-soft);--pf-due:var(--jz-amber);--pf-due-bg:var(--jz-amber-soft);
  --pf-off:var(--jz-muted);--pf-off-bg:var(--jz-field)}

/* ---------- kind picker: the shared tick rows, with a mint icon tile ---------- */
#app .pfx .pf-kinds .jz-pk-ic svg{width:20px;height:20px;stroke-width:1.75;stroke-linejoin:round}
#app .pfx .pf-kinds .jz-pk-t small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- code: a segmented control, None first. Four plus None fit 390px; seven wrap to two rows ---------- */
#app .pfx .pf-seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(52px,1fr));gap:2px;margin:0 0 var(--jz-s6);padding:2px;
  border:0;border-radius:var(--jz-r-m);background:var(--jz-field);min-inline-size:0}
#app .pfx .pf-seg label{position:relative;display:flex;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
#app .pfx .pf-seg input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
#app .pfx .pf-seg span{flex:1;display:flex;align-items:center;justify-content:center;min-height:40px;padding:0 6px;border-radius:10px;
  font:600 15px/1 var(--jz-sans);color:var(--jz-ink);font-variant-numeric:tabular-nums;transition:background 120ms ease,box-shadow 120ms ease}
#app .pfx .pf-seg input:checked+span{background:var(--jz-card);box-shadow:0 1px 2px rgba(23,33,29,.08),0 3px 8px -2px rgba(23,33,29,.12)}
#app .pfx .pf-seg input:focus-visible+span{outline:2px solid var(--jz-forest);outline-offset:-2px}
#app .pfx .pf-seg input[value=C1]:checked+span,#app .pfx .pf-seg input[value=ID]:checked+span{color:var(--pf-late)}
#app .pfx .pf-seg input[value=C2]:checked+span,#app .pfx .pf-seg input[value=AR]:checked+span,#app .pfx .pf-seg input[value=FI]:checked+span{color:var(--pf-due)}
#app .pfx .pf-segfoot{margin-top:calc(-1 * var(--jz-s4))}

/* ---------- where: hidden without the script (no place can be taken without it) ---------- */
html:not(.jz-js) #app .pfx .pf-geo{display:none}
#app .pfx .pf-geo .k{max-width:none}
#app .pfx .pf-geonote{margin-top:calc(-1 * var(--jz-s4))}

/* ---------- the code card (detail and public page) ---------- */
#app .pfx .pf-code{display:flex;align-items:center;gap:var(--jz-s4);margin:0 0 var(--jz-s6);padding:var(--jz-s4);background:var(--jz-card);
  border-radius:var(--jz-r);box-shadow:var(--jz-shadow)}
#app .pfx .pf-codebig{flex:none;display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:var(--jz-r-icon);
  background:var(--pf-off-bg);color:var(--pf-off);font:800 22px/1 var(--jz-sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
#app .pfx .pf-code.sev-late .pf-codebig{background:var(--pf-late-bg);color:var(--pf-late)}
#app .pfx .pf-code.sev-due .pf-codebig{background:var(--pf-due-bg);color:var(--pf-due)}
#app .pfx .pf-codet{display:flex;flex-direction:column;gap:2px;min-width:0}
#app .pfx .pf-codet b{font:700 17px/22px var(--jz-sans);color:var(--jz-ink)}
#app .pfx .pf-code.sev-late .pf-codet b{color:var(--pf-late)}
#app .pfx .pf-code.sev-due .pf-codet b{color:var(--pf-due)}
#app .pfx .pf-codet small{font:400 15px/20px var(--jz-sans);color:var(--jz-muted);text-wrap:pretty}
#app .pfx .pf-code+.jz-foot{margin-top:calc(-1 * var(--jz-s4))}

/* ---------- photos: a 3-up grid on the owner side, full width for the payer ---------- */
#app .pfx .jz-sec .pf-count{float:right;font-weight:400;color:var(--jz-faint)}
#app .pfx .pf-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--jz-s2);margin:0 0 var(--jz-s4)}
#app .pfx .pf-ph{position:relative;aspect-ratio:1;overflow:hidden;border-radius:var(--jz-r-m);background:var(--jz-field);box-shadow:var(--jz-shadow)}
#app .pfx .pf-ph a,#app .pfx .pf-ph img{display:block;width:100%;height:100%}
#app .pfx .pf-ph img{object-fit:cover}
#app .pfx .pf-ph form{position:absolute;top:4px;right:4px;margin:0}
#app .pfx .pf-phx{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;min-height:0;padding:0;border:0;border-radius:50%;
  background:rgba(15,22,19,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:none;cursor:pointer}
#app .pfx .pf-phx svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round}
#app .pfx .pf-addph{margin:0 0 var(--jz-s6)}
#app .pfx .pf-addph .jz-file{margin-bottom:var(--jz-s2)}
#app .pfx .pf-addph .pf-addgo{display:none}
#app .pfx .pf-addph:has(input:valid) .pf-addgo{display:flex}
#app .pfx .pf-nophotos{margin-top:0}
#app .pfx .pf-pubphotos{display:flex;flex-direction:column;gap:var(--jz-s2);margin:0 0 var(--jz-s6)}
#app .pfx .pf-pubphotos a{display:block;overflow:hidden;border-radius:var(--jz-r);background:var(--jz-field);box-shadow:var(--jz-shadow)}
#app .pfx .pf-pubphotos img{display:block;width:100%;height:auto;max-height:520px;object-fit:cover}

/* ---------- words and facts ---------- */
#app .pfx .pf-read,#app .pfx .pf-msg{margin:0;padding:var(--jz-s4);font:400 17px/24px var(--jz-sans);color:var(--jz-ink);text-wrap:pretty;overflow-wrap:anywhere}
#app .pfx .pf-msg{font-size:15px;line-height:21px;color:var(--jz-muted)}
#app .pfx .pf-words{margin:0}
#app .pfx .pf-words .jz-group{margin-bottom:var(--jz-s3)}
#app .pfx .pf-two{display:grid;grid-template-columns:1fr 1fr;gap:var(--jz-s2);margin:0 0 var(--jz-s6)}
#app .pfx .pf-two .btn{width:100%;margin:0}
#app .pfx .pf-words+.jz-foot{margin-top:calc(-1 * var(--jz-s4))}
#app .pfx .pf-fact{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:var(--jz-s4);min-height:56px;box-sizing:border-box;margin:0;
  padding:17px var(--jz-s4) 15px;font:400 17px/22px var(--jz-sans)}
#app .pfx .pf-fact .k{flex:none;color:var(--jz-ink)}
#app .pfx .pf-fact .v{min-width:0;color:var(--jz-muted);text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
#app .pfx .pf-fact .pf-cost{color:var(--jz-ink);font-weight:600}
#app .pfx .pf-fact.pf-note,#app .pfx .pf-fact.pf-fix{flex-direction:column;align-items:stretch;gap:2px}
#app .pfx .pf-fact.pf-note .k,#app .pfx .pf-fact.pf-fix .k{font:600 13px/18px var(--jz-sans);color:var(--jz-muted)}
#app .pfx .pf-fact.pf-note .v,#app .pfx .pf-fact.pf-fix .v{text-align:left;color:var(--jz-ink)}
#app .pfx .pf-opens .v{line-height:24px}

/* ---------- change the facts: a row that opens in place ---------- */
#app .pfx details.pf-edit{margin:calc(-1 * var(--jz-s3)) 0 var(--jz-s6)}
#app .pfx details.pf-edit>summary{list-style:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 var(--jz-s4);
  font:600 15px/20px var(--jz-sans);color:var(--jz-forest);cursor:pointer}
#app .pfx details.pf-edit>summary::-webkit-details-marker{display:none}
#app .pfx details.pf-edit>summary::after{content:"";width:7px;height:7px;margin-top:-4px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform 160ms ease}
#app .pfx details.pf-edit[open]>summary::after{margin-top:3px;transform:rotate(-135deg)}
#app .pfx details.pf-edit form{margin-top:var(--jz-s2)}
#app .pfx details.pf-edit .btn{margin-bottom:var(--jz-s2)}
#app .pfx .pf-after{margin-top:0}

/* ---------- who it goes to: the copy fields show only once the switch is on ---------- */
#app .pfx .pf-payer .jz-group{margin-bottom:var(--jz-s3)}
#app .pfx .pf-copy .jz-row>.k{max-width:none}
#app .pfx .pf-copy:not(:has(.switch:checked)) .pf-copyf{display:none}
#app .pfx .pf-copynote{margin:calc(-1 * var(--jz-s1)) 0 var(--jz-s4)}

/* ---------- timeline: dated rows, forest dot on the newest ---------- */
#app .pfx .pf-time{list-style:none;margin:0 0 var(--jz-s6);padding:0}
#app .pfx .pf-tl{position:relative;display:flex;align-items:center;gap:var(--jz-s3);min-height:60px;margin:0;padding:8px var(--jz-s4)}
#app .pfx .jz-group.pf-time>.pf-tl+.pf-tl::before{left:44px}
#app .pfx .pf-tdot{flex:none;width:10px;height:10px;margin:0 6px 0 2px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--jz-chev)}
#app .pfx .pf-tl.is-now .pf-tdot{background:var(--jz-forest);box-shadow:none}
/* art director J2: newest first in one card, three rows, the rest under "Show all N" */
#app .pfx .pf-timecard{margin-bottom:var(--jz-s6)}
#app .pfx .pf-timecard .pf-time{margin:0;position:relative}
#app .pfx .pf-timecard .pf-tl+.pf-tl::before{content:"";position:absolute;top:0;left:44px;right:0;height:.5px;background:var(--jz-chev);opacity:.5}
#app .pfx .pf-tlall{position:relative;margin:0}
#app .pfx .pf-tlall>summary{list-style:none;display:flex;align-items:center;min-height:48px;padding:0 var(--jz-s4) 0 44px;font:600 15px/20px var(--jz-sans);color:var(--jz-forest);cursor:pointer}
#app .pfx .pf-tlall>summary::-webkit-details-marker{display:none}
#app .pfx .pf-timecard>.pf-tlall::before{left:44px}
#app .pfx .pf-time-older .pf-tl:first-child::before{display:none}
#app .pfx .pf-tlall[open]>summary{position:relative}
#app .pfx .pf-tlall[open]>summary::before{content:"";position:absolute;top:0;left:44px;right:0;height:.5px;background:var(--jz-chev);opacity:.5}
#app .pfx .pf-tlall[open]{display:flex;flex-direction:column-reverse}
#app .pfx .pf-tlall .pf-tlall-hide,#app .pfx .pf-tlall[open] .pf-tlall-show{display:none}
#app .pfx .pf-tlall[open] .pf-tlall-hide{display:inline}
#app .pfx .pf-tt{display:flex;flex-direction:column;gap:1px;min-width:0}
#app .pfx .pf-tt b{font:600 17px/22px var(--jz-sans);color:var(--jz-ink)}
#app .pfx .pf-tt small{font:400 15px/20px var(--jz-sans);color:var(--jz-muted);font-variant-numeric:tabular-nums}

/* ---------- action rows that are buttons (forms), looking like the shared link rows ---------- */
#app .pfx .jz-gogroup form{margin:0}
#app .pfx .pf-gobtn{width:100%;margin:0;border:0;border-radius:0;background:none;box-shadow:none;font:inherit;text-align:left;cursor:pointer;min-height:60px}
#app .pfx .pf-gobtn[hidden]{display:none}
#app .pfx .jz-gogroup>form+form::before,#app .pfx .jz-gogroup>a+form::before,#app .pfx .jz-gogroup>form+a::before{left:60px}
#app .pfx .pf-gobtn.is-danger .jz-go-ic{background:var(--jz-red-soft)}
#app .pfx .pf-gobtn.is-danger .jz-go-ic svg{stroke:var(--jz-red)}
#app .pfx .pf-made .jz-area textarea{font-size:15px;line-height:21px;color:var(--jz-forest)}

/* ---------- list ---------- */
#app .pfx .pf-rows{display:block}
#app .pfx .pf-row{position:relative;display:flex;align-items:center;gap:var(--jz-s3);min-height:68px;padding:10px var(--jz-s4);color:var(--jz-ink);text-decoration:none}
#app .pfx .pf-row:active{background:var(--jz-field)}
#app .pfx .jz-group.pf-rows>.pf-row+.pf-row::before{left:68px}
#app .pfx .pf-rcode{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--jz-r-icon);
  background:var(--pf-off-bg);color:var(--pf-off);font:800 15px/1 var(--jz-sans);font-variant-numeric:tabular-nums}
#app .pfx .pf-rcode.sev-late{background:var(--pf-late-bg);color:var(--pf-late)}
#app .pfx .pf-rcode.sev-due{background:var(--pf-due-bg);color:var(--pf-due)}
#app .pfx .pf-rcode.is-none{background:var(--jz-soft)}
#app .pfx .pf-rcode svg{width:22px;height:22px;fill:none;stroke:var(--jz-forest);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
#app .pfx .pf-rt{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
#app .pfx .pf-rt b{font:600 17px/22px var(--jz-sans);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#app .pfx .pf-rt small{font:400 15px/20px var(--jz-sans);color:var(--jz-muted)}
#app .pfx .pf-rd{flex:none;font:400 15px/20px var(--jz-sans);color:var(--jz-muted);font-variant-numeric:tabular-nums}
#app .pfx .pf-empty{display:flex;flex-direction:column;align-items:center;gap:6px;margin:var(--jz-s10) 0 var(--jz-s8);text-align:center}
#app .pfx .pf-empty b{font:700 20px/26px var(--jz-sans);color:var(--jz-ink)}
#app .pfx .pf-empty span:not(.pf-eic){font:400 15px/20px var(--jz-sans);color:var(--jz-muted);max-width:260px}
#app .pfx .pf-eic{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;margin-bottom:var(--jz-s2);border-radius:var(--jz-r-icon);background:var(--jz-soft)}
#app .pfx .pf-eic svg{width:32px;height:32px;fill:none;stroke:var(--jz-forest);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* ---------- the payer's page ---------- */
#app .pfp .jz-lt h1{text-wrap:balance}
#app .pfp .pf-law{margin:calc(-1 * var(--jz-s2)) 0 var(--jz-s6);padding:0 var(--jz-s4);font:400 15px/21px var(--jz-sans);color:var(--jz-muted)}
#app .pfp .pf-fixcard{padding:var(--jz-s4)}
#app .pfp .pf-fixtop{display:flex;align-items:baseline;justify-content:space-between;gap:var(--jz-s4)}
#app .pfp .pf-fixtop>b{font:600 17px/22px var(--jz-sans);color:var(--jz-ink);overflow-wrap:anywhere}
#app .pfp .pf-big{flex:none;font:800 34px/40px var(--jz-sans);letter-spacing:-.03em;color:var(--jz-ink);font-variant-numeric:tabular-nums}
#app .pfp .pf-big .p{font-size:.55em;letter-spacing:0}
#app .pfp .pf-approve{margin:var(--jz-s4) 0 0}
#app .pfp .pf-approve .btn{margin:0}
#app .pfp .pf-small{margin:var(--jz-s3) 0 0;font:400 13px/18px var(--jz-sans);color:var(--jz-muted);text-wrap:pretty}
#app .pfp .pf-ok{margin:var(--jz-s3) 0 0;font:400 15px/21px var(--jz-sans);color:var(--jz-muted)}
#app .pfp .pf-fixcard::before{display:none}

/* ---------- the record: print as a clean document ---------- */
#app .pfx .pf-recpage .pf-read{padding-top:0}
#app .pfx .pf-recop{margin:0;padding:var(--jz-s4) var(--jz-s4) var(--jz-s2);font:700 17px/22px var(--jz-sans)}
#app .pfx .pf-recline{margin:0;padding:0 var(--jz-s4) var(--jz-s3);font:400 15px/21px var(--jz-sans);color:var(--jz-muted)}
#app .pfx .pf-recline .pf-rcode{width:auto;height:24px;padding:0 8px;margin-right:4px;border-radius:6px;font-size:13px;vertical-align:1px}
#app .pfx .jz-group>.pf-recline::before,#app .pfx .jz-group>.pf-read::before{display:none}
#app .pfx .pf-recphotos{display:grid;grid-template-columns:1fr 1fr;gap:var(--jz-s2);margin:calc(-1 * var(--jz-s2)) 0 var(--jz-s6)}
#app .pfx .pf-recphotos figure{margin:0}
#app .pfx .pf-recphotos img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--jz-r-m);background:var(--jz-field)}
#app .pfx .pf-recphotos figcaption{margin-top:4px;font:400 13px/18px var(--jz-sans);color:var(--jz-muted)}
#app .pfx .pf-links{margin-bottom:var(--jz-s3)}
#app .pfx .pf-appr{margin-top:var(--jz-s3)}
@media print{
  #app #tabs,#app .top,#app .jz-back,#app .pf-noprint,#app .dock,#app .safe{display:none!important}
  #app .pfx .jz-group,#app .pfx .pf-ph,#app .pfx .pf-code{box-shadow:none;border:.5px solid #ccc}
  #app .pfx .pf-recphotos{grid-template-columns:1fr 1fr;break-inside:avoid}
  body,#app{background:#fff!important;padding:0!important}
}

/* ---------- talk instead of typing (core/_talk.html): one short line under the note; the full privacy words stay
   in the page for screen readers and tests, visually hidden (design-learnings 6) ---------- */
#app .pfx .talk{margin:calc(-1 * var(--jz-s4)) 0 var(--jz-s6);padding:0 var(--jz-s4)}
#app .pfx .talk .talk-btn.btn{width:auto;min-height:44px;margin:0 0 0 -6px;padding:0 8px;background:none;border:0;box-shadow:none;color:var(--jz-forest);font:600 15px/1 var(--jz-sans)}
#app .pfx .talk .talk-btn[hidden]{display:none}
#app .pfx .talk .talk-live{display:block;font:500 13px/18px var(--jz-sans);color:var(--jz-red)}
#app .pfx .talk .talk-live[hidden]{display:none}
#app .pfx .talk p.talk-fallback{margin:0;font:400 13px/18px var(--jz-sans);color:var(--jz-muted)}
#app .pfx .talk p.talk-words{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Art director 1 Nov: the payer reads what was found and the price first; the photos follow as a two-up row of square
   tiles (tap one for the whole photo). A single photo keeps the full width. */
#app .pfx .pf-pubphotos{display:grid;grid-template-columns:1fr 1fr;gap:var(--jz-s2)}
#app .pfx .pf-pubphotos.is-one{grid-template-columns:1fr}
#app .pfx .pf-pubphotos img{aspect-ratio:1;height:auto;max-height:none;object-fit:cover}
#app .pfx .pf-pubphotos.is-one img{aspect-ratio:auto;max-height:520px}

/* ===================== 6 Nov rebuild: Fresh light and Night (docs/design-system.md) =====================
   Later rules win over the older ones above (kept: tests pin some of them). Role tokens only, so the owner pages
   follow the look and the public page (light only) follows the firm's light paper. */

/* ---- the customer tools' public pages (cx-): proof, price check, wait tracker and snags share these ----
   A stranger reads, in this order: who sent it (a lock chip: "A private page from Ashdene"), what it is (a Cabinet
   headline), then one card with the answer. The lock line at the foot says how private it is and how long it works. */
#app .cx-pub .cx-eye{display:inline-flex;align-items:center;gap:8px;min-height:36px;box-sizing:border-box;margin:var(--jz-s3) 0 0;padding:8px 16px 8px 12px;border-radius:var(--jz-r-inner);line-height:1.25;background:var(--jz-wash);color:var(--jz-forest);font:600 var(--jz-t-meta)/1 var(--jz-sans)}
#app .cx-pub .cx-eye .jz-ic{width:16px;height:16px;stroke-width:2.4}
#app .cx-pub .cx-head{margin:var(--jz-s3) 0 var(--jz-s5)}
#app .cx-pub .cx-head h1{font:800 34px/1.04 var(--jz-display);letter-spacing:-.025em}
#app .cx-pub .cx-head .jz-sub{margin-top:var(--jz-s2);font:500 var(--jz-t-body)/1.4 var(--jz-sans);color:var(--jz-ink-2)}
#app .cx-pub .safe.cx-safe{display:flex;align-items:flex-start;justify-content:center;gap:8px;margin:var(--jz-s6) 0 0;padding:0 var(--jz-s2);font:500 var(--jz-t-meta)/1.4 var(--jz-sans);color:var(--jz-ink-2);text-align:left}
#app .cx-pub .safe.cx-safe::before{content:none}
#app .cx-pub .safe.cx-safe .jz-ic{width:17px;height:17px;margin-top:2px;flex:none;color:var(--jz-forest)}
#app .cx-pub .pub-call{margin-top:var(--jz-s6)}
#app .cx-pub .jz-sechead span{font-variant-numeric:tabular-nums}

/* ---- owner side ---- */
#app .pfx .jz-sechead .pf-count{font:600 var(--jz-t-meta)/1.2 var(--jz-sans);color:var(--jz-ink-2);float:none}
/* the list: one card of rows, the code in the round tile */
#app .pfx .pf-rows{margin:0 0 var(--jz-s5)}
#app .pfx .pf-row{align-items:flex-start}
#app .pfx .pf-row .jz-li-av{margin-top:2px}
#app .pfx .pf-rcode.jz-li-av{width:52px;height:52px;border-radius:50%;font:800 19px/1 var(--jz-display);letter-spacing:-.02em}
#app .pfx .pf-rcode.jz-li-av svg{stroke:currentColor;width:24px;height:24px}
#app .pfx .pf-rcode.sev-late{background:var(--jz-chip-danger);color:var(--jz-on-chip-danger)}
#app .pfx .pf-rcode.sev-due{background:var(--jz-late-fill);color:var(--jz-on-late)}
#app .pfx .pf-rcode.sev-off,#app .pfx .pf-rcode.is-none{background:var(--jz-surface-2);color:var(--jz-ink)}
#app .pfx .pf-row .pf-rt b{display:block;font:600 18px/1.25 var(--jz-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#app .pfx .pf-row .pf-rt small{font:500 var(--jz-t-meta)/1.35 var(--jz-sans);color:var(--jz-ink-2)}
#app .pfx .pf-rchip{display:block;margin-top:8px}
#app .pfx .pf-row>.jz-chev{align-self:center}
/* the hero card on a proof: the code, then what fixes it and its cost in Cabinet */
#app .pfx .pf-hero{padding:var(--jz-s5)}
#app .pfx .pf-hero .pf-code{margin:0;padding:0;background:none;box-shadow:none;border-radius:0}
#app .pfx .pf-codebig{width:64px;height:64px;border-radius:var(--jz-r-inner);font:800 26px/1 var(--jz-display);background:var(--jz-surface-2);color:var(--jz-ink)}
#app .pfx .pf-code.sev-late .pf-codebig{background:var(--jz-danger-fill);color:var(--jz-on-danger)}
#app .pfx .pf-code.sev-due .pf-codebig{background:var(--jz-late-fill);color:var(--jz-on-late)}
#app .pfx .pf-code.sev-late .pf-codet b{color:var(--jz-danger)}
#app .pfx .pf-code.sev-due .pf-codet b{color:var(--jz-late)}
#app .pfx .pf-codet b{font:700 20px/1.2 var(--jz-display);letter-spacing:-.01em}
#app .pfx .pf-codet small{font:500 var(--jz-t-meta)/1.35 var(--jz-sans);color:var(--jz-ink-2)}
#app .pfx .pf-herofix{display:flex;align-items:flex-end;gap:var(--jz-s3);margin-top:var(--jz-s4);padding-top:var(--jz-s4);box-shadow:inset 0 1.5px 0 var(--jz-hair)}
#app .pfx .pf-hero>.pf-herofix:first-child{margin-top:0;padding-top:0;box-shadow:none}
#app .pfx .pf-herol{margin:0;font:600 var(--jz-t-label)/1.2 var(--jz-sans);color:var(--jz-ink-2)}
#app .pfx .pf-herow{margin:4px 0 0;font:600 var(--jz-t-body)/1.35 var(--jz-sans);color:var(--jz-ink)}
#app .pfx .pf-heron{flex:none;margin:0;font-size:48px;color:var(--jz-ink)}
#app .pfx .pf-heron .p,#app .pfx .pf-big .p{font-size:.5em;letter-spacing:-.01em}
#app .pfx .pf-codefoot{display:flex;align-items:center;gap:6px;margin:var(--jz-s4) 0 0}
#app .pfx .pf-codefoot .jz-ic{width:16px;height:16px}
/* photos, words, facts and the timeline in the new shape */
#app .pfx .pf-ph,#app .pfx .pf-pubphotos a{border-radius:var(--jz-r-inner)}
#app .pfx .pf-phx{width:36px;height:36px}
#app .pfx .pf-two .jz-btn{min-height:var(--jz-btn)}
#app .pfx .pf-two{gap:10px}
#app .pfx .pf-words .jz-group,#app .pfx .pf-facts,#app .pfx .pf-timecard,#app .pfx .jz-gogroup,#app .pfx .pf-payer .jz-group{border-radius:var(--jz-r-card)}
#app .pfx .pf-edit>summary,#app .pfx details.pf-edit>summary{border-radius:var(--jz-r-full)}
#app .pfx .pf-fact .k{color:var(--jz-ink-2)}
#app .pfx .pf-fact .v{color:var(--jz-ink)}
#app .pfx .pf-tl.is-now .pf-tdot{background:var(--jz-forest);box-shadow:0 0 0 4px var(--jz-wash)}
#app .pfx .pf-madenote{margin:var(--jz-s3) 0 0}
#app .pfx form>.jz-btn.is-2{margin-top:var(--jz-s3)}
#app .pfx .pf-addph .pf-addgo{display:none}
#app .pfx .pf-addph:has(input:valid) .pf-addgo{display:flex}

/* ---- the payer's public page ---- */
#app .pfp .pf-code{margin:0 0 14px;padding:var(--jz-s5);border-radius:var(--jz-r-card);background:var(--jz-surface);box-shadow:var(--jz-shadow)}
#app .pfp .pf-code.sev-late{box-shadow:var(--jz-shadow),inset 6px 0 0 var(--jz-danger-fill)}
#app .pfp .pf-code.sev-due{box-shadow:var(--jz-shadow),inset 6px 0 0 var(--jz-late-edge)}
#app .pfp .pf-readcard .pf-read{padding:0;font:500 var(--jz-t-say)/1.4 var(--jz-sans);letter-spacing:-.01em}
#app .pfp .pf-fixcard{padding:var(--jz-s5)}
#app .pfp .pf-fixwhat{margin:0;font:600 var(--jz-t-body)/1.35 var(--jz-sans);color:var(--jz-ink)}
#app .pfp .pf-big{display:block;margin:var(--jz-s4) 0 0;font:800 64px/.95 var(--jz-display);letter-spacing:var(--jz-track-num);color:var(--jz-ink)}
#app .pfp .pf-costl{margin:6px 0 0;font:500 var(--jz-t-meta)/1.3 var(--jz-sans);color:var(--jz-ink-2)}
#app .pfp .pf-approve{margin:var(--jz-s5) 0 0}
#app .pfp .pf-small{margin:var(--jz-s3) 0 0;font:500 var(--jz-t-meta)/1.4 var(--jz-sans);color:var(--jz-ink-2)}
#app .pfp .pf-ok{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:var(--jz-s4) 0 0;font:500 var(--jz-t-meta)/1.4 var(--jz-sans);color:var(--jz-ink-2)}
#app .pfp .pf-fixcard.is-done{box-shadow:var(--jz-shadow),inset 0 0 0 2px var(--jz-done)}
#app .pfp .pf-pubphotos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#app .pfp .pf-pubphotos.is-one{grid-template-columns:1fr}
#app .pfp .pf-pubphotos a{aspect-ratio:1;box-shadow:var(--jz-shadow)}
#app .pfp .pf-pubphotos.is-one a{aspect-ratio:4/3}
#app .pfp .pf-pubphotos img{height:100%;max-height:none}
#app .pfp .pf-law{display:flex;gap:10px;align-items:flex-start;margin:0 0 var(--jz-s5);padding:var(--jz-s4);border-radius:var(--jz-r-inner);background:var(--jz-info-soft);color:var(--jz-info);font:500 var(--jz-t-meta)/1.4 var(--jz-sans)}
#app .pfp .pf-law .jz-ic{flex:none;width:20px;height:20px;margin-top:1px}
#app .pfp .jz-sechead.pf-sh{font:700 var(--jz-t-h2)/1.1 var(--jz-display);letter-spacing:var(--jz-track-h2);color:var(--jz-ink)}
#app .pfp .pf-sh+.jz-group{border-radius:var(--jz-r-card)}
#app .pfp .pf-sh+.jz-group .pf-read{padding:var(--jz-s5);font:500 var(--jz-t-say)/1.4 var(--jz-sans);letter-spacing:-.01em}
/* a long main action on a public page ("I agree to £65.00 to attend and diagnose") wraps instead of running off */
#app .cx-pub .dock .jz-btn{white-space:normal;line-height:1.2;padding-top:10px;padding-bottom:10px;text-wrap:balance}