/* ══════════════════════════════════════════════════════════════════════
   app/brand.css — paket brand v1.1 untuk layar /app
   ══════════════════════════════════════════════════════════════════════
   Diangkat dari app/beranda.html (#476), yang menulis sendiri kenapa ia
   harus diangkat: "Kalau rancangan ini menurun ke 55 layar lain, keempatnya
   harus naik ke pedoman; kalau tidak, layar berikutnya akan menurunkan
   empat nilai lain yang mirip tapi tidak sama."

   Layar kedua itu daftar.html, dan ini kenaikannya. Isinya TIDAK diubah
   sebaris pun saat diangkat — yang berubah cuma tempatnya, dari satu
   <style> ke berkas yang dua layar tunjuk.

   DIMUAT SESUDAH jaring.css, dan itu wajib. Ia menimpa token, dan token
   yang datang lebih dulu kalah oleh urutan, bukan cuma oleh kekhususan.

   BUKAN untuk halaman pemasaran. index.html dan keempat halaman hukum
   berdiri sendiri dengan tokennya masing-masing; berkas ini menumpang di
   atas jaring.css, dan tanpa jaring.css ia setengah.
   ══════════════════════════════════════════════════════════════════════ */

/* ══ TOKEN ════════════════════════════════════════════════════════════
   Nilai brand ditulis SEKALI, dan memenangkan ketiga konteks jaring.css
   lewat kekhususan — bukan lewat tiga blok yang disalin.

   jaring.css menaruh palet gelapnya di `:root:not([data-theme="light"])`
   dan `:root[data-theme="dark"]`, dua-duanya berkekhususan 0,2,0. `:root`
   biasa berkekhususan 0,1,0 dan KALAH di tema gelap — jadi menimpa dengan
   `:root` saja menghasilkan layar setengah jadi yang lolos pemeriksaan
   terang. `:root:root:root` berkekhususan 0,3,0: satu blok, menang di
   terang, di gelap, dan di cetak.

   Menyalinnya jadi tiga blok akan bekerja sama baiknya HARI INI, dan
   menyimpang di suntingan ketiga. Itu persis penyakit yang jaring.css
   dibuat untuk menyembuhkan, jadi mengulanginya di sini akan aneh.     */
:root:root:root{
  /* inti — brand-guidelines.html §03 */
  --ground:#F9F4EA; --surface:#FFFDF8; --surface-2:#F0E9DC; --surface-3:#E7DECC;
  --line:#DED5C4; --line-strong:#C2B79F;
  --text:#171A17; --dim:#39423B; --mute:#5B655E;
  --accent:#C8551F; --accent-ink:#8E3A12; --accent-soft:#F7EEDB;

  /* Penanda tenant ikut palet brand. Violet #4A3C93 tidak pernah ada di
     paket brand, dan melepasnya tidak menghilangkan makna apa pun:
     jaring.css sendiri menulis bahwa BENTUK dan inisial yang menanggung
     pembedaan partai/kampanye, bukan warna. */
  --tenant-mark:#174C3C;

  /* Tindakan utama hijau, bukan terracotta (§06). */
  --btn-bg:#174C3C; --btn-fg:#FFFDF8; --btn-hover:#23624E;

  --ok:#174C3C; --ok-ink:#174C3C; --ok-soft:#E6EEDC;
  --warn:#6F521B; --warn-ink:#6F521B; --warn-soft:#F7EEDB;
  --bad:#9B251E; --bad-ink:#9B251E; --bad-soft:#FBE9E5;
  --idle:#5B655E; --idle-soft:#F0E9DC;
  --stage:#F9F4EA; --stage-ink:#5B655E; --stage-line:#DED5C4;
  --shadow:0 1px 2px rgba(23,26,23,.05), 0 10px 30px -14px rgba(23,26,23,.18);

  /* Huruf sistem, bukan IBM Plex (§04). */
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Bentuk: 6 tombol, 7 isian, 10 panel (§05). --r-halus tetap kecil —
     ia dipakai untuk sudut yang cuma menghaluskan aliasing. */
  --r-kotak:6px; --r-besar:10px;

  /* ── TURUNAN ────────────────────────────────────────────────────────
     Paket brand memberi tiap keadaan pasangan ISIAN + TEKS, tetapi tidak
     memberi warna RUSUK dan tidak memberi HOVER — dan layar kerja penuh
     keduanya. Empat nilai di bawah menutup itu untuk layar ini. Kalau
     rancangan ini menurun ke 55 layar lain, keempatnya harus naik ke
     pedoman; kalau tidak, layar berikutnya akan menurunkan empat nilai
     lain yang mirip tapi tidak sama. */
  --b-rusuk-tunggu:#E6D3AC;
  --b-rusuk-galat:#EEC9C1;
  --b-rusuk-ok:#BFD3AE;
  --b-baris-hover:#FDFAF2;

  /* Bidang gelap tunggal, dari homepage — bukan turunan baru. */
  /* Teks di atas pita Besok punya TOKEN SENDIRI, tidak meminjam --ground.
     Meminjamnya benar di terang — Paper di atas Night — dan terbalik di
     gelap: --ground jadi nyaris hitam, di atas bidang yang juga gelap.
     Terukur 1,36:1. Pinjaman yang kebetulan benar di satu tema adalah
     pinjaman yang pasti salah di tema berikutnya. */
  --b-malam:#132C23; --b-malam-ink:#F9F4EA;
  --b-malam-teks:#BAC8BD; --b-malam-rusuk:#35503F;
  --b-leaf:#CCE6B9; --b-leaf-ink:#153929; --b-sisa:#F1A679;
}

