/* Market Command — web app design tokens & shared components.
   Mirrors the palette used in src/services/listings/html.ts so the PDF, the
   public listing webview, and the web app all feel like the same product. */

:root {
  /* Color */
  --ink:      #0d2436;
  --ink-soft: #1d2c3a;
  --muted:    #5b6b7a;
  --faint:    #9aa6b2;
  --line:     #e5eaef;
  --hairline: #f0f3f6;
  --bg:       #f7f8fa;
  --card:     #ffffff;
  --accent:   #1f3147;
  --link:     #2755a6;
  --green:    #1f8a4c;
  --green-bg: #e7f4ec;
  --red:      #a13e2a;
  --red-bg:   #faece8;
  --amber:    #a87830;
  --amber-bg: #f9efdc;
  --grey:     #7a8693;
  --grey-bg:  #eef1f4;

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Spacing */
  --r: 12px;
  --r-sm: 8px;
  --shadow: 0 1px 3px rgba(13, 36, 54, 0.08);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }

/* ===== App shell ===== */

.shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  background: #ffffff;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar .brand {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.2px;
  color: var(--ink);
  padding: 6px 10px 18px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.sidebar .brand .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--green);
}

.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  font-size: 13.5px;
  color: var(--muted);
  border-radius: var(--r-sm);
  font-weight: 500;
}
.sidebar nav a:hover { background: var(--bg); text-decoration: none; color: var(--ink); }
.sidebar nav a.active {
  background: var(--bg);
  color: var(--ink);
  font-weight: 600;
}

.sidebar .footer {
  margin-top: auto;
  padding: 12px 10px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}
.sidebar .footer .name { color: var(--ink); font-weight: 600; font-size: 13px; }
.sidebar .footer .meta { margin-top: 2px; }
.sidebar .footer a { color: var(--muted); font-size: 12px; }
.sidebar .footer form { margin: 6px 0 0; }
.sidebar .footer button.linklike {
  background: none; border: 0; padding: 0;
  color: var(--muted); font-size: 12px; cursor: pointer;
}
.sidebar .footer button.linklike:hover { color: var(--ink); text-decoration: underline; }

/* ===== Main column ===== */

.main { padding: 28px 40px 60px; max-width: 1280px; width: 100%; min-width: 0; }
.main h1 {
  font-size: 22px;
  margin: 0 0 4px;
  font-weight: 700;
  letter-spacing: -0.2px;
}
.main h1 + .sub { color: var(--muted); margin: 0 0 24px; font-size: 13.5px; }

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 22px;
  gap: 16px;
  flex-wrap: wrap;
}

/* EN/FA language toggle in the page header. Sits at the right of the
   header row; JS flips every [data-fa] element on the page in place. */
.mc-lang-toggle {
  display: inline-flex;
  align-items: stretch;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: var(--muted);
  user-select: none;
  white-space: nowrap;
  transition: background 0.1s ease;
}
.mc-lang-toggle:hover { background: var(--bg-soft, #f7f9fb); }
.mc-lang-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.mc-lang-toggle-opt {
  padding: 6px 11px;
  border-radius: 999px;
  color: var(--muted);
  letter-spacing: 0.04em;
  transition: background 0.1s ease, color 0.1s ease;
}
.mc-lang-toggle-opt.active {
  background: var(--ink);
  color: #fff;
}

/* Persian (Farsi) text rendering: right-to-left, comfortable line-height,
   and a Persian-friendly font stack. The toggle JS adds dir="rtl" and the
   .lang-fa class to each [data-fa] element when the language flips to FA.
   Inline English fragments (numbers, MLS#, neighbourhoods) flow correctly
   thanks to the browser's bidi algorithm. */
.lang-fa {
  font-family: "Vazirmatn", "IRANSans", "Tahoma", "Arial", sans-serif;
  line-height: 1.75;
  letter-spacing: 0;
}

/* ===== Buttons ===== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.1s ease;
}
.btn:hover { background: var(--bg); text-decoration: none; }
.btn.primary {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.btn.primary:hover { background: #1a3047; }
.btn.danger { color: var(--red); border-color: var(--red-bg); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { color: var(--ink); }

/* ===== Cards ===== */

.card {
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 18px 20px;
}
.card + .card { margin-top: 16px; }

.card h2 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--accent);
  margin: 0 0 12px;
  font-weight: 700;
}
.card h3 {
  font-size: 15px;
  margin: 0 0 8px;
  font-weight: 600;
}

/* ===== Stat tiles ===== */

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.stat {
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 16px 18px;
}
.stat .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--muted);
  font-weight: 600;
}
.stat .value {
  font-size: 26px;
  font-weight: 700;
  margin-top: 4px;
  letter-spacing: -0.4px;
}
.stat .sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.stat .sub.green { color: var(--green); }
.stat .sub.red   { color: var(--red); }

/* Generic text-color utilities reused across the Dashboard (price-drop
   highlights, hot-match callouts) and elsewhere. The .stat-scoped ones above
   are kept for backwards compat — both selectors hit the same color. */
.green { color: var(--green); }
.red   { color: var(--red); }

/* Stat tiles act as clickable hero links into the deeper page. Reset the
   browser default anchor color/underline so the typographic hierarchy stays
   the same as when these were plain <div>s. */
a.stat { display: block; text-decoration: none; color: inherit; cursor: pointer; }
a.stat:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.08); }

/* Settings — daily briefing topic toggles. Each row is a clickable label
   wrapping a checkbox + descriptive copy, so the entire row is the hit
   target (the spec asks for "toggles" — we render them as accessible
   checkboxes since this is a server-rendered, no-JS surface). */
.topic-list { display: flex; flex-direction: column; gap: 6px; }
.topic-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  cursor: pointer;
  background: var(--card);
}
.topic-row:hover { border-color: var(--line); }
.topic-row input[type="checkbox"] {
  width: 16px; height: 16px;
  margin-top: 2px;
  accent-color: var(--ink);
}
.topic-label { font-size: 13.5px; font-weight: 600; }
.topic-hint  { font-size: 12px; color: var(--muted); margin-top: 1px; }

/* Watchlist card — read-only reason + related-client chips, sitting at the
   bottom of the card body inside the parent anchor. The chips link out to
   the client when present; event.stopPropagation keeps the click from
   bubbling up to the card-wide anchor. */
.watch-reason {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* MLS Search card — "Matches: Abbas, George" callout. Sits at the bottom
   of the card body. Each client name is a clickable chip that escapes the
   parent anchor via event.stopPropagation in the onclick handler. */
.match-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--hairline);
  font-size: 11.5px;
}
.match-line-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 700;
  margin-right: 2px;
}
.match-chip {
  text-decoration: none;
}
.match-chip:hover { filter: brightness(0.95); }

/* Client suggestion "why this matched" line — single-line summary under the
   listed-by stamp on suggested-listing cards. */
.match-reasons {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--muted);
  border-top: 1px dashed var(--hairline);
  padding-top: 6px;
  line-height: 1.4;
}

/* Calendar agenda — per-day section grouping (My commitments, Relevant open
   houses, Other open houses). A subdued header sits above each group so the
   eye can skip past sections that aren't relevant on a given day. */
.cal-section { margin-top: 10px; }
.cal-section + .cal-section { margin-top: 14px; }
.cal-section-head {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 6px;
}
.cal-section-collapsed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  font-size: 13px;
  color: var(--muted);
}

/* Inactive-listing photo overlays. The .photo container is position:
   relative; these absolute-positioned siblings paint on top of the <img>
   so the red/grey wash is actually visible (the old gradient backdrop sat
   behind the image and got covered). Red = SOLD, grey = expired / stale
   / cancelled / withdrawn / etc. */
