/* ============================================================================
   transit.css — China Adventure · TRAVEL / TRANSIT module
   "Open Lanes" — every inter-city leg + the open-jaw fly-in/out, every viable
   mode (rail / flight / boat / sleeper / maglev) side by side. Nothing
   prescribed — all lanes open, they pick.

   Lunarpunk / JRPG "warp lane" theme. Self-contained, CSP-safe, no CDN, no
   @import. Everything is scoped under `.cn-tr` and namespaced --tr-* so it
   never stomps the shell's :root. The shell may override any --tr-* to re-theme.
   ========================================================================== */

/* ---- theme tokens (low-specificity :where so the shell wins if it sets them) ---- */
:where(.cn-tr), :where(:root){
  --tr-abyss:#070512;   --tr-deep:#0b0819;   --tr-panel:#140d29;  --tr-panel-2:#1b1338;
  --tr-line:#2a2052;    --tr-line-2:#40306e;
  --tr-ink:#ece7ff;     --tr-dim:#a99fd6;    --tr-dim-2:#6f6598;
  --tr-mycel:#38e8d8;   --tr-moon:#cdb4ff;   --tr-spore:#8fe6c4;
  --tr-gold:#f2c14e;    --tr-gold-2:#c79a34; --tr-coral:#e0785a;  --tr-mint:#7fe6b4;
  --tr-violet:#b78cf0;  --tr-sky:#8fb8ff;
  /* mode accents */
  --tr-flight:#8fb8ff;  --tr-rail:#f2c14e;   --tr-sleeper:#b78cf0; --tr-boat:#38e8d8;
  --tr-maglev:#7fe6b4;
  /* cost ladder */
  --tr-c-low:#7fe6b4;   --tr-c-med:#f2c14e;  --tr-c-high:#e0785a;  --tr-c-leg:#b78cf0;
  --tr-ok:#7fe6b4;      --tr-warn:#f2c14e;   --tr-danger:#ff6b8a;  --tr-info:#8fb8ff;
  --tr-radius:15px;
  --tr-mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
  --tr-sans:ui-sans-serif,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

.cn-tr{ font-family:var(--tr-mono); color:var(--tr-ink); font-size:15px; line-height:1.55;
  padding:14px 13px 40px; max-width:940px; margin:0 auto; }
.cn-tr *{ box-sizing:border-box; }
.cn-tr .sans{ font-family:var(--tr-sans); }
@media (prefers-reduced-motion:reduce){ .cn-tr *{ animation:none !important; transition:none !important; } }

.cn-tr a{ color:var(--tr-mycel); text-underline-offset:3px; }
.cn-tr :focus-visible{ outline:2px solid var(--tr-mycel); outline-offset:2px; border-radius:6px; }
.cn-tr h3,.cn-tr h4{ margin:0; line-height:1.14; text-wrap:balance; }

/* ---- shared atoms ---- */
.tr-eyebrow{ font-size:.6rem; letter-spacing:.32em; text-transform:uppercase; color:var(--tr-mycel); }
.tr-muted{ color:var(--tr-dim); }
.tr-tabnum{ font-variant-numeric:tabular-nums; }

.tr-chip{
  display:inline-flex; align-items:center; gap:5px;
  font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
  padding:3px 8px; border-radius:999px; border:1px solid currentColor; white-space:nowrap;
}
.tr-tag{
  display:inline-flex; align-items:center; gap:4px; font-size:.62rem;
  color:var(--tr-dim); background:var(--tr-abyss); border:1px solid var(--tr-line);
  padding:2px 7px; border-radius:7px; letter-spacing:.02em; white-space:nowrap;
}

/* ============================ HERO ============================ */
.tr-hero{
  position:relative; overflow:hidden;
  border:1px solid var(--tr-line-2); border-radius:var(--tr-radius);
  background:
    radial-gradient(120% 140% at 12% -10%, rgba(56,232,216,.14), transparent 55%),
    radial-gradient(120% 140% at 92% 0%, rgba(183,140,240,.14), transparent 55%),
    linear-gradient(180deg,var(--tr-panel-2),var(--tr-deep));
  box-shadow:0 20px 46px -30px #000, inset 0 1px 0 rgba(255,255,255,.04);
  padding:16px 16px 15px; margin-bottom:14px;
}
.tr-hero::after{ /* faint route line */
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--tr-mycel),var(--tr-violet),transparent);
  opacity:.5;
}
.tr-hero h3{ font-size:1.35rem; letter-spacing:.01em; }
.tr-hero .tr-sub{ color:var(--tr-dim); font-size:.82rem; margin:.4em 0 0; max-width:64ch; }
.tr-hero-meta{ display:flex; flex-wrap:wrap; gap:7px; margin-top:11px; }
.tr-hero-meta .tr-chip.k{ color:var(--tr-moon); }
.tr-hero-meta .tr-chip.n{ color:var(--tr-mycel); }
.tr-hero-meta .tr-chip.j{ color:var(--tr-gold); }

