/* 12 · #ais-live (milik S2, scene terang). Semua pemilih diawali #ais-live atau .al__ */

#ais-live .swap > * { align-self: start; }

/* Narasi s0: 163 kapal, lalu tiga chip kemampuan integrasi (netral, tanpa titik dekoratif) */
#ais-live .al__angka { margin: calc(var(--u) * .3) 0 calc(var(--u) * .8); display: flex; align-items: baseline; white-space: nowrap; }
#ais-live .al__n { font-size: calc(var(--fs-angka) * .85); }
#ais-live .al__mampu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: 36em; }
#ais-live .al__mampu .chip { color: var(--c-fg); font-size: var(--fs-label); padding: .38em .8em; opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
#ais-live[data-state="0"] .al__mampu .chip, .is-static #ais-live .al__mampu .chip { opacity: 1; transform: none; }
#ais-live[data-state="0"] .al__mampu .chip:nth-child(1) { transition-delay: 1.4s; }
#ais-live[data-state="0"] .al__mampu .chip:nth-child(2) { transition-delay: 1.6s; }
#ais-live[data-state="0"] .al__mampu .chip:nth-child(3) { transition-delay: 1.8s; }

/* Panel: s0 dan s1 ditumpuk (.swap); berurutan di ?static */
#ais-live .al__bidang { width: 100%; align-items: center; justify-items: center; }
#ais-live .al__bidang > * { align-self: center; }

/* s0: tangkapan Live, kotak sumber 0,0 → 2680,1597 dari 3200×2000: kartu kanan dan panel status bawah tidak ikut;
   header dashboard dan baris atribusi lisensi di kiri bawah peta tetap terlihat */
#ais-live .al__live { position: relative; margin: 0; width: min(100%, calc((100vh - var(--pad-atas) - var(--pad-bawah) - 6.5em) * 2680 / 1597)); }
#ais-live .al__bingkai { aspect-ratio: 2680 / 1597; }
#ais-live .al__bingkai img { position: absolute; left: 0; top: 0; width: 119.403%; max-width: none; height: auto; }
/* Sisa huruf "Sumber" di ujung kanan header tangkapan ditutup warna header */
#ais-live .al__tutup { position: absolute; right: 0; top: 0; width: .8%; height: 5.76%; background: var(--bg-secondary); }
#ais-live .al__chip-live {
  position: absolute; z-index: 2; left: calc(var(--u) * 1); top: 0; transform: translateY(-55%);
  background: var(--c-card); box-shadow: 0 6px 16px -8px rgba(31, 35, 40, .5);
}
#ais-live .al__chip-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--info); box-shadow: 0 0 0 0 rgba(56, 189, 248, .6); }
#ais-live[data-state="0"] .al__chip-live { animation: al-masuk .7s var(--ease) .2s both; }
#ais-live[data-state="0"] .al__chip-live i { animation: al-denyut 2.4s ease-out 1s infinite; }
@keyframes al-masuk { 0% { opacity: 0; transform: translateY(-55%) scale(.85); } 100% { opacity: 1; transform: translateY(-55%) scale(1); } }
@keyframes al-denyut { 0% { box-shadow: 0 0 0 0 rgba(56, 189, 248, .6); } 70%, 100% { box-shadow: 0 0 0 8px rgba(56, 189, 248, 0); } }
#ais-live .al__live figcaption { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: calc(var(--u) * .7); }
#ais-live .al__keterangan { margin: 0; color: var(--c-fg-2); font-weight: 600; }
/* Baris fungsi (bukan peringatan): chip netral berbingkai info, boleh dua baris, tanpa titik */
#ais-live .al__fungsi {
  margin: 4px 0 0; display: inline-flex; align-items: center; gap: .55em; max-width: 100%;
  font-size: var(--fs-label); font-weight: 600; line-height: 1.3; color: var(--c-fg);
  padding: .32em .75em; border-radius: 8px; background: var(--c-card);
  border: 1px solid color-mix(in srgb, var(--info) 45%, transparent);
}

/* s1: diagram usulan; empat sumber setara di kiri → Relay TIEI → Peta dan alert */
#ais-live .al__usulan { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 40%; gap: calc(var(--u) * 2); align-items: center; }
#ais-live .al__diagram {
  display: grid; grid-template-columns: auto auto; justify-content: start;
  grid-template-areas: "a rl" "b rl" "c rl" "d rl" ". hs";
  column-gap: calc(var(--u) * 2.6); row-gap: calc(var(--u) * .9);
  padding-bottom: calc(var(--u) * 3.4);
}
#ais-live .al__diagram .node { font-size: max(15px, calc(var(--u) * 1.05)); padding: calc(var(--u) * .7) calc(var(--u) * 1); z-index: 1; white-space: nowrap; }
#ais-live .al__n-terbuka { grid-area: a; }
#ais-live .al__n-pesisir { grid-area: b; }
#ais-live .al__n-kip { grid-area: c; }
#ais-live .al__n-satelit { grid-area: d; }
#ais-live .al__n-relay { grid-area: rl; align-self: center; justify-self: center; text-align: center; align-items: center; }
#ais-live .al__n-hasil { grid-area: hs; justify-self: center; text-align: center; align-items: center; margin-top: calc(var(--u) * 1.4); }
#ais-live .al__garis path.is-aktif { stroke: var(--c-accent-fill); stroke-width: 1.6; }
#ais-live .al__garis marker path { fill: var(--c-fg-2); stroke: none; }
#ais-live .al__label-usulan { position: absolute; left: 0; bottom: 0; }
#ais-live .al__foto { aspect-ratio: 4 / 5; box-shadow: var(--c-shadow); }

@media (max-width: 860px) {
  #ais-live .al__usulan { grid-template-columns: 1fr; }
}