/* Opportunities surface — May 2026 Pulse redesign.
 *
 * Owns every .opp-* selector for the Opportunities tab (card grid + rule
 * overview slide-out). Built against the tokens in oppo-tokens.css and
 * pulse-theme.css, against the components catalogued in
 * docs/design-system.md.
 *
 * Conventions:
 *   - All radii via --radius-* tokens (4 sm / 6 md / 8 lg).
 *   - All colours via --base-* / --foreground / --base-grey-* / etc.
 *     No hex literals except where Figma names a hue that doesn't sit
 *     in the palette (none in this file as of May 2026).
 *   - Card frame recipe is §5.1 verbatim: 5% white, 1 px Blue 100, 8 px,
 *     16 px padding, 16 px gap.
 *   - Tinted Badge / Solid Badge follow §5.5b / §5.6 — same recipe as
 *     the styleguide proofs.
 *
 * Figma reference: file tugZAqGA5nW8Aibyojoyfy
 *   - 159:3110 — card grid + filter bar
 *   - 324:19087 / 316:9383 — rule overview slide-out
 */

/* ============================================================
   0. Page content track (docs/design-system.md §3)
   ============================================================
   Cap content at the Pulse 1328 px content track and centre — mirrors
   oppo-reports.css and oppo-campaigns.css so the toolbar and grid sit
   in the canonical track rather than sprawling edge-to-edge in the
   flattened legacy <main>. The host class is stamped on #content-area
   by OpportunitiesView.mount() and (synchronously) by switchTab in
   app.js so the layout flips in the same frame as the tab click.
   ============================================================ */
#content-area.oppo-opportunities-host {
    padding: 0;
    box-sizing: border-box;
}
#content-area.oppo-opportunities-host > #opportunities-root {
    width: 100%;
    max-width: var(--layout-track-max, 1328px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);                           /* 16 px */
}

/* Page title — Figma 159:3121 / 159:3131. Pulse --type-h1 (600 24/32)
 * Grey 20. Rendered inside #opportunities-root by opportunities-view.js;
 * the 16 px gap below comes from the parent flex-column gap. */
.opp-page-title {
    margin: 0;
    font: var(--type-h1);                          /* 600 24/32 */
    color: var(--base-grey-20);                    /* #F3F4F6 */
    letter-spacing: 0;
}

/* ============================================================
   1. Filter / toolbar above the grid (Figma 159:4084)
   ============================================================
   Outer wrapper is a §5.1 card frame (5% white, Blue 100 border, 6 px,
   8 px padding). Inside:
     - 200 px fixed search with leading magnifier
     - dashed "Categories" / "Owners" quick-filter chips with leading + icon
     - right-aligned primary "New Opportunity" button with leading + icon
   ============================================================ */
.opp-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);                           /* 8 px — Figma */
    align-items: center;
    /* No margin-bottom — parent #opportunities-root is flex column with
     * 16 px gap, so the toolbar↔grid spacing is owned there. */
    padding: var(--space-2);                       /* 8 px — Figma */
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--base-blue-100);        /* #1C3D5E */
    border-radius: var(--radius-lg);               /* 8 px — §5.1 May-2026 */
}

/* Search field — 200 px fixed, leading magnifier inside the input frame. */
.opp-search-wrap {
    position: relative;
    flex: 0 0 200px;
    width: 200px;
}
.opp-search-icon {
    position: absolute;
    left: 12px; top: 50%;
    transform: translateY(-50%);
    width: 20px; height: 20px;
    color: var(--base-grey-40);                    /* #C4C4C4 */
    pointer-events: none;
}
.opp-search-icon svg { width: 20px; height: 20px; display: block; }

.opp-toolbar input#opp-search {
    width: 100%;
    height: 36px;
    background: transparent;
    border: 1px solid var(--base-grey-100);        /* #3C3C3A */
    border-radius: var(--radius-sm);               /* 4 px — Figma */
    color: var(--foreground);
    padding: 6px 12px 6px 40px;                    /* 12 + 20 icon + 8 gap */
    font: var(--type-body-l);                      /* 14/24 Medium — Figma */
    outline: none;
    box-shadow: 0 1px 1px rgba(10, 13, 18, 0.05);  /* drop-shadow xs */
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.opp-toolbar input#opp-search::placeholder { color: var(--base-grey-40); }
.opp-toolbar input#opp-search:focus {
    border-color: var(--base-blue-80);
    box-shadow: 0 0 0 3px rgba(74, 140, 202, 0.15);
}

/* Quick-filter chip — Figma 159:4090 / 159:4091. Recipe mirrors
 * .oppo-reports-chip verbatim (oppo-reports.css §"Quick Filter chip"):
 * dashed Grey 100 border, h36, p10/12, 6 px radius, gap 8, leading
 * lucide circle-plus icon + 12-Medium Grey 40 label. Active state
 * (.is-active) adds a vertical separator + Solid Badge value badge.
 *
 * Why a <button> + custom popover instead of <select>:
 * native <select> dropdown panels are drawn by the OS on macOS and
 * ignore CSS, so the design-system tokens never reach the dropdown
 * surface. Reports solved this with this chip-and-popover pattern;
 * we follow it here. */
.opp-chip-wrap { position: relative; display: inline-flex; }
.opp-chip {
    appearance: none;
    box-sizing: border-box;
    height: 36px;
    padding: 10px 12px;
    background: transparent;
    border: 1px dashed var(--base-grey-100);
    border-radius: var(--radius-md);               /* 6 px */
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);                           /* 8 px */
    cursor: pointer;
    white-space: nowrap;
    color: var(--base-grey-40);                    /* #C4C4C4 */
    font: var(--type-body-m);                      /* 500 12/16 */
    letter-spacing: 0;
    transition: border-color .15s ease, color .15s ease;
}
.opp-chip:hover { border-color: var(--base-grey-60); color: var(--base-grey-20); }
.opp-chip.is-active { color: var(--base-grey-20); }
.opp-chip:focus-visible {
    outline: none;
    border-style: solid;
    border-color: var(--base-blue-80);
}
.opp-chip-icon {
    width: 16px; height: 16px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
}
.opp-chip-icon svg { width: 16px; height: 16px; stroke: currentColor; }

/* Vertical separator between label and value badge — 1 px × 16 px Grey 100. */
.opp-chip-sep {
    width: 1px; height: 16px;
    background: var(--base-grey-100);
    flex: none;
}

/* Inline value badge — Solid Badge §5.6a inside the chip. */
.opp-chip-badge {
    background: var(--base-blue-100);              /* #1C3D5E */
    color: var(--base-grey-20);                    /* #F3F4F6 */
    border-radius: var(--radius-sm);               /* 4 px */
    padding: 2px 8px;
    font: var(--type-body-m);                      /* 500 12/16 */
    letter-spacing: 0;
    white-space: nowrap;
}

/* Popover — anchored under the chip. Recipe matches .oppo-reports-popover:
 * sidebar-tinted bg #15112E, dim border, 6 px radius, 8 px padding, shadow. */
