/* admin/css/40-boards-calendar-settings.css: Pipeline, calendar, reports, settings, contractors and team, recurring and billing.
   The admin stylesheet is these files in numeric order, linked from admin.html; a later file overrides an earlier one, so keep the order. */
/* ---------- pipeline ---------- */
/* The board is the page: the columns stretch to the bottom of the screen
   rather than ending under the tallest one, so a light week reads as an empty
   board and not as a page that stopped early. */
.board-wrap{position:relative;min-height:calc(100svh - 210px)}
.board-wrap::before,.board-wrap::after{content:"";position:absolute;top:0;bottom:14px;width:40px;pointer-events:none;opacity:0;transition:opacity .2s;z-index:1}
.board-wrap::before{left:0;background:linear-gradient(90deg,var(--g0),rgba(11,21,16,0))}
.board-wrap::after{right:0;background:linear-gradient(270deg,var(--g0),rgba(11,21,16,0))}
.board-wrap.more-left::before,.board-wrap.more-right::after{opacity:.95}
.board{display:flex;align-items:stretch;gap:12px;overflow-x:auto;padding:2px 2px 14px;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;min-height:calc(100svh - 210px)}
.col{flex:1 0 264px;max-width:420px;min-width:0;scroll-snap-align:start;display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:var(--r);border:1px solid var(--line);background:var(--card);min-height:200px;transition:border-color .15s}
.col.over{border-color:var(--blaze-hot)}
.col-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:4px 4px 8px}
.col-head .mono{font-size:12.5px;color:var(--mist)}
.pcard{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 12px;cursor:grab;transition:border-color .15s,background .15s}
@media(hover:hover){.pcard:hover{border-color:var(--line-2);background:rgba(255,255,255,.05)}}
.pcard.dragging{opacity:.5;cursor:grabbing}
.pcard b{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:15px;font-weight:600}
.pcard .svc{font-size:13.5px;color:var(--slate);margin-top:6px}
/* a card is about 180px on a laptop: the stage's words go under its dots, and
   the value takes a line of its own, or "Needs a / date" broke beside the dots
   and the next step was squeezed into five lines beside the value */
.pcard .stage{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:8px;font-size:12.5px;white-space:normal}
.pcard .stage-label{white-space:normal;overflow:visible}
.pcard .foot{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:10px;font-size:12.5px;color:var(--mist)}
.pcard .foot .val{font-family:var(--display);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.pcard .foot .val:empty{display:none}
.col-empty{color:var(--mist);font-size:13px;text-align:center;padding:22px 8px;border:1px dashed var(--line);border-radius:var(--r-sm)}

/* ---------- calendar ---------- */
.cal-tools{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.cal-tools h2{font-size:20px;min-width:170px}
.cal-tools .gcal-note{margin:0 0 0 auto;font-size:13px;color:var(--mist)}
.cal-tools .chip{margin-left:auto}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal .dow{font-size:13.5px;font-weight:600;color:var(--mist);text-align:center;padding:2px 0 8px}
.cal .day{min-height:104px;border-radius:8px;border:1px solid var(--line);background:transparent;padding:8px;text-align:left;display:flex;flex-direction:column;gap:5px;color:var(--ink);transition:background .15s,border-color .15s;min-width:0}
@media(hover:hover){.cal .day:hover{background:rgba(255,255,255,.03)}}
.cal .day.out{border-color:transparent}
.cal .day.out .d{color:var(--mist)}
.cal .day .d{font-size:14px;font-weight:600;color:var(--slate);font-variant-numeric:tabular-nums}
.cal .day.today .d{color:var(--ink);font-weight:800}
.cal .day.today{border-color:rgba(255,255,255,.32)}
.cal .day.sel{background:rgba(255,255,255,.05);border-color:var(--line-2)}
/* two lines before it gives up: one cut "1:30 PM Broken Co..." in every cell at laptop widths */
.cal .mark{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;font-size:12.5px;font-weight:500;padding:1px 0 1px 10px;line-height:1.35;overflow:hidden;overflow-wrap:anywhere;max-width:100%;position:relative;color:var(--ink)}
.cal .mark::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:50%;background:var(--mc,var(--mist))}
.cal .mark.job{--mc:var(--t-kraft)} .cal .mark.job.finished{--mc:var(--mist);color:var(--slate)} .cal .mark.fu{--mc:var(--wheat)} .cal .mark.visit{--mc:var(--ink)} .cal .mark.gcal{--mc:var(--slate);color:var(--slate)}
/* a finished job is a ring, not a dot: filled, its gray was Google Calendar's */
.cal .mark.job.finished::before,.cal-legend i.job.finished{background:transparent;box-shadow:inset 0 0 0 1.5px var(--mist)}
/* stacked day chips need their own gap: the day's flex gap sits between the
   date and the whole list, not between the chips */
.cal .marks{display:flex;flex-direction:column;gap:3px;min-width:0}
.cal .more{font-size:12px;color:var(--mist);padding-left:10px}
.agenda{margin-top:14px}
.agenda .lead-row .meta .svc{color:var(--ink)}
.cal-legend{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--slate);margin:12px 2px 0}
.cal-legend i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:1px}
.cal-legend i.job{background:var(--t-kraft)} .cal-legend i.fu{background:var(--wheat)} .cal-legend i.visit{background:var(--ink)} .cal-legend i.gcal{background:var(--slate)}
/* three warm colors were the only difference between a job, a site visit and
   a follow-up; each kind has its own shape too: a job is round, a site visit
   square, a follow-up a diamond (2026-10-12 review) */