.photo-overlay-sold,
.photo-overlay-inactive {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.photo-overlay-sold     { background: rgba(160, 50, 30, 0.45); }
.photo-overlay-inactive { background: rgba(15, 23, 42, 0.30); }

/* Client shortlist card — outcome panel (recorded sale / expiration / etc.)
   sits below the photo+facts and above the per-assignment note. */
.shortlist-outcome {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

/* Client header inline "Add to shortlist" combo — mirror of the watchlist
   add form but sits in the page-header row. Flex layout so input + button
   sit on one line; the dropdown overlays via position: absolute. */
.shortlist-add {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

/* Watchlist add-form combobox. The input + dropdown share a relatively
   positioned wrapper so the dropdown can absolute-position right below the
   field without disturbing the rest of the page layout. */
.combo { position: relative; }
.combo-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  max-height: 320px;
  overflow-y: auto;
  z-index: 20;
}
.combo-item {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--hairline);
}
.combo-item:last-child { border-bottom: none; }
.combo-item:hover { background: var(--bg); }
.combo-item-main { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.combo-item-sub  { font-size: 11.5px; color: var(--muted); margin-top: 1px; }

/* Action Board "New action" card — always visible at the top of the page.
   Inherits .card sizing/shadow; the only extra rule is a bottom margin so it
   doesn't crowd the filter-tab strip immediately below it. */
.ab-new { margin-bottom: 18px; }

/* Action Board filter tabs. Horizontal pill row that scrolls sideways on
   narrow screens instead of wrapping (the per-tab badge gives them enough
   weight that wrapping looks broken). */
.ab-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.ab-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.ab-tab:hover { color: var(--ink); border-color: var(--ink); }
.ab-tab.active {
  background: var(--ink, #0f172a);
  border-color: var(--ink, #0f172a);
  color: #fff;
}
.ab-tab-count {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  text-align: center;
  border-radius: 999px;
  background: rgba(0,0,0,0.08);
  font-size: 11px;
  font-weight: 700;
}
.ab-tab.active .ab-tab-count { background: rgba(255,255,255,0.18); }

/* Dashboard "Revenue radar" — auto-fit grid of compact client cards.
   Cards need enough room for two side-by-side buttons; we widen the minmax
   so they don't get squeezed and use a 2-col grid (not flex) for the action
   row so the buttons share width evenly without overflowing. */
.revenue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.rev-card {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 14px;
  background: var(--card);
  display: flex;
  flex-direction: column;
}
.rev-card-name { font-weight: 600; font-size: 14px; }
.rev-card-meta { color: var(--muted); font-size: 12px; margin-top: 2px; }
.rev-card-headline { margin-top: 8px; font-size: 13px; }
.rev-card-next { color: var(--muted); font-size: 12px; margin-top: 4px; }
.rev-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 12px;
}
.rev-card-actions .btn {
  width: 100%;
  justify-content: center;
  text-align: center;
  padding-left: 8px;
  padding-right: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dashboard "Market snapshot" — each .ms-area is one city, with a
   3-column grid of structure categories (detached / attached / apartment).
   On narrow screens the inner grid collapses to a single column. */
.ms-area + .ms-area { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.ms-area-name {
  font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
  margin-bottom: 8px;
}
.ms-area-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.ms-cell {
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 10px 12px;
}
.ms-cell-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 600;
}
.ms-cell-count { color: var(--faint); font-weight: 500; }
.ms-cell-value {
  font-size: 17px; font-weight: 700; margin-top: 4px;
  letter-spacing: -0.2px;
}
.ms-cell-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
@media (max-width: 720px) { .ms-area-grid { grid-template-columns: 1fr; } }

/* ===== Chips / pills ===== */

.chip {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  background: var(--grey-bg); color: var(--grey);
}
.chip.green { background: var(--green-bg); color: var(--green); }
.chip.red   { background: var(--red-bg);   color: var(--red); }
.chip.amber { background: var(--amber-bg); color: var(--amber); }
.chip.ink   { background: var(--ink); color: #fff; }
.chip.outline { background: transparent; border: 1px solid var(--line); color: var(--muted); }

/* ===== Two-column layouts ===== */

.two-col       { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
.two-col-3070  { display: grid; grid-template-columns: 7fr 3fr; gap: 20px; }
.two-col-5050  { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* The global '.card + .card { margin-top: 16px }' rule (defined above) adds
 * a vertical gap between stacked cards. When the cards are direct children
 * of a two-col grid they're siblings on a row — the rule fires anyway,
 * shifting the second card 16px below the first. Reset it inside grids so
 * tops align. The grid gap already spaces the columns. */
.two-col       > .card + .card,
.two-col-3070  > .card + .card,
.two-col-5050  > .card + .card { margin-top: 0; }

/* ===== Listing card ===== */

.listing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.listing-card {
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.1s ease;
}
.listing-card:hover { transform: translateY(-1px); }
.listing-card .photo {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #cfd8df 0%, #9aa6b2 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 600; opacity: 0.9;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}
.listing-card .photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Photo corner badges. Each card can show 0..N chips stacked in the top-left;
   .photo-chips is the flex container so multiple chips (price drop + open
   house + new) lay out on a single row and wrap onto a second row when the
   card is narrow. Chips keep their natural .chip.red / .chip.green / etc.
   colors — no white-tint override here. A subtle shadow keeps them legible
   against a photo background. */
.listing-card .photo .photo-chips {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: calc(100% - 60px);  /* leave room for the ☆ Watch / × button on the right */
  z-index: 1;
}
.listing-card .photo .photo-chips .chip {
  box-shadow: 0 1px 2px rgba(13, 36, 54, 0.18);
}
.listing-card .body { padding: 12px 14px 14px; }
.listing-card .price { font-weight: 700; font-size: 17px; }
.listing-card .addr { color: var(--muted); margin-top: 1px; font-size: 13px; }
.listing-card .facts {
  display: flex; gap: 10px;
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--hairline);
}
.listing-card .facts strong { color: var(--ink); font-weight: 600; }
.listing-card .mls {
  font-size: 11px;
  color: var(--faint);
  margin-top: 6px;
  letter-spacing: 0.4px;
}
.listing-card .listed-by {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 4px;
  display: flex;
  gap: 4px;
  align-items: center;
}
.listing-card .listed-by .who { color: var(--ink); font-weight: 600; }
.listing-card .card-note {
  font-size: 11.5px;
  color: var(--muted);
  font-style: italic;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--hairline);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.45;
}

/* ===== Card remove button (× on photo corner) ===== */

.card-remove {
  width: 26px; height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
  font-weight: 400;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(13, 36, 54, 0.15);
  transition: background 0.1s ease, transform 0.1s ease;
  padding: 0;
}
.card-remove:hover {
  background: var(--red-bg);
  color: var(--red);
}

/* "★ Watching" badge — toggleable variant lets the user one-click remove
   from search results. Styled like the static badge but with hover affordance. */
.card-watching {
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  padding: 4px 8px;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 1px 2px rgba(13, 36, 54, 0.1);
  transition: background 0.1s ease, color 0.1s ease;
}
.card-watching:hover {
  background: var(--red-bg);
  color: var(--red);
}
.card-watching:hover .card-watching-default { display: none; }
.card-watching .card-watching-hover { display: none; }
.card-watching:hover .card-watching-hover { display: inline; }

/* ===== Avatar (client initials) ===== */

.avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}
.avatar.amber { background: var(--amber); }
.avatar.green { background: var(--green); }
.avatar.red   { background: var(--red); }
.avatar.grey  { background: var(--grey); }

/* ===== Client row ===== */

.client-row {
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  align-items: center;
  gap: 14px;
}
.client-row + .client-row { margin-top: 10px; }
.client-row:hover { background: #fbfcfd; }

.client-row .name { font-weight: 600; font-size: 14px; color: var(--ink); }
.client-row .motivation { color: var(--muted); font-size: 12.5px; margin-top: 1px; }
.client-row .budget { color: var(--ink); font-size: 13px; font-weight: 600; text-align: right; }
.client-row .budget .sub { color: var(--muted); font-weight: 400; font-size: 11px; margin-top: 2px; }

/* ===== Tabs ===== */

.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}
.tabs a {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  font-weight: 500;
  margin-bottom: -1px;
}
.tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs a.active {
  color: var(--ink);
  border-bottom-color: var(--ink);
  font-weight: 600;
}
.tabs a .count {
  color: var(--faint);
  font-weight: 500;
  margin-left: 4px;
}

/* ===== Breadcrumb ===== */

.crumb {
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 12px;
}
.crumb .sep { margin: 0 6px; color: var(--faint); }

/* ===== Label/value grid (Contact, Preferences, etc.) ===== */

.kv {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  font-size: 13.5px;
}
.kv > .k { color: var(--muted); }
.kv > .v { color: var(--ink); word-wrap: break-word; min-width: 0; }
.kv > .v .chip { margin: 1px 2px 1px 0; }

/* ===== Page-header avatar variant (larger) ===== */

.avatar.lg {
  width: 52px; height: 52px;
  font-size: 18px;
}

/* ===== Filter form (search page, etc.) ===== */

.filter-form {
  padding: 14px 16px;
  margin-bottom: 14px;
}
.filter-row {
  display: grid;
  gap: 10px;
}
.filter-row--top    { grid-template-columns: 2fr 1fr 1fr;        margin-bottom: 10px; }
.filter-row--mid    { grid-template-columns: repeat(6, 1fr);     margin-bottom: 10px; }
.filter-row--bottom {
  /* Flex (not grid) so the checkbox / spacer / sort / button can size
     themselves naturally. The spacer expands to push sort + button right. */
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
}
.filter-label {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 4px;
}
.filter-cell--sort { min-width: 180px; }
.filter-spacer { flex: 1; min-width: 8px; }
.filter-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  padding: 9px 0;            /* match the .fld vertical rhythm so the row aligns */
  user-select: none;
}
.filter-checkbox input { width: 16px; height: 16px; cursor: pointer; }
.filter-submit {
  padding: 9px 18px;
  align-self: end;
}

@media (max-width: 980px) {
  .filter-row--mid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .filter-row--top { grid-template-columns: 1fr; }
  .filter-row--mid { grid-template-columns: repeat(2, 1fr); }
  .filter-row--bottom { flex-wrap: wrap; }
  .filter-spacer { display: none; }
}

/* ===== Search bar (above lists) ===== */

.toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.toolbar .search {
  flex: 1; min-width: 200px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 9px 14px;
  font-size: 14px;
  font-family: inherit;
  background: var(--card);
  color: var(--ink);
}
.toolbar .search:focus {
  outline: none; border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(13, 36, 54, 0.08);
}

/* ===== Task row ===== */

.task-row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background: var(--card);
  box-shadow: var(--shadow);
}
.task-row + .task-row { margin-top: 8px; }
.task-row .checkbox {
  width: 18px; height: 18px;
  border: 1.5px solid var(--line);
  border-radius: 5px;
  cursor: pointer;
}
.task-row.done .checkbox {
  background: var(--green);
  border-color: var(--green);
  position: relative;
}
.task-row.done .checkbox::after {
  content: '\2713'; color: #fff; font-size: 12px; font-weight: 700;
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.task-row.done .title { text-decoration: line-through; color: var(--muted); }
.task-row .title { font-size: 14px; }
.task-row .meta { color: var(--muted); font-size: 12px; }
.task-row .meta .client-tag {
  display: inline-block;
  padding: 2px 7px;
  background: var(--bg);
  border-radius: 4px;
  color: var(--ink);
  font-weight: 500;
  margin-left: 6px;
}
/* Right-column cluster: relative-time + edit link, stacked vertically so
   long titles don't squeeze the edit affordance off-screen. */
.task-row .task-row-end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.task-row .task-edit {
  color: var(--muted);
  text-decoration: none;
  font-size: 11px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.task-row .task-edit:hover {
  color: var(--ink);
  background: var(--bg);
}

/* ===== Form fields =====
   .field is the label-on-top wrapper used by profile/task forms.
   .fld is a standalone class for inputs/selects that sit in a toolbar or
   filter bar without a label wrapper. Both produce the same height so a
   <select> next to an <input> aligns flush. */

.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 6px;
}

.field input, .field textarea, .field select,
.fld {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  background: var(--card);
  box-sizing: border-box;
  line-height: 1.4;
}
.field input:focus, .field textarea:focus, .field select:focus,
.fld:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(13, 36, 54, 0.08);
}

/* <select> normalisation — by default browsers add native padding for the
   dropdown chevron that pushes <select> taller than a sibling <input>.
   Stripping the native appearance and painting our own chevron via a
   data-URL SVG fixes the height mismatch site-wide. */
.field select,
select.fld,
.toolbar select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%235b6b7a' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}

/* Small variant — for compact toolbars where the standard height is too
   chunky (sort dropdown next to a few inline labels). */
.fld-sm {
  padding: 7px 10px;
  font-size: 13px;
}
select.fld-sm { padding-right: 28px; background-position: right 10px center; }

/* ===== Banners (errors / notices on auth pages) ===== */

.banner {
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: 13px;
  margin-bottom: 14px;
  overflow: hidden;
}
.banner.error  { background: var(--red-bg);   color: var(--red); }
.banner.notice {
  background: var(--green-bg);
  color: var(--green);
  /* Success notices auto-dismiss: 4.5s visible, then fade + collapse over
     0.5s so they don't leave permanent empty space. Errors stay until the
     next navigation — losing an error message would be worse than the
     occasional dangling success toast. */
  animation: banner-dismiss 0.5s ease-out 4.5s forwards;
}
@keyframes banner-dismiss {
  to {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    border-width: 0;
  }
}
/* Respect users who've asked the OS to reduce motion — just snap-hide instead. */
@media (prefers-reduced-motion: reduce) {
  .banner.notice { animation-duration: 0.01s; animation-delay: 4.5s; }
}

/* ===== Empty state ===== */

.empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
}
.empty .icon {
  font-size: 28px;
  opacity: 0.4;
  margin-bottom: 8px;
}

/* ===== Login / centered page ===== */

.centered {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.auth-card {
  width: 380px;
  max-width: 100%;
  background: var(--card);
  border-radius: var(--r);
  box-shadow: 0 8px 24px rgba(13, 36, 54, 0.1), var(--shadow);
  padding: 36px 32px;
}
.auth-card .brand {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 22px;
}
.auth-card .brand .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
}
.auth-card h1 { font-size: 18px; margin: 0 0 4px; font-weight: 700; }
.auth-card .sub { color: var(--muted); margin: 0 0 24px; font-size: 13px; }
.auth-card .btn.primary { width: 100%; justify-content: center; padding: 10px 14px; }
.auth-card .legal { color: var(--faint); font-size: 11px; text-align: center; margin-top: 18px; }
.auth-card .legal a { color: var(--muted); }

.otp-input {
  letter-spacing: 18px !important;
  text-align: center;
  font-size: 22px !important;
  font-weight: 700 !important;
  padding: 14px !important;
  font-variant-numeric: tabular-nums;
}

/* ===== Calendar ===== */

.week-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 22px;
}
.week-strip .day {
  padding: 10px 12px;
  border-right: 1px solid var(--line);
  min-height: 96px;
  transition: background 0.1s ease;
  text-decoration: none;
  color: inherit;
  display: block;
}
.week-strip .day:last-child { border-right: none; }
.week-strip .day:hover { background: var(--bg); text-decoration: none; }
.week-strip .day.today {
  background: #fffdf3;
  box-shadow: inset 0 2px 0 var(--amber);
}
.week-strip .day .name {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--muted);
  font-weight: 600;
}
.week-strip .day .num {
  font-size: 20px;
  font-weight: 700;
  margin-top: 2px;
  letter-spacing: -0.4px;
}
.week-strip .day.today .num { color: var(--amber); }
.week-strip .day .dots {
  display: flex; gap: 3px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.week-strip .day .ev-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--grey);
}
.week-strip .day .ev-dot.task      { background: var(--link); }
.week-strip .day .ev-dot.openhouse { background: var(--amber); }
.week-strip .day .ev-label {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.35;
}