.opp-chip-popover {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 50;
    min-width: 200px;
    max-width: 260px;
    max-height: 280px;
    overflow-y: auto;
    padding: 4px;
    background: var(--base-dark-bg-primary-tinted); /* #15112E */
    border: 1px solid var(--base-blue-100);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.opp-chip-popover-item {
    appearance: none;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font: var(--type-body-m);                      /* 500 12/16 */
    letter-spacing: 0;
    color: var(--base-grey-20);                    /* #F3F4F6 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.opp-chip-popover-item:hover { background: var(--base-dark-hover); }  /* #1E1845 */
.opp-chip-popover-item.is-selected {
    background: var(--base-blue-100);
    color: var(--base-grey-20);
    font-weight: 600;
}

/* Primary button — leading + icon, white SemiBold label. */
.opp-toolbar .btn-primary,
.opp-toolbar button.btn-primary {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);                           /* 8 px */
    height: 36px;
    padding: 6px 14px;
    background: var(--primary);
    color: var(--primary-foreground);
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);               /* 4 px */
    font: 600 14px/1 "Montserrat", system-ui, sans-serif;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.opp-toolbar .btn-primary svg { width: 16px; height: 16px; display: block; }
.opp-toolbar .btn-primary:hover,
.opp-toolbar button.btn-primary:hover {
    background: var(--base-blue-90);
    border-color: var(--base-blue-90);
}

/* ============================================================
   2. Cards grid
   ============================================================ */
.opp-grid {
    display: grid;
    /* Figma 159:3110 shows three cards across at a 1440 px content width.
     * 420 px minmax gives 3-up on ~1440 viewports and 4-up on ≥1700, with a
     * graceful drop to 2-up around 900 px. */
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: var(--space-4);                           /* 16 px */
}

/* Card frame — §5.1 verbatim (Figma 160:1117). */
.opp-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--base-blue-100);        /* #1C3D5E */
    border-radius: var(--radius-lg);               /* 8 px */
    padding: var(--space-4);                       /* 16 px */
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);                           /* 16 px between blocks */
    color: var(--foreground);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.opp-card:hover {
    border-color: var(--base-blue-80);
    box-shadow: 0 4px 14px rgba(74, 140, 202, 0.12);
}

/* Primary block — wraps badge-row + title + description with a 4 px inner
 * gap (Figma 160:1119). Without this wrapper they'd inherit the 16 px gap
 * from .opp-card. */
.opp-card-primary {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);                           /* 4 px — Figma */
}

.opp-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
}

/* Category — Tinted Badge §5.5b (Figma 160:1121). Blue 80 @ 30 % fill,
 * Blue 80 border, Blue 80 12-Medium label. Recipe lifted verbatim from
 * docs/design-system.md §5.5b — same as .ds-badge-tinted--blue in the
 * styleguide. */
.opp-category {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border: 1px solid var(--base-blue-80);
    background: color-mix(in srgb, var(--base-blue-80) 30%, transparent);
    border-radius: var(--radius-sm);               /* 4 px */
    color: var(--base-blue-80);
    font: var(--type-body-m);                      /* 500 12/16 */
}

/* Kebab trigger — bare 20 px "more-vertical" icon, no frame (Figma 316:6340).
 * Icon colour is Grey 40 per design-system §5.7 Ghost ("Tertiary action,
 * kebab" — text/icon = Grey 40) and the canonical Campaigns implementation
 * .oppo-camp-menu-trigger { color: #C4C4C4 }. Hover lifts to Grey 20. */
.opp-kebab-wrap { position: relative; flex: 0 0 auto; }
.opp-kebab-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; padding: 0;
    background: transparent;
    border: none;
    color: var(--base-grey-40);                    /* #C4C4C4 — §5.7 Ghost */
    cursor: pointer;
    transition: color 0.15s ease;
}
.opp-kebab-btn:hover { color: var(--base-grey-20); }
.opp-kebab-btn svg { width: 20px; height: 20px; display: block; }

/* Popover menu — mirrors the canonical .oppo-camp-menu-dropdown recipe:
 * page-bg fill, 1 px Blue 100 outline, 4 px radius, 4 px inner padding.
 * Items: Grey 20 12-Medium text, 6×10 padding, hover bg --base-dark-hover. */
.opp-kebab-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 160px;
    background: var(--base-dark-bg-primary);       /* #080323 */
    border: 1px solid var(--base-blue-100);
    border-radius: var(--radius-sm);               /* 4 px — matches Campaigns */
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
    padding: 4px;
    z-index: 30;
    display: none;
}
.opp-kebab-menu.is-open { display: block; }
.opp-kebab-menu.is-flip-left { right: auto; left: 0; }
.opp-kebab-menu button {
    display: flex; align-items: center; gap: var(--space-2);
    width: 100%; padding: 6px 10px;                /* matches .oppo-camp-menu-item */
    background: transparent;
    border: none;
    border-radius: 3px;
    color: var(--base-grey-20);                    /* #F3F4F6 — §5.7 popover items */
    font: var(--type-body-m);                      /* 500 12/16 */
    text-align: left;
    cursor: pointer;
}
.opp-kebab-menu button:hover { background: var(--base-dark-hover); }  /* #1E1845 */
.opp-kebab-menu button.is-danger { color: var(--base-red-40); }       /* #F8485E */
.opp-kebab-menu button.is-danger:hover { background: rgba(248, 72, 94, 0.12); }
.opp-kebab-menu button svg { width: 14px; height: 14px; flex: 0 0 14px; }

/* Title — Pulse H2 (600 18/28) per Figma 160:1123. Use the system token
 * rather than inlining the spec so the type ramp stays the single source
 * of truth (docs/design-system.md §2). */
.opp-card h3 {
    margin: 0;
    font: var(--type-h2);                          /* 600 18/28 */
    color: var(--base-grey-20);                    /* #F3F4F6 */
    width: 100%;
}
/* Description — 10 px Medium near-white, 16 px line-height (Figma 160:1124).
 * No line-clamp: the Figma node lets the paragraph wrap naturally to full
 * width. Body-S token is 11/14 so we inline the 10/16 spec (the only
 * surface in the system at this size). */
.opp-card p {
    margin: 0;
    font: 500 10px/16px "Montserrat", system-ui, sans-serif;
    color: var(--base-grey-20);
    width: 100%;
}

/* Dividers between content blocks. */
.opp-card-divider {
    height: 1px;
    background: var(--base-blue-100);
    margin: 0;
}

/* Labelled stat rows (Figma 160:1126). 16 px gap between rows. */
.opp-stats {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);                           /* 16 px — Figma */
}
.opp-stat-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);                           /* 8 px — Figma */
}
/* Label — fixed 82 px width so values align across rows, 12 SemiBold
 * Grey 20 (Figma 160:1129). */
.opp-stat-label {
    flex: 0 0 82px;
    width: 82px;
    font: var(--type-body-m-strong);               /* 600 12/16 */
    color: var(--base-grey-20);                    /* #F3F4F6 */
}
/* Value — Solid Badge §5.6a (Figma 160:1132). Blue 100 fill, no border,
 * Grey 20 12-Medium text. Same recipe for client counts and money totals
 * — they're both Solid Badge tokens in the Pulse system. */
.opp-stat-value {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: var(--base-blue-100);              /* #1C3D5E */
    border-radius: var(--radius-sm);
    color: var(--base-grey-20);                    /* #F3F4F6 */
    font: var(--type-body-m);                      /* 500 12/16 */
}

/* Footer — Pulse light-badge pattern + workflow tag + click affordance. */
.opp-card-footer {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.opp-card-footer .opp-footer-end { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-2); }

