/* Price Check (H2): the owner's list, new link, sent link, detail and fee pages, and the customer's page (/c/<token>/).
   Scoped to .pck; every class starts pck- (design-learnings 39). Reads --jz-* tokens only. base.html must link this
   file after the other screens (pricecheck/INTEGRATE.md). */

/* the tool link on the title line: a mint pill (design-learnings 5) */
#app .pck .pck-pill{flex:none;align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;margin-top:-2px;padding:0 16px;border-radius:var(--jz-r-full);background:var(--jz-soft);color:var(--jz-forest-ink);font:600 15px/1 var(--jz-sans);text-decoration:none}
#app .pck .pck-pill:active{transform:scale(.96)}
#app .pck .jz-lt .jz-sub b.pck-hot{color:var(--jz-red)}

/* list rows: urgent ones lead with a short red reason and a red dot in the gutter */
#app .pck .pck-rows{margin:0 0 var(--jz-s6)}
/* one line of two facts under the name: the status first, then what it's about, fading at the edge, never "..."
   (design-learnings 13, 22). A row with a red reason shows the reason instead of the status, not both. */
#app .pck .pck-row .rb{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:0;row-gap:2px}
#app .pck .pck-row .r1{flex:1 0 100%;min-width:0}
#app .pck .pck-row .r2{order:1;flex:none;margin:0;font-size:15px;line-height:1.35}
#app .pck .pck-row .r2{gap:0}
#app .pck .pck-row .r2 .jz-st{font-size:15px;line-height:1.35}
#app .pck .pck-row .r2::after{content:"\00b7";margin:0 6px;font-weight:400;color:var(--jz-muted)}
#app .pck .pck-row .pv{order:2;flex:1 1 0;min-width:0;text-overflow:ellipsis}
#app .pck .pck-row.is-hot .r2{display:none}
#app .pck .pck-row.is-hot .pv{flex:1 1 100%}
#app .pck .pck-row .amt{font-size:15px}
#app .pck .pck-row .pck-why{color:var(--jz-red);font-weight:600}
#app .pck .pck-row.is-hot::after{content:"";position:absolute;left:5px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--jz-red)}
#app .pck .pck-notice{margin-bottom:var(--jz-s6)}

/* choice rows: label left, the shared ring that turns into a forest tick on the right (design-learnings 26) */
#app .pck fieldset{min-width:0;margin:0;padding:0;border:0}
#app .pck fieldset.jz-group{margin:0 0 var(--jz-s6)}
#app .pck .pck-q{margin:0}
#app .pck .pck-q>legend.jz-sec{float:left;width:100%;box-sizing:border-box}
#app .pck .pck-q>legend+*{clear:both}
#app .pck .pck-q .jz-group{margin-bottom:var(--jz-s6)}
#app .pck .pck-q .jz-foot{margin-top:calc(-1 * var(--jz-s4))}
#app .pck .pck-q.is-missing>legend{color:var(--jz-red)}
#app .pck .pck-q.is-missing .jz-group{box-shadow:var(--jz-shadow),0 0 0 1.5px var(--jz-red)}
#app .pck .pck-opt{position:relative;display:flex;align-items:center;gap:var(--jz-s3);min-height:52px;margin:0;padding:6px var(--jz-s4);cursor:pointer;font:400 17px/22px var(--jz-sans);color:var(--jz-ink);-webkit-tap-highlight-color:transparent}
#app .pck .pck-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
#app .pck .pck-opt-t{flex:1;min-width:0}
#app .pck .pck-opt-t small{font-size:15px;color:var(--jz-muted)}
#app .pck .pck-opt-v{flex:none;font:400 17px/22px var(--jz-sans);color:var(--jz-muted);font-variant-numeric:tabular-nums}
#app .pck .pck-tick{flex:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1.75px rgba(23,33,29,.22)}
#app .pck .pck-tick.is-box{border-radius:7px}
#app .pck .pck-opt:has(input:checked) .pck-tick{background:var(--jz-forest);box-shadow:none}
#app .pck .pck-opt:has(input:checked) .pck-tick::after{content:"";width:10px;height:5px;margin-top:-3px;border:solid #fff;border-width:0 0 2.25px 2.25px;transform:rotate(-45deg)}
#app .pck .pck-opt:has(input:checked) .pck-opt-t{font-weight:600}
#app .pck .pck-opt:has(input:focus-visible){outline:2px solid var(--jz-forest);outline-offset:-2px}
#app .pck .pck-opt:active{background:var(--jz-field)}

