/* fonts: self-hosted Rubik (display, numbers) + Heebo (text), Hebrew and Latin subsets */
@font-face { font-family: "Rubik"; src: url(/fonts/rubik-hebrew-wght-normal.woff2) format("woff2"); font-weight: 300 900; font-display: swap; unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Rubik"; src: url(/fonts/rubik-latin-wght-normal.woff2) format("woff2"); font-weight: 300 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Heebo"; src: url(/fonts/heebo-hebrew-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Heebo"; src: url(/fonts/heebo-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* NOVA GREEN CONSTRUCTION · CRM
   Layout: green brand bar on top, greeting + summary tiles, lead list (table on desktop, cards on phone),
   lead detail drawer sliding in from the start (right) edge. */
/* Palette "aerial roof plan": storm ink, mist, emerald (brand), mint glow (live only), solar (attention). */
:root {
  --bg: #f3f7f5; --surface: #ffffff; --sunk: #e9f1ed; --ink: #10231f; --muted: #586a66; --line: #d9e4df;
  --storm: #0b2a26; --storm-2: #0f3a33; --mint: #5ee3b0; --solar: #ffb224; --sun: #ffb224; --sun-ink: #2a1a00; --sun-soft: #fff3d6;
  --brand: #0f8f63; --brand-deep: #0b2a26; --brand-ink: #ffffff; --leaf: #5ee3b0;
  --accent: #08805a; --accent-ink: #ffffff; --accent-soft: #dff4ea; --accent-hi: #13b27b;
  --ok: #08805a; --ok-bg: #dff4ea; --warn: #8a5300; --warn-bg: #fdf0d3; --bad: #b42318; --bad-bg: #fde6e3; --info-bg: #e5edfd; --info: #2158c9;
  --violet: #6d43d1; --violet-bg: #efe9fd;
  --shadow: 0 1px 2px rgb(11 42 38 / .05), 0 12px 30px -18px rgb(11 42 38 / .28);
  --r: 18px; --r-sm: 12px;
  --display: "Rubik", "Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --body: "Heebo", "Rubik", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: "Rubik", "Heebo", system-ui, sans-serif; /* phone numbers & codes: tabular digits, no typewriter look */
  --m-shingle: #4a5560; --m-tile: #b5532c; --m-metal: #3f72a6; --m-flat: #6b7f3a; --m-other: #7a6a8c;
  /* roof-plan line pattern used on the storm band */
  --plan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='96' viewBox='0 0 160 96'%3E%3Cg fill='none' stroke='%235ee3b0' stroke-width='1' stroke-opacity='.16'%3E%3Cpath d='M0 0h160v96H0z'/%3E%3Cpath d='M0 0l40 48L0 96M160 0l-40 48 40 48M40 48h80M0 0l40 48M120 48L160 0'/%3E%3Cpath d='M80 0v20M80 76v20' stroke-dasharray='2 4'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #09141a; --surface: #0f1f27; --sunk: #0b1920; --ink: #e4efec; --muted: #8fa3a5; --line: #1d3440;
    --storm: #061a17; --storm-2: #0a2621; --sun: #ffc24d; --sun-ink: #2a1a00; --sun-soft: #3a2c0c;
    --brand: #10956a; --brand-deep: #060f14; --brand-ink: #ffffff; --leaf: #5ee3b0;
    --accent: #5ee3b0; --accent-ink: #03140c; --accent-soft: #10352a;
    --ok: #5ee3b0; --ok-bg: #10352a; --warn: #f5b83d; --warn-bg: #33270c; --bad: #ff8b7e; --bad-bg: #3b1916; --info-bg: #13283f; --info: #8fb8f0;
    --violet: #b9a5f0; --violet-bg: #2a2340;
    --shadow: 0 1px 0 rgb(0 0 0 / .3), 0 12px 30px -14px rgb(0 0 0 / .6);
    --m-shingle: #a9b4bf; --m-tile: #f08a5d; --m-metal: #7fb0e6; --m-flat: #b4cc6e; --m-other: #c2b0d6;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font: 15px/1.55 var(--body); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mono { font-family: var(--mono); font-size: .9em; direction: ltr; unicode-bidi: isolate; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
svg.i { width: 18px; height: 18px; flex: none; }

/* buttons & fields */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-sm); padding: 8px 14px; cursor: pointer; white-space: nowrap; font-weight: 500; transition: border-color .15s, background .15s, transform .05s; }
.btn:hover { border-color: var(--accent); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn.primary:hover { filter: brightness(1.06); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--accent); }
.btn.small { padding: 5px 11px; font-size: .86rem; }
.btn:disabled { opacity: .55; cursor: default; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field > span { font-size: .82rem; font-weight: 600; color: var(--muted); }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=tel], select, textarea {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 12px; min-width: 0; width: 100%; transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea { resize: vertical; min-height: 70px; }

/* brand bar */
.top { display: flex; align-items: center; gap: 20px; padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); background: linear-gradient(90deg, var(--brand-deep), var(--brand)); color: var(--brand-ink); position: sticky; top: 0; z-index: 5; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.brand svg { width: 34px; height: 34px; flex: none; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.05; direction: ltr; text-align: left; }
.brand-txt b { font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: .06em; }
.brand-txt small { font-size: .62rem; font-weight: 500; letter-spacing: .32em; opacity: .85; }
.nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.nav a { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; color: rgb(255 255 255 / .85); padding: 7px 13px; border-radius: 99px; font-weight: 500; }
.nav a:hover { background: rgb(255 255 255 / .1); color: #fff; }
.nav a.on { background: rgb(255 255 255 / .18); color: #fff; }
.who { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.who .btn { background: rgb(255 255 255 / .12); border-color: transparent; color: #fff; }
.who .btn:hover { background: rgb(255 255 255 / .22); }
.role { font-size: .72rem; font-weight: 600; padding: 1px 9px; border-radius: 99px; background: rgb(255 255 255 / .18); }

main { padding: 22px max(16px, env(safe-area-inset-right)) 48px max(16px, env(safe-area-inset-left)); max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
h1 { font-family: var(--display); font-weight: 600; font-size: 1.5rem; margin: 0; text-wrap: balance; }
h2 { font-size: 1rem; font-weight: 600; margin: 0; }

/* avatar */
.av { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-weight: 600; font-size: .85rem; flex: none; color: #fff; background: var(--brand); }
.av.sm { width: 28px; height: 28px; font-size: .75rem; }
.av.c0 { background: #1e7d46; } .av.c1 { background: #2d6fb0; } .av.c2 { background: #b5532c; } .av.c3 { background: #6b4fb8; } .av.c4 { background: #0f7f86; } .av.c5 { background: #a33d6b; }
.who .av { background: rgb(255 255 255 / .2); }

/* greeting + tiles */
.hello { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hello h1 { font-size: 1.6rem; }
.hello p { margin: 2px 0 0; color: var(--muted); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.tile { background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); padding: 14px 16px; display: flex; align-items: center; gap: 12px; border: 1px solid transparent; text-align: start; min-width: 0; }
button.tile { cursor: pointer; }
button.tile:hover { border-color: var(--accent); }
.tile-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.tile-ic svg { width: 22px; height: 22px; }
.tile-ic.g { background: var(--accent-soft); color: var(--accent); } .tile-ic.b { background: var(--info-bg); color: var(--info); }
.tile-ic.o { background: var(--warn-bg); color: var(--warn); } .tile-ic.v { background: var(--violet-bg); color: var(--violet); } .tile-ic.k { background: var(--ok-bg); color: var(--ok); }
.tile-n { font-size: 1.6rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile-l { font-size: .85rem; color: var(--muted); }

/* lead list */
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tabs { display: flex; gap: 2px; background: var(--sunk); padding: 4px; border-radius: 99px; }
.tabs button { border: 0; background: transparent; padding: 7px 14px; border-radius: 99px; cursor: pointer; font-weight: 500; color: var(--muted); }
.tabs button.on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgb(0 0 0 / .08); }
.tabs .count { display: inline-block; min-width: 22px; padding: 0 6px; margin-inline-start: 6px; border-radius: 99px; background: var(--line); font-size: .75rem; font-weight: 600; color: var(--ink); text-align: center; }
.tabs button.on .count { background: var(--accent); color: var(--accent-ink); }
.toolbar .grow { flex: 1 1 200px; min-width: 0; max-width: 340px; }
.toolbar select { width: auto; }
.bulk { display: flex; gap: 10px; align-items: center; background: var(--accent-soft); border: 1px solid var(--accent); padding: 10px 14px; border-radius: var(--r); flex-wrap: wrap; }
.bulk select { width: auto; min-width: 160px; }

.table-wrap { background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 1040px; }
th, td { text-align: start; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: .78rem; color: var(--muted); font-weight: 600; background: var(--surface); position: sticky; top: 0; }
tbody tr { cursor: pointer; transition: background .12s; }
tbody tr:hover { background: var(--sunk); }
tbody tr.sel { background: var(--accent-soft); }
tbody tr:last-child td { border-bottom: 0; }
.person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.person > div { min-width: 0; }
td.name { font-weight: 600; }
td .sub { display: block; font-size: .8rem; color: var(--muted); font-weight: 400; }
.addr { text-align: right; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.empty { padding: 48px 16px; text-align: center; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.empty svg { width: 46px; height: 46px; color: var(--leaf); }
.empty strong { color: var(--ink); font-size: 1.05rem; }

/* chips + status pills */
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 600; padding: 3px 10px; border-radius: 99px; white-space: nowrap; background: var(--sunk); color: var(--muted); }
.chip.ok { background: var(--ok-bg); color: var(--ok); }
.chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.bad { background: var(--bad-bg); color: var(--bad); }
.chip.info { background: var(--info-bg); color: var(--info); }
.chip.run::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 1s infinite alternate; }
@keyframes pulse { from { opacity: .25 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .chip.run::before { animation: none; } * { transition: none !important; } }
.st { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; padding: 3px 10px; border-radius: 99px; white-space: nowrap; background: var(--sunk); color: var(--muted); }
.st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.st.new { background: var(--accent-soft); color: var(--accent); }
.st.contacted { background: var(--info-bg); color: var(--info); }
.st.qualified { background: var(--violet-bg); color: var(--violet); }
.st.won { background: var(--accent-soft); color: var(--accent); }
.st.appt { background: var(--ok-bg); color: var(--ok); }
.st.lost { color: var(--muted); }

/* drawer */
.scrim { position: fixed; inset: 0; background: rgb(10 25 15 / .35); z-index: 10; backdrop-filter: blur(1px); }
.drawer { position: fixed; top: 0; bottom: 0; inset-inline-start: 0; width: min(580px, 100%); background: var(--bg); z-index: 11; overflow-y: auto; display: flex; flex-direction: column; box-shadow: 0 0 40px rgb(0 0 0 / .18); }
.drawer header { display: flex; gap: 12px; align-items: center; padding: 16px 18px; padding-top: max(16px, env(safe-area-inset-top)); background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 1; }
.drawer header h1 { flex: 1; font-size: 1.3rem; min-width: 0; }
.drawer .body { padding: 16px 18px 32px; display: flex; flex-direction: column; gap: 14px; }
.sec { display: flex; flex-direction: column; gap: 10px; background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); padding: 14px 16px; }
.sec-h { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.sec-h h2 { font-size: .95rem; }
.kv { display: grid; grid-template-columns: 90px 1fr; gap: 8px 12px; align-items: center; }
.kv > :nth-child(odd) { color: var(--muted); font-size: .88rem; }
.kv > * { min-width: 0; overflow-wrap: anywhere; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row > .grow { flex: 1 1 180px; min-width: 0; }

/* result panels (tax, roof) */
.tax { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--surface); }
.tax-head { display: flex; gap: 10px; align-items: center; padding: 11px 14px; flex-wrap: wrap; }
.tax-head.ok { background: var(--ok-bg); color: var(--ok); }
.tax-head.warn { background: var(--warn-bg); color: var(--warn); }
.tax-head.bad { background: var(--bad-bg); color: var(--bad); }
.tax-head.info { background: var(--info-bg); color: var(--info); }
.tax-head.none { background: var(--sunk); color: var(--muted); }
.tax-head strong { flex: 1; min-width: 0; font-weight: 600; }
.years { width: 100%; min-width: 0; border-collapse: collapse; }
.years td, .years th { padding: 9px 14px; border-bottom: 1px solid var(--line); font-size: .9rem; }
.years tr:last-child td { border-bottom: 0; }
.years .y { font-family: var(--mono); font-weight: 500; }
.tax-foot { display: flex; gap: 8px; padding: 9px 14px; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--line); font-size: .85rem; }
.err { color: var(--bad); font-size: .9rem; }

.note { border-inline-start: 3px solid var(--leaf); padding: 4px 12px; background: var(--sunk); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.note .meta { font-size: .78rem; color: var(--muted); }
.note p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.events { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: .85rem; color: var(--muted); }

/* panels (reps, settings) */
.panel { background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 16px; align-items: start; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; align-items: end; }
.check { display: flex; gap: 8px; align-items: center; font-size: .92rem; }
.ok-dot, .bad-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); margin-inline-end: 6px; flex: none; }
.bad-dot { background: var(--bad); }
.copybox { display: flex; gap: 6px; }
.copybox input { font-family: var(--mono); font-size: .85rem; direction: ltr; }
.panel .table-wrap { box-shadow: none; border: 1px solid var(--line); }

/* login */
#app { min-height: 100%; }
.login { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1fr 1fr; }
.login-art { background: linear-gradient(160deg, var(--brand-deep), var(--brand) 70%); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; position: relative; overflow: hidden; }
.login-art .brand svg { width: 52px; height: 52px; }
.login-art .brand-txt b { font-size: 1.6rem; }
.login-art .brand-txt small { font-size: .8rem; }
.login-art h2 { font-size: 1.9rem; font-weight: 600; line-height: 1.25; max-width: 16ch; text-wrap: balance; }
.login-art p { margin: 0; opacity: .85; max-width: 38ch; }
.login-art .roofline { position: absolute; inset-inline-start: -10%; bottom: -12%; width: 120%; opacity: .12; color: #fff; pointer-events: none; }
.login-form { display: grid; place-items: center; padding: 32px max(16px, env(safe-area-inset-right)) 32px max(16px, env(safe-area-inset-left)); background: var(--bg); }
.login form { width: min(380px, 100%); display: flex; flex-direction: column; gap: 14px; background: var(--surface); border-radius: 18px; box-shadow: var(--shadow); padding: 28px; }
.login form h1 { font-size: 1.4rem; }
.login form .btn.primary { padding: 11px; font-size: 1rem; }
.login .mobile-brand { display: none; }
@media (max-width: 800px) {
  .login { grid-template-columns: 1fr; }
  .login-art { display: none; }
  .login .mobile-brand { display: flex; color: var(--brand); justify-content: center; }
}

.toast { position: fixed; bottom: max(18px, env(safe-area-inset-bottom)); inset-inline-end: 18px; background: var(--ink); color: var(--bg); padding: 12px 18px; border-radius: 12px; z-index: 30; max-width: calc(100% - 36px); box-shadow: var(--shadow); display: flex; gap: 8px; align-items: center; }
.toast::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--leaf); flex: none; }
.toast.bad { background: var(--bad); color: #fff; }
.toast.bad::before { background: #fff; }

/* products + roof report */
.prod { font-size: .86rem; font-weight: 600; }
.sat { display: block; width: 100%; aspect-ratio: 16 / 10; max-width: 100%; object-fit: cover; background: var(--sunk); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.stat { display: flex; flex-direction: column; gap: 1px; padding: 11px 14px; min-width: 0; }
.stat + .stat { border-inline-start: 1px solid var(--line); }
.stat-l { font-size: .76rem; font-weight: 600; color: var(--muted); }
.stat-v { font-family: var(--mono); font-size: 1.25rem; font-weight: 500; direction: ltr; text-align: right; }
.stat-s { font-size: .75rem; color: var(--muted); }
.roof-note { margin: 0; padding: 9px 14px 11px; font-size: .78rem; color: var(--muted); }
.mat { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .88rem; white-space: nowrap; }
.mat::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--muted); flex: none; }
.mat-shingle::before { background: var(--m-shingle); } .mat-tile::before { background: var(--m-tile); }
.mat-metal::before { background: var(--m-metal); } .mat-flat::before { background: var(--m-flat); }
.mat-other::before { background: var(--m-other); } .mat-unknown { color: var(--muted); }
.mat-unknown::before { background: transparent; border: 1.5px dashed var(--muted); }
.mats td.strong { font-weight: 600; font-size: 1rem; }
.sat-wrap { position: relative; }
.sat-toggle { position: absolute; bottom: 10px; inset-inline-start: 10px; background: rgb(0 0 0 / .55); color: #fff; border-color: transparent; }
.facet-label { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 50%; background: #FFD400; color: #1a1a1a; font-weight: 700; font-family: var(--mono); font-size: .8rem; }
.mat-select { width: auto; padding: 4px 8px; font-size: .85rem; }
details.facets { border-top: 1px solid var(--line); }
details.facets > summary { padding: 10px 14px; cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--accent); }

/* phone */
@media (max-width: 760px) {
  .top { gap: 10px; }
  .top .nav { order: 3; flex-basis: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .who .name { display: none; }
  .hello h1 { font-size: 1.35rem; }
  .tiles { display: flex; overflow-x: auto; gap: 10px; margin-inline: -16px; padding: 2px 16px 6px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .tiles > .tile { flex: 0 0 158px; scroll-snap-align: start; }
  .tile { padding: 12px; gap: 10px; }
  .tile-ic { width: 36px; height: 36px; }
  .tile-n { font-size: 1.3rem; }
  .toolbar .grow { max-width: none; flex-basis: 100%; }
  .kv { grid-template-columns: 1fr; }
  .kv > :nth-child(odd) { margin-top: 6px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-inline-start: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  /* lead table becomes cards */
  .table-wrap { background: transparent; box-shadow: none; overflow: visible; }
  table.leads, table.leads tbody { display: block; min-width: 0; }
  table.leads thead { display: none; }
  table.leads tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); padding: 12px 14px; margin-bottom: 10px; }
  table.leads td { border: 0; padding: 0; min-width: 0; }
  table.leads td.c-sel { display: none; }
  table.leads td.name { grid-column: 1 / -1; }
  table.leads td.c-addr, table.leads td.c-phone { grid-column: 1 / -1; font-size: .88rem; }
  table.leads td.c-date { font-size: .78rem; }
  .addr { max-width: 100%; }
}
.mat-not_roof { color: var(--muted); text-decoration: line-through; }
.mat-not_roof::before { background: transparent; border: 1.5px solid var(--muted); }
.years tr.excluded td { color: var(--muted); background: var(--sunk); }
.verify { background: var(--surface); }
.facet-label.est { background: transparent; border: 2px dashed var(--info); color: var(--info); }
.est-note { color: var(--info); }

/* appointment + language */
.appt { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; font-size: .88rem; padding: 3px 10px; border-radius: 99px; background: var(--sunk); color: var(--muted); }
.appt b { font-weight: 600; }
.appt.today { background: var(--ok-bg); color: var(--ok); }
.appt.soon { background: var(--info-bg); color: var(--info); }
.appt.past { opacity: .75; }
.lang { font-size: .86rem; font-weight: 500; padding: 2px 9px; border-radius: 6px; border: 1px solid var(--line); white-space: nowrap; }
input[type=datetime-local] { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; min-width: 0; width: 100%; }
@media (max-width: 760px) { table.leads td.c-appt, table.leads td.c-lang { grid-column: auto; } }
table.leads td.name, .prod, table.leads td .sub { white-space: nowrap; }
table.leads .addr { max-width: 220px; }
table.leads td.name .sub { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
table.leads th, table.leads td { padding-inline: 10px; }
table.leads .addr { max-width: 190px; }
/* iPhone home-screen app: keep the green bar under the status bar */
.top { padding-top: max(10px, env(safe-area-inset-top)); }

/* ---------- phone ---------- */
.btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; font-weight: 600; }
.btn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
select.compact { padding: 4px 8px; font-size: .86rem; width: auto; }
#phonebar { position: fixed; inset-inline-start: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 60; }
.ph-fab { width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--brand); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 20px rgb(0 0 0 / .22); cursor: pointer; position: relative; }
.ph-fab .i { width: 24px; height: 24px; }
.ph-fab::after { content: ''; position: absolute; top: 4px; inset-inline-end: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--leaf); border: 2px solid var(--brand); }
.ph-fab.off::after { background: #c9c9c9; }
.ph-card { width: min(340px, calc(100vw - 36px)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 10px 34px rgb(0 0 0 / .22); padding: 14px 16px; display: grid; gap: 10px; }
.ph-card.live { border-color: var(--accent); }
.ph-card.ring { border-color: var(--accent); animation: ph-ring 1.1s ease-in-out infinite; }
@keyframes ph-ring { 0%, 100% { box-shadow: 0 10px 34px rgb(0 0 0 / .22), 0 0 0 0 rgb(30 125 70 / .45); } 50% { box-shadow: 0 10px 34px rgb(0 0 0 / .22), 0 0 0 10px rgb(30 125 70 / 0); } }
.ph-k { font-size: .82rem; color: var(--muted); font-weight: 600; }
.ph-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ph-who b { font-size: 1.1rem; }
.ph-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; direction: ltr; }
.dlg { border: 0; border-radius: var(--r); padding: 0; width: min(440px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); box-shadow: 0 20px 60px rgb(0 0 0 / .3); }
.dlg::backdrop { background: rgb(10 20 14 / .45); }
.dlg form { display: grid; gap: 12px; padding: 18px 20px; }
.dlg h2 { margin: 0; font-size: 1.15rem; }
.dlg input[type=tel] { font-size: 1.25rem; text-align: center; letter-spacing: .03em; }
.oc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.oc-grid .btn { white-space: normal; }
.live-list { display: grid; gap: 8px; }
.live-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--sunk); }
.live-card .grow { min-width: 0; }
.pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--info); flex: none; animation: ph-pulse 1.4s ease-in-out infinite; }
.live-card.in-progress .pulse { background: var(--ok); }
@keyframes ph-pulse { 50% { opacity: .3; } }
table.calls { min-width: 980px; }
@media (prefers-reduced-motion: reduce) { .ph-card.ring, .pulse { animation: none; } }
@media (max-width: 720px) { #phonebar { inset-inline-start: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); } }
table.calls td.c-when, table.calls td.c-num, table.calls td.c-dir, table.calls td.name, table.calls td.c-who { white-space: nowrap; }
main { padding-bottom: 96px; }
@media (max-width: 760px) {
  table.calls, table.calls tbody { display: block; min-width: 0; }
  table.calls thead { display: none; }
  table.calls tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); padding: 12px 14px; margin-bottom: 10px; }
  table.calls td { border: 0; padding: 0; min-width: 0; }
  table.calls td.name { font-size: 1rem; }
  table.calls td.c-when, table.calls td.c-dir, table.calls td.c-line, table.calls td.c-who { font-size: .82rem; color: var(--muted); }
  table.calls td.c-out, table.calls td.c-vm { grid-column: 1 / -1; }
  table.calls td.c-vm:empty { display: none; }
  table.calls td.c-vm audio { width: 100%; max-width: none !important; }
  .live-card { flex-wrap: wrap; }
}
.btn.del { color: var(--bad); border-color: var(--line); }
.btn.del:hover { border-color: var(--bad); background: var(--bad-bg); }

/* lead source */
.src { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; font-weight: 500; white-space: nowrap; }
.src::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.src-facebook::before { background: #1877f2; }
.src-instagram::before { background: #d62976; }
.src-google::before { background: #ea8600; }
.src-website::before { background: var(--accent); }
.src-referral::before { background: #7b4fd6; }
.src-phone::before { background: var(--info); }
.src-door::before { background: #8a6d3b; }
table.leads td.c-src .sub { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
@media (max-width: 760px) { table.leads td.c-src { grid-column: auto; } }

/* ---------- rep home ("My day") + quick actions ---------- */
.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100; background: var(--surface); color: var(--ink); padding: 10px 16px; border-radius: var(--r-sm); box-shadow: var(--shadow); font-weight: 600; }
.skip:focus { top: 12px; }
main:focus { outline: none; }
.drawer h1:focus { outline: none; }
svg.i.sm { width: 15px; height: 15px; }
.rep-hello p b { color: var(--ink); font-weight: 600; }
.rep-tabs { display: flex; gap: 6px; background: var(--sunk); padding: 5px; border-radius: 14px; overflow-x: auto; scrollbar-width: none; position: sticky; top: 60px; z-index: 4; box-shadow: 0 0 0 6px var(--bg); }
.rep-tabs button { flex: 1 1 0; white-space: nowrap; min-height: 44px; border: 0; background: transparent; border-radius: 10px; padding: 8px 14px; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; }
.rep-tabs button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.rep-tabs .count { min-width: 22px; padding: 0 6px; border-radius: 99px; background: var(--line); color: var(--ink); font-size: .78rem; line-height: 20px; }
.rep-tabs button.on .count { background: var(--accent); color: var(--accent-ink); }
.rep-panel { display: flex; flex-direction: column; gap: 12px; }
.rhead { font-size: 1rem; margin: 10px 2px 0; }
.rhead.warn { color: var(--warn); }
.rhint { margin: 0 2px; font-size: .9rem; }
.rcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; }
.rcard { position: relative; display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); padding: 14px; font-size: 1rem; }
.rtime { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: var(--sunk); border-radius: 12px; padding: 8px 4px; text-align: center; align-self: start; min-height: 72px; }
.rtime b { font-size: 1.35rem; line-height: 1.1; direction: ltr; }
.rtime span { font-size: .8rem; color: var(--muted); font-weight: 500; }
.rtime.today { background: var(--accent-soft); color: var(--accent); }
.rtime.today span { color: var(--accent); }
.rtime.late { background: var(--warn-bg); color: var(--warn); }
.rtime.late span { color: var(--warn); }
.rtime.none { background: transparent; padding: 4px 0; min-height: 0; }
.rmain { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.rtop { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.rtop h3 { margin: 0; font-size: 1.12rem; font-weight: 600; min-width: 0; }
.rname { all: unset; cursor: pointer; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rname:hover { text-decoration: underline; }
.rname:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.raddr { display: flex; align-items: center; gap: 5px; color: var(--ink); font-size: .95rem; min-width: 0; }
.raddr span[dir] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.raddr svg { color: var(--muted); }
.rmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: .88rem; }
.ropen { align-self: center; border: 0; background: transparent; color: var(--muted); font-size: 1.6rem; width: 32px; min-height: 44px; cursor: pointer; border-radius: 8px; }
.ropen:hover { color: var(--accent); background: var(--sunk); }
.acts { display: flex; gap: 8px; flex-wrap: wrap; }
.rcard > .acts { grid-column: 1 / -1; }
.act { flex: 1 1 0; min-width: 84px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem; cursor: pointer; }
.act:hover { border-color: var(--accent); color: var(--accent); }
.act.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.act.primary:hover { color: var(--accent-ink); filter: brightness(1.06); }
.act svg { width: 19px; height: 19px; }
.acts.full { background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); padding: 12px; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.stpick { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.stpick .st { min-height: 44px; justify-content: center; font-size: .92rem; border: 1px solid var(--line); cursor: pointer; border-radius: 12px; background: var(--surface); color: var(--ink); }
.stpick .st:hover { border-color: var(--accent); }
.stpick .st.on { border: 2px solid currentColor; box-shadow: var(--shadow); }
.stpick .st.new.on { background: var(--accent-soft); color: var(--accent); } .stpick .st.contacted.on { background: var(--info-bg); color: var(--info); } .stpick .st.qualified.on { background: var(--violet-bg); color: var(--violet); } .stpick .st.won.on { background: var(--ok-bg); color: var(--ok); } .stpick .st.lost.on { background: var(--sunk); color: var(--ink); }
.stpick .st.new::before { color: var(--accent); background: var(--accent); } .stpick .st.contacted::before { background: var(--info); } .stpick .st.qualified::before { background: var(--violet); } .stpick .st.won::before { background: var(--ok); } .stpick .st.lost::before { background: var(--muted); }
.rfilter { display: flex; flex-direction: column; gap: 10px; }
.rfilter input[type=search] { min-height: 48px; font-size: 1rem; }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.fchip { flex: none; min-height: 40px; padding: 6px 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font-weight: 500; cursor: pointer; }
.fchip.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
@media (max-width: 760px) {
  .rep-tabs { position: static; box-shadow: none; }
  .top.solo .nav { display: none; }
  .rcards { grid-template-columns: 1fr; }
  .rcard { grid-template-columns: 64px 1fr; padding: 12px; gap: 10px 12px; }
  .rep-tabs button { padding: 8px 6px; font-size: .92rem; gap: 5px; }
  .rtime b { font-size: 1.2rem; }
  .ropen { display: none; }
  .act { min-width: 0; padding: 8px 6px; }
  .rep-hello .btn.primary { min-height: 44px; }
  body:has(.rep-panel) { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .rep-tabs button, .act { transition: none; } }

/* ---------- field map ---------- */
.map-wrap { display: grid; grid-template-columns: 320px 1fr; gap: 14px; min-height: 0; }
.fieldmap { height: calc(100vh - 210px); min-height: 420px; border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; z-index: 0; background: var(--sunk); }
.map-side { background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); padding: 12px; display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 210px); overflow-y: auto; }
.map-side .small { font-size: .82rem; margin: 0; }
.map-side .chip { align-self: flex-start; margin: 0; }
.rep-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rep-row { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; cursor: pointer; min-height: 52px; }
.rep-row:hover:not(:disabled) { background: var(--sunk); }
.rep-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rep-row:disabled { cursor: default; }
.rep-row .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rep-row .sub { font-size: .8rem; color: var(--muted); }
.rep-dot { width: 34px; height: 34px; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; font-size: .78rem; font-weight: 700; flex: none; }
.fresh { font-size: .76rem; font-weight: 600; white-space: nowrap; padding: 2px 8px; border-radius: 99px; background: var(--sunk); color: var(--muted); }
.fresh.live { background: var(--ok-bg); color: var(--ok); }
.fresh.recent { background: var(--warn-bg); color: var(--warn); }
.rep-pin { width: 40px; height: 40px; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; font: 700 13px/1 var(--body); border: 3px solid #fff; box-shadow: 0 2px 8px rgb(0 0 0 / .35); position: relative; }
.rep-pin.live::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid var(--c); animation: rep-ping 2s ease-out infinite; }
.rep-pin.recent { opacity: .85; }
.rep-pin.stale { filter: grayscale(.8); opacity: .65; }
@keyframes rep-ping { from { transform: scale(.8); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }
.appt-pin { display: inline-flex; align-items: center; justify-content: center; min-width: 54px; height: 26px; padding: 0 8px; border-radius: 13px; background: #fff; color: var(--c); border: 2px solid var(--c); font: 700 12px/1 var(--body); box-shadow: 0 2px 6px rgb(0 0 0 / .25); position: relative; direction: ltr; }
.appt-pin::after { content: ''; position: absolute; bottom: -7px; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--c); border-bottom: 0; }
.appt-pin.done { opacity: .55; }
.pop { display: flex; flex-direction: column; gap: 4px; font: 14px/1.45 var(--body); direction: rtl; text-align: right; min-width: 180px; color: #1b2a1f; }
.pop .muted { color: #627165; }
.pop .row { margin-top: 4px; }
.leaflet-container { font-family: var(--body); }
.locnote { display: flex; align-items: center; gap: 6px; margin: -4px 2px 0; font-size: .85rem; color: var(--muted); }
.locnote.on svg { color: var(--ok); }
.locnote.denied { color: var(--warn); }
@media (max-width: 860px) {
  .map-wrap { grid-template-columns: 1fr; }
  .fieldmap { height: 58vh; min-height: 320px; order: -1; }
  .map-side { max-height: none; }
}
@media (prefers-reduced-motion: reduce) { .rep-pin.live::after { animation: none; } }

/* ---------- visits (check-in) ---------- */
.act.checkin { grid-column: 1 / -1; width: 100%; background: var(--ink); border-color: var(--ink); color: var(--bg); min-height: 48px; font-size: 1rem; }
.act.checkin:hover { color: var(--bg); filter: brightness(1.15); }
.visit { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-radius: 12px; padding: 10px 12px; font-size: .95rem; }
.visit.in { background: var(--ok-bg); color: var(--ok); }
.visit.in .grow { flex: 1; min-width: 140px; }
.visit.in .act { flex: 0 0 auto; }
.visit.done { background: var(--sunk); color: var(--muted); padding: 8px 12px; }
.vdot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; animation: ph-pulse 1.4s ease-in-out infinite; flex: none; }
.appt-pin.here { background: var(--c); color: #fff; }
.appt-pin.visited { opacity: .6; }
@media (prefers-reduced-motion: reduce) { .vdot { animation: none; } }

/* ---------- meeting results ---------- */
.res { display: inline-flex; align-items: center; font: 700 .74rem/1 var(--body); letter-spacing: .03em; padding: 4px 8px; border-radius: 6px; background: var(--sunk); color: var(--ink); white-space: nowrap; }
.res-sold { background: var(--ok-bg); color: var(--ok); }
.res-secappt { background: var(--info-bg); color: var(--info); }
.res-pns, .res-1leg, .res-ftd { background: var(--warn-bg); color: var(--warn); }
.res-noshow, .res-npns { background: var(--bad-bg); color: var(--bad); }
.res-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.res-opt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; padding: 8px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); cursor: pointer; text-align: center; }
.res-opt b { font-size: 1rem; letter-spacing: .03em; }
.res-opt small { font-size: .74rem; color: var(--muted); line-height: 1.2; }
.res-opt:hover { border-color: var(--accent); }
.res-opt.on { border-color: var(--ink); background: var(--sunk); box-shadow: var(--shadow); }
.res-opt.on.res-sold { border-color: var(--ok); background: var(--ok-bg); }
.res-opt.on.res-secappt { border-color: var(--info); background: var(--info-bg); }
.res-opt.on.res-noshow, .res-opt.on.res-npns { border-color: var(--bad); background: var(--bad-bg); }
.res-opt.on.res-pns, .res-opt.on.res-1leg, .res-opt.on.res-ftd { border-color: var(--warn); background: var(--warn-bg); }
.res-opt:last-child { grid-column: 1 / -1; }
.vnote { font-size: .86rem; color: var(--muted); margin-top: 2px; white-space: pre-wrap; }
#visit-dlg { max-height: calc(100dvh - 24px); overflow-y: auto; }

/* ---------- SOLD: price + costs ---------- */
.sale-box { border: 2px solid var(--ok); background: var(--ok-bg); border-radius: 12px; padding: 12px; margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sale-box legend { font-weight: 700; color: var(--ok); padding: 0 6px; }
.money-in { display: flex; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); direction: ltr; }
.money-in:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.money-in i { font-style: normal; color: var(--muted); padding-left: 12px; font-weight: 600; }
.money-in input { border: 0 !important; box-shadow: none !important; background: transparent; font-size: 1.05rem; font-variant-numeric: tabular-nums; padding-left: 6px; }
#sale-price { font-size: 1.25rem; font-weight: 700; }
.cost-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cost-h { grid-column: 1 / -1; font-size: .82rem; font-weight: 600; color: var(--muted); }
.sale-sum { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; font-size: .92rem; border-top: 1px dashed var(--ok); padding-top: 8px; }
.sale-sum .pos, .sale-line .pos { color: var(--ok); }
.sale-sum .neg, .sale-line .neg { color: var(--bad); }
.sale-line { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .88rem; margin-top: 2px; }
.money-in input::placeholder { color: var(--muted); opacity: .6; font-weight: 400; }

/* =====================================================================
   Skin v5 — "aerial roof plan". The storm band with roof-plan line work is the one bold element;
   everything under it is quiet, crisp and readable in sunlight.
   ===================================================================== */
body { font: 15px/1.6 var(--body); font-feature-settings: "kern", "tnum" 0; letter-spacing: 0; }
h1 { font-weight: 600; letter-spacing: -.012em; }
.num, .tile-n, .mono, td.num { font-variant-numeric: tabular-nums; }

/* storm band */
.top { background: var(--plan) 0 0 / 160px 96px repeat, linear-gradient(180deg, var(--storm-2), var(--storm)); border-bottom: 1px solid rgb(94 227 176 / .28); box-shadow: 0 1px 0 rgb(0 0 0 / .25); gap: 24px; padding-block: 12px; }
.top .brand { color: #fff; }
.top .brand svg { width: 36px; height: 36px; filter: drop-shadow(0 0 10px rgb(94 227 176 / .25)); }
.brand-txt b { font-weight: 600; letter-spacing: .14em; }
.brand-txt small { letter-spacing: .38em; color: var(--mint); opacity: 1; }
.nav a { color: rgb(228 239 236 / .74); border: 1px solid transparent; padding: 7px 14px; font-weight: 500; transition: color .15s, background .15s, border-color .15s; }
.nav a:hover { color: #fff; background: rgb(255 255 255 / .06); }
.nav a.on { color: var(--mint); background: rgb(94 227 176 / .1); border-color: rgb(94 227 176 / .38); }
.who { color: rgb(228 239 236 / .9); }
.who .btn { background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .1); color: #fff; }
.who .btn:hover { background: rgb(255 255 255 / .14); border-color: rgb(94 227 176 / .4); }
.role { background: rgb(94 227 176 / .14); color: var(--mint); font-weight: 600; }
.av { box-shadow: 0 0 0 2px var(--surface); }
.top .av { box-shadow: 0 0 0 2px rgb(94 227 176 / .45); }

/* surfaces: one hairline system, shadows tinted with storm, radius by hierarchy (panels 16 · controls 10 · chips 6) */
.table-wrap, .panel, .sec, .tile, .rcard, .map-side, .fieldmap, .acts.full, .login form { border: 1px solid var(--line); box-shadow: var(--shadow); }
.chip, .st, .lang, .prod, .res { border-radius: 6px; }
.btn { border-radius: 10px; font-weight: 500; }
.btn.primary { background: var(--accent); border-color: var(--accent); box-shadow: 0 1px 0 rgb(255 255 255 / .18) inset, 0 6px 16px -8px var(--accent); }
.btn.primary:hover { filter: none; background: color-mix(in srgb, var(--accent) 88%, #000); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent); }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=tel], input[type=datetime-local], select, textarea { border-radius: 10px; background: var(--surface); }

/* greeting */
.hello h1 { font-size: 1.85rem; font-weight: 600; letter-spacing: -.02em; }
.hello p { font-size: .95rem; }

/* tiles: a measurement readout, not a bubble */
.tiles { gap: 14px; }
.tile { padding: 16px 18px; gap: 14px; position: relative; overflow: hidden; transition: border-color .15s, transform .15s; }
button.tile { cursor: pointer; }
button.tile:hover { border-color: var(--accent); }
.tile-ic { width: 40px; height: 40px; border-radius: 10px; background: transparent !important; border: 1px solid currentColor; }
.tile-ic svg { width: 20px; height: 20px; }
.tile-n { font-size: 2rem; font-weight: 500; letter-spacing: -.02em; }
.tile-l { font-size: .84rem; }

/* segmented tabs: the active one is a dark instrument key */
.tabs { background: var(--sunk); border: 1px solid var(--line); padding: 4px; border-radius: 12px; }
.tabs button { border-radius: 9px; }
.tabs button.on { background: var(--ink); color: var(--bg); box-shadow: 0 4px 12px -6px rgb(13 27 36 / .5); }
.tabs button.on .count { background: var(--mint); color: #062316; }
.rep-tabs { background: var(--sunk); border: 1px solid var(--line); }
.rep-tabs button.on { background: var(--ink); color: var(--bg); }
.rep-tabs button.on .count { background: var(--mint); color: #062316; }

/* lead table */
th { background: var(--sunk); color: var(--muted); font-weight: 500; font-size: .78rem; border-bottom: 1px solid var(--line); }
tbody tr { transition: background .12s; }
tbody tr:hover td { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
tbody tr.sel td { background: var(--accent-soft); }
tbody tr.sel td:first-child { box-shadow: inset -3px 0 0 var(--accent); }
td.name { font-weight: 600; letter-spacing: -.005em; }
.bulk { background: var(--storm); border: 1px solid rgb(94 227 176 / .4); color: #fff; }
.bulk .btn.ghost { color: var(--mint); }
.bulk select { background: var(--storm-2); color: #fff; border-color: rgb(255 255 255 / .16); }

/* drawer */
.scrim { background: rgb(6 15 20 / .5); backdrop-filter: blur(3px); }
.drawer { background: var(--bg); box-shadow: 0 0 0 1px var(--line), 0 0 60px rgb(6 15 20 / .35); }
.drawer header { border-bottom: 1px solid var(--line); box-shadow: 0 -2px 0 var(--mint) inset; }
.sec-h h2, .panel h2 { font-weight: 600; letter-spacing: -.005em; }

/* rep cards */
.rtime { border: 1px solid var(--line); background: var(--sunk); }
.rtime.today { background: var(--storm); color: var(--mint); border-color: var(--storm); }
.rtime.today span { color: rgb(228 239 236 / .8); }
.rtime b { font-weight: 600; letter-spacing: -.02em; font-family: var(--mono); font-size: 1.25rem; }
.act { border-radius: 12px; }
.act.checkin { background: var(--storm); border-color: var(--storm); color: #fff; box-shadow: 0 0 0 1px rgb(94 227 176 / .35) inset; }
.act.checkin svg { color: var(--mint); }
.visit.in { background: var(--storm); color: var(--mint); border: 1px solid rgb(94 227 176 / .4); }
.visit.in .grow { color: #fff; }

/* toast + phone button share the storm/mint language */
.toast { background: var(--storm); color: #fff; border: 1px solid rgb(94 227 176 / .3); }
.toast::before { background: var(--mint); box-shadow: 0 0 10px var(--mint); }
.ph-fab { background: var(--storm); border: 1px solid rgb(94 227 176 / .45); color: var(--mint); }
.ph-fab::after { background: var(--mint); border-color: var(--storm); box-shadow: 0 0 8px var(--mint); }

/* login: the storm band becomes a full survey sheet, and the roof plan draws itself once */
.login-art { background: linear-gradient(rgb(94 227 176 / .05) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgb(94 227 176 / .05) 1px, transparent 1px) 0 0 / 24px 24px, radial-gradient(120% 80% at 70% 40%, #12303a 0%, var(--storm) 60%); color: #fff; justify-content: flex-start; gap: 28px; }
.login-art h2 { font-size: 2.1rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; max-width: 15ch; }
.login-art p { color: rgb(228 239 236 / .75); opacity: 1; }
.plan { width: min(100%, 560px); align-self: center; margin-top: auto; overflow: visible; direction: ltr; }
.plan path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: plan-draw 1.1s cubic-bezier(.6, 0, .2, 1) var(--d, 0s) forwards; }
.plan-eave { stroke: var(--mint); stroke-width: 2.5; filter: drop-shadow(0 0 6px rgb(94 227 176 / .45)); }
.plan-ridge path { stroke: rgb(94 227 176 / .7); stroke-width: 1.5; }
.plan-dim path { stroke: rgb(228 239 236 / .45); stroke-width: 1; }
.plan-tag > * { opacity: 0; animation: plan-fade .5s ease-out var(--d, 0s) forwards; }
.plan-tag circle { fill: var(--storm); stroke: var(--mint); stroke-width: 1.5; }
.plan-tag text { fill: var(--mint); font: 600 13px var(--mono); text-anchor: middle; }
.plan-tag .plan-m { fill: rgb(228 239 236 / .8); font: 500 13px var(--mono); }
.plan-tag .pitch { fill: var(--solar); }
@keyframes plan-draw { to { stroke-dashoffset: 0; } }
@keyframes plan-fade { to { opacity: 1; } }
.readout { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 6px 28px; margin: 0; padding-top: 14px; border-top: 1px solid rgb(94 227 176 / .22); }
.readout div { display: flex; flex-direction: column; gap: 2px; }
.readout dt { font-size: .78rem; color: rgb(228 239 236 / .6); }
.readout dd { margin: 0; font: 500 1.05rem var(--mono); color: var(--mint); direction: ltr; text-align: right; }
.login-form { background: var(--bg); }
.login form { border-radius: 18px; padding: 32px; }
.login form h1 { font-size: 1.6rem; letter-spacing: -.02em; }
@media (prefers-reduced-motion: reduce) {
  .plan path { animation: none; stroke-dashoffset: 0; }
  .plan-tag > * { animation: none; opacity: 1; }
}
@media (max-width: 800px) { .readout { grid-template-columns: repeat(2, auto); } }

/* dark mode: the storm band stays darker than the page so the hierarchy holds */
@media (prefers-color-scheme: dark) {
  .tabs button.on, .rep-tabs button.on { background: var(--mint); color: #062316; }
  .tabs button.on .count, .rep-tabs button.on .count { background: #062316; color: var(--mint); }
  .rtime.today { background: #062a1f; border-color: rgb(94 227 176 / .35); }
  .act.checkin { background: #062a1f; border-color: rgb(94 227 176 / .5); }
  .bulk { background: var(--storm-2); }
}

/* map: calm the basemap so reps and appointments read first; night map in dark mode */
.appt-pin { white-space: nowrap; }
.fieldmap .leaflet-tile-pane { filter: saturate(.45) contrast(.92) brightness(1.03); }
@media (prefers-color-scheme: dark) {
  .fieldmap .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.82) saturate(.5) contrast(.9); }
  .fieldmap { background: #0b1920; }
  .leaflet-control-attribution { background: rgb(15 31 39 / .8) !important; color: var(--muted); }
  .leaflet-bar a { background: var(--surface); color: var(--ink); border-color: var(--line); }
}

/* phone login: a short survey band on top, the form below */
@media (max-width: 800px) {
  .login { grid-template-rows: auto 1fr; align-content: start; }
  .login-art { display: flex; padding: calc(20px + env(safe-area-inset-top)) 20px 8px; gap: 10px; min-height: 0; }
  .login-art > div:not(.brand), .login-art .readout { display: none; }
  .login-art .brand svg { width: 40px; height: 40px; }
  .login-art .brand-txt b { font-size: 1.2rem; }
  .plan { width: 100%; max-width: 360px; margin: 0 auto -4px; }
  .login .mobile-brand { display: none; }
  .login-form { place-items: start center; padding-top: 20px; }
  .login form { box-shadow: none; }
}
.leaflet-bar a { background: var(--surface) !important; color: var(--ink) !important; border-color: var(--line) !important; }
.fb-connect { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px dashed var(--line); border-radius: 12px; background: var(--sunk); }
.fb-connect textarea { font: 13px/1.4 var(--mono); }
.fb-pick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fb-pick:empty { display: none; }
.fb-connected { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sub.review { color: var(--info); font-weight: 500; }

/* professional measurements */
.sec-actions { gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.meas { border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 14px; padding: 14px; display: grid; gap: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface)); margin-bottom: 12px; }
.meas-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.meas-head .btn { margin-inline-start: auto; }
.meas-badge { background: var(--accent); color: var(--accent-ink); border-radius: 999px; padding: 3px 10px; font-size: .78rem; font-weight: 600; letter-spacing: .01em; }
.meas-lens { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.meas-lens > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.ev-pending { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border: 1px dashed var(--info); border-radius: 12px; margin-bottom: 12px; }
.google-est { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.google-est > summary { cursor: pointer; color: var(--muted); font-size: .9rem; }
.google-est[open] > summary { margin-bottom: 10px; }
.ev-dlg { width: min(520px, calc(100vw - 32px)); }
.ev-body { display: grid; gap: 10px; margin: 12px 0; }
.ev-price { margin: 0; font-weight: 600; }
.ev-price:empty { display: none; }
.wa-steps { margin: 0; padding-inline-start: 20px; display: grid; gap: 6px; color: var(--muted); font-size: .9rem; }
#wa-group { flex: 1; min-width: 0; }

/* audit fixes: long names never push the page sideways; wide tables scroll inside their box on phones */
.rtop h3 { flex: 1 1 auto; overflow: hidden; }
.rname { max-width: 100%; box-sizing: border-box; }
.table-wrap.scroll { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
.sec-h { flex-wrap: wrap; }
.sec-h h2 { white-space: nowrap; }
.drawer h1 { overflow-wrap: anywhere; }
.rname[dir=auto] { text-align: start; }

/* automations + SMS */
.auto-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.auto-row input[type=checkbox] { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.auto-row > span { display: flex; flex-direction: column; gap: 2px; }
.auto-row .muted { font-size: .85rem; }
.auto-h { font-size: .95rem; margin: 10px 0 0; }
.mini-num { width: 4.2em; padding: 2px 6px; min-height: 0; display: inline-block; text-align: center; }
.tpl-prev { background: var(--sunk); border-radius: 12px 12px 12px 4px; padding: 8px 12px; font-size: .9rem; white-space: pre-wrap; }
.appt-cell { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sms-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sms { max-width: 88%; padding: 8px 12px; border-radius: 14px; background: var(--sunk); display: flex; flex-direction: column; gap: 4px; }
.sms.out { align-self: flex-start; background: var(--accent-soft); border-end-start-radius: 4px; }
.sms.in { align-self: flex-end; border-end-end-radius: 4px; }
.sms-meta { font-size: .78rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.sms-body { white-space: pre-wrap; font-size: .92rem; }

/* sales dashboard */
.rp-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.rp-dates { display: flex; gap: 8px; align-items: center; }
.rp-dates input { min-height: 40px; }
.rp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.rp-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rp-tile.big { grid-column: span 2; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), var(--surface)); }
.rp-l { font-size: .85rem; color: var(--muted); font-weight: 500; }
.rp-v { font-size: 1.7rem; font-weight: 600; line-height: 1.15; direction: ltr; text-align: right; }
.rp-tile.big .rp-v { font-size: 2.1rem; color: var(--accent); }
.rp-s { font-size: .82rem; color: var(--muted); }
.rp-table th, .rp-table td { white-space: nowrap; }
#rp-body > .panel, #rp-body > .grid2 { margin-bottom: 16px; }
.rp-bars { display: flex; flex-direction: column; gap: 8px; }
.rp-barrow { display: grid; grid-template-columns: 78px 1fr auto; gap: 10px; align-items: center; font-size: .9rem; }
.rp-track { height: 10px; background: var(--sunk); border-radius: 99px; overflow: hidden; }
.rp-fill { display: block; height: 100%; background: var(--muted); border-radius: 99px; min-width: 3px; }
.rp-fill.ok { background: var(--accent); }
@media (max-width: 560px) { .rp-tile.big { grid-column: span 1; } .rp-tiles { grid-template-columns: 1fr 1fr; } .rp-tile.big { grid-column: 1 / -1; } }
.rp-stack { display: grid; gap: 16px; margin-bottom: 16px; }
#rp-body .rp-split { grid-template-columns: 3fr 2fr; }
@media (max-width: 900px) { #rp-body .rp-split { grid-template-columns: 1fr; } }
/* dashboard: wide tables scroll inside their card instead of stretching the page */
#rp-body > *, .rp-stack > *, #rp-body .grid2 > * { min-width: 0; }
/* phone: 6 menu items wrap onto two rows instead of hiding off-screen */
@media (max-width: 640px) {
  .top .nav { flex-wrap: wrap; overflow: visible; gap: 4px; justify-content: flex-start; }
  .top .nav a { padding: 6px 11px; font-size: .9rem; }
}

/* ---------- reps' calendar ---------- */
.cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.cal-day { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; font: inherit; color: var(--ink); }
.cal-day b { font-size: 1.15rem; }
.cal-day .muted { font-size: .72rem; }
.cal-day.today { border-color: var(--accent); }
.cal-day.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.cal-day.on .muted { color: inherit; opacity: .8; }
.cal-banner { display: flex; gap: 10px; align-items: center; justify-content: space-between; background: var(--accent-soft); border: 1px dashed var(--accent); border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; }
.cal-wrap { display: grid; grid-template-columns: 240px minmax(0, 1fr) 250px; gap: 14px; align-items: start; }
.cal-side { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; display: flex; flex-direction: column; gap: 8px; position: sticky; top: 12px; max-height: calc(100vh - 140px); }
.cal-side h2 { font-size: .95rem; margin: 0; }
.cal-side-list { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-height: 0; }
.cal-lead { display: flex; flex-direction: column; gap: 2px; text-align: start; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: grab; font: inherit; color: var(--ink); }
.cal-lead:hover, .cal-lead:focus-visible { border-color: var(--accent); }
.cal-lead .muted { font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-lead .st { align-self: flex-start; }
.cal-scroll { overflow: auto; max-height: calc(100vh - 180px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); min-width: 0; }
.cal-grid { display: grid; grid-template-columns: 52px repeat(var(--cols), minmax(170px, 1fr)); min-width: min-content; }
.cal-head { position: sticky; top: 0; z-index: 3; background: var(--surface); border-bottom: 1px solid var(--line); padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; font-size: .9rem; }
.cal-head .muted { font-size: .75rem; }
.cal-corner { position: sticky; inset-inline-start: 0; z-index: 4; }
.cal-gutter { position: relative; border-inline-end: 1px solid var(--line); background: var(--surface); position: sticky; inset-inline-start: 0; z-index: 2; }
.cal-gutter span { position: absolute; inset-inline-end: 6px; transform: translateY(-50%); font-size: .72rem; color: var(--muted); font-family: var(--mono); }
.cal-gutter span:first-child { transform: none; }
.cal-col { position: relative; border-inline-end: 1px solid var(--line); cursor: copy; }
.cal-col.drop { background: var(--accent-soft); }
.cal-hr { position: absolute; inset-inline: 0; border-top: 1px solid var(--line); background: linear-gradient(transparent calc(50% - .5px), color-mix(in srgb, var(--line) 55%, transparent) calc(50% - .5px), color-mix(in srgb, var(--line) 55%, transparent) calc(50% + .5px), transparent calc(50% + .5px)); }
.cal-now { position: absolute; inset-inline: 0; height: 2px; background: var(--bad); z-index: 2; pointer-events: none; }
.cal-appt { position: absolute; inset-inline: 4px; z-index: 1; background: color-mix(in srgb, var(--info) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--info) 45%, transparent); border-inline-start: 4px solid var(--info); border-radius: 10px; padding: 5px 8px; overflow: hidden; cursor: grab; display: flex; flex-direction: column; gap: 1px; font-size: .82rem; }
.cal-appt:hover, .cal-appt:focus-visible { box-shadow: var(--shadow); outline: none; z-index: 2; }
.cal-appt.ok { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 45%, transparent); border-inline-start-color: var(--accent); }
.cal-appt.here { border-inline-start-color: var(--solar); }
.cal-appt.done { background: var(--sunk); border-color: var(--line); border-inline-start-color: var(--muted); }
.cal-appt.warn { border-inline-start-color: var(--warn); }
.ca-top { display: flex; gap: 6px; align-items: center; }
.ca-ok { color: var(--accent); font-weight: 700; }
.ca-res { font-family: var(--mono); font-size: .7rem; background: var(--surface); border-radius: 6px; padding: 0 4px; }
.ca-here { font-size: .7rem; color: var(--warn); font-weight: 600; }
.ca-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-sub { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-warn { color: var(--warn); font-weight: 600; font-size: .74rem; }
.cal-block { position: absolute; inset-inline: 4px; z-index: 1; border-radius: 10px; padding: 5px 8px; font-size: .78rem; display: flex; flex-direction: column; cursor: pointer;
  background: repeating-linear-gradient(135deg, var(--sunk) 0 8px, color-mix(in srgb, var(--line) 60%, transparent) 8px 16px); color: var(--muted); }
@media (max-width: 900px) {
  .cal-wrap { grid-template-columns: 1fr; }
  .cal-side { position: static; max-height: 260px; }
  .cal-week { grid-template-columns: repeat(7, minmax(56px, 1fr)); overflow-x: auto; }
  .cal-grid { grid-template-columns: 44px repeat(var(--cols), minmax(150px, 1fr)); }
}

/* ---------- call queue ---------- */
.q-goal { min-width: 220px; display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 14px; }
.q-goal-top { display: flex; justify-content: space-between; gap: 10px; }
.q-script { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 14px; margin-bottom: 14px; }
.q-script summary { cursor: pointer; font-weight: 600; }
.q-script p { margin: 6px 0; font-size: .9rem; }
.q-sec { margin-bottom: 18px; }
.q-sec h2 { display: flex; gap: 8px; align-items: center; }
.q-sec h2 .count { background: var(--sunk); border-radius: 99px; padding: 0 9px; font-size: .8rem; }
.q-list { display: grid; gap: 8px; }
.q-card { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; box-shadow: var(--shadow); }
.q-card.late { border-inline-start: 4px solid var(--warn); }
.q-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 260px; }
.q-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.q-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .86rem; }
.q-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.sat.picking { cursor: crosshair; outline: 3px solid var(--accent); outline-offset: -3px; }
.pin-hint { background: var(--accent-soft); color: var(--ink); padding: 8px 12px; font-size: .88rem; font-weight: 600; }
.pin-row { align-items: center; }
.pin-row .muted { font-size: .8rem; margin-inline-end: auto; }
/* languages */
.ltag { font: 600 .66rem/1.5 var(--mono); padding: 0 5px; border-radius: 5px; background: var(--sunk); color: var(--ink); border: 1px solid var(--line); }
.ltag.unset { color: var(--muted); border-style: dashed; }
.ltag.bad { background: color-mix(in srgb, var(--warn) 20%, var(--surface)); border-color: var(--warn); }
.cal-col.nolang { background: repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in srgb, var(--line) 45%, transparent) 10px 12px); cursor: not-allowed; }
.cal-head.nolang { opacity: .75; }
.lang-pick { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; border: 0; padding: 0; margin: 0; font-size: .88rem; }
.lang-pick legend { font-size: .82rem; color: var(--muted); padding: 0; margin-bottom: 4px; }
.lang-pick label { display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; }
.lang-pick.unset { outline: 1px dashed var(--warn); outline-offset: 3px; border-radius: 6px; }
.q-langs { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.q-mine { display: inline-flex; gap: 6px; align-items: center; margin-inline-start: auto; font-weight: 600; }
/* driving between appointments, slots that fit */
.cal-gap { position: absolute; inset-inline: 10px; z-index: 1; display: flex; align-items: center; justify-content: center; pointer-events: auto; font-size: .72rem; font-weight: 600; color: var(--accent); border-inline-start: 2px dotted var(--accent); }
.cal-gap span { background: var(--surface); border: 1px solid currentColor; border-radius: 99px; padding: 0 7px; white-space: nowrap; }
.cal-gap.tight { color: var(--warn); border-color: var(--warn); }
.cal-gap.bad { color: var(--bad); border-color: var(--bad); }
.cal-fit { position: absolute; inset-inline: 4px; z-index: 2; border: 1px dashed var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); border-radius: 8px; font: 600 .72rem/1 var(--mono); cursor: pointer; text-align: start; padding: 0 8px; }
.cal-fit:hover, .cal-fit:focus-visible { background: var(--accent); color: var(--accent-ink); outline: none; }
.cal-fit.nolang { opacity: .45; }
.cal-gap.home { color: var(--info); border-color: var(--info); }
.home-in { min-width: 200px; }
.cal-gap.home.bad { color: var(--bad); border-color: var(--bad); }
.stpick .st.appt.on { background: var(--ok-bg); color: var(--ok); } .stpick .st.appt::before { background: var(--ok); }

/* =====================================================================
   Refresh: Rubik for headings, numbers and controls; Heebo for reading.
   One loud move: the Florida sun. It marks "where you are" (current page,
   today, now) and nothing else. Everything around it stays calm.
   ===================================================================== */
body { font: 15px/1.6 var(--body); }
h1, h2, h3, .btn, .nav a, .chip, .st, .tabs button, .act, th, .tile-n, .stat-v, .rp-v, .cal-head b, .brand-txt b,
.role, .fchip, .q-sec h2, .sec-h h2, .person b, td.name, .rname, .rtime b, .cal-day b, .ltag, .lang, .prod, .src, label.field > span { font-family: var(--display); }
h1 { font-weight: 700; font-size: clamp(1.55rem, 1.15rem + 1.3vw, 2.1rem); letter-spacing: -.012em; line-height: 1.15; }
h2 { font-weight: 600; font-size: 1.06rem; letter-spacing: -.005em; }
.mono { font-family: var(--mono); font-size: .95em; font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* header: deep pine with a low sun rising behind the logo */
.top {
  background:
    radial-gradient(260px 160px at calc(100% + 40px) -50px, rgb(255 178 36 / .55), rgb(255 178 36 / 0) 70%),
    var(--plan) 0 0 / 160px 96px,
    linear-gradient(100deg, var(--storm) 30%, #0e4d3e);
  box-shadow: 0 1px 0 rgb(255 255 255 / .06) inset, 0 8px 22px -14px rgb(0 0 0 / .5);
}
.brand-txt b { font-weight: 800; letter-spacing: .08em; }
.brand-txt small { color: var(--sun); opacity: 1; font-weight: 600; }
.nav a { font-weight: 500; letter-spacing: .005em; transition: background .15s, color .15s; }
.nav a.on { background: var(--sun); color: var(--sun-ink); font-weight: 600; box-shadow: 0 6px 16px -8px rgb(255 178 36 / .9); }
.nav a.on svg { color: var(--sun-ink); }
.role { background: rgb(255 178 36 / .2); color: var(--sun); }

/* greeting */
.hello h1 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.3rem); }
.hello p { font-size: 1rem; }

/* buttons */
.btn { border-radius: var(--r-sm); font-weight: 500; transition: border-color .15s, background .15s, box-shadow .15s, transform .06s; }
.btn.primary { background: var(--accent); box-shadow: 0 8px 18px -10px rgb(8 128 90 / .85), inset 0 1px 0 rgb(255 255 255 / .18); font-weight: 600; }
.btn.primary:hover { background: color-mix(in srgb, var(--accent) 88%, #fff); filter: none; }
.btn:not(.primary):not(.ghost):hover { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.btn.small { border-radius: 10px; }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=tel], select, textarea { border-radius: var(--r-sm); }

/* summary tiles: each number gets its own colour family */
.tile { border: 1px solid var(--line); box-shadow: 0 1px 2px rgb(11 42 38 / .04); border-radius: 20px; padding: 16px 18px; transition: transform .12s, box-shadow .15s, border-color .15s; }
button.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.tile-ic { width: 46px; height: 46px; border-radius: 14px; }
.tile-ic.o { background: var(--sun-soft); color: #a86500; }
.tile-n { font-size: 2.05rem; font-weight: 700; letter-spacing: -.02em; }
.tile-l { font-size: .9rem; }

/* lead list */
.tabs { background: var(--sunk); }
.tabs button { font-weight: 500; }
.tabs button.on { background: var(--storm); color: #fff; box-shadow: 0 6px 14px -8px rgb(11 42 38 / .8); }
.tabs button.on .count { background: var(--sun); color: var(--sun-ink); }
.table-wrap { border: 1px solid var(--line); box-shadow: 0 1px 2px rgb(11 42 38 / .04); border-radius: 20px; }
th { font-weight: 500; font-size: .8rem; background: color-mix(in srgb, var(--sunk) 60%, var(--surface)); }
td.name, .person b { font-weight: 600; }
tbody tr:hover { background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); }
.av { font-family: var(--display); font-weight: 600; box-shadow: 0 0 0 2px var(--surface); }

/* pills */
.chip, .st { font-weight: 500; padding: 3px 11px; }
.st.appt { background: var(--accent); color: var(--accent-ink); }
.st.won { background: var(--sun); color: var(--sun-ink); }

/* cards & panels */
.sec, .panel { border: 1px solid var(--line); box-shadow: 0 1px 2px rgb(11 42 38 / .04); border-radius: 20px; }
.sec-h h2, .panel > h2 { font-weight: 600; }
.drawer { background: var(--bg); }
.drawer header { background: var(--surface); }
.drawer header h1 { font-size: 1.45rem; font-weight: 700; }

/* contact buttons: every app in its own colours so the hand finds it before the eye reads it */
.act { border-radius: 14px; font-weight: 600; transition: transform .06s, filter .15s, box-shadow .15s; }
.act:hover { filter: brightness(.97); box-shadow: 0 6px 14px -10px rgb(0 0 0 / .45); }
.act:active { transform: translateY(1px); }
.act.primary, .act.call { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 8px 18px -10px rgb(8 128 90 / .8); }
.act.primary:hover, .act.call:hover { color: #fff; }
.act.wa { background: #e8f9ef; border-color: #bdecd0; color: #0a6b35; } .act.wa svg { color: #1fbf5b; }
.act.waze { background: #e6f7fd; border-color: #b6e6f7; color: #04607f; } .act.waze svg { color: #10a8dc; }
.act.gmaps { background: #ecf2fe; border-color: #cbdafc; color: #1b4fb5; } .act.gmaps svg { color: #e5463a; }
.act.txt { background: var(--violet-bg); border-color: color-mix(in srgb, var(--violet) 25%, transparent); color: var(--violet); }
.act.mail { background: var(--surface); }
.act.wa:hover, .act.waze:hover, .act.gmaps:hover, .act.txt:hover { color: inherit; }
.act.gmaps.primary { background: #1b6ef3; border-color: #1b6ef3; color: #fff; box-shadow: 0 8px 18px -10px rgb(27 110 243 / .8); } .act.gmaps.primary svg { color: #fff; }
.acts.full { border: 1px solid var(--line); box-shadow: 0 1px 2px rgb(11 42 38 / .04); border-radius: 20px; }

/* rep day: today's times glow like the sun */
.rcard { border: 1px solid var(--line); box-shadow: 0 1px 2px rgb(11 42 38 / .05); border-radius: 20px; }
.rtime { background: var(--storm); color: #fff; border-radius: 14px; }
.rtime b { font-weight: 700; color: var(--sun); font-variant-numeric: tabular-nums; }
.rtime span { color: rgb(255 255 255 / .75); }
.rtime.today { background: var(--storm); color: #fff; }
.rtime.today span { color: rgb(255 255 255 / .8); }
.rtime.late { background: var(--warn-bg); color: var(--warn); } .rtime.late b { color: var(--warn); }
.rep-tabs button.on, .rtab.on { background: var(--storm); color: #fff; }

/* calendar & queue: the "now" line and today use the sun */
.cal-now { background: var(--sun); height: 3px; box-shadow: 0 0 0 1px rgb(255 178 36 / .35), 0 0 12px rgb(255 178 36 / .7); }
.cal-day { border-radius: 16px; }
.cal-day b { font-weight: 700; }
.cal-day.today { border-color: var(--sun); box-shadow: inset 0 -3px 0 var(--sun); }
.cal-day.on { background: var(--storm); border-color: var(--storm); color: #fff; }
.cal-head b { font-weight: 600; }
.cal-appt { border-radius: 12px; }
.cal-appt .ca-name { font-family: var(--display); }
.q-card { border-radius: 20px; border: 1px solid var(--line); box-shadow: 0 1px 2px rgb(11 42 38 / .04); }
.q-card.late { border-inline-start: 5px solid var(--sun); }
.q-goal { border-radius: 20px; border: 1px solid var(--line); }
.q-goal .rp-fill.ok { background: linear-gradient(90deg, var(--accent), var(--accent-hi)); }

/* login */
.login-art { background:
  radial-gradient(520px 360px at 85% 8%, rgb(255 178 36 / .55), rgb(255 178 36 / 0) 70%),
  var(--plan) 0 0 / 160px 96px,
  linear-gradient(165deg, var(--storm) 35%, #0e5a45); }
.login-art h2 { font-family: var(--display); font-weight: 700; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); letter-spacing: -.015em; }
.login form { border: 1px solid var(--line); border-radius: 22px; }

@media (prefers-color-scheme: dark) {
  .act.wa { background: #0e2c1c; border-color: #1c5435; color: #8ff0b5; }
  .act.waze { background: #0b2733; border-color: #1a4e61; color: #9fe3fa; }
  .act.gmaps { background: #111f3b; border-color: #233d6b; color: #a9c4ff; }
  .tile-ic.o { color: var(--sun); }
  .tabs button.on { background: var(--sun); color: var(--sun-ink); }
}
@media (prefers-reduced-motion: reduce) { .tile, .btn, .act { transition: none; } button.tile:hover { transform: none; } }
.rep-tabs button.on .count { background: var(--sun); color: var(--sun-ink); }
.act { flex-wrap: nowrap; white-space: nowrap; }
.acts.full { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
.stpick .st.appt:not(.on) { background: var(--surface); color: var(--ink); }
.stpick .st.appt.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.stpick .st.appt.on::before { background: var(--accent-ink); }
.nav a.on { border-color: var(--sun); }
.src-outsource::before { background: #25d366; }
/* commission breakdown in the SOLD dialog */
.sale-sum .split { display: grid; gap: 4px; width: 100%; }
.split-row { display: flex; justify-content: space-between; gap: 12px; font-size: .92rem; }
.split-row b { font-family: var(--display); font-variant-numeric: tabular-nums; }
.split-row.minus { color: var(--muted); }
.split-row.sub { border-top: 1px dashed var(--line); padding-top: 4px; font-weight: 600; }
.split-row.neg b { color: var(--bad); }
.split-row.mine { margin-top: 4px; padding: 8px 12px; border-radius: 12px; background: var(--storm); color: #fff; font-weight: 600; }
.split-row.mine b { color: var(--sun); font-size: 1.15rem; }
.rep-month { margin: 2px 0 0; font-size: .92rem; color: var(--muted); }
.pct-in { display: inline-flex; align-items: center; gap: 4px; } .pct-in input { width: 74px; }
/* jobs & commissions */
.jtiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 16px; }
.jtile { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.jtile.wait { background: var(--storm); color: #fff; border-color: var(--storm); }
.jtile.wait .jt-v { color: var(--sun); }
.jtile.wait .jt-l, .jtile.wait .jt-s { color: rgb(255 255 255 / .75); }
.jt-l { font-size: .85rem; color: var(--muted); }
.jt-v { font-family: var(--display); font-size: 1.8rem; font-weight: 700; letter-spacing: -.01em; }
.jt-s { font-size: .82rem; color: var(--muted); }
.jlist { display: grid; gap: 10px; margin-bottom: 18px; }
.jcard { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 12px 14px; }
.jcard.j-cancelled { opacity: .65; }
.jc-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.jc-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.jc-top b { font-family: var(--display); font-weight: 600; }
.jc-sub { font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jc-money { display: flex; gap: 12px; flex-wrap: wrap; font-size: .85rem; color: var(--muted); }
.jc-money b { color: var(--ink); font-family: var(--display); }
.jc-pay { display: flex; flex-direction: column; align-items: flex-end; gap: 0; padding: 6px 12px; border-radius: 14px; background: var(--sun-soft); }
.jc-pay span { font-size: .75rem; color: var(--muted); }
.jc-pay b { font-family: var(--display); font-size: 1.15rem; color: #8a5300; }
.j-closed .jc-pay { background: var(--accent-soft); } .j-closed .jc-pay b { color: var(--accent); }
.jc-pay.void b { text-decoration: line-through; color: var(--muted); }
.jsteps { grid-column: 1 / -1; list-style: none; margin: 2px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(46px, 1fr)); overflow-x: auto; scrollbar-width: none; }
.jstep { position: relative; text-align: center; }
.jstep > button, .jstep > div { all: unset; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; padding: 4px 2px; border-radius: 10px; }
.jstep > button { cursor: pointer; }
.jstep > button:hover { background: var(--sunk); }
.jstep > button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.jstep::before { content: ''; position: absolute; z-index: 0; top: 14px; inset-inline-start: -50%; width: 100%; height: 2px; background: var(--line); }
.jstep:first-child::before { display: none; }
.jstep.done::before { background: var(--accent); }
.js-dot { position: relative; z-index: 1; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); display: grid; place-items: center; box-sizing: border-box; }
.jstep.done .js-dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.jstep.next .js-dot { border-color: var(--sun); box-shadow: 0 0 0 3px var(--sun-soft); }
.js-dot svg { width: 12px; height: 12px; }
.js-l { font-size: .76rem; line-height: 1.2; margin-inline: -4px; }
@media (max-width: 760px) { .js-l { font-size: .68rem; } .jstep > button, .jstep > div { padding: 4px 0; } }
.jstep:not(.done):not(.next) .js-l { color: var(--muted); }
.js-d { font-size: .7rem; min-height: 1.1em; color: var(--muted); }
.jstep.next .js-d { color: #8a5300; font-weight: 600; }
@media (prefers-color-scheme: dark) { .jstep.next .js-d { color: var(--sun); } }
.jc-acts { order: 1; grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.jchip { font-family: var(--display); font-size: .74rem; font-weight: 600; padding: 2px 9px; border-radius: 99px; }
.jchip.j-open { background: var(--sun-soft); color: #8a5300; }
.jchip.j-closed { background: var(--accent-soft); color: var(--accent); }
.jchip.j-cancelled { background: var(--sunk); color: var(--muted); }
button.rep-month { background: none; border: 0; padding: 0; font: inherit; color: var(--muted); cursor: pointer; text-align: start; }
button.rep-month b { color: var(--ink); }
.rhint-inline { font-size: .82rem; font-weight: 400; }
@media (prefers-color-scheme: dark) { .jc-pay b, .jchip.j-open { color: var(--sun); } }

/* drag on the calendar: where it will land and at what time */
.cal-drop-hint { position: absolute; inset-inline: 4px; border: 2px dashed var(--accent); border-radius: 10px; background: rgb(8 128 90 / .08); pointer-events: none; z-index: 3; display: flex; align-items: flex-start; justify-content: flex-start; padding: 4px 8px; }
.cal-drop-hint b { background: var(--accent); color: #fff; border-radius: 6px; padding: 1px 8px; font-size: .95rem; }
.cal-assign { display: grid; gap: .35rem; margin: .4rem 0; }
.cal-assign .row { flex-wrap: wrap; gap: .4rem; }
.cal-assign .btn.ok { border-color: var(--accent); color: var(--accent); }

/* English screens run left-to-right */
html[dir=ltr] .addr, html[dir=ltr] .stat-v, html[dir=ltr] .readout dd, html[dir=ltr] .rp-v { text-align: left; }
html[dir=ltr] .pop { direction: ltr; text-align: left; }
.lang-btn { min-width: 2.6em; font-weight: 700; }
html[dir=ltr] .top .nav { gap: 2px; }
html[dir=ltr] .top .nav a { padding: 7px 10px; }

/* next days' appointments beside the calendar */
.cal-up > .ca-top { justify-content: space-between; }
.up-count { white-space: nowrap; font-size: .78rem; font-weight: 700; color: var(--bad); }
.up-day { font-size: .78rem; font-weight: 700; color: var(--muted); margin-top: 6px; padding-bottom: 2px; border-bottom: 1px solid var(--line); }
.cal-lead.up { text-align: start; cursor: pointer; font: inherit; }
.cal-lead.up.norep { border-inline-start: 3px solid var(--bad); }
.up-norep { color: var(--bad); font-weight: 600; font-size: .82rem; }
@media (min-width: 901px) and (max-width: 1200px) { .cal-wrap { grid-template-columns: 240px minmax(0, 1fr); } .cal-up { grid-column: 1 / -1; position: static; max-height: 320px; } }

/* calendar on a phone: the day grid first (swipe sideways between reps), the lists under it */
@media (max-width: 900px) {
  .cal-wrap > .cal-scroll { order: -1; max-height: 70vh; }
  .cal-up { position: static; max-height: 360px; }
  .cal-note { font-size: .78rem !important; margin: 0 !important; }
}
@media (max-width: 640px) {
  .cal-grid { grid-template-columns: 40px repeat(var(--cols), minmax(132px, 1fr)); }
  .cal-head { padding: 6px 8px; }
  .cal-appt { padding: 4px 6px; }
  .hello .row { flex-wrap: wrap; gap: 6px; }
  /* the top menu scrolls sideways instead of taking three rows */
  .top .nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; order: 3; flex-basis: 100%; }
  .top .nav::-webkit-scrollbar { display: none; }
  .top .nav a { flex: 0 0 auto; }
}

/* ================= phones: one layer for the whole app ================= */
.m-only { display: none; }
@media (max-width: 760px) {
  /* nothing that makes iOS zoom in, nothing too small to tap */
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px !important; min-height: 44px; }
  select.compact, .pct-in input { min-height: 40px; }
  .btn { min-height: 44px; }
  .btn.small { min-height: 40px; padding-inline: 12px; }
  .drawer header .btn { min-width: 44px; }
  .chip, .st { min-height: 26px; }
  /* header: logo + account on one row, the menu scrolls under it */
  .top { padding-block: 8px; row-gap: 8px; }
  .top .brand-txt { display: none; }
  .who { margin-inline-start: auto; gap: 6px; }
  .who .role { display: none; }
  .top .nav a { padding: 8px 12px; }
  main { padding-top: 14px; gap: 12px; }
  .hello { gap: 10px; }
  .hello h1 { font-size: 1.3rem; }
  /* stat tiles: a 2x2 block instead of a sideways strip */
  .tiles { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; margin-inline: 0; padding: 0; gap: 8px; }
  .tiles > .tile { flex: none; padding: 10px 12px; gap: 8px; min-height: 64px; }
  .tile-ic { width: 32px; height: 32px; }
  .tile-n { font-size: 1.2rem; }
  /* lead list filters fold behind one button */
  .m-only { display: inline-flex; }
  .toolbar { gap: 8px; }
  .toolbar .tabs { flex: 1 1 100%; overflow-x: auto; }
  .toolbar .grow { flex: 1 1 auto; min-width: 0; }
  .toolbar .filter-btn { flex: 0 0 auto; }
  .toolbar .filter-btn.on { border-color: var(--accent); color: var(--accent); }
  .toolbar .m-filter { display: none; }
  .toolbar.show-filters .m-filter { display: block; flex: 1 1 calc(50% - 4px); min-width: 0; }
  /* lead cards: name and status on top, then contact, then the chips that have a value */
  table.leads tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
  table.leads td { flex: 0 0 auto; }
  table.leads td.name { flex: 1 1 60%; order: -2; }
  table.leads td.c-st { order: -1; margin-inline-start: auto; text-align: end; }
  table.leads td.c-phone, table.leads td.c-addr { flex: 1 1 100%; }
  table.leads td.c-addr .sub { display: inline; margin-inline-start: 6px; }
  table.leads td.m-empty { display: none; }
  table.leads td.c-rep .m-rep { font-size: .85rem; color: var(--muted); }
  table.leads td.c-rep .m-rep::before { content: '👷 '; }
  table.leads td.name .sub { white-space: normal; }
  /* team: one card per person */
  .team-wrap { overflow: visible; }
  table.team { min-width: 0 !important; display: block; }
  table.team thead { display: none; }
  table.team tbody { display: grid; gap: 10px; }
  table.team tr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; }
  table.team td { border: 0; padding: 0; min-width: 0; }
  table.team td.name { grid-column: 1 / -1; font-size: 1.05rem; font-weight: 700; }
  table.team td[data-label]::before { content: attr(data-label); display: block; font-size: .75rem; color: var(--muted); font-weight: 600; margin-bottom: 3px; }
  table.team td.t-lang, table.team td.t-home, table.team td.t-act { grid-column: 1 / -1; }
  table.team td.m-empty { display: none; }
  table.team td.t-act .row { flex-wrap: wrap; gap: 8px; }
  table.team td .home-in, table.team td input[type=text] { width: 100%; }
  /* wide tables (reports, calls) scroll sideways inside their box, with tighter cells */
  .table-wrap.scroll, .panel .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table th, table td { padding: 9px 10px; }
  /* dialogs: full width, scroll inside, buttons always reachable */
  .dlg { width: calc(100vw - 20px); max-height: calc(100dvh - 24px); overflow: auto; }
  .dlg form { padding: 16px; }
  .dlg form > .row:last-child { position: sticky; bottom: -16px; background: var(--surface); padding-block: 10px; margin-bottom: -6px; }
  /* drawer is the whole screen on a phone */
  .drawer { width: 100%; }
  .drawer .body { padding: 12px 12px 90px; }
  .toast { inset-inline: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: none; }
  /* links and folds people tap with a thumb */
  .kv a:not(.act):not(.btn), .drawer .body a[href^="tel"]:not(.act):not(.btn), .drawer .body a[href^="mailto"]:not(.act):not(.btn), .drawer .body a[target=_blank]:not(.act):not(.btn) { display: inline-block; padding-block: 10px; }
  details > summary { padding-block: 10px; }
  .leaflet-touch .leaflet-bar a { width: 40px; height: 40px; line-height: 40px; }
  .rcard h3 a, .rcard .rc-name { display: inline-block; padding-block: 6px; }
  /* login: just the logo band above the form */
  .login-art .plan, .login-art svg.plan { display: none; }
  .login-art { padding-bottom: 16px; }
}
@media (max-width: 760px) and (pointer: coarse) {
  .tabs button { min-height: 40px; }
}
/* status picker: long labels ("Appointment set") wrap inside their button instead of spilling out */
.stpick { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.stpick .st { display: flex; align-items: center; justify-content: center; white-space: normal; text-align: center; line-height: 1.2; padding-inline: 8px; }
@media (max-width: 760px) { .stpick { grid-template-columns: 1fr 1fr; } }
input.bad { border-color: var(--bad) !important; box-shadow: 0 0 0 3px var(--bad-bg); }
input[type=time], .dlg input[type=date] { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; min-width: 0; width: 100%; font: inherit; color: var(--ink); }

/* call notes: two lines until tapped */
.call-note { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; max-width: 340px; margin-top: 4px; font-size: .84rem; color: var(--muted); cursor: pointer; line-height: 1.4; }
.call-note:not(.open)::after { content: ''; }
.call-note.open { display: block; max-height: 200px; overflow-y: auto; color: var(--ink); background: var(--sunk); border-radius: 8px; padding: 6px 8px; }

/* the customer's tax answer */
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg .btn.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.tax-said { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: .9rem; }
/* use the whole screen width: no 1400px cap, slimmer side margins */
main { max-width: none; padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right)); }
@media (max-width: 760px) { main { padding-inline: max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-right)); } }
.q-team { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.q-team .chip { font-size: .78rem; }
/* manual tax check: open the county site, tap what it says */
.tax-manual { display: grid; gap: 8px; justify-items: start; margin-top: 8px; }
.tax-manual .row { flex-wrap: wrap; gap: 6px; }
.tax-pick.on.ok { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.tax-pick.on.warn { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.tax-pick.on.bad { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); }
.tax-pick.on { border-color: var(--ink); }
.tax-hand { margin-top: 10px; }
.tax-hand > summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.bk-tax { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; display: grid; gap: 4px; background: var(--sunk); }
.bk-tax.done { border-color: var(--ok); }
.bk-tax.done > b::after { content: ' ✓'; color: var(--ok); }
.tax-manual a.btn { text-decoration: none; }
/* call queue cadence */
.q-hours { display: block; white-space: normal; line-height: 1.5; padding: 8px 12px; }
.q-cadence { font-size: .9rem; }
.q-cadence > summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.q-cadence ol { margin: 8px 0; padding-inline-start: 22px; display: grid; gap: 2px; }
.q-done > summary { cursor: pointer; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* a lead that just came in: a soft flash on its row */
@keyframes newIn { 0%, 60% { background: color-mix(in srgb, var(--sun, #f5b82e) 28%, transparent); } 100% { background: transparent; } }
tr.new-in > td { animation: newIn 12s ease-out; }
tr.new-in td.name b, tr.new-in td.name strong { color: var(--accent); }
/* calendar on a phone: a list of the day instead of the grid */
.cal-agenda { display: grid; gap: 12px; min-width: 0; }
.ag-group { display: grid; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; }
.ag-group.need { border-color: var(--bad); }
.ag-group.empty { padding-block: 8px; }
.ag-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ag-head b { font-size: 1rem; }
.ag-group.need .ag-head b { color: var(--bad); }
.cal-agenda .ag-item { position: static; height: auto; width: 100%; text-align: start; display: grid; gap: 4px; padding: 10px 12px; font: inherit; cursor: pointer; min-height: 44px; }
.cal-agenda .ag-item .ca-top { gap: 8px; }
.cal-agenda .ag-item .ca-name { font-size: 1rem; }
.cal-agenda .ag-item.norep { border-inline-start: 4px solid var(--bad); }
.ag-tap { font-size: .75rem; color: var(--muted); }
.cal-book-btn { margin-top: 6px; justify-self: start; }
@media (max-width: 760px) { .cal-wrap > .cal-agenda { order: -1; } }
.cal-lead { height: auto; overflow: visible; }
@media (max-width: 760px) { .cal-side, .cal-side-list { max-height: none; overflow: visible; } }
/* queue: the next call in one tap, and the backlog that fills the quiet time */
.q-next { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; }
.q-next-btn { font-size: 1.05rem; padding: 12px 20px; }
.q-backlog > summary { cursor: pointer; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.q-backlog.now { border: 2px solid var(--accent); border-radius: var(--r); padding: 10px; }
.q-backlog.now > summary b { color: var(--accent); }

/* =================================================================================================
   PHONE APP SHELL (≤760px). One loud element: the dock — the deep-forest tab bar with a sun pill on
   the active tab, and the page's main action riding just above it. Everything else stays quiet.
   ================================================================================================= */
.mtop, .dock, .m-back { display: none; }
@media (max-width: 760px) {
  :root { --mtop-h: 54px; --dock-h: 64px; --dock-pad: env(safe-area-inset-bottom, 0px); }
  body.has-dock { padding-bottom: 0; }
  .top { display: none !important; }
  /* header: logo, the page you're on, you */
  .mtop { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 6;
    height: calc(var(--mtop-h) + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 14px 0;
    background: var(--brand-deep); color: var(--brand-ink); box-shadow: 0 1px 0 rgb(255 255 255 / .06); }
  .mtop-logo { width: 30px; height: 30px; color: #fff; flex: 0 0 auto; }
  .mtop-logo svg { width: 30px; height: 30px; display: block; }
  .mtop-title { flex: 1; margin: 0; font: 650 1.12rem/1.2 Rubik, Heebo, system-ui, sans-serif; letter-spacing: 0; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mtop-me { border: 0; background: transparent; padding: 4px; border-radius: 999px; min-width: 44px; min-height: 44px; display: grid; place-items: center; cursor: pointer; }
  .mtop-me .av { width: 34px; height: 34px; box-shadow: 0 0 0 2px rgb(255 255 255 / .25); }
  /* the dock */
  .dock { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; inset-inline: 0; bottom: 0; z-index: 8;
    height: calc(var(--dock-h) + var(--dock-pad)); padding: 6px 6px calc(6px + var(--dock-pad));
    background: var(--brand-deep); box-shadow: 0 -1px 0 rgb(255 255 255 / .06), 0 -10px 30px rgb(6 20 18 / .18); }
  .dock-tab { border: 0; background: transparent; color: rgb(228 239 236 / .72); display: grid; justify-items: center; align-content: center; gap: 3px; font: 500 .72rem/1 Heebo, Rubik, system-ui, sans-serif; cursor: pointer; padding: 0; min-width: 0; -webkit-tap-highlight-color: transparent; }
  .dock-ic { width: 52px; height: 30px; border-radius: 999px; display: grid; place-items: center; transition: background .18s ease; }
  .dock-ic .i { width: 22px; height: 22px; }
  .dock-tab.on { color: #fff; font-weight: 650; }
  .dock-tab.on .dock-ic { background: var(--sun); color: var(--sun-ink); }
  .dock-tab:focus-visible { outline: 2px solid var(--sun); outline-offset: -4px; border-radius: 12px; }
  main { padding-bottom: calc(var(--dock-h) + var(--dock-pad) + 96px) !important; padding-top: 12px !important; }
  /* the header already says where you are */
  .hello:not(.rep-hello) > div > h1 { display: none; }
  .hello:not(.rep-hello) > div > p { margin-top: 0; font-size: .9rem; }
  .rep-hello h1 { font-size: 1.25rem; }
  .rep-tabs { display: none !important; } /* the dock is the rep's tabs */
  /* phone calls: manual dial lives under "More"; a live call sits right above the dock */
  .ph-fab { display: none !important; }
  #phonebar { bottom: calc(var(--dock-h) + var(--dock-pad) + 10px) !important; inset-inline: 10px !important; }
  /* dialogs come up from the bottom */
  .dlg { width: 100% !important; max-width: 100% !important; margin: auto 0 0 !important; max-height: calc(100dvh - 40px) !important; border-radius: 22px 22px 0 0 !important; padding-bottom: env(safe-area-inset-bottom, 0px); animation: sheetUp .22s cubic-bezier(.2, .8, .3, 1); }
  .dlg::backdrop { background: rgb(6 20 18 / .5); }
  .dlg form { padding: 8px 16px 16px; }
  .dlg form::before, .sheet-grip { content: ''; display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--line); margin: 6px auto 6px; }
  .dlg form > .row:last-child, .dlg form > .row:last-of-type { position: sticky; bottom: 0; background: var(--surface); padding: 10px 0 calc(6px + env(safe-area-inset-bottom, 0px)); margin: 0; z-index: 1; box-shadow: 0 -12px 12px -8px var(--surface); }
  .dlg form > .row:last-child .btn.primary { flex: 1; }
  /* lead card: the whole screen, back arrow, actions within thumb reach at the bottom */
  .scrim { display: none; }
  .drawer { width: 100% !important; inset: 0 !important; z-index: 9; padding-bottom: 0; }
  .drawer header { padding: calc(8px + env(safe-area-inset-top, 0px)) 8px 8px; gap: 6px; background: var(--brand-deep); color: #fff; border: 0; }
  .drawer header h1 { font-size: 1.1rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .drawer header h1:focus { outline: none; }
  .drawer header .btn { background: rgb(255 255 255 / .1); color: #fff; border-color: transparent; }
  .drawer header .btn.del { background: transparent; color: #ffb4a8; }
  .m-back { display: inline-grid; place-items: center; min-width: 44px; }
  html[dir=ltr] .m-back .i { transform: scaleX(-1); }
  .drawer header .btn:not(.m-back):not(.del) { display: none; } /* the ✕: the back arrow does it */
  .drawer .body { padding: 12px 12px calc(110px + env(safe-area-inset-bottom, 0px)) !important; }
  .drawer .acts.full { position: fixed; inset-inline: 0; bottom: 0; z-index: 10; margin: 0; border-radius: 18px 18px 0 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(64px, 1fr); grid-template-columns: none; overflow-x: auto; gap: 6px;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--surface); box-shadow: 0 -1px 0 var(--line), 0 -12px 30px rgb(6 20 18 / .12); scrollbar-width: none; }
  .drawer .acts.full::-webkit-scrollbar { display: none; }
  .drawer .acts.full .act { flex-direction: column; gap: 4px; min-height: 60px; padding: 8px 4px; font-size: .74rem; border-radius: 14px; justify-content: center; }
  .drawer .acts.full .act .i { width: 22px; height: 22px; }
  /* call queue: the next call rides above the dock */
  .q-next { position: fixed; inset-inline: 10px; bottom: calc(var(--dock-h) + var(--dock-pad) + 10px); z-index: 7; padding: 8px; gap: 8px; border-radius: 18px; box-shadow: 0 10px 30px rgb(6 20 18 / .22); flex-wrap: nowrap; }
  .q-next-btn { flex: 0 0 auto; min-height: 52px; border-radius: 14px; }
  .q-next > .muted { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; }
  .q-goal { width: 100%; }
  /* lead list: the four numbers become one compact strip */
  .tiles { grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; }
  .tiles > .tile { flex-direction: column; align-items: flex-start; padding: 8px 10px !important; min-height: 0 !important; gap: 2px !important; }
  .tiles .tile-ic { display: none; }
  .tiles .tile-n { font-size: 1.15rem !important; }
  .tiles .tile-l, .tiles .tile small, .tiles .tile span:not(.tile-n) { font-size: .68rem; line-height: 1.2; }
  /* "More" */
  .more-sheet { padding: 4px 14px 14px; }
  .more-me { display: flex; align-items: center; gap: 12px; padding: 6px 4px 12px; }
  .more-me .av { width: 44px; height: 44px; font-size: 1rem; }
  .more-me b { display: block; font-size: 1.05rem; }
  .more-list { display: grid; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin-bottom: 12px; background: var(--surface); }
  .more-item { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font: 500 1rem Heebo, Rubik, system-ui, sans-serif; text-align: start; cursor: pointer; }
  .more-item:last-child { border-bottom: 0; }
  .more-item.on { color: var(--accent); font-weight: 650; }
  .more-item.danger { color: var(--bad); }
  .more-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--sunk); display: grid; place-items: center; color: var(--accent); flex: 0 0 auto; }
  .more-ic .i { width: 19px; height: 19px; }
  .more-ic.lang { font: 700 .8rem Rubik, sans-serif; }
  .more-item.danger .more-ic { background: var(--bad-bg); color: var(--bad); }
  .sheet-close { width: 100%; min-height: 48px; }
  .sheet > h2 { margin: 4px 4px 8px; }
  .sheet > p { margin: 0 4px 14px; line-height: 1.6; }
  .sheet > .btn.primary { width: 100%; min-height: 48px; }
  /* toasts sit above the dock */
  .toast { bottom: calc(var(--dock-h) + var(--dock-pad) + 76px) !important; }
}
@keyframes sheetUp { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dlg { animation: none !important; } .dock-ic { transition: none; } }
/* calendar on a phone: one day bar, a strip of days, then the day */
.cal-mhead { display: flex; align-items: center; gap: 6px; }
.cal-mnav { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 1.5rem/1 Rubik, sans-serif; cursor: pointer; flex: 0 0 auto; }
.cal-mday { flex: 1; position: relative; display: grid; justify-items: center; gap: 1px; padding: 4px 0; cursor: pointer; min-width: 0; }
.cal-mday b { font: 700 1.2rem/1.15 Rubik, Heebo, sans-serif; }
.cal-mday span { font-size: .82rem; color: var(--muted); }
.cal-pick { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; border: 0; }
.cal-mweek { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-mdot { border: 0; background: transparent; display: grid; justify-items: center; gap: 2px; padding: 6px 0 4px; border-radius: 14px; color: var(--muted); font: 500 .72rem Heebo, sans-serif; cursor: pointer; min-height: 56px; }
.cal-mdot b { font: 650 1.05rem/1 Rubik, sans-serif; color: var(--ink); }
.cal-mdot i { font-style: normal; min-width: 18px; height: 16px; border-radius: 8px; font: 700 .66rem/16px Rubik, sans-serif; }
.cal-mdot i.has { background: var(--accent-soft); color: var(--accent); }
.cal-mdot.today b { color: var(--accent); }
.cal-mdot.on { background: var(--brand-deep); color: rgb(255 255 255 / .75); }
.cal-mdot.on b { color: #fff; }
.cal-mdot.on i.has { background: var(--sun); color: var(--sun-ink); }
.ag-assign { justify-self: start; margin-top: 4px; background: var(--bad); color: #fff; border-radius: 999px; padding: 4px 12px; font-size: .8rem; font-weight: 650; }
.ag-free { margin: 0; font-size: .88rem; color: var(--muted); padding: 0 4px; }
.ag-free b { color: var(--ink); font-weight: 600; }
.ag-empty { margin: 8px 0; text-align: center; color: var(--muted); }
.ag-tools { display: flex; justify-content: space-between; gap: 8px; }
@media (max-width: 760px) { .cal-agenda .ag-item { background: var(--surface); } .cal-agenda .ag-item.norep { background: color-mix(in srgb, var(--bad) 6%, var(--surface)); } }
/* the chevron points the way the days go: back toward the start of the line, forward toward its end */
.cal-mnav { display: grid; place-items: center; }
.cal-mnav .i { width: 22px; height: 22px; }
html[dir=rtl] .cal-mnav.prev .i, html[dir=ltr] .cal-mnav.next .i { transform: scaleX(-1); }
/* phones: nothing may push the page wider than the screen (iPhone then zooms the whole page out).
   Grid tracks size to their longest no-wrap line unless told otherwise, so: minmax(0, 1fr) and min-width: 0. */
@media (max-width: 900px) {
  .cal-wrap { grid-template-columns: minmax(0, 1fr) !important; }
  .cal-wrap > *, .cal-agenda, .ag-group, .ag-item, .cal-side, .cal-side-list, .cal-lead, .q-list, .q-card, .q-main { min-width: 0; max-width: 100%; }
  .ag-item .ca-sub, .cal-lead .muted, .q-meta { white-space: normal; overflow-wrap: anywhere; }
  .ag-item .ca-name { white-space: normal; }
}
@media (max-width: 760px) { main { overflow-x: clip; max-width: 100vw; } }
/* incoming call: over everything, on every page */
.ph-ring-wrap { border: 0; background: transparent; padding: 16px; width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; display: grid; place-items: center; }
.ph-ring-wrap::backdrop { background: rgb(6 20 18 / .6); backdrop-filter: blur(2px); }
.ph-ring-wrap .ph-card.ring { position: static; width: min(420px, 100%); display: grid; justify-items: center; text-align: center; gap: 10px; padding: 26px 22px 22px; border-radius: 24px; background: var(--surface); box-shadow: 0 30px 80px rgb(0 0 0 / .35); }
.ph-ring-wrap .ph-k { font: 700 1.3rem Rubik, Heebo, sans-serif; color: var(--ink); }
.ph-ring-wrap .ph-who { display: grid; justify-items: center; gap: 6px; font-size: 1.1rem; }
.ph-ring-wrap .ph-who b { font-size: 1.35rem; }
.ph-ring-wrap .row { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.ph-ring-wrap .row .btn { min-height: 56px; font-size: 1.1rem; border-radius: 16px; justify-content: center; }
.ph-pulse { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; animation: phPulse 1.2s ease-out infinite; }
.ph-pulse .i { width: 34px; height: 34px; }
@keyframes phPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 100% { box-shadow: 0 0 0 22px transparent; } }
@media (prefers-reduced-motion: reduce) { .ph-pulse { animation: none; } }
/* the light next to your name: green = incoming calls reach this browser */
.ph-status { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgb(255 255 255 / .2); background: rgb(255 255 255 / .08); color: #fff; border-radius: 999px; padding: 4px 10px; font: 600 .78rem Heebo, sans-serif; cursor: pointer; min-height: 30px; }
.ph-status[hidden] { display: none; }
.ph-status .dot { width: 9px; height: 9px; border-radius: 50%; background: #ff6b5b; box-shadow: 0 0 0 3px rgb(255 107 91 / .25); }
.ph-status.on .dot { background: var(--leaf); box-shadow: 0 0 0 3px rgb(94 227 176 / .25); }
.ph-status.off { border-color: rgb(255 107 91 / .6); }
@media (max-width: 760px) { .mtop .ph-status .lbl { display: none; } .mtop .ph-status { min-height: 36px; min-width: 36px; justify-content: center; padding: 0; } }

/* ---------- production: every sold job being built ---------- */
.pr-tiles .tile-n { font-size: 1.35rem; }
.pr-tsub { color: var(--muted); }
.pr-con { width: auto; min-width: 180px; }
.pr-table td.pr-m, .pr-table th.num { text-align: end; white-space: nowrap; }
.pr-table td.pr-m { font-variant-numeric: tabular-nums; }
.pr-est { color: var(--warn); font-weight: 700; margin-inline-start: 2px; cursor: help; }
.pr-neg { color: var(--bad); }
.pr-stage { display: grid; gap: 4px; min-width: 110px; }
.pr-bar { height: 6px; border-radius: 3px; background: var(--sunk); overflow: hidden; }
.pr-bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.pr-total td { font-weight: 600; background: var(--sunk); border-top: 2px solid var(--line); }
.pr-note { margin: 8px 4px 0; }
.pr-dlg { width: min(640px, calc(100vw - 32px)); }
.pr-dlg form, .pr-dlg-in { display: grid; gap: 14px; padding: 18px 20px; max-height: calc(100vh - 48px); overflow-y: auto; }
.pr-dlg-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pr-dlg-h h2 { margin: 0; }
.pr-dlg-h .sub { margin: 4px 0 0; }
.pr-costs .field small { display: block; margin-top: 2px; }
.pr-split { display: grid; gap: 4px; padding-top: 8px; border-top: 1px solid var(--line); }
.pr-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pr-steps { margin: 0; grid-template-columns: repeat(6, minmax(46px, 1fr)); }
.pr-dlg-foot { flex-wrap: wrap; gap: 8px; align-items: center; }
.pr-cons { display: grid; gap: 0; }
.pr-con-row { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pr-con-row:last-child { border-bottom: 0; }
.pr-con-row.off { opacity: .6; }
.pr-con-row .chip { margin-inline-start: 6px; }
@media (max-width: 760px) {
  .pr-con { flex: 1 1 100%; }
  .pr-table td.pr-m { text-align: start; }
  .pr-total { display: none !important; }
  .pr-dates, .pr-costs .cost-grid { grid-template-columns: 1fr; }
  .pr-con-row { flex-wrap: wrap; }
}
/* desktop: the top menu (11 pages for the admin) stays on one row */
@media (min-width: 761px) and (max-width: 1680px) {
  .top .nav { gap: 1px; }
  .top .nav a { padding: 7px 9px; gap: 5px; font-size: .9rem; }
}
@media (max-width: 760px) {
  .tiles.pr-tiles { grid-template-columns: 1fr 1fr !important; }
  .pr-tiles .tile-n { font-size: 1.15rem !important; }
}
/* qualification asked before booking */
.bk-qual { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 0; display: grid; gap: 10px; min-width: 0; }
.bk-qual legend { font-weight: 700; padding: 0 6px; }
.bk-qual .seg { flex-wrap: wrap; }
.bk-qwarn { margin: 0; display: flex; flex-direction: column; gap: 2px; white-space: normal; text-align: start; }
.qual-line { display: flex; flex-wrap: wrap; gap: 4px; }
.q-missing summary b { color: var(--bad); }

/* ---------- Meta tab: a card per campaign ---------- */
.mt-bar { flex-wrap: wrap; gap: 10px; }
.mt-bar .tabs button { white-space: nowrap; }
.mt-sort { width: auto; min-width: 170px; }
.mt-notice { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: var(--info-bg); border-radius: var(--r); padding: 14px 18px; margin-bottom: 16px; }
.mt-notice.bad { background: var(--bad-bg); }
.mt-notice p { margin: 2px 0 0; color: var(--muted); max-width: 70ch; }
.mt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.mt-card { display: flex; flex-direction: column; gap: 12px; text-align: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 16px 18px; cursor: pointer; color: inherit; font: inherit; min-width: 0; transition: border-color .15s; }
.mt-card:hover { border-color: var(--accent); }
.mt-card.off { background: var(--sunk); box-shadow: none; }
.mt-card.off .mt-money, .mt-card.off .mt-step b { color: var(--muted); }
.mt-none { border-style: dashed; box-shadow: none; background: transparent; }
.mt-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
.mt-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }
.mt-budget { font-size: .85rem; color: var(--muted); font-weight: 500; }
.mt-name { margin: 0; font-family: var(--display); font-size: 1.02rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.mt-spend { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 14px; }
.mt-money { font-family: var(--display); font-size: 2rem; font-weight: 600; line-height: 1; direction: ltr; text-align: start; }
.mt-sub { font-size: .8rem; color: var(--muted); margin: 4px 0 0; }
.mt-spark { width: 100%; height: 38px; display: block; overflow: visible; }
.mt-spark-a { fill: color-mix(in srgb, var(--accent) 14%, transparent); }
.mt-spark-l { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.mt-hit { fill: transparent; }
.mt-hit:hover { fill: color-mix(in srgb, var(--accent) 12%, transparent); }
.mt-funnel { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 6px; }
.mt-none .mt-funnel { grid-template-columns: repeat(3, 1fr); }
.mt-step { background: var(--sunk); border-radius: var(--r-sm); padding: 8px 6px; text-align: center; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mt-card.off .mt-step { background: var(--surface); }
.mt-step b { font-size: 1.35rem; font-weight: 600; line-height: 1.1; }
.mt-step span { font-size: .76rem; color: var(--muted); }
.mt-conv { display: flex; flex-direction: column; align-items: center; color: var(--accent); font-weight: 600; font-size: .85rem; line-height: 1.1; }
.mt-conv small { font-size: .68rem; color: var(--muted); font-weight: 500; white-space: nowrap; }
.mt-conv::after { content: "←"; font-size: .9rem; line-height: 1; margin-top: 2px; opacity: .7; }
html[dir=ltr] .mt-conv::after { content: "→"; }
.mt-note { font-size: .8rem; color: var(--muted); margin-top: -4px; }
.mt-costs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.mt-costs div { display: flex; flex-direction: column; min-width: 0; }
.mt-costs span { font-size: .74rem; color: var(--muted); }
.mt-costs b { font-weight: 600; }
.mt-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: .85rem; color: var(--muted); }
.mt-foot b { color: var(--ink); }
.mt-roas.good b { color: var(--ok); }
.mt-foot-note { font-size: .82rem; margin-top: 14px; }
.mt-leads { list-style: none; margin: 0; padding: 0; display: grid; }
.mt-leads li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 9px 0; border-bottom: 1px solid var(--line); align-items: center; }
.mt-leads li .sub { grid-column: 1; font-size: .8rem; color: var(--muted); }
.mt-leads .mt-lst { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 560px) { .mt-grid { grid-template-columns: 1fr; } .mt-card { padding: 14px; } .mt-money { font-size: 1.7rem; } .mt-bar .tabs { overflow-x: auto; max-width: 100%; } }
.fb-down { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--bad-bg); color: var(--bad); padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); font-size: .9rem; }
.fb-down b { font-weight: 700; }
/* calls page: today / this week / this month */
.cs-sum h2 { margin-bottom: 10px; }
.cs-periods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cs-period { display: flex; flex-direction: column; gap: 2px; text-align: start; background: var(--sunk); border: 2px solid transparent; border-radius: var(--r-sm); padding: 12px 14px; cursor: pointer; color: inherit; font: inherit; min-width: 0; }
.cs-period:hover { border-color: var(--line); }
.cs-period.on { background: var(--accent-soft); border-color: var(--accent); }
.cs-l { font-weight: 600; font-size: .9rem; }
.cs-l small { font-weight: 400; color: var(--muted); }
.cs-n { font-family: var(--display); font-size: 2rem; font-weight: 600; line-height: 1.1; }
.cs-period.on .cs-n { color: var(--accent); }
.cs-d { font-size: .8rem; color: var(--muted); }
@media (max-width: 560px) {
  .cs-periods { grid-template-columns: 1fr; gap: 6px; }
  .cs-period { display: grid; grid-template-columns: 64px 1fr; column-gap: 12px; align-items: center; padding: 10px 12px; }
  .cs-period .cs-n { grid-column: 1; grid-row: 1 / span 4; font-size: 1.8rem; text-align: center; }
  .cs-period > :not(.cs-n) { grid-column: 2; }
}
.ph-team { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .85rem; }
.ads-pick summary { cursor: pointer; font-weight: 600; font-size: .9rem; }
.ads-accs { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0; }
/* top right: the name opens a small menu (phone status, language, password, log out) */
.who { position: relative; }
.me-btn { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1px solid transparent; color: inherit; font: inherit; padding: 3px 8px 3px 4px; border-radius: 999px; cursor: pointer; }
.me-btn:hover, .me-btn[aria-expanded="true"] { background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .14); }
.me-av { position: relative; display: inline-flex; }
.ph-status.ph-badge { position: absolute; inset-block-end: -1px; inset-inline-end: -1px; width: 12px; height: 12px; min-height: 0; padding: 0; border-radius: 50%; border: 2px solid var(--brand-deep); background: #ff6b5b; cursor: default; }
.ph-status.ph-badge.on { background: var(--leaf); }
.me-caret { font-size: .7rem; opacity: .7; }
.me-menu { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); min-width: 230px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: 0 12px 32px -8px rgb(0 0 0 / .35); padding: 6px; display: flex; flex-direction: column; gap: 2px; z-index: 20; }
.me-menu[hidden] { display: none; }
.me-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.me-head .role { background: var(--sun-soft); color: var(--sun-ink); }
.me-phone { padding: 4px 6px 6px; }
.me-phone .ph-status { background: var(--sunk); color: var(--ink); border-color: var(--line); }
.me-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: start; background: transparent; border: 0; border-radius: 8px; padding: 9px 10px; color: inherit; font: inherit; cursor: pointer; }
.me-item:hover, .me-item:focus-visible { background: var(--sunk); }
.me-item .i { width: 18px; height: 18px; color: var(--muted); }
.me-item.danger { color: var(--bad); }
.me-item.danger .i { color: var(--bad); }
.me-lang { width: 18px; text-align: center; font-weight: 700; font-size: .78rem; color: var(--muted); }

/* =====================================================================
   Skin v6: a work tool. White and soft gray, hairline borders instead of shadows, one pine green for actions
   and "you are here", colour only where it carries state. IBM Plex Sans Hebrew throughout.
   Radii: boxes 10 · controls 8 · pills 6. Desktop navigation lives in a side bar.
   ===================================================================== */
@font-face { font-family: "Plex"; src: url(https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-sans-hebrew@5.3.0/files/ibm-plex-sans-hebrew-hebrew-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Plex"; src: url(https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-sans-hebrew@5.3.0/files/ibm-plex-sans-hebrew-hebrew-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Plex"; src: url(https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-sans-hebrew@5.3.0/files/ibm-plex-sans-hebrew-hebrew-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Plex"; src: url(https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-sans-hebrew@5.3.0/files/ibm-plex-sans-hebrew-hebrew-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Plex"; src: url(https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-sans-hebrew@5.3.0/files/ibm-plex-sans-hebrew-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plex"; src: url(https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-sans-hebrew@5.3.0/files/ibm-plex-sans-hebrew-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plex"; src: url(https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-sans-hebrew@5.3.0/files/ibm-plex-sans-hebrew-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plex"; src: url(https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-sans-hebrew@5.3.0/files/ibm-plex-sans-hebrew-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #f6f7f6; --surface: #ffffff; --sunk: #f1f3f2; --ink: #15201b; --ink-2: #3b4742; --muted: #66736d; --line: #e3e7e5; --line-2: #cfd6d2;
  --brand: #0f6b4b; --brand-deep: #0b553b; --brand-ink: #ffffff; --leaf: #2fa36f; --mint: #2fa36f;
  --accent: #0f6b4b; --accent-ink: #ffffff; --accent-soft: #e7f1ec; --accent-hi: #138057;
  --storm: #15201b; --storm-2: #1f2c26;
  --sun: #b26a00; --sun-ink: #4a2c00; --sun-soft: #fdf3e1; --solar: #b26a00;
  --ok: #157347; --ok-bg: #e5f3ea; --warn: #9a5800; --warn-bg: #fdf3e1; --bad: #b42318; --bad-bg: #fcebea; --info: #2f5bd3; --info-bg: #ebf0fc;
  --violet: #6a43c9; --violet-bg: #f1ecfc;
  --shadow: none; --pop: 0 12px 32px -10px rgb(21 32 27 / .28), 0 0 0 1px rgb(21 32 27 / .06);
  --r: 10px; --r-sm: 8px; --r-xs: 6px;
  --display: "Plex", "IBM Plex Sans Hebrew", "Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --body: "Plex", "IBM Plex Sans Hebrew", "Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: "Plex", "IBM Plex Sans Hebrew", "Heebo", system-ui, sans-serif;
  --side: 216px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1412; --surface: #161c19; --sunk: #1c2420; --ink: #e6ece9; --ink-2: #c3ccc8; --muted: #93a19a; --line: #27312c; --line-2: #34403a;
    --brand: #3db688; --brand-deep: #2c9a71; --brand-ink: #06140e; --leaf: #3db688; --mint: #3db688;
    --accent: #3db688; --accent-ink: #06140e; --accent-soft: #13291f; --accent-hi: #52c798;
    --storm: #0b0f0d; --storm-2: #161c19;
    --sun: #f0b450; --sun-ink: #2a1a00; --sun-soft: #33270c; --solar: #f0b450;
    --ok: #5fd39b; --ok-bg: #11301f; --warn: #f0b450; --warn-bg: #33270c; --bad: #ff8b7e; --bad-bg: #3b1916; --info: #8fb0f5; --info-bg: #142340;
    --violet: #b9a5f0; --violet-bg: #2a2340;
    --pop: 0 16px 40px -10px rgb(0 0 0 / .6), 0 0 0 1px rgb(255 255 255 / .06);
  }
}

/* type: one family, a tight scale (13 · 14 · 16 · 22 · 28) */
body { background: var(--bg); color: var(--ink); font: 400 14px/1.5 var(--body); letter-spacing: 0; font-feature-settings: "tnum" 1; }
h1, h2, h3, .btn, .nav a, .chip, .st, .tabs button, .act, th, .tile-n, .stat-v, .rp-v, .cal-head b, .brand-txt b, .role, .fchip, .q-sec h2, .sec-h h2,
.person b, td.name, .rname, .rtime b, .cal-day b, .ltag, .lang, .prod, .src, label.field > span, .mtop-title, .dock-tab { font-family: var(--display); }
h1 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
h2, .sec-h h2, .panel > h2, .panel h2 { font-size: 15px; font-weight: 600; letter-spacing: 0; }
.hello h1 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.hello p { font-size: 13px; color: var(--muted); }
.muted { color: var(--muted); }
.num, .tile-n, .mono, td.num, .rp-v { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: inherit; letter-spacing: 0; }

/* navigation: white bar (tablet) or side bar (desktop); the current page is a quiet green tint */
.top { background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--line); box-shadow: none; padding-block: 8px; gap: 16px; }
.top .brand { color: var(--ink); }
.top .brand svg { width: 30px; height: 30px; filter: none; color: var(--brand); }
.brand-txt { line-height: 1.15; }
.brand-txt b { font-size: 15px; font-weight: 700; letter-spacing: 0; color: var(--ink); }
.brand-txt small { font-size: 11px; font-weight: 500; letter-spacing: .02em; color: var(--muted); opacity: 1; }
.nav a { color: var(--ink-2); background: transparent; border: 0; border-radius: var(--r-sm); padding: 7px 10px; font-weight: 500; font-size: 14px; box-shadow: none; gap: 9px; }
.nav a svg { width: 18px; height: 18px; color: var(--muted); }
.nav a:hover { background: var(--sunk); color: var(--ink); }
.nav a.on { background: var(--accent-soft); color: var(--brand); font-weight: 600; box-shadow: none; border: 0; }
.nav a.on svg { color: var(--brand); }
.who { color: var(--ink); }
.who .av.av, .top .av.av { background: var(--brand); color: #fff; box-shadow: none; }
.me-btn { color: var(--ink); }
.me-btn:hover, .me-btn[aria-expanded="true"] { background: var(--sunk); border-color: var(--line); }
.ph-status.ph-badge { border-color: var(--surface); }
.role { background: var(--sunk); color: var(--ink-2); border: 1px solid var(--line); font-weight: 600; font-size: 11px; }
.me-head .role { background: var(--sunk); color: var(--ink-2); }
.me-menu { box-shadow: var(--pop); border-color: var(--line); border-radius: var(--r); }
.ph-status { border-color: var(--line); background: var(--surface); color: var(--ink); }
.ph-status .dot { box-shadow: none; }
.ph-status.on .dot { background: var(--leaf); box-shadow: none; }
.ph-status.off { border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }
@media (min-width: 1100px) {
  .top { position: fixed; inset-block: 0; inset-inline-start: 0; width: var(--side); box-sizing: border-box; flex-direction: column; align-items: stretch; flex-wrap: nowrap;
    gap: 2px; padding: 14px 10px 12px; border-bottom: 0; border-inline-end: 1px solid var(--line); overflow-y: auto; z-index: 6; }
  .top .brand { padding: 4px 8px 18px; }
  .top .nav { flex-direction: column; flex: 1 1 auto; flex-wrap: nowrap; gap: 1px; }
  .top .nav a { padding: 8px 10px; }
  .top .who { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
  .top .me-btn { width: 100%; justify-content: flex-start; padding: 6px 8px; border-radius: var(--r-sm); }
  .top .me-btn .me-caret { margin-inline-start: auto; }
  .top .me-menu { top: auto; bottom: calc(100% + 6px); inset-inline-start: 0; inset-inline-end: auto; width: 100%; box-sizing: border-box; }
  #app > main, #app > .fb-down { margin-inline-start: var(--side); }
  html[dir=ltr] .top .nav { gap: 1px; }
  html[dir=ltr] .top .nav a { padding: 8px 10px; }
}
main { padding: 24px 24px 64px; gap: 16px; max-width: none; }
@media (min-width: 1100px) { main { margin-inline: 0; } #phonebar { inset-inline-start: auto; inset-inline-end: 20px; } }
.fb-down { padding-inline: 32px; }

/* surfaces: hairlines, no shadows */
.table-wrap, .panel, .sec, .tile, .rcard, .map-side, .fieldmap, .acts.full, .q-card, .q-goal, .rp-tile, .mt-card, .cs-sum, .login form, .cal-day, .jcard {
  border: 1px solid var(--line); box-shadow: none; border-radius: var(--r); }
.panel, .sec { padding: 18px 20px; }
.rp-tile.big { background: var(--surface); }
.rp-tile.big .rp-v { color: var(--ink); }

/* stat tiles: the number leads, the icon is a small marker */
.tiles { gap: 12px; }
.tile { padding: 14px 16px; gap: 12px; transition: border-color .15s; }
button.tile:hover { transform: none; box-shadow: none; border-color: var(--line-2); }
.tile-ic { width: 32px; height: 32px; border-radius: var(--r-sm); border: 0; background: var(--sunk) !important; color: var(--muted) !important; }
.tile-ic svg { width: 17px; height: 17px; }
.tile-n { font-size: 26px; font-weight: 600; letter-spacing: -.01em; line-height: 1.1; color: var(--ink); }
.tile-l { font-size: 13px; color: var(--muted); }
.rp-tile .rp-l { font-size: 13px; }
.rp-v { font-size: 26px; font-weight: 600; letter-spacing: -.01em; }
.rp-tile.big .rp-v { font-size: 28px; }
.mt-money, .cs-n { font-weight: 600; letter-spacing: -.01em; }
.cs-period.on .cs-n, .rp-tile.big .rp-v { color: var(--ink); }

/* buttons and fields */
.btn { border-radius: var(--r-sm); font-weight: 500; font-size: 14px; padding: 7px 14px; min-height: 36px; box-shadow: none; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); transition: background .12s, border-color .12s; }
.btn:not(.primary):not(.ghost):hover { background: var(--sunk); border-color: var(--line-2); }
.btn.small { min-height: 30px; padding: 4px 10px; font-size: 13px; border-radius: var(--r-xs); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); font-weight: 600; box-shadow: none; }
.btn.primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); filter: none; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--brand); }
.btn.ghost:hover { background: var(--accent-soft); }
.btn[disabled] { opacity: .5; }
a.btn, a.btn:hover { text-decoration: none; }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=tel], input[type=number], input[type=date], input[type=datetime-local], select, textarea {
  border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-size: 14px; padding: 7px 10px; min-height: 36px; box-sizing: border-box; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; box-shadow: none; }
label.field > span, .field > span { font-size: 12px; font-weight: 600; color: var(--ink-2); }

/* segmented tabs: a quiet track, the selected one is white */
.tabs { background: var(--sunk); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 3px; gap: 2px; }
.tabs button { border-radius: var(--r-xs); color: var(--ink-2); font-weight: 500; font-size: 13px; padding: 5px 12px; }
.tabs button:hover { color: var(--ink); }
.tabs button.on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--line-2); }
.tabs .count { background: var(--line); color: var(--ink-2); font-size: 11px; border-radius: 4px; }
.tabs button.on .count { background: var(--accent-soft); color: var(--brand); }
.rep-tabs { background: var(--sunk); border: 1px solid var(--line); }
.rep-tabs button.on, .rtab.on { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line-2); }
.rep-tabs button.on .count { background: var(--accent-soft); color: var(--brand); }

/* tables: flat, hairline rows, muted header */
.table-wrap { overflow: auto; }
th { background: var(--surface); color: var(--muted); font-weight: 500; font-size: 12px; letter-spacing: 0; border-bottom: 1px solid var(--line); padding: 9px 10px; white-space: nowrap; }
td { border-bottom: 1px solid var(--line); padding: 9px 10px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover, tbody tr:hover td { background: color-mix(in srgb, var(--sunk) 70%, var(--surface)); }
tbody tr.sel td { background: var(--accent-soft); }
tbody tr.sel td:first-child { box-shadow: inset -2px 0 0 var(--brand); }
html[dir=ltr] tbody tr.sel td:first-child { box-shadow: inset 2px 0 0 var(--brand); }
td.name, .person b { font-weight: 600; }
td a:not(.btn) { color: var(--ink); font-weight: 600; text-decoration: none; }
td a:not(.btn):hover { color: var(--brand); text-decoration: underline; }
td .sub { font-size: 12px; color: var(--muted); }
.bulk { background: var(--surface); border: 1px solid var(--brand); color: var(--ink); border-radius: var(--r); }
.bulk .btn.ghost { color: var(--brand); }
.bulk select { background: var(--surface); color: var(--ink); border-color: var(--line-2); }

/* pills: small, squared, colour = state */
.chip, .st, .lang, .prod, .res, .fchip, .ltag { border-radius: var(--r-xs); font-size: 12px; font-weight: 500; padding: 2px 8px; letter-spacing: 0; }
.chip { background: var(--sunk); color: var(--ink-2); }
.st.new { background: var(--info-bg); color: var(--info); }
.st.contacted { background: var(--sunk); color: var(--ink-2); }
.st.qualified { background: var(--violet-bg); color: var(--violet); }
.st.appt { background: var(--ok-bg); color: var(--ok); }
.st.won { background: var(--brand); color: var(--brand-ink); }
.st.lost { background: var(--sunk); color: var(--muted); }
.stpick .st.appt:not(.on) { background: var(--surface); color: var(--ink); }
.stpick .st.appt.on { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }
.stpick .st.appt.on::before { background: var(--ok); }

/* avatars: muted, one family */
.av { box-shadow: none; font-weight: 600; font-family: var(--display); }
.av.c0 { background: #2f6f55; } .av.c1 { background: #3d5f8a; } .av.c2 { background: #8a5a3c; } .av.c3 { background: #5f5288; } .av.c4 { background: #2f6f73; } .av.c5 { background: #7d4a62; }

/* drawer + dialogs */
.scrim { background: rgb(15 20 18 / .36); backdrop-filter: none; }
.drawer { background: var(--bg); box-shadow: var(--pop); }
.drawer header { background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: none; }
.drawer header h1 { font-size: 20px; font-weight: 600; }
.dlg { border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--pop); background: var(--surface); color: var(--ink); }
.dlg::backdrop { background: rgb(15 20 18 / .36); }
.toast { background: var(--ink); color: var(--surface); border: 0; border-radius: var(--r-sm); box-shadow: var(--pop); }
.toast::before { background: var(--leaf); box-shadow: none; }

/* phone button and incoming call */
.ph-fab { background: var(--brand); border: 0; color: #fff; box-shadow: var(--pop); }
.ph-fab::after { background: var(--leaf); border-color: var(--surface); box-shadow: none; }
.ph-fab.off { background: var(--surface); color: var(--muted); border: 1px solid var(--line-2); }

/* contact actions: quiet buttons, the call one is the action */
.act { border-radius: var(--r-sm); font-weight: 500; box-shadow: none; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); }
.act:hover { filter: none; box-shadow: none; background: var(--sunk); }
.act.primary, .act.call { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: none; }
.act.primary:hover, .act.call:hover { background: var(--brand-deep); color: #fff; }
.act.wa, .act.waze, .act.gmaps, .act.txt, .act.mail { background: var(--surface); border-color: var(--line-2); color: var(--ink); }
.act.checkin { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: none; }
.act.checkin svg { color: #fff; }

/* rep day + visits */
.rtime { background: var(--sunk); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-sm); }
.rtime b { color: var(--ink); font-weight: 600; font-family: var(--display); }
.rtime span { color: var(--muted); }
.rtime.today { background: var(--accent-soft); color: var(--brand); border-color: color-mix(in srgb, var(--brand) 25%, var(--line)); }
.rtime.today b { color: var(--brand); }
.rtime.today span { color: var(--ink-2); }
.visit.in { background: var(--accent-soft); color: var(--brand); border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--line)); }
.visit.in .grow { color: var(--ink); }

/* calendar + queue */
.cal-now { background: var(--bad); height: 2px; box-shadow: none; }
.cal-day { border-radius: var(--r-sm); }
.cal-day.today { border-color: var(--brand); box-shadow: inset 0 -2px 0 var(--brand); }
.cal-day.on { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.cal-appt { border-radius: var(--r-xs); }
.q-card { border-radius: var(--r); }
.q-card.late { border-inline-start: 3px solid var(--warn); }
.q-goal { border-radius: var(--r); }
.q-goal .rp-fill.ok, .rp-fill.ok { background: var(--brand); }
.rp-fill { background: var(--line-2); }
.q-sec.q-missing summary b { color: var(--bad); }
.cs-period { border-radius: var(--r-sm); }
.cs-period.on { background: var(--accent-soft); border-color: var(--brand); }
.mt-step { border-radius: var(--r-sm); }
.mt-conv { color: var(--brand); }
.mt-spark-l { stroke: var(--brand); }
.mt-spark-a { fill: color-mix(in srgb, var(--brand) 10%, transparent); }

/* login: a plain card on the page colour, the logo and name above it */
.login-art { background: var(--brand) !important; color: #fff; }
.login-art h2 { font-weight: 600; letter-spacing: -.01em; }
.login form { border-radius: var(--r); box-shadow: none; }
.login-art .brand-txt b { color: #fff; }
.login-art .brand-txt small { color: rgb(255 255 255 / .7); }
.login-art .brand svg { color: #fff; }
.login-art h2 { margin-bottom: 12px; }
.login-art p { color: rgb(255 255 255 / .8); }
.login-art .readout { border-top-color: rgb(255 255 255 / .2); }
.login-art .readout dt { color: rgb(255 255 255 / .65); }
.login-art .readout dd { color: #fff; }
.login-art .plan-eave { stroke: rgb(255 255 255 / .9); filter: none; }
.login-art .plan-ridge path { stroke: rgb(255 255 255 / .55); }
.login-art .plan-dim path { stroke: rgb(255 255 255 / .35); }
.login-art .plan-tag circle { fill: var(--brand); stroke: rgb(255 255 255 / .8); }
.login-art .plan-tag text { fill: #fff; }
.login-art .plan-tag .plan-m { fill: rgb(255 255 255 / .75); }
.login-art .plan-tag .pitch { fill: #fff; }
.login form .err:empty { display: none; }

/* phones: white header, white dock, green "you are here" */
@media (max-width: 760px) {
  .mtop { background: var(--surface) !important; color: var(--ink); border-bottom: 1px solid var(--line); box-shadow: none !important; }
  .mtop-logo, .mtop-logo svg { color: var(--brand); }
  .mtop-title { color: var(--ink); font-weight: 600; font-family: var(--display); font-size: 17px; }
  .mtop-me .av.av { box-shadow: none; background: var(--brand); }
  .tiles { grid-template-columns: 1fr 1fr; }
  .dock { background: var(--surface) !important; border-top: 1px solid var(--line); box-shadow: none !important; }
  .dock-tab { color: var(--muted); font-family: var(--display); }
  .dock-tab.on { color: var(--brand); font-weight: 600; }
  .dock-tab.on .dock-ic { background: var(--accent-soft); color: var(--brand); }
  .dock-tab:focus-visible { outline-color: var(--brand); }
  main { padding: 14px 12px 96px; }
  .fb-down { padding-inline: 12px; }
  .tile-n { font-size: 20px; }
  table.leads td.c-rep .m-rep::before { content: ''; }
}
@media (min-width: 761px) { table.leads td.c-addr, table.leads td.c-src { max-width: 180px; } table.leads td.c-addr > *, table.leads td.c-src > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }