:root {
    --htmxo-bg:      var(--pico-background-color, Canvas);
    --htmxo-accent:  var(--pico-primary, #4a90d9);
    --htmxo-success: var(--pico-color-green-550, #2a9d8f);
    --htmxo-warning: var(--pico-color-amber-550, #e9a23b);
    --htmxo-error:   var(--pico-color-red-550, #e76f51);
    /* Pico has no root-level border color: `--pico-border-color` exists only
       on form controls and buttons, and its divider color
       (`--pico-muted-border-color`) is too faint for the 2px tab frames. */
    --htmxo-border:  currentColor;
    --htmxo-muted:   var(--pico-muted-color, color-mix(in srgb, currentColor 60%, transparent));
    /* Pico raises this in steps from 576 px up to 131.25% from 1536 px. Its
       media-query rules have the same specificity as this one and come
       earlier in the page, so this value holds at every width. */
    --pico-font-size: 100%;
}
/* Pico caps `.container` at 1200 px from 1280 px and 1450 px from 1536 px. */
@media (min-width: 1280px) {
    .container {
        max-width: min(var(--htmxo-container-max-width, 1600px),
                       calc(100% - 2 * var(--htmxo-container-gutter, 2rem)));
    }
}
/* Pico paints a button without a colour class in its primary azure. It takes
   Pico's slate outline (`.secondary.outline`) instead, through the same three
   variables Pico sets on every button; `.secondary` and `.contrast` keep
   theirs. Each selector outranks the Pico rule it replaces. */
:is(button, [type=submit], [type=button], [role=button]):not(.secondary, .contrast) {
    --pico-background-color: transparent;
    --pico-color: var(--pico-secondary);
    --pico-border-color: var(--pico-secondary);
}
:is(button, [type=submit], [type=button], [role=button]):not(.secondary, .contrast):is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
    --pico-background-color: transparent;
    --pico-color: var(--pico-secondary-hover);
    --pico-border-color: var(--pico-secondary-hover);
}
:is(button, [type=submit], [type=button], [role=button]):not(.secondary, .contrast):is(:focus, [aria-current]:not([aria-current=false]):focus) {
    --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus);
}
:is([role=search], [role=group]):has(:is(button, [type=submit], [type=button], [role=button]):not(.secondary, .contrast):focus) {
    --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus);
}
/* Pico whitens a dropdown's chevron and a busy button's spinner to suit its
   filled buttons; on the outline they keep their own colour. */
details summary[role=button]:not(.secondary, .contrast)::after,
[aria-busy=true]:not(input, select, textarea):is(button, [type=submit], [type=button], [role=button]):not(.secondary, .contrast)::before {
    filter: none;
}