/* admin/css/60-touch-and-portal.css: Touch targets, the type scale, the customer portal components.
   The admin stylesheet is these files in numeric order, linked from admin.html; a later file overrides an earlier one, so keep the order. */
/* ---------- touch: 44px targets on every coarse pointer ---------- */
@media(pointer:coarse){
  .btn,.chip,.navlink,.seg-btn,.status-sel,.select,.input,.icon-btn,.tpl,.toolbar .sort .select,label.toggle,.tags.pick .tag{min-height:44px}
  .icon-btn{width:44px;height:44px}
  .tel{display:inline-block;padding:10px 0}
  .lp-actions .act{min-height:60px}
  .cal .day{min-height:52px}
  .ck-box{width:48px;height:48px}
  .pick{min-height:56px}
  .ph .ph-act button{width:44px;height:44px}
  .step-edit .quick .icon-btn{width:44px;height:44px}
  .link-btn{display:inline-flex;align-items:center;min-height:44px}
  .lead-row .who>a,.form-note a,.sheet-text a,.lp-note a{padding-block:13px}
  .cv-meta a{min-height:44px}
  /* a name link on a person row (the QuickBooks matches on Customers) is a
     24px line; the padding is taken back, so the row does not grow */
  .person .who b>a{padding-block:10px;margin-block:-10px}
  /* an invoice number in a table cell ("#1138", 36 by 17): the tap area grows
     both ways and the margin takes it back, so the row keeps its height */
  .bl-table .ref a{display:inline-block;padding:14px 8px;margin:-14px -8px}
  /* 16px or iOS Safari zooms the page on focus: the leads sort and the row's
     project manager select are 13.5px for a mouse (2026-09-27) */
  .toolbar .sort .input,.toolbar .sort .select,.row-pick .select{min-height:44px;font-size:16px}
  /* min-width: "Map" is 28px of text. Baseline: a label sits on the line of
     the value it names. EVERY PAIR IS ONE ROW HEIGHT (2026-09-27): a link's
     44px target is padding that a negative margin takes back, and every row
     is 44px, link or not. A row with a link used to grow to the target, so
     Address and Customer sat 54px apart and the plain rows 32px. */
  .kv dd a{display:inline-block;padding:12px 0;margin:-12px 0;min-height:44px;min-width:44px;text-align:center}
  .kv{align-items:baseline;row-gap:0}
  .kv>dt{padding-block:11px;margin-bottom:0}
  .kv>dd{padding-block:11px;min-height:44px}
  /* the route card's address: a 21px line. The padding is taken back with a
     negative margin, so the tap area grows and the card does not. */
  .sheet .icon-btn,.step-edit .quick .icon-btn{flex:none}
}
/* phases 12 to 14 on a phone */
@media(max-width:680px){
  .my-svc{grid-template-columns:minmax(0,1fr);gap:10px}
  .my-next{text-align:left}
  .my-ba{grid-template-columns:minmax(0,1fr)}
  .sg-row{grid-template-columns:minmax(0,1fr);align-items:stretch}
  .sg-acts{justify-content:flex-start}
  .sg-acts .select,.row-pick,.row-pick .select{width:100%}
  .calls-bar .sort,.calls-bar .sort .select{width:100%}
  .call-facts div{grid-template-columns:minmax(0,1fr);gap:3px}
  .my-more-body .btn{width:100%;justify-content:center}
}
@media(pointer:coarse){
  .btn-text{min-height:44px}
  .tool-del{width:44px;height:44px}
  .seg-pick span{min-height:46px}
  .row-pick .select,.sg-acts .select{min-height:44px}
}

/* ============================================================================
   THE CUSTOMER'S ACCOUNT: DARK, AT A SIZE AN OLDER EYE READS (2026-09-30)

   The owner, 2026-09-21: "lots of older people will be using it so it needs
   to be very easy to understand visually and also easy to use and navigate."
   It shipped as a light paper theme at a bigger scale. On 2026-09-30 he asked
   for it dark "like the rest of the dashboards", so the paper colors went and
   the SCALE stayed: body 18px, labels 15px, heads 32px, buttons 17px in a 56px
   target, prose held to 60ch. Nothing here sets a color the staff theme does
   not already use, and the two text grays are one for customers: a third gray
   only buys a line that is harder to read.

   The hook is `html.easy`, set in app.js for the /account door and for anybody
   whose role is customer. One scoped block on purpose: it is a theme, and a
   theme is only reviewable when it is in one place. Nothing above this line
   changes for any other role.
   ============================================================================ */