/* Dot-label segment — 8×8 frame containing a 6×6 inner dot in currentColor. */
.opp-dot-seg {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--base-grey-40);
    font: var(--type-body-m);
}
.opp-dot-seg .opp-dot-frame {
    width: 8px; height: 8px;
    display: inline-flex; align-items: center; justify-content: center;
}
.opp-dot-seg .opp-dot-frame::after {
    content: "";
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
}

/* Tone classes — applied to .opp-dot-seg directly. Text + dot inherit
 * the same colour via currentColor. Tones key off cached_status + age
 * thresholds from formatAge() in opportunities-view.js.
 *
 * Pulse uses Green 100 (#5AB891) for "fresh / ready" — NOT Apple green.
 * Apple green is reserved for non-card surfaces. The Figma reference for
 * the footer (160:1147 and 321:19019) shades dot+label `#5AB891`. */
/* Tone mapping per docs/design-system.md §1.4 + §1.2 (Greys table):
 *   fresh  → Green 100   "Success — Active dot"
 *   aging  → Yellow 100  "Warning, Pending/In Progress"
 *   old    → Grey 60     "Disabled / 'ended' status" (§1.2 line 67)
 *   never  → Grey 60     same — never-recalculated reads as ended
 * Red 40 is reserved for --destructive (delete/error banners) and was
 * misused here for "old"; old data is degraded, not destructive. */
.opp-dot-seg.tone-fresh    { color: var(--base-green-100); }   /* #5AB891 */
.opp-dot-seg.tone-aging    { color: var(--base-yellow-100); }  /* #FCC354 */
.opp-dot-seg.tone-old      { color: var(--base-grey-60); }     /* #757575 */
.opp-dot-seg.tone-never    { color: var(--base-grey-60); }     /* #757575 */
.opp-dot-seg.tone-computing{ color: var(--base-blue-80); }     /* #4A8CCA */
.opp-dot-seg.tone-stale    { color: var(--base-yellow-100); }
.opp-dot-seg.tone-ready    { color: var(--base-green-100); }
.opp-dot-seg.tone-info     { color: var(--base-blue-80); }
.opp-dot-seg.tone-muted    { color: var(--base-grey-40); }

/* ============================================================
   3. Rule overview — slide-out content (Figma 324:19087, 316:9383)
   The slide-out chrome (.oppo-slideout-*) is reused verbatim from
   oppo-campaigns.css. Only the content classes (.opp-ro-*) live here.
   ============================================================ */

/* When .opp-ro-card is rendered inside the slide-out it shouldn't
 * wrap the whole panel in its own border — the panel already has chrome. */
.oppo-slideout .opp-ro-card { background: transparent; border: 0; padding: 0; }

/* Re-point --foreground to Grey 20 within rule-overview surfaces (both the
 * slide-out and the in-page drilldown card). Without this, --foreground
 * falls back to its LIGHT default (Grey 100 / #3C3C3A) because the app
 * never adds the `.dark` class to <html>. All .opp-ro-* rules below that
 * read var(--foreground) — subtitles, section heads, group labels, var
 * labels, formula text, example text — would otherwise render as dark
 * grey on a dark navy panel. */
.oppo-slideout,
.opp-ro-card {
    --foreground: var(--base-grey-20);
}

/* The shared renderer wraps everything in .opp-ro-card. On the drilldown
 * (in-page reuse) we DO want the card frame. */
.opp-ro-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--base-blue-100);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}
.opp-ro-card.opp-ro-collapsed .opp-ro-body { display: none; }

/* Collapsible head (drilldown only). Slide-out renders .opp-ro-head-static. */
.opp-ro-head { margin-bottom: var(--space-3); }
.opp-ro-toggle {
    display: inline-flex; align-items: center; gap: var(--space-2);
    background: none; border: none; padding: 0;
    color: var(--foreground);
    font: var(--type-h3);
    cursor: pointer;
}
.opp-ro-head-static {
    display: flex; align-items: baseline; gap: var(--space-2);
    color: var(--foreground); font: var(--type-h3);
}
.opp-ro-caret { display: inline-block; width: 10px; color: var(--base-grey-40); }
.opp-ro-meta { color: var(--base-grey-40); font: var(--type-body-s); font-weight: 500; }

/* Body container. Vertical rhythm — section labels + groups + separators. */
.opp-ro-body { display: flex; flex-direction: column; gap: var(--space-4); }

/* Subtitle sentence — "Matches when all conditions in any group below hold". */
.opp-ro-subtitle {
    font: var(--type-body-m-strong);
    color: var(--foreground);
}

/* Section header — "Result per Match", "Variables Used". */
.opp-ro-section-head {
    font: var(--type-h3);
    color: var(--foreground);
    margin: 0;
}

/* Horizontal divider between section blocks. */
.opp-ro-divider {
    height: 1px;
    background: var(--base-blue-100);
    margin: var(--space-1) 0;
}

/* Groups list — stacked Group A / OR / Group B / OR / …. */
.opp-ro-groups { display: flex; flex-direction: column; gap: var(--space-3); }

/* "Group A" label above the bordered group card. */
.opp-ro-group-label {
    font: var(--type-h3);
    color: var(--foreground);
    margin: 0 0 var(--space-2);
}

/* One bordered card per group; rows inside are stacked with AND pills between. */
.opp-ro-group {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--base-blue-100);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* AND pill between rows in the same group. */
.opp-ro-and {
    display: flex; align-items: center; gap: var(--space-2);
    color: var(--base-grey-40);
    font: var(--type-body-m);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 0;
}
.opp-ro-and::before,
.opp-ro-and::after {
    content: "";
    flex: 1 1 0;
    height: 1px;
    background: var(--base-blue-100);
}

