/* ═══ Create messaging campaign ══════════════════════════════════════════════
   Not a takeover. This renders inside the page, so the sidebar and topbar stay
   where they were — the shell Create Voice Agent uses (.vc-setup in
   call-logs-table.css). Leaving is the topbar breadcrumb, which also carries
   the campaign's name once it has one.

   One header strip, not two. The earlier version stacked a name row above a
   stepper row, which put two horizontal rules and 100px of chrome above a
   four-field form. The name is a field in step 1 now — it is campaign data,
   not window furniture — and the strip carries the stepper and the actions
   the way the voice agent flow carries its tabs and CTA.

   The stepper is the shared .jc-stepper in .is-compact, so no step carries a
   summary line.
   ────────────────────────────────────────────────────────────────────────── */

/* The campaigns page wraps its content in a padded, gapped column. The flow
   is a full page view, so it takes the whole area. */
#gpWrap:has(> .mc){padding:0;gap:0}

.mc{
  /* The rail's geometry, declared once. The time column, the gap to the rail
     and the indent past the dot are used by the entries, by the rule between
     them and by the Add follow-up button — four places that have to agree, so
     they read the same three numbers instead of repeating them. */
  /* The rail hangs in the page's own gutter, so a message block starts on the
     same left edge as the heading above it and the button below it. It used to
     sit in a 132px time column, which indented every block 194px past
     everything else on the page — flush on the right, adrift on the left. */
  --tl-rail:20px;

  /* One measure for the whole page, centred. Everything reads it: a section
     heading, its controls, and the wide things — mode cards, mapping table,
     review columns. It was two widths for a while, 620 for the form and the
     full page for the wide blocks, and the result was a heading at 357 above
     a heading at 187. Both were centred and it still read as broken, because
     what you notice is the left edge, not the centre line. */
  --mc-col:720px;

  display:flex;flex-direction:column;
  flex:1 1 auto;min-height:0;
  background:var(--surface);
  font-family:'Inter',system-ui,sans-serif;
  opacity:0;transition:opacity .18s ease;
}
.mc.show{opacity:1}

/* ── Header strip ──
   The stepper gets the band to itself, and it reads the same container the
   content does — same 1040px cap, same 40px gutter — so the first dot starts
   exactly where the first heading below it starts.

   It used to share this row with Saved, Back and Continue, capped at 660px
   next to them. That gave the page two left edges 51px apart: the rail on the
   strip's own 24px gutter, the content in its column. Nothing lined up with
   anything, and no amount of styling the stepper was going to fix a
   container problem.

   The actions moved to a footer, which is where a forward action belongs and
   which also reads the same container, so Continue's right edge lands on the
   content's right edge. */
.mc-bar{
  flex:0 0 auto;
  border-bottom:1px solid var(--border);
  background:var(--surface);
}
/* The strip is chrome, so it runs the full width of the page and the actions
   land at the far right. The stepper does not stretch to meet them: given the
   whole 1200px it pulled its rules to 200px each, which is a lot of ruled
   line for four steps. It takes its natural width with a fixed connector
   instead, and the slack sits between it and the actions. */
.mc-bar-in{
  padding:13px 24px;
  display:flex;align-items:center;gap:28px;
}
.mc-bar .jc-stepper{flex:0 1 auto;min-width:0;max-width:none}
.mc-bar .jc-step-rule{flex:0 0 44px;min-width:0;margin:11px 12px 0}
.mc-bar-r{display:flex;align-items:center;gap:10px;flex:0 0 auto;margin-left:auto}

.mc-saved{
  font:500 12px/1 'Inter',sans-serif;color:var(--text-secondary);
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  margin-right:4px;
}
.mc-saved svg{width:13px;height:13px;color:var(--text-tertiary)}
/* Saving is the quieter of the two states: it is in progress, not a result. */
.mc-saved.is-saving{color:var(--text-tertiary)}
.jc-saved-spin{
  flex:0 0 12px;width:12px;height:12px;border-radius:50%;
  border:1.6px solid var(--border-strong);border-top-color:var(--brand-blue);
  animation:jc-saved-spin .6s linear infinite;
}
@keyframes jc-saved-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.jc-saved-spin{animation-duration:2.4s}}
@media (max-width:900px){
  .mc-bar-in{padding:12px 16px;gap:12px}
  .mc-saved{display:none}
}

/* ── Body ────────────────────────────────────────────────────────────────
   White, not a grey ground with white cards floating on it. That pairing is
   what made this read as a settings page from 2018: every field got a box,
   every box got a border and a title, and the eye had to cross four frames to
   reach three inputs.

   Sections stack instead of splitting: the section says what it is and why on
   one line, and its controls sit underneath it, separated from the next
   section by a hairline.

   That is the shape ten of the ten most-viewed settings screens on Mobbin
   share — Plain, Neon, Lindy, Flodesk, Navattic, Midday, User Interviews,
   Gorgias. A section title, a line of description, then fields stacked with
   their labels above them. Only two of the ten (Supabase and Loops) put the
   label in a column beside the control, which is what this used to do.

   Cards are the other half of that pattern and we are not taking them: this
   design system already decided against a grey ground with white panels on
   it, and hairlines do the same grouping without the frames. */
.mc-body{flex:1 1 auto;min-height:0;overflow-y:auto;background:var(--surface)}
/* The container IS the measure, so every child gets it without having to ask
   — sections, the message timeline, the mode cards, the mapping table. That
   is what one left edge means; centring each block separately only guarantees
   a shared centre, and the eye reads the edge. */
.mc-inner{max-width:calc(var(--mc-col) + 80px);margin:0 auto;padding:36px 40px 88px}

.mc-h{margin-bottom:28px}
.mc-h h2{margin:0;font:600 24px/1.2 'Inter',sans-serif;color:var(--text-primary);
  letter-spacing:-.02em}
.mc-h p{margin:6px 0 0;font:400 14px/1.55 'Inter',sans-serif;color:var(--text-secondary);
  max-width:62ch}

/* No rule between sections. One under the page heading is enough — a hairline
   above every question turned a three-question step into three ruled bands,
   which is the shape enterprise forms had in 2010. Linear, Notion and Vercel
   all separate settings by space or by a container, never by a page-width
   rule. 40px of space is where the eye stops needing a line. */
/* 22, against the 16 that .mc-sec-r puts between its own controls. At 12 the
   header sat closer to the first control than the controls sat to each other,
   so the title read as a label on the field under it rather than as the name
   of the group. */
.mc-sec{
  display:flex;flex-direction:column;
  gap:22px;padding:0;border-top:0;
  width:100%;max-width:var(--mc-col);margin-inline:auto;
}
.mc-sec + .mc-sec{margin-top:40px}
/* Controls fill the column. Capping them narrower and left-aligning them
   inside it is what left 400px of nothing down one side the first time. */
/* 14, not 15. Each of these sections holds exactly one control, so the title
   is a field label, not a heading — and at 15/600 primary against a 20/600
   primary question it was competing with the page heading instead of sitting
   under it. 20 -> 14 is a step you can see; 20 -> 15 was not. */
.mc-sec-l h3{margin:0;font:600 14px/1.4 'Inter',sans-serif;color:var(--text-primary)}
.mc-sec-l p{margin:4px 0 0;font:400 13px/1.5 'Inter',sans-serif;color:var(--text-secondary)}
/* Capped: a phone-number select 960px wide is not a better select. The cap
   holds the controls at a comfortable measure and lets the rest stay as air.
   .wide is for the things that genuinely want the page — the mode cards, the
   mapping table, the review columns. */
.mc-sec-r{display:flex;flex-direction:column;gap:16px;min-width:0}
.mc-sec-r.wide{max-width:none}
@media (max-width:900px){
  .mc-inner{padding:28px 24px 72px}
  .mc-sec{padding:22px 0}
}

/* Message cards and the review list want a readable measure, not the full
   1040px — a textarea a thousand pixels wide is not a nicer textarea. */
.mc-narrow{max-width:760px}

.mc-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:700px){.mc-grid2{grid-template-columns:1fr}}

/* ── Fields ── */
.mc-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.mc-f-l{font:500 13px/1.2 'Inter',sans-serif;color:var(--text-primary)}
/* Two greys, one rule: --text-secondary is prose you are meant to read —
   descriptions, hints, help under a control. --text-tertiary is for things
   that are not sentences: icons, placeholders, counters, separators, badges,
   empty-state italics. Hint text was on the tertiary grey, which put it a
   step below the description above it and made it read as disabled. */
