/* ===== rc_lateness_html (HTML form, scoped) =====
   Loaded eagerly from anvil.yaml native_deps.head_html.
   The form's rules and the styling a template may not hold as inline style= attributes live here.

   DESIGNER, and what it does and does not show. .rc-section-card,
   .rc-section-header, .rc-chart-title, .rc-component-container, .rc-empty-state, .rc-split-grid and
   .rc-scroll-wrapper are in theme/assets/rotacloud/rotacloud.css, head-linked beside this file, and
   the canvas lays the section out. The --px-chart-* hues resolve as well: rotacloud.css declares them
   on .rc-dashboard. What still does not resolve is the --px-* SURFACE band (backgrounds, text,
   borders, shadows), which the dependency injects at runtime with ensure_theme_injected() and no
   head-linked sheet defines, so the canvas shows a laid-out section in unresolved surface colours.
   Tree, names, selection and drag all work. Runtime is unaffected.

   Two rules carry a second class on purpose. rotacloud.css sorts AFTER every rc_*.css link in
   native_deps.head_html, so the shell wins every equal-specificity tie against this file; the
   doubled class buys back the one point of specificity. */

:where(.rc-lateness) .rc-lateness-summary {
    display: flex;
    gap: 1.5rem;
    /* From .rc-lateness-stats, which was declared in the offenders child's global <style> and reached
       this header only because Anvil style blocks are document-wide. flex-shrink: 0 matters: the header
       is a flex container. */
    text-align: right;
    flex-shrink: 0;
}

:where(.rc-lateness) .rc-lateness-stat {
    text-align: center;
}

/* Beats the parent's .rc-kpi-meta-value { color: var(--px-text-primary) } — see the note above. */
:where(.rc-lateness) .rc-kpi-meta-value.rc-lateness-total-mins {
    color: var(--px-chart-coral);
}

:where(.rc-lateness) .rc-lateness-trends-slot {
    height: 280px;
}

@media (max-width: 640px) {
    /* This section's own sibling reset; it names a class sickness does not have. Beats the parent's
       .rc-component-container { min-height: 280px } — see the note above. */
    :where(.rc-lateness) .rc-component-container.rc-role-container-wrapper {
        min-height: auto;
        height: auto !important;
    }
}