/* admin/css/70-people-portals-kit.css: People, Reports, Settings and the portals rebuilt on the page kit.
   The admin stylesheet is these files in numeric order, linked from admin.html; a later file overrides an earlier one, so keep the order. */
/* ---------- People, Reports, Settings and the contractor panel (the rebuild, 2026-10-09) ----------
   Built on the page kit; these are only the few shapes the kit does not have:
   a toolbar line, the Back bar of a page inside a screen, a search and tick
   list for trades, and "Add more details" in a popup. */

/* a toolbar: the search, a select or two, then the one primary at the right */
.rb-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.rb-tools .input[type=search]{flex:1 1 240px;max-width:360px;min-height:44px}
.rb-tools .select{width:auto;min-width:150px;max-width:240px;min-height:44px}
.rb-tools .sub{margin:0;color:var(--slate);font-size:14px}
.rb-sp{flex:1 1 0}

/* a page inside a screen: Back, its title, and (Reports) the range again */
.rb-back{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-bottom:16px;margin-bottom:26px;border-bottom:1px solid var(--line)}
.rb-back h2{font-family:var(--display);font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-right:auto}
.rb-back .btn{min-height:42px;padding:8px 14px}
.rb-back .range{margin-left:auto}
.rb-page .sec+.sec{margin-top:34px}
.rb-page .pg .sec+.sec{margin-top:0}
.rb-sub{max-width:880px}
.rb-sub .form-grid+.form-actions,.rb-sub .field-err+.form-actions{margin-top:16px}
.rb-report{max-width:1100px}
.rb-report>.kfacts{max-width:760px}
.rb-page .sec-head>button.btn-link{background:none;border:0;padding:8px 2px;cursor:pointer;font:600 14px var(--text);color:var(--slate)}
@media(hover:hover){.rb-page .sec-head>button.btn-link:hover{color:var(--ink)}}

/* one line of money under a section's heading */
.rb-line{font-size:15px;color:var(--slate);margin:0 0 6px;line-height:1.6}
.rb-line b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.rb-line b.good{color:var(--t-moss)} .rb-line b.warn{color:var(--wheat)}

/* a quieter second line inside a side link ("the lead", then "the contractor") */
.klink-l small{display:block;margin-top:3px;font-size:13px;color:var(--slate);font-weight:400}
/* a row that is switched off: deactivated, retired */
.kr.off .kr-main>b{color:var(--slate)}

/* the goal on the ground in a side column (goal.js `bare`) */
.goal-bare .goal-big{font-size:clamp(28px,3vw,36px)}
.goal-bare .goal-bar{margin:18px 0 30px}

/* trades: a search and a list of ticks, the picked ones first */
.rb-pick{display:flex;flex-direction:column;gap:10px;min-width:0}
.rb-pick>.input{min-height:44px}
.rb-pick-list{max-height:min(360px,48vh);overflow-y:auto;border:1px solid var(--line);border-radius:12px;background:var(--card);overscroll-behavior:contain}
.rb-pick-row{display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:10px 14px;border:0;border-top:1px solid var(--line);background:none;color:var(--ink);font:500 15px var(--text);text-align:left;cursor:pointer}
.rb-pick-row:first-child{border-top:0}
.rb-pick-row[hidden]{display:none}
.rb-pick-row input{width:20px;height:20px;flex:none;accent-color:var(--blaze);margin:0}
@media(hover:hover){.rb-pick-row:hover{background:rgba(255,255,255,.03)}}
.rb-pick-row:focus-visible,.rb-pick-row:has(input:focus-visible){outline:2px solid var(--blaze-hot);outline-offset:-2px}
.lp-section .rb-pick+.lp-note,.lp-section .rb-pick+.svc-new{margin-top:14px}
.lp-section .svc-new+.form-actions{margin-top:16px}

