/* The CRM design system's tokens and components, from design/claude-design-consumer-site/_ds (built by scripts/consumer-site/build.mjs). */
/* housemoney product brand tokens, adopted from the Claude Design CRM design system (D66, design/claude-design-crm).
   Customer sites do not use these; they use the theme stored on their `sites` row.
   Fonts: Plus Jakarta Sans 400 to 800, Inter Tight 700 and 800 (the logo only), and Geist Mono 400 to 600 (Google Fonts). Icons: Phosphor Regular (@phosphor-icons/react).
   Light is the default. [data-theme="dark"] or the OS setting switches to dark; [data-theme="light"] forces light. */
/* housemoney CRM colors (D317). Palette E3 Midnight: a near-black midnight blue (#111222) for the brand and the one primary action,
   cool gray neutrals, indigo for links, focus, and Substrait, platinum for counts and wins (D350). Clay means time (D350, was amber; the ready stage ink), red error.
   Every text pair below passes WCAG AA (4.5:1). Field and control edges (--app-edge) pass 3:1.
   Light is the default. Dark applies to any element with [data-theme="dark"] (usually <html>), or with the OS setting unless [data-theme="light"] is set. */
:root {
  --brand-ink: #111222;
  --brand-paper: #F5F5F7;
  --brand-accent: #111222;

  --app-bg: var(--brand-paper);
  --app-surface: #FFFFFF;
  --app-raised: #FFFFFF;
  --app-ink: var(--brand-ink);
  --app-ink-2: #5B5D70;
  --app-ink-3: #6B6D80;
  --app-line: #E6E6EC;
  --app-line-2: #EFEFF3;
  --app-edge: #8A8C9C;
  --app-accent: var(--brand-accent);
  --app-accent-ink: #FFFFFF;
  --app-accent-soft: #EDEEF8;
  --app-accent-text: #3E4C98;
  --app-warn: #8A4A30;
  --app-warn-soft: #F4E4DA;
  --app-danger: #B33434;
  --app-danger-soft: #FBE6E6;
  --app-danger-ink: #FFFFFF;
  --app-success: #1E7249;
  --app-success-soft: #E0F3E8;
  --app-focus: #3E4C98;
  --app-scrim: rgba(8, 9, 20, .5);
  --app-shadow: 0 1px 2px rgba(17, 18, 34, .04), 0 2px 8px rgba(17, 18, 34, .03);
  --app-shadow-float: 0 10px 30px rgba(8, 9, 20, .16);
  --app-card-border: transparent;
  /* Section tints: each card family gets its own soft color so the page has rhythm. Ink on tint passes AA. */
  --app-tint-indigo: #EDEEF8;
  --app-tint-indigo-ink: #3E4C98;
  --app-tint-teal: #DEEBE9;
  --app-tint-teal-ink: #35645E;
  --app-tint-peach: #F4E4DA;
  --app-tint-peach-ink: #8A4A30;
  --app-tint-violet: #ECE5F3;
  --app-tint-violet-ink: #5D4684;
  --app-tint-slate: #E6E9EF;
  --app-tint-slate-ink: #2F3A55;
  --app-tint-amber: #F2ECDC;
  --app-tint-amber-ink: #6A5628;
  /* Stage colors (D74 stages). Each pair is a soft pill background and a dark ink of the same hue; the ink also serves as the dot on filter chips.
     The hues carry over what the team knows from Sierra Interactive (2026-09-30), pulled to one softness so they sit together (D350, option B):
     connect = warm sand (Sierra New), learn = sage (Sierra Active), ready = clay (Sierra Prime), pending = indigo (Sierra Pending),
     closed = plum (past clients), archived = stone, later = mist blue, listed = sea (D335; the same values as --app-tint-teal).
     The section tints use the same family: amber with connect, peach with ready, teal with listed, violet with closed.
     Ink on background, light: connect 5.99, learn 5.63, ready 5.46, later 5.68, listed 5.47, pending 8.16, closed 6.38, archived 5.97 (AA needs 4.5).
     Ink on background, dark: connect 9.20, learn 8.26, ready 7.98, later 8.03, listed 7.94, pending 8.31, closed 8.78, archived 7.56.
     The dark values are deeper tints with light ink. */
  --stage-connect-bg: #F2ECDC;
  --stage-connect-ink: #6A5628;
  --stage-learn-bg: #E2EDE5;
  --stage-learn-ink: #3B6449;
  --stage-ready-bg: #F4E4DA;
  --stage-ready-ink: #8A4A30;
  --stage-later-bg: #E1E9F0;
  --stage-later-ink: #3D5D73;
  --stage-listed-bg: #DEEBE9;
  --stage-listed-ink: #35645E;
  --stage-pending-bg: #E0E4F5;
  --stage-pending-ink: #2E3A80;
  --stage-archived-bg: #EBEBEE;
  --stage-archived-ink: #55576A;
  --stage-closed-bg: #ECE5F3;
  --stage-closed-ink: #5D4684;
  /* Substrait, the AI engine behind the CRM: its own muted slate from substrait.app's slab mark (#5E6B7E), so what it
     wrote reads apart from the team's lines without a second loud color. Ink on soft: 5.39 light, 7.06 dark; mark on dot: 5.41 light, 6.30 dark (AA needs 4.5). */
  --substrait-ink: #56637A;
  --substrait-dot: #5E6B7E;
  --substrait-dot-ink: #FFFFFF;
  --substrait-soft: #EEF2F6;
  --substrait-line: #D6DEE7;
  /* The Substrait card on Today: a soft violet wash behind the CRM's ink, and the glow behind the slab mark (the mark
     itself is --substrait-ink). Ink on the wash: 12.6, ink-2 on the wash 5.0 (light); 12.1 and 6.2 (dark). Ink-3 falls
     under 4.5 on the light wash, so small text on it uses ink-2. */
  --substrait-wash: #ECE8FF;
  --substrait-glow: #5B4BD8;
  --brand-indigo: #3E4C98;
  --app-platinum: #DCDFE6;
  --app-platinum-ink: #111222;
  --app-platinum-soft: #EEF0F4;
  --app-platinum-text: #4A5068;
  /* The nav (D350): light in light mode, with a hairline edge and a thin midnight marker on the current page; midnight in dark mode.
     --app-chrome-* is the midnight that stays in both modes: the sign-in panel. All flat (D317). */
  --app-nav-bg: #FBFBFC;
  --app-nav-ink: #111222;
  --app-nav-ink-2: #5B5D70;
  --app-nav-hover: #F0F1F5;
  --app-nav-on: #FBFBFC;
  --app-nav-line: #E6E6EC;
  --app-nav-edge: #E6E6EC;
  --app-nav-marker: #111222;
  --app-nav-count-bg: #111222;
  --app-tier-silver: #B9BDC7;
  --app-tier-gold: #CDB474;
  --app-nav-count-ink: #C9CDD8;
  --app-nav-signout: #5B5D70;
  --app-chrome-bg: #111222;
  --app-chrome-ink: #F3F2EE;
  --app-chrome-ink-2: #A3A5BD;
  color-scheme: light;
}

