/* testauto/web/static/style.css — testauto operator console, light/dark by toggle.
   Concept: quiet console for QA/UAT crew. Semantic tokens per theme (`:root`
   = light, `[data-theme="dark"]` = dark); an inline head script in base.html/
   login.html stamps `data-theme` BEFORE first paint (localStorage choice,
   fallback system `prefers-color-scheme`) — no FOUC, no duplicate token block.
   Monospace for anything identity-bearing (scenario IDs, run IDs, badges);
   navy accent reserved for brand + primary actions in BOTH themes (redesign
   07-18). Lifecycle badges carry the only "loud" color — status is the one
   thing that should catch the eye first; color always comes from DATA, never
   computed here (north-star Pilar B).
   Fonts SELF-HOSTED (woff2 di static/fonts/, @font-face di bawah) — NOL fetch
   CDN: box bisa terkunci outbound, dan self-host = nol egress (etos privacy).
   latin subset saja; keluarga tak- termuat degrade ke system fallback. */

/* --- self-hosted webfonts (redesign 07-18) --- */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/archivo-600.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/archivo-700.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/archivo-800.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-sans-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-600.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/jetbrains-mono-400.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/jetbrains-mono-500.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/jetbrains-mono-600.woff2") format("woff2"); }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  background-image: var(--canvas-glow);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
}

code, .badge {
  font-family: var(--font-mono);
}

h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.01em; }

/* Header halaman bersama (landing/dashboard/report/dst) — eyebrow mono +
   judul Archivo + lede. Satu rumah supaya tiap layar konsisten. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 0.4rem;
}
.page-title { font-family: var(--font-heading); font-weight: 800; font-size: 1.9rem; margin: 0 0 0.4rem; letter-spacing: -0.02em; }
.page-lede { color: var(--text-dim); font-size: 0.95rem; margin: 0 0 1.75rem; max-width: 62ch; line-height: 1.55; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

button {
  font-family: var(--font-sans);
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

a, button, input, select, textarea {
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- aksi (tombol) ----------
   SATU rumah utk aksi primer: dulu tersebar di 5 aturan hampir-identik
   (login/upload/writeback/run/review) yang sudah mulai drift. Selector list,
   bukan kelas baru — nol perubahan template. */

.login-card button,
.upload-form button,
.writeback-form button,
.run-form button,
.wiz-form .wiz-primary,
.admin-create button,
.account-form button,
.login-cal-form > button[type="submit"],
.panel form > button[type="submit"] {
  background: var(--accent);
  color: var(--accent-contrast);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0.5rem 1.1rem;
  font-weight: 600;
  font-size: 0.9rem;
  min-height: 2.75rem;
}
.login-card button:hover,
.upload-form button:hover,
.writeback-form button:hover,
.run-form button:hover,
.wiz-form .wiz-primary:hover,
.admin-create button:hover,
.account-form button:hover,
.login-cal-form > button[type="submit"]:hover,
.panel form > button[type="submit"]:hover { background: var(--accent-hover); }

/* Aksi sekunder: hadir sbg tombol, bukan link telanjang — "Buka mandiri"
   sejajar bobotnya dgn aksi lain di page-head, tapi tak menyaingi accent. */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  min-height: 2.4rem;
}
.btn-secondary:hover { border-color: var(--accent); color: var(--text); text-decoration: none; }

/* Aksi primer sbg link/tombol berdiri sendiri (mis. "+ Upload skenario" di
   header dashboard) — bobot accent, sejajar tinggi dgn .btn-secondary. */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--accent);
  color: var(--accent-contrast);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  min-height: 2.4rem;
}
.btn-primary:hover { background: var(--accent-hover); color: var(--accent-contrast); text-decoration: none; }

/* ---------- field & keterangan ---------- */

/* Label + input yang menyatu satu baris (passes, role). Label TETAP label —
   placeholder bukan pengganti (a11y). */
.field-inline {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-dim);
}
.field-inline input[type="number"],
.field-inline input[type="text"] {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 0.45rem 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  min-height: 2.75rem;
}
.field-inline input[type="number"] { width: 5rem; }
.field-inline input[type="text"] { min-width: 12rem; }
.field-inline input:focus { outline: none; border-color: var(--accent); }

/* Keterangan pendamping: menjelaskan konsekuensi pilihan, bukan hiasan —
   karena itu tetap terbaca (bukan abu-abu paling pudar). */
.hint {
  font-size: 0.8rem;
  color: var(--text-dim);
  line-height: 1.45;
  max-width: 72ch; /* baris >72ch bikin mata kehilangan awal baris berikutnya */
}

/* Label AI: verdict ber-AI WAJIB kelihatan ber-AI di mana pun ia muncul
   (amandemen north-star VLM) — termasuk agregat histori. */
.ai-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ai);
  background: color-mix(in srgb, var(--ai) 12%, transparent);
  border-radius: 4px;
  padding: 0.05rem 0.3rem;
  white-space: nowrap;
}

/* Empty state: dipakai bare (`<p class="empty">`, `<li class="empty">`) DAN
   di dalam tabel — dulu cuma yang di tabel yang punya aturan. */
.empty { color: var(--text-dim); font-size: 0.9rem; }

/* ---------- top bar ---------- */

/* Padding-inline mengikuti kolom `.shell` (max 980px + 1.75rem): brand/nav
   sejajar lurus dgn isi halaman di layar lebar, bukan menempel tepi jendela
   sementara konten mengambang di tengah. Jatuh ke 1.75rem di layar sempit. */
.topbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  padding-block: 0.9rem;
  padding-inline: max(1.75rem, calc((100% - 980px) / 2 + 1.75rem));
  border-bottom: 1px solid var(--border);
  background: var(--bg-raised);
  box-shadow: var(--shadow);
}

.brand {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--text);
}
.brand-dot { color: var(--accent); }
.brand:hover { text-decoration: none; }

.topnav { display: flex; gap: 1.1rem; flex: 1; margin-left: 0.75rem; }
.topnav a {
  color: var(--text-dim);
  font-size: 0.92rem;
  padding: 0.25rem 0.1rem;
  border-bottom: 2px solid transparent;
}
.topnav a:hover { color: var(--text); text-decoration: none; }
.topnav a.active { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }

.topbar-actions { display: flex; align-items: center; gap: 1rem; }

/* Chip user: avatar inisial (accent) + nama/role bertumpuk, link ke Akun. */
.topbar-user { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text); }
.topbar-user:hover { text-decoration: none; }
.topbar-user-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 4px;
  background: var(--accent);
  color: var(--accent-contrast);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.topbar-user-meta { display: flex; flex-direction: column; line-height: 1.1; }
.topbar-user-name { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.topbar-user-role { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; color: var(--text-faint); }
.topbar-admin { color: var(--text-dim); font-size: 0.9rem; }
.topbar-admin:hover { color: var(--text); }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  padding: 0;
}
.theme-toggle:hover { color: var(--text); border-color: var(--accent); }
.theme-toggle svg { width: 1.1rem; height: 1.1rem; }
/* light aktif -> tawarkan bulan; dark aktif -> tawarkan matahari */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

.logout-form button {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 6px;
  padding: 0.45rem 0.8rem;
  font-size: 0.85rem;
  min-height: 2.4rem;
}
.logout-form button:hover { border-color: var(--accent); color: var(--text); }

.shell {
  max-width: 980px;
  margin: 0 auto;
  padding: 2rem 1.75rem 4rem;
}

/* ---------- login page (split panel — redesign 07-18) ---------- */

.login-page {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}
.login-hero {
  position: relative;
  overflow: hidden;
  background: var(--accent);
  color: var(--accent-contrast);
  padding: 3.5rem 3.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.login-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 700px 500px at 80% -10%, color-mix(in srgb, var(--accent-contrast) 10%, transparent), transparent 60%);
  pointer-events: none;
}
.login-hero > * { position: relative; }
.login-hero-brand { font-family: var(--font-heading); font-weight: 800; font-size: 1.4rem; letter-spacing: -0.02em; }
.login-hero-brand span { color: var(--link); }
.login-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent-contrast) 55%, transparent);
  margin: 0 0 1.1rem;
}
.login-hero h1 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 2.5rem;
  line-height: 1.1;
  max-width: 14ch;
  margin: 0 0 1.25rem;
}
.login-hero-lede { font-size: 0.95rem; line-height: 1.6; color: color-mix(in srgb, var(--accent-contrast) 72%, transparent); max-width: 44ch; margin: 0; }
.login-hero-foot { display: flex; gap: 1.75rem; font-size: 0.82rem; color: color-mix(in srgb, var(--accent-contrast) 60%, transparent); }