/* ══ PALET GELAP ══════════════════════════════════════════════════════
   Pedoman brand v1.1 tidak memuat satu pun warna gelap selain Night, jadi
   sampai sekarang layar ber-brand.css terang untuk SEMUA orang — termasuk
   yang perangkatnya minta gelap. Empat layar, dan bertambah.

   Yang di bawah ini TURUNAN, bukan palet kedua: tiap nilai lahir dari
   warna brand yang sama, digelapkan atau diterangkan sampai pasangannya
   memenuhi rasio §03. Karakternya sengaja dipertahankan — hijau kehutanan
   dan hangat, bukan abu netral — supaya layar gelap masih terbaca sebagai
   JARING dan bukan sebagai aplikasi lain.

   TIGA BLOK, BUKAN SATU, dan itu tuntutan jaring.css: ia menaruh paletnya
   di `:root:not([data-theme="light"])` dan `:root[data-theme="dark"]`
   (0,2,0). Menambahkan satu `:root` lagi di depan membuat blok di sini
   menang di keduanya tanpa mengubah artinya.

   KEDUANYA DIBATASI `screen`, seperti di jaring.css. `prefers-color-scheme`
   tidak terbatas pada layar, jadi tanpa batas itu mencetak dari mesin
   bertema gelap menghasilkan teks terang di atas kertas putih.

   NILAI DITULIS DUA KALI, dan itu disengaja. Satu untuk tema sistem, satu
   untuk pengalih manual. Menyatukannya lewat selektor gabungan bisa, tapi
   satu salah ketik di sana mematikan kedua jalur sekaligus — dan tidak ada
   yang berbunyi. Uji kontras di alat/uji-gelap.mjs membaca KEDUA blok dan
   menuntut keduanya sama persis, jadi salinan yang menyimpang merah.     */
