/* STORE-4 screen styles: assistant (pass 3, 31 Oct 2026)
   Assistant (assistant/home.html, draft.html, settings.html, _sentrow.html, _trow.html).
   Loaded on every app page after jeevz.css (core/templates/core/base.html), so every rule is scoped to .asst.
   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.
   Anatomy: drawn-chevron back link, large title, one status card whose switch IS the stop control, one count line,
   grouped rows that open a detail page. No borders: white surfaces on paper with a soft shadow, hairlines only between
   rows, inset to the text. Avatars come from contacts/_av.html (.avt, styled in inbox.css).
   Spec: streams/jeevz/app/docs/design-system.md, direction: design-review-2.md, lessons: design-learnings.md. */

/* ---- area frame: the same 20px gutter as Diary, Quotes and Inbox ---- */
.asst{--a-g:20px;--a-r:16px;--a-shadow:0 1px 2px rgba(23,33,29,.04),0 4px 16px -8px rgba(23,33,29,.10);--a-hair:var(--jz-hair);--a-chev:var(--jz-chev)}
main.asst:is(.pad,.body){padding:0 var(--a-g) var(--jz-s8)}
.asst .dock{padding-left:var(--a-g);padding-right:var(--a-g)}
.asst .ic{flex:none;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* ---- surfaces: one white surface per idea, no outlines ---- */
.asst :is(.setlist,.group,details.fold,.plainlinks,.card,.astatus,.leadc,.replybox){border:0;border-radius:var(--a-r);background:var(--jz-card);box-shadow:var(--a-shadow)}

/* ---- back link: drawn chevron + parent name, as in Diary ---- */
.asst .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}
.asst .crumb svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---- large title (34/800) and its one line ---- */
.asst .phead{display:block;padding:var(--jz-s5) 0 var(--jz-s5)}
.asst .crumb+.phead{padding-top:var(--jz-s1)}
.asst .phead h1.lt{margin:0;font:800 34px/40px var(--jz-sans);letter-spacing:-.03em;color:var(--jz-ink)}
.asst .phead .sub{display:block;margin:var(--jz-s1) 0 0;font:400 15px/1.4 var(--jz-sans);color:var(--jz-muted)}

/* ---- section headers: sentence case 13/600, inset to the card text ---- */
.asst .ahs{margin:var(--jz-s6) 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)}
.asst .ahs label{font:inherit;color:inherit}
.asst [id]{scroll-margin-top:calc(var(--jz-topbar) + var(--jz-safe-t) + 12px)}
.asst .note.under{margin:var(--jz-s2) 0 0;padding:0 var(--jz-s4);font:400 13px/18px var(--jz-sans);color:var(--jz-muted);text-align:left}
.asst .alert{margin:0 0 var(--jz-s4)}

/* ---- status card: icon tile, state, one line, the switch (the switch is the stop control) ---- */
.asst .astatus{margin:0;overflow:hidden}
.asst .srow{display:flex;align-items:center;gap:var(--jz-s3);min-height:80px;margin:0;padding:var(--jz-s4)}
.asst .srow .sic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--jz-r-icon);background:var(--jz-field);color:var(--jz-muted)}
.asst .astatus.is-on .sic{background:var(--jz-soft);color:var(--jz-forest)}
.asst .astatus.is-stopped .sic{background:var(--jz-red-soft);color:var(--jz-red)}
.asst .srow .st{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.asst .srow .st b{font:600 17px/22px var(--jz-sans);color:var(--jz-ink)}
.asst .astatus.is-stopped .st b{color:var(--jz-red)}
.asst .srow .st small{font:400 15px/20px var(--jz-sans);color:var(--jz-muted)}
/* a real button drawn as an iOS switch: one tap posts the form it sits in (kill when on, mode=auto when off) */
.asst button.aswitch{flex:none;position:relative;width:51px;height:31px;min-height:0;margin:0;padding:0;border:0;border-radius:999px;background:var(--jz-switch-off);box-shadow:none;cursor:pointer;transition:background var(--jz-ease)}
.asst button.aswitch::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.16);transition:transform var(--jz-ease)}
.asst button.aswitch.on{background:var(--jz-forest)}
.asst button.aswitch.on::after{transform:translateX(20px)}
.asst button.aswitch::before{content:"";position:absolute;inset:-9px -4px}
.asst button.aswitch:focus-visible{outline:3px solid var(--jz-forest);outline-offset:2px}

/* ---- one count line under the card, not three tiles ---- */
.asst .atally{margin:var(--jz-s3) var(--jz-s4) 0;font:400 15px/20px var(--jz-sans);color:var(--jz-muted);font-variant-numeric:tabular-nums}
.asst .atally a{color:inherit;text-decoration:none;font-weight:400}