/* "Add more details" in a popup: the optional fields, shut until asked for */
.rb-more{border-top:1px solid var(--line);padding-top:6px}
.rb-more>summary{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;list-style:none;font-weight:600;font-size:14.5px;color:var(--slate)}
.rb-more>summary::-webkit-details-marker{display:none}
.rb-more>summary::before{content:"+";font-size:18px;line-height:1;color:var(--blaze-hot);width:14px}
.rb-more[open]>summary::before{content:"−"}
@media(hover:hover){.rb-more>summary:hover{color:var(--ink)}}
.rb-more>summary:focus-visible{outline:2px solid var(--blaze-hot);outline-offset:2px;border-radius:6px}
.rb-more>.form-grid,.rb-more>.field{margin-top:8px}

/* a message being edited in its sheet */
.rb-vars{margin:10px 0 12px;font-size:13.5px}
.rb-vars code{font-size:12.5px;margin-right:2px}

/* the contractor panel's pages */
.cp-panel .lp-section>.lp-note:first-of-type{margin-bottom:4px}
.cp-panel [data-sec=insurance] .form-actions{flex-wrap:wrap;gap:8px}
.cp-panel .lp-foot .hint{font-size:13px;color:var(--mist)}

@media(max-width:680px){
  .rb-tools{gap:8px;margin-bottom:20px}
  .rb-tools .input[type=search]{flex:1 1 100%;max-width:none}
  .rb-tools .select{flex:1 1 0;min-width:0;max-width:none}
  .rb-tools>.btn:last-child{flex:1 1 100%;justify-content:center;min-height:46px}
  .rb-tools .rb-sp{display:none}
  .rb-back{gap:10px;margin-bottom:20px}
  .rb-back h2{font-size:20px;flex:1 1 0;min-width:0}
  .rb-back .range{margin-left:0;flex-basis:100%}
  .rb-page .sec+.sec{margin-top:28px}
}

/* a row with a figure on the right keeps its chevron beside the figure on a
   phone: the kit's two column phone grid sent it to a line of its own */
@media(max-width:680px){
  .rb-page .kr:has(.kr-right)>.kr-chev,.cp-panel .kr:has(.kr-right)>.kr-chev{display:none}
}
.sheet .rb-pick-list{max-height:min(240px,34vh)}
.rb-report>.kv-list,.rb-report>.sub,.rb-report>#rpPnl>.kv-list{max-width:760px}
.rb-report>.kv-list{padding-left:0;padding-right:0}
.rb-inline{display:flex;gap:10px;align-items:center;max-width:620px}
.rb-inline>.field{flex:1 1 auto;min-width:0}
.rb-inline>.btn{min-height:46px;flex:none}
@media(max-width:520px){ .cp-panel .lp-reachbar .lp-reach-sp{display:none} .cp-panel .lp-reachbar .more-btn{flex:none;min-height:54px} }

/* ---- rebuild: portal ---- */
/* ---------- the portals, rebuilt on the page kit (owner, 2026-10-09) ----------
   The contractor's Jobs, job panel, Route, Insurance; Account for every role;
   the project manager's Jobs list; the crew's two screens; marketing's Photos
   and Numbers; and the customer's screens. Kit classes do the work; these are
   the few things a portal needs that the kit does not draw. */

/* a link that opens the thing, as a focus card's title */
.cj-offer .focus .focus-h a,.crew2 .focus .focus-h a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.cj-go{width:18px;height:18px;color:var(--mist);flex:none}
@media(hover:hover){.cj-offer .focus .focus-h a:hover,.crew2 .focus .focus-h a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line-2)}}
.cj-offer .focus .focus-h a:focus-visible,.crew2 .focus .focus-h a:focus-visible{outline:2px solid var(--blaze-hot);outline-offset:3px;border-radius:4px}

/* THE OFFER: the pay on the right, the two answers big */
.cj-pay-l{display:block;font-size:13.5px;color:var(--slate);font-weight:600}
.cj-pay-v{display:block;font-family:var(--display);font-size:32px;font-weight:700;letter-spacing:-.025em;color:var(--ink);font-variant-numeric:tabular-nums;margin-top:4px}
.cj-pay-v.unset{font-size:18px;color:var(--wheat);letter-spacing:0;font-family:var(--text);font-weight:600}
.cj-offer .focus-acts .btn{flex:1 1 150px;max-width:260px}
.cj-pay-m{display:none}
@media(max-width:680px){.cj-offer .focus-side{display:none}.cj-pay-m{display:inline}.cj-offer .focus-acts .btn{max-width:none}}