/* Forces light inside a dark page or OS setting. */
[data-theme="light"] {
  --app-bg: #F5F5F7;
  --app-surface: #FFFFFF;
  --app-raised: #FFFFFF;
  --app-ink: #111222;
  --app-ink-2: #5B5D70;
  --app-ink-3: #6B6D80;
  --app-line: #E6E6EC;
  --app-line-2: #EFEFF3;
  --app-edge: #8A8C9C;
  --app-accent: #111222;
  --app-accent-ink: #FFFFFF;
  --app-accent-soft: #EDEEF8;
  --app-accent-text: #3E4C98;
  --app-warn: #8A4A30;
  --app-warn-soft: #F4E4DA;
  --app-danger: #B33434;
  --app-danger-soft: #FBE6E6;
  --app-danger-ink: #FFFFFF;
  --app-success: #1E7249;
  --app-success-soft: #E0F3E8;
  --app-focus: #3E4C98;
  --app-scrim: rgba(8, 9, 20, .5);
  --app-shadow: 0 1px 2px rgba(17, 18, 34, .04), 0 2px 8px rgba(17, 18, 34, .03);
  --app-shadow-float: 0 10px 30px rgba(8, 9, 20, .16);
  --app-card-border: transparent;
  --app-tint-indigo: #EDEEF8;
  --app-tint-indigo-ink: #3E4C98;
  --app-tint-teal: #DEEBE9;
  --app-tint-teal-ink: #35645E;
  --app-tint-peach: #F4E4DA;
  --app-tint-peach-ink: #8A4A30;
  --app-tint-violet: #ECE5F3;
  --app-tint-violet-ink: #5D4684;
  --app-tint-slate: #E6E9EF;
  --app-tint-slate-ink: #2F3A55;
  --app-tint-amber: #F2ECDC;
  --app-tint-amber-ink: #6A5628;
  /* Stage colors, light (see the :root block). */
  --stage-connect-bg: #F2ECDC;
  --stage-connect-ink: #6A5628;
  --stage-learn-bg: #E2EDE5;
  --stage-learn-ink: #3B6449;
  --stage-ready-bg: #F4E4DA;
  --stage-ready-ink: #8A4A30;
  --stage-later-bg: #E1E9F0;
  --stage-later-ink: #3D5D73;
  --stage-listed-bg: #DEEBE9;
  --stage-listed-ink: #35645E;
  --stage-pending-bg: #E0E4F5;
  --stage-pending-ink: #2E3A80;
  --stage-archived-bg: #EBEBEE;
  --stage-archived-ink: #55576A;
  --stage-closed-bg: #ECE5F3;
  --stage-closed-ink: #5D4684;
  /* Substrait, light (see the :root block). */
  --substrait-ink: #56637A;
  --substrait-dot: #5E6B7E;
  --substrait-dot-ink: #FFFFFF;
  --substrait-soft: #EEF2F6;
  --substrait-line: #D6DEE7;
  --substrait-wash: #ECE8FF;
  --substrait-glow: #5B4BD8;
  --app-platinum: #DCDFE6;
  --app-platinum-ink: #111222;
  --app-platinum-soft: #EEF0F4;
  --app-platinum-text: #4A5068;
  --app-nav-bg: #FBFBFC;
  --app-nav-ink: #111222;
  --app-nav-ink-2: #5B5D70;
  --app-nav-hover: #F0F1F5;
  --app-nav-on: #FBFBFC;
  --app-nav-line: #E6E6EC;
  --app-nav-edge: #E6E6EC;
  --app-nav-marker: #111222;
  --app-nav-count-bg: #111222;
  --app-tier-silver: #B9BDC7;
  --app-tier-gold: #CDB474;
  --app-nav-count-ink: #C9CDD8;
  --app-nav-signout: #5B5D70;
  --app-chrome-bg: #111222;
  --app-chrome-ink: #F3F2EE;
  --app-chrome-ink-2: #A3A5BD;
  color-scheme: light;
}

