/* ═══ Stepper ════════════════════════════════════════════════════════════════
   A horizontal stepper for multi-step flows. Shared on purpose: this is meant
   to be the one stepper in the product, so anything that needs steps reaches
   for it rather than drawing its own.

   It replaces the pattern in contact-import.css (.ci-step*), which this
   supersedes. That wizard has not been migrated yet — doing it is a class
   swap, not a redesign.

   Three things it does that the old one did not:

     1. Each step carries the value that was chosen in it, under the label.
        That summary line is the whole point. It is what lets someone jump
        back four steps without opening one to remember what is in it.

     2. The connecting rule fills as you advance, so "how much is left" is
        answered by the stepper itself rather than by a separate progress bar.

     3. A completed step is a real button. Back-navigation is the most common
        thing anyone does in a wizard, and it should not require the Back
        button and three clicks.

   Markup:

     <nav class="jc-stepper" aria-label="Progress">
       <button class="jc-step is-done" type="button">
         <span class="jc-step-top">
           <span class="jc-step-dot">{tick svg}</span>
           <span class="jc-step-label">Audience &amp; sender</span>
         </span>
         <span class="jc-step-sum">Trial signups · 56</span>
       </button>
       <span class="jc-step-rule is-filled"></span>
       <button class="jc-step is-current" type="button" aria-current="step"> … </button>
       <span class="jc-step-rule"></span>
       <button class="jc-step" type="button" disabled> … </button>
     </nav>

   States: default (not reached), .is-done, .is-current. A step that cannot be
   jumped to takes `disabled` — the styling follows the state class, so the two
   are set independently.
   ────────────────────────────────────────────────────────────────────────── */

.jc-stepper{
  display:flex;
  align-items:flex-start;
  gap:0;
  min-width:0;
}

.jc-step{
  flex:0 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  /* A button, so reset the chrome rather than inherit it. */
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  font-family:'Inter',system-ui,sans-serif;
  text-align:left;
  cursor:default;
  border-radius:8px;
}
.jc-step:not([disabled]):not(.is-current){cursor:pointer}
.jc-step[disabled]{cursor:default}
.jc-step:focus-visible{
  outline:2px solid var(--brand-blue);
  outline-offset:4px;
}

.jc-step-top{display:flex;align-items:center;gap:8px;min-width:0}

.jc-step-dot{
  flex:0 0 24px;width:24px;height:24px;
  border-radius:999px;
  display:inline-grid;place-items:center;
  border:1.5px solid var(--border-strong);
  background:var(--surface);
  color:var(--text-tertiary);
  /* The grid centres the digit, but a line-height of 1 clips the box to the
     em and digits then sit a fraction high. Normal, centred, puts them on the
     optical middle. */
  line-height:normal;
  font:600 12px/1 'Inter',sans-serif;
  font-variant-numeric:tabular-nums;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.jc-step-dot svg{width:13px;height:13px;display:block}

/* 400, not 600. Every label was bold, so nothing about the type said which
   step you were on — colour was carrying it alone, and three bold greys beside
   one bold blue reads as four headings. Weight climbs with state now: 400
   upcoming, 500 done, 600 current. */
.jc-step-label{
  font:400 14px/1.2 'Inter',sans-serif;
  color:var(--text-tertiary);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:color .18s ease;
}

/* Indented to sit under the label, not under the dot. */
.jc-step-sum{
  padding-left:33px;
  font:400 12px/1.3 'Inter',sans-serif;
  color:var(--text-tertiary);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
  font-variant-numeric:tabular-nums;
}

/* ── Done: filled, not active ──
   The middle state. Done used to be solid blue and current a soft blue ring,
   which made a finished step louder than the one you are on. It reads
   outline -> soft fill -> solid fill now, so the eye lands on current and the
   steps behind it are visibly finished without competing. */
.jc-step.is-done .jc-step-dot{
  background:var(--brand-blue-soft);
  border-color:transparent;
  color:var(--brand-blue);
}
.jc-step.is-done .jc-step-label{font-weight:500;color:var(--text-secondary)}
.jc-step.is-done .jc-step-sum{color:var(--text-secondary)}
.jc-step.is-done:not([disabled]):hover .jc-step-label{color:var(--brand-blue)}

/* ── Current: solid ──
   The loudest of the three, and the only one carrying weight in its label.
   The 3px ring is gone — it was a box-shadow, and the fill already says which
   step this is. */
.jc-step.is-current .jc-step-dot{
  background:var(--brand-blue);
  border-color:var(--brand-blue);
  color:#FFFFFF;
}
.jc-step.is-current .jc-step-label{font-weight:600;color:var(--brand-blue)}
.jc-step.is-current .jc-step-sum{color:var(--text-secondary)}

/* ── The rule between two steps ── */
.jc-step-rule{
  flex:1 1 auto;
  min-width:24px;
  height:1.5px;
  margin:11px 12px 0;
  border-radius:2px;
  background:var(--border);
  position:relative;
  overflow:hidden;
}
/* Fills left-to-right rather than swapping colour, so advancing a step reads
   as movement along the flow. */
.jc-step-rule::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--brand-blue);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .32s cubic-bezier(.32,.72,0,1);
}
.jc-step-rule.is-filled::after{transform:scaleX(1)}

/* ── Compact: drops the summary line ──
   For a stepper in a modal header or anywhere under ~700px, where the summary
   would truncate to uselessness rather than tell you anything. */
.jc-stepper.is-compact .jc-step-sum{display:none}
.jc-stepper.is-compact .jc-step-dot{flex-basis:22px;width:22px;height:22px}
/* One down from the base, which is 14. */
.jc-stepper.is-compact .jc-step-label{font-size:13px}

/* Below this the labels themselves stop fitting, so the stepper keeps the
   numbers and the current step's label and drops the rest — the shape still
   reads as "step 3 of 4" even when it cannot spell them out. */
@media (max-width:720px){
  .jc-step-sum{display:none}
  .jc-step:not(.is-current) .jc-step-label{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  }
  .jc-step-rule{min-width:12px;margin:11px 8px 0}
}

@media (prefers-reduced-motion:reduce){
  .jc-step-dot,.jc-step-label,.jc-step-rule::after{transition:none}
}

/* Dark mode: the dot's ground is a surface, so it takes the tokens, but the
   done state's white tick is a literal and has to be restated — and
   theme-customiser.css flattens span colour to inherit at (0,1,2), which
   outweighs a single class, so the label and summary restate too. */
body.theme-dark .jc-step-dot{background:var(--surface-alt);border-color:var(--border-strong);color:var(--text-tertiary)}
body.theme-dark .jc-step.is-done .jc-step-dot{background:var(--brand-blue-soft);border-color:transparent;color:var(--brand-blue)}
body.theme-dark .jc-step.is-current .jc-step-dot{background:var(--brand-blue);border-color:var(--brand-blue);color:#FFFFFF}
body.theme-dark .jc-step-label,body.theme-dark .jc-step-sum{color:var(--text-tertiary)}
body.theme-dark .jc-step.is-done .jc-step-label{color:var(--text-secondary)}
body.theme-dark .jc-step.is-current .jc-step-label{color:var(--brand-blue)}
body.theme-dark .jc-step.is-done .jc-step-sum,
body.theme-dark .jc-step.is-current .jc-step-sum{color:var(--text-secondary)}
body.theme-dark .jc-step-rule{background:var(--border)}