/* ⭐ The editor and the demo panel each set *{box-sizing:border-box} globally, and
   every width here was measured under that. Scoping it to the card too means the
   face renders identically wherever the stylesheet is dropped in, instead of
   silently depending on the host page's reset. */
.pass,.pass *,.gwrap,.gwrap *{box-sizing:border-box}
/* ---------------------------------------------------------------------------
   CARD PREVIEW — the Google Wallet card face, COPIED from business-card.html.

   ⛔ These rules are LIFTED from the editor, not written to resemble it. Ross,
   2026-08-25: "I don't understand why it's not reading the code to understand
   what it's transmitting and just doing the same or copying it versus trying to
   recreate it. If it was just copying it then it would know the dynamics of what
   was being shown and it wouldn't be missing the QR code."

   ⚠️ Three previous attempts got this wrong: two approximated the layout, and a
   third deleted the demo panel's preview entirely and linked to the editor —
   which satisfied a badly-written acceptance criterion ("one implementation")
   while removing the feature.

   ⭐ If the editor's styling changes, change it HERE too, or they drift again.
   --------------------------------------------------------------------------- */
.gwrap{width:384px;max-width:100%;margin:0 auto;font-family:Roboto,'Helvetica Neue',-apple-system,BlinkMacSystemFont,Arial,sans-serif}
.gcard{border-radius:16px;overflow:hidden;box-shadow:0 10px 26px rgba(0,0,0,.18);min-height:520px;display:flex;flex-direction:column}
.ghead{display:flex;align-items:center;gap:9px;padding:13px 15px 0}
.glogo{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.25);flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}
.glogo img{width:100%;height:100%;object-fit:cover}
.gorg{font-size:13.5px;font-weight:600;letter-spacing:.1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gbody{padding:14px 15px 16px}
.gqr{background:#fff;padding:16px;display:flex;justify-content:center;margin-top:auto}
.gqr svg{width:120px;height:120px}
.gwlhead{font-size:23px;font-weight:400;line-height:1.24;margin:0}
.gwlrow{padding:11px 0;border-top:1px solid rgba(0,0,0,.09)}
.gwlrow:first-of-type{margin-top:6px}
.gwlrow .gwll{font-size:11.5px;font-weight:400;opacity:.6}
.gwlrow .gwlv{font-size:15px;font-weight:400;line-height:1.45;margin-top:2px}


/* ---- Apple pass face, copied from business-card.html ---- */
.pass,.backcard,.notif{width:100%!important;max-width:390px}   /* Apple pass reads narrow+tall; ratio comes from min-height */
/* ⛔ ELLIPSIS, not a bare clip. Apple truncates a header label it cannot fit and
   shows the … — the real card reads "EARN EXTRA POIN…" while this preview showed
   the whole phrase, so a merchant approved wording the card cannot print. */
.l9{font-size:10.5px;font-weight:500;letter-spacing:.4px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pass{position:relative;width:384px;margin:0 auto;border-radius:18px;padding:14px 15px 15px;box-shadow:0 16px 40px rgba(0,0,0,.2);color:#111827;transition:background .2s;background:#fff;display:flex;flex-direction:column;min-height:520px;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',Arial,sans-serif;-webkit-font-smoothing:antialiased}
.pass .top{display:flex;align-items:flex-start;gap:8px}
.pass .top .l{display:flex;align-items:center;gap:10px;flex:0 0 auto;min-width:0}   /* logo + org keep their natural width (org never truncates) */
.pass .badge{width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;overflow:hidden}
.pass .logoimg{max-height:34px;max-width:140px;object-fit:contain;flex-shrink:0;display:none}
.pass .ttl{font-size:15px;font-weight:500;white-space:nowrap;overflow:visible}   /* org shows FULL and may collide into the header (Apple keeps all the words, doesn't truncate) */
.pass .hf{text-align:right;flex:1 1 0;min-width:0;padding-left:8px;overflow:hidden}   /* header takes the remaining space; its value shrinks to fit that (Apple keeps it on one line) */
.pass .hf .hv{font-size:16px;font-weight:400;margin-top:1px;white-space:nowrap;overflow:hidden}
.pass .thumb{max-width:100px;max-height:74px;width:auto;height:auto;border-radius:12px;display:none;box-shadow:0 2px 8px rgba(0,0,0,.28)}   /* preserve the image's real aspect ratio (Apple does NOT force a square); positioned by .thumbslot */
.pass .thumb.circ{border-radius:50%}
.pass .strip{margin:14px -16px 0;aspect-ratio:3/1;background:center/cover no-repeat #333;display:none}
.pass.hasStrip .strip{display:block}
.pass .primary{margin-top:20px}
.pass.hasStrip .primary{margin-top:-92px;height:92px;display:flex;flex-direction:column;justify-content:flex-start; position:relative;z-index:3;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.55);padding-top:6px}
.pass.hasStrip .primary .l9{order:2;opacity:.95}
.pass.hasStrip .primary .pv{order:1;-webkit-line-clamp:2}
.pass .primary .pv{font-size:27px;font-weight:400;line-height:1.14;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pass .secondary{margin-top:44px;display:flex;gap:14px}
.pass .auxiliary{margin-top:8px;display:none}
.pass .auxiliary.on{display:block}
.pass .auxiliary .afield{width:100%}
/* ⛔ ONE LINE, shrunk and ellipsized — never wrapped. Apple does not wrap a field;
   it shrinks the text to a single line and cuts it with an ellipsis. This row had
   no rule of its own (the nowrap one below is scoped to `.secondary`), so a long
   message wrapped over three lines at full size here and rendered as one small
   truncated line on the phone. Ross, 2026-08-29: "you have the last notification
   showing like this when it really is like this." */
.pass .auxiliary .afield .sv{font-size:18px;font-weight:400;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pass .secondary .sfield{min-width:0;flex:0 0 auto}
.pass .secondary .sfield.wide{flex:1 1 0}
.pass .secondary .sfield:has(.sv:empty){flex:0 0 auto}
.pass .secondary .sv{font-size:18px;font-weight:400;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pass .qrbox{background:#fff;border-radius:5px;padding:11px;align-self:center;margin-top:auto;margin-bottom:6px}
.pass .qrbox svg{width:120px;height:120px;display:block}
.pass [contenteditable]{outline:none;cursor:text;border-radius:4px;transition:background .12s,box-shadow .12s;margin:-1px -3px;padding:1px 3px}
.pass [contenteditable]:hover{background:rgba(255,255,255,.12)}
.pass.lightbg [contenteditable]:hover{background:rgba(0,0,0,.08)}
.pass [contenteditable]:focus{background:rgba(255,255,255,.18);box-shadow:0 0 0 1.5px rgba(255,255,255,.6)}
.pass.lightbg [contenteditable]:focus{background:rgba(0,0,0,.10);box-shadow:0 0 0 1.5px rgba(0,0,0,.4)}
.pass [contenteditable]:empty{min-width:6px}   /* business card: empty fields show NOTHING (no "Card title"/"Label" placeholder) — just a tiny click target */
.pass .fieldwrap{position:relative}
.pass .del,.pass .idel{position:absolute;top:-7px;right:-7px;width:18px;height:18px;border-radius:50%;border:none;background:#e5484d;color:#fff;font-size:12px;line-height:18px;font-weight:700;text-align:center;display:none;cursor:pointer;z-index:7;box-shadow:0 1px 4px rgba(0,0,0,.45);padding:0}
.pass .fieldwrap:hover>.del{display:block}
.pass .logoslot{position:relative;display:inline-flex;align-items:center;cursor:pointer;border-radius:8px}
.pass .thumbslot{position:absolute;top:62px;right:15px;line-height:0;cursor:pointer}
.pass .imgedit{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.34);color:#fff;font-size:13px;border-radius:inherit;pointer-events:none}
.pass .thumbslot .imgedit{border-radius:12px}
.pass .thumbslot.circ .imgedit{border-radius:50%}
.pass .logoslot:hover .imgedit,.pass .thumbslot:hover .imgedit{display:flex}
.pass .logoslot:hover .idel,.pass .thumbslot:hover .idel{display:block}
.pass .addthumb{position:absolute;top:60px;right:15px;width:86px;height:66px;border:1.5px dashed rgba(255,255,255,.5);border-radius:12px;display:none;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:rgba(255,255,255,.72);cursor:pointer;background:rgba(255,255,255,.07);text-align:center}
.pass .addthumb .ap-plus{font-size:18px;font-weight:300;line-height:1}
.pass .addthumb .ap-lbl{font-size:8.5px;font-weight:700;line-height:1.15;letter-spacing:.2px}
.pass.lightbg .addthumb{border-color:rgba(0,0,0,.4);color:rgba(0,0,0,.5);background:rgba(0,0,0,.05)}
.pass.editable .addthumb.show{display:flex}
.pass .addlogo{width:44px;height:32px;border:1.5px dashed rgba(255,255,255,.5);border-radius:8px;display:none;align-items:center;justify-content:center;color:rgba(255,255,255,.7);font-size:19px;font-weight:300;background:rgba(255,255,255,.07);flex-shrink:0;cursor:pointer}
.pass.lightbg .addlogo{border-color:rgba(0,0,0,.38);color:rgba(0,0,0,.5);background:rgba(0,0,0,.05)}
.pass .addlogo.show{display:flex}
.pass .qrbox{cursor:pointer}
.gwlpunch{text-align:center;font-size:12px;opacity:.65;margin:2px 0 14px}
.gwlstrip{aspect-ratio:3/1;background:center/cover no-repeat #333}

/* The Stamp Card's graphic, in both previews. It is the same PNG the pass and the
   Google object carry, so it cannot drift from what installs. */
.pass .stampstrip{margin-top:18px}
.pass .stampstrip img{display:block;width:100%;height:auto}
.gstampstrip{background:#1f1f1f}
.gstampstrip img{display:block;width:100%;height:auto}

/* Google's subheader: the small line UNDER the big one (its own order, not Apple's). */
.gcard .gsub{font-size:13px;font-weight:500;opacity:.72;margin:2px 0 0;letter-spacing:.2px}

/* ⭐ Android DOES honour line breaks — Google renders \n in a row body as a real
   break (docs/google-wallet-reference.md). The preview collapsed them, so a
   merchant writing a bulleted offer saw one run-on line here and three lines on
   the phone. Ross, 2026-08-29: "Android also allows things to go on another line
   and it's not doing that currently." */
.gcard .gwlv{white-space:pre-line}