/* ============================================================
   TRANSPORT — Z-Transport overview (from the Z-Transport deck)
   Live map · 7 modules · 3-layer architecture · onboard kit
   ============================================================ */
.zt-intro { max-inline-size: 50rem; margin: 0 0 var(--sp-4); font-size: var(--fs-lg); color: var(--text-muted); }
.zt-intro strong { color: var(--text); }
.zt-sub { display: flex; align-items: center; gap: .6rem; margin: var(--sp-5) 0 var(--sp-3); font-size: var(--fs-xl); }
.zt-sub::before { content: ""; inline-size: .6rem; block-size: .6rem; border-radius: 2px; background: var(--amber); transform: rotate(45deg); }

/* ---------- live map + modules ---------- */
.zt-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--sp-3); align-items: stretch; }
.zt-map { position: relative; border-radius: 22px; overflow: hidden; background: #0c1630; box-shadow: 0 30px 60px -30px rgba(14,26,51,.6); min-block-size: 25rem; }
.zt-map__bar { position: absolute; z-index: 2; inset-block-start: 0; inset-inline: 0; display: flex; align-items: center; gap: .4rem; padding: .6rem .9rem; background: rgba(8, 14, 30, .75); color: #8a96ad; font: 500 var(--fs-xs)/1 var(--font-mono); backdrop-filter: blur(6px); }
.zt-map__bar i { inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: #2e3a52; }
.zt-map__bar b { margin-inline-start: .5rem; color: #e9eef8; font-weight: 600; }
.zt-map__bar .live { margin-inline-start: auto; display: inline-flex; align-items: center; gap: .35rem; color: #2fd27a; }
.zt-map__bar .live::before { content: ""; inline-size: .45rem; block-size: .45rem; border-radius: 50%; background: #2fd27a; animation: zt-blink 1.2s steps(2) infinite; }
.zt-map svg { display: block; inline-size: 100%; block-size: 100%; }
.zt-map__stats { position: absolute; z-index: 2; inset-block-end: .8rem; inset-inline-start: .8rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.zt-map__stats span { padding: .4rem .7rem; border-radius: 10px; background: rgba(8, 14, 30, .78); border: 1px solid rgba(255,255,255,.1); color: #b9c3d6; font-size: var(--fs-xs); backdrop-filter: blur(6px); }
.zt-map__stats b { color: #fff; margin-inline-end: .25rem; }
.zt-map__alert { position: absolute; z-index: 2; inset-block-start: 3.2rem; inset-inline-end: .8rem; display: flex; align-items: center; gap: .5rem; padding: .5rem .8rem; border-radius: 12px; background: rgba(214, 69, 69, .92); color: #fff; font-size: var(--fs-xs); font-weight: 700; box-shadow: 0 10px 24px -10px rgba(0,0,0,.6); animation: zt-alert 9s ease-in-out infinite; }
.zt-map__alert::before { content: "!"; display: grid; place-items: center; inline-size: 1.2rem; block-size: 1.2rem; border-radius: 50%; background: #fff; color: #d64545; font-weight: 900; }
@keyframes zt-alert { 0%, 45% { opacity: 0; transform: translateY(-6px); } 50%, 80% { opacity: 1; transform: none; } 88%, 100% { opacity: 0; } }
@keyframes zt-blink { 50% { opacity: .3; } }
.zt-stop { animation: zt-pulse 2.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes zt-pulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(3); } }

.zt-mods { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.zt-mod { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; align-items: center; padding: .75rem .9rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; }
.zt-mod:hover { transform: translateX(4px); border-color: rgba(40,73,144,.35); box-shadow: var(--shadow-2); }
[dir="rtl"] .zt-mod:hover { transform: translateX(-4px); }
.zt-mod__ic { grid-row: span 2; display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 10px; background: var(--grad-navy); color: #fff; }
.zt-mod__ic svg { inline-size: 1.2rem; block-size: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.zt-mod b { font-size: var(--fs-sm); display: flex; align-items: baseline; gap: .45rem; }
.zt-mod b small { font: 700 .65rem/1 var(--font-mono); color: #b07a1f; }
.zt-mod span.t { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.45; }

/* ---------- architecture ---------- */
.zt-arch { position: relative; display: grid; gap: var(--sp-2); padding: var(--sp-3); border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.zt-layer { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--sp-2); align-items: center; }
.zt-layer__k { font: 700 var(--fs-xs)/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
[dir="rtl"] .zt-layer__k { font-family: var(--font-ar); letter-spacing: 0; }
.zt-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.zt-chip { padding: .5rem .85rem; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); font-size: var(--fs-sm); font-weight: 700; }
.zt-chip--int { background: #fff; border-color: #c9d3e8; }
.zt-chip--std { border-style: dashed; border-color: var(--amber); }
.zt-chip--std small { display: block; font: 700 .6rem/1.2 var(--font-mono); color: #b07a1f; letter-spacing: .08em; }
.zt-core { padding: .9rem 1rem; border-radius: 14px; background: var(--grad-navy); color: #fff; box-shadow: 0 14px 28px -14px rgba(40,73,144,.7); }
.zt-core > b { display: block; margin-block-end: .55rem; color: var(--amber); font-size: var(--fs-base); }
.zt-core .zt-chips span { padding: .35rem .7rem; border-radius: 8px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); font-size: var(--fs-xs); font-weight: 600; }
.zt-link { display: grid; grid-template-columns: 9rem 1fr; gap: var(--sp-2); }
.zt-link span { justify-self: center; inline-size: 2px; block-size: 1.2rem; background: repeating-linear-gradient(180deg, var(--amber) 0 4px, transparent 4px 8px); background-size: 2px 8px; animation: zt-flow .8s linear infinite; }
@keyframes zt-flow { to { background-position: 0 8px; } }

/* ---------- onboard equipment ---------- */
.zt-kit { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
.zt-kit li { display: flex; gap: .8rem; align-items: flex-start; padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2); border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); transition: transform .25s var(--ease), box-shadow .25s; }
.zt-kit li:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.zt-kit__ic { flex: none; display: grid; place-items: center; inline-size: 2.4rem; block-size: 2.4rem; border-radius: 10px; background: rgba(224,164,58,.14); color: #a8701a; }
.zt-kit__ic svg { inline-size: 1.2rem; block-size: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.zt-kit b { display: block; font-size: var(--fs-sm); }
.zt-kit span.t { display: block; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.45; margin-block-start: .15rem; }
.zt-more { margin-block-start: var(--sp-4); color: var(--text-muted); font-size: var(--fs-sm); }

@media (max-width: 1023px) { .zt-top { grid-template-columns: 1fr; } .zt-kit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .zt-layer, .zt-link { grid-template-columns: 1fr; }
  .zt-link span { justify-self: start; margin-inline-start: 1.5rem; }
  .zt-kit { grid-template-columns: 1fr; }
  .zt-map { min-block-size: 18rem; }
}
@media (prefers-reduced-motion: reduce) { .zt-map__alert, .zt-stop, .zt-link span, .zt-map__bar .live::before { animation: none; } .zt-map__alert { opacity: 1; } }