/* Screen styles: Jobs (jobs/pipeline.html + _row.html), the job card (jobs/card.html + _tools.html) and New job
   (jobs/new.html). 6 Nov rebuild, step 3a. Mockups: docs/redesign/{light,night}/jobs.html and job.html.
   Built from the shared components (jeevz.css 40-59: .jz-danger, .jz-hero, .jz-stages, .jz-latecard, .jz-list/.jz-li,
   .jz-chip, .jz-btn, .jz-card, .jz-field, .jz-lock). This kit only lays them out. Every rule is scoped to main.jb
   (Jobs), main.jc (job card) or main.jn (New job), and every colour is a role token, so both looks follow with no
   second rule. Linked from those three templates. */

/* ================= Jobs ================= */
#app main.jb{padding:0 var(--jz-gutter) var(--jz-s8)}
#app .jb-head{margin:var(--jz-s4) 0 var(--jz-s4)}
#app .jb-head h1{font-size:40px;font-weight:800;line-height:1}
#app .jb-head .jz-sub{margin-top:6px;font:600 var(--jz-t-meta)/1.3 var(--jz-sans);color:var(--jz-ink-2)}
#app .jb-links{display:flex;gap:8px;margin:calc(-1 * var(--jz-s2)) 0 var(--jz-s4)}
#app .jb-links .jz-chip{min-height:48px;padding:0 18px 0 14px;text-decoration:none}
#app .jb-links .jz-chip svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* the danger card, compact: who, their words and the wait, with a round Call on the right */
#app .jb-dz{display:flex;align-items:center;gap:12px;padding:14px 12px 14px 18px}
#app .jb-dz-open{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;color:inherit;text-decoration:none}
#app .jb-dz .jz-danger-eye{font-size:16px;gap:8px}
#app .jb-dz .jz-ping{width:30px;height:30px}
#app .jb-dz .jz-ping .jz-ic{width:16px;height:16px}
#app .jb-dz-name{margin-top:4px;font:800 24px/1.1 var(--jz-display);letter-spacing:-.015em}
#app .jb-dz-say{font:500 16px/1.3 var(--jz-sans)}
#app .jb-dz-call{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:var(--jz-r-btn);background:var(--jz-danger-call);color:var(--jz-on-danger-call);box-shadow:0 10px 22px -12px rgba(0,0,0,.45)}
#app .jb-dz-call .jz-ic{width:26px;height:26px;stroke-width:2.4}

/* money in play, then the stages in one card */
#app .jb-hero{margin:var(--jz-s6) var(--jz-s1) var(--jz-s4)}
#app .jb-hero .jz-hero-n small{font-size:24px}
#app .jb-stages{padding:18px 8px 14px}
#app .jb-stages .jz-stages{margin:0}
#app .jb-stages .jz-stage-c{box-shadow:none;background:var(--jz-surface-2)}
#app .jb-stages .jz-stage.is-zero .jz-stage-c{background:transparent}
#app .jb-stages .jz-stage.is-late .jz-stage-c{background:var(--jz-late-fill)}
#app .jb-stages .jz-stage.is-paid .jz-stage-c{background:var(--jz-done)}
#app .jb-stages-note{margin:8px 10px 0;text-align:center}
#app .jb-latekey{display:inline-flex;align-items:center;gap:4px;color:var(--jz-late);font-weight:600}
#app .jb-latekey .jz-ic{width:16px;height:16px;stroke-width:2.4}

/* Do first: a late card per overdue chase (amber edge in light, amber band at night) */
#app .jb-first{display:block;color:var(--jz-ink)}
#app .jb-first .jz-amt{font-size:40px;color:var(--jz-ink)}
#app .jb-first .jz-title{display:block}
#app .jb-first .jz-meta{display:block;margin-top:4px}
#app .jb-first-ask{display:block;margin-top:14px}