.easy .gate .gate-note{font-size:15px;line-height:1.6}
.easy .gate .gate-note .link-btn{display:inline-flex;align-items:center;min-height:48px}
.easy .gate .gate-note a{padding:16px 2px}
.easy .gate .gate-card .brand{min-height:48px}
.easy .gate .gate-err,.easy .gate .gate-ok{font-size:15px}

.easy{
  /* ONE text gray, the brighter of the staff app's two: 7:1 or better on
     the card and on the ground, for an older eye */
  --slate:#B2BFB1;--mist:var(--slate);
  /* the scale, one step up from the staff app and then some */
  --fs-body:18px;--fs-meta:16px;--fs-lbl:15px;--fs-h1:32px;--fs-h2:22px;--fs-btn:17px;--fs-fig:38px;
  /* ONE INSET: a panel's own, and a fold's head and body take the same */
  --inset:26px;
}
/* ONE INSET (2026-09-27). A fold is a panel whose inset lives on its head
   and its body, so this must not reach one: it did, and a fold's title sat
   22 to 25px further in than the panel under it. The sign in card keeps the
   staff door's own padding: one door for everyone. */
.easy .panel:not(.fold):not(.group-open):not(.gate-card){padding:24px var(--inset)}
.easy .fold-body>*{padding-left:var(--inset);padding-right:var(--inset)}
/* "Live" and a role label are staff words: a customer is not on a live
   feed and does not think of themselves as a CUSTOMER in capitals. */
.role-customer #livePill,.role-customer #railLabel{display:none}
.easy #rail .navlink{min-height:48px}
.easy #rail .live-pill,.easy #rail .rail-who,.easy #rail .rail-who b{font-size:15px}

/* ---------- the scale ---------- */
.easy body,.easy .lead-row .meta,.easy .sub{font-size:var(--fs-body)}
.easy main#view{padding:34px 34px 96px}
.easy .today-head h2,.easy .cv-head h1{font-size:var(--fs-h1);line-height:1.15}
.easy .today-head .sub,.easy .panel-head .sub{font-size:var(--fs-body);line-height:1.6;max-width:60ch}
.easy .today-head .kicker,.easy .panel-head .kicker,.easy .kicker{font-size:var(--fs-lbl)}
.easy .panel-head h2,.easy .fold-title{font-size:var(--fs-h2)}
.easy .panel-head{margin-bottom:20px}
.easy .count,.easy .count-note{font-size:var(--fs-lbl)}
.easy .btn{font-size:var(--fs-btn);padding:15px 24px;min-height:56px;border-radius:var(--r-pill)}
.easy .btn .ic{width:19px;height:19px}
.easy .btn-sm{font-size:var(--fs-meta);padding:12px 16px;min-height:48px}
.easy .icon-btn{width:48px;height:48px}
.easy .chip-static{font-size:var(--fs-lbl);padding:5px 12px}
.easy .field>span,.easy .field>label{font-size:var(--fs-lbl)}
.easy .input,.easy .select,.easy .textarea{font-size:var(--fs-body);padding:14px 15px;min-height:56px}
.easy .textarea{min-height:110px;line-height:1.6}
.easy .field-note{font-size:var(--fs-lbl);line-height:1.55;max-width:60ch}
.easy .field-err{font-size:var(--fs-meta)}
.easy .sheet-text{font-size:var(--fs-body);line-height:1.6;max-width:56ch}
.easy .sheet-head h2{font-size:var(--fs-h2)}
.easy .sheet-body{padding:20px 24px 26px}
.easy .sheet-body .sheet-actions:last-child,.easy .sheet-body>form:last-child>.form-actions:last-child,.easy .sheet-body>.form-actions:last-child{bottom:-26px;margin:20px -24px -26px;padding:14px 24px 26px}
.easy .sheet-text+.sheet-text{margin-top:10px}
.easy .sheet-body form,.easy .sheet-text+.field{margin-top:20px}
.easy .empty h3{font-size:var(--fs-h2)}
.easy .empty p{font-size:var(--fs-body);max-width:52ch;line-height:1.6}
.easy .empty>.ic{width:30px;height:30px}
/* fluid, so an exact balance with cents still fits a 320px phone uncut */
.easy .n-val{font-size:clamp(24px,7vw,38px)}
.easy .n-lbl{font-size:var(--fs-meta);color:var(--ink);font-weight:600}
.easy .n-sub{font-size:var(--fs-lbl)}
.easy .table{font-size:var(--fs-meta)}
.easy .table th{font-size:var(--fs-lbl)}
.easy .table td,.easy .table th{padding:14px 12px}
.easy .fold-head{padding:20px var(--inset);min-height:76px}
.easy .fold-facts .fact b{font-size:19px}
.easy .fold-facts .fact{font-size:var(--fs-lbl)}
.easy .fold-tag{font-size:var(--fs-lbl);padding:5px 0}
.easy .lead-row .who a,.easy .lead-row .who b{font-size:20px}
.easy .lead-row{padding:20px 0}
.easy .jobcard h3{font-size:20px}
.easy .jobcard .meta{font-size:var(--fs-meta)}
.easy .set-rule{font-size:var(--fs-body)}

