/* admin/css/30-lists-folds-leads.css: Today, folds, rows, the leads table and cards, timeline, toast, sheets, the lead panel.
   The admin stylesheet is these files in numeric order, linked from admin.html; a later file overrides an earlier one, so keep the order. */
/* ---------- the groups that never fold ---------- */
/* Today's handoffs are drawn, not offered. Same head as a fold so the page
   reads as one grammar, minus the chevron and anything to collapse: there is
   no state to remember, which is the whole point (a fold he shut in September
   stayed shut in October). */
.panel.group-open{padding:0;overflow:hidden}
.og-head{display:flex;align-items:center;gap:16px;padding:20px 24px}
.og-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px}
.group-open>.fold-body{border-top:1px solid var(--line)}

/* ---------- folds: a heading that opens ---------- */
.fold{padding:0;overflow:hidden}
.fold-head{display:flex;align-items:center;gap:16px;width:100%;padding:20px 24px;background:none;border:0;text-align:left;cursor:pointer;color:inherit;font:inherit;transition:background .14s}
@media(hover:hover){.fold-head:hover{background:rgba(255,255,255,.025)}}
.fold-head:focus-visible{outline:2px solid var(--blaze-hot);outline-offset:-3px}
.fold-ico{display:none}
.fold-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px}
.fold-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.fold-title{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.015em;color:var(--ink);min-width:0}
.fold-row .count{font-family:var(--display);font-size:17px;font-weight:700;color:var(--slate);letter-spacing:-.01em}
.fold-tag{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--mist);min-width:0;overflow-wrap:anywhere}
.fold-tag.good,.fold-tag.warn,.fold-tag.bad{padding-left:0}
.fold-tag.good::before,.fold-tag.warn::before,.fold-tag.bad::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.fold-tag.good{color:var(--t-moss)} .fold-tag.warn{color:var(--wheat)} .fold-tag.bad{color:var(--t-rose)}
/* the labelled figures: one quiet line, "3 items · Oldest 1 day" */
.fold-facts{display:flex;flex-wrap:wrap;align-items:baseline;gap:9px 24px;font-size:14px;color:var(--slate);line-height:1.4}
.fact{display:inline-flex;align-items:baseline;gap:9px;min-width:0}
.fact i{font-style:normal;color:var(--slate)}
.fact b{font-weight:700;font-size:15.5px;color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
/* the deciding figure on a closed header is a figure, set in the display face */
.fact.lead b{font-family:var(--display);font-size:22px;letter-spacing:-.02em;line-height:1}
.fact.good b{color:var(--t-moss)} .fact.bad b{color:var(--t-rose)} .fact.warn b{color:var(--wheat)}
.fold-note{font-size:14px;color:var(--slate);line-height:1.5}
.fold-note b{color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.fold-chev{width:22px;height:22px;flex:none;color:var(--mist);transition:transform .3s var(--ease),color .2s}
.fold.is-open .fold-chev{transform:rotate(180deg);color:var(--ink)}
/* THE ACCORDION. The wrapper animates from 0fr to 1fr, so a group eases open
   and shut instead of snapping; the body inside it keeps every rule it had.
   Closed, the wrapper turns `visibility:hidden` once the animation is over,
   which is what keeps its buttons out of the tab order and off a screen
   reader now that the `hidden` attribute is gone. */
.fold-wrap{display:grid;grid-template-rows:0fr;visibility:hidden;
  transition:grid-template-rows .3s var(--ease),visibility 0s linear .3s}
.fold.is-open>.fold-wrap{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .3s var(--ease),visibility 0s}
/* The BODY'S OWN PADDING has to collapse with it. `box-sizing:border-box` and
   a zero height row still reserve the padding, so a shut fold grew a 37px dead
   strip under its header the first time this was tried. */
.fold-wrap>.fold-body{overflow:hidden;min-height:0;padding-top:0;padding-bottom:0;
  transition:padding-top .3s var(--ease),padding-bottom .3s var(--ease)}
.fold.is-open>.fold-wrap>.fold-body{padding-top:18px;padding-bottom:18px}
/* the body owns the space above its first child and below its last;
   `>*+*` owns the space between siblings; no child brings an edge margin */
.fold-body{border-top:1px solid var(--line);padding-top:18px;padding-bottom:18px}
.fold-body>*{padding-left:24px;padding-right:24px}
.fold-body>*+*{margin-top:16px}
.fold-body>:first-child{margin-top:0}
.fold-body>:last-child{margin-bottom:0}
.fold-help{margin:0;max-width:96ch}
.fold-body>.fold-help+*{margin-top:12px}
.fold-body>.lead-row,.fold-body>.tpl-card{padding-left:24px;padding-right:24px}
.fold-body>.lead-row+.lead-row,.fold-body>.tpl-card+.tpl-card{margin-top:0}
.fold-body>.lead-row:last-child,.fold-body>.tpl-card:last-child{border-bottom:0}
.fold-body>.tpl-card{padding-left:0;padding-right:0}
.fold-body>.tpl-card .tpl-head,.fold-body>.tpl-card .tpl-body{padding-left:24px;padding-right:24px}
.fold-body>.fold-h+p,.fold-body>.fold-h+.sub{margin-top:8px}
.fold-body>.panel-head{margin-bottom:0}
.fold-bar{display:flex;gap:6px;margin:0 0 12px}
.goal-fold .fold-body>.panel.goal{background:none;border:0;border-radius:0;padding-top:0;padding-bottom:0;box-shadow:none}
.goal-fold .fold-body>.panel.goal::before,.goal-fold .fold-body>.panel.goal::after{display:none}

/* the foot of a group that opened as far as the screen allows */
.row-more{display:flex;align-items:center;gap:12px;padding-top:14px}
.row-more span{font-size:13.5px;color:var(--mist)}

/* ---------- rows: the thing there is most of ---------- */
/* THE NAME COLUMN HAS A FLOOR, and the buttons wrap before it is crossed.
   The actions track is `auto`, so it takes whatever its buttons want and the
   name takes the rest. In the two column band (Today from 1400px) a row is
   535px, and a FOUR button seasonal row (Call, Text, Booked, Not this year)
   wants 396 of it, which left the name 123px and broke "Harold Ziemer" over
   two lines. `.row-actions` already wraps, so a floor drops the fourth button
   to a second line instead of breaking somebody's name in half.

   140px IS MEASURED, not guessed, and it sits in the middle of the band that
   works. A three button set wants at most 302px, so it still fits beside the
   floor; 190px does not, and cost twenty otherwise fine rows a second line of
   buttons. Counted over 108 rows at 1400/1440/1600 for three roles:

     floor    names broken   button rows wrapped
       0px          8                0      <- the bug
     110px          4                8
     125px          0                8
     140px          0                8      <- shipped
     160px          0                8
     190px          0               28      <- over-corrected

   Re-measure with `tune3.mjs` if a row ever gains a button. */
.lead-row{display:grid;grid-template-columns:minmax(min(140px,100%),1fr) auto;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line);transition:background .14s}
/* the row is the thing there is most of, so it answers the pointer */
@media(hover:hover){.fold-body>.lead-row:hover,.panel>.lead-row:hover{background:rgba(255,255,255,.022)}}
.lead-row:last-child{border-bottom:none}
.lead-row .who{min-width:0}
.lead-row .who a,.lead-row .who b,.lead-row .who .gtitle{color:var(--ink);text-decoration:none;font-weight:600;font-size:16.5px}
@media(hover:hover){.lead-row .who a:hover{color:var(--blaze-hot)}}
.lead-row .meta{display:flex;align-items:center;gap:7px 14px;flex-wrap:wrap;font-size:14px;color:var(--slate);margin-top:7px;text-wrap:pretty}   /* no lone last word ("nobody to inspect / it") */
/* the band sits beside a 16.5px name, so one space is not a gap */
.lead-row .who .band,.jobcard h3 .band,.pcard b .band{margin-left:4px}
.lead-row .meta .svc{color:var(--slate);font-weight:500}
/* what else is waiting on a lead shown once (2026-10-09): one quiet line, never a button */
.lead-row .also{font-size:13.5px;color:var(--mist);margin-top:6px;text-wrap:pretty}
.lead-row .also::first-letter{text-transform:uppercase}
.row-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.row-actions .btn{padding:9px 13px;font-size:13.5px}
.row-actions .btn .ic{width:14px;height:14px}
.people{display:flex;flex-direction:column}
.person-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}
.person-row:last-child{border-bottom:none}
.person-row .meta{display:flex;gap:7px 14px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--slate);margin-top:6px}
/* a deactivated person reads as one by the word in the row and a quieter name,
   never by opacity: .55 took the row to 2.8:1 */
