/* Aventra — Travel Wallet (passes, documents, page, composer) */

/* ------------------------------------------------------------- pass */
.wl-pass { --stub: 150px; position: relative; display: flex; min-width: 0; border-radius: 20px; overflow: hidden; color: var(--text); text-align: left; background: var(--glass-bg-strong); border: 1px solid var(--glass-rim);
  /* ticket notches where the stub tears off */
  -webkit-mask: radial-gradient(circle 10px at calc(100% - var(--stub)) 0, transparent 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 10px at calc(100% - var(--stub)) 100%, transparent 97%, #000) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle 10px at calc(100% - var(--stub)) 0, transparent 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 10px at calc(100% - var(--stub)) 100%, transparent 97%, #000) bottom / 100% 51% no-repeat; }
.wl-pass-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; background: linear-gradient(135deg, var(--accent-soft), transparent 62%); }
.wl-pass.kind-train .wl-pass-main, .wl-pass.kind-bus .wl-pass-main { background: linear-gradient(135deg, var(--risk-green-soft), transparent 62%); }
.wl-pass.kind-ferry .wl-pass-main { background: linear-gradient(135deg, var(--accent-soft), var(--risk-green-soft) 70%, transparent); }
.wl-pass.kind-stay .wl-pass-main, .wl-pass.kind-event .wl-pass-main { background: linear-gradient(135deg, var(--risk-yellow-soft), transparent 62%); }
.wl-pass.kind-car .wl-pass-main { background: linear-gradient(135deg, var(--risk-orange-soft), transparent 62%); }
.wl-pass-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wl-pass-kind { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.wl-pass-prov { flex: 1; min-width: 0; font-weight: 600; color: var(--heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-pass-status { flex: none; }
.wl-pass-route { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.wl-pass-end { display: flex; flex-direction: column; min-width: 0; }
.wl-pass-end.to { align-items: flex-end; text-align: right; }
.wl-pass-code { max-width: 100%; font-family: var(--font-display); font-size: 40px; line-height: 1.02; letter-spacing: 0.02em; color: var(--heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-pass-code.sm { font-size: var(--fs-xl); line-height: 1.2; }
.wl-pass-code.name { font-size: 24px; line-height: 1.15; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: break-word; }
.wl-pass.size-sm .wl-pass-code.name { font-size: 19px; }
.wl-pass.size-lg .wl-pass-code.name { font-size: 32px; }
.wl-pass-place { max-width: 100%; font-size: var(--fs-xs); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-pass-time { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.wl-pass-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.wl-pass-line { display: flex; align-items: center; gap: 6px; min-width: 64px; color: var(--accent); }
.wl-pass-dash { flex: 1; min-width: 12px; border-top: 2px dotted currentColor; opacity: 0.5; }
.wl-pass-glyph { display: grid; place-items: center; }
.wl-pass-glyph.txt { font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
.wl-pass-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px 12px; }
.wl-pass-grid > div { display: flex; flex-direction: column; min-width: 0; }
.wl-pass-grid .k, .wl-pass-stub .k, .wl-doc .k, .wl-show-ref .k { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.wl-pass-grid .v { font-weight: 600; color: var(--heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-pass-stub { flex: none; width: var(--stub); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px 12px; text-align: center; border-left: 2px dashed var(--line); background: var(--glass-bg); }
.wl-pass-ref { font-size: var(--fs-lg); font-weight: 700; letter-spacing: 0.12em; color: var(--heading); word-break: break-all; }
.wl-pass-qr { width: 92px; height: 92px; padding: 4px; border-radius: 10px; overflow: hidden; background: #fff; border: 1px solid var(--line); cursor: zoom-in; }
.wl-pass-qr img { object-fit: contain; background: #fff; }
.wl-pass-qr-ico { display: inline-flex; color: var(--text-3); }
.wl-pass-files { color: var(--text-2); }
.wl-pass.is-past { opacity: 0.72; filter: grayscale(0.4); }
.wl-pass.size-sm { --stub: 112px; }
.wl-pass.size-sm .wl-pass-main { padding: 12px 14px; gap: 8px; }
.wl-pass.size-sm .wl-pass-code { font-size: 28px; }
.wl-pass.size-sm .wl-pass-stub { padding: 12px 8px; }
.wl-pass.size-sm .wl-pass-ref { font-size: var(--fs-md); }
.wl-pass.size-lg { --stub: 190px; }
.wl-pass.size-lg .wl-pass-main { padding: 22px 24px; gap: 16px; }
.wl-pass.size-lg .wl-pass-code { font-size: 54px; }
.wl-pass.size-lg .wl-pass-qr { width: 132px; height: 132px; }

/* --------------------------------------------------------- document */
.wl-doc { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px 18px; border-radius: 20px; overflow: hidden; text-align: left; color: var(--text); background: linear-gradient(140deg, var(--glass-bg-strong), var(--accent-soft)); border: 1px solid var(--glass-rim); }
.wl-doc.kind-passport { --heading: #ffffff; --text: rgba(255, 255, 255, 0.92); --text-2: rgba(255, 255, 255, 0.78); --text-3: rgba(255, 255, 255, 0.62); --surface-3: rgba(255, 255, 255, 0.16); --accent: var(--route-2); --accent-soft: rgba(255, 255, 255, 0.14); background: linear-gradient(140deg, var(--bg-4), var(--bg-3)); border-color: rgba(255, 255, 255, 0.18); }
.wl-doc.kind-passport .risk-pill { background: rgba(255, 255, 255, 0.16); color: #ffffff; }
.wl-doc-head { display: flex; align-items: center; gap: 12px; }
.wl-doc-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.wl-doc-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wl-doc-title .t { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-doc-title .s { font-size: var(--fs-xs); color: var(--text-2); }
.wl-doc-flag { flex: none; font-size: 30px; line-height: 1; }
.wl-doc-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px 14px; }
.wl-doc-body > div { display: flex; flex-direction: column; min-width: 0; }
.wl-doc-body .v { font-weight: 600; color: var(--heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-doc-num { font-weight: 700; letter-spacing: 0.08em; color: var(--heading); }
.wl-doc-bar { height: 4px; border-radius: 4px; overflow: hidden; background: var(--surface-3); }
.wl-doc-bar span { display: block; height: 100%; background: var(--accent); }
.wl-doc.tone-orange .wl-doc-bar span { background: var(--risk-orange); }
.wl-doc.tone-red .wl-doc-bar span { background: var(--risk-red); }
.wl-doc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }

/* ------------------------------------------------------------- page */
.wl-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: var(--gutter); border-radius: var(--radius-lg); }
.wl-status-ico { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; }
.wl-status-ico.on { background: var(--risk-green-soft); color: var(--risk-green-ink); }
.wl-status-ico.off { background: var(--risk-orange-soft); color: var(--risk-orange-ink); }
.wl-next { margin-bottom: 26px; }
.wl-next-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--gutter); align-items: center; }
.wl-next-actions { display: flex; flex-direction: column; gap: 10px; }
.wl-tile { display: block; width: 100%; padding: 0; border-radius: 20px; color: inherit; text-align: left; transition: transform var(--dur-fast) var(--ease); }
.wl-tile:hover { transform: translateY(-2px); }
.wl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: var(--gutter); align-items: start; }
.wl-section { margin-bottom: 28px; }
.wl-bar { margin: 6px 0 16px; overflow-x: auto; }
.wl-warns { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.wl-warns .notice, .wl-home-warn { width: 100%; text-align: left; }
.wl-past > summary { cursor: pointer; padding: 8px 0; font-weight: 600; color: var(--text-2); }
.wl-past .wl-grid { margin-top: 12px; }
.wl-empty { gap: 18px; padding: 28px; }
.wl-empty-head { display: flex; flex-direction: column; gap: 6px; }
.wl-empty-head h2 { font-size: var(--fs-2xl); }
.wl-privacy { display: flex; align-items: center; gap: 6px; }

.wl-picker { display: flex; flex-direction: column; gap: 16px; }
.wl-picker-group { display: flex; flex-direction: column; gap: 8px; }
.wl-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.wl-picker-grid.wide { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.wl-picker-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; border-radius: 16px; background: var(--glass-bg-strong); border: 1px solid var(--glass-rim-2); color: var(--heading); font-weight: 600; text-align: left; transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast), box-shadow var(--dur-fast); }
.wl-picker-tile:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-soft); }
.wl-picker-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }

/* --------------------------------------------------------- composer */
.wl-compose { display: flex; flex-direction: column; gap: 16px; }
.wl-kinds { display: flex; flex-direction: column; gap: 10px; }
.wl-kind-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wl-kind-group .label { flex: none; width: 84px; }
.wl-kind-group .chip { padding: 6px 12px; }
.wl-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.wl-f-code .input { letter-spacing: 0.1em; }
.wl-paste { padding: 10px 14px; }
.wl-paste > summary { display: flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 600; color: var(--accent); list-style: none; }
.wl-paste > summary::-webkit-details-marker { display: none; }
.wl-paste[open] > summary { margin-bottom: 10px; }
.wl-paste-in { min-height: 90px; font-size: var(--fs-sm); }
.wl-compose-meta { align-items: start; gap: 14px; }
.wl-drop { padding: 18px 14px; }
.wl-files { display: flex; flex-direction: column; gap: 8px; }
.wl-file { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; background: var(--surface-3); }
.wl-file-ico { flex: none; width: 44px; height: 44px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--glass-bg-strong); color: var(--accent); }
.wl-file-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wl-file-text .t { font-weight: 600; color: var(--heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-file-text .s { font-size: var(--fs-xs); color: var(--text-2); }

/* ----------------------------------------------------------- detail */
.wl-detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--gutter); align-items: start; }
.wl-detail-main { display: flex; flex-direction: column; gap: var(--gutter); min-width: 0; }
.wl-detail-aside { display: flex; flex-direction: column; gap: var(--gutter); position: sticky; top: calc(var(--topbar-h) + 8px); }
.wl-kv .wl-v { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.wl-notes p { margin: 4px 0 0; white-space: pre-wrap; }
.wl-atts { display: flex; flex-direction: column; gap: 14px; }
.wl-att { margin: 0; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--line); background: var(--glass-bg-strong); }
.wl-att-preview.pdf { background: var(--surface-3); }
.wl-att-preview.pdf.open { height: min(72vh, 760px); }
.wl-pdf-cover { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 28px 16px; text-align: center; color: var(--text-2); }
.wl-pdf-cover > .ico { color: var(--accent); }
.wl-pdf { display: block; width: 100%; height: 100%; border: 0; }
.wl-att-preview.img { display: flex; justify-content: center; background: #fff; }
.wl-att-imgbtn { display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in; }
.wl-att-imgbtn img { display: block; width: 100%; max-height: 420px; object-fit: contain; background: #fff; }
.wl-att-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; }
.wl-att-name { display: inline-flex; align-items: center; gap: 4px; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-offline-card .row b { color: var(--heading); }

/* Show-at-the-gate view */
.wl-show { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.wl-show-stage { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; padding: 12px; border-radius: var(--radius-md); background: #fff; }
.wl-show-stage img { display: block; max-width: 100%; max-height: 72vh; width: auto; height: auto; object-fit: contain; }
.wl-show-ref { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wl-show-ref .mono { font-size: 30px; font-weight: 700; letter-spacing: 0.16em; color: var(--heading); }
.wl-show-stage .wl-show-ref .mono { color: #0a2540; }

/* Home card + itinerary tickets */
.wl-home-next { display: flex; flex-direction: column; gap: 8px; width: 100%; color: inherit; text-align: left; }
.wl-home-next:hover .wl-pass { border-color: var(--accent); }
.pg-itin-tix { margin-bottom: 4px; }
.pg-itin-item.is-ticket { margin-bottom: 6px; padding: 10px; border-bottom: 0; border-radius: 12px; background: var(--accent-soft); }
.pg-itin-tix-ico { flex: none; width: 56px; display: grid; place-items: center; color: var(--accent); }
a.pg-itin-text { color: inherit; }
a.pg-itin-text:hover { text-decoration: none; }
a.pg-itin-text:hover .t { color: var(--accent); }

@media (max-width: 1180px) {
  .wl-detail { grid-template-columns: minmax(0, 1fr); }
  .wl-detail-aside { position: static; }
}
@media (max-width: 760px) {
  .wl-pass { flex-direction: column; -webkit-mask: none; mask: none; }
  .wl-pass .wl-pass-stub { width: auto; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 12px 16px; text-align: left; border-left: 0; border-top: 2px dashed var(--line); }
  .wl-pass-code { font-size: 32px; }
  .wl-pass.size-lg .wl-pass-code { font-size: 38px; }
  .wl-pass.size-lg .wl-pass-qr { width: 96px; height: 96px; }
  .wl-next-row { grid-template-columns: minmax(0, 1fr); }
  .wl-next-actions { flex-direction: row; flex-wrap: wrap; }
  .wl-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .wl-kind-group .label { width: 100%; }
  .wl-pdf-inline { display: none; }
  .wl-att-preview.pdf.open { height: 60vh; }
}

/* ------------------------------------------------------ wallet lock */
.lk-screen { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 28px 18px 22px; }
.lk-screen.compact { padding: 14px 6px 8px; gap: 8px; }
.lk-screen h4 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 20px; color: var(--heading); }
.lk-screen.compact h4 { font-size: 16px; }
.lk-screen p { margin: 0; max-width: 42ch; }
.lk-art { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.lk-screen.compact .lk-art { width: 42px; height: 42px; border-radius: 14px; }
.lk-form { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 6px; flex-wrap: wrap; }
.lk-form.col { flex-direction: column; align-items: stretch; }
.lk-pin { width: 11ch; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--glass-rim-2); background: var(--surface-2); color: var(--heading); font-size: 20px; letter-spacing: 0.35em; text-align: center; font-variant-numeric: tabular-nums; }
.lk-form.col .lk-pin { width: 100%; }
.lk-pin:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.lk-pin.shake { animation: lk-shake 0.4s; }
@keyframes lk-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-4px); } }
.lk-msg { min-height: 1.2em; color: var(--risk-orange-ink); }
.lk-forgot { margin-top: 2px; }
.lk-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--glass-rim-2); }
.lk-bar .small { display: inline-flex; align-items: center; gap: 6px; }
.wl-locked { max-width: 560px; }
html.reduce-motion .lk-pin.shake { animation: none; }