/* A5 CRM — base.css
Tokens (light = :root, dark = :root[data-theme="dark"], DESIGN-STRIPE.md §2), legacy aliases (§2.4), global rules and
the theme switch (§3), the shell: sidebar + top bar + page header (§4), icons, text helpers, links and buttons (§5.1–5.2).
Visual language = Stripe Dashboard layout with Attio's calm colour treatment (DESIGN-CALM.md overrides DESIGN-STRIPE.md
for colours, focus and selection). The ONLY colour literals of the app live in the two token blocks below. */
/* ═══ A5 CRM tokens: Attio colour treatment (DESIGN-CALM.md §2). Light = :root, dark = [data-theme="dark"] ═══ */
:root{
color-scheme: light;
/* ── fonts & type ── */
--font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* D + Inter E + ✦ fallback E */
--font-mono: "Source Code Pro", ui-monospace, Menlo, Consolas, monospace; /* D */
--t-caption: 400 12px/16px var(--font-sans); /* D caption 12/16 */
--t-caption-strong: 600 12px/16px var(--font-sans); /* S table header, badges, pills */
--t-small: 400 12px/16px var(--font-sans); /* S hint popover / tooltip text */
--t-body: 400 14px/20px var(--font-sans); /* D body */
--t-body-medium: 500 14px/20px var(--font-sans); /* S member names */
--t-body-strong: 600 14px/20px var(--font-sans); /* D label/button/tab */
--t-lead: 400 16px/24px var(--font-sans); /* S detail subtitle */
--t-heading-s: 600 16px/24px var(--font-sans); /* S modal/card/widget title */
--t-heading: 700 20px/28px var(--font-sans); /* S section heading, empty-state title */
--t-metric-s: 400 20px/28px var(--font-sans); /* S Home "Today" value */
--t-metric: 400 24px/32px var(--font-sans); /* S KPI row value */
--t-title: 700 28px/36px var(--font-sans); /* S+D page H1 */
--t-display: 700 32px/40px var(--font-sans); /* S reports card value */
--t-mono: 400 12px/16px var(--font-mono); /* S IDs */
--t-mono-body: 400 14px/20px var(--font-mono); /* S code / workbench rows */
/* ── surfaces ── */
--bg: #FFFFFF; /* S page, table, record page */
--surface: #FFFFFF; /* S */
--surface-raised: #FFFFFF; /* S popovers, menus, modals */
--surface-offset: #F7F7F8; /* D lanes, top-bar search: neutral twin of Stripe #F7F8FA, between Attio #FAFAFA band and #F3F4F6 fill */
--surface-offset-hover: #EEEFF1; /* S */
--surface-hover: #F4F5F7; /* S menu / option row hover */
--surface-hover-raised: #F4F5F7; /* S */
--surface-pressed: #EEEFF1; /* S sidebar selected item; selected segment */
--surface-card: #FFFFFF; /* S kanban card */
--surface-disabled: #F7F7F8; /* D */
--surface-sunken: #FAFAFA; /* S modal footer band */
--row-selected: #EEEFF1; /* S the nav selected grey, one step above hover */
--row-selected-hover: #E9EAEC; /* D one step above; carries only --text-strong…--text-3 and icons (§2.4) */
--surface-inverse: #232428; /* S tooltip (the one dark surface in light Attio) */
--on-inverse: #FFFFFF;
--on-inverse-2: #AEAFB4; /* D 7.08 on #232428 */
--surface-sidebar: var(--bg); /* left nav = the page background (owner, 2026-10-20; was #FBFBFB) */
/* ── borders ── */
--border: #E6E6E8; /* S secondary-button keyline, dashed ghost, table rules */
--border-soft: #EEEEEE; /* S dividers, row lines, sidebar edge */
--border-strong: #D7D8DB; /* D one step darker: hover keylines */
--control-border:#DCDDE0; /* D inputs, checkboxes, radios, off switch: a hair darker than Attio #EBEBEB/#E4E4E6 so 1x screens see it (1.36:1, accepted light deviation, as Stripe's 1.39) */
--control-border-hover:#C9CACE; /* D */
/* ── text ── */
--text-strong: #1C1D1F; /* S names, selected items, titles */
--text-title: #1C1D1F; /* S */
--text: #2E2F33; /* D body: one step under text-1 (Attio uses text-1 for both) */
--text-2: #5C5E63; /* S labels, descriptions, inactive segment */
--text-3: #65676C; /* D Attio #6E7075, darkened 9 levels to hold 4.5:1 on --row-selected (4.92) */
--text-4: #8A8B8F; /* S placeholder (#898A8D), placeholders only, 3.40 */
--text-disabled: #A9AAAE; /* D */
--icon: #6E7075; /* S */
--icon-strong: #5C5E63; /* S */
/* ── accent (Attio blue) ── */
--accent: #3B6BE9; /* S primary fill, flat chart bar */
--accent-hover: #2F5DD8; /* D one step darker */
--accent-active: #2A54C4; /* D */
--accent-ring: #3459C6; /* S the darker 1 px edge of the primary button */
--accent-ring-hover:#2A4FB5; /* D */
--on-accent: #FFFFFF;
--accent-text: #3462DB; /* D Attio #3B6BE9 one step darker: 4.66 on --row-selected, 4.70 on --accent-bg */
--accent-bg: #EBF0FD; /* S selected rows / choice card / drop target tint */
--accent-bg-2: #E8EEFF; /* S soft-accent chip («3/6», «14 days left») */
--accent-soft-text:#24306A; /* S NEW: navy text on --accent-bg-2 */
--link: var(--accent-text);
--link-hover: #1C1D1F;
--check-list: #3B6BE9; /* = --accent: one checkbox hue */
/* ── status (text-grade: ≥ 4.5:1 on every fill they sit on, §2.4) ── */
--success: #2D7A4B; /* D Attio green #57BF81 darkened for text */
--warning: #9C5A12; /* D Attio amber due-date text */
--danger: #C23A3F; /* D Attio coral #E05A5E darkened for text */
--info: #3462DB; /* = --accent-text: unread dots and icons */
--danger-solid: #CC3F3C; /* D Attio coral #EC6762 darkened: white 14/600 text needs 4.5 (4.83; #EC6762 is 3.14) */
--danger-solid-hover: #B83634; /* D */
--danger-ring: #B83634; /* D */
--on-danger: #FFFFFF;
--danger-line: rgba(204,63,60,.32);
/* ── banners (tag ramps, one step lighter) ── */
--banner-critical-bg:#FDF3F3; --banner-critical-border:#F2D9DB; /* D red tag */
--banner-caution-bg: #FEF8E6; --banner-caution-border: #F3E5BC; /* D yellow tag */
--banner-success-bg: #F0FAF2; --banner-success-border: #CDE8D2; /* D green tag */
/* ── badges = Attio pastel tags: bg / border / text ── */
--badge-neutral-bg:#F3F4F6; --badge-neutral-border:#E6E7EA; --badge-neutral-text:#4E4F55; /* S grey tag */
--badge-success-bg:#E0F8E3; --badge-success-border:#CDE8D2; --badge-success-text:#233F2B; /* S green */
--badge-warning-bg:#FDF1E3; --badge-warning-border:#F0DFCC; --badge-warning-text:#52361E; /* S orange */
--badge-danger-bg: #FDEBEB; --badge-danger-border: #F2D9DB; --badge-danger-text: #5E262E; /* S red */
--badge-info-bg: #E7EEFF; --badge-info-border: #D5DDF2; --badge-info-text: #1C2C5E; /* S blue */
--badge-purple-bg: #F4EDFE; --badge-purple-border: #E1D8F6; --badge-purple-text: #351992; /* S violet */
--badge-urgent-bg: #FDEBEB; --badge-urgent-text: #5E262E; /* D no solid badge any more: = red tag (§3.7) */
/* ── status dots (decorative: always next to a text label) ── */
--dot-neutral:#D2D3D7; --dot-red:#E86664; --dot-orange:#D27A2C; --dot-yellow:#E9D446; /* S */
--dot-green:#57BF81; --dot-sky:#5AB8E5; --dot-purple:#8C63ED; --dot-pink:#E45F85; /* S */
/* ── CRM-specific roles ── */
--note-bg:#FEFAEC; --note-border:#EEDDB8; --note-label:#7A5B12; /* D yellow tag family; label 6.03 */
--flash-bg:#FEF3CF; /* S yellow tag */
--ai-bg:#FAF9FE; --ai-border:#E9E5F7; --ai-text:#6E5BC6; /* S AI-column tint; D border; D muted violet 4.59 on --row-selected */
--wa:#2A8A52; /* E calmer WhatsApp green: 4.32 on white, 3.76 on the pressed grey */
--receipt:var(--text-3); --receipt-read:#3462DB;
--bubble-in-bg:var(--surface); --bubble-in-border:var(--border-soft);
--bubble-out-bg:#F4F5F7; --bubble-out-border:transparent; /* S muted fill */
--kbd-bg:#F3F4F6; --kbd-text:#5C5E63; /* S */
--kbd-on-accent-ring:rgba(255,255,255,.45); /* K */
--brand-logo:#D62213; /* K A5 logo */
/* ── component tokens ── */
--btn-bg:#FFFFFF; --btn-bg-hover:#F7F7F8; --btn-text:#1C1D1F; /* S white secondary; D hover */
--switch-thumb:#FFFFFF;
--step-done:#9EA3AC; /* E neutral: passed steps grey, only the current one in accent (owner: calmer) */
--step-current:#3B6BE9; /* S */
--step-future:#E6E6E8; /* = --border */
--split-divider:rgba(255,255,255,.30);
--fade-shadow:rgba(0,0,0,.05);
--toast-icon:#57BF81; /* S green, 6.77 on the toast */
--toast-divider:rgba(255,255,255,.10);
--toast-kbd-bg:rgba(255,255,255,.12);
--toast-shadow:0 0 0 1px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.10); /* S */
--shadow-prompt:0 0 0 1px var(--border), 0 4px 16px rgba(0,0,0,.08);
--tab-ink:#6F7072; /* S NEW: 2 px active-tab underline (4.96 on white) */
--meter:#7C7E83; /* D NEW: neutral progress fill, 3.50 on a #EEEEEE track */
/* ── avatars = tag pairs ── */
--av-1-bg:#F4EDFE; --av-1-text:#351992;
--av-2-bg:#E7EEFF; --av-2-text:#1C2C5E;
--av-3-bg:#E0F8E3; --av-3-text:#233F2B;
--av-4-bg:#FDF1E3; --av-4-text:#52361E;
--av-5-bg:#FCE4F3; --av-5-text:#41123C;
--av-6-bg:#F3F4F6; --av-6-text:#4E4F55;
/* ── charts ── */
--chart-accent: #3B6BE9; /* S line */
--chart-accent-bar:#2A4FB5; /* D the highlighted period's bars */
--chart-prev: #D7D8DB;
--chart-1: #6A8DEC; /* D bulk bars: Attio blue softened to ~75%, keeps 3.17:1 on white (was violet #9966FF) */
--chart-2: #5AB8E5; /* S sky */
--chart-3: #57BF81; /* S green */
--chart-4: #E99453; /* S orange */
--chart-5: #E45F85; /* S pink */
--chart-neutral: #A9AAAE;
--chart-grid: #EEEEEE; /* S */
--chart-axis: #D7D8DB;
--chart-label: #65676C;
--chart-plan: #65676C;
/* ── focus, scrim, selection, scrollbars ── */
--focus-color: #3B6BE9; /* S 1 px accent keyline */
--focus-ring: 0 0 0 1px var(--focus-color); /* S no halo */
--focus-outline: 1px solid var(--focus-color); /* NEW: rows and filled controls */
--scrim: rgba(0,0,0,.26); /* S white → #BDBDBD */
--selection-bg: #BAD3F6; /* S */
--scrollbar: #D7D8DB;
--select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%235C5E63' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 4.5 6 2l2.5 2.5M3.5 7.5 6 10l2.5-2.5'/%3E%3C/svg%3E");
/* ── shadows (tiny, neutral; inset hairline first so a stacked focus ring is never hidden) ── */
--shadow-control: 0 1px 2px rgba(0,0,0,.05); /* S */
--shadow-1: inset 0 0 0 1px #EEEEEE, 0 1px 2px rgba(0,0,0,.04); /* S kanban card */
--shadow-hover: inset 0 0 0 1px #E6E6E8, 0 2px 6px rgba(0,0,0,.06); /* D */
--shadow-2: 0 0 0 1px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.08); /* S popover */
--shadow-3: 0 0 0 1px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.08), 0 16px 40px rgba(0,0,0,.06); /* S menu / modal */
--shadow-brand: 0 1px 2px rgba(0,0,0,.05);
--shadow-danger: 0 1px 2px rgba(0,0,0,.05);
/* ── radius ── */
--radius-xs: 4px;
--radius-s: 6px;
--radius-m: 8px;
--radius-l: 10px;
--radius-bubble: 10px;
--radius-pill: 999px;
/* ── spacing (D Stripe Apps scale) ── */
--sp-0-5:2px; --sp-1:4px; --sp-1-5:6px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
--sp-6:24px; --sp-7:28px; --sp-8:32px; --sp-10:40px; --sp-12:48px;
/* ── layout ── */
--sidebar-w: 240px;
--sidebar-w-collapsed: 64px;
--sidebar-w-open: 240px; /* the collapsed menu slides out to this width on hover (.side.peek) */
--topbar-h: 60px;
--page-max: 1280px;
--page-pad: 40px;
--gutter-x: max(var(--page-pad), (100% - var(--page-max)) / 2);
--aside-w: 272px;
--asst-w: 320px;
--control-h: 28px;
--row-h: 36px;
--row-h-2: 56px;
/* ── motion ── */
--dur-1: 80ms; --dur-2: 120ms; --dur-3: 160ms; --dur-4: 240ms; --dur-5: 320ms;
--ease-out: cubic-bezier(0,.09,.4,1);
--ease-in: cubic-bezier(.4,0,1,1);
--ease-move: cubic-bezier(.65,0,.35,1);
--ease-in-out: var(--ease-move);
--ease-spring: cubic-bezier(.34,1.3,.64,1);
}
:root[data-theme="dark"]{
color-scheme: dark;
--bg:#1C1D21; --surface:#1C1D21; --surface-raised:#222327; /* S page / raised card */
--surface-offset:#222327; --surface-offset-hover:#2A2B2F; /* S inset band (= raised, as Stripe dark); D hover */
--surface-hover:#232428; --surface-hover-raised:#2A2B2F; /* D +6 levels on page / on raised */
--surface-pressed:#323337; /* S selected nav item */
--surface-card:#28292D; /* D one step above the lane, as Attio's card over its board */
--surface-disabled:#232428; --surface-sunken:#1C1D21; /* S sunken = page colour */
--row-selected:#2A2B2F; --row-selected-hover:#323337; /* D page-level selected; S nav-selected grey */
--surface-inverse:#323337; --on-inverse:#F5F6FA; --on-inverse-2:#AEAFB4; /* D tooltip / toast */
--surface-sidebar:var(--bg); /* = the page background (owner, 2026-10-20; was #242529) */
--border:#343539; --border-soft:#2E2F33; --border-strong:#46474B; /* S hairline / between-pixel reading / chip edge */
--control-border:#6E6F74; /* D kept ≥ 3:1 for inputs, checkboxes, radios, off switch: 3.36 page, 3.13 raised, 3.05 sidebar (§2.5) */
--control-border-hover:#808186; /* D 4.33 */
--text-strong:#F5F6FA; --text-title:#F5F6FA; /* S */
--text:#E2E3E7; /* D softer body against glare */
--text-2:#AEAFB4; /* S */
--text-3:#9A9BA0; /* D Attio #95969A +5 to hold 4.5 on #323337 */
--text-4:#8A8B90; /* S placeholder, 4.62 on raised */
--text-disabled:#64656A; /* S */
--icon:#8A8B90; --icon-strong:#AEAFB4; /* S */
--accent:#3B6BE9; /* S same blue in both themes, white 4.70 */
--accent-hover:#3463DD; /* D darker on hover: a lighter blue would drop white text to 4.29 */
--accent-active:#2F5BD3; /* D */
--accent-ring:#3B6BE9; --accent-ring-hover:#3463DD; /* S no visible edge in dark */
--on-accent:#FFFFFF;
--accent-text:#7C93D2; /* S value links (periwinkle), 4.69 on --row-selected */
--accent-bg:#202639; /* D accent 12% on page: drop targets, choice card */
--accent-bg-2:#2E3B5E; /* S tint badge «Sort 1», «12», «4/6» */
--accent-soft-text:#DCE6FA; /* S */
--link:var(--accent-text); --link-hover:#F5F6FA;
--check-list:#3B6BE9;
--success:#6CC08D; --warning:#DDA066; --danger:#EC8580; --info:#7C93D2; /* D muted, see §2.4 */
--danger-solid:#CC3F3C; --danger-solid-hover:#B83634; --danger-ring:#CC3F3C; --on-danger:#FFFFFF;
--danger-line:rgba(236,133,128,.32);
--banner-critical-bg:#2B2224; --banner-critical-border:#4A3436; /* D low-chroma tag hues */
--banner-caution-bg:#2A2721; --banner-caution-border:#48422F;
--banner-success-bg:#212924; --banner-success-border:#35473B;
/* tags: bg hsl(h 33% 24%), edge hsl(h 20% 29%), text hsl(h 70% 94%) — the recipe of Attio's sampled red tag */
--badge-neutral-bg:#313236; --badge-neutral-border:#46474B; --badge-neutral-text:#E4E5E8; /* S */
--badge-success-bg:#295136; --badge-success-border:#3B5945; --badge-success-text:#E5FAEC; /* D */
--badge-warning-bg:#513C29; --badge-warning-border:#59493B; --badge-warning-text:#FAEFE5; /* D */
--badge-danger-bg: #502828; --badge-danger-border: #593B3B; --badge-danger-text: #FAE5E5; /* S bg, D edge/text */
--badge-info-bg: #2E3B5E; --badge-info-border: #3B4459; --badge-info-text: #E5EBFA; /* S bg */
--badge-purple-bg: #362951; --badge-purple-border: #453B59; --badge-purple-text: #ECE5FA; /* D */
--badge-urgent-bg: #502828; --badge-urgent-text: #FAE5E5;
--dot-neutral:#46474B; --dot-red:#E86664; --dot-orange:#EB964B; --dot-yellow:#ECD442; /* S (red D) */
--dot-green:#54C27D; --dot-sky:#57B9E5; --dot-purple:#8C63F0; --dot-pink:#E66084; /* S */
--note-bg:#2A2721; --note-border:#5C5850; --note-label:#C4A570; /* E warm grey, quiet: label 6.35, edge 2.10 (owner: the note block was the loudest) */
--flash-bg:#3A3424; /* D */
--ai-bg:#222129; --ai-border:#34333F; --ai-text:#9C8FDA; /* D from Attio's #21212D column tint and #8D7AD1 sparkle (lifted to 4.95 on #2A2B2F) */
--wa:#5BAE7C; --receipt:var(--text-3); --receipt-read:#7C93D2;
--bubble-out-bg:#26272B;
--kbd-bg:#2A2B2F; --kbd-text:#AEAFB4; /* D 6.46 */
--btn-bg:transparent; --btn-bg-hover:rgba(255,255,255,.04); --btn-text:#F5F6FA; /* S borderless-fill buttons; D hover */
--switch-thumb:#E4E5E8;
--step-done:#858993; --step-current:#3B6BE9; --step-future:#343539; /* E neutral passed steps (3.3 vs future, differs from the accent current by hue) */
--fade-shadow:rgba(0,0,0,.35);
--toast-icon:#6CC08D;
--toast-shadow:0 0 0 1px #46474B, 0 6px 20px rgba(0,0,0,.45);
--shadow-prompt:0 0 0 1px #343539, 0 6px 20px rgba(0,0,0,.40);
--tab-ink:#AEAFB4; /* D light ink ≈ text-3 under a text-1 label: here text-2 under the near-white label */
--meter:#8A8B90; /* D 3.93 on the #2E2F33 track */
--av-1-bg:#362951; --av-1-text:#ECE5FA; --av-2-bg:#2E3B5E; --av-2-text:#E5EBFA;
--av-3-bg:#295136; --av-3-text:#E5FAEC; --av-4-bg:#513C29; --av-4-text:#FAEFE5;
--av-5-bg:#51293D; --av-5-text:#FAE5F0; --av-6-bg:#313236; --av-6-text:#E4E5E8;
--chart-accent:#3B6BE9; --chart-accent-bar:#A9BEF5; --chart-prev:#46474B;
--chart-1:#5A7BD0; /* D softened blue mass, 4.15 on page */
--chart-2:#57B9E5; --chart-3:#54C27D; --chart-4:#EB964B; --chart-5:#E66084; /* S dot hues */
--chart-neutral:#6E6F74; --chart-grid:#2A2B2F; --chart-axis:#46474B; --chart-label:#ACADB1; --chart-plan:#9A9BA0; /* S grid/label */
--focus-color:#5B86EE; /* D accent lifted so a 1 px line holds ≥ 3:1 on every dark fill (3.66 on #323337) */
--focus-ring:0 0 0 1px var(--focus-color);
--focus-outline:1px solid var(--focus-color);
--scrim: rgba(0,0,0,.50); /* D */
--selection-bg:#2E3B5E; /* D = tint badge */
--scrollbar:#3A3B3F; /* D Attio #323337 lifted one step so it shows on the sidebar */
--select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23AEAFB4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 4.5 6 2l2.5 2.5M3.5 7.5 6 10l2.5-2.5'/%3E%3C/svg%3E");
/* S Attio dark has no visible shadows on cards or buttons: elevation = fill + 1 px hairline */
--shadow-control: 0 0 0 0 transparent;
--shadow-1: inset 0 0 0 1px #343539;
--shadow-hover: inset 0 0 0 1px #46474B;
--shadow-2: 0 0 0 1px #343539, 0 6px 20px rgba(0,0,0,.45);
--shadow-3: 0 0 0 1px #343539, 0 8px 24px rgba(0,0,0,.45);
--shadow-brand: 0 0 0 0 transparent; /* deletes the #746CFF top line on every primary */
--shadow-danger: 0 0 0 0 transparent;
}
/* ── legacy aliases (§2.4): old rules keep working while each group re-points them ── */
:root, :root[data-theme="dark"]{
--ink: var(--text-strong); --ink-2: var(--text); --t2: var(--text);
--soft: var(--text-3); --t3: var(--text-3); --faint: var(--text-4); --t4: var(--text-4);
--red: var(--accent);
--red-hover: var(--accent-hover); --red-bg: var(--accent-bg);
--ok: var(--success); --ok-bg: var(--badge-success-bg);
--yellow: var(--warning);
--line: var(--border-soft); --line2: var(--border-soft); --dash: var(--border);
--tint: var(--surface-hover); --col: var(--surface-offset); --blue-bg: var(--surface-hover);
--bg-2: var(--surface-offset);
--note-line: var(--note-border); --note-ink: var(--note-label);
--rail: var(--bg); --rail-on: var(--accent); --rail-ic: var(--icon);
--green: var(--accent); --green2: var(--text-strong); --green-bg: var(--accent-bg); --blue: var(--text-strong);
--mono: var(--font-mono); --sans: var(--font-sans);
--shadow-card: var(--shadow-1); --shadow-lift: var(--shadow-3); --shadow-ov: var(--shadow-3);
--t-fast: var(--dur-2); --t-med: 200ms; --t-slow: var(--dur-5);
}
/* ── reset ── */
*{box-sizing:border-box}
html,body{margin:0;height:100%}
html{background:var(--bg)}
body{background:var(--bg);color:var(--text);font:var(--t-body);letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input,textarea,select{font:inherit;color:inherit}
svg{display:block;flex:none}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* ── global rules of the theme layer (§3) ── */
*{scrollbar-width:thin;scrollbar-color:var(--scrollbar) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:999px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}
::selection{background:var(--selection-bg);color:inherit}
:focus{outline:none}
:where(:focus-visible){outline:none;box-shadow:var(--focus-ring)}
input[type="date"],input[type="time"],input[type="datetime-local"]{color-scheme:inherit}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{
-webkit-box-shadow:0 0 0 40px var(--surface) inset, 0 0 0 1px var(--control-border);
-webkit-text-fill-color:var(--text);caret-color:var(--text)}
input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 40px var(--surface) inset, var(--focus-ring)}
/* one frame without colour fades while the theme flips (UI.theme.set) */
html.theme-switching *,html.theme-switching *::before,html.theme-switching *::after{transition:none!important}
/* ── icons (§5.30) ── */
.ic{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ic.s{width:12px;height:12px;stroke-width:2.4}
/* white cut-outs inside filled sprite glyphs follow the surface (presentation attributes lose to CSS) */
#warn .cut,#cm-bang .cut,#cm-bang [stroke]:not([stroke="none"]){stroke:var(--surface)}
/* ── shell grid (§4.1) ── */
/* Speed (2026-10-23, the owner: «на всех страницах где много элементов сайдбар ужасно лагает»): the menu's width is no
longer a variable switched on (a variable changed there restyled every element of the page — 9 700 on a busy
board, up to 0.25 s), and the page column does not animate (each frame laid the whole page out again). The column
switches at once (pin / unpin; js/boot.js slides the page with a transform), and the hover slide-out moves only the
menu (.side.peek over the 64 px column) and shifts the page with a GPU transform (.main.shift) — no layout at all */
.app{display:grid;grid-template-columns:var(--sidebar-w-open) minmax(0,1fr);grid-template-rows:minmax(0,1fr);height:100vh;background:var(--bg);overflow:clip} /* clip: the shifted page's 176 px past the edge is not scrollable overflow (a scrollIntoView would move the shell) */
html.side-collapsed .app{grid-template-columns:var(--sidebar-w-collapsed) minmax(0,1fr)}
.main{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:var(--topbar-h) auto minmax(0,1fr);min-width:0;min-height:0;transition:transform 180ms var(--ease-out)}
.main.shift{transform:translateX(calc(var(--sidebar-w-open) - var(--sidebar-w-collapsed)))} /* hover slides the menu out and moves the page with it (owner) */
.main > .top{grid-row:1}
.main > .phead{grid-row:2}
.main > #view{grid-row:3;container:view / inline-size} /* per-screen layout rules query the #view width (§4.6) */
.wrap{width:100%;max-width:calc(var(--page-max) + 2 * var(--page-pad));margin:0 auto;padding:0 var(--page-pad)}
html:is([data-route="pipe"],[data-route="inbox"],[data-route="tasks"],[data-route="clients"]) .main > :is(.top,.phead) > .wrap{max-width:none}
/* ── sidebar (§4.2) ── */
.side{position:relative;z-index:30;display:flex;flex-direction:column;width:var(--sidebar-w-open);min-width:0;min-height:0;overflow:hidden;background:var(--surface-sidebar);border-right:1px solid var(--border-soft);transition:width 180ms var(--ease-out)}
html.side-collapsed .side:not(.peek){width:var(--sidebar-w-collapsed)} /* .peek: 240 px over its 64 px column — the page column keeps its size */
/* the top row: the menu button in place of the logo (pin / unpin the menu, «[»), then the «A5 Renova» account switcher */
.side-top{display:flex;align-items:center;gap:2px;flex:none;height:34px;margin:13px 12px 0}
.side-tg{width:40px;height:34px;flex:none;display:grid;place-items:center;border-radius:var(--radius-s);color:var(--icon);transition:background var(--dur-1),color var(--dur-1)}
.side-tg .ic{width:18px;height:18px;stroke-width:1.8}
.side-tg:hover{background:var(--surface-hover-raised);color:var(--text-strong)}
.side-tg[aria-pressed="true"]{color:var(--text-strong)}
.side-tg.off{cursor:default}
.side-tg.off:hover{background:none;color:var(--icon)}
.side-tg:focus-visible{box-shadow:var(--focus-ring)}
.acct{display:flex;align-items:center;flex:0 1 auto;gap:8px;height:34px;min-width:0;margin:0;padding:0 8px;border-radius:var(--radius-s);color:var(--text-strong);font:var(--t-body-strong);text-align:left;transition:background var(--dur-1)}
.acct:hover,.acct[aria-expanded="true"]{background:var(--surface-hover-raised)}
.acct:focus-visible{box-shadow:var(--focus-ring)}
.acct-n{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.acct .ud{width:12px;height:12px;flex:none;color:var(--text-3);stroke-width:2.4;opacity:0;transition:opacity var(--dur-1)}
.acct:hover .ud,.acct[aria-expanded="true"] .ud,.acct:focus-visible .ud{opacity:1}
.nav{flex:1;min-height:0;overflow:auto;padding-top:33px;display:flex;flex-direction:column}
.ni{position:relative;display:flex;align-items:center;gap:12px;height:30px;flex:none;margin:0 12px;padding:0 8px 0 12px;border-radius:var(--radius-s);color:var(--text);font:var(--t-body);text-decoration:none;white-space:nowrap;transition:color var(--dur-1),background var(--dur-1)}
.ni .ic{width:16px;height:16px;flex:none;color:var(--icon);stroke-width:2;transition:color var(--dur-1)}
.ni .nl{min-width:0;overflow:hidden;text-overflow:ellipsis}
.ni:hover{background:var(--surface-hover-raised);color:var(--text-strong)} .ni:hover .ic{color:var(--text-strong)}
/* selected = grey fill + dark text (DESIGN-CALM §3.1), never accent */
.ni.on,.ni.on:hover{background:var(--surface-pressed);color:var(--text-strong);font-weight:600} .ni.on .ic{color:var(--text-strong)}
.ni:focus-visible{box-shadow:var(--focus-ring)}
.ns{height:24px;display:flex;align-items:center;flex:none;margin-top:30px;padding:0 20px;font:500 12px/16px var(--font-sans);color:var(--text-3);white-space:nowrap;overflow:hidden}
.ni-end{margin:8px 12px 16px}
/* counters: plain text; only attention (tint) and overdue (pastel red) are small pills (DESIGN-CALM §3.6) */
.nb{margin-left:auto;background:none;box-shadow:none;padding:0;min-width:0;font:var(--t-caption-strong);font-variant-numeric:tabular-nums;color:var(--text-3)}
.nb.nb-accent,.nb.nb-danger{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--radius-xs)}
.nb.nb-accent{background:var(--accent-bg-2);color:var(--accent-soft-text)}
.nb.nb-danger{background:var(--badge-danger-bg);color:var(--badge-danger-text)}
/* the labels show by sliding the menu out on hover, so the per-item tooltips stay off */
.ni .tip{display:none}
/* collapsed (64 px, the default): icons only; the icons and the menu button keep their x, the section label its height,
so nothing jumps when the menu slides out. Sliding out (.side.peek + .main.shift) = the open menu at full width,
the page column moves along (as a pinned menu does) */
html.side-collapsed .side:not(.peek) :is(.acct,.ni .nl){display:none}
html.side-collapsed .side:not(.peek) .ns{visibility:hidden}
html.side-collapsed .side:not(.peek) .ni{width:40px;justify-content:center;padding:0;margin:0 12px}
html.side-collapsed .side:not(.peek) .ni-end{margin:8px 12px 16px}
html.side-collapsed .side:not(.peek) .nb{position:absolute;top:5px;left:30px;width:6px;height:6px;min-width:0;padding:0;border-radius:50%;font-size:0;background:var(--dot-neutral);box-shadow:0 0 0 2px var(--surface-sidebar)} /* a plain quantity stays neutral; only attention / overdue get a colour */
html.side-collapsed .side:not(.peek) .nb.nb-accent{background:var(--accent)}
html.side-collapsed .side:not(.peek) .nb.nb-danger{background:var(--danger)}
/* collapsed: the .ni.on grey fill covers the whole 40×30 item (DESIGN-CALM §3.1) */
/* ── top bar (§4.3) ── */
.top{background:var(--bg);border:0;min-width:0}
.top > .wrap{height:100%;display:flex;align-items:center;gap:16px}
.search{flex:0 1 564px;min-width:220px;height:36px;display:flex;align-items:center;gap:8px;padding:0 12px;border:0;border-radius:var(--radius-s);background:var(--surface-offset);color:var(--text-3);font:var(--t-body);text-align:left;transition:background var(--dur-1)}
.search .ic{width:12px;height:12px;color:var(--text-3);stroke-width:2.4}
.search .ph{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.search .kbd{display:none}
.search:hover{background:var(--surface-offset-hover)}
.search:focus-visible{box-shadow:var(--focus-ring)}
.top .r{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.circ{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--text);background:transparent;border:0;transition:background var(--dur-1)}
.circ .ic{width:16px;height:16px;stroke-width:2}
.circ:hover,.circ[aria-expanded="true"]{background:var(--surface-hover)}
.create{width:36px;height:36px;margin-right:-8px;display:grid;place-items:center;border-radius:50%;background:transparent;border:0;transition:background var(--dur-1)}
.create:hover,.create[aria-expanded="true"]{background:var(--surface-hover)}
/* the «+» circle is neutral: Attio's top bar has no accent (DESIGN-CALM §3.4) */
.create::before{content:"";grid-area:1/1;width:20px;height:20px;border-radius:50%;background:var(--surface-pressed);transition:background var(--dur-1),box-shadow var(--dur-1)}
.create .ic{grid-area:1/1;position:relative;width:12px;height:12px;color:var(--text-strong);stroke-width:2.6}
.create:hover::before{background:var(--row-selected-hover);box-shadow:none}
/* ── page header (§4.4) ── */
.phead{min-width:0}
.phead > .wrap{padding-top:16px;padding-bottom:16px}
.ph-crumb{display:flex;align-items:center;gap:8px;margin-bottom:4px;font:var(--t-body-strong)}
.ph-crumb a{color:var(--text-2);text-decoration:none;font-weight:600} .ph-crumb a:hover{color:var(--text-strong)}
.ph-crumb .crumb-ch{width:12px;height:12px;color:var(--text-3);stroke-width:2}
.ph-row{display:flex;align-items:center;gap:16px;min-height:36px}
#title{margin:0;min-width:0;display:flex;align-items:baseline;gap:8px;font:var(--t-title);color:var(--text-title);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#title .gray{font:var(--t-lead);color:var(--text-3)}
.ph-acts{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.ph-acts:empty{display:none}
html:is([data-route="deal"],[data-route="client"]) .phead{display:none}
/* ── the routed view (§4.5) ── */
#view{display:grid;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);min-height:0;min-width:0}
#view > *{min-height:0;min-width:0}
/* ── responsive (§4.6): below 1024 px the gutters shrink ── */
@media (max-width:1023px){
:root{--page-pad:24px}
.search{min-width:160px}
}
/* ── text helpers (§5.1) ── */
.lbl{font:var(--t-caption-strong);color:var(--text-2);letter-spacing:normal;text-transform:none}
.muted{color:var(--text-3)}
.tnum{font-variant-numeric:tabular-nums}
.red{color:var(--danger)}
a{color:inherit;text-decoration:none}
/* links, three roles (DESIGN-CALM §3.10): a bare that leaves the CRM is a value link (accent); a bare in-app «#/…»
opens a record (neutral + light underline); .lnk is only used for in-app actions («Шаблоны», «Выбрать из базы»,
«Вернуть», «Как считаются показатели»), so it is a ghost action. Same specificity as before, screen rules still win. */
a:not([class]){color:var(--link);font-weight:600}
a:not([class]):hover{color:var(--link-hover)}
a:not([class]):where([href^="#"]){color:var(--text-strong);text-decoration:underline;text-decoration-color:var(--border-strong);text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-color var(--dur-1)}
a:not([class]):where([href^="#"]):hover{color:var(--text-strong);text-decoration-color:var(--text-3)}
.lnk{display:inline-flex;align-items:center;gap:4px;color:var(--text-2);font:var(--t-body-strong);text-decoration:none;transition:color var(--dur-1)}
.lnk:hover{color:var(--text-strong)}
.lnk .ic{width:12px;height:12px;stroke-width:2.4}
.mono{font:var(--t-mono);color:var(--text)}
.explain{font-weight:600;color:var(--text);text-decoration:underline dashed var(--text-4);text-underline-offset:3px}
.copyable{text-decoration:underline dotted var(--text-4);text-underline-offset:3px}
/* ── buttons (§5.2) ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:var(--control-h);padding:0 8px;border:0;border-radius:var(--radius-s);
font:var(--t-body-strong);white-space:nowrap;text-decoration:none;cursor:pointer;
background:var(--btn-bg);color:var(--btn-text);
box-shadow:var(--shadow-control),0 0 0 1px var(--border);
transition:background var(--dur-1),box-shadow var(--dur-1),color var(--dur-1)}
.btn .ic{width:12px;height:12px;stroke-width:2.4;flex:none}
.btn:hover{background:var(--btn-bg-hover);box-shadow:var(--shadow-control),0 0 0 1px var(--border-strong)}
.btn:active{background:var(--surface-hover)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.btn.on,.btn[aria-expanded="true"]{box-shadow:var(--shadow-control),0 0 0 1px var(--border-strong);background:var(--surface-hover)}
.btn:focus-visible{box-shadow:var(--shadow-control),var(--focus-ring)} /* after .btn.on (same specificity), so a focused toggle keeps its ring */
a.btn,a.btn:hover{color:var(--btn-text)}
/* primary */
.btn.g{background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-brand),0 0 0 1px var(--accent-ring)}
.btn.g:hover{background:var(--accent-hover);box-shadow:var(--shadow-brand),0 0 0 1px var(--accent-ring-hover)}
.btn.g:active,.btn.g[aria-expanded="true"]{background:var(--accent-active)}
.btn.g:focus-visible{box-shadow:var(--shadow-brand),0 0 0 1px var(--accent-ring);outline:var(--focus-outline);outline-offset:3px} /* 3 px: the 1 px ring shadow takes one, so 2 px of gap stay (2 px read as a double edge) */
a.btn.g,a.btn.g:hover{color:var(--on-accent)}
/* destructive */
.btn.r,.btn.danger{background:var(--danger-solid);color:var(--on-danger);box-shadow:var(--shadow-danger),0 0 0 1px var(--danger-ring)}
.btn.r:hover,.btn.danger:hover{background:var(--danger-solid-hover);box-shadow:var(--shadow-danger),0 0 0 1px var(--danger-ring)}
.btn.r:focus-visible,.btn.danger:focus-visible{box-shadow:var(--shadow-danger),0 0 0 1px var(--danger-ring);outline:var(--focus-outline);outline-offset:3px}
/* ghost / quiet */
.btn.q{background:transparent;box-shadow:none;color:var(--text)}
.btn.q:hover,.btn.q.on,.btn.q[aria-expanded="true"]{background:var(--surface-hover);box-shadow:none}
.btn.q:focus-visible{box-shadow:var(--focus-ring)}
/* sizes */
.btn.sm{height:24px;padding:0 8px;font:var(--t-caption-strong);gap:4px}
.btn.lg{height:40px;padding:0 16px;font:600 16px/24px var(--font-sans);gap:8px}
.btn.sq,.btn.icon{width:28px;padding:0}
.btn.sm.sq,.btn.sm.icon{width:24px}
.btn.sq .ic,.btn.icon .ic{width:16px;height:16px;stroke-width:2}
/* won / lost */
.btn.ow .ic{color:var(--success)}
.btn.ol .ic{color:var(--danger)}
/* split */
.split{display:inline-flex;gap:0;border-radius:var(--radius-s)}
/* focus: one ring round the whole split (a ring on one half is painted over by the other half); the focused half takes
the hover fill so Tab between the halves stays visible */
.split:has(> .btn:focus-visible){outline:var(--focus-outline);outline-offset:3px}
.split > .btn.g:focus-visible{outline:none;background:var(--accent-hover)}
.split .btn:first-child{border-radius:var(--radius-s) 0 0 var(--radius-s)}
.split .btn:last-child{border-radius:0 var(--radius-s) var(--radius-s) 0;width:28px;padding:0}
.split .btn.g:last-child{box-shadow:inset 1px 0 0 var(--split-divider),var(--shadow-brand),0 0 0 1px var(--accent-ring)}
.split .btn.g:last-child:hover{box-shadow:inset 1px 0 0 var(--split-divider),var(--shadow-brand),0 0 0 1px var(--accent-ring-hover)}
.split .btn .ic{transition:transform var(--dur-3) var(--ease-out)}
.split .btn[aria-expanded="true"] .ic{transform:rotate(180deg)}
/* «ИИ-помощник» in the top bar: a secondary button with a muted-violet 16 px spark; open = neutral pressed (DESIGN-CALM §3.4) */
.top .btn.ai .ic{width:16px;height:16px;stroke-width:2;color:var(--ai-text)}
.top .btn.ai[aria-expanded="true"],.top .btn.ai[aria-expanded="true"]:hover{background:var(--surface-pressed);color:var(--btn-text);box-shadow:var(--shadow-control),0 0 0 1px var(--border-strong)}
/* drag in progress (pipe.js): no text selection, grabbing cursor everywhere */
body.is-dragging,body.is-dragging *{cursor:grabbing!important;-webkit-user-select:none!important;user-select:none!important}
/* ── view enter (router adds .enter to #view on route change) ── */
@keyframes view-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#view.enter > *{animation:view-in 220ms var(--ease-out) both}
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;transition-delay:0ms!important;scroll-behavior:auto!important}
#view.enter > *{animation:none}
.split .btn[aria-expanded="true"] .ic{transform:none}
}