.mc-f-h{font:400 13px/1.45 'Inter',sans-serif;color:var(--text-secondary)}
.mc-input,.mc-select{
  width:100%;height:40px;padding:0 12px;
  /* --border, not --border-strong. At #D0D5DD the field outline was darker
     than the hairlines dividing the sections around it, so the controls drew
     more attention than the structure holding them. #E4E7EB puts them level
     with everything else on the page. */
  border:1px solid var(--border);border-radius:9px;
  background:var(--surface);color:var(--text-primary);
  font:400 14px/1 'Inter',sans-serif;
  transition:border-color .14s,box-shadow .14s;
}
.mc-select{padding-right:34px;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center}
.mc-input:focus,.mc-select:focus{
  outline:0;border-color:var(--brand-blue);box-shadow:0 0 0 3px var(--brand-blue-soft)}
/* Inside a message block the field has no border of its own. The block is
   already the container; a bordered field inside a bordered block inside a
   bordered page is three nested outlines, and it was the innermost one that
   was heaviest — the hierarchy read backwards. The block takes the focus
   instead, via :focus-within, so there is still one clear indicator. */
.mc-ta{
  width:100%;min-height:84px;padding:0;
  /* No grip: on a borderless field the browser's resize handle reads as a
     stray mark. It grows with its content instead. */
  resize:none;overflow:hidden;
  border:0;border-radius:0;background:transparent;color:var(--text-primary);
  font:400 14px/1.6 'Inter',sans-serif;
}
.mc-ta:focus{outline:0}
.mc-ta::placeholder{color:var(--text-tertiary)}

/* ── {field} chips ──
   A <textarea> paints every glyph it owns in one colour, so a field inside
   it cannot be coloured. The way round it is two stacked boxes: a layer
   underneath holding the same text with the fields wrapped, and the field
   itself on top with a transparent background, so its glyphs land on the
   tint below.

   That only holds while the two boxes wrap identically. Every property that
   moves a glyph is declared once, for both — font, wrapping, padding — and
   the chip pays back its own horizontal padding in negative margin so it
   does not shift a single character. Change one of these and change both. */
.mc-comp{position:relative}
.mc-comp .mc-hl,
.mc-comp .mc-ta{
  font:400 14px/1.6 'Inter',sans-serif;
  letter-spacing:normal;
  padding:0;margin:0;border:0;
  white-space:pre-wrap;overflow-wrap:break-word;
}
.mc-comp .mc-hl{
  position:absolute;inset:0;z-index:0;
  color:transparent;pointer-events:none;
  overflow:hidden;
}
.mc-comp .mc-ta{position:relative;z-index:1;
  /* block, so the field's box starts at the top of .mc-comp — an inline
     textarea sits on a baseline and would drop a few pixels below the
     layer, which is exactly the kind of drift this pairing cannot take. */
  display:block}

.mc-var{
  border-radius:4px;
  padding:1px 2px;margin:0 -2px;
  background:rgba(0,76,230,.10);
}
/* Where the text is ours to paint — the collapsed one-liner and the review —
   the chip carries the accent colour as well as the tint. */
.mc-tl-peek .mc-var{color:var(--brand-blue)}

/* ── Segment vs upload ── */
.mc-source{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:620px){.mc-source{grid-template-columns:1fr}}
/* A choice card. Centred rather than top-aligned: the glyph, the two lines and
   the mark are one row, and flex-start left the mark riding above the text it
   belongs to. 16 and 12 rather than 14 and 11, which were on no scale. */
.mc-src{
  display:flex;align-items:center;gap:12px;padding:16px;cursor:pointer;
  border:1px solid var(--border);border-radius:12px;background:var(--surface);
  transition:border-color .14s,background-color .14s;
}
.mc-src-b{flex:1 1 auto;min-width:0}

/* The mark. A blue border alone asks you to compare two cards to see which is
   picked; a mark says it on the card itself. Empty ring when it is not, so
   the card does not change height on selection. */
.mc-src-r{
  flex:0 0 18px;width:18px;height:18px;border-radius:50%;
  display:inline-grid;place-items:center;
  border:1.5px solid var(--border-strong);background:var(--surface);
  color:transparent;
  transition:background-color .14s,border-color .14s,color .14s;
}
.mc-src-r svg{width:11px;height:11px;display:block}
.mc-src.on .mc-src-r{
  background:var(--brand-blue);border-color:var(--brand-blue);color:#FFFFFF;
}
@media (prefers-reduced-motion:reduce){.mc-src,.mc-src-r{transition:none}}
.mc-src:hover{border-color:var(--border-strong)}
/* The house treatment for a chosen card (.vc-voice-card.active, and
   .an-tpl-card.selected): a 1px accent border and a 10%-opacity ring, on the
   same surface as its unchosen sibling. Flooding the card with
   --brand-blue-soft as well made it read as disabled rather than chosen: a
   pale wash under grey body text is the shape of a greyed-out control, and it
   also swallowed the icon chip, which was painted in that very same colour.
   The chip carries the state instead, filled solid the way .an-met.selected
   fills its checkbox. */
.mc-src.on{border-color:var(--brand-blue)}
/* One treatment for both cards. --surface-alt is a hair off white and the
   chip all but disappeared on it; --surface-panel is the step that reads as a
   filled tile. Selection is the card's blue border — the chip does not need
   to say it a second time, and while it did, the selected card's icon was
   white-on-blue and the other was invisible, so the two never looked like two
   of the same kind of thing. Nothing changes on select now, so the transition
   goes with it. */
.mc-src-ic{
  flex:0 0 36px;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:var(--surface-panel);color:var(--text-secondary)}
.mc-src-ic svg{width:18px;height:18px}
.mc-src-ic svg{display:block}

/* Same for the dropdowns, scoped to this flow — .jc-dd is the app's dropdown
   and is used well outside it. Hover steps to --border-strong rather than to
   --text-tertiary, which was two steps darker than the resting state. */
.mc .jc-dd{border-color:var(--border)}
.mc .jc-dd:hover{border-color:var(--border-strong)}
body.theme-dark .mc .jc-dd{border-color:var(--border)}
.mc-src-t{display:block;font:600 14px/1.3 'Inter',sans-serif;color:var(--text-primary)}
.mc-src-s{display:block;margin-top:4px;font:400 13px/1.45 'Inter',sans-serif;color:var(--text-secondary)}

.mc-drop{
  border:1.5px dashed var(--border-strong);border-radius:11px;
  padding:30px 18px;text-align:center;background:var(--surface);
  display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;
  transition:border-color .14s,background-color .14s}
.mc-drop:hover{border-color:var(--brand-blue);background:var(--brand-blue-soft)}
.mc-drop svg{width:22px;height:22px;color:var(--text-tertiary)}
.mc-drop-t{display:block;font:500 14px/1.3 'Inter',sans-serif;color:var(--text-primary)}
.mc-drop-s{display:block;font:400 13px/1.45 'Inter',sans-serif;color:var(--text-secondary)}

/* The count that matters, stated once, where the eye lands after choosing. */
.mc-reach{
  display:flex;align-items:center;gap:9px;
  padding:11px 13px;border-radius:10px;background:var(--surface-alt);
  font:400 13px/1.4 'Inter',sans-serif;color:var(--text-secondary);
  font-variant-numeric:tabular-nums;
}
.mc-reach svg{width:15px;height:15px;flex:0 0 15px;color:var(--text-tertiary)}
.mc-reach b{color:var(--text-primary);font-weight:600}
/* A text action inside a row of text — the only button in the flow that is
   not a control with a box. */
.mc-link{
  appearance:none;border:0;background:transparent;padding:4px;border-radius:6px;
  cursor:pointer;color:var(--brand-blue);
  font:500 13px/1 'Inter',sans-serif;font-family:'Inter',sans-serif}
.mc-link:hover{text-decoration:underline;text-underline-offset:2px}
.mc-link:focus-visible{outline:2px solid var(--brand-blue);outline-offset:1px}
.mc-reach .mc-link{margin-left:auto;flex:0 0 auto;white-space:nowrap}

/* ═══ Step 2 · the sequence as a timeline ═════════════════════════════════
   Time column, rail, entry. The gap between two messages is a labelled
   stretch of the rail rather than an object with a panel of its own.

   The grid is one two-column grid for the whole sequence, so every dot sits
   on the same axis no matter how many messages there are — the rail cannot
   drift, because nothing is nested. */

.mc-tl{display:block;padding-left:calc(var(--tl-rail) + 10px)}

