/* ══════════════════════════════════════════════════════════════ Dark Mode — Full design system Applied via [data-theme="carbon2"] on Mirrors Carbon Test 2.0 structure adapted for dark surfaces ══════════════════════════════════════════════════════════════ */ /* ── Dark palette with indigo-violet accent ── */ html[data-theme="carbon2"] { /* Surface palette — deep charcoal */ --color-bg: #0f1117; --color-surface: #181a20; --color-surface-2: #1e2028; --color-border: #2a2d38; --color-border-subtle: #22252e; --color-border-emphasis: #3e4150; /* Text hierarchy — high contrast on dark */ --color-text: #e8e9ed; --color-text-muted: #8b8fa0; --color-text-light: #5c6070; /* Accent — warm blue (brighter for dark bg) */ --color-accent: #5a9aff; --color-accent-hover: #78b0ff; --color-accent-subtle: rgba(90, 154, 255, 0.10); --color-accent-light: rgba(90, 154, 255, 0.16); /* Blue — warm blue family */ --color-blue: #5a9aff; --color-blue-surface: rgba(90, 154, 255, 0.12); --color-blue-text: #93bbff; --color-blue-light: rgba(90, 154, 255, 0.08); /* Status — brighter for dark bg */ --color-green: #34d399; --color-green-subtle: rgba(52, 211, 153, 0.10); --color-green-surface: rgba(52, 211, 153, 0.12); --color-green-text: #6ee7b7; --color-amber: #fbbf24; --color-amber-subtle: rgba(251, 191, 36, 0.10); --color-amber-surface: rgba(251, 191, 36, 0.12); --color-amber-text: #fcd34d; --color-red: #f87171; --color-red-subtle: rgba(248, 113, 113, 0.10); --color-red-surface: rgba(248, 113, 113, 0.12); --color-red-text: #fca5a5; --color-teal: #2dd4bf; --color-teal-surface: rgba(45, 212, 191, 0.12); --color-teal-text: #5eead4; --color-pink-surface: rgba(244, 114, 182, 0.12); --color-pink-text: #f9a8d4; /* ── Type scale — strict 7-step ── */ --t-2xs: 0.625rem; --t-xs: 0.6875rem; --t-sm: 0.8125rem; --t-base: 1rem; --t-md: 1.125rem; --t-lg: 1.25rem; --t-xl: 1.75rem; /* Weight scale */ --w-normal: 400; --w-medium: 500; --w-semibold: 600; /* Tracking tokens */ --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.06em; /* Easing tokens */ --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* Shadows — dark */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.30); --shadow-md: 0 2px 4px rgba(0,0,0,0.40); } /* ── Dark-specific overrides ── */ [data-theme="carbon2"] body { color-scheme: dark; font-size: var(--t-sm); line-height: 1.6; /* slightly more than light — dark text needs breathing room */ font-kerning: normal; } /* Scrollbar */ [data-theme="carbon2"] ::-webkit-scrollbar { width: 4px; } [data-theme="carbon2"] ::-webkit-scrollbar-track { background: var(--color-bg); } [data-theme="carbon2"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); transition: background 200ms; } [data-theme="carbon2"] ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.25); } /* Modal overlay — deeper */ [data-theme="carbon2"] .modal-overlay { background: rgba(0, 0, 0, 0.60); } /* Loading overlay */ [data-theme="carbon2"] .loading-overlay { background: rgba(15, 17, 23, 0.85); } /* Select arrow — light for dark bg */ [data-theme="carbon2"] select:not(.inline-select) { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b8fa0' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; padding-right: 26px; } /* Score colors */ [data-theme="carbon2"] .score-number.green { color: #34d399; } [data-theme="carbon2"] .score-number.amber { color: #fbbf24; } [data-theme="carbon2"] .score-number.red { color: #f87171; } /* Badges */ [data-theme="carbon2"] .badge-green { background: rgba(52, 211, 153, 0.14); color: #6ee7b7; } [data-theme="carbon2"] .badge-amber { background: rgba(251, 191, 36, 0.14); color: #fcd34d; } [data-theme="carbon2"] .badge-red { background: rgba(248, 113, 113, 0.14); color: #fca5a5; } [data-theme="carbon2"] .badge-blue { background: rgba(90, 154, 255, 0.14); color: #93bbff; } [data-theme="carbon2"] .badge-accent { background: rgba(90, 154, 255, 0.14); color: #93bbff; } [data-theme="carbon2"] .badge-muted { background: var(--color-surface-2); color: var(--color-text-muted); } /* Toast */ [data-theme="carbon2"] .toast { box-shadow: 0 2px 8px rgba(0,0,0,0.50); } /* Focus ring */ [data-theme="carbon2"] input:focus, [data-theme="carbon2"] textarea:focus, [data-theme="carbon2"] select:focus { border-color: #5a9aff; } [data-theme="carbon2"] input:focus-visible, [data-theme="carbon2"] textarea:focus-visible, [data-theme="carbon2"] select:focus-visible { box-shadow: 0 0 0 2px rgba(90, 154, 255, 0.18); } /* MEDDPICC filled */ [data-theme="carbon2"] .meddpicc-letter.filled { background: rgba(90, 154, 255, 0.16); color: #93bbff; } /* Rich content bullets */ [data-theme="carbon2"] .rich-content .rc-bullet::before { color: #5a9aff; } /* Tabular nums */ [data-theme="carbon2"] .snapshot-value, [data-theme="carbon2"] .score-number, [data-theme="carbon2"] .kpi-value, [data-theme="carbon2"] td, [data-theme="carbon2"] input[type="number"], [data-theme="carbon2"] .pipeline-value { font-variant-numeric: tabular-nums; } [data-theme="carbon2"] body { font-size: var(--t-sm); line-height: 1.55; font-kerning: normal; } /* Tabular nums for all data values */ [data-theme="carbon2"] .snapshot-value, [data-theme="carbon2"] .score-number, [data-theme="carbon2"] .kpi-value, [data-theme="carbon2"] td, [data-theme="carbon2"] input[type="number"], [data-theme="carbon2"] .pipeline-value { font-variant-numeric: tabular-nums; } /* ── Page layout — compress outer chrome ── */ [data-theme="carbon2"] .page { padding: 18px 22px 24px; } [data-theme="carbon2"] .page-header { margin-bottom: 4px; } [data-theme="carbon2"] .page-header h1 { font-size: var(--t-lg); letter-spacing: var(--ls-tight); font-weight: var(--w-semibold); } [data-theme="carbon2"] .page-subtitle { margin-bottom: 16px; font-size: var(--t-sm); } /* ── Cards — tighter, denser ── */ [data-theme="carbon2"] .card { padding: 12px 14px; margin-bottom: 10px !important; } [data-theme="carbon2"] .card-header { margin-bottom: 8px; padding-bottom: 7px; } [data-theme="carbon2"] .card-header h3 { font-size: var(--t-xs); letter-spacing: var(--ls-wide); font-weight: var(--w-semibold); } /* ── Two-column grid — tighter gap ── */ [data-theme="carbon2"] .two-col { gap: 12px; } /* ── Buttons — more compact ── */ [data-theme="carbon2"] .btn { padding: 5px 11px; font-size: var(--t-sm); font-weight: var(--w-medium); } [data-theme="carbon2"] .btn-sm { padding: 3px 8px; font-size: var(--t-xs); } [data-theme="carbon2"] .btn-ghost { padding: 3px 6px; } /* ── Inputs — tighter ── */ [data-theme="carbon2"] input, [data-theme="carbon2"] textarea, [data-theme="carbon2"] select { padding: 5px 8px; font-size: var(--t-sm); } [data-theme="carbon2"] textarea { min-height: 56px; } [data-theme="carbon2"] label { font-size: var(--t-xs); margin-bottom: 2px; letter-spacing: var(--ls-wide); font-weight: var(--w-medium); } [data-theme="carbon2"] .form-group { margin-bottom: 8px; } /* ── Snapshot bar — compress ── */ [data-theme="carbon2"] .snapshot-bar { padding: 8px 14px; gap: 14px; margin-bottom: 14px; } [data-theme="carbon2"] .snapshot-label { font-size: var(--t-2xs); letter-spacing: var(--ls-wide); } [data-theme="carbon2"] .snapshot-value { font-size: var(--t-base); font-weight: var(--w-medium); } [data-theme="carbon2"] .snapshot-divider { height: 26px; } /* ── Badges — tighter ── */ [data-theme="carbon2"] .badge { padding: 0px 6px; font-size: var(--t-2xs); line-height: 1.5; font-weight: var(--w-semibold); letter-spacing: 0.02em; } /* ── Tables — denser rows ── */ [data-theme="carbon2"] th, [data-theme="carbon2"] td { padding: 6px 8px; font-size: var(--t-sm); } [data-theme="carbon2"] th { font-size: var(--t-xs); font-weight: var(--w-semibold); letter-spacing: var(--ls-wide); } /* ── Modal — tighter ── */ [data-theme="carbon2"] .modal { padding: 18px 20px; } [data-theme="carbon2"] .modal-header { margin-bottom: 14px; padding-bottom: 10px; } [data-theme="carbon2"] .modal-header h2 { font-size: var(--t-md); font-weight: var(--w-semibold); letter-spacing: var(--ls-tight); } [data-theme="carbon2"] .modal-actions { margin-top: 12px; } /* ── Toast — tighter ── */ [data-theme="carbon2"] .toast { padding: 7px 11px; font-size: var(--t-sm); font-weight: var(--w-medium); } /* ── Accordion — tighter ── */ [data-theme="carbon2"] .accordion-header { padding: 7px 12px; } [data-theme="carbon2"] .accordion-item { margin-bottom: 4px; } [data-theme="carbon2"] .accordion-item.open .accordion-content { padding: 6px 12px 10px; } /* ── Composer — tighter ── */ [data-theme="carbon2"] .composer-body { padding: 5px 8px; font-size: var(--t-sm); min-height: 1.4em; } [data-theme="carbon2"] .composer-footer { padding: 3px 6px; } [data-theme="carbon2"] .composer:focus-within .composer-footer { padding: 4px 6px; max-height: 34px; } [data-theme="carbon2"] .composer-tools button { padding: 2px 5px; font-size: var(--t-xs); } /* ── Entry list — tighter ── */ [data-theme="carbon2"] .entry-item { padding: 6px 0; font-size: var(--t-sm); } [data-theme="carbon2"] .entry-edit-btn { font-size: var(--t-xs); } /* ── Editable areas — tighter ── */ [data-theme="carbon2"] .editable-area { padding: 5px 7px; font-size: var(--t-sm); min-height: 48px; } /* ── Rich text toolbar — tighter ── */ [data-theme="carbon2"] .rich-toolbar { padding: 2px 4px; } [data-theme="carbon2"] .rich-toolbar button { padding: 1px 5px; font-size: var(--t-xs); } /* ── Signal pills — compact ── */ [data-theme="carbon2"] .signal-pill { padding: 2px 8px; font-size: var(--t-xs); font-weight: var(--w-medium); } /* ── Score number — slightly smaller ── */ [data-theme="carbon2"] .score-number { font-size: var(--t-xl); font-weight: var(--w-semibold); letter-spacing: var(--ls-tight); } /* ── MEDDPICC letters — tighter ── */ [data-theme="carbon2"] .meddpicc-letter { width: 20px; height: 20px; font-size: var(--t-2xs); font-weight: var(--w-semibold); } /* ── Scrollbar — thinner ── */ [data-theme="carbon2"] ::-webkit-scrollbar { width: 4px; } /* ── Empty state — tighter ── */ [data-theme="carbon2"] .empty-state { padding: 20px 12px; } [data-theme="carbon2"] .empty-state p { font-size: var(--t-sm); } /* ── Contact / list items — tighter ── */ [data-theme="carbon2"] .contact-card { padding: 5px 0; } [data-theme="carbon2"] .contact-name { font-size: var(--t-sm); font-weight: var(--w-medium); } [data-theme="carbon2"] .contact-title-text { font-size: var(--t-xs); color: var(--color-text-muted); } /* ── Milestone rows — tighter ── */ [data-theme="carbon2"] .milestone-row { padding: 4px 0; } [data-theme="carbon2"] .milestone-title { font-size: var(--t-sm); } [data-theme="carbon2"] .milestone-date { font-size: var(--t-xs); color: var(--color-text-muted); } /* ── Compact items (action items in summary) ── */ [data-theme="carbon2"] .compact-item { padding: 5px 0; font-size: var(--t-sm); } /* ── Inline select — compact, no arrow artifact ── */ [data-theme="carbon2"] .inline-select { font-size: var(--t-sm); background-image: none !important; padding-right: 2px !important; appearance: none; -webkit-appearance: none; } /* Snapshot bar date input — match select size */ [data-theme="carbon2"] .snapshot-bar input[type="date"] { font-size: var(--t-sm) !important; font-weight: var(--w-medium) !important; } /* ── Checkbox — warm accent ── */ [data-theme="carbon2"] .checkbox { width: 14px; height: 14px; accent-color: #5a9aff; } /* ── Loading spinner — smaller, warm accent ── */ [data-theme="carbon2"] .spinner { width: 20px; height: 20px; border-top-color: #5a9aff; } /* ── Score colors — warmer tones ── */ [data-theme="carbon2"] .score-number.green { color: #34d399; } [data-theme="carbon2"] .score-number.amber { color: #fbbf24; } [data-theme="carbon2"] .score-number.red { color: #f87171; } /* ── Badges — warmer ── */ [data-theme="carbon2"] .badge-green { background: rgba(52, 211, 153, 0.08); color: #34d399; } [data-theme="carbon2"] .badge-amber { background: rgba(251, 191, 36, 0.08); color: #fbbf24; } [data-theme="carbon2"] .badge-red { background: rgba(248, 113, 113, 0.08); color: #f87171; } [data-theme="carbon2"] .badge-blue { background: rgba(90, 154, 255, 0.07); color: #5a9aff; } [data-theme="carbon2"] .badge-accent { background: rgba(90, 154, 255, 0.07); color: #5a9aff; } /* ── MEDDPICC filled — indigo ── */ [data-theme="carbon2"] .meddpicc-letter.filled { background: rgba(90, 154, 255, 0.11); color: #5a9aff; } /* ── Focus ring — warm indigo ── */ [data-theme="carbon2"] input:focus, [data-theme="carbon2"] textarea:focus, [data-theme="carbon2"] select:focus { border-color: #5a9aff; } [data-theme="carbon2"] input:focus-visible, [data-theme="carbon2"] textarea:focus-visible, [data-theme="carbon2"] select:focus-visible { box-shadow: 0 0 0 2px rgba(90, 154, 255, 0.12); } /* ── Rich content bullets — indigo ── */ [data-theme="carbon2"] .rich-content .rc-bullet::before { color: #5a9aff; } /* ── Select arrow — warm muted (only on regular selects, not inline) ── */ [data-theme="carbon2"] select:not(.inline-select) { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b8fa0' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; padding-right: 26px; } /* ── Section labels ── */ [data-theme="carbon2"] .section-label { font-size: var(--t-xs); letter-spacing: var(--ls-wide); font-weight: var(--w-semibold); } /* ── SF links — Opportunity + Account on one row ── */ [data-theme="carbon2"] .card:has(#sfOppRow) .card-header ~ .sf-link-row { display: inline-flex; width: auto; border-top: none !important; padding-top: 0 !important; padding: 4px 0; gap: 6px; } [data-theme="carbon2"] .card:has(#sfOppRow) .card-header + .sf-link-row { padding-right: 16px; } [data-theme="carbon2"] .sf-link-row .sf-label { font-size: var(--t-xs); min-width: auto; } [data-theme="carbon2"] .sf-link-row .sf-display a { font-size: var(--t-sm); } [data-theme="carbon2"] .sf-link-row .sf-display .sf-empty { font-size: var(--t-sm); } /* ── POI chips — tighter ── */ [data-theme="carbon2"] .poi-chip { padding: 6px 10px; } [data-theme="carbon2"] .poi-name { font-size: var(--t-sm); font-weight: var(--w-medium); } [data-theme="carbon2"] .poi-price { font-size: var(--t-xs); color: var(--color-text-muted); } /* ══════════════════════════════════════════════════════════════ /delight — Micro-interactions & Motion Duration targets: 100ms feedback, 200ms state, 350ms layout Easing: quart-out for entrances, ease-in-out for toggles ══════════════════════════════════════════════════════════════ */ /* ── Easing tokens ── */ html[data-theme="carbon2"] { --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); } /* ── Card — hover lift ── */ [data-theme="carbon2"] .card { transition: border-color 150ms var(--ease-out-quart), box-shadow 150ms var(--ease-out-quart); } [data-theme="carbon2"] .card:hover { border-color: var(--color-border-emphasis); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.30); } /* ── Buttons — press feedback ── */ [data-theme="carbon2"] .btn { transition: background 100ms var(--ease-out-quart), border-color 100ms var(--ease-out-quart), transform 80ms var(--ease-out-quart), box-shadow 100ms var(--ease-out-quart); } [data-theme="carbon2"] .btn:hover { box-shadow: 0 1px 3px rgba(28, 25, 23, 0.1); } [data-theme="carbon2"] .btn:active { transform: scale(0.97); box-shadow: none; } /* ── Ghost buttons — subtle hover bg ── */ [data-theme="carbon2"] .btn-ghost { transition: background 120ms var(--ease-out-quart), color 120ms var(--ease-out-quart); } [data-theme="carbon2"] .btn-ghost:hover { background: rgba(255, 255, 255, 0.06); } /* ── Inputs — smooth focus transition ── */ [data-theme="carbon2"] input, [data-theme="carbon2"] textarea, [data-theme="carbon2"] select { transition: border-color 150ms var(--ease-out-quart), box-shadow 200ms var(--ease-out-quart); } /* ── Badge — hover pop ── */ [data-theme="carbon2"] .badge { transition: transform 100ms var(--ease-out-quart), background 120ms var(--ease-out-quart); } [data-theme="carbon2"] .badge:hover { transform: scale(1.04); } /* ── Signal pills — hover glow ── */ [data-theme="carbon2"] .signal-pill { transition: background 120ms var(--ease-out-quart), transform 100ms var(--ease-out-quart); } [data-theme="carbon2"] .signal-pill:hover { transform: scale(1.03); } /* ── Accordion — smooth open/close ── */ [data-theme="carbon2"] .accordion-content { transition: max-height 300ms var(--ease-in-out), opacity 200ms var(--ease-out-quart), padding 200ms var(--ease-out-quart); } [data-theme="carbon2"] .accordion-header { transition: background 120ms var(--ease-out-quart); } [data-theme="carbon2"] .accordion-header:hover { background: rgba(255, 255, 255, 0.04); } /* ── Accordion chevron — rotate ── */ [data-theme="carbon2"] .accordion-header::after { transition: transform 250ms var(--ease-in-out); } [data-theme="carbon2"] .accordion-item.open .accordion-header::after { transform: rotate(180deg); } /* ── Entry items — hover highlight ── */ [data-theme="carbon2"] .entry-item { transition: background 100ms var(--ease-out-quart); border-radius: 2px; margin-left: -4px; margin-right: -4px; padding-left: 4px; padding-right: 4px; } [data-theme="carbon2"] .entry-item:hover { background: rgba(255, 255, 255, 0.05); } /* ── Composer — focus glow ── */ [data-theme="carbon2"] .composer { transition: border-color 150ms var(--ease-out-quart), box-shadow 200ms var(--ease-out-quart); } [data-theme="carbon2"] .composer:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 2px rgba(90, 154, 255, 0.08); } /* ── Editable area — focus glow ── */ [data-theme="carbon2"] .editable-area { transition: border-color 150ms var(--ease-out-quart), box-shadow 200ms var(--ease-out-quart); } [data-theme="carbon2"] .editable-area:focus { border-color: var(--color-accent); box-shadow: 0 0 0 2px rgba(90, 154, 255, 0.08); } /* ── Toast — slide in from top ── */ @keyframes ct2-toast-in { from { transform: translateY(-12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } [data-theme="carbon2"] .toast { animation: ct2-toast-in 250ms var(--ease-out-expo) both; } /* ── Modal overlay — fade in ── */ @keyframes ct2-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes ct2-modal-in { from { transform: translateY(8px) scale(0.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } [data-theme="carbon2"] .modal-overlay { animation: ct2-fade-in 200ms var(--ease-out-quart) both; } [data-theme="carbon2"] .modal { animation: ct2-modal-in 280ms var(--ease-out-expo) both; } /* ── MEDDPICC letters — hover feedback ── */ [data-theme="carbon2"] .meddpicc-letter { transition: transform 100ms var(--ease-out-quart), background 120ms var(--ease-out-quart), color 120ms var(--ease-out-quart); } [data-theme="carbon2"] .meddpicc-letter:hover { transform: scale(1.12); } /* ── Contact cards — hover ── */ [data-theme="carbon2"] .contact-card { transition: background 100ms var(--ease-out-quart); border-radius: 2px; margin-left: -4px; margin-right: -4px; padding-left: 4px; padding-right: 4px; } [data-theme="carbon2"] .contact-card:hover { background: rgba(255, 255, 255, 0.04); } /* ── POI chips — hover ── */ [data-theme="carbon2"] .poi-chip { transition: border-color 120ms var(--ease-out-quart), box-shadow 120ms var(--ease-out-quart); } [data-theme="carbon2"] .poi-chip:hover { border-color: var(--color-border-emphasis); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); } /* ── Milestone rows — hover ── */ [data-theme="carbon2"] .milestone-row { transition: background 100ms var(--ease-out-quart); border-radius: 2px; } [data-theme="carbon2"] .milestone-row:hover { background: rgba(255, 255, 255, 0.04); } /* ── Snapshot bar values — number transition feel ── */ [data-theme="carbon2"] .snapshot-value { transition: color 150ms var(--ease-out-quart); } /* ── Checkbox — smooth check ── */ [data-theme="carbon2"] .checkbox { transition: background 100ms var(--ease-out-quart), border-color 100ms var(--ease-out-quart); } /* ── Scrollbar — fade on idle ── */ [data-theme="carbon2"] ::-webkit-scrollbar-thumb { transition: background 200ms var(--ease-out-quart); background: rgba(0, 0, 0, 0.40); } [data-theme="carbon2"] ::-webkit-scrollbar-thumb:hover { background: rgba(28, 25, 23, 0.25); } /* ── Link hover — smooth color ── */ [data-theme="carbon2"] a { transition: color 120ms var(--ease-out-quart); } /* ── Rich toolbar buttons — hover ── */ [data-theme="carbon2"] .rich-toolbar button { transition: background 100ms var(--ease-out-quart); } [data-theme="carbon2"] .rich-toolbar button:hover { background: rgba(255, 255, 255, 0.06); } /* ══════════════════════════════════════════════════════════════ /clarify — Visual hierarchy & readability Make important things look important, secondary things recede ══════════════════════════════════════════════════════════════ */ /* ── Summary: Primary cards — left accent stripe ── */ [data-theme="carbon2"] .col-main > .card:nth-child(2), /* Action Items */ [data-theme="carbon2"] .col-main > .card:nth-child(3), /* Next Step */ [data-theme="carbon2"] .col-main > .card:nth-child(5), /* Deal Situation */ [data-theme="carbon2"] .col-main > .card:nth-child(6) { /* Notes */ border-left: 2px solid var(--color-accent); } [data-theme="carbon2"] .col-main > .card:nth-child(2) .card-header h3, [data-theme="carbon2"] .col-main > .card:nth-child(3) .card-header h3, [data-theme="carbon2"] .col-main > .card:nth-child(5) .card-header h3, [data-theme="carbon2"] .col-main > .card:nth-child(6) .card-header h3 { color: var(--color-text); } /* ── Summary: Side column cards — slightly receded ── */ [data-theme="carbon2"] .col-side > .card .card-header h3 { color: var(--color-text-muted); } /* ── Summary: Snapshot bar — emphasize Score + Stage ── */ [data-theme="carbon2"] .snapshot-item:nth-child(1) .snapshot-value, /* Score */ [data-theme="carbon2"] .snapshot-item:nth-child(7) .snapshot-value { /* Stage select */ font-weight: var(--w-semibold); color: var(--color-text); } [data-theme="carbon2"] .snapshot-item:nth-child(1) .snapshot-label, [data-theme="carbon2"] .snapshot-item:nth-child(7) .snapshot-label { color: var(--color-accent); } /* ── Dashboard: Lead KPI (Total Pipeline) — disabled ── */ /* ── Dashboard: "Active Deals" section label stronger ── */ [data-theme="carbon2"] .section-header:first-child .section-label { color: var(--color-text) !important; font-weight: 700 !important; } /* ── Dashboard: subsequent section labels receded ── */ [data-theme="carbon2"] .section-header:not(:first-child) .section-label { color: var(--color-text-muted) !important; } /* ── Dashboard: action priority stripes — disabled ── */ /* ── Today's Attention panel (action_items page) — background ── */ [data-theme="carbon2"] .reminders-panel { background: var(--color-surface) !important; border-color: var(--color-border) !important; } [data-theme="carbon2"] .reminders-header { background: var(--color-accent-subtle) !important; border-bottom-color: var(--color-border) !important; } [data-theme="carbon2"] .reminders-title { font-size: var(--t-sm) !important; } [data-theme="carbon2"] .reminders-dismiss { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .reminders-group-label { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .reminder-item { font-size: var(--t-sm) !important; } [data-theme="carbon2"] .reminder-type { font-size: var(--t-2xs) !important; } [data-theme="carbon2"] .reminder-count-badge { font-size: var(--t-2xs) !important; } /* ── Empty cards — collapse to minimal ── */ [data-theme="carbon2"] .card:has(.card-header:only-child) { padding: 8px 14px !important; } [data-theme="carbon2"] .card:has(.card-header:only-child) .card-header { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } [data-theme="carbon2"] .card:has(.card-header:only-child) .card-header h3 { color: var(--color-text-light); } /* ── Deal cards with value > 0 — accent stripe disabled ── */ /* ── Deal cards — name is the anchor, make it scan ── */ [data-theme="carbon2"] .dc-name { font-weight: var(--w-semibold) !important; } /* ── Meeting cards — recent meetings emphasized ── */ [data-theme="carbon2"] .meeting-card:first-child { border-left: 2px solid var(--color-accent); } /* ── Card header divider — subtler for tertiary cards ── */ [data-theme="carbon2"] .col-side > .card .card-header { border-bottom-color: var(--color-border-subtle); } /* ── Improved label hierarchy: "LABEL" vs "value" contrast ── */ [data-theme="carbon2"] .card-header h3 { color: var(--color-text-muted); } /* ── Primary column card headers — keep them dark ── */ [data-theme="carbon2"] .col-main > .card .card-header h3 { color: var(--color-text); } /* ── Snapshot dividers — softer ── */ [data-theme="carbon2"] .snapshot-divider { background: var(--color-border-subtle); width: 1px; } /* ── Page title — stronger anchor ── */ [data-theme="carbon2"] .page-header h1 { font-weight: 700; color: var(--color-text); } /* ── MEDDPICC: filled vs unfilled — sharper contrast ── */ [data-theme="carbon2"] .meddpicc-letter:not(.filled) { opacity: 0.35; } [data-theme="carbon2"] .meddpicc-letter.filled { opacity: 1; font-weight: 700; } /* ── Client page: Company Overview card — primary ── */ [data-theme="carbon2"] .card:has(#companyDesc) { border-left: 2px solid var(--color-accent); } /* ── Client page: Actions card — primary ── */ [data-theme="carbon2"] .card:has(.action-row) { border-left: 2px solid var(--color-accent); } /* ── Pricing: result cards — emphasized ── */ [data-theme="carbon2"] .result-card { border-bottom: 2px solid var(--color-accent) !important; } /* ── Stakeholder: contact cards — champion highlight ── */ [data-theme="carbon2"] .cc-tag.champion { font-weight: 700 !important; } /* ── Territory: active tab — accent underline ── */ [data-theme="carbon2"] .tp-subnav-btn.active { color: var(--color-accent) !important; border-bottom-color: var(--color-accent) !important; } /* ══════════════════════════════════════════════════════════════ /distill — Remove visual noise, let content breathe Strip redundant borders, soften dividers, hide idle chrome ══════════════════════════════════════════════════════════════ */ /* ── Cards: remove outer border — bg gap provides separation ── */ [data-theme="carbon2"] .card { border-color: transparent; } [data-theme="carbon2"] .card:hover { border-color: var(--color-border); } /* Cards with accent stripe keep their left border */ [data-theme="carbon2"] .col-main > .card:nth-child(2), [data-theme="carbon2"] .col-main > .card:nth-child(3), [data-theme="carbon2"] .col-main > .card:nth-child(5), [data-theme="carbon2"] .col-main > .card:nth-child(6), [data-theme="carbon2"] .card:has(.action-row), [data-theme="carbon2"] .card:has(#companyDesc) { border-left-color: var(--color-accent); } /* ── Card header divider — softer, thinner ── */ [data-theme="carbon2"] .card-header { border-bottom-color: var(--color-border-subtle); border-bottom-width: 1px; padding-bottom: 5px; margin-bottom: 6px; } /* ── Snapshot dividers — barely visible ── */ [data-theme="carbon2"] .snapshot-divider { opacity: 0.3; } /* ── Section line (dashboard) — remove, spacing is enough ── */ [data-theme="carbon2"] .section-line { display: none; } /* ── Deal card separator — remove ── */ [data-theme="carbon2"] .dc-sep { display: none; } /* ── Deal card borders — borderless, rely on bg gap ── */ [data-theme="carbon2"] .deal-card { border-color: transparent !important; } [data-theme="carbon2"] .deal-card:hover { border-color: var(--color-border) !important; } /* ── KPI card dividers — softer ── */ [data-theme="carbon2"] .kpi-card + .kpi-card { border-left-color: var(--color-border-subtle) !important; } /* ── Action add-row — hide until group is hovered ── */ [data-theme="carbon2"] .ai-add-row { opacity: 0; max-height: 0; padding: 0 16px !important; overflow: hidden; transition: opacity 200ms var(--ease-out-quart), max-height 200ms var(--ease-out-quart), padding 200ms var(--ease-out-quart); } [data-theme="carbon2"] .ai-group:hover .ai-add-row, [data-theme="carbon2"] .ai-add-row:focus-within { opacity: 1; max-height: 50px; padding: 6px 16px !important; } /* ── Dashed borders — replace with subtle solid ── */ [data-theme="carbon2"] .ai-add-row { border-top: 1px solid var(--color-border-subtle) !important; border-style: solid !important; } /* ── Composer footer — hide until focused ── */ [data-theme="carbon2"] .composer-footer { opacity: 0; max-height: 0; overflow: hidden; transition: opacity 150ms var(--ease-out-quart), max-height 150ms var(--ease-out-quart); } [data-theme="carbon2"] .composer:focus-within .composer-footer { opacity: 1; max-height: 40px; } /* ── Entry list items — remove bottom borders, use spacing ── */ [data-theme="carbon2"] .entry-item { border-bottom: none !important; } /* ── Compact items (action items in summary) — softer divider ── */ [data-theme="carbon2"] .compact-item { border-bottom-color: var(--color-border-subtle) !important; } /* ── Milestone rows — remove heavy borders ── */ [data-theme="carbon2"] .milestone-row { border-bottom: none !important; } /* ── Contact cards — remove heavy borders ── */ [data-theme="carbon2"] .contact-card { border-bottom: none !important; } /* ── Meeting card sections — softer internal dividers ── */ [data-theme="carbon2"] .mc-section + .mc-section { border-top-color: var(--color-border-subtle) !important; } /* ── Todo items — softer dividers ── */ [data-theme="carbon2"] .todo-item { border-bottom-color: var(--color-border-subtle) !important; } /* ── SF link row border — remove (side-by-side is enough) ── */ [data-theme="carbon2"] .sf-link-row { border-top: none !important; } /* ── Upcoming bar — softer, less boxy ── */ [data-theme="carbon2"] .upcoming-bar { border-color: transparent !important; background: var(--color-surface) !important; } /* ── Actions section — softer container ── */ [data-theme="carbon2"] .actions-section { border-color: transparent !important; } [data-theme="carbon2"] .actions-section:hover { border-color: var(--color-border) !important; } /* ── Rich toolbar — hide until composer focused (already done, reinforce) ── */ [data-theme="carbon2"] .rich-toolbar { border-bottom: none !important; } /* ══════════════════════════════════════════════════════════════ /normalize — Consistency across all pages Ensure padding, borders, shadows, hover patterns match everywhere ══════════════════════════════════════════════════════════════ */ /* ── All card-like containers — unified padding ── */ [data-theme="carbon2"] .meeting-card, [data-theme="carbon2"] .product-card, [data-theme="carbon2"] .summary-card, [data-theme="carbon2"] .result-card, [data-theme="carbon2"] .q-card, [data-theme="carbon2"] .mc-section-box, [data-theme="carbon2"] .concern-box, [data-theme="carbon2"] .prep-row, [data-theme="carbon2"] .vault-group { padding: 10px 14px !important; } /* ── Deal cards — match card density ── */ [data-theme="carbon2"] .deal-card { transition: border-color 150ms var(--ease-out-quart), box-shadow 150ms var(--ease-out-quart); } [data-theme="carbon2"] .deal-card:hover { border-color: var(--color-border-emphasis) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.30); } /* ── Meeting cards — match card hover pattern ── */ [data-theme="carbon2"] .meeting-card { transition: border-color 150ms var(--ease-out-quart), box-shadow 150ms var(--ease-out-quart); } [data-theme="carbon2"] .meeting-card:hover { border-color: var(--color-border-emphasis) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.30) !important; } [data-theme="carbon2"] .meeting-card.expanded { border-color: var(--color-accent) !important; } /* ── Product cards (pricing) — match card hover ── */ [data-theme="carbon2"] .product-card { transition: border-color 150ms var(--ease-out-quart), box-shadow 150ms var(--ease-out-quart); box-shadow: var(--shadow-sm) !important; } [data-theme="carbon2"] .product-card:hover { border-color: var(--color-border-emphasis) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.30) !important; } [data-theme="carbon2"] .product-card.selected { border-color: var(--color-accent) !important; } /* ── Summary/result cards (pricing) — shadow normalize ── */ [data-theme="carbon2"] .summary-card, [data-theme="carbon2"] .result-card { box-shadow: var(--shadow-sm) !important; } /* ── Q-cards (territory) — match card density ── */ [data-theme="carbon2"] .q-card { padding: 12px 14px !important; transition: border-color 150ms var(--ease-out-quart), box-shadow 150ms var(--ease-out-quart); } [data-theme="carbon2"] .q-card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.30); } /* ── SWOT cards (territory) — use theme color vars ── */ [data-theme="carbon2"] .swot-card { padding: 10px 14px !important; } [data-theme="carbon2"] .swot-card.strengths { background: var(--color-green-subtle) !important; border-color: rgba(52, 211, 153, 0.15) !important; } [data-theme="carbon2"] .swot-card.weaknesses { background: var(--color-red-subtle) !important; border-color: rgba(248, 113, 113, 0.15) !important; } [data-theme="carbon2"] .swot-card.opportunities { background: var(--color-accent-subtle) !important; border-color: rgba(90, 154, 255, 0.15) !important; } [data-theme="carbon2"] .swot-card.threats { background: var(--color-amber-subtle) !important; border-color: rgba(251, 191, 36, 0.15) !important; } /* ── Concern box (meetings) — use theme vars ── */ [data-theme="carbon2"] .concern-box { background: var(--color-red-subtle) !important; border-color: rgba(248, 113, 113, 0.15) !important; } /* ── Form rows — unified gap across all templates ── */ [data-theme="carbon2"] .form-row { gap: 10px !important; margin-bottom: 8px !important; } /* ── Form groups — unified spacing ── */ [data-theme="carbon2"] .form-group { margin-bottom: 8px !important; } [data-theme="carbon2"] .form-group label { font-size: var(--t-xs) !important; font-weight: var(--w-medium) !important; letter-spacing: var(--ls-wide) !important; margin-bottom: 2px !important; } /* ── All modals — unified sizing ── */ [data-theme="carbon2"] .modal, [data-theme="carbon2"] .ai-modal, [data-theme="carbon2"] .action-modal, [data-theme="carbon2"] .sf-modal, [data-theme="carbon2"] .confirm-box { padding: 16px 18px !important; } /* ── All modal headers — unified ── */ [data-theme="carbon2"] .modal-header h2, [data-theme="carbon2"] .ai-modal h3, [data-theme="carbon2"] .action-modal h3, [data-theme="carbon2"] .sf-modal h3 { font-size: var(--t-md) !important; font-weight: var(--w-semibold) !important; letter-spacing: var(--ls-tight) !important; } /* ── All confirm dialogs — unified ── */ [data-theme="carbon2"] .confirm-title { font-size: var(--t-base) !important; font-weight: var(--w-semibold) !important; } [data-theme="carbon2"] .confirm-msg { font-size: var(--t-sm) !important; } /* ── All "Add" rows — unified density ── */ [data-theme="carbon2"] .ai-add-row, [data-theme="carbon2"] .attendee-add-row, [data-theme="carbon2"] .subtask-input-row, [data-theme="carbon2"] .add-milestone { gap: 6px !important; } /* ── Chips — unified across territory/stakeholder ── */ [data-theme="carbon2"] .chip { padding: 4px 10px !important; font-size: var(--t-xs) !important; transition: all 120ms var(--ease-out-quart) !important; } [data-theme="carbon2"] .chip:hover { border-color: var(--color-border-emphasis); } [data-theme="carbon2"] .chip.selected { background: var(--color-accent) !important; border-color: var(--color-accent) !important; color: #fff !important; } /* ── Pill badges — unified (attendee, type-count, section-count) ── */ [data-theme="carbon2"] .mc-attendee, [data-theme="carbon2"] .attendee-pill, [data-theme="carbon2"] .type-count, [data-theme="carbon2"] .section-count, [data-theme="carbon2"] .actions-section-count { font-size: var(--t-2xs) !important; padding: 1px 7px !important; font-weight: var(--w-semibold) !important; } /* ── All "Edit/Del" ghost buttons — unified ── */ [data-theme="carbon2"] .ai-btn, [data-theme="carbon2"] .action-edit-btn, [data-theme="carbon2"] .action-del, [data-theme="carbon2"] .mc-header-actions button, [data-theme="carbon2"] .mc-section-actions button, [data-theme="carbon2"] .todo-actions button, [data-theme="carbon2"] .concern-actions button, [data-theme="carbon2"] .cc-actions button, [data-theme="carbon2"] .org-node-actions button, [data-theme="carbon2"] .milestone-actions button { font-size: var(--t-xs) !important; font-weight: var(--w-semibold) !important; padding: 2px 5px !important; border-radius: var(--radius-sm) !important; transition: all 120ms var(--ease-out-quart) !important; } /* ── All hover:reveal action buttons — unified ── */ [data-theme="carbon2"] .ai-sub-del, [data-theme="carbon2"] .action-sub-del { font-size: var(--t-2xs) !important; transition: all 120ms var(--ease-out-quart) !important; } /* ── Tabs — unified (stakeholder view-tab, territory tp-subnav-btn) ── */ [data-theme="carbon2"] .view-tab, [data-theme="carbon2"] .tp-subnav-btn { font-size: var(--t-sm) !important; font-weight: var(--w-medium) !important; padding: 6px 14px !important; transition: all 150ms var(--ease-out-quart) !important; } [data-theme="carbon2"] .view-tab.active, [data-theme="carbon2"] .tp-subnav-btn.active { font-weight: var(--w-semibold) !important; } /* ── All type badges — unified ── */ [data-theme="carbon2"] .stage-badge, [data-theme="carbon2"] .forecast-badge, [data-theme="carbon2"] .mc-type-badge, [data-theme="carbon2"] .mc-ai-badge, [data-theme="carbon2"] .tier-badge, [data-theme="carbon2"] .tp-status-badge, [data-theme="carbon2"] .cc-tag, [data-theme="carbon2"] .org-node-tag, [data-theme="carbon2"] .pc-model-badge, [data-theme="carbon2"] .pc-cat-badge, [data-theme="carbon2"] .q-status { font-size: var(--t-2xs) !important; font-weight: var(--w-semibold) !important; padding: 1px 6px !important; } /* ── Contact name/title pattern — unified across summary/client/stakeholder ── */ [data-theme="carbon2"] .contact-name, [data-theme="carbon2"] .contact-info .name, [data-theme="carbon2"] .cc-name { font-size: var(--t-sm) !important; font-weight: var(--w-medium) !important; } [data-theme="carbon2"] .contact-title-text, [data-theme="carbon2"] .contact-info .title-text, [data-theme="carbon2"] .cc-title { font-size: var(--t-xs) !important; color: var(--color-text-muted) !important; } /* ── All copy buttons — unified ── */ [data-theme="carbon2"] .copy-btn { font-size: var(--t-xs) !important; padding: 2px 7px !important; transition: all 120ms var(--ease-out-quart) !important; } /* ── All textareas in modals — unified ── */ [data-theme="carbon2"] .modal textarea, [data-theme="carbon2"] .ai-modal textarea, [data-theme="carbon2"] .action-modal textarea { font-size: var(--t-sm) !important; padding: 6px 8px !important; } /* ── Vault page — bring into line ── */ [data-theme="carbon2"] .vault-header-row { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .vault-upload-row { gap: 6px !important; } /* ══════════════════════════════════════════════════════════════ /critique fixes — Template-specific class overrides Maps all inline-style font sizes to the 7-step type scale ══════════════════════════════════════════════════════════════ */ /* ── #1 CRITICAL: Dashboard template classes ── */ /* KPI cards */ [data-theme="carbon2"] .kpi-label { font-size: var(--t-2xs) !important; letter-spacing: var(--ls-wide); } [data-theme="carbon2"] .kpi-value { font-size: var(--t-xl) !important; font-variant-numeric: tabular-nums; letter-spacing: var(--ls-tight); } [data-theme="carbon2"] .kpi-card { padding: 10px 14px !important; } [data-theme="carbon2"] .kpi-row { gap: 10px !important; margin-bottom: 12px !important; } /* Deal cards */ [data-theme="carbon2"] .deal-card { padding: 10px 12px !important; } [data-theme="carbon2"] .dc-name { font-size: var(--t-sm) !important; font-weight: var(--w-medium); } [data-theme="carbon2"] .dc-value { font-size: var(--t-sm) !important; font-weight: var(--w-semibold); font-variant-numeric: tabular-nums; } [data-theme="carbon2"] .dc-meta-item { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .dc-score-chip { font-size: var(--t-xs) !important; font-variant-numeric: tabular-nums; } [data-theme="carbon2"] .dc-actions-chip { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .dc-product-pill { font-size: var(--t-2xs) !important; } [data-theme="carbon2"] .dc-next-step { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .dc-footer { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .stage-badge { font-size: var(--t-2xs) !important; font-weight: var(--w-semibold); } [data-theme="carbon2"] .forecast-badge { font-size: var(--t-2xs) !important; } [data-theme="carbon2"] .deals-grid { gap: 8px !important; } /* Section headers */ [data-theme="carbon2"] .section-count { font-size: var(--t-2xs) !important; } [data-theme="carbon2"] .section-toggle-arrow { font-size: var(--t-xs) !important; } /* Upcoming bar */ [data-theme="carbon2"] .upcoming-bar { padding: 6px 14px !important; margin-bottom: 12px !important; } [data-theme="carbon2"] .upcoming-label { font-size: var(--t-2xs) !important; } [data-theme="carbon2"] .uc-day { font-size: var(--t-base) !important; } [data-theme="carbon2"] .uc-mon { font-size: var(--t-2xs) !important; } [data-theme="carbon2"] .uc-name { font-size: var(--t-sm) !important; } [data-theme="carbon2"] .uc-countdown { font-size: var(--t-xs) !important; } /* Action items (dashboard) */ [data-theme="carbon2"] .ai-title { font-size: var(--t-sm) !important; font-weight: var(--w-medium); } [data-theme="carbon2"] .ai-desc { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .ai-priority { font-size: var(--t-2xs) !important; font-weight: 700; } [data-theme="carbon2"] .ai-due { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .ai-btn { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .ai-empty { font-size: var(--t-sm) !important; } [data-theme="carbon2"] .ai-subtasks { padding-left: 28px !important; margin-top: 4px !important; } [data-theme="carbon2"] .ai-sub-title { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .ai-sub-del { font-size: var(--t-2xs) !important; } [data-theme="carbon2"] .ai-add-row input, [data-theme="carbon2"] .ai-add-row select { font-size: var(--t-sm) !important; } [data-theme="carbon2"] .ai-modal h3 { font-size: var(--t-md) !important; font-weight: var(--w-semibold); } [data-theme="carbon2"] .ai-group-label { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .actions-section-title { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .actions-section-count { font-size: var(--t-2xs) !important; } [data-theme="carbon2"] .actions-chevron { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .empty-dashboard h3 { font-size: var(--t-md) !important; } [data-theme="carbon2"] .empty-dashboard p { font-size: var(--t-sm) !important; } /* ── #1 CRITICAL: Summary template classes ── */ [data-theme="carbon2"] .next-step-field { font-size: var(--t-base) !important; } [data-theme="carbon2"] .milestone-title { font-size: var(--t-sm) !important; } [data-theme="carbon2"] .milestone-date { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .milestone-actions button { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .add-milestone input { font-size: var(--t-sm) !important; } [data-theme="carbon2"] .compact-item { font-size: var(--t-sm) !important; } [data-theme="carbon2"] .ai-edit-row input[type="text"] { font-size: var(--t-sm) !important; } [data-theme="carbon2"] .ai-edit-row input[type="date"], [data-theme="carbon2"] .ai-edit-row select { font-size: var(--t-sm) !important; } [data-theme="carbon2"] .editable-area { font-size: var(--t-sm) !important; } [data-theme="carbon2"] .sf-label { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .sf-display a { font-size: var(--t-sm) !important; } [data-theme="carbon2"] .sf-display .sf-empty { font-size: var(--t-sm) !important; } [data-theme="carbon2"] .sf-input-row input { font-size: var(--t-sm) !important; } [data-theme="carbon2"] .poi-name { font-size: var(--t-sm) !important; font-weight: var(--w-semibold); } [data-theme="carbon2"] .poi-price { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .poi-check { font-size: var(--t-2xs) !important; } /* ── #1 CRITICAL: Client template classes ── */ [data-theme="carbon2"] .contact-info .name { font-size: var(--t-sm) !important; font-weight: var(--w-medium); } [data-theme="carbon2"] .contact-info .title-text { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .action-title { font-size: var(--t-sm) !important; font-weight: var(--w-medium); } [data-theme="carbon2"] .action-priority { font-size: var(--t-2xs) !important; font-weight: 700; } [data-theme="carbon2"] .action-due { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .action-del, [data-theme="carbon2"] .action-edit-btn { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .action-subtasks { padding-left: 28px !important; margin-top: 4px !important; } [data-theme="carbon2"] .action-sub-title { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .action-sub-del { font-size: var(--t-2xs) !important; } [data-theme="carbon2"] .action-modal h3 { font-size: var(--t-md) !important; font-weight: var(--w-semibold); } [data-theme="carbon2"] .subtask-input-row input { font-size: var(--t-sm) !important; } [data-theme="carbon2"] .subtask-list-item { font-size: var(--t-sm) !important; } [data-theme="carbon2"] .subtask-list-item button { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .confirm-title { font-size: var(--t-base) !important; } [data-theme="carbon2"] .confirm-msg { font-size: var(--t-sm) !important; } /* ── #1 CRITICAL: Meetings template classes ── */ [data-theme="carbon2"] .mc-date { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .mc-date .mc-day { font-size: var(--t-md) !important; } [data-theme="carbon2"] .mc-date .mc-month { font-size: var(--t-2xs) !important; } [data-theme="carbon2"] .mc-title { font-size: var(--t-sm) !important; font-weight: var(--w-semibold); } [data-theme="carbon2"] .mc-sub { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .mc-type-badge { font-size: var(--t-2xs) !important; } [data-theme="carbon2"] .mc-ai-badge { font-size: var(--t-2xs) !important; } [data-theme="carbon2"] .mc-header-actions button { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .mc-section-label { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .mc-section-content { font-size: var(--t-sm) !important; } [data-theme="carbon2"] .mc-section-actions button { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .mc-attendee { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .concern-box-label { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .concern-actions button { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .todo-item { font-size: var(--t-sm) !important; } [data-theme="carbon2"] .todo-actions button { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .copy-btn { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .composer-body { font-size: var(--t-sm) !important; } [data-theme="carbon2"] .composer-tools button { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .ai-transcript-area { font-size: var(--t-sm) !important; } [data-theme="carbon2"] .attendee-pill { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .attendee-add-row select, [data-theme="carbon2"] .attendee-add-row input { font-size: var(--t-sm) !important; } /* ── #1 CRITICAL: Stakeholder template classes ── */ [data-theme="carbon2"] .view-tab { font-size: var(--t-sm) !important; } [data-theme="carbon2"] .type-label { font-size: var(--t-sm) !important; } [data-theme="carbon2"] .type-count { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .cc-avatar { font-size: var(--t-sm) !important; } [data-theme="carbon2"] .cc-name { font-size: var(--t-sm) !important; font-weight: var(--w-semibold); } [data-theme="carbon2"] .cc-title { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .cc-actions button { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .cc-tag { font-size: var(--t-2xs) !important; } [data-theme="carbon2"] .cc-tag.dept { font-size: var(--t-2xs) !important; } [data-theme="carbon2"] .cc-detail-list li { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .cc-detail-list li .dl-label { font-size: var(--t-2xs) !important; } [data-theme="carbon2"] .cc-notes { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .org-avatar { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .org-node-name { font-size: var(--t-sm) !important; } [data-theme="carbon2"] .org-node-title { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .org-node-tag { font-size: var(--t-2xs) !important; } [data-theme="carbon2"] .org-node-actions button { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .org-unassigned-label { font-size: var(--t-xs) !important; } /* ── #1 CRITICAL: Territory template classes ── */ [data-theme="carbon2"] .tp-subnav-btn { font-size: var(--t-sm) !important; } [data-theme="carbon2"] .tp-year-select { font-size: var(--t-base) !important; } [data-theme="carbon2"] .tp-status-badge { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .tp-updated { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .quota-seg { font-size: var(--t-2xs) !important; } [data-theme="carbon2"] .quota-marker { font-size: var(--t-2xs) !important; } [data-theme="carbon2"] .q-label { font-size: var(--t-base) !important; } [data-theme="carbon2"] .q-status { font-size: var(--t-2xs) !important; } [data-theme="carbon2"] .q-row { font-size: var(--t-sm) !important; } [data-theme="carbon2"] .top-accounts-table th { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .top-accounts-table td { font-size: var(--t-sm) !important; font-variant-numeric: tabular-nums; } [data-theme="carbon2"] .tier-badge { font-size: var(--t-2xs) !important; } [data-theme="carbon2"] .stars { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .swot-label { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .chip { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .tailwind-item { font-size: var(--t-sm) !important; } /* ── #1 CRITICAL: Pricing template classes ── */ [data-theme="carbon2"] .summary-card .s-label { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .summary-card .s-value { font-size: var(--t-lg) !important; font-variant-numeric: tabular-nums; } [data-theme="carbon2"] .family-label { font-size: var(--t-sm) !important; } [data-theme="carbon2"] .family-count { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .family-subtotal { font-size: var(--t-xs) !important; font-variant-numeric: tabular-nums; } [data-theme="carbon2"] .pc-name { font-size: var(--t-sm) !important; font-weight: var(--w-semibold); } [data-theme="carbon2"] .pc-model-badge, [data-theme="carbon2"] .pc-cat-badge { font-size: var(--t-2xs) !important; } [data-theme="carbon2"] .pc-inputs label { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .pc-input { font-size: var(--t-sm) !important; font-variant-numeric: tabular-nums; } [data-theme="carbon2"] .pc-arr { font-size: var(--t-sm) !important; font-variant-numeric: tabular-nums; } [data-theme="carbon2"] .pc-desc { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .result-card .r-label { font-size: var(--t-2xs) !important; } [data-theme="carbon2"] .result-card .r-value { font-size: var(--t-lg) !important; font-variant-numeric: tabular-nums; } [data-theme="carbon2"] .export-section-title { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .export-check { font-size: var(--t-sm) !important; } [data-theme="carbon2"] .export-preset { font-size: var(--t-sm) !important; } [data-theme="carbon2"] .export-preset-label { font-size: var(--t-xs) !important; } /* ── #1 CRITICAL: Call Prep template classes ── */ [data-theme="carbon2"] .prep-date { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .prep-title { font-size: var(--t-sm) !important; font-weight: var(--w-semibold); } [data-theme="carbon2"] .prep-customer { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .prep-header h1 { font-size: var(--t-md) !important; } [data-theme="carbon2"] .prep-meta { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .ctx-label { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .ctx-value { font-size: var(--t-sm) !important; } [data-theme="carbon2"] .ctx-contact-title { font-size: var(--t-xs) !important; } /* ── #1 CRITICAL: Follow-up email classes ── */ [data-theme="carbon2"] .fu-email-body { font-size: var(--t-sm) !important; } [data-theme="carbon2"] .fu-email-subject { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .fu-email-subject-val { font-size: var(--t-sm) !important; } /* ── #5 MEDIUM: Snapshot bar selects even smaller ── */ [data-theme="carbon2"] .inline-select { font-size: var(--t-xs) !important; } [data-theme="carbon2"] .snapshot-bar input[type="date"] { font-size: var(--t-xs) !important; font-weight: var(--w-medium) !important; } /* ── #9 LOW: Placeholder contrast fix ── */ [data-theme="carbon2"] ::placeholder { color: #5c6070; opacity: 1; } /* ── #10 LOW: Modal h2 from template overrides ── */ [data-theme="carbon2"] .modal-header h2 { font-size: var(--t-md) !important; font-weight: var(--w-semibold) !important; } /* ── #13 LOW: Tabular-nums for template-defined number classes ── */ [data-theme="carbon2"] .dc-value, [data-theme="carbon2"] .kpi-value, [data-theme="carbon2"] .summary-card .s-value, [data-theme="carbon2"] .result-card .r-value, [data-theme="carbon2"] .pc-arr, [data-theme="carbon2"] .pc-input, [data-theme="carbon2"] .family-subtotal, [data-theme="carbon2"] .prep-date, [data-theme="carbon2"] .q-row, [data-theme="carbon2"] .top-accounts-table td { font-variant-numeric: tabular-nums; } /* ══════════════════════════════════════════════════════════════ Reduced motion — respect user preference Keep functional animations, remove spatial motion ══════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { [data-theme="carbon2"] *, [data-theme="carbon2"] *::before, [data-theme="carbon2"] *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } /* Keep spinner functional */ [data-theme="carbon2"] .spinner { animation-duration: 1s !important; } }