/* ============================================================================
 * campaigns-redesign.css — Drip Campaigns redesign design system
 * ----------------------------------------------------------------------------
 * Ported verbatim from the approved prototype's <style> block
 * (design_handoff_drip_campaigns/prototype/drip-campaigns.html).
 *
 * SCOPING APPROACH
 * ----------------
 * The design tokens (the prototype's `:root` custom-property set) live on the
 * wrapper class `.campaigns-rd` rather than on the global `:root`, so they
 * never leak into / clash with the rest of the app's theming. The dark and
 * density variants are gated off the same wrapper:
 *     .campaigns-rd[data-theme="dark"]      (was [data-theme="dark"])
 *     .campaigns-rd[data-density="compact"] (was [data-density="compact"])
 *     .campaigns-rd[data-density="comfy"]   (was [data-density="comfy"])
 *
 * ALL utility classes (.btn, .pill, .seg, .inp, .wa-bubble, .rail-*, …) are
 * nested under `.campaigns-rd` as well, so they only apply inside the redesign
 * surface and cannot collide with similarly-named global classes.
 *
 * The redesign surface must therefore always be rendered inside
 *     <div className="campaigns-rd"> … </div>
 * (see campaigns-redesign-view.tsx, which also imports this file once).
 *
 * Font tokens (--ff / --ff-mono) reference 'Geist' / 'Geist Mono', supplied by
 * the @fontsource/geist + @fontsource/geist-mono packages imported alongside
 * this stylesheet in the route shell.
 * ========================================================================== */

/* ── TOKENS ────────────────────────────────────────────────────────────────
   Realigned onto the planner calendar's palette (calendar-grid.module.scss
   `.root`, mirrored by sequence-detail.module.scss). The campaigns surface and
   the calendar were two different products' worth of colour — a #1d8eff sky
   blue against the calendar's #6366F1 indigo — and the campaigns list links
   straight INTO the sequence detail, so the seam was visible in one click.
   Token NAMES are unchanged, so no component had to be edited for this.

   Every foreground here is measured against the surface it actually sits on,
   in BOTH themes (see the pill block below for why that mattered). */
.campaigns-rd {
  /* Brand. `--bt-blue` is a FILL that carries white text (primary button,
     focus ring), so it is the deeper indigo: white on #6366F1 is 4.47:1 and
     fails by a hair, white on #4F46E5 is 6.29:1. `--bt-blue-mark` is the
     lighter indigo, used only where the colour is a GRAPHIC (rings, glyphs). */
  --bt-blue:#4F46E5; --bt-blue-deep:#4338CA; --bt-blue-mark:#6366F1;
  --bt-blue-soft:#EEF0FE; --bt-blue-line:#C7CBF7;
  --on-brand:#FFFFFF;
  --bg:#F1F2F8; --bg-canvas:#F1F2F8; --surface:#FFFFFF; --surface-2:#FBFBFE; --surface-3:#F1F2F8;
  --line:#E6E7F0; --line-strong:#D5D7E5;
  /* The chip's own ground. A hair deeper than --surface-3 so a chip still
     reads as an object on a white card, where --surface-3 was 1.06:1 against
     the card and all but vanished. */
  --chip-surface:#ECEDF6;
  --ink:#171826; --ink-2:#3B3D52; --muted:#5A5D75; --muted-2:#64677E; --faint:#9A9DB2;
  /* Semantic marks. Deep enough to hold 4.5:1 as TEXT on the chip surface, so
     they stay legal even where a label (not just a glyph) takes the colour. */
  --escalate:#E11D48; --escalate-soft:#FEECF0; --escalate-line:#F7C6D2;
  --kbmiss:#B45309; --kbmiss-soft:#FDF3E3; --kbmiss-line:#EFD5AC;
  --success:#047857; --success-soft:#E5F5EF; --success-line:#B4DECB;
  --draft:#6D28D9; --draft-soft:#F0EAFC; --draft-line:#D5C6F5;
  /* WhatsApp green is a BRAND colour, not a semantic one — the bubble and the
     chat wall must stay WhatsApp's. `--wa-deep` is deepened only because it is
     also used as chip TEXT (#128c7e was 3.60:1 on --wa-soft; #0F766E is 4.90:1
     on the chip surface). */
  --wa:#25d366; --wa-deep:#0F766E; --wa-soft:#dcf8c6; --wa-line:#b9e29a;
  --row-h:56px; --pad-x:16px; --pad-y:12px; --radius:10px; --radius-sm:6px;
  --ff:'Geist', ui-sans-serif, system-ui, sans-serif;
  --ff-mono:'Geist Mono', ui-monospace, monospace;

  font-family: var(--ff); font-feature-settings: 'ss01','ss02','cv11';
  color: var(--ink); -webkit-font-smoothing: antialiased;
  font-size: 13.5px; line-height: 1.45;
}

