/* Anything marked hidden stays hidden, even when a class gives it display:grid or flex.
   (The claude.ai preview supplied this rule; the real site has to carry its own.) */
[hidden] { display: none !important; }

/* Dashboard + customer account styles. Same palette and faces as the public site. */
:root {
  --marsh: #1f3a2f;
  --marsh-soft: #e3ebe5;
  --spartina: #b8892c;
  --spartina-ink: #1a1607;
  --page: #fdfcf9;
  --band: #f3ecdf;
  --shell: #f7f2e9;
  --ink: #26292a;
  --mute: #4a4f49;
  --line: #e0d8c8;
  --card: #ffffff;
  --bad: #b3261e;
  --bad-soft: #fbeceb;
  --ok: #2f6b45;
  --ok-soft: #e6f2ea;
  --warn: #8a5a00;
  --warn-soft: #fbf1dc;
  --f-display: "Libre Baskerville", "Times New Roman", Times, Georgia, serif;
  --f-body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--page); color: var(--ink); font: 400 1.0625rem/1.55 var(--f-body); }
body.customer { font-size: 1.125rem; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 400; line-height: 1.2; margin: 0; text-wrap: balance; }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }
p { margin: 0; }
a { color: var(--marsh); }
:focus-visible { outline: 3px solid var(--spartina); outline-offset: 2px; border-radius: 4px; }
.muted { color: var(--mute); }
.small { font-size: .88rem; }
.num { font-variant-numeric: tabular-nums; }
.stack { display: grid; gap: 1rem; }
.row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.between { justify-content: space-between; }
.eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--spartina); }

/* Top bar */
.top { background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.top .in { max-width: 76rem; margin: 0 auto; padding: .7rem clamp(1rem, 3vw, 2rem); display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.brand { font-family: var(--f-display); font-size: 1.15rem; text-decoration: none; color: var(--ink); line-height: 1.1; }
.brand small { display: block; font: 600 .68rem/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.top nav { display: flex; gap: .25rem; flex-wrap: wrap; flex: 1; }
.top nav a { text-decoration: none; color: var(--mute); font-weight: 600; font-size: .95rem; padding: .45rem .75rem; border-radius: 6px; }
.top nav a:hover { color: var(--ink); background: var(--shell); }
.top nav a.on { color: var(--marsh); background: var(--marsh-soft); }
.top form { margin: 0; }

main.wrap { max-width: 76rem; margin: 0 auto; padding: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem) 4rem; display: grid; gap: 1.5rem; }
main.narrow { max-width: 44rem; }

/* Buttons + inputs */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font: 600 1rem/1 var(--f-body);
  padding: .8rem 1.2rem; border-radius: 7px; border: 1.5px solid transparent; cursor: pointer; text-decoration: none; }
.btn-primary { background: var(--spartina); color: var(--spartina-ink); }
.btn-primary:hover { background: #c79a3d; }
.btn-green { background: var(--marsh); color: #f3f1e8; }
.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--spartina); }
.btn-link { background: none; border: 0; color: var(--mute); font: 600 .95rem var(--f-body); cursor: pointer; padding: .4rem .6rem; }
.btn-link:hover { color: var(--ink); }
.btn-big { font-size: 1.1rem; padding: 1rem 1.5rem; width: 100%; }
label { font-weight: 600; font-size: .95rem; display: grid; gap: .35rem; }
label .hint { font-weight: 400; color: var(--mute); font-size: .88rem; }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=search], input[type=date],
input[type=datetime-local], select, textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 7px; padding: .7rem .8rem; }
textarea { min-height: 6rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--spartina); border-color: transparent; }
.check { display: flex; gap: .6rem; align-items: flex-start; font-weight: 500; }
.check input { margin-top: .3rem; width: 1.1rem; height: 1.1rem; accent-color: var(--marsh); flex: none; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.grid3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .grid2, .grid3 { grid-template-columns: 1fr; } }