[data-theme="dark"] {
  --app-bg: #0E0F1C;
  --app-surface: #171929;
  --app-raised: #1F2235;
  --app-ink: #F0F0F4;
  --app-ink-2: #A7A9C0;
  --app-ink-3: #8F92AC;
  --app-line: #2A2D45;
  --app-line-2: #222539;
  --app-edge: #6E7290;
  --app-accent: #F0F0F4;
  --app-accent-ink: #111222;
  --app-accent-soft: #252945;
  --app-accent-text: #B9C1FA;
  --app-warn: #E8B9A2;
  --app-warn-soft: #3A271F;
  --app-danger: #F28B8B;
  --app-danger-soft: #3E2228;
  --app-danger-ink: #2A0E0E;
  --app-success: #6FD3A0;
  --app-success-soft: #1D3A2E;
  --app-focus: #B9C1FA;
  --app-scrim: rgba(0, 0, 0, .6);
  --app-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  --app-shadow-float: 0 10px 30px rgba(0, 0, 0, .5);
  --app-card-border: #2A2D45;
  --app-tint-indigo: #252945;
  --app-tint-indigo-ink: #CDD3F8;
  --app-tint-teal: #1B3331;
  --app-tint-teal-ink: #A3D0C9;
  --app-tint-peach: #3A271F;
  --app-tint-peach-ink: #E8B9A2;
  --app-tint-violet: #2D2540;
  --app-tint-violet-ink: #D2C3EA;
  --app-tint-slate: #1C2436;
  --app-tint-slate-ink: #B7C4E0;
  --app-tint-amber: #332D1F;
  --app-tint-amber-ink: #E3D3A6;
  /* Stage colors, dark: deeper tints with light ink (ratios in the light block). */
  --stage-connect-bg: #332D1F;
  --stage-connect-ink: #E3D3A6;
  --stage-learn-bg: #1E3127;
  --stage-learn-ink: #A9D2B6;
  --stage-ready-bg: #3A271F;
  --stage-ready-ink: #E8B9A2;
  --stage-later-bg: #1C2C38;
  --stage-later-ink: #A9C6DA;
  --stage-listed-bg: #1B3331;
  --stage-listed-ink: #A3D0C9;
  --stage-pending-bg: #232A4A;
  --stage-pending-ink: #BCC6F0;
  --stage-archived-bg: #2A2C38;
  --stage-archived-ink: #BCBFCC;
  --stage-closed-bg: #2D2540;
  --stage-closed-ink: #D2C3EA;
  /* Substrait, dark. */
  --substrait-ink: #AEB9CA;
  --substrait-dot: #4A566B;
  --substrait-dot-ink: #E8EDF4;
  --substrait-soft: #262B3F;
  --substrait-line: #363E55;
  --substrait-wash: #2A2456;
  --substrait-glow: #B2A6FF;
  --app-platinum: #C9CDD8;
  --app-platinum-ink: #111222;
  --app-platinum-soft: #262A3A;
  --app-platinum-text: #D5D9E3;
  --app-nav-bg: #08090F;
  --app-nav-ink: #F0F0F4;
  --app-nav-ink-2: #A7A9C0;
  --app-nav-hover: #14162A;
  --app-nav-on: #08090F;
  --app-nav-line: #1C1E33;
  --app-nav-edge: transparent;
  --app-nav-marker: #C9CDD8;
  --app-nav-count-bg: #C9CDD8;
  --app-nav-count-ink: #111222;
  --app-nav-signout: #C9CDD8;
  --app-chrome-bg: #08090F;
  --app-chrome-ink: #F0F0F4;
  --app-chrome-ink-2: #A7A9C0;
  color-scheme: dark;
}

/* The repo also applies the dark values under @media (prefers-color-scheme: dark) :root:not([data-theme="light"]) (see export/tokens.css). Here dark is set with data-theme="dark" only. */

