/* ===== rc_training_html (HTML form, scoped) =====
   Loaded eagerly from anvil.yaml native_deps.head_html.

   Every rule below carries styling the template may not hold as an inline style= attribute: Anvil's
   designer keeps such an attribute but the runtime rewrites it, and the format bans it outright.

   Scoped on the PRIVATE root class .rc-training, not on .rc-section. .rc-section is declared in
   rotacloud_analytics_html's own template and worn by five section roots (workforce, gps, leave,
   sickness, training), so :where(.rc-section) would match every section on the page and scope
   nothing. The section root therefore carries both: class="rc-section rc-training".

   One rule carries a second class on purpose. rotacloud.css sorts LAST among the rotacloud links in
   native_deps.head_html, 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 zero specificity, so the
   arithmetic is unaffected by the scope.

   DESIGNER LIMIT. .rc-section-card,
   .rc-section-header, .rc-chart-title, .rc-component-container and .rc-split-grid live in
   theme/assets/rotacloud/rotacloud.css, head-linked beside this file, but every one of them is
   scoped :where(.rc-dashboard) — a class worn only by the shell root
   (client_code/main/rotacloud_analytics_html/form_template.html:1). The designer opens one form with
   no ancestors, so a section opened on its own matches none of them: only the four
   :where(.rc-training) rules below apply and the canvas is a flat text stack with two empty slot
   bands. Tree, names, selection and drag work; the picture does not.

   Re-scoping those shared rules is rotacloud.css's change, not this file's. Putting .rc-dashboard on
   this section root instead would be a regression, not a fix: the bare .rc-dashboard rule carries the
   100dvh minimum, the page gradient, 1.5rem padding, the ::before noise layer and the `> *` position
   rule, and all of it would land on the section at RUNTIME.

   Separately and unchanged either way: the --px-* SURFACE tokens are injected at runtime by the
   dependency's ensure_theme_injected() and no head-linked sheet declares them, so surface colours
   stay unresolved on the canvas. The --px-chart-* hues do resolve only for a descendant of
   .rc-dashboard, so on a standalone section they do not. */

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

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

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

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