/* ---------- topbar ---------- */
.topbar {
  display: flex; align-items: center; gap: 20px;
  padding: 20px 34px; border-bottom: 1px solid var(--line);
  background: var(--cream); position: sticky; top: 0; z-index: 20;
}
.welcome-sm { font-size: 12.5px; color: var(--text-muted); }
.welcome-lg { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.searchbox {
  flex: 1; max-width: 460px; position: relative;
}
.searchbox input {
  width: 100%; padding: 10px 16px 10px 40px;
  border: 1px solid var(--line); border-radius: 999px;
  background: #fff; font-size: 14px; transition: all .16s var(--ease);
}
.searchbox input:focus { outline: none; border-color: var(--mauve); box-shadow: 0 0 0 3px var(--blush-pale); }
.searchbox svg { position: absolute; left: 14px; top: 11px; width: 17px; height: 17px; stroke: var(--text-faint); fill: none; stroke-width: 1.9; }

.search-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); overflow: hidden; z-index: 30; max-height: 380px; overflow-y: auto;
}
.search-item { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--line-soft); }
.search-item:last-child { border-bottom: 0; }
.search-item:hover { background: var(--blush-wash); }
.search-empty { padding: 18px 16px; color: var(--text-muted); font-size: 14px; }

/* ---------- dashboard ---------- */
.dash { padding: 28px 34px 80px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: 16px; }
.stat { padding: 20px 22px; position: relative; overflow: hidden; }
.stat-n { font-size: 30px; font-weight: 600; letter-spacing: -.025em; margin-top: 6px; }
.stat-delta { font-size: 12.5px; font-weight: 600; color: var(--green); margin-top: 4px; }
.stat-orb {
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  width: 56px; height: 56px; border-radius: 50%; background: var(--blush-pale);
  display: grid; place-items: center;
}
.stat-orb svg { width: 24px; height: 24px; stroke: var(--mauve); fill: none; stroke-width: 1.6; }

/* pipeline */
.pipe { display: flex; gap: 4px; margin-top: 4px; }
.pipe-seg {
  flex: 1; padding: 15px 10px; text-align: center;
  background: var(--blush-pale); position: relative;
  transition: all .16s var(--ease);
}
.pipe-seg:first-child { border-radius: var(--r) 0 0 var(--r); }
.pipe-seg:last-child  { border-radius: 0 var(--r) var(--r) 0; }
.pipe-seg:hover { transform: translateY(-2px); }
.pipe-seg:nth-child(2) { background: #F2E2E5; }
.pipe-seg:nth-child(3) { background: #EBD6DA; }
.pipe-seg:nth-child(4) { background: #E2C7CE; }
.pipe-seg:nth-child(5) { background: #D6B4BE; }
.pipe-seg:nth-child(6) { background: var(--mauve); }
.pipe-seg:nth-child(6) .pipe-label, .pipe-seg:nth-child(6) .pipe-n { color: #fff; }
.pipe-label { font-size: 11.5px; font-weight: 600; color: var(--mauve-dark); }
.pipe-n { font-size: 21px; font-weight: 600; margin-top: 3px; color: var(--ink); }

/* ---------- checklist modal ---------- */
.scrim {
  position: fixed; inset: 0; background: rgba(23,21,26,.34);
  backdrop-filter: blur(3px); z-index: 60;
  display: grid; place-items: center; padding: 24px;
  animation: fade .18s var(--ease);
}
@keyframes fade { from { opacity: 0 } }
.modal {
  background: #fff; border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  width: min(460px, 100%); max-height: 86vh; overflow-y: auto;
  padding: 34px 34px 26px; position: relative;
  animation: pop .22s var(--ease);
}
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.98) } }
.modal-x {
  position: absolute; right: 18px; top: 18px; width: 30px; height: 30px;
  border-radius: 50%; display: grid; place-items: center; color: var(--text-faint);
}
.modal-x:hover { background: var(--cream-deep); color: var(--text); }
.modal-greet { font-family: var(--font-display); font-style: italic; font-size: 31px; text-align: center; }
.modal-sub {
  text-align: center; font-size: 11.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mauve); margin: 8px 0 24px;
}
.check-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 2px; }
.check-row + .check-row { border-top: 1px solid var(--line-soft); }
.cbox {
  width: 20px; height: 20px; flex: none; margin-top: 1px; border-radius: 6px;
  border: 1.8px solid var(--line); background: #fff;
  display: grid; place-items: center; transition: all .16s var(--ease);
}
.cbox:hover { border-color: var(--mauve); }
.cbox.on { background: var(--mauve); border-color: var(--mauve); }
.cbox svg { width: 12px; height: 12px; stroke: #fff; fill: none; stroke-width: 3; opacity: 0; }
.cbox.on svg { opacity: 1; }
.check-text { font-size: 14.5px; line-height: 1.45; }
.check-row.done .check-text { color: var(--text-faint); text-decoration: line-through; }
.check-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.check-sub.late { color: #B4574F; font-weight: 600; }
.modal-foot { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.link-btn { font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.link-btn:hover { color: var(--mauve-deep); }

/* checklist re-open button */
.checklist-fab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; border-radius: 999px;
  background: var(--blush-pale); color: var(--mauve-dark);
  font-size: 13px; font-weight: 600;
}
.checklist-fab:hover { background: var(--blush); }
.checklist-fab svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ---------- tables ---------- */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-muted);
  padding: 0 14px 11px; border-bottom: 1px solid var(--line);
}
.tbl td { padding: 14px; border-bottom: 1px solid var(--line-soft); font-size: 14px; vertical-align: middle; }
.tbl tbody tr { cursor: pointer; transition: background .13s var(--ease); }
.tbl tbody tr:hover { background: var(--blush-wash); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl-wrap { overflow-x: auto; }

.who { display: flex; align-items: center; gap: 11px; }
.av {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--blush), var(--mauve));
  display: grid; place-items: center; color: #fff;
  font-family: var(--font-display); font-style: italic; font-size: 14px;
}
.av.lg { width: 62px; height: 62px; font-size: 24px; }

/* ---------- tabs / filters ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.tab {
  padding: 10px 18px; font-size: 14px; font-weight: 600; color: var(--text-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all .14s var(--ease);
}
.tab:hover { color: var(--mauve-deep); }
.tab.on { color: var(--mauve-dark); border-bottom-color: var(--mauve); }

.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.chip {
  padding: 7px 15px; border-radius: 999px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line); color: var(--text-muted); background: #fff;
  transition: all .14s var(--ease);
}
.chip:hover { border-color: var(--mauve); color: var(--mauve-deep); }
.chip.on { background: var(--mauve); border-color: var(--mauve); color: #fff; }

/* ---------- contact detail ---------- */
.detail-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 20px; align-items: start; }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 18px 24px; }
.kv-k { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); }
.kv-v { font-size: 14.5px; font-weight: 500; margin-top: 3px; }

.timeline { position: relative; padding-left: 26px; }
.timeline::before { content:''; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.tl-item { position: relative; padding: 0 0 20px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot {
  position: absolute; left: -26px; top: 4px; width: 13px; height: 13px;
  border-radius: 50%; background: #fff; border: 3px solid var(--blush);
}
.tl-item.first .tl-dot { border-color: var(--mauve); background: var(--mauve); }
.tl-when { font-size: 11.5px; color: var(--text-faint); }
.tl-text { font-size: 14px; margin-top: 2px; line-height: 1.5; }
.tl-kind {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--mauve-deep); margin-right: 7px;
}

.mini { padding: 20px 22px; }
.mini h3 { font-size: 14px; margin-bottom: 14px; }
.mini-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; }
.mini-row:last-child { border-bottom: 0; }