.login-pane {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  background: var(--bg);
}
.login-card {
  width: 100%;
  max-width: 360px;
  animation: fadeUp 0.5s ease;
}
.login-card h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.65rem;
  margin: 0 0 0.35rem;
  color: var(--text);
}
.login-card .subtitle { color: var(--text-dim); font-size: 0.88rem; margin: 0 0 1.5rem; }
.login-card label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--text); margin-bottom: 0.4rem; }
.login-card input {
  width: 100%;
  background: var(--bg-raised);
  border: 1.5px solid var(--border);
  color: var(--text);
  border-radius: 3px;
  padding: 0.7rem 0.8rem;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
.login-card input:focus { outline: none; border-color: var(--focus); }
.login-card button { width: 100%; border-radius: 3px; }
.login-card .error { color: var(--perlu-review); font-size: 0.85rem; margin: 0 0 1rem; }
.login-host { text-align: center; color: var(--text-faint); font-size: 0.75rem; margin-top: 1.25rem; font-family: var(--font-mono); }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 720px) {
  .login-page { grid-template-columns: 1fr; }
  .login-hero { display: none; }
}

/* ---------- dashboard ---------- */

/* Kepala halaman dashboard: judul kiri, aksi kanan (unduh hasil + upload). */
.dash-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.dash-head .page-title { margin-bottom: 0; }
.dash-head-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.dash-head-actions form { margin: 0; }

/* Banner panduan collapsible — native <details>, nol JS. Garis-kiri accent =
   "ini panduan, bukan error". */
.journey {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 5px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.4rem;
  box-shadow: var(--shadow-sm);
}
.journey summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
}
.journey summary::-webkit-details-marker { display: none; }
.journey-title { font-family: var(--font-heading); font-weight: 700; font-size: 0.98rem; color: var(--text); }
/* Label toggle sepenuhnya dari CSS (span dikosongkan) supaya teks ikut status
   buka/tutup tanpa JS. */
.journey-toggle { font-size: 0.82rem; color: var(--text-faint); white-space: nowrap; }
.journey[open] .journey-toggle::after { content: "Sembunyikan ▴"; }
.journey:not([open]) .journey-toggle::after { content: "Tampilkan ▾"; }
.journey-body { margin-top: 1rem; }
.journey-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem 1rem;
}
.journey-step {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "num label" "num caption";
  column-gap: 0.55rem;
  align-content: start;
}
.journey-num {
  grid-area: num;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 3px;
  background: var(--bg-inset);
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.78rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.journey-label { grid-area: label; font-family: var(--font-heading); font-weight: 700; font-size: 0.85rem; align-self: center; }
.journey-caption { grid-area: caption; font-size: 0.78rem; color: var(--text-dim); line-height: 1.4; margin-top: 0.2rem; }
.journey-note { margin: 1rem 0 0; font-size: 0.85rem; color: var(--text-dim); line-height: 1.5; }
.journey-note strong { color: var(--text); }
@media (max-width: 720px) {
  .journey-steps { grid-template-columns: 1fr; }
}

/* Tiga stat card. Angka = jawaban dominan (mono, besar); label kecil tenang,
   foot/cta dim. Warna angka HANYA utk kanal bukti: review=danger, ok=hijau. */
.dash-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
  margin-bottom: 1.6rem;
}
.dash-stat {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1.1rem 1.2rem;
  box-shadow: var(--shadow-sm);
  color: var(--text);
}
.dash-stat--link:hover { border-color: var(--border-strong); text-decoration: none; }
.dash-stat-label { font-size: 0.75rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.dash-stat-num { font-size: 0.85rem; color: var(--text-dim); }
.dash-stat-num b {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 2rem;
  color: var(--text);
  margin-right: 0.35rem;
  font-variant-numeric: tabular-nums;
}
.dash-stat-num b.num-danger { color: var(--perlu-review); }
.dash-stat-num b.num-ok { color: var(--terverifikasi); }
.dash-stat-cta { font-size: 0.8rem; color: var(--link); font-weight: 600; margin-top: auto; }
.dash-stat--link:hover .dash-stat-cta { color: var(--accent-hover); }
.dash-stat-foot { font-size: 0.78rem; color: var(--text-faint); margin-top: auto; }
@media (max-width: 720px) {
  .dash-stats { grid-template-columns: 1fr; }
}

/* Kepala daftar skenario: judul + kotak cari. */
.scen-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2.5rem;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
}
.scen-list-head h2 { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; }
#scen-search {
  flex: 1;
  min-width: 12rem;
  max-width: 22rem;
  background: var(--bg-raised);
  border: 1.5px solid var(--border);
  color: var(--text);
  border-radius: 3px;
  padding: 0.5rem 0.75rem;
  font-size: 0.88rem;
}
#scen-search:focus { outline: none; border-color: var(--focus); }
.scen-perpage-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--text-dim);
  white-space: nowrap;
}
#scen-perpage {
  background: var(--bg-raised);
  border: 1.5px solid var(--border);
  color: var(--text);
  border-radius: 3px;
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
}
#scen-perpage:focus { outline: none; border-color: var(--focus); }

/* Kartu skenario: kiri (klik -> detail) id+judul+mini-stepper, kanan aksi. */
.scen-list { display: flex; flex-direction: column; gap: 0.6rem; }
.scen-card {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1rem 1.2rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 150ms ease, border-color 150ms ease;
}
.scen-card:hover { box-shadow: var(--shadow); border-color: var(--border-strong); }
.scen-card-main { flex: 1; min-width: 0; color: var(--text); display: block; }
.scen-card-main:hover { text-decoration: none; }
.scen-card-id { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem; }
.scen-card-id code { font-size: 0.85rem; font-weight: 600; color: var(--link); }
.scen-stage-chip {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 0.05rem 0.4rem;
}
.scen-card-title {
  font-size: 0.98rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ministep { display: flex; align-items: center; gap: 0.25rem; }
.ministep-seg {
  width: 2.4rem;
  max-width: 12vw;
  height: 0.3rem;
  border-radius: 2px;
  background: var(--border-strong);
}
.ministep-seg.done { background: var(--accent); }
.ministep-seg.current { background: var(--link); }
.ministep-label { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-faint); margin-left: 0.5rem; white-space: nowrap; }

.scen-card-act { width: 15rem; flex: none; text-align: right; }
.scen-card-act form { margin: 0; }
.scen-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  padding: 0.5rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.scen-act--accent { background: var(--accent); color: var(--accent-contrast); }
.scen-act--accent:hover { background: var(--accent-hover); color: var(--accent-contrast); text-decoration: none; }
.scen-act--ghost { background: var(--bg-raised); color: var(--text); border-color: var(--border); }
.scen-act--ghost:hover { border-color: var(--accent); text-decoration: none; }
.scen-act:disabled { opacity: 0.5; cursor: not-allowed; }
.scen-act-hint { font-size: 0.72rem; color: var(--text-dim); margin: 0.45rem 0 0; line-height: 1.4; }

.scen-empty {
  padding: 1.5rem;
  text-align: center;
  color: var(--text-faint);
  font-size: 0.9rem;
  border: 1px dashed var(--border);
  border-radius: 5px;
}
.scen-empty .empty-title { color: var(--text); }
.scen-empty p { margin: 0.25rem 0; }

/* Pagination: rentang kiri, nav kanan (mono). */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.pagination-range { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-faint); }
.pagination-nav { display: flex; align-items: center; gap: 0.75rem; }
.pagination-page { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-dim); }
.pagination .btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }
.pagination .btn-secondary:disabled:hover { border-color: var(--border); color: var(--text); }

@media (max-width: 640px) {
  .scen-card { flex-direction: column; align-items: stretch; }
  .scen-card-act { width: auto; text-align: left; }
}

.panel {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.3rem 1.4rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow);
}
.panel h2 {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}

/* Baris teks panjang dibatasi ~72ch: mata kehilangan baris di ukur lebih lebar. */
.panel-desc { margin: -0.5rem 0 1rem; font-size: 0.88rem; color: var(--text-dim); max-width: 72ch; }

/* Empty state = tempat mengajari, bukan cuma memberitahu kosong: judul +
   satu kalimat + satu jalan keluar. */
.empty-cell p { margin: 0.25rem 0; }
.empty-title { color: var(--text); font-weight: 600; }

/* Badge = satu-satunya warna "keras" di layar; status harus tertangkap mata
   duluan. Tint/border diturunkan dari token lifecycle yang SAMA lewat
   color-mix, bukan rgba literal: satu token berubah -> badge ikut, di kedua
   tema, tanpa ada salinan warna kedua di file ini. */
.badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge-draft {
  color: var(--draft);
  background: color-mix(in srgb, var(--draft) 14%, transparent);
  border-color: color-mix(in srgb, var(--draft) 35%, transparent);
}
.badge-kalibrasi {
  color: var(--kalibrasi);
  background: color-mix(in srgb, var(--kalibrasi) 14%, transparent);
  border-color: color-mix(in srgb, var(--kalibrasi) 40%, transparent);
}
.badge-perlu-review {
  color: var(--perlu-review);
  background: color-mix(in srgb, var(--perlu-review) 13%, transparent);
  border-color: color-mix(in srgb, var(--perlu-review) 40%, transparent);
}
.badge-siap-verifikasi {
  color: var(--siap-verifikasi);
  background: color-mix(in srgb, var(--siap-verifikasi) 13%, transparent);
  border-color: color-mix(in srgb, var(--siap-verifikasi) 40%, transparent);
}
.badge-terverifikasi {
  color: var(--terverifikasi);
  background: color-mix(in srgb, var(--terverifikasi) 13%, transparent);
  border-color: color-mix(in srgb, var(--terverifikasi) 40%, transparent);
}