/* the message the owner sends */
#app .pck .pck-msg textarea{min-height:150px;font-size:16px;line-height:22px}
#app .pck .pck-copy{margin:0 0 var(--jz-s4)}
#app .pck .pck-copy+.note:empty{display:none}
#app .pck .pck-acts{margin-bottom:var(--jz-s6)}

/* needs you first: a white notice card (design-learnings 16) led by a red dot and word, the reasons as one short list */
#app .pck .pck-first{margin:0 0 var(--jz-s6);padding:var(--jz-s4);border-radius:var(--jz-r);background:var(--jz-card);box-shadow:var(--jz-shadow);color:var(--jz-muted);font:400 15px/20px var(--jz-sans)}
#app .pck .pck-first>b{display:flex;align-items:center;font:700 17px/22px var(--jz-sans);color:var(--jz-red)}
#app .pck .pck-first>b::before{content:"";flex:none;width:8px;height:8px;margin-right:8px;border-radius:50%;background:currentColor}
#app .pck .pck-first ul{margin:6px 0 0;padding:0 0 0 16px;list-style:none}
#app .pck .pck-first li{font-weight:600;color:var(--jz-ink)}
#app .pck .pck-first p{margin:8px 0 0}
#app .pck .pck-first a{color:var(--jz-red);font-weight:700}

/* the price guide: one big number pair, small pence (design-learnings 21) */
#app .pck .pck-band{margin:0 0 var(--jz-s6)}
#app .pck .pck-band b{display:flex;flex-wrap:wrap;align-items:baseline;font-size:40px}
#app .pck .pck-band b .p{font-size:.55em;letter-spacing:-.01em}
#app .pck .pck-band .pck-to{margin:0 10px;font:600 17px/1 var(--jz-sans);letter-spacing:0;color:var(--jz-muted)}
#app .pck .pck-band small{display:block}
#app .pck .pck-band .pck-nq{margin-top:2px;color:var(--jz-ink);font-weight:600}

/* the fee group and what was agreed, word for word */
#app .pck .pck-fee .jz-row{cursor:default}
#app .pck .pck-fee .jz-row>.k{max-width:62%;white-space:normal}
#app .pck .pck-fee .pck-v{margin-left:auto;text-align:right;font-size:15px;flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
#app .pck .pck-fee .pck-v small{font-size:13px;color:var(--jz-muted);white-space:nowrap}
#app .pck .pck-said{position:relative;padding:12px var(--jz-s4) 14px}
#app .pck .pck-said small{display:block;font:600 13px/18px var(--jz-sans);color:var(--jz-muted)}
#app .pck .pck-said p{margin:4px 0 0;font:400 15px/21px var(--jz-sans);color:var(--jz-ink);text-wrap:pretty}

/* answers: question small, answer as the row title */
#app .pck .pck-qa{position:relative;display:flex;flex-direction:column;gap:2px;padding:10px var(--jz-s4) 12px}
#app .pck .pck-qa small{font:400 13px/18px var(--jz-sans);color:var(--jz-muted)}
#app .pck .pck-qa b{font:600 17px/22px var(--jz-sans);color:var(--jz-ink)}

/* photos: square tiles, three across */
#app .pck .pck-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 var(--jz-s6)}
#app .pck .pck-photos a{display:block;aspect-ratio:1;overflow:hidden;border-radius:var(--jz-r-m);background:var(--jz-field);box-shadow:var(--jz-shadow)}
#app .pck .pck-photos img{display:block;width:100%;height:100%;object-fit:cover}

