/* DEMO D · Buồng lái — loaded after journey.css on /ve-pow/demo-d/ only.
   The 3D steel bulkhead is switched off (journey-demo.js): the cockpit is drawn here. A thick bezel is the shadow of the window itself; the dashboard is a plate behind the deck.
   Boarding = one big planet rising out of the lower right of the window, the list of situations floats as a hologram on the left with a dashed beam to the planet. */

/* the old still shows the map: not used here */
.jr-cabin.is-live[data-demo=d]::after{display:none!important}
.jr-cabin.is-live[data-demo=d]{--jr-m:clamp(14px,3.1vw,50px);--panel:#050a13}

/* ---- the window: a rounded porthole, the cockpit panel is everything around it ---- */
.jr-cabin.is-live[data-demo=d]:not([data-layout=phone]) .jr-window::after{content:'';position:absolute;inset:0;z-index:0;border-radius:30px;pointer-events:none;
  box-shadow:0 0 0 120vmax var(--panel),inset 0 0 0 1px #4a6a9c,inset 0 0 0 6px #0a1424,inset 0 0 0 7px #26395a,inset 0 0 0 11px #060c17,inset 0 0 90px 6px #01030acc}
/* a faint reflection across the glass */
.jr-cabin.is-live[data-demo=d]:not([data-layout=phone]) .jr-window::before{background:none}
.jr-cabin.is-live[data-demo=d]:not([data-layout=phone]) .jr-frame::after{content:'';position:absolute;left:var(--jr-m);right:var(--jr-m);top:calc(var(--hh) + 8px);height:var(--jr-wh);border-radius:30px;pointer-events:none;background:linear-gradient(112deg,#ffffff0d 0,#ffffff05 22%,#0000 23%)}
/* the map caption keeps its place (it sits inside the window) */
.jr-cabin.is-live[data-demo=d].is-map .jr-window::before{content:'Bản đồ · bấm một số để xem tình huống';background:none}

/* ---- the dashboard under the window ---- */
.jr-cabin.is-live[data-demo=d]:not([data-layout=phone]) .jr-deck::before{content:'';position:absolute;z-index:-1;left:-18px;right:-18px;top:-16px;bottom:-16px;border:1px solid #1f3254;border-radius:22px;background:linear-gradient(180deg,#0e1a2e,#08111f 60%,#060d19);box-shadow:inset 0 1px 0 #ffffff14,inset 0 -10px 24px #0006,0 -1px 0 #02050a,0 16px 40px #000a}
.jr-cabin[data-demo=d] .jr-rail ol{gap:11px;padding:0 6px;border:0;background:none;border-radius:0}
.jr-cabin[data-demo=d] .jr-rail button{width:36px;height:36px;border:1px solid #2c4366;background:radial-gradient(circle at 50% 18%,#273f66,#0b1527 74%);color:#a9bedd;font-size:11.5px;box-shadow:0 3px 0 #02060d,0 7px 10px -2px #000a,inset 0 1px 0 #ffffff24;transition:transform .15s,box-shadow .2s,background .25s,color .25s,border-color .25s}
.jr-cabin[data-demo=d] .jr-rail button:hover{transform:translateY(-1px);border-color:#72eaff;color:#fff}
.jr-cabin[data-demo=d] .jr-rail button:active{transform:translateY(2px);box-shadow:0 1px 0 #02060d,inset 0 1px 0 #ffffff24}
.jr-cabin[data-demo=d] .jr-rail button::before{content:'';position:absolute;left:50%;top:-11px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#16273f;box-shadow:inset 0 1px 1px #000}
.jr-cabin[data-demo=d][data-state=fly] .jr-rail button[aria-current=step]{border-color:#c5f8ff;background:radial-gradient(circle at 50% 20%,#a8f1ff,#2aa9c9 82%);color:#031018;box-shadow:0 3px 0 #0b5568,0 0 24px #72eaffaa,inset 0 1px 0 #ffffffaa}
.jr-cabin[data-demo=d][data-state=fly] .jr-rail button[aria-current=step]::before{background:#72eaff;box-shadow:0 0 9px 1px #72eaff}
.jr-cabin[data-demo=d][data-state=intro] .jr-rail button[aria-current=step]{border-color:#2c4366;background:radial-gradient(circle at 50% 18%,#273f66,#0b1527 74%);color:#a9bedd;box-shadow:0 3px 0 #02060d,0 7px 10px -2px #000a,inset 0 1px 0 #ffffff24}
.jr-cabin[data-demo=d] .jr-arrow{width:38px;height:38px;border-color:#2c4366;background:radial-gradient(circle at 50% 18%,#273f66,#0b1527 74%);box-shadow:0 3px 0 #02060d,inset 0 1px 0 #ffffff24}
.jr-cabin[data-demo=d] .jr-tool{border-radius:12px;border-color:#2c4366;background:linear-gradient(#162842,#0a1424);color:#b4c7e3;box-shadow:0 3px 0 #02060d,0 7px 10px -2px #000a,inset 0 1px 0 #ffffff1c}
.jr-cabin[data-demo=d] .jr-tool::after{content:'';flex:none;width:6px;height:6px;margin-left:2px;border-radius:50%;background:#16273f;box-shadow:inset 0 1px 1px #000}
.jr-cabin[data-demo=d] .jr-tool[aria-pressed=true]{border-color:#2c4366;background:linear-gradient(#162842,#0a1424);color:#72eaff}
.jr-cabin[data-demo=d] .jr-tool[aria-pressed=true]::after{background:#72eaff;box-shadow:0 0 9px 1px #72eaff}
.jr-cabin[data-demo=d] .jr-tool:hover{border-color:#72eaff}

/* ---- boarding: the list as a hologram ---- */
.jr-cabin.is-live[data-demo=d][data-state=intro]:not([data-layout=phone]) .jr-console{width:min(430px,calc(100% - 2*var(--jr-m) - 28px));border-radius:8px 24px 8px 24px;border-color:#72eaff66;background:linear-gradient(180deg,#0a2c4acc,#061528d9 70%);box-shadow:0 0 0 1px #72eaff1f,0 0 56px -8px #72eaff66,inset 0 0 44px #72eaff1c,0 30px 70px -18px #000d}
.jr-cabin.is-live[data-demo=d][data-state=intro]:not([data-layout=phone]) .jr-console::before{background:repeating-linear-gradient(0deg,#72eaff0d 0 1px,#0000 1px 3px);-webkit-mask-image:linear-gradient(#000,#0000 85%);mask-image:linear-gradient(#000,#0000 85%)}
.jr-cabin.is-live[data-demo=d][data-state=intro]:not([data-layout=phone]) .jr-intro{padding:6px 18px 16px}
.jr-cabin.is-live[data-demo=d][data-state=intro]:not([data-layout=phone]) .jr-kicker{display:flex;margin:0 0 7px;font-size:10.5px;letter-spacing:.2em}
.jr-cabin.is-live[data-demo=d][data-state=intro]:not([data-layout=phone]) .jr-kicker::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,#72eaff66,#0000)}
.jr-cabin.is-live[data-demo=d][data-state=intro]:not([data-layout=phone]) .jr-t-sub{font-size:20px}
.jr-cabin.is-live[data-demo=d][data-state=intro]:not([data-layout=phone]) .jr-menu{margin:8px -8px 0}
.jr-cabin.is-live[data-demo=d][data-state=intro]:not([data-layout=phone]) .jr-menu li:not(:last-child)::before{left:22px;top:33px;bottom:-3px}
.jr-cabin.is-live[data-demo=d][data-state=intro]:not([data-layout=phone]) .jr-pick{padding:3px 24px 3px 8px;gap:11px}
.jr-cabin.is-live[data-demo=d][data-state=intro]:not([data-layout=phone]) .jr-no{width:28px;height:28px;font-size:10.5px}
.jr-cabin.is-live[data-demo=d][data-state=intro]:not([data-layout=phone]) .jr-pick-body small{font-size:10px}
.jr-cabin.is-live[data-demo=d][data-state=intro]:not([data-layout=phone]) .jr-pick-body b{margin-top:1px;font-size:12.8px;line-height:1.38}

/* the dashed beam from the hologram to the planet, drawn by journey-demo.js */
.jr-beam{position:absolute;inset:0;z-index:3;width:100%;height:100%;overflow:visible;pointer-events:none;opacity:0;transition:opacity .6s}
.jr-cabin[data-demo=d][data-state=intro]:not(.is-map) .jr-beam.is-on{opacity:1;transition:opacity 1s 1.6s}
.jr-beam-line{fill:none;stroke:#72eaff;stroke-width:1.2;stroke-dasharray:3 6;stroke-linecap:round;opacity:.85}
.jr-beam-dot{fill:#72eaff;filter:drop-shadow(0 0 6px #72eaff)}
.jr-beam-ring{fill:none;stroke:#72eaff;stroke-width:1;opacity:.6;transform-box:fill-box;transform-origin:center;animation:jr-beam 2.6s ease-out infinite}
@keyframes jr-beam{from{transform:scale(.5);opacity:.9}to{transform:scale(2.4);opacity:0}}
.jr-cabin.is-paused .jr-beam-ring{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.jr-beam-ring{animation:none}.jr-beam{transition:none!important}}

/* ---- the situation flight keeps the standard console, tinted like the dashboard ---- */
.jr-cabin.is-live[data-demo=d][data-state=fly]:not([data-layout=phone]) .jr-console{background:linear-gradient(180deg,#0a1830f2,#050d1af7)}