/* [NALA_PANTAU_AI_V1] Pantau AI. Prefix .pa-*. Memakai token Nala yang sudah
   ada (--soga, --ink-*, --line, --surface, --hover). Kepala halaman serumpun
   dengan .kr-head / .srt-head (chrome gelap + kawung). */

.pa-page{max-width:1080px}

/* ── Kepala ──────────────────────────────────────────────────────────────── */
.pa-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin:calc(-1 * var(--page-pad)) calc(-1 * var(--page-pad)) 14px;
  padding:22px var(--page-pad) 18px;color:#F7F1DE;background-color:#3A2415;
  background-image:linear-gradient(90deg,rgba(58,36,21,.96),rgba(58,36,21,.82)),url('/static/motif/kawung.svg');
  background-size:auto,80px 80px;border-bottom:1px solid rgba(224,190,120,.5)}
.pa-head h1{font-family:'Crimson Pro',serif;font-size:30px;line-height:1;margin:3px 0 4px;color:#FFF9E9}
.pa-head p{margin:0;color:rgba(255,249,233,.78);font-size:12.5px}
.pa-eyebrow{font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#E0BE78;margin-bottom:4px}
.pa-hitung{display:flex;gap:8px;flex-wrap:wrap}
.pa-hitung span{display:inline-flex;align-items:baseline;gap:6px;padding:6px 11px;border-radius:999px;
  background:rgba(247,241,222,.1);border:1px solid rgba(224,190,120,.35);font-size:12.5px;color:#F7F1DE}
.pa-hitung b{font-size:16px;color:#FFF9E9}
.pa-hitung .pa-h-gagal b{color:#F2A08C}

/* ── Bilah alat ──────────────────────────────────────────────────────────── */
.pa-alat{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:12px}
.pa-seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--surface)}
.pa-seg button{border:0;background:transparent;font:inherit;font-size:13px;padding:7px 12px;cursor:pointer;color:var(--ink-3)}
.pa-seg button+button{border-left:1px solid var(--line)}
.pa-seg button.on{background:var(--soga);color:#FFF9E9;font-weight:600}
.pa-tgl{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--ink-3);font-weight:600}
.pa-tgl input,.pa-pilih,.pa-cari{font:inherit;font-size:13px;padding:7px 10px;border:1px solid var(--line);
  border-radius:9px;background:var(--surface);color:var(--ink)}
.pa-pilih{width:auto;max-width:100%}
.pa-cari{flex:1;min-width:200px}

/* ── Chip per staff ──────────────────────────────────────────────────────── */
.pa-orang{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.pa-orang button{font:inherit;font-size:12.5px;padding:5px 11px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.pa-orang button b{margin-left:4px;color:var(--soga-d)}
.pa-orang button:hover{background:var(--hover)}
.pa-orang button.on{background:var(--soga);border-color:var(--soga-d);color:#FFF9E9}
.pa-orang button.on b{color:#FFF9E9}

/* ── Daftar ──────────────────────────────────────────────────────────────── */
.pa-daftar{display:flex;flex-direction:column;gap:8px}
.pa-daftar[aria-busy="true"]{opacity:.6}
.pa-baris{border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.pa-baris.buka{border-color:var(--soga)}
.pa-baris-kepala{display:block;width:100%;text-align:left;border:0;background:transparent;font:inherit;color:inherit;
  padding:12px 14px;cursor:pointer}
.pa-baris-kepala:hover{background:var(--hover)}
.pa-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--ink-3);margin-bottom:5px}
.pa-nama{font-weight:700;color:var(--ink);font-size:13px}
.pa-peran{padding:1px 7px;border-radius:999px;background:var(--hover);font-size:11px}
.pa-waktu{margin-left:auto;white-space:nowrap}
.pa-st{padding:1px 8px;border-radius:999px;font-size:11px;font-weight:700}
.pa-st-merah{background:#F8E1DB;color:#9A3412}
.pa-st-kuning{background:#FBEFD5;color:#8A5A00}
.pa-tanya{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.pa-konteks{font-size:11.5px;color:var(--soga-d);margin-top:4px}
.pa-cuplik{font-size:12.5px;color:var(--ink-3);margin-top:6px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pa-isi{padding:0 14px 12px;border-top:1px solid var(--line)}
.pa-jawaban{font-size:13.5px;line-height:1.55;color:var(--ink);padding-top:10px;overflow-wrap:anywhere}
.pa-jawaban p{margin:0 0 8px}
.pa-jawaban ul,.pa-jawaban ol{margin:0 0 8px;padding-left:20px}
.pa-jawaban table{border-collapse:collapse;font-size:12.5px;margin:6px 0;display:block;overflow-x:auto}
.pa-jawaban th,.pa-jawaban td{border:1px solid var(--line);padding:4px 8px}
.pa-polos{white-space:pre-wrap}
.pa-kosong-jawab{padding-top:10px;font-size:13px;color:var(--ink-3);font-style:italic}
.pa-teknis{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:11.5px;color:var(--ink-3)}

.pa-kosong{padding:28px 16px;text-align:center;color:var(--ink-3);font-size:13.5px;
  border:1px dashed var(--line);border-radius:12px;background:var(--surface)}
.pa-kosong small{display:block;margin-top:6px;font-size:12px}
.pa-galat{padding:10px 12px;border-radius:9px;background:#F8E1DB;color:#9A3412;font-size:13px;margin-bottom:12px}
.pa-lagi{display:flex;justify-content:center;margin:14px 0 6px}
.pa-lagi button{font:inherit;font-size:13px;padding:8px 16px;border-radius:9px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);cursor:pointer}
.pa-lagi button:hover:not(:disabled){background:var(--hover)}

@media (max-width:640px){
  .pa-head h1{font-size:26px}
  .pa-alat{gap:8px}
  .pa-seg{width:100%}
  .pa-seg button{flex:1}
  .pa-tgl{flex:1;min-width:130px}
  .pa-tgl input{width:100%}
  .pa-cari{min-width:100%}
  .pa-waktu{margin-left:0;width:100%}
}