/* an action row that is a button (Stop this link) */
#app .pck button.jz-go{width:100%;margin:0;border:0;border-radius:0;background:none;box-shadow:none;font:inherit;text-align:left;cursor:pointer}
#app .pck .pck-next form{position:relative;margin:0}
#app .pck .jz-group>form+*::before,#app .pck .jz-group>*+form::before{left:60px}

/* the customer's page */
#app .pck-pub .jz-lt{margin-top:var(--jz-s4)}
#app .pck-pub .pck-gasline{display:flex;gap:8px;align-items:baseline;margin:calc(-1 * var(--jz-s2)) 0 var(--jz-s5);padding:0 4px;font:400 15px/20px var(--jz-sans);color:var(--jz-muted)}
#app .pck-pub .pck-gasline::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--jz-red);transform:translateY(-1px)}
#app .pck-pub .pck-gasline a{color:var(--jz-red);font-weight:700;text-decoration:none;white-space:nowrap}
#app .pck-pub .pck-sos{margin:0 0 var(--jz-s6);padding:var(--jz-s5);border-radius:var(--jz-r-l);background:var(--jz-red);color:#fff;box-shadow:var(--jz-shadow)}
#app .pck-pub .pck-sos>b{display:block;font:800 22px/28px var(--jz-sans);letter-spacing:-.02em}
#app .pck-pub .pck-sos-call{display:flex;align-items:center;justify-content:center;min-height:60px;margin:var(--jz-s4) 0;border-radius:var(--jz-r-full);background:#fff;color:var(--jz-red);font:800 28px/1 var(--jz-sans);letter-spacing:-.01em;font-variant-numeric:tabular-nums;text-decoration:none}
#app .pck-pub .pck-sos-call:active{transform:scale(.98)}
#app .pck-pub .pck-sos p{margin:var(--jz-s2) 0 0;font:400 15px/21px var(--jz-sans);color:#fff}
#app .pck-pub .pck-file{margin-bottom:var(--jz-s6)}
#app .pck-pub .pck-rules{margin:0 0 var(--jz-s6)}
#app .pck-pub .pck-rules p{margin:0;font:400 17px/24px var(--jz-sans);text-wrap:pretty}
#app .pck-pub .pck-done{margin:0 0 var(--jz-s6)}
#app .pck-pub .pck-done b{display:flex;align-items:center;font:700 17px/22px var(--jz-sans);color:var(--jz-forest)}
#app .pck-pub .pck-done b::before{content:"";flex:none;width:8px;height:8px;margin-right:8px;border-radius:50%;background:currentColor}
#app .pck-pub .pck-done p{margin:6px 0 0;font:400 15px/21px var(--jz-sans);color:var(--jz-muted)}
#app .pck-pub .pck-agree-note{margin-top:0}
#app .pck-pub .dock .btn{white-space:normal;line-height:1.2;padding:8px 20px}
/* art director J2: "Nobody" stands alone in a tick-all list: a round tick, and a little air above it */
#app .pck .pck-pick>.pck-opt.is-only{margin-top:6px}
#app .pck-pub .pck-private{margin:calc(-1 * var(--jz-s3)) 0 var(--jz-s6)}
/* the pinned tray's height is kept clear under the last thing on the page */
#app .pck-pub:has(.pck-form .dock){padding-bottom:calc(var(--jz-s6) + 76px)}
#app .pck-pub .pck-until{margin:var(--jz-s6) 0 0;padding:0 4px;font:400 13px/18px var(--jz-sans);color:var(--jz-faint);text-align:center}
#app.plain .top .mark img{max-height:32px;width:auto}
/* walkthrough 1 Nov: the sticky firm header hid a question when the browser scrolled to a missing answer */
.pck-pub fieldset,.pck-pub label,.pck-pub input,.pck-pub textarea,.pck-pub select{scroll-margin-top:112px}

/* Art director 1 Nov: a danger flag is one red dot leading a muted second line, never red body text on every row.
   The left-edge dot goes; the dot sits where the status dot sits on the other rows, so every row reads the same. */
