/* ============================================================================
   flow.css — /publish, the memory-upload flow (the page sheet for flow.js)
   ----------------------------------------------------------------------------
   The route `/publish` with NO `?run=` is this flow; `/publish?run=<id>` is
   still the memory compiler and is dressed by publish.css, which this sheet
   never touches. Both live on publish.html, so this file styles only its own
   `.pf-*` / `.bbx-*` furniture and the composer's `cmp-*` DOM, which the flow
   carries over verbatim so the harness contract survives the re-homing. None of
   those `cmp-*` rules can collide: sprint22.css (their other home) is loaded by
   network.html only.

   Load order: tokens.css → tokens-dark.css → shell.css → publish.css → this.
   The two shared modules it needs are @imported at the top, the way shell.css
   imports topnav.css, so publish.html gains exactly one <link>.

   DESIGN-RULES §0.1: not one literal colour below. Every value resolves through
   src/shared/tokens.css, so tokens-dark.css re-points the whole sheet.

   Motion (§5): opacity, transform and filter only, on the one ease `--ease-g`
   and the four transition durations `--d-exit` / `--d-swap` / `--d-enter` /
   `--d-rail`. No bounce, no spring, no scale on hover (only the primary's
   `:active { scale(.98) }`), nothing that autoplays at rest.

   Geometry: the body column is 640px inside a 980px flow inside publish.css's
   1180px document frame; the chooser's two cards fill that frame.
   ========================================================================== */

@import url("../shared/stepper.css");
@import url("../shared/lattice-loader.css");

/* ── the route line and the page's own small type ────────────────────────── */

.pf-route{
  font:var(--fs-sm) var(--font-mono); letter-spacing:.06em;
  color:var(--graphite); margin-bottom:var(--sp-16); word-break:break-all;
}
.pf-note{ color:var(--graphite); font-size:var(--fs-md); line-height:1.6; }
.pf-fine{
  display:block; color:var(--graphite);
  font-size:var(--fs-md); line-height:1.55; margin-top:var(--sp-5);
}
.pf-mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.pf-sectlabel{
  font:var(--fw-bold) var(--fs-sm) var(--font-mono); letter-spacing:.1em;
  text-transform:uppercase; color:var(--acc); margin-bottom:var(--sp-11);
}

/* ── the stage, and the one entrance it is allowed ───────────────────────── */

.pf-stage.is-entering{ animation:pf-rise var(--d-enter) var(--ease-g) both; }
@keyframes pf-rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* ── the two chooser cards (the BLACKBOX recipe, on Cognia's tokens) ─────── */

.bbx-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:var(--sp-15); align-items:stretch;
}
@media (max-width:860px){ .bbx-grid{ grid-template-columns:1fr; } }

.bbx{
  position:relative; cursor:pointer;
  display:flex; flex-direction:column;
  border:1px solid var(--border); border-radius:var(--r-16);
  background:var(--paper-93);
  -webkit-backdrop-filter:var(--blur-card); backdrop-filter:var(--blur-card);
  box-shadow:var(--sh-1-card);
  transition:border-color var(--d-exit) var(--ease-g), box-shadow var(--d-exit) var(--ease-g);
}
@media (hover:hover){
  .bbx:hover{ border-color:var(--brand-55); box-shadow:var(--sh-2); }
}
.bbx:has(.bbx-primary:focus-visible){
  border-color:var(--brand-55); box-shadow:var(--sh-2);
  outline:2px solid var(--brand); outline-offset:2px;
}
.bbx.is-chosen{ animation:pf-lift var(--d-enter) var(--ease-g) both; }
.bbx.is-dropped{ animation:pf-drop var(--d-exit) ease-in both; }
@keyframes pf-lift{ from{ opacity:1; transform:none; } to{ opacity:0; transform:translateY(-10px) scale(1.012); } }
@keyframes pf-drop{ from{ opacity:1; transform:none; } to{ opacity:0; transform:translateY(6px) scale(.99); } }

