/* Snag Clock (snags/ app): the owner's snag list, one snag, the share page and the customer's page.
   Scoped to .sg. Every class starts sg- so it can't collide with another
   area. Shared parts come from jeevz.css: .jz-lt, .jz-sec, .jz-group, .jz-row, .jz-area, .jz-file, .jz-go, .jz-st,
   .jz-foot, .safe and the Dock. Rules start #app so they beat the shared kit (design-learnings 40). */

/* ---- the clock: held back vs still open ---- */
#app .sg .sg-sum{margin:0 0 var(--jz-s6);padding:var(--jz-s5) var(--jz-s4) var(--jz-s4);background:var(--jz-card);border-radius:var(--jz-r);box-shadow:var(--jz-shadow)}
#app .sg .sg-figs{display:grid;grid-template-columns:1fr 1fr;gap:0}
#app .sg .sg-fig{display:flex;flex-direction:column;gap:2px;min-width:0;padding:0 var(--jz-s3) 0 0}
#app .sg .sg-fig.is-snags{padding:0 0 0 var(--jz-s4);box-shadow:inset .5px 0 0 var(--jz-chev)}
#app .sg .sg-fig small{font:600 13px/18px var(--jz-sans);color:var(--jz-muted)}
#app .sg .sg-fig.is-snags small{color:var(--jz-amber)}
#app .sg .sg-n{display:block;font:800 clamp(26px,8vw,32px)/1.1 var(--jz-sans);letter-spacing:-.035em;color:var(--jz-ink);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#app .sg .sg-n .p{font-size:.55em;font-weight:700;letter-spacing:-.02em}
#app .sg .sg-n.is-none{color:var(--jz-faint)}
#app .sg .sg-cnt{font:400 13px/18px var(--jz-sans);color:var(--jz-muted);font-variant-numeric:tabular-nums}
#app .sg .sg-bar{position:relative;height:8px;margin:var(--jz-s4) 0 0;border-radius:var(--jz-r-full);background:var(--jz-field);overflow:hidden}
#app .sg .sg-bar i{position:absolute;left:0;top:0;bottom:0;width:var(--sg-w,0%);border-radius:inherit;background:var(--jz-amber-dot)}
#app .sg .sg-say{margin:var(--jz-s3) 0 0;font:400 15px/20px var(--jz-sans);color:var(--jz-ink);text-wrap:pretty}
#app .sg .sg-say b{font-weight:700;font-variant-numeric:tabular-nums}
#app .sg .sg-split{margin:var(--jz-s1) 0 0;font:400 13px/18px var(--jz-sans);color:var(--jz-muted);font-variant-numeric:tabular-nums}

/* a to-do notice that is itself the row (design-learnings 16) */
#app .sg .sg-notice{display:flex;align-items:center;gap:var(--jz-s3);min-height:60px;margin:0 0 var(--jz-s6);padding:var(--jz-s2) var(--jz-s4);background:var(--jz-card);border-radius:var(--jz-r);box-shadow:var(--jz-shadow);color:var(--jz-ink);text-decoration:none}
#app .sg .sg-notice:active{background:var(--jz-field)}
#app .sg .sg-notice-dot{flex:none;width:10px;height:10px;margin:0 6px;border-radius:50%;background:var(--jz-amber-dot)}
#app .sg .sg-notice-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
#app .sg .sg-notice-t b{font:600 17px/22px var(--jz-sans)}
#app .sg .sg-notice-t small{font:400 15px/20px var(--jz-sans);color:var(--jz-muted)}

