/* Lead Holler. Layout: top bar, nav rail (bottom tabs on phones), two-pane inbox: lead list + text thread. */
:root{
  /* Land More Calls brand: near-black, warm white, LMC gold. Oswald headings, DM Sans body. */
  --bg:#EFEBE3; --surface:#FFFFFF; --surface-2:#F6F3EC; --ink:#18181A; --muted:#5F5A52; --line:#DCD5C8;
  --accent:#F0A500; --accent-hover:#FFB41F; --accent-strong:#8A5D00; --accent-ink:#18181A; --accent-soft:#FBEBC6;
  --good:#17692D; --good-soft:#D9EEDF; --warn:#865300; --warn-soft:#F6E8CC; --info:#1D5F8C; --info-soft:#DCE9F3;
  --bad:#A3241B; --bad-soft:#F8DEDA;
  --out-bg:#18181A; --out-fg:#FAF8F4; --in-bg:#FFFFFF; --knob:#FFFFFF;
  --brand-bar:#18181A; --brand-bar-ink:#FAF8F4;
  --shadow:0 1px 2px rgba(24,24,26,.08), 0 6px 20px rgba(24,24,26,.06);
  --f-display:"Oswald","Arial Narrow",Arial,sans-serif;
  --f-body:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
}
/* The dark look is off: the app stays white even when the phone is in dark mode (decided Oct 28).
   To bring it back, put data-theme="dark" on <html>. */
:root[data-theme="dark"]{
  --bg:#18181A; --surface:#212124; --surface-2:#2A2A2E; --ink:#FAF8F4; --muted:#B5AFA5; --line:#3A3733;
  --accent:#F0A500; --accent-hover:#FFB41F; --accent-strong:#FFC247; --accent-ink:#18181A; --accent-soft:#3A2D10;
  --good:#62C483; --good-soft:#18301F; --warn:#E6AE4F; --warn-soft:#352914; --info:#6CB2E4; --info-soft:#142C3B;
  --bad:#F08A80; --bad-soft:#3A1A17;
  --out-bg:#272217; --out-fg:#FAF8F4; --in-bg:#2A2A2E; --knob:#FAF8F4;
  --brand-bar:#0F0F10; --brand-bar-ink:#FAF8F4;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.25);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body,#root{height:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:15px; line-height:1.45;
  padding:12px max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px))}
button,input,textarea,select{font:inherit; color:inherit}
button{cursor:pointer}
[hidden]{display:none !important}
body .phone-only,.th-speed,.qr-chips{display:none}
.bar-extra{display:contents}
.count.urgent{background:var(--bad); color:#fff}
.tip{display:grid; gap:6px; border-color:var(--accent); background:var(--accent-soft)}
.tip .btn{justify-self:start}
.qr-chips{flex:1 1 100%; order:-2; gap:6px; overflow-x:auto; padding:0 0 2px; scrollbar-width:none}
.qr-chips::-webkit-scrollbar{display:none}
.qr-chips button{flex:none; max-width:78vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border:1px solid var(--line); background:var(--surface-2); color:var(--ink); border-radius:999px; padding:9px 14px; font:inherit; font-size:14.5px; cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
h2,h3{text-wrap:balance}
a{color:var(--accent-strong)}

.app{height:100%; display:grid; grid-template-columns:200px minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); gap:12px}
.topbar{grid-column:1/-1; display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap}
.brand{display:flex; align-items:baseline; gap:10px; min-width:0; flex-wrap:wrap}
.logo{font-family:var(--f-display); font-weight:700; font-size:28px; letter-spacing:.01em; line-height:1; text-transform:uppercase}
.logo span{color:var(--accent)}
/* "by LMC" lockup: links to landmorecalls.com everywhere the Lead Holler name appears. */
.by-lmc{display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:12px; font-weight:600; text-decoration:none; letter-spacing:.04em; text-transform:uppercase}
.by-lmc svg{height:14px; width:auto; display:block}
.by-lmc:hover{color:var(--ink)}
.lmc-band{display:grid; gap:8px; background:var(--brand-bar); color:var(--brand-bar-ink); border-radius:12px; padding:12px; font-size:13px; line-height:1.4}
.lmc-band svg{height:18px; width:auto}
.lmc-band b{font-family:var(--f-display); text-transform:uppercase; font-size:15px; letter-spacing:.02em; font-weight:600}
.lmc-band a{color:var(--accent); font-weight:600; text-decoration:none}
.lmc-band a:hover{text-decoration:underline}
.acct{color:var(--muted); font-size:13px}
.spacer{flex:1}
.notices{flex-basis:100%; display:grid; gap:6px}
.notices:empty{display:none}
.notice{display:flex; gap:8px 12px; align-items:center; flex-wrap:wrap; background:var(--info-soft); color:var(--info); border-radius:10px; padding:8px 12px; font-size:13.5px}
.notice span{flex:1 1 240px; min-width:0}
.notice-warn{background:var(--warn-soft); color:var(--warn)}
.toggle input:disabled{opacity:.45; cursor:not-allowed}
.mode{font-family:var(--f-mono); font-size:11.5px; color:var(--muted); border:1px dashed var(--line); border-radius:999px; padding:4px 10px}
.btn{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--surface); border-radius:10px; padding:8px 14px; font-weight:600; font-size:14px; text-decoration:none; color:var(--ink)}
.btn:hover{background:var(--surface-2)}
.btn svg{width:16px; height:16px}
.btn-primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-hover); border-color:var(--accent-hover)}
.btn-quiet{border-color:transparent; background:transparent; color:var(--muted)}
.btn[disabled]{opacity:.6; cursor:default}
.btn-sm{padding:5px 10px; font-size:13px}