.person-row.off .who>b{color:var(--slate)}
/* Team: the state that needs doing, in wheat; the rest of the meta stays quiet. */
.person-row .meta .warn{color:var(--wheat);font-weight:600}
.person-row .row-actions{align-items:center}
.person{display:flex;align-items:center;gap:12px;min-width:0}
.person .who b{display:block;font-size:16px;font-weight:600}
.person .who>span{display:block;font-size:13px;color:var(--slate);margin-top:4px}
.avatar{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid var(--line);font-family:var(--display);font-weight:700;font-size:12px;color:var(--slate);flex:none}
.assignee{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--slate)}
.assignee .avatar{width:22px;height:22px;font-size:10px}

/* ---------- the leads table and the phone cards ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%;max-width:100%}
table.table{width:100%;border-collapse:collapse;font-size:14.5px}
.table thead th{font-size:13.5px;font-weight:600;color:var(--mist);text-align:left;padding:4px 12px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.table tbody td{padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.table tbody tr[data-row]{cursor:pointer;transition:background .12s}
@media(hover:hover){.table tbody tr[data-row]:hover{background:rgba(255,255,255,.025)}}
.table tbody tr:last-child td{border-bottom:none}
tr.flash{animation:rowflash 2s ease}
@keyframes rowflash{0%{background:rgba(255,106,36,.18)}100%{background:transparent}}
.lead-name{font-weight:600;font-size:16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lead-name .nm{white-space:nowrap}
.lead-sub{font-size:13.5px;color:var(--slate);margin-top:3px}
.lead-meta{display:flex;flex-wrap:wrap;align-items:center;line-height:1.4}
.lead-when{color:var(--mist)}
.dotsep::before{content:"\00B7";margin:0 6px;color:var(--mist)}
.tel{color:var(--ink);text-decoration:none;font-weight:500;white-space:nowrap}
@media(hover:hover){.tel:hover{color:var(--blaze-hot)}}
.lead-email{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lead-email .tel{color:var(--slate);font-weight:400}
.svc-tag{display:inline-block;font-size:12.5px;font-weight:500;border:1px solid var(--line);border-radius:6px;padding:3px 8px;white-space:nowrap}
.src,.age{font-size:13.5px;color:var(--slate);white-space:nowrap}
.td-lead{min-width:200px} .td-contact{min-width:150px} .td-status{width:150px} .td-stage{min-width:200px} .td-value{width:112px;min-width:108px}
.td-when{white-space:nowrap;color:var(--slate)}
/* the next step is a reminder, not the notes: two lines here (the whole of it on hover and in the lead),
   where a long one used to stack twelve lines in a narrow column and make its row four rows tall */