/* Single condition row — [tinted badge] [variable label, flex] [operator] [value]. */
.opp-ro-cond {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.opp-ro-tier {
    flex: 0 0 auto;
    display: inline-flex; align-items: center;
    padding: 2px 8px;
    border: 1px solid var(--base-blue-80);
    background: color-mix(in srgb, var(--base-blue-80) 30%, transparent);
    border-radius: var(--radius-sm);
    color: var(--base-blue-80);
    font: var(--type-body-m);
}
.opp-ro-var {
    flex: 1 1 0;
    min-width: 0;
    color: var(--foreground);
    font: var(--type-body-l);
}
.opp-ro-op {
    flex: 0 0 auto;
    color: var(--base-grey-40);
    font: var(--type-body-l);
}
.opp-ro-val {
    flex: 0 0 auto;
    /* Computed-value emphasis colour: --success / Green 100 (#5AB891).
     * Per docs/design-system.md §1.4 + §5.2 KPI delta — Apple green
     * (#67C85F) is reserved for chart series 1, never for status/value
     * readouts. Match var/op baseline (body-l 14/24) but SemiBold. */
    color: var(--base-green-100);
    font: 600 14px/24px "Montserrat", system-ui, sans-serif;
}

/* Scope sub-line (recs_* conditions only). */
.opp-ro-scope {
    flex: 1 0 100%;
    color: var(--base-grey-40);
    font: var(--type-body-m);
}

/* "OR" between groups — same recipe as AND but bolder weight. */
.opp-ro-or {
    display: flex; align-items: center; gap: var(--space-3);
    color: var(--base-grey-40);
    font: var(--type-body-m-strong);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0;
}
.opp-ro-or::before,
.opp-ro-or::after {
    content: "";
    flex: 1 1 0;
    height: 1px;
    background: var(--base-blue-100);
}

/* Formula container — Figma 321:11637. NOT a card mini-frame: matches the
 * §5.10 Input recipe (bg --base-dark-bg-primary, border Grey 100, radius
 * 4 px, padding 6/12, body-L 500 14/24, drop-shadow xs). The value text
 * is Green 100 — same emphasis colour as .opp-ro-val per Figma
 * (computed-result idiom). Old recipe used Card chrome + Grey 20
 * SemiBold — both wrong vs Figma. */
.opp-ro-formula {
    background: var(--base-dark-bg-primary);
    border: 1px solid var(--base-grey-100);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
    color: var(--base-green-100);
    font: var(--type-body-l);
    word-break: break-word;
}
.opp-ro-formula-empty {
    background: var(--base-dark-bg-primary);
    border: 1px solid var(--base-grey-100);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
    color: var(--base-grey-40);
    font: var(--type-body-l);
    font-style: italic;
}

/* Variables Used chip list — Figma 321:11899. Grey 40 tinted badge (NOT
 * the Blue 80 tier-badge recipe used inside conditions): bg Grey 40 @ 30%,
 * border Grey 40, radius 4 px, padding 2/8, body-m, white text. Gap
 * between pills is 4 px per the parent frame (321:11876/77/900). */
.opp-ro-vars { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.opp-ro-var-chip {
    display: inline-flex; align-items: center;
    padding: 2px 8px;
    border: 1px solid var(--base-grey-40);
    background: color-mix(in srgb, var(--base-grey-40) 30%, transparent);
    border-radius: var(--radius-sm);
    color: var(--base-grey-20);
    font: var(--type-body-m);
}
/* Unknown variant — same chrome, italic + Grey 40 text to read as
 * "unresolved". The italic alone is sufficient distinction now that the
 * known variant uses white text on the same tint. */
.opp-ro-var-unknown {
    color: var(--base-grey-40);
    font-style: italic;
}
.opp-ro-var-empty {
    color: var(--base-grey-40);
    font: var(--type-body-m);
    font-style: italic;
}

/* Empty state — opportunity with zero conditions. */
.opp-ro-empty {
    background: rgba(255, 255, 255, 0.05);
    border: 1px dashed var(--base-blue-100);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    color: var(--base-grey-40);
    font: var(--type-body-m);
}

/* Example rendered text section — drilldown only. */
.opp-ro-example {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--base-blue-100);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    color: var(--foreground);
    font: var(--type-body-m);
    font-style: italic;
}

/* Loading / error states inside the slide-out. */
.opp-ro-loading, .opp-ro-error {
    color: var(--base-grey-40);
    font: var(--type-body-m);
    padding: var(--space-4) 0;
}

/* ═══════════════════════════════════════════════════════════════════════
 * Drilldown — Figma 306:5395 (page) / 316:6561 (Rules Overview button)
 *
 * Class prefix .opp-dd-*. Page consists of:
 *   - .opp-dd-header (title + description + status badge / back button)
 *   - .opp-dd-banner.is-warn|.is-info (optional partial / first-fill notices)
 *   - .opp-dd-card (§5.1 frame) with toolbar + table + pagination
 *
 * The page is mounted inside #opportunities-root which is already capped at
 * 1328 px by the .oppo-opportunities-host content track (see §0 above).
 *
 * Note on --foreground: the app never adds the .dark class, so var(--foreground)
 * resolves to Grey 100 (dark) by default. We re-point it to Grey 20 inside the
 * page so descendants reading the token render correctly on the dark navy bg.
 * ═══════════════════════════════════════════════════════════════════════ */

.opp-dd-page {
    --foreground: var(--base-grey-20);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);                           /* 16 px */
    color: var(--foreground);
}

/* ── Page header ─────────────────────────────────────────────────────── */
.opp-dd-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
}
.opp-dd-header-meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);                           /* 8 px */
    min-width: 0;
    flex: 1 1 auto;
}
.opp-dd-title {
    margin: 0;
    color: var(--base-grey-20);
    font: var(--type-h1);                          /* 600 24/32 */
}
.opp-dd-sub {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);                           /* 12 px */
}
.opp-dd-desc {
    color: var(--base-grey-40);
    font: var(--type-body-l);                      /* 14/24 */
}

/* Total-estimated-result outline badge — Green 100 dot + body-m label.
 * Mirrors §5.5 Outlined Badge: 1 px Grey 100 border, transparent bg, 4 px
 * radius, 2/8 padding. Tone is conveyed entirely by the leading dot per §5.5. */
.opp-dd-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);                           /* 8 px */
    padding: 2px 8px;
    border: 1px solid var(--base-grey-100);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--base-grey-20);
    font: var(--type-body-m);                      /* 500 12/16 */
    white-space: nowrap;
}
.opp-dd-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--base-green-100);             /* §1.4 success */
    flex: 0 0 auto;
}
.opp-dd-badge.is-pending .opp-dd-badge-dot {
    background: var(--base-yellow-100);            /* §1.4 warning / pending */
}

/* Back-to-Opportunities — §5.7 Ghost button (solid Grey 60 border,
 * Grey 40 text, Grey 20 on hover). */
.opp-dd-back {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);                           /* 8 px */
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--base-grey-60);
    border-radius: var(--radius-sm);               /* 4 px */
    color: var(--base-grey-40);
    font: var(--type-body-l);                      /* 14/24 */
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease;
}
.opp-dd-back:hover {
    color: var(--base-grey-20);
    border-color: var(--base-grey-40);
}
.opp-dd-back svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

/* ── Banners ─────────────────────────────────────────────────────────── */
.opp-dd-banner {
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font: var(--type-body-m);                      /* 500 12/16 */
}
.opp-dd-banner.is-warn {
    border: 1px solid var(--base-yellow-100);
    background: color-mix(in srgb, var(--base-yellow-100) 20%, transparent);
    color: var(--base-grey-20);
}
.opp-dd-banner.is-info {
    border: 1px solid var(--base-blue-100);
    background: color-mix(in srgb, var(--base-blue-100) 30%, transparent);
    color: var(--base-grey-20);
}

/* ── Card frame — §5.1 ───────────────────────────────────────────────── */
.opp-dd-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--base-blue-100);
    border-radius: var(--radius-lg);               /* 8 px */
    padding: var(--space-4);                       /* 16 px */
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.opp-dd-section-title {
    margin: 0;
    color: var(--base-grey-20);
    font: var(--type-h3);                          /* 600 16/24 */
}

/* ── Toolbar ─────────────────────────────────────────────────────────── */
.opp-dd-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* Search field — §5.10 Input recipe, 200 px wide, leading search icon. */
.opp-dd-search {
    position: relative;
    flex: 0 0 auto;
    width: 240px;
    max-width: 100%;
}
.opp-dd-search input {
    width: 100%;
    padding: 6px 12px 6px 36px;                    /* room for leading icon */
    background: var(--base-dark-bg-primary);       /* #080323 */
    border: 1px solid var(--base-grey-100);        /* #3C3C3A */
    border-radius: var(--radius-sm);               /* 4 px */
    color: var(--base-grey-20);
    font: var(--type-body-l);                      /* 500 14/24 */
    outline: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);     /* drop-shadow xs */
    transition: border-color 120ms ease;
}
.opp-dd-search input::placeholder { color: var(--base-grey-40); }
.opp-dd-search input:focus { border-color: var(--base-blue-80); }
.opp-dd-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--base-grey-40);
    pointer-events: none;
    display: inline-flex;
}
.opp-dd-search-icon svg { width: 16px; height: 16px; }