:root {
  --brand-font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --brand-font-body: "Plus Jakarta Sans", system-ui, sans-serif;
  --brand-font-logo: "Inter Tight", "Helvetica Neue", Arial, sans-serif; /* logo and wordmark only */
  --brand-font-mono: "Geist Mono", ui-monospace, monospace;

  --app-text-xs: 11.5px;   /* chip labels, card labels */
  --app-text-sm: 12.5px;   /* secondary detail, timestamps */
  --app-text-md: 13.5px;   /* body, buttons, fields */
  --app-text-base: 14.5px; /* names in lists */
  --app-text-lg: 17px;     /* card and section titles */
  --app-text-xl: 21px;
  --app-text-2xl: 26px;    /* page title on phone */
  --app-text-3xl: 40px;    /* page title on desktop (D350, was 32) */

  --app-weight-regular: 400;
  --app-weight-medium: 500;
  --app-weight-semibold: 600;
  --app-weight-bold: 700;
  --app-weight-heavy: 800;  /* headings only */

  --app-leading-tight: 1.1;
  --app-leading-body: 1.45;
  --app-tracking-display: -0.02em;
}

:root {
  --app-space-1: 4px;
  --app-space-2: 6px;
  --app-space-3: 8px;
  --app-space-4: 12px;
  --app-space-5: 16px;
  --app-space-6: 18px;
  --app-space-7: 24px;
  --app-space-8: 32px;
  --app-space-9: 40px;

  --app-radius-pill: 999px;  /* buttons, fields, chips, tags, nav items */
  --app-radius-card: 24px;   /* cards, lists, toasts (D350, was 20) */
  --app-radius-panel: 16px;  /* inset wells */
  --app-radius-phone: 32px;

  --app-control-h: 40px;     /* default button and field height */
  --app-control-h-sm: 32px;
  --app-control-h-lg: 44px;  /* minimum tap target on phone */
  --app-row-h: 64px;         /* people list row, comfortable plus */
  --app-avatar: 38px;
  --app-avatar-lg: 56px;
  --app-nav-w: 240px;
  --app-side-w: 320px;       /* person page side column */
  --app-page-pad: 40px;
  --app-page-pad-phone: 16px;
  --app-edge-w: 1px;

  /* The call glow around the screen while a call is up (D147): electric blue, violet, hot pink, and amber, bright on purpose. */
  --app-glow-1: #4F6BFF;
  --app-glow-2: #A35BFF;
  --app-glow-3: #FF4FA8;
  --app-glow-4: #FF9A3C;
}

/* Phone sizes (PHONE-RULES.md). In the app these sit on .shell--phone; here they are global so mockups can use them. */
:root {
  --ph-title: 34px;        /* page title */
  --ph-section: 20px;      /* section titles above cards */
  --ph-row-title: 17px;    /* row and card titles */
  --ph-body: 16px;
  --ph-meta: 15px;         /* secondary lines; nothing smaller except labels */
  --ph-label: 13px;        /* uppercase or small labels only */
  --ph-tap: 48px;          /* minimum tap target */
  --ph-btn: 52px;          /* standard button height */
  --ph-btn-main: 64px;     /* the one main action on a screen */
  --ph-row: 76px;          /* list rows with two lines */
  --ph-gap-section: 24px;
  --ph-gap-card: 14px;
  --ph-pad: 16px;
  --ph-card-pad: 18px;
}

/* Durations: fast = hover, press. dur = open, close, toasts. slow = drawer. */
:root {
  --app-ease: cubic-bezier(.2, .7, .2, 1); /* @kind other */
  --app-dur-fast: 120ms; /* @kind other */
  --app-dur: 200ms; /* @kind other */
  --app-dur-slow: 320ms; /* @kind other */
  --app-toast-time: 6s; /* @kind other */
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --app-dur-fast: 0ms; /* @kind other */
    --app-dur: 0ms; /* @kind other */
    --app-dur-slow: 0ms; /* @kind other */
  }
}

/* Component classes. Every value comes from a --app- token. */
.app { font-family: var(--brand-font-body); color: var(--app-ink); -webkit-font-smoothing: antialiased; }
.app *, .app *::before, .app *::after { box-sizing: border-box; }
.app-num { font-family: var(--brand-font-mono); font-variant-numeric: tabular-nums; }
.app-h1 { font: var(--app-weight-heavy) var(--app-text-3xl)/var(--app-leading-tight) var(--brand-font-display); letter-spacing: var(--app-tracking-display); margin: 0; }
.app-h2 { font: var(--app-weight-heavy) var(--app-text-lg)/1.25 var(--brand-font-display); margin: 0; }
.app-label { font-size: var(--app-text-xs); font-weight: var(--app-weight-bold); color: var(--app-ink-2); }