/* ---- snag rows ---- */
#app .sg .sg-list>.sg-row+.sg-row::before{left:76px}
#app .sg .sg-row{position:relative;display:flex;align-items:center;gap:var(--jz-s3);min-height:72px;padding:var(--jz-s3) var(--jz-s4);color:var(--jz-ink);text-decoration:none}
#app .sg .sg-row:active{background:var(--jz-field)}
#app .sg .sg-thumb{flex:none;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;overflow:hidden;border-radius:10px;background:var(--jz-field)}
#app .sg .sg-thumb img{display:block;width:100%;height:100%;object-fit:cover}
#app .sg .sg-thumb svg{width:24px;height:24px;fill:none;stroke:var(--jz-faint);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
#app .sg .sg-thumb.sg-ic{background:var(--jz-soft)}
#app .sg .sg-thumb.sg-ic svg{stroke:var(--jz-forest)}
#app .sg .sg-row-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#app .sg .sg-row-t b{font:600 17px/22px var(--jz-sans);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
#app .sg .sg-row-t small{font:400 15px/20px var(--jz-sans);color:var(--jz-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#app .sg .sg-row-r{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:2px;max-width:42%;text-align:right}
#app .sg .sg-row-r b{font:600 17px/22px var(--jz-sans);color:var(--jz-ink);font-variant-numeric:tabular-nums}
#app .sg .sg-row-r .jz-st{font-size:15px;line-height:20px}
#app .sg .sg-sm{font:400 13px/18px var(--jz-sans);color:var(--jz-muted)}
#app .sg .sg-none{margin:0;padding:var(--jz-s4);font:400 15px/20px var(--jz-sans);color:var(--jz-muted)}
#app .sg .sg-none-card{margin:0 0 var(--jz-s3);background:var(--jz-card);border-radius:var(--jz-r);box-shadow:var(--jz-shadow)}

/* ---- add a snag: a row that opens into the form ---- */
#app .sg .sg-add{margin:calc(-1 * var(--jz-s3)) 0 var(--jz-s6)}
#app .sg .sg-add>summary{display:flex;align-items:center;gap:var(--jz-s3);min-height:56px;padding:0 var(--jz-s4);list-style:none;background:var(--jz-card);border-radius:var(--jz-r);box-shadow:var(--jz-shadow);cursor:pointer;color:var(--jz-forest)}
#app .sg .sg-add>summary::-webkit-details-marker{display:none}
#app .sg .sg-add>summary b{font:600 17px/22px var(--jz-sans)}
#app .sg .sg-add>summary:active{background:var(--jz-field)}
#app .sg .sg-plus{flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--jz-r-icon);background:var(--jz-soft)}
#app .sg .sg-plus svg{width:20px;height:20px;fill:none;stroke:var(--jz-forest);stroke-width:2;stroke-linecap:round}
#app .sg .sg-add[open]>summary{border-radius:var(--jz-r) var(--jz-r) 0 0;box-shadow:none}
#app .sg .sg-add[open]{background:var(--jz-card);border-radius:var(--jz-r);box-shadow:var(--jz-shadow);padding-bottom:var(--jz-s4)}
#app .sg .sg-addform{margin:0;padding:0 var(--jz-s4)}
#app .sg .sg-addform .jz-group{margin:0 0 var(--jz-s3);background:var(--jz-field);box-shadow:none;border-radius:var(--jz-r-m)}
#app .sg .sg-addform .jz-row:active,#app .sg .sg-addform .jz-row:focus-within{background:transparent}
#app .sg .sg-addform .jz-file{margin:0;padding:var(--jz-s3) var(--jz-s4);background:transparent;box-shadow:none;border-radius:0}
#app .sg .sg-addform .jz-file-ic{background:var(--jz-card)}
#app .sg .sg-addform>.alert{margin:0 0 var(--jz-s3)}