/* Dark. The previous block redefined only the `-soft` BACKGROUNDS and left
   every semantic FOREGROUND at its light-tuned value, so the status chip — the
   most load-bearing object on a campaign row — failed 4.5:1 in every state
   (Scheduled 2.91:1, Running/Completed 2.70:1, Paused 3.32:1, Draft 2.89:1,
   Stopped 3.77:1, "stops on reply" 3.38:1). The marks now flip with the theme.
   Same neutrals as the calendar's dark block. */
.campaigns-rd[data-theme="dark"] {
  --bg:#101119; --bg-canvas:#101119; --surface:#15161F; --surface-2:#1A1B26; --surface-3:#21222E;
  --line:#262838; --line-strong:#33364A;
  --chip-surface:#262839;
  --ink:#ECEDF5; --ink-2:#C7C9DA; --muted:#A2A5BC; --muted-2:#8E91A8; --faint:#5E6178;
  /* The fill lightens, so its text must darken — white on #818CF8 is 2.98:1. */
  --bt-blue:#818CF8; --bt-blue-deep:#A5B4FC; --bt-blue-mark:#818CF8;
  --bt-blue-soft:#221F45; --bt-blue-line:#3A3775;
  --on-brand:#14151E;
  --escalate:#FB7185; --escalate-soft:#31161F; --escalate-line:#5B2836;
  --kbmiss:#FBBF24; --kbmiss-soft:#2E2410; --kbmiss-line:#57431A;
  --success:#34D399; --success-soft:#0F2A22; --success-line:#1E5040;
  --draft:#C4B5FD; --draft-soft:#221F45; --draft-line:#3E3673;
  --wa-deep:#5EEAD4; --wa-soft:#13321f; --wa-line:#1f5436;
}
/* ── TINTS ─────────────────────────────────────────────────────────────────
   The six audience/step tints were LITERAL light-mode hex in primitives.tsx
   (`TINTS`), read straight into inline styles. Nothing flipped them, so in dark
   mode every audience tile on the list and every step badge in the wizard —
   the four big badges the whole flow is built around — stayed a bright pastel
   block on a near-black page. They are tokens now, so the theme owns them.
   `--glow` is the tint's own soft drop, pre-mixed: the badge used to build one
   by string-concatenating an alpha onto the hex, which a var() cannot do.
   Measured foreground-on-tint (needs 4.5 for the label, 3.0 for the glyph):
     light  amber 5.26 · violet 5.93 · blue 6.56 · green 5.52 · rose 6.65 · cyan 6.46
     dark   amber 9.14 · violet 8.43 · blue 7.43 · green 7.95 · rose 8.78 · cyan 10.19 */