.lead-next{white-space:normal;min-width:130px;max-width:240px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.td-open{text-align:right;white-space:nowrap}
.open-btn{width:34px;height:34px;color:var(--mist);margin-right:-6px}
@media(hover:hover){.table tbody tr[data-row]:hover .open-btn{color:var(--ink)}}
.table .stage{white-space:normal;line-height:1.35}
.table .stage .dots i{width:9px;height:4px}
/* the stage under the status, for the laptop widths that hide the Stage column (responsive below);
   its words go under the dots rather than break in half beside them */
.status-stage{display:none;margin-top:8px}
.status-stage .stage{flex-wrap:wrap;row-gap:5px}
.table .val-in{width:100px;border-color:transparent;background:transparent;padding-left:0;padding-right:0}
.table .val-in::placeholder{color:var(--mist);opacity:1}
@media(hover:hover){.table tbody tr[data-row]:hover .val-in{border-color:var(--line-2);background:rgba(255,255,255,.03);padding-left:10px;padding-right:10px}}
.table .val-in:focus{border-color:var(--blaze-hot);padding-left:10px;padding-right:10px}
.money{display:flex;align-items:center;gap:6px}
.money i{font-style:normal;color:var(--slate);font-weight:600}
.money .val-in{width:100%}
.saving{opacity:.45;pointer-events:none}
.cards{display:none;flex-direction:column;gap:8px}
.lead-card{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;background:var(--card);min-width:0;cursor:pointer;transition:border-color .15s}
@media(hover:hover){.lead-card:hover{border-color:var(--line-2)}}
.lead-card:focus-visible{outline:2px solid var(--blaze-hot);outline-offset:2px}
.lead-card .row1{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:4px}
.lead-card .row1 .min0{min-width:0}
.lead-card .age{flex:none;padding-top:2px}
.lead-card .card-line{display:flex;align-items:center;gap:9px;margin-top:10px;min-width:0}
.card-value{font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums;margin-left:auto;white-space:nowrap}
.card-value.none{font-family:var(--text);font-weight:500;font-size:13px;color:var(--mist)}
.lead-card .card-call{flex:none;width:38px;height:38px;border:1px solid var(--line-2);color:var(--ink)}
.lead-card .card-go{flex:none;width:38px;height:38px;color:var(--mist)}
/* these two beat the touch block's .icon-btn 44px by specificity */
@media(pointer:coarse){.lead-card .card-call,.lead-card .card-go{width:44px;height:44px}}
.lead-card .card-next{margin-top:8px;font-size:13px}
.card-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.cf{display:flex;flex-direction:column;gap:5px;min-width:0}
.cf>span:first-child{font-size:12.5px;font-weight:600;color:var(--slate)}
.cf .status-sel{width:100%}

/* ---------- timeline ---------- */
.timeline{list-style:none;margin:14px 0 0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:13px;top:6px;bottom:6px;width:1px;background:var(--line)}
.tl-item{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;padding:7px 0}
.tl-kind{width:28px;height:28px;border-radius:50%;background:var(--card-2);border:1px solid var(--line);display:grid;place-items:center;color:var(--slate);position:relative;z-index:1}
.tl-kind .ic{width:13px;height:13px}
.tl-kind.status{color:var(--t-moss)} .tl-kind.note{color:var(--wheat)} .tl-kind.inspection{color:var(--st-approved)}
.tl-body{font-size:14px;line-height:1.5;word-break:break-word;white-space:pre-wrap;padding-top:4px}
.tl-when{font-size:12.5px;color:var(--mist);margin-top:2px}
.tl-when b{color:var(--slate);font-weight:500}

/* ---------- toast ---------- */
.toast{position:fixed;bottom:22px;right:22px;z-index:90;background:var(--card-2);color:var(--ink);border:1px solid var(--line-2);border-radius:var(--r);padding:12px 16px;font-size:14px;font-weight:500;box-shadow:var(--shadow-float);display:flex;align-items:center;gap:10px;opacity:0;transform:translateY(8px);transition:opacity .25s var(--ease),transform .25s var(--ease);pointer-events:none;max-width:min(92vw,440px)}
.toast.show{opacity:1;transform:none}
.toast .dot{width:7px;height:7px;border-radius:50%;background:var(--t-moss);flex:none}
.toast.is-bad .dot{background:var(--t-rose)}
.toast.is-bad{border-color:rgba(232,138,124,.4)}
.toast-act{font:inherit;font-weight:600;color:var(--blaze-hot);background:none;border:0;padding:0;margin-left:4px;cursor:pointer;white-space:nowrap;text-decoration:underline;text-underline-offset:3px}
.toast.has-act{pointer-events:auto}

/* ---------- scrim and sheet ---------- */
.scrim{position:fixed;inset:0;z-index:80;background:rgba(5,12,8,.66);display:grid;place-items:center;padding:20px;opacity:0;transition:opacity .2s var(--ease)}
.scrim.open{opacity:1}
/* The title and the close stay put and the middle scrolls: when the whole sheet scrolled, a long one
   (Book, Edit this service, Add a customer) opened with its Save below the fold and its X scrolled away */
.sheet{width:min(520px,100%);max-height:min(88svh,900px);display:flex;flex-direction:column;overflow:hidden;background:var(--card);border:1px solid var(--line-2);border-radius:14px;box-shadow:var(--shadow-float);transform:translateY(10px);transition:transform .2s var(--ease)}
.sheet.wide{width:min(720px,100%)}
.scrim.open .sheet{transform:none}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px 0;flex:none}
.sheet-head h2{font-size:18px}
.sheet-body{padding:16px 20px 22px;flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain}
.sheet-text{color:var(--slate);line-height:1.55}
/* the line under a sheet's title is not the first field's label: it needs its own room (Book had 0px) */
.sheet-text+form,.sheet-text+.form-grid,.sheet-text+.field,.sheet-text+label.field{margin-top:16px}
.sheet-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;flex-wrap:wrap}
/* the answer to the sheet is always on screen: the last row of buttons rides the bottom edge while the form scrolls.
   bottom is minus the body's padding because sticky insets by the scroller's padding (at 0 it rode 22px high, over the last field) */
