/* srvce-ui.css — SRVCE's own look.
 *
 * Started 19 Sep 2026 with the customer page. Everything that leaves the
 * Flat Able theme lands here, built from the tokens at the top, so the theme
 * can be removed before launch without a page changing. Loaded after the
 * theme's stylesheets, so a rule here wins on equal specificity.
 *
 * Prefix: su- (SRVCE UI). One class per component, modifiers as su-x--y.
 */

:root {
  /* colour */
  /* THE BRAND PALETTE (25 Sep 2026), from the brand guide.
     The old green (#0f9d78) was dark enough to be text AND a fill. The
     brand green (#36DD91) is not: as text on white it is 1.76:1, and white
     type on it is the same. So the accent is split in two:
       --su-brand   #36DD91  anything the green FILLS or MARKS - buttons,
                             bars, underlines, rings, the active row.
                             Type on it is navy (10.7:1).
       --su-accent  #157A4C  the brand's hue darkened until it passes 4.5:1
                             on white, mint and the page ground: every
                             place the green is TEXT or an icon.
     Every existing color:var(--su-brand) is text, so it took the dark one
     unchanged; every fill and border was moved to --su-brand. */
  --su-ink: #001321;           /* navy */
  --su-ink-soft: #6E7180;      /* Graphite */
  --su-ink-faint: #80859A;     /* between Graphite and Space: meta text */
  --su-line: #E3E5EC;          /* between Cloud and Smoke */
  --su-ground: #F4F5F9;        /* Cloud, lightened so Graphite text passes 4.5:1 on it */
  --su-surface: #ffffff;
  --su-dark: #001321;          /* navy */
  --su-dark-2: #0E2432;        /* navy, lifted */
  --su-dark-line: #1C3242;
  --su-dark-ink: #D3D6E0;      /* Smoke */
  --su-dark-ink-soft: #9DA2B3; /* Space */
  --su-accent: #1E7A50;        /* TEXT green - srv_accent_resolve(#36DD91)["text"] */
  --su-accent-rgb: 30,122,80;
  --su-accent-strong: #16573A; /* 7:1 */
  --su-brand: #36DD91;         /* the brand green: fills, bars, underlines, rings */
  --su-brand-rgb: 54,221,145;
  --su-brand-hover: #30C27F;
  --su-accent-ink: #001321;   /* NAVY on the green (25 Sep): white on #36DD91 is 1.8:1 */
  --su-accent-soft: #EDF7F2;   /* mint */
  --su-accent-on-dark: #36DD91;
  --su-due: #b4531a;
  /* shape */
  --su-radius: 14px;
  --su-radius-sm: 10px;
  --su-tap: 44px;
  /* type */
  --su-font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- banner: the entity at the top of a page ---------- */
/* A page with a banner says what it is in the banner; the theme's title
   block above it would say it twice. Hidden at every size. */
.pc-content:has(.su-banner) .page-header{display:none}
.su-banner .su-sub{font-size:13.5px;color:var(--su-dark-ink);margin-top:4px}
.su-banner .su-search{background:#fff;border-color:#fff;color:var(--su-ink)}
.su-banner{background:var(--su-dark);color:#fff;border-radius:16px;padding:22px 26px;display:flex;flex-direction:column;gap:18px}
/* Plain links only (115): buttons are links too, and took this pale colour -
   a white button with pale text ("Possible duplicates", "Clear") was all but
   invisible on Customers. Buttons keep their own colours. */
.su-banner a:not(.su-btn):not(.su-day){color:var(--su-dark-ink);text-decoration:none}
.su-banner a:not(.su-btn):not(.su-day):hover{color:#fff}
/* (120) the day tabs keep their own colours - the selected one was pale on white */
.su-banner h1,.su-banner .su-title{color:#fff;font-size:22px;font-weight:800;margin:0;line-height:1.15}
.su-id{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.su-avatar{width:52px;height:52px;border-radius:50%;background:var(--su-dark-2);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;flex:none;color:#fff}
.su-status{font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--su-dark-2);color:var(--su-accent-on-dark);margin-left:10px;vertical-align:middle}
.su-contact{display:flex;flex-wrap:wrap;gap:4px 22px;margin-top:6px}
.su-contact a,.su-contact span{display:inline-flex;align-items:center;gap:8px;min-height:36px;font-size:13.5px;color:var(--su-dark-ink)}
.su-contact .su-empty{color:var(--su-ink-faint)}
.su-banner-addr{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-size:15px;font-weight:700;line-height:1.2;margin-left:auto;margin-right:12px;text-align:right}
.su-banner-addr small{font-size:12.5px;font-weight:500;color:var(--su-dark-ink)}
.su-banner-addr i{font-size:20px;color:var(--su-accent-on-dark)}
@media (max-width:767px){.su-banner-addr{margin:6px 0 0;width:100%;text-align:left;order:5}}
.su-banner-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--su-dark-line)}
.su-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--su-dark-ink-soft);margin-bottom:6px;display:block}
.su-banner .su-select{min-width:280px;max-width:100%;min-height:var(--su-tap);border-radius:var(--su-radius-sm);border:1px solid #fff;background:#fff;color:var(--su-ink);font-weight:700;padding:0 40px 0 14px;appearance:none;-webkit-appearance:none;font-family:inherit;font-size:14px;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2316202a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 12px center;background-size:16px 12px}

/* ---------- buttons ---------- */
.su-actions{display:flex;gap:10px;flex-wrap:wrap}
.su-btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--su-tap);padding:0 16px;border-radius:var(--su-radius-sm);font-family:inherit;font-size:14px;font-weight:700;text-decoration:none;cursor:pointer;border:1px solid var(--su-line);background:var(--su-surface);color:var(--su-ink)}
.su-btn:hover{color:var(--su-ink);background:var(--su-ground)}
a.su-btn.su-btn--primary,button.su-btn.su-btn--primary,.su-btn--primary{background:var(--su-brand);color:var(--su-accent-ink);border-color:var(--su-brand)}
a.su-btn.su-btn--primary:hover,a.su-btn.su-btn--primary:focus,.su-btn--primary:hover,.su-btn--primary:focus{background:var(--su-brand-hover);color:var(--su-accent-ink)}
a.su-btn.su-btn--ghost{color:#fff}
.su-btn--ghost{background:transparent;color:#fff;border-color:#2E4456}
.su-btn--ghost:hover{background:var(--su-dark-2);color:#fff}
.su-btn--disabled,.su-btn[aria-disabled="true"]{opacity:.55;pointer-events:none}
.su-btn--sm{min-height:36px;padding:0 12px;font-size:13px}
.su-more{width:var(--su-tap);height:var(--su-tap);border-radius:var(--su-radius-sm);border:1px solid #2E4456;background:transparent;padding:0;display:flex;align-items:center;justify-content:center;flex:none;cursor:pointer}
.su-more:hover,.su-more:focus{background:var(--su-dark-2);outline:0}
.su-more svg{fill:#fff}

/* ---------- tiles: the figures ---------- */
.su-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.su-tile{background:var(--su-surface);border:1px solid var(--su-line);border-radius:var(--su-radius);padding:16px 18px}
.su-tile .k{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--su-ink-soft)}
.su-tile .v{font-size:26px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;margin-top:2px;color:var(--su-ink)}
.su-tile .v--sm{font-size:20px}
.su-tile .v--due{color:var(--su-due)}
.su-tile .v--muted{color:var(--su-ink-soft)}
.su-tile .s{font-size:12px;color:var(--su-ink-soft)}

/* ---------- card, tabs, feed ---------- */
.su-card{background:var(--su-surface);border:1px solid var(--su-line);border-radius:var(--su-radius);overflow:hidden}
.su-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid var(--su-line)}
.su-card-head h2{margin:0;font-size:15px;font-weight:800;color:var(--su-ink)}
/* No rule under the strip: the active tab's underline is the only line, as
   on the artboard. The theme's .tab-content and .nav borders are zeroed. */
.su-tabs{padding:6px 16px 0;border-bottom:0}
.su-card .tab-content,.su-card .nav,.su-card .nav-tabs{border:0;box-shadow:none}
.su-body{padding:4px 20px 12px}
.su-tabs .nav,.su-tabs ul{display:flex;gap:4px;margin:0;padding:0;list-style:none}
.su-tabs .nav-link{color:var(--su-ink-soft);font-weight:700;font-size:14px;padding:12px 16px;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;border-radius:0;background:transparent;font-family:inherit;cursor:pointer}
.su-tabs .nav-link:hover{color:var(--su-ink)}
.su-tabs .nav-link.active{color:var(--su-ink);border-bottom-color:var(--su-brand);background:transparent}
.su-feed{width:100%;border-collapse:collapse}
.su-feed td{padding:12px 4px;border-bottom:1px solid var(--su-line);font-size:13.5px;vertical-align:middle;color:var(--su-ink)}
.su-feed tr:last-child td{border-bottom:0}
.su-feed .when{color:var(--su-ink-soft);white-space:nowrap;width:88px}
.su-feed .ic{width:36px;padding-right:4px}
.su-feed .ic i{font-size:24px;line-height:1;vertical-align:middle}
.su-feed .money{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;font-weight:700}
.su-feed a{color:var(--su-ink);text-decoration:none}
.su-feed a:hover{color:var(--su-accent)}
.su-muted{color:var(--su-ink-soft)}
.su-empty{color:var(--su-ink-soft);font-size:13.5px;padding:12px 0}

/* ---------- list rows: the customers page and others like it ---------- */
.su-list{display:flex;flex-direction:column}
.su-row{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--su-line);color:var(--su-ink);text-decoration:none;min-height:64px}
.su-row:last-child{border-bottom:0}
.su-row:hover{background:var(--su-ground);color:var(--su-ink)}
.su-row .su-avatar{width:40px;height:40px;font-size:14px;background:var(--su-accent-soft);color:var(--su-accent-strong)}
.su-row .name{font-weight:700;font-size:15px}
.su-row .sub{font-size:12.5px;color:var(--su-ink-soft)}
.su-row .grow{flex:1 1 auto;min-width:0}
.su-row .right{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.su-pill{font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--su-ground);color:var(--su-ink-soft)}
.su-pill--on{background:var(--su-accent-soft);color:var(--su-accent-strong)}
.su-pill--due{background:#fbe9df;color:var(--su-due)}

/* ---------- board: a table of stops, the dispatcher's view ---------- */
.su-board{width:100%;border-collapse:collapse;font-size:13.5px;color:var(--su-ink)}
.su-board th{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--su-ink-soft);text-align:left;padding:10px 12px;border-bottom:1px solid var(--su-line);white-space:nowrap}
.su-board td{padding:10px 12px;border-bottom:1px solid var(--su-line);vertical-align:top}
.su-board .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.su-board tbody tr:hover{background:var(--su-ground)}
.su-board tr.is-done td{opacity:.6}
.su-board tr.is-off td{opacity:.45;text-decoration:line-through}
.su-board tfoot td{border-bottom:0;border-top:2px solid var(--su-ink);font-weight:700;background:var(--su-ground)}
.su-board a{color:var(--su-ink);text-decoration:none}
.su-board a:hover{color:var(--su-accent)}
.su-board input[type=checkbox]{width:18px;height:18px}

/* ---------- dispatch page ---------- */
.su-titlerow{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.su-titlerow .dot{color:var(--su-ink-faint);margin:0 2px}
.su-dispatch-row{align-items:center;flex-wrap:nowrap}
.su-dispatch-pick{flex:0 0 auto;margin:0}
.su-dispatch-pick .su-select{min-width:220px}
.su-weeknav{display:flex;align-items:center;gap:8px;flex:1 1 auto;justify-content:center}
.su-days{display:flex;gap:6px}
.su-day{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:64px;padding:6px 8px;border-radius:10px;background:transparent;color:var(--su-dark-ink);border:1px solid #2E4456;text-decoration:none;min-height:44px}
.su-day .dn{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.su-day .dd{font-size:15px;font-weight:800;line-height:1.1;white-space:nowrap}
.su-day .dc{font-size:10.5px;opacity:.85;white-space:nowrap}
.su-day.today{border-color:var(--su-accent-on-dark)}
.su-day.on,.su-day.on:hover{background:#fff;color:var(--su-ink);border-color:#fff}
.su-day:hover{background:var(--su-dark-2);color:#fff}
.su-cal{margin:0}
.su-cal .su-more{position:relative;overflow:hidden;cursor:pointer}
.su-cal input[type=date]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.su-dispatch-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 20px 10px}
.su-h2{margin:0;font-size:15px;font-weight:800;color:var(--su-ink)}
/* the shared map partial laid out as the artboard: map left and tall, list right */
.su-dispatch .seq{display:grid;grid-template-columns:1fr 380px;gap:16px;align-items:stretch}
.su-dispatch .seq-map-wrap{display:flex;flex-direction:column;min-height:640px}
.su-dispatch .seq-map{flex:1 1 auto;min-height:560px;border-radius:12px;overflow:hidden}
.su-dispatch .seq-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;max-height:640px;overflow:auto}
.su-dispatch .seq-list li{border:1px solid var(--su-line);border-radius:12px;padding:10px 12px;background:var(--su-surface);display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.su-dispatch .seq-list li.hot{border-color:var(--su-brand)}
.su-dispatch .seq-list li.done{opacity:.6}
.su-dispatch .seq-list li.skipped,.su-dispatch .seq-list li.cancelled{opacity:.5}
.su-dispatch .seq-n{width:28px;height:28px;border-radius:50%;background:var(--su-dark);color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;flex:none}
.su-dispatch .todo .seq-n{background:transparent;border:1px dashed var(--su-ink-faint)}
.su-dispatch .seq-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.su-dispatch .seq-name,.su-dispatch .seq-open{font-weight:700;font-size:14px;color:var(--su-ink);text-decoration:none}
.su-dispatch .seq-meta{font-size:12.5px;color:var(--su-ink-soft)}
.su-dispatch .seq-warn{font-size:12px;color:var(--su-due);font-weight:600}
.su-dispatch .seq-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.su-dispatch .seq-items{display:flex;flex-direction:column;gap:4px;margin-top:6px;padding-top:6px;border-top:1px solid var(--su-line)}
.su-dispatch .seq-item{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px}
.su-dispatch .seq-item.done .seq-svc{opacity:.55;text-decoration:line-through}
.su-dispatch .seq-item.skipped .seq-svc,.su-dispatch .seq-item.cancelled .seq-svc{opacity:.45;text-decoration:line-through}
.su-dispatch .seq-svc{font-weight:600;color:var(--su-ink)}
.su-dispatch .seq-acts{display:flex;align-items:center;gap:2px;flex:none;flex-wrap:wrap;justify-content:flex-end}
.su-dispatch .seq-status{font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--su-accent-soft);color:var(--su-accent-strong)}
.su-dispatch .seq-undo{width:28px;height:28px;border-radius:8px;border:1px solid var(--su-line);background:#fff;color:var(--su-ink-soft);cursor:pointer;font-size:16px;line-height:1}
.su-dispatch .seq-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 4px 0;font-size:12.5px;color:var(--su-ink-soft)}
.su-dispatch .seq-count.done{color:var(--su-accent-strong);font-weight:700}
.su-dispatch .seq-bar .btn{font-family:inherit;font-size:12.5px;color:var(--su-ink-soft);background:transparent;border:0;text-decoration:underline;cursor:pointer}
.su-btn--void{background:#fff;color:var(--su-due);border:1.5px solid var(--su-due);justify-content:center}
.su-btn--void:hover,.su-btn--void:focus{background:#fbe9df;color:var(--su-due)}
.su-btn--quiet{border-color:transparent;background:transparent;color:var(--su-ink-soft)}
.su-btn--quiet:hover{background:var(--su-ground);color:var(--su-ink)}
@media (max-width:991px){
  /* Row one: the truck dropdown and Dispatch side by side. Row two: the
     calendar pinned left, the seven days scrolling under a finger. */
  .su-dispatch-row{flex-wrap:wrap;gap:10px}
  .su-dispatch-pick{flex:1 1 auto;min-width:0}
  .su-dispatch-pick .su-select{width:100%;min-width:0}
  .su-dispatch-row > .su-actions{width:auto;flex:0 0 auto;order:2}
  .su-dispatch-row > .su-actions .su-btn{flex:0 0 auto}
  .su-weeknav{order:3;width:100%;justify-content:flex-start;min-width:0}
  .su-cal{flex:0 0 auto}
  /* All seven fit: the month is dropped (the banner says it), the pills
     share the width, nothing scrolls. */
  .su-days{flex:1 1 auto;min-width:0;gap:4px}
  .su-day{min-width:0;flex:1 1 0;padding:6px 2px}
  .su-day .dn{font-size:9.5px}
  .su-day .dd{font-size:14px}
  .su-day .dm{display:none}
  .su-day .dc{display:none}
  .su-dispatch .seq{grid-template-columns:1fr}
  .su-dispatch .seq-map-wrap{min-height:360px}
  .su-dispatch .seq-map{min-height:320px}
}

/* ---------- account page body ---------- */
.su-account{display:grid;grid-template-columns:360px 1fr;gap:16px;align-items:start}
.su-account-main .su-tiles{grid-template-columns:repeat(4,1fr)}
@media (max-width:1399px){.su-account-main .su-tiles{grid-template-columns:repeat(2,1fr)}}
.su-account-side{display:flex;flex-direction:column;gap:16px}
.su-kv{width:100%;border-collapse:collapse;font-size:13.5px}
.su-kv td{padding:9px 20px;border-bottom:1px solid var(--su-line);vertical-align:top}
.su-kv td:first-child{width:38%;color:var(--su-ink-soft);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding-top:11px}
.su-kv tr:last-child td{border-bottom:0}
.su-kv a{color:var(--su-ink);text-decoration:none}
.su-kv a:hover{color:var(--su-accent)}
.su-cc{margin:16px 20px 4px;padding:16px 18px;border-radius:14px;background:linear-gradient(135deg,#001321,#0E2432);color:#fff;display:flex;flex-direction:column;gap:12px;box-shadow:0 8px 20px rgba(0,19,33,.18)}
.su-cc--empty{background:linear-gradient(135deg,#0E2432,#1C3242)}
.su-cc-brand{font-size:15px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.su-cc-row{display:flex;justify-content:space-between;gap:16px}
.su-cc .k{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--su-dark-ink-soft)}
.su-cc .v{font-size:16px;font-weight:700;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.su-cc-add{font-size:12px;color:var(--su-accent-on-dark);text-decoration:none;opacity:.85}
.su-cc-add[aria-disabled=true]{pointer-events:none}
.su-payer{margin:16px 20px 4px;padding:14px 16px;border-radius:12px;background:var(--su-dark);color:#fff}
.su-payer .k{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--su-dark-ink-soft)}
.su-payer .v{font-size:16px;font-weight:800;margin-top:2px}
.su-payer .s{font-size:12.5px;color:var(--su-dark-ink)}
.su-viewmore{display:block;padding:10px 20px 14px;font-size:13px;font-weight:700;color:var(--su-accent);text-decoration:none}
.su-viewmore[aria-expanded=true]::after{content:" ↑"}
.su-viewmore[aria-expanded=false]::after{content:" ↓"}
.su-card-sub{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--su-ink-soft);padding:12px 20px 4px;border-top:1px solid var(--su-line)}
.su-feed--tight td,.su-feed--tight th{padding:8px 20px;font-size:13px}
.su-feed th{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--su-ink-soft);text-align:left;padding:8px 20px 4px}
.su-feed th.num{text-align:right}
.su-feed td.num{text-align:right;white-space:nowrap}
.su-subtabs{display:flex;gap:4px;padding:8px 16px 0}
.su-subtabs a{padding:8px 10px;font-size:13px;font-weight:700;color:var(--su-ink-soft);text-decoration:none;border-bottom:2px solid transparent}
.su-subtabs a.on{color:var(--su-ink);border-bottom-color:var(--su-brand)}
@media (max-width:991px){
  .su-account{grid-template-columns:1fr}
  .su-account-main{order:-1}
}

/* ---------- email block builder ---------- */
.bk-list{display:flex;flex-direction:column;gap:8px}
.bk{border:1px solid var(--su-line);border-radius:12px;background:var(--su-surface);padding:8px 10px 10px}
.bk.is-drag{opacity:.5}
.bk.is-over{border-color:var(--su-brand);box-shadow:0 0 0 2px var(--su-accent-soft)}
.bk.is-target{border-color:var(--su-brand)}
.bk-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.bk-grip{cursor:grab;color:var(--su-ink-faint);font-size:14px;letter-spacing:-2px}
.bk-type{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--su-ink-soft)}
.bk-tools{margin-left:auto;display:flex;gap:4px;align-items:center}
.bk-tools button{width:30px;height:30px;border-radius:8px;border:1px solid var(--su-line);background:#fff;color:var(--su-ink-soft);cursor:pointer;font-family:inherit}
.bk-tools select{min-height:30px;border-radius:8px;border:1px solid var(--su-line);font-family:inherit;font-size:12px;padding:0 6px}
.bk-rt{display:flex;align-items:center;gap:4px;margin-bottom:6px}
.bk-rt button{min-width:30px;height:28px;padding:0 8px;border-radius:6px;border:1px solid var(--su-line);background:#fff;font-family:inherit;font-size:12.5px;cursor:pointer;color:var(--su-ink)}
.bk-rt button:hover{background:var(--su-ground)}
.bk-rt-sep{width:1px;height:20px;background:var(--su-line);margin:0 4px}
.bk-text{width:100%;padding:10px 12px;line-height:1.5;font-family:inherit;resize:vertical}
.bk-two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bk-two .su-search{width:100%}
.bk-img img{max-width:100%;max-height:160px;border-radius:8px;display:block;margin:0 auto 8px}
.bk-imgph{border:1px dashed var(--su-line);border-radius:8px;padding:18px;text-align:center;color:var(--su-ink-soft);font-size:13px;margin-bottom:8px}
.bk-div{height:1px;background:var(--su-line);margin:6px 0}
.bk-it{display:flex;gap:10px;align-items:flex-start}
.bk-it > img,.bk-it > .bk-imgph{flex:0 0 140px;width:140px;margin:0}
.bk-it > img{max-height:none;height:auto;border-radius:8px;cursor:pointer}
.bk-it.is-right{flex-direction:row-reverse}
.bk-it-text{flex:1 1 auto;min-width:0}
.bk-three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:8px}
.bk-three .su-search{width:100%}
.bk-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bk-col{border:1px dashed var(--su-line);border-radius:10px;padding:8px}
.bk-col img{max-width:100%;max-height:120px;border-radius:8px;display:block;margin:0 auto}
.bk-col .su-search{width:100%}
@media (max-width:767px){.bk-cols{grid-template-columns:1fr}}
.bk-toolbar{border:1px solid var(--su-line);border-radius:12px;background:var(--su-ground);padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.bk-toolbar-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bk-toolbar-sep{width:1px;height:26px;background:var(--su-line);margin:0 4px}
@media (max-width:991px){.bk-toolbar-sep{display:none}.bk-toolbar-row .su-label{flex:0 0 100%}}
.bk-add{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
@media (max-width:767px){.bk-toolbar-row .su-label{flex:0 0 100%}}

/* ---------- template editor layout ---------- */
.tpl-settings{padding:14px 20px;display:grid;grid-template-columns:1.1fr .8fr 2fr auto;gap:12px;align-items:end}
.tpl-settings .su-search{min-height:42px}
.tpl-save{min-width:160px}
.tpl-tabs{display:none}
.tpl-grid{display:grid;grid-template-columns:1fr 520px;gap:14px;align-items:start}
@media (min-width:1600px){.tpl-grid{grid-template-columns:1fr 660px}}
.tpl-preview{position:sticky;top:16px}
.bk-add .su-btn{flex:0 0 auto}
@media (max-width:1199px){.tpl-grid{grid-template-columns:1fr 400px}}
@media (max-width:991px){
  .tpl-settings{grid-template-columns:1fr 1fr}
  .tpl-subject,.tpl-save{grid-column:1 / -1}
  .tpl-tabs{display:flex;margin-bottom:12px;background:#fff;border:1px solid var(--su-line);border-radius:12px;overflow:hidden}
  .tpl-tabs button{flex:1 1 0;min-height:44px;border:0;background:transparent;font-family:inherit;font-weight:700;font-size:14px;color:var(--su-ink-soft);border-bottom:2px solid transparent}
  .tpl-tabs button.on{color:var(--su-ink);border-bottom-color:var(--su-brand)}
  .tpl-grid{grid-template-columns:1fr}
  .tpl-pane{display:none}
  .tpl-pane.is-shown{display:block}
  .tpl-preview{position:static}
  /* No sideways scrolling: the add buttons wrap into rows. */
  .bk-add{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%}
  .bk-add .su-btn{width:100%;padding:0 6px}
  .bk-toolbar-row .bk-images{margin-left:0 !important;width:100%}
}

/* ---------- invoice design: layout picker ---------- */
.lay-pick{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.lay-opt{display:flex;flex-direction:column;gap:6px;padding:10px;border:1.5px solid var(--su-line);border-radius:12px;background:#fff;cursor:pointer}
.lay-opt input{position:absolute;opacity:0;pointer-events:none}
.lay-opt.is-on{border-color:var(--su-brand);box-shadow:0 0 0 3px rgba(var(--su-brand-rgb),.14)}
.lay-thumb{display:block;padding:8px;background:var(--su-ground);border-radius:8px;min-height:96px}
.lay-name{font-weight:800;font-size:13.5px}
.lay-blurb{font-size:11.5px;color:var(--su-ink-soft);line-height:1.4}
.lay-boxes{display:flex;flex-direction:column;gap:12px}
.bk-region{border:1px solid var(--su-line);border-radius:12px;background:#fff}
.bk-region > summary{list-style:none;display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;font-weight:700;font-size:13.5px}
.bk-region > summary::-webkit-details-marker{display:none}
.bk-region[open] > summary{border-bottom:1px solid var(--su-line)}
.bk-region > .bk-toolbar,.bk-region > .bk-list{margin:10px 12px}
.bk-region > .bk-toolbar{border:0;padding:0;background:transparent}
@media (max-width:767px){.lay-pick{grid-template-columns:1fr}}

/* ---------- dialog ---------- */
.su-dialog{border:0;border-radius:16px;padding:0;background:transparent;max-width:none}
.su-dialog::backdrop{background:rgba(0,19,33,.45)}
.su-dialog .su-card{box-shadow:0 20px 50px rgba(0,19,33,.25)}

/* ---------- sidebar (over the theme's .pc-sidebar, until the theme goes) ---------- */
.pc-sidebar{background:#001321 !important;border-right:0}
.pc-sidebar .navbar-wrapper{display:flex;flex-direction:column;min-height:100%}
.pc-sidebar .navbar-content{flex:1 1 auto}
/* One fixed height for the brand block in both states, so the rail's top
   band is exactly as tall as the open sidebar's. */
.pc-sidebar .su-brand{padding:0 22px !important;height:70px !important;display:flex;align-items:center;box-sizing:border-box}
.pc-sidebar .b-brand{display:flex;align-items:center;gap:10px;text-decoration:none;height:100%}
.su-beacon{position:relative;width:10px;height:10px;border-radius:50%;background:var(--su-brand);flex:none}
.su-beacon::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--su-brand);opacity:0;animation:su-pulse 2.4s ease-out infinite}
@keyframes su-pulse{0%{transform:scale(.6);opacity:.9}70%{transform:scale(2.2);opacity:0}100%{transform:scale(2.2);opacity:0}}
@media (prefers-reduced-motion:reduce){.su-beacon::after{animation:none}}
.su-wordmark{font-weight:800;letter-spacing:.22em;font-size:15px;color:#fff}
/* The logo (25 Sep). 26px tall is 156px wide at the logo's 6:1, inside the
   220px the open sidebar leaves after its padding. The mark stands in for it
   on the compact rail only. */
.pc-sidebar img.su-logo{display:block;height:26px;width:auto;max-width:100%}
.pc-sidebar img.su-logo-mark{display:none;height:26px;width:auto}
.su-header-title{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-weight:800;font-size:15px;letter-spacing:.02em;color:var(--su-ink);white-space:nowrap;max-width:50%;overflow:hidden;text-overflow:ellipsis}
.pc-header .header-wrapper{position:relative}
@media (max-width:767px){.su-header-title{font-size:14px;max-width:44%}}
.pc-sidebar .pc-navbar{padding:0 12px}
.pc-sidebar .pc-caption{padding:16px 14px 6px !important}
.pc-sidebar .pc-caption label{font-size:10.5px !important;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#6e7d8a !important;margin:0}
.pc-sidebar .pc-item .pc-link{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 18px !important;border-radius:10px !important;font-size:14px;font-weight:600;color:#BCBFCC !important;min-height:42px;margin:1px 0}
.pc-sidebar .pc-item{background:transparent !important}
.pc-sidebar .pc-item .pc-link .pc-micon{width:auto !important;margin:0 !important;color:#8fa0ae}
.pc-sidebar .pc-item .pc-link .pc-micon i{font-size:18px}
.pc-sidebar .pc-item .pc-link:hover{background:rgba(255,255,255,.05);color:#fff !important}
/* The active row: a rounded highlight that fades from the accent bar
   at its left to nothing at its right. */
.pc-sidebar .pc-item.active > .pc-link{background:linear-gradient(90deg,rgba(var(--su-brand-rgb),.42) 0%,rgba(var(--su-brand-rgb),.18) 45%,rgba(var(--su-brand-rgb),0) 100%) !important;color:#fff !important;box-shadow:inset 3px 0 0 var(--su-brand);border-radius:10px !important;overflow:hidden}
.pc-sidebar .pc-item.active{background:transparent !important}
.pc-sidebar .pc-item.active > .pc-link .pc-micon{color:var(--su-accent-on-dark)}
.su-who{display:flex;align-items:center;gap:10px;padding:14px 22px 18px;border-top:1px solid #1C3242;margin-top:8px}
.su-who-avatar{width:34px;height:34px;border-radius:50%;background:var(--su-brand);color:var(--su-accent-ink);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;flex:none}
.su-who-text{min-width:0;display:flex;flex-direction:column}
.su-who-name{font-size:13.5px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.su-who-role{font-size:11.5px;color:#9DA2B3}
.su-who-out{margin:0 0 0 auto}
.su-who-out button{width:34px;height:34px;border-radius:8px;border:0;background:transparent;color:#9DA2B3;cursor:pointer;display:flex;align-items:center;justify-content:center}
.su-who-out button:hover{background:rgba(255,255,255,.06);color:#fff}
/* THE COMPACT RAIL, DESKTOP ONLY: the hamburger's collapsed state is a
   76 px rail of icons, not a hidden sidebar. Labels, captions and text go;
   the beacon, the icons and the avatar stay; the page moves over to meet
   it. Below 1025 px the sidebar is an overlay the hamburger opens and
   closes, as the theme does; the rail never appears there. */
@media (min-width:1025px){
  .pc-sidebar.pc-sidebar-hide{width:76px !important;transform:none !important;left:0 !important;overflow:hidden}
  .pc-sidebar.pc-sidebar-hide .navbar-wrapper,.pc-sidebar.pc-sidebar-hide .navbar-content,.pc-sidebar.pc-sidebar-hide .pc-navbar,.pc-sidebar.pc-sidebar-hide .simplebar-content-wrapper,.pc-sidebar.pc-sidebar-hide .simplebar-content{width:76px !important;max-width:76px !important;min-width:0 !important}
  /* Captions keep their height with their text invisible, and rows keep
     their padding, so nothing moves up: the rail only narrows. */
  .pc-sidebar.pc-sidebar-hide .pc-caption{display:block !important;visibility:visible}
  .pc-sidebar.pc-sidebar-hide .pc-caption label{display:block !important;visibility:hidden}
  .pc-sidebar.pc-sidebar-hide ~ .pc-header{left:76px !important}
  .pc-sidebar.pc-sidebar-hide ~ .pc-container{margin-left:76px !important}
  .pc-sidebar.pc-sidebar-hide ~ .pc-footer{margin-left:76px !important}
  .pc-sidebar.pc-sidebar-hide .su-brand{padding:0 !important;height:70px !important;justify-content:center}
  .pc-sidebar.pc-sidebar-hide .b-brand{justify-content:center;width:100%}
  .pc-sidebar.pc-sidebar-hide .su-wordmark,.pc-sidebar.pc-sidebar-hide .pc-mtext,.pc-sidebar.pc-sidebar-hide .su-who-text,.pc-sidebar.pc-sidebar-hide .su-who-out{display:none !important}
  .pc-sidebar,.pc-sidebar .navbar-wrapper{transition:width .18s ease}
  .pc-sidebar ~ .pc-header,.pc-sidebar ~ .pc-container,.pc-sidebar ~ .pc-footer{transition:left .18s ease,margin-left .18s ease}
  .pc-sidebar.pc-sidebar-hide .pc-navbar{padding:0}
  .pc-sidebar.pc-sidebar-hide .pc-item .pc-link{justify-content:center;padding:10px 0 !important;margin:1px 0;width:100%;min-height:42px}
  .pc-sidebar.pc-sidebar-hide .pc-item .pc-link .pc-micon{display:flex !important;align-items:center;justify-content:center;width:auto !important;margin:0 !important;opacity:1 !important;visibility:visible !important}
  .pc-sidebar.pc-sidebar-hide .pc-item .pc-link .pc-micon i{font-size:20px;display:inline-block !important}
  .pc-sidebar.pc-sidebar-hide .pc-item{display:block !important}
  .pc-sidebar.pc-sidebar-hide .navbar-content{overflow:visible}
  /* Collapsed, the active state is a full-width band edge to edge with
     the accent bar at its left, not a pill. */
  .pc-sidebar.pc-sidebar-hide .pc-item .pc-link{border-radius:0 !important}
  .pc-sidebar.pc-sidebar-hide .pc-item.active > .pc-link{background:linear-gradient(90deg,rgba(var(--su-brand-rgb),.42) 0%,rgba(var(--su-brand-rgb),.14) 100%) !important;box-shadow:inset 3px 0 0 var(--su-brand)}
  .pc-sidebar.pc-sidebar-hide .su-who{justify-content:center;padding:14px 0 18px}
}
@media (min-width:1025px){
  /* HOVER TO PEEK: the compact rail opens to full width over the page
     while the pointer is on it, and folds back when it leaves. The page
     does not move - it stays at 76 px - so nothing jumps. The hamburger
     pins it open instead. */
  .pc-sidebar.pc-sidebar-hide:hover{width:264px !important;box-shadow:12px 0 40px rgba(0,19,33,.28);z-index:1040}
  .pc-sidebar.pc-sidebar-hide:hover .navbar-wrapper,.pc-sidebar.pc-sidebar-hide:hover .navbar-content,.pc-sidebar.pc-sidebar-hide:hover .pc-navbar,.pc-sidebar.pc-sidebar-hide:hover .simplebar-content-wrapper,.pc-sidebar.pc-sidebar-hide:hover .simplebar-content{width:264px !important;max-width:264px !important}
  .pc-sidebar.pc-sidebar-hide:hover .su-wordmark,.pc-sidebar.pc-sidebar-hide:hover .pc-mtext,.pc-sidebar.pc-sidebar-hide:hover .su-who-text,.pc-sidebar.pc-sidebar-hide:hover .su-who-out{display:block !important}
  .pc-sidebar.pc-sidebar-hide:hover .su-who-out{display:flex !important}
  .pc-sidebar.pc-sidebar-hide:hover .pc-caption label{visibility:visible}
  .pc-sidebar.pc-sidebar-hide:hover .su-brand{padding:0 22px !important;justify-content:flex-start}
  .pc-sidebar.pc-sidebar-hide:hover .b-brand{justify-content:flex-start;width:auto}
  .pc-sidebar.pc-sidebar-hide:hover .pc-navbar{padding:0 12px}
  .pc-sidebar.pc-sidebar-hide:hover .pc-item .pc-link{justify-content:flex-start;padding:10px 12px 10px 18px !important;border-radius:10px !important}
  .pc-sidebar.pc-sidebar-hide:hover .pc-item.active > .pc-link{background:linear-gradient(90deg,rgba(var(--su-brand-rgb),.42) 0%,rgba(var(--su-brand-rgb),.18) 45%,rgba(var(--su-brand-rgb),0) 100%) !important;box-shadow:inset 3px 0 0 var(--su-brand)}
  .pc-sidebar.pc-sidebar-hide:hover .su-who{justify-content:flex-start;padding:14px 22px 18px}
}
@media (max-width:1024px){
  /* Off screen unless opened; open = the theme's mob-sidebar-active.
     Width and position are pinned so no theme rule leaves a sliver. */
  .pc-sidebar{position:fixed !important;top:0;left:0 !important;width:264px !important;height:100%;transition:transform .2s ease}
  .pc-sidebar:not(.mob-sidebar-active){transform:translateX(-110%) !important}
  .pc-sidebar.mob-sidebar-active{transform:none !important;z-index:1030;box-shadow:0 0 40px rgba(0,0,0,.35)}
  .pc-sidebar.pc-sidebar-hide .pc-mtext,.pc-sidebar.pc-sidebar-hide .pc-caption,.pc-sidebar.pc-sidebar-hide .su-wordmark{display:block !important}
  .pc-sidebar .pc-menu-overlay{position:fixed;inset:0;left:264px;background:rgba(0,19,33,.45)}
  .pc-sidebar ~ .pc-header{left:0 !important}
  .pc-sidebar ~ .pc-container,.pc-sidebar ~ .pc-footer{margin-left:0 !important}

  /* IT HAS TO SCROLL, AND IT HAS TO FILL ITS OWN WIDTH (24 Sep).
     The menu is wrapped by the theme in simplebar, whose script stopped
     binding on this layout when the sidebar was rebuilt. That gives both
     faults at once: simplebar's markup reserves a strip on the right for a
     scrollbar that never appears - the dead space beside every row - and
     without its script the inner wrapper never becomes scrollable, so
     anything below the fold, Settings at the bottom, cannot be reached.

     So the sidebar is a plain flex column here: brand, a menu that scrolls,
     the user card at the foot. simplebar's boxes are flattened rather than
     fought with. */
  .pc-sidebar{display:flex;flex-direction:column}
  .pc-sidebar .navbar-wrapper{flex:1 1 auto;height:100%;min-height:0;display:flex;flex-direction:column}
  /* min-height:0 is the one that matters: without it a flex child will not
     shrink below its content, so the overflow never happens and nothing
     scrolls. */
  .pc-sidebar .navbar-content{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
    -webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .pc-sidebar .simplebar-content-wrapper{height:auto !important;max-height:none !important;
    overflow:visible !important;padding-right:0 !important;margin-right:0 !important}
  .pc-sidebar .simplebar-content{padding:0 !important;width:100% !important;max-width:100% !important}
  .pc-sidebar .simplebar-track,.pc-sidebar .simplebar-placeholder{display:none !important}
  .pc-sidebar .pc-navbar{width:100% !important;max-width:100% !important;padding:0 10px}
  .pc-sidebar .pc-item,.pc-sidebar .pc-item .pc-link{width:100%}
  /* Finger-sized rows, and the foot clear of the home indicator. */
  .pc-sidebar .pc-item .pc-link{min-height:48px;padding:12px 14px 12px 18px !important}
  .su-who{flex:0 0 auto;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
}

/* ---------- search / toolbar ---------- */
.su-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.su-search{flex:1 1 280px;min-height:var(--su-tap);border-radius:var(--su-radius-sm);border:1px solid var(--su-line);padding:0 14px;font-family:inherit;font-size:14px;background:var(--su-surface);color:var(--su-ink)}
.su-search:focus{outline:2px solid var(--su-brand);outline-offset:0;border-color:var(--su-brand)}
.su-page-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.su-page-head h1{font-size:22px;font-weight:800;margin:0;color:var(--su-ink)}
.su-page-head .count{font-size:13px;color:var(--su-ink-soft)}

/* ---------- forms, notes and panels on white (21 Sep: invoices, billing, reports) ----------
   What a page needs once it leaves the theme's .card/.form-control: an
   input, a hint, a padded card body, a note that something is held for
   confirmation, and the status pills. Bootstrap's spacing and grid utilities
   (mb-3, row, col-md-4, d-flex) are still used alongside these until the
   theme goes. */
.su-card-head h5{margin:0;font-size:15px;font-weight:800;color:var(--su-ink)}
.su-pad{padding:16px 20px}
.su-pad + .su-pad{border-top:1px solid var(--su-line)}
.su-card .su-label{color:var(--su-ink-soft)}
.su-input{display:block;width:100%;min-height:var(--su-tap);border-radius:var(--su-radius-sm);border:1px solid var(--su-line);padding:0 12px;font-family:inherit;font-size:14px;background:var(--su-surface);color:var(--su-ink)}
textarea.su-input{padding:10px 12px;min-height:88px}
select.su-input{appearance:none;-webkit-appearance:none;padding-right:36px;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2316202a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 12px center;background-size:14px 10px}
.su-input:focus{outline:2px solid var(--su-brand);outline-offset:0;border-color:var(--su-brand)}
.su-input:disabled{background:var(--su-ground);color:var(--su-ink-faint)}
/* A date field has a built-in minimum width (Safari's is wide) and will
   spill out of a narrow column over its neighbour. Never wider than its box. */
.su-input{min-width:0;max-width:100%}
/* Safari neither vertically centres nor left-aligns a date field's text
   once its own styling is off: a line height of the full field centres it,
   and the field itself (not only its inner parts) must be told to align left. */
input[type=date].su-input,input[type=time].su-input{-webkit-appearance:none;appearance:none;display:block;height:var(--su-tap);min-height:var(--su-tap);font-size:16px;line-height:calc(var(--su-tap) - 2px);padding-top:0;padding-bottom:0;text-align:left}
/* With appearance off, Safari draws the chosen date through these inner
   parts at its own small size, not the field's. Make them follow the field. */
input[type=date].su-input::-webkit-date-and-time-value,input[type=time].su-input::-webkit-date-and-time-value{font-size:inherit;line-height:inherit;text-align:left;margin:0}
input[type=date].su-input::-webkit-datetime-edit,input[type=time].su-input::-webkit-datetime-edit{font-size:inherit;padding:0}
.su-input--sm{min-height:36px;font-size:13px;padding:0 10px}
select.su-input--sm{padding-right:30px;background-position:right 10px center}
.su-banner .su-input{border-color:#fff}
/* inside Bootstrap's input-group (the "$" prefix) */
.input-group>.su-input{flex:1 1 auto;width:1%;min-width:0}
.input-group>.su-input:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}
.input-group>.su-input:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}
.input-group>.input-group-text{border-color:var(--su-line);background:var(--su-ground);color:var(--su-ink-soft);border-radius:var(--su-radius-sm) 0 0 var(--su-radius-sm)}
.input-group-sm>.input-group-text{min-height:36px;font-size:13px}
.su-hint{font-size:12px;color:var(--su-ink-soft);margin-top:4px}
.su-hint.is-ok{color:var(--su-accent-strong);font-weight:700}
.su-hint.is-warn{color:var(--su-due);font-weight:700}
.su-warn{color:var(--su-due)}
/* A panel holding something back for confirmation: nothing is written until
   the person presses the button in it, and the amber edge says so. */
.su-note{border-left:4px solid var(--su-due)}
.su-row.on{background:var(--su-accent-soft)}
.su-row small{display:block;font-size:12.5px;color:var(--su-ink-soft)}
/* invoice status, and a report's kind */
.su-pill.draft{background:var(--su-ground);color:var(--su-ink-soft)}
.su-pill.sent{background:#e6eef6;color:#2b5a87}
.su-pill.paid{background:var(--su-accent-soft);color:var(--su-accent-strong)}
.su-pill.void{background:var(--su-ground);color:var(--su-ink-faint);text-decoration:line-through}
.su-pill.broken{background:#fbe9df;color:var(--su-due)}
.su-pill.warning{background:#fff4d6;color:#8a6100}
/* the filter strip over a list, on the banner */
.su-filters{display:flex;gap:6px;flex-wrap:wrap}
.su-filters a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:700;text-decoration:none;color:var(--su-dark-ink);border:1px solid #2E4456}
.su-filters a:hover{background:var(--su-dark-2);color:#fff}
.su-filters a.on{background:#fff;color:var(--su-ink);border-color:#fff}
.su-empty-state{padding:28px 20px;text-align:center;color:var(--su-ink-soft);font-size:13.5px}
.su-empty-state i{font-size:32px;color:var(--su-ink-faint)}
.su-empty-state h5{font-size:15px;font-weight:700;color:var(--su-ink);margin:6px 0 4px}
.su-empty-state p{margin:0}
/* main column and a side column; one column below 1200 px */
.su-split{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
.su-split--left{grid-template-columns:360px minmax(0,1fr)}
/* One column below 1200 px. minmax(0,1fr), not 1fr: a bare 1fr may grow to
   its widest content, and one long line then pushes the page wider than the
   phone. Each column also lets its content wrap rather than stretch it. */
@media (max-width:1199px){.su-split,.su-split--left{grid-template-columns:minmax(0,1fr)}}
.su-split > *{min-width:0}

/* ---------- pipeline: columns of cards (22 Sep: estimates) ----------
   Scrolls sideways inside itself, so the page never does. Each column is a
   stage; each card an estimate, the whole card a link. */
.su-pipe{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;align-items:flex-start}
.su-pipe-col{flex:0 0 272px;background:var(--su-ground);border:1px solid var(--su-line);border-radius:var(--su-radius);display:flex;flex-direction:column;max-height:calc(100vh - 260px)}
.su-pipe-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:12px 14px 8px}
.su-pipe-head b{font-size:13px;font-weight:800;color:var(--su-ink)}
.su-pipe-head span{font-size:12px;font-weight:700;color:var(--su-ink-soft);font-variant-numeric:tabular-nums}
.su-pipe-cards{display:flex;flex-direction:column;gap:8px;padding:0 10px 10px;overflow-y:auto}
.su-pipe-card{display:block;background:var(--su-surface);border:1px solid var(--su-line);border-radius:var(--su-radius-sm);padding:10px 12px;text-decoration:none;color:var(--su-ink)}
.su-pipe-card:hover{border-color:var(--su-brand);color:var(--su-ink)}
.su-pipe-card .t{font-weight:700;font-size:14px}
.su-pipe-card .s{font-size:12px;color:var(--su-ink-soft);margin-top:2px}
.su-pipe-card .f{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px;font-size:12.5px;font-variant-numeric:tabular-nums}
.su-pipe-empty{font-size:12.5px;color:var(--su-ink-faint);padding:4px 4px 8px}
.su-pill.overdue{background:#fbe9df;color:var(--su-due)}
.su-pill.won{background:var(--su-accent-soft);color:var(--su-accent-strong)}
.su-pill.lost{background:var(--su-ground);color:var(--su-ink-faint)}
/* an item row on an estimate: text left, price right, actions under */
.su-item{padding:14px 20px;border-bottom:1px solid var(--su-line)}
.su-item:last-child{border-bottom:0}
.su-item-top{display:flex;gap:12px;align-items:flex-start}
.su-item-top .grow{flex:1 1 auto;min-width:0}
.su-item-top .t{font-weight:700;font-size:15px}
.su-item-top .d{font-size:13px;color:var(--su-ink-soft);white-space:pre-line;margin-top:2px}
.su-item-top .amt{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.su-item-top .amt small{display:block;font-weight:600;font-size:12px;color:var(--su-ink-soft)}
.su-totals{width:100%;border-collapse:collapse;font-size:14px}
.su-totals td{padding:6px 20px;font-variant-numeric:tabular-nums}
.su-totals td:last-child{text-align:right;white-space:nowrap}
.su-totals tr.big td{font-size:17px;font-weight:800;border-top:2px solid var(--su-ink);padding-top:10px}
.su-totals tr.dep td{color:var(--su-accent-strong);font-weight:800}
.su-totals tr.sub td{color:var(--su-ink-soft);font-size:13px}
details.su-more-box summary{cursor:pointer;font-weight:700;font-size:13px;color:var(--su-accent);list-style:none;padding:10px 20px}
details.su-more-box summary::-webkit-details-marker{display:none}

/* ---------- photo strips on an estimate (22 Sep) ---------- */
.su-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.su-thumb{position:relative;width:104px;height:78px;border-radius:10px;overflow:hidden;background:var(--su-ground);border:1px solid var(--su-line);margin:0}
/* A CAPTIONED STRIP, when the customer told us what their photos are. The
   tile grows to hold the words rather than the words being a tooltip nobody
   on a phone can reach. Wider than the plain one, because a caption at 104px
   is two words a line. */
.su-thumbs--said{gap:12px}
.su-thumbs--said .su-thumb{width:150px;height:auto;border:0;background:none;overflow:visible}
.su-thumbs--said .su-thumb a{display:block;height:112px;border-radius:10px;overflow:hidden;background:var(--su-ground);border:1px solid var(--su-line)}
.su-thumbs--said figcaption{margin-top:6px;font-size:12.5px;line-height:1.4;color:var(--su-ink-soft);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.su-thumbs--said figcaption.none{font-style:italic;color:var(--su-ink-faint)}
@media (max-width:991px){ .su-thumbs--said .su-thumb{width:46%} }
.su-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.su-thumb form{position:absolute;top:4px;right:4px;margin:0}
.su-thumb button{width:26px;height:26px;border-radius:50%;border:0;background:rgba(0,19,33,.72);color:#fff;font-size:15px;line-height:1;cursor:pointer;padding:0}
.su-photo-tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;align-items:center}
.su-photo-tools .su-btn svg{margin-right:6px}
.su-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin:10px 0}
.su-pick label{position:relative;display:block;border-radius:10px;overflow:hidden;border:2px solid transparent;cursor:pointer;aspect-ratio:4/3;background:var(--su-ground)}
.su-pick label:has(input:checked){border-color:var(--su-brand)}
.su-pick img{width:100%;height:100%;object-fit:cover;display:block}
.su-pick input{position:absolute;top:6px;left:6px;width:20px;height:20px;accent-color:var(--su-brand)}

/* ---------- an estimate on a phone (22 Sep): progress, bottom bar, sheets ----------
   The progress bar sits in the dark banner; the bottom bar carries the total
   and Send under the thumb on phones; items open in a slide-up sheet. */
.su-progress{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.su-progress.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.su-progress i{display:block;height:6px;border-radius:999px;background:#1C3242}
.su-progress i.on{background:#9fe1c9}
.su-progress.done i{background:#3ddc97}
.su-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;font-size:12.5px;font-weight:700;margin-top:7px}
.su-steps.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.su-steps > *{color:var(--su-dark-ink);text-decoration:none;min-width:0}
.su-steps .ok{color:#9fe1c9}
.su-steps .todo{color:#f0b48a;text-decoration:underline;text-underline-offset:3px}
.su-steps small{display:block;font-weight:600;color:var(--su-dark-ink-soft);font-size:11px}
.su-banner a.su-steps-todo{color:#f0b48a}
.su-bottombar{display:none}
.su-btn--locked,.su-btn--locked:hover{background:var(--su-line);color:#6b7883;border-color:var(--su-line);cursor:not-allowed}
@media (max-width:991px){
  .su-bottombar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1020;align-items:center;gap:12px;padding:10px 16px calc(env(safe-area-inset-bottom,0px) + 12px);background:#fff;border-top:1px solid var(--su-line);box-shadow:0 -6px 18px rgba(0,19,33,.08)}

  .su-bottombar .t{flex:1 1 auto;min-width:0}
  .su-bottombar .t b{display:block;font-size:20px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--su-ink)}
  .su-bottombar .t small{display:block;font-size:12.5px;font-weight:700;color:var(--su-ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .su-bottombar .t small.dep{color:var(--su-accent-strong)}
  .su-bottombar .t small.todo{color:var(--su-due)}
  .su-bottombar .su-btn{min-height:52px;padding:0 20px;font-size:16px;flex:none}
  .su-has-bottombar{padding-bottom:100px}
  .su-desk-only{display:none!important}
}
/* THE SHEET SCROLLS AS ONE, with the head and the foot sticky inside it.
   It was briefly a flex column - head, a scrolling body, a fixed foot - and
   that broke every sheet whose content does not end at the form: the item
   sheet carries its photos and its Move/Remove row AFTER the form, so Save
   landed in the middle of the sheet with more below it. Seen on a phone,
   24 Sep. A sheet is not a fixed shape; it is a document. */
dialog.su-sheet{border:0;padding:0;margin:auto auto 0;width:100%;max-width:560px;max-height:92vh;border-radius:20px 20px 0 0;background:#fff;color:var(--su-ink);box-shadow:0 -10px 30px rgba(0,19,33,.25);overflow:auto}
dialog.su-sheet::backdrop{background:rgba(0,19,33,.45)}
/* svh is the viewport WITH the toolbars showing, so a sheet can never be
   taller than what is actually on screen. It is NOT lifted off the bottom:
   Safari already places fixed and top-layer boxes above its own toolbar, and
   lifting by 100lvh - 100svh on top of that floated the bar a toolbar's
   height up the screen - seen on a phone, 24 Sep. */
@supports (height:100svh){ dialog.su-sheet{max-height:92svh} }
@media (min-width:992px){dialog.su-sheet{margin:auto;border-radius:16px;max-height:86vh}
  @supports (height:100svh){dialog.su-sheet{max-height:86svh}}}
/* While a sheet is open the page's own fixed bar has nothing to do, and on
   any browser without a top layer it would sit over the sheet's footer. */
body:has(dialog.su-sheet[open]) .su-bottombar{display:none}
.su-sheet-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 18px 8px;background:#fff;border-bottom:1px solid var(--su-line)}
.su-sheet-head h2{margin:0;font-size:18px;font-weight:800}
.su-sheet-close{width:44px;height:44px;flex:none;border:0;border-radius:50%;background:var(--su-ground);color:var(--su-ink);display:flex;align-items:center;justify-content:center;cursor:pointer}
.su-sheet-body{padding:14px 18px 18px;display:flex;flex-direction:column;gap:14px}
.su-sheet-foot{position:sticky;bottom:0;z-index:2;padding:12px 18px calc(env(safe-area-inset-bottom,0px) + 14px);background:#fff;border-top:1px solid var(--su-line)}
.su-seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;padding:4px;border-radius:12px;background:var(--su-ground)}
.su-seg label{display:flex;align-items:center;justify-content:center;min-height:40px;border-radius:9px;font-size:14px;font-weight:700;color:var(--su-ink-soft);cursor:pointer;position:relative;margin:0}
.su-seg input{position:absolute;opacity:0;pointer-events:none}
.su-seg label:has(input:checked){background:#fff;color:var(--su-ink);font-weight:800;box-shadow:0 1px 3px rgba(0,19,33,.12)}
.su-seg label:has(input:focus-visible){outline:2px solid var(--su-brand)}
.su-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;max-height:132px;overflow:auto}
.su-chip{min-height:36px;border:1px solid var(--su-line);border-radius:999px;background:#fff;color:var(--su-ink);padding:0 12px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.su-chip[aria-pressed=true]{border-color:var(--su-brand);background:var(--su-accent-soft);color:var(--su-accent-strong)}
.su-chip--add{border-style:dashed;color:var(--su-ink-soft)}
.su-switch{display:flex;align-items:center;justify-content:space-between;min-height:44px;font-size:15px;font-weight:700;cursor:pointer;margin:0}
.su-switch input{appearance:none;-webkit-appearance:none;width:50px;height:30px;flex:none;border-radius:999px;background:#D3D6E0;position:relative;cursor:pointer;margin:0;transition:background .15s}
.su-switch input::after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .15s}
.su-switch input:checked{background:var(--su-brand)}
.su-switch input:checked::after{left:23px}
.su-tapcard{width:100%;border:1px solid var(--su-line);border-radius:14px;background:#fff;padding:12px 14px;display:flex;align-items:center;gap:12px;text-align:left;color:var(--su-ink);font:inherit;cursor:pointer;text-decoration:none}
.su-tapcard:hover{border-color:var(--su-brand);color:var(--su-ink)}
.su-tapcard .grow{flex:1 1 auto;min-width:0}
.su-tapcard .n{display:block;font-weight:800;font-size:15px}
.su-tapcard .s{display:block;font-size:13px;color:var(--su-ink-soft)}
.su-tapcard .warn{display:block;font-size:12.5px;font-weight:700;color:var(--su-due)}
.su-items{border:1px solid var(--su-line);border-radius:14px;background:#fff;overflow:hidden}
.su-itemcard{width:100%;border:0;border-bottom:1px solid var(--su-line);background:#fff;padding:12px 14px;display:flex;flex-direction:column;gap:8px;text-align:left;color:var(--su-ink);font:inherit}
button.su-itemcard{cursor:pointer}
button.su-itemcard:hover{background:var(--su-ground)}
.su-itemcard:last-child{border-bottom:0}
.su-itemcard .row1{display:flex;gap:10px;align-items:flex-start;width:100%}
.su-itemcard .grow{flex:1 1 auto;min-width:0}
.su-itemcard .n{display:block;font-weight:800;font-size:15px}
.su-itemcard .s{display:block;font-size:12.5px;color:var(--su-ink-soft)}
.su-itemcard .s.add{color:var(--su-accent);font-weight:700}
/* The customer's own words, two lines then clipped. Long enough to tell
   whether it still says the right thing, short enough that a card stays a
   card. */
.su-itemdesc{margin-top:3px;white-space:normal;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.su-itemdesc.is-none{font-style:italic;color:var(--su-ink-faint)}
/* Editing a credit where it sits. A <details> again - no script, and it
   reopens itself if the server refuses what was typed. Remove carries
   formnovalidate so an empty reason cannot stop a deletion. */
.su-creditedit{display:inline}
.su-creditedit>summary{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;margin-left:8px;border:1px solid var(--su-line);border-radius:8px;color:var(--su-ink-soft);font-size:12px;font-weight:700;cursor:pointer;list-style:none}
.su-creditedit>summary::-webkit-details-marker{display:none}
.su-creditedit>summary:hover{background:var(--su-ground);color:var(--su-ink)}
.su-creditrow{display:flex;flex-direction:column;gap:8px;margin:10px 0 4px;padding:12px;border:1px solid var(--su-line);border-radius:10px;background:var(--su-ground)}
.su-creditrow .su-label{margin:0}
/* A snippet somebody has to copy exactly. It wraps rather than scrolls -
   a line that runs off the edge gets copied short by hand. */
.su-snippet{margin:0 0 10px;padding:12px 14px;border:1px solid var(--su-line);border-radius:10px;background:var(--su-ground);
  font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--su-ink);
  white-space:pre-wrap;word-break:break-all}
.su-code{display:inline-block;padding:8px 12px;border:1px solid var(--su-line);border-radius:8px;background:var(--su-ground);
  font:13px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;word-break:break-all}
.su-plainlist{margin:0 0 10px;padding-left:20px;font-size:14.5px;line-height:1.55;color:var(--su-ink-soft)}
.su-plainlist b{color:var(--su-ink)}
/* One section of a request form, in the builder. Bordered rather than
   carded: they are a list to be read down, and eight cards is a wall. */
.su-block{border:1px solid var(--su-line);border-radius:12px;padding:12px 14px;margin-bottom:10px;background:#fff}
.su-blockhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.su-blockhead b{font-size:14.5px}
.su-blockbtns{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.su-addblock{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:6px;border-top:1px dashed var(--su-line);margin-top:4px}
/* WHAT THE CUSTOMER TOLD US, stacked. The question is a small heading and
   the answer is their own words underneath - so five questions read as five
   things, not as one paragraph with colons in it. */
.su-said{display:flex;flex-direction:column;gap:14px;padding-top:4px}
.su-qa .q{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--su-ink-faint);margin-bottom:3px}
.su-qa .a{font-size:15px;line-height:1.5;color:var(--su-ink);white-space:normal}
.su-itemcard .p{font-weight:800;font-size:15px;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.su-itemcard .p small{display:block;font-size:12px;font-weight:600;color:var(--su-ink-soft)}
.su-itemcard .ph{display:flex;gap:6px}
.su-itemcard .ph img{width:56px;height:42px;border-radius:8px;object-fit:cover;display:block}
.su-sec{display:flex;align-items:baseline;justify-content:space-between;padding:2px 2px 0;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--su-ink-soft)}
.su-sec span{font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none}
.su-addbig{width:100%;border:2px dashed #BCBFCC;border-radius:14px;background:#fff;padding:22px 16px;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--su-ink);font:inherit;cursor:pointer}
.su-addbig .plus{width:48px;height:48px;border-radius:50%;background:var(--su-brand);color:var(--su-accent-ink);display:flex;align-items:center;justify-content:center}
.su-addbig b{font-size:16px}
.su-addbig > span:last-child{font-size:13px;color:var(--su-ink-soft)}
.su-shares{display:flex;flex-direction:column;gap:10px}
.su-share{width:100%;min-height:60px;border:1px solid var(--su-line);border-radius:14px;background:#fff;color:var(--su-ink);padding:0 16px;display:flex;align-items:center;gap:14px;text-align:left;text-decoration:none;font:inherit;cursor:pointer}
.su-share:hover{color:var(--su-ink);border-color:var(--su-brand)}
.su-share b{display:block;font-size:16px}
.su-share small{display:block;font-size:12.5px;color:var(--su-ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.su-share--primary,.su-share--primary:hover{background:var(--su-brand);border-color:var(--su-brand);color:var(--su-accent-ink)}
.su-share--primary small{color:rgba(255,255,255,.9)}
.su-mini{display:flex;flex-direction:column;gap:6px;font-size:14px}
.su-mini > div{display:flex;justify-content:space-between;gap:12px;font-variant-numeric:tabular-nums}
.su-mini .dep{color:var(--su-accent-strong);font-weight:800}
.su-mini .soft{color:var(--su-ink-soft)}

/* ---------- the Estimates page (22 Sep redesign): needs you, stages, cards ---------- */
@media (min-width:992px){.su-phone-only{display:none!important}}
.su-segdark{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;padding:4px;border-radius:12px;background:var(--su-dark-2);max-width:460px;width:100%}
.su-segdark a{display:flex;align-items:center;justify-content:center;min-height:36px;border-radius:9px;font-size:14px;font-weight:700;color:var(--su-dark-ink);text-decoration:none}
.su-segdark a:hover{color:#fff}
.su-segdark a.on{background:#fff;color:var(--su-ink);font-weight:800}
.su-needs{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.su-needs::-webkit-scrollbar{display:none}
.su-need{flex:none;min-width:136px;border-radius:14px;padding:10px 12px;text-decoration:none}
.su-need b{display:block;font-size:22px;font-weight:800;line-height:1}
.su-need span{display:block;font-size:12.5px;font-weight:700;margin-top:4px}
.su-need.follow,.su-need.follow:hover{background:#fbe9df;color:#8a3d12}
.su-need.opened,.su-need.opened:hover{background:#e6eef6;color:#1f4a73}
.su-need.deposit,.su-need.deposit:hover{background:var(--su-accent-soft);color:var(--su-accent-strong)}
.su-need.expiring,.su-need.expiring:hover{background:#fff4d6;color:#7a5600}
.su-stagetabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.su-stagetabs::-webkit-scrollbar{display:none}
.su-stagetabs a{flex:none;display:inline-flex;align-items:center;min-height:36px;border:1px solid var(--su-line);border-radius:999px;background:#fff;color:var(--su-ink);padding:0 14px;font-size:13px;font-weight:700;text-decoration:none}
.su-stagetabs a.on{background:var(--su-ink);border-color:var(--su-ink);color:#fff;font-weight:800}
.su-estcard{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-bottom:1px solid var(--su-line);color:var(--su-ink);text-decoration:none}
.su-estcard:last-child{border-bottom:0}
a.su-estcard:hover{background:var(--su-ground);color:var(--su-ink)}
.su-estcard .r1{display:flex;gap:10px}
.su-estcard .grow{flex:1 1 auto;min-width:0}
.su-estcard .n{display:block;font-weight:800;font-size:15px}
.su-estcard .s{display:block;font-size:12.5px;color:var(--su-ink-soft)}
.su-estcard .p{font-weight:800;font-size:15px;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.su-estcard .p small{display:block;font-size:12px;font-weight:600;color:var(--su-ink-soft)}
.su-estcard .r2{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;font-weight:700;color:var(--su-ink-soft)}
.su-life{display:inline-flex;gap:3px}
.su-life i{width:18px;height:5px;border-radius:999px;background:var(--su-line)}
.su-life i.on{background:var(--su-brand)}
.su-tag{padding:2px 9px;border-radius:999px;background:var(--su-ground);color:var(--su-ink-soft)}
.su-tag.due{background:#fbe9df;color:#8a3d12}
.su-tag.blue{background:#e6eef6;color:#1f4a73}
.su-tag.green{background:var(--su-accent-soft);color:var(--su-accent-strong)}
.su-tag.amber{background:#fff4d6;color:#7a5600}
.su-quote{font-size:13px;background:var(--su-ground);border-radius:10px;padding:8px 10px;color:var(--su-ink)}
.su-quote span{color:var(--su-ink-soft)}
.su-cardacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--su-line)}
.su-cardacts > *,.su-cardacts form > button{min-height:48px;display:flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-size:14px;font-weight:800;text-decoration:none;border:0;background:#fff;color:var(--su-accent);cursor:pointer;width:100%}
.su-cardacts > *{border-right:1px solid var(--su-line)}
.su-cardacts > *:last-child{border-right:0}
.su-cardacts form{margin:0}
.su-cardacts .quiet{color:var(--su-ink-soft)}
.su-cardacts [aria-disabled=true]{color:var(--su-ink-faint);pointer-events:none}
.su-fab{position:fixed;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);z-index:1020;height:56px;border-radius:999px;background:var(--su-brand);color:var(--su-accent-ink);padding:0 22px 0 18px;display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:16px;font-weight:800;border:0;box-shadow:0 6px 18px rgba(var(--su-brand-rgb),.4);cursor:pointer}
@media (min-width:992px){.su-fab{display:none}}
.su-picklist{border:1px solid var(--su-line);border-radius:14px;overflow:hidden}
.su-picklist .h{padding:8px 14px 4px;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--su-ink-soft)}
.su-pickrow{width:100%;min-height:56px;border:0;border-top:1px solid var(--su-line);background:#fff;padding:8px 14px;display:flex;align-items:center;gap:12px;text-align:left;color:var(--su-ink);font:inherit;cursor:pointer}
.su-pickrow.on{background:var(--su-accent-soft)}
.su-pickrow .n{display:block;font-weight:800;font-size:15px}
.su-pickrow .s{display:block;font-size:12.5px;color:var(--su-ink-soft)}
.su-pickrow.new{color:var(--su-accent-strong);font-weight:800;font-size:15px}

/* ---------- finger-sized (22 Sep): 44 px targets on phones ----------
   An item card holds two targets - the item, and its photos - each easy to
   hit with a thumb. On phones every small control grows to 40-44 px;
   computers keep the tighter sizes, where a mouse is precise. */
.su-itemmain{width:100%;border:0;background:transparent;padding:0;margin:0;display:block;text-align:left;color:var(--su-ink);font:inherit}
button.su-itemmain{cursor:pointer;min-height:44px}
div.su-itemcard{cursor:default}
div.su-itemcard:has(> button.su-itemmain:hover){background:var(--su-ground)}
.su-itemcard .ph{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.su-thumbbtn{width:64px;height:48px;padding:0;border:0;border-radius:9px;overflow:hidden;background:var(--su-ground);cursor:pointer;display:block;flex:none}
.su-thumbbtn img{width:100%!important;height:100%!important;object-fit:cover;display:block;border-radius:0!important}
.su-thumbadd{width:48px;height:48px;flex:none;border:2px dashed #BCBFCC;border-radius:9px;background:#fff;color:var(--su-accent);display:flex;align-items:center;justify-content:center;cursor:pointer}
.su-addphotos{width:100%;min-height:44px;border:1.5px dashed #BCBFCC;border-radius:10px;background:#fff;color:var(--su-accent-strong);font:inherit;font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.su-addphotos:hover,.su-thumbadd:hover{border-color:var(--su-brand);background:var(--su-accent-soft)}
/* The photo row on an item card (24 Sep). Taking a photo is what this page
   is for in a yard, so the camera is the wide button and Upload the narrow
   one beside it - the size says which is the usual one without hiding the
   other. Upload is the only route on a laptop, so it never becomes an icon
   alone. */
.su-photo-tools--card{margin-top:8px}
.su-photo-tools--card .su-addphotos{flex:1 1 auto;width:auto;min-width:0}
.su-photo-tools--card .su-upload{flex:0 0 auto;white-space:nowrap}
.su-photo-tools--card .su-upload svg{margin-right:6px}
/* A link that posts. Used for "Make this detailed", which is a write and so
   cannot be an <a>, but reads as a sentence and should not look like a
   button competing with Add an item. */
.su-linkbtn{border:0;background:none;padding:0;font:inherit;font-weight:800;color:var(--su-accent);cursor:pointer;text-decoration:underline}
.su-linkbtn:hover{color:var(--su-accent-strong)}
/* An item with no price yet. Added in the yard, priced later - it reads as
   something waiting rather than as a figure, so nobody mistakes it for free.
   The same burnt orange as everything else that needs a person. */
.su-needprice{font-size:13.5px;font-weight:800;color:var(--su-due);white-space:nowrap}
/* Pricing an item where it stands. The card's own body is a button that
   opens the edit sheet, so "Price it" cannot live inside it - tapping it
   opened the sheet, which is what happened on a phone, 24 Sep. It sits
   under the card instead, and opens a full-width field with no script. */
/* THE PILL SITS WHERE THE PRICE WOULD BE, and opens the field beneath.
   It is a <summary>, placed over the price corner - the card's body is
   itself a button that opens the edit sheet, and a button cannot hold a
   button, which is why "Price it" inside it opened the sheet instead. A
   <details> keeps it working with no script at all. */
.su-itemcard{position:relative}
.su-itemcard.has-pill .su-itemmain .row1{padding-right:108px}
/* ON THE TITLE'S LINE, worked out rather than guessed.
   The card pads 12px, so the title's line box starts at 12 and is 18px tall
   (15px at 1.2) - its middle is 21px down. The control is 26px tall, so it
   starts at 21 - 13 = 8. Anything else and it reads as floating above the
   name instead of sitting beside it.
   26px is under the 44px this system uses for taps, so the hit area is put
   back with a transparent ::after - the box stays the size of the text it
   sits next to, and the finger still gets its target. */
.su-priceit>summary{position:absolute;top:8px;right:14px;z-index:1;display:inline-flex;align-items:center;height:26px;padding:0 11px;border:1.5px solid var(--su-due);border-radius:10px;background:#fff;color:var(--su-due);font-size:13px;line-height:1;font-weight:800;cursor:pointer;list-style:none;white-space:nowrap}
.su-priceit>summary::after{content:"";position:absolute;left:-8px;right:-8px;top:-9px;bottom:-9px}
.su-priceit>summary::-webkit-details-marker{display:none}
.su-priceit>summary:hover{background:#fdf1e9}
.su-priceit[open]>summary{background:var(--su-due);color:#fff}
/* A price that exists is not asking for anything, so it is the same control
   in the ordinary ink rather than the burnt orange that means "needs you".
   Same shape, same size, same place. */
.su-priceit>summary.is-priced{border-color:var(--su-line);color:var(--su-ink);font-variant-numeric:tabular-nums}
.su-priceit>summary.is-priced:hover{background:var(--su-ground)}
.su-priceit[open]>summary.is-priced{background:var(--su-ink);border-color:var(--su-ink);color:#fff}
.su-pricerow{display:flex;flex-direction:column;gap:8px;padding:12px 14px 14px;border-top:1px solid var(--su-line)}
.su-pricerow .su-label{margin:0}
.su-rowbtn{width:100%;min-height:44px;margin:0 -6px;padding:0 6px;border:0;border-radius:8px;background:transparent;display:flex;justify-content:space-between;align-items:center;gap:12px;font:inherit;font-size:14px;text-align:left;cursor:pointer;width:calc(100% + 12px)}
.su-rowbtn:hover{background:var(--su-ground)}
.su-mini .su-rowbtn.dep{color:var(--su-accent-strong);font-weight:800}
@media (max-width:991px){
  .su-btn--sm{min-height:44px;padding:0 14px}
  .su-chip{min-height:40px;padding:0 14px}
  .su-seg label{min-height:44px}
  .su-stagetabs a{min-height:40px}
  .su-thumb{width:96px;height:72px}
  .su-thumb button{width:36px;height:36px;font-size:18px}
  .su-thumb form{top:3px;right:3px}
  .su-pick{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
  .su-pick input{width:24px;height:24px}
  details.su-more-box summary{min-height:48px;display:flex;align-items:center}
  .su-cardacts > *,.su-cardacts form > button{min-height:52px}
}

/* ---------- phone ---------- */
@media (max-width:767px){
  /* The theme's breadcrumb is a row of taps nobody uses on a phone; the
     back gesture is the breadcrumb. And a page whose banner already says
     who it is does not need the theme's title above it either. */
  .breadcrumb{display:none}
  .su-banner{border-radius:12px;padding:16px}
  .su-contact{flex-direction:column;gap:0}
  .su-contact a,.su-contact span{min-height:var(--su-tap);width:100%}
  .su-banner .su-select{width:100%;min-width:0}
  .su-actions{width:100%}
  .su-actions .su-btn{flex:1 1 auto}
  .su-tiles{grid-template-columns:1fr 1fr}
  .su-tile .v{font-size:22px}
  .su-row{padding:12px 14px}
  .su-row .right{display:none}
  /* where the money IS the row (invoices), it stays */
  .su-row .right.keep{display:block;font-size:13px}
  /* 16 px on phones: an iPhone zooms the whole page into any field smaller
     than that the moment it is tapped. */
  .su-input,.su-search{font-size:16px}
  .su-pipe-col{flex-basis:84vw;max-height:none}
}


/* ==========================================================================
   The SRVCE logo off the sidebar (25 Sep)
   ========================================================================== */
@media (min-width:1025px){
  .pc-sidebar.pc-sidebar-hide img.su-logo{display:none !important}
  .pc-sidebar.pc-sidebar-hide img.su-logo-mark{display:block}
  .pc-sidebar.pc-sidebar-hide:hover img.su-logo{display:block !important}
  .pc-sidebar.pc-sidebar-hide:hover img.su-logo-mark{display:none}
}
/* Sign-in and signup: the logo sits in the drawn title block between the two
   rules. The old heading's tracking and indent were set for type and would
   push an image sideways, so they are undone here. */
.srv-land-mark.srv-land-logo{letter-spacing:0;text-indent:0;line-height:0;margin:0}
.srv-land-mark.srv-land-logo img{display:block;height:44px;width:auto;max-width:100%}
@media (max-width:420px){ .srv-land-mark.srv-land-logo img{height:34px} }
/* Set-password and the other card screens. */
.srv-auth-logo{display:inline-block;height:32px;width:auto}


/* ==========================================================================
   Uploaded logo at the top, SRVCE at the foot (25 Sep)
   ========================================================================== */
/* THE MASTHEAD (25 Sep, second pass). A small white card floating on the
   slate read as a sticker. The whole 70px band goes white instead, edge to
   edge, at the same height as the page's top bar, with the logo centred and
   as large as the band allows - so the business's logo is the top of the
   sidebar rather than something placed on it. Uploaded logos are made for
   white paper, so this is also the ground they were drawn for. */
.pc-sidebar .su-brand.su-brand-custom{background:#fff !important;padding:0 16px !important;
  justify-content:center;border-bottom:1px solid #e3e8ec}
.pc-sidebar .su-brand-custom .b-brand{display:flex;align-items:center;justify-content:center;
  width:100%;height:100%}
.pc-sidebar .su-custom{display:block;width:100%;background:none;padding:0}
.pc-sidebar .su-custom img{display:block;margin:0 auto;max-height:48px;max-width:100%;width:auto;height:auto}
.pc-sidebar img.su-custom-icon{height:40px;width:40px;object-fit:contain}
@media (min-width:1025px){
  .pc-sidebar.pc-sidebar-hide .su-brand.su-brand-custom{padding:0 !important}
  .pc-sidebar.pc-sidebar-hide:hover .su-brand.su-brand-custom{padding:0 16px !important;justify-content:center}
}

.su-powered{display:flex;align-items:center;justify-content:center;gap:8px;padding:4px 22px 20px;flex:0 0 auto;
  text-decoration:none;font-size:9.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#9DA2B3}
.su-powered:hover{color:#D3D6E0}
.su-powered-logo{display:block;height:12px;width:auto;opacity:.9}
.su-powered-mark{display:none;height:18px;width:auto}
/* The user block above gives up some of its bottom padding to the new last
   line, so the pair reads as one footer rather than two. */
.su-who:has(+ .su-powered){padding-bottom:10px}

@media (min-width:1025px){
  .pc-sidebar.pc-sidebar-hide .su-powered{justify-content:center;padding:4px 0 20px}
  .pc-sidebar.pc-sidebar-hide .su-powered-by,
  .pc-sidebar.pc-sidebar-hide .su-powered-logo{display:none}
  .pc-sidebar.pc-sidebar-hide .su-powered-mark{display:block}
  .pc-sidebar.pc-sidebar-hide:hover .su-powered{justify-content:center;padding:4px 22px 20px}
  .pc-sidebar.pc-sidebar-hide:hover .su-powered-by,
  .pc-sidebar.pc-sidebar-hide:hover .su-powered-logo{display:block}
  .pc-sidebar.pc-sidebar-hide:hover .su-powered-mark{display:none}
}
/* Phones: the sidebar slides in over the page, and its last line needs the
   home-indicator clearance the user block used to carry. */
@media (max-width:1024.98px){
  .su-powered{padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
}


/* The page footer: the SRVCE logo, dark, with the copyright beside it. */
.srv-foot{display:flex;align-items:center;gap:10px;color:#6E7180;font-size:12.5px}
.srv-foot-logo{display:block;height:15px;width:auto}

/* Name over role, always (25 Sep). The rail's hover rule brings the text
   back as display:block, and inside a block the name and role are inline
   spans - so hovered open they ran together as "Nicholas StephanOwner".
   Same specificity, later in the file, so this wins. */
@media (min-width:1025px){
  .pc-sidebar.pc-sidebar-hide:hover .su-who-text{display:flex !important;flex-direction:column}
}
.su-who-name,.su-who-role{display:block}

/* ==========================================================================
   Desktop: the sidebar fits the screen (25 Sep)
   ==========================================================================
   The foot of the sidebar was below the bottom of the window. The wrapper
   had min-height:100% - allowed to grow past the screen - and the theme
   gives the menu its own fixed height, so the user card and the Powered-by
   line stacked underneath and hung off the edge. More padding under the
   logo only pushed it further off, which is how this was found.

   The same fitted column phones already use (the max-width:1024px block
   above): exactly the window's height, brand at the top, the menu taking
   what is left and scrolling if it must, the foot always on screen.
   height:auto !important on the menu is what cancels the theme's fixed
   height, whatever value it is. */
@media (min-width:1025px){
  .pc-sidebar{display:flex !important;flex-direction:column;height:100vh !important;height:100dvh !important;max-height:100dvh}
  .pc-sidebar .navbar-wrapper{flex:1 1 auto;height:100% !important;min-height:0 !important;display:flex;flex-direction:column}
  .pc-sidebar .m-header{flex:0 0 auto}
  .pc-sidebar .navbar-content{flex:1 1 auto;height:auto !important;max-height:none !important;min-height:0;overflow-y:auto;overflow-x:hidden}
  .pc-sidebar .su-who{flex:0 0 auto}
  /* The rail lets its menu overflow visibly, for the icons; it still has to
     leave the foot where it is. */
  .pc-sidebar.pc-sidebar-hide .navbar-content{overflow-y:auto;overflow-x:hidden}
}


/* ==========================================================================
   The theme's Bootstrap primary, in the brand (25 Sep)
   ==========================================================================
   Pages that use Bootstrap's .btn-primary, links and form focus were still
   drawing the theme's colour. Scoped to .pc-container - the signed-in page
   body - so the sign-in page, which has its own rules, is untouched. */
:root{--bs-link-color:var(--su-accent);--bs-link-color-rgb:var(--su-accent-rgb);--bs-link-hover-color:var(--su-accent-strong);--bs-link-hover-color-rgb:var(--su-accent-rgb)}
.pc-container .btn-primary{--bs-btn-bg:var(--su-brand);--bs-btn-border-color:var(--su-brand);--bs-btn-color:#001321;
  --bs-btn-hover-bg:var(--su-brand-hover);--bs-btn-hover-border-color:var(--su-brand-hover);--bs-btn-hover-color:#001321;
  --bs-btn-active-bg:var(--su-brand-hover);--bs-btn-active-border-color:var(--su-brand-hover);--bs-btn-active-color:#001321;
  --bs-btn-disabled-bg:var(--su-brand);--bs-btn-disabled-border-color:var(--su-brand);--bs-btn-disabled-color:#001321;
  background-color:var(--su-brand);border-color:var(--su-brand);color:#001321;font-weight:700}
.pc-container .btn-primary:hover,.pc-container .btn-primary:focus,.pc-container .btn-primary:active{background-color:var(--su-brand-hover);border-color:var(--su-brand-hover);color:#001321}
.pc-container .btn-outline-primary{color:var(--su-accent);border-color:var(--su-brand)}
.pc-container .btn-outline-primary:hover{background-color:var(--su-brand);border-color:var(--su-brand);color:#001321}
.pc-container .text-primary{color:var(--su-accent) !important}
.pc-container .bg-primary{background-color:var(--su-brand) !important;color:#001321 !important}
.pc-container .form-control:focus,.pc-container .form-select:focus{border-color:var(--su-accent);box-shadow:0 0 0 .2rem rgba(var(--su-brand-rgb),.35)}
.pc-container .form-check-input:checked{background-color:#001321;border-color:#001321}
.pc-container .form-check-input:focus{box-shadow:0 0 0 .2rem rgba(var(--su-brand-rgb),.35)}

/* ==========================================================================
   Services: what's included, varieties and extras (25 Sep, migration 078)
   ========================================================================== */
.srv-more{flex:1 1 100%;margin-top:2px;border-top:1px dashed var(--su-line);padding-top:8px}
.srv-more > summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--su-accent);list-style:none;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.srv-more > summary::-webkit-details-marker{display:none}
.srv-more > summary::before{content:'\25B8';display:inline-block;transition:transform .15s ease;color:var(--su-ink-faint)}
.srv-more[open] > summary::before{transform:rotate(90deg)}
.srv-more-sum{font-weight:500;color:var(--su-ink-faint);font-size:12.5px}
.srv-opt{margin-top:14px}
.srv-opt-head{font-size:13px;margin-bottom:6px}
.srv-opt-head .text-muted{font-size:12px}
.srv-opt-rows{display:flex;flex-direction:column;gap:6px}
.srv-opt-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.srv-opt-row.off{opacity:.55}
.srv-opt-name{flex:1 1 180px;min-width:150px}
.srv-opt-price{width:92px;flex:none;text-align:right;font-variant-numeric:tabular-nums}
.srv-opt-note{flex:2 1 220px;min-width:160px}

/* Estimate: "Measured in Chart" (079) */
.su-takeoff-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px 18px;margin-bottom:12px}
.su-takeoff-facts span{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--su-ink-faint)}
.su-takeoff-facts b{font-size:14px;color:var(--su-ink)}
.su-takeoff-list{list-style:none;margin:0 0 10px;padding:0;border-top:1px solid var(--su-line)}
.su-takeoff-list li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--su-line);font-size:13.5px}
.su-takeoff-list b{font-variant-numeric:tabular-nums;white-space:nowrap}
.srv-border{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;font-size:12.5px}

/* Estimate: the plan (083) - a light grid behind the drawing, like the
   customer's page, and it scrolls sideways on a narrow phone rather than
   shrinking its callouts past reading. */
.su-plan{overflow-x:auto;background-color:#FCFCFD;border:1px solid var(--su-line);border-radius:10px;padding:8px;
  background-image:linear-gradient(rgba(26,31,35,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(26,31,35,.05) 1px,transparent 1px);
  background-size:24px 24px}
.su-plan svg{min-width:560px}
.su-leftout{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;font-size:13.5px;margin:4px 0 12px}
.su-leftout-item{white-space:nowrap}

/* Estimate page (26 Sep): the job's price pinned at the top of the right
   column on a wide screen, with Send beneath it - always in view. The column
   stretches to the page's height so the pin holds all the way down. */
@media (min-width:1200px){
  .su-split > .su-side{align-self:stretch}
  .su-side-stick{position:sticky;top:86px;z-index:2}
}
/* Estimate item sheet: the varieties a line lets the customer choose (085) */
.su-offers{display:grid;gap:6px;margin-top:8px;padding:10px 12px;border:1px solid var(--su-line);border-radius:10px}
.su-offers label{display:flex;align-items:center;gap:8px;min-height:36px;font-size:14px;cursor:pointer}

/* Services: example photos on a service and its varieties (086) */
.srv-photos{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;margin:6px 0 4px}
.srv-photo{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11.5px;color:var(--su-ink-faint)}
.srv-photo img{width:84px;height:64px;object-fit:cover;border-radius:8px;display:block;border:1px solid var(--su-line)}
.srv-photo label{display:flex;align-items:center;gap:4px;cursor:pointer}
.srv-photo-add{display:flex;align-items:center;justify-content:center;min-height:64px;padding:0 14px;border:1.5px dashed var(--su-line);
  border-radius:8px;color:var(--su-accent);font-size:13px;font-weight:600;cursor:pointer}
.srv-photo-add.on{border-style:solid;border-color:var(--su-accent)}

/* ==========================================================================
   SERVICES - catalog + editor, with Select mode (26 Sep).
   The list is read; one service is edited at a time; phones show one or the
   other. Selling first (price, included, varieties, extras, photos), Chart
   setup last.
   ========================================================================== */
.srv-shell{display:grid;grid-template-columns:380px minmax(0,1fr);gap:18px;align-items:start}
.srv-list{position:sticky;top:86px;background:var(--su-surface);border:1px solid var(--su-line);border-radius:16px;overflow:hidden;
  max-height:calc(100vh - 110px);display:flex;flex-direction:column}
.srv-list-form{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
.srv-list-top{padding:14px 14px 8px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid var(--su-line)}
.srv-find input{width:100%;box-sizing:border-box;height:44px;border:1.5px solid var(--su-line);border-radius:10px;padding:0 12px;font:inherit;font-size:14.5px}
.srv-filters{display:flex;flex-wrap:wrap;gap:6px}
.srv-filters button{height:34px;padding:0 12px;border-radius:999px;border:1.5px solid var(--su-line);background:#fff;color:var(--su-ink);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.srv-filters button[aria-pressed=true]{border-color:var(--su-brand);background:var(--su-accent-soft)}
.srv-list-acts{display:flex;gap:8px;justify-content:space-between}
.srv-btn-brand{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 16px;border:0;border-radius:10px;
  background:var(--su-brand);color:var(--su-accent-ink);font:inherit;font-weight:800;font-size:14.5px;text-decoration:none;cursor:pointer}
.srv-btn-brand:hover{background:var(--su-brand-hover);color:var(--su-accent-ink)}
.srv-btn-brand:disabled{opacity:.45;cursor:default}
.srv-btn-soft{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 14px;border:1.5px solid var(--su-line);
  border-radius:10px;background:#fff;color:var(--su-ink);font:inherit;font-weight:700;font-size:14px;text-decoration:none;cursor:pointer}
.srv-btn-soft[aria-pressed=true]{border-color:var(--su-ink)}
.srv-rows{overflow-y:auto;padding:4px 8px 12px;flex:1 1 auto}
.srv-group{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--su-ink-faint);padding:14px 8px 4px}
.srv-row{display:flex;align-items:center;gap:4px;border-radius:12px}
.srv-row.on{background:var(--su-accent-soft);box-shadow:inset 0 0 0 1.5px var(--su-brand)}
.srv-row.is-off .srv-row-link{opacity:.55}
.srv-row-pick{display:none;align-items:center;justify-content:center;width:40px;height:44px;flex:none;cursor:pointer}
.srv-row-pick input{width:20px;height:20px;accent-color:var(--su-accent)}
.srv-list.selecting .srv-row-pick{display:flex}
.srv-row-link{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:12px;min-height:58px;padding:8px 10px;color:var(--su-ink);text-decoration:none;border-radius:12px}
.srv-row-link:hover{background:var(--su-ground);color:var(--su-ink)}
.srv-row.on .srv-row-link:hover{background:transparent}
.srv-dot{width:12px;height:12px;border-radius:50%;flex:none}
.srv-dot-lg{width:18px;height:18px}
.srv-row-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.srv-row-body b{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srv-row-body small,.srv-row-price small{font-size:12px;color:var(--su-ink-faint)}
.srv-row-price{text-align:right;white-space:nowrap;display:flex;flex-direction:column}
.srv-row-price b{font-size:14.5px}
.srv-none{padding:14px 10px;color:var(--su-ink-faint);font-size:14px}
.srv-bulk{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 14px;background:var(--su-ink);color:#fff}
.srv-bulk[hidden]{display:none}
.srv-bulk b{flex:1 1 100%;font-size:14px}
.srv-bulk select,.srv-bulk input{height:42px;border-radius:10px;border:0;padding:0 10px;font:inherit;font-weight:700}
.srv-bulk input{width:84px}
.srv-bulk input[hidden]{display:none}
/* the editor */
.srv-edit{background:var(--su-surface);border:1px solid var(--su-line);border-radius:16px;min-width:0}
.srv-back{display:none}
.srv-edit-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:20px 24px 6px}
.srv-edit-head h2{margin:0;font-size:22px;font-weight:800}
.srv-name{flex:1 1 240px;min-width:0;font:inherit;font-size:22px;font-weight:800;border:1.5px solid transparent;border-radius:10px;padding:4px 8px;margin-left:-8px;color:var(--su-ink)}
.srv-name:hover{border-color:var(--su-line)}
.srv-name:focus{border-color:var(--su-brand);outline:0}
.srv-chip{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:var(--su-ground);font-size:12.5px;font-weight:800;color:var(--su-ink-soft)}
.srv-chip.ok{background:var(--su-accent-soft);color:var(--su-accent)}
.srv-used{font-size:13px;color:var(--su-ink-faint);margin-left:auto}
.srv-facts{display:flex;flex-wrap:wrap;gap:6px 24px;padding:0 24px 12px;font-size:14px;color:var(--su-ink-soft)}
.srv-facts b{color:var(--su-ink);font-size:15px}
.srv-tabs{display:flex;gap:22px;padding:0 24px;border-bottom:1px solid var(--su-line);overflow-x:auto;scrollbar-width:none}
.srv-tabs::-webkit-scrollbar{display:none}
.srv-tabs button{height:46px;border:0;background:none;padding:0;font:inherit;font-size:14.5px;font-weight:600;color:var(--su-ink-faint);
  border-bottom:3px solid transparent;white-space:nowrap;cursor:pointer}
.srv-tabs button[aria-selected=true]{color:var(--su-ink);font-weight:800;border-bottom-color:var(--su-brand)}
.srv-tabs button:focus-visible{outline:2px solid var(--su-accent);outline-offset:-2px}
.srv-pane{padding:20px 24px;display:flex;flex-direction:column;gap:16px}
.srv-pane[hidden]{display:none}
.srv-pane .srv-opt{margin-top:0}
.srv-field{display:flex;flex-direction:column;gap:6px}
.srv-lbl{font-size:12.5px;font-weight:800;color:var(--su-ink-soft)}
.srv-hint{font-size:12.5px;color:var(--su-ink-faint)}
.srv-pane .srv-svc-price{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.srv-pane .srv-svc-price input{max-width:130px}
.srv-pane .srv-svc-flags{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.srv-savebar{position:sticky;bottom:0;display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:14px 24px;
  background:var(--su-surface);border-top:1px solid var(--su-line);border-radius:0 0 16px 16px;z-index:3}
.srv-dirty{margin-right:auto;font-size:13.5px;font-weight:700;color:#8A5A00}
.srv-new{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;padding:12px 24px 24px}
.srv-card{border:1px solid var(--su-line);border-radius:14px;padding:16px}
.srv-card h3{font-size:16px;font-weight:800;margin:0 0 4px}
.srv-tpls .srv-tpl{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--su-line)}
/* phone and narrow screens: one pane at a time */
@media (max-width:991px){
  .srv-shell{grid-template-columns:minmax(0,1fr)}
  .srv-list{position:static;max-height:none;border-radius:14px}
  .srv-shell.show-edit .srv-list{display:none}
  .srv-shell:not(.show-edit) .srv-edit{display:none}
  .srv-back{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;font-weight:700;text-decoration:none;color:var(--su-accent)}
  .srv-edit-head{padding:6px 16px}
  .srv-facts,.srv-tabs,.srv-pane{padding-left:16px;padding-right:16px}
  .srv-savebar{padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));border-radius:0}
  .srv-savebar .srv-btn-brand{flex:1 1 auto}
  .srv-bulk{position:sticky;bottom:0}
}
@media (max-width:991px){ .srv-shell:not(.show-edit) .srv-row.on{background:none;box-shadow:none} }
/* Services: categories (087) */
.srv-nudge{display:block;margin:10px 8px 0;padding:10px 12px;border:1.5px dashed var(--su-line);border-radius:10px;font-size:13.5px;font-weight:700;color:var(--su-accent);text-decoration:none}
.srv-list-acts{flex-wrap:wrap}
.srv-list-acts .srv-btn-brand{margin-left:auto}
.srv-catpick{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:0 24px 10px;font-size:13.5px;font-weight:700;color:var(--su-ink-soft)}
.srv-catpick select,.srv-catpick input{height:40px;border:1.5px solid var(--su-line);border-radius:10px;padding:0 10px;font:inherit;font-weight:700;color:var(--su-ink);background:#fff}
.srv-catpick input[hidden]{display:none}
.srv-cat-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--su-line)}
.srv-cat-row input:not([type]),.srv-cat-row input[name$="[name]"]{flex:1 1 220px;height:44px;border:1.5px solid var(--su-line);border-radius:10px;padding:0 12px;font:inherit;font-size:15px;font-weight:700}
.srv-cat-row .srv-btn-soft{min-width:44px;padding:0 10px}
@media (max-width:991px){ .srv-catpick{padding:0 16px 10px} }
/* Page footer: logo and copyright on the right (26 Sep) */
.pc-footer .srv-foot{justify-content:flex-end;text-align:right;margin-left:auto}

/* ==========================================================================
   PACKAGES - the package builder (26 Sep). The Services layout (srv-shell),
   plus the service lines: edited where they sit, reordered with arrows.
   ========================================================================== */
.pk-input{height:44px;box-sizing:border-box;border:1.5px solid var(--su-line);border-radius:10px;padding:0 12px;font:inherit;font-size:14.5px;background:#fff;color:var(--su-ink);width:100%}
.pk-lines{display:flex;flex-direction:column}
.pk-line{display:grid;grid-template-columns:56px minmax(0,1fr) 250px 140px 44px;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--su-line)}
.pk-head{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--su-ink-faint);border-top:0;padding-bottom:4px}
.pk-move{display:flex;gap:2px}
.pk-mv{width:26px;height:40px;border:1.5px solid var(--su-line);border-radius:8px;background:#fff;color:var(--su-ink-soft);font-weight:800;cursor:pointer;padding:0}
.pk-mv:focus-visible{outline:2px solid var(--su-accent)}
.pk-svc{display:flex;align-items:center;gap:10px;min-width:0}
.pk-svc > span:last-child{display:flex;flex-direction:column;min-width:0}
.pk-svc b{font-size:15px}
.pk-svc small{font-size:12.5px;color:var(--su-ink-faint)}
.pk-rate{display:flex;align-items:center;gap:6px;height:44px;border:1.5px solid var(--su-line);border-radius:10px;background:#fff;padding:0 12px;box-sizing:border-box}
.pk-rate span{color:var(--su-ink-faint);font-weight:700}
.pk-rate input{border:0;outline:0;width:100%;font:inherit;font-size:15px;font-weight:700;background:transparent}
.pk-rm{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;cursor:pointer;color:var(--su-ink-faint);font-size:17px}
.pk-rm input{position:absolute;opacity:0;width:1px;height:1px}
.pk-rm:has(input:checked){background:#FDECEC;color:#9B1C1C}
.pk-rm:has(input:focus-visible){outline:2px solid var(--su-accent)}
.pk-gone{opacity:.45}
.pk-gone .pk-svc b{text-decoration:line-through}
.pk-new{border-top:1.5px dashed var(--su-line)}
.pk-plus{display:flex;justify-content:center;font-size:20px;font-weight:800;color:var(--su-accent)}
.pk-inuse{gap:6px;cursor:pointer}
.pk-inuse input{accent-color:var(--su-accent)}
.pk-del{color:#9B1C1C;margin-right:auto}
@media (max-width:760px){
  .pk-line{grid-template-columns:40px minmax(0,1fr) 44px;grid-template-areas:"mv svc rm" "mv fr fr" "mv rt rt";row-gap:8px}
  .pk-line > .pk-move{grid-area:mv;flex-direction:column;align-self:start}
  .pk-line > .pk-svc{grid-area:svc}
  .pk-line > select{grid-area:fr}
  .pk-line > .pk-rate{grid-area:rt}
  .pk-line > .pk-rm{grid-area:rm}
  .pk-head{display:none}
  .pk-new{grid-template-columns:40px minmax(0,1fr);grid-template-areas:"pl sv" "pl fr" "pl rt"}
  .pk-new > .pk-plus{grid-area:pl}
  .pk-new > select:nth-of-type(1){grid-area:sv}
  .pk-new > select:nth-of-type(2){grid-area:fr}
  .pk-new > .pk-rate{grid-area:rt}
  .pk-new > span:last-child{display:none}
}

/* ---------------------------------------------------------------------------
   Team, clock-in and equipment pages (28 Sep): three small pieces they share.
   --------------------------------------------------------------------------- */
/* A pill for what is wrong: missing, rejected, off today. (--on: fine,
   --due: waiting / a problem.) */
.su-pill--bad{background:#FCE8E6;color:#9B2C1F}
/* A radio as a bordered card - the New role dialog's "Start from". */
.su-choice{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1.5px solid var(--su-line);border-radius:var(--su-radius-sm);cursor:pointer;margin:0 0 8px;font-size:14px;line-height:1.35}
.su-choice:has(input:checked){border:2px solid var(--su-brand);background:var(--su-accent-soft)}
.su-choice input{width:18px;height:18px;margin-top:1px;accent-color:var(--su-accent);flex:none}
.su-choice:has(input:focus-visible){outline:2px solid var(--su-brand);outline-offset:2px}
/* A segmented choice that sits inside a form rather than a toolbar. */
.su-seg--sm label{min-height:36px;font-size:13.5px}

/* ===================================================================
   COMPACT BANNER (118): the dark banner took 140-217px on every page -
   a third of a laptop screen before any content. One row where there is
   room: title and counts on the left, search / filters / actions on the
   right, wrapping on narrow screens. Phones keep full-size touch targets.
   =================================================================== */
@media (min-width: 768px) {
  .su-banner{flex-direction:row;flex-wrap:wrap;align-items:center;padding:12px 18px;gap:10px 18px;border-radius:12px}
  .su-banner > .su-id{flex:1 1 320px;gap:12px;min-width:0}
  .su-banner h1,.su-banner .su-title{font-size:18px;line-height:1.2}
  .su-banner .su-sub{font-size:12.5px;margin-top:2px}
  .su-banner .su-avatar{width:36px;height:36px;font-size:14px}
  .su-banner-row{flex:1 1 520px;border-top:0;padding-top:0;align-items:center;gap:10px}
  .su-banner .su-actions{gap:8px}
  .su-banner .su-input,.su-banner .su-select,.su-banner .su-search{min-height:36px}
  .su-banner .su-btn{min-height:36px;padding-top:6px;padding-bottom:6px}
  .su-banner-addr{font-size:14px;margin-right:0}
}
@media (min-width: 768px) {
  /* Estimates: the tabs size to their words, so the search fits beside them. */
  .su-banner .su-segdark{width:auto;max-width:none;grid-auto-columns:auto}
  .su-banner .su-segdark a{padding:0 14px;min-height:30px;font-size:13px}
  .su-banner .su-filters a{min-height:30px;padding:0 12px}
  /* Customer: the property picker lines up with its buttons (label kept for screen readers). */
  .su-banner .su-banner-row > form > .su-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .su-banner .su-select{min-width:220px}
  /* Invoices: a menu of 500 customers was as wide as its longest name. */
  .su-banner select.su-input{max-width:220px}
}

/* ===================================================================
   ROUTE TABLE (118): the stops in columns beside the map, both the height
   of the window - no white space above or below the map. Hidden columns
   leave headings and rows aligned (flex cells, not a fixed grid).
   =================================================================== */
.su-dispatch .seq--table{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:12px;height:calc(100vh - 210px);min-height:460px;align-items:stretch}
.su-dispatch .seq--table .seq-tablewrap{display:flex;flex-direction:column;min-height:0;border:1px solid var(--su-line);border-radius:12px;overflow:hidden;background:var(--su-surface)}
.su-dispatch .seq--table .seq-tools{display:flex;align-items:center;gap:10px;padding:6px 10px;border-bottom:1px solid var(--su-line);font-size:12.5px}
.su-dispatch .seq--table .seq-count{flex:1 1 auto;color:var(--su-ink-soft);font-weight:700}
.su-dispatch .seq--table .seq-count.done{color:#1a7f4b}
.su-dispatch .seq--table .seq-reset{border:0;background:none;color:var(--su-ink-soft);text-decoration:underline;font-size:12.5px;cursor:pointer}
.seq-cols{position:relative}
.seq-cols summary{list-style:none;min-height:28px;padding:0 10px}
.seq-cols summary::-webkit-details-marker{display:none}
.seq-cols-pop{position:absolute;right:0;top:calc(100% + 4px);z-index:1000;background:var(--su-surface);border:1px solid var(--su-line);border-radius:10px;box-shadow:0 8px 24px rgba(0,20,30,.14);padding:8px 12px;display:grid;gap:6px;min-width:170px}
.seq-cols-pop label{display:flex;gap:8px;align-items:center;font-size:13px;white-space:nowrap;cursor:pointer}
.su-dispatch .seq--table .seq-thead,.su-dispatch .seq--table .seq-list li.seq-trow{display:flex;align-items:center;gap:8px;padding:0 10px}
.su-dispatch .seq--table .seq-thead{min-height:30px;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--su-ink-soft);border-bottom:1px solid var(--su-line);background:var(--su-bg,#f6f7f8)}
.su-dispatch .seq--table .seq-list{flex:1 1 auto;min-height:0;max-height:none;overflow:auto;margin:0;padding:0;gap:0;display:block}
.su-dispatch .seq--table .seq-list li.seq-trow{min-height:34px;border:0;border-bottom:1px solid var(--su-line);border-radius:0;background:transparent;font-size:13px;cursor:pointer}
.su-dispatch .seq--table .seq-list li.seq-trow:hover,.su-dispatch .seq--table .seq-list li.seq-trow.hot{background:#effbf5}
.su-dispatch .seq--table .seq-list li.nopos{color:var(--su-ink-faint);cursor:default}
.su-dispatch .seq--table [class^="c-"]{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.su-dispatch .seq--table .c-n{flex:0 0 28px}
.su-dispatch .seq--table .c-addr{flex:1.3 1 0;font-weight:700}
.su-dispatch .seq--table .seq-thead .c-addr{font-weight:800}
.su-dispatch .seq--table .c-cust{flex:1 1 0}
.su-dispatch .seq--table .c-svc{flex:1.4 1 0;color:var(--su-ink-soft)}
.su-dispatch .seq--table .c-city{flex:0 0 118px;color:var(--su-ink-soft)}
.su-dispatch .seq--table .c-zip{flex:0 0 56px}
.su-dispatch .seq--table .c-min{flex:0 0 62px;text-align:right}
.su-dispatch .seq--table .c-bal{flex:0 0 84px;text-align:right}
.su-dispatch .seq--table .c-bal.owes{color:#b4560b;font-weight:700}
.su-dispatch .seq--table .c-last{flex:0 0 80px}
.su-dispatch .seq--table .c-x{flex:0 0 22px;text-align:right}
.su-dispatch .seq--table .seq-n{width:22px;height:22px;font-size:11.5px}
.su-dispatch .seq--table .seq-undo{border:0;background:none;color:var(--su-ink-faint);font-size:16px;line-height:1;cursor:pointer;padding:0}
.su-dispatch .seq--table .seq-undo:hover{color:var(--su-ink)}
.su-dispatch .seq--table .seq-map-wrap{min-height:0}
.su-dispatch .seq--table .seq-map{height:100%;min-height:0;border-radius:12px}
.seq--table.hide-cust .c-cust,.seq--table.hide-svc .c-svc,.seq--table.hide-city .c-city,.seq--table.hide-zip .c-zip,
.seq--table.hide-min .c-min,.seq--table.hide-bal .c-bal,.seq--table.hide-last .c-last{display:none}
@media (max-width: 900px) {
  .su-dispatch .seq--table{grid-template-columns:1fr;height:auto}
  .su-dispatch .seq--table .seq-map-wrap{order:-1;height:340px}
  .su-dispatch .seq--table .seq-tablewrap{max-height:70vh}
}