.bbx-band{
  position:relative; height:200px; overflow:hidden;
  border-bottom:1px solid var(--border); background:var(--paper);
  border-radius:var(--r-16) var(--r-16) 0 0;
}
/* The band's recording: a silent, looping screen capture of the path this card
   offers. GREYED AND STILL AT REST, full colour and playing under the reader —
   the BLACKBOX contract (publish-refs/blackbox-card.md), on Cognia's one ease
   and its 320 ms entrance step. `--bbx-hue` is the ground the poster loads over
   so the band is never a white hole on a slow connection. */
.bbx-band{ background-color:var(--bbx-hue); }
.bbx-video{
  display:block; position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(.9) brightness(.62);
  transition:filter var(--d-enter) var(--ease-g);
}
/* the card's own listeners set data-state, so the band wakes wherever on the
   card the pointer or the keyboard arrives */
.bbx[data-state="playing"] .bbx-video{ filter:none; }
@media (hover:hover){ .bbx:hover .bbx-video{ filter:none; } }
.bbx:has(.bbx-primary:focus-visible) .bbx-video{ filter:none; }
/* The scrims exist so the card's NAME and STAMP stay readable over whatever the
   recording is doing underneath. Three stops rather than two: the footage is a
   screen capture, so it carries its own type, and a straight linear fade leaves
   the middle of the band competing with the overlay. */
.bbx-scrim-t, .bbx-scrim-b{ position:absolute; left:0; right:0; pointer-events:none; }
.bbx-scrim-t{
  top:0; height:84px;
  background:linear-gradient(to bottom, var(--paper-97) 0%, var(--paper-93) 42%, transparent 100%);
}
.bbx-scrim-b{
  bottom:0; height:72px;
  background:linear-gradient(to top, var(--paper-97) 0%, var(--paper-93) 46%, transparent 100%);
}

.bbx-name{
  position:absolute; top:var(--sp-17); left:var(--sp-18); z-index:2;
  font:var(--fw-bold) var(--fs-sm) var(--font-mono); letter-spacing:.14em;
  text-transform:uppercase; color:var(--graphite);
  transition:color var(--d-enter) var(--ease-g);
}
@media (hover:hover){ .bbx:hover .bbx-name{ color:var(--ink); } }
.bbx:has(.bbx-primary:focus-visible) .bbx-name{ color:var(--ink); }
.bbx-stamp{
  position:absolute; left:var(--sp-18); right:var(--sp-18); bottom:var(--sp-11); z-index:2;
  font:var(--fs-md)/1.5 var(--font-mono); color:var(--graphite);
}

.bbx-copy{ padding:var(--sp-18); display:flex; flex-direction:column; flex:1; }
.bbx-title{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-11); }
.bbx-title h2{
  font:var(--fw-medium) 22px/1.2 var(--font-display);
  letter-spacing:-.01em; color:var(--ink);
}
.bbx-tag{
  flex:none; font:var(--fw-semibold) var(--fs-xs) var(--font-mono); letter-spacing:.1em;
  text-transform:uppercase; color:var(--brand);
  padding:3px var(--sp-7); border-radius:var(--r-full); background:var(--brand-12);
}
.bbx-thesis{
  margin-top:var(--sp-11); min-height:42px;
  color:var(--graphite); font-size:var(--fs-xl);
}
.bbx-facts{
  display:grid; grid-template-columns:1fr 1.28fr; gap:var(--sp-17);
  margin-top:var(--sp-17); padding-top:var(--sp-15);
  border-top:1px solid var(--border);
}
.bbx-facts dt{
  font:var(--fw-bold) var(--fs-xs) var(--font-mono); letter-spacing:.12em;
  text-transform:uppercase; color:var(--graphite); margin-bottom:var(--sp-5);
}
.bbx-facts dd{ margin:0; font-size:var(--fs-base-p); line-height:1.5; color:var(--ink); }