/* ---- values, rows that are forms ---- */
#app .sg .sg-val{margin-left:auto;min-width:0;text-align:right;font:400 17px/22px var(--jz-sans);color:var(--jz-muted);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#app .sg .sg-amt{color:var(--jz-ink);font-weight:600}
#app .sg .sg-formgo{display:flex;justify-content:flex-end;padding:var(--jz-s2) var(--jz-s4) var(--jz-s3)}
#app .sg .jz-group>form{position:relative;margin:0}
#app .sg .sg-gobtn{width:100%;margin:0;border:0;border-radius:0;background:none;box-shadow:none;text-align:left;font:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
#app .sg .sg-gobtn .jz-go-t small{white-space:normal}
#app .sg .sg-gobtn.is-red .jz-go-t b{color:var(--jz-red)}
#app .sg .sg-gobtn.is-red .jz-go-ic{background:var(--jz-red-soft)}
#app .sg .sg-gobtn.is-red .jz-go-ic svg{stroke:var(--jz-red)}
#app .sg .jz-group>form+form::before,#app .sg .jz-group>*+form::before{left:60px}

/* money held back: a row that opens in place (design-learnings 30) */
#app .sg details.sg-held>summary{list-style:none}
#app .sg details.sg-held>summary::-webkit-details-marker{display:none}
#app .sg details.sg-held>summary::after{content:"";flex:none;width:7px;height:7px;margin:0 4px 0 2px;border:solid var(--jz-chev);border-width:0 2px 2px 0;transform:rotate(-45deg);transition:transform var(--jz-ease)}
#app .sg details.sg-held[open]>summary::after{transform:rotate(45deg)}
#app .sg details.sg-held>summary .sg-val{color:var(--jz-ink);font-weight:600}
/* the label is the whole row: it never wraps at the kit's 55% and pulls the chevron to the middle */
#app .sg details.sg-held>summary>.k{flex:1;max-width:none}
#app .sg .sg-heldform{position:relative;margin:0}
#app .sg :is(.sg-heldform,.sg-paperform,.sg-valform)>*{position:relative}
#app .sg :is(.sg-heldform,.sg-paperform,.sg-valform)>:not(input[type=hidden])+*::before{content:"";position:absolute;top:0;left:var(--jz-s4);right:0;height:.5px;background:var(--jz-chev);opacity:.5;pointer-events:none}

/* ---- paperwork ---- */
#app .sg .sg-paper{position:relative;display:flex;align-items:center;gap:var(--jz-s3);min-height:60px;padding:var(--jz-s2) var(--jz-s4);color:var(--jz-ink);text-decoration:none}
#app .sg a.sg-paper:active{background:var(--jz-field)}
#app .sg .sg-paper .jz-st{flex:none;font-size:15px;line-height:20px}
#app .sg .sg-paper.is-held .jz-go-ic{background:var(--jz-field)}
#app .sg .sg-paper.is-held .jz-go-ic svg{stroke:var(--jz-muted)}
#app .sg .sg-papers>*+*::before{left:60px}
#app .sg .sg-addpaper>summary{list-style:none;cursor:pointer}
#app .sg .sg-addpaper>summary::-webkit-details-marker{display:none}
#app .sg .sg-addpaper>summary b{color:var(--jz-forest)}
#app .sg .sg-paperform{position:relative;margin:0;background:var(--jz-field)}
#app .sg .sg-paperform .jz-row:active,#app .sg .sg-paperform .jz-row:focus-within{background:transparent}
#app .sg .sg-paperform .jz-file{margin:0;padding:var(--jz-s3) var(--jz-s4);background:transparent;box-shadow:none;border-radius:0}
#app .sg .sg-paperform .jz-file-ic{background:var(--jz-card)}
#app .sg .sg-legal{margin-top:calc(-1 * var(--jz-s4))}
/* the "give it later" tick: the shared ring-then-tick look, on a square */
#app .sg .sg-check{min-height:64px;padding-top:var(--jz-s2);padding-bottom:var(--jz-s2)}
#app .sg .sg-check input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
#app .sg .sg-box{flex:none;width:24px;height:24px;border-radius:7px;box-shadow:inset 0 0 0 1.5px var(--jz-field-line);background:var(--jz-card);position:relative}
#app .sg .sg-check input:checked+.sg-box{background:var(--jz-forest);box-shadow:none}
#app .sg .sg-check input:checked+.sg-box::after{content:"";position:absolute;left:8.5px;top:4px;width:6px;height:12px;border:solid #fff;border-width:0 2.25px 2.25px 0;transform:rotate(45deg)}
#app .sg .sg-check input:focus-visible+.sg-box{outline:2px solid var(--jz-forest);outline-offset:2px}
#app .sg .sg-check-t{display:flex;flex-direction:column;gap:2px;font:400 17px/22px var(--jz-sans);color:var(--jz-ink)}
#app .sg .sg-check-t small{font:400 13px/18px var(--jz-sans);color:var(--jz-muted)}
/* remove a file: tucked behind a quiet row */
#app .sg .sg-rm>summary::-webkit-details-marker{display:none}
#app .sg .sg-rmbtn{display:flex;align-items:center;width:100%;min-height:52px;margin:0;padding:0 var(--jz-s4);border:0;background:none;box-shadow:none;text-align:left;font:400 17px/22px var(--jz-sans);color:var(--jz-red);cursor:pointer}
#app .sg .sg-rmbtn:active{background:var(--jz-field)}

