/* CRM-specific styles */

/* ============================================================
   CRM SHELL — 3-col on inbox view
   ============================================================ */
.crm-main { background: var(--parchment); }

/* ── Top tabs ── */
.crm-tabs {
  display: flex; gap: 0;
  background: var(--shell); border-bottom: 1px solid var(--rule);
  padding: 0 36px;
  position: sticky; top: 0; z-index: 18;
}
.crm-tab {
  background: none; border: none; padding: 16px 22px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-mute);
  cursor: pointer; border-bottom: 2px solid transparent;
  display: flex; align-items: center; gap: 10px;
  transition: all .15s;
}
.crm-tab:hover { color: var(--ink); }
.crm-tab.on {
  color: var(--ink); border-bottom-color: var(--brass);
}
.crm-tab .ct {
  font-family: var(--mono); font-size: 9px; color: var(--shell); background: var(--ink);
  padding: 2px 7px; letter-spacing: 0.06em; font-weight: 500;
}
.crm-tab.on .ct { background: var(--brass); }

.crm-view { display: none; }
.crm-view.on { display: block; }

/* ============================================================
   INBOX VIEW
   ============================================================ */
.inbox-shell {
  display: grid; grid-template-columns: 320px 1fr 320px;
  min-height: calc(100vh - 60px);
}

/* Focused contact view — opened from Messages / roster / a link. The leads
   list is hidden so the contact and their interaction data fill the space. */
.inbox-shell.contact-focus { grid-template-columns: 1fr 380px; }
.inbox-shell.contact-focus .lead-list { display: none; }
.ld-focus-back { display: none; }
.inbox-shell.contact-focus .ld-focus-back {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px;
  background: transparent; border: 1px solid var(--rule); border-radius: 8px;
  padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--ink-soft); cursor: pointer;
}
.inbox-shell.contact-focus .ld-focus-back:hover { background: var(--shell); color: var(--ink); }
@media (max-width: 900px) { .inbox-shell.contact-focus { display: block; } }

/* — LEAD LIST — */
.lead-list {
  border-right: 1px solid var(--rule); background: var(--shell);
  display: flex; flex-direction: column; min-width: 0;
}
.lead-filter {
  padding: 14px 18px; border-bottom: 1px solid var(--rule);
  display: flex; gap: 6px; flex-wrap: wrap;
}
.lead-filter .chip {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 5px 10px;
  background: transparent; color: var(--ink-mute);
  border: 1px solid var(--rule); cursor: pointer;
  transition: all .15s;
}
.lead-filter .chip.on { background: var(--ink); color: var(--shell); border-color: var(--ink); }
.lead-filter .chip:hover:not(.on) { color: var(--ink); border-color: var(--ink-soft); }
.lead-filter .chip .ct { margin-left: 6px; color: var(--ink-faint); }
.lead-filter .chip.on .ct { color: rgba(250,246,236,0.55); }

.lead-list-rows {
  flex: 1; overflow-y: auto;
}
/* Segment-browse search pane (roster eyebrow → search-first) */
.lead-seg { padding: 14px 18px 12px; border-bottom: 1px solid var(--rule); }
.lead-seg-input {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 14px;
  padding: 9px 12px; border: 1px solid var(--rule); background: #fff; color: var(--ink);
}
.lead-seg-input:focus { outline: none; border-color: var(--brass); }
.lead-seg-hint {
  display: block; margin-top: 8px; font-family: var(--mono); font-size: 9px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
}
.lead-seg-results { }
.lead-row {
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule-soft);
  cursor: pointer;
  transition: background .12s;
  position: relative;
  display: grid; grid-template-columns: 36px 1fr auto; gap: 12px;
  align-items: start;
}
.lead-row:hover { background: var(--linen); }
.lead-del {
  border: none; background: transparent; cursor: pointer; align-self: center;
  font-size: 13px; line-height: 1; padding: 5px 6px; border-radius: 7px;
  color: var(--ink-faint); opacity: .4; transition: opacity .12s, background .12s, color .12s;
}
.lead-row:hover .lead-del { opacity: .85; }
.lead-del:hover, .lead-del:focus-visible { opacity: 1; color: #9B2C2C; background: #F3E3E3; outline: none; }
.lead-row.on {
  background: var(--linen);
  box-shadow: inset 3px 0 0 var(--brass);
}
.lead-row .avatar { background: var(--vellum); color: var(--ink); font-size: 13px; }
.lead-row .avatar.hot { background: var(--hot); color: var(--shell); }
.lead-row .avatar.warm { background: var(--brass); color: var(--shell); }
.lead-content { min-width: 0; }
.lead-name-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; margin-bottom: 3px;
}
.lead-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.lead-when { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.04em; color: var(--ink-faint); white-space: nowrap; }
.lead-preview {
  font-size: 12.5px; color: var(--ink-soft); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.lead-meta {
  margin-top: 6px;
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.10em;
  text-transform: uppercase;
}
.lead-meta .badge { padding: 2px 6px; background: var(--vellum); color: var(--ink-soft); }
.lead-meta .badge.hot { background: rgba(184,90,62,0.12); color: var(--hot); }
.lead-meta .badge.warm { background: rgba(201,158,90,0.18); color: #8a6a30; }
.lead-meta .badge.brass { background: var(--brass); color: var(--shell); }
/* Pipeline-status pill on a roster row — mirrors the contact card's stage. */
.lead-meta .badge.st { border: 1px solid var(--rule); background: transparent; color: var(--ink-mute); }
.lead-meta .badge.st-active,
.lead-meta .badge.st-signed        { background: #E8F0EA; color: #2E5C3D; border-color: #BFD8C6; }
.lead-meta .badge.st-under_contract { background: #F3EAD6; color: #7C5A16; border-color: #E0CFA0; }
.lead-meta .badge.st-closed        { background: #1A1714; color: #FAF6EC; border-color: #1A1714; }
.lead-meta .badge.st-sphere        { background: var(--vellum); color: var(--ink-mute); }
.lead-meta .score { color: var(--brass); font-weight: 600; }

.lead-list-search {
  padding: 14px 18px; border-bottom: 1px solid var(--rule);
}
.lead-list-search input {
  width: 100%; background: var(--linen); border: 1px solid var(--rule);
  padding: 9px 12px; font-family: var(--sans); font-size: 13px; color: var(--ink);
  outline: none;
}

/* — CONVERSATION / DETAIL — */
.lead-detail {
  display: flex; flex-direction: column;
  background: var(--parchment);
  min-width: 0;
}
.ld-head {
  padding: 18px 28px; border-bottom: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: center;
  background: var(--shell);
}
.ld-head-l { display: flex; gap: 14px; align-items: center; }
.ld-head h2 {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 26px; color: var(--ink); line-height: 1;
}
.ld-head-meta { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: var(--ink-mute); margin-top: 4px; text-transform: uppercase; }
.ld-head-actions { display: flex; gap: 8px; }

/* — AI Draft card — */
.ai-draft {
  margin: 22px 28px;
  background: var(--shell); border: 1px solid var(--brass);
  position: relative;
}
.ai-draft::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--brass);
}
.ai-draft-head {
  padding: 12px 22px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--rule-soft); gap: 14px; flex-wrap: wrap;
}
.ai-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--brass); font-weight: 600;
}
.ai-tag::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--brass);
  box-shadow: 0 0 0 4px rgba(140,110,61,0.15);
}
.ai-source { font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: var(--ink-mute); }
.ai-draft-body {
  padding: 20px 22px;
}
.ai-from {
  display: grid; grid-template-columns: 32px 1fr; gap: 12px;
  margin-bottom: 12px;
  align-items: center;
}
.ai-from .ld { font-size: 12px; color: var(--ink); font-weight: 500; }
.ai-from .sub { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; color: var(--ink-mute); text-transform: uppercase; }
.ai-subject {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--ink); margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--rule-soft);
}
.ai-msg {
  font-family: var(--serif); font-weight: 400; font-size: 15px;
  line-height: 1.6; color: var(--ink-soft); white-space: pre-wrap;
}
.ai-msg .hi {
  background: rgba(140,110,61,0.10); padding: 1px 4px; border-bottom: 1px dashed rgba(140,110,61,0.4);
  cursor: help;
}
.ai-foot {
  padding: 14px 22px; border-top: 1px solid var(--rule-soft);
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
}
.ai-foot-l {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  color: var(--ink-mute); display: flex; gap: 14px; flex-wrap: wrap;
}
.ai-foot-l strong { color: var(--brass); font-weight: 600; }
.ai-foot-r { display: flex; gap: 8px; }
.ai-foot-r .btn { font-size: 10px; padding: 8px 14px; }
.ai-foot-r .btn-brass { background: var(--brass); color: var(--shell); }

/* — Conversation thread — */
.ld-thread {
  padding: 0 28px 28px; flex: 1;
}
.ld-thread-h {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-mute);
  padding: 18px 0 14px; border-bottom: 1px solid var(--rule); margin-bottom: 6px;
}
.msg-bubble {
  display: grid; grid-template-columns: 32px 1fr; gap: 12px;
  padding: 16px 0; border-bottom: 1px solid var(--rule-soft);
  align-items: start;
}
.msg-bubble:last-child { border-bottom: none; }
.msg-bubble .avatar-sm { width: 30px; height: 30px; font-size: 12px; }
.msg-bubble.them .avatar-sm { background: var(--ink); color: var(--shell); }
.msg-bubble.us .avatar-sm { background: var(--brass); color: var(--shell); }
.mb-head {
  display: flex; gap: 10px; align-items: baseline; margin-bottom: 4px; flex-wrap: wrap;
}
.mb-name { font-size: 12.5px; color: var(--ink); font-weight: 600; }
.mb-when { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; color: var(--ink-faint); }
.mb-ch { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); padding: 1px 7px; background: var(--vellum); border: 1px solid var(--rule); }
.mb-text { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; }
.mb-del {
  margin-left: auto; background: transparent; border: none; cursor: pointer;
  color: var(--ink-faint); font-size: 16px; line-height: 1; padding: 0 4px;
  opacity: 0; transition: opacity .12s, color .12s; border-radius: 4px;
}
.msg-bubble:hover .mb-del, .mb-del:focus-visible { opacity: .6; }
.mb-del:hover { opacity: 1; color: #8B3A3A; }
.mb-del.armed { opacity: 1; color: #8B3A3A; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
@media (max-width: 760px) { .mb-del { opacity: .5; } }

/* Composer */
.composer {
  margin: 0 28px 28px; background: var(--shell); border: 1px solid var(--rule);
}
.composer-head {
  display: flex; gap: 6px; padding: 8px 12px;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-mute);
}
.composer-tab {
  padding: 6px 10px; cursor: pointer; transition: color .15s;
}
.composer-tab.on { color: var(--ink); background: var(--linen); }
.composer textarea {
  width: 100%; border: none; outline: none; resize: none;
  padding: 16px 18px; font-family: var(--serif); font-size: 15px;
  background: var(--shell); color: var(--ink); min-height: 100px;
  line-height: 1.55;
}
.composer-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-top: 1px solid var(--rule-soft);
}
.composer-tools {
  display: flex; gap: 4px; font-family: var(--mono); font-size: 12px; color: var(--ink-mute);
}
.composer-tools button {
  background: none; border: none; padding: 6px 8px; color: var(--ink-mute);
  cursor: pointer; transition: color .15s;
}
.composer-tools button:hover { color: var(--ink); }

/* — RIGHT PANE: lead profile — */
.lead-profile {
  background: var(--shell); border-left: 1px solid var(--rule);
  overflow-y: auto;
}
.lp-section { padding: 22px 24px; border-bottom: 1px solid var(--rule); }
.lp-section:last-child { border-bottom: none; }
.lp-section h3 {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--brass); margin-bottom: 14px; font-weight: 600;
}
.lp-score {
  display: grid; grid-template-columns: 1fr auto; gap: 12px;
  padding: 16px 18px; background: var(--ink); color: var(--shell);
  margin-bottom: 14px;
}
.lp-score .v { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 42px; line-height: 1; color: var(--brass-bright); }
.lp-score .l { font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; color: rgba(250,246,236,0.5); margin-top: 4px; text-transform: uppercase; }
.lp-score .trend { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--brass-bright); text-align: right; }
.lp-meter {
  width: 100%; height: 4px; background: rgba(250,246,236,0.15); margin-top: 8px;
  position: relative;
}
.lp-meter .fill { position: absolute; top: 0; left: 0; bottom: 0; background: var(--brass-bright); }

.lp-facts dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.lp-facts dt { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 2px; }
.lp-facts dd { font-size: 13px; color: var(--ink); font-weight: 500; }

.lp-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.lp-tag { font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 8px; background: var(--linen); color: var(--ink-soft); border: 1px solid var(--rule); }

/* Activity feed */
.tl-item {
  display: grid; grid-template-columns: 12px 1fr; gap: 12px;
  padding: 10px 0; position: relative;
}
.tl-item::before {
  content: ''; position: absolute; left: 5px; top: 18px;
  width: 1px; bottom: -10px; background: var(--rule);
}
.tl-item:last-child::before { display: none; }
.tl-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brass); margin-top: 8px; position: relative; z-index: 1; }
.tl-dot.ink { background: var(--ink); }
.tl-dot.faint { background: var(--ink-faint); }
.tl-text { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; }
.tl-text strong { color: var(--ink); font-weight: 500; }
.tl-when { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; color: var(--ink-faint); margin-top: 2px; }

