/* ===== rc_sickness_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.
   The scope is the PRIVATE root class .rc-sickness, not the shared .rc-section: .rc-section is
   declared in rotacloud_analytics_html and worn by five section roots, so scoping on it would be a
   no-op that reached every section on the page.

   Two rules carry a second class on purpose. rotacloud.css sorts alphabetically AFTER this file, so
   an equal-specificity rule here loses the order tie. The doubled class buys back the one point of
   specificity. :where() adds no specificity, so wrapping them in the scope does not disturb that
   arithmetic.

   The designer limit recorded in the header of rc_lateness_html.css applies to these four forms too. */

:where(.rc-sickness) .rc-sickness-summary {
    display: flex;
    gap: 1.5rem;
}

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

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

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

/* This section's accent. Kept id-led and unscoped, exactly as declared today: (1,1,1) beats the
   parent's .rc-chart-title::before (0,1,1) whatever the document order, and the id is the root
   element itself, so a :where(.rc-sickness) prefix would demand a descendant and match nothing. */
#rc-sickness-section .rc-chart-title::before {
    background: var(--px-chart-coral);
}

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