.rail{display:flex; flex-direction:column; gap:4px}
.nav{display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:0; background:transparent; border-radius:10px; padding:10px 12px; font-weight:600; color:var(--muted)}
.nav:hover{background:var(--surface-2); color:var(--ink)}
.nav[aria-current="page"]{background:var(--surface); color:var(--ink); box-shadow:var(--shadow)}
.nav svg{width:18px; height:18px; flex:none}
.count{margin-left:auto; font-family:var(--f-mono); font-size:12px; background:var(--accent); color:var(--accent-ink); border-radius:999px; padding:1px 7px}
.rail-note{margin-top:auto; font-size:12.5px; color:var(--muted); padding:12px; border-top:1px solid var(--line); display:grid; gap:4px}
.rail-note b{color:var(--ink); font-weight:600}

.main{min-width:0; min-height:0}
.view{height:100%; min-height:0}
.pane{background:var(--surface); border:1px solid var(--line); border-radius:14px; min-height:0; display:flex; flex-direction:column; overflow:hidden}

.inbox{display:grid; grid-template-columns:minmax(260px,340px) minmax(0,1fr); gap:12px; height:100%}
.list-head{padding:14px 16px 12px; border-bottom:1px solid var(--line); display:grid; gap:8px}
.list-head-top{display:flex; justify-content:space-between; align-items:center; gap:8px}
.list-head h2{margin:0; font-family:var(--f-display); font-weight:600; font-size:24px; letter-spacing:.01em; line-height:1.1}
.filters{display:flex; gap:4px; flex-wrap:wrap}
.filter{border:1px solid var(--line); background:transparent; border-radius:999px; padding:2px 10px; font-size:12.5px; font-weight:600; color:var(--muted)}
.filter[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--surface)}
.list{overflow:auto; min-height:0; flex:1}
.empty{padding:28px 18px; color:var(--muted); display:grid; gap:8px; font-size:14px}
.empty b{color:var(--ink)}
.lead{display:grid; gap:5px; width:100%; text-align:left; border:0; border-bottom:1px solid var(--line); background:transparent; padding:12px 16px}
.lead:hover,.lead[aria-current="true"]{background:var(--surface-2)}
.lead[aria-current="true"] .lead-name{color:var(--accent-strong)}
.lead-top{display:flex; justify-content:space-between; gap:10px; align-items:baseline}
.lead-name{font-weight:600}
.lead-time{font-family:var(--f-mono); font-size:11.5px; color:var(--muted); white-space:nowrap}
.lead-job{font-size:13.5px; color:var(--muted)}
.lead-meta{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.chip{font-size:11.5px; font-weight:600; border-radius:6px; padding:2px 7px; background:var(--surface-2); color:var(--muted); border:1px solid var(--line); white-space:nowrap}
.st-booked{background:var(--good-soft); color:var(--good); border-color:transparent}
.st-needs{background:var(--warn-soft); color:var(--warn); border-color:transparent}
/* Up/down vs. this time last month, and money back per source */
.trend{display:inline-flex; gap:3px; align-items:center; font-family:var(--f-body); font-size:12.5px; font-weight:600; white-space:nowrap; vertical-align:middle}
.trend.good{color:var(--good)}
.trend.bad{color:var(--bad)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.ret{width:100%; border-collapse:collapse; font-size:14px; font-variant-numeric:tabular-nums}
.ret th,.ret td{padding:9px 8px; border-bottom:1px solid var(--line); text-align:right}
.ret th:first-child{text-align:left}
.ret thead th{font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600}
.ret tbody tr:last-child th,.ret tbody tr:last-child td{border-bottom:0}
.ret-good{color:var(--good)}
.ret-wrap{overflow-x:auto}
.funnel td small{display:block; font-size:11px; color:var(--muted); font-weight:500}
.funnel tr.total th,.funnel tr.total td{font-weight:700; border-top:2px solid var(--line)}
.meters{display:grid; gap:10px}
.meter{display:grid; grid-template-columns:minmax(120px,190px) minmax(0,1fr) 46px; gap:12px; align-items:center}
.meter-label{display:grid; gap:1px; font-size:13.5px}
.meter-label span{font-size:12px; color:var(--muted)}
.meter-val{font-family:var(--f-display); font-weight:600; font-size:18px; text-align:right; font-variant-numeric:tabular-nums}
.bar-fill.good{background:var(--good)}
.bar-fill.bad{background:var(--bad)}
.warn-note{color:var(--warn)}
.ret-low{color:var(--muted)}
.st-noreply{background:var(--surface-2); color:var(--muted); border-style:dashed}
.st-ready{background:var(--accent); color:var(--accent-ink); border-color:transparent; font-weight:700}
.st-quoted{background:var(--info-soft); color:var(--info); border-color:transparent}
.st-won{background:var(--good); color:var(--surface); border-color:transparent}
.banner.quote-form{justify-content:flex-start}
.book-form input[type="datetime-local"],.book-form input[type="text"]{padding:5px 8px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); min-width:0}
.book-form input[type="text"]{flex:1 1 180px}
.check{display:inline-flex; gap:6px; align-items:center; font-size:13px}
.banner.banner-info{background:var(--info-soft); color:var(--info)}
.banner-btns{display:flex; gap:6px}
.money-in{display:inline-flex; align-items:center; gap:4px; font-weight:600}
.money-in input{width:110px; padding:5px 8px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink)}
.st-talking,.st-following{background:var(--info-soft); color:var(--info); border-color:transparent}
.st-new,.st-texted{background:var(--accent-soft); color:var(--accent-strong); border-color:transparent}
.resp{margin-left:auto; font-family:var(--f-display); font-weight:600; font-size:18px; line-height:1; font-variant-numeric:tabular-nums; white-space:nowrap}
.resp small{font-family:var(--f-body); font-weight:500; font-size:11px; color:var(--muted); margin-left:4px}

