/* style.css — satu-satunya CSS.
 *
 * GELAP ADALAH BAKU, dan `prefers-color-scheme` SENGAJA TIDAK DIIKUTI.
 * Alasannya sama dengan Kamar Mesin: layar ini dilihat di anjungan malam hari,
 * dan anjungan malam hari gelap. Terang tetap tersedia lewat tombol, disimpan
 * di localStorage `nautik:tema`.
 *
 * Warna sisi kapal bukan pilihan gaya: KIRI merah, KANAN hijau. Dipakai
 * konsisten di penunjuk kemudi, tombol aba-aba, dan peta.
 */

:root {
  color-scheme: dark;
  --latar: #0b1116;
  --panel: #141c24;
  --panel-2: #1b2530;
  --garis: #2a3845;
  --teks: #e6edf3;
  --teks-redup: #9fb0bf;
  --aksen: #4cc2a8;
  --kanan: #37c26b;
  --kiri: #e0524a;
  --waspada: #e8a33d;
  --sudut: 10px;
  --lebar-maks: 1180px;
}

:root[data-tema="terang"] {
  color-scheme: light;
  --latar: #eef2f5;
  --panel: #ffffff;
  --panel-2: #e6ecf1;
  --garis: #c3cfd9;
  --teks: #14202b;
  --teks-redup: #4a5d6d;
  --aksen: #0d7a66;
  --kanan: #14803f;
  --kiri: #b32a22;
  --waspada: #8a5a00;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--latar);
  color: var(--teks);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* ---- Kepala & menu --------------------------------------------------- */

/* Kepala dan pita latihan menempel BERSAMA sebagai satu tumpukan.
 *
 * Sebelumnya keduanya menempel sendiri-sendiri dan pita dipatok `top: 57px`,
 * yaitu tinggi kepala di layar lebar. Di lebar 390 kepalanya 109 px (menu
 * turun ke barisnya sendiri), jadi begitu digulir, pita menyelinap ke balik
 * kepala. Angka tinggi kepala yang ditulis tangan di CSS selalu salah di
 * salah satu lebar layar; tumpukan tidak perlu tahu tingginya sendiri. */
.atas {
  position: sticky;
  top: 0;
  z-index: 20;
}

.kepala {
  background: var(--panel);
  border-bottom: 1px solid var(--garis);
  padding: 8px 16px;
}

.kepala-baris {
  max-width: var(--lebar-maks);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.kepala-judul {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.04em;
  margin-right: auto;
}

.kepala-tanda {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px solid var(--garis);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--teks-redup);
  text-transform: uppercase;
  vertical-align: 2px;
}

.menu { display: flex; gap: 6px; flex-wrap: wrap; }

.menu-sempit { display: none; }

.pilih-menu { min-height: 40px; padding: 8px 10px; }

.menu-tombol {
  appearance: none;
  background: var(--panel-2);
  color: var(--teks);
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  padding: 8px 14px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  min-height: 40px;
}

.menu-tombol.is-aktif {
  background: var(--aksen);
  border-color: var(--aksen);
  color: var(--latar);
}

.tombol-tema {
  appearance: none;
  background: transparent;
  color: var(--teks-redup);
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  padding: 8px 10px;
  font: inherit;
  cursor: pointer;
  min-height: 40px;
  min-width: 40px;
}

@media (hover: hover) {
  /* Sorotan WAJIB di dalam kueri ini. Di Android sorotan hover menempel
   * sesudah ketukan, dan tanda tombol lenyap tepat waktu ditekan. */
  .menu-tombol:hover { border-color: var(--aksen); }
  .tombol-tema:hover { color: var(--teks); border-color: var(--aksen); }
  .aba:hover { border-color: var(--aksen); }
  .telegraf-butir:hover { background: var(--panel-2); }
}

/* ---- Susunan halaman -------------------------------------------------- */

.isi {
  max-width: var(--lebar-maks);
  margin: 0 auto;
  padding: 16px;
}

.bagian.is-tersembunyi { display: none; }

/* Papan instrumen memakai KOLOM, bukan grid.
 *
 * Grid dengan baris membuat tiap kartu seregang kartu tertinggi sebarisnya
 * (ruang kosong di dalam kartu), dan `align-items: start` menukarnya dengan
 * lubang besar di bawah baris (ruang kosong di antara kartu). Kolom memadat:
 * kartu turun mengisi ruang yang ada. Ongkosnya urutan baca jadi menurun
 * dulu baru menyamping — di papan instrumen itu tidak mengganggu, dan di
 * layar HP kolomnya tinggal satu sehingga urutannya kembali seperti di HTML.
 */
.papan {
  column-width: 260px;
  column-gap: 12px;
}

.kartu {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  display: inline-block;
  width: 100%;
  margin: 0 0 12px;
  background: var(--panel);
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  padding: 12px 14px;
  min-width: 0;
}

.kartu-judul {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teks-redup);
}

.angka-besar {
  font-variant-numeric: tabular-nums;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
}

.angka-satuan {
  font-size: 13px;
  font-weight: 600;
  color: var(--teks-redup);
  margin-left: 4px;
}

.baris-angka {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  border-top: 1px solid var(--garis);
  font-variant-numeric: tabular-nums;
}

.baris-angka:first-of-type { border-top: 0; }
.baris-angka dt { color: var(--teks-redup); margin: 0; }
.baris-angka dd { margin: 0; font-weight: 600; }

.catatan {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--teks-redup);
}

/* ---- Telegraf --------------------------------------------------------- */

.telegraf { display: flex; flex-direction: column; gap: 3px; }

.telegraf-butir {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  color: var(--teks);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 7px 10px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-height: 38px;
}

.telegraf-butir.is-perintah {
  border-color: var(--aksen);
  background: color-mix(in srgb, var(--aksen) 16%, transparent);
  font-weight: 700;
}

.telegraf-butir.is-dijawab::after {
  content: "dijawab";
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--kanan);
  text-transform: uppercase;
}

.telegraf-butir.is-menunggu::after {
  content: "menunggu jawaban";
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--waspada);
  text-transform: uppercase;
}

.telegraf-rpm {
  min-width: 46px;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--teks-redup);
}

.lonceng {
  margin-top: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid var(--waspada);
  color: var(--waspada);
  font-size: 12px;
  font-weight: 600;
}

.lonceng.is-diam { display: none; }

/* ---- Aba-aba kemudi --------------------------------------------------- */

.aba-baris { display: flex; flex-wrap: wrap; gap: 5px; }

.aba {
  appearance: none;
  background: var(--panel-2);
  color: var(--teks);
  border: 1px solid var(--garis);
  border-radius: 6px;
  padding: 7px 9px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  min-height: 38px;
  flex: 1 1 auto;
}

.aba.is-kiri { border-color: color-mix(in srgb, var(--kiri) 55%, var(--garis)); }
.aba.is-kanan { border-color: color-mix(in srgb, var(--kanan) 55%, var(--garis)); }
.aba.is-terpilih { background: var(--aksen); border-color: var(--aksen); color: var(--latar); }

/* ---- Kabel Anjungan ---------------------------------------------------- */

/* Kode kamar dibacakan dari satu orang ke orang lain, sering lewat telepon
 * atau di seberang ruangan: besar, berjarak, angka berlebar sama. */
.kode-kamar {
  font-variant-numeric: tabular-nums;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.1;
  margin: 6px 0 10px;
}

.isian-kode {
  font: inherit;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
  width: 8.5em;
  min-height: 40px;
  padding: 6px 10px;
  background: var(--panel-2);
  color: var(--teks);
  border: 1px solid var(--garis);
  border-radius: 6px;
}

.geser {
  width: 100%;
  margin: 6px 0 2px;
  accent-color: var(--aksen);
  min-height: 34px;
}

/* ---- Penunjuk gambar --------------------------------------------------- */

/* Tanpa batas tinggi, penunjuk SVG selebar 390 px jadi setinggi 234 px dan
 * satu kartu berisi tiga angka memakan seluruh layar HP. */
.gambar { display: block; width: 100%; height: auto; max-height: 132px; }

.peta-kotak {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  overflow: hidden;
}

.peta-kanvas { display: block; width: 100%; height: 62vh; min-height: 320px; }

.peta-alat {
  position: absolute;
  left: 10px;
  top: 10px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.peta-tera {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 5px 9px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--latar) 80%, transparent);
  border: 1px solid var(--garis);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--teks-redup);
}

