/* Dampak, Belanja and Dana Darurat pages. Loaded only on those pages, after riil.css, and built from
   its tokens: nothing here introduces a colour, a radius or a font the rest of the site does not use. */

/* ---------- the four kinds of number ----------
   What you typed, what Riil computed, what Riil assumed, and official data with its date and source.
   Official data and assumptions are marked where they appear; typed and computed need no badge. */
.dmp-badge{ display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:2px 8px; border-radius:999px; vertical-align:1px; white-space:nowrap; }
.dmp-badge.is-data{ background:var(--accent-soft); color:var(--accent); }
.dmp-badge.is-assume, .dmp-badge.is-example{ background:var(--warn-soft); color:var(--warn-ink); }
.dmp-badge.is-exact{ background:var(--trust-soft); color:var(--trust-ink); }
.dmp-badge.is-estimate{ background:var(--bg-inset); color:var(--ink-muted); border:1px solid var(--line); }
.dmp-src{ margin-top:6px; font-size:.76rem; color:var(--ink-muted); line-height:1.5; }
.dmp-src a{ color:inherit; text-underline-offset:2px; }
.dmp-src .is-stale{ display:block; margin-top:4px; color:var(--warn-ink); }

/* ---------- arriving from an article ---------- */
.dmp-banner{ display:none; margin-bottom:18px; padding:12px 16px; border-radius:14px; background:var(--accent-soft); color:var(--ink); font-size:.9rem; line-height:1.5; border-left:4px solid var(--accent); }
.dmp-banner.show{ display:block; }
.dmp-banner a{ color:var(--accent); font-weight:600; }

/* ---------- remembering numbers on this device ---------- */
.dmp-remember{ margin-top:14px; padding:12px 14px; border-radius:12px; background:var(--bg-inset); font-size:.82rem; color:var(--ink-muted); line-height:1.5; }
.dmp-remember label{ display:flex; gap:10px; align-items:flex-start; color:var(--ink); font-weight:600; cursor:pointer; }
.dmp-remember input{ margin-top:3px; width:18px; height:18px; accent-color:var(--accent); flex-shrink:0; }
.dmp-remember p{ margin:4px 0 0 28px; }
.dmp-remember .dmp-applied{ display:block; margin:6px 0 0 28px; color:var(--trust-ink); }