/* Saved homes mini */
.lp-home {
  display: grid; grid-template-columns: 56px 1fr; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--rule-soft);
  align-items: center;
}
.lp-home:last-child { border-bottom: none; }
.lp-home-img { width: 56px; height: 42px; background: var(--vellum); overflow: hidden; }
.lp-home-img img { width: 100%; height: 100%; object-fit: cover; }
.lp-home-p { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--ink); line-height: 1; }
.lp-home-a { font-size: 11px; color: var(--ink-soft); }

/* Pipeline stage selector */
.stage-track {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
  margin-top: 4px;
}
.stage-step {
  text-align: center; padding: 8px 4px; cursor: pointer;
  background: var(--linen); transition: all .15s;
}
.stage-step.done { background: var(--brass); color: var(--shell); }
.stage-step.now  { background: var(--ink); color: var(--shell); }
.stage-step .l { font-family: var(--mono); font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; }

/* Handoff */
.handoff {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px;
  align-items: center;
  background: var(--linen); padding: 10px 12px;
  margin-top: 8px;
}
.handoff .a { display: flex; align-items: center; gap: 8px; }
.handoff .a .avatar-sm { width: 26px; height: 26px; font-size: 11px; }
.handoff .lab { font-size: 12px; color: var(--ink); font-weight: 500; }
.handoff .ar { font-family: var(--mono); font-size: 12px; color: var(--ink-mute); }
.handoff .b { display: flex; align-items: center; gap: 8px; }
.handoff .b .avatar-sm { background: var(--vellum); color: var(--ink); width: 26px; height: 26px; font-size: 11px; }

/* ============================================================
   PIPELINE VIEW (Kanban)
   ============================================================ */
.pipe {
  padding: 28px 36px;
}
.pipe-h {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding-bottom: 18px; border-bottom: 1px solid var(--rule); margin-bottom: 24px;
  flex-wrap: wrap; gap: 16px;
}
.pipe-stats {
  display: flex; gap: 28px; font-family: var(--mono); font-size: 11px; color: var(--ink-mute);
}
.pipe-stats div .v { font-family: var(--serif); font-style: italic; font-size: 24px; color: var(--ink); display: block; line-height: 1; margin-bottom: 2px; }
.pipe-stats div .l { letter-spacing: 0.14em; text-transform: uppercase; }

.kanban {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
}
.kan-col {
  background: var(--shell); border: 1px solid var(--rule);
  display: flex; flex-direction: column;
  min-height: 600px;
}
.kan-col-h {
  padding: 14px 16px; border-bottom: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.kan-col-h .name { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); font-weight: 600; }
.kan-col-h .name::before { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--brass); margin-right: 8px; vertical-align: 1px; }
.kan-col-h .count { font-family: var(--mono); font-size: 10px; color: var(--ink-mute); }
.kan-col-h .sum { font-family: var(--serif); font-style: italic; color: var(--brass); font-size: 14px; }

.kan-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; flex: 1; overflow-y: auto; }
.kan-card {
  background: var(--linen); border: 1px solid var(--rule);
  padding: 12px 14px; cursor: pointer; transition: all .15s;
}
.kan-card:hover { background: var(--shell); border-color: var(--ink); }
.kan-card .name { font-size: 13px; color: var(--ink); font-weight: 600; margin-bottom: 3px; }
.kan-card .home { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--ink); margin-bottom: 6px; line-height: 1.2; }
.kan-card .home .price { color: var(--brass); }
.kan-card-foot {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; color: var(--ink-mute);
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rule-soft);
}
.kan-card .pill-status { font-size: 8.5px; padding: 2px 6px; }

/* ============================================================
   CALENDAR VIEW
   ============================================================ */
.cal {
  padding: 28px 36px;
}
.cal-h {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 18px; border-bottom: 1px solid var(--rule); margin-bottom: 22px;
  flex-wrap: wrap; gap: 16px;
}
.cal-h-l { display: flex; align-items: center; gap: 18px; }
.cal-h-title { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 28px; color: var(--ink); }
.cal-h-nav { display: flex; gap: 4px; }
.cal-h-nav button {
  width: 28px; height: 28px; background: var(--shell); border: 1px solid var(--rule);
  cursor: pointer; transition: all .15s; color: var(--ink);
}
.cal-h-nav button:hover { background: var(--ink); color: var(--shell); }
.cal-view-toggle { display: flex; border: 1px solid var(--rule); background: var(--shell); }
.cal-view-toggle button { background: none; border: none; padding: 7px 14px; border-right: 1px solid var(--rule); font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; color: var(--ink-mute); }
.cal-view-toggle button:last-child { border-right: none; }
.cal-view-toggle button.on { background: var(--ink); color: var(--shell); }

.cal-grid {
  display: grid; grid-template-columns: 60px repeat(7, 1fr);
  background: var(--shell); border: 1px solid var(--rule);
}
.cal-time-col, .cal-day-col {
  border-right: 1px solid var(--rule-soft);
}
.cal-day-col:last-child { border-right: none; }
.cal-day-head {
  padding: 12px 8px; border-bottom: 1px solid var(--rule);
  text-align: center; background: var(--linen);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute);
}
.cal-day-head.today { color: var(--brass); background: var(--vellum); }
.cal-day-head .num { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--ink); display: block; line-height: 1; margin-top: 4px; }
.cal-day-head.today .num { color: var(--brass); }
.cal-time-col .cal-day-head { background: var(--shell); }

.cal-hour {
  height: 56px; border-bottom: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.04em; color: var(--ink-faint);
  padding: 4px 8px; text-align: right;
}
.cal-cell {
  height: 56px; border-bottom: 1px solid var(--rule-soft);
  position: relative;
}
.cal-event {
  position: absolute; left: 4px; right: 4px;
  background: var(--ink); color: var(--shell);
  padding: 4px 8px;
  font-size: 11px; line-height: 1.3;
  border-left: 3px solid var(--brass);
  cursor: pointer; transition: transform .12s;
  z-index: 2;
}
.cal-event:hover { transform: translateX(2px); }
.cal-event .t { font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; color: var(--brass-bright); }
.cal-event .ti { font-family: var(--serif); font-style: italic; font-size: 13px; }
.cal-event.tour { background: var(--ink); }
.cal-event.call { background: var(--brass); border-left-color: var(--ink); color: var(--shell); }
.cal-event.call .t { color: rgba(250,246,236,0.7); }
.cal-event.open { background: var(--moss); border-left-color: var(--brass-bright); }
.cal-event.open .t { color: var(--brass-bright); }
.cal-event.block { background: var(--vellum); color: var(--ink-mute); border-left: 3px solid var(--rule-strong); }
.cal-event.block .t { color: var(--ink-faint); }
.cal-event.block .ti { color: var(--ink-mute); font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; }

