/* ========================================================================
   CRM Editorial Design System
   --------------------------------------------------------------------
   Warm paper palette, hairline rules, restrained motion.
   Typography uses Roboto throughout (matches the ProAudit subdomain) —
   per user preference, readability trumps the earlier Fraunces/Inter Tight
   broadsheet. The --font-display / --font-body / --font-mono tokens all
   resolve to the same Roboto stack, so existing var(--font-*) references
   keep working without per-site changes.
   ======================================================================== */

.crm-layout {
    /* ---------- Color palette (warm, editorial) ---------- */
    --ink:           #0B0D12;   /* near-black, warm */
    --paper:         #FAF8F4;   /* warm off-white main canvas */
    --paper-sunk:    #F3EFE7;   /* slightly deeper surface for strips */
    --paper-raised:  #FFFDF8;   /* cards sit here, a hair above paper */
    --rule:          #E8E4DC;   /* 1px hairline */
    --rule-soft:     #EFEBE3;   /* dashed rail */

    /* Warm neutrals — tuned warm, NOT slate grey.
       --neutral-500 is the default muted-body tone (eyebrows, date cells,
       captions). It MUST clear WCAG AA 4.5:1 against --paper (#FAF8F4);
       #645E50 lands at 4.65:1 while keeping the warm undertone. Lighter
       values (#807A6C) fall to 3.4:1 and fail accessibility.
       --neutral-400 stays lighter — it's only ever used for hairline
       borders, disabled iconography, and the eyebrow rule, never for
       body text. */
    --neutral-50:    #F6F2EA;
    --neutral-100:   #EBE6DC;
    --neutral-200:   #DCD6C8;
    --neutral-300:   #B3AC9A;
    --neutral-400:   #958E7E;
    --neutral-500:   #645E50;
    --neutral-600:   #4E4A3D;
    --neutral-700:   #3A362C;
    --neutral-800:   #2A2822;
    --neutral-900:   #15140F;

    /* Brand + accents. --*-700 tokens are the text-safe variants that clear
       4.5:1 over their matching --*-50 tinted backgrounds. Pills that
       render coloured text on a tinted fill MUST use the -700 value. */
    --indigo-600:    #4F46E5;
    --indigo-700:    #3730A3;
    --indigo-50:     rgba(79, 70, 229, 0.08);
    --indigo-100:    rgba(79, 70, 229, 0.14);

    --amber-700:     #9A3412;   /* New / attention (darkened from #C2410C for 4.5:1 on --amber-50) */
    --amber-50:      rgba(194, 65, 12, 0.08);

    --mint-600:      #059669;   /* Qualified / success — for strong fills */
    --mint-700:      #065F46;   /* Text-safe mint for body copy on --mint-50 */
    --mint-50:       rgba(5, 150, 105, 0.08);

    --coral-700:     #991B1B;   /* Error / Lost (darkened from #B91C1C) */
    --coral-50:      rgba(185, 28, 28, 0.08);

    /* Typography tokens — all three collapse onto Roboto (ProAudit's stack).
       Kept as distinct variable names so no existing var(--font-display) /
       var(--font-mono) reference breaks; swap the values here to change the
       whole CRM type system in one place. */
    --font-display:  Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body:     Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:     Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Motion */
    --ease-out:      cubic-bezier(0.2, 0.8, 0.2, 1);
    --t-fast:        160ms;
    --t-med:         240ms;
    --t-slow:        320ms;
}

/* Apply the body font across all CRM surfaces */
.crm-main,
.crm-main * {
    font-family: var(--font-body);
}

.crm-main {
    background: var(--paper) !important;
    color: var(--ink);
}

/* Visually hidden but screen-reader-discoverable text. Used to give an
   accessible name to icon-only buttons whose activator element we can't
   directly label (MudMenu ActivatorContent, etc.). Accepted pattern —
   see https://www.w3.org/WAI/tutorials/forms/labels/#hiding-a-label. */
.crm-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;
}

/* =========================================================================
   Page scaffolding — editorial masthead
   ========================================================================= */
.crm-page {
    padding: clamp(28px, 4vw, 56px) clamp(24px, 5vw, 80px);
    max-width: 1320px;
}

.crm-page-masthead {
    border-bottom: 1px solid var(--rule);
    padding-bottom: 28px;
    margin-bottom: 32px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: end;
}

.crm-eyebrow {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--neutral-500);
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
}

.crm-eyebrow::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 1px;
    background: var(--neutral-400);
}

.crm-display-title {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-variation-settings: "opsz" 144;
    font-weight: 600;
    font-size: clamp(44px, 6vw, 60px);
    line-height: 1.04;
    letter-spacing: -0.022em;
    color: var(--ink);
    margin: 0;
}

.crm-deck {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    color: var(--neutral-500);
    margin: 12px 0 0;
    max-width: 60ch;
}

.crm-deck-count {
    font-family: var(--font-mono);
    color: var(--ink);
    font-weight: 600;
    font-feature-settings: "tnum";
}

.crm-masthead-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* =========================================================================
   Buttons — editorial restraint
   ========================================================================= */
.crm-btn-primary {
    background: var(--ink) !important;
    color: var(--paper) !important;
    text-transform: none !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    letter-spacing: 0.01em !important;
    border: 1px solid var(--ink) !important;
    border-radius: 2px !important;
    padding: 8px 18px !important;
    min-height: 38px !important;
    box-shadow: none !important;
    transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out) !important;
}
.crm-btn-primary:hover:not(:disabled) {
    background: var(--indigo-700) !important;
    border-color: var(--indigo-700) !important;
    transform: translateY(-1px);
}
.crm-btn-primary:disabled {
    background: var(--neutral-300) !important;
    border-color: var(--neutral-300) !important;
    color: var(--neutral-500) !important;
}

.crm-btn-ghost {
    background: transparent !important;
    color: var(--ink) !important;
    text-transform: none !important;
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    border: 1px solid var(--rule) !important;
    border-radius: 2px !important;
    padding: 8px 16px !important;
    min-height: 38px !important;
    box-shadow: none !important;
    transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out) !important;
}
.crm-btn-ghost:hover:not(:disabled) {
    border-color: var(--ink) !important;
    background: var(--paper-sunk) !important;
}

.crm-btn-text {
    background: transparent !important;
    color: var(--neutral-600) !important;
    text-transform: none !important;
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    box-shadow: none !important;
    padding: 6px 10px !important;
}
.crm-btn-text:hover:not(:disabled) {
    color: var(--ink) !important;
    background: transparent !important;
}

.crm-btn-suffix {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--neutral-500);
    text-transform: uppercase;
    margin-left: 8px;
    padding: 2px 6px;
    border: 1px solid var(--rule);
    border-radius: 2px;
    line-height: 1;
}

/* =========================================================================
   Filter bar — tight editorial strip
   ========================================================================= */
.crm-filter-bar {
    background: var(--paper-raised) !important;
    border: 1px solid var(--rule) !important;
    border-radius: 3px !important;
    padding: 14px 16px !important;
    margin-bottom: 20px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: flex-start !important;
    box-shadow: none !important;
}

.crm-filter-search { flex: 1 1 280px; min-width: 220px; }
.crm-filter-select { flex: 0 0 170px; }

/* Date range — MudDateRangePicker at compact bar sizes renders its inner
   .mud-input as a 260px-tall flex column because the two Start/End input
   slots each demand their natural minimum width (~274px) and the flex
   layout stacks what can't fit horizontally. The .mud-popover-cascading-
   value placeholder also claims vertical space.

   Fix: pin the picker to a 260px-wide slot, clamp EVERY nested control/
   input/fieldset-border element to the 40px dense-outlined row height
   with overflow:hidden so horizontal overflow doesn't wrap into a tall
   block. The popover itself is portaled via MudPopoverProvider and
   positions absolutely on open, so a 0-height placeholder here is fine.
   Inputs inside get a flex:1 with min-width:0 so the flex engine can
   actually shrink them below their intrinsic minimums. */
.crm-filter-date {
    flex: 0 0 280px !important;
    max-width: 280px !important;
    height: 40px;
}
.crm-filter-date .mud-input-control,
.crm-filter-date .mud-input-control-input-container,
.crm-filter-date .mud-input-outlined-with-label,
.crm-filter-date .mud-input.mud-input-outlined,
.crm-filter-date .mud-input-outlined-border {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
}
.crm-filter-date .mud-input.mud-input-outlined {
    overflow: hidden;
    align-items: center;
}
.crm-filter-date .mud-input.mud-input-outlined > .mud-input-slot,
.crm-filter-date .mud-input.mud-input-outlined > input.mud-input-slot {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
}
/* Button adornment wrapper defaults to flex:0 0 280px (parent width),
   which starves the two text inputs. Clamp it to content-width so the
   Start/End placeholders get real horizontal space. */
.crm-filter-date .mud-input-adornment.mud-input-adornment-end {
    flex: 0 0 auto !important;
    width: auto !important;
}
.crm-filter-date .mud-popover-cascading-value {
    position: absolute;
    height: 0 !important;
}

/* MudDatePicker / MudDateRangePicker popover — swap the default orange
   theme-primary for editorial ink + indigo. The picker popover is
   portaled to MudPopoverProvider OUTSIDE .crm-layout, so it does NOT
   inherit CRM custom properties (--ink / --paper / --indigo-600). Use
   concrete hex values here so the rules resolve regardless of tree
   position. The palette is a drop-in neutral that reads cleanly
   anywhere MudDatePicker shows up, not just CRM. */
.mud-picker-toolbar.mud-picker-datepicker-toolbar {
    background: #0B0D12 !important;
    color: #FAF8F4 !important;
}
.mud-picker-toolbar .mud-picker-year,
.mud-picker-toolbar .mud-picker-date,
.mud-picker-toolbar .mud-button-label { color: #FAF8F4 !important; }

.mud-picker .mud-day.mud-selected,
.mud-picker .mud-day.mud-day-selected,
.mud-picker .mud-range-selected {
    background-color: #4F46E5 !important;
    color: #FAF8F4 !important;
}
.mud-picker .mud-day.mud-current:not(.mud-selected):not(.mud-day-selected) {
    border-color: #4F46E5 !important;
    color: #4F46E5 !important;
}
.mud-picker .mud-picker-calendar-header-day { color: #645E50 !important; }

.crm-filter-bar .mud-input-outlined-border,
.crm-filter-bar .mud-input-slot { border-radius: 2px !important; }

.crm-filter-bar .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--neutral-400) !important;
}
.crm-filter-bar .mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: var(--indigo-600) !important;
    border-width: 1px !important;
}
.crm-filter-bar .mud-input-label,
.crm-filter-bar .mud-input-label-text {
    font-family: var(--font-body) !important;
    font-size: 12.5px !important;
    color: var(--neutral-500) !important;
}

.crm-filter-reset {
    text-transform: none !important;
    align-self: center;
    color: var(--neutral-500) !important;
    font-family: var(--font-body) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
}
.crm-filter-reset:hover { color: var(--ink) !important; }

.crm-multi-status-note {
    background: var(--paper-raised) !important;
    border: 1px solid var(--rule) !important;
    border-left: 3px solid var(--indigo-600) !important;
    border-radius: 2px !important;
    margin-bottom: 16px !important;
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    color: var(--neutral-700) !important;
}

/* =========================================================================
   Data grid — editorial table, no stock chrome
   ========================================================================= */
.crm-grid-surface {
    background: var(--paper-raised) !important;
    border: 1px solid var(--rule) !important;
    border-radius: 3px !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

.crm-data-grid {
    background: transparent !important;
}

.crm-data-grid .mud-table-container {
    background: transparent !important;
}

.crm-data-grid .mud-table-head .mud-table-row {
    background: var(--paper-sunk) !important;
    border-bottom: 1px solid var(--rule) !important;
}

.crm-data-grid .mud-table-head .mud-table-cell {
    background: transparent !important;
    color: var(--neutral-600) !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 10.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    border: none !important;
    padding: 14px 16px !important;
    white-space: nowrap;
}

.crm-data-grid .mud-table-body .mud-table-row {
    cursor: pointer;
    position: relative;
    transition: background var(--t-fast) var(--ease-out);
    background: transparent !important;
}

.crm-data-grid .mud-table-body .mud-table-row::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: var(--indigo-600);
    opacity: 0;
    transform: scaleY(0.3);
    transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out);
    pointer-events: none;
}

.crm-data-grid .mud-table-body .mud-table-row:hover {
    background: var(--paper-sunk) !important;
}
.crm-data-grid .mud-table-body .mud-table-row:hover::before {
    opacity: 1;
    transform: scaleY(1);
}

.crm-data-grid .mud-table-body .mud-table-cell {
    border-bottom: 1px solid var(--rule) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    padding: 16px !important;
    font-family: var(--font-body);
    color: var(--neutral-700);
    font-size: 13.5px;
    vertical-align: middle;
}

.crm-data-grid .mud-table-body .mud-table-row:last-child .mud-table-cell {
    border-bottom: none !important;
}

.crm-data-grid .mud-table-pagination-toolbar {
    background: var(--paper-sunk) !important;
    border-top: 1px solid var(--rule) !important;
    font-family: var(--font-body) !important;
    font-size: 12px !important;
    color: var(--neutral-600) !important;
}
.crm-data-grid .mud-table-pagination-toolbar * {
    font-family: var(--font-body) !important;
    font-feature-settings: "tnum";
}

/* Cell typography */
.crm-cell-date {
    font-family: var(--font-mono) !important;
    font-size: 11.5px !important;
    color: var(--neutral-500) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-feature-settings: "tnum";
    white-space: nowrap;
}
.crm-cell-company {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 24;
    font-weight: 500;
    font-size: 15.5px;
    color: var(--ink);
    letter-spacing: -0.005em;
    line-height: 1.25;
}
.crm-cell-contact {
    color: var(--neutral-700);
    font-weight: 500;
    font-size: 13.5px;
}
.crm-cell-email {
    font-family: var(--font-mono) !important;
    font-size: 11.75px !important;
    color: var(--neutral-500) !important;
    font-feature-settings: "tnum";
    letter-spacing: -0.01em;
}
.crm-cell-muted {
    color: var(--neutral-500);
    font-size: 13px;
}
.crm-cell-dash {
    color: var(--neutral-300);
    font-family: var(--font-mono);
}
.crm-cell-converted {
    font-weight: 500;
    color: var(--ink);
    font-size: 13.5px;
}
.crm-cell-actions {
    width: 48px;
    text-align: right;
}
.crm-cell-actions .mud-menu-button-activator {
    color: var(--neutral-500) !important;
    transition: color var(--t-fast) var(--ease-out);
}
.crm-cell-actions .mud-menu-button-activator:hover {
    color: var(--ink) !important;
    background: transparent !important;
}

/* Source chip (compact, editorial) */
.crm-source-chip {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--neutral-600);
    border: 1px solid var(--rule);
    border-radius: 2px;
    padding: 3px 8px;
    display: inline-block;
    background: var(--paper);
}

/* =========================================================================
   Empty states — editorial italic
   ========================================================================= */
.crm-empty-state {
    padding: 72px 24px;
    text-align: center;
    color: var(--neutral-500);
}
.crm-empty-state__title {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 72;
    font-style: italic;
    font-weight: 400;
    font-size: 24px;
    color: var(--ink);
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}
.crm-empty-state__body {
    font-size: 14px;
    color: var(--neutral-500);
    margin: 0;
    max-width: 40ch;
    margin: 0 auto;
    line-height: 1.55;
}
.crm-empty-state__rule {
    width: 40px;
    height: 1px;
    background: var(--neutral-300);
    margin: 18px auto;
}

/* =========================================================================
   LeadStatusBadge — custom editorial pill
   ========================================================================= */
.lead-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    font-family: var(--font-body);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-feature-settings: "tnum";
    border: 1px solid currentColor;
    border-radius: 2px;
    line-height: 1.4;
    background: transparent;
    white-space: nowrap;
    vertical-align: middle;
}
.lead-status__dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
    flex-shrink: 0;
}
.lead-status--new       { color: var(--amber-700); }
.lead-status--contacted { color: var(--indigo-600); }
.lead-status--qualified { color: var(--mint-600); }
.lead-status--converted {
    color: var(--mint-600);
    background: var(--mint-50);
}
.lead-status--closed {
    color: var(--neutral-500);
    border-color: var(--neutral-300);
}

/* =========================================================================
   ActivityTimeline — semantic editorial rail
   ========================================================================= */
.activity-rail {
    position: relative;
    list-style: none;
    padding: 4px 0 0 28px;
    margin: 0;
}

.activity-rail::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 10px;
    bottom: 10px;
    width: 0;
    border-left: 1px dashed var(--rule-soft);
}

.activity-rail__item {
    position: relative;
    padding: 0 0 22px;
    opacity: 0;
    transform: translateY(4px);
    animation: crm-rail-in var(--t-slow) var(--ease-out) forwards;
    animation-delay: calc(var(--i, 0) * 50ms);
}
.activity-rail__item:last-child { padding-bottom: 4px; }

.activity-rail__marker {
    position: absolute;
    left: -26px;
    top: 6px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--neutral-400);
    border: 2px solid var(--paper-raised);
    box-shadow: 0 0 0 1px var(--rule);
}
.activity-rail__marker--primary   { background: var(--indigo-600); }
.activity-rail__marker--success   { background: var(--mint-600); }
.activity-rail__marker--info      { background: #0891B2; }
.activity-rail__marker--warning   { background: var(--amber-700); }
.activity-rail__marker--error     { background: var(--coral-700); }
.activity-rail__marker--secondary { background: #7C3AED; }
.activity-rail__marker--default   { background: var(--neutral-400); }

.activity-rail__time {
    display: block;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--neutral-500);
    margin-bottom: 4px;
    font-feature-settings: "tnum";
}

.activity-rail__title {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 16;
    font-weight: 500;
    font-size: 16px;
    color: var(--ink);
    margin: 0;
    line-height: 1.25;
    letter-spacing: -0.005em;
}

.activity-rail__meta {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--neutral-600);
    margin: 4px 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    line-height: 1.45;
}
.activity-rail__meta-sep { color: var(--neutral-300); }
.activity-rail__meta-user { font-weight: 500; color: var(--neutral-700); }

.activity-rail__outcome {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 14px;
    color: var(--neutral-700);
    margin: 6px 0 0;
    line-height: 1.5;
}

.activity-rail__chips {
    margin: 8px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.activity-rail__chip {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--neutral-600);
    border: 1px solid var(--rule);
    border-radius: 2px;
    padding: 2px 7px;
    background: var(--paper);
    font-feature-settings: "tnum";
}
.activity-rail__chip b {
    font-weight: 600;
    color: var(--neutral-800);
    margin-right: 4px;
    opacity: 0.85;
}

.activity-rail__empty {
    padding: 28px 8px;
    text-align: center;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 15px;
    color: var(--neutral-500);
    letter-spacing: -0.005em;
}

@keyframes crm-rail-in {
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================================================
   AssignOwnerMenu — refined pill
   ========================================================================= */
.assign-owner {
    display: inline-block;
}

.assign-owner__activator {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 3px 12px 3px 3px !important;
    border: 1px solid var(--rule) !important;
    border-radius: 999px !important;
    background: var(--paper-raised) !important;
    color: var(--ink) !important;
    text-transform: none !important;
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    letter-spacing: -0.005em !important;
    box-shadow: none !important;
    transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out) !important;
}
.assign-owner__activator:hover {
    border-color: var(--ink) !important;
    background: var(--paper-raised) !important;
}
.assign-owner__activator--unassigned {
    border-style: dashed !important;
    color: var(--neutral-500) !important;
    font-style: italic;
}
.assign-owner__avatar {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--indigo-600), #7C3AED);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    flex-shrink: 0;
}
.assign-owner__avatar--empty {
    background: var(--paper);
    color: var(--neutral-500);
    border: 1px dashed var(--neutral-300);
}
.assign-owner__name {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.assign-owner__caret {
    font-size: 14px !important;
    color: var(--neutral-500) !important;
    margin-left: 2px !important;
}

.assign-owner__readonly {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 3px 12px 3px 3px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: var(--paper-sunk);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-600);
}

/* Menu popover — override MudBlazor chrome. MudPopoverProvider portals
   this popover OUTSIDE .crm-layout, so .crm-layout-scoped custom
   properties (--paper-raised / --rule / --ink / --indigo-600) do NOT
   resolve here — they evaluate to the empty string, background:
   var(--paper-raised) stays transparent, and the popover bleeds
   through onto underlying content (verified: visible overlap with
   the "Ready to move this lead forward?" CTA behind the menu).
   Use concrete hex values equal to the tokens so the popover
   renders opaquely regardless of tree position. */
.assign-owner-popover.mud-popover,
.assign-owner-popover .mud-list {
    background: #FFFDF8 !important;
    border: 1px solid #E8E4DC !important;
    border-radius: 3px !important;
    box-shadow: 0 1px 2px rgba(11, 13, 18, 0.04), 0 12px 32px rgba(11, 13, 18, 0.08) !important;
    padding: 4px !important;
    min-width: 280px;
    font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.assign-owner-popover .mud-list-item {
    position: relative;
    padding: 10px 14px 10px 18px !important;
    border-radius: 2px !important;
    color: #0B0D12 !important;
    transition: background 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.assign-owner-popover .mud-list-item::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 10px;
    bottom: 10px;
    width: 3px;
    background: #4F46E5;
    border-radius: 2px;
    opacity: 0;
    transition: opacity 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.assign-owner-popover .mud-list-item:hover {
    background: #F3EFE7 !important;
}
.assign-owner-popover .mud-list-item.is-active::before { opacity: 1; }
.assign-owner-popover .mud-list-item.is-active {
    background: rgba(79, 70, 229, 0.08) !important;
}

.assign-owner-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
}
.assign-owner-item__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    line-height: 1.3;
}
.assign-owner-item__name {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.005em;
}
.assign-owner-item__email {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--neutral-500);
    margin: 1px 0 0;
    font-feature-settings: "tnum";
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.assign-owner-item__check { color: #4F46E5 !important; }

/* Unassign row — same type weight as the staff rows so the list reads
   as one rhythm. Muted colour + the avatar's em-dash placeholder is
   the only cue needed. Italic here was too loud against the regular-
   weight staff names above it. */
.assign-owner-item--unassign .assign-owner-item__name {
    color: #645E50;
}
/* Replace the raw close-icon inside the avatar slot with a centred
   em-dash so it matches the unassigned badge shown on the grid. The
   MudIcon inside assign-owner__avatar--empty on the unassign row
   renders at odd metrics (positioned off-centre in the 26×26 circle
   — visible in the user's screenshot as an underscore-shaped mark).
   Hide the icon; let flex centre an em-dash glyph instead. */
.assign-owner-item--unassign .assign-owner__avatar--empty .mud-icon-root {
    display: none !important;
}
.assign-owner-item--unassign .assign-owner__avatar--empty {
    font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #645E50;
    font-size: 13px;
    line-height: 1;
}
.assign-owner-item--unassign .assign-owner__avatar--empty::before {
    content: "—";
}
.assign-owner-popover .assign-owner-divider {
    margin: 4px 0 !important;
    background: var(--rule) !important;
    height: 1px !important;
}

/* =========================================================================
   LeadDetail — magazine feature layout
   ========================================================================= */
.crm-detail-page {
    padding: clamp(24px, 3.5vw, 48px) clamp(24px, 5vw, 80px);
}

.crm-detail-back {
    margin-bottom: 20px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.crm-detail-back .crm-btn-text {
    padding: 4px 0 !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    color: var(--neutral-500) !important;
    letter-spacing: 0.1em !important;
}

.crm-detail-byline {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--neutral-500);
    margin: 0 0 12px;
    font-feature-settings: "tnum";
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.crm-detail-byline__sep { color: var(--neutral-300); }
.crm-detail-byline__id {
    color: var(--ink);
    font-weight: 600;
}

.crm-detail-masthead {
    border-bottom: 1px solid var(--rule);
    padding-bottom: 28px;
    margin-bottom: 28px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: end;
}

.crm-detail-title {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-variation-settings: "opsz" 144;
    font-weight: 600;
    font-size: clamp(40px, 5.5vw, 60px);
    line-height: 1.02;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 0;
}
.crm-detail-subtitle {
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: "opsz" 72;
    font-weight: 400;
    font-size: clamp(20px, 2.5vw, 26px);
    color: var(--neutral-600);
    margin: 10px 0 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.crm-detail-meta-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    margin-top: 20px;
}
.crm-detail-meta-cluster a {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--indigo-600);
    text-decoration: none;
    font-feature-settings: "tnum";
    letter-spacing: -0.01em;
}
.crm-detail-meta-cluster a:hover { text-decoration: underline; }
.crm-detail-meta-cluster__phone,
.crm-detail-meta-cluster__created {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--neutral-500);
    font-feature-settings: "tnum";
    letter-spacing: -0.01em;
}
.crm-detail-meta-cluster__sep { color: var(--neutral-300); }

.crm-detail-cta {
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: 16px 20px;
    margin-bottom: 28px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}
.crm-detail-cta__text {
    color: var(--neutral-700);
    font-size: 14.5px;
    margin: 0;
    flex: 1 1 auto;
    line-height: 1.5;
}
.crm-detail-cta__emphasis {
    font-family: var(--font-display);
    font-weight: 500;
    font-variation-settings: "opsz" 24;
    color: var(--ink);
    letter-spacing: -0.005em;
}
.crm-detail-cta__closed {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--neutral-500);
}
.crm-detail-cta__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.crm-detail-cta__sep {
    color: var(--neutral-300);
    font-family: var(--font-mono);
    margin: 0 6px;
}

.crm-detail-body {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 40px;
}
@media (max-width: 1024px) {
    .crm-detail-body { grid-template-columns: 1fr; gap: 28px; }
    .crm-detail-masthead { grid-template-columns: 1fr; }
}

.crm-detail-left  { display: flex; flex-direction: column; gap: 24px; }
.crm-detail-right { display: flex; flex-direction: column; gap: 24px; }

.crm-detail-card {
    background: var(--paper-raised) !important;
    border: 1px solid var(--rule) !important;
    border-radius: 3px !important;
    padding: 24px !important;
    box-shadow: none !important;
}
.crm-detail-card__label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    color: var(--neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--rule);
    display: flex;
    align-items: center;
    gap: 10px;
}
.crm-detail-card__label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: transparent;
}

.crm-detail-dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 18px 24px;
    margin: 0;
}
.crm-detail-dl > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.crm-detail-dl-full { grid-column: 1 / -1; }
.crm-detail-dl dt {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    color: var(--neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.crm-detail-dl dd {
    font-family: var(--font-body);
    font-size: 14.5px;
    color: var(--ink);
    margin: 0;
    word-break: break-word;
    line-height: 1.4;
    letter-spacing: -0.005em;
}
.crm-detail-message {
    white-space: pre-wrap;
    line-height: 1.6;
    color: var(--neutral-700);
    font-size: 14px;
    font-family: var(--font-body);
    padding: 10px 14px;
    background: var(--paper);
    border-left: 2px solid var(--rule);
    margin: 0;
}
.crm-detail-qualified-by {
    color: var(--neutral-500);
    margin-left: 6px;
    font-style: italic;
    font-family: var(--font-display);
}
.crm-detail-mono {
    font-family: var(--font-mono) !important;
    font-size: 12px;
    color: var(--neutral-600);
    font-feature-settings: "tnum";
    letter-spacing: -0.01em;
}

/* Skeleton refinement */
.crm-detail-skeleton { display: flex; flex-direction: column; gap: 14px; }
.crm-detail-skeleton .mud-skeleton {
    background: linear-gradient(90deg, var(--paper-sunk) 0%, var(--paper) 50%, var(--paper-sunk) 100%) !important;
    background-size: 200% 100% !important;
    border-radius: 2px !important;
}
.crm-detail-skeleton-body {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 40px;
    margin-top: 20px;
}
.crm-detail-skeleton-card { border-radius: 3px !important; }

/* =========================================================================
   QualifyLeadDialog — editorial wizard
   ========================================================================= */
.qualify-dialog.mud-dialog {
    width: 760px !important;
    max-width: 94vw !important;
    background: var(--paper) !important;
    border: 1px solid var(--rule) !important;
    border-radius: 3px !important;
    box-shadow: 0 1px 2px rgba(11, 13, 18, 0.04), 0 24px 60px rgba(11, 13, 18, 0.12),
                inset 0 0 0 1px rgba(11, 13, 18, 0.015) !important;
    font-family: var(--font-body);
}
.qualify-dialog.mud-dialog .mud-dialog-content { padding: 0 !important; }

.qualify-dialog__head {
    padding: 28px 32px 16px;
    border-bottom: 1px solid var(--rule);
    background: var(--paper);
}
.qualify-dialog__eyebrow {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--indigo-600);
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.qualify-dialog__eyebrow::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 1px;
    background: var(--indigo-600);
}
.qualify-dialog__title {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 48;
    font-weight: 500;
    font-size: 28px;
    line-height: 1.15;
    color: var(--ink);
    letter-spacing: -0.02em;
    margin: 0 0 8px;
}
.qualify-dialog__lead {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--neutral-500);
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.qualify-dialog__lead-name  { color: var(--neutral-700); font-weight: 500; }
.qualify-dialog__lead-sep   { color: var(--neutral-300); }
.qualify-dialog__lead-email {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--neutral-500);
}

/* Step indicator — Fraunces serial numerals */
.qualify-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding: 18px 32px 0;
    margin: 0;
    list-style: none;
}
.qualify-steps__item {
    text-align: center;
    padding-bottom: 12px;
    position: relative;
    border-bottom: 1px solid transparent;
    transition: border-color var(--t-med) var(--ease-out);
}
.qualify-steps__item--active {
    border-bottom-color: var(--ink);
}
.qualify-steps__num {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 48, "ss01" 1;
    font-weight: 400;
    font-size: 26px;
    color: var(--neutral-300);
    line-height: 1;
    display: block;
    margin-bottom: 4px;
    font-feature-settings: "tnum";
    transition: color var(--t-med) var(--ease-out);
}
.qualify-steps__item--active .qualify-steps__num { color: var(--ink); }
.qualify-steps__item--done   .qualify-steps__num {
    color: var(--mint-600);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--mint-600);
}
.qualify-steps__label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    color: var(--neutral-500);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    display: block;
}
.qualify-steps__item--active .qualify-steps__label { color: var(--ink); }

.qualify-dialog__body {
    padding: 28px 32px 8px;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.qualify-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.qualify-panel__title {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 24;
    font-weight: 500;
    font-size: 20px;
    color: var(--ink);
    letter-spacing: -0.015em;
    margin: 0;
    line-height: 1.2;
}
.qualify-panel__hint {
    color: var(--neutral-500);
    font-size: 13.5px;
    margin: -4px 0 4px;
    line-height: 1.55;
    max-width: 58ch;
}

/* Form fields */
.qualify-field { width: 100%; }
.qualify-field .mud-input-outlined-border,
.qualify-field .mud-input-slot {
    border-radius: 2px !important;
    border-color: var(--rule) !important;
}
.qualify-field .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--neutral-400) !important;
}
.qualify-field .mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: var(--indigo-600) !important;
    border-width: 1px !important;
    box-shadow: 0 0 0 3px var(--indigo-50);
}
.qualify-field .mud-input-label,
.qualify-field .mud-input-label-text {
    font-family: var(--font-body) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--neutral-500) !important;
}
.qualify-field input,
.qualify-field .mud-select-input {
    font-family: var(--font-body) !important;
    font-size: 14.5px !important;
    color: var(--ink) !important;
}