/* ---------- upload / writeback ---------- */

.error { color: var(--perlu-review); font-size: 0.85rem; }

/* Tombol unduh contoh template: menonjol di atas dropzone (aksi primer,
   token tombol yang sama dgn .btn-primary lain). */
.tpl-download { display: inline-block; margin: 0 0 1.4rem; text-decoration: none; }

/* Empat kartu nama sheet + panduan kolom ringkas per sheet. */
.sheet-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem;
  margin-bottom: 0.9rem;
}
.sheet-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.9rem 1rem;
  box-shadow: var(--shadow-sm);
  text-align: left;
}
.sheet-card-eyebrow { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
.sheet-card-name { font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem; }
.sheet-card-guide { margin: 0; font-size: 0.8rem; line-height: 1.4; color: var(--text-dim); }
@media (max-width: 640px) { .sheet-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .sheet-cards { grid-template-columns: 1fr; } }

.upload-form { display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem; }
/* Dropzone: label besar (target klik lebar) membungkus input file yang
   disembunyikan; nama berkas di-update JS. */
.dropzone {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 11rem;
  background: var(--bg-inset);
  border: 1.5px dashed var(--border-strong);
  border-radius: 6px;
  padding: 1.5rem;
  cursor: pointer;
  text-align: center;
}
.dropzone:hover { border-color: var(--accent); }
.dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.dropzone-icon { font-size: 1.6rem; opacity: 0.5; }
.dropzone-name { font-family: var(--font-heading); font-weight: 700; font-size: 1rem; word-break: break-all; }
.dropzone-hint { font-size: 0.8rem; color: var(--text-faint); }
.dropzone:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }

.checkbox-label { font-size: 0.85rem; color: var(--text-dim); display: flex; align-items: center; gap: 0.35rem; }
.upload-hint { margin: 0; max-width: 62ch; }
.upload-result { margin-top: 1.5rem; }

.cli-output {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  white-space: pre-wrap;
  overflow-x: auto;
}

/* ---------- upload preview (gate review 2-fase) ----------
   Strip ringkasan STICKY (nol overflow:hidden di ancestor -- sticky mati
   kalau ada) + chip filter (reuse .chip/.chip.active) + baris <details>
   kompak, nyaman utk ratusan skenario (search+perpage+pager via
   listfilter.js, SATU rumah dgn dashboard). */
.preview-summary {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.preview-summary-counts { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.preview-summary-total { font-size: 0.92rem; color: var(--text); }
.preview-summary-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: 0.8rem; color: var(--text-dim); }
.preview-meta-item code { font-size: 0.78rem; }

.preview-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.preview-search {
  flex: 1;
  min-width: 12rem;
  max-width: 22rem;
  background: var(--bg-inset);
  border: 1.5px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font-size: 0.88rem;
}
.preview-search:focus { outline: none; border-color: var(--focus); }
.preview-perpage {
  background: var(--bg-raised);
  border: 1.5px solid var(--border);
  color: var(--text);
  border-radius: 3px;
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
}
.preview-perpage:focus { outline: none; border-color: var(--focus); }

.preview-rows { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.preview-row {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.2rem 1rem;
}
.preview-row > summary {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding: 0.7rem 0;
  cursor: pointer;
  list-style: none;
}
.preview-row > summary::-webkit-details-marker { display: none; }
.preview-row > summary::before { content: "▸"; color: var(--text-faint); font-size: 0.7rem; }
.preview-row[open] > summary::before { content: "▾"; }
.preview-row-id { font-size: 0.85rem; font-weight: 600; color: var(--link); }
.preview-row-name { font-size: 0.9rem; color: var(--text); }
.preview-row-role, .preview-row-nsteps { font-size: 0.78rem; color: var(--text-faint); }
.preview-row-note { font-size: 0.78rem; color: var(--text-dim); }
.preview-shared-tag { font-size: 0.72rem; color: var(--text-dim); }
.preview-foreach-chip {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 0.05rem 0.4rem;
}
.preview-step-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin: 0 0 0.9rem; }
.preview-step-table th {
  text-align: left;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  font-weight: 600;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  background: var(--bg-inset);
}
.preview-step-table td { padding: 0.5rem 0.6rem; border: 1px solid var(--border); color: var(--text-dim); vertical-align: top; }
.preview-empty { padding: 1.5rem; text-align: center; color: var(--text-faint); font-size: 0.9rem; border: 1px dashed var(--border); border-radius: 5px; }

.preview-process-form { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; }
.preview-process-actions { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.3rem; }

/* ---------- scenario detail ---------- */

.back-link { display: inline-block; font-size: 0.85rem; color: var(--text-dim); margin-bottom: 1rem; }
.back-link:hover { color: var(--text); text-decoration: none; }

/* T4 (opus-loop iterasi 2, plan Step 3.5): breadcrumb halaman dalam. */
.breadcrumb { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--text-dim); margin: 0 0 0.9rem; }
.breadcrumb a { color: var(--text-dim); }
.breadcrumb a:hover { color: var(--text); text-decoration: none; }
.breadcrumb-sep { color: var(--text-faint); }
.breadcrumb-current { color: var(--text); font-weight: 600; }

.scen-detail-head { margin-bottom: 1.4rem; }
.scen-detail-id { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.5rem; }
.scen-detail-id code { font-family: var(--font-mono); font-size: 0.95rem; font-weight: 600; color: var(--link); }
.scen-detail-title { font-family: var(--font-heading); font-weight: 800; font-size: 1.65rem; margin: 0; max-width: 40ch; line-height: 1.2; }
.scen-detail-build { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-faint); margin: 0.5rem 0 0; }

/* Stepper besar 5 tahap: node done=✓ terisi accent, current=ring, todo=hollow;
   garis penghubung terisi sampai tahap tercapai. */
.bigstepper { padding: 1.5rem 1.6rem; }
.bigstep-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.bigstep { position: relative; }
.bigstep-node-row { display: flex; align-items: center; margin-bottom: 0.7rem; }
.bigstep-node {
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  border-radius: 3px;
  border: 1.5px solid var(--border-strong);
  background: var(--bg-raised);
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bigstep-line { flex: 1; height: 2px; background: var(--border); margin: 0 0.3rem; }
.bigstep.done .bigstep-node { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.bigstep.done .bigstep-line { background: var(--accent); }
.bigstep.current .bigstep-node { border-color: var(--link); color: var(--link); box-shadow: 0 0 0 3px color-mix(in srgb, var(--link) 22%, transparent); }
.bigstep-label { font-family: var(--font-heading); font-weight: 700; font-size: 0.85rem; }
.bigstep:not(.done):not(.current) .bigstep-label { color: var(--text-faint); }
.bigstep-caption { font-size: 0.78rem; color: var(--text-dim); line-height: 1.4; margin-top: 0.3rem; padding-right: 0.9rem; }
@media (max-width: 640px) {
  .bigstep-row { grid-template-columns: 1fr; gap: 0.6rem; }
  .bigstep-line { display: none; }
}

/* Panel aksi-berikutnya: teks kiri, tombol kanan. Varian --active dpt wrapper
   accent-soft supaya aksi yang menunggumu menonjol. */
.next-action {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.2rem;
  box-shadow: var(--shadow-sm);
}
.next-action--active { background: var(--accent-soft); border-color: color-mix(in srgb, var(--link) 30%, transparent); }
.next-action-body { flex: 1; min-width: 15rem; }
.next-action-eyebrow { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 0.4rem; }
.next-action-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; margin: 0 0 0.25rem; }
.next-action-hint { font-size: 0.85rem; color: var(--text-dim); line-height: 1.5; margin: 0; max-width: 56ch; }
.next-action-form { display: flex; align-items: flex-end; gap: 0.75rem; flex-wrap: wrap; margin: 0; }
.next-action-form .field-inline { flex-direction: column; align-items: flex-start; gap: 0.3rem; }

/* Dua kolom: langkah UAT | riwayat run. */
.scen-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 720px) { .scen-detail-grid { grid-template-columns: 1fr; } }