/* ---------- the customer's own components ---------- */
.easy .my-svc{padding:22px 0;gap:20px}
.easy .my-svc .who b{font-size:21px}
.easy .my-svc .meta{font-size:var(--fs-meta);margin-top:9px}
.easy .my-next-lbl{font-size:var(--fs-lbl);color:var(--mist)}
.easy .my-next b{font-size:22px;line-height:1.3}
.easy .my-next small{font-size:var(--fs-lbl)}
.easy .my-more-body h2{font-size:24px;margin:10px 0 10px}
.easy .my-more-body .sub{max-width:46ch}
.easy .my-contact-body .sub{font-size:var(--fs-body);max-width:52ch}
.easy .my-jobcard .my-ba{gap:22px}
.easy .my-ba-col>.kicker{font-size:var(--fs-lbl);margin-bottom:11px}
.easy .my-lines .my-days{font-size:var(--fs-lbl);line-height:1.6}
.easy .my-line{font-size:var(--fs-body);padding:16px 0}
.easy .my-line-calc{font-size:var(--fs-meta)}
.easy .my-pay .sub,.easy .my-invoices .pempty{max-width:60ch}
.easy .my-pay .sub+.sub{margin-top:10px}
.easy .my-pay .quick{margin-top:18px}
.easy .pempty{font-size:var(--fs-meta)}
/* a photo has to look like something you can open */
.easy .ph{border:1px solid var(--line-2);border-radius:9px;overflow:hidden}
.easy .pgrid{gap:10px}
.easy .my-ba .pgrid{grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr))}
@media(max-width:680px){ .easy .my-ba .pgrid{grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr))} }
/* the row-actions rule sets 13.5px on its buttons, which is the one size the
   staff app tuned for a truck and the last thing an older eye needs */
.easy .row-actions .btn,.easy .quick .btn{font-size:var(--fs-meta);padding:12px 16px;min-height:48px}
.easy .row-actions .btn .ic,.easy .quick .btn .ic{width:17px;height:17px}
/* THE PHOTO VIEWER: the controls are words in 56px buttons, the count sits on
   its own line at the top and the caption is body size. The buttons sit in
   rows above and below the photo, never over it. */
