/* ═══════════════════════════════════════════════════════════════════════════
   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.
   ═══════════════════════════════════════════════════════════════════════════ */

/* W2_SPREAD_V1 — the order table above was DELETED. It was a second,
   disagreeing authority: it ordered .card[data-sec], w2order-canon.css
   orders .scroll > [data-sec], and the two lists were in different
   sequences. w2order-canon.css is the only order. This file keeps only
   the typography of the FREE text card, which nothing else states. */

/* ── 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; }