/* One voice for the five app screens (Today, People, Deals, Inbox, Calendar).
 *
 * Loaded after the inline <style> in crm/index.html so it wins at equal
 * specificity. Scoped to the screen panels and the shell bar; Settings and
 * onboarding are left alone.
 *
 * Rules, from the 2026-10-12 design audit:
 * - Inter for everything, numbers set with tabular figures so columns line up.
 *   JetBrains Mono stays only for keyboard shortcuts and code.
 * - Sentence case. No tracked-out all-caps labels.
 * - Nothing under 12px. Small grey caps read as a dev tool, not a CRM.
 * - Empty kanban columns shrink to their content instead of a 300px white box.
 */

:is(#panel-today, #panel-tasks, #panel-activity, #panel-contacts, #panel-accounts,
    #panel-pipeline, #panel-inbox, #panel-outreach, #panel-bookings, #shell-bar-mount) {
  --font-mono: var(--font-ui);
  font-variant-numeric: tabular-nums;
}

:is(#panel-today, #panel-tasks, #panel-activity, #panel-contacts, #panel-accounts,
    #panel-pipeline, #panel-inbox, #panel-outreach, #panel-bookings) :is(*, *::before) {
  text-transform: none !important;
}

:is(#panel-today, #panel-tasks, #panel-activity, #panel-contacts, #panel-accounts,
    #panel-pipeline, #panel-inbox, #panel-outreach, #panel-bookings) :is([style*="letter-spacing"], th,
    .stat-label, .k-col-title, .k-add-btn, .act-channel, .task-group-label, .stage-badge,
    .score-pill, .tag-pill, .tag-pill-sm, .na-type-badge, .pri-high, .pri-medium, .pri-low,
    .adv-label, .es-eyebrow) {
  letter-spacing: normal !important;
}