#app .pck .pck-row.is-hot::after{content:none}
#app .pck .pck-row .pck-why{color:var(--jz-muted);font-weight:400}
#app .pck .pck-row .pck-why::before{content:"";display:inline-block;width:8px;height:8px;margin:0 8px 1px 0;border-radius:50%;background:var(--jz-red);vertical-align:middle}
#app .pck .pck-row .pv{color:var(--jz-muted)}
/* stopped and run-out links fold under Earlier: the fold is the card, its rows sit flush inside it */
#app .pck details.fold.pck-earlier{margin:0 0 var(--jz-s6)}
#app .pck details.fold.pck-earlier[open]>.pck-earlier-rows{padding:0}
#app .pck details.fold.pck-earlier[open]>summary{box-shadow:inset 0 -.5px 0 var(--jz-line);border-radius:var(--jz-r) var(--jz-r) 0 0}

/* ===================== 6 Nov rebuild: Fresh light and Night (docs/design-system.md) =====================
   Later rules win over the older ones above (kept: tests pin some of them). Role tokens only. */
/* the list: your fee is the hero, then one card of rows */
#app .pck .pck-fee-hero{display:grid;grid-template-columns:1fr auto;align-items:end;gap:4px 12px;padding:var(--jz-s5);color:var(--jz-ink);text-decoration:none}
#app .pck .pck-fee-hero:active{transform:scale(.99)}
#app .pck .pck-fee-l{grid-column:1/-1;font:600 var(--jz-t-body)/1.2 var(--jz-sans);color:var(--jz-ink)}
#app .pck .pck-fee-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-top:var(--jz-s2)}
#app .pck .pck-fee-n{font-size:64px}
#app .pck .pck-fee-w{font:600 var(--jz-t-body)/1.2 var(--jz-sans);color:var(--jz-ink-2)}
#app .pck .pck-fee-s{grid-column:1;margin-top:var(--jz-s2)}
#app .pck .pck-fee-go{grid-column:2;grid-row:2/4;align-self:center;display:inline-flex;align-items:center;gap:2px;min-height:48px;padding:0 6px 0 16px;border-radius:var(--jz-r-full);background:var(--jz-surface-2);color:var(--jz-ink);font:600 16px/1 var(--jz-sans)}
#app .pck .pck-fee-go .jz-ic{width:18px;height:18px}
#app .pck .pck-notice{padding:calc(var(--jz-s5) + var(--jz-band)) var(--jz-s5) var(--jz-s5)}
#app .pck .pck-notice .jz-btn{margin-top:var(--jz-s4)}
#app .pck .pck-notice .jz-meta{margin:6px 0 0}
#app .pck .pck-rows{margin:0 0 14px}
#app .pck .pck-row{align-items:center}
#app .pck .pck-row .rb{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:3px;min-width:0;overflow:hidden}
#app .pck .pck-row .r1{display:flex;align-items:center;gap:8px;flex:none;font:600 18px/1.25 var(--jz-sans);color:var(--jz-ink)}
#app .pck .pck-row .pv,#app .pck .pck-row.is-hot .pv{display:block;flex:none;max-width:100%;font:500 var(--jz-t-meta)/1.35 var(--jz-sans);color:var(--jz-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#app .pck .pck-row .r2{order:0;margin-top:6px}
#app .pck .pck-row .r2::after{content:none}
#app .pck .pck-row .pck-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--jz-danger)}
#app .pck .pck-row .amt{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font:800 22px/1 var(--jz-display);letter-spacing:-.03em;color:var(--jz-ink);text-align:right}
#app .pck .pck-row .amt small{display:block;margin:0;font:600 var(--jz-t-label)/1 var(--jz-sans);letter-spacing:0;color:var(--jz-ink-2)}
#app .pck .pck-earlier>summary{border-radius:var(--jz-r-card)}
#app .pck .pck-earlier-rows{margin-top:var(--jz-s3)}
/* the detail: the price guide as a paper hero with its chip */
#app .pck .pck-hero{padding:var(--jz-s5)}
#app .pck .pck-hero .figure.pck-band{margin:var(--jz-s4) 0 0;padding:0;background:none;box-shadow:none;border-radius:0}
#app .pck .pck-band>small:first-child{font:600 var(--jz-t-body)/1.2 var(--jz-sans);color:var(--jz-ink)}
#app .pck .pck-band b{margin:var(--jz-s2) 0 var(--jz-s2);font:800 56px/.95 var(--jz-display);letter-spacing:var(--jz-track-num);color:var(--jz-ink)}
#app .pck .pck-band small{font:500 var(--jz-t-meta)/1.4 var(--jz-sans);color:var(--jz-ink-2)}
#app .pck .pck-band .pck-to{font:600 var(--jz-t-body)/1 var(--jz-sans);color:var(--jz-ink-2)}
#app .pck .pck-first{border-radius:var(--jz-r-card);box-shadow:var(--jz-shadow),inset 6px 0 0 var(--jz-danger-fill)}
#app .pck .pck-photos{gap:10px}
#app .pck .pck-photos a{border-radius:var(--jz-r-inner)}
#app .pck .pck-said small,#app .pck .pck-qa small{font:600 var(--jz-t-label)/1.3 var(--jz-sans);color:var(--jz-ink-2)}
#app .pck .pck-said p{font:500 var(--jz-t-body)/1.4 var(--jz-sans)}
#app .pck .pck-fee .pck-v small{color:var(--jz-ink-2)}
/* questions and picks (owner's new link and the customer's page) */
#app .pck .pck-q>legend.jz-sechead{float:left;width:100%;box-sizing:border-box;margin:var(--jz-s6) 0 var(--jz-s3);padding:0 var(--jz-s1)}
#app .pck .pck-q>legend.jz-sechead b{font:700 var(--jz-t-h2)/1.15 var(--jz-display);letter-spacing:var(--jz-track-h2);color:var(--jz-ink)}
#app .pck .pck-pick{border-radius:var(--jz-r-card)}
#app .pck .pck-opt{min-height:60px;font:500 var(--jz-t-body)/1.3 var(--jz-sans)}
#app .pck .pck-opt:has(input:checked){background:var(--jz-wash)}
#app .pck .pck-opt:has(input:checked) .pck-opt-t{color:var(--jz-forest);font-weight:600}
#app .pck .pck-q.is-missing .jz-group{box-shadow:var(--jz-shadow),inset 0 0 0 2px var(--jz-danger)}
/* the customer's page */
#app .pck-pub .pck-pubhero{padding:var(--jz-s5)}
#app .pck-pub .pck-pubhero .figure.pck-band{margin:0;padding:0;background:none;box-shadow:none;border-radius:0}
#app .pck-pub .pck-pubhero .pck-band b{font-size:60px}
#app .pck-pub .pck-band .pck-nq{margin-top:var(--jz-s3);padding:12px 14px;border-radius:var(--jz-r-inner);background:var(--jz-info-soft);color:var(--jz-info);font:600 var(--jz-t-meta)/1.4 var(--jz-sans)}
#app .pck-pub .pck-rules{padding:var(--jz-s5)}
#app .pck-pub .pck-done{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;padding:var(--jz-s5)}
#app .pck-pub .pck-donetick{grid-row:1/3;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--jz-done);color:var(--jz-on-done)}
#app .pck-pub .pck-done b{font:700 var(--jz-t-body)/1.3 var(--jz-sans);color:var(--jz-forest)}
#app .pck-pub .pck-done b::before{content:none}
#app .pck-pub .pck-done p{margin:0;font:500 var(--jz-t-meta)/1.4 var(--jz-sans);color:var(--jz-ink)}
#app .pck-pub .pck-sos{border-radius:var(--jz-r-card);background:var(--jz-danger-fill);color:var(--jz-on-danger);box-shadow:var(--jz-shadow-danger)}
#app .pck-pub .pck-sos>b{font:800 26px/1.15 var(--jz-display)}
#app .pck-pub .pck-sos-call{min-height:64px;background:var(--jz-danger-call);color:var(--jz-on-danger-call);font:800 30px/1 var(--jz-display)}
#app .pck-pub .pck-sos p{font:500 var(--jz-t-meta)/1.45 var(--jz-sans);color:var(--jz-on-danger)}
#app .pck-pub .pck-gasline{color:var(--jz-ink-2)}
#app .pck-pub .pck-gasline::before{background:var(--jz-danger)}
#app .pck-pub .pck-gasline a{color:var(--jz-danger)}
#app .pck-pub .pck-agree-note{margin:0 0 var(--jz-s4)}

