/* =============================================================================
   Contact detail — ultra polish
   -----------------------------------------------------------------------------
   Additive, dark-theme finish pass for the People/Company detail page.
   Scoped tightly to #detailPanel so it can't leak into deal / quick-add chrome.
   Loaded last in index.html.

   v1 (20260828): section captions, row hover, links, count chips, focus rings.
   v2 (20260917): restore rhythm the later "flush canvas" passes flattened —
    header stack, column gutter, composer/activity readability, empty states.
   Still no framed cards and no field-grid geometry changes.
   v3 (20260917): Tasks & Events — give the list a start so metrics and rows
    no longer share one hairline plane.
   ============================================================================= */

html[data-theme="dark"] body[data-theme="momentum"] #detailPanel {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Section headings (WHO / PHONE & EMAIL / …) ───────────────────────────
   Trade the filled grey pill for a quiet, well-tracked label sitting above a
   hairline rule — the calmer, more premium rhythm used by Attio / Linear. */
html[data-theme="dark"] body[data-theme="momentum"] #detailPanel
  .contact-detail-tab-panel--details .contact-detail-field-row--section-header {
  background: transparent;
  border-radius: 0;
  margin: 22px 4px 6px;
  padding: 12px 2px 6px;
  border-top: 1px solid rgba(240, 240, 240, 0.09);
}

html[data-theme="dark"] body[data-theme="momentum"] #detailPanel
  .contact-detail-tab-panel--details .contact-detail-fields-layout--flat
  > .contact-detail-field-row--section-header:first-child {
  margin-top: 2px;
  padding-top: 2px;
  border-top: none;
}

html[data-theme="dark"] body[data-theme="momentum"] #detailPanel
  .contact-detail-tab-panel--details
  .contact-detail-field-row--section-header .contact-detail-field-row__section-title {
  color: rgba(240, 240, 240, 0.82);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
}

/* ── Field rows ───────────────────────────────────────────────────────────
   Slightly deeper, crisply outlined hover so a row reads as one tap target. */
html[data-theme="dark"] body[data-theme="momentum"] #detailPanel
  .contact-detail-tab-panel--details .contact-detail-field-row {
  border-radius: 9px;
}

html[data-theme="dark"] body[data-theme="momentum"] #detailPanel
  .contact-detail-tab-panel--details
  .contact-detail-field-row:not(.contact-detail-field-row--section-header):hover {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(240, 240, 240, 0.06);
}

/* ── Inline value links (company / email / website / social) ─────────────── */
html[data-theme="dark"] body[data-theme="momentum"] #detailPanel
  .contact-detail-tab-panel--details .contact-overview-website-link {
  color: #8fb3d1;
  text-decoration: none;
  text-underline-offset: 2px;
  transition: color 0.12s ease;
}

html[data-theme="dark"] body[data-theme="momentum"] #detailPanel
  .contact-detail-tab-panel--details .contact-overview-website-link:hover {
  color: #b6d2ea;
  text-decoration: underline;
}

/* Sub-type chips ("Work", "Instagram") — quieter, uppercase caption. */
html[data-theme="dark"] body[data-theme="momentum"] #detailPanel
  .contact-detail-tab-panel--details .contact-multi-type {
  display: inline-block;
  margin-right: 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(240, 240, 240, 0.45);
}

/* ── "+ Add field" ───────────────────────────────────────────────────────── */
html[data-theme="dark"] body[data-theme="momentum"] #detailPanel
  .contact-detail-tab-panel--details .contact-detail-add-field {
  font-weight: 600;
  letter-spacing: 0.005em;
  transition: color 0.12s ease, background 0.12s ease;
}

html[data-theme="dark"] body[data-theme="momentum"] #detailPanel
  .contact-detail-tab-panel--details .contact-detail-add-field:hover {
  color: #a3c1dc !important;
}

/* ── Notes & Activity header ──────────────────────────────────────────────
   Tidy the count into a real pill and give the title a touch more presence. */
html[data-theme="dark"] body[data-theme="momentum"] #detailPanel
  .contact-detail-tab-panel--details .notes-activity-header .related-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(240, 240, 240, 0.08);
  color: rgba(240, 240, 240, 0.72);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* ── Detail tabs ──────────────────────────────────────────────────────────
   Brighten the active section and standardise the count chips. */
html[data-theme="dark"] body[data-theme="momentum"] #detailPanel
  .contact-detail-tabs-nav .deal-section-tab[aria-selected="true"] .deal-section-tab__label {
  color: #f4f6f8;
  font-weight: 650;
}