/* the pay lines in the side column carry what they count under the label */
.klink-l small{display:block;font-size:13.5px;color:var(--slate);font-weight:400;margin-top:3px;line-height:1.35}
.cj-pay .klink{min-height:62px}
.cj-waiting .kr-dot{margin-right:0}

/* the project manager's list: compact chips over plain rows */
.pm-jobs .toolbar{margin-bottom:14px}

/* THE JOB PANEL: the summary is the kit's; a part's finishing button sits
   full width under its checklist, and the visit keeps its own heading on the
   job page (it is not that page's first section) */
.job-panel .jp-done{flex-direction:column;align-items:stretch;gap:8px;margin-top:16px}
.job-panel .jp-done .form-note{text-align:center}
.job-panel .lp-body[data-on]:not([data-on=summary])>[data-sec=visit]>.kicker:first-child{display:flex;margin-top:6px}
.job-panel .lp-summary .focus-acts .upload{cursor:pointer}
.job-panel .lp-reach .ic{color:var(--ink)}
.cj-more{margin-top:14px}

/* ROUTE: one row a property with its big Here today, its month under it */
.rt2 .rt-bar{margin-bottom:18px}
.rt-tog{min-width:136px;min-height:48px;font-size:15px;justify-content:center;border:1px solid var(--line-2);background:transparent;color:var(--ink)}
.rt-tog.on{background:rgba(111,203,136,.14);border-color:rgba(111,203,136,.55);color:var(--t-moss)}
.rt-tog.is-busy{opacity:.6}
@media(hover:hover){.rt-tog:not(.on):hover{border-color:var(--ink)}}
.kr.rt-row.is-open{background:rgba(255,255,255,.025)}
.rt-open{display:flex;flex-direction:column;gap:12px;padding:6px 16px 18px;border-top:1px solid var(--line);background:rgba(255,255,255,.015)}
.rt-open .rt-access{margin:0}
.rt-open .rt-map{align-self:flex-start;font-size:14.5px}
.rt-open .rt-dow+.rt-grid{margin-top:-6px}
.rt-open .rt-submit{margin-top:0}
.rt-send{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;margin-top:18px}
.rt-send>span{color:var(--slate);font-size:14.5px}
@media(max-width:680px){
  .rt-send .btn{flex:1 1 100%}
  .rt-open{padding:6px 12px 16px}
  .rt-tog{min-width:118px}
}
@media(max-width:360px){.rt-open{padding-left:4px;padding-right:4px}.rt-bar-w{display:none}}

/* ACCOUNT: rows like a phone's settings, the walkthrough beside them */
.acct2 .kfact-v{white-space:normal}

/* INSURANCE: one column, the card and the business under it */
.ins2{display:flex;flex-direction:column;gap:22px;max-width:780px}
.ins-back{display:inline-flex;align-items:center;gap:6px;text-decoration:none;align-self:flex-start;min-height:40px}
.ins-back .ic{width:16px;height:16px}
.ins2 .focus.is-due{border-color:rgba(227,161,48,.45)}
.ins2 .ins-mail{margin-top:-10px}

/* THE CREW */
.crew2{display:flex;flex-direction:column;gap:30px}
.cj-box{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:16px 18px}
.crewjob .cv-head{margin-bottom:30px}
.crewjob .cv-acts{max-width:560px}
.crewjob .sec-n{font-weight:500}

