/* ==========================================================================
   Dashboard Pemantauan (field officer, one Puskesmas)

   Sections, top to bottom:
     01 Situasi          summary + four headline figures
     02 Akar masalah     root-cause tree on the UNICEF framework
     03 Tiga temuan      one card per framework level, incl. where it is worst,
                         then the full village × factor table (collapsed)
     i  Keterbatasan     data limitations

   Type scale (px): 12 caption · 14 body-sm · 15 body · 18 lead · 19 h3 · 24 h2 · 40 figure
   Layout reacts to the width of the dashboard column (container queries on
   .dash-body), not the window, so it also works next to the sidebar.
   ========================================================================== */

#page-dash .page-scroll, #page-kab .page-scroll { background: #fff; }


/* ---------- Page header + framework bar ---------- */

.dash-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 20px;
  padding: 20px var(--pad-x) 16px; background: #fff; border-bottom: 1px solid var(--border);
}
.dash-head .grow { flex: 1 1 260px; }
.dash-head h1 { font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -.015em; }
.dash-head p { margin-top: 4px; font-size: 14px; color: var(--text-2); }

.ctl { display: flex; flex-direction: column; flex: 0 1 240px; gap: 5px; }   /* fits the topic name in ID and EN */
.ctl label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.ctl select {
  width: 100%; padding: 8px 30px 8px 10px;
  background: #fff; border: 1px solid var(--border-s); border-radius: 0;
  font: inherit; font-size: 14px; color: var(--text);
}

.fw-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px var(--pad-x);
  background: var(--bg-2); border-bottom: 1px solid var(--border);
  font-size: 13px; line-height: 1.45; color: var(--text-2);
}
.fw-bar b { font-weight: 600; color: var(--text); }
.fw-bar .lock { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-3); }
.fw-bar button {
  margin-left: auto; padding: 0; background: none; border: 0; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--pink); text-decoration: underline; text-underline-offset: 3px;
}


/* ---------- Body + section frame ---------- */

.dash-body { container: dash / inline-size; padding: 0 var(--pad-x) 56px; font-size: 15px; }

.dsec { padding: 36px 0 40px; border-top: 1px solid var(--border-s); }
.dsec:first-child { padding-top: 28px; border-top: 0; }
.dsec-h { max-width: 70ch; margin-bottom: 22px; }
.dsec-n {
  display: inline-block; margin-bottom: 10px; padding: 2px 7px;
  background: var(--pink); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums;
}
.dsec-h h2 { font-size: 24px; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; }
.dsec-h p { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--text-2); }

/* Colour square for a framework level */
.swatch { display: inline-block; flex-shrink: 0; width: 9px; height: 9px; }
.swatch.outcome    { background: var(--lv-outcome); }
.swatch.immediate  { background: var(--lv-immediate); }
.swatch.underlying { background: var(--lv-underlying); }
.swatch.enabling   { background: var(--lv-enabling); }



/* ---------- 01 Situasi ---------- */

