/* 06 · #tahap (milik S1). Semua pemilih diawali #tahap atau .th__ ; warna hanya dari token base.css
   Estimasi = amber (bidang), Taksasi = biru info, Definitif = hijau (Master Brief §6.3). Teks memakai token teks,
   warna seri hanya pada tanda di samping teks (dataviz: identitas bukan dari warna teks). */

#tahap .th__panel { position: relative; justify-content: center; }
#tahap .th__produksi { width: 100%; transform-origin: left center; transition: transform .7s var(--ease), opacity .6s var(--ease); }

/* Tiga angka besar */
#tahap .th__angka { list-style: none; margin: 0 0 calc(var(--u) * 1.4); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
#tahap .th__angka li { display: flex; flex-direction: column; gap: calc(var(--u) * .25); min-width: 0; }
#tahap .th__nilai { font-family: var(--display); font-weight: 700; font-size: calc(var(--u) * 3.5); line-height: .95; letter-spacing: -.005em; color: var(--c-fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
#tahap .th__angka li:first-child .th__nilai { color: var(--c-accent); }
#tahap .th__ket { display: inline-flex; align-items: center; gap: .5em; font-size: var(--fs-label); font-weight: 600; color: var(--c-fg-2); }

/* Tanda seri (persegi kecil) */
#tahap .th__sw { flex: none; width: 12px; height: 12px; border-radius: 3px; box-sizing: border-box; }
#tahap .th__sw--e { background: var(--c-accent-fill); }
#tahap .th__sw--t { background: var(--c-info); }
#tahap .th__sw--d { background: var(--c-good); }
#tahap .th__sw--belum { border: 1.5px dashed var(--c-good); }

/* Grafik */
#tahap .th__grafik { position: relative; margin: 0; }
#tahap .th__legenda { list-style: none; margin: 0 0 calc(var(--u) * .6); padding: 0; display: flex; justify-content: flex-end; gap: 1.3em; font-size: var(--fs-label); color: var(--c-fg-2); }
#tahap .th__legenda li { display: inline-flex; align-items: center; gap: .45em; }
#tahap .th__svg-wadah { position: relative; height: calc(var(--u) * 19); min-height: 200px; }
#tahap .th__svg-wadah svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#tahap .th__kaki { margin: calc(var(--u) * .8) 0 0; }

#tahap .th__dasar { stroke: var(--c-line-2); stroke-width: 1; shape-rendering: crispEdges; }
#tahap .th__pisah { stroke: var(--c-line-2); stroke-width: 1; }
#tahap .th__bulan { fill: var(--c-muted); font: 600 var(--fs-kecil) var(--font); }
#tahap .th__belum-teks { fill: var(--c-muted); font: 500 var(--fs-kecil) var(--font); paint-order: stroke; stroke: var(--c-bg); stroke-width: 4px; stroke-linejoin: round; }
#tahap .th__b--e { fill: var(--c-accent-fill); }
#tahap .th__b--t { fill: var(--c-info); }
#tahap .th__b--d { fill: var(--c-good); }
#tahap .th__b--belum { fill: none; stroke: var(--c-good); stroke-width: 1.5; stroke-dasharray: 4 3; }
#tahap .th__hit { fill: transparent; cursor: default; }
/* Minggu tumbuh dari dasar, kiri ke kanan mengikuti gulir (.is-on dari JS) */
#tahap .th__minggu { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform .6s var(--ease); }
#tahap .th__minggu.is-on { transform: none; }
#tahap .th__belum-teks { opacity: 0; transition: opacity .3s var(--ease) .4s; }
#tahap .th__belum-teks.is-on { opacity: 1; }
#tahap .th__minggu.is-tunjuk .th__b--e, #tahap .th__minggu.is-tunjuk .th__b--t, #tahap .th__minggu.is-tunjuk .th__b--d { filter: brightness(.88); }

