:root {
  --bg: #fbf8f3;
  --surface: #ffffff;
  --ink: #1c1a17;
  --muted: #5f5850;
  --line: #e4ddd1;
  --field: #8f857a; /* M5g R13: bingkai isian >= 3:1 (--line 1,27:1 nyaris tak terlihat) */
  --accent: #8c1d18;
  --accent-soft: #f4e6e3;
  --bar: #ebe5da;
  --on-accent: #ffffff; /* M5n E73: teks di atas --accent (button) */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --teks: var(--serif); /* M5n: huruf badan teks, bawaan serif (Pak FD 2026-09-28); diganti panel pengaturan baca */
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #15130f;
    --surface: #1d1a16;
    --ink: #ede6da;
    --muted: #a99f92;
    --line: #36302a;
    --field: #776d62;
    --accent: #e0766f;
    --accent-soft: #2e1c19;
    --bar: #2c2721;
    --on-accent: #15130f;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #15130f;
  --surface: #1d1a16;
  --ink: #ede6da;
  --muted: #a99f92;
  --line: #36302a;
  --field: #776d62;
  --accent: #e0766f;
  --accent-soft: #2e1c19;
  --bar: #2c2721;
  --on-accent: #15130f;
  color-scheme: dark;
}
/* M5n tema sepia; A4 memeriksa kontrasnya */
:root[data-theme="sepia"] {
  --bg: #f4ecd8;
  --surface: #faf4e4;
  --ink: #3a2e20;
  --muted: #655541;
  --line: #ddd0b6;
  --field: #8e7c62;
  --accent: #8c1d18;
  --accent-soft: #ead9bf;
  --bar: #e4d6bb;
  --on-accent: #ffffff;
  color-scheme: light;
}
html[data-huruf="sans"] { --teks: var(--sans); }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-size: calc(var(--skala, 1) * 100%); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 1.0625rem/var(--jarak, 1.65) var(--teks);
  overflow-wrap: break-word;
}
.wrap { max-width: 46rem; margin: 0 auto; padding: 0 16px; }
header.top { border-bottom: 1px solid var(--line); }
header.top .wrap { display: flex; align-items: center; gap: 10px; padding-top: 14px; padding-bottom: 14px; }
.mark { width: 28px; height: 28px; flex: none; }
.brand { font: 600 1.05rem/1 var(--serif); letter-spacing: .01em; }
.pill {
  margin-left: auto; font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft); padding: 4px 10px; border-radius: 999px;
}
.hero { padding: 56px 0 36px; }
h1, h2 { font-family: var(--serif); font-weight: 600; line-height: 1.2; }
h1 { font-size: clamp(2rem, 6vw, 2.9rem); margin: 0 0 20px; letter-spacing: -.01em; }
.lede { font-size: 1.15rem; color: var(--ink); margin: 0 0 14px; }
.sub { color: var(--muted); margin: 0; }
section { padding: 36px 0; border-top: 1px solid var(--line); }
h2 { font-size: 1.5rem; margin: 0 0 18px; }
p { margin: 0 0 14px; }
.card {
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: 10px; padding: 20px; margin: 20px 0 10px;
}
.card dl { display: grid; grid-template-columns: max-content 1fr; gap: 10px 16px; margin: 0 0 18px; font-size: .95rem; }
.card dt { color: var(--muted); }
.card dd { margin: 0; display: flex; align-items: center; }
.bar { display: block; height: .7em; border-radius: 4px; background: var(--bar); }
.q { border-top: 1px dashed var(--line); padding-top: 14px; margin-top: 14px; }
.q-label { font-size: .82rem; color: var(--muted); margin-bottom: 8px; }
.q .bar { margin-bottom: 8px; }
.prov { font: .8rem/1.5 var(--mono); color: var(--muted); border-top: 1px dashed var(--line); padding-top: 12px; margin-top: 14px; }
.caption { font-size: .88rem; color: var(--muted); }
ol.prinsip { list-style: none; counter-reset: p; padding: 0; margin: 0; }
ol.prinsip li { counter-increment: p; position: relative; padding-left: 44px; margin-bottom: 20px; }
ol.prinsip li::before {
  content: counter(p); position: absolute; left: 0; top: 2px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font: 600 .9rem/1 var(--serif); color: var(--accent); border: 1.5px solid var(--accent);
}
ol.prinsip strong { display: block; font-family: var(--serif); font-size: 1.08rem; margin-bottom: 2px; }
ul.sasaran { padding-left: 1.2em; margin: 0; }
ul.sasaran li { margin-bottom: 8px; }
ol.tahap { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--line); }
ol.tahap li { position: relative; padding: 0 0 16px 22px; color: var(--muted); }
ol.tahap li::before {
  content: ""; position: absolute; left: -7px; top: 8px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--line);
}
ol.tahap li.kini { color: var(--ink); }
ol.tahap li.kini::before { background: var(--accent); border-color: var(--accent); }
ol.tahap .tag { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); margin-left: 6px; }
a { color: var(--accent); text-underline-offset: 3px; }
footer { border-top: 1px solid var(--line); padding: 28px 0 48px; font-size: .92rem; color: var(--muted); }
footer p { margin-bottom: 12px; }
.penafian { font-style: italic; }
@media (max-width: 480px) {
  body { font-size: 1rem; }
  .hero { padding-top: 40px; }
  .card { padding: 16px; }
  .card dl { grid-template-columns: 1fr; gap: 2px; }
  .card dd { margin-bottom: 10px; }
}
/* --- M4 antarmuka baca --- */
.brand { color: var(--ink); text-decoration: none; }
header.top nav { margin-left: auto; display: flex; gap: 18px; font-size: .95rem; }
header.top nav a { color: var(--muted); text-decoration: none; }
header.top nav a:hover { color: var(--accent); }
main.wrap { padding-top: 28px; padding-bottom: 40px; }
main h1 { margin-top: 8px; }
main section { padding: 24px 0; }
h3 { font: 600 1.05rem/1.3 var(--serif); margin: 18px 0 8px; }
.jenis { font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.jenis a { color: inherit; }
.catatan { font-size: .9rem; color: var(--muted); }
dl.ringkas, dl.sumber, .norma dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 14px; }
dl dt { color: var(--muted); }
dl dd { margin: 0; min-width: 0; }
.norma { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 10px; padding: 16px 18px; margin: 16px 0; }
.norma .objek { font-family: var(--serif); font-size: 1.05rem; margin-bottom: 10px; }
blockquote.kutipan { margin: 12px 0; padding: 12px 16px; border-left: 3px solid var(--line); background: var(--bg); font-family: var(--serif); white-space: pre-line; }
.lanjut { margin: -4px 0 12px 16px; font-size: .9rem; color: var(--muted); }
.lanjut span { font-style: italic; }
figure.paragraf { margin: 0 0 18px; }
figure.paragraf figcaption { font-size: .85rem; color: var(--muted); }
.versi { font-size: .9rem; border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 10px; }
.versi p { margin: 0 0 6px; }
.versi[data-versi="berubah_sesudah"], .versi[data-versi="tak_pasti"] { color: var(--ink); }
.bunyi { font-size: .9rem; margin-top: 8px; }
.bunyi p { margin: 0 0 6px; }
.bunyi summary { cursor: pointer; font-weight: 600; }
blockquote.naskah { margin: 8px 0 10px; padding: 12px 16px; border-left: 3px solid var(--line); background: var(--surface); font-family: var(--serif); font-size: 1rem; }
.bunyi .asal { color: var(--muted); overflow-wrap: anywhere; }
ul.batu, ul.daftar-pasal, ul.daftar-uu { padding-left: 1.2em; margin: 0; }
ul.batu li, ul.daftar-pasal li, ul.daftar-uu li { margin-bottom: 6px; }
ul.daftar-pasal { columns: 2 12rem; }
dl.sumber a, dl.sumber code { font: .82rem/1.5 var(--mono); word-break: break-all; }
dl.sumber a { display: block; }
.sitasi pre { font: .85rem/1.5 var(--mono); white-space: pre-wrap; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin: 0 0 10px; }
button { font: 600 .95rem/1 var(--sans); color: var(--on-accent); background: var(--accent); border: 0; border-radius: 8px; padding: 10px 16px; cursor: pointer; }
form.cari { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin-bottom: 12px; }
form.cari label { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; color: var(--muted); }
form.cari input { font: 1rem var(--sans); width: 8rem; padding: 8px 10px; border: 1px solid var(--field); border-radius: 8px; background: var(--surface); color: var(--ink); }
form#cari-teks { flex-direction: column; align-items: stretch; }
form.cari textarea { font: 1rem/1.5 var(--serif); width: 100%; padding: 10px 12px; border: 1px solid var(--field); border-radius: 8px; background: var(--surface); color: var(--ink); }
ol.hasil { padding-left: 1.4em; }
ol.hasil li { margin-bottom: 14px; }
ol.hasil ul { padding-left: 1.1em; margin: 4px 0 0; font-size: .92rem; color: var(--muted); }
article.entri { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 18px; }
article.entri h2 { margin-bottom: 4px; font-size: 1.25rem; }
.meta, .lewat { color: var(--muted); font-size: .92rem; }
/* M7d: ringkasan pengujian ditolak / tidak dapat diterima -- dibedakan dari kartu dikabulkan tanpa warna peringatan */
section.r5 h2 { font-size: 1.35rem; }
section.r5-hasil { padding: 18px 0 0; }
section.r5-hasil h3 { margin: 0 0 6px; }
.r5-cakupan, .r5-arti { font-size: .92rem; color: var(--muted); }
article.entri-r5 { border-top: 1px dashed var(--line); padding-top: 14px; margin-top: 14px; }
/* M7g: daftar ringkasan di halaman putusan, dipisah dari kutipan amar di atasnya (TINJAUAN MODEL putaran 3) */
#ringkasan-lain { border: 1px dashed var(--line); border-radius: 8px; padding: 4px 16px 8px; margin: 24px 0; }
#ringkasan-lain h2 { font-size: 1.2rem; }
.r5-dasar { font-size: .92rem; color: var(--muted); }
article.entri-r5 h4 { margin: 0 0 4px; font-size: 1.05rem; }
figure.alasan { margin: 10px 0; }
figure.alasan blockquote { margin: 0; padding: 10px 14px; border-left: 3px solid var(--line); background: var(--surface); font-family: var(--serif); }
figure.alasan figcaption { font-size: .85rem; color: var(--muted); margin-top: 4px; }
article.entri-r5 .sumber { font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; }
ul.daftar-r5 { padding-left: 1.2em; margin: 0; }
ul.daftar-r5 li { margin-bottom: 6px; }
@media (max-width: 480px) {
  dl.ringkas, dl.sumber, .norma dl { grid-template-columns: 1fr; gap: 0; }
  dl dd { margin-bottom: 8px; }
  .norma { padding: 14px; }
}
main .hero { border-top: 0; padding-top: 12px; }
.lapor { font-size: .9rem; color: var(--muted); margin-top: 10px; }
/* --- M5g tinjauan adversarial --- */
header.top .merek { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
header.top .independen { font-size: .72rem; line-height: 1.2; color: var(--muted); }
h1 [data-kolom="nomor_perkara"] { white-space: nowrap; }
.hero h1 { font-size: clamp(1.75rem, 5.2vw, 2.6rem); margin-bottom: 14px; }
main .hero { padding-bottom: 20px; }
.cakupan { font-size: .95rem; background: var(--accent-soft); border-radius: 8px; padding: 10px 14px; margin: 0; }
.contoh { font-size: .92rem; color: var(--muted); margin-top: 4px; }
form#cari-teks .aksi { display: flex; flex-wrap: wrap; gap: 10px; }
button.kedua { color: var(--accent); background: transparent; border: 1px solid var(--accent); }
.sitasi-ringkas { font-size: .92rem; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sitasi-ringkas [data-kolom] { color: var(--ink); }
.sitasi-ringkas button { padding: 6px 12px; font-size: .85rem; }
/* SERANG M5g (320 px): merek patah "Konstitusional.co" / "m"; nav turun ke baris kedua, bukan terbelah */
.brand { white-space: nowrap; }
header.top nav a { white-space: nowrap; }
header.top .wrap { flex-wrap: wrap; row-gap: 6px; }
@media (max-width: 480px) {
  main.wrap { padding-top: 16px; }
  .lede { font-size: 1.05rem; }
  .cakupan { font-size: .9rem; }
}
/* --- M5h paket 2: lompatan bagian, teks UUD, indeks putusan, hasil cara (b) --- */
.lompat { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .9rem; margin: 0 0 8px; }
.lompat a { white-space: nowrap; }
blockquote.uud { margin: 8px 0 10px; padding: 12px 16px; border-left: 3px solid var(--accent); background: var(--surface); font-family: var(--serif); }
ul.rujuk, ul.daftar-putusan { padding-left: 1.2em; margin: 0; }
ul.rujuk li, ul.daftar-putusan li { margin-bottom: 6px; }
form#cari-nomor input { width: 15rem; max-width: 100%; }
.batu-hasil { font-size: .92rem; color: var(--muted); margin: 4px 0 0; }
/* SERANG M5h (E61): empat tautan nav membuat kepala dua baris di Pixel 5 (63 -> 94 px) */
@media (max-width: 480px) {
  header.top .wrap { padding-top: 8px; padding-bottom: 8px; row-gap: 4px; }
  header.top nav { gap: 12px; font-size: .9rem; }
}
/* --- M5i paket 3: sitasi paragraf, glosarium, hasil rapat --- */
figure.paragraf figcaption button { padding: 3px 10px; margin-left: 6px; font-size: .78rem; color: var(--accent); background: transparent; border: 1px solid var(--accent); }
.salinan { display: block; font: .82rem/1.5 var(--mono); margin-top: 4px; }
dl dt a { color: inherit; text-decoration-style: dotted; }
dl.istilah dt { font-weight: 600; color: var(--ink); margin-top: 14px; }
dl.istilah dd { margin: 2px 0 0; }
dl.istilah ul { padding-left: 1.2em; margin: 6px 0 0; }
dl.istilah li { margin-bottom: 6px; }
/* R16: butir objek mewarisi jarak 14 px butir hasil; tiga baris objek jadi renggang di ponsel */
ol.hasil ul li { margin-bottom: 2px; }
ol.hasil > li { line-height: 1.5; }
/* --- M5j R17: salin tautan hasil --- */
#status-teks .bagikan { margin-left: 4px; padding: 5px 12px; font-size: .85rem; }
/* --- M5n panel pengaturan baca --- */
button.atur { padding: 6px 10px; font: 600 1rem/1 var(--serif); color: var(--ink); background: transparent; border: 1px solid var(--field); }
.panel-baca {
  position: fixed; inset: 12px 12px auto auto; margin: 0; width: min(22rem, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto;
  padding: 4px 16px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgb(0 0 0 / .22);
}
.panel-baca:not(:is(:popover-open, [data-buka])) { display: none; }
.panel-baca .baris { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.panel-baca .baris:last-child { border-bottom: 0; justify-content: flex-end; }
.panel-baca .label { font-size: .92rem; font-weight: 600; color: var(--muted); }
.panel-baca .pilih { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.panel-baca .pilih button { min-width: 44px; min-height: 40px; padding: 8px 12px; color: var(--ink); background: var(--bg); border: 1px solid var(--field); }
.panel-baca .pilih button[aria-pressed="true"] { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.panel-baca .pilih button:disabled { opacity: .4; cursor: default; }
.panel-baca [data-nilai="serif"] { font-family: var(--serif); }
.panel-baca .bawaan { padding: 8px 12px; font-size: .88rem; color: var(--accent); background: transparent; border: 1px solid var(--accent); }
/* SERANG M5n (E74): di ponsel tombol Aa sesudah nav turun sendirian ke baris ketiga (320 px: kepala 78 -> 112 px).
   Tombol pindah ke baris merek; nav tetap di barisnya sendiri, rata kanan seperti sebelumnya. Batas 599 px:
   merek + nav + Aa baru muat satu baris mulai 600 px (terukur); di 481-599 px nav tadinya muat di baris merek.
   Dua baris memakai padding ringkas E61 */
@media (max-width: 599px) {
  button.atur { order: 1; margin-left: auto; }
  header.top nav { order: 2; flex-basis: 100%; justify-content: flex-end; }
  header.top .wrap { padding-top: 8px; padding-bottom: 8px; row-gap: 4px; }
}
/* SERANG M5n (E75): di mode warna paksa latar tombol diganti warna sistem, jadi tombol terpilih tampak sama
   dengan yang lain (Playwright forcedColors). Garis tepi sistem menandainya tanpa bergantung warna latar */
@media (forced-colors: active) {
  .panel-baca .pilih button[aria-pressed="true"] { outline: 3px solid Highlight; outline-offset: 2px; }
}

/* M6 edukasi awam (docs/spec-m6-edukasi-awam.md): blok E5, blok nol E4, peringatan E7, urai amar E3, glosarium E1 */
.batas-hasil { background: var(--accent-soft); border-radius: 8px; padding: 10px 14px; margin: 12px 0; font-size: .95rem; }
.batas-hasil p { margin: 0; }
.nol { border-left: 3px solid var(--accent); padding: 4px 0 4px 12px; margin: 8px 0; }
.nol h3 { margin: 0 0 4px; font-size: 1.05rem; }
.nol p, .cakupan-nol p, .pendek { margin: 4px 0; }
.cakupan-nol { font-size: .95rem; color: var(--muted); margin-bottom: 8px; }
details.serupa > summary { cursor: pointer; margin: 8px 0; }
.peringatan { font-size: .9rem; color: var(--muted); margin: 4px 0 6px; }
dl.urai { margin: 8px 0; font-size: .95rem; }
dl.urai dt { font-weight: 600; }
dl.urai dd { margin: 0 0 6px; }
.nomor-urai { font-size: .9rem; color: var(--muted); margin-top: -6px; }
details.glosarium { display: inline; }
details.glosarium > summary { cursor: pointer; text-decoration: underline dotted; }

/* M6b (docs/spec-m6-edukasi-awam.md): panduan membaca E2, blok bantuan hukum E6, penjelas E1 di luar label */
details.panduan { margin: 8px 0 12px; font-size: .95rem; }
details.panduan > summary { cursor: pointer; font-weight: 600; }
details.panduan p { margin: 6px 0; }
.bantuan { border-top: 2px solid var(--accent-soft); margin: 28px 0 8px; padding-top: 10px; font-size: .95rem; }
.bantuan p { margin: 4px 0; }
h2 + details.glosarium, h3 + details.glosarium, .nomor-urai + details.glosarium, .norma > details.glosarium { display: block; margin: 0 0 8px; font-size: .95rem; }