/* ==========================================================
   layout.css
   Cumulative KPI strip, section cards and the field grids.
   ========================================================== */

/* cumulative KPI strip — separate tiles on a transparent gap, so a short last
   row reads as intentional instead of leaving a hole in a bordered container */
.kpiwrap{margin-bottom:14px}
.kpiwrap .lab{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute);margin:0 2px 8px;display:block}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:8px}
.kpi{background:var(--card);border:1px solid var(--rule);border-radius:10px;
  padding:12px 14px 13px;min-width:0}
.kpi .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mute);line-height:1.35}
.kpi .v{font-family:var(--mono);font-size:22px;font-weight:600;letter-spacing:-.015em;
  line-height:1.2;margin:6px 0 2px}
.kpi .n{font-size:11px;color:var(--mid);line-height:1.35}
.kpi.good .v{color:var(--sdg)} .kpi.good .n{color:var(--sdg)}
.kpi.bad{border-color:#e8c3ba;background:var(--alarm-soft)}
.kpi.bad .v{color:var(--alarm)} .kpi.bad .n{color:var(--alarm)}
@media (max-width:560px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .kpi{padding:10px 12px 11px}
  .kpi .v{font-size:20px}
}

/* sections */
section{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
  padding:17px 17px 19px;margin-bottom:12px}
section h2{font-size:15px;font-weight:600;letter-spacing:-.012em;margin-bottom:14px}
section h2 span{font-weight:400;color:var(--mute);font-size:12.5px;margin-left:7px}