.uat-steps { list-style: none; margin: 0; padding: 0; }
.uat-steps li { display: flex; gap: 0.75rem; padding: 0.55rem 0; border-bottom: 1px solid var(--border); }
.uat-steps li:last-child { border-bottom: none; }
.uat-step-n { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-faint); flex: none; width: 1.3rem; }
.uat-step-body { flex: 1; }
.uat-step-body > summary { cursor: pointer; display: flex; flex-direction: column; gap: 0.3rem; list-style: none; }
.uat-step-body > summary::-webkit-details-marker { display: none; }
.uat-step-body > summary::before { content: "▸"; color: var(--text-faint); font-size: 0.7rem; margin-right: 0.35rem; }
.uat-step-body[open] > summary::before { content: "▾"; }
.uat-step-text { font-size: 0.88rem; line-height: 1.45; }
.uat-step-markers { display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem; }
.uat-marker { font-size: 0.78rem; display: inline-flex; align-items: baseline; gap: 0.3rem; }
.uat-marker-type { color: var(--text-faint); font-size: 0.72rem; }
.uat-marker--ai { color: var(--accent); }
.uat-marker--none { color: var(--text-faint); font-style: italic; }
.uat-step-cal { margin: 0.6rem 0 0.2rem 1rem; padding-left: 0.8rem; border-left: 2px solid var(--border); }
.uat-cal-label { font-size: 0.8rem; font-weight: 600; color: var(--text-dim); margin: 0.5rem 0 0.3rem; }
.uat-cal-cands code, .uat-cal-row { font-size: 0.82rem; }
.uat-cal-cands { display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem; }

.run-history { display: flex; flex-direction: column; gap: 0.5rem; }
.run-history-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.8rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
}
.run-history-row:hover { border-color: var(--border-strong); text-decoration: none; }
.run-dot { width: 0.6rem; height: 0.6rem; border-radius: 999px; flex: none; }
.run-dot--ok { background: var(--v-pass); }
.run-dot--fail { background: var(--v-fail); }
/* F2 fix (iterasi-2 Pilar B v2 UI/UX): dot warna kini punya SEMUA cabang
   verdict (dulu cuma ok/fail dari `fail_count==0`, mencap run all-ERROR
   hijau) -- token SAMA dgn `.v-error`/`.v-review`/`.v-dim` (report_overview),
   nol token baru. */
.run-dot--error { background: var(--v-error); }
.run-dot--review { background: var(--v-review); }
.run-dot--dim { background: var(--text-faint); }
.run-history-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.run-history-id { font-family: var(--font-mono); font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-history-meta { font-size: 0.72rem; color: var(--text-faint); }
.run-history-verdict { font-family: var(--font-mono); font-size: 0.8rem; white-space: nowrap; }
.run-history-verdict .v-pass { color: var(--v-pass); font-weight: 600; }
.run-history-verdict .v-fail { color: var(--v-fail); font-weight: 600; }
.run-history-verdict .v-dim { color: var(--text-faint); }

/* Item 5b: baris histori run + tombol "Console log" berdampingan (bukan
   nested di dalam <a> -- klik tombol tak boleh ikut navigasi report). */
.run-history-row-wrap { display: flex; align-items: stretch; gap: 0.5rem; }
.run-history-row-wrap .run-history-row { flex: 1; min-width: 0; }
.run-log-btn { flex: none; align-self: center; }

/* Item 5a: tombol pemicu modal Catatan QA di header detail skenario. */
.qa-note-trigger { margin-top: 0.6rem; }

/* ---------- run view ---------- */

.run-head { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; margin-bottom: 0.3rem; }
.run-head h1 { font-family: var(--font-heading); font-weight: 800; font-size: 1.6rem; margin: 0; }
.run-sub { font-size: 0.85rem; color: var(--text-dim); margin: 0 0 1.4rem; }
.run-sub code { color: var(--link); }

/* Master-detail (keputusan Kevin 2026-07-27): KIRI daftar langkah (sempit,
   dibaca dari atas ke bawah), KANAN layar besar. `min-width: 0` di bawah tetap
   yang menahan konten ber-overflow supaya tak mendorong lebar kolom. */
.run-grid { display: grid; grid-template-columns: minmax(0, 23rem) minmax(0, 1fr); gap: 1.2rem; margin-bottom: 1.2rem; align-items: start; }
@media (max-width: 900px) { .run-grid { grid-template-columns: 1fr; } }
/* Item 1 (ui-history-sync plan): child grid default `min-width: auto` --
   filmstrip ber-overflow melebarkan kolom section. Kontain overflow DI DALAM
   child (scrollbar filmstrip sendiri), bukan mendorong lebar grid. */
.run-grid > * { min-width: 0; }
.run-progress-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.run-progress-title { font-size: 0.9rem; font-weight: 600; }

.progress {
  height: 0.5rem;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  margin: 0 0 1.2rem;
}
.progress-fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 999px;
  transition: width 300ms ease;
}

/* Progres = angka yang dipelototi bermenit-menit; mono+tabular supaya tak
   goyang tiap langkah bertambah. Kosong -> tak tampil (jangan sisakan lubang
   sebelum poll pertama). */
.run-progress-text {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.run-progress-text:empty, .run-report:empty, .error:empty { display: none; }
.run-report { margin: 0.9rem 0 0; font-weight: 600; }

/* Kotak screenshot langkah terbaru: placeholder di belakang, img menutupi saat
   ada. Badge LIVE menyala hanya saat data-state=RUNNING. */
.run-shot-label { font-size: 0.72rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 0.5rem; }
.run-shot {
  position: relative;
  aspect-ratio: 16 / 10;
  /* Cap 560px era dua-kolom dinaikkan setelah panel "Info run" dibuang: layar
     live sekarang pemakai utama halaman. `min()` menjaga pelajaran lama --
     di layar sempit ia tetap 100% lebar induk, bukan raksasa yang meluber. */
  max-width: min(100%, 980px);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.run-shot-live {
  display: none;
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--v-fail);
}
.run-panel[data-state="RUNNING"] .run-shot-live { display: inline-block; animation: pulse 1.2s infinite; }
.run-shot-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-faint);
  text-align: center;
  padding: 0 1.5rem;
}
.run-screenshot {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--bg-inset);
  cursor: zoom-in;
}

/* Item 3 (ui-modal-steps plan): checklist langkah panel Info run/batch --
   layout only, warna dari --text-dim/--text existing. */
.run-steps { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; }
.run-step-mark { display: inline-block; width: 1.2em; font-family: var(--font-mono); color: var(--text-dim); }

/* Paket 3 (Step 3.1, opus-loop iterasi 2): SATU timeline vertikal --
   menggantikan panel Progres+screenshot+filmstrip yang dulu terpisah dari
   checklist. Langkah selesai = baris ringkas (redup halus); berjalan =
   melebar + latar tersorot (kebagian jam/aktivitas/screenshot/filmstrip,
   dipindah poll.js ke dalamnya); belum jalan = redup penuh. Warna TETAP dari
   token existing (--text-dim/--text/--surface-2/--kalibrasi), nol literal baru. */
.run-timeline { gap: 0.1rem; }
.run-timeline .run-step { border-radius: 6px; padding: 0.3rem 0.4rem; transition: background-color 200ms ease, opacity 200ms ease; }
.run-timeline .run-step-row { display: flex; align-items: baseline; gap: 0.15rem; }
.run-timeline .run-step--pending { opacity: 0.45; }
.run-timeline .run-step--done .run-step-why { opacity: 0.85; }
.run-timeline .run-step--running {
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 0.6rem 0.7rem;
}
.run-timeline .run-step--running .run-step-mark { color: var(--kalibrasi); }
.run-timeline .run-step--running .run-step-row { font-weight: 600; }

/* Detail block (jam + cerita agent + screenshot + filmstrip) -- poll.js
   memindahkannya (BUKAN menggandakan) ke dalam baris langkah yang sedang
   berjalan setiap render; posisi default (di luar <li> mana pun, lihat
   template) hanya dipakai job TANPA daftar langkah (mis. calibrate-login). */
.run-step-detail { margin-top: 0.6rem; }
.run-step--running .run-step-detail { margin-top: 0.6rem; }

/* Console mentah kini terlipat (Step 3.3, plan): nol perubahan warna, cuma
   pembungkus <details> di atas .run-consoles existing. */
.run-console-details { margin-top: 1.4rem; }
.run-console-details > summary { cursor: pointer; font-size: 0.85rem; color: var(--text-dim); margin-bottom: 0.8rem; }
.run-console-details > summary:hover { color: var(--text); }

/* Batch (spec batch-live-view): strip chip status per-skenario -- warna dari
   `.badge-*` EXISTING (lihat poll.js renderBatch), di sini hanya layout. */
.batch-summary { margin-bottom: 1.2rem; }
.batch-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
}
.batch-chips .badge a { color: inherit; text-decoration: underline; }