@media screen and (prefers-color-scheme: dark){
  :root:root:root:not([data-theme="light"]){
    --ground:#101A14; --surface:#17251D; --surface-2:#1F2F26; --surface-3:#283A30;
    --line:#2E4137; --line-strong:#4A6354;
    --text:#EDE8DC; --dim:#C6D2C7; --mute:#9FB0A4;
    --accent:#E8834D; --accent-ink:#F2A87A; --accent-soft:#2E1D14;
    --tenant-mark:#A9CDB4;
    --btn-bg:#CCE6B9; --btn-fg:#10251A; --btn-hover:#DCEFCC;
    --ok:#A9CDB4; --ok-ink:#BEDCC6; --ok-soft:#17301F;
    --warn:#E0BC78; --warn-ink:#E9CB93; --warn-soft:#2B2214;
    --bad:#EB9A93; --bad-ink:#F2B3AD; --bad-soft:#2F1917;
    --idle:#9FB0A4; --idle-soft:#1F2F26;
    --stage:#0B120E; --stage-ink:#9FB0A4; --stage-line:#22302A;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -14px rgba(0,0,0,.85);
    /* Rusuk chip dinaikkan dari turunan pertama (#5A4A26/#63322C/#3A5A40):
       terukur 1,5–1,9 terhadap permukaannya, terlalu lemah untuk garis yang
       ikut menandai keadaan. */
    /* Nilainya DIHITUNG, bukan ditebak: dinaikkan sepanjang skala terang
       sampai rasio terhadap permukaan panel (#17251D) melewati 3:1 —
       ambang WCAG 1.4.11 untuk batas komponen yang ikut menandai keadaan.
       Terukur 3,01 / 3,09 / 3,11. */
    --b-rusuk-tunggu:#7E6938; --b-rusuk-galat:#9C5C53; --b-rusuk-ok:#4E7757;
    --b-baris-hover:#1C2C23;
    /* Pita Besok tidak bisa jadi "bidang gelap" di halaman yang sudah
       gelap — ia akan terbaca sebagai lubang. Perannya dibalik: bidang
       yang SEDIKIT LEBIH TERANG dari permukaan, dengan rusuk berdaun. */
    --b-malam:#223529; --b-malam-ink:#EDE8DC;
    --b-malam-teks:#BCCDBF; --b-malam-rusuk:#3D5446;
    --b-leaf:#CCE6B9; --b-leaf-ink:#10251A; --b-sisa:#F2A87A;
  }
}
@media screen{
  :root:root:root[data-theme="dark"]{
    --ground:#101A14; --surface:#17251D; --surface-2:#1F2F26; --surface-3:#283A30;
    --line:#2E4137; --line-strong:#4A6354;
    --text:#EDE8DC; --dim:#C6D2C7; --mute:#9FB0A4;
    --accent:#E8834D; --accent-ink:#F2A87A; --accent-soft:#2E1D14;
    --tenant-mark:#A9CDB4;
    --btn-bg:#CCE6B9; --btn-fg:#10251A; --btn-hover:#DCEFCC;
    --ok:#A9CDB4; --ok-ink:#BEDCC6; --ok-soft:#17301F;
    --warn:#E0BC78; --warn-ink:#E9CB93; --warn-soft:#2B2214;
    --bad:#EB9A93; --bad-ink:#F2B3AD; --bad-soft:#2F1917;
    --idle:#9FB0A4; --idle-soft:#1F2F26;
    --stage:#0B120E; --stage-ink:#9FB0A4; --stage-line:#22302A;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -14px rgba(0,0,0,.85);
    /* Rusuk chip dinaikkan dari turunan pertama (#5A4A26/#63322C/#3A5A40):
       terukur 1,5–1,9 terhadap permukaannya, terlalu lemah untuk garis yang
       ikut menandai keadaan. */
    /* Nilainya DIHITUNG, bukan ditebak: dinaikkan sepanjang skala terang
       sampai rasio terhadap permukaan panel (#17251D) melewati 3:1 —
       ambang WCAG 1.4.11 untuk batas komponen yang ikut menandai keadaan.
       Terukur 3,01 / 3,09 / 3,11. */
    --b-rusuk-tunggu:#7E6938; --b-rusuk-galat:#9C5C53; --b-rusuk-ok:#4E7757;
    --b-baris-hover:#1C2C23;
    --b-malam:#223529; --b-malam-ink:#EDE8DC;
    --b-malam-teks:#BCCDBF; --b-malam-rusuk:#3D5446;
    --b-leaf:#CCE6B9; --b-leaf-ink:#10251A; --b-sisa:#F2A87A;
  }
}

/* ══ KERANGKA APLIKASI ════════════════════════════════════════════════
   Bilah atas dan bilah samping dipakai SETIAP layar /app, jadi gayanya
   tinggal di sini — bukan di <style> salah satu layar.

   Ia sempat tinggal di beranda.html saja, dan akibatnya terlihat begitu
   layar kedua menaut berkas ini: undang.html mendapat WARNA brand di atas
   BENTUK lama — wordmark masih mono berjarak lebar, bilah samping masih
   putih, butir menu masih 40px tanpa rupa "sedang di sini" yang hijau.
   Setengah pindah lebih buruk daripada belum pindah: ia lolos pemeriksaan
   sepintas justru karena warnanya sudah benar.

   Yang TIDAK ikut naik: gaya khas beranda — kepala halaman, meter, panel,
   baris kerja, pita Besok. Itu memang milik satu layar.               */
