/* Checklist QA /checklist-feature-development/ (TCK-0640).
 * Ikut token clay (clay-tokens.css / app.css): kartu, pil, tombol yang sama.
 * Halaman ini admin-only & staging-only; teksnya Indonesia (bahasa owner), bukan kamus. */
.qa-wrap { display:flex; flex-direction:column; gap:16px; min-width:0; overflow-wrap:anywhere; }
.qa-head > *, .qa-wrap > * { min-width:0; }
.qa-head { display:grid; grid-template-columns: 1.4fr 1fr; gap:16px; }
.qa-card { padding:18px 20px; }
.qa-card h3 { margin:0 0 6px; font-size:18px; font-weight:900; }
.qa-card p { margin:0 0 8px; font-size:13.5px; color:var(--muted); font-weight:700; line-height:1.45; }
.qa-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:6px 0; }
.qa-row label { font-size:12px; font-weight:800; color:var(--muted); }
.qa-row select, .qa-row input[type=text], .qa-row input[type=search] {
  height:38px; border-radius:12px; border:1px solid var(--line); padding:0 12px; font:inherit; font-weight:700;
  background:var(--card, #fff); color:inherit; min-width:120px; }
.qa-row input[type=search] { flex:1; min-width:180px; }
.qa-bar { height:10px; border-radius:999px; background:var(--well, rgba(0,0,0,.06)); overflow:hidden; display:flex; margin:4px 0 2px; }
.qa-bar span { display:block; height:100%; }
.qa-bar .l { background:#2f9d85; } .qa-bar .g { background:#e0564d; } .qa-bar .w { background:#e39a3b; }
.qa-stat { font-size:12.5px; font-weight:800; color:var(--muted); }
.qa-chip { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:900;
  background:var(--well, rgba(0,0,0,.06)); box-shadow:inset 0 2px 0 var(--hi, rgba(255,255,255,.5)); white-space:normal; max-width:100%; }
.qa-chip.on { background:#2f9d85; color:#fff; }
.qa-chip.p-anonim { background:#f3e3b2; color:#5a4300; } .qa-chip.p-free { background:#dbe8ff; color:#213f80; }
.qa-chip.p-pro { background:#e3d9ff; color:#3d2b8a; } .qa-chip.p-admin { background:#ffd9d6; color:#7a1f18; }
.qa-chip.p-runner { background:#d6f3ea; color:#145c4c; }
.qa-chip.r-ya { background:#d6f3ea; color:#145c4c; } .qa-chip.r-sebagian { background:#ffe6b8; color:#6b4300; } .qa-chip.r-tidak { background:#eee; color:#555; }
.qa-chip.n-lulus { background:#2f9d85; color:#fff; } .qa-chip.n-gagal { background:#e0564d; color:#fff; }
.qa-chip.n-lewati { background:#e39a3b; color:#fff; } .qa-chip.n- { opacity:.7; }
.qa-bagian { margin:10px 0 6px; font-size:15px; font-weight:900; display:flex; align-items:center; gap:10px; }
.qa-bagian small { font-weight:800; color:var(--muted); }
.qa-item { padding:12px 16px; margin-bottom:10px; cursor:pointer; }
.qa-item:hover { transform:none; }
.qa-item.buka { cursor:default; }
.qa-item.gagal { outline:2px solid #e0564d; }
.qa-item .qa-judul { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.qa-item .qa-judul b { font-size:14.5px; flex:1; min-width:160px; }
.qa-item .qa-id { font-family:ui-monospace, Menlo, Consolas, monospace; font-size:12px; font-weight:900; color:var(--muted); }
.qa-isi { margin-top:12px; border-top:1px solid var(--line); padding-top:12px; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.qa-isi h4 { margin:0 0 4px; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.qa-isi ol, .qa-isi ul { margin:0 0 8px 18px; padding:0; font-size:13.5px; font-weight:700; line-height:1.5; }
.qa-isi textarea { width:100%; min-height:64px; border-radius:12px; border:1px solid var(--line); padding:8px 10px; font:inherit; font-size:13px; font-weight:700; resize:vertical; background:var(--card, #fff); color:inherit; }
.qa-nilai { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.qa-nilai .btn { height:32px; padding:0 12px; font-size:12.5px; }
.qa-nilai .btn.aktif-lulus { background:#2f9d85; color:#fff; } .qa-nilai .btn.aktif-gagal { background:#e0564d; color:#fff; }
.qa-nilai .btn.aktif-lewati { background:#e39a3b; color:#fff; }
.qa-galeri { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.qa-galeri figure { margin:0; width:132px; font-size:11px; font-weight:800; color:var(--muted); }
.qa-galeri img, .qa-galeri video { width:132px; height:84px; object-fit:cover; border-radius:10px; border:1px solid var(--line); background:#000; display:block; }
.qa-galeri button { font:inherit; font-size:11px; font-weight:900; border:0; background:none; color:#e0564d; cursor:pointer; padding:2px 0; }
.qa-jejak { font-family:ui-monospace, Menlo, Consolas, monospace; font-size:11.5px; line-height:1.45; max-height:220px; overflow:auto;
  background:var(--well, rgba(0,0,0,.05)); border-radius:10px; padding:8px 10px; white-space:pre-wrap; }
.qa-jejak .galat { color:#e0564d; }
.qa-pesan { padding:10px 14px; border-radius:12px; font-weight:800; font-size:13px; }
.qa-pesan.err { background:#ffe3e0; color:#7a1f18; } .qa-pesan.ok { background:#dff5ee; color:#145c4c; }
.qa-rekam { animation:qa-kedip 1.2s infinite; }
@keyframes qa-kedip { 50% { opacity:.45; } }
.qa-kecil { font-size:12px; color:var(--muted); font-weight:700; }
.qa-kode { font-family:ui-monospace, Menlo, Consolas, monospace; font-size:12px; background:var(--well, rgba(0,0,0,.06)); padding:2px 6px; border-radius:6px; }
@media (max-width: 900px) {
  .qa-head { grid-template-columns:1fr; }
  .qa-isi { grid-template-columns:1fr; }
}
.qa-langkah-token { margin:6px 0 0 18px; padding:0; font-size:13.5px; font-weight:700; line-height:1.6; }
.qa-langkah-token li { margin-bottom:8px; }
/* Robot ala phinisi: kartu kendali di halaman + panel layar (dua iframe) yang hidup di <body>,
 * tidak ikut digambar ulang (iframe yang digambar ulang = halaman dimuat ulang). */
.qa-robot-teks { margin:6px 0 0 !important; font-size:13.5px !important; color:inherit !important; }
.qa-robot-salah { color:#e0564d; }
.qa-panel-robot { display:none; position:fixed; right:12px; bottom:12px; width:min(46vw, 760px); max-height:80vh; overflow:auto; z-index:60;
  background:var(--card, #fff); border:1px solid var(--line); border-radius:16px; box-shadow:0 12px 40px rgba(0,0,0,.18); padding:10px 12px; }
.qa-panel-robot.tampak { display:block; }
.qa-panel-kepala { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.qa-panel-kepala > span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qa-panel-kepala .btn { height:30px; padding:0 10px; }
.qa-layar-grid { display:grid; grid-template-columns: 3fr 1fr; gap:10px; }
.qa-layar { margin:0; min-width:0; }
.qa-layar figcaption { font-size:11.5px; font-weight:900; color:var(--muted); margin-bottom:4px; }
.qa-bingkai { position:relative; overflow:hidden; border-radius:12px; background:var(--well, rgba(0,0,0,.05)); border:1px solid var(--line); }
.qa-bingkai.kosong::after { content:"Layar kosong · tekan ▶ Jalankan robot"; position:absolute; inset:0; display:grid; place-items:center; padding:10px; font-size:12px; font-weight:800; color:var(--muted); text-align:center; }
.qa-bingkai.kosong iframe { visibility:hidden; }
.qa-bingkai iframe { position:absolute; top:0; left:0; border:0; transform-origin:0 0; background:#fff; }
.qa-kursor { position:absolute; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%; background:#ff7a59; box-shadow:0 0 0 5px rgba(255,122,89,.35); opacity:0; transition:left .25s, top .25s, opacity .2s; pointer-events:none; z-index:2; }
.qa-kursor.tampak { opacity:1; }
@media (max-width: 1100px) { .qa-panel-robot { width:calc(100vw - 24px); left:12px; right:12px; max-height:60vh; } .qa-layar-grid { grid-template-columns:1fr; } }

.qa-dialog { margin-top:10px; padding:12px 14px; border-radius:14px; background:var(--well, rgba(0,0,0,.04)); }
.qa-dialog h4 { margin:0 0 6px; font-size:14px; }
.qa-dialog input { height:38px; border-radius:12px; border:1px solid var(--line); padding:0 12px; font:inherit; min-width:260px; flex:1; background:var(--card,#fff); color:inherit; }

/* Bilah uji (phinisi _bilah.html): di semua halaman selama satu butir direkam */
.qa-bilah { position:fixed; right:12px; bottom:12px; z-index:2147483000; max-width:min(560px, calc(100vw - 24px)); background:var(--surface, #fff); color:var(--ink, #222);
  border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.25); padding:8px 10px; font:12px/1.35 var(--font, system-ui, sans-serif); border:2px solid #ff7a59; }
.qa-bilah-judul { display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.qa-bilah-judul span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.qa-bilah-judul a { color:inherit; font-weight:800; text-decoration:none; }
.qa-bilah-tanda { color:#ff7a59; }
.qa-bilah-baris { display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.qa-bilah-baris b { margin:0 2px 0 6px; }
.qa-bilah button, .qa-bilah label { border:0; border-radius:9px; padding:4px 8px; font:inherit; font-weight:800; background:var(--well, #eee); color:inherit; cursor:pointer; }
.qa-bilah button[aria-pressed="true"][data-qa-bn$="lulus"] { background:#98d9bb; color:#1d4a35; }
.qa-bilah button[aria-pressed="true"][data-qa-bn$="gagal"] { background:#ff9c9c; color:#6a1a1a; }
.qa-bilah [data-qa-bpesan] { margin-left:4px; color:var(--muted, #777); }

/* kartu butir yang sedang dibuka robot (phinisi .ck-item.jalan) */
.qa-item.jalan { outline:3px solid #ff7a59; outline-offset:2px; }

/* inventaris phinisi 13 Okt: chip peran saringan, penguji ×, dialog tandai, kartu rekam, info */
.qa-chip-baris { gap:6px; }
button.qa-chip { cursor:pointer; border:0; }
button.qa-chip[aria-pressed="true"] { outline:2px solid #2f9d85; }
.qa-chip small { opacity:.75; font-weight:700; }
.qa-x { border:0; background:none; font:inherit; font-weight:900; cursor:pointer; color:#e0564d; padding:0 2px; }
.qa-hasil-akun { list-style:none; margin:8px 0; padding:0; display:grid; gap:6px; }
.qa-hasil-akun li { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.qa-item.rekam { box-shadow:0 0 0 2px #ff7a59 inset; }
.qa-tulis { color:#7a1f18; font-weight:800; }
.qa-info b { font-weight:900; }