.campaigns-rd {
  --tint-amber-bg:#fff1cf;  --tint-amber-fg:#8b5a00;  --tint-amber-line:#fadc9b;  --tint-amber-glow:rgba(139,90,0,.22);
  --tint-violet-bg:#ede9fd; --tint-violet-fg:#5b3fc7; --tint-violet-line:#d6cef7; --tint-violet-glow:rgba(91,63,199,.22);
  --tint-blue-bg:#dceaff;   --tint-blue-fg:#0a4ea3;   --tint-blue-line:#bcd5ff;   --tint-blue-glow:rgba(10,78,163,.22);
  --tint-green-bg:#dcf2e3;  --tint-green-fg:#0e6c3e;  --tint-green-line:#b8e0ca;  --tint-green-glow:rgba(14,108,62,.22);
  --tint-rose-bg:#fee2e2;   --tint-rose-fg:#9a1d2c;   --tint-rose-line:#fcc8c5;   --tint-rose-glow:rgba(154,29,44,.22);
  --tint-cyan-bg:#d4f0f5;   --tint-cyan-fg:#0a5b6b;   --tint-cyan-line:#a8dce6;   --tint-cyan-glow:rgba(10,91,107,.22);
}
.campaigns-rd[data-theme="dark"] {
  --tint-amber-bg:#2E2410;  --tint-amber-fg:#FBBF24;  --tint-amber-line:#57431A;  --tint-amber-glow:rgba(251,191,36,.18);
  --tint-violet-bg:#221F45; --tint-violet-fg:#C4B5FD; --tint-violet-line:#3E3673; --tint-violet-glow:rgba(196,181,253,.18);
  --tint-blue-bg:#1A2440;   --tint-blue-fg:#93B4FC;   --tint-blue-line:#2F406B;   --tint-blue-glow:rgba(147,180,252,.18);
  --tint-green-bg:#0F2A22;  --tint-green-fg:#34D399;  --tint-green-line:#1E5040;  --tint-green-glow:rgba(52,211,153,.18);
  --tint-rose-bg:#31161F;   --tint-rose-fg:#FDA4AF;   --tint-rose-line:#5B2836;   --tint-rose-glow:rgba(253,164,175,.18);
  --tint-cyan-bg:#0E2A30;   --tint-cyan-fg:#5EEAD4;   --tint-cyan-line:#1E4B52;   --tint-cyan-glow:rgba(94,234,212,.18);
}

.campaigns-rd[data-density="compact"] { --row-h:48px; --pad-x:12px; --pad-y:8px; }
.campaigns-rd[data-density="comfy"]   { --row-h:64px; --pad-x:20px; --pad-y:16px; }

.campaigns-rd * { box-sizing: border-box; }