/* ---------- referral card ---------- */
.ref-arrow { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.ref-arrow.out { background: var(--blush-pale); }
.ref-arrow.in  { background: var(--green-pale); }
.ref-arrow svg { width: 13px; height: 13px; stroke-width: 2.4; fill: none; }
.ref-arrow.out svg { stroke: var(--mauve-deep); }
.ref-arrow.in  svg { stroke: #3F6A50; }

@media (max-width: 980px) { .detail-grid { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .dash, .topbar { padding-left: 18px; padding-right: 18px; }
  .dash { padding-bottom: 96px; }
  .topbar { flex-wrap: wrap; gap: 12px; }
  .searchbox { max-width: none; order: 3; width: 100%; }
}

/* ---------- form fields ---------- */
.fld {
  width: 100%; margin-top: 5px; padding: 10px 13px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: #fff; font-size: 14px; font-family: inherit;
  transition: all .15s var(--ease);
}
.fld:focus { outline: none; border-color: var(--mauve); box-shadow: 0 0 0 3px var(--blush-pale); }
textarea.fld { resize: vertical; line-height: 1.5; }
label > .kv-k { display: block; }

.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 13px 22px;
  border-radius: 999px; font-size: 14px; font-weight: 500;
  box-shadow: var(--shadow-lg); z-index: 80;
  animation: rise .22s var(--ease);
}
@keyframes rise { from { opacity: 0; transform: translate(-50%, 10px) } }

.paste-row { display: flex; gap: 9px; align-items: stretch; margin-bottom: 4px; }
.paste-row .fld { flex: 1; }
.paste-row .btn { white-space: nowrap; }
.paste-note {
  font-size: 12.5px; line-height: 1.5; padding: 10px 13px;
  border-radius: var(--r); margin: 10px 0 4px;
}
.paste-note.ok   { background: var(--green-pale); color: #3F6A50; }
.paste-note.warn { background: var(--amber-pale); color: #976B2E; }
.paste-note.busy { background: var(--blush-pale); color: var(--mauve-dark); }

/* ---------- dashboard layout ---------- */
.dash-top { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; }
.dash-top-right { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dash-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; margin-top: 16px; align-items: start; }

.stat-tall { display: flex; flex-direction: column; }
.stat-tall .stat-n { font-size: 34px; }
.stat-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }

.spark { width: 100%; height: 78px; margin-top: auto; padding-top: 14px; overflow: visible; }
.spark-axis {
  display: flex; justify-content: space-between;
  font-size: 10.5px; font-weight: 600; letter-spacing: .09em;
  color: var(--text-faint); padding: 8px 6px 0;
}

/* chevron pipeline, as in the mockup */
.pipe { display: flex; gap: 3px; }
.pipe-seg {
  flex: 1; padding: 15px 10px 15px 22px; text-align: center;
  position: relative; display: block;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
  transition: filter .16s var(--ease), transform .16s var(--ease);
}
.pipe-seg:first-child {
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
  padding-left: 12px; border-radius: var(--r) 0 0 var(--r);
}
.pipe-seg:last-child {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 14px 50%);
  border-radius: 0 var(--r) var(--r) 0;
}
.pipe-seg:hover { filter: brightness(.97); transform: translateY(-2px); }

.ref-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.ref-mini-n { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.ref-mini-k { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-top: 2px; }

.embed-box {
  display: flex; align-items: center; gap: 12px; margin-top: 16px;
  padding: 12px 14px; background: var(--cream-deep);
  border-radius: var(--r); overflow: hidden;
}
.embed-box code { font-size: 11.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink-soft); overflow-x: auto; white-space: nowrap; flex: 1; }

/* ---------- lead capture ---------- */
.ig-link { color: var(--mauve-deep); font-weight: 500; }
.ig-link:hover { text-decoration: underline; }


.setup-steps {
  margin: 0; padding-left: 20px; max-width: 60ch;
  font-size: 13.5px; line-height: 1.7; color: var(--text);
}
.setup-steps li { margin-bottom: 4px; }
.setup-steps li::marker { color: var(--mauve); font-weight: 600; }

.intake-log { margin-top: 20px; border-top: 1px solid var(--line-soft); }
.intake-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line-soft);
  font-size: 13.5px; color: var(--text);
}
.intake-row:last-child { border-bottom: 0; }
.intake-row .pill { flex: none; }
.intake-row .stamp { flex: none; }

/* ---------- notification bell ---------- */
.bell-wrap { position: relative; flex: none; }
.bell-btn {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; color: var(--text-muted);
  transition: all .15s var(--ease);
}
.bell-btn:hover { background: var(--blush-pale); color: var(--mauve-dark); }
.bell-btn svg { width: 20px; height: 20px; stroke-width: 1.7; }
.bell-count {
  position: absolute; top: 2px; right: 2px; min-width: 17px; height: 17px;
  border-radius: 999px; background: var(--mauve); color: #fff;
  font-size: 10.5px; font-weight: 700; display: grid; place-items: center;
  padding: 0 4px; border: 2px solid var(--cream);
}
.bell-panel {
  position: absolute; right: 0; top: calc(100% + 8px); width: min(330px, 86vw);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); z-index: 50; overflow: hidden;
}
.bell-head { padding: 14px 18px 10px; border-bottom: 1px solid var(--line-soft); }
.bell-item { display: flex; gap: 11px; padding: 12px 18px; border-bottom: 1px solid var(--line-soft); }
.bell-item:last-child { border-bottom: 0; }
.bell-item:hover { background: var(--blush-wash); }
.bell-item.unread { background: var(--blush-wash); }
.bell-kind { width: 8px; height: 8px; border-radius: 50%; background: var(--mauve); margin-top: 6px; flex: none; }
.bell-item:not(.unread) .bell-kind { background: var(--line); }

/* ---------- mobile: sidebar drawer ---------- */
.menu-btn { display: none; }
.nav-scrim { display: none; }

@media (max-width: 860px) {
  .dash-top, .dash-top-right, .dash-grid { grid-template-columns: 1fr; }
  /* Keep the chevrons on mobile — the shape is what makes it read as a
     pipeline. Three per row, smaller notch, each row flowing left to right. */
  .pipe { flex-wrap: wrap; gap: 3px 2px; }
  .pipe-seg {
    flex: 1 1 30%; padding: 12px 6px 12px 16px;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%);
    border-radius: 0;
  }
  .pipe-seg:nth-child(3n+1) {
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
    padding-left: 8px; border-radius: var(--r) 0 0 var(--r);
  }
  .pipe-seg:last-child {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10px 50%);
    border-radius: 0 var(--r) var(--r) 0;
  }
  .pipe-label { font-size: 10px; line-height: 1.25; }
  .pipe-n { font-size: 18px; margin-top: 2px; }

  .menu-btn {
    display: grid; place-items: center; width: 40px; height: 40px;
    border-radius: var(--r); color: var(--ink); flex: none;
  }
  .menu-btn svg { width: 22px; height: 22px; stroke-width: 2; }

  /* Off-canvas sidebar — same nav, slid in from the left. */
  .nav {
    position: fixed; inset: 0 auto 0 0; height: 100dvh; width: 262px;
    z-index: 70; transform: translateX(-100%);
    transition: transform .26s var(--ease);
    flex-direction: column; padding: 24px 16px 20px;
    overflow-y: auto; gap: 24px;
  }
  .nav.open { transform: translateX(0); box-shadow: 0 0 60px rgba(0,0,0,.4); }
  .brand, .nav-foot { display: revert; }
  .nav-links { flex-direction: column; width: auto; gap: 3px; }
  .nav-link { flex-direction: row; gap: 12px; flex: none; padding: 12px 14px; font-size: 15px; border-radius: var(--r); }
  .nav-link.active { background: var(--mauve); color: #fff; }
  .nav-badge { position: static; }

  .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 65;
    background: rgba(23,21,26,.44); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity .26s var(--ease);
  }
  .nav-scrim.open { opacity: 1; pointer-events: auto; }

  .shell { grid-template-columns: 1fr; }
  .dash { padding: 20px 16px 40px; }
  .topbar { padding: 14px 16px; gap: 10px; flex-wrap: nowrap; }
  .searchbox { order: 0; width: auto; }
  .searchbox input { padding: 9px 14px 9px 38px; font-size: 14px; }
  .welcome-lg { font-size: 17px; }
  .welcome-sm { display: none; }
  .topbar .checklist-fab span { display: none; }
  .stat-tall .stat-n { font-size: 29px; }
}