/* Keterangan saat diarahkan tetikus (nilai per minggu) */
#tahap .th__tip {
  position: absolute; z-index: 4; transform: translate(-50%, -100%); pointer-events: none; white-space: nowrap;
  padding: .45em .7em; border-radius: 6px; background: var(--c-card); border: 1px solid var(--c-line-2); box-shadow: var(--c-shadow);
  font-size: var(--fs-kecil); line-height: 1.45; color: var(--c-fg);
}
#tahap .th__tip b { display: block; font-weight: 700; }

/* s1: grafik mengecil ke kiri dan meredup; kartu stok masuk dari kanan */
#tahap[data-state="1"] .th__produksi { transform: scale(.54); opacity: .28; }
#tahap .th__stok {
  position: absolute; right: 0; top: 50%; width: 46%; z-index: 2;
  opacity: 0; transform: translate(calc(var(--u) * 3), -50%); pointer-events: none;
  transition: opacity .5s var(--ease), transform .7s var(--ease);
}
#tahap[data-state="1"] .th__stok { opacity: 1; transform: translate(0, -50%); pointer-events: auto; transition-delay: .2s; }

#tahap .th__gudang { background: var(--c-card); border: 1px solid var(--c-accent-fill); border-radius: var(--radius); box-shadow: var(--c-shadow); padding: calc(var(--u) * 1.3) calc(var(--u) * 1.4); }
#tahap .th__gudang-kepala { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; margin-bottom: calc(var(--u) * 1); }
#tahap .th__gudang-kepala h3 { margin: 0; font-size: calc(var(--fs-label) * 1.25); font-weight: 700; color: var(--c-fg); }
#tahap .th__gudang-kepala p { margin: 0; font-size: var(--fs-kecil); color: var(--c-muted); white-space: nowrap; }
#tahap .th__baris-stok { margin-bottom: calc(var(--u) * .85); }
#tahap .th__baris-stok p { margin: 0 0 calc(var(--u) * .3); display: flex; justify-content: space-between; gap: 1em; font-size: var(--fs-label); color: var(--c-fg-2); }
#tahap .th__baris-stok b { color: var(--c-fg); font-weight: 700; white-space: nowrap; }
#tahap .th__jalur { position: relative; display: flex; gap: 2px; height: calc(var(--u) * 1.3); min-height: 14px; border-radius: 0 4px 4px 0; }
#tahap .th__isi { display: block; height: 100%; transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
#tahap .th__isi--buku { width: var(--timbang, 91.7%); background: var(--c-line-2); }
#tahap .th__isi--lebih { width: calc(100% - var(--timbang, 91.7%) - 2px); background: var(--c-accent-fill); border-radius: 0 4px 4px 0; transform-origin: left; }
#tahap .th__isi--timbang { width: var(--timbang, 91.7%); background: var(--c-good); border-radius: 0 4px 4px 0; }
#tahap[data-state="1"] .th__isi { transform: none; transition-delay: .45s; }
#tahap[data-state="1"] .th__isi--lebih { transition-delay: 1s; }
html:not(.is-static) #tahap.is-active[data-state="1"] .th__isi--lebih { animation: th-denyut 1.8s ease-in-out 1.7s infinite; }
@keyframes th-denyut { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
#tahap .th__kalimat { margin: calc(var(--u) * 1.1) 0 calc(var(--u) * .8); font-size: var(--fs-lead); font-weight: 700; line-height: 1.3; color: var(--c-fg); }
#tahap .th__tindak { margin: 0; }
#tahap .th__gudang-kecil { margin: calc(var(--u) * .8) 0 0; padding: calc(var(--u) * .7) calc(var(--u) * 1.1); border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-card); font-size: var(--fs-label); font-weight: 600; color: var(--c-fg-2); }

/* Mode statis: grafik utuh, kartu stok di bawahnya */
.is-static #tahap .th__panel { flex-direction: column; align-items: stretch; gap: calc(var(--u) * 2.4); }
.is-static #tahap[data-state="1"] .th__produksi { transform: none; opacity: 1; }
.is-static #tahap .th__stok { position: static; width: auto; max-width: 34em; opacity: 1; transform: none; }

@media (max-width: 860px) {
  #tahap .th__nilai { font-size: 34px; }
  #tahap .th__angka { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #tahap .th__legenda { justify-content: flex-start; flex-wrap: wrap; }
}