html[data-theme="dark"] body[data-theme="momentum"] #detailPanel
  .contact-detail-tabs-nav .deal-section-tab .contact-detail-tab-count {
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(240, 240, 240, 0.09);
  color: rgba(240, 240, 240, 0.6);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
}

html[data-theme="dark"] body[data-theme="momentum"] #detailPanel
  .contact-detail-tabs-nav .deal-section-tab[aria-selected="true"] .contact-detail-tab-count {
  background: rgba(143, 179, 209, 0.18);
  color: #b6d2ea;
}

/* ── Focus visibility (a11y + finish) ─────────────────────────────────────── */
html[data-theme="dark"] body[data-theme="momentum"] #detailPanel
  .contact-detail-tab-panel--details a:focus-visible,
html[data-theme="dark"] body[data-theme="momentum"] #detailPanel
  .contact-detail-tab-panel--details button:focus-visible,
html[data-theme="dark"] body[data-theme="momentum"] #detailPanel
  .contact-detail-tab-panel--details .inline-input:focus-visible {
  outline: 2px solid rgba(143, 179, 209, 0.7);
  outline-offset: 2px;
  border-radius: 6px;
}

/* =============================================================================
   v2 — Rhythm restore (beats flush-canvas !important with matching specificity)
   ============================================================================= */

html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel {
  --td-contact-polish-ink: #f4f6f8;
  --td-contact-polish-muted: #9a9a9a;
  --td-contact-polish-faint: rgba(240, 240, 240, 0.45);
  --td-contact-polish-line: rgba(240, 240, 240, 0.075);
  --td-contact-polish-accent: #8fb3d1;
}

/* Header: let the identity stack breathe without becoming a card. */
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .detailHeader.contact-detail-header-new {
  padding: 12px 18px 14px !important;
}

html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  #detailContent
  .detailHeader.contact-detail-header-new.project-detail-header-new
  .detailHeaderIdentity,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .detailHeader.contact-detail-header-new.project-detail-header-new
  .detailHeaderIdentity,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .detailHeaderIdentity {
  gap: 6px !important;
}

html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  #detailContent
  .detailHeader.contact-detail-header-new.project-detail-header-new
  .contactName,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .detailHeader .contactName,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-detail-header-new .contactName {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 650 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.2 !important;
}