.campaigns-rd .num { font-family: var(--ff-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.campaigns-rd .mono { font-family: var(--ff-mono); }
.campaigns-rd button { font-family: inherit; }

.campaigns-rd .app { display: grid; grid-template-columns: 64px 1fr; height: 100vh; background: var(--bg); }
.campaigns-rd .col { min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }

/* ── STATE CHIP ────────────────────────────────────────────────────────────
   Was: a saturated tint fill + a matching coloured border + coloured text, one
   full set per state. Three problems, in order of severity.

   1. CONTRAST. Coloured text on a same-hue tint is the hardest pairing to keep
      legal, and it was not: measured, Stopped was 3.68:1 and Paused 3.74:1 in
      LIGHT, and every state failed in dark (2.70–3.77:1) because the dark block
      redefined the tints but not the inks. This is the status of a campaign —
      the one thing a person scans the list for.
   2. BUDGET. Five filled, bordered, saturated lozenges per screen is a lot of
      chroma × area for information that is one word long. The calendar rebuild
      settled this: colour goes in a small saturated MARK, not a fill.
   3. AMBIGUITY. The same lozenge shape was worn by the status (a fact), the
      filter pills (a control), the step count (a number) and the audience
      count. Four meanings, one shape.

   Now: one quiet neutral chip; the state is carried by the ICON's colour and
   by the word. `--chip-mark` is the only thing a variant sets. Measured, on
   --chip-surface (#ECEDF6 light / #262839 dark):
     text  --ink-2      9.12:1 light ·  8.85:1 dark   (needs 4.5)
           --ink       15.07:1 light · 12.46:1 dark
     mark  escalate     4.03:1 light ·  5.40:1 dark   (needs 3.0)
           kbmiss       4.31:1 light ·  8.71:1 dark
           success      4.70:1 light ·  7.56:1 dark
           draft        6.09:1 light ·  7.87:1 dark
           brand        3.83:1 light ·  4.87:1 dark
           wa           4.69:1 light ·  9.82:1 dark
   Every mark but `brand` clears the 4.5 TEXT bar as well as the 3.0 graphic
   bar, so a variant may safely colour its label too — `brand` is glyph-only.

   No border: the chip is separated from the card by its own surface, which is
   the house rule the calendar established. */
.campaigns-rd .pill {
  --chip-mark: var(--muted);
  display: inline-flex; align-items: center; gap: 5px;
  padding-block: 3px; padding-inline: 8px 10px;
  border-radius: 999px; border: 0;
  background: var(--chip-surface); color: var(--ink-2);
  font-size: 11.5px; font-weight: 500; line-height: 1.35; white-space: nowrap;
}
/* The mark. `flex: none` so a long label never squeezes the glyph. */
.campaigns-rd .pill > svg { color: var(--chip-mark); flex: none; }
.campaigns-rd .pill.escalate { --chip-mark: var(--escalate); }
.campaigns-rd .pill.kbmiss   { --chip-mark: var(--kbmiss); }
.campaigns-rd .pill.draft    { --chip-mark: var(--draft); }
.campaigns-rd .pill.success  { --chip-mark: var(--success); }
.campaigns-rd .pill.neutral  { --chip-mark: var(--muted-2); }
.campaigns-rd .pill.brand    { --chip-mark: var(--bt-blue-mark); }
.campaigns-rd .pill.wa       { --chip-mark: var(--wa-deep); }
/* The two states a person is actually scanning FOR — something is happening,
   or something stopped — get presence through WEIGHT and ink, not through more
   colour. This is the calendar's "give the live state more presence, not the
   fill back" applied to a list. */
.campaigns-rd .pill.success,
.campaigns-rd .pill.escalate { color: var(--ink); font-weight: 600; }

.campaigns-rd .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }

.campaigns-rd .btn { -webkit-appearance: none; appearance: none; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  padding: 7px 13px; border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; transition: background .12s, border-color .12s, color .12s; }
.campaigns-rd .btn:hover { background: var(--surface-2); border-color: var(--line-strong); }
.campaigns-rd .btn.primary { background: var(--bt-blue); color: var(--on-brand); border-color: var(--bt-blue); }
.campaigns-rd .btn.primary:hover { background: var(--bt-blue-deep); border-color: var(--bt-blue-deep); color: var(--on-brand); }
/* Disabled read as `--surface`-on-`--line-strong`, which inverts in dark to a
   near-black label on a mid-grey fill (1.4:1). A disabled control still has
   to be READ — it is usually the one the person is stuck on. */
.campaigns-rd .btn.primary:disabled { background: var(--surface-3); border-color: var(--line); color: var(--muted-2); cursor: not-allowed; opacity: 1; }
.campaigns-rd .btn.wa { background: var(--wa-deep); color: var(--on-brand); border-color: var(--wa-deep); }
.campaigns-rd .btn.ghost { background: transparent; border-color: transparent; }
.campaigns-rd .btn.ghost:hover { background: var(--surface-3); }
.campaigns-rd .btn.danger-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.campaigns-rd .btn.danger-ghost:hover { background: var(--escalate-soft); color: var(--escalate); }
.campaigns-rd .btn.sm { padding: 4px 9px; font-size: 11.5px; }
.campaigns-rd .btn.lg { padding: 10px 18px; font-size: 13.5px; }
.campaigns-rd .btn.icon { padding: 6px; width: 30px; height: 30px; justify-content: center; }
.campaigns-rd .btn.icon.sm { width: 26px; height: 26px; padding: 4px; }

/* Crisp bubble lift while the campaign wizard is open (body class set by wizard.tsx):
   raise it above the wizard footer so it never covers Continue/Launch. Specificity
   beats the #crisp-chatbox translateX rules crisp-service injects. */
body.bt-wizard-crisp-raised #crisp-chatbox { transform: translateY(-72px) !important; }

.campaigns-rd .kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 4px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 4px;
  background: var(--surface); font-family: var(--ff-mono); font-size: 10.5px; color: var(--muted); }