/* the stage lists */
#app main.jb .jsec{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:var(--jz-s7) var(--jz-s1) var(--jz-s3)}
#app main.jb .jsec>span{font:700 var(--jz-t-h2)/1.1 var(--jz-display);letter-spacing:var(--jz-track-h2);color:var(--jz-ink)}
#app main.jb .jsec .cnt{margin-left:4px;font:600 var(--jz-t-meta)/1 var(--jz-sans);letter-spacing:0;color:var(--jz-ink-2);font-variant-numeric:tabular-nums}
#app main.jb .jsec small{font:600 var(--jz-t-meta)/1.2 var(--jz-sans);color:var(--jz-ink-2);font-variant-numeric:tabular-nums}
#app .jb-list{margin-bottom:0}
#app .jb-row{align-items:center}
#app .jb-row .jz-li-t b{font-size:18px}
#app .jb-row .jb-who{display:block;margin-top:2px;font:500 var(--jz-t-meta)/1.4 var(--jz-sans);color:var(--jz-ink-2)}
#app .jb-row .jb-who>*{display:inline}
#app .jb-row .jb-who>*::before{content:"\00b7";margin:0 6px;color:var(--jz-ink-2);font-weight:500}
#app .jb-row .due.jdraft{font:inherit;color:inherit}
#app .jb-next.is-late{color:var(--jz-late);font-weight:700;white-space:nowrap}
#app .jb-next.is-on{color:var(--jz-forest);font-weight:600}
#app .jb-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:8px}
#app .jb-chips .jz-chip.is-j .jz-mark{width:24px;height:24px}
#app .jb-wait{display:inline-flex;align-items:center;gap:4px;font:700 var(--jz-t-meta)/1 var(--jz-sans);color:var(--jz-late);font-variant-numeric:tabular-nums}
#app .jb-wait .jz-ic{width:16px;height:16px;stroke-width:2.4}
#app .jb-live{width:9px;height:9px;border-radius:50%;background:var(--jz-forest);box-shadow:0 0 0 0 var(--jz-forest);animation:jb-live 2s var(--jz-ease-out) infinite}
@keyframes jb-live{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--jz-forest) 50%,transparent)}100%{box-shadow:0 0 0 8px transparent}}
#app .jb-none{margin:0 var(--jz-s1);font:500 var(--jz-t-meta)/1.4 var(--jz-sans);color:var(--jz-ink-2)}
#app .jb-lost>summary{list-style:none;cursor:pointer;min-height:48px;align-items:center}
#app .jb-lost>summary::-webkit-details-marker{display:none}
#app .jb-lost>summary small{color:var(--jz-forest)}
#app .jb-lost[open]>summary small{visibility:hidden}
#app .jb-foot{margin:var(--jz-s6) var(--jz-s1) 0;font:500 var(--jz-t-meta)/1.4 var(--jz-sans);color:var(--jz-ink-2)}