.qualify-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Segmented radio chips */
.qualify-segment {
    display: inline-flex;
    gap: 0;
    border: 1px solid var(--rule);
    border-radius: 2px;
    background: var(--paper-raised);
    padding: 2px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.qualify-segment .mud-radio {
    margin: 0 !important;
    padding: 6px 14px !important;
    border-radius: 2px !important;
    transition: background var(--t-fast) var(--ease-out);
    cursor: pointer;
}
.qualify-segment .mud-radio .mud-radio-content {
    padding: 0 !important;
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--neutral-600) !important;
}
.qualify-segment .mud-radio:hover .mud-radio-content { color: var(--ink) !important; }
.qualify-segment .mud-radio .mud-icon-button { display: none !important; }
.qualify-segment .mud-radio.mud-checked {
    background: var(--ink) !important;
}
.qualify-segment .mud-radio.mud-checked .mud-radio-content {
    color: var(--paper) !important;
}

/* Selected-company card */
.qualify-selected {
    background: var(--paper-raised) !important;
    border: 1px solid var(--rule) !important;
    border-left: 3px solid var(--indigo-600) !important;
    border-radius: 2px !important;
    padding: 14px 18px !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    gap: 14px;
}
.qualify-selected__avatar {
    width: 36px;
    height: 36px;
    border-radius: 2px;
    background: var(--indigo-50);
    color: var(--indigo-600);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.qualify-selected__text { min-width: 0; }
.qualify-selected__name {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 24;
    font-weight: 500;
    font-size: 16px;
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.qualify-selected__meta {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--neutral-500);
    margin: 2px 0 0;
    letter-spacing: -0.01em;
}

/* Company-typeahead dropdown row. Renders inside the MudAutocomplete list so
   the editorial type ramp matches the rest of the dialog. Address sits in the
   meta line — same role as on the qualify-selected card — so it disambiguates
   same-named shops at a glance. */
.qualify-lookup-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0;
    min-width: 0;
}
.qualify-lookup-item__name {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 24;
    font-weight: 500;
    font-size: 14px;
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.qualify-lookup-item__meta {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--neutral-500);
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qualify-alert {
    background: var(--paper-raised) !important;
    border: 1px solid var(--rule) !important;
    border-left: 3px solid var(--indigo-600) !important;
    border-radius: 2px !important;
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    color: var(--neutral-700) !important;
    margin: 4px 0 !important;
}
.qualify-alert--error {
    border-left-color: var(--coral-700) !important;
    color: var(--coral-700) !important;
}

.qualify-switch-wrap {
    display: flex;
    align-items: center;
    padding-left: 4px;
    height: 100%;
}
.qualify-switch-wrap .mud-switch-label {
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    color: var(--neutral-700) !important;
}

.qualify-owner-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
    padding: 14px;
    border: 1px solid var(--rule);
    background: var(--paper-raised);
    border-radius: 2px;
}
.qualify-owner-label {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--neutral-500);
}
.qualify-owner-hint {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--neutral-500);
    font-size: 12.5px;
    margin-top: 2px;
}

/* Dialog footer */
.qualify-dialog .mud-dialog-actions {
    border-top: 1px solid var(--rule);
    background: var(--paper);
    padding: 16px 32px !important;
    gap: 8px !important;
}

/* Qualify primary button — use Fraunces for a display feel */
.qualify-btn-primary {
    background: var(--ink) !important;
    color: var(--paper) !important;
    text-transform: none !important;
    font-family: var(--font-display) !important;
    font-variation-settings: "opsz" 24 !important;
    font-weight: 500 !important;
    font-size: 14.5px !important;
    letter-spacing: -0.005em !important;
    border: 1px solid var(--ink) !important;
    border-radius: 2px !important;
    padding: 8px 20px !important;
    box-shadow: none !important;
    min-height: 40px !important;
    transition: background var(--t-fast) var(--ease-out) !important;
}
.qualify-btn-primary:hover:not(:disabled) {
    background: var(--indigo-700) !important;
    border-color: var(--indigo-700) !important;
}
.qualify-btn-primary:disabled {
    background: var(--neutral-300) !important;
    border-color: var(--neutral-300) !important;
    color: var(--neutral-500) !important;
}
.qualify-btn-ghost {
    background: transparent !important;
    color: var(--ink) !important;
    text-transform: none !important;
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    border: 1px solid var(--rule) !important;
    border-radius: 2px !important;
    padding: 7px 16px !important;
    min-height: 40px !important;
    box-shadow: none !important;
}
.qualify-btn-ghost:hover:not(:disabled) {
    border-color: var(--ink) !important;
}
.qualify-btn-text {
    background: transparent !important;
    color: var(--neutral-500) !important;
    text-transform: none !important;
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    padding: 7px 12px !important;
    min-height: 40px !important;
    box-shadow: none !important;
}
.qualify-btn-text:hover:not(:disabled) { color: var(--ink) !important; }

/* =========================================================================
   Row entry stagger (list-based pages)
   ========================================================================= */
.crm-stagger > * {
    opacity: 0;
    animation: crm-fade-in var(--t-slow) var(--ease-out) forwards;
    animation-delay: calc(var(--i, 0) * 40ms);
}

@keyframes crm-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================================
   PipelineSelector — editorial tab strip (NOT MudTabs)
   ------------------------------------------------------------------------
   Monocle-style: mono eyebrow, Fraunces display tabs, hairline underline
   with a sub-pixel slide on activation.
   ========================================================================= */
.pipeline-selector {
    display: flex;
    align-items: baseline;
    gap: 20px;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.pipeline-selector__eyebrow {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--neutral-500);
    flex-shrink: 0;
    padding-right: 14px;
    border-right: 1px solid var(--rule);
    line-height: 1.8;
}

.pipeline-selector__tabs {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 4px;
    align-items: baseline;
    flex-wrap: wrap;
}

.pipeline-selector__tab {
    position: relative;
    background: transparent;
    border: 0;
    padding: 4px 10px 10px;
    margin: 0;
    cursor: pointer;
    color: var(--neutral-500);
    font-family: var(--font-display);
    font-variation-settings: "opsz" 48;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.1;
    letter-spacing: -0.015em;
    transition: color var(--t-med) var(--ease-out);
}
.pipeline-selector__tab::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: -1px;
    height: 2px;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 200ms var(--ease-out);
}
.pipeline-selector__tab:hover:not(.pipeline-selector__tab--active) {
    color: var(--neutral-700);
}
.pipeline-selector__tab:focus-visible {
    outline: none;
    color: var(--ink);
}
.pipeline-selector__tab:focus-visible::after {
    transform: scaleX(0.4);
    background: var(--indigo-600);
}
.pipeline-selector__tab--active {
    color: var(--ink);
}
.pipeline-selector__tab--active::after {
    transform: scaleX(1);
}

/* =========================================================================
   DealStageBadge — pill variants keyed by stage shape
   ------------------------------------------------------------------------
   Same geometry as lead-status so the visual rhythm stays consistent across
   the product; the palette differs per state (new/in-progress/closing/won/lost).
   ========================================================================= */
.deal-stage {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    font-family: var(--font-body);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-feature-settings: "tnum";
    border: 1px solid currentColor;
    border-radius: 2px;
    line-height: 1.4;
    background: transparent;
    white-space: nowrap;
    vertical-align: middle;
}
.deal-stage__dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
    flex-shrink: 0;
}
.deal-stage__name { letter-spacing: 0.08em; }
.deal-stage__sep  { color: inherit; opacity: 0.5; margin: 0 1px; }
.deal-stage__prob {
    font-family: var(--font-mono);
    font-weight: 500;
    letter-spacing: 0.02em;
    font-feature-settings: "tnum";
}

.deal-stage--new         { color: var(--amber-700); }
.deal-stage--in-progress { color: var(--neutral-600); border-color: var(--neutral-300); }
.deal-stage--closing     { color: var(--indigo-600); }
.deal-stage--won {
    color: #166534;                    /* evergreen — deeper than mint for a terminal feel */
    background: rgba(22, 101, 52, 0.08);
}
.deal-stage--lost {
    color: #7C1D1D;                    /* oxblood */
    background: rgba(124, 29, 29, 0.06);
}

/* =========================================================================
   PipelineKanban — swim-lane layout (editorial)
   ------------------------------------------------------------------------
   Stages stack TOP-DOWN as horizontal lanes; cards flow LEFT-TO-RIGHT
   inside each lane and wrap. This trades horizontal page scroll for a
   vertical funnel-shaped read: New at the top, Lost at the bottom.

   Five-variant stage palette drives the lane accent stripe and the deal
   card rail in lockstep:
     intro  — amber       (early funnel, attention-warm)
     mid    — neutral     (in motion, calm)
     late   — indigo      (closing, action-cool)
     won    — evergreen   (terminal, success)
     lost   — oxblood     (terminal, archival)
   ========================================================================= */

/* Per-variant accent tokens. Centralised here so lane heads, accent
   stripes, probability bars, and card rails all reference the same hue. */
.kanban-lane--intro { --kanban-accent: var(--amber-700); --kanban-accent-soft: rgba(154, 52, 18, 0.10); }
.kanban-lane--mid   { --kanban-accent: var(--neutral-500); --kanban-accent-soft: rgba(100, 94, 80, 0.10); }
.kanban-lane--late  { --kanban-accent: var(--indigo-600); --kanban-accent-soft: rgba(79, 70, 229, 0.10); }
.kanban-lane--won   { --kanban-accent: #166534; --kanban-accent-soft: rgba(22, 101, 52, 0.10); }
.kanban-lane--lost  { --kanban-accent: #7C1D1D; --kanban-accent-soft: rgba(124, 29, 29, 0.08); }

.deal-card--intro { --kanban-accent: var(--amber-700); --kanban-accent-soft: rgba(154, 52, 18, 0.10); }
.deal-card--mid   { --kanban-accent: var(--neutral-500); --kanban-accent-soft: rgba(100, 94, 80, 0.10); }
.deal-card--late  { --kanban-accent: var(--indigo-600); --kanban-accent-soft: rgba(79, 70, 229, 0.10); }
.deal-card--won   { --kanban-accent: #166534; --kanban-accent-soft: rgba(22, 101, 52, 0.10); }
.deal-card--lost  { --kanban-accent: #7C1D1D; --kanban-accent-soft: rgba(124, 29, 29, 0.08); }

.kanban-board.crm-layout {
    /* The shared `.crm-layout` class (in crm.css) also defines `display:
       flex` for the sidebar + main shell. crm.css loads AFTER crm-design.css,
       so on a specificity tie its rule wins. Compound selector here lifts
       us above the tie — otherwise the summary band and the column track
       would sit side-by-side as flex items. */
    display: block;
    position: relative;
    margin-top: 4px;
}

.kanban-board__container {
    display: block;
}

/* ---------- Pipeline summary band ---------- */
.kanban-summary {
    border: 1px solid var(--rule);
    background:
        linear-gradient(180deg, var(--paper-raised) 0%, var(--paper) 100%);
    margin: 0 0 24px;
    padding: 22px 26px;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}
.kanban-summary::before {
    /* Hairline editorial rule that sits above the band — gives the page
       a "newsroom standfirst" feel before the live numbers. */
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        var(--ink) 0%, var(--ink) 18%,
        var(--indigo-600) 18%, var(--indigo-600) 32%,
        var(--amber-700) 32%, var(--amber-700) 44%,
        #166534 44%, #166534 58%,
        var(--ink) 58%, var(--ink) 100%);
    opacity: 0.85;
}

.kanban-summary__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
}

.kanban-summary__item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 26px;
    border-left: 1px solid var(--rule);
    min-width: 0;
}
.kanban-summary__item:first-child {
    border-left: 0;
    padding-left: 0;
}

.kanban-summary__label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--neutral-500);
    margin: 0;
    line-height: 1.2;
}

.kanban-summary__value {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-variation-settings: "opsz" 144;
    font-weight: 600;
    font-size: clamp(28px, 2.4vw, 36px);
    line-height: 1.02;
    letter-spacing: -0.022em;
    color: var(--ink);
    margin: 0;
    font-feature-settings: "tnum";
}
.kanban-summary__value--won  { color: #166534; }
.kanban-summary__value--lost { color: #7C1D1D; }

.kanban-summary__hint {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    color: var(--neutral-500);
    letter-spacing: 0.04em;
    line-height: 1.3;
    text-transform: lowercase;
    font-variant: small-caps;
    font-feature-settings: "smcp", "tnum";
}

/* ---------- Lanes container ---------- */
.kanban-board__lanes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ---------- Lane shell ---------- */
.kanban-lane {
    --kanban-accent: var(--neutral-500);
    --kanban-accent-soft: rgba(100, 94, 80, 0.10);

    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
    transition: border-color var(--t-fast) var(--ease-out);
}
.kanban-lane:hover {
    border-color: var(--neutral-200);
}

/* Terminal lanes — distinctive sink treatment, subtle hatch to read as
   "archive", not "drop target". */
.kanban-lane--terminal {
    background:
        repeating-linear-gradient(
            135deg,
            var(--paper-raised) 0,
            var(--paper-raised) 14px,
            var(--paper-sunk) 14px,
            var(--paper-sunk) 15px
        );
    border-style: dashed;
    border-color: var(--neutral-200);
}

/* ---------- Lane head ---------- */
.kanban-lane__head {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 24px;
    row-gap: 6px;
    padding: 16px 22px 14px 26px;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    position: relative;
}
.kanban-lane--terminal .kanban-lane__head {
    background: transparent;
    border-bottom-style: dashed;
    border-bottom-color: var(--neutral-200);
}

/* Vertical accent stripe on the LEFT edge of the lane head — the
   unmistakable colour cue per stage variant. */
.kanban-lane__stripe {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 4px;
    background: var(--kanban-accent);
    pointer-events: none;
}

.kanban-lane__title {
    grid-row: 1;
    grid-column: 1;
    display: flex;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
}
.kanban-lane__index {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--neutral-400);
    letter-spacing: 0.04em;
    font-feature-settings: "tnum";
    flex-shrink: 0;
}
.kanban-lane__name {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-variation-settings: "opsz" 48;
    font-weight: 600;
    font-size: 19px;
    line-height: 1.1;
    letter-spacing: -0.014em;
    color: var(--ink);
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kanban-lane__prob {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--kanban-accent);
    letter-spacing: 0.04em;
    font-feature-settings: "tnum";
    flex-shrink: 0;
    line-height: 1;
    padding: 3px 7px;
    background: var(--kanban-accent-soft);
    border-radius: 2px;
}
.kanban-lane__terminal-tag {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--kanban-accent);
    background: var(--kanban-accent-soft);
    padding: 3px 8px;
    border-radius: 2px;
    flex-shrink: 0;
    line-height: 1;
}

.kanban-lane__meta {
    grid-row: 1;
    grid-column: 2;
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: var(--neutral-500);
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
}
.kanban-lane__count {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--ink);
    font-size: 14px;
    font-feature-settings: "tnum";
    letter-spacing: -0.01em;
}
.kanban-lane__count-label {
    font-size: 11px;
    color: var(--neutral-500);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: lowercase;
}
.kanban-lane__sep {
    color: var(--neutral-400);
    font-weight: 400;
    margin: 0 2px;
}
.kanban-lane__total {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--ink);
    font-size: 13px;
    font-feature-settings: "tnum";
    letter-spacing: -0.01em;
}

/* Probability progress bar — sits across the bottom of the head, the
   visual pulse of the lane. Track is paper-sunk; fill is the variant accent. */
.kanban-lane__bar {
    grid-row: 2;
    grid-column: 1 / -1;
    height: 2px;
    background: var(--paper-sunk);
    border-radius: 0;
    overflow: hidden;
    margin: 2px 0 0;
}
.kanban-lane__bar-fill {
    display: block;
    height: 100%;
    background: var(--kanban-accent);
    transition: width var(--t-med) var(--ease-out);
}

/* ---------- Lane drop zone (horizontal card flow) ---------- */
.kanban-lane__zone {
    padding: 14px 22px 16px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 96px;
    transition: background var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
    position: relative;
}

.kanban-zone--can-drop {
    background: var(--kanban-accent-soft);
    box-shadow: inset 0 0 0 1px var(--kanban-accent);
}
.kanban-zone--no-drop {
    background: rgba(124, 29, 29, 0.04);
    box-shadow: inset 0 0 0 1px rgba(124, 29, 29, 0.25);
    cursor: not-allowed;
}
.kanban-zone--disabled {
    background: transparent;
    opacity: 0.9;
    pointer-events: auto;
}
.kanban-zone--disabled.kanban-zone--no-drop {
    opacity: 1;
}

/* Empty-lane placeholder — a single hairline rule + label spanning the
   lane width, no boxes. Keeps empty stages from feeling broken. */
.kanban-zone__empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 8px 0;
    color: var(--neutral-400);
    pointer-events: none;
    min-width: 0;
}
.kanban-zone__empty-rule {
    width: 28px;
    height: 1px;
    background: var(--neutral-300);
    flex-shrink: 0;
}
.kanban-zone__empty-label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--neutral-400);
    line-height: 1.3;
}

/* Terminal-zone overlay — the focal content of Won/Lost lanes. */
.kanban-zone__terminal-overlay {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 4px 0;
    min-height: 64px;
}
.kanban-zone__terminal-label {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 48;
    font-weight: 600;
    font-size: 15px;
    color: var(--kanban-accent);
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.kanban-zone__terminal-hint {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--neutral-500);
    line-height: 1.4;
}

/* =========================================================================
   DealCard — compact horizontal card body for swim-lane layout
   ------------------------------------------------------------------------
   Three-column layout: rail | content | trailing stats | owner. Cards are
   ~320px wide × ~76px tall and flow horizontally inside their lane,
   wrapping when the row fills. The left rail accent tracks the lane
   variant (intro/mid/late/won/lost).
   ========================================================================= */
.deal-card {
    all: unset;
    --kanban-accent: var(--neutral-500);
    --kanban-accent-soft: rgba(100, 94, 80, 0.10);

    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    column-gap: 16px;
    width: 320px;
    min-height: 76px;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: 12px 14px 12px 18px;
    cursor: grab;
    transition: transform 120ms var(--ease-out),
                box-shadow 120ms var(--ease-out),
                border-color 120ms var(--ease-out);
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.deal-card__rail {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 3px;
    background: var(--kanban-accent);
    opacity: 0.85;
    pointer-events: none;
}
.deal-card:hover {
    transform: translateY(-1px);
    border-color: var(--kanban-accent);
    box-shadow: 0 1px 2px rgba(11, 13, 18, 0.04),
                0 8px 18px rgba(11, 13, 18, 0.05);
}
.deal-card:focus-visible {
    outline: none;
    border-color: var(--kanban-accent);
    box-shadow: 0 0 0 3px var(--kanban-accent-soft);
}
.deal-card:active {
    cursor: grabbing;
}

.deal-card__main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.deal-card__title {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-variation-settings: "opsz" 48;
    font-weight: 600;
    font-size: 14.5px;
    line-height: 1.2;
    letter-spacing: -0.012em;
    color: var(--ink);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.deal-card__sub {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-family: var(--font-body);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--neutral-500);
    line-height: 1.2;
    overflow: hidden;
}
.deal-card__company {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.deal-card__sub-sep {
    color: var(--neutral-400);
    flex-shrink: 0;
}
.deal-card__close {
    flex-shrink: 0;
    color: var(--neutral-500);
    font-feature-settings: "tnum";
}

.deal-card__stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}
.deal-card__amount {
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.012em;
    font-feature-settings: "tnum";
    line-height: 1;
}
.deal-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    color: var(--neutral-500);
    letter-spacing: 0.04em;
    line-height: 1;
    font-feature-settings: "tnum";
}
.deal-card__prob {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--kanban-accent);
    background: var(--kanban-accent-soft);
    font-feature-settings: "tnum";
    line-height: 1;
    padding: 3px 6px;
    border-radius: 2px;
}
.deal-card__activity {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 9.5px;
    color: var(--neutral-500);
    white-space: nowrap;
}

.deal-card__owner {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.deal-card__owner-avatar {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--paper);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.deal-card__owner-avatar--empty {
    background: var(--paper);
    color: var(--neutral-500);
    border: 1px dashed var(--neutral-300);
    box-shadow: none;
    font-weight: 400;
}

/* Drag state — a clean 1deg lift with a real shadow ramp. No bounce. */
.kanban-card--dragging .deal-card,
.deal-card.kanban-card--dragging {
    transform: translateY(-2px) rotate(0.8deg);
    border-color: var(--ink);
    box-shadow: 0 2px 4px rgba(11, 13, 18, 0.10),
                0 24px 40px rgba(11, 13, 18, 0.16);
    cursor: grabbing;
    z-index: 10;
}

/* The MudDynamicDropItem wrapper MudBlazor renders around the card — strip
   its chrome so only our card shows. */
.kanban-lane__zone .mud-dynamic-drop-item,
.kanban-lane__zone .mud-drop-item {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Placeholder outline on the zone during a drag-hover state — match the
   active lane's accent rather than always-indigo. */
.kanban-lane__zone .mud-drop-item-preview-start {
    background: transparent !important;
    border: 1px dashed var(--kanban-accent, var(--indigo-600)) !important;
    border-radius: 3px !important;
    min-height: 76px;
    width: 320px;
    opacity: 0.55;
}

/* =========================================================================
   Shared CRM dialogs (Plan 3 Task 14)
   ------------------------------------------------------------------------
   The qualify-dialog__* classes from Plan 2 define the editorial wizard
   aesthetic. Rather than rewrite QualifyLeadDialog, we introduce a shared
   .crm-dialog namespace that picks up the SAME visual language and is
   consumed by CloseDealWonDialog, CloseDealLostDialog, NewDealDialog,
   NewContactDialog, NewCompanyDialog, EditCompanyDialog, EditContactDialog.
   Where a rule is identical to a qualify-dialog__* rule, we chain both
   selectors so future refinements land in one place.
   ========================================================================= */

/* Dialog shell (reuses qualify-dialog sizing, slightly wider for 2-col forms) */
.crm-dialog.mud-dialog {
    width: 780px !important;
    max-width: 94vw !important;
    background: var(--paper) !important;
    border: 1px solid var(--rule) !important;
    border-radius: 3px !important;
    box-shadow: 0 1px 2px rgba(11, 13, 18, 0.04), 0 24px 60px rgba(11, 13, 18, 0.12),
                inset 0 0 0 1px rgba(11, 13, 18, 0.015) !important;
    font-family: var(--font-body);
}
.crm-dialog.mud-dialog .mud-dialog-content { padding: 0 !important; }

/* Size variants — tight for single-form dialogs, wide for close-won wizard */
.crm-dialog--tight.mud-dialog { width: 560px !important; }
.crm-dialog--wide.mud-dialog  { width: 860px !important; }

/* Heading block */
.crm-dialog__head {
    padding: 28px 32px 16px;
    border-bottom: 1px solid var(--rule);
    background: var(--paper);
}
.crm-dialog__eyebrow {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--indigo-600);
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.crm-dialog__eyebrow::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 1px;
    background: var(--indigo-600);
}
.crm-dialog__eyebrow--lost::before  { background: var(--coral-700); }
.crm-dialog__eyebrow--lost          { color: var(--coral-700); }
.crm-dialog__eyebrow--won::before   { background: var(--mint-600); }
.crm-dialog__eyebrow--won           { color: var(--mint-600); }

.crm-dialog__title {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 48;
    font-weight: 500;
    font-size: 28px;
    line-height: 1.15;
    color: var(--ink);
    letter-spacing: -0.02em;
    margin: 0 0 8px;
}
.crm-dialog__lead {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--neutral-500);
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.crm-dialog__lead-name  { color: var(--neutral-700); font-weight: 500; }
.crm-dialog__lead-sep   { color: var(--neutral-300); }
.crm-dialog__lead-email {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--neutral-500);
}

/* Step indicator — shared with qualify-steps, scales to N steps via grid-template */
.crm-steps {
    display: grid;
    gap: 0;
    padding: 18px 32px 0;
    margin: 0;
    list-style: none;
}
.crm-steps--2 { grid-template-columns: repeat(2, 1fr); }
.crm-steps--3 { grid-template-columns: repeat(3, 1fr); }
.crm-steps--4 { grid-template-columns: repeat(4, 1fr); }
.crm-steps__item {
    text-align: center;
    padding-bottom: 12px;
    position: relative;
    border-bottom: 1px solid transparent;
    transition: border-color var(--t-med) var(--ease-out);
}
.crm-steps__item--active { border-bottom-color: var(--ink); }
.crm-steps__num {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 48, "ss01" 1;
    font-weight: 400;
    font-size: 26px;
    color: var(--neutral-300);
    line-height: 1;
    display: block;
    margin-bottom: 4px;
    font-feature-settings: "tnum";
    transition: color var(--t-med) var(--ease-out);
}
.crm-steps__item--active .crm-steps__num { color: var(--ink); }
.crm-steps__item--done   .crm-steps__num {
    color: var(--mint-600);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--mint-600);
}
.crm-steps__label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    color: var(--neutral-500);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    display: block;
}
.crm-steps__item--active .crm-steps__label { color: var(--ink); }

/* Body */
.crm-dialog__body {
    padding: 28px 32px 8px;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.crm-dialog__body--compact { min-height: 0; }

/* Panel (one logical section per step) */
.crm-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.crm-panel__title {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 24;
    font-weight: 500;
    font-size: 20px;
    color: var(--ink);
    letter-spacing: -0.015em;
    margin: 0;
    line-height: 1.2;
}
.crm-panel__hint {
    color: var(--neutral-500);
    font-size: 13.5px;
    margin: -4px 0 4px;
    line-height: 1.55;
    max-width: 58ch;
}

/* Form field — picks up the same label/input styling as qualify-field */
.crm-field { width: 100%; }
.crm-field .mud-input-outlined-border,
.crm-field .mud-input-slot {
    border-radius: 2px !important;
    border-color: var(--rule) !important;
}
.crm-field .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--neutral-400) !important;
}
.crm-field .mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: var(--indigo-600) !important;
    border-width: 1px !important;
    box-shadow: 0 0 0 3px var(--indigo-50);
}
.crm-field .mud-input-label,
.crm-field .mud-input-label-text {
    font-family: var(--font-body) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--neutral-500) !important;
}
.crm-field input,
.crm-field .mud-select-input,
.crm-field textarea {
    font-family: var(--font-body) !important;
    font-size: 14.5px !important;
    color: var(--ink) !important;
}

/* Form layout helpers (reusable across dialogs) */
.dialog-form-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 4px;
}
.dialog-form-section + .dialog-form-section {
    border-top: 1px dashed var(--rule);
    padding-top: 18px;
    margin-top: 6px;
}
.dialog-form-section__legend {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--neutral-500);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.dialog-form-section__legend::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 1px;
    background: var(--neutral-400);
}
.dialog-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.dialog-form-grid--thirds {
    grid-template-columns: 2fr 1fr 1fr;
}
.dialog-form-row { width: 100%; }

/* Segmented radio chips (clone of qualify-segment) */
.crm-segment {
    display: inline-flex;
    gap: 0;
    border: 1px solid var(--rule);
    border-radius: 2px;
    background: var(--paper-raised);
    padding: 2px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.crm-segment .mud-radio {
    margin: 0 !important;
    padding: 6px 14px !important;
    border-radius: 2px !important;
    transition: background var(--t-fast) var(--ease-out);
    cursor: pointer;
}
.crm-segment .mud-radio .mud-radio-content {
    padding: 0 !important;
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--neutral-600) !important;
}
.crm-segment .mud-radio:hover .mud-radio-content { color: var(--ink) !important; }
.crm-segment .mud-radio .mud-icon-button { display: none !important; }
.crm-segment .mud-radio.mud-checked { background: var(--ink) !important; }
.crm-segment .mud-radio.mud-checked .mud-radio-content { color: var(--paper) !important; }

/* Stacked radio list (for longer option lists — DealLostReason with 7 values) */
.crm-radio-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid var(--rule);
    background: var(--paper-raised);
    border-radius: 2px;
    padding: 10px 14px;
}
.crm-radio-list .mud-radio {
    margin: 0 !important;
    padding: 6px 0 !important;
}
.crm-radio-list .mud-radio .mud-radio-content {
    padding: 0 0 0 8px !important;
    font-family: var(--font-body) !important;
    font-size: 13.5px !important;
    color: var(--neutral-700) !important;
}
.crm-radio-list .mud-radio.mud-checked .mud-radio-content {
    color: var(--ink) !important;
    font-weight: 500 !important;
}

/* Selected entity card (reuses qualify-selected pattern) */
.crm-selected {
    background: var(--paper-raised) !important;
    border: 1px solid var(--rule) !important;
    border-left: 3px solid var(--indigo-600) !important;
    border-radius: 2px !important;
    padding: 14px 18px !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    gap: 14px;
}
.crm-selected__avatar {
    width: 36px;
    height: 36px;
    border-radius: 2px;
    background: var(--indigo-50);
    color: var(--indigo-600);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.crm-selected__text { min-width: 0; }
.crm-selected__name {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 24;
    font-weight: 500;
    font-size: 16px;
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.crm-selected__meta {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--neutral-500);
    margin: 2px 0 0;
    letter-spacing: -0.01em;
}

/* Alerts */
.crm-dialog-alert {
    background: var(--paper-raised) !important;
    border: 1px solid var(--rule) !important;
    border-left: 3px solid var(--indigo-600) !important;
    border-radius: 2px !important;
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    color: var(--neutral-700) !important;
    margin: 4px 0 !important;
}
.crm-dialog-alert--error   { border-left-color: var(--coral-700) !important; color: var(--coral-700) !important; }

/* Switch wrapper (reuses qualify-switch-wrap) */
.crm-switch-wrap {
    display: flex;
    align-items: center;
    padding-left: 4px;
    min-height: 44px;
}
.crm-switch-wrap .mud-switch-label {
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    color: var(--neutral-700) !important;
}

/* MudSwitch editorial palette. Several CRM surfaces render
   <MudSwitch Color="Color.Success"> for active-state toggles
   (/sequences rows, /templates rows, sequence detail masthead,
   template detail masthead). Default material-success green is a
   flashy lime against the warm paper palette. Swap to editorial:
   ink track + paper thumb when ON, neutral track + paper thumb
   when OFF. Scope to .crm-main so admin + ProAudit keep defaults. */
.crm-main .mud-switch .mud-switch-track {
    opacity: 1 !important;
    background-color: var(--neutral-300) !important;
}
.crm-main .mud-switch .mud-switch-track.mud-success,
.crm-main .mud-switch .mud-switch-track.mud-primary,
.crm-main .mud-switch .mud-checked + .mud-switch-span .mud-switch-track,
.crm-main .mud-switch .mud-checked ~ .mud-switch-span .mud-switch-track {
    background-color: var(--ink) !important;
}
.crm-main .mud-switch .mud-switch-thumb,
.crm-main .mud-switch .mud-switch-thumb-small {
    background-color: var(--paper) !important;
    color: var(--ink) !important;
    box-shadow: 0 1px 2px rgba(11, 13, 18, 0.25);
}
.crm-main .mud-switch .mud-success-text,
.crm-main .mud-switch .mud-primary-text { color: var(--ink) !important; }

/* Owner picker section */
.crm-owner-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
    padding: 14px;
    border: 1px solid var(--rule);
    background: var(--paper-raised);
    border-radius: 2px;
}
.crm-owner-label {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--neutral-500);
}
.crm-owner-hint {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--neutral-500);
    font-size: 12.5px;
    margin-top: 2px;
}