/* ---- Agenda view (default) ---- */
.cal-agenda { display: flex; flex-direction: column; }
.cal-ag-day { border-bottom: 1px solid var(--rule); padding-bottom: 6px; }
.cal-ag-day:last-child { border-bottom: none; }
.cal-ag-dayhead { display: flex; align-items: baseline; gap: 12px; padding: 16px 4px 6px; }
.cal-ag-dow { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); }
.cal-ag-date { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--ink); }
.cal-ag-dayhead.today .cal-ag-date, .cal-ag-dayhead.today .cal-ag-dow { color: var(--brass); }
.cal-ag-row {
  display: grid; grid-template-columns: 132px 10px 1fr auto; gap: 14px; align-items: center;
  padding: 12px 8px; border-top: 1px solid var(--rule-soft); cursor: pointer; transition: background .12s;
}
.cal-ag-row:hover { background: var(--linen); }
.cal-ag-time { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-soft); white-space: nowrap; }
.cal-ag-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
.cal-ag-dot.call { background: var(--brass); }
.cal-ag-dot.open { background: var(--moss); }
.cal-ag-dot.block { background: var(--rule-strong); }
.cal-ag-title { font-size: 14px; color: var(--ink); font-weight: 500; }
.cal-ag-title .cal-ag-sub { display: block; font-size: 12px; color: var(--ink-mute); font-weight: 400; margin-top: 2px; }
.cal-ag-kind { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.cal-ag-empty { padding: 48px 8px; text-align: center; color: var(--ink-mute); font-style: italic; font-size: 14px; }

/* ---- Week view (full-day, scrollable) ---- */
.cal-week { border: 1px solid var(--rule); background: var(--shell); }
.calw-head { display: grid; grid-template-columns: 56px repeat(7, 1fr); border-bottom: 1px solid var(--rule); }
.calw-head .corner { border-right: 1px solid var(--rule-soft); }
.calw-dayhead { padding: 9px 6px; text-align: center; border-right: 1px solid var(--rule-soft); font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.calw-dayhead:last-child { border-right: none; }
.calw-dayhead .num { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--ink); display: block; margin-top: 2px; }
.calw-dayhead.today { background: var(--vellum); color: var(--brass); }
.calw-dayhead.today .num { color: var(--brass); }
.calw-body { max-height: 560px; overflow-y: auto; }
.calw-grid { display: grid; grid-template-columns: 56px repeat(7, 1fr); }
.calw-hour { height: 48px; border-bottom: 1px solid var(--rule-soft); font-family: var(--mono); font-size: 9px; color: var(--ink-faint); text-align: right; padding: 2px 6px 0 0; box-sizing: border-box; }
.calw-col { position: relative; border-right: 1px solid var(--rule-soft); }
.calw-col:last-child { border-right: none; }
.calw-line { height: 48px; border-bottom: 1px solid var(--rule-soft); box-sizing: border-box; }
.calw-ev {
  position: absolute; left: 3px; right: 3px; min-height: 42px; overflow: hidden;
  background: var(--ink); color: var(--shell); border-left: 3px solid var(--brass);
  padding: 4px 7px; font-size: 10.5px; line-height: 1.25; cursor: pointer; z-index: 2; border-radius: 3px;
  display: flex; flex-direction: column; gap: 1px;
}
.calw-ev:hover { filter: brightness(1.1); }
.calw-ev .t { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.06em; color: var(--brass-bright); display: block; flex: none; }
.calw-ev .ti { font-family: var(--serif); font-style: italic; font-size: 12px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calw-ev.call { background: var(--brass); border-left-color: var(--ink); }
.calw-ev.call .t { color: rgba(250,246,236,0.75); }
.calw-ev.open { background: var(--moss); border-left-color: var(--brass-bright); }
.calw-ev.block { background: var(--vellum); color: var(--ink-mute); border-left-color: var(--rule-strong); }
.calw-ev.block .t { color: var(--ink-faint); }
.calw-ev.block .ti { font-style: normal; font-family: var(--mono); font-size: 10px; }
/* Deal-coloured events (colour set inline per deal) read on a light tint */
.calw-ev.deal { color: #1A1714; }
.calw-ev.deal .t { color: rgba(26,23,20,0.6); }
.calw-ev.deal .ti { color: #1A1714; font-style: italic; font-family: var(--serif); }

/* ---- Calendar on a phone ---- */
@media (max-width: 760px) {
  .cal { padding: 16px 14px 40px; }
  /* Header controls stack cleanly instead of colliding */
  .cal-h { align-items: flex-start; gap: 12px; }
  .cal-h-title { font-size: 23px; }
  /* Week view: 7 narrow columns are unreadable — keep each day a legible width
     and let the whole grid scroll sideways so Sat/Sun are reachable. Head and
     body share the min-width so their columns stay aligned as you scroll. */
  .cal-week { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .calw-head, .calw-grid { min-width: 660px; }
  /* Month-view (.calm-*) phone sizing lives in crm.html's inline <style>,
     which loads after this file — a rule here would be overridden. */
}

/* View-by-deal dropdown */
.cal-deal-select {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em;
  color: var(--ink); background: var(--shell);
  border: 1px solid var(--rule); border-radius: 8px; padding: 8px 10px; cursor: pointer; max-width: 220px;
}
.cal-deal-select:focus { outline: none; border-color: var(--brass); }
/* Colour legend — one swatch per deal that has events this week */
.cal-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 14px 0 4px; }
.cal-legend:empty { display: none; }
.cal-legend .lg { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-soft); }
.cal-legend .lg .sw { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.cal-legend .lg.on { color: var(--ink); font-weight: 600; }

/* Calendar legend / availability strip */
.cal-strip {
  display: grid; grid-template-columns: 2fr 1fr; gap: 18px;
  margin-top: 24px;
}
.avail-card {
  background: var(--shell); border: 1px solid var(--rule);
  padding: 22px 24px;
}
.avail-card h3 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 22px; color: var(--ink); margin-bottom: 14px; }
.avail-card .sub { font-size: 13px; color: var(--ink-soft); margin-bottom: 16px; line-height: 1.6; }
.avail-row {
  display: grid; grid-template-columns: 80px 1fr auto; gap: 14px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--rule-soft); font-size: 13px;
}
.avail-row:last-child { border-bottom: none; }
.avail-row .day { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); }
.avail-row .hrs { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--ink); }
.avail-row .toggle { width: 32px; height: 18px; }
.avail-row .toggle::after { width: 14px; height: 14px; }
.avail-row .toggle.on::after { transform: translateX(14px); }

/* ============================================================
   SEQUENCES VIEW
   ============================================================ */
