/* ===== cht_trend_chart_html (HTML form, scoped) =====
   Loaded eagerly from anvil.yaml native_deps.head_html. The form's rules live here because
   Anvil's server strips a <style> block out of an HTML template.

   .cht-trend-card is the form root Anvil adopts, so its rule stays a BARE class: it outranks the
   scoped rules below and nothing else in the app declares it. The three descendants are scoped
   :where(.cht-trend-card), which adds no specificity and so cannot change which rule wins.

   The root gains nothing and loses nothing. A dashboard section root is a plain block child of the
   shell's .px-section-reveal container, which owns the margin and the fade-in, so no flex, no
   position and no overflow is added here; the overflow: hidden below is the card's own, carried
   across byte for byte. No keyframes, no url(), no dark-mode rule and no designer gate in this
   form: the section's only two dark rules live in the shell and portal assets, and nothing here
   hides content until JavaScript runs. */

.cht-trend-card {
    background: var(--px-bg-card);
    border: 1px solid var(--px-border);
    border-radius: var(--px-radius);
    box-shadow: var(--px-shadow);
    overflow: hidden;
}

:where(.cht-trend-card) .cht-trend-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--px-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

:where(.cht-trend-card) .cht-trend-title {
    font-family: var(--px-font);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--px-text-primary);
    margin: 0;
}

:where(.cht-trend-card) .cht-trend-body {
    padding: 1.25rem;
}