/* ---------- field extras ---------- */
.dmp-inline{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:end; }
.dmp-inline .seg{ min-width:150px; }
.dmp-quick{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.dmp-quick .chip{ padding:7px 11px; font-size:.82rem; }
.dmp-group{ margin-top:22px; }
.dmp-group:first-child{ margin-top:0; }
.dmp-hidden{ display:none !important; }
.field select{ appearance:auto; }

/* ---------- item rows (dollar costs, trip components) ---------- */
.dmp-rows{ display:flex; flex-direction:column; gap:10px; margin-bottom:10px; }
.dmp-row{ position:relative; display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); gap:0 10px; align-items:end; padding:12px 12px 2px; background:var(--face, var(--bg-inset)); border:1px solid var(--hair, var(--line)); border-radius:var(--r-md, 14px); }
.dmp-row .field{ margin-bottom:10px; min-width:0; }
.dmp-row .fl{ display:block; font-size:.76rem; font-weight:600; color:var(--ink); margin-bottom:6px; }
.dmp-row .field input, .dmp-row .field select{ padding-block:10px; font-size:.95rem; }
.dmp-row .prefix-wrap, .dmp-row .suffix-wrap{ display:block; }
.dmp-row .dmp-row-foot{ grid-column:1 / -1; display:flex; justify-content:space-between; align-items:center; gap:10px; margin:-2px 0 8px; }
.dmp-row .dmp-del{ min-height:36px; padding:6px 10px; border-radius:10px; font-size:.8rem; font-weight:600; color:var(--ink-muted); }
.dmp-row .dmp-del:hover{ color:var(--reveal-ink); background:var(--reveal-soft); }
.dmp-row.is-example{ border-style:dashed; }
.dmp-row-note{ font-size:.74rem; color:var(--ink-muted); }
.dmp-row.cols-2{ grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); }
.dmp-row.cols-qty{ grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,.55fr); }
@media (max-width:560px){
  .dmp-row, .dmp-row.cols-qty{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .dmp-row > .field:first-child{ grid-column:1 / -1; }
  .dmp-row.cols-2{ grid-template-columns:minmax(0,1fr); }
}

/* ---------- results ---------- */
.dmp-hero-line{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 12px; }
.rr-hero.is-down{ color:var(--trust-ink); }
.rr-hero.is-flat{ color:var(--ink); }
.dmp-flow{ margin-top:14px; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; font-size:.95rem; color:var(--ink-muted); }
.dmp-flow .num{ font-family:var(--font-body); font-variant-numeric:tabular-nums; color:var(--ink); font-weight:600; }
.dmp-flow .arrow{ color:var(--ink-decor); }
.dmp-stats{ margin-top:20px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.dmp-stats .rr-stat .v{ font-weight:600; }
.dmp-stats .rr-stat .k .dmp-badge{ margin-left:4px; }
@media (max-width:380px){ .dmp-stats{ grid-template-columns:minmax(0,1fr); } }
.dmp-note{ margin-top:14px; font-size:.84rem; line-height:1.55; padding:12px 14px; border-radius:12px; background:var(--bg-inset); color:var(--ink-muted); }
.dmp-note.is-warn{ background:var(--warn-soft); color:var(--warn-ink); }
.dmp-note.is-good{ background:var(--trust-soft); color:var(--trust-ink); }
.dmp-note strong{ color:inherit; }
.dmp-assume{ margin-top:14px; font-size:.8rem; line-height:1.6; color:var(--ink-muted); }
.dmp-assume summary{ cursor:pointer; font-weight:600; color:var(--ink); min-height:40px; display:flex; align-items:center; }
.dmp-assume ul{ margin:6px 0 0 18px; }
.dmp-assume li{ margin-top:4px; }

.dmp-table-wrap{ margin-top:18px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.dmp-table{ width:100%; border-collapse:collapse; font-size:.84rem; }
.dmp-table th, .dmp-table td{ padding:9px 10px; text-align:right; border-bottom:1px solid var(--line); white-space:nowrap; font-variant-numeric:tabular-nums; }
.dmp-table th:first-child, .dmp-table td:first-child{ text-align:left; white-space:normal; }
.dmp-table thead th{ font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); }
.dmp-table tr.is-on td{ background:var(--reveal-soft); font-weight:600; }

.dmp-bars{ margin-top:18px; display:flex; flex-direction:column; gap:10px; }
.dmp-bar-top{ display:flex; justify-content:space-between; gap:12px; font-size:.84rem; }
.dmp-bar-top span:first-child{ color:var(--ink); min-width:0; overflow-wrap:anywhere; }
.dmp-bar-top .num{ font-variant-numeric:tabular-nums; color:var(--ink); font-weight:600; white-space:nowrap; }
.dmp-bar-track{ margin-top:5px; height:8px; border-radius:999px; background:var(--bg-inset); overflow:hidden; }
.dmp-bar-fill{ height:100%; border-radius:999px; background:var(--accent); }
.dmp-bar-fill.is-reveal{ background:var(--reveal); }

.dmp-progress{ margin-top:16px; }
.dmp-progress-track{ position:relative; height:12px; border-radius:999px; background:var(--bg-inset); overflow:visible; }
.dmp-progress-fill{ height:100%; border-radius:999px; background:var(--trust-fill); max-width:100%; }
.dmp-progress-band{ position:absolute; top:-4px; bottom:-4px; border-left:2px solid var(--accent); border-right:2px solid var(--accent); background:var(--accent-soft); border-radius:4px; }
.dmp-progress-legend{ margin-top:8px; display:flex; justify-content:space-between; gap:10px; font-size:.74rem; color:var(--ink-muted); }

.dmp-share{ margin-top:16px; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.dmp-share .btn{ min-height:44px; }
.dmp-share-preview{ display:none; margin-top:12px; max-width:240px; border-radius:14px; box-shadow:var(--shadow); }
.dmp-share-preview.show{ display:block; }
.dmp-share-hint{ font-size:.76rem; color:var(--ink-muted); }

/* ---------- checklist: things to check, never advice ---------- */
.dmp-check{ list-style:none; margin-top:14px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.dmp-check li{ background:var(--bg-elevated); border:1px solid var(--hair, var(--line)); border-radius:var(--r-md, 14px); padding:16px 18px; font-size:.92rem; line-height:1.55; }
.dmp-check li strong{ display:block; margin-bottom:4px; }
.dmp-check a{ display:inline-block; margin-top:6px; padding-block:6px; font-weight:600; color:var(--accent); text-decoration:none; }
@media (max-width:720px){ .dmp-check{ grid-template-columns:minmax(0,1fr); } }

/* ---------- related articles ---------- */
.dmp-related{ margin-top:36px; }
.dmp-related ul{ list-style:none; margin-top:12px; display:grid; gap:10px; }
.dmp-related li a{ display:block; padding:14px 16px; border:1px solid var(--hair, var(--line)); border-radius:var(--r-md, 14px); background:var(--bg-elevated); color:var(--ink); text-decoration:none; font-weight:600; line-height:1.4; }
.dmp-related li a:hover{ border-color:var(--accent); }
.dmp-related li small{ display:block; margin-top:4px; font-weight:500; color:var(--ink-muted); font-size:.78rem; }

/* ---------- the Dampak hub ---------- */
.dmp-hub-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
@media (max-width:820px){ .dmp-hub-grid{ grid-template-columns:minmax(0,1fr); } }
.dmp-event{ display:flex; flex-direction:column; background:var(--bg-elevated); border:1px solid var(--line); border-radius:22px; padding:22px; box-shadow:var(--shadow); }
.dmp-event h2{ font-size:1.18rem; line-height:1.3; }
.dmp-event h3{ margin-top:16px; font-size:.72rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint); }
.dmp-event .dmp-fact{ margin-top:10px; padding:12px 14px; border-radius:12px; background:var(--bg-inset); font-size:.9rem; line-height:1.5; }
.dmp-event .dmp-fact .num{ font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink); }
.dmp-event p, .dmp-event li{ font-size:.9rem; line-height:1.55; color:var(--ink-muted); }
.dmp-event ul{ margin:8px 0 0 18px; }
.dmp-event li{ margin-top:4px; }
.dmp-who{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.dmp-who .chip{ padding:7px 11px; font-size:.82rem; text-align:left; }
.dmp-event .dmp-cta{ margin-top:auto; padding-top:18px; }
.dmp-event .dmp-cta .btn{ width:100%; justify-content:center; min-height:46px; }
.dmp-event.is-mine{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft), var(--shadow); }
.dmp-profile{ margin-top:36px; padding:20px 22px; border-radius:18px; background:var(--bg-inset); }
.dmp-profile h2{ font-size:1.1rem; }
.dmp-profile p{ margin-top:6px; font-size:.9rem; color:var(--ink-muted); line-height:1.55; }
.dmp-profile dl{ margin-top:10px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 14px; font-size:.86rem; }
.dmp-profile dt{ color:var(--ink-muted); }
.dmp-profile dd{ font-variant-numeric:tabular-nums; }
.dmp-profile button{ margin-top:12px; min-height:40px; padding:8px 14px; border-radius:10px; border:1px solid var(--hair-strong, var(--line)); font-weight:600; font-size:.84rem; color:var(--reveal-ink); background:var(--bg-elevated); }

/* ---------- promo screenshot reader (off until configured) ---------- */
.dmp-scan{ margin-bottom:18px; padding:14px 16px; border:1px dashed var(--hair-strong, var(--line)); border-radius:14px; background:var(--bg-elevated); }
.dmp-scan[hidden]{ display:none; }
.dmp-scan p{ font-size:.82rem; color:var(--ink-muted); line-height:1.5; margin-top:6px; }
.dmp-scan .btn{ min-height:44px; }
.dmp-scan-status{ margin-top:8px; font-size:.84rem; }
.dmp-scan-status.is-warn{ color:var(--warn-ink); }
.field input.is-scanned{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }
.dmp-share[hidden]{ display:none; }
.dmp-row .prefix-wrap.is-wide input{ padding-left:52px; }
.dmp-inline > input{ min-width:0; }
.dmp-inline .chip{ min-height:46px; white-space:nowrap; }
/* short choices stay on one row on a phone, instead of the stacked list riil.js makes of 3+ options */
.seg.seg-row.seg-stack{ flex-direction:row; }
.seg.seg-row.seg-stack button{ width:auto; flex:1 1 0; text-align:center; padding:11px 6px; border-bottom:0; white-space:normal; line-height:1.25; }
.seg.seg-row button{ min-height:44px; }
.dmp-assume summary{ list-style:none; }
.dmp-assume summary::-webkit-details-marker{ display:none; }
.dmp-assume summary::after{ content:'+'; margin-left:8px; color:var(--accent); font-weight:700; }
.dmp-assume[open] summary::after{ content:'\2212'; }
details.dmp-more > summary{ min-height:46px; padding:11px 16px; border:1px solid var(--hair-strong, var(--line)); border-radius:12px; background:var(--bg-elevated); color:var(--accent); font-size:.9rem; justify-content:space-between; }
details.dmp-more[open] > summary{ margin-bottom:14px; }

/* hidup-1: sentence-case labels */
.dmp-event h3, .dmp-badge{ text-transform:none; letter-spacing:normal; }