/* Gaya kerangka review pursuit (Ringkasan, Persona, Alur & IA, Arah visual).
   SEMENTARA dan terpisah dari design system Nurtura (web/css/tokens.css, dikunci di P5).
   Warna diambil dari deck strategi Q4 Nurtura (sampel PDF): hijau #1E3A30, cream #F3EFE6, tembaga #B06E44, sage #6B7F75. */

:root {
  --r-bg: #f7f4ee;
  --r-surface: #ffffff;
  --r-sunken: #f0ebe2;
  --r-ink: #1e2a25;
  --r-ink-2: #4c5b54;
  --r-line: #ddd6ca;
  --r-green: #1e3a30;
  --r-green-soft: #e3ebe6;
  --r-copper: #9a5d36;
  --r-copper-soft: #f3e6dc;
  --r-warn: #8a5a12;
  --r-warn-soft: #f6ecd9;

  --r-font-display: "Newsreader", Georgia, serif;
  --r-font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Skala base-4. Aturan hubungan: pasangan teks 4; butir sejenis 8–12; judul ke isi 12–16; antar-blok 24; antar-bagian 48. */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;
  --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.5rem; --fs-2xl: 2rem; --fs-3xl: 2.5rem;
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-full: 999px;
  --content-max: 72rem;
  --gutter: max(var(--sp-4), env(safe-area-inset-left, 0px));
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--r-bg); color: var(--r-ink); font: 400 var(--fs-md)/1.6 var(--r-font-body); font-variant-numeric: tabular-nums; }
img { max-width: 100%; display: block; }
a { color: var(--r-green); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--r-copper); outline-offset: 2px; }

h1, h2, h3 { font-family: var(--r-font-display); font-weight: 600; line-height: 1.2; text-wrap: balance; margin: 0; color: var(--r-green); }
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-md); margin: 0; }
p { margin: 0; max-width: 68ch; }

.wrap { grid-template-columns: minmax(0, 1fr); max-width: var(--content-max); margin: 0 auto; padding-inline: var(--gutter); padding-block: var(--sp-12) var(--sp-16); display: grid; gap: var(--sp-12); }
.stack { display: grid; gap: var(--sp-4); }
.stack-sm { display: grid; gap: var(--sp-1); }
.eyebrow { font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--r-copper); }
.muted { color: var(--r-ink-2); }
.small { font-size: var(--fs-sm); }

.badge { display: inline-flex; align-items: center; padding: 0 var(--sp-2); min-height: var(--sp-6); border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.badge.ok { background: var(--r-green-soft); color: var(--r-green); }
.badge.wait { background: var(--r-warn-soft); color: var(--r-warn); }
.badge.todo { background: var(--r-sunken); color: var(--r-ink-2); }

.card { background: var(--r-surface); border: 1px solid var(--r-line); border-radius: var(--r-lg); padding: var(--sp-6); display: grid; gap: var(--sp-3); align-content: start; min-width: 0; }
.grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }

.table-wrap { overflow-x: auto; border: 1px solid var(--r-line); border-radius: var(--r-md); background: var(--r-surface); }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
th, td { text-align: left; vertical-align: top; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--r-line); }
th { background: var(--r-sunken); font-weight: 700; color: var(--r-ink-2); }
tr:last-child td { border-bottom: none; }

/* Dokumen hasil markdown */
.doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); min-width: 0; }
.doc h1 { margin-bottom: var(--sp-2); }
.doc h2 { margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--r-line); }
.doc h3 { margin-top: var(--sp-4); font-size: var(--fs-lg); }
.doc ul, .doc ol { margin: 0; padding-left: var(--sp-6); display: grid; gap: var(--sp-1); max-width: 72ch; }
.doc pre { margin: 0; padding: var(--sp-4); background: var(--r-surface); border: 1px solid var(--r-line); border-radius: var(--r-md); overflow-x: auto; font-size: var(--fs-sm); line-height: 1.5; }
.doc code { font-size: 0.9em; overflow-wrap: anywhere; }
.doc table { font-size: var(--fs-sm); }
.doc .table-wrap { margin: 0; }

/* Persona */
.persona { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.persona img { width: 8rem; height: 8rem; border-radius: var(--r-lg); object-fit: cover; }
.persona .ai-note { font-size: var(--fs-xs); color: var(--r-ink-2); margin-top: var(--sp-1); }
@media (max-width: 40rem) { .persona { grid-template-columns: minmax(0, 1fr); } .persona img { width: 6rem; height: 6rem; } h1 { font-size: var(--fs-2xl); } }

.label-demo { position: fixed; right: var(--sp-3); bottom: var(--sp-3); z-index: 80; background: var(--r-green); color: #fff; font-size: var(--fs-xs); font-weight: 700; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-full); }