/* MARKETING: Numbers on the ground, the chart and funnel in a quiet box */
.nb2 .nb-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.nb2 .nb-bar .sub{margin:0}
.nb-box{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:18px}
.nb2 .chart-wrap.nb-box{height:300px}
.nb2 .pg-side .statlist{margin-top:0}
.nb-box .statnote{margin-top:14px;font-size:14px;color:var(--slate)}
.nb-box .funnel[hidden]+.statnote{margin-top:0}
/* a row with a figure on the right keeps the figure, not a chevron on a
   line of its own, on a phone (the kit drops the chevron to a new row) */
@media(max-width:680px){:is(.pm-jobs,.cj,.my-invoices,.crew2,.my-home) .kr:has(.kr-right) .kr-chev{display:none}}
.fd2{display:flex;flex-direction:column;gap:28px}
.fd-back{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;text-decoration:none;min-height:40px}
.fd-back .ic{width:16px;height:16px}
.fd2 .pg-head{margin-bottom:0}

/* THE CUSTOMER'S SCREENS keep the large type and AAA contrast (`.easy`): the
   kit's rows, figures, facts and sections one step up the same scale */
.my-jobs{display:flex;flex-direction:column;gap:40px}
.my-job-when{margin:-6px 0 2px;color:var(--slate);font-size:15px}
.easy .my-job-when{font-size:var(--fs-meta)}
.my-more .btn{align-self:flex-start}
.my-bill-state{margin-bottom:6px}
.easy .pg-head h2{font-size:var(--fs-h1);line-height:1.15}
.easy .pg-head p{font-size:var(--fs-body);color:var(--slate);max-width:60ch}
.easy .sec-head h3{font-size:var(--fs-h2)}
.easy .sec-quiet .sec-head h3{font-size:19px;color:var(--ink)}
.easy .sec-n{font-size:var(--fs-lbl);color:var(--slate)}
.easy .kstat b{font-size:min(38px,17cqi)}
.easy .kstat span{font-size:var(--fs-lbl);color:var(--ink)}
.easy .kr{min-height:78px;padding:18px 22px;gap:8px 18px}
.easy .kr-main>b{font-size:20px;white-space:normal}
.easy .kr-main>span{font-size:var(--fs-meta);line-height:1.5;-webkit-line-clamp:4;line-clamp:4}
.easy .kr-right{font-size:17px;white-space:normal;max-width:26ch}
.easy .kr-chev .ic{width:20px;height:20px}
.easy .kfact{min-height:64px;padding:16px 20px}
.easy .kfact-l{font-size:var(--fs-lbl)}
.easy .kfact-v{font-size:var(--fs-body)}
.easy .kempty-box b{font-size:19px}
.easy .kempty-box span{font-size:var(--fs-meta)}
.easy .kempty{font-size:var(--fs-meta)}
.easy .klink{font-size:17px;min-height:60px}
.easy .my-contact-body .sub{font-size:var(--fs-body);max-width:52ch}
.easy .my-contact-body .quick{margin-top:14px}
.easy .my-bill-state{font-size:var(--fs-body)}
@media(max-width:680px){
  .easy .kr{padding:16px 16px}
  .easy .kr-right{grid-column:1/-1;grid-row:auto;text-align:left;max-width:none}
}

/* ---- rebuild: popups ---- */
/* ---------- popups and the job's pages (the rebuild, 2026-10-09; helper "popups") ----------
   The owner: "panels with way too much info, buttons, or extra stuff... for all
   pages and popups". Two pieces:
   1. A popup asks one question: the fields it needs, the optional ones behind
      "Add more details" (.sheet-more), one orange button. Pickers are a search
      box over one line per choice (.pk), the text picker one list with the
      chosen message previewed under it (.tx-*).
   2. A part of the job, on its own page in the panel, reads first: values as
      lines, an editor opened on purpose under its line (.lp-ed), the page cut
      into parts with a heading on the ground and room between them (.lp-part). */