.bbx-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:var(--sp-17); }
.bbx-primary{
  appearance:none; border:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:space-between; gap:var(--sp-11);
  min-width:168px; min-height:44px; padding:0 var(--sp-13);
  border-radius:var(--r-11); background:var(--brand); color:var(--on-brand,var(--white));
  font:var(--fw-semibold) var(--fs-lg) var(--font-body);
  transition:opacity var(--d-exit) var(--ease-g), transform var(--d-exit) var(--ease-g);
}
/* the whole card is ONE target: the card's only control covers it */
.bbx-primary::after{ content:""; position:absolute; inset:0; border-radius:var(--r-16); }
@media (hover:hover){ .bbx:hover .bbx-primary{ opacity:.9; } }
.bbx:active .bbx-primary{ transform:scale(.98); }
.bbx-primary:focus-visible{ outline:none; }   /* the ring is drawn on the card */

/* ── the flow: rail, body, footer ────────────────────────────────────────── */

.pf-flow{ max-width:980px; }
.pf-flow .cg-stepper{ margin-bottom:var(--sp-18); }
@media (max-width:719px){ .pf-flow .cg-stepper{ margin-bottom:var(--sp-17); } }

.pf-body{ max-width:640px; margin:0 auto; }
.pf-body.is-swapping{ animation:pf-swap var(--d-swap) var(--ease-g) both; }
@keyframes pf-swap{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.pf-body h2{
  font:var(--fw-medium) var(--fs-20) var(--font-display);
  letter-spacing:-.02em; line-height:1.25;
}
.pf-body h2:focus-visible{ outline:2px solid var(--brand); outline-offset:4px; }
.pf-sub{ margin-top:var(--sp-5); color:var(--graphite); font-size:var(--fs-lg); }
.pf-block{ margin-top:var(--sp-17); }

.pf-foot{
  display:flex; align-items:center; gap:var(--sp-11);
  max-width:640px; margin:var(--sp-18) auto 0;
  padding-top:var(--sp-15); border-top:1px solid var(--border);
}
.pf-spacer{ flex:1; }

/* ── controls: Recipe A (primary) + the ghost secondary ──────────────────── */

.pf-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-5);
  min-height:44px; padding:0 var(--sp-15);
  border:0; border-radius:var(--r-11);
  background:var(--brand); color:var(--on-brand,var(--white));
  font-family:var(--font-body); font-size:var(--fs-lg); font-weight:var(--fw-semibold);
  text-decoration:none; cursor:pointer;
  transition:opacity var(--d-exit) var(--ease-g), transform var(--d-exit) var(--ease-g);
}
@media (hover:hover){ .pf-btn:hover{ opacity:.9; } }
.pf-btn:active{ transform:scale(.98); }
.pf-btn:disabled{ opacity:.6; cursor:default; transform:none; }
.pf-btn:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.pf-btn.ghost{
  background:var(--paper-93); color:var(--ink);
  border:1px solid var(--brand-20);
  transition:border-color var(--d-exit) var(--ease-g), background-color var(--d-exit) var(--ease-g);
}
@media (hover:hover){
  .pf-btn.ghost:hover{ border-color:var(--brand-55); background:var(--brand-08); opacity:1; }
}
.pf-btn.sm{ min-height:40px; padding:0 var(--sp-11); font-size:var(--fs-base-p); }
@media (pointer:coarse){ .pf-btn.sm{ min-height:44px; } }

.pf-actions{ display:flex; gap:var(--sp-9); flex-wrap:wrap; margin-top:var(--sp-11); }

/* ── fields — §9's editor rule ───────────────────────────────────────────── */

