/* ══════════════════════════════════════════════════════════════
   RAI · lapis sesi bersama — Toolkit Resiliensi Integratif
   toolbox.pelindungandata.id
   Menyediakan: bilah sesi, navigasi terkunci, dan gaya cetak/PDF.
   Mewarisi token warna dari tiap halaman (--ground, --ink, dst).
   ══════════════════════════════════════════════════════════════ */

/* ── navigasi: disembunyikan di halaman peserta sampai dibuka ── */
body.rai-locked .tkbar nav{ display:none !important; }
.tkbar .in{ flex-wrap:wrap; }
.tkbar nav{ min-width:0; max-width:100%; }
.tkbar nav .ngroup{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:.1rem;
  max-width:100%; padding:.1rem .28rem;
  border:1px solid var(--line,#2A3143); border-radius:9px; background:rgba(255,255,255,.02); }
.tkbar nav .ngroup > .glab{ font-family:var(--f-mono,monospace); font-size:.58rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3,#727B90); padding:0 .25rem 0 .1rem; }
.tkbar nav .ngroup > a{ padding:.32rem .45rem; }
.rai-unlock{ font-family:var(--f-mono,monospace); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3,#727B90); background:transparent; border:1px solid var(--line,#2A3143);
  border-radius:8px; padding:.3rem .5rem; margin-left:auto; opacity:.35; cursor:pointer; }
.rai-unlock:hover{ opacity:1; color:var(--ink,#F2F3F7); }
body:not(.rai-locked) .rai-unlock{ margin-left:.4rem; opacity:.5; }

/* ── bilah sesi ── */
.rai-bar{ position:fixed; left:0; right:0; bottom:0; z-index:900;
  background:rgba(11,13,18,.94); backdrop-filter:blur(12px);
  border-top:1px solid var(--line,#2A3143);
  font-family:var(--f-mono,monospace); color:var(--ink-2,#AEB6C6); }
.rai-bar .rin{ max-width:1200px; margin:0 auto; padding:.5rem clamp(.7rem,3vw,1.6rem);
  display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.rai-bar .rstat{ display:flex; align-items:center; gap:.45rem; font-size:.66rem; letter-spacing:.06em;
  text-transform:uppercase; min-width:0; }
.rai-bar .rdot{ width:.5rem; height:.5rem; border-radius:50%; background:var(--ok,#5FBE93); flex:none;
  box-shadow:0 0 0 3px rgba(95,190,147,.16); }
.rai-bar.warn .rdot{ background:var(--warn,#E0A54F); box-shadow:0 0 0 3px rgba(224,165,79,.16); }
.rai-bar .rname{ background:transparent; border:1px solid transparent;
  border-bottom:1px dashed var(--line-2,#3A4358); border-radius:7px 7px 0 0;
  font:inherit; font-size:.68rem; letter-spacing:.02em; text-transform:none; color:var(--ink,#F2F3F7);
  padding:.2rem .4rem; width:20ch; min-width:8ch; max-width:34vw; }
.rai-bar .rname::placeholder{ color:var(--ink-3,#727B90); }
.rai-bar .rname:hover,.rai-bar .rname:focus{ border-color:var(--line-2,#3A4358); background:var(--surf,#151924); outline:none; }
.rai-bar .rsep{ color:var(--ink-3,#727B90); }
.rai-bar .racts{ display:flex; gap:.35rem; align-items:center; margin-left:auto; flex-wrap:wrap; }
.rai-btn{ font-family:inherit; font-size:.66rem; letter-spacing:.06em; text-transform:uppercase;
  background:var(--surf-2,#1B2130); color:var(--ink,#F2F3F7);
  border:1px solid var(--line-2,#3A4358); border-radius:9px; padding:.42rem .68rem; cursor:pointer; white-space:nowrap; }
.rai-btn:hover{ background:var(--surf-3,#232A3B); border-color:var(--ink-3,#727B90); }
.rai-btn.hi{ background:var(--ger,#EF5B52); border-color:var(--ger,#EF5B52); color:#fff; }
.rai-btn.hi:hover{ background:#ff6a60; }
.rai-btn.ghost{ background:transparent; opacity:.62; }
.rai-btn.ghost:hover{ opacity:1; background:var(--surf-2,#1B2130); }
.rai-btn:focus-visible{ outline:2.5px solid var(--hi,#F5D65C); outline-offset:2px; }

/* menu unduh */
.rai-wrap{ position:relative; }
.rai-menu{ position:absolute; right:0; bottom:calc(100% + .45rem); min-width:16rem;
  background:var(--surf,#151924); border:1px solid var(--line-2,#3A4358); border-radius:12px;
  padding:.35rem; box-shadow:0 18px 44px rgba(0,0,0,.55); z-index:920; }
.rai-menu[hidden]{ display:none; }
.rai-menu button{ display:block; width:100%; text-align:left; background:transparent; border:0;
  color:var(--ink,#F2F3F7); font-family:inherit; font-size:.7rem; letter-spacing:.02em;
  padding:.52rem .6rem; border-radius:8px; cursor:pointer; }
.rai-menu button:hover{ background:var(--surf-2,#1B2130); }
.rai-menu button small{ display:block; font-size:.62rem; color:var(--ink-3,#727B90);
  letter-spacing:0; text-transform:none; margin-top:.1rem; }
.rai-menu hr{ border:0; border-top:1px solid var(--line,#2A3143); margin:.3rem .2rem; }

/* toast */
.rai-toast{ position:fixed; left:50%; bottom:4.6rem; transform:translateX(-50%) translateY(.5rem);
  z-index:950; background:var(--surf-3,#232A3B); color:var(--ink,#F2F3F7);
  border:1px solid var(--line-2,#3A4358); border-left:3px solid var(--ok,#5FBE93); border-radius:10px;
  padding:.6rem .95rem; font-family:var(--f-mono,monospace); font-size:.7rem; max-width:min(92vw,34rem);
  opacity:0; pointer-events:none; transition:opacity .22s ease, transform .22s ease; }
.rai-toast.on{ opacity:1; transform:translateX(-50%) translateY(0); }
.rai-toast.bad{ border-left-color:var(--bad,#EF6B5E); }
@media (prefers-reduced-motion:reduce){ .rai-toast{ transition:none; } }

/* kotak salin darurat (bila unduhan diblokir peramban) */
.rai-fallback{ position:fixed; inset:auto 0 0 0; z-index:940; background:var(--ground-2,#0F1218);
  border-top:1px solid var(--line-2,#3A4358); padding:.8rem clamp(.7rem,3vw,1.6rem); }
.rai-fallback[hidden]{ display:none; }
.rai-fallback p{ margin:0 0 .4rem; font-family:var(--f-mono,monospace); font-size:.66rem;
  text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3,#727B90); }
.rai-fallback textarea{ width:100%; min-height:9rem; background:var(--surf,#151924); color:var(--ink,#F2F3F7);
  border:1px solid var(--line-2,#3A4358); border-radius:10px; padding:.7rem;
  font-family:var(--f-mono,monospace); font-size:.72rem; line-height:1.5; }

body.rai-hasbar{ padding-bottom:4.2rem; }
@media (max-width:720px){
  /* Di ponsel menu unduh diangkurkan ke lebar layar, bukan ke tombolnya —
     kalau tidak, ia meluber keluar tepi kiri. Nilai bottom diisi oleh rai.js
     sesuai tinggi bilah yang sedang tampil. */
  .rai-menu{ position:fixed; left:.6rem; right:.6rem; min-width:0;
    max-height:min(56vh,22rem); overflow-y:auto; }
  .tkbar nav{ margin-left:0; width:100%; }
  .tkbar nav .ngroup > .glab{ font-size:.54rem; }
  .rai-bar .rin{ padding:.45rem .7rem; }
  .rai-bar .rstat{ font-size:.6rem; width:100%; }
  .rai-bar .racts{ margin-left:0; width:100%; }
  .rai-btn{ font-size:.62rem; padding:.42rem .55rem; }
  body.rai-hasbar{ padding-bottom:6.4rem; }
}

/* ── host cetak / PDF ── */
#raiPrintHost{ display:none; }

@media print{
  @page{ margin:16mm 14mm; }
  html,body{ background:#fff !important; color:#111 !important; overflow:visible !important; height:auto !important; }
  body{ padding-bottom:0 !important; }
  body::before,body::after{ display:none !important; }
  .tkbar,.rai-bar,.rai-toast,.rai-menu,.rai-fallback,.rai-unlock,
  .facbtn,.pbar,.dchrome,.progress-steps,.phasedots,.stepnav,.nav{ display:none !important; }
  body.rai-printing main,body.rai-printing .deck{ display:none !important; }
  body.rai-printing #raiPrintHost{ display:block !important; }

  /* dokumen cetak generik (halaman tanpa perancang cetak sendiri) */
  .rai-doc{ max-width:100%; color:#111; font-family:var(--f-body,sans-serif); }
  /* Animasi masuk (mis. .tpl.on, .step.on) disampel pada frame pertama saat
     mencetak — opacity:0 membuat halaman tampak kosong. Matikan semuanya. */
  .rai-doc,.rai-doc *,.rai-doc *::before,.rai-doc *::after{
    animation:none !important; transition:none !important;
    opacity:1 !important; transform:none !important; filter:none !important; }
  .rai-doc p,.rai-doc li,.rai-doc h1,.rai-doc h2,.rai-doc h3,.rai-doc h4,.rai-doc h5,
  .rai-doc div,.rai-doc span,.rai-doc strong,.rai-doc b,.rai-doc em,.rai-doc i,
  .rai-doc td,.rai-doc th,.rai-doc figcaption,.rai-doc small,.rai-doc a,.rai-doc ol,.rai-doc ul,
  .rai-doc section,.rai-doc article,.rai-doc header,.rai-doc footer{ color:#111 !important; }
  /* Latar gelap dari tema layar dihapus di kertas; kalau tidak, label seperti
     chip “DIGITAL” jadi tulisan gelap di atas blok gelap. Blok yang memang
     perlu diberi warna (isian, catatan, kepala tabel, sorotan) dikecualikan. */
  .rai-doc *:not(.rfield):not(.rnote):not(th):not(mark):not(.pdec):not(.pstake):not(.pfasil):not(.ppresent){
    background-color:transparent !important; background-image:none !important;
    box-shadow:none !important; }
  .rai-doc a{ text-decoration:none; }
  .rai-doc svg{ max-width:92mm; width:100%; height:auto; display:block; margin:0 auto;
    overflow:visible; }
  .rai-doc .rdh{ border-bottom:2px solid #222; padding-bottom:6pt; margin-bottom:10pt; }
  .rai-doc .rdt{ font-family:var(--f-disp,sans-serif); font-size:21pt; font-weight:800; margin:0 0 2pt; line-height:1.1; }
  .rai-doc .rdm{ font-family:var(--f-mono,monospace); font-size:7.5pt; letter-spacing:.1em;
    text-transform:uppercase; color:#555 !important; margin:0; }
  .rai-doc h1{ font-size:16pt; margin:12pt 0 4pt; }
  .rai-doc h2{ font-size:13pt; margin:11pt 0 4pt; break-after:avoid; page-break-after:avoid; }
  .rai-doc h3{ font-size:11pt; margin:9pt 0 3pt; break-after:avoid; page-break-after:avoid; }
  .rai-doc h4{ font-size:10pt; margin:8pt 0 2pt; }
  .rai-doc p,.rai-doc li{ font-size:9.5pt; line-height:1.45; max-width:100%; }
  .rai-doc p{ margin:0 0 4pt; }
  .rai-doc ul,.rai-doc ol{ margin:0 0 5pt 14pt; padding:0; }
  .rai-doc .rsec{ break-inside:avoid-page; page-break-inside:avoid; border-top:1px solid #ccc;
    padding-top:7pt; margin-top:10pt; }
  .rai-doc .rfield{ border:1px solid #999; border-radius:4px; padding:5pt 7pt; margin:4pt 0;
    background:#f7f7f7 !important; break-inside:avoid; page-break-inside:avoid; }
  .rai-doc .rfq{ font-weight:700; font-size:9pt; margin:0 0 2pt; }
  .rai-doc .rfa{ font-size:9.5pt; white-space:pre-wrap; min-height:12pt; margin:0; }
  .rai-doc .rblank{ color:#999 !important; font-style:italic; }
  .rai-doc .rkv{ font-size:9pt; margin:0 0 2pt; }
  .rai-doc .rkv b{ font-weight:700; }
  .rai-doc table{ width:100%; max-width:100%; table-layout:fixed; border-collapse:collapse;
    font-size:8.5pt; margin:4pt 0; break-inside:auto; page-break-inside:auto; }
  .rai-doc thead{ display:table-header-group; }
  .rai-doc tr{ break-inside:avoid; page-break-inside:avoid; }
  .rai-doc .rflow,.rai-doc .rflow > div{ break-inside:auto; page-break-inside:auto; }
  /* grid dua kolom di layar jadi satu aliran di kertas — halaman terisi penuh */
  .rai-doc .res-grid,.rai-doc .grid,.rai-doc .g3{ display:block !important; }
  .rai-doc .finding,.rai-doc .panel,.rai-doc .card,.rai-doc figure,
  .rai-doc .qcard,.rai-doc .dimbar{ break-inside:avoid; page-break-inside:avoid; }
  /* teks di dalam SVG dibuat terbaca di kertas putih */
  .rai-doc svg text{ fill:#111; }
  .rai-doc svg text[fill="#F2F3F7"],.rai-doc svg text[fill="#AEB6C6"]{ fill:#111 !important; }
  .rai-doc svg text[fill="#3FBFD0"]{ fill:#0C6675 !important; }
  .rai-doc svg text[fill="#EE9A4D"]{ fill:#8A4C06 !important; }
  .rai-doc svg text[fill="#C08AE6"]{ fill:#5E2F97 !important; }
  .rai-doc svg text[fill="#EF5B52"]{ fill:#A81C13 !important; }
  .rai-doc th,.rai-doc td{ border:1px solid #aaa; padding:3pt 5pt; text-align:left;
    vertical-align:top; overflow-wrap:break-word; word-break:normal; }
  .rai-doc th{ width:58%; }
  .rai-doc th{ background:#eee !important; font-weight:700; }
  .rai-doc .rnote{ font-size:8.5pt; line-height:1.4; background:#fff7d6 !important;
    border-left:2px solid #d9a800; padding:4pt 7pt; margin:4pt 0; }
  .rai-doc .rfoot{ font-size:7.5pt; color:#666 !important; margin-top:12pt;
    border-top:1px solid #ccc; padding-top:5pt; }
  .rai-doc pre{ font-family:var(--f-mono,monospace); font-size:8pt; line-height:1.42;
    white-space:pre-wrap; word-break:break-word; margin:4pt 0; color:#111 !important; }
  /* Wadah bergulir & pembatas tinggi dinetralkan: tanpa ini Chrome memotong
     isinya di kertas dan menyisakan halaman kosong. */
  .rai-doc [data-rai-ovf],.rai-doc .tscroll,.rai-doc .figbox,.rai-doc .stage{
    overflow:visible !important; max-height:none !important; }
  .rai-doc table{ min-width:0 !important; }
  /* Tombol interaktif tidak ikut tercetak, meski disisipkan lewat innerHTML. */
  .rai-doc button,.rai-doc .btn,.rai-doc .chip,.rai-doc .reveal-btn{ display:none !important; }
  /* Bilah ukur (dimbar, progress) tetap terlihat sebagai batang abu-abu. */
  .rai-doc .track,.rai-doc .bar{ border:1px solid #888 !important; height:7pt !important; }
  .rai-doc .track i,.rai-doc .bar i{ background-color:#444 !important; display:block !important; }
  .rai-doc mark{ background:#ffe8a3 !important; }
  .rai-doc .rbar{ display:flex; gap:6pt; align-items:center; margin:0 0 3pt; font-size:9pt; }
  .rai-doc .rbar .rbt{ flex:1; height:7pt; border:1px solid #888; position:relative; }
  .rai-doc .rbar .rbt i{ position:absolute; inset:0 auto 0 0; background:#555 !important; display:block; }
}

/* tombol sembunyikan nav (muncul hanya saat kunci fasilitator terbuka) */
.tkbar nav .rai-btn-lock{ font-size:.58rem; padding:.3rem .5rem; margin-left:.35rem; opacity:.5; }
.tkbar nav .rai-btn-lock:hover{ opacity:1; }