.agenda-day { margin-bottom: 24px; }
.agenda-day-head {
  display: flex; align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.agenda-day-head .pill {
  background: var(--ink);
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
}
.agenda-day-head .title { font-size: 15px; font-weight: 700; }
.agenda-day-head .meta { margin-left: auto; font-size: 12px; color: var(--muted); }

.event {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 14px;
  padding: 10px 14px;
  background: var(--card);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow);
  margin-bottom: 8px;
  align-items: center;
}
.event.past { opacity: 0.55; }
.event.done .title { text-decoration: line-through; color: var(--muted); }
.event .time {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.event .time .dur {
  display: block;
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
}
.event .meta { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.event .title { font-size: 14px; font-weight: 600; }
.event .tag-strip { display: inline-flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.event.task      { border-left: 3px solid var(--link); }
.event.openhouse { border-left: 3px solid var(--amber); }

.legend {
  display: flex; flex-wrap: wrap; gap: 14px;
  font-size: 12px; color: var(--muted);
  margin: 0 0 18px;
}
.legend .li { display: inline-flex; align-items: center; gap: 6px; }
.legend .sw {
  width: 10px; height: 10px; border-radius: 3px;
  display: inline-block;
}
.legend .sw.task { background: var(--link); }
.legend .sw.openhouse { background: var(--amber); }

@media (max-width: 980px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: relative; height: auto; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .two-col, .two-col-3070, .two-col-5050 { grid-template-columns: 1fr; }
  .main { padding: 20px; }
  .week-strip { grid-template-columns: repeat(4, 1fr); }
  .week-strip .day:nth-child(4n) { border-right: none; }
}

/* ===== Market Command (brand homepage at /) =================================
   Distinct visual rhythm from /dashboard: bigger eyebrows, more white space,
   single-column flow. Apple Health + Bloomberg Terminal feel — calm authority,
   minimal chrome, large readable type. */

.mc-section { margin-bottom: 28px; }
.mc-section:last-child { margin-bottom: 0; }

.mc-eyebrow {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 10px 2px;
}

.mc-card {
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 22px 24px;
}

/* ---- Tab strip ----------------------------------------------------------- */

.mc-tabs {
  display: flex;
  gap: 4px;
  margin: 4px 0 24px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.mc-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.1s ease, border-color 0.1s ease;
}
.mc-tab:hover { color: var(--ink); text-decoration: none; }
.mc-tab.active { color: var(--ink); border-bottom-color: var(--ink); }
.mc-tab.soon { cursor: default; opacity: 0.55; }
.mc-tab.soon:hover { color: var(--muted); }
.mc-soon {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--hairline);
  color: var(--muted);
  font-weight: 700;
}

/* ---- Market Pulse -------------------------------------------------------- */

.mc-pulse-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  margin-bottom: 22px;
}

.mc-temp-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--muted);
}
.mc-temp-value {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -1.5px;
  line-height: 1.05;
  margin-top: 4px;
  color: var(--ink);
}
.mc-temp-over { font-size: 18px; font-weight: 500; color: var(--faint); letter-spacing: 0; }
.mc-temp-tag { color: var(--muted); font-size: 13px; margin-top: 6px; }
.mc-temp-sub { color: var(--faint); font-size: 12px; margin-top: 6px; line-height: 1.35; }