/* ══ TEKS BACAAN ══════════════════════════════════════════════════════
   §04 meminta isi utama 16–18 px; jaring.css menulis 14. Keputusan
   pemilik 25 Sep 2026: teks bacaan 16 px, TABEL PADAT TETAP 14 px — kolom
   angka yang melebar dua piksel per sel memaksa tabel menggulir di layar
   yang hari ini muat. Yang punya ukurannya sendiri (pil, keterangan kecil,
   isian) tidak ikut; yang naik hanya yang mewarisi ukuran dari isi layar.

   Isi layar datang dalam tiga bentuk: `.isi` di layar meja, `.scr` di
   bingkai telepon lapangan, dan `main#isi` tanpa kelas di Rute pemasangan
   dan Audit — keduanya sengaja tidak memakai `.isi`, yang membawa tata
   letak desktop. Layar lapangan dibaca sambil berdiri; di sanalah 16 px
   paling berarti. */
.isi, .scr, main#isi{font-size:var(--t-baca)}
.isi table, .scr table, main#isi table{font-size:var(--t-badan)}

/* ══ BILAH ATAS ═══════════════════════════════════════════════════════
   .merek di jaring.css mono dan berjarak lebar. Wordmark brand berbeda:
   huruf sistem bobot 900, dan ".AI" jingga. §02 menetapkan minimal 18px
   untuk digital dan 21px pada navigasi desktop. */
.merek{font:900 21px/1 var(--font); letter-spacing:.02em}
.merek i{font-style:normal; color:var(--accent)}
.top{min-height:66px; gap:var(--s-5)}
.konteks{font-family:var(--mono); font-size:var(--t-kecil); font-weight:var(--w-medium);
  letter-spacing:.04em; text-transform:none; background:var(--surface-2);
  border:0; border-radius:4px; padding:6px 10px}
.penanda-tenant{padding-left:var(--s-5); border-left:1px solid var(--line)}
.pt-nama{font-weight:var(--w-tebal)}
/* Pengalih meja dalam bahasa brand: huruf sistem, bukan mono berjarak
   lebar, dan meja yang sedang dibuka hijau seperti butir menu yang aktif
   — satu warna untuk "Anda di sini", di kepala maupun di bilah samping. */
/* Lingkup wilayah sekeluarga dengan pil siklus di sebelahnya. */
.kpl-lingkup{font-size:var(--t-kecil); font-weight:var(--w-medium); letter-spacing:.04em;
  text-transform:none; border:1px dashed var(--line-strong); border-radius:4px; padding:5px 10px}
.ruang{border-color:var(--line); border-radius:var(--r-kotak)}
.ruang a{font-family:var(--font); font-size:var(--t-dua); font-weight:var(--w-medium);
  letter-spacing:.01em; text-transform:none; color:var(--dim)}
.ruang a[aria-current="true"]{background:var(--ok-soft); color:var(--ok-ink);
  box-shadow:inset 0 -3px 0 0 var(--ok)}

/* ══ BILAH SAMPING ════════════════════════════════════════════════════ */
.sisi{background:var(--surface-2)}
.sisi p.hd{padding:0 10px}
/* 44px, bukan 40: butir menu di laci ponsel adalah sasaran jari, dan lembar
   ini dimuat SESUDAH jaring.css — 40px di sini menang atas lantai sentuh di
   sana tanpa kelihatan, dan itulah yang terjadi sampai 18 Sep 2026 (UX-07). */
.menu a{min-height:44px; display:flex; align-items:center; color:var(--dim);
  font-size:14.5px}
.menu a:hover{background:var(--surface-3)}
.menu a[aria-current="page"]{background:var(--ok-soft); color:var(--ok-ink);
  box-shadow:inset 3px 0 0 0 var(--ok)}
