/* =====================================================================
   SI PATRIOT KNOWLEDGE — presentation layer
   ---------------------------------------------------------------------
   Loads on top of web-foundation.css and declares NO :root palette of its
   own. The previous page redefined the brand tokens locally, which is how
   it drifted off-system without anyone changing a colour on purpose.

   Selectors are written `.web .kn-*` where they set colour on headings or
   paragraphs, because the foundation carries `.web h1..h4 { color: inherit }`
   and `.web p { color: var(--ink-soft) }` at a specificity single classes
   cannot beat.

   Analytical accents are semantic only. There is no decorative palette:
   green reads as growth, amber as attention, slate as the previous period.
   ===================================================================== */

.kn {
  --pos: #2E7D32;
  --pos-soft: rgba(46,125,50,.10);
  --warn: #8A5200;
  --warn-soft: rgba(178,106,0,.10);
  --quiet: #93968A;
  --ghost: #A9AEA2;          /* previous-period reference line */
  --grid: rgba(20,21,15,.07);
  --panel: #FFFFFF;
}

/* Navigation lives entirely in web-foundation.css. */

/* ---------- Shared primitives ---------- */
.kn { background: var(--warm-white); }
.kn-wrap { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
.kn-sec { padding-block: clamp(48px, 6vw, 76px); }
.kn-sec--tight { padding-block: clamp(32px, 4vw, 48px); }
.kn-eyebrow {
  display: inline-block; font-family: var(--font-display); font-weight: 700;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
}
.web .kn-h2 {
  margin-top: 10px; font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-h2); line-height: 1.2; letter-spacing: -0.015em; color: var(--ink);
  max-width: 24ch; text-wrap: balance;
}
.web .kn-sub { margin-top: 10px; max-width: 62ch; font-size: var(--text-body); line-height: 1.65; color: var(--ink-soft); }
.web .kn-take {
  margin-top: 16px; padding-left: 14px; border-left: 2px solid var(--primary);
  font-size: 14px; line-height: 1.6; color: var(--ink);
}
.kn-panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(20px, 2.4vw, 28px);
}

/* ---------- Header ---------- */
.kn-head { padding-block: clamp(34px, 4.5vw, 56px) clamp(20px, 2.5vw, 28px); }
.kn-head__grid { display: grid; grid-template-columns: 1.35fr .85fr; gap: clamp(28px, 4vw, 64px); align-items: end; }
.web .kn-head__title {
  margin-top: 12px; font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-h1); line-height: 1.15; letter-spacing: -0.02em; color: var(--ink);
  max-width: 20ch; text-wrap: balance;
}
.web .kn-head__desc { margin-top: 14px; max-width: 54ch; font-size: var(--text-lead); line-height: 1.65; color: var(--ink-soft); }
.kn-demo {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px;
  font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--warn);
  background: var(--warn-soft); border: 1px solid rgba(178,106,0,.22);
  border-radius: var(--radius-pill); padding: 5px 12px;
}
.kn-head__figure { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; }
.kn-head__figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kn-head__cap {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  background: rgba(16,26,18,.62); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-md);
  padding: 11px 13px; color: #fff;
}
.kn-head__cap b { display: block; font-family: var(--font-display); font-size: 12.5px; font-weight: 700; }
.kn-head__cap span { display: block; margin-top: 2px; font-size: 11px; color: rgba(255,255,255,.8); line-height: 1.45; }