.mc-temp-gauge { position: relative; padding-bottom: 22px; }
.mc-temp-gauge-bar {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #2755a6 0%,
    #6c8ec4 25%,
    #b9bcb6 50%,
    #d4a86a 75%,
    #a13e2a 100%
  );
}
.mc-temp-gauge-marker {
  position: absolute;
  top: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid #ffffff;
  box-shadow: 0 1px 4px rgba(13, 36, 54, 0.25);
  transform: translateX(-50%);
}
.mc-temp-gauge-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
  font-weight: 600;
}

.mc-segments {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.mc-seg-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 600;
}
.mc-seg-verdict {
  font-size: 14.5px;
  font-weight: 600;
  margin-top: 4px;
  color: var(--ink);
}
.mc-tone-warm { color: var(--green); }
.mc-tone-soft { color: var(--amber); }
.mc-tone-cool { color: var(--red); }

.mc-thesis {
  margin: 18px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ---- Daily War Room ------------------------------------------------------ */

.mc-war-hero {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
}

.mc-war-row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 18px;
  padding: 12px 0;
}
.mc-war-row + .mc-war-row { border-top: 1px solid var(--hairline); }
.mc-war-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--accent);
  padding-top: 3px;
}
.mc-war-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.mc-war-bullets {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mc-war-bullets li {
  position: relative;
  padding-left: 14px;
  margin-bottom: 4px;
}
.mc-war-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}
.mc-war-bullets li:last-child { margin-bottom: 0; }
.mc-war-empty {
  font-size: 13.5px;
  color: var(--muted);
  text-align: center;
  padding: 18px 12px;
}

/* ---- Client Questions (Q&A blocks) -------------------------------------- */

.mc-qa { padding: 14px 0; }
.mc-qa + .mc-qa { border-top: 1px solid var(--hairline); }
.mc-qa-q {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1.4;
}
.mc-qa-a {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.mc-qa-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.mc-mini { padding: 5px 10px; font-size: 11.5px; }

/* ---- Today's Moves ------------------------------------------------------- */

.mc-moves { padding: 6px 8px; }
.mc-move {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: flex-start;
  gap: 14px;
  padding: 14px 12px;
}
.mc-move + .mc-move { border-top: 1px solid var(--hairline); }
.mc-move-num {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg);
  color: var(--accent);
  font-weight: 700;
  font-size: 12.5px;
}
.mc-move-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}
.mc-move-reason {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.5;
}
.mc-move-cta { font-size: 12.5px; padding: 7px 12px; }

/* ---- Content Idea ------------------------------------------------------- */

.mc-content-kind {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 8px;
}
.mc-content-hook {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.3px;
  color: var(--ink);
  margin-bottom: 12px;
}
.mc-content-body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.mc-content-cta { display: flex; flex-wrap: wrap; gap: 8px; }

/* Shared reveal-panel pattern — used by Content Idea (script/caption) and
   What Clients Will Ask Today (email/voice). Pair with [hidden] for the
   collapsed state; the section-specific inline JS toggles the attribute. */
