/* STORE-4 screen styles: diary
   Diary (diary/*), Certificates (certs/*), Job sheets (jobsheets/* except print) and Reviews (reviews/*).
   Loaded on every app page after jeevz.css (core/templates/core/base.html), so every rule is scoped to .dz, the class
   on these areas' own <div class="body dz"> wrappers, or to classes only these templates use.
   Read --jz-* tokens only (see jeevz.css section 1). Never read --ink --text --font --brand --accent --on-brand --on-accent
   --needs-bg --needs-fg (the firm brand sets those). Local url() only, relative to this folder.
   Spec: streams/jeevz/app/docs/design-system.md and design-review-2.md section 2. Learnings: docs/design-learnings.md, "## diary". */

/* ===== 1. Area frame: 20px gutter, type scale, quiet section headers ===== */
.body.dz{--dz-g:20px;--dz-r:16px;--dz-shadow:0 1px 2px rgba(23,33,29,.04),0 4px 16px -8px rgba(23,33,29,.10);
  --dz-hair:rgba(23,33,29,.07);--dz-chev:rgba(23,33,29,.28);
  padding:0 var(--dz-g) var(--jz-s8)}
.dz :is(.card,.group,details.fold){border:0;border-radius:var(--dz-r);box-shadow:var(--dz-shadow)}
.dz .group{margin:0 0 var(--jz-s6)}
.dz .card{margin:0 0 var(--jz-s4)}
.dz .group .row+.row::before{background:var(--dz-hair);left:68px}
.dz a.row:not(:has(.amt)):not(.unread)::after{width:8px;height:8px;border-color:var(--dz-chev)}
.dz .ticon{width:40px;height:40px;border-radius:var(--jz-r-icon)}
.dz .ticon svg{width:22px;height:22px;stroke-width:1.75}
.dz .row .rb b{font:600 17px/1.3 var(--jz-sans);letter-spacing:-.01em}
.dz .row .rb small{font:400 15px/1.35 var(--jz-sans);color:var(--jz-muted)}
.dz .row .rb small:empty{display:none}
.dz .mono{font-family:var(--jz-sans);font-variant-numeric:tabular-nums;letter-spacing:0}
/* Section headers: sentence case 13/600, never tracked caps */
.dz .label,.dz-sec{display:block;margin:var(--jz-s8) 0 var(--jz-s2);padding:0 var(--jz-s4);font:600 13px/18px var(--jz-sans);letter-spacing:0;text-transform:none;color:var(--jz-muted);text-decoration:none}
.dz .label .val{float:none;margin-left:6px;font:600 13px/18px var(--jz-sans);font-variant-numeric:tabular-nums}
.dz .eyebrow{font:600 13px/18px var(--jz-sans);letter-spacing:0;text-transform:none;color:var(--jz-muted)}
.dz-sec.is-today{color:var(--jz-ink)}
.dz .dz-head+.label,.dz .dz-head+.dz-sec{margin-top:var(--jz-s6)}
/* Back link: chevron + parent name, 44px tall */
.dz .crumb{display:inline-flex;align-items:center;gap:2px;min-height:44px;margin:var(--jz-s1) 0 0 -6px;padding:0 var(--jz-s3) 0 0;font:400 17px/1 var(--jz-sans);color:var(--jz-forest);text-decoration:none}
.dz .crumb svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Page title row: large title, one round + on the right */
.dz-head{display:flex;align-items:center;justify-content:space-between;gap:var(--jz-s3);margin:var(--jz-s3) 0 var(--jz-s2)}
.dz .crumb+.dz-head{margin-top:0}
.dz-head h1{margin:0;min-width:0;font:800 34px/40px var(--jz-sans);letter-spacing:-.03em;color:var(--jz-ink)}
.dz-add{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--jz-ink);color:#fff;box-shadow:0 6px 16px -8px rgba(23,33,29,.5);transition:transform 120ms}
.dz-add:active{transform:scale(.94)}
.dz-add svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round}
.dz-lead{margin:0 0 var(--jz-s6);font:400 17px/24px var(--jz-sans);color:var(--jz-muted)}
.dz .phead{padding:var(--jz-s3) 0 var(--jz-s2)}
.dz .phead h1{font:800 34px/40px var(--jz-sans);letter-spacing:-.03em}
.dz .phead .lead{font:400 17px/24px var(--jz-sans);color:var(--jz-muted)}
/* One empty state: icon, title, one line, optional text button. No box. */
.dz-empty{display:flex;flex-direction:column;align-items:center;text-align:center;margin:var(--jz-s10) 0 var(--jz-s8);padding:0 var(--jz-s4)}
.dz-empty>svg{width:56px;height:56px;margin-bottom:var(--jz-s4);fill:none;stroke:var(--jz-muted);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.45}
.dz-empty b{font:700 22px/28px var(--jz-sans);letter-spacing:-.02em;color:var(--jz-ink)}
.dz-empty p{margin:var(--jz-s1) 0 0;max-width:30ch;font:400 15px/20px var(--jz-sans);color:var(--jz-muted)}
.dz-empty a{display:inline-flex;align-items:center;min-height:44px;margin-top:var(--jz-s3);padding:0 var(--jz-s4);font:600 17px/1 var(--jz-sans);color:var(--jz-forest);text-decoration:none}
.dz .empty{background:none;border:0;box-shadow:none;margin:var(--jz-s10) 0 var(--jz-s8);padding:0 var(--jz-s4)}
.dz .empty::before{background:none;width:0;height:0;margin:0}
.dz .empty b{font:700 22px/28px var(--jz-sans)}
.dz-none{margin:0 0 var(--jz-s2);padding:14px var(--jz-s4);background:var(--jz-card);border-radius:var(--dz-r);box-shadow:var(--dz-shadow);font:400 15px/20px var(--jz-sans);color:var(--jz-muted)}
/* Footnote: every safety word kept, set quietly at the end of the scroll */
.dz-foot,.dz>.note:last-child{margin:var(--jz-s8) 0 0;padding:0 var(--jz-s4);font:400 13px/18px var(--jz-sans);color:var(--jz-muted)}

/* ===== 2. Diary: one week control, seven columns that fit ===== */
.dz-week{display:flex;align-items:center;justify-content:space-between;gap:var(--jz-s2);margin:var(--jz-s1) 0 var(--jz-s2)}
.dz-week b{flex:1;font:600 15px/20px var(--jz-sans);color:var(--jz-muted);font-variant-numeric:tabular-nums;text-align:center}
.dz-step{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:var(--jz-forest)}
.dz-step:active{background:var(--jz-soft)}
.dz-step svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dz .daystrip.dz-days{position:static;display:grid;grid-template-columns:repeat(7,calc((100% - 6*4px)/7));gap:4px;overflow:visible;margin:0 0 var(--jz-s2);padding:var(--jz-s2) 0;background:none;border:0;box-shadow:none}
.dz .dz-days a{width:auto;min-height:72px;padding:6px 0 10px;gap:6px;border:0;border-radius:var(--dz-r);background:none;justify-content:flex-start;position:relative}
.dz .dz-days a:active{background:rgba(23,33,29,.05)}
.dz .dz-days a small{font:600 13px/18px var(--jz-sans);letter-spacing:0;text-transform:none;color:var(--jz-muted)}
.dz .dz-days a b{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;font:700 20px/1 var(--jz-sans);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--jz-ink)}
.dz .dz-days a.today{background:none;color:var(--jz-ink)}
.dz .dz-days a.today small{color:var(--jz-ink)}
.dz .dz-days a.today b{background:var(--jz-ink);color:#fff}
.dz .dz-days a.has::after{content:"";position:absolute;bottom:4px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--jz-forest)}
.dz-today{margin:0 0 var(--jz-s2);text-align:center}
.dz-today a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--jz-s4);font:600 15px/1 var(--jz-sans);color:var(--jz-forest);text-decoration:none}

/* Booking rows: time column, name, one line under it */
.dz .bkrow{align-items:center;min-height:72px}
.dz .bkrow .bktime{flex:none;width:66px;padding-left:14px;box-sizing:border-box;display:flex;flex-direction:column;gap:2px}
.dz .bkrow .bktime b{font:700 17px/22px var(--jz-sans);font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--jz-ink)}
.dz .bkrow .bktime small{font:400 13px/18px var(--jz-sans);color:var(--jz-muted)}
.dz .bkrow .rb b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dz .bkrow .chip.risk{align-self:flex-start;margin-top:6px;white-space:normal;line-height:1.25}
.dz .group .bkrow+.bkrow::before{left:94px}
.dz .bkrow[data-st=cancelled] .rb b{text-decoration:line-through;color:var(--jz-muted)}
/* No status dot before the time (art director J2): the person's bar is the row's only colour code. */
.dz .bkrow .bktime small{display:block}