/* ===================== Q7c (6 Nov): both looks, measured =====================
   The empty ring and box read --jz-chev, so they show at night too (they were ink at 22%, invisible on graphite).
   A price band never breaks inside a figure: "£65.00" stays whole and "to £130.00" moves down as one piece. */
#app .pck .pck-tick{box-shadow:inset 0 0 0 2px var(--jz-chev)}
#app .pck .pck-opt:has(input:checked) .pck-tick::after{border-color:var(--jz-on-forest)}
#app .pck .pck-band b{column-gap:14px;row-gap:4px}
#app .pck .pck-fig{display:inline-flex;align-items:baseline;white-space:nowrap}
#app .pck .pck-fig .pck-to{margin:0 10px 0 0}
/* the customer's danger line: the round mark beside the words (it sat alone on the first line) */
#app .pck-pub .alert{display:block;position:relative;padding:16px 18px 16px 56px;border-radius:var(--jz-r-inner)}
#app .pck-pub .alert::before{position:absolute;left:18px;top:15px}

/* ===================== Polish (8 Nov): leftovers from the quality bar =====================
   The gas line is one block of words, never columns. It was a flex row, so the words, the number and "first." became
   three flex items and the number sat in a right-hand column at 390px. Now it is a quiet card: the dot pinned left,
   the words flowing, the number kept whole. Light on the customer's page (public pages stay light). */