.thread-head{padding:14px 18px; border-bottom:1px solid var(--line); display:flex; gap:12px 18px; align-items:flex-start; flex-wrap:wrap}
.back{display:none}
.th-main{flex:1 1 220px; min-width:0; display:grid; gap:5px}
.th-name{margin:0; font-family:var(--f-display); font-weight:600; font-size:28px; line-height:1.05}
.th-job{color:var(--muted); font-size:14px}
.th-chips{display:flex; gap:6px; flex-wrap:wrap}
.th-side{display:flex; gap:12px 16px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.th-actions{display:flex; gap:6px; flex-wrap:wrap}
.watch{display:grid; justify-items:end; gap:3px}
.watch-num{font-family:var(--f-display); font-weight:700; font-size:42px; line-height:.9; font-variant-numeric:tabular-nums}
.watch-label{font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
.banner{padding:9px 18px; font-size:13.5px; background:var(--warn-soft); color:var(--warn); border-bottom:1px solid var(--line); display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.msgs{flex:1; overflow:auto; min-height:0; padding:18px; display:flex; flex-direction:column; gap:10px; background:var(--surface-2)}
.msg{max-width:min(78%,520px); display:grid; gap:3px}
.bubble{padding:9px 12px; border-radius:14px; font-size:14.5px; line-height:1.4; overflow-wrap:anywhere; white-space:pre-wrap}
.msg-lead{align-self:flex-start}
.msg-lead .bubble{background:var(--in-bg); border:1px solid var(--line); border-bottom-left-radius:4px}
.msg-out{align-self:flex-end; justify-items:end}
.msg-out .bubble{background:var(--out-bg); color:var(--out-fg); border-bottom-right-radius:4px}
.msg-failed .bubble{outline:2px solid var(--bad)}
.msg-meta{font-size:11px; color:var(--muted); font-family:var(--f-mono)}
.tag-ai{color:var(--accent-strong); font-weight:500}
.sys{align-self:center; font-family:var(--f-mono); font-size:11.5px; color:var(--muted); text-align:center; max-width:92%; padding:2px 0}
.composer{display:flex; gap:8px; padding:12px 12px 6px; border-top:1px solid var(--line); background:var(--surface); align-items:flex-end}
.composer textarea{flex:1; min-width:0; border:1px solid var(--line); background:var(--surface-2); border-radius:10px; padding:9px 12px; font:inherit; line-height:1.35; resize:none; min-height:40px; max-height:160px; overflow-y:auto}
.composer-note{font-size:11.5px; color:var(--muted); padding:0 14px 10px; background:var(--surface)}
.btn-icon{padding-inline:9px}
.btn-icon svg{width:19px; height:19px}

/* Photos on texts. Same-size tiles, so the thread doesn't jump while they load; tap for the full photo. */
.photos{display:flex; flex-wrap:wrap; gap:4px}
.msg-out .photos{justify-content:flex-end}
.photo{padding:0; border:1px solid var(--line); background:var(--surface); border-radius:14px; overflow:hidden; cursor:zoom-in; width:230px; max-width:100%; aspect-ratio:4/3}
.photo:not(:only-child){width:150px}
.photo img{width:100%; height:100%; object-fit:cover; display:block}
.photo:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.file-link{font-size:13px; color:var(--ink); text-decoration:underline}
.pending{display:flex; gap:8px; flex-wrap:wrap; padding:10px 12px 0; border-top:1px solid var(--line); background:var(--surface)}
.pending:not([hidden]) + .composer{border-top:0}
.pending-photo{position:relative; width:64px; height:64px; border-radius:10px; overflow:hidden; border:1px solid var(--line)}
.pending-photo img{width:100%; height:100%; object-fit:cover; display:block}
.pending-photo button{position:absolute; top:3px; right:3px; width:22px; height:22px; border-radius:50%; border:0; background:rgba(0,0,0,.66); color:#fff; font-size:15px; line-height:1; cursor:pointer}
.pcount{display:inline-flex; gap:3px; align-items:center; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}
.pcount svg{width:14px; height:14px}
.pcount.sched{color:var(--accent-strong); font-weight:600}

/* Send later: a picker above the reply box, and scheduled texts waiting at the end of the thread */
.later-menu{display:grid; gap:10px; padding:12px; border-top:1px solid var(--line); background:var(--surface)}
.later-head{display:flex; gap:4px 10px; align-items:baseline; flex-wrap:wrap}
.later-head span,.later-note{font-size:12.5px; color:var(--muted)}
.later-presets{display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:6px}
.later-presets button{display:grid; gap:1px; text-align:left; border:1px solid var(--line); background:var(--surface-2); border-radius:10px; padding:8px 10px; font-size:13.5px; cursor:pointer}
.later-presets button b{font-size:12px; color:var(--muted); font-weight:600}
.later-presets button:hover{border-color:var(--accent)}
.later-pick{display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:13px}
.later-pick input{border:1px solid var(--line); background:var(--surface-2); border-radius:10px; padding:7px 10px; min-width:0}
.msg-sched .bubble{background:transparent; color:var(--ink); border:1.5px dashed var(--muted)}
.msg-sched.held .bubble{border-color:var(--warn); background:var(--warn-soft)}
.msg-sched.held .sched-when{color:var(--warn)}
.msg-sched .msg-meta{display:flex; gap:4px 12px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.sched-when{display:inline-flex; gap:4px; align-items:center; color:var(--accent-strong)}
.sched-when svg{width:13px; height:13px}
.link-btn{border:0; background:none; padding:0; font:inherit; color:var(--ink); text-decoration:underline; cursor:pointer}
.lead-preview .pic svg{width:13px; height:13px; vertical-align:-2px; margin-right:4px}
.lightbox{position:fixed; inset:0; z-index:100; background:rgba(12,12,14,.94); display:grid; grid-template-rows:minmax(0,1fr) auto; justify-items:center; align-items:center; gap:14px; padding:16px 16px calc(16px + env(safe-area-inset-bottom, 0px))}
.lightbox img{max-width:100%; max-height:100%; object-fit:contain; border-radius:8px}
.lightbox-bar{display:flex; gap:8px}

.scroll{height:100%; overflow:auto; min-height:0; display:grid; align-content:start; gap:12px; padding-bottom:4px; position:relative}
.sec-head{display:flex; justify-content:space-between; align-items:center; gap:8px 12px; flex-wrap:wrap}
.sec-head h2{margin:0; font-family:var(--f-display); font-weight:600; font-size:28px; line-height:1.1}
.note{font-size:12.5px; color:var(--muted)}
.kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 16px; display:grid; gap:4px; align-content:start}
.kpi-label{font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted)}
.kpi-num{font-family:var(--f-display); font-weight:700; font-size:40px; line-height:1; font-variant-numeric:tabular-nums}
.kpi-sub{font-size:12.5px; color:var(--muted)}
.card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px 18px; display:grid; gap:12px; align-content:start; min-width:0}
.card h3{margin:0; font-size:16px; font-weight:700}
.card p{margin:0; max-width:65ch}
.card-head{display:flex; justify-content:space-between; gap:12px; align-items:flex-start}
.card-head > div{display:grid; gap:3px; min-width:0}
.bars{display:grid; gap:14px}
.bar-row,.axis{display:grid; grid-template-columns:150px minmax(0,1fr) 70px; gap:12px; align-items:center}
.bar-src{display:grid; gap:1px; min-width:0}
.bar-src b{font-weight:600; font-size:14px}
.bar-src span{font-size:11.5px; color:var(--muted)}
.bar-track{position:relative; height:22px; background:var(--surface-2); border-radius:5px; overflow:hidden}
.bar-fill{position:absolute; inset:0 auto 0 0; background:var(--muted); border-radius:5px}
.bar-fill.shared{background:var(--accent)}
.bar-val{font-family:var(--f-display); font-weight:600; font-size:21px; text-align:right; font-variant-numeric:tabular-nums}
.ticks{position:relative; height:16px; font-family:var(--f-mono); font-size:10.5px; color:var(--muted)}
.ticks span{position:absolute; top:0; transform:translateX(-50%)}
.legend{display:flex; gap:6px 16px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); align-items:center}
.sw{display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:6px; vertical-align:-1px}
.sw-shared{background:var(--accent)} .sw-own{background:var(--muted)}
.lmc{border-color:var(--accent); background:var(--accent-soft)}
.lmc .btn{justify-self:start}
.eyebrow{font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--accent-strong)}