/* konsol log: SENGAJA gelap di kedua theme (token `--log-*`) — konsol ya konsol */
/* Console + network SIDE-BY-SIDE (Kevin 07-20); menumpuk di layar sempit. */
.run-consoles { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.run-consoles > .run-console { flex: 1 1 26rem; min-width: 0; }
.run-netlog-scroll { max-height: 20rem; overflow: auto; }
.run-console {
  background: var(--log-bg);
  border-radius: 5px;
  padding: 0.9rem 1rem;
  box-shadow: var(--shadow-sm);
}
.run-console-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--log-dim);
  margin-bottom: 0.6rem;
}
.run-console-dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--log-text); }
.run-log {
  display: none;
  max-height: 20rem;
  overflow-y: auto;
  color: var(--log-text);
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}
/* Live network table — konsisten dgn .run-console (gelap kedua tema, spt konsol). */
.run-netlog { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 0.75rem; color: var(--log-text); }
.run-netlog thead th { text-align: left; color: var(--text-faint); font-weight: 600; padding: 0.2rem 0.5rem; border-bottom: 1px solid color-mix(in srgb, var(--log-text) 25%, transparent); }
.run-netlog td { padding: 0.15rem 0.5rem; vertical-align: top; }
.run-netlog-url { word-break: break-all; max-width: 32rem; }
.run-netlog .net-2xx { color: var(--log-text); }
.run-netlog .net-3xx { color: var(--kalibrasi); }
.run-netlog .net-err { color: var(--perlu-review); font-weight: 700; }
.run-netlog-empty { margin: 0.4rem 0.5rem; font-size: 0.78rem; }

/* kursor berkedip saat run berjalan */
.run-panel[data-state="RUNNING"] .run-console-head::after {
  content: "▋";
  color: var(--log-text);
  animation: blink 1s step-start infinite;
  margin-left: auto;
}
@keyframes pulse { 50% { opacity: 0.35; } }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- review queue ---------- */

/* Item 4 (Pilar B v2): breakdown chip per tipe di kartu skenario `/review`. */
.review-scen-types { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }

.review-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  margin-bottom: 1.1rem;
  background: var(--bg-inset);
}
.review-card h3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: -1rem -1.1rem 0.85rem;
  padding: 0.7rem 1.1rem;
  font-size: 0.95rem;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border);
  border-radius: 8px 8px 0 0;
}
.review-step { font-size: 0.8rem; color: var(--text-dim); font-weight: 500; }
.review-card h3 .chip { margin-left: auto; }

/* Chip netral (tipe item review): sengaja TANPA warna per-tipe — bobot/
   severity bukan milik UI utk mengarang (north-star Pilar B). */
.chip {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-dim);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.15rem 0.45rem;
  white-space: nowrap;
}

.review-aksi { margin: 0 0 0.35rem; font-size: 0.9rem; }
.review-card textarea {
  width: 100%;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
  font-family: var(--font-sans);
  margin-top: 0.4rem;
}

input[type="radio"], input[type="checkbox"] {
  accent-color: var(--accent);
  width: 1rem;
  height: 1rem;
}

.review-group {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.9rem 0.7rem;
  margin: 0.9rem 0 0;
  background: var(--bg-raised);
}
.review-group legend {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  padding: 0 0.4rem;
}

.review-choice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  cursor: pointer;
}
.review-choice:hover { background: var(--bg-inset); }
.review-choice--custom { flex-wrap: wrap; }
.review-choice--custom input[type="text"] {
  flex: 1;
  min-width: 16rem;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 0.45rem 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}
.review-choice--custom input[type="text"]:focus { outline: none; border-color: var(--accent); }

/* Field keputusan di halaman kalibrasi. Aturan textarea satu-satunya dulu
   di-scope ke `.review-card`, sementara halaman ini memakai `.cal-keputusan` —
   jadi `.review-field` NOL aturan: labelnya inline dan <textarea>-nya tampil
   sbg kotak telanjang mungil di sampingnya (temuan Kevin 2026-07-27). Label
   naik ke atas, kontrol selebar kolom, dan fokusnya kelihatan. */
.review-field { display: block; margin-top: 0.8rem; }
.review-field > span {
  display: block;
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-bottom: 0.35rem;
}
.review-field textarea,
.review-field input[type="text"],
.cal-keputusan textarea {
  width: 100%;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.88rem;
}
.review-field textarea:focus,
.review-field input[type="text"]:focus,
.cal-keputusan textarea:focus { outline: none; border-color: var(--accent); }

/* Chip filter dashboard — pengganti nav "Review" (Kevin 2026-07-27). */
.scen-filter { margin: 0 0 0.8rem; }

/* Blok keputusan penanda app-level yang dilipat masuk ke baris langkah
   (menggantikan lompatan ke halaman terpisah). Dibedakan haluspun dari
   keputusan per-skenario di sekitarnya: yang ini berlaku ke SEMUA skenario
   pemakai tag, jadi tak boleh terbaca seperti pilihan lokal. */
.cal-appmarker {
  margin-top: 0.6rem;
  padding: 0.6rem 0.7rem 0.7rem;
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  background: var(--bg-inset);
}
.cal-appmarker .btn-primary { margin-top: 0.5rem; }

/* Baris pilihan di fieldset keputusan: satu per baris, kotak sendiri, supaya
   radio + labelnya tak menempel ragged seperti teks biasa. */
.cal-keputusan .review-choice {
  border: 1px solid var(--border);
  background: var(--bg-raised);
  margin-top: 0.4rem;
}
.cal-keputusan .review-choice:hover { border-color: var(--accent); background: var(--bg-inset); }
.cal-keputusan .review-choice code { font-size: 0.85rem; }
/* Input "ganti dengan penanda ini" jatuh ke baris sendiri di layar sempit —
   `min-width: 16rem` bikin dia terjepit di tablet (screenshot Kevin). */
.review-choice--custom input[type="text"] { min-width: 0; }
@media (max-width: 720px) {
  /* Radio tetap sebaris dgn labelnya (radio menggantung sendirian = terbaca
     seperti pilihan kosong); yang turun ke baris sendiri cuma inputnya. */
  .review-choice--custom > span { flex: 1; }
  .review-choice--custom input[type="text"] { flex: 1 0 100%; }
}
/* Chip + prosa penjelas di satu baris: beri jarak, jangan dempet. */
.cal-keputusan .cal-kosong .chip { margin-right: 0.4rem; }

.review-keputusan { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.review-keputusan .review-choice {
  border: 1px solid var(--border);
  background: var(--bg-inset);
  padding: 0.45rem 0.9rem;
}
.review-keputusan .review-choice:hover { border-color: var(--accent); }

.review-screenshot-link { display: inline-block; line-height: 0; }
.review-screenshot {
  max-width: 100%;
  max-height: 260px;
  width: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 0.6rem 0 0.15rem;
}
.review-screenshot-hint { margin: 0 0 0.4rem; font-size: 0.72rem; color: var(--text-dim); }
.review-result { margin-bottom: 1rem; }
.review-alasan, .review-info { font-size: 0.8rem; color: var(--text-dim); margin: 0.2rem 0; }
.review-marker-meta { font-size: 0.78rem; color: var(--text-faint); }
.review-pertanyaan { font-size: 0.9rem; margin: 0.4rem 0; }
.review-submit { margin-top: 0.4rem; }
.review-apply-log { margin-bottom: 1.2rem; }
.review-apply-log summary { font-size: 0.82rem; color: var(--text-dim); cursor: pointer; margin-bottom: 0.5rem; }

/* ---------- report shell (iframe) ---------- */

.report-frame {
  width: 100%;
  height: calc(100dvh - 11rem);
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
}
/* Judul halaman: identitas (h1) di kiri, status/aksi di kanan — satu baris
   yang menjawab "aku di mana & bagaimana keadaannya" sebelum panel apa pun. */
.page-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}
.page-head h1 { font-size: 1.25rem; margin: 0; font-weight: 600; }
.page-head h1 code { font-family: var(--font-mono); }
/* Dorong-ke-kanan HANYA bila memang diminta: dulu `> :last-child` menendang
   apa pun yang kebetulan terakhir (mis. "App build") ke tepi jauh, terputus
   dari judul yang ia terangkan. */
.page-head .push-right { margin-left: auto; }

/* ---------- app list (landing + admin apps) ----------
   Kartu, bukan bullet: tiap app satu target klik selebar kartu (touch >=44px),
   nama identity-bearing (mono) di kiri, aksi "Buka" di kanan. Grid auto-fill
   supaya 1 app tak melar sendiri & banyak app menata rapi. */
.app-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 1rem;
}
.app-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1.4rem 1.5rem;
  box-shadow: var(--shadow-sm);
  color: var(--text);
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
.app-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); transform: translateY(-2px); text-decoration: none; }
.app-card-top { display: flex; align-items: center; justify-content: space-between; }
.app-initial {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 4px;
  background: var(--accent);
  color: var(--accent-contrast);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.app-scenarios { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-faint); }
.app-card-name { font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem; }
.app-card-host { font-size: 0.85rem; color: var(--text-dim); margin-top: -0.4rem; }
.app-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  padding-top: 0.85rem;
  margin-top: 0.35rem;
}
.app-card-role { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-dim); }
.app-card-go { color: var(--link); font-size: 0.9rem; font-weight: 600; white-space: nowrap; }
.app-card:hover .app-card-go { color: var(--accent-hover); }