/* --- CloseDealWonDialog — plan cards ------------------------------------ */
.close-dialog__plan-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.close-dialog__plan-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-left: 3px solid transparent;
    border-radius: 2px;
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.close-dialog__plan-card:hover {
    border-color: var(--neutral-400);
    background: var(--paper);
}
.close-dialog__plan-card--selected {
    border-color: var(--indigo-600);
    border-left-color: var(--indigo-600);
    background: var(--paper);
    box-shadow: 0 0 0 3px var(--indigo-50);
}
.close-dialog__plan-card__radio {
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--neutral-400);
    border-radius: 50%;
    background: var(--paper);
    flex-shrink: 0;
    position: relative;
    transition: border-color var(--t-fast) var(--ease-out);
}
.close-dialog__plan-card--selected .close-dialog__plan-card__radio {
    border-color: var(--indigo-600);
}
.close-dialog__plan-card--selected .close-dialog__plan-card__radio::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--indigo-600);
}
.close-dialog__plan-card__body { min-width: 0; }
.close-dialog__plan-card__name {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 24;
    font-weight: 500;
    font-size: 16px;
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.close-dialog__plan-card__desc {
    font-family: var(--font-body);
    font-size: 12.5px;
    color: var(--neutral-500);
    margin: 3px 0 0;
    line-height: 1.4;
}
.close-dialog__plan-card__price {
    text-align: right;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--ink);
    letter-spacing: -0.01em;
    flex-shrink: 0;
}
.close-dialog__plan-card__price-suffix {
    display: block;
    font-family: var(--font-body);
    font-size: 10.5px;
    color: var(--neutral-500);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 2px;
}

/* --- CloseDealWonDialog — portal contact rows --------------------------- */
.close-dialog__contact-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 1px solid var(--rule);
    background: var(--paper-raised);
    border-radius: 2px;
    padding: 6px;
}
.close-dialog__contact-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 2px;
    transition: background var(--t-fast) var(--ease-out);
    cursor: pointer;
}
.close-dialog__contact-row:hover { background: var(--paper); }
.close-dialog__contact-row__text { min-width: 0; }
.close-dialog__contact-row__name {
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.25;
}
.close-dialog__contact-row__email {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--neutral-500);
    margin-top: 2px;
}
.close-dialog__contact-row__badge {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 2px;
}
.close-dialog__contact-row__badge--primary {
    color: var(--indigo-600);
    background: var(--indigo-50);
}
.close-dialog__contact-row__badge--existing {
    color: #92400E;
    background: #FEF3C7;
}

/* --- CloseDealWonDialog — summary card ---------------------------------- */
.close-dialog__summary {
    border: 1px solid var(--rule);
    border-left: 3px solid var(--mint-600);
    background: var(--paper-raised);
    border-radius: 2px;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.close-dialog__summary__eyebrow {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mint-600);
}
.close-dialog__summary__row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 13px;
    margin: 0;
}
.close-dialog__summary__row dt {
    color: var(--neutral-500);
    font-weight: 400;
    margin: 0;
}
.close-dialog__summary__row dd {
    color: var(--ink);
    margin: 0;
    font-family: var(--font-mono);
    font-size: 12px;
    text-align: right;
}

/* Textarea character counter */
.crm-char-counter {
    text-align: right;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--neutral-500);
    letter-spacing: 0.04em;
    margin-top: -4px;
}
.crm-char-counter--warn { color: var(--coral-700); }

/* Notice card for lost-deal side-effects (trial cancel, enrollment exit) */
.crm-notice {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--rule);
    border-left: 3px solid var(--neutral-400);
    background: var(--paper-raised);
    border-radius: 2px;
}
.crm-notice__icon {
    flex-shrink: 0;
    color: var(--neutral-500);
    line-height: 1;
    margin-top: 1px;
}
.crm-notice__body { min-width: 0; font-size: 13px; color: var(--neutral-700); line-height: 1.5; }
.crm-notice__body strong { color: var(--ink); font-weight: 500; }
.crm-notice--trial { border-left-color: #B45309; }
.crm-notice--enrollment { border-left-color: var(--indigo-600); }

/* Dialog footer (reuses qualify-dialog actions styling) */
.crm-dialog .mud-dialog-actions {
    border-top: 1px solid var(--rule);
    background: var(--paper);
    padding: 16px 32px !important;
    gap: 8px !important;
}

/* Buttons — shared namespace (qualify-btn-* kept for backward compat) */
.crm-btn-primary {
    background: var(--ink) !important;
    color: var(--paper) !important;
    text-transform: none !important;
    font-family: var(--font-display) !important;
    font-variation-settings: "opsz" 24 !important;
    font-weight: 500 !important;
    font-size: 14.5px !important;
    letter-spacing: -0.005em !important;
    border: 1px solid var(--ink) !important;
    border-radius: 2px !important;
    padding: 8px 20px !important;
    box-shadow: none !important;
    min-height: 40px !important;
    transition: background var(--t-fast) var(--ease-out) !important;
}
.crm-btn-primary:hover:not(:disabled) {
    background: var(--indigo-700) !important;
    border-color: var(--indigo-700) !important;
}
.crm-btn-primary:disabled {
    background: var(--neutral-300) !important;
    border-color: var(--neutral-300) !important;
    color: var(--neutral-500) !important;
}
/* Danger variant for "Close as Lost" submit — uses coral rather than the ink fill */
.crm-btn-primary--danger { background: var(--coral-700) !important; border-color: var(--coral-700) !important; }
.crm-btn-primary--danger:hover:not(:disabled) {
    background: #9F1239 !important;
    border-color: #9F1239 !important;
}
/* Success variant for "Close as Won" submit — mint rather than ink */
.crm-btn-primary--success { background: #047857 !important; border-color: #047857 !important; }
.crm-btn-primary--success:hover:not(:disabled) {
    background: #065F46 !important;
    border-color: #065F46 !important;
}
.crm-btn-ghost {
    background: transparent !important;
    color: var(--ink) !important;
    text-transform: none !important;
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    border: 1px solid var(--rule) !important;
    border-radius: 2px !important;
    padding: 7px 16px !important;
    min-height: 40px !important;
    box-shadow: none !important;
}
.crm-btn-ghost:hover:not(:disabled) { border-color: var(--ink) !important; }
.crm-btn-text {
    background: transparent !important;
    color: var(--neutral-500) !important;
    text-transform: none !important;
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    padding: 7px 12px !important;
    min-height: 40px !important;
    box-shadow: none !important;
}
.crm-btn-text:hover:not(:disabled) { color: var(--ink) !important; }

/* =========================================================================
   Companies — filter-bar switch, numeric cells, tab strip, deals table,
   contact list, and the CompanyCard component.
   Extends the broadsheet design system for Plan 3 / Task 15.
   ========================================================================= */

/* Filter bar: inline toggle (IncludeInactive) */
.crm-filter-switch {
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
    font-size: 12.5px;
    color: var(--neutral-600);
    letter-spacing: 0.01em;
}
.crm-filter-switch .mud-switch-label {
    color: var(--neutral-600) !important;
    font-family: var(--font-body) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em;
}

/* Right-aligned numeric columns with tabular numerals */
.crm-cell-num {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--ink);
}
.crm-cell-num-head {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}
.crm-cell-num__value {
    display: inline-block;
    min-width: 2ch;
    font-feature-settings: "tnum" 1;
}

/* Inactive byline pip */
.crm-detail-byline__inactive {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    color: var(--coral-700);
    background: var(--coral-50);
    padding: 2px 8px;
    border-radius: 2px;
    font-weight: 600;
}

/* Pending byline placeholder — used while secondary data (e.g., pipeline
   metadata) is still resolving. A soft, low-contrast ellipsis that occupies
   the final width without silently flickering an incorrect value. */
.crm-detail-byline__pending {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--neutral-400);
    opacity: 0.7;
    animation: crm-byline-pulse 1.4s ease-in-out infinite;
}
@keyframes crm-byline-pulse {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 0.85; }
}

/* =========================================================================
   Tab strip — semantic <nav> with <button role="tab"> (NOT MudTabs).
   Flat, hairline-bottom, editorial. Count pip in mono.
   ========================================================================= */
.crm-tab-strip {
    display: flex;
    align-items: stretch;
    gap: 2px;
    border-bottom: 1px solid var(--rule);
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}
.crm-tab-strip__tab {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 14px 20px 12px;
    margin-bottom: -1px;
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0.005em;
    color: var(--neutral-500);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: color var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out);
}
.crm-tab-strip__tab:hover {
    color: var(--ink);
}
.crm-tab-strip__tab:focus-visible {
    outline: 2px solid var(--indigo-600);
    outline-offset: -2px;
}
.crm-tab-strip__tab--active {
    color: var(--ink);
    border-bottom-color: var(--ink);
    font-weight: 600;
}
.crm-tab-strip__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 0 7px;
    height: 20px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--neutral-500);
    background: var(--paper-sunk);
    border: 1px solid var(--rule);
    border-radius: 10px;
    letter-spacing: 0.02em;
}
.crm-tab-strip__tab--active .crm-tab-strip__count {
    color: var(--ink);
    background: var(--paper-raised);
    border-color: var(--neutral-300);
}

.crm-tab-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.crm-tab-panel__head {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-bottom: -4px;
}

/* Panel-variant empty state (smaller than top-level list empty state) */
.crm-empty-state--panel {
    padding: 48px 24px;
    border: 1px solid var(--rule);
    border-radius: 3px;
    background: var(--paper-raised);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.crm-empty-state__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--indigo-700);
    text-decoration: none;
    padding: 8px 14px;
    border: 1px solid var(--indigo-600);
    border-radius: 2px;
    transition: background var(--t-fast) var(--ease-out);
}
.crm-empty-state__cta:hover {
    background: var(--indigo-50);
}

/* =========================================================================
   Deals table (company-scoped) — clean editorial table, mono amounts,
   full-row click target. Not a MudDataGrid — this is a short, focused list.
   ========================================================================= */
.crm-deals-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 3px;
    overflow: hidden;
    font-size: 13px;
}
.crm-deals-table thead th {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    color: var(--neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid var(--rule);
    background: var(--paper-sunk);
}
.crm-deals-table tbody td {
    padding: 14px 18px;
    border-top: 1px solid var(--rule-soft);
    vertical-align: middle;
    color: var(--ink);
}
.crm-deals-table tbody tr:first-child td { border-top: 0; }
.crm-deals-table__row {
    cursor: pointer;
    transition: background var(--t-fast) var(--ease-out);
}
.crm-deals-table__row:hover {
    background: var(--paper-sunk);
}
.crm-deals-table__name {
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.005em;
}
.crm-deals-table__num {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
    font-family: var(--font-mono);
}

/* Deal status pill — semantic <span>, not MudChip */
.crm-deal-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 2px;
    border: 1px solid var(--rule);
    background: var(--paper-raised);
    color: var(--neutral-600);
}
.crm-deal-status--open { color: var(--indigo-700); border-color: var(--indigo-600); background: var(--indigo-50); }
.crm-deal-status--won  { color: var(--mint-700);   border-color: var(--mint-600);   background: var(--mint-50); }
.crm-deal-status--lost { color: var(--coral-700);  border-color: var(--coral-700);  background: var(--coral-50); }

/* =========================================================================
   Contact list — editorial row, hairline separators, avatar circle.
   Not MudList — semantic <ul>/<li>.
   ========================================================================= */
.crm-contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 3px;
    overflow: hidden;
}
.crm-contact-list__item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-top: 1px solid var(--rule-soft);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease-out);
}
.crm-contact-list__item:first-child { border-top: 0; }
.crm-contact-list__item:hover { background: var(--paper-sunk); }
.crm-contact-list__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--paper-sunk);
    border: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: 0.02em;
}
.crm-contact-list__body { min-width: 0; }
.crm-contact-list__name {
    margin: 0 0 2px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.005em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.crm-contact-list__primary {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--indigo-700);
    background: var(--indigo-50);
    border: 1px solid var(--indigo-600);
    padding: 1px 7px;
    border-radius: 2px;
}
.crm-contact-list__meta {
    margin: 0;
    font-size: 12.5px;
    color: var(--neutral-500);
    display: flex;
    align-items: center;
    gap: 6px;
}
.crm-contact-list__sep { color: var(--neutral-300); }
.crm-contact-list__role {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--neutral-600);
}
.crm-contact-list__email {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--neutral-600);
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: color var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out);
}
.crm-contact-list__email:hover {
    color: var(--ink);
    border-bottom-color: var(--neutral-400);
}

/* =========================================================================
   CompanyCard — reusable editorial metadata block. Sits inside the
   magazine-layout left column of /companies/{id}. Extends .crm-detail-card
   with contact and link styling.
   ========================================================================= */
.crm-company-card__size {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--neutral-500);
    margin-left: 6px;
    letter-spacing: 0.01em;
}
.crm-company-card__link {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px dashed var(--neutral-300);
    transition: border-color var(--t-fast) var(--ease-out);
}
.crm-company-card__link:hover {
    border-bottom-color: var(--ink);
}
.crm-company-card__address {
    white-space: pre-line;
    color: var(--neutral-700);
    font-size: 13px;
    line-height: 1.55;
}
.crm-company-card__contact {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
}
.crm-company-card__contact-label {
    margin: 0 0 10px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--neutral-500);
}
.crm-company-card__contact-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: center;
}
.crm-company-card__avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--paper-sunk);
    border: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink);
}
.crm-company-card__contact-body { min-width: 0; }
.crm-company-card__contact-name {
    margin: 0 0 2px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.005em;
}
.crm-company-card__contact-title {
    font-weight: 400;
    color: var(--neutral-500);
}
.crm-company-card__contact-email {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--neutral-600);
    text-decoration: none;
    border-bottom: 1px dashed transparent;
}
.crm-company-card__contact-email:hover {
    color: var(--ink);
    border-bottom-color: var(--neutral-400);
}

/* Small tweak: stack tab strip vertically at narrow widths */
@media (max-width: 640px) {
    .crm-tab-strip {
        flex-wrap: wrap;
    }
    .crm-tab-strip__tab {
        padding: 12px 14px 10px;
    }
}

/* =========================================================================
   Avatar primitive — warm-gradient disc with Fraunces initials. Variants
   rotate through coral/indigo/mint/amber and are picked deterministically
   (hash of name) so a person carries the same hue across every surface.
   Sizes:
     .crm-avatar (default, 56px — hero / card identity block)
     .crm-avatar--sm (28px — inline list cell)
     .crm-avatar--md (40px — mid-density rows)
   ========================================================================= */
.crm-avatar {
    --avatar-size:     56px;
    --avatar-fg:       var(--paper-raised);
    --avatar-grad-a:   var(--indigo-600);
    --avatar-grad-b:   #6366F1;
    --avatar-ring:     rgba(11, 13, 18, 0.06);
    width: var(--avatar-size);
    height: var(--avatar-size);
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--avatar-fg);
    background:
        radial-gradient(120% 120% at 25% 15%, rgba(255, 255, 255, 0.22), transparent 55%),
        linear-gradient(135deg, var(--avatar-grad-a), var(--avatar-grad-b));
    box-shadow:
        inset 0 0 0 1px var(--avatar-ring),
        0 1px 0 rgba(255, 255, 255, 0.35) inset,
        0 2px 6px rgba(11, 13, 18, 0.06);
    letter-spacing: 0.01em;
    user-select: none;
    position: relative;
    overflow: hidden;
}
.crm-avatar__initials {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: calc(var(--avatar-size) * 0.42);
    line-height: 1;
    letter-spacing: -0.01em;
    z-index: 1;
    text-shadow: 0 1px 1px rgba(11, 13, 18, 0.12);
}
.crm-avatar--sm { --avatar-size: 28px; }
.crm-avatar--sm .crm-avatar__initials { font-size: 11px; letter-spacing: 0.02em; }
.crm-avatar--md { --avatar-size: 40px; }
/* Deterministic color variants — warm editorial tones, tuned for readability */
.crm-avatar--indigo { --avatar-grad-a: #4F46E5; --avatar-grad-b: #7C3AED; }
.crm-avatar--coral  { --avatar-grad-a: #B91C1C; --avatar-grad-b: #E65B3B; }
.crm-avatar--mint   { --avatar-grad-a: #047857; --avatar-grad-b: #10B981; }
.crm-avatar--amber  { --avatar-grad-a: #C2410C; --avatar-grad-b: #F59E0B; }

/* =========================================================================
   ContactCard — identity block for /contacts/{id} left column.
   Composes with .crm-detail-card (shared scaffolding). Adds a top-row
   avatar + name + role cluster, followed by the standard detail-dl.
   ========================================================================= */
.crm-contact-card__identity {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 4px 0 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--rule-soft);
}
.crm-contact-card__identity-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.crm-contact-card__name {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--ink);
}
.crm-contact-card__role {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--neutral-500);
}
.crm-contact-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.crm-contact-card__badge {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 2px;
    border: 1px solid transparent;
    line-height: 1.5;
}
.crm-contact-card__badge--primary {
    color: var(--indigo-700);
    background: var(--indigo-50);
    border-color: var(--indigo-600);
}
.crm-contact-card__badge--optout {
    color: var(--amber-700);
    background: var(--amber-50);
    border-color: var(--amber-700);
}
.crm-contact-card__badge--inactive {
    color: var(--neutral-600);
    background: var(--neutral-100);
    border-color: var(--neutral-300);
}
.crm-contact-card__dl { margin-top: 0; }
.crm-contact-card__link {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--neutral-200);
    transition: border-color var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out);
}
.crm-contact-card__link:hover {
    color: var(--indigo-700);
    border-bottom-color: var(--indigo-600);
}
.crm-contact-card__link--external {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.crm-contact-card__external-icon {
    flex: 0 0 auto;
    color: var(--neutral-400);
    transition: color var(--t-fast) var(--ease-out);
}
.crm-contact-card__link--external:hover .crm-contact-card__external-icon {
    color: var(--indigo-600);
}

/* =========================================================================
   Opt-out banner — full-width attention strip above the detail body when
   a contact has unsubscribed from marketing. Amber/warm to signal caution
   without the full-stop red of an error state.
   ========================================================================= */
.crm-optout-banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 18px;
    margin: 0 0 28px;
    background: var(--amber-50);
    border: 1px solid var(--amber-700);
    border-left-width: 3px;
    border-radius: 3px;
    color: var(--amber-700);
}
.crm-optout-banner__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(194, 65, 12, 0.14);
    color: var(--amber-700);
    margin-top: 1px;
}
.crm-optout-banner__body { flex: 1 1 auto; min-width: 0; }
.crm-optout-banner__title {
    margin: 0 0 2px;
    font-weight: 600;
    font-size: 13.5px;
    letter-spacing: -0.005em;
    color: var(--amber-700);
}
.crm-optout-banner__copy {
    margin: 0;
    font-size: 13px;
    color: var(--neutral-700);
    line-height: 1.55;
}
.crm-optout-banner__since {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--neutral-500);
    letter-spacing: 0.01em;
}

/* =========================================================================
   Contacts list page — per-row avatar + stacked name/title cell.
   Complements the existing .crm-contact-list block (used on CompanyDetail
   for nested lists) without colliding with it.
   ========================================================================= */
.crm-contact-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.crm-contact-cell__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
}
.crm-contact-cell__name {
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.005em;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.crm-contact-cell__title {
    font-size: 12px;
    color: var(--neutral-500);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.crm-contact-role-tag {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--neutral-600);
}
.crm-cell-company-link {
    color: var(--ink);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: border-color var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out);
}
.crm-cell-company-link:hover {
    color: var(--indigo-700);
    border-bottom-color: var(--indigo-600);
}
.crm-contact-flags {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}
.crm-contact-flag {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 2px;
    border: 1px solid transparent;
    line-height: 1.5;
    white-space: nowrap;
}
.crm-contact-flag--primary {
    color: var(--indigo-700);
    background: var(--indigo-50);
    border-color: var(--indigo-600);
}
.crm-contact-flag--optout {
    color: var(--amber-700);
    background: var(--amber-50);
    border-color: var(--amber-700);
}

/* =========================================================================
   Detail-page additions — byline-company link, subtitle italic link, and a
   card header row with item count used by the contact detail's right column.
   ========================================================================= */
.crm-detail-byline__company {
    color: var(--neutral-600);
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: color var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out);
}
.crm-detail-byline__company:hover {
    color: var(--ink);
    border-bottom-color: var(--neutral-400);
}
.crm-detail-subtitle__link {
    color: inherit;
    font-style: italic;
    text-decoration: none;
    border-bottom: 1px solid var(--neutral-200);
    transition: color var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out);
}
.crm-detail-subtitle__link:hover {
    color: var(--indigo-700);
    border-bottom-color: var(--indigo-600);
}
.crm-detail-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.crm-detail-card__head .crm-detail-card__label { margin-bottom: 0; }
.crm-detail-card__count {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--neutral-500);
    padding: 1px 7px;
    border: 1px solid var(--rule);
    border-radius: 2px;
    background: var(--paper-sunk);
}

/* Visually-hidden utility for figcaption labels on icon-only figures */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =========================================================================
   /deals Kanban page — masthead + pipeline-selector rail + owner filter
   ------------------------------------------------------------------------
   The Kanban page is a widescreen working surface. The masthead and body
   padding stay editorial, but the Kanban itself extends to the full page
   width and horizontally scrolls instead of wrapping columns.
   ========================================================================= */
.crm-page--kanban {
    padding-bottom: 64px;
    /* The Kanban track scrolls horizontally; the page itself should hand off
       cleanly to it without a hard max-width fighting the scroll. */
    max-width: 1760px;
}

.kanban-page__controls {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin: -4px 0 24px;
    padding-bottom: 0;
    border-bottom: 0;
}

/* The masthead already carries the "PIPELINE" eyebrow above the headline —
   the duplicate eyebrow inside the selector reads as a label-stutter. Hide
   it on the kanban page only. The selector is still used elsewhere with its
   eyebrow intact. */
.kanban-page__controls .pipeline-selector {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    flex: 1 1 auto;
    min-width: 0;
}
.kanban-page__controls .pipeline-selector__eyebrow {
    display: none;
}

.kanban-page__owner-filter {
    display: flex;
    align-items: center;
    gap: 10px;
}
.kanban-page__owner-filter-label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--neutral-500);
}
.kanban-page__owner-select {
    min-width: 180px;
}
.kanban-page__owner-select .mud-input-outlined-border,
.kanban-page__owner-select .mud-input-slot {
    border-radius: 2px !important;
}
.kanban-page__owner-select .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--ink) !important;
}
.kanban-page__owner-select .mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: var(--indigo-600) !important;
    border-width: 1px !important;
}

/* Kanban page skeleton while the board loads. Keeps the masthead stable
   and only fades in a column-shaped row once. */
.kanban-page__skeleton {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 8px;
}
.kanban-page__skeleton-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.kanban-page__skeleton-row .mud-skeleton {
    border-radius: 3px !important;
}

/* Empty-state CTA row gets a bit of breathing room on /deals. */
.crm-empty-state--kanban {
    margin-top: 24px;
    padding: 56px 32px;
}
.crm-empty-state__actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    flex-wrap: wrap;
}

/* =========================================================================
   Deal detail masthead — editorial stats row + status-adaptive CTA
   ------------------------------------------------------------------------
   Reuses .crm-detail-masthead scaffold from the Leads/Companies pages.
   The .deal-masthead modifier adds: an italic "at {Company}" subtitle,
   a four-stat mono row, and an action cluster that changes shape by
   deal Status (Open / Won / Lost).
   ========================================================================= */
.deal-masthead__at {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-variation-settings: "opsz" 24;
    color: var(--neutral-500);
    margin-right: 4px;
}

.deal-masthead__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(100px, auto));
    gap: 10px 32px;
    align-items: end;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--rule-soft);
}
@media (max-width: 720px) {
    .deal-masthead__stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px 20px;
    }
}

.deal-masthead__stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.deal-masthead__stat-label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--neutral-500);
}
.deal-masthead__stat-value {
    font-size: 18px;
    font-weight: 500;
    color: var(--ink);
    font-feature-settings: "tnum";
    line-height: 1.1;
}
.deal-masthead__stat--stage .deal-masthead__stat-value {
    /* the badge sits in for the mono value — unset mono typography */
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.4;
}

.deal-masthead__cta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    align-self: start;
}
.deal-masthead__cta-won {
    /* slight warmth tilt on the Won CTA — still editorial, just unmistakeable */
    background: #166534 !important;
    border-color: #166534 !important;
}
.deal-masthead__cta-won:hover:not(:disabled) {
    background: #115E2E !important;
    border-color: #115E2E !important;
}
.deal-masthead__cta-lost {
    color: var(--coral-700) !important;
    border-color: var(--coral-50) !important;
}
.deal-masthead__cta-lost:hover:not(:disabled) {
    border-color: var(--coral-700) !important;
    background: var(--coral-50) !important;
}
.deal-masthead__closed-note {
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: "opsz" 24;
    color: var(--neutral-600);
    font-size: 15px;
    padding: 6px 12px;
}

/* Won/Lost banner — warm fill, sits above the two-column body. Reuses
   .crm-detail-cta layout tokens so spacing stays consistent. */
.deal-detail__closed-banner {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.deal-detail__closed-banner--won {
    background: linear-gradient(180deg, rgba(22, 101, 52, 0.04), rgba(22, 101, 52, 0.01));
    border-color: rgba(22, 101, 52, 0.18);
}
.deal-detail__closed-banner--won .crm-detail-cta__emphasis {
    color: #115E2E;
}
.deal-detail__closed-banner--lost {
    background: linear-gradient(180deg, rgba(185, 28, 28, 0.04), rgba(185, 28, 28, 0.01));
    border-color: rgba(185, 28, 28, 0.18);
}
.deal-detail__closed-banner--lost .crm-detail-cta__emphasis {
    color: var(--coral-700);
}
.deal-detail__closed-banner-notes {
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: "opsz" 24;
    color: var(--neutral-700);
    font-size: 15px;
    line-height: 1.55;
    max-width: 72ch;
}
.deal-detail__closed-banner-quote {
    color: var(--neutral-400);
    font-size: 20px;
    margin: 0 1px;
}

/* =========================================================================
   Deal detail — left column metadata card
   ------------------------------------------------------------------------
   Inline Edit button sits in the card head. Rows use the shared
   .crm-detail-dl grid, so we only style the stage/probability/owner
   controls that land inside them.
   ========================================================================= */
.deal-detail__metadata-edit {
    margin: -6px -8px -6px 0;
}

.deal-detail__metadata-rows {
    row-gap: 18px;
}

.deal-detail__stage-dropdown {
    max-width: 100%;
}
.deal-detail__stage-dropdown .mud-input-outlined-border,
.deal-detail__stage-dropdown .mud-input-slot {
    border-radius: 2px !important;
}
.deal-detail__stage-dropdown .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--ink) !important;
}
.deal-detail__stage-dropdown .mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: var(--indigo-600) !important;
    border-width: 1px !important;
}

.deal-detail__probability-origin {
    font-family: var(--font-body);
    font-weight: 400;
    /* --neutral-400 (#958E7E) is reserved for borders / iconography —
       it's ~3.2:1 on --paper and fails AA for body text. --neutral-500
       passes 4.5:1 and reads as clearly secondary next to the adjacent
       number. */
    color: var(--neutral-500);
    text-transform: none;
    letter-spacing: 0;
    font-size: 11.5px;
    margin-left: 2px;
}

.deal-detail__probability-control {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.deal-detail__probability-value {
    font-size: 22px;
    font-weight: 500;
    color: var(--ink);
    font-feature-settings: "tnum";
    line-height: 1;
}

.deal-detail__probability-slider {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 14px;
    padding-top: 6px;
    border-top: 1px dashed var(--rule-soft);
}
.deal-detail__probability-slider-value {
    min-width: 44px;
    text-align: right;
    font-size: 14px;
    color: var(--ink);
}
.deal-detail__probability-save {
    min-height: 34px !important;
    padding: 6px 14px !important;
    font-size: 12.5px !important;
}

/* =========================================================================
   Deal detail — right column: primary contact mini-block, sequences, tasks
   ========================================================================= */
.deal-detail__primary-contact-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.deal-detail__primary-contact-name {
    font-family: var(--font-display);
    font-weight: 500;
    font-variation-settings: "opsz" 36;
    font-size: 22px;
    letter-spacing: -0.012em;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--t-fast) var(--ease-out);
    align-self: flex-start;
}
.deal-detail__primary-contact-name:hover {
    border-bottom-color: var(--neutral-400);
}
.deal-detail__primary-contact-email {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--neutral-600);
    text-decoration: none;
    letter-spacing: -0.01em;
    font-feature-settings: "tnum";
}
.deal-detail__primary-contact-email:hover {
    color: var(--indigo-700);
    text-decoration: underline;
}
.deal-detail__primary-contact--empty {
    text-align: left;
}
.deal-detail__primary-contact-empty-text {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--neutral-500);
    font-variation-settings: "opsz" 24;
    margin: 0 0 14px;
    font-size: 14.5px;
}

.deal-detail__sequences-empty {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--neutral-500);
    font-variation-settings: "opsz" 24;
    margin: 0;
    font-size: 14.5px;
}

.deal-detail__sequences-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.deal-detail__sequences-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--rule);
}
.deal-detail__sequences-item:last-child {
    border-bottom: 0;
}
.deal-detail__sequences-item-main {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.deal-detail__sequences-item-name {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    color: var(--ink);
    letter-spacing: -0.005em;
}
.deal-detail__sequences-item-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--neutral-500);
    font-feature-settings: "tnum";
    letter-spacing: -0.01em;
}
.deal-detail__sequences-item-badge {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mint-600);
    padding: 3px 8px;
    border: 1px solid rgba(5, 150, 105, 0.3);
    border-radius: 2px;
    background: var(--mint-50);
}

.deal-detail__tasks-placeholder-text {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--neutral-500);
    font-variation-settings: "opsz" 24;
    margin: 0 0 14px;
    font-size: 14.5px;
    line-height: 1.5;
}

/* ────────────────────────────────────────────────────────────────────────────
   Send Trial — masthead CTA variant + IssueTrialDialog styling.
   Leans on the editorial broadsheet vocabulary (mono pills, paper-raised
   preview panels, Fraunces step numerals already defined on .crm-steps).
   ──────────────────────────────────────────────────────────────────────── */

.crm-dialog__eyebrow--trial::before { background: var(--indigo-600); }
.crm-dialog__eyebrow--trial         { color: var(--indigo-600); }

.deal-masthead__cta-trial { color: var(--indigo-600) !important; border-color: var(--indigo-300, #C7D2FE) !important; }
.deal-masthead__cta-trial:hover:not(:disabled) { border-color: var(--indigo-600) !important; }

/* Template blurb under the template select — editorial, not a block of copy. */
.issue-trial-dialog__template-blurb {
    margin: -4px 0 12px;
    padding: 0 2px;
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: "opsz" 18;
    font-size: 13px;
    line-height: 1.5;
    color: var(--neutral-600);
    border-left: 2px solid var(--rule);
    padding-left: 10px;
}

/* Tiny breadcrumb-style link below the template select — points users to the
   management page so they understand where this list comes from. */
.issue-trial-dialog__template-hint {
    margin: 0 0 12px;
    padding: 0 2px;
    font-size: 12px;
    color: var(--neutral-500);
    letter-spacing: 0.01em;
}
.issue-trial-dialog__template-hint a {
    color: var(--neutral-700);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid currentColor;
}
.issue-trial-dialog__template-hint a:hover {
    color: var(--ink, #0B0D12);
}

/* Meta grid — compact label/value rows above the preview panel. */
.issue-trial-dialog__meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px 20px;
    padding: 12px 14px;
    border: 1px solid var(--rule);
    border-radius: 2px;
    background: var(--paper);
    margin-bottom: 14px;
}
@media (min-width: 720px) {
    .issue-trial-dialog__meta { grid-template-columns: 1fr 1fr; }
}
.issue-trial-dialog__meta-row {
    display: flex;
    gap: 10px;
    align-items: baseline;
    font-size: 13px;
    min-width: 0;
}
.issue-trial-dialog__meta-label {
    flex: 0 0 86px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--neutral-500);
}
.issue-trial-dialog__meta-value {
    color: var(--ink);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.issue-trial-dialog__meta-mono {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--neutral-700);
}
.issue-trial-dialog__meta-sep { color: var(--neutral-300); margin: 0 4px; }

/* Merge-tag pill — reused inside subject preview + meta rows for unresolved {{tokens}}. */
.issue-trial-dialog__merge-tag {
    display: inline-block;
    padding: 1px 6px;
    margin: 0 1px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--indigo-600) 10%, transparent);
    color: var(--indigo-600);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.02em;
    border: 1px solid color-mix(in srgb, var(--indigo-600) 22%, transparent);
    line-height: 1.4;
    vertical-align: baseline;
}