.cal .mark.visit::before,.cal-legend i.visit{border-radius:1.5px}   /* a visit is a white square, a job a kraft dot */
.cal .mark.fu::before,.cal-legend i.fu{border-radius:1px;transform:rotate(45deg) scale(.88)}
.gcal-note{font-size:12.5px;color:var(--mist);margin:10px 2px 0}

/* ---------- reports and site stats ---------- */
.reports .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
/* A panel a view hides is gone, whatever display the panel rule gives it. */
.reports [hidden],.stats [hidden]{display:none!important}
.chart-wrap{position:relative;height:240px}
.chart-wrap.sm{height:210px}
.statlist{display:flex;flex-direction:column}
/* THE BAR IS A TRACK UNDER THE LABEL (2026-09-27), the goal bar's shape. It
   was a block drawn BEHIND the label, so a small count painted a 10 to 20px
   tab behind the first letter or two ("/c", "w"), which read as a stuck
   highlight. The row's own hairline went with it: the track divides them. */
.statrow{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:10px 0 18px;position:relative}
.statrow::after{content:"";position:absolute;left:0;right:0;bottom:7px;height:4px;border-radius:2px;background:rgba(255,255,255,.06)}
/* two lines before an ellipsis: "/become-a-contractor" wanted 142px of 136 at 320 */
.statrow .lbl{font-size:14px;overflow:hidden;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
.statrow .num{font-family:var(--text);font-weight:500;font-size:13px;color:var(--slate);white-space:nowrap;font-variant-numeric:tabular-nums}
.statrow .bar{position:absolute;left:0;bottom:7px;height:4px;border-radius:2px;background:rgba(157,172,157,.5);z-index:1}
.statnote{margin-top:14px;font-size:12.5px;color:var(--mist);line-height:1.6;max-width:70ch}
.numbers .statlist{margin-top:2px}
.nb-nums{margin-bottom:18px}
.numbers .grid-2 .panel{min-width:0}
.funnel{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.fn-step{position:relative;display:flex;align-items:center;gap:12px;min-height:42px;padding:9px 14px;border-radius:var(--r-sm);border:1px solid var(--line);overflow:hidden}
.fn-bar{position:absolute;inset:0 auto 0 0;background:rgba(var(--tone-rgb),.14);transition:width .4s var(--ease)}
.fn-lbl{position:relative;flex:1;min-width:0;font-size:14px;font-weight:500}
.fn-num{position:relative;font-family:var(--display);font-size:18px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
[data-tone=moss] .fn-num{color:var(--t-moss)}

/* ---------- settings ---------- */
.settings .panel{margin-bottom:12px}
/* View as: a role, what it shows, the people who hold it and Open. Stacked at
   every width: dealt into half a 1400px screen, a side by side row left the
   select 180px for a business name. */
.va-list{display:flex;flex-direction:column}
.va-pick{display:flex;gap:8px;min-width:0}
.va-pick .select{flex:1 1 auto;min-width:0}
.va-pick .btn{flex:none}
.va-sub{margin:0 0 16px}
.tpl-card{padding:14px 0;border-bottom:1px solid var(--line)}
.tpl-card:last-child{border-bottom:none}
.tpl-card.is-fold{padding:0;overflow:hidden}
.tpl-card .tpl-head{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;background:none;border:0;text-align:left;color:inherit;font:inherit;cursor:pointer;min-height:50px;transition:background .14s}
@media(hover:hover){.tpl-card .tpl-head:hover{background:rgba(255,255,255,.025)}}
.tpl-card .tpl-head:focus-visible{outline:2px solid var(--blaze-hot);outline-offset:-3px}
.tpl-name{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.tpl-name b{font-size:14.5px;color:var(--ink);font-weight:600}
.tpl-name span{display:block;font-size:12.5px;color:var(--mist)}
.tpl-chev{width:16px;height:16px;flex:none;color:var(--mist);transition:transform .2s var(--ease)}
.tpl-card.is-open .tpl-chev{transform:rotate(180deg);color:var(--ink)}
.tpl-body{padding:14px 16px 16px;border-top:1px solid var(--line)}
.tpl-card .preview{margin-top:10px;font-size:13.5px;color:var(--slate);line-height:1.55;padding:10px 12px;border-radius:var(--r-sm);border:1px dashed var(--line-2)}
.tpl-card .tpl-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.vars{display:flex;gap:6px;flex-wrap:wrap}
.vars code{font-size:12px;border:1px solid var(--line);border-radius:4px;padding:1px 6px;color:var(--t-kraft);font-family:inherit}
.tpl-block{padding:14px 0;border-bottom:1px solid var(--line)}
.tpl-block:last-child{border-bottom:none}
.tpl-block .tpl-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.tpl-block .tpl-head b{font-size:14.5px;font-weight:600}
.tpl-block .tpl-head span{font-size:12.5px;color:var(--mist)}
.steps-edit{display:flex;flex-direction:column;gap:6px}
.step-edit{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center}
.step-edit .input{padding:8px 12px;font-size:14px}
.step-edit .quick .icon-btn{width:36px;height:36px}
.trade-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.trade-row:last-child{border-bottom:none}
.trade-row .sub{margin-top:2px}
.trade-row.off{opacity:.55}

/* ---------- one main card, and what goes beside it ---------- */
/* Account and Insurance (2026-09-30). They were two or three short panels
   dealt into a grid, each its own height, and at 1920 the account read as
   five boxes of five heights with a card spent on one Sign out button. Now a
   page is its main card and a side column, each a stack, so nothing waits on
   a neighbor's height. One readable column until there is room for two. */
.split{display:flex;flex-direction:column;gap:14px}
.split-main,.split-side{display:flex;flex-direction:column;gap:14px;min-width:0}
@media(min-width:1180px){ .split{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:start;max-width:1320px} }
/* a narrow card stacks its fields: in a card a third of the screen wide a
   two field form put the name at "Andrew Zimr" (audit 2026-09-26) */
.split .panel{container-type:inline-size}
@container (max-width:460px){ .form-grid{grid-template-columns:minmax(0,1fr)} .form-grid .span-2{grid-column:auto} }
/* the account card: three subjects in one box, told apart by a hairline */
.acct-card .set-rule{border-top:1px solid var(--line);padding-top:22px;margin-top:28px}
.acct-card .set-rule+.sub{margin:6px 0 16px}
.acct-card .form-grid>.form-actions{margin-top:2px}
.acct-card .form-actions{justify-content:flex-start}

/* ---------- contractors, team, the goal ---------- */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
/* the last cell of a card grid: how the next one gets added, and the thing
   that keeps a row of two cards from reading as a row that ran out */
.add-tile{display:flex;align-items:center;justify-content:center;gap:9px;min-height:110px;padding:16px;
  border:1px dashed var(--line-2);border-radius:var(--r);background:none;color:var(--slate);font-weight:600;font-size:14.5px;
  transition:border-color .15s,color .15s}
.add-tile .ic{width:17px;height:17px}
@media(hover:hover){.add-tile:hover{border-color:var(--blaze-hot);color:var(--ink)}}
/* it exists to finish a ROW of cards: where the list is one column it is just
   the Add button again, a screen lower. The two grids drop to one column at
   different widths, so they hide it at different widths. */
@media(max-width:860px){#cuList .add-tile{display:none}}
@media(max-width:680px){.cgrid .add-tile{display:none}}
.ccard{border:1px solid var(--line);border-top-color:rgba(255,255,255,.13);border-radius:var(--r);padding:16px;background:var(--card);cursor:pointer;
  transition:border-color .15s,transform .15s var(--ease),box-shadow .15s;min-width:0;display:flex;flex-direction:column;gap:10px;
  box-shadow:0 1px 1px rgba(0,0,0,.25)}
@media(hover:hover){.ccard:hover{border-color:var(--line-2);transform:translateY(-1px);box-shadow:0 2px 2px rgba(0,0,0,.25),0 18px 34px -22px rgba(0,0,0,.95)}}
.ccard .row1{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.ccard h3{font-size:17px;line-height:1.25}
.ccard .contact{font-size:13px;color:var(--slate);margin-top:6px}
.ccard .foot{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto;font-size:12.5px;color:var(--slate)}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;padding:4px 8px;border-radius:6px;border:1px solid var(--line);color:var(--slate);white-space:nowrap}
.tag.more{color:var(--mist)}
.tags.pick{display:flex;flex-wrap:wrap;gap:8px;padding:0;border:0;background:none;border-radius:0}
.tags.pick .tag{cursor:pointer;min-height:38px;padding:8px 12px;font-size:13px;color:var(--ink);white-space:normal;text-align:left;line-height:1.25;transition:border-color .15s,background .15s}
@media(hover:hover){.tags.pick .tag:hover{border-color:var(--line-2)}}
.tags.pick .tag.on{background:var(--ink);border-color:var(--ink);color:var(--g0)}
.tags.pick .tag .ic{width:13px;height:13px}
.insurance-box{border:1px dashed var(--line-2);border-radius:var(--r);padding:18px;text-align:center}
.insurance-box .ic{width:26px;height:26px;color:var(--wheat);margin:0 auto 8px}
.insurance-box h3{font-size:16px}
/* Offers sit side by side once two fit (2026-09-30): one to a row, a 1,260px
   card at 2560 held its words and buttons in the left third. */
.offer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(min(460px,100%),calc(50% - 6px)),1fr));gap:12px;margin-bottom:12px}
.offer{border:1px solid rgba(255,106,36,.5);border-radius:var(--r);padding:22px 24px;background:var(--card);display:flex;flex-direction:column}
.offer .offer-acts{margin-top:auto;padding-top:16px}
.offer .kicker{margin-bottom:10px}
.offer h3{font-size:19px;margin-bottom:4px}
.offer .meta{display:flex;flex-wrap:wrap;gap:7px 16px;font-size:14px;color:var(--slate);margin:9px 0 12px}
.offer .meta b{color:var(--ink);font-weight:600}
.offer p{font-size:15px;line-height:1.5;margin-top:4px}
/* Two buttons, not two banners. The pair fills the card, which is right on a
   phone (165px each) and absurd on a 1,376px portal column, where Accept was
   a 663px slab of orange. Capped, it still reads as the decision on the
   screen and the card keeps its full width for the detail above it. */
.offer-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.offer-acts .btn{min-height:50px;font-size:15px}
.jobcard{border:1px solid var(--line);border-top-color:rgba(255,255,255,.13);border-radius:var(--r);padding:15px 16px;background:var(--card);cursor:pointer;
  transition:border-color .15s,transform .15s var(--ease),box-shadow .15s;margin-bottom:8px;display:flex;flex-direction:column;gap:7px;
  box-shadow:0 1px 1px rgba(0,0,0,.25)}
@media(hover:hover){.jobcard:hover{border-color:var(--line-2);transform:translateY(-1px);box-shadow:0 2px 2px rgba(0,0,0,.25),0 18px 34px -22px rgba(0,0,0,.95)}}
.jobcard h3{font-size:17px}
.jobcard .meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13.5px;color:var(--slate)}
/* "Waiting on Rae Nordquist Tree Services LLC" wanted 256px of a 157px card at 320: the stage wraps, as it does in the table */
.jobcard .stage{white-space:normal;line-height:1.35}
/* The contractor's column is held to a reading width, but "a reading width"
   has to grow with the glass: at 2,560px a 1,280px column is half the screen
   and 640px of ground down each side, which is the same complaint the public
   site got. It grows at half the rate of the screen above 1,600px and stops
   at 1,680, which is also what lets Account and Insurance reach the three
   column rule at 1,600. `width:100%` beside the auto margin is load-bearing:
   `.main` is a column flexbox, and an auto inline margin on a flex item makes
   it shrink to its content (measured at 320px in WebKit, where it sized the
   page to the route grid and scrolled sideways). */
/* Under the page title, like every staff page (2026-09-30): centered, the
   column drifted 600px away from its own title on a 2560 screen. */
.role-contractor main#view,.role-crew main#view,.role-customer main#view{max-width:max(1280px,min(calc(1280px + (100vw - 1600px) * .5),1680px));width:100%}
.role-contractor .lead-row .who a,.role-contractor .lead-row .who b{font-size:16px}
/* the service under the customer's name on a route card's closed header */
.rt-svc{display:block;margin-top:3px;font-family:var(--text);font-size:14px;font-weight:600;letter-spacing:0;color:var(--slate)}
/* a two line title (name, then service) keeps its tag on the name's line */
.rt-card .fold-row{align-items:flex-start}
.rt-card .fold-row .fold-tag{margin-top:4px}
/* The second line of a route card's header:
   the address as the map link, what the month has come to on the right. It
   sits between the header button and the body, so the link is never inside a
   button; its inset matches .fold-head's at every width. */
.rt-line{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:6px 16px;margin:-6px 0 0;padding:0 24px 18px;font-size:14px;line-height:1.45}
.rt-map{display:inline-flex;align-items:flex-start;gap:8px;min-width:0;color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.25)}
.rt-map .ic{width:14px;height:14px;flex:none;margin-top:3px;color:var(--mist)}
@media(hover:hover){.rt-map:hover{text-decoration-color:var(--blaze-hot)}}
.rt-sum{margin-left:auto;font-weight:600;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.rt-sum.none{font-weight:500;color:var(--mist)}
@media(max-width:1023px){.rt-line{padding:0 16px 15px}}
@media(max-width:680px){.rt-line{padding:0 15px 14px}}
@media(max-width:360px){.rt-line{padding:0 14px 14px}}
@media(pointer:coarse){.rt-map{padding-block:12px;margin-block:-12px}}
/* contractor Jobs: a month to submit is one line,
   "September: 7 properties, nothing marked", beside its one button. */
.cj-month{margin:0;font-size:16px;line-height:1.45;color:var(--slate)}
.cj-month b{color:var(--ink);font-weight:600}
.goal{position:relative}
.goal-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.goal-big{font-family:var(--display);font-weight:700;font-size:clamp(30px,4vw,44px);letter-spacing:-.03em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.goal-big small{font-size:.42em;color:var(--slate);letter-spacing:-.01em;font-weight:600;margin-left:6px}
.goal-bar{position:relative;height:10px;border-radius:5px;background:rgba(255,255,255,.07);margin:22px 0 30px;overflow:visible}
.goal-bar>i{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:var(--t-moss);transition:width .7s var(--ease);min-width:4px}
.goal-tick{position:absolute;top:-4px;bottom:-4px;width:1px;background:rgba(255,255,255,.3);transform:translateX(-.5px)}
.goal-tick span{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:6px;font-size:11.5px;font-weight:600;color:var(--mist);white-space:nowrap}
.goal-tick:last-of-type span{left:auto;right:0;transform:none}
.goal-tick:first-of-type span{left:0;transform:none}
.goal-tick.hit{background:var(--t-moss)}
.goal-tick.hit span{color:var(--t-moss)}
/* The goal: one line for the pace, one for the year (views/goal.js). */
.goal-line{font-size:14px;color:var(--slate);line-height:1.5;margin:0}
.goal-line+.goal-line{margin-top:6px}
.goal-yr .yr-band{font-weight:600}
.goal-yr .yr-band.below{color:var(--wheat)} .goal-yr .yr-band.inside{color:var(--t-moss)} .goal-yr .yr-band.above{color:var(--st-approved)}

/* ---------- recurring: the route grid, a customer, month end ---------- */
/* a recurring customer's card: the account at a glance, not three gray lines */
.cu-card{gap:12px}
.cu-card .row1{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.cu-card h3{font-size:17px;line-height:1.25;min-width:0}
/* Recurring: what the strip and the three panels under the cards were reduced
   to. One line each, side by side where there is room. */
.cu-lines{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px}
.cu-lines:empty{display:none}
.cu-lines.cu-after{margin:16px 0 0}
.cu-line{flex:1 1 380px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px 12px;margin:0;padding:10px 12px 10px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);font-size:14.5px;color:var(--slate);min-width:0}
.cu-line>svg{width:16px;height:16px;flex:none;color:var(--mist)}
.cu-line>span{min-width:0;line-height:1.45}
.cu-line>span a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.25)}
.cu-line .btn{flex:none}
.cu-line.warn,.cu-line.warn>svg{color:var(--wheat)}
.cu-line.warn{padding-block:13px}
@media(max-width:600px){.cu-lines{gap:8px} .cu-line{flex-basis:100%;padding:8px 10px 8px 14px;font-size:14px}}
.qb-linkall{margin:14px 0 4px;justify-content:flex-start}