/* Insert-here: a plus that appears ON the rail between two numbered steps.
   The rail is the sequence made visible, so the point between 1 and 2 is
   literally where the new message would land — nothing else to read. */
.mc-gap-ins{
  position:absolute;left:calc(var(--tl-rail) * -1 + 0.75px);top:calc(50% - 11px);
  transform:translate(-50%,-50%);
  width:20px;height:20px;display:grid;place-items:center;
  border:1.5px solid var(--border-strong);border-radius:50%;
  background:var(--surface);color:var(--text-secondary);cursor:pointer;padding:0;
  opacity:0;transition:opacity .14s ease,color .14s ease,border-color .14s ease;
}
.mc-gap-ins svg{width:12px;height:12px;display:block}
.mc-tl-gap:hover .mc-gap-ins,.mc-gap-ins:focus-visible{opacity:1}
.mc-gap-ins:hover{color:var(--brand-blue);border-color:var(--brand-blue)}
@media (prefers-reduced-motion:reduce){.mc-gap-ins{transition:none}}
body.theme-dark .mc-gap-ins{background:var(--surface);
  border-color:var(--border-strong);color:var(--text-secondary)}



/* The rail is drawn by the entries, not by a separate element — an absolute
   line from under each dot to the bottom of its own row, which means it is
   continuous however tall the row grows. */
.mc-tl-axis{position:relative;padding-bottom:22px}
.mc-tl-axis::before{content:"";position:absolute;left:calc(var(--tl-rail) * -1);top:30px;bottom:0;
  width:1.5px;background:var(--border-strong);opacity:.55}
.mc-tl-axis:last-child{padding-bottom:0}
.mc-tl-axis:last-child::before{display:none}
.mc-tl-dot{
  /* (44 - 21) / 2 — centred on the header strip, not guessed. */
  position:absolute;left:calc((var(--tl-rail) + 10px) * -1);top:11.5px;
  width:21px;height:21px;border-radius:999px;display:grid;place-items:center;
  background:var(--brand-blue-soft);color:var(--brand-blue);
  font:600 11px/1 'Inter',sans-serif;font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 4px var(--surface);
}

.mc-tl-chev{flex:0 0 14px;width:14px;height:14px;margin-left:auto;
  color:var(--text-tertiary);display:inline-grid;place-items:center;
  transition:transform .16s ease}
.mc-tl-chev svg{width:14px;height:14px;display:block}
/* aria-expanded moved onto .mc-card-tog when the header gained a second
   button; the selector had stayed on the strip. */
.mc-card-tog[aria-expanded="false"] .mc-tl-chev{transform:rotate(-90deg)}
.mc-tl-t{flex:0 0 auto;font:600 14px/1.3 'Inter',sans-serif;color:var(--text-primary)}
/* The offset rides with the title now that there is no column for it. */
.mc-tl-off{flex:0 0 auto;font:400 12px/1 'Inter',sans-serif;color:var(--text-tertiary);
  font-variant-numeric:tabular-nums;padding-left:2px}
/* The collapsed one-liner: enough of the message to recognise it, and it is
   the reason ten of these still read at a glance. */