/* ===== 3. Diary: booking detail ===== */
.card.when .whenbig,.card.duecard .whenbig{display:block;margin:2px 0 4px;font:800 28px/34px var(--jz-sans);letter-spacing:-.03em;color:var(--jz-ink);font-variant-numeric:tabular-nums}
.dz .card{padding:var(--jz-s5)}
.card.when .addr{margin:var(--jz-s4) 0 0;padding-top:var(--jz-s4);border-top:1px solid var(--dz-hair,var(--jz-line));font-size:17px;line-height:1.4}
.card.who-card{display:flex;align-items:center;gap:var(--jz-s3);padding:var(--jz-s4)}
.card.who-card .rb{display:flex;flex-direction:column;min-width:0;flex:1}
.card.who-card .rb b{font:600 17px/1.3 var(--jz-sans)}
.card.who-card .rb a{display:inline-flex;align-items:center;min-height:32px;font:400 15px/1 var(--jz-sans);color:var(--jz-muted);text-decoration:none;font-variant-numeric:tabular-nums}
.dz .who-card>.av{width:44px;height:44px;font:700 17px/1 var(--jz-sans);background:var(--jz-soft);color:var(--jz-forest-ink)}
.dz .iconbtn.call{width:44px;height:44px;min-height:44px;background:var(--jz-soft);color:var(--jz-forest-ink)}
.dz .plainlinks{margin:0 0 var(--jz-s6);background:var(--jz-card);border-radius:var(--dz-r);box-shadow:var(--dz-shadow);overflow:hidden}
.dz .plainlinks>a,.dz .plainlinks>form>button,.dz .plainlinks>button{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--jz-s3);width:100%;min-height:56px;margin:0;padding:0 40px 0 var(--jz-s4);border:0;border-radius:0;background:none;box-shadow:none;font:400 17px/1.3 var(--jz-sans);color:var(--jz-ink);text-align:left;text-decoration:none}
.dz .plainlinks>a::after,.dz .plainlinks>form>button::after{content:"";position:absolute;right:20px;top:50%;width:8px;height:8px;margin-top:-4px;border:solid var(--dz-chev);border-width:2px 2px 0 0;transform:rotate(45deg)}
.dz .plainlinks>*+*{box-shadow:inset 0 1px 0 var(--dz-hair)}
.dz .plainlinks>*+*>button{box-shadow:none}
.dz .plainlinks .val{margin-left:auto;font:400 17px/1.3 var(--jz-sans);color:var(--jz-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:55%}
.dz .plainlinks>.btn.quiet{justify-content:center;padding:0 var(--jz-s4);color:var(--jz-red)}
.statusacts{display:flex;gap:var(--jz-s2);margin:0 0 var(--jz-s3)}
.dz .statusacts{flex-wrap:wrap}
.statusacts>.btn{flex:1 1 40%}
.statusacts>.btn.quiet{flex:0 1 auto}
.dz .statusacts>.btn.quiet{flex:1 1 100%;min-height:44px;color:var(--jz-red);font:600 17px/1 var(--jz-sans)}
.dz .statusacts>.btn.ink{min-height:52px;font:600 17px/1 var(--jz-sans)}
.dz .statusacts>.btn.ghost{min-height:52px;background:var(--jz-card);border:0;box-shadow:var(--dz-shadow);font:600 17px/1 var(--jz-sans);color:var(--jz-ink)}

/* ===== 4. Confirmation text and review requests ===== */
.toline{margin:0 0 var(--jz-s3);font-size:15px;color:var(--jz-muted)}
.toline b{color:var(--jz-ink);font-size:17px}
.card .acts:first-child{margin-top:0}
.card>.btn.quiet{margin-top:var(--jz-s2)}
.sentmsg{margin:var(--jz-s2) 0 0;padding:12px 16px;border-radius:20px 20px 6px 20px;background:var(--jz-soft);color:var(--jz-ink);font-size:17px;line-height:1.4;white-space:pre-line}

/* ===== 5. Certificates ===== */
.dz .certrow,.dz .sheetrow,.dz .revrow{align-items:center}
.dz .certrow .due{display:inline-flex;align-self:flex-start;margin-top:6px;padding:0;background:none;font:500 13px/18px var(--jz-sans);color:var(--jz-muted);font-variant-numeric:tabular-nums}
.dz .certrow .due.soon{color:var(--jz-amber)}
.dz .certrow .due.late{color:var(--jz-red)}
.dz .certrow .due:is(.soon,.late)::before{content:"";width:8px;height:8px;margin:5px 6px 0 0;border-radius:50%;background:currentColor}
.dz .group .certrow+.certrow::before,.dz .group .sheetrow+.sheetrow::before,.dz .group .revrow+.revrow::before{left:68px}
/* PDF picker: one big tappable row, the real file input laid over it */
.dz-file{position:relative;display:flex;align-items:center;gap:var(--jz-s3);min-height:72px;padding:var(--jz-s3) var(--jz-s4);background:var(--jz-card);border-radius:var(--dz-r);box-shadow:var(--dz-shadow);cursor:pointer}
.dz-file input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.dz-file .rb{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.dz-file .rb b{font:600 17px/1.3 var(--jz-sans);color:var(--jz-ink)}
.dz-file .rb small{font:400 15px/1.35 var(--jz-sans);color:var(--jz-muted)}
.dz-file .rb .ok{display:none;color:var(--jz-ok);font-weight:600}
.dz-file:has(input:valid:required) .rb .ok{display:block}
.dz-file:has(input:valid:required) .rb .ask{display:none}
.dz-file:focus-within{outline:3px solid var(--jz-forest);outline-offset:2px}
.dz-file+.note{margin:var(--jz-s2) 0 0;padding:0 var(--jz-s4);font:400 13px/18px var(--jz-sans)}
.dz form>.card .field:last-child{margin-bottom:0}

/* ===== 6. Job sheets ===== */
.dz .form-talk .talk-btn{min-height:56px;font:600 17px/1 var(--jz-sans);background:var(--jz-ink);color:#fff;border:0}
.dz .talk .talk-words,.dz .talk .talk-fallback{margin:var(--jz-s3) 0 0;font:400 13px/18px var(--jz-sans);color:var(--jz-muted)}
textarea.saybox{min-height:160px}
.mic-slot .talk{margin-top:var(--jz-s2)}
.sheetpaper .eyebrow{display:block;margin-top:var(--jz-s2);margin-bottom:var(--jz-s2)}
.mline{display:grid;grid-template-columns:1fr 76px;gap:var(--jz-s2);margin:0 0 var(--jz-s2)}
.mline input:last-child{text-align:center;padding-left:8px;padding-right:8px;font-variant-numeric:tabular-nums}
.field.mtime{margin-top:var(--jz-s4)}
.photorow{gap:var(--jz-s3)}
.photorow .rb{text-decoration:none;color:var(--jz-ink)}
.mrow .mqty{flex:none;min-width:44px;font:700 17px/1 var(--jz-sans);font-variant-numeric:tabular-nums;color:var(--jz-muted)}
.mrow .rb b{font:600 17px/1.3 var(--jz-sans);white-space:normal}
.mrow .pill.price-needed b{font-weight:700}
.dz .sheetrow .r2{display:flex;align-items:center;gap:var(--jz-s3);margin-top:6px}

/* ===== 7. Reviews ===== */
/* A "do this first" notice: white card, icon tile, title, one line, one text button. Not a warning. */
.dz-notice{display:flex;gap:var(--jz-s3);align-items:flex-start;margin:var(--jz-s2) 0 var(--jz-s6);padding:var(--jz-s4);background:var(--jz-card);border-radius:var(--dz-r);box-shadow:var(--dz-shadow)}
.dz-notice .rb{display:flex;flex-direction:column;gap:2px;min-width:0}
.dz-notice .rb b{font:600 17px/22px var(--jz-sans);color:var(--jz-ink)}
.dz-notice .rb p{margin:0;font:400 15px/20px var(--jz-sans);color:var(--jz-muted)}
.dz-notice .rb a{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;margin-top:2px;font:600 17px/1 var(--jz-sans);color:var(--jz-forest);text-decoration:none}
.dz .revrow .btn.dz-ask{flex:none;min-height:36px;padding:0 16px;border:0;border-radius:999px;background:var(--jz-soft);color:var(--jz-forest-ink);font:600 15px/1 var(--jz-sans);box-shadow:none}
.dz .revrow .btn.dz-ask:active{transform:scale(.97)}
.dz .qrow .r2{display:flex;margin-top:6px}
@media (max-width:359px){.dz .revrow .ticon{display:none}.dz .group .revrow+.revrow::before{left:var(--jz-s4)}}

/* ===== 8. Forms in this area: fields are soft wells inside the card, no hard borders ===== */
.dz form .card{padding:var(--jz-s4) var(--jz-s4) var(--jz-s2)}
.dz form .field,.dz form label.field{gap:6px;margin:0 0 var(--jz-s4);font:600 13px/18px var(--jz-sans);color:var(--jz-muted)}
.dz form .field :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),select,textarea){min-height:52px;padding:14px 16px;border:0;border-radius:12px;background-color:var(--jz-field);font:400 17px/22px var(--jz-sans);color:var(--jz-ink);box-shadow:none}
.dz form .field select{padding-right:44px;text-overflow:ellipsis}
.dz form .field textarea{resize:none;min-height:96px}
.dz form .field textarea.saybox{min-height:160px}
.dz form .field :is(input,select,textarea):focus{outline:2px solid var(--jz-forest);outline-offset:0;background-color:var(--jz-card)}
.dz form .field input::-webkit-calendar-picker-indicator{opacity:.35}
.dz .grid2>*{min-width:0}
.dz form .hint,.dz form .card>.note{margin:0 0 var(--jz-s3);font:400 13px/18px var(--jz-sans);color:var(--jz-muted)}
.dz form .card:not(.form-talk) .talk .talk-btn{background:var(--jz-card);color:var(--jz-ink);border:0;box-shadow:inset 0 0 0 1.5px var(--dz-hair,rgba(23,33,29,.12)),var(--dz-shadow)}
.dz details.fold>summary{font:600 17px/22px var(--jz-sans)}
.dz details.fold>summary::after{color:var(--dz-chev)}

/* ===== 9. Round 2 fixes ===== */
.dz form .field select{padding-right:44px!important}
.dz-file .rb small{white-space:normal}
.dz .certrow .due::before{content:none}
.dz .certrow .due:is(.soon,.late)::before{content:""}
.dz .certrow .due{font-weight:500;color:var(--jz-muted)}
.dz-sec .val{float:right;margin:0;font:600 13px/18px var(--jz-sans);color:var(--jz-muted);font-variant-numeric:tabular-nums}
.dz .phead .count{margin-top:var(--jz-s1);font:400 15px/20px var(--jz-sans);color:var(--jz-muted)}
.dz .phead>.pill{flex-basis:100%;margin-bottom:-4px}
.dz .mline input{min-height:48px;padding:12px 14px;border:0;border-radius:12px;background:var(--jz-field);font:400 17px/22px var(--jz-sans);color:var(--jz-ink)}
.dz .mline input:focus{outline:2px solid var(--jz-forest);outline-offset:0;background:var(--jz-card)}
.dz-photo{display:flex;flex-direction:column;gap:var(--jz-s2);margin:0 0 var(--jz-s4)}
.dz-photo .btn.ghost{min-height:48px;background:var(--jz-card);border:0;box-shadow:var(--dz-shadow);font:600 17px/1 var(--jz-sans);color:var(--jz-ink)}
.dz-photo:not(:has(input:valid)) .btn{display:none}

/* ===== 10. Round 3 fixes ===== */
/* Due line: quiet text, colour only when it matters (jeevz.css sets .due with !important, so match it) */
.dz .certrow .due{display:flex!important;align-items:center;min-height:0;margin-top:4px!important;padding:0;background:none;color:var(--jz-muted)!important;font:500 13px/18px var(--jz-sans)}
.dz .certrow .due::before{content:none!important}
.dz .certrow .due.soon{color:var(--jz-amber)!important}
.dz .certrow .due.late{color:var(--jz-red)!important;background:none}
.dz .certrow .due:is(.soon,.late)::before{content:""!important;flex:none;width:8px;height:8px;margin:0 6px 0 0;border-radius:50%;background:currentColor}
.dz .mline input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]){min-height:48px;padding:12px 14px;border:0;border-radius:12px;background:var(--jz-field);font:400 17px/22px var(--jz-sans);color:var(--jz-ink)}
.dz .card .acts .btn.ghost{min-height:44px;border:0;background:var(--jz-soft);color:var(--jz-forest-ink);font:600 15px/1 var(--jz-sans)}
.dz .card>.btn.ghost.block,.dz form>.card .btn.ghost.block{border:0;background:var(--jz-card);box-shadow:inset 0 0 0 1.5px rgba(23,33,29,.12);font:600 17px/1 var(--jz-sans)}
.dz .talk p.note.talk-words,.dz .talk p.note.talk-fallback{margin:var(--jz-s3) 0 0;font:400 13px/18px var(--jz-sans)!important;color:var(--jz-muted)}

/* ===== 11. Pass 3: forms as grouped rows, not web fields =====
   .dzf on the <form>. A row is a <label>: name on the left (17/400 ink), the real select/date/time input laid
   over the whole row, transparent, its value drawn on the right in muted. The native picker still opens. */