/* A phone shows an account as two lines: the name with the month's figure,
   then the services. The address and the contractor are one tap away on the
   record; tall tagged cards made the list 11,000px on an iPhone. */
@media(max-width:600px){
  #cuList .cu-acct{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:13px 14px;margin-bottom:8px}
  #cuList .cu-acct>.row1{grid-column:1;grid-row:1;align-self:center}
  #cuList .cu-acct>.meta{display:none}
  #cuList .cu-acct>.cu-foot{grid-column:2;grid-row:1;margin:0;padding:0;border:0;align-self:center}
  #cuList .cu-acct>.cu-foot>span{display:none}
  #cuList .cu-acct>.cu-foot b{font-size:17px}
  #cuList .cu-acct>.cu-svc,#cuList .cu-acct>.hint,#cuList .cu-acct>.cu-warn{grid-column:1/-1;margin:0}
  #cuList .cu-acct>.cu-svc{display:block;font-size:14px;line-height:1.45;color:var(--slate)}
  #cuList .cu-acct>.cu-svc .tag{display:inline;border:0;padding:0;font-size:14px;font-weight:500;color:var(--slate);white-space:normal}
  #cuList .cu-acct>.cu-svc .tag i{display:none}
  #cuList .cu-acct>.cu-svc .tag+.tag::before{content:", "}
}
.cu-svc .tag{flex-direction:column;align-items:flex-start;gap:1px;padding:5px 9px;white-space:normal;color:var(--ink);font-weight:600}
.cu-svc .tag i{font-style:normal;font-size:12px;font-weight:500;color:var(--mist)}
.cu-foot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:auto;padding-top:10px;border-top:1px solid var(--line);font-size:13.5px;color:var(--slate)}
.cu-foot b{font-family:var(--display);font-size:20px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.cu-foot b.good{color:var(--t-moss)} .cu-foot b.dim{color:var(--mist)}
/* 17c: one service at a time; 19i: by day, then town */
.cu-svcbar{margin-top:-4px}
.cu-svcbar .seg{margin-left:auto}
.cu-access{display:flex;gap:8px;align-items:flex-start;margin:0;font-size:13.5px;color:var(--wheat)}
.cu-access svg{width:14px;height:14px;flex:none;margin-top:3px}
.tag.warn{color:var(--wheat)}
.chip-static.warn{color:var(--wheat)}
#cuList.is-route{display:block}
.cu-day+.cu-day{margin-top:26px}
.cu-day-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.cu-day-head h3{font-family:var(--display);font-size:20px;margin:0}
.cu-day-head .count-note{margin-right:auto}
.cu-town{margin-top:14px}
.cu-town h4{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:14px;color:var(--slate);font-weight:600}
.cu-town h4 span{font-variant-numeric:tabular-nums;color:var(--mist)}
.cu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:12px}
.cu-grid .jobcard{margin-bottom:0}
.cu-warn{font-size:13px;color:var(--wheat)}
.se-counts{display:flex;gap:6px 16px;flex-wrap:wrap;font-size:13.5px;color:var(--slate);font-variant-numeric:tabular-nums}
.se-counts .good{color:var(--t-moss)} .se-counts .warn{color:var(--wheat)}
/* The month sits on the card's own inset, like every other line in it: it had
   its own 14px, ten pixels out from the words above it (2026-09-30). */