.cmp-field{ display:block; margin-top:var(--sp-11); }
.cmp-field > label{
  display:block; margin-bottom:var(--sp-5);
  font:var(--fw-bold) var(--fs-sm) var(--font-mono); letter-spacing:.1em;
  text-transform:uppercase; color:var(--graphite);
}
.cmp-field > label span{ text-transform:none; letter-spacing:0; opacity:.78; }
.cmp-field input, .cmp-field textarea, .cmp-field select{
  width:100%; background:var(--paper-93); color:var(--ink);
  border:1px solid var(--border); border-radius:var(--r-11);
  padding:var(--sp-5) var(--sp-8);
  font-family:var(--font-body); font-size:var(--fs-md);
}
.cmp-field textarea{ resize:vertical; min-height:62px; line-height:1.5; }
.cmp-field input:focus, .cmp-field textarea:focus, .cmp-field select:focus{
  outline:none; border-color:var(--brand);
}
.cmp-field input:focus-visible, .cmp-field textarea:focus-visible, .cmp-field select:focus-visible{
  outline:2px solid var(--brand); outline-offset:1px;
}
.cmp-row{ display:flex; gap:var(--sp-7); }
.cmp-row > .cmp-field{ flex:1; min-width:0; }
@media (max-width:719px){ .cmp-row{ flex-direction:column; gap:0; } }
.cmp-capture textarea{ min-height:168px; font-size:var(--fs-base-p); line-height:1.5; }

/* the spec's "Upload context" door, kept on the Write step */
.cmp-door{
  display:grid; gap:var(--sp-5); margin-top:var(--sp-17);
  padding:var(--sp-11) var(--sp-12);
  border:1px dashed var(--border); border-radius:var(--r-11); background:var(--paper-93);
}
.cmp-door-t{
  font:var(--fw-bold) var(--fs-xs) var(--font-mono); letter-spacing:.12em;
  text-transform:uppercase; color:var(--graphite);
}
.cmp-door .pf-btn{ justify-content:flex-start; }
.cmp-door-n{ font-size:var(--fs-md); line-height:1.5; color:var(--graphite); }

/* ── review rows, chips and the Edit details editor ──────────────────────── */

.pf-rv{ margin-top:var(--sp-15); }
.cmp-rvrow{ margin-top:var(--sp-11); }
.cmp-rvrow > span{
  display:block; font:var(--fs-xs) var(--font-mono); letter-spacing:.1em;
  text-transform:uppercase; color:var(--graphite); margin-bottom:var(--sp-3);
}
.cmp-rvrow > div{ color:var(--ink); font-size:var(--fs-md); line-height:1.45; }
.cmp-rvrow ol.v2list{ list-style:decimal; padding-left:var(--sp-16); margin:0; }

.pf-chips{ display:flex; gap:var(--sp-5); margin-top:var(--sp-9); flex-wrap:wrap; }
.pf-chip{
  font:var(--fw-semibold) var(--fs-sm) var(--font-mono); letter-spacing:.1em;
  text-transform:uppercase; padding:3px var(--sp-7); border-radius:var(--r-full);
  background:var(--brand-12); color:var(--brand);
}
.pf-chip.ghost{ background:transparent; color:var(--graphite); border:1px solid var(--border); }

details.cmp-details{ margin-top:var(--sp-15); }
details.cmp-details > summary{
  cursor:pointer; list-style:none;
  display:inline-flex; align-items:center; gap:var(--sp-5);
  color:var(--brand); font-weight:var(--fw-semibold); font-size:var(--fs-md);
  min-height:44px;
}
details.cmp-details > summary::-webkit-details-marker{ display:none; }
details.cmp-details > summary::before{
  content:"\25B8"; display:inline-block;
  transition:transform var(--d-exit) var(--ease-g);
}
details.cmp-details[open] > summary::before{ transform:rotate(90deg); }
details.cmp-details > summary:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.cmp-editor{
  padding:var(--sp-11) var(--sp-13) var(--sp-13);
  border:1px solid var(--border); border-radius:var(--r-11);
  background:var(--paper-93); margin-top:var(--sp-5);
}

/* ── attention / notice / error blocks ───────────────────────────────────── */

