/* ═══ Create dialer campaign ═════════════════════════════════════════════════
   The shell is campaign-create.css. Everything here is the parts the dialer
   flow has and the messaging flow does not: the dialing-mode cards, the import
   sources, the mapping table and the dialing-priority list.

   Sharing the shell is the point. Both flows are a linear task inside the
   page — one header strip with a stepper and two actions, one scrolling white
   body, section rows with a label column and a control column. Duplicating
   that under a second prefix would have meant two copies drifting apart the
   first time either was touched.

   Same rules as the shell: no drop shadows on in-page surfaces — a
   0 0 0 3px ring is an outline, not a shadow — and every secondary label is
   restated for dark, because theme-customiser.css flattens span colour to
   inherit at (0,1,2) and that outweighs any single class.
   ────────────────────────────────────────────────────────────────────────── */

/* ═══ Step 1 · dialing mode ══════════════════════════════════════════════ */

/* Three across, figure over text.

   This is a comparison, not three things read one at a time: the cards carry
   the same bullet in the same slot — who runs it, then how it dials — and
   side by side those lines are level with each other, which is what turns
   three descriptions into one table you read across. Stacked, the same three
   bullets are three paragraphs you hold in your head.

   The figures do not fit a third of a 720px column at their drawn size, so
   .dcr-fig is scaled rather than redrawn; see the note there. */
.dcr-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}

.dcr-mode{
  position:relative;display:flex;flex-direction:column;align-items:stretch;gap:18px;
  padding:16px;cursor:pointer;
  border:1px solid var(--border);border-radius:14px;background:var(--surface);
  transition:border-color .14s,box-shadow .14s;
}
.dcr-mode-b{flex:1 1 auto;min-width:0}
/* Hover moves the panel as well as the border. A card whose only response is
   a one-pixel edge does not feel like something you can pick. */
.dcr-mode:hover{border-color:var(--border-strong)}
.dcr-mode:hover .dcr-mode-fig{background:var(--surface-panel)}
.dcr-mode:focus-visible{outline:0;border-color:var(--brand-blue);
  box-shadow:0 0 0 3px rgba(0,76,230,.10)}
/* Accent border and a 10% ring, the house treatment for a chosen card — plus
   a tick, because a card this size needs a mark you can find without
   comparing borders. No wash over the card: a pale tint under grey body text
   reads as disabled rather than selected. */
.dcr-mode.on{border-color:var(--brand-blue);box-shadow:0 0 0 3px rgba(0,76,230,.10)}

/* The panel keeps its own tone whether or not the card is chosen: the live
   row inside it is already --brand-blue-soft, and tinting the panel to match
   made the one thing the figure is about disappear. */
.dcr-mode-fig{
  display:block;flex:0 0 auto;width:auto;margin:0;padding:14px 8px;
  border-radius:10px;background:var(--surface-alt);overflow:hidden;
  transition:background-color .14s;
}
.dcr-dg{display:block;width:100%;height:auto}

/* ── The figures ──
   Built from the product's own illustrated avatars rather than from abstract
   circles, and laid out the way the reference lays them out: who is dialing
   on the left, the keypad in the middle, who is being dialled on the right,
   and a badge on each face saying what happened to that call.

   Fixed height, so three cards of different composition still line their
   titles up. */
.dcr-fig{
  display:flex;align-items:center;justify-content:center;gap:5px;
  height:100px;
  /* Drawn at its natural size and scaled to the tile, rather than redrawn
     smaller: the widest of the three measures 213px and a third of the 720px
     column leaves 186, so every part — faces, badges, arrows, gaps — comes
     down by the same factor and the composition holds.

     width:max-content is what makes that true — sized to the tile instead,
     the row would still be 213px of parts inside a 186px box and scaling it
     would only shrink the overflow. left/translateX centres a box wider than
     its container, which auto margins cannot. */
  width:max-content;position:relative;left:50%;
  transform:translateX(-50%) scale(.81);transform-origin:center;
}
/* Panels frames the column, which costs 14px a card — enough that the widest
   figure clips at .81. One factor lower rather than a different drawing. */