.campaigns-rd .inp { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid var(--line);
  border-radius: 8px; font-size: 13px; color: var(--ink); background: var(--surface-2);
  font-family: inherit; outline: none; transition: border-color .12s, background .12s; }
.campaigns-rd .inp:focus { border-color: var(--bt-blue); background: var(--surface); }
.campaigns-rd textarea.inp { resize: vertical; line-height: 1.5; }
.campaigns-rd .inp::placeholder { color: var(--faint); }

.campaigns-rd .seg { display: inline-flex; padding: 3px; background: var(--surface-3); border-radius: 9px; gap: 2px; border: 1px solid var(--line); }
.campaigns-rd .seg-opt { -webkit-appearance: none; appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: 6px 12px; border-radius: 6px; font-size: 12.5px; font-weight: 500; color: var(--muted);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; transition: all .12s; }
.campaigns-rd .seg-opt[data-active="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(11,18,32,.08); }

.campaigns-rd .choice { text-align: start; -webkit-appearance: none; appearance: none; cursor: pointer; width: 100%;
  border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 13px 14px;
  display: flex; gap: 12px; align-items: flex-start; transition: all .12s; }
.campaigns-rd .choice:hover { border-color: var(--line-strong); background: var(--surface-2); }
.campaigns-rd .choice[data-active="true"] { border-color: var(--bt-blue); background: var(--bt-blue-soft); box-shadow: 0 0 0 1px var(--bt-blue) inset; }

/* A native <select> drawing its own chevron: `background-position` has no
   logical form, so the arrow has to be mirrored explicitly or it lands on the
   text side of an RTL control. The reserved gutter itself is logical padding
   (set inline). */
.campaigns-rd .rd-select { background-position: right 10px center; }
.campaigns-rd[dir="rtl"] .rd-select { background-position: left 10px center; }

/* An arrow that means "onward" or "back" is a DIRECTION, not a picture: in
   Hebrew, onward is leftward, so an un-mirrored chevron on the wizard's Back /
   Continue pair points the reader at the step they just left. SVG has no
   logical form for this, so the codebase's existing answer (styles/rtl.css,
   MUI pagination) is a horizontal flip — applied here to the horizontal
   navigation glyphs only. Vertical ones (chevron-up/down, arrow-up/down, the
   step reorder controls) are direction-neutral and deliberately absent, as are
   send / reply, whose glyphs are read as objects rather than as directions. */
.campaigns-rd[dir="rtl"] .lucide-chevron-left,
.campaigns-rd[dir="rtl"] .lucide-chevron-right,
.campaigns-rd[dir="rtl"] .lucide-chevrons-left,
.campaigns-rd[dir="rtl"] .lucide-chevrons-right,
.campaigns-rd[dir="rtl"] .lucide-arrow-left,
.campaigns-rd[dir="rtl"] .lucide-arrow-right,
.campaigns-rd[dir="rtl"] .lucide-corner-down-left,
.campaigns-rd[dir="rtl"] .lucide-corner-down-right { transform: scaleX(-1); }

.campaigns-rd .scroll { overflow-y: auto; overflow-x: hidden; }
.campaigns-rd .scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.campaigns-rd .scroll::-webkit-scrollbar-track { background: transparent; }
.campaigns-rd .scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.campaigns-rd .scroll::-webkit-scrollbar-thumb:hover { background: var(--line-strong); }

.campaigns-rd .avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bt-blue-soft); color: var(--bt-blue-deep); font-size: 12px; font-weight: 600; flex-shrink: 0; border: 1px solid var(--bt-blue-line); }
.campaigns-rd .avatar.sm { width: 24px; height: 24px; font-size: 10.5px; }