/* ---------- horizontal overflow guards ----------
   Grid and flex children default to min-width:auto, so any wide child (a table,
   a long address, a sparkline) pushes the whole page wider and the body scrolls
   sideways. Wide content must scroll inside its own box, never the page. */
html, body { max-width: 100%; overflow-x: hidden; }
.shell > * { min-width: 0; }
.dash-top > *, .dash-top-right > *, .dash-grid > *, .detail-grid > *, .stat-grid > * { min-width: 0; }
.tbl-wrap { max-width: 100%; }
.mini-row > .grow, .inbox-row > .grow, .search-item > .grow { min-width: 0; }
.mini-row > .grow > div, .doc-name, .home-addr {
  overflow: hidden; text-overflow: ellipsis;
}
.stat { overflow: hidden; }

.heart-mark { display: inline-block; vertical-align: -3px; margin-left: 3px; }
.modal-greet .heart-mark { vertical-align: -2px; margin-left: 6px; }

/* ---------- mobile dashboard: 2x2 stats ---------- */
@media (max-width: 860px) {
  .dash-top { gap: 12px; }
  .dash-top-right { grid-template-columns: 1fr 1fr; gap: 12px; }
  .dash-grid { gap: 12px; margin-top: 12px; }

  .stat { padding: 14px 15px 15px; }
  .stat .eyebrow { font-size: 9.5px; letter-spacing: .07em; line-height: 1.35; padding-right: 34px; }
  .stat-n { font-size: 25px; margin-top: 7px; }
  .stat-delta { font-size: 11px; margin-top: 3px; }
  .stat-sub { font-size: 11px; }

  /* Orb tucks into the corner instead of taking a vertical-centre column. */
  .stat-orb {
    width: 30px; height: 30px; top: 13px; right: 13px; transform: none;
  }
  .stat-orb svg { width: 15px; height: 15px; }

  /* The YTD card keeps the full width — it carries the chart. */
  .stat-tall { grid-column: 1 / -1; }
  .stat-tall .stat-n { font-size: 30px; }
  .stat-tall .eyebrow { padding-right: 0; }
  .spark { height: 62px; padding-top: 10px; }
  .spark-axis { font-size: 9.5px; padding-top: 6px; }

  /* Topbar: give the search the leftover room, keep the greeting short. */
  .topbar { gap: 8px; padding: 12px 14px; }
  .welcome-lg { font-size: 16px; white-space: nowrap; }
  .welcome-lg .heart-mark { width: 17px; height: 17px; }
  .searchbox { min-width: 0; }
  .searchbox input { padding-left: 34px; }
  .searchbox svg { left: 11px; }
  .bell-btn, .menu-btn { width: 36px; height: 36px; }
  .topbar .checklist-fab { padding: 8px 11px; }
}

@media (max-width: 400px) {
  /* Below this the greeting and the search fight for the same row. */
  .topbar > div:first-child { display: none; }
}

/* ---------- calendar ---------- */
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.cal-month { font-size: 19px; font-weight: 600; letter-spacing: -.02em; margin-left: 4px; }
.cal-arrow {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  color: var(--text-muted); border: 1px solid var(--line); background: #fff;
  transition: all .15s var(--ease);
}
.cal-arrow:hover { border-color: var(--mauve); color: var(--mauve-deep); }
.cal-arrow svg { width: 15px; height: 15px; }
.cal-arrow.flip svg { transform: rotate(180deg); }

.cal-layout { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; align-items: start; }

/* grid-auto-rows pins every row, including the one whose leading cells are
   empty placeholders — relying on item heights let that row size itself off
   the column width instead. */
.cal-grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: 46px; gap: 3px; width: 100%;
}
.cal-dow { grid-auto-rows: auto; }
.cal-dow {
  margin-bottom: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  color: var(--text-faint); text-align: center;
}
/* Fixed height, not aspect-ratio. aspect-ratio feeds grid track sizing and
   max-height does not clamp that contribution, so a row of empty leading cells
   sized itself off the column width and rendered at double height. */
.cal-cell {
  height: 46px; border-radius: var(--r-sm);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-size: 13px; color: var(--text); transition: all .14s var(--ease);
  position: relative;
}
.cal-cell:not(.empty):hover { background: var(--blush-wash); }
.cal-cell.empty { pointer-events: none; }
.cal-cell.today { background: var(--blush-pale); font-weight: 700; color: var(--mauve-dark); }
.cal-cell.sel { outline: 2px solid var(--mauve); outline-offset: -2px; }
.cal-n { line-height: 1; }
.cal-dots { display: flex; gap: 2.5px; height: 5px; align-items: center; }
.cal-dot, i.cal-dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--mauve); display: inline-block;
}
.cal-dot.timed { background: var(--mauve-dark); }
.cal-dot.late  { background: #B4574F; }

.cal-legend {
  display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-size: 11.5px; color: var(--text-muted);
}
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }

.agenda { display: flex; flex-direction: column; }
.agenda-row { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.agenda-row:last-child { border-bottom: 0; }
.agenda-time {
  width: 62px; flex: none; font-size: 11.5px; font-weight: 600;
  color: var(--text-muted); padding-top: 3px; text-align: right;
}
.agenda-body { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 0; }
.agenda-row.done .agenda-body { opacity: .5; }

.add-task { display: flex; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.add-task .fld { margin-top: 0; }

@media (max-width: 980px) { .cal-layout { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .cal-cell { font-size: 12px; height: 40px; }
  .cal-grid { grid-auto-rows: 40px; }
  .cal-dow { grid-auto-rows: auto; }
  .cal-month { font-size: 17px; }
  .agenda-time { width: 54px; }
  .dash-cal { padding: 16px 14px 12px !important; }
}

/* ---------- tables become card rows on small screens ----------
   A six-column table inside a 390px viewport either wraps every name onto
   three lines or hides the last column behind a scrollbar. Neither is usable,
   so the row restructures instead. */
@media (max-width: 700px) {
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
  .tbl thead { display: none; }
  .tbl-wrap { overflow-x: visible; }

  .tbl tr {
    padding: 13px 14px; border-bottom: 1px solid var(--line-soft);
    display: flex; flex-wrap: wrap; align-items: center; gap: 7px 10px;
  }
  .tbl tr:last-child { border-bottom: 0; }
  .tbl td { padding: 0; border: 0; width: auto; font-size: 13px; }

  /* name takes the first line on its own */
  .tbl td:first-child { width: 100%; }
  .tbl td:first-child .who { gap: 10px; }
  .tbl td:first-child .who > div > div:first-child { font-size: 14.5px; }

  /* everything else sits on one wrapped meta line */
  .tbl td:not(:first-child) { color: var(--text-muted); }
  .tbl td:not(:first-child):empty { display: none; }
  .tbl td .pill { font-size: 11.5px; padding: 4px 10px; }
}

.stop-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.stop-row .fld { flex: 1; min-width: 0; }
@media (max-width: 640px) {
  .stop-row { flex-wrap: wrap; }
  .stop-row .fld[type="time"] { width: 110px !important; }
}

.check-inline { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; margin-top: 2px; }
.check-inline input { width: 17px; height: 17px; accent-color: var(--mauve); }
select.fld { appearance: none; background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23857A81' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
  /* without an explicit size the SVG scales to fill the whole field */
  background-size: 11px 7px;
  padding-right: 34px; }

.quick-add { flex: none; }
@media (max-width: 860px) { .quick-add span { display: none; } .quick-add { padding: 8px 11px; } }

/* ---------- warmth ---------- */
.warm-list { display: flex; flex-direction: column; margin-top: 14px; }
.warm-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line-soft);
  cursor: pointer; transition: background .13s var(--ease);
}
.warm-row:last-child { border-bottom: 0; }
.warm-row:hover { background: var(--blush-wash); }

.warm-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.warm-back { background: var(--mauve-dark); box-shadow: 0 0 0 4px var(--blush-pale); }
.warm-hot  { background: var(--mauve); }
.warm-warm { background: var(--blush); }
.warm-quiet{ background: var(--line); }

.warm-reason { font-size: 12.5px; margin-top: 2px; }
.warm-back-text  { color: var(--mauve-dark); font-weight: 600; }
.warm-hot-text   { color: var(--mauve-deep); }
.warm-warm-text  { color: var(--text-muted); }
.warm-quiet-text { color: var(--text-faint); }

/* ---------- log an interaction ---------- */
.log-form { padding: 14px 15px; background: var(--cream-deep); border-radius: var(--r); }
.log-kinds { display: flex; gap: 6px; flex-wrap: wrap; }
.log-kind input { position: absolute; opacity: 0; pointer-events: none; }
.log-kind span {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--text-muted);
  background: #fff; border: 1px solid var(--line); cursor: pointer;
  transition: all .14s var(--ease);
}
.log-kind span:hover { border-color: var(--mauve); color: var(--mauve-deep); }
.log-kind input:checked + span { background: var(--mauve); border-color: var(--mauve); color: #fff; }
.log-kind input:focus-visible + span { outline: 2px solid var(--mauve); outline-offset: 2px; }

/* ---------------- buyer & seller profiles ---------------- */
/* Tap targets sized for a phone held in one hand during a call. */

.prof { display: flex; flex-direction: column; gap: 12px; }
.prof .prof-block { display: flex; flex-direction: column; margin-top: 4px; }
.prof-rule { height: 1px; background: var(--line); margin: 8px 0 4px; }

.pill-pick { display: flex; flex-wrap: wrap; gap: 7px; }

.pick {
  font: inherit; font-size: 13px; line-height: 1;
  padding: 9px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card);
  color: var(--text); cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.pick:hover { border-color: var(--mauve); }
.pick.on { background: var(--mauve); border-color: var(--mauve); color: #fff; }

/* Must-have and nice-to-have have to be tellable apart at a glance, and not
   only by colour — the filled pill is a must, the outlined one is a maybe. */
.pick.feat.must {
  background: var(--mauve); border-color: var(--mauve); color: #fff; font-weight: 600;
}
.pick.feat.must::before { content: '✓ '; }
.pick.feat.nice {
  background: transparent; border-color: var(--mauve);
  color: var(--mauve); border-style: dashed;
}
.pick.feat.nice::before { content: '~ '; }

.feat-group { margin-bottom: 12px; }
.feat-group-name {
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 7px;
}

/* media */
.media-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
}
.media-item { position: relative; aspect-ratio: 4 / 3; border-radius: 9px; overflow: hidden; background: var(--cream-deep); }
.media-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-vid {
  width: 100%; height: 100%; display: grid; place-items: center; padding: 8px;
  font-size: 11px; text-align: center; color: var(--text-muted); word-break: break-word;
}
.media-x {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px;
  border: none; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff;
  font-size: 15px; line-height: 1; cursor: pointer;
}

@media (max-width: 640px) {
  .pick { padding: 10px 14px; font-size: 13.5px; }
  .media-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
}

/* The photo a pasted link turned up. Shown because the status line claims it
   exists, and a hidden input is not evidence. */
.pulled { display: flex; gap: 12px; align-items: center; margin-top: 10px; }
.pulled img {
  width: 108px; height: 76px; object-fit: cover; border-radius: 8px;
  background: var(--cream-deep); flex: none;
}
.pulled.broken img { display: none; }
.pulled.broken .pulled-src::after { content: ' — but it will not load'; }
.pulled-meta { min-width: 0; }
.pulled-src { font-size: 12.5px; font-weight: 600; }

/* What a client said about one home, on her contact page. */
.home-notes { padding: 2px 0 14px 40px; display: flex; flex-direction: column; gap: 6px; }
.hn { display: flex; gap: 8px; align-items: baseline; font-size: 13px; line-height: 1.5; }
.hn-who { font-weight: 600; flex: none; }
.hn.from-them .hn-who { color: var(--mauve-dark); }
.hn.from-you  .hn-who { color: var(--text-faint); }
.hn-body { flex: 1 1 auto; min-width: 0; }
.hn-reply { display: flex; gap: 7px; margin-top: 4px; }
.hn-reply .fld { margin-top: 0; font-size: 13px; padding: 7px 10px; }

/* Calendar subscription steps. */
.feed-steps { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.feed-steps li { font-size: 13.5px; line-height: 1.55; color: var(--text-muted); }
.feed-steps strong { color: var(--text); font-weight: 600; }

/* Keep account controls visible in short windows; only the menu scrolls. */
.nav { min-height: 0; }
.nav > .brand, .nav > .nav-foot { flex-shrink: 0; }
.nav > .nav-links { min-height: 0; overflow-y: auto; flex: 1; }
.nav-logout { width: 100%; margin-top: 10px; text-align: left; }

/* Sidebar stays anchored while the document scrolls. */
@media (min-width: 861px) {
  .shell > .nav {
    position: fixed; inset: 0 auto 0 0;
    width: var(--nav-w); height: 100dvh; z-index: 30;
    overflow: hidden;
  }
  .shell > .nav + div { grid-column: 2; }
}
.nav > .nav-links { overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--text-faint) transparent; }
.nav-logout { padding: 9px 12px; min-height: 38px; gap: 10px; font-size: 13px; white-space: nowrap; }
.nav-logout svg { width: 18px; height: 18px; flex: 0 0 18px; }
.nav-logout span { white-space: nowrap; }

.showing-homes { display: grid; gap: 16px; margin-top: 20px; }
.showing-home { display: grid; grid-template-columns: minmax(180px, 30%) 1fr; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.showing-home-photo { min-height: 210px; background: var(--cream-deep); }
.showing-home-photo img { width: 100%; height: 100%; min-height: 210px; object-fit: cover; display: block; }
.showing-home-photo > span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 100%; min-height: 210px; color: var(--text-faint); font-size: 12px; }
.showing-home-photo svg { width: 32px; height: 32px; }
.showing-home-body { padding: 20px; min-width: 0; }
.showing-house-notes { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.showing-house-notes summary { cursor: pointer; font-weight: 600; font-size: 13px; }
@media (max-width: 640px) { .showing-home { grid-template-columns: 1fr; } .showing-home-photo img { height: 210px; } }

/* Fit the whole conversation below the header; only its messages scroll. */
.shell > div:has(.dash > .msg-page) {
  height: 100dvh; min-height: 0; display: flex; flex-direction: column;
}
.shell > div:has(.dash > .msg-page) > .topbar { flex-shrink: 0; }
.dash:has(> .msg-page) {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  padding-bottom: max(16px, env(safe-area-inset-bottom)); overflow: hidden;
}
.dash:has(> .msg-page) > :not(.msg-page) { flex-shrink: 0; }
.dash:has(> .msg-page) > a { align-self: flex-start; }
.dash > .msg-page { flex: 1; height: auto; min-height: 0; }
.dash > .msg-page > .thread { flex: 1; min-height: 0; overflow-y: auto; }
.dash > .msg-page > .composer { flex-shrink: 0; }

.library-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr)); gap:20px; }
.library-home { overflow:hidden; }
.library-home[hidden] { display:none; }
.library-photo { height:210px; background:var(--cream-deep); }
.library-photo img { width:100%; height:100%; object-fit:cover; }
.library-photo > span { display:flex; height:100%; align-items:center; justify-content:center; gap:8px; color:var(--text-faint); font-size:13px; }
.library-photo svg { width:24px; height:24px; }
.library-body { padding:20px; }
.library-body h3 { font-size:17px; }