/* Settings */
.auto-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:start}
.field{display:grid; gap:4px}
.field label,.field .lbl{font-size:12.5px; font-weight:600; color:var(--muted)}
.field input,.field select,textarea{width:100%; border:1px solid var(--line); background:var(--surface-2); border-radius:10px; padding:8px 11px}
textarea{min-height:84px; resize:vertical; line-height:1.4}
.row2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.row3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.toggle{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--muted)}
.card-head .toggle{white-space:nowrap}
.toggle input{appearance:none; width:42px; height:24px; border-radius:999px; background:var(--line); position:relative; margin:0; flex:none; cursor:pointer}
.toggle input::after{content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--knob); transition:transform .15s}
.toggle input:checked{background:var(--accent)}
.toggle input:checked::after{transform:translateX(18px)}
.preview{display:grid; gap:4px; justify-items:end}
.preview .bubble{background:var(--out-bg); color:var(--out-fg); border-bottom-right-radius:4px; max-width:100%}
.vars{font-size:12px; color:var(--muted)}
.fill-ins{display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:12.5px; color:var(--muted)}
.chip-btn{border:1px solid var(--line); background:var(--surface-2); border-radius:999px; padding:5px 11px; font:inherit; font-size:13px; font-weight:600; color:var(--ink); cursor:pointer}
.chip-btn:hover{border-color:var(--accent)}
.vars code,.mono{font-family:var(--f-mono); font-size:12px}
.vars code{background:var(--surface-2); border:1px solid var(--line); border-radius:4px; padding:0 4px}
.step{display:grid; grid-template-columns:110px minmax(0,1fr); gap:10px; align-items:start}
.step .when{font-family:var(--f-mono); font-size:12px; color:var(--accent-strong); padding-top:9px}
.step textarea{min-height:58px}
.days{display:grid; gap:6px}
.day{display:grid; grid-template-columns:48px minmax(0,1fr); gap:10px; align-items:center}
.day span{font-weight:600; font-size:13px; text-transform:capitalize}
.day input{width:100%; border:1px solid var(--line); background:var(--surface-2); border-radius:10px; padding:8px 11px}
.later-close{margin-left:auto}
.copyline{display:flex; gap:8px; align-items:center; justify-content:space-between; padding:8px 0; border-top:1px solid var(--line); flex-wrap:wrap}
.copyline:first-of-type{border-top:0}
.copyline div{display:grid; gap:1px; min-width:0}
.copyline span{overflow-wrap:anywhere}
.savebar{position:sticky; bottom:0; display:flex; gap:10px; align-items:center; justify-content:flex-end; padding:10px 0; background:var(--bg)}
.savebar.dirty{border-top:2px solid var(--accent)}
.savebar .unsaved{margin-right:auto; font-size:13.5px; font-weight:600; color:var(--warn)}
.error{color:var(--bad); font-size:13.5px}