.sheet-body .sheet-actions:last-child,.sheet-body>form:last-child>.form-actions:last-child,.sheet-body>.form-actions:last-child{position:sticky;bottom:-22px;z-index:2;margin:20px -20px -22px;padding:14px 20px 22px;background:var(--card);border-top:1px solid var(--line)}
/* a toast at the bottom would sit on those buttons */
body:has(#modalHost .scrim) .toast{bottom:auto;top:22px}
.tpl-list{display:flex;flex-direction:column;gap:10px}
.tpl{display:block;text-align:left;width:100%;padding:14px 16px;border-radius:var(--r);border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:border-color .15s}
@media(hover:hover){.tpl:hover{border-color:var(--line-2)}}
.tpl b{display:block;font-size:14px;font-weight:600;margin-bottom:4px}
.tpl span{display:block;font-size:13.5px;color:var(--slate);line-height:1.45}
.pick-list{display:flex;flex-direction:column;gap:8px;max-height:min(50vh,420px);overflow:auto;padding:2px}
.pick{display:block;width:100%;flex:0 0 auto;padding:12px 14px;border-radius:var(--r);border:1px solid var(--line);text-align:left;color:var(--ink);cursor:pointer;transition:border-color .15s}
@media(hover:hover){.pick:hover{border-color:var(--line-2)}}
.pick[aria-disabled="true"]{cursor:default}
.pick-in{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px}
.pick .pick-in>div{min-width:0}
.pick b{display:block;font-size:14.5px;font-weight:600}
.pick .pick-in>div>span:not(.pick-warn){display:block;font-size:12.5px;color:var(--slate);margin-top:2px}
.pick.dim{opacity:.6}
.pick-warn{display:inline-flex;align-items:center;gap:5px;margin-top:5px;font-size:12.5px;font-weight:600;color:var(--t-rose)}
.pick-warn.soft{color:var(--wheat)}
.pick-warn .ic{width:13px;height:13px;flex:none}
.pick .tags{margin-top:6px}
.more-nav{display:flex;flex-direction:column;gap:4px}
.more-group{font-size:12.5px;font-weight:600;color:var(--mist);margin:12px 0 2px}
.more-group:first-child{margin-top:2px}
.more-link{display:flex;align-items:center;gap:12px;min-height:50px;padding:10px 12px;border-radius:var(--r);border:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:15px;font-weight:500}
.more-link.active{border-color:var(--line-2);background:rgba(255,255,255,.04)}
.more-link>.ic{width:18px;height:18px;flex:none;color:var(--mist)}
.more-link.active>.ic{color:var(--blaze-hot)}
.more-link span{flex:1;min-width:0}
.more-link .more-go{width:15px;height:15px;color:var(--mist)}
/* no `font` here: at this weight it beat `#tabbar .navlink` and drew More at
   15.5px/400 beside 11.5px/500 tabs. The base button rule already inherits. */
#tabbar button.navlink{border:0;background:none;cursor:pointer}

/* ---------- the lead panel ---------- */
.lead-scrim{position:fixed;inset:0;z-index:60;background:rgba(5,12,8,.55);opacity:0;transition:opacity .2s var(--ease)}
.lead-scrim.open{opacity:1}
.lead-panel{position:fixed;top:0;right:0;bottom:0;width:min(600px,100%);z-index:61;background:var(--g1);border-left:1px solid var(--line);box-shadow:var(--shadow-float);transform:translateX(100%);transition:transform .25s var(--ease);display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}
.lead-panel.open{transform:none}
.lp-head{position:sticky;top:0;z-index:2;background:rgba(14,26,19,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:14px 20px 12px}
.lp-top{display:flex;align-items:flex-start;gap:10px}
.lp-top .icon-btn{margin-left:-8px;flex:none}
.lp-top .more-btn{margin-left:auto;flex:none}   /* a panel's more menu sits at the far end of its head */
.lp-title{min-width:0;flex:1}
.lp-title h2{font-size:22px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* focused by script when a panel opens, so a reader starts on the name; Tab
   never lands here (tabindex -1), and iOS Safari rings a scripted focus */
.lp-title h2:focus{outline:none}
.lp-title .sub{margin-top:8px;font-size:13px;display:flex;flex-wrap:wrap;gap:4px 8px}
.lp-title .sub span+span::before{content:"\00B7";margin-right:8px;color:var(--mist)}
.lp-status{padding:0 20px}
.lp-status-label{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:14px 0 8px}
.lp-status-label .kicker{color:var(--ink);font-weight:600}
.lp-status-label .lp-help{margin:0}
.lp-seg{margin:0 0 4px}
.lp-body{padding:14px 20px 40px;display:flex;flex-direction:column}
.lp-actions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-bottom:6px}
.lp-actions .act{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 6px;border-radius:var(--r-sm);border:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:13px;font-weight:600;transition:border-color .15s,background .15s}
.lp-actions .act .ic{width:18px;height:18px;color:var(--blaze-hot)}
@media(hover:hover){.lp-actions .act:hover{border-color:var(--line-2);background:rgba(255,255,255,.03)}}
.lp-actions .act[aria-disabled=true]{opacity:.4;pointer-events:none}
.lp-actions .act[aria-disabled=true] .ic{color:var(--mist)}
/* sections are separated by a hairline, not boxed: a box inside a drawer inside a page was three frames deep */
.lp-section{padding:18px 0;border-bottom:1px solid var(--line)}
/* the summary, and a page per part (2026-10-09): a page only hides */
.lp-body[data-on=summary]>[data-sec]{display:none}
.lp-body[data-on]:not([data-on=summary])>.lp-summary{display:none}
.lp-body[data-on]:not([data-on=summary])>[data-sec]:not(.is-shown){display:none}
.lp-back{display:none;align-items:center;gap:14px;padding:4px 0 14px;border-bottom:1px solid var(--line);margin-bottom:4px}
.lp-body[data-on]:not([data-on=summary])>.lp-back{display:flex}
.lp-back .btn{padding:8px 13px;min-height:40px}
.lp-back-t{font-family:var(--display);font-size:19px;font-weight:700}
/* the page's title says what it is; the section's own first heading would say it twice */
.lp-body[data-on]:not([data-on=summary])>.lp-section>.kicker:first-child,.lp-body[data-on]:not([data-on=summary])>.lp-section>.who-works>.kicker:first-child{display:none}
.lp-body[data-on]:not([data-on=summary])>.lp-section{border-bottom:0}
.lp-summary{display:flex;flex-direction:column;gap:18px}
.lp-reachbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.lp-reach{flex-direction:column;gap:4px;min-width:64px;padding:9px 10px;font-size:12.5px}
.lp-reach .ic{width:18px;height:18px;color:var(--blaze-hot)}
.lp-reach[disabled]{opacity:.4}
.lp-reach-sp{flex:1}
.lp-reachbar .opt-btn,.lp-reachbar .more-btn{min-height:54px}
.lp-summary .focus{padding:18px 18px}
.lp-summary .focus .focus-h{font-size:20px}
.kthumbs{display:inline-flex;gap:4px;vertical-align:middle;margin-right:8px}
.kthumbs img,.kthumbs i{width:28px;height:28px;border-radius:5px;object-fit:cover;background:rgba(255,255,255,.06);display:inline-block}
.more-list .seg-btn.on{background:var(--ink);color:var(--g0);border-color:var(--ink)}
/* the old status row: the status is the summary's menu now; a spam notice
   and a project manager's two buttons still show here */
.lead-panel .lp-status .lp-status-label,.lead-panel .lp-status .lp-seg{display:none}
@media(max-width:520px){ .lp-reach{min-width:0;flex:1 1 0} .lp-reach-sp{flex-basis:100%;height:0} .lp-reachbar .opt-btn{flex:1 1 auto} }
/* a secondary block shut to one line (tool list, estimate) */
.lp-more{margin-top:16px;border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.015)}
.lp-more>summary{display:flex;align-items:center;gap:12px;min-height:48px;padding:10px 14px;cursor:pointer;list-style:none}
.lp-more>summary::-webkit-details-marker{display:none}
.lp-more>summary:focus-visible{outline:2px solid var(--blaze-hot);outline-offset:-2px;border-radius:var(--r)}
.lp-more-title{font-weight:600;color:var(--ink);font-size:15px}
.lp-more-sum{color:var(--slate);font-size:14px;margin-right:auto;font-variant-numeric:tabular-nums}
.lp-more-chev{width:18px;height:18px;color:var(--mist);transition:transform .2s var(--ease)}
.lp-more[open]>summary .lp-more-chev{transform:rotate(180deg)}
.lp-more-body{padding:4px 14px 14px}
.lp-more-body>.form-grid:first-child{margin-top:4px}
.lp-body[data-on=job] [data-tab]:not([data-tab=job]),.lp-body[data-on=photos] [data-tab]:not([data-tab=photos]),
.lp-body[data-on=customer] [data-tab]:not([data-tab=customer]),.lp-body[data-on=notes] [data-tab]:not([data-tab=notes]){display:none}
.lp-section:last-of-type{border-bottom:0}
.lp-section>.kicker{margin-bottom:10px;font-size:15px;color:var(--ink);font-weight:600}
.lp-section>.kicker .tail{font-size:13px}
/* the contractor or self-perform switch is its own block: the heading under it
   takes the section's gap and hairline, or it reads as part of the control */
.lp-section>.who-works+.kicker{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.lp-help{margin:-4px 0 12px}
.lp-note{font-size:13.5px;color:var(--slate);line-height:1.55}
.lp-note.is-done{color:var(--t-moss);font-weight:600}
.dl{margin:0}
.dl .dfield{padding:10px 0;border-bottom:1px solid var(--line)}
.dl .dfield:last-child{border-bottom:none}
.dl dt,.kv dt{font-size:12.5px;font-weight:600;color:var(--slate);margin-bottom:3px}
.dl dd{font-size:15px;line-height:1.5;word-break:break-word;white-space:pre-wrap}
.dl dd.empty{color:var(--mist);font-style:italic;padding:0;display:block;text-align:left}
.answers{margin:0;padding:0;list-style:none}
.answers li{padding:8px 0;border-bottom:1px solid var(--line)}
.answers li:last-child{border-bottom:none}
.answers .aq{display:block;font-size:12.5px;color:var(--slate);line-height:1.35}
.answers .aa{display:block;font-size:14.5px;font-weight:600;margin-top:2px}
.lp-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:14px;flex-wrap:wrap}
.dupe{margin-top:10px;padding:10px 12px;border-radius:var(--r-sm);border:1px solid rgba(227,161,48,.4);font-size:13.5px;line-height:1.5}
.dupe .link-btn{color:var(--wheat)}
/* a quoted note sits on a wash, not behind a colored bar (the owner: the bars are what looked machine made) */
.visit-box{background:var(--card-2);border-radius:var(--r-sm);padding:10px 14px;font-size:14px;line-height:1.5;margin-top:10px;white-space:pre-wrap}
.visit-box .when{display:block;font-size:12.5px;color:var(--mist);margin-bottom:3px;white-space:normal}
.done-box{border:1px solid rgba(111,203,136,.35);border-radius:var(--r-sm);padding:12px 14px;font-size:14px;line-height:1.5}
.done-box b{color:var(--t-moss)}
.offer-state{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px;margin-top:4px}
.qb-actions{margin-top:2px;gap:8px}
.qb-made{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--t-moss)}
.qb-made .ic{width:14px;height:14px}
/* What QuickBooks last said about the document (2026-09-25): paid, owed, accepted. */
.qb-state{display:inline-flex;align-items:center;font-size:13px;font-weight:600;color:var(--slate)}
.qb-state.good{color:var(--t-moss)} .qb-state.warn{color:var(--wheat)} .qb-state.bad{color:var(--t-rose)}
.qb-actions{align-items:center}
/* A person's QuickBooks history, in the job panel and on the customer record. */
.qbh-facts{display:flex;flex-wrap:wrap;gap:8px 22px;margin:10px 0 6px}
.qbh-list{margin-top:6px}
.qbh-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto minmax(0,1.1fr);gap:4px 14px;align-items:baseline;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px}
.qbh-row:first-child{border-top:none}
.qbh-what{color:var(--ink);font-weight:600;min-width:0;overflow-wrap:anywhere}
.qbh-date{color:var(--slate)}
.qbh-amt{font-variant-numeric:tabular-nums;color:var(--ink);text-align:right}
.qbh-amt.good{color:var(--t-moss)}
.qbh-state{color:var(--slate);text-align:right}
.qbh-state.good{color:var(--t-moss)} .qbh-state.warn{color:var(--wheat)}
.lp-note.qbh-credit{color:var(--wheat)}
.cv-qb-body{padding:0 18px 14px}
.chip-static.bad{color:var(--t-rose);border-color:rgba(232,138,124,.4)}
.chip-static.warn{color:var(--wheat);border-color:rgba(227,161,48,.4)}
.bl-quiet-note{padding:12px 18px 16px}
.bl-qb .bl-table a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,106,36,.4);font-weight:600}
/* Inside a panel the strip loses its box, as it does inside a fold, and its
   first figure starts on the panel's own inset: a bordered box in a panel put
   the labels 41px further in than the heading over them (2026-09-27). */