.seq { padding: 28px 36px; }
.seq-h {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding-bottom: 18px; border-bottom: 1px solid var(--rule); margin-bottom: 24px;
  flex-wrap: wrap; gap: 16px;
}
.seq-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; }
.seq-list-card { background: var(--shell); border: 1px solid var(--rule); }
.seq-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 16px;
  padding: 18px 22px; border-bottom: 1px solid var(--rule-soft);
  align-items: center; cursor: pointer; transition: background .12s;
}
.seq-row:hover { background: var(--linen); }
.seq-row:last-child { border-bottom: none; }
.seq-row.on { background: var(--linen); border-left: 3px solid var(--brass); padding-left: 19px; }
.seq-row .name { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--ink); line-height: 1.2; margin-bottom: 4px; }
.seq-row .meta { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; color: var(--ink-mute); text-transform: uppercase; }
.seq-row .stat { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); text-align: right; }
.seq-row .stat strong { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--ink); display: block; line-height: 1; margin-bottom: 2px; font-weight: 400; }
.seq-row .toggle { width: 32px; height: 18px; }
.seq-row .toggle::after { width: 14px; height: 14px; }
.seq-row .toggle.on::after { transform: translateX(14px); }

.seq-editor-card { background: var(--shell); border: 1px solid var(--rule); padding: 24px 26px; height: max-content; }
.seq-editor-card h3 { font-family: var(--serif); font-style: italic; font-size: 26px; color: var(--ink); margin-bottom: 6px; }
.seq-editor-card .sub { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 22px; line-height: 1.6; }
.seq-step {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid var(--rule-soft);
  align-items: start;
}
.seq-step:last-of-type { border-bottom: none; }
.seq-step-num {
  width: 32px; height: 32px;
  background: var(--ink); color: var(--brass-bright);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 16px;
}
.seq-step-body { font-size: 13px; color: var(--ink); }
.seq-step-when { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: var(--brass); text-transform: uppercase; margin-bottom: 4px; }
.seq-step-snip { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--ink-soft); line-height: 1.5; padding-top: 6px; }
.seq-step-ch { font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; padding: 3px 8px; background: var(--vellum); color: var(--ink-soft); border: 1px solid var(--rule); align-self: start; }

/* ============================================================
   REPORTS VIEW
   ============================================================ */
.rep { padding: 28px 36px; }
.rep-h {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding-bottom: 18px; border-bottom: 1px solid var(--rule); margin-bottom: 24px;
  flex-wrap: wrap; gap: 16px;
}
.rep-kpi {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); margin-bottom: 28px;
}
.kpi-card {
  background: var(--shell); padding: 22px 26px;
  display: flex; flex-direction: column; gap: 6px;
}
.kpi-card .l { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); }
.kpi-card .v { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 42px; line-height: 1; color: var(--ink); }
.kpi-card .ch { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; }
.ch.up { color: var(--positive); }
.ch.dn { color: var(--negative); }

.rep-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px;
}
.rep-card {
  background: var(--shell); border: 1px solid var(--rule); padding: 24px 26px;
}
.rep-card h3 { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--ink); margin-bottom: 4px; }
.rep-card .sub { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: var(--ink-mute); text-transform: uppercase; margin-bottom: 18px; }

/* Chart */
.chart-bars { display: flex; align-items: flex-end; gap: 14px; height: 180px; padding: 12px 0; border-bottom: 1px solid var(--rule-soft); }
.chart-bar { flex: 1; background: var(--ink); position: relative; min-height: 4px; }
.chart-bar.brass { background: var(--brass); }
.chart-bar::after {
  content: attr(data-v);
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--ink); white-space: nowrap;
}
.chart-labels { display: flex; gap: 14px; margin-top: 8px; }
.chart-labels span { flex: 1; text-align: center; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }

/* Funnel */
.funnel { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.funnel-step {
  display: grid; grid-template-columns: 130px 1fr 70px; gap: 16px;
  align-items: center;
}
.funnel-step .l { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.funnel-step .b { height: 30px; background: var(--ink); position: relative; }
.funnel-step .v { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--ink); text-align: right; }

/* Income table */
.income-row {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--rule-soft);
  align-items: baseline; font-size: 13px;
}
.income-row:last-child { border-bottom: none; }
.income-row .name { color: var(--ink); }
.income-row .home { color: var(--ink-soft); font-family: var(--serif); font-style: italic; font-size: 14px; }
.income-row .v { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--ink); }
.income-row .v.brass { color: var(--brass); }

/* Responsive */
@media (max-width: 1300px) {
  .inbox-shell { grid-template-columns: 280px 1fr 280px; }
  .kanban { grid-template-columns: repeat(2, 1fr); }
  .cal-grid { grid-template-columns: 50px repeat(5, 1fr); }
  .cal-grid .cal-day-col:nth-child(n+7) { display: none; }
}

/* ============================================================
   TODAY VIEW — morning brief
   ============================================================ */
.today { padding: 36px; max-width: 1500px; margin: 0 auto; }

/* — Brief header — */
.today-brief {
  display: grid;
  grid-template-columns: 1fr 1.15fr;   /* give the Closing-soon panel more room */
  gap: 44px;
  align-items: end;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 36px;
}
.tb-l .label-cap { display: block; margin-bottom: 14px; }
.tb-greet {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(48px, 5vw, 76px); line-height: 0.96;
  color: var(--ink); letter-spacing: -0.01em;
  margin-bottom: 18px;
}
.tb-greet em { color: var(--brass); font-style: italic; }
.tb-line {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 20px; line-height: 1.4; color: var(--ink-soft);
  max-width: 540px;
}
.tb-r { display: flex; flex-direction: column; gap: 18px; align-items: flex-end; }
.tb-pulse {
  width: 100%;
  background: var(--shell); border: 1px solid var(--rule);
  padding: 18px 22px; display: flex; flex-direction: column; gap: 6px;
}
.tb-pulse .label-cap { color: var(--brass); margin-bottom: 8px; }
.tb-pulse-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12.5px; color: var(--ink-soft);
  padding: 4px 0;
}
.tb-pulse-row .v {
  font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--ink);
  display: inline-flex; align-items: baseline; gap: 8px;
}
.tb-pulse-row .v .chg {
  font-family: var(--mono); font-style: normal;
  font-size: 10px; letter-spacing: 0.06em;
}
.tb-weather {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
  width: 100%;
}
.tw-day {
  background: var(--shell); padding: 10px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-mute);
}
.tw-day .i { font-size: 18px; color: var(--brass); }
.tw-day:nth-child(3) .i { color: var(--ink-mute); } /* cloudy */
.tw-day span:last-child {
  font-family: var(--serif); font-style: italic; font-size: 17px;
  color: var(--ink); letter-spacing: 0; text-transform: none;
}
.tw-day.on { background: var(--linen); }

/* — 3-column hero — */
.today-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 28px;
  margin-bottom: 44px;
}

/* — Needs you now — */
.needs-h { margin-bottom: 22px; }
.needs-h .eyebrow { color: var(--brass); display: block; margin-top: 14px; }

