/* 06b · #armada (scene terang, ditambahkan 21 Okt 2026). Semua pemilih diawali #armada atau .am__ ; warna hanya dari token base.css.
   Komposisi stack: narasi di atas, panel selebar layar. Ukuran tangkapan dihitung dari tinggi panel (container query units),
   sehingga s0 (angka + Ringkasan) dan s1 (kartu → laporan) muat di 1366×768 sampai 1920×1080 tanpa JS.
   Garis tunjuk di atas latar terang memakai --c-accent (#b45309, ≥ 3:1 terhadap kertas dan terhadap tangkapan gelap);
   kotak sorot di dalam tangkapan gelap memakai --accent terang. */

#armada {
  --am-l: calc(var(--u) * 2.9);      /* baris label data di bawah visual */
  --am-t: calc(var(--u) * 3.4);      /* ruang chip di atas laporan Per kapal */
  --am-sela: calc(var(--u) * 6);     /* jarak minimum kartu → laporan (tempat garis) */
}
#armada .am__panel { align-items: stretch; }
#armada .am__panggung { width: 100%; height: 100%; container-type: size; display: flex; flex-direction: column; }
#armada .am__bidang { flex: none; height: calc(100cqh - var(--am-l)); grid-template: 100% / 100%; }
#armada .am__bidang > * { min-height: 0; min-width: 0; }
#armada .am__kaki { flex: none; height: var(--am-l); margin: 0; display: flex; align-items: flex-end; }
#armada .bingkai-tangkapan img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── s0: dua angka di kiri, Ringkasan Armada Produksi di kanan ── */
#armada .am__s0 { height: 100%; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 2.4); }
#armada .am__angka { flex: none; width: calc(var(--u) * 13.5); list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 2.2); }
#armada .am__angka li { display: flex; flex-direction: column; gap: calc(var(--u) * .55); padding-top: calc(var(--u) * 1); border-top: 1px solid var(--c-line-2); }
#armada .am__ket { font-size: var(--fs-label); font-weight: 600; line-height: 1.25; color: var(--c-fg-2); }
#armada .am__n { white-space: nowrap; }
#armada .am__ringkas { flex: none; aspect-ratio: 3200 / 1544; width: min(calc(100cqw - var(--u) * 15.9), calc((100cqh - var(--am-l)) * 3200 / 1544)); }

/* ── s1: kartu kapal (kiri bawah) → garis → laporan Per kapal (kanan atas) + chip ── */
#armada .am__s1 { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--am-sela); }
#armada .am__kartu { flex: none; aspect-ratio: 488 / 889; width: calc((100cqh - var(--am-l)) * .9 * 488 / 889); }
#armada .am__lapor-wadah {
  flex: none; position: relative; align-self: flex-start; padding-top: var(--am-t);
  width: min(calc((100cqh - var(--am-l) - var(--am-t)) * 2712 / 1552), calc(100cqw - (100cqh - var(--am-l)) * .9 * 488 / 889 - var(--am-sela)));
}
#armada .am__lapor { aspect-ratio: 2712 / 1552; }
/* Chip rata kiri dengan tooltip PA di dalam tangkapan (pecahan x 0,4395) */
#armada .am__chip { position: absolute; top: 0; left: 43.95%; margin: 0; color: var(--c-fg); }

/* Kotak sorot di dalam tangkapan (pecahan dari DOM saat tangkapan) */
#armada .am__sorot { position: absolute; z-index: 2; pointer-events: none; border: 2px solid var(--accent); border-radius: 6px; }
#armada .am__sorot--tautan { left: 10.5%; top: 85.4%; width: 81%; height: 9%; }
#armada .am__sorot--tip { left: 43.2%; top: 21.1%; width: 26.4%; height: 8%; }

/* Garis (SVG dibangun JS dari posisi elemen): kartu → laporan, chip → tooltip */
#armada .am__garis { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
#armada .am__jalur, #armada .am__tunjuk { fill: none; stroke: var(--c-accent); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
#armada .am__jalur { stroke-width: 2; transition: stroke-dashoffset .5s var(--ease); }
#armada .am__tunjuk { stroke-width: 1.5; transition: stroke-dashoffset .3s var(--ease); }
#armada .am__ujung { fill: var(--c-accent); opacity: 0; transition: opacity .2s var(--ease); }

/* Urutan masuk s1: kartu → garis → laporan → sorot + chip (selesai ±1,5 dtk) */
#armada .am__kartu { opacity: 0; transform: translateX(calc(var(--u) * -2)); transition: opacity .45s var(--ease), transform .55s var(--ease); }
#armada .am__lapor { opacity: 0; transform: scale(.97); transform-origin: left center; transition: opacity .45s var(--ease), transform .55s var(--ease); }
#armada .am__sorot { opacity: 0; transition: opacity .3s var(--ease); }
#armada .am__chip { opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
#armada[data-state="1"] .am__kartu { opacity: 1; transform: none; transition-delay: .15s; }
#armada[data-state="1"] .am__sorot--tautan { opacity: 1; transition-delay: .4s; }
#armada[data-state="1"] .am__jalur { stroke-dashoffset: 0; transition-delay: .45s; }
#armada[data-state="1"] .am__ujung { opacity: 1; transition-delay: .9s; }
#armada[data-state="1"] .am__lapor { opacity: 1; transform: none; transition-delay: .75s; }
#armada[data-state="1"] .am__sorot--tip { opacity: 1; transition-delay: 1.1s; }
#armada[data-state="1"] .am__tunjuk { stroke-dashoffset: 0; transition-delay: 1.1s; }
#armada[data-state="1"] .am__chip { opacity: 1; transform: none; transition-delay: 1.2s; }

/* ── Mode statis: s0 lalu s1 berurutan, ukuran dari lebar (tanpa container query), semua tampil ── */
.is-static #armada .am__panel { height: auto; }
.is-static #armada .am__panggung { container-type: normal; height: auto; }
.is-static #armada .am__bidang { height: auto; display: flex; flex-direction: column; gap: calc(var(--u) * 3); }
.is-static #armada .am__s0, .is-static #armada .am__s1 { height: auto; }
.is-static #armada .am__ringkas { width: calc(100% - var(--u) * 15.9); }
.is-static #armada .am__kartu { width: 21%; }
.is-static #armada .am__lapor-wadah { width: 70%; }
.is-static #armada .am__kaki { height: auto; margin-top: calc(var(--u) * 1.2); }
.is-static #armada .am__kartu, .is-static #armada .am__lapor, .is-static #armada .am__sorot, .is-static #armada .am__chip { opacity: 1; transform: none; }
.is-static #armada .am__jalur, .is-static #armada .am__tunjuk { stroke-dashoffset: 0; }
.is-static #armada .am__ujung { opacity: 1; }

/* Layar sempit (mode baca): angka sebaris di atas tangkapan; kartu dan laporan bertumpuk, garis disembunyikan */
@media (max-width: 860px) {
  #armada .am__s0 { flex-direction: column; align-items: stretch; }
  #armada .am__angka { width: auto; flex-direction: row; gap: 24px; }
  #armada .am__angka li { flex: 1 1 0; }
  .is-static #armada .am__ringkas { width: 100%; }
  #armada .am__s1 { flex-direction: column; align-items: stretch; gap: 16px; }
  .is-static #armada .am__kartu { width: min(70%, 260px); }
  .is-static #armada .am__lapor-wadah { width: 100%; padding-top: 0; display: flex; flex-direction: column; gap: 8px; }
  #armada .am__chip { position: static; align-self: flex-start; white-space: normal; }
  #armada .am__garis { display: none; }
}