/* the shipped .cmp-attn recipe, verbatim */
.cmp-attn{
  margin-top:var(--sp-11); padding:var(--sp-7) var(--sp-9);
  border-left:2px solid var(--warn); border-radius:0 var(--r-8) var(--r-8) 0;
  background:var(--paper-72); font-size:11.5px; line-height:1.55; color:var(--ink);
}
.cmp-attn b{ color:var(--ink); }
.pf-notice{
  margin-top:var(--sp-11); padding:var(--sp-7) var(--sp-9);
  border:1px solid var(--border); border-radius:var(--r-8);
  background:var(--paper-72); font-size:11.5px; line-height:1.55; color:var(--graphite);
}
/* the status line every step carries — empty until something is said */
#cmp-out{ display:block; }
#cmp-out:empty{ display:none; }
#cmp-out.cmp-result{
  margin-top:var(--sp-11); color:var(--graphite);
  font-size:var(--fs-base-p); line-height:1.55;
}
#cmp-out.cmp-result.err{
  padding:var(--sp-8) var(--sp-9);
  border:1px solid var(--danger); border-radius:var(--r-11);
  background:var(--paper-93); color:var(--danger-text);
}
#cmp-out.cmp-result.err b{ color:var(--danger-text); }
#cmp-out .cmp-fine{
  display:block; color:var(--graphite); font-size:var(--fs-md);
  line-height:1.55; margin-top:var(--sp-5);
}

/* ── destination radios ──────────────────────────────────────────────────── */

.cmp-choice{
  display:grid; grid-template-columns:20px 1fr; gap:var(--sp-9);
  margin-top:var(--sp-9); padding:var(--sp-8);
  min-height:44px; align-content:center;
  border:1px solid var(--border); border-radius:var(--r-11);
  background:var(--glass-fill-50); cursor:pointer;
  transition:border-color var(--d-exit) var(--ease-g), background-color var(--d-exit) var(--ease-g);
}
@media (hover:hover){ .cmp-choice:hover{ border-color:var(--brand-55); } }
.cmp-choice:has(input:checked){ border-color:var(--brand); background:var(--brand-08); }
.cmp-choice:has(input:focus-visible){ outline:2px solid var(--brand); outline-offset:2px; }
.cmp-choice input{
  grid-row:1/3; width:18px; height:18px; margin:2px 0 0;
  accent-color:var(--brand);
}
.cmp-choice-t{ display:block; font-size:var(--fs-lg); font-weight:var(--fw-semibold); }
.cmp-choice-n{
  display:block; margin-top:var(--sp-3);
  color:var(--graphite); font-size:var(--fs-md); line-height:1.5;
}

/* ── dropzone + file card ────────────────────────────────────────────────── */