/* Buttons */
.app-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--app-control-h); padding: 0 18px; border-radius: var(--app-radius-pill); border: 1px solid transparent; font: var(--app-weight-bold) var(--app-text-md)/1 var(--brand-font-body); white-space: nowrap; cursor: pointer; transition: background var(--app-dur-fast) var(--app-ease), filter var(--app-dur-fast), transform var(--app-dur-fast); text-decoration: none; }
.app-btn .ph { font-size: 16px; }
.app-btn:active { transform: translateY(1px); }
.app-btn:focus-visible, .app-icon-btn:focus-visible, .app-chip:focus-visible, .app-tab:focus-visible, .app-nav-item:focus-visible { outline: 2px solid var(--app-focus); outline-offset: 2px; }
.app-btn--primary { background: var(--app-accent); color: var(--app-accent-ink); }
.app-btn--primary:hover { filter: brightness(1.08); }
.app-btn--secondary { background: var(--app-surface); color: var(--app-ink); border-color: var(--app-edge); }
.app-btn--secondary:hover { background: var(--app-accent-soft); }
.app-btn--quiet { background: transparent; color: var(--app-accent-text); padding: 0 12px; }
.app-btn--quiet:hover { background: var(--app-accent-soft); }
.app-btn--danger { background: var(--app-danger); color: var(--app-danger-ink); }
.app-btn--danger:hover { filter: brightness(1.08); }
.app-btn--sm { height: var(--app-control-h-sm); padding: 0 14px; font-size: var(--app-text-sm); }
.app-btn--lg { height: var(--app-control-h-lg); padding: 0 22px; font-size: 14.5px; }
.app-btn--block { width: 100%; }
.app-btn:disabled, .app-btn[aria-disabled="true"] { opacity: .45; cursor: default; pointer-events: none; }
.app-btn--busy .app-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: app-spin .8s linear infinite; }
@keyframes app-spin { to { transform: rotate(360deg); } }
.app-icon-btn { width: 36px; height: 36px; flex: none; display: inline-grid; place-items: center; border-radius: var(--app-radius-pill); border: 1px solid var(--app-edge); background: var(--app-surface); color: var(--app-ink); cursor: pointer; transition: background var(--app-dur-fast); }
.app-icon-btn .ph { font-size: 16px; }
.app-icon-btn:hover { background: var(--app-accent-soft); }
.app-icon-btn--lg { width: 44px; height: 44px; }
.app-icon-btn--ghost { border-color: transparent; background: transparent; color: var(--app-ink-2); }
.app-icon-btn:disabled { opacity: .4; cursor: default; }

/* Fields */
.app-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.app-input, .app-select, .app-textarea { width: 100%; height: var(--app-control-h); padding: 0 16px; border-radius: var(--app-radius-pill); border: 1px solid var(--app-edge); background: var(--app-surface); color: var(--app-ink); font: var(--app-weight-regular) var(--app-text-md)/1.4 var(--brand-font-body); outline: none; transition: box-shadow var(--app-dur-fast), border-color var(--app-dur-fast); }
.app-input::placeholder, .app-textarea::placeholder { color: var(--app-ink-3); }
.app-input:hover, .app-select:hover, .app-textarea:hover { border-color: var(--app-ink-2); }
.app-input:focus, .app-select:focus, .app-textarea:focus { border-color: var(--app-focus); box-shadow: 0 0 0 3px var(--app-accent-soft); }
.app-input:disabled, .app-select:disabled, .app-textarea:disabled { background: var(--app-bg); color: var(--app-ink-3); border-color: var(--app-line); }
.app-input[aria-invalid="true"] { border: 1.5px solid var(--app-danger); }
.app-field__error { display: flex; gap: 6px; align-items: center; font-size: var(--app-text-sm); font-weight: var(--app-weight-semibold); color: var(--app-danger); }
.app-field__hint { font-size: var(--app-text-sm); color: var(--app-ink-2); }
.app-search { position: relative; }
.app-search .ph { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--app-ink-2); font-size: 16px; pointer-events: none; }
.app-search .app-input { padding-left: 40px; }
.app-select { appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--app-ink-2) 50%), linear-gradient(135deg, var(--app-ink-2) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; }
.app-textarea { height: auto; min-height: 96px; padding: 14px 18px; border-radius: var(--app-radius-card); resize: vertical; }
.app-check { display: inline-flex; gap: 10px; align-items: center; min-height: 32px; font-size: 14px; cursor: pointer; }
.app-check input { appearance: none; width: 20px; height: 20px; margin: 0; flex: none; border-radius: var(--app-radius-pill); border: 1.5px solid var(--app-edge); background: var(--app-surface); display: grid; place-items: center; cursor: pointer; }
.app-check input[type="checkbox"] { position: absolute; opacity: 0; width: 20px; height: 20px; }
.app-check { position: relative; }
.app-check__box { width: 20px; height: 20px; flex: none; border-radius: var(--app-radius-pill); border: 1.5px solid var(--app-edge); background: var(--app-surface); display: grid; place-items: center; transition: background var(--app-dur-fast); }
.app-check__box::after { content: ""; width: 5px; height: 9px; border-right: 2px solid var(--app-accent-ink); border-bottom: 2px solid var(--app-accent-ink); transform: rotate(45deg) translate(-1px, -1px); opacity: 0; }
.app-check input:checked + .app-check__box { background: var(--app-accent); border-color: var(--app-accent); }
.app-check input:checked + .app-check__box::after { opacity: 1; }
.app-check input:focus-visible + .app-check__box { outline: 2px solid var(--app-focus); outline-offset: 2px; }
.app-check input:disabled + .app-check__box { opacity: .45; }
.app-check:hover .app-check__box { border-color: var(--app-ink-2); }
.app-check input:focus-visible { outline: 2px solid var(--app-focus); outline-offset: 2px; }
.app-check input:disabled { opacity: .45; }
.app-check input[type="radio"]::after { display: none; }
.app-check input[type="radio"]:checked { background: var(--app-surface); border: 5px solid var(--app-accent); }

