:root {
  /* Lamont Luxury: charcoal + gold (matches app.lamontluxury.com) */
  --bg: #f9fafb;
  --card: #ffffff;
  --ink: #1a1a1a;
  --muted: #6b7280;
  --line: #e5e7eb;
  --dark: #1a1a1a;
  --dark-2: #2d2d2d;
  --gold: #d4af37;
  --gold-deep: #8a6d1d;      /* gold for text on white (readable) */
  --gold-soft: #faf3dc;
  --accent: #1a1a1a;         /* primary buttons: charcoal with gold text */
  --accent-ink: #d4af37;
  --accent-soft: #faf3dc;
  --warn: #92400e;
  --warn-soft: #fef3c7;
  --danger: #991b1b;
  --danger-soft: #fee2e2;
  --ok: #166534;
  --radius: 12px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.wrap { max-width: 560px; margin: 0 auto; padding: 20px 16px 48px; }
.wide { max-width: 880px; }
.bar { background: linear-gradient(180deg, var(--dark) 0%, var(--dark-2) 100%); border-bottom: 2px solid var(--gold); }
.bar-in { max-width: 560px; margin: 0 auto; padding: 14px 16px; display: flex; align-items: baseline; gap: 10px; }
.bar-in.wide { max-width: 880px; }
.bar .logo { font-family: Georgia, "Times New Roman", serif; color: var(--gold); font-size: 20px; font-weight: 700; letter-spacing: .02em; }
.bar .sub { color: #9ca3af; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
a { color: var(--gold-deep); }
h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; color: var(--dark); font-size: 28px; line-height: 1.2; margin: 6px 0 4px; }
h2 { font-size: 18px; margin: 0 0 12px; }
p { margin: 0 0 12px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin: 14px 0; }
label { display: block; font-size: 14px; font-weight: 600; margin: 12px 0 6px; }
input[type=text], input[type=email], input[type=tel], input[type=url], input[type=time], input[type=number], input[type=password], input[type=date], input[type=search], textarea, select {
  width: 100%; font: inherit; padding: 11px 12px; border: 1px solid #cfc7b6; border-radius: 9px; background: #fff; color: var(--ink);
}
textarea { min-height: 120px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row > * { flex: 1 1 0; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #cfc7b6; background: #fff; border-radius: 999px; padding: 8px 14px; font-size: 15px; cursor: pointer; user-select: none; color: inherit; text-decoration: none; }
.chip.on { background: var(--dark); border-color: var(--dark); color: var(--gold); }
.chip.taken { color: #9a927f; border-style: dashed; background: #faf8f4; }
.chip.nowrap { white-space: nowrap; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 15px; margin: 12px 0; cursor: pointer; }
.check input { margin-top: 4px; width: 18px; height: 18px; flex: none; }
button, .btn { font: inherit; font-weight: 600; letter-spacing: .01em; border: 0; border-radius: 10px; padding: 13px 18px; cursor: pointer; background: var(--accent); color: var(--accent-ink); text-decoration: none; display: inline-flex; justify-content: center; align-items: center; gap: 8px; }
button.secondary, .btn.secondary { background: #fff; color: var(--ink); border: 1px solid #cfc7b6; }
button.danger { background: var(--danger); color: #fff; }
button:disabled { opacity: .55; cursor: default; }
.actions { display: flex; gap: 10px; margin-top: 18px; }
.actions > * { flex: 1; }
.steps { display: flex; gap: 6px; margin: 14px 0 4px; }
.steps span { flex: 1; height: 4px; border-radius: 4px; background: var(--line); }
.steps span.on { background: var(--gold); }
.note { border-radius: 10px; padding: 12px 14px; font-size: 14px; margin: 12px 0; background: var(--accent-soft); }
.note.warn { background: var(--warn-soft); color: var(--warn); }
.note.err { background: var(--danger-soft); color: var(--danger); }
.photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.photos .ph { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: #eee; }
.photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photos .x { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,.6); color: #fff; border-radius: 50%; width: 26px; height: 26px; padding: 0; font-size: 14px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 15px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.big { font-size: 20px; font-weight: 600; }
.list { display: flex; flex-direction: column; gap: 10px; }
.item { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; color: inherit; text-decoration: none; }
.item .top { display: flex; justify-content: space-between; gap: 10px; }
.tag { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #dcfce7; color: var(--ok); }
.tag.warn { background: var(--warn-soft); color: var(--warn); }
.tag.err { background: var(--danger-soft); color: var(--danger); }
.tabs { display: flex; gap: 6px; margin: 14px 0; flex-wrap: wrap; }
.tabs a { padding: 8px 14px; border-radius: 999px; text-decoration: none; color: var(--ink); border: 1px solid var(--line); background: #fff; font-size: 14px; }
.tabs a.on { background: var(--dark); color: var(--gold); border-color: var(--dark); }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.topbar a { color: var(--muted); font-size: 14px; }
.mults { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 14px; border-top: 1px solid var(--line); margin-top: 10px; padding-top: 4px; }
.mult label { margin-bottom: 4px; }
.mult-row { display: flex; align-items: center; gap: 6px; }
.mult-row input { max-width: 110px; }
.mult-row .x { color: var(--muted); font-weight: 600; }
/* v113d: naming the day to move a job to. The date field and the escape hatch back to the
   soonest times sit on one line; the input carries the app's usual field margin, off here. */
.movetoday { align-items: center; gap: 8px; margin: 4px 0 12px; }
/* The date field is the point of the row, so it takes the space; the escape hatch stays its own
   width and never wraps to a second line. */
.movetoday input { margin: 0; flex: 1 1 0; min-width: 0; }
.movetoday button { flex: 0 0 auto; white-space: nowrap; }
.slotpick { display: flex; flex-direction: column; gap: 8px; }
/* A slot is "when", then what it costs underneath. Side by side and centred, the two did not fit
   a phone and the time broke in half — "Fri Nov 6, 7:00–" over "9:00am". Stacked, the time always
   gets a line to itself. */
.slotpick button { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; text-align: left; }
.slotpick button { justify-content: space-between; background: #fff; color: var(--ink); border: 1px solid #cfc7b6; font-weight: 400; }
.slotpick button.on { border: 2px solid var(--gold); }
#pay-element { margin-top: 8px; }
.qr { display: flex; justify-content: center; padding: 10px; background: #fff; }
.qr svg, .qr img { width: 240px; height: 240px; }
@media (max-width: 420px) { h1 { font-size: 24px; } .kv { grid-template-columns: 1fr; gap: 2px; } .kv dd { margin-bottom: 8px; } }

table.mini { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 14px; }
table.mini th, table.mini td { text-align: right; padding: 4px 6px; border-bottom: 1px solid var(--line); }
table.mini th:first-child, table.mini td:first-child { text-align: left; }
.chips + .kv { margin-top: 12px; }

/* ---- Calendar ---- */
.calbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.caltitle { flex: 1 1 auto; text-align: center; font-size: 15px; }
.small-btn { padding: 8px 14px; font-size: 14px; white-space: nowrap; }
.cal { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cal-head, .cal-body { display: grid; grid-template-columns: 52px repeat(var(--cols), minmax(0, 1fr)); }
.cal-head { border-bottom: 1px solid var(--line); background: #fafafa; }
.cal-dayname { padding: 8px 6px; font-size: 13px; font-weight: 600; text-align: center; border-left: 1px solid var(--line); min-width: 0; }
.cal-dayname.today { color: var(--gold-deep); background: var(--gold-soft); }
.cal-allday { margin-top: 4px; font-size: 11px; font-weight: 500; background: #e5e7eb; border-radius: 4px; padding: 2px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-body { position: relative; overflow-y: auto; }
.cal-gutter { position: relative; }
.cal-hour { position: absolute; right: 6px; transform: translateY(-50%); font-size: 11px; color: var(--muted); }
.cal-hour:first-child { transform: none; }
.cal-col { position: relative; border-left: 1px solid var(--line); min-width: 0; }
.cal-col.today { background: #fffdf5; }
.cal-line { position: absolute; left: 0; right: 0; border-top: 1px solid #f1f1f1; }
.cal-ev { position: absolute; border-radius: 6px; padding: 3px 5px; font-size: 12px; line-height: 1.25; overflow: hidden; text-decoration: none; box-sizing: border-box; }
.cal-ev .t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev .s { font-size: 11px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev.job.booked, .cal-ev.job.done { background: var(--dark); color: var(--gold); border-left: 3px solid var(--gold); }
.cal-ev.job.pending, .cal-ev.job.payment_failed { background: var(--warn-soft); color: var(--warn); border: 1px dashed #d97706; }
.cal-ev.google { background: #e5e7eb; color: #374151; }
.cal-ev.google.free { background: #f3f4f6; color: #6b7280; border: 1px dashed #d1d5db; }
.cal-legend { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.dot.booked { background: var(--dark); border: 1px solid var(--gold); }
.dot.pending { background: var(--warn-soft); border: 1px dashed #d97706; }
.dot.google { background: #e5e7eb; }

.cal-ev.block { background: repeating-linear-gradient(45deg, #eceff3, #eceff3 6px, #e2e6ec 6px, #e2e6ec 12px); color: #475569; }
.cal-ev .x { position: absolute; top: 1px; right: 1px; width: 20px; height: 20px; padding: 0; font-size: 13px; line-height: 1; background: rgba(255,255,255,.8); color: #374151; border-radius: 4px; }
.cal-allday.block { background: #e2e6ec; color: #475569; }
.cal-allday .x { width: 16px; height: 16px; padding: 0; font-size: 11px; background: transparent; color: inherit; }
.dot.block { background: #e2e6ec; }

/* ---------- Field mode, invoicing, chat ---------- */
.tag.live { background: var(--gold-soft); color: var(--gold-deep); border-color: var(--gold); }
.card.next { border-left: 4px solid var(--gold); }
.card.field .big { margin: 6px 0 2px; }
.clock { font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.btn.link, button.link { background: none; border: 0; color: var(--gold-deep); text-decoration: underline; padding: 0 6px; }

.lines { width: 100%; border-collapse: collapse; font-size: 15px; margin: 6px 0 14px; }
.lines td { padding: 8px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.lines td:last-child { text-align: right; white-space: nowrap; padding-left: 12px; }
.lines tr.paid td { color: var(--muted); }
.lines tr.sum td { font-weight: 700; border-bottom: 0; padding-top: 12px; }
.lines tr.muted td { color: var(--muted); border-bottom: 0; padding: 2px 0; }
.lines tr.due td { font-weight: 700; font-size: 17px; border-top: 2px solid var(--ink); border-bottom: 0; padding-top: 10px; }

.itemrow { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.itemrow span:last-child { white-space: nowrap; }
.itemrow .muted.small { display: block; margin-top: 2px; }
.itemrow .x { background: none; border: 0; color: var(--danger); font-size: 18px; line-height: 1; padding: 0 2px; cursor: pointer; }
.additem { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.card.approve { border: 2px solid var(--gold); }

.chat .thread { max-height: 46vh; overflow-y: auto; padding: 4px 2px 8px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 86%; }
.msg .b { padding: 9px 13px; border-radius: 14px; white-space: pre-wrap; word-break: break-word; }
.msg .t { font-size: 11px; color: var(--muted); margin-top: 3px; }
.msg.mine { align-self: flex-end; }
.msg.mine .b { background: var(--dark); color: #fff; border-bottom-right-radius: 4px; }
.msg.mine .t { text-align: right; }
.msg.theirs .b { background: #f3f4f6; border-bottom-left-radius: 4px; }
.msg.sys { align-self: center; max-width: 100%; }
.msg.sys .b { background: var(--gold-soft); color: var(--gold-deep); font-size: 13px; text-align: center; border-radius: 999px; padding: 5px 14px; }
.composer { display: flex; gap: 8px; margin-top: 12px; }
.composer input { flex: 1; margin: 0; }
.composer button { flex: 0 0 auto; }

.pill { display: inline-block; margin-top: 8px; background: var(--gold-soft); color: var(--gold-deep); border: 1px solid var(--gold); border-radius: 999px; font-size: 13px; padding: 3px 11px; }
.tabs a[role="button"] { cursor: pointer; }
details.card summary { cursor: pointer; font-weight: 600; }

/* Address row: town | state | ZIP */
.row.addr .city { flex: 1 1 130px; }
.row.addr .state { flex: 0 0 64px; }
.row.addr .zip { flex: 0 0 96px; }
.row.addr input { text-transform: none; }

/* ---------- Working day ---------- */
.letsgo { display: block; width: 100%; margin: 14px 0; padding: 18px; border-radius: var(--radius);
  background: var(--dark); color: var(--gold); border: 1px solid var(--gold); font-size: 22px; font-weight: 700;
  font-family: Georgia, "Times New Roman", serif; letter-spacing: .02em; cursor: pointer; }
.letsgo span { display: block; font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #d1d5db; margin-top: 4px; letter-spacing: 0; font-weight: 400; }
.daybar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  background: var(--gold-soft); border: 1px solid var(--gold); border-radius: var(--radius); padding: 10px 14px; margin: 14px 0; }
.daybar.done { background: var(--card); border-color: var(--line); }
/* Receipt · To-dos · End day: they share the width and take their own line on a phone. */
.daybar .daybar-btns { flex: 1 1 100%; gap: 6px; }
.daybar .daybar-btns > * { flex: 1 1 0; min-width: 0; white-space: nowrap; text-align: center; }
@media (min-width: 620px) { .daybar .daybar-btns { flex: 0 0 auto; } .daybar .daybar-btns > * { flex: 0 0 auto; } }
h3 { font-size: 15px; margin: 18px 0 8px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.err-text { color: var(--danger); }

.modal-back { position: fixed; inset: 0; background: rgba(17, 17, 17, .55); z-index: 50;
  display: flex; align-items: flex-end; justify-content: center; padding: 16px; overflow-y: auto; }
.modal { background: var(--card); border-radius: 16px; padding: 20px 18px; width: 100%; max-width: 520px;
  max-height: calc(100vh - 32px); overflow-y: auto; border-top: 3px solid var(--gold); box-shadow: 0 18px 48px rgba(0,0,0,.25); }
@media (min-width: 640px) { .modal-back { align-items: center; } }

.todos .todo { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line); }
.todos .todo .check { margin: 8px 0; flex: 1; }
.todos .x { background: none; border: 0; color: var(--muted); font-size: 18px; cursor: pointer; padding: 0 4px; }
.firstjob { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }

/* Unread messages + payment pills */
.card.unread { border-left: 4px solid var(--gold); }
.thread-row { display: block; padding: 10px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.thread-row:first-of-type { border-top: 0; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pills .pill { margin-top: 0; }
.pill.muted-pill { background: #f3f4f6; color: var(--muted); border-color: var(--line); }
.pill.err-pill { background: var(--danger-soft); color: var(--danger); border-color: #fca5a5; }

/* Chat button with unread count, beside Call / Text */
.chatbtn { position: relative; }
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--gold); color: var(--dark); font-size: 12px; font-weight: 700; margin-left: 6px; }
/* Call · Text · Chat in one row of equal buttons, Directions full width underneath */
.contact-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.contact-btns .three { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.contact-btns .btn { display: flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; margin: 0; padding: 13px 4px; font-size: 15px; white-space: nowrap; }
.contact-btns .badge { margin-left: 6px; min-width: 18px; height: 18px; font-size: 11px; padding: 0 5px; }
.note.welcome { background: var(--gold-soft); border-color: var(--gold); color: var(--ink); }

/* Calendar drag + suggested times */
.cal-ev.draggable { cursor: grab; -webkit-user-drag: none; touch-action: pan-y; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
body.dragging, body.dragging * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }
.cal-ev.ghost { position: absolute; z-index: 5; background: rgba(212, 175, 55, .28); border: 2px dashed var(--gold-deep); color: var(--ink); border-radius: 8px; pointer-events: none; padding: 3px 6px; overflow: hidden; }
.cal-ev.proposal { background: repeating-linear-gradient(45deg, var(--gold-soft), var(--gold-soft) 6px, #fff 6px, #fff 12px); border: 1px dashed var(--gold-deep); color: var(--gold-deep); }
.cal-ev.proposed { outline: 2px dashed var(--gold-deep); outline-offset: -2px; }
.dot.proposal { background: var(--gold-soft); border: 1px dashed var(--gold-deep); }

/* Welcome page */
.cover { text-align: center; padding-top: 8px; }
.cover-photo { width: 148px; height: 148px; margin: 6px auto 0; border-radius: 50%; overflow: hidden;
  border: 3px solid var(--gold); box-shadow: 0 8px 24px rgba(0,0,0,.15); background: var(--dark);
  display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
.cover-photo img { width: 100%; height: 100%; object-fit: cover; }
.cover-photo span { color: var(--gold); font-family: Georgia, "Times New Roman", serif; font-size: 64px; }
.cover-photo.small { width: 84px; height: 84px; margin: 0; flex: 0 0 auto; }
.cover-photo.small span { font-size: 36px; }
.cover-card { text-align: left; margin-top: -40px; padding-top: 56px; font-size: 17px; line-height: 1.6; }
.cover-card p { margin: 0 0 14px; }
.cover-hi { font-family: Georgia, "Times New Roman", serif; font-size: 24px; line-height: 1.3; color: var(--dark); }
.cover-sig { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 22px; color: var(--gold-deep); margin-top: 18px !important; }
.cover-actions button { width: 100%; font-size: 18px; padding: 16px; }
.cover-foot { margin-top: 12px; }
.cover-edit { display: flex; gap: 16px; align-items: center; margin: 10px 0 6px; }
/* v113g: the browser keeps vertical scrolling; horizontal is ours, so a swipe across the
   calendar changes the day/week/month instead of triggering a back-gesture. */
.calswipe { touch-action: pan-y; }
.card.opening { border-left: 4px solid var(--ok); }
/* The three choices on an opening carry equal weight: suggest it, leave it, or go look at the job.
   This row used to borrow .contact-row from the settings page, whose 24px/1fr/1fr grid is built for
   a radio button and two fields — it allotted "Suggest it", the primary action, 24 pixels. */
.opening-actions { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); gap: 8px; }
.opening-actions > * { flex: 1 1 0; min-width: 0; white-space: nowrap; padding-left: 10px; padding-right: 10px; }
/* The secondaries carry a 1px border and the primary does not, which flex-basis:0 does not
   account for — it left the primary 2px narrower than its neighbours. A transparent border
   of the same width makes all three measure identically. */
.opening-actions > button:not(.secondary) { border: 1px solid transparent; }

/* Reviews + invoices */
.stars { color: var(--gold); letter-spacing: 1px; }
.stars .off { color: #d1d5db; }
.big-stars { font-size: 26px; }
.stars.pick { display: flex; gap: 4px; margin: 6px 0 4px; }
.stars.pick button { background: none; border: 0; padding: 2px 4px; font-size: 38px; line-height: 1; color: #d1d5db; cursor: pointer; }
.stars.pick button.on { color: var(--gold); }
.cover-reviews { text-align: left; }
.cover-reviews .rev { border-top: 1px solid var(--line); padding: 12px 0 4px; }
.cover-reviews .rev p { margin: 4px 0; }
.note.private { background: #f3f4f6; border-color: var(--line); }
.stats { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 6px; }
.stat { flex: 1 1 140px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.stat strong { font-size: 20px; }

/* v20: receipts, measurements, assembly */
label.btn { margin: 0; }
label.btn.disabled { opacity: .6; pointer-events: none; }
.btn.snap { width: 100%; padding: 15px 18px; font-size: 17px; }
.receipt-row { display: flex; gap: 12px; align-items: flex-start; }
.rthumb { flex: 0 0 56px; width: 56px; height: 72px; border-radius: 8px; overflow: hidden; background: #eee; border: 1px solid var(--line); }
.rthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.item.receipt .tag { margin-right: 6px; }
.receipt-edit { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 4px; }
.item-line { gap: 6px; margin-top: 6px; align-items: center; }
.item-line input { margin: 0; }
.x-btn { background: none; color: var(--muted); border: 1px solid var(--line); padding: 6px 10px; border-radius: 8px; }
.measures .size { font-weight: 600; font-variant-numeric: tabular-nums; }
input.bad { border-color: var(--danger); background: var(--danger-soft); }
.assembly .links { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 8px; }
.assembly .links .btn { justify-content: flex-start; text-align: left; }
.assembly-fields { border-left: 3px solid var(--gold); padding-left: 12px; margin: 6px 0 14px; }
.scan-btn { flex: 0 0 auto; padding: 11px 14px; }
.assemble-toggle strong { color: var(--ink); }
.assemble-link { margin: 4px 2px 14px; }

/* v21: notifications, quotes, before & after */
.note.nudge a { margin-left: 6px; }
.steps-list { margin: 6px 0 4px; padding-left: 20px; }
.steps-list li { margin: 4px 0; }
.card.quote.sent { border-color: var(--gold); }
.quote-card { border: 2px solid var(--gold); }
.quote-price { font-size: 30px; font-weight: 700; margin: 4px 0 8px; font-family: Georgia, serif; }
.work { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* On a phone, After goes under Before — two columns leave no room for the + Add buttons. */
@media (max-width: 560px) { .work { grid-template-columns: 1fr; gap: 16px; } }
.work-col .topbar .btn { flex: 0 0 auto; width: auto; }
.work-col .topbar strong { min-width: 0; }
.work-col .topbar { margin-bottom: 4px; }
.photos.two { grid-template-columns: repeat(2, 1fr); margin-top: 6px; }
.photos .ph .star { position: absolute; left: 4px; top: 4px; width: 28px; height: 28px; padding: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 15px; }
.photos .ph .star.on { background: var(--gold); color: var(--dark); }
.cover-work .work-job { padding: 10px 0; border-top: 1px solid var(--line); }
.cover-work .work-job:first-of-type { border-top: 0; padding-top: 4px; }
.cover-work { text-align: left; }
.contact-row { display: grid; grid-template-columns: 24px 1fr 1fr; gap: 6px 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.contact-row input { margin: 0; }
.contact-row .check { grid-column: 2; margin: 0; }
.contact-row .row-btns { grid-column: 3; display: flex; gap: 4px; justify-content: flex-end; }
.contact-row .prio { font-weight: 700; color: var(--gold-deep); text-align: center; }
.callus .row { gap: 8px; }
.cover-call { text-align: center; margin-top: 4px; }

/* v22: month view */
.mg { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--line); gap: 1px; }
.mg-head { background: var(--dark); color: var(--gold); font-size: 12px; font-weight: 600; text-align: center; padding: 6px 0; }
.mg-cell { background: #fff; min-height: 92px; padding: 4px 4px 6px; cursor: pointer; overflow: hidden; }
.mg-cell:hover { background: var(--gold-soft); }
.mg-cell.other { background: #f6f6f4; }
.mg-cell.other .mg-date { color: #b5b5b5; }
.mg-cell.past .mg-item { opacity: .6; }
.mg-cell.today .mg-date { background: var(--dark); color: var(--gold); border-radius: 50%; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; }
.mg-date { font-size: 12px; font-weight: 700; margin-bottom: 2px; }
.mg-item { display: block; font-size: 11px; line-height: 1.3; padding: 1px 4px; margin-top: 2px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; color: var(--ink); background: #eef2ff; border-left: 3px solid #4f46e5; }
.mg-item.booked, .mg-item.done { background: var(--dark); color: #f3e2a9; border-left-color: var(--gold); }
.mg-item.pending, .mg-item.payment_failed { background: var(--warn-soft); border-left-color: #d97706; }
.mg-item.proposal { background: var(--gold-soft); border-left-color: var(--gold); }
.mg-item.block { background: #f3f4f6; border-left-color: #9ca3af; color: var(--muted); }
.mg-item.google { background: #eff6ff; border-left-color: #60a5fa; }
.mg-more { font-size: 11px; color: var(--muted); margin-top: 2px; padding-left: 4px; }
@media (max-width: 560px) {
  .mg-cell { min-height: 64px; padding: 3px 2px; }
  .mg-item { font-size: 9.5px; padding: 1px 2px; border-left-width: 2px; }
  .mg-head { font-size: 11px; }
}

/* v23: jobs from other apps */
.cal-ev.outside { background: #0f766e; color: #ecfeff; border-left: 3px solid #5eead4; text-decoration: none; }
.cal-ev.outside.needs_time { background: repeating-linear-gradient(45deg, #fef3c7, #fef3c7 6px, #fde68a 6px, #fde68a 12px); color: #78350f; border-left-color: #d97706; }
.cal-ev.outside.done { opacity: .6; }
.mg-item.outside { background: #ccfbf1; border-left-color: #0f766e; color: #134e4a; }
.mg-item.outside.needs_time { background: #fef3c7; border-left-color: #d97706; color: #78350f; }
.dot.outside { background: #0f766e; border: 1px solid #5eead4; }
.shot-wrap { text-align: center; margin-bottom: 4px; }
.shot-thumb { display: inline-block; width: 120px; max-height: 220px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.shot-thumb img { width: 100%; display: block; }
.card.needs-time { border-color: #d97706; }

/* v24: finishing other-app jobs */
.extra-line .chips { gap: 6px; }
.extra-line .x-btn { width: auto; flex: 0 0 auto; padding: 4px 10px; line-height: 1; }
.add-line { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 4px; }
.tr-card { border-color: #0f766e; }
table.lines { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 15px; }
table.lines td { padding: 8px 0; border-bottom: 1px solid var(--line); }
table.lines tr.due td { border-top: 2px solid var(--ink); border-bottom: 0; }

/* v25: add a job by hand, clash timeline, referrals */
.add-job-row { display: flex; justify-content: flex-end; margin: 0 0 10px; }
.add-job-row .btn { flex: 0 0 auto; padding: 9px 14px; font-size: 15px; }
.tag.muted-tag { background: #f3f4f6; color: var(--muted); }
.clash { border-color: var(--warn); }
.clash h2 { display: flex; align-items: center; gap: 8px; }
.warn-dot { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--warn); color: #fff; font-size: 14px; font-weight: 800; flex: none; }
.timeline { border-left: 3px solid var(--line); margin: 0 0 14px 4px; padding-left: 0; }
.tl-row { display: grid; grid-template-columns: 96px 1fr; gap: 8px; align-items: baseline; padding: 7px 10px; margin: 0 0 4px; border-radius: 0 8px 8px 0; font-size: 14px; background: #f8f8f6; }
.tl-row .tl-time { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-row.hit { background: var(--danger-soft); box-shadow: inset 3px 0 0 var(--danger); }
.tl-row.new { background: repeating-linear-gradient(135deg, var(--warn-soft), var(--warn-soft) 8px, #fff6db 8px, #fff6db 16px); box-shadow: inset 3px 0 0 var(--warn); font-weight: 700; }
.tl-tag { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--danger); margin-left: 4px; }
.tl-row.new .tl-tag { color: var(--warn); }
.opts { display: flex; flex-direction: column; gap: 8px; }
.opt { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-weight: 400; cursor: pointer; margin: 0; }
.opt input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.opt span { display: flex; flex-direction: column; gap: 2px; }
.opt.on { border-color: var(--gold); background: var(--gold-soft); }
.refer-card .credit { font-size: 28px; font-weight: 800; margin: 4px 0; }
.refer-card .ref-row { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.card-add #pay-element { margin: 10px 0; }

/* v26: partners */
.item.faded { opacity: .55; }
.partners-card select { margin-top: 4px; }
.contact-btns .three button { width: 100%; margin: 0; padding: 13px 4px; font-size: 15px; }

/* English / Español, top right of the guest pages */
.langs { display: flex; justify-content: flex-end; gap: 6px; margin: 2px 0 6px; }
/* The guest's top line: a question on the left, the language switch on the right. */
.topline { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 6px; }
.topline .langs { margin: 0; }
.topline .chip { font-size: 13px; padding: 4px 12px; text-decoration: none; color: inherit; white-space: nowrap; }
.topline { flex-wrap: wrap; justify-content: flex-start; }
.topline .langs { margin-left: auto; }
.ask-card { margin-top: 8px; }
.langs .lang { font-size: 13px; padding: 4px 10px; border: 1px solid var(--line, #d9d4c7); border-radius: 999px; cursor: pointer; color: #6b7280; background: #fff; }
.langs .lang.on { background: #1a1a1a; color: #e9c46a; border-color: #1a1a1a; }
.chat-orig { color: #6b7280; font-size: 12px; margin-top: 3px; font-style: italic; }
.pill.warn-pill { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.later { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line, #d9d4c7); }

/* v40: the Now card, Fix times, Text booking link */
.card.next.running { border-left-color: #15803d; }
.card.next .clock { font-variant-numeric: tabular-nums; }
.fixtimes { margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fafafa; }
.fixtimes .row > div { flex: 1 1 0; min-width: 0; }
.fixtimes input[type="time"], .fixtimes input[type="date"] { width: 100%; box-sizing: border-box; }
.add-job-row { gap: 8px; flex-wrap: wrap; }

/* v41: green jobs, blue estimate visits */
.cal-ev.job.booked, .cal-ev.job.done { background: #166534; color: #f0fdf4; border-left: 3px solid #4ade80; }
.cal-ev.job.done { opacity: .75; }
.mg-item.booked, .mg-item.done { background: #dcfce7; color: #14532d; border-left-color: #16a34a; }
.dot.booked { background: #166534; border: 1px solid #4ade80; }
.cal-ev.visit { background: #1d4ed8; color: #eff6ff; border-left: 3px solid #93c5fd; text-decoration: none; }
.cal-ev.visit.done { opacity: .6; }
.mg-item.visit { background: #dbeafe; color: #1e3a8a; border-left-color: #1d4ed8; }
.dot.visit { background: #1d4ed8; border: 1px solid #93c5fd; }
.est-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: #fff; background: #1d4ed8; border-radius: 4px; padding: 1px 5px; vertical-align: 2px; margin-right: 4px; }
.card.visit, .visits-card { border-left: 4px solid #1d4ed8; }
.visit-row { display: block; text-decoration: none; color: inherit; }
.visit-notes { border-left: 4px solid #93c5fd; }
.est-choice { display: flex !important; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; height: auto !important; padding: 14px 16px !important; margin-top: 10px; white-space: normal; }
.btn.est-choice .muted { color: inherit; opacity: .75; font-weight: 400; }
/* v43: the three buttons above the jobs fit one row on a phone */
@media (max-width: 520px) {
  .add-job-row { flex-wrap: nowrap; gap: 6px; }
  .add-job-row .btn { flex: 1 1 auto; min-width: 0; padding: 8px 6px; font-size: 13px; line-height: 1.2; white-space: nowrap; text-align: center; justify-content: center; letter-spacing: -.01em; }
}
@media (max-width: 370px) { .add-job-row .btn { font-size: 12px; padding: 8px 2px; } }
@media (max-width: 340px) { .add-job-row { gap: 4px; } .add-job-row .btn { font-size: 11px; padding: 7px 1px; letter-spacing: -.02em; } }

/* v45: customers, quick invoice, talk it in */
.talkin { margin: 4px 0 12px; padding: 12px; border: 1px dashed var(--line); border-radius: 12px; background: #fafafa; }
.talk-btn { width: 100%; font-size: 17px; min-height: 50px; }
.talkin a { cursor: pointer; }
.cpick { margin-bottom: 4px; }
.cpick-list { border: 1px solid var(--line); border-radius: 10px; margin-top: 6px; background: #fff; overflow: hidden; }
.cpick-row { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-bottom: 1px solid var(--line); cursor: pointer; color: inherit; text-decoration: none; }
.cpick-row:last-child { border-bottom: 0; }
.cpick-row:active, .cpick-row:hover { background: var(--gold-soft); }
.note.picked a { cursor: pointer; }
.cust-row { display: block; color: inherit; text-decoration: none; }
.cust-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.cust-actions .btn { flex: 1 1 auto; text-align: center; justify-content: center; }
.qi-item { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.qi-item .row { align-items: center; }
.qi-item .x { flex: 0 0 auto; }
.wrap-btns { flex-wrap: wrap; } .wrap-btns > * { flex: 1 1 40%; white-space: nowrap; }

/* v46 */
.note.price-note { line-height: 1.45; }
.backup-dev { padding: 10px 0; border-bottom: 1px solid var(--line); }
.backup-log { white-space: pre-wrap; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px; margin: 6px 0 0; max-height: 220px; overflow: auto; }
.pill.ok-pill { background: #dcfce7; color: var(--ok); border-color: #86efac; }
.backup-dev .pill { flex: 0 0 auto; }
/* v49: team */
.wk-row { display: flex; gap: 12px; align-items: center; }
.wk-row.off { opacity: .6; }
.wk-photo { border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 1px solid var(--line); }
.wk-initials { display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 15px; }
.wk-entry { padding: 10px 0; border-bottom: 1px solid var(--line); }
.cal-who { margin: -2px 0 10px; flex-wrap: wrap; }
.crew-day { margin: 18px 0 6px; font-size: 15px; border-bottom: 2px solid var(--gold); padding-bottom: 4px; }
.crew-job { display: block; }
.crew-clock { font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; margin: 4px 0; }
.card.running { border-left: 4px solid var(--ok); }
/* v51: follow-ups */
.lead-card { display: block; margin-bottom: 10px; border-left: 4px solid var(--line); }
.lead-card.due { border-left-color: #d97706; background: #fffbeb; }
.lead-call { margin-top: 8px; }
.lead-call .wrap-btns > * { flex: 1 1 45%; white-space: normal; }
.zelle-first { background: var(--gold-soft); border: 1px solid var(--gold); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 18px; }
.zelle-first .actions button { width: 100%; }

/* v55: text consent — links in the "I agree" box, and the record on Connor's customer page */
.agree-links { display: inline-block; margin-left: 4px; white-space: nowrap; }
.agree-links a { color: inherit; text-decoration: underline; }
.consents { margin-top: 6px; display: grid; gap: 8px; }
.consent { border-left: 3px solid #d4af37; padding: 4px 0 4px 10px; line-height: 1.45; }

/* v56: Connor's "Can't do this job" choices */
.choices { display: grid; gap: 10px; margin: 6px 0 12px; }
.choices .check { align-items: flex-start; }
.choices input[type=radio] { margin-top: 3px; }

/* v58: "Share it on Google too?" under a client's review */
.google-ask { margin-top: 14px; padding-top: 12px; border-top: 1px solid #e5e7eb; }
.google-ask p { margin: 0 0 6px; }

/* v59: Google reviews on the booking page */
.g-reviews a.stars { text-decoration: none; }
.g-who { display: flex; align-items: center; gap: 8px; }
.g-who img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.g-who a { color: inherit; font-weight: 600; text-decoration: none; }
.g-who .muted { margin-left: auto; }
.g-attr { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 6px; }
.g-attr a { color: inherit; }

/* v60: Owed button and list */
.owed-btn { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 12px 16px; margin: 0 0 12px;
  border: 1px solid #d4af37; border-radius: 12px; background: #fffbea; color: inherit; text-decoration: none; }
.owed-btn strong { font-size: 20px; }
.owed-btn.none { border-color: var(--line); background: transparent; }
.owed-list .owed-name { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.owed-line { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0 0; margin-top: 8px; border-top: 1px dashed var(--line); color: inherit; text-decoration: none; font-size: 14px; }
.owed-line > span:last-child { white-space: nowrap; }
.owed-btn .owed-sep { color: #9ca3af; }

/* v61: what a job really made */
.jobcost summary { cursor: pointer; }

/* v62: Analytics */
.tabs .tab-analytics { font-weight: 700; }
.analytics .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.mbars { display: flex; align-items: flex-end; gap: 4px; height: 160px; padding-top: 22px; border-bottom: 1px solid var(--line); position: relative; }
.mbar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; position: relative; cursor: pointer; min-width: 0; }
.mfill { background: #c9a227; border-radius: 4px 4px 0 0; }
.mbar:hover .mfill { background: #a8861a; }
.mlab { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center; font-size: 10px; color: var(--muted, #6b7280); white-space: nowrap; overflow: hidden; }
.mtip { position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); background: #1a1a1a; color: #fff; font-size: 12px; padding: 3px 7px; border-radius: 6px; white-space: nowrap; z-index: 2; }
.mbars + details { margin-top: 26px !important; }
.wbars { display: grid; gap: 6px; margin-top: 12px; }
.wrow { display: grid; grid-template-columns: 34px 1fr 24px; align-items: center; gap: 8px; }
.wtrack { height: 10px; background: #f3f4f6; border-radius: 5px; overflow: hidden; }
.wfill { height: 100%; background: #c9a227; border-radius: 5px; }

/* v63: Your take (Invoice tab) and the real cost of a discount */
.yourtake { border: 1px solid #d4af37; background: #fffdf3; }
.discount-cost { margin-top: 8px; line-height: 1.5; }

/* v64: Net Hourly Rate in the middle of the job's first line (All) */
.item .top .net-hourly { flex: 1; text-align: center; font-size: 13px; color: var(--muted, #6b7280); white-space: nowrap; padding: 0 8px; }
.item .top .net-hourly strong { color: var(--ink, #1a1a1a); font-size: 15px; }
.item .top.has-net { align-items: center; gap: 6px; }
.item .top.has-net > strong:first-child { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .top.has-net > .tag { flex: none; }
.item .top.has-net .net-hourly { flex: 1 0 auto; }
.item .top.has-net > strong:first-child { flex: 0 0 auto; max-width: 48%; }
.item .top.has-net .net-hourly { flex: 1 1 auto; min-width: 0; padding: 0 4px; font-size: 12px; }
.item .top.has-net .net-hourly strong { font-size: 14px; }

/* v66: paid / not paid beside the name on All */
.item .top > .who { display: flex; align-items: baseline; min-width: 0; flex: 0 1 auto; gap: 6px; }
.item .top > .who > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .top .pay-state { flex: none; font-size: 12px; font-weight: 700; white-space: nowrap; }
.item .top .pay-state.paid, .item .top .pay-state.clearing { color: #15803d; }
.item .top .pay-state.unpaid, .item .top .pay-state.update { color: #dc2626; }
.item .top.has-net > .who { max-width: 60%; }
/* On a phone there isn't room for all of it on one line: name, paid and Done stay up top; the rate drops just under. */
@media (max-width: 560px) {
  .item .top.has-net { flex-wrap: wrap; justify-content: space-between; row-gap: 2px; }
  .item .top.has-net > .who { max-width: calc(100% - 70px); }
  .item .top.has-net .net-hourly { order: 3; flex: 1 0 100%; text-align: left; padding: 0; font-size: 13px; }
  .item .top.has-net .net-hourly strong { font-size: 15px; }
}

/* v68: discount has to be added on purpose */
.discount-warn { background: var(--danger-soft); color: var(--danger); }
.discount-warn strong { color: var(--danger); }
.discount-on { padding: 8px 0; }
.discount-nudge { margin: 8px 0 0; color: var(--muted); }
.discount-nudge strong { color: var(--ink); }

/* v71: Stripe payouts */
a.payouts-strip { display: block; text-decoration: none; color: inherit; }
.payout-lines { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 4px; }
.payout-line { padding: 8px 0; border-bottom: 1px dashed var(--line); }
.payout-line:last-child { border-bottom: 0; }
.payout-line .top { display: flex; justify-content: space-between; gap: 8px; }
.payout-line.unmatched { background: #fff7ed; margin: 0 -8px; padding: 8px; border-radius: 8px; }
.err-text { color: #dc2626; }
.assign-box { margin-top: 6px; }
.assign-box select { width: 100%; }
.payouts-strip .top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ok-text { color: #15803d; }
.payother { margin-top: 8px; }
.snap-split { display: flex; gap: 8px; }
.snap-split .btn.snap { flex: 1; width: auto; padding: 14px 10px; font-size: 16px; }
.refundq { margin-top: 8px; }
.checkrow { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line, #eee); font-weight: normal; }
.checkrow input { width: auto; margin-top: 3px; }
.warn-text { color: #b45309; }
.flatrate { margin-top: 8px; }
.flat-edit { margin-top: 8px; }
.addrc { margin-top: 8px; padding: 10px; border: 1px solid var(--line, #e5e7eb); border-radius: 10px; }
.warn-card { border-left: 4px solid #d97706; }
.paycheck .snap-split .btn { flex: 1; }