/* Item D (login-cal-ui-role-mgmt plan): link "Kelola role" di bawah tiap
   kartu app -- dibungkus wrapper supaya grid `.app-cards` tetap 1 sel/app
   (kartu itu sendiri sudah <a>, tak bisa menaruh <a> lain di dalamnya). */
.app-card-wrap { display: flex; flex-direction: column; gap: 0.4rem; }
.app-card-roles-link { align-self: flex-start; font-size: 0.85rem; color: var(--text-dim); }
.app-card-roles-link:hover { color: var(--link); }

/* ---------- banner (panduan / sukses) ----------
   Kotak keterangan langkah-berikutnya: garis-kiri accent supaya terbaca sbg
   panduan (bukan error). Varian .ok = hijau terverifikasi utk konfirmasi. */
.banner {
  max-width: 72ch;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  margin: 1rem 0 1.5rem;
  font-size: 0.9rem;
  line-height: 1.5;
}
.banner p { margin: 0 0 0.4rem; }
.banner p:last-child { margin-bottom: 0; }
.banner ol { margin: 0.5rem 0 0; padding-left: 1.3rem; }
.banner ol li { padding: 0.2rem 0; }
.banner.ok { border-left-color: var(--terverifikasi); }

/* ---------- wizard buat-app (4 langkah) ----------
   Stepper tipografis di atas + kartu satu-langkah-per-layar; navigasi klien
   (poin nav di bawah). Kredensial SUT TAK PERNAH diketik — hanya nama env var
   (dilakukan di box). Field satu langkah tetap di DOM (tersembunyi) → submit
   final = satu POST utuh ke apps_create. */