.rt-dow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;font-size:12.5px;font-weight:600;color:var(--mist);text-align:center}
.rt-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.fold-body>.rt-dow+.rt-grid{margin-top:6px}
.rt-day{min-height:44px;display:grid;place-items:center;border-radius:var(--r-sm);border:1px solid var(--line);color:var(--ink);font-size:14.5px;font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer;transition:background .14s,border-color .14s,color .14s}
.rt-day.out{border:none;background:none}
@media(hover:hover){.rt-day:not(.is-off):hover{border-color:var(--line-2);background:rgba(255,255,255,.04)}}
.rt-day:focus-visible{outline:2px solid var(--blaze-hot);outline-offset:2px}
.rt-day.is-on{background:var(--t-moss);border-color:var(--t-moss);color:#06240F}
.rt-day.is-off{color:var(--slate);cursor:default;background:none;border-color:transparent}
.rt-day.is-busy{opacity:.6}
.rt-day[data-today]{box-shadow:inset 0 0 0 1px var(--blaze-hot)}
.rt-card .panel-head{padding-bottom:12px}
.rt-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px}
.rt-month{text-align:center;min-width:0}
.rt-month b{display:block;font-family:var(--display);font-size:17px;color:var(--ink);white-space:nowrap}
.rt-month span{font-size:12.5px;color:var(--mist)}
/* one sentence, "3 confirmed in September": a flex row split the figure and
   its words to opposite edges of the card */