/* Email preview panel — warm paper-raised card with mono subject + preformatted body. */
.issue-trial-dialog__preview {
    border: 1px solid var(--rule);
    border-left: 3px solid var(--indigo-600);
    background: var(--paper-raised);
    border-radius: 2px;
    padding: 14px 16px;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.issue-trial-dialog__preview-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    border-bottom: 1px dashed var(--rule);
    padding-bottom: 8px;
}
.issue-trial-dialog__preview-eyebrow {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--indigo-600);
}
.issue-trial-dialog__preview-hint {
    font-size: 12px;
    color: var(--neutral-500);
}
.issue-trial-dialog__preview-subject {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 24;
    font-size: 15.5px;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.4;
}
.issue-trial-dialog__preview-body {
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.55;
    color: var(--neutral-700);
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    max-height: 220px;
    overflow: auto;
    padding: 2px 2px 0;
    background: transparent;
}

/* ────────────────────────────────────────────────────────────────────────────
   Convert Trial — 2-step ConvertTrialToPaidDialog.
   Shares the plan-list grammar from CloseDealWonDialog. Adds a warm sentinel
   flag that explicitly marks the trial placeholder billing address as a thing
   the operator must replace before invoicing.
   ──────────────────────────────────────────────────────────────────────── */

.convert-trial__sentinel-flag {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 4px 0 14px;
    padding: 12px 14px;
    border: 1px solid var(--amber-300, #FCD34D);
    border-left-width: 3px;
    background: var(--amber-50, #FFFBEB);
    border-radius: 4px;
}
.convert-trial__sentinel-flag::before {
    content: "!";
    flex: 0 0 auto;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--amber-400, #FBBF24);
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.80rem;
    display: grid;
    place-items: center;
    line-height: 1;
}
.convert-trial__sentinel-flag__body { min-width: 0; }
.convert-trial__sentinel-flag__title {
    font-family: var(--font-display);
    font-variant: small-caps;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    color: var(--amber-900, #78350F);
    margin: 0 0 2px;
    font-weight: 600;
}
.convert-trial__sentinel-flag__text {
    font-size: 0.85rem;
    color: var(--neutral-700);
    line-height: 1.45;
    margin: 0;
}

.convert-trial__current-address {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--neutral-500);
    padding: 6px 2px 10px;
    letter-spacing: 0.02em;
}
.convert-trial__current-address--sentinel {
    color: var(--amber-900, #78350F);
    font-style: italic;
}

/* =========================================================================
   Plan 4 — Trial list + detail + health card + referral badge
   Editorial-broadsheet extensions. Warm palette, hairline rules, mono stats.
   Five status tones for Trials: issued / active / expired / converted / cancelled.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Status pill — semantic <span>, matches .crm-deal-status shape
   ------------------------------------------------------------------------- */
.crm-trial-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 2px;
    border: 1px solid var(--rule);
    background: var(--paper-raised);
    color: var(--neutral-600);
    white-space: nowrap;
}
.crm-trial-status--issued    { color: var(--indigo-700); border-color: var(--indigo-600); background: var(--indigo-50); }
.crm-trial-status--active    { color: var(--mint-700);   border-color: var(--mint-600);   background: var(--mint-50); }
.crm-trial-status--expired   { color: var(--amber-700);  border-color: var(--amber-700);  background: var(--amber-50); }
.crm-trial-status--converted { color: var(--mint-700);   border-color: var(--mint-600);   background: var(--mint-50); }
.crm-trial-status--cancelled { color: var(--coral-700);  border-color: var(--coral-700);  background: var(--coral-50); }
/* Engagement-banded variants (Active trials only — see Phase 3 redesign) */
.crm-trial-status--healthy   { color: #08573F;          border-color: #BFE2CF;           background: #DDF1E6; }
.crm-trial-status--cooling   { color: #8A4F0E;          border-color: #F0D6A8;           background: #FBEAD2; }
.crm-trial-status--at-risk   { color: #8C1E1E;          border-color: #F1C0C0;           background: #FBE2E2; }

/* Countdown coloring for the Expires column on /trials. Amber at <=7d,
   coral at <=2d. Used as a class on a <span> wrapping the relative-time
   string. */
.crm-countdown--warn   { color: var(--amber-700);  font-weight: 600; }
.crm-countdown--danger { color: var(--coral-700);  font-weight: 600; }

/* Byline variant — slightly lower-contrast neutral backplate so the status
   disappears into the dateline rhythm rather than screaming alongside it. */
.crm-detail-byline__status { letter-spacing: 0.14em; }

/* -------------------------------------------------------------------------
   Trials list — specialised cells
   ------------------------------------------------------------------------- */
.trials-cell-contact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.trials-cell-contact__name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.003em;
}
.trials-cell-contact__email {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--neutral-500);
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

/* Engagement cell — slim bar + tabular number, tone shifts by band. */
.trials-cell-engagement {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 90px;
}
.trials-cell-engagement__bar {
    position: relative;
    display: inline-block;
    width: 56px;
    height: 4px;
    border-radius: 2px;
    background: var(--neutral-100);
    overflow: hidden;
}
.trials-cell-engagement__fill {
    position: absolute;
    inset: 0 auto 0 0;
    height: 100%;
    border-radius: 2px;
    transition: width var(--t-med) var(--ease-out);
}
.trials-cell-engagement__num {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    min-width: 22px;
    text-align: right;
}
.trials-cell-engagement--strong .trials-cell-engagement__fill { background: linear-gradient(90deg, #10B981, #059669); }
.trials-cell-engagement--soft   .trials-cell-engagement__fill { background: linear-gradient(90deg, #F59E0B, #B45309); }
.trials-cell-engagement--weak   .trials-cell-engagement__fill { background: linear-gradient(90deg, #EF4444, #991B1B); }
.trials-cell-engagement--weak   .trials-cell-engagement__num  { color: var(--coral-700); }

/* Row actions — right-aligned, minimal */
.trials-cell-actions {
    text-align: right !important;
    white-space: nowrap;
}
.trials-row-actions {
    display: inline-flex;
    gap: 4px;
    justify-content: flex-end;
}
.trials-row-actions__btn {
    font-family: var(--font-mono) !important;
    font-size: 10.5px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    padding: 4px 10px !important;
    min-height: 28px !important;
    border-radius: 2px !important;
}
.trials-row-actions__btn--convert { color: var(--indigo-700) !important; }
.trials-row-actions__btn--convert:hover { background: var(--indigo-50) !important; color: var(--indigo-700) !important; }
.trials-row-actions__btn--cancel  { color: var(--neutral-500) !important; }
.trials-row-actions__btn--cancel:hover { background: var(--paper-sunk) !important; color: var(--coral-700) !important; }

/* -------------------------------------------------------------------------
   Trial detail — masthead + banners
   ------------------------------------------------------------------------- */
.trial-masthead__at {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    color: var(--neutral-400);
    margin-right: 6px;
    font-size: 0.96em;
    letter-spacing: 0.01em;
}

.trial-masthead__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 28px 36px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px dashed var(--rule-soft);
}
@media (max-width: 960px) {
    .trial-masthead__stats { gap: 18px 24px; }
}
.trial-masthead__stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.trial-masthead__stat-label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--neutral-500);
}
.trial-masthead__stat-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.003em;
}

.trial-masthead__stat-adjusted {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 9px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8b6515;
    background: rgba(221, 145, 66, 0.12);
    border: 1px solid rgba(221, 145, 66, 0.28);
    border-radius: 3px;
    vertical-align: middle;
}

.trial-masthead__cta {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.trial-masthead__cta-cancel { color: var(--neutral-600) !important; border-color: var(--rule) !important; }
.trial-masthead__cta-cancel:hover:not(:disabled) {
    color: var(--coral-700) !important;
    border-color: var(--coral-700) !important;
    background: var(--coral-50) !important;
}

.trial-masthead__terminal {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--mint-600);
    padding: 10px 14px;
    border: 1px dashed var(--mint-600);
    border-radius: 2px;
    background: var(--mint-50);
}
.trial-masthead__terminal--cancelled {
    color: var(--neutral-600);
    border-color: var(--rule);
    background: var(--paper-sunk);
}

.trial-detail__closed-banner {
    border-left-width: 3px !important;
    border-left-style: solid !important;
    margin-top: 18px;
}
.trial-detail__closed-banner--converted { border-left-color: var(--mint-600) !important; }
.trial-detail__closed-banner--cancelled { border-left-color: var(--neutral-400) !important; }

/* -------------------------------------------------------------------------
   Trial detail — left column cards
   ------------------------------------------------------------------------- */
.trial-detail__deal-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--ink);
    padding: 10px 0 14px;
    border-bottom: 1px solid var(--rule-soft);
    margin-bottom: 14px;
    transition: color var(--t-fast) var(--ease-out);
}
.trial-detail__deal-link:hover { color: var(--indigo-700); }
.trial-detail__deal-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 20px;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.trial-detail__deal-meta dt {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--neutral-500);
}

.trial-detail__contact {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.trial-detail__contact-name {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.trial-detail__contact-email {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--neutral-600);
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color var(--t-fast) var(--ease-out);
}
.trial-detail__contact-email:hover { color: var(--indigo-700); }
.trial-detail__contact-jump {
    display: inline-block;
    margin-top: 6px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--neutral-500);
    text-decoration: none;
    transition: color var(--t-fast) var(--ease-out);
}
.trial-detail__contact-jump:hover { color: var(--ink); }

/* Post-expiry callout */
.trial-detail__post-expiry-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.trial-detail__post-expiry-pill {
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 2px;
    border: 1px solid var(--rule);
    background: var(--paper-raised);
    color: var(--neutral-700);
}
.trial-detail__post-expiry-pill--readonly { color: var(--amber-700); border-color: var(--amber-700); background: var(--amber-50); }
.trial-detail__post-expiry-pill--lockout  { color: var(--coral-700); border-color: var(--coral-700); background: var(--coral-50); }
.trial-detail__post-expiry-desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--neutral-600);
    max-width: 48ch;
}

/* -------------------------------------------------------------------------
   Trial detail — Access panel (D8). Read-only summary that deep-links to the
   admin-subdomain user editor at /admin/users/{id}. Cross-subdomain link →
   opens in a new tab so the CRM workflow context isn't lost.
   ------------------------------------------------------------------------- */
.trial-detail__access-body {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--neutral-600);
    max-width: 48ch;
}
.trial-detail__access-body--empty {
    color: var(--neutral-500);
    font-style: italic;
    margin-bottom: 0;
}
.trial-detail__access-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    padding: 8px 0 0;
    border-top: 1px solid var(--rule-soft);
    transition: color var(--t-fast) var(--ease-out);
    width: 100%;
}
.trial-detail__access-link:hover { color: var(--indigo-700); }
.trial-detail__access-link svg { flex-shrink: 0; }

/* -------------------------------------------------------------------------
   Trial detail — right-column sequence list (mirrors deal-detail shape)
   ------------------------------------------------------------------------- */
.trial-detail__sequences-empty {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--neutral-500);
    font-style: italic;
}
.trial-detail__sequences-list {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.trial-detail__sequences-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid var(--rule-soft);
}
.trial-detail__sequences-item:first-child { border-top: 0; }
.trial-detail__sequences-item-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.trial-detail__sequences-item-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.003em;
}
.trial-detail__sequences-item-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--neutral-500);
    letter-spacing: 0.02em;
}
.trial-detail__sequences-item-badge {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 2px;
    border: 1px solid var(--mint-600);
    color: var(--mint-600);
    background: var(--mint-50);
}

/* -------------------------------------------------------------------------
   TrialHealthCard — the signature element.
   Engagement ring: SVG circle, stroke-dasharray driven by score.
   Three bands: strong (green), soft (amber), weak (coral).
   ------------------------------------------------------------------------- */
.trial-health-card {
    position: relative;
    overflow: hidden;
}

/* Subtle corner tint that echoes the score band — used as an ambient cue
   so the card's emotional tone is legible at a glance even without looking
   at the ring. Kept very quiet (rgba alpha ~0.05). */
.trial-health-card::before {
    content: "";
    position: absolute;
    inset: auto -40px -40px auto;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    opacity: 0.45;
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
}
.trial-health-card--strong::before { background: radial-gradient(circle, rgba(16, 185, 129, 0.18), transparent 70%); }
.trial-health-card--soft::before   { background: radial-gradient(circle, rgba(245, 158, 11, 0.15), transparent 70%); }
.trial-health-card--weak::before   { background: radial-gradient(circle, rgba(239, 68, 68, 0.15), transparent 70%); }

.trial-health-card > * { position: relative; z-index: 1; }

.trial-health-card__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 18px;
}
.trial-health-card__head .crm-detail-card__label { margin-bottom: 0; }

.trial-health-card__eyebrow {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 2px;
    border: 1px solid var(--rule);
    background: var(--paper-raised);
    color: var(--neutral-600);
}
.trial-health-card--strong .trial-health-card__eyebrow { color: var(--mint-700);  border-color: var(--mint-600);  background: var(--mint-50); }
.trial-health-card--soft   .trial-health-card__eyebrow { color: var(--amber-700); border-color: var(--amber-700); background: var(--amber-50); }
.trial-health-card--weak   .trial-health-card__eyebrow { color: var(--coral-700); border-color: var(--coral-700); background: var(--coral-50); }

.trial-health-card__body {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 24px;
    align-items: center;
}
@media (max-width: 560px) {
    .trial-health-card__body { grid-template-columns: 1fr; justify-items: center; }
}

.trial-health-card__ring-wrap {
    position: relative;
    margin: 0;
    display: inline-grid;
    place-items: center;
    width: 160px;
    height: 160px;
    flex: 0 0 auto;
}
.trial-health-card__ring { display: block; }

/* Animate the arc on mount — draws from empty to target in one pass. */
.trial-health-card__arc {
    transition: stroke-dashoffset var(--t-slow) var(--ease-out);
    filter: drop-shadow(0 1px 0 rgba(0,0,0,0.04));
}

.trial-health-card__score {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center;
    gap: 2px;
    pointer-events: none;
}
.trial-health-card__score-num {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 144;
    font-weight: 600;
    font-size: 44px;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.trial-health-card__score-sub {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--neutral-500);
}

/* Stat triplet to the right of the ring — mono tabular so the numbers align */
.trial-health-card__stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    margin: 0;
    padding: 0;
    border-left: 1px solid var(--rule-soft);
}
@media (max-width: 560px) {
    .trial-health-card__stats {
        width: 100%;
        border-left: 0;
        border-top: 1px solid var(--rule-soft);
        padding-top: 16px;
    }
}
.trial-health-card__stat {
    padding: 0 18px;
    border-right: 1px solid var(--rule-soft);
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}
.trial-health-card__stat:last-child { border-right: 0; }
.trial-health-card__stat-label {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--neutral-500);
    margin: 0;
}
.trial-health-card__stat-value {
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    margin: 0;
    line-height: 1;
}

.trial-health-card__foot {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--rule-soft);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
@media (max-width: 560px) {
    .trial-health-card__foot { grid-template-columns: 1fr 1fr; }
}
.trial-health-card__caption {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
}
.trial-health-card__caption-label {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--neutral-500);
}
.trial-health-card__caption-value {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink);
    letter-spacing: 0.02em;
}

/* -------------------------------------------------------------------------
   ReferralLinkBadge — copy-to-clipboard with status variants
   ------------------------------------------------------------------------- */
.referral-link-badge {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.referral-link-badge__row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.referral-link-badge__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 2px;
    border: 1px solid var(--rule);
    background: var(--paper-raised);
    color: var(--neutral-600);
}
.referral-link-badge__glyph {
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0;
}

.referral-link-badge__pill--active    { color: var(--indigo-700); border-color: var(--indigo-600); background: var(--indigo-50); }
.referral-link-badge__pill--consumed  { color: var(--mint-700);   border-color: var(--mint-600);   background: var(--mint-50); }
.referral-link-badge__pill--expired   { color: var(--coral-700);  border-color: var(--coral-700);  background: var(--coral-50); }

.referral-link-badge--consumed .referral-link-badge__caption-value,
.referral-link-badge--expired  .referral-link-badge__caption-value { color: var(--neutral-500); }

.referral-link-badge__token {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.05em;
    color: var(--ink);
    padding: 4px 10px;
    border-radius: 2px;
    border: 1px dashed var(--rule);
    background: var(--paper-sunk);
    user-select: all;
}

.referral-link-badge__copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 2px;
    border: 1px solid var(--rule);
    background: var(--paper-raised);
    color: var(--neutral-700);
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out),
                background var(--t-fast) var(--ease-out);
}
.referral-link-badge__copy:hover {
    border-color: var(--ink);
    color: var(--ink);
    background: var(--paper-sunk);
}
.referral-link-badge__copy:active { transform: translateY(1px); }
.referral-link-badge__copy svg { flex: 0 0 auto; }

.referral-link-badge__caption {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--neutral-500);
    letter-spacing: 0.02em;
}
.referral-link-badge__caption-label {
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--neutral-500);
}
.referral-link-badge__caption-value {
    color: var(--ink);
    letter-spacing: 0.02em;
}


/* =========================================================================
   Sequences — editorial cadence design system
   -------------------------------------------------------------------------
   Step cards render as a rail of dispatches on a vertical 1px rule, the
   delay chip encoded in JetBrains Mono as a time-marker, step type as a
   colored pill matching the cadence taxonomy (mail/task/note).
   ========================================================================= */

/* -------------------------------------------------------------------------
   Trigger pills (used in list, detail byline, editor, enrollment dialog)
   ------------------------------------------------------------------------- */
.seq-trigger-pill {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 2px;
    border: 1px solid var(--neutral-400);
    color: var(--neutral-700);
    background: var(--neutral-50);
    line-height: 1.1;
    white-space: nowrap;
}
.seq-trigger-pill--manual { color: var(--neutral-700); border-color: var(--neutral-400); background: var(--neutral-50); }
.seq-trigger-pill--lead   { color: var(--indigo-700); border-color: var(--indigo-600); background: var(--indigo-50); }
.seq-trigger-pill--stage  { color: var(--indigo-700); border-color: var(--indigo-600); background: var(--indigo-50); }
.seq-trigger-pill--trial  { color: var(--mint-700);   border-color: var(--mint-600);   background: var(--mint-50); }
.seq-trigger-pill--deal   { color: var(--amber-700);  border-color: var(--amber-700);  background: var(--amber-50); }

/* -------------------------------------------------------------------------
   Status pills (active vs paused)
   ------------------------------------------------------------------------- */
.seq-status-pill {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 2px;
    border: 1px solid transparent;
    line-height: 1.1;
}
.seq-status-pill--active { color: var(--mint-700); border-color: var(--mint-600); background: var(--mint-50); }
.seq-status-pill--paused { color: var(--neutral-600); border-color: var(--neutral-300); background: var(--neutral-50); }

.seq-detail__seed-badge {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 3px 6px;
    border-radius: 2px;
    border: 1px dashed var(--neutral-400);
    color: var(--neutral-600);
    background: transparent;
}

/* -------------------------------------------------------------------------
   Sequence list (table on /sequences)
   ------------------------------------------------------------------------- */
.seq-list__skeleton {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.seq-list {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.seq-list thead tr {
    border-bottom: 1px solid var(--rule);
}
.seq-list__th {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--neutral-500);
    text-align: left;
    padding: 14px 16px;
    vertical-align: middle;
}
.seq-list__th--name { width: 34%; }
.seq-list__th--num { text-align: right; font-variant-numeric: tabular-nums; width: 8%; }
.seq-list__th--status { text-align: right; width: 14%; }

.seq-list__row {
    border-bottom: 1px solid var(--rule-soft);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease-out);
}
.seq-list__row:hover,
.seq-list__row:focus-visible {
    background: var(--paper-sunk);
    outline: none;
}
.seq-list__row:last-child { border-bottom: 0; }

.seq-list__name {
    padding: 18px 16px;
    vertical-align: middle;
}
.seq-list__name-primary {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 36;
    font-weight: 600;
    font-size: 17px;
    color: var(--ink);
    letter-spacing: -0.005em;
    display: block;
    line-height: 1.2;
}
.seq-list__name-sub {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--neutral-500);
    line-height: 1.4;
    max-width: 56ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.seq-list__trigger {
    padding: 18px 16px;
    vertical-align: middle;
}

.seq-list__num {
    padding: 18px 16px;
    text-align: right;
    vertical-align: middle;
    font-variant-numeric: tabular-nums oldstyle-nums;
}
.seq-list__figure {
    font-family: var(--font-mono);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink);
}
.seq-list__figure-sub {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--neutral-400);
    margin-left: 3px;
}

.seq-list__updated {
    padding: 18px 16px;
    vertical-align: middle;
    font-size: 12.5px;
    color: var(--neutral-500);
    font-family: var(--font-mono);
    letter-spacing: 0.01em;
}

.seq-list__status {
    padding: 14px 16px;
    text-align: right;
    vertical-align: middle;
    white-space: nowrap;
}
.seq-list__status-label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--neutral-500);
    margin-left: 8px;
}
.seq-list__switch { margin: 0; vertical-align: middle; }

/* -------------------------------------------------------------------------
   Sequence detail — masthead inline-edit
   ------------------------------------------------------------------------- */
.seq-detail__masthead {
    align-items: center;
}
.seq-detail__title {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: color var(--t-fast) var(--ease-out);
}
.seq-detail__title:hover { color: var(--indigo-700); }
.seq-detail__title-edit-icon {
    color: var(--neutral-400);
    opacity: 0;
    transition: opacity var(--t-fast) var(--ease-out);
}
.seq-detail__title:hover .seq-detail__title-edit-icon { opacity: 1; }

.seq-detail__name-edit {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.seq-detail__name-field { min-width: 320px; }

.seq-detail__desc {
    margin-top: 10px;
    max-width: 64ch;
    font-size: 16px;
    color: var(--neutral-600);
    line-height: 1.5;
}

.seq-detail__actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.seq-detail__active-switch { margin: 0; }
.seq-detail__active-label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--neutral-500);
    min-width: 5ch;
}

/* -------------------------------------------------------------------------
   Trigger config card
   ------------------------------------------------------------------------- */
.seq-trigger-config__summary {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 12px;
}
.seq-trigger-config__kind {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
}
.seq-trigger-config__pill { align-self: center; }
.seq-trigger-config__kind-blurb {
    font-size: 14px;
    color: var(--neutral-600);
    line-height: 1.5;
    max-width: 60ch;
}
.seq-trigger-config__dl {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(140px, max-content) 1fr;
    gap: 6px 24px;
    align-items: baseline;
    padding-top: 14px;
    border-top: 1px dashed var(--rule-soft);
}
.seq-trigger-config__dl > div { display: contents; }
.seq-trigger-config__dl dt {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--neutral-500);
    margin: 0;
}
.seq-trigger-config__dl dd {
    margin: 0;
    font-size: 13.5px;
    color: var(--ink);
    line-height: 1.5;
}
.seq-trigger-config__empty {
    color: var(--neutral-500);
    font-style: italic;
}

/* -------------------------------------------------------------------------
   Step cards — a dispatch rail
   ------------------------------------------------------------------------- */
.seq-steps__empty {
    margin-top: 12px;
    padding: 28px 24px;
    border: 1px dashed var(--rule);
    border-radius: 3px;
    background: var(--paper-sunk);
}
.seq-steps__empty-text {
    margin: 0;
    font-size: 14px;
    color: var(--neutral-600);
    line-height: 1.6;
    max-width: 60ch;
}

.seq-steps__rail {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* The connecting rule runs along the delay column, behind the chips. */
.seq-steps__rail::before {
    content: "";
    position: absolute;
    top: 14px;
    bottom: 14px;
    left: 59px;
    width: 1px;
    background: var(--rule);
    z-index: 0;
}

.seq-step {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 24px;
    align-items: stretch;
    padding: 18px 0;
    border-top: 1px solid var(--rule-soft);
    position: relative;
    z-index: 1;
}
.seq-step:first-child { border-top: 0; padding-top: 6px; }
.seq-step:last-child { padding-bottom: 6px; }

.seq-step__delay {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-top: 4px;
}

.seq-step-delay-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--ink);
    background: var(--paper-raised);
    padding: 5px 10px;
    border: 1px solid var(--neutral-300);
    border-radius: 2px;
    box-shadow: 0 1px 0 rgba(11, 13, 18, 0.03);
    white-space: nowrap;
}

.seq-step__ordinal {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--neutral-400);
    padding-left: 2px;
}

.seq-step__body {
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out);
}
.seq-step:hover .seq-step__body {
    border-color: var(--neutral-300);
    box-shadow: 0 2px 8px rgba(11, 13, 18, 0.04);
}

.seq-step__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.seq-step-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 10px 4px 8px;
    border-radius: 2px;
    border: 1px solid transparent;
    line-height: 1.1;
}
.seq-step-type-pill--email { color: var(--indigo-700); border-color: var(--indigo-600); background: var(--indigo-50); }
.seq-step-type-pill--task  { color: var(--amber-700);  border-color: var(--amber-700);  background: var(--amber-50); }
.seq-step-type-pill--note  { color: var(--neutral-700); border-color: var(--neutral-400); background: var(--neutral-50); }

.seq-step-action-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
}

.seq-step__head-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.seq-step__detail {
    margin: 0;
    font-size: 14px;
    color: var(--ink);
    line-height: 1.55;
    font-family: var(--font-body);
}

.seq-step__condition {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding-top: 10px;
    border-top: 1px dashed var(--rule-soft);
    font-size: 12px;
    color: var(--neutral-500);
}
.seq-step__condition-label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--neutral-500);
}
.seq-step__condition-json {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--neutral-700);
    background: var(--paper-sunk);
    padding: 2px 6px;
    border-radius: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.seq-steps__footer {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px dashed var(--rule-soft);
    display: flex;
    justify-content: flex-start;
}

/* -------------------------------------------------------------------------
   Sidebar — stats, enrollments placeholder, danger zone
   ------------------------------------------------------------------------- */
.seq-stats__dl {
    margin: 12px 0 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
.seq-stats__dl > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 10px 0;
    border-top: 1px solid var(--rule-soft);
}
.seq-stats__dl > div:first-child { border-top: 0; padding-top: 0; }
.seq-stats__dl dt {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--neutral-500);
    margin: 0;
}
.seq-stats__dl dd {
    margin: 0;
    font-size: 14px;
    color: var(--ink);
    font-variant-numeric: tabular-nums oldstyle-nums;
}

.seq-enrollments-summary__hint {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--neutral-500);
    line-height: 1.55;
    font-style: italic;
}

.seq-danger__text {
    margin: 12px 0 14px;
    font-size: 13px;
    color: var(--neutral-600);
    line-height: 1.55;
}
.seq-danger__btn { width: 100%; }

/* -------------------------------------------------------------------------
   Plan 6 Task 9 — live analytics sidebar
   Editorial density: four hairline tiles, a bar-backed exit breakdown,
   and a compact per-step table. Everything numeric uses tabular-nums so
   counts line up under a 9 or a 100.
   ------------------------------------------------------------------------- */
.seq-analytics__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.seq-analytics__refresh {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--neutral-600);
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out);
}
.seq-analytics__refresh:hover:not(:disabled) {
    border-color: var(--indigo-600);
    color: var(--indigo-700);
}
.seq-analytics__refresh:disabled {
    opacity: 0.5;
    cursor: progress;
}
.seq-analytics__empty {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--neutral-500);
    font-style: italic;
}

/* ---- KPI tiles ---- */
.seq-analytics-tiles {
    margin: 14px 0 18px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
}
.seq-analytics-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    background: var(--paper-raised);
}
.seq-analytics-tile__label {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--neutral-500);
}
.seq-analytics-tile__value {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--ink);
    font-variant-numeric: tabular-nums oldstyle-nums;
}

/* ---- Exits by reason breakdown ---- */
.seq-analytics-breakdown {
    padding: 14px 0 4px;
    border-top: 1px solid var(--rule-soft);
}
.seq-analytics-breakdown__title,
.seq-analytics-steps__title {
    margin: 0 0 10px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--neutral-500);
}
.seq-analytics-breakdown__empty,
.seq-analytics-steps__empty {
    margin: 0;
    font-size: 12.5px;
    color: var(--neutral-500);
    font-style: italic;
}
.seq-analytics-breakdown__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.seq-analytics-breakdown__row {
    display: grid;
    grid-template-columns: 110px 1fr auto;
    gap: 10px;
    align-items: center;
    font-size: 12.5px;
    color: var(--neutral-700);
}
.seq-analytics-breakdown__label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.seq-analytics-breakdown__bar {
    position: relative;
    height: 6px;
    background: var(--neutral-50);
    border-radius: 999px;
    overflow: hidden;
}
.seq-analytics-breakdown__bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: linear-gradient(90deg, var(--indigo-600), var(--indigo-700));
    border-radius: inherit;
    transition: width var(--t-med) var(--ease-out);
}
.seq-analytics-breakdown__count {
    min-width: 28px;
    text-align: right;
    font-size: 12px;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* ---- Per-step stats table ---- */
.seq-analytics-steps {
    padding: 14px 0 0;
    border-top: 1px solid var(--rule-soft);
    margin-top: 14px;
}
.seq-step-stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    color: var(--ink);
}
.seq-step-stats-table thead th {
    padding: 0 0 6px;
    border-bottom: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--neutral-500);
    text-align: left;
    font-variant-numeric: tabular-nums;
}
.seq-step-stats-table tbody td {
    padding: 8px 6px 8px 0;
    border-bottom: 1px solid var(--rule-soft);
    vertical-align: top;
}
.seq-step-stats-table tbody tr:last-child td {
    border-bottom: 0;
}
.seq-step-stats-table__idx {
    width: 28px;
    color: var(--neutral-500);
    padding-right: 8px;
}
.seq-step-stats-table__label {
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}
.seq-step-stats-table__num {
    width: 36px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--neutral-700);
    padding-right: 4px;
}
.seq-step-stats-table__reason {
    color: var(--neutral-500);
    font-size: 11.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
}

/* -------------------------------------------------------------------------
   Step editor dialog
   ------------------------------------------------------------------------- */
.seq-editor__delay-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 12px;
    align-items: baseline;
}
.seq-editor__delay-amount { width: 100%; }
.seq-editor__delay-unit  { width: 100%; }

.seq-editor__type-radio {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.seq-editor__task-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
@media (max-width: 600px) {
    .seq-editor__task-grid { grid-template-columns: 1fr; }
}

.seq-editor__hint {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--neutral-500);
    line-height: 1.5;
    font-style: italic;
}
.seq-editor__optional {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--neutral-400);
    font-weight: 400;
    font-style: normal;
    margin-left: 6px;
}

/* -------------------------------------------------------------------------
   New-sequence dialog
   ------------------------------------------------------------------------- */