.campaigns-rd :focus-visible { outline: 2px solid var(--bt-blue); outline-offset: 1px; border-radius: 4px; }

.campaigns-rd .scrim { position: fixed; inset: 0; background: rgba(11,18,32,.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity .18s; }
.campaigns-rd .scrim[data-open="true"] { opacity: 1; pointer-events: auto; }
.campaigns-rd .dialog { background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 24px 70px rgba(11,18,32,.3); overflow: hidden; display: flex; flex-direction: column;
  transform: translateY(10px) scale(.99); transition: transform .18s; }
.campaigns-rd .scrim[data-open="true"] .dialog { transform: none; }

/* WhatsApp message preview */
.campaigns-rd .wa-wall { background: #e5ddd5; background-image: linear-gradient(160deg, #e9e2da 0%, #ece5dd 100%); }
.campaigns-rd[data-theme="dark"] .wa-wall { background: #0a1014; background-image: linear-gradient(160deg, #0d161a 0%, #0a1014 100%); }
.campaigns-rd .wa-bubble { background: var(--wa-soft); border: 1px solid var(--wa-line); border-radius: 9px; border-top-left-radius: 3px;
  padding: 7px 10px 6px; font-size: 12.5px; color: #0b1220; line-height: 1.45; box-shadow: 0 1px .5px rgba(0,0,0,.13); position: relative; }
.campaigns-rd[data-theme="dark"] .wa-bubble { color: #e7ebf3; }

/* Sequence rail connector */
.campaigns-rd .rail-line { width: 2px; background: var(--bt-blue-line); flex: 1; min-height: 14px; }
.campaigns-rd .rail-node { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 2px solid var(--bt-blue-line); color: var(--bt-blue-deep); font-size: 11px; font-weight: 600; font-family: var(--ff-mono); }

@keyframes fadeIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.campaigns-rd .fade-in { animation: fadeIn .2s ease; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); max-height: 0; } to { opacity: 1; transform: none; max-height: 800px; } }
.campaigns-rd .slide-down { animation: slideDown .28s cubic-bezier(.2,.7,.3,1); }
@keyframes pop { 0% { transform: scale(.8); opacity: 0; } 60% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } }
.campaigns-rd .pop { animation: pop .3s ease; }
@keyframes spin { to { transform: rotate(360deg); } }

.campaigns-rd .btn, .campaigns-rd .seg-opt, .campaigns-rd .pill, .campaigns-rd .choice { -webkit-user-select: none; user-select: none; }
.campaigns-rd h1, .campaigns-rd h2, .campaigns-rd h3, .campaigns-rd h4, .campaigns-rd p { margin: 0; }

/* Skeleton shimmer — placeholder blocks while the campaigns/templates load
   (the list lazy-loads on scroll). Theme-aware via the surface tokens. */
@keyframes campaigns-rd-shimmer { from { background-position: -450px 0; } to { background-position: 450px 0; } }
.campaigns-rd .skel {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 900px 100%;
  animation: campaigns-rd-shimmer 1.5s infinite linear;
  border-radius: 6px;
}

/* Timing step — the date/time pickers wrap each field in a rounded pill that
   already carries the border (grey at rest, brand-blue on hover/edit). The
   INNER <input>, however, also paints its own square focus outline/ring, which
   reads as a second, rectangular border inside the rounded pill. Suppress the
   input's outline/border/ring so the only border shown is the pill's rounded
   one — never a new rectangular one. `!important` beats the Tailwind utilities. */
.campaigns-rd-schedule-picker input,
.campaigns-rd-schedule-picker input:focus,
.campaigns-rd-schedule-picker input:focus-visible {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}
/* The picker tints the pill border on hover/edit via an inline JS handler using
   its own (dark) primary color. Override it to the design's brand blue so the
   active pill matches the rest of the wizard (`--bt-blue`, same as the selected
   "Schedule for later" card). `!important` beats the inline style. */
.campaigns-rd-schedule-picker [class*="rounded-[20px]"]:hover,
.campaigns-rd-schedule-picker [class*="rounded-[20px]"]:focus-within {
  border-color: var(--bt-blue) !important;
}

/* Post-launch confirmation check (launch-check.tsx). Pure SVG + CSS so it
   renders reliably inside the extension's shadow-DOM overlay, where lottie-web
   left the paths empty. The disc pops, the tick draws itself in, and the
   sparkles fade+pop with a stagger. */
.bt-launch-check__disc {
  transform: scale(0.4);
  opacity: 0;
  animation: btLaunchDiscPop 0.42s cubic-bezier(0.2, 0.8, 0.3, 1) 0.02s forwards;
}
.bt-launch-check__tick {
  stroke-dasharray: 46;
  stroke-dashoffset: 46;
  animation: btLaunchTickDraw 0.45s cubic-bezier(0.65, 0, 0.35, 1) 0.28s forwards;
}
.bt-launch-check__sparkle {
  opacity: 0;
  transform: scale(0.2);
  animation: btLaunchSparkle 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
@keyframes btLaunchDiscPop {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes btLaunchTickDraw {
  to { stroke-dashoffset: 0; }
}
@keyframes btLaunchSparkle {
  0% { opacity: 0; transform: scale(0.2); }
  55% { opacity: 1; transform: scale(1.15); }
  100% { opacity: 0.9; transform: scale(1); }
}

/* ── Audiences list (audience-list.tsx) ────────────────────────────────────
   Was 40 individually bordered cards with an imperative JS hover that wrote
   borderColor/boxShadow onto the node on every mouseenter. Two problems: the
   house rule is "very few borders — separate by surface and space", and a list
   of N cards paints 4N borders; and a JS hover cannot be themed, cannot be
   keyboard-reached, and hard-coded rgba(11,18,32,.06) so it never adapted to
   dark.

   Now one surface with hairlines BETWEEN rows only (N-1 lines instead of 4N),
   and a real CSS :hover/:focus-visible. Measured, light / dark:
     ink   on surface        17.57 / 15.43   (the audience name)
     ink   on surface-2      17.01 / 14.65   (hovered)
     muted on surface         6.45 /  7.41   (the created date)
     ink-2 on chip-surface    9.12 /  8.85   (the count pill's label, via .pill)
     bt-blue-mark on chip-surface  3.83 / 4.87  (its glyph — a graphic, ≥3:1) */
.campaigns-rd .aud-list {
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
}
.campaigns-rd .aud-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; box-sizing: border-box;
  padding-block: 11px; padding-inline: 15px;
  background: transparent; border: 0; text-align: start;
  color: var(--ink); font: inherit; cursor: pointer;
  transition: background-color .12s ease;
}
/* The separator sits BETWEEN rows, so the first row has none and the list has
   no outer box. */
.campaigns-rd .aud-row + .aud-row { -webkit-border-before: 1px solid var(--line); border-block-start: 1px solid var(--line); }
.campaigns-rd .aud-row:hover { background: var(--surface-2); }
.campaigns-rd .aud-row:focus-visible { outline: 2px solid var(--bt-blue); outline-offset: -2px; }

/* One line of text per row. The name takes the space; the count and the date
   are marks at the trailing edge. */
.campaigns-rd .aud-name {
  flex: 1; min-width: 0;
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.campaigns-rd .aud-meta {
  flex: none; font-size: 12px; color: var(--muted); white-space: nowrap;
}
/* Below ~560px the date is the first thing to go: the name and the size are
   what a person scans for. */
@media (max-width: 560px) {
  .campaigns-rd .aud-meta { display: none; }
}


/*# sourceMappingURL=main-b20a3af3.4c66257c.css.map*/