.rt-foot{display:block;font-size:14px;color:var(--slate)}
.rt-foot b{color:var(--ink);font-size:16px}
/* Phase 18: the month's Submit, under the grid it is about */
.rt-submit{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.rt-submit p{margin:0;flex:1 1 220px;font-size:14px;line-height:1.5;color:var(--slate);display:flex;gap:8px;align-items:flex-start}
.rt-submit p b{color:var(--ink)}
.rt-submit.is-sent p svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--t-moss)}
.rt-day.is-locked{cursor:default}
/* 17d: hours on a job, one number a person */
.hours-list{list-style:none;margin:8px 0 0;padding:0}
.hours-list li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line);font-size:14.5px}
.hours-list li b{font-variant-numeric:tabular-nums}
.hours-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin-top:10px}
.hours-form .field{flex:1 1 160px;max-width:240px}
/* 17e: the estimate and its running margin */
.est{margin-top:18px}
.est-sum{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:12px 0 0;font-size:14.5px;color:var(--slate)}
.est-sum b{color:var(--ink);font-variant-numeric:tabular-nums}
.est-sum b.good{color:var(--t-moss)} .est-sum b.warn{color:var(--wheat)} .est-sum b.bad{color:var(--t-rose)}
.est-dot{width:3px;height:3px;border-radius:50%;background:var(--mist)}
/* 19c and 19h on Reports */
#rpMargin .good,#rpScore .good{color:var(--t-moss)} #rpMargin .warn,#rpScore .warn{color:var(--wheat)} #rpMargin .bad,#rpScore .bad{color:var(--t-rose)}
#rpMargin small,#rpScore small{display:block;font-size:12.5px}
.rp-sub{font-size:15px;margin:18px 0 8px}
/* 19j: snow dispatch */
.sn-acts{margin-top:10px}
.sn-row.is-done .who>a{color:var(--slate)}
.sn-addr{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.25)}
.sn-access{display:inline-flex;gap:6px;align-items:flex-start;color:var(--wheat)}
.sn-access svg{width:13px;height:13px;flex:none;margin-top:3px}
/* Snow dispatch: a property done today reads as a done check, not a button */
.sn-plow.is-on{color:var(--t-moss);border-color:transparent;background:rgba(111,203,136,.08)}
/* 19d: a customer's history in the lead panel */
.hist{list-style:none;margin:6px 0 0;padding:0}
.hist-item a{display:flex;flex-direction:column;gap:5px;padding:12px 0;border-top:1px solid var(--line);color:var(--ink);text-decoration:none}
.hist-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.hist-meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13.5px;color:var(--slate)}
.hist-note{font-size:13.5px;line-height:1.5;color:var(--slate);margin:0}
@media(hover:hover){.hist-item a:hover{background:rgba(255,255,255,.02)}}
/* 17a: one job or recurring, on the lead */
.lp-rec{display:flex;flex-direction:column;gap:10px;margin:4px 0 14px}
.lp-rec.is-done{flex-direction:row;align-items:center;gap:8px;color:var(--ink);font-size:14.5px}
.lp-rec.is-done svg{width:16px;height:16px;color:var(--t-moss)}
.lp-rec.is-done a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.planned{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:6px 0 14px;padding:12px;border:1px dashed var(--line-2);border-radius:var(--r-sm)}
.ag-pending{display:flex;gap:8px;align-items:flex-start;color:var(--wheat)}
.ag-pending svg{width:16px;height:16px;flex:none;margin-top:2px}
/* 17f: a service typed in where one is picked */
.svc-pick{display:flex;flex-direction:column;gap:8px}
.svc-new{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.svc-new[hidden]{display:none}
.svc-new .input{flex:1 1 180px}
.svc-new .field-note{flex-basis:100%}
.tag.is-pending{border-style:dashed;color:var(--wheat)}
.cp-newtrade{margin-top:10px}
.cp-trades-now{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cp-trades-now .btn{margin-left:2px}
.cp-trades-now[hidden],.cp-trades-edit[hidden]{display:none}
.seg-sm .seg-btn{padding:7px 11px;font-size:13px}
.rt-day.is-locked:not(.is-on){color:var(--slate)}
.rt-rate{font-size:12.5px;color:var(--mist)}
.rt-access{display:flex;align-items:flex-start;gap:8px;margin:10px 0 0;font-size:14px;color:var(--wheat)}
.rt-access svg{width:15px;height:15px;flex:none;margin-top:2px}
/* paused says so in its tag; opacity took the tag and the rates under 4.5:1 */
.ag-card.is-off .fold-title{color:var(--slate)}
.ag-norate{color:var(--wheat)}
.cv-head{margin-bottom:18px}
/* the back link's arrow sits on the words' middle, at their size */
.cv-head>.link-btn{display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.cv-head>.link-btn .ic{width:16px;height:16px;flex:none}
.cv-head h1{font-family:var(--display);font-size:clamp(22px,4vw,28px);font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:8px 0 0}
.cv-head .row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cv-head>.sub{margin-top:10px}
.cv-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:10px}
.cv-meta a,.cv-meta span{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--slate);text-decoration:none}
.cv-meta a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,106,36,.4)}
.cv-meta svg{width:14px;height:14px}
.bl-tools{display:flex;justify-content:flex-end;margin:-14px 0 14px}
.bl-total{font-family:var(--display);font-size:18px;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
/* an approved month reads as settled by its color, not by dimming the whole
   card: opacity took the table's header labels under 4.5:1 */
.bl-card.is-approved .fold-title{color:var(--slate)}
.bl-card.is-approved .bl-total{color:var(--t-moss)}
.bl-table{width:100%;border-collapse:collapse;font-size:14px}
.bl-table th,.bl-table td{padding:9px 18px;text-align:left;border-top:1px solid var(--line)}
.bl-table thead th{font-size:12.5px;color:var(--slate);font-weight:600;border-top:none}
.bl-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Phase 18: the billing queue */
.bl-queue .who small{display:block;margin-top:3px;font-size:13px;color:var(--slate)}
.bl-queue .act{text-align:right;white-space:nowrap}
.bl-queue .bad,.bl-table .num.bad{color:var(--t-rose)}
/* on a phone each submitted month is a small card: who, the month, four labeled figures, the button */
@media(max-width:600px){
  .bl-q,.bl-q tbody{display:block}
  .bl-q thead{display:none}
  .bl-q tr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 10px;padding:14px 16px;border-top:1px solid var(--line)}
  .bl-q td{padding:0;border:0}
  .bl-q .who,.bl-q .when,.bl-q .act{grid-column:1/-1}
  .bl-q .when{color:var(--slate)}
  .bl-q td.num{text-align:left}
  .bl-q td.num::before{content:attr(data-l);display:block;font-size:12px;color:var(--slate);margin-bottom:2px}
  .bl-q .act{text-align:left}
  .bl-q .act .btn{width:100%;justify-content:center}
}
.bl-sent{display:flex;gap:8px;align-items:flex-start;color:var(--ink)}
.bl-sent svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--t-moss)}
/* a date is one line ("Mon," over "Aug 10" read as two things); a late tag sits under it on every row, not only the ones too narrow to hold it */
.bl-table .when{white-space:nowrap}
/* a table box inherits the table's border-collapse, and a collapsed box cannot round its corners */
.bl-table .when .chip-static{display:table;border-collapse:separate;margin-top:5px}
/* on a phone a five column invoice table was one word a line ("Station 1 / Brewing / Company"):
   each invoice becomes two lines, who and how much, then the number, the date and the state */