.seq-dialog__trigger-hint {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--neutral-500);
    line-height: 1.5;
    font-style: italic;
}

/* -------------------------------------------------------------------------
   Enrollment dialog (pick a sequence to enroll into)
   ------------------------------------------------------------------------- */
.seq-enroll-dialog__empty {
    padding: 28px 24px;
    margin: 0;
    text-align: center;
    color: var(--neutral-500);
    font-size: 14px;
    line-height: 1.6;
    border: 1px dashed var(--rule);
    border-radius: 3px;
    background: var(--paper-sunk);
}
.seq-enroll-dialog__radios {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.seq-enroll-dialog__radio {
    padding: 10px 4px;
    border-top: 1px solid var(--rule-soft);
}
.seq-enroll-dialog__radio:first-child { border-top: 0; }
.seq-enroll-dialog__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}
.seq-enroll-dialog__row-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.seq-enroll-dialog__row-name {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 24;
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
    letter-spacing: -0.002em;
    line-height: 1.2;
}
.seq-enroll-dialog__row-desc {
    font-size: 12.5px;
    color: var(--neutral-500);
    line-height: 1.4;
    max-width: 48ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.seq-enroll-dialog__row-meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}
.seq-enroll-dialog__row-steps {
    font-size: 11px;
    color: var(--neutral-500);
    letter-spacing: 0.05em;
}

/* -------------------------------------------------------------------------
   Enrollments panel (deal / lead / contact detail embed)
   ------------------------------------------------------------------------- */
.crm-seq-enrollments-panel__skeleton {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.crm-seq-enrollments-panel__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--rule-soft);
}
.crm-seq-enrollments-panel__enroll { flex: 0 0 auto; }
.crm-seq-enrollments-panel__unenroll-all {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--coral-700);
}

.crm-seq-enrollments-panel__empty {
    margin: 12px 0 0;
    padding: 16px 0;
    font-size: 13px;
    color: var(--neutral-500);
    font-style: italic;
    line-height: 1.5;
}

.crm-seq-enrollments-panel__list {
    list-style: none;
    padding: 0;
    margin: 6px 0 0;
    display: flex;
    flex-direction: column;
}

.crm-seq-enrollments-panel__item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--rule-soft);
}
.crm-seq-enrollments-panel__item:first-child { border-top: 0; }
.crm-seq-enrollments-panel__item--exited { opacity: 0.72; }

.crm-seq-enrollments-panel__item-main {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}
.crm-seq-enrollments-panel__item-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.crm-seq-enrollments-panel__name {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--ink);
    text-decoration: none;
    letter-spacing: -0.003em;
}
a.crm-seq-enrollments-panel__name {
    color: var(--ink);
    transition: color var(--t-fast) var(--ease-out);
}
a.crm-seq-enrollments-panel__name:hover { color: var(--indigo-700); }

.crm-seq-enrollments-panel__item-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--neutral-500);
    letter-spacing: 0.02em;
}
.crm-seq-enrollments-panel__sep { color: var(--neutral-300); }
.crm-seq-enrollments-panel__muted { color: var(--neutral-400); font-style: italic; }

.crm-seq-enrollments-panel__remove {
    color: var(--neutral-400);
    flex: 0 0 auto;
}
.crm-seq-enrollments-panel__remove:hover { color: var(--coral-700); }

.crm-seq-enrollments-panel__history {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--rule-soft);
}
.crm-seq-enrollments-panel__history-summary {
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--neutral-500);
    padding: 4px 0;
    list-style: none;
    user-select: none;
}
.crm-seq-enrollments-panel__history-summary::-webkit-details-marker { display: none; }
.crm-seq-enrollments-panel__history-summary::before {
    content: "\25B8";
    display: inline-block;
    margin-right: 6px;
    transition: transform var(--t-fast) var(--ease-out);
    color: var(--neutral-400);
}
.crm-seq-enrollments-panel__history[open] .crm-seq-enrollments-panel__history-summary::before {
    transform: rotate(90deg);
}
.crm-seq-enrollments-panel__list--history { margin-top: 4px; }

/* Enrollment status pills */
.seq-enrollment-pill {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 2px;
    border: 1px solid transparent;
    line-height: 1.1;
}
.seq-enrollment-pill--active    { color: var(--mint-700);   border-color: var(--mint-600);   background: var(--mint-50); }
.seq-enrollment-pill--completed { color: var(--indigo-700); border-color: var(--indigo-600); background: var(--indigo-50); }
.seq-enrollment-pill--exited    { color: var(--neutral-600); border-color: var(--neutral-300); background: var(--neutral-50); }

/* =========================================================================
   Plan 5 Task 17 — /templates + /templates/{id}
   -------------------------------------------------------------------------
   Editor reuses the sequence ledger scaffolding. New surfaces:
   - Subject column on the list (mono, truncated)
   - Seeded / dirty badges
   - Two-pane editor with <nav role="tablist"> Write/Preview toggle
   - Monospace textarea (signals "this is the source, not the render")
   - Preview iframe in a recessed paper panel
   - Merge-tag chip palette grouped by entity
   ========================================================================= */

/* ---- List surface additions ---------- */
.tpl-list__th--subject { width: 42%; }
.tpl-list__name {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.tpl-list__subject {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--neutral-700);
    padding: 14px 16px;
    border-bottom: 1px solid var(--rule);
}
.tpl-list__subject-text {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ---- Seeded / unsaved badges ---------- */
.tpl-seed-badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 2px;
    border: 1px solid var(--indigo-600);
    color: var(--indigo-700);
    background: var(--indigo-50);
    line-height: 1.1;
}
.tpl-dirty-badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 2px;
    border: 1px solid var(--amber-700);
    color: var(--amber-700);
    background: var(--amber-50);
    line-height: 1.1;
}

/* ---- Detail grid ---------- */
.tpl-detail__grid {
    grid-template-columns: minmax(0, 1fr) 300px !important;
}
@media (max-width: 1020px) {
    .tpl-detail__grid {
        grid-template-columns: 1fr !important;
    }
}
.tpl-detail__masthead {
    align-items: flex-start;
}
.tpl-detail__title {
    margin: 0;
}
.tpl-detail__id-line {
    margin-top: 6px;
    font-size: 11px;
    color: var(--neutral-500);
}
.tpl-detail__id-line code {
    font-size: 11px;
    color: var(--neutral-500);
}
.tpl-detail__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.tpl-detail__test-btn {
    margin-left: 4px;
}
.tpl-detail__main {
    min-width: 0; /* so the textarea doesn't blow the grid out */
}

/* ---- Tablist ---------- */
.tpl-tablist {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--rule);
    margin: -4px -4px 0 -4px;
    padding: 0;
}
.tpl-tab {
    appearance: none;
    border: 0;
    background: transparent;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--neutral-500);
    padding: 12px 18px;
    cursor: pointer;
    position: relative;
    transition: color var(--t-fast) var(--ease-out);
}
.tpl-tab:hover { color: var(--neutral-700); }
.tpl-tab:focus-visible {
    outline: 2px solid var(--indigo-600);
    outline-offset: 2px;
    border-radius: 2px;
}
.tpl-tab--active {
    color: var(--ink);
}
.tpl-tab--active::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: -1px;
    height: 2px;
    background: var(--ink);
}

/* ---- Editor panel ---------- */
.tpl-editor {
    padding: 4px 4px 0 4px !important;
    display: flex;
    flex-direction: column;
}
.tpl-editor__panel {
    padding: 20px 22px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tpl-editor__label {
    display: block;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--neutral-500);
    margin-bottom: 4px;
}
.tpl-editor__label--body {
    margin-top: 18px;
}
.tpl-editor__input {
    width: 100%;
    border: 1px solid var(--rule);
    border-radius: 2px;
    padding: 10px 12px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--ink);
    background: var(--paper-raised);
    transition: border-color var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out);
}
.tpl-editor__input:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: inset 0 -2px 0 0 var(--ink);
}
.tpl-editor__textarea {
    width: 100%;
    min-height: 360px;
    border: 1px solid var(--rule);
    border-radius: 2px;
    padding: 14px 16px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.55;
    color: var(--neutral-800);
    background: var(--paper-raised);
    resize: vertical;
    transition: border-color var(--t-fast) var(--ease-out);
    tab-size: 2;
}
.tpl-editor__textarea:focus {
    outline: none;
    border-color: var(--ink);
}
.tpl-editor__footer {
    display: flex;
    justify-content: flex-end;
    padding: 8px 2px 4px 2px;
}
.tpl-editor__count {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--neutral-500);
    letter-spacing: 0.08em;
}

/* ---- Preview panel ---------- */
.tpl-preview-panel {
    min-height: 420px;
}
.tpl-preview__label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--neutral-500);
    margin: 0 0 6px 0;
}
.tpl-preview__status {
    font-size: 13px;
    color: var(--neutral-500);
    margin-left: 10px;
}
.tpl-preview__subject-block { margin-bottom: 18px; }
.tpl-preview__subject {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin: 0;
}
.tpl-preview__body-block {
    margin-bottom: 18px;
}
.tpl-preview__iframe {
    width: 100%;
    min-height: 320px;
    border: 1px solid var(--rule);
    border-radius: 2px;
    background: var(--paper-raised);
}
.tpl-preview__tags-block {
    border-top: 1px dashed var(--rule-soft);
    padding-top: 14px;
}
.tpl-preview__tag-dl {
    display: grid;
    grid-template-columns: minmax(180px, auto) minmax(0, 1fr);
    gap: 6px 16px;
    margin: 0;
}
.tpl-preview__tag-dl > div {
    display: contents;
}
.tpl-preview__tag-dl dt {
    font-size: 12px;
    color: var(--neutral-600);
}
.tpl-preview__tag-dl dd {
    margin: 0;
    font-size: 13px;
    color: var(--ink);
}
.tpl-preview__empty {
    color: var(--neutral-500);
    font-size: 14px;
    font-style: italic;
}

/* ---- Merge-tag sidebar ---------- */
.tpl-tags-card {
    padding: 18px 18px 16px 18px !important;
}
.tpl-tags-card__hint {
    font-size: 12.5px;
    color: var(--neutral-500);
    margin: 0 0 14px 0;
    line-height: 1.45;
}
.tpl-tags-card__group {
    margin-bottom: 16px;
}
.tpl-tags-card__group:last-child {
    margin-bottom: 0;
}
.tpl-tags-card__group-label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--neutral-500);
    margin: 0 0 8px 0;
}
.tpl-tags-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.tpl-tag-chip {
    appearance: none;
    border: 1px solid var(--rule);
    background: var(--paper-raised);
    padding: 5px 9px;
    border-radius: 2px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--neutral-700);
    letter-spacing: 0.02em;
    transition: border-color var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out),
                background var(--t-fast) var(--ease-out);
    line-height: 1.1;
}
.tpl-tag-chip:hover {
    border-color: var(--ink);
    color: var(--ink);
    background: var(--paper-sunk);
}
.tpl-tag-chip:focus-visible {
    outline: 2px solid var(--indigo-600);
    outline-offset: 1px;
}
.tpl-tag-chip__key::before {
    content: "{{";
    color: var(--neutral-400);
}
.tpl-tag-chip__key::after {
    content: "}}";
    color: var(--neutral-400);
}

/* ---- Reset-to-default card ---------- */
.tpl-reset-card {
    padding: 18px 18px 16px 18px !important;
}
.tpl-reset-card__body {
    font-size: 13px;
    color: var(--neutral-600);
    line-height: 1.5;
    margin: 6px 0 14px 0;
}
.tpl-reset-card__btn {
    margin-top: 2px;
}

/* ---- Dialog body textarea sizing ---------- */
.tpl-dialog__body textarea {
    font-family: var(--font-mono) !important;
    font-size: 12.5px !important;
    line-height: 1.55 !important;
    min-height: 220px !important;
}
.tpl-dialog__hint {
    font-size: 12px;
    color: var(--neutral-500);
    margin: 8px 0 0 0;
    line-height: 1.55;
}
.tpl-dialog__hint code {
    font-size: 11px;
}

/* =========================================================================
   Plan 5 Task 18 — /tasks page & task ledger components
   --------------------------------------------------------------------
   Aesthetic: a Monocle-style agenda. Oversize Fraunces numerals on the
   three stat cards; tab strip re-uses .crm-tab-strip; ruled ledger of
   task rows with a colour-coded due pill left-anchor. Hover states are
   restrained (1px rule darken + subtle lift). Colours stay inside the
   warm-paper palette.
   ========================================================================= */

/* ---- Stat cards -------------------------------------------------------- */
.crm-task-stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 0 0 32px;
}
.crm-task-stat-card {
    appearance: none;
    position: relative;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: 22px 22px 26px;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-body);
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color var(--t-fast) var(--ease-out),
                transform var(--t-fast) var(--ease-out),
                box-shadow var(--t-med) var(--ease-out);
    overflow: hidden;
}
.crm-task-stat-card:hover {
    border-color: var(--neutral-400);
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(11, 13, 18, 0.04),
                0 12px 28px -18px rgba(11, 13, 18, 0.18);
}
.crm-task-stat-card:focus-visible {
    outline: 2px solid var(--indigo-600);
    outline-offset: 2px;
}
.crm-task-stat-card--active {
    border-color: var(--ink);
    background: var(--paper-raised);
    box-shadow: inset 0 0 0 1px var(--ink);
}
.crm-task-stat-card__label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--neutral-500);
    margin: 0;
}
.crm-task-stat-card--active .crm-task-stat-card__label { color: var(--ink); }

.crm-task-stat-card__figure {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-variation-settings: "opsz" 144;
    font-size: clamp(48px, 5.5vw, 68px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.028em;
    color: var(--ink);
    margin: 8px 0 6px;
    font-feature-settings: "tnum", "lnum";
}
.crm-task-stat-card__figure--loading {
    color: var(--neutral-400);
    font-weight: 400;
}
.crm-task-stat-card__caption {
    font-size: 12.5px;
    color: var(--neutral-500);
    line-height: 1.4;
    margin: 0;
}
.crm-task-stat-card__rule {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 14px;
    height: 1px;
    background: var(--rule-soft);
}

/* Variant accent — a 3px colour bar under the rule for at-a-glance status. */
.crm-task-stat-card--today   .crm-task-stat-card__figure { color: var(--amber-700); }
.crm-task-stat-card--overdue .crm-task-stat-card__figure { color: var(--coral-700); }
.crm-task-stat-card--upcoming .crm-task-stat-card__figure { color: var(--ink); }

.crm-task-stat-card--today::before,
.crm-task-stat-card--overdue::before,
.crm-task-stat-card--upcoming::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: transparent;
    transition: background var(--t-fast) var(--ease-out);
}
.crm-task-stat-card--today.crm-task-stat-card--active::before   { background: var(--amber-700); }
.crm-task-stat-card--overdue.crm-task-stat-card--active::before { background: var(--coral-700); }
.crm-task-stat-card--upcoming.crm-task-stat-card--active::before { background: var(--ink); }

@media (max-width: 900px) {
    .crm-task-stat-row {
        grid-template-columns: 1fr;
    }
}

/* ---- Tab strip variant for tasks (small spacing tweak) ---------------- */
.crm-tab-strip.crm-task-tabs {
    margin-bottom: 16px;
}

/* ---- Type-filter chip strip ------------------------------------------- */
.crm-task-typefilter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 24px;
}
.crm-task-typechip {
    appearance: none;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--neutral-600);
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 5px 12px;
    cursor: pointer;
    transition: color var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out),
                background var(--t-fast) var(--ease-out);
}
.crm-task-typechip:hover {
    color: var(--ink);
    border-color: var(--neutral-400);
}
.crm-task-typechip:focus-visible {
    outline: 2px solid var(--indigo-600);
    outline-offset: 2px;
}
.crm-task-typechip--active {
    color: var(--paper);
    background: var(--ink);
    border-color: var(--ink);
}

/* ---- Bucket header ----------------------------------------------------- */
.crm-task-bucket {
    border-top: 1px solid var(--rule);
    padding-top: 8px;
}
.crm-task-bucket__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 0 14px;
    border-bottom: 1px solid var(--rule-soft);
    margin-bottom: 0;
}
.crm-task-bucket__eyebrow {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--neutral-500);
    margin: 0;
}
.crm-task-bucket__count {
    font-family: var(--font-mono);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--neutral-500);
    margin: 0;
    letter-spacing: 0.02em;
}

/* ---- Task list & rows -------------------------------------------------- */
.crm-task-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.crm-task-list > li + li {
    border-top: 1px solid var(--rule-soft);
}

.crm-task-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: flex-start;
    padding: 18px 4px;
    transition: background var(--t-fast) var(--ease-out);
}
.crm-task-row:hover {
    background: var(--paper-sunk);
}
.crm-task-row--overdue {
    /* Left-side 3px rail hints at urgency without taking over the row. */
    box-shadow: inset 3px 0 0 var(--coral-700);
    padding-left: 14px;
}
.crm-task-row--done {
    opacity: 0.62;
}
.crm-task-row--done .crm-task-row__title {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--neutral-400);
}
.crm-task-row--snoozed {
    background: rgba(79, 70, 229, 0.03);
}

.crm-task-row__main {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 18px;
    align-items: flex-start;
    min-width: 0;
}

/* Due pill ---- */
.crm-due-pill {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1px;
    width: 72px;
    min-height: 46px;
    padding: 7px 10px;
    border: 1px solid var(--rule);
    border-radius: 3px;
    background: var(--paper-raised);
    font-family: var(--font-mono);
    line-height: 1.1;
}
.crm-due-pill__primary {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--ink);
}
.crm-due-pill__secondary {
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--neutral-500);
    text-transform: uppercase;
}
.crm-due-pill--overdue {
    background: var(--coral-50);
    border-color: rgba(185, 28, 28, 0.35);
}
.crm-due-pill--overdue .crm-due-pill__primary,
.crm-due-pill--overdue .crm-due-pill__secondary {
    color: var(--coral-700);
}
.crm-due-pill--today {
    background: var(--amber-50);
    border-color: rgba(194, 65, 12, 0.32);
}
.crm-due-pill--today .crm-due-pill__primary,
.crm-due-pill--today .crm-due-pill__secondary {
    color: var(--amber-700);
}
.crm-due-pill--upcoming {
    background: var(--paper-raised);
}
.crm-due-pill--snoozed {
    background: var(--indigo-50);
    border-color: rgba(79, 70, 229, 0.28);
}
.crm-due-pill--snoozed .crm-due-pill__primary,
.crm-due-pill--snoozed .crm-due-pill__secondary {
    color: var(--indigo-700);
}
.crm-due-pill--done {
    background: var(--mint-50);
    border-color: rgba(5, 150, 105, 0.28);
}
.crm-due-pill--done .crm-due-pill__primary,
.crm-due-pill--done .crm-due-pill__secondary {
    color: var(--mint-600);
}

/* Body ---- */
.crm-task-row__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.crm-task-row__titleline {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}
.crm-task-row__title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-decoration: none;
    min-width: 0;
}
a.crm-task-row__title {
    background-image: linear-gradient(var(--ink), var(--ink));
    background-position: 0 100%;
    background-size: 0% 1px;
    background-repeat: no-repeat;
    transition: background-size var(--t-med) var(--ease-out);
}
a.crm-task-row__title:hover {
    background-size: 100% 1px;
}
.crm-task-row__desc {
    font-size: 13px;
    line-height: 1.55;
    color: var(--neutral-600);
    margin: 0;
    max-width: 72ch;
}
.crm-task-row__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--neutral-500);
    margin-top: 2px;
}
.crm-task-row__meta-sep {
    color: var(--neutral-400);
    font-family: var(--font-mono);
}
.crm-task-row__snoozed-note,
.crm-task-row__completed-note {
    font-style: italic;
    color: var(--neutral-500);
}

/* Assignee ---- */
.crm-task-assignee {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--neutral-600);
}
.crm-task-assignee__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--neutral-100);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid var(--rule);
}
.crm-task-assignee__name {
    font-weight: 500;
    color: var(--neutral-700);
}

/* Entity chip ---- */
.crm-task-entity-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--neutral-500);
}
.crm-task-entity-chip__kind {
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--neutral-700);
}
.crm-task-entity-chip__name {
    color: var(--indigo-700);
}

/* Type pill (tone-on-tone; very restrained) ---- */
.crm-task-type-pill {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 8px;
    border-radius: 2px;
    border: 1px solid var(--rule);
    background: var(--paper-sunk);
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--neutral-600);
    white-space: nowrap;
}
.crm-task-type-pill--call     { color: var(--coral-700); border-color: rgba(185, 28, 28, 0.22); }
.crm-task-type-pill--email    { color: var(--indigo-700); border-color: rgba(79, 70, 229, 0.22); }
.crm-task-type-pill--meeting  { color: var(--amber-700); border-color: rgba(194, 65, 12, 0.22); }
.crm-task-type-pill--followup { color: var(--mint-700);  border-color: rgba(5, 150, 105, 0.22); }
.crm-task-type-pill--custom   { color: var(--neutral-600); }

/* Row action cluster ---- */
.crm-task-row__actions {
    display: flex;
    align-items: center;
    gap: 2px;
}
.crm-task-iconbtn.mud-icon-button {
    color: var(--neutral-500) !important;
    border-radius: 2px !important;
}
.crm-task-iconbtn.mud-icon-button:hover:not(:disabled) {
    color: var(--ink) !important;
    background: var(--paper-sunk) !important;
}
.crm-task-iconbtn--complete.mud-icon-button:hover:not(:disabled) {
    color: var(--mint-600) !important;
}
.crm-task-menu-popover .mud-list-item {
    border-radius: 0 !important;
}
.crm-task-menu__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink);
}
.crm-task-menu__item--danger {
    color: var(--coral-700);
}
.crm-task-menu__item--danger .mud-icon-root {
    color: var(--coral-700) !important;
}

/* Empty state (task-specific accents) ---- */
.crm-task-empty {
    border: 1px dashed var(--rule);
    border-radius: 3px;
    background: var(--paper-raised);
    padding: 56px 28px;
}

/* =========================================================================
   Dialog helpers shared by Tasks dialogs
   ========================================================================= */
.crm-task-dlg__dtrow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 4px;
}
.crm-task-dlg__hint {
    font-size: 12px;
    color: var(--neutral-500);
    margin: 6px 0 0;
    line-height: 1.55;
}
.crm-task-dlg__contextcard {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-top: 14px;
    background: var(--paper-sunk);
    border: 1px solid var(--rule);
    border-radius: 3px;
}
.crm-task-dlg__contextcard-kind {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--indigo-700);
    padding: 2px 8px;
    border: 1px solid rgba(79, 70, 229, 0.3);
    border-radius: 2px;
}
.crm-task-dlg__contextcard-label {
    font-size: 12.5px;
    color: var(--neutral-600);
}

/* Snooze presets */
.crm-snooze-presets {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 6px;
}
.crm-snooze-preset {
    appearance: none;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: 11px 12px;
    cursor: pointer;
    font-family: var(--font-body);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    transition: border-color var(--t-fast) var(--ease-out),
                background var(--t-fast) var(--ease-out);
}
.crm-snooze-preset:hover {
    border-color: var(--neutral-400);
}
.crm-snooze-preset:focus-visible {
    outline: 2px solid var(--indigo-600);
    outline-offset: 2px;
}
.crm-snooze-preset--active {
    border-color: var(--ink);
    background: var(--paper-raised);
    box-shadow: inset 0 0 0 1px var(--ink);
}
.crm-snooze-preset__label {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}
.crm-snooze-preset__date {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--neutral-500);
    letter-spacing: 0.02em;
}
.crm-snooze-preview {
    margin-top: 10px;
}
.crm-snooze-preview strong {
    font-family: var(--font-mono);
    color: var(--ink);
    font-weight: 600;
}

/* Reassign roster */
.crm-reassign-roster {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 320px;
    overflow-y: auto;
    padding: 2px;
}
.crm-reassign-row {
    appearance: none;
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 12px;
    align-items: center;
    background: transparent;
    border: 1px solid var(--rule-soft);
    border-radius: 3px;
    padding: 9px 12px;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-body);
    transition: border-color var(--t-fast) var(--ease-out),
                background var(--t-fast) var(--ease-out);
}
.crm-reassign-row:hover {
    border-color: var(--neutral-400);
    background: var(--paper-sunk);
}
.crm-reassign-row:focus-visible {
    outline: 2px solid var(--indigo-600);
    outline-offset: 2px;
}
.crm-reassign-row--selected {
    border-color: var(--ink);
    background: var(--paper-raised);
    box-shadow: inset 0 0 0 1px var(--ink);
}
.crm-reassign-row--current {
    background: var(--paper-sunk);
}
.crm-reassign-row__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--neutral-100);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--rule);
}
.crm-reassign-row__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.crm-reassign-row__name {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink);
}
.crm-reassign-row__email {
    font-size: 11.5px;
    color: var(--neutral-500);
    font-family: var(--font-mono);
}
.crm-reassign-row__badge {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--neutral-500);
    padding: 2px 6px;
    border: 1px solid var(--rule);
    border-radius: 2px;
}
.crm-reassign-row__check {
    color: var(--ink) !important;
}

/* =========================================================================
   CrmTasksPanel (entity detail-page panel)
   ========================================================================= */
.crm-tasks-panel .crm-tasks-panel__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.crm-tasks-panel__head-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.crm-tasks-panel__add-btn.mud-button {
    font-size: 12.5px !important;
    padding: 4px 10px !important;
    min-height: 30px !important;
}
.crm-tasks-panel__skeleton {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 0;
}
.crm-tasks-panel__empty {
    padding: 28px 4px 8px;
    border-top: 1px solid var(--rule-soft);
    margin-top: 8px;
}
.crm-tasks-panel__empty-title {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 500;
    color: var(--ink);
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}
.crm-tasks-panel__empty-body {
    font-size: 13px;
    color: var(--neutral-500);
    margin: 0;
    line-height: 1.55;
}
.crm-tasks-panel__section + .crm-tasks-panel__section {
    margin-top: 18px;
}
.crm-tasks-panel__section-label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--neutral-500);
    margin: 12px 0 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--rule-soft);
}
.crm-tasks-panel__section--done .crm-task-list {
    opacity: 0.92;
}
.crm-tasks-panel__see-more {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--neutral-500);
    margin: 8px 0 0;
    padding: 6px 0 2px;
    text-align: right;
}

/* Slightly denser rows when used inside the panel (already tight card) */
.crm-task-list--panel .crm-task-row {
    padding: 14px 4px;
}
.crm-task-list--panel .crm-task-row__title {
    font-size: 16px;
}

@media (max-width: 720px) {
    .crm-task-row {
        grid-template-columns: 1fr;
    }
    .crm-task-row__actions {
        justify-content: flex-end;
    }
    .crm-task-row__main {
        grid-template-columns: 64px 1fr;
        gap: 12px;
    }
    .crm-due-pill { width: 64px; }
    .crm-snooze-presets {
        grid-template-columns: 1fr;
    }
    .crm-task-dlg__dtrow {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   Plan 5 Task 19 — Deal timeline communication surface
   --------------------------------------------------------------------
   • Masthead CTAs for Log reply / Send email
   • LogReplyDialog + EmailComposerDialog styling
   • Activity rail extensions for email / sequence / task / reply families
   • Dialog eyebrow variants (--reply, --email)
   ============================================================================ */

/* Masthead CTAs — quieter than Close Won/Lost; they're frequent, not decisive.
   "Log reply" sits neutral; "Send email" gets the indigo accent to mirror the
   activity-rail's email family color. */
.deal-masthead__cta-reply { color: var(--neutral-700) !important; border-color: var(--rule) !important; }
.deal-masthead__cta-reply:hover:not(:disabled) {
    color: var(--ink) !important;
    border-color: var(--ink) !important;
    background: var(--paper-sunk) !important;
}
.deal-masthead__cta-email { color: var(--indigo-700) !important; border-color: var(--indigo-100) !important; }
.deal-masthead__cta-email:hover:not(:disabled) {
    color: var(--indigo-700) !important;
    border-color: var(--indigo-600) !important;
    background: var(--indigo-50) !important;
}

/* --- Dialog eyebrow variants for Task 19 ------------------------------------ */
.crm-dialog__eyebrow--reply::before { background: #0891B2; }     /* info-teal */
.crm-dialog__eyebrow--reply         { color: #0891B2; }

.crm-dialog__eyebrow--email::before { background: var(--indigo-600); }
.crm-dialog__eyebrow--email         { color: var(--indigo-600); }

/* --- Dialog form section legend hint (inline pale subtitle) ---------------- */
.dialog-form-section__legend-hint {
    margin-left: 6px;
    color: var(--neutral-500);
    font-weight: 400;
    font-style: italic;
    font-family: var(--font-display);
    font-variation-settings: "opsz" 16;
    letter-spacing: 0;
    text-transform: none;
    font-size: 12.5px;
}

/* --- LogReplyDialog --------------------------------------------------------- */
.log-reply__when {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 12px;
    align-items: start;
}
@media (max-width: 620px) {
    .log-reply__when {
        grid-template-columns: 1fr;
    }
}

/* --- EmailComposerDialog --------------------------------------------------- */
/* Magazine split: form on the left, reference palette on the right. The
   palette is narrow (220-260px) so the form gets the canvas it deserves. */
.email-composer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 32px;
    align-items: start;
}
@media (max-width: 860px) {
    .email-composer {
        grid-template-columns: 1fr;
    }
}
.email-composer__form {
    min-width: 0; /* lets the textarea shrink in the grid column */
}

/* Recipient card (single contact — no select needed). */
.email-composer__recipient-single {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 14px;
    border: 1px solid var(--rule);
    border-radius: 2px;
    background: var(--paper-raised);
}
.email-composer__recipient-name {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 18;
    font-weight: 500;
    font-size: 15px;
    color: var(--ink);
}
.email-composer__recipient-email {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--neutral-600);
    letter-spacing: -0.005em;
}
.email-composer__recipient-badge {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--indigo-700);
    padding: 2px 7px;
    border-radius: 2px;
    border: 1px solid var(--indigo-100);
    background: var(--indigo-50);
}

/* Body textarea — tighten monospace line-height for HTML readability. */
.email-composer__body textarea {
    font-family: var(--font-mono) !important;
    font-size: 12.5px !important;
    line-height: 1.55 !important;
    letter-spacing: -0.005em;
}

/* Error alert spans the full width under both columns. */
.email-composer__error {
    grid-column: 1 / -1;
}

/* Right-hand merge-tag palette — editorial reference column. */
.email-composer__palette {
    border-left: 1px solid var(--rule);
    padding-left: 24px;
    align-self: stretch;
}
@media (max-width: 860px) {
    .email-composer__palette {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid var(--rule);
        padding-top: 20px;
    }
}
.email-composer__palette-title {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-variation-settings: "opsz" 20;
    font-weight: 500;
    font-size: 17px;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.email-composer__palette-hint {
    margin: 0 0 16px;
    font-family: var(--font-body);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--neutral-600);
}
.email-composer__palette-group + .email-composer__palette-group {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--rule-soft);
}
.email-composer__palette-group-label {
    margin: 0 0 6px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--neutral-500);
}
.email-composer__palette-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.email-composer__palette-tag {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px 8px;
    border: 1px solid var(--rule);
    border-radius: 2px;
    background: var(--paper-raised);
    transition: border-color var(--t-fast) var(--ease-out);
}
.email-composer__palette-tag:hover {
    border-color: var(--ink);
}
.email-composer__palette-tag code {
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--indigo-700);
    background: transparent;
    padding: 0;
    letter-spacing: -0.01em;
}
.email-composer__palette-tag-desc {
    font-family: var(--font-body);
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--neutral-600);
}