/* progress readout */
.tr-progress{ display:flex; flex-wrap:wrap; gap:14px; margin-top:12px;
  font-size:.66rem; letter-spacing:.06em; color:var(--tr-dim-2); }
.tr-progress b{ color:var(--tr-ink); font-variant-numeric:tabular-nums; }
.tr-progress .lit{ color:var(--tr-mycel); }

/* ============================ ROUTE STRIP ============================ */
.tr-route{ display:flex; align-items:center; gap:0; overflow-x:auto; padding:4px 2px 12px;
  margin:0 -3px 6px; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.tr-route::-webkit-scrollbar{ height:5px; }
.tr-route::-webkit-scrollbar-thumb{ background:var(--tr-line-2); border-radius:9px; }
.tr-node{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:4px;
  cursor:pointer; background:none; border:0; font:inherit; color:var(--tr-dim); padding:2px 2px; }
.tr-node .dot{ width:13px; height:13px; border-radius:50%; background:var(--tr-panel-2);
  border:2px solid var(--tr-line-2); box-shadow:0 0 0 3px rgba(56,232,216,.04);
  transition:border-color .18s, box-shadow .18s, background .18s; }
.tr-node .lbl{ font-size:.56rem; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.tr-node .lbl b{ display:block; color:var(--tr-ink); font-size:.66rem; letter-spacing:.02em;
  text-transform:none; font-weight:700; }
.tr-node:hover .dot,.tr-node:focus-visible .dot{ border-color:var(--tr-mycel);
  box-shadow:0 0 0 3px rgba(56,232,216,.16); }
.tr-node.gate .dot{ border-radius:4px; border-color:var(--tr-sky); background:rgba(143,184,255,.12); }
.tr-seg{ flex:0 0 auto; width:22px; height:2px; align-self:flex-start; margin-top:9px;
  background:linear-gradient(90deg,var(--tr-line-2),var(--tr-line));
  border-radius:2px; }
@media (min-width:560px){ .tr-seg{ width:40px; } }

/* ============================ LEG GROUP ============================ */
.tr-leg{ margin:20px 0 0; scroll-margin-top:14px; }
.tr-leg-head{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
.tr-leg-no{ font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; color:var(--tr-dim-2);
  border:1px solid var(--tr-line); border-radius:7px; padding:3px 8px; white-space:nowrap; }
.tr-leg-title{ font-size:1.06rem; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tr-leg-title .arw{ color:var(--tr-mycel); }
.tr-leg-title .to{ color:var(--tr-ink); }
.tr-leg-sub{ font-size:.72rem; color:var(--tr-dim); margin:1px 0 0; }
.tr-leg-lanes{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.tr-leg-lanes .tr-chip{ font-weight:700; }
.tr-leg-lanes .lanes{ color:var(--tr-dim); }
.tr-leg-lanes .cheap{ color:var(--tr-c-low); }
.tr-leg-lanes .quick{ color:var(--tr-info); }

/* mode grid — minmax(0,1fr) so lane cards shrink to the viewport instead of
   ballooning to their max-content width (was causing horizontal page overflow
   on mobile: a bare `1fr` track floors at max-content). */
.tr-modes{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px; margin-top:11px; }
@media (min-width:720px){ .tr-modes{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.tr-modes.single{ grid-template-columns:minmax(0,1fr); }

/* ============================ MODE CARD ============================ */
.tr-mode{
  position:relative; display:flex; flex-direction:column; gap:9px;
  border:1px solid var(--tr-line-2); border-radius:var(--tr-radius);
  background:linear-gradient(180deg,var(--tr-panel),var(--tr-deep));
  box-shadow:0 16px 38px -30px #000, inset 0 1px 0 rgba(255,255,255,.03);
  padding:13px 13px 12px;
  --mc:var(--tr-rail);
  transition:border-color .18s, box-shadow .18s, transform .06s;
}
.tr-mode::before{ /* top accent seam in the mode colour */
  content:""; position:absolute; left:13px; right:13px; top:0; height:2px; border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--mc),transparent); opacity:.85;
}
.tr-mode.m-flight{ --mc:var(--tr-flight); }
.tr-mode.m-rail{ --mc:var(--tr-rail); }
.tr-mode.m-sleeper{ --mc:var(--tr-sleeper); }
.tr-mode.m-boat{ --mc:var(--tr-boat); }
.tr-mode.m-maglev{ --mc:var(--tr-maglev); }
.tr-mode.connector{ opacity:.92; border-style:dashed; }
.tr-mode.legendary{
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(183,140,240,.14), transparent 60%),
    linear-gradient(180deg,var(--tr-panel-2),var(--tr-deep));
  border-color:color-mix(in srgb,var(--tr-violet) 50%, var(--tr-line-2));
}
.tr-mode.picked{
  border-color:var(--tr-gold);
  box-shadow:0 0 0 1px var(--tr-gold) inset, 0 0 26px -8px var(--tr-gold), 0 16px 38px -30px #000;
}
.tr-mode.picked::after{
  content:"★ your lane"; position:absolute; top:-1px; right:12px; transform:translateY(-50%);
  font-size:.52rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  color:#1a130a; background:linear-gradient(180deg,#f8dc86,var(--tr-gold));
  padding:2px 8px; border-radius:999px; box-shadow:0 4px 10px -4px var(--tr-gold);
}

.tr-mc-head{ display:flex; align-items:flex-start; gap:9px; }
.tr-mc-ic{ flex:0 0 auto; width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  font-size:1.12rem; background:var(--tr-abyss);
  border:1px solid color-mix(in srgb,var(--mc) 55%, var(--tr-line)); box-shadow:0 0 14px -6px var(--mc); }
.tr-mc-ti{ min-width:0; flex:1; }
.tr-mc-ti h4{ font-size:.82rem; letter-spacing:.01em; color:color-mix(in srgb,var(--mc) 60%, var(--tr-ink)); }
.tr-mc-op{ font-size:.62rem; color:var(--tr-dim-2); margin-top:2px; line-height:1.35; }
.tr-mc-route{ font-size:.66rem; color:var(--tr-dim); margin-top:3px; display:flex; align-items:center; gap:5px; }
.tr-mc-route .arw{ color:var(--mc); }

/* fastest / cheapest markers */
.tr-mc-badges{ display:flex; gap:5px; flex-wrap:wrap; }
.tr-mc-badges .b{ font-size:.5rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  padding:2px 6px; border-radius:6px; border:1px solid currentColor; }
.tr-mc-badges .b.quick{ color:var(--tr-info); }
.tr-mc-badges .b.cheap{ color:var(--tr-c-low); }
.tr-mc-badges .b.leg{ color:var(--tr-violet); }

/* stat row */
.tr-stats{ display:flex; flex-wrap:wrap; gap:7px; }
.tr-stat{ display:inline-flex; align-items:center; gap:5px; font-size:.66rem;
  background:var(--tr-abyss); border:1px solid var(--tr-line); border-radius:8px; padding:4px 8px; }
.tr-stat .k{ color:var(--tr-dim-2); }
.tr-stat .v{ color:var(--tr-ink); font-variant-numeric:tabular-nums; }
.tr-stat.cost .v{ color:var(--cc,var(--tr-ink)); font-weight:700; }
.tr-stat.cost.t-low{ --cc:var(--tr-c-low); } .tr-stat.cost.t-med{ --cc:var(--tr-c-med); }
.tr-stat.cost.t-high{ --cc:var(--tr-c-high); } .tr-stat.cost.t-leg{ --cc:var(--tr-c-leg); }
/* stamina meter */
.tr-sta{ display:inline-flex; align-items:center; gap:6px; font-size:.66rem;
  background:var(--tr-abyss); border:1px solid var(--tr-line); border-radius:8px; padding:4px 8px; }
.tr-sta .pips{ display:inline-flex; gap:2px; }
.tr-sta .pip{ width:6px; height:11px; border-radius:2px; background:var(--tr-line-2); }
.tr-sta .pip.on{ background:linear-gradient(180deg,var(--tr-mint),var(--tr-warn)); }
.tr-sta .pip.hi.on{ background:linear-gradient(180deg,var(--tr-warn),var(--tr-danger)); }

.tr-vibe{ font-size:.78rem; line-height:1.5; color:var(--tr-ink);
  border-left:2px solid var(--mc); padding-left:9px; }

/* pros / cons */
.tr-pc{ display:grid; grid-template-columns:1fr; gap:5px 12px; }
@media (min-width:400px){ .tr-pc{ grid-template-columns:1fr 1fr; } }
.tr-pc ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px; }
.tr-pc li{ font-size:.66rem; line-height:1.35; color:var(--tr-dim); display:flex; gap:5px; }
.tr-pc .up li::before{ content:"▲"; color:var(--tr-ok); font-size:.6em; margin-top:.35em; }
.tr-pc .dn li::before{ content:"▽"; color:var(--tr-warn); font-size:.6em; margin-top:.35em; }

/* booking block */
.tr-book{ border-top:1px dashed var(--tr-line-2); padding-top:9px; display:flex; flex-direction:column; gap:6px; }
.tr-book-row{ display:flex; flex-wrap:wrap; gap:6px; align-items:flex-start; }
/* the booking-window (.by) + accessibility (.a11y) pills carry full sentences,
   not short status labels — let them wrap so they don't force horizontal page
   overflow on mobile (default .tr-chip/.tr-tag are white-space:nowrap). */
.tr-book-row .tr-chip, .tr-book-row .tr-tag{ white-space:normal; max-width:100%; }
.tr-book .by{ color:var(--tr-gold); }
.tr-book .seatres{ color:var(--tr-danger); }
.tr-book .res{ color:var(--tr-info); }
.tr-book .a11y{ color:var(--tr-spore); }
.tr-book .conf{ color:var(--tr-dim-2); }
.tr-note{ font-size:.68rem; color:var(--tr-dim); line-height:1.45; }
.tr-note .lock{ color:var(--tr-moon); }
.tr-src{ font-size:.6rem; color:var(--tr-dim-2); word-break:break-word; }

/* actions */
.tr-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:1px; }
.tr-btn{ cursor:pointer; font:inherit; font-size:.68rem; letter-spacing:.03em;
  color:var(--tr-ink); background:var(--tr-deep); border:1px solid var(--tr-line-2);
  border-radius:9px; padding:7px 11px; display:inline-flex; align-items:center; gap:6px;
  transition:border-color .15s, background .15s, color .15s, transform .06s; }
.tr-btn:hover{ border-color:var(--mc); }
.tr-btn:active{ transform:translateY(1px); }
.tr-btn.pick[aria-pressed="true"]{ color:#1a130a; border-color:var(--tr-gold);
  background:linear-gradient(180deg,#f8dc86,var(--tr-gold)); font-weight:700; }
.tr-btn.booked[aria-pressed="true"]{ color:var(--tr-ok); border-color:var(--tr-ok);
  background:rgba(127,230,180,.1); }
.tr-btn.open{ margin-left:auto; color:var(--tr-mycel); border-color:color-mix(in srgb,var(--tr-mycel) 45%, var(--tr-line-2)); }
.tr-btn.open:hover{ background:rgba(56,232,216,.08); }

/* footnote / empty */
.tr-foot{ margin-top:24px; font-size:.62rem; color:var(--tr-dim-2); line-height:1.55;
  border-top:1px solid var(--tr-line); padding-top:12px; }
.tr-foot b{ color:var(--tr-dim); }
.tr-empty{ border:1px dashed var(--tr-line-2); border-radius:var(--tr-radius);
  padding:22px 16px; text-align:center; color:var(--tr-dim); font-size:.8rem; }