/* ---- sheets ---- */
.sheet-stack{display:flex;flex-direction:column;gap:14px}
.sheet-sub{color:var(--slate);font-size:14.5px;margin:-4px 0 16px}
.sheet-file{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sheet-more{margin-top:16px;border-top:1px solid var(--line)}
.sheet-more>summary{display:flex;align-items:center;gap:8px;min-height:48px;padding:12px 0 4px;list-style:none;cursor:pointer;font-weight:600;font-size:15px;color:var(--slate)}
.sheet-more>summary::-webkit-details-marker{display:none}
.sheet-more>summary::after{content:"";width:8px;height:8px;margin:-4px 0 0 4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s var(--ease)}
.sheet-more[open]>summary::after{transform:rotate(-135deg);margin-top:4px}
.sheet-more>summary:focus-visible{outline:2px solid var(--blaze-hot);outline-offset:2px;border-radius:6px}
@media(hover:hover){.sheet-more>summary:hover{color:var(--ink)}}
.sheet-more-body{padding:10px 0 2px}
.al-cust{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.al-cust .btn-text{font-size:inherit}

/* the contractor picker: one line per contractor */
.pk-search{margin-bottom:12px}
.pick-list.pk-list{gap:0;border:1px solid var(--line);border-radius:12px;padding:0;max-height:min(56vh,460px);background:var(--card)}
.pk{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 14px;min-height:54px;padding:10px 16px;border-top:1px solid var(--line);cursor:pointer;color:var(--ink);flex:0 0 auto}
.pk:first-child{border-top:0}
@media(hover:hover){.pk:not(.dim):hover{background:rgba(255,255,255,.035)}}
.pk:focus-visible{outline:2px solid var(--blaze-hot);outline-offset:-2px}
.pk.dim{cursor:default}
.pk.dim .pk-name{color:var(--mist)}
.pk-name{min-width:0;font-weight:600;font-size:15.5px;line-height:1.35;overflow-wrap:anywhere}
.pk-name small{font-weight:500;font-size:13.5px;color:var(--slate);margin-left:10px}
.pk-tags{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;justify-content:flex-end}
.pk-w{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--t-rose);white-space:nowrap}
.pk-w.soft{color:var(--wheat)} .pk-w.dim{color:var(--mist);font-weight:500}
.pk-w .ic{width:13px;height:13px;flex:none}
.pk-match{font-size:12.5px;font-weight:600;color:var(--t-moss);border:1px solid rgba(111,203,136,.4);border-radius:999px;padding:3px 9px;white-space:nowrap}
@media(max-width:520px){
  .pk{grid-template-columns:minmax(0,1fr);gap:4px}
  .pk-tags{justify-content:flex-start}
  .pk-name small{display:block;margin:2px 0 0}
}

/* the text picker: one list, the chosen one previewed */
.tx-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tx-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;padding:12px 16px;border:0;border-top:1px solid var(--line);background:none;color:var(--ink);font:500 15px var(--text);text-align:left;cursor:pointer}
.tx-opt:first-child{border-top:0}
.tx-opt.on{background:rgba(255,255,255,.04);font-weight:600}
.tx-tick{width:16px;height:16px;color:var(--blaze-hot);opacity:0}
.tx-opt.on .tx-tick{opacity:1}
@media(hover:hover){.tx-opt:hover{background:rgba(255,255,255,.03)}}
.tx-opt:focus-visible{outline:2px solid var(--blaze-hot);outline-offset:-2px}
.tx-preview{margin-top:14px;padding:14px 16px;border-radius:12px;border:1px dashed var(--line-2);color:var(--ink);font-size:15px;line-height:1.55;white-space:pre-wrap}
.tx-preview.muted{color:var(--mist)}