.dz .sr,.dz legend.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dz fieldset{min-width:0;margin:0;padding:0;border:0}
.dz-head-stack{flex-direction:column;align-items:flex-start;gap:var(--jz-s1);margin-bottom:var(--jz-s5)}
.dz-sub{margin:0;font:400 15px/20px var(--jz-sans);color:var(--jz-muted);font-variant-numeric:tabular-nums}
.dz .dzf-group{position:relative;margin:0 0 var(--jz-s6);padding:0;background:var(--jz-card);border:0;border-radius:var(--dz-r);box-shadow:var(--dz-shadow);overflow:hidden}
.dz .dz-sec+.dzf-group,.dz .dz-sec+fieldset.dzf-group{margin-top:0}
.dz .dzf-row{position:relative;display:flex;align-items:center;gap:var(--jz-s3);min-height:56px;margin:0;padding:0 var(--jz-s4);font:400 17px/22px var(--jz-sans);color:var(--jz-ink);cursor:pointer}
.dz .dzf-group>*+*::before,.dz .dzf-in-fold>*+*::before{content:"";position:absolute;top:0;left:var(--jz-s4);right:0;height:1px;background:var(--dz-hair);pointer-events:none}
.dz .dzf-row>.k{position:relative;z-index:1;flex:none;pointer-events:none;color:var(--jz-ink)}
/* The control: fills the row, value on the right */
.dz.dz .dzf .dzf-pick :is(select,input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not(.switch)){position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;min-height:0;margin:0;padding:0 40px 0 112px;border:0;border-radius:0;background:transparent;box-shadow:none;outline:0;color:var(--jz-muted);font:400 17px/22px var(--jz-sans);font-variant-numeric:tabular-nums;text-align:right;text-align-last:right;-webkit-appearance:none;appearance:none;cursor:pointer;text-overflow:ellipsis}
.dz .dzf-pick select:has(option[value=""]:checked){color:var(--jz-faint)}
.dz .dzf-pick::after{content:"";position:absolute;right:20px;top:50%;width:7px;height:7px;margin-top:-6px;border:solid var(--dz-chev);border-width:0 2px 2px 0;transform:rotate(45deg);pointer-events:none}
.dz .dzf-pick:focus-within{background:var(--jz-field)}
.dz .dzf-pick:active{background:var(--jz-field)}
/* Date and time: hide the browser glyph but keep it tappable across the whole row (desktop Chrome) */
.dz .dzf-when input::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;margin:0;padding:0;opacity:0;cursor:pointer}
.dz .dzf-when input::-webkit-datetime-edit{padding:0}
.dz .dzf-when input::-webkit-date-and-time-value{text-align:right}
/* Free text in a row: name left, typing right */
.dz.dz .dzf .dzf-text input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not(.switch){flex:1;min-width:0;width:auto;min-height:56px;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;outline:0;color:var(--jz-ink);font:400 17px/22px var(--jz-sans);text-align:right}
.dz .dzf-text{cursor:text}
.dz .dzf-text:focus-within{background:rgba(23,33,29,.025)}
.dz .dzf-text input::placeholder,.dz .dzf-cell :is(textarea,input)::placeholder{color:var(--jz-faint);opacity:1}
.dz .dzf-num .u{flex:none;color:var(--jz-muted);font-variant-numeric:tabular-nums}
.dz.dz .dzf .dzf-num input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not(.switch){font-variant-numeric:tabular-nums}
/* A cell: small name on top, borderless text under it */
.dz .dzf-cell{position:relative;display:flex;flex-direction:column;gap:2px;margin:0;padding:12px var(--jz-s4) 8px;font:600 13px/18px var(--jz-sans);color:var(--jz-muted);cursor:text}
.dz .dzf-cell>.k,.dz .dzf-cell>legend.k{float:none;padding:0;font:600 13px/18px var(--jz-sans);color:var(--jz-muted)}
.dz.dz .dzf .dzf-cell :is(textarea,input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not(.switch)){display:block;width:100%;min-height:44px;margin:0;padding:4px 0 6px;border:0;border-radius:0;background:transparent;box-shadow:none;outline:0;color:var(--jz-ink);font:400 17px/24px var(--jz-sans);resize:none;field-sizing:content}
.dz.dz .dzf .dzf-cell textarea{min-height:56px}
.dz.dz .dzf .dzf-cell textarea:placeholder-shown{min-height:32px}
.dz .dzf-cell:focus-within>.k{color:var(--jz-forest)}
.dz .dzf-help{margin:var(--jz-s2) 0 0;font:400 13px/18px var(--jz-sans);color:var(--jz-muted)}
/* Segmented control: radios, same name and values, thumb on the checked one */
.dz .dzf-segcell{cursor:default;padding-bottom:var(--jz-s3)}
.dz .dzf-segcell>legend.k{margin-bottom:var(--jz-s2)}
.dz .dzf-seg{display:flex;gap:2px;margin-top:var(--jz-s2);padding:3px;background:var(--jz-field);border-radius:12px}
.dz .dzf-seg label{position:relative;flex:1 1 0;min-width:0;display:flex}
.dz .dzf-seg input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.dz .dzf-seg span{flex:1;display:flex;align-items:center;justify-content:center;min-height:40px;padding:0 2px;border-radius:9px;font:500 15px/1.1 var(--jz-sans);color:var(--jz-ink);text-align:center;white-space:nowrap;cursor:pointer;transition:background 120ms}
.dz .dzf-seg input:checked+span{background:var(--jz-card);font-weight:700;box-shadow:0 1px 2px rgba(23,33,29,.08),0 3px 8px -2px rgba(23,33,29,.16)}
.dz .dzf-seg input:focus-visible+span{outline:2px solid var(--jz-forest);outline-offset:1px}
.dz .dzf-seg:has(label:nth-child(6)) span{font-size:14px}
/* Choice list: one tap per option, long names wrap, tick on the right */
.dz .dzf-opt{position:relative;display:flex;align-items:center;min-height:52px;padding:12px 52px 12px var(--jz-s4);font:400 17px/22px var(--jz-sans);color:var(--jz-ink);cursor:pointer}
.dz .dzf-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.dz .dzf-opt:has(input:checked){font-weight:600}
.dz .dzf-opt:has(input:checked)::after{content:"";position:absolute;right:22px;top:50%;width:6px;height:12px;margin-top:-8px;border:solid var(--jz-forest);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.dz .dzf-opt:has(input:focus-visible){background:var(--jz-field)}
.dz .dzf-opt:active{background:var(--jz-field)}
/* Switch row */
.dz .dzf-switch{justify-content:space-between}
.dz .dzf-switch .k{pointer-events:none}
/* Footnote straight under a group */
.dz .dz-foot-tight{margin:calc(-1 * var(--jz-s4)) 0 var(--jz-s6)}
.dz .dz-foot-top{margin:0 0 var(--jz-s4)}
.dz .dz-foot a{color:var(--jz-forest)}

/* Talk: privacy words behind a "How this works" row (every word kept, hidden until asked for) */
.dz .dz-tog{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.dz .dz-tog~.mic-slot .talk-words{display:none}
.dz .dz-tog:checked~.mic-slot .talk-words{display:block}
.dz .dz-how{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:44px;font:500 15px/1 var(--jz-sans);color:var(--jz-forest);cursor:pointer}
.dz .dz-how::after{content:"";width:6px;height:6px;margin:-3px 0 0 2px;border:solid currentColor;border-width:0 1.75px 1.75px 0;transform:rotate(45deg);transition:transform 150ms}
.dz .dz-tog:checked~.dz-how::after{margin-top:3px;transform:rotate(-135deg)}
.dz .dz-tog:focus-visible~.dz-how{outline:2px solid var(--jz-forest);outline-offset:2px;border-radius:6px}
/* Notes field on the booking form: a quiet mic link under the field */
.dz .dzf-talk{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:0 var(--jz-s4) var(--jz-s2)}
.dz .dzf-talk .mic-slot,.dz .dzf-talk .talk{width:100%;margin:0}
.dz .dzf-talk .talk-btn.btn{width:auto;min-height:44px;margin:0 0 0 -4px;padding:0 10px 0 6px;justify-content:flex-start;gap:10px;background:none;border:0;box-shadow:none;color:var(--jz-forest);font:600 15px/1 var(--jz-sans)}
.dz .dzf-talk .talk-btn.btn[aria-pressed=true]{color:var(--jz-red);background:var(--jz-red-soft)}
.dz .dzf-talk .dz-how{order:3}
.dz .dzf-talk .talk-live{display:block;margin:0 0 var(--jz-s2);font:500 13px/18px var(--jz-sans);color:var(--jz-red)}
.dz .dzf-talk .talk-live[hidden]{display:none}

/* New job sheet: the mic is the hero. 72px gradient circle, "Tap and talk" under it, then the box. */
.dz .dz-say{display:flex;flex-direction:column;align-items:center;padding:var(--jz-s6) var(--jz-s4) var(--jz-s3)}
.dz .dz-say .mic-slot,.dz .dz-say .talk{display:contents}
.dz .dz-say .talk-btn{order:1}
.dz .dz-say .talk-live{order:2}
.dz .dz-say .talk-fallback{order:3}
.dz .dz-say>label.field{order:4;width:100%;margin:var(--jz-s5) 0 0}
.dz .dz-say .dz-how{order:5;margin-top:var(--jz-s1)}
.dz .dz-say .talk-words{order:6;width:100%}
.dz.dz .dz-say .talk-btn.btn{position:relative;flex:none;flex-direction:column;width:72px;height:72px;min-height:72px;margin:0 0 30px;padding:0;border:0;border-radius:50%;background:var(--jz-grad);color:var(--jz-on-grad);font-size:0;box-shadow:0 10px 24px -10px rgba(48,109,85,.55),0 2px 4px rgba(23,33,29,.08)}
.dz.dz .dz-say .talk-btn.btn::before{width:14px;height:22px;border:2.5px solid currentColor;border-radius:9px;background:none;box-shadow:none;animation:none}
.dz.dz .dz-say .talk-btn.btn::after{content:"Tap and talk";position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);white-space:nowrap;font:600 15px/1 var(--jz-sans);color:var(--jz-ink)}
.dz.dz .dz-say .talk-btn.btn[aria-pressed=true]{background:var(--jz-red);color:#fff;box-shadow:0 0 0 8px var(--jz-red-soft)}
.dz.dz .dz-say .talk-btn.btn[aria-pressed=true]::before{width:18px;height:18px;border:0;border-radius:4px;background:currentColor}
.dz.dz .dz-say .talk-btn.btn[aria-pressed=true]::after{content:"Tap to stop";color:var(--jz-red)}
.dz .dz-say .talk-live{margin:0;font:500 13px/18px var(--jz-sans);color:var(--jz-red)}
.dz .dz-say .talk-live[hidden]{display:none}
.dz .dz-say>label.field{font:600 13px/18px var(--jz-sans);color:var(--jz-muted)}
.dz.dz .dz-say>label.field textarea.saybox{min-height:132px;padding:14px 16px;border:0;border-radius:12px;background:var(--jz-field);font:400 17px/24px var(--jz-sans);color:var(--jz-ink);resize:none}
.dz .dz-say .talk-fallback{text-align:center}
.dz .dz-say .talk-words{margin:var(--jz-s1) 0 var(--jz-s2)!important}
/* Fill-in fold on a draft sheet: smaller mic, words behind the row */
.dz .dz-fill .talk-btn.btn{margin-top:var(--jz-s2)}
.dz .dz-fill .dz-how{display:flex}
.dz .dz-fill .dz-how+.btn{margin-top:var(--jz-s1)}

/* Status word with a dot, no pill */
.dz-st{display:inline-flex;align-items:center;gap:6px;font:600 15px/20px var(--jz-sans);color:var(--jz-muted)}
.dz-st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.dz-st.st-booked{color:var(--jz-forest)}
.dz-st.st-done,.dz-st.st-sent{color:var(--jz-ok)}
.dz-st.st-cancelled,.dz-st.st-skipped{color:var(--jz-faint)}
.dz-st.st-draft,.dz-st.st-drafted{color:var(--jz-muted)}
.dz .r2 .dz-st{font-size:13px;line-height:18px}
.dz .r2 .dz-st::before{width:6px;height:6px}
.dz-flag{display:inline-flex;align-items:center;gap:6px;font:600 13px/18px var(--jz-sans);color:var(--jz-red)}
.dz-flag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.dz .sheetrow .r2,.dz .qrow .r2{gap:var(--jz-s3);margin-top:4px}

/* ===== 12. Pass 3: booking detail ===== */
.dz .card.when .eyebrow{display:block;font:600 15px/20px var(--jz-sans);color:var(--jz-muted)}
.dz .card.when .whenbig{margin:4px 0 2px;font:800 40px/44px var(--jz-sans);letter-spacing:-.035em}
.dz .card.when .whenbig .to{font-weight:600;color:var(--jz-faint);letter-spacing:-.02em}
.dz .card.when .muted{margin:0;font:400 15px/20px var(--jz-sans);color:var(--jz-muted)}
.dz .card.when .addr{display:flex;gap:10px;align-items:flex-start;margin:var(--jz-s4) 0 0;padding-top:var(--jz-s4);border-top:1px solid var(--dz-hair);font:400 17px/24px var(--jz-sans)}
.dz .card.when .addr svg{flex:none;width:22px;height:22px;margin-top:1px;fill:none;stroke:var(--jz-forest);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.dz .dz-notes .eyebrow{display:block;margin-bottom:var(--jz-s1)}
.dz .dz-notes p{margin:0;font:400 17px/24px var(--jz-sans)}
.dz .dz-acts{margin:0 0 var(--jz-s3)}
/* walkthrough 1 Nov: an employee's Mark done (plain .btn) drew its tick at full button size. Every button icon here is sized. */
.dz .dz-acts .btn{gap:8px}
.dz .dz-acts .btn svg{flex:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}
.dz .dz-acts .btn.dz-second{gap:8px;min-height:52px;border:0;background:var(--jz-card);box-shadow:var(--dz-shadow);color:var(--jz-ink);font:600 17px/1 var(--jz-sans)}
.dz .dz-acts .btn.dz-second svg{width:20px;height:20px;fill:none;stroke:var(--jz-forest);stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}
.dz .dz-acts .btn+.btn{margin-top:var(--jz-s2)}
.dz .dz-cancel{display:flex;justify-content:center;margin:var(--jz-s6) 0 0}
.dz .dz-cancel .btn.quiet{min-height:44px;color:var(--jz-red);font:600 17px/1 var(--jz-sans);text-decoration:none}

/* ===== 13. Pass 3: certificate detail ===== */
.dz .duecard .eyebrow{display:block;font:600 15px/20px var(--jz-sans);color:var(--jz-muted)}
.dz .duecard .whenbig{margin:4px 0 2px}
.dz-due{margin:0;font:600 15px/20px var(--jz-sans);color:var(--jz-muted)}
.dz-due.is-soon{color:var(--jz-amber)}
.dz-due.is-late{color:var(--jz-red)}
.dz-cnote{margin:var(--jz-s3) 0 0;padding-top:var(--jz-s3);border-top:1px solid var(--dz-hair);font:400 15px/20px var(--jz-sans);color:var(--jz-ink)}
.dz .dz-kv .row{min-height:52px;padding-top:0;padding-bottom:0}
.dz .dz-kv .row .rb b{font-weight:400}
.dz .dz-kv .val{flex:0 1 auto;min-width:0;margin-left:auto;font:400 17px/22px var(--jz-sans);color:var(--jz-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.dz .dz-kv a.row .val{margin-right:20px}
.dz .group.dz-kv .row+.row::before{left:var(--jz-s4)}
.dz .dz-others:empty,.dz .dz-sec-others:has(+ .dz-others:empty){display:none}

/* ===== 14. Pass 3: job sheet ===== */
.dz .dz-check{display:block;margin:0 0 var(--jz-s5);padding:var(--jz-s4);border:0;border-radius:var(--dz-r);background:var(--jz-red-soft);color:var(--jz-ink);font:400 15px/21px var(--jz-sans);box-shadow:none}
.dz .dz-check::before{display:none}
.dz .dz-check b{color:var(--jz-red)}
.dz .dz-check form{margin-top:var(--jz-s3)}
.dz .dz-said{margin:0 0 var(--jz-s6)}
.dz .dz-bubble{display:inline-block;max-width:92%;margin:0;padding:12px 16px;border-radius:20px 20px 20px 6px;background:var(--jz-card);box-shadow:var(--dz-shadow);font:400 17px/24px var(--jz-sans);color:var(--jz-ink);white-space:pre-line}
.dz .dzf-in-fold{position:relative;margin:0 calc(-1 * var(--jz-s4));border-top:1px solid var(--dz-hair)}
.dz .dzf-in-fold>*{position:relative}
.dz details.fold{margin:0 0 var(--jz-s4)}
.dz details.fold>div{padding-bottom:0}
.dz .dz-mats{padding:var(--jz-s3) var(--jz-s4) var(--jz-s1)}
.dz .dz-mats>*+*::before{display:none}
.dz .dzf-group.is-risk{box-shadow:inset 0 0 0 1.5px var(--jz-red-line),var(--dz-shadow)}
.dz .dzf-group.is-risk .dzf-cell>.k{color:var(--jz-red)}
.dz .dzf-seg2 span{min-height:44px}
.dz .dz-use button.row{width:100%;cursor:pointer}
.dz .dz-use form{margin:0;position:relative}
.dz .dz-use form+a::before,.dz .dz-use a+form::before{content:"";position:absolute;top:0;left:68px;right:0;height:1px;background:var(--dz-hair);z-index:1}
.dz .dz-use button.row::after{content:"";position:absolute;right:20px;top:50%;width:8px;height:8px;margin-top:-4px;border:solid var(--dz-chev);border-width:2px 2px 0 0;transform:rotate(45deg)}
.dz .dz-remove{color:var(--jz-red);text-decoration:none}
.dz .dz-links{margin-top:var(--jz-s2)}

/* ===== 15. Pass 3, round 2 ===== */
/* The week strip: the foundation gave day tiles a card shadow; ours are bare columns */
.dz .daystrip.dz-days a{box-shadow:none;background:none}
.dz .daystrip.dz-days a.today{background:none}
.dz .daystrip.dz-days a.today small{color:var(--jz-ink)}
/* Status word inside a sub line sits on the text baseline */
.dz-sub .dz-st{display:inline;font:inherit;font-weight:600}
.dz-sub .dz-st::before{display:inline-block;margin:0 6px 1px 0;vertical-align:middle}
/* A real drawn mic in the hero button (inline SVG, nothing fetched) */
.dz.dz .dz-say .talk-btn.btn::before{width:30px;height:30px;border:0;border-radius:0;background:center/30px 30px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306100c' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21'/%3E%3C/svg%3E")}
.dz.dz .dz-say .talk-btn.btn[aria-pressed=true]::before{width:18px;height:18px;border-radius:4px;background:#fff}
/* Same mic, small, for the quiet talk link on the booking form */
.dz .dzf-talk .talk-btn.btn::before{width:22px;height:22px;border:0;border-radius:0;box-shadow:none;background:center/22px 22px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23306d55' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21'/%3E%3C/svg%3E")}
.dz .dzf-talk .talk-btn.btn[aria-pressed=true]::before{width:12px;height:12px;border-radius:3px;background:currentColor;animation:none}
.dz .dzf-talk{padding-top:var(--jz-s1)}
.dz .dzf-talk .dz-how{margin-top:-6px}
/* Materials: rows, not grey wells. Item on the left, a small quantity box on the right */
.dz .dz-mats{padding:0}
.dz .dz-mhead{display:flex;justify-content:space-between;padding:12px var(--jz-s4) 2px;font:600 13px/18px var(--jz-sans);color:var(--jz-muted)}
.dz .dz-mhead span:last-child{width:56px;text-align:center}
.dz .dz-mats .mline{position:relative;display:flex;align-items:center;gap:var(--jz-s3);min-height:52px;margin:0;padding:0 var(--jz-s3) 0 var(--jz-s4)}
.dz .dz-mats .mline+.mline::before{display:block}
.dz .dz-mats .mhead+.mline::before{display:none}
.dz.dz .dz-mats .mline input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]){flex:1;min-width:0;width:auto;min-height:44px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;outline:0;font:400 17px/22px var(--jz-sans);color:var(--jz-ink)}
.dz.dz .dz-mats .mline input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):last-child{flex:none;width:56px;min-height:36px;padding:0 4px;border-radius:10px;background:var(--jz-field);text-align:center;font-weight:600;font-variant-numeric:tabular-nums}
.dz.dz .dz-mats .mline input:focus{background:transparent}
.dz.dz .dz-mats .mline input:last-child:focus{background:var(--jz-card);box-shadow:inset 0 0 0 2px var(--jz-forest)}
.dz .dz-mats .mline input::placeholder{color:var(--jz-faint);opacity:1}
.dz .dzf-num{gap:6px}
/* Six choices (an odd saved length kept as its own option) don't fit one line: two rows of three */
.dz .dzf-seg:has(label:nth-child(6)){display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.dz .dzf-seg:has(label:nth-child(6)) span{font-size:15px}

/* ===== Team diary (WP-4c, merged into the redesign): person picker, who each visit is for, filter notes ===== */
.dz .pfilter{display:flex;align-items:flex-end;gap:var(--jz-s2);margin:var(--jz-s2) 0 var(--jz-s4)}
.dz .pfilter .field{flex:1;margin:0;font:600 13px/18px var(--jz-sans);color:var(--jz-muted)}
.dz .pfilter select{width:100%;height:44px;margin-top:4px;border:0;border-radius:var(--dz-r);background:var(--jz-card);box-shadow:var(--dz-shadow);padding:0 var(--jz-s3);font:500 17px var(--jz-sans);color:var(--jz-ink)}
.dz .pfilter .btn{flex:none;height:44px;min-height:44px;margin:0}
.dz .bkrow .bkwho{display:block;margin-top:2px;font:600 13px/18px var(--jz-sans);color:var(--jz-forest)}
.dz-only{margin:0 0 var(--jz-s3);padding:0 var(--jz-s4);font:400 15px/20px var(--jz-sans);color:var(--jz-muted)}
.dz-only a{font-weight:600;color:var(--jz-forest);text-decoration:none}
.dz-links{display:flex;justify-content:center;gap:var(--jz-s4);margin:0 0 var(--jz-s2)}
.dz-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--jz-s3);font:600 15px/1 var(--jz-sans);color:var(--jz-forest);text-decoration:none}

/* ===== 16. Pass 3, diary area round (art director fixes) ===== */
/* Check flag: a white to-do card with one red dot word, not a pink panel */
.dz .dz-check{background:var(--jz-card);box-shadow:var(--dz-shadow);color:var(--jz-ink)}
#app .dz .dz-check b.jz-st{display:flex;align-items:center;margin:0 0 4px;font:600 17px/22px var(--jz-sans)}
/* A done sheet is read: spare "Add a material" rows go until you switch it back to Still checking */
.dz .dzf.is-done:not(:has(input[name=status][value=draft]:checked)) .dz-mats .mline:has(input[placeholder]){display:none}
.dz .dzf.is-done:not(:has(input[name=status][value=draft]:checked)) .dz-sec:has(+ .dz-mats.is-empty),
.dz .dzf.is-done:not(:has(input[name=status][value=draft]:checked)) .dz-mats.is-empty{display:none}
/* Booking detail: the shared tinted avatar, same size as the call button */
.dz .who-card .avt{width:44px;height:44px;font-size:17px}
/* Reviews: the links row is an ordinary grouped row */
.dz .dz-linkrow{margin-top:var(--jz-s2)}

/* ===== Pass 5 (1 Nov, art director round 2): one way through time ===== */
/* Week | Day segmented control under the title; the old centred "Day view / Team today" links are gone */
#app .dz .dz-vt{margin:0 0 var(--jz-s4)}
#app .dz .dz-vt a{min-height:36px}
/* Week: the range label and its arrows sit inside the same white card as the seven dates */
#app .dz .dz-cal{margin:0 0 var(--jz-s4);padding:6px 6px 2px;background:var(--jz-card);border-radius:var(--jz-r);box-shadow:var(--jz-shadow)}
#app .dz .dz-cal .dz-week{margin:0;gap:0}
#app .dz .dz-cal .dz-week b{font:600 15px/20px var(--jz-sans);color:var(--jz-ink)}
#app .dz .dz-cal .dz-step{width:40px;height:40px}
#app .dz .dz-cal .dz-step svg{width:20px;height:20px}
#app .dz .dz-cal .daystrip.dz-days{margin:0;padding:2px 0 6px}
#app .dz .dz-cal .dz-days a{min-height:66px}
/* Day: segmented control and the day arrows share one row */
#app .dz .dz-ctl{display:flex;align-items:center;gap:var(--jz-s3);margin:0 0 var(--jz-s4)}
#app .dz .dz-ctl .dz-vt{flex:1;margin:0}
#app .dz .dz-ctl .dz-week{flex:none;margin:0;gap:2px}
#app .dz .dz-ctl .dz-step{width:38px;height:38px;background:var(--jz-card);box-shadow:var(--jz-shadow)}
#app .dz .dz-ctl .dz-step svg{width:18px;height:18px}
#app .dz .dz-gotoday{display:inline-flex;align-items:center;height:38px;padding:0 14px;border-radius:19px;background:var(--jz-card);box-shadow:var(--jz-shadow);font:600 15px/1 var(--jz-sans);color:var(--jz-forest);text-decoration:none}
/* Day title is the date; long weekdays still fit beside the + */
#app .dz .dz-daylt h1{font-size:min(34px,8.2vw);white-space:nowrap}
/* Team today: a row in the filter card, under Whose bookings */
#app .dz .pfilter.jz-group>.dz-teamrow{min-height:56px}
#app .dz .pfilter.jz-group>.dz-teamrow::before{left:var(--jz-s4)}
#app .dz .dz-teamrow .jz-go-t b{font-weight:400}
/* Booking: who does it is a plain fact in the time card, not a row that looks tappable */
.dz .card.when .dz-kv{display:flex;align-items:center;justify-content:space-between;gap:var(--jz-s3);margin:var(--jz-s4) 0 0;padding-top:var(--jz-s4);border-top:1px solid var(--dz-hair,var(--jz-line));font:400 17px/22px var(--jz-sans);color:var(--jz-ink)}
.dz .card.when .dz-kv b{font-weight:400;color:var(--jz-muted);text-align:right;min-width:0;overflow-wrap:anywhere}
/* New booking: the date reads "Sun 1 Nov" (money.js draws it; the real date input stays over the row) */
.dz .dzf .rec-date{position:relative}
.dz .rec-dv{position:absolute;right:40px;top:50%;transform:translateY(-50%);z-index:0;font:400 17px/22px var(--jz-sans);color:var(--jz-muted);font-variant-numeric:tabular-nums;pointer-events:none}
.dz.dz .dzf .rec-date.has-dv input[type=date]{color:transparent}
.dz .dzf .rec-date.has-dv input[type=date]::-webkit-datetime-edit{color:transparent}
/* Reviews: the "add your link" notice is one tappable row, not a card with a loose link in it */
#app .dz .dz-linkcard .jz-go{align-items:flex-start;padding-top:14px;padding-bottom:14px}
#app .dz .dz-linkcard .jz-go-t small{white-space:normal;overflow:visible}
#app .dz .dz-linkcard .jz-go-chev{align-self:center}
#app .dz .dz-linkcard .jz-go-t b{text-wrap:balance}

/* ===== Pass 6 (1 Nov, art director round): one title row, a bare week strip, Calendar-style rows ===== */
/* Title row: Diary, then the "Everyone" pill and the + on the right. The range is the subtitle, arrows beside it. */
#app .dz .dz-lt{align-items:flex-start;margin-bottom:var(--jz-s3)}
#app .dz .dz-lt-r{flex:none;display:flex;align-items:center;gap:var(--jz-s2);margin-top:-2px}
#app .dz .dz-lt-r .jz-new{margin-top:0}
#app .dz .dz-range{display:flex;align-items:center;gap:2px;min-height:28px;margin-top:2px}
#app .dz .dz-range>span{margin-right:6px;font-variant-numeric:tabular-nums;white-space:nowrap}
#app .dz .dz-range .dz-step{width:32px;height:32px;margin:-6px 0;border-radius:50%;color:var(--jz-forest)}
#app .dz .dz-range .dz-step svg{width:18px;height:18px}
#app .dz .dz-range .dz-gotoday{flex:none;white-space:nowrap;height:28px;margin-left:6px;padding:0 12px;border-radius:14px;font-size:14px;box-shadow:none;background:var(--jz-soft);color:var(--jz-forest-ink,var(--jz-forest))}
#app .dz .dz-daylt h1{font-size:min(34px,8.2vw)}
/* The pill: whose bookings show. Opens a small menu card under it. */
#app .dz .dz-who{position:relative}
#app .dz .dz-who>summary{position:relative;z-index:2;display:flex;align-items:center;gap:4px;height:36px;max-width:132px;padding:0 10px 0 14px;border-radius:18px;background:var(--jz-card);box-shadow:var(--jz-shadow);font:600 15px/1 var(--jz-sans);color:var(--jz-ink);list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
#app .dz .dz-who>summary::-webkit-details-marker{display:none}
#app .dz .dz-who-t{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#app .dz .dz-who>summary svg{flex:none;width:16px;height:16px;fill:none;stroke:var(--jz-muted);stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round;transition:transform 150ms}
#app .dz .dz-who[open]>summary svg{transform:rotate(180deg)}
#app .dz .dz-who[open]>summary{box-shadow:0 0 0 2px var(--jz-forest)}
/* While open, the pill's ::before covers the screen: a tap anywhere else lands on the summary and closes it. */
#app .dz .dz-who[open]>summary::before{content:"";position:fixed;inset:0;z-index:-1;cursor:default}
#app .dz .dz-who>.pfilter{position:absolute;right:-52px;top:calc(100% + 8px);z-index:3;display:block;width:min(310px,calc(100vw - 40px));margin:0;box-shadow:0 12px 40px -12px rgba(23,33,29,.35),0 1px 3px rgba(23,33,29,.08)}
#app .dz .dz-who>.pfilter .jz-row .k{white-space:nowrap}
/* The week strip sits on the paper: no card, no range bar of its own. */
#app .dz .dz-lt+.daystrip.dz-days{margin:0 -4px var(--jz-s4);padding:0}
#app .dz .dz-lt+.dz-days a{min-height:66px}
#app .dz .dz-lt+.dz-days a.today b{background:var(--jz-ink)}
/* Booking rows: time column, a 4px bar in the colour of who does it, then customer / job / address, one per line.
   A line that can't fit ends in "...", never a fade mid-word ("Lounge downlig", art director judge 1). */
#app .dz .bkrow .rb{min-width:0}
#app .dz .bkrow .rb>:is(b,small.bkline,small.bkwho){display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* The job may take two lines (J1 truncation rule): .jz-clamp2 from the kit, nothing here sets it back to one line */
#app .dz .bkrow[data-bar] .rb{position:relative;padding-left:14px}
#app .dz .bkrow[data-bar] .rb::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:4px;border-radius:2px;background:var(--who,var(--jz-forest))}
#app .dz .bkrow[data-bar=none] .rb::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--jz-chev)}
#app .dz .bkrow[data-bar] .bkwho{color:var(--who,var(--jz-forest))}
#app .dz .group .bkrow[data-bar]+.bkrow::before{left:94px}
.dz .bkrow:is([data-who=A],[data-who=G],[data-who=M],[data-who=S],[data-who=Y]){--who:#2f8a62}
.dz .bkrow:is([data-who=B],[data-who=H],[data-who=N],[data-who=T],[data-who=Z]){--who:#3b72c4}
.dz .bkrow:is([data-who=C],[data-who=I],[data-who=O],[data-who=U]){--who:#b7791f}
.dz .bkrow:is([data-who=D],[data-who=J],[data-who=P],[data-who=V]){--who:#c4506a}
.dz .bkrow:is([data-who=E],[data-who=K],[data-who=Q],[data-who=W]){--who:#7a5cc0}
.dz .bkrow:is([data-who=F],[data-who=L],[data-who=R],[data-who=X]){--who:#1f8e99}
/* Booking: "Who does it" opens Change booking at the picker. The value and a chevron only (art director J2: a value, an
   action word and a chevron at once was three things); nobody yet is muted, not a warning */
#app .dz .card.when a.dz-kv-go{position:relative;margin-right:-4px;padding-right:22px;color:var(--jz-ink);text-decoration:none}
#app .dz .card.when a.dz-kv-go::after{content:"";position:absolute;right:4px;top:calc(50% + 8px);width:8px;height:8px;margin-top:-5px;border:solid var(--jz-chev);border-width:2px 2px 0 0;transform:rotate(45deg)}
#app .dz .card.when .dz-kv b.is-none{color:var(--jz-muted);font-weight:400}
/* New booking: four lengths and Other. Other is an unnamed checkbox (never posted) that shows six more. */
#app .dz .dzf-len{position:relative}
#app .dz .dzf-more-tog{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
#app .dz .dzf-len .dzf-seg{display:flex}
#app .dz .dzf-len .dzf-seg span{font-size:15px}
#app .dz .dzf-len .dzf-other{cursor:pointer}
#app .dz .dzf-len:has(.dzf-more-tog:checked) .dzf-other span,#app .dz .dzf-len:has(.dzf-more input:checked) .dzf-other span{background:var(--jz-card);font-weight:700;box-shadow:0 1px 2px rgba(23,33,29,.08),0 3px 8px -2px rgba(23,33,29,.16)}
#app .dz .dzf-len:has(.dzf-more input:checked) .dzf-seg input:checked+span{background:none;box-shadow:none;font-weight:500}
#app .dz .dzf-len:has(.dzf-more-tog:focus-visible) .dzf-other span{outline:2px solid var(--jz-forest);outline-offset:1px}
#app .dz .dzf-more{display:none;flex-wrap:wrap;gap:8px;margin-top:var(--jz-s3)}
#app .dz .dzf-len:has(.dzf-more-tog:checked) .dzf-more,#app .dz .dzf-len:has(.dzf-more input:checked) .dzf-more{display:flex}
#app .dz .dzf-more label{position:relative;display:flex}
#app .dz .dzf-more input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
#app .dz .dzf-more span{display:flex;align-items:center;min-height:36px;padding:0 14px;border-radius:18px;background:var(--jz-field);font:500 15px/1 var(--jz-sans);color:var(--jz-ink);font-variant-numeric:tabular-nums}
#app .dz .dzf-more input:checked+span{background:var(--jz-ink);color:#fff;font-weight:600}
#app .dz .dzf-more input:focus-visible+span{outline:2px solid var(--jz-forest);outline-offset:1px}
/* Team today: one grouped row per person (name, "2 booked · 0 to do", chevron), then Everyone in its own group.
   The booked link is stretched over the whole row; the "to do" link sits above it with its own 44px target. */
#app .dz .group.dz-tp{margin:0 0 var(--jz-s6)}
#app .dz .dz-tprow{min-height:64px;padding-right:36px}
#app .dz .dz-tprow+.dz-tprow::before{left:44px}
#app .dz .dz-tprow::after{content:"";position:absolute;right:20px;top:50%;width:8px;height:8px;margin-top:-5px;border:solid var(--dz-chev);border-width:2px 2px 0 0;transform:rotate(45deg)}
#app .dz .dz-tprow .rb{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;padding-left:28px}
#app .dz .dz-tprow.is-all .rb{padding-left:0}
#app .dz .dz-tprow .rb::before{content:"";position:absolute;left:var(--jz-s4);top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--who,var(--jz-forest))}
#app .dz .dz-tprow.is-all .rb::before{display:none}
#app .dz .dz-tprow[data-unset] .rb::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--jz-chev)}
#app .dz .dz-tprow .rb b{font:600 17px/22px var(--jz-sans);color:var(--jz-ink);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#app .dz .dz-tprow .rb small{font:400 15px/20px var(--jz-sans);color:var(--jz-muted);font-variant-numeric:tabular-nums}
#app .dz .dz-tprow .rb small a{color:inherit;text-decoration:none}
#app .dz .dz-tprow .rb small a:first-child::before{content:"";position:absolute;inset:0;z-index:1}
#app .dz .dz-tprow .rb small a+a{position:relative;z-index:2;display:inline-block;padding:12px 0;margin:-12px 0}
#app .dz .dz-tprow .rb small a:not([data-count="0"]){color:var(--jz-ink)}
#app .dz .dz-tprow .rb small.dz-tp-off{font-size:13px}
.dz .dz-tprow:is([data-who=A],[data-who=G],[data-who=M],[data-who=S],[data-who=Y]){--who:#2f8a62}
.dz .dz-tprow:is([data-who=B],[data-who=H],[data-who=N],[data-who=T],[data-who=Z]){--who:#3b72c4}
.dz .dz-tprow:is([data-who=C],[data-who=I],[data-who=O],[data-who=U]){--who:#b7791f}
.dz .dz-tprow:is([data-who=D],[data-who=J],[data-who=P],[data-who=V]){--who:#c4506a}
.dz .dz-tprow:is([data-who=E],[data-who=K],[data-who=Q],[data-who=W]){--who:#7a5cc0}
.dz .dz-tprow:is([data-who=F],[data-who=L],[data-who=R],[data-who=X]){--who:#1f8e99}

/* ===== Pass 6 (1 Nov, art director round 4) ===== */
/* Week and day: the title line is title + new only; range, arrows and whose bookings share one bar under the dates */
#app .dz .dz-lt{align-items:center}
#app .dz .dz-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--jz-s3);margin:0 0 var(--jz-s2);min-height:44px}
#app .dz .dz-bar .dz-range{margin:0;min-width:0}
#app .dz .dz-bar .dz-who{flex:none}
#app .dz .dz-bar .dz-who>.pfilter{right:0}
/* Booking rows: the job is ink 15 (what you're going to do), the address muted under it and may wrap to two lines */
#app .dz .bkrow .rb>small.bkjob{margin-top:1px;color:var(--jz-ink)}
#app .dz .bkrow .rb>small.bkline{white-space:normal;text-wrap:pretty}
/* Reviews and list rows: long second lines fade at the edge, never "..." (one truncation style) */
#app .dz :is(.revrow,.qrow,.sheetrow,.certrow) .rb{min-width:0}
#app#app .dz :is(.revrow,.qrow,.sheetrow,.certrow) .rb>:is(b,small){display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* Team (accounts pages, owned here): names and emails fade like the inbox instead of "..." */
#app main.team .hm-people .hm-t{min-width:0}
#app main.team .hm-people .hm-t :is(b,small){display:block;text-overflow:ellipsis}
/* One status glyph: Draft is a filled grey dot here too, never a hollow "o" */
#app .dz :is(.dz-st,.pill,.jz-st):is(.st-draft,.is-off)::before{background:currentColor;box-shadow:none}
/* Booking: a past booking still marked booked asks "Did this happen?" at the top (art director judge 1, 1 Nov).
   A white notice card (to-dos are notices, not alarms): amber clock tile, the question, one line, two buttons 1:1. */
#app .dz .card.dz-happen{display:flex;gap:var(--jz-s3);align-items:flex-start;padding:var(--jz-s4);margin:0 0 var(--jz-s4)}
#app .dz .dz-happen-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:var(--jz-r-icon);background:rgba(183,121,31,.12)}
#app .dz .dz-happen-ic svg{width:22px;height:22px;fill:none;stroke:var(--jz-amber);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
#app .dz .dz-happen .rb{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
#app .dz .dz-happen .rb b{font:600 17px/22px var(--jz-sans);color:var(--jz-ink)}
#app .dz .dz-happen .rb p{margin:0;font:400 15px/20px var(--jz-sans);color:var(--jz-muted)}
#app .dz .dz-happen-acts{display:grid;grid-template-columns:1fr 1fr;gap:var(--jz-s2);margin-top:var(--jz-s3)}
#app .dz .dz-happen-acts .btn{min-height:44px;margin:0;gap:6px;padding:0 10px;font:600 15px/1 var(--jz-sans);white-space:nowrap}
#app .dz .dz-happen-acts .btn svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}

/* Re-walk 1 Nov: a done booking says so on screen (My day asks "mark it done", so the row must show it) */
.bkrow .bkdone{display:inline-flex;align-items:center;gap:4px;margin-top:4px;font-size:13px;font-weight:600;color:var(--jz-ok)}
.bkrow .bkdone svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}

/* ===== 6 Nov rebuild: Diary, Job sheets and Team in both looks (Fresh light and Night) =====
   Built from the shared parts in jeevz.css: day pills, cards of rows (.jz-list), section heads, chips, buttons, the lock
   line. These rules only lay them out for the diary (.dz), job sheets (.dz) and team (main.team) screens, and read role
   tokens only, so both looks follow. The older rules above stay for Certificates and Reviews. */
#app .dz .jz-days{margin:4px 0 6px}
#app .dz .jz-day{min-height:118px}
#app .dz .dz-bar{margin:0 0 4px}
#app .dz .dz-dayhead h2 a{color:inherit;text-decoration:none}
#app .dz .dz-dayhead.is-today h2{color:var(--jz-forest)}
#app .dz .dz-dayhead span{font-variant-numeric:tabular-nums}
#app .dz .dz-none{margin:0 0 14px;padding:16px 18px;background:var(--jz-surface);border-radius:var(--jz-r-card);box-shadow:var(--jz-shadow);font:500 var(--jz-t-meta)/1.3 var(--jz-sans);color:var(--jz-ink-2)}
/* booking rows: a card of rows, the time in Cabinet, the person's bar beside the name */
#app .dz .jz-list>.row{margin:0;border:0;border-radius:0;background:none;box-shadow:none;min-height:84px;padding:14px 16px 14px 0;color:var(--jz-ink)}
#app .dz .jz-list>.row::before{display:none}
#app .dz .jz-list>.row+.row,#app .dz .jz-list>form+form>.row,#app .dz .jz-list>.row+form>.row{box-shadow:inset 0 1px 0 var(--jz-hair)}
#app .dz .jz-list>.row:active{background:var(--jz-surface-2)}
#app .dz .bkrow .bktime{width:76px;padding-left:18px}
#app .dz .bkrow .bktime b{font:700 20px/1.1 var(--jz-display);letter-spacing:-.01em;color:var(--jz-ink)}
#app .dz .bkrow .bktime small{font:500 var(--jz-t-label)/1.3 var(--jz-sans);color:var(--jz-ink-2)}
#app .dz .bkrow .rb b{font:600 var(--jz-t-body)/1.3 var(--jz-sans);color:var(--jz-ink)}
#app .dz .bkrow .rb small{color:var(--jz-ink-2)}
#app .dz .bkrow .bkdone{color:var(--jz-forest);font-weight:600}
#app .dz .bkrow[data-st=cancelled] .rb b{color:var(--jz-ink-2)}
#app .dz .jz-list .row .ticon{width:44px;height:44px;margin-left:16px;border-radius:50%;background:var(--jz-surface-2);color:var(--jz-ink)}
#app .dz .jz-list .row .ticon svg{stroke:currentColor}
#app .dz .jz-list.dz-golist>.row,#app .dz .jz-list.dz-golist>form>.row,#app .dz .jz-list.dz-sheets>.row,#app .dz .jz-list.dz-photos>.row{min-height:72px}
#app .dz .jz-list.dz-mrows>.row{padding-left:18px;min-height:64px}
#app .dz .jz-list>form>button.row{width:100%;margin:0;border:0;background:none;text-align:left;color:var(--jz-ink);font:inherit;padding:14px 16px 14px 0;display:flex;align-items:center;gap:14px;min-height:72px}
/* status words on a booking or sheet: a chip, word and colour */
#app .dz .dz-st,#app .dz .dz-flag{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:var(--jz-r-full);background:var(--jz-surface-2);color:var(--jz-ink);font:600 var(--jz-t-label)/1 var(--jz-sans);vertical-align:middle}
#app .dz .dz-st.st-done{background:var(--jz-wash);color:var(--jz-forest)}
#app .dz .dz-st.st-cancelled{background:var(--jz-surface-2);color:var(--jz-ink-2)}
#app .dz .dz-st.st-need,#app .dz .dz-flag{background:var(--jz-late-fill);color:var(--jz-on-late)}
#app .dz .jz-chip.dz-st,#app .dz .jz-chip.dz-flag{min-height:32px}
#app .dz .jz-chip.is-danger.dz-flag{background:var(--jz-chip-danger);color:var(--jz-on-chip-danger)}
/* the booking: the when card is the hero */
#app .dz .card.when{padding:22px 20px}
#app .dz .card.when .eyebrow{display:block;font:600 var(--jz-t-meta)/1.2 var(--jz-sans);color:var(--jz-ink-2)}
#app .dz .card.when .whenbig{display:block;margin:8px 0 4px;font:800 56px/.95 var(--jz-display);letter-spacing:var(--jz-track-num,-.03em);color:var(--jz-ink);font-variant-numeric:tabular-nums}
#app .dz .card.when .whenbig .to{font-size:.5em;font-weight:700;color:var(--jz-ink-2)}
#app .dz .card.when .muted{margin:0;font:500 var(--jz-t-meta)/1.3 var(--jz-sans);color:var(--jz-ink-2)}
#app .dz .card.when .addr{display:flex;gap:10px;align-items:flex-start;margin:16px 0 0;padding:14px 16px;border-radius:var(--jz-r-inner);background:var(--jz-surface-2);font:500 var(--jz-t-body)/1.4 var(--jz-sans);color:var(--jz-ink)}
#app .dz .card.when .addr svg{flex:none;width:22px;height:22px;fill:none;stroke:var(--jz-forest);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#app .dz .card.when .dz-kv{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;margin:14px 0 0;padding:4px 0 0;border:0;box-shadow:inset 0 1px 0 var(--jz-hair);color:var(--jz-ink);text-decoration:none;font:600 var(--jz-t-body)/1.2 var(--jz-sans)}
#app .dz .card.when .dz-kv b{font-weight:600;color:var(--jz-forest)}
#app .dz .card.when .dz-kv b.is-none{color:var(--jz-late)}
#app .dz .who-card{display:flex;align-items:center;gap:14px;padding:16px 16px 16px 18px}
#app .dz .who-card .rb{display:flex;flex-direction:column;min-width:0;flex:1}
#app .dz .who-card .rb b{font:700 var(--jz-t-card)/1.15 var(--jz-display);color:var(--jz-ink)}
#app .dz .who-card .rb a{min-height:32px;display:inline-flex;align-items:center;font:500 var(--jz-t-meta)/1 var(--jz-sans);color:var(--jz-ink-2);text-decoration:none}
#app .dz .iconbtn.call{flex:none;display:grid;place-items:center;width:56px;height:56px;min-height:56px;border-radius:50%;background:var(--jz-forest);color:var(--jz-on-forest)}
#app .dz .iconbtn.call svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2}
#app .dz .dz-notes .eyebrow{display:block;margin:0 0 6px;font:600 var(--jz-t-label)/1.2 var(--jz-sans);color:var(--jz-ink-2)}
#app .dz .dz-notes p{margin:0;font:500 var(--jz-t-body)/1.45 var(--jz-sans);color:var(--jz-ink)}
#app .dz .dz-clash{background:var(--jz-chip-danger);color:var(--jz-on-chip-danger);box-shadow:none}
#app .dz .dz-clash a,#app .dz .dz-clash .note{color:inherit}
#app .dz .dz-happen{display:flex;gap:14px;align-items:flex-start}
#app .dz .dz-happen-ic svg{width:28px;height:28px;fill:none;stroke:var(--jz-late);stroke-width:2;stroke-linecap:round}
#app .dz .dz-happen .rb b{font:700 var(--jz-t-card)/1.15 var(--jz-display);color:var(--jz-ink)}
#app .dz .dz-happen .rb p{margin:4px 0 14px;color:var(--jz-ink-2)}
#app .dz .dz-happen-acts{display:flex;gap:10px}
#app .dz .dz-happen-acts .jz-btn{flex:1;width:auto;padding:0 14px}
#app .dz .dz-acts{display:flex;flex-direction:column;gap:10px;margin:var(--jz-s6) 0 0}
#app .dz .dz-acts .jz-btn .jz-ic,#app .dz .dz-acts .jz-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
#app .dz .dz-cancel{text-align:center}
#app .dz .dz-cancel .jz-btn{width:auto;margin:0 auto;padding:0 24px;color:var(--jz-danger)}
#app .dz .dz-review{margin:14px 0 0}
#app .dz .dz-dock .jz-lock{margin:0 0 8px}
#app .dz .dock .jz-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* job sheets */
#app .dz .dz-sheets .r2{display:block;margin-top:6px}
#app .dz .dz-check{display:block}
#app .dz .dz-check form{margin-top:14px}
#app .dz .dz-say{padding:18px}
#app .dz .dz-sheetcard{padding:20px}
#app .dz .dz-sheetcard h2{margin:18px 0 6px;font:700 var(--jz-t-h2)/1.15 var(--jz-display);color:var(--jz-ink)}
#app .dz .dz-sheetcard p,#app .dz .dz-sheetcard li{font:500 var(--jz-t-body)/1.45 var(--jz-sans);color:var(--jz-ink)}
#app .dz .dz-howto{margin-top:var(--jz-s6)}
#app .dz .dz-logout{width:auto;margin:var(--jz-s6) auto 0;padding:0 28px}
#app .dz .dz-wstep{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 var(--jz-s4)}
#app .dz .dz-wstep .jz-round{background:var(--jz-surface);box-shadow:var(--jz-shadow);color:var(--jz-ink)}
#app .dz .dz-wstep .jz-round svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
#app .dz .dz-wstep b{font:700 var(--jz-t-body)/1.2 var(--jz-sans);color:var(--jz-ink)}
#app .dz .dz-tp .row{padding-left:18px}
/* team: one card of people, round initials, 72px rows */
#app main.team .hm-group{background:var(--jz-surface);border-radius:var(--jz-r-card);box-shadow:var(--jz-shadow)}
#app main.team .hm-row{min-height:72px;padding:12px 18px;color:var(--jz-ink)}
#app main.team .hm-row.hm-role{min-height:76px}
#app main.team .hm-ic.hm-av,#app main.team .hm-mono{width:44px;height:44px;border-radius:50%;background:var(--jz-wash);color:var(--jz-forest);font:700 17px/1 var(--jz-display)}
#app main.team .hm-mono{width:64px;height:64px;font-size:24px}
#app main.team .hm-t b{font:600 var(--jz-t-body)/1.25 var(--jz-sans);color:var(--jz-ink)}
#app main.team .hm-t small{font:500 var(--jz-t-meta)/1.3 var(--jz-sans);color:var(--jz-ink-2)}
#app main.team .hm-v{color:var(--jz-ink-2)}
#app main.team .addtools .hm-ic{width:44px;height:44px;border-radius:50%;background:var(--jz-forest);color:var(--jz-on-forest)}
#app main.team .danger-text{color:var(--jz-danger)}
#app main.team .hm-made{padding:18px}
#app main.team .hm-made input{width:100%;box-sizing:border-box;min-height:56px;margin:12px 0;border-radius:var(--jz-r-inner);background:var(--jz-surface-2);color:var(--jz-ink)}
#app main.team .addtools .hm-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
#app .dz .daystrip.dz-days{display:block;position:static;margin:0;padding:0;background:none;box-shadow:none;overflow:visible}
#app .dz .dz-happenwrap .dz-happen{display:flex;gap:14px;align-items:flex-start;margin:0;padding:0;background:none;box-shadow:none;border:0}
#app .dz .jz-sechead .dz-sec{display:inline;margin:0;padding:0;font:700 var(--jz-t-h2)/1.1 var(--jz-display);color:var(--jz-ink)}
#app .dz .card.when{position:relative;display:block;margin:0 0 14px;background:var(--jz-surface);color:var(--jz-ink);border:0;border-radius:var(--jz-r-card);box-shadow:var(--jz-shadow);animation:jz-rise var(--jz-dur-rise,600ms) var(--jz-ease-out) both}
@media (prefers-reduced-motion:reduce){#app .dz .card.when{animation:none}}

/* ===== Q7b: the job sheet's "Check this" card (jobsheets/detail.html). The task-card anatomy: an amber late chip with
   the danger mark, a title, the words, the one button. The edge bar shows in light (--jz-late-bar) and the top band at
   night (--jz-band), as every late card; the older rules hid that bar (::before). ===== */
#app .dz .dz-check{position:relative;display:block;margin:0 0 var(--jz-s5);padding:calc(var(--jz-s5) + var(--jz-band)) var(--jz-s5) var(--jz-s5) calc(var(--jz-s5) + var(--jz-late-bar) - 2px);border-radius:var(--jz-r-card);background:var(--jz-surface);box-shadow:var(--jz-shadow);color:var(--jz-ink);font:500 var(--jz-t-body)/1.4 var(--jz-sans);overflow:hidden}
#app .dz .dz-check::before{display:block;content:"";position:absolute;left:0;top:22px;bottom:22px;width:var(--jz-late-bar);border-radius:0 var(--jz-r-s) var(--jz-r-s) 0;background:var(--jz-late-edge)}
#app .dz .dz-check::after{content:"";position:absolute;left:0;right:0;top:0;height:var(--jz-band);background:var(--jz-late-edge)}
#app .dz .dz-check .jz-card-top{display:flex;align-items:center;gap:8px;margin:0 0 12px}
#app .dz .dz-check .jz-chip .jz-ic{width:18px;height:18px}
#app .dz .dz-check .jz-title{margin:0;color:var(--jz-ink)}
#app .dz .dz-check-l{margin:6px 0 0;color:var(--jz-ink-2)}
#app .dz .dz-check-l b{font-weight:700;color:var(--jz-late)}
#app .dz .dz-check form{margin-top:16px}
#app .dz .dz-check #clear-flag{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;margin:0;padding:0 20px;border:0;border-radius:var(--jz-r-btn);background:var(--jz-forest);color:var(--jz-on-forest);font:600 var(--jz-t-body)/1 var(--jz-sans);box-shadow:none}
#app .dz .dz-check #clear-flag .jz-ic{width:22px;height:22px}
#app .dz .dz-check #clear-flag:active{transform:scale(.97)}
/* the sheet's Still checking / Done switch: the picked side is the wash with forest words, in both looks */
#app .dz #sheet-form .dzf-seg input:checked+span{background:var(--jz-wash);color:var(--jz-forest);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--jz-forest) 35%,transparent)}
/* Q7b: the new job sheet's talk card (jobsheets/form.html only, .dz-sayrow): the words box on top, then the mic with
   "Tap and talk" beside it (not hanging under it), then How this works. */
#app .dz .dz-say.dz-sayrow{display:grid;grid-template-columns:72px minmax(0,1fr);grid-template-areas:"field field" "mic ." "live live" "fb fb" "how how" "words words";align-items:center;column-gap:16px;padding:20px}
#app .dz .dz-sayrow>label.field{grid-area:field;margin:0 0 16px;font:600 var(--jz-t-label)/1.3 var(--jz-sans);color:var(--jz-ink-2)}
#app .dz .dz-sayrow .talk-btn{grid-area:mic;margin:0!important}
#app .dz.dz .dz-sayrow .talk-btn.btn::after{top:50%;left:calc(100% + 16px);transform:translateY(-50%);font:600 var(--jz-t-body)/1.2 var(--jz-sans)}
#app .dz .dz-sayrow .talk-live{grid-area:live;margin-top:8px}
#app .dz .dz-sayrow .talk-fallback{grid-area:fb;text-align:left}
#app .dz .dz-sayrow .dz-how{grid-area:how;justify-self:start;margin-top:8px}
#app .dz .dz-sayrow .talk-words{grid-area:words}
/* Q7b: the booking and job sheet forms (.dz-bookform: diary/form.html, jobsheets/form.html and detail.html). The steps
   read as numbered Cabinet headings, the people are calm wash initials (no pastel tiles at night), the picked customer
   and the picked length are the wash with forest words, so the choice is obvious in both looks. */
#app .dz form.dz-bookform{counter-reset:dzstep}
#app .dz form.dz-bookform>.jz-sec{counter-increment:dzstep;display:flex;align-items:center;gap:10px;margin:var(--jz-s7) var(--jz-s1) var(--jz-s3);padding:0;font:700 var(--jz-t-h2)/1.1 var(--jz-display);letter-spacing:var(--jz-track-h2,-.01em);text-transform:none;color:var(--jz-ink)}
#app .dz form.dz-bookform>.jz-sec:first-of-type{margin-top:var(--jz-s3)}
#app .dz form.dz-bookform>.jz-sec::before{content:counter(dzstep);flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--jz-wash);color:var(--jz-forest);font:800 15px/1 var(--jz-display)}
#app .dz form.dz-bookform .jz-who .jz-pk .avt{background:var(--jz-surface-2);color:var(--jz-ink);box-shadow:inset 0 0 0 1.5px var(--jz-edge)}
#app .dz form.dz-bookform .jz-who .jz-pk:has(input:checked){background:var(--jz-wash)}
#app .dz form.dz-bookform .jz-who .jz-pk:has(input:checked) .avt{background:var(--jz-forest);color:var(--jz-on-forest);box-shadow:none}
#app .dz form.dz-bookform .jz-who .jz-pk:has(input:checked) .jz-pk-t b{color:var(--jz-forest)}
#app .dz form.dz-bookform .dzf-seg{padding:4px;border-radius:16px;background:var(--jz-surface-2)}
#app .dz form.dz-bookform .dzf-seg span{min-height:48px;border-radius:12px;font-weight:600}
#app .dz form.dz-bookform .dzf-seg input:checked+span{background:var(--jz-wash);color:var(--jz-forest);font-weight:700;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--jz-forest) 35%,transparent)}
#app .dz form.dz-bookform .dzf-talk .dz-how{margin-left:2px}
/* Q7b: team pages (accounts/team*.html, main.team). The older hm-row hairline and chevron read --hm-hair/--hm-chev,
   which were drawn for light only: they point at the role tokens here, so both looks show them. Each person is a row
   with their initials, name, role and their whole email (never cut); Add a login is the page's one button. */
#app main.team{--hm-hair:var(--jz-hair);--hm-chev:var(--jz-ink-2)}
#app main.team .hm-people .hm-row{align-items:center;min-height:80px;padding:14px 18px}
#app main.team .hm-people .hm-ic.hm-av{width:48px;height:48px}
#app main.team .hm-people .hm-owner .hm-ic.hm-av{background:var(--jz-forest);color:var(--jz-on-forest)}
#app main.team .hm-people .hm-t{display:flex;flex-direction:column;gap:2px;min-width:0}
#app main.team .hm-people .hm-t small{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
#app main.team .is-off .hm-ic.hm-av{background:var(--jz-surface-2);color:var(--jz-ink-2)}
#app main.team .is-off strong{color:var(--jz-late);font-weight:700}
#app main.team .tm-add{width:100%;min-height:60px;margin:var(--jz-s5) 0 0}
#app main.team .tm-add .jz-ic{width:22px;height:22px}
#app main.team .tm-addl{margin:12px var(--jz-s2) 0;text-align:center;font:500 var(--jz-t-meta)/1.4 var(--jz-sans);color:var(--jz-ink-2)}
#app main.team .hm-facts .hm-row{min-height:60px;padding:10px 18px}
#app main.team .hm-facts .hm-t{font:500 var(--jz-t-body)/1.25 var(--jz-sans);color:var(--jz-ink-2)}
#app main.team .hm-facts .hm-v{font:600 var(--jz-t-body)/1.25 var(--jz-sans);color:var(--jz-ink)}
#app main.team .hm-person{display:flex;align-items:center;gap:16px}
#app main.team .hm-person .hm-mono{flex:none;width:72px;height:72px;display:grid;place-items:center;font-size:26px}
#app main.team .hm-person .jz-sub{overflow-wrap:anywhere}
#app main.team .hm-sec{margin:var(--jz-s7) var(--jz-s1) var(--jz-s3);font:700 var(--jz-t-h2)/1.1 var(--jz-display);text-transform:none;letter-spacing:var(--jz-track-h2,-.01em);color:var(--jz-ink)}
#app main.team .hm-acts .hm-row{min-height:64px}
#app main.team .hm-acts .hm-ic{width:44px;height:44px;border-radius:50%}
#app main.team p.jz-sec{margin:var(--jz-s7) var(--jz-s1) var(--jz-s3);font:700 var(--jz-t-h2)/1.1 var(--jz-display);text-transform:none;color:var(--jz-ink)}
#app main.team .hm-roles .hm-role:has(input:checked){background:var(--jz-wash)}
#app main.team .hm-roles .hm-role:has(input:checked) b{color:var(--jz-forest)}
/* Q7b: My day for an employee (diary/my_day.html): Home's greeting (date, firm, J mark; no header bar), a headline, the
   visit to go to next as a paper card with its time in Cabinet, then the rest of the day as rows. */
#app .dz .dz-hello{padding:calc(var(--jz-safe-t) + var(--jz-s4)) var(--jz-s1) var(--jz-s5)}
#app .dz .dz-hello-top{display:flex;align-items:center;justify-content:space-between;gap:var(--jz-s3)}
#app .dz .dz-hello-t{min-width:0}
#app .dz .dz-hello .jz-over{margin:0}
#app .dz .dz-hello-firm{margin:2px 0 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:700 var(--jz-t-body)/1.25 var(--jz-sans);color:var(--jz-ink)}
#app .dz .dz-hello-top .jz-mark{flex:none;border-radius:14px}
#app .dz .dz-hello .jz-headline{margin:var(--jz-s5) 0 0;font-size:var(--jz-t-display)}
#app .dz .dz-hello .jz-lede{margin:var(--jz-s2) 0 0}
#app .dz .dz-lead-card{margin:0 0 14px;padding:0;overflow:hidden}
#app .dz .dz-lead-card>a.bkrow{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:0;margin:0;padding:var(--jz-s5);border:0;border-radius:0;background:none;box-shadow:none;text-decoration:none;color:var(--jz-ink)}
#app .dz .dz-lead-card>a.bkrow::before,#app .dz .dz-lead-card>a.bkrow::after{content:none}
#app .dz .dz-lead-card .jz-card-top{display:flex;align-items:center;gap:8px;width:100%;margin:0 0 10px}
#app .dz .dz-lead-time{font:800 var(--jz-t-hero)/1 var(--jz-display);letter-spacing:-.04em;color:var(--jz-ink)}
#app .dz .dz-lead-card .jz-title{margin-top:8px}
#app .dz .dz-lead-job{font:600 var(--jz-t-body)/1.35 var(--jz-sans);color:var(--jz-ink)}
#app .dz .dz-lead-where{font:500 var(--jz-t-meta)/1.4 var(--jz-sans);color:var(--jz-ink-2)}
#app .dz .dz-lead-card .bkrow>.jz-chip{margin-top:10px}
#app .dz .dz-lead-card .bkrow>.jz-btn{align-self:stretch;margin-top:16px}
#app .dz .dz-lead-card:active{transform:scale(.99)}
/* My diary: a free day is one quiet line between the busy days */
#app .dz .dz-freeday{display:flex;align-items:baseline;gap:10px;margin:0;padding:14px var(--jz-s1);border-bottom:1.5px solid var(--jz-hair);font:500 var(--jz-t-meta)/1.3 var(--jz-sans);color:var(--jz-ink-2)}
#app .dz .dz-freeday b{font:600 var(--jz-t-body)/1.3 var(--jz-sans);color:var(--jz-ink)}
#app .dz .dz-freeday em{margin-left:auto;font-style:normal}
#app .dz .dz-freeday.is-today b{color:var(--jz-forest)}
#app .dz .dz-wstep+.dz-freeday,#app .dz .dz-rows+.dz-freeday{border-top:0}
#app .dz .dz-wstep+.dz-freeday{margin-top:var(--jz-s2)}
#app .dz .dz-rows+.dz-freeday{margin-top:var(--jz-s3)}
/* Q7b: an employee's read-only job sheet (diary/my_sheet.html): who and where on top, then each part under a quiet label
   with a hairline between; the safety notes carry the late edge so they are not missed. */
#app .dz .dz-mysheet{padding:0;overflow:hidden}
#app .dz .dz-mysheet>*{padding:18px 20px}
#app .dz .dz-mysheet>*+*{border-top:1.5px solid var(--jz-hair)}
#app .dz .dz-ms-who{display:flex;flex-direction:column;gap:4px}
#app .dz .dz-ms-who .jz-title{margin:0}
#app .dz .dz-mysheet h2{margin:0 0 6px;font:600 var(--jz-t-label)/1.2 var(--jz-sans);letter-spacing:.02em;color:var(--jz-ink-2)}
#app .dz .dz-mysheet p,#app .dz .dz-mysheet li{margin:0;font:500 var(--jz-t-body)/1.45 var(--jz-sans);color:var(--jz-ink)}
#app .dz .dz-ms-mats{margin:0;padding:0;list-style:none}
#app .dz .dz-ms-mats li+li{margin-top:6px}
#app .dz .dz-ms-mats .jz-num{display:inline-block;min-width:34px;font:800 18px/1 var(--jz-display);color:var(--jz-forest)}
#app .dz .dz-mysheet .dz-ms-time{display:flex;align-items:center;gap:8px;color:var(--jz-ink-2)}
#app .dz .dz-ms-time .jz-ic{width:20px;height:20px;flex:none}
#app .dz .dz-ms-sec.is-risk{box-shadow:inset var(--jz-late-bar) 0 0 var(--jz-late-edge),inset 0 var(--jz-band) 0 var(--jz-late-edge)}
#app .dz .dz-ms-sec.is-risk h2{color:var(--jz-late)}
/* Q7b: the team member's set-password page (accounts/team_welcome.html) wears the login's look (main.lg); only its
   headline is a sentence, so it is smaller than the login's word mark. */
#app main.lg.lg-welcome .lword{font-size:38px;line-height:1.05}
#app main.lg.lg-welcome .lg-to{width:100%;min-height:60px;margin-top:4px}
#app main.lg.lg-welcome .lhead p{margin:0;padding:0}