.mc-l-g .dcr-fig{transform:translateX(-50%) scale(.75)}

.dcr-av{
  position:relative;flex:0 0 34px;width:34px;height:34px;
  border-radius:50%;overflow:visible;
}
.dcr-av .jc-av-svg{width:100%;height:100%;display:block;border-radius:50%}
.dcr-av.is-sm{flex-basis:28px;width:28px;height:28px}

/* A badge is a status, so it gets the one colour that status means: blue for
   the call going out, green for a live call, red for one that did not
   connect. The ring is the panel's own colour, which is what lifts a badge
   off the face behind it. */
.dcr-bdg{
  position:absolute;right:-3px;bottom:-3px;
  width:17px;height:17px;border-radius:50%;
  display:grid;place-items:center;
  box-shadow:0 0 0 2px var(--surface-alt);
}
.dcr-bdg svg{width:9px;height:9px;display:block}
.dcr-bdg.is-out{background:var(--brand-blue-soft);color:var(--brand-blue)}
.dcr-bdg.is-live{background:#12B76A;color:#FFFFFF}
.dcr-bdg.is-yes{background:#12B76A;color:#FFFFFF}
.dcr-bdg.is-no{background:#F04438;color:#FFFFFF}

.dcr-arrow{flex:0 0 19px;width:19px;height:12px;color:var(--brand-blue)}

.dcr-pad{
  flex:0 0 28px;width:28px;height:28px;border-radius:9px;
  background:var(--brand-blue);color:#FFFFFF;
  display:grid;place-items:center;
}
.dcr-pad svg{width:16px;height:16px;display:block}

/* Two callers on one campaign, joined into the one keypad. */
.dcr-col{display:flex;flex-direction:column;gap:9px;flex:0 0 auto}
.dcr-join{
  flex:0 0 8px;width:8px;height:42px;
  border:1.6px solid var(--brand-blue);border-left:0;border-radius:0 7px 7px 0;
}

/* The contacts a predictive campaign rings all at once. Smaller faces here:
   three of them stacked at 38px overflowed the figure and clipped the last
   one, and this group is about how many there are, not who. */
.dcr-col.is-tray{
  gap:5px;padding:5px;border-radius:12px;background:var(--brand-blue-soft);
}
.dcr-col.is-tray .dcr-av{flex-basis:30px;width:30px;height:30px}
.dcr-col.is-tray .dcr-bdg{
  width:15px;height:15px;box-shadow:0 0 0 2px var(--brand-blue-soft)}
.dcr-col.is-tray .dcr-bdg svg{width:8px;height:8px}

/* One line in, three out. Same padding and gap as the tray beside it, so
   each arrow sits on the face it points at. */
.dcr-fanx{display:flex;flex-direction:column;gap:5px;padding:5px 0;flex:0 0 auto}
.dcr-fanx-r{height:30px;display:grid;place-items:center}

/* One contact is on a call; the rest are waiting, overlapped and fading,
   because what matters is that there are more of them. */
.dcr-grp{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.dcr-queue{display:flex;align-items:center;flex:0 0 auto}
.dcr-queue .dcr-av{margin-left:-9px;box-shadow:0 0 0 2px var(--surface-alt)}
.dcr-queue .dcr-av:first-child{margin-left:0}
.dcr-queue .dcr-av:nth-child(2){opacity:.6}
.dcr-queue .dcr-av:nth-child(3){opacity:.32}

/* The flow's step 1 uses a section row for this heading now, like every
   other heading in both flows. The rule stays because the _*.html research
   pages link this stylesheet and still draw the older block. */
.dcr-block{padding-top:26px;border-top:1px solid var(--border)}
.dcr-block-t{margin:0 0 16px;font:600 15px/1.35 'Inter',sans-serif;
  color:var(--text-primary)}

.dcr-mode-t{font:600 15px/1.3 'Inter',sans-serif;color:var(--text-primary);
  letter-spacing:-.01em}

/* The facts, one per line, marked so the eye can count them. A real bullet
   glyph rather than a border trick: these are a list, and a list that reads
   as one is worth two characters of markup. */
.dcr-mode-l{display:flex;flex-direction:column;gap:7px;margin-top:11px}
.dcr-mode-l i{
  position:relative;display:block;padding-left:13px;
  font-style:normal;font:400 13px/1.5 'Inter',sans-serif;color:var(--text-secondary);
}
.dcr-mode-l i::before{
  content:'';position:absolute;left:2px;top:8px;
  width:4px;height:4px;border-radius:50%;background:var(--text-tertiary);
}

.dcr-mode-tick{
  position:absolute;top:12px;right:12px;
  width:20px;height:20px;border-radius:50%;
  background:var(--brand-blue);color:#FFFFFF;
  display:none;place-items:center;
}
.dcr-mode-tick svg{width:12px;height:12px;display:block}
.dcr-mode.on .dcr-mode-tick{display:grid}

/* ═══ Step 2 · contacts ═════════════════════════════════════════════════ */

/* The uploaded-file chip, shared by both create flows — messaging shows the
   same one now. Named .jc-* rather than .dcr-* because it is no longer only
   the dialer's.

   An upload that worked is a success, and it should look like one. This was
   another grey row on a grey page — the same tone as the empty dropzone it
   replaced, so nothing about it said the thing you just did had worked.
   Green here is the house success palette (#ECFDF3 / #ABEFC6 / #067647), the
   one 37 other rules already use. */
.jc-file{
  display:flex;align-items:center;gap:12px;
  padding:12px 10px 12px 13px;
  border:1px solid #ABEFC6;border-radius:10px;background:#ECFDF3;
}
.jc-file-ic{
  flex:0 0 34px;width:34px;height:34px;border-radius:9px;
  display:grid;place-items:center;
  background:var(--success);color:#FFFFFF;
}
.jc-file-ic svg{width:17px;height:17px;display:block}
.jc-file-b{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.jc-file-n{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:600 14px/1.35 'Inter',sans-serif;color:#054F31;
}
.jc-file-m{
  display:flex;align-items:center;gap:5px;
  font:400 13px/1.35 'Inter',sans-serif;color:#067647;
  font-variant-numeric:tabular-nums;
}
.jc-file-m svg{flex:0 0 12px;width:12px;height:12px;display:block}
/* The two actions belong to a green row, so they answer in green rather than
   borrowing the page's grey icon button. */
.jc-file-a{
  appearance:none;flex:0 0 30px;width:30px;height:30px;
  border:0;border-radius:8px;background:transparent;color:#067647;
  display:inline-grid;place-items:center;cursor:pointer;
  transition:background-color .14s ease;
}
.jc-file-a svg{width:16px;height:16px;display:block}
.jc-file-a:hover{background:#D1FADF}
.jc-file-a:focus-visible{outline:2px solid var(--success);outline-offset:-2px}

/* ═══ Step 3 · field mapping ════════════════════════════════════════════ */

.dcr-bar{
  display:flex;align-items:center;gap:10px;
  padding:11px 13px;margin-bottom:12px;
  border:1px solid var(--border);border-radius:10px;background:var(--surface-alt);
  font:400 13px/1.45 'Inter',sans-serif;color:var(--text-secondary);
}
.dcr-bar > svg{flex:0 0 16px;width:16px;height:16px;color:var(--text-tertiary)}
.dcr-bar b{color:var(--text-primary);font-weight:600}
.dcr-bar .mc-link{margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  flex:0 0 auto;white-space:nowrap}
.dcr-bar .mc-link svg{width:14px;height:14px}

/* The busy bar follows the source picker directly, with nothing between them
   to space it — so "2,480 contacts will be dialled" and "Matching your
   columns…" sat flush and read as one double-height block. The stack is on a
   12px rhythm: file, count, bar, table. */
.dcr-bar.is-busy{margin-top:12px}

.dcr-spin{
  flex:0 0 16px;width:16px;height:16px;border-radius:50%;
  border:2px solid var(--border-strong);border-top-color:var(--brand-blue);
  animation:dcr-spin .7s linear infinite;
}
@keyframes dcr-spin{to{transform:rotate(360deg)}}

/* One grid, declared once, and both the header and the rows read it — three
   columns that have to agree is not something to eyeball. */
/* Header fixed, rows scrolling under it, add button on the card's foot.
   Ten fields laid out flat is 530px of table between the reader and the
   import settings below — and the column headings had scrolled away long
   before the last row, so the middle of the table was three unlabelled
   columns. Six rows is enough to show the shape and to make it obvious
   there are more. */
.dcr-map{
  border:1px solid var(--border);border-radius:10px;overflow:hidden;
  background:var(--surface);
}
.dcr-map-b{max-height:318px;overflow-y:auto;overscroll-behavior:contain}
.dcr-map-add{
  border-top:1px solid var(--border);background:var(--surface-alt);
  padding:8px 16px;
}
.dcr-map-add .mc-add{padding:0}
body.theme-dark .dcr-map-add{background:var(--surface-alt);border-top-color:var(--border)}
.dcr-map-h,.dcr-map-r{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,264px) minmax(0,1fr);
  gap:20px;align-items:center;padding:0 16px;
}
.dcr-map-h{
  min-height:42px;background:var(--surface-alt);
  border-bottom:1px solid var(--border);
  font:500 12px/1.3 'Inter',sans-serif;color:var(--text-secondary);
  letter-spacing:.01em;
}
.dcr-map-r{min-height:56px;border-bottom:1px solid var(--border)}
.dcr-map-r:last-child{border-bottom:0}
.dcr-map-f{
  display:flex;align-items:center;gap:3px;min-width:0;
  font:500 14px/1.35 'Inter',sans-serif;color:var(--text-primary);
}
.dcr-map-p{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:400 13px/1.35 'Inter',sans-serif;color:var(--text-tertiary);
}
/* The dropdown is a cell, so it fills its cell. .jc-dd.is-sm sizes to its own
   label by default, which is right in a sentence and wrong in a table. */
.dcr-map .jc-dd.dcr-map-dd{width:100%;height:34px}
/* The one field the campaign cannot run without. Amber, not red: nothing has
   gone wrong yet — it is unfinished, not broken. */
.dcr-map-r.is-missing .dcr-map-f{color:#B54708}
.dcr-map-r.is-missing .jc-dd{border-color:#FEDF89;background:#FFFAEB}

/* A red asterisk, the convention every form uses, rather than a grey badge
   spelling the word out. The badge was a second object beside the label on
   every required field — and in a ten-row mapping table that is ten of them
   arguing with the amber the unfinished rows already carry. */
.dcr-req{
  flex:0 0 auto;font-style:normal;
  font:500 14px/1 'Inter',sans-serif;
  color:var(--error);
}
.mc-f-l .dcr-req{margin-left:3px;vertical-align:-1px}

@media (max-width:820px){
  .dcr-map-h,.dcr-map-r{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
  .dcr-map-h span:last-child,.dcr-map-p{display:none}
}

/* Skeleton rows while the columns are being matched. Same grid, so the table
   does not jump a pixel when the real rows arrive. */
.dcr-map.is-skel .dcr-map-r{min-height:56px}
.dcr-skel{
  height:11px;border-radius:6px;background:var(--surface-panel);
  animation:dcr-pulse 1.3s ease-in-out infinite;
}
@keyframes dcr-pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* The mapping's own heading. It is not a section row — the table under it
   runs the full width rather than sitting in a control column — so it takes
   the section header's type on its own. */
.dcr-map-hd{margin:40px 0 16px;display:flex;align-items:center;
  gap:12px;flex-wrap:wrap}
.dcr-map-hd h3{flex:0 0 auto}
.dcr-map-hd p{flex:1 1 100%;order:3}
.dcr-map-hd .mc-pill{display:inline-flex;margin-left:auto}
.dcr-map-hd h3{margin:0;font:600 14px/1.4 'Inter',sans-serif;color:var(--text-primary)}
.dcr-map-hd p{margin:4px 0 0;font:400 13px/1.5 'Inter',sans-serif;color:var(--text-secondary)}
body.theme-dark .dcr-map-hd h3{color:var(--text-primary)}
body.theme-dark .dcr-map-hd p{color:var(--text-secondary)}

/* The settings under the mapping table are section rows, and they keep the
   section rhythm the rest of both flows uses — space, not a rule. */
.dcr-secs{margin-top:40px}
.mc-sw:focus-visible{outline:2px solid var(--brand-blue);outline-offset:2px}

/* ═══ Step 4 · campaign settings ════════════════════════════════════════ */

/* The country stays a label, not a select: this prototype has one dialing
   country and a picker that only ever shows one option is furniture. */
.dcr-tel{display:flex;align-items:stretch}
.dcr-tel-c{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
  padding:0 11px;border:1px solid var(--border-strong);border-right:0;
  border-radius:9px 0 0 9px;background:var(--surface-alt);
  font:500 14px/1 'Inter',sans-serif;color:var(--text-secondary);
  white-space:nowrap;
}
.dcr-tel-i{border-radius:0 9px 9px 0;min-width:0}
.dcr-tel-i:focus{position:relative;z-index:1}

/* ── Dialing priority ──
   A numbered, reorderable list. The number is the point: this is an order,
   and an order that does not print its positions is just a stack of cards. */
.dcr-prio{display:flex;flex-direction:column;gap:8px;max-width:720px}
.dcr-prio-r{
  display:grid;grid-template-columns:auto auto auto minmax(0,1fr);
  align-items:start;gap:11px;
  padding:13px 14px 13px 8px;
  border:1px solid var(--border);border-radius:10px;background:var(--surface);
  cursor:grab;
  transition:border-color .14s,box-shadow .14s,opacity .14s;
}
.dcr-prio-r:hover{border-color:var(--border-strong)}
.dcr-prio-r:focus-visible{outline:0;border-color:var(--brand-blue);
  box-shadow:0 0 0 3px rgba(0,76,230,.10)}
.dcr-prio-r.is-dragging{opacity:.4;cursor:grabbing}
.dcr-prio-r.is-over{border-color:var(--brand-blue);
  box-shadow:0 0 0 3px rgba(0,76,230,.10)}
/* Off, not gone. Dropping the row would make the order shorter every time a
   toggle moved, and you would lose the place it will come back to. */
.dcr-prio-r.is-off{background:var(--surface-alt)}
.dcr-prio-r.is-off .dcr-prio-t,.dcr-prio-r.is-off .dcr-prio-ic{opacity:.6}

.dcr-grip{display:grid;place-items:center;width:18px;height:20px;
  color:var(--text-tertiary)}
.dcr-grip svg{width:16px;height:16px;display:block}
.dcr-prio-n{
  flex:0 0 auto;width:20px;height:20px;border-radius:6px;
  display:grid;place-items:center;
  background:var(--surface-alt);color:var(--text-secondary);
  font:600 11px/1 'Inter',sans-serif;font-variant-numeric:tabular-nums;
}
/* A tinted tile per bucket rather than three identical grey glyphs. The
   colour is the thing you tell them apart by while dragging — at that point
   the labels are moving and the marks are not. */
.dcr-prio-ic{
  flex:0 0 28px;width:28px;height:28px;border-radius:8px;
  display:grid;place-items:center;
  background:var(--surface-alt);color:var(--text-secondary);
}
.dcr-prio-ic svg{width:16px;height:16px;display:block}
.dcr-prio-ic.is-blue{background:var(--brand-blue-soft);color:var(--brand-blue)}
.dcr-prio-ic.is-amber{background:#FFFAEB;color:#B54708}
.dcr-prio-ic.is-green{background:#ECFDF3;color:#067647}
body.theme-dark .dcr-prio-ic{background:var(--surface-alt);color:var(--text-secondary)}
body.theme-dark .dcr-prio-ic.is-blue{background:rgba(0,76,230,.18);color:#84ADFF}
body.theme-dark .dcr-prio-ic.is-amber{background:#2A2011;color:#FDB022}
body.theme-dark .dcr-prio-ic.is-green{background:#0E2A1D;color:#6CE9A6}
.dcr-prio-b{display:flex;flex-direction:column;gap:3px;min-width:0}
.dcr-prio-t{font:600 14px/1.35 'Inter',sans-serif;color:var(--text-primary)}
.dcr-prio-s{font:400 13px/1.45 'Inter',sans-serif;color:var(--text-secondary)}
.dcr-prio-sort{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;margin-top:7px;
  font:400 13px/1.5 'Inter',sans-serif;color:var(--text-secondary);
}
.dcr-prio-sep{color:var(--text-tertiary)}

@media (prefers-reduced-motion:reduce){
  .dcr-mode,.dcr-mode-fig,.dcr-prio-r{transition:none}
  /* The busy bar follows the source picker directly, with nothing between them
   to space it — so "2,480 contacts will be dialled" and "Matching your
   columns…" sat flush and read as one double-height block. The stack is on a
   12px rhythm: file, count, bar, table. */
.dcr-bar.is-busy{margin-top:12px}

.dcr-spin{animation-duration:2s}
  .dcr-skel{animation:none}
}

/* ═══ Dark ═══════════════════════════════════════════════════════════════
   Surfaces come from the tokens. Two things they cannot carry: the amber that
   flags a required field, whose colour is meaning rather than surface, and
   every label theme-customiser.css flattens with `body.theme-dark span`. */
body.theme-dark .dcr-mode,
body.theme-dark .dcr-prio-r{background:var(--surface)}
body.theme-dark .dcr-mode.on .mc-src-ic{background:var(--brand-blue);color:#FFFFFF}
body.theme-dark .dcr-prio-n{background:var(--surface-alt)}
body.theme-dark .dcr-bar{background:var(--surface-alt)}
body.theme-dark /* The uploaded-file chip, shared by both create flows. Messaging used to show
   the same file as a grey strip, which read as a note about the file rather
   than the file itself. Named .jc-* rather than .dcr-* because it is no longer
   the dialer's; it stays in this stylesheet because that is where the rest of
   it already was. */
.jc-file{background:#0E2A1D;border-color:#1F5B3C}
body.theme-dark .jc-file-ic{background:var(--success);color:#FFFFFF}
body.theme-dark .jc-file-n{color:#D5F5E3}
body.theme-dark .jc-file-m,body.theme-dark .jc-file-a{color:#6CE9A6}
body.theme-dark .jc-file-a:hover{background:#164A32}
body.theme-dark .dcr-map{background:var(--surface)}
body.theme-dark .dcr-map-h{background:var(--surface-alt)}
body.theme-dark .dcr-prio-r.is-off{background:var(--surface-alt)}
body.theme-dark .dcr-tel-c{background:var(--surface-alt)}
body.theme-dark .dcr-skel{background:var(--surface-panel)}

body.theme-dark .dcr-map-r.is-missing .dcr-map-f{color:#FDB022}
body.theme-dark .dcr-map-r.is-missing .jc-dd{background:#2A2011;border-color:#5A4415}

body.theme-dark .dcr-mode-fig{background:var(--surface-alt)}
body.theme-dark .dcr-col.is-tray{background:var(--brand-blue-soft)}
body.theme-dark .dcr-bdg,
body.theme-dark .dcr-queue .dcr-av{box-shadow:0 0 0 2px var(--surface-alt)}

body.theme-dark .dcr-block-t,
body.theme-dark .dcr-mode-t,
body.theme-dark .dcr-map-f,
body.theme-dark .dcr-prio-t,body.theme-dark .dcr-bar b{color:var(--text-primary)}

body.theme-dark .dcr-mode-l i,
body.theme-dark .dcr-bar,
body.theme-dark .dcr-map-h,body.theme-dark .dcr-prio-s,
body.theme-dark .dcr-prio-sort,body.theme-dark .dcr-prio-n,
body.theme-dark .dcr-tel-c{color:var(--text-secondary)}

body.theme-dark .dcr-map-p,
body.theme-dark .dcr-prio-sep,
body.theme-dark .dcr-grip{color:var(--text-tertiary)}