/* SUR+ Insight — komponen artikel (sp-*)
   Dimuat hanya di halaman detail artikel (views/pages/article.ejs), setelah
   main.css. Semua selector diawali .article-body supaya menang atas aturan
   anak langsung main.css (.article-body > p / > ul / > blockquote); bagian
   paling bawah menetralkan sisa efek aturan itu, reset global
   * { margin:0; padding:0 }, dan gap 20px .article-body. */
:root{
  --sp-navy:#06254A; --sp-navy-deep:#031A35; --sp-gold:#D6A329;
  --sp-gold-soft:#FBF4E4; --sp-line:#E3E7EE; --sp-muted:#5B6B80; --sp-tint:#F5F7FA;
  --sp-flow-gap:20px; /* = gap .article-body di main.css */
}

/* Intisari / key takeaway */
.article-body .sp-keytakeaway{
  background:var(--sp-navy); color:#fff; border-left:4px solid var(--sp-gold);
  padding:1.5rem 1.75rem; margin:0 0 2.5rem; border-radius:2px;
  font-size:1.125rem; line-height:1.65;
}
.article-body .sp-keytakeaway p{margin:0}
.article-body .sp-keytakeaway strong{color:var(--sp-gold)}

/* Ringkasan eksekutif */
.article-body .sp-summary{background:var(--sp-tint); padding:1.5rem 1.75rem; margin:0 0 2.5rem; border-radius:2px}
.article-body .sp-summary h2{margin-top:0; font-size:1.25rem}
.article-body .sp-summary ul{margin:0; padding-left:1.1rem}
.article-body .sp-summary li{margin:.6rem 0}
.article-body .sp-summary li::marker{color:var(--sp-gold)}

/* Langkah bernomor (metodologi & jalur) */
.article-body .sp-steps,.article-body .sp-path{list-style:none; counter-reset:sp; padding:0; margin:1.5rem 0}
.article-body .sp-steps li,.article-body .sp-path li{
  counter-increment:sp; position:relative; padding:.9rem 0 .9rem 3.25rem;
  border-bottom:1px solid var(--sp-line);
}
.article-body .sp-steps li:last-child,.article-body .sp-path li:last-child{border-bottom:0}
.article-body .sp-steps li::before,.article-body .sp-path li::before{
  content:counter(sp); position:absolute; left:0; top:.8rem;
  width:2.1rem; height:2.1rem; border-radius:50%;
  display:grid; place-items:center; font-weight:600;
  background:var(--sp-navy); color:#fff;
}
.article-body .sp-path li::before{background:var(--sp-gold); color:var(--sp-navy-deep)}

/* Tabel skenario */
.article-body .sp-table{margin:1.75rem 0}
.article-body .sp-table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.article-body .sp-table table{width:100%; min-width:620px; border-collapse:collapse; font-size:.95rem}
.article-body .sp-table th,.article-body .sp-table td{padding:.8rem 1rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--sp-line)}
.article-body .sp-table thead th{background:var(--sp-navy); color:#fff; font-weight:600; font-size:.85rem}
.article-body .sp-table tbody th{font-weight:600; color:var(--sp-navy); white-space:nowrap}
.article-body .sp-table td:nth-child(2),.article-body .sp-table td:nth-child(3){white-space:nowrap; font-variant-numeric:tabular-nums}
.article-body .sp-table tr.is-base{background:var(--sp-gold-soft)}
.article-body .sp-table tr.is-base th{box-shadow:inset 3px 0 0 var(--sp-gold)}
.article-body .sp-table tr.is-extreme td:nth-child(3){font-weight:700; color:var(--sp-navy)}

/* Pull quote */
.article-body .sp-pullquote{
  margin:2.5rem 0; padding:1.5rem 0 1.5rem 1.75rem;
  border-left:4px solid var(--sp-gold);
}
.article-body .sp-pullquote p{
  margin:0; font-family:"Source Serif 4",Georgia,serif; font-style:italic;
  font-size:1.5rem; line-height:1.4; color:var(--sp-navy);
}

/* Dua jalan */
.article-body .sp-twopaths{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1.5rem 0}
.article-body .sp-twopaths-item{border:1px solid var(--sp-line); border-top:3px solid var(--sp-navy); padding:1.1rem 1.25rem}
.article-body .sp-twopaths-item:nth-child(2){border-top-color:var(--sp-gold)}
.article-body .sp-twopaths-item p{margin:0}
@media (max-width:640px){.article-body .sp-twopaths{grid-template-columns:1fr}}

/* Kesimpulan */
.article-body .sp-conclusion{
  font-family:"Source Serif 4",Georgia,serif; font-size:1.3rem; line-height:1.45;
  color:var(--sp-navy); padding:1.25rem 0; border-top:1px solid var(--sp-line); border-bottom:1px solid var(--sp-line);
}

/* Catatan: asumsi & sumber */
.article-body .sp-divider{border:0; border-top:1px solid var(--sp-line); margin:3rem 0 1.5rem}
.article-body .sp-notes{font-size:.9rem; color:var(--sp-muted)}
.article-body .sp-notes h3{font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--sp-navy); margin:1.5rem 0 .75rem}
.article-body .sp-notes ul{padding-left:1.1rem; margin:0}
.article-body .sp-notes li{margin:.4rem 0}