.need-card {
  background: var(--shell);
  border: 1px solid var(--rule);
  padding: 24px 28px;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 22px;
  margin-bottom: 14px;
  position: relative;
  transition: background .15s, transform .15s;
}
.need-card:hover { background: var(--linen); }
/* Decision-queue variants: maroon = approval, green = client, gold = deadline */
.need-card.q-dec { border-left: 4px solid #5A0E24; }
.need-card.q-cli { border-left: 4px solid #2E5C3D; }
.need-card.q-dl  { border-left: 4px solid var(--brass); }
.need-card .nc-body h3 { font-size: 19px; }
.need-card .nc-body p { font-size: 15px; line-height: 1.6; color: var(--ink); }
.live-stamp { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #2E5C3D; margin-left: 14px; display: inline-flex; align-items: center; gap: 6px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #2E5C3D; display: inline-block; animation: lgcPulse 2.4s ease-in-out infinite; }
@keyframes lgcPulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.feed-chips { display: flex; gap: 8px; margin: 0 0 12px; }
.feed-chip { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 6px 14px; border: 1px solid var(--rule); background: var(--shell); color: var(--ink-mute); cursor: pointer; }
.feed-chip.on { background: var(--ink); color: var(--shell); border-color: var(--ink); }
.need-card-hot {
  border-left: 3px solid var(--brass);
}
.nc-rank {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 44px; color: var(--ink-faint); line-height: 1;
  padding-top: 4px;
}
.need-card-hot .nc-rank { color: var(--brass); }
.nc-meta {
  display: flex; gap: 12px; align-items: center;
  margin-bottom: 8px; flex-wrap: wrap;
}
.nc-tag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute);
}
.nc-body h3 {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 24px; color: var(--ink); line-height: 1.15;
  margin-bottom: 8px;
}
.nc-body p {
  font-size: 13.5px; line-height: 1.7; color: var(--ink-soft);
  margin-bottom: 14px;
}
.nc-body p em { color: var(--brass); font-style: italic; }
.nc-body p strong { color: var(--ink); }
.nc-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 12px; border-top: 1px solid var(--rule-soft);
  flex-wrap: wrap; gap: 10px;
}
.nc-foot-l {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-mute);
}
.nc-foot-r { display: flex; gap: 8px; }

/* — Today's hours rail — */
.hours {
  background: var(--shell);
  border: 1px solid var(--rule);
  padding: 0;
  display: flex; flex-direction: column;
  height: max-content;
  position: sticky; top: 80px;
}
.hours-h {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 22px;
  border-bottom: 1px solid var(--rule);
  background: var(--linen);
}
.hours-h .label-cap { color: var(--brass); }
.hours-link {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--brass);
  cursor: pointer; transition: color .15s;
}
.hours-link:hover { color: var(--ink); }

.hours-body { padding: 18px 22px; }
.hr-now {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; margin-bottom: 18px;
  background: var(--ink); color: var(--shell);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
}
.hr-now-l { color: var(--brass-bright); font-weight: 500; }
.hr-now-d { color: rgba(250,246,236,0.55); }

.hr-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: stretch;
  padding: 8px 0;
  position: relative;
}
.hr-row::before {
  content: ''; position: absolute;
  left: 56px; top: 0; bottom: 0;
  width: 1px; background: var(--rule);
}
.hr-time {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.10em;
  color: var(--ink-mute); padding-top: 14px;
  text-align: right;
  padding-right: 8px;
}
.hr-card {
  background: var(--linen);
  padding: 12px 16px;
  display: flex; flex-direction: column; gap: 3px;
  margin-left: 8px;
  position: relative;
}
.hr-card::before {
  content: ''; position: absolute;
  left: -12px; top: 50%;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--brass);
  transform: translateY(-50%);
  box-shadow: 0 0 0 3px var(--shell);
}
.hr-card .label-cap { color: var(--brass); font-size: 9px; }
.hr-card strong {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 16px; color: var(--ink); line-height: 1.2;
}
.hr-sub {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
  color: var(--ink-mute);
}
.hr-card-brass { background: var(--ink); color: var(--shell); }
.hr-card-brass::before { background: var(--brass-bright); }
.hr-card-brass .label-cap { color: var(--brass-bright); }
.hr-card-brass strong { color: var(--shell); }
.hr-card-brass .hr-sub { color: rgba(250,246,236,0.5); }
.hr-card-soft { background: transparent; border: 1px dashed var(--rule-strong); }
.hr-card-soft::before { background: var(--ink-faint); }

/* — Quietly attentive signals — */
.signals {
  background: var(--vellum);
  border: 1px solid var(--rule);
  padding: 32px 36px 36px;
  margin-bottom: 28px;
}
.signals-h { margin-bottom: 22px; }
.signals-h .eyebrow { color: var(--brass); display: block; margin-top: 12px; }
.signal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.signal {
  background: var(--shell);
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 140px;
  position: relative;
}
.sig-time {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-mute);
}
.signal p {
  font-size: 15px; line-height: 1.6; color: var(--ink);
  margin: 0;
}
.signal p strong {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 17px; letter-spacing: 0;
}
.signal p em { font-style: italic; color: var(--brass); }
.sig-tag {
  margin-top: auto;
  padding: 3px 10px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--linen); color: var(--ink-mute);
  align-self: flex-start;
}

/* — Live deals — */
.deals { margin-bottom: 32px; }
.deals-h { margin-bottom: 22px; }
.deals-h .eyebrow { color: var(--brass); display: block; margin-top: 12px; }

.deal-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.deal {
  background: var(--shell);
  border: 1px solid var(--rule);
  padding: 22px 24px;
}
.deal-h {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
}
.deal-stage {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--brass);
}
.deal-amt {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 22px; color: var(--ink);
}
.deal h4 {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 20px; color: var(--ink); margin: 4px 0 6px;
}
.deal-buyer {
  font-size: 12px; color: var(--ink-soft); margin-bottom: 18px;
}
.deal-track {
  display: grid; grid-template-columns: repeat(6, 1fr);
  margin-bottom: 14px;
}
.deal-track .dt {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--ink-faint);
  padding: 8px 4px;
  text-align: center;
  border-bottom: 2px solid var(--rule);
  position: relative;
}
.deal-track .dt.dt-done {
  color: var(--brass); border-bottom-color: var(--brass);
}
.deal-track .dt.dt-on {
  color: var(--ink); border-bottom-color: var(--ink);
  font-weight: 600;
}
.deal-track .dt.dt-on::after {
  content: ''; position: absolute;
  bottom: -5px; left: 50%; transform: translateX(-50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink);
}
.deal-foot {
  display: flex; justify-content: space-between;
  padding-top: 12px; border-top: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
  color: var(--ink-mute);
  flex-wrap: wrap; gap: 8px;
}
.deal-foot strong { color: var(--ink); margin-right: 4px; }

/* — At-a-Glance (ONE SHARED TIMELINE) — a deal with milestones renders a wide
     card with four dated columns instead of the linear track. — */