/* 3 across on desktop, 2 on an iPad, 1 on a phone (Tovah, 2026-09-20) */
.sent-homes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 1180px) { .sent-homes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .sent-homes { grid-template-columns: 1fr; } }
.sent-home { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; scroll-margin-top: 24px; background: #fff; display: flex; flex-direction: column; }
.sh-row { display: flex; flex-direction: column; gap: 12px; padding: 12px 12px 14px; }
.sh-photo { width: 100%; height: 150px; border-radius: 12px; background: var(--cream-deep); overflow: hidden; display: grid; place-items: center; color: var(--text-faint); }
.sh-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-photo svg { width: 26px; height: 26px; }
.sh-main { flex: 1; min-width: 0; padding: 0 2px; }
.sh-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sh-top h3 { font-size: 16px; line-height: 1.3; margin: 0; }
.sh-city { font-size: 13px; margin-top: 2px; }
.sh-price { margin-top: 8px; font-size: 17px; font-weight: 600; }
.sh-specs { font-size: 13px; font-weight: 500; color: var(--text-muted); }
.sh-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.sh-link { text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.sh-remove { color: var(--text-faint); }
.sh-notes { border-top: 1px solid var(--line-soft); background: var(--blush-wash); }
.sh-notes > summary { cursor: pointer; list-style: none; padding: 10px 14px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.sh-notes > summary::-webkit-details-marker { display: none; }
.sh-notes > summary::before { content: ''; width: 7px; height: 7px; border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted); transform: rotate(-45deg); transition: transform .15s var(--ease); margin-right: 2px; }
.sh-notes[open] > summary::before { transform: rotate(45deg); }
.sh-notes > .sent-home-notes, .sh-notes > .sent-home-reply { margin: 0 14px 14px; }
.sent-home-notes { display: flex; flex-direction: column; gap: 10px; max-height: 320px; overflow-y: auto; }
.sent-home-reply { display: flex; gap: 10px; align-items: flex-end; }
.sent-home-reply textarea { flex: 1; min-width: 0; margin: 0; resize: vertical; background: #fff; }
.sent-home-reply button { flex-shrink: 0; }

@media (max-width:640px) { .sent-home-overview { grid-template-columns:1fr; } .sent-home-photo img { height:210px; } .sent-home-photo { min-height:210px; } .sent-home-reply { flex-direction:column; align-items:stretch; } .sent-note { max-width:100%; } }

/* ---------- documents (0020) ---------- */
.doc-line { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.doc-line:first-of-type { border-top: 0; }
.doc-line.due { background: var(--amber-pale); margin: 0 -10px; padding: 10px; border-radius: var(--r-sm); border-top: 0; }
.doc-line.flash { animation: docflash 1.6s var(--ease); }
@keyframes docflash { 0% { background: var(--blush); } 100% { background: transparent; } }

/* ---------- client app preview (settings) ---------- */
.app-tile { width: 72px; height: 72px; border-radius: 17px; overflow: hidden; margin: 0 auto; box-shadow: var(--shadow); background: #fff; }
.app-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.app-tile-name { font-size: 11.5px; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- profile tabs ---------- */
.profile-tabs { overflow-x: auto; scrollbar-width: none; margin-bottom: 18px; }
.profile-tabs::-webkit-scrollbar { display: none; }
.profile-tabs .tab { white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.tab-n { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--blush-pale); color: var(--mauve-dark); }
.tab.on .tab-n { background: var(--mauve); color: #fff; }


/* ---------- documents table ---------- */
.doc-tbl tbody tr { cursor: default; }
.doc-tbl tbody tr:hover { background: transparent; }
.doc-tbl input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--mauve); }
.doc-tbl .link-btn { text-transform: none; letter-spacing: 0; font-size: 13px; }


/* ---------- seller profile in cards ---------- */
.prof-seller { gap: 18px; }
.prof-card { padding: 24px 26px; display: flex; flex-direction: column; gap: 12px; }
.prof-private { border: 1px solid var(--blush); background: var(--blush-wash); }
.pill-pick a.pick { text-decoration: none; }


/* ---------- stage picker (a pill that is a select) ---------- */
.stage-pick { appearance: none; -webkit-appearance: none; border: 0; font: inherit; font-weight: 600; cursor: pointer;
  padding-right: 24px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E4553' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 12px; }
.stage-pick:focus { outline: 2px solid var(--mauve); outline-offset: 2px; }


/* ---------- pipeline board ---------- */
.kanban { display: flex; gap: 14px; overflow-x: auto; padding: 4px 0 12px; align-items: flex-start; }
/* A column per stage, numbered, with an accent that deepens toward Closed and a
   chevron in every gap — the board reads left to right at a glance. */
.kcol {
  flex: 1 1 0; min-width: 220px; max-width: 320px; position: relative;
  background: var(--cream-deep); border-radius: var(--r-lg); padding: 10px; min-height: 240px;
  border-top: 3px solid var(--mauve);
  border-top-color: color-mix(in srgb, var(--mauve) calc(26% + var(--k, 0) * 14%), var(--blush-pale));
}
.kcol + .kcol::before {
  content: ''; position: absolute; left: -11px; top: 22px; width: 7px; height: 7px;
  border-right: 2px solid var(--text-faint); border-top: 2px solid var(--text-faint); transform: rotate(45deg);
}
.kcol.over { outline: 2px dashed var(--mauve); outline-offset: -2px; }
.kcol-head { display: flex; align-items: center; gap: 8px; padding: 6px 6px 10px; font-weight: 600; font-size: 13.5px; }
.kcol-head .kname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kstep {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: #fff; color: var(--mauve-dark); font-size: 11px; font-weight: 700; box-shadow: var(--shadow-sm);
}
.kcol-body { display: flex; flex-direction: column; gap: 8px; }
.kcard { background: #fff; border-radius: var(--r); padding: 12px; box-shadow: var(--shadow-sm); cursor: grab; }
.kcard:active { cursor: grabbing; }
.kcard.dragging { opacity: .45; }
.kcard-name { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kcard-next { font-size: 12.5px; color: var(--text-muted); margin-top: 8px; line-height: 1.4; }
.kcard-foot { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line-soft); }
.kmove {
  font: inherit; font-size: 12px; font-weight: 600; color: var(--text-muted); cursor: pointer;
  border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 4px 10px;
  display: inline-flex; align-items: center; gap: 5px; min-width: 0; line-height: 1.3;
}
.kmove.next { color: var(--mauve-dark); border-color: var(--blush); background: var(--blush-wash); }
.kmove.next > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kmove:hover { border-color: var(--mauve); color: var(--mauve-deep); }
.kcol-empty { color: var(--text-faint); text-align: center; padding: 24px 8px; font-size: 13px; border: 1.5px dashed var(--line); border-radius: var(--r); }


/* ---------- documents table: edit in place ---------- */
.doc-name { width: 100%; max-width: 420px; font: inherit; font-weight: 600; color: var(--text); background: transparent; border: 1px solid transparent; border-radius: var(--r-sm); padding: 6px 8px; margin-left: -8px; }
.doc-name:hover { border-color: var(--line); }
.doc-name:focus { outline: none; border-color: var(--mauve); background: #fff; }
.doc-applies { font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--text); }


/* ---------- buyer profile in cards ---------- */
.prof-buyer { gap: 18px; }
.prof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.prof-card h2 { margin-bottom: 2px; }
@media (max-width: 860px) { .prof-grid { grid-template-columns: 1fr; } }

/* ---------- team ---------- */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.team-card { text-decoration: none; color: inherit; display: block; transition: box-shadow .15s var(--ease); }
.team-card:hover { box-shadow: var(--shadow); }
.team-card.on { outline: 2px solid var(--mauve); outline-offset: -2px; }
.kv-v.warn { color: #976B2E; }
.stat.stat-warn .stat-n { color: #976B2E; }
.team-act { padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.team-act:last-child { border-bottom: 0; }

/* ---------- list filters ---------- */
.list-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.list-filters .fld { margin-top: 0; width: auto; }
.list-filters #list-q { flex: 1 1 200px; max-width: 320px; }
.list-filters .list-filter { flex: 0 1 160px; }

/* ---------- mobile pass (Tovah, 2026-09-20: "optimize the entire app for mobile") ----------
   Everything below 640px is a phone. Rows wrap, actions go full-width, modals
   become bottom sheets, and every field is 16px so iOS stops zooming in. */
.btn > svg, .quick-add > svg { width: 15px; height: 15px; flex: none; }
.prof .row { flex-wrap: wrap; }

@media (max-width: 860px) {
  .topbar-import { display: none; }
  .topbar { padding-top: max(12px, env(safe-area-inset-top)); }
  .nav { padding-top: calc(24px + env(safe-area-inset-top)); }
  .dash { padding-bottom: calc(48px + env(safe-area-inset-bottom)); }
  .fld, select.fld, .searchbox input, .doc-name, .doc-applies, .stage-pick { font-size: 16px; }
}

@media (max-width: 640px) {
  /* contact header: avatar + name on the first line, pills under, actions full-width */
  .contact-head { padding: 20px 18px !important; }
  .contact-head-row { flex-wrap: wrap; gap: 14px !important; }
  .contact-id { flex: 1 1 0; min-width: 0; }
  .contact-head h1 { font-size: 21px !important; line-height: 1.2; }
  .contact-meta { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px !important; }
  .contact-meta .cm { overflow: hidden; text-overflow: ellipsis; }
  .cm-sep { display: none; }
  .contact-actions { width: 100%; flex-wrap: wrap; }
  .contact-actions .btn { flex: 1 1 auto; padding: 11px 12px; font-size: 14px; }
  .av.lg { width: 52px; height: 52px; font-size: 20px; }

  /* profile forms: two fields per row, three when the row has exactly three */
  .prof .row > label { flex: 1 1 calc(50% - 5px) !important; width: auto !important; min-width: 0; }
  .prof .row:has(> label:nth-child(3):last-child) > label { flex-basis: calc(33.33% - 7px) !important; }
  .prof .row > label.check-inline { flex-basis: 100% !important; }
  .prof-card { padding: 20px 16px; }
  .prof-grid, .prof-buyer, .prof-seller { gap: 14px; }

  /* document rows: buttons drop under the name instead of squeezing it */
  .doc-line { flex-wrap: wrap; }
  .doc-line > .row { width: 100%; flex-wrap: wrap; }
  .doc-line > .row .btn { flex: 1 1 auto; }

  /* task rows: the client's name sits under the task, the date stays on the right */
  .mini-row { display: grid; grid-template-columns: auto 1fr auto; align-items: start; column-gap: 10px; row-gap: 2px; }
  .mini-row > a.stamp { grid-column: 2; }
  .mini-row > .stamp.tnum { grid-column: 3; grid-row: 1; min-width: 0 !important; }

  /* Pipeline on a phone (Tovah, 2026-09-20): the STAGES stay stacked down the
     page, and each stage lays its own cards out in TWO ROWS that scroll
     sideways. "two rows that go horizontal, next stage under that, two rows,
     remainder horizontal."

     `grid-auto-flow: column` fills DOWN each pair before moving right, so cards
     1 and 2 sit above each other, 3 and 4 in the next pair, and so on. */
  /* ⚠️ align-items MUST be reset. The desktop board sets `align-items:
     flex-start` so its columns hug their content; once the phone flips this to
     a COLUMN flex box that same rule applies on the horizontal axis, and every
     stage shrank to the width of its widest card — a ragged stack of white
     boxes, each a different width (Tovah, 2026-09-20). */
  .kanban { display: flex; flex-direction: column; align-items: stretch; overflow: visible; gap: 10px; margin: 0; padding: 0 0 12px; }
  .kcol { flex: none; width: auto; max-width: none; min-width: 0; min-height: 0; padding: 8px 10px 10px; }
  .kcol-body {
    display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto);
    grid-auto-columns: 62%; align-items: start; gap: 8px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scrollbar-width: none;
    padding-bottom: 2px;
  }
  .kcol-body::-webkit-scrollbar { display: none; }
  .kcol-body > * { scroll-snap-align: start; min-width: 0; }
  /* ⚠️ Never leave a half-empty pair. Two rows only pay off once there are
     enough cards to fill them; below that the grid reserves a cell nothing
     lives in and the stage grows a white hole (Tovah, 2026-09-20: "zip up if
     empty"). So:
       1-2 cards — one column, full width, nothing to scroll
       3 cards   — a single row; with two rows the reserved cell sits right
                   beside the cards, visible without scrolling at all
       4+        — two rows. An odd count still leaves one cell over, but it
                   lands at the FAR END of the scroll, where it reads as the
                   list finishing rather than as a hole.
     ⚠️ Tried making an odd last card span both rows: it becomes a double-height
     card with its content pooled at the top, which looks like a bug. Worse than
     the gap it fixes. */
  .kcol-body:not(:has(> :nth-child(3))) { grid-auto-columns: minmax(0, 1fr); }
  .kcol-body:has(> :nth-child(3)):not(:has(> :nth-child(4))) { grid-template-rows: auto; }
  .kcol + .kcol::before { display: none; }
  .kcol:has(> .kcol-body > .kcol-empty) { padding: 4px 10px; opacity: .7; }
  .kcol:has(> .kcol-body > .kcol-empty) .kcol-head { padding-bottom: 4px; }
  .kcol:has(> .kcol-body > .kcol-empty) .kcol-empty { display: none; }

  /* modals become bottom sheets */
  .scrim { place-items: end center; padding: 0; }
  .modal {
    width: 100%; max-height: 92dvh; border-radius: var(--r-xl) var(--r-xl) 0 0;
    padding: 26px 20px calc(24px + env(safe-area-inset-bottom)); animation: rise .24s var(--ease);
  }
  @keyframes rise { from { transform: translateY(24px); opacity: 0 } }

  .stat-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .tabs .tab { padding: 10px 13px; font-size: 13.5px; }
  .card.empty { padding: 28px 18px; }
}

/* ---------- community ---------- */
.post-list { display: flex; flex-direction: column; gap: 10px; }
.post { display: block; background: #fff; border-radius: var(--r-lg); padding: 16px 18px; box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; transition: box-shadow .15s var(--ease), transform .15s var(--ease); }
.post:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.post.closed { opacity: .72; }
.post-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.post-kind { font-size: 11px; }
.post-kind.k-have { background: var(--green-pale); color: #3F6A50; }
.post-kind.k-need { background: var(--amber-pale); color: #976B2E; }
.post-kind.k-talk { background: var(--blush-pale); color: var(--mauve-dark); }
.post-price { font-weight: 700; font-size: 14px; }
.post-title { font-weight: 600; font-size: 15px; margin-top: 8px; line-height: 1.35; }
.post-body { font-size: 13.5px; color: var(--text-muted); margin-top: 5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-body.full { display: block; margin-top: 10px; color: var(--text); font-size: 14.5px; white-space: pre-wrap; }
.post-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; font-size: 12.5px; color: var(--text-muted); flex-wrap: wrap; }
.post-foot .who { gap: 8px; }
.post-foot b { color: var(--text); font-weight: 600; }
.reply { padding: 12px 0; border-top: 1px solid var(--line-soft); }
.reply.mine { background: var(--blush-wash); margin: 0 -12px; padding: 12px; border-radius: var(--r-sm); border-top: 0; }
.reply-body { font-size: 14px; line-height: 1.5; margin-top: 4px; white-space: pre-wrap; }
#comm-state { max-width: 220px; }

/* ---------- the agent's public page (settings) ---------- */
.photo-tile { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--blush), var(--mauve)); color: #fff; font-family: var(--font-display); font-style: italic; font-size: 34px; box-shadow: var(--shadow-sm); }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feat-list { display: flex; flex-direction: column; gap: 6px; }

/* Merge anchors for parallel build agents (2026-09-20). Each agent edits only its own. */
/* @@css-A */
/* ---- stage checklists + deal dates (0030, agent A) ---- */
.sp-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 2px; cursor: pointer; }
.sp-row + .sp-row { border-top: 1px solid var(--line-soft); }
.sp-row input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--mauve); }
.sp-row .check-text, .sp-row .check-sub { display: block; }

/* ⚠️ Two columns after a stage move (Tovah, 2026-09-20): MY task on the left,
   what the CLIENT sees on the right. The date spans both, because one date
   drives both sides — they can never disagree. */
.sp-head { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) 140px; gap: 10px;
  padding: 0 2px 6px; border-bottom: 1px solid var(--line); }
.sp-h1, .sp-h2 { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.sp-row2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) 140px; gap: 10px;
  align-items: center; padding: 9px 2px; border-bottom: 1px solid var(--line-soft); }
.sp-row2:last-of-type { border-bottom: 0; }
.sp-cell { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; min-width: 0; }
.sp-cell input { width: 17px; height: 17px; margin-top: 1px; flex: none; accent-color: var(--mauve); }
.sp-cell .check-text { font-size: 13.5px; line-height: 1.35; }
.sp-theirs.sp-dim .check-text { color: var(--text-faint); }
.sp-row2 .stagepick-date { margin-top: 0; padding: 6px 9px; font-size: 13px; width: 100%; }
@media (max-width: 620px) {
  .sp-head { display: none; }
  .sp-row2 { grid-template-columns: 1fr; gap: 7px; padding: 12px 2px; }
  /* Without the header row the right column needs to say what it is. */
  .sp-theirs { padding-left: 26px; }
  .sp-theirs .check-text::before { content: 'Their calendar: '; color: var(--text-muted); }
}

/* Their calendar → pull from the tasks that already exist. */
.ft-row .btn { flex: none; }
.ft-more { margin-top: 4px; }
.ft-more > summary { font-size: 12.5px; color: var(--text-muted); cursor: pointer; padding: 6px 2px; list-style: none; }
.ft-more > summary::-webkit-details-marker { display: none; }
.ft-more > summary::before { content: '+\00a0'; }
.ft-more[open] > summary::before { content: '\2212\00a0'; }
.ft-more > summary:hover { color: var(--text); }

/* ⚠️ The conversation header on a phone. As a bare .row the name and phone
   number sat UNDERNEATH the Call / Video buttons and "View profile" ran off
   the right edge — on every phone, not just in a landing-page frame
   (Tovah, 2026-09-20). The buttons wrap to their own line instead. */
.thread-head { flex-wrap: wrap; row-gap: 10px; }
.thread-who { min-width: 0; }
.thread-who > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 620px) {
  /* avatar + who fill the first line, every button drops below it */
  .thread-head .thread-who { flex: 1 1 calc(100% - 60px); }
  .thread-head .btn { flex: none; }
}

/* Tabs scroll rather than clipping a label in half at narrow widths. */
.tabs { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; white-space: nowrap; }

/* ---- landing-page frames (?embed=1) ----
   A marketing shot, not a working app. The search bar, bell, Add and Today
   buttons cannot be used (the frame has pointer-events: none) and at frame
   width they squeeze the search field down to the word "Sea". Dropping the
   whole bar also gives the screenshot back ~100px of height, which is the
   difference between showing one stage of the pipeline and showing three. */
.is-embed .topbar { display: none; }
/* The contact frame is there to show the homes grid, not a giant centered
   avatar that fills the whole frame before you reach the tabs. */
.is-embed .contact-head { display: none; }
.is-embed .dash { padding-top: 18px; }
/* The demo ships no photos on purpose — they come from a feed or the card
   draws its placeholder, never an invented URL (CLAUDE.md). In a narrow frame
   a 210px grey box is the whole shot, so shrink the slot and let the address,
   price and notes lead. The slot still exists, so nothing is misrepresented. */
.is-embed .library-photo,
.is-embed .sh-photo { height: 104px; }
.is-embed .showing-home-photo,
.is-embed .showing-home-photo > span { min-height: 104px; }

.dd-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(150px, 1fr) auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.dd-row:last-child { border-bottom: 0; }
.dd-label { font-size: 13.5px; font-weight: 500; }
.dd-input { margin-top: 0; padding: 7px 10px; font-size: 13.5px; }
.dd-when { font-size: 12px; color: var(--text-muted); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 68px; }
.dd-when.soon { color: var(--mauve-deep); font-weight: 600; }
.dd-when.today { color: var(--mauve-dark); font-weight: 700; }
.dd-when.past { color: var(--text-faint); }
@media (max-width: 560px) {
  .dd-row { grid-template-columns: 1fr auto; }
  .dd-row .dd-input { grid-column: 1 / -1; }
}

.cl-pick { width: auto; margin-top: 0; padding: 8px 32px 8px 12px; }
.cl-editor { margin-top: 12px; }
.cl-editor[hidden] { display: none; }
.cl-line { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.cl-line .fld { margin-top: 0; padding: 8px 11px; font-size: 13.5px; }
.cl-plus { color: var(--text-faint); font-weight: 600; }
.cl-days { width: 72px; flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.cl-unit { font-size: 12.5px; color: var(--text-muted); flex: none; }
.cl-x { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--text-faint); }
.cl-x:hover { background: var(--cream-deep); color: var(--text); }
.cl-x svg { width: 13px; height: 13px; }
/* -- */

/* @@css-B */
/* ---------- sphere touches: "Coming up" on Past Clients (0031) ---------- */
.sphere-card { padding: 20px 24px 8px; margin-bottom: 18px; }
.sphere-list { margin-top: 10px; }
.sphere-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line-soft); color: inherit; text-decoration: none; }
.sphere-row:first-child { border-top: 0; }
.sphere-row:hover .sphere-who { color: var(--mauve-deep); }
.sphere-who { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sphere-what { font-size: 12.5px; color: var(--text-muted); margin-top: 1px; }
.sphere-when { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.sphere-when.soon { color: var(--mauve-deep); font-weight: 600; }
/* -- */

/* @@css-C */
/* ---------- inbound lead email (0032) ---------- */
.inbox-pill { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: none; letter-spacing: 0;
  max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.intake-row a { color: var(--mauve-deep); font-weight: 500; }
.intake-row a:hover { text-decoration: underline; }
/* -- */

/* @@css-D */
/* ---------- Google Calendar (settings, calendar, showings) ---------- */
.gcal-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gcal-row .pill { white-space: normal; text-align: left; }
.cal-dot.google { background: var(--text-faint); }
.busy-row { color: var(--text-muted); }
.busy-row .cal-dot { flex: none; }
.busy-warn { color: #976B2E; line-height: 1.5; }   /* the amber text used by .pill-amber */
/* -- */
.stagepick-date { width: auto; margin-top: 4px; padding: 4px 8px; font-size: 12.5px; }
/* The picker's date is a real date field, not a checkbox lookalike. */
.check-row input.stagepick-date, input.stagepick-date {
  appearance: auto; -webkit-appearance: auto; width: auto; height: auto; min-width: 150px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; padding: 4px 8px;
  margin: 4px 0 0; font: inherit; font-size: 12.5px; color: var(--text-muted); display: block;
}

/* ---------- call transcription drafts on a client's Overview (0042) ---------- */
.draft-card { padding: 20px 22px; border-color: var(--blush); background: var(--blush-wash); }
.draft-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px solid var(--blush); flex-wrap: wrap; }
.draft-card .between + .draft-row { border-top: 0; }
.draft-kind { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--mauve-dark); min-width: 74px; padding-top: 6px; }
.draft-text { font-size: 14px; line-height: 1.5; min-width: 200px; padding-top: 4px; }
.draft-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.draft-actions .link-btn { text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--text-faint); }
.draft-edit { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; align-items: center; min-width: 240px; }
.draft-edit .fld { margin-top: 0; flex: 1; min-width: 160px; }
.draft-edit input[type=date] { flex: none; width: 150px; }

/* ---------- a conversation inside a modal (the unread pill on the dashboard) ---------- */
.warm-unread { flex: none; cursor: pointer; font: inherit; font-size: 12px; }
.modal.modal-thread { width: min(600px, 100%); padding: 22px 24px 18px; display: flex; flex-direction: column; max-height: 84vh; }
.modal-thread .modal-msgs { display: flex; flex-direction: column; flex: 1; min-height: 0; height: 58vh; }
.modal-thread .modal-msgs > .thread { flex: 1; min-height: 0; overflow-y: auto; }
.modal-thread .modal-msgs > .composer { flex-shrink: 0; }

/* ---------- community: saved posts + replies to replies (2026-09-20) ---------- */
.post-save { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); background: #fff; color: var(--text-muted); cursor: pointer; }
.post-save:hover { border-color: var(--mauve); color: var(--mauve-deep); }
.post-save.on { background: var(--mauve-dark); border-color: var(--mauve-dark); color: #fff; }
.post-save.on svg, .btn.on svg { fill: currentColor; }
.tab svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; }
.reply.nested { margin-left: 26px; padding-left: 14px; border-left: 2px solid var(--line-soft); border-top: 0; }
.reply.mine.nested { margin-left: 14px; }
.reply-to { font-size: 12px; color: var(--text-faint); margin-top: 2px; }
.reply-link { font-size: 12.5px; text-transform: none; letter-spacing: 0; margin-top: 6px; }
.reply-target { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; }

/* ---------- community: listing details on a post ---------- */
.post-home { display: flex; gap: 12px; align-items: center; margin-top: 8px; }
.post-home.full { margin-top: 12px; }
.post-thumb { width: 72px; height: 54px; border-radius: 10px; object-fit: cover; background: var(--cream-deep); flex: none; }
.post-home.full .post-thumb { width: 120px; height: 88px; border-radius: 14px; }
.post-addr { font-size: 13.5px; font-weight: 600; }
.post-specs { font-size: 13px; color: var(--text-muted); margin-top: 1px; }
.post-link { display: inline-block; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--mauve-deep); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- homes library: suggested fits ---------- */
.fit-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.fit { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--blush-wash); border-radius: 12px; }
/* notes under a sent home (restored with the 2026-09-20 Homes tab redo) */
.sent-note { background: #fff; border: 1px solid var(--line-soft); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; line-height: 1.5; }
.sent-note.from-client { background: var(--blush-pale); border-color: transparent; }
.sent-note-meta { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--text-muted); margin-bottom: 3px; }
.sent-note-meta strong { color: var(--text); }
.sent-note-empty { font-size: 13px; }

/* ---------- send-a-home pool ---------- */
.pool { max-height: 46vh; overflow-y: auto; }
.pool-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.pool-row:first-child { border-top: 0; }
.pool-row[hidden] { display: none; }
.pool-photo { flex: none; width: 64px; height: 48px; border-radius: 9px; background: var(--cream-deep); overflow: hidden; display: grid; place-items: center; color: var(--text-faint); }
.pool-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pool-photo svg { width: 18px; height: 18px; }

/* ---------- settings: theme presets ---------- */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.theme-opt { text-align: left; background: var(--card); border: 1.5px solid var(--line); border-radius: 18px; padding: 10px; cursor: pointer; font: inherit; color: inherit; display: flex; flex-direction: column; gap: 6px; }
.theme-opt:hover { border-color: var(--text-faint); }
.theme-opt.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink) inset; }
.theme-swatch { display: block; height: 64px; border-radius: 12px; padding: 10px; }
.theme-card-sw { display: flex; flex-direction: column; gap: 5px; height: 100%; border-radius: 8px; padding: 8px; }
.theme-card-sw i { display: block; height: 7px; border-radius: 999px; width: 70%; }
.theme-name { font-size: 15px; font-weight: 600; }
/* a stat card's icon orb sits absolutely on the right; at narrow widths it sat on top of the number (seen in the landing frames, 2026-09-20) */
.stat:has(.stat-orb) { padding-right: 90px; }

/* ---------- tag dropdown (2026-09-20) ---------- */
.tagpick { position: relative; }
.tagpick-btn { width: 100%; text-align: left; cursor: pointer; font: inherit; color: var(--text); display: flex; align-items: center; gap: 8px; }
.tagpick-btn > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tagpick-btn::after { content: ''; flex: none; width: 7px; height: 7px; border-right: 1.6px solid var(--text-muted); border-bottom: 1.6px solid var(--text-muted); transform: rotate(45deg) translateY(-2px); transition: transform .15s var(--ease); }
.tagpick.open .tagpick-btn::after { transform: rotate(-135deg) translateY(-2px); }
.tagpick-menu { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0; background: var(--card); border-radius: 18px; padding: 8px; box-shadow: 0 18px 50px rgba(0,0,0,.16), 0 0 0 1px rgba(0,0,0,.05); }
.tagpick-list { max-height: 230px; overflow-y: auto; }
.tagpick-opt { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; font-size: 14px; cursor: pointer; }
.tagpick-opt:hover { background: var(--hover, var(--blush-wash)); }
.tagpick-opt input { width: 16px; height: 16px; flex: none; accent-color: var(--ink, var(--mauve)); }
.tagpick-new { display: flex; gap: 8px; align-items: center; padding: 8px 4px 2px; margin-top: 4px; border-top: 1px solid var(--line-soft); }
.tagpick-new .fld { flex: 1; min-width: 0; }
.tagpick-new .btn { flex: none; }