#app .pck-pub .pck-gasline{display:block;position:relative;margin:0 0 var(--jz-s5);padding:12px 16px 12px 36px;border-radius:var(--jz-r-inner);background:var(--jz-card);box-shadow:var(--jz-shadow),inset 0 0 0 1.5px var(--jz-chip-danger);font:500 var(--jz-t-meta)/1.45 var(--jz-sans);color:var(--jz-ink);text-wrap:wrap}
#app .pck-pub .pck-gasline::before{position:absolute;left:16px;top:19px;width:8px;height:8px;transform:none}
#app .pck-pub .pck-gasline a{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}

/* New link: a real hero. What the customer gets, as three rows with the 44px round icon used on every list. */
#app .pck .pck-newhero{margin:0 0 var(--jz-s6);padding:var(--jz-s5) var(--jz-s5) var(--jz-s2)}
#app .pck .pck-newhero-t{margin:0 0 var(--jz-s2);font:700 var(--jz-t-h2)/1.15 var(--jz-display);letter-spacing:var(--jz-track-h2);color:var(--jz-ink)}
#app .pck .pck-how{margin:0;padding:0;list-style:none}
#app .pck .pck-how li{position:relative;display:flex;align-items:center;gap:14px;min-height:64px;padding:10px 0}
#app .pck .pck-how li+li::before{content:"";position:absolute;top:0;left:58px;right:0;height:1.5px;background:var(--jz-hair)}
#app .pck .pck-how-ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--jz-wash);color:var(--jz-forest)}
#app .pck .pck-how-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#app .pck .pck-how-t{display:flex;flex-direction:column;gap:2px;min-width:0}
#app .pck .pck-how-t b{font:600 var(--jz-t-body)/1.25 var(--jz-sans);color:var(--jz-ink)}
#app .pck .pck-how-t small{font:500 var(--jz-t-meta)/1.35 var(--jz-sans);color:var(--jz-ink-2);text-wrap:pretty}
#app .pck .pck-form>.jz-sechead:first-of-type{margin-top:0}