/* Rules Overview button — §5.7 Ghost (solid Grey 60 border, Grey 40 text). */
.opp-dd-rules-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--base-grey-60);
    border-radius: var(--radius-sm);
    color: var(--base-grey-40);
    font: var(--type-body-l);
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease;
}
.opp-dd-rules-btn:hover {
    color: var(--base-grey-20);
    border-color: var(--base-grey-40);
}
.opp-dd-rules-btn svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

/* ── Table ───────────────────────────────────────────────────────────── */
/* Horizontal scroll container around the table — keeps long-content rows
 * (the nowrap "Rendered Opportunity" column especially) inside the card
 * rather than overflowing rightward. Pairs with the document-level
 * `overflow-x: clip` safety net in oppo-shell.css. */
.opp-dd-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.opp-dd-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--base-grey-20);
    font: var(--type-body-l);                      /* 14/24 */
}
.opp-dd-table thead th {
    background: var(--base-dark-bg-primary);       /* #080323 */
    color: var(--base-grey-20);
    font: var(--type-body-m-strong);               /* 600 12/16 */
    text-align: left;
    height: 40px;
    padding: 0 var(--space-3);
    border-top: 1px solid var(--base-blue-100);
    border-bottom: 1px solid var(--base-blue-100);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    vertical-align: middle;
}
.opp-dd-table thead th:first-child { border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); border-left: 1px solid var(--base-blue-100); }
.opp-dd-table thead th:last-child  { border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); border-right: 1px solid var(--base-blue-100); }
.opp-dd-table tbody td {
    height: 48px;
    padding: 8px var(--space-3);
    border-bottom: 1px solid var(--base-blue-100);
    color: var(--base-grey-20);
    font: var(--type-body-l);
    vertical-align: middle;
}
.opp-dd-table tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.03);
}

/* Sort indicator inside <th> labels. */
.opp-dd-sort {
    display: inline-flex;
    width: 14px;
    height: 14px;
    margin-left: 4px;
    vertical-align: -2px;
}
.opp-dd-sort svg { width: 14px; height: 14px; }
.opp-dd-sort-idle   { color: var(--base-grey-60); }
.opp-dd-sort-active { color: var(--base-grey-20); }

/* Company button — Blue-80 link-style with leading external-link icon. */
.opp-dd-company {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--base-blue-80);
    font: var(--type-body-l);
    cursor: pointer;
    text-align: left;
    transition: color 120ms ease;
}
.opp-dd-company:hover { color: var(--base-grey-20); }
.opp-dd-company svg { width: 14px; height: 14px; flex: 0 0 auto; }

.opp-dd-cell-text { white-space: nowrap; }
.opp-dd-cell-wrap { white-space: normal; }
.opp-dd-empty {
    color: var(--base-grey-40);
    font: var(--type-body-m);
    font-style: italic;
    text-align: center;
    padding: var(--space-4) 0;
}

/* ── Pagination — mirrors oppo-reports.js .oppo-reports-pg-* pattern ─── */
.opp-dd-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding-top: var(--space-2);
}
.opp-dd-pg-rows {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--base-grey-40);
    font: var(--type-body-m);
}
.opp-dd-pg-label { color: var(--base-grey-40); }
.opp-dd-pg-rows-select {
    background: var(--base-dark-bg-primary);
    border: 1px solid var(--base-grey-100);
    border-radius: var(--radius-sm);
    color: var(--base-grey-20);
    font: var(--type-body-m);
    padding: 4px 8px;
    cursor: pointer;
}
.opp-dd-pg-rows-select:focus { outline: none; border-color: var(--base-blue-80); }
.opp-dd-pg-count {
    color: var(--base-grey-40);
    font: var(--type-body-m);
}
.opp-dd-pg-pages {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.opp-dd-pg-btn {
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    background: transparent;
    border: 1px solid var(--base-grey-100);
    border-radius: var(--radius-sm);
    color: var(--base-grey-20);
    font: var(--type-body-m);
    cursor: pointer;
    transition: border-color 120ms ease, color 120ms ease;
}
.opp-dd-pg-btn:hover:not([disabled]) {
    border-color: var(--base-grey-40);
}
.opp-dd-pg-btn.is-active {
    border-color: var(--base-blue-90);
    color: var(--base-grey-20);
    background: var(--base-blue-100);
}
.opp-dd-pg-nav {
    color: var(--base-grey-40);
}
.opp-dd-pg-nav[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}
.opp-dd-pg-ellipsis {
    color: var(--base-grey-40);
    font: var(--type-body-m);
    padding: 0 4px;
    user-select: none;
}

/* ── Loading / error inside the page ─────────────────────────────────── */
.opp-dd-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-6) 0;
    color: var(--base-grey-40);
    font: var(--type-body-l);
    text-align: center;
}
.opp-dd-loading p { margin: 0; }
.opp-dd-loading-strong {
    color: var(--base-grey-20);
    font: var(--type-body-l);
    font-weight: 600;
}
.opp-dd-loading-elapsed {
    color: var(--base-grey-60);
    font: var(--type-body-m);
}
.opp-dd-spinner {
    width: 28px;
    height: 28px;
    color: var(--base-green-100);
    animation: opp-dd-spin 900ms linear infinite;
}
@keyframes opp-dd-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.opp-dd-error {
    color: var(--base-red-40);
    font: var(--type-body-l);
    padding: var(--space-4) 0;
}

/* ═══════════════════════════════════════════════════════════════════════
 * Company Overview — Back button (Figma 96:1461)
 *
 * Used in /js/company-summary-view.js for both return paths
 * ("Back to Metrics & Reports" / "Back to opportunity"). §5.7 Ghost button:
 * solid Grey 60 border, Grey 40 text (SemiBold 14), Grey 20 on hover,
 * 4 px radius, 6/14 padding, leading chevron-left icon.
 * ═══════════════════════════════════════════════════════════════════════ */
.company-back-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);                           /* 8 px */
    padding: 6px 14px;
    background: transparent;
    border: 1px solid var(--base-grey-60);         /* #757575 */
    border-radius: var(--radius-sm);               /* 4 px */
    color: var(--base-grey-40);                    /* #C4C4C4 */
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease;
}
.company-back-btn:hover {
    color: var(--base-grey-20);                    /* #F3F4F6 */
    border-color: var(--base-grey-40);
}
.company-back-btn svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════════
 * Wizard — Figma 160:2756 (page-level Create / Edit Opportunity).
 *
 * Replaces the previous fixed-overlay modal (#opp-wizard-modal in index.html).
 * Mounts inside #opportunities-root just like the cards grid + drilldown.
 *
 * Shape:
 *   .opp-wiz-page
 *     ├── .opp-wiz-page-title        H1 "New / Edit Opportunity"
 *     ├── .opp-wiz-stepper           Basics / Conditions / Results / Review
 *     └── .opp-wiz-page-card         §5.1 frame
 *           ├── .opp-wiz-page-body
 *           │     ├── .opp-wiz-main  numbered sections
 *           │     └── .opp-wiz-right Preview / Variables tabs
 *           └── .opp-wiz-page-foot   Cancel · Discard · Save Draft · Publish
 *
 * Every interior id from the legacy modal is preserved (wiz-name, wiz-cat,
 * wiz-desc, wiz-conditions, wiz-formula, wiz-preview, wiz-preview-refresh,
 * wiz-preview-stale, wiz-pal-search, wiz-pal-list, wiz-right-preview,
 * wiz-right-vars, wiz-save, wiz-discard, wiz-publish) so ConditionBuilder /
 * FormulaEditor / Preview / Palette modules need zero changes.
 * ═══════════════════════════════════════════════════════════════════════ */

.opp-wiz-page {
    --foreground: var(--base-grey-20);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);                           /* 16 px */
    color: var(--foreground);
    /* Width is owned by #opportunities-root (capped at 1076 px per Figma
     * 160:2756 / 160:2901 and centred with margin:auto) — same pattern as
     * every other Oppo page. The wizard just fills its parent. */
    /* Promote dark color-scheme to the wizard container so native `<select>`
     * popups inherit dark chrome from an ancestor (Chromium reads from the
     * containing block, not just the element). macOS Safari still draws the
     * popup with system colors — that requires replacing <select> with a
     * custom combobox to fully theme. */
    color-scheme: dark;
}