.wiz-stepper {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 60rem;
}
.wiz-node-row { display: flex; align-items: center; margin-bottom: 0.5rem; }
.wiz-node {
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  border-radius: 3px;
  border: 1.5px solid var(--border-strong);
  background: var(--bg-raised);
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wiz-line { flex: 1; height: 2px; background: var(--border); margin: 0 0.3rem; }
.wiz-step.done .wiz-node { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.wiz-step.done .wiz-line { background: var(--accent); }
.wiz-step.current .wiz-node { border-color: var(--link); color: var(--link); box-shadow: 0 0 0 3px color-mix(in srgb, var(--link) 22%, transparent); }
.wiz-node-label { font-family: var(--font-heading); font-weight: 700; font-size: 0.8rem; }
.wiz-step:not(.done):not(.current) .wiz-node-label { color: var(--text-faint); }

.wiz-panel {
  max-width: 60rem;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.4rem 1.5rem;
  box-shadow: var(--shadow);
}
.wiz-page-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; margin: 0 0 0.2rem; }
.wiz-page-lede { color: var(--text-dim); font-size: 0.9rem; margin: 0 0 1.3rem; }
.wiz-field { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1.1rem; }
.wiz-field label { font-size: 0.82rem; font-weight: 600; color: var(--text-dim); }
.wiz-field input,
.wiz-field textarea,
.wiz-field select,
.writeback-form select {
  width: 100%;
  min-height: 2.75rem;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 0.55rem 0.7rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
}
.wiz-field textarea {
  min-height: 6rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.5;
  resize: vertical;
}
.wiz-field input:focus,
.wiz-field textarea:focus,
.wiz-field select:focus,
.writeback-form select:focus { outline: none; border-color: var(--accent); }
.wiz-hint { font-size: 0.78rem; color: var(--text-faint); margin: 0; }

.wiz-review {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem 1.1rem;
  margin-bottom: 1.1rem;
}
.wiz-review-eyebrow { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.7rem; }
.wiz-review-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.wiz-review-list li { display: flex; gap: 0.6rem; font-size: 0.88rem; line-height: 1.5; }
.wiz-review-num { font-family: var(--font-mono); color: var(--link); font-weight: 600; }

.wiz-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
}
.wiz-back {
  padding: 0.5rem 1.1rem;
  min-height: 2.75rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  border: 1px solid var(--border-strong);
  background: var(--bg-raised);
  color: var(--text);
  cursor: pointer;
}
.wiz-back:hover:not(:disabled) { border-color: var(--accent); }
.wiz-back:disabled { opacity: 0.45; cursor: default; }
.wiz-primary { cursor: pointer; }
@media (max-width: 640px) {
  .wiz-stepper { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .wiz-line { display: none; }
}

/* ---------- admin: shared ---------- */
.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.admin-head .page-title { margin-bottom: 0.4rem; }
/* Tab bar (Kelola user | Aplikasi): underline-accent aktif, pola sama topnav. */
.admin-tabs { display: flex; gap: 1.2rem; border-bottom: 1px solid var(--border); margin: 0 0 1.5rem; }
.admin-tabs a {
  color: var(--text-dim);
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.5rem 0.1rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.admin-tabs a:hover { color: var(--text); text-decoration: none; }
.admin-tabs a.active { color: var(--text); border-bottom-color: var(--accent); }
.text-faint { color: var(--text-faint); }

.admin-user-cell { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.admin-user-avatar {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 4px;
  background: var(--accent);
  color: var(--accent-contrast);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Role badge: admin menonjol (accent), qa netral. */
.role-badge {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
}
.role-badge--admin { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.role-badge--qa { color: var(--text-dim); background: var(--bg-inset); border-color: var(--border); }
[data-theme="dark"] .role-badge--admin { color: var(--link); border-color: color-mix(in srgb, var(--link) 40%, transparent); }

/* ---------- admin: kelola user ---------- */
.admin-create {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  max-width: 60rem;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin: 1.25rem 0 1.5rem;
  box-shadow: var(--shadow);
}
.admin-create input,
.admin-create select {
  min-height: 2.75rem;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 0.5rem 0.65rem;
  font-size: 0.9rem;
}
.admin-create input:focus, .admin-create select:focus { outline: none; border-color: var(--accent); }

/* Form detail login-cal (tambah role / perbarui kredensial / resep): kartu
   wiz-panel + field berlabel wiz-field — SATU bahasa form dgn wizard
   create-app; pair = 2 kolom di layar lebar, tumpuk di sempit. */
.login-cal-form { margin: 0.75rem 0 0.5rem; }
.login-cal-form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
@media (max-width: 640px) { .login-cal-form-pair { grid-template-columns: 1fr; } }
.role-actions { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.role-add-cta { margin: 1.1rem 0 1.5rem; }

/* View read-only hasil kalibrasi login */
/* Filmstrip: screenshot per-aksi agent (tangkap keadaan transient) */
.filmstrip { display: flex; gap: 0.5rem; overflow-x: auto; max-width: 100%; padding: 0.3rem 0 0.9rem; }
.filmstrip:empty { display: none; }
.filmstrip a { flex: 0 0 auto; }
.filmstrip img { height: 8rem; width: auto; border: 1px solid var(--border); border-radius: 4px; display: block; }
.filmstrip img:hover { border-color: var(--accent); }

/* Baris langkah yang PUNYA bukti: bisa diklik untuk menaikkan screenshot-nya
   ke layar besar di kanan. Yang terpilih ditandai supaya QA tahu layar kanan
   sedang menampilkan langkah yang mana (tanpa ini, klik = layar berubah tanpa
   penjelasan). */
.run-step--selectable { cursor: pointer; }
.run-step--selectable:hover { background: var(--bg-inset); }
.run-step--selected { background: var(--bg-inset); box-shadow: inset 3px 0 0 var(--accent); }

.result-markers { list-style: none; margin: 0.4rem 0 1.2rem; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.result-markers li { font-size: 0.9rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.6rem; }
.result-marker-type { font-size: 0.78rem; color: var(--text-dim); }
.result-marker-cite { font-size: 0.72rem; color: var(--text-faint); font-family: var(--font-mono); word-break: break-all; }
.result-recipe {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.7rem 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.5;
  white-space: pre-wrap;
  max-width: 60rem;
}

.admin-users { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.admin-users th {
  text-align: left;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border);
}
.admin-users td { padding: 0.7rem 0.6rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.admin-users tr:last-child td { border-bottom: none; }
.admin-users td form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.admin-users td > form + form { margin-top: 0.45rem; }
.admin-users td label { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; margin-right: 0.4rem; }
.admin-users input[type="password"] {
  max-width: 9rem;
  min-height: 2.4rem;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 0.4rem 0.55rem;
  font-size: 0.85rem;
}
.admin-users input[type="password"]:focus { outline: none; border-color: var(--accent); }
/* aksi tabel = sekunder; Hapus (destruktif) diberi warna bahaya + dipisah */
.admin-users button {
  min-height: 2.4rem;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 0.4rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 600;
}
.admin-users button:hover { border-color: var(--accent); }
.admin-users button.danger { color: var(--perlu-review); }
.admin-users button.danger:hover {
  border-color: var(--perlu-review);
  background: color-mix(in srgb, var(--perlu-review) 10%, transparent);
}

/* ---------- ganti password ---------- */
.account-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 22rem;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.3rem 1.4rem;
  box-shadow: var(--shadow);
}
.account-form label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.82rem; color: var(--text-dim); }
.account-form input {
  min-height: 2.75rem;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 0.55rem 0.7rem;
  font-size: 0.95rem;
}
.account-form input:focus { outline: none; border-color: var(--accent); }
.account-form button { align-self: flex-start; margin-top: 0.3rem; }

.ok { color: var(--terverifikasi); font-size: 0.88rem; }

/* ---------- report overview (screen 7) ----------
   Stat band angka besar + toolbar chip + tabel spreadsheet ber-accordion.
   Agregat lahir di engine (services.report_overview_stats); di sini tampilan
   saja. Verdict = kanal bukti mono (hijau PASS / merah FAIL), bukan warna hias. */
.report-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.report-head .page-lede { margin-bottom: 1.5rem; }
.report-download {
  flex: none;
  background: var(--accent);
  color: var(--accent-contrast);
  border: 0;
  cursor: pointer;
  border-radius: 6px;
  padding: 0.55rem 1.1rem;
  font-weight: 600;
  font-size: 0.88rem;
}
.report-download:hover { background: var(--accent-hover); text-decoration: none; }

.report-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.75rem; }
.report-stat {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.2rem;
  box-shadow: var(--shadow-sm);
}
.report-stat-label { display: block; font-size: 0.72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.5rem; }
.report-stat-num { font-family: var(--font-heading); font-weight: 800; font-size: 2rem; color: var(--text); }
.report-stat-num small { font-size: 1rem; font-weight: 600; color: var(--text-faint); }
.report-stat-num.num-ok { color: var(--terverifikasi); }
.report-stat-num.num-danger { color: var(--perlu-review); }
@media (max-width: 720px) { .report-stats { grid-template-columns: 1fr 1fr; } }

.report-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.report-search {
  min-width: 18rem;
  flex: 1;
  min-height: 2.6rem;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
}
.report-search:focus { outline: none; border-color: var(--accent); }
.report-controls { display: flex; gap: 1.2rem; flex-wrap: wrap; }
/* `.chips`/`.chip-btn` (hasil.html tab · kalibrasi.html filter button) SATU
   bentuk dgn `.chipset`/`.chip` -- selector diperluas, bukan aturan baru
   (T6, iterasi 2: kelas ini dulu yatim, tab tanpa bentuk & tanpa penanda aktif). */
.chipset, .chips { display: flex; align-items: center; gap: 0.4rem; }
.chipset-label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin-right: 0.15rem; }
.chip, .chip-btn {
  border: 1px solid var(--border);
  background: var(--bg-raised);
  color: var(--text-dim);
  border-radius: 5px;
  padding: 0.35rem 0.7rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.chip:hover, .chip-btn:hover { border-color: var(--border-strong); }
.chip.active, .chip-btn.active { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }

.report-section-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; margin: 0 0 0.7rem; }
.report-table-wrap { overflow-x: auto; }
.report-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.report-table th {
  text-align: left;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  font-weight: 600;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  background: var(--bg-inset);
}
.report-table td { padding: 0.55rem 0.7rem; border: 1px solid var(--border); color: var(--text-dim); vertical-align: top; }
.report-cell-id, .report-cell-mono { font-family: var(--font-mono); font-size: 0.82rem; color: var(--text); }
.report-cell-fail { color: var(--v-fail); }
.report-table .v-pass { color: var(--v-pass); font-weight: 700; font-family: var(--font-mono); }
.report-table .v-fail { color: var(--v-fail); font-weight: 700; font-family: var(--font-mono); }
/* W3 (review 07-18): ERROR (infra) & Perlu review verdict punya warna sendiri
   — bukan hijau PASS. Token yg SUDAH ada, nol warna literal. */
.report-table .v-error { color: var(--v-error); font-weight: 700; font-family: var(--font-mono); }
.report-table .v-review { color: var(--v-review); font-weight: 700; font-family: var(--font-mono); }
.report-ai-tag { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; color: var(--ai); border: 1px solid color-mix(in srgb, var(--ai) 45%, transparent); border-radius: 3px; padding: 0 0.25rem; margin-left: 0.4rem; }
.report-row--link { cursor: pointer; }
.report-row--link:hover td { background: var(--bg-inset); }
.report-group-row { cursor: pointer; }
.report-group-row td { background: var(--bg-raised); font-weight: 600; }
.report-group-caret { color: var(--text-faint); margin-right: 0.5rem; }
.report-group-label { color: var(--text); font-family: var(--font-heading); }
.report-group-count { color: var(--text-faint); margin-left: 0.4rem; font-family: var(--font-mono); font-size: 0.78rem; }
.report-empty { color: var(--text-dim); font-size: 0.88rem; padding: 1rem 0; }

/* ---------- report detail per-skenario (screen 8) ----------
   Band run terakhir + verdict besar + tabel verdict per langkah. Verdict
   label/warna dari report_html.verdict_badge_for_step (SSOT); di sini chip saja. */
.rep-head { margin-bottom: 1.4rem; }
.rep-head-id { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.5rem; }
.rep-head-id code { font-family: var(--font-mono); font-size: 0.95rem; font-weight: 600; color: var(--link); }
.rep-title { font-family: var(--font-heading); font-weight: 800; font-size: 1.65rem; margin: 0; max-width: 40ch; line-height: 1.2; }

.rep-band { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.2rem; margin-bottom: 1.5rem; }
.rep-band-card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.2rem 1.4rem;
  box-shadow: var(--shadow-sm);
}
.rep-band-eyebrow { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 1rem; }
.rep-band-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; }
.rep-k { display: block; font-size: 0.72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; }
.rep-v { font-size: 0.9rem; color: var(--text); word-break: break-word; }
.rep-verdict-big { font-size: 0.95rem; color: var(--text-dim); }
.rep-verdict-big b { font-family: var(--font-heading); font-weight: 800; font-size: 2rem; color: var(--text); margin-right: 0.4rem; }
.rep-verdict-big b.num-ok { color: var(--terverifikasi); }
.rep-verdict-big b.num-danger { color: var(--perlu-review); }
.rep-verdict-big b.num-error { color: var(--v-error); }
.rep-verdict-big b.num-review { color: var(--v-review); }
.rep-verdict-sub { font-size: 0.82rem; color: var(--text-dim); margin-top: 0.5rem; }
@media (max-width: 640px) { .rep-band { grid-template-columns: 1fr; } }

.rep-source { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-dim); }
.step-verdict {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.15rem 0.55rem;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.step-verdict.v-pass { color: var(--v-pass); }
.step-verdict.v-fail { color: var(--v-fail); }
.step-verdict.v-review { color: var(--v-review); }
.step-verdict.v-buntu { color: var(--v-buntu); }
.step-verdict.v-skip { color: var(--v-skip); }
.step-verdict.v-error { color: var(--v-error); }
.step-verdict.v-unknown { color: var(--text-dim); }

/* ---------- batch (dashboard section, screen 14) ----------
   Buat/simpan/jalankan grup skenario. Fire = job kind=batch (worker serial);
   verdict per skenario tetap muncul di Report overview (batch_summary). */
.batch-section { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--border); }
.batch-head h2 { font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; margin: 0 0 0.3rem; }
.batch-lede { color: var(--text-dim); font-size: 0.9rem; margin: 0 0 1.2rem; max-width: 62ch; }
.batch-list { list-style: none; margin: 0 0 1.2rem; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.batch-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
}
.batch-item-name { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 0.98rem; }
.batch-item-scen { display: block; font-size: 0.8rem; color: var(--text-dim); margin-top: 0.2rem; }
.batch-item-act { display: flex; align-items: center; gap: 0.6rem; }
.batch-del {
  border: 1px solid var(--border);
  background: var(--bg-raised);
  color: var(--perlu-review);
  border-radius: 6px;
  padding: 0.45rem 0.9rem;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}
.batch-del:hover { border-color: var(--perlu-review); }
.batch-empty { color: var(--text-dim); font-size: 0.88rem; margin: 0 0 1.2rem; }

.batch-create { border: 1px solid var(--border); border-radius: 8px; background: var(--bg-raised); }
.batch-create > summary { cursor: pointer; padding: 0.8rem 1.1rem; font-weight: 600; font-size: 0.9rem; color: var(--link); list-style: none; }
.batch-create > summary::-webkit-details-marker { display: none; }
.batch-create[open] > summary { border-bottom: 1px solid var(--border); }
.batch-form { display: flex; flex-direction: column; gap: 1rem; padding: 1.1rem; }
.batch-form-name { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.82rem; font-weight: 600; color: var(--text-dim); max-width: 22rem; }
.batch-form-name input {
  min-height: 2.6rem;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 0.5rem 0.7rem;
  font-size: 0.95rem;
}
.batch-form-name input:focus { outline: none; border-color: var(--accent); }
.batch-form-scen { border: 1px solid var(--border); border-radius: 6px; padding: 0.8rem 1rem; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem; }
.batch-form-scen legend { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); padding: 0 0.4rem; }
.batch-check { display: flex; align-items: baseline; gap: 0.45rem; font-size: 0.85rem; color: var(--text-dim); }
.batch-check code { font-family: var(--font-mono); font-size: 0.78rem; color: var(--link); flex: none; }
.batch-check span { color: var(--text); }
.batch-form-actions { display: flex; align-items: center; gap: 0.6rem; }
@media (max-width: 640px) { .batch-form-scen { grid-template-columns: 1fr; } }