/* Your fee: the fee is the hero, typed straight into a big number */
#app .pck .pck-feehero{margin:0 0 var(--jz-s4);padding:var(--jz-s5)}
#app .pck .pck-feehero-l{display:block;font:600 var(--jz-t-body)/1.2 var(--jz-sans);color:var(--jz-ink)}
#app .pck .pck-feehero-in{display:flex;align-items:baseline;gap:2px;margin:var(--jz-s3) 0 var(--jz-s3);padding:6px 16px 10px;border-radius:var(--jz-r-inner);background:var(--jz-surface-2);box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .15s ease}
#app .pck .pck-feehero-in:focus-within{box-shadow:inset 0 0 0 2px var(--jz-forest)}
#app .pck .pck-feehero-c{font:800 40px/1 var(--jz-display);color:var(--jz-ink-2)}
#app#app .pck .pck-feehero-in input{flex:1;min-width:0;width:100%;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;outline:0;font:800 64px/1.05 var(--jz-display);letter-spacing:var(--jz-track-num);font-variant-numeric:tabular-nums;color:var(--jz-ink)}
#app .pck .pck-feehero-in input::placeholder{color:var(--jz-chev);opacity:.55}
#app .pck .pck-feehero-say{margin:0;font:500 var(--jz-t-meta)/1.4 var(--jz-sans);color:var(--jz-ink-2);text-wrap:pretty}

/* Your usual fixes: one list, a chip per kind of job picks whose ticks you see (no more three copies of the list) */
#app .pck .pck-kinds{display:flex;gap:8px;margin:0 -20px var(--jz-s3) 0;padding:2px 20px 4px 2px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#app .pck .pck-kinds::-webkit-scrollbar{display:none}
#app .pck .pck-kchip{position:relative;flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--jz-r-full);background:var(--jz-surface);box-shadow:inset 0 0 0 1.5px var(--jz-edge);font:600 15px/1 var(--jz-sans);color:var(--jz-ink);cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent}
#app .pck .pck-kchip input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
#app .pck .pck-kchip:has(input:checked){background:var(--jz-forest);box-shadow:none;color:var(--jz-on-forest)}
#app .pck .pck-kchip:has(input:focus-visible){outline:3px solid var(--jz-forest);outline-offset:2px}
#app .pck .pck-kchip:active{transform:scale(.97)}
@supports selector(:has(a)){
  #app .pck .pck-kinds~.pck-kgroups>.pck-kgroup{display:none}
  #app .pck .pck-kinds:has(.pck-kchip:nth-child(1) input:checked)~.pck-kgroups>.pck-kgroup:nth-child(1),
  #app .pck .pck-kinds:has(.pck-kchip:nth-child(2) input:checked)~.pck-kgroups>.pck-kgroup:nth-child(2),
  #app .pck .pck-kinds:has(.pck-kchip:nth-child(3) input:checked)~.pck-kgroups>.pck-kgroup:nth-child(3),
  #app .pck .pck-kinds:has(.pck-kchip:nth-child(4) input:checked)~.pck-kgroups>.pck-kgroup:nth-child(4),
  #app .pck .pck-kinds:has(.pck-kchip:nth-child(5) input:checked)~.pck-kgroups>.pck-kgroup:nth-child(5),
  #app .pck .pck-kinds:has(.pck-kchip:nth-child(6) input:checked)~.pck-kgroups>.pck-kgroup:nth-child(6),
  #app .pck .pck-kinds:has(.pck-kchip:nth-child(7) input:checked)~.pck-kgroups>.pck-kgroup:nth-child(7),
  #app .pck .pck-kinds:has(.pck-kchip:nth-child(8) input:checked)~.pck-kgroups>.pck-kgroup:nth-child(8),
  #app .pck .pck-kinds:has(.pck-kchip:nth-child(9) input:checked)~.pck-kgroups>.pck-kgroup:nth-child(9),
  #app .pck .pck-kinds:has(.pck-kchip:nth-child(10) input:checked)~.pck-kgroups>.pck-kgroup:nth-child(10),
  #app .pck .pck-kinds:has(.pck-kchip:nth-child(11) input:checked)~.pck-kgroups>.pck-kgroup:nth-child(11),
  #app .pck .pck-kinds:has(.pck-kchip:nth-child(12) input:checked)~.pck-kgroups>.pck-kgroup:nth-child(12){display:block}
}
#app .pck .pck-opt-v{color:var(--jz-ink-2)}
#app .pck .alert+.pck-form>.pck-feehero:first-of-type,#app .pck .alert+.pck-form{margin-top:var(--jz-s4)}