.rp-qb-kpis{border:0;border-radius:0;background:none;padding:0 0 6px}
.rp-qb-kpis>.kpi:first-child{padding-left:0}
/* three figures, three columns: it used to take the six column grid of the lead figures and
   print half width cells, which is what cut $88,659.35 to $88,6... */
.reports .kpis.rp-qb-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
.rp-qb-kpis>.kpi:not(:first-child){border-left:1px solid var(--line);border-top:0}
@media(max-width:600px){
  .reports .kpis.rp-qb-kpis{grid-template-columns:minmax(0,1fr)}
  .rp-qb-kpis>.kpi:not(:first-child){border-left:0;border-top:1px solid var(--line)}
  .rp-qb-kpis>.kpi{padding-left:0;padding-right:0}
}
/* No bigger than the page's own strip. From 1400px that strip is six across,
   so its figure is 15% of a sixth of the page column less a cell's padding:
   2.5vw - 14.4px beside the 248px rail and the 32px page padding. Three wider
   cells here drew 34px under a 21px headline at 1440. */
@media(min-width:1400px){ .rp-qb-kpis .k-val{font-size:min(34px,calc(2.5vw - 14.4px))} }
.rp-aging,.rp-cats{padding:0 18px}
.rp-sub{display:block;margin-top:3px;font-size:12.5px;color:var(--slate)}
.rp-pnl-facts{gap:8px 28px}
.rp-aging .kv b,.rp-cats .kv b{font-variant-numeric:tabular-nums}
.rp-aging .kv.late b{color:var(--wheat)}
.kv-list .kv.kv-total{border-top-color:var(--line-2)} .kv-list .kv.kv-total span{color:var(--ink);font-weight:600}
.qbh-link{margin:2px 0 6px}
/* Billing: a month's QuickBooks invoice, and the button that makes one. */
.bl-qbline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:12px 0 0;font-size:14px;color:var(--t-moss);font-weight:600}
.bl-qbline .ic{width:14px;height:14px}
.bl-qbline a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(111,203,136,.45)}
.bl-qbacts{justify-content:flex-start;margin-top:12px}
/* Recurring: QuickBooks customers to bring in. */
.qb-import{max-height:min(52vh,460px);overflow:auto;border:1px solid var(--line);border-radius:10px;margin:12px 0}
.qb-imp-row{display:flex;gap:12px;align-items:flex-start;padding:11px 14px;border-top:1px solid var(--line);cursor:pointer}
.qb-imp-row:first-child{border-top:none}
.qb-imp-row input{width:20px;height:20px;margin-top:2px;accent-color:var(--blaze);flex:none}
.qb-imp-name{display:flex;flex-direction:column;gap:4px;min-width:0}
.qb-imp-name b{color:var(--ink);font-weight:600}
.qb-imp-name small{color:var(--slate);font-size:13px}
@media(pointer:coarse){.qb-imp-row{min-height:48px}}
/* Recurring: one QuickBooks customer that several of ours share a name with */
.qb-shared-head{margin:24px 0 2px;font-size:14px;line-height:1.5;color:var(--slate)}
.qb-shared-head b{color:var(--ink);font-weight:600}
@media(max-width:560px){
  .qbh-row{grid-template-columns:minmax(0,1fr) auto}
  .qbh-what{grid-column:1;grid-row:1} .qbh-amt{grid-column:2;grid-row:1}
  .qbh-date{grid-column:1;grid-row:2} .qbh-state{grid-column:2;grid-row:2}
}
.lp-section .stage{margin-top:6px}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 14px;font-size:14.5px}
.kv dt{padding-top:2px}
.kv dd{margin:0;line-height:1.5;word-break:break-word}
.kv dd a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,106,36,.4);font-weight:500}
@media(hover:hover){.kv dd a:hover{text-decoration-color:var(--blaze-hot)}}
.kv-list{padding:4px 0}
.kv-list .kv{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-top:1px solid var(--line)}
.kv-list .kv:first-child{border-top:none}
/* the checklist */
.ck{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ck-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:50px;padding:5px 0;border-bottom:1px solid var(--line)}
.ck-row:last-child{border-bottom:none}
.ck-box{width:40px;height:40px;display:grid;place-items:center;background:none;border:0;cursor:pointer;border-radius:8px}
.ck-box i{width:22px;height:22px;border-radius:6px;border:1.5px solid rgba(255,255,255,.28);display:grid;place-items:center;transition:background .15s,border-color .15s}
.ck-box svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .25s var(--ease)}
.ck-row.on .ck-box i{background:var(--blaze);border-color:var(--blaze)}
.ck-row.on .ck-box svg{stroke-dashoffset:0}
.ck-box[disabled]{cursor:default}
.ck-box[disabled] i{opacity:.6}
.ck-label{font-size:15px;font-weight:500;line-height:1.35}
.ck-row.on .ck-label{color:var(--slate)}
/* the who-and-when column is capped so a long name can never squeeze the step it belongs to */
/* a fixed cap, not a percentage: a percent max-width on an auto grid track resolves to zero and clipped the column to a sliver */
.ck-meta{font-size:12px;color:var(--mist);text-align:right;white-space:nowrap;max-width:140px;overflow:hidden;text-overflow:ellipsis}
.ck-meta b{display:block;color:var(--slate);font-weight:600;overflow:hidden;text-overflow:ellipsis}
.ck-meta small{font-size:12px}
.ck-label{min-width:0}
@media(max-width:680px){.ck-meta{max-width:88px} .ck-meta small{display:none}}
.ck-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.ck-head .prog-line{flex:1;max-width:240px}
.prog{height:5px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.prog>i{display:block;height:100%;border-radius:3px;background:var(--t-moss);transition:width .4s var(--ease)}
.prog-line{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--slate)}
.prog-line .prog{flex:1}
/* photos */
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.ph{position:relative;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:rgba(255,255,255,.04);border:1px solid var(--line);cursor:zoom-in}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph .ph-tag{position:absolute;left:6px;bottom:6px;font-size:11.5px;font-weight:600;background:rgba(5,12,8,.8);color:var(--ink);padding:2px 6px;border-radius:4px}
.ph .ph-act{position:absolute;top:6px;right:6px;display:flex;gap:4px}
.ph .ph-act button{width:34px;height:34px;border-radius:7px;background:rgba(5,12,8,.8);color:var(--ink);display:grid;place-items:center;border:1px solid rgba(255,255,255,.12)}
.ph .ph-act button .ic{width:13px;height:13px}
.ph.flagged{border-color:var(--blaze-hot)}
.ph.flagged .ph-flag{background:var(--blaze);color:#fff}
.ph.pending{opacity:.55}
.pgroup{margin-top:14px}
.pgroup:first-child{margin-top:0}
.pgroup .kicker{margin-bottom:8px}
.pempty{font-size:13.5px;color:var(--mist);padding:8px 0}
.photo-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(4,10,6,.95);display:grid;place-items:center;opacity:0;transition:opacity .2s var(--ease)}
.lightbox.open{opacity:1}
.lightbox figure{margin:0;max-width:94vw;max-height:88vh;display:flex;flex-direction:column;align-items:center;gap:12px}
.lightbox img{max-width:94vw;max-height:80vh;object-fit:contain;border-radius:8px}
.lightbox figcaption{font-size:13px;color:var(--slate);text-align:center;padding:0 16px}
.lightbox .lb-close{position:absolute;top:max(14px,env(safe-area-inset-top));right:14px;color:var(--ink);background:rgba(255,255,255,.08)}
.lightbox .lb-nav{position:absolute;top:50%;transform:translateY(-50%);color:var(--ink);background:rgba(255,255,255,.08);width:46px;height:46px}
.lightbox .lb-prev{left:10px} .lightbox .lb-next{right:10px}
.lightbox .lb-count{position:absolute;top:max(14px,env(safe-area-inset-top));left:16px;line-height:36px;font-size:13px;color:var(--slate)}
.lightbox .lb-word{display:none}