/* ============================================================
   CrewYield — field-ops profitability engine
   Design: warm paper, deep pine primary, tabular mono figures,
   sharp red/amber signal colors for over-budget / breakeven miss.
   ============================================================ */
:root{
  --paper:#f6f4ec; --paper-2:#efece1; --card:#fffdf7; --ink:#16201a;
  --ink-2:#3f4a42; --ink-3:#6b756c; --line:#ddd7c7; --line-2:#cbc4b0;
  --pine:#1f4131; --pine-2:#2c5a43; --pine-soft:#e7efe7; --pine-ink:#0f2419;
  --gold:#c8881f; --gold-soft:#f6ebd3; --gold-ink:#9a6710;
  --good:#2f7d4f; --good-soft:#e3f0e6;
  --warn:#c8881f; --warn-soft:#f6ebd3;
  --bad:#b23a2d; --bad-soft:#f6e1dc;
  --blue:#3a5a8c;
  --night:#0c1d14;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --ui:'Hanken Grotesk',system-ui,sans-serif;
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --r:10px; --r-sm:7px;
  --shadow:0 1px 0 rgba(22,32,26,.04),0 2px 8px rgba(22,32,26,.06);
  --shadow-lg:0 10px 40px rgba(22,32,26,.18);
}
*{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
/* body grows to content height (min one viewport) — NOT height:100%, which would
   cap the sticky app-bar's containing block to one screen and let it scroll away
   on tall pages (the app-bar must stay pinned the whole scroll). */
body{
  min-height:100%;
  font-family:var(--ui);background:var(--paper);color:var(--ink);
  font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(rgba(22,32,26,.025) 1px,transparent 1px);
  background-size:22px 22px;
}
:root{--appbar-h:46px}
/* ---- full-width company bar, pinned to the absolute top ---- */
.appbar{position:sticky;top:0;z-index:60;height:var(--appbar-h);display:flex;align-items:center;gap:14px;
  padding:0 20px;background:var(--card);color:var(--ink);border-bottom:1px solid var(--line);
  box-shadow:0 1px 3px rgba(22,32,26,.05)}
.appbar .ab-brand{font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:9px;color:var(--pine-ink);font-size:15px}
.appbar .ab-brand .logo{width:23px;height:23px;border-radius:var(--r-sm);background:var(--gold);color:var(--pine-ink);display:grid;place-items:center;font-size:13px;font-weight:800}
.appbar .ab-brand .ab-tag{font-weight:600;font-size:10.5px;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;margin-left:8px;padding-left:12px;border-left:1px solid var(--line)}
.appbar .ab-grp{display:flex;align-items:center;gap:7px;margin-left:auto}
.ab-hist{display:inline-grid;place-items:center;width:32px;height:32px;flex:none;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);color:var(--pine-ink);cursor:pointer;padding:0}
.ab-hist .ic{width:17px;height:17px}
.ab-hist:hover{background:var(--pine-soft)}
.appbar label.ab-l{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
.appbar select.ab-sel{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 10px;font-size:13px;font-weight:700;max-width:230px;cursor:pointer}
.appbar select.ab-sel:hover{border-color:var(--pine-2)}
.appbar .ab-co{color:var(--ink);font-size:13px;font-weight:700;max-width:230px;flex:0 0 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.appbar .ab-btn{background:var(--card);color:var(--pine-ink);border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 11px;font-size:12px;font-weight:700}
.appbar .ab-btn:hover{background:var(--paper);border-color:var(--pine-2)}
.appbar .ab-chip{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:3px 9px;border-radius:20px;background:var(--gold-soft);color:var(--gold-ink);border:1px solid var(--line-2)}
/* ---- data-completeness lock (shown instead of a silent number when source data is missing) ---- */
.req-lock{display:inline-flex;align-items:center;gap:4px;cursor:pointer;font-weight:800;font-size:13px;
  color:var(--gold-ink);background:var(--gold-soft);border:1px dashed var(--line-2);border-radius:var(--r-sm);padding:2px 9px;line-height:1.5;white-space:nowrap}
.req-lock:hover{background:#f6e9c6}
.kpi .req-lock{font-size:15px}
.qs-sel{padding:7px 8px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);font-size:13px;min-width:0}
.mono{font-family:var(--mono);font-feature-settings:"tnum" 1;letter-spacing:-.02em}
.num{font-family:var(--mono);font-feature-settings:"tnum" 1;letter-spacing:-.02em;white-space:nowrap}
h1,h2,h3,h4{font-weight:800;letter-spacing:-.02em;color:var(--pine-ink);line-height:1.1}
/* The Field Ledger — Fraunces display serif on titles + section + modal headers (surgical, never body) */
.topbar .ttl h1,.card-h h3{font-family:var(--display);font-weight:600;letter-spacing:-.005em}
a{color:var(--pine-2)}
button{font-family:var(--ui);cursor:pointer}

/* ---- shell ---- */
.app{display:grid;grid-template-columns:228px 1fr;min-height:calc(100vh - var(--appbar-h));align-items:start}
.side{background:var(--pine);color:#dfe9df;display:flex;flex-direction:column;position:sticky;top:var(--appbar-h);height:calc(100vh - var(--appbar-h));overflow:hidden}
.brand{padding:20px 18px 14px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.08)}
.brand .logo{width:30px;height:30px;border-radius:var(--r-sm);background:var(--gold);display:grid;place-items:center;color:var(--pine-ink);font-weight:800;font-size:18px;flex:none}
.brand b{font-size:17px;color:#fff;letter-spacing:-.03em;font-weight:800}
.brand small{display:block;color:#9fb6a4;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;margin-top:1px}
.nav{padding:14px 10px 12px;display:flex;flex-direction:column;gap:2px;flex:1;overflow-y:auto;min-height:0;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.nav::-webkit-scrollbar{width:6px}
.nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:3px}
.nav::-webkit-scrollbar-track{background:transparent}
.nav .lbl{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#86a08c;padding:12px 10px 5px}
.nav a{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--r-sm);color:#cfe0d2;text-decoration:none;font-weight:600;font-size:13.5px;transition:.12s}
.nav a .ic{width:17px;height:17px;flex:none;opacity:.85}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav a.active{background:var(--gold);color:var(--pine-ink)}
.nav a.active .ic{opacity:1}
/* daily operator bookends — set apart from the feature menu */
.nav .lbl.day-lbl{color:var(--gold);padding-top:4px}
.nav a.day{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);margin-bottom:4px}
.nav a.day .ic{color:var(--gold);opacity:1}
.nav a.day:hover{background:rgba(255,255,255,.1)}
.nav a.day.active{background:var(--gold);border-color:var(--gold);color:var(--pine-ink)}
.nav a.day.active .ic{color:var(--pine-ink)}
.nav-sep{height:1px;background:rgba(255,255,255,.14);margin:10px 8px 4px}
.side .foot{padding:12px 16px;border-top:1px solid rgba(255,255,255,.08);font-size:11px;color:#86a08c}
.side .foot b{color:#cfe0d2}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 26px;border-bottom:1px solid var(--line);background:var(--card);position:sticky;top:var(--appbar-h);z-index:30;box-shadow:0 4px 14px -8px rgba(22,32,26,.18)}
.topbar .ttl h1{font-size:25px}
.topbar .ttl p{color:var(--ink-3);font-size:12.5px;margin-top:2px}
.topbar .tools{display:flex;align-items:center;gap:10px}
.content{padding:22px 26px 60px;max-width:1320px;width:100%}

/* app-bar icon button (reset demo) */
.appbar .ab-ic{display:inline-grid;place-items:center;width:32px;height:32px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);color:var(--ink-2);cursor:pointer;padding:0;margin-left:4px}
.appbar .ab-ic:hover{border-color:var(--pine-2);color:var(--pine);background:var(--paper)}
.appbar .ab-ic .ic{width:16px;height:16px}

/* ===== Compact date-range control (topbar pill + popover) ===== */
.pctl{position:relative}
.pctl-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--card);border-radius:var(--r-sm);padding:7px 11px;font-family:var(--ui);font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;box-shadow:var(--shadow)}
.pctl-pill:hover{border-color:var(--pine-2)}
.pctl-pill > svg{flex:none;color:var(--pine)}
.pctl-pill .pctl-mode{color:var(--gold);font-weight:700}
.pctl-pill .pctl-range{font-family:var(--mono);font-size:12px;color:var(--ink-2);font-weight:600;white-space:nowrap}
.pctl-pop{position:absolute;top:calc(100% + 8px);right:0;min-width:250px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:12px;z-index:1100;display:none}
.pctl-pop.open{display:block}
.pctl-lbl{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:7px}
.pctl-seg{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.pctl-seg button{border:1px solid var(--line);background:var(--card);border-radius:7px;padding:7px 4px;font-family:var(--ui);font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer}
.pctl-seg button:hover{border-color:var(--pine-2)}
.pctl-seg button.on{background:var(--pine);border-color:var(--pine);color:#fff}
.pctl-nav{display:flex;align-items:center;gap:6px;margin-top:10px}
.pctl-step{width:30px;height:30px;flex:none;border:1px solid var(--line);background:var(--card);border-radius:7px;font-size:15px;line-height:1;color:var(--ink-2);cursor:pointer}
.pctl-step:hover{border-color:var(--pine-2);color:var(--pine)}
.pctl-today{flex:1;border:1px solid var(--line);background:var(--card);border-radius:7px;padding:7px;font-family:var(--ui);font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer}
.pctl-today:hover{border-color:var(--pine-2)}
.pctl-cur{margin-top:9px;text-align:center;font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--pine-ink)}
.pctl-cal{margin-top:10px;display:flex;justify-content:center}
/* theme the vendored Litepicker calendar to The Field Ledger */
.litepicker{--litepicker-container-months-color-bg:var(--card);--litepicker-container-months-box-shadow-color:transparent;
  --litepicker-day-color:var(--ink);--litepicker-day-color-hover:var(--pine);
  --litepicker-is-today-color:var(--gold);--litepicker-is-in-range-color:var(--pine-soft);
  --litepicker-is-start-color:#fff;--litepicker-is-start-color-bg:var(--pine);
  --litepicker-is-end-color:#fff;--litepicker-is-end-color-bg:var(--pine);
  --litepicker-month-header-color:var(--pine-ink);--litepicker-month-weekday-color:var(--ink-3);
  --litepicker-button-prev-month-color-hover:var(--pine);--litepicker-button-next-month-color-hover:var(--pine);
  font-family:var(--ui)!important}
.litepicker .container__months{border:1px solid var(--line);border-radius:10px}
@media(max-width:680px){.pctl-pop{right:auto;left:0}}

/* ---- buttons / inputs ---- */
.btn{border:1px solid var(--line-2);background:var(--card);color:var(--ink);padding:8px 14px;border-radius:var(--r-sm);font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:7px;transition:.12s}
.btn:hover{border-color:var(--ink-3);background:var(--card)}
.btn.primary{background:var(--pine);border-color:var(--pine);color:#fff}
.btn.primary:hover{background:var(--pine-2)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:var(--pine-ink)}
.btn.sm{padding:5px 10px;font-size:12px}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ink-2)}
.btn.ghost:hover{background:var(--paper-2)}
/* .seg → migrated to <sl-radio-group> segmented toggle (see css/shoelace-theme.css) */
label.fld{display:block;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin:0 0 5px}
input,select,textarea{font-family:var(--ui);font-size:13.5px;color:var(--ink);background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:9px 11px;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--pine-2);box-shadow:0 0 0 3px rgba(44,90,67,.12)}
/* Keyboard focus ring — every interactive element gets a visible indicator on keyboard
   nav (mouse focus stays quiet). Text fields keep their box-shadow above; this covers
   buttons, nav, chips, rows, links that had hover but no keyboard-focus state. */
a:focus-visible,button:focus-visible,.btn:focus-visible,[tabindex]:focus-visible,[role="button"]:focus-visible,summary:focus-visible,.runchip:focus-visible,.rd-stop:focus-visible,.sc-row:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* ---- searchable dropdowns (Tom Select) themed to match native inputs ---- */
.ts-wrapper{width:100%}
.ts-wrapper.single .ts-control,.ts-control{min-height:38px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--card);color:var(--ink);padding:5px 30px 5px 11px;font-size:13.5px;box-shadow:none;line-height:1.5}
.ts-wrapper.focus .ts-control{border-color:var(--pine-2);box-shadow:0 0 0 3px rgba(44,90,67,.12)}
.ts-wrapper.single.input-active .ts-control{background:var(--card)}
.ts-control,.ts-control *{cursor:pointer}
.ts-control>.item{background:none!important;border:0!important;color:var(--ink)!important;padding:0!important;margin:0!important;box-shadow:none!important}
.ts-control>input{font-family:var(--ui);font-size:13.5px;color:var(--ink);margin:0!important}
.ts-control>input::placeholder{color:var(--ink-3)}
.ts-wrapper.single .ts-control:after{border-color:var(--ink-3) transparent transparent transparent;right:13px}
.ts-dropdown{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-sm);box-shadow:var(--shadow-lg);margin-top:4px;z-index:150;font-size:13px;overflow:hidden}
.ts-dropdown .ts-dropdown-content{max-height:240px}
.ts-dropdown .option{padding:8px 11px;color:var(--ink)}
.ts-dropdown .option.active,.ts-dropdown .active{background:var(--paper-2);color:var(--ink)}
.ts-dropdown .create{padding:8px 11px;color:var(--pine);font-weight:600}
.ts-dropdown .no-results{padding:8px 11px;color:var(--ink-3)}
/* compact in the dispatch / schedule filter bar */
.filters .ts-wrapper{width:auto;min-width:150px}
.filters .ts-control{min-height:34px;padding:4px 28px 4px 10px;font-size:12.5px}
.row{display:flex;gap:12px}
.row>*{flex:1}
.muted{color:var(--ink-3)}

