/* ===== apm_controls_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-controls-bar">, so its own rule stays a BARE class and
   outranks any scoped reset. Everything under it is scoped :where(.apm-controls-bar), which
   adds zero specificity and so cannot change which rule wins.

   No second class is needed anywhere in this file and no designer gate. Every class here is
   apm-ctrl-* or apm-controls-* and declared exactly once across the section, and the inputs
   carry apm-ctrl-input rather than px-input, so the dependency chrome that
   ensure_theme_injected() appends to <head> after every head link has nothing to tie with.
   var(--accent, var(--px-accent)) falls back to the theme accent on the designer canvas,
   because --accent is declared on the shell root and a child's canvas has no ancestor of it. */

.apm-controls-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.875rem 1.25rem;
    background: var(--px-bg-card);
    border: 1px solid var(--px-border);
    border-radius: var(--px-radius);
    box-shadow: var(--px-shadow);
}

:where(.apm-controls-bar) .apm-controls-title {
    font-family: var(--px-font);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--px-text-primary);
    white-space: nowrap;
    margin-right: 0.5rem;
}

:where(.apm-controls-bar) .apm-controls-title::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 14px;
    background: var(--accent, var(--px-accent));
    border-radius: 2px;
    margin-right: 0.5rem;
    vertical-align: middle;
}

:where(.apm-controls-bar) .apm-ctrl-group {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

:where(.apm-controls-bar) .apm-ctrl-label {
    font-family: var(--px-mono);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--px-text-muted);
    white-space: nowrap;
}

:where(.apm-controls-bar) .apm-ctrl-input {
    width: 90px;
    font-family: var(--px-font);
    font-size: 0.85rem;
    padding: 0.4rem 0.6rem;
    background: var(--px-bg-input);
    border: 1px solid var(--px-border);
    border-radius: var(--px-radius-sm);
    color: var(--px-text-primary);
    transition: border-color 0.2s ease;
}

:where(.apm-controls-bar) .apm-ctrl-input:focus {
    border-color: var(--accent, var(--px-accent));
    outline: 2px solid var(--px-focus-ring);
    outline-offset: 1px;
}

/* Dark inputs share the bar's fill, so the edge carries the 3:1 boundary. */
[data-theme="dark"] :where(.apm-controls-bar) .apm-ctrl-input:not(:focus) {
    border-color: var(--px-border-strong);
}

@media (max-width: 640px) {
    .apm-controls-bar {
        flex-direction: column;
        align-items: stretch;
    }

    :where(.apm-controls-bar) .apm-ctrl-group {
        justify-content: space-between;
    }

    :where(.apm-controls-bar) .apm-ctrl-input {
        flex: 1;
        max-width: 140px;
    }
}