/* The collapsed message is the message — content, not a caption. */
.mc-tl-peek{
  flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:400 13px/1.4 'Inter',sans-serif;color:var(--text-secondary);
}
.mc-tl-n{margin-left:auto;flex:0 0 auto;
  font:400 12px/1 'Inter',sans-serif;color:var(--text-tertiary);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.mc-tl-n.over{color:#B54708}
.mc-tl-n.is-empty{color:var(--text-tertiary);opacity:.75}

/* Each message is a block, not a run of loose text.

   The step read as scattered because nothing said where a message started
   and stopped — a title, a field and three buttons sat directly on the page
   at three different greys. The block gives it an edge; the header strip
   gives it a second tone.

   Everything below is on a 4px scale and the header is a fixed 40px, because
   the rail dot and the time column both have to line up with it — three
   things centred on one axis is not something to eyeball. No drop shadow:
   the border and the tone carry the separation. */
.mc-card{
  border:1px solid var(--border);border-radius:10px;
  background:var(--surface);overflow:hidden;
  transition:border-color .16s ease;
}
.mc-card:hover{border-color:var(--border-strong)}
.mc-card.is-open{border-color:var(--border)}
.mc-card:focus-within{border-color:var(--brand-blue);box-shadow:0 0 0 3px var(--brand-blue-soft)}

.mc-card-h{
  display:flex;align-items:stretch;
  min-height:44px;
  background:var(--surface-alt);
  transition:background-color .14s ease;
}
.mc-card.is-open .mc-card-h{border-bottom:1px solid var(--border)}
.mc-card-h:hover{background:var(--surface-panel)}

/* The whole strip is the hit target except the icon, so the toggle stretches
   and the icon sits outside it — a button inside a button is not valid. */
.mc-card-tog{
  appearance:none;border:0;background:transparent;margin:0;
  flex:1 1 auto;min-width:0;
  display:flex;align-items:center;gap:8px;
  padding:0 10px 0 16px;cursor:pointer;
  font-family:'Inter',sans-serif;text-align:left;
}
.mc-card-tog:focus-visible{outline:2px solid var(--brand-blue);outline-offset:-2px;
  border-radius:9px 0 0 9px}

.mc-icon{
  appearance:none;flex:0 0 28px;width:28px;
  align-self:center;margin-right:6px;
  height:28px;border:0;border-radius:7px;background:transparent;
  color:var(--text-tertiary);display:inline-grid;place-items:center;cursor:pointer;
  transition:background-color .14s ease,color .14s ease;
}
.mc-icon svg{width:15px;height:15px;display:block}
.mc-icon:hover{background:var(--surface);color:#D92D20}
.mc-icon:focus-visible{outline:2px solid var(--brand-blue);outline-offset:-2px}

.mc-card-b{padding:16px}

/* The toolbar is the block's footer, not something floating under the field.
   The block reads header / message / tools — a tinted strip at each end and
   the message between them, which is also what stops the borderless composer
   from looking like text loose on the page. */
.mc-card-f{
  display:flex;align-items:center;gap:2px;
  min-height:42px;padding:0 16px 0 9px;
  border-top:1px solid var(--border);
  /* Deliberately not tinted. Two grey strips in one block banded it and made
     the message look like a filling between two headers — the border alone
     separates the toolbar from the field, which was all it needed. */
  background:transparent;
}

/* The gap: a stretch of rail with the rule written along it, aligned to the
   same left edge as the blocks above and below so the column reads straight. */
.mc-tl-gap{position:relative;padding:0 0 22px;min-height:40px;
  display:flex;align-items:center}
.mc-tl-gap::before{content:"";position:absolute;left:calc(var(--tl-rail) * -1);top:-22px;bottom:0;
  width:1.5px;background:var(--border-strong);opacity:.55}
.mc-gapc{display:inline-flex;align-items:baseline;gap:5px;flex-wrap:wrap;
  font:400 13px/1.5 'Inter',sans-serif;color:var(--text-secondary)}
.mc-gapt{color:var(--text-secondary)}
/* .mc-gapc is a flex row with a 5px gap, which put a space in front of
   the comma: "2 days , then message". Punctuation pays it back. */
.mc-gapt.is-tail{margin-left:-5px}
/* Matches the inline dropdowns beside it: a value in a sentence, not a field. */
.mc-wnum{
  /* Fixed and narrow: two digits' worth, so the dotted underline tracks the
     number rather than a field-width box. field-sizing:content would be neater
     but a browser without it renders a full-width input. */
  width:22px;padding:0 0 1px;text-align:center;
  border:0;border-bottom:1.5px dotted var(--border-strong);border-radius:0;
  background:transparent;color:var(--text-primary);
  font:600 13px/1.5 'Inter',sans-serif;font-variant-numeric:tabular-nums;
  transition:border-color .14s,color .14s}
.mc-wnum::-webkit-outer-spin-button,.mc-wnum::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.mc-wnum{-moz-appearance:textfield}
.mc-wnum:hover,.mc-wnum:focus{color:var(--brand-blue);border-bottom-color:var(--brand-blue)}
.mc-wnum:focus{outline:0}


/* Last on the bar and pushed to its far end: the toolbar is a row of things
   you press, and the count is the one thing you only read. */
.mc-count{margin-left:auto;padding-left:12px;cursor:default;
  font:400 12.5px/1.4 'Inter',sans-serif;font-variant-numeric:tabular-nums;
  color:var(--text-tertiary)}
.mc-count:focus-visible{outline:2px solid var(--brand-blue);outline-offset:2px;border-radius:4px}
.mc-count.over{color:#B54708}

/* Composer toolbar: borderless icon buttons, the way a message composer
   actually looks. Two outlined boxes and a labelled dropdown made a third
   row of chrome under a field that has no border of its own — the toolbar
   was heavier than the thing it belonged to. Names live in the tooltip,
   which renders above so it never covers the text you are writing. */
/* 32, so the composer's toolbar sits on the same height as every other
   button on the page. */
.mc-tool{
  appearance:none;flex:0 0 32px;width:32px;height:32px;
  border:0;border-radius:8px;background:transparent;
  color:var(--text-secondary);
  display:inline-grid;place-items:center;cursor:pointer;
  transition:background-color .14s ease,color .14s ease;
}
.mc-tool svg{width:16px;height:16px;display:block}
.mc-tool:hover{background:var(--surface-alt);color:var(--text-primary)}
.mc-tool.on{background:var(--brand-blue-soft);color:var(--brand-blue)}
.mc-tool:focus-visible{outline:2px solid var(--brand-blue);outline-offset:1px}

/* Icons are toggles; Rephrase does something. The rule between them says so,
   and it is the same divide the Conversations composer draws before
   Templates. */
.mc-tool-sep{
  flex:0 0 1px;width:1px;height:18px;margin:0 6px;background:var(--border);
}
/* Wider than the icon buttons because it carries a word — and inline-flex,
   because .mc-tool is inline-grid for centring a single glyph and would stack
   a glyph and a label instead of setting them side by side. */
/* The toolbar's labelled buttons. .mc-tool is inline-grid for centring a lone
   glyph and would stack a glyph and a word, so these set their own flow and
   take the shared button metrics. 10px rather than 12 of side padding: a
   toolbar packs tighter than a bar of actions, and at 12 the row ran past the
   character count. */
.mc-tool-w{
  flex:0 0 auto;width:auto;height:var(--btn-h);padding:0 10px;
  display:inline-flex;align-items:center;gap:6px;
  font:500 var(--btn-size)/1 'Inter',sans-serif;color:var(--text-secondary);
}
.mc-tool-w svg{width:15px;height:15px}
.mc-tool-w:hover{background:var(--surface-alt);color:var(--text-primary)}
/* The house AI gradient, on the glyph only. No "AI" in the label — the mark
   says it, and the button is named for what it does. */
.mc-spark{flex:0 0 15px;width:15px;height:15px;display:inline-grid;place-items:center}
.mc-spark svg{width:15px;height:15px;display:block;overflow:visible}
.mc-spark .s-main{fill:url(#jcSparkG)}
.mc-spark .s-mini{fill:#2D72FF}

body.theme-dark .mc-add,body.theme-dark .mc-rephrase{color:var(--text-secondary)}
body.theme-dark body.theme-dark .mc-rephrase:hover{color:var(--text-primary)}

/* No rule above it: the button sits on the block axis, directly under the
   blocks it makes, and the gap alone reads as the end of the sequence. A
   second divider under one already-bordered block was furniture. */
.mc-addrow{display:flex;align-items:center;gap:12px;margin-top:4px;
  /* The same inset the timeline carries for its rail, so the button starts on
     the message boxes' left edge rather than out in the rail's gutter. */
  padding-left:calc(var(--tl-rail) + 10px)}
/* Only what the component does not cover: no side padding, because it starts
   on the content column's left edge. Height, type, colour and gap all come
   from .jc-btn-text. */
.mc-add{padding:0}
.mc-add svg{width:15px;height:15px;flex:0 0 15px}
.mc-add-h{font:400 13px/1.4 'Inter',sans-serif;color:var(--text-secondary)}

@media (max-width:760px){
  .mc-tl{grid-template-columns:1fr;gap:0}
    }


/* The switch. Its dark overrides have always been here; the rule they
   override was not, so every .mc-sw on step 3 laid out at 0x0 and the three
   toggles were invisible. dialer-create.css uses it too. */
.mc-sw{
  position:relative;flex:0 0 34px;width:34px;height:20px;border-radius:999px;
  background:var(--border-strong);cursor:pointer;
  transition:background-color .16s ease;
}
.mc-sw::after{
  content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;
  border-radius:50%;background:#FFFFFF;
  transition:transform .16s ease;
}
.mc-sw.on{background:var(--brand-blue)}
.mc-sw.on::after{transform:translateX(14px)}
/* Locked: on, and not yours to turn off — opting out is not optional. */
.mc-sw.locked{background:var(--brand-blue);opacity:.5;cursor:default}
.mc-sw-l{font:500 13px/1.35 'Inter',sans-serif;color:var(--text-primary)}

/* Label on the left, switch on the right — you read what it is, then find
   the control that changes it, which is the order every settings page on
   Mobbin puts them in. Ordered rather than reordered in the markup, so the
   label still precedes its control for a screen reader. */

.mc-note{
  display:flex;align-items:flex-start;gap:9px;
  font:400 13px/1.45 'Inter',sans-serif;color:var(--text-secondary)}
.mc-note svg{width:14px;height:14px;flex:0 0 14px;margin-top:1px}

/* ═══ Step 4 ═════════════════════════════════════════════════════════════ */
/* The read-back, before an irreversible send.

   One list — label left, value right, hairline between — because that is one
   kind of content and it only needs one shape. The grid this replaces ran two
   facts to a line, so neither reading across nor down was right; the tile
   strip that replaced *that* set a two-character count in a 150px box and
   said the same things the rows below it were already saying.

   Cost sits last and larger. It is the only figure here that is not a
   restatement of a step you can go back to, and it is the one you are
   actually deciding on. */
.mc-sum{display:flex;flex-direction:column;gap:1px}
/* Space between the rows, not a rule under each one. Five hairlines in a
   five-row list is a line for every fact, which reads as a table of things
   to compare — and these are not compared, they are checked off. */
.mc-sum-r{display:flex;align-items:baseline;gap:12px;padding:8px 0}
.mc-sum-k{font:400 13px/1.4 'Inter',sans-serif;color:var(--text-secondary);flex:0 0 auto}
.mc-sum-v{margin-left:auto;text-align:right;font:500 13px/1.4 'Inter',sans-serif;
  color:var(--text-primary);font-variant-numeric:tabular-nums}
/* The total. A heavier rule above it and room to breathe, so the list reads
   as facts-then-consequence rather than as one more row. */
.mc-sum-r.total{
  align-items:flex-start;margin-top:6px;padding-top:16px;
  border-top:1px solid var(--border);
}
.mc-sum-r.total .mc-sum-k{font:500 13px/1.5 'Inter',sans-serif;color:var(--text-primary)}
.mc-sum-r.total .mc-sum-v{flex-direction:column;align-items:flex-end;gap:2px}
.mc-sum-r.total b{font:600 19px/1.2 'Inter',sans-serif;letter-spacing:-.015em;white-space:nowrap}
.mc-sum-sub{
  font:400 12px/1.35 'Inter',sans-serif;color:var(--text-tertiary);
  font-variant-numeric:tabular-nums;
}
body.theme-dark .mc-sum-r.total{border-top-color:var(--border-strong)}
body.theme-dark .mc-sum-r.total .mc-sum-k{color:var(--text-primary)}
body.theme-dark .mc-sum-sub{color:var(--text-tertiary)}
/* The value side carries a mark: the segment's own icon, a spreadsheet for an
   upload, the integration's logo, the flag on the number. */
.mc-sum-v{display:inline-flex;align-items:center;gap:7px;justify-content:flex-end}
.mc-sum-m{
  flex:0 0 18px;width:18px;height:18px;border-radius:5px;display:grid;place-items:center;
  background:var(--surface-panel);color:var(--text-secondary);
}
.mc-sum-m svg{width:11px;height:11px;display:block}
.mc-sum-m.is-logo{background:var(--surface);border:1px solid var(--border);overflow:hidden}
.mc-sum-m.is-logo img{width:12px;height:12px;object-fit:contain;display:block}
.mc-sum-f{font-size:13px;line-height:1}
.mc-sum-n{
  font:400 12px/1.35 'Inter',sans-serif;color:var(--text-tertiary);
  padding-left:7px;margin-left:1px;border-left:1px solid var(--border);
}
body.theme-dark .mc-sum-m{background:var(--surface-panel);color:var(--text-secondary)}
body.theme-dark .mc-sum-m.is-logo{background:#FFFFFF;border-color:var(--border-strong)}
body.theme-dark .mc-sum-n{color:var(--text-tertiary);border-left-color:var(--border)}

/* ── Dark ──
   Tokens carry the surfaces. Two things they cannot: the amber warning,
   whose colours are meaning rather than surface, and every label that
   theme-customiser.css flattens to inherit with `body.theme-dark span`
   at (0,1,2) — which outweighs a single class, so each has to say itself
   again. */
body.theme-dark .mc,body.theme-dark .mc-body,body.theme-dark .mc-bar{background:var(--surface)}
body.theme-dark .mc-count.over{color:#FDB022}
body.theme-dark .mc-sw::after{background:#F4F4F5}
body.theme-dark .mc-sw.locked{background:#25406E}

body.theme-dark .mc-h h2,body.theme-dark .mc-sec-l h3,
body.theme-dark .mc-f-l,body.theme-dark .mc-src-t,body.theme-dark .mc-sw-l,
body.theme-dark .mc-sum-v,body.theme-dark .mc-drop-t,
body.theme-dark .mc-reach b,body.theme-dark .mc-add{color:var(--text-primary)}

body.theme-dark .mc-h p,body.theme-dark .mc-sec-l p,body.theme-dark .mc-src-s,
body.theme-dark .mc-reach,body.theme-dark .mc-drop-s,body.theme-dark .mc-sum-k,
body.theme-dark .mc-count,body.theme-dark .mc-tl-n,
body.theme-dark .mc-tl-off,

body.theme-dark .mc-src-ic{background:var(--surface-panel)}
body.theme-dark .mc-drop{background:transparent}
body.theme-dark .mc-drop:hover{background:var(--brand-blue-soft)}
body.theme-dark .mc-reach{background:var(--surface-alt)}
body.theme-dark .mc-add:hover{background:var(--brand-blue-soft);color:var(--brand-blue)}

@media (prefers-reduced-motion:reduce){
  .mc,.mc-src,.mc-sw::after{transition:none}
}

/* Timeline in dark: the dot's halo is the page ground, so it has to follow
   the surface token or it punches a light hole in the rail. */
body.theme-dark .mc-tl-dot{box-shadow:0 0 0 4px var(--surface)}
body.theme-dark .mc-tl-t{color:var(--text-primary)}
/* The offset is supporting metadata, not a heading — secondary in both themes. */
body.theme-dark body.theme-dark .mc-gapt{color:var(--text-secondary)}
body.theme-dark .mc-tl-n.over,body.theme-dark .mc-count.over{color:#FDB022}
body.theme-dark .mc-add{background:var(--surface);color:var(--text-primary)}
body.theme-dark .mc-add:hover{
  background:var(--brand-blue-soft);color:var(--brand-blue)}


/* The block in dark: the header takes the recessed tone and the body the
   page surface, which is the same two-tone relationship inverted. */
body.theme-dark .mc-card{background:var(--surface);border-color:var(--border)}
body.theme-dark .mc-card:hover,body.theme-dark .mc-card.is-open{border-color:var(--border-strong)}
body.theme-dark .mc-icon:hover{background:var(--surface-panel);color:#F97066}
/* theme-customiser.css paints every textarea #23262C !important in dark,
   which is opaque and sits directly on top of the highlight layer — the
   chips were there and invisible. The composer's field is borderless by
   design in both themes, so it says transparent again, loudly enough. */
body.theme-dark .mc-comp .mc-ta{background:transparent !important}
body.theme-dark .mc-var{background:rgba(25,106,255,.22)}
body.theme-dark .mc-tl-peek .mc-var{color:#9BB8FF}
body.theme-dark .mc-card-h{background:var(--surface-alt)}
body.theme-dark .mc-card-f{background:transparent}
body.theme-dark .mc-card-h:hover{background:var(--surface-panel)}

/* Inside a block the small dropdown matches the buttons beside it. */
.mc-card-b .jc-dd{border-color:var(--border)}
.mc-card-b .jc-dd:hover{border-color:var(--border-strong)}
body.theme-dark .mc-card-b .jc-dd{border-color:var(--border)}

body.theme-dark .mc-tool:hover{background:var(--surface-panel);color:var(--text-primary)}
body.theme-dark .mc-tool.on{background:var(--brand-blue-soft);color:var(--brand-blue)}

/* The success wash the count pill sits on. tokens.css carries --success but
   no soft pair for it, and --brand-blue-soft is the wrong hue for a reach. */
.mc{--success-soft:#ECFDF3}
body.theme-dark .mc{--success-soft:#0E2E20}

/* ═══ Layout options ══════════════════════════════════════════════════════
   Two alternatives to the stacked layout, switchable in the flow so they can
   be judged in the real thing. Everything here is scoped to .mc-l-g / .mc-l-h
   — the dialer flow reuses .mc-sec and .mc-inner and must not move.

   Scale, so the numbers below are a lookup and not a guess:
     space  4  8  12  16  20  24  32  40
              4  a caption under its own line
              8  rows inside one card
             12  a thing attached to the control above it
             16  sibling to sibling inside a panel
             20  panel padding
             24  heading to the first panel
             32  bar to heading
             40  the gap between rail and content
     type   12  13  14  16  20  24  28
   ────────────────────────────────────────────────────────────────────────── */

/* ── g · grouped panels ───────────────────────────────────────────────────
   The question is the heading, and the panels under it are the parts of the
   answer. That is the one thing a panel layout buys over the stacked one:
   a hairline says "these are different", a frame says "these belong to that",
   and a step made of three unrelated asks reads better framed. */
/* A rule under the heading, and the heading a step smaller with it. At 20 it
   was carrying the separation on its own — the only thing telling you where
   the question stopped and the form started was that it was bigger than
   everything else. The hairline does that job, so the type does not have to:
   16 over 14 section titles reads as a lead-in rather than a banner. */
.mc-q{
  margin:0 auto 24px;padding-bottom:24px;width:100%;max-width:var(--mc-col);
  border-bottom:1px solid var(--border);
}
/* 20, not 28. Two steps down the scale: 28 is a page title, and this is not
   the page — the crumb names the task and the bar names the campaign above
   it. At 28 it was the loudest thing on screen and the panels it is meant to
   introduce read as an afterthought. 20 → 14 (panel title) → 13 (everything
   secondary) is the whole hierarchy this step needs. */
.mc-q h1{margin:0;font:600 16px/1.4 'Inter',sans-serif;color:var(--text-primary)}
.mc-q p{margin:4px 0 0;font:400 13px/1.5 'Inter',sans-serif;color:var(--text-secondary)}

/* ── Where the stepper sits ───────────────────────────────────────────────
   It had a band of its own between the bar and the content. That cost a third
   row of chrome: 180px above the first field, across three rows, with the
   flow's own bar row only 25% occupied — a close button and a name at one
   end, two buttons at the other, three quarters of the width empty between
   them. The stepper goes in that gap. One row instead of two, 180 down to
   126.

   .mc-bar-mid lies over the bar rather than sitting in its flex flow, and
   centres on it. Laid over rather than placed in, and that is the whole point
   of the technique: in the flex flow the stepper's centre would be the centre
   of whatever room is left after the close button, the name and the actions —
   so it would move every time the campaign was renamed. Over the bar, it is
   the centre of the page and it does not move at all.

   pointer-events off on the layer and back on for the stepper, so its empty
   half does not swallow clicks meant for the bar underneath. */
.mc-bar-mid{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.mc-bar-mid .jc-stepper{pointer-events:auto}

/* ── b · Bar ──────────────────────────────────────────────────────────────
   Same bar as the others now that everything centres; what is left of it is
   that it drops the campaign name. */
.mc-l-b .mc-inner{padding-top:32px}
/* Centred on the dot, not on the step: a step is a dot with a label beside or
   under it depending on the variant, so centring on the whole thing rides
   low. The compact dot is 22px, so its middle is 11 from the top and a 16px
   chevron wants 11 - 8 = 3 above it. Measured: both centres land on 153. */
.mc-step-sep{
  flex:0 0 auto;align-self:flex-start;
  width:16px;height:16px;margin:3px 8px 0;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--text-tertiary);
}
.mc-step-sep svg{width:16px;height:16px;display:block;transform:rotate(-90deg)}

/* Panels want something to sit on, or the border is doing all the work and
   the page reads as three outlines on white. This is the one place the design
   system's "no grey ground with white cards" position is set aside, because
   framing the groups is the entire point of the option. */
.mc-l-g .mc-body{background:var(--surface-alt)}


/* 36 is not on the scale. */
.mc-l-now .mc-inner,.mc-l-g .mc-inner{padding-top:32px}

/* The section keeps its markup and gives up its hairline: the border moves
   from the top edge to all four, and the padding from the section to the two
   halves. Header and body share one ground — a tint on the header as well as
   a rule was two signals for one boundary, and it made every panel read as a
   title bar with a form bolted underneath. */
.mc-l-g .mc-sec{
  border-top:0;padding:0;gap:0;
  border:1px solid var(--border);border-radius:10px;
  background:var(--surface);overflow:hidden;
}
.mc-l-g .mc-sec + .mc-sec{margin-top:16px}
.mc-l-g .mc-sec{padding:0}
/* No rule under the header. Counting inward from the page edge, Panels was
   crossing six strokes to reach one input: the bar's rule, the band's rule,
   the panel border, this header rule, the source card's border, the field's
   own border. Four of those are the component doing its job; two were the
   layout repeating itself.

   This one is the most redundant of them — it divides a title from the
   control that title names. They are one thing. The panel border already says
   where the group starts and stops, and 16px of space says which line leads.

   Header and body share one 20px gutter and stack: 16 above the title, 4 to
   its description, 12 down to the control, 20 at the foot. */
.mc-l-g .mc-sec-l{
  display:flex;align-items:baseline;column-gap:12px;row-gap:4px;flex-wrap:wrap;
  padding:16px 20px 0;
}
/* 15px was sized to lead a whole section of the page; leading a panel it is
   one step down, level with the labels inside it. */
.mc-l-g .mc-sec-l h3{font:600 14px/1.35 'Inter',sans-serif}
/* The description belongs to the title, so 4px — the caption step. It was
   taking the 12px column gap, which is the "attached to the control below"
   step and made the header 80px tall for one line of input. */
.mc-l-g .mc-sec-l p{margin:0;flex:1 1 100%}
.mc-l-g .mc-sec-r{padding:12px 20px 20px}

/* The count reads against the header, which is the only place on the panel
   where a right edge means anything. Green because it is a reach, and a reach
   that resolved is the one number on this step that can be wrong — grey would
   have made it furniture. */

/* ── h · left rail with a running summary ─────────────────────────────────
   The stepper goes vertical, which buys the room to say what each step is —
   the thing a horizontal stepper has no space for. The summary underneath is
   the actual argument for this layout: the two numbers the campaign is about
   stay on screen for all four steps.

   The column is 720 and the rail 280, so the content measure is identical to
   the other two layouts and the three can be compared on their chrome rather
   than on their line length. */
/* The body is the grid, so the rail starts at the page edge rather than at
   the centred container's left gutter, and the stroke it carries is the
   division between navigation and work. minmax(100%,auto) on the row is what
   makes that stroke run the full height on a short step — an auto row would
   stop it at the bottom of the content. */
.mc-l-h .mc-body{
  display:grid;grid-template-columns:280px minmax(0,1fr);
  grid-template-rows:minmax(100%,auto);
}
.mc-rail{
  min-width:0;padding:32px 24px 40px;
  border-right:1px solid var(--border);
}
/* The rail's content follows you down a long step; the column it sits in does
   not move, so the stroke stays whole. */
.mc-rail-in{position:sticky;top:32px}
.mc-h-main{min-width:0}
/* Same measure as .mc-inner, centred in what is left after the rail. */
.mc-l-h .mc-col{
  max-width:calc(var(--mc-col) + 80px);margin:0 auto;padding:32px 40px 88px;
}
.mc-l-h .mc-sec,.mc-l-h .mc-narrow{max-width:none;margin-inline:0}
.mc-rail-steps{display:flex;flex-direction:column}
.mc-rail-step{
  position:relative;display:grid;grid-template-columns:24px 1fr;column-gap:12px;
  text-align:left;background:none;border:0;padding:0 0 20px;
  font:inherit;cursor:pointer;
}
.mc-rail-step:last-child{padding-bottom:0}
.mc-rail-step:disabled{cursor:default}
/* The connector runs between the dots, not through them: from the bottom of
   one to the top of the next, inset so it never touches either. */
.mc-rail-step:not(:last-child)::before{
  content:"";position:absolute;left:11px;top:28px;bottom:4px;width:2px;
  border-radius:1px;background:var(--border);
}
.mc-rail-step.is-done::before{background:var(--brand-blue)}
.mc-rail-dot{
  grid-column:1;grid-row:1;
  width:24px;height:24px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font:600 12px/1 'Inter',sans-serif;
  border:1px solid var(--border-strong);background:var(--surface);
  color:var(--text-secondary);
}
.mc-rail-dot svg{width:12px;height:12px}
.mc-rail-step.is-current .mc-rail-dot,
.mc-rail-step.is-done .mc-rail-dot{
  background:var(--brand-blue);border-color:var(--brand-blue);color:#FFFFFF;
}
.mc-rail-t{
  grid-column:2;grid-row:1;align-self:center;
  font:600 14px/1.3 'Inter',sans-serif;color:var(--text-secondary);
}
.mc-rail-step.is-current .mc-rail-t{color:var(--text-primary)}
.mc-rail-d{
  grid-column:2;grid-row:2;margin-top:4px;
  font:400 13px/1.45 'Inter',sans-serif;color:var(--text-secondary);
}

.mc-hh{margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--border)}
.mc-hh-e{display:block;margin-bottom:4px;
  font:500 12px/1.4 'Inter',sans-serif;color:var(--text-secondary)}
.mc-hh h1{margin:0;font:600 16px/1.4 'Inter',sans-serif;color:var(--text-primary)}
/* .mc-sec:first-of-type stops matching once a heading div precedes it — it
   selects the first div among its siblings, and that is now the heading. The
   first section has to be told again, or it takes a stray hairline directly
   under the h1.

   Scoped away from Panels deliberately. There the top border is not a divider
   between sections, it is one of the four sides of the panel — dropping it
   left the first panel open at the top. */

/* The bar's actions are .jc-btn now — see styles/button.css. The overrides
   that used to live here existed only to stop .ct-btn-ghost (34px/14px) and
   .an-btn-primary (36px/13px) disagreeing with each other in the same group.
   The spacing between them is the component's --btn-space. */
.mc-bar-r{gap:var(--btn-space)}


/* ── The flow's own bar: a way out, and what you are working on ──────────
   Only g and h have this; now still gives its bar's left to the stepper. */
.mc-bar-in{position:relative}
/* 8, not 12. The close button, the rule and the name are one cluster — at 12
   they read as three separate things sitting near each other. */
.mc-bar-l{display:flex;align-items:center;gap:8px;min-width:0}
.mc-x{
  flex:0 0 auto;width:28px;height:28px;border-radius:6px;
  display:inline-flex;align-items:center;justify-content:center;
  border:0;background:none;cursor:pointer;color:var(--text-secondary);
  transition:background-color .12s ease,color .12s ease;
}
.mc-x svg{width:17px;height:17px}
.mc-x:hover{background:var(--surface-panel);color:var(--text-primary)}
.mc-bar-div{flex:0 0 auto;width:1px;height:20px;background:var(--border)}
/* Capped. The stepper starts at a fixed point now, so the name has a fixed
   amount of room before it and must give way rather than push: the close
   button, the divider and their gaps take 53 of the 242 before the content
   edge, and 160 leaves 29 clear. */
.mc-bar-t{
  min-width:0;max-width:160px;
  font:600 16px/1.3 'Inter',sans-serif;color:var(--text-primary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
@media (prefers-reduced-motion:reduce){.mc-x{transition:none}}


/* Dark: theme-customiser.css sets `body.theme-dark p,span,div,li{color:inherit}`
   at a specificity no single class beats, so every secondary colour above has
   to be said again here. Backgrounds and borders come from the tokens and do
   not. */
body.theme-dark .mc-q p,
body.theme-dark .mc-rail-t,
body.theme-dark .mc-rail-dot,
body.theme-dark .mc-hh-e,
body.theme-dark .mc-rail-d{color:var(--text-secondary)}
/* Dark inverts which of the two is the ground. `body.theme-dark .mc,
   .mc-body, .mc-bar {background:var(--surface)}` earlier in this file outruns
   the light rule, so the body and the panels both came out #191A1C — same
   colour, no ground, and the only thing left holding a panel together was its
   border.

   Light lifts a panel by making it whiter than the page. Dark cannot do that,
   so it goes the other way: the page keeps --surface and the panels take
   --surface-alt, which is the lighter of the two here. Same relationship,
   opposite direction. */
body.theme-dark .mc-l-g .mc-body{background:var(--surface)}
body.theme-dark .mc-l-g .mc-sec{background:var(--surface-alt)}

/* theme-customiser.css sets `body.theme-dark p,span,div,li{color:inherit}` at
   (0,1,1), which a single class does not beat — both of these are spans and
   would take the body's near-white text colour. The chevron especially: a
   separator at --text-primary is louder than the steps it separates. */
body.theme-dark .mc-step-sep{color:var(--text-tertiary)}
body.theme-dark .mc-src-ic{color:var(--text-secondary)}

body.theme-dark .mc-bar-t,
body.theme-dark .mc-rail-step.is-current .mc-rail-t{color:var(--text-primary)}
body.theme-dark .mc-rail-step.is-current .mc-rail-dot,
body.theme-dark .mc-rail-step.is-done .mc-rail-dot{color:#FFFFFF}

/* ═══ The review dialog ═══════════════════════════════════════════════════
   Review used to be a step: no controls on it, and the tallest page in the
   flow. It is read once, immediately before an irreversible action — which is
   what a confirm dialog is for. As a step it also meant the last thing you
   did before sending thousands of messages was press a button labelled
   Continue.

   Wide, because the read-back is two columns of figures and squeezing it into
   a 560px dialog would set them in one column and make it longer than the
   page it replaced.
   ────────────────────────────────────────────────────────────────────────── */
.mc-rv-ov{
  position:fixed;inset:0;z-index:1200;
  background:rgba(16,24,40,.32);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
/* Sized to what it holds. It was 820px because the read-back used to be two
   columns of figures plus a list of every message; it is now three numbers
   and four rows, and a wide card around that is mostly gutter. */
.mc-rv{
  width:460px;max-width:calc(100vw - 48px);max-height:calc(100vh - 48px);
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
}
/* A chooser is a list, not a read-back — narrower than the review dialog. */
.mc-rv.is-sm{width:520px}
.mc-rv-h{
  flex:0 0 auto;display:flex;align-items:center;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--border);
}
.mc-rv-h h2{margin:0;font:600 16px/1.3 'Inter',sans-serif;color:var(--text-primary)}
.mc-rv-h .mc-x{margin-left:auto}
.mc-rv-b{flex:1 1 auto;min-height:0;overflow-y:auto;padding:20px}
/* Inside the dialog the sections are the whole width — they have no page to
   be centred in, and their own 720px cap would leave a gutter down one side. */
.mc-rv-b .mc-sec{max-width:none;margin-inline:0}
.mc-rv-f{
  flex:0 0 auto;display:flex;justify-content:flex-end;gap:10px;
  padding:14px 20px;border-top:1px solid var(--border);
}

body.theme-dark .mc-rv-h h2{color:var(--text-primary)}
body.theme-dark .mc-rv{background:var(--surface-alt)}

/* ═══ Field style ═════════════════════════════════════════════════════════
   Two ways of setting out a question, from what modern tools actually do —
   not the onboarding forms fintechs use, which are all label-above-input in a
   narrow centred column and read as forms from a decade ago.

   Linear and Notion settle on the same shape: a row, with the label and its
   description on the left and the control on the right, sized to its content.
   No rules between rows, group titles in plain text. Vercel goes the other
   way — each setting is a card with a tinted footer strip carrying its action.

   Rows is the first. Soft takes the container idea and drops every stroke
   from it: a borderless tinted group with white controls inside, which
   inverts today's white-page-with-outlined-fields.

   Both scale the way the stacked version does not: a new setting is a row or
   a group, and neither needs a rule drawn for it.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Rows ─────────────────────────────────────────────────────────────────
   The label carries the question and the control sits at the end of the line,
   so the page reads down its left edge as a list of what a campaign is —
   which is what makes it scale. A setting added later is one more line, not
   another band. */
.mc-f-rows .mc-sec{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);
  column-gap:40px;align-items:start;
}
/* Closer than Stack: a row is one line, and 40px between lines would read as
   unrelated settings rather than a list. */
.mc-f-rows .mc-sec + .mc-sec{margin-top:24px}
.mc-f-rows .mc-sec-l{padding-top:1px}
.mc-f-rows .mc-sec-l h3{font-weight:500}
.mc-f-rows .mc-sec-r{justify-self:end;width:100%}

/* Some controls will not go in a 300px column — a pair of choice cards, a
   date-and-time grid, a stack of switches, the message timeline. Those keep
   the full width and take the label above them, which is the same exception
   Linear makes for its bigger settings. */
.mc-f-rows .mc-sec:has(.mc-source),
.mc-f-rows .mc-sec:has(.mc-grid2),
.mc-f-rows .mc-sec:has(.mc-source) .mc-sec-r,
.mc-f-rows .mc-sec:has(.mc-grid2) .mc-sec-r,

/* ── Soft ─────────────────────────────────────────────────────────────────
   The group is a tinted panel with no border at all, and the controls inside
   it are white. That inverts what the page does today — outlined fields on
   white — and it is the one treatment here with no strokes in it: the tone
   change does all the grouping.

   It also gives a field a ground to sit on without a frame, which is the
   thing that reads as current rather than as a settings screen. */
.mc-f-soft .mc-sec{
  background:transparent;border:1px solid var(--border);border-radius:12px;
  padding:20px;
  transition:border-color .14s ease;
}
/* The interaction is the point. A stroke on its own is just Panels without a
   ground; a stroke that answers you is a different thing — the group you are
   working in draws itself, and the rest stay quiet. Nothing moves and nothing
   is tinted, so the page stays still while the attention shifts. */
.mc-f-soft .mc-sec:hover{border-color:var(--border-strong)}
.mc-f-soft .mc-sec:focus-within{border-color:var(--brand-blue)}
@media (prefers-reduced-motion:reduce){.mc-f-soft .mc-sec{transition:none}}
.mc-f-soft .mc-sec + .mc-sec{margin-top:16px}
/* A card holding cards is a frame around a frame. Where a section's content
   is already a set of bordered rows — the dialing modes, the priority order —
   that set is the group, so the section gives up its own card. Controls do
   not count: a dropdown has a border because it is a control, not because it
   is a card. */
.mc-f-soft .mc-sec:has(.dcr-modes),
.mc-f-soft .mc-sec:has(.dcr-prio){border-color:transparent;padding:2px 0}
.mc-f-soft .mc-sec:has(.dcr-modes):hover,
.mc-f-soft .mc-sec:has(.dcr-modes):focus-within,
.mc-f-soft .mc-sec:has(.dcr-prio):hover,
.mc-f-soft .mc-sec:has(.dcr-prio):focus-within{border-color:transparent}
body.theme-dark .mc-f-soft .mc-sec:has(.dcr-modes),
body.theme-dark .mc-f-soft .mc-sec:has(.dcr-modes):hover,
body.theme-dark .mc-f-soft .mc-sec:has(.dcr-modes):focus-within,
body.theme-dark .mc-f-soft .mc-sec:has(.dcr-prio),
body.theme-dark .mc-f-soft .mc-sec:has(.dcr-prio):hover,
body.theme-dark .mc-f-soft .mc-sec:has(.dcr-prio):focus-within{border-color:transparent}
body.theme-dark .mc-f-soft .mc-sec{border-color:var(--border)}
body.theme-dark .mc-f-soft .mc-sec:hover{border-color:var(--border-strong)}
body.theme-dark .mc-f-soft .mc-sec:focus-within{border-color:var(--brand-blue)}

/* ═══ Switch rows ═════════════════════════════════════════════════════════
   What it does on the left, the switch on the right — the shape Linear,
   Notion and Supabase all use for a setting that needs a sentence.

   Every one of these used to be a bare label. "Contact replies" names the
   trigger but not the consequence, and the consequence is the part you are
   actually deciding about; a row that says only the trigger makes you guess
   at what the switch will do.

   The whole row is the target, not the 34px switch at the end of it.
   ────────────────────────────────────────────────────────────────────────── */
.jc-swrs{display:flex;flex-direction:column}
.jc-swr{
  display:flex;align-items:flex-start;gap:16px;
  padding:12px 0;cursor:pointer;
  border-top:1px solid var(--border);
}
.jc-swr:first-child{border-top:0;padding-top:0}
.jc-swr:last-child{padding-bottom:0}
.jc-swr:focus-visible{outline:2px solid var(--brand-blue);outline-offset:2px;border-radius:6px}
.jc-swr.is-locked{cursor:default}

.jc-swr-b{flex:1 1 auto;min-width:0}
.jc-swr-t{
  display:flex;align-items:baseline;gap:8px;
  font:500 14px/1.4 'Inter',sans-serif;color:var(--text-primary);
}
/* A badge, not a right-aligned note: "Required" belongs to the label it
   qualifies, and floating it at the far end of the row left it stranded
   between the sentence and the switch. */
.jc-swr-req{
  flex:0 0 auto;padding:2px 6px;border-radius:5px;
  background:var(--surface-panel);
  font:600 11px/1.3 'Inter',sans-serif;letter-spacing:.02em;
  color:var(--text-secondary);
}
.jc-swr-d{
  display:block;margin-top:2px;
  font:400 13px/1.45 'Inter',sans-serif;color:var(--text-secondary);
}
/* The switch keeps to the first line of the label rather than centring on a
   two-line row, so a row with a long description does not drift. */
.jc-swr .mc-sw{margin-top:2px}

body.theme-dark .jc-swr-t{color:var(--text-primary)}
body.theme-dark .jc-swr-d,body.theme-dark .jc-swr-req{color:var(--text-secondary)}
body.theme-dark .jc-swr-req{background:var(--surface-panel)}

/* ═══ Group treatments, content width, steppers ═══════════════════════════
   Three switchable dimensions from app/flow-layout.js, each one class on the
   flow root. The markup is identical across every option — that is the test:
   a treatment that needs its own markup is not a treatment, it is a second
   design. Everything below styles the same .mc-sec / .mc-sec-l / .mc-sec-r.
   ────────────────────────────────────────────────────────────────────────── */

/* Every group is an accordion — the header is the handle, the chevron says
   so. The status badge this replaces restated what the fields under it
   already said. */
.cg .mc-sec-l{position:relative}
/* Only the boxed treatments collapse. A chevron on a flat hairline section
   has no box to fold into, and in the gutter layouts the header sits in its
   own column, where a control would be orphaned from what it controls. */
.cg .mc-sec-x{display:none}
.cg-w-centred.cg-t1 .mc-sec-l,
.cg-w-centred.cg-t4 .mc-sec-l{cursor:pointer}
.cg-w-centred.cg-t1 .mc-sec-x,
.cg-w-centred.cg-t4 .mc-sec-x{
  flex:0 0 26px;width:26px;height:26px;margin-left:auto;
  display:grid;place-items:center;border:0;background:transparent;
  border-radius:7px;cursor:pointer;color:var(--text-tertiary);
}
.cg .mc-sec-x:hover{background:var(--surface-panel);color:var(--text-primary)}
.cg .mc-sec-x svg{width:15px;height:15px;display:block;transition:transform .16s ease}
.cg .mc-sec[data-open="0"] .mc-sec-x svg{transform:rotate(-90deg)}
.cg .mc-sec[data-open="0"] .mc-sec-r{display:none}
@media (prefers-reduced-motion:reduce){.cg .mc-sec-x svg{transition:none}}

/* Both boxed treatments lay the header out as a row: title, then the
   chevron at the far end, with the description wrapping underneath. T1 had
   this missing, so its chevron fell between the two lines and spaced them
   apart. */
.cg-w-centred.cg-t1 .mc-sec-l,
.cg-w-centred.cg-t4 .mc-sec-l{
  display:flex;align-items:center;gap:0 12px;flex-wrap:wrap;
}
.cg-w-centred.cg-t1 .mc-sec-l h3,
.cg-w-centred.cg-t4 .mc-sec-l h3{flex:0 0 auto}
.cg-w-centred.cg-t1 .mc-sec-l p,
.cg-w-centred.cg-t4 .mc-sec-l p{flex:1 1 100%;margin-top:2px;order:3}

/* ── T1 · stroke boxes ── */
.cg-w-centred.cg-t1 .mc-sec{border:1px solid var(--border);border-radius:12px;background:var(--surface);
  padding:19px 20px 20px;gap:0}
.cg-w-centred.cg-t1 .mc-sec + .mc-sec{margin-top:14px}
.cg-w-centred.cg-t1 .mc-sec-l{padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid #F2F4F7}

/* ── T2 · flat, hairline rules ── */
.cg-w-centred.cg-t2 .mc-sec{border:0;border-radius:0;background:transparent;padding:0;gap:18px}
.cg-w-centred.cg-t2 .mc-sec + .mc-sec{margin-top:28px;padding-top:28px;border-top:1px solid #EAECF0}

/* ── T4 · header-band panels · default ──
   The only treatment where the box does something a hairline cannot: the band
   gives every group a status slot, which is what makes step 3 skimmable and
   doubles as the answer to "why is Finish setup dimmed?". */
.cg-w-centred.cg-t4 .mc-sec{border:1px solid var(--border);border-radius:12px;background:var(--surface);
  overflow:hidden;padding:0;gap:0}
.cg-w-centred.cg-t4 .mc-sec + .mc-sec{margin-top:14px}
.cg-w-centred.cg-t4 .mc-sec-l{
  padding:12px 14px 12px 20px;background:#FBFCFE;border-bottom:1px solid #F2F4F7;margin:0}
.cg-w-centred.cg-t4 .mc-sec-r{padding:20px}

/* ── W1 · full-bleed, and it has to earn the width with a second column
   rather than by stretching the fields ── */
.cg-w-w1 .mc-inner{max-width:none;padding-inline:34px}
.cg-w-w1 .mc-q{max-width:none;margin-inline:0}
.cg-w-w1 .mc-sec{border:0;border-radius:0;background:transparent;padding:0;
  max-width:none;margin-inline:0;
  display:grid;grid-template-columns:300px minmax(0,1fr);gap:0 56px;align-items:start}
.cg-w-w1 .mc-sec + .mc-sec{margin-top:28px;padding-top:28px;border-top:1px solid #EAECF0}
.cg-w-w1 .mc-sec-l{display:flex;flex-direction:column;background:transparent;
  border:0;padding:0}
.cg-w-w1 .mc-sec-l p{max-width:34ch;order:2}
.cg-w-w1 .mc-sec-r{padding:0;max-width:760px}
/* Below this the controls column tightens past comfort — fall back to centred. */
@media (max-width:1280px){
  .cg-w-w1 .mc-inner{max-width:var(--mc-col);padding-inline:0}
  .cg-w-w1 .mc-sec{display:flex;flex-direction:column;gap:22px;
    align-items:stretch;max-width:var(--mc-col);margin-inline:auto}
  .cg-w-w1 .mc-sec-r{max-width:none}
}

/* ── The stepper ──
   The shipped component with a chevron between steps. Nothing is filled
   solid: current and done both sit on the soft blue chip and the label's
   weight says which is which, so the bar stays quiet beside the page it
   labels. Scoped to .cg so the import flow keeps its own treatment. */
.cg .mc-bar-mid .jc-stepper{display:flex;align-items:center;gap:0}
.cg .jc-step.is-current .jc-step-dot{
  background:var(--brand-blue-soft);border-color:transparent;color:var(--brand-blue);
  box-shadow:none;
}
.cg .jc-step.is-current .jc-step-label{font-weight:600;color:var(--text-primary)}
.cg .jc-step.is-done .jc-step-dot{
  background:var(--brand-blue-soft);border-color:transparent;color:var(--brand-blue);
}
/* One silhouette across all three states: a filled chip, only the tint
   changes. The upcoming steps carried a 1.5px stroke and grey ink on white,
   which made the steps you have not reached the heaviest thing in the bar. */
.cg .jc-step-dot{
  width:22px;height:22px;flex-basis:22px;border-radius:7px;
  border:0;background:var(--surface-panel);color:var(--text-tertiary);
  font:600 11.5px/1 'Inter',sans-serif;
}
.cg .jc-step-dot svg{width:12px;height:12px}
/* Centred on the chip, not on the text box: the label's line box and the
   22px chip have different heights, so only an explicit centre lines the
   digit, the word and the chevron up on one axis. */
.cg .jc-step{align-items:center;padding:0}
.cg .jc-step-top{align-items:center;gap:9px}
.cg .jc-step-label{line-height:22px;display:block}
.cg .mc-step-sep{
  display:inline-flex;align-items:center;height:22px;margin:0 8px;
  color:var(--border-strong);
}
.cg .mc-step-sep svg{width:14px;height:14px;display:block}

body.theme-dark .cg-w-centred.cg-t4 .mc-sec-l{background:var(--surface-alt);border-bottom-color:var(--border)}
body.theme-dark .cg-w-centred.cg-t1 .mc-sec-l{border-bottom-color:var(--border)}
body.theme-dark .cg-w-centred.cg-t2 .mc-sec + .mc-sec,
body.theme-dark .cg-w-w1 .mc-sec + .mc-sec{border-top-color:var(--border)}