/* ── GLOBAL SEARCH (CMD+K) ── */ .gs-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);z-index:var(--z-search);display:flex;align-items:flex-start;justify-content:center;padding-top:11vh;opacity:0;pointer-events:none;transition:opacity .18s;} .gs-overlay.open{opacity:1;pointer-events:all;} .gs-panel{background:var(--s1);border:1px solid rgba(var(--accent-rgb),.14);border-radius:8px;width:min(94vw,640px);box-shadow:var(--shadow-lg);overflow:hidden;transition:transform .18s var(--ease-out-quart),opacity .15s;opacity:0;} .gs-overlay.open .gs-panel{transform:translateY(0);opacity:1;} .gs-input-wrap{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid rgba(var(--accent-rgb),.1);} .gs-icon{font-size:16px;color:var(--muted);flex-shrink:0;} .gs-input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:15px;font-family:inherit,sans-serif;font-weight:500;} .gs-input::placeholder{color:var(--dim);} .gs-esc{background:rgba(var(--accent-rgb),.08);border:1px solid rgba(var(--accent-rgb),.16);border-radius:4px;padding:2px 6px;font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;} .gs-results{max-height:52vh;overflow-y:auto;} .gs-empty{padding:24px;text-align:center;color:var(--muted);font-size:12px;} .gs-section-hdr{padding:8px 16px 4px;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(var(--accent-rgb),.5);background:rgba(var(--accent-rgb),.04);border-bottom:1px solid rgba(var(--accent-rgb),.1);} .gs-result{display:flex;align-items:center;gap:12px;padding:10px 16px;cursor:pointer;transition:background .1s;border-bottom:1px solid var(--border);} .gs-result:last-child{border-bottom:none;} .gs-result:hover,.gs-result.active{background:rgba(var(--accent-rgb),.07);} .gs-result-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;background:rgba(var(--accent-rgb),.08);} .gs-result-info{flex:1;min-width:0;} .gs-result-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .gs-result-meta{font-size:10px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .gs-result-roll{margin-top:2px;overflow:hidden;text-overflow:ellipsis;} .gs-result-right{text-align:right;flex-shrink:0;} .gs-result-val{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--color-teal);font-weight:600;} .gs-result-sub{font-size:9px;color:var(--muted);} .gs-footer{display:flex;gap:16px;padding:8px 16px;border-top:1px solid rgba(var(--accent-rgb),.09);background:rgba(var(--accent-rgb),.03);} .gs-footer span{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--muted);} /* ── SEARCH HIGHLIGHT ── */ .gs-result-name mark, .gs-result-meta mark { background: rgba(var(--accent-rgb),.3); color: var(--accent); border-radius: 2px; padding: 0 1px; } /* ── CALL VELOCITY CHART ── */ .velocity-chart{display:flex;align-items:flex-end;gap: 2px;height:54px;padding:0 2px;} .vc-bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap: 2px;min-width:0;} .vc-bar{width:100%;border-radius:3px 3px 0 0;transition:height .3s ease;min-height:2px;position:relative;cursor:default;} .vc-bar:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);background:#ffffff;border:1px solid rgba(var(--accent-rgb), .12);border-radius:5px;padding:2px 6px;font-size:10px;white-space:nowrap;color:#1a1e23;font-family:'JetBrains Mono',monospace;z-index:10;pointer-events:none;box-shadow:0 2px 6px rgba(0,0,0,.08);} .vc-label{font-family:'JetBrains Mono',monospace;font-size:8px;color:var(--muted);white-space:nowrap;} .velocity-section{margin-top:12px;padding-top:12px;border-top:1px solid rgba(var(--accent-rgb), .1);} .velocity-title{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;display:flex;align-items:center;justify-content:space-between;} .velocity-total{font-size:11px;color:var(--text);font-weight:600;} /* ── INDUSTRY PRO ── */ .ip-badge{display:inline-flex;align-items:center;gap: 2px;padding:2px 6px;border-radius:4px;font-size:10px;font-weight:700;background:rgba(var(--color-accent-rgb),.1);color:var(--color-accent);border:1px solid rgba(var(--color-accent-rgb),.22);letter-spacing:.01em;white-space:nowrap;} .ip-badge-sm{display:inline-flex;align-items:center;gap: 2px;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:700;background:rgba(var(--color-accent-rgb),.09);color:var(--color-accent);border:1px solid rgba(var(--color-accent-rgb),.2);margin-left:6px;} .decd-badge-sm{display:inline-flex;align-items:center;gap: 2px;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:700;background:rgba(234,134,143,.08);color:var(--color-red);border:1px solid rgba(234,134,143,.18);margin-left:4px;} .ir-depth-badge{display:inline-flex;align-items:center;padding:1px 6px;border-radius:4px;font-size:8px;font-weight:600;background:rgba(var(--brand-og-accent-rgb),.08);color:var(--color-blue);border:1px solid rgba(var(--brand-og-accent-rgb),.18);margin-left:4px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .ir-depth-select{display:inline-block;margin-left:4px;padding:1px 4px;border-radius:4px;font-size:9px;font-weight:600;background:rgba(var(--brand-og-accent-rgb),.06);color:var(--color-blue);border:1px solid rgba(var(--brand-og-accent-rgb),.2);cursor:pointer;max-width:200px;appearance:auto;} tr.row-deceased{background:rgba(248,113,113,.04);} tr.row-deceased td{color:rgba(255,255,255,.4);} tr.row-deceased:hover{background:rgba(248,113,113,.08);} .ip-toggle-btn{display:inline-flex;align-items:center;padding:6px 14px;border-radius:8px;font-size:11px;font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--s1);color:var(--muted);transition:background .15s,border-color .15s,color .15s;white-space:nowrap;user-select:none;letter-spacing:.02em;} .ip-toggle-btn:hover{border-color:var(--border2);background:var(--s2);color:var(--text);} #ip-toggle-all.active,#ip-toggle-pv.active{background:var(--accent);border-color:var(--accent);color:#fff;} #ip-toggle-all.active:hover,#ip-toggle-pv.active:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff;} /* .ip-toggle-dot removed — toggle state now communicated by full-button fill (audit §3.2) */ .ip-hdr-toggle{display:inline-flex;align-items:center;gap: 4px;padding:4px 8px;border-radius:6px;cursor:pointer;border:1px solid var(--border);background:transparent;transition:all .15s;flex-shrink:0;} .ip-hdr-toggle:hover{border-color:rgba(var(--color-accent-rgb),.4);background:rgba(var(--color-accent-rgb),.07);} .ip-hdr-toggle.flagged{border-color:rgba(var(--color-accent-rgb),.45);background:rgba(var(--color-accent-rgb),.12);} .ip-hdr-toggle input[type=checkbox]{width:13px;height:13px;accent-color:var(--color-accent);cursor:pointer;margin:0;} .ip-hdr-toggle-label{font-size:10px;font-weight:700;color:var(--muted);white-space:nowrap;pointer-events:none;transition:color .15s;} .ip-hdr-toggle.flagged .ip-hdr-toggle-label{color:var(--color-accent);} /* ══════════════════════════════════════════════════════════════ CARBON TEAL — Cool Carbon + Vivid Teal Surfaces: var(--bg/s1/s2/s3/s4) Accent: var(--accent) Text: var(--text/muted/dim) ══════════════════════════════════════════════════════════════ */ /* Surfaces */ .tbl-top{background:var(--s1);color:var(--text);} .tbl-wrap .tbl-top{border-bottom:none;} .analytics-body{border-top:none;} .pc-head{border-bottom:1px solid rgba(var(--accent-rgb),.09);} .psp-hdr{border-bottom:1px solid rgba(var(--accent-rgb),.09);} /* removed — psp-body styled in components.css */ /* Typography & labels */ .tbl-title{font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--text);} .sb-label{color:rgba(var(--accent-rgb),.45);} .f-label{color:rgba(var(--accent-rgb),.5);} .addr-toggle-label{color:rgba(var(--accent-rgb),.5);} .kpi-expand-toggle{color:rgba(var(--accent-rgb),.45);} .kpi-expand-toggle:hover{color:var(--accent);} .analytics-toggle-label{color:var(--accent) !important;} .legal-dropdown-prop{color:rgba(var(--accent-rgb),.45);} .proj-badge{background:rgba(var(--accent-rgb),.07);color:var(--muted);} .proj-badge.warn{background:rgba(224,88,88,.1);color:var(--red);} /* Accent values */ .offer-val{color:var(--color-teal);} .gs-result-val{color:var(--color-teal);} .qc-mode-badge{color:var(--accent);} .sb-stat-val{color:var(--accent);} /* Active states */ .gnav-btn.active .gnav-left{color:var(--accent);font-weight:600;} .well-item.active{background:rgba(var(--accent-rgb),.08);} .well-item:hover{background:rgba(var(--accent-rgb),.05);} .proj-header.active-group{background:rgba(var(--accent-rgb),.08);border-color:rgba(var(--accent-rgb),.2);} /* Save buttons — deep teal */ /* removed — save buttons styled in components.css */ /* removed — timer save styled in components.css */ .pm-save:hover{background:var(--accent-hover);} /* Progress & bars */ .pc-progress-fill{background:var(--accent);} .pc-progress-bar{background:rgba(var(--accent-rgb),.1);} .psp-progress-fill,.psp-goal-fill{background:linear-gradient(90deg,var(--accent-deep),var(--accent));} .sb-mini-bar{background:linear-gradient(90deg,var(--accent-deep),var(--accent));} /* Scrollbar — teal tint */ ::-webkit-scrollbar-thumb{background:rgba(var(--accent-rgb),.18);} ::-webkit-scrollbar-thumb:hover{background:rgba(var(--accent-rgb),.38);} /* Overlay */ .overlay,.gs-overlay{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);} /* DNRA interactive field */ .dnra-display{background:var(--s2);border:1px solid rgba(var(--accent-rgb),.12);} .dnra-display:hover{border-color:rgba(var(--accent-rgb),.4);} .dnra-display.custom-set{border-color:rgba(var(--accent-rgb),.4);background:rgba(var(--accent-rgb),.06);} .dnra-display.custom-set .dnra-val{color:var(--color-teal);} .dnra-cancel{background:rgba(var(--accent-rgb),.06);border:1px solid rgba(var(--accent-rgb),.14);color:var(--muted);} .dnra-reset{border:1px solid rgba(var(--accent-rgb),.14);} .dnra-reset:hover{border-color:rgba(224,88,88,.3);color:var(--red);} /* Form focus rings */ .f-ctrl:focus,.pm-input:focus,.psp-input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.1); } /* removed — #view-notifications styled in components.css shared selector */ /* Per-page selector */ .per-page-sel{background:var(--s2);border:1px solid rgba(var(--accent-rgb),.16);color:var(--text);} /* OC misc */ .oc-followup-hint{background:rgba(var(--accent-rgb),.04);border:1px solid rgba(var(--accent-rgb),.1);} /* Upload zone */ .upload-zone{background:rgba(var(--accent-rgb),.03);border:2px dashed rgba(var(--accent-rgb),.15);} .upload-zone:hover,.upload-zone.drag{border-color:var(--accent);background:rgba(var(--accent-rgb),.06);} .fmt{background:rgba(var(--accent-rgb),.05);border:1px solid rgba(var(--accent-rgb),.12);color:var(--muted);} /* View header */ /* Profile avatar text color (dark theme — light text) */ .profile-avatar,.pm-avatar-lg{color:#e8e8e8 !important;} /* Multi-pill */ .multi-pill{background:rgba(var(--accent-rgb),.09);color:var(--accent);border:1px solid rgba(var(--accent-rgb),.2);} /* Dupe pill */ .dupe-pill{background:rgba(224,88,88,.09);color:var(--red);border:1px solid rgba(224,88,88,.18);} /* Confirm / setup modals */ .confirm-modal,.setup-card{background:var(--s1);border:1px solid rgba(var(--accent-rgb),.12);} .confirm-modal{box-shadow:0 16px 48px rgba(0,0,0,.5);} /* GS misc */ .gs-esc{background:rgba(var(--accent-rgb),.07);border:1px solid rgba(var(--accent-rgb),.15);color:var(--muted);} .gs-footer span{color:var(--muted);} .gs-result-icon{background:rgba(var(--accent-rgb),.07);} /* QC contact chips */ .qc-contact-chip{background:rgba(var(--accent-rgb),.07);border:1px solid rgba(var(--accent-rgb),.17);color:var(--text);} /* Tbl actions toolbar */ .search-box:focus-within{border-color:rgba(var(--accent-rgb),.45);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.1);} /* Well filter dropdown list */ .wf-list{display:flex;flex-direction:column;width:100%;gap:1px;} .wf-group-lbl{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);padding:8px 6px 2px;opacity:.55;user-select:none;} .wf-group-lbl:first-child{padding-top:2px;} .wf-item{display:flex;align-items:center;gap: 6px;padding:4px 8px;border-radius:6px;font-size:10px;font-family:'JetBrains Mono',monospace;color:var(--text);cursor:pointer;transition:background .12s;white-space:nowrap;border:none;background:transparent;text-align:left;width:100%;} .wf-item:hover{background:rgba(var(--accent-rgb),.08);} .wf-item.on{background:rgba(var(--accent-rgb),.13);color:var(--accent-hover);font-weight:600;} /* .wf-dot removed Track G.2 — strict-dead, 0 JS/HTML refs. */ .wf-divider{height:1px;background:var(--border);margin:4px 0;} /* Color swatch active ring */ .color-swatch.active{border-color:var(--bg);box-shadow:0 0 0 2px var(--accent);} /* SB footer border */ .sb-footer{border-top:1px solid rgba(var(--accent-rgb),.1);} .sb-divider{background:rgba(var(--accent-rgb),.09);} /* Links */ a{color:var(--accent);} /* ── Import Review: Industry Pro inline badge ── */ .ir-pro-add{display:inline-flex;align-items:center;padding:1px 4px;border-radius:4px;font-size:9px;font-weight:600;color:var(--muted);border:1px dashed var(--border);margin-left:6px;cursor:pointer;opacity:.5;transition:all .15s} .ir-pro-add:hover{opacity:1;border-color:rgba(var(--color-accent-rgb),.4);color:var(--color-accent);background:rgba(var(--color-accent-rgb),.06)} .ir-pro-btn{cursor:pointer!important}.ir-pro-btn:hover{opacity:.7} /* ══════════════════════════════════════════════════════════ STANDALONE ANALYTICS PAGE (audit §6 / Phase R5a skeleton) All rules scoped under #view-analytics so they cannot bleed into the project-level analytics modal (which already owns .analytics-section / .analytics-toggle / .analytics-body / .analytics-row-label / .analytics-divider in components.css). R5a delivers structure + zero-state. R5b/c/d/e/f fill content. ══════════════════════════════════════════════════════════ */ #view-analytics{ padding:0; } /* 2026-05-24: page no longer capped at 1280px max-width — fills the parent column so wider viewports use the available space. Horizontal padding tightened 28→20px so the 4-up KPI row has enough room for Pipeline + Closed Value (long $ strings) at narrow widths. */ #view-analytics .analytics-page{ max-width:none; margin:0; padding:28px 20px 64px; display:flex; flex-direction:column; gap:20px; } /* ── Hero strip — Newsreader 28px italic page title (the one editorial moment per audit §6.9 acceptance criteria) ── */ #view-analytics .analytics-hero{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding-bottom:8px; border-bottom:1px solid #E5E7EB; } #view-analytics .analytics-hero-titles{ min-width:0; } #view-analytics .analytics-hero-title{ font-family:'Newsreader','Georgia',serif; font-style:italic; font-size:28px; font-weight:500; line-height:1.15; letter-spacing:-.01em; color:#111827; margin:0; } #view-analytics .analytics-hero-meta{ margin-top:6px; font-family:'Geist Sans',system-ui,sans-serif; font-size:13px; color:#4B5563; line-height:1.5; } /* ── Hero tools: range dropdown + compare toggle (R5e) ── */ #view-analytics .analytics-hero-tools{ flex-shrink:0; display:flex; align-items:center; gap:10px; } /* Range dropdown — Mercury-style compact button + popover menu. */ #view-analytics .analytics-range{ position:relative; } #view-analytics .analytics-range-btn{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; background:#FFFFFF; border:1px solid #E5E7EB; border-radius:8px; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:500; color:#374151; cursor:pointer; user-select:none; transition:border-color .12s, background-color .12s; } #view-analytics .analytics-range-btn:hover{ border-color:#D1D5DB; background:#F9FAFB; } #view-analytics .analytics-range-btn[aria-expanded="true"]{ border-color:var(--brand-og-accent, #298084); box-shadow:0 0 0 3px rgba(var(--brand-og-accent-rgb, 41,128,132), .10); } #view-analytics .analytics-range-caret{ font-size:9px; opacity:.55; } #view-analytics .analytics-range-menu{ position:absolute; top:calc(100% + 6px); right:0; min-width:180px; background:#FFFFFF; border:1px solid #E5E7EB; border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.04); padding:4px; display:flex; flex-direction:column; z-index:50; } #view-analytics .analytics-range-menu[hidden]{ display:none; } #view-analytics .analytics-range-item{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 12px; background:transparent; border:0; border-radius:6px; font-family:'Geist Sans',system-ui,sans-serif; font-size:13px; color:#374151; cursor:pointer; text-align:left; white-space:nowrap; transition:background-color .1s; } #view-analytics .analytics-range-item:hover{ background:#F3F4F6; } #view-analytics .analytics-range-item--active{ background:rgba(var(--brand-og-accent-rgb, 41,128,132), .08); color:var(--brand-og-accent, #298084); font-weight:500; } #view-analytics .analytics-range-item--active:hover{ background:rgba(var(--brand-og-accent-rgb, 41,128,132), .12); } #view-analytics .analytics-range-item--disabled{ color:#D1D5DB; cursor:not-allowed; } #view-analytics .analytics-range-item--disabled:hover{ background:transparent; } #view-analytics .analytics-range-check{ color:var(--brand-og-accent, #298084); font-weight:600; } /* Compare-to-previous toggle pill. */ #view-analytics .analytics-compare{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; background:#FFFFFF; border:1px solid #E5E7EB; border-radius:8px; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:500; color:#6B7280; cursor:pointer; transition:border-color .12s, background-color .12s, color .12s; } #view-analytics .analytics-compare:hover{ border-color:#D1D5DB; color:#374151; } #view-analytics .analytics-compare-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:#D1D5DB; transition:background-color .12s; } #view-analytics .analytics-compare--on{ border-color:var(--brand-og-accent, #298084); background:rgba(var(--brand-og-accent-rgb, 41,128,132), .06); color:var(--brand-og-accent, #298084); } #view-analytics .analytics-compare--on .analytics-compare-dot{ background:var(--brand-og-accent, #298084); box-shadow:0 0 0 2px rgba(var(--brand-og-accent-rgb, 41,128,132), .20); } /* ── Card surface (shared by KPI cards, charts, table zone) ── */ #view-analytics .analytics-kpi, #view-analytics .analytics-chart, #view-analytics .analytics-table-zone{ background:#FFFFFF; border:1px solid #E5E7EB; border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,.04), 0 6px 20px rgba(15,23,42,.04); } /* ── KPI row — 4 cards, hero spans 2fr per audit §6.2. 2026-05-24: minmax(0, Nfr) so long $ values don't blow out their cell and push the next card off-screen. */ #view-analytics .analytics-kpi-row{ display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap:16px; } #view-analytics .analytics-kpi{ padding:20px 22px; display:flex; flex-direction:column; gap:8px; min-width:0; } #view-analytics .analytics-kpi--hero{ padding:24px 26px; gap:10px; } #view-analytics .analytics-kpi-label{ font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#9CA3AF; } #view-analytics .analytics-kpi-val{ font-family:'JetBrains Mono',monospace; /* 2026-05-24: was hardcoded 36px which overflowed the 1fr cell when the value was 11+ digits ($16,968,223). clamp scales between 24px (cramped cell) and 32px (comfortable) so the longest $ string always fits. */ font-size:clamp(24px, 2.4vw, 32px); font-weight:600; line-height:1; color:#111827; font-variant-numeric:tabular-nums; letter-spacing:-.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #view-analytics .analytics-kpi--hero .analytics-kpi-val{ font-size:52px; letter-spacing:-.03em; } #view-analytics .analytics-kpi-delta{ font-family:'Geist Sans',system-ui,sans-serif; font-size:12px; color:#6B7280; line-height:1.3; font-style:italic; } /* 60×16 ghost-sparkline per KPI card (audit §6.7 + §6.9, recon F3). Renders in both zero and populated states; R5c will swap the ghost for a real micro-line when call-velocity data exists. Inherits color so .analytics-kpi--empty's dim treatment carries through. */ #view-analytics .analytics-kpi-spark{ display:block; width:60px; height:16px; color:var(--brand-og-accent, #298084); opacity:.55; margin-top:-2px; } #view-analytics .analytics-kpi--empty .analytics-kpi-spark{ color:#9CA3AF; opacity:.45; } /* Mixpanel-style sparse-data treatment — fade the card, italic hint. */ #view-analytics .analytics-kpi--empty{ opacity:.62; } #view-analytics .analytics-kpi--empty .analytics-kpi-val{ color:#9CA3AF; font-weight:500; } /* ── Chart row — 2-col grid ── */ #view-analytics .analytics-charts{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } #view-analytics .analytics-chart{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:14px; min-height:260px; } #view-analytics .analytics-chart-hdr{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; } #view-analytics .analytics-chart-title{ font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#374151; } #view-analytics .analytics-chart-meta{ font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:#9CA3AF; } #view-analytics .analytics-chart-body{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:14px; } /* ── Wave B (2026-05-22) — Why deals are lost (full-width single row) ── */ #view-analytics .analytics-loss-section{ grid-template-columns:1fr; margin-top:16px; } #view-analytics .analytics-loss-section .analytics-chart{ min-height:auto; } #view-analytics .analytics-loss-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; } #view-analytics .analytics-loss-row{ display:grid; grid-template-columns:200px 1fr 80px; align-items:center; gap:14px; padding:6px 0; } #view-analytics .analytics-loss-row-unknown{ opacity:.7; } #view-analytics .analytics-loss-label{ font-family:'Geist Sans',system-ui,sans-serif; font-size:13px; color:#374151; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #view-analytics .analytics-loss-bar-track{ display:block; height:8px; background:rgba(var(--accent-rgb),.06); border-radius:4px; overflow:hidden; } #view-analytics .analytics-loss-bar-fill{ display:block; height:100%; background:var(--color-secondary,#298084); border-radius:4px; transition:width .3s ease-out; } #view-analytics .analytics-loss-row-unknown .analytics-loss-bar-fill{ background:#9CA3AF; } #view-analytics .analytics-loss-count{ font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums; font-size:13px; font-weight:600; color:#111827; text-align:right; display:flex; align-items:baseline; justify-content:flex-end; gap:6px; } #view-analytics .analytics-loss-pct{ font-size:10px; font-weight:400; color:#9CA3AF; letter-spacing:.04em; } /* ── Empty-state primitives (ghost bars / ghost funnel / ghost rows) ── */ #view-analytics .analytics-empty-caption{ font-family:'Geist Sans',system-ui,sans-serif; font-size:11px; color:#9CA3AF; font-style:italic; line-height:1.4; margin-top:auto; } /* ── Live calls-by-day bar chart (R5c.1, audit §6.4) ── CSS-only, no SVG. Bars in a 7-col grid; heights set inline by the renderer. Today's bar gets a brass 1px inset stroke per audit ("the only place brass appears in a chart, marking 'now'"). ──────────────────────────────────────────────────────────── */ #view-analytics .analytics-cbd{ display:flex; flex-direction:column; gap:10px; flex:1; } #view-analytics .analytics-cbd-bars{ display:grid; grid-template-columns:repeat(7,1fr); align-items:end; gap:10px; height:140px; padding:0 4px; } #view-analytics .analytics-cbd-col{ display:flex; align-items:flex-end; justify-content:center; height:100%; position:relative; } #view-analytics .analytics-cbd-bar{ width:100%; min-height:4px; background:var(--brand-og-accent, #298084); opacity:.85; border-radius:2px 2px 0 0; transition:opacity .12s, transform .12s; cursor:default; position:relative; } #view-analytics .analytics-cbd-bar:hover{ opacity:1; } #view-analytics .analytics-cbd-bar--today{ /* Brass 1px inset stroke — only place brass appears in a chart. */ box-shadow:inset 0 0 0 1px var(--brand-brass, #CC9C42); } #view-analytics .analytics-cbd-bar--zero{ height:2px !important; background:#E5E7EB; opacity:1; border-radius:1px; } #view-analytics .analytics-cbd-bar--zero.analytics-cbd-bar--today{ background:#E5E7EB; box-shadow:inset 0 0 0 1px var(--brand-brass, #CC9C42); } /* Compare-mode previous-period overlay (R5e.B). Renders behind the current bar at 0.25 opacity so the eye can read both periods in one glance — Stripe/Amplitude pattern. */ #view-analytics .analytics-cbd-bar-prev{ position:absolute; inset:auto 0 0 0; width:100%; background:var(--brand-og-accent, #298084); opacity:.18; border-radius:2px 2px 0 0; z-index:0; } #view-analytics .analytics-cbd-col .analytics-cbd-bar{ position:relative; z-index:1; } /* Tooltip via :hover::after — pure CSS, JetBrains Mono caps. */ #view-analytics .analytics-cbd-bar:hover::after{ content:attr(data-tip); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); background:#FFFFFF; border:1px solid #E5E7EB; border-radius:6px; padding:6px 10px; font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:500; white-space:nowrap; color:#111827; box-shadow:0 4px 12px rgba(0,0,0,.08); z-index:10; pointer-events:none; letter-spacing:.02em; } #view-analytics .analytics-cbd-labels{ display:grid; grid-template-columns:repeat(7,1fr); gap:10px; padding:0 4px; } #view-analytics .analytics-cbd-label{ font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:500; letter-spacing:.08em; color:#9CA3AF; text-align:center; } #view-analytics .analytics-cbd-label--today{ color:#374151; font-weight:700; } #view-analytics .analytics-cbd-label--hidden{ visibility:hidden; } /* Compare-mode delta text in the chart-meta line (R5e.B). */ #view-analytics .analytics-cbd-delta{ display:inline-block; margin-left:4px; font-weight:700; } #view-analytics .analytics-cbd-delta--up { color:var(--color-completed, #0D5A2B); } #view-analytics .analytics-cbd-delta--down { color:#A31818; } #view-analytics .analytics-cbd-delta--flat { color:#9CA3AF; } #view-analytics .analytics-cbd-meta{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.06em; color:#9CA3AF; margin-top:auto; text-transform:uppercase; } /* ── Ghost-state bar chart (zero-data, audit §6.7) ── */ #view-analytics .analytics-ghost-bars{ display:grid; grid-template-columns:repeat(7,1fr); align-items:end; gap:10px; height:140px; padding:0 4px; } #view-analytics .analytics-ghost-bar{ display:block; height:6px; background:#E5E7EB; border-radius:1px; } #view-analytics .analytics-ghost-bar:nth-child(1){ height:24px; } #view-analytics .analytics-ghost-bar:nth-child(2){ height:14px; } #view-analytics .analytics-ghost-bar:nth-child(3){ height:36px; } #view-analytics .analytics-ghost-bar:nth-child(4){ height:8px; } #view-analytics .analytics-ghost-bar:nth-child(5){ height:48px; } #view-analytics .analytics-ghost-bar:nth-child(6){ height:18px; } #view-analytics .analytics-ghost-bar:nth-child(7){ height:6px; } /* ── Zero-state CTA banner (R5f, audit §6.7) ── Renders between chart row and segment table when phase='zero'. "Hero CTA below the funnel: big teal button 'Make your first call.'" Editorial Newsreader headline + body copy + teal pill CTA. */ #view-analytics .analytics-zero-cta{ background:#FFFFFF; border:1px solid #E5E7EB; border-radius:12px; padding:28px 32px; display:flex; align-items:center; justify-content:space-between; gap:32px; box-shadow:0 1px 3px rgba(0,0,0,.04), 0 6px 20px rgba(15,23,42,.04); } #view-analytics .analytics-zero-cta-content{ min-width:0; flex:1; } #view-analytics .analytics-zero-cta-headline{ font-family:'Newsreader','Georgia',serif; font-style:italic; font-size:26px; font-weight:500; letter-spacing:-.01em; color:#111827; line-height:1.15; margin:0 0 6px; } #view-analytics .analytics-zero-cta-body{ font-family:'Geist Sans',system-ui,sans-serif; font-size:13px; color:#4B5563; line-height:1.5; max-width:62ch; margin:0; } #view-analytics .analytics-zero-cta-btn{ display:inline-flex; align-items:center; gap:8px; padding:14px 22px; font-family:'Geist Sans',system-ui,sans-serif; font-size:14px; font-weight:600; letter-spacing:.01em; color:#FFFFFF; background:var(--brand-og-accent, #298084); border:0; border-radius:999px; cursor:pointer; white-space:nowrap; box-shadow:0 4px 14px rgba(41,128,132,.28), 0 1px 2px rgba(0,0,0,.05); transition:background-color .15s var(--ease-out, ease-out), box-shadow .2s, transform .12s; } #view-analytics .analytics-zero-cta-btn:hover{ background:var(--brand-og-accent-hover, #1f6669); box-shadow:0 6px 18px rgba(41,128,132,.35), 0 1px 2px rgba(0,0,0,.05); } #view-analytics .analytics-zero-cta-btn:active{ transform:translateY(1px); } @media (max-width:768px){ #view-analytics .analytics-zero-cta{ flex-direction:column; align-items:flex-start; gap:16px; padding:22px 20px; } #view-analytics .analytics-zero-cta-headline{ font-size:22px; } #view-analytics .analytics-zero-cta-btn{ width:100%; justify-content:center; } } /* Sparse-state footnote: "Why no deals yet?" inline link below funnel when there are calls but no deal records (audit §6.7). */ #view-analytics .analytics-funnel-footnote{ font-family:'Geist Sans',system-ui,sans-serif; font-size:12px; color:#6B7280; font-style:italic; margin-top:14px; padding-top:12px; border-top:1px dashed #F3F4F6; } #view-analytics .analytics-funnel-footnote-link{ /* Native