/* PASSPORT BOOK (2026-10-30) — js/passport-book.js. Your stamp pages drawn as a
   flip-book passport: hard cover, laminated ID page, the Visa Approved page,
   then your pages exactly as you laid them out. Also used by passport-view.html
   (the page a shared link opens). Demo: /static/passport-profile-preview.html */
.ppb-ov {
    position: fixed; inset: 0; z-index: 100000;
    display: none; flex-direction: column; align-items: center;
    background: radial-gradient(120% 80% at 50% 0%, #24304d, #121a2c);
    overflow-x: hidden; overflow-y: auto;
    padding-top: var(--safe-top, env(safe-area-inset-top, 0px));
    padding-bottom: var(--safe-bottom, env(safe-area-inset-bottom, 0px));
}
.ppb-ov.on { display: flex; }
.ppb-top { width: 100%; max-width: 880px; display: flex; align-items: center; gap: 10px; padding: 14px 16px 6px; color: #fff; }
.ppb-top b { flex: 1; min-width: 0; font: 900 16px var(--font-ui, Figtree, sans-serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ppb-top small { display: block; font: 600 11.5px var(--font-ui, Figtree, sans-serif); opacity: .7; }
.ppb-x { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font: 700 18px var(--font-ui, Figtree, sans-serif); cursor: pointer; display: grid; place-items: center; }
.ppb-x svg { width: 20px; height: 20px; }
.ppb-host { padding: 6px 8px; box-sizing: border-box; display: flex; justify-content: center; width: 100%; }
.ppb-ctl { display: flex; gap: 10px; align-items: center; justify-content: center; padding: 8px 16px 18px; color: #fff; }
.ppb-ctl button { border: 0; border-radius: 100px; background: #fff; color: #1a1a1a; font: 800 13px var(--font-ui, Figtree, sans-serif); padding: 10px 16px; cursor: pointer; }
.ppb-ctl button:disabled { opacity: .3; }
.ppb-ctl span { font: 700 12px 'JetBrains Mono', monospace; min-width: 92px; text-align: center; opacity: .85; }
.ppb-msg { color: #fff; text-align: center; padding: 60px 24px; font: 600 14px/1.5 var(--font-ui, Figtree, sans-serif); opacity: .85; max-width: 360px; }

/* pages */
.ppb-page { background: #f5edd6; overflow: hidden; position: relative; font-family: var(--font-ui, Figtree, sans-serif); }
.ppb-in { position: absolute; inset: 0; padding: 22px 20px; }
.ppb-paper::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.08), transparent 7%, transparent 93%, rgba(0,0,0,.05)); }
.ppb-foil { background: linear-gradient(135deg,#bf953f 0%,#fcf6ba 40%,#b38728 60%,#fbf5b7 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

.ppb-cover { background: radial-gradient(120% 90% at 30% 20%, color-mix(in srgb, var(--cv) 87%, #fff), var(--cv) 55%, color-mix(in srgb, var(--cv) 70%, #000)); color: #d9b45a; }
.ppb-cover::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35; background: repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 2px, transparent 2px 5px); }
.ppb-cover .ppb-in { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 40px 24px 34px; text-align: center; }
.ppb-t1 { font-weight: 900; font-size: 13px; letter-spacing: .42em; }
.ppb-crest { width: 52%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; border: 2px solid rgba(217,180,90,.7); box-shadow: inset 0 0 0 6px rgba(217,180,90,.12); }
.ppb-crest i, .ppb-logo { display: block; width: 62%; aspect-ratio: 1; background: linear-gradient(135deg,#bf953f,#fcf6ba 40%,#b38728 60%,#fbf5b7);
    -webkit-mask: var(--ppb-logo) center/contain no-repeat; mask: var(--ppb-logo) center/contain no-repeat; }
.ppb-t2 { font-weight: 900; font-size: 34px; letter-spacing: .12em; line-height: 1; }
.ppb-t3 { font-weight: 700; font-size: 10px; letter-spacing: .3em; opacity: .85; margin-top: 8px; }
.ppb-holder { font-weight: 800; font-size: 11px; letter-spacing: .24em; opacity: .8; }

.ppb-id { background:
    radial-gradient(90% 60% at 80% 10%, rgba(255,217,61,.22), transparent 60%),
    radial-gradient(70% 50% at 10% 90%, rgba(41,128,185,.16), transparent 60%),
    repeating-radial-gradient(circle at 30% 40%, transparent 0 6px, rgba(22,35,63,.05) 6px 7px), #f3eedf; }
.ppb-id::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 45%, rgba(170,220,255,.25) 50%, transparent 62%);
    background-size: 260% 100%; animation: ppb-sheen 6s ease-in-out infinite; }
@keyframes ppb-sheen { 0%,100% { background-position: 110% 0; } 50% { background-position: -10% 0; } }
.ppb-id .ppb-in { display: flex; flex-direction: column; padding: 18px 16px 14px; color: #16233f; }
.ppb-idtop { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1.5px solid #16233f; padding-bottom: 6px; }
.ppb-idtop b { font-weight: 900; font-size: 12px; letter-spacing: .18em; }
.ppb-idtop small { font: 700 9px 'JetBrains Mono', monospace; }
.ppb-idbody { display: grid; grid-template-columns: 38% 1fr; gap: 12px; margin-top: 12px; }
.ppb-photo { aspect-ratio: 3/4; border-radius: 6px; position: relative; overflow: hidden; background: linear-gradient(160deg,#dfe8f1,#c8d4e2); box-shadow: inset 0 0 0 1px rgba(22,35,63,.25); }
.ppb-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.85) contrast(1.05); }
.ppb-photo svg { position: absolute; inset: auto 0 0 0; width: 100%; }
.ppb-ghost { position: relative; width: 56%; aspect-ratio: 3/4; margin-top: 8px; border-radius: 4px; opacity: .28; overflow: hidden; background: linear-gradient(160deg,#dfe8f1,#c8d4e2); }
.ppb-ghost img { position: absolute; inset: 0; }
.ppb-ghost img, .ppb-ghost svg { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); display: block; }
.ppb-f { margin-bottom: 7px; min-width: 0; }
.ppb-f i { display: block; font: normal 700 7.5px var(--font-ui, Figtree, sans-serif); letter-spacing: .14em; color: #6f6a5c; text-transform: uppercase; }
.ppb-f span { display: block; font-weight: 800; font-size: 13px; line-height: 1.15; overflow-wrap: anywhere; }
.ppb-f.mono span { font: 700 11.5px 'JetBrains Mono', monospace; }
.ppb-stats { display: flex; gap: 6px; margin-top: 4px; }
.ppb-stats div { flex: 1; background: rgba(22,35,63,.07); border-radius: 6px; padding: 5px 2px; text-align: center; }
.ppb-stats b { display: block; font-weight: 900; font-size: 15px; }
.ppb-stats small { font-weight: 700; font-size: 7px; letter-spacing: .1em; color: #6f6a5c; }
.ppb-motto { margin-top: 10px; font: italic 600 12px/1.35 var(--font-ui, Figtree, sans-serif); border-left: 3px solid #d9b45a; padding-left: 8px; }
.ppb-mrz { margin-top: auto; padding-top: 10px; font: 700 10px/1.45 'JetBrains Mono', monospace; letter-spacing: .06em; white-space: pre; overflow: hidden; border-top: 1px dashed rgba(22,35,63,.3); }
.ppb-holo { position: absolute; right: 16px; top: 150px; width: 58px; height: 58px; border-radius: 50%; opacity: .55; pointer-events: none;
    background: conic-gradient(from 0deg,#ffd93d,#7fd3ff,#d9a7ff,#9cf2c4,#ffd93d); mix-blend-mode: multiply;
    -webkit-mask: radial-gradient(circle,transparent 34%,#000 35%,#000 48%,transparent 49%,transparent 60%,#000 61%);
            mask: radial-gradient(circle,transparent 34%,#000 35%,#000 48%,transparent 49%,transparent 60%,#000 61%); }
.ppb-head { display: flex; justify-content: space-between; font-weight: 800; font-size: 9px; letter-spacing: .22em; color: #a89c82; text-transform: uppercase; position: relative; z-index: 2; }
.ppb-no { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; font: 700 10px 'JetBrains Mono', monospace; color: #a89c82; letter-spacing: .15em; z-index: 2; }
.ppb-visa { position: absolute; left: 50%; top: 46%; width: 64%; transform: translate(-50%,-50%) rotate(-6deg); border: 0; background: none; padding: 0; cursor: pointer; }
.ppb-visa img { width: 100%; display: block; mix-blend-mode: multiply; }

/* A stamp page: positions are % of the page, sizes scale with its width
   (--pk = width / 390), so a passport looks the same on every phone. */
.ppb-sheet { position: absolute; inset: 0; }
.ppb-sheet::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(212,201,168,.5); pointer-events: none; }
.ppb-sheet::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(180,170,140,.04) 8px, rgba(180,170,140,.04) 9px); }
.ppb-sheet .stamp { position: absolute; cursor: pointer; z-index: 3; touch-action: auto; }
.ppb-sheet .stamp img, .ppb-sheet .stamp video { width: 100%; height: 100%; object-fit: contain; pointer-events: none; display: block; }
.ppb-sheet .stamp-remove { display: none !important; }
.ppb-blank { position: absolute; inset: 30% 18%; display: grid; place-items: center; text-align: center; font: 800 9px var(--font-ui, Figtree, sans-serif); letter-spacing: .16em; color: #b8ab8d; border: 2px dashed #d3c7ab; border-radius: 50%; aspect-ratio: 1; margin: auto; height: auto; }

/* close-up */
.ppb-zoom { position: fixed; inset: 0; z-index: 100001; background: rgba(14,23,48,.6); display: none; place-items: center; padding: 16px; }
.ppb-zoom.on { display: grid; }
.ppb-card { background: #F4F1EA; border-radius: 22px; padding: 22px 20px 18px; width: min(340px, 100%); text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.4); animation: ppb-pop .25s ease-out; font-family: var(--font-ui, Figtree, sans-serif); color: #1a1a1a; }
@keyframes ppb-pop { from { transform: scale(.9); opacity: 0; } }
.ppb-card img, .ppb-card video { width: 74%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 6px 12px rgba(0,0,0,.25)); }
.ppb-card h4 { margin: 10px 0 2px; font-weight: 900; font-size: 20px; }
.ppb-card p { margin: 0; color: #7a7263; font-size: 13px; }
.ppb-card .ppb-btns { display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.ppb-card button { border: 0; border-radius: 100px; background: #1a1a1a; color: #fff; font: 800 13px var(--font-ui, Figtree, sans-serif); padding: 10px 18px; cursor: pointer; }
.ppb-card button.alt { background: #e9e2d3; color: #1a1a1a; }

/* Page turn (js/passport-turn.js): each page is a leaf hinged on the spine.
   Used by the viewer above and by the passport on the Passport tab. */
.pt-book { position: relative; perspective: 2400px; perspective-origin: 15% 50%; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.pt-book::before { content: ""; position: absolute; inset: 0; border-radius: 0 8px 8px 0; background: #e6dcc0; pointer-events: none;
    box-shadow: 2px 1px 0 #efe6cd, 4px 2px 0 #d8cdae, 6px 3px 0 #cbbf9d, 0 18px 40px rgba(0,0,0,.35); }
.pt-leaf { position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; margin: 0 !important;
    transform-origin: 0 50%; will-change: transform; overflow: hidden; border-radius: 0 8px 8px 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.pt-leaf.ppb-cover { border-radius: 0 12px 12px 0; }
.pt-spine, .pt-shade, .pt-cast { position: absolute; inset: 0; pointer-events: none; z-index: 60; }
.pt-spine { background: linear-gradient(90deg, rgba(0,0,0,.2), rgba(0,0,0,.04) 5%, transparent 9%); }
.pt-shade { opacity: 0; background: linear-gradient(90deg, rgba(0,0,0,.05), rgba(0,0,0,.5)); }
.pt-cast { opacity: 0; background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.15) 40%, transparent 75%); }

/* ── Record of travel (2026-11-02, factsHTML in js/passport-book.js) — owner only ── */
.ppb-rec { margin-top: 12px; }
.ppb-rech { font: 800 8px var(--font-ui, Figtree, sans-serif); letter-spacing: .18em; color: #6f6a5c; margin-bottom: 5px; }
.ppb-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.ppb-facts div { background: rgba(22,35,63,.07); border-radius: 6px; padding: 5px 4px 4px; text-align: center; min-width: 0; }
.ppb-facts div.w { grid-column: span 3; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; text-align: left; padding: 6px 8px; }
.ppb-facts div.w small { order: -1; flex: none; }
.ppb-facts b { display: block; font-weight: 900; font-size: 14px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ppb-facts div.w b { font-size: 13px; }
.ppb-facts b em { font-style: normal; font-weight: 700; color: #6f6a5c; font-size: 11px; }
.ppb-facts small { display: block; font-weight: 700; font-size: 6.5px; letter-spacing: .08em; color: #6f6a5c; margin-top: 2px; }
.ppb-mi { display: inline-flex; align-items: center; gap: 2px; }
.ppb-mi .rw-dpad { width: 13px; height: 13px; fill: currentColor; }
/* Short screens: the record takes the space left and scrolls inside it, so
   the motto and the code lines at the foot of the page always stay in view. */
.ppb-id .ppb-idtop, .ppb-id .ppb-idbody, .ppb-id .ppb-motto, .ppb-id .ppb-mrz { flex: none; }
.ppb-rec { flex: 0 1 auto; min-height: 60px; display: flex; flex-direction: column; }
.ppb-rec .ppb-facts { min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
  -webkit-overflow-scrolling: touch; padding-bottom: 2px;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 14px), transparent); mask-image: linear-gradient(#000 calc(100% - 14px), transparent); }