.easy .lightbox{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-areas:"count close" "fig fig" "prev next";gap:14px;
  padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
.easy .lightbox .lb-count{position:static;grid-area:count;justify-self:start;font-size:var(--fs-body);font-weight:600;color:var(--ink);line-height:1.3}
.easy .lightbox .lb-close{position:static;grid-area:close;justify-self:end}
.easy .lightbox .lb-nav{position:static;transform:none}
.easy .lightbox .lb-prev{grid-area:prev;justify-self:start}
.easy .lightbox .lb-next{grid-area:next;justify-self:end}
.easy .lightbox figure{grid-area:fig;max-width:100%;max-height:100%;min-height:0;gap:14px}
.easy .lightbox img{max-width:100%;max-height:calc(100svh - 250px)}
.easy .lightbox figcaption{font-size:var(--fs-body);line-height:1.5;color:var(--ink);padding:0 4px;max-width:60ch}
.easy .lightbox .icon-btn{display:inline-flex;align-items:center;gap:10px;width:auto;height:auto;min-height:56px;padding:0 20px;
  font-size:var(--fs-btn);font-weight:700;color:#fff;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.6);border-radius:10px}
.easy .lightbox .icon-btn .ic{width:22px;height:22px}
.easy .lightbox .lb-word{display:inline}
@media(hover:hover){.easy .lightbox .icon-btn:hover{background:rgba(255,255,255,.22);border-color:#fff}}

@media(max-width:860px){
  .easy main#view{padding:24px 18px 110px}
  .easy{--inset:18px}
  .easy .panel:not(.fold):not(.group-open):not(.gate-card){padding:20px var(--inset)}
  .easy .today-head h2,.easy .cv-head h1{font-size:28px}
  .easy #tabbar{padding-left:2px;padding-right:2px}
  .easy #tabbar .navlink{font-size:15px;min-height:62px;padding-left:0;padding-right:0}
  .easy #tabbar .navlink .ic{width:23px;height:23px}
}
/* a service and its next visit stay side by side on a tablet: from 640 to
   860 the visit dropped under each row and hugged the right edge */
@media(min-width:641px) and (max-width:860px){ .easy .my-svc{grid-template-columns:minmax(0,1fr) auto} .easy .my-next{text-align:right} }
@media(max-width:640px){ .easy .my-svc{grid-template-columns:minmax(0,1fr);gap:12px;padding:20px 0} }
/* a job's Photos button is its own size, not a 700px bar */
@media(max-width:860px){ .easy .my-job .row-actions{display:flex;width:auto;margin-top:12px} .easy .my-job .row-actions .btn{width:auto} }
/* On a phone: the three figures one under another (two and a lone third
   read as a mistake), a fact to a line in an invoice's head, and the
   contact buttons as Call across the top with Text and Email under it. */
@media(max-width:480px){
  .easy .nums.three{--n:1}
  .easy .nums.three .num-item:last-child{grid-column:auto}
  .easy .fold-facts{flex-direction:column;align-items:flex-start;gap:6px}
  .easy .my-contact .quick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .easy .my-contact .quick .btn{width:100%}
  .easy .my-contact .quick .btn:first-child{grid-column:1/-1}
}
/* on a phone the figure goes under its line, not beside it: beside it, "Credit
   for the missed week" broke a word a line in the 150px left over at 320 */
@media(max-width:400px){
  .easy .my-line{grid-template-columns:minmax(0,1fr)}
  .easy .my-line-total{text-align:left}
  .easy .my-next{text-align:left}
  .easy .btn{width:100%}
  .easy .quick .btn,.easy .row-actions .btn{width:auto;flex:1 1 auto}
}

/* ---- rebuild: leads ---- */
/* ---------- Leads, Board, Calendar, Self-performed, PM Today (the rebuild, owner 2026-10-09) ----------
   The lead row is ONE LINE on a wide list and the kit's two line row on a
   narrow one. It answers to the LIST's width, not the window's, so it is
   right beside the rail at 900px and inside a phone alike. */
.lr-list{container-type:inline-size}
.lr{position:relative;display:grid;align-items:center;column-gap:16px;row-gap:3px;padding:12px 16px;min-height:56px;border-top:1px solid var(--line);
  grid-template-columns:minmax(0,1fr) auto 16px;grid-template-areas:"name val chev" "sub age chev"}
.lr:first-child{border-top:0}
@media(hover:hover){.lr:hover{background:rgba(255,255,255,.025)}}
.lr>:not(.kr-hit){position:relative;z-index:1;pointer-events:none;min-width:0}
.lr-name{grid-area:name;font-weight:600;font-size:16px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lr-sub{grid-area:sub;display:flex;align-items:baseline;gap:0;font-size:14px;color:var(--slate);white-space:nowrap;overflow:hidden}
.lr-st{flex:0 0 auto;max-width:100%;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
/* what is going on wins the line; the service takes what is left, or nothing */
.lr-svc{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis}
.lr-sub .lr-svc::before{content:"\00B7";margin:0 7px;color:var(--mist)}
.lr-st.hot{color:var(--blaze-hot)} .lr-st.late{color:var(--t-rose)} .lr-st.warn{color:var(--wheat)}
.lr-val{grid-area:val;text-align:right;font-weight:600;font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap}
.lr-val.none{font-weight:500;color:var(--mist)}
.lr-age{grid-area:age;text-align:right;font-size:13.5px;color:var(--slate);white-space:nowrap;font-variant-numeric:tabular-nums}
.lr .kr-chev{grid-area:chev;display:flex;color:var(--mist)}
.lr .kr-chev .ic{width:16px;height:16px}
/* wide: name | service, town | what is going on | value | age | > */
@container (min-width:700px){
  .lr{grid-template-areas:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.25fr) 104px 72px 16px;min-height:54px;padding:10px 18px}
  .lr-sub{display:contents}
  .lr-name{grid-column:1;grid-row:1}
  .lr-svc{grid-column:2;grid-row:1;font-size:14.5px;color:var(--slate);white-space:nowrap}
  .lr-sub .lr-svc::before{content:none}
  .lr-st{grid-column:3;grid-row:1;font-size:14.5px;white-space:nowrap}
  .lr-val{grid-column:4;grid-row:1}
  .lr-age{grid-column:5;grid-row:1}
  .lr .kr-chev{grid-column:6;grid-row:1}
}
/* the whole page: the list, the toolbar over it, and nothing between */
.leads2 .toolbar{margin-bottom:18px}

/* ---------- the board: a card is four short lines ---------- */
.pipeline2 .toolbar{justify-content:flex-end}
.pipeline2 .pcard .pc-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0}
.pipeline2 .pcard .pc-top b{display:block;min-width:0;font-size:15px;font-weight:600;overflow-wrap:anywhere}
.pipeline2 .pcard .pc-val{flex:none;font-weight:600;font-size:14px;font-variant-numeric:tabular-nums;color:var(--ink)}
.pipeline2 .pcard .svc{margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pipeline2 .pcard .pc-st{margin-top:8px;font-size:13.5px;color:var(--slate)}
.pipeline2 .pcard .pc-st.hot{color:var(--blaze-hot)} .pipeline2 .pcard .pc-st.late{color:var(--t-rose)} .pipeline2 .pcard .pc-st.warn{color:var(--wheat)}

/* ---------- the calendar's day: a section of kit rows ---------- */
.cal2 .agenda{margin-top:28px}
.cal2 .agenda .sec-head h3{font-size:19px}
@media(min-width:1400px){
  .cal2 .agenda{margin-top:0}
  /* beside the month the column is 300 to 420px: the row's button goes under its words */
  .cal2 .agenda .kr{grid-template-columns:minmax(0,1fr) auto}
  .cal2 .agenda .kr-right{grid-column:2;grid-row:1}
  .cal2 .agenda .kr:has(.kr-right) .kr-acts{grid-column:1/-1;justify-content:flex-start}
}

/* ---------- PM Today: what a coming up line is ---------- */
.pmtoday .pm-what{font-size:13px;color:var(--mist);margin-left:6px;font-weight:500}
/* Self-performed: a job with no price says so, quietly, so every row's button sits in the same place */
.kr-right .kr-none{font-weight:500;color:var(--mist)}
/* Self-performed: the first section clears the view switch above it */
.inhouse2>.pg,.inhouse2>.kempty-box{margin-top:10px}

/* ---- rebuild: money ---- */
/* ---------- the rebuild, money and customers (2026-10-09) ----------
   Recurring, a customer's page, the call list, snow and Billing, on the page
   kit. Only what the kit does not already say: the figure on the right of a
   row in its tones, the filters over the Recurring list, the "Add more
   details" disclosure in the popups, and a few notes. */

/* the figure on the right of a row: a missing rate in wheat, nothing in mist */
.kr-right .dim{color:var(--mist);font-weight:500}
.kr-right .warn{color:var(--wheat)} .kr-right .bad,.kr-right small.bad{color:var(--t-rose)} .kr-right .good{color:var(--t-moss)}
.kr.is-off .kr-main>b{color:var(--slate)}
/* a section heading's own figure ("$12,334, $9,162 late"), said once */
.sec-note{font-size:14px;color:var(--slate);font-variant-numeric:tabular-nums;white-space:nowrap}
.sec-note .late{color:var(--t-rose)}
.more-note{font-size:13px;color:var(--slate);padding:2px 4px}
.rb-bl .pg-side .kfact.static{grid-template-columns:minmax(0,1fr) auto}
.rb-bl .pg-side .kfact.static .kfact-v{text-align:right}
.kfact-v small{font-size:13px;color:var(--slate);margin-left:6px}

/* Recurring: three chips, the service select and the Add button on one line */
.rb-cu-bar{justify-content:flex-start}
.rb-cu-picks{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-right:auto}
.rb-cu-picks .select{width:auto;min-width:170px;min-height:38px;padding:8px 32px 8px 12px;font-size:14px}
.rb-cu-picks .seg-btn::before{display:none}
.rb-cu-picks .seg-btn{padding:8px 12px}
.rb-cu .sec+.sec{margin-top:0}

/* "Add more details": the optional fields of a popup, folded */
.rb-more{min-width:0}
.rb-more>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--slate);padding:8px 0;min-height:40px}
.rb-more>summary::-webkit-details-marker{display:none}
.rb-more>summary::before{content:"+";font-size:17px;line-height:1;color:var(--mist)}
.rb-more[open]>summary::before{content:"\2212"}
@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:4px}
.rb-more>.form-grid,.rb-more>.adj-add{margin-top:10px}

/* a customer's page: back, the heading with its contact line, the key note */
.rb-cv-back{display:inline-flex;align-items:center;gap:6px;text-decoration:none;margin-bottom:16px;font-weight:600}
/* a way back is a quiet link, not orange: blaze is "needs you now" (2026-10-12) */
.rb-cv-back,.fd-back,.ins-back,a.link-btn[href="#/crewjobs"]{color:var(--slate)}
@media(hover:hover){.rb-cv-back:hover,.fd-back:hover,.ins-back:hover{color:var(--ink)}}
.rb-cv .cv-qb-body{padding:0}
.rb-cv .pg-head p a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.25)}
.rb-cv .pg-head h2 .chip-static{vertical-align:middle;margin-left:6px}
.rb-cv-access{display:flex;gap:8px;align-items:center;color:var(--wheat);font-size:14.5px;margin:-14px 0 26px}
.rb-cv-access .ic{width:15px;height:15px;flex:none}
.rb-arrows{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sec-head .rb-arrows .btn{min-height:36px;padding:6px 10px}
.rb-cv-note,.rb-bl-note{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--slate);line-height:1.5;margin:12px 0 0}
.rb-cv-note .ic,.rb-bl-note .ic{width:14px;height:14px;flex:none}
.rb-cv-note:first-child,.rb-bl-note:first-child{margin-top:0}
.rb-bl-note.good,.rb-cv-note:has(.ic){color:var(--t-moss)}
.rb-bl-note a{color:var(--ink)}
.rb-bl .bl-warn{margin-top:12px}
.sheet-body .rt-foot{display:flex;justify-content:space-between;gap:12px;margin-top:14px;font-size:14.5px;color:var(--slate)}
.sheet-body .rt-foot b{color:var(--ink)}
.qbh{display:flex;flex-direction:column;gap:12px}
.qbh .kr{min-height:54px}
.qbh-sum{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:14px;color:var(--slate)}
.qbh-sum b{color:var(--ink);font-weight:600;margin-left:4px;font-variant-numeric:tabular-nums}
.qbh-sum b.good{color:var(--t-moss)} .qbh-sum b.warn{color:var(--wheat)}

