/* CRM design system on top of Pico.css.
 *
 * 1. Tokens: type, 4px spacing grid, radii, sizes, colours (light + dark), stage palette.
 * 2. Pico mapping: every Pico variable points at a token, so all pages share one look.
 * 3. Elements: type, links, forms, buttons, tables, cards.
 * 4. The app shell: rail (bottom tab bar on phones), top bar, popovers, command menu, toasts.
 * 5. The UI kit used by app/templates/_ui.html: chips, avatars, kbd, empty states, list rows.
 * 6. Page styles that used to live in <style> blocks inside templates.
 *
 * Rules: use tokens, never raw colours; 13px type with weight for hierarchy; hairline borders,
 * shadows only on things that float (popovers, dialogs, toasts); colour only where it means
 * something (stage, WhatsApp, unread, overdue).
 */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
             src: url("vendor/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
             src: url("vendor/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
             src: url("vendor/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
             src: url("vendor/fonts/inter-latin-700-normal.woff2") format("woff2"); }

/* ------------------------------------------------------------------ 1. tokens */
:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px; --fs-lg: 15px; --fs-xl: 18px; --fs-2xl: 22px;
  --lh: 1.45; --lh-tight: 1.25;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --r-xs: 2px; --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px;

  --row-h: 36px; --control-h: 32px; --control-h-sm: 26px;
  --topbar-h: 52px; --rail-w: 72px; --tabbar-h: 60px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --ease: cubic-bezier(.2, .8, .2, 1); --dur: 140ms;

  /* neutrals */
  --c-bg: #ffffff;
  --c-chrome: #f5f5f4;
  --c-subtle: #f8f8f7;
  --c-hover: #efefee;
  --c-press: #e7e7e5;
  --c-border: #ebebea;
  --c-border-strong: #d8d8d6;
  --c-text: #1c1c1e;
  --c-text-2: #5c5c63;
  --c-text-3: #6b6b73;
  --c-inverse: #ffffff;
  /* accent: actions and selection */
  --c-accent: #3456d1;
  --c-accent-hover: #2946b8;
  --c-accent-soft: #edf0fc;
  --c-accent-text: #2a47b5;
  --c-focus: rgba(52, 86, 209, .32);
  /* WhatsApp: chats, unread, send */
  --c-wa: #25d366;
  --c-wa-strong: #008069;
  --c-wa-soft: #e3f6ee;
  --c-wa-text: #0a7a55;
  /* status */
  --c-danger: #d6303a; --c-danger-soft: #fdecec; --c-danger-text: #b3242d;
  --c-warn: #d98a00;   --c-warn-soft: #fff4dc;   --c-warn-text: #8a5700;
  --c-success: #1f9a58; --c-success-soft: #e6f5ec; --c-success-text: #177a45;

  /* stage palette (Kommo colours each stage): solid, soft background, text */
  --t-blue: #3b82f6;   --t-blue-bg: #e8f0fe;   --t-blue-fg: #1e56c4;
  --t-amber: #eab308;  --t-amber-bg: #fdf5d8;  --t-amber-fg: #8a6300;
  --t-orange: #f97316; --t-orange-bg: #feeede; --t-orange-fg: #b44b0a;
  --t-pink: #ec4899;   --t-pink-bg: #fde8f2;   --t-pink-fg: #b0266a;
  --t-violet: #8b5cf6; --t-violet-bg: #f0eafe; --t-violet-fg: #6236c9;
  --t-teal: #14b8a6;   --t-teal-bg: #dff6f2;   --t-teal-fg: #0c7a6e;
  --t-green: #22a55b;  --t-green-bg: #e3f5ea;  --t-green-fg: #16713d;
  --t-red: #e5484d;    --t-red-bg: #fdeaea;    --t-red-fg: #b3242d;
  --t-grey: #8c8c93;   --t-grey-bg: #efefee;   --t-grey-fg: #5c5c63;

  --shadow-pop: 0 12px 32px rgba(17, 17, 26, .12), 0 2px 6px rgba(17, 17, 26, .06);
  --shadow-bar: 0 -1px 0 var(--c-border);
  --avatar-l: 90%; --avatar-fg-l: 28%; --avatar-s: 65%; /* 28%: worst hue (60) 5.3:1 on its disc; 32% gave 4.3 */
  color-scheme: light;
}

:root[data-theme="dark"] {
  --c-bg: #1a1a1c;
  --c-chrome: #131315;
  --c-subtle: #1f1f22;
  --c-hover: #26262a;
  --c-press: #2e2e33;
  --c-border: #2b2b30;
  --c-border-strong: #3a3a40;
  --c-text: #ededf0;
  --c-text-2: #a6a6ae;
  --c-text-3: #9090a0;
  --c-inverse: #111113;
  --c-accent: #6f8df2;
  --c-accent-hover: #88a1f6;
  --c-accent-soft: #22294a;
  --c-accent-text: #a3b6f8;
  --c-focus: rgba(111, 141, 242, .4);
  --c-wa-strong: #1fa96f;
  --c-wa-soft: #11302a;
  --c-wa-text: #4fd8a0;
  --c-danger: #f0555d; --c-danger-soft: #3a1a1d; --c-danger-text: #ff8a90;
  --c-warn: #f0a52a;   --c-warn-soft: #3a2d12;   --c-warn-text: #ffc766;
  --c-success: #3fbf77; --c-success-soft: #13301f; --c-success-text: #6fdc9d;
  --t-blue-bg: #1b2a47;   --t-blue-fg: #8cb4ff;
  --t-amber-bg: #3a3112;  --t-amber-fg: #f5d266;
  --t-orange-bg: #3d2413; --t-orange-fg: #ffac70;
  --t-pink-bg: #3d1a2c;   --t-pink-fg: #ff8cc2;
  --t-violet-bg: #2c2148; --t-violet-fg: #bfa6ff;
  --t-teal-bg: #12332f;   --t-teal-fg: #62dccc;
  --t-green-bg: #14301f;  --t-green-fg: #72d89c;
  --t-red-bg: #3a1a1d;    --t-red-fg: #ff8a90;
  --t-grey-bg: #2a2a2f;   --t-grey-fg: #b0b0b8;
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3);
  --avatar-l: 26%; --avatar-fg-l: 82%; --avatar-s: 40%;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg: #1a1a1c;
    --c-chrome: #131315;
    --c-subtle: #1f1f22;
    --c-hover: #26262a;
    --c-press: #2e2e33;
    --c-border: #2b2b30;
    --c-border-strong: #3a3a40;
    --c-text: #ededf0;
    --c-text-2: #a6a6ae;
    --c-text-3: #9090a0;
    --c-inverse: #111113;
    --c-accent: #6f8df2;
    --c-accent-hover: #88a1f6;
    --c-accent-soft: #22294a;
    --c-accent-text: #a3b6f8;
    --c-focus: rgba(111, 141, 242, .4);
    --c-wa-strong: #1fa96f;
    --c-wa-soft: #11302a;
    --c-wa-text: #4fd8a0;
    --c-danger: #f0555d; --c-danger-soft: #3a1a1d; --c-danger-text: #ff8a90;
    --c-warn: #f0a52a;   --c-warn-soft: #3a2d12;   --c-warn-text: #ffc766;
    --c-success: #3fbf77; --c-success-soft: #13301f; --c-success-text: #6fdc9d;
    --t-blue-bg: #1b2a47;   --t-blue-fg: #8cb4ff;
    --t-amber-bg: #3a3112;  --t-amber-fg: #f5d266;
    --t-orange-bg: #3d2413; --t-orange-fg: #ffac70;
    --t-pink-bg: #3d1a2c;   --t-pink-fg: #ff8cc2;
    --t-violet-bg: #2c2148; --t-violet-fg: #bfa6ff;
    --t-teal-bg: #12332f;   --t-teal-fg: #62dccc;
    --t-green-bg: #14301f;  --t-green-fg: #72d89c;
    --t-red-bg: #3a1a1d;    --t-red-fg: #ff8a90;
    --t-grey-bg: #2a2a2f;   --t-grey-fg: #b0b0b8;
    --shadow-pop: 0 12px 32px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3);
    --avatar-l: 26%; --avatar-fg-l: 82%; --avatar-s: 40%;
    color-scheme: dark;
  }
}

/* touch: primary actions are 44px wherever the pointer is a finger (phones set it too, below) */
@media (pointer: coarse) { :root { --touch: 44px; } }

/* ------------------------------------------------------------------ 2. Pico mapping */
/* (0,3,0) beats Pico's :root:not([data-theme=dark]) and its media-query font sizes. */
:root:root:root {
  --pico-font-family: var(--font-sans);
  --pico-font-family-sans-serif: var(--font-sans);
  --pico-font-family-monospace: var(--font-mono);
  --pico-font-size: var(--fs-md);
  --pico-line-height: var(--lh);
  --pico-font-weight: 400;
  --pico-border-radius: var(--r-sm);
  --pico-border-width: 1px;
  --pico-outline-width: 2px;
  --pico-spacing: var(--sp-4);
  --pico-typography-spacing-vertical: var(--sp-3);
  --pico-block-spacing-vertical: var(--sp-4);
  --pico-block-spacing-horizontal: var(--sp-4);
  --pico-grid-column-gap: var(--sp-4);
  --pico-grid-row-gap: var(--sp-3);
  --pico-form-element-spacing-vertical: 6px;
  --pico-form-element-spacing-horizontal: 10px;
  --pico-nav-element-spacing-vertical: var(--sp-2);
  --pico-nav-element-spacing-horizontal: var(--sp-2);
  --pico-nav-link-spacing-vertical: var(--sp-1);
  --pico-nav-link-spacing-horizontal: var(--sp-2);
  --pico-nav-breadcrumb-divider: "›";
  --pico-transition: var(--dur) var(--ease);
  --pico-text-decoration: none;

  --pico-background-color: var(--c-bg);
  --pico-color: var(--c-text);
  --pico-text-selection-color: var(--c-focus);
  --pico-muted-color: var(--c-text-2);
  --pico-muted-border-color: var(--c-border);
  --pico-primary: var(--c-accent-text);
  --pico-primary-background: var(--c-accent);
  --pico-primary-border: var(--c-accent);
  --pico-primary-underline: color-mix(in srgb, var(--c-accent-text) 40%, transparent);
  --pico-primary-hover: var(--c-accent-hover);
  --pico-primary-hover-background: var(--c-accent-hover);
  --pico-primary-hover-border: var(--c-accent-hover);
  --pico-primary-hover-underline: var(--c-accent-hover);
  --pico-primary-focus: var(--c-focus);
  --pico-primary-inverse: var(--c-inverse); /* dark: #111113 on the bright accent, 6.1:1 (white was 3.1) */
  --pico-secondary: var(--c-text-2);
  --pico-secondary-background: var(--c-bg);
  --pico-secondary-border: var(--c-border-strong);
  --pico-secondary-underline: var(--c-border-strong);
  --pico-secondary-hover: var(--c-text);
  --pico-secondary-hover-background: var(--c-hover);
  --pico-secondary-hover-border: var(--c-border-strong);
  --pico-secondary-hover-underline: var(--c-text-2);
  --pico-secondary-focus: var(--c-focus);
  --pico-secondary-inverse: var(--c-text);
  --pico-contrast: var(--c-text);
  --pico-contrast-background: var(--c-text);
  --pico-contrast-border: var(--c-text);
  --pico-contrast-underline: var(--c-text);
  --pico-contrast-hover: var(--c-text);
  --pico-contrast-hover-background: var(--c-text-2);
  --pico-contrast-hover-border: var(--c-text-2);
  --pico-contrast-hover-underline: var(--c-text);
  --pico-contrast-focus: var(--c-focus);
  --pico-contrast-inverse: var(--c-bg);
  --pico-box-shadow: none;
  --pico-h1-color: var(--c-text); --pico-h2-color: var(--c-text); --pico-h3-color: var(--c-text);
  --pico-h4-color: var(--c-text); --pico-h5-color: var(--c-text); --pico-h6-color: var(--c-text-2);
  --pico-mark-background-color: var(--c-warn-soft);
  --pico-mark-color: inherit;
  --pico-ins-color: var(--c-success-text);
  --pico-del-color: var(--c-danger-text);
  --pico-blockquote-border-color: var(--c-border-strong);
  --pico-blockquote-footer-color: var(--c-text-3);
  --pico-button-box-shadow: none;
  --pico-button-hover-box-shadow: none;
  --pico-table-border-color: var(--c-border);
  --pico-table-row-stripped-background-color: transparent;
  --pico-code-background-color: var(--c-subtle);
  --pico-code-color: var(--c-text-2);
  --pico-code-kbd-background-color: var(--c-bg);
  --pico-code-kbd-color: var(--c-text-2);
  --pico-form-element-background-color: var(--c-bg);
  --pico-form-element-selected-background-color: var(--c-hover);
  --pico-form-element-border-color: var(--c-border-strong);
  --pico-form-element-color: var(--c-text);
  --pico-form-element-placeholder-color: var(--c-text-3);
  --pico-form-element-active-background-color: var(--c-bg);
  --pico-form-element-active-border-color: var(--c-accent);
  --pico-form-element-focus-color: var(--c-focus);
  --pico-form-element-disabled-opacity: .55;
  --pico-form-element-invalid-border-color: var(--c-danger);
  --pico-form-element-invalid-active-border-color: var(--c-danger);
  --pico-form-element-invalid-focus-color: color-mix(in srgb, var(--c-danger) 30%, transparent);
  --pico-form-element-valid-border-color: var(--c-success);
  --pico-form-element-valid-active-border-color: var(--c-success);
  --pico-form-element-valid-focus-color: color-mix(in srgb, var(--c-success) 30%, transparent);
  --pico-switch-background-color: var(--c-border-strong);
  --pico-switch-checked-background-color: var(--c-accent);
  --pico-switch-color: #ffffff;
  --pico-switch-thumb-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  --pico-range-border-color: var(--c-border);
  --pico-range-active-border-color: var(--c-border-strong);
  --pico-range-thumb-border-color: var(--c-bg);
  --pico-range-thumb-color: var(--c-accent);
  --pico-range-thumb-active-color: var(--c-accent-hover);
  --pico-accordion-border-color: var(--c-border);
  --pico-accordion-active-summary-color: var(--c-text);
  --pico-accordion-close-summary-color: var(--c-text);
  --pico-accordion-open-summary-color: var(--c-text-2);
  --pico-card-background-color: var(--c-bg);
  --pico-card-border-color: var(--c-border);
  --pico-card-box-shadow: none;
  --pico-card-sectioning-background-color: var(--c-subtle);
  --pico-dropdown-background-color: var(--c-bg);
  --pico-dropdown-border-color: var(--c-border);
  --pico-dropdown-box-shadow: var(--shadow-pop);
  --pico-dropdown-color: var(--c-text);
  --pico-dropdown-hover-background-color: var(--c-hover);
  --pico-modal-overlay-background-color: rgba(15, 15, 20, .36);
  --pico-progress-background-color: var(--c-border);
  --pico-progress-color: var(--c-accent);
  --pico-tooltip-background-color: var(--c-text);
  --pico-tooltip-color: var(--c-bg);
}

/* ------------------------------------------------------------------ 3. elements */
html { font-size: var(--fs-md); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { background: var(--c-bg); color: var(--c-text); font-feature-settings: "cv11", "ss01"; }
::selection { background: var(--c-focus); }
.icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75;
        stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }

h1, h2, h3, h4, h5, h6 { --pico-font-weight: 600; letter-spacing: -0.01em; }
h1 { --pico-font-size: var(--fs-2xl); --pico-line-height: var(--lh-tight); }
h2 { --pico-font-size: var(--fs-xl); --pico-line-height: var(--lh-tight); }
h3 { --pico-font-size: var(--fs-lg); --pico-line-height: var(--lh-tight); }
h4, h5, h6 { --pico-font-size: var(--fs-md); --pico-line-height: var(--lh-tight); }
:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { margin-top: var(--sp-6); }
hgroup { margin-bottom: var(--sp-4); }
hgroup > :not(:first-child):last-child { font-size: var(--fs-md); margin-top: 2px; }
p, ul, ol, dl, pre, blockquote { margin-bottom: var(--sp-3); }
small, .small { font-size: var(--fs-sm); }
.muted { color: var(--c-text-2); }
.faint { color: var(--c-text-3); }
mark { padding: 0 2px; border-radius: var(--r-xs); }
kbd, .kbd-group kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
      padding: 0 4px; border: 1px solid var(--c-border-strong); border-bottom-width: 2px; border-radius: var(--r-sm);
      background: var(--c-bg); color: var(--c-text-2); font: 500 var(--fs-xs)/1 var(--font-sans); box-shadow: none; }
.kbd-group { display: inline-flex; gap: 2px; align-items: center; }
code { font-size: var(--fs-sm); }
hr { border-color: var(--c-border); margin: var(--sp-4) 0; }

a:not([role=button]) { text-decoration: none; }
:where(a:not([role=button])):is(:hover, :focus-visible) { text-decoration: underline; text-underline-offset: 2px; }
a.text-link { text-decoration: underline; text-underline-offset: 2px; } /* a link inside running text: underlined, not colour alone (WCAG 1.4.1) */
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }

/* forms */
label { font-size: var(--fs-md); font-weight: 500; color: var(--c-text); margin-bottom: var(--sp-3); }
label > :where(input, select, textarea) { margin-top: var(--sp-1); font-weight: 400; }
:root input:not([type=checkbox], [type=radio], [type=range], [type=file]), :root select {
  height: var(--control-h); padding-top: 0; padding-bottom: 0; font-size: var(--fs-md); border-radius: var(--r-sm);
}
:root select:not([multiple], [size]) { padding-right: 28px; background-position: center right 8px; background-size: 14px auto; }
:root textarea { font-size: var(--fs-md); border-radius: var(--r-sm); padding: 8px 10px; }
:root input[type=search] { padding-inline-start: 30px; background-position: center left 9px; background-size: 14px auto; }
input:not([type=checkbox], [type=radio]), select, textarea { margin-bottom: var(--sp-3); }
[type=checkbox], [type=radio] { --pico-border-width: 1.5px; width: 16px; height: 16px; margin-top: -2px; }
[type=checkbox][role=switch] { width: 28px; height: 16px; }
fieldset { margin-bottom: var(--sp-3); }
fieldset legend { font-weight: 600; font-size: var(--fs-md); margin-bottom: var(--sp-2); }
:where(input, select, textarea, fieldset, .grid) + small { margin-top: var(--sp-1); margin-bottom: var(--sp-3); font-size: var(--fs-sm); }

/* buttons: compact, never full width; .secondary / .outline are the neutral bordered button */
:root :is(button, [type=submit], [type=button], [type=reset], [role=button]) {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto;
  min-height: var(--control-h); height: auto; padding: 5px 12px; margin-bottom: 0;
  font-size: var(--fs-md); font-weight: 500; line-height: 20px; border-radius: var(--r-sm);
  white-space: nowrap; text-decoration: none; transition: background-color var(--dur), border-color var(--dur), color var(--dur);
}
:root :is(button, [type=submit], [type=button], [role=button]):is(.secondary, .outline) {
  --pico-background-color: var(--c-bg); --pico-border-color: var(--c-border-strong); --pico-color: var(--c-text);
}
:root :is(button, [type=submit], [type=button], [role=button]):is(.secondary, .outline):is(:hover, :active, :focus) {
  --pico-background-color: var(--c-hover); --pico-border-color: var(--c-border-strong); --pico-color: var(--c-text);
}
:root :is(button, [type=submit], [type=button], [role=button]).outline:not(.secondary) { --pico-color: var(--c-accent-text); }
:root :is(button, [type=submit], [role=button]).contrast { --pico-background-color: var(--c-text); --pico-border-color: var(--c-text); --pico-color: var(--c-bg); }
:root :is(button, [type=submit], [role=button]).danger, :root :is(button, [type=submit]).danger:hover {
  --pico-background-color: var(--c-danger); --pico-border-color: var(--c-danger); --pico-color: var(--c-inverse); }
:root :is(button, [role=button]).small, .inline-form button, :root .btn-sm {
  min-height: var(--control-h-sm); padding: 2px 8px; font-size: var(--fs-sm); line-height: 18px; }
.inline-form { display: inline; margin: 0; }
/* Any button that opens a WhatsApp chat is WhatsApp green, wherever a template puts it. */
:root a[role=button][href^="https://wa.me/"] { --pico-background-color: var(--c-wa-strong); --pico-border-color: var(--c-wa-strong); --pico-color: var(--c-inverse); }
:root a[role=button][href^="https://wa.me/"]:is(:hover, :focus) { --pico-background-color: #006d59; --pico-border-color: #006d59; }
:root a[role=button][href^="https://wa.me/"].outline { --pico-background-color: var(--c-wa-soft); --pico-border-color: transparent; --pico-color: var(--c-wa-text); }
button.link, .link-button { all: unset; cursor: pointer; color: var(--c-accent-text); font: inherit; }
button.link:hover { text-decoration: underline; }

/* tables: dense rows, hairlines, scroll inside the table's own box instead of the page */
figure { overflow-x: auto; margin-bottom: var(--sp-4); -webkit-overflow-scrolling: touch; }
.table-wrap, .overflow-auto { overflow-x: auto; }
table { font-size: var(--fs-md); margin-bottom: var(--sp-4); }
td, th { padding: 7px 12px; height: var(--row-h); vertical-align: middle; border-bottom: 1px solid var(--c-border); }
thead th, thead td, tfoot th, tfoot td { --pico-font-weight: 500; --pico-border-width: 1px; }
thead th { position: sticky; top: 0; z-index: 1; color: var(--c-text-2); font-size: var(--fs-sm); white-space: nowrap;
           background: var(--c-subtle); height: 32px; padding-top: 5px; padding-bottom: 5px; }
tbody tr { transition: background-color var(--dur); }
tbody tr:hover > td, tbody tr:hover > th { background: var(--c-subtle); }
table td a:not([role=button]) { color: var(--c-text); font-weight: 500; }
table td a:not([role=button]):hover { color: var(--c-accent-text); }
table.striped tbody tr:nth-child(odd) td, table.striped tbody tr:nth-child(odd) th { background: transparent; }
table.striped tbody tr:nth-child(odd):hover td, table.striped tbody tr:nth-child(odd):hover th { background: var(--c-subtle); }
td.num, th.num, .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* cards */
article { border: 1px solid var(--c-border); border-radius: var(--r-md); box-shadow: none; padding: var(--sp-4); margin-bottom: var(--sp-4); }
article > header, article > footer { margin-left: calc(var(--sp-4) * -1); margin-right: calc(var(--sp-4) * -1); padding: 10px var(--sp-4);
  background: var(--c-subtle); border-color: var(--c-border); }
article > header { margin-top: calc(var(--sp-4) * -1); margin-bottom: var(--sp-4); border-bottom: 1px solid var(--c-border); border-radius: var(--r-md) var(--r-md) 0 0; font-weight: 600; }
article > footer { margin-bottom: calc(var(--sp-4) * -1); margin-top: var(--sp-4); border-top: 1px solid var(--c-border); border-radius: 0 0 var(--r-md) var(--r-md); }
.grid { grid-column-gap: var(--sp-4); }

/* definition lists, breadcrumbs, pagination */
nav[aria-label=breadcrumb] { margin-bottom: var(--sp-2); font-size: var(--fs-sm); }
nav[aria-label=breadcrumb] ul li:not(:last-child)::after { color: var(--c-text-3); }
nav[aria-label=breadcrumb] a { color: var(--c-text-2); }
nav[aria-label=Pagination] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); margin: var(--sp-3) 0; }
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px var(--sp-4); }
dl.kv dt { font-weight: 500; color: var(--c-text-2); }
dl.kv dd { margin: 0; }
progress { height: 6px; border-radius: var(--r-pill); }
details summary { font-weight: 500; }

/* ------------------------------------------------------------------ 4. the shell */
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 6px 10px; background: var(--c-bg); border-radius: var(--r-sm); }
.skip-link:focus { left: 8px; }

body.has-shell { background: var(--c-chrome); }
.shell { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.main { min-width: 0; display: flex; flex-direction: column; background: var(--c-bg); }

/* rail */
.rail { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; align-items: center;
        gap: var(--sp-1); padding: 12px 0 12px; background: var(--c-chrome); border-right: 1px solid var(--c-border); z-index: 30; }
.rail ul { list-style: none; margin: 0; padding: 0; }
.rail li { list-style: none; margin: 0; padding: 0; }
.rail-brand { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 14px; border-radius: 10px;
              background: linear-gradient(145deg, var(--c-accent) 0%, #5b3fd0 100%); color: #fff; font-weight: 700; font-size: 16px;
              text-decoration: none; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); transition: transform var(--dur) var(--ease); }
.rail-brand:hover { text-decoration: none; transform: translateY(-1px); }
.rail-brand[aria-current=page] { box-shadow: 0 0 0 2px var(--c-chrome), 0 0 0 4px var(--c-accent); }
.rail-items { display: flex; flex-direction: column; gap: 2px; }
:root .rail-item { all: unset; box-sizing: border-box; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
             gap: 3px; width: 60px; min-height: 56px; padding: 6px 2px; border-radius: var(--r-md); cursor: pointer;
             color: var(--c-text-2); font-size: var(--fs-xs); font-weight: 500; line-height: 1.1; text-align: center;
             transition: background-color var(--dur), color var(--dur); -webkit-tap-highlight-color: transparent; }
:root .rail-item:hover { background: var(--c-hover); color: var(--c-text); text-decoration: none; }
:root .rail-item:active { background: var(--c-press); }
:root .rail-item:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }
:root .rail-item[aria-current=page], :root .rail-item[aria-expanded=true] { color: var(--c-accent-text); background: var(--c-accent-soft); }
:root .rail-item[aria-current=page] .icon { stroke-width: 2.1; }
.rail-icon { position: relative; display: grid; place-items: center; width: 24px; height: 24px; }
.rail-icon .icon { width: 22px; height: 22px; vertical-align: 0; }
.rail-label { white-space: nowrap; }
.rail-badge { position: absolute; top: -5px; left: 14px; min-width: 17px; height: 17px; padding: 0 5px; border-radius: var(--r-pill);
              background: var(--c-danger); color: var(--c-inverse); font: 700 10px/17px var(--font-sans); text-align: center;
              box-shadow: 0 0 0 2px var(--c-chrome); font-variant-numeric: tabular-nums; }
.rail-badge.wa { background: var(--c-wa-strong); }
.rail-badge[hidden] { display: none; }
.rail-badge.bump { animation: bump 420ms var(--ease); }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.3); } 100% { transform: scale(1); } }
.rail-foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; }
:root .rail-util { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 36px; height: 32px; border-radius: var(--r-md);
             color: var(--c-text-3); cursor: pointer; }
:root .rail-util:hover { background: var(--c-hover); color: var(--c-text); }
:root .rail-util .icon { width: 18px; height: 18px; vertical-align: 0; }
:root .rail-avatar, :root .topbar-avatar { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
             cursor: pointer; font: 600 12px/1 var(--font-sans); letter-spacing: .02em;
             background: hsl(var(--h, 220) var(--avatar-s) var(--avatar-l)); color: hsl(var(--h, 220) 45% var(--avatar-fg-l)); }
:root .rail-avatar:hover, :root .topbar-avatar:hover { box-shadow: 0 0 0 2px var(--c-chrome), 0 0 0 4px var(--c-border-strong); }
:root .rail-avatar:focus-visible, :root .topbar-avatar:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
:root .topbar-avatar { display: none; }

/* top bar */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--sp-3); height: var(--topbar-h);
          padding: 0 var(--sp-5); background: color-mix(in srgb, var(--c-bg) 92%, transparent);
          backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--c-border); }
.topbar-title { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; font-size: 14px; font-weight: 600; }
.topbar-title > * { min-width: 0; }
.crumb-root { display: inline-flex; align-items: center; gap: 8px; color: var(--c-text); font-weight: 600; white-space: nowrap; }
a.crumb-root:hover { text-decoration: none; color: var(--c-text); }
.crumb-root .icon { width: 18px; height: 18px; color: var(--c-text-2); vertical-align: 0; }
.crumb-sep { color: var(--c-text-3); font-weight: 400; }
.crumb-back { display: none; }
.crumb-leaf { color: var(--c-text-2); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumb-leaf.only { color: var(--c-text); font-weight: 600; }
.count-pill { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--r-pill);
              background: var(--c-hover); color: var(--c-text-2); font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; }
.count-pill.wa { background: var(--c-wa-soft); color: var(--c-wa-text); }
.count-pill.danger { background: var(--c-danger-soft); color: var(--c-danger-text); }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.topbar-actions > :where(a, button, form) { margin: 0; }
:root .search-trigger { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: clamp(200px, 26vw, 340px);
             height: var(--control-h); padding: 0 6px 0 10px; border: 1px solid var(--c-border); border-radius: var(--r-md);
             background: var(--c-subtle); color: var(--c-text-3); font-size: var(--fs-md); cursor: text; transition: border-color var(--dur), background var(--dur); }
:root .search-trigger:hover { border-color: var(--c-border-strong); background: var(--c-bg); }
:root .search-trigger:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }
.search-trigger .icon { width: 15px; height: 15px; vertical-align: 0; }
.search-placeholder { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.btn-new { display: inline-flex; align-items: center; gap: 6px; height: var(--control-h); padding: 0 6px 0 10px; border-radius: var(--r-md);
           background: var(--c-accent); color: var(--c-inverse); font-weight: 500; white-space: nowrap; transition: background var(--dur); }
a.btn-new:hover { background: var(--c-accent-hover); color: var(--c-inverse); text-decoration: none; }
.btn-new .icon { width: 16px; height: 16px; stroke-width: 2.2; vertical-align: 0; }
.btn-new kbd { border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .16); color: var(--c-inverse); border-bottom-width: 1px; margin-left: 2px; }

.content { flex: 1; width: 100%; max-width: 1480px; padding: var(--sp-5) var(--sp-6) var(--sp-10); }
.content > :first-child { margin-top: 0; }

/* popovers: More panel and account menu (bottom sheets on phones) */
.popover { position: fixed; z-index: 40; left: calc(var(--rail-w) + 8px); width: 280px; max-height: calc(100vh - 24px); overflow-y: auto;
           padding: 6px; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--shadow-pop);
           animation: pop-in 140ms var(--ease); }
.popover[hidden] { display: none; }
@keyframes pop-in { from { opacity: 0; transform: translateY(4px) scale(.98); } to { opacity: 1; transform: none; } }
.popover ul { list-style: none; margin: 0; padding: 0; }
.popover li { list-style: none; margin: 0; }
.popover-heading { margin: 4px 8px 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--c-text-3); letter-spacing: .03em; text-transform: uppercase; }
.sheet-handle { display: none; }
:root .menu-item { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 6px 8px;
             border-radius: var(--r-md); color: var(--c-text); font-size: var(--fs-md); cursor: pointer; }
:root .menu-item:hover, :root .menu-item:focus-visible { background: var(--c-hover); text-decoration: none; outline: none; }
:root .menu-item[aria-current=page] { background: var(--c-accent-soft); color: var(--c-accent-text); }
.menu-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-md); background: var(--c-subtle);
             border: 1px solid var(--c-border); color: var(--c-text-2); flex: none; }
.menu-item[aria-current=page] .menu-icon { color: var(--c-accent-text); border-color: transparent; background: var(--c-bg); }
.menu-icon .icon { width: 15px; height: 15px; vertical-align: 0; }
.menu-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.menu-text small { color: var(--c-text-3); font-size: var(--fs-xs); }
.menu-hint { margin-left: auto; }
.menu-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; }
.menu-form { margin: 0; }
.me-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--c-border); }
.me-head .me-who { display: flex; flex-direction: column; min-width: 0; }
.me-head small { color: var(--c-text-3); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root .segmented[role=group] { display: inline-flex; width: auto; margin: 0 0 0 auto; padding: 2px; border-radius: var(--r-md); background: var(--c-hover); gap: 2px; box-shadow: none; }
:root .segmented button { all: unset; display: grid; place-items: center; width: 28px; height: 24px; border-radius: 6px; color: var(--c-text-3); cursor: pointer; }
:root .segmented button[aria-pressed=true] { background: var(--c-bg); color: var(--c-text); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.segmented .icon { width: 14px; height: 14px; vertical-align: 0; }
.popover-scrim { display: none; }

/* command menu */
:root dialog.palette { position: fixed; inset: 0; display: none; align-items: flex-start; justify-content: center; width: 100%; height: 100%;
      min-width: 0; min-height: 0; max-width: none; max-height: none; margin: 0; padding: 12vh var(--sp-4) var(--sp-4); border: 0;
      background: rgba(15, 15, 20, .34); backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); }
:root dialog.palette[open] { display: flex; }
dialog.palette::backdrop { background: transparent; }
.palette-box { display: flex; flex-direction: column; width: 100%; max-width: 640px; max-height: min(600px, 76vh); overflow: hidden;
               background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--shadow-pop);
               animation: pop-in 140ms var(--ease); }
.palette-input { display: flex; align-items: center; gap: 10px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--c-border); }
.palette-input > .icon { width: 18px; height: 18px; color: var(--c-text-3); vertical-align: 0; }
:root .palette-input input { flex: 1; height: 54px; margin: 0; padding: 0; border: 0; box-shadow: none; background: transparent; font-size: var(--fs-lg); }
:root .palette-input input:is(:focus, :focus-visible) { box-shadow: none; outline: none; --pico-box-shadow: none; }
:root .palette-close { all: unset; cursor: pointer; padding: 2px 6px; border: 1px solid var(--c-border-strong); border-radius: var(--r-sm);
             font-size: var(--fs-xs); font-weight: 500; color: var(--c-text-3); }
.when-phone { display: none; }
.palette-body { flex: 1; overflow-y: auto; padding: 6px; overscroll-behavior: contain; }
.palette-group[hidden] { display: none; }
.palette-heading { margin: 0; padding: 10px 10px 4px; font-size: var(--fs-xs); font-weight: 600; color: var(--c-text-3); letter-spacing: .02em; }
:root .palette-item { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 5px 10px;
             border-radius: var(--r-md); color: var(--c-text); font-size: var(--fs-md); cursor: pointer; scroll-margin: 8px; }
:root .palette-item[hidden] { display: none; }
:root .palette-item[aria-selected=true] { background: var(--c-hover); }
:root .palette-item:hover { text-decoration: none; }
.palette-item.subtle { color: var(--c-text-2); }
.pi-icon { display: grid; place-items: center; width: 24px; height: 24px; color: var(--c-text-2); flex: none; }
.pi-icon .icon { vertical-align: 0; }
.pi-icon.wa { color: var(--c-wa-text); }
.pi-icon.danger { color: var(--c-danger-text); }
.pi-icon.boxed { border-radius: var(--r-sm); background: var(--c-subtle); border: 1px solid var(--c-border); }
.pi-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pi-title, .pi-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-title { font-weight: 500; }
.pi-sub { font-size: var(--fs-sm); color: var(--c-text-3); }
.palette-item mark { background: transparent; color: var(--c-accent-text); font-weight: 600; padding: 0; }
.pi-hint { display: inline-flex; align-items: center; gap: 4px; color: var(--c-text-3); font-size: var(--fs-xs); }
.pi-wa { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-md); color: var(--c-wa-text); flex: none; }
.pi-wa:hover { background: var(--c-wa-soft); }
.pi-wa .icon { width: 18px; height: 18px; vertical-align: 0; }
.palette-nohits { margin: 0; padding: 6px 10px 8px; color: var(--c-text-3); font-size: var(--fs-sm); }
.palette-none { margin: 0; padding: 24px 16px; text-align: center; color: var(--c-text-3); }
.palette-foot { display: flex; gap: 16px; align-items: center; padding: 8px 16px; border-top: 1px solid var(--c-border);
                background: var(--c-subtle); color: var(--c-text-3); font-size: var(--fs-xs); }
.palette-foot > span { display: inline-flex; align-items: center; gap: 6px; }
.palette-foot .foot-wa { display: none; }
.palette-box.has-wa .foot-wa { display: inline-flex; }
.palette-foot .foot-esc { margin-left: auto; }

/* generic small dialog (keyboard shortcuts) */
:root dialog.sheet-dialog { padding: var(--sp-4); }
.sheet-box { width: 100%; max-width: 460px; max-height: 80vh; overflow: auto; background: var(--c-bg); border: 1px solid var(--c-border);
             border-radius: var(--r-lg); box-shadow: var(--shadow-pop); padding: var(--sp-4) var(--sp-5); animation: pop-in 140ms var(--ease); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.sheet-head h3 { margin: 0; }
:root .icon-btn { all: unset; display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-md); color: var(--c-text-2); cursor: pointer; }
:root .icon-btn:hover { background: var(--c-hover); color: var(--c-text); }
:root .icon-btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 0; }
.shortcut-list { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; align-items: center; margin: 0; }
.shortcut-list dt { display: flex; align-items: center; gap: 4px; font-weight: 400; color: var(--c-text-3); font-size: var(--fs-sm); }
.shortcut-list dd { margin: 0; }

/* toasts (app.js `toast()`; app/web/feedback.py sends them). Dark on light and a step lighter on
   dark, like a system notification: one line of what happened, a detail line, Undo or a link. */
.toasts { position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 60; display: flex; flex-direction: column; gap: var(--sp-2);
          align-items: flex-end; pointer-events: none; }
.toast { position: relative; overflow: hidden; pointer-events: auto; display: flex; align-items: center; gap: 10px;
         min-width: 280px; max-width: min(460px, calc(100vw - 32px)); padding: 10px 8px 10px 12px; border-radius: var(--r-md);
         background: #1d1d20; color: #f4f4f5; font-size: var(--fs-md); line-height: 1.35;
         box-shadow: 0 16px 40px rgba(17, 17, 26, .22), 0 2px 6px rgba(17, 17, 26, .12), inset 0 0 0 1px rgba(255, 255, 255, .06);
         animation: toast-in 220ms var(--ease); }
:root[data-theme="dark"] .toast { background: #2e2e34; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .toast { background: #2e2e34; } }
.toast.leaving { animation: toast-out 180ms var(--ease) forwards; }
.toast .icon { width: 16px; height: 16px; vertical-align: 0; }
.toast-icon { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
              background: rgba(74, 222, 128, .16); color: #4ade80; }
.toast-icon .icon { width: 14px; height: 14px; stroke-width: 2.4; }
.toast.error .toast-icon { background: rgba(255, 122, 130, .16); color: #ff7a82; }
.toast.warning .toast-icon { background: rgba(250, 204, 21, .16); color: #facc15; }
.toast.info .toast-icon { background: rgba(157, 180, 255, .16); color: #9db4ff; }
.toast-body { flex: 1; min-width: 0; }
.toast p { color: inherit; }
.toast .toast-msg { margin: 0; font-weight: 500; color: #f4f4f5; }
.toast .toast-detail { margin: 1px 0 0; color: #a1a1aa; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast-actions { display: flex; align-items: center; gap: 2px; flex: none; }
:root .toast .toast-undo, .toast .toast-link { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; height: 28px;
  padding: 0 9px; border-radius: var(--r-sm); color: #b9c8ff; font-weight: 600; font-size: var(--fs-md); cursor: pointer; white-space: nowrap; }
:root .toast .toast-undo:hover, .toast .toast-link:hover { background: rgba(255, 255, 255, .1); color: #fff; text-decoration: none; }
:root .toast .toast-undo:focus-visible, .toast .toast-link:focus-visible { outline: 2px solid #9db4ff; outline-offset: 0; }
:root .toast .toast-undo[aria-busy=true] { opacity: .7; cursor: progress; }
:root .toast .toast-undo[aria-busy=true]::before { display: none; }
.toast .toast-undo .icon { width: 15px; height: 15px; }
.toast .toast-undo kbd { height: 18px; min-width: 0; padding: 0 5px; border: 1px solid rgba(255, 255, 255, .18); border-bottom-width: 1px;
  background: rgba(255, 255, 255, .06); color: #d4d4d8; font-size: 10px; }
:root .toast .toast-close { all: unset; cursor: pointer; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-sm); color: #8b8b93; }
:root .toast .toast-close:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.toast-timer { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; transform-origin: left; background: rgba(255, 255, 255, .28);
               animation: toast-timer linear forwards; animation-duration: 5s; }
.toast.error .toast-timer { background: rgba(255, 122, 130, .55); }
.toast.has-undo .toast-timer { background: #9db4ff; }
.toast:hover .toast-timer, .toast:focus-within .toast-timer, .toast.paused .toast-timer { animation-play-state: paused; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px) scale(.98); } }
@keyframes toast-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .toast, .toast.leaving { animation-duration: 1ms; } }

/* ------------------------------------------------------------------ 5. UI kit */
.chip, .badge { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: var(--r-sm);
        background: var(--t-grey-bg); color: var(--t-grey-fg); font-size: var(--fs-sm); font-weight: 500; line-height: 1; white-space: nowrap; vertical-align: 1px; }
.chip .icon { width: 12px; height: 12px; vertical-align: 0; }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.tone-blue { background: var(--t-blue-bg); color: var(--t-blue-fg); }
.tone-amber { background: var(--t-amber-bg); color: var(--t-amber-fg); }
.tone-orange { background: var(--t-orange-bg); color: var(--t-orange-fg); }
.tone-pink { background: var(--t-pink-bg); color: var(--t-pink-fg); }
.tone-violet { background: var(--t-violet-bg); color: var(--t-violet-fg); }
.tone-teal { background: var(--t-teal-bg); color: var(--t-teal-fg); }
.tone-green { background: var(--t-green-bg); color: var(--t-green-fg); }
.tone-red { background: var(--t-red-bg); color: var(--t-red-fg); }
.tone-grey, .tone-neutral { background: var(--t-grey-bg); color: var(--t-grey-fg); }
.tone-wa { background: var(--c-wa-soft); color: var(--c-wa-text); }

.avatar { display: inline-grid; place-items: center; flex: none; border-radius: 50%; font-weight: 600; letter-spacing: .01em;
          background: hsl(var(--h, 220) var(--avatar-s) var(--avatar-l)); color: hsl(var(--h, 220) 45% var(--avatar-fg-l)); }
.avatar-sm { width: 24px; height: 24px; font-size: 10px; }
.avatar-md { width: 32px; height: 32px; font-size: 12px; }
.avatar-lg { width: 40px; height: 40px; font-size: 14px; }

/* empty states: a drawing (ui.illustration), what is missing, why, and the next step */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px var(--sp-4) 56px; margin: 0; }
.empty-state .ill { margin-bottom: var(--sp-4); }
.empty-state.compact { padding: var(--sp-6) var(--sp-4); }
.empty-icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: var(--sp-3); border-radius: 12px; }
.empty-icon .icon { width: 20px; height: 20px; vertical-align: 0; }
.empty-title { margin: 0 0 4px; font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.01em; }
.empty-state.compact .empty-title { font-size: var(--fs-md); }
.empty-body { margin: 0 0 var(--sp-4); max-width: 400px; color: var(--c-text-2); text-wrap: pretty; }
.empty-state.compact .empty-body { margin-bottom: var(--sp-3); }
.empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); }
.empty-actions .icon { width: 15px; height: 15px; }
td > .empty-state { padding-block: 36px 40px; }
tr.empty-row:hover > td { background: transparent; }
.empty-line { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--sp-3); }
.empty-line .icon { color: var(--c-text-3); }

/* ui.illustration: two record cards and a badge, all from tokens */
.ill { width: 160px; height: 112px; flex: none; overflow: visible; }
.ill-sm { width: 120px; height: 84px; }
.ill-lg { width: 208px; height: 146px; }
.ill-bg { fill: var(--ill-soft); }
.ill-face { fill: var(--c-bg); stroke: var(--c-border-strong); stroke-width: 1; }
.ill-back { opacity: .75; }
.ill-line { fill: var(--c-border-strong); }
.ill-line.faint, .ill-dot { fill: var(--c-border); }
.ill-dot.tone { fill: var(--ill-mid); }
.ill-badge circle { fill: var(--ill-strong); stroke: var(--c-bg); stroke-width: 3; }
.ill-icon { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ill-blue   { --ill-soft: var(--t-blue-bg);   --ill-mid: var(--t-blue);   --ill-strong: var(--c-accent); }
.ill-wa     { --ill-soft: var(--c-wa-soft);   --ill-mid: var(--c-wa);     --ill-strong: var(--c-wa-strong); }
.ill-amber  { --ill-soft: var(--t-amber-bg);  --ill-mid: var(--t-amber);  --ill-strong: var(--c-warn); }
.ill-red    { --ill-soft: var(--t-red-bg);    --ill-mid: var(--t-red);    --ill-strong: var(--c-danger); }
.ill-violet { --ill-soft: var(--t-violet-bg); --ill-mid: var(--t-violet); --ill-strong: var(--t-violet); }
.ill-green  { --ill-soft: var(--t-green-bg);  --ill-mid: var(--t-green);  --ill-strong: var(--c-success); }
.ill-grey   { --ill-soft: var(--t-grey-bg);   --ill-mid: var(--t-grey);   --ill-strong: var(--c-text-2); }

.page-head { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.page-head h2 { margin: 0; }
.page-head p { margin: 2px 0 0; }
.page-head-actions, .actions, .toolbar, .quick-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.actions, .toolbar, .quick-actions { margin-bottom: var(--sp-4); }
:where(.actions, .toolbar, .quick-actions, .page-head-actions) :is(form, a, button) { margin: 0; }
.section-title { font-size: var(--fs-sm); font-weight: 600; color: var(--c-text-2); margin: var(--sp-5) 0 var(--sp-2); }

.list-rows { list-style: none; margin: 0 0 var(--sp-4); padding: 0; border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; }
.list-row { list-style: none; display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; margin: 0; padding: 8px var(--sp-3);
            border-bottom: 1px solid var(--c-border); background: var(--c-bg); transition: background var(--dur); }
.list-row:last-child { border-bottom: 0; }
.list-row:hover { background: var(--c-subtle); }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--c-text); }
a.row-main:hover { text-decoration: none; }
a.row-main:hover .row-title { color: var(--c-accent-text); }
.row-title { display: flex; align-items: center; gap: 6px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-sub { color: var(--c-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-md); }
.row-age { display: inline-flex; align-items: center; gap: 4px; color: var(--c-text-3); font-size: var(--fs-sm); white-space: nowrap; font-variant-numeric: tabular-nums; }
.row-age .icon { width: 13px; height: 13px; vertical-align: 0; }
.row-age.late { color: var(--c-danger-text); font-weight: 500; }
.row-check { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c-danger-soft); color: var(--c-danger-text); flex: none; }
.row-check .icon { width: 17px; height: 17px; vertical-align: 0; }
.btn-wa { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: var(--r-md); flex: none;
          background: var(--c-wa-soft); color: var(--c-wa-text); font-weight: 500; font-size: var(--fs-md); white-space: nowrap; }
a.btn-wa:hover { text-decoration: none; background: var(--c-wa-strong); color: var(--c-inverse); }
.btn-wa .icon { width: 16px; height: 16px; vertical-align: 0; }

/* callouts (ui.callout / ui.errors): inline notices that stay put, like Kommo's callout. What a
   mutation did is a toast; what the person must read or fix while looking at a form is a callout. */
.callout { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; margin-bottom: var(--sp-4); border-radius: var(--r-md);
           background: var(--c-warn-soft); color: var(--c-text); border: 1px solid color-mix(in srgb, var(--c-warn) 26%, transparent);
           line-height: 1.45; }
.callout-icon { flex: none; display: grid; place-items: center; width: 20px; height: 20px; color: var(--c-warn-text); }
.callout-icon .icon { width: 18px; height: 18px; vertical-align: 0; }
.callout-body { flex: 1; min-width: 0; padding-top: 1px; }
.callout-title { display: block; font-weight: 600; }
.callout-title + .callout-text { display: block; }
.callout-body ul { margin: 4px 0 0; padding-left: 18px; }
.callout-body li { list-style: disc; margin: 0; }
.callout-action { flex: none; align-self: center; font-weight: 600; color: var(--c-accent-text); white-space: nowrap; }
:root .callout-close { all: unset; flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r-sm); color: var(--c-text-2); cursor: pointer; }
:root .callout-close:hover { background: color-mix(in srgb, var(--c-text) 8%, transparent); color: var(--c-text); }
.callout-danger { background: var(--c-danger-soft); border-color: color-mix(in srgb, var(--c-danger) 28%, transparent); }
.callout-danger .callout-icon { color: var(--c-danger-text); }
.callout-danger .callout-body { color: var(--c-danger-text); }
.callout-info { background: var(--c-accent-soft); border-color: color-mix(in srgb, var(--c-accent) 22%, transparent); }
.callout-info .callout-icon { color: var(--c-accent-text); }
.callout-success { background: var(--c-success-soft); border-color: color-mix(in srgb, var(--c-success) 26%, transparent); }
.callout-success .callout-icon { color: var(--c-success-text); }
.callout[hidden] { display: none; }
/* destructive actions: they happen at once and the toast offers Undo, so no confirm() dialog */
:root :is(button, [type=submit], [role=button]).danger-outline { --pico-background-color: var(--c-bg); --pico-border-color: color-mix(in srgb, var(--c-danger) 40%, var(--c-border-strong)); --pico-color: var(--c-danger-text); }
:root :is(button, [type=submit], [role=button]).danger-outline:is(:hover, :focus-visible) { --pico-background-color: var(--c-danger-soft); --pico-border-color: var(--c-danger); --pico-color: var(--c-danger-text); }
.undo-hint { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 0 0 0 var(--sp-3); color: var(--c-text-3); font-size: var(--fs-sm); vertical-align: middle; }
.undo-hint .icon { width: 13px; height: 13px; vertical-align: 0; }
.field-error { color: var(--c-danger-text); display: block; font-size: var(--fs-sm); }

/* ------------------------------------------------------------------ 6. page styles (were <style> blocks) */
/* leads, campaigns, QR */
.filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-3); }
:root .filters > * { flex: 0 1 180px; margin: 0; }
:root .filters > input[type=search] { flex: 1 1 220px; }
:root .filters > label { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 500; white-space: nowrap; }
.filters label input { margin: 0; }
:root .filters > button { flex: 0 0 auto; }
.status-select { width: auto; min-width: 118px; margin: 0; }
:root select.status-select { height: 24px; padding: 0 24px 0 8px; font-size: var(--fs-sm); font-weight: 500; border-radius: var(--r-sm);
         border-color: transparent; background-color: var(--t-grey-bg); color: var(--t-grey-fg); background-position: center right 6px; background-size: 12px auto; }
:root select.status-select:has(option[value=new]:checked) { background-color: var(--t-blue-bg); color: var(--t-blue-fg); }
:root select.status-select:has(option[value=contacted]:checked) { background-color: var(--t-amber-bg); color: var(--t-amber-fg); }
:root select.status-select:has(option[value=qualified]:checked) { background-color: var(--t-violet-bg); color: var(--t-violet-fg); }
:root select.status-select:has(option[value=unqualified]:checked) { background-color: var(--t-grey-bg); color: var(--t-grey-fg); }
:root select.status-select:has(option[value=spam]:checked) { background-color: var(--t-red-bg); color: var(--t-red-fg); }
:root select.status-select:hover { border-color: var(--c-border-strong); }
.thread { list-style: none; padding: 0; }
.thread li { list-style: none; border-left: 3px solid var(--c-wa); padding: 4px 12px; margin-bottom: var(--sp-3); }
.thread li.rejected { border-left-color: var(--c-danger); }
.thread li.outbound { border-left-color: var(--c-accent); }
.mono { font-family: var(--font-mono); font-size: var(--fs-sm); word-break: break-all; }
textarea.mono { min-height: 16rem; }

.view-bar { padding: 0 0 var(--sp-3); margin-bottom: var(--sp-3); border-bottom: 1px solid var(--c-border); }
:root .view-bar > select { flex: 0 1 170px; }
:root .view-bar > input[type=search] { flex: 0 1 280px; }
.switch-label { font-weight: 500; color: var(--c-text-2); }
.table-card { border: 1px solid var(--c-border); border-radius: var(--r-md); }
.table-card table { margin: 0; }
.table-card tbody tr:last-child td { border-bottom: 0; }
.table-card thead th:first-child { border-top-left-radius: var(--r-md); }
.table-card thead th:last-child { border-top-right-radius: var(--r-md); }
.tabular { font-variant-numeric: tabular-nums; color: var(--c-text-2); }
.owner { display: inline-flex; align-items: center; gap: 8px; }
table td a.quiet-link, .quiet-link { color: var(--c-text); font-weight: 400; }

/* contacts */
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { list-style: none; border-left: 2px solid var(--c-border); padding: 0 0 12px 12px; }
.timeline li small { display: block; }
/* A colleague's contact (S0 ownership): the details as a list instead of the edit form. */
dl.read-only dt { font-size: var(--fs-sm); color: var(--c-text-3); }
dl.read-only dd { margin: 0 0 var(--sp-2); white-space: pre-line; }

/* drafts */
.draft-status-draft { background: var(--t-blue-bg); color: var(--t-blue-fg); }
.draft-status-sent { background: var(--t-green-bg); color: var(--t-green-fg); }
.draft-status-discarded { background: var(--t-grey-bg); color: var(--t-grey-fg); }
.draft-context { white-space: pre-wrap; font-size: var(--fs-sm); max-height: 28rem; overflow: auto; }
.draft-body { white-space: pre-wrap; }
nav.draft-tabs a[aria-current="page"] { font-weight: 600; color: var(--c-text); }

/* imports */
.status { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; }
.status-new { background: var(--t-green-bg); color: var(--t-green-fg); }
.status-duplicate_db, .status-duplicate_file { background: var(--t-amber-bg); color: var(--t-amber-fg); }
.status-invalid { background: var(--t-red-bg); color: var(--t-red-fg); }
.status-colleague { background: var(--t-grey-bg); color: var(--t-grey-fg); }
.mapping select { min-width: 9rem; margin: 0; }
.strategy label { display: block; margin-bottom: var(--sp-2); }

/* KPIs and dashboard */
.grid-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-6); }
.grid-stats article { margin: 0; padding: 12px 14px; text-align: left; }
.grid-stats article small { display: block; color: var(--c-text-3); }
.grid-stats .value { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.grid-stats article progress { margin: 6px 0 2px; }
.stat-label { color: var(--c-text-2); font-size: var(--fs-sm); font-weight: 500; }
#targets { margin-top: var(--sp-8); }
.nowrap { white-space: nowrap; }
td progress, th progress { display: block; width: 100%; min-width: 4rem; max-width: 7rem; margin: 4px 0 0; }
tr[aria-current="true"] td { font-weight: 600; }
.period-form { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: end; margin-bottom: var(--sp-4); }
.period-form label { margin: 0; }
.period-form select, .period-form input, .period-form button { margin: 0; width: auto; }
.chart { display: block; width: 100%; height: auto; max-height: 16rem; }
.chart text { fill: var(--c-text-3); font-size: 11px; font-family: inherit; }
.chart text.value { fill: var(--c-text); font-weight: 600; }
.chart text.weekend { opacity: .6; }
.chart text.halo { paint-order: stroke; stroke: var(--c-bg); stroke-width: 4px; stroke-linejoin: round; }
.chart .grid line { stroke: var(--c-border); stroke-width: 1; }
.chart .bar path { fill: var(--c-accent); }
.chart .bar:hover path, .chart .bar:focus path { fill: var(--c-accent-hover); }
.chart .bar:focus { outline: none; }
.chart .bar .hit { fill: transparent; }
.chart .target { stroke: var(--c-text-3); stroke-width: 1; stroke-dasharray: 4 3; }
.meter-row { display: grid; grid-template-columns: 8rem 1fr 3rem; gap: var(--sp-2); align-items: center; margin-bottom: 6px; }
.meter { height: 6px; border-radius: var(--r-pill); background: var(--c-border); }
.meter > span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--c-accent); }
ul.activity { padding-left: 0; }
ul.activity li { list-style: none; padding: 8px 0; border-bottom: 1px solid var(--c-border); }

/* search page (no-JS fallback of the command menu) */
.search-page-form { display: flex; gap: var(--sp-2); max-width: 560px; margin-bottom: var(--sp-4); }
.search-page-form input { margin: 0; }

/* public lead forms: larger type for customers on their phones */
.public-page { max-width: 34rem; margin: var(--sp-6) auto; padding: var(--sp-6); font-size: 15px; }
.public-page h2 { margin-bottom: var(--sp-2); }
.public-page :is(input:not([type=checkbox], [type=radio]), select, textarea) { font-size: 16px; height: 42px; }
.public-page textarea { height: auto; }
.public-page button[type=submit] { width: 100%; min-height: 44px; font-size: 15px; }
.hp-field { position: absolute !important; left: -10000px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }
.public-page .field-error { margin: -8px 0 12px; }
.public-footer { text-align: center; font-size: var(--fs-sm); margin-top: var(--sp-4); }

/* sign-in and public pages (no shell) */
body.no-shell { background: var(--c-chrome); min-height: 100vh; min-height: 100dvh; }
.auth-wrap { max-width: 380px; margin: 10vh auto 0; }
.auth-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: var(--sp-5); font-size: var(--fs-lg); font-weight: 600; }
.auth-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: #fff; font-weight: 700;
             background: linear-gradient(145deg, var(--c-accent) 0%, #5b3fd0 100%); }
.auth-card { padding: var(--sp-6); border-radius: var(--r-lg); }
.auth-card h2 { margin-bottom: var(--sp-4); }
.auth-card button[type=submit] { width: 100%; margin-top: var(--sp-1); }
body.no-shell main.container { max-width: 1100px; padding-top: var(--sp-6); padding-bottom: var(--sp-10); }
body.no-shell article { background: var(--c-bg); }

/* optimistic feedback (app.js): busy buttons, the HTMX progress bar, a glow when a save lands */
:root :is(button, [role=button]):is(.secondary, .outline, .danger-outline)[aria-busy=true]::before { filter: none; }
.progress-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 70; height: 2px; pointer-events: none; transform-origin: left;
                transform: scaleX(0); opacity: 0; background: var(--c-accent); }
.progress-bar.running { opacity: 1; animation: progress-crawl 8s cubic-bezier(.1, .7, .2, 1) forwards; }
.progress-bar.done { opacity: 0; transform: scaleX(1); transition: transform 150ms ease, opacity 250ms 150ms ease; }
@keyframes progress-crawl { from { transform: scaleX(0); } to { transform: scaleX(.92); } }
[data-saved-flash].saving select { opacity: .65; }
[data-saved-flash].saved { animation: saved-glow 1.1s var(--ease); border-radius: var(--r-sm); }
@keyframes saved-glow { 0% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-success) 45%, transparent); } 100% { box-shadow: 0 0 0 3px transparent; } }

/* error pages (app/web/errors.py, errors/error.html) */
.error-page { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 540px; margin: 7vh auto 48px; padding: 0 var(--sp-4); }
.error-page.standalone { margin-top: 12vh; }
.error-page .ill { margin-bottom: var(--sp-5); }
.error-code { margin: 0 0 6px; color: var(--c-text-3); font-size: var(--fs-sm); font-weight: 500; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.error-title { margin: 0 0 var(--sp-2); font-size: var(--fs-2xl); line-height: var(--lh-tight); letter-spacing: -0.015em; text-wrap: balance; }
.error-body { margin: 0 0 var(--sp-5); color: var(--c-text-2); max-width: 460px; text-wrap: pretty; }
.error-page .callout { text-align: left; width: 100%; margin-bottom: var(--sp-4); }
.error-hint { display: inline-flex; align-items: center; gap: 6px; margin: -8px 0 var(--sp-4); color: var(--c-text-2); font-size: var(--fs-sm); }
.error-hint .icon { width: 14px; height: 14px; vertical-align: 0; }
.error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.error-actions .icon { width: 15px; height: 15px; }
.error-search { position: relative; display: flex; align-items: center; width: 100%; max-width: 420px; margin: 0 0 var(--sp-5); }
.error-search > .icon { position: absolute; left: 11px; z-index: 1; color: var(--c-text-3); pointer-events: none; }
:root .error-search input[type=search] { width: 100%; height: 38px; margin: 0; padding-left: 34px; padding-right: 64px; background-image: none; border-radius: var(--r-md); }
.error-search > span { position: absolute; right: 9px; z-index: 1; }
.error-recent { width: 100%; max-width: 420px; text-align: left; }
.error-recent-title { margin: 0 0 6px; color: var(--c-text-3); font-size: var(--fs-sm); font-weight: 500; }
.error-recent ul { margin: 0; padding: 0; border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; }
.error-recent li { list-style: none; margin: 0; border-bottom: 1px solid var(--c-border); }
.error-recent li:last-child { border-bottom: 0; }
.error-recent a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; color: var(--c-text); }
.error-recent a:hover { background: var(--c-subtle); text-decoration: none; }
.error-recent .icon { color: var(--c-text-3); }
.rr-title { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-kind { color: var(--c-text-3); font-size: var(--fs-sm); }
.error-ref { margin: var(--sp-2) 0 0; color: var(--c-text-3); font-size: var(--fs-sm); }
.error-ref code { font-size: var(--fs-sm); background: var(--c-subtle); padding: 1px 6px; border-radius: var(--r-sm); }

/* ------------------------------------------------------------------ phones */
@media (max-width: 767px) {
  html { font-size: 14px; }
  :root:root:root { --pico-font-size: 14px; }
  :root { --control-h: 44px; --row-h: 44px; --touch: 44px; }
  /* 16px inputs stop iOS zooming the page on focus */
  :root input:not([type=checkbox], [type=radio], [type=range], [type=file]), :root select, :root textarea { font-size: 16px; }

  .shell { display: block; }
  .main { min-height: 100vh; min-height: 100dvh; }
  .rail { position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: calc(var(--tabbar-h) + var(--safe-b)); flex-direction: row;
          padding: 4px 4px var(--safe-b); border-right: 0; border-top: 1px solid var(--c-border);
          background: color-mix(in srgb, var(--c-bg) 94%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); }
  .rail-brand, .rail-foot { display: none; }
  .rail-items { flex-direction: row; justify-content: space-around; width: 100%; gap: 0; }
  :root .rail-items { margin: 0; } /* G3.2: not Pico's `nav ul:first-of-type` -8 px (My day sat 4 px off screen) */
  .rail-items > li { flex: 1; display: flex; justify-content: center; }
  :root .rail-item { width: 100%; max-width: 88px; min-height: 52px; padding: 4px 2px; font-size: 11px; gap: 3px; }
  :root .rail-item:hover { background: transparent; }
  :root .rail-item[aria-current=page], :root .rail-item[aria-expanded=true] { background: transparent; color: var(--c-accent-text); }
  :root .rail-item .rail-icon { width: 52px; height: 28px; border-radius: var(--r-pill); transition: background var(--dur); }
  :root .rail-item[aria-current=page] .rail-icon, :root .rail-item[aria-expanded=true] .rail-icon { background: var(--c-accent-soft); }
  .rail-badge { top: -3px; left: 29px; box-shadow: 0 0 0 2px var(--c-bg); }

  .topbar { height: 52px; padding: 0 var(--sp-3); gap: var(--sp-2); }
  .topbar-title { font-size: 16px; flex: 1; }
  .crumb-root .icon { display: none; }
  .topbar-title:has(.crumb-leaf) :is(.crumb-label, .crumb-sep) { display: none; }
  .topbar-title:has(.crumb-leaf) .crumb-back { display: grid; place-items: center; width: 30px; height: 30px; margin-left: -6px; border-radius: 50%; }
  .topbar-title:has(.crumb-leaf) .crumb-back .icon { display: block; width: 22px; height: 22px; color: var(--c-text); }
  .topbar-title:has(.crumb-leaf) .crumb-leaf { color: var(--c-text); font-weight: 600; }
  .count-pill { height: 20px; }
  .topbar-actions { gap: 6px; }
  :root .search-trigger { width: var(--touch); height: var(--touch); padding: 0; justify-content: center; border-radius: 50%; background: var(--c-hover); border-color: transparent; color: var(--c-text-2); }
  .search-trigger .icon { width: 18px; height: 18px; }
  .search-trigger .search-placeholder, .search-trigger .kbd-group { display: none; }
  .btn-new { width: var(--touch); height: var(--touch); padding: 0; justify-content: center; border-radius: 50%; }
  .btn-new .btn-new-label, .btn-new kbd { display: none; }
  .btn-new .icon { width: 19px; height: 19px; }
  :root .topbar-avatar { display: grid; width: var(--touch); height: var(--touch); }

  .content { padding: var(--sp-3) var(--sp-3) calc(var(--tabbar-h) + var(--safe-b) + var(--sp-6)); }
  .page-head { margin-bottom: var(--sp-3); }

  /* sheets instead of popovers */
  .popover { left: 0; right: 0; bottom: 0; top: auto !important; width: auto; max-height: 78vh; padding: 6px 10px calc(10px + var(--safe-b));
             border-radius: 16px 16px 0 0; border-bottom: 0; animation: sheet-up 220ms var(--ease); z-index: 45; }
  .sheet-handle { display: block; width: 36px; height: 4px; margin: 4px auto 8px; border-radius: 2px; background: var(--c-border-strong); }
  .popover-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 44; background: rgba(15, 15, 20, .36); animation: fade-in 180ms var(--ease); }
  :root .menu-item { min-height: 48px; font-size: 15px; }
  .menu-icon { width: 34px; height: 34px; }
  .menu-hint, .hide-phone { display: none; }

  :root dialog.palette { padding: 0; align-items: stretch; background: var(--c-bg); backdrop-filter: none; }
  .palette-box { max-width: none; max-height: none; height: 100%; border: 0; border-radius: 0; box-shadow: none; animation: none; }
  .palette-input { padding: 0 8px 0 14px; }
  :root .palette-input input { height: 56px; font-size: 16px; }
  :root .palette-item { min-height: 48px; font-size: 15px; }
  .pi-hint, .palette-item .kbd-group, .palette-foot { display: none; }
  .when-phone { display: inline; }
  .when-desktop { display: none; }
  :root .palette-close { border: 0; padding: 8px; font-size: 15px; font-weight: 500; color: var(--c-accent-text); }
  .pi-wa { width: 40px; height: 40px; }

  .toasts { left: var(--sp-3); right: var(--sp-3); bottom: calc(var(--tabbar-h) + var(--safe-b) + var(--sp-3)); align-items: stretch; }
  .toast { max-width: none; }

  .list-row { gap: var(--sp-2); padding: 10px; }
  .btn-wa span { display: none; }
  .btn-wa { width: 38px; height: 38px; padding: 0; justify-content: center; }
  :root .filters > * { flex: 1 1 140px; }
  :root .filters > input[type=search] { flex: 1 1 100%; order: -1; }
  td, th { padding: 8px 10px; }
  .grid-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .grid-stats .value { font-size: 20px; }
  .search-page-form { flex-direction: column; }
  .col-md, .col-lg { display: none; }
  :root .view-bar > select { flex: 1 1 28%; min-width: 0; }
  :root .view-bar > button[type=submit] { display: none; }
  .public-page { margin: var(--sp-2) auto; padding: var(--sp-4); }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .col-lg { display: none; }
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* ------------------------------------------------------------------ 7. pipeline board (U3, /pipeline)
 * app/templates/pipeline/*, app/static/pipeline.js. The board fills the window under the top bar
 * and scrolls inside itself, so the column heads stay put; phones get one column per screen with
 * stage tabs. Colour only where it means something: the stage (dot + underline), WhatsApp green for
 * unread, amber "No tasks", red overdue. */
.content:has(> .board-page) { max-width: none; padding: 0; }
.board-page { display: flex; flex-direction: column; height: calc(100vh - var(--topbar-h)); height: calc(100dvh - var(--topbar-h)); min-height: 360px; }
.crumb-pipe { color: var(--c-text-2); font-weight: 500; }
:root .pipe-switch { position: relative; margin: 0; }
.pipe-switch summary { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; list-style: none; color: var(--c-text-2); font-weight: 500; }
.pipe-switch summary::-webkit-details-marker { display: none; }
/* not Pico's open-summary margin (the bar jumped) nor its chevron: the summary carries ours */
:root .pipe-switch > summary { margin: 0; }
:root .pipe-switch > summary::after { display: none; }
.pipe-switch ul { position: absolute; top: calc(100% + 6px); left: -8px; z-index: 40; min-width: 200px; margin: 0; padding: 4px; background: var(--c-bg);
                  border: 1px solid var(--c-border); border-radius: var(--r-md); box-shadow: var(--shadow-pop); }
.pipe-switch li { list-style: none; margin: 0; }
.pipe-switch a { display: block; padding: 6px 10px; border-radius: var(--r-sm); color: var(--c-text); font-weight: 500; }
.pipe-switch a:hover { background: var(--c-hover); text-decoration: none; }
.pipe-switch a[aria-current] { color: var(--c-accent-text); }
/* == board saved views == (G2.10) the .pipe-switch dropdown beside the sort: each view a link and its ×, then "Save this view…" */
:root .saved-views { margin: 0; }
.saved-views > summary { height: 30px; padding: 0 10px; border: 1px solid var(--c-border); border-radius: var(--r-md); white-space: nowrap; }
.saved-views > summary:hover, .saved-views[open] > summary { background: var(--c-hover); color: var(--c-text); }
.saved-views ul { width: 260px; }
.saved-views li { display: flex; align-items: center; gap: 2px; }
.saved-views li > a { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.saved-views form { margin: 0; }
.saved-none { padding: 6px 10px; color: var(--c-text-3); font-size: var(--fs-sm); }
.saved-save { flex: 1; display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 8px 6px 4px; border-top: 1px solid var(--c-border); }
.saved-save label { grid-column: 1 / -1; margin: 0; color: var(--c-text-2); font-size: var(--fs-sm); }
:root .saved-save input, :root .saved-save button { height: 30px; margin: 0; }
:root .saved-save button { width: auto; padding: 0 12px; }

/* toolbar: totals, whose deals, instant filter, list switch */
.board-bar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: 10px 20px; border-bottom: 1px solid var(--c-border); }
.board-total { margin: 0; color: var(--c-text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.board-total strong { color: var(--c-text); font-weight: 600; }
.board-total .sep { margin: 0 6px; color: var(--c-text-3); }
.board-closed { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--fs-sm); white-space: nowrap; }
.board-closed a { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; }
.board-closed .icon { width: 14px; height: 14px; }
.board-closed .won { color: var(--c-success-text); }
.board-closed .lost { color: var(--c-text-2); }
.segmented.board-views { display: inline-flex; padding: 2px; gap: 2px; border-radius: var(--r-md); background: var(--c-chrome); border: 1px solid var(--c-border); }
.board-views a { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 6px; color: var(--c-text-2); font-weight: 500; white-space: nowrap; }
.board-views a:hover { color: var(--c-text); text-decoration: none; }
.board-views a[aria-current] { background: var(--c-bg); color: var(--c-text); box-shadow: 0 1px 2px rgba(17, 17, 26, .08); }
.seg-count { font-size: var(--fs-xs); color: var(--c-text-3); font-variant-numeric: tabular-nums; }
.board-filter { position: relative; display: flex; align-items: center; margin: 0; width: 200px; }
.board-filter .icon { position: absolute; left: 9px; color: var(--c-text-3); pointer-events: none; }
:root .board-filter input { height: 30px; margin: 0; padding: 0 10px 0 30px; border-radius: var(--r-md); background-image: none; }
.board-bar-end { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.board-hint { display: inline-flex; align-items: center; gap: 6px; color: var(--c-text-3); font-size: var(--fs-sm); white-space: nowrap; }
.view-switch { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: var(--r-md); border: 1px solid var(--c-border);
               color: var(--c-text-2); font-weight: 500; }
.view-switch:hover { background: var(--c-hover); color: var(--c-text); text-decoration: none; }
.board-page > .callout { margin: 12px 20px 0; }
.stage-tabs { display: none; }

/* columns */
.board { flex: 1; min-height: 0; overflow: auto; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(232px, 1fr);
         grid-auto-rows: minmax(100%, max-content); column-gap: 20px; padding: 0 20px 24px; overscroll-behavior: contain; scrollbar-width: thin; }
.col { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--r-md); transition: background var(--dur); }
.col-head { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 44px;
            margin: 0 -4px; padding: 10px 4px 6px; background: var(--c-bg); box-shadow: inset 0 -2px 0 var(--stage); }
.col-title { display: flex; align-items: center; gap: 7px; min-width: 0; }
.col-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--stage); }
.col-name { margin: 0; font-size: var(--fs-sm); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--c-text);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.col-count { color: var(--c-text-3); font-size: var(--fs-sm); font-weight: 500; font-variant-numeric: tabular-nums; }
.col-key { display: none; height: 17px; min-width: 17px; font-size: 10px; }
.board.keys .col-key { display: inline-grid; place-items: center; }
.col-sum { flex: none; color: var(--c-text); font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.col-in .col-sum { color: var(--c-text-3); font-weight: 500; }
.col-cards { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 8px 0 12px; min-height: 96px; }
/* Kommo's "Quick add" tile at the top of the first working stage (U4 makes it an inline form) */
.col-add { display: flex; align-items: center; justify-content: center; gap: 6px; height: 32px; margin: 8px 0 0; border: 1px dashed var(--c-border-strong);
           border-radius: var(--r-md); color: var(--c-text-2); font-weight: 500; }
.col-add:hover { border-color: var(--c-accent); color: var(--c-accent-text); background: var(--c-accent-soft); text-decoration: none; }
.col-add .icon { width: 14px; height: 14px; }
.col-add kbd { font-size: 10px; min-width: 16px; height: 16px; }
.col-empty { display: none; margin: 0 0 12px; padding: 18px 12px; border: 1px dashed var(--c-border-strong); border-radius: var(--r-md);
             color: var(--c-text-3); font-size: var(--fs-sm); text-align: center; }
.col:not(:has(.col-cards > .card)) .col-empty { display: block; }
.col:not(:has(.col-cards > .card)) .col-cards { flex: 0 0 auto; min-height: 8px; padding-bottom: 0; }
.col-more { display: block; padding: 4px 0 12px; color: var(--c-text-3); font-size: var(--fs-sm); text-align: center; }
.board.dragging .col { background: color-mix(in srgb, var(--stage) 4%, transparent); }
.board.dragging .col.drop-target { background: color-mix(in srgb, var(--stage) 11%, transparent); }
.board.dragging .col.drop-target .col-head { background: transparent; }

/* cards: three lines, 66px, so ten fit a column on a 900px screen (Twenty: three) */
/* (0,2,0): Pico styles every <article> as a padded card with a margin and a shadow */
:root .card { position: relative; display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 7px 10px 8px; background: var(--c-bg);
              border: 1px solid var(--c-border); border-radius: var(--r-md); box-shadow: none; cursor: grab; transition: border-color var(--dur), box-shadow var(--dur); }
:root .card:hover { border-color: var(--c-border-strong); box-shadow: 0 1px 3px rgba(17, 17, 26, .06); }
.card:focus-visible, .card.kbd-focus { outline: 2px solid var(--c-accent); outline-offset: 1px; }
.card-line { display: flex; align-items: center; gap: 8px; min-width: 0; height: 17px; line-height: 17px; }
.card-who { flex: 1; min-width: 0; color: var(--c-text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-who:hover { text-decoration: none; color: var(--c-accent-text); }
.card-co { color: var(--c-text-2); font-weight: 400; }
.card-value { flex: none; color: var(--c-text); font-weight: 600; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.card-prob { flex: none; color: var(--c-text-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap; } /* G1.7: the stage's odds */
.card-q { color: var(--c-text-3); font-weight: 500; font-size: var(--fs-xs); } /* G1.7: "Q-1012", the accepted quote the value came from */
/* G2.10: the deal name has a line of its own and wraps to a second before it is cut ("5…" beside the flags was round 2's gap) */
.card-deal { color: var(--c-accent-text); line-height: 17px; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.card-deal.untitled { color: var(--c-text-3); font-variant-numeric: tabular-nums; }
.flag { flex: none; display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.flag .icon { width: 12px; height: 12px; }
.flag-none { color: var(--c-warn-text); }
.flag-none::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-warn); }
.flag-late { color: var(--c-danger-text); }
.flag-due { color: var(--c-text-3); }
.card-msg { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; color: var(--c-text-2); font-size: var(--fs-sm); }
.card-msg > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.card-msg .icon { width: 13px; height: 13px; color: var(--c-wa-strong); }
.card-msg.out .icon { color: var(--c-accent); }
.card-msg.none { color: var(--c-text-3); }
.has-unread .card-msg > span { color: var(--c-text); font-weight: 500; }
.card-meta { flex: none; display: inline-flex; align-items: center; gap: 6px; color: var(--c-text-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.card-unread { display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-pill);
               background: var(--c-wa); color: #fff; font-size: 10px; font-weight: 700; }
.card-owner { display: inline-flex; }
.avatar-xs { width: 18px; height: 18px; font-size: 8.5px; }
/* the arrow to the next column, in the gutter, when the card is pointed at or focused */
.card-tools { position: absolute; top: 50%; right: -21px; z-index: 2; transform: translateY(-50%); display: flex; }
:root .card-more { display: none; }
:root .card-next { display: grid; place-items: center; width: 22px; height: 22px; margin: 0; padding: 0; border-radius: 50%; border: 1px solid var(--c-border-strong);
                   background: var(--c-bg); color: var(--c-text-2); box-shadow: 0 1px 3px rgba(17, 17, 26, .12); opacity: 0; transition: opacity var(--dur), color var(--dur); cursor: pointer; }
:root .card-next:hover { color: #fff; background: var(--stage-next, var(--c-accent)); border-color: transparent; }
.card-next .icon { width: 14px; height: 14px; }
.card-next-label { display: none; }
.card:hover .card-next, .card:focus-within .card-next, .card.kbd-focus .card-next { opacity: 1; }
.card.moving { opacity: .55; pointer-events: none; }
.card.landed { animation: card-land 900ms var(--ease); }
@keyframes card-land { 0% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 45%, transparent); } 100% { box-shadow: 0 0 0 3px transparent; } }
.card[hidden-by-filter] { display: none; }

/* Incoming: who wrote, what they said, how long they've waited, Accept / Decline (Kommo ✓ / trash) */
.card-in { gap: 4px; }
.card-in .card-who { display: inline-flex; align-items: center; gap: 6px; }
.wa-mark { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--c-wa); color: #fff; }
.wa-mark .icon { width: 12px; height: 12px; stroke-width: 2; }
.card-quote { margin: 0; color: var(--c-text-2); font-size: var(--fs-sm); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.has-unread .card-quote { color: var(--c-text); }
.card-actions { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.card-actions form { margin: 0; }
:root .card-actions button { display: inline-flex; align-items: center; gap: 4px; height: 24px; margin: 0; padding: 0 8px; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 500; }
.card-actions .icon { width: 13px; height: 13px; stroke-width: 2.2; }
/* An Incoming deal already given to a colleague (S0): who has it, instead of Accept / Decline. */
.card-locked { display: inline-flex; align-items: center; gap: 4px; height: 24px; color: var(--c-text-3); font-size: var(--fs-sm); }
:root .btn-accept { background: var(--c-wa-soft); border: 1px solid color-mix(in srgb, var(--c-wa-strong) 35%, transparent); color: var(--c-wa-text); }
:root .btn-accept:hover, :root .card-in:hover .btn-accept, :root .card-in:focus-within .btn-accept { background: var(--c-wa-strong); border-color: var(--c-wa-strong); color: var(--c-inverse); }
:root .btn-decline { background: transparent; border: 1px solid var(--c-border-strong); color: var(--c-text-2); }
:root .btn-decline:hover { background: var(--c-danger-soft); border-color: transparent; color: var(--c-danger-text); }
.who-name { overflow: hidden; text-overflow: ellipsis; }
.card-phone { flex: none; color: var(--c-text-3); font-size: var(--fs-xs); font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* chats the spam filter kept aside: folded under the Incoming deals, never lost */
.filtered { margin: 2px 0 0; }
.filtered summary { display: flex; align-items: center; gap: 6px; padding: 6px 2px; color: var(--c-text-3); font-size: var(--fs-sm); cursor: pointer; list-style: none; }
.filtered summary::-webkit-details-marker { display: none; }
.filtered summary::after { display: none; }
.filtered summary span { flex: 1; }
.filtered summary .icon { width: 14px; height: 14px; }
.filtered summary .icon:last-child { transition: transform var(--dur); }
.filtered[open] summary .icon:last-child { transform: rotate(180deg); }
.filtered summary:hover { color: var(--c-text-2); }
.filtered-cards { display: flex; flex-direction: column; gap: 6px; }
:root .card-filtered { background: var(--c-subtle); }

/* while dragging: SortableJS classes */
:root .card.card-ghost { opacity: .35; border-style: dashed; border-color: var(--c-accent); background: var(--c-accent-soft); }
:root .card.card-ghost > * { visibility: hidden; }
:root .card.card-drag { cursor: grabbing; transform: rotate(2deg); box-shadow: 0 14px 30px rgba(17, 17, 26, .18), 0 3px 8px rgba(17, 17, 26, .1); border-color: var(--c-border-strong); opacity: 1 !important; }
.card-drag .card-tools { display: none; }
.board.dragging .card:hover .card-next { opacity: 0; }
body.board-dragging, body.board-dragging * { cursor: grabbing !important; }

/* == board targets == Won / Lost / Delete (G1.5): a slim footer bar on the board at rest (40px,
 * with the month's tallies), grown to 76px while a card is dragged (Kommo's rising zones). The
 * same three are the Move-to sheet's buttons. Delete has no confirm: the toast's Undo is the safety. */
.drop-zones { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 8px 20px 10px;
              border-top: 1px solid var(--c-border); background: var(--c-bg); }
.zone { position: relative; display: grid; place-items: center; min-width: 0; height: 40px; border-radius: var(--r-lg); border: 2px dashed;
        transition: background var(--dur), transform var(--dur), height 180ms var(--ease); }
.board-page.dragging .zone { height: 76px; }
.zone-won { border-color: color-mix(in srgb, var(--c-success) 55%, transparent); background: var(--c-success-soft); color: var(--c-success-text); }
.zone-lost { border-color: color-mix(in srgb, var(--c-danger) 45%, transparent); background: var(--c-danger-soft); color: var(--c-danger-text); }
.zone-delete { border-color: var(--c-border-strong); background: var(--c-subtle); color: var(--c-text-2); }
.zone.over { border-style: solid; transform: scale(1.02); }
.zone-won.over { background: color-mix(in srgb, var(--c-success) 22%, var(--c-bg)); }
.zone-lost.over { background: color-mix(in srgb, var(--c-danger) 18%, var(--c-bg)); }
.zone-delete.over { border-color: color-mix(in srgb, var(--c-danger) 45%, transparent); background: var(--c-danger-soft); color: var(--c-danger-text); }
.zone-label { display: flex; align-items: center; gap: 8px; max-width: 100%; padding: 0 10px; font-size: var(--fs-md); white-space: nowrap; overflow: hidden; pointer-events: none; }
.board-page.dragging .zone-label { gap: 10px; font-size: var(--fs-lg); }
.zone-label .icon { flex: none; width: 18px; height: 18px; }
.board-page.dragging .zone-label .icon { width: 22px; height: 22px; }
.zone-stat { font-size: var(--fs-sm); opacity: .8; overflow: hidden; text-overflow: ellipsis; }
.zone-label strong + .zone-stat::before { content: "\00b7"; margin-right: 8px; opacity: .7; }
.zone-list { position: absolute; inset: 0; }
.zone-list > * { position: absolute !important; inset: 0; opacity: 0; overflow: hidden; }
:root .move-delete { color: var(--c-text-2); background: var(--c-subtle); }
:root .move-delete:hover { color: var(--c-danger-text); background: var(--c-danger-soft); }

/* the loss reason: one chip (or its digit) */
.lost-picker { position: fixed; right: 20px; bottom: 20px; z-index: 50; width: 380px; max-width: calc(100vw - 24px); padding: 14px; background: var(--c-bg);
               border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); animation: pop-in 160ms var(--ease); }
@keyframes pop-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.lost-q { margin: 0 0 10px; font-weight: 500; }
.lost-chips { display: flex; flex-wrap: wrap; gap: 6px; }
:root .lost-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; margin: 0; padding: 0 10px; border-radius: var(--r-pill); font-size: var(--fs-md);
                   background: var(--c-bg); border: 1px solid var(--c-border-strong); color: var(--c-text); font-weight: 500; }
:root .lost-chip:hover, :root .lost-chip:focus-visible { background: var(--c-danger-soft); border-color: color-mix(in srgb, var(--c-danger) 40%, transparent); color: var(--c-danger-text); }
.lost-chip kbd { font-size: 10px; min-width: 16px; height: 16px; }
:root .lost-cancel { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 0; padding: 0; height: auto; background: none; border: 0; color: var(--c-text-3); font-size: var(--fs-sm); }

/* Move to… (the ⋯ button, M, right-click; the phone's way to move) */
.move-sheet .sheet-box { max-width: 360px; padding: var(--sp-4); }
.move-sheet h3 { margin: 0; font-size: var(--fs-lg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.move-list { margin: 0; padding: 0; }
.move-list li { list-style: none; margin: 0; }
:root .move-opt { display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; margin: 0 0 2px; padding: 0 10px; border-radius: var(--r-md);
                  background: transparent; border: 0; color: var(--c-text); font-weight: 500; text-align: left; }
:root .move-opt:hover, :root .move-opt:focus-visible { background: var(--c-hover); }
:root .move-opt[aria-current="true"] { color: var(--c-text-3); background: transparent; cursor: default; }
:root .move-opt.is-next { background: color-mix(in srgb, var(--stage) 12%, transparent); }
.move-name { flex: 1; }
.move-note { color: var(--c-text-3); font-size: var(--fs-sm); font-weight: 400; }
.is-next .move-note { color: var(--c-text-2); font-weight: 500; }
.move-closed { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--c-border); }
:root .move-won { color: var(--c-success-text); background: var(--c-success-soft); }
:root .move-lost { color: var(--c-danger-text); background: var(--c-danger-soft); }
:root .move-won:hover { background: color-mix(in srgb, var(--c-success) 20%, var(--c-bg)); }
:root .move-lost:hover { background: color-mix(in srgb, var(--c-danger) 16%, var(--c-bg)); }
.move-open { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--c-text-2); font-size: var(--fs-sm); }

@media (min-width: 768px) and (max-width: 1180px) {
  .board-hint { display: none; }
  .board-filter { width: 160px; }
}

/* phones: one column per screen (swipe or tap a stage tab), tools on every card */
@media (max-width: 767px) {
  .board-page { height: calc(100dvh - var(--topbar-h) - var(--tabbar-h) - var(--safe-b)); min-height: 0; }
  .crumb-pipe, .board-hint { display: none; }
  .board-bar { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 8px 12px 6px; border-bottom: 0; }
  .board-total { font-size: var(--fs-md); align-self: center; }
  .board-closed, .board-filter { display: none; }
  .board-bar-end { grid-row: 1; grid-column: 2; margin-left: 0; }
  :root .board-bar-end .hide-phone { display: none; }
  .board-views { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); }
  .board-views a { justify-content: center; height: 32px; padding: 0 6px; }
  .view-switch span { display: none; }
  .view-switch { height: 32px; width: 36px; padding: 0; justify-content: center; }
  /* G3.2: a column is the board's full width, so with the 10 px gap = padding no neighbour peeks
     in (pipeline.js steps width + 10); G3.14: the stage select stands for the tabs */
  .board-page > .callout { margin: 8px 12px 0; }
  .board { grid-auto-columns: 100%; grid-auto-rows: 100%; column-gap: 10px; padding: 0 10px; overflow-y: hidden;
           scroll-snap-type: x mandatory; scroll-padding: 0 10px; }
  .col { scroll-snap-align: start; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  .col-head { height: 40px; padding-top: 8px; }
  .col-cards { gap: 8px; padding-bottom: 16px; }
  .col-add { display: none; }
  :root .card { padding: 10px 12px; gap: 4px; cursor: default; }
  .card-line { height: 20px; line-height: 20px; }
  .card-msg { font-size: var(--fs-md); }
  .card-tools { position: static; transform: none; justify-content: space-between; gap: 8px; margin-top: 6px; }
  :root .card-more { display: inline-flex; align-items: center; gap: 4px; height: 32px; margin: 0; padding: 0 10px 0 6px; border-radius: var(--r-md);
                     background: transparent; border: 1px solid var(--c-border); color: var(--c-text-2); font-size: var(--fs-md); font-weight: 500; }
  :root .card-next { width: auto; height: 32px; padding: 0 8px 0 12px; gap: 4px; display: inline-flex; border-radius: var(--r-md); opacity: 1; box-shadow: none;
                     background: color-mix(in srgb, var(--stage-next, var(--c-accent)) 12%, var(--c-bg)); border-color: color-mix(in srgb, var(--stage-next, var(--c-accent)) 40%, transparent);
                     color: var(--c-text); font-size: var(--fs-md); font-weight: 500; }
  .card-next-label { display: inline; }
  .card-next-label::before { content: "Move to "; color: var(--c-text-2); font-weight: 400; }
  :root .card-actions button { height: 32px; padding: 0 12px; font-size: var(--fs-md); }
  /* board targets on a phone: only while a card is dragged (G3.14, below); the tallies make way
     for the labels (the ? sheet and the toasts carry the numbers) */
  .zone-stat { display: none; }
  .lost-picker { left: 0; right: 0; bottom: 0; width: auto; max-width: none; border-radius: 16px 16px 0 0; padding: 16px 14px calc(16px + var(--safe-b)); z-index: 60; }
  :root .lost-chip { height: 40px; font-size: 15px; }
  .lost-chip kbd { display: none; }
  :root dialog.move-sheet { align-items: flex-end; padding: 0; }
  .move-sheet .sheet-box { max-width: none; width: 100%; border-radius: 16px 16px 0 0; padding: 6px 14px calc(14px + var(--safe-b)); animation: sheet-up 220ms var(--ease); }
  .move-sheet .sheet-handle { display: block; }
  :root .move-opt { height: 48px; font-size: 15px; }
}

/* ------------------------------------------------------------------ 7b. quick add (U4)
 * app/templates/pipeline/_quick_add.html, app/static/quickadd.js. Kommo's dashed "Quick add" tile at
 * the top of the first working column opens into a card being born: name, phone, value, one row
 * each, hairlines between them like the card it becomes; under the phone the number as it will be
 * saved (green when it is a whole mobile number), in the value field the amount as the board will
 * show it, then who this may already be. The same form is the `n` dialog off the board and a
 * bottom sheet on phones. */
.qa-tile { margin: 8px 0 0; }
.qa-opener[hidden], .qa-form[hidden] { display: none; }
.qa-opener { margin: 0; }
.qa-form { margin: 0; padding: 4px 10px 8px; background: var(--c-bg); border: 1px solid color-mix(in srgb, var(--stage) 55%, var(--c-border));
           border-radius: var(--r-md); box-shadow: 0 0 0 3px color-mix(in srgb, var(--stage) 14%, transparent), 0 6px 18px rgba(17, 17, 26, .07);
           animation: pop-in 140ms var(--ease); }
.qa-fields { display: flex; flex-direction: column; }
.qa-field { display: flex; align-items: center; gap: 8px; margin: 0; height: 34px; border-bottom: 1px solid var(--c-border); color: var(--c-text-3); cursor: text; }
.qa-field:focus-within { color: var(--c-accent-text); border-bottom-color: color-mix(in srgb, var(--c-accent) 55%, var(--c-border)); }
.qa-field .icon { flex: none; width: 15px; height: 15px; }
:root .qa-field input { flex: 1; min-width: 0; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
                        color: var(--c-text); font-size: var(--fs-md); font-weight: 500; }
:root .qa-field input:focus { outline: none; box-shadow: none; }
:root .qa-field input::placeholder { color: var(--c-text-3); font-weight: 400; }
.qa-cur { flex: none; width: 15px; text-align: center; font-size: var(--fs-md); font-weight: 600; }
.qa-money { position: relative; border-bottom: 0; }
.qa-ghost { flex: none; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-text-2); font-size: var(--fs-sm);
            font-weight: 500; font-variant-numeric: tabular-nums; }
.qa-ghost.is-bad { color: var(--c-danger-text); }
/* the number as it will be saved */
.qa-line { display: flex; align-items: center; gap: 5px; min-height: 22px; padding: 3px 0 3px 23px; border-bottom: 1px solid var(--c-border);
           font-size: var(--fs-sm); color: var(--c-text-3); font-variant-numeric: tabular-nums; }
.qa-line.is-empty { display: none; }
.qa-line .icon { flex: none; width: 13px; height: 13px; margin-left: -18px; }
.qa-line .qa-num { color: var(--c-text); font-weight: 600; white-space: nowrap; }
.qa-line .qa-kind { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qa-line .qa-kind::before { content: "· "; }
.qa-line.is-bad .qa-kind::before { content: none; }
.qa-line.is-ok .icon { color: var(--c-success); }
.qa-line.is-warn .icon, .qa-line.is-warn .qa-kind { color: var(--c-warn-text); }
.qa-line.is-bad { color: var(--c-danger-text); }
.qa-line.is-partial .qa-num { color: var(--c-text-2); font-weight: 500; }
.qa-wa { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; color: var(--c-wa-text); font-weight: 500; white-space: nowrap; }
.qa-wa .icon { margin: 0; color: var(--c-wa); }
.qa-wa:hover { text-decoration: underline; }
/* who this may already be */
.qa-hints { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.qa-hints:not(:has(*)) { display: none; }
.qa-hint { padding: 7px 8px 8px; border-radius: var(--r-md); border: 1px solid var(--c-border); background: var(--c-subtle); font-size: var(--fs-sm);
           animation: pop-in 140ms var(--ease); }
.qa-hint.is-stop { border-color: color-mix(in srgb, var(--c-warn) 38%, transparent); background: var(--c-warn-soft); }
.qa-hint.is-stop.is-blocked { border-color: color-mix(in srgb, var(--c-danger) 45%, transparent); background: var(--c-danger-soft); }
.qa-hint.is-info { border-color: color-mix(in srgb, var(--c-accent) 25%, transparent); background: var(--c-accent-soft); }
.qa-hint-title { display: flex; gap: 6px; align-items: flex-start; margin: 0 0 6px; color: var(--c-text-2); line-height: 1.35; }
.qa-hint-title .icon { flex: none; width: 14px; height: 14px; margin-top: 1px; }
.qa-hint-title strong { color: var(--c-text); font-weight: 600; }
.qa-hint.is-stop .qa-hint-title { color: var(--c-warn-text); }
.qa-hint.is-stop.is-blocked .qa-hint-title { color: var(--c-danger-text); }
.qa-hint.is-info .qa-hint-title .icon { color: var(--c-accent); }
.qa-match { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 5px 7px; border: 1px solid var(--c-border); border-radius: var(--r-md);
            background: var(--c-bg); color: var(--c-text); text-decoration: none; transition: border-color var(--dur); }
.qa-match:hover { border-color: color-mix(in srgb, var(--c-accent) 55%, var(--c-border)); text-decoration: none; }
.qa-match-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.qa-match-name, .qa-match-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-match-name { font-weight: 600; font-size: var(--fs-md); }
.qa-match-sub { color: var(--c-text-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.qa-match-sub > span + span::before { content: " · "; }
.qa-match-stage { flex: none; height: 18px; padding: 0 6px; font-size: var(--fs-xs); }
.qa-hint-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 7px; }
.qa-btn { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--r-md); background: var(--c-text); color: var(--c-bg);
          font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; }
.qa-btn:hover { text-decoration: none; opacity: .9; color: var(--c-bg); }
:root .qa-link { all: unset; color: var(--c-warn-text); font-size: var(--fs-sm); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
:root .qa-link:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.qa-error { display: flex; gap: 6px; align-items: flex-start; margin: 0; padding: 6px 8px; border-radius: var(--r-md); background: var(--c-danger-soft);
            color: var(--c-danger-text); font-size: var(--fs-sm); }
.qa-error .icon { flex: none; width: 14px; height: 14px; margin-top: 1px; }
/* the foot: where it lands, Enter, Add */
.qa-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.qa-dest { display: inline-flex; align-items: center; gap: 5px; min-width: 0; color: var(--c-text-3); font-size: var(--fs-sm); white-space: nowrap; }
.qa-dest .stage-chip { height: 18px; padding: 0 6px; font-size: var(--fs-xs); }
.qa-more { color: var(--c-text-3); font-size: var(--fs-sm); }
.qa-keys { margin-left: auto; color: var(--c-text-3); }
.qa-keys kbd { font-size: 10px; min-width: 18px; height: 18px; }
:root .qa-add { width: auto; height: 28px; margin: 0; padding: 0 14px; border: 0; border-radius: var(--r-md); background: var(--c-accent); color: var(--c-inverse);
                font-size: var(--fs-md); font-weight: 600; line-height: 28px; box-shadow: none; }
:root .qa-add:hover { background: var(--c-accent-hover); }
.qa-foot .qa-keys + .qa-add { margin-left: 0; }
.qa-foot > :first-child + .qa-add { margin-left: auto; }
.qa-form.has-stop .qa-add, .qa-form:has(.qa-hint.is-stop) .qa-add { background: var(--c-text-3); }
/* what was just added: named at the top, the card flashes where it landed */
.qa-added { display: flex; align-items: center; gap: 6px; margin: 4px 0 2px; padding: 5px 8px; border-radius: var(--r-md); background: var(--c-success-soft);
            color: var(--c-success-text); font-size: var(--fs-sm); animation: pop-in 160ms var(--ease); }
.qa-added .icon { flex: none; width: 14px; height: 14px; }
.qa-added-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-added-text strong { font-weight: 600; }
.qa-added a { margin-left: auto; color: var(--c-success-text); font-weight: 600; }
.card.just-added { animation: qa-land 2.2s var(--ease); }
@keyframes qa-land { 0%, 35% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-success) 40%, transparent); background: var(--c-success-soft); }
                     100% { box-shadow: 0 0 0 3px transparent; background: var(--c-bg); } }
/* the dialog (off the board) and the bottom sheet (phones) */
:root dialog.qa-dialog { padding: var(--sp-4); }
:root dialog.qa-dialog[open] { display: grid; place-items: start center; padding-top: 12vh; }
.qa-sheet { max-width: 420px; padding: 14px 18px 16px; }
.qa-dialog .qa-form { padding: 0; border: 0; box-shadow: none; animation: none; background: transparent; }
.qa-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.qa-title { margin: 0; font-size: var(--fs-lg); font-weight: 600; }
.qa-sub { display: flex; align-items: center; gap: 5px; margin: 2px 0 0; color: var(--c-text-3); font-size: var(--fs-sm); }
.qa-sub .stage-chip { height: 18px; padding: 0 6px; font-size: var(--fs-xs); }
.qa-dialog .qa-field { height: 42px; }
:root .qa-dialog .qa-field input { height: 40px; font-size: var(--fs-lg); }
.qa-dialog .qa-foot { margin-top: 12px; }
:root .qa-dialog .qa-add { height: 34px; padding: 0 18px; line-height: 34px; }
@media (max-width: 767px) {
  .qa-tile .qa-opener { display: flex; height: 40px; margin: 8px 0 0; font-size: var(--fs-md); }
  .qa-tile .qa-opener kbd { display: none; }
  :root dialog.qa-dialog[open] { place-items: end stretch; padding: 0; }
  .qa-sheet { max-width: none; width: 100%; max-height: 92dvh; border-radius: 16px 16px 0 0; padding: 4px 16px calc(14px + var(--safe-b)); animation: sheet-up 220ms var(--ease); }
  .qa-sheet .sheet-handle { display: block; }
  .qa-dialog .qa-field { height: 48px; }
  :root .qa-dialog .qa-field input { height: 46px; font-size: 17px; }
  .qa-dialog .qa-field .icon, .qa-dialog .qa-cur { width: 18px; height: 18px; font-size: 16px; }
  .qa-dialog .qa-line { padding-left: 26px; font-size: var(--fs-md); }
  .qa-dialog .qa-line .icon { margin-left: -21px; width: 15px; height: 15px; }
  .qa-dialog .qa-hint { font-size: var(--fs-md); }
  :root .qa-dialog .qa-add { height: 44px; flex: 1; font-size: 16px; line-height: 44px; }
  .qa-dialog .qa-foot > :first-child + .qa-add { margin-left: 0; }
}

/* ------------------------------------------------------------------ 8. lead card (U5, /leads/{id} and the side panel)
 * app/templates/leads/_card.html, app/static/card.js. Two panes: the header over the fields (all
 * edited in place) on the left, one chronological feed with the composer on the right. The card is
 * a size container: the same markup is a two-pane page, a narrower two-pane panel over the board,
 * or (under 720px) a single column with Chat / Details tabs, chat first. Colour only where it
 * means something: the stage (button, progress bar, chips), WhatsApp green (bubbles out, send),
 * amber for notes and "no next step", red overdue. */
:root { --bubble-out: #d9fdd3; --bubble-out-line: #c3eebb; --tick-read: #1d9bf0; }
:root[data-theme="dark"] { --bubble-out: #0f3b2e; --bubble-out-line: #185040; --tick-read: #53bdeb; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bubble-out: #0f3b2e; --bubble-out-line: #185040; --tick-read: #53bdeb; } }

.content:has(> .lead-card) { max-width: none; padding: 0; }
.lead-card { container: card / inline-size; height: calc(100vh - var(--topbar-h)); height: calc(100dvh - var(--topbar-h)); min-height: 460px;
             background: var(--c-bg); color: var(--c-text); }
.lead-panel .lead-card { height: 100%; min-height: 0; }
.lc-grid { display: grid; height: 100%; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
           grid-template-areas: "head main" "side main"; }
.lc-head { grid-area: head; position: relative; z-index: 3; padding: 12px 20px 14px; border-right: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); background: var(--c-bg); }
.lc-side { grid-area: side; min-height: 0; overflow-y: auto; overscroll-behavior: contain; border-right: 1px solid var(--c-border); padding: 0 0 24px; }
.lc-main { grid-area: main; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--c-chrome); }
.lc-tabs { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* header: where the deal is, who it is, what to do */
.lc-bar { display: flex; align-items: center; gap: 6px; min-height: 30px; margin: -2px -6px 8px; }
:root .lc-back { display: none; }
.lc-ref { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding-left: 6px; color: var(--c-text-3); font-size: var(--fs-sm); white-space: nowrap; }
.lc-id { font-variant-numeric: tabular-nums; }
.lc-src { display: inline-flex; align-items: center; gap: 4px; overflow: hidden; text-overflow: ellipsis; }
.lc-src .icon { width: 13px; height: 13px; vertical-align: 0; }
.lc-nav { margin-left: auto; display: inline-flex; align-items: center; gap: 0; }
.lc-pos { margin-right: 4px; color: var(--c-text-3); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
:root .lc-nav .icon-btn { width: 28px; height: 28px; }
:root .icon-btn.is-off { opacity: .32; pointer-events: none; }
:root a.icon-btn:hover { text-decoration: none; }
.lc-who { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.lc-avatar { position: relative; flex: none; }
.lc-wa { position: absolute; right: -3px; bottom: -3px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
         background: var(--c-wa-strong); color: var(--c-inverse); box-shadow: 0 0 0 2px var(--c-bg); }
.lc-wa .icon { width: 11px; height: 11px; stroke-width: 2.2; vertical-align: 0; }
.lc-names { flex: 1; min-width: 0; }
h1.lc-name { margin: 0; font-size: 17px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }

/* in-place editing: a value is a button until clicked; Enter / leaving saves, Esc cancels */
:root .inline { position: relative; display: block; min-width: 0; margin: 0; }
:root .inline-show { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 6px; max-width: calc(100% + 12px); min-height: 28px;
                     margin: 0 -6px; padding: 3px 6px; border-radius: var(--r-sm); color: var(--c-text); cursor: text; transition: background-color var(--dur); }
:root .inline-show:hover { background: var(--c-hover); }
:root .inline-show:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 0; }
.inline-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inline-show.is-empty .inline-text { color: var(--c-text-3); }
.icon.inline-pen { width: 13px; height: 13px; color: var(--c-text-3); opacity: 0; transition: opacity var(--dur); vertical-align: 0; }
.inline-show:hover .inline-pen, .inline-show:focus-visible .inline-pen { opacity: 1; }
.inline-input { display: none; }
.inline.is-editing .inline-show { display: none; }
:root .inline.is-editing .inline-input { display: block; width: calc(100% + 12px); height: 30px; margin: -1px -6px; padding: 0 6px; font: inherit; color: var(--c-text);
             border: 1px solid var(--c-accent); border-radius: var(--r-sm); background: var(--c-bg); box-shadow: 0 0 0 3px var(--c-focus); }
:root .inline.is-editing select.inline-input { padding-right: 26px; }
:root .inline.is-editing .inline-input[aria-invalid=true] { border-color: var(--c-danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-danger) 25%, transparent); }
.inline.is-saving { opacity: .55; pointer-events: none; }
:root .inline-title .inline-show { min-height: 30px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
:root .inline-title.is-editing .inline-input { height: 32px; font-size: 17px; font-weight: 600; }
:root .inline-deal .inline-show { min-height: 24px; padding-block: 1px; color: var(--c-text-2); }
.just-saved { animation: saved-glow 1.1s var(--ease); border-radius: var(--r-sm); }

/* stage: the dropdown, time in stage, the segmented bar in the stage colours */
:root .lc-stage { position: relative; margin: 0 0 12px; }
.lc-stage-row { display: flex; align-items: center; gap: 8px; margin-bottom: 0; min-width: 0; } /* the 9px gap is now the progress bar's top border */
:root .stage-btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 7px; min-width: 0; height: 30px; padding: 0 8px 0 10px;
                   border: 1px solid color-mix(in srgb, var(--stage) 34%, transparent); border-radius: var(--r-md);
                   background: color-mix(in srgb, var(--stage) 12%, var(--c-bg)); color: var(--c-text); font-weight: 600; cursor: pointer; white-space: nowrap;
                   transition: background-color var(--dur); }
:root .stage-btn:hover, :root .stage-btn[aria-expanded=true] { background: color-mix(in srgb, var(--stage) 21%, var(--c-bg)); }
:root .stage-btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }
.stage-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--c, var(--stage)); }
.stage-name { overflow: hidden; text-overflow: ellipsis; }
.stage-age { color: var(--c-text-2); font-weight: 400; }
.stage-age::before { content: "· "; color: var(--c-text-3); }
.icon.stage-caret { width: 14px; height: 14px; color: var(--c-text-2); vertical-align: 0; }
.icon.stage-ic { width: 15px; height: 15px; vertical-align: 0; }
.is-won .stage-ic { color: var(--c-success-text); }
.is-lost .stage-ic { color: var(--c-danger-text); }
.lc-pipe { color: var(--c-text-3); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-stage-row .chip { flex: none; }
:root .lc-progress { display: flex; gap: 3px; width: auto; height: 24px; margin: 0; border-radius: 0; box-shadow: none; }
/* Each seg is a 24px-tall target (WCAG 2.5.8) drawn as a 6px bar: transparent 9px borders, the
   background clipped to the padding box, whose radius is 12 - 9 = 3px. */
:root .lc-progress .seg { all: unset; box-sizing: border-box; flex: 1; height: 24px; border: 9px solid transparent; border-radius: 12px; background: var(--c-border); background-clip: padding-box; cursor: pointer;
                          transition: transform 120ms var(--ease), background-color var(--dur); }
:root .lc-progress .seg.is-filled { background-color: var(--c); } /* background-color, not the shorthand: it would reset background-clip */
:root .lc-progress .seg:hover:not(:disabled) { transform: scaleY(1.7); }
:root .lc-progress .seg:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
:root .lc-progress .seg:disabled { cursor: default; }
:root .is-won .lc-progress .seg { background-color: var(--t-green); }
:root .is-lost .lc-progress .seg { background-color: color-mix(in srgb, var(--c-danger) 22%, var(--c-border)); }
.stage-menu { position: absolute; z-index: 40; top: 36px; left: 0; width: 280px; max-width: calc(100vw - 32px); padding: 6px; background: var(--c-bg);
              border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); animation: pop-in 140ms var(--ease); }
.stage-menu[hidden] { display: none; }
.stage-menu-head { margin: 4px 8px 6px; color: var(--c-text-3); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
:root .stage-opt { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 8px;
                   border-radius: var(--r-md); color: var(--c-text); font-size: var(--fs-md); cursor: pointer; }
:root .stage-opt:hover, :root .stage-opt:focus-visible { background: var(--c-hover); }
:root .stage-opt:disabled { cursor: default; background: transparent; font-weight: 600; }
.stage-opt .icon { width: 16px; height: 16px; vertical-align: 0; }
.stage-opt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-opt kbd { margin-left: auto; }
.icon.stage-check { color: var(--c-accent-text); }
.stage-won .icon { color: var(--c-success-text); }
.stage-lost-btn .icon { color: var(--c-danger-text); }
.stage-menu-sep { height: 1px; margin: 6px 4px; background: var(--c-border); }
.stage-lost > summary { list-style: none; }
.stage-lost > summary::-webkit-details-marker { display: none; }
.stage-reasons { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 8px 8px 34px; }
:root .reason-chip { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border: 1px solid var(--c-border-strong);
                     border-radius: var(--r-pill); color: var(--c-text); font-size: var(--fs-sm); cursor: pointer; }
:root .reason-chip:hover, :root .reason-chip:focus-visible { background: var(--c-danger-soft); border-color: color-mix(in srgb, var(--c-danger) 45%, transparent); color: var(--c-danger-text); }
.lc-outcome { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: -2px 0 12px; color: var(--c-text-2); font-size: var(--fs-sm); }
.lc-outcome .icon { width: 15px; height: 15px; vertical-align: 0; }
.lc-outcome.won .icon { color: var(--c-success-text); }
.lc-outcome.lost .icon { color: var(--c-danger-text); }
.lc-outcome strong { color: var(--c-text); font-weight: 600; }
.lc-incoming { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 8px 8px 8px 10px; border-radius: var(--r-md);
               background: var(--c-wa-soft); border: 1px solid color-mix(in srgb, var(--c-wa-strong) 25%, transparent); }
.lc-incoming form { margin: 0; }
.lc-incoming-text { flex: 1; display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--c-wa-text); font-weight: 500; }
.lc-incoming-text .icon { width: 16px; height: 16px; vertical-align: 0; }
:root .lc-incoming button { min-height: 28px; height: 28px; padding: 0 10px; font-size: var(--fs-sm); gap: 4px; }
:root .lc-incoming .btn-accept { background: var(--c-wa-strong); border-color: var(--c-wa-strong); color: var(--c-inverse); }
.lc-incoming button .icon { width: 14px; height: 14px; vertical-align: 0; }
/* F.125: the row wraps inside the header column (the side panel's 268 px, the page's 320 px)
   instead of running over the feed; the ⋯ menu hangs from the row's right edge, so it stays in
   the column whichever line ⋯ lands on */
.lc-actions { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
:root .lc-actions .lc-more { position: static; }
.lc-act { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
          background: var(--c-bg); color: var(--c-text); font-size: var(--fs-md); font-weight: 500; white-space: nowrap; cursor: pointer; list-style: none; }
a.lc-act:hover, summary.lc-act:hover { background: var(--c-hover); color: var(--c-text); text-decoration: none; }
.lc-act .icon { width: 16px; height: 16px; vertical-align: 0; }
.lc-act.wa { background: var(--c-wa-strong); border-color: var(--c-wa-strong); color: var(--c-inverse); }
a.lc-act.wa:hover { background: #006d59; border-color: #006d59; color: #fff; }
:root .lc-more { position: relative; margin: 0; }
:root .stage-lost { margin: 0; }
.lc-more > summary::-webkit-details-marker { display: none; }
:root .lc-more > summary { margin: 0; line-height: 1; }
:root :is(.lc-more, .stage-lost, .fe-group) > summary::after { display: none; }
.lc-more > summary.lc-act { width: 32px; padding: 0; justify-content: center; }
.lc-more-menu { position: absolute; z-index: 40; top: calc(100% + 6px); right: 0; width: 250px; padding: 6px; background: var(--c-bg); border: 1px solid var(--c-border);
                border-radius: var(--r-lg); box-shadow: var(--shadow-pop); animation: pop-in 140ms var(--ease); }
.lc-more-menu .icon { width: 16px; height: 16px; color: var(--c-text-2); vertical-align: 0; }
.lc-actions .lc-more:first-child { margin-left: 0; }

/* fields: icon + label, value edited in place (Twenty's record fields, Kommo's order) */
.lc-side > .callout { margin: 14px 20px 2px; }
.callout-form { display: inline; margin: 0 0 0 4px; }
:root .callout-form button { min-height: 24px; padding: 1px 10px; }
.lc-section { padding: 14px 20px 10px; border-bottom: 1px solid var(--c-border); }
.lc-section:last-child { border-bottom: 0; }
.lc-sec-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; color: var(--c-text-2); font-size: var(--fs-sm);
                font-weight: 600; letter-spacing: 0; line-height: 20px; }
:where(.lc-section) .lc-sec-title { --pico-font-size: var(--fs-sm); }
.lc-sec-link { display: inline-flex; align-items: center; gap: 1px; color: var(--c-accent-text); font-weight: 500; }
.lc-sec-link .icon { width: 14px; height: 14px; vertical-align: 0; }
.flds { display: flex; flex-direction: column; gap: 1px; margin: 0; }
.fld { display: grid; grid-template-columns: 116px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 32px; }
.fld-label { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--c-text-3); font-weight: 400; white-space: nowrap; }
.fld-label .icon { width: 15px; height: 15px; flex: none; vertical-align: 0; }
.fld-label span { overflow: hidden; text-overflow: ellipsis; }
.fld-body { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; margin: 0; }
.fld-body .inline { flex: 1; }
.fld-body > .fld-note { flex-basis: 100%; }
.fld:has(> .fld-body > .fld-note) { align-items: baseline; }
.static-value { display: inline-flex; align-items: center; gap: 6px; min-width: 0; min-height: 28px; padding: 3px 0; color: var(--c-text);
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.static-value.is-late { color: var(--c-danger-text); font-weight: 500; }
:root button.static-value.is-none { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; min-height: 28px; color: var(--c-warn-text); font-weight: 500; cursor: pointer; }
:root button.static-value.is-none:hover { text-decoration: underline; }
.fld-tools { display: inline-flex; gap: 2px; flex: none; }
.fld-tool { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-sm); color: var(--c-text-3); }
.fld-tool:hover { background: var(--c-hover); color: var(--c-text); }
.fld-tool.wa { color: var(--c-wa-text); }
.fld-tool.wa:hover { background: var(--c-wa-soft); }
.fld-tool .icon { width: 16px; height: 16px; vertical-align: 0; }
.stage-chip { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--r-sm); white-space: nowrap; font-size: var(--fs-sm); font-weight: 500;
              background: color-mix(in srgb, var(--c) 17%, var(--c-bg)); color: color-mix(in srgb, var(--c) 50%, var(--c-text)); }
.j-bar { display: flex; gap: 2px; height: 6px; margin: 4px 0 10px; border-radius: 3px; overflow: hidden; }
.j-bar span { flex-basis: 0; min-width: 3px; background: var(--c); }
.lc-journey { margin: 0; padding: 0; list-style: none; }
.lc-journey li { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; margin: 0; min-height: 26px;
                 list-style: none; color: var(--c-text-2); font-size: var(--fs-md); }
.lc-journey .stage-dot { background: var(--c); }
.j-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-text); }
.j-when { color: var(--c-text-3); font-size: var(--fs-sm); white-space: nowrap; font-variant-numeric: tabular-nums; }
.j-dur { min-width: 64px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lc-journey li.is-now .j-name, .lc-journey li.is-now .j-dur { font-weight: 600; color: var(--c-text); }
.lc-deals { margin: 0; padding: 0; list-style: none; }
.lc-deals li { margin: 0; list-style: none; }
.lc-deals a { display: flex; align-items: center; gap: 8px; margin: 0 -8px; padding: 6px 8px; border-radius: var(--r-md); color: var(--c-text); }
.lc-deals a:hover { background: var(--c-hover); text-decoration: none; }
.lc-deal-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-deal-value { color: var(--c-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lc-form-answers > summary { cursor: pointer; }
.lc-legacy-notes { margin: 0; white-space: pre-line; color: var(--c-text-2); }

/* the feed: one conversation, newest at the bottom */
.lc-feedbar { flex: none; display: flex; align-items: center; gap: 4px; padding: 8px 20px; border-bottom: 1px solid var(--c-border); background: var(--c-bg);
              overflow-x: auto; scrollbar-width: none; }
.lc-feedbar::-webkit-scrollbar { display: none; }
/* the filter: the board's segmented control (Everyone / Mine / Unassigned), same look */
.feed-chips { display: inline-flex; flex: none; gap: 2px; padding: 2px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-chrome); }
:root .feed-chip { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 6px;
                   color: var(--c-text-2); font-size: var(--fs-md); font-weight: 500; white-space: nowrap; cursor: pointer; transition: background-color var(--dur), color var(--dur); }
:root .feed-chip:hover { color: var(--c-text); }
:root .feed-chip:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 0; }
:root .feed-chip[aria-pressed=true] { background: var(--c-bg); color: var(--c-text); box-shadow: 0 1px 2px rgba(17, 17, 26, .08); }
:root .feed-chip:disabled { opacity: .45; cursor: default; }
.feed-n { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; color: var(--c-text-3); }
.feed-status { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding-left: 12px; color: var(--c-text-3); font-size: var(--fs-sm);
               white-space: nowrap; }
.feed-status .icon { width: 14px; height: 14px; vertical-align: 0; }
.feed-status.is-waiting { color: var(--c-warn-text); font-weight: 500; }
.feed-status.is-waiting.is-late { color: var(--c-danger-text); }
.fs-short { display: none; }
.lc-feed { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 24px 16px; }
/* A short record page can scroll past the dock; its history must still fit complete controls. */
.lead-card.mode-page .lc-feed { min-height: 160px; }
.lc-feed:focus { outline: none; }
.lc-feed-inner, .lc-dock-inner { max-width: 860px; margin: 0 auto; }
/* like a chat: a short history sits at the bottom, next to the composer */
.lc-feed-inner { display: flex; flex-direction: column; justify-content: flex-end; min-height: 100%; }
.feed-older { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 0; color: var(--c-text-3); font-size: var(--fs-sm); }
.feed-older .icon { width: 14px; height: 14px; vertical-align: 0; }
.feed-date { display: flex; justify-content: center; margin: 14px 0 8px; }
.feed-date span { padding: 2px 10px; border: 1px solid var(--c-border); border-radius: var(--r-pill); background: var(--c-bg); color: var(--c-text-2);
                  font-size: var(--fs-xs); font-weight: 600; box-shadow: 0 1px 2px rgba(17, 17, 26, .05); }
.fe { display: flex; margin: 2px 0; }
.fe-msg.run-start { margin-top: 10px; }
.fe-in { justify-content: flex-start; }
.fe-out { justify-content: flex-end; }
.fe-avatar { flex: none; width: 24px; margin-right: 8px; }
.bubble { position: relative; max-width: min(74%, 560px); padding: 6px 10px 6px; border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-bg);
          box-shadow: 0 1px 1px rgba(17, 17, 26, .04); }
.fe-out .bubble { background: var(--bubble-out); border-color: var(--bubble-out-line); }
.fe-in.run-start .bubble { border-top-left-radius: 3px; }
.fe-out.run-start .bubble { border-top-right-radius: 3px; }
.bubble-who { display: block; margin-bottom: 1px; color: var(--c-wa-text); font-size: var(--fs-sm); font-weight: 600; }
.fe-out .bubble-who { color: var(--c-accent-text); }
.bubble-text { display: inline; margin: 0; white-space: pre-line; overflow-wrap: anywhere; line-height: 1.45; }
.bubble-meta { float: right; position: relative; top: 5px; display: inline-flex; align-items: center; gap: 3px; margin: 0 0 0 12px; color: var(--c-text-3);
               font-size: 11px; line-height: 16px; white-space: nowrap; }
.bubble-meta .fe-time { color: inherit; }
.tick { display: inline-flex; align-items: center; gap: 3px; }
.tick .icon { width: 15px; height: 15px; stroke-width: 2; vertical-align: 0; }
.tick-read { color: var(--tick-read); }
.tick-failed { color: var(--c-danger-text); }
.tick-logged { color: var(--c-text-3); }
.fe-msg.is-failed .bubble { border-color: color-mix(in srgb, var(--c-danger) 45%, transparent); }
.bubble-error { display: block; clear: both; padding-top: 4px; color: var(--c-danger-text); font-size: var(--fs-sm); }
.fe-unread { display: flex; justify-content: center; margin: 14px 0 2px; }
.fe-unread span { padding: 2px 10px; border-radius: var(--r-pill); background: var(--c-wa-soft); color: var(--c-wa-text); font-size: var(--fs-xs); font-weight: 600; }
.fe-event { flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 6px; padding: 4px 0; color: var(--c-text-2); font-size: var(--fs-sm); text-align: center; }
.fe-event .fe-time { order: 3; color: var(--c-text-3); font-variant-numeric: tabular-nums; }
.fe-event .fe-who { order: 2; color: var(--c-text-3); }
.fe-event .fe-who::before, .fe-event .fe-time::before { content: "·"; margin-right: 6px; color: var(--c-text-3); }
.fe-line { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px; min-width: 0; }
.fe-line strong { color: var(--c-text); font-weight: 600; }
.fe-was { color: var(--c-text-3); }
.icon.fe-ic { width: 15px; height: 15px; vertical-align: 0; }
.icon.fe-ic.won { color: var(--c-success-text); }
.icon.fe-ic.lost { color: var(--c-danger-text); }
.fe-group { display: block; margin: 2px 0; }
.fe-group > summary { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 6px; padding: 4px 0; color: var(--c-text-2);
                      font-size: var(--fs-sm); list-style: none; cursor: pointer; }
.fe-group > summary::-webkit-details-marker { display: none; }
.fe-group > summary .fe-time { order: 3; color: var(--c-text-3); }
.fe-group > summary .fe-time::before { content: "·"; margin-right: 6px; color: var(--c-text-3); }
.fe-count { color: var(--c-text-2); font-weight: 600; }
.fe-sum { max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-text-3); }
.fe-expand { order: 4; display: inline-flex; align-items: center; gap: 2px; color: var(--c-accent-text); font-weight: 500; }
.fe-expand .icon { width: 13px; height: 13px; vertical-align: 0; transition: transform var(--dur); }
.fe-group[open] > summary .fe-expand .icon { transform: rotate(180deg); }
.fe-group .when-open, .fe-group[open] .when-closed { display: none; }
.fe-group[open] .when-open { display: inline; }
.fe-group-items { max-width: 600px; margin: 2px auto 6px; padding: 4px 8px; border-radius: var(--r-md); background: color-mix(in srgb, var(--c-text) 4%, transparent); }
:root .fe-group[open] > summary { margin-bottom: 0; }
.fe-note { justify-content: center; margin: 10px 0; }
.note-card { width: min(100%, 580px); padding: 8px 12px 9px; border: 1px solid color-mix(in srgb, var(--t-amber) 32%, transparent); border-radius: var(--r-md);
             background: var(--t-amber-bg); }
.note-head { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; color: var(--t-amber-fg); font-size: var(--fs-sm); }
.note-head .icon { width: 14px; height: 14px; vertical-align: 0; }
.note-label { font-weight: 600; }
.note-head .fe-who { color: var(--c-text-2); }
.note-head .fe-who::before { content: "· "; color: var(--c-text-3); }
.note-head .fe-time { margin-left: auto; color: var(--c-text-2); } /* text-3 was 4.1:1 on the dark amber card */
.note-text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; color: var(--c-text); }
.fe-activity .note-card { background: var(--c-bg); border-color: var(--c-border); }
.fe-activity .note-head { color: var(--c-text-2); }
.fe-taskdone { align-items: flex-start; gap: 10px; width: min(100%, 580px); margin: 10px auto; padding: 8px 12px; border: 1px solid var(--c-border);
               border-radius: var(--r-md); background: var(--c-bg); }
.done-dot { display: grid; place-items: center; flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--c-success); color: #fff; }
.done-dot .icon { width: 12px; height: 12px; stroke-width: 3; vertical-align: 0; }
.done-body { flex: 1; min-width: 0; }
.done-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.done-head strong { font-weight: 600; }
.done-tag { padding: 0 6px; border-radius: var(--r-sm); background: var(--c-success-soft); color: var(--c-success-text); font-size: var(--fs-xs); font-weight: 600; line-height: 18px; }
.done-head .fe-who { color: var(--c-text-3); font-size: var(--fs-sm); }
.done-head .fe-time { margin-left: auto; color: var(--c-text-3); font-size: var(--fs-sm); }
.done-result { margin: 2px 0 0; color: var(--c-text-2); white-space: pre-line; }
.feed-empty .empty-state { padding-block: 32px; }
/* the filter chips */
.lc-feed[data-filter=chat] :is(.fe, .fe-unread, .feed-empty):not([data-kind=chat]),
.lc-feed[data-filter=notes] :is(.fe, .fe-unread, .feed-empty):not([data-kind=notes]),
.lc-feed[data-filter=tasks] :is(.fe, .fe-unread, .feed-empty):not([data-kind=tasks]),
.lc-feed[data-filter=changes] :is(.fe, .fe-unread, .feed-empty):not([data-kind=changes]) { display: none; }
.lc-feed[data-filter=chat] .feed-day:not(:has([data-kind=chat])),
.lc-feed[data-filter=notes] .feed-day:not(:has([data-kind=notes])),
.lc-feed[data-filter=tasks] .feed-day:not(:has([data-kind=tasks])),
.lc-feed[data-filter=changes] .feed-day:not(:has([data-kind=changes])) { display: none; }
.lc-main:has(.lc-feed[data-filter=chat], .lc-feed[data-filter=notes], .lc-feed[data-filter=changes]) .task-pin { display: none; }

/* the dock: open tasks pinned under the feed, the "no next step" nudge, the composer */
.lc-dock { flex: none; padding: 6px 24px 14px; background: var(--c-chrome); }
:root .task-check { all: unset; box-sizing: border-box; display: grid; place-items: center; flex: none; width: 22px; height: 22px; border: 1.5px solid var(--c-border-strong);
                    border-radius: 50%; color: transparent; cursor: pointer; transition: all var(--dur); }
:root .task-check:hover, :root .task-check:focus-visible { border-color: var(--c-success); background: var(--c-success-soft); color: var(--c-success-text); }
.task-check .icon { width: 13px; height: 13px; stroke-width: 2.6; vertical-align: 0; }
/* A colleague's deal (S0 ownership): read-only, said once where the composer would be. */
.lc-readonly { display: flex; align-items: center; gap: var(--sp-2); margin: 0; padding: 10px 12px; border: 1px dashed var(--c-border-strong); border-radius: var(--r-lg); color: var(--c-text-2); font-size: var(--fs-md); }
.lc-readonly .icon { flex: none; width: 15px; height: 15px; }
.inline-static.is-empty { color: var(--c-text-3); }
.task-nudge { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 7px 12px; border: 1px solid color-mix(in srgb, var(--c-warn) 28%, transparent);
              border-radius: var(--r-md); background: var(--c-warn-soft); color: var(--c-warn-text); }
.task-nudge .icon { width: 15px; height: 15px; vertical-align: 0; }
:root .task-nudge .link { height: auto; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none;
                          color: var(--c-warn-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.composer { overflow: hidden; border: 1px solid var(--c-border-strong); border-radius: var(--r-lg); background: var(--c-bg); box-shadow: 0 1px 2px rgba(17, 17, 26, .05);
            transition: border-color var(--dur), box-shadow var(--dur); }
.composer:focus-within { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-focus); }
.composer[data-mode=chat]:focus-within { border-color: var(--c-wa-strong); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-wa) 24%, transparent); }
.composer[data-mode=note] { background: color-mix(in srgb, var(--t-amber-bg) 60%, var(--c-bg)); }
.composer[data-mode=note]:focus-within { border-color: var(--t-amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-amber) 22%, transparent); }
.composer-modes { display: flex; align-items: center; gap: 2px; padding: 6px 8px 0; }
:root .cm-tab { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: var(--r-pill);
                color: var(--c-text-2); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; }
:root .cm-tab:hover { background: var(--c-hover); color: var(--c-text); }
:root .cm-tab:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 0; }
:root .cm-tab[aria-selected=true] { background: var(--c-hover); color: var(--c-text); }
:root .cm-chat[aria-selected=true] { background: var(--c-wa-soft); color: var(--c-wa-text); }
:root .composer[data-mode=note] .cm-tab[aria-selected=true] { background: var(--t-amber-bg); color: var(--t-amber-fg); }
.cm-tab .icon { width: 14px; height: 14px; vertical-align: 0; }
.cm-to { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding-right: 4px; color: var(--c-text-3); font-size: var(--fs-xs); white-space: nowrap; }
.cm-to .icon { width: 13px; height: 13px; vertical-align: 0; }
.composer:not([data-mode=chat]) .cm-to { display: none; }
.cm-form { margin: 0; }
.cm-form[hidden] { display: none; }
:root .cm-form textarea { display: block; width: 100%; min-height: 42px; max-height: 220px; margin: 0; padding: 8px 12px 4px; border: 0; border-radius: 0; background: transparent;
                          box-shadow: none; font-size: 14px; line-height: 1.45; resize: none; }
:root .cm-form textarea:is(:focus, :focus-visible) { border: 0; box-shadow: none; outline: none; --pico-box-shadow: none; }
.cm-foot { display: flex; align-items: center; gap: 10px; padding: 4px 8px 8px 12px; }
.cm-hint { flex: 1; min-width: 0; overflow: hidden; color: var(--c-text-3); font-size: var(--fs-sm); text-overflow: ellipsis; white-space: nowrap; }
.cm-keys { display: inline-flex; align-items: center; gap: 4px; color: var(--c-text-3); font-size: var(--fs-xs); white-space: nowrap; }
:root .cm-send { min-height: 30px; height: 30px; padding: 0 12px; gap: 6px; border-radius: var(--r-md); font-weight: 600;
                 --pico-background-color: var(--c-wa-strong); --pico-border-color: var(--c-wa-strong); --pico-color: var(--c-inverse); }
:root .cm-send:is(:hover, :focus) { --pico-background-color: #006d59; --pico-border-color: #006d59; }
:root .cm-send:disabled { opacity: .45; }
.cm-send .icon { width: 15px; height: 15px; vertical-align: 0; }
:root .cm-send-task { --pico-background-color: var(--c-accent); --pico-border-color: var(--c-accent); }
:root .cm-send-task:is(:hover, :focus) { --pico-background-color: var(--c-accent-hover); --pico-border-color: var(--c-accent-hover); }
:root .cm-send-note { --pico-background-color: var(--t-amber-fg); --pico-border-color: var(--t-amber-fg); }
:root .cm-send-note:is(:hover, :focus) { --pico-background-color: var(--t-amber-fg); --pico-border-color: var(--t-amber-fg); filter: brightness(1.1); }

/* the WhatsApp composer (U6): quick replies ("/"), AI drafts, the 24-hour window, the send mode */
.cm-wrap { position: relative; }
.cm-to-num { color: var(--c-text-2); font-variant-numeric: tabular-nums; }
.cm-dot { color: var(--c-text-3); }
.cm-via { display: inline-flex; align-items: center; gap: 3px; }
.cm-clock { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; padding: 1px 7px; border-radius: var(--r-pill); background: var(--c-wa-soft); color: var(--c-wa-text); font-weight: 500; }
.cm-clock.is-soon { background: var(--c-warn-soft); color: var(--c-warn-text); }
.cm-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 10px 0; }
.cm-tags:not(:has(.cm-tag:not([hidden]))) { display: none; }
.cm-tag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 3px 0 8px; border-radius: var(--r-pill); background: var(--c-accent-soft); color: var(--c-accent-text);
          font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; }
.cm-tag[hidden] { display: none; }
.cm-tag .icon { width: 12px; height: 12px; vertical-align: 0; }
.cm-tag.is-ai { background: var(--t-violet-bg); color: var(--t-violet-fg); }
.cm-tag.is-phone { background: var(--c-hover); color: var(--c-text-2); }
:root .cm-tag-x { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; cursor: pointer; opacity: .7; }
:root .cm-tag-x:hover, :root .cm-tag-x:focus-visible { background: color-mix(in srgb, currentColor 14%, transparent); opacity: 1; }
.cm-tag-x .icon { width: 11px; height: 11px; }
:root .cm-form textarea[readonly] { color: var(--c-text-2); cursor: default; }
.cm-tools { display: inline-flex; align-items: center; gap: 2px; margin-left: -4px; }
:root .cm-tool { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 28px; height: 28px; padding: 0 6px;
                 border-radius: var(--r-md); color: var(--c-text-2); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; transition: background var(--dur), color var(--dur); }
:root .cm-tool:hover { background: var(--c-hover); color: var(--c-text); }
:root .cm-tool:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 0; }
:root .cm-tool:disabled { opacity: .4; cursor: default; }
.cm-tool .icon { width: 16px; height: 16px; vertical-align: 0; }
:root .cm-ai { color: var(--t-violet-fg); }
:root .cm-ai:hover { background: var(--t-violet-bg); color: var(--t-violet-fg); }
.cm-ai[aria-busy=true] .icon { animation: cm-spin 1s linear infinite; }
.composer.is-drafting .cm-form[data-form=chat] textarea { background: linear-gradient(90deg, transparent 0%, var(--t-violet-bg) 50%, transparent 100%) 0 0 / 200% 100%;
                                                          animation: cm-shimmer 1.1s linear infinite; }
@keyframes cm-spin { to { transform: rotate(360deg); } }
@keyframes cm-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .cm-ai[aria-busy=true] .icon, .composer.is-drafting .cm-form[data-form=chat] textarea { animation: none; } }
.composer.needs-template:not(.via-phone) textarea::placeholder { color: var(--c-warn-text); opacity: .8; }

/* the 24-hour window has closed: what WhatsApp still allows, and the way out */
.cm-window { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 8px; margin-bottom: 8px; padding: 8px 10px 8px 12px; border: 1px solid color-mix(in srgb, var(--c-warn) 30%, transparent);
             border-radius: var(--r-md); background: var(--c-warn-soft); color: var(--c-warn-text); font-size: var(--fs-md); line-height: 1.4; }
.cm-window-ic { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.cm-window-text { flex: 1 1 280px; min-width: 0; margin: 0; color: var(--c-text); }
.cm-window-text strong { font-weight: 600; }
.cm-window-acts { display: flex; flex: 0 1 auto; flex-wrap: wrap; gap: 6px; margin-left: auto; }
:root .cm-window-btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border: 1px solid var(--c-border-strong);
                       border-radius: var(--r-md); background: var(--c-bg); color: var(--c-text); font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; cursor: pointer; }
:root .cm-window-btn:hover { background: var(--c-hover); }
:root .cm-window-btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }
.cm-window-btn .icon { width: 14px; height: 14px; vertical-align: 0; }
.cm-wrap:has(.composer.via-phone) .cm-window { display: none; }

/* the quick replies: above the box, like Kommo's ⚡ list but with the text the customer reads */
.qr-menu { position: absolute; z-index: 30; left: 0; right: 0; bottom: calc(100% + 6px); display: flex; flex-direction: column; max-height: min(380px, 52vh); padding: 4px;
           border: 1px solid var(--c-border-strong); border-radius: var(--r-lg); background: var(--c-bg); box-shadow: var(--shadow-pop); animation: qr-in 120ms var(--ease); }
.qr-menu[hidden] { display: none; }
@keyframes qr-in { from { opacity: 0; transform: translateY(4px); } }
.qr-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 4px; color: var(--c-text-3); font-size: var(--fs-xs); font-weight: 600;
           letter-spacing: .02em; text-transform: uppercase; }
.qr-keys { display: inline-flex; align-items: center; gap: 3px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.qr-keys kbd { min-width: 18px; height: 18px; padding: 0 4px; font-size: 10px; }
.qr-list { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
:root .qr-item { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 18px minmax(64px, max-content) minmax(0, 1fr) auto; align-items: center; column-gap: 8px;
                 min-height: 34px; padding: 5px 8px; border-radius: var(--r-md); color: var(--c-text); font-size: var(--fs-md); cursor: pointer; }
:root .qr-item[hidden] { display: none; }
:root .qr-item[aria-selected=true] { background: var(--c-accent-soft); }
:root .qr-item:hover:not([aria-selected=true]) { background: var(--c-hover); }
.qr-ic { width: 15px; height: 15px; color: var(--c-warn); vertical-align: 0; }
.qr-ic.ai { color: var(--t-violet); }
.qr-ic.note { color: var(--t-amber-fg); }
.qr-ic.task { color: var(--c-accent); }
.qr-name { font-weight: 500; white-space: nowrap; }
.qr-name mark { padding: 0; background: none; color: var(--c-accent-text); font-weight: 700; }
.qr-text { min-width: 0; overflow: hidden; color: var(--c-text-3); text-overflow: ellipsis; white-space: nowrap; }
/* the reply under the cursor shows more of what the customer will read */
.qr-item[aria-selected=true] .qr-text { display: -webkit-box; color: var(--c-text-2); white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.qr-badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: var(--r-pill); background: var(--c-success-soft); color: var(--c-success-text);
            font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.qr-badge.is-phone { background: var(--c-hover); color: var(--c-text-2); font-weight: 500; }
.qr-badge .icon { width: 12px; height: 12px; vertical-align: 0; }
.qr-empty, .qr-none { margin: 0; padding: 8px 10px; color: var(--c-text-3); font-size: var(--fs-md); }
.qr-empty[hidden] { display: none; }
.qr-sep { margin: 4px 8px 2px; padding-top: 6px; border-top: 1px solid var(--c-border); color: var(--c-text-3); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.qr-sep[hidden] { display: none; }
.qr-manage { display: flex; align-items: center; gap: 6px; margin-top: 2px; padding: 6px 8px; border-top: 1px solid var(--c-border); color: var(--c-text-2); font-size: var(--fs-sm); text-decoration: none; }
.qr-manage:hover { color: var(--c-accent-text); }
.qr-manage .icon { width: 14px; height: 14px; vertical-align: 0; }

/* emoji: the ones a sales chat uses, above the tools */
.emoji-pop { position: absolute; z-index: 30; left: 0; bottom: calc(100% + 6px); display: grid; grid-template-columns: repeat(8, 34px); gap: 2px; padding: 6px;
             border: 1px solid var(--c-border-strong); border-radius: var(--r-lg); background: var(--c-bg); box-shadow: var(--shadow-pop); animation: qr-in 120ms var(--ease); }
.emoji-pop[hidden] { display: none; }
:root .emoji { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-md); font-size: 20px; line-height: 1; cursor: pointer; }
:root .emoji:hover, :root .emoji:focus-visible { background: var(--c-hover); }

/* a message that did not go: say so and offer to send it again */
.bubble-retry { display: block; clear: both; margin: 2px 0 0; }
:root .bubble-retry .link { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--c-danger-text); font-size: var(--fs-sm);
                            font-weight: 600; cursor: pointer; }
.bubble-retry .icon { width: 13px; height: 13px; vertical-align: 0; }
.tick-queued .icon { width: 13px; height: 13px; }

/* the side panel over the board and the leads list */
.lead-panel { position: fixed; z-index: 35; top: 0; right: 0; bottom: 0; width: min(800px, calc(100vw - var(--rail-w) - 200px)); background: var(--c-bg);
              border-left: 1px solid var(--c-border); box-shadow: -18px 0 44px rgba(17, 17, 26, .14); transform: translateX(104%); visibility: hidden;
              transition: transform 220ms var(--ease), visibility 0s linear 220ms; }
.lead-panel.is-open { transform: none; visibility: visible; transition: transform 220ms var(--ease), visibility 0s; }
.lead-panel.is-loading .lead-card { opacity: .6; transition: opacity 120ms; }
.lead-panel:focus { outline: none; }
:root .card.is-in-panel { box-shadow: 0 0 0 2px var(--c-accent); }
:root tr.is-in-panel > td, :root tr.is-in-panel:hover > td { background: var(--c-accent-soft); }

/* narrower cards: the panel, a small laptop */
@container card (max-width: 1040px) {
  .lc-grid { grid-template-columns: 300px minmax(0, 1fr); }
  .lc-head { padding: 10px 16px 12px; }
  .lc-src { display: none; }
  .lc-section { padding: 12px 16px 8px; }
  .lc-side > .callout { margin: 12px 16px 2px; }
  .fld { grid-template-columns: 100px minmax(0, 1fr); }
  .lc-feed { padding: 4px 16px 14px; }
  .lc-dock { padding: 6px 16px 12px; }
  .lc-feedbar { padding: 8px 12px; }
  .cm-keys { display: none; }
  .cm-to-num, .cm-to .cm-dot { display: none; }
  .fs-long, .feed-status.is-replied, .j-when { display: none; }
  .fs-short { display: inline; }
  :root .feed-chip { padding: 0 8px; }
}
/* one column: chat first, the fields one tab away (phones, a narrow panel) */
@container card (max-width: 720px) {
  .lc-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "head" "tabs" "body"; }
  .lc-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; padding: 6px 12px 10px; border-right: 0; border-bottom: 0; }
  .lc-bar, .lc-stage, .lc-outcome, .lc-incoming { grid-column: 1 / -1; }
  .lc-bar { margin: 0 -6px 4px; }
  .lc-who { grid-column: 1; margin-bottom: 8px; gap: 10px; }
  .lc-who .avatar-lg { width: 36px; height: 36px; font-size: 13px; }
  .lc-actions { grid-column: 2; grid-row: 2; align-self: start; margin-top: 4px; gap: 4px; }
  .lc-act { width: var(--touch); height: var(--touch); padding: 0; justify-content: center; border-radius: 50%; }
  .lc-act span { display: none; }
  .lc-more > summary.lc-act { display: inline-flex; width: var(--touch); }
  .lc-act .icon { width: 18px; height: 18px; }
  :root .lc-stage { margin-bottom: 4px; }
  .lc-stage-row { margin-bottom: 8px; }
  .lc-pipe { display: none; }
  .lc-tabs { grid-area: tabs; display: flex; padding: 0 8px; border-bottom: 1px solid var(--c-border); background: var(--c-bg); }
  .lc-side, .lc-main { grid-area: body; border-right: 0; }
  .lead-card[data-tab=chat] .lc-side, .lead-card[data-tab=details] .lc-main { display: none; }
  .lc-feedbar { padding: 6px 8px; }
  .lc-feed { padding: 2px 10px 10px; }
  .bubble { max-width: 86%; }
  .fe-avatar { display: none; }
  .lc-dock { padding: 4px 8px 8px; }
  .task-pin { padding: 6px 10px; margin-bottom: 6px; }
  .task-for { display: none; }
  .task-nudge { margin-bottom: 6px; padding: 6px 10px; }
  .fld { grid-template-columns: 108px minmax(0, 1fr); min-height: 40px; }
  .cm-to, .feed-status, :root .feed-chip:disabled { display: none; }
  /* WhatsApp's own composer: the text and a round send button on one line */
  .cm-form:not(.cm-task):not([hidden]) { display: flex; align-items: flex-end; gap: 6px; padding-right: 6px; }
  :root .cm-form:not(.cm-task) textarea { flex: 1; min-width: 0; padding: 8px 10px 9px; }
  .cm-form:not(.cm-task) .cm-foot { padding: 0 0 6px; }
  .cm-form:not(.cm-task) .cm-hint { display: none; }
  :root .cm-form:not(.cm-task) .cm-send { width: var(--touch); height: var(--touch); min-height: var(--touch); padding: 0; border-radius: 50%; font-size: 0; gap: 0; }
  .cm-form:not(.cm-task) .cm-send .icon { width: 18px; height: 18px; }
  .cm-form:not(.cm-task):not([hidden]) { flex-wrap: wrap; }
  .cm-form:not(.cm-task) .cm-tags { flex-basis: 100%; }
  .cm-form:not(.cm-task) .cm-foot { gap: 2px; }
  .cm-form:not(.cm-task) .cm-tools { margin: 0; }
  .cm-ai span { display: none; }
  :root .cm-tool { min-width: 34px; height: 38px; }
  .cm-tool .icon { width: 19px; height: 19px; }
  .qr-menu { max-height: min(400px, 52vh); overflow-y: auto; }
  .qr-list { flex: none; overflow: visible; }
  .qr-keys { display: none; }
  :root .qr-item { grid-template-columns: 18px minmax(0, 1fr) auto; row-gap: 1px; min-height: 44px; }
  .qr-item .qr-text { grid-column: 2 / -1; grid-row: 2; }
  .qr-item .qr-badge { grid-column: 3; grid-row: 1; }
  .cm-window { font-size: var(--fs-sm); }
  .cm-window-acts { flex-basis: 100%; margin-left: 0; padding-left: 24px; }
  .composer-modes { padding: 5px 6px 0; }
  :root .cm-send-task { height: 36px; }
}
:root .lc-tabs button { all: unset; box-sizing: border-box; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px;
                        border-bottom: 2px solid transparent; color: var(--c-text-2); font-weight: 500; cursor: pointer; }
:root .lc-tabs button[aria-selected=true] { border-bottom-color: var(--c-accent); color: var(--c-text); }
:root .lc-tabs button:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }
.lc-tabs .icon { width: 16px; height: 16px; vertical-align: 0; }
.lc-tab-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--c-wa-strong);
                color: var(--c-inverse); font-size: 11px; font-weight: 700; }

@media (max-width: 767px) {
  /* The card is a chat screen: it takes the whole phone, with its own back arrow (WhatsApp's layout). */
  body:has(.lead-card.mode-page) :is(.rail, .topbar) { display: none; }
  body:has(.lead-card.mode-page) .content { padding: 0; }
  body:has(.lead-card.mode-page) .toasts { bottom: calc(96px + var(--safe-b)); }
  .lead-card.mode-page { height: 100vh; height: 100dvh; min-height: 0; padding-bottom: var(--safe-b); }
  :root .lc-back { display: grid; }
  :root .lc-nav .icon-btn { width: var(--touch); height: var(--touch); }
  .lead-panel { display: none; }
  :root .cm-form textarea { font-size: 16px; }
  :root .inline.is-editing .inline-input { font-size: 16px; height: 36px; }
  .stage-menu { position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: none; padding: 8px 10px calc(12px + var(--safe-b));
                border-radius: 16px 16px 0 0; animation: sheet-up 220ms var(--ease); }
  :root .stage-opt { height: 44px; font-size: 15px; }
  .stage-opt kbd { display: none; }
  .lc-stage:has(.stage-menu:not([hidden]))::after { content: ""; position: fixed; inset: 0; z-index: 39; background: rgba(15, 15, 20, .36); animation: fade-in 180ms var(--ease); }
  :root .reason-chip { height: 34px; font-size: 14px; }
}

/* ------------------------------------------------------------------ 8b. follow-ups (U7)
 * app/templates/leads/_task.html, app/static/tasks.js. One picker wherever a follow-up is planned
 * (the composer's Task mode, the "then" of a task being done, the board's "No tasks" popover): what
 * to do first, with what is picked at its right; day chips, then time chips; the type as a
 * segmented control. The open task is Kommo's green card at the bottom of the feed: amber when it
 * is due today, red when late. */
.title-wrap { position: relative; padding: 8px 10px 0; }
:root .title-wrap input[type=text] { width: 100%; height: 36px; margin: 0; padding: 0 156px 0 11px; border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
                                     background: var(--c-bg); font-size: 14px; }
:root .title-wrap input[type=text]:is(:focus, :focus-visible) { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-focus); outline: none; --pico-box-shadow: none; }
.when-sum { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: var(--r-pill); background: var(--c-accent-soft); color: var(--c-accent-text);
            font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; pointer-events: none; }
.when-sum .icon { width: 13px; height: 13px; vertical-align: 0; }
.when-sum.is-late { background: var(--c-danger-soft); color: var(--c-danger-text); }
.when-sum.in-title { position: absolute; top: 14px; right: 16px; }

.when { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 0; }
.when-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
/* (0,3,0): Pico styles [role=group] as a joined input group (margin, width, radius, flex-grow) */
:root .when-row[role=group] { width: auto; margin: 0; border-radius: 0; box-shadow: none; }
:root .when-row[role=group] > * { flex: none; margin: 0; }
:root .wchip { all: unset; box-sizing: border-box; position: relative; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px;
               border: 1px solid var(--c-border-strong); border-radius: var(--r-pill); background: var(--c-bg); color: var(--c-text); font-size: var(--fs-sm); font-weight: 500;
               white-space: nowrap; font-variant-numeric: tabular-nums; cursor: pointer; transition: background var(--dur), border-color var(--dur), color var(--dur); }
:root .wchip:hover { background: var(--c-hover); }
:root .wchip:focus-visible, :root .wchip-other:focus-within { outline: 2px solid var(--c-accent); outline-offset: 1px; }
:root .wchip.is-picked { background: var(--c-accent-soft); border-color: var(--c-accent); color: var(--c-accent-text); font-weight: 600; }
:root .wchip:disabled { opacity: .4; cursor: default; background: transparent; text-decoration: line-through; }
.wchip-hint { color: var(--c-text-3); font-weight: 400; }
.wchip.is-picked .wchip-hint { color: inherit; opacity: .75; }
.wchip .icon { width: 13px; height: 13px; vertical-align: 0; color: var(--c-text-3); }
.wchip.is-picked .icon { color: inherit; }
:root .wchip-other input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
:root .when-times .wchip { padding: 0 8px; }
.wchip-other.is-picked [data-other-label] { font-weight: 600; }

.ttype { display: inline-flex; flex: none; align-items: center; gap: 2px; padding: 2px; border-radius: var(--r-md); background: var(--c-hover); }
.ttype-chip { position: relative; display: inline-flex; align-items: center; gap: 5px; height: 26px; margin: 0; padding: 0 9px; border-radius: 6px; color: var(--c-text-2);
              font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; cursor: pointer; user-select: none; }
:root .ttype-chip input[type=radio] { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.ttype-chip:hover { color: var(--c-text); }
.ttype-chip:has(input:checked) { background: var(--c-bg); color: var(--c-text); box-shadow: 0 1px 2px rgba(17, 17, 26, .14); }
.ttype-chip:has(input:focus-visible) { outline: 2px solid var(--c-accent); outline-offset: 0; }
.ttype-chip .icon { width: 14px; height: 14px; vertical-align: 0; }
.ttype-chip:has(input[value=whatsapp]) .icon { color: var(--c-wa-strong); }

/* the composer's Task mode */
.cm-task-foot { display: flex; align-items: center; gap: 10px; padding: 10px 8px 8px 10px; }
.cm-for { display: inline-flex; align-items: center; gap: 4px; min-width: 0; margin: 0 auto 0 0; color: var(--c-text-2); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-for .icon { flex: none; width: 14px; height: 14px; vertical-align: 0; color: var(--c-text-3); }
:root .cm-for select { width: auto; max-width: 160px; height: 28px; margin: 0; padding: 0 24px 0 6px; border: 0; background-color: transparent; font-size: var(--fs-sm); box-shadow: none; }
:root .cm-send-task .icon { width: 15px; height: 15px; }
.cm-task-foot .cm-send-task { margin-left: auto; }
.cm-for + .cm-keys, .cm-for + .cm-send-task { margin-left: 0; }
/* while the Task mode is open, the nudge has done its job */
.lc-dock:has(.composer[data-mode=task]) .task-nudge { display: none; }

/* the "no tasks" nudge (Kommo's yellow bar) */
.task-nudge .nudge-text { min-width: 0; }
.task-nudge strong { font-weight: 600; }

/* an open task, pinned at the bottom of the feed */
.task-pin { margin-bottom: 8px; border: 1px solid color-mix(in srgb, var(--c-success) 38%, var(--c-border)); border-left: 3px solid var(--c-success); border-radius: var(--r-md);
            background: var(--c-bg); box-shadow: 0 1px 2px rgba(17, 17, 26, .04); }
.task-pin.is-today { border-color: color-mix(in srgb, var(--c-warn) 42%, var(--c-border)); border-left-color: var(--c-warn); }
.task-pin.is-late { border-color: color-mix(in srgb, var(--c-danger) 38%, var(--c-border)); border-left-color: var(--c-danger); }
.task-pin.is-completing, .task-pin.is-snoozing { box-shadow: var(--shadow-pop); }
.pin-form { margin: 0; }
.pin-row { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 11px; }
.task-body { flex: 1; min-width: 0; }
.pin-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; color: var(--c-text-2); font-size: var(--fs-sm); }
.pin-meta .icon { width: 13px; height: 13px; vertical-align: 0; }
.task-due { display: inline-flex; align-items: center; gap: 4px; color: var(--c-success-text); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.task-pin.is-today .task-due { color: var(--c-warn-text); }
.task-pin.is-late .task-due { color: var(--c-danger-text); }
.pin-type { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.task-for { display: inline-flex; align-items: center; gap: 5px; color: var(--c-text-3); white-space: nowrap; }
/* F.183: the title wraps to two lines (one cut "Final drawings due to their en…" on a phone); past two it ends in … */
.pin-title { display: -webkit-box; margin: 2px 0 0; overflow: hidden; color: var(--c-text); font-size: var(--fs-md); font-weight: 500; line-height: 1.35; overflow-wrap: anywhere;
             -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
:root .task-check { all: unset; box-sizing: border-box; display: grid; place-items: center; flex: none; width: 22px; height: 22px; border: 1.5px solid var(--c-border-strong);
                    border-radius: 50%; color: transparent; cursor: pointer; transition: all var(--dur); }
:root .task-check:hover, :root .task-check:focus-visible, :root .task-check[aria-expanded=true] { border-color: var(--c-success); background: var(--c-success-soft); color: var(--c-success-text); }
.task-check .icon { width: 13px; height: 13px; stroke-width: 2.6; vertical-align: 0; }
.pin-acts { display: flex; flex: none; align-items: center; gap: 4px; }
:root .pin-btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 28px; padding: 0 10px;
                border: 1px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-bg); color: var(--c-text-2); font-size: var(--fs-sm); font-weight: 500;
                white-space: nowrap; cursor: pointer; transition: background var(--dur), color var(--dur), border-color var(--dur); }
:root .pin-btn:hover, :root .pin-btn[aria-expanded=true] { background: var(--c-hover); color: var(--c-text); }
:root .pin-btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }
:root .pin-btn-done { border-color: color-mix(in srgb, var(--c-success) 55%, transparent); color: var(--c-success-text); }
:root .pin-btn-done:hover, :root .pin-btn-done[aria-expanded=true] { background: var(--c-success-soft); color: var(--c-success-text); }
.pin-btn .icon { width: 14px; height: 14px; vertical-align: 0; }

/* done: the result, then the next follow-up (one Enter) */
.pin-done { padding: 2px 12px 12px 43px; border-top: 1px dashed var(--c-border); }
.pin-done[hidden], .pin-snooze[hidden] { display: none; }
:root .pin-input { width: 100%; height: 36px; margin: 10px 0 0; padding: 0 11px; border: 1px solid var(--c-border-strong); border-radius: var(--r-md); font-size: 14px; }
:root .pin-input:is(:focus, :focus-visible) { border-color: var(--c-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-success) 22%, transparent); outline: none; --pico-box-shadow: none; }
.pin-then { display: inline-flex; align-items: center; gap: 7px; margin: 10px 0 0; color: var(--c-text); font-size: var(--fs-md); font-weight: 500; cursor: pointer; }
:root .pin-then input[type=checkbox] { width: 16px; height: 16px; margin: 0; }
.task-pin:not(.plans-next) .pin-next { display: none; }
.pin-next .title-wrap, .pin-next .when { padding-left: 0; padding-right: 0; }
.pin-next .title-wrap { padding-top: 6px; }
:root .pin-next .title-wrap input[type=text] { margin: 0; }
.pin-next .when-sum.in-title { top: 12px; right: 6px; }
.pin-next .ttype { margin-top: 8px; }
.pin-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.pin-keys { margin-right: auto; color: var(--c-text-3); font-size: var(--fs-xs); }
:root .pin-cancel { all: unset; box-sizing: border-box; height: 30px; padding: 0 8px; border-radius: var(--r-md); color: var(--c-text-2); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; }
:root .pin-cancel:hover { background: var(--c-hover); color: var(--c-text); }
:root .pin-submit { min-height: 30px; height: 30px; padding: 0 14px; border-radius: var(--r-md); font-size: var(--fs-md); font-weight: 600;
                   --pico-background-color: var(--c-success); --pico-border-color: var(--c-success); --pico-color: var(--c-inverse); }
:root .pin-submit:is(:hover, :focus) { --pico-background-color: var(--c-success-text); --pico-border-color: var(--c-success-text); }

/* snooze: one click to another time, or a day and a time */
.pin-snooze { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 12px 10px 43px; border-top: 1px dashed var(--c-border); }
.pin-snooze form { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 0; }
.pin-snooze-label { margin-right: 3px; color: var(--c-text-3); font-size: var(--fs-sm); }
:root .pin-snooze-other input { width: auto; height: 28px; margin: 0; padding: 0 6px; font-size: var(--fs-sm); }

/* the board: the "No tasks" flag plans the follow-up in a popover, without opening the deal */
:root button.flag-plan { all: unset; box-sizing: border-box; display: inline-flex; flex: none; align-items: center; gap: 4px; height: 18px; margin: -1px -6px -1px 0; padding: 0 6px;
                         border-radius: var(--r-pill); color: var(--c-warn-text); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; cursor: pointer; }
:root button.flag-plan::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-warn); }
:root button.flag-plan:hover, :root button.flag-plan:focus-visible, :root button.flag-plan[aria-expanded=true] { background: var(--c-warn-soft); }
:root button.flag-plan:hover::before, :root button.flag-plan:focus-visible::before { content: "+ "; }
:root .card.is-planning { box-shadow: 0 0 0 2px var(--c-warn); }
/* just planned: the new pin (or the card's new flag) glows once */
.task-pin.is-new { animation: pin-new 1.8s var(--ease); }
.flag.is-new { animation: flag-new 1.8s var(--ease); border-radius: var(--r-pill); }
@keyframes pin-new { 0%, 30% { background: var(--c-success-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-success) 30%, transparent); } 100% { background: var(--c-bg); } }
@keyframes flag-new { 0%, 30% { background: var(--c-success-soft); box-shadow: 0 0 0 4px var(--c-success-soft); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .task-pin.is-new, .flag.is-new { animation: none; } }
@media (max-width: 767px), (pointer: coarse) {
  :root button.flag-plan { height: 26px; margin: -4px -8px -4px 0; padding: 0 9px; background: var(--c-warn-soft); }
}
.plan-pop { position: fixed; z-index: 50; top: 80px; left: 80px; width: 460px; max-width: calc(100vw - 24px); border: 1px solid var(--c-border); border-radius: var(--r-lg);
            background: var(--c-bg); box-shadow: var(--shadow-pop); animation: fade-in 120ms var(--ease); }
.plan-pop[hidden] { display: none; }
.plan-pop form { margin: 0; }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 0 12px; }
.plan-q { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; color: var(--c-text-2); font-size: var(--fs-md); }
.plan-q strong { color: var(--c-text); font-weight: 600; }
.plan-q .icon { width: 15px; height: 15px; color: var(--c-warn); }
.plan-foot { display: flex; align-items: center; gap: 10px; padding: 12px 10px 10px; }
.plan-foot .cm-keys { margin-left: auto; }
.plan-pop .ttype-chip:not(:has(input:checked)) span, .plan-pop .ttype-chip:not(:has(input:checked)) { font-size: 0; gap: 0; }
.plan-pop .ttype-chip:not(:has(input:checked)) .icon { width: 15px; height: 15px; }
.plan-pop .wchip-other:not(.is-picked) [data-other-label] { display: none; }
:root .plan-pop .wchip-other:not(.is-picked) { width: 30px; padding: 0; justify-content: center; }

/* narrower cards (the panel): the type shows its name only when picked, "another day / time" is
   its icon until one is picked */
@container card (max-width: 1040px) {
  .wchip-other:not(.is-picked) [data-other-label] { display: none; }
  :root .wchip-other:not(.is-picked) { width: 30px; padding: 0; justify-content: center; }
  .cm-task .ttype-chip:not(:has(input:checked)) { gap: 0; font-size: 0; }
  .cm-task .ttype-chip:not(:has(input:checked)) .icon { width: 15px; height: 15px; }
  .pin-acts .pin-btn span { display: none; }
  :root .pin-acts .pin-btn { width: 30px; padding: 0; }
  :root .pin-acts .pin-btn-done { width: auto; padding: 0 10px; }
  :root .pin-acts .pin-btn-done span { display: inline; }
  .task-for-name { display: none; }
  .pin-done, .pin-snooze { padding-left: 12px; }
}
/* phones and a narrow panel: the chips scroll sideways, bigger targets */
@container card (max-width: 720px) {
  .title-wrap { padding: 8px 8px 0; }
  :root .title-wrap input[type=text] { height: 40px; padding-right: 138px; font-size: 16px; }
  .when-sum.in-title { top: 16px; right: 14px; }
  .when { padding: 8px 0 0; }
  .when-row { flex-wrap: nowrap; overflow-x: auto; padding: 0 8px; scrollbar-width: none;
              mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  .when-row::-webkit-scrollbar { display: none; }
  :root .wchip { flex: none; height: 32px; }
  .cm-task-foot { padding: 10px 8px 8px; }
  .cm-for { display: none; }
  :root .cm-send-task { height: 36px; }
  .pin-row { padding: 8px 8px 8px 10px; }
  .pin-done, .pin-snooze { padding-left: 12px; }
  .pin-next .when-row { padding: 0; }
  :root .pin-input { font-size: 16px; }
}
@media (max-width: 767px) {
  .plan-pop { top: auto !important; right: 0; bottom: 0; left: 0 !important; width: auto; max-width: none; padding-bottom: var(--safe-b); border-radius: 16px 16px 0 0;
              animation: sheet-up 220ms var(--ease); }
  :root .plan-pop .title-wrap input[type=text] { height: 40px; font-size: 16px; }
  .plan-pop .when-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  :root .plan-pop .wchip { flex: none; height: 32px; }
}

/* ------------------------------------------------------------------ 8c. contact record (U11, /contacts/{id})
 * app/templates/contacts/_card.html: the lead card's layout and classes (section 8) around the person.
 * What is new: the relationship strip (won / open / last message), the deal the chat is on now (its
 * stage and bar, a link), the deals list with New deal, and the deal markers in the feed where the
 * conversation moves from one of their deals to another. */
.pc-sub { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 5px; margin: 1px 0 0; min-width: 0; color: var(--c-text-2); font-size: var(--fs-md); line-height: 1.35; }
.pc-sub a { color: var(--c-text-2); font-weight: 500; text-decoration: underline; text-decoration-color: var(--c-border-strong); text-underline-offset: 2px; }
.pc-sub a:hover { color: var(--c-accent-text); }
.pc-at { color: var(--c-text-3); }
.pc-num { font-variant-numeric: tabular-nums; }

/* won / open / last message: three numbers a rep reads before writing */
:root .pc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 0 12px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-subtle); }
.pc-stat { min-width: 0; padding: 7px 10px 8px; }
.pc-stat + .pc-stat { border-left: 1px solid var(--c-border); }
:root .pc-stat dt { display: flex; align-items: center; gap: 4px; margin: 0 0 1px; color: var(--c-text-3); font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; }
.pc-stat dt .icon { width: 12px; height: 12px; vertical-align: 0; }
:root .pc-stat dd { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 5px; margin: 0; min-width: 0; }
.pc-stat strong { color: var(--c-text); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-stat small { color: var(--c-text-3); font-size: var(--fs-xs); white-space: nowrap; }
.pc-stat .faint { font-size: var(--fs-md); }
.pc-stat.is-won dt, .pc-stat.is-won strong { color: var(--c-success-text); }
.pc-stat.is-waiting dt, .pc-stat.is-waiting strong { color: var(--c-warn-text); }
.pc-stat.is-late dt, .pc-stat.is-late strong { color: var(--c-danger-text); }

/* the deal the chat is on now: the deal card's stage row and bar, one click from the deal */
.pc-now { display: block; margin: 0 -8px 12px; padding: 6px 8px 8px; border-radius: var(--r-md); color: var(--c-text); transition: background-color var(--dur); }
a.pc-now:hover { background: var(--c-hover); text-decoration: none; color: var(--c-text); }
.pc-now-row { display: flex; align-items: center; gap: 8px; min-width: 0; margin-bottom: 8px; }
:root .stage-btn.is-static { flex: none; cursor: inherit; }
.pc-now:hover .stage-btn.is-static { background: color-mix(in srgb, var(--stage) 21%, var(--c-bg)); }
.pc-now-name { display: -webkit-box; flex: 1; min-width: 0; overflow: hidden; color: var(--c-text); font-weight: 500; line-height: 1.3;
               -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.pc-now .lc-progress .seg { cursor: inherit; }
:root .pc-now .lc-progress .seg:hover { transform: none; }
:root .pc-now.is-won .lc-progress .seg { background-color: var(--t-green); }
:root .pc-now.is-lost .lc-progress .seg { background-color: color-mix(in srgb, var(--c-danger) 22%, var(--c-border)); }
.pc-now.is-won .stage-ic { color: var(--c-success-text); }
.pc-now.is-lost .stage-ic { color: var(--c-danger-text); }

/* section heads: a count and one action */
.lc-sec-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px; border-radius: var(--r-pill); background: var(--c-hover);
            color: var(--c-text-2); font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
:root .lc-sec-btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 3px; height: 24px; margin-right: -6px; padding: 0 6px; border-radius: var(--r-sm);
                    color: var(--c-accent-text); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
:root .lc-sec-btn:hover { background: var(--c-accent-soft); }
:root .lc-sec-btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 0; }
.lc-sec-btn .icon { width: 14px; height: 14px; vertical-align: 0; }
.lc-tab-n { margin-left: 2px; color: var(--c-text-3); font-size: var(--fs-xs); font-weight: 600; }

/* New deal: what they want now and (optionally) its value, in place */
:root .pc-new { margin: 2px 0 10px; padding: 10px; border: 1px solid var(--c-accent); border-radius: var(--r-md); background: var(--c-bg); box-shadow: 0 0 0 3px var(--c-focus);
                animation: pop-in 140ms var(--ease); }
.pc-new[hidden] { display: none; }
:root .pc-new-field { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 10px; height: 34px; border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
                      background: var(--c-bg); color: var(--c-text-3); font-size: var(--fs-md); }
.pc-new-field:focus-within { border-color: var(--c-accent); }
.pc-new-field .icon { flex: none; width: 15px; height: 15px; vertical-align: 0; }
:root .pc-new-field input { flex: 1; min-width: 0; height: 32px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; color: var(--c-text); font-size: var(--fs-md); }
:root .pc-new-field input:focus { box-shadow: none; outline: none; --pico-box-shadow: none; }
.pc-new-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
:root .pc-new-money { flex: 1; min-width: 0; }
.pc-cur { color: var(--c-text-2); font-weight: 600; }
:root .pc-new-cancel { all: unset; box-sizing: border-box; height: 32px; padding: 0 10px; border-radius: var(--r-md); color: var(--c-text-2); font-size: var(--fs-md); cursor: pointer; }
:root .pc-new-cancel:hover { background: var(--c-hover); color: var(--c-text); }
:root .pc-new-add { width: auto; min-height: 32px; height: 32px; margin: 0; padding: 0 12px; font-size: var(--fs-md); font-weight: 600; }
.pc-new-hint { display: flex; align-items: center; gap: 5px; margin: 7px 0 0; color: var(--c-text-3); font-size: var(--fs-xs); }
.pc-new-hint kbd { min-width: 16px; height: 16px; font-size: 10px; }

/* the deals: open first, each in its stage colour; the one the chat is on has a bar */
.pc-deals { display: flex; flex-direction: column; gap: 2px; margin: 0 -8px; padding: 0; list-style: none; }
.pc-deal { position: relative; margin: 0; list-style: none; }
.pc-deal-link { display: flex; flex-direction: column; gap: 3px; padding: 7px 8px 8px 11px; border-radius: var(--r-md); color: var(--c-text); }
.pc-deal-link:hover { background: var(--c-hover); text-decoration: none; color: var(--c-text); }
.pc-deal::before { content: ""; position: absolute; left: 2px; top: 9px; bottom: 9px; width: 3px; border-radius: 2px; background: transparent; }
.pc-deal.is-current::before { background: var(--c); }
.pc-deal.is-current .pc-deal-link { background: color-mix(in srgb, var(--c) 7%, var(--c-bg)); }
.pc-deal.is-current .pc-deal-link:hover { background: color-mix(in srgb, var(--c) 12%, var(--c-bg)); }
.pc-deal-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pc-deal-top .stage-chip { flex: none; gap: 3px; }
.pc-deal-top .stage-chip .icon { width: 13px; height: 13px; vertical-align: 0; }
.pc-deal.is-won .stage-chip { background: var(--c-success-soft); color: var(--c-success-text); }
.pc-deal.is-lost .stage-chip { background: var(--c-danger-soft); color: var(--c-danger-text); }
.pc-deal-name { flex: 1; min-width: 0; overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.pc-deal.is-lost .pc-deal-name { color: var(--c-text-2); }
.pc-deal-val { flex: none; color: var(--c-text); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-deal.is-lost .pc-deal-val { color: var(--c-text-3); text-decoration: line-through; }
.pc-deal-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 10px; min-width: 0; color: var(--c-text-3); font-size: var(--fs-sm); }
.pc-deal-meta > span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.pc-deal-meta .icon { width: 13px; height: 13px; vertical-align: 0; }
.pc-deal-who { color: var(--c-text-2); }
.pc-deal-next { color: var(--c-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-deal-next.is-late { color: var(--c-danger-text); font-weight: 500; }
.pc-deal-none { color: var(--c-warn-text); font-weight: 500; }
.pc-deal-chat { margin-left: auto; padding: 0 6px 0 4px; border-radius: var(--r-pill); background: var(--c-wa-soft); color: var(--c-wa-text); font-size: var(--fs-xs); font-weight: 600; line-height: 18px; }
.pc-deal-chat .icon { width: 12px; height: 12px; }
.pc-empty { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 6px; color: var(--c-text-2); font-size: var(--fs-md); }
.pc-empty .icon { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--c-text-3); }

/* About: a few lines of what the team should know, edited in place */
:root .inline-about .inline-show { align-items: flex-start; min-height: 28px; }
:root .inline-about .inline-text { display: -webkit-box; white-space: pre-line; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; }
:root .inline-about.is-editing .inline-input { height: auto; min-height: 96px; padding: 6px; resize: vertical; line-height: 1.45; }
.inline-static.inline-about { white-space: pre-line; }
.pc-links { margin: 0; padding: 0; list-style: none; }
.pc-links li { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-height: 30px; margin: 0; list-style: none; }
.pc-links a { display: inline-flex; align-items: center; gap: 6px; color: var(--c-text); font-weight: 500; }
.pc-links .icon { width: 15px; height: 15px; color: var(--c-text-3); vertical-align: 0; }
.pc-links .inline-form { display: inline; margin: 0; }
:root .pc-links .link { padding: 0 4px; border: 0; background: none; box-shadow: none; color: var(--c-accent-text); font-size: var(--fs-sm); cursor: pointer; }
:root .menu-item.is-danger { color: var(--c-danger-text); }
:root .menu-item.is-danger .icon { color: var(--c-danger-text); }

/* the feed across their deals: a marker where the conversation moves to another deal */
.feed-deal { display: flex; align-items: center; gap: 10px; margin: 16px 0 10px; }
.feed-deal::before, .feed-deal::after { content: ""; flex: 1; height: 1px; background: var(--c-border-strong); }
.fd-pill { display: inline-flex; align-items: center; gap: 6px; max-width: min(88%, 560px); min-width: 0; padding: 4px 10px 4px 8px; border: 1px solid var(--c-border-strong); border-radius: var(--r-pill);
           background: var(--c-bg); color: var(--c-text-2); font-size: var(--fs-sm); box-shadow: 0 1px 2px rgba(17, 17, 26, .05); }
a.fd-pill:hover { border-color: var(--c-accent); color: var(--c-text); text-decoration: none; }
.icon.fd-ic { flex: none; width: 14px; height: 14px; color: var(--c-text-3); vertical-align: 0; }
.feed-deal.is-new .fd-pill { border-color: color-mix(in srgb, var(--c-accent) 40%, transparent); background: var(--c-accent-soft); }
.feed-deal.is-new .icon.fd-ic, .feed-deal.is-new .fd-what { color: var(--c-accent-text); }
.fd-what { flex: none; font-weight: 600; white-space: nowrap; }
.fd-name { min-width: 0; overflow: hidden; color: var(--c-text); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.fd-pill .stage-chip { flex: none; height: 18px; font-size: var(--fs-xs); }
.feed-deal.is-won .fd-pill .stage-chip { background: var(--c-success-soft); color: var(--c-success-text); }
.feed-deal.is-lost .fd-pill .stage-chip { background: var(--c-danger-soft); color: var(--c-danger-text); }
.fd-val { flex: none; color: var(--c-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* while a deal's stretch of the chat is on screen, its marker stays at the top of the feed */
.feed-block[hidden] { display: none; }
.feed-block > .feed-deal { position: sticky; top: -4px; z-index: 2; margin: 0; padding: 12px 0 10px; background: var(--c-chrome); }
.feed-block + .feed-block { margin-top: 10px; }
/* the deal switcher: every deal of theirs, or one */
.feed-deals { margin-left: 8px; }
.feed-deals .icon { width: 13px; height: 13px; vertical-align: 0; }
:root .fd-chip { max-width: 170px; gap: 6px; }
.fd-chip .stage-dot { background: var(--c); }
.fd-chip.is-won .stage-dot { background: var(--c-success); }
.fd-chip.is-lost .stage-dot { background: var(--c-danger); }
.fd-chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* which deal a message goes on (the composer's line) and a pinned task is about */
.cm-deal { display: inline-flex; align-items: center; gap: 3px; max-width: 220px; min-width: 0; color: var(--c-text-2); font-weight: 500; }
.cm-deal span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pin-deal { display: inline-flex; align-items: center; gap: 3px; max-width: 220px; min-width: 0; color: var(--c-text-2); }
.pin-deal span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.pin-deal:hover { color: var(--c-accent-text); }

@container card (max-width: 1040px) {
  .pc-stat { padding: 6px 8px 7px; }
  .pc-stat strong { font-size: 13px; }
  .cm-deal { max-width: 150px; }
  :root .fd-chip { max-width: 120px; }
}
@container card (max-width: 720px) {
  .pc-stats, .pc-now { grid-column: 1 / -1; }
  :root .pc-stats { margin-bottom: 8px; }
  .pc-stat { padding: 5px 8px 6px; }
  .pc-stat small { display: none; }
  .pc-now { margin-bottom: 4px; padding: 4px 8px 6px; }
  .pc-now-row { margin-bottom: 7px; }
  .pin-deal { display: none; }
  .pc-sub { font-size: var(--fs-sm); }
  .fd-val { display: none; }
  .pc-deal-link { padding-block: 9px 10px; }
  /* the filters and the deal switcher scroll sideways: the edge fades to say so */
  .person-card .lc-feedbar { -webkit-mask-image: linear-gradient(to right, #000 86%, transparent); mask-image: linear-gradient(to right, #000 86%, transparent); padding-right: 32px; }
  .feed-deals { margin-left: 4px; }
}

/* ------------------------------------------------------------------ 9. pipeline settings (U12, /settings/pipeline)
 * Sections on the right, their links on the left (sticky). Every row is a form that saves itself;
 * inputs look like text until hovered or focused (".ghost-input"), so the page reads like the board
 * it configures, not like a form. */
.content:has(> .set-page) { max-width: 1320px; }
.set-page { display: grid; grid-template-columns: 188px minmax(0, 1fr); gap: 36px; align-items: start; max-width: 1180px; }
.set-nav { position: sticky; top: calc(var(--topbar-h) + 20px); display: flex; flex-direction: column; gap: 1px; padding-top: 4px; }
.set-nav-group { margin: 14px 10px 4px; font-size: var(--fs-xs); font-weight: 600; color: var(--c-text-3); letter-spacing: .03em; text-transform: uppercase; }
.set-nav-group:first-child { margin-top: 0; }
.set-nav-item { display: flex; align-items: center; gap: 9px; height: 30px; padding: 0 10px; border-radius: var(--r-sm); color: var(--c-text-2); font-weight: 500; }
.set-nav-item:hover { background: var(--c-hover); color: var(--c-text); text-decoration: none; }
.set-nav-item[aria-current] { background: var(--c-accent-soft); color: var(--c-accent-text); }
.set-nav-item[aria-current] .icon { stroke-width: 2.1; }
.set-nav-foot { display: flex; gap: 8px; margin: 18px 10px 0; padding-top: 14px; border-top: 1px solid var(--c-border); color: var(--c-text-3); font-size: var(--fs-sm); line-height: 1.4; }
.set-nav-foot .icon { width: 14px; height: 14px; margin-top: 1px; color: var(--c-success); }
.set-main { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.set-head h1 { margin: 0; font-size: var(--fs-xl); }
.set-head p { margin: 3px 0 0; color: var(--c-text-2); }

.set-card { margin: 0; border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-bg); scroll-margin-top: calc(var(--topbar-h) + 16px); }
.set-page details { margin: 0; }
.set-page details > summary { line-height: normal; }
.set-page details > summary::after { display: none; }
.set-card.just-saved { animation: set-saved 900ms var(--ease); }
@keyframes set-saved { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-success) 0%, transparent); }
                       30% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-success) 22%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
.set-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 18px 12px; }
.set-card-title h2 { margin: 0; font-size: var(--fs-lg); }
.set-card-title p { margin: 3px 0 0; color: var(--c-text-2); max-width: 90ch; }
.set-card-title kbd { vertical-align: 1px; }

/* text that becomes an input on hover / focus */
:root input.ghost-input, :root textarea.ghost-input { height: 30px; margin: 0; padding: 0 8px; border: 1px solid transparent; background: transparent; box-shadow: none;
  border-radius: var(--r-sm); color: var(--c-text); transition: border-color var(--dur), background-color var(--dur); }
:root input.ghost-input:hover { border-color: var(--c-border); background: var(--c-subtle); }
:root input.ghost-input:focus { border-color: var(--c-accent); background: var(--c-bg); box-shadow: 0 0 0 3px var(--c-focus); outline: none; }
:root input.ghost-input[aria-invalid=true] { border-color: var(--c-danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-danger) 22%, transparent); }
:root input.ghost-input::placeholder { color: var(--c-text-3); }
:root .set-card select { height: 30px; margin: 0; padding-left: 8px; font-size: var(--fs-md); border-color: var(--c-border); }

/* the switch that posts 0/1 */
.set-switch { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-weight: 500; color: var(--c-text-2); font-size: var(--fs-sm); cursor: pointer; white-space: nowrap; }
.set-switch input[type=checkbox][role=switch] { margin: 0; }

/* drag handles, locks, row menus */
.st-grip { display: grid; place-items: center; width: 22px; }
:root .grip-btn { all: unset; display: grid; place-items: center; width: 22px; height: 28px; border-radius: var(--r-sm); color: var(--c-text-3); cursor: grab; }
:root .grip-btn:hover { background: var(--c-hover); color: var(--c-text-2); }
:root .grip-btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 0; color: var(--c-text); }
.grip-btn .icon { width: 15px; height: 15px; }
.grip-lock { display: grid; place-items: center; width: 22px; color: var(--c-text-3); opacity: .55; }
.grip-lock .icon { width: 13px; height: 13px; }
.is-ghost { opacity: .35; }
.is-chosen { background: var(--c-subtle); box-shadow: var(--shadow-pop); border-radius: var(--r-md); }
.row-menu { position: relative; }
.row-menu > summary { list-style: none; width: 28px; height: 28px; }
.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu[open] > summary { background: var(--c-hover); color: var(--c-text); }
.row-menu-pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; width: 260px; padding: 12px; background: var(--c-bg); border: 1px solid var(--c-border);
                border-radius: var(--r-md); box-shadow: var(--shadow-pop); animation: pop-in 140ms var(--ease); }
.row-menu-pop form { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.row-menu-pop label { margin: 0; font-weight: 500; font-size: var(--fs-sm); color: var(--c-text-2); }
:root .row-menu-pop select { width: 100%; height: 32px; margin: 0; }
.rm-title { margin: 0; font-weight: 600; }
.rm-note { margin: 0; color: var(--c-text-3); font-size: var(--fs-sm); line-height: 1.4; }
.row-menu-pop button.danger { align-self: flex-start; }
.row-menu-spacer { width: 28px; }

/* ---- stages */
.pipe-new { position: relative; flex: none; }
.pipe-new > summary { list-style: none; }
.pipe-new > summary::-webkit-details-marker { display: none; }
.pipe-new-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 300px; padding: 12px; background: var(--c-bg); border: 1px solid var(--c-border);
                border-radius: var(--r-md); box-shadow: var(--shadow-pop); margin: 0; animation: pop-in 140ms var(--ease); }
.pipe-new-pop label { font-size: var(--fs-sm); color: var(--c-text-2); margin-bottom: 8px; }
.pipe-new-row { display: flex; gap: 6px; }
:root .pipe-new-row input { margin: 0; flex: 1; }
.pipe-new-pop small { display: block; margin-top: 8px; }
.pipe-tabs { display: flex; gap: 2px; margin: 0 18px 10px; padding: 2px; border-radius: var(--r-md); background: var(--c-chrome); border: 1px solid var(--c-border); width: fit-content; max-width: calc(100% - 36px); overflow-x: auto; }
.pipe-tabs a { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 6px; color: var(--c-text-2); font-weight: 500; white-space: nowrap; }
.pipe-tabs a:hover { color: var(--c-text); text-decoration: none; }
.pipe-tabs a[aria-current] { background: var(--c-bg); color: var(--c-text); box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
.pipe-tabs .pipe-star .icon { width: 12px; height: 12px; color: var(--c-success); }
.pipe-tabs a.is-archived { opacity: .6; }
.pipe-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 18px; padding: 8px 0; border-top: 1px solid var(--c-border); }
.pipe-name { display: flex; align-items: center; gap: 6px; margin: 0; min-width: 0; }
.pipe-name-label { margin: 0; color: var(--c-text-3); font-weight: 500; font-size: var(--fs-sm); }
:root input.pipe-name-input { width: 220px; font-weight: 600; font-size: var(--fs-lg); }
.pipe-flags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pipe-flags form { margin: 0; }
.pipe-default { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: var(--r-pill); background: var(--c-success-soft); color: var(--c-success-text); font-size: var(--fs-sm); font-weight: 500; }
.pipe-default .icon { width: 13px; height: 13px; }
.pipe-open { display: inline-flex; align-items: center; gap: 5px; color: var(--c-text-2); font-size: var(--fs-sm); font-weight: 500; }
.pipe-open .icon { width: 14px; height: 14px; }

/* the board in miniature */
.stage-preview { display: flex; align-items: stretch; gap: 4px; margin: 4px 18px 14px; padding: 10px; border-radius: var(--r-md); background: var(--c-chrome); border: 1px solid var(--c-border); overflow-x: auto; }
.sp-col { flex: 1 1 0; min-width: 76px; display: flex; flex-direction: column; gap: 5px; padding: 8px 9px 9px; border-radius: 6px; background: var(--c-bg);
          border: 1px solid var(--c-border); transition: border-color var(--dur); }
.sp-col.is-closed { flex: .72 1 0; background: color-mix(in srgb, var(--stage) 7%, var(--c-bg)); }
.sp-bar { display: block; height: 3px; border-radius: 2px; background: var(--stage); }
.sp-name { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-n { font-size: var(--fs-sm); color: var(--c-text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sp-gap { flex: 0 0 1px; margin: 0 6px; background: var(--c-border-strong); }

.st-table { padding: 0 10px 8px; }
.st-head, .st-form { display: grid; grid-template-columns: 22px 26px minmax(140px, 1fr) 118px 118px 150px; align-items: center; column-gap: 10px; }
.st-head { padding: 0 44px 6px 8px; font-size: var(--fs-xs); font-weight: 600; color: var(--c-text-3); letter-spacing: .03em; text-transform: uppercase; }
.st-head > :nth-child(2) { visibility: hidden; }
.st-list { list-style: none; margin: 0; padding: 0; }
.st-list li { list-style: none; margin: 0; }
.st-row { position: relative; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 6px 0 8px; border-radius: var(--r-md); }
.st-row::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--stage); opacity: 0; transition: opacity var(--dur); }
.st-row:hover, .st-row:focus-within { background: var(--c-subtle); }
.st-row:hover::before, .st-row:focus-within::before { opacity: 1; }
.st-row.is-moved { animation: set-moved 700ms var(--ease); }
@keyframes set-moved { 0% { background: var(--c-accent-soft); } 100% { background: transparent; } }
.st-list + .st-list, .st-add + .st-list { border-top: 1px dashed var(--c-border-strong); margin-top: 6px; padding-top: 6px; }
.st-form { flex: 1; min-width: 0; margin: 0; }
:root input.st-name { width: 100%; font-weight: 500; }
.st-row.is-locked input.st-name { color: var(--c-text); }
.st-kind { display: flex; }
:root .st-kind select.kind-select { width: 112px; border-color: transparent; background-color: transparent; color: var(--c-text-2); font-weight: 500; }
:root .st-kind select.kind-select:hover { border-color: var(--c-border); background-color: var(--c-subtle); color: var(--c-text); }
:root .st-kind select.kind-select:focus { border-color: var(--c-accent); background-color: var(--c-bg); color: var(--c-text); }
.st-row.is-in .kind-select { color: var(--c-wa-text) !important; }
.kind-chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 500; }
.kind-chip .icon { width: 13px; height: 13px; }
.kind-won { background: var(--c-success-soft); color: var(--c-success-text); }
.kind-lost { background: var(--c-danger-soft); color: var(--c-danger-text); }
.st-rot { display: flex; align-items: center; gap: 4px; color: var(--c-text-2); }
:root .set-card input[type=number].ghost-input { -moz-appearance: textfield; appearance: textfield; }
:root .set-card input[type=number].ghost-input::-webkit-inner-spin-button, :root .set-card input[type=number].ghost-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
:root input.st-days { width: 52px; text-align: right; font-variant-numeric: tabular-nums; }
.st-unit { font-size: var(--fs-sm); color: var(--c-text-3); }
.st-days:placeholder-shown + .st-unit { visibility: hidden; }
.st-deals { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.st-deals a { display: inline-flex; align-items: center; min-height: 24px; color: var(--c-text); font-weight: 500; } /* a 24px target (2.5.8) */
.st-value { color: var(--c-text-3); font-size: var(--fs-sm); }

/* colour swatches */
.swatch-pick { position: relative; }
.swatch-pick > summary { list-style: none; }
.swatch-pick > summary::-webkit-details-marker { display: none; }
.swatch-dot { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; }
.swatch-dot::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--stage); box-shadow: 0 0 0 3px color-mix(in srgb, var(--stage) 22%, transparent); transition: transform var(--dur) var(--ease); }
.swatch-dot:hover::before { transform: scale(1.15); }
.swatch-dot:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }
.swatch-pop { position: absolute; left: -6px; top: calc(100% + 6px); z-index: 30; display: grid; grid-template-columns: repeat(7, 24px); gap: 6px; padding: 10px;
              background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-md); box-shadow: var(--shadow-pop); animation: pop-in 140ms var(--ease); }
:root .swatch { position: relative; display: block; width: 24px; height: 24px; margin: 0; border-radius: 50%; background: var(--sw); cursor: pointer; }
.swatch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.swatch:has(input:checked) { box-shadow: 0 0 0 2px var(--c-bg), 0 0 0 4px var(--sw); }
.swatch:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--c-bg), 0 0 0 4px var(--c-accent); }

/* add a row */
.st-add { display: flex; align-items: center; gap: 8px; min-height: 42px; margin: 2px 0 0; padding: 0 6px 0 8px; border-radius: var(--r-md); }
.st-add-icon { display: grid; place-items: center; width: 22px; color: var(--c-text-3); }
.st-add-icon + input { margin-left: 24px; }
:root .st-add input { flex: 1; height: 32px; margin: 0; border-style: dashed; background: transparent; }
:root .st-add input:focus { border-style: solid; background: var(--c-bg); }
.st-add-btn .kbd-group, .st-add-btn kbd { margin-left: 2px; }
.st-add:not(:focus-within) .st-add-btn { color: var(--c-text-3); } /* quieter by colour, not opacity (opacity gave 3.8:1) */
.st-note { display: flex; align-items: center; gap: 12px; margin: 4px 18px 16px; padding: 10px 12px; border-radius: var(--r-md); background: var(--c-subtle); border: 1px solid var(--c-border); }
.st-note > .icon { color: var(--c-text-3); flex: none; }
.st-note p { margin: 0; flex: 1; color: var(--c-text-2); }
.st-note form { margin: 0; }

/* ---- loss reasons */
.lr-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; padding: 0 18px 16px 10px; }
.lr-list { list-style: none; margin: 0; padding: 0; }
.lr-row { position: relative; display: flex; align-items: center; min-height: 40px; padding: 0 6px 0 8px; border-radius: var(--r-md); list-style: none; margin: 0; }
.lr-row:hover, .lr-row:focus-within { background: var(--c-subtle); }
.lr-row.is-off .lr-name { color: var(--c-text-3); text-decoration: line-through; text-decoration-color: var(--c-border-strong); }
.lr-form { flex: 1; display: grid; grid-template-columns: 22px minmax(120px, 1fr) auto 108px; align-items: center; column-gap: 10px; margin: 0; }
:root input.lr-name { width: 100%; font-weight: 500; }
.lr-meta { display: flex; align-items: center; gap: 10px; white-space: nowrap; font-size: var(--fs-sm); }
.lr-used { color: var(--c-text-2); font-variant-numeric: tabular-nums; }
.lr-system { display: inline-flex; align-items: center; gap: 4px; color: var(--c-text-3); max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.lr-system .icon { width: 12px; height: 12px; flex: none; }
.lr-system span { overflow: hidden; text-overflow: ellipsis; }
.lr-auto { font-size: var(--fs-sm); white-space: nowrap; }
.lr-preview { margin: 0; align-self: start; position: sticky; top: calc(var(--topbar-h) + 16px); }
.lr-preview figcaption { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: var(--fs-xs); font-weight: 600; color: var(--c-text-3); letter-spacing: .03em; text-transform: uppercase; }
.lr-preview figcaption .icon { width: 13px; height: 13px; }
:root .lr-preview .lost-picker { position: static; width: auto; max-width: none; animation: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 6px 18px rgba(17, 17, 26, .06); border-radius: var(--r-lg); padding: 14px; }
:root .lr-preview .lost-chip { height: 28px; font-size: var(--fs-sm); cursor: default; }

/* ---- quick replies */
.tp-list { list-style: none; margin: 0; padding: 0 18px 4px 10px; display: flex; flex-direction: column; gap: 8px; }
.tp-row { position: relative; display: flex; align-items: flex-start; gap: 6px; list-style: none; margin: 0; padding: 10px 6px 10px 8px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-bg); }
.tp-row:focus-within { border-color: color-mix(in srgb, var(--c-accent) 45%, var(--c-border)); }
.tp-row.is-off { background: var(--c-subtle); }
.tp-row.is-off .tp-preview { opacity: .5; }
.tp-row > .row-menu { margin-top: 1px; }
.tp-form { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 16px; margin: 0; }
.tp-edit { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tp-top { display: flex; align-items: center; gap: 6px; }
.tp-slash { color: var(--c-text-3); font-weight: 600; margin-left: 2px; }
:root input.tp-name { flex: 1; min-width: 0; font-weight: 600; padding-left: 4px; }
:root .tp-top select.tp-kind { width: auto; flex: none; }
:root textarea.tp-body { margin: 0 0 0 30px; width: calc(100% - 30px); min-height: 46px; resize: vertical; line-height: 1.45; border-color: var(--c-border); background: var(--c-subtle); }
:root textarea.tp-body:focus { background: var(--c-bg); }
.tp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-left: 30px; }
.tp-vars { display: flex; flex-wrap: wrap; gap: 4px; }
.tp-edit > .tp-vars { margin-left: 30px; }
:root .var-chip { all: unset; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-pill); background: var(--c-accent-soft); color: var(--c-accent-text);
                  font-size: var(--fs-xs); font-weight: 500; cursor: pointer; }
:root .var-chip::before { content: "+"; margin-right: 3px; opacity: .7; }
:root .var-chip:hover { background: color-mix(in srgb, var(--c-accent) 18%, var(--c-bg)); }
:root .var-chip:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }
/* WhatsApp's own chat: wallpaper, the green outgoing bubble with its tail and read ticks */
.set-card { --wa-wall: #efeae2; --wa-out: #d9fdd3; --wa-ink: #111b21; }
:root[data-theme="dark"] .set-card { --wa-wall: #0b141a; --wa-out: #005c4b; --wa-ink: #e9edef; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .set-card { --wa-wall: #0b141a; --wa-out: #005c4b; --wa-ink: #e9edef; } }
.tp-preview { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding: 8px 12px 10px; border-radius: var(--r-md); align-self: stretch; background: var(--wa-wall); }
.tp-reads { align-self: flex-start; font-size: var(--fs-xs); font-weight: 500; color: color-mix(in srgb, var(--wa-ink) 65%, transparent); } /* 65%: 5.05:1 on the wall; 55% was 3.7 */
.wa-bubble { position: relative; max-width: 100%; padding: 6px 9px 16px 10px; border-radius: 8px 0 8px 8px; background: var(--wa-out); color: var(--wa-ink); font-size: var(--fs-md); line-height: 1.4;
             white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.wa-bubble::after { content: ""; position: absolute; top: 0; right: -8px; border-style: solid; border-width: 0 0 8px 8px; border-color: transparent transparent transparent var(--wa-out); }
.wa-meta { position: absolute; right: 6px; bottom: 2px; color: #53bdeb; }
.wa-meta .icon { width: 14px; height: 14px; }
.tp-sid { display: flex; align-items: center; gap: 5px; margin: auto 0 0; align-self: stretch; font-size: var(--fs-xs); font-weight: 500; color: color-mix(in srgb, var(--wa-ink) 65%, transparent); }
.tp-sid .icon { width: 13px; height: 13px; flex: none; }
.tp-sid.is-set { color: color-mix(in srgb, var(--c-success-text) 88%, #000); } /* success-text alone is 4.49:1 on the wall */
:root .tp-sid input.ghost-input { flex: 1; min-width: 0; height: 24px; padding: 0 6px; font-family: var(--font-mono); font-size: var(--fs-xs); border-color: color-mix(in srgb, var(--wa-ink) 14%, transparent); background: color-mix(in srgb, var(--c-bg) 70%, transparent); }
.tp-new { margin: 4px 18px 16px 10px; padding: 10px 12px 10px 8px; border: 1px dashed var(--c-border-strong); border-radius: var(--r-md); }
.tp-new:focus-within { border-style: solid; border-color: color-mix(in srgb, var(--c-accent) 45%, var(--c-border)); }
.tp-new-fields { display: flex; flex-direction: column; gap: 6px; }
.tp-new .st-add-icon { width: 22px; }
.tp-new .tp-top { padding-left: 0; }
:root .tp-new input.tp-name { margin-left: 2px; }
.tp-new:not(:focus-within) textarea.tp-body { min-height: 36px; }
.tp-new button .kbd-group kbd { background: transparent; color: inherit; border-color: color-mix(in srgb, currentColor 40%, transparent); }

/* ---- WhatsApp lines */
.ch-list { list-style: none; margin: 0; padding: 0 18px; }
.ch-row { list-style: none; margin: 0; padding: 10px 0; border-top: 1px solid var(--c-border); }
.ch-row.is-off { opacity: .6; }
.ch-form { display: grid; grid-template-columns: 36px minmax(160px, 1fr) minmax(190px, 240px) minmax(190px, 240px); align-items: center; gap: 16px; margin: 0; }
.ch-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--c-wa-soft); color: var(--c-wa-text); }
.ch-icon.is-sms { background: var(--t-blue-bg); color: var(--t-blue-fg); }
.ch-icon .icon { width: 19px; height: 19px; }
.ch-who { display: flex; flex-direction: column; min-width: 0; }
:root input.ch-name { font-weight: 600; margin-left: -8px; }
.ch-number { font-size: var(--fs-sm); color: var(--c-text-3); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-field { display: flex; flex-direction: column; gap: 3px; margin: 0; font-weight: 400; }
.ch-label { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 500; color: var(--c-text-3); }
.ch-label .icon { width: 12px; height: 12px; }
:root .ch-field select { width: 100%; }
.ch-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin: 2px 18px 0; padding: 12px 0 0; border-top: 1px solid var(--c-border); }
.ch-order { display: flex; gap: 8px; margin: 0; font-size: var(--fs-sm); color: var(--c-text-2); line-height: 1.45; }
.ch-order strong { color: var(--c-text); font-weight: 500; }
.ch-order .icon { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--c-text-3); }
.ch-connect { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 14px 18px 16px; padding: 12px 14px; border-radius: var(--r-md); background: var(--c-subtle); border: 1px solid var(--c-border); }
.ch-connect p { margin: 0; }
.ch-connect-title { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.ch-connect-title .icon { width: 14px; height: 14px; }
.ch-connect .faint { font-size: var(--fs-sm); margin-top: 2px; }
.copy-box { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.copy-box code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 5px 8px; border-radius: var(--r-sm); background: var(--c-bg); border: 1px solid var(--c-border); font-size: var(--fs-xs); color: var(--c-text-2); }

/* ---- when a customer writes again */
.rules-form { margin: 0; padding: 0 18px 16px; }
.rule-example { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 12px; border-radius: var(--r-md); background: var(--c-wa-soft); color: var(--c-text); font-size: var(--fs-md); }
.rule-example .icon { color: var(--c-wa-text); flex: none; }
.rule-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
:root .rule-card { width: auto; }
.rule-card { position: relative; display: flex; gap: 10px; margin: 0; padding: 12px; border: 1px solid var(--c-border); border-radius: var(--r-md); cursor: pointer; font-weight: 400;
             transition: border-color var(--dur), background-color var(--dur), box-shadow var(--dur); }
.rule-card:hover { border-color: var(--c-border-strong); }
.rule-card:has(input:checked) { border-color: var(--c-accent); background: color-mix(in srgb, var(--c-accent) 4%, var(--c-bg)); box-shadow: 0 0 0 1px var(--c-accent); }
.rule-card:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--c-focus); }
.rule-card input[type=radio] { flex: none; margin-top: 1px; }
.rule-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rule-title { font-weight: 600; line-height: 1.3; }
.rule-rec { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: var(--r-pill); background: var(--c-success-soft); color: var(--c-success-text); font-size: var(--fs-xs); font-weight: 500; vertical-align: 1px; }
.rule-body { color: var(--c-text-2); font-size: var(--fs-sm); line-height: 1.45; }
.rule-outcome { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; margin-top: auto; padding: 3px 8px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 500; }
.rule-outcome .icon { width: 13px; height: 13px; }
.rule-outcome.is-new { background: var(--t-blue-bg); color: var(--t-blue-fg); }
.rule-outcome.is-same { background: var(--t-grey-bg); color: var(--t-grey-fg); }
.rule-default { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: var(--fs-sm); }
.rule-default .icon { width: 13px; height: 13px; }
.reply-alert { display: flex; align-items: flex-start; gap: 12px; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--c-border); border-radius: var(--r-md); }
.reply-alert.is-on { border-color: color-mix(in srgb, var(--c-danger) 30%, var(--c-border)); }
.reply-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--c-warn-soft); color: var(--c-warn-text); }
.reply-alert.is-on .reply-icon { background: var(--c-danger-soft); color: var(--c-danger-text); }
.reply-text { flex: 1; min-width: 0; }
.reply-text p { margin: 0; }
.reply-title { font-weight: 600; }
.reply-line { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin-top: 2px !important; color: var(--c-text-2); }
.reply-line label { margin: 0; font-weight: 400; color: var(--c-text-2); }
:root input.reply-minutes { width: 64px; text-align: center; font-weight: 600; border-color: var(--c-border); font-variant-numeric: tabular-nums; }
.reply-where { margin-top: 4px !important; font-size: var(--fs-sm); }
.reply-sample { display: inline-flex; align-items: center; gap: 3px; color: var(--c-danger-text); font-weight: 500; }
.reply-sample .icon { width: 12px; height: 12px; }
.reply-alert .set-switch { margin-top: 6px; }

/* ---- narrower screens */
@media (max-width: 1180px) {
  .set-page { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .set-nav { position: sticky; top: var(--topbar-h); z-index: 15; flex-direction: row; gap: 4px; margin: 0 -24px; padding: 8px 24px; overflow-x: auto; scrollbar-width: none;
             background: color-mix(in srgb, var(--c-bg) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--c-border); }
  .set-nav::-webkit-scrollbar { display: none; }
  .set-nav-group, .set-nav-foot { display: none; }
  .set-nav-item { flex: none; height: 30px; border: 1px solid var(--c-border); border-radius: var(--r-pill); padding: 0 12px; }
  .set-nav-item[aria-current] { border-color: transparent; }
  .set-card { scroll-margin-top: calc(var(--topbar-h) + 60px); }
}
@media (max-width: 960px) {
  .tp-form { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .tp-preview { align-items: flex-end; margin-left: 30px; }
  .lr-layout { grid-template-columns: minmax(0, 1fr); }
  .lr-preview { position: static; }
  .rule-cards { grid-template-columns: minmax(0, 1fr); }
  .ch-form { grid-template-columns: 36px minmax(0, 1fr); }
  .ch-field { grid-column: 2 / -1; }
}
@media (max-width: 767px) {
  .set-nav { margin: -12px -12px 0; padding: 8px 12px; }
  .set-head h1 { font-size: 20px; }
  .set-main { gap: 14px; }
  .set-card { border-radius: var(--r-md); }
  .set-card-head { padding: 14px 14px 10px; flex-wrap: wrap; }
  .set-card-title p { font-size: 14px; }
  .pipe-bar, .stage-preview, .st-note, .ch-list, .ch-connect { margin-left: 12px; margin-right: 12px; }
  .ch-list { padding: 0; }
  .ch-notes { grid-template-columns: 1fr; margin: 2px 12px 0; }
  :root input.pipe-name-input { width: 170px; }
  .pipe-open { display: none; }
  .stage-preview { padding: 8px; gap: 3px; }
  .sp-col { min-width: 92px; padding: 6px 7px; }
  .sp-col.is-closed { min-width: 72px; }
  .pipe-bar { gap: 8px; }
  .pipe-default { font-size: 0; gap: 0; padding: 0 7px; }
  .pipe-default::after { content: "Default"; font-size: 12px; margin-left: 4px; }
  .sp-n { font-size: 11px; }
  .st-table { padding: 0 6px 6px; }
  .st-head { display: none; }
  .st-row { align-items: flex-start; padding: 6px 2px 6px 4px; }
  .st-row::before { top: 8px; bottom: 8px; }
  /* row 1: handle, colour, name; row 2 (under the name): kind, stuck after, deals */
  .st-form { grid-template-columns: 22px 26px auto auto minmax(0, 1fr); column-gap: 6px; row-gap: 2px; }
  .st-grip { grid-column: 1; grid-row: 1; }
  .st-form > .swatch-pick { grid-column: 2; grid-row: 1; }
  :root input.st-name { grid-column: 3 / -1; grid-row: 1; height: 36px; font-size: 16px; }
  .st-kind { grid-column: 3; grid-row: 2; padding-left: 2px; }
  .st-rot { grid-column: 4; grid-row: 2; }
  .st-deals { grid-column: 5; grid-row: 2; justify-content: flex-end; flex-direction: column; align-items: flex-end; gap: 0; font-size: 13px; line-height: 1.25; }
  .st-value { font-size: 12px; }
  :root .st-kind select.kind-select { width: auto; height: 32px; font-size: 14px; padding-left: 8px; }
  :root input.st-days { width: 50px; height: 32px; font-size: 14px; }
  .row-menu { margin-top: 4px; }
  .row-menu-pop { width: min(290px, calc(100vw - 32px)); }
  .swatch-pop { grid-template-columns: repeat(5, 32px); gap: 8px; }
  :root .swatch { width: 32px; height: 32px; }
  :root .st-add input { height: 40px; font-size: 16px; }
  .st-add-icon + input { margin-left: 0; }
  .lr-layout { padding: 0 12px 12px 6px; gap: 14px; }
  .lr-row { align-items: flex-start; padding: 6px 2px 6px 4px; }
  .lr-form { grid-template-columns: 22px minmax(0, 1fr) auto; row-gap: 2px; }
  .lr-meta { grid-column: 2; grid-row: 2; padding-left: 8px; }
  .lr-form .set-switch, .lr-auto { grid-column: 3; grid-row: 1 / 3; }
  :root input.lr-name { height: 36px; font-size: 16px; }
  .lr-system { max-width: 150px; }
  .tp-list { padding: 0 12px 4px 6px; }
  .tp-row { padding: 8px 4px 8px 4px; }
  .tp-top { flex-wrap: wrap; row-gap: 4px; }
  :root input.tp-name { flex: 1 1 calc(100% - 60px); height: 36px; font-size: 16px; }
  :root .tp-top select.tp-kind { margin-left: 30px; }
  .tp-edit > .tp-vars { margin-left: 0; }
  :root .tp-top select.tp-kind { height: 32px; font-size: 14px; }
  :root textarea.tp-body { margin-left: 0; width: 100%; font-size: 16px; }
  .tp-foot, .tp-preview { margin-left: 0; }
  :root .tp-sid input.ghost-input { width: 150px; font-size: 13px; }
  .tp-new { margin: 4px 12px 12px 6px; }
  .ch-form { gap: 10px; }
  .copy-box { width: 100%; }
  .copy-box code { flex: 1; }
  .rules-form { padding: 0 12px 12px; }
  .reply-alert { flex-wrap: wrap; }
  :root input.reply-minutes { height: 34px; font-size: 16px; }
}

/* ------------------------------------------------------------------ 10. leads grid (U10, /leads)
 * app/templates/leads/list.html + _grid.html, app/static/grid.js. Like the board, the page fills the
 * window under the top bar and the table scrolls inside itself, so the header row stays put (and the
 * first two columns when it scrolls sideways). 34px rows, 13px type, one line per deal; colour only
 * where it means something: the stage chip, WhatsApp green for a customer waiting, amber "No tasks",
 * red overdue. Phones get the same rows as three-line cards. */
.content:has(> .grid-page) { max-width: none; padding: 0; }
.grid-page { position: relative; display: flex; flex-direction: column; height: calc(100vh - var(--topbar-h)); height: calc(100dvh - var(--topbar-h)); min-height: 360px; }

/* toolbar: whose deals, what needs you, search, stage / owner, the board */
.grid-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; padding: 10px 20px; border-bottom: 1px solid var(--c-border); }
.grid-flags { display: flex; align-items: center; gap: 6px; }
.flag-chip { --fc: var(--c-text-3); display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--c-border);
             border-radius: var(--r-pill); background: var(--c-bg); color: var(--c-text-2); font-weight: 500; white-space: nowrap; transition: background var(--dur), border-color var(--dur); }
.flag-chip:hover { background: var(--c-hover); color: var(--c-text); text-decoration: none; }
.flag-chip.fc-reply { --fc: var(--c-wa); }
.flag-chip.fc-overdue { --fc: var(--c-danger); }
.flag-chip.fc-none { --fc: var(--c-warn); }
.fc-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--fc); }
.fc-n { color: var(--c-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.flag-chip.is-zero { color: var(--c-text-3); }
.flag-chip.is-zero .fc-dot { opacity: .35; }
.flag-chip.is-zero .fc-n { color: var(--c-text-3); font-weight: 500; }
.flag-chip.is-on { background: color-mix(in srgb, var(--fc) 13%, var(--c-bg)); border-color: color-mix(in srgb, var(--fc) 50%, transparent); color: var(--c-text); }
.flag-chip .fc-x { width: 12px; height: 12px; margin-right: -2px; color: var(--c-text-2); }
.grid-search { width: 230px; }
.grid-filters { display: flex; align-items: center; gap: 8px; }
.g-select { margin: 0; }
:root .g-select select { width: auto; max-width: 170px; height: 30px; margin: 0; padding: 0 28px 0 10px; border-radius: var(--r-md); font-size: var(--fs-md);
                         background-position: center right 8px; color: var(--c-text); }
.g-sort-pick { display: none; }
:root .g-select-mode { all: unset; box-sizing: border-box; display: none; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: var(--r-md);
                       border: 1px solid var(--c-border); color: var(--c-text-2); font-weight: 500; cursor: pointer; }
.g-select-mode .icon { width: 15px; height: 15px; }
/* Mine: every row is the viewer's, so the owner column gives its room to the message */
.grid-page.is-mine .g-table .g-owner { display: none; }
@media (min-width: 1280px) {
  .grid-page.is-mine .g-table .g-deal { width: 320px; }
  .grid-page.is-mine .g-table .g-task { width: 256px; }
}

/* the table */
.grid-region { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.grid-active { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 20px 0; font-size: var(--fs-sm); }
.grid-active .chip { height: 24px; }
.grid-active .chip .icon:last-child { width: 12px; height: 12px; opacity: .7; }
.g-filter:hover { text-decoration: none; filter: brightness(.97); }
.grid-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; transition: opacity 120ms; }
.grid-page.htmx-request .grid-scroll { opacity: .55; transition-delay: 120ms; }
.grid-region { position: relative; }
.grid-page.htmx-request .grid-region::before { content: ""; position: absolute; top: 0; left: 0; right: 0; z-index: 4; height: 2px; background: var(--c-accent);
                                               transform-origin: left; animation: progress-crawl 1.2s var(--ease) forwards; }
.grid-page.has-selection .grid-scroll { padding-bottom: 72px; }
:root .g-table { width: 100%; min-width: 1080px; margin: 0; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: var(--fs-md); }
:root .g-table th, :root .g-table td { height: 34px; padding: 0 10px; border-bottom: 1px solid var(--c-border); background: var(--c-bg);
                                         white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; line-height: 1.2; }
:root .g-table thead th { position: sticky; top: 0; z-index: 2; color: var(--c-text-3); font-size: var(--fs-sm); font-weight: 500; }
.g-table .g-check { width: 48px; padding: 0 8px 0 20px; }
.g-table .g-deal { width: 272px; }
.g-table .g-stage { width: 148px; }
.g-table .g-value { width: 112px; text-align: right; }
.g-table .g-age { width: 76px; padding-left: 0; text-align: right; text-overflow: clip; }
.g-table .g-task { width: 212px; }
.g-table .g-owner { width: 156px; }
/* the deal stays in view when the table scrolls sideways */
:root .g-table .g-check { position: sticky; left: 0; z-index: 1; }
:root .g-table .g-deal { position: sticky; left: 48px; z-index: 1; }
:root .g-table thead .g-check, :root .g-table thead .g-deal { z-index: 3; }
.g-sort { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; color: var(--c-text-3); }
.g-sort span { overflow: hidden; text-overflow: ellipsis; }
.g-sort:hover { color: var(--c-text); text-decoration: none; }
.g-sort .icon { flex: none; width: 14px; height: 14px; vertical-align: 0; }
.g-sort.is-sorted { color: var(--c-text); }
.g-sort .g-arrow { width: 13px; height: 13px; color: var(--c-accent-text); }
:root .g-table input[type=checkbox] { width: 16px; height: 16px; margin: 0; vertical-align: middle; cursor: pointer; }
.g-lock { display: inline-grid; place-items: center; width: 16px; color: var(--c-text-3); opacity: .55; }
.g-lock .icon { width: 12px; height: 12px; }

/* rows */
.g-row { cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .g-row:hover td { background: var(--c-subtle); } }
.g-row:focus { outline: none; }
:root .g-row.is-cursor td { background: var(--c-subtle); }
:root .g-row.is-cursor td.g-check { box-shadow: inset 2px 0 0 var(--c-accent); }
:root .g-row.is-selected td { background: var(--c-accent-soft); }
:root .g-row.is-in-panel td { background: color-mix(in srgb, var(--c-accent) 9%, var(--c-bg)); }
:root .g-row.is-waiting td.g-check { box-shadow: inset 3px 0 0 var(--c-wa); }
:root .g-row.is-late:not(.is-waiting) td.g-check { box-shadow: inset 3px 0 0 var(--c-danger); }
.g-row.is-closed .g-who, .g-row.is-closed .g-value { color: var(--c-text-2); }
.g-row.is-landed td { animation: row-land 1.4s var(--ease); }
@keyframes row-land { 0%, 25% { background: var(--c-success-soft); } 100% { background: var(--c-bg); } }
:root a.g-who { display: flex; align-items: center; gap: 9px; min-width: 0; color: var(--c-text); }
:root .g-table a.g-who:hover { color: var(--c-text); text-decoration: none; }  /* the name alone reacts (fine pointers) */
@media (hover: hover) and (pointer: fine) { .g-who:hover .g-name { color: var(--c-accent-text); text-decoration: underline; text-underline-offset: 2px; } }
.g-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.g-sub { flex: 1 1 0; min-width: 24px; overflow: hidden; text-overflow: ellipsis; color: var(--c-text-3); }
.g-value { font-weight: 500; font-variant-numeric: tabular-nums; }
/* the stage chip: a native select laid over it (the phone's own picker, keyboard for free) */
.g-pick { position: relative; display: inline-flex; max-width: 100%; margin: 0; vertical-align: middle; cursor: pointer; }
.g-pick.is-locked { cursor: default; }
.g-chip { gap: 6px; max-width: 100%; }
.g-chip .icon { flex: none; width: 12px; height: 12px; }
.g-chip-name { overflow: hidden; text-overflow: ellipsis; }
.g-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.g-caret { margin-right: -2px; opacity: 0; transition: opacity var(--dur); }
.g-pick:hover .g-caret, .g-pick:focus-within .g-caret { opacity: .75; }
.g-pick:hover .g-chip { background: color-mix(in srgb, var(--c) 26%, var(--c-bg)); }
.g-pick:focus-within .g-chip { outline: 2px solid var(--c-accent); outline-offset: 1px; }
:root select.g-native { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer;
                        font-size: 16px; appearance: none; background: none; }
/* last message, and how long the customer has waited */
.g-line { display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 30px); min-width: 0; vertical-align: middle; color: var(--c-text-2); }
.g-line .icon { flex: none; width: 14px; height: 14px; color: var(--c-wa-strong); }
.g-line.out .icon { color: var(--c-accent); }
.g-line.none { color: var(--c-text-3); }
.g-text { overflow: hidden; text-overflow: ellipsis; }
.g-row.has-unread .g-line:not(.out) { color: var(--c-text); font-weight: 500; }
.g-unread { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: 9px; vertical-align: middle;
            background: var(--c-wa); color: #fff; font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.g-age { color: var(--c-text-3); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.g-wait { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--c-wa-soft);
          color: var(--c-wa-text); font-weight: 600; }
.g-wait .icon { width: 11px; height: 11px; }
.g-wait.is-warm { background: var(--c-warn-soft); color: var(--c-warn-text); }
.g-wait.is-late { background: var(--c-danger-soft); color: var(--c-danger-text); }
/* next task (the board's flag), owner */
.g-task .flag { font-size: var(--fs-sm); vertical-align: middle; }
.g-task .flag .icon { width: 13px; height: 13px; }
.g-task-title { margin-left: 8px; color: var(--c-text-3); }
.g-closed { color: var(--c-text-3); font-size: var(--fs-sm); }
.g-own { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; color: var(--c-text-2); vertical-align: middle; }
.g-own > span:last-child { overflow: hidden; text-overflow: ellipsis; }
:root .g-take { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: var(--r-md);
                border: 1px solid color-mix(in srgb, var(--c-wa) 45%, transparent); background: var(--c-wa-soft); color: var(--c-wa-text);
                font-size: var(--fs-sm); font-weight: 600; cursor: pointer; vertical-align: middle; }
:root .g-take:hover { background: color-mix(in srgb, var(--c-wa) 22%, var(--c-bg)); }
:root .g-take:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }
.g-take .icon { width: 13px; height: 13px; }
.grid-empty { padding: 48px 20px; }
.grid-end { display: flex; align-items: center; gap: 8px; margin: 0; padding: 14px 20px 14px 58px; color: var(--c-text-2); font-size: var(--fs-md); }
.grid-end > .icon { width: 16px; height: 16px; color: var(--c-wa-strong); }
.grid-end strong { color: var(--c-text); font-weight: 600; }
.grid-end a { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; }
.grid-end a .icon { width: 14px; height: 14px; }

/* footer: how many, how much */
.grid-foot { flex: none; display: flex; align-items: center; gap: 16px; height: 40px; padding: 0 20px; border-top: 1px solid var(--c-border);
             color: var(--c-text-2); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.grid-foot p { margin: 0; }
.gf-sum strong { color: var(--c-text); font-weight: 600; }
.grid-foot .sep { margin: 0 7px; color: var(--c-text-3); }
.gf-pager { display: flex; align-items: center; gap: 8px; }
.gf-pager .view-switch { height: 26px; }
.gf-keys { margin-left: auto; color: var(--c-text-3); display: inline-flex; align-items: center; gap: 4px; }
.gf-keys kbd { font-size: 10px; }

/* the bulk bar: what is selected and the four things to do with it (dark, like a toast) */
.bulk-bar { position: absolute; left: 50%; bottom: 52px; z-index: 30; display: flex; align-items: center; gap: 4px; margin: 0; padding: 6px;
            transform: translateX(-50%); border-radius: var(--r-lg); background: #1d1d20; color: #f4f4f5; font-size: var(--fs-md); white-space: nowrap;
            box-shadow: 0 16px 40px rgba(17, 17, 26, .24), 0 2px 6px rgba(17, 17, 26, .12), inset 0 0 0 1px rgba(255, 255, 255, .06);
            animation: toast-in 200ms var(--ease); }
.bulk-bar[hidden] { display: none; }
:root[data-theme="dark"] .bulk-bar { background: #2e2e34; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bulk-bar { background: #2e2e34; } }
.bulk-sel { display: flex; align-items: center; gap: 8px; padding-right: 8px; margin-right: 2px; border-right: 1px solid rgba(255, 255, 255, .14); }
.bulk-count strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.bulk-sum { color: #a1a1aa; font-variant-numeric: tabular-nums; }
.bulk-acts { display: flex; align-items: center; gap: 2px; }
.bulk-sep { width: 1px; height: 20px; margin: 0 4px; background: rgba(255, 255, 255, .14); }
.bulk-menu { position: relative; }
:root .bulk-btn, :root .bulk-clear { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px;
                                     border-radius: var(--r-md); color: #f4f4f5; font-weight: 500; cursor: pointer; }
:root .bulk-clear { width: 28px; height: 28px; padding: 0; justify-content: center; color: #a1a1aa; }
:root .bulk-btn:hover, :root .bulk-clear:hover, :root .bulk-btn[aria-expanded=true] { background: rgba(255, 255, 255, .1); color: #fff; }
:root .bulk-btn:focus-visible, :root .bulk-clear:focus-visible { outline: 2px solid #9db4ff; outline-offset: 0; }
.bulk-btn[hidden] { display: none !important; }
.bulk-btn .icon, .bulk-clear .icon { width: 16px; height: 16px; }
.bulk-btn .bulk-caret { width: 12px; height: 12px; opacity: .6; }
.bulk-won .icon { color: #4ade80; }
.bulk-lost .icon:first-child { color: #ff7a82; }
.bulk-pop { position: absolute; bottom: calc(100% + 10px); left: 0; z-index: 40; width: 270px; max-height: min(420px, 60vh); overflow-y: auto; padding: 6px;
            border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-bg); color: var(--c-text); box-shadow: var(--shadow-pop);
            white-space: normal; animation: pop-in 140ms var(--ease); }
.bulk-pop[hidden], .bulk-pop [hidden] { display: none; }
.bulk-pop-end { left: auto; right: 0; }
.bulk-pop .stage-opt { --c: var(--c-text-3); }
.bulk-pop .stage-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.bulk-hint { margin-left: auto; color: var(--c-text-3); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.bulk-note { margin: 4px 8px 6px; color: var(--c-text-3); font-size: var(--fs-sm); }
.bulk-reasons { padding: 2px 6px 8px; }

@media (min-width: 768px) and (max-width: 1279px) {
  .grid-search { width: 170px; }
  .g-table .g-deal { width: 232px; }
  .g-table .g-task { width: 180px; }
  .g-own > span:last-child { display: none; }
  .g-task-title { display: none; }
  .gf-keys { display: none; }
}

/* phones: three-line cards, the same facts; select mode for the bulk bar */
@media (max-width: 767px) {
  .grid-page { height: calc(100dvh - var(--topbar-h) - var(--tabbar-h) - var(--safe-b)); min-height: 0; }
  .grid-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--c-border); }
  .grid-bar .grid-tabs { grid-column: 1 / -1; grid-row: 1; }
  .grid-bar .grid-search { display: flex; grid-column: 1; grid-row: 2; width: auto; }
  :root .grid-search input { height: 34px; font-size: 16px; }
  .grid-bar .board-bar-end { grid-column: 2; grid-row: 2; margin: 0; gap: 6px; }
  .grid-bar .view-switch { height: 34px; }
  :root .g-select-mode { display: inline-flex; height: 34px; }
  .grid-bar .g-select-mode span { display: inline; }
  :root .g-select-mode[aria-pressed=true] { background: var(--c-accent-soft); border-color: var(--c-accent); color: var(--c-accent-text); }
  /* G3.1: the chips wrap, a finger high, so the whole row is on screen (/tasks, the board, leads) */
  .grid-flags { grid-column: 1 / -1; grid-row: 3; flex-wrap: wrap; justify-content: flex-start; overflow: visible; }
  .flag-chip { flex: none; height: auto; min-height: var(--touch); }
  .grid-filters { grid-column: 1 / -1; grid-row: 4; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
  .g-sort-pick { display: block; }
  :root .g-select select { width: 100%; max-width: none; height: 32px; font-size: 14px; }
  .grid-active { padding: 8px 12px 0; }

  :root .g-table { display: block; min-width: 0; }
  .g-table thead { display: none; }
  .g-table tbody { display: block; }
  :root .g-table tr.g-row { position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; column-gap: 8px; row-gap: 6px;
                            align-items: center; grid-template-areas: "check deal deal deal deal" "check stage msg age owner";
                            padding: 10px 12px; border-bottom: 1px solid var(--c-border); background: var(--c-bg); }
  :root .g-table tr.g-row td { position: static; display: block; width: auto; height: auto; padding: 0; border: 0; background: transparent; box-shadow: none; }
  :root .g-row.is-selected { background: var(--c-accent-soft); }
  :root .g-row.is-waiting { box-shadow: inset 3px 0 0 var(--c-wa); }
  :root .g-row.is-late:not(.is-waiting) { box-shadow: inset 3px 0 0 var(--c-danger); }
  .g-row:hover td { background: transparent; }
  :root .g-table tr.g-row td.g-check { grid-area: check; display: none; }
  .grid-page.is-selecting .g-table tr.g-row td.g-check { display: grid; place-items: center; padding: 0 4px 0 2px; overflow: visible; }
  :root .g-table input[type=checkbox] { width: 20px; height: 20px; }
  :root .g-table tr.g-row td.g-deal { grid-area: deal; padding-right: 118px; }
  :root a.g-who { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "av name" "av sub"; column-gap: 10px; row-gap: 1px; }
  .g-who .avatar { grid-area: av; width: 34px; height: 34px; font-size: 12px; }
  .g-name { grid-area: name; font-size: 15px; font-weight: 600; line-height: 20px; }
  .g-sub { grid-area: sub; min-width: 0; color: var(--c-accent-text); font-size: var(--fs-md); line-height: 18px; }
  /* value and next task sit on the right of the name's two lines */
  :root .g-table tr.g-row td.g-value { position: absolute; top: 10px; right: 12px; font-size: 15px; font-weight: 600; line-height: 20px; text-align: right; }
  :root .g-table tr.g-row td.g-task { position: absolute; top: 31px; right: 12px; max-width: 116px; text-align: right; line-height: 18px; }
  .g-task-title { display: none; }
  :root .g-table tr.g-row td.g-stage { grid-area: stage; padding-left: 44px; }
  .g-table td.g-msg { grid-area: msg; min-width: 0; }
  .g-line { max-width: calc(100% - 26px); font-size: var(--fs-md); }
  .g-table td.g-age { grid-area: age; }
  :root .g-table tr.g-row td.g-owner { grid-area: owner; }
  :root .grid-page.is-mine .g-table tr.g-row td.g-owner { display: none; }
  .g-owner .faint { display: none; }
  .grid-page.is-selecting .g-pick { pointer-events: none; }
  .g-own > span:last-child { display: none; }
  :root .g-take { height: 28px; padding: 0 8px; }
  /* a new chat's Accept sits on the right of the name (no task yet), the message keeps its line */
  :root .g-table tr.g-row:has(.g-take) td.g-owner { position: absolute; grid-area: auto; top: 9px; right: 12px; }
  :root .g-table tr.g-row:has(.g-take):not(:has(td.g-value .faint)) td.g-owner { top: 31px; }
  :root .g-table tr.g-row:has(.g-take):not(:has(td.g-value .faint)) .g-take { height: 22px; }
  .g-table td.g-value .faint { display: none; }
  .g-caret { opacity: .6; }
  .grid-empty { padding: 32px 12px; }
  .grid-end { padding: 14px 12px; flex-wrap: wrap; }
  .grid-foot { height: 36px; padding: 0 12px; }
  .gf-avg, .gf-keys { display: none; }
  .gf-pager .view-switch span { display: none; }
  .gf-pager .view-switch { width: 32px; padding: 0; justify-content: center; }
  .grid-page.has-selection .grid-scroll { padding-bottom: 120px; }
  .bulk-bar { left: 8px; right: 8px; bottom: 8px; transform: none; flex-wrap: wrap; justify-content: space-between; gap: 2px; padding: 6px; }
  .bulk-sel { flex: 1 1 100%; border-right: 0; margin: 0 0 2px; padding: 0 0 6px 2px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
  .bulk-acts { flex: 1 1 100%; justify-content: space-between; }
  .bulk-sep { display: none; }
  :root .bulk-btn { height: 40px; padding: 0 9px; }
  .bulk-btn .bulk-caret { display: none; }
  .bulk-menu { position: static; }
  .bulk-pop, .bulk-pop-end { position: fixed; left: 8px; right: 8px; bottom: calc(var(--tabbar-h) + var(--safe-b) + 112px); width: auto; }
  :root .bulk-pop .stage-opt { height: 44px; font-size: 15px; }
}

/* ------------------------------------------------------------------ 11. WhatsApp inbox (U8, /inbox)
 * app/templates/inbox/*, app/static/inbox.js. Three panes: the conversation list (the chats waiting for
 * a reply first), the thread with the U6 composer and the compact deal card on the right: the lead card
 * (section 8) in its inbox mode, turned around so the chat comes first. Phones: the list is the screen,
 * a chat opens full screen with a back arrow (WhatsApp's own layout). */
.content:has(> .inbox) { max-width: none; padding: 0; }
.inbox { display: grid; grid-template-columns: 340px minmax(0, 1fr); height: calc(100vh - var(--topbar-h)); height: calc(100dvh - var(--topbar-h));
         min-height: 460px; background: var(--c-bg); }
.ib-summary { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; }
.count-pill.warn { background: var(--c-warn-soft); color: var(--c-warn-text); }
:root a.count-pill:hover { text-decoration: none; filter: brightness(.97); }

/* the list */
.ib-list { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--c-border); background: var(--c-bg); }
.ib-list-head { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--c-border); }
/* F.156: the board's chip row does not wrap, and Hot · Warm · Cold + "Waiting over 2 h" are wider than the
   list: wrap them, as a phone does (G3.1), or the chat pane paints over the last one */
.ib-list-head .grid-flags { flex-wrap: wrap; }
.segmented.ib-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, auto)); justify-content: stretch; }
.ib-tabs a { justify-content: center; gap: 5px; padding: 0 6px; font-size: var(--fs-md); }
.ib-n { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 5px; border-radius: var(--r-pill); background: var(--c-wa-strong);
        color: var(--c-inverse); font-size: 10.5px; font-weight: 700; }
.ib-n.is-sort { background: var(--c-warn-soft); color: var(--c-warn-text); }
.ib-tabs a:not([aria-current]) .ib-n:not(.is-sort) { background: var(--c-wa-soft); color: var(--c-wa-text); }
.ib-search { margin: 0; }
.ib-find { position: relative; display: flex; align-items: center; width: 100%; margin: 0; }
.ib-find .icon { position: absolute; left: 9px; z-index: 1; color: var(--c-text-3); pointer-events: none; }
:root .ib-find input { height: 30px; margin: 0; padding: 0 10px 0 30px; border-radius: var(--r-md); background-image: none; }
.ib-rows { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 0 20px; }
.ib-group { display: flex; align-items: center; gap: 6px; margin: 10px 16px 4px; color: var(--c-text-3); font-size: var(--fs-xs); font-weight: 600;
            letter-spacing: .04em; text-transform: uppercase; }
.ib-group span { color: var(--c-text-3); font-weight: 500; }
.ib-row { position: relative; display: flex; align-items: flex-start; gap: 11px; margin: 0 6px; padding: 9px 10px 9px 10px; border-radius: var(--r-md);
          color: var(--c-text); text-decoration: none; transition: background-color var(--dur); }
:root .ib-row:hover { text-decoration: none; }
@media (hover: hover) { :root .ib-row:hover { background: var(--c-hover); } }
:root .ib-row.is-open, :root .ib-row.is-open:hover { background: var(--c-accent-soft); }
.ib-row:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }
.ib-row + .ib-row::before { content: ""; position: absolute; top: 0; left: 61px; right: 10px; border-top: 1px solid var(--c-border); }
.ib-row:hover::before, .ib-row.is-open::before, .ib-row:hover + .ib-row::before, .ib-row.is-open + .ib-row::before { border-top-color: transparent; }
.ib-av { position: relative; flex: none; margin-top: 1px; }
.ib-unknown { background: var(--c-hover); color: var(--c-text-3); }
.ib-unknown .icon { width: 20px; height: 20px; }
.ib-wa { position: absolute; right: -3px; bottom: -2px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
         background: var(--c-wa-strong); color: var(--c-inverse); box-shadow: 0 0 0 2px var(--c-bg); }
.ib-row:hover .ib-wa { box-shadow: 0 0 0 2px var(--c-hover); }
.ib-row.is-open .ib-wa { box-shadow: 0 0 0 2px var(--c-accent-soft); }
.ib-wa .icon { width: 10px; height: 10px; stroke-width: 2.3; }
.ib-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ib-l1, .ib-l2, .ib-l3 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ib-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.ib-row.is-unread .ib-name { font-weight: 650; }
.ib-num { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-text-3); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.ib-time { flex: none; margin-left: auto; padding-left: 4px; color: var(--c-text-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ib-time.is-new { color: var(--c-wa-text); font-weight: 600; }
.ib-prev { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-text-2); }
.ib-row.is-unread .ib-prev { color: var(--c-text); }
.ib-you { color: var(--c-text-3); }
.ib-prev .tick { display: inline-flex; margin-right: 3px; vertical-align: -3px; }
.ib-prev .tick .icon { width: 15px; height: 15px; }
.ib-unread { flex: none; display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill);
             background: var(--c-wa-strong); color: var(--c-inverse); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ib-l3 { margin-top: 3px; color: var(--c-text-3); font-size: var(--fs-sm); }
.ib-l3 .stage-chip { flex: none; height: 18px; padding: 0 6px; font-size: var(--fs-xs); }
.ib-l3 .ib-tag { flex: none; }
.ib-deal { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-text-2); }
.ib-sp { flex: 1 1 0; min-width: 0; }
.ib-tag { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; white-space: nowrap; font-size: var(--fs-xs); font-weight: 600; }
.ib-tag .icon { width: 12px; height: 12px; flex: none; }
.ib-tag.is-new { color: var(--c-wa-text); }
.ib-tag.is-held { color: var(--c-text-3); font-weight: 500; }
.ib-flag { flex: none; display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 6px; border-radius: var(--r-sm);
           background: var(--c-warn-soft); color: var(--c-warn-text); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ib-flag.is-late { background: var(--c-danger-soft); color: var(--c-danger-text); }
.ib-flag .icon { width: 12px; height: 12px; stroke-width: 2.1; }
.ib-out { flex: none; display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-xs); font-weight: 500; }
.ib-out.won { color: var(--c-success-text); }
.ib-out .icon { width: 12px; height: 12px; }
.ib-owner { flex: none; display: inline-flex; }
.ib-owner .avatar-sm { width: 18px; height: 18px; font-size: 8px; }
.ib-nobody { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1px dashed var(--c-border-strong); color: var(--c-text-3); }
.ib-nobody .icon { width: 11px; height: 11px; }
.ib-row.is-closed .ib-name { color: var(--c-text-2); }
.ib-row.is-closed .ib-av { --avatar-s: 25%; } /* a greyer disc, not opacity: opacity took the initials under 4.5:1 */
.ib-more { margin: 12px 16px; color: var(--c-text-3); font-size: var(--fs-sm); }
.ib-empty .empty-state { padding: 40px 16px; }

/* the chat: the lead card in inbox mode (the thread left, the deal right) */
.ib-work { position: relative; min-width: 0; min-height: 0; margin: 0; background: var(--c-chrome); }
.ib-work.is-loading > * { opacity: .55; transition: opacity 120ms; }
.ib-work > .lead-card, .lead-card.mode-inbox { height: 100%; min-height: 0; margin: 0; }
@container card (min-width: 721px) {
  .lead-card.mode-inbox .lc-grid { grid-template-columns: minmax(0, 1fr) clamp(300px, 32%, 340px); grid-template-areas: "main head" "main side"; }
  .lead-card.mode-inbox .lc-head, .lead-card.mode-inbox .lc-side { border-right: 0; border-left: 1px solid var(--c-border); }
  .lead-card.mode-inbox .lc-head { padding: 10px 16px 12px; }
  .lead-card.mode-inbox .lc-section { padding: 12px 16px 8px; }
  .lead-card.mode-inbox .fld { grid-template-columns: 108px minmax(0, 1fr); }
  .lead-card.mode-inbox :is(.lc-src, .lc-pipe) { display: none; }
}
.lead-card.mode-inbox .lc-feedbar .feed-status, .lead-card.mode-inbox .lc-act.wa { display: none; }
:root .lc-tochat, :root .ib-back, :root .ib-info { display: none; }
.ib-thead { flex: none; display: flex; align-items: center; gap: 10px; min-height: 57px; padding: 8px 12px 8px 20px; border-bottom: 1px solid var(--c-border);
            background: var(--c-bg); }
.ib-tav { flex: none; display: inline-flex; }
.ib-twho { flex: 1; min-width: 0; }
.ib-tname { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-lg); font-weight: 600; line-height: 1.3; }
.ib-tsub { margin: 1px 0 0; overflow: hidden; text-overflow: ellipsis; color: var(--c-text-3); font-size: var(--fs-sm); white-space: nowrap; }
.ib-tsub > * + *::before { content: "·"; margin: 0 7px; } /* G3.2: the number is a link now */
.ib-tsub .icon { width: 12px; height: 12px; margin-right: 3px; vertical-align: -1px; }
.ib-towner.is-nobody { color: var(--c-warn-text); }
.ib-tnum { font-variant-numeric: tabular-nums; }
.ib-tacts { flex: none; display: flex; align-items: center; gap: 8px; }
.ib-tacts .ib-flag { height: 26px; padding: 0 9px; font-size: var(--fs-sm); gap: 5px; }
.ib-tacts .ib-flag .icon { width: 14px; height: 14px; }
.ib-flag.is-replied { background: transparent; color: var(--c-text-3); font-weight: 500; }
.ib-flag.is-held { background: var(--c-hover); color: var(--c-text-2); }
.ib-done-form { margin: 0; }
:root button.ib-done { display: inline-flex; align-items: center; gap: 6px; height: 30px; min-height: 30px; margin: 0; padding: 0 8px 0 10px; border: 1px solid var(--c-border-strong);
                       border-radius: var(--r-md); background: var(--c-bg); color: var(--c-text); font-size: var(--fs-md); font-weight: 500; box-shadow: none; }
:root button.ib-done:hover { background: var(--c-success-soft); border-color: color-mix(in srgb, var(--c-success) 40%, transparent); color: var(--c-success-text); }
.ib-done .icon { width: 15px; height: 15px; stroke-width: 2.2; }
.ib-done kbd { min-width: 18px; height: 18px; padding: 0 4px; font-size: 10.5px; }

/* Unsorted: Accept / Link / Decline where the composer would be (Kommo's unsorted item) */
.ib-incoming, .ib-sort { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 7px 8px 7px 12px; border-radius: var(--r-lg);
                         border: 1px solid color-mix(in srgb, var(--c-wa-strong) 28%, transparent); background: var(--c-wa-soft); }
.ib-sort { margin: 0; padding: 12px 12px 12px 14px; }
.ib-inc-text, .ib-sort-text { flex: 1; display: flex; align-items: center; gap: 7px; min-width: 0; margin: 0; color: var(--c-wa-text); font-size: var(--fs-md); }
.ib-inc-text .icon, .ib-sort-text .icon { width: 17px; height: 17px; flex: none; }
.ib-sort-text strong, .ib-inc-text strong { font-weight: 600; }
.ib-inc-acts { flex: none; display: flex; align-items: center; gap: 6px; }
.ib-inc-acts form { margin: 0; }
:root .ib-inc-acts > button, :root .ib-inc-acts > form > button, :root .ib-inc-acts > details > summary.btn-link { display: inline-flex; align-items: center; gap: 5px; height: 30px; min-height: 30px; margin: 0; padding: 0 12px;
                                                                 border-radius: var(--r-md); font-size: var(--fs-md); font-weight: 500; box-shadow: none; }
:root .ib-inc-acts .btn-accept { background: var(--c-wa-strong); border: 1px solid var(--c-wa-strong); color: var(--c-inverse); }
:root .ib-inc-acts .btn-accept:hover { background: color-mix(in srgb, var(--c-wa-strong) 86%, #000); }
:root .ib-inc-acts .btn-decline { background: var(--c-bg); }
.ib-inc-acts .icon { width: 15px; height: 15px; stroke-width: 2.1; }
:root .ib-inc-acts .ib-block { padding: 0 10px; }
.ib-link { position: relative; margin: 0; }
:root summary.btn-link { list-style: none; border: 1px solid var(--c-border-strong); background: var(--c-bg); color: var(--c-text); cursor: pointer; }
summary.btn-link::-webkit-details-marker { display: none; }
summary.btn-link::after { display: none; }
:root summary.btn-link:hover, .ib-link[open] > summary.btn-link { background: var(--c-accent-soft); border-color: color-mix(in srgb, var(--c-accent) 35%, transparent); color: var(--c-accent-text); }
.ib-link-pop { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 30; width: 360px; max-width: calc(100vw - 24px); padding: 10px;
               border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-bg); box-shadow: var(--shadow-pop); }
.ib-link-head { margin: 2px 4px 8px; font-weight: 600; }
.ib-link-q { margin-bottom: 6px; }
.ib-link-results { max-height: 280px; overflow-y: auto; }
.ib-link-opt { margin: 0; }
:root .ib-link-opt button { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 6px; border-radius: var(--r-md); cursor: pointer; }
:root .ib-link-opt button:hover, :root .ib-link-opt button:focus-visible { background: var(--c-hover); }
.ib-lo-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ib-lo-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.ib-lo-deal { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-text-3); font-size: var(--fs-sm); }
.ib-link-none { display: flex; align-items: center; gap: 6px; margin: 8px 6px; color: var(--c-text-3); font-size: var(--fs-sm); }
.ib-link-none .icon { width: 14px; height: 14px; }
.ib-link-foot { margin: 6px 6px 2px; color: var(--c-text-3); font-size: var(--fs-xs); }
.ib-held-sub { margin: 2px 0 0; color: var(--c-text-3); font-size: var(--fs-sm); }
.ib-held-why { display: flex; align-items: flex-start; gap: 6px; margin: 0; padding: 8px 10px; border-radius: var(--r-md); background: var(--c-hover);
               color: var(--c-text-2); font-size: var(--fs-sm); }
.ib-held-why .icon { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.ib-help { margin: 0; padding: 0; list-style: none; }
.ib-help li { display: flex; gap: 8px; margin: 0 0 8px; list-style: none; color: var(--c-text-2); font-size: var(--fs-sm); line-height: 1.45; }
.ib-help .icon { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--c-text-3); }
.ib-held-card .lc-dock { padding-top: 10px; }

/* nothing open yet */
.ib-pick { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 32px; text-align: center; }
.ib-pick .ill { margin-bottom: 16px; }
.ib-pick-title { margin: 0 0 6px; font-size: var(--fs-xl); font-weight: 600; }
.ib-pick-sub { max-width: 420px; margin: 0 0 16px; color: var(--c-text-2); }
.ib-pick-go { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: var(--r-md); background: var(--c-wa-strong);
              color: var(--c-inverse); font-weight: 500; }
:root .ib-pick-go:hover { color: var(--c-inverse); text-decoration: none; background: color-mix(in srgb, var(--c-wa-strong) 86%, #000); }
.ib-pick-go .icon { width: 16px; height: 16px; }
.ib-keys { margin: 22px 0 0; color: var(--c-text-3); font-size: var(--fs-sm); }
.ib-keys .kbd-group { margin: 0 1px; }

/* a narrow chat pane (a small laptop, a phone): one column, the chat first, the deal behind the ⓘ button */
@container card (max-width: 720px) {
  .lead-card.mode-inbox .lc-tabs { display: none; }
  .lead-card.mode-inbox .lc-grid { grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "head" "body"; }
  .lead-card.mode-inbox[data-tab=chat] .lc-head { display: none; }
  :root .lead-card.mode-inbox .ib-info, :root .lead-card.mode-inbox .lc-tochat { display: grid; }
  .lead-card.mode-inbox[data-tab=details] .lc-head { border-bottom: 1px solid var(--c-border); }
  /* F.98: the actions wrap under the name instead of pushing it to 0 px and the page past the screen */
  .ib-thead { min-height: 52px; padding: 6px 8px 6px 12px; gap: 4px 8px; flex-wrap: wrap; }
  .ib-twho { flex-basis: 120px; }
  .ib-tacts { gap: 4px; flex: 0 1 auto; min-width: 0; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
  .ib-tacts .ib-flag:not(.is-late):not(.is-held) { display: none; }
  .ib-done span { display: none; }
  :root button.ib-done { padding: 0 8px; }
  .ib-incoming, .ib-sort { flex-wrap: wrap; gap: 8px; }
  .ib-sort { padding: 10px; }
  .ib-inc-acts { width: 100%; }
  .ib-inc-acts > * { flex: 1; }
  :root .ib-inc-acts > button, :root .ib-inc-acts > form > button, :root .ib-inc-acts > details > summary.btn-link { width: 100%; justify-content: center; height: 36px; }
  .ib-link { position: static; }
  .ib-link-pop { left: 8px; right: 8px; width: auto; }
}
/* F.98: at 320 the late flag, the three chips, Done, Archive and the deal button share one row */
@media (max-width: 359px) {
  .ib-tacts .ib-flag { padding: 0 6px; gap: 3px; }
  :root .ib-tacts .feed-chip { padding: 0 6px; gap: 4px; }
}

@media (max-width: 1100px) and (min-width: 768px) {
  .inbox { grid-template-columns: 300px minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .content:has(> .inbox) { padding: 0 0 calc(var(--tabbar-h) + var(--safe-b)); }
  .inbox { display: block; height: auto; min-height: 0; }
  .inbox:not(.is-open) .ib-work, .inbox.is-open .ib-list { display: none; }
  .ib-list { border-right: 0; }
  .ib-list-head { position: sticky; top: 0; z-index: 5; padding: 8px 12px; background: var(--c-bg); }
  .ib-tabs a { height: 32px; }
  :root .ib-find input { height: 38px; }
  .ib-rows { overflow: visible; padding-bottom: 12px; }
  .ib-row { margin: 0; padding: 10px 14px; border-radius: 0; gap: 12px; }
  .ib-row + .ib-row::before { left: 66px; right: 0; }
  .ib-name { font-size: 15px; }
  .ib-prev { font-size: 14px; }
  /* a chat is a screen of its own: no top bar, no tab bar (the back arrow is in the chat's header) */
  body:has(.inbox.is-open) :is(.rail, .topbar) { display: none; }
  body:has(.inbox.is-open) .content { padding: 0; }
  body:has(.inbox.is-open) .toasts { bottom: calc(96px + var(--safe-b)); }
  .inbox.is-open { height: 100vh; height: 100dvh; padding-bottom: var(--safe-b); }
  .inbox.is-open .ib-work { height: 100%; }
  :root .ib-back { display: grid; margin-left: -4px; }
  .ib-back .icon { width: 22px; height: 22px; }
  :root .ib-thead .icon-btn { width: 36px; height: 36px; }
  .ib-thead { padding-left: 6px; }
  .ib-pick { display: none; }
}

/* ------------------------------------------------------------------ 12. My day (U9, / and /tasks)
   The home: a greeting with a one-line summary, one row of KPIs, then three lanes (chats waiting
   for a reply, tasks, new leads to claim). /tasks: the agenda in Kommo's groups. Task rows are the
   same on both (templates/my_day/_macros.html). */
.day-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; margin: 0 0 14px; }
.day-hello { margin: 0; font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
.day-date { margin: 3px 0 0; color: var(--c-text-2); }
.day-sum { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.day-sum-part { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 9px; border-radius: var(--r-pill);
                background: var(--c-hover); color: var(--c-text-2); font-weight: 500; white-space: nowrap; }
.day-sum-part strong { color: inherit; font-weight: 650; font-variant-numeric: tabular-nums; }
.day-sum-part .icon { width: 15px; height: 15px; vertical-align: 0; }
.day-sum-part.wa { background: var(--c-wa-soft); color: var(--c-wa-text); }
.day-sum-part.danger { background: var(--c-danger-soft); color: var(--c-danger-text); }
.day-sum-part.warn { background: var(--c-warn-soft); color: var(--c-warn-text); }
.day-sum-part.ok { background: var(--c-success-soft); color: var(--c-success-text); }
a.day-sum-part:hover { text-decoration: none; box-shadow: inset 0 0 0 1px currentColor; }

/* the KPI row: one line, each number a way into the KPI page */
.day-kpis { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 0 16px; padding: 0;
            border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-bg); overflow: hidden; }
.day-kpis > li { list-style: none; margin: 0; min-width: 0; border-left: 1px solid var(--c-border); }
.day-kpis > li:first-child { border-left: 0; }
.kpi { display: flex; flex-direction: column; gap: 1px; height: 100%; padding: 9px 14px 10px; color: var(--c-text); }
a.kpi:hover { background: var(--c-subtle); text-decoration: none; }
.kpi-label { font-size: var(--fs-sm); color: var(--c-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-value { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi-of { font-size: var(--fs-md); font-weight: 500; color: var(--c-text-3); }
.kpi-sub { font-size: var(--fs-sm); color: var(--c-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-bar { display: block; height: 4px; margin: 6px 0 2px; border-radius: 2px;
           background: linear-gradient(90deg, var(--c-accent) var(--p, 0%), var(--c-hover) var(--p, 0%)); }

/* the lanes */
.day-lanes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.day-lane, .day-team { min-width: 0; margin: 0; padding: 2px 0 8px; border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-bg); }
.day-team { margin-top: 16px; padding-bottom: 0; overflow: hidden; }
.day-team > :not(.lane-head) { margin: 0; border: 0; border-radius: 0; }
.day-team > p.muted { padding: 0 14px 8px; font-size: var(--fs-sm); }
.lane-head { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px 6px 14px; }
.lane-title { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -0.005em; white-space: nowrap; }
.lane-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--c-accent-soft); color: var(--c-accent-text); flex: none; }
.lane-icon .icon { width: 15px; height: 15px; vertical-align: 0; }
.lane-icon.wa { background: var(--c-wa-soft); color: var(--c-wa-text); }
.lane-icon.warn { background: var(--c-warn-soft); color: var(--c-warn-text); }
.lane-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill);
              background: var(--c-hover); color: var(--c-text-2); font-size: var(--fs-xs); font-weight: 650; font-variant-numeric: tabular-nums; }
.lane-count.wa { background: var(--c-wa-strong); color: var(--c-inverse); }
.lane-count.danger { background: var(--c-danger); color: var(--c-inverse); }
.lane-count.warn { background: var(--c-warn-soft); color: var(--c-warn-text); }
.lane-link { display: inline-flex; align-items: center; gap: 1px; margin-left: auto; padding: 4px 4px 4px 8px; border-radius: var(--r-md);
             color: var(--c-text-2); font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; }
.lane-link:hover { background: var(--c-hover); color: var(--c-text); text-decoration: none; }
.lane-link .icon { width: 14px; height: 14px; vertical-align: 0; }
.lane-group { display: flex; align-items: center; gap: 6px; margin: 8px 14px 2px; color: var(--c-text-3); font-size: var(--fs-xs); font-weight: 600;
              letter-spacing: .04em; text-transform: uppercase; }
.lane-group span { font-weight: 500; }
.lane-group.is-late { color: var(--c-danger-text); }
.lane-list, .dt-list { list-style: none; margin: 0; padding: 0; }
.lane-list > li, .dt-list > li { position: relative; list-style: none; margin: 0; }
.lane-list > li + li::before { content: ""; position: absolute; top: 0; left: 67px; right: 14px; border-top: 1px solid var(--c-border); }
.lane-list > li:hover::before, .lane-list > li:hover + li::before { border-top-color: transparent; }
.lane-list .ib-row { margin: 0 6px; }
.lane-list .ib-row + .ib-row::before { display: none; }
.lane-more { display: flex; align-items: center; gap: 2px; margin: 6px 14px 0; font-size: var(--fs-sm); font-weight: 500; color: var(--c-accent-text); }
.lane-more .icon { width: 14px; height: 14px; }
.lane-note { margin: 6px 14px 2px; color: var(--c-text-3); font-size: var(--fs-sm); }
.lane-held { display: flex; align-items: center; gap: 8px; margin: 8px 10px 0; padding: 8px 10px; border-radius: var(--r-md); background: var(--c-subtle);
             color: var(--c-text-2); font-size: var(--fs-sm); }
.lane-held:hover { background: var(--c-hover); color: var(--c-text); text-decoration: none; }
.lane-held .icon { width: 14px; height: 14px; flex: none; }
.lane-held-go { display: inline-flex; align-items: center; margin-left: auto; color: var(--c-accent-text); font-weight: 500; white-space: nowrap; }
.lane-unplanned { background: var(--c-warn-soft); color: var(--c-warn-text); }
.lane-unplanned:hover { background: color-mix(in srgb, var(--c-warn) 18%, var(--c-bg)); color: var(--c-warn-text); }
.lane-unplanned .lane-held-go { color: var(--c-warn-text); }
.day-lane .empty-state.compact { padding: 22px 18px 18px; }
.day-lane .empty-body { font-size: var(--fs-sm); }
.dc-nobody { display: inline-flex; align-items: center; gap: 3px; flex: none; color: var(--c-warn-text); font-size: var(--fs-xs); font-weight: 600; }
.dc-nobody .icon { width: 12px; height: 12px; }

/* new leads: the chat row with Claim at its end */
.dl-row { display: flex; align-items: center; gap: 4px; padding-right: 12px; }
.dl-main { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 11px; margin: 0 0 0 6px; padding: 9px 6px 9px 10px; border-radius: var(--r-md); color: var(--c-text); }
.dl-main:hover { text-decoration: none; }
@media (hover: hover) { .dl-main:hover { background: var(--c-hover); } }
.dl-value { flex: none; color: var(--c-text-2); font-variant-numeric: tabular-nums; }
.dl-claim-form { margin: 0; flex: none; }
:root .dl-claim { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px 0 9px;
                  border: 1px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-bg); color: var(--c-text);
                  font-size: var(--fs-sm); font-weight: 600; cursor: pointer; white-space: nowrap; transition: background var(--dur), border-color var(--dur); }
:root .dl-claim:hover { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-inverse); }
:root .dl-claim:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.dl-claim .icon { width: 15px; height: 15px; vertical-align: 0; }
:root .dl-claim:disabled { opacity: .6; cursor: default; }

/* a task: tick · what and with whom · when · WhatsApp, snooze */
.dt-row { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 7px 10px 7px 14px; }
.dt-list > li + li::before { content: ""; position: absolute; top: 0; left: 46px; right: 12px; border-top: 1px solid var(--c-border); }
@media (hover: hover) and (pointer: fine) { .dt-row:not(.is-done):hover { background: var(--c-subtle); } }
.dt-row.is-cursor { background: var(--c-accent-soft); box-shadow: inset 2px 0 0 var(--c-accent); }
@media (hover: hover) { .dt-row.is-cursor:not(.is-done):hover { background: var(--c-accent-soft); } }
.dt-check-form { flex: none; margin: 0; }
:root .dt-check { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%;
                  border: 1.5px solid var(--c-border-strong); color: transparent; cursor: pointer; transition: background var(--dur), border-color var(--dur), color var(--dur); }
.dt-check .icon { width: 13px; height: 13px; stroke-width: 2.8; vertical-align: 0; }
:root .dt-check:hover, :root .dt-check:focus-visible { border-color: var(--c-success); background: var(--c-success-soft); color: var(--c-success-text); }
:root .dt-check:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.dt-row.is-late .dt-check { border-color: color-mix(in srgb, var(--c-danger) 60%, var(--c-border-strong)); }
:root .dt-check.is-done { border-color: var(--c-success); background: var(--c-success); color: #fff; cursor: default; }
:root .dt-check.is-static { border-style: dashed; color: var(--c-text-3); cursor: default; }
.dt-check.is-static .icon { width: 12px; height: 12px; stroke-width: 2; }
.dt-check-form[aria-busy=true] .dt-check, .htmx-request > .dt-check { border-color: var(--c-success); background: var(--c-success); color: #fff; }
.dt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--c-text); }
a.dt-main:hover { text-decoration: none; }
@media (hover: hover) { a.dt-main:hover .dt-title { color: var(--c-accent-text); } }
.dt-l1, .dt-l2 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dt-type { flex: none; display: inline-grid; color: var(--c-text-3); }
.dt-type .icon { width: 14px; height: 14px; vertical-align: 0; }
.dt-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.dt-l2 { color: var(--c-text-2); font-size: var(--fs-sm); }
.dt-who { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-deal { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-text-3); }
.dt-deal::before { content: "·"; margin-right: 6px; }
.dt-l2 .stage-chip { flex: none; height: 18px; padding: 0 6px; font-size: var(--fs-xs); }
.dt-kind { flex: none; color: var(--c-text-3); }
.dt-value { flex: none; color: var(--c-text-2); font-variant-numeric: tabular-nums; }
/* the home's lane is narrow: who and what, no stage or value (the Tasks page has them) */
.lane-tasks .dt-l2 .stage-chip, .lane-tasks .dt-value, .lane-tasks .dt-chat { display: none; }
/* the chat behind the task (the Tasks page on a wide screen): what was said last */
.dt-chat { flex: 0 1 300px; min-width: 0; display: none; align-items: center; gap: 6px; padding: 4px 8px; border-radius: var(--r-md); color: var(--c-text-2); font-size: var(--fs-sm); }
.dt-chat:hover { background: var(--c-hover); color: var(--c-text); text-decoration: none; }
.dt-chat-icon { flex: none; display: inline-grid; color: var(--c-wa-text); }
.dt-chat-icon .icon { width: 14px; height: 14px; vertical-align: 0; }
.dt-chat-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-chat-you { color: var(--c-text-3); }
.dt-chat-at { flex: none; color: var(--c-text-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.dt-chat.is-waiting .dt-chat-text { color: var(--c-text); font-weight: 500; }
.dt-chat.is-waiting .dt-chat-at { color: var(--c-wa-text); font-weight: 600; }
.dt-kind::before { content: "·"; margin-right: 6px; }
.dt-owner { flex: none; display: inline-flex; align-items: center; gap: 5px; color: var(--c-text-2); font-size: var(--fs-sm); }
.dt-owner .avatar-sm { width: 20px; height: 20px; font-size: 9px; }
.dt-owner > .icon { width: 16px; height: 16px; color: var(--c-text-3); }
.dt-due { flex: none; display: inline-flex; align-items: center; gap: 4px; color: var(--c-text-2); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dt-due .icon { width: 13px; height: 13px; vertical-align: 0; }
.dt-due.is-late { color: var(--c-danger-text); font-weight: 600; }
.dt-due.is-today { color: var(--c-text); font-weight: 500; }
.dt-acts { flex: none; display: inline-flex; align-items: center; gap: 2px; }
:root .dt-btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 30px; min-width: 30px;
                padding: 0 6px; border-radius: var(--r-md); color: var(--c-text-2); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; white-space: nowrap; }
.dt-btn .icon { width: 16px; height: 16px; vertical-align: 0; }
:root .dt-btn:hover, :root details[open] > summary.dt-btn { background: var(--c-hover); color: var(--c-text); text-decoration: none; }
:root .dt-btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }
:root .dt-wa { color: var(--c-wa-text); }
:root .dt-wa:hover { background: var(--c-wa-soft); color: var(--c-wa-text); }
.dt-btn-label { display: none; }

/* snooze: a menu of picks (Pico's accordion look switched off) */
:root details.dt-snooze { position: relative; margin: 0; padding: 0; border: 0; }
:root details.dt-snooze > summary { list-style: none; margin: 0; line-height: 1; }
:root details.dt-snooze > summary::-webkit-details-marker { display: none; }
:root details.dt-snooze > summary::after { display: none; }
.dt-pop { position: absolute; top: calc(100% + 4px); right: 0; z-index: 30; width: 286px; padding: 6px; border: 1px solid var(--c-border);
          border-radius: var(--r-lg); background: var(--c-bg); box-shadow: var(--shadow-pop); }
.dt-pop-label { margin: 4px 8px 4px; color: var(--c-text-3); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.dt-pop-picks { display: flex; flex-direction: column; margin: 0; }
:root .dt-pick { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 34px; padding: 0 8px;
                 border-radius: var(--r-md); font-weight: 500; cursor: pointer; }
:root .dt-pick:hover, :root .dt-pick:focus-visible { background: var(--c-hover); }
.dt-pick-hint { color: var(--c-text-3); font-weight: 400; font-variant-numeric: tabular-nums; }
.dt-pop-other { display: flex; gap: 6px; margin: 6px 0 0; padding: 8px 2px 2px; border-top: 1px solid var(--c-border); }
:root .dt-pop-other input { height: 30px; margin: 0; padding: 0 6px; font-size: var(--fs-sm); }
:root .dt-pop-other input[type=date] { flex: 1 1 auto; min-width: 0; }
:root .dt-pop-other input[type=time] { flex: 0 0 82px; }
:root .dt-pop-move { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; height: 30px; padding: 0 10px; border-radius: var(--r-md);
                     background: var(--c-accent); color: var(--c-inverse); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
:root .dt-pop-move:hover { background: var(--c-accent-hover); }

/* a task just done: ticked where it was, with the next follow-up one click away */
.dt-row.is-done { flex-wrap: wrap; row-gap: 6px; background: color-mix(in srgb, var(--c-success) 6%, var(--c-bg)); animation: dt-done 600ms var(--ease); }
.dt-row.is-done .dt-title s { color: var(--c-text-3); text-decoration-thickness: 1px; }
.dt-done-tag { flex: none; color: var(--c-success-text); font-size: var(--fs-xs); font-weight: 650; letter-spacing: .02em; }
.dt-next { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 2px 32px; }
.dt-next-field { flex: 1 1 170px; display: flex; align-items: center; gap: 6px; height: 30px; margin: 0; padding: 0 8px; border: 1px solid var(--c-border-strong);
                 border-radius: var(--r-md); background: var(--c-bg); color: var(--c-text-3); }
.dt-next-field:focus-within { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-focus); }
.dt-next-field .icon { width: 14px; height: 14px; flex: none; }
:root .dt-next-field input { all: unset; box-sizing: border-box; flex: 1; min-width: 0; height: 28px; color: var(--c-text); font-size: var(--fs-md); }
:root .dt-next-field input::placeholder { color: var(--c-text-3); }
.dt-next-picks { display: inline-flex; flex-wrap: wrap; gap: 4px; }
:root .dt-next .wchip { height: 30px; font-size: var(--fs-sm); }
.tk-page .dt-next-field { flex: 0 1 420px; }
.dt-planned { flex-basis: 100%; display: flex; align-items: center; gap: 6px; margin: 0 0 2px 32px; color: var(--c-text-2); font-size: var(--fs-sm); }
.dt-planned .icon { width: 14px; height: 14px; color: var(--c-success-text); }
@keyframes dt-done { from { background: color-mix(in srgb, var(--c-success) 18%, var(--c-bg)); } }

/* /tasks: the agenda */
.tk-page { max-width: 1240px; }
.tk-pills { display: inline-flex; gap: 6px; margin-left: 4px; }
.tk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 14px; }
.tk-hint { display: inline-flex; align-items: center; gap: 5px; margin: 0 0 0 auto; color: var(--c-text-3); font-size: var(--fs-sm); }
.tk-hint .icon { width: 13px; height: 13px; vertical-align: 0; }
.tk-group { margin: 0 0 14px; border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-bg); }
.tk-group-head { position: sticky; top: var(--topbar-h); z-index: 6; display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 14px;
                 border-bottom: 1px solid var(--c-border); border-radius: var(--r-lg) var(--r-lg) 0 0; background: color-mix(in srgb, var(--c-subtle) 92%, transparent);
                 backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: var(--fs-md); font-weight: 600; }
.tk-group-head.is-late { color: var(--c-danger-text); }
.tk-group-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill);
                  background: var(--c-hover); color: var(--c-text-2); font-size: var(--fs-xs); font-weight: 650; }
.tk-group-head.is-late .tk-group-count { background: var(--c-danger); color: var(--c-inverse); }
.tk-group-date { margin-left: auto; color: var(--c-text-3); font-weight: 500; font-size: var(--fs-sm); }
.tk-group .dt-row { min-height: 50px; }
.tk-group .dt-list > li:last-child .dt-row { border-radius: 0 0 var(--r-lg) var(--r-lg); }
.tk-more { color: var(--c-text-3); font-size: var(--fs-sm); }
/* on a wide screen the Tasks page reads as a table: the columns line up row to row */
@media (min-width: 1100px) {
  .tk-page .dt-row:not(.is-done) { display: grid; grid-template-columns: 22px minmax(0, 1fr) minmax(0, 330px) 104px 132px; column-gap: 14px; }
  .tk-page .tk-team .dt-row:not(.is-done) { grid-template-columns: 22px minmax(0, 1fr) minmax(0, 300px) 110px 96px 132px; }
  .tk-page .dt-row > .dt-check-form, .tk-page .dt-row > .dt-check { grid-column: 1; }
  .tk-page .dt-row > .dt-main { grid-column: 2; }
  .tk-page .dt-row > .dt-chat { grid-column: 3; display: flex; }
  .tk-page .dt-row > .dt-owner { grid-column: 4; }
  .tk-page .dt-row > .dt-due { grid-column: -3; justify-self: end; }
  .tk-page .dt-row > .dt-acts { grid-column: -2; justify-self: end; }
  .tk-page .dt-btn-label { display: inline; }
}

@media (max-width: 1180px) and (min-width: 768px) {
  .day-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .day-kpis > li:nth-child(n+4) { display: none; }
  .day-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lane-claim { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .day-head { align-items: flex-start; flex-direction: column; gap: 10px; margin-bottom: 12px; }
  .day-hello { font-size: 20px; }
  .day-date { margin-top: 1px; }
  .day-sum { gap: 6px; }
  .day-sum-part { height: 30px; }
  /* the KPI row scrolls sideways (one row, as on a desktop) */
  .day-kpis { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -12px 14px; padding: 0 12px; border: 0; border-radius: 0; background: transparent;
              gap: 8px; scrollbar-width: none; }
  .day-kpis::-webkit-scrollbar { display: none; }
  .day-kpis > li { flex: 0 0 auto; scroll-snap-align: start; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-bg); }
  .day-kpis > li:first-child { border-left: 1px solid var(--c-border); }
  .kpi { padding: 8px 12px; min-width: 132px; }
  .kpi-value { font-size: 17px; }
  .day-lanes { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .lane-head { padding: 8px 10px 4px 12px; }
  .lane-list .ib-row { margin: 0; padding: 10px 12px; border-radius: 0; }
  .lane-list > li + li::before { left: 64px; right: 0; }
  .dl-main { margin: 0; padding: 10px 6px 10px 12px; border-radius: 0; }
  .dl-row { padding-right: 10px; }
  :root .dl-claim { height: 34px; }
  /* a task: tick · what, with whom, when · WhatsApp and snooze */
  .dt-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; row-gap: 3px; padding: 9px 8px 9px 12px; }
  .dt-row > .dt-check-form, .dt-row > .dt-check { grid-row: 1 / 3; align-self: center; }
  .dt-row > .dt-main { grid-column: 2; grid-row: 1; }
  .dt-row > .dt-due { grid-column: 2; grid-row: 2; justify-self: start; }
  .dt-row > .dt-acts { grid-column: 3; grid-row: 1 / 3; align-self: center; }
  .dt-row > .dt-owner { display: none; }
  .dt-row .dt-deal, .dt-row .dt-value { display: none; }  /* who and the stage: the rest is a tap away */
  .dt-row.is-done { display: flex; }
  :root .dt-check { width: 26px; height: 26px; }
  :root .dt-btn { height: 36px; min-width: 36px; }
  .dt-list > li + li::before { left: 50px; right: 0; }
  .dt-next, .dt-planned { margin-left: 0; }
  :root .dt-next-field input { font-size: 16px; }
  .dt-pop { position: fixed; top: auto; left: 8px; right: 8px; bottom: calc(var(--tabbar-h) + var(--safe-b) + 8px); width: auto; padding: 8px; animation: sheet-up 200ms var(--ease); }
  :root .dt-pick { height: 44px; font-size: 15px; }
  :root .dt-pop-other input { height: 40px; font-size: 16px; }
  :root .dt-pop-move { height: 40px; }
  .tk-bar { margin-bottom: 10px; }
  .tk-hint { display: none; }
  /* List · Calendar beside Mine · Team (one row from 332 px), every segment a finger high (G3.1) */
  .segmented.board-views:is(.tk-tabs, .day-views) { flex: 1 1 150px; display: grid; grid-template-columns: 1fr 1fr; }
  :is(.tk-page, .cal) .board-views a { justify-content: center; height: auto; min-height: var(--touch); }
  .tk-group { margin: 0 -12px 12px; border-radius: 0; border-left: 0; border-right: 0; }
  .tk-group-head { border-radius: 0; padding: 9px 12px; }
  .tk-group .dt-list > li:last-child .dt-row { border-radius: 0; }
}

/* touch: Done, Snooze and Move (task pins, the inbox Done, the stage button) are 44px under a finger (02.10 F5) */
@media (max-width: 767px), (pointer: coarse) {
  :root .pin-btn, :root button.ib-done, :root .stage-btn { height: var(--touch); min-height: var(--touch); }
  :root .pin-acts .pin-btn { width: var(--touch); }
}

/* touch: the call-outcome chips (shell/_call_outcome.html, 02.12/02.13) are 44px under a finger */
#call-outcome [role="radiogroup"] { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
#call-outcome .call-chip { min-height: var(--touch); }

/* == catalogue == (04.4, catalogue/list.html + _form.html + _search_results.html) */
.cat-title { margin: 0; font-size: var(--fs-xl); }
.cat-editor { margin-bottom: var(--sp-4); }
.cat-search { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.cat-search input { flex: 1; margin: 0; }
.cat-search button { margin: 0; width: auto; }
.cat-views { margin-bottom: var(--sp-3); }
.cat-sku { font-variant-numeric: tabular-nums; font-weight: 600; }
.cat-table tr.is-archived td { color: var(--c-text-2); }
.cat-switch { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-3) 0; }
.cat-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-3) 0 0; }
.cat-actions > * { margin: 0; width: auto; }
.cat-archive { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0; padding: 0 18px 16px; }
.cat-archive button { margin: 0; width: auto; }
.cat-results { list-style: none; margin: 0; padding: 0; border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-bg); }
.cat-hit { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-2); align-items: center; min-height: var(--touch); padding: 6px 12px; }
.cat-hit + .cat-hit { border-top: 1px solid var(--c-border); }
.cat-hit-sku { font-variant-numeric: tabular-nums; font-weight: 600; }
.cat-none { padding: var(--sp-2) var(--sp-3); }
/* stacked rows under 768 px (part-5 row 5.8): the header goes, each cell names itself */
@media (max-width: 767px) {
  .cat-table, .cat-table tbody, .cat-table tr, .cat-table td { display: block; }
  .cat-table thead { display: none; }
  .cat-table tr { padding: 8px 0; border-bottom: 1px solid var(--c-border); }
  .cat-table td { display: flex; justify-content: space-between; gap: var(--sp-3); border: 0; padding: 4px 12px; text-align: right; }
  .cat-table td::before { content: attr(data-label); color: var(--c-text-2); text-align: left; }
  .cat-table .cat-sku { display: inline-flex; align-items: center; min-height: var(--touch); }
  .cat-hit { grid-template-columns: auto minmax(0, 1fr); }
  .cat-hit-price { grid-column: 1 / -1; }
}

/* == targets == (05.3, staff/targets.html): rep x month revenue grid, quarters read-only */
.tg-title { margin: 0; font-size: var(--fs-xl); }
.tg-years { gap: var(--sp-2); }
.tg-years a[role="button"] { margin: 0; padding: 0; width: var(--touch); height: var(--touch); display: inline-grid; place-items: center; }
.tg-year { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 4ch; text-align: center; }
.tg-table { font-variant-numeric: tabular-nums; }
.tg-table th { font-size: var(--fs-sm); color: var(--c-text-2); white-space: nowrap; }
.tg-table th.tg-rep { color: var(--c-text); font-size: inherit; text-align: left; }
.tg-table td { padding: 6px 4px; vertical-align: middle; }
/* inputs: 16 px so iOS never zooms, text with a decimal keypad, numbers right-aligned */
:root .tg-table input[type="text"] { height: 40px; width: 7.5em; margin: 0; padding: 0 8px; font-size: 16px; text-align: right; }
.tg-table .tg-q, .tg-table .tg-q-head { font-weight: 600; background: var(--c-hover); white-space: nowrap; }
.tg-table .tg-q:empty::after { content: "\2013"; color: var(--c-text-3); font-weight: 400; }
.tg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); }
.tg-actions button { margin: 0; width: auto; }
/* one rep per card under 768 px (part-5 row 5.8): the header goes, each cell names its month */
@media (max-width: 767px) {
  .tg-table, .tg-table tbody, .tg-table tr, .tg-table td, .tg-table th.tg-rep { display: block; }
  .tg-table thead { display: none; }
  .tg-table tr { padding: 8px 0 12px; border-bottom: 1px solid var(--c-border); }
  .tg-table th.tg-rep { padding: 4px 12px 8px; font-size: var(--fs-lg); }
  .tg-table td { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); border: 0; padding: 4px 12px; text-align: right; }
  .tg-table td::before { content: attr(data-label); color: var(--c-text-2); text-align: left; }
  :root .tg-table input[type="text"] { width: 9em; }
  .tg-table .tg-q { background: none; }
  .tg-table .tg-q::before { font-weight: 600; color: var(--c-text); }
}

/* == quotes == (04.6, quotes/editor.html + _line.html + _totals.html + _picker.html) */
.q-crumb { margin: 0 0 2px; font-size: var(--fs-sm); color: var(--c-text-2); }
.q-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0; font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.q-meta { margin: 2px 0 0; font-size: var(--fs-sm); }
.q-status { text-transform: capitalize; }
.q-status-sent { background: var(--c-accent); color: var(--c-inverse); }
.q-status-accepted { background: var(--c-wa-strong); color: var(--c-inverse); }
.q-status-declined, .q-status-expired { background: var(--c-danger); color: var(--c-inverse); }
.q-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.q-actions form { margin: 0; }
.q-actions button { margin: 0; width: auto; }
.q-form { margin-top: var(--sp-3); }
.q-header { margin-bottom: var(--sp-3); }
.q-field label { margin-bottom: 2px; font-size: var(--fs-sm); color: var(--c-text-2); }
.q-field input { margin: 0; }
.q-table { width: 100%; margin-bottom: var(--sp-2); font-variant-numeric: tabular-nums; }
.q-table th { font-size: var(--fs-sm); color: var(--c-text-2); white-space: nowrap; }
.q-table td { vertical-align: top; padding: 6px 4px; }
/* inputs: 16 px so iOS never zooms, text with a decimal keypad, numbers right-aligned */
:root .q-table input[type="text"] { height: 40px; margin: 0; padding: 0 8px; font-size: 16px; }
.q-table .num input { text-align: right; }
.q-table td.num:not(.q-desc) { width: 7.5em; }
.q-table .q-amt { font-weight: 600; white-space: nowrap; }
.q-table .q-amt span { display: inline-block; min-height: 40px; line-height: 40px; }
.q-table .q-remove { width: 36px; }
.q-table .field-error:empty { display: none; }
.q-readonly .q-table td { padding: 8px 4px; }
.q-line-actions { display: flex; gap: var(--sp-2); margin: 0 0 var(--sp-3); }
.q-line-actions button { margin: 0; width: auto; }
.q-more { margin-bottom: var(--sp-3); }
.q-more summary { cursor: pointer; color: var(--c-text-2); }
.q-foot { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: var(--sp-3); }
.q-save { margin: 0; }
.q-save button { margin: 0; width: auto; }
.q-totals { min-width: 300px; margin: 0; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-bg); }
.q-totals summary { display: flex; justify-content: space-between; gap: var(--sp-3); cursor: pointer; font-size: var(--fs-md); }
.q-totals summary b { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.q-totals dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--sp-3); margin: var(--sp-2) 0 0; font-variant-numeric: tabular-nums; }
.q-totals dt { color: var(--c-text-2); }
.q-totals dd { margin: 0; text-align: right; }
.q-totals .q-total { font-weight: 600; color: var(--c-text); padding-top: 4px; border-top: 1px solid var(--c-border); }
.q-totals .q-margin { color: var(--c-text-3); font-size: var(--fs-sm); }
.q-picker-box { display: flex; flex-direction: column; gap: var(--sp-2); }
.q-custom { margin: 0; width: auto; align-self: flex-start; }
.q-find { display: flex; align-items: center; gap: var(--sp-2); margin: 0; }
.q-find input { margin: 0; }
.q-picker-results .cat-hit { cursor: pointer; }
.q-picker-results .cat-hit:hover, .q-picker-results .cat-hit:focus-visible { background: var(--c-hover); }
/* a phone: each line is a card (description, then a 2 x 2 grid, the amount bold on the right);
   the totals box sticks above the tab bar and shows the total, the breakdown one tap away */
@media (max-width: 767px) {
  .q-head { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .q-header.grid { grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
  .q-field-title { grid-column: 1 / -1; }
  .q-table, .q-table tbody, .q-table tr { display: block; }
  .q-table thead { display: none; }
  .q-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; padding: 10px 0; border-bottom: 1px solid var(--c-border); }
  .q-table td { display: block; padding: 0; border: 0; width: auto; }
  .q-table td.num:not(.q-desc) { width: auto; }
  .q-table td::before { content: attr(data-label); display: block; font-size: var(--fs-xs); color: var(--c-text-2); }
  .q-table .q-desc { grid-column: 1 / -1; }
  .q-table .q-desc::before { display: none; }
  .q-table .q-amt { grid-column: 1 / 2; text-align: left; }
  .q-table .q-remove { grid-column: 2 / 3; justify-self: end; align-self: end; }
  .q-table .q-remove::before { display: none; }
  :root .q-table .icon-btn { width: var(--touch); height: var(--touch); }
  .q-foot { flex-direction: column; align-items: stretch; }
  .q-totals { position: sticky; bottom: calc(var(--tabbar-h) + var(--safe-b) + 8px); z-index: 5; min-width: 0; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }
  :root dialog.q-picker { align-items: stretch; padding: 0; }
  .q-picker .sheet-box { max-width: none; max-height: none; height: 100dvh; border-radius: 0; padding: var(--sp-3) var(--sp-3) calc(var(--sp-3) + var(--safe-b)); }
  .q-picker-results { flex: 1; overflow: auto; }
}

/* == customer document == (04.7, quotes/public.html + print.html; moved from public.html's <style> by F.13) */
.doc { max-width: 52rem; margin: 0 auto; padding: var(--sp-3) 0 var(--sp-6); font-variant-numeric: tabular-nums; }
.doc-toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin: 0 0 var(--sp-4); }
.doc-toolbar :is(button, [role=button]) { margin: 0; width: auto; }
.doc-head { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-3); align-items: start; margin-bottom: var(--sp-4); }
.doc-head h1 { margin: 0 0 var(--sp-1); font-size: var(--fs-xl); }
.doc-seller, .doc-meta { font-size: var(--fs-sm); color: var(--c-text-2); }
.doc-seller strong, .doc-meta strong, .doc-customer strong { color: var(--c-text); }
.doc-meta { text-align: right; }
.doc-meta p, .doc-seller p, .doc-customer p { margin: 0 0 2px; }
.doc-customer { margin-bottom: var(--sp-4); }
.doc-note { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--c-surface-2, #f3f3f5); }
.doc-status { text-transform: capitalize; }
.doc-lines td.num, .doc-lines th.num { text-align: right; }
.doc-lines .q-amt { font-weight: 600; }
.doc-totals { display: grid; gap: 4px; max-width: 24rem; margin: var(--sp-3) 0 var(--sp-4) auto; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--r-lg); }
.doc-totals .tot { display: flex; justify-content: space-between; gap: var(--sp-3); }
.doc-totals dt { color: var(--c-text-2); }
.doc-totals dd { margin: 0; text-align: right; }
.doc-totals .tot-key { font-size: var(--fs-md); font-weight: 600; }
.doc-totals .tot-key dt { color: var(--c-text); }
.doc-totals .tot-key:first-child, .doc-totals .tot:not(.tot-key) + .tot-key { padding-top: 6px; border-top: 1px solid var(--c-border); }
.doc-terms { font-size: var(--fs-sm); color: var(--c-text-2); }
.doc-terms h2 { font-size: var(--fs-md); margin: var(--sp-3) 0 var(--sp-1); color: var(--c-text); }
.doc-terms p { white-space: pre-line; margin: 0; }
@media (max-width: 767px) {
  .doc-head { grid-template-columns: 1fr; }
  .doc-meta { text-align: left; }
  .doc-totals { max-width: none; }
}
@media print {
  @page { size: A4; margin: 16mm; }
  .no-print { display: none !important; }
  body { background: #fff; color: #000; }
  .doc { padding: 0; max-width: none; }
  .doc-lines thead { display: table-header-group; }
  .doc-lines tr, .doc-totals, .doc-head, .doc-terms { break-inside: avoid; }
}

/* == dashboard == (06.2, dashboard/index.html + _tile + _trend + _stage_bars + _rep_table): the period
   radios as a segmented control, five tiles (grid-stats: two across under 768 px), the trend SVG,
   native progress bars for stages and activity mix, the rep table as cards under 768 px (row 5.8) */
.dash-title { margin: 0; font-size: var(--fs-xl); }
.dash-controls { gap: var(--sp-2); margin: 0; }
.dash-seg { display: inline-flex; margin: 0; padding: 2px; gap: 2px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-chrome); }
.dash-seg label { position: relative; margin: 0; }
.dash-seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.dash-seg span { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 6px; color: var(--c-text-2); font-size: var(--fs-md); font-weight: 500; white-space: nowrap; }
.dash-seg input:checked + span { background: var(--c-bg); color: var(--c-text); box-shadow: 0 1px 2px rgba(17, 17, 26, .08); }
.dash-seg input:focus-visible + span { outline: 2px solid var(--c-accent); outline-offset: 0; }
:root .dash-controls select { width: auto; height: 30px; margin: 0; padding: 0 28px 0 10px; }
:root .dash-controls button { margin: 0; }
.dash-tiles { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
/* a money value never breaks inside the number: the tile is wide enough for "R 11 007 200.00" */
.dash-tile .value { white-space: nowrap; overflow-wrap: normal; }
.dash-tile .chip { vertical-align: middle; }
.dash-section { margin: 0 0 var(--sp-6); }
.dash-section h2 { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); }
.dash-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4); }
.dash-bar-list { list-style: none; margin: 0; padding: 0; }
.dash-bar-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; grid-template-areas: "label bar n" "detail detail detail"; gap: 0 var(--sp-2); align-items: center; padding: 4px 0; }
.dash-bar-label { grid-area: label; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root .dash-bar-list progress { grid-area: bar; margin: 0; }
.dash-bar-n { grid-area: n; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dash-bar-detail { grid-area: detail; font-size: var(--fs-sm); }
.dash-trend .bar .col { fill: var(--c-accent); }
.dash-trend .bar:hover .col, .dash-trend .bar:focus .col { fill: var(--c-accent-hover); }
.dash-reps { font-variant-numeric: tabular-nums; }
.dash-reps th.dash-rep { text-align: left; }
@media (max-width: 767px) {
  .dash-row { grid-template-columns: minmax(0, 1fr); }
  .dash-controls { width: 100%; }
  .dash-seg { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dash-seg span { justify-content: center; }
  .dash-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-tiles .value { font-size: 17px; }
  .dash-bar-label { white-space: normal; overflow-wrap: anywhere; } /* G3.2: "Tender submitted" in full, on two lines */
  :root .dash-controls select { flex: 1 1 auto; }
  .dash-reps, .dash-reps tbody, .dash-reps tr, .dash-reps td, .dash-reps th.dash-rep { display: block; }
  .dash-reps thead { display: none; }
  .dash-reps tr { padding: 8px 0 12px; border-bottom: 1px solid var(--c-border); }
  .dash-reps th.dash-rep { padding: 4px 12px 8px; font-size: var(--fs-lg); }
  .dash-reps td { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); border: 0; padding: 4px 12px; text-align: right; }
  .dash-reps td::before { content: attr(data-label); color: var(--c-text-2); text-align: left; }
}

/* == automation == (05.8, automation/index.html + edit.html + _form.html): the rules list with its
   live counts, Run now / Dry run, the draft list a dry run shows; one rule per row, stacked on phones */
.au-run { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.au-run form { margin: 0; }
.au-run button { margin: 0; width: auto; }
.au-list { list-style: none; margin: 0; padding: 0 18px 6px; }
.au-rule { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); padding: 12px 0; border-top: 1px solid var(--c-border); }
.au-rule-main { min-width: 0; }
.au-rule p { margin: 0; }
.au-rule-name { font-weight: 600; }
.au-rule-name a { color: inherit; text-decoration: none; }
.au-rule-name a:hover { text-decoration: underline; }
.au-rule-what { color: var(--c-text-2); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.au-rule-stats { margin-top: 3px; font-size: var(--fs-sm); color: var(--c-text-2); font-variant-numeric: tabular-nums; }
.au-rule-stats .is-new { color: var(--c-accent); font-weight: 600; }
.au-rule.is-paused .au-rule-name a { color: var(--c-text-2); }
.au-rule-toggle { margin: 0; flex: none; }
.au-rule-toggle button { margin: 0; width: auto; }
.au-empty { padding: 4px 18px 16px; margin: 0; }
.au-preview { margin: 0 18px 12px; padding: 12px 14px; border: 1px dashed var(--c-border); border-radius: var(--r-md); background: var(--c-subtle); }
.au-preview h3 { margin: 0; font-size: var(--fs-md); }
.au-preview p { margin: 2px 0 0; font-size: var(--fs-sm); }
.au-drafts { list-style: none; margin: 10px 0 0; padding: 0; }
.au-drafts li { display: flex; flex-direction: column; gap: 1px; padding: 6px 0; border-top: 1px solid var(--c-border); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.au-draft-title { font-weight: 500; }
.au-form { padding: 0 18px 16px; margin: 0; }
.au-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-3) 0 0; }
.au-actions button { margin: 0; width: auto; }
.au-edit { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
@media (max-width: 767px) {
  .au-rule { flex-direction: column; }
}

/* == stage health == (06.5, pipeline/_macros.html head + my_day/home.html): under each open column's
   head a three-segment bar (no next step / overdue / on track) with the words beside the colours
   (WCAG 1.4.1) and the column's weighted value; My day's hero tile, coloured by pace. */
.is-none { --hs: var(--c-warn); }
.is-late { --hs: var(--c-danger); }
.is-ok { --hs: var(--c-success); }
.col-head { flex-wrap: wrap; height: auto; min-height: 44px; row-gap: 5px; }
.col-health { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px; padding-bottom: 2px;
              font-size: var(--fs-xs); color: var(--c-text-2); }
.hs-bar { flex: 1 1 72px; display: flex; gap: 2px; height: 6px; min-width: 72px; border-radius: 3px; background: var(--c-hover); overflow: hidden; }
.hs { display: block; min-width: 24px; background: var(--hs); } /* 02.14: a segment is never thinner than 24px */
.col-weighted { flex: none; color: var(--c-text); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hs-words { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 1px 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hsw { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; }
.hsw::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--hs); }

.day-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 12px; padding: 12px 16px;
            border: 1px solid var(--c-border); border-left: 4px solid var(--hs, var(--c-border)); border-radius: var(--r-lg);
            background: var(--c-bg); color: var(--c-text); }
.day-hero:hover { background: var(--c-subtle); text-decoration: none; }
.day-hero.is-ahead { --hs: var(--c-success); }
.day-hero.is-on_track { --hs: var(--c-accent); }
.day-hero.is-behind { --hs: var(--c-danger); }
.day-hero-text { font-size: var(--fs-md); color: var(--c-text-2); font-variant-numeric: tabular-nums; }
.day-hero-text strong { font-size: var(--fs-xl); font-weight: 600; color: var(--c-text); letter-spacing: -0.01em; }
.day-hero progress { flex-basis: 100%; height: 6px; margin: 2px 0 0; }
@media (max-width: 767px) {
  .day-hero { padding: 10px 12px; }
  .day-hero-text strong { font-size: 17px; }
}

/* == calendar == (06.7 / F.49, calendar/index.html + _row.html): the week as seven day columns on a
   desktop, as many 220px columns as fit under 1100px, one under 768px (the day view is always one
   list). Inside a column the Tasks page's row drops to its phone layout (check . main / due / owner)
   and hides the deal line, so seven of them fit. Rule verified by .gate/067-probe2.mjs. */
.cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; align-items: start; }
.cal-week .tk-group { margin: 0; }
.cal-week .dt-row { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 3px; padding: 9px 8px 9px 10px; }
.cal-week .dt-row > .dt-check-form, .cal-week .dt-row > .dt-check { grid-row: 1 / 4; align-self: start; margin-top: 2px; }
.cal-week .dt-row > .dt-main { grid-column: 2; grid-row: 1; }
.cal-week .dt-row > .dt-due { grid-column: 2; grid-row: 2; justify-self: start; }
.cal-week .dt-row > .dt-owner { grid-column: 2; grid-row: 3; }
.cal-week .dt-row .dt-deal { display: none; }
.cal-week .dt-list > li + li::before { left: 44px; right: 8px; }
@media (max-width: 1100px) { .cal-week { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }
@media (max-width: 767px) {
  .cal-week { grid-template-columns: minmax(0, 1fr); }
  .cal-week .tk-group { margin: 0 -12px; }
}
/* F.61: a week column's Snooze sits under the task and its menu opens mid-screen, never off the left edge (.gate/f61-probe2-css.log) */
@media (min-width: 768px) { .cal-week .dt-row > .dt-acts { grid-column: 2; justify-self: start; } .cal-week .dt-pop { position: fixed; top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%); } }

/* == quotes polish == (F.48, quotes/_picker.html + catalogue/_search_results.html + quotes/public.html)
   The picker's rows carry role=button (quote_editor.js), which the button rules above paint as
   primary buttons: every row blue, inline-flex and nowrap, so the price ran off the dialog. Here a
   row is a plain grid row again; only the hovered or keyboard-focused row is highlighted, and the
   manager's cost sits under the sell price so the price column stays narrow. */
:root .q-picker-results .cat-hit {
  --pico-background-color: transparent; --pico-color: var(--c-text); --pico-box-shadow: none;
  display: grid; width: 100%; margin: 0; padding: 6px 12px; border: 0; border-radius: 0;
  font-weight: 400; text-align: left; white-space: normal; justify-content: stretch;
}
:root .q-picker-results .cat-hit + .cat-hit { border-top: 1px solid var(--c-border); }
:root .q-picker-results .cat-hit:is(:hover, :focus-visible) { --pico-background-color: var(--c-hover); }
:root .q-picker-results .cat-hit:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }
.q-picker-results .cat-hit-price { white-space: nowrap; }
.q-picker-results .cat-hit-price .muted { display: block; font-size: var(--fs-sm); }
/* the customer document on a phone screen: the description, then one row
   `2 each × R 100.00 · 12.5 % off   R 175.00` (a 0 discount is left out); print keeps the table */
@media screen and (max-width: 767px) {
  .doc-lines tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0.4em; padding: 8px 0; }
  .doc-lines td { height: auto; }
  .doc-lines td::before { content: none; display: inline; font-size: inherit; color: inherit; }
  .doc-lines .q-desc { flex: 1 0 100%; }
  .doc-lines td.num { color: var(--c-text-2); }
  .doc-lines .doc-unit::before { content: "\00d7\00a0"; }
  .doc-lines .doc-disc::before { content: "\00b7\00a0"; }
  .doc-lines .doc-disc::after { content: "\00a0% off"; }
  .doc-lines .doc-disc.is-zero { display: none; }
  .doc-lines td.q-amt { margin-left: auto; color: var(--c-text); }
}
/* == customer accept == (G2.7, quotes/public.html): the Accept form after the totals and terms,
   in the totals' column on a wide screen and full width on a phone; 16px fields (no zoom on
   focus) and a 44px button. A staff preview disables the fieldset. */
.doc-accept { max-width: 24rem; margin: var(--sp-4) 0 0 auto; padding: var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--r-lg); }
.doc-accept h2 { margin: 0 0 var(--sp-2); font-size: var(--fs-md); }
.doc-accept fieldset { margin: 0; }
.doc-accept input:not([type=checkbox]) { font-size: 16px; }
.doc-accept .doc-consent { display: flex; align-items: flex-start; gap: var(--sp-2); }
.doc-accept .doc-consent input { flex: none; margin: 2px 0 0; }
:root .doc-accept button { width: 100%; min-height: 44px; }
@media (max-width: 767px) { .doc-accept { max-width: none; } }
/* == stage sums == (G2b.6, pipeline/_macros.html head + tab): on a phone every stage tab carries
   its short sum and each column head the exact one, Incoming's its value before "N to accept";
   the wide head keeps its short sum (.hide-phone), so .sum-phone shows under 768px only. */
.tab-sum { font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.col-sum .sum-phone { display: none; }
@media (max-width: 767px) { .col-sum .sum-phone { display: inline; } }

/* == call outcome == (G2b.4, shell/_call_outcome.html + calllog.js): the outcome radios, "Plan the
   next step" (type chips, when chips, "Pick a day"), note + minutes, Save. Every chip is a pill of
   var(--touch) under a finger; the radio inside is hidden and the pill shows what is picked. */
#call-outcome .call-chip, #call-outcome .ttype-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; height: auto; min-height: var(--touch);
  margin: 0; padding: 0 12px; border: 1px solid var(--c-border); border-radius: var(--r-pill); background: var(--c-bg); color: var(--c-text); font-size: var(--fs-sm); cursor: pointer; }
:root #call-outcome .call-chip input[type=radio] { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
#call-outcome .call-chip:has(input:checked), #call-outcome .ttype-chip:has(input:checked) { border-color: var(--c-accent); background: var(--c-accent-soft); color: var(--c-accent-text); box-shadow: none; }
#call-outcome .call-chip:has(input:focus-visible) { outline: 2px solid var(--c-accent); outline-offset: 1px; }
#call-outcome .ttype { padding: 0; background: none; }
#call-outcome .call-next { min-width: 0; margin: 0 0 var(--sp-1); padding: 0; border: 0; }
#call-outcome .call-next legend { padding: 0; }
#call-outcome .call-next legend label { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--touch); margin: 0; font-weight: 600; }
#call-outcome .call-next:disabled [role="radiogroup"] { opacity: .45; }
#call-outcome .call-day { display: flex; gap: var(--sp-2); min-width: 0; margin: 0 0 var(--sp-3); padding: 0; border: 0; }
#call-outcome .call-day[hidden] { display: none; }
:root #call-outcome .call-day input { flex: 1; min-width: 0; height: var(--touch); margin: 0; }
#call-outcome .call-extra { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem; gap: var(--sp-2); align-items: end; }
#call-outcome .call-extra label { margin: 0; }
:root #call-outcome .call-extra textarea, :root #call-outcome .call-min input { margin: 0; }
:root #call-outcome .call-min input { height: var(--touch); }
:root #call-outcome .call-save { width: 100%; min-height: var(--touch); margin: var(--sp-3) 0 0; }
.fe-min { margin-left: 4px; color: var(--c-text-2); font-size: var(--fs-xs); }

/* == stacked rows == (08.1): <table class="stack-rows"> is one card per row under 768 px; each <td data-label="…"> names itself */
@media (max-width: 767px) {
  .stack-rows, .stack-rows tbody, .stack-rows tfoot, .stack-rows tr, .stack-rows th, .stack-rows td { display: block; }
  .stack-rows thead { display: none; }
  .stack-rows tr { padding: 8px 0; border-bottom: 1px solid var(--c-border); }
  .stack-rows td { display: flex; justify-content: space-between; gap: var(--sp-3); border: 0; padding: 4px 12px; text-align: right; overflow-wrap: anywhere; }
  .stack-rows td { height: auto; min-height: var(--row-h); }
  .stack-rows td::before { content: attr(data-label); flex: none; color: var(--c-text-2); text-align: left; }
  .stack-rows td:not([data-label])::before { content: none; }
}

/* == phone fit == (08.2) under 768 px: the bottom bar keeps five tabs (My day first; nav.PHONE_MORE
   items sit in the More sheet and light More up), the quick-add sheet keeps its height when the
   duplicate hint shows, every board control is a finger high, the pipeline switcher is the title,
   and the deal card's fields wrap instead of cutting the next task or "Expected close". */
.wa-mark.is-form { background: var(--c-accent); }
@media (max-width: 767px) {
  .rail-items > li.hide-phone { display: none; }
  .more-panel li.when-phone { display: block; }
  :root .rail-items:has(> li.hide-phone > [aria-current=page]) #more-btn { color: var(--c-accent-text); }
  :root .rail-items:has(> li.hide-phone > [aria-current=page]) #more-btn .rail-icon { background: var(--c-accent-soft); }

  /* the phone line and the hint area are reserved before the check answers: the stop hint (117 px)
     fits, a taller list of name matches scrolls inside (ponytail: one fixed slot; measure the hint
     in quickadd.js if a common hint ever outgrows it) */
  .qa-dialog .qa-line { min-height: 26px; }
  .qa-dialog .qa-line.is-empty { display: flex; visibility: hidden; }
  .qa-dialog .qa-hints, .qa-dialog .qa-hints:not(:has(*)) { display: flex; height: 120px; overflow-y: auto; overscroll-behavior: contain; }

  .board-page .grid-flags .flag-chip, .board-page .board-views a { height: auto; min-height: var(--touch); }
  :root .board-page .g-select select, .board-page .saved-views > summary { height: var(--touch); }
  .topbar-title:has(.pipe-switch) :is(.crumb-root, .crumb-sep) { display: none; }
  :root .topbar-title .pipe-switch > summary { display: block; position: relative; min-height: var(--touch); padding-right: 20px; line-height: var(--touch);
                                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--c-text); font-weight: 600; }
  .topbar-title .pipe-switch > summary .icon { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }

  .fld-label { white-space: normal; }
  .fld-body .static-value { white-space: normal; overflow-wrap: anywhere; }
}

/* == quote actions == (08.2, quotes/editor.html .q-thumb): on a phone Print and Send sit in a bar
   stuck to the bottom, above the tab bar, in thumb reach; the sticky totals ride above it. The wide
   page keeps its actions in the head (.when-phone hides the bar). */
@media (max-width: 767px) {
  .q-thumb.when-phone { position: sticky; bottom: calc(var(--tabbar-h) + var(--safe-b)); z-index: 6; display: flex; gap: var(--sp-2);
                        margin: var(--sp-3) calc(-1 * var(--sp-3)) 0; padding: 8px var(--sp-3); border-top: 1px solid var(--c-border); background: var(--c-bg); }
  :root .q-thumb > :is(a, button) { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--touch); margin: 0; }
  .content:has(> .q-thumb) .q-totals { bottom: calc(var(--tabbar-h) + var(--safe-b) + var(--touch) + 24px); }
}

/* == the phone day == (G3.1) My day puts the agenda first: under 768 px the page is a column with
   the lanes (Your tasks leading) above the hero and the KPI strip, by `order` only. The DOM keeps
   its order: each part is its own labelled section, so a screen reader's and the keyboard's path
   (greeting, numbers, lanes) reads the same as before. "Add activity" (.day-add: My day, /tasks,
   /calendar) is a bar fixed above the tab bar, in thumb reach; the page keeps room for it at the
   end. The Add sheet's "Plan it" sits in a foot stuck to the bottom of the sheet (both widths). */
.sheet-box .sheet-foot { position: sticky; bottom: calc(-1 * var(--sp-4)); z-index: 1; margin: var(--sp-3) calc(-1 * var(--sp-5)) calc(-1 * var(--sp-4));
                         padding: var(--sp-3) var(--sp-5) var(--sp-4); border-top: 1px solid var(--c-border); background: var(--c-bg); }
@media (max-width: 767px) {
  .day { display: flex; flex-direction: column; }
  .day > .day-lanes { order: 1; margin-bottom: 14px; }
  .day > :is(.day-hero, .day-kpis) { order: 2; }
  .day > .day-team { order: 3; }
  .day-lanes > .lane-tasks { order: -1; }
  :root .day-add { position: fixed; z-index: 10; left: var(--sp-3); right: var(--sp-3); bottom: calc(var(--tabbar-h) + var(--safe-b) + 8px);
                   margin: 0; box-shadow: var(--shadow-pop); }
  .content:has(.day-add) { padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + var(--touch) + var(--sp-6) + 8px); }
}

/* G4.3: a phone's My day puts the deals closing this week above the agenda (#day-closing is a
   .day-team, which the phone day sends last), wraps the KPI cards in two columns instead of a
   sideways strip, and gives a suggestion's Fix it / Dismiss their own 44 px row */
.sg-acts { display: contents; }
@media (max-width: 767px) {
  .day > #day-closing { order: 0; margin-bottom: 12px; }
  .day-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; scroll-snap-type: none; margin: 0 0 14px; padding: 0; }
  .day-kpis > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .kpi { min-width: 0; }
  .sg-acts { display: flex; flex-basis: 100%; gap: 8px; }
  .sg-acts .dl-claim { min-height: var(--touch); }
  .sg-more > summary { min-height: var(--touch); }
}

/* G3.4 / G3.12: a phone row or cell marked .hide-phone stays hidden inside the stacked tables
   (.stack-rows td and .dash-reps tr are display:block/flex at 0,1,1 and beat .hide-phone) */
@media (max-width: 767px) { .stack-rows td.hide-phone, .dash-reps tr.hide-phone { display: none; } }

/* == kpis sales cell (F.128) == money keeps its cents (G3.5), so on a phone the /kpis Sales cell's
   value, bar and "3 won" wrap inside the stacked row instead of breaking "won" letter by letter
   (390 px) or overflowing the row (320 px) */
@media (max-width: 767px) { .stack-rows td:has(> progress) { flex-wrap: wrap; } }

/* == phone board density (G3.14) == under 768 px the board shows the deals, not the controls: one
   bar row holds the totals, "Filters" and List; the chips, sort, owner and Saved views open under
   Filters (pipeline/board.html's <details>, its body laid over the board); the stages are one
   <select> heading the column in view (name · count · exact sum), so a column's own title row steps
   aside; Won / Lost / Delete rise over the tab bar only while a card is dragged (a phone's way is
   the card's Move button). A wide screen keeps its bar as it was: the details and its body are
   display: contents, the summary hidden (pipeline.js also opens it, for a browser without
   ::details-content). */
.stage-pick { display: none; }
@media (min-width: 768px) {
  .board-filters, .bf-body { display: contents; }
  .board-filters > summary { display: none; }
  .board-filters::details-content { display: contents; content-visibility: visible; }
}
@media (max-width: 767px) {
  .board-bar { position: relative; grid-template-columns: minmax(0, 1fr) auto auto; padding-bottom: 8px; }
  .board-total { overflow: hidden; text-overflow: ellipsis; }
  .board-total .faint { display: none; }
  :root .board-filters { grid-row: 1; grid-column: 2; margin: 0; }
  .board-bar-end { grid-column: 3; }
  :root .board-filters > summary { display: inline-flex; align-items: center; gap: 6px; height: var(--touch); margin: 0; padding: 0 12px;
                                   border: 1px solid var(--c-border); border-radius: var(--r-md); color: var(--c-text-2); font-weight: 500; white-space: nowrap; }
  :root .board-filters > summary::after { display: none; }
  :root .board-filters > summary.is-on { border-color: var(--c-accent); background: var(--c-accent-soft); color: var(--c-accent-text); }
  .bf-n { font-weight: 600; font-variant-numeric: tabular-nums; }
  .board-filters[open] > .bf-body { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; display: flex; flex-direction: column; gap: 10px;
                                    padding: 10px 12px 12px; border-bottom: 1px solid var(--c-border); background: var(--c-bg); box-shadow: var(--shadow-pop); }
  .stage-pick { display: block; flex: none; margin: 0; padding: 0 12px 8px; border-bottom: 1px solid var(--c-border); }
  :root .stage-pick select { height: var(--touch); margin: 0; border-left: 4px solid var(--stage); color: var(--c-text); font-weight: 600; font-variant-numeric: tabular-nums; }
  .col-head .col-title, .col-head .col-sum { display: none; }
  .col-head { min-height: 0; }
  .col-head:not(:has(.col-health)) { display: none; }
  .drop-zones { display: none; }
  .board-page.dragging .drop-zones { position: fixed; z-index: 30; left: 0; right: 0; bottom: calc(var(--tabbar-h) + var(--safe-b)); display: grid;
                                     gap: 8px; padding: 6px 12px 8px; }
  .zone, .board-page.dragging .zone { height: 64px; }
}
/* F.139: the select moves the board only through pipeline.js, so a phone without JavaScript gets
   the stage tabs back (plain #col-N links, one row that wraps) and each column's title row */
@media (max-width: 767px) and (scripting: none) {
  .stage-pick { display: none; }
  .stage-tabs { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px; padding: 4px 12px 8px; border-bottom: 1px solid var(--c-border); flex: none; }
  .stage-tab { display: inline-flex; align-items: center; gap: 6px; min-height: var(--touch); padding: 0 12px; border-radius: var(--r-pill);
               border: 1px solid var(--c-border); color: var(--c-text-2); font-weight: 500; white-space: nowrap; }
  .stage-tab:hover { text-decoration: none; }
  .tab-count { color: var(--c-text-3); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
  .board .col-head, .col-head .col-title { display: flex; }
  .col-head .col-sum { display: block; }
}

/* == phone working card (G4.1) == under 768 px an accepted deal's card is four rows, so 4 cards
   start above the tab bar at 390 x 844 and 3 at 360 x 740: who · amount · %, the deal name, then
   the flags over the last message with the one 44 px Move control beside those two rows. Its sheet
   lists the next stage first (pipeline.js marks it "Next" and focuses it; the digit keys keep the
   pipeline order). "Move to <next>" stays the wide screen's gutter arrow and the ] key.
   F.159: a card the board filter hides (pipeline.js [hidden-by-filter]) gets no grid, so .card[hidden-by-filter]'s display: none holds. */
@media (max-width: 767px) {
  :root .col-cards > .card:not(.card-in, [hidden-by-filter]) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; }
  .col-cards > .card:not(.card-in) > * { grid-column: 1 / -1; }
  .col-cards > .card:not(.card-in) > :is(.card-flags, .card-chat) { grid-column: 1; overflow: hidden; }
  .col-cards > .card:not(.card-in) > .card-tools { grid-column: 2; grid-row: 3 / span 2; align-self: center; margin: 0; }
  :root .card-next { display: none; }
  :root .card-more { height: var(--touch); }
  .move-list { display: flex; flex-direction: column; }
  .move-list > li:has(> .is-next) { order: -1; }
}

/* G4.4: the Add activity sheet's type and time chips are thumb-sized; /tasks' chips sit behind the
   board's Filters control (.board-filters), its open body laid over the list under .tk-bar */
.add-activity-form .ttype { flex-wrap: wrap; }
@media (max-width: 767px) {
  .sheet-dialog :is(.ttype-chip, .wchip) { min-height: var(--touch); }
  .tk-page .tk-bar { position: relative; }
}

/* G4.6: a phone's contact card leads with the name; the number is a call button, not a labelled cell */
@media (max-width: 767px) {
  .stack-rows td:is(.cr-name, .cr-phone) { justify-content: flex-start; text-align: left; }
  .stack-rows td:is(.cr-name, .cr-phone)::before { content: none; }
  .stack-rows td.cr-name { font-size: var(--fs-md); font-weight: 600; }
  .stack-rows td.cr-phone a { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--touch); color: var(--c-accent-text); }
  /* F.182: a card's lines take their own height (the 44 px row height left a blank line under each name);
     the call button keeps its 44 px, and its cell no padding, so the number sits right under the name */
  #contact-rows td { min-height: 0; }
  #contact-rows td.cr-phone { padding-block: 0; }
}

/* G4.2: a deal on a phone (the viewport, not the card container, so the inbox pane on a desktop keeps
   its header): Call, WhatsApp, Note and Activity are the composer's 44 px mode row at the bottom, in
   thumb reach. The header (.acts-docked: the composer renders) keeps only More, which gains Email, and
   the contact's and the deal's names wrap instead of ellipsising. A colleague's deal (no composer) keeps
   its header actions. The Call is a link, so it sits beside the tablist (.cm-modes), not in it. More is
   hidden in the one-column card (@container card, above); docked, it is the header's one action.
   F.163: on Details, which hides .lc-main and the composer with it, the header's circles come back
   (Email stays in More). */
.cm-modes { display: flex; align-items: center; gap: 2px; }
:root .cm-call { display: none; }
@media (min-width: 768px) { :root .lc-more-menu .mi-email { display: none; } }
@media (max-width: 767px) {
  :root .cm-call { display: inline-flex; text-decoration: none; }
  :root .cm-tab { min-height: var(--touch); }
  .lead-card:not([data-tab=details]) .lc-head.acts-docked a.lc-act, .lc-head.acts-docked a.lc-act[href^="mailto:"] { display: none; }
  .lc-head.acts-docked .lc-more > summary.lc-act { display: inline-flex; width: var(--touch); }
  .lc-names .inline-text { white-space: normal; overflow-wrap: anywhere; }
}

/* == stage probability == (STG-01, settings/_stages.html): a working stage's "Win %" (0-100) sits
   between "Stuck after" and "Deals now"; Incoming and the closed stages show a dash there. The
   columns narrow so the row still fits a 768 px window. On a phone row 2 has no room for four cells:
   the deal count moves up beside the name and Win % takes its place. */
.st-head, .st-form { grid-template-columns: 22px 26px minmax(120px, 1fr) 112px 104px 72px minmax(96px, 150px); }
.st-prob { display: flex; align-items: center; gap: 4px; color: var(--c-text-2); }
:root input.st-pct { width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
.st-pct:placeholder-shown + .st-unit { visibility: hidden; }
@media (max-width: 767px) {
  .st-form { grid-template-columns: 22px 26px auto auto minmax(0, 1fr) auto; }
  :root input.st-name { grid-column: 3 / 6; }
  .st-deals { grid-column: 6; grid-row: 1; }
  .st-prob { grid-column: 5 / 7; grid-row: 2; }
  .st-prob > .faint { display: none; } /* one dash under Incoming, Won and Lost is enough */
  :root input.st-pct { width: 40px; height: 32px; font-size: 14px; }
}
/* == A11Y-01 focus ring on all:unset controls == (gap U5) `all: unset` at (0,1,1) or more wipes the global
   :focus-visible outline (0,1,0); these controls had no ring of their own, so the keyboard reached them unseen.
   tests/shell/test_a11y_markup.py fails a new `all: unset` control without a :focus-visible rule. */
:root :is(button.link, .link-button, .rail-util, .segmented button, .palette-close, .palette-item, .callout-close,
  button.static-value.is-none, .qr-item, .pin-cancel, .pc-new-cancel, .g-select-mode, .dt-pop-move):focus-visible {
  outline: 2px solid var(--c-accent); outline-offset: 1px; }
:root .toast .toast-close:focus-visible { outline: 2px solid #9db4ff; outline-offset: 0; } /* the dark toast: Undo's ring colour */
/* == UI-01A Put Next task before Last message in the leads grid, in a labelled scroller with whole-column stops == */
.grid-scroll-hint { display: none; }
@media (min-width: 1101px) {
  .g-table .g-task { width: 252px; }
}
/* Widths follow the fields; the last stop hides whole columns behind the fixed identity. */
@media (min-width: 768px) {
  .grid-scroll { container: lead-grid / inline-size; scroll-snap-type: x mandatory; scroll-padding-left: 248px; }
  :root .g-table { --g-deal: 200px; --g-stage: 148px; --g-value: 112px; --g-task: 160px; --g-owner: 120px;
    --g-offscreen: calc(var(--g-stage) + var(--g-value) + var(--g-task)); width: calc(100cqw + var(--g-offscreen)); min-width: 0; }
  .grid-page .g-table .g-deal { width: var(--g-deal); }
  .g-table .g-stage { width: var(--g-stage); }
  .g-table .g-value { width: var(--g-value); }
  .grid-page .g-table .g-task { width: var(--g-task); }
  .g-table .g-owner { width: var(--g-owner); }
  .g-table .g-msg { width: auto; }
  .g-table thead th:not(.g-check):not(.g-deal) { scroll-snap-align: start; }
  .grid-scroll-hint.has-overflow { display: block; flex: none; margin: 0; padding: 5px 20px; border-bottom: 1px solid var(--c-border); color: var(--c-text-2); font-size: var(--fs-sm); }
}
@container lead-grid (min-width: 752px) {
  :root .g-table { --g-offscreen: calc(var(--g-stage) + var(--g-value)); }
}
@container lead-grid (min-width: 904px) {
  :root .g-table { --g-offscreen: var(--g-stage); --g-owner: var(--g-stage); }
}
@container lead-grid (min-width: 1208px) {
  :root .g-table { --g-offscreen: 0px; --g-deal: 272px; --g-task: 252px; --g-owner: 156px; }
}
/* == UI-02 Keep every planner control inside the phone sheet; Escape cancels it; dim the board behind it == */
.plan-pop { max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
.plan-foot { flex-wrap: wrap; }
.plan-foot .ttype { flex: 1 1 220px; flex-wrap: wrap; min-width: 0; }
.plan-foot > button { flex: none; margin-left: auto; }
@media (max-width: 767px) {
  :root .g-table tr.g-row td.g-deal { z-index: auto; }
  :root .g-table tr.g-row td.g-task { z-index: 2; overflow: visible; min-height: 26px; }
  :root .g-table tr.g-row:has([data-plan]) td.g-deal { min-height: 46px; }
  :root .g-table tr.g-row td.g-task .flag-plan { margin: 0; }
  .col-cards > .card:not(.card-in) > .card-flags { min-height: 26px; overflow: visible; flex-wrap: wrap; }
  :root .col-cards .card-flags .flag-plan { margin: 0; }
  .plan-pop { max-height: calc(100dvh - 12px); }
  .plan-foot { gap: 8px; }
  .plan-foot .cm-keys { display: none; }
  .plan-foot .ttype { flex-basis: 100%; }
  .plan-foot > button { min-height: var(--touch); }
  .plan-pop .when-row { flex-wrap: wrap; overflow: visible; mask-image: none; }
}
.board-page:has(> #plan-pop:not([hidden]))::after { content: ""; position: fixed; inset: 0; z-index: 44; background: rgba(15, 15, 20, .22); pointer-events: none; }
.board-page .card.is-planning { position: relative; z-index: 45; }
/* == UI-03 Put an incoming deal's status above its actions and let Details labels, phone and next task wrap == */
.lc-incoming { flex-wrap: wrap; }
.lc-incoming-text { flex: 1 0 100%; flex-wrap: wrap; }
.lc-incoming > form, .lc-incoming > button { flex: none; }
.fld-label { white-space: normal; }
.fld-label span { overflow: visible; text-overflow: clip; }
.phone-field .fld-body .inline { flex: 1 0 112px; }
.phone-field .inline-text { overflow: visible; text-overflow: clip; }
.fld-body .next-task-value { white-space: normal; overflow-wrap: anywhere; }
/* == UI-04A Keep rep names in view while the targets grid scrolls, in a labelled keyboard scroller == */
.table-wrap, .overflow-auto { max-width: 100%; min-width: 0; }
.table-scroll-hint { margin: 0 0 8px; color: var(--c-text-2); font-size: var(--fs-sm); }
@media (min-width: 768px) {
  .tg-table thead th:first-child, .tg-table .tg-rep { position: sticky; left: 0; z-index: 2; min-width: 140px; background: var(--c-bg); box-shadow: 1px 0 var(--c-border); }
  .tg-table thead th:first-child { z-index: 3; background: var(--c-subtle); }
  .tg-table.striped tbody tr:nth-child(odd) th.tg-rep { background: var(--c-bg); }
  .tg-table.striped tbody tr:hover th.tg-rep { background: var(--c-subtle); }
  .tg-table td { scroll-margin-left: 150px; }
}
/* == UI-04B Show targets three months to a row on a phone so a whole rep fits a short screen == */
@media (max-width: 767px) {
  .tg-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 8px; padding: 8px 0 12px; }
  .tg-table th.tg-rep { grid-column: 1 / -1; padding: 8px 0; }
  .tg-table td { display: block; height: auto; padding: 0; min-width: 0; }
  .tg-table td::before { display: block; font-size: var(--fs-xs); margin-bottom: 3px; }
  :root .tg-table input[type=text] { width: 100%; min-width: 0; padding: 0 4px; }
  .tg-table td.tg-q { display: flex; grid-column: 1 / -1; min-height: 28px; margin-bottom: 4px; background: var(--c-subtle); padding: 2px 6px; }
  .tg-table td.tg-q::before { margin: 0; }
}
/* == UI-06A Keep More reachable on a narrow record card; bound its menu; Escape returns focus == */
.lc-more-menu { max-width: calc(100vw - 24px); max-height: calc(100dvh - 180px); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 767px) {
  .lc-more-menu { position: fixed; top: 56px; right: 12px; left: 12px; width: auto; max-height: calc(100dvh - 68px); }
  .lc-more-menu :is(a, button) { min-height: var(--touch); }
}
/* == UI-06B Let the inbox filter tabs wrap instead of being cut == */
.segmented.ib-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.ib-tabs a { flex: 1 0 auto; }
/* == UI-05A Label the composer's submit Open WhatsApp when the message goes from the rep's phone == */
.cm-form[data-form=chat] .cm-foot { flex-wrap: wrap; }
.cm-form[data-form=chat] .cm-hint { white-space: normal; overflow: visible; }
@container card (max-width: 1040px) {
  .cm-form[data-form=chat] .cm-hint { flex-basis: 100%; order: 3; }
  .cm-form[data-form=chat] .cm-send { margin-left: auto; }
}
@container card (max-width: 720px) {
  .cm-form[data-form=chat]:not([hidden]) { display: block; padding-right: 0; }
  .cm-form[data-form=chat] .cm-foot { padding: 4px 8px 8px 12px; }
  .cm-form[data-form=chat] .cm-hint { display: block; }
  :root .cm-form[data-form=chat] .cm-send { width: auto; min-height: 44px; height: 44px; padding: 0 12px; border-radius: var(--r-md); font-size: var(--fs-sm); gap: 6px; }
}
/* == UI-05B Give the quick-reply menu a Close and Escape from inside it, with focus back in the message box == */
.qr-head { flex-wrap: wrap; padding-right: 48px; position: relative; }
:root .qr-close { position: absolute; right: 0; top: 0; width: 40px; min-width: 40px; height: 40px; }
/* == end UI-05B == */
/* == UI-07B Give the phone More sheet a Close that stays reachable while the sheet scrolls == */
.popover { max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
.popover-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: 0; z-index: 2; background: var(--c-bg); padding: 4px 8px; }
.popover-head .popover-heading { margin: 0; padding: 0; }
/* == UI-08A Fit the New pipeline form to the screen with a Name label and a Cancel == */
@media (max-width: 767px) {
  .pipe-bar { position: relative; }
  .pipe-new { position: static; }
  .pipe-new-pop { left: 0; right: 0; width: auto; max-height: calc(100dvh - 24px); overflow-y: auto; }
  :root .pipe-new-row input { min-width: 0; }
}
.pipe-new-pop { position: fixed; right: auto; width: 300px; max-width: calc(100vw - 16px); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 767px) {
  .pipe-new-pop { width: calc(100vw - 24px); right: auto; }
}

/* == inbound media (D15) == MED-04: a customer's photo as a thumbnail that opens it, a voice note as a
   player, any other file as a link, inside the bubble at every width (leads/_card_macros.html). */
.bubble-media { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px; padding: 0; list-style: none; }
.bubble-media li { min-width: 0; max-width: 100%; margin: 0; list-style: none; }
.bubble-media img { display: block; width: 160px; max-width: 100%; height: auto; border-radius: 6px; background: var(--c-border); }
.bubble-media audio { display: block; width: 240px; max-width: 100%; }
/* == end MED-04 == */
/* == UI-05C Fit the quick-reply menu to the screen in whole rows and preview the selected reply == */
.cm-recipient { display: none; }
/* A single menu scroller reveals complete action rows, including the final Activity. */
.qr-menu { position: fixed; right: auto; bottom: auto; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scroll-padding-block: 36px 12px; padding-bottom: 12px; }
.qr-menu > *, .qr-list { flex: none; }
.qr-list { overflow: visible; }
.qr-head { position: sticky; top: -4px; z-index: 1; background: var(--c-bg); min-height: 28px; }
.qr-scroll-hint { display: none; font-weight: 400; text-transform: none; }
.qr-menu.is-scrollable .qr-scroll-hint { display: inline; }
.qr-menu.is-scrollable .qr-keys { display: none; }
.qr-recipient { color: var(--c-text); font-weight: 500; text-transform: none; letter-spacing: 0; }
.qr-title { flex: 1 1 auto; }
@media (max-height: 600px) {
  .cm-form[data-form=chat] .cm-recipient { display: block; margin: 0; padding: 4px 12px 0; font-size: var(--fs-sm); font-weight: 500; }
}
/* The menu body advances in complete rows; full reply text is reviewed in the unsent composer. */
.qr-menu { overflow: hidden; padding: 4px; scrollbar-gutter: auto; }
.qr-head { position: relative; flex: none; min-height: 40px; }
.qr-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scroll-snap-type: y mandatory; }
.qr-body > *, .qr-body .qr-list { flex: none; }
:root .qr-body .qr-item, .qr-body .qr-manage, .qr-body .qr-sep { box-sizing: border-box; height: 44px; min-height: 44px; margin: 0; scroll-snap-align: start; }
.qr-body .qr-sep { display: flex; align-items: center; padding: 6px 8px; }
.qr-body .qr-sep[hidden] { display: none; }
.qr-body .qr-item[aria-selected=true] .qr-text { display: block; white-space: nowrap; }

@media (min-width: 768px) and (max-width: 1100px) and (min-height: 601px) {
  /* A selected reply uses two whole row units so the menu keeps its bounded scroll stops. */
  :root .qr-body .qr-item[data-qr-text][aria-selected=true] { height: 88px; grid-template-columns: 18px minmax(0, 1fr) auto; align-content: center; row-gap: 2px; }
  .qr-body .qr-item[data-qr-text][aria-selected=true] .qr-name { grid-column: 2; grid-row: 1; }
  .qr-body .qr-item[data-qr-text][aria-selected=true] .qr-badge { grid-column: 3; grid-row: 1; }
  .qr-body .qr-item[data-qr-text][aria-selected=true] .qr-text { grid-column: 1 / -1; grid-row: 2; display: -webkit-box; white-space: normal; }
}

@media (max-width: 767px) and (min-height: 601px) {
  /* Two whole row units fit three phone preview lines without changing the scroll stops. */
  :root .qr-body .qr-item[data-qr-text][aria-selected=true] { height: 88px; align-content: center; row-gap: 2px; }
  /* shortcut: longer replies stay clamped; use the full unsent composer to review them. */
  .qr-body .qr-item[data-qr-text][aria-selected=true] .qr-text { grid-column: 1 / -1; display: -webkit-box; white-space: normal; -webkit-line-clamp: 3; line-clamp: 3; }
}
.composer { scroll-margin-block: 8px; }
/* == end UI-05C == */
/* == UI-09A Put each Gaps table in a labelled scroller where names stay and columns stop whole == */
.report-scroll-hint { display: none; }
@media (min-width: 768px) {
  .report-scroll { scroll-padding-left: 160px; }
  .report-scroll .dash-reps tr > :first-child { position: sticky; left: 0; z-index: 2; min-width: 140px; max-width: 180px; white-space: normal; background: var(--c-bg); box-shadow: 1px 0 var(--c-border); }
  .report-scroll .dash-reps.striped tbody tr:nth-child(odd) > :first-child { background: var(--c-bg); }
  .report-scroll .dash-reps thead tr > :first-child { z-index: 3; background: var(--c-subtle); }
}
.report-scroll tbody th a { display: inline-block; max-width: 100%; }
@media (min-width: 1101px) {
  #gaps .dash-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 16px; }
  #gaps .dash-tile { padding: 8px 12px; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  /* Three whole metric columns make both the snap stops and the final stop readable. */
  #gaps .report-scroll { container-type: inline-size; scroll-snap-type: x mandatory; scroll-padding-left: 160px; }
  #gaps .report-scroll .dash-reps { --gaps-metric: calc((100cqw - 160px) / 3); width: calc(160px + var(--gaps-metric) * var(--gaps-metrics)); min-width: 0; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
  #gaps .report-scroll .dash-reps tr > :first-child { width: 160px; min-width: 160px; max-width: 160px; border-right: 1px solid var(--c-border-strong); box-shadow: none; }
  #gaps .report-scroll .dash-reps thead th:not(:first-child) { width: var(--gaps-metric); scroll-snap-align: start; }
  :root #gaps .report-scroll .dash-reps tbody th:first-child { background: var(--c-bg); }
  :root #gaps .report-scroll .dash-reps thead th:first-child { background: var(--c-subtle); }
}
@media (max-width: 767px) {
  #gaps .report-scroll { overflow: visible; }
  #gaps .dash-reps tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; padding: 0 8px 12px; }
  #gaps .dash-reps th.dash-rep { grid-column: 1 / -1; position: sticky; top: var(--topbar-h); z-index: 2; padding: 8px 4px; background: var(--c-bg); }
  #gaps .dash-reps td { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; min-height: 48px; padding: 4px; text-align: left; white-space: normal; overflow-wrap: anywhere; }
  #gaps .dash-reps td::before { font-size: var(--fs-sm); }
}
@media (min-width: 768px) {
  #gaps .report-scroll-hint { display: none; }
  #gaps .report-scroll-hint.has-overflow { display: block; }
  :root #gaps .report-scroll .dash-reps tbody th:first-child { background: var(--c-bg); }
  :root #gaps .report-scroll .dash-reps thead th:first-child { background: var(--c-subtle); }
}
@media (min-width: 768px) and (max-width: 1100px) {
  #gaps .dash-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Overflowing wide Gaps tables retain whole metrics at native scroll stops. */
@media (min-width: 1101px) {
  #gaps .report-scroll.gaps-whole-columns { container-type: inline-size; scroll-snap-type: x mandatory; scroll-padding-left: 160px; }
  #gaps .gaps-whole-columns .dash-reps { --gaps-metric: calc((100cqw - 160px) / var(--gaps-visible)); width: calc(160px + var(--gaps-metric) * var(--gaps-metrics)); min-width: 0; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
  #gaps .gaps-whole-columns .dash-reps tr > :first-child { width: 160px; min-width: 160px; max-width: 160px; border-right: 1px solid var(--c-border-strong); box-shadow: none; }
  #gaps .gaps-whole-columns .dash-reps thead th:not(:first-child) { width: var(--gaps-metric); white-space: normal; scroll-snap-align: start; }
}
/* == end UI-09A == */
/* == UI-10A first rejected field == */
/* forms marked data-focus-errors (catalogue, automation) keep the focused error clear of the top bar */
[data-focus-errors] [aria-invalid=true] { scroll-margin-block: 80px; }
/* == end UI-10A == */
/* == UI-12 quote descriptions on tablets == */
/* The costing editor runs out of description space before the phone breakpoint. */
@media (min-width: 768px) and (max-width: 1100px) {
  #quote-form .q-table, #quote-form .q-table tbody { display: block; }
  #quote-form .q-table thead { display: none; }
  #quote-form .q-table tr { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(112px, auto) 28px; gap: 6px 8px; padding: 12px 0; border-bottom: 1px solid var(--c-border); }
  #quote-form .q-table td { display: block; padding: 0; border: 0; width: auto; min-width: 0; height: auto; }
  #quote-form .q-table td::before { content: attr(data-label); display: block; font-size: var(--fs-xs); color: var(--c-text-2); }
  #quote-form .q-table .q-desc { grid-column: 1 / -1; }
  #quote-form .q-table .q-desc::before, #quote-form .q-table .q-remove::before { display: none; }
  #quote-form .q-table .q-amt { text-align: right; }
  #quote-form .q-table .q-remove { align-self: end; justify-self: end; }
}
@media (max-width: 767px) {
  #quote-form .q-table td { height: auto; }
  #quote-form :is(input, select, textarea, button) { scroll-margin-top: 64px; scroll-margin-bottom: calc(var(--tabbar-h) + var(--touch) * 2 + 32px); }
}
/* == end UI-12 == */
/* == FIX-22 Let a long phone number wrap in Details instead of running under its buttons == */
.phone-field .inline-text { white-space: normal; overflow-wrap: anywhere; }
/* == end FIX-22 == */
/* == UI-17 conversion sheet controls == */
/* "Accept as deal": title and Close above, Accept below, only the fields scroll (inbox/_convert.html) */
:root #convert-sheet :is(input, select) { border: 1px solid var(--c-border-strong); background-color: var(--c-bg); }
#convert-sheet .sheet-box { display: flex; flex-direction: column; max-height: calc(100dvh - 32px); padding: 0; overflow: hidden; }
#convert-sheet .sheet-head { flex: none; margin: 0; padding: 12px 20px; border-bottom: 1px solid var(--c-border); }
#convert-sheet .sheet-head [data-close] { width: 44px; height: 44px; }
#convert-sheet form { display: flex; flex-direction: column; min-height: 0; margin: 0; overflow: hidden; }
.convert-scroll-hint { flex: none; margin: 0; padding: 6px 20px; color: var(--c-text-2); font-size: var(--fs-sm); }
.convert-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scroll-padding-block: 12px; padding: 8px 20px 12px; }
.convert-body > :last-child { margin-bottom: 0; }
.convert-foot { flex: none; padding: 12px 20px; border-top: 1px solid var(--c-border); background: var(--c-bg); }
:root .convert-foot button { width: 100%; min-height: 44px; margin: 0; }
/* == UI-09B Show the forecast totals in a summary on tablets and the table in a labelled scroller == */
.forecast-summary { display: none; }
@media (min-width: 768px) and (max-width: 1100px) {
  .forecast-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 16px; padding: 12px 0; margin: 0 0 12px; border-block: 1px solid var(--c-border); }
  .forecast-summary dt { font-size: var(--fs-sm); color: var(--c-text-2); }
  .forecast-summary dd { margin: 2px 0 0; font-weight: 600; font-size: var(--fs-lg); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .report-scroll-hint { display: block; }
}
/* == end UI-09B == */
/* == UI-18 KPI leaderboard on phones == */
/* kpis/_leaderboard.html table.kpi-table: one card per person, every value and link whole; the
   :is(.kpi-table, .staff-table) rules are shared with the staff list (UI-22 adds the staff-only ones). */
@media (max-width: 767px) {
  :is(.kpi-table, .staff-table).stack-rows tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; padding: 8px; }
  :is(.kpi-table, .staff-table).stack-rows td { min-width: 0; min-height: 28px; padding: 4px 0; gap: 8px; white-space: normal; align-items: center; }
  :is(.kpi-table, .staff-table).stack-rows td[data-label=Name], .staff-table.stack-rows td[data-label=Email], .kpi-table.stack-rows td:is([data-label=Sales], [data-label=Contacts], [data-label=Added]), .kpi-table.stack-rows tfoot th { grid-column: 1 / -1; }
  :is(.kpi-table, .staff-table).stack-rows td:has(a) { min-height: var(--touch); }
  :is(.kpi-table, .staff-table).stack-rows td a { display: inline-flex; align-items: center; min-height: var(--touch); }
  :is(.kpi-table, .staff-table).stack-rows td::before { flex-shrink: 1; }
  :is(.kpi-table, .staff-table).stack-rows tbody tr { background: var(--c-bg); }
  :is(.kpi-table, .staff-table).stack-rows tbody tr:nth-child(odd) { background: var(--c-subtle); }
  :root :is(.kpi-table, .staff-table).stack-rows tr > :is(td, th) { background: transparent; }
  :is(.kpi-table, .staff-table).stack-rows td { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  :is(.kpi-table, .staff-table).stack-rows td::before { min-width: 0; }
  .kpi-table.stack-rows td:is([data-label=Contacts], [data-label=Added], [data-label=Sales]) { grid-template-columns: 60px minmax(0, 1fr); }
  .kpi-cell-value { min-width: 0; }
  .kpi-cell-value progress { display: block; width: 100%; margin: 3px 0 0 auto; }
  .kpi-cell-value .nowrap { white-space: normal; }
  .kpi-table.stack-rows tr { grid-template-columns: 24px minmax(0, 1fr) 24px minmax(0, 1fr); column-gap: 6px; }
  .kpi-table.stack-rows td { grid-template-columns: 68px minmax(0, 1fr); gap: 6px; min-height: 28px; text-align: left; }
  .kpi-table.stack-rows td[data-label=Name] { grid-column: 2 / -1; grid-row: 1; display: block; padding-left: 0; font-weight: 600; }
  .kpi-table.stack-rows td[data-label=Name]::before, .kpi-table.stack-rows td[data-label="#"]::before { content: none; }
  .kpi-table.stack-rows td[data-label="#"] { grid-column: 1; grid-row: 1; display: flex; justify-content: flex-start; align-items: center; width: 24px; min-height: 44px; }
  .kpi-table.stack-rows td[data-label=Score] { grid-column: 1 / 3; grid-row: 2; }
  .kpi-table.stack-rows td[data-label=Volume] { grid-column: 3 / 5; grid-row: 2; }
  .kpi-table.stack-rows td[data-label=Contacts] { grid-column: 1 / -1; grid-row: 3; }
  .kpi-table.stack-rows td[data-label=Added] { grid-column: 1 / -1; grid-row: 4; }
  .kpi-table.stack-rows td[data-label=Calls] { grid-column: 1 / 3; grid-row: 5; }
  .kpi-table.stack-rows td[data-label=Messages] { grid-column: 3 / 5; grid-row: 5; }
  .kpi-table.stack-rows td[data-label=Meetings] { grid-column: 1 / 3; grid-row: 6; }
  .kpi-table.stack-rows td[data-label=Replies] { grid-column: 3 / 5; grid-row: 6; }
  .kpi-table.stack-rows td[data-label=Sales] { grid-column: 1 / -1; grid-row: 7; }
  .kpi-table.stack-rows td:is([data-label=Contacts], [data-label=Added], [data-label=Sales]) { grid-template-columns: 68px minmax(0, 1fr); }
  .kpi-table .kpi-cell-value progress { display: inline-block; vertical-align: middle; width: 64px; min-width: 64px; margin: 0 0 0 6px; }
  .kpi-table.stack-rows tfoot td:empty { display: none; }
  .kpi-table.stack-rows tfoot th { grid-row: 1; text-align: left; padding: 8px 0; }
}
/* == UI-15 unsaved draft guard == */
/* app.js disables the handoff (Open in …, Mark as sent) while the draft has unsaved edits */
[data-draft-handoff][aria-disabled=true] { opacity: .55; cursor: not-allowed; }
@media (max-width: 767px) {
  /* on a phone Save changes leads the edit form and stays under the top bar */
  #draft-edit-form { display: flex; flex-direction: column; }
  .draft-edit-actions { order: -1; position: sticky; top: var(--topbar-h); z-index: 3; padding: 8px 0; margin-bottom: 8px; background: var(--c-bg); }
}
/* == end UI-15 == */

/* == UI-24 draft recipients are whole-row targets == */
/* UI audit R24: each recipient is one full-width link with its number or e-mail (a 17 px name link before);
   two jumps lead to the Contacts and Leads groups. */
.draft-picker-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.draft-recipient-list { list-style: none; margin: 0; padding: 0; }
.draft-recipient-list li { list-style: none; padding: 0; margin: 0; border-bottom: 1px solid var(--c-border); }
.draft-recipient { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; padding: 6px 8px; overflow-wrap: anywhere; }
.draft-recipient:hover { background: var(--c-subtle); text-decoration: none; }
.draft-recipient > * { min-width: 0; }
@media (max-width: 767px) {
  .draft-recipient, .draft-picker-nav a { min-height: 44px; }
  .draft-recipient { flex-wrap: nowrap; align-items: flex-start; gap: 2px 8px; }
  .draft-picker-nav a { display: inline-flex; align-items: center; padding-inline: 8px; }
}
.draft-recipient-info { display: flex; flex-direction: column; gap: 2px; }
.draft-recipient-info small { line-height: 1.35; }
.draft-recipient-status { flex: none; white-space: nowrap; align-self: flex-start; padding-top: 2px; }
.draft-picker > article { scroll-margin-top: calc(var(--topbar-h) + 12px); }
.draft-recipient-info { flex: 1; }
@media (min-width: 1101px) {
  .draft-recipient-info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px 16px; align-items: center; }
  .draft-recipient-contact { grid-column: 2; }
  .draft-recipient-title { grid-column: 1; }
  .draft-recipient-status { width: 64px; align-self: center; padding: 0; }
}

/* == UI-20 empty-state actions wrap == */
/* UI audit R20: a long search ("Add “…” as a company") wraps inside the screen instead of running off it */
.empty-actions { max-width: 100%; }
:root .empty-actions > :is(a, button) { max-width: 100%; height: auto; white-space: normal; overflow-wrap: anywhere; }

/* == UI-21 campaign list keeps the name and the form link readable == */
/* UI audit R21: tablet records keep every field and an "Open form" link that names its campaign */
@media (min-width: 768px) {
  .campaign-table td[data-label=Campaign] { min-width: 240px; }
  .campaign-table td[data-label=Form] { min-width: 200px; overflow-wrap: anywhere; }
}
.campaign-form-path { display: block; font-size: var(--fs-sm); }
@media (min-width: 768px) and (max-width: 1100px) {
  .campaign-table, .campaign-table tbody { display: block; }
  .campaign-table thead { display: none; }
  .campaign-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 16px; padding: 12px; border-bottom: 1px solid var(--c-border); }
  .campaign-table td { display: block; width: auto; min-width: 0 !important; height: auto; padding: 0; border: 0; }
  .campaign-table td::before { content: attr(data-label); display: block; color: var(--c-text-2); font-size: var(--fs-sm); }
  .campaign-table td[data-label=Campaign] { grid-column: 1 / -1; }
  .campaign-table td[data-label=Campaign]::before { display: none; }
  .campaign-table td[data-label=Form] { grid-column: span 2; }
}
@media (max-width: 1100px) {
  .campaign-table tbody tr { background: var(--c-bg); }
  .campaign-table tbody tr:nth-child(odd) { background: var(--c-subtle); }
  :root .campaign-table tbody tr > td { background: transparent; }
}
.campaign-table td[data-label=Form] a { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }

/* == UIX-02 phone leads filters wrap instead of clipping their labels == */
/* Three equal columns (stage, owner, sort) left each select ~77 px of text at 390 px: "Newest me…".
   Each select now takes its own width and the row wraps. */
@media (max-width: 767px) {
  .grid-filters { display: flex; flex-wrap: wrap; }
  .grid-filters .g-select { flex: 1 1 auto; min-width: 0; }
}
/* == UI-22 staff list readable on phones and tablets == */
/* UI audit R22 (Staff part; Contacts was F.182, KPIs is UI-18): a phone card per person with "View KPIs" a
   finger high; a tablet table whose headers and roles wrap between words only (fixed % widths split
   "Contacts" and "Manager" mid-word at 768 px), with only the e-mail allowed to break anywhere. */
@media (max-width: 767px) {
  .staff-table.stack-rows tr { grid-template-columns: minmax(0, 1fr) auto; gap: 0; padding: 8px 12px; }
  .staff-table.stack-rows td { grid-column: 1 / -1; grid-template-columns: 128px minmax(0, 1fr); gap: 12px; min-height: 26px; padding: 3px 0; text-align: left; }
  .staff-table.stack-rows td > * { justify-self: start; }
  .staff-table.stack-rows td[data-label=Name] { grid-column: 1; grid-row: 1; display: flex; font-weight: 600; }
  .staff-table.stack-rows td[data-label=Email] { grid-row: 2; display: block; overflow-wrap: anywhere; }
  .staff-table.stack-rows td:is([data-label=Name], [data-label=Email])::before { content: none; }
  .staff-table.stack-rows td[data-label=KPIs] { grid-column: 2; grid-row: 1; display: flex; gap: 8px; }
  .staff-table.stack-rows td[data-label=KPIs]::before { content: none; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .staff-table { width: 100%; }
  .staff-table :is(th, td) { padding: 6px; white-space: normal; }
  .staff-table td[data-label=Email] { overflow-wrap: anywhere; }
  .staff-table td:last-child a { white-space: nowrap; }
}
/* == end UI-22 == */

/* == UIX-03 leads grid: last message gets room on a 1280 px screen == */
/* UI-01A's widest widths (deal 272, task 252, owner 156) start at a 1208 px grid, which a 1280 px screen
   just reaches: the last message kept 144 px and every preview was cut. They now start at 1360 px. */
@container lead-grid (min-width: 1208px) and (max-width: 1359px) {
  :root .g-table { --g-deal: 232px; --g-task: 212px; --g-owner: 120px; }
}
/* == FIX-24 Compact stacked cards on the companies list and a campaign's tables == */
/* AUD-02 units 07/08: the one-line-per-cell phone cards lost a blind vote to the dense table.
   A .stack-compact card keeps the 08.1 labels but packs its cells: the first cell is the title
   (no label, its link a 44 px target), the others follow as short "Label value" items that wrap. */
@media (max-width: 767px) {
  .stack-rows.stack-compact tr {
    display: flex; flex-wrap: wrap; align-items: center;
    column-gap: var(--sp-3); padding: var(--sp-1) 12px;
  }
  .stack-rows.stack-compact td {
    flex: 0 1 auto; min-width: 0; max-width: 70%; min-height: 0; padding: 0; gap: var(--sp-1);
    text-align: left; font-size: var(--fs-sm);
  }
  .stack-rows.stack-compact td:first-child {
    flex: 1 1 60%; max-width: none; font-size: var(--fs-md); font-weight: 600;
  }
  .stack-rows.stack-compact td:first-child::before { content: none; }
  .stack-rows.stack-compact td:first-child a {
    display: inline-flex; align-items: center; min-height: var(--touch);
  }
}
/* == end FIX-24 == */

/* == UIX-06 phone focus and jumps stay clear of the top bar and the tab bar == */
/* Tabbing down a phone list scrolled the next link just into view: under the fixed tab bar. */
@media (max-width: 767px) {
  html { scroll-padding-block: calc(var(--topbar-h) + 8px) calc(var(--tabbar-h) + var(--safe-b) + 12px); }
}

/* == UIX-04 leads grid: a fade on the right edge while columns remain == */
/* Touch tablets show no scrollbar until you scroll; grid.js sets .more-right until the last column. */
.grid-scroll.more-right { mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
/* == UI-01B Draw the leads grid's stage chips and unread counts in neutral colours == */
.g-table .g-chip { background: var(--c-subtle); color: var(--c-text-2); }
.g-table .g-pick:hover .g-chip { background: var(--c-hover); }
.g-table .g-unread { background: var(--c-subtle); color: var(--c-text-2); border: 1px solid var(--c-border); }
/* == FIX-40 Wrapped inbox filter tabs start at the left, none stretched == */
/* AUD-02 768cc13 unit 13 (lost twice): UI-06B's `flex: 1 0 auto` stretched a tab that wrapped
   alone ("Archived" at 390) across its whole row, so its label sat centred, away from the others.
   Tabs keep their own width: a wrapped row starts at the left like a line of text. */
.ib-tabs a { flex-grow: 0; }
/* == end FIX-40 == */
/* == FIX-41 A campaign's phone cards show their numbers in aligned columns == */
/* AUD-02 768cc13 unit 12: FIX-24's packed "Label value" items start wherever the previous one
   ends, so "Leads 2" and "Leads 1" sit at different x and the critic preferred the old table.
   A .stack-cols card keeps FIX-24's title line, then one row of equal columns, each its label
   over its value: the same column starts at the same x in every card of the table. A column
   never gets narrower than its longest word (min-width: auto, no mid-word break), so at 320 px
   "Salesperson" takes the room it needs and the other columns share the rest. */
@media (max-width: 767px) {
  .stack-rows.stack-cols tr { column-gap: var(--sp-2); }
  .stack-rows.stack-cols td {
    flex: 1 1 0; min-width: auto; max-width: none; flex-direction: column;
    align-items: flex-start; gap: 0; overflow-wrap: normal;
  }
  .stack-rows.stack-cols td:first-child { flex-basis: 100%; }
  .stack-rows.stack-cols td::before { font-size: var(--fs-xs); }
}
/* == end FIX-41 == */
/* == FIX-42 "Accept as deal…" reads "Deal…" on a phone, not a second "Accept…" == */
/* .show-phone is the opposite of .hide-phone: shown under 768 px only. AUD-02 768cc13 unit 06:
   the phone label "Accept…" (UIX-01) repeated the verb of the Accept button beside it. */
.show-phone { display: none; }
@media (max-width: 767px) { .show-phone { display: inline; } }
/* == end FIX-42 == */
/* == FIX-43 the inbox action rows wrap on a phone instead of running past the screen == */
/* PROBE-ui17: a manager's held chat showed Accept, Deal…, Link, Decline and Block in one nowrap
   row; Block was cut off and the page scrolled sideways (the incoming row does the same at 320 px). */
@media (max-width: 767px) { .ib-inc-acts { flex-wrap: wrap; } }
/* == end FIX-43 == */
/* == FIX-45 A long unbroken label wraps inside its phone card instead of widening the page == */
/* AUD-01-W14 #2: FIX-41's column cells keep min-width: auto so "Salesperson" stays whole, and
   the title cell inherited it: an 80-character QR label with no space set the cell to 1067 px
   and scrolled /campaigns/1 sideways at 320 (labels run to 200). The title cell alone may
   shrink and break anywhere; the number columns keep FIX-41's rule. */
@media (max-width: 767px) {
  .stack-rows.stack-cols td:first-child { min-width: 0; overflow-wrap: anywhere; }
}
/* == end FIX-45 == */
/* == FIX-51 On a short phone the chat composer compacts so the newest message stays in view == */
/* A phone under 561 px high drops the visible "Message to <name>" label (the box keeps its
   aria-label) and the hint, and puts the box, tools and a round, named send button on one line. */
@media (max-width: 767px) and (max-height: 560px) {
  .cm-form[data-form=chat] .cm-recipient, .cm-form[data-form=chat] .cm-hint,
  .cm-form[data-form=chat] .cm-send-label { display: none; }
  .cm-form[data-form=chat]:not([hidden]) { display: flex; padding-right: 6px; }
  .cm-form[data-form=chat] .cm-foot { padding: 0 0 6px; }
  :root .cm-form[data-form=chat] .cm-send { width: var(--touch); min-height: var(--touch);
    height: var(--touch); padding: 0; border-radius: 50%; gap: 0; }
}
/* == end FIX-51 == */