@media(max-width:600px){
  .bl-stack,.bl-stack tbody{display:block}
  .bl-stack thead{display:none}
  .bl-stack tr{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:4px 12px;align-items:baseline;padding:12px 16px;border-top:1px solid var(--line)}
  .bl-stack td{padding:0;border:0}
  .bl-stack .who{grid-area:1/1/2/4;font-weight:600;color:var(--ink)}
  .bl-stack .num{grid-area:1/4}
  .bl-stack .ref{grid-area:2/1}
  .bl-stack .when{grid-area:2/2/3/4;color:var(--slate)}
  .bl-stack .when .chip-static{display:inline-block;margin:0 0 0 6px}
  /* its own line: "Overdue, $5,371 owed" beside the date ran into it at 390 */
  .bl-stack .state{grid-area:3/1/4/5;justify-self:start;color:var(--slate)}
}
/* at 320 a date and "19 days late" beside it wanted 171px of a 96px cell: the tag goes under the date */
@media(max-width:400px){ .bl-stack .when .chip-static{display:table;margin:5px 0 0} }
.bl-table tfoot th{color:var(--ink);font-weight:600}
.bl-table .bl-margin th{color:var(--t-moss);font-weight:600}
.bl-table .bl-margin th.bad{color:var(--t-rose)}
.bl-table.adj input{width:88px;min-height:38px;padding:7px 9px;background:rgba(255,255,255,.03);border:1px solid var(--line-2);border-radius:6px;color:var(--ink);font-size:13.5px;text-align:right;font-variant-numeric:tabular-nums}
.bl-table.adj input:focus{outline:none;border-color:var(--blaze-hot)}
/* Adjust, Add a line: a hairline box under the table, four fields then the
   credit switch and the button */