.lede-ai {
  padding: 18px 22px 16px; background: var(--pink-l); border-left: 4px solid var(--pink);
  font-size: 18px; line-height: 1.6; color: var(--text);
}
.lede-tag { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--pink); }
.lede-txt { display: block; max-width: 82ch; }
.lede-ai mark { padding: 0 3px; background: #fff; box-shadow: inset 0 -3px 0 rgba(219, 39, 119, .45); color: inherit; font-weight: 600; }
.lede-ai small { display: block; margin-top: 8px; font-size: 12px; font-weight: 400; color: var(--text-3); }

.figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 32px; margin-top: 28px; }
.fig { display: flex; flex-direction: column; min-width: 0; padding-top: 14px; border-top: 2px solid var(--text); }
.fig.main { border-top-color: var(--pink); }
.fig .v { font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.fig .v.pk { color: var(--pink); }
.fig .v small { margin-left: 2px; font-size: 18px; font-weight: 600; letter-spacing: 0; color: var(--text-3); }
.fig .l { margin: 10px 0; font-size: 14px; line-height: 1.45; color: var(--text); }
/* source line sits on the same baseline in every figure */
.fig .s { margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--border); font-size: 12px; color: var(--text-3); }
.fig .s b { font-weight: 600; color: var(--text-2); }
/* value, label and source share rows across the figures, so the source lines meet in one line (also when 2 × 2 on phones) */
@supports (grid-template-rows: subgrid) {
  .fig { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
  .fig .s { margin-top: 0; align-self: start; }
}


/* ---------- 02 Akar masalah (root-cause tree) ---------- */

/* column 1 = level label, columns 2–7 = nodes */
.rca { display: grid; grid-template-columns: 150px repeat(6, minmax(0, 1fr)); column-gap: 12px; }
.rca .lvl {
  display: flex; align-items: flex-start; gap: 8px; grid-column: 1; padding: 16px 0 0; border-top: 1px solid var(--border);
  font-size: 11px; font-weight: 700; line-height: 1.35; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2);
}
.rca .lvl .swatch { width: 10px; height: 10px; margin-top: 1px; }
.rca .row-rule { grid-column: 2 / -1; border-top: 1px solid var(--border); }

.node {
  position: relative; display: flex; flex-direction: column; min-width: 0; margin: 14px 0; padding: 12px 14px;
  background: #fff; border: 1px solid var(--border-s);
}
.node .t { font-size: 14px; font-weight: 700; line-height: 1.3; }
.node .n { margin-top: 8px; font-size: 24px; font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.node .n small { margin-left: 4px; font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--text-3); }
.node .bar { height: 5px; margin-top: 10px; background: var(--bg-3); }
.node .bar i { display: block; height: 100%; background: var(--text-3); }
.node .d { margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--text-2); }

.node.outcome { border: 2px solid var(--text); }
.node.outcome .n { font-size: 32px; color: var(--pink); }
.node.root { border: 2px solid var(--pink); }              /* on the main causal path */
.node.root .bar i { background: var(--pink); }
.node.minor { border-style: dashed; }                       /* not a priority / thin data */
.node.minor .n { color: var(--text-3); }
.node.root::after { content: ''; position: absolute; top: -16px; left: 50%; height: 14px; border-left: 2px solid var(--pink); }