/* Login */
.login{min-height:100%; display:grid; place-items:center}
.login form{width:min(380px,100%); display:grid; gap:14px; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:24px; box-shadow:var(--shadow)}
.login .card form{width:auto; padding:0; border:0; box-shadow:none; background:none}
.login .btn{justify-content:center}
.login h1{margin:0; font-family:var(--f-display); font-size:34px; line-height:1; text-transform:uppercase}
.login h1 span{color:var(--accent)}

.toast{position:fixed; right:calc(env(safe-area-inset-right, 0px) + 16px); bottom:calc(env(safe-area-inset-bottom, 0px) + 16px); max-width:min(400px, calc(100% - 32px)); background:var(--out-bg); color:var(--out-fg); border-radius:12px; padding:12px 14px; font-size:14px; box-shadow:var(--shadow); z-index:20}

@media (max-width: 860px){
  /* Phones come first: one slim top row, thumb-sized buttons, and 16px text in every box so
     iPhones don't zoom in when you tap to type. */
  body{height:100dvh; padding:8px max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px)); font-size:16px}
  input,textarea,select{font-size:16px !important}
  .desk-only{display:none !important}
  body .phone-only{display:block}
  .btn{min-height:44px; font-size:15px}
  .btn-sm{min-height:40px; padding:8px 12px; font-size:14.5px}
  .app{grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto; gap:8px}
  .rail{grid-row:3; flex-direction:row; gap:4px; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:4px; margin-bottom:max(8px, env(safe-area-inset-bottom, 0px))}
  .nav{flex-direction:column; gap:3px; font-size:12.5px; padding:8px 4px; min-height:56px; justify-content:center; text-align:center; position:relative}
  .nav svg{width:23px; height:23px}
  .nav[aria-current="page"]{box-shadow:none; background:var(--surface-2)}
  .count{position:absolute; top:3px; left:calc(50% + 8px); margin:0; font-size:10.5px; padding:0 5px}
  .rail-note,.acct,.lmc-band{display:none}
  .logo{font-size:24px}
  .topbar{gap:6px 10px}
  .sec-head h2{font-size:26px}
  .inbox{grid-template-columns:minmax(0,1fr)}
  .inbox:not(.show-thread) .thread-pane{display:none}
  .inbox.show-thread .list-pane{display:none}
  /* In a conversation on a phone: the list's search bar steps aside, the texts always get real room,
     and the banners scroll away while the reply box stays put. */
  .leads-view:has(.inbox.show-thread) .leads-bar{display:none}
  /* The list: search, then one swipeable row of filters. Source and sort sit behind "More filters";
     the board is a computer thing. */
  .leads-bar h2{display:none}
  #search{flex:1 1 auto; min-width:0; min-height:44px}
  #filters-btn{display:inline-flex}
  /* "+ New lead" floats above the bottom tabs, where a thumb reaches it. */
  #new-lead-btn{position:fixed; z-index:5; right:max(16px, env(safe-area-inset-right, 0px)); bottom:calc(env(safe-area-inset-bottom, 0px) + 92px); min-height:52px; padding:0 20px; border-radius:999px; font-size:16px; box-shadow:0 6px 18px rgba(0,0,0,.22)}
  .leads-view:has(.inbox.show-thread) #new-lead-btn{display:none}
  .list{padding-bottom:76px}
  .list-head .sort-chips{display:flex}
  .list-head .sort-chip{min-height:36px}
  #new-lead-btn{transition:transform .2s ease, opacity .2s ease}
  #new-lead-btn.tucked{transform:translateY(140px); opacity:0; pointer-events:none}
  .bar-extra{display:none}
  .leads-bar.open .bar-extra{display:flex; flex-wrap:wrap; gap:8px; width:100%}
  .leads-bar.open .bar-extra select{flex:1 1 140px; min-height:44px}
  .seg{display:none}
  .filters{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:2px}
  .filters::-webkit-scrollbar{display:none}
  .filter{flex:none; min-height:44px; padding:6px 14px; font-size:14.5px}
  .tabs{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; flex:none; min-height:48px}
  .tab{flex:none; min-height:44px; padding:8px 16px; font-size:15px}
  .toggle{min-height:44px; font-size:14.5px}
  .toggle input{width:50px; height:30px}
  .toggle input::after{width:24px; height:24px}
  .toggle input:checked::after{transform:translateX(20px)}
  .link-btn{min-height:44px; padding:0 8px}
  .chip-btn{min-height:40px; padding:6px 13px; font-size:14px}
  .more-menu button,.more-menu a{min-height:44px}
  .savebar{padding-bottom:max(10px, env(safe-area-inset-bottom, 0px))}
  .savebar .unsaved{font-size:13px}
  .lead{padding:14px 16px; gap:6px}
  .lead-name{font-size:17px}
  .lead-preview{font-size:14.5px}
  .lead .resp{display:none}
  /* A conversation: a slim header, one big Call button, replies one tap away. */
  .watch{display:none}
  /* One line on top: back, name, Call, •••. The bottom tabs and the app's top bar step aside. */
  .app:has(#v-inbox:not([hidden]) .inbox.show-thread) .rail,
  .app:has(#v-inbox:not([hidden]) .inbox.show-thread) .topbar{display:none}
  .app:has(#v-inbox:not([hidden]) .inbox.show-thread){grid-template-rows:minmax(0,1fr)}
  .app:has(#v-inbox:not([hidden]) .inbox.show-thread) .composer{padding-bottom:max(12px, env(safe-area-inset-bottom, 0px))}
  .thread-head{position:sticky; top:0; z-index:3; background:var(--surface); flex-wrap:nowrap; align-items:center; gap:4px; padding:6px 8px 6px 2px}
  .th-main{flex:1 1 auto; gap:0}
  .th-name{font-size:19px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .th-job{font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .th-chips{display:none}
  .th-side{flex:none}
  .th-actions{flex-wrap:nowrap; gap:6px}
  .th-actions .btn{min-height:44px}
  .th-actions .call-btn{padding:8px 14px; font-size:15.5px; font-weight:700; background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
  .th-actions .call-btn svg{width:18px; height:18px}
  .banner{padding:7px 12px; font-size:14px}
  .banner:not(.quote-form):not(.reason){flex-wrap:nowrap}
  .banner:not(.quote-form):not(.reason) > span:first-child{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .banner-btns{flex:none}
  .banner > .btn,.banner-btns .btn{white-space:nowrap; flex:none}
  #qr-btn{display:none}
  .qr-chips{display:flex}
  .thread-pane{overflow:auto}
  .thread-pane .msgs{flex:1 0 320px}
  .composer{position:sticky; bottom:0; z-index:2; padding-bottom:12px; flex-wrap:wrap}
  /* The words get the full width; Quick replies, photo, later and Send sit on the row under them. */
  .composer #reply{flex:1 1 100%; order:-1; padding:11px 12px}
  .composer #send-btn{margin-left:auto}
  .composer-note{display:none}
  .back{display:inline-flex; justify-content:center; width:40px; padding:0; border:0; background:transparent}
  .back{flex:none}
  .back svg{width:24px; height:24px}
  .later-menu:not([hidden]){position:fixed; left:0; right:0; bottom:0; z-index:60; border-radius:18px 18px 0 0; padding:14px 16px calc(16px + env(safe-area-inset-bottom, 0px)); box-shadow:0 -10px 30px rgba(0,0,0,.22); max-height:80dvh; overflow:auto}
  .later-presets button{min-height:52px}
  .watch-num{font-size:34px}
  .msgs{padding:14px}
  .msg{max-width:88%}
  .qr-label{display:none}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi-num{font-size:34px}
  .bar-row,.axis{grid-template-columns:96px minmax(0,1fr) 54px; gap:8px}
  .meter{grid-template-columns:104px minmax(0,1fr) 42px; gap:8px}
  .funnel th,.funnel td{padding:8px 3px; font-size:13px}
  .funnel thead th{font-size:11px; letter-spacing:0}
  .bar-src span{display:none}
  .auto-grid,.row2,.row3{grid-template-columns:minmax(0,1fr)}
  .step{grid-template-columns:minmax(0,1fr)}
  .step .when{padding-top:0}
  .toast{bottom:calc(env(safe-area-inset-bottom, 0px) + 84px)}
}
@media (prefers-reduced-motion: reduce){ .toggle input::after{transition:none} }

/* Today screen */
.today-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:12px; align-items:start}
.today-card{gap:10px}
.big-num{font-family:var(--f-display); font-weight:700; font-size:38px; line-height:1; font-variant-numeric:tabular-nums}
.big-num.hot{color:var(--warn)}
.today-list{display:grid}
.today-row{display:flex; justify-content:space-between; align-items:center; gap:8px 12px; padding:10px 0; border-top:1px solid var(--line); flex-wrap:wrap}
.today-row:first-child{border-top:0; padding-top:0}
.today-main{display:grid; gap:2px; min-width:0; flex:1 1 180px}
.today-main span{font-size:13px; color:var(--muted)}
.today-main .ok{color:var(--good)}
.today-main .said{display:block; color:var(--ink); font-size:14.5px; quotes:"“" "”"}
.today-main .why{font-size:12.5px}
.today-btns{display:flex; gap:6px}
/* Today: one line of proof, and the guarantee while it runs */
.win-line{margin:-4px 0 0; font-size:15px; color:var(--ink)}
.win-line b{color:var(--good)}
.guarantee-card{gap:8px; border-color:var(--accent)}
.guarantee-card.met{border-color:var(--good)}
.g-top{display:flex; justify-content:space-between; gap:10px; align-items:baseline}
.g-top span{font-family:var(--f-mono); font-size:13px; color:var(--muted)}
.guarantee-card p{margin:0; font-size:14.5px}
.meter-bar{height:8px; border-radius:999px; background:var(--surface-2); overflow:hidden}
.meter-bar i{display:block; height:100%; background:var(--accent); border-radius:999px}
.guarantee-card.met .meter-bar i{background:var(--good)}
/* Sort buttons under the filters (phones) */
.sort-chips{display:none; gap:6px; align-items:center; font-size:12.5px; color:var(--muted); padding-top:6px; overflow-x:auto; scrollbar-width:none}
.sort-chip{flex:none; border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:4px 11px; font:inherit; font-size:13px; font-weight:600; color:var(--muted)}
.sort-chip[aria-pressed="true"]{background:var(--surface-2); color:var(--ink); border-color:var(--ink)}
/* "Nice work!" when a job is won */
.celebrate{position:fixed; inset:0; z-index:80; display:grid; place-items:center; background:rgba(24,24,26,.25); cursor:pointer}
.celebrate-card{background:var(--surface); border:2px solid var(--good); border-radius:20px; padding:22px 30px; text-align:center; box-shadow:0 18px 40px rgba(0,0,0,.25); animation:pop .35s ease-out}
.celebrate-big{font-family:var(--f-display); font-weight:700; font-size:40px; line-height:1; color:var(--good)}
.celebrate-amt{margin-top:6px; font-weight:700; font-size:18px}
.confetti{position:absolute; inset:0; overflow:hidden; pointer-events:none}
.confetti i{position:absolute; top:-12px; left:var(--x); width:9px; height:14px; background:var(--c); border-radius:2px; animation:fall 1.6s var(--d) ease-in forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(540deg)}}
@keyframes pop{from{transform:scale(.8); opacity:0}}
@media (prefers-reduced-motion: reduce){ .confetti{display:none} .celebrate-card{animation:none} }
.summary{margin:0 0 12px; font-size:16px; line-height:1.45}
.kpi-num.long{font-size:26px; line-height:1.1}
.fold > summary{cursor:pointer; font-weight:700; color:var(--accent-strong); min-height:44px; display:flex; align-items:center; list-style:none}
.fold > summary::-webkit-details-marker{display:none}
.fold > summary::after{content:"›"; margin-left:6px; transition:transform .15s}
.fold[open] > summary::after{transform:rotate(90deg)}
@media (min-width: 861px){ .fold > summary{display:none} }
.setup-card{border-color:var(--accent); margin-bottom:12px}
.checklist{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.checklist li{display:flex; gap:10px; align-items:flex-start; flex-wrap:wrap}
.checklist li > div{flex:1 1 200px; display:grid; gap:2px; min-width:0}
.checklist li span:not(.check-mark){font-size:13.5px; color:var(--muted); overflow-wrap:anywhere}
.checklist li.done b{color:var(--muted); font-weight:600}
.check-mark{flex:none; width:24px; height:24px; border-radius:50%; border:2px solid var(--line); display:grid; place-items:center; font-weight:800; font-size:13px}
.checklist li.done .check-mark{background:var(--good); border-color:var(--good); color:#fff}
.today-stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.today-stats div{display:grid; gap:4px; align-content:start}
.today-stats span:last-child{font-size:12.5px; color:var(--muted)}

/* Plain status: one color for everything waiting on the homeowner */
.st-waiting{background:var(--info-soft); color:var(--info); border-color:transparent}

/* Thread notes, shortened */
.mile{align-self:center; font-size:12px; color:var(--muted); background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:3px 10px; max-width:92%; text-align:center}
.mile-warn{color:var(--warn); border-color:var(--warn-soft); background:var(--warn-soft)}
.mile-hot{color:var(--accent-ink); border-color:var(--accent); background:var(--accent); font-weight:600}

/* Settings tabs */
.tabs{display:flex; gap:6px; flex-wrap:wrap}
.tab{border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:7px 14px; font-weight:600; font-size:14px; color:var(--muted)}
.tab[aria-selected="true"]{background:var(--ink); color:var(--surface); border-color:var(--ink)}
details.setup{font-size:13px}
details.setup summary{cursor:pointer; color:var(--muted); font-weight:600; padding:4px 0}

/* Leads: toolbar, filters with counts, unread, board */
.leads-view{display:flex; flex-direction:column; gap:10px}
.leads-view .inbox{flex:1; min-height:0}
.leads-bar{display:flex; gap:8px 10px; align-items:center; flex-wrap:wrap}
.leads-bar h2{margin:0 6px 0 0; font-family:var(--f-display); font-weight:600; font-size:24px; line-height:1.1}
#search{flex:1 1 200px; min-width:0; border:1px solid var(--line); background:var(--surface); border-radius:10px; padding:7px 12px}
#sort{border:1px solid var(--line); background:var(--surface); border-radius:10px; padding:7px 10px}
.seg{display:inline-flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--surface)}
@media (max-width: 860px){ .seg{display:none} }
.seg button{border:0; background:transparent; padding:7px 12px; font-weight:600; font-size:13.5px; color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--ink); color:var(--surface)}
.fcount{font-family:var(--f-mono); font-size:11px; opacity:.75; margin-left:2px}
.dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--accent); margin-right:6px; vertical-align:1px}
.lead.unread .lead-name,.bcard.unread .lead-name{font-weight:800}
.lead-preview{font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lead.unread .lead-preview{color:var(--ink)}
.board{flex:1; min-height:0; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(220px,1fr); gap:10px; overflow-x:auto; padding-bottom:4px}
.col{background:var(--surface-2); border:1px solid var(--line); border-radius:14px; display:flex; flex-direction:column; min-height:0}
.col-head{display:flex; justify-content:space-between; gap:8px; align-items:baseline; padding:10px 12px; border-bottom:1px solid var(--line)}
.col-head span{font-family:var(--f-mono); font-size:12px; color:var(--muted)}
.col-cards{display:grid; gap:8px; padding:10px; overflow:auto; align-content:start}
.bcard{display:grid; gap:4px; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:10px; box-shadow:var(--shadow)}
.bcard:hover{border-color:var(--accent)}
.bcard-meta{display:flex; gap:6px; align-items:center; flex-wrap:wrap; font-size:12.5px}
.col-empty{font-size:12.5px; color:var(--muted); text-align:center; padding:8px}

/* Composer extras: quick replies */
.qr-menu{display:grid; gap:6px; padding:10px 12px; border-top:1px solid var(--line); background:var(--surface); max-height:220px; overflow:auto}
.qr-menu button{text-align:left; border:1px solid var(--line); background:var(--surface-2); border-radius:10px; padding:8px 10px; font-size:13.5px}
.qr-menu button:hover{border-color:var(--accent)}

/* Thread: More menu and private notes */
.more{position:relative}
.more summary{list-style:none; cursor:pointer}
.more summary::-webkit-details-marker{display:none}
.more-menu{position:absolute; right:0; top:calc(100% + 4px); z-index:5; display:grid; min-width:180px; background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); padding:4px}
.more-menu button,.more-menu a{text-align:left; border:0; background:transparent; padding:8px 10px; border-radius:8px; font-size:13.5px; color:var(--ink); text-decoration:none}
.more-menu a span{display:block; font-size:12px; color:var(--muted)}
.more-menu button:hover,.more-menu a:hover{background:var(--surface-2)}
.more-menu .bad{color:var(--bad)}
.banner.good{background:var(--good-soft); color:var(--good)}
/* Phone "•••" menu: a sheet from the bottom with big rows, "Not interested" set apart in red. */
.more-btn{min-width:44px; font-size:17px; letter-spacing:1px; padding-inline:10px}
.sheet-wrap{position:fixed; inset:0; z-index:60; display:flex; flex-direction:column; justify-content:flex-end}
.sheet-bg{position:absolute; inset:0; border:0; background:rgba(24,24,26,.45); cursor:default}
.sheet{position:relative; display:grid; gap:2px; background:var(--surface); border-radius:18px 18px 0 0; padding:6px 10px calc(12px + env(safe-area-inset-bottom, 0px)); max-height:85dvh; overflow:auto; box-shadow:0 -10px 30px rgba(0,0,0,.18)}
.sheet-title{text-align:center; font-weight:700; font-size:14px; color:var(--muted); padding:10px 0 6px}
.sheet-row{display:flex; flex-direction:column; justify-content:center; align-items:flex-start; min-height:52px; padding:8px 14px; border:0; border-radius:12px; background:transparent; color:var(--ink); font:inherit; font-size:17px; font-weight:600; text-align:left; text-decoration:none}
.sheet-row span{font-size:13px; font-weight:400; color:var(--muted)}
.sheet-row:active{background:var(--surface-2)}
.sheet-row.bad{color:var(--bad); margin-top:8px; border-top:1px solid var(--line); border-radius:0}
.sheet-cancel{align-items:center; margin-top:8px; background:var(--surface-2)}
.sheet-form{gap:12px; padding:6px 16px calc(16px + env(safe-area-inset-bottom, 0px))}
.sheet-form .opt{font-weight:400; color:var(--muted)}
.sheet-form .btn{justify-content:center}
.sheet-form .check{display:flex; gap:10px; font-size:15px; font-weight:600; min-height:44px}
.sheet-form .check input{width:22px; height:22px; flex:none}
@media (min-width: 861px){
  .sheet-wrap{justify-content:center; align-items:center}
  .sheet{width:min(440px, 92vw); border-radius:16px}
}
.notes{padding:8px 18px; border-bottom:1px solid var(--line); font-size:13.5px; background:var(--surface)}
.notes summary{cursor:pointer; display:flex; gap:8px; align-items:baseline; min-width:0}
.notes summary span{color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.notes textarea{margin:8px 0; min-height:70px}

/* Lead sources: one color each */
.src-angi{background:#FDE3DE; color:#9A2A17; border-color:transparent}
.src-ha{background:#FDE9D4; color:#8A4300; border-color:transparent}
.src-tt{background:#DCEFFA; color:#0B5A82; border-color:transparent}
.src-web{background:#E9E6F7; color:#4B3E8F; border-color:transparent}
.src-call{background:#DFF1E3; color:#1C6B30; border-color:transparent}
.src-lmc{background:var(--brand-bar); color:var(--accent); border-color:transparent}
:root[data-theme="dark"] .src-angi{background:#3D1F19; color:#FFAA98} :root[data-theme="dark"] .src-ha{background:#3A2614; color:#FFC48A}
:root[data-theme="dark"] .src-tt{background:#12303F; color:#8CD2F5} :root[data-theme="dark"] .src-web{background:#2A2540; color:#C3B8F5}
:root[data-theme="dark"] .src-call{background:#17301D; color:#8FD9A0}
#src-filter{border:1px solid var(--line); background:var(--surface); border-radius:10px; padding:7px 10px}
/* Waiting on you */
.age{font-family:var(--f-mono); font-size:11px; font-weight:500; border-radius:6px; padding:2px 6px; background:var(--surface-2); color:var(--muted); white-space:nowrap}
.age-hot{background:var(--bad-soft); color:var(--bad)}
.banner.reason{background:var(--surface-2); color:var(--ink)}
.banner.reason .banner-btns{flex-wrap:wrap}
.banner.reason .btn{white-space:nowrap}

/* Small laptops and iPads in landscape: the reply box gets its own row, and the big clock steps aside in a conversation. */
@media (min-width: 861px) and (max-width: 1180px){
  .composer{flex-wrap:wrap}
  .composer textarea{flex:1 1 100%; order:-1}
  .composer #send-btn{margin-left:auto}
  .thread-head .watch{display:none}
}