/* Grafik & tanda angka untuk Beranda dan Laporan (SPEC-LAPORAN §6). Palet sudah divalidasi (tanpa teal/ungu);
   label & tabel padanan selalu ada sehingga warna bukan satu-satunya pembeda. Semua warna lewat token (mode gelap ikut). */
:root{
  --gr-1:#2563EB;--gr-2:#EB6834;--gr-3:#34508F;--gr-4:#E39B00;--gr-5:#D55181;
  --gr-lain:#A8B6D6;--gr-banding:#9AA6BF;--gr-grid:var(--garis-lembut);--gr-sumbu:var(--fg-muted);
}
@media (prefers-color-scheme:dark){:root{
  --gr-1:#3987E5;--gr-2:#D95926;--gr-3:#4F6FC0;--gr-4:#C98500;--gr-5:#D55181;
  --gr-lain:#6B7894;--gr-banding:#5B6780;
}}

/* ---------- Wadah grafik SVG ---------- */
.gr{margin:0;min-width:0;display:flex;flex-direction:column;gap:8px}
.gr-judul{font-size:13.5px;font-weight:700;color:var(--fg-heading)}
.gr svg{display:block;width:100%;height:auto;max-width:100%;overflow:visible}
.gr svg.gr-sempit{display:none}
@media (max-width:640px){.gr svg.gr-lebar{display:none}.gr svg.gr-sempit{display:block}}
@media print{.gr svg.gr-sempit{display:none!important}.gr svg.gr-lebar{display:block!important}}
.gr-legenda{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12.5px;color:var(--fg-muted)}
.gr-legenda li{display:inline-flex;align-items:center;gap:6px}
.gr-kunci{display:inline-block;width:12px;height:12px;border-radius:3px;background:var(--gr-1);flex:0 0 auto}
.gr-kunci.gr-s1{background:var(--gr-1)}.gr-kunci.gr-s2{background:var(--gr-2)}.gr-kunci.gr-s3{background:var(--gr-3)}
.gr-kunci.gr-lain{background:var(--gr-lain)}.gr-kunci.gr-banding{background:var(--gr-banding)}
.gr-kunci-garis{height:3px;border-radius:2px;width:16px}
.gr-kunci-perkiraan{background:repeating-linear-gradient(90deg,currentColor 0 6px,transparent 6px 10px)!important}
.gr-kunci-arsir{background:repeating-linear-gradient(45deg,var(--gr-1) 0 2px,transparent 2px 5px);box-shadow:inset 0 0 0 1px var(--gr-1)}
.gr-kunci-sorot{background:var(--primary-subtle);box-shadow:inset 0 0 0 1px var(--border-strong)}
.gr-grid line{stroke:var(--gr-grid);stroke-width:1}
.gr-sumbu text{font-size:12px;fill:var(--gr-sumbu);font-variant-numeric:tabular-nums;font-family:var(--font-ui)}
.gr-label{font-size:12px;font-weight:700;fill:var(--fg);font-variant-numeric:tabular-nums;font-family:var(--font-ui)}
.gr-data path.gr-s1,pattern rect.gr-s1{fill:var(--gr-1)}
.gr-data path.gr-s2,pattern rect.gr-s2{fill:var(--gr-2)}
.gr-data path.gr-s3,pattern rect.gr-s3{fill:var(--gr-3)}
.gr-data path.gr-banding{fill:var(--gr-banding)}
.gr-data path.gr-tidak-penuh{stroke-width:1}
.gr-data path.gr-tidak-penuh.gr-s1{stroke:var(--gr-1)}.gr-data path.gr-tidak-penuh.gr-s2{stroke:var(--gr-2)}
.gr-data path.gr-garis{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.gr-data path.gr-garis.gr-s1{stroke:var(--gr-1)}.gr-data path.gr-garis.gr-s2{stroke:var(--gr-2)}.gr-data path.gr-garis.gr-s3{stroke:var(--gr-3)}
.gr-data path.gr-garis.gr-banding{stroke:var(--gr-banding);stroke-width:1.5}
.gr-data .gr-perkiraan{stroke-dasharray:6 4}
.gr-titik{stroke:var(--surface);stroke-width:1.5}
.gr-titik.gr-s1{fill:var(--gr-1)}.gr-titik.gr-s2{fill:var(--gr-2)}.gr-titik.gr-s3{fill:var(--gr-3)}.gr-titik.gr-banding{fill:var(--gr-banding)}
.gr-titik.gr-titik-rongga{fill:var(--surface);stroke-width:2}
.gr-titik.gr-titik-rongga.gr-s1{stroke:var(--gr-1)}.gr-titik.gr-titik-rongga.gr-s2{stroke:var(--gr-2)}
.gr-jamkerja rect{fill:var(--primary-subtle);opacity:.7}
.gr-kosong{padding:18px 8px}

/* ---------- Tabel padanan ---------- */
.gr-tabel{font-size:13px}
.gr-tabel>summary{cursor:pointer;width:max-content;max-width:100%;padding:4px 0;font-size:12.5px;font-weight:700;color:var(--primary)}
.gr-tabel>summary:hover{color:var(--primary-hover)}
.gr-tabel .table-wrap{margin-top:6px}

/* ---------- Batang horizontal (HTML) ---------- */
.gr-hb{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.gr-hb li{display:grid;grid-template-columns:minmax(90px,28%) minmax(0,1fr);grid-template-areas:"nama teks" "batang batang";gap:4px 12px;align-items:baseline;font-size:13.5px}
.gr-hb-nama{grid-area:nama;font-weight:700;color:var(--fg);overflow-wrap:anywhere}
.gr-hb-teks{grid-area:teks;justify-self:end;text-align:right;color:var(--fg-muted);font-size:13px}
.gr-hb-teks small{display:block;font-size:12px}
.gr-hb-batang{grid-area:batang;display:block;height:10px;border-radius:999px;background:var(--bg-subtle);overflow:hidden}
.gr-hb-batang i{display:block;height:100%;border-radius:999px;background:var(--gr-1)}
.gr-hb li.sedikit .gr-hb-batang i{background:var(--gr-lain)}
.gr-hb li.sedikit .gr-hb-teks{color:var(--fg-muted)}
@media (min-width:720px){
  .gr-hb li{grid-template-columns:minmax(120px,24%) minmax(0,1fr) auto;grid-template-areas:"nama batang teks";align-items:center}
  .gr-hb-teks{min-width:120px}
}

/* ---------- Pita 100% ---------- */
.gr-pita{display:flex;height:16px;border-radius:999px;overflow:hidden;background:var(--bg-subtle);gap:2px}
.gr-pita span{display:block;height:100%;min-width:3px}
.gr-pita .gr-s1{background:var(--gr-1)}.gr-pita .gr-s2{background:var(--gr-2)}.gr-pita .gr-s3{background:var(--gr-3)}.gr-pita .gr-lain{background:var(--gr-lain)}
.gr-pita-legenda{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13.5px}
.gr-pita-legenda li{display:grid;grid-template-columns:14px minmax(0,1fr) auto 56px;gap:8px;align-items:center}
.gr-pita-legenda b{color:var(--fg-heading)}
.gr-pita-legenda small{text-align:right;color:var(--fg-muted)}

/* ---------- Corong infografis ---------- */
.corong-info{list-style:none;margin:0;padding:4px 0;display:flex;flex-direction:column;gap:2px}
.corong-tahap{display:flex;flex-direction:column;align-items:center;gap:4px}
.corong-tahap p{margin:0;font-size:13.5px;color:var(--fg-muted);text-align:center}
.corong-tahap p>b{color:var(--fg-heading)}
.corong-tahap .tabular b{color:var(--fg-heading);font-size:15px}
.ci-batang{width:100%;display:flex;justify-content:center}
.ci-batang i{display:block;height:22px;border-radius:6px;background:var(--gr-1)}
.corong-antara{text-align:center;font-size:12px;color:var(--fg-muted);padding:2px 0 4px;line-height:1.4}

/* ---------- Sparkline ---------- */
.gr-spark-wadah{display:inline-flex;align-items:center}
.gr-spark{width:120px;height:32px;display:block}
.gr-spark path{fill:none;stroke:var(--gr-1);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.gr-spark circle{fill:var(--gr-1)}
.gr-spark circle.rongga{fill:var(--surface);stroke:var(--gr-1);stroke-width:1.6}

/* ---------- Tanda, tren, catatan ---------- */
.tanda{display:inline-flex;align-items:center;height:20px;padding:0 7px;border:1px solid var(--border-strong);border-radius:999px;background:var(--bg-subtle);font-size:12px;font-weight:700;line-height:1;color:var(--fg-muted);white-space:nowrap;vertical-align:middle;cursor:help}
.tanda-perkiraan,.tanda-pendekatan{border-style:dashed}
.tanda-contoh{background:var(--koral-subtle);border-color:var(--koral);color:var(--fg)}
.tren.baik,.tren.buruk,.tren.netral{display:inline-flex;align-items:center;gap:3px;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
.tren.baik{color:var(--accent)}.tren.buruk{color:var(--koral-kuat)}.tren.netral{color:var(--fg-muted);font-weight:600}
.tren svg{width:14px;height:14px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.n-kecil{font-size:12px;font-weight:600;color:var(--fg-muted);font-variant-numeric:tabular-nums}
.sedikit{color:var(--fg-muted)}
.dasar{margin:2px 0 0;font-size:12.5px;line-height:1.5;color:var(--fg-muted)}
.stempel{margin:0;font-size:12px;line-height:1.5;color:var(--fg-muted)}
.banner-contoh{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--radius);background:var(--koral-subtle);color:var(--fg);font-size:13.5px;line-height:1.5}
.banner-contoh .tanda{flex:0 0 auto}

@media print{
  .gr-tabel>summary{display:none}
  .gr-tabel>*{display:block}
  .gr-tabel::details-content{content-visibility:visible;display:block}
  .gr-tabel .table-wrap{display:block}
  .gr svg,.gr-hb,.gr-pita,.corong-info,.gr-spark,.tanda,.banner-contoh{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}