/* ---------- Control bar: period + group ---------- */
.kn-controls {
  position: sticky;
  /* top:60px was the old single-row nav height. Mobile 2-row nav raises it
     to ~108px. site-chrome.js sets --nav-h on :root after each layout paint;
     the fallback covers the first frame before rAF fires. */
  top: var(--nav-h, 110px);
  z-index: 20;
  background: rgba(250,248,243,.94); backdrop-filter: blur(10px);
  border-block: 1px solid var(--line);
}
.kn-controls__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding-block: 12px; }
.kn-ctl { display: flex; align-items: center; gap: 9px; }
.kn-ctl__label { font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.kn-seg { display: flex; gap: 3px; background: var(--gray-light); border-radius: var(--radius-pill); padding: 3px; }
.kn-seg button {
  border: none; background: transparent; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 12.5px; color: var(--ink-soft);
  padding: 7px 15px; border-radius: var(--radius-pill);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.kn-seg button:hover { color: var(--ink); }
.kn-seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.kn-seg button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.kn-select {
  font-family: var(--font-display); font-weight: 600; font-size: 12.5px; color: var(--ink);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 8px 14px; cursor: pointer;
}
.kn-select:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.kn-range { margin-left: auto; font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.kn-range b { color: var(--ink); font-weight: 600; }

/* ---------- Executive summary ---------- */
.kn-exec { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(20px, 3vw, 40px); align-items: start; }
.kn-state {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; border-radius: var(--radius-pill); padding: 6px 13px;
}
.kn-state__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.kn-state[data-tone="pos"]     { color: var(--pos);   background: var(--pos-soft); }
.kn-state[data-tone="warn"]    { color: var(--warn);  background: var(--warn-soft); }
.kn-state[data-tone="neutral"] { color: var(--ink);   background: var(--gray-light); }
.kn-state[data-tone="quiet"]   { color: var(--quiet); background: var(--gray-light); }
.web .kn-exec__statement {
  margin-top: 16px; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.15rem, 1rem + .75vw, 1.6rem); line-height: 1.38; letter-spacing: -0.012em;
  color: var(--ink); text-wrap: pretty;
}
.web .kn-exec__interp { margin-top: 14px; max-width: 58ch; font-size: 14px; line-height: 1.7; color: var(--ink-soft); }
.kn-exec__meta { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.kn-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--ink-soft);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 5px 11px;
}
.kn-chip i { font-size: 13px; color: var(--ink-faint); }
.kn-chip b { color: var(--ink); font-weight: 700; }

/* KPI stack beside the summary. Few, and each carries its own context. */
.kn-kpis { display: grid; gap: 10px; }
.kn-kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 15px 17px; }
.kn-kpi__label { font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-faint); }
.kn-kpi__row { margin-top: 7px; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.kn-kpi__val { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 1.1rem + .7vw, 1.7rem); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.kn-kpi__unit { font-size: 12px; color: var(--ink-faint); }
.kn-kpi__delta { font-family: var(--font-display); font-weight: 700; font-size: 12px; padding: 2px 8px; border-radius: var(--radius-pill); font-variant-numeric: tabular-nums; }
.kn-kpi__delta[data-tone="pos"]  { color: var(--pos);  background: var(--pos-soft); }
.kn-kpi__delta[data-tone="warn"] { color: var(--warn); background: var(--warn-soft); }
.kn-kpi__delta[data-tone="flat"] { color: var(--ink-soft); background: var(--gray-light); }
.web .kn-kpi__note { margin-top: 6px; font-size: 11.5px; line-height: 1.5; color: var(--ink-faint); }

/* ---------- Charts ---------- */
.kn-chart { position: relative; width: 100%; }
.kn-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.kn-chart__line { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kn-chart__prev { fill: none; stroke: var(--ghost); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: .85; }
.kn-chart__area { fill: url(#knFill); }
.kn-chart__grid { stroke: var(--grid); stroke-width: 1; }
.kn-chart__axis { font-family: var(--font-body); font-size: 10.5px; fill: var(--ink-faint); }
.kn-chart__mark { fill: var(--white); stroke: var(--primary); stroke-width: 2; }
.kn-chart__guide { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; opacity: .35; }
.kn-chart__hit { fill: transparent; cursor: crosshair; }
.kn-chart__note { font-family: var(--font-display); font-size: 10.5px; font-weight: 700; fill: var(--ink-faint); }

.kn-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
.kn-legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ink-soft); }
.kn-legend i { width: 15px; height: 0; border-top: 2px solid var(--primary); display: inline-block; }
.kn-legend i.is-prev { border-top: 2px dashed var(--ghost); }

/* Readout above the chart: works for hover and for tap. */
.kn-readout {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  min-height: 22px; margin-bottom: 10px;
  font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
.kn-readout b { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 14px; }
.kn-readout em { font-style: normal; color: var(--ink-faint); }

/* ---------- Comparison + consistency ---------- */
.kn-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 24px); }
.web .kn-panel__title { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); }
.web .kn-panel__q { margin-top: 5px; font-size: 12.5px; line-height: 1.55; color: var(--ink-faint); }