/* Keyboard shortcuts keep the code face. */
:is(#panel-today, #panel-tasks, #panel-activity, #panel-contacts, #panel-accounts,
    #panel-pipeline, #panel-inbox, #panel-outreach, #panel-bookings, #shell-bar-mount) :is(kbd, code) {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Minimum readable size. Inline 9-11px labels and the legacy small classes. */
:is(#panel-today, #panel-tasks, #panel-activity, #panel-contacts, #panel-accounts,
    #panel-pipeline, #panel-inbox, #panel-outreach, #panel-bookings) :is(
    [style*="font-size:9px"], [style*="font-size: 9px"], [style*="font-size:10px"],
    [style*="font-size: 10px"], [style*="font-size:11px"], [style*="font-size: 11px"],
    .stat-label, thead th, .td-mono, .stage-badge, .score-pill, .li-link, .page-info,
    .k-col-title, .k-count, .k-value, .deal-card-co-name, .deal-date, .k-add-btn,
    .act-date, .act-co, .act-channel, .act-outcome, .act-notes, .task-group-label,
    .task-contact-link, .task-notes, .task-due, .adv-label, .tag-pill, .na-type-badge,
    .pri-high, .pri-medium, .pri-low) {
  font-size: 12px !important;
}

/* Column headers and stat labels: quiet, medium weight, sentence case. */
:is(#panel-tasks, #panel-activity, #panel-contacts, #panel-accounts, #panel-pipeline) :is(thead th, .stat-label) {
  font-weight: 500;
  color: var(--text-dim);
}
.stat-value {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ── Buttons: a small press, so clicks feel answered ────────────────── */
:is(.add-btn, .sec-btn, .filter-tab, .k-add-btn, .page-btn):active {
  transform: scale(0.97);
}
@media (prefers-reduced-motion: reduce) {
  :is(.add-btn, .sec-btn, .filter-tab, .k-add-btn, .page-btn):active { transform: none; }
}

/* ── Deals board ────────────────────────────────────────────────────── */
.k-body { min-height: 96px; }
.k-col-head { padding: 12px 14px; }
.k-col-title { font-size: 13px !important; font-weight: 600; color: var(--text); }
.deal-card-title { font-size: 14px; line-height: 1.35; }
.deal-card-co-name { font-size: 13px !important; }
.deal-value { font-size: 13px; }
.k-add-btn { border-style: dashed; color: var(--text-dim); padding: 10px; }
/* Soft edge on the right so a board wider than the screen reads as scrollable. */
.kanban-wrap {
  mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  padding-right: 32px;
}

/* ── Activity: header and rows share one grid ───────────────────────── */
.act-grid, .act-row {
  display: grid;
  grid-template-columns: 112px minmax(140px, 1.2fr) 104px 120px minmax(0, 2fr);
  gap: 12px;
  align-items: center;
}
.act-grid { padding: 10px 18px; background: var(--bg3); border-bottom: 1px solid var(--border); }
.act-grid > div { font-size: 12px; font-weight: 500; color: var(--text-dim); }
.act-contact { font-size: 14px; }
.act-co { color: var(--text-dim); }
.act-notes { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#panel-activity .act-channel { text-transform: capitalize !important; padding: 2px 10px; }
.phone-only { display: none; }

/* ── Inbox: one readable list ───────────────────────────────────────── */
#inbox-grid { grid-template-columns: minmax(0, 1fr) !important; max-width: 880px; }
#inbox-grid:has(#inbox-enrich-col:not([hidden])) {
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr) !important;
  max-width: none;
}
#inbox-email-list {
  background: var(--bg2);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.inbox-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  transition: background var(--duration-base, .15s) var(--ease-out-expo, ease-out);
}
.inbox-row:last-child { border-bottom: none; }
.inbox-row[data-clickable] { cursor: pointer; }
.inbox-row:hover { background: var(--bg3); }
.inbox-row .ir-who { font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-row .ir-date { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.inbox-row .ir-subj { grid-column: 1 / -1; font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-row .ir-snip { grid-column: 1 / -1; font-size: 13px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.inbox-head h2 { font-size: 15px; font-weight: 600; color: var(--text); }

/* ── Phone ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .stats-bar.cols4, .stats-bar.cols5 { grid-template-columns: repeat(2, 1fr) !important; }
  .stat-cell { padding: 14px 16px; }
  .stat-value { font-size: 22px; }

  /* Activity rows stack: who and when on top, what happened underneath. */
  .act-grid { display: none; }
  .act-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "who date" "chan outcome" "notes notes";
    gap: 6px 12px;
    padding: 14px 16px;
  }
  .act-row > :nth-child(1) { grid-area: date; }
  .act-row > :nth-child(2) { grid-area: who; }
  .act-row > :nth-child(3) { grid-area: chan; }
  .act-row > :nth-child(4) { grid-area: outcome; text-align: right; }
  .act-row > :nth-child(5) { grid-area: notes; white-space: normal; }

  /* Tap targets. */
  :is(.sec-btn, .filter-tab, .filter-select, .add-btn) { min-height: 40px; }

  /* People and Companies tables become lists: name first, the rest one tap away. */
  :is(#panel-contacts, #panel-accounts) .table-wrap thead { display: none; }
  :is(#panel-contacts, #panel-accounts) tbody tr:not(.loading-row):not(.empty-row) {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
  }
  :is(#panel-contacts, #panel-accounts) tbody tr:not(.loading-row):not(.empty-row) > td {
    border: none;
    padding: 0;
  }
  :is(#panel-contacts, #panel-accounts) tbody tr:not(.loading-row):not(.empty-row) > td:has(.company-cell) {
    flex: 1;
    min-width: 0;
  }
  #panel-contacts tbody tr > td:not(:nth-child(-n+2)):not(:has(.stage-badge)) { display: none; }
  #panel-accounts tbody tr > td:not(:first-child):not(:last-child) { display: none; }
  .phone-only { display: inline; color: var(--text-dim); }

  /* Dialer export and action-type filter are desk work. */
  #panel-tasks :is(#t-type-filter, [onclick="exportNextActionsCSV()"]) { display: none; }

  .inbox-row { padding: 14px 16px; }
}

/* Empty states lead with the sentence, not a label above it. */
:is(#panel-today, #panel-tasks, #panel-activity, #panel-contacts, #panel-accounts,
    #panel-pipeline, #panel-inbox) .es-eyebrow { display: none; }

/* ── Second pass (2026-10-12) ───────────────────────────────────────── */

/* Deals: stage shown by a dot, not coloured text; money in ink, not amber. */
.k-col-title { display: inline-flex; align-items: center; gap: 8px; }
.k-col-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.k-value { color: var(--text-dim) !important; }
.deal-card { background: var(--bg2); box-shadow: 0 1px 2px rgba(20, 19, 15, 0.04); }
.deal-card:hover { border-color: var(--border2); background: var(--bg2); box-shadow: 0 2px 8px rgba(20, 19, 15, 0.08); }
.deal-card-footer { margin-top: 2px; }
.deal-value { color: var(--text) !important; font-weight: 600; }
.deal-date { color: var(--text-dim) !important; }
.deal-date.overdue { color: var(--red) !important; font-weight: 500; }
.k-col { background: var(--bg3); border-color: transparent; }
.k-col-head { border-bottom: none; }
.k-col:is([aria-label="Closed Won"], [aria-label="Closed Lost"]) .deal-card { opacity: 0.75; }
#panel-pipeline .stat-value.amber { color: var(--text); }

/* Tasks: secondary filters fold into one "Filters" button. */
.more-filters { display: contents; }
.more-filters > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.more-filters > summary::-webkit-details-marker { display: none; }
.more-filters > summary::after {
  content: '';
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .15s ease-out;
}
.more-filters[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.more-filters-panel { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* A filled dot on the button while a hidden filter is on, so it can't be forgotten. */
.more-filters:has(#task-source-tabs .filter-tab.active:not(:first-child), #t-type-filter option:checked:not([value=""]), #t-priority-filter option:checked:not([value=""])) > summary {
  color: var(--accent); border-color: var(--accent);
}
.more-filters:has(#task-source-tabs .filter-tab.active:not(:first-child), #t-type-filter option:checked:not([value=""]), #t-priority-filter option:checked:not([value=""])) > summary::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
/* Panel only takes space when open. */
.more-filters:not([open]) > .more-filters-panel { display: none; }

/* Activity: rows open the contact. */
.act-row[data-clickable] { cursor: pointer; }
.act-row:focus-visible, .inbox-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Inbox: avatar, names, day groups. */
.inbox-row { grid-template-columns: 36px minmax(0, 1fr) auto; column-gap: 12px; }
.inbox-row .ir-avatar {
  grid-row: 1 / span 3; align-self: start;
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-glow); color: var(--accent); font-weight: 600; font-size: 14px;
}
.inbox-row .ir-subj, .inbox-row .ir-snip { grid-column: 2 / -1; }
.inbox-row .ir-co { font-weight: 400; color: var(--text-dim); }
.inbox-row .ir-count {
  display: inline-block; margin-left: 8px; padding: 0 7px; border-radius: 999px;
  background: var(--bg3); color: var(--text-dim); font-size: 12px; line-height: 18px; vertical-align: 1px;
}
.inbox-group {
  padding: 10px 18px 6px; font-size: 12px; font-weight: 500; color: var(--text-dim);
  background: var(--bg2); border-bottom: 1px solid var(--border);
}
.inbox-group + .inbox-row { border-top: none; }
#panel-tasks .toolbar > .add-btn { margin-left: 0; }
@media (max-width: 640px) {
  /* Phone Deals: the two numbers that matter, then the board. */
  .pipeline-stats .stat-cell:is(:nth-child(1), :nth-child(3), :nth-child(5)) { display: none; }
}

/* GTM CRM: hide what we do not use (mailbox connections, calendar, booking, billing, setup checklist).
   Hidden, not deleted: remove these rules to bring a section back. */
#panel-settings .settings-rail-item[data-section="gmail"],
#panel-settings .settings-rail-item[data-section="outreach-tools"],
#panel-settings .settings-rail-item[data-section="calendar"],
#panel-settings .settings-rail-item[data-section="billing"],
#set-gmail, #set-outreach-tools, #set-calendar, #set-billing,
#panel-settings .settings-rail-eyebrow:has(+ .settings-rail-item[data-section="gmail"]),
#panel-settings .settings-rail-eyebrow:has(+ .settings-rail-item[data-section="billing"]),
#panel-settings .settings-group-head:has(+ #set-gmail),
#panel-settings .settings-group-head:has(+ #set-billing),
.home-welcome { display: none !important; }

/* GTM CRM dashboards: bold control-room look */
.dash-head{position:relative;overflow:hidden;border-radius:20px;padding:28px 32px 26px;margin-bottom:20px;color:#fff;
  background:radial-gradient(900px 300px at 85% -20%,#ff3d8b 0%,rgba(255,61,139,0) 60%),linear-gradient(135deg,#1b1240 0%,#2c1a6b 55%,#4a1d7a 100%);
  box-shadow:0 18px 40px -18px rgba(44,26,107,.7)}
.dash-head h2{margin:0;font-size:38px;line-height:1;font-weight:800;letter-spacing:-.03em;color:#fff}
.dash-head .dash-sub{margin-top:8px;max-width:560px;font-size:14px;line-height:1.45;color:rgba(255,255,255,.78)}
.dash-kpis{display:flex;gap:36px;flex-wrap:wrap;margin-top:22px}
.dash-kpi b{display:block;font-size:44px;line-height:1;font-weight:800;letter-spacing:-.04em;color:#fff}
.dash-kpi span{display:block;margin-top:6px;font-size:13px;color:rgba(255,255,255,.72)}
.dash-kpi.win b{color:#5dffb0}
.funnel{display:flex;height:46px;border-radius:14px;overflow:hidden;gap:3px;margin-bottom:12px}
.funnel button{border:0;cursor:pointer;min-width:34px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:14px;transition:filter .15s,transform .15s}
.funnel button:hover{filter:brightness(1.12)}
.funnel button[aria-pressed="false"].dim{opacity:.45}
.stage-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.stage-chip{border:2px solid transparent;border-radius:999px;padding:7px 14px;font-size:13px;font-weight:700;cursor:pointer;
  background:var(--bg2);color:var(--text);display:inline-flex;gap:8px;align-items:center}
.stage-chip i{width:10px;height:10px;border-radius:50%;display:inline-block}
.stage-chip[aria-pressed="true"]{border-color:var(--text)}
.stage-chip em{font-style:normal;color:var(--text-dim);font-weight:600}
.pill{display:inline-block;border-radius:999px;padding:3px 11px;font-size:12px;font-weight:700;color:#fff;white-space:nowrap}
.stage-cold{--c:#6c7bff}.stage-warm{--c:#f5a20a}.stage-hot{--c:#ff3d8b}.stage-win{--c:#19c37d}.stage-dead{--c:#8a8aa3}
.funnel button,.pill{background:var(--c)}.stage-chip i{background:var(--c)}
.dash-table .table-wrap{border-radius:16px}
.dash-table th{font-size:12px;letter-spacing:.02em}
.dash-table tbody tr:hover{background:var(--accent-glow)}
.net-row td:first-child{border-left:5px solid #ff3d8b}
@media (max-width:640px){.dash-head{padding:20px}.dash-head h2{font-size:28px}.dash-kpi b{font-size:34px}.dash-kpis{gap:22px}}