/* Ruang Sinyal tetap ditandai BENTUK, tidak pernah hijau (C.6).

   `background:none` DISEBUT, dan itu bukan kelebihan. jaring.css memberi
   butir sinyal `background:var(--surface-3)` supaya ia terbedakan dari
   butir Ruang Operasi yang latarnya polos. Di sini butir biasa SUDAH
   berlatar polos di atas Wash, jadi latar itu membuat kedua butir sinyal
   tampak sedang terpilih — dua butir "sedang di sini" di satu bilah.
   Ketahuan di localhost, bukan di mockup: mockup tidak memuat jaring.css
   sama sekali, jadi aturan yang ditimpa tidak pernah ikut tergambar. */
.menu a.sinyal{background:none; box-shadow:inset 3px 0 0 0 var(--line-strong);
  color:var(--dim); font-weight:var(--w-biasa)}
.menu a.sinyal:hover{background:var(--surface-3)}
/* …tapi butir sinyal yang SEDANG dibuka tetap wajib tertandai. Tanpa aturan
   ini `background:none` di atas ikut menghapus tanda "sedang di sini": di
   Meja Laporan, Bacaan lapangan yang sedang dibuka tampak persis seperti
   saat tidak dibuka. Tandanya sama dengan butir kini di Meja Sinyal
   (jaring.css, `.sisi.sinyal .menu a[aria-current]`) — netral, tidak hijau. */
.menu a.sinyal[aria-current="page"]{background:var(--surface-3); color:var(--text);
  font-weight:var(--w-tebal)}

/* ══ REL OPSI D ═══════════════════════════════════════════════════════
   Keputusan pemilik 30 Sep 2026: bilah samping Lima Meja diganti REL —
   beberapa butir utama per meja, sisanya di "Semua alat" (alat/meja.mjs
   → alat/rakit-menu.mjs). Rupanya dari mockup_opsi_d.html (#932), dengan
   tiga bentuk:

     ≥900px    rel berlabel di kolom kiri; "Semua alat" terbuka di dalamnya.
     561–899   rel ikon 64 px; "Semua alat" jadi panel di kanan rel.
     ≤560px    bilah bawah; "Semua alat" jadi lembar di atas bilah.

   Label di bentuk ikon disembunyikan dengan POTONGAN (seperti `.sr`),
   bukan display:none: display:none ikut membuang nama aksesibel tautannya,
   dan pembaca layar tinggal mendengar "tautan, tautan, tautan".

   `.menu` dan `.mj-gol` lama tetap dipakai, di dalam "Semua alat" dan di
   bilah tulisan tangan Data yang diterima (TIDAK_DIRAKIT, masih berlaci). */
:root{--rel-bawah:0px}

/* `.app` memotong luapannya dengan `overflow:hidden` (jaring.css, kontrak
   T-06) — dan justru itu membuatnya WADAH GULIR bagi `.rel-isi` yang sticky:
   rel menempel pada `.app` yang tidak pernah menggulir, jadi tidak pernah
   menempel sama sekali (tinjauan PR rel, 30 Sep 2026). `clip` memotong sama
   persis — termasuk turunan berposisi absolut — tanpa jadi wadah gulir, jadi
   rel menempel di puncak jendela. Peramban tanpa `clip` membuang aturan ini
   dan kembali ke `hidden`: rel ikut menggulir seperti bilah lama. */
.app:has(> .badan > .sisi.rel){overflow:clip}

.sisi.rel{padding:0}
.rel-isi{position:sticky; top:0; max-height:100vh; overflow:auto;
  display:flex; flex-direction:column; gap:2px; padding:var(--s-5) var(--s-4)}
.rel-utama{display:flex; flex-direction:column; gap:2px}
.rel-butir{display:flex; align-items:center; gap:10px; width:100%; min-height:44px;
  padding:0 10px; border-radius:var(--r-kotak); color:var(--dim);
  font-size:14.5px; font-weight:var(--w-medium); line-height:1.25; text-decoration:none}
a.rel-butir:hover, summary.rel-butir:hover{background:var(--surface-3); color:var(--text)}
a.rel-butir[aria-current="page"]{background:var(--ok-soft); color:var(--ok-ink);
  font-weight:var(--w-tebal); box-shadow:inset 3px 0 0 0 var(--ok)}
