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

   The form root is <div class="apm-metrics-wrap">, so its own rule stays a BARE class and
   outranks any scoped reset. Everything under it is scoped :where(.apm-metrics-wrap), which
   adds zero specificity and so cannot change which rule wins.

   THE TWO DARK RESTATEMENTS PUT THE SCOPE AFTER THE ANCESTOR. [data-theme="dark"] sits on
   <html>, an ancestor of this root, so :where(.apm-metrics-wrap) [data-theme="dark"] ... would
   demand a [data-theme] element INSIDE the form and never match. Written this way round the
   specificity holds: dark is (0,3,0) over light's (0,2,0).

   No second class is needed anywhere in this file and no designer gate. Every class here is
   apm-metrics-*, apm-month-*, apm-cost-color or apm-flavour-color, each declared exactly once
   across the section, and no .px-* class is declared here, so the dependency chrome that
   ensure_theme_injected() appends to <head> after every head link has nothing to tie with.
   Nothing in this file hides content until JavaScript runs, so the designer canvas shows the
   heading and an empty grid, which is what the file holds. var(--accent, #d97706) falls back to
   the literal on that canvas exactly as it does today, because --accent is declared on the shell
   root and a child's canvas has no ancestor of it. */

.apm-metrics-wrap {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

:where(.apm-metrics-wrap) .apm-metrics-section-title {
    font-family: var(--px-font);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--px-text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

:where(.apm-metrics-wrap) .apm-metrics-section-title::before {
    content: '';
    width: 3px;
    height: 14px;
    background: var(--accent, #d97706);
    border-radius: 2px;
}

:where(.apm-metrics-wrap) .apm-month-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

:where(.apm-metrics-wrap) .apm-month-card {
    background: var(--px-bg-card);
    border: 1px solid var(--px-border);
    border-radius: var(--px-radius);
    padding: 1rem 1.25rem;
    box-shadow: var(--px-shadow);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

:where(.apm-metrics-wrap) .apm-month-card:hover {
    box-shadow: var(--px-shadow-lg);
    border-color: var(--px-border-strong);
}

:where(.apm-metrics-wrap) .apm-month-label {
    font-family: var(--px-mono);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--px-text-muted);
    margin-bottom: 0.75rem;
}

:where(.apm-metrics-wrap) .apm-month-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.25rem 0;
}

:where(.apm-metrics-wrap) .apm-month-metric-label {
    font-family: var(--px-font);
    font-size: 0.8rem;
    color: var(--px-text-muted);
}

:where(.apm-metrics-wrap) .apm-month-metric-value {
    font-family: var(--px-mono);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--px-text-primary);
}

:where(.apm-metrics-wrap) .apm-month-metric-value.apm-cost-color { color: var(--px-warning-ink); }
:where(.apm-metrics-wrap) .apm-month-metric-value.apm-flavour-color { color: var(--px-success-ink); }

@media (max-width: 480px) {
    :where(.apm-metrics-wrap) .apm-month-grid {
        grid-template-columns: 1fr;
    }
}