.deal.deal-wide { grid-column: 1 / -1; }
.deal-glance {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px;
  margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--rule-soft);
}
.dg-col { min-width: 0; }
.dg-h {
  display: block; font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--brass);
  padding-bottom: 8px; margin-bottom: 8px; border-bottom: 2px solid var(--rule);
}
.dg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dg-item {
  font-size: 12px; line-height: 1.35; color: var(--ink-soft);
  padding-left: 14px; position: relative;
}
.dg-item::before {
  content: ''; position: absolute; left: 0; top: 5px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--rule);
}
.dg-date { font-family: var(--mono); font-size: 9.5px; color: var(--ink-mute); margin-right: 5px; }
.dg-label { color: var(--ink); }
.dg-desc { display: block; font-size: 11px; color: var(--ink-mute); margin-top: 1px; }
.dg-empty { font-size: 12px; color: var(--ink-faint); padding-left: 14px; }
/* status colours — match the linear track's brass/ink language */
.dg-item.dg-done { color: var(--ink-mute); }
.dg-item.dg-done::before { background: var(--brass); }
.dg-item.dg-next::before { background: var(--ink); }
.dg-item.dg-next .dg-label { font-weight: 600; }
.dg-item.dg-key::before { background: #2E5C3D; }
.dg-item.dg-key .dg-label { font-weight: 600; }
@media (max-width: 720px) {
  .deal-glance { grid-template-columns: 1fr 1fr; }
}

/* — Tasks + day stats — */
.today-foot {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 28px;
  padding-bottom: 60px;
}
.tasks, .daystats {
  background: var(--shell);
  border: 1px solid var(--rule);
  padding: 28px 32px;
}
.tasks-h, .ds-h { margin-bottom: 18px; }
.tasks-h .eyebrow, .ds-h .eyebrow { color: var(--brass); display: block; margin-top: 10px; }

.task-list { list-style: none; padding: 0; margin: 0; }
.task-list li {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 14px; align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.task-list li:last-child { border-bottom: none; }
.tk-box {
  display: block; width: 16px; height: 16px;
  cursor: pointer;
  accent-color: var(--brass);
}
.task-list li.done .tk-body { text-decoration: line-through; opacity: .55; }
.task-list li.done .tk-time { opacity: .4; }
.tk-body {
  font-size: 13.5px; color: var(--ink-soft);
}
.tk-body strong {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 17px; color: var(--ink);
  margin-right: 4px;
}
.tk-time {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-faint);
}
.task-foot {
  padding-top: 16px; margin-top: 8px;
  border-top: 1px solid var(--rule);
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.task-foot .label-cap { color: var(--brass); }
.task-foot strong {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 18px; color: var(--ink); letter-spacing: 0;
  margin-right: 4px;
}

.ds-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-bottom: 16px;
}
.ds-cell {
  background: var(--shell);
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 4px;
}
.ds-num {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 36px; color: var(--ink); line-height: 1;
}
.ds-num em {
  font-family: var(--mono); font-size: 16px; font-style: normal;
  color: var(--ink-mute); font-weight: 500;
}
.ds-lab {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-mute);
}
.ds-note {
  padding-top: 14px; border-top: 1px solid var(--rule-soft);
  font-size: 12.5px; line-height: 1.6; color: var(--ink-soft);
}
.ds-note strong { color: var(--ink); font-weight: 600; }

