/* ═══════════════════════════════════════════════════════════════════════════
   W2 — THE SECTION ORDER. Stated once. Here.

   Before this file the order was never written down anywhere. It was IMPLIED,
   three times over, by where each card happened to sit inside its mode branch:

       free      Position · Text · Style · QR
       mascot    Position · Text · QR
       custom    Position · Heart colour · Heart style · Style · QR

   Switching mode therefore did not "shift" the sections — it replaced them with
   a different set, in a different order. Three implicit orders, disagreeing.

   Now there is one order, and it is a fact you can read:

       style → position → what to print → text → qr → size → colour

   Flex `order` is the mechanism for exactly this. The point is not the mechanism;
   the point is that the order now lives in ONE place and can be changed in one.
   ═══════════════════════════════════════════════════════════════════════════ */

.scroll { display: flex; flex-direction: column; }

/* Unnamed cards fall to the end rather than jumping the queue. */
.card { order: 20; }

.card[data-sec="style"]      { order: 1; }
.card[data-sec="heartcolor"] { order: 2; }
.card[data-sec="heartstyle"] { order: 3; }
.card[data-sec="textstyle"]  { order: 4; }
.card[data-sec="position"]   { order: 5; }
.card[data-sec="print"]      { order: 6; }
.card[data-sec="text"]       { order: 7; }   /* FREE only — the two inputs */
.card[data-sec="qr"]         { order: 8; }
.card[data-sec="size"]       { order: 9; }
.card[data-sec="color"]      { order: 10; }

/* ── the heading no longer presses against the section above it ──────────── */
.card[data-sec="text"] .sec-t {
  margin-top: 6px;
  margin-bottom: 14px;
  text-align: center;
}

/* the phrase above the inputs sits in the middle, not against the ceiling */
.card[data-sec="text"] .phr-hint,
.card[data-sec="text"] .phr-pre {
  text-align: center;
  width: 100%;
  margin: 6px 0 2px;
}

/* ── changing mode should read as a change, not a rebuild ────────────────── */
.card { transition: opacity 200ms ease; }