/* ---- rows: avatar, name 17/600, one 15 muted line, chevron ---- */
.asst .group{margin:0;overflow:hidden}
.asst .group .row.arow{min-height:72px;padding:12px var(--jz-s4);gap:var(--jz-s3)}
.asst .group .row+.row::before{left:72px;background:var(--a-hair)}
.asst .arow::after{border-color:var(--a-chev)}
.asst .arow .rb{display:flex;flex-direction:column;flex:1;min-width:0;gap:2px}
.asst .arow .rb b{font:600 17px/22px var(--jz-sans);letter-spacing:-.01em;color:var(--jz-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.asst .arow .pv{font:400 15px/20px var(--jz-sans);color:var(--jz-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.asst .arow .pv.warn{white-space:normal;color:var(--jz-red);font-weight:500}
.asst .arow .urg{font-style:normal;font-weight:600;color:var(--jz-red)}
.asst .av.risk{flex:none;width:44px;height:44px;background:var(--jz-red-soft);color:var(--jz-red)}
.asst .arow .alert-ic{width:22px;height:22px}
.asst .allclear{margin:0 var(--jz-s4);font:400 15px/20px var(--jz-sans);color:var(--jz-muted)}
.asst .allclear b{color:var(--jz-ink);font-weight:600}
.asst .ahs+.allclear{margin-top:0}
.asst .group+.allclear,.asst p.allclear#needs{margin-top:var(--jz-s6)}

/* ---- sent today: row head, their reply bubble, two quiet verdicts ---- */
.asst .group .sentrow{position:relative;padding:var(--jz-s4)}
.asst .group .sentrow+.sentrow::before{content:"";position:absolute;top:0;left:var(--jz-s4);right:0;height:1px;background:var(--a-hair)}
.asst .sentrow .r1{display:flex;align-items:center;gap:var(--jz-s3)}
.asst .sentrow .r1 .rb{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.asst .sentrow .r1 b{font:600 17px/22px var(--jz-sans)}
.asst .sentrow .r1 small{font:400 13px/18px var(--jz-sans);color:var(--jz-muted)}
.asst .sentrow .tm{font:500 13px/1 var(--jz-sans);font-variant-numeric:tabular-nums;color:var(--jz-muted);align-self:flex-start;margin-top:4px}
.asst .sentrow .msg{display:block;margin:var(--jz-s3) 0 0 auto;max-width:88%}
.asst .sentrow .acts{gap:var(--jz-s2);margin-top:var(--jz-s3)}
.asst .sentrow .acts .btn.small{flex:1 1 0;border:0;background:var(--jz-field);color:var(--jz-ink);font-weight:600}
.asst .sentrow .plainlinks{margin:var(--jz-s1) 0 0;background:none;box-shadow:none;border-radius:0}
.asst .sentrow .plainlinks .btn.quiet{justify-content:center;min-height:48px;padding:0;border:0;color:var(--jz-red);font:600 15px/1.2 var(--jz-sans);text-decoration:none}

/* ---- settings folds and links: a tight stack, no outlines ---- */
.asst details.fold{margin:0 0 var(--jz-s2)}
.asst details.fold>summary{font:600 17px/22px var(--jz-sans);padding-left:var(--jz-s4)}
.asst details.fold>summary small{font:400 15px/20px var(--jz-sans)}
.asst details.fold>summary::after{content:"";width:8px;height:8px;border:solid var(--a-chev);border-width:2px 2px 0 0;transform:translateY(-70%) rotate(135deg);font:inherit;right:22px}
.asst details.fold[open]>summary::after{content:"";transform:translateY(-30%) rotate(-45deg)}
.asst details.fold[open]>:not(summary){padding-left:var(--jz-s4);padding-right:var(--jz-s4)}
.asst details.fold .note{font-size:15px}
.asst details.fold .seg{margin:var(--jz-s2) 0 0}
.asst details.fold .seg button{border:0;background:var(--jz-field);box-shadow:none;border-radius:var(--jz-r-m)}
.asst details.fold .seg button.on{background:var(--jz-card);box-shadow:inset 0 0 0 2px var(--jz-ink)}
.asst details.fold .group{box-shadow:none;background:var(--jz-paper);border-radius:var(--jz-r-m);margin:var(--jz-s3) 0}
.asst details.fold details.fold{box-shadow:none;background:var(--jz-paper);border-radius:var(--jz-r-m)}
.asst .plainlinks{margin:0 0 var(--jz-s4)}
.asst .plainlinks a{flex-wrap:wrap;align-content:center;row-gap:2px;column-gap:0;font:600 17px/22px var(--jz-sans);padding:12px 44px 12px var(--jz-s4);position:relative}
.asst .plainlinks a::after{position:absolute;right:24px;top:50%;margin-top:-5px;width:8px;height:8px;border-color:var(--a-chev)}
.asst .plainlinks a small{flex-basis:100%;font:400 15px/20px var(--jz-sans);color:var(--jz-muted)}
.asst .plainlinks .val{position:absolute;right:44px;font:400 17px/22px var(--jz-sans)}

/* ---- training progress rows (inside the fold) ---- */
.asst .group:not(:has(.row,.sentrow)){display:none}
.asst .group .trow{flex-wrap:wrap;align-items:center;padding:14px var(--jz-s4);border-bottom:0;background:none}
.asst .group .trow:active{background:none}
.asst .group .trow+.trow::before{left:var(--jz-s4)}
.asst .trow .r1{align-items:center;gap:var(--jz-s2)}
.asst .trow .r1 b{font:600 17px/22px var(--jz-sans)}
.asst .trow .prog{margin:8px 0 4px}
.asst .trow small{font-size:13px}
.asst .trow .mono{font-family:var(--jz-sans);font-variant-numeric:tabular-nums}
.asst .trow>form,.asst .trow>details{flex:none;align-self:center}
.asst .trow .btn.small{border:0;background:var(--jz-card);box-shadow:0 1px 2px rgba(23,33,29,.1);font-weight:600}
.asst details.allow>summary{list-style:none}
.asst details.allow>summary::-webkit-details-marker{display:none}
.asst details.allow[open]{flex:1 1 100%;align-self:stretch}
.asst details.allow .when-open,.asst details.allow[open] .when-closed{display:none}
.asst details.allow[open] .when-open{display:inline}
.asst details.allow .confirm .note{margin:var(--jz-s3) 0}
.asst details.allow .confirm .btn{min-height:var(--jz-btn);height:auto;padding:14px 20px;line-height:1.3;text-align:left;white-space:normal}

/* ---- home: the settings rows as one grouped list ---- */
.asst .setlist{margin:0 0 var(--jz-s4);overflow:hidden}
.asst .setlist>details.fold,.asst .setlist>.plainlinks{position:relative;margin:0;border-radius:0;box-shadow:none;background:none}
.asst .setlist>*+*::before{content:"";position:absolute;top:0;left:var(--jz-s4);right:0;height:1px;background:var(--a-hair);z-index:1}
.asst .setlist>details.fold>summary{min-height:68px}
.asst .setlist .plainlinks a{min-height:68px}

/* ---- draft page: who, their bubble, your editable bubble, one tray ---- */
.asst.adraft .phead.who{display:flex;align-items:center;gap:var(--jz-s3);padding:var(--jz-s3) 0 var(--jz-s2)}
.asst .avt.lg,.asst .av.lg{width:52px;height:52px;font-size:19px}
.asst .av.lg .ic{width:24px;height:24px}
.asst .whot{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.asst.adraft .whot h1{margin:0;font:700 22px/28px var(--jz-sans);letter-spacing:-.02em;color:var(--jz-ink);text-align:left}
.asst.adraft .whot .sub{margin:0;font:400 15px/20px var(--jz-sans);color:var(--jz-muted);font-variant-numeric:tabular-nums}
.asst .astate{margin:var(--jz-s2) 0 0;padding:0 var(--jz-s4);font:400 15px/20px var(--jz-sans);color:var(--jz-muted)}
.asst.adraft .alert{margin:var(--jz-s3) 0 0}
.asst.adraft .ahs{margin-top:var(--jz-s5)}
.asst.adraft .theirs{margin:0;padding:12px 16px;max-width:88%;width:fit-content;box-sizing:border-box;background:var(--jz-card);box-shadow:var(--a-shadow);border-radius:20px 20px 20px 6px;font:400 17px/24px var(--jz-sans);color:var(--jz-ink)}
.asst .leadc{display:flex;flex-direction:column;margin:0;padding:var(--jz-s4)}
.asst .leadc .lt{margin:0 0 var(--jz-s2);font:700 20px/26px var(--jz-sans);letter-spacing:-.015em;color:var(--jz-ink)}
.asst .leadc .kv{display:flex;flex-direction:column;gap:2px;padding:var(--jz-s3) 0;border-top:1px solid var(--a-hair)}
.asst .leadc .kv span{font:500 13px/18px var(--jz-sans);color:var(--jz-muted)}
.asst .leadc .kv p{margin:0;font:400 17px/24px var(--jz-sans);color:var(--jz-ink)}
.asst .leadc .kv:last-child{padding-bottom:0}
.asst .leadc .ex{margin:var(--jz-s2) 0 0;font-size:15px;color:var(--jz-muted)}
/* your reply: a mint bubble on the right, editable in place, no border, focus ring only */
.asst textarea.draftbox.mine{display:block;width:100%;box-sizing:border-box;min-height:96px;margin:0;padding:14px 16px;border:0;border-radius:20px 20px 6px 20px;background:var(--jz-soft);font:400 17px/24px var(--jz-sans);color:var(--jz-ink);resize:none;box-shadow:none;field-sizing:content;outline:0}
.asst textarea.draftbox.mine:focus{box-shadow:0 0 0 2px var(--jz-forest)}
.asst .replybox{margin:0;padding:4px}
.asst .replybox textarea.draftbox{display:block;width:100%;box-sizing:border-box;min-height:168px;margin:0;padding:12px 14px;border:0;border-radius:12px;background:var(--jz-card);font:400 17px/24px var(--jz-sans);color:var(--jz-ink);resize:none;box-shadow:none;field-sizing:content}
.asst .replybox:focus-within{box-shadow:0 0 0 2px var(--jz-forest),var(--a-shadow)}
.asst .replybox textarea.draftbox:focus{outline:0}
.asst #ca-draft-note:empty{display:none}
.asst .opencta{display:flex;width:100%;margin:var(--jz-s5) 0 0;border:0;background:var(--jz-card);box-shadow:var(--a-shadow);font-weight:600}
.asst .sentmsg{display:block;max-width:100%;margin:0;padding:14px 16px;border-radius:20px 20px 6px 20px;font:400 17px/24px var(--jz-sans)}
/* the tray: Reject (1) and the gradient main action (2) on one line, 12px apart */
.asst .dock.tray{display:grid;grid-template-columns:1fr 2fr;gap:12px;align-items:stretch}
.asst .dock.tray>form{display:flex;margin:0}
.asst .dock.tray .btn{width:100%;min-height:var(--jz-btn);margin:0;justify-content:center}
.asst .dock.tray .rejectbtn{pointer-events:auto;background:var(--jz-card);color:var(--jz-red);border:0;font:600 17px/1.2 var(--jz-sans);text-decoration:none;box-shadow:0 1px 2px rgba(23,33,29,.06),0 6px 18px -10px rgba(23,33,29,.25)}
.asst .dock.tray .rejectbtn:active{background:var(--jz-red-soft)}

/* ---- pass 3 polish: one soft alert, breathing room under their bubble ---- */
.asst .alert{border:0;border-radius:var(--a-r);box-shadow:none}
.asst.adraft :is(.theirs,.leadc)+.note.under{margin-top:var(--jz-s3)}

/* ---- pass 5 (31 Oct art notes) ---- */
/* the stop is spelled out: a red text row under the switch while Auto is on, posting to the same kill URL */
.asst .stoprow{position:relative;margin:0}
.asst .stoprow::before{content:"";position:absolute;top:0;left:var(--jz-s4);right:0;height:1px;background:var(--a-hair)}
.asst .stoprow .stopall{display:flex;align-items:center;gap:var(--jz-s3);width:100%;min-height:52px;margin:0;padding:0 var(--jz-s4);border:0;border-radius:0;background:none;box-shadow:none;font:600 17px/22px var(--jz-sans);color:var(--jz-red);text-align:left;cursor:pointer}
.asst .stoprow .stopall:active{background:var(--jz-red-soft)}
.asst .stoprow .sq{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:20px}
.asst .stoprow .sq::before{content:"";width:12px;height:12px;border-radius:3px;background:currentColor}
/* rows: name and time on one line */
.asst .arow .rb .rt{display:flex;flex-direction:row;align-items:baseline;gap:var(--jz-s2);min-width:0}
.asst .arow .rt b{flex:1;min-width:0}
.asst .arow .rt .tm{flex:none;font:400 15px/20px var(--jz-sans);color:var(--jz-muted);font-variant-numeric:tabular-nums}
/* a danger case is always first, red-tinted, and can't be missed */
/* (pass 6) the danger row is a white row like the rest: red triangle tile + the red 999 line, no fill */
.asst .group .row.arow.risk .rt .tm{color:var(--jz-red)}
.asst .ahs+.allclear{margin-top:0}
.asst .ahs+.allclear,.asst .ahs+.group+.note.under{color:var(--jz-muted)}

/* draft: your bubble says it can be changed (pencil + forest hint), the safety line sits on the tray */
.asst .mybub{position:relative}
.asst .mybub textarea.draftbox.mine{padding-right:44px}
.asst .mybub .pen{position:absolute;right:14px;bottom:14px;width:20px;height:20px;color:var(--jz-forest);opacity:.75;pointer-events:none}
.asst .mybub:focus-within .pen{opacity:0}
.asst .edithint{display:block;margin:var(--jz-s2) 0 0;padding:0 var(--jz-s4);font:400 15px/20px var(--jz-sans);color:var(--jz-muted);text-align:right;cursor:text}
.asst .edithint b{font-weight:600;color:var(--jz-forest)}
.asst .dock.tray>.safe{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:6px;margin:0 0 -4px;padding:0;font:500 13px/18px var(--jz-sans);color:var(--jz-muted);text-align:center}
.asst .dock.tray>.safe::before{flex:none;margin:0;vertical-align:0}
body:has(.asst .dock.tray>.safe) #app{padding-bottom:calc(var(--jz-tabbar) + var(--jz-safe-b) + var(--jz-btn) + 2*var(--jz-dock-gap) + 52px)}

/* training questions: settings rows. Each answer is one row (name, value under it, chevron); tap opens it to edit in place */
.asst .eds{margin-bottom:var(--jz-s6)}
.asst .eds>details.ed{position:relative;margin:0}
.asst details.ed>summary{position:relative;display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:60px;box-sizing:border-box;padding:10px 44px 10px var(--jz-s4);list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.asst details.ed>summary::-webkit-details-marker{display:none}
.asst details.ed>summary:active{background:var(--jz-field)}
.asst details.ed>summary::after{content:"";position:absolute;right:22px;top:50%;width:7px;height:7px;margin-top:-5px;border:solid var(--a-chev);border-width:2px 2px 0 0;transform:rotate(45deg);transition:transform var(--jz-ease)}
.asst details.ed[open]>summary::after{transform:rotate(135deg);margin-top:-7px}
.asst details.ed .k{font:400 17px/22px var(--jz-sans);color:var(--jz-ink)}
.asst details.ed .v{font:400 15px/20px var(--jz-sans);color:var(--jz-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.asst details.ed .v.unset{color:var(--jz-faint)}
.asst details.ed[open] .v{display:none}
.asst details.ed[open]>summary .k{font-weight:600}
.asst details.ed .edb{display:flex;flex-direction:column;gap:var(--jz-s2);padding:0 var(--jz-s4) var(--jz-s4)}
.asst #app .eds textarea,.asst .eds .edb textarea{display:block;width:100%;box-sizing:border-box;min-height:48px;margin:0;padding:12px 14px;border:0;border-radius:12px;background:var(--jz-card);box-shadow:inset 0 0 0 1px rgba(23,33,29,.16);font:400 17px/24px var(--jz-sans);color:var(--jz-ink);resize:none;field-sizing:content;overflow:hidden;overflow-wrap:anywhere}
.asst .eds .edb textarea:focus{outline:0;box-shadow:inset 0 0 0 2px var(--jz-forest)}
.asst .eds .edb textarea::placeholder{color:var(--jz-faint);opacity:1}
.asst .eds .edb small{font:400 13px/18px var(--jz-sans);color:var(--jz-muted)}
.asst .eds .edb label{display:flex;flex-direction:column;gap:4px;margin:0}
.asst .eds .edb .fl{font:600 13px/18px var(--jz-sans);color:var(--jz-muted)}
.asst .faqs details.ed .k{font-weight:600}
.asst .faqs details.ed.new .k.add{display:flex;align-items:center;gap:var(--jz-s2);font-weight:600;color:var(--jz-forest)}
.asst .faqs details.ed.new .k.add .ic{width:20px;height:20px;stroke-width:2.25}
.asst .faqs details.ed.new>summary::after{content:none}
/* the call-out switch and the pickers sit as plain rows in the same group */
.asst .eds>.jz-row{min-height:56px}
.asst .eds>.jz-row.swrow{cursor:pointer}
#app .asst .eds>.jz-row.swrow>.k{max-width:none;flex:1}
.asst .eds .swrow input.switch{flex:none;width:51px;height:31px}
.asst .eds .swrow input.switch::after{top:2px;left:2px;width:27px;height:27px}
.asst .eds .swrow input.switch:checked::after{transform:translateX(20px)}
.asst.aset .jz-foot{margin-top:calc(-1 * var(--jz-s4))}
.asst .eds>details.ed.faq{padding:0;border:0}
/* set values in ink, grey only for what isn't set */
.asst details.ed:not(.faq) .k{font-weight:500}
.asst details.ed .v:not(.unset){color:var(--jz-ink)}
.asst .faqs details.ed .v:not(.unset){color:var(--jz-ink);opacity:.8}

/* ---- pass 6 (1 Nov art notes) ---- */
/* counts live in the section headers ("Needs you 3"), so there is no loose count line between cards */
.asst .ahs{display:flex;align-items:baseline;gap:6px}
.asst .ahs .ahn{font:600 13px/18px var(--jz-sans);color:var(--jz-ink);font-variant-numeric:tabular-nums}
/* the stop row carries weight: a red icon tile lined up with the status tile, a bold red line and what it does */
.asst .stoprow .stopall{min-height:72px;padding:12px var(--jz-s4)}
.asst .stoprow .sq{width:44px;height:44px;border-radius:var(--jz-r-icon);background:var(--jz-red-soft)}
.asst .stoprow .sq::before{width:14px;height:14px}
.asst .stoprow .st{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.asst .stoprow .st b{font:600 17px/22px var(--jz-sans);color:var(--jz-red)}
.asst .stoprow .st small{font:400 15px/20px var(--jz-sans);color:var(--jz-muted)}
/* a row's reason is a small coloured word, then the customer's own words (as the Inbox "Draft ready") */
.asst .arow .atag{font:600 15px/20px var(--jz-sans)}
.asst .arow .atag::after{content:"\00b7";margin:0 6px;font-weight:400;color:var(--jz-muted)}
.asst .arow .atag.is-ok{color:var(--jz-forest)}
.asst .arow .atag.is-due{color:var(--jz-amber)}
.asst .arow .atag.is-risk{color:var(--jz-red)}
/* art director judge 1: a danger row shows what they wrote; the red label takes room, so the words get a second line */
.asst .group .row.arow.risk .pv{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;text-overflow:ellipsis}
/* two-line status text breaks evenly, never one orphan word on its own line */
.asst :is(.srow,.stoprow) .st small{text-wrap:pretty}
/* the draft's state word sits on the same baseline and size as the reason after it */
#app .asst .astate .jz-st{display:inline;font-size:inherit;line-height:inherit;vertical-align:baseline}
#app .asst .astate .jz-st::before{display:inline-block;vertical-align:1px;margin-right:6px}

/* ---- re-check 1 Nov: an approved reply to copy, and the "answer it yourself" page ---- */
.asst #final-copy-note:empty{display:none}
.asst .dock.tray a.btn.ghost{display:flex;align-items:center;pointer-events:auto;background:var(--jz-card);color:var(--jz-ink);border:0;font:600 17px/1.2 var(--jz-sans);text-decoration:none;box-shadow:0 1px 2px rgba(23,33,29,.06),0 6px 18px -10px rgba(23,33,29,.25)}
#app .asst.adraft .ado{margin-top:var(--jz-s3)}

/* ---- judge 4 (1 Nov): the "needs you" draft page ---- */
/* why it is yours: one white row, amber tile, what it is (17/600) and why (15 muted). Replaces the amber dot sentence */
.asst .areason{display:flex;align-items:center;gap:var(--jz-s3);margin:var(--jz-s3) 0 0;padding:14px var(--jz-s4);border-radius:var(--a-r);background:var(--jz-card);box-shadow:var(--a-shadow)}
.asst .areason .rtile{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--jz-r-icon);background:var(--jz-amber-soft);color:var(--jz-amber)}
#app .asst .areason .rt{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left}
.asst .areason .rt b{font:600 17px/22px var(--jz-sans);color:var(--jz-ink);text-wrap:pretty}
.asst .areason .rt small{font:400 15px/20px var(--jz-sans);color:var(--jz-muted);text-wrap:pretty}
/* a Checkatrade lead is their message: the thread's bubble, title bold, the job under it, postcode as a chip */
.asst.adraft .theirs.leadb{display:flex;flex-direction:column;gap:4px}
.asst .theirs.leadb .lt{font:600 17px/24px var(--jz-sans);color:var(--jz-ink)}
.asst .theirs.leadb p{margin:0}
.asst .theirs.leadb .ex{font-size:15px;color:var(--jz-muted)}
.asst .lchips{display:flex;gap:var(--jz-s2);margin:var(--jz-s2) 0 0}
.asst .lchip{display:inline-flex;align-items:center;gap:4px;min-height:28px;padding:0 10px 0 8px;border-radius:999px;background:var(--jz-field);font:600 13px/1 var(--jz-sans);color:var(--jz-ink);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.asst .lchip .ic{width:16px;height:16px;color:var(--jz-muted)}
#app .asst.adraft .ado{margin-top:var(--jz-s5)}
/* the tray: Call and I've answered side by side (1:1). Call is white; when it could be dangerous Call is the forest one */
.asst .dock.tray.duo{grid-template-columns:1fr 1fr}
.asst .dock .btn.callbtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:var(--jz-btn);margin:0;pointer-events:auto;text-decoration:none;font:600 17px/1.2 var(--jz-sans)}
.asst .dock .btn.callbtn .ic{width:22px;height:22px}
.asst .dock.tray.duo:not(.risk) .callbtn,.asst .dock.tray.duo.risk button.btn{background:var(--jz-card);color:var(--jz-forest);border:0;box-shadow:0 1px 2px rgba(23,33,29,.06),0 6px 18px -10px rgba(23,33,29,.25)}
.asst .dock.tray.duo.risk button.btn{color:var(--jz-ink)}

/* ---- judge 4 (1 Nov): Assistant home and How Jeevz answers ---- */
/* art director J2: the 28px fade cut words mid-letter; names and previews end in "..." (the base rules above, .jz-1line) */
/* the stop row's line fits one line at 390px */
.asst .stoprow .st small{font-size:14px;letter-spacing:-.01em;white-space:nowrap}
/* answers owners most need to check are shown whole, wrapped, never cut with "..." */
#app .asst details.ed .v{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;text-wrap:pretty}
#app .asst details.ed[open] .v{display:none}
/* scroll room: the Save tray plus the Dock plus 16, so the last section clears it */
body:has(main.asst.aset) #app{padding-bottom:calc(var(--jz-tabbar) + var(--jz-safe-b) + var(--jz-btn) + 2*var(--jz-dock-gap) + 16px)}

/* ---- judge 4 (1 Nov): Your tools (core/tools.html, main.tools). "Use the usual tools" is an action row ---- */
#app main.tools .tl-usual{margin-top:var(--jz-s4)}
#app main.tools .tl-usual button.jz-go{width:100%;margin:0;border:0;border-radius:inherit;background:none;box-shadow:none;font:inherit;text-align:left;cursor:pointer}
#app main.tools .tl-usual button.jz-go:active{background:var(--jz-field)}
#app main.tools .tl-usual .jz-go-t b{color:var(--jz-forest)}
/* art director judge 1: the usual row leads the page; its list of names is the footnote under it, then a clear gap */
#app main.tools .usual{margin-bottom:var(--jz-s6)}

/* ======================================================================================================================
   Assistant: Fresh light and Night (6 Nov rebuild). The markup and its behaviour are unchanged (tests pin them); these
   rules move the screens onto the redesign's parts and role tokens, so both looks follow: Cabinet titles and section
   heads like .jz-sechead, 28px cards with the 1.5px edge, the customer's words as a paper bubble, Jeevz's draft on
   the wash, and the tray as one floating shell (Reject or Call, then the main action) as in the Inbox thread.
   ====================================================================================================================== */
#app .asst .jz-lt h1,#app .asst.adraft .whot h1{font:800 34px/1.05 var(--jz-display);letter-spacing:-.025em;color:var(--jz-ink)}
#app .asst.adraft .whot .sub{font:500 16px/1.35 var(--jz-sans);color:var(--jz-ink-2)}
#app .asst .ahs{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);color:var(--jz-ink)}
#app .asst .ahs .ahn{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 8px;box-sizing:border-box;border-radius:var(--jz-r-full);background:var(--jz-surface-2);font:700 15px/1 var(--jz-sans);color:var(--jz-ink)}
#app .asst.adraft .ahs{margin-top:var(--jz-s6)}
/* cards: the redesign's card, one rule for every surface on these screens */
#app .asst :is(.astatus,.group,.areason,.setlist>details.fold,.plainlinks>a,.jz-group){border-radius:var(--jz-r-card);background:var(--jz-surface);box-shadow:var(--jz-shadow)}
#app .asst .areason .rtile{border-radius:16px;background:var(--jz-late-fill);color:var(--jz-on-late)}
#app .asst .areason .rt b{font:700 18px/1.25 var(--jz-sans)}
#app .asst .areason .rt small{font:500 var(--jz-t-meta)/1.35 var(--jz-sans);color:var(--jz-ink-2)}
#app .asst .row .rb b,#app .asst .rt b{font-weight:700}
/* their words: a paper bubble, bigger, with a tail top left (as the thread's big message) */
#app .asst.adraft .theirs{max-width:100%;width:auto;padding:18px 20px;border-radius:8px var(--jz-r-card) var(--jz-r-card) var(--jz-r-card);background:var(--jz-surface);box-shadow:var(--jz-shadow);color:var(--jz-ink);font:500 19px/1.42 var(--jz-sans)}
#app .asst .theirs.leadb .lt{font:700 20px/1.3 var(--jz-sans)}
#app .asst .theirs.leadb .ex{font-size:var(--jz-t-meta);color:var(--jz-ink-2)}
#app .asst .lchip{min-height:36px;padding:0 14px 0 11px;border-radius:var(--jz-r-full);background:var(--jz-surface-2);color:var(--jz-ink);font:600 15px/1 var(--jz-sans)}
/* Jeevz's draft: the wash, the owner's words to change; the pencil says so */
#app .asst textarea.draftbox.mine{min-height:150px;padding:18px 20px;border-radius:var(--jz-r-card) var(--jz-r-card) 8px var(--jz-r-card);background:var(--jz-wash);box-shadow:inset 0 0 0 1.5px var(--jz-wash-edge);color:var(--jz-ink);font:500 19px/1.42 var(--jz-sans)}
#app .asst textarea.draftbox.mine:focus{box-shadow:inset 0 0 0 2.5px var(--jz-forest)}
#app .asst .mybub .pen{color:var(--jz-forest);opacity:1}
#app .asst .edithint{font:500 var(--jz-t-meta)/1.35 var(--jz-sans);color:var(--jz-ink-2)}
#app .asst .note.under{font:500 var(--jz-t-meta)/1.4 var(--jz-sans);color:var(--jz-ink-2)}
#app .asst.adraft .msg.out.sentmsg{max-width:100%;padding:18px 20px;border-radius:var(--jz-r-card) var(--jz-r-card) 8px var(--jz-r-card);background:var(--jz-wash);color:var(--jz-ink);font:500 19px/1.42 var(--jz-sans)}
/* the tray: one floating shell, like the thread's reply tray */
#app .asst .dock.tray{margin:0;padding:12px;background:var(--jz-bar-solid);border-radius:32px;box-shadow:var(--jz-shadow-2);-webkit-backdrop-filter:none;backdrop-filter:none;left:50%;width:calc(100% - 2 * var(--jz-gutter));max-width:390px}
#app .asst .dock.tray::before{content:none}
#app .asst .dock.tray>.safe{margin:0 0 2px;font:500 var(--jz-t-meta)/1.3 var(--jz-sans);color:var(--jz-ink-2)}
#app .asst .dock.tray .btn{background-image:none;min-height:var(--jz-btn-l);border-radius:var(--jz-r-btn);font:600 18px/1.1 var(--jz-sans)}
#app .asst .dock.tray .rejectbtn,#app .asst .dock.tray a.btn.ghost,#app .asst .dock.tray.duo:not(.risk) .callbtn,#app .asst .dock.tray.duo.risk button.btn{background:transparent;color:var(--jz-ink);box-shadow:inset 0 0 0 2px var(--jz-btn2-ring)}
#app .asst .dock.tray .rejectbtn{color:var(--jz-danger);box-shadow:inset 0 0 0 2px var(--jz-danger)}
#app .asst .dock.tray.duo.risk .callbtn{background:var(--jz-danger-fill);color:var(--jz-on-danger);box-shadow:var(--jz-shadow-danger)}
#app .asst .dock.tray:not(.duo) .btn:not(.rejectbtn):not(.ghost):not(.is-send){background:var(--jz-forest);color:var(--jz-on-forest)}
body:has(.asst .dock.tray) #app{padding-bottom:calc(var(--jz-tabbar) + var(--jz-safe-b) + var(--jz-btn-l) + 2*var(--jz-dock-gap) + 72px)}
/* the danger line on the draft page: the redesign's danger fill, words on it */
#app .asst.adraft .alert[role=alert]{padding:16px 18px;border:0;border-radius:var(--jz-r-card);background:var(--jz-danger-fill);color:var(--jz-on-danger);font:600 17px/1.4 var(--jz-sans);box-shadow:var(--jz-shadow-danger)}
#app .asst.adraft .alert[role=alert] strong{display:block;margin-bottom:4px;font:800 24px/1.1 var(--jz-display)}
#app .asst .av.risk{background:var(--jz-chip-danger);color:var(--jz-on-chip-danger)}
/* Assistant home: the status card's switch and the stop row read the role tokens */
#app .asst .atag.is-due{color:var(--jz-late)}
#app .asst .atag.is-risk{color:var(--jz-danger)}
#app .asst .atag.is-ok{color:var(--jz-forest)}
#app .asst .dock.tray{z-index:31;bottom:calc(var(--jz-tabbar) + var(--jz-safe-b) + 10px)}
#app .asst .dock.tray .btn{white-space:nowrap}
#app .asst .dock{z-index:31}

/* ===================== Q7c (6 Nov): both looks, checked at night =====================
   Avatars: the redesign's row avatar (an inner-panel circle, ink initials), not the old pastel tiles that glowed at night. */
#app .asst .avt{background:var(--jz-surface-2);color:var(--jz-ink);font:700 18px/1 var(--jz-display)}
#app .asst .avt.lg{font-size:20px}
/* the draft page's danger card: a phone tile, then the line in big type (the stray "!" bubble is gone) */
#app .asst.adraft .alert.adanger{display:block;padding:18px 20px 20px}
#app .asst.adraft .alert.adanger::before{content:none}
#app .asst.adraft .adanger-ic{display:grid;place-items:center;width:48px;height:48px;margin:0 0 14px;border-radius:50%;background:var(--jz-danger-call);color:var(--jz-on-danger-call)}
#app .asst.adraft .adanger-ic .jz-ic{width:22px;height:22px}
#app .asst.adraft .alert.adanger strong{margin-bottom:6px;font:800 28px/1.08 var(--jz-display);letter-spacing:-.02em}
/* Assistant home settings: one card holding both folds, hairline between (they were two cards with a clipped edge) */
#app .asst .setlist{border-radius:var(--jz-r-card);background:var(--jz-surface);box-shadow:var(--jz-shadow);overflow:hidden}
#app .asst .setlist>details.fold{border-radius:0;background:none;box-shadow:none}
#app .asst .setlist>*+*::before{left:18px;right:18px;height:1.5px;background:var(--jz-hair)}
/* "How Jeevz answers": the row is the card; its holder stays plain, so the card's edge isn't clipped at the top */
#app .asst .plainlinks{overflow:visible;background:none;box-shadow:none;border-radius:0}
#app .asst .plainlinks>a{min-height:72px}