/* Chips, tags, badges, avatars */
.app-chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 3px 10px; border-radius: var(--app-radius-pill); font-size: var(--app-text-xs); font-weight: var(--app-weight-bold); line-height: 1.45; }
.app-chip--accent { background: var(--app-accent-soft); color: var(--app-accent-text); }
.app-chip--neutral { background: var(--app-bg); color: var(--app-ink-2); }
.app-chip--warn { background: var(--app-warn-soft); color: var(--app-warn); }
.app-chip--danger { background: var(--app-danger-soft); color: var(--app-danger); }
.app-chip--success { background: var(--app-success-soft); color: var(--app-success); }
.app-chip--solid { background: var(--app-accent); color: var(--app-accent-ink); }
.app-chip--mono { font-family: var(--brand-font-mono); font-weight: var(--app-weight-medium); font-size: 12px; }
.app-tag { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 4px 8px 4px 12px; border-radius: var(--app-radius-pill); border: 1px solid var(--app-line); font-size: var(--app-text-sm); font-weight: var(--app-weight-semibold); background: var(--app-surface); color: var(--app-ink); }
.app-tag button { border: 0; background: none; padding: 0; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; color: var(--app-ink-2); cursor: pointer; }
.app-tag button:hover { background: var(--app-line); color: var(--app-ink); }
.app-tag--add { border-style: dashed; border-color: var(--app-edge); color: var(--app-accent-text); padding: 4px 12px; cursor: pointer; }
.app-badge { min-width: 22px; height: 22px; padding: 0 7px; display: inline-grid; place-items: center; border-radius: var(--app-radius-pill); background: var(--app-platinum); color: var(--app-platinum-ink); font: var(--app-weight-semibold) 11.5px/1 var(--brand-font-mono); }
.app-avatar { flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--app-accent-soft); color: var(--app-accent-text); font-weight: var(--app-weight-bold); }
.app-avatar--pond { background: transparent; border: 1.5px dashed var(--app-edge); color: var(--app-ink-2); }
.app-avatar--ink { background: var(--app-ink); color: var(--app-bg); }

/* Cards */
.app-card { background: var(--app-surface); border-radius: var(--app-radius-card); box-shadow: var(--app-shadow); border: 1px solid var(--app-card-border); padding: var(--app-space-6); }
.app-card--flush { padding: 0; overflow: hidden; }
.app-card--outline { box-shadow: none; border: 1px solid var(--app-edge); }
.app-card--dashed { box-shadow: none; background: transparent; border: 1px dashed var(--app-edge); }
.app-card--selected { box-shadow: 0 0 0 2px var(--app-accent); }
.app-notice { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: var(--app-radius-card); font-size: 13px; line-height: 1.45; }
.app-notice > .ph { font-size: 18px; padding-top: 1px; }
.app-notice__title { font-size: var(--app-text-md); font-weight: var(--app-weight-bold); }
.app-notice--warn { background: var(--app-warn-soft); }
.app-notice--warn > .ph, .app-notice--warn .app-notice__title { color: var(--app-warn); }
.app-notice--danger { background: var(--app-danger-soft); }
.app-notice--danger > .ph, .app-notice--danger .app-notice__title { color: var(--app-danger); }
.app-notice--info { background: var(--app-accent-soft); }
.app-notice--info > .ph, .app-notice--info .app-notice__title { color: var(--app-accent-text); }

/* Tabs (people views) */
.app-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.app-tab { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; height: 36px; padding: 0 15px; border-radius: var(--app-radius-pill); border: 0; background: transparent; color: var(--app-ink-2); font: var(--app-weight-semibold) var(--app-text-md)/1 var(--brand-font-body); cursor: pointer; }
.app-tab:hover { background: var(--app-line-2); color: var(--app-ink); }
.app-tab[aria-selected="true"] { background: var(--app-ink); color: var(--app-bg); font-weight: var(--app-weight-bold); }
.app-tab .app-num { font-weight: var(--app-weight-medium); }

/* Side nav */
.app-nav { width: var(--app-nav-w); flex: none; display: flex; flex-direction: column; gap: 3px; padding: 22px 14px; background: var(--app-nav-bg); border-right: 1px solid var(--app-nav-line); color: var(--app-nav-ink); height: 100%; box-sizing: border-box; }
.app-nav__mark { font: var(--app-weight-heavy) 19px/1 var(--brand-font-display); letter-spacing: var(--app-tracking-display); padding: 4px 14px 22px; color: var(--app-nav-ink); }
.app-nav-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-radius: 0; color: var(--app-nav-ink-2); font-weight: var(--app-weight-medium); font-size: 14px; text-decoration: none; cursor: pointer; border: 0; background: none; width: 100%; text-align: left; font-family: inherit; }
.app-nav-item .ph { font-size: 18px; }
.app-nav-item:hover { color: var(--app-nav-ink); }
.app-nav-item[aria-current="page"] { color: var(--app-nav-ink); font-weight: var(--app-weight-bold); }
.app-nav-item[aria-current="page"]::before { content: ""; position: absolute; left: -14px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--app-nav-marker); }
.app-nav-item span:first-of-type { flex: 1; }
.app-nav__account { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding: 14px; border-top: 1px solid var(--app-nav-line); }
.app-nav__acct { font-size: var(--app-text-xs); font-weight: var(--app-weight-semibold); color: var(--app-nav-ink-2); }
.app-nav__name { font-size: 14px; font-weight: var(--app-weight-bold); }
.app-nav__role { font-size: var(--app-text-sm); color: var(--app-nav-ink-2); }
.app-nav__signout { align-self: flex-start; margin-top: 8px; padding: 0; border: 0; background: none; font: var(--app-weight-bold) 13px var(--brand-font-body); color: var(--app-accent-text); cursor: pointer; }
.app-nav-item:focus-visible, .app-nav__signout:focus-visible { outline-color: var(--app-focus); }
.app-topbar { height: 56px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 16px; background: var(--app-nav-bg); border-bottom: 1px solid var(--app-nav-line); color: var(--app-nav-ink); }
.app-topbar .app-icon-btn { background: transparent; border-color: var(--app-nav-line); color: var(--app-nav-ink); }
.app-topbar .app-icon-btn:hover { background: var(--app-nav-hover); }
.app-drawer-scrim { position: absolute; inset: 0; background: var(--app-scrim); }
.app-drawer { position: absolute; top: 0; bottom: 0; left: 0; width: 280px; box-shadow: 0 10px 40px rgba(0,0,0,.3); }

