/* ===== dr_kpis_html (HTML form) =====
   Loaded eagerly from anvil.yaml native_deps.head_html, which is also what styles the
   designer canvas.

   There is no root rule. .dr-kpis-root is a wrapper that gives the form one top-level
   node, and it must not change layout: it is a plain block in normal flow, so it declares
   nothing.

   Nothing here is :where()-wrapped, and that is deliberate. Every selector already names
   one of this form's own ids or .dr-kpi-row, so none of them can leak past this form, and
   each sits at (0,2,0) or (1,1,0) against the competing (0,1,0) rules in theme.css
   (.px-kpi-card, .px-kpi-value, .px-kpi-label). Wrapping a selector that already names its
   anchor would drop it a class and hand those ties to theme.css, which is exactly the
   regression the move from a body style block to a head link creates. */

#dr-kpis, #dr-kpis-cost { grid-template-columns:repeat(5,minmax(0,1fr)); margin-bottom:0; }
#dr-kpis-cost { margin-top:14px; }
#dr-kpis .px-kpi-card, #dr-kpis-cost .px-kpi-card { min-width:0; }
.dr-kpi-row .px-kpi-value { font-size:2.1rem; }
.dr-kpi-row .px-kpi-label { display:flex; align-items:center; }
#dr-kpi-partials { font-weight:600; }
#dr-grain { margin-top:10px; font-size:11px; color:var(--px-text-muted); line-height:1.5; }
@media(max-width:600px) { #dr-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } #dr-kpis-cost { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .dr-kpi-row .px-kpi-card { padding:13px; } .dr-kpi-row .px-kpi-value { font-size:1.6rem; } }