/* Now-tier (§0, §3.1–3.7) — boarding screen, boarding-pass confirm, track view, arrival stamp.
   Kept as its own file rather than appended to styles.css: everything here belongs to the ported
   design and sits next to the handoff components it dresses (ui/wdjf-glass.css owns the track
   view's layout and glass classes; they are not duplicated here).

   TYPE NOTE: the validated design specifies Space Mono for mono text; the app has always used IBM
   Plex Mono. Space Mono is now loaded (index.html) and used by the ported surfaces so they match
   the design that was signed off, while older screens keep Plex. Two monos in one app is a real
   inconsistency — flagged for a follow-up type pass rather than silently resolved either way. */

:root {
  --el-navy: #0c1220;
  --el-amber: #f5a623;
  --el-card: #dde2ea;
  --el-stamp: #1d3a8f;
  --el-teal: #2a9d8f;
  --el-mono: 'Space Mono', 'IBM Plex Mono', monospace;
}

.mono-tiny { font: 400 10px var(--el-mono); letter-spacing: 2px; color: rgba(242,233,216,0.4); }

/* ── §0 boarding ─────────────────────────────────────────────────────────────────────────── */
.boarding-screen { display: flex; flex-direction: column; padding: 0; height: 100dvh; }
.boarding-head { padding: 14px 20px 10px; display: flex; justify-content: space-between; align-items: center; }
.boarding-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 22px; min-height: 0; }
.boarding-status { text-align: center; font: 400 11px var(--el-mono); letter-spacing: 3px; color: rgba(242,233,216,0.45); }
.boarding-manifest { text-align: center; font: 400 10px var(--el-mono); letter-spacing: 2px; color: rgba(242,233,216,0.3); padding: 0 20px; }
.boarding-privacy { flex: none; min-height: 52px; background: #0a0f1c; border-top: 1px solid rgba(245,166,35,0.18); display: flex; align-items: center; justify-content: center; text-align: center; font: 400 10px var(--el-mono); letter-spacing: 2px; color: rgba(242,233,216,0.45); padding: 0 16px env(safe-area-inset-bottom); }

/* ── shared: the split-flap strip (ui/wdjf-ticker.js writes the cells) ───────────────────── */
.wdjf-ticker { flex: none; height: 36px; background: #000; display: flex; align-items: center; justify-content: center; gap: 1px; overflow: hidden; }
.boarding-body .wdjf-ticker { height: 44px; }

/* ── §3.6 boarding-pass confirm card ────────────────────────────────────────────────────── */
.pass-card { background: var(--el-card); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(12,18,32,0.12); padding: 20px 20px 0; display: flex; flex-direction: column; color: var(--el-navy); position: relative; overflow: hidden; }
.pass-livery { height: 6px; margin: -20px -20px 14px; background: linear-gradient(90deg, var(--el-navy) 0 44%, var(--el-amber) 44% 72%, var(--el-teal) 72% 100%); }
.pass-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid var(--el-navy); padding-bottom: 10px; gap: 12px; }
.pass-kind { font: 400 10px var(--el-mono); letter-spacing: 2px; color: rgba(12,18,32,0.55); white-space: nowrap; }
.pass-route { display: flex; align-items: center; gap: 14px; margin: 18px 0 4px; }
.pass-iata { font: 700 30px var(--el-mono); letter-spacing: 2px; }
.pass-leg { flex: 1; border-top: 2px dotted rgba(12,18,32,0.4); position: relative; }
.pass-leg span { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font-size: 12px; background: var(--el-card); padding: 0 6px; }
.pass-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-top: 16px; }
.pass-label { font: 400 8px var(--el-mono); letter-spacing: 2px; color: rgba(12,18,32,0.5); }
.pass-value { font: 700 14px var(--el-mono); }
.pass-perf { margin: 16px -20px 0; position: relative; border-top: 2px dashed rgba(12,18,32,0.35); }
.pass-perf i { position: absolute; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--el-navy); }
.pass-perf i.l { left: -9px; }
.pass-perf i.r { right: -9px; }
.pass-stub { margin: 0 -20px; background: #10192c; padding: 12px 20px 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pass-barcode { height: 34px; flex: 1; max-width: 180px; background: repeating-linear-gradient(90deg, #f2e9d8 0 2px, transparent 2px 5px, #f2e9d8 5px 6px, transparent 6px 10px); }
.pass-seq { font: 400 10px var(--el-mono); letter-spacing: 2px; color: rgba(242,233,216,0.55); text-align: right; }

/* Fields and preview live INSIDE the light pass card, so the dark-screen card styling they
   inherit has to be re-toned. Overrides only -- the field markup, ids and behaviour are the
   originals. */
.pass-topbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pass-topbar button { background: none; border: none; color: var(--ink-muted); font-size: 20px; cursor: pointer; padding: 0 4px 0 0; }
.pass-eyebrow { font: 400 12px var(--el-mono); letter-spacing: 3px; color: var(--el-amber); }
.pass-step { margin-left: auto; font: 400 10px var(--el-mono); color: rgba(242,233,216,0.4); }
.pass-fields { margin-top: 16px; }
.pass-fields .card { background: rgba(12,18,32,0.05); border: 1px solid rgba(12,18,32,0.14); }
.pass-fields .card span { color: rgba(12,18,32,0.55) !important; }
.pass-fields .field { background: #fff; border-color: rgba(12,18,32,0.18); }
.pass-fields .field input { color: var(--el-navy); }
.pass-fields .field input::placeholder { color: rgba(12,18,32,0.35); }
.pass-fields .edit-tag { color: rgba(12,18,32,0.45); }
.pass-fields #preview-card, .pass-fields #preview-card div { color: rgba(12,18,32,0.75) !important; }
.pass-fields #preview-card strong { color: var(--el-navy) !important; }

/* ── §3.1–3.5 track view (layout + glass classes live in ui/wdjf-glass.css) ──────────────── */
.track-view { padding: 0; }
.track-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 16px 8px; }
.track-back { background: none; border: none; color: var(--ink-muted); font-size: 20px; cursor: pointer; padding: 0 4px 0 0; }
.track-route { font: 600 10.5px var(--el-mono); letter-spacing: 0.18em; color: var(--accent); }
.track-meta { margin-left: auto; font: 500 10.5px var(--el-mono); color: var(--ink-muted); }
.track-map { position: relative; transition: flex-basis .5s ease; flex-grow: 0; flex-shrink: 0; overflow: hidden; }
.view-toggle { position: absolute; top: 10px; right: 12px; display: flex; background: rgba(5,8,15,0.75); border: 1px solid rgba(245,166,35,0.35); border-radius: 999px; overflow: hidden; z-index: 5; }
.view-toggle button { height: 36px; padding: 0 15px; border: 0; background: transparent; color: rgba(245,166,35,0.7); font: 400 10px var(--el-mono); letter-spacing: 1px; cursor: pointer; }
.view-toggle button.active { background: var(--el-amber); color: var(--el-navy); }
.map-legend { position: absolute; left: 12px; bottom: 10px; display: flex; gap: 8px; z-index: 5; }
.legend-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border: 1px solid rgba(239,116,64,0.4); border-radius: 999px; background: rgba(11,18,32,0.7); font: 500 9px var(--el-mono); letter-spacing: 0.06em; color: var(--ink); }
.legend-chip.est { border-color: rgba(147,165,192,0.35); color: var(--ink-muted); }