/* Toast */
.app-toast { display: flex; gap: 12px; align-items: center; max-width: 460px; padding: 12px 10px 12px 14px; border-radius: var(--app-radius-card); background: var(--app-surface); border: 1px solid var(--app-line); box-shadow: var(--app-shadow-float); font-size: var(--app-text-md); line-height: 1.45; color: var(--app-ink); }
.app-toast__icon { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 17px; }
.app-toast__text { flex: 1; min-width: 0; }

/* Skeleton */
.app-skel { display: block; border-radius: var(--app-radius-pill); background: var(--app-line); animation: app-pulse 1.4s ease-in-out infinite; }
@keyframes app-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .app-skel, .app-btn--busy .app-spin { animation: none; } }

/* Section cards adapt to their own width (container queries), not the window. */
.app-section { container-type: inline-size; }
.app-section__head { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.app-section__title { font-size: 15px; flex: 1; display: flex; gap: 8px; align-items: baseline; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-section__tools { display: flex; align-items: center; gap: 6px; flex: none; }
.app-section__tools > .app-btn--quiet:last-child { margin-right: -8px; }
.app-section__tools .app-btn--quiet { padding: 0 8px; }
/* Compact icon rows: contact details without labels */
.app-irows { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2px 20px; }
.app-irow { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 34px; font-size: 13.5px; min-width: 0; }
.app-irow > .ph { font-size: 16px; color: var(--app-ink-2); }
.app-irow__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-irow--wide { grid-column: 1 / -1; align-items: start; padding: 7px 0; }
.app-irow--wide > .ph { padding-top: 2px; }
.app-irow--wide .app-irow__text { white-space: normal; line-height: 1.45; }
.app-irow__copy { opacity: 0; transition: opacity var(--app-dur-fast); }
.app-irow:hover .app-irow__copy, .app-irow__copy:focus-visible { opacity: 1; }
.app-facts { margin: 0; display: grid; gap: 12px 20px; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); }
.app-facts dd { margin: 0; font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.app-facts .app-chip { white-space: normal; max-width: 100%; }
@container (max-width: 380px) {
  .app-facts { gap: 10px 16px; }
  .app-facts .app-fact--wide { grid-column: 1 / -1; }
}
@container (max-width: 260px) { .app-facts { grid-template-columns: minmax(0, 1fr); } }
.app-web__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.app-web__stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 16px; background: var(--app-bg); min-width: 0; }
.app-web__value { font: 600 19px/1.2 var(--brand-font-mono); white-space: nowrap; }
.app-web__label { font-size: 12px; color: var(--app-ink-2); line-height: 1.3; }
.app-web__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 9px 0; }
.app-web__addr { grid-column: 1; grid-row: 1; }
.app-web__detail { grid-column: 1; grid-row: 2; }
.app-web__fav { grid-column: 2; grid-row: 1 / span 2; }
.app-web__views { grid-column: 3; grid-row: 1 / span 2; }
.app-web__fav-text { display: inline; }
@container (max-width: 480px) {
  .app-web__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .app-web__stat { padding: 9px 12px; gap: 1px; }
  .app-web__value { font-size: 16px; }
  .app-web__label { font-size: 11.5px; }
  .app-web__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .app-web__views { grid-column: 2; grid-row: 1; justify-self: end; }
  .app-web__fav { grid-column: 2; grid-row: 2; justify-self: end; padding: 2px 7px; }
  .app-web__fav-text { display: none; }
  .app-web__detail { grid-column: 1; grid-row: 2; }
  .app-web__addr { grid-column: 1; grid-row: 1; }
}