/* Jalur sinyal ditandai BENTUK, tidak pernah hijau (C.6) — seperti
   `.menu a.sinyal` di atas: garis netral, dan butir yang sedang dibuka
   tetap tertandai. */
a.rel-butir.rel-sinyal{box-shadow:inset 3px 0 0 0 var(--line-strong)}
.sisi.sinyal a.rel-butir[aria-current="page"],
a.rel-butir.rel-sinyal[aria-current="page"]{background:var(--surface-3); color:var(--text);
  box-shadow:inset 3px 0 0 0 var(--line-strong)}
/* "Segera": halamannya belum dibangun (Fase 2–3). Teks, bukan tautan. */
.rel-segera{color:var(--mute); cursor:default}
.rel-segera small{margin-left:auto; padding:2px 6px; border:1px solid var(--line);
  border-radius:3px; font:var(--w-tebal) var(--t-chip)/1.2 var(--mono);
  letter-spacing:.06em; text-transform:uppercase; color:var(--mute)}
.rel-alat{margin-top:var(--s-3); padding-top:var(--s-3); border-top:1px solid var(--line)}
summary.rel-butir{cursor:pointer; list-style:none}
summary.rel-butir::-webkit-details-marker{display:none}
.rel-chev{margin-left:auto; transition:transform .15s}
.rel-alat[open] > summary .rel-chev{transform:rotate(180deg)}
/* Layar yang sedang dibuka ada di dalam "Semua alat": ringkasannya ikut
   bertanda, supaya orang tahu di bagian mana ia berada walau tertutup. */
.rel-alat:has(a[aria-current="page"]) > summary{color:var(--ok-ink); font-weight:var(--w-tebal)}
.rel-alat-isi{padding:0 0 var(--s-3)}
/* Ganti nama tujuh layar (keputusan pemilik 30 Sep 2026): nama lamanya
   tertulis kecil selama masa pindah, dari `data-dulu` — BUKAN teks tautan,
   supaya ⌘K, uji, dan judul membaca nama barunya saja. */
.rel-alat-isi .menu a[data-dulu]{flex-direction:column; align-items:flex-start; justify-content:center; gap:1px}
.rel-alat-isi .menu a[data-dulu]::after{content:"dulu “" attr(data-dulu) "”"; font-size:var(--t-kecil);
  font-weight:var(--w-biasa); color:var(--mute)}

/* ── 561–899 px: rel ikon ─────────────────────────────────────────────
   Kolom 64 px dengan bidang bernama yang sama dengan desktop (jaring.css,
   "sisi pita" / "sisi isi"): tanpa itu pita yang tampil mengambil baris 1
   kolom 2 dan #isi jatuh ke jalur rel (alat/uji-pita-kolom-browser.mjs).
   Panel "Semua alat" berposisi TETAP di kanan rel: `.app` memotong
   luapannya, dan di halaman pendek panel absolut terpotong di kakinya. */