/* Title — Figma 160:2937. H1 600 24/32. */
.opp-wiz-page-title {
    margin: 0;
    color: var(--base-grey-20);
    font: var(--type-h1);
}

/* ── Stepper ─────────────────────────────────────────────────────────── */
/* 4 numbered nodes connected by hairlines. Active = solid Blue 80 disc,
 * Pending = 40 % opacity outlined disc, Done = solid Blue 80 with check.
 * Errored = solid Red 40 disc with white "!" glyph. */
.opp-wiz-stepper {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: 24px;
}
.opp-wiz-stepper-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    user-select: none;
}
.opp-wiz-stepper-num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid var(--base-grey-40);
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
}
.opp-wiz-stepper-label {
    color: var(--base-grey-20);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    white-space: nowrap;
}
.opp-wiz-stepper-item.is-pending { opacity: 0.4; }
.opp-wiz-stepper-item.is-current .opp-wiz-stepper-num {
    background: var(--base-blue-80);
    border-color: var(--base-blue-80);
    color: #ffffff;
}
.opp-wiz-stepper-item.is-done .opp-wiz-stepper-num {
    background: var(--base-blue-80);
    border-color: var(--base-blue-80);
    color: #ffffff;
}
.opp-wiz-stepper-item.is-err .opp-wiz-stepper-num {
    background: var(--base-red-40);
    border-color: var(--base-red-40);
    color: #ffffff;
}
.opp-wiz-stepper-line {
    flex: 1 1 0;
    min-width: 16px;
    height: 1px;
    background: var(--base-grey-100);
}

/* ── Card frame — §5.1 ───────────────────────────────────────────────── */
.opp-wiz-page-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--base-blue-100);
    border-radius: var(--radius-md);               /* 6 px per Figma */
    padding: var(--space-4);                       /* 16 px */
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.opp-wiz-page-body {
    display: grid;
    grid-template-columns: 1fr 316px;
    gap: var(--space-4);
    align-items: start;
}
.opp-wiz-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);                           /* 8 px */
    min-width: 0;
}

/* ── Section heading — numbered ordered-list look per Figma 160:3560 ──── */
.opp-wiz-sec { display: flex; flex-direction: column; gap: var(--space-2); }
.opp-wiz-sec-head {
    margin: 0;
    color: var(--base-grey-20);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    list-style: decimal inside;
}
.opp-wiz-sec-head::before {
    content: counter(opp-wiz-step) ". ";
    counter-increment: opp-wiz-step;
}
.opp-wiz-main { counter-reset: opp-wiz-step; }
.opp-wiz-sec-divider {
    border: 0;
    border-top: 1px solid var(--base-grey-100);
    margin: var(--space-2) 0;
}

/* ── Form primitives — §5.10 Input recipe ─────────────────────────────── */
.opp-wiz-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.opp-wiz-field-label {
    color: var(--base-grey-20);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
}
/* Form controls follow the design-system recipe in styleguide.html (.ds-input
 * /.ds-select /.ds-textarea): transparent bg, Grey 100 border, Grey 20 text,
 * Blue 80 focus ring. The previous version filled the bg with
 * --base-dark-bg-primary (#080323) which sat lighter than the card's 5%-white
 * overlay and read as a separate slate shade — wrong per design. Transparent
 * lets the card's own shade show through and keeps inputs visually identical
 * to the rest of the page system. */
.opp-wiz-input,
.opp-wiz-textarea,
.opp-wiz-select,
.opp-wiz-page input:not([type]):not(.opp-group-label),
.opp-wiz-page input[type="text"]:not(.opp-group-label),
.opp-wiz-page input[type="number"],
.opp-wiz-page input[type="search"],
.opp-wiz-page textarea,
.opp-wiz-page select {
    width: 100%;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--base-grey-100);
    border-radius: var(--radius-sm);
    color: var(--base-grey-20);
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    outline: none;
    box-shadow: var(--shadow-xs);
    box-sizing: border-box;
    font-style: normal;
    color-scheme: dark;            /* tell UA to render native form chrome dark */
}
/* Selects: strip the native arrow + chrome and draw our own caret per .ds-select. */
.opp-wiz-page select,
.opp-wiz-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c4c4c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}
/* Dropdown menu (UA-rendered) — give option rows the proper page bg. */
.opp-wiz-page select option {
    background: var(--base-dark-bg-primary);
    color: var(--base-grey-20);
}
.opp-wiz-page textarea { min-height: 60px; resize: vertical; font-family: 'Montserrat', sans-serif; }
.opp-wiz-input::placeholder,
.opp-wiz-textarea::placeholder,
.opp-wiz-page input::placeholder,
.opp-wiz-page textarea::placeholder { color: var(--base-grey-60); }
.opp-wiz-input:focus,
.opp-wiz-textarea:focus,
.opp-wiz-select:focus,
.opp-wiz-page input:focus,
.opp-wiz-page textarea:focus,
.opp-wiz-page select:focus {
    border-color: var(--base-blue-80);
    box-shadow: 0 0 0 3px rgba(74, 140, 202, 0.25);
}

/* ── Category radio row ─────────────────────────────────────────────── */
.opp-wiz-radio-row {
    display: flex;
    gap: 24px;
    align-items: center;
    flex-wrap: wrap;
}
.opp-wiz-radio {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    color: var(--base-grey-20);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
}
.opp-wiz-radio input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid var(--base-grey-40);
    background: transparent;
    margin: 4px;
    position: relative;
    cursor: pointer;
}
.opp-wiz-radio input[type="radio"]:checked {
    border-color: var(--base-blue-80);
}
.opp-wiz-radio input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--base-blue-80);
    transform: translate(-50%, -50%);
}

/* ── Right column — Preview / Variables tabs ─────────────────────────── */
.opp-wiz-right {
    border: 1px solid var(--base-blue-100);
    border-radius: var(--radius-md);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-self: stretch;
    min-width: 0;
}
.opp-wiz-right-tabs {
    display: flex;
    border-bottom: 1px solid var(--base-grey-40);
}
.opp-wiz-right-tab {
    flex: 1 0 0;
    padding: 2px 16px 6px;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--base-grey-60);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
    margin-bottom: -1px;            /* overlap the tab strip's bottom border */
}
.opp-wiz-right-tab.is-active {
    color: var(--base-blue-80);
    border-bottom-color: var(--base-blue-80);
}
.opp-wiz-right-body { display: flex; flex-direction: column; gap: 8px; }