/* ---------- app-modal (native <dialog>, Item 5a/5b) ----------
   `showModal()`/`close()` give ESC/backdrop/focus-trap for free -- no hand-
   rolled overlay JS. Backdrop tint via color-mix off --text (works both
   themes, no new literal). */
.app-modal {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.2rem 1.3rem;
  background: var(--bg-raised);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  width: min(34rem, 92vw);
}
.app-modal::backdrop, .imgmodal::backdrop { background: color-mix(in srgb, var(--text) 45%, transparent); }
/* Dialog ber-form detail (add/edit role): butuh napas lebih utk pair 2 kolom. */
.app-modal-wide { width: min(44rem, 94vw); }
.app-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.3rem; }
.app-modal-head h2 { margin: 0; font-size: 1.05rem; }
.app-modal-close {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.3rem;
  line-height: 1;
  padding: 0.2rem 0.4rem;
}
.app-modal-close:hover { color: var(--text); }
.app-modal-hint { margin: 0 0 0.9rem; font-size: 0.82rem; color: var(--text-dim); }

/* ---------- imgmodal (item 1/2, ui-modal-steps plan): viewer gambar + zoom
   klik-toggle, SATU komponen utk semua halaman evidence -- delegasi klik via
   imgmodal.js, markup di base.html. Padding 0 supaya event.target === dialog
   akurat mendeteksi klik backdrop (imgmodal.js). */
.imgmodal { padding: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-raised); max-width: 92vw; max-height: 92vh; }
.imgmodal-close { position: absolute; top: 0.4rem; right: 0.4rem; z-index: 1; background: var(--bg-raised); border-radius: 999px; }
.imgmodal-scroll { overflow: auto; max-width: 92vw; max-height: 92vh; }
.imgmodal-scroll img { display: block; max-width: 100%; max-height: 88vh; cursor: zoom-in; }
.imgmodal-scroll img.zoomed { max-width: none; max-height: none; cursor: zoom-out; }

.qa-note-list { max-height: 16rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 0.9rem; }
.qa-note-row { border: 1px solid var(--border); border-radius: 6px; padding: 0.55rem 0.7rem; background: var(--surface-2); }
.qa-note-meta { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-faint); margin-bottom: 0.25rem; }
.qa-note-text { font-size: 0.88rem; line-height: 1.45; white-space: pre-wrap; }
.qa-note-form { display: flex; flex-direction: column; gap: 0.6rem; }
.qa-note-form textarea {
  width: 100%;
  min-height: 4.5rem;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 0.55rem 0.7rem;
  font-family: var(--font-sans);
  resize: vertical;
}

/* Item 5a: kolom "Catatan" di tabel Report overview -- tombol kecil, tak
   ikut warna aksi primer (sekunder). */
.report-qa-btn { font-size: 0.78rem; padding: 0.35rem 0.7rem; min-height: 0; }

/* Item 5b: log mentah SENGAJA gelap di kedua tema, konsisten dgn `.run-console`. */
.run-log-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.4rem 0 1rem; }
.run-log-pre {
  max-height: 24rem;
  overflow-y: auto;
  margin: 0;
  background: var(--log-bg);
  color: var(--log-text);
  border-radius: 6px;
  padding: 0.8rem 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---------- panel antrean (melayang, semua halaman app) ---------- */
/* Melayang kanan-bawah, BUKAN kolom sidebar: nol perubahan layout `.shell`
   di 20+ halaman yang sudah jadi. Hidden saat antrean kosong. */
.queue-panel {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 20;
  width: min(22rem, calc(100vw - 2rem));
  max-height: 50vh;
  overflow-y: auto;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 0.8rem 0.9rem;
}
.queue-panel[hidden] { display: none; }
.queue-csrf { display: none; }
.queue-title {
  margin: 0 0 0.5rem;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.queue-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.queue-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
}
.queue-item-judul {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.78rem;
}
.queue-item-state { font-size: 0.68rem; }
.queue-item[data-state="RUNNING"] .queue-item-state { color: var(--kalibrasi); }
.queue-item[data-state="QUEUED"] .queue-item-state { color: var(--draft); }
.queue-item-cancel { font-size: 0.72rem; padding: 0.25rem 0.5rem; min-height: 0; }
.queue-item-cancel.danger { color: var(--perlu-review); }
.queue-lain {
  margin: 0.55rem 0 0;
  font-size: 0.74rem;
  line-height: 1.4;
  color: var(--text-faint);
}
.queue-lain:empty { display: none; }

/* ---------- banner halt + alasan per langkah (Paket 1: kejujuran) ---------- */
/* Run yang DIHENTIKAN di tengah harus terbaca berbeda dari run yang tuntas.
   Warna dari token verdict yang sudah ada — bukan palet baru. */
.run-halt {
  margin: 0 0 0.75rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--perlu-review);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1.5;
}
.run-halt[hidden] { display: none; }

/* Alasan dari engine di bawah tiap langkah — mono karena ini kutipan artefak,
   bukan prosa UI. */
.run-step-why {
  display: block;
  margin: 0.15rem 0 0.35rem 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--text-faint);
}

/* ---------- halaman Kalibrasi kanonik (Paket 2) ---------- */
.cal-toolbar { margin: 1rem 0 0.75rem; }
.cal-rerun { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0 0 1rem; }
.cal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.cal-step {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-raised);
  padding: 0.85rem 0.95rem;
}
.cal-step[hidden] { display: none; }
.cal-head { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.cal-n {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-faint);
  min-width: 1.6rem;
}
.cal-aksi { flex: 1; min-width: 12rem; font-weight: 500; }
.cal-verdict { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-dim); }
.cal-alasan {
  margin: 0.3rem 0 0 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--text-faint);
}
.cal-meta { margin: 0 0 0.3rem; font-size: 0.72rem; color: var(--text-faint); }
.cal-body { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: 1rem; margin-top: 0.7rem; }
.cal-body > * { min-width: 0; }
.cal-shot { width: 100%; border: 1px solid var(--border); border-radius: 4px; display: block; }
.cal-label { margin: 0 0 0.25rem; font-size: 0.74rem; color: var(--text-dim); }
.cal-kosong { margin: 0.25rem 0; font-size: 0.74rem; color: var(--text-faint); }
.cal-kutipan {
  margin: 0 0 0.6rem;
  padding: 0.5rem 0.6rem;
  background: var(--bg-inset);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.cal-kutipan mark { background: var(--accent-soft); color: var(--text); font-weight: 600; }
.cal-pertanyaan { margin: 0.3rem 0; font-size: 0.82rem; }
.cal-peringatan { margin: 0.3rem 0; font-size: 0.76rem; color: var(--perlu-review); }
.cal-keputusan {
  margin: 0.8rem 0 0;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface-2);
}
.cal-keputusan legend { font-size: 0.76rem; color: var(--text-dim); padding: 0 0.3rem; }
.cal-submit { margin: 1.2rem 0; }

@media (max-width: 720px) {
  .cal-body { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- langkah berjalan: jam + cerita agent (Paket 3) ---------- */
/* Selama satu langkah panjang, ini satu-satunya yang bergerak di layar. */
.run-jalan {
  margin: 0 0 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--kalibrasi);
}
.run-jalan[hidden], .run-aktivitas-wrap[hidden] { display: none; }
.run-aktivitas-wrap {
  margin: 0 0 0.75rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
}
.run-aktivitas-label { margin: 0 0 0.35rem; font-size: 0.74rem; color: var(--text-dim); }
.run-aktivitas-catatan { color: var(--text-faint); font-style: italic; }
.run-aktivitas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.run-aktivitas li {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.run-aktivitas li:last-child { color: var(--text); }

/* ---------- halaman Setup + tab Hasil (Paket 3) ---------- */
.setup-list { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: 0.75rem; }
.setup-list li {
  display: grid;
  gap: 0.2rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-raised);
}
.setup-list li span { font-size: 0.8rem; color: var(--text-dim); }
.hasil-tabs { margin: 1rem 0; }

/* Picker workbook sumber + tombol unduh berdampingan (select-nya meminjam
   bentuk field wizard di atas -- selector diperluas, bukan aturan warna baru). */
.writeback-form { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.writeback-form select { width: auto; max-width: 22ch; min-height: 2.2rem; font-size: 0.85rem; }