/* ---- cards ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.pad{padding:16px 20px}   /* in-card body wrapper — gives content breathing room from card edges */
.card.pad{padding:18px}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;border-bottom:1px solid var(--line)}
.card-h h3{font-size:14px;letter-spacing:-.01em}
.card-h .sub{font-size:11.5px;color:var(--ink-3);font-weight:500}
/* proposal composer — 2-pane (build form + live customer preview); stacks on narrow */
.compose-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
@media(max-width:980px){.compose-grid{grid-template-columns:1fr}}
.grid{display:grid;gap:14px}

/* KPI cards */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;position:relative;overflow:hidden}
.kpi .k-lbl{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.kpi .k-val{font-family:var(--display);font-size:30px;font-weight:600;letter-spacing:-.015em;margin-top:5px;color:var(--pine-ink);font-variant-numeric:tabular-nums;line-height:1.05}
.kpi .k-sub{font-size:11px;color:var(--ink-3);margin-top:3px}
.kpi .k-sub.up{color:var(--good)} .kpi .k-sub.down{color:var(--bad)}
.kpi.accent{background:linear-gradient(155deg,var(--pine),var(--pine-2));border-color:var(--pine)}
.kpi.accent .k-lbl{color:#a9c4b0} .kpi.accent .k-val{color:#fff} .kpi.accent .k-sub{color:#bcd4c2}

/* ===== The Field Ledger — night-pine scoreboard verdict band (dashboard hero) ===== */
.scoreboard{background:radial-gradient(120% 140% at 80% -20%,#16331f 0%,var(--pine-ink) 45%,var(--night) 100%);
  border-radius:14px;padding:20px 22px 22px;color:#eaf2ea;box-shadow:var(--shadow-lg);position:relative;overflow:hidden;margin-bottom:16px}
.scoreboard::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 1px,transparent 1px 64px)}
.sb-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:16px;position:relative;z-index:1}
.sb-head h2{font-family:var(--display);font-weight:500;font-size:20px;letter-spacing:.005em;color:#fff;line-height:1.15}
.sb-head .sb-date{font-family:var(--mono);font-size:12.5px;color:#9fc0a6;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.sb-grid{display:grid;gap:12px;position:relative;z-index:1;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.verdict{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);border-radius:var(--r);padding:14px 15px}
.verdict .v-crew{font-size:12px;font-weight:600;color:#cfe0d2;letter-spacing:.01em}
.verdict .v-sub{font-size:11px;color:#86a08c;margin-top:1px}
.verdict .v-amt{font-family:var(--display);font-weight:600;font-size:28px;letter-spacing:-.01em;margin:8px 0 4px;font-variant-numeric:tabular-nums;line-height:1}
.verdict .v-tag{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:3px 8px;border-radius:20px}
.verdict.short{border-color:rgba(178,58,45,.4)}
.verdict.short .v-amt{color:#ff8a78}
.verdict.short .v-tag{background:rgba(178,58,45,.22);color:#ffb3a6}
.verdict.cleared .v-amt{color:#7fd49a}
.verdict.cleared .v-tag{background:rgba(47,125,79,.25);color:#a7e7bd}
.verdict .v-bar{height:6px;border-radius:4px;background:rgba(255,255,255,.1);margin-top:11px;overflow:hidden}
.verdict .v-bar i{display:block;height:100%;border-radius:4px;width:0;transition:width .5s ease-out}
.verdict.short .v-bar i{background:linear-gradient(90deg,#b23a2d,#ff8a78)}
.verdict.cleared .v-bar i{background:linear-gradient(90deg,#2f7d4f,#7fd49a)}
@media(max-width:760px){.scoreboard{padding:16px 14px 18px}.sb-head h2{font-size:17px}.verdict .v-amt{font-size:25px}}

/* badges/pills → migrated to <sl-badge> (see css/shoelace-theme.css, data-kind) */
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.tag-rec{background:var(--pine-soft);color:var(--pine);border:1px solid #cfe0d2}
.tag-one{background:var(--gold-soft);color:var(--gold-ink);border:1px solid var(--line-2)}

/* ---- dispatch crew-lane board ---- */
.dispatch{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card)}
.disp-head{display:grid;border-bottom:2px solid var(--line-2)}
.disp-body{display:grid;position:relative}
.disp-timecol{border-right:1px solid var(--line);background:var(--paper-2)}
.disp-crew-h{padding:10px 12px;border-right:1px solid var(--line);border-left:4px solid var(--c,#999)}
.disp-crew-h .cn{font-weight:800;font-size:13px;color:var(--pine-ink)}
.disp-crew-h .cm{font-size:11px;color:var(--ink-3);margin-top:2px}
.disp-crew-h .be{font-family:var(--mono);font-size:11px;margin-top:5px;font-weight:600}
.disp-lane{border-right:1px solid var(--line);position:relative;min-height:520px;background-image:repeating-linear-gradient(var(--paper) 0 1px,transparent 1px 100%);background-size:100% calc(100%/12)}
.hourline{position:absolute;left:0;right:0;border-top:1px solid var(--line);font-size:0}
.timelabel{position:absolute;right:7px;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);transform:translateY(-6px)}
.visit{position:absolute;left:5px;right:5px;border-radius:7px;padding:6px 8px;color:#fff;overflow:hidden;border-left:3px solid rgba(0,0,0,.25);box-shadow:0 1px 3px rgba(0,0,0,.18);cursor:pointer;transition:.1s}
.visit:hover{filter:brightness(1.06);transform:translateY(-1px)}
.visit .vt{font-weight:700;font-size:12px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.visit .vs{font-size:10.5px;opacity:.92;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.visit .vfig{font-family:var(--mono);font-size:10.5px;opacity:.95;margin-top:3px;font-weight:500}
.visit.over{outline:2px solid #ffd2c8}
.visit.incomplete{opacity:.62;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.18) 0 6px,transparent 6px 12px)}
.vbadge{position:absolute;top:5px;right:6px;background:rgba(0,0,0,.28);border-radius:var(--r-sm);padding:1px 5px;font-size:9.5px;font-weight:700;font-family:var(--mono)}

/* ---- tables (tabulator overrides) ---- */
.tabulator{background:var(--card);border:none;font-family:var(--ui);font-size:13px;max-width:100%}
.tabulator .tabulator-header{background:transparent;border-bottom:1.5px solid var(--line-2);font-weight:700}
.tabulator .tabulator-col{background:transparent;border-right:none}
.tabulator .tabulator-col .tabulator-col-title{color:var(--ink-3);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;padding:2px 0}
.tabulator-row{border-bottom:1px solid var(--line)}
.tabulator-row.tabulator-row-even{background:transparent}
.tabulator-row:hover{background:var(--pine-soft)!important}
.tabulator .tabulator-cell{border-right:none;padding:8px 12px}
.tabulator .tabulator-footer{background:var(--paper-2);border-top:1.5px solid var(--line-2)}
.cell-num{font-family:var(--mono);font-feature-settings:"tnum" 1;letter-spacing:-.02em}
.profit-pos{color:var(--good);font-weight:600}
.profit-neg{color:var(--bad);font-weight:600}

/* scorecard rows */
.scorecard{display:flex;flex-direction:column;gap:12px}
.sc-row{display:grid;grid-template-columns:210px 1fr 150px;gap:18px;align-items:center;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);border-left:5px solid var(--c,#999)}
.sc-row.clear{box-shadow:inset 0 0 0 1px var(--good-soft)}
.sc-row.short{background:linear-gradient(90deg,var(--bad-soft),var(--card) 40%)}
.sc-name{font-weight:800;font-size:14px;color:var(--pine-ink)}
.sc-name .meta{font-weight:500;font-size:11px;color:var(--ink-3);margin-top:2px}
.sc-bar-wrap{position:relative}
.sc-bar-track{height:30px;background:var(--paper-2);border-radius:7px;position:relative;overflow:hidden;border:1px solid var(--line)}
.sc-bar-fill{position:absolute;top:0;left:0;bottom:0;border-radius:var(--r-sm)}
.sc-be-line{position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--ink);z-index:3}
.sc-be-line::after{content:'BE';position:absolute;top:-15px;left:-7px;font-family:var(--mono);font-size:9px;font-weight:700;color:var(--ink)}
.sc-bar-lbl{position:absolute;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:12px;font-weight:600;z-index:4;padding:0 8px}
.sc-fig{text-align:right}
.sc-fig .big{font-family:var(--mono);font-size:18px;font-weight:600;letter-spacing:-.03em}
.sc-fig .lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);font-weight:700}
/* phones: the fixed 210px/150px columns forced ~606px rows (page-wide horizontal scroll).
   Collapse to name+outcome on top, the made-vs-breakeven track full-width below. */
@media(max-width:760px){
  .sc-row{grid-template-columns:minmax(0,1fr) auto;gap:10px 14px;padding:14px}
  .sc-row .sc-bar-wrap{grid-column:1/-1;grid-row:2}
}
/* dashboard charts: side-by-side on desktop, stacked on phones (canvases were squeezed
   into half of an overflowing row) */
.chart2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.chart2>div{min-width:0}
@media(max-width:760px){.chart2{grid-template-columns:1fr}}

/* insight / callout */
.callout{display:flex;gap:12px;padding:15px 18px;border-radius:var(--r);font-size:13px;line-height:1.55;border:1px solid}
.callout.bad{background:var(--bad-soft);border-color:#e8c4bc}
.callout.good{background:var(--good-soft);border-color:#c6ddca}
.callout.info{background:var(--pine-soft);border-color:#cfe0d2}
.callout .ci{font-size:18px;flex:none;line-height:1.2}
.callout b{color:var(--pine-ink)}

/* filters bar */
.filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.filters .fl{display:flex;align-items:center;gap:6px}
.filters select{width:auto;min-width:130px;padding:7px 28px 7px 10px;font-size:12.5px}
.filters .fl span{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);font-weight:700}

/* Filter toolbar — shared compact control (Jobs / Repricing / To-do). Field Ledger: 7px controls,
   pine active-state, gold reserved for the page's primary CTA. Replaces the heavy "Filter" cards. */
.filterbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-bottom:14px;padding:9px 13px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.filterbar-lbl{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.filterbar .ff{display:inline-flex;align-items:center;gap:6px}
.filterbar .ff>span{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);font-weight:700}
.filterbar select,.filterbar .ts-wrapper{width:auto;min-width:124px;max-width:210px}
.filterbar select{padding:7px 30px 7px 11px;font-size:13px;border-radius:var(--r-sm)}
.filterbar .ts-wrapper.single .ts-control,.filterbar .ts-control{min-height:35px;border-radius:var(--r-sm);padding:5px 28px 5px 11px;font-size:13px}
/* active filter → pine, so what's filtering reads at a glance */
.filterbar .ff.on>select,.filterbar .ff.on .ts-control{background:var(--pine-soft);border-color:var(--pine);color:var(--pine-ink);font-weight:600}
.filterbar .ff.on .ts-control>.item{color:var(--pine-ink)!important;font-weight:600}
.filterbar .ff.on>span{color:var(--pine)}
.filterbar-clear{font-family:var(--ui);font-size:12px;font-weight:600;color:var(--pine);background:transparent;border:1px solid var(--line-2);border-radius:20px;padding:6px 14px;cursor:pointer;line-height:1}
.filterbar-clear:hover{background:var(--pine-soft);border-color:var(--pine)}
.filterbar-count{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--ink-3);white-space:nowrap}
.filterbar-count b{color:var(--ink);font-weight:600}
.filterbar.flush{background:none;border:0;padding:2px 0;margin-bottom:4px}
@media(max-width:640px){.filterbar-count{margin-left:0}.filterbar{padding:10px}}

/* legend */
.legend{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.legend .li{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2);font-weight:600}

/* modal — shell/header/close are now <sl-dialog> ::part (css/shoelace-theme.css).
   .modal-b/.modal-f remain: the body/footer wrappers U.modal slots into the dialog. */
.modal-b{padding:20px 22px;display:flex;flex-direction:column;gap:15px}
.modal-f{padding:15px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px;background:var(--paper-2);border-radius:0 0 14px 14px}

/* job editor page */
.jobform{max-width:900px}
.job-sec{margin-bottom:14px}
/* revamped job editor — 2-column build + sticky money panel */
.jobedit2col{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(258px,1fr);gap:22px;align-items:start}
.je-form{display:flex;flex-direction:column;gap:14px;min-width:0}
.je-form .job-sec{margin-bottom:0}
.je-aside{position:sticky;top:78px}
.je-panel{background:var(--pine-ink,#0f2419);color:#eaf2ea;border-radius:var(--r);padding:18px;box-shadow:0 18px 40px rgba(12,29,20,.28)}
.je-panel-h{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#9fc0a6;margin-bottom:12px}
.je-money{display:flex;align-items:baseline;justify-content:space-between;gap:10px;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:12px;margin-bottom:12px}
.je-money-l{font-size:12px;color:#9fc0a6}
.je-money-v{font-family:var(--display,'Fraunces',Georgia,serif);font-size:32px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.je-stats{display:flex;flex-direction:column;gap:10px}
.je-stat{display:flex;align-items:baseline;gap:8px}
.je-stat-l{flex:1;font-size:13px;color:#cfe0d2}
.je-stat-v{font-family:var(--mono,monospace);font-size:14px;font-weight:600;color:#eaf2ea}
.je-stat-s{font-size:11px;color:#9fc0a6;white-space:nowrap}
.je-note{margin-top:14px;font-size:11.5px;line-height:1.55;color:#9fc0a6}
.je-save{width:100%;margin-top:16px}
/* day-of-week chips */
.je-daychips{display:flex;flex-wrap:wrap;gap:6px}
.je-chip{padding:7px 13px;border:1px solid var(--line-2,#cbc4b0);border-radius:var(--r-sm);background:var(--card,#fff);color:var(--ink,#16201a);font-size:13px;font-weight:600;cursor:pointer}
.je-chip.on{background:var(--pine,#1f4131);border-color:var(--pine,#1f4131);color:#fff}
/* compact service rows */
.je-services{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.je-svc{border:1px solid var(--line);border-radius:10px;background:var(--card,#fff);padding:10px 12px}
.je-svc-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.je-svc-name{flex:1;min-width:120px;font-weight:600}
.je-mini{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--ink-3,#6b756c);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.je-mini input{font-weight:500;padding:6px 8px}
.je-more{border:0;background:none;color:var(--pine,#1f4131);font-weight:600;font-size:12.5px;cursor:pointer;padding:4px 6px;white-space:nowrap}
.je-x{border:0;background:none;color:var(--ink-3,#6b756c);cursor:pointer;font-size:14px;padding:4px 6px;line-height:1}
.je-x:hover{color:var(--bad,#b23a2d)}
.je-svc-more{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.je-checkprev summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--pine,#1f4131)}
.je-unsched{display:inline-block;margin-left:8px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--gold-ink);background:var(--gold-soft);border:1px solid var(--line-2);border-radius:var(--r);padding:1px 7px;vertical-align:middle}
@media(max-width:860px){.jobedit2col{grid-template-columns:1fr}.je-aside{position:static;order:-1}}
/* floating "unsaved changes" save popup (Schedule) */
#sched-savebar{position:fixed;left:50%;bottom:-90px;transform:translateX(-50%);z-index:90;display:flex;align-items:center;gap:16px;background:var(--card,#fff);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:12px 16px;opacity:0;transition:bottom .28s cubic-bezier(.2,.8,.2,1),opacity .2s;pointer-events:none}
#sched-savebar.show{bottom:22px;opacity:1;pointer-events:auto}
#sched-savebar .sb-msg{font-size:13.5px}
#sched-savebar .sb-actions{display:flex;gap:8px}
/* route-day board */
.rd-board{overflow-x:auto;padding-bottom:4px}
.rd-grid{display:grid;grid-template-columns:128px repeat(6,minmax(96px,1fr));gap:7px;min-width:700px}
.rd-cell{border:1px solid var(--line);border-radius:var(--r-sm);padding:8px;min-height:62px}
.rd-cell.rd-head{background:var(--paper-2);font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);min-height:auto;display:flex;align-items:center;justify-content:center;padding:7px}
.rd-cell.rd-crew{background:var(--paper-2);display:flex;flex-direction:column;justify-content:center}
.rd-grid .chk-chip{font-size:11px;padding:2px 7px}
/* weekly route plan — tappable customer stops + per-day load */
.rd-crew-sum{font-size:10.5px;color:var(--ink-3);margin-top:5px;font-family:var(--mono)}
.rd-day-head{display:flex;align-items:center;justify-content:space-between;margin:-2px 0 6px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3)}
.rd-stops{display:flex;flex-direction:column;gap:4px;max-height:300px;overflow-y:auto}
.rd-stop{display:flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid var(--line);border-radius:7px;background:var(--card);cursor:pointer;transition:background .12s,border-color .12s}
.rd-stop:hover{background:var(--pine-soft);border-color:var(--pine)}
.rd-stop-name{flex:1 1 auto;min-width:0;font-size:11.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-stop-min{flex:none;font-size:10px;color:var(--ink-3);font-family:var(--mono)}
.rd-stop-move{flex:none;opacity:0;font-size:12px;color:var(--pine);transition:opacity .12s}
.rd-stop:hover .rd-stop-move{opacity:1}
.rd-load{margin-top:8px;padding-top:7px;border-top:1px solid var(--line)}
.rd-empty{font-size:11px;color:var(--ink-3);padding:6px 2px;font-style:italic}
/* repricing page */
.rp-head,.rp-row{display:grid;grid-template-columns:1.4fr 150px 84px 130px 160px 92px;gap:10px;align-items:center;padding:9px 8px;border-top:1px solid var(--line);border-radius:7px}
/* phones + small tablets: the 6-column worklist is a ledger table — keep the columns and let it
   scroll sideways INSIDE its card instead of widening the whole page (was 796px on a 375 phone). */
@media(max-width:820px){
  .pad:has(.rp-row){overflow-x:auto;-webkit-overflow-scrolling:touch}
  .rp-head,.rp-row{min-width:690px}
}
.rp-head{border-top:0;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);font-weight:700;padding-top:2px;padding-bottom:7px}
.rp-row{cursor:pointer;transition:background .1s}
.rp-row:hover{background:var(--pine-soft)}
.rp-head>*:last-child,.rp-row>*:last-child{text-align:right}
.pay-grid{display:grid;grid-template-columns:1.6fr 90px 90px 110px 100px 110px;gap:10px;align-items:center}
.att-row{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 11px;cursor:pointer}
.att-row.out{background:#fbeeeb;border-color:#eccdc7}
.att-row input{width:auto}
.ex-row{display:grid;grid-template-columns:1fr 120px minmax(220px,auto);gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--line)}
.ex-row:first-child{border-top:0}
@media(max-width:680px){.ex-row{grid-template-columns:1fr auto}.ex-row>div:nth-child(3){grid-column:1/-1;justify-content:flex-start}}
.chk-chip.miss{background:#fbecec;border-color:#f3d2d2}
.score-chip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:var(--r-sm);padding:3px 9px;font-size:12px;background:var(--card)}
.score-chip.risk{background:#fbecec;border-color:#f3d2d2}
.score-chip.good{background:#e3efe7;border-color:#cfe3d6}
.score-chip.untracked{opacity:.6;font-style:italic}
/* close-out page */
.co-summary{display:flex;gap:34px;align-items:center;flex-wrap:wrap}
.co-stat .n{font-size:23px;font-weight:800;display:block;line-height:1.05}
.co-stat .l{font-size:10.5px;color:var(--ink-3,#789);text-transform:uppercase;letter-spacing:.04em}
.spill-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.spill-opt{border:1px solid var(--line);border-radius:10px;padding:12px 14px;cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s}
.spill-opt:hover{border-color:var(--ink-3,#789)}
.spill-opt.on{border-color:var(--pine,#2c5a43);box-shadow:inset 0 0 0 1px var(--pine,#2c5a43);background:#f3f7f4}
.spill-opt .t{font-weight:700;font-size:13px}
.spill-opt .d{font-size:11.5px;color:var(--ink-3,#789);margin-top:4px;line-height:1.45}
.co-row{display:grid;grid-template-columns:1fr 250px 210px;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
/* run-order rows reuse .co-row but their children are [#] [content] [⋯] — NOT the close-out
   3-col money grid, which left the number alone in a wide 1fr column with a big empty gap. */
.co-row.runrow{grid-template-columns:auto 1fr auto;gap:12px;align-items:start;padding:15px 10px}
.co-row:first-child{border-top:0}
.co-row-pick{grid-template-columns:22px 1fr 220px 200px;gap:12px}
.co-row-pick>input[type=checkbox]{justify-self:center}
.co-selall{display:inline-flex;align-items:center;gap:7px;padding:2px 0 10px;cursor:pointer}
.co-group{margin-top:14px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.co-group:first-child{margin-top:4px}
.co-group-h{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;background:var(--paper-2,#f3f1ea);padding:9px 14px;border-bottom:1px solid var(--line)}
.co-group .co-row{padding:11px 14px}
/* phones: 1fr/250px/210px close-out columns forced ~569px page width — stack them */
@media(max-width:760px){.co-row{grid-template-columns:1fr;gap:8px}}

/* ===== Schedule run view — the three truths (booked / proposed / overdue) ===== */
.runchips{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 4px}
.runchip{border:1px solid var(--line);border-radius:999px;background:var(--card);padding:4px 11px;font-size:11.5px;font-weight:700;color:var(--ink-2);cursor:pointer;letter-spacing:.01em}
.runchip b{font-family:var(--mono);margin-left:2px}
.runchip.k-booked{border-color:var(--pine);color:var(--pine)}
.runchip.k-forecast{border-style:dashed}
.runchip.k-overdue{border-color:var(--bad);color:var(--bad);background:var(--bad-soft)}
.runchip.on{background:var(--pine);border-color:var(--pine);color:#fff}
.runchip.k-overdue.on{background:var(--bad);border-color:var(--bad);color:#fff}
.runtag{flex:none;font-size:9.5px;font-weight:800;letter-spacing:.06em;border-radius:var(--r-sm);padding:2px 6px;white-space:nowrap}
.runtag.k-booked{background:var(--pine);color:#fff}
.runtag.k-forecast{border:1px dashed var(--line-2);color:var(--ink-3);background:var(--paper)}
.runtag.k-overdue{background:var(--bad);color:#fff}

/* job-deletion guardrail modal (approved Variant A: ledger band + option cards + demoted Erase) */
.jdel-band{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:4px 0 14px}
.jdel-s{text-align:center}
.jdel-v{font-family:'Fraunces',serif;font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.jdel-v.money{color:var(--pine)}
.jdel-v.owed{color:var(--bad)}
.jdel-l{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-top:2px}
.jdel-opt{display:flex;gap:12px;border:1.5px solid var(--line);border-radius:10px;padding:13px 15px;margin-bottom:9px;cursor:pointer;align-items:flex-start;background:var(--card)}
.jdel-opt.rec{border-color:var(--pine)}
.jdel-opt.sel{border-color:var(--gold);box-shadow:0 0 0 1.5px var(--gold);background:var(--gold-soft)}
.jdel-opt:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.jdel-r{width:18px;height:18px;border-radius:50%;border:2px solid var(--line-2);flex:none;margin-top:1px;display:grid;place-items:center;background:var(--card)}
.jdel-opt.sel .jdel-r{border-color:var(--gold)}
.jdel-opt.sel .jdel-r::after{content:'';width:9px;height:9px;border-radius:50%;background:var(--gold)}
.jdel-opt b{font-size:14px}
.jdel-d{font-size:12px;color:var(--ink-3);margin-top:2px}
.jdel-erase{font-size:12px;color:var(--bad);margin:4px 2px 0;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.jdel-erase a{color:var(--bad);font-weight:600;padding:12px 4px;display:inline-block}
.jdel-note{font-size:11.5px;color:var(--ink-3);margin-top:10px;border-top:1px solid var(--line);padding-top:9px}
@media (max-width:760px){ .jdel-band{grid-template-columns:1fr 1fr;row-gap:12px} }

/* Reconcile — "how it works" 3-step flow (owner mental model: Pull → Match → Post) */
.recon-how{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin:0 0 14px;box-shadow:var(--shadow)}
.recon-how-lead{font-size:13.5px;line-height:1.5;color:var(--ink-2);margin:0 0 14px}
.recon-how-lead b{color:var(--ink)}
.recon-steps{display:grid;grid-template-columns:1fr 26px 1fr 26px 1fr;align-items:start;gap:0}
.recon-step{display:flex;flex-direction:column;gap:3px;padding:0 6px}
.recon-step .n{display:inline-flex;align-items:center;justify-content:center;width:27px;height:27px;border-radius:50%;background:var(--pine);color:#fff;font-family:var(--display,'Fraunces',serif);font-weight:600;font-size:15px;margin-bottom:5px}
.recon-step h5{margin:0;font-size:13.5px;font-weight:700;color:var(--ink)}
.recon-step p{margin:2px 0 0;font-size:12px;line-height:1.45;color:var(--ink-3)}
.recon-step .safe{margin-top:5px;font-size:11px;font-weight:700;color:var(--pine-2,var(--pine))}
.recon-arrow{display:flex;align-items:center;justify-content:center;color:var(--line-2);font-size:17px;padding-top:3px}
@media (max-width:760px){
  .recon-steps{grid-template-columns:1fr}
  .recon-arrow{display:none}
  .recon-step{padding:11px 0;border-top:1px solid var(--line)}
  .recon-step:first-child{border-top:0;padding-top:2px}
}
/* chip spotlight: dim the other states in place — drive order never reshuffles */
.card[data-f="booked"] .runrow:not([data-kind="booked"]),
.card[data-f="forecast"] .runrow:not([data-kind="forecast"]),
.card[data-f="overdue"] .runrow:not([data-kind="overdue"]){opacity:.22}
/* calendar: per-day approve affordance (month grid, hover reveal) */
.fc-approve{display:none;border:1px solid var(--gold);background:var(--gold-soft);color:var(--gold-ink);border-radius:var(--r-sm);font-size:10px;font-weight:800;padding:1px 6px;cursor:pointer;margin-left:4px}
.fc-daygrid-day:hover .fc-approve{display:inline-block}
.co-group .co-row:first-child{border-top:0}
.co-group-h input[type=date]{width:auto}
.co-move{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.co-to{font-size:13px;white-space:nowrap}
/* time-logging — collapsible job cards (compact by default) */
.tl-card{border:1px solid var(--line);border-radius:10px;margin-top:8px;background:var(--card)}
.tl-card>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:9px 12px}
.tl-card>summary::-webkit-details-marker{display:none}
.tl-card>summary:hover{background:var(--paper-2,#f3f1ea)}
.tl-card[open]>summary{border-bottom:1px solid var(--line);border-radius:10px 10px 0 0}
.tl-caret{color:var(--ink-3,#789);font-size:11px;transition:transform .15s;flex:none}
.tl-card[open] .tl-caret{transform:rotate(90deg)}
.tl-total{font-weight:600}
.tl-expand{padding:11px 12px}
/* time-logging rows (legacy/standalone) */
.tl-row{padding:11px 4px;border-top:1px solid var(--line)}
.tl-row:first-of-type{border-top:0}
.tl-members{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:4px}
.tl-member{display:flex;align-items:center;gap:8px;background:var(--paper-2,#f3f1ea);border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 10px}
.tl-name{font-size:12.5px;font-weight:600;min-width:96px}
.tl-lbl{display:flex;align-items:center;gap:4px;font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-3,#789)}
.tl-num{width:62px;padding:4px 6px}
.tl-abs{display:flex;align-items:center;gap:4px;font-size:11.5px}
.tl-abs input{width:auto}
/* sticky Apply & lock bar (mirrors the schedule save bar) */
#co-applybar{position:fixed;left:50%;bottom:-90px;transform:translateX(-50%);z-index:90;display:flex;align-items:center;gap:16px;background:var(--card,#fff);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:12px 16px;opacity:0;transition:bottom .28s cubic-bezier(.2,.8,.2,1),opacity .2s;pointer-events:none}
#co-applybar.show{bottom:22px;opacity:1;pointer-events:auto}
#co-applybar .sb-msg{font-size:13.5px}
#co-applybar .sb-actions{display:flex;gap:8px}
.wx-row{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.wx-day{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 8px;text-align:center}
.wx-day .wd{font-weight:700;font-size:12px;margin-bottom:7px}
/* schedule hover tooltip */
#sched-tip{position:fixed;z-index:120;width:250px;background:var(--card,#fff);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-lg);padding:10px 12px;font-size:12.5px;opacity:0;visibility:hidden;transition:opacity .12s;pointer-events:none}
#sched-tip.show{opacity:1;visibility:visible}
#sched-tip .tip-t{font-weight:800;font-size:13.5px;margin-bottom:4px}
#sched-tip .tip-r{color:var(--ink-2,#456);padding:1px 0}
#sched-tip .tip-svc{margin-top:4px;color:var(--ink-3,#789);font-style:italic}
#sched-tip .tip-foot{display:flex;align-items:center;justify-content:space-between;margin-top:7px;padding-top:6px;border-top:1px solid var(--line)}
#sched-tip .tip-status{font-size:11px;font-weight:700;padding:2px 7px;border-radius:10px}
#sched-tip .tip-status.sched{background:#eef0f3;color:#556}
#sched-tip .tip-status.done{background:#e3efe7;color:var(--pine,#2c5a43)}
#sched-tip .tip-hint{font-size:11px;color:var(--ink-3,#9aa)}
/* job form sections + line-item cards + checklist */
.form-sec{padding:14px 0;border-top:1px solid var(--line)}
.form-sec:first-child{border-top:0;padding-top:2px}
.sec-t{margin:0 0 12px;font-size:13px;font-weight:800;letter-spacing:.02em}
.li-card{border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:10px;background:var(--card,#fff)}
.li-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.li-grid .fld{margin:0}
.li-checks{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.chk-chips{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 8px}
.chk-chip{display:inline-flex;align-items:center;gap:6px;background:#eef3ef;border:1px solid var(--line);border-radius:14px;padding:3px 6px 3px 10px;font-size:12px}
.chk-chip button{border:0;background:#d9e3dd;color:var(--ink-2,#456);border-radius:50%;width:16px;height:16px;line-height:1;font-size:10px;cursor:pointer;padding:0}
.chk-chip button:hover{background:var(--bad);color:#fff}
.chk-preview{display:flex;flex-direction:column;gap:10px}
.chk-group{border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px}
.chk-h{font-weight:700;font-size:12px;margin-bottom:4px;display:flex;align-items:center}
.chk-li{font-size:12.5px;color:var(--ink-2,#456);padding:2px 0 2px 14px;position:relative}
.chk-li:before{content:'✓';position:absolute;left:0;color:var(--pine,#2c5a43);font-size:11px}
.li-table{width:100%;border-collapse:collapse;font-size:13px}
.li-table th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);font-weight:700;padding:0 8px 6px}
.li-table td{padding:4px 8px}
.li-table input,.li-table select{padding:7px 9px;font-size:13px}
.roster-grid{display:grid;grid-template-columns:1fr 90px 90px;gap:8px;align-items:center}
.roster-grid .rh{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);font-weight:700}
.chk{display:flex;align-items:center;gap:8px;font-size:13px}
.chk input{width:auto}

/* misc */
.section-t{display:flex;align-items:center;justify-content:space-between;margin:6px 0 12px}
.section-t h2{font-size:16px}
.section-t .hint{font-size:12px;color:var(--ink-3)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:760px){.split{grid-template-columns:1fr}}
.split-3{display:grid;grid-template-columns:1.4fr 1fr;gap:14px}
.spacer{height:18px}
.flexbtw{display:flex;align-items:center;justify-content:space-between;gap:12px}
.empty{padding:40px;text-align:center;color:var(--ink-3)}
.chip{font-family:var(--mono);font-size:11px;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:2px 7px;font-weight:600}
hr.soft{border:0;border-top:1px solid var(--line);margin:4px 0}
.help{font-size:11.5px;color:var(--ink-3);line-height:1.5}
/* .toast → migrated to <sl-alert> toast (see css/shoelace-theme.css) */

/* fullcalendar theme */
.fc{--fc-border-color:var(--line);--fc-today-bg-color:var(--pine-soft);font-family:var(--ui)}
.fc .fc-toolbar-title{font-size:16px;font-weight:800;color:var(--pine-ink)}
.fc .fc-button{background:var(--card);border:1px solid var(--line-2);color:var(--ink-2);font-weight:600;text-transform:capitalize;font-size:12.5px;box-shadow:none;padding:6px 11px}
.fc .fc-button-primary:not(:disabled).fc-button-active,.fc .fc-button-primary:hover{background:var(--pine);border-color:var(--pine);color:#fff}
.fc .fc-col-header-cell-cushion{color:var(--ink-2);font-weight:700;font-size:12px;padding:8px}
.fc .fc-timegrid-slot-label-cushion,.fc .fc-list-day-text{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.fc-event{border:none;border-radius:var(--r-sm);font-size:11.5px;padding:1px 4px;cursor:pointer}
.fc-event .fc-event-title{font-weight:700}
.fc-event-over{box-shadow:0 0 0 2px #ffd2c8}
.fc-event-moved{box-shadow:0 0 0 2px var(--gold,#b06a1a);outline:2px dashed var(--gold,#b06a1a);outline-offset:1px}

@media(max-width:1120px){.kpis{grid-template-columns:repeat(3,1fr)}.app{grid-template-columns:1fr;grid-template-rows:auto 1fr}.side{position:relative;top:0;height:auto;flex-direction:row;align-items:center;overflow:visible}.nav{flex-direction:row;flex-wrap:wrap;row-gap:4px;padding:8px 10px}.nav .lbl{display:none}.nav-sep{display:none}.nav a{font-size:12.5px;padding:7px 9px;gap:7px}.nav a.day{margin-bottom:0}.side .foot{display:none}}
@media(max-width:680px){.appbar .ab-tag{display:none}.appbar{padding:0 12px;gap:8px}.appbar .ab-grp{gap:5px}.appbar label.ab-l{display:none}.appbar select.ab-sel{max-width:140px;font-size:12px}.appbar .ab-co{max-width:130px;font-size:12px}.kpis{grid-template-columns:repeat(2,1fr)}}
/* <480px: drop the redundant company name (shown on the page + side foot) so the right-side
   actions (Import / Sign out) never clip off the edge. */
@media(max-width:480px){.appbar .ab-co{display:none}.appbar{gap:6px}}

/* ---- additions: help affordance, ledger, costing, close-out ---- */
.help-q{width:16px;height:16px;min-width:16px;border-radius:50%;border:1px solid var(--line-2);background:var(--card);color:var(--ink-3);font-size:10px;font-weight:800;line-height:1;display:inline-grid;place-items:center;cursor:pointer;margin-left:6px;vertical-align:middle;padding:0}
.help-q:hover{background:var(--pine);color:#fff;border-color:var(--pine)}
.kpi .k-lbl{display:flex;align-items:center}
.reason-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.toggle-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cost-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.acc-pos{color:var(--good)} .acc-neg{color:var(--bad)}
.mini-act{display:flex;gap:6px;justify-content:flex-end}
.led-row{display:grid;grid-template-columns:1fr 110px 70px 90px;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}
.led-row .led-name{font-weight:600}
.led-off{opacity:.5}
.cap-bar{height:8px;border-radius:var(--r-sm);background:var(--paper-2);overflow:hidden;border:1px solid var(--line)}
.cap-fill{height:100%;background:var(--pine-2)}

/* ============ ADDITIONS: help, services, scheduler, tom-select ============ */
.help-q{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;border:1px solid var(--line-2);background:var(--card);color:var(--ink-3);font-size:10px;font-weight:800;line-height:1;margin-left:5px;padding:0;vertical-align:middle;cursor:help}
.help-q:hover{background:var(--pine);color:#fff;border-color:var(--pine)}
.kpi .k-lbl .help-q{border-color:rgba(0,0,0,.12)}
.kpi.accent .k-lbl .help-q{border-color:rgba(255,255,255,.3);color:#cfe0d2;background:transparent}

/* row edit affordance */
.rec-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.rec-row:first-of-type{border-top:none}
.rec-row .rec-main{min-width:0}
.rec-row .rec-amt{font-family:var(--mono);font-weight:600}
.row-actions{display:flex;gap:6px;flex:none}
.btn.icon{padding:5px 9px;font-size:12px}
.toggle{position:relative;width:38px;height:22px;border-radius:999px;background:var(--line-2);border:none;cursor:pointer;transition:.15s;flex:none}
.toggle.on{background:var(--good)}
.toggle::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--card);transition:.15s}
.toggle.on::after{left:18px}

/* scheduler / promises */
.visit.atrisk{outline:2px dashed var(--warn)}
.promise-strip{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fc-event-bumped{opacity:.62}
.fc-event-atrisk{box-shadow:0 0 0 2px var(--warn)}
/* projected (cadence-generated) visits — hatched ghost, clearly "planned, not booked" */
.fc-event-projected{background-image:repeating-linear-gradient(45deg,rgba(31,65,49,.10) 0 5px,rgba(31,65,49,0) 5px 10px)!important;border-style:dashed!important;border-width:1.5px!important;opacity:.92}
.fc-event-projected .fc-event-title,.fc-event-projected .fc-event-time{color:#27402f}
/* Phase 3 — past-due (catch-up) treatment overrides both bumped and projected styling. */
.fc-event-pastdue{box-shadow:0 0 0 2px var(--bad)!important;border-color:var(--bad)!important;opacity:1!important;font-weight:600}
.fc-event-pastdue .fc-event-title{color:var(--bad)!important}
.pastdue-banner{display:flex;align-items:center;gap:12px}
.pastdue-banner .btn.sm{flex:none;background:var(--card);border:1px solid var(--bad);color:var(--bad);font-weight:700}
.pastdue-banner .btn.sm:hover{background:var(--bad-soft)}

/* tom-select theme to match field-ops look */
.ts-wrapper{margin:0}
.ts-control{font-family:var(--ui);font-size:13.5px;border:1px solid var(--line-2)!important;border-radius:var(--r-sm)!important;background:var(--card)!important;padding:7px 10px!important;min-height:40px;box-shadow:none!important}
.ts-control.focus{border-color:var(--pine-2)!important;box-shadow:0 0 0 3px rgba(44,90,67,.12)!important}
.ts-dropdown{font-family:var(--ui);border:1px solid var(--line-2);border-radius:var(--r-sm);box-shadow:var(--shadow-lg);font-size:13.5px}
.ts-dropdown .active{background:var(--pine-soft);color:var(--pine-ink)}
.ts-dropdown .create{color:var(--pine-2);font-weight:600}
.ts-dropdown .optgroup-header{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);font-weight:700}
/* Single-select chosen value reads as clean text, not a cramped pill — one consistent
   treatment app-wide (was a pine-soft chip with no padding, hugging the text). The
   dropdown active row keeps its padded highlight; the active-filter affordance on
   .filterbar .ff.on .ts-control is unaffected. */
.ts-control .item{background:none!important;color:var(--ink)!important;border:0!important;border-radius:0!important;padding:0!important;margin:0!important;box-shadow:none!important}

/* tippy */
.tippy-box{background:var(--pine-ink);font-family:var(--ui);font-size:12px;border-radius:var(--r-sm)}
.tippy-arrow{color:var(--pine-ink)}

.rt-ghost{opacity:.35;background:#eef6ef}
.rt-drag:active{cursor:grabbing}

.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:auto;background:var(--bad);color:#fff;border-radius:var(--r-sm);font-size:10.5px;font-weight:700;line-height:1}

/* ===== Phase 2 — Start Day daily-plan lanes ===== */
.startday-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:6px 0 16px}
.startday-head h2{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.005em;color:var(--pine-ink)}
.startday-head .hint{font-size:13px;color:var(--ink-3);margin-top:2px}
.btn.primary.lg{padding:11px 18px;font-size:14px;font-weight:700;background:var(--gold);color:#23170a;border:1px solid var(--gold);border-radius:var(--r-sm);cursor:pointer}
.btn.primary.lg:hover{filter:brightness(.97)}
.lanes{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;margin-bottom:18px}
.lane{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--lane-c,var(--pine));border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow)}
.lane-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px}
.lane-head b{font-family:var(--display);font-size:15px;color:var(--pine-ink)}
.lane-count{font-size:12px;color:var(--ink-3);font-weight:500}
.lane-meta{font-size:11.5px;color:var(--ink-3);text-align:right;font-family:var(--mono)}
.lane-bar{height:5px;background:var(--paper-2);border-radius:4px;overflow:hidden;margin-bottom:10px}
.lane-bar-fill{height:100%;border-radius:4px;transition:width .3s}
.lane-empty{color:var(--ink-3);font-style:italic;padding:8px 0;font-size:13px}
.lane .dot{display:inline-block;width:9px;height:9px;border-radius:50%;vertical-align:middle;margin-right:2px}
.stop{display:grid;grid-template-columns:24px 64px 1fr auto;gap:10px;align-items:center;padding:9px 8px;border-radius:7px;border:1px solid transparent;font-size:13px}
.stop:hover{background:var(--paper);border-color:var(--line)}
.stop.past-due{background:linear-gradient(90deg,var(--bad-soft),var(--card) 70%);border-color:#e8c4bc}
.stop-n{font-family:var(--mono);font-weight:600;color:var(--ink-3);text-align:right;font-size:11px}
.stop-time{font-family:var(--mono);font-size:11px;line-height:1.2;color:var(--ink-2)}
.stop-time b{color:var(--pine-ink);font-size:12px}
.stop-body{min-width:0}
.stop-title{font-weight:600;color:var(--pine-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stop-sub{font-size:11px;color:var(--ink-3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.startday-att{margin-top:6px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.startday-att > summary{cursor:pointer;padding:12px 16px;font-size:13px;background:var(--paper);border-bottom:1px solid var(--line);user-select:none}
.startday-att > summary:hover{background:var(--paper-2)}
.startday-att[open] > summary{border-bottom:1px solid var(--line)}
.startday-att .pad{padding:14px 16px}
@media(max-width:760px){
  .startday-head{flex-direction:column;align-items:flex-start}
  .btn.primary.lg{width:100%;padding:13px}
  .lanes{grid-template-columns:1fr}
  .stop{grid-template-columns:22px 56px 1fr auto;gap:8px;padding:10px 6px;font-size:12.5px}
  .stop-time{font-size:10.5px}
}

/* ===== mobile field mode (phones ≤760px): drawer nav + bottom tab bar ===== */
.ab-burger{display:none}
.mobnav{display:none}
.side-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:90;display:none}
@media(max-width:760px){
  .app{grid-template-columns:1fr}
  /* the appbar must wrap so the search row (.srch-wrap order:5 below) can drop to its own
     line — without flex-wrap it pushed every page to ~426px wide on a 375px phone */
  .appbar{flex-wrap:wrap;height:auto;min-height:var(--appbar-h);padding:6px 12px;row-gap:6px}
  .side{position:fixed;top:0;left:0;height:100dvh;width:248px;z-index:95;flex-direction:column;align-items:stretch;overflow-y:auto;transform:translateX(-100%);transition:transform .22s ease;box-shadow:2px 0 20px rgba(0,0,0,.28)}
  .side.open{transform:translateX(0)}
  .nav{flex-direction:column;flex-wrap:nowrap;padding:14px 10px;gap:2px}
  .nav .lbl{display:block}.nav-sep{display:block}.side .foot{display:block}
  .ab-burger{display:inline-grid;place-items:center;width:34px;height:34px;flex:none;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);color:var(--pine-ink);cursor:pointer;padding:0}
  .ab-burger .ic{width:19px;height:19px;opacity:1}
  .mobnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--pine);border-top:1px solid rgba(255,255,255,.13)}
  .mobnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px calc(8px + env(safe-area-inset-bottom));color:#b8ccbc;text-decoration:none;font-size:10px;font-weight:700}
  .mobnav a .ic{width:21px;height:21px;opacity:.9}
  .mobnav a.active{color:var(--gold)}.mobnav a.active .ic{opacity:1}
  .main{padding-bottom:64px}
  .topbar{flex-wrap:wrap;padding:12px 14px;gap:10px}
  .topbar .ttl{flex:1 1 auto;min-width:0}
  .srch-wrap{order:5;flex-basis:100%;max-width:100%;margin:8px 0 0}
}