/* ── Footer — Cancel · Discard · Save Draft · Publish ─────────────────── */
.opp-wiz-page-foot {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.opp-wiz-foot-mid {
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}
.opp-wiz-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 36px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--base-grey-60);
    border-radius: var(--radius-sm);
    color: var(--base-grey-40);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.opp-wiz-btn:hover:not([disabled]) {
    color: var(--base-grey-20);
    border-color: var(--base-grey-40);
}
.opp-wiz-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}
.opp-wiz-btn-primary {
    background: var(--base-blue-80);
    border-color: var(--base-blue-80);
    color: #ffffff;
    padding: 6px 14px;
}
.opp-wiz-btn-primary:hover:not([disabled]) {
    color: #ffffff;
    background: var(--base-blue-90);
    border-color: var(--base-blue-90);
}

/* ── Reskin the inner condition-builder / formula / preview / palette /
 *    variables-in-rule / combobox widgets to the Pulse dark theme.
 *    These shipped with the old modal under `#opp-wizard-modal …` selectors
 *    that no longer match anything now that the modal is gone. We re-scope
 *    them under `.opp-wiz-page …` so module markup keeps working.
 * ──────────────────────────────────────────────────────────────────── */

.opp-wiz-page .opp-group {
    /* Nested condition card — Figma 160:3562 has NO background fill on the
     * nested frame; it relies on the outer .opp-wiz-page-card (5%-white over
     * dark) to provide the wash through transparency. Setting a 5%-white bg
     * here would double-tint the inner card to ~10%-white and make it read
     * lighter than the parent. Border only. */
    background: transparent;
    border: 1px solid var(--base-blue-100);
    border-radius: var(--radius-md);
    padding: 12px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.opp-wiz-page .opp-group-head {
    color: var(--base-grey-40);
    font: var(--type-body-l);
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    text-transform: none;
    letter-spacing: 0;
}
.opp-wiz-page .opp-group-remove {
    background: transparent;
    border: 0;
    color: var(--base-grey-60);
    font-size: 12px;
    padding: 2px 6px;
    cursor: pointer;
}
.opp-wiz-page .opp-group-remove:hover { color: var(--base-red-40); }
.opp-wiz-page .opp-group-label {
    flex: 1 1 0;
    min-width: 160px;
    padding: 4px 8px;
    background: transparent;
    border: 1px solid var(--base-grey-100);
    border-radius: var(--radius-sm);
    color: var(--base-grey-20);
    font: var(--type-body-l);
    font-style: normal;
    color-scheme: dark;
}
.opp-wiz-page .opp-cond {
    display: grid;
    /* tier (combo) | variable (combo) | op (combo) | value | × */
    grid-template-columns: 200px minmax(0, 1fr) 110px minmax(0, 140px) 28px;
    gap: 8px;
    align-items: center;
    margin-bottom: 4px;
}
.opp-wiz-page .opp-cond > input {
    width: 100%;
    min-width: 0;
    padding: 6px 12px;
    font-size: 14px;
}
.opp-wiz-page .opp-cond .cond-remove {
    width: 28px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--base-grey-100);
    border-radius: var(--radius-sm);
    color: var(--base-grey-40);
    cursor: pointer;
}
.opp-wiz-page .opp-cond .cond-remove:hover { color: var(--base-red-40); border-color: var(--base-red-40); }

