/* impossible jobs — holo.css (home page)
   1. source stars: a glowing star where a statistic is cited; one click opens its source card
   2. the holographic card: same look and same materialise animation as the mission file on the job board
   3. the module rail: a hairline on the left edge that slides out into the modules panel */

/* ---------- 1. source stars ---------- */
.ref-star { position: relative; display: inline-block; vertical-align: super; margin: 0 0 0 4px; padding: 0; border: 0; background: none; line-height: 0;
  color: var(--cyan); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ref-star::after { content: ""; position: absolute; inset: -12px; }                 /* a generous tap target */
.ref-star svg { width: 12px; height: 12px; display: block; filter: drop-shadow(0 0 3px currentColor) drop-shadow(0 0 8px rgba(0,240,200,.55));
  transition: transform .35s cubic-bezier(.2,.9,.2,1), color .25s; animation: starpulse 3.2s ease-in-out infinite; }
.ref-star:hover svg, .ref-star:focus-visible svg { transform: rotate(45deg) scale(1.35); color: var(--pink); }
.ref-star:hover, .ref-star:focus-visible { color: var(--pink); outline: none; }
.ref-star:focus-visible svg { filter: drop-shadow(0 0 3px currentColor) drop-shadow(0 0 10px currentColor); }
@keyframes starpulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.foot-src { font: 500 11px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.foot-src .ref-star { vertical-align: baseline; margin: 0 4px; pointer-events: none; }
.foot-src .ref-star svg { animation: none; }

/* ---------- 2. the holographic card (mirrors .holo on the job board) ---------- */
.ix-holo { position: fixed; inset: 0; z-index: 66; display: grid; place-items: center; }
.ix-holo[hidden] { display: none; }
.ix-backdrop { position: absolute; inset: 0; background: rgba(2,1,6,.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .5s; }
.ix-holo.on .ix-backdrop { opacity: 1; }
.ix-backdrop::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,240,200,.04) 0 1px, transparent 1px 4px); }
.ix-platform { position: fixed; left: 50%; bottom: 2vh; width: min(760px, 80vw); height: 60px; translate: -50% 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0,240,200,.45), rgba(0,240,200,.08) 60%, transparent); filter: blur(4px); opacity: 0; transform: scaleX(.2); transition: opacity .5s, transform .7s cubic-bezier(.2,.9,.2,1); }
.ix-platform::after { content: ""; position: absolute; inset: 22px 10%; border-radius: 50%; border: 1px solid rgba(0,240,200,.6); box-shadow: 0 0 24px rgba(0,240,200,.6); }
.ix-beam { position: fixed; left: 50%; bottom: calc(2vh + 30px); width: min(820px, 92vw); height: 80vh; translate: -50% 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(0,240,200,.16), rgba(0,240,200,0) 85%); clip-path: polygon(38% 100%, 62% 100%, 100% 0, 0 0); opacity: 0; transition: opacity .6s .2s; }
.ix-holo.on .ix-platform { opacity: 1; transform: scaleX(1); }
.ix-holo.on .ix-beam { opacity: 1; }

.ix-card { --c1: var(--cyan); --c2: var(--pink);
  position: relative; z-index: 2; width: min(600px, 94vw); max-height: 86svh; overflow-y: auto; overscroll-behavior: contain; border-radius: 22px;
  --mx: 50%; --my: 0%; --hl: 0;
  background: radial-gradient(420px 320px at var(--mx) var(--my), rgba(255,255,255,calc(.07 * var(--hl))), transparent 60%),
              linear-gradient(170deg, rgba(26,18,52,.96), rgba(9,6,22,.97) 55%);
  border: 1px solid rgba(0,240,200,.35);
  box-shadow: 0 0 0 1px rgba(255,255,255,.03) inset, 0 0 60px rgba(0,240,200,.18), 0 40px 120px rgba(0,0,0,.7);
  color: var(--lavender); outline: none; scrollbar-width: thin; scrollbar-color: #2a2145 transparent; text-align: left;
  transform-style: preserve-3d; transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .4s; will-change: transform; }
