/* Boarding pass hoodie (inc/boarding-pass.php + assets/js/boarding-pass.js).
   Loads after our-song.css (shared frame) and map-hoodie.css (fields, chips). */

/* the design frame on the hoodie: 290 x 275.5 mm in px (1 px = 1 mm), placed flat by the JS */
.bp-card { position: absolute; left: 0; top: 0; width: 290px; height: 275.5px; transform-origin: 0 0; color: var(--ink, #fff); }
.bp-svg { position: absolute; left: 0; top: 0; width: 290px; height: 275.5px; overflow: visible; }
.bp-flag { position: absolute; display: block; max-width: none; object-fit: fill; }
.bp-t { position: absolute; white-space: nowrap; font-kerning: normal; font-feature-settings: "calt" 0; font-synthesis: none; }
.bp-t[dir="rtl"] { unicode-bidi: plaintext; }
.bp-meas { position: absolute; left: -9999px; top: 0; font-size: 100px; line-height: 1; white-space: pre; visibility: hidden; pointer-events: none; font-kerning: normal; font-feature-settings: "calt" 0; font-synthesis: none; }

/* step 1: airports */
.bp-field { margin-bottom: 16px; }
.bp-air-flag { flex: none; width: 32px; height: 24px; border-radius: 4px; background: center / cover no-repeat; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.bp-air .c { width: 56px; height: 56px; display: grid; place-items: center; background-size: 40px 30px; background-position: center; background-repeat: no-repeat; background-color: var(--os-stage); }
.bp-chosen { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 16px; border-radius: 18px; border: 2px solid var(--skrnd-ink); background: var(--os-card); font-size: 18px; font-weight: 700; text-align: start; cursor: pointer; }
.bp-chosen b { font-weight: 900; letter-spacing: .04em; }
.bp-edit { margin-inline-start: auto; font-size: 14px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; color: var(--skrnd-muted); }
.bp-none { margin: 8px 0 0; font-size: 15px; }

/* step 3: extras */
.bp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.bp-half { margin-top: 12px; }
.bp-linelab { margin-top: 20px; }

/* step 4: layout tiles with the real pass, scaled down */
.bp-layouts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; max-width: 480px; }
.bp-layout { padding: 10px 8px 12px; font-size: 15px; gap: 8px; }
.bp-layout .img { position: relative; width: 100%; max-width: none; aspect-ratio: 290 / 210; border-radius: 14px; overflow: hidden; display: block; }
.bp-mini { position: absolute; left: 50%; top: 6%; width: 290px; height: 275.5px; transform-origin: 0 0; }
.bp-mini--classic { transform: scale(.5) translateX(-50%); }
.bp-mini--phone { transform: scale(.55) translateX(-50%); }
@media (max-width: 420px) { .bp-mini--classic { transform: scale(.44) translateX(-50%); } .bp-mini--phone { transform: scale(.45) translateX(-50%); } }

/* same desktop sizing + focus rules as the map page */
@media (min-width: 900px) {
  .bp-app .os-photo { width: min(100%, 486px, calc((100vh - var(--skrnd-header-h, 68px) - 190px) * .8)); min-width: 300px; }
  .bp-app .os-panel, .bp-app .os-bar { zoom: .9; }
}
.bp-app input:focus-visible, .bp-app label:focus-within { outline: none; }
/* our-song.css sizes every svg inside a tile (`.os-tile .img svg` 42px): not the pass */
.os-tile .img .bp-svg { position: absolute; left: 0; top: 0; width: 290px; height: 275.5px; stroke-width: initial; }