/* ---- one snag: before and after ---- */
#app .sg .sg-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--jz-s3);margin:0 0 var(--jz-s6)}
#app .sg .sg-shot{margin:0;min-width:0}
#app .sg .sg-shot a{display:block}
#app .sg .sg-shot img,#app .sg .sg-shot-none{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--jz-r);background:var(--jz-field);box-shadow:var(--jz-shadow)}
#app .sg .sg-shot-none{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;box-shadow:inset 0 0 0 .5px var(--jz-hair)}
#app .sg .sg-shot-none svg{width:32px;height:32px;fill:none;stroke:var(--jz-faint);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#app .sg .sg-shot-none small{font:400 13px/18px var(--jz-sans);color:var(--jz-faint)}
#app .sg .sg-shot figcaption{margin:var(--jz-s2) 0 0;padding:0 var(--jz-s1);font:600 13px/18px var(--jz-sans);color:var(--jz-muted)}
#app .sg .sg-beforeform{margin:calc(-1 * var(--jz-s3)) 0 var(--jz-s6)}
#app .sg .sg-beforeform .jz-file{margin:0 0 var(--jz-s2)}
#app .sg .jz-lt .jz-sub .jz-st{margin-left:var(--jz-s2)}
#app .sg #fixform .jz-file{margin-bottom:var(--jz-s6)}

/* ---- the share page ---- */
#app .sg-made textarea#sg-link{min-height:96px;color:var(--jz-ink)}
#app .sg-made .sg-gobtn .jz-go-t small{color:var(--jz-muted)}

