/*
 * recipe-dataviz.css — living-data recipes (APB_Section_Recipes_Dataviz). FAIL-OPEN: final values render
 * statically (numbers, full bars, correct ring arcs); the count-draw module animates from 0 on enter.
 * apb-dv-* namespace; neutral tokens with safe fallbacks.
 */
.apb-dv .apb-dv-head{max-width:60ch;margin:0 auto clamp(24px,4vh,48px);text-align:center}
.apb-dv .apb-dv-head h2{font-size:clamp(24px,3.4vw,40px);font-weight:700;letter-spacing:-.02em;margin:0}
.apb-dv .apb-dv-head .apb-rx-eyebrow{margin:0 0 8px}
.apb-dv .apb-dv-num{font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:-.02em}
.apb-dv .apb-dv-lbl{display:block;color:var(--apb-rx-dim,#64748b);font-size:13px;text-transform:uppercase;letter-spacing:.08em;margin-top:6px}

/* KPI band */
.apb-dv--kpis .apb-dv-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:clamp(20px,4vw,48px);text-align:center}
.apb-dv--kpis .apb-dv-num{font-size:clamp(34px,6vw,64px);display:block}

/* bar chart */
.apb-dv--bars .apb-dv-bars{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.apb-dv--bars .apb-dv-bar-row{display:grid;grid-template-columns:130px 1fr 64px;align-items:center;gap:16px}
.apb-dv--bars .apb-dv-bar-lbl{font-size:14px;color:var(--apb-rx-dim,#64748b);text-transform:uppercase;letter-spacing:.06em}
.apb-dv--bars .apb-dv-track{height:10px;border-radius:999px;background:rgba(100,116,139,.16);overflow:hidden}
.apb-dv--bars .apb-dv-bar{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--apb-rx-brand,#4f46e5),var(--apb-rx-brand2,var(--apb-rx-brand)));will-change:width;transition:width .05s linear}
.apb-dv--bars .apb-dv-bar-val{text-align:right;font-weight:800;font-variant-numeric:tabular-nums}

/* donut / gauge grid */
.apb-dv--donut .apb-dv-donuts{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(24px,4vw,56px)}
.apb-dv--donut .apb-dv-donut{text-align:center;position:relative}
.apb-dv--donut svg{width:clamp(120px,16vw,150px);height:auto;transform:rotate(-90deg)}
.apb-dv--donut .apb-dv-donut-track{fill:none;stroke:rgba(100,116,139,.18);stroke-width:10}
.apb-dv--donut .apb-dv-donut-bar{fill:none;stroke:var(--apb-rx-accent,#4f46e5);stroke-width:10;stroke-linecap:round;will-change:stroke-dashoffset}
.apb-dv--donut .apb-dv-donut-pct{position:absolute;top:calc(50% - 14px);left:0;right:0;transform:translateY(-50%)}
.apb-dv--donut .apb-dv-donut-num{font-size:clamp(22px,3vw,30px)}

/* odometer */
.apb-dv--odometer .apb-dv-odo{text-align:center}
.apb-dv--odometer .apb-dv-odo-num{font-size:clamp(56px,12vw,140px);line-height:1;display:block}

/* sparkline */
.apb-dv--sparkline .apb-dv-spark-top{text-align:center;margin-bottom:14px}
.apb-dv--sparkline .apb-dv-spark-num{font-size:clamp(30px,5vw,52px)}
.apb-dv--sparkline .apb-dv-spark-svg{display:block;width:min(720px,92%);height:clamp(90px,16vh,150px);margin:0 auto}
.apb-dv--sparkline .apb-dv-spark{fill:none;stroke:var(--apb-rx-accent,#4f46e5);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;will-change:stroke-dashoffset}

/* before -> after */
.apb-dv--compare .apb-dv-compare{display:flex;align-items:center;justify-content:center;gap:clamp(20px,5vw,64px);flex-wrap:wrap}
.apb-dv--compare .apb-dv-cmp-cell{text-align:center}
.apb-dv--compare .apb-dv-num{font-size:clamp(40px,8vw,96px);display:block}
.apb-dv--compare .apb-dv-cmp-cell--to .apb-dv-num{color:var(--apb-rx-accent-text,var(--apb-rx-accent,#4f46e5))}
.apb-dv--compare .apb-dv-cmp-arrow{font-size:clamp(28px,5vw,56px);color:var(--apb-rx-dim,#94a3b8)}

/* delta chip (kpis + statcards) */
.apb-dv .apb-dv-delta{display:inline-block;margin-left:10px;font-size:14px;font-weight:700;vertical-align:middle}
.apb-dv .apb-dv-delta--up{color:var(--apb-rx-pos,#16a34a)}
.apb-dv .apb-dv-delta--down{color:var(--apb-rx-neg,#dc2626)}

/* sparkline gradient fill */
.apb-dv--sparkline .apb-dv-spark-fill{fill:var(--apb-rx-accent,#4f46e5);opacity:.1}

/* area / line chart */
.apb-dv--area .apb-dv-area-top{text-align:center;margin-bottom:14px}
.apb-dv--area .apb-dv-area-num{font-size:clamp(30px,5vw,52px)}
.apb-dv--area .apb-dv-area-svg{display:block;width:min(760px,94%);height:clamp(160px,26vh,260px);margin:0 auto}
.apb-dv--area .apb-dv-grid{stroke:rgba(100,116,139,.16);stroke-width:1;vector-effect:non-scaling-stroke}
.apb-dv--area .apb-dv-fill-a{stop-color:var(--apb-rx-accent,#4f46e5);stop-opacity:.28}
.apb-dv--area .apb-dv-fill-b{stop-color:var(--apb-rx-accent,#4f46e5);stop-opacity:0}
/* fill is set inline per-render (unique gradient id per area chart); stop colors stay class-driven above */
.apb-dv--area .apb-dv-spark{fill:none;stroke:var(--apb-rx-accent,#4f46e5);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;will-change:stroke-dashoffset}

/* stat cards */
.apb-dv--statcards .apb-dv-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.apb-dv--statcards .apb-dv-card{border:1px solid rgba(100,116,139,.16);border-radius:var(--apb-rx-radius,14px);padding:20px;background:rgba(255,255,255,.5)}
.apb-dv--statcards .apb-dv-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.apb-dv--statcards .apb-dv-card-top .apb-dv-lbl{margin:0}
.apb-dv--statcards .apb-dv-card-top .apb-dv-delta{margin:0}
.apb-dv--statcards .apb-dv-card-num{font-size:clamp(28px,4vw,44px);display:block}
.apb-dv--statcards .apb-dv-card-spark{display:block;width:100%;height:44px;margin-top:10px}
.apb-dv--statcards .apb-dv-spark{fill:none;stroke:var(--apb-rx-accent,#4f46e5);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;will-change:stroke-dashoffset}

/* gauge */
.apb-dv--gauge .apb-dv-gauge{text-align:center;max-width:280px;margin:0 auto}
.apb-dv--gauge .apb-dv-gauge-svg{width:100%;height:auto;overflow:visible}
.apb-dv--gauge .apb-dv-gauge-track{fill:none;stroke:rgba(100,116,139,.18);stroke-width:12;stroke-linecap:round}
.apb-dv--gauge .apb-dv-gauge-bar{fill:none;stroke:var(--apb-rx-accent,#4f46e5);stroke-width:12;stroke-linecap:round;will-change:stroke-dashoffset}
.apb-dv--gauge .apb-dv-gauge-needle{stroke:var(--apb-rx-fg,#0b1020);stroke-width:3;stroke-linecap:round}
.apb-dv--gauge .apb-dv-gauge-hub{fill:var(--apb-rx-fg,#0b1020)}
.apb-dv--gauge .apb-dv-gauge-cap{margin-top:6px}
.apb-dv--gauge .apb-dv-gauge-num{font-size:clamp(30px,5vw,48px)}

/* heatmap */
.apb-dv--heatmap .apb-dv-heatgrid{display:grid;grid-template-rows:repeat(7,1fr);grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;max-width:820px;margin:0 auto;overflow-x:auto}
.apb-dv--heatmap .apb-dv-heat-cell{aspect-ratio:1;min-width:11px;border-radius:3px;background:rgba(100,116,139,.14)}
.apb-dv--heatmap .apb-dv-heat-cell[style*="--lvl:1"]{background:color-mix(in srgb,var(--apb-rx-accent,#4f46e5) 28%,transparent)}
.apb-dv--heatmap .apb-dv-heat-cell[style*="--lvl:2"]{background:color-mix(in srgb,var(--apb-rx-accent,#4f46e5) 52%,transparent)}
.apb-dv--heatmap .apb-dv-heat-cell[style*="--lvl:3"]{background:color-mix(in srgb,var(--apb-rx-accent,#4f46e5) 76%,transparent)}
.apb-dv--heatmap .apb-dv-heat-cell[style*="--lvl:4"]{background:var(--apb-rx-accent,#4f46e5)}

@media (prefers-reduced-motion:reduce){
  .apb-dv--bars .apb-dv-bar{transition:none}
}