/* ===========================================================================
   KALKULATOR — komponen hasil

   Berkas terpisah karena sections.css sudah mendekati batas layak baca.
   Yang tinggal di sini hanya komponen hasil kalkulator yang berdiri sendiri;
   .calc__form dan .calc__result tetap di sections.css bersama section lain.

   Seluruh warna di berkas ini diuji terhadap #0a2a80, yaitu ujung paling
   terang dari --grad-night yang menjadi latar .calc__result. Itu kasus
   paling ketat, bukan rata-rata.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Energi terbuang

   Diberi tempat sendiri, bukan satu baris di tabel rincian. Sejak Permen
   ESDM No. 2/2024 menghapus ekspor-impor bagi pelanggan baru, produksi yang
   tidak terpakai benar-benar hilang. Angka ini karena itu bukan detail
   teknis melainkan bukti bahwa estimasi tidak dilebihkan.
   --------------------------------------------------------------------------- */
.spill {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
}

.spill__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}

@media (max-width: 420px) {
  .spill__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
}

.spill__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* 5,20:1 terhadap #0a2a80 */
  color: #8fa6d8;
}

.spill__value {
  margin-top: 0.15rem;
  font-family: var(--font-ui);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  font-weight: 800;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

.spill__value small {
  font-size: 0.6em;
  font-weight: 600;
  color: #8fa6d8;
}

/* Amber, bukan gradasi matahari. Gradasi itu dipakai untuk angka
   penghematan, dan energi terbuang bukan kabar baik — memakai warna yang
   sama akan mengaburkan artinya. 6,43:1 terhadap #0a2a80. */
.spill__value.is-warn { color: var(--be-sun-400); }

.spill__note {
  margin-top: var(--space-2xs);
  font-size: 0.8125rem;
  line-height: 1.5;
  /* 7,81:1 terhadap #0a2a80 */
  color: #bccbef;
}

.spill__note:empty { display: none; }

/* ---------------------------------------------------------------------------
   Aliran energi — ke mana perginya tiap kWh yang dihasilkan panel

   Inilah penjelas dari angka penghematan: hanya energi yang terpakai sendiri
   yang memotong tagihan. Tiga segmen sengaja dibedakan lewat warna DAN
   urutan yang tetap (siang, baterai, terbuang), sehingga tetap terbaca bagi
   yang kesulitan membedakan warna. Seluruh angkanya juga ada sebagai teks
   di keterangan, jadi batang ini tidak pernah menjadi satu-satunya sumber.
   --------------------------------------------------------------------------- */
.flow__head {
  margin-bottom: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8fa6d8;
}

.flow__bar {
  display: flex;
  height: 0.75rem;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}

/* Empat warna yang saling kontras 3:1 di atas latar segelap ini tidak
   mungkin didapat sekaligus — rentang luminansnya tidak cukup. Karena itu
   pemisahan antar-segmen dikerjakan oleh garis pemisah gelap, bukan oleh
   warna, dan tiap warna hanya perlu kontras terhadap alur batang. Nilai
   yang tercapai terhadap alur: 7,02 / 4,40 / 4,02 / 4,49 banding 1.

   Segmen bernilai nol disembunyikan calculator.js agar garis pemisahnya
   tidak ikut tampil sebagai goresan tanpa isi. */
.flow__seg {
  height: 100%;
  width: 0;
  border-right: 2px solid var(--be-blue-950);
}

.flow__seg:last-child { border-right: 0; }

/* Ditegaskan karena atribut hidden mudah kalah oleh aturan display lain. */
.flow__seg[hidden] { display: none; }

/* Kuning surya: energi yang langsung terpakai, kasus terbaik. */
.flow__seg--langsung { background: var(--be-sun-300); }

/* Biru: energi yang harus melewati baterai lebih dulu. */
.flow__seg--geser { background: var(--be-blue-300); }

/* Abu netral: rugi konversi baterai. Kecil, tetapi tetap ditampilkan supaya
   keempat bagian benar-benar berjumlah seluruh produksi — bukan
   disembunyikan agar diagramnya terlihat rapi. */
.flow__seg--rugi { background: var(--ink-300); }

/* Jingga bergaris: terbuang. Garis miring membedakannya dari kuning surya
   tanpa bergantung pada perbedaan warna semata. */
.flow__seg--buang {
  background-color: var(--be-sun-500);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(3, 15, 63, 0.45) 0 2px,
    transparent 2px 6px
  );
}

@media (prefers-reduced-motion: no-preference) {
  .flow__seg { transition: width var(--dur-normal, 260ms) ease; }
}

.flow__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.1rem;
  margin: var(--space-2xs) 0 var(--space-sm);
  padding-left: 0;
  list-style: none;
  font-size: 0.8125rem;
  /* 7,81:1 terhadap #0a2a80 */
  color: #bccbef;
}

.flow__legend li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}

.flow__legend b {
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.flow__key {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
}

.flow__key--langsung { background: var(--be-sun-300); }
.flow__key--geser { background: var(--be-blue-300); }
.flow__key--rugi { background: var(--ink-300); }
.flow__key--buang {
  background-color: var(--be-sun-500);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(3, 15, 63, 0.45) 0 2px,
    transparent 2px 6px
  );
}

/* ---------------------------------------------------------------------------
   Keadaan awal

   Sebelum pengunjung menyentuh satu isian pun, hasil ditampilkan teredam
   agar tidak disangka perhitungan miliknya sendiri. Diaktifkan penuh oleh
   calculator.js begitu ada interaksi pertama.

   Yang diredam hanya angka. Ajakan mengisi justru dibuat penuh kontras,
   sehingga keadaan ini terbaca sebagai undangan, bukan kerusakan.
   --------------------------------------------------------------------------- */
.calc__result[data-state='idle'] .result-grid,
.calc__result[data-state='idle'] .coverage,
.calc__result[data-state='idle'] .spill,
.calc__result[data-state='idle'] .table-wrap {
  opacity: 0.4;
  filter: saturate(0.5);
}

.calc__prompt {
  display: flex;
  gap: var(--space-xs);
  align-items: flex-start;
  margin-bottom: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: rgba(255, 209, 0, 0.12);
  border: 1px solid rgba(255, 209, 0, 0.35);
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #fff;
}

.calc__prompt svg {
  flex-shrink: 0;
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.15rem;
  color: var(--be-sun-300);
}

/* Ajakan hanya relevan selama belum ada interaksi. */
.calc__result:not([data-state='idle']) .calc__prompt { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .calc__result .result-grid,
  .calc__result .coverage,
  .calc__result .spill,
  .calc__result .table-wrap {
    transition: opacity var(--dur-normal, 260ms) ease, filter var(--dur-normal, 260ms) ease;
  }
}