/* Today responsive */
@media (max-width: 1200px) {
  .today-brief { grid-template-columns: 1fr; gap: 24px; }
  .tb-r { align-items: stretch; }
  .today-grid { grid-template-columns: 1fr; }
  .hours { position: static; }
  .signal-grid { grid-template-columns: 1fr 1fr; }
  .deal-grid { grid-template-columns: 1fr 1fr; }
  .today-foot { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .today { padding: 22px; }
  .signal-grid, .deal-grid { grid-template-columns: 1fr; }
  .ds-grid { grid-template-columns: 1fr; }
  .need-card { grid-template-columns: 40px 1fr; gap: 14px; padding: 18px 20px; }
}

/* ============================================================
   FIXED APP SHELL (authoritative — appended last so it wins).
   The document body never scrolls; the nav, the lead list, and the
   detail/preview panes each scroll on their own. Appears once: the
   search bar lives only in the fixed topbar. crm.css loads only on
   crm.html, so none of this can reach the public marketing site.
   ============================================================ */
html, body { height: 100%; }
body { overflow: hidden; }
.app { height: 100vh; min-height: 0; overflow: hidden; }
.app-side { height: 100vh; }                        /* keeps its own overflow-y:auto */
.app-main {
  height: 100vh; min-width: 0;
  display: flex; flex-direction: column; overflow: hidden;
}
.app-topbar { flex: 0 0 auto; position: static; }   /* the single, fixed search */

/* Scrollable content views fill the remaining height and scroll internally */
.crm-view.on { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* Inbox is special: the view itself never scrolls — its three columns do */
.crm-view[data-view="inbox"].on { overflow: hidden; }
.inbox-shell { flex: 1 1 auto; min-height: 0; }
.lead-list    { height: 100%; overflow: hidden; }   /* flex column; only its rows scroll */
.lead-detail  { height: 100%; overflow-y: auto; }
.lead-profile { height: 100%; overflow-y: auto; }

/* The full desktop nav ("the desk") — a hamburger drawer on a phone. Hidden
   off-canvas by default so no view has the whole nav dumped under it; the
   4-pillar bottom bar + this drawer are the phone's navigation. */
.nav-toggle { display: none; }
.nav-scrim { display: none; }

/* Phone: the fixed 3-pane can't fit — fall back to one natural scroll */
@media (max-width: 760px) {
  html, body { overflow-x: hidden; }
  body { overflow-y: auto; }
  .app { height: auto; min-height: 100vh; display: block; overflow: visible; }
  .app-main { height: auto; overflow: visible; }
  .crm-view.on,
  .crm-view[data-view="inbox"].on { overflow: visible; }
  .inbox-shell { display: block; }
  .lead-list, .lead-detail, .lead-profile { height: auto; overflow: visible; width: 100%; }
  .lead-list { border-right: none; border-bottom: 1px solid var(--rule); }
  .lead-profile { border-top: 1px solid var(--rule); border-left: none; }
  /* Topbar: hamburger + search share a row, actions wrap below */
  .app-topbar { flex-wrap: wrap; gap: 10px 8px; padding: 12px 16px; align-items: center; }
  .app-search { min-width: 0; flex: 1 1 200px; }
  .crm-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Hamburger — only on a phone */
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; width: 40px; height: 40px; padding: 0;
    background: var(--shell); border: 1px solid var(--rule); border-radius: 8px;
    color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .nav-toggle svg { width: 20px; height: 20px; }

  /* Sidebar → off-canvas slide-in drawer */
  .app-side {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 130;
    width: 84%; max-width: 320px; height: 100%; overflow-y: auto;
    background: var(--shell); border-right: 1px solid var(--rule); border-top: none;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: 2px 0 24px rgba(20,18,15,.16); padding: 14px 0;
    -webkit-overflow-scrolling: touch;
  }
  body.nav-open .app-side { transform: translateX(0); }
  .nav-scrim { position: fixed; inset: 0; z-index: 120; background: rgba(20,18,15,.5); }
  body.nav-open .nav-scrim { display: block; }

  .app-side-brand { padding: 0 20px 14px; }
  .app-side-section { padding: 12px 20px 5px; }
  .app-side-nav a { padding: 9px 20px; font-size: 14px; }
}

/* ============================================================
   MOBILE BOTTOM NAV — thumb-reachable primary nav on phones.
   Hidden on desktop; the sidebar stays the desktop nav. The four
   on-the-go tools (Talk / Calendar / Add / Curate) are always one tap
   away at the bottom of the screen, honoring the iOS home-bar safe
   area so nothing sits under the gesture strip.
   ============================================================ */
.mobnav { display: none; }

@media (max-width: 760px) {
  .mobnav {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: var(--shell);
    border-top: 1px solid var(--rule);
    box-shadow: 0 -2px 14px rgba(20, 18, 15, .07);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mobnav-item {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    background: none; border: none; cursor: pointer;
    padding: 9px 4px 8px;
    font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-mute);
    -webkit-tap-highlight-color: transparent;
  }
  .mobnav-item svg { width: 22px; height: 22px; display: block; }
  .mobnav-item.on { color: var(--brass); }
  .mobnav-item:active { background: var(--linen); }

  /* The center "Add a contact" action — the one create-first control, given
     brass weight so it reads as the primary on-the-go move. It never lights
     as a nav destination (it opens a modal), so no .on state. */
  .mobnav-add { color: var(--brass); }
  .mobnav-add svg { width: 30px; height: 30px; stroke-width: 1.7; }
  .mobnav-add:active { background: none; }
  .mobnav-add:active svg { transform: scale(.92); }

  /* Reserve space so content and the sidebar foot clear the fixed bar
     (the center Add button's larger icon makes the bar ~62px tall). */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  /* Tighten the Command Center gutters on a phone */
  .cc { padding: 16px 16px 40px; }
}


/* ===========================================================================
   Italic-serif retirement (2026-07): every UI text role that still used the
   old italic serif moves to upright Inter. Fraunces (roman) remains only on
   the Today greeting and section headings. Appended last so it wins cascade.
   =========================================================================== */
.ld-head h2,
.lp-score .v, .lp-home-p,
.pipe-stats div .v,
.kan-col-h .sum, .kan-card .home,
.cal-h-title, .cal-day-head .num, .cal-event .ti, .cal-ag-date,
.calw-dayhead .num, .calw-ev .ti, .calw-ev.deal .ti,
.avail-card h3, .avail-row .hrs,
.seq-row .name, .seq-row .stat strong, .seq-editor-card h3,
.seq-step-num, .seq-step-snip,
.kpi-card .v, .rep-card h3, .funnel-step .v,
.income-row .home, .income-row .v {
  font-family: var(--sans);
  font-style: normal;
}
.seq-editor-card h3, .cal-h-title, .rep-card h3, .avail-card h3, .ld-head h2 { font-weight: 600; letter-spacing: -0.01em; }
.kpi-card .v, .lp-score .v { font-weight: 500; letter-spacing: -0.02em; }
.pipe-stats div .v, .seq-row .stat strong, .funnel-step .v, .income-row .v,
.cal-day-head .num, .calw-dayhead .num, .cal-ag-date { font-weight: 600; }
.seq-row .name, .kan-card .home, .lp-home-p, .avail-row .hrs, .cal-event .ti, .calw-ev .ti { font-weight: 500; }
.seq-step-snip { font-size: 14.5px; color: var(--ink); }
.seq-step-when, .seq-step-ch { font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .09em; }
.cal-ag-empty { font-family: var(--sans); font-style: normal; }


/* Closing soon panel: room for street + date + days chip + commission */
.tb-r { min-width: 480px; }
.tb-assess .tb-pulse { min-width: 460px; }
.tb-pulse-row { gap: 14px; }
.tb-pulse-row .v { text-align: right; white-space: nowrap; }
@media (max-width: 1100px) { .tb-r { min-width: 0; width: 100%; } }

/* Closing-soon escrow rows — a per-deal days-to-close countdown badge */
.tb-esc { align-items: center; gap: 14px; }
.tb-esc-main { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.tb-esc-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.tb-esc-txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tb-esc-addr { font-family: var(--serif); font-size: 15px; color: var(--ink); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-esc-sub { font-size: 11px; color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-esc-count { flex: none; font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.03em; padding: 5px 11px; border-radius: 20px; white-space: nowrap; }
.tb-esc-count.ok   { background: rgba(60,110,80,0.12);  color: #2F7A4D; }
.tb-esc-count.near { background: rgba(176,120,44,0.15);  color: #9A6A1E; }
.tb-esc-count.late { background: rgba(155,44,44,0.12);   color: #9B2C2C; }
.tb-esc-count.tbd  { background: var(--rule);            color: var(--ink-mute); }

/* ============================================================================
   UI CLEANUP (2026-07) — retire the flourishy display serif in the CRM.
   crm.css is loaded ONLY by the agent CRM (crm.html), never by the client
   seller portal, so this swaps Fraunces/Cormorant for Montserrat on the desk
   while the client-facing portal keeps its serif look. Scoped to
   body.lp-restyle so it out-specifies the :root variable defaults.
   ========================================================================== */
body.lp-restyle {
  /* !important so this wins over legacy-app.css, which also sets --lp-serif on
     body.lp-restyle (Cormorant) and loads after crm.css. CRM-scoped, so the
     client portal — which never loads crm.css — keeps its serif. */
  --serif: 'Montserrat', system-ui, sans-serif !important;
  --lp-serif: 'Montserrat', system-ui, sans-serif !important;
}
/* Upright, tightened headings — Montserrat reads clean, not fancy. The old
   italic + Fraunces combo was the "flourishy" look we're removing. */
body.lp-restyle .display,
body.lp-restyle .display em,
body.lp-restyle .h-section,
body.lp-restyle .h-section em,
body.lp-restyle .h-sub,
body.lp-restyle .lede,
body.lp-restyle .numeral,
body.lp-restyle h1,
body.lp-restyle h2,
body.lp-restyle h3,
body.lp-restyle .cc-title h1,
body.lp-restyle .cc-title,
body.lp-restyle .lp-preview-title,
body.lp-restyle .lp-score .v,
body.lp-restyle .lp-home-p,
body.lp-restyle .pipe-stats div .v {
  font-style: normal;
  letter-spacing: -0.01em;
}