/* Papan dua kartu.
 *
 * Tata KOLOM cocok untuk papan instrumen berisi delapan kartu kecil, tapi
 * runtuh kalau kartunya cuma dua dan salah satunya tinggi: kartu yang tidak
 * boleh dipotong (`break-inside: avoid`) lebih tinggi daripada tinggi kolom
 * hasil penyeimbangan, jadi seluruh isi jatuh ke kolom pertama dan tiga kolom
 * sisanya kosong. Terukur 23 September 2026: papan 1148 px, dua kartu
 * dua-duanya di kiri 59. Halaman pelajaran karena itu memakai grid.
 */
.papan-dua {
  column-width: auto;
  column-count: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
  align-items: start;
}

.papan-dua .kartu { margin: 0; display: block; }

/* Pemilih pelajaran: baris tombol di layar lebar, DROPDOWN di layar sempit.
 *
 * Delapan tombol di lebar 390 memakan empat baris dan mendorong peragaannya
 * keluar layar sebelum pemakai melihat apa pun. Bentuk ini diminta jhony di
 * Kamar Mesin 14 September 2026 untuk masalah yang sama persis: "sub menu
 * skenario lebih bagus dibikin drop down karena kalau di HP..."
 */
.pilihan-sempit { display: none; margin-bottom: 12px; }

.pilih-label {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teks-redup);
}

.pilih {
  width: 100%;
  min-height: 44px;
  padding: 9px 11px;
  background: var(--panel-2);
  color: var(--teks);
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  font: inherit;
  font-weight: 600;
}

/* ---- Pita latihan ------------------------------------------------------- */

/* Duduk di bawah kepala dan DI LUAR bagian mana pun: latihan dikerjakan di
 * halaman Anjungan, jadi putusannya harus ikut ke halaman mana pun pemakai
 * berada. */
.pita {
  background: var(--panel-2);
  border-bottom: 1px solid var(--garis);
  border-left: 4px solid var(--aksen);
  padding: 8px 16px;
}

.pita.is-diam { display: none; }
.pita.is-lulus { border-left-color: var(--kanan); }
.pita.is-gagal { border-left-color: var(--kiri); }

.pita-isi {
  max-width: var(--lebar-maks);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
}

.pita-tanda {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--garis);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teks-redup);
}

.pita.is-lulus .pita-tanda { color: var(--kanan); border-color: var(--kanan); }
.pita.is-gagal .pita-tanda { color: var(--kiri); border-color: var(--kiri); }

.pita-waktu {
  font-variant-numeric: tabular-nums;
  color: var(--teks-redup);
}

.pita-pesan {
  flex: 1 1 260px;
  min-width: 0;
  color: var(--teks-redup);
}

.pita-tombol { display: flex; gap: 6px; }

/* ---- Halaman pelajaran -------------------------------------------------- */

.pelajaran-kanvas { height: 46vh; min-height: 260px; }

.pelajaran-ringkas {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
}

/* Kotak sorot: satu kalimat yang harus terbaca lebih dulu dari alinea mana
 * pun di sekitarnya. Dipakai untuk "Perhatikan" dan untuk klaim pelajaran. */
.sorot {
  margin: 0 0 12px;
  padding: 9px 11px;
  border-left: 3px solid var(--aksen);
  border-radius: 0 6px 6px 0;
  background: color-mix(in srgb, var(--aksen) 12%, transparent);
  font-size: 14px;
  line-height: 1.5;
}

.alinea {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--teks);
}

.klaim {
  margin: 14px 0 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--teks-redup);
}

/* ---- Halaman sandar ------------------------------------------------------ */

.daftar-langkah {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.5;
}

.langkah {
  margin-bottom: 10px;
  color: var(--teks-redup);
}

.langkah-nama { display: block; font-weight: 600; }

.langkah-kenapa {
  display: block;
  font-size: 12px;
  line-height: 1.45;
  margin-top: 2px;
}

.langkah.is-selesai { color: var(--kanan); }
.langkah.is-selesai .langkah-nama::after { content: "  \2713"; }
.langkah.is-berikut { color: var(--teks); }
.langkah.is-berikut .langkah-nama { color: var(--aksen); }

.tunda { margin-bottom: 12px; }

.tunda-baca {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--teks-redup);
}

.daftar-tali { margin: 0; padding: 0; list-style: none; }