html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-detail-avatar {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .mm-meta-line--person,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .mm-meta-line {
  color: #c8c8c8 !important;
  letter-spacing: 0.01em;
}

html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-detail-header-company-overview-btn {
  color: #b6d2ea !important;
  -webkit-text-fill-color: #b6d2ea !important;
  text-underline-offset: 2px;
}

html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-detail-header-company-overview-btn:hover {
  color: #d5e6f4 !important;
  -webkit-text-fill-color: #d5e6f4 !important;
  text-decoration: underline;
}

html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-detail-header-contact-line {
  margin-top: 2px !important;
  opacity: 0.92 !important;
}

html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-detail-header-contact-link {
  color: #8fb3d1 !important;
  -webkit-text-fill-color: #8fb3d1 !important;
  text-decoration: none;
  text-underline-offset: 2px;
}

html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-detail-header-contact-link:hover {
  color: #c5dced !important;
  -webkit-text-fill-color: #c5dced !important;
  text-decoration: underline;
}

html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-detail-header-context-line {
  margin-top: 4px !important;
  opacity: 0.78 !important;
  color: #9a9a9a !important;
}

html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-stale-badge,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-stale-badge--header {
  opacity: 1 !important;
  background: rgba(234, 179, 8, 0.14) !important;
  color: #e4c27a !important;
  -webkit-text-fill-color: #e4c27a !important;
  letter-spacing: 0.06em;
}

html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-overview-mode-toggle,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .detailHeader .td-contact-header-kebab-btn {
  opacity: 0.62 !important;
}

html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .detailHeader.contact-detail-header-new:hover .contact-overview-mode-toggle,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .detailHeader.contact-detail-header-new:hover .td-contact-header-kebab-btn,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-overview-mode-toggle:hover,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .detailHeader .td-contact-header-kebab-btn:hover {
  opacity: 1 !important;
}

/* Tabs: one selected treatment, quiet counts, hairline under the strip. */
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-detail-tabs-header {
  border-bottom: 1px solid rgba(240, 240, 240, 0.07) !important;
}

html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .deal-section-tab.contact-detail-tab-btn,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-detail-tab-btn.project-tab {
  border-radius: 8px !important;
}

html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .deal-section-tab.contact-detail-tab-btn.is-active,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .deal-section-tab.contact-detail-tab-btn.active,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-detail-tab-btn.project-tab.is-active,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-detail-tab-btn.project-tab.active {
  border-radius: 8px !important;
  background: rgba(129, 161, 193, 0.14) !important;
  color: #d7e6f2 !important;
  -webkit-text-fill-color: #d7e6f2 !important;
}

/* Actions strip: less empty banner, more toolbar. */
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-detail-action-deck-host {
  padding: 4px 16px 6px !important;
  min-height: 0 !important;
}

html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-action-deck__primary {
  min-height: 32px !important;
}

/* Details pane: keep the sibling notes plane; give both columns a little air. */
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-detail-tab-panel--details {
  padding: 8px 16px 28px !important;
}

html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible
  #detailPanel
  .contact-detail-tab-panel--details
  .contact-overview-right,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible
  #detailPanel
  .contact-detail-tab-panel--details
  .crm-contact-overview-notes.contact-details-card,
html[data-theme="dark"] body[data-theme="momentum"].contact-overview-simple-page
  .app-shell.contacts-v2-view.contact-detail-visible
  #detailPanel[data-contact-overview-mode="simple"]
  .contact-detail-tab-panel--details
  .contact-overview-right,
html[data-theme="dark"] body[data-theme="momentum"].contact-overview-simple-page
  .app-shell.contacts-v2-view.contact-detail-visible
  #detailPanel[data-contact-overview-mode="simple"]
  .contact-detail-tab-panel--details
  .crm-contact-overview-notes.contact-details-card {
  border-left: 1px solid rgba(240, 240, 240, 0.12) !important;
  padding-left: 12px !important;
}

/* Field labels stay caption-quiet; values stay readable. */
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-detail-tab-panel--details .detailRow .label,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-detail-tab-panel--details .multi-field-detail-row .label {
  color: #9a9a9a !important;
  -webkit-text-fill-color: #9a9a9a !important;
}

html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-detail-tab-panel--details .detailRow .value,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-detail-tab-panel--details .detailRow .value a {
  color: #f0f0f0 !important;
  -webkit-text-fill-color: #f0f0f0 !important;
}

html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-detail-tab-panel--details .detailRow.contact-detail-tags-row {
  min-height: 34px !important;
  align-items: center !important;
}

html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-detail-tab-panel--details .detailRow:hover,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-detail-tab-panel--details .contact-field-row:hover {
  background: rgba(255, 255, 255, 0.035) !important;
  border-radius: 8px !important;
}

/* Address-same-as-company: chip, not a full-width bar. */
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .detail-person-same-company-line {
  width: fit-content !important;
  max-width: 100% !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  background: rgba(129, 161, 193, 0.1) !important;
  border: 1px solid rgba(129, 161, 193, 0.22) !important;
}

/* Notes composer: rest state should still look like an input. */
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible
  #detailPanel
  .contact-detail-tab-panel--details
  .overview-note-composer textarea,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible
  #detailPanel
  .contact-detail-tab-panel--details
  .overview-note-composer textarea.textarea,
html[data-theme="dark"] body[data-theme="momentum"].contact-overview-simple-page
  .app-shell.contacts-v2-view.contact-detail-visible
  #detailPanel[data-contact-overview-mode="simple"]
  .contact-detail-tab-panel--details
  .overview-note-composer textarea,
html[data-theme="dark"] body[data-theme="momentum"].contact-overview-simple-page
  .app-shell.contacts-v2-view.contact-detail-visible
  #detailPanel[data-contact-overview-mode="simple"]
  .overview-note-composer textarea,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .overview-note-composer textarea,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .overview-note-composer textarea.textarea {
  background: #181818 !important;
  background-color: #181818 !important;
  border: 1px solid rgba(240, 240, 240, 0.1) !important;
  border-radius: 10px !important;
}

html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .overview-note-composer [data-ov-type][aria-pressed="true"],
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .overview-note-composer [data-ov-type].active,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .overview-note-composer [data-ov-type].mm-type-active {
  border-radius: 8px !important;
}

html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .activityItem.contact-activity-item,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-activity-item {
  border-radius: 8px !important;
}

html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .activityItem.contact-activity-item:hover,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-activity-item:hover {
  background: rgba(240, 240, 240, 0.045) !important;
}

/* Empty / related tabs: quieter copy, tighter CTA cluster. */
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .emptyState,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .related-section-empty,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-detail-tab-panel .empty {
  color: #9a9a9a !important;
}

html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .emptyState h2,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .emptyState-title,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .related-section-empty h3 {
  color: #e6e6e6 !important;
  -webkit-text-fill-color: #e6e6e6 !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}

@media (max-width: 720px) {
  html[data-theme="dark"] body[data-theme="momentum"]
    .app-shell.contacts-v2-view.contact-detail-visible
    #detailPanel
    .contact-detail-tab-panel--details
    .contact-overview-right,
  html[data-theme="dark"] body[data-theme="momentum"]
    .app-shell.contacts-v2-view.contact-detail-visible
    #detailPanel
    .contact-detail-tab-panel--details
    .crm-contact-overview-notes.contact-details-card {
    border-left: none !important;
    padding-left: 0 !important;
  }
}

/* =============================================================================
   v3 — Tasks list start
   -----------------------------------------------------------------------------
   v33 flattened header, metrics, and rows onto one #141414 plane. The first
   task then reads as another stat. Keep the flush language — no per-row cards —
   but give the list its own well, a quiet complete mark, and a cleaner hover.
   ============================================================================= */

html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-tasks-section,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-tasks-section[data-mm-task-tab="true"],
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-tasks-section.crm-contact-tasks-panel {
  padding: 2px 16px 28px !important;
}

html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-tasks-section .related-section-header {
  margin: 0 0 8px !important;
  padding: 6px 0 10px !important;
}

html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-tasks-section .crm-contact-panel-subtitle {
  margin: 0 0 10px !important;
  color: #6e6e6e !important;
  -webkit-text-fill-color: #6e6e6e !important;
  font-size: 12px !important;
}

/* Metrics stay a caption strip — stop the hairline that ran into the first row. */
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-tasks-section .contact-deals-summary,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-tasks-section[data-mm-task-tab="true"] .contact-deals-summary {
  margin: 0 0 12px !important;
  padding: 0 0 2px !important;
  border-bottom: none !important;
}

html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-tasks-section .contact-deals-summary-k {
  color: #6a6a6a !important;
  -webkit-text-fill-color: #6a6a6a !important;
  font-size: 10px !important;
  letter-spacing: 0.07em !important;
}

html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-tasks-section .contact-deals-summary-v {
  color: #d8d8d8 !important;
  -webkit-text-fill-color: #d8d8d8 !important;
  font-size: 16px !important;
  font-weight: 650 !important;
  margin-top: 2px !important;
}

/* The list is a distinct region: faint well, visible start, no stacked cards. */
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-tasks-section .contact-tasks-list,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-tasks-section[data-mm-task-tab="true"] .contact-tasks-list,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-tasks-section > div.contact-tasks-list[style*="display:grid"],
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-tasks-section > div.contact-tasks-list[style*="display: grid"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 8px 8px 6px !important;
  background: #1d1d1d !important;
  border: 1px solid rgba(240, 240, 240, 0.14) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-tasks-section .contact-tasks-list:has(> .task-row:not(.task-row--completed))::before {
  content: "Open";
  display: block;
  padding: 4px 10px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(240, 240, 240, 0.4);
}

html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-tasks-section .contact-tasks-list > .task-row,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-tasks-section .contact-tasks-list > .mm-task-row,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-tasks-section[data-mm-task-tab="true"] .contact-tasks-list > .task-row,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-tasks-section[data-mm-task-tab="true"] .contact-tasks-list > .mm-task-row {
  align-items: flex-start !important;
  background: transparent !important;
  background-color: transparent !important;
  padding: 8px 10px !important;
  min-height: 0 !important;
  border-bottom: 1px solid rgba(240, 240, 240, 0.08) !important;
  border-radius: 8px !important;
}

html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-tasks-section .contact-tasks-list > .task-row:last-child,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-tasks-section .contact-tasks-list > .task-row:has(+ .tasks-completed-header) {
  border-bottom-color: transparent !important;
}

html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-tasks-section .contact-tasks-list > .task-row:hover,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-tasks-section .contact-tasks-list > .mm-task-row:hover,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-tasks-section[data-mm-task-tab="true"] .contact-tasks-list > .task-row:hover,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-tasks-section[data-mm-task-tab="true"] .contact-tasks-list > .mm-task-row:hover {
  background: rgba(255, 255, 255, 0.045) !important;
  border-bottom-color: transparent !important;
}

/* Quiet complete mark — the colorful tile stays hidden; this is a Linear-like box. */
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-tasks-section .task-row:not(.task-row--completed) .mm-task-icon-col,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-tasks-section .task-row:not(.task-row--completed) > .mm-task-icon-col,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-tasks-section .task-row:not(.task-row--completed) > div:first-child:not(.mm-task-main):not(.mm-task-right-rail) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: flex-start !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  margin: 3px 8px 0 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  border: 1.5px solid rgba(129, 161, 193, 0.42) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  opacity: 0.9 !important;
}

html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-tasks-section .task-row[data-mm-kind="event"] > .mm-task-icon-col,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-tasks-section .task-row[data-mm-kind="event"] > div:first-child:not(.mm-task-main):not(.mm-task-right-rail) {
  border-radius: 999px !important;
}

html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-tasks-section .task-row:not(.task-row--completed) .mm-task-icon-col:hover,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-tasks-section .task-row:not(.task-row--completed) > .mm-task-icon-col:hover,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-tasks-section .task-row:not(.task-row--completed) > div:first-child:not(.mm-task-main):not(.mm-task-right-rail):hover {
  border-color: #88c0d0 !important;
  background: rgba(129, 161, 193, 0.12) !important;
  transform: none !important;
}

html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-tasks-section .mm-task-title,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-tasks-section .mm-task-main > div:first-child {
  color: #f4f6f8 !important;
  -webkit-text-fill-color: #f4f6f8 !important;
  font-weight: 650 !important;
}

html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-tasks-section .task-type-chip,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-tasks-section .task-type-chip--task,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-tasks-section .task-type-chip--event {
  background: rgba(129, 161, 193, 0.1) !important;
  border-color: rgba(129, 161, 193, 0.28) !important;
  color: #9eb6cc !important;
  -webkit-text-fill-color: #9eb6cc !important;
}

html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-tasks-section .tasks-completed-header,
html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-tasks-section .contact-tasks-list > .tasks-completed-header {
  margin: 6px 4px 2px !important;
  padding: 12px 6px 8px !important;
  border-top: 1px solid rgba(240, 240, 240, 0.1) !important;
  color: #8a8a8a !important;
  -webkit-text-fill-color: #8a8a8a !important;
}

html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-tasks-section .contact-tasks-list > .task-row--completed {
  background: transparent !important;
  padding: 8px 10px !important;
  min-height: 0 !important;
  border-bottom-color: rgba(240, 240, 240, 0.05) !important;
}

html[data-theme="dark"] body[data-theme="momentum"]
  .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
  .contact-tasks-section .contact-tasks-list .related-section-empty {
  border-top: none !important;
  padding: 22px 12px !important;
}

@media (max-width: 720px) {
  html[data-theme="dark"] body[data-theme="momentum"]
    .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
    .contact-tasks-section,
  html[data-theme="dark"] body[data-theme="momentum"]
    .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
    .contact-tasks-section[data-mm-task-tab="true"] {
    padding: 2px 12px 24px !important;
  }

  html[data-theme="dark"] body[data-theme="momentum"]
    .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
    .contact-tasks-section .contact-deals-summary,
  html[data-theme="dark"] body[data-theme="momentum"]
    .app-shell.contacts-v2-view.contact-detail-visible #detailPanel
    .contact-tasks-section[data-mm-task-tab="true"] .contact-deals-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px 0 !important;
  }
}

/* v4 — Hide People list while Ask / deep-link opens a contact. Cover the path
   immediately; bouncing balls only after 1s. */
body.contact-detail-opening #contactListWrap,
body.contact-detail-opening #gmailTabs,
body.contact-detail-opening #filtersSection,
body.contact-detail-opening #bulkBarMount,
.app-shell.contact-detail-opening #contactListWrap,
.app-shell.contact-detail-opening #gmailTabs,
.app-shell.contact-detail-opening #filtersSection,
.app-shell.contact-detail-opening #bulkBarMount {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.contact-detail-open-gate {
  position: fixed;
  inset: 0;
  z-index: 8200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg, #0f1419);
}

.contact-detail-open-gate[hidden] {
  display: none !important;
}

.contact-detail-open-gate__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
}

.contact-detail-open-gate__dots {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.contact-detail-open-gate--slow .contact-detail-open-gate__dots {
  opacity: 1;
}

.contact-detail-open-gate__dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3b82f6;
  animation: contact-detail-open-gate-bounce 1.1s ease-in-out infinite;
}

.contact-detail-open-gate__dots span:nth-child(2) {
  animation-delay: 0.14s;
  background: #10b981;
}

.contact-detail-open-gate__dots span:nth-child(3) {
  animation-delay: 0.28s;
  background: #f59e0b;
}

@keyframes contact-detail-open-gate-bounce {
  0%, 75%, 100% {
    transform: translateY(0);
    opacity: 0.45;
  }
  35% {
    transform: translateY(-8px);
    opacity: 1;
  }
}