/* ---- the customer's page ---- */
#app .sg-pub .sg-card{margin:0 0 var(--jz-s3);background:var(--jz-card);border-radius:var(--jz-r);box-shadow:var(--jz-shadow);overflow:hidden;scroll-margin-top:72px}
#app .sg-pub .sg-card-ph{display:block}
#app .sg-pub .sg-card-ph img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--jz-field)}
#app .sg-pub .sg-card-b{padding:var(--jz-s4)}
#app .sg-pub .sg-card-t{display:flex;flex-direction:column;gap:2px;margin:0}
#app .sg-pub .sg-card-t b{font:600 17px/22px var(--jz-sans);overflow-wrap:anywhere}
#app .sg-pub .sg-card-t small{font:400 15px/20px var(--jz-sans);color:var(--jz-muted)}
#app .sg-pub .sg-card-v{display:flex;align-items:center;justify-content:space-between;gap:var(--jz-s3);margin:var(--jz-s3) 0 0;padding:var(--jz-s3) 0 0;box-shadow:inset 0 .5px 0 rgba(23,33,29,.14);font:400 17px/22px var(--jz-sans);color:var(--jz-muted)}
#app .sg-pub .sg-card-v b{color:var(--jz-ink);font-weight:700;font-variant-numeric:tabular-nums}
#app .sg-pub .sg-card-v .jz-st{font-size:15px;line-height:20px}
#app .sg-pub .sg-card-n{margin:var(--jz-s2) 0 0;font:400 15px/20px var(--jz-sans);color:var(--jz-muted)}
#app .sg-pub .sg-card-b form{margin:var(--jz-s3) 0 0}
#app .sg-pub .sg-agree{min-height:48px}
#app .sg-pub .sg-suggest{margin:var(--jz-s1) 0 0}
/* the second choice is a row with a chevron, never a centred loose link (design-learnings 33) */
#app .sg-pub .sg-suggest>summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;margin:var(--jz-s3) 0 calc(-1 * var(--jz-s2));box-shadow:inset 0 .5px 0 rgba(23,33,29,.14);list-style:none;font:600 17px/22px var(--jz-sans);color:var(--jz-forest);cursor:pointer}
#app .sg-pub .sg-suggest>summary::after{content:"";flex:none;width:7px;height:7px;margin:0 4px 0 8px;border:solid var(--jz-chev);border-width:0 2px 2px 0;transform:rotate(-45deg);transition:transform var(--jz-ease)}
#app .sg-pub .sg-suggest[open]>summary::after{transform:rotate(45deg)}
#app .sg-pub .sg-suggest>summary::-webkit-details-marker{display:none}
#app .sg-pub .sg-sugform{display:flex;flex-direction:column;gap:var(--jz-s2);margin:var(--jz-s1) 0 0}
#app .sg-pub .sg-sugform .jz-row{border-radius:var(--jz-r-m);background:var(--jz-field)}
#app .sg-pub .sg-sugform .btn{align-self:flex-end}
#app .sg-pub .sg-pair-in{margin:0;padding:var(--jz-s3) var(--jz-s3) 0;gap:var(--jz-s2)}
#app .sg-pub .sg-pair-in .sg-shot img{border-radius:var(--jz-r-m);box-shadow:none}
#app .sg-pub .sg-pair-in figcaption{margin-top:6px}
#app .sg-pub .sg-add{margin:var(--jz-s1) 0 var(--jz-s6)}
#app .sg .sg-legal-row{display:flex;align-items:flex-start;gap:var(--jz-s3);padding:var(--jz-s3) var(--jz-s4)}
#app .sg .sg-legal-row p{display:flex;flex-direction:column;gap:2px;margin:0}
#app .sg .sg-legal-row b{font:600 17px/22px var(--jz-sans)}
#app .sg .sg-legal-row small{font:400 15px/20px var(--jz-sans);color:var(--jz-muted)}
#app .sg .sg-legal-row .jz-go-ic{margin-top:2px}
#app .sg :is(.sg-heldform,.sg-paperform,.sg-valform)>.sg-formgo::before{content:none}
#app .sg .sg-formgo{padding-top:0}
#app .sg .sg-paper .jz-go-t small{white-space:normal}
#app .sg .sg-paper .jz-go-t small .jz-st{margin-right:6px;font-size:15px}
#app .sg .sg-paper .jz-go-t b{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* The bar's two ends, so it says what it measures. */
#app .sg .sg-barkey{display:flex;justify-content:space-between;margin:6px 0 0;font:400 13px/16px var(--jz-sans);color:var(--jz-muted)}
/* Remove a file: a row in the paperwork group that opens to one button per file. */
#app .sg .sg-rm>summary{list-style:none;cursor:pointer}
#app .sg .sg-rm>summary b{color:var(--jz-red)}
#app .sg .sg-rm .sg-rmbtn{padding-left:60px;color:var(--jz-red)}
/* The held-back row sits right under the hero now. */
#app .sg .sg-held{margin:var(--jz-s3) 0 0}

/* Walkthrough 1 Nov: "Mark fixed" with no photo did nothing you could see. Until the after photo is picked the tray
   shows a white "Add the after photo first" that opens the camera (a label for the file input), not the button. */