.ix-card:hover { border-color: rgba(255,95,158,.55); }
.ix-card.wide { width: min(760px, 94vw); }
.ix-scan { position: absolute; left: 0; right: 0; top: 0; height: 140px; pointer-events: none; z-index: 4; background: linear-gradient(transparent, rgba(0,240,200,.14), transparent); opacity: 0; }
.ix-card.materialise .ix-scan { animation: ixScan 1.4s cubic-bezier(.4,0,.2,1) .45s 1 both; }
@keyframes ixScan { 0% { top: -140px; opacity: 1; } 100% { top: 110%; opacity: 0; } }
.ix-card .hl { opacity: 0; transform: translateY(14px); }
.ix-card.materialise .hl { animation: ixIn .55s cubic-bezier(.2,.9,.2,1) both; animation-delay: calc(var(--k, 0) * 45ms + 520ms); }
@keyframes ixIn { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

.ix-top { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 16px clamp(20px, 3.4vw, 36px);
  background: rgba(12,8,28,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid rgba(0,240,200,.18);
  font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ix-top .id { color: var(--cyan); }
.ix-pill { padding: 6px 10px; border-radius: 999px; border: 1px solid currentColor; }
.ix-pill.ok { color: var(--cyan); } .ix-pill.wait { color: var(--amber); }
.ix-close { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent;
  color: #fff; font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.ix-close:hover, .ix-close:focus-visible { border-color: var(--pink); outline: none; }
.ix-in { padding: clamp(22px, 3.4vw, 36px); }
.ix-co { margin: 0 0 8px; font: 600 12.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--c1); }
.ix-title { margin: 0; font-size: clamp(26px, 3.6vw, 40px); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; color: #fff; }
.ix-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 24px 0 0; background: #241b3d; border-radius: 14px; overflow: hidden; border: 1px solid #241b3d; }
.ix-facts div { background: #0c081b; padding: 13px 15px; }
.ix-facts dt { font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--c2); margin-bottom: 8px; }
.ix-facts dd { margin: 0; color: #fff; font-weight: 600; font-size: 14.5px; line-height: 1.35; }
.ix-claim { margin: 24px 0 0; padding: 18px 20px; border-radius: 14px; border-left: 3px solid var(--pink); background: rgba(255,95,158,.07); }
.ix-claim p { margin: 0; }
.ix-claim .lbl { font: 500 10px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--pink); margin-bottom: 10px; }
.ix-claim .q { color: #fff; font-size: clamp(16px, 1.7vw, 19px); line-height: 1.5; font-weight: 600; letter-spacing: -.01em; }
.ix-note { margin: 18px 0 0; font-size: 15px; line-height: 1.6; font-weight: 300; }
.ix-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.ix-go { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: 999px; text-decoration: none; cursor: pointer; border: 0;
  background: var(--pink); color: #07030f; font: 700 15px/1 'Poppins', sans-serif; transition: transform .25s, box-shadow .25s; }
.ix-go:hover, .ix-go:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(255,95,158,.45); outline: none; color: #07030f; }
.ix-go.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; cursor: default; }
.ix-go.ghost:hover { transform: none; box-shadow: none; color: var(--muted); }
.ix-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; margin-top: 24px; font: 500 11px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #6f6590; }
.ix-nav { display: flex; gap: 10px; }
.ix-nav button { height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--lavender); font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.ix-nav button:hover, .ix-nav button:focus-visible { border-color: var(--cyan); color: #fff; outline: none; }
/* module card */
.ix-mod-hero { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; }
.ix-mod-icon { width: clamp(64px, 9vw, 92px); height: clamp(64px, 9vw, 92px); border-radius: 20px; display: grid; place-items: center; background: #07030f; border: 1px solid #2a2145; }
.ix-mod-icon svg { width: 72%; height: 72%; }
.ix-desc { margin: 22px 0 0; font-size: clamp(16px, 1.7vw, 19px); line-height: 1.6; color: #ece8f5; font-weight: 300; }
.ix-boot { margin-top: 22px; }
.ix-boot .row { display: flex; justify-content: space-between; font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.ix-boot .ix-bar { height: 8px; border-radius: 999px; background: #1a1430; overflow: hidden; }
.ix-boot .ix-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); transition: width 1.6s cubic-bezier(.2,.8,.2,1) .7s; }
.ix-boot.wait .ix-bar i { background: repeating-linear-gradient(-45deg, var(--amber) 0 8px, #c9952f 8px 16px); background-size: 200% 100%; box-shadow: 0 0 14px rgba(255,200,87,.5); animation: ixStripes 1s linear infinite; }
.ix-card.materialise .ix-boot .ix-bar i { width: var(--w); }
@keyframes ixStripes { to { background-position: -32px 0; } }
@media (max-width: 560px) { .ix-facts { grid-template-columns: 1fr; } .ix-mod-hero { grid-template-columns: 1fr; } .ix-top .kind { display: none; } }
html.ix-open { overflow: hidden; }

/* ---------- 3. the module rail ----------
   a glass tab on the left edge (breathing glow, LED status lights) that slides out into a tall panel
   holding the three original module cards, with their pointer tilt, light and boot sequence (site.js) */
.mrail { overflow: hidden;   /* full-screen, see-through layer: clips the stub to the screen, lets every other tap through */
  --tuck: 0px; --rt: 80px; --rb: 16px; --stubw: 60px; --notch: 10px; --ticket: #ece8f5; position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 42; pointer-events: none; }
/* where content runs close to the edge, the stub rests tucked in (a pale sliver shows) and slides fully out when it peeks */
@media (max-width: 1279px) { .mrail { --tuck: -38px; } }
@media (max-width: 700px) { .mrail { --tuck: -30px; --rt: 72px; --rb: 12px; --stubw: 46px; --notch: 8px; } }
html.ix-open .mrail, html.holo-open .mrail { visibility: hidden; }
html.menu-open .mrail { z-index: 69; }   /* above the menu (65) and the logo bar (68), below the menu button (70) */
html.menu-open .menu-inner { padding-left: max(24px, calc(86px - (100vw - 1180px) / 2)); }   /* keeps the menu text clear of the tab */
@media (max-width: 700px) { html.menu-open .menu-inner { padding-left: 60px; } }
/* the folded tab: a boarding-pass stub (chosen 15 Oct). pale ticket, perforated edge, two notches cut out of it,
   IJ/OS, LED status lights, "now boarding", modules 01–03, a barcode; it peeks out every few seconds */
.mrail-tab { pointer-events: auto; position: absolute; z-index: 2; left: 0; top: var(--rt); bottom: var(--rb);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 14px;
  width: var(--stubw); padding: 22px 0 18px; box-sizing: border-box; margin: 0;
  border: 0; border-right: 2px dashed rgba(7,3,15,.75); border-radius: 0 12px 12px 0; background: var(--ticket); color: #07030f; font: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* the notches are real holes: the page shows through them */
  -webkit-mask-image: radial-gradient(circle var(--notch) at 100% 23%, transparent 96%, #000 100%), radial-gradient(circle var(--notch) at 100% 77%, transparent 96%, #000 100%);
          mask-image: radial-gradient(circle var(--notch) at 100% 23%, transparent 96%, #000 100%), radial-gradient(circle var(--notch) at 100% 77%, transparent 96%, #000 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  filter: drop-shadow(0 0 14px rgba(255,95,158,.4));
  opacity: 0; transform: translateX(-110%);
  transition: opacity .7s, transform .9s cubic-bezier(.2,.9,.2,1), background .3s; }
html.mrail-on .mrail-tab { opacity: 1; transform: translateX(var(--tuck)); animation: stubPeek 7s ease-in-out 2s infinite; }
html[data-heat="2"].mrail-on .mrail-tab { animation-duration: 5s; }
html[data-heat="3"].mrail-on .mrail-tab { animation-duration: 3.5s; }
@keyframes stubPeek { 0%, 78%, 100% { transform: translateX(var(--tuck)); } 84%, 88% { transform: translateX(6px); } 94% { transform: translateX(var(--tuck)); } }
.mrail:not(.open) .mrail-tab:hover, .mrail:not(.open) .mrail-tab:focus-visible { animation: none; transform: translateX(8px); background: #ffffff; outline: none; }
.mrail-tab:focus-visible { filter: drop-shadow(0 0 3px #00f0c8) drop-shadow(0 0 14px rgba(0,240,200,.6)); }
/* open: the stub stays put, squares its corners and becomes the left end of the ticket; its dashed edge is the tear line */
.mrail.open .mrail-tab { animation: none !important; transform: none !important; border-radius: 0; filter: none; transition: opacity .7s, background .3s; }
.mrail.open .mrail-chev { transform: rotate(180deg); }
.mrail-chev { transition: transform .5s cubic-bezier(.2,.9,.2,1); }
.stub-os { font: 500 11px/1 var(--mono); letter-spacing: .12em; color: #6b2bd9; }
.mrail-leds { display: flex; gap: 5px; }
.mrail-leds i { display: block; width: 8px; height: 8px; border-radius: 2px; background: #00b896; }
.mrail-leds i.wait { background: #e0a12e; animation: mrailBlink 2.2s steps(2) infinite; }
.mrail-leds i.b { animation-delay: -.7s; }
html[data-heat="3"] .mrail-leds i.wait { animation-duration: 1.1s; }
@keyframes mrailBlink { 50% { opacity: .3; } }
.stub-board { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 17px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; color: #07030f; }
.mrail-lbl { writing-mode: vertical-rl; transform: rotate(180deg); font: 500 11px/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: #c2185b; white-space: nowrap; }
.stub-dest { writing-mode: vertical-rl; transform: rotate(180deg); font: 500 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: #6b6585; white-space: nowrap; }
.stub-dest b { font-weight: 500; color: #07030f; }
.stub-code { display: flex; flex-direction: column; gap: 2px; width: 30px; }
.stub-code i { display: block; background: #07030f; }
.mrail-chev { color: #07030f; }
.mrail-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.mrail-panel { pointer-events: auto; position: absolute; z-index: 1; left: var(--stubw); top: var(--rt); bottom: var(--rb); width: min(700px, calc(96vw - var(--stubw)));
  box-sizing: border-box; display: flex; flex-direction: column; padding: 22px 26px 18px 28px; border-radius: 0 18px 18px 0;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c9c0dd transparent;
  background: var(--ticket); color: #07030f;
  /* the matching half of the two punched holes on the tear line */
  -webkit-mask-image: radial-gradient(circle var(--notch) at 0 23%, transparent 96%, #000 100%), radial-gradient(circle var(--notch) at 0 77%, transparent 96%, #000 100%);
          mask-image: radial-gradient(circle var(--notch) at 0 23%, transparent 96%, #000 100%), radial-gradient(circle var(--notch) at 0 77%, transparent 96%, #000 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  clip-path: inset(0 100% 0 0 round 0 18px 18px 0); visibility: hidden;
  transition: clip-path .75s cubic-bezier(.7,0,.2,1), visibility 0s .75s; }
.mrail.open .mrail-panel { clip-path: inset(0 0 0 0 round 0 18px 18px 0); visibility: visible; transition: clip-path .75s cubic-bezier(.7,0,.2,1), visibility 0s; }
.mrail-scan { position: absolute; inset: 0; pointer-events: none; z-index: 3; opacity: 0;
  background: linear-gradient(transparent, rgba(0,240,200,.14), transparent) no-repeat; background-size: 100% 140px; background-position: 0 -140px; }
.mrail.open .mrail-scan { animation: mrailScan 1.2s cubic-bezier(.4,0,.2,1) .25s 1 both; }
@keyframes mrailScan { 0% { opacity: 1; background-position: 0 -140px; } 100% { opacity: 0; background-position: 0 calc(100% + 140px); } }   /* sweeps without changing the panel's size */
.mrail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.mrail-eyebrow { margin: 0 0 10px; display: flex; align-items: center; gap: 10px; font: 500 11px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #6b2bd9; }
.mrail-eyebrow .dot { width: 8px; height: 8px; border-radius: 2px; background: #00b896; flex: none; }
.mrail-h { margin: 0; font-size: clamp(24px, 2.4vw, 30px); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; color: #07030f; }
.mrail-h em { font-style: normal; color: #c2185b; }
.mrail-close { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(7,3,15,.22); background: transparent; color: #07030f; cursor: pointer; }
.mrail-close:hover, .mrail-close:focus-visible { border-color: #c2185b; color: #c2185b; outline: none; }
.mrail-head, .mrail-foot { opacity: 0; transform: translateX(-14px); filter: blur(4px); transition: opacity .45s, transform .5s cubic-bezier(.2,.9,.2,1), filter .45s; }
.mrail.open .mrail-head { opacity: 1; transform: none; filter: none; transition-delay: .2s; }
.mrail.open .mrail-foot { opacity: 1; transform: none; filter: none; transition-delay: .65s; }

/* the original module cards, laid out for a tall panel (same structure as the old dock) */
.mrail .mod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; perspective: 1200px; }
.mrail .mod[data-i="0"] { grid-column: 1 / -1; }   /* the live module leads, full width */
.mrail .mod { min-height: 0; background: linear-gradient(165deg, #2a1650, #0c081b 60%); border-color: #0c081b; padding: 15px 18px; border-radius: 18px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr auto; column-gap: 16px; align-content: start;
  opacity: 0; translate: -24px 0; transition: opacity .55s, translate .7s cubic-bezier(.2,.9,.2,1), border-color .4s, box-shadow .4s; }
.mrail.open .mod { opacity: 1; translate: 0 0; }
.mrail.open .mod[data-i="0"] { transition-delay: .28s, .28s, 0s, 0s; }
.mrail.open .mod[data-i="1"] { transition-delay: .4s, .4s, 0s, 0s; }
.mrail.open .mod[data-i="2"] { transition-delay: .52s, .52s, 0s, 0s; }
.mrail .mod .top { grid-column: 1 / -1; margin-bottom: 10px; }
.mrail .mod .icon { grid-row: 2 / 4; margin: 2px 0 0; width: 54px; height: 54px; }
.mrail .mod h3 { grid-column: 2; margin: 0 0 6px; font-size: clamp(21px, 1.9vw, 25px); align-self: center; }
.mrail .mod p { grid-column: 2; align-self: start; font-size: 14px; line-height: 1.45; max-height: 2.9em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mrail .mod .foot { grid-column: 1 / -1; padding-top: 10px; margin-top: 0; align-self: end; }
.mrail .mod .boot { margin-bottom: 8px; }
.mrail .mod .cta { margin-top: 10px; font-size: 16px; }
.mrail .mod .cta .arrow { width: 38px; height: 38px; }
.mrail .mod.activating .cta { font-size: 11px; height: 38px; }
.mrail-foot { margin: auto 0 0; padding-top: 18px; border-top: 2px dashed rgba(7,3,15,.22); display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; }
.mrail .mod-grid { margin-bottom: 22px; }
.mrail-foot p { margin: 0; font: 500 11px/1.7 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #6b6585; }
.mrail-foot p span { color: #c2185b; }
.ticket-code { display: flex; align-items: stretch; gap: 2px; height: 40px; flex: none; }
.ticket-code i { display: block; background: #07030f; }

.mrail-nudge { position: absolute; left: calc(74px + var(--tuck)); top: 50%; translate: 0 -50%; white-space: nowrap; padding: 10px 15px; border-radius: 999px; background: #fff; color: #07030f;
  font: 600 13.5px/1 'Poppins', sans-serif; pointer-events: none; opacity: 0; transform: translateX(-8px); transition: opacity .5s, transform .5s cubic-bezier(.2,.9,.2,1); }
.mrail-nudge::before { content: ""; position: absolute; left: -5px; top: 50%; width: 10px; height: 10px; background: #fff; transform: translateY(-50%) rotate(45deg); border-radius: 2px; }
.mrail.nudge .mrail-nudge { opacity: 1; transform: none; }
.mrail.open .mrail-nudge { opacity: 0; }
@media (max-width: 700px) {
  .mrail .mod-grid { grid-template-columns: 1fr; }
  .ticket-code { display: none; }
  .mrail-tab { gap: 10px; padding: 14px 0 12px; }
  .mrail-leds i { width: 6px; height: 6px; }
  .stub-board { font-size: 14px; }
  .mrail-lbl { font-size: 9.5px; letter-spacing: .2em; }
  .stub-os { font-size: 9.5px; }
  .stub-code { width: 22px; }
  .mrail-panel { padding: 18px 14px 14px 18px; }
  .mrail .mod .icon { width: 44px; height: 44px; }
  .mrail-nudge { left: calc(58px + var(--tuck)); font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .ref-star svg { animation: none; }
  .mrail-tab, .mrail-panel, .mrail .mod, .mrail-head, .mrail-foot { transition: none !important; } .mrail-tab, html.mrail-on .mrail-tab, .mrail-chev { animation: none !important; }
}

/* ---------- 4. phones (≤700px): the stub lives in the bottom-left corner (16 Oct), refined 17 Oct ----------
   a proper ticket stub: wider (64px), tilted a gentle 12°, showing its full face (IJ/OS, status lights, barcode,
   "now boarding", the perforated edge and a punched notch). it never moves on its own: no peeking, no hover state
   (phones keep hover stuck after a tap), and the one-time nudge is just the bubble. one tap swings it upright onto
   the left edge and the rest of the ticket unrolls; a tap on the stub, outside, or × rolls it back. */
@media (max-width: 700px) {
  html { background: #07030f; }   /* any area Safari shows around the page is the page's own colour */
  .mrail { --stubh: 186px; --rest: 186px; --tilt: 12deg; --stubw: 64px; --restw: 128px; }
  .mrail-tab { top: calc(100% - var(--stubh)); bottom: 0; transform-origin: 0 100%; width: var(--stubw);
    justify-content: flex-start; gap: 12px; padding: 16px 0 12px; border-radius: 12px 12px 0 0;
    transform: rotate(var(--tilt)) translateY(calc(var(--stubh) - var(--rest) + 24px));
    /* going back to the corner waits for the ticket to roll back up first */
    transition: opacity .7s, top .6s cubic-bezier(.2,.9,.2,1) .55s, bottom .6s cubic-bezier(.2,.9,.2,1) .55s, width .5s cubic-bezier(.2,.9,.2,1) .55s,
      transform .6s cubic-bezier(.2,.9,.2,1) .55s, border-radius .3s .55s, background .3s; }
  /* at rest: twice as wide, read across like a real ticket stub */
  .mrail:not(.open) .mrail-tab { width: var(--restw); align-items: flex-start; text-align: left; gap: 7px; padding: 14px 18px 12px 14px; }
  .mrail:not(.open) .mrail-chev { display: none; }
  .mrail:not(.open) .stub-os { order: 1; font-size: 10px; letter-spacing: .14em; }
  .mrail:not(.open) .stub-os { white-space: nowrap; }
  .mrail:not(.open) .stub-os::after { content: ' · pass'; color: #6b6585; }
  .mrail:not(.open) .mrail-leds { order: 2; margin: 2px 0; }
  .mrail:not(.open) .stub-board { order: 3; writing-mode: horizontal-tb; transform: none; white-space: normal; width: 6ch; font-size: 19px; line-height: .98; letter-spacing: -.035em; }   /* now / boarding */
  .mrail:not(.open) .mrail-lbl { order: 4; writing-mode: horizontal-tb; transform: none; white-space: nowrap; font-size: 9px; letter-spacing: .12em; }
  .mrail:not(.open) .stub-dest { order: 5; writing-mode: horizontal-tb; transform: none; white-space: nowrap; font-size: 9px; }
  .mrail:not(.open) .stub-code { order: 6; width: 30px; transform: rotate(90deg); transform-origin: 15px 15px; margin: 2px 0 0; }   /* bars stand upright, like a printed barcode */
  .mrail-leds i { width: 7px; height: 7px; }
  /* still: no peek animation, no hover/focus shift */
  html.mrail-on .mrail-tab, .mrail.nudge:not(.open) .mrail-tab,
  .mrail:not(.open) .mrail-tab:hover, .mrail:not(.open) .mrail-tab:focus-visible { animation: none; transform: rotate(var(--tilt)) translateY(calc(var(--stubh) - var(--rest))); background: var(--ticket); }
  /* a tap gives a small press, so it feels like paper under the finger */
  .mrail:not(.open) .mrail-tab:active { transform: rotate(var(--tilt)) translateY(calc(var(--stubh) - var(--rest) + 3px)); transition-delay: 0s; transition-duration: .12s; }
  /* open: it swings upright into the left edge, full height, then the ticket unrolls */
  .mrail.open .mrail-tab { top: var(--rt); bottom: var(--rb); justify-content: space-between; border-radius: 0; gap: 10px;
    transition: opacity .7s, top .55s cubic-bezier(.2,.9,.2,1), bottom .55s cubic-bezier(.2,.9,.2,1),
      transform .55s cubic-bezier(.2,.9,.2,1), border-radius .2s, background .3s; }
  .mrail.open .mrail-panel { transition: clip-path .75s cubic-bezier(.7,0,.2,1) .45s, visibility 0s; }
  .mrail.open .mrail-scan { animation-delay: .7s; }
  .mrail.open .mrail-head { transition-delay: .65s; }
  .mrail.open .mrail-foot { transition-delay: 1.1s; }
  .mrail.open .mod[data-i="0"] { transition-delay: .73s, .73s, 0s, 0s; }
  .mrail.open .mod[data-i="1"] { transition-delay: .85s, .85s, 0s, 0s; }
  .mrail.open .mod[data-i="2"] { transition-delay: .97s, .97s, 0s, 0s; }
  /* the one-time nudge: just the bubble, beside the stub's head (the stub stays put) */
  .mrail-nudge { top: auto; bottom: 168px; left: 150px; translate: none; }
  /* the menu no longer needs to clear the left edge, only the corner */
  html.menu-open .menu-inner { padding-left: 24px; padding-bottom: 200px; }
}