.kn-bars { margin-top: 20px; display: grid; gap: 14px; }
.kn-bar__head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--ink-soft); }
.kn-bar__head b { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }
.kn-bar__track { margin-top: 6px; height: 10px; background: var(--gray-light); border-radius: var(--radius-pill); overflow: hidden; }
.kn-bar__fill { height: 100%; border-radius: var(--radius-pill); background: var(--primary); transition: width var(--dur-base) var(--ease-out); }
.kn-bar__fill.is-prev { background: var(--ghost); }

.kn-dots { margin-top: 18px; }
.kn-dots svg { display: block; width: 100%; height: auto; overflow: visible; }
.kn-dots__band { fill: var(--pos-soft); }
.kn-dots__mean { stroke: var(--primary); stroke-width: 1.5; stroke-dasharray: 4 3; }
.kn-dots__dot { fill: var(--ink); opacity: .55; }
.kn-dots__dot.is-out { fill: var(--warn); opacity: 1; }

.kn-split { margin-top: 18px; }
.kn-split__bar { display: flex; height: 34px; border-radius: var(--radius-md); overflow: hidden; }
.kn-split__seg { display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 12px; color: #fff; transition: width var(--dur-base) var(--ease-out); }
.kn-split__seg.is-pagi { background: var(--primary); }
.kn-split__seg.is-sore { background: #7A8B72; }
.kn-split__key { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--ink-soft); }
.kn-split__key span { display: inline-flex; align-items: center; gap: 7px; }
.kn-split__key i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ---------- Insight + recommendation ---------- */
.kn-insight { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(16px, 2vw, 24px); }
.kn-insight__card { border-left: 3px solid var(--primary); }
.kn-insight__card[data-tone="warn"] { border-left-color: var(--warn); }
.kn-insight__card[data-tone="quiet"] { border-left-color: var(--quiet); }
.kn-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint);
}
.kn-badge i { font-size: 13px; }
.web .kn-insight__stmt { margin-top: 12px; font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.4; color: var(--ink); }
.web .kn-insight__ev { margin-top: 10px; font-size: 13.5px; line-height: 1.65; color: var(--ink-soft); }
.kn-conf { margin-top: 16px; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-soft); }
.kn-conf__meter { display: flex; gap: 3px; }
.kn-conf__meter i { width: 18px; height: 4px; border-radius: 2px; background: var(--gray-light); }
.kn-conf__meter i.is-on { background: var(--primary); }
.kn-recs { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.kn-recs li { display: flex; gap: 11px; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }
.kn-recs li i { color: var(--primary); font-size: 15px; margin-top: 2px; flex-shrink: 0; }

/* ---------- Detail table ---------- */
.kn-table { margin-top: 20px; }
.kn-trow {
    display: grid; grid-template-columns: 1fr minmax(72px, 110px);
  gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.kn-trow:last-child { border-bottom: none; }
.kn-trow--head { padding-bottom: 8px; border-bottom: 1px solid var(--ink); }
.kn-trow--head span { font-family: var(--font-display); font-weight: 700; font-size: 9.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-faint); }
.kn-trow__date { font-family: var(--font-display); font-weight: 700; font-size: 12px; color: var(--ink-soft); }
.kn-trow__src { font-size: 12px; color: var(--ink-faint); }
.kn-trow__n { text-align: right; font-size: 12.5px; color: var(--ink-soft); }
.kn-trow__n.is-total { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.kn-more { margin-top: 16px; display: inline-flex; align-items: center; gap: 7px; background: none; border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 8px 16px; font-family: var(--font-display); font-weight: 600; font-size: 12.5px; color: var(--ink); cursor: pointer; }
.kn-more:hover { border-color: var(--primary); color: var(--primary-deep); }

/* ---------- Architecture explainer ---------- */
.kn-arch { background: var(--ink); color: #fff; }
.kn-arch .kn-eyebrow { color: rgba(255,255,255,.55); }
.kn-arch .kn-h2, .web .kn-arch .kn-h2 { color: #fff; }
.web .kn-arch .kn-sub { color: rgba(255,255,255,.72); }
.kn-flow { margin-top: clamp(26px, 3vw, 38px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kn-flow__step { position: relative; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-md); padding: 18px; }
.kn-flow__step::after {
  content: '\ea61'; font-family: 'tabler-icons'; position: absolute; right: -17px; top: 50%;
  transform: translateY(-50%); color: rgba(255,255,255,.3); font-size: 15px; z-index: 2;
}
.kn-flow__step:last-child::after { display: none; }
.kn-flow__n { font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: .12em; color: #A8DDA8; }
.web .kn-flow__t { margin-top: 9px; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: #fff; }
.web .kn-flow__d { margin-top: 6px; font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,.68); }
.kn-flow__tag { margin-top: 11px; display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--radius-pill); }
.kn-flow__tag.is-app { color: #A8DDA8; background: rgba(168,221,168,.14); }
.kn-flow__tag.is-sim { color: #F0C36B; background: rgba(240,195,107,.14); }

/* ---------- Method / provenance ---------- */
.kn-method { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); }
.web .kn-method__t { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--ink); }
.web .kn-method__d { margin-top: 7px; font-size: 12.5px; line-height: 1.6; color: var(--ink-soft); }
.kn-method code { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 11.5px; background: var(--gray-light); border-radius: 4px; padding: 1px 5px; }

/* ---------- Motion ---------- */
.kn-fade { animation: knFade var(--dur-base) var(--ease-out); }
@keyframes knFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.kn-draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: knDraw 900ms var(--ease-out) forwards; }
@keyframes knDraw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .kn-fade, .kn-draw { animation: none; }
  .kn-draw { stroke-dashoffset: 0; }
  .kn-bar__fill, .kn-split__seg { transition: none; }
}

/* =====================================================================
   RESPONSIVE
   Each breakpoint recomposes rather than shrinking. The narrative order
   (summary, then evidence, then insight, then detail) is preserved at
   every width, which is the one thing that must not degrade.
   ===================================================================== */

@media (max-width: 1024px) {
  .kn-head__grid { grid-template-columns: 1.15fr .85fr; gap: 28px; }
  .kn-exec { grid-template-columns: 1fr; gap: 24px; }
  /* KPIs become a row once they sit under the statement rather than beside it. */
  .kn-kpis { grid-template-columns: repeat(3, 1fr); }
  .kn-insight { grid-template-columns: 1fr; }
  .kn-flow { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .kn-flow__step:nth-child(2)::after { display: none; }
}

@media (max-width: 820px) {
  .kn-head__grid { grid-template-columns: 1fr; align-items: start; }
  .kn-head__figure { aspect-ratio: 16/7; }
  .kn-duo { grid-template-columns: 1fr; }
  .kn-method { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 640px) {
  .kn-controls__inner { gap: 10px 12px; }
  .kn-ctl { width: 100%; justify-content: space-between; }
  .kn-seg { flex: 1; justify-content: space-between; padding: 4px; }
  /* 44px minimum touch target: these two controls drive the whole page,
     so they are the last things that should be fiddly to hit on a phone. */
  .kn-seg button { flex: 1; min-height: 44px; padding: 10px 8px; font-size: 12.5px; }
  .kn-select { flex: 1; min-height: 44px; }
  .kn-range { margin-left: 0; width: 100%; }
  .kn-kpis { grid-template-columns: 1fr; }
  .kn-more { min-height: 44px; }
  .kn-flow { grid-template-columns: 1fr; }
  .kn-flow__step::after {
    content: '\ea5f'; right: auto; left: 50%; top: auto; bottom: -17px;
    transform: translateX(-50%);
  }
  .kn-flow__step:last-child::after { display: none; }

  /* Detail records recompose into two lines instead of scrolling sideways. */
  .kn-trow {
    grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 0;
  }
  .kn-trow--head { display: none; }
  .kn-trow__date { grid-column: 1; }
  .kn-trow__n.is-total { grid-column: 2; grid-row: 1; font-size: 14px; }
  .kn-trow__src { grid-column: 1 / -1; grid-row: 2; }
  .kn-trow__n:not(.is-total) { display: none; }
  .kn-trow__sessions { grid-column: 1 / -1; grid-row: 3; margin-top: 3px; font-size: 11.5px; color: var(--ink-faint); }
}

@media (min-width: 641px) { .kn-trow__sessions { display: none; } }

/* =====================================================================
   REMEDIATION LAYER
   Stability panel, executive implication, progressive-disclosure method
   block, and the reduced-chrome table.
   ===================================================================== */

/* ---------- Executive summary: fact, then meaning, then so-what ---------- */
.web .kn-exec__implic {
  margin-top: 12px; max-width: 58ch; font-size: 14px; line-height: 1.65;
  color: var(--ink); font-weight: 500;
  padding-left: 13px; border-left: 2px solid var(--primary);
}

/* Insight-before-evidence lede above the main chart. */
.web .kn-lede {
  margin-top: 12px; max-width: 60ch;
  font-family: var(--font-display); font-weight: 600;
  font-size: 15px; line-height: 1.55; color: var(--ink);
}

/* Previous-period line steps back so the current period reads first.
   Two series at equal weight forced the reader to work out which one
   they were actually looking at. */
.kn-chart__prev { stroke: var(--ghost); stroke-width: 1.25; stroke-dasharray: 3 4; opacity: .5; }

/* ---------- Stability ---------- */
.kn-stab__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; margin-bottom: 16px; }
.kn-stab__verdict {
  font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em;
  padding: 4px 12px; border-radius: var(--radius-pill);
}
.kn-stab__verdict[data-s="stabil"]     { color: var(--pos);   background: var(--pos-soft); }
.kn-stab__verdict[data-s="cukup"]      { color: var(--ink);   background: var(--gray-light); }
.kn-stab__verdict[data-s="fluktuatif"] { color: var(--warn);  background: var(--warn-soft); }
.kn-stab__verdict[data-s="terbatas"]   { color: var(--quiet); background: var(--gray-light); }
.kn-stab__sub { font-size: 13px; line-height: 1.5; color: var(--ink-soft); flex: 1 1 200px; }
.kn-stab svg { display: block; width: 100%; height: auto; overflow: visible; }
.kn-stab__band { fill: rgba(46,125,50,.09); }
.kn-stab__bar { fill: #B9C6B4; transition: fill var(--dur-fast) var(--ease-out); }
.kn-stab__bar.is-out { fill: var(--warn); opacity: .75; }
.kn-stab__key { margin-top: 12px; display: flex; align-items: flex-start; gap: 8px; font-size: 11.5px; line-height: 1.5; }
.web .kn-stab__key { color: var(--ink-faint); }
.kn-stab__swatch { flex-shrink: 0; width: 13px; height: 13px; border-radius: 3px; background: rgba(46,125,50,.16); margin-top: 1px; }
.web .kn-stab__empty { padding: 22px 0; font-size: 13px; color: var(--ink-faint); }

/* ---------- Method: closed by default ---------- */
.kn-method {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(16px, 2vw, 22px) clamp(18px, 2.4vw, 26px);
}
.kn-method__toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  cursor: pointer; list-style: none;
}
.kn-method__toggle::-webkit-details-marker { display: none; }
.kn-method__toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 6px; }
.kn-method__hint { display: block; margin-top: 5px; font-family: var(--font-body); font-weight: 400; font-size: 12.5px; color: var(--ink-soft); }
.kn-method__toggle > i { font-size: 18px; color: var(--ink-faint); transition: transform var(--dur-fast) var(--ease-out); }
.kn-method[open] .kn-method__toggle > i { transform: rotate(180deg); }
.kn-method__body {
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px clamp(20px, 3vw, 40px);
}
.web .kn-method__t { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--ink); }
.web .kn-method__d { margin-top: 7px; font-size: 12.5px; line-height: 1.6; color: var(--ink-soft); }
.kn-method code { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 11.5px; background: var(--gray-light); border-radius: 4px; padding: 1px 5px; }

/* ---------- Detail table: date plus total volume ---------- */
.kn-trow { grid-template-columns: 1fr minmax(72px, 120px); }

@media (max-width: 820px) { .kn-method__body { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .kn-stab__verdict { font-size: 15.5px; }
  /* Two lines: date and total, with the two sessions beneath. */
  .kn-trow { grid-template-columns: 1fr auto; }
}

/* =====================================================================
   SECOND-STAGE REVISION
   Finding-first hero, grouped filters, custom listbox, calmer architecture
   section, and the motion the page was missing.
   ===================================================================== */

/* ---------- Hero: finding, then number, then one line ---------- */
.kn-head__grid { align-items: center; }
.web .kn-head__finding {
  margin-top: 12px; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.75rem, 1.35rem + 1.9vw, 2.85rem); line-height: 1.08;
  letter-spacing: -0.028em; color: var(--ink); max-width: 15ch; text-wrap: balance;
}
.kn-head__kpi { margin-top: 20px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.kn-head__val {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.6rem, 1.9rem + 3.2vw, 4.25rem); line-height: .92;
  letter-spacing: -0.04em; color: var(--primary-deep); font-variant-numeric: tabular-nums;
}
.kn-head__unit { font-size: 12.5px; line-height: 1.25; color: var(--ink-faint); align-self: flex-end; padding-bottom: 5px; }
.kn-head__delta {
  align-self: flex-end; margin-bottom: 5px;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  padding: 4px 11px; border-radius: var(--radius-pill); font-variant-numeric: tabular-nums;
}
.kn-head__delta[data-tone="pos"]  { color: var(--pos);  background: var(--pos-soft); }
.kn-head__delta[data-tone="warn"] { color: var(--warn); background: var(--warn-soft); }
.kn-head__delta[data-tone="flat"] { color: var(--ink-soft); background: var(--gray-light); }
.web .kn-head__note { margin-top: 14px; max-width: 44ch; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.kn-head .kn-state { margin-top: 4px; }

/* ---------- Filter groups ---------- */
.kn-ctl__div { width: 1px; height: 22px; background: var(--line); }
.kn-range {
  flex-basis: 100%; margin-left: 0; padding-top: 2px;
  display: flex; align-items: center; gap: 7px;
}

/* ---------- Custom listbox ---------- */
.kn-sel { position: relative; }
.kn-sel__btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px;
  font-family: var(--font-display); font-weight: 600; font-size: 12.5px; color: var(--ink);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 7px 13px; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.kn-sel__btn:hover { border-color: var(--ink-faint); }
.kn-sel__btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.kn-sel__btn > i { font-size: 15px; color: var(--ink-faint); }
.kn-sel__caret { transition: transform var(--dur-fast) var(--ease-out); }
.kn-sel.is-open .kn-sel__caret { transform: rotate(180deg); }
.kn-sel__list {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 100%; margin: 0; padding: 5px; list-style: none;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(20,21,15,.14);
}
.kn-sel__list:focus { outline: none; }
.kn-sel__list li {
  display: flex; align-items: center; min-height: 38px; padding: 7px 12px;
  font-size: 13px; color: var(--ink-soft); white-space: nowrap;
  border-radius: var(--radius-md); cursor: pointer;
}
.kn-sel__list li.is-active { background: var(--gray-light); color: var(--ink); }
.kn-sel__list li[aria-selected="true"] { color: var(--primary-deep); font-weight: 700; }

/* ---------- What it means ---------- */
.kn-exec { grid-template-columns: 1.35fr .9fr; }
.web .kn-exec__interp {
  margin-top: 0; max-width: 56ch;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1rem, .95rem + .35vw, 1.2rem); line-height: 1.5; color: var(--ink);
}
.web .kn-exec__implic { margin-top: 14px; font-weight: 400; color: var(--ink-soft); }
.kn-exec__meta { margin-top: 24px; }

/* ---------- Architecture: calm, not a dark slab ----------
   The full-ink section read as an abrupt strip between the analytical
   content and the method block. Knowledge is a calm analytical page, so the
   contrast now comes from a soft tint and a rule rather than from inverting
   the whole band. */
.kn-arch { background: #F1F3EE; color: inherit; border-block: 1px solid var(--line); }
.kn-arch .kn-eyebrow { color: var(--ink-faint); }
.web .kn-arch .kn-h2 { color: var(--ink); }
.web .kn-arch .kn-sub { color: var(--ink-soft); }
.kn-flow__step { background: var(--white); border: 1px solid var(--line); }
.kn-flow__step::after { color: var(--ink-faint); }
.kn-flow__n { color: var(--primary); }
.web .kn-flow__t { color: var(--ink); }
.web .kn-flow__d { color: var(--ink-soft); }
.kn-flow__tag.is-app { color: var(--primary-deep); background: var(--pos-soft); }
.kn-flow__tag.is-sim { color: var(--warn); background: var(--warn-soft); }

/* ---------- Morning and evening: numbers lead, bar supports ---------- */
.kn-split__pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 40px); }
.kn-split__one { display: flex; flex-direction: column; gap: 3px; }
.kn-split__lbl { font-family: var(--font-display); font-weight: 700; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.kn-split__pct { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.6rem); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.kn-split__one.is-pagi .kn-split__pct { color: var(--primary-deep); }
.kn-split__one.is-sore .kn-split__pct { color: #6B7C63; }
.kn-split__lit { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.kn-split .kn-split__bar { margin-top: 20px; height: 10px; }
.kn-split__seg { font-size: 0; }

/* ---------- Motion ----------
   Restrained and tied to data, not to scrolling. Reveals are short so the
   reader never waits for content, and everything is disabled under
   prefers-reduced-motion. */
/* The reveal moves the panel, it never hides it. Opacity was tried twice
   here and once on the nav drawer: any content whose visibility depends on a
   transition or an animation completing is invisible for good the moment
   that motion does not run, and the panel still occupies the layout and
   swallows clicks while invisible. A panel resting 10px low is a cosmetic
   flaw; a panel that never appears is lost content. */
.kn-reveal { transform: translateY(10px); }
.kn-reveal.is-in { transform: none; transition: transform 460ms var(--ease-out); }
.kn-panel { transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.kn-panel:hover { border-color: rgba(20,21,15,.14); box-shadow: 0 8px 24px rgba(20,21,15,.05); }
/* Filter feedback: the data region dips briefly so a change is felt. */
.kn-swap { animation: knSwap 340ms var(--ease-out); }
@keyframes knSwap { 0% { opacity: .45; } 100% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .kn-reveal, .kn-reveal.is-in { transform: none; transition: none; }
  .kn-swap { animation: none; }
}

@media (max-width: 900px) {
  .kn-exec { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .kn-ctl__div { display: none; }
  .kn-sel, .kn-sel__btn { width: 100%; }
  .kn-sel__btn { min-height: 44px; justify-content: flex-start; }
  .kn-sel__list { min-width: 100%; }
  .kn-head__kpi { gap: 10px; }
  .kn-split__pair { grid-template-columns: 1fr 1fr; gap: 16px; }
}

/* =====================================================================
   FINAL PASS: METHOD GROUPING + CLOSING COMPOSITION
   ===================================================================== */

/* ---------- Method belongs to the analysis above it ----------
   It previously sat in a full kn-sec with equal padding on both sides,
   which floated it in the middle of a large gap: too far from the content
   to read as part of the analysis, too far from the footer to read as part
   of that either. Tight above, generous below, so the grouping is explicit
   and the space becomes the transition into the closing. */
.kn-methodsec { padding-block: clamp(16px, 2vw, 24px) clamp(52px, 6vw, 80px); }

/* ---------- Closing stage ---------- */
/* The dark ground is on the section itself, not only on the scrim. The
   closing copy is white; if the photograph fails to load, a transparent
   section would leave white text on the page's warm white background and
   the whole closing would vanish. This way a missing image degrades to a
   plain dark panel that still reads. */
.kn-close {
  position: relative; padding: clamp(64px, 8vw, 104px) 0 clamp(24px, 3vw, 40px);
  overflow: hidden; background: #16281A;
}
.kn-close__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kn-close__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,22,14,.76) 0%, rgba(12,22,14,.58) 42%, rgba(12,22,14,.72) 100%);
}
.kn-close__msg { position: relative; z-index: 2; text-align: center; }
.web .kn-close__title {
  margin-inline: auto; max-width: 26ch;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.35rem); line-height: 1.16;
  letter-spacing: -0.022em; color: #fff; text-wrap: balance;
}
.web .kn-close__sub {
  margin: 14px auto 0; max-width: 52ch;
  font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.78); text-wrap: balance;
}
.kn-close__actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.kn-close .ph-panel { position: relative; z-index: 2; margin-top: clamp(40px, 5vw, 64px); }

@media (max-width: 640px) {
  .kn-close { padding-top: clamp(48px, 12vw, 64px); }
  .kn-close__actions { flex-direction: column; align-items: stretch; }
  .kn-close__actions > a { justify-content: center; }
}

/* Caption sits on a scrim that composites to rgb(107,113,108). At 80%
   white that measured 3.87:1; full white gives 5.14:1. */
.kn-head__cap span { color: #fff; }

/* =====================================================================
   MOBILE PASS — Knowledge
   =====================================================================
   Audited at 320/360/390px against the live page reading real API data.
   No horizontal overflow was found and the period control already fits
   on one row; the defects were touch size and how much screen the header
   consumed before any figure appeared. */
@media (max-width: 767px) {
  /* The period segment is the main control on the page and measured 40px.
     It is what a reader taps to change every number below, so it should
     not be the smallest thing on screen. */
  .kn-seg button { min-height: 44px; }

  /* "Tampilkan lebih banyak" under the records table. */
  .kn-more { min-height: 44px; }

  /* The location select is removed at runtime while dusun aggregates are
     withheld, but sized here so it is correct if it ever returns. */
  .kn-sel__btn { min-height: 44px; }
  .kn-sel__list [role="option"] { min-height: 44px; display: flex; align-items: center; }
}

/* The header ran to 75% of the viewport at 320px, so the headline figure
   sat below the fold on the page whose entire purpose is that figure.
   Tightening the block padding lifts it into view. The type scale and
   composition are unchanged. */
@media (max-width: 640px) {
  .kn-head { padding-block: 18px 14px; }
  .kn-head__grid { gap: 14px; }
  .kn-controls { margin-top: 14px; }
}

/* Touch targets extend to tablet width: 768-1024px is a finger, not a
   mouse, and at 768px the desktop nav returns with its smaller items. */
@media (max-width: 1024px) {
  .kn-seg button,
  .kn-more,
  .kn-sel__btn { min-height: 44px; }

  /* Labels at 10px are below comfortable reading at arm's length, and a
     tablet is held at arm's length too. "Periode" in particular labels
     the control that drives every figure on the page. */
  .kn-ctl__label,
  .kn-kpi__label,
  .kn-demo { font-size: 11.5px; }
  .kn-eyebrow,
  .kn-badge,
  .kn-flow__tag { font-size: 11px; }
}

/* =====================================================================
   MOBILE FIXES — Knowledge hero
   =====================================================================
   Measured at 320px against the live page. Two real defects, both from
   type and box sizes tuned at desktop width. */
@media (max-width: 767px) {
  /* The headline figure ran at 41.6px inside a 38px line box (line-height
     .92), so the digits were clipped top and bottom. A tight leading is
     right for a 68px display number; at 41px it just cuts the glyphs. */
  .kn-head__val { line-height: 1.06; }

  /* The illustration was 16/7 at this width, giving an 81px tall figure,
     while the caption absolutely positioned inside it needed 148px. The
     text spilled straight out of the image.

     On small screens the caption stops floating and sits under the image
     as its own block, so it can be as tall as its text needs. Same panel
     treatment, same words, nothing overlapping. */
  .kn-head__figure {
    aspect-ratio: auto;
    overflow: visible;
    border-radius: 0;
  }
  .kn-head__figure img {
    height: auto;
    aspect-ratio: 16/9;
    border-radius: var(--radius-lg);
  }
  .kn-head__cap {
    position: static;
    margin-top: 10px;
    /* Opaque rather than translucent with a blur: over the page background
       instead of over the photo, the blur has nothing to soften and only
       lowers contrast. */
    background: rgba(16, 26, 18, .92);
    backdrop-filter: none;
    border-radius: var(--radius-md);
  }

  /* "liter / per hari" sat baseline-aligned against a shorter number box
     and drifted into it. Aligning to the start keeps the two apart. */
  .kn-head__kpi { align-items: flex-start; gap: 10px; }
  .kn-head__unit { align-self: flex-start; padding-bottom: 0; padding-top: 4px; }
}