/* ==========================================================================
   How it works page: step visuals. Loaded by how-it-works.html after
   assets/styles.css (the homepage's assets/home.css follows the same
   pattern). Uses the tokens from styles.css section 1; the pass-type accent
   themes (html[data-pass]) apply here too.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Step 01: designer preview
   -------------------------------------------------------------------------- */
/* [hiw-designer] */
/* A light glimpse of the Pass Designer (@stow/ui PassDesignerWizard): a dotted design canvas holding the
   live preview, the designer's Apple Wallet / Google Wallet switch (radio inputs, CSS only via :has), and
   three small cards from the Brand step floating beside the pass. The pass faces are the shared .pass-card
   and .google-pass components (styles.css section 12). The canvas lays itself out by its own width
   (container dz-canvas): floating cards beside the pass from 500px, a tidy row under it below that. */
.dz-chips { list-style: none; margin: 24px 0 0; padding: 0; }
.dz-chips__n {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin: 0 7px 0 -5px;
  border-radius: 50%;
  background: rgba(92, 58, 33, .12);
  font-size: 11px;
  line-height: 1;
}

.dz-stage {
  max-width: 560px;
  margin-inline: auto;
  display: grid;
  justify-items: center;
  gap: 20px;
  padding: 24px 22px 18px;
  border-radius: var(--radius-lg);
  background: radial-gradient(circle, rgba(92, 58, 33, .15) 1px, transparent 1.5px) 0 0 / 18px 18px, var(--surface);
  box-shadow: var(--shadow-card);
}

.dz-seg {
  position: relative;
  display: inline-flex;
  gap: 2px;
  min-width: 0;
  margin: 0;
  padding: 3px;
  border: 0;
  border-radius: 12px;
  background: var(--oat-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.dz-seg input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.dz-seg label {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 13px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-2);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.dz-seg label:hover { color: var(--ink); background: rgba(255, 252, 247, .5); }
.dz-seg input:checked + label { background: #FFFCF7; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line), 0 1px 3px rgba(43, 26, 18, .16); }
.dz-seg input:focus-visible + label { outline: 2.5px solid var(--brand); outline-offset: 2px; }

/* Both faces share one grid cell, so switching never moves the layout; the one not picked is hidden */
.dz-canvas { container: dz-canvas / inline-size; position: relative; width: 100%; display: grid; justify-items: center; align-items: center; }
.dz-pass { grid-area: 1 / 1; width: min(236px, 78cqw); transition: opacity .25s var(--soft), visibility .25s; }
.dz-pass .pass-card { max-width: none; margin: 0; }
.dz-pass--google { container-type: inline-size; filter: drop-shadow(0 1px 1px rgba(18, 9, 4, .14)) drop-shadow(0 14px 22px rgba(18, 9, 4, .3)); }
.dz-pass--google .google-pass { --u: calc(100cqw / 380); }
.dz-pass--google { visibility: hidden; opacity: 0; }
.dz-stage:has(#dz-wallet-google:checked) .dz-pass--google { visibility: visible; opacity: 1; }
.dz-stage:has(#dz-wallet-google:checked) .dz-pass--apple { visibility: hidden; opacity: 0; }

/* Floating Brand-step cards: beside the pass on a wide canvas */
.dz-floats { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.dz-float {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #FFFCF7;
  box-shadow: 0 0 0 1px var(--line), 0 14px 24px -16px rgba(43, 26, 18, .55);
  font-size: 12px;
  line-height: 1.3;
  color: var(--ink-2);
  white-space: nowrap;
}
.dz-bar { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; }
.dz-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #FFFCF7;
  box-shadow: 0 0 0 1px var(--line);
  white-space: nowrap;
}
.dz-step > span:not(.dz-step__dots) { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.dz-step b { color: var(--ink); font-size: 12.5px; }
.dz-step__dots { display: inline-flex; gap: 3px; }
.dz-step__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.dz-step__dots i.is-done { background: var(--olive); }
.dz-step__dots i.is-on { width: 14px; border-radius: 3px; background: var(--brand-glow); }

.dz-icon { top: 64%; left: 0; }
.dz-icon__tile { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: #7B4A2A; }
.dz-icon__tile span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); color: #7B4A2A; font: 700 11px / 1 var(--font-head); }
.dz-icon__txt { display: flex; flex-direction: column; }
.dz-icon__txt b { color: var(--ink); }
.dz-icon__txt small { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); }

.dz-colors { right: 0; top: 22%; flex-direction: column; align-items: stretch; gap: 6px; }
/* Over the Apple strip's scenery, or the Google card's hero band, so it never hides a field */
.dz-stage:has(#dz-wallet-google:checked) .dz-colors { top: auto; bottom: 3%; }
.dz-colors__t { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.dz-colors__row { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 8px; }
.dz-colors__row i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(43, 26, 18, .2); }
.dz-colors__row code { font-family: var(--font-mono); font-size: 11px; color: var(--ink); padding-left: 6px; }

.dz-hint { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.dz-hint i { width: 7px; height: 7px; border-radius: 50%; background: var(--olive); box-shadow: 0 0 0 3px rgba(63, 106, 44, .16); }

/* Narrow canvas: the cards leave the pass and sit in a row under it */
@container dz-canvas (max-width: 499px) {
  .dz-floats { position: static; grid-area: 2 / 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
  .dz-float { position: static; }
  .dz-icon { display: none; }
  .dz-colors { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
  .dz-colors__t { display: none; }
  .dz-colors__row { grid-template-columns: 14px auto; gap: 6px; }
  .dz-colors__row i { width: 14px; height: 14px; }
  .dz-colors__row span { display: none; }
  .dz-colors__row code { padding-left: 0; }
}
@media (max-width: 520px) {
  .dz-bar { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .dz-pass, .dz-seg label { transition: none; }
}

/* --------------------------------------------------------------------------
   2. Steps 02 and 03: QR counter card and add-to-wallet
   -------------------------------------------------------------------------- */
/* [hiw-enroll] */
/* Step 02: the counter card a merchant prints from the program's QR (merchant-web shows it on the
   program page and its hint says "Print the QR on a counter card"). The card is Harbor Coffee's
   artwork, so it keeps the pass colours (#7B4A2A, #FFF8EE, #F3C98B) in every accent theme, like the
   pass faces do; the scene around it is oat wall and walnut counter. The QR
   (assets/passes/qr-enroll-harbor-coffee.svg) carries its own 4-module white quiet zone and scans
   to https://stow.cards/enroll/harbor-coffee, the loyalty-web /enroll/:slug route. Nothing covers it:
   the paper grain sits under it. */
.en-scene {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 560px;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  padding: 40px 20px 0;
  background:
    radial-gradient(62% 52% at 50% 30%, rgba(255, 250, 242, .95), transparent 72%),
    linear-gradient(#F2E8D9, #E8D9C3);
  box-shadow: var(--shadow-card);
}
/* The counter top: a walnut slab with a lit front edge */
.en-scene::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  height: 56px;
  background:
    linear-gradient(rgba(255, 228, 196, .4), rgba(255, 228, 196, 0)) top / 100% 3px no-repeat,
    repeating-linear-gradient(91deg, rgba(20, 10, 5, .07) 0 2px, transparent 2px 26px),
    linear-gradient(#8A5A38, #6B4429 45%, #55351F);
  box-shadow: 0 -1px 0 rgba(43, 26, 18, .28);
}
.en-scene__set { position: relative; display: flex; justify-content: center; }
.en-cup {
  position: absolute;
  bottom: 18px;
  left: calc(50% - 144px - 104px);
  width: 84px;
  height: auto;
  filter: drop-shadow(0 6px 5px rgba(20, 10, 5, .28));
}
.en-tent { position: relative; width: min(288px, 100%); margin-bottom: 26px; }
/* Contact shadow where the stand meets the counter */
.en-tent::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -9px;
  z-index: -1;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(20, 10, 5, .5), transparent);
}
.en-tent__card {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(#FFFDF8, #FBF3E6);
  box-shadow:
    inset 0 0 0 1px rgba(92, 58, 33, .12),
    0 2px 2px rgba(43, 26, 18, .08),
    0 22px 30px -20px rgba(43, 26, 18, .6);
  text-align: center;
}
/* Printed paper: a light grain over everything except the QR, which sits above it */
.en-tent__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grain);
  opacity: .1;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.en-tent__band {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #7B4A2A;
  color: #FFF8EE;
  text-align: left;
}
.en-tent__logo {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #F7F1E7;
  color: #7B4A2A;
  font: 700 15px / 1 var(--font-head);
}
.en-tent__org { min-width: 0; font: 700 16px / 1.1 var(--font-head); white-space: nowrap; }
.en-tent__tag {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #F3C98B;
}
.en-tent__pitch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 0 18px;
  text-align: left;
}
.en-tent__head { margin: 0; font: 700 25px / 1.02 var(--font-head); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.en-tent__sub { grid-column: 1 / -1; margin: 0; font-size: 13px; font-weight: 700; line-height: 1.35; color: #5E4232; }
/* The reward, printed as a round sticker */
.en-tent__seal {
  flex: none;
  display: grid;
  place-content: center;
  gap: 1px;
  width: 94px;
  height: 94px;
  margin: 0;
  border-radius: 50%;
  background: #F3C98B;
  box-shadow: inset 0 0 0 4px #F3C98B, inset 0 0 0 5.5px rgba(123, 74, 42, .55), 0 2px 3px rgba(43, 26, 18, .12);
  color: #4E2E1A;
  text-align: center;
  rotate: 8deg;
}
.en-tent__seal span { font-size: 9px; font-weight: 800; line-height: 1.1; letter-spacing: .05em; text-transform: uppercase; }
.en-tent__seal b { font: 700 24px / 1 var(--font-head); letter-spacing: -.01em; }
/* The QR on its white quiet zone, framed in copper */
.en-tent__qr {
  position: relative;
  z-index: 1;
  width: 62%;
  margin: 14px auto 0;
  overflow: hidden;
  border: 3px solid #B87333;
  border-radius: 14px;
  background: #FFFFFF;
  box-shadow: 0 0 0 4px #FFFDF8, 0 0 0 5.5px rgba(184, 115, 51, .4);
}
.en-tent__qr img { width: 100%; height: auto; }
.en-tent__scan {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 13px 0 0;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--ink);
}
.en-tent__scan svg { flex: none; width: 17px; height: 17px; color: #7B4A2A; }
.en-tent__url { margin: 3px 0 0; font: 500 11.5px / 1.4 var(--font-mono); color: #5E4232; }
.en-tent__foot {
  margin: 14px 0 0;
  padding: 10px 14px 24px; /* the stand covers the bottom 12px */
  border-top: 1.5px dashed rgba(123, 74, 42, .35);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  color: #5E4232;
}
/* The walnut block the card slots into */
.en-tent__stand {
  position: relative;
  z-index: 2;
  display: block;
  width: 72%;
  height: 24px;
  margin: -12px auto 0;
  border-radius: 3px 3px 5px 5px;
  background:
    linear-gradient(#7A5234, #6A4529) top / 100% 6px no-repeat,
    linear-gradient(#55361F, #452A18 60%, #36210F);
  box-shadow: inset 0 1px 0 rgba(255, 228, 196, .3), 0 6px 0 -3px rgba(20, 10, 5, .15);
}
@media (max-width: 520px) {
  .en-scene { padding: 32px 14px 0; }
  .en-cup { display: none; }
}
@media (max-width: 360px) {
  .en-tent__pitch { gap: 6px; padding: 14px 12px 0 14px; }
  .en-tent__head { font-size: 22px; }
  .en-tent__seal { width: 84px; height: 84px; }
  .en-tent__seal span { font-size: 8.5px; letter-spacing: .03em; }
  .en-tent__seal b { font-size: 21px; }
}

/* Step 03: the hosted enrollment page (loyalty-web EnrollPage) right after signing up, on a phone:
   the new pass with the official badges directly beneath it, stacked at one height like the real
   page's SuccessCard. The badges are byte-identical copies of
   loyalty-web/public/wallet-badges/*.svg and are never recoloured, cropped, rotated or animated.
   48 px is Google's minimum; the height tracks the Google button's width so both badges only ever
   scale together (below about 340 px of viewport), and the 10 px gap exceeds both clear-space rules
   (Google 8 dp, Apple 0.1x the badge height). */
.en-phone {
  width: min(330px, 100%);
  margin-inline: auto;
  padding: 9px;
  border-radius: 46px;
  background: linear-gradient(155deg, #4A3021, #1C110B 45%, #33211A);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .1), var(--shadow-pop);
}
.en-phone__screen {
  overflow: hidden;
  border-radius: 37px;
  background: #FBF6EE;
  color: var(--ink);
  font-family: var(--font-body);
}
.en-phone__status {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 13px 26px 5px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
}
.en-phone__cam { width: 11px; height: 11px; border-radius: 50%; background: #1C110B; }
.en-phone__icons { justify-self: end; display: flex; align-items: center; gap: 5px; }
.en-phone__icons svg { width: auto; height: 11px; }
.en-phone__url {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 6px 14px 0;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(92, 58, 33, .08);
  font: 500 11px / 1.2 var(--font-mono);
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
}
.en-phone__url svg { flex: none; }
.en-phone__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  font-weight: 700;
}
.en-phone__tile {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #7B4A2A;
  color: #F3C98B;
  font: 700 14px / 1 var(--font-head);
}
.en-phone__page { padding: 16px 16px 18px; text-align: center; }
.en-done {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0;
  font: 700 23px / 1.1 var(--font-head);
  letter-spacing: -.01em;
  color: var(--ink);
}
.en-done em { font-style: normal; color: var(--brand); }
.en-done__tick {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand-btn);
  box-shadow: 0 2px 0 var(--brand-lip);
  color: var(--paper);
}
.en-phone__pass.pass-card { max-width: 212px; margin: 16px auto 18px; rotate: -1deg; }
.en-badges { container-type: inline-size; display: grid; justify-items: center; gap: 10px; }
.en-badges img { max-width: none; width: auto; height: min(48px, 100cqw * 50 / 283); }
.en-done__id { margin: 14px 0 0; font: 500 11px / 1.4 var(--font-mono); letter-spacing: .02em; color: var(--ink-3); }