/* --- EmailComposerDialog preview tab (Plan 6 Task 10) ---------------------- */
/* Wrapper that holds the tab strip + active panel. Keeps the existing
   .email-composer grid intact — the Write panel uses it unchanged. */
.email-composer-wrap {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Tab strip — editorial, hairline-ink active underline. Matches the pattern
   used on /templates (.tpl-tab) and in the companies-detail tab strip so the
   CRM surfaces share a vocabulary. */
.email-composer-tabs {
    display: flex;
    align-items: stretch;
    gap: 0;
    border-bottom: 1px solid var(--rule);
    padding: 0;
    margin: 0;
}
.email-composer-tabs__tab {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 12px 22px 10px;
    margin-bottom: -1px;
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0.005em;
    color: var(--neutral-500);
    cursor: pointer;
    position: relative;
    transition: color var(--t-fast) var(--ease-out);
}
.email-composer-tabs__tab:hover:not(:disabled) {
    color: var(--ink);
}
.email-composer-tabs__tab:focus-visible {
    outline: 2px solid var(--indigo-600);
    outline-offset: -2px;
    border-radius: 2px;
}
.email-composer-tabs__tab:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.email-composer-tabs__tab--active {
    color: var(--ink);
    font-weight: 600;
}
.email-composer-tabs__tab--active::after {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: -1px;
    height: 2px;
    background: var(--ink);
}

/* Preview panel — editorial head row (recipient callout + refresh), then the
   "paper" shell wrapping subject + iframe. Single column, no palette —
   preview is a read-view, not a working surface. */
.email-composer-preview {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 440px;
}
.email-composer-preview__status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 2px;
    font-family: var(--font-body);
    font-size: 13.5px;
    color: var(--neutral-600);
}
.email-composer-preview__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.email-composer-preview__head-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.email-composer-preview__eyebrow {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--neutral-500);
}
.email-composer-preview__recipient {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.email-composer-preview__recipient-name {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 20;
    font-weight: 500;
    font-size: 16px;
    color: var(--ink);
    letter-spacing: -0.005em;
}
.email-composer-preview__recipient-email {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--neutral-600);
    letter-spacing: -0.005em;
}
.email-composer-preview__refresh {
    align-self: flex-end;
}

/* The paper shell — warm raised card evoking an inbox preview pane. The
   left indigo hairline ties it to the other preview surfaces
   (.issue-trial-dialog__preview) so the CRM "this is a rendered preview"
   motif is consistent. */
.email-composer-preview-shell {
    border: 1px solid var(--rule);
    border-left: 3px solid var(--indigo-600);
    background: var(--paper-raised);
    border-radius: 2px;
    overflow: hidden;
}
.email-composer-preview-shell--fallback {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.email-composer-preview-subject {
    padding: 14px 20px 12px;
    border-bottom: 1px dashed var(--rule);
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--ink);
    background: var(--paper);
    word-break: break-word;
}
.email-composer-preview-iframe {
    display: block;
    width: 100%;
    min-height: 360px;
    border: 0;
    background: var(--paper-raised);
}
.email-composer-preview-raw {
    margin: 0;
    max-height: 320px;
    overflow: auto;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.55;
    color: var(--neutral-700);
    white-space: pre-wrap;
    word-break: break-word;
}

/* ============================================================================
   Activity rail — per-family extensions (Task 19)
   --------------------------------------------------------------------
   Family classes paint a subtle left-rule accent to group related activity
   types visually. Color comes from the marker, but the rule adds a second
   channel so scanning by type is possible without reading each title.
   ============================================================================ */

/* Detail line — secondary description below the title/meta row. Renders reply
   previews, email subjects, sequence-step labels, bounce reasons, etc. Fraunces
   italic so it reads as a quote/paraphrase, not a field label. */
.activity-rail__detail {
    margin: 6px 0 0;
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: "opsz" 16;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--neutral-700);
    letter-spacing: -0.005em;
}

/* Family modifiers — the activity-rail__item already has padding from the base
   rule; we add a 3px inset accent to the left that stops short of the marker. */
.activity-rail__item--email    { --family-accent: var(--indigo-600); }
.activity-rail__item--reply    { --family-accent: #0891B2; }
.activity-rail__item--sequence { --family-accent: #7C3AED; }
.activity-rail__item--task     { --family-accent: var(--neutral-500); }
.activity-rail__item--trial    { --family-accent: var(--indigo-700); }

.activity-rail__item--email,
.activity-rail__item--reply,
.activity-rail__item--sequence,
.activity-rail__item--task,
.activity-rail__item--trial {
    /* Soft halo behind the marker so the family is legible at a glance. */
    position: relative;
}
.activity-rail__item--email .activity-rail__marker,
.activity-rail__item--reply .activity-rail__marker,
.activity-rail__item--sequence .activity-rail__marker,
.activity-rail__item--task .activity-rail__marker,
.activity-rail__item--trial .activity-rail__marker {
    box-shadow:
        0 0 0 1px var(--rule),
        0 0 0 4px color-mix(in srgb, var(--family-accent) 12%, transparent);
}

/* Email family — a faint indigo tint on detail text so the link back to the
   marker is obvious; reply is teal to distinguish inbound from outbound. */
.activity-rail__item--email .activity-rail__detail {
    color: var(--neutral-700);
}
.activity-rail__item--reply .activity-rail__detail {
    color: #0E7490;          /* deeper teal than the marker for legibility */
    font-style: normal;      /* reply is a real quote — italic would double-emphasize */
}

/* Sequence steps get a mono badge feel via letterspaced small caps. */
.activity-rail__item--sequence .activity-rail__detail {
    font-family: var(--font-mono);
    font-style: normal;
    font-size: 12px;
    letter-spacing: 0.01em;
    color: #6D28D9;
}

/* Task detail — straightforward, no italics (task titles are literal). */
.activity-rail__item--task .activity-rail__detail {
    font-family: var(--font-body);
    font-style: normal;
    font-size: 13px;
    color: var(--neutral-700);
}

/* =========================================================================
   Plan 6 Task 7 — Leads list polish
   --------------------------------------------------------------------
   Editorial multi-status chip bar. Replaces the MudSelect dropdown with a
   tactile, always-visible filter strip. Hairline warm-paper at rest; warm
   ink-fill when active. Each chip carries a 6px color dot that echoes the
   LeadStatusBadge palette — the reader sees status distribution at a glance.
   ========================================================================= */
.crm-multi-status-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    margin-bottom: 18px;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 3px;
}

.crm-multi-status-chips__label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--neutral-500);
    margin-right: 4px;
    padding: 0 4px 0 0;
    border-right: 1px solid var(--rule);
    line-height: 1;
    padding-right: 12px;
}

.crm-multi-status-chip {
    /* Reset native button chrome. */
    appearance: none;
    -webkit-appearance: none;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 2px;
    padding: 6px 12px 6px 10px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-700);
    letter-spacing: 0.005em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
    transition:
        background var(--t-fast) var(--ease-out),
        border-color var(--t-fast) var(--ease-out),
        color var(--t-fast) var(--ease-out),
        transform var(--t-fast) var(--ease-out);
}

.crm-multi-status-chip:hover:not(:disabled) {
    border-color: var(--ink);
    color: var(--ink);
    background: var(--paper-sunk);
}

.crm-multi-status-chip:focus-visible {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 2px var(--paper-raised), 0 0 0 3px var(--ink);
}

.crm-multi-status-chip__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--neutral-400);
    transition: background var(--t-fast) var(--ease-out);
}

.crm-multi-status-chip__dot--new       { background: var(--amber-700); }
.crm-multi-status-chip__dot--contacted { background: var(--indigo-600); }
.crm-multi-status-chip__dot--qualified { background: var(--mint-600); }
.crm-multi-status-chip__dot--converted { background: var(--neutral-700); }
.crm-multi-status-chip__dot--closed    { background: var(--coral-700); }

.crm-multi-status-chip__text {
    white-space: nowrap;
}

/* Active state — inverse ink fill. The dot stays its status color so the
   reader can still see which status is active at a glance, but the chip body
   is ink to read as "selected". */
.crm-multi-status-chip--active {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

.crm-multi-status-chip--active:hover:not(:disabled) {
    background: var(--neutral-900);
    border-color: var(--neutral-900);
    color: var(--paper);
}

.crm-multi-status-chip--active .crm-multi-status-chip__dot {
    box-shadow: 0 0 0 1.5px var(--paper);
}

/* Secondary "Reset" action — text-only, hairline-bottom. */
.crm-multi-status-chip__reset {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    padding: 6px 8px;
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--neutral-500);
    letter-spacing: 0.01em;
    cursor: pointer;
    margin-left: auto;
    border-bottom: 1px solid transparent;
    transition:
        color var(--t-fast) var(--ease-out),
        border-color var(--t-fast) var(--ease-out);
}

.crm-multi-status-chip__reset:hover:not(:disabled) {
    color: var(--ink);
    border-bottom-color: var(--ink);
}

.crm-multi-status-chip__reset:disabled {
    color: var(--neutral-300);
    cursor: default;
}

/* -------------------------------------------------------------------------
   Leads masthead actions — Export CSV + New Lead pair (extends
   crm-masthead-actions). Ensures the pair reads as one unit, not two isolated
   buttons floating at different weights.
   ------------------------------------------------------------------------- */
.crm-leads-actions-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* -------------------------------------------------------------------------
   NewLeadDialog — advanced disclosure + promote-row. The disclosure uses
   a hairline that gets stronger on hover, not a full MudBlazor expansion
   panel (too heavy a chrome for this editorial context).
   ------------------------------------------------------------------------- */
.crm-disclosure {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    padding: 8px 0;
    margin: 0 0 4px;
    width: 100%;
    text-align: left;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--neutral-600);
    border-top: 1px solid var(--rule);
    transition: color var(--t-fast) var(--ease-out);
}

.crm-disclosure:hover {
    color: var(--ink);
}

.crm-disclosure__chevron {
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1;
    width: 14px;
    display: inline-block;
    text-align: center;
    color: var(--neutral-500);
}

.crm-disclosure--open .crm-disclosure__chevron {
    color: var(--ink);
}

.crm-disclosure__body {
    animation: crm-disclosure-reveal var(--t-med) var(--ease-out);
}

@keyframes crm-disclosure-reveal {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.crm-promote-row {
    background: var(--paper-sunk);
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.crm-promote-row__hint {
    font-family: var(--font-body);
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--neutral-600);
    margin: 0;
}

.crm-promote-row__hint strong {
    color: var(--ink);
    font-weight: 600;
}

/* =========================================================================
   Dashboard — /dashboard editorial broadsheet
   -------------------------------------------------------------------------
   Plan 6 Task 18. KPI tiles use Fraunces for the headline number, Inter
   Tight for labels. Chart surfaces share the same paper-raised card
   aesthetic as other CRM sections — one visual language across the app.
   ========================================================================= */

.crm-page--dashboard {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* ----- KPI row ----- */
.crm-kpi-row {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.crm-kpi-row__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--rule);
}

.crm-kpi-row__title {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 18;
    font-weight: 500;
    font-size: 18px;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0;
}

.crm-kpi-row__caption {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--neutral-500);
    margin: 4px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.crm-kpi-row__caption time {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--neutral-600);
    font-feature-settings: "tnum";
}

.crm-kpi-row__caption-sep {
    color: var(--neutral-300);
}

.crm-kpi-row__live {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--mint-600);
    box-shadow: 0 0 0 3px var(--mint-50);
    animation: crm-kpi-pulse 2.4s ease-in-out infinite;
}

.crm-kpi-row__live-label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mint-700);
}

@keyframes crm-kpi-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(0.82); }
}

.crm-kpi-row__refresh {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 3px;
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--neutral-700);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out);
}
.crm-kpi-row__refresh:hover:not(:disabled) {
    background: var(--paper-sunk);
    border-color: var(--neutral-300);
    color: var(--ink);
}
.crm-kpi-row__refresh:focus-visible {
    outline: 2px solid var(--indigo-600);
    outline-offset: 2px;
}
.crm-kpi-row__refresh:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.crm-kpi-row__refresh-icon {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--neutral-600);
}
.crm-kpi-row__refresh-icon svg {
    width: 100%;
    height: 100%;
}
.crm-kpi-row__refresh:disabled .crm-kpi-row__refresh-icon {
    animation: crm-kpi-spin 1.1s linear infinite;
}
@keyframes crm-kpi-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.crm-kpi-row__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

/* Tablet: three per row. */
@media (max-width: 1280px) {
    .crm-kpi-row__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
/* Narrow tablet / large phone: two per row. */
@media (max-width: 820px) {
    .crm-kpi-row__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* Phone: one wide per row. */
@media (max-width: 520px) {
    .crm-kpi-row__grid {
        grid-template-columns: 1fr;
    }
}

/* ----- Single tile ----- */
.crm-kpi-tile {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 18px 16px;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    transition: transform var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out);
}
.crm-kpi-tile::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--neutral-200);
}
.crm-kpi-tile:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px -4px rgba(11,13,18,0.12);
}

.crm-kpi-tile__label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--neutral-500);
    margin: 0;
}

.crm-kpi-tile__number {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 60;
    font-weight: 400;
    font-size: clamp(30px, 3vw, 38px);
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 0;
    font-feature-settings: "lnum", "tnum";
}

.crm-kpi-tile__foot {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--neutral-500);
    margin: 0;
    line-height: 1.3;
}

/* Alert modifier — only applied when count > 0 on overdue tasks.
   Keeps the refined aesthetic (no red fill, just a coral accent rule +
   tinted ink). */
.crm-kpi-tile--alert::before {
    background: var(--coral-700);
}
.crm-kpi-tile--alert .crm-kpi-tile__number {
    color: var(--coral-700);
}
.crm-kpi-tile--alert .crm-kpi-tile__foot {
    color: var(--coral-700);
    font-weight: 500;
}

.crm-kpi-tile--ok::before {
    background: var(--mint-600);
}

/* Skeleton state — same grid footprint, so the transition to real data
   is a visual fade, not a layout shift. */
.crm-kpi-tile--skeleton {
    pointer-events: none;
}
.crm-kpi-tile--skeleton::before {
    background: var(--rule);
}
.crm-kpi-tile__skel-label,
.crm-kpi-tile__skel-number,
.crm-kpi-tile__skel-foot {
    display: block;
    background: linear-gradient(
        90deg,
        var(--paper-sunk) 0%,
        var(--neutral-100) 50%,
        var(--paper-sunk) 100%
    );
    background-size: 200% 100%;
    animation: crm-kpi-shimmer 1.6s ease-in-out infinite;
    border-radius: 2px;
}
.crm-kpi-tile__skel-label  { width: 60%; height: 10px; }
.crm-kpi-tile__skel-number { width: 75%; height: 30px; margin: 6px 0; }
.crm-kpi-tile__skel-foot   { width: 55%; height: 10px; }

@keyframes crm-kpi-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Empty state — both "no data yet" and "refresh now" sit in this card. */
.crm-kpi-row__empty {
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 28px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.crm-kpi-row__empty-title {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 20;
    font-weight: 500;
    font-size: 20px;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0;
}
.crm-kpi-row__empty-body {
    font-family: var(--font-body);
    font-size: 13.5px;
    color: var(--neutral-600);
    margin: 0;
    max-width: 48ch;
    line-height: 1.55;
}
.crm-kpi-row__empty-cta {
    margin-top: 6px;
}

/* ----- Chart row (two-up) ----- */
.crm-dash-charts {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 18px;
}
@media (max-width: 1080px) {
    .crm-dash-charts {
        grid-template-columns: 1fr;
    }
}

.crm-dash-chart {
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 18px 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.crm-dash-chart__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--rule-soft);
}

.crm-dash-chart__title {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 20;
    font-weight: 500;
    font-size: 20px;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 2px 0 0;
}

.crm-dash-chart__summary {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 2px;
    line-height: 1;
}
.crm-dash-chart__summary-number {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 30;
    font-weight: 500;
    font-size: 22px;
    color: var(--ink);
    letter-spacing: -0.01em;
    font-feature-settings: "lnum", "tnum";
}
.crm-dash-chart__summary-label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--neutral-500);
}

.crm-dash-chart__body {
    min-height: 200px;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
}
.crm-dash-chart__body > * {
    width: 100%;
}

.crm-dash-chart__skel {
    flex: 1;
    background: linear-gradient(
        90deg,
        var(--paper-sunk) 0%,
        var(--neutral-100) 50%,
        var(--paper-sunk) 100%
    );
    background-size: 200% 100%;
    animation: crm-kpi-shimmer 1.6s ease-in-out infinite;
    border-radius: 3px;
    min-height: 200px;
}

.crm-dash-chart__empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--neutral-500);
    font-style: italic;
    padding: 20px;
}

/* ----- Activity feed ----- */
.crm-dash-feed {
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 22px 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.crm-dash-feed__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule);
    flex-wrap: wrap;
}

.crm-dash-feed__eyebrow {
    margin-bottom: 2px;
}

.crm-dash-feed__title {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 26;
    font-weight: 500;
    font-size: 26px;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 0;
}

.crm-dash-feed__tabs {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--paper-sunk);
    border: 1px solid var(--rule);
    border-radius: 3px;
}

.crm-dash-feed__tab {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 5px 11px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--neutral-500);
    cursor: pointer;
    border-radius: 2px;
    transition: background var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out);
}
.crm-dash-feed__tab:hover {
    color: var(--ink);
}
.crm-dash-feed__tab:focus-visible {
    outline: 2px solid var(--indigo-600);
    outline-offset: 1px;
}
.crm-dash-feed__tab--active {
    background: var(--paper-raised);
    color: var(--ink);
    box-shadow: 0 1px 2px -1px rgba(11,13,18,0.08);
}

.crm-dash-feed__rail {
    max-height: 520px;
    overflow-y: auto;
    padding-right: 8px;
}

/* Entity label tacked onto each rail title. Rendered as an em-dash, then
   the deal/contact/company name inline. Keeps the pulse scannable —
   "Deal won — Tesla Model 3 Whole Front" reads as one beat. */
.crm-dash-feed__entity {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 16;
    font-weight: 400;
    font-style: italic;
    color: var(--neutral-600);
    margin-left: 6px;
}
.crm-dash-feed__entity-sep {
    margin-right: 4px;
    color: var(--neutral-300);
    font-style: normal;
}
.crm-dash-feed__entity-link {
    color: var(--indigo-700);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--t-fast) var(--ease-out);
}
.crm-dash-feed__entity-link:hover {
    border-color: currentColor;
}
.crm-dash-feed__entity-link:focus-visible {
    outline: 2px solid var(--indigo-600);
    outline-offset: 2px;
}
.crm-dash-feed__entity-text {
    color: var(--neutral-700);
}

.crm-dash-feed__kind {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--neutral-500);
}

.crm-dash-feed__empty {
    padding: 28px 16px;
    text-align: center;
    border: 1px dashed var(--rule);
    border-radius: 3px;
    background: var(--paper-sunk);
}
.crm-dash-feed__empty-title {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 18;
    font-weight: 500;
    font-size: 18px;
    color: var(--ink);
    margin: 0 0 6px;
}
.crm-dash-feed__empty-body {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--neutral-600);
    margin: 0;
    max-width: 50ch;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}

/* Skeleton rail — mirrors the real item layout so the transition
   doesn't jump. */
.crm-dash-feed__skeleton-item {
    list-style: none;
}
.crm-dash-feed__skel-time,
.crm-dash-feed__skel-title,
.crm-dash-feed__skel-meta {
    display: block;
    background: linear-gradient(
        90deg,
        var(--paper-sunk) 0%,
        var(--neutral-100) 50%,
        var(--paper-sunk) 100%
    );
    background-size: 200% 100%;
    animation: crm-kpi-shimmer 1.6s ease-in-out infinite;
    border-radius: 2px;
    margin-bottom: 5px;
}
.crm-dash-feed__skel-time  { width: 90px;  height: 10px; }
.crm-dash-feed__skel-title { width: 70%;   height: 16px; }
.crm-dash-feed__skel-meta  { width: 45%;   height: 12px; }

/* =========================================================================
   Plan 6 Task 19 — /reports list + /reports/{key} detail
   ---------------------------------------------------------------------
   The reports surface is the CRM's analytical broadsheet. The list page
   is a 2-across grid of editorial cards; the detail pages are single-
   column long-form spreads with a focused chart + data table under a
   consistent time-range chip bar. The palette stays the existing
   indigo / mint / amber / coral editorial set — no rainbow.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Reports list — 2-up cards, warm paper, hairline borders.
   ------------------------------------------------------------------------- */
.crm-reports-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 8px;
}

@media (min-width: 880px) {
    .crm-reports-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.crm-report-card {
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: 24px 24px 18px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 320px;
    transition:
        border-color var(--t-med) var(--ease-out),
        transform var(--t-med) var(--ease-out);
}

.crm-report-card:hover {
    border-color: var(--neutral-400);
}

.crm-report-card__head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.crm-report-card__title {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 32;
    font-weight: 600;
    font-size: 26px;
    line-height: 1.15;
    color: var(--ink);
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}

.crm-report-card__deck {
    font-family: var(--font-body);
    font-size: 13.5px;
    color: var(--neutral-600);
    line-height: 1.4;
    margin: 0;
    max-width: 44ch;
}

.crm-report-card__visual {
    flex: 1;
    display: flex;
    align-items: stretch;
    min-height: 100px;
}

.crm-report-card__empty {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--neutral-500);
    font-style: italic;
    margin: auto;
}

.crm-report-card__skel {
    flex: 1;
    background: linear-gradient(
        90deg,
        var(--paper-sunk) 0%,
        var(--neutral-100) 50%,
        var(--paper-sunk) 100%
    );
    background-size: 200% 100%;
    animation: crm-kpi-shimmer 1.6s ease-in-out infinite;
    border-radius: 2px;
    min-height: 88px;
}

.crm-report-card__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--rule);
    padding-top: 14px;
}

.crm-report-card__headline {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.crm-report-card__headline-value {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 48;
    font-weight: 600;
    font-size: 28px;
    line-height: 1.05;
    color: var(--ink);
    letter-spacing: -0.015em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 22ch;
}

.crm-report-card__headline-label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--neutral-500);
    line-height: 1;
    margin-top: 4px;
}

.crm-report-card__open {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid var(--ink);
    border-radius: 2px;
    padding: 8px 16px;
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
    transition:
        background var(--t-fast) var(--ease-out),
        color var(--t-fast) var(--ease-out),
        transform var(--t-fast) var(--ease-out);
}

.crm-report-card__open:hover {
    background: var(--ink);
    color: var(--paper);
}

.crm-report-card__open:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--paper-raised), 0 0 0 3px var(--ink);
}

.crm-report-card__open-arrow {
    transition: transform var(--t-fast) var(--ease-out);
}

.crm-report-card__open:hover .crm-report-card__open-arrow {
    transform: translateX(2px);
}

/* -------------------------------------------------------------------------
   Mini visualisations embedded in summary cards
   ------------------------------------------------------------------------- */
.crm-report-mini-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 110px;
    width: 100%;
    padding: 8px 0 4px;
    border-bottom: 1px dashed var(--rule-soft);
}

.crm-report-mini-bar {
    flex: 1;
    display: flex;
    align-items: flex-end;
    min-width: 6px;
    max-width: 24px;
    height: 100%;
    background: transparent;
}

.crm-report-mini-bar__fill {
    display: block;
    width: 100%;
    background: var(--indigo-600);
    border-radius: 2px 2px 0 0;
    min-height: 3px;
    transition: opacity var(--t-fast) var(--ease-out);
    opacity: 0.85;
}

.crm-report-mini-bar:hover .crm-report-mini-bar__fill {
    opacity: 1;
}

/* Mini funnel — horizontal bars with inline labels + counts. */
.crm-report-mini-funnel {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.crm-report-mini-funnel__row {
    display: grid;
    grid-template-columns: 72px 1fr 52px;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
}

.crm-report-mini-funnel__label {
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--neutral-700);
    letter-spacing: 0.005em;
}

.crm-report-mini-funnel__track {
    position: relative;
    height: 8px;
    background: var(--paper-sunk);
    border-radius: 2px;
    overflow: hidden;
}

.crm-report-mini-funnel__fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: var(--indigo-600);
    border-radius: 2px;
    transition: width var(--t-med) var(--ease-out);
    min-width: 2px;
}

.crm-report-mini-funnel__fill--neutral   { background: var(--neutral-300); }
.crm-report-mini-funnel__fill--issued    { background: var(--neutral-300); }
.crm-report-mini-funnel__fill--active    { background: var(--indigo-600); }
.crm-report-mini-funnel__fill--indigo    { background: var(--indigo-600); }
.crm-report-mini-funnel__fill--converted { background: var(--mint-600); }
.crm-report-mini-funnel__fill--mint      { background: var(--mint-600); }
.crm-report-mini-funnel__fill--expired   { background: var(--amber-700); }
.crm-report-mini-funnel__fill--amber     { background: var(--amber-700); }
.crm-report-mini-funnel__fill--cancelled { background: var(--coral-700); }
.crm-report-mini-funnel__fill--coral     { background: var(--coral-700); }

.crm-report-mini-funnel__count {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--neutral-600);
    text-align: right;
    letter-spacing: -0.01em;
}

/* Top-N list (leaderboard summary card). */
.crm-report-top-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.crm-report-top-list__row {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--rule-soft);
}

.crm-report-top-list__row:last-child {
    border-bottom: none;
}

.crm-report-top-list__rank {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 18;
    font-weight: 600;
    font-size: 18px;
    color: var(--neutral-700);
    text-align: right;
}

.crm-report-top-list__name {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.crm-report-top-list__val {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--neutral-700);
    font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
   Time range chip bar (reused on every /reports/{key} page)
   Sibling style to .crm-multi-status-chips but simpler — three
   preset chips, no dots, no reset.
   ------------------------------------------------------------------------- */
.crm-time-range-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 3px;
}

.crm-time-range-chips__label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--neutral-500);
    margin-right: 4px;
    padding-right: 12px;
    border-right: 1px solid var(--rule);
    line-height: 1;
}

.crm-time-range-chip {
    appearance: none;
    -webkit-appearance: none;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 2px;
    padding: 6px 14px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--neutral-700);
    cursor: pointer;
    line-height: 1;
    transition:
        background var(--t-fast) var(--ease-out),
        border-color var(--t-fast) var(--ease-out),
        color var(--t-fast) var(--ease-out);
}

.crm-time-range-chip:hover {
    border-color: var(--ink);
    color: var(--ink);
    background: var(--paper-sunk);
}

.crm-time-range-chip:focus-visible {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 2px var(--paper-raised), 0 0 0 3px var(--ink);
}

.crm-time-range-chip--active {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

.crm-time-range-chip--active:hover {
    background: var(--neutral-900);
    border-color: var(--neutral-900);
}

/* -------------------------------------------------------------------------
   Report detail page layout — masthead + controls + sections
   ------------------------------------------------------------------------- */
.crm-page--report-detail .crm-page-masthead {
    /* Tighter vertical than the list page — the h1 carries enough weight. */
    margin-bottom: 20px;
}

.crm-breadcrumb-link {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    letter-spacing: inherit;
    text-transform: inherit;
}

.crm-breadcrumb-link:hover {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.crm-breadcrumb-sep {
    margin: 0 6px;
    color: var(--neutral-400);
}

.crm-report-detail__controls {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.crm-report-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    border: 1px solid var(--rule);
    border-radius: 2px;
    background: var(--paper-raised);
    color: var(--neutral-700);
    transition:
        background var(--t-fast) var(--ease-out),
        border-color var(--t-fast) var(--ease-out),
        color var(--t-fast) var(--ease-out);
}

.crm-report-export-btn:hover:not(:disabled) {
    border-color: var(--ink);
    color: var(--ink);
    background: var(--paper);
}

.crm-report-export-btn:focus-visible {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 2px var(--paper-raised), 0 0 0 3px var(--ink);
}

.crm-report-export-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

.crm-report-export-btn__icon {
    display: inline-flex;
    width: 14px;
    height: 14px;
}

.crm-report-export-btn__icon svg {
    width: 100%;
    height: 100%;
}

.crm-report-detail {
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: 28px 28px 24px;
    margin-bottom: 24px;
}

.crm-report-detail__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 14px;
    margin-bottom: 20px;
}

.crm-report-detail__title {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 36;
    font-weight: 600;
    font-size: 24px;
    line-height: 1.15;
    color: var(--ink);
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}

.crm-report-detail__deck {
    font-family: var(--font-body);
    font-size: 13.5px;
    color: var(--neutral-600);
    margin: 0;
    max-width: 56ch;
}

.crm-report-detail__captured {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--neutral-500);
    margin: 0;
}

.crm-report-detail__section-title {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 24;
    font-weight: 500;
    font-size: 18px;
    color: var(--ink);
    margin: 20px 0 12px;
    letter-spacing: -0.005em;
}

.crm-report-detail__chart {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 2px;
    padding: 16px;
    margin-bottom: 20px;
}

.crm-report-detail__skel {
    background: linear-gradient(
        90deg,
        var(--paper-sunk) 0%,
        var(--neutral-100) 50%,
        var(--paper-sunk) 100%
    );
    background-size: 200% 100%;
    animation: crm-kpi-shimmer 1.6s ease-in-out infinite;
    border-radius: 2px;
    height: 280px;
}

.crm-report-detail__empty {
    padding: 36px 24px;
    text-align: center;
    border: 1px dashed var(--rule);
    border-radius: 3px;
    background: var(--paper-sunk);
}

.crm-report-detail__empty h2,
.crm-report-detail__empty h3 {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 24;
    font-weight: 500;
    font-size: 18px;
    color: var(--ink);
    margin: 0 0 8px;
}

.crm-report-detail__empty p {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--neutral-600);
    margin: 0;
    max-width: 50ch;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}

/* Key-value strip under charts — "Overall", "Trend points", etc. */
.crm-report-detail__kv-row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding: 14px 18px;
    margin-bottom: 20px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 2px;
}

.crm-report-detail__kv {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 120px;
}

.crm-report-detail__kv-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--neutral-500);
}

.crm-report-detail__kv-value {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 18;
    font-weight: 600;
    font-size: 18px;
    color: var(--ink);
    letter-spacing: -0.005em;
}

/* Detail data table — numeric cells in JetBrains Mono, hairline dividers. */
.crm-report-detail__table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    font-family: var(--font-body);
    font-size: 13px;
}

.crm-report-detail__table caption {
    text-align: left;
}

.crm-report-detail__table thead th {
    text-align: left;
    padding: 10px 12px 8px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--neutral-500);
    border-bottom: 1px solid var(--rule);
    background: var(--paper-sunk);
}

.crm-report-detail__table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--rule-soft);
    color: var(--neutral-800);
    vertical-align: middle;
}

.crm-report-detail__table tbody tr:last-child td {
    border-bottom: none;
}

.crm-report-detail__num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
    letter-spacing: -0.01em;
}

.crm-report-detail__rank {
    color: var(--neutral-600);
    font-weight: 600;
}

.crm-report-detail__row--top td {
    background: var(--indigo-50);
}

.crm-report-detail__row--top .crm-report-detail__rank {
    color: var(--indigo-700);
}

.crm-report-detail__table--leaderboard tbody tr:hover td {
    background: var(--paper-sunk);
}

/* -------------------------------------------------------------------------
   Proper funnel visualization — horizontal stacked bars with drop-off pct
   ------------------------------------------------------------------------- */
