/* ===== na_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.

   .na-chart-card is the form root, so its rule stays a BARE class and outranks the :where()-scoped
   rules below it. It gets no `flex: 1 0 auto` and no `position: relative`: those belong to a screen
   root, and this is a dashboard section that sits as a plain block child of the shell's .na-two-col
   grid. Its own `overflow: hidden` is this card's rounded-corner clip and carries over.

   :where(.na-chart-card) adds zero specificity, so it cannot change which rule wins; it only stops
   these names reaching another screen now that the sheet is app-wide. This form styles no .px-*
   class at all, so no rule here can tie with theme.css or with the dependency's runtime-injected
   sheet. No @keyframes, no url(), no @font-face. */

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

:where(.na-chart-card) .na-chart-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--px-border);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

:where(.na-chart-card) .na-chart-title {
    font-family: var(--px-font-display);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--px-text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

:where(.na-chart-card) .na-chart-title::before {
    content: '';
    width: 3px;
    height: 16px;
    background: var(--accent, #7c3aed);
    border-radius: 2px;
}

:where(.na-chart-card) .na-chart-body {
    padding: 1rem;
    min-height: 400px;
}

:where(.na-chart-card) #na-chart-root {
    width: 100%;
    min-height: 380px;
}