.cmp-drop{
  display:grid; justify-items:center; gap:var(--sp-7);
  padding:var(--sp-19) var(--sp-13); margin-top:var(--sp-15);
  border:1.5px dashed var(--border); border-radius:var(--r-12);
  background:var(--paper-93); text-align:center;
  transition:border-color var(--d-exit) var(--ease-g), background-color var(--d-exit) var(--ease-g);
}
.cmp-drop.is-over{ border-color:var(--brand); background:var(--brand-06); }
.cmp-drop.is-bad{ border-color:var(--danger); }
.cmp-drop-t{ font-size:var(--fs-xl); font-weight:var(--fw-medium); }
.cmp-drop-or{ color:var(--graphite); font-size:var(--fs-md); }
.cmp-filelabel{ cursor:pointer; }
.cmp-fileinput{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
.cmp-fileinput:focus-visible + .cmp-filelabel,
.cmp-drop:focus-within{ outline:2px solid var(--brand); outline-offset:3px; }

.cmp-file{
  display:flex; align-items:center; gap:var(--sp-9); margin-top:var(--sp-11);
  padding:var(--sp-8) var(--sp-9);
  border:1px solid var(--border); border-radius:var(--r-11); background:var(--paper-93);
}
.cmp-file-ic{
  flex:none; display:grid; place-items:center; width:38px; height:38px;
  border-radius:var(--r-8); background:var(--brand-12); color:var(--brand);
  font:var(--fw-bold) var(--fs-sm) var(--font-mono);
}
.cmp-file-t{ flex:1; min-width:0; }
.cmp-file-t b{ font-size:var(--fs-lg); overflow-wrap:anywhere; }
.cmp-file-n{
  display:block; color:var(--graphite);
  font-size:var(--fs-md); font-family:var(--font-mono);
}

/* ── candidates ──────────────────────────────────────────────────────────── */

.cmp-cands{ margin-top:var(--sp-11); display:grid; gap:var(--sp-9); padding:0; list-style:none; }
.cmp-cand{
  padding:var(--sp-11); border:1px solid var(--border); border-radius:var(--r-11);
  background:var(--paper-93);
  transition:border-color var(--d-exit) var(--ease-g);
}
.cmp-cand.is-on{ border-color:var(--brand-55); }
.cmp-cand.is-attn{ border-color:var(--warn); }
.cmp-cand-h{ display:flex; align-items:flex-start; gap:var(--sp-9); }
.cmp-cand-h input{
  width:22px; height:22px; flex:none; margin:0;
  accent-color:var(--brand); cursor:pointer;
}
.cmp-cand-h input:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.cmp-cand-t label{
  display:block; font-size:var(--fs-xl); font-weight:var(--fw-medium);
  cursor:pointer; min-height:22px;
}
.cmp-cand-meta{
  display:block; margin-top:2px;
  font:var(--fw-bold) var(--fs-xs) var(--font-mono); letter-spacing:.1em;
  text-transform:uppercase; color:var(--brand);
}
.cmp-cand-b{ margin-top:var(--sp-8); padding-left:calc(22px + var(--sp-9)); }
.cmp-cand-b .cmp-fine{
  display:block; color:var(--graphite);
  font-size:var(--fs-md); line-height:1.55; margin-top:var(--sp-5);
}

/* ── outcomes and the success plate ──────────────────────────────────────── */

.cmp-outcomes{ display:grid; gap:var(--sp-8); margin-top:var(--sp-15); padding:0; list-style:none; }
.cmp-outcome{ display:flex; gap:var(--sp-9); align-items:flex-start; }
.cmp-outcome-ic{
  flex:none; display:grid; place-items:center; width:22px; height:22px;
  border-radius:50%; color:var(--on-brand,var(--white));
  font:var(--fw-bold) var(--fs-md) var(--font-body);
}
.cmp-outcome.ok .cmp-outcome-ic{ background:var(--ok); }
.cmp-outcome.attn .cmp-outcome-ic{ background:var(--warn); }
.cmp-outcome b{ display:block; font-size:var(--fs-lg); }
.cmp-outcome span{ display:block; color:var(--graphite); font-size:var(--fs-md); line-height:1.5; }

.pf-plate{
  margin-top:var(--sp-15); padding:var(--sp-15);
  border:1px solid var(--brand-20); border-radius:var(--r-16);
  background:var(--paper-66); box-shadow:var(--sh-4-panel);
  -webkit-backdrop-filter:var(--blur-panel); backdrop-filter:var(--blur-panel);
}
.pf-plate-title{
  font:var(--fw-medium) var(--fs-17) var(--font-display); letter-spacing:-.02em;
}
.pf-plate-id{ margin-top:var(--sp-5); font:var(--fs-md) var(--font-mono); color:var(--graphite); }
.pf-plate .cmp-done{ margin-top:var(--sp-9); color:var(--graphite); font-size:var(--fs-md); line-height:1.6; }
.pf-plate .cmp-done b{ color:var(--ink); }
.cmp-fine{ color:var(--graphite); font-size:var(--fs-md); line-height:1.55; }

/* ── the extract step: the ordered "finite sequence, not a spinner" ──────── */

.extract-stage{
  display:grid; justify-items:center; gap:var(--sp-15);
  padding:var(--sp-22) var(--sp-15); margin-top:var(--sp-15);
  border:1px solid var(--brand-20); border-radius:var(--r-16);
  background:var(--paper-66); box-shadow:var(--sh-4-panel);
  -webkit-backdrop-filter:var(--blur-panel); backdrop-filter:var(--blur-panel);
}
@media (max-width:719px){ .extract-stage{ padding:var(--sp-18) var(--sp-11); } }

.cmp-progress{ display:grid; gap:var(--sp-7); margin:0; padding:0; list-style:none; }
.cmp-step{
  display:flex; align-items:center; gap:var(--sp-9);
  color:var(--graphite); font-size:var(--fs-md);
}
.cmp-step::before{
  content:""; flex:none; width:8px; height:8px; border-radius:50%;
  background:var(--border);
  transition:background-color var(--d-swap) var(--ease-g), box-shadow var(--d-swap) var(--ease-g);
}
.cmp-step.is-now{ color:var(--ink); }
.cmp-step.is-now::before{ background:var(--paper); box-shadow:0 0 0 3px var(--brand); }
.cmp-step.is-done::before{ background:var(--brand); }

/* ── phone ───────────────────────────────────────────────────────────────── */

@media (max-width:719px){
  .bbx-band{ height:150px; }
  .bbx-copy{ padding:var(--sp-17); }
  .bbx-title h2{ font-size:19px; }
  .bbx-facts{ grid-template-columns:1fr; gap:var(--sp-11); }
  .bbx-actions{ margin-top:var(--sp-15); }
  .bbx-primary{ min-width:0; width:100%; }
  .pf-foot{ flex-wrap:wrap; }
  .pf-foot .pf-btn{ flex:1 1 auto; }
  .pf-route{ margin-bottom:var(--sp-13); }
}

/* ── the compiler's paragraph reset, taken back ───────────────────────────────
   publish.css flattens every <p> inside .pb-main — `margin: 0`, then a 10px
   `p + p` — because the compiler's panels set their own rhythm and its copy is
   nearly all paragraphs. Those rules are (0,1,1) and (0,1,2), so they outrank
   the flow's own single-class rules above and silently collapse its spacing.
   These re-state exactly the values already declared, one specificity step
   higher, and reach nothing outside the flow. Do not "simplify" them away:
   without them the route line, the section labels, the sub-lines and every
   notice sit flush against what follows. */
.pb-main .pf-route{ margin:0 0 var(--sp-16); }
.pb-main .pf-fine, .pb-main .pf-sub{ margin:var(--sp-5) 0 0; }
.pb-main .pf-sectlabel{ margin:0 0 var(--sp-11); }
.pb-main .pf-block{ margin-top:var(--sp-17); }
.pb-main .bbx-thesis, .pb-main .cmp-attn, .pb-main .pf-notice{ margin:var(--sp-11) 0 0; }
.pb-main .pf-plate-id{ margin:var(--sp-5) 0 0; }
.pb-main .pf-plate .cmp-done{ margin:var(--sp-9) 0 0; }
.pb-main .cmp-cand-b .cmp-fine{ margin:var(--sp-5) 0 0; }
/* the drop zone is a grid with its own gap: no paragraph margins inside it */
.pb-main .cmp-drop p{ margin:0; }
@media (max-width:719px){ .pb-main .pf-route{ margin-bottom:var(--sp-13); } }

/* ── reduced motion: the finished state, pinned (DESIGN-RULES §0.4) ──────── */

@media (prefers-reduced-motion:reduce){
  /* the band never plays and never wakes: the poster is the whole band */
  .bbx-video, .bbx[data-state="playing"] .bbx-video, .bbx:hover .bbx-video,
  .bbx:has(.bbx-primary:focus-visible) .bbx-video{
    filter:grayscale(1) contrast(.9) brightness(.62) !important;
  }
  .pf-stage, .pf-body, .bbx, .bbx-video, .bbx-name, .bbx-primary,
  .cmp-choice, .cmp-cand, .cmp-drop, .cmp-step::before,
  details.cmp-details > summary::before, .pf-btn{
    animation:none !important; transition:none !important;
  }
  .pf-btn:active, .bbx:active .bbx-primary{ transform:none; }
}