.crm-report-funnel {
    list-style: none;
    margin: 0;
    padding: 12px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.crm-report-funnel__row {
    display: grid;
    grid-template-columns: 96px 1fr 72px;
    align-items: center;
    gap: 16px;
}

.crm-report-funnel__label {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 18;
    font-weight: 500;
    font-size: 16px;
    color: var(--ink);
}

.crm-report-funnel__track {
    position: relative;
    height: 26px;
    background: var(--paper-sunk);
    border-radius: 2px;
    overflow: hidden;
}

.crm-report-funnel__fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: var(--indigo-600);
    border-radius: 2px;
    transition: width var(--t-med) var(--ease-out);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 8px;
    min-width: 2px;
}

.crm-report-funnel__fill--neutral   { background: var(--neutral-300); }
.crm-report-funnel__fill--indigo    { background: var(--indigo-600); }
.crm-report-funnel__fill--mint      { background: var(--mint-600); }
.crm-report-funnel__fill--amber     { background: var(--amber-700); }
.crm-report-funnel__fill--coral     { background: var(--coral-700); }

.crm-report-funnel__count {
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--paper);
    letter-spacing: -0.01em;
}

.crm-report-funnel__fill--neutral .crm-report-funnel__count {
    color: var(--neutral-700);
}

.crm-report-funnel__pct {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--neutral-600);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* =========================================================================
   CSV Import wizard — Plan 6 Task 20
   -------------------------------------------------------------------------
   The wizard is framed as "the ledger admission desk" — a four-station
   intake where a spreadsheet crosses from the user's machine into the
   system of record. Every surface here exists to make that crossing feel
   deliberate: numbered stations (semantic <ol>), rule-bound panes, mono
   column names set against Fraunces display totals. No MudStepper, no
   MudChip, no bouncy animations — this is a ledger, not a vending machine.
   ========================================================================= */

.crm-import-wizard {
    display: grid;
    gap: 28px;
}

/* ── Step rail — numbered intake stations ── */
.crm-import-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding: 18px 0;
}

.crm-import-step {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 14px;
    padding: 0 20px;
    border-right: 1px solid var(--rule-soft);
    min-height: 52px;
}

.crm-import-step:last-child {
    border-right: none;
}

.crm-import-step__number {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-variation-settings: "opsz" 144;
    font-style: italic;
    font-weight: 500;
    font-size: 32px;
    line-height: 1;
    color: var(--neutral-300);
    font-feature-settings: "lnum";
    transition: color var(--t-med) var(--ease-out);
    min-width: 28px;
}

.crm-import-step__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.crm-import-step__label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--neutral-500);
    transition: color var(--t-med) var(--ease-out);
}

.crm-import-step__title {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--neutral-500);
    line-height: 1.3;
    transition: color var(--t-med) var(--ease-out);
}

.crm-import-step--complete .crm-import-step__number {
    color: var(--neutral-500);
}
.crm-import-step--complete .crm-import-step__title {
    color: var(--neutral-700);
}

.crm-import-step--active .crm-import-step__number {
    color: var(--ink);
}
.crm-import-step--active .crm-import-step__label {
    color: var(--indigo-600);
}
.crm-import-step--active .crm-import-step__title {
    color: var(--ink);
    font-weight: 600;
}
.crm-import-step--active::after {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: -19px;
    height: 2px;
    background: var(--ink);
}

/* ── Shared pane chrome ── */
.crm-import-pane {
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: clamp(24px, 3vw, 36px);
}

.crm-import-pane__header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--rule);
}

.crm-import-pane__eyebrow {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--neutral-500);
    font-weight: 500;
}

.crm-import-pane__title {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-variation-settings: "opsz" 48;
    font-weight: 500;
    font-size: 28px;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 0;
}

.crm-import-pane__deck {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.55;
    color: var(--neutral-600);
    max-width: 62ch;
    margin: 0;
}

.crm-import-pane__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--rule);
}

.crm-import-pane__actions--right {
    justify-content: flex-end;
}

/* ── Step 1: Entity-type pill bar ── */
.crm-import-entity-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 4px;
    background: var(--paper-sunk);
    border: 1px solid var(--rule);
    border-radius: 3px;
    width: fit-content;
    margin-bottom: 24px;
}

.crm-import-entity-bar__button {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    padding: 10px 22px;
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0.005em;
    color: var(--neutral-600);
    cursor: pointer;
    border-radius: 2px;
    transition: background var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.crm-import-entity-bar__button:hover {
    color: var(--ink);
    background: var(--paper-raised);
}

.crm-import-entity-bar__button--active {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}

.crm-import-entity-bar__button--active:hover {
    background: var(--ink);
    color: var(--paper);
}

.crm-import-entity-bar__icon {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    color: inherit;
    opacity: 0.6;
}

/* ── Step 1: Drop zone ── */
.crm-import-dropzone {
    border: 1px dashed var(--neutral-300);
    border-radius: 3px;
    padding: 48px 32px;
    text-align: center;
    background: var(--paper);
    transition: border-color var(--t-fast) var(--ease-out),
                background var(--t-fast) var(--ease-out);
}

.crm-import-dropzone:hover,
.crm-import-dropzone--active {
    border-color: var(--ink);
    background: var(--paper-sunk);
}

.crm-import-dropzone__mark {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 56px;
    font-weight: 500;
    line-height: 1;
    color: var(--neutral-300);
    margin: 0 0 12px;
    font-feature-settings: "lnum";
}

.crm-import-dropzone__title {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 6px;
}

.crm-import-dropzone__subtitle {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--neutral-500);
    margin: 0 0 16px;
}

.crm-import-dropzone__limits {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--neutral-500);
    margin-top: 20px;
}

.crm-import-dropzone__limits span + span::before {
    content: " · ";
    color: var(--neutral-400);
    margin: 0 8px;
}

.crm-import-filename {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 12px 14px;
    background: var(--paper-sunk);
    border: 1px solid var(--rule);
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--ink);
    justify-content: center;
}

.crm-import-filename__rule {
    display: inline-block;
    width: 24px;
    height: 1px;
    background: var(--neutral-400);
}

.crm-import-filename__size {
    color: var(--neutral-500);
    font-size: 11px;
    letter-spacing: 0.06em;
}

/* ── Step 1: MudFileUpload styling overrides ── */
.crm-import-upload-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.crm-import-upload-wrap .mud-file-upload {
    width: 100%;
}

/* ── Step 2: Mapping table ── */
.crm-import-mapping {
    display: grid;
    gap: 0;
    border: 1px solid var(--rule);
    border-radius: 3px;
    overflow: hidden;
    background: var(--paper);
}

.crm-import-mapping__headerrow {
    display: grid;
    grid-template-columns: 1fr 24px 1fr;
    gap: 0;
    padding: 12px 16px;
    background: var(--paper-sunk);
    border-bottom: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--neutral-500);
    align-items: center;
}

.crm-import-mapping__row {
    display: grid;
    grid-template-columns: 1fr 24px 1fr;
    gap: 0;
    padding: 10px 16px;
    align-items: center;
    border-bottom: 1px solid var(--rule-soft);
    transition: background var(--t-fast) var(--ease-out);
}

.crm-import-mapping__row:last-child {
    border-bottom: none;
}

.crm-import-mapping__row:hover {
    background: var(--paper-sunk);
}

.crm-import-mapping__header {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--ink);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-import-mapping__arrow {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--neutral-400);
    text-align: center;
    line-height: 1;
}

.crm-import-mapping__select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--rule);
    border-radius: 2px;
    padding: 8px 28px 8px 10px;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink);
    background-color: var(--paper-raised);
    background-image: linear-gradient(45deg, transparent 50%, var(--neutral-500) 50%),
                      linear-gradient(135deg, var(--neutral-500) 50%, transparent 50%);
    background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease-out);
}

.crm-import-mapping__select:hover {
    border-color: var(--neutral-400);
}

.crm-import-mapping__select:focus-visible {
    outline: none;
    border-color: var(--indigo-600);
    box-shadow: 0 0 0 2px var(--indigo-50);
}

.crm-import-mapping__select--unmapped {
    color: var(--neutral-500);
    font-style: italic;
}

.crm-import-mapping__required-note {
    font-family: var(--font-body);
    font-size: 12.5px;
    color: var(--neutral-500);
    margin: 14px 0 0;
}

.crm-import-mapping__required-note strong {
    color: var(--amber-700);
    font-weight: 600;
}

/* ── Step 3: Dry-run split ── */
.crm-import-dryrun {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
    align-items: start;
}

@media (max-width: 900px) {
    .crm-import-dryrun {
        grid-template-columns: 1fr;
    }
}

.crm-import-tally {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.crm-import-tally__item {
    padding: 18px 20px;
    border: 1px solid var(--rule);
    border-radius: 3px;
    background: var(--paper);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.crm-import-tally__item--valid {
    border-left: 3px solid var(--mint-600);
}

.crm-import-tally__item--invalid {
    border-left: 3px solid var(--coral-700);
}

.crm-import-tally__item--total {
    border-left: 3px solid var(--neutral-400);
}

.crm-import-tally__number {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-variation-settings: "opsz" 96;
    font-weight: 500;
    font-size: 44px;
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.02em;
    font-feature-settings: "lnum", "tnum";
    font-variant-numeric: tabular-nums;
}

.crm-import-tally__label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--neutral-500);
    font-weight: 500;
}

/* ── Step 3: Skipped rows table ── */
.crm-import-issues {
    border: 1px solid var(--rule);
    border-radius: 3px;
    overflow: hidden;
    background: var(--paper);
}

.crm-import-issues__head {
    padding: 14px 18px;
    background: var(--paper-sunk);
    border-bottom: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--neutral-600);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.crm-import-issues__count {
    font-family: var(--font-mono);
    color: var(--coral-700);
    font-weight: 600;
}

.crm-import-issues__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 360px;
    overflow-y: auto;
}

.crm-import-issues__row {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 14px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--rule-soft);
    align-items: baseline;
}

.crm-import-issues__row:last-child {
    border-bottom: none;
}

.crm-import-issues__rownum {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--neutral-500);
    font-weight: 500;
    letter-spacing: 0.04em;
}

.crm-import-issues__reason {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink);
    line-height: 1.45;
}

.crm-import-issues--empty {
    padding: 24px 18px;
    text-align: center;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--neutral-500);
}

/* ── Step 3: Preview ── */
.crm-import-preview {
    margin-top: 28px;
    border: 1px solid var(--rule);
    border-radius: 3px;
    overflow: hidden;
    background: var(--paper);
}

.crm-import-preview__head {
    padding: 12px 18px;
    background: var(--paper-sunk);
    border-bottom: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--neutral-600);
}

.crm-import-preview__scroll {
    overflow-x: auto;
    max-height: 320px;
}

.crm-import-preview__table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink);
}

.crm-import-preview__table th {
    position: sticky;
    top: 0;
    background: var(--paper-raised);
    border-bottom: 1px solid var(--rule);
    text-align: left;
    padding: 10px 14px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--neutral-600);
    font-weight: 500;
    white-space: nowrap;
}

.crm-import-preview__table td {
    padding: 8px 14px;
    border-bottom: 1px solid var(--rule-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}

.crm-import-preview__table tr:last-child td {
    border-bottom: none;
}

.crm-import-preview__table tr:nth-child(even) td {
    background: var(--paper-sunk);
}

/* ── Step 4: Commit result ── */
.crm-import-result {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 48px;
    align-items: center;
    padding: 24px 0;
}

@media (max-width: 780px) {
    .crm-import-result {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.crm-import-result__big {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 20px 28px;
    border-left: 3px solid var(--mint-600);
    background: var(--mint-50);
    border-radius: 0 3px 3px 0;
}

.crm-import-result__big--failure {
    border-left-color: var(--coral-700);
    background: var(--coral-50);
}

.crm-import-result__number {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-variation-settings: "opsz" 144;
    font-weight: 500;
    font-size: clamp(64px, 9vw, 96px);
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--ink);
    font-feature-settings: "lnum", "tnum";
    font-variant-numeric: tabular-nums;
}

.crm-import-result__unit {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--neutral-600);
    font-weight: 500;
}

.crm-import-result__copy {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.crm-import-result__headline {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 24px;
    line-height: 1.2;
    color: var(--ink);
    margin: 0;
}

.crm-import-result__skipped {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--neutral-600);
    margin: 0;
}

.crm-import-result__skipped b {
    color: var(--coral-700);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.crm-import-result__actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
}

/* ── Loading / in-flight spinner ── */
.crm-import-committing {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 56px 20px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--neutral-600);
}

.crm-import-committing__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ink);
    animation: crm-import-pulse 1.1s infinite ease-in-out;
}

@keyframes crm-import-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.6); opacity: 0.5; }
}

/* ── Error banner ── */
.crm-import-error {
    padding: 14px 18px;
    border: 1px solid var(--coral-700);
    border-left-width: 3px;
    background: var(--coral-50);
    border-radius: 2px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 20px;
}

.crm-import-error__label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--coral-700);
    font-weight: 600;
    flex-shrink: 0;
    padding-top: 2px;
}

.crm-import-error__text {
    font-family: var(--font-body);
    font-size: 13.5px;
    color: var(--ink);
    line-height: 1.5;
    margin: 0;
}

/* =========================================================================
   Plan 6 Task 21 — universal empty / loading / error primitives
   -------------------------------------------------------------------------
   Reusable building blocks the `CrmDataSection<T>` wrapper (and any page
   that prefers to roll its own) draws from. Additive — existing panel-
   specific skeletons stay unchanged.
   ========================================================================= */

/* Shimmer fuel — one keyframe shared by every generic skeleton primitive.
   Restrained: 1.8s, low-alpha warm tones, no bouncing. Matches the
   editorial "restrained motion" principle. */
@keyframes crm-shimmer {
    0%   { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}

/* Generic single-line skeleton. Default height matches body text; callers
   override width inline (style="--crm-skel-w: 220px") or via utility modifiers. */
.crm-skeleton-line {
    display: block;
    height: 12px;
    width: var(--crm-skel-w, 100%);
    border-radius: 2px;
    background: linear-gradient(
        90deg,
        var(--paper-sunk) 0%,
        var(--neutral-100) 50%,
        var(--paper-sunk) 100%
    );
    background-size: 200px 100%;
    background-repeat: no-repeat;
    animation: crm-shimmer 1.8s var(--ease-out) infinite;
}
.crm-skeleton-line + .crm-skeleton-line { margin-top: 8px; }
.crm-skeleton-line--sm { height: 10px; }
.crm-skeleton-line--lg { height: 16px; }

/* Card-shaped placeholder — the size/shape of a typical crm-detail-card.
   Height caller-controllable via --crm-skel-h. */
.crm-skeleton-card {
    display: block;
    height: var(--crm-skel-h, 180px);
    width: 100%;
    border-radius: 3px;
    border: 1px solid var(--rule);
    background: linear-gradient(
        90deg,
        var(--paper-raised) 0%,
        var(--paper-sunk) 50%,
        var(--paper-raised) 100%
    );
    background-size: 200px 100%;
    background-repeat: no-repeat;
    animation: crm-shimmer 1.8s var(--ease-out) infinite;
}

/* Small tile — for KPI / summary contexts. */
.crm-skeleton-tile {
    display: block;
    height: var(--crm-skel-h, 96px);
    width: 100%;
    border-radius: 3px;
    background: linear-gradient(
        90deg,
        var(--paper-sunk) 0%,
        var(--neutral-100) 50%,
        var(--paper-sunk) 100%
    );
    background-size: 200px 100%;
    background-repeat: no-repeat;
    animation: crm-shimmer 1.8s var(--ease-out) infinite;
}

/* Skeleton grouping container — standard stack spacing so callers don't
   reinvent flex every time. */
.crm-skeleton-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* -------------------------------------------------------------------------
   Error boundary — warm paper card, coral accent, gentle retry button.
   Used by <CrmDataSection> and any ErrorBoundary's ErrorContent slot.
   Deliberately muted — this is a local panel failure, not a site-wide
   catastrophe. No skull icons, no ALL CAPS alarms.
   ------------------------------------------------------------------------- */
.crm-error-boundary {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 40px 24px;
    border: 1px solid var(--rule);
    border-left: 2px solid var(--coral-700);
    border-radius: 3px;
    background: var(--coral-50);
    text-align: center;
}
.crm-error-boundary__icon {
    color: var(--coral-700);
    font-size: 22px;
    line-height: 1;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.01em;
}
.crm-error-boundary__title {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 48;
    font-style: italic;
    font-weight: 400;
    font-size: 18px;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.01em;
}
.crm-error-boundary__body {
    font-size: 13px;
    color: var(--neutral-600);
    margin: 0;
    max-width: 44ch;
    line-height: 1.5;
    font-family: var(--font-body);
}
.crm-error-boundary__detail {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--neutral-500);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 2px;
    padding: 6px 10px;
    margin: 4px 0 0;
    max-width: 58ch;
    word-break: break-word;
    white-space: pre-wrap;
    text-align: left;
}
.crm-error-boundary__retry {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--indigo-700);
    background: var(--paper-raised);
    border: 1px solid var(--indigo-600);
    border-radius: 2px;
    padding: 7px 14px;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease-out),
                color     var(--t-fast) var(--ease-out);
}
.crm-error-boundary__retry:hover {
    background: var(--indigo-600);
    color: var(--paper-raised);
}
.crm-error-boundary__retry:focus-visible {
    outline: 2px solid var(--indigo-600);
    outline-offset: 2px;
}

/* Inline variant for tight panels — no padding swelling, no big title.
   Use inside a small card when a full-bleed error card would overwhelm. */
.crm-error-boundary--inline {
    padding: 14px 16px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    text-align: left;
    gap: 10px;
}
.crm-error-boundary--inline .crm-error-boundary__title { font-size: 14px; }
.crm-error-boundary--inline .crm-error-boundary__body  { font-size: 12.5px; }

/* =========================================================================
   NewLeadDialog — editorial intake card (post-Plan 6 polish)
   -------------------------------------------------------------------------
   Replaces the generic MudSwitch + paired MudSelect layout with an
   intake-form aesthetic. The interest selector is a three-way segmented
   control that reads like a typographic tab strip (mono code stacked over
   a display-serif name). The promote-to-deal card reads like stamping a
   dispatch form — dotted outline until you commit, then a crisp ink
   border with an arrow pulling the eye to the pipeline select that
   unfolds below.
   ========================================================================= */

.crm-dialog--lead.mud-dialog { width: 680px !important; }

/* Compact the editorial head for the intake dialog — the deck copy was
   noise; shave padding so the form fits a standard 900px viewport
   without forcing a scroll. */
.crm-dialog--lead .crm-dialog__head {
    padding: 18px 28px 14px;
}
.crm-dialog--lead .crm-dialog__title {
    font-size: 24px;
    margin: 0;
}
.crm-dialog--lead .crm-dialog__eyebrow {
    margin-bottom: 6px;
}

.crm-dialog--lead .crm-dialog__body {
    padding: 14px 28px 4px;
    min-height: 0;
    gap: 10px;
}

.crm-dialog--lead .crm-panel { gap: 10px; }

/* Tighter section rhythm — drop the 18px divider padding to 12px so
   four sections stack inside one viewport. */
.crm-dialog--lead .dialog-form-section { gap: 10px; }
.crm-dialog--lead .dialog-form-section + .dialog-form-section {
    padding-top: 12px;
    margin-top: 2px;
}

.crm-dialog--lead .mud-dialog-actions { padding: 12px 28px !important; }

.crm-dialog__eyebrow--intake { color: var(--neutral-700); }
.crm-dialog__eyebrow--intake::before { background: var(--neutral-700); }

/* Interest + Source on the same row — 2fr / 1fr split keeps the
   segmented control dominant and the Source select compact. */
.crm-interest-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 10px;
    align-items: center;
}
.crm-interest-row .crm-interest-segment {
    height: 40px;
}
.crm-interest-row .crm-interest-segment__option {
    padding: 6px 8px 5px;
}

/* Interest segmented control — three equal columns, each stacks a short
   mono code above the display-name. Active state flips to ink fill,
   matching the primary-button treatment used elsewhere in the shell. */
.crm-interest-segment {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid var(--rule);
    border-radius: 2px;
    background: var(--paper);
    overflow: hidden;
}

.crm-interest-segment__option {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--rule);
    padding: 12px 10px 11px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-align: center;
    color: var(--neutral-500);
    transition: background var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out);
    font-family: inherit;
}

.crm-interest-segment__option:last-child { border-right: 0; }

.crm-interest-segment__option:hover {
    background: var(--paper-raised);
    color: var(--ink);
}

.crm-interest-segment__option--active,
.crm-interest-segment__option--active:hover {
    background: var(--ink);
    color: var(--paper);
}

.crm-interest-segment__option:focus-visible {
    outline: 2px solid var(--indigo-600);
    outline-offset: -2px;
}

.crm-interest-segment__code {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.65;
}

.crm-interest-segment__option--active .crm-interest-segment__code { opacity: 0.85; }

.crm-interest-segment__name {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 24;
    font-weight: 500;
    font-size: 14.5px;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

/* Source select sits under the segmented row — full-width so the dialog
   reads as two rhythms in the Interest section: the bold segment above,
   the quiet dropdown below. */
.crm-source-row { margin-top: 4px; }

/* ----- Handoff card (promote-to-deal) --------------------------------------
   A semantic <label> wraps a visually-hidden checkbox + the card UI.
   Unchecked = dashed outline in the paper tone (neutral intake form).
   Checked   = crisp ink border + a subtle drop-shadow that reads like a
   stamped card, plus the arrow animates forward.
   The pipeline select unfolds beneath with an ink left-bar so it reads
   as a dispatch instruction ("dispatches to [pipeline]"). */
.crm-handoff { gap: 10px; }

.crm-handoff__card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    border: 1px dashed var(--rule);
    border-radius: 3px;
    background: var(--paper);
    cursor: pointer;
    transition: border-color var(--t-med) var(--ease-out),
                background var(--t-fast) var(--ease-out),
                box-shadow var(--t-med) var(--ease-out);
}

.crm-handoff__card:hover {
    border-color: var(--neutral-400);
    background: var(--paper-raised);
}

.crm-handoff__card--active,
.crm-handoff__card--active:hover {
    border: 1px solid var(--ink);
    background: var(--paper);
    box-shadow: 0 1px 0 var(--ink), 0 6px 16px rgba(11, 13, 18, 0.06);
}

.crm-handoff__checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
    margin: 0;
}

.crm-handoff__checkbox:focus-visible ~ .crm-handoff__indicator {
    outline: 2px solid var(--indigo-600);
    outline-offset: 2px;
}

.crm-handoff__indicator {
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--neutral-400);
    border-radius: 2px;
    display: inline-block;
    position: relative;
    flex-shrink: 0;
    transition: background var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out);
}

.crm-handoff__card--active .crm-handoff__indicator {
    background: var(--ink);
    border-color: var(--ink);
}

.crm-handoff__card--active .crm-handoff__indicator::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 5px;
    width: 4px;
    height: 9px;
    border-right: 1.5px solid var(--paper);
    border-bottom: 1.5px solid var(--paper);
    transform: rotate(45deg);
}

.crm-handoff__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.crm-handoff__title {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 24;
    font-weight: 500;
    font-size: 15.5px;
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.crm-handoff__subtitle {
    font-family: var(--font-body);
    font-size: 12.5px;
    color: var(--neutral-500);
    line-height: 1.5;
}

.crm-handoff__arrow {
    font-family: var(--font-mono);
    font-size: 22px;
    line-height: 1;
    color: var(--neutral-300);
    transform: translateX(0);
    transition: transform var(--t-med) var(--ease-out),
                color var(--t-fast) var(--ease-out);
}

.crm-handoff__card--active .crm-handoff__arrow {
    color: var(--ink);
    transform: translateX(4px);
}

.crm-handoff__pipeline {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: center;
    margin-top: 10px;
    padding: 10px 16px;
    background: var(--paper-sunk);
    border-left: 2px solid var(--ink);
    border-radius: 0 3px 3px 0;
    animation: crm-handoff-unfold var(--t-med) var(--ease-out);
}

.crm-handoff__pipeline-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--neutral-500);
    margin: 0;
    padding-right: 12px;
    border-right: 1px solid var(--rule);
    white-space: nowrap;
    font-weight: 500;
}

@keyframes crm-handoff-unfold {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Disclosure section variant — neutralise the parent section's top border
   so the .crm-disclosure hairline is the only divider, then tighten the
   padding to match the quieter editorial weight. */
.dialog-form-section--disclosure {
    padding-top: 0 !important;
    margin-top: 0 !important;
    border-top: 0 !important;
}
.dialog-form-section--disclosure .crm-disclosure { margin-bottom: 0; }


/* ========================================================================
   SALES DOCS — newsroom broadsheet treatment
   ------------------------------------------------------------------------
   Extends the CRM editorial design system with a picker page + dialog for
   generating proposal PDFs. Scope: .sales-docs (page) + .sales-docs-dialog.
   Uses existing tokens only. NO MudBlazor primitive overrides.
   ======================================================================== */

.sales-docs {
    padding: 2rem clamp(1.25rem, 3vw, 2.25rem) 3rem;
    max-width: 1320px;
    margin: 0 auto;
}

.sales-docs__masthead { margin-bottom: 2.25rem; }

.sales-docs__masthead-meta {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--neutral-500);
    margin-bottom: 0.375rem;
}
.sales-docs__masthead-sep { color: var(--neutral-300); font-weight: 400; }

.sales-docs__masthead-rules {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 0.875rem;
}
.sales-docs__rule { display: block; height: 1px; background: var(--ink); }
.sales-docs__rule:last-child { height: 3px; }

.sales-docs__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-style: italic;
    font-size: clamp(2.5rem, 5vw, 3.75rem);
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--ink);
    margin: 0;
}

.sales-docs__kicker {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    line-height: 1.5;
    color: var(--neutral-600);
    margin: 0.625rem 0 0;
    max-width: 48ch;
}
.sales-docs__kicker em { font-style: italic; color: var(--ink); }

.sales-docs__grid {
    display: grid;
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap: 2rem;
    align-items: start;
    position: relative;
}

@media (max-width: 900px) {
    .sales-docs__grid { grid-template-columns: 1fr; }
}

.sales-docs__picker {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    min-height: 60vh;
}

.sales-docs__search-input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--ink);
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 2px;
    outline: none;
    transition: border-color var(--t-fast) var(--ease-out);
}
.sales-docs__search-input::placeholder { color: var(--neutral-400); font-style: italic; }
.sales-docs__search-input:focus {
    border-color: var(--ink);
    box-shadow: 0 0 0 1px var(--ink);
}

.sales-docs__filters {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--rule);
}

.sales-docs__filter {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0.5rem 0.875rem;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--neutral-500);
    cursor: pointer;
    position: relative;
    transition: color var(--t-fast) var(--ease-out);
}
.sales-docs__filter:hover { color: var(--ink); }
.sales-docs__filter.is-active { color: var(--ink); font-weight: 600; }
.sales-docs__filter.is-active::after {
    content: '';
    position: absolute;
    left: 0.875rem;
    right: 0.875rem;
    bottom: -1px;
    height: 2px;
    background: var(--ink);
}

.sales-docs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    max-height: 70vh;
}

.sales-docs__item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "kind name when"
        "kind sub  when";
    column-gap: 0.75rem;
    padding: 0.75rem 0.625rem;
    cursor: pointer;
    border-bottom: 1px solid var(--rule-soft);
    transition: background var(--t-fast) var(--ease-out);
    animation: sales-docs-fade-up 280ms var(--ease-out) both;
}
.sales-docs__item:hover { background: var(--paper-sunk); }
.sales-docs__item:focus-visible {
    outline: 2px solid var(--indigo-600);
    outline-offset: -2px;
}
.sales-docs__item.is-selected {
    background: var(--indigo-50);
    box-shadow: inset 2px 0 0 var(--indigo-600);
}

.sales-docs__kind {
    grid-area: kind;
    align-self: start;
    font-family: var(--font-body);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.125rem 0.375rem;
    border-radius: 2px;
    min-width: 38px;
    text-align: center;
}
.sales-docs__kind--lead { background: var(--amber-50); color: var(--amber-700); }
.sales-docs__kind--company { background: var(--mint-50); color: var(--mint-700); }

.sales-docs__item-name {
    grid-area: name;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
}

.sales-docs__item-sub {
    grid-area: sub;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.8125rem;
    color: var(--neutral-500);
    line-height: 1.3;
    margin-top: 2px;
}

.sales-docs__item-when {
    grid-area: when;
    align-self: start;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--neutral-400);
    letter-spacing: 0.02em;
}

.sales-docs__item--skeleton { pointer-events: none; opacity: 0.55; }

.sales-docs__skeleton-pill {
    grid-area: kind;
    width: 38px;
    height: 16px;
    background: var(--neutral-100);
    border-radius: 2px;
}
.sales-docs__skeleton-line {
    grid-area: name;
    height: 12px;
    background: var(--neutral-100);
    border-radius: 1px;
    margin-bottom: 6px;
}
.sales-docs__skeleton-line--short { grid-area: sub; width: 55%; height: 10px; }

.sales-docs__empty {
    padding: 2rem 0.5rem;
    text-align: center;
    color: var(--neutral-500);
    font-family: var(--font-display);
    font-size: 0.9375rem;
}

.sales-docs__detail { min-height: 60vh; }

.sales-docs__placeholder {
    padding: 3rem 2rem;
    text-align: center;
    color: var(--neutral-500);
    max-width: 44ch;
    margin: 0 auto;
}

.sales-docs__placeholder-eyebrow {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--neutral-400);
    margin: 0 0 0.5rem;
}

.sales-docs__placeholder-line {
    font-family: var(--font-display);
    font-size: 1.375rem;
    line-height: 1.3;
    color: var(--ink);
    margin: 0 0 0.75rem;
}

.sales-docs__placeholder-sub {
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--neutral-500);
    margin: 0;
}

.sales-docs__article {
    padding: 0 1.5rem;
    animation: sales-docs-fade-in 240ms var(--ease-out) both;
}

.sales-docs__article-head { margin-bottom: 1.5rem; }

.sales-docs__article-kicker {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--neutral-500);
    margin: 0 0 0.5rem;
}

.sales-docs__article-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.75rem, 3.2vw, 2.375rem);
    letter-spacing: -0.015em;
    line-height: 1.1;
    color: var(--ink);
    margin: 0;
}

.sales-docs__article-sub {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1rem;
    color: var(--neutral-600);
    margin: 0.375rem 0 0;
}

.sales-docs__warning {
    padding: 0.75rem 1rem;
    background: var(--coral-50);
    color: var(--coral-700);
    border-left: 3px solid var(--coral-700);
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

.sales-docs__prefill {
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.75rem;
}

.sales-docs__prefill-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem 2rem;
    margin: 0;
}
@media (max-width: 600px) {
    .sales-docs__prefill-grid { grid-template-columns: 1fr; }
}

.sales-docs__prefill-grid dt {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--neutral-500);
    margin-bottom: 0.25rem;
}
.sales-docs__prefill-grid dd {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--ink);
    margin: 0;
    line-height: 1.4;
}

.sales-docs__dim {
    color: var(--neutral-500);
    font-style: italic;
    font-family: var(--font-display);
    font-size: 0.875rem;
    margin-left: 0.375rem;
}

.sales-docs__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: var(--ink);
    color: var(--paper);
    position: relative;
    overflow: hidden;
}
.sales-docs__cta::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--indigo-600);
}

.sales-docs__cta-hint { flex: 1; min-width: 0; }

.sales-docs__cta-label {
    display: block;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 1.125rem;
    color: var(--paper);
}

.sales-docs__cta-sub {
    display: block;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--neutral-300);
    margin-top: 0.125rem;
}