/* Cards */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: clamp(1rem, 2.5vw, 1.5rem); display: grid; gap: 1rem; min-width: 0; }
.card > header { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.card.plain { background: var(--shell); border-color: transparent; }

/* Flash */
.flash { padding: .8rem 1rem; border-radius: 8px; font-weight: 500; }
.flash.ok { background: var(--ok-soft); color: var(--ok); }
.flash.error { background: var(--bad-soft); color: var(--bad); }
.banner { padding: .8rem 1rem; border-radius: 8px; background: var(--warn-soft); color: var(--warn); font-size: .95rem; }

/* Pipeline counts */
.pipe { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; }
.pipe a { text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .9rem 1rem; display: grid; gap: .15rem; }
.pipe a:hover { border-color: var(--spartina); }
.pipe strong { font-family: var(--f-display); font-weight: 400; font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.pipe span { font-size: .9rem; color: var(--mute); font-weight: 600; }
.pipe a.hot { border-color: var(--spartina); background: #fffaf0; }
@media (max-width: 760px) { .pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }

/* Status pills */
.pill { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 700; padding: .25rem .6rem; border-radius: 999px; white-space: nowrap; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.s-new { background: #fff3d6; color: #8a5a00; }
.s-contacted { background: #e5eef8; color: #24527a; }
.s-visit_scheduled { background: #ece6f6; color: #57407f; }
.s-bought { background: var(--ok-soft); color: var(--ok); }
.s-not_a_fit { background: #eeeeec; color: #5b5d5a; }

/* Lists */
.list { list-style: none; margin: 0; padding: 0; display: grid; }
.list li { border-top: 1px solid var(--line); }
.list li:first-child { border-top: 0; }
.list a.item { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; padding: .8rem 0; text-decoration: none; color: var(--ink); }
.list a.item:hover strong { color: var(--marsh); text-decoration: underline; }
.list .sub { grid-column: 1 / -1; color: var(--mute); font-size: .9rem; }
.empty { color: var(--mute); padding: .5rem 0; }

/* Table */
.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { text-align: left; padding: .75rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--mute); background: var(--shell); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fffcf5; }
td a { font-weight: 600; }

.filters { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; }
.filters label { min-width: 10rem; }
.filters .grow { flex: 1; min-width: 14rem; }

/* Lead detail */
.lead-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (max-width: 960px) {
  .lead-grid { grid-template-columns: 1fr; }
  /* On a phone at a house: who they are, then the decision, then everything else (not Approve/Buy/Pass at the very bottom) */
  .lead-grid > .stack { display: contents; }
  .lead-grid .contact-card { order: -2; }
  .lead-grid .progress-card { order: -1; }
}
dl.facts { margin: 0; display: grid; grid-template-columns: 10rem 1fr; gap: .6rem 1rem; }
dl.facts dt { color: var(--mute); font-weight: 600; font-size: .92rem; }
dl.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { dl.facts { grid-template-columns: 1fr; gap: .15rem; } dl.facts dd { margin-bottom: .6rem; } }
.quote { background: var(--shell); border-radius: 8px; padding: .9rem 1rem; white-space: pre-wrap; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; }
.gallery a { display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--shell); }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s ease; }
.gallery a:hover img { transform: scale(1.03); }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip { font-size: .85rem; padding: .25rem .6rem; border-radius: 999px; background: var(--shell); border: 1px solid var(--line); }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.timeline li { display: grid; grid-template-columns: 9px 1fr; gap: .75rem; }
.timeline li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--line); margin-top: .45rem; }
.timeline li.k-note::before { background: var(--spartina); }
.timeline li.k-status::before { background: var(--marsh); }
.timeline li.k-thank_you::before { background: var(--ok); }
.timeline li.k-email::before { background: #24527a; }
.timeline .meta { font-size: .82rem; color: var(--mute); }
.timeline .body { white-space: pre-wrap; }
.contact-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.contact-actions a { font-size: .95rem; }

/* Lightbox */
dialog.lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 92vh; }
dialog.lightbox::backdrop { background: rgba(20, 22, 20, .85); }
dialog.lightbox img { max-width: 96vw; max-height: 86vh; display: block; border-radius: 6px; }
dialog.lightbox .bar { display: flex; justify-content: space-between; gap: 1rem; padding-top: .6rem; color: #f3f1e8; }
dialog.lightbox button { background: rgba(255,255,255,.15); color: #fff; border: 0; border-radius: 6px; padding: .5rem .9rem; font: 600 .95rem var(--f-body); cursor: pointer; }

/* Customer pages */
.progress-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; counter-reset: s; }
.progress-steps li { counter-increment: s; display: grid; gap: .4rem; font-size: .9rem; color: var(--mute); }
.progress-steps li::before { content: ""; height: 6px; border-radius: 3px; background: var(--line); }
.progress-steps li.done::before, .progress-steps li.now::before { background: var(--marsh); }
.progress-steps li.now { color: var(--ink); font-weight: 700; }
.drop { border: 2px dashed var(--line); border-radius: 10px; padding: 1.25rem; display: grid; gap: .3rem; justify-items: center; text-align: center; cursor: pointer; background: var(--card); }
.drop:hover, .drop:focus-within { border-color: var(--spartina); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.center { text-align: center; justify-items: center; }
.auth-card { max-width: 28rem; margin: clamp(2rem, 8vh, 5rem) auto 0; }
footer.foot { text-align: center; color: var(--mute); font-size: .88rem; padding: 2rem 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 720px) {
  .top .in { gap: .4rem 1rem; padding-block: .6rem .4rem; }
  .top form { margin-left: auto; }
  .top nav { order: 3; flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; margin-inline: -.5rem; }
  .top nav a { white-space: nowrap; }
}

/* Conversations */
.badge { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem; margin-left: .35rem; border-radius: 999px; background: var(--bad); color: #fff; font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.thread-card { padding: 0; gap: 0; overflow: hidden; }
.thread-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.thread { display: flex; flex-direction: column; gap: .75rem; padding: 1.25rem; min-height: 16rem; max-height: min(62vh, 40rem); overflow-y: auto; background: var(--shell); }
.thread.short { max-height: 22rem; min-height: 0; }
.msg { display: grid; gap: .2rem; max-width: min(34rem, 85%); justify-self: start; align-self: flex-start; }
.msg.mine { align-self: flex-end; justify-items: end; }
.bubble { background: var(--card); border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; padding: .65rem .9rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.mine .bubble { background: var(--marsh); border-color: var(--marsh); color: #f3f1e8; border-radius: 16px 16px 4px 16px; }
.msg .meta { font-size: .78rem; color: var(--mute); }
.thread .empty-thread { margin: auto; text-align: center; color: var(--mute); max-width: 26rem; }
.composer { display: grid; grid-template-columns: 1fr auto; gap: .6rem; align-items: end; padding: 1rem 1.25rem; border-top: 1px solid var(--line); background: var(--card); }
.composer textarea { min-height: 3.2rem; max-height: 12rem; }
.composer .hint-row { grid-column: 1 / -1; font-size: .8rem; color: var(--mute); }
@media (max-width: 560px) { .composer { grid-template-columns: 1fr; } .composer .btn { width: 100%; } }
.inbox a.item .preview { grid-column: 1 / -1; color: var(--mute); font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox a.item.unread strong::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); margin-left: .45rem; vertical-align: middle; }
.timeline li.k-message::before { background: #57407f; }
.pw-tip { background: var(--shell); border-radius: 8px; padding: .75rem 1rem; font-size: .92rem; color: var(--mute); }

/* Visits, feedback, marketing folder */
.visit-box { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: .9rem; margin: 0; }
.visit-box.done strong { color: var(--ok); }
.stars { color: var(--spartina); letter-spacing: .1em; font-size: 1.05rem; white-space: nowrap; }
.stars .off { color: var(--line); }
.pipe .stat { background: var(--shell); border-radius: 10px; padding: .9rem 1rem; display: grid; gap: .15rem; }
.pipe .stat strong { font-family: var(--f-display); font-weight: 400; font-size: 1.8rem; line-height: 1; font-variant-numeric: tabular-nums; }
.pipe .stat span { font-size: .85rem; color: var(--mute); font-weight: 600; }
@media (max-width: 760px) { .pipe[style] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
details.mk { border: 1px solid var(--line); border-radius: 10px; padding: .75rem 1rem; }
details.mk summary { cursor: pointer; font-weight: 600; }
.pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .5rem; }
.pick label { position: relative; display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden; cursor: pointer; border: 3px solid transparent; }
.pick label:has(input:checked) { border-color: var(--spartina); }
.pick label.in { opacity: .55; cursor: default; }
.pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pick input { position: absolute; top: 6px; left: 6px; width: 1.2rem; height: 1.2rem; accent-color: var(--marsh); z-index: 1; }
.pick span { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(31,58,47,.85); color: #f3f1e8; font-size: .75rem; font-weight: 700; text-align: center; padding: .2rem; }
.timeline li.k-feedback::before { background: var(--spartina); }
.folder { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.folder figure { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; display: grid; }
.folder figure > a { display: block; aspect-ratio: 4 / 3; background: var(--shell); }
.folder img { width: 100%; height: 100%; object-fit: cover; display: block; }
.folder figcaption { padding: .75rem .9rem; display: grid; gap: .3rem; font-size: .9rem; }
.folder .perm { font-size: .8rem; color: var(--ok); font-weight: 600; }
.folder .acts { display: flex; justify-content: space-between; align-items: center; gap: .5rem; border-top: 1px solid var(--line); padding: .5rem .9rem; }
.folder .acts form { margin: 0; }
.chipnav { display: flex; flex-wrap: wrap; gap: .4rem; }
.chipnav a { text-decoration: none; font-size: .9rem; padding: .35rem .75rem; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); background: var(--card); }
.chipnav a.on { background: var(--marsh); border-color: var(--marsh); color: #f3f1e8; }
.rating-pick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
.rating-pick label { position: relative; cursor: pointer; }
.rating-pick input { position: absolute; opacity: 0; }
.rating-pick span { display: grid; gap: .2rem; justify-items: center; text-align: center; padding: .9rem .3rem; border: 1.5px solid var(--line); border-radius: 10px; background: var(--card); font-size: .85rem; font-weight: 600; }
.rating-pick b { font-size: 1.6rem; color: var(--spartina); font-weight: 400; line-height: 1; }
.rating-pick input:checked + span { border-color: var(--spartina); background: #fff8e8; box-shadow: inset 0 0 0 1px var(--spartina); }
.rating-pick input:focus-visible + span { outline: 3px solid var(--spartina); outline-offset: 2px; }
@media (max-width: 480px) { .rating-pick { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .3rem; } .rating-pick span { font-size: .7rem; padding: .7rem .1rem; } }

.top .in { gap: .75rem 1.25rem; }
.top nav a { padding: .45rem .6rem; }
.top-right { display: flex; gap: .1rem; align-items: center; }

.address-box { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; background: var(--shell); border-radius: 10px; padding: 1rem 1.1rem; font-size: 1.05rem; line-height: 1.45; }
.getting-in { background: var(--warn-soft); color: var(--warn); border-radius: 8px; padding: .6rem .9rem; font-size: .95rem; }

/* =====================================================================
   Dashboard v2: clean white shell, serif wordmark, tabs, stage colors
   ===================================================================== */
:root {
  --navy: #1d2f45;
  --gold: #c8952c;
  --f-brand: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --st-new: #d27a1e; --st-qualify: #2862c4; --st-contacted: #12857a; --st-fit_check: #6a3fbd;
  --st-visit_scheduled: #4a3cc0; --st-bought: #2c8442; --st-thanked: #b9851c; --st-not_a_fit: #6b6f6a;
}
body.dash { background: #fbfbf9; }
body.dash h1, body.dash h2, body.dash h3 { font-family: var(--f-brand); font-weight: 400; letter-spacing: -.01em; }
body.dash h1 { font-size: 1.7rem; }
body.dash h2 { font-size: 1.2rem; }

.wordmark { display: inline-flex; align-items: center; gap: .7rem; color: var(--navy); text-decoration: none; }
.wordmark .logo { width: 2.3rem; height: 2.3rem; flex: none; color: var(--navy); }
.wm-text { font-family: var(--f-brand); font-size: 1.35rem; line-height: 1.1; color: var(--navy); white-space: nowrap; }
.wm-text em { color: var(--gold); font-style: italic; }
@media (max-width: 560px) { .wm-text { font-size: 1.05rem; white-space: normal; } .wordmark .logo { width: 1.9rem; height: 1.9rem; } }

.dhead { background: #fff; border-bottom: 1px solid #e7e5df; position: sticky; top: 0; z-index: 20; box-shadow: 0 1px 8px rgba(20, 30, 40, .04); }
.dhead .in { max-width: 88rem; margin: 0 auto; padding: .7rem clamp(1rem, 3vw, 2rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand-link { text-decoration: none; }
.tools { display: flex; align-items: center; gap: .4rem; }
.icon-btn { display: inline-grid; place-items: center; position: relative; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 0; background: transparent; color: var(--navy); cursor: pointer; list-style: none; }
.icon-btn::-webkit-details-marker { display: none; }
.icon-btn:hover { background: #f2f1ec; }
.i { width: 1.35rem; height: 1.35rem; }
.dot-count { position: absolute; top: .1rem; right: .05rem; min-width: 1.2rem; height: 1.2rem; padding: 0 .3rem; border-radius: 999px; background: var(--gold); color: #fff; font-size: .72rem; font-weight: 700; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.vsep { width: 1px; height: 2rem; background: #e2e0d9; margin: 0 .5rem; }
.search { display: flex; align-items: center; background: #f6f5f1; border: 1px solid transparent; border-radius: 999px; padding-left: .9rem; }
.search:focus-within { border-color: var(--gold); background: #fff; }
.search input { border: 0 !important; background: transparent !important; outline: none !important; width: 13rem; padding: .5rem 0 !important; font-size: .95rem; }
@media (max-width: 900px) { .search input { width: 7rem; } }
/* On a phone the header keeps just the magnifier: it opens the search page, which has its own box */
@media (max-width: 640px) { .search { padding-left: 0; background: transparent; } .search input { display: none; } .who { display: none !important; } .vsep { display: none; } }

details.pop { position: relative; }
details.pop > summary { list-style: none; cursor: pointer; }
details.pop > summary::-webkit-details-marker { display: none; }
.panel-pop { position: absolute; right: 0; top: calc(100% + .5rem); background: #fff; border: 1px solid #e4e2dc; border-radius: 12px; box-shadow: 0 16px 40px rgba(20, 30, 40, .14); z-index: 30; min-width: 15rem; }
.bellpop .panel-pop { width: min(25rem, 92vw); max-height: 70vh; overflow-y: auto; }
.pop-head { display: flex; justify-content: space-between; align-items: baseline; padding: .9rem 1rem .5rem; }
.notes { list-style: none; margin: 0; padding: 0 0 .4rem; }
.notes a { display: grid; grid-template-columns: .55rem 1fr; gap: .7rem; padding: .65rem 1rem; text-decoration: none; color: var(--ink); }
.notes a:hover { background: #f8f7f3; }
.notes a > span:last-child { display: grid; gap: .1rem; min-width: 0; }
.notes .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notes li:not(.new) strong { font-weight: 500; }
.nk { width: .55rem; height: .55rem; border-radius: 50%; margin-top: .45rem; background: #d6d3ca; }
.notes li.new .nk-lead { background: var(--st-new); } .notes li.new .nk-message { background: var(--st-qualify); }
.notes li.new .nk-feedback { background: var(--gold); } .notes li.new .nk-text { background: var(--st-fit_check); }
.user { display: flex; align-items: center; gap: .65rem; padding: .3rem .4rem .3rem .3rem; border-radius: 999px; }
.user:hover { background: #f2f1ec; }
.avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .95rem; letter-spacing: .03em; }
.who { display: grid; line-height: 1.2; }
.who strong { font-size: .98rem; color: var(--navy); }
.who span { font-size: .82rem; color: var(--mute); }
.chev { width: 1.1rem; height: 1.1rem; color: var(--mute); }
.menu { display: grid; padding: .4rem; }
.menu a, .menu button { text-align: left; padding: .65rem .8rem; min-height: 44px; border-radius: 8px; text-decoration: none; color: var(--ink); font: 500 .95rem var(--f-body); background: none; border: 0; cursor: pointer; width: 100%; }
.menu a:hover, .menu button:hover { background: #f4f3ee; }
.menu form { margin: 0; border-top: 1px solid #eeece6; margin-top: .3rem; padding-top: .3rem; }

.tabs { border-top: 1px solid #f0eee8; }
.tabs .in { padding-block: 0; justify-content: flex-start; gap: 0; overflow-x: auto; }
.tabs a { position: relative; padding: .85rem 1.15rem; text-decoration: none; color: #3d4450; font-weight: 500; font-size: 1rem; white-space: nowrap; }
.tabs a:hover { color: var(--navy); }
.tabs a.on { color: var(--navy); font-weight: 600; }
.tabs a.on::after { content: ""; position: absolute; left: .9rem; right: .9rem; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--gold); }
body.dash main.wrap { max-width: 88rem; }
body.dash .card { box-shadow: 0 1px 3px rgba(20, 30, 40, .04); border-color: #e7e5df; }

/* Stage colors everywhere a stage shows up */
.pill.s-new { background: color-mix(in srgb, var(--st-new) 12%, #fff); color: var(--st-new); }
.pill.s-qualify { background: color-mix(in srgb, var(--st-qualify) 11%, #fff); color: var(--st-qualify); }
.pill.s-contacted { background: color-mix(in srgb, var(--st-contacted) 11%, #fff); color: var(--st-contacted); }
.pill.s-fit_check { background: color-mix(in srgb, var(--st-fit_check) 11%, #fff); color: var(--st-fit_check); }
.pill.s-visit_scheduled { background: color-mix(in srgb, var(--st-visit_scheduled) 11%, #fff); color: var(--st-visit_scheduled); }
.pill.s-bought { background: color-mix(in srgb, var(--st-bought) 11%, #fff); color: var(--st-bought); }
.pill.s-thanked { background: color-mix(in srgb, var(--st-thanked) 13%, #fff); color: var(--st-thanked); }
.pill.s-not_a_fit { background: #eeeeec; color: var(--st-not_a_fit); }
.pipe { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
.pipe a { border-top: 3px solid var(--stc, var(--line)); }

/* ---------- Leads board ---------- */
.board-bar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; }
.board-bar .filters { flex: 1; }
.seg { display: inline-flex; border: 1px solid #e2e0d9; border-radius: 999px; padding: .2rem; background: #fff; }
.seg a { padding: .4rem .9rem; border-radius: 999px; text-decoration: none; color: var(--mute); font-weight: 600; font-size: .9rem; }
.seg a.on { background: var(--navy); color: #fff; }
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15.5rem, 1fr); gap: .75rem; overflow-x: auto; padding-bottom: 1rem; align-items: start; scroll-snap-type: x proximity; }
.col { --c: var(--st-new); background: color-mix(in srgb, var(--c) 4%, #fff); border: 1px solid color-mix(in srgb, var(--c) 22%, #e7e5df); border-radius: 12px; display: grid; grid-template-rows: auto 1fr; min-height: 28rem; scroll-snap-align: start; transition: box-shadow .15s ease, border-color .15s ease; }
.col.over { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }
.col-head { display: flex; align-items: center; gap: .55rem; padding: .8rem .9rem; border-bottom: 1px solid color-mix(in srgb, var(--c) 18%, #ece9e2); background: color-mix(in srgb, var(--c) 9%, #fff); border-radius: 12px 12px 0 0; }
.col-num { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--c); color: #fff; font-weight: 700; font-size: .85rem; display: grid; place-items: center; flex: none; }
.col-name { color: var(--c); font-weight: 600; font-size: 1rem; flex: 1; }
.col-count { color: var(--c); font-weight: 600; font-variant-numeric: tabular-nums; }
.col-help { font-size: .8rem; color: var(--mute); padding: .55rem .9rem 0; line-height: 1.35; }
.col-body { display: flex; flex-direction: column; gap: .65rem; padding: .7rem; min-height: 6rem; }
.col-empty { border: 2px dashed color-mix(in srgb, var(--c) 25%, #e3e0d8); border-radius: 10px; padding: 1rem; text-align: center; color: var(--mute); font-size: .88rem; }
.lcard { background: #fff; border: 1px solid #e6e3dc; border-radius: 10px; box-shadow: 0 1px 2px rgba(20, 30, 40, .05); display: grid; cursor: grab; transition: box-shadow .15s ease, transform .15s ease; position: relative; }
.lcard:hover { box-shadow: 0 6px 18px rgba(20, 30, 40, .09); }
.lcard.dragging { opacity: .5; transform: rotate(1deg); }
.lcard .body { padding: .8rem .85rem .7rem; display: grid; gap: .25rem; text-decoration: none; color: var(--ink); }
.lcard .name { font-weight: 700; font-size: 1rem; color: #1f2a37; }
.lcard .phone { font-size: .92rem; color: #4a5160; font-variant-numeric: tabular-nums; }
.lcard .row-i { display: flex; align-items: center; gap: .45rem; font-size: .9rem; color: #3d4450; min-width: 0; }
.lcard .row-i span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lcard .row-i .i { width: 1rem; height: 1rem; flex: none; color: #5b6270; }
.lcard .meta { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: .2rem; }
.lcard .meta span { display: inline-flex; align-items: center; gap: .25rem; font-size: .8rem; color: var(--mute); }
.lcard .meta .i { width: .95rem; height: .95rem; }
.lcard .meta .warn { color: #b25b00; font-weight: 600; }
.lcard .meta .unread { color: var(--st-qualify); font-weight: 600; }
.lcard .foot { border-top: 1px solid #efece6; padding: .55rem .85rem; display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .85rem; }
.lcard .st { display: inline-flex; align-items: center; gap: .4rem; color: var(--c); font-weight: 500; }
.lcard .st::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--c); }
.lcard .st.ok::before, .lcard .st.star::before { display: none; }
.lcard .st .i { width: 1.05rem; height: 1.05rem; }
.lcard .val { font-weight: 700; color: #1f2a37; font-variant-numeric: tabular-nums; }
.lcard .when { display: flex; align-items: center; gap: .4rem; padding: 0 .85rem .6rem; font-size: .86rem; color: #2f3644; }
.lcard .when .i { width: 1rem; height: 1rem; }
.lcard .when a { color: var(--st-visit_scheduled); font-weight: 600; }
.closed-link { font-size: .9rem; }
.toast { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); background: var(--navy); color: #fff; padding: .75rem 1.1rem; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.2); z-index: 50; font-size: .95rem; max-width: calc(100% - 2rem); }
.toast a { color: #ffd88a; font-weight: 600; }
.toast.bad { background: var(--bad); }
.col.c-new, .lcard.c-new { --c: var(--st-new); }
.col.c-qualify, .lcard.c-qualify { --c: var(--st-qualify); }
.col.c-contacted, .lcard.c-contacted { --c: var(--st-contacted); }
.col.c-fit_check, .lcard.c-fit_check { --c: var(--st-fit_check); }
.col.c-visit_scheduled, .lcard.c-visit_scheduled { --c: var(--st-visit_scheduled); }
.col.c-bought, .lcard.c-bought { --c: var(--st-bought); }
.col.c-thanked, .lcard.c-thanked { --c: var(--st-thanked); }
.col.c-not_a_fit, .lcard.c-not_a_fit { --c: var(--st-not_a_fit); }
.val-big { font-weight: 700; font-variant-numeric: tabular-nums; color: #1f2a37; }
.top .brand { display: grid; gap: .1rem; text-decoration: none; }
.top .brand small { padding-left: 3rem; }

/* Board, tuned to fit all seven stages on a laptop screen */
.board { grid-auto-columns: minmax(11.2rem, 1fr); gap: .6rem; }
.col { min-height: 32rem; }
.col-head { padding: .7rem .75rem; gap: .45rem; cursor: help; }
.col-name { font-size: .95rem; line-height: 1.15; }
.col-body { padding: .55rem; gap: .55rem; }
.lcard .body { padding: .7rem .75rem .6rem; }
.lcard .name { font-size: .95rem; line-height: 1.25; }
.lcard .phone { font-size: .88rem; }
.lcard .row-i { font-size: .86rem; }
.lcard .foot { padding: .5rem .75rem; font-size: .8rem; }
.lcard .when { padding: 0 .75rem .55rem; font-size: .82rem; }
.board-filter { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-left: auto; }
.board-filter input, .board-filter select { width: auto; padding: .55rem .75rem; font-size: .92rem; }
.board-filter input { width: 13rem; }
.board-filter .btn { padding: .55rem .9rem; font-size: .92rem; }
.lcard .foot .val { white-space: nowrap; flex: none; }
.lcard .foot .st { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.col-head { min-height: 3.6rem; }
.col-name { font-size: .92rem; }
/* Cards never grow wider than their column: a long amount drops under the stage name instead */
.col, .col-body, .lcard { min-width: 0; }
.lcard .foot { flex-wrap: wrap; row-gap: .15rem; }
.lcard .foot .val { margin-left: auto; }
/* Numbers in a plain face: a serif's old-style "1" can read as a capital I */
body.dash .pipe strong, body.dash .pipe .stat strong { font-family: var(--f-body); font-weight: 700; font-size: 1.75rem; letter-spacing: -.01em; }
.tabs .in { scrollbar-width: none; }
.tabs .in::-webkit-scrollbar { display: none; }

/* Back links, returning customers, checklists, archive, history */
.back-link { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; font-size: .95rem; text-decoration: none; color: var(--navy); padding: .35rem .7rem .35rem .5rem; margin-left: -.5rem; border-radius: 8px; width: fit-content; }
.back-link:hover { background: #f1efe9; }
.returning { background: color-mix(in srgb, var(--st-qualify) 8%, #fff); border: 1px solid color-mix(in srgb, var(--st-qualify) 25%, #e7e5df); color: #233a5e; border-radius: 10px; padding: .75rem 1rem; font-size: .95rem; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.checklist li { display: grid; grid-template-columns: 1.6rem 1fr; gap: .5rem; align-items: start; }
.checklist li > span { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; border: 2px solid #d9d5cb; color: #b8b2a3; font-weight: 700; font-size: .85rem; }
.checklist li.ok > span { background: var(--st-bought); border-color: var(--st-bought); color: #fff; }
.col-action { margin: 0; }
.col-action .btn { width: 100%; padding: .5rem; font-size: .85rem; }
.board-links { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.history { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 2px solid #ece9e2; display: grid; gap: 1rem; }
.history li { position: relative; display: grid; gap: .2rem; }
.history li::before { content: ""; position: absolute; left: -1.38rem; top: .35rem; width: .7rem; height: .7rem; border-radius: 50%; background: var(--navy); }
.history a { text-decoration: none; color: var(--navy); }

/* A bigger board: full screen width, roomier cards */
body.dash main.wrap.full { max-width: none; }
main.full .board { grid-auto-columns: minmax(13.5rem, 1fr); gap: .8rem; }
main.full .col { min-height: 36rem; }
main.full .lcard .name { font-size: 1.02rem; }
main.full .lcard .phone { font-size: .95rem; }
main.full .lcard .row-i { font-size: .92rem; }
main.full .lcard .foot { font-size: .88rem; }
main.full .lcard .when { font-size: .88rem; }
main.full .col-name { font-size: 1rem; }
/* On the full-width board, the header and tabs line up with the board's edges */
body.wide .dhead .in { max-width: none; }

/* =====================================================================
   Messenger + chat bubbles
   ===================================================================== */
.av { width: 2.9rem; height: 2.9rem; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 1rem; flex: none; letter-spacing: .02em; }
.av.lg { width: 3.2rem; height: 3.2rem; font-size: 1.1rem; }
.av.h0 { background: #ece6f8; color: #5b3fa0; } .av.h1 { background: #e3eefb; color: #2a5ea8; } .av.h2 { background: #f8eadb; color: #9a5b16; }
.av.h3 { background: #e5f2e6; color: #2f7040; } .av.h4 { background: #eceeee; color: #4e5759; } .av.h5 { background: #f9e8e3; color: #a24a33; }

/* Page: a full-height, two-pane app under the header */
body.messenger-page main.wrap.messenger-main { padding: 0; gap: 0; }
body.messenger-page main > .flash { margin: .75rem 1rem 0; }
.messenger { display: grid; grid-template-columns: minmax(19rem, 24rem) 1fr; height: calc(100vh - 7.2rem); min-height: 30rem; background: #fff; border-top: 1px solid #ebe8e1; }
.conv-list { border-right: 1px solid #ebe8e1; display: flex; flex-direction: column; min-height: 0; background: #fff; }
.conv-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.1rem .6rem; }
body.dash .conv-head h1 { font-size: 1.75rem; }
.compose-btn { padding: .5rem .85rem; font-size: .92rem; color: var(--navy); border-color: #d9dde4; }
.compose-btn .i { width: 1.1rem; height: 1.1rem; }
.conv-search { margin: 0 1.1rem .5rem; display: flex; align-items: center; gap: .5rem; border: 1px solid #dfe2e7; border-radius: 10px; padding: 0 .75rem; background: #fff; }
.conv-search:focus-within { border-color: var(--navy); }
.conv-search .i { width: 1.15rem; height: 1.15rem; color: #6b7280; }
.conv-search input { border: 0 !important; outline: none !important; padding: .65rem 0 !important; background: transparent !important; }
.conv-tabs { display: flex; gap: .25rem; padding: 0 1.1rem; border-bottom: 1px solid #ebe8e1; }
.conv-tabs a { padding: .65rem .7rem; text-decoration: none; color: #4b5563; font-weight: 500; font-size: .95rem; position: relative; }
.conv-tabs a.on { color: #1f4f9a; font-weight: 600; }
.conv-tabs a.on::after { content: ""; position: absolute; left: .4rem; right: .4rem; bottom: -1px; height: 2.5px; border-radius: 2px; background: #1f4f9a; }
.conv-tabs .count { display: inline-grid; place-items: center; min-width: 1.2rem; height: 1.2rem; padding: 0 .3rem; border-radius: 999px; background: #1f4f9a; color: #fff; font-size: .72rem; font-weight: 700; }
.convs { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.conv { display: flex; gap: .8rem; align-items: flex-start; padding: .85rem 1.1rem; text-decoration: none; color: var(--ink); border-bottom: 1px solid #f1efea; }
.conv:hover { background: #f8f9fb; }
.conv.selected { background: #eef3fb; }
.conv-main { flex: 1; min-width: 0; display: grid; gap: .2rem; }
.conv-top { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.conv-top strong { font-weight: 600; font-size: 1rem; color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-top .when { font-size: .82rem; color: #6b7280; white-space: nowrap; }
.conv-bottom { display: flex; justify-content: space-between; gap: .6rem; align-items: center; }
.preview { font-size: .9rem; color: #4b5563; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.conv.unread .conv-top strong, .conv.unread .preview { color: #111827; font-weight: 600; }
.ucount { min-width: 1.5rem; height: 1.5rem; padding: 0 .4rem; border-radius: 999px; background: #1f5fc4; color: #fff; font-size: .78rem; font-weight: 700; display: grid; place-items: center; flex: none; }
.conv-empty { padding: 1.5rem 1.1rem; color: var(--mute); font-size: .95rem; }

.conv-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #f7f7f5; }
.pane-head { display: flex; align-items: center; gap: .85rem; padding: .85rem 1.25rem; background: #fff; border-bottom: 1px solid #ebe8e1; flex-wrap: wrap; }
.pane-back { display: none; }
.who-chat { display: grid; gap: .1rem; min-width: 0; }
.who-chat strong { font-size: 1.15rem; color: #1f2937; }
.pane-actions { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.pane-actions form { margin: 0; }
.act { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .85rem; border: 1px solid #d5dbe5; border-radius: 9px; background: #fff; color: #1f4f9a; font: 600 .9rem var(--f-body); text-decoration: none; cursor: pointer; }
.act:hover { border-color: #1f4f9a; background: #f5f8fd; }
.act .i { width: 1.15rem; height: 1.15rem; }
.act.icon-only { padding: .55rem .6rem; color: #4b5563; }
.pane-empty { margin: auto; display: grid; justify-items: center; gap: .6rem; color: var(--mute); text-align: center; padding: 2rem; }
.pane-empty .i { width: 3rem; height: 3rem; color: #c9c4b8; }

/* The conversation itself */
.chat { display: flex; flex-direction: column; gap: .55rem; padding: 1.25rem; overflow-y: auto; background: #f7f7f5; min-height: 14rem; max-height: 28rem; }
.chat.full { flex: 1; max-height: none; padding: 1.5rem clamp(1rem, 3vw, 2rem); }
.chat.short { max-height: 26rem; }
.msg { display: flex; }
.msg.mine { justify-content: flex-end; }
.bubble { max-width: min(36rem, 78%); background: #fff; border: 1px solid #e6e3dc; border-radius: 14px 14px 14px 4px; padding: .65rem .85rem .45rem; box-shadow: 0 1px 2px rgba(20, 30, 40, .04); display: grid; gap: .3rem; }
.msg.mine .bubble { background: #fbf3e2; border-color: #efe0bf; border-radius: 14px 14px 4px 14px; }
.bubble .text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1rem; line-height: 1.45; color: #1f2937; }
.bubble .stamp { font-size: .78rem; color: #6b7280; justify-self: end; display: inline-flex; gap: .35rem; align-items: center; }
.msg:not(.mine) .bubble .stamp { justify-self: start; }
.ticks { color: #9aa1ab; letter-spacing: -.15em; font-size: .8rem; }
.ticks.read { color: #2b6fd6; }
.bubble .auto { font-size: .74rem; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: .06em; }
.chat-photo { display: block; border-radius: 10px; overflow: hidden; max-width: 17rem; background: #eee; }
.chat-photo img { display: block; width: 100%; height: auto; max-height: 16rem; object-fit: cover; }
.day-sep { display: flex; align-items: center; gap: .9rem; color: #6b7280; font-size: .85rem; margin: .6rem 0; }
.day-sep::before, .day-sep::after { content: ""; flex: 1; height: 1px; background: #e2dfd8; }
.chat .empty-thread { margin: auto; color: var(--mute); text-align: center; max-width: 26rem; }

.composer { display: grid; gap: .45rem; padding: .85rem 1.25rem 1rem; background: #fff; border-top: 1px solid #ebe8e1; }
.composer-row { display: flex; align-items: flex-end; gap: .6rem; border: 1px solid #d9dde4; border-radius: 12px; padding: .35rem .35rem .35rem .5rem; background: #fff; }
.composer-row:focus-within { border-color: #1f4f9a; box-shadow: 0 0 0 3px rgba(31, 79, 154, .1); }
.composer textarea { border: 0 !important; outline: none !important; box-shadow: none !important; resize: none; min-height: 2.6rem; max-height: 11rem; padding: .6rem .3rem !important; background: transparent !important; font-size: 1rem; line-height: 1.4; flex: 1; }
.attach { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 8px; color: #6b7280; cursor: pointer; flex: none; position: relative; }
.attach:hover { background: #f2f4f7; color: #1f2937; }
.attach input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.attach:focus-within { outline: 2px solid #1f4f9a; }
.composer .send { background: #1f5fc4; color: #fff; border-radius: 9px; padding: .65rem 1.15rem; gap: .45rem; flex: none; }
.composer .send:hover { background: #1a51a8; }
.composer .send:disabled { opacity: .6; }
.composer .send .i { width: 1.15rem; height: 1.15rem; }
.composer .hint-row { font-size: .8rem; color: var(--mute); margin: 0; }
.attach-preview { display: flex; gap: .5rem; flex-wrap: wrap; }
.chip-photo { position: relative; width: 4.2rem; height: 4.2rem; border-radius: 8px; overflow: hidden; border: 1px solid #e3e0d8; }
.chip-photo img { width: 100%; height: 100%; object-fit: cover; }
.chip-photo button { position: absolute; top: 3px; right: 3px; width: 1.3rem; height: 1.3rem; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; font-size: .8rem; line-height: 1; cursor: pointer; }

/* Compose dialog */
dialog.compose { border: 0; border-radius: 14px; padding: 0; width: min(28rem, 94vw); box-shadow: 0 24px 60px rgba(0,0,0,.2); }
dialog.compose::backdrop { background: rgba(20, 25, 35, .35); }
.compose-head { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.1rem .6rem; }
dialog.compose input { margin: 0 1.1rem; width: calc(100% - 2.2rem); }
.compose-list { list-style: none; margin: .6rem 0 0; padding: 0 0 .5rem; max-height: 55vh; overflow-y: auto; }
.compose-list a { display: flex; gap: .75rem; align-items: center; padding: .6rem 1.1rem; text-decoration: none; color: var(--ink); }
.compose-list a:hover { background: #f5f7fa; }
.compose-list a > span:last-child { display: grid; }

/* Phones: list first; a conversation opens full screen with a back arrow */
@media (max-width: 900px) {
  .messenger { grid-template-columns: 1fr; height: calc(100vh - 7rem); }
  body.messenger-page.has-selected .conv-list { display: none; }
  body.messenger-page:not(.has-selected) .conv-pane { display: none; }
  .pane-back { display: inline-grid; margin-left: -.5rem; }
  .pane-actions { width: 100%; margin-left: 0; }
  .act { padding: .5rem .7rem; font-size: .85rem; }
  .bubble { max-width: 88%; }
}
/* On the lead/customer pages and the customer's own page, the chat sits inside a card */
.thread-card .chat { border-top: 0; }
.thread-card .composer { border-radius: 0 0 12px 12px; }
/* The messenger fills exactly the space under the header (no guessed heights): only the panes scroll */
body.messenger-page { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
body.messenger-page .dhead { position: static; flex: none; }
body.messenger-page main.wrap.messenger-main { flex: 1; min-height: 0; display: flex; flex-direction: column; width: 100%; }
body.messenger-page .messenger { flex: 1; height: auto; min-height: 0; }
@media (max-width: 900px) { body.messenger-page .messenger { height: auto; } }

/* My Day */
.day-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.day-head .chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.auto-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9rem; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .9rem; border: 1px solid #e2e0d9; background: #fff; color: var(--mute); }
.auto-chip .dot { width: .6rem; height: .6rem; border-radius: 50%; background: #b9b5aa; }
.auto-chip.on { color: var(--st-bought); border-color: color-mix(in srgb, var(--st-bought) 35%, #fff); }
.auto-chip.on .dot { background: var(--st-bought); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-bought) 20%, transparent); }
.day-section { display: grid; gap: .75rem; }
body.dash h2.sec { font-size: 1.35rem; display: flex; align-items: center; gap: .5rem; }
h2.sec .count { font-family: var(--f-body); font-size: .85rem; font-weight: 700; background: var(--navy); color: #fff; border-radius: 999px; padding: .1rem .55rem; }
.visit { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; background: #fff; border: 1px solid #e6e3dc; border-left: 4px solid var(--st-visit_scheduled); border-radius: 12px; padding: 1rem 1.15rem; }
.visit.finished { border-left-color: var(--st-bought); opacity: .85; }
.v-time { font-family: var(--f-brand); font-size: 1.7rem; line-height: 1; color: var(--navy); }
.v-time span { display: block; font-family: var(--f-body); font-size: .85rem; color: var(--mute); margin-top: .2rem; }
.v-main { display: grid; gap: .4rem; min-width: 0; }
.v-name { font-weight: 700; font-size: 1.1rem; color: #1f2937; text-decoration: none; }
.v-name:hover { text-decoration: underline; }
.v-addr { font-size: 1.02rem; }
.v-actions, .outcome { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .3rem; }
.outcome { border-top: 1px solid #efece6; padding-top: .7rem; }
.outcome form { margin: 0; display: flex; gap: .4rem; align-items: center; }
.bought-form .dollar { font-weight: 700; color: var(--mute); }
.bought-form input { width: 6.5rem; }
.call { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; background: #fff; border: 1px solid #e6e3dc; border-radius: 12px; padding: .9rem 1.1rem; }
.call .row form { margin: 0; }
.more-panel { border-top: 1px solid #e7e5df; padding-top: 1rem; }
.more-panel > summary { cursor: pointer; font-weight: 600; color: var(--navy); }
@media (max-width: 560px) { .visit { grid-template-columns: 1fr; } .v-time { font-size: 1.4rem; } .v-time span { display: inline; margin-left: .3rem; } }
.auto-switch { border-left: 4px solid #b9b5aa; }
.auto-switch.on { border-left-color: var(--st-bought); }
.flow { margin: 0; padding-left: 1.3rem; display: grid; gap: .45rem; }
.hours { display: grid; gap: .5rem; }
.hrow { display: grid; grid-template-columns: 9rem 1fr auto 1fr; gap: .6rem; align-items: center; }
.hrow input[type=time] { padding: .5rem .6rem; }
@media (max-width: 560px) { .hrow { grid-template-columns: 1fr 1fr; } .hrow .muted { display: none; } }

/* The request form and copies of automatic emails, shown in the conversation as records, not chat */
.bubble.record { white-space: normal; background: #fffdf8; border: 1px dashed #d9cfb5; border-radius: 12px; max-width: min(34rem, 82%); }
.msg.mine .bubble.record { white-space: normal; background: #fffdf8; border-color: #d9cfb5; border-radius: 12px; }
.bubble.record.form { border-style: solid; border-color: #c9d6c4; background: #f7faf5; }
.bubble.record summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: .1rem .8rem; align-items: baseline; }
.bubble.record summary::-webkit-details-marker { display: none; }
.bubble.record summary .auto { grid-column: 1; }
.bubble.record summary .subj { grid-column: 1; font-size: .98rem; color: #1f2937; }
.bubble.record summary .more { grid-column: 2; grid-row: 1 / span 2; font-size: .85rem; color: var(--navy, #1d2f45); text-decoration: underline; white-space: nowrap; }
.bubble.record details[open] .more { font-size: 0; }
.bubble.record details[open] .more::after { content: "Hide"; font-size: .85rem; }
.bubble.record details .text { margin-top: .55rem; padding-top: .55rem; border-top: 1px solid #ece6d6; font-size: .95rem; color: #374151; }
.bubble.record.form .auto { color: #4d7a3a; }

/* Lead page: emails & steps checklist */
.journey { list-style: none; margin: 0; padding: 0; position: relative; }
.journey::before { content: ""; position: absolute; left: .78rem; top: .8rem; bottom: .8rem; width: 2px; background: #e6e1d4; }
.j-step { position: relative; }
.j-step summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1.6rem 1fr auto; gap: .7rem; align-items: center; padding: .55rem .2rem; border-radius: 8px; }
.j-step summary::-webkit-details-marker { display: none; }
.j-step summary:hover { background: #f7f4ec; }
.j-dot { position: relative; z-index: 1; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; font-size: .85rem; font-weight: 700; background: #fff; border: 2px solid #d6d0c1; color: #fff; }
.j-step.done .j-dot { background: #3f7d4e; border-color: #3f7d4e; }
.j-step.next .j-dot { border-color: var(--navy, #1d2f45); box-shadow: 0 0 0 4px rgba(29, 47, 69, .12); }
.j-step.waiting .j-dot, .j-step.failed .j-dot { background: #b7791f; border-color: #b7791f; }
.j-step.failed .j-dot { background: #b42318; border-color: #b42318; }
.j-step.skipped .j-dot { background: #f1efe9; color: #9a968c; }
.j-title { font-weight: 600; color: #1f2937; }
.j-step.skipped .j-title, .j-step.later .j-title { color: #6b7280; font-weight: 500; }
.j-step.next .j-title { color: var(--navy, #1d2f45); }
.j-when { font-size: .85rem; color: #6b7280; text-align: right; }
.j-step.next .j-when, .j-step.waiting .j-when { color: var(--navy, #1d2f45); font-weight: 600; }
.j-body { margin: 0 0 .8rem 2.3rem; display: grid; gap: .6rem; }
.j-email { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .93rem; line-height: 1.5; background: #fffdf8; border: 1px solid #ece6d6; border-radius: 10px; padding: .8rem .95rem; max-height: 22rem; overflow: auto; }
.j-email.j-preview { border-style: dashed; color: #4b5563; }

/* My Day calendar */
.cal-wrap { display: grid; gap: .8rem; }
.cal-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cal-switch { display: inline-flex; background: #f1efe9; border-radius: 999px; padding: .2rem; }
.cal-switch a { padding: .4rem 1rem; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .92rem; color: #4b5563; }
.cal-switch a.on { background: #fff; color: var(--navy, #1d2f45); box-shadow: 0 1px 3px rgba(20, 30, 40, .12); }
.cal-nav { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.cal-nav h3 { font-size: 1.2rem; min-width: 12rem; text-align: center; color: var(--navy, #1d2f45); }
.cal-arrow { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%; text-decoration: none; font-size: 1.5rem; line-height: 1; padding-bottom: .15rem; color: var(--navy, #1d2f45); border: 1px solid #e2ddd0; background: #fff; }
.cal-arrow:hover { background: #f7f4ec; }
.cal-today { padding: .35rem .9rem; font-size: .9rem; }
.cal-count { margin-left: auto; }
.cal-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid #e6e1d4; border-radius: 12px; overflow: hidden; background: #fff; }
.cal-dow { padding: .45rem .6rem; font-size: .8rem; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .05em; background: #faf8f3; border-bottom: 1px solid #e6e1d4; }
.cal-cell { min-height: 6.4rem; padding: .35rem .4rem; border-right: 1px solid #efebe1; border-bottom: 1px solid #efebe1; display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.cal-cell:nth-child(7n + 7) { border-right: 0; }
.cal-cell.other { background: #fbfaf7; }
.cal-cell.other .cal-date { color: #b8b4aa; }
.cal-cell.blocked { background: repeating-linear-gradient(135deg, #faf8f3 0 8px, #f3f0e8 8px 16px); }
.cal-date { align-self: flex-start; width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 50%; text-decoration: none; font-weight: 600; font-size: .9rem; color: #1f2937; }
.cal-date:hover { background: #f1efe9; }
.cal-cell.today .cal-date { background: var(--navy, #1d2f45); color: #fff; }
.cal-off { font-size: .74rem; color: #8a6d1d; }
.cal-ev { display: block; font-size: .8rem; line-height: 1.3; padding: .2rem .4rem; border-radius: 6px; text-decoration: none; color: #1d2f45; background: #e8eef6; border-left: 3px solid var(--navy, #1d2f45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev b { font-weight: 700; }
.cal-ev.st-bought, .cal-ev.st-thanked, .cal-block.st-bought, .cal-block.st-thanked { background: #e7f2ea; border-left-color: #3f7d4e; color: #23492d; }
.cal-ev.st-not_a_fit, .cal-block.st-not_a_fit { background: #f1efe9; border-left-color: #9a968c; color: #6b7280; }
.cal-more { font-size: .78rem; color: #4b5563; }
.cal-week { display: grid; grid-template-columns: 3.6rem repeat(7, minmax(0, 1fr)); border: 1px solid #e6e1d4; border-radius: 12px; overflow: hidden; background: #fff; }
.cal-hours { padding-top: 3.2rem; }
.cal-hour { height: 2.4rem; font-size: .74rem; color: #6b7280; text-align: right; padding-right: .4rem; transform: translateY(-.45rem); }
.cal-col { border-left: 1px solid #efebe1; min-width: 0; }
.cal-col-head { height: 3.2rem; display: grid; place-items: center; align-content: center; border-bottom: 1px solid #e6e1d4; background: #faf8f3; }
.cal-col-head span { font-size: .78rem; color: #6b7280; text-transform: uppercase; letter-spacing: .05em; }
.cal-col-head strong { font-size: 1.05rem; }
.cal-col.today .cal-col-head strong { background: var(--navy, #1d2f45); color: #fff; border-radius: 50%; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; }
.cal-col-body { position: relative; height: calc(var(--rows) * 2.4rem); background: repeating-linear-gradient(to bottom, transparent 0 calc(2.4rem - 1px), #f1eee6 calc(2.4rem - 1px) 2.4rem); }
.cal-col.blocked .cal-col-body { background-color: #f6f3ec; }
.cal-open { position: absolute; left: 0; right: 0; background: rgba(63, 125, 78, .06); }
.cal-off-day { position: absolute; inset: .5rem .3rem auto; font-size: .78rem; color: #8a6d1d; text-align: center; }
.cal-block { position: absolute; left: .2rem; right: .2rem; display: flex; flex-direction: column; gap: .05rem; padding: .25rem .35rem; border-radius: 7px; background: #e8eef6; border-left: 3px solid var(--navy, #1d2f45); text-decoration: none; color: #1d2f45; font-size: .78rem; line-height: 1.25; overflow: hidden; box-shadow: 0 1px 2px rgba(20, 30, 40, .08); }
.cal-block span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-addr { color: #4b5563; }
@media (max-width: 760px) {
  .cal-cell { min-height: 3.6rem; }
  .cal-ev { font-size: 0; padding: 0; height: .45rem; border-left-width: 0; border-radius: 4px; }
  .cal-week { grid-template-columns: 2.6rem repeat(7, minmax(2.4rem, 1fr)); overflow-x: auto; }
  .cal-block span { display: none; }
}

.conv-person { color: inherit; text-decoration: none; }
.conv-person:hover strong { text-decoration: underline; }

.money-edit { margin-top: .45rem; }
.money-edit summary { cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--navy, #1d2f45); }
.money-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: .5rem; align-items: end; margin-top: .5rem; }
@media (max-width: 640px) { .money-form { grid-template-columns: 1fr 1fr; } }
.cal-ev.clash, .cal-block.clash { background: #fdecea; border-left-color: #b42318; color: #7a1a12; outline: 1px solid #f3b8b1; }

/* Lead page: the one Progress card */
.progress-card .next-line { margin: 0 0 .8rem; }
.visit-now { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; background: #f3f6fa; border: 1px solid #dfe6ef; border-radius: 10px; padding: .75rem .9rem; margin-bottom: .8rem; }
.cancel-visit { position: relative; }
.cancel-visit > summary { list-style: none; cursor: pointer; }
.cancel-visit > summary::-webkit-details-marker { display: none; }
.cancel-visit[open] > form { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 5; width: min(20rem, 80vw); background: #fff; border: 1px solid #e2ddd0; border-radius: 10px; padding: .9rem; box-shadow: 0 8px 24px rgba(20, 30, 40, .14); }
.j-earlier > details > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1.6rem 1fr auto; gap: .7rem; align-items: center; padding: .55rem .2rem; border-radius: 8px; }
.j-earlier > details > summary::-webkit-details-marker { display: none; }
.j-earlier > details > summary:hover { background: #f7f4ec; }
.j-earlier .j-dot { background: #3f7d4e; border-color: #3f7d4e; }
.j-earlier .j-title { color: #4b5563; font-weight: 500; }
.j-earlier .j-when { color: var(--navy, #1d2f45); text-decoration: underline; }
.j-earlier details[open] > summary .j-when { font-size: 0; }
.j-earlier details[open] > summary .j-when::after { content: "Hide"; font-size: .85rem; }
.j-earlier .journey::before { display: none; }
.by-hand { border-top: 1px solid #eee9de; margin-top: .8rem; padding-top: .7rem; }
.by-hand > summary { cursor: pointer; font-weight: 600; font-size: .95rem; color: #374151; }

/* Leads board: what's next on each card, and the Needs-you filter */
.lcard .next { font-size: .8rem; padding: .35rem .75rem; border-top: 1px solid #f0ece3; color: #4b5563; }
.lcard .next.auto { color: #3f6b4e; }
.lcard .next.you { color: #9a3412; background: #fff7ed; font-weight: 600; }
.needs-seg { margin-right: 1rem; }
.needs-seg b { display: inline-grid; place-items: center; min-width: 1.3rem; height: 1.3rem; margin-left: .25rem; border-radius: 999px; background: #c2410c; color: #fff; font-size: .75rem; }

.fu-row { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center; }
.fu-actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.call-results { display: flex; gap: .4rem; flex-wrap: wrap; }
.call-results button { padding: .45rem .75rem; font-size: .9rem; }

.chipnav a.to-sort { border-color: #f0c98a; background: #fff7e8; }
.sort-pick select { font-weight: 600; padding: .3rem .4rem; font-size: .92rem; }

/* Live page */
.live-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.live-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: #2e9e5b; vertical-align: middle; margin-left: .3rem; animation: livepulse 1.6s infinite; }
@keyframes livepulse { 0% { box-shadow: 0 0 0 0 rgba(46, 158, 91, .5); } 70% { box-shadow: 0 0 0 10px rgba(46, 158, 91, 0); } 100% { box-shadow: 0 0 0 0 rgba(46, 158, 91, 0); } }
.demo-box { display: grid; gap: .4rem; background: #fff; border: 1px dashed #d9cfb5; border-radius: 12px; padding: .8rem 1rem; max-width: 28rem; }
.live-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .7rem; margin-bottom: 1.2rem; }
.live-stats .stat { background: #fff; border: 1px solid #e7e3da; border-radius: 12px; padding: .8rem .9rem; display: grid; gap: .1rem; }
.live-stats .stat b { font-size: 2rem; line-height: 1; color: var(--navy, #1d2f45); font-variant-numeric: tabular-nums; }
.live-stats .stat.you b { color: #c2410c; }
.live-stats .stat span { font-weight: 600; }
.live-stats .stat small { color: #6b7280; }
.live-stats .stat.bump { animation: bump .6s; }
@keyframes bump { 0% { background: #fff4d6; } 100% { background: #fff; } }
.live-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1.2rem; align-items: start; }
.live-feed { list-style: none; margin: 0; padding: 0; max-height: 34rem; overflow: auto; display: grid; gap: .1rem; }
.live-feed li { display: grid; grid-template-columns: 6.5rem 1fr; gap: .6rem; padding: .4rem .3rem; border-bottom: 1px solid #f2eee6; font-size: .93rem; }
.live-feed li.new { animation: bump 1.2s; }
.live-feed time { color: #6b7280; font-variant-numeric: tabular-nums; font-size: .85rem; }
.live-feed .k-auto span { color: #3f6b4e; }
.live-booked { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.live-booked li { display: flex; justify-content: space-between; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid #f2eee6; font-size: .93rem; }
@media (max-width: 860px) { .live-grid { grid-template-columns: 1fr; } }
.btn:disabled, button:disabled.btn { opacity: .45; cursor: not-allowed; }

/* Board, live: leads visibly moving through the stages */
.lcard { transition: transform .75s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, opacity .4s; will-change: transform; }
.lcard.moving { position: relative; z-index: 20; box-shadow: 0 14px 30px rgba(20, 30, 40, .22), 0 0 0 2px rgba(29, 47, 69, .25); }
.lcard.enter { animation: card-in .7s cubic-bezier(.2, .8, .2, 1), card-glow 1.6s ease-out; }
@keyframes card-in { from { opacity: 0; transform: translateY(-14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes card-glow { 0% { box-shadow: 0 0 0 3px rgba(194, 145, 46, .7); } 100% { box-shadow: 0 0 0 0 rgba(194, 145, 46, 0); } }
.lcard.changed { animation: card-changed 1.2s ease-out; }
@keyframes card-changed { 0% { background: #fff6dc; } 100% { background: #fff; } }
.lcard.leaving { opacity: 0; transform: scale(.94); }
.col.receive .col-head { animation: col-receive 1s ease-out; }
@keyframes col-receive { 0% { box-shadow: inset 0 -3px 0 currentColor; filter: brightness(1.08); } 100% { box-shadow: inset 0 -3px 0 transparent; } }
.col-count.bump { animation: count-bump .6s; }
@keyframes count-bump { 0% { transform: scale(1); } 40% { transform: scale(1.5); } 100% { transform: scale(1); } }
.ticker { position: fixed; left: 1.2rem; bottom: 1.2rem; z-index: 60; display: grid; gap: .45rem; pointer-events: none; max-width: min(24rem, calc(100vw - 2.4rem)); }
.tick-item { background: #1d2f45; color: #fff; padding: .55rem .9rem; border-radius: 10px; font-size: .9rem; font-weight: 600; box-shadow: 0 8px 20px rgba(20, 30, 40, .25); animation: tick-in .35s ease-out; transition: opacity .4s, transform .4s; }
.tick-item.new { background: #8a6418; }
.tick-item.move { background: #1d2f45; }
.tick-item.out { opacity: 0; transform: translateX(-12px); }
@keyframes tick-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .lcard, .lcard.enter, .lcard.changed, .col.receive .col-head, .col-count.bump, .tick-item { animation: none !important; transition: none !important; }
}

/* Bought: the purchase record */
.bought .items { display: grid; gap: .5rem; }
.item-row { display: grid; grid-template-columns: 1fr auto 8rem; gap: .4rem; align-items: center; }
.item-row .dollar, .dollar-wrap .dollar { color: var(--mute); font-weight: 600; }
.dollar-wrap { display: grid; grid-template-columns: auto 1fr; gap: .4rem; align-items: center; }
@media (max-width: 560px) { .item-row { grid-template-columns: 1fr auto 6rem; } }
.receipt-lines { list-style: none; margin: .4rem 0; padding: 0; display: grid; gap: .2rem; font-size: .93rem; }
.receipt-lines li { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dotted var(--line); padding: .15rem 0; }
.route-bar { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; }
.omw { display: inline-flex; gap: .3rem; align-items: center; }
.omw select { padding: .35rem .4rem; }
.purchase { border-top: 1px solid var(--line, #e5ded0); padding: .7rem 0; display: grid; gap: .3rem; }
.purchase:first-of-type { border-top: 0; }
.omw select { width: auto; flex: none; }
.omw .btn, .v-actions .btn, .route-bar .btn { white-space: nowrap; }
@media (max-width: 540px) { .composer .send { padding-inline: .7rem; } .composer .send .i { display: none; } }
.referrers ol { margin: .4rem 0 0; padding-left: 1.2rem; display: grid; gap: .3rem; }
.referrers li span { margin-left: .5rem; }
.link-ref summary { cursor: pointer; color: var(--navy, #1d2f45); }
.summary-text { white-space: pre-wrap; font: .95rem/1.55 var(--f-body, system-ui); margin: 0; }

/* Email wording */
.wording-list { list-style: none; margin: 0; padding: 0; }
.wording-list li { display: flex; justify-content: space-between; gap: 1rem; align-items: center; flex-wrap: wrap; padding: .75rem 0; border-top: 1px solid var(--line, #e5ded0); }
.wording-list li:first-child { border-top: 0; }
.wording-state { display: flex; gap: .6rem; align-items: center; }
.wording-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.wording-grid textarea { font: .95rem/1.55 var(--f-body, system-ui); }
.fill-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
.fill-chips .chip { border: 1px solid #d9cfb5; background: #fffaf0; border-radius: 999px; padding: .2rem .6rem; font: 600 .8rem ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer; }
.fill-chips .chip:hover { background: #fbf1d8; }
.email-preview { background: #f6f1e7; border-radius: 10px; padding: .9rem; margin-top: .5rem; }
.ep-head { font-family: var(--f-display, Georgia, serif); color: var(--navy, #1d2f45); font-weight: 700; font-size: 1.1rem; margin-bottom: .6rem; }
.ep-body { background: #fff; border: 1px solid #e7e0d0; border-radius: 8px; padding: .8rem .9rem; white-space: pre-wrap; font-size: .93rem; overflow-wrap: anywhere; }
.ep-button { display: inline-block; background: var(--navy, #1d2f45); color: #fff; font-weight: 700; padding: .45rem .9rem; border-radius: 7px; margin: .2rem 0; }
.fill-help { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; font-size: .82rem; margin-top: .9rem; }
.fill-help dt { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--navy, #1d2f45); }
.fill-help dd { margin: 0; color: var(--mute, #5f6670); }
@media (max-width: 860px) { .wording-grid { grid-template-columns: 1fr; } }

/* My Day (review flow) */
.review-card { display: grid; grid-template-columns: minmax(0, 16rem) 1fr; gap: 1rem; background: var(--card, #fff); border: 1px solid var(--line, #e5ded0); border-radius: 12px; padding: .8rem; margin-top: .7rem; }
.rc-photos { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; align-content: start; }
.rc-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; display: block; max-width: 100%; }
.rc-photos .more-ph { display: grid; place-items: center; background: #f1efe9; border-radius: 6px; font-weight: 700; color: var(--navy, #1d2f45); text-decoration: none; aspect-ratio: 4 / 3; }
.rc-main { display: grid; gap: .25rem; align-content: start; min-width: 0; }
.visit.today { border-left-color: var(--gold, #a8802b); }
.v-time .v-day { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 640px) { .review-card { grid-template-columns: 1fr; } }
.decide { background: #fff8ec; border: 1px solid #efd9a8; border-radius: 10px; padding: .85rem .95rem; margin-bottom: .9rem; display: grid; gap: .5rem; }
.decide h3 { font-size: 1.02rem; }
.decide .refer summary { cursor: pointer; font-weight: 600; color: var(--navy, #1d2f45); margin-top: .3rem; }
.partner { border-top: 1px solid var(--line, #e5ded0); padding: .6rem 0; }
.partner:first-child { border-top: 0; }
.partner summary { cursor: pointer; }
.partner.inactive summary { opacity: .6; }
:root { --st-deciding: #b4532a; --st-referred: #2f6f8f; }
.col.c-deciding, .lcard.c-deciding { --c: var(--st-deciding); }
.col.c-referred, .lcard.c-referred { --c: var(--st-referred); }
.s-deciding { color: #b4532a; background: #fdf0e8; }
.s-referred { color: #2f6f8f; background: #e7f1f6; }

/* customer pages: the phone number is a tap-to-call link */
a.num.tel { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }

/* two-step sign-in setup */
.qr svg { width: 13rem; height: 13rem; background: #fff; padding: .5rem; border: 1px solid var(--line, #ddd); border-radius: 8px; }
.backup-codes { columns: 2; font-size: 1.25rem; line-height: 2; padding-left: 1.4rem; }
.chat.no-ticks .ticks { display: none; }  /* read receipts are an extra Luke can turn on */

/* Offers, pickup, lots, profit */
.pill.o-draft, .pill.o-withdrawn, .pill.o-expired { background: var(--shell); color: var(--mute); }
.pill.o-sent { background: color-mix(in srgb, var(--st-visit_scheduled) 11%, #fff); color: var(--st-visit_scheduled); }
.pill.o-accepted { background: color-mix(in srgb, var(--st-bought) 11%, #fff); color: var(--st-bought); }
.pill.o-countered { background: var(--warn-soft); color: var(--warn); }
.pill.o-declined { background: var(--bad-soft); color: var(--bad); }
.banner.warn ul { margin: .4rem 0; padding-left: 1.2rem; display: grid; gap: .3rem; }
.answer blockquote { margin: .4rem 0 0; padding: .6rem .9rem; border-left: 3px solid var(--line); background: var(--shell); white-space: pre-wrap; }
.bill-text { white-space: pre-wrap; overflow-wrap: anywhere; font: .9rem/1.5 ui-monospace, Menlo, Consolas, monospace; background: var(--shell); border-radius: 8px; padding: .9rem; margin: .6rem 0 0; }
.money-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.money-table th, .money-table td { padding: .45rem .5rem; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.money-table th:first-child, .money-table td:first-child { text-align: left; white-space: normal; }
.money-table thead th { font-size: .8rem; color: var(--mute); font-weight: 600; }
.money-table .neg { color: var(--bad); }
.table-scroll { overflow-x: auto; }
.funnel { display: grid; gap: .4rem; }
.funnel .bar { display: grid; grid-template-columns: 9rem 1fr 3rem; gap: .6rem; align-items: center; font-size: .95rem; }
.funnel .fill { height: 12px; border-radius: 6px; background: var(--marsh); min-width: 2px; }
.lot { border-top: 1px solid var(--line); padding: .9rem 0; display: grid; gap: .6rem; }
.lot:first-of-type { border-top: 0; }
.pickup-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.pickup-checks .check { min-height: 44px; align-items: center; font-size: 1rem; }
.walkout { width: 100%; max-width: 320px; border-radius: 8px; display: block; }
.visit-mode { max-width: 34rem; margin-inline: auto; }
.visit-mode .vm-addr { font-size: 1.15rem; font-weight: 600; margin: 0; }
.visit-mode .vm-buttons { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.visit-mode .btn { min-height: 48px; }
.visit-mode .vm-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: .4rem; }
.visit-mode .vm-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; display: block; }
.visit-mode .vm-buttons select { width: auto; }
.btn-danger { background: var(--bad); color: #fff; }
.btn-danger:hover { background: #8f1d17; }
.money-table.audit td { text-align: left; white-space: normal; vertical-align: top; }

/* Small gold labels: the darker gold the public site uses for text (5.6:1 on white; #b8892c is 3.2:1) */
.eyebrow { color: #8a6416; }
/* Customer pages: no text under 16px */
body.customer .eyebrow { font-size: max(1rem, 16px); }

/* Status labels: the text is the stage color darkened, so every label reads at 5:1 or better (the plain colors
   were as low as 2.8:1 on their tinted backgrounds). The colors themselves stay for dots, borders and the board. */
.pill.s-new { color: color-mix(in srgb, var(--st-new) 72%, #000); }
.pill.s-qualify { color: color-mix(in srgb, var(--st-qualify) 72%, #000); }
.pill.s-contacted { color: color-mix(in srgb, var(--st-contacted) 72%, #000); }
.pill.s-fit_check { color: color-mix(in srgb, var(--st-fit_check) 72%, #000); }
.pill.s-visit_scheduled { color: color-mix(in srgb, var(--st-visit_scheduled) 72%, #000); }
.pill.s-bought { color: color-mix(in srgb, var(--st-bought) 72%, #000); }
.pill.s-thanked { color: color-mix(in srgb, var(--st-thanked) 72%, #000); }
.pill.s-deciding { color: color-mix(in srgb, var(--st-deciding) 72%, #000); }
.pill.s-referred { color: color-mix(in srgb, var(--st-referred) 72%, #000); }
.pill.s-not_a_fit { color: #555852; }
.pill.o-sent { color: color-mix(in srgb, var(--st-visit_scheduled) 72%, #000); }
.pill.o-accepted { color: color-mix(in srgb, var(--st-bought) 72%, #000); }
/* Contrast fixes found by the accessibility checks (axe): each was under 4.5:1 */
.bubble .auto { color: #8a6416; }
.conv-top .when { color: #4b5563; }
.col-name { color: color-mix(in srgb, var(--c) 72%, #000); }
.table-scroll:focus-visible { outline: 2px solid var(--spartina); outline-offset: 2px; }
/* The side-by-side composer (text box + Send): Send stays its own size on phones, so the text box gets the room.
   (An older rule makes composer buttons full width under 560px; that was for the stacked layout.) */
.composer-row .send { width: auto; }
.composer-row textarea { min-width: 0; }
@media print { .dhead, .tabs, #printGuide { display: none !important; } .guide .card { break-inside: avoid; } }
/* Show / Hide inside password boxes */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 4.75rem; }
.pw-toggle { position: absolute; right: .3rem; top: 50%; transform: translateY(-50%); min-height: 44px; min-width: 44px;
  padding: 0 .7rem; border: 0; background: none; font: 600 1rem/1 var(--f-body); color: #1f4f9a; text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer; }
.pw-toggle:focus-visible { outline: 2px solid var(--spartina); outline-offset: 2px; border-radius: 6px; }

/* Keyboard users can jump past the header and menu (WCAG 2.4.1): hidden until it has focus */
.skip-link { position: absolute; left: .75rem; top: -4rem; z-index: 1000; padding: .75rem 1rem; border-radius: 8px;
  background: #1f3a2f; color: #fff; font-weight: 600; font-size: 1rem; text-decoration: underline; }
.skip-link:focus { top: .75rem; }
main:focus { outline: none; }

/* Settings: one page, grouped, instead of a long menu */
.settings-groups { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: start; }
.settings-list { list-style: none; margin: 0; padding: 0; display: grid; }
.settings-list li + li { border-top: 1px solid #eeece6; }
.settings-list a { display: grid; gap: .15rem; padding: .8rem .5rem; margin-inline: -.5rem; border-radius: 8px; text-decoration: none; color: var(--ink); min-height: 44px; }
.settings-list a:hover { background: #f4f3ee; }
.settings-list strong { font-weight: 600; font-size: 1.02rem; color: var(--navy); }
.settings-list span { color: #4b5563; font-size: .95rem; }

/* Phones: every tab in view (two rows of three, no hidden sideways scroll), and text big enough to read without zooming */
@media (max-width: 640px) {
  .tabs .in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; padding-inline: .5rem; }
  .tabs a { text-align: center; padding: .8rem .25rem; display: flex; align-items: center; justify-content: center; min-height: 44px; }
  .tabs a.on { background: #f6f4ee; border-radius: 8px 8px 0 0; }
  .tabs a.on::after { left: .6rem; right: .6rem; }
  .small, .who span, label .hint, .timeline .meta, .msg .meta, .composer .hint-row, .pipe .stat span, .col-help, .col-empty,
  .lcard .meta span, .lcard .foot, .lcard .when, .lcard .phone, .lcard .row-i, .conv-top .when, .bubble .stamp, .day-sep,
  .chip, .folder .perm, footer.foot, .settings-list span { font-size: max(.95rem, 15px); }
  th, .eyebrow { font-size: .9rem; }
  .pill { font-size: .88rem; }
}

/* Messages: brand-new emails to contact@, waiting for Luke to say who they're from (new_emails.py) */
.new-mail { border-bottom: 1px solid #ebe8e1; }
.new-mail .convs { flex: none; max-height: 40vh; overflow-y: auto; background: #fffaf0; }
.new-mail-h { font: 700 .82rem var(--f-body) !important; letter-spacing: .08em; text-transform: uppercase; color: #6b5a2e; margin: 0; padding: .7rem 1.1rem .4rem; display: flex; gap: .5rem; align-items: center; }
.new-mail-h .count { display: inline-grid; place-items: center; min-width: 1.3rem; height: 1.3rem; padding: 0 .35rem; border-radius: 999px; background: #b8892c; color: #1a1607; font-size: .78rem; }
.av.new-av { background: #f6ead0; color: #7a5a14; font-weight: 700; }
.new-mail-pane { padding: 1.25rem; overflow-y: auto; display: grid; gap: 1rem; align-content: start; }
.mail-card { background: #fff; border: 1px solid #ebe8e1; border-radius: 12px; padding: 1.2rem 1.3rem; display: grid; gap: .8rem; }
.mail-subject { font-size: 1.2rem !important; margin: 0; }
.mail-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1rem; line-height: 1.55; color: #1f2937; }
.mail-photos { display: flex; flex-wrap: wrap; gap: .5rem; }
.mail-photos img { width: 7rem; height: 7rem; object-fit: cover; border-radius: 8px; display: block; }
.mail-decide { background: #fff; border: 1px solid #e3d6b6; border-radius: 12px; padding: 1.2rem 1.3rem; display: grid; gap: .6rem; }
.mail-decide form { margin: 0; }
.mail-decide input[type=text] { max-width: 24rem; }

/* Messages header: Refresh (check email now) beside Compose */
.conv-head-acts { display: flex; gap: .5rem; align-items: center; }
.conv-head-acts form { margin: 0; }
.conv-head { flex-wrap: wrap; row-gap: .6rem; }
.conv-head-acts .compose-btn { white-space: nowrap; }

/* A lead made from an email: what's still missing, and the button that drafts a reply asking for it */
.gaps { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: .9rem 1.25rem 0;
  padding: .9rem 1.1rem; background: #fffaf0; border: 1px solid #e3d6b6; border-radius: 12px; }
.gaps-main { display: grid; gap: .35rem; min-width: 0; flex: 1 1 22rem; }
.gaps ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-size: .98rem; }
.gaps li { color: #7a5a14; font-weight: 600; }
.gaps li.have { color: #2f6b45; font-weight: 500; }
.gaps p { margin: 0; }
/* the lead page's "Add their phone and address" */
.contact-edit { margin-top: 1rem; border-top: 1px solid #ebe8e1; padding-top: .8rem; }
.contact-edit > summary { cursor: pointer; font-weight: 600; color: var(--navy); min-height: 44px; display: flex; align-items: center; }
.contact-form { display: grid; gap: .8rem; margin-top: .6rem; }
.contact-form .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.contact-form .grid3 { display: grid; grid-template-columns: 1fr 1.4fr .8fr; gap: .8rem; }
.contact-form .field { display: grid; gap: .3rem; min-width: 0; }
@media (max-width: 640px) { .contact-form .grid2, .contact-form .grid3 { grid-template-columns: 1fr; } }

/* Marketing: what's on the website */
.on-site { font-size: .8rem; font-weight: 600; color: #8a6417; }
.words-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.words-list li { display: grid; gap: .5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.words-list li:first-child { border-top: 0; padding-top: 0; }
.words-list blockquote { margin: 0; font-size: 1.05rem; }
.words-list form { margin: 0; }

/* Settings → Taking requests (cds/opening.py) */
.open-card header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.open-state { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; font-size: .95rem; color: var(--mute); }
.open-state .dot { width: .65rem; height: .65rem; border-radius: 50%; background: #b9b5aa; }
.open-state.on { color: var(--st-bought); }
.open-state.on .dot { background: var(--st-bought); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-bought) 20%, transparent); }
.open-later { margin-top: 1rem; display: grid; gap: .4rem; }
.open-later label { font-weight: 600; }
.open-later input { font: inherit; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 10px; min-height: 44px; }
.note-warn { background: #fff4e0; border: 1px solid #f0d49c; color: #6b4a07; border-radius: 10px; padding: .6rem .8rem; }

/* Austin, 10/26: on a laptop the dashboard read too close-up. 90% is what it looked right at with the browser's own
   zoom, so it's set the same way: everything scales together (text, spacing, buttons). Not on phones, where
   smaller would push buttons under a comfortable tap size. */
@media (min-width: 1024px) {
  body.dash { zoom: .9; }
  /* zoom scales a page's own 100vh too, so the messenger, which fills the window exactly, would stop 10% short */
  body.dash.messenger-page { height: calc(100vh / .9); height: calc(100dvh / .9); }
}

/* Printing Luke's offer and pickup pages (audit 10/27 #26): the page alone, black on white, the business on top */
.print-head { display: none; }
@media print {
  .dhead, .tabs, .back-link, .print-hide, form button, .btn { display: none !important; }
  body.dash { zoom: 1 !important; background: #fff !important; color: #000 !important; }
  .card { box-shadow: none !important; border-color: #999 !important; break-inside: avoid; }
  .print-head { display: block; font-size: 12pt; padding-bottom: 6pt; margin-bottom: 10pt; border-bottom: 1px solid #000; }
  tr { break-inside: avoid; page-break-inside: avoid; }
}