/* Additions to Pico (classless). htmx's own indicator <style> is off (CSP style-src 'self'), so it lives here. */
.htmx-indicator { opacity: 0; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; transition: opacity 200ms ease-in; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 10; }

.flash { padding: .75rem 1rem; border-left: .25rem solid var(--pico-primary); background: var(--pico-card-background-color); }
.warning { padding: .75rem 1rem; border-left: .25rem solid var(--pico-del-color); background: var(--pico-card-background-color); }
.error { color: var(--pico-del-color); }

/* status badges: the text says the status, the color only repeats it */
.badge { display: inline-block; padding: 0 .5rem; border: 1px solid currentColor; border-radius: 1rem; font-size: .875em; }
.badge.active, .badge.complete, .badge.done, .badge.ok { color: var(--pico-ins-color); }
.badge.needs_action, .badge.failed { color: var(--pico-del-color); }
.badge.paused, .badge.partial, .badge.queued, .badge.running, .badge.planning, .badge.planned { color: var(--pico-muted-color); }

form.inline { display: inline; margin: 0; }
button.link { display: inline; width: auto; margin: 0; padding: 0; border: 0; background: none; color: var(--pico-primary); text-decoration: underline; }
td.num, th.num { text-align: right; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; }
ul.tabs { display: flex; flex-wrap: wrap; gap: 1rem; padding: 0; }
ul.tabs li { list-style: none; }