.tali {
  padding: 8px 0;
  border-top: 1px solid var(--garis);
}

.tali:first-child { border-top: 0; }

.tali-nama {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

.tali-keadaan {
  font-weight: 400;
  font-size: 12px;
  color: var(--teks-redup);
}

.kartu.is-larat { border-color: var(--kiri); }
.kartu.is-brought-up { border-color: var(--kanan); }

.tali.is-kencang .tali-keadaan { color: var(--kanan); }
.tali.is-tegang .tali-keadaan { color: var(--waspada); }

/* ---- Checklist persiapan ------------------------------------------------- */

.daftar-butir { margin: 0; padding: 0; list-style: none; }

.butir {
  padding: 10px 0;
  border-top: 1px solid var(--garis);
}

.butir:first-child { border-top: 0; }

.butir-nama {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 3px;
}

/* Tanda ini bukan hiasan: ia mengaku butir mana yang sungguh berakibat di
 * model dan mana yang cuma dicatat. Checklist yang menyamarkan itu membuat
 * orang mengira sudah berlatih sesuatu yang tidak pernah diperiksa. */
.butir-tanda {
  margin-left: 8px;
  padding: 1px 7px;
  border: 1px solid var(--garis);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teks-redup);
  vertical-align: 1px;
}

.butir-kenapa {
  font-size: 12px;
  line-height: 1.5;
  color: var(--teks-redup);
  margin-bottom: 7px;
}

.butir.is-selesai .butir-nama { color: var(--kanan); }
.butir.is-selesai .butir-nama::after { content: "  \2713"; }

.kartu.is-temuan { border-color: var(--waspada); }

/* Baris Pilot Card yang TIDAK dimodelkan dibuat redup dan miring, supaya
 * terbaca sebagai "tidak ada", bukan sebagai nilai. */
.baris-angka dd.is-kosong {
  color: var(--teks-redup);
  font-weight: 400;
  font-style: italic;
}

/* ---- Buku olah gerak ----------------------------------------------------- */

.daftar-catatan { margin: 0; padding: 0; list-style: none; }

.catatan-baris {
  display: flex;
  gap: 10px;
  padding: 5px 0;
  border-top: 1px solid var(--garis);
  font-size: 13px;
  line-height: 1.4;
}

.catatan-baris:first-child { border-top: 0; }

.catatan-jam {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: var(--teks-redup);
}

.catatan-teks { min-width: 0; }

.catatan-baris.is-telegraf-perintah .catatan-teks { font-weight: 600; }
.catatan-baris.is-telegraf-jawab .catatan-teks { color: var(--kanan); }
.catatan-baris.is-kemudi .catatan-teks { color: var(--aksen); }

/* ---- Kaki -------------------------------------------------------------- */

.kaki {
  max-width: var(--lebar-maks);
  margin: 0 auto;
  padding: 18px 16px 36px;
  color: var(--teks-redup);
  font-size: 12px;
  line-height: 1.6;
}

.kaki strong { color: var(--teks); }

.kaki-versi {
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}

/* ---- Layar kecil -------------------------------------------------------- */

@media (max-width: 860px) {
  .papan { column-width: 210px; }
  .pelajaran-kanvas { height: 40vh; }
  .peta-kanvas { height: 54vh; }
}

@media (max-width: 620px) {
  /* Di layar sempit menunya jadi DROPDOWN dan turun ke barisnya sendiri;
   * tombol tema naik ke baris judul. Dengan lima bagian, baris tombol
   * memakan tiga baris kepala di lebar 390. */
  .menu { display: none; }
  .menu-sempit { display: block; order: 3; flex-basis: 100%; }
  .tombol-tema { order: 2; }
  .isi { padding: 12px; }
  .papan { column-width: 180px; }
  .pilihan-lebar { display: none; }
  .pilihan-sempit { display: block; }
  .angka-besar { font-size: 28px; }
  .kepala-judul { font-size: 16px; }
}

@media (max-width: 400px) {
  .papan { column-width: auto; column-count: 1; }
  .kepala { padding: 8px 12px; }
  .kepala-judul { font-size: 15px; }
  .kepala-tanda { display: none; }
  .menu-tombol { padding: 8px 10px; font-size: 14px; }
  .tombol-tema { padding: 8px; font-size: 13px; }
}