@media (prefers-reduced-motion:reduce){#app .jb-live{animation:none}}
/* the overdue stage's clock badge: always a light coin with the rust clock, so it reads on both grounds */
#app .jb-stages .jz-stage.is-late .jz-stage-c::after{background-color:#fffaf3}

/* ================= The job card ================= */
#app main.jc{padding:0 var(--jz-gutter) var(--jz-s8)}
#app main.jc .jz-lt{margin-bottom:var(--jz-s4)}
#app main.jc .jline>*+*::before{content:"\00b7";margin:0 6px}
#app main.jc .jline{font:500 var(--jz-t-meta)/1.35 var(--jz-sans);color:var(--jz-ink-2)}
#app .jc-dz{margin-bottom:14px}

/* the hero: stage chip, the job's £ (Cabinet 800), then the track New > Contacted > Quoted > Won > Paid */
#app .jc-hero{padding:20px 20px 18px}
#app .jc-amt{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:16px 0 6px}
#app .jc-amt .jz-num{font-size:76px;line-height:.9}
#app .jc-noprice{margin:16px 0 8px;font:700 28px/1.1 var(--jz-display);color:var(--jz-ink-2)}
#app .jc-track{display:flex;gap:0;margin:16px 0 0;padding:0;list-style:none}
#app .jc-track li{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px;font:600 var(--jz-t-label)/1.15 var(--jz-sans);color:var(--jz-ink-2);text-align:center}
#app .jc-track li::before{content:"";position:absolute;top:17px;left:-50%;right:50%;height:3px;background:var(--jz-edge);z-index:0}
#app .jc-track li:first-child::before{content:none}
#app .jc-track li.done::before,#app .jc-track li.now::before{background:var(--jz-forest)}
#app .jc-track li>i{position:relative;z-index:1;display:grid;place-items:center;width:36px;height:36px;box-sizing:border-box;border-radius:50%;background:var(--jz-surface-2);box-shadow:inset 0 0 0 2px var(--jz-edge)}
#app .jc-track li.done>i{background:var(--jz-forest);color:var(--jz-on-forest);box-shadow:none}
#app .jc-track li.done>i .jz-ic{width:18px;height:18px;stroke-width:2.8}
#app .jc-track li.now>i{background:var(--jz-surface);box-shadow:inset 0 0 0 3px var(--jz-ink)}
#app .jc-track li.now>i::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--jz-forest)}
#app .jc-track li.now{color:var(--jz-ink);font-weight:700}
#app .jc-track li>span{display:block;max-width:none;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:normal;text-wrap:balance;letter-spacing:-.01em}
#app .jc-track.st-lost li.now>i{box-shadow:inset 0 0 0 3px var(--jz-danger)}
#app .jc-track.st-lost li.now>i::after{background:var(--jz-danger)}

/* what happens next: the "Jeevz did" wash, with an amber edge when a chase is late */
#app .jc-next{background:var(--jz-wash);box-shadow:0 0 0 1.5px var(--jz-wash-edge)}
#app .jc-next.is-late{background:var(--jz-surface);box-shadow:var(--jz-shadow);padding-left:calc(var(--jz-s5) + var(--jz-late-bar) - 2px);padding-top:calc(var(--jz-s5) + var(--jz-band))}
#app .jc-next.is-late::before{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 .jc-next.is-late::after{content:"";position:absolute;left:0;right:0;top:0;height:var(--jz-band);background:var(--jz-late-fill)}
#app .jc-next.is-idle,#app .jc-state{background:var(--jz-surface);box-shadow:var(--jz-shadow)}
#app .jc-eye{display:flex;align-items:center;gap:8px;margin:0;font:700 17px/1.2 var(--jz-sans);color:var(--jz-forest)}
#app .jc-eye .jz-ic{width:20px;height:20px;stroke-width:2.4}
#app .jc-eye .jz-mark{width:26px;height:26px}
#app .jc-next.is-late .jc-eye{color:var(--jz-late)}
#app .jc-next.is-idle .jc-eye,#app .jc-next.is-line .jc-eye{color:var(--jz-ink)}
#app .jc-line{margin:10px 0 0;font:500 19px/1.35 var(--jz-sans);letter-spacing:-.01em;color:var(--jz-ink);text-wrap:pretty}
#app .jc-next .jz-meta{margin:8px 0 0}
#app .jc-live{flex:none;width:12px;height:12px;border-radius:50%;background:var(--jz-forest);animation:jb-live 2s var(--jz-ease-out) infinite}
#app .jc-shots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:16px}
#app .jc-shot{display:grid;place-items:center;aspect-ratio:1;border-radius:var(--jz-r-inner);overflow:hidden;background:var(--jz-surface-2);color:var(--jz-ink)}
#app .jc-shot img{width:100%;height:100%;object-fit:cover}
#app .jc-shot.is-add{background:var(--jz-surface);box-shadow:inset 0 0 0 1.5px var(--jz-btn2-ring)}
#app .jc-shot.is-add .jz-ic{width:26px;height:26px;stroke-width:2.4}
#app .jc-clock{color:var(--jz-ink-2)}

/* the customer, with Call */
#app .jc-cust .jz-li{min-height:84px}
#app .jc-cust .avt{width:52px;height:52px;font:700 18px/1 var(--jz-display)}
#app .jc-cust .cwho{color:inherit;text-decoration:none}
#app .jc-call{width:56px;height:56px;background:var(--jz-btn2-bg);color:var(--jz-btn2-fg);box-shadow:inset 0 0 0 1.5px var(--jz-btn2-ring)}

/* what they last said: their words in a bubble */
#app main.jc .lastlbl{margin-top:var(--jz-s6)}
#app main.jc .lastlbl span{font-weight:500}
#app main.jc p.quote{max-width:88%;margin:0 0 14px;padding:14px 18px;border-radius:22px 22px 22px 8px;background:var(--jz-surface);box-shadow:var(--jz-shadow);font:500 var(--jz-t-say)/1.35 var(--jz-sans);letter-spacing:-.01em;color:var(--jz-ink)}

/* the quote and diary rows */
#app .jc-rows .jm-amt{flex:none;font:800 22px/1 var(--jz-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
#app .jc-rows .jz-st{font:600 var(--jz-t-meta)/1.3 var(--jz-sans)}
#app .jc-rows:empty{display:none}

/* the chase date: one row, the date in forest (amber words when late); the native picker opens on tap */
#app .jc-chase{display:flex;align-items:center;gap:8px;padding:0 12px 0 0}
#app main.jc .jc-chase label.crow{position:relative;flex:1;min-width:0;display:flex;flex-direction:row;justify-content:flex-start;text-align:left;align-items:center;gap:8px;min-height:64px;margin:0;padding:0 0 0 20px;font:600 18px/1.2 var(--jz-sans);color:var(--jz-ink);cursor:pointer}
#app .jc-chase label.crow>span:first-child{flex:1;min-width:0;white-space:nowrap}
#app main.jc .jc-chase label.crow input[type=date][name=chase_date]{position:absolute;right:0;top:0;bottom:0;width:60%;min-width:0;min-height:0;height:auto;margin:0;padding:0 26px 0 0;border:0;border-radius:0;background:none;box-shadow:none;font:700 18px/64px var(--jz-sans);color:var(--jz-forest);text-align:right;-webkit-appearance:none;appearance:none;cursor:pointer;z-index:1}
#app .jc-chase input[type=date][name=chase_date]::-webkit-calendar-picker-indicator{display:none}
#app .jc-chase input[type=date][name=chase_date]:focus{outline:0;box-shadow:none}
#app .jc-chase label.crow:focus-within{box-shadow:inset 0 0 0 2px var(--jz-forest);border-radius:var(--jz-r-inner)}
#app .jc-chase .cval{visibility:hidden;flex:none;font:700 18px/1.2 var(--jz-sans);color:var(--jz-forest);font-variant-numeric:tabular-nums}
#app .jc-chase .cval.unset{font-weight:500;color:var(--jz-ink-2)}
#app .jc-chase .cval.jz-overdue{color:var(--jz-late)}
#app .jc-chase .chev{flex:none;width:18px;height:18px;fill:none;stroke:var(--jz-ink-2);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#app .jc-chase .csave{flex:none;width:auto;min-height:48px;padding:0 18px}
@supports selector(:user-valid){
  #app .jc-chase .csave{display:none}
  #app .jc-chase .cval{visibility:visible}
  #app .jc-chase input[name=chase_date],#app .jc-chase input[name=chase_date]::-webkit-datetime-edit{color:transparent}
  #app .jc-chase:has(input[name=chase_date]:user-valid) .csave{display:flex}
  #app .jc-chase:has(input[name=chase_date]:user-valid) .cval{visibility:hidden}
  #app .jc-chase:has(input[name=chase_date]:user-valid) input[name=chase_date],
  #app .jc-chase:has(input[name=chase_date]:user-valid) input[name=chase_date]::-webkit-datetime-edit{color:var(--jz-forest)}
}

/* this job's tools: big tiles, two across (the six tools, each only while the firm has it on and at its stage) */
#app .jc-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 14px}
#app .jc-tiles .jz-go{flex-direction:column;align-items:flex-start;gap:10px;min-height:128px;padding:16px;border-radius:var(--jz-r-inner);background:var(--jz-surface);box-shadow:var(--jz-shadow);color:var(--jz-ink)}
#app .jc-tiles .jz-go:active{transform:scale(.97);background:var(--jz-surface)}
#app .jc-tiles .jz-go-ic{width:44px;height:44px;border-radius:50%;background:var(--jz-wash)}
#app .jc-tiles .jz-go-ic svg{width:22px;height:22px;stroke:var(--jz-forest);stroke-width:2}
#app .jc-tiles .jz-go-t{gap:4px;width:100%}
#app .jc-tiles .jz-go-t b{font:700 18px/1.2 var(--jz-sans);color:var(--jz-ink)}
#app .jc-tiles .jz-go-t small{white-space:normal;font:500 var(--jz-t-meta)/1.3 var(--jz-sans);color:var(--jz-ink-2)}
#app .jc-tiles .jz-go-chev{position:absolute;top:18px;right:14px}
#app .jc-tiles .jz-st{color:var(--jz-ink)}

/* waiting on someone (a DNO, parts): a white row at the top of the card */
#app main.jc .wt-jobnote{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:16px 18px;border-radius:var(--jz-r-card);background:var(--jz-surface);box-shadow:var(--jz-shadow);color:var(--jz-ink);text-decoration:none}

/* the work: folds as cards */
#app main.jc .jobwork{margin-top:var(--jz-s6)}
#app main.jc details.fold{margin:0 0 14px;background:var(--jz-surface);border-radius:var(--jz-r-card);box-shadow:var(--jz-shadow)}
#app main.jc details.fold>summary{min-height:72px;padding:14px 52px 14px 20px;border-radius:var(--jz-r-card);font:700 20px/1.15 var(--jz-display);letter-spacing:-.01em;color:var(--jz-ink)}
#app main.jc details.fold>summary small{font:500 var(--jz-t-meta)/1.35 var(--jz-sans);letter-spacing:0;color:var(--jz-ink-2)}
#app main.jc details.fold>summary::after{border-color:var(--jz-ink-2)}
#app main.jc details.fold[open]>:not(summary){padding-left:20px;padding-right:20px}
#app main.jc details.fold[open]>:last-child{padding-bottom:20px}
#app main.jc details.fold details.fold{box-shadow:inset 0 0 0 1.5px var(--jz-edge);margin:0 20px 12px}
#app main.jc details.fold.more>details.fold{padding:0}
#app main.jc details.fold.more>details.fold>summary{font-size:18px}
#app main.jc .jz-group,#app main.jc .jz-gogroup{background:var(--jz-surface-2);box-shadow:none;border-radius:var(--jz-r-inner);margin:0 0 12px}
#app main.jc .jz-go{color:var(--jz-ink)}
#app main.jc .jz-go-t small{color:var(--jz-ink-2)}
#app main.jc .jz-go-ic{background:var(--jz-wash)}
#app main.jc .jz-go-ic svg{stroke:var(--jz-forest)}
#app main.jc .worklist{list-style:none;margin:0;padding:0}
#app main.jc .worklist li{padding:14px 0;border-bottom:1.5px solid var(--jz-hair)}
#app main.jc .worklist li:last-child{border-bottom:0}
#app main.jc .worklist form{margin-top:12px}
#app main.jc .row2{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0;font:500 var(--jz-t-body)/1.35 var(--jz-sans);color:var(--jz-ink)}
#app main.jc .row2 a{color:var(--jz-forest);font-weight:600;text-decoration:none}
#app main.jc .row2 b{font-variant-numeric:tabular-nums;white-space:nowrap}
#app main.jc .sub{margin:4px 0 0;font:500 var(--jz-t-meta)/1.4 var(--jz-sans);color:var(--jz-ink-2)}
#app main.jc .sub a{color:var(--jz-forest)}
#app main.jc .hint{font:500 var(--jz-t-meta)/1.4 var(--jz-sans);color:var(--jz-ink-2)}
#app main.jc #visits .worklist li.sub:only-child{display:none}
#app main.jc .moneybox .row2{padding:10px 0;border-bottom:1.5px solid var(--jz-hair)}
#app main.jc .moneybox .row2.owed{border-bottom:0}
#app main.jc .moneybox .row2.owed b{font:800 32px/1 var(--jz-display);letter-spacing:-.02em}
#app main.jc .moneybox form{margin-top:16px}
#app main.jc .jobbook{margin:12px 0 0}
#app main.jc .jobbook .jz-go{min-height:64px;padding:10px 14px;border-radius:var(--jz-r-inner);background:var(--jz-surface-2)}
#app main.jc details.inner{margin-top:12px}
#app main.jc details.inner>summary{display:flex;align-items:center;min-height:48px;color:var(--jz-forest);font:600 var(--jz-t-body)/1.2 var(--jz-sans);cursor:pointer}
#app main.jc .bookrow,#app main.jc .completeform{margin-top:16px;padding-top:16px;border-top:1.5px solid var(--jz-hair)}
#app main.jc .docsbox p{margin:0 0 10px;font:500 var(--jz-t-body)/1.4 var(--jz-sans)}
#app main.jc .docsbox a{color:var(--jz-forest);font-weight:600}
#app main.jc .acts{display:flex;flex-wrap:wrap;gap:10px}
#app main.jc .acts>.jz-btn{flex:1;width:auto}
#app main.jc .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* the work's form fields read like .jz-field: a 13/600 label over a 56px well */
#app main.jc label.field:not(.crow){display:flex;flex-direction:column;gap:6px;margin:0 0 14px;font:600 var(--jz-t-label)/1.3 var(--jz-sans);color:var(--jz-ink-2)}
#app main.jc label.field:not(.crow) :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea){min-height:var(--jz-btn);margin:0;padding:14px 16px;border:0;border-radius:var(--jz-r-inner);background-color:var(--jz-surface);box-shadow:inset 0 0 0 1.5px var(--jz-edge);color:var(--jz-ink);font:500 var(--jz-t-body)/1.35 var(--jz-sans)}
#app main.jc label.field:not(.crow) :is(input,select,textarea):focus{outline:0;box-shadow:inset 0 0 0 2px var(--jz-forest)}
#app main.jc label.field:has(>input[type=checkbox]){flex-direction:row;align-items:center;gap:12px;min-height:48px;font:500 var(--jz-t-body)/1.35 var(--jz-sans);color:var(--jz-ink)}
#app main.jc label.field>input[type=checkbox]{flex:none;width:24px;height:24px;margin:0;accent-color:var(--jz-forest)}

/* move to another stage: one quiet button at the very end; it opens to Move on, Back a stage and Mark lost */
#app .jc-move{margin:var(--jz-s6) 0 0}
#app .jc-move>summary{list-style:none;cursor:pointer}
#app .jc-move>summary::-webkit-details-marker{display:none}
#app .jc-move form{display:flex;flex-direction:column;gap:10px;margin:12px 0 0}
#app .jc-move .lose{color:var(--jz-danger)}

/* the dock: a tray above the tab bar (as on a thread): the lock line, then Call and the one main action */
#app .dock.jc-dock{z-index:31;bottom:calc(var(--jz-tabbar) + var(--jz-safe-b) + 10px);padding-top:6px;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
#app .dock.jc-dock::before{content:none}
#app .jc-tray{padding:10px 12px 12px;border-radius:32px;background:var(--jz-bar-solid);box-shadow:var(--jz-shadow-2)}
#app .jc-tray .jz-lock{justify-content:center;margin:2px 8px 10px;font-size:15px;text-align:center;text-wrap:balance}
#app .jc-dock-row{display:flex;gap:10px;align-items:center}
#app .jc-dock-row .jc-main{flex:1;min-width:0;width:auto}
#app .jc-dock-row form.jc-main{display:flex}
#app .jc-dock .jc-sq{width:64px;height:64px;border-radius:var(--jz-r-btn);background:var(--jz-btn2-bg);color:var(--jz-btn2-fg);box-shadow:inset 0 0 0 1.5px var(--jz-btn2-ring)}
#app .jc-dock .jc-sq .jz-ic{width:24px;height:24px}
#app .jc-dock .jz-btn{overflow:hidden;text-overflow:ellipsis}
/* New job: until a customer is picked the button says what is missing (the dashed waiting button) */
#app main.jn form:has(.jz-who[data-required]):not(:has(.jz-who input[type=radio]:checked)) .jn-add{background:transparent;color:var(--jz-ink-2);outline:2px dashed var(--jz-chev);outline-offset:-2px;font-size:0}
#app main.jn form:has(.jz-who[data-required]):not(:has(.jz-who input[type=radio]:checked)) .jn-add .jz-ic{display:none}
#app main.jn form:has(.jz-who[data-required]):not(:has(.jz-who input[type=radio]:checked)) .jn-add::after{content:"Pick a customer first";font-size:19px}

@media (prefers-reduced-motion:reduce){#app .jc-live{animation:none}#app .jc-tiles .jz-go:active{transform:none}}
/* the chase row reads as two lines: "Chase them on" over the date, so a late date ("Fri 30 Oct, overdue") never
   runs into the words; the see-through date input covers the whole row so a tap anywhere opens the picker */
#app main.jc .jc-chase label.crow{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-height:76px;padding:10px 40px 10px 20px;font:500 var(--jz-t-meta)/1.3 var(--jz-sans);color:var(--jz-ink-2)}
#app main.jc .jc-chase label.crow>span:first-child{flex:none}
#app main.jc .jc-chase label.crow input[type=date][name=chase_date]{left:0;width:100%;padding:0 40px 0 20px;text-align:left;line-height:normal;padding-top:28px}
#app main.jc .jc-chase .cval{font-size:19px}
#app main.jc .jc-chase .cval.jz-overdue::before{content:none}
#app main.jc .jc-chase .chev{position:absolute;right:14px;top:50%;margin-top:-9px}
#app main.jc .jc-chase.is-late{box-shadow:var(--jz-shadow),inset 6px 0 0 var(--jz-late-edge)}

/* ================= New job ================= */
#app main.jn{padding:0 var(--jz-gutter) var(--jz-s8)}
#app main.jn .jn-sec{margin-top:var(--jz-s5)}
#app main.jn .jz-who{margin-bottom:14px;border-radius:var(--jz-r-card);background:var(--jz-surface);box-shadow:var(--jz-shadow)}
#app .jn-err{display:flex;gap:10px;align-items:flex-start;background:var(--jz-chip-danger);color:var(--jz-on-chip-danger);box-shadow:none;font:600 var(--jz-t-body)/1.4 var(--jz-sans)}
#app .jn-err .jz-ic{flex:none;width:22px;height:22px;margin-top:1px}
#app .jn-more{padding:0}
#app .jn-more>summary{list-style:none;display:flex;align-items:center;gap:12px;min-height:76px;padding:12px 20px;cursor:pointer}
#app .jn-more>summary::-webkit-details-marker{display:none}
#app .jn-more>summary>span{flex:1;display:flex;flex-direction:column;gap:2px}
#app .jn-more>summary b{font:600 18px/1.25 var(--jz-sans)}
#app .jn-more>summary small{font:500 var(--jz-t-meta)/1.35 var(--jz-sans);color:var(--jz-ink-2)}
#app .jn-more>summary .jz-ic{width:20px;height:20px;color:var(--jz-ink-2);transition:transform var(--jz-dur-press)}
#app .jn-more[open]>summary .jz-ic{transform:rotate(90deg)}
#app .jn-more>.jz-field{margin:0 20px 16px}
#app main.jn .jz-lock{margin:var(--jz-s4) var(--jz-s1) 0}
#app main.jn .jobclash{margin-bottom:14px}
/* the tray is taller than a plain dock (its lock line): the page keeps room so its last card clears it */
#app main.jc:has(.jc-dock),#app main.jn{padding-bottom:calc(var(--jz-s8) + 84px)}
#app .jc-tray .jz-lock{display:block}
#app .jc-tray .jz-lock .jz-ic{margin:-3px 6px 0 0;vertical-align:middle}
#app .jc-shot.is-add{display:flex;flex-direction:column;justify-content:center;gap:2px;font:600 var(--jz-t-label)/1 var(--jz-sans)}
/* the title and the firm on one line, as in the mockup; Quotes and Snags sit under the stages */
#app .jb-head>div{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
#app .jb-head .jz-sub{margin:0}
#app .jb-links{margin:0 0 var(--jz-s2)}
#app .jb-row .jb-who>.jb-name::before{content:none}
#app .jb-row .jb-who>*{white-space:nowrap}
#app .jb-row .jb-who>.jplace{white-space:normal}
#app .jb-stages .jz-stage{min-height:0;padding-bottom:4px}
#app .jc-rows .jz-li-t b{overflow-wrap:normal}