/* Status tag at the top of each node */
.nst { align-self: flex-start; margin-bottom: 8px; padding: 2px 7px; font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: .04em; }
.nst.root  { background: var(--pink); color: #fff; }
.nst.watch { background: var(--warn-bg); color: var(--warn-text); }
.nst.no    { background: var(--bg-3); color: var(--text-2); }
.nst.thin  { background: #fff; color: var(--text-3); border: 1px dashed var(--border-s); }

.rca-key { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 14px; font-size: 13px; color: var(--text-2); }   /* read before the tree */
.rca-key span { display: inline-flex; align-items: center; gap: 8px; }
.k-path { display: inline-block; width: 18px; height: 12px; border: 2px solid var(--pink); }
.k-bar  { display: inline-block; width: 18px; height: 5px; background: var(--pink); }


/* ---------- 03 Tiga temuan utama ----------
   Step row (one per framework level), then one card:
   headline + confidence on top, evidence below in three equal columns. */

.findings { display: grid; gap: 0; }

/* Step row: number + framework level only; the title lives in the card */
.f-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--border-s); border-bottom: 0; }
.f-tab {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; text-align: left; cursor: pointer;
  background: var(--bg-2); border: 0; border-right: 1px solid var(--border-s); border-bottom: 1px solid var(--border-s);
  font: inherit; color: var(--text-3);
}
.f-tab:last-child { border-right: 0; }
.f-tab:hover { background: #fff; color: var(--text); }
.f-tab-no { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.f-tab-lvl { font-size: 14px; font-weight: 600; }
.f-tab.on { background: #fff; border-bottom-color: #fff; color: var(--text); box-shadow: inset 0 3px 0 var(--tab-c, var(--text)); }
.f-tab.immediate  { --tab-c: var(--lv-immediate); }
.f-tab.underlying { --tab-c: var(--lv-underlying); }
.f-tab.enabling   { --tab-c: var(--lv-enabling); }
.f-tab.on .f-tab-no { color: var(--tab-c); }

.finding { border: 1px solid var(--border-s); border-top: 0; background: #fff; }
.pdf-stage .finding { border-top: 3px solid var(--text); }

/* Step 1: headline */
.f-top { display: flex; align-items: flex-start; gap: 24px; padding: 22px 24px 20px; }
.f-head-txt { flex: 1; min-width: 0; }
.f-lvl { display: none; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.pdf-stage .f-lvl { display: flex; }        /* no step row in the PDF, so the card names its level */
.f-top h3 { font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.f-sum { max-width: 68ch; margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.f-conf { flex: none; display: grid; justify-items: end; gap: 2px; padding-left: 20px; border-left: 1px solid var(--border); text-align: right; }
.f-conf span { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.f-conf b { font-size: 28px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.f-conf small { font-size: 12.5px; color: var(--text-3); }

/* Step 2: evidence, three equal columns with the same header style */
.f-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--border); }
.f-col { min-width: 0; padding: 16px 24px 20px; }
.f-col + .f-col { border-left: 1px solid var(--border); }
.f-kicker { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.f-note { margin-top: 2px; font-size: 12.5px; color: var(--text-3); }

/* Numbers: value on the left, plain label beside it */
.f-nums { display: grid; margin: 10px 0 0; padding: 0; list-style: none; }
.f-nums li { display: grid; grid-template-columns: 4.2em minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--border); }
.f-nums li:last-child { border-bottom: 0; }
.f-nums b { font-size: 20px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.f-nums span { font-size: 13.5px; line-height: 1.4; color: var(--text-2); }

/* Where it is worst: ranked list, no bars */
.where-list { display: grid; margin: 8px 0 0; padding: 0; list-style: none; }
.where-list li { display: grid; grid-template-columns: 1.4em minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: 14px; }
.where-list li:last-child { border-bottom: 0; }
.where-list .rk { font-size: 12px; font-weight: 700; color: var(--text-4); font-variant-numeric: tabular-nums; }
.where-list li.top .rk { color: var(--pink); }
.where-list .nm { font-weight: 600; }
.where-list .nm small { display: block; margin-top: 1px; font-size: 12px; font-weight: 400; color: var(--pink-d); }
.where-list b { font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.where-more {
  margin-top: 8px; padding: 0; background: none; border: 0; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--pink); text-decoration: underline; text-underline-offset: 3px;
}

.f-quote { margin: 10px 0 0; padding-left: 14px; border-left: 3px solid var(--pink); }
.f-quote p { font-size: 15px; line-height: 1.55; color: var(--text); }
.f-quote mark { padding: 0 1px; background: var(--mark); color: inherit; font-weight: 600; }
.f-quote .f-quote-tr { margin-top: 4px; font-size: 13.5px; font-style: italic; color: var(--text-2); }   /* English mode: translation of the verbatim quote */
.f-quote cite { display: block; margin-top: 6px; font-size: 12.5px; font-style: normal; color: var(--text-3); }

.f-foot { display: flex; justify-content: flex-end; padding: 10px 24px; border-top: 1px solid var(--border); }
.f-next {
  padding: 7px 14px; background: none; border: 1px solid var(--text); cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--text);
}
.f-next:hover { background: var(--text); color: #fff; }

/* Full heatmap, collapsed by default */
.hm-details { margin-top: 28px; }
.hm-details summary {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 0; list-style: none; cursor: pointer;
  font-size: 14px; font-weight: 700; color: var(--text);
}
.hm-details summary::-webkit-details-marker { display: none; }
.hm-details summary::before { content: '+'; display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--text); font-weight: 700; }
.hm-details[open] summary::before { content: '−'; }

.hm-card { margin-top: 10px; border: 1px solid var(--border-s); }
.hm-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.toggle { display: inline-flex; padding: 3px; background: var(--bg-3); border-radius: 8px; }   /* segmented control */
.toggle button { padding: 6px 12px; background: none; border: 0; border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.toggle button.on { background: #fff; color: var(--text); box-shadow: var(--shadow); }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-left: auto; font-size: 12px; color: var(--text-3); }
.legend i { display: block; width: 18px; height: 12px; }
.legend span { margin-right: 6px; }

.hm-scroll { max-height: 460px; overflow: auto; }
table.hm { width: 100%; min-width: 760px; padding: 4px 8px 8px; border-collapse: separate; border-spacing: 2px; font-variant-numeric: tabular-nums; }
.hm th {
  position: sticky; top: 0; z-index: 1; padding: 6px 4px;
  background: #fff; font-size: 12px; font-weight: 600; line-height: 1.25; text-align: center; color: var(--text-2);
}
.hm thead tr:first-child th { padding-bottom: 0; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.hm thead tr:nth-child(2) th { top: 26px; border-bottom: 1px solid var(--border); }
.hm th.l { text-align: left; }
.hm th.underlying { color: var(--lv-underlying); }
.hm th.enabling   { color: var(--lv-enabling); }
.hm th .bar { display: block; height: 3px; margin-top: 4px; }
.hm th .bar.underlying { background: var(--lv-underlying); }
.hm th .bar.enabling   { background: var(--lv-enabling); }
.hm td { height: 34px; padding: 0 6px; text-align: center; font-size: 13px; }
.hm td.name { width: 34%; padding: 0 10px 0 4px; text-align: left; font-size: 13.5px; font-weight: 500; color: var(--text); white-space: nowrap; }
.hm td.name small { margin-left: 6px; font-size: 12px; font-weight: 400; color: var(--text-3); }
.hm td.cell { min-width: 64px; font-weight: 600; }
.hm td.cell:hover { outline: 2px solid var(--text); outline-offset: -2px; }
.hm td.num { min-width: 88px; font-size: 13px; color: var(--text); white-space: nowrap; }
.hm td.num .off { font-weight: 600; color: var(--pink); }
.hm td.num.na { color: var(--text-4); }
.hm tr.grp td { height: 26px; padding-left: 4px; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.hm tr.unmapped td.name { font-style: italic; color: var(--text-2); }
.hm tr.total td { border-top: 1px solid var(--text); font-weight: 700; }
.hm-note { padding: 10px 14px 12px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-2); }

.hm-tip {
  position: fixed; z-index: 400; max-width: 240px; padding: 8px 10px; pointer-events: none;
  background: var(--text); color: #fff; font-size: 12.5px; line-height: 1.45;
}
.hm-tip b { display: block; }


/* ---------- 02 as a framework module ----------
   Section 02 is drawn by the analysis framework of the chosen topic, so it sits
   on its own tinted panel with the framework named in its top strip. Another
   topic (e.g. TBC with a WHO framework) swaps the framework and this panel
   redraws with it; give each framework its tint via [data-framework]. */

.fw-band {
  --fw-bg: var(--km-green-l);
  --fw-line: rgba(45, 122, 106, .20);
  margin: 4px 0; padding: 0 28px 32px;
  background: var(--fw-bg); border: 1px solid var(--fw-line); border-radius: 14px;
}
.fw-band[data-framework="unicef-nutrition"] { --fw-bg: var(--km-green-l); }
/* .fw-band[data-framework="who-tb"] { --fw-bg: …; }   next topic: its own tint */
.dsec.fw-band, .fw-band + .dsec { border-top: 0; }

.fw-band .fw-bar {
  margin: 0 -28px 26px; padding: 10px 28px;
  background: none; border-bottom: 1px solid var(--fw-line); font-size: 12.5px; color: var(--text-2);
}
.fw-band .fw-bar > svg { color: var(--km-green); }
.fw-band .fw-bar b { color: var(--text); }
.fw-topic-chip {
  padding: 2px 10px; background: #fff; border: 1px solid var(--fw-line); border-radius: 999px;
  font-size: 12px; color: var(--text-2);
}
.fw-band .rca .lvl, .fw-band .rca .row-rule { border-top-color: var(--fw-line); }
.fw-band .rca-key { color: var(--text-2); }

@container dash (max-width: 640px) {
  .fw-band { padding: 0 16px 24px; border-radius: 12px; }
  .fw-band .fw-bar { margin: 0 -16px 20px; padding: 10px 16px; }
}
.pdf-stage #fwOpen { display: none; }


/* ---------- Kabupaten/Kota: district heatmap (section 01) ---------- */

.hm-card.spread { margin-top: 0; }
.spread table.hm { min-width: 900px; }
.spread tr.pkm-row { cursor: pointer; }
.spread tr.pkm-row:hover td.name, .spread tr.pkm-row:focus-visible td.name { color: var(--pink); text-decoration: underline; text-underline-offset: 3px; }
.spread tr.pkm-row:focus-visible { outline: 2px solid var(--km-green); outline-offset: -2px; }
.spread .hm-scroll { max-height: none; }


/* District map ("Peta" view of section 01) */
.map-metric { display: flex; flex: 0 1 380px; min-width: 0; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.map-metric select {
  flex: 1 1 auto; min-width: 0; max-width: 100%; padding: 6px 28px 6px 10px; background: #fff; border: 1px solid var(--border-s); border-radius: 0;
  font: inherit; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text);
}
.map-wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, 1fr); }
.map-canvas { padding: 16px 20px; border-right: 1px solid var(--border); }
.kab-map { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; }
.kab-map .kec { stroke: #fff; stroke-width: 3; stroke-linejoin: round; transition: opacity .12s; }
.kab-map .kec.has { cursor: pointer; }
.kab-map .kec.has:hover { opacity: .85; }
.kab-map .kec.has:focus-visible { outline: none; stroke: var(--km-green); stroke-width: 6; }
.kab-map .kec.sel { stroke: var(--text); stroke-width: 6; }
.kab-map .kab-outline { fill: none; stroke: var(--text-2); stroke-width: 2.5; pointer-events: none; }
.kab-map text { pointer-events: none; text-anchor: middle; font-family: var(--font); paint-order: stroke; stroke: rgba(255, 255, 255, .85); stroke-width: 5px; stroke-linejoin: round; }
.kab-map .kec-name { font-size: 25px; font-weight: 600; fill: var(--text); }
.kab-map .kec-val { font-size: 30px; font-weight: 700; fill: var(--text); font-variant-numeric: tabular-nums; }
.kab-map .on-dark { fill: #fff; stroke: rgba(43, 43, 42, .45); }
.kab-map .kec-name.none { font-weight: 500; fill: var(--text-3); }

.map-side { display: grid; align-content: start; }
.map-side > div { padding: 14px 18px; border-bottom: 1px solid var(--border); }
.map-side > div:last-child { border-bottom: 0; }
.map-legend ul { display: grid; gap: 5px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.map-legend li { display: flex; align-items: center; gap: 8px; }
.map-legend i { width: 22px; height: 12px; }
.map-legend i.nodata { background: repeating-linear-gradient(45deg, #F0F2F1 0 4px, #D3D8D5 4px 6px); }
.map-sel-h { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.map-sel-h span { font-weight: 700; color: var(--pink); font-variant-numeric: tabular-nums; }
.map-sel ul { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.map-sel li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; background: var(--bg-2); border: 1px solid var(--border); }
.map-sel li b { display: block; font-size: 13px; }
.map-sel li small { font-size: 12px; color: var(--text-2); }
.map-rank ol { display: grid; margin: 6px 0 0; padding: 0; list-style: none; }
.map-rank li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: baseline; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: 13px; }
.map-rank li:last-child { border-bottom: 0; }
.map-rank .rk { font-size: 11.5px; color: var(--text-4); font-variant-numeric: tabular-nums; }
.map-rank b { font-variant-numeric: tabular-nums; }
.map-rank-name { padding: 0; background: none; border: 0; text-align: left; font: inherit; font-weight: 600; color: var(--text); cursor: pointer; }
.map-rank-name:hover { color: var(--pink); text-decoration: underline; text-underline-offset: 3px; }
.map-view + div .hm-note, .map-view .hm-note { border-top: 1px solid var(--border); }

@container dash (max-width: 520px) {
  .kab-map .kec-name { font-size: 31px; }
  .kab-map .kec-val { font-size: 35px; }
}
@container dash (max-width: 760px) {
  .map-wrap { grid-template-columns: minmax(0, 1fr); }
  .map-canvas { border-right: 0; border-bottom: 1px solid var(--border); padding: 12px; }
}


/* ---------- Puskesmas picker (Pengelola Program → Puskesmas → Ringkasan wilayah) ---------- */

.pick-body { padding: 24px var(--pad-x) 48px; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.pick-card {
  position: relative; display: grid; gap: 6px; padding: 14px 16px; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid var(--border-s); border-top: 3px solid var(--km-green); font: inherit; color: var(--text);
  transition: border-color .12s, box-shadow .12s;
}
.pick-card:hover { border-color: var(--text); box-shadow: var(--shadow-m); }
.pick-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 15px; font-weight: 700; }
.pick-name small { position: absolute; top: 10px; right: 10px; padding: 1px 7px; background: var(--pink); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; }
.pick-sub { font-size: 12.5px; color: var(--text-2); }
.pick-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 4px 18px; margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--border); }
.pick-stats span { display: grid; font-size: 11.5px; color: var(--text-3); }
.pick-stats b { font-size: 16px; color: var(--text); font-variant-numeric: tabular-nums; }
.pick-stats b.conf-high { color: var(--pink); }
.pick-stats b.conf-mid { color: #B07F00; }
.pick-stats b.conf-low { color: var(--text-3); }
.pick-note { margin-top: 16px; font-size: 13px; color: var(--text-2); }
.pick-note .linkbtn { margin-left: 6px; font-size: 13px; }
.pick-empty { margin-top: 28px; padding: 18px 20px; background: var(--bg-2); border: 1px solid var(--border-s); border-left: 4px solid var(--km-green); }
.pick-empty p { max-width: 70ch; font-size: 15px; line-height: 1.55; }
.pick-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }


/* ---------- Keterbatasan data ---------- */

.limits .dsec-n { background: var(--text-3); }
.limits ul { display: grid; gap: 8px; max-width: 76ch; margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.55; color: var(--text-2); }


/* ---------- Framework drawer (read-only) ---------- */

.drawer-scrim { position: fixed; inset: 0; z-index: 350; background: rgba(43, 43, 42, .35); }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 360; display: flex; flex-direction: column;
  width: min(460px, 100%); background: #fff; box-shadow: -10px 0 30px rgba(0, 0, 0, .12);
}
.drawer-h { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 14px; border-bottom: 2px solid var(--text); }
.drawer-h h3 { font-size: 17px; }
.drawer-h p { margin-top: 2px; font-size: 13px; color: var(--text-2); }
.drawer-h button { margin-left: auto; background: none; border: 0; font-size: 16px; color: var(--text-3); cursor: pointer; }
.drawer-b { display: grid; align-content: start; gap: 16px; flex: 1; overflow-y: auto; padding: 16px 20px 24px; }

.fw-lv { padding-left: 12px; border-left: 3px solid var(--border-s); }
.fw-lv.outcome    { border-color: var(--lv-outcome); }
.fw-lv.immediate  { border-color: var(--lv-immediate); }
.fw-lv.underlying { border-color: var(--lv-underlying); }
.fw-lv.enabling   { border-color: var(--lv-enabling); }
.fw-lv small { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.fw-items { display: grid; gap: 4px; margin-top: 6px; }
.fw-item { padding: 6px 0 8px; border-bottom: 1px solid var(--border); font-size: 13px; line-height: 1.5; color: var(--text-2); }
.fw-item b { display: block; font-size: 14px; color: var(--text); }
.fw-src { padding-top: 12px; border-top: 1px solid var(--text); font-size: 13px; line-height: 1.55; color: var(--text-2); }
.fw-src a { font-weight: 600; color: var(--pink); }
.fw-topics .lbl { margin-bottom: 4px; }
.fw-topic { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.fw-topic span { color: var(--text-3); }


/* ---------- Responsive (by dashboard column width) ---------- */

@container dash (max-width: 900px) {
  .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@container dash (max-width: 860px) {
  .f-grid { grid-template-columns: minmax(0, 1fr); }
  .f-col + .f-col { border-left: 0; border-top: 1px solid var(--border); }
  .rca { display: block; }
  .rca .row-rule { display: none; }
  .rca .lvl { padding: 18px 0 2px; }
  .node { margin: 10px 0; }
  .node.root::after { display: none; }
}
@container dash (max-width: 640px) {
  .dsec { padding: 28px 0 32px; }
  .dsec-h h2 { font-size: 21px; }
  .lede-ai { font-size: 16px; }
  .fig .v { font-size: 32px; }

  .f-tab { flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; }
  .f-tab-lvl { font-size: 12.5px; line-height: 1.3; }
  .f-top { flex-direction: column; gap: 12px; padding: 18px 16px 16px; }
  .f-conf { grid-auto-flow: column; justify-items: start; align-items: baseline; gap: 8px; padding: 10px 0 0; border-left: 0; border-top: 1px solid var(--border); width: 100%; text-align: left; }
  .f-conf b { font-size: 20px; }
  .f-col, .f-foot { padding-left: 16px; padding-right: 16px; }
  .f-top h3 { font-size: 18px; }

  .legend { margin-left: 0; }
}
@media (max-width: 700px) {
  .ctl { flex: 1 1 140px; }
  .dash-pdf { flex: 1 1 100%; justify-content: center; }
  .fw-bar > svg:first-child { display: none; }
  .fw-bar button { margin-left: 0; }
}


/* ---------- Design revamp ---------- */

/* PDF report button sits with the header controls */
.dash-pdf { align-self: flex-end; min-height: 38px; padding: 0 14px; font-size: 13px; font-weight: 600; }

/* Framework bar: secondary information, so quieter */
.fw-bar { padding-top: 8px; padding-bottom: 8px; background: #fff; font-size: 12px; color: var(--text-3); }
.fw-bar b { font-weight: 600; color: var(--text-2); }
.fw-bar button { font-size: 12px; }

/* Phones: only root-cause boxes show everything; other boxes open on tap */
@container dash (max-width: 640px) {
  .node:not(.root):not(.outcome) { cursor: pointer; padding-right: 40px; }
  .node:not(.root):not(.outcome)::after {
    content: '+'; position: absolute; top: 10px; right: 12px; display: grid; place-items: center;
    width: 22px; height: 22px; border: 1px solid var(--border-s); font-weight: 700; color: var(--text-2);
  }
  .node.open:not(.root):not(.outcome)::after { content: '−'; }
  .node:not(.root):not(.outcome):not(.open) .bar,
  .node:not(.root):not(.outcome):not(.open) .d { display: none; }
}


/* ---------- PDF report stage (off-screen, js/report-pdf.js) ---------- */
.pdf-stage .dash-body { --wrap: 1720px; }
.pdf-stage .dsec { border-top: 0; }
/* html2canvas draws inset shadows on wrapped inline text badly: plain emphasis instead */
.pdf-stage .lede-ai mark { box-shadow: none; background: none; padding: 0; color: var(--pink-d); font-weight: 700; }
.pdf-stage .where-more { display: none; }