/* ---- the job's pages ---- */
/* later sections on one page keep their heading: the page title stands for the first */
.lp-body[data-on]:not([data-on=summary])>.lp-section.is-shown~.lp-section.is-shown>.kicker:first-child{display:flex}
.lp-body[data-on]:not([data-on=summary])>.lp-section.is-shown~.lp-section.is-shown{border-top:1px solid var(--line);margin-top:8px;padding-top:26px}
.lp-parts{display:flex;flex-direction:column;gap:30px}
.lp-section>*+.lp-parts,.lp-section>*+.lp-part{margin-top:28px}
.lp-section>.who-works+.lp-parts{margin-top:24px}
.lp-part{display:flex;flex-direction:column;gap:12px;min-width:0}
.lp-part-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.lp-part-h h4{font-size:15.5px;font-weight:700;color:var(--ink);display:flex;align-items:baseline;gap:9px;letter-spacing:-.005em}
.lp-part-n{font-size:14px;font-weight:600;color:var(--mist);font-variant-numeric:tabular-nums}
.lp-part>.lp-more,.lp-part>.est>.lp-more{margin-top:0}
.lp-part .ck{margin-top:-4px}
.lp-line{font-size:14.5px;color:var(--ink);line-height:1.5}
.lp-line.muted{color:var(--mist)} .lp-line.late{color:var(--t-rose)} .lp-line.warn{color:var(--wheat)} .lp-line.good{color:var(--t-moss);font-weight:600}
.lp-line a{color:var(--blaze-hot)}
.lp-text{font-size:15px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.lp-text.muted{color:var(--mist)}
.lp-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lp-section>.lp-acts,.lp-section>.kfacts+.lp-acts,.lp-section>.lp-ed+.lp-acts{margin-top:16px}
.lp-section>.kfacts+.kfacts,.lp-section>.lp-ed+.kfacts,.lp-section>.kfacts+.lp-parts,.lp-section>.lp-ed+.lp-parts{margin-top:24px}
.lp-section .person .who>span .late{color:var(--t-rose)} .lp-section .person .who>span .warn{color:var(--wheat)} .lp-section .person .who>span .good{color:var(--t-moss)}
.lp-section .person .who>span{line-height:1.5}
.lp-section .kfact-v a{color:var(--blaze-hot);position:relative;z-index:1}
.lp-details .kfact-v{white-space:normal;overflow-wrap:anywhere}

/* a value's editor: shut until asked for, then in place of (.lp-ed) or under (.lp-ed-under) its line */
.lp-ed:not(.is-editing)>.lp-ed-edit,.lp-ed.is-editing>.lp-ed-read{display:none}
.lp-ed-under.is-editing{margin-top:12px;padding:16px;border:1px solid var(--line-2);border-radius:12px;background:rgba(255,255,255,.02)}
.lp-ed-under:not(.is-editing){display:none}
.lp-ed-read>.kfacts+.lp-acts{margin-top:14px}
.lp-ed-edit>.lp-ed-acts,.lp-ed-edit .form-grid+.lp-ed-acts,.lp-ed-edit .sheet-stack+.lp-ed-acts{margin-top:14px}
.lp-ed-row{display:flex;align-items:flex-end;gap:10px 12px;flex-wrap:wrap}
.lp-ed-row>.field{flex:1 1 220px;min-width:0}
.lp-ed-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lp-ed-row>.lp-ed-acts .btn{min-height:46px}
.lp-ed-edit .form-actions{margin-top:4px}

/* switches that save when flipped */
.lp-togs{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.lp-tog{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:10px 16px;border-top:1px solid var(--line)}
.lp-tog:first-child{border-top:0}
.lp-tog>span{font-size:14px;color:var(--slate)}
.lp-approve{display:flex;flex-direction:column;gap:10px}
.lp-section .who-works .seg{width:fit-content;max-width:100%}
.lp-section .chips.sp-crew{gap:8px}
.lp-section .lp-rec{display:flex;flex-direction:column;gap:12px}
@media(max-width:520px){
  .lp-section .who-works .seg{width:100%}
  .lp-ed-row>.lp-ed-acts{width:100%}
  .lp-ed-row>.lp-ed-acts .btn{flex:1 1 0;justify-content:center}
  .lp-parts{gap:26px}
}

/* ---- css-leads.css ---- */
/* leads, jobs, crew and route pages: facts restored after the rebuild */
.lj-extra { color: var(--muted, inherit); }
.lj-extra::before { content: " · "; }
.lj-count { font-size: 13px; color: var(--muted, inherit); margin: 4px 2px 10px; }
.lj-pc-next { font-size: 12px; color: var(--muted, inherit); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lj-det { font-size: 13px; color: var(--muted, inherit); }
.lj-line { font-size: 13px; line-height: 1.45; color: var(--muted, inherit); margin: 8px 0; }
small.lj-line { display: block; flex-basis: 100%; }

/* ---- css-people.css ---- */
/* people, settings and customers parity pass (ps-) */
.ps-faint{color:var(--slate)}
.ps-top{margin:6px 0 4px}
.ps-top .kstats{max-width:980px;margin-inline:auto;text-align:center;margin-bottom:26px}
.ps-top .kstat{align-items:center;text-align:center}
.ps-top .kstat b{font-size:min(44px,20cqi)}
.ps-top .kstat span{font-size:15px}

/* ---- css-today.css ---- */
/* Site stats: the top page's path is a long word in a figure slot */
.kstat b .tm-top { display: block; max-width: 100%; font-size: .62em; line-height: 1.2; overflow-wrap: anywhere; }
/* a word in a number slot sits on the numbers' line, not above it (audit, 2026-10-13) */
.kstat b:has(> .tm-top) { display: flex; align-items: flex-end; min-height: 1.05em; }

/* ---- visual pass: one centered, bigger figure strip on every page ---- */
.kstats{text-align:center;margin-bottom:38px}
.kstat{align-items:center;text-align:center}
.kstat b{font-size:min(44px,21cqi)}
.kstat span{font-size:15px}
@media(max-width:700px){
  .kstats{margin-bottom:30px}
  .kstat b{font-size:min(34px,21cqi)}
}
/* a name with a status chip wraps the chip under it instead of clipping it */
.kr-main>b{flex-wrap:wrap;white-space:normal;row-gap:2px}
/* the undated list was touching the month it sits under */
.cal2 .cal-undated:not(:empty){margin-top:34px}
/* in the wide leads row the phone line sits under the name with no dot before it */
@container (min-width:700px){.lr .lr-sub .lj-extra::before{content:none}}

/* ---- calm grammar (owner, 2026-10-10, after looking at Attio, Linear, Folk) ----
   Figures: few, left aligned, medium weight, between hairlines. Lists: one line
   per row (name, then a muted line beside it), hairlines instead of boxes, one
   quiet button per row. The loud orange button is one per region, not one per
   row. Phones keep the two line row and the 40px tap target. */
.kstats,.ps-top .kstats{max-width:none;margin:0 0 22px;padding:18px 0;text-align:left;gap:14px 32px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kstat,.ps-top .kstat{align-items:flex-start;text-align:left;gap:4px}
.kstat b,.ps-top .kstat b{font-size:min(28px,16cqi);font-weight:600;letter-spacing:-.02em}
.kstat b.good{color:var(--ink)}
.kstat span,.ps-top .kstat span{font-size:13.5px;line-height:1.35}
.easy .kstat b{font-size:min(38px,17cqi)} .easy .kstat span{font-size:var(--fs-lbl)}
.pg-head h2{font-size:26px;font-weight:600;letter-spacing:-.02em}
/* a role's home heading speaks in the site's voice: Archivo 800, set tight,
   the count under the brush stroke (2026-10-12); every other page keeps the
   calm 26px heading above */
.today2>.pg-head h2,.my-home>.pg-head h2{font-size:clamp(30px,1.4vw + 18px,40px);font-weight:800;letter-spacing:-.032em;line-height:1.08}
.easy .my-home>.pg-head h2{font-size:max(var(--fs-h1),34px)}

.klist,.kfacts{background:none;border:0;border-radius:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kr{padding:8px 6px;min-height:48px}
.kfact{padding:10px 6px;min-height:46px}
.kr-main{flex-direction:row;align-items:baseline;flex-wrap:nowrap;gap:2px 12px}
.kr-main>b{flex:0 0 clamp(140px,22%,260px);max-width:none;font-size:15.5px;align-self:center}
.kr-main>span{flex:1 1 0;min-width:0;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;line-height:1.4;-webkit-line-clamp:unset;line-clamp:unset}
.kr-acts .btn{min-height:34px;padding:6px 12px;font-size:13.5px}
.kr-acts .btn-icon{min-width:34px;padding:6px}
.kr-acts .btn-blaze{background:transparent;color:var(--ink);border:1px solid var(--line-2);box-shadow:none}
@media(hover:hover){.kr-acts .btn-blaze:hover{background:rgba(255,255,255,.06)}}
@media(max-width:700px){
  .kr{padding:11px 4px}
  .kr-main{flex-direction:column;align-items:stretch;gap:3px}
  .kr-main>b{max-width:none;align-self:auto}
  .kr-main>span{flex:none;white-space:normal;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3}
  .kr-acts .btn{min-height:40px}
  .kstats,.ps-top .kstats{padding:14px 0;gap:14px 16px}
  .kstat b,.ps-top .kstat b{font-size:min(24px,18cqi)}
}

.sec{gap:10px}
.sec-head h3{font-family:var(--text);font-size:16px;font-weight:600;letter-spacing:-.005em}
.sec-quiet .sec-head h3{font-size:14.5px;color:var(--slate)}
.kgoal{margin:-6px 0 28px}
.kgoal-top{font-size:13.5px}
.kgoal-bar{height:4px}
/* a narrow column (the calendar's day list) keeps the two line row */
.pg-side .kr-main{flex-direction:column;align-items:stretch;gap:3px}
.pg-side .kr-main>b{flex:none;align-self:auto}
.pg-side .kr-main>span{flex:none;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2}
@media(max-width:700px){
  .kr{grid-template-columns:minmax(0,1fr) auto}
  .kr-main{grid-column:1;grid-row:1}
  .kr-right{grid-column:1;grid-row:2;text-align:left;font-size:13.5px;font-weight:500;color:var(--slate)}
  .kr-acts,.kr-chev{grid-column:2;grid-row:1/3}
  .kr:has(.kr-right) .kr-acts{grid-column:2;grid-row:1/3;justify-content:flex-end}
}
.cal2 .agenda .kr-main{flex-direction:column;align-items:stretch;gap:3px}
.cal2 .agenda .kr-main>b{flex:none;align-self:auto}
.cal2 .agenda .kr-main>span{flex:none;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2}

/* the calendar's heading and figures span the whole page; only the month and
   the day sit side by side (the day column used to start beside the heading,
   leaving the top right of the page blank) */
@media(min-width:1400px){
  .calendar{grid-template-rows:auto auto auto auto}
  .calendar #calHead{grid-column:1/-1;grid-row:1}
  .calendar .cal-tools{grid-row:2}
  .calendar>.panel.tight{grid-column:1;grid-row:3}
  .calendar .agenda{grid-column:2;grid-row:3}
  .calendar .cal-undated{grid-column:1/-1;grid-row:4}
}

/* the stage dots are back on every lead row: before the words on a phone, in
   their own column on a wide list */
.lr-dots{flex:none;margin-right:10px;display:inline-flex;align-items:center}
.lr-dots .stage{gap:0}
.lr-dots .dots i{width:9px}
@container (min-width:700px){
  .lr{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 76px minmax(0,1.25fr) 104px 72px 16px}
  .lr-dots{grid-column:3;grid-row:1;margin-right:0}
  .lr-st{grid-column:4}
  .lr-val{grid-column:5}
  .lr-age{grid-column:6}
  .lr .kr-chev{grid-column:7}
}

/* the phone number and "Next: ..." line stays on one line under the name and
   service, cut with an ellipsis, instead of running across the whole row */
.lr .lj-extra{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@container (min-width:700px){
  .lr .lj-extra{grid-column:1/3;grid-row:2;font-size:13.5px;color:var(--slate)}
}

/* a two-dashboard person's switch, under their jobs (2026-10-12) */
.role-foot{padding-top:20px;border-top:1px solid var(--line)}