/* ---------- Komponen tambahan (artikel kedua dst.) ---------- */

/* Abstrak */
.article-body .sp-abstract{background:var(--sp-tint); border-top:3px solid var(--sp-navy); padding:1.5rem 1.75rem; margin:0 0 2.5rem}
.article-body .sp-abstract h2{margin-top:0; font-size:1.25rem}
.article-body .sp-abstract p:last-child{margin-bottom:0}

/* Kata kunci */
.article-body .sp-keywords{display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; font-size:.85rem; margin-top:1.25rem}
.article-body .sp-keywords strong{margin-right:.25rem; color:var(--sp-navy)}
.article-body .sp-keywords span{background:#fff; border:1px solid var(--sp-line); border-radius:999px; padding:.2rem .7rem; color:var(--sp-navy)}

/* Analogi */
.article-body .sp-analogy{border-left:3px solid var(--sp-gold); background:var(--sp-gold-soft); padding:1.1rem 1.5rem; margin:1.5rem 0}
.article-body .sp-analogy p{margin:.5rem 0}

/* Sorotan paragraf penting */
.article-body .sp-highlight{border:1px solid var(--sp-line); border-left:4px solid var(--sp-navy); padding:1.1rem 1.5rem; margin:1.75rem 0}
.article-body .sp-highlight p{margin:0}

/* Paragraf penutup */
.article-body .sp-closing{border-top:2px solid var(--sp-gold); padding-top:1.25rem; margin-top:2rem; color:var(--sp-navy)}

/* Stat tiles */
.article-body .sp-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--sp-line); border:1px solid var(--sp-line); margin:1.75rem 0}
.article-body .sp-stat{background:#fff; padding:1rem 1.1rem; display:flex; flex-direction:column; gap:.25rem}
.article-body .sp-stat-label{font-size:.78rem; color:var(--sp-muted); line-height:1.3}
.article-body .sp-stat-value{font-size:1.35rem; font-weight:700; color:var(--sp-navy); font-variant-numeric:tabular-nums; line-height:1.2}
.article-body .sp-stat-note{font-size:.78rem; color:var(--sp-muted)}
.article-body .sp-stat.is-highlight{background:var(--sp-navy)}
.article-body .sp-stat.is-highlight .sp-stat-value{color:var(--sp-gold)}
.article-body .sp-stat.is-highlight .sp-stat-label,.article-body .sp-stat.is-highlight .sp-stat-note{color:#C9D3E0}
@media (max-width:640px){.article-body .sp-stats{grid-template-columns:1fr 1fr}}

/* Bar chart horizontal sederhana */
.article-body .sp-barchart{margin:1.75rem 0; padding:1.25rem 1.5rem; border:1px solid var(--sp-line)}
.article-body .sp-chart-title{font-size:.85rem; font-weight:600; color:var(--sp-navy); margin-bottom:1rem}
.article-body .sp-bar{display:grid; grid-template-columns:7.5rem 1fr 3.5rem; align-items:center; gap:.75rem; margin:.55rem 0; font-size:.9rem}
.article-body .sp-bar-label{color:#1B2533}
.article-body .sp-bar-track{height:14px; background:var(--sp-tint); border-radius:0 4px 4px 0}
.article-body .sp-bar-fill{display:block; height:100%; background:#8A9BB3; border-radius:0 4px 4px 0}
.article-body .sp-bar-value{font-variant-numeric:tabular-nums; color:var(--sp-muted); text-align:right}
.article-body .sp-bar.is-highlight .sp-bar-label,.article-body .sp-bar.is-highlight .sp-bar-value{font-weight:700; color:var(--sp-navy)}
.article-body .sp-bar.is-highlight .sp-bar-fill{background:var(--sp-gold)}
@media (max-width:480px){.article-body .sp-bar{grid-template-columns:6rem 1fr 3rem}}

/* Grafik/gambar dari dokumen */
.article-body .sp-figure-group{margin:2rem 0}
.article-body .sp-figure-group-title{font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--sp-muted); margin:0 0 .75rem}
.article-body .sp-figure{margin:0 0 1.75rem; border:1px solid var(--sp-line); padding:1rem 1.25rem}
.article-body .sp-figure:last-child{margin-bottom:0}
.article-body .sp-figure-title{font-weight:600; color:var(--sp-navy); font-size:.95rem; margin-bottom:.75rem}
.article-body .sp-figure img{display:block; width:100%; height:auto}
.article-body .sp-figure-source,.article-body .sp-chart-source{font-size:.78rem; color:var(--sp-muted); margin:.6rem 0 0}
.article-body .sp-stats--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:640px){.article-body .sp-stats--3{grid-template-columns:1fr}}

/* ---------- Komponen artikel EWS (artikel keempat) ---------- */

/* Kalimat pengantar di awal bab */
.article-body .sp-lede{font-family:"Source Serif 4",Georgia,serif; font-style:italic; font-size:1.2rem; line-height:1.5; color:var(--sp-navy); margin:0 0 1.5rem}

/* Kotak "Yang disumbangkan ke EWS" */
.article-body .sp-ews{background:var(--sp-navy); color:#fff; padding:1.1rem 1.5rem; margin:2rem 0; border-radius:2px; position:relative; border-left:4px solid var(--sp-gold)}
.article-body .sp-ews p{margin:0}
.article-body .sp-ews strong{color:var(--sp-gold)}

/* Caption gambar di bawah */
.article-body .sp-figure-caption{font-size:.85rem; color:var(--sp-muted); font-style:italic; margin-top:.75rem}

/* Stat tiles 2 kolom */
.article-body .sp-stats--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:640px){.article-body .sp-stats--2{grid-template-columns:1fr}}

/* Tabel: varian */
.article-body .sp-table table.sp-table-compact{min-width:0}
.article-body .sp-badge{display:inline-block; background:var(--sp-navy); color:#fff; font-size:.8rem; font-weight:700; padding:.15rem .5rem; border-radius:3px}
.article-body .sp-nowrap{white-space:nowrap}
.article-body .sp-rpn{min-width:5.5rem}
.article-body .sp-rpn-value{display:block; font-weight:700; color:var(--sp-navy); font-variant-numeric:tabular-nums}
.article-body .sp-rpn-bar{display:block; height:6px; margin-top:.35rem; background:var(--sp-gold); border-radius:0 3px 3px 0}
.article-body .sp-table td.sp-rpn{white-space:normal}
.article-body .sp-table-layers{min-width:720px}
.article-body .sp-status{font-size:.9rem; border-left:3px solid transparent}
.article-body .sp-status.is-safe{border-left-color:#8A9BB3}
.article-body .sp-status.is-watch{border-left-color:var(--sp-gold)}
.article-body .sp-status.is-outflow{border-left-color:#B42318; color:#8A1C12}

/* Daftar rekomendasi bernomor */
.article-body .sp-reco{padding-left:1.4rem; margin:1rem 0 1.75rem}
.article-body .sp-reco > li{margin:.9rem 0; padding-left:.35rem}
.article-body .sp-reco > li::marker{font-weight:700; color:var(--sp-navy)}
.article-body .sp-layers{margin:.9rem 0 0; padding-left:0; list-style:none}
.article-body .sp-layers li{border-left:3px solid var(--sp-line); padding:.4rem 0 .4rem 1rem; margin:.6rem 0}

/* Lampiran */
.article-body .sp-appendix{margin-top:3.5rem; padding:1.75rem; background:var(--sp-tint); border-top:3px solid var(--sp-navy)}
.article-body .sp-appendix > h2{margin-top:0}
.article-body .sp-appendix h3{font-size:1.05rem; color:var(--sp-navy); margin:1.75rem 0 .5rem}
.article-body .sp-appendix .sp-keywords span{background:#fff}
.article-body .sp-appendix .sp-pullquote{margin-bottom:0}

/* Catatan kaki */
.article-body .sp-fnref{font-size:.7em; line-height:0; margin-left:1px}
.article-body .sp-fnref a{color:var(--sp-gold); font-weight:700; text-decoration:none}
.article-body .sp-footnotes{margin-top:2.5rem; padding-top:1.25rem; border-top:1px solid var(--sp-line); font-size:.85rem; color:var(--sp-muted)}
.article-body .sp-footnotes h3{font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--sp-navy); margin:0 0 .75rem}
.article-body .sp-footnotes ol{padding-left:1.2rem; margin:0}
.article-body .sp-footnotes li{margin:.6rem 0}
.article-body .sp-footnotes li p{margin:.4rem 0}
.article-body .sp-fnback{text-decoration:none; color:var(--sp-gold); margin-left:.25rem}

/* Tabel berisi teks panjang: izinkan teks membungkus */
.article-body .sp-table table.sp-table-text td,.article-body .sp-table table.sp-table-text th{white-space:normal}
.article-body .sp-table table.sp-table-text td.sp-nowrap{white-space:nowrap}
.article-body .sp-table table.sp-table-text tbody th{min-width:9rem}
.article-body .sp-table table.sp-table-compact tbody th{min-width:0; width:4.5rem}

/* ---------- Komponen artikel DSI (artikel kelima) ---------- */
.article-body .sp-summary--prose p{margin:.75rem 0}
.article-body .sp-summary--prose p:last-child{margin-bottom:0}

/* Tiga prioritas kebijakan */
.article-body .sp-priorities{list-style:none; padding:0; margin:1.5rem 0; display:grid; gap:.75rem}
.article-body .sp-priorities li{border:1px solid var(--sp-line); border-top:3px solid var(--sp-gold); padding:1rem 1.25rem; background:#fff}
.article-body .sp-priorities li strong{color:var(--sp-navy)}

/* Scorecard */
.article-body .sp-table table.sp-scorecard{min-width:640px}
.article-body .sp-index{display:inline-grid; place-items:center; width:1.4rem; height:1.4rem; border-radius:50%; background:var(--sp-gold); color:var(--sp-navy-deep); font-size:.75rem; font-weight:700; margin-right:.5rem; vertical-align:1px}

/* Tanda tangan institusi */
.article-body .sp-signature{margin:2rem 0 0; padding-left:1rem; border-left:3px solid var(--sp-navy)}
.article-body .sp-signature p{margin:0}
.article-body .sp-signature-name{font-weight:700; color:var(--sp-navy)}
.article-body .sp-signature-tagline{font-style:italic; font-size:.85rem; color:var(--sp-muted)}
.article-body .sp-notes p{margin:.6rem 0}

/* ---------- Penyesuaian dengan main.css ---------- */

/* Aturan anak langsung main.css (.article-body > ul / > li::before /
   > blockquote / > p) dinetralkan untuk elemen ber-class sp-. Spesifisitas
   sama dengan main.css (menang karena dimuat sesudahnya) tapi di bawah
   aturan .article-body .sp-* di atas, yang tetap menentukan tampilannya. */
.article-body > ul:where([class*="sp-"]){display:block; gap:normal; list-style:disc; padding-left:1.25rem}
.article-body > ul:where([class*="sp-"]) > li{padding-left:0; font:inherit; color:inherit; text-align:left}
.article-body > ul:where([class*="sp-"]) > li::before{content:none}
.article-body > blockquote:where([class*="sp-"]){padding:0; background:none; border-left:0; border-radius:0; font:inherit; color:inherit}
.article-body > p:where([class*="sp-"]){font:inherit; line-height:1.6; color:inherit; text-align:left}

/* Margin yang hilang karena reset global * { margin:0; padding:0 }, untuk
   p / ul / ol / li di dalam komponen sp-. Spesifisitas nol (:where), jadi
   setiap aturan komponen di atas tetap menang. Daftar ber-class sp- sudah
   mengatur jaraknya sendiri. */
:where(.article-body [class*="sp-"] p){margin:.75rem 0}
:where(.article-body [class*="sp-"] p:first-child){margin-top:0}
:where(.article-body [class*="sp-"] p:last-child){margin-bottom:0}
:where(.article-body [class*="sp-"] :is(ul,ol):not([class*="sp-"])){margin:.75rem 0; padding-left:1.25rem}
:where(.article-body [class*="sp-"] :is(ul,ol):not([class*="sp-"]) > li){margin:.35rem 0}

/* .article-body adalah flex column dengan gap 20px, jadi margin vertikal
   komponen yang jadi anak langsungnya dikurangi selebar gap itu (margin
   tidak collapse di flex). Komponen bersarang tidak terpengaruh. */
.article-body > .sp-keytakeaway,
.article-body > .sp-summary,
.article-body > .sp-abstract{margin-bottom:max(0px, 2.5rem - var(--sp-flow-gap))}
.article-body > .sp-steps,
.article-body > .sp-path,
.article-body > .sp-twopaths,
.article-body > .sp-analogy,
.article-body > .sp-priorities{margin-top:max(0px, 1.5rem - var(--sp-flow-gap)); margin-bottom:max(0px, 1.5rem - var(--sp-flow-gap))}
.article-body > .sp-table,
.article-body > .sp-highlight,
.article-body > .sp-stats,
.article-body > .sp-barchart{margin-top:max(0px, 1.75rem - var(--sp-flow-gap)); margin-bottom:max(0px, 1.75rem - var(--sp-flow-gap))}
.article-body > .sp-pullquote{margin-top:max(0px, 2.5rem - var(--sp-flow-gap)); margin-bottom:max(0px, 2.5rem - var(--sp-flow-gap))}
.article-body > .sp-figure-group,
.article-body > .sp-ews{margin-top:max(0px, 2rem - var(--sp-flow-gap)); margin-bottom:max(0px, 2rem - var(--sp-flow-gap))}
.article-body > .sp-divider{margin-top:max(0px, 3rem - var(--sp-flow-gap)); margin-bottom:max(0px, 1.5rem - var(--sp-flow-gap))}
.article-body > .sp-figure{margin-bottom:max(0px, 1.75rem - var(--sp-flow-gap))}
.article-body > .sp-lede{margin-bottom:max(0px, 1.5rem - var(--sp-flow-gap))}
.article-body > .sp-reco{margin-top:max(0px, 1rem - var(--sp-flow-gap)); margin-bottom:max(0px, 1.75rem - var(--sp-flow-gap))}
.article-body > .sp-closing,
.article-body > .sp-signature{margin-top:max(0px, 2rem - var(--sp-flow-gap))}
.article-body > .sp-keywords{margin-top:max(0px, 1.25rem - var(--sp-flow-gap))}
.article-body > .sp-footnotes{margin-top:max(0px, 2.5rem - var(--sp-flow-gap))}
.article-body > .sp-appendix{margin-top:max(0px, 3.5rem - var(--sp-flow-gap))}