/* A&O Tree Service: mobile-first app styling. */
:root {
  /* v2: the chrome goes dark and the content stays light. A field app gets
     used outdoors in daylight, so a full dark mode would be unreadable, but
     dark chrome gives it a distinct identity and makes the content pop. */
  --green: #0B3327;      /* brand forest, now near-black for chrome */
  --green-2: #14543C;
  --green-3: #1F7A54;
  --lime: #A8E04E;
  --lime-soft: #EAF7D2;
  --gold: #E8AE2B;
  --ink: #10211A;
  --muted: #66766C;
  --bg: #F4F6F1;
  --card: #ffffff;
  --line: #E8EDE6;
  --danger: #C0463E;

  /* dark chrome surfaces */
  --chrome: #0B3327;
  --chrome-2: #0F4434;
  --on-chrome: #EAF4E7;
  --on-chrome-dim: rgba(234, 244, 231, .58);

  /* one shadow scale instead of hard borders everywhere */
  --sh-1: 0 1px 2px rgba(11, 51, 39, .05), 0 2px 8px rgba(11, 51, 39, .04);
  --sh-2: 0 2px 6px rgba(11, 51, 39, .07), 0 8px 24px rgba(11, 51, 39, .07);
  --radius: 18px;
  --tap: 46px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tabbar-h: 62px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
/* Kill iOS double-tap-to-zoom (and the tap delay) while keeping scrolling. */
html { touch-action: manipulation; }
body {
  touch-action: manipulation;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
h1, h2, h3, p { margin: 0; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ---- Icons (inline line-art, inherit text color) ---- */
.ic { flex: 0 0 auto; display: inline-block; vertical-align: -.15em; }
/* Icon + label pairs that live inside otherwise text-based blocks. */
.note-inline { display: inline-flex; align-items: center; gap: 6px; }
/* Small meta chips (icon + value), used in job/stop meta rows. */
.meta-items { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; }
.mi { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.mi .ic { opacity: .8; }

/* ---- Top bar ---- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--safe-top) + 12px) 16px 12px;
  background: var(--chrome);
  border-bottom: 0;
}
/* the mark is dark green artwork, so knock it to white for the dark bar */
.topbar-logo { height: 28px; width: auto; filter: brightness(0) invert(1); opacity: .96; }
.topbar-version { position: absolute; right: 12px; bottom: 8px; font-size: 10px; color: var(--on-chrome); opacity: .35; letter-spacing: .3px; pointer-events: none; }

/* ---- Main scroll area ---- */
#app.view {
  display: block;
  padding: 14px 14px calc(var(--tabbar-h) + var(--safe-bottom) + 22px);
  max-width: 640px; margin: 0 auto;
  min-height: calc(100vh - 52px);
}
.view-head { padding: 6px 2px 12px; }
.view-head h1 { font-size: 30px; font-weight: 800; letter-spacing: -.8px; }
.view-head p { color: var(--muted); font-size: 14px; margin-top: 3px; }

/* ---- Cards & sections ---- */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px; margin-bottom: 12px;
}
.card-title { font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--green-2); margin-bottom: 10px; font-weight: 700; }
.sub-box { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }

/* ---- Form controls ---- */
.field { display: block; margin-bottom: 12px; }
.field:last-child { margin-bottom: 0; }
.field-label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.field-hint { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.row { display: flex; gap: 10px; }
.row > .field { flex: 1; }

.input {
  width: 100%; min-height: var(--tap);
  padding: 11px 12px; font-size: 16px; /* 16px stops iOS zoom */
  border: 1px solid var(--line); border-radius: 12px;
  background: #fff; color: var(--ink); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus { border-color: var(--green-3); box-shadow: 0 0 0 3px rgba(47,125,71,.14); }
textarea.input { resize: vertical; line-height: 1.4; }
.search { margin-bottom: 12px; }
.money-wrap { position: relative; }
.money-prefix { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 16px; }
.money-wrap .input, .money-wrap .input-amount { padding-left: 26px; }

/* ---- Chips (multi-select) ---- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 9px 13px; border-radius: 999px; font-size: 14px; font-weight: 600;
  border: 1.5px solid var(--line); background: #fff; color: var(--ink);
  transition: all .12s; min-height: 40px;
}
.chip.on { background: var(--green); border-color: var(--green); color: #fff; }
.chip:active { transform: scale(.96); }

/* ---- Segmented control (single-select) ---- */
.segmented { display: flex; background: #eef2ec; border-radius: 12px; padding: 4px; gap: 4px; flex-wrap: wrap; }
.seg {
  flex: 1 1 auto; min-width: 64px; min-height: 38px; border: none; background: transparent;
  border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--muted); padding: 6px 8px;
}
.seg.on { background: #fff; color: var(--green); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* ---- Buttons ---- */
.btn {
  min-height: var(--tap); padding: 12px 16px; border-radius: 12px; border: none;
  font-size: 16px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn:active { transform: scale(.98); }
.btn-block { width: 100%; }
.btn-primary { background: var(--green); color: #fff; }
.btn-secondary { background: var(--lime); color: #14260c; }
.btn-ghost { background: transparent; border: 1.5px dashed var(--line); color: var(--muted); width: 100%; }
.btn-danger-ghost { background: transparent; border: 1.5px solid #eccfcf; color: var(--danger); }
.view-form .btn-block { margin-top: 4px; }

/* ---- Filter bar ---- */
.filter-bar { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 12px; -webkit-overflow-scrolling: touch; }
.filter {
  flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600;
  border: 1.5px solid var(--line); background: #fff; color: var(--muted);
}
.filter.on { background: var(--green); border-color: var(--green); color: #fff; }

/* ---- Job list ---- */
.job-list { display: flex; flex-direction: column; gap: 10px; }
.job-card {
  display: flex; align-items: stretch; gap: 10px; width: 100%; text-align: left;
  background: var(--card); border: 0; border-radius: var(--radius); padding: 15px;
  box-shadow: var(--sh-1);
}
.job-card:active { transform: scale(.995); box-shadow: var(--sh-2); }
.job-card-main { flex: 1; min-width: 0; }
.job-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* With a wrapping title the cost should sit on the first line, not float to the
   middle of a two line heading. */
.job-card-top.top-start { align-items: flex-start; }
.job-name { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-name.unnamed { color: var(--muted); font-weight: 600; }
/* Shop tasks carry the equipment and the job in one line ("Dodge 4500: Put
   brake caliber and brake pads on"), so the usual single-line ellipsis cuts off
   the half that says what to do. Let those wrap. */
.job-name.wrap { white-space: normal; overflow: visible; text-overflow: clip; }
.job-sub { color: var(--muted); font-size: 13.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 7px; font-size: 13px; color: var(--muted); }
.job-amount { font-weight: 700; color: var(--green-2); }
.flag { display: flex; align-items: center; font-size: 18px; }

/* ---- Status pill ---- */
.pill {
  --pill: var(--muted);
  flex: 0 0 auto; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  color: var(--pill); background: color-mix(in srgb, var(--pill) 14%, #fff); border: 1px solid color-mix(in srgb, var(--pill) 30%, #fff);
}
.pill.sm { font-size: 10.5px; padding: 2px 7px; }
.pill .ic { vertical-align: -2px; margin-right: 3px; }

/* ---- Maintenance (Shop) ---- */
.maint-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.maint-tags .pill { text-transform: capitalize; }
.maint-card { border-left: 3px solid #0f766e; }
.needs-info { border-left: 3px solid #b23b3b; }

/* ---- Detail sheet ---- */
.sheet-overlay {
  position: fixed; inset: 0; z-index: 60; background: rgba(15,25,18,.42);
  display: flex; align-items: flex-end; justify-content: center; animation: fade .18s ease;
}
.sheet {
  width: 100%; max-width: 640px; max-height: 92vh; overflow-y: auto;
  background: var(--bg); border-radius: 22px 22px 0 0; padding: 8px 14px calc(var(--safe-bottom) + 20px);
  animation: rise .22s cubic-bezier(.2,.8,.2,1);
}
.sheet-grab { width: 40px; height: 5px; border-radius: 3px; background: #cfd8cd; margin: 4px auto 2px; padding: 6px 30px; background-clip: content-box; box-sizing: content-box; cursor: grab; touch-action: none; }
.sheet-grab:active { cursor: grabbing; }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 4px 2px 12px; }
.sheet-head h2 { font-size: 22px; letter-spacing: -.3px; }
.icon-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 17px; }
.quick-actions { display: flex; gap: 8px; margin-bottom: 12px; }
.qa {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-height: 42px; border-radius: 12px; border: 1px solid var(--line); background: #fff;
  font-weight: 600; font-size: 14px; color: var(--green);
}
.qa.sm { flex: 0 0 auto; min-height: 34px; padding: 0 10px; font-size: 13px; }
.qa.ghost { color: var(--muted); }
.sheet-actions { display: flex; gap: 10px; margin-top: 8px; }
.sheet-actions .btn { flex: 1; }

/* Definition list inside detail */
.dl { display: flex; flex-direction: column; gap: 8px; }
.dl-row { display: flex; gap: 12px; font-size: 14px; }
.dl-k { flex: 0 0 88px; color: var(--muted); font-weight: 600; }
.dl-v { flex: 1; }

/* ---- My Day ---- */
.day-datebar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.day-datebar .input { text-align: center; font-weight: 600; }
.route-summary:not(:empty) { margin-bottom: 12px; }
.route-pill { display: inline-flex; align-items: center; gap: 7px; background: var(--green); color: #fff; font-weight: 700; font-size: 14px; padding: 8px 14px; border-radius: 999px; }
.day-list { display: flex; flex-direction: column; gap: 10px; }

/* ---- My Day 6am to 6pm calendar ---- */
.cal-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 2px 2px 12px; }
.cal-key { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.cal-swatch { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.crew-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.day-cal { position: relative; margin: 2px 0 4px; }
.cal-line { position: absolute; left: 38px; right: 0; border-top: 1px solid var(--line); }
.cal-lbl { position: absolute; left: 0; width: 32px; transform: translateY(-50%); text-align: right; font-size: 11px; font-weight: 600; color: var(--muted); background: var(--bg); }
.cal-lane { position: absolute; left: 44px; right: 2px; top: 0; bottom: 0; }
.cal-empty { position: absolute; top: 10px; left: 4px; right: 4px; font-size: 13px; }
.cal-now { position: absolute; left: 38px; right: 0; border-top: 2px solid #d64545; z-index: 3; }
.cal-now:before { content: ""; position: absolute; left: 0; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: #d64545; }
.cal-event { position: absolute; box-sizing: border-box; border-radius: 8px; padding: 3px 7px; overflow: hidden;
  text-align: left; border: none; color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.16); z-index: 2; }
.cal-event:active { opacity: .8; }
.cal-event.est { background: var(--green-3); }
.cal-event.job { background: #2f6db0; }
.cal-ev-name { font-weight: 700; font-size: 12.5px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev-time { font-size: 11px; opacity: .92; margin-top: 1px; }

.stop-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.stop-row { display: flex; gap: 10px; align-items: flex-start; }
.stop-num { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--green); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 14px; margin-top: 1px; }
.stop-body { flex: 1; min-width: 0; background: none; border: none; padding: 0; text-align: left; display: block; }
.stop-body:active { opacity: .65; }
.stop-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stop-name { font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag { flex: 0 0 auto; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; }
.tag-est { background: var(--lime-soft); color: #33530f; }
.tag-job { background: #d9e6f5; color: #204a78; }
.stop-sub { color: var(--muted); font-size: 13.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stop-meta { margin-top: 4px; font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; }
.stop-open { display: inline-block; margin-top: 6px; font-size: 12px; color: var(--green-2); font-weight: 600; }
.stop-primary { display: flex; gap: 8px; margin-top: 10px; }
.call-btn {
  flex: 1.3; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; border-radius: 12px; background: var(--green-3); color: #fff;
  font-weight: 700; font-size: 15px; border: none;
}
.call-btn.disabled { background: #eef2ec; color: var(--muted); font-weight: 600; }
.call-btn:active { transform: scale(.98); }
.nav-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-height: 44px; border-radius: 12px; background: #fff; color: var(--green);
  border: 1.5px solid var(--line); font-weight: 700; font-size: 15px;
}
.icon-act { flex: 0 0 44px; width: 44px; min-height: 44px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; color: var(--muted); font-size: 16px; }

/* ---- "Headed here next" ---- */
.heading-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 8px; min-height: 40px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; color: var(--green); font-weight: 700; font-size: 14px; }
.heading-btn.on { background: var(--green); color: #fff; border-color: var(--green); }
.heading-btn:active { transform: scale(.99); }
.heading-banner { display: flex; align-items: center; gap: 10px; background: var(--green); color: #fff; border-radius: 14px; padding: 10px 12px; margin-bottom: 12px; }
.heading-ic { display: flex; flex: 0 0 auto; }
.heading-info { flex: 1; min-width: 0; }
.heading-to { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.heading-dist { font-size: 13px; opacity: .92; margin-top: 1px; }
.heading-banner .qa.ghost-light { background: rgba(255,255,255,.16); color: #fff; border: none; }
.heading-banner .qa.ghost-light:active { background: rgba(255,255,255,.28); }
.icon-act:active { background: var(--bg); }
.stop-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.day-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.empty { text-align: center; padding: 30px 16px; color: var(--ink); }
.empty p { margin-bottom: 6px; }

/* ---- Tab bar ---- */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  display: flex; justify-content: space-around;
  height: calc(var(--tabbar-h) + var(--safe-bottom)); padding-bottom: var(--safe-bottom);
  background: var(--chrome); backdrop-filter: none;
  border-top: 0;
}
.tab { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--on-chrome-dim); font-size: 10px; font-weight: 700; padding: 0 1px; }
.tab-label { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab-icon { display: flex; align-items: center; justify-content: center; height: 24px; opacity: .75; }
.tab.on { color: var(--lime); }
.tab.on::before { content: ""; position: absolute; top: 6px; width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--lime); }
.tab.on .tab-icon { opacity: 1; }

/* ---- Misc ---- */
.muted { color: var(--muted); }
.center { text-align: center; padding: 24px 8px; }
#toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 16px); transform: translateX(-50%) translateY(20px);
  background: #1c2b21; color: #fff; padding: 11px 18px; border-radius: 999px; font-size: 14px; font-weight: 600;
  opacity: 0; pointer-events: none; transition: all .25s; z-index: 80; max-width: 90vw; text-align: center;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.err { background: var(--danger); }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { transform: translateY(30px); } to { transform: translateY(0); } }

/* ---- Native select ---- */
select.select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235a665f' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 34px;
}

/* ---- Partial-payment note on Completed cards ---- */
.job-note.pay-note { color: var(--green); font-weight: 600; }

/* ---- Checkbox row (e.g. rain OK) ---- */
.check-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 15px; font-weight: 600; color: var(--ink); }
.check-row input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--green); flex: 0 0 auto; }

/* ---- Multi-day picker ---- */
.days-field .extra-days { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.days-field .extra-day-row { display: flex; gap: 8px; align-items: center; }
.days-field .extra-day-row .input { flex: 1; }
.days-field .extra-day-row .icon-btn { flex: 0 0 44px; height: 44px; }
.days-field .btn-ghost { margin-top: 8px; }

/* ---- Multi-select dropdown ---- */
.ms { position: relative; }
.ms-toggle {
  width: 100%; min-height: var(--tap); display: flex; align-items: center; gap: 8px;
  padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; text-align: left;
}
.ms-summary { flex: 1; font-size: 15px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-summary.placeholder { color: #98a29a; }
.ms-caret { color: var(--muted); transition: transform .2s; }
.ms.open .ms-caret { transform: rotate(180deg); }
.ms-panel { display: none; margin-top: 6px; border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; }
.ms.open .ms-panel { display: block; }
.ms-opt { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-bottom: 1px solid var(--bg); font-size: 15px; }
.ms-opt:last-child { border-bottom: none; }
.ms-opt input { width: 20px; height: 20px; accent-color: var(--green); }

/* ---- Group headers ---- */
.group-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--green-2); margin: 16px 2px 8px; }
.group-head.sub { color: var(--muted); }
.group-count { background: var(--green); color: #fff; font-size: 11px; padding: 1px 8px; border-radius: 999px; }

/* ---- Job cards (column layout with action row) ---- */
.job-card.col { flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; }
/* A `col` card is normally a div wrapping a .job-card-hit button, which carries
   the padding. When the card IS the button (expenses, shop, receipts) nothing
   put the padding back, so the text ran to both edges and the amount clipped
   off the right. Spacing too: these lists append straight to the view rather
   than into a .job-list, so they get no gap from it. */
button.job-card.col { padding: 15px; margin-bottom: 10px; }
.job-list > button.job-card.col { margin-bottom: 0; }
.job-card-hit { width: 100%; text-align: left; background: none; border: none; padding: 13px 13px 10px; }
.job-card-hit:active { background: #fafcf9; }
.job-note { font-size: 12.5px; color: var(--green-2); margin-top: 6px; font-weight: 600; }
.job-note.note-inline { display: flex; }   /* each note on its own line */
.card-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 12px 12px; }
.card-actions .qa { flex: 1 1 auto; min-width: 92px; min-height: 40px; }
.qa.primary { background: var(--green); color: #fff; border-color: var(--green); }

/* ---- Reports: month navigator + pace rows ---- */
.month-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.month-label { flex: 1; text-align: center; font-size: 19px; font-weight: 800; letter-spacing: -.3px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 12px; min-height: 42px; }
.month-label:active { background: var(--bg); }
.month-nav .icon-btn { flex: 0 0 42px; height: 42px; font-size: 22px; }
.month-nav .icon-btn:disabled { opacity: .35; }
.pace-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--bg); }
.pace-row:last-child { border-bottom: none; }
.pace-main { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.pace-val { font-size: 19px; font-weight: 800; color: var(--green); letter-spacing: -.3px; }
.pace-label { font-size: 13.5px; color: var(--ink); font-weight: 600; }
.pace-cmp { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex: 0 0 auto; }
.pace-delta { font-size: 13px; font-weight: 800; }
.pace-delta.up { color: #1e7d34; }
.pace-delta.down { color: #a13333; }
.pace-delta.flat { color: var(--muted); }
.pace-avg { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.est-row { display: grid; grid-template-columns: 1.3fr .7fr .7fr .8fr 1.2fr; gap: 6px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--bg); font-size: 14.5px; }
.est-row:last-child { border-bottom: none; }
.est-row > span:not(.est-name):not(.est-rev) { text-align: center; }
.est-name { font-weight: 700; }
.est-rev { text-align: right; font-weight: 700; color: var(--green-2); }
.est-row.est-head { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 700; padding-bottom: 6px; }
.est-row.est-head .est-name, .est-row.est-head .est-rev { color: var(--muted); }

/* ---- Stat grid ----
   minmax(0, 1fr) rather than 1fr: a plain 1fr resolves to min-content, so a
   five-figure money value in a three-up grid pushed the whole card past the
   edge of a 390px phone instead of wrapping inside its own column. */
.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.stat-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stat-grid > .stat { min-width: 0; }
.stat-grid.three .stat-val { font-size: 19px; letter-spacing: -.5px; }

/* ---- Money tab ---- */
.pay-week { width: 100%; text-align: left; background: var(--card); border: 1px solid var(--line); padding: 13px; }
.pay-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.pay-chip { font-size: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; color: var(--muted); }
.pay-chip b { color: var(--ink); margin-left: 5px; }
.pay-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pay-emp { flex: 0 0 84px; font-weight: 700; font-size: 15px; }
.pay-row .money-wrap { flex: 1; }
.pay-total { display: flex; align-items: center; justify-content: space-between; border-top: 1px dashed var(--line); margin-top: 6px; padding-top: 10px; font-weight: 700; }
.pay-total-amt { font-size: 18px; font-weight: 800; color: var(--green-2); }
.cat-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.cat-row:last-child { border-bottom: none; }
button.cat-row { width: 100%; background: none; font: inherit; text-align: left; color: inherit; }
button.cat-row:active { background: var(--bg); }

/* ---- Money in vs out table ---- */
.io-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.2fr; gap: 6px; padding: 6px 2px; border-bottom: 1px solid var(--line); font-size: 13px; }
.io-row span { text-align: right; color: var(--ink); }
.io-row span:first-child { text-align: left; }
.io-wk { font-weight: 600; }
.io-head span { color: var(--muted); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; }
.io-total { font-weight: 800; border-bottom: none; border-top: 1.5px solid var(--line); }
.io-net { font-weight: 700; }
.receipt-preview { margin-top: 10px; }
.receipt-thumb { display: block; width: 100%; max-height: 320px; object-fit: contain; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.sheet-actions.col { flex-direction: column; }
.sheet-actions.col .btn { flex: none; width: 100%; }

/* ---- Binders (tax documents) ---- */
.doc-btn { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-top: 8px; }
.doc-btn:active { background: var(--bg); }
.doc-btn-main { flex: 1; min-width: 0; }
.doc-btn-title { font-weight: 700; font-size: 15px; color: var(--ink); }
.doc-btn-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.doc-btn-go { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #fff; background: var(--green); border-radius: 999px; padding: 5px 10px; }
.doc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.doc-row:last-child { border-bottom: none; }
.doc-row-title { font-weight: 600; font-size: 14px; }
.doc-row-sub { font-size: 12px; margin-top: 1px; }
.doc-row-links { display: flex; gap: 12px; flex: 0 0 auto; }
.doc-row-links a { color: #2563a8; font-weight: 700; font-size: 13px; }
.stat { background: var(--bg); border-radius: 12px; padding: 12px; }
.stat-val { font-size: 26px; font-weight: 800; color: var(--green); letter-spacing: -.5px; }
.stat-label { font-size: 12.5px; font-weight: 700; color: var(--ink); margin-top: 2px; }
.stat-sub { font-size: 12px; color: var(--muted); }

/* ---- Bars ---- */
.bar-row { margin-bottom: 9px; }
.bar-label { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 4px; }
.bar-n { font-weight: 700; color: var(--muted); }
.bar-track { height: 8px; background: var(--bg); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; min-width: 3px; }
.sub-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 6px; }
.dl-row.tappable { width: 100%; background: none; border: none; border-bottom: 1px solid var(--bg); padding: 9px 0; text-align: left; }
.dl-k.right { text-align: right; color: var(--green-2); font-weight: 700; }

/* ---- My Day reorder ---- */
.stop-left { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.reorder { display: flex; flex-direction: column; gap: 4px; }
.ro { width: 30px; height: 26px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--green); font-size: 14px; line-height: 1; }
.ro:disabled { opacity: .3; }
.stop-num.job { background: #2563a8; }

/* ---- PIN lock ---- */
body.locked .tabbar { display: none; }
body.locked .topbar { border-bottom: 1px solid var(--line); }
.view.lock { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 120px); }
.lock-wrap { width: 100%; max-width: 320px; text-align: center; }
.lock-title { font-size: 20px; margin-bottom: 20px; color: var(--ink); }
.pin-dots { display: flex; justify-content: center; gap: 16px; margin-bottom: 28px; }
.pin-dot { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--green); }
.pin-dot.on { background: var(--green); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pin-key { height: 68px; border-radius: 16px; border: 1px solid var(--line); background: #fff; font-size: 26px; font-weight: 600; color: var(--ink); }
.pin-key:active { background: var(--bg); }
.shake { animation: shake .38s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-8px)} 40%,80%{transform:translateX(8px)} }

/* ---- Estimates list ---- */
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.head-actions { flex: 0 0 auto; display: flex; gap: 8px; align-items: center; }
.add-btn { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; background: var(--green); color: #fff; font-size: 24px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.add-btn:active { transform: scale(.96); }
.add-btn.ghost { background: #fff; color: var(--green); border: 1.5px solid var(--line); }
.back-link { display: inline-block; color: var(--green-2); font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.wait-pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; color: #8a5a1e; background: #f6edd9; border: 1px solid #e6d3a8; white-space: nowrap; }
.wait-pill.hot { color: #a13333; background: #fbe9e9; border-color: #f0cccc; }

/* ---- Overdue / urgent ---- */
.group-head.overdue { color: #a13333; }
.group-head.overdue .group-count { background: #b23b3b; }
.overdue-card { border-color: #f0cccc; background: #fdf6f6; }
.stop-card.urgent { border-left: 4px solid #d9822b; }

/* ---- Scheduling conflict ---- */
.conflict-row { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--bg); font-size: 14px; }
.conflict-row:last-child { border-bottom: none; }
.conflict-tag { flex: 0 0 auto; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 6px; }
.conflict-tag.crew { background: #e7f5ec; color: #1e7d34; }
.conflict-tag.equipment { background: #f6edd9; color: #8a5a1e; }

/* ---- Availability ---- */
.avail-block { padding: 9px 0; border-bottom: 1px solid var(--bg); }
.avail-block:last-child { border-bottom: none; }
.avail-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.avail-name { font-weight: 600; font-size: 15px; }
.avail-status { font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.avail-status.free { color: #1e7d34; background: #e7f5ec; }
.avail-status.busy { color: #a13333; background: #fbe9e9; }
.avail-status.warn { color: #8a5a1e; background: #f6edd9; }
.avail-detail { margin-top: 6px; padding-left: 2px; }
.avail-job { font-size: 13px; color: var(--muted); padding: 2px 0; }

/* ---- Completion / variance ---- */
.ref-row { display: flex; gap: 10px; margin-bottom: 12px; }
.ref-item { flex: 1; background: var(--bg); border-radius: 10px; padding: 9px 11px; }
.ref-k { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 700; }
.ref-v { font-size: 18px; font-weight: 800; color: var(--green); }
.inline-note { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; font-weight: 600; }
.variance-box { padding: 10px 12px; border-radius: 10px; background: var(--bg); font-weight: 700; font-size: 14px; color: var(--ink); }
.variance-box.over { background: #fbe9e9; color: #a13333; }
.variance-box.under { background: #e7f5ec; color: #1e7d34; }
.variance-box.muted { color: var(--muted); font-weight: 600; }

/* ---- Tablet / landscape: use the wider screen ---- */
@media (min-width: 900px) {
  /* Bottom tab bar becomes a left side rail; content shifts right to clear it. */
  body:not(.locked) { padding-left: 84px; }
  .tabbar {
    flex-direction: column; justify-content: center; gap: 6px;
    top: 0; bottom: 0; left: 0; right: auto;
    width: 84px; height: 100%;
    padding: var(--safe-top) 0 0;
    border-top: none; border-right: 1px solid var(--line);
  }
  .tab { flex: 0 0 auto; padding: 12px 4px; }
  .tab-icon { height: 26px; }

  #app.view { max-width: 860px; padding-bottom: 22px; }
  /* Let the week grid break out to fill the area right of the rail. */
  .wk-wrap { width: calc(100vw - 84px - 32px); position: relative; left: 50%; transform: translateX(-50%); }
  .wk { min-width: 0; }
}

/* ---- Trial-expiry warning modal (shows on every app open, dismissible) ---- */
.trial-overlay{position:fixed;inset:0;z-index:10000;background:rgba(8,18,10,.74);
  display:flex;align-items:center;justify-content:center;padding:22px;
  animation:trialFade .15s ease-out;}
@keyframes trialFade{from{opacity:0}to{opacity:1}}
.trial-card{position:relative;width:100%;max-width:440px;background:#fff;border-radius:20px;
  border-top:10px solid #e0a400;padding:38px 26px 26px;text-align:center;
  box-shadow:0 24px 70px rgba(0,0,0,.45);}
.trial-close{position:absolute;top:12px;right:12px;width:44px;height:44px;border:none;
  background:#eceff0;color:#333;border-radius:50%;font-size:30px;line-height:40px;
  cursor:pointer;font-weight:700;}
.trial-close:active{background:#dfe3e4;}
.trial-badge{display:inline-block;background:#fff3cd;color:#a56a00;font-weight:800;
  letter-spacing:2px;font-size:14px;padding:7px 16px;border-radius:999px;margin-bottom:16px;}
.trial-headline{font-size:22px;font-weight:800;line-height:1.28;color:#8a3b00;}
.trial-count{font-size:54px;font-weight:900;line-height:1.05;color:#c0392b;margin:10px 0 4px;
  letter-spacing:1px;}
.trial-sub{font-size:14px;color:#5a665f;margin-top:8px;}
.trial-dismiss{margin-top:24px;width:100%;background:#143B24;color:#fff;border:none;
  border-radius:14px;padding:16px;font-size:17px;font-weight:800;cursor:pointer;}
.trial-dismiss:active{background:#0e2a19;}

/* ---- Dormant lock screen (remote kill switch) ---- */
.view.dormant{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:#0e2a19;padding:26px;}
.dormant-wrap{max-width:420px;text-align:center;color:#eaf1ea;}
.dormant-mark{font-size:60px;line-height:1;margin-bottom:14px;}
.dormant-title{font-size:30px;font-weight:800;margin:0 0 12px;color:#fff;letter-spacing:.5px;}
.dormant-body{font-size:15px;line-height:1.6;color:#c3d4c6;margin:0 0 26px;}
.dormant-btn{display:inline-block;background:#8DB600;color:#0e2a19;font-weight:800;
  text-decoration:none;padding:15px 30px;border-radius:14px;font-size:16px;}

/* ---- Week schedule (Mon to Fri side by side on a phone) ---- */
.wk-nav { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.wk-range { flex: 1; min-height: 40px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--green); font-weight: 800; font-size: 14px; }
.wk {
  display: grid; grid-template-columns: 26px repeat(5, minmax(0, 1fr)); gap: 3px;
  width: 100%; max-width: 100%;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px 8px 10px; overflow: hidden;
}
.wk-gutter { padding-top: 30px; position: relative; }
.wk-hour { height: calc((100% - 0px) / 11); font-size: 9px; color: var(--muted); line-height: 1; }
.wk-gutter { display: grid; grid-template-rows: 30px repeat(11, 1fr); }
.wk-hour span { position: relative; top: -4px; }
.wk-col { display: flex; flex-direction: column; min-width: 0; border-radius: 10px; }
.wk-col.today { background: var(--lime-soft); }
.wk-col.sel { outline: 2px solid var(--green-3); outline-offset: -2px; }
.wk-head { height: 30px; border: 0; background: none; padding: 0; display: flex;
  flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.wk-dow { font-size: 9px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.wk-date { font-size: 13px; font-weight: 900; color: var(--ink); }
.wk-col.today .wk-date { color: var(--green); }
.wk-lane { position: relative; height: 352px; border-left: 1px solid var(--line); }
.wk-line { position: absolute; left: 0; right: 0; height: 1px; background: var(--line); }
.wk-block { position: absolute; border: 0; padding: 0; border-radius: 4px;
  background: var(--c); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
.wk-block.crew { opacity: .9; border-radius: 3px; }
.wk-block-t { font-size: 8px; font-weight: 900; color: #fff; letter-spacing: .02em; }
.wk-any { margin-top: 4px; border: 1px dashed var(--line); background: none;
  border-radius: 6px; font-size: 9px; font-weight: 800; color: var(--muted);
  padding: 3px 1px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wk-list { margin-top: 14px; }

/* ---- proposals from the office ---- */
.props { margin: 0 0 14px; }
.props-head { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800;
              text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 8px; }
.props-n { background: var(--gold); color: #3a2a00; border-radius: 999px;
           padding: 1px 7px; font-size: 11px; font-weight: 900; letter-spacing: 0; }
.prop { background: var(--card); border-radius: var(--radius); box-shadow: var(--sh-1);
        padding: 13px 14px; margin-bottom: 8px; border-left: 3px solid var(--gold); }
.prop-top { display: flex; align-items: baseline; justify-content: space-between; gap: 9px; }
.prop-who { font-size: 15.5px; font-weight: 700; letter-spacing: -.2px; min-width: 0; }
.prop-when { font-size: 14px; font-weight: 700; color: var(--green-3); margin-top: 3px; }
.prop-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.prop-note { font-size: 13px; color: var(--ink); background: var(--bg); border-radius: 8px;
             padding: 8px 10px; margin-top: 8px; }
.prop-acts { display: flex; gap: 7px; margin-top: 11px; flex-wrap: wrap; }

/* ---- Booking sheet ---- */
.slot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.slot { min-height: 38px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); font-size: 12px; font-weight: 700; color: var(--ink); }
.slot.on { background: var(--green); border-color: var(--green); color: #fff; }
.flag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.flag { border: 1px solid var(--line); border-radius: 999px; background: var(--card);
  padding: 8px 12px; font-size: 12px; font-weight: 700; color: var(--ink); }
.flag.on { background: var(--lime-soft); border-color: var(--green-3); color: var(--green); }

/* ---- Reports scope toggle (month vs year to date) ---- */
.scope-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.scope-btn { min-height: 40px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); font-size: 13px; font-weight: 800; color: var(--muted); }
.scope-btn.on { background: var(--green); border-color: var(--green); color: #fff; }
.ytd-wrap { margin-top: 14px; }
.card-sub { font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.ytd-bars { display: flex; align-items: flex-end; gap: 4px; height: 90px; }
.ytd-bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 4px; }
.ytd-bar-fill { width: 100%; min-height: 2px; background: var(--green-3); border-radius: 4px 4px 0 0; }
.ytd-bar.now .ytd-bar-fill { background: var(--lime); }
.ytd-bar-lbl { font-size: 9px; font-weight: 800; color: var(--muted); }

/* ---- Lead card (Estimates) ----
   Pared back to the two things Cole acts on: who it is and how to reach them.
   Everything else is one tap away on the detail sheet. The number is its own
   call target, layered above the full-card tap target. */
.lead {
  position: relative;
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--card); border: 0; border-radius: var(--radius);
  padding: 14px 14px 14px 18px; margin-bottom: 10px;
  box-shadow: var(--sh-1);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.lead:has(.lead-hit:active) { transform: scale(.995); box-shadow: var(--sh-2); }
/* fills the card, sits under the content so the number can take its own taps */
.lead-hit {
  position: absolute; inset: 0; z-index: 1;
  border: 0; background: none; padding: 0; border-radius: var(--radius);
}
.lead-main { position: relative; z-index: 2; flex: 1; min-width: 0; pointer-events: none; }
.lead-aside { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; flex: 0 0 auto; pointer-events: none; }
.lead-name {
  font-size: 19px; font-weight: 800; letter-spacing: -.3px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lead-name.num { font-variant-numeric: tabular-nums; }
.lead-sub {
  margin-top: 3px; font-size: 14.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lead-sub.warn { color: var(--danger); font-weight: 600; }
/* the number reads as an action: green, a handset, and a real tap target */
.lead-tel {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 2px; padding: 5px 10px 5px 8px; margin-left: -8px;
  border-radius: 999px;
  color: var(--green-3); font-size: 14.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.lead-tel .ic { opacity: .85; }
/* when the number IS the headline (a lead with no name yet) */
.lead-tel-lg { font-size: 19px; font-weight: 800; letter-spacing: -.3px; padding-top: 2px; padding-bottom: 2px; }
.lead-tel:active { background: var(--lime-soft); color: var(--green); }
.lead-wait {
  font-size: 12px; font-weight: 800; color: var(--muted);
  background: var(--bg); border-radius: 999px; padding: 5px 10px; white-space: nowrap;
}
.lead-wait.hot { background: #FDECEA; color: #B3382F; }
.lead-chev { font-size: 22px; line-height: 1; color: #C3CEC5; font-weight: 400; }
.lead.needs-info { box-shadow: inset 3px 0 0 var(--danger), var(--sh-1); }

/* ---- Aging: leads, quotes and invoices ----
   One pill, three tones, used everywhere something is getting older: a lead on
   Estimates, a quote on Pending, an invoice on Owed. The colour has to mean the
   same thing in all three places or it stops being readable at a glance, which
   is why the tone classes live here and the day thresholds live in chase.js. */
.age-pill {
  flex: 0 0 auto; display: inline-flex; align-items: center;
  font-size: 11.5px; font-weight: 800; letter-spacing: .2px;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.age-pill.t-ok   { color: #1e6b45; background: #E8F4EC; }
.age-pill.t-warn { color: #8a5a1e; background: #F8EFDC; }
.age-pill.t-bad  { color: #B3382F; background: #FDECEA; }

/* a quote that has crossed the nudge line says so in words, not just colour */
.nudge-flag {
  flex: 0 0 auto; font-size: 11.5px; font-weight: 800; letter-spacing: .2px;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  color: #fff; background: #C2601C;
}
.owed-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.owed-line > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-note.warn-note { color: #8a5a1e; font-weight: 600; }
.group-right { margin-left: auto; font-weight: 800; color: var(--ink); }

/* the three-way split of what is owed, on Owed and on Reports */
.owed-split { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.owed-seg {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 10px; border-radius: 12px; background: var(--bg);
  border-top: 3px solid #D6E0D8;
}
.owed-seg-v { font-size: 16px; font-weight: 800; letter-spacing: -.3px; color: var(--ink); }
.owed-seg-l { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); }
.owed-seg.t-ok   { border-top-color: #2f7d47; }
.owed-seg.t-warn { border-top-color: #c98a00; }
.owed-seg.t-bad  { border-top-color: #b23b3b; background: #FDF6F6; }

/* ---- Close-out: one question, one tap ----
   Two columns so every outcome is reachable with a thumb and none of them is
   the default. Nothing is pre-selected on purpose: picking is the whole point. */
.outcome-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.outcome {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  min-height: 62px; padding: 10px 12px;
  border: 1.5px solid var(--line); border-radius: 14px; background: var(--card);
}
.outcome:active { transform: scale(.97); background: var(--bg); }
.outcome-l { font-size: 14.5px; font-weight: 800; color: var(--ink); line-height: 1.2; }
.outcome-s { font-size: 11.5px; color: var(--muted); line-height: 1.25; }

/* The waited pill on a lead card, in the same three tones as everything else
   that ages. Green under a week, amber to 30 days, red past that. */
.lead-wait.t-ok   { background: #E8F4EC; color: #1e6b45; }
.lead-wait.t-warn { background: #F8EFDC; color: #8a5a1e; }
.lead-wait.t-bad  { background: #FDECEA; color: #B3382F; }

/* A number we have worked for before. Small on purpose: it is a nudge to open
   the card and read the history, not a headline. */
.repeat-dot {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--lime-soft); color: var(--green-2);
  font-size: 14px; font-weight: 800; line-height: 1;
}

/* ---- Customer history on the job sheet ---- */
.hist-row {
  display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left;
  padding: 9px 0; border-bottom: 1px solid var(--bg); background: none; border-left: 0; border-right: 0; border-top: 0;
}
.hist-row:last-child { border-bottom: none; }
.hist-row:active { background: #fafcf9; }
.hist-when { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--muted); min-width: 64px; }
.hist-what { flex: 1; min-width: 0; font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-amt { flex: 0 0 auto; font-size: 14px; font-weight: 800; color: var(--green-2); }
.hist-note { font-size: 12.5px; color: var(--muted); margin-top: -4px; padding-bottom: 8px; }

/* ---- Job photos ---- */
.photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.photo-grid > p { grid-column: 1 / -1; margin: 0; }
.photo-tile {
  position: relative; display: block; padding: 0; border: 0; border-radius: 12px;
  overflow: hidden; background: var(--bg); aspect-ratio: 1 / 1;
}
.photo-tile:active { transform: scale(.97); }
.photo-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-tag {
  position: absolute; left: 5px; bottom: 5px;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px;
  padding: 2px 7px; border-radius: 999px; color: #fff; background: rgba(11, 51, 39, .78);
}
.photo-stages { display: flex; gap: 6px; margin-bottom: 8px; }
.photo-full {
  display: block; width: 100%; max-height: 62vh; object-fit: contain;
  border-radius: 12px; background: #000;
}

/* ---- Crew day sheet ----
   Monospace and pre-wrapped on purpose: this is the exact text that gets sent,
   so what Cole reads here is what the crew reads in the morning. */
.day-sheet {
  margin: 0; padding: 12px; max-height: 46vh; overflow: auto;
  background: var(--bg); border-radius: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.5; color: var(--ink);
  white-space: pre-wrap; word-break: break-word;
}
.group-head .group-action { margin-left: auto; }

/* ---- Season bars ----
   The same bars the year-to-date card uses, 13 months wide and carrying the job
   count above each one. Taller than the YTD set because the count label needs
   room and because this is the card you stand and read. */
.season-bars { height: 128px; gap: 3px; }
.season-bars .ytd-bar { justify-content: flex-end; }
.season-n { font-size: 10px; font-weight: 800; color: var(--muted); line-height: 1; }
.season-bars .ytd-bar.now .season-n { color: var(--green-2); }

/* ---- The week on a map ---- */
.week-map { display: block; width: 100%; border-radius: 12px; background: var(--bg); }
.map-key { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.map-key-item { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--muted); }
.day-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--d); color: #fff; font-size: 10.5px; font-weight: 800; line-height: 1;
}
.group-head.sub .day-dot { margin-right: 2px; }

/* ---- Receipt viewer ----
   Full screen and black because a receipt is read, not glanced at. Sits above
   the sheets (60) but under the toast (80) so a message still lands on top.
   touch-action is none on the stage: the pinch and drag are handled in
   receipts.js, since the app turns the browser's own zoom off. */
.rc-viewer {
  position: fixed; inset: 0; z-index: 70; background: #0b0d0c;
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
.rc-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: #fff; }
.rc-title { flex: 1; min-width: 0; font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-amt { flex: 0 0 auto; font-size: 15px; font-weight: 800; color: #9fe0b4; }
.rc-x { background: rgba(255, 255, 255, .14); border-color: transparent; color: #fff; }
.rc-fit {
  flex: 0 0 auto; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700;
  background: rgba(255, 255, 255, .14); border: 0; color: #fff;
}
.rc-stage {
  flex: 1; min-height: 0; overflow: hidden; touch-action: none;
  display: flex; align-items: center; justify-content: center;
}
.rc-img {
  max-width: 100%; max-height: 100%; display: block;
  transform-origin: center center; will-change: transform;
  -webkit-user-select: none; user-select: none; -webkit-user-drag: none;
}
.rc-msg { color: #cdd6d0; font-size: 14px; padding: 0 20px; text-align: center; }
.rc-foot {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 14px 14px; font-size: 12.5px; color: #cdd6d0;
}
.rc-foot a, .rc-link { color: #9fe0b4; font-weight: 700; text-decoration: none; }
.rc-link { background: none; border: 0; padding: 0; font-size: 12.5px; }

/* Marked to go out on a customer document. Top corner so it never sits under
   the stage tag in the bottom corner. */
.photo-send {
  position: absolute; right: 5px; top: 5px;
  font-size: 10px; font-weight: 800; letter-spacing: .6px;
  padding: 2px 7px; border-radius: 999px; color: #143B24; background: rgba(141, 182, 0, .92);
}