#app .sg-one .dock .sg-pickfirst{display:none}
#app .sg-one:has(#sg-after:invalid) .dock #mark-fixed{display:none}
#app .sg-one:has(#sg-after:invalid) .dock .sg-pickfirst{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;margin:0;background:var(--jz-card);color:var(--jz-forest);box-shadow:inset 0 0 0 1.5px var(--jz-forest);cursor:pointer}

/* ---- art director 1 Nov: the job picker sheet behind a list's "+" (Snags and Gas safety share it) ----
   Hidden until the + is tapped (#pick-job is the :target), no script. Cancel and the dimmed backdrop go to "#". */
#app .fx-sheet{display:none}
#app .fx-sheet:target{display:block;position:fixed;inset:0;z-index:40}
#app .fx-sheet-bg{position:absolute;inset:0;background:rgba(15,22,19,.38);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
#app .fx-sheet-panel{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:430px;max-height:82vh;max-height:82dvh;box-sizing:border-box;overflow-y:auto;overscroll-behavior:contain;padding:8px var(--jz-gutter) calc(var(--jz-safe-b) + 24px);background:var(--jz-paper);border-radius:var(--jz-r-l) var(--jz-r-l) 0 0;box-shadow:0 -12px 40px -12px rgba(15,22,19,.35)}
#app .fx-sheet-panel::before{content:"";display:block;width:36px;height:5px;margin:0 auto 8px;border-radius:3px;background:var(--jz-chev)}
#app .fx-sheet:target .fx-sheet-panel{animation:fxsheet 260ms cubic-bezier(.16,1,.3,1)}
@keyframes fxsheet{from{transform:translate(-50%,24px);opacity:.4}to{transform:translate(-50%,0);opacity:1}}
@media (prefers-reduced-motion:reduce){#app .fx-sheet:target .fx-sheet-panel{animation:none}}
#app .fx-sheet-head{display:flex;align-items:center;justify-content:space-between;min-height:44px;margin:0 0 12px}
#app .fx-sheet-head h2{margin:0;font:700 22px/28px var(--jz-sans);letter-spacing:-.02em;color:var(--jz-ink);text-transform:none}
#app .fx-sheet-x{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font:400 17px/22px var(--jz-sans);color:var(--jz-forest);text-decoration:none}
#app .fx-sheet .jz-gogroup,#app .fx-sheet .group{margin-bottom:0}
body:has(.fx-sheet:target){overflow:hidden}

/* ---- art director 1 Nov: the customer's page leads with one sentence on the kit's dark hero (as Waiting does) ----
   "You're holding back £1,500 for £155 of open snags." The figures take the hero accent; one muted line of detail. */
#app .sg-pub .sg-hero{margin:0 0 var(--jz-s6)}
#app .sg-pub .sg-hero-t{margin:0;font:700 26px/32px var(--jz-sans);letter-spacing:-.025em;color:var(--jz-on-night);text-wrap:pretty}
#app .sg-pub .sg-hero-t b{font-weight:800;color:var(--accent,var(--jz-hero-num));font-variant-numeric:tabular-nums;white-space:nowrap}
#app .sg-pub .sg-hero-s{margin:var(--jz-s3) 0 0;font:400 15px/20px var(--jz-sans);color:var(--jz-night-muted);text-wrap:pretty;font-variant-numeric:tabular-nums}

/* ===================== 6 Nov rebuild: Fresh light and Night (docs/design-system.md) =====================
   Later rules win over the older ones above. The Snag Clock is a paper hero with both figures in Cabinet; snags are
   one card of rows with a chip each; the customer's cards are 28px cards. Role tokens only. */
#app .sg .sg-sum{padding:var(--jz-s5);border-radius:var(--jz-r-card)}
#app .sg .sg-fig small{font:600 var(--jz-t-meta)/1.25 var(--jz-sans);color:var(--jz-ink-2)}
#app .sg .sg-fig.is-snags small{color:var(--jz-late)}
#app .sg .sg-n{margin-top:6px;font:800 44px/.95 var(--jz-display);letter-spacing:var(--jz-track-num);color:var(--jz-ink)}
#app .sg .sg-fig.is-snags .sg-n{color:var(--jz-late)}
#app .sg .sg-n.is-none{color:var(--jz-ink-2)}
#app .sg .sg-cnt{margin-top:6px;font:500 var(--jz-t-meta)/1.3 var(--jz-sans);color:var(--jz-ink-2)}
#app .sg .sg-fig.is-snags{box-shadow:inset 1.5px 0 0 var(--jz-hair)}
#app .sg .sg-bar{height:12px;margin-top:var(--jz-s5);background:var(--jz-ring-track)}
#app .sg .sg-bar i{background:var(--jz-late-arc)}
#app .sg .sg-barkey{font:600 var(--jz-t-label)/1.2 var(--jz-sans);color:var(--jz-ink-2)}
#app .sg .sg-say{margin-top:var(--jz-s4);font:500 var(--jz-t-body)/1.4 var(--jz-sans);color:var(--jz-ink)}
#app .sg .sg-split{font:500 var(--jz-t-meta)/1.35 var(--jz-sans);color:var(--jz-ink-2)}
#app .sg .sg-notice{min-height:72px;border-radius:var(--jz-r-card);box-shadow:var(--jz-shadow),inset 6px 0 0 var(--jz-late-edge)}
#app .sg .sg-notice-dot{background:var(--jz-late-edge)}
#app .sg .sg-notice-t small{color:var(--jz-ink-2)}
/* rows */
#app .sg .sg-list.jz-list{margin:0 0 14px}
#app .sg .sg-list>.sg-row+.sg-row::before{left:86px;right:18px;height:1.5px;background:var(--jz-hair)}
#app .sg .sg-row{min-height:84px;padding:14px 18px;gap:14px}
#app .sg .sg-thumb{width:56px;height:56px;border-radius:var(--jz-r-s)}
#app .sg .sg-thumb.sg-ic{border-radius:50%;background:var(--jz-wash)}
#app .sg .sg-row-t b{font:600 18px/1.25 var(--jz-sans)}
#app .sg .sg-row-t small{font:500 var(--jz-t-meta)/1.35 var(--jz-sans);color:var(--jz-ink-2)}
#app .sg .sg-row-r{gap:6px}
#app .sg .sg-row-r b,#app .sg .sg-row-r .jz-li-v{font:800 20px/1 var(--jz-display);letter-spacing:-.03em;color:var(--jz-ink)}
#app .sg .sg-row-r .jz-chip{min-height:30px;padding:0 10px 0 8px;font-size:14px}
#app .sg .sg-row-r .jz-chip .jz-ic{width:15px;height:15px}
#app .sg .sg-sm{font:500 var(--jz-t-label)/1.2 var(--jz-sans);color:var(--jz-ink-2)}
#app .sg .sg-none{font:500 var(--jz-t-body)/1.4 var(--jz-sans);color:var(--jz-ink-2);padding:var(--jz-s5)}
#app .sg .sg-add>summary,#app .sg .sg-add[open]{border-radius:var(--jz-r-card)}
#app .sg .sg-add>summary{min-height:64px;color:var(--jz-forest)}
#app .sg .sg-plus{width:40px;height:40px;border-radius:50%;background:var(--jz-wash)}
#app .sg .sg-add[open]>summary{border-radius:var(--jz-r-card) var(--jz-r-card) 0 0}
#app .sg .sg-addform .jz-btn{margin-top:var(--jz-s2)}
#app .sg .sg-paper .jz-chip{min-height:30px;padding:0 10px 0 8px;font-size:14px;margin-right:6px}
#app .sg .sg-paper .jz-chip .jz-ic{width:15px;height:15px}
#app .sg .sg-shot img,#app .sg .sg-shot-none{border-radius:var(--jz-r-inner)}
#app .sg .sg-shot figcaption{font:600 var(--jz-t-label)/1.2 var(--jz-sans);color:var(--jz-ink-2)}
#app .sg .jz-lt .jz-sub .jz-chip{margin-left:6px}
/* the customer's page */
#app .sg-pub .sg-hero{padding:var(--jz-s5)}
#app .sg-pub .sg-hero-t{margin:0;font:700 26px/1.2 var(--jz-display);letter-spacing:-.015em;color:var(--jz-ink);text-wrap:balance}
#app .sg-pub .sg-hero-t b{font-weight:800;color:var(--jz-ink);white-space:nowrap}
#app .sg-pub .sg-hero-s{margin:var(--jz-s3) 0 0;font:500 var(--jz-t-meta)/1.4 var(--jz-sans);color:var(--jz-ink-2)}
#app .sg-pub .sg-hero.is-done{box-shadow:var(--jz-shadow),inset 0 0 0 2px var(--jz-done)}
#app .sg-pub .sg-card{padding:0;margin:0 0 14px;border-radius:var(--jz-r-card)}
#app .sg-pub .sg-card-b{padding:var(--jz-s5)}
#app .sg-pub .sg-card-t b{font:600 18px/1.3 var(--jz-sans)}
#app .sg-pub .sg-card-t small{font:500 var(--jz-t-meta)/1.35 var(--jz-sans);color:var(--jz-ink-2)}
#app .sg-pub .sg-card-v{margin-top:var(--jz-s4);padding-top:var(--jz-s4);box-shadow:inset 0 1.5px 0 var(--jz-hair);font:500 var(--jz-t-body)/1.3 var(--jz-sans);color:var(--jz-ink-2)}
#app .sg-pub .sg-card-v b{font:800 26px/1 var(--jz-display);letter-spacing:-.02em;color:var(--jz-ink)}
#app .sg-pub .sg-card-n{font:500 var(--jz-t-meta)/1.4 var(--jz-sans);color:var(--jz-ink-2)}
#app .sg-pub .sg-card form{margin-top:var(--jz-s4)}
#app .sg-pub .sg-suggest>summary{min-height:48px;display:flex;align-items:center;color:var(--jz-forest);font:600 var(--jz-t-body)/1.2 var(--jz-sans)}
#app .sg-pub .sg-card.is-fixed .sg-pair-in{padding:var(--jz-s4) var(--jz-s4) 0;margin:0}
#app .sg-pub .sg-papers{border-radius:var(--jz-r-card)}
#app .sg-pub .sg-legal-row{background:var(--jz-wash)}
#app .sg-pub .sg-legal-row b{color:var(--jz-forest)}
/* rows: the value and the chip sit on a second line under the words, so a long snag isn't cut to two words */
#app .sg .sg-list .sg-row{flex-wrap:wrap;row-gap:8px}
#app .sg .sg-list .sg-row .sg-row-t{flex:1 1 0}
#app .sg .sg-list .sg-row .sg-row-r{flex:1 0 100%;max-width:none;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;padding-left:70px;text-align:left}
#app .sg .sg-list .sg-row-t small{white-space:normal}
#app .sg .sg-add{margin-top:0}

/* Q7c (6 Nov): the customer's snag card. The photo was a full-width 16:10 block that took the whole first screen (and
   a placeholder photo looked like the page's subject). It is now a 104px thumbnail beside the snag's words; a tap
   still opens it full size. */
#app .sg-pub .sg-card{display:flow-root}
#app .sg-pub .sg-card-ph{float:right;width:104px;height:104px;margin:20px 20px 4px 14px;border-radius:var(--jz-r-inner);overflow:hidden;background:var(--jz-surface-2);box-shadow:inset 0 0 0 1.5px var(--jz-hair)}
#app .sg-pub .sg-card-ph img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
#app .sg-pub .sg-card-ph+.sg-card-b{min-height:88px}
#app .sg-pub .sg-card-ph+.sg-card-b .sg-card-v{clear:both}