.sales-docs__press-btn {
    appearance: none;
    border: 0;
    background: var(--paper);
    color: var(--ink);
    padding: 0.75rem 1.25rem;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    transition: transform var(--t-fast) var(--ease-out),
                background var(--t-fast) var(--ease-out);
}
.sales-docs__press-btn:not(:disabled):hover {
    background: #FFFFFF;
    transform: translateX(2px);
}
.sales-docs__press-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.sales-docs__press-btn-arrow {
    font-family: var(--font-display);
    font-size: 1.125rem;
    transition: transform var(--t-fast) var(--ease-out);
}
.sales-docs__press-btn:not(:disabled):hover .sales-docs__press-btn-arrow { transform: translateX(3px); }

.sales-docs__press-btn-dots {
    font-family: var(--font-mono);
    animation: sales-docs-dots 1.4s steps(4) infinite;
}

@keyframes sales-docs-dots {
    0%   { clip-path: inset(0 100% 0 0); }
    100% { clip-path: inset(0 0 0 0); }
}

.sales-docs__status {
    margin-top: 1rem;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.9375rem;
    color: var(--mint-700);
}
.sales-docs__status.is-error { color: var(--coral-700); }

@keyframes sales-docs-fade-up {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes sales-docs-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ============ DIALOG ============ */

/* MudBlazor portals the dialog to <body>, OUTSIDE the .crm-layout ancestor
   where the editorial CSS vars are scoped. var(--paper) etc. would resolve
   to empty string there, making the dialog transparent. Re-declare the vars
   at the dialog root so they cascade through the portaled subtree. */
.sales-docs-dialog.mud-dialog,
.sales-docs-dialog .mud-dialog {
    --ink:            #0B0D12;
    --paper:          #FAF8F4;
    --paper-sunk:     #F3EFE7;
    --paper-raised:   #FFFDF8;
    --rule:           #E8E4DC;
    --rule-soft:      #EFEBE3;
    --neutral-100:    #EBE6DC;
    --neutral-300:    #B3AC9A;
    --neutral-400:    #958E7E;
    --neutral-500:    #645E50;
    --neutral-600:    #4E4A3D;
    --neutral-800:    #2A2822;
    --indigo-600:     #4F46E5;
    --indigo-700:     #3730A3;
    --coral-700:      #991B1B;
    --coral-50:       rgba(185, 28, 28, 0.08);
    --font-display:   'Fraunces', 'Times New Roman', serif;
    --font-body:      'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono:      'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --ease-out:       cubic-bezier(0.2, 0.8, 0.2, 1);
    --t-fast:         160ms;

    /* MudBlazor internal — also override so Mud itself renders opaque */
    --mud-palette-surface: #FAF8F4;

    background-color: #FAF8F4 !important;
    background-image: none !important;
    border: 1px solid #E8E4DC;
    border-radius: 2px;
    max-width: 840px;
    box-shadow: 0 24px 48px rgba(11, 13, 18, 0.18);
    color: #0B0D12;
}

.sales-docs-dialog__surface {
    background-color: #FAF8F4;
    padding: 1.25rem 1.5rem 1.5rem;
    color: #0B0D12;
}

.sales-docs-dialog__head-wrap {
    padding: 1.25rem 1.5rem 0.5rem;
    margin: -1rem -1.5rem 0;
}

.sales-docs-dialog__actions-wrap {
    padding: 0.875rem 1.5rem 1.25rem;
    margin: 0 -1.5rem -0.5rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.625rem;
    width: calc(100% + 3rem);
    border-top: 1px solid #E8E4DC;
    background-color: #FAF8F4;
}

.sales-docs-dialog__head {
    padding: 0.25rem 0 0.75rem;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 1.25rem;
}

.sales-docs-dialog__eyebrow {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--neutral-500);
    margin: 0 0 0.375rem;
}

.sales-docs-dialog__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.625rem;
    line-height: 1.2;
    color: var(--ink);
    margin: 0 0 0.375rem;
    letter-spacing: -0.01em;
}
.sales-docs-dialog__title em {
    font-style: italic;
    color: var(--indigo-700);
}

.sales-docs-dialog__sub {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--neutral-500);
    margin: 0;
    line-height: 1.5;
}

.sales-docs-dialog__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 2rem;
}
@media (max-width: 680px) {
    .sales-docs-dialog__grid { grid-template-columns: 1fr; }
}

.sales-docs-dialog__section {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    margin: 0 0 0.5rem;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid var(--rule);
}
.sales-docs-dialog__section--split { margin-top: 1rem; }

.sales-docs-dialog__field { margin-bottom: 0.875rem; }

.sales-docs-dialog__field label,
.sales-docs-dialog__addons-label {
    display: block;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--neutral-600);
    margin-bottom: 0.375rem;
    letter-spacing: 0.02em;
}

.sales-docs-dialog__input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--ink);
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 2px;
    outline: none;
    transition: border-color var(--t-fast) var(--ease-out);
}
.sales-docs-dialog__input:focus {
    border-color: var(--ink);
    box-shadow: 0 0 0 1px var(--ink);
}
.sales-docs-dialog__input::placeholder { color: var(--neutral-400); font-style: italic; }
.sales-docs-dialog__input--mono { font-family: var(--font-mono); font-size: 0.875rem; }

.sales-docs-dialog__field--row { display: flex; gap: 0.875rem; }
.sales-docs-dialog__field-sm { flex: 1; min-width: 0; }

.sales-docs-dialog__money {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--rule);
    border-radius: 2px;
    overflow: hidden;
    background: var(--paper-raised);
}
.sales-docs-dialog__money:focus-within {
    border-color: var(--ink);
    box-shadow: 0 0 0 1px var(--ink);
}
.sales-docs-dialog__money-sigil {
    padding: 0.5rem 0.75rem;
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--neutral-500);
    background: var(--paper-sunk);
    border-right: 1px solid var(--rule);
}
.sales-docs-dialog__money .sales-docs-dialog__input {
    border: 0;
    box-shadow: none;
    background: transparent;
}

.sales-docs-dialog__term {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.sales-docs-dialog__term span {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--neutral-500);
    font-size: 0.875rem;
}
.sales-docs-dialog__term .sales-docs-dialog__input {
    width: 4rem;
    text-align: center;
}

.sales-docs-dialog__check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--ink);
    cursor: pointer;
}
.sales-docs-dialog__check em {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--neutral-500);
    font-size: 0.8125rem;
    margin-left: 0.25rem;
}

.sales-docs-dialog__hint {
    display: block;
    margin-top: 0.375rem;
    font-family: var(--font-body);
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--neutral-600);
    font-style: italic;
}

.sales-docs-dialog__note {
    margin-top: 1rem;
    padding: 0.75rem 0.875rem;
    background: rgba(79, 70, 229, 0.08);
    border-left: 3px solid #4F46E5;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--ink);
}
.sales-docs-dialog__note strong {
    font-weight: 700;
    color: #3730A3;
}

.sales-docs-dialog__btn {
    appearance: none;
    border: 0;
    padding: 0.625rem 1.125rem;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 2px;
    transition: background var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.sales-docs-dialog__btn--ghost {
    background: transparent;
    color: var(--neutral-600);
}
.sales-docs-dialog__btn--ghost:hover { color: var(--ink); }
.sales-docs-dialog__btn--primary {
    background: var(--ink);
    color: var(--paper);
}
.sales-docs-dialog__btn--primary:not(:disabled):hover { background: var(--neutral-800); }
.sales-docs-dialog__btn--primary:disabled { opacity: 0.45; cursor: not-allowed; }
.sales-docs-dialog__btn-arrow { font-family: var(--font-display); }

/* =========================================================================
   Lead Notifications dialog
   --------------------------------------------------------------------
   Editorial status banner + sectioned form. The status banner reads at a
   glance — colored dot, plain-language state, inline toggle switch — so
   operators can flip routing on/off without scanning the form. CC chips
   parse-as-you-type and call out invalid entries in coral so bad addresses
   don't silently disappear on save.
   ========================================================================= */
.crm-dialog--lead-notifications.mud-dialog { width: 580px !important; }

.crm-dialog--lead-notifications .crm-dialog__head {
    padding: 22px 28px 16px;
}
.crm-dialog--lead-notifications .crm-dialog__title {
    font-size: 22px;
    margin: 4px 0 6px;
}
.crm-dialog--lead-notifications .crm-dialog__sub {
    max-width: 52ch;
}
.crm-dialog--lead-notifications .crm-dialog__body {
    padding: 18px 28px 8px;
    gap: 18px;
    min-height: 0;
}
.crm-dialog--lead-notifications .mud-dialog-actions { padding: 14px 28px !important; }

/* Status banner — the dialog's hero element */
.crm-notif-status {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--rule);
    border-radius: 3px;
    background: var(--paper-raised);
    transition: border-color var(--t-med) var(--ease-out),
                background var(--t-med) var(--ease-out);
}
.crm-notif-status--on {
    border-color: rgba(5, 150, 105, 0.35);
    background: linear-gradient(180deg, rgba(5, 150, 105, 0.04) 0%, var(--paper-raised) 100%);
}

.crm-notif-status__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--neutral-300);
    box-shadow: 0 0 0 4px rgba(149, 142, 126, 0.12);
    transition: background var(--t-med) var(--ease-out),
                box-shadow var(--t-med) var(--ease-out);
}
.crm-notif-status--on .crm-notif-status__dot {
    background: var(--mint-600);
    box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.18);
}

.crm-notif-status__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.crm-notif-status__title {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.005em;
}
.crm-notif-status__hint {
    font-size: 12.5px;
    color: var(--neutral-500);
    line-height: 1.45;
}
.crm-notif-status__hint strong {
    color: var(--ink);
    font-weight: 500;
}

/* Toggle switch — editorial pill, no MudSwitch dependency */
.crm-notif-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}
.crm-notif-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.crm-notif-toggle__track {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: var(--neutral-200);
    border: 1px solid var(--rule);
    transition: background var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out);
}
.crm-notif-toggle__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--paper-raised);
    box-shadow: 0 1px 2px rgba(11, 13, 18, 0.18);
    transition: transform var(--t-med) var(--ease-out),
                background var(--t-fast) var(--ease-out);
}
.crm-notif-toggle input:checked + .crm-notif-toggle__track {
    background: var(--ink);
    border-color: var(--ink);
}
.crm-notif-toggle input:checked + .crm-notif-toggle__track .crm-notif-toggle__thumb {
    transform: translateX(16px);
    background: var(--paper);
}
.crm-notif-toggle:hover .crm-notif-toggle__track {
    border-color: var(--neutral-400);
}
.crm-notif-toggle input:focus-visible + .crm-notif-toggle__track {
    box-shadow: 0 0 0 3px var(--indigo-50);
    border-color: var(--indigo-600);
}

/* Form sections — pull-quote label + caption pattern */
.crm-notif-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.crm-notif-section__head {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.crm-notif-section__head .crm-dialog__label {
    margin: 0;
}
.crm-notif-section__hint {
    font-size: 12px;
    color: var(--neutral-500);
    line-height: 1.5;
}

/* Parsed CC preview — chips populate live as the operator types */
.crm-notif-cc-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
    animation: crm-disclosure-reveal var(--t-fast) var(--ease-out);
}
.crm-notif-cc-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--neutral-700);
    background: var(--paper-sunk);
    border: 1px solid var(--rule);
    border-radius: 999px;
    letter-spacing: 0.01em;
    line-height: 1.5;
}
.crm-notif-cc-chip--invalid {
    color: var(--coral-700);
    background: var(--coral-50);
    border-color: rgba(185, 28, 28, 0.25);
    text-decoration: line-through;
    text-decoration-color: rgba(185, 28, 28, 0.45);
}

/* Footer meta — last-updated timestamp, restrained mono */
.crm-notif-meta {
    margin: 4px 0 0;
    padding-top: 10px;
    border-top: 1px dashed var(--rule-soft);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--neutral-500);
}
.crm-notif-meta time {
    color: var(--neutral-700);
    font-variant-numeric: tabular-nums;
}

/* =====================================================
   TRIALS REDESIGN — extension only
   Spec: docs/superpowers/specs/2026-04-27-crm-trials-redesign-design.md

   Extension-only block; never modify or delete the rules above.
   Mockup-derived values (warm paper, accent green, engagement
   bars, ADAS purple) are hard-coded where existing design
   tokens don't have a 1:1 match — see the Task 2A report for
   the full token-mapping table.

   Naming convention: every mockup class is renamed with the
   `crm-` prefix and BEM-style modifiers to slot in alongside
   the existing CRM design system without colliding with the
   shared `.kpi`, `.tier-pill`, `.heatmap-row`, etc. names.
   ===================================================== */

/* ---------------------------------------------------------
   1. Scrollable panel pattern — sticky header, thin warm
      scrollbar, optional bottom-fade hint. Composes on top
      of the existing `.crm-panel` rules.
   --------------------------------------------------------- */
.crm-panel--scroll {
    display: flex;
    flex-direction: column;
    max-height: 360px;
    padding: 0;
}
.crm-panel--scroll .crm-panel__head {
    padding: 14px 20px 10px;
    border-bottom: 1px solid var(--rule-soft);
    background: var(--paper-raised);
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.crm-panel--scroll .crm-panel__body {
    overflow-y: auto;
    padding: 14px 20px 18px;
    scrollbar-width: thin;
    scrollbar-color: var(--rule) transparent;
}
.crm-panel--scroll .crm-panel__body::-webkit-scrollbar { width: 6px; }
.crm-panel--scroll .crm-panel__body::-webkit-scrollbar-track { background: transparent; }
.crm-panel--scroll .crm-panel__body::-webkit-scrollbar-thumb {
    background: var(--rule);
    border-radius: 999px;
}
.crm-panel--scroll .crm-panel__body::-webkit-scrollbar-thumb:hover {
    background: var(--neutral-300);
}

.crm-panel__count-pill {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    background: var(--rule-soft);
    color: var(--neutral-700);
    padding: 3px 8px;
    border-radius: 999px;
    font-weight: 700;
    font-family: var(--font-mono);
}

/* Bottom-fade indicator — apply alongside `.crm-panel__body`
   to hint that there's scroll content below. Uses paper-raised
   so it matches whichever surface the panel sits on. */
.crm-panel__fade { position: relative; }
.crm-panel__fade::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 32px;
    background: linear-gradient(180deg, rgba(255, 253, 248, 0), rgba(255, 253, 248, 0.95));
    pointer-events: none;
}

/* ---------------------------------------------------------
   2. KPI hero strip (4-up, hairline-divided cells). Lives
      directly under the masthead on /trials.
   --------------------------------------------------------- */
.crm-trial-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--rule);
    background: var(--paper-raised);
    margin-bottom: 28px;
    border-radius: 2px;
    overflow: hidden;
}
.crm-trial-kpi {
    padding: 18px 22px;
    border-right: 1px solid var(--rule);
    position: relative;
}
.crm-trial-kpi:last-child { border-right: none; }
.crm-trial-kpi__label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--neutral-500);
    font-weight: 600;
    margin-bottom: 6px;
    font-family: var(--font-mono);
}
.crm-trial-kpi__value {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.crm-trial-kpi__value sup {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-500);
    margin-left: 4px;
    letter-spacing: 0;
}
.crm-trial-kpi__trend {
    margin-top: 6px;
    font-size: 11px;
    color: var(--neutral-500);
    font-variant-numeric: tabular-nums;
}
.crm-trial-kpi__trend--up { color: #10B981; }
.crm-trial-kpi__trend--warn { color: #D97706; }

/* ---------------------------------------------------------
   3. Revenue utility — accent-green tabular-nums money. Three
      sizes for table cells, hero strips, and audit-bridge
      headlines respectively.
   --------------------------------------------------------- */
.crm-trial-revenue {
    color: #0F4C3A;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.crm-trial-revenue--lg {
    font-size: 22px;
    letter-spacing: -0.02em;
}
.crm-trial-revenue--xl {
    font-size: 32px;
    letter-spacing: -0.025em;
    line-height: 1.05;
}

/* ---------------------------------------------------------
   4. Impact-tier pills — used in the audit-log table cells
      to summarize finding counts per tier (ADAS / High / Mod /
      Low / Adv) plus a `--zero` muted variant.
   --------------------------------------------------------- */
.crm-tier-pill {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 2px;
    min-width: 22px;
    text-align: center;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    font-family: var(--font-mono);
}
.crm-tier-pill--adas { background: #F1E4F4; color: #6E2C7A; }
.crm-tier-pill--high { background: #FBE2E2; color: #8C1E1E; }
.crm-tier-pill--mod  { background: #FBEAD2; color: #8A4F0E; }
.crm-tier-pill--low  { background: #DDF1E6; color: #08573F; }
.crm-tier-pill--adv  { background: var(--rule-soft); color: var(--neutral-700); }
.crm-tier-pill--zero { background: transparent; color: var(--neutral-300); }
.crm-tier-pills {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

/* ---------------------------------------------------------
   Audit log table on /trials/{id}/audits — toolbar (search +
   filter chips + sort), row-detail typography (relative-time,
   vehicle stack, VIN tail, insurer caption), revenue progress
   bar, and the cross-subdomain "Open →" row action.
   --------------------------------------------------------- */
.crm-audit-table-wrap {
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
}
.crm-audit-table-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--rule);
    background: var(--paper-sunk);
    flex-wrap: wrap;
}
.crm-audit-table-tools__grow { flex: 1; }
.crm-audit-table-search {
    flex: 1;
    min-width: 220px;
    padding: 7px 12px;
    border: 1px solid var(--rule);
    background: var(--paper-raised);
    border-radius: 2px;
    font: inherit;
    font-size: 12px;
    color: var(--ink);
}
.crm-audit-table-search:focus {
    outline: none;
    border-color: var(--ink);
}
.crm-audit-table-sort {
    font-size: 12px;
    padding: 5px 10px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: var(--paper-raised);
    color: var(--ink);
    font-family: var(--font-body);
    cursor: pointer;
}
.crm-audit-cell-run {
    font-weight: 600;
    color: var(--ink);
}
.crm-audit-cell-run-abs {
    font-size: 11px;
    color: var(--neutral-500);
    margin-top: 2px;
}
.crm-audit-cell-vehicle {
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
}
.crm-audit-cell-vin {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--neutral-500);
    letter-spacing: 0.06em;
    margin-top: 2px;
}
.crm-audit-cell-insurer {
    font-size: 11px;
    color: var(--neutral-500);
    margin-top: 2px;
}
.crm-audit-cell-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.crm-rev-progress {
    width: 80px;
    height: 4px;
    background: var(--rule-soft);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 4px;
    margin-left: auto;
}
.crm-rev-progress__fill {
    height: 100%;
    background: #0F4C3A;
    border-radius: 999px;
}
.crm-row-action {
    color: var(--neutral-500);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
    text-decoration: none;
    font-family: var(--font-mono);
}
.crm-row-action:hover { color: var(--ink); }

/* ---------------------------------------------------------
   5. Trial-card status rails (Option A grid variant). Kept
      for future use even though Option B (table) is shipping.
      Apply on a positioned ancestor with a `::before` slot,
      or as an absolute-positioned 3px element.
   --------------------------------------------------------- */
.crm-trial-status-rail {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--neutral-300);
}
.crm-trial-status-rail--healthy   { background: #10B981; }
.crm-trial-status-rail--cooling   { background: #D97706; }
.crm-trial-status-rail--at-risk   { background: #DC2626; }
.crm-trial-status-rail--converted { background: #0F4C3A; }
.crm-trial-status-rail--issued    { background: var(--neutral-500); }

/* ---------------------------------------------------------
   6. Trial detail HERO strip — engagement ring on the left
      followed by 4 stat columns separated by hairline rules.
      The grid template comes from the mockup; consumers can
      swap in narrower fluid columns at smaller widths.
   --------------------------------------------------------- */
.crm-trial-hero {
    display: grid;
    grid-template-columns: 220px 1fr 1fr 1fr 1fr;
    align-items: stretch;
    border-bottom: 1px solid var(--rule);
    padding: 28px 0;
    gap: 0;
}
.crm-trial-hero__col {
    padding: 0 26px;
    border-right: 1px solid var(--rule-soft);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.crm-trial-hero__col:first-child { padding-left: 0; }
.crm-trial-hero__col:last-child {
    padding-right: 0;
    border-right: none;
}
.crm-trial-hero__label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--neutral-500);
    font-weight: 600;
    margin-bottom: 8px;
    font-family: var(--font-mono);
}
.crm-trial-hero__value {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.05;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.crm-trial-hero__value--accent { color: #0F4C3A; }
.crm-trial-hero__sub {
    font-size: 12px;
    color: var(--neutral-500);
    margin-top: 6px;
    line-height: 1.4;
}

/* /trials/{id}/audits hero variant — 4 columns, first wider for the lede number. */
.crm-trial-hero--audits {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
}
.crm-trial-hero__lede-num {
    font-size: 56px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    color: #0F4C3A;
    font-variant-numeric: tabular-nums;
}
.crm-trial-hero__lede-sub {
    margin-top: 10px;
    font-size: 13px;
    color: var(--neutral-500);
    line-height: 1.5;
}
.crm-trial-hero__lede-sub strong {
    color: var(--ink);
    font-weight: 600;
}

/* Engagement ring caption stack (centred over the SVG ring) */
.crm-trial-hero-ring {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 0 auto;
}
.crm-trial-hero-ring__caption {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.crm-trial-hero-ring__num {
    font-size: 48px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.crm-trial-hero-ring__label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--neutral-500);
    font-weight: 600;
    margin-top: 4px;
    font-family: var(--font-mono);
}
.crm-trial-hero-ring__band {
    margin-top: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #08573F;
}
.crm-trial-hero-ring__band--strong { color: #08573F; }
.crm-trial-hero-ring__band--soft   { color: #8A4F0E; }
.crm-trial-hero-ring__band--weak   { color: #8C1E1E; }

/* ---------------------------------------------------------
   7. Trial timeline — thin progress track with a pinned
      indicator and a 3-up legend underneath.
   --------------------------------------------------------- */
.crm-trial-timeline {
    position: relative;
    height: 6px;
    background: var(--rule-soft);
    border-radius: 999px;
    margin-top: 12px;
    overflow: visible;
}
.crm-trial-timeline__fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: linear-gradient(90deg, #10B981, #0F4C3A);
    border-radius: 999px;
}
.crm-trial-timeline__pin {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    background: var(--ink);
    border: 2px solid var(--paper-raised);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.crm-trial-timeline__legend {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 10px;
    color: var(--neutral-500);
    font-variant-numeric: tabular-nums;
}
.crm-trial-timeline__pos {
    color: var(--ink);
    font-weight: 600;
}

/* ---------------------------------------------------------
   8. Engagement heatmap (audits-by-day-of-week grid). Rows
      are <ol>/<ul>/<div> with a label + N cells.
   --------------------------------------------------------- */
.crm-heatmap-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.crm-heatmap-row {
    display: flex;
    gap: 3px;
    align-items: center;
}
.crm-heatmap-row__label {
    width: 28px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--neutral-500);
    font-weight: 600;
    font-family: var(--font-mono);
}
.crm-heatmap-cell {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    background: var(--rule-soft);
    flex: 0 0 14px;
}
.crm-heatmap-cell--0 { background: var(--rule-soft); }
.crm-heatmap-cell--1 { background: #DDF1E6; }
.crm-heatmap-cell--2 { background: #A7DEC0; }
.crm-heatmap-cell--3 { background: #41A881; }
.crm-heatmap-cell--4 { background: #0F4C3A; }
.crm-heatmap-foot {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    font-family: var(--font-mono);
}
.crm-heatmap-legend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.crm-heatmap-legend .crm-heatmap-cell {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
}

/* ---------------------------------------------------------
   9. Tier breakdown row (label + bar + count + revenue).
      Used in the analysis 3-up panel on /trials/{id}/audits.
   --------------------------------------------------------- */
.crm-trial-tier-row {
    display: grid;
    grid-template-columns: 80px 1fr 60px;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    font-size: 12px;
}
.crm-trial-tier-row + .crm-trial-tier-row {
    border-top: 1px dashed var(--rule-soft);
}
.crm-trial-tier-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--ink);
}
.crm-trial-tier-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--neutral-300);
    flex: 0 0 8px;
}
.crm-trial-tier-dot--adas { background: #6E2C7A; }
.crm-trial-tier-dot--high { background: #DC2626; }
.crm-trial-tier-dot--mod  { background: #D97706; }
.crm-trial-tier-dot--low  { background: #10B981; }
.crm-trial-tier-dot--adv  { background: var(--neutral-300); }
.crm-trial-tier-bar {
    height: 6px;
    background: var(--rule-soft);
    border-radius: 999px;
    overflow: hidden;
}
.crm-trial-tier-bar__fill {
    height: 100%;
    background: #0F4C3A;
    border-radius: 999px;
}
.crm-trial-tier-bar__fill--adas { background: #6E2C7A; }
.crm-trial-tier-bar__fill--high { background: #DC2626; }
.crm-trial-tier-bar__fill--mod  { background: #D97706; }
.crm-trial-tier-bar__fill--low  { background: #10B981; }
.crm-trial-tier-bar__fill--adv  { background: var(--neutral-300); }
.crm-trial-tier-num {
    text-align: right;
    font-weight: 600;
    color: var(--ink);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.crm-trial-tier-rev {
    text-align: right;
    font-size: 11px;
    color: #0F4C3A;
    font-weight: 700;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------
   10. Top revenue-driving rules list.
   --------------------------------------------------------- */
.crm-trial-top-rules {
    list-style: none;
    margin: 0;
    padding: 0;
}
.crm-trial-top-rules li {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--rule-soft);
    font-size: 13px;
    align-items: center;
}
.crm-trial-top-rules li:last-child { border-bottom: none; }
.crm-trial-top-rules__rank {
    font-size: 11px;
    color: var(--neutral-500);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-family: var(--font-mono);
}
.crm-trial-top-rules__name {
    font-weight: 500;
    line-height: 1.3;
    color: var(--ink);
}
.crm-trial-top-rules__meta {
    font-size: 11px;
    color: var(--neutral-500);
    margin-top: 2px;
}
.crm-trial-top-rules__rev {
    text-align: right;
}
.crm-trial-top-rules__rev-num {
    font-weight: 700;
    color: #0F4C3A;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.crm-trial-top-rules__rev-label {
    font-size: 10px;
    color: var(--neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    font-family: var(--font-mono);
}
.crm-trial-top-rules-empty {
    margin: 0;
    font-style: italic;
    color: var(--neutral-500);
    font-size: 13px;
    line-height: 1.5;
    padding: 8px 0;
}

/* ---------------------------------------------------------
   11. ROI strip — warm-paper gradient callout that frames the
       headline subscription-payback line on /trials/{id}/audits.
   --------------------------------------------------------- */
.crm-roi-strip {
    margin-top: 28px;
    padding: 20px 26px;
    background: linear-gradient(140deg, #FFFCF4 0%, #F2EBD9 100%);
    border: 1px solid var(--rule);
    border-radius: 3px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
}
.crm-roi-strip__title {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 4px;
    color: var(--ink);
    line-height: 1.3;
}
.crm-roi-strip__title--em {
    font-style: italic;
    color: #0F4C3A;
    font-weight: 700;
}
.crm-roi-strip__sub {
    margin: 0;
    color: var(--neutral-500);
    font-size: 13px;
    line-height: 1.5;
}

/* ---------------------------------------------------------
   12. Audit performance bridge — links the trial detail page
       to the audits deep-dive. Two visual states: skeleton (no
       audits yet) and empty (template w/ no data — same vibe,
       muted).
   --------------------------------------------------------- */
.crm-audit-bridge {
    margin-top: 28px;
    background: linear-gradient(140deg, #FFFCF4 0%, #F2EBD9 100%);
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: 22px 26px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
}
.crm-audit-bridge--skeleton {
    background: var(--paper-sunk);
    border-style: dashed;
}
.crm-audit-bridge--empty {
    background: var(--paper-raised);
    border-style: dashed;
    color: var(--neutral-500);
}
.crm-audit-bridge__eyebrow {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #0F4C3A;
    font-weight: 700;
    margin-bottom: 6px;
    font-family: var(--font-mono);
}
.crm-audit-bridge--skeleton .crm-audit-bridge__eyebrow,
.crm-audit-bridge--empty .crm-audit-bridge__eyebrow {
    color: var(--neutral-500);
}
.crm-audit-bridge__title {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 4px;
    color: var(--ink);
    line-height: 1.3;
}
.crm-audit-bridge__sub {
    margin: 0;
    color: var(--neutral-500);
    font-size: 13px;
    line-height: 1.5;
}
.crm-audit-bridge__sub strong {
    color: var(--ink);
    font-weight: 600;
}
.crm-audit-bridge__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ink);
    color: var(--paper);
    padding: 12px 20px;
    border-radius: 2px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid var(--ink);
    cursor: pointer;
    font-family: var(--font-body);
    transition: opacity var(--t-fast) var(--ease-out);
}
.crm-audit-bridge__cta:hover { opacity: 0.88; }

/* Mini stat row — 4-up cluster of left-rule stats inside the
   audit bridge. */
.crm-mini-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 14px 0 4px;
}
.crm-mini-stat {
    border-left: 2px solid var(--rule);
    padding: 0 0 0 14px;
}
.crm-mini-stat__num {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.crm-mini-stat__num--accent { color: #0F4C3A; }
.crm-mini-stat__label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--neutral-500);
    font-weight: 600;
    margin-top: 4px;
    font-family: var(--font-mono);
}

/* ---------------------------------------------------------
   13. /trials/{id}/audits 3-up analysis grid container.
   --------------------------------------------------------- */
.crm-trial-analysis {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 16px;
}

/* ---------------------------------------------------------
   14. Inline engagement bar (used in the trials table cell).
   --------------------------------------------------------- */
.crm-bar {
    height: 5px;
    background: var(--rule-soft);
    border-radius: 999px;
    overflow: hidden;
    width: 100px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}
.crm-bar__fill {
    display: block;
    height: 100%;
    background: #10B981;
    border-radius: 999px;
}
.crm-bar__fill--cooling { background: #D97706; }
.crm-bar__fill--risk    { background: #DC2626; }
.crm-bar__num {
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    display: inline-block;
    min-width: 22px;
}

/* ---------------------------------------------------------
   15. Section rule — hairline-divider headers with optional
       count pill on the right (Relationship / Analysis /
       Audit log).
   --------------------------------------------------------- */
.crm-section-rule {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 36px 0 18px;
}
.crm-section-rule__title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 700;
    color: var(--ink);
    font-family: var(--font-mono);
}
.crm-section-rule__line {
    flex: 1;
    height: 1px;
    background: var(--rule);
}
.crm-section-rule__count {
    font-size: 11px;
    color: var(--neutral-500);
    background: var(--rule-soft);
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 600;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------
   16. Chip — pill-style filter / toggle. Was missing from the
       existing CRM CSS (verified via grep before adding).
   --------------------------------------------------------- */
.crm-chip {
    font-size: 12px;
    padding: 5px 11px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: var(--paper-raised);
    cursor: pointer;
    font-weight: 500;
    color: var(--ink);
    font-family: var(--font-body);
    transition: border-color var(--t-fast) var(--ease-out),
                background-color var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.crm-chip:hover {
    border-color: var(--neutral-400);
}
.crm-chip--active {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}

/* ---------------------------------------------------------
   17. Filter bar chips modifier — extends `.crm-filter-bar`
       into the chip-row layout used at the top of the trials
       audit log. Kills MudInput styling for this variant.
   --------------------------------------------------------- */
.crm-filter-bar--chips {
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 14px !important;
}
.crm-filter-bar--chips .crm-chip {
    flex: 0 0 auto;
}
.crm-filter-bar--chips .crm-filter-search {
    flex: 1 1 200px;
    min-width: 200px;
}