@media (min-width:561px) and (max-width:899px){
  /* BUKAN di mode lembar. Bingkai lembar di Beranda selalu 561–899 px (66vw,
     paling lebar 820), dan di sana relnya tersembunyi (jaring.css) — tanpa
     `:not(.dalam-lembar)` aturan ini (0,4,0) mengalahkan kolom tunggal
     `html.dalam-lembar .badan` (0,2,1) dan #isi mulai 64 px dari kiri, di
     tiap layar yang dibuka di lembar (alat/uji-lembar-browser.mjs). */
  :root:not(.dalam-lembar) .badan:has(> .sisi.rel){grid-template-columns:64px minmax(0,1fr);
    grid-template-rows:auto 1fr; grid-template-areas:"sisi pita" "sisi isi"}
  :root:not(.dalam-lembar) .badan:has(> .sisi.rel) > .sisi{grid-area:sisi}
  :root:not(.dalam-lembar) .badan:has(> .sisi.rel) > .pita-atas{grid-area:pita}
  :root:not(.dalam-lembar) .badan:has(> .sisi.rel) > main{grid-area:isi}
  .sisi.rel{border-right:1px solid var(--line); border-bottom:0}
  /* z-index 20: `.rel-isi` yang sticky membuat konteks tumpukan sendiri, dan
     panel "Semua alat" di dalamnya (z 60) hanya berarti DI DALAM konteks itu.
     Tanpa ini tabel dan sel sticky di #isi (z 1–10) tergambar di atas panel
     dan menelan kliknya. 20: di atas isi layar, di bawah pemilih konteks
     kepala (30), tirai (40), lembar (65), dan palet (70). */
  .sisi.rel .rel-isi{padding:var(--s-4) var(--s-3); align-items:center; z-index:20}
  .sisi.rel p.hd, .rel-butir .tx, .rel-segera small, .rel-chev{position:absolute; width:1px; height:1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .rel-butir{width:48px; height:48px; min-height:48px; padding:0; justify-content:center}
  /* Tanpa chip "segera" di bentuk ini, butir yang belum ada dibedakan
     lewat ikon yang pudar. Yang dipudarkan IKONNYA saja: teks tetap
     berkontras penuh (--mute), sebab labelnya masih dibaca. */
  .rel-segera .b-ikon{opacity:.45}
  .rel-alat{margin-top:var(--s-2); padding-top:var(--s-2)}
  .rel-alat-isi{position:fixed; top:var(--s-4); bottom:var(--s-4); z-index:60;
    left:calc(var(--s-8) / 2 + 73px); width:min(320px, calc(100vw - var(--s-8) / 2 - 73px - var(--s-4)));
    overflow:auto; padding:var(--s-3) var(--s-4) var(--s-5); background:var(--surface);
    border:1px solid var(--line-strong); border-radius:var(--r-besar); box-shadow:var(--shadow)}
}

/* ── ≤560 px: bilah bawah ─────────────────────────────────────────────
   Menggantikan laci ponsel (app/akun.js pasangLaci tidak memasangnya di
   layar ber-rel). `--rel-bawah` = tinggi bilah: kaki `.app` dan bilah aksi
   yang menempel di bawah (Meja bayar) duduk di atasnya. Di dalam lembar
   (html.dalam-lembar) rel tersembunyi, jadi tingginya nol. */
@media (max-width:560px){
  :root:not(.dalam-lembar):has(.sisi.rel){--rel-bawah:calc(62px + env(safe-area-inset-bottom))}
  .app:has(.sisi.rel){margin-bottom:calc(var(--rel-bawah) + var(--s-5))}
  .sisi.rel{position:fixed; left:0; right:0; bottom:0; z-index:40; padding:0; border:0;
    border-top:1px solid var(--line-strong); background:var(--surface)}
  .sisi.rel .rel-isi{position:static; max-height:none; overflow:visible; flex-direction:row;
    align-items:stretch; gap:2px; padding:4px 4px calc(4px + env(safe-area-inset-bottom))}
  .sisi.rel p.hd, .rel-segera small, .rel-chev{position:absolute; width:1px; height:1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .rel-utama{display:contents}
  .rel-alat{flex:1 1 0; min-width:0; margin:0; padding:0; border:0}
  .rel-butir{flex:1 1 0; min-width:0; width:auto; min-height:54px; flex-direction:column;
    justify-content:center; gap:3px; padding:4px 2px; text-align:center}
  .rel-alat > summary.rel-butir{height:100%}
  .rel-segera .b-ikon{opacity:.45}
  .rel-butir .tx{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; overflow-wrap:anywhere; font-size:10.5px; line-height:1.15}
  a.rel-butir[aria-current="page"]{box-shadow:inset 0 3px 0 0 var(--ok)}
  a.rel-butir.rel-sinyal{box-shadow:none}
  .sisi.sinyal a.rel-butir[aria-current="page"],
  a.rel-butir.rel-sinyal[aria-current="page"]{box-shadow:inset 0 3px 0 0 var(--line-strong)}
  .rel-alat-isi{position:fixed; left:0; right:0; bottom:var(--rel-bawah); z-index:39;
    max-height:70vh; overflow:auto; padding:var(--s-3) var(--s-5) var(--s-5);
    background:var(--surface); border-top:1px solid var(--line-strong); box-shadow:var(--shadow)}
}

/* Kertas tidak punya navigasi: rel tidak dicetak, dan isinya selebar
   halaman — tanpa kolom rel yang kosong. */
@media print{
  .sisi.rel{display:none !important}
  .badan:has(> .sisi.rel){display:block}
}