.instrument-bar { flex: none; height: 88px; background: #0a0f1c; border-top: 1px solid rgba(245,166,35,0.18); display: flex; align-items: center; gap: 14px; padding: 0 16px; }
.dial-compass { position: relative; width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 50% 42%, #131c30, #070b14 78%); box-shadow: inset 0 0 0 2px rgba(245,166,35,0.35), 0 0 14px rgba(245,166,35,0.12); flex: none; }
.dial-compass .rose { position: absolute; font: 400 7px var(--el-mono); color: rgba(245,166,35,0.5); }
.dial-compass .rose.n { top: 4px; left: 0; right: 0; text-align: center; color: rgba(245,166,35,0.8); }
.dial-compass .rose.s { bottom: 4px; left: 0; right: 0; text-align: center; }
.dial-compass .rose.w { left: 6px; top: 28px; }
.dial-compass .rose.e { right: 6px; top: 28px; }
.dial-compass .needle { position: absolute; left: 50%; top: 50%; width: 2px; height: 22px; margin-left: -1px; margin-top: -22px; background: linear-gradient(180deg, var(--el-amber), rgba(245,166,35,0.1)); transform-origin: 50% 100%; transition: transform 1.1s cubic-bezier(.34,1.3,.5,1); border-radius: 2px; }
.dial-compass .hub { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--el-amber); }
.dial-sun { width: 64px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dial-sun circle { transition: cx 1.1s ease, cy 1.1s ease; filter: drop-shadow(0 0 4px rgba(245,166,35,0.7)); }
.dial-label { font: 700 10px var(--el-mono); letter-spacing: 1px; color: var(--el-amber); }
.instrument-readout { flex: 1; min-width: 0; }
.instrument-readout .hdg { font: 700 17px var(--el-mono); color: var(--el-amber); letter-spacing: 2px; }
.instrument-readout .route { font: 400 10px var(--el-mono); letter-spacing: 2px; color: rgba(242,233,216,0.4); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.instrument-placement { font: 400 10px var(--el-mono); letter-spacing: 1px; color: rgba(242,233,216,0.35); text-align: right; flex: none; line-height: 1.35; }

.track-controls { flex: none; padding: 10px 16px 8px; display: flex; flex-direction: column; gap: 8px; }
.control-row { display: flex; align-items: center; gap: 10px; }
.control-row .dots { flex: 1; min-width: 0; overflow: hidden; }
.track-disclaimer { font: 500 9.5px var(--el-mono); line-height: 1.45; color: var(--ink-muted); letter-spacing: 0.02em; }

/* ── DD-006 place labels (drawn as DOM markers by flight-map.js) ─────────────────────────── */
/* Hierarchy from the design mockups: cities bold and uppercase; water and geography lighter and
   italic; peaks prefixed with a triangle. pointer-events:none throughout -- a label must never
   intercept a tap meant for a photo pin underneath it. */
.map-label { font-family: var(--el-mono); white-space: nowrap; pointer-events: none; user-select: none; }
.map-label-city { font-size: 9.5px; font-weight: 700; letter-spacing: 2px; color: rgba(242,233,216,0.82); }
.map-label-peak { font-size: 8.5px; font-weight: 500; letter-spacing: 1px; color: rgba(242,233,216,0.6); }
.map-label-water { font-size: 9px; font-weight: 400; font-style: italic; letter-spacing: 2px; color: rgba(140,170,220,0.62); }

/* ── §3.7 arrival stamp ─────────────────────────────────────────────────────────────────── */
.arrival-card { background: var(--el-card); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(12,18,32,0.12); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 24px 24px; position: relative; overflow: hidden; }
.arrival-card .card-badge { position: absolute; top: 14px; left: 16px; }
.arrival-eyebrow { position: absolute; top: 22px; right: 16px; font: 400 9px var(--el-mono); letter-spacing: 3px; color: rgba(12,18,32,0.4); }
.stamp { width: 168px; height: 168px; position: relative; margin-top: 18px; animation: wdjf-stamp-in .55s cubic-bezier(.2,1.4,.4,1) .25s both; }
.arrival-welcome { margin-top: 26px; font-size: 24px; font-weight: 800; color: var(--el-navy); text-align: center; animation: wdjf-fade-up .6s ease .95s both; }
.arrival-meta { margin-top: 6px; font-size: 13px; color: rgba(12,18,32,0.6); text-align: center; animation: wdjf-fade-up .6s ease 1.15s both; }
.arrival-notice { margin-top: 14px; font: 400 10px var(--el-mono); letter-spacing: 2px; color: rgba(12,18,32,0.5); text-align: center; animation: wdjf-fade-up .6s ease 1.35s both; }
.arrival-carousel { margin-top: 22px; height: 22px; width: 120px; overflow: hidden; position: relative; animation: wdjf-fade-up .5s ease 1.6s both; }
.arrival-carousel > div { display: flex; gap: 14px; animation: wdjf-carousel 1.6s linear 1.6s infinite; }
.arrival-carousel i { width: 30px; height: 18px; background: rgba(12,18,32,0.25); border-radius: 3px; flex: none; }
.arrival-carousel i:nth-child(even) { background: rgba(12,18,32,0.4); }

@keyframes wdjf-stamp-in { 0% { transform: scale(2.6) rotate(-18deg); opacity: 0; } 62% { transform: scale(.92) rotate(-7deg); opacity: 1; } 82% { transform: scale(1.04) rotate(-9deg); } 100% { transform: scale(1) rotate(-8deg); opacity: 1; } }
@keyframes wdjf-fade-up { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes wdjf-carousel { 0% { transform: translateX(0); } 100% { transform: translateX(-88px); } }

/* The stamp slams in, the carousel loops forever, the map pane slides. All of that is motion for
   its own sake to someone who has asked the OS not to do that to them. */
@media (prefers-reduced-motion: reduce) {
  .stamp, .arrival-welcome, .arrival-meta, .arrival-notice, .arrival-carousel { animation: none; opacity: 1; transform: none; }
  .arrival-carousel > div { animation: none; }
  .track-map, .dial-compass .needle, .dial-sun circle { transition: none; }
}