/* snow: a property cleared today reads done */
.sn-plow.is-on{color:var(--t-moss);border-color:rgba(111,203,136,.5);background:rgba(111,203,136,.1)}
.kr.is-done .kr-main>b{color:var(--slate)}

/* the call list: the service select and the chips on one line */
.rb-cl .calls-bar{justify-content:flex-start}
.rb-cl .calls-bar .select{width:auto;min-width:220px;min-height:38px;padding:8px 32px 8px 12px;font-size:14px}

@media(max-width:680px){
  .rb-cu-picks{width:100%;margin-right:0}
  .rb-cu-picks .select{flex:1 1 150px;min-width:0}
  .rb-cu-bar>.btn-blaze{width:100%}
  .rb-cl .calls-bar .select{width:100%}
  .rb-cv-access{margin-top:-8px}
  /* a row with a figure and no button: the chevron would wrap under the
     figure on its own line, and the whole row is the tap anyway */
  :is(.rb-cu,.rb-cv,.rb-bl,.rb-cl,.rb-sn,.qbh) .kr:has(.kr-right)>.kr-chev{display:none}
  .rb-cv .sec-head,.rb-bl .sec-head,.rb-sn .sec-head,.rb-cu .sec-head{flex-wrap:wrap}
}

/* ---- rebuild: people ---- */