.mc-reveal {
  margin: 0 0 14px;
  padding: 14px 16px;
  background: var(--surface-soft, #f6f7f9);
  border: 1px solid var(--line, #e6e8ec);
  border-radius: 10px;
}
.mc-reveal[hidden] { display: none; }
.mc-reveal-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 8px;
}
.mc-reveal-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 10px;
  white-space: pre-wrap;
}
.mc-reveal-subject {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.mc-content-cycle-pos {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* ---- Client Briefing tab ----------------------------------------------- */

.cb-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.cb-chip {
  appearance: none;
  border: 1px solid var(--line, #e6e8ec);
  background: var(--card, #fff);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.cb-chip:hover { background: var(--surface-soft, #f6f7f9); }
.cb-chip.active {
  background: var(--ink);
  color: var(--card, #fff);
  border-color: var(--ink);
}

.cb-card[hidden] { display: none; }
.cb-card { padding: 26px 28px; }

.cb-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--accent, #355cff);
  margin-bottom: 10px;
}
.cb-headline {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.3px;
  color: var(--ink);
  margin: 0 0 12px;
}
.cb-intro {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 18px;
}

.cb-callouts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 18px;
}
@media (min-width: 720px) {
  .cb-callouts { grid-template-columns: 1fr 1fr; }
}
.cb-callout {
  padding: 12px 14px;
  background: var(--surface-soft, #f6f7f9);
  border-radius: 10px;
  border: 1px solid var(--line, #e6e8ec);
}
.cb-callout-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 4px;
}
.cb-callout-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
}

.cb-qa { margin-bottom: 18px; }
.cb-qa-item { padding: 12px 0; }
.cb-qa-item + .cb-qa-item { border-top: 1px solid var(--hairline, #ebeef2); }
.cb-qa-q {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.cb-qa-a {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-soft, #475063);
}

.cb-cta {
  font-size: 14px;
  font-style: italic;
  color: var(--ink-soft, #475063);
  padding: 12px 14px;
  background: var(--surface-soft, #f6f7f9);
  border-left: 3px solid var(--accent, #355cff);
  border-radius: 0 8px 8px 0;
  margin: 0 0 18px;
}

.cb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---- Signal Feed -------------------------------------------------------- */

.mc-signal-list { list-style: none; margin: 0; padding: 0; }
.mc-signal {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 14px;
  padding: 12px 0;
}
.mc-signal + .mc-signal { border-top: 1px solid var(--hairline); }
.mc-signal-num {
  width: 24px; height: 24px; border-radius: 6px;
  background: var(--bg);
  color: var(--muted);
  font-weight: 700;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.mc-signal-source {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--muted);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.mc-signal-date {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: none;
  font-weight: 500;
  color: var(--faint);
}
.mc-signal-headline {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 2px;
  line-height: 1.4;
  text-decoration: none;
}
.mc-signal-headline:hover { text-decoration: underline; text-decoration-color: var(--line); }
.mc-signal-empty {
  font-size: 13.5px;
  color: var(--muted);
  text-align: center;
  padding: 28px 18px;
}
.mc-signal-impact {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 4px;
  line-height: 1.55;
}
.mc-signal-impact-label {
  font-weight: 700;
  color: var(--accent);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-right: 4px;
}

/* ---- Market Signals tab -------------------------------------------------
   Top strip (overall signal + 4 master scores) and the responsive 2-up
   grid of 8 signal cards. Mirrors the .mc-* prefix used by the Today tab
   so colour tones (.mc-tone-warm/.mc-tone-soft/.mc-tone-cool) reuse the
   existing palette. */

.mc-signals-head {
  display: grid;
  gap: 22px;
}
.mc-signals-head-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: start;
}
.mc-signals-overall {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.6px;
  line-height: 1.1;
  margin-top: 4px;
  color: var(--ink);
}
.mc-signals-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.mc-signals-meta-chip {
  text-align: right;
  min-width: 120px;
}
.mc-signals-meta-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-weight: 700;
}
.mc-signals-meta-value {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 2px;
}

.mc-signals-scores {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 18px 0 6px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.mc-signals-score {
  padding: 4px 0 8px;
}
.mc-signals-score-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 700;
}
.mc-signals-score-value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.6px;
  line-height: 1.1;
  margin: 4px 0 8px;
  color: var(--ink);
}
.mc-signals-score-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--hairline);
  overflow: hidden;
}
.mc-signals-score-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #2755a6 0%, #6c8ec4 35%, #d4a86a 70%, #a13e2a 100%);
}

/* ---- Card grid ---- */

.mc-signals-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.mc-signals-card {
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mc-signals-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mc-signals-card-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-weight: 700;
}
.mc-signals-card-headline {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.mc-signals-card-score {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.05;
  color: var(--ink);
}
.mc-signals-card-status {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-soft);
}
.mc-signals-card-interp {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.mc-signals-card-secondary {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}
.mc-signals-card-action {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
}
.mc-signals-card-action-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  font-weight: 700;
  margin-right: 6px;
}
.mc-signals-card-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 2px;
}

/* Trend chip */
.mc-signals-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  background: var(--hairline);
  padding: 2px 8px;
  border-radius: 999px;
}

/* Confidence chip */
.mc-signals-conf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.mc-signals-conf-dots { letter-spacing: 1px; color: var(--ink-soft); }
.mc-signals-conf.mc-conf-high  .mc-signals-conf-dots { color: var(--green); }
.mc-signals-conf.mc-conf-medium .mc-signals-conf-dots { color: var(--amber); }
.mc-signals-conf.mc-conf-low   .mc-signals-conf-dots { color: var(--red); }

/* Segment breakdown list (Inventory Pressure card) */
.mc-signals-segs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  padding: 4px 0;
}
.mc-signals-seg {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mc-signals-seg-label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 600;
}
.mc-signals-seg-status {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.mc-signals-seg-detail {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
}

/* ---- Opportunity Radar tab ---------------------------------------------
   Top-strip thesis (4 columns), opportunity card grid (2 columns with rich
   sub-score bars), Deal Radar (5 stacked sections with listing rows),
   risk-zones list, and 3 strategy briefs. Reuses .mc-tone-* + .mc-conf-*
   palettes from the Today + Market Signals tabs. */

/* Top-strip thesis */
.mc-opp-thesis-headline {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 18px;
}
.mc-opp-thesis-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}
.mc-opp-thesis-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mc-opp-thesis-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-weight: 700;
}
.mc-opp-thesis-body {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* Opportunity card grid */
.mc-opp-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.mc-opp-card {
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mc-opp-card-head {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
}
.mc-opp-card-rank {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mc-opp-card-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
}
.mc-opp-card-type {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-weight: 700;
  margin-top: 2px;
}
.mc-opp-card-score {
  text-align: right;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.mc-opp-card-score-value {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.6px;
  color: var(--ink);
  line-height: 1;
}
.mc-opp-card-score-over {
  font-size: 12px;
  color: var(--faint);
  font-weight: 500;
}

/* Sub-score bars — 5 columns, narrow on a 2-up card grid (~80-120px each).
   Label + score are stacked vertically per column because labels like
   "Long-Term Fundamentals" / "Rental Strength" wrap to 2 lines at that
   width; a side-by-side flex layout caused the score to collide with the
   neighbouring column's wrapped label. Label gets a 2-line min-height so
   the bar/score rows align cleanly across columns. */
.mc-opp-subscores {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}
.mc-opp-sub {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.mc-opp-sub-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.mc-opp-sub-label {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.25;
  /* Reserve room for two lines so the score rows below align across
     columns even when one label wraps and another doesn't. */
  min-height: 2.5em;
}
.mc-opp-sub-score {
  display: block;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--ink);
  line-height: 1;
}
.mc-opp-sub-bar {
  height: 5px;
  border-radius: 999px;
  background: var(--hairline);
  overflow: hidden;
}
.mc-opp-sub-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #2755a6 0%, #6c8ec4 35%, #d4a86a 70%, #a13e2a 100%);
}
.mc-opp-sub-conf {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Why this is an opportunity + risks */
.mc-opp-card-why-now {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.mc-opp-card-bullets {
  margin-bottom: 10px;
}
.mc-opp-card-bullets-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 4px;
}
.mc-opp-card-bullets-label-risk {
  color: var(--red);
}
.mc-opp-card-bullets ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.mc-opp-card-bullets li {
  margin-bottom: 2px;
}

/* Strategy + client script */
.mc-opp-card-strategy {
  padding: 12px 14px;
  background: var(--bg);
  border-radius: 8px;
}
.mc-opp-card-strategy-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 4px;
}
.mc-opp-card-strategy-body {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
.mc-opp-card-script {
  margin: 0;
  padding: 0;
  border-left: 3px solid var(--ink);
  padding-left: 12px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  font-style: italic;
}

/* Best-for chips */
.mc-opp-card-foot {
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}
.mc-opp-card-fit {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.mc-opp-card-fit-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-weight: 700;
  margin-right: 4px;
}
.mc-opp-fit-chip {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--hairline);
  padding: 3px 8px;
  border-radius: 999px;
}

/* Deal Radar */
.mc-opp-deal {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.mc-opp-deal-section {
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 20px 22px;
}
.mc-opp-deal-head {
  margin-bottom: 6px;
}
.mc-opp-deal-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.mc-opp-deal-narrative {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.mc-opp-deal-empty {
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
}
.mc-opp-deal-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.mc-opp-deal-row {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.12s ease, background 0.12s ease;
}
.mc-opp-deal-row:hover {
  border-color: var(--ink);
  background: var(--bg);
  text-decoration: none;
  color: var(--ink);
}
.mc-opp-deal-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
}
.mc-opp-deal-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
}
.mc-opp-deal-facts {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
}
.mc-opp-deal-dom {
  font-weight: 600;
  color: var(--ink-soft);
}
.mc-opp-deal-where {
  font-size: 12px;
  color: var(--faint);
  margin-top: 2px;
}
.mc-opp-deal-tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 999px;
  font-weight: 700;
}
.mc-opp-deal-tag-cool { background: var(--red-bg);   color: var(--red);   }
.mc-opp-deal-tag-soft { background: var(--amber-bg); color: var(--amber); }
.mc-opp-deal-tag-warm { background: var(--green-bg); color: var(--green); }

/* Building cluster (Deal Radar) */
.mc-opp-cluster {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}
.mc-opp-cluster:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.mc-opp-cluster-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.mc-opp-cluster-street {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}
.mc-opp-cluster-count {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 600;
}

/* Risk zones */
.mc-opp-risks {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mc-opp-risk {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.mc-opp-risk-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--red-bg);
  color: var(--red);
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mc-opp-risk-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.mc-opp-risk-text {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-top: 2px;
}

/* Strategy briefs */
.mc-opp-briefs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.mc-opp-brief {
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mc-opp-brief-tag {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--accent);
}
.mc-opp-brief-headline {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.mc-opp-brief-action {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.mc-opp-brief-avoid {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: 8px;
}
.mc-opp-brief-avoid-label {
  display: inline-block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--red);
  margin-right: 6px;
}
.mc-opp-brief-quote {
  margin: 0;
  padding: 0 0 0 12px;
  border-left: 3px solid var(--ink);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
  font-style: italic;
}
.mc-opp-brief-actions {
  margin-top: auto;
  padding-top: 4px;
}

/* ============================================================
   Playbook tabs (.mc-pb-*) — Buyer Playbook + Seller Playbook
   Shared with both renderers in render-buyer-playbook.ts and
   render-seller-playbook.ts.
   ============================================================ */

/* Hero card on top of each playbook (Strategy Today). */
.mc-pb-hero {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mc-pb-hero-row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 18px;
  align-items: baseline;
}
.mc-pb-hero-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--muted);
}
.mc-pb-hero-value {
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
}
.mc-pb-hero-body {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
}
.mc-pb-hero-advice {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.5;
}

/* Buyer Power Zones — three columns, color-toned by leverage tier. */
.mc-pb-zones {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.mc-pb-zone {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mc-pb-zone-strong   { border-top: 3px solid var(--green); }
.mc-pb-zone-moderate { border-top: 3px solid var(--amber); }
.mc-pb-zone-low      { border-top: 3px solid var(--red); }
.mc-pb-zone-head {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--ink);
}
.mc-pb-zone-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mc-pb-zone-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mc-pb-zone-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.mc-pb-zone-reason {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}

/* MLS-input tool cards (Negotiation Angle, Trap Detector, etc.). */
.mc-pb-tool {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mc-pb-tool-blurb {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.mc-pb-tool-form {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.mc-pb-tool-form .fld { flex: 1 1 240px; }
.mc-pb-tool-form-stack {
  flex-direction: column;
  align-items: stretch;
}
/* In the column-stacked variant flex-basis maps to height, so inputs balloon
   vertically — reset to auto and let each control size itself. */
.mc-pb-tool-form-stack .fld { flex: 0 0 auto; }
.mc-pb-textarea {
  min-height: 110px;
  resize: vertical;
  font-family: inherit;
}
.mc-pb-error {
  padding: 10px 14px;
  background: rgba(220, 76, 100, 0.08);
  color: var(--red);
  font-size: 13px;
  border-radius: 10px;
  border: 1px solid rgba(220, 76, 100, 0.25);
}

/* Inline analysis result block below each form. */
.mc-pb-result {
  margin-top: 6px;
  padding: 18px 20px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mc-pb-result-headline {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.mc-pb-result-tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  padding: 4px 8px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--muted);
}
.mc-pb-result-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mc-pb-result-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--muted);
}
.mc-pb-result-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}
.mc-pb-result-strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.mc-pb-result-vs {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  margin-top: 2px;
}
.mc-pb-result-range {
  font-size: 14px;
  color: var(--ink);
  padding: 10px 14px;
  background: var(--card);
  border-radius: 10px;
  border: 1px solid var(--hairline);
}
.mc-pb-result-note {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
  font-style: italic;
}
.mc-pb-result-list {
  list-style: disc;
  padding-left: 20px;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink);
}
.mc-pb-result-list li { margin-bottom: 4px; }
.mc-pb-result-list li:last-child { margin-bottom: 0; }
.mc-pb-result-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.mc-pb-result-quote {
  margin: 0;
  padding: 10px 14px;
  border-left: 3px solid var(--ink);
  font-style: italic;
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.55;
  background: var(--card);
  border-radius: 0 10px 10px 0;
}

/* Seller price-positioning GV-wide table. */
.mc-pb-table-wrap {
  overflow-x: auto;
}
.mc-pb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.mc-pb-table thead th {
  text-align: left;
  padding: 8px 12px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--muted);
  border-bottom: 1px solid var(--hairline);
}
.mc-pb-table tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
.mc-pb-table tbody tr:last-child td { border-bottom: none; }
.mc-pb-table-posture {
  display: inline-block;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  background: var(--bg);
  border-radius: 999px;
  border: 1px solid var(--hairline);
}
.mc-pb-table-reason {
  color: var(--ink-soft);
  line-height: 1.5;
}

/* Pricing options below the per-MLS result. */
.mc-pb-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.mc-pb-option {
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 10px;
}
.mc-pb-option-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.mc-pb-option-desc {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* Stale Listing Rescue GV-wide pattern list. */
.mc-pb-rescue-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mc-pb-rescue-row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 10px;
}
.mc-pb-rescue-cause {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}
.mc-pb-rescue-fix {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* Stale Listing Rescue numbered steps (per-MLS analysis). */
.mc-pb-rescue-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  counter-reset: rescue;
}
.mc-pb-rescue-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
}
.mc-pb-rescue-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Objection Handler rows (Q&A). */
.mc-pb-obj {
  padding: 14px 0;
}
.mc-pb-obj + .mc-pb-obj { border-top: 1px solid var(--hairline); }
.mc-pb-obj-q {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1.4;
}
.mc-pb-obj-a {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* Client-Ready Scripts — persona tabs + script body + email reveal. */
.mc-pb-scripts {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mc-pb-script-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 2px;
}
.mc-pb-script-tab {
  background: transparent;
  border: none;
  padding: 8px 14px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  border-radius: 0;
}
.mc-pb-script-tab:hover { color: var(--ink); }
.mc-pb-script-tab.active {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.mc-pb-script-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mc-pb-script-text {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink);
  white-space: pre-wrap;
}
.mc-pb-script-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Responsive overrides for the playbook tab. */
/* Intermediate breakpoint: the second column is squeezed (Zoom side panel,
   narrower laptops, ~13" displays). Drop the pulse head to a single column
   and shrink the segment grid before content starts touching the gauge. */
@media (max-width: 1200px) {
  .mc-pulse-head { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .mc-segments { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
  .mc-temp-value { font-size: 40px; }
  .mc-signals-scores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-signals-head-top { grid-template-columns: minmax(0, 1fr); }
  .mc-signals-meta { justify-content: flex-start; }
  .mc-signals-meta-chip { text-align: left; }
  .mc-opp-thesis-grid { grid-template-columns: minmax(0, 1fr); }
  .mc-opp-cards { grid-template-columns: minmax(0, 1fr); }
  .mc-opp-subscores { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
  .mc-opp-deal-list { grid-template-columns: minmax(0, 1fr); }
  .mc-pb-zones { grid-template-columns: minmax(0, 1fr); }
  .mc-pb-result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-pb-options { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 980px) {
  .main { padding: 22px 22px 60px; }
  .mc-card { padding: 18px 18px; }
  .mc-tabs { margin: 0 -4px 18px; padding: 0 4px; }
  .mc-pulse-head { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .mc-segments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-war-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .mc-move { grid-template-columns: 28px minmax(0, 1fr); }
  .mc-move-cta { grid-column: 2; justify-self: start; margin-top: 6px; }
  .mc-content-hook { font-size: 19px; }
  .mc-temp-value { font-size: 36px; }
  .mc-signals-grid { grid-template-columns: minmax(0, 1fr); }
  .mc-signals-overall { font-size: 26px; }
  .mc-opp-subscores { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .mc-opp-briefs { grid-template-columns: minmax(0, 1fr); }
  .mc-opp-card-head { grid-template-columns: 32px minmax(0, 1fr); }
  .mc-opp-card-score { grid-column: 2; justify-self: start; padding-top: 4px; }
  .mc-pb-hero-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .mc-pb-rescue-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .mc-pb-result-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .main { padding: 18px 16px 60px; }
  .mc-card { padding: 16px 14px; }
  .mc-segments { grid-template-columns: minmax(0, 1fr); }
  .mc-temp-value { font-size: 32px; }
  .mc-content-hook { font-size: 17px; }
  .mc-signals-scores { grid-template-columns: minmax(0, 1fr); }
  .mc-signals-segs { grid-template-columns: minmax(0, 1fr); }
  .mc-signals-card { padding: 18px 16px; }
  .mc-opp-card { padding: 18px 16px; }
  .mc-opp-deal-section { padding: 18px 16px; }
  .mc-opp-deal-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .mc-opp-deal-price { text-align: left; }
}

/* ===== Realtor: shortlist card — share toggle, reaction banner, tally ===== */

.card-share {
  width: 28px; height: 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
}
.card-share:hover { background: #fff; }
.card-share.off { color: var(--muted); background: rgba(255, 255, 255, 0.85); }

.reaction-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 10px;
}

.reaction-banner {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
}
.reaction-banner.loved    { background: var(--red-bg); }
.reaction-banner.liked    { background: var(--green-bg); }
.reaction-banner.rejected { background: var(--hairline); }
.reaction-note-text {
  flex: 1;
  min-width: 120px;
  color: var(--ink-soft);
  font-style: italic;
}
.reaction-when {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

/* ===== Realtor: portal card (sidebar) ===== */

.portal-status {
  display: flex;
  align-items: center;
  margin-top: 4px;
}
.portal-tally {
  margin-top: 8px;
  font-size: 13px;
  letter-spacing: 0.1px;
}
.portal-new-link {
  margin-bottom: 14px;
  padding: 12px;
  background: var(--green-bg);
  border: 1px solid var(--green);
  border-radius: var(--r-sm);
}
.portal-new-link-head {
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--green);
  margin-bottom: 8px;
}
.portal-link-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.portal-new-link-note {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.45;
}

/* ===== Public client portal page ===== */

.portal-body {
  background: var(--bg);
  min-height: 100vh;
}

.portal-shell {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 0 60px;
}

.portal-header {
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(13, 36, 54, 0.04);
}
.portal-header-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.portal-realtor {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.portal-avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.portal-curated {
  color: var(--muted);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
}
.portal-realtor-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  margin-top: 2px;
}
.portal-brokerage {
  color: var(--muted);
  font-weight: 500;
  font-size: 13px;
}
.portal-contact {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.portal-contact-empty { width: 0; }
.portal-contact-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
}
.portal-contact-btn:hover { text-decoration: none; border-color: var(--ink); }
.portal-contact-btn.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.portal-contact-btn.primary:hover { background: var(--ink-soft); }

.portal-main {
  padding: 24px 20px 0;
}

.portal-flash {
  max-width: 720px;
  margin: 0 auto 14px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  text-align: center;
}
.portal-flash.success { background: var(--green-bg); color: var(--green); }
.portal-flash.error   { background: var(--red-bg);   color: var(--red); }

.portal-intro {
  max-width: 720px;
  margin: 0 auto 20px;
  text-align: center;
}
.portal-intro h1 {
  font-size: 26px;
  margin: 4px 0 8px;
  color: var(--ink);
  font-weight: 700;
}
.portal-intro p {
  color: var(--muted);
  line-height: 1.55;
  font-size: 14.5px;
  margin: 0;
}

.portal-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: 22px;
}
.portal-filter {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.portal-filter:hover { color: var(--ink); border-color: var(--ink); }
.portal-filter.active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.portal-filter-count {
  opacity: 0.7;
  margin-left: 4px;
  font-weight: 500;
}

.portal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}

.portal-card {
  background: #fff;
  border-radius: var(--r);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.portal-photo {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--hairline);
  overflow: hidden;
}
.portal-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.portal-photo-blank {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--faint);
  font-size: 13px;
}

.portal-status-banner {
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.portal-status-banner.sold       { background: var(--red-bg);   color: var(--red); }
.portal-status-banner.inactive   { background: var(--hairline); color: var(--muted); }
.portal-status-banner.price-drop { background: var(--amber-bg); color: var(--amber); }
.portal-status-banner.new        { background: var(--green-bg); color: var(--green); }

.portal-card-body {
  padding: 14px 16px 16px;
}
.portal-price {
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
  line-height: 1.2;
}
.portal-addr {
  color: var(--muted);
  margin-top: 2px;
  font-size: 14px;
}
.portal-facts {
  color: var(--ink-soft);
  font-size: 13px;
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.portal-facts strong { color: var(--ink); font-weight: 600; }
.portal-mls {
  font-size: 11.5px;
  color: var(--faint);
  margin-top: 6px;
  letter-spacing: 0.2px;
}

.portal-react-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 14px;
}
.portal-react-form { margin: 0; display: contents; }
.portal-react {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 10px 6px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: transform 0.05s ease, background 0.1s ease, border-color 0.1s ease;
}
.portal-react:hover { border-color: var(--ink); }
.portal-react:active { transform: scale(0.97); }
.portal-react-glyph { font-size: 18px; line-height: 1; }
.portal-react-label { font-size: 12px; letter-spacing: 0.2px; }

.portal-react.loved.active {
  background: var(--red-bg);
  border-color: var(--red);
  color: var(--red);
}
.portal-react.liked.active {
  background: var(--green-bg);
  border-color: var(--green);
  color: var(--green);
}
.portal-react.rejected.active {
  background: var(--hairline);
  border-color: var(--muted);
  color: var(--muted);
}

.portal-note-details {
  margin-top: 12px;
}
.portal-note-details summary {
  cursor: pointer;
  font-size: 12.5px;
  color: var(--link);
  list-style: none;
  padding: 4px 0;
}
.portal-note-details summary::-webkit-details-marker { display: none; }
.portal-note-details summary:hover { text-decoration: underline; }
.portal-note-form {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.portal-note-form textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
  background: #fff;
  color: var(--ink);
}
.portal-note-form textarea:focus { outline: none; border-color: var(--ink); }
.portal-note-form button { align-self: flex-end; }

.portal-empty {
  max-width: 480px;
  margin: 40px auto;
  padding: 40px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-align: center;
}
.portal-empty-icon { font-size: 32px; color: var(--faint); }
.portal-empty-head { font-weight: 700; font-size: 17px; margin: 10px 0 6px; }
.portal-empty-sub  { color: var(--muted); font-size: 14px; line-height: 1.55; }

.portal-footer {
  text-align: center;
  margin-top: 40px;
  padding: 24px 16px;
  color: var(--muted);
  font-size: 12.5px;
}
.portal-footer-sub { color: var(--faint); margin-top: 4px; }

@media (max-width: 560px) {
  .portal-header-inner { padding: 14px 16px; flex-wrap: wrap; }
  .portal-main { padding: 18px 14px 0; }
  .portal-intro h1 { font-size: 22px; }
  .portal-intro p { font-size: 14px; }
  .portal-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .portal-react { padding: 12px 6px; }
  .portal-react-glyph { font-size: 20px; }
  .portal-price { font-size: 20px; }
}

/* ============================================================
   Lead Engine (Command Center tab "Lead Engine")
   ============================================================ */

/* Outreach Campaigns — stacked cards, 1 per row, taller than playbook
   cards because each one is its own mini-campaign. */
.mc-lead-campaigns {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mc-lead-camp {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mc-lead-camp-head {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}
.mc-lead-camp-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mc-lead-camp-audience {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.mc-lead-camp-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.mc-lead-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bg-soft, #f1f4f7);
  color: var(--ink);
  letter-spacing: 0.02em;
}
.mc-lead-tag-channel {
  background: rgba(99, 102, 241, 0.12);
  color: #4338ca;
}
.mc-lead-tag-urgency-today {
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
}
.mc-lead-tag-urgency-this_week {
  background: rgba(217, 119, 6, 0.12);
  color: #b45309;
}
.mc-lead-tag-urgency-this_month {
  background: rgba(15, 118, 110, 0.12);
  color: #0f766e;
}
.mc-lead-camp-row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
}
.mc-lead-camp-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--muted);
}
.mc-lead-camp-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}
.mc-lead-camp-script {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg-soft, #f7f9fb);
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
}
.mc-lead-camp-subject {
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 13.5px;
  color: var(--ink);
}
.mc-lead-camp-script-text {
  white-space: pre-wrap;
}
.mc-lead-camp-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
}
.mc-lead-camp-outcome {
  font-size: 12.5px;
  color: var(--muted);
  font-style: italic;
  flex: 1;
}

/* Content Plan — grid of post cards. */
.mc-lead-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.mc-lead-post {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mc-lead-post-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hairline);
}
.mc-lead-post-day {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--muted);
}
.mc-lead-post-platform {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}
.mc-lead-post-hook {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}
.mc-lead-post-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
}
.mc-lead-post-caption {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg-soft, #f7f9fb);
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--hairline);
  white-space: pre-wrap;
}
.mc-lead-post-tags {
  font-size: 12px;
  color: #4338ca;
  line-height: 1.45;
}
.mc-lead-post-footer {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--hairline);
}
.mc-lead-post-why {
  font-size: 11.5px;
  color: var(--muted);
  font-style: italic;
  flex: 1;
}

