/* Pass card: a recreation of the app's PassCard. 1 app point = var(--u).
   Keep it identical to src/components/PassCard on BOTH platforms (AGENTS.md). */
/* Roboto for the Android preview, self-hosted (the Studio sends nothing anywhere) */
@font-face { font-family: "Roboto"; src: url("../fonts/Roboto-Variable-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Roboto"; src: url("../fonts/Roboto-Variable-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
.pc-wrap { container-type: inline-size; width: 100%; --pc-cut: var(--bg-page, #08090C); }
.pc {
  --u: calc(100cqw / 366);
  position: relative;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Roboto, "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  line-height: 1.2;
  text-align: left;
}
.pc-shape {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--u) * 10);
  background: var(--bg);
  box-shadow: 0 calc(var(--u) * 18) calc(var(--u) * 48) var(--glow);
  isolation: isolate;
}
.pc-wrap.no-glow .pc-shape { box-shadow: none; }
.pc-wrap.no-glow .pc.pc-ticket { filter: none; }
/* Android: every full card is ANDROID_CARD_RADIUS (24), in the system font */
/* Android draws a text line ~1.34x its size (Roboto with the font padding RN
   keeps on), against ~1.2x on iOS. Measured against the app's cards on a Pixel
   emulator: within 1 pt on every Pass Store frame. */
.pc-wrap[data-platform=android] .pc { font-family: Roboto, "Google Sans", system-ui, sans-serif; line-height: 1.34; }
.pc-wrap[data-platform=android] .pc-shape { border-radius: calc(var(--u) * 24); }
/* iOS event ticket: Apple Wallet's measured silhouette. Scoop chord 17.9% of
   the width, 4.8% deep: an arc of a circle r = 10.74% centred 5.94% above. */
.pc.pc-ticket { filter: drop-shadow(0 calc(var(--u) * 18) calc(var(--u) * 24) var(--glow)); }
.pc.pc-ticket .pc-shape {
  border-radius: calc(var(--u) * 2);
  box-shadow: none;
  min-height: 124cqw;
  display: flex; flex-direction: column;
  -webkit-mask: radial-gradient(circle 10.74cqw at 50% -5.94cqw, #0000 calc(100% - 0.6px), #000 100%);
          mask: radial-gradient(circle 10.74cqw at 50% -5.94cqw, #0000 calc(100% - 0.6px), #000 100%);
}
.pc *, .pc *::before, .pc *::after { box-sizing: border-box; }
.pc-layers { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pc-l, .pc-band { position: absolute; inset: 0; display: block; }
.pc-img { background-size: cover; background-position: center; }
.pc-zone { top: calc(var(--u) * 40); overflow: hidden; }
.pc-band { bottom: auto; height: calc(var(--u) * 40); }
.pc-vig { background: linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 40%, rgba(0,0,0,.26) 100%); }
/* lib/passPattern.ts patterns, drawn in the card's ink at low alpha */
.pc-pat { opacity: .1; }
.pat-dots { opacity: .22; background-image: radial-gradient(circle at center, var(--pi) calc(var(--u) * 1.3), transparent calc(var(--u) * 1.6)); background-size: calc(var(--u) * 18) calc(var(--u) * 18); background-position: calc(var(--u) * 4) calc(var(--u) * 6); }
.pat-grid { opacity: .1; background-image: linear-gradient(var(--pi) 1px, transparent 1px), linear-gradient(90deg, var(--pi) 1px, transparent 1px); background-size: calc(var(--u) * 22) calc(var(--u) * 22); }
.pat-stripes { opacity: .08; background-image: repeating-linear-gradient(-60deg, var(--pi) 0 calc(var(--u) * 9), transparent calc(var(--u) * 9) calc(var(--u) * 30)); }
.pat-waves { opacity: .12; background-image: radial-gradient(circle at 50% 100%, transparent calc(var(--u) * 9), var(--pi) calc(var(--u) * 9) calc(var(--u) * 10), transparent calc(var(--u) * 10)); background-size: calc(var(--u) * 20) calc(var(--u) * 10); }
.pat-checks { opacity: .07; background-image: conic-gradient(var(--pi) 25%, transparent 0 50%, var(--pi) 0 75%, transparent 0); background-size: calc(var(--u) * 24) calc(var(--u) * 24); }

.pc-content { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; }
.pc-f { display: flex; flex-direction: column; border-radius: calc(var(--u) * 6); min-width: 0; font: inherit; color: inherit; text-align: inherit; background: none; border: 0; padding: 0; margin: 0; }
[role=button].pc-f, button.pc-f { cursor: pointer; transition: background-color .15s ease, box-shadow .15s ease; }
[role=button].pc-f:hover, button.pc-f:hover { background: rgba(255,255,255,.1); box-shadow: 0 0 0 1px rgba(255,255,255,.22); }
[role=button].pc-f:focus-visible, button.pc-f:focus-visible, .pc-qrbg:focus-visible, .pc-add:focus-visible { outline: 2px solid #56C2FF; outline-offset: 1px; }

/* Boarding */
.pc-bh { display: flex; justify-content: space-between; align-items: center; padding: calc(var(--u) * 15) calc(var(--u) * 18) calc(var(--u) * 12); }
.pc-org { display: flex; align-items: center; gap: calc(var(--u) * 9); min-width: 0; }
.pc-org .pc-f { padding: 0 calc(var(--u) * 4); }
.pc-tile { width: calc(var(--u) * 28); height: calc(var(--u) * 28); border-radius: calc(var(--u) * 8); display: grid; place-items: center; flex-shrink: 0; }
.pc-tile svg { width: calc(var(--u) * 18); height: calc(var(--u) * 18); }
.pc-orgt { font-size: calc(var(--u) * 14); font-weight: 600; }
.pc-right { display: flex; flex-direction: column; align-items: flex-end; }
.pc-right .pc-f { padding: 0 calc(var(--u) * 4); align-items: flex-end; }
.pc-flt { font-size: calc(var(--u) * 14); font-weight: 700; }
.pc-date { font-size: calc(var(--u) * 11); padding-top: calc(var(--u) * 1); }
.pc-cities, .pc-codes { display: flex; justify-content: space-between; padding: 0 calc(var(--u) * 21); }
.pc-cities .pc-f, .pc-codes .pc-f { padding: 0 calc(var(--u) * 3); }
.pc-city { font-size: calc(var(--u) * 10.5); font-weight: 500; letter-spacing: calc(var(--u) * .4); text-transform: uppercase; opacity: .62; }
.pc-city.r, .pc-big.r { text-align: right; }
.pc-codes { align-items: center; padding-top: calc(var(--u) * 2); }
.pc-big { font-size: calc(var(--u) * 42); font-weight: 700; letter-spacing: calc(var(--u) * -1.5); line-height: calc(var(--u) * 44); }
.pc-veh { display: grid; place-items: center; }
.pc-veh svg { width: calc(var(--u) * 28); height: calc(var(--u) * 28); }
.pc-tear { position: relative; height: calc(var(--u) * 13); }
.pc-tear .n { position: absolute; top: 0; width: calc(var(--u) * 13); height: calc(var(--u) * 13); border-radius: 50%; background: var(--pc-cut); }
.pc-tear .l { left: calc(var(--u) * -9); } .pc-tear .r { right: calc(var(--u) * -9); }
.pc-row { display: flex; gap: calc(var(--u) * 2); padding: 0 calc(var(--u) * 19); }
.pc-cell { padding: calc(var(--u) * 3) calc(var(--u) * 4); }
.pc-il { font-size: calc(var(--u) * 9); font-weight: 600; letter-spacing: calc(var(--u) * .5); color: color-mix(in srgb, currentColor 60%, transparent); text-transform: uppercase; white-space: nowrap; }
.pc-iv { font-size: calc(var(--u) * 14); font-weight: 700; margin-top: calc(var(--u) * 3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.2em; }
.pc-pax { padding: calc(var(--u) * 12) calc(var(--u) * 21) 0; }

/* Boarding, Android: Google Wallet's layout (BoardingPassCard.tsx, styles.ts a*) */
.pc-ah { display: flex; align-items: center; gap: calc(var(--u) * 12); padding: calc(var(--u) * 18) calc(var(--u) * 18) 0; }
.pc-aicon { width: calc(var(--u) * 34); height: calc(var(--u) * 34); border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.pc-aicon svg { width: calc(var(--u) * 18); height: calc(var(--u) * 18); }
.pc-atw { flex: 1; min-width: 0; }
.pc-aflt { flex-shrink: 0; max-width: 35%; align-items: flex-end; }
.pc-at { font-size: calc(var(--u) * 16); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-aroute { display: flex; align-items: center; padding: calc(var(--u) * 18) calc(var(--u) * 20) 0; font-size: calc(var(--u) * 16); }
.pc-aroute .pc-f { flex-shrink: 1; min-width: 0; }
.pc-aroute .pc-f span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-adash { white-space: pre; }
.pc-acodes { display: flex; align-items: center; padding: calc(var(--u) * 2) calc(var(--u) * 20) calc(var(--u) * 6); }
.pc-acodes .pc-f { flex-shrink: 1; min-width: 0; }
.pc-acode { font-size: calc(var(--u) * 48); font-weight: 400; letter-spacing: calc(var(--u) * -.5); line-height: 1.34; white-space: nowrap; }
.pc-aveh { margin: 0 calc(var(--u) * 10); display: grid; place-items: center; }
.pc-aveh svg { width: calc(var(--u) * 30); height: calc(var(--u) * 30); }
.pc-arow { display: flex; gap: calc(var(--u) * 8); padding: calc(var(--u) * 12) calc(var(--u) * 16) 0; }
.pc-acell { padding: calc(var(--u) * 2) calc(var(--u) * 4); }
.pc-acell.c { align-items: center; text-align: center; } .pc-acell.r { align-items: flex-end; text-align: right; }
.pc-al { font-size: calc(var(--u) * 13); margin-bottom: calc(var(--u) * 3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pc-av { font-size: calc(var(--u) * 17); line-height: 1.34; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.pc-av.one { -webkit-line-clamp: 1; }
.pc-adiv { height: 1px; margin: calc(var(--u) * 14) calc(var(--u) * 20) calc(var(--u) * 2); }
.pc-qr { display: flex; justify-content: center; padding: calc(var(--u) * 18) 0 calc(var(--u) * 22); }
/* the code tile is the app's (PassCard/styles.ts qrBg, PASS_CODE_SIZE 128,
   LINEAR_CODE_W 210): Pass Store art is drawn around exactly this box */
.pc-qrbg { background: #fff; border-radius: calc(var(--u) * 12); padding: calc(var(--u) * 13); border: 0; display: block; line-height: 0; }
button.pc-qrbg { cursor: pointer; transition: transform .2s cubic-bezier(.2,.8,.2,1); }
button.pc-qrbg:hover { transform: scale(1.02); }
.pc-code { display: block; }
.pc-code svg { display: block; width: 100%; height: 100%; }
.pc-code.sq { width: calc(var(--u) * 128); height: calc(var(--u) * 128); }
.pc-code.ln { width: calc(var(--u) * 210); }
.pc-code.ln svg { height: auto; }
/* retail codes: the app's GS1 layout (lib/retailBarcode.ts) at 210 wide */
.pc-code.ln[data-f=ean13] { height: calc(var(--u) * 68.82); }
.pc-code.ln[data-f=upca] { height: calc(var(--u) * 73.78); }
.pc-code.ln[data-f=ean8], .pc-code.ln[data-f=upce] { height: calc(var(--u) * 122.24); }
.pc-code.ln[data-f=ean13] svg, .pc-code.ln[data-f=upca] svg, .pc-code.ln[data-f=ean8] svg, .pc-code.ln[data-f=upce] svg { height: 100%; }
.pc-code.st { width: calc(var(--u) * 116); }
.pc-code.st svg { height: auto; }

/* Event */
.pc-eh { display: flex; justify-content: space-between; align-items: flex-start; padding: calc(var(--u) * 17) calc(var(--u) * 18) calc(var(--u) * 4); }
.pc-ticket .pc-eh { padding-top: calc(var(--u) * 26); }
.pc-eh .pc-f { padding: calc(var(--u) * 2) calc(var(--u) * 4); }
.pc-evt { font-size: calc(var(--u) * 23); font-weight: 700; letter-spacing: calc(var(--u) * -.4); line-height: calc(var(--u) * 44); }
.pc-sub { font-size: calc(var(--u) * 13); }
.pc-type { font-size: calc(var(--u) * 10); font-weight: 600; letter-spacing: calc(var(--u) * 1.2); padding-top: calc(var(--u) * 5); flex-shrink: 0; white-space: nowrap; }
.pc-qr-ev { padding-top: calc(var(--u) * 8); }
.pc-ticket .pc-qr-ev { margin-top: auto; }
.pc-event .pc-iv { margin-top: calc(var(--u) * 2); }

/* Generic / loyalty */
.pc-oh { display: flex; justify-content: space-between; align-items: flex-start; padding: calc(var(--u) * 18) calc(var(--u) * 18) calc(var(--u) * 10); }
.pc-oh .pc-f { padding: calc(var(--u) * 2) calc(var(--u) * 4); }
.pc-ot { font-size: calc(var(--u) * 24); font-weight: 700; letter-spacing: calc(var(--u) * -1.5); line-height: calc(var(--u) * 44); }
.pc-bandrow { height: calc(var(--u) * 40); padding: 0 calc(var(--u) * 14); display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 10); }
.pc-bandf { padding: calc(var(--u) * 2) calc(var(--u) * 4); min-width: 0; }
.pc-bandt { font-size: calc(var(--u) * 15); font-weight: 700; line-height: calc(var(--u) * 20); letter-spacing: calc(var(--u) * .2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-bandsub { padding: calc(var(--u) * 12) calc(var(--u) * 14); }
.pc-bandsub .pc-f { padding: calc(var(--u) * 2) calc(var(--u) * 4); }
.pc-bsub { font-size: calc(var(--u) * 20); font-weight: 700; letter-spacing: calc(var(--u) * -.2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-cfs { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0 calc(var(--u) * 15) calc(var(--u) * 4); }
.pc-cf { width: 48%; padding: calc(var(--u) * 3) calc(var(--u) * 4); }
.pc-addslot { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.pc-add { font: inherit; font-size: calc(var(--u) * 13); font-weight: 600; background: none; padding: calc(var(--u) * 7) calc(var(--u) * 12); border-radius: calc(var(--u) * 8); border: 1px dashed; cursor: pointer; }

.pc-code-empty { display: grid; place-items: center; border: 1.5px dashed #B9BBC6; border-radius: calc(var(--u) * 6); color: #60646C; font-size: calc(var(--u) * 12); font-weight: 600; text-align: center; padding: calc(var(--u) * 8); }

/* inline editing (Pass Studio on a computer) */
.pc [contenteditable] { outline: none; cursor: text; min-width: calc(var(--u) * 20); display: inline-block; white-space: pre; border-radius: calc(var(--u) * 3); box-shadow: 0 0 0 calc(var(--u) * 2) rgba(86,194,255,.9); background: rgba(0,0,0,.18); caret-color: #56C2FF; }
.pc-f.is-editing { background: rgba(255,255,255,.08) !important; box-shadow: none !important; }
/* an empty value while editing: a muted "Add" so the cell has a real target */
.pc-ph { opacity: .45; font-weight: 500; }

/* a Pass Store design (like the app's PresetFrame): every line stays one line,
   so no text can make the card taller and move the code box off the art */
.pc-preset .pc-f span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 1; line-clamp: 1; }