.app-section__handle { cursor: grab; color: var(--app-ink-3); display: grid; place-items: center; width: 20px; height: 28px; margin-left: -6px; border-radius: 8px; opacity: .5; transition: opacity var(--app-dur-fast); }
.app-section:hover .app-section__handle, .app-section__handle:focus-visible { opacity: 1; }
.app-section__handle .ph { font-size: 18px; }
.app-section__icon { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--app-bg); color: var(--app-ink-2); }
.app-section__icon .ph { font-size: 16px; }
.app-section__headline { padding: 12px 14px; border-radius: 16px; font-size: 14px; font-weight: 700; line-height: 1.45; background: var(--app-bg); }
.app-section__more { white-space: nowrap; align-self: flex-start; display: inline-flex; gap: 6px; align-items: center; margin: -4px 0 -4px -8px; padding: 6px 8px; border: 0; border-radius: 999px; background: none; color: var(--app-accent-text); font: 700 12.5px var(--brand-font-body); cursor: pointer; }
.app-section__more:hover { background: var(--app-accent-soft); }
.app-section__more:focus-visible { outline: 2px solid var(--app-focus); outline-offset: 2px; }
.app-next { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 14px 16px 14px 14px; border-radius: var(--app-radius-card); background: var(--app-tint-amber); color: var(--app-ink); }
.app-next__label { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--app-tint-amber-ink); }
.app-next__text { font-size: 15.5px; font-weight: 700; line-height: 1.35; }
.app-seg { display: flex; padding: 3px; border-radius: 999px; background: var(--app-line-2); }
.app-seg button { height: 30px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer; font: 700 12.5px var(--brand-font-body); background: transparent; color: var(--app-ink-2); }
.app-seg button[aria-checked="true"] { background: var(--app-surface); color: var(--app-ink); box-shadow: var(--app-shadow); }
.app-seg button:focus-visible { outline: 2px solid var(--app-focus); outline-offset: 2px; }

/* Composer */
.app-composer { padding: 0; overflow: hidden; }
.app-composer__tabs { display: flex; gap: 2px; padding: 8px 8px 0; background: var(--app-bg); border-bottom: 1px solid var(--app-line); overflow-x: auto; scrollbar-width: none; }
.app-composer__tab { display: inline-flex; gap: 7px; align-items: center; white-space: nowrap; height: 40px; padding: 0 14px; border: 0; border-radius: 14px 14px 0 0; background: transparent; color: var(--app-ink-2); font: 600 13px var(--brand-font-body); cursor: pointer; margin-bottom: -1px; border-bottom: 1px solid transparent; }
.app-composer__tab .ph { font-size: 16px; }
.app-composer__tab:hover { color: var(--app-ink); background: var(--app-line-2); }
.app-composer__tab[aria-selected="true"] { background: var(--app-surface); color: var(--app-accent-text); font-weight: 700; border-bottom-color: var(--app-surface); }
.app-composer__tab:focus-visible { outline: 2px solid var(--app-focus); outline-offset: -2px; }
.app-composer__body { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 14px; }
.app-composer__meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--app-line-2); }
.app-composer__input { width: 100%; border: 0; outline: none; resize: none; background: transparent; color: var(--app-ink); font: 400 14.5px/1.55 var(--brand-font-body); padding: 0; min-height: 66px; }
.app-composer__input::placeholder { color: var(--app-ink-3); }
.app-composer:focus-within { box-shadow: var(--app-shadow), 0 0 0 2px var(--app-accent-soft); }
.app-composer__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
@container (max-width: 520px) { .app-composer__tab span { display: none; } .app-composer__tab[aria-selected="true"] span { display: inline; } }
.app-irow__link { border: 0; background: none; padding: 0; font: inherit; color: var(--app-accent-text); cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.app-irow__link:hover { text-decoration: underline; }

/* Stage pills: set data-stage on any pill or chip, then use --st-bg and --st-ink. */
[data-stage="connect"] { --st-bg: var(--stage-connect-bg); --st-ink: var(--stage-connect-ink); }
[data-stage="learn"] { --st-bg: var(--stage-learn-bg); --st-ink: var(--stage-learn-ink); }
[data-stage="ready"] { --st-bg: var(--stage-ready-bg); --st-ink: var(--stage-ready-ink); }
[data-stage="later"] { --st-bg: var(--stage-later-bg); --st-ink: var(--stage-later-ink); }
[data-stage="listed"] { --st-bg: var(--stage-listed-bg); --st-ink: var(--stage-listed-ink); }
[data-stage="pending"] { --st-bg: var(--stage-pending-bg); --st-ink: var(--stage-pending-ink); }
[data-stage="closed"] { --st-bg: var(--stage-closed-bg); --st-ink: var(--stage-closed-ink); }
[data-stage="archived"] { --st-bg: var(--stage-archived-bg); --st-ink: var(--stage-archived-ink); }
.app-stage { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: var(--app-radius-pill); background: var(--st-bg); color: var(--st-ink); font-size: 12.5px; font-weight: var(--app-weight-bold); white-space: nowrap; }
/* Channels: one color each, everywhere (inbox, timeline, composer, cards). */
.ch-text { --ch-bg: var(--app-tint-teal); --ch-ink: var(--app-tint-teal-ink); }
.ch-email { --ch-bg: var(--app-tint-indigo); --ch-ink: var(--app-tint-indigo-ink); }
.ch-call { --ch-bg: var(--app-tint-peach); --ch-ink: var(--app-tint-peach-ink); }