/* Lead-Magnet Prompts — three cards side-by-side. */
.mc-lead-magnets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.mc-lead-magnet {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mc-lead-magnet-kind {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--muted);
}
.mc-lead-magnet-hook {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}
.mc-lead-magnet-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mc-lead-magnet-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--muted);
}
.mc-lead-magnet-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
}

@media (max-width: 720px) {
  .mc-lead-camp-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  .mc-lead-camp-head {
    grid-template-columns: 28px minmax(0, 1fr);
  }
  .mc-lead-camp-tags {
    grid-column: 1 / -1;
  }
}

/* ===== Street Signals ===== */

/* Reliability disclaimer — pinned above every Street Signals view to keep
   "public posts are not facts" front of mind. */
.ss-reliability {
  background: var(--amber-bg);
  color: var(--amber);
  border-radius: var(--r-sm);
  padding: 11px 14px;
  font-size: 12.5px;
  line-height: 1.5;
  margin-bottom: 20px;
}
.ss-reliability strong { color: var(--amber); }

/* Summary stat grid on the overview. */
.ss-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}
.ss-stat {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  text-align: center;
}
.ss-stat-n { font-size: 24px; font-weight: 700; color: var(--ink); }
.ss-stat-l { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.ss-overview-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* Watchlist / verification list rows. */
.ss-list { padding: 0; }
.ss-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}
a.ss-row:hover { background: var(--bg); text-decoration: none; }
.ss-row:last-child { border-bottom: none; }
.ss-row-main { flex: 1; min-width: 0; }
.ss-row-title { font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ss-row-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.ss-row-count { text-align: center; color: var(--ink); font-weight: 700; font-size: 18px; }
.ss-row-count span { display: block; font-size: 10.5px; font-weight: 400; color: var(--muted); }

/* Issue cards. */
.ss-issue-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.ss-issue-title { font-size: 15px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ss-issue-type { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.ss-issue-chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.ss-issue-summary { margin-top: 10px; font-size: 14px; color: var(--ink); line-height: 1.5; }
.ss-claim {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--bg);
  border-left: 3px solid var(--line);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 12.5px;
  color: var(--muted);
  font-style: italic;
}
.ss-claim-label { font-style: normal; font-weight: 600; color: var(--amber); }
.ss-issue-meta { margin-top: 6px; font-size: 12px; color: var(--ink); }
.ss-issue-meta.ss-muted { color: var(--muted); }

/* Collapsible per-issue management panel. */
.ss-manage { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.ss-manage > summary {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  list-style: none;
}
.ss-manage > summary::-webkit-details-marker { display: none; }
.ss-manage > summary:hover { color: var(--ink); }
.ss-manage[open] > summary { color: var(--ink); margin-bottom: 10px; }
.ss-manage-form { margin-bottom: 12px; }
.ss-field-row { display: flex; flex-wrap: wrap; gap: 12px; }
.ss-field-row > label, .ss-field-row > .field { flex: 1; min-width: 160px; font-size: 11.5px; color: var(--muted); }
.ss-manage-form label { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 8px; }
.ss-block { display: block; }
.ss-state-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ss-inline-form { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.ss-state-current { color: var(--green); opacity: 0.8; }

/* Public-chatter alert embedded in the Buyer Trap Detector / Seller Listing
   Reality Check. Amber to read as "caution, verify" — never as confirmed fact. */
.ss-chatter {
  margin-top: 14px;
  border: 1px solid var(--amber-bg);
  background: var(--amber-bg);
  border-radius: var(--r-sm);
  padding: 14px 16px;
}
.ss-chatter-head { display: flex; align-items: center; gap: 8px; }
.ss-chatter-flag { font-weight: 700; color: var(--amber); font-size: 13px; }
.ss-chatter-lede { margin: 8px 0; font-size: 13px; color: var(--ink); line-height: 1.5; }
.ss-chatter-lede strong { color: var(--amber); }
.ss-chatter-entities { margin: 0 0 10px; padding-left: 18px; font-size: 12.5px; color: var(--ink); }
.ss-chatter-entities li { margin: 3px 0; }
.ss-chatter-checklist {
  background: var(--card);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  margin-bottom: 10px;
}
.ss-chatter-checklist-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.ss-chatter-checklist ul { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--ink); columns: 2; }
.ss-chatter-checklist li { margin: 2px 0; break-inside: avoid; }
@media (max-width: 640px) { .ss-chatter-checklist ul { columns: 1; } }