.adj-add{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px 14px;margin:0;min-width:0}
.adj-add legend{font-size:13.5px;font-weight:600;color:var(--slate);padding:0 6px}
.adj-add-grid{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:12px}
.adj-add-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-top:12px}
@media(max-width:600px){.adj-add-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.adj-add-grid .adj-name{grid-column:1/-1}}
.bl-acts{padding:0 18px 16px;margin-top:0;justify-content:flex-end}
.bl-quiet{display:flex;flex-wrap:wrap;gap:8px;padding:4px 18px 18px}
.bl-quiet-row{display:inline-flex;align-items:center;min-height:38px;padding:6px 12px;border-radius:var(--r-pill);border:1px solid var(--line);color:var(--slate);font-size:13.5px;text-decoration:none;transition:color .14s,border-color .14s}
@media(hover:hover){.bl-quiet-row:hover{color:var(--ink);border-color:var(--line-2)}}
.bl-quiet-row.warn{color:var(--wheat);border-color:rgba(227,161,48,.35)}
@media(pointer:coarse){.bl-quiet-row,.bl-table.adj input{min-height:44px}}
.bl-warn{display:flex;align-items:flex-start;gap:8px;margin:10px 0 0;font-size:13.5px;color:var(--wheat)}
.bl-warn svg{width:14px;height:14px;flex:none;margin-top:3px}
.bl-warn a{color:var(--blaze-hot)}
/* Billing: the arrows sit together now that the month line between them is
   gone (the headline says the month); apart, they were a screen's width from
   each other. */
.bl-bar{justify-content:flex-start}
/* "No work to invoice" is a fold: its names are a wrap of chips on the body's
   own inset (.bl-quiet carried a panel's padding, which a fold body owns) */
.bl-quiet-list{display:flex;flex-wrap:wrap;gap:8px}
/* how late, in words and color, not an outlined pill */
.bl-table .when .bl-days{display:block;margin-top:3px;font-size:13px;font-weight:600;white-space:nowrap}
.bl-days.bad{color:var(--t-rose)} .bl-days.warn{color:var(--wheat)}
.bl-more{padding:12px 18px 16px;border-top:1px solid var(--line)}
@media(max-width:600px){
  .bl-stack .when .bl-days{display:inline;margin:0 0 0 6px}
  .bl-more{padding:12px 16px 14px}
}
@media(max-width:400px){ .bl-stack .when .bl-days{display:block;margin:3px 0 0} }

/* "Scroll sideways for 2 more stages" is a note, not a control: plain words
   beside the Show lost chip, which was the same shape (2026-10-12 review) */
.pl-more{align-self:center;font-size:13.5px;color:var(--mist);margin-right:6px}