.opp-wiz-page .opp-rec-scope {
    margin: 2px 0 4px 208px;        /* tracks the new 200 px tier column */
    padding: 6px 10px;
    border-left: 2px solid var(--base-blue-100);
    color: var(--base-grey-40);
    font-size: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.opp-wiz-page .opp-rec-scope-label {
    font-size: 10px;
    color: var(--base-grey-40);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.opp-wiz-page .opp-rec-scope-group { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.opp-wiz-page .opp-rec-scope-group > span:first-child {
    font-size: 10.5px; color: var(--base-grey-40); margin-right: 2px;
}
.opp-wiz-page .opp-rec-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--base-grey-100);
    background: transparent;
    font-size: 12px;
    color: var(--base-grey-20);
    cursor: pointer;
}
.opp-wiz-page .opp-rec-chip.active {
    background: color-mix(in srgb, var(--base-blue-80) 20%, transparent);
    border-color: var(--base-blue-80);
}
.opp-wiz-page .opp-rec-chip .opp-rec-chip-rm {
    background: none; border: 0; color: inherit; font-size: 12px;
    padding: 0 0 0 2px; cursor: pointer;
}
.opp-wiz-page .opp-rec-chip .opp-rec-chip-rm:hover { color: var(--base-red-40); }
.opp-wiz-page .opp-rec-cat-add select {
    font-size: 11px;
    padding: 2px 6px;
    background: transparent;
    border: 1px dashed var(--base-grey-100);
    color: var(--base-grey-40);
    border-radius: var(--radius-sm);
    cursor: pointer;
    width: auto;
    /* The main select rule above sets the chevron caret + padding-right:36
     * which would overflow this compact "+ Add category" pill — override. */
    background-image: none;
    padding-right: 6px;
}

.opp-wiz-page .cond-add,
.opp-wiz-page .opp-or-add {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 1px solid var(--base-grey-60);
    color: var(--base-grey-40);
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 10px;
    font-weight: 600;
    line-height: 12px;
    width: auto;
}
.opp-wiz-page .opp-or-add { width: 100%; margin-top: 4px; justify-content: center; }
.opp-wiz-page .opp-or-sep {
    text-align: center;
    color: var(--base-grey-40);
    font-size: 10px;
    letter-spacing: 0.1em;
    margin: 8px 0;
    position: relative;
}
.opp-wiz-page .opp-or-sep::before,
.opp-wiz-page .opp-or-sep::after {
    content: ""; position: absolute; top: 50%;
    width: 44%; height: 1px; background: var(--base-grey-100);
}
.opp-wiz-page .opp-or-sep::before { left: 0; }
.opp-wiz-page .opp-or-sep::after  { right: 0; }

/* Combobox popup — re-themed dark. */
.opp-wiz-page .opp-combo { position: relative; width: 100%; min-width: 0; }
.opp-wiz-page .opp-combo-input { width: 100%; padding-right: 22px; font-style: normal; }
.opp-wiz-page .opp-combo-caret {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    color: var(--base-grey-40); pointer-events: none; font-size: 10px;
}
.opp-wiz-page .opp-combo-pop {
    position: absolute; top: calc(100% + 2px); left: 0; right: 0;
    background: var(--base-dark-bg-primary);
    border: 1px solid var(--base-grey-100);
    border-radius: var(--radius-sm);
    max-height: 240px;
    overflow-y: auto;
    z-index: 80;
    box-shadow: 0 12px 28px rgba(0,0,0,0.5);
}
.opp-wiz-page .opp-combo-group { padding: 5px 0; border-top: 1px solid var(--base-grey-100); }
.opp-wiz-page .opp-combo-group:first-child { border-top: none; }
.opp-wiz-page .opp-combo-group-label {
    font-size: 10px;
    color: var(--base-grey-40);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 10px;
}
.opp-wiz-page .opp-combo-opt {
    padding: 5px 10px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    color: var(--base-grey-20);
}
.opp-wiz-page .opp-combo-opt:hover,
.opp-wiz-page .opp-combo-opt.hl {
    background: color-mix(in srgb, var(--base-blue-80) 20%, transparent);
}
.opp-wiz-page .opp-combo-opt .opp-combo-hint {
    color: var(--base-grey-40);
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, monospace;
}
.opp-wiz-page .opp-combo-opt mark {
    background: color-mix(in srgb, var(--base-blue-80) 30%, transparent);
    color: var(--base-grey-20);
    padding: 0 1px;
    border-radius: 2px;
}
.opp-wiz-page .opp-combo-empty {
    padding: 8px 10px;
    color: var(--base-grey-40);
    font-size: 12px;
    font-style: italic;
}

/* Variables-in-rule card — Figma 161:1338. */
.opp-wiz-page .opp-vir-root {
    border: 1px solid var(--base-blue-100);
    border-radius: var(--radius-md);
    padding: 12px;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.opp-wiz-page .opp-vir-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.opp-wiz-page .opp-vir-head h4 {
    margin: 0;
    color: var(--base-grey-20);
    font: var(--type-body-m-strong);
    text-transform: none;
    letter-spacing: 0;
}
.opp-wiz-page .opp-vir-head .opp-vir-add {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 1px solid var(--base-grey-60);
    color: var(--base-grey-40);
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.opp-wiz-page .opp-vir-head .opp-vir-add:hover { color: var(--base-grey-20); border-color: var(--base-grey-40); }
.opp-wiz-page .opp-vir-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.opp-wiz-page .opp-vchip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    background: color-mix(in srgb, var(--base-grey-40) 30%, transparent);
    border: 1px solid var(--base-grey-40);
    border-radius: var(--radius-sm);
    color: var(--base-grey-20);
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
}
.opp-wiz-page .opp-vchip-origin {
    font-size: 10px;
    color: var(--base-grey-60);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: transparent;
    padding: 0;
}
.opp-wiz-page .opp-vchip.manual .opp-vchip-origin { color: var(--base-green-100); }
.opp-wiz-page .opp-vchip-rm {
    background: transparent;
    border: 0;
    color: var(--base-grey-60);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 0 2px;
}
.opp-wiz-page .opp-vchip.locked .opp-vchip-rm { visibility: hidden; }
.opp-wiz-page .opp-vchip-rm:hover { color: var(--base-red-40); }
.opp-wiz-page .opp-vir-picker {
    display: flex;
    gap: 6px;
    align-items: center;
}
.opp-wiz-page .opp-vir-picker .opp-combo { flex: 1; }
.opp-wiz-page .opp-vir-cancel {
    background: transparent;
    border: 1px solid var(--base-grey-60);
    color: var(--base-grey-40);
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

/* Formula editor */
.opp-wiz-page .opp-f-row { display: flex; flex-direction: column; gap: 4px; }
.opp-wiz-page .opp-f-label { display: flex; justify-content: space-between; align-items: center; }
.opp-wiz-page .opp-f-label label {
    margin: 0;
    color: var(--base-grey-20);
    font: var(--type-body-m-strong);
}
.opp-wiz-page .opp-f-badge {
    font-size: 10.5px;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.opp-wiz-page .opp-f-badge.ok      { background: color-mix(in srgb, var(--base-green-100) 20%, transparent); color: var(--base-green-100); }
.opp-wiz-page .opp-f-badge.err     { background: color-mix(in srgb, var(--base-red-40) 20%, transparent); color: var(--base-red-40); }
.opp-wiz-page .opp-f-badge.pending { background: color-mix(in srgb, var(--base-grey-60) 20%, transparent); color: var(--base-grey-40); }
.opp-wiz-page .opp-tpl-warn {
    font-size: 12px;
    color: var(--base-yellow-100);
    background: color-mix(in srgb, var(--base-yellow-100) 15%, transparent);
    border: 1px solid var(--base-yellow-100);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    margin-top: 6px;
}
.opp-wiz-page .opp-tpl-warn code {
    background: var(--base-dark-bg-primary);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 11px;
}

/* Preview right-column body */
.opp-wiz-page .opp-wiz-prev-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.opp-wiz-page .opp-wiz-prev-refresh {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 6px 8px;
    background: transparent;
    border: 1px solid var(--base-grey-60);
    color: var(--base-grey-40);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 10px;
    line-height: 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.opp-wiz-page .opp-wiz-prev-refresh:hover { color: var(--base-grey-20); border-color: var(--base-grey-40); }
.opp-wiz-page .opp-wiz-prev-stale {
    font-size: 10.5px;
    color: var(--base-yellow-100);
    background: color-mix(in srgb, var(--base-yellow-100) 15%, transparent);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}
.opp-wiz-page .opp-prev-summary {
    background: var(--base-dark-bg-primary);
    border: 1px solid var(--base-blue-100);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin-bottom: 10px;
    font-size: 12px;
    color: var(--base-grey-20);
}
.opp-wiz-page .opp-prev-summary b { color: var(--base-grey-20); font-size: 14px; }
.opp-wiz-page .opp-prev-summary-label {
    color: var(--base-grey-40);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.opp-wiz-page .opp-prev-row {
    background: var(--base-dark-bg-primary);
    border: 1px solid var(--base-blue-100);
    border-radius: var(--radius-sm);
    padding: 8px 11px;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--base-grey-20);
}
.opp-wiz-page .opp-prev-row-name { font-weight: 600; color: var(--base-grey-20); }
.opp-wiz-page .opp-prev-row-country { color: var(--base-grey-40); font-size: 11px; margin-left: 6px; font-weight: 400; }
.opp-wiz-page .opp-prev-row-text { color: var(--base-grey-40); margin-top: 3px; font-size: 11.5px; }
.opp-wiz-page .opp-prev-row-value { float: right; color: var(--base-green-100); font-weight: 600; }
.opp-wiz-page .opp-prev-note {
    font-size: 10px;
    color: var(--base-grey-20);
    margin-top: 6px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    line-height: 16px;
}

/* Variable palette inside the right column. Inherits the main input recipe
 * (transparent bg, Grey 100 border) from the §5.10 rule above — we only add
 * spacing tweaks here. */
.opp-wiz-page .opp-pal-search {
    margin-bottom: 10px;
}
.opp-wiz-page .opp-pal-tier { margin-bottom: 12px; }
.opp-wiz-page .opp-pal-tier-label {
    font-size: 10px;
    color: var(--base-grey-40);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 5px;
}
.opp-wiz-page .opp-pal-var {
    display: block !important;
    width: 100%;
    text-align: left !important;
    background: transparent;
    border: 1px solid var(--base-grey-100);
    color: var(--base-grey-20);
    padding: 5px 8px !important;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 12px !important;
    margin-bottom: 3px;
    font-family: ui-monospace, SFMono-Regular, monospace;
}
.opp-wiz-page .opp-pal-var:hover {
    border-color: var(--base-blue-80);
    background: color-mix(in srgb, var(--base-blue-80) 15%, transparent);
}
.opp-wiz-page .opp-pal-unit {
    float: right;
    color: var(--base-grey-40);
    font-size: 10.5px;
    font-family: inherit;
}

/* Wizard layout track — Figma 160:2756 / 160:2901 puts the wizard column
 * at 1076 px instead of the 1328 px the rest of the Opportunities tab uses.
 * Mirrors the centering pattern from line 39 (oppo-opportunities-host) so
 * the wizard centres the same way every other Oppo page does — the wizard
 * just swaps the host class on #content-area, never the layout strategy. */
#content-area.oppo-wizard-host {
    padding: 0;
    box-sizing: border-box;
}
#content-area.oppo-wizard-host > #opportunities-root {
    width: 100%;
    max-width: 1076px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}