/* The student pass (pass-card.js) on pages other than /verify/, scoped to .vp-web: today the homepage's verified
   hero. /verify/ keeps its own copy of the base in verify.css, so that page is untouched.

   The base is verify.css's, unchanged: the apps' card at 354 x 223 points with a 13pt corner, the printed face laid
   out in those points and scaled as one piece (--vp-k, set by pass-card.js from the card's width).

   Then every design's print, from PassCardDesign's palettes (iOS, PassCardPalette): the wordmark, "Student pass",
   the Verified chip (capsule or none, disc, word), the name, the university, "Valid until" and its date, and on
   Night sky, Sunrise steel and Copper guilloche the founding mark ("Founding member 2026" beside its sunrise
   emblem, top trailing, 22 down and 20 in). Orange edge sets every line at 14pt bold or more (largePrint: white on
   the orange is 3.08:1, large text). Copper guilloche prints the name in copper foil whose light slides with the
   roll (nameStyle: 100 degrees plus 25 per unit of roll, stops shifted .35). Each design also has a CSS face for
   the moment before the canvas paints, or for a browser without one. Cards are objects: the same in light and dark. */
.vp-web { position: relative; width: 100%; perspective: 1150px; --vp-k: 1.045; }
.vp-web .vp-card { position: relative; width: 100%; aspect-ratio: 354 / 223; border-radius: calc(13px * var(--vp-k)); transform-style: preserve-3d; will-change: transform; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.vp-web .vp-shadow { position: absolute; inset: 0; border-radius: inherit; box-shadow: 1px 2px 4px rgba(22, 21, 18, .16), 0 calc(8px + var(--vp-press, 0) * 4px) 28px rgba(0, 0, 0, calc(.06 + var(--vp-press, 0) * .05)); }
.vp-web .vp-face { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: linear-gradient(135deg, #FFFFFF 0%, #F8F6F2 55%, #F0EDE8 100%); }
.vp-web .vp-face::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(22, 21, 18, .09); pointer-events: none; }
.vp-web .vp-face::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(8px * var(--vp-k)); background: linear-gradient(90deg, #FF5C26, #FF9E73 45%, #FFE3D3 60%, #FF7A47 70%, #EB501D); }
.vp-web.is-painted .vp-face::after { display: none; }
.vp-web .vp-stock,
.vp-web .vp-sheen { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.vp-web .vp-sheen { z-index: 1; }
.vp-web .vp-print { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; box-sizing: border-box; width: 354px; height: 223px; padding: 20px 20px 24px; color: #161512; transform: scale(var(--vp-k)); transform-origin: 0 0; pointer-events: none; }
.vp-web .vp-print p { margin: 0; }
.vp-web .vp-top { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.vp-web .vp-tag { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.vp-web .vp-bottom { display: flex; align-items: flex-end; gap: 12px; margin-top: auto; padding-top: 8px; }
.vp-web .vp-who { display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: 220px; }
.vp-web .vp-until { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; margin-left: auto; white-space: nowrap; }
.vp-web .vp-wordmark { display: block; flex: none; width: 96px; height: 21.1px; }
.vp-web .vp-symbol { position: absolute; right: 21px; top: 21px; display: block; width: 22px; height: 26px; }
.vp-web .vp-symbol svg { display: block; width: 22px; height: 26px; }
.vp-web .vp-kind { color: #55504A; font-family: var(--tud-font-secondary); font-size: 10.5px; font-weight: 500; line-height: 1.276; letter-spacing: .01em; white-space: nowrap; }
.vp-web .vp-chip { display: flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px 0 4px; border-radius: 11px; background: #161512; white-space: nowrap; }
.vp-web .vp-chip[hidden] { display: none; }
.vp-web .vp-chip i { display: block; width: 15px; height: 15px; border-radius: 50%; background: #FF5C26; }
.vp-web .vp-chip span { color: #FFFFFF; font-family: var(--tud-font-primary); font-size: 11.5px; font-weight: 600; line-height: 1.26; }
.vp-web .vp-name { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; font-family: var(--tud-font-primary); font-size: 22px; font-weight: 700; line-height: 1.26; letter-spacing: -0.012em; }
.vp-web .vp-inst { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; color: #2B2722; font-family: var(--tud-font-primary); font-size: 11px; font-weight: 600; line-height: 1.26; }
/* The campus line under the university (cardCampus: Outfit Medium 10.5 on a 14pt line, one line), in the design's
   secondary ink; it sits right under the university, as the app stacks the two with no space between. */
.vp-web .vp-print .vp-campus { margin-top: -4px; overflow: hidden; color: #55504A; font-family: var(--tud-font-primary); font-size: 10.5px; font-weight: 500; line-height: 1.334; text-overflow: ellipsis; white-space: nowrap; }
.vp-web .vp-campus[hidden] { display: none; }
.vp-web .vp-label { color: rgba(22, 21, 18, .8); font-family: var(--tud-font-primary); font-size: 9.5px; font-weight: 500; line-height: 1.26; text-align: right; }
.vp-web .vp-date { font-family: var(--tud-font-secondary); font-size: 13.5px; font-weight: 500; line-height: 1.276; letter-spacing: -0.01em; text-align: right; }
.vp-web .vp-burst { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* The founding mark (FoundingLine): the 15pt emblem, 5pt, then the words in Outfit SemiBold 10.5 (cardSmall). */
.vp-web .vp-founding { position: absolute; top: 22px; right: 20px; display: flex; align-items: center; gap: 5px; font-family: var(--tud-font-primary); font-size: 10.5px; font-weight: 600; line-height: 1.15; white-space: nowrap; }
.vp-web .vp-founding[hidden] { display: none; }
.vp-web .vp-founding svg { display: block; flex: none; width: 15px; height: 15px; }

/* ---------- Orange edge: one flat orange, a cream band, white print at 14pt bold ---------- */
.vp-web[data-design="orange-edge"] .vp-face { background: #FF5C26; }
.vp-web[data-design="orange-edge"] .vp-face::after { background: linear-gradient(90deg, #F4EEE6, #FFFEFC 45%, #FFFFFF 60%, #F9F6F1 70%, #E6DED3); }
.vp-web[data-design="orange-edge"] .vp-face::before { box-shadow: none; }
.vp-web[data-design="orange-edge"] .vp-print { color: #FFFFFF; }
.vp-web[data-design="orange-edge"] .vp-wordmark path { fill: #FFFFFF; }
.vp-web[data-design="orange-edge"] .vp-symbol path:nth-child(1), .vp-web[data-design="orange-edge"] .vp-symbol path:nth-child(3) { fill: #FFFFFF; }
.vp-web[data-design="orange-edge"] .vp-symbol path:nth-child(2), .vp-web[data-design="orange-edge"] .vp-symbol path:nth-child(4),
.vp-web[data-design="orange-edge"] .vp-symbol path:nth-child(5), .vp-web[data-design="orange-edge"] .vp-symbol path:nth-child(6) { fill: #FF5C26; }
.vp-web[data-design="orange-edge"] .vp-kind { color: #FFFFFF; font-size: 14px; font-weight: 700; line-height: 1.276; }
.vp-web[data-design="orange-edge"] .vp-chip { background: #FFFFFF; }
.vp-web[data-design="orange-edge"] .vp-chip span { color: #C43D11; }
.vp-web[data-design="orange-edge"] .vp-inst,
.vp-web[data-design="orange-edge"] .vp-label { color: #FFFFFF; font-size: 14px; font-weight: 700; line-height: 1.26; }
.vp-web[data-design="orange-edge"] .vp-date { font-size: 14px; font-weight: 700; }
.vp-web[data-design="orange-edge"] .vp-campus { color: #FFFFFF; font-size: 14px; font-weight: 700; line-height: 1.26; }

/* ---------- the founding edition: no corner symbol, no printed band ---------- */
.vp-web:is([data-design="founding-night-sky"], [data-design="founding-seal"], [data-design="founding-sunrise-steel"], [data-design="founding-copper-guilloche"]) .vp-symbol,
.vp-web:is([data-design="founding-night-sky"], [data-design="founding-seal"], [data-design="founding-sunrise-steel"], [data-design="founding-copper-guilloche"]) .vp-face::after { display: none; }
/* The chip on the drawn designs: no capsule, the disc and the word stand on the stock. */
.vp-web:is([data-design="founding-night-sky"], [data-design="founding-sunrise-steel"], [data-design="founding-copper-guilloche"]) .vp-chip { background: none; }

/* Night sky (F1): deep ink, light print; the founding mark in pale copper. */
.vp-web[data-design="founding-night-sky"] .vp-face { background: radial-gradient(circle 400px at 70% 0, #2A2420 0%, #181613 50%, #0F0E0C 100%); }
.vp-web[data-design="founding-night-sky"] .vp-face::before { box-shadow: none; }
.vp-web[data-design="founding-night-sky"] .vp-print { color: #F7F0E6; }
.vp-web[data-design="founding-night-sky"] .vp-wordmark path { fill: #F2EADF; }
.vp-web[data-design="founding-night-sky"] .vp-kind { color: #B5ACA0; }
.vp-web[data-design="founding-night-sky"] .vp-chip span { color: #F2EADF; }
.vp-web[data-design="founding-night-sky"] .vp-inst { color: #D8CFC4; }
.vp-web[data-design="founding-night-sky"] .vp-label,
.vp-web[data-design="founding-night-sky"] .vp-campus { color: #B5ACA0; }
.vp-web[data-design="founding-night-sky"] .vp-founding { color: #F3B48C; }

/* Founders seal (F2): pearl, ink print as on White edge; the seal is art on the stock. */
.vp-web[data-design="founding-seal"] .vp-face { background: linear-gradient(160deg, #FDFBF7 0%, #F6F1E9 55%, #EFE8DD 100%); }

/* Sunrise steel (F3): black steel; "Valid until" and the date in ink on the sun. */
.vp-web[data-design="founding-sunrise-steel"] .vp-face { background: radial-gradient(circle 420px at 20% 0, #2A2824 0%, #1A1916 55%, #121110 100%); }
.vp-web[data-design="founding-sunrise-steel"] .vp-face::before { box-shadow: none; }
.vp-web[data-design="founding-sunrise-steel"] .vp-print { color: #F4EDE3; }
.vp-web[data-design="founding-sunrise-steel"] .vp-wordmark path { fill: #C9C0B4; }
.vp-web[data-design="founding-sunrise-steel"] .vp-kind,
.vp-web[data-design="founding-sunrise-steel"] .vp-campus { color: #BDB4A8; }
.vp-web[data-design="founding-sunrise-steel"] .vp-chip span { color: #F4EDE3; }
.vp-web[data-design="founding-sunrise-steel"] .vp-inst { color: #C9C0B4; }
.vp-web[data-design="founding-sunrise-steel"] .vp-label { color: #3A2412; }
.vp-web[data-design="founding-sunrise-steel"] .vp-date { color: #161512; }
.vp-web[data-design="founding-sunrise-steel"] .vp-founding { color: #FFB48F; }

/* Copper guilloche (F4): cream cotton, the name in copper foil, a copper disc on the chip. */
.vp-web[data-design="founding-copper-guilloche"] .vp-face { background: radial-gradient(circle 440px at 30% 10%, #FBF7F0 0%, #F3ECDF 70%, #EDE4D5 100%); }
.vp-web[data-design="founding-copper-guilloche"] .vp-print { color: #2B2722; }
.vp-web[data-design="founding-copper-guilloche"] .vp-kind,
.vp-web[data-design="founding-copper-guilloche"] .vp-campus { color: #655C52; }
.vp-web[data-design="founding-copper-guilloche"] .vp-chip i { background: #C2501C; }
.vp-web[data-design="founding-copper-guilloche"] .vp-chip span { color: #8A3A12; }
.vp-web[data-design="founding-copper-guilloche"] .vp-name {
  color: #9B3A14;
  background: linear-gradient(calc(100deg + var(--vp-tx, .18) * 25deg), #9B3A14 0%, #B8461A calc(30% + var(--vp-tx, .18) * 35%), #D2602A calc(44% + var(--vp-tx, .18) * 35%), #BC4A1C calc(54% + var(--vp-tx, .18) * 35%), #9B3A14 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.vp-web[data-design="founding-copper-guilloche"] .vp-inst { color: #3B352E; }
.vp-web[data-design="founding-copper-guilloche"] .vp-label { color: #2B2722; }
.vp-web[data-design="founding-copper-guilloche"] .vp-founding { color: #A9441A; }

/* ---------- the secret designs, drawn only for the picker's locked tiles (no corner symbol, no band) ---------- */
.vp-web:is([data-design="ink-metal"], [data-design="cotton-foil"]) .vp-symbol,
.vp-web:is([data-design="ink-metal"], [data-design="cotton-foil"]) .vp-face::after { display: none; }
.vp-web:is([data-design="ink-metal"], [data-design="cotton-foil"]) .vp-chip { background: none; }

/* Ink metal (01): bead-blasted black steel, light print, the orange core round the edge. */
.vp-web[data-design="ink-metal"] .vp-face { background: radial-gradient(circle 420px at 20% 0, #2A2824 0%, #1A1916 55%, #121110 100%); }
.vp-web[data-design="ink-metal"] .vp-face::before { box-shadow: none; }
.vp-web[data-design="ink-metal"] .vp-print { color: #F4EDE3; }
.vp-web[data-design="ink-metal"] .vp-wordmark path { fill: #C9C0B4; }
.vp-web[data-design="ink-metal"] .vp-kind,
.vp-web[data-design="ink-metal"] .vp-label,
.vp-web[data-design="ink-metal"] .vp-campus { color: #B0A79B; }
.vp-web[data-design="ink-metal"] .vp-chip span { color: #F4EDE3; }
.vp-web[data-design="ink-metal"] .vp-inst { color: #C9C0B4; }

/* Cotton foil (04): cream cotton, the name in copper foil, a copper disc on the chip. */
.vp-web[data-design="cotton-foil"] .vp-face { background: radial-gradient(circle 440px at 30% 10%, #FBF7F0 0%, #F3ECDF 70%, #EDE4D5 100%); }
.vp-web[data-design="cotton-foil"] .vp-print { color: #2B2722; }
.vp-web[data-design="cotton-foil"] .vp-kind,
.vp-web[data-design="cotton-foil"] .vp-campus { color: #655C52; }
.vp-web[data-design="cotton-foil"] .vp-chip i { background: #C2501C; }
.vp-web[data-design="cotton-foil"] .vp-chip span { color: #8A3A12; }
.vp-web[data-design="cotton-foil"] .vp-name {
  color: #9B3A14;
  background: linear-gradient(calc(100deg + var(--vp-tx, .18) * 25deg), #9B3A14 0%, #B8461A calc(30% + var(--vp-tx, .18) * 35%), #D2602A calc(44% + var(--vp-tx, .18) * 35%), #BC4A1C calc(54% + var(--vp-tx, .18) * 35%), #9B3A14 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.vp-web[data-design="cotton-foil"] .vp-inst { color: #3B352E; }
.vp-web[data-design="cotton-foil"] .vp-label { color: #2B2722; }

:root[data-theme="dark"] .vp-web .vp-shadow { box-shadow: 1px 2px 4px rgba(0, 0, 0, .45), 0 calc(8px + var(--vp-press, 0) * 4px) 28px rgba(0, 0, 0, calc(.3 + var(--vp-press, 0) * .08)); }
:root[data-theme="dark"] .vp-web .vp-face::before { box-shadow: inset 0 0 0 1px rgba(22, 21, 18, .12); }
@media (forced-colors: active) {
  .vp-web:is([data-design="founding-copper-guilloche"], [data-design="cotton-foil"]) .vp-name { background: none; -webkit-text-fill-color: CanvasText; }
}