esdiag 0.16.4

:root {
    --font-family: Inter, "system-ui", Helvetica, Arial, sans-serif;
    --font-family-code: "Roboto Mono", Menlo, Courier, monospace;
    --font-size-xs: 0.75rem;
    --font-size-s: 0.875rem;
    --font-size-m: 1rem;
    --font-size-ml: 1.2rem;
    --font-size-l: 1.4rem;
    --font-size-xl: 1.7rem;
    --font-size-xxl: 2rem;

    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --size-xxs: 0.125rem;
    --size-xs: 0.25rem;
    --size-s: 0.5rem;
    --size: 0.75rem;
    --size-m: 1rem;
    --size-l: 1.5rem;
    --size-xl: 2rem;
    --size-xxl: 2.5rem;
    --size-neg-xs: -0.25rem;
    --size-neg-l: -1.5rem;
    --size-header: 52px;

    --size-footer: 0px;
    --size-header: 52px;
    --content-article-max-width: 850px;

    --focus-ring-outline: 3px solid
        color-mix(
            in srgb,
            var(--focus-ring-color) 40%,
            var(--color-transparent)
        );
}

/* Theme justments for dark-mode */

html:has(#dark-mode:checked) header,
html:has(#dark-mode:checked) footer {
    background-color: var(--background-color-dimmed);
}

/* General overrides */

* {
    box-sizing: border-box;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: var(--font-family);
    font-size: var(--font-size-m);
    line-height: 1.5;
    margin: 0;
    padding: 0px;
    min-height: 100svh;
}

.jobs-main form {
    max-width: 400px;
}

header {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--size-m);
    height: 52px;
    background: var(--color-empty-shade);
    border-bottom: 1px solid var(--border-color);
    padding: 0 var(--size);
}

header-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--size-s);
    position: relative;
}

header > title {
    display: flex;
    font-size: var(--font-size-ml);
    font-weight: 500;
    margin-left: var(--size-s);
}

header > subtitle,
muted-text {
    color: var(--text-color);
}

body > footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    border-top: 1px solid var(--border-color);
    border-bottom: 0;
    padding: var(--size-l);
    background-color: var(--background-color-dimmed);
}

body > footer > license {
    font-size: var(--font-size-s);
}

a {
    text-align: start;
    user-select: text;
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: underline;
}

a[href].stealth {
    color: inherit;
    font-weight: 400;
    text-decoration: none;
    padding: var(--size-s);
}

a[href].stealth:hover {
    color: var(--text-color);
    border-radius: var(--border-radius-small);
    background-color: var(--color-overlay);
}

*:focus-visible {
    outline: var(--focus-ring-outline);
    outline-offset: 2px;
}

.clip {
    overflow: hidden;
}

content-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: var(--size-xxl);
    align-items: start;
    width: 100%;
}

content-panel {
    min-width: 0;
    padding-right: var(--size-l);
}

/*
  <documentation-viewer>
  For displaying long-form documentation content with a <documentation-outline> sidebar.
*/

documentation-viewer {
    display: grid;
    gap: var(--size-l);
    grid-template-columns: minmax(0, var(--content-article-max-width)) 280px;
    align-items: start;
    padding-left: var(--size-xxl);
    width: 100%;
    max-width: calc(var(--content-article-max-width) + 280px + var(--size-l));
}

documentation-body {
    min-width: 0;
    max-width: var(--content-article-max-width);
}

documentation-body > h1,
documentation-body > h2,
documentation-body > h3 {
    color: var(--text-color);
    line-height: 1.3;
    scroll-margin-top: calc(var(--size-header) + var(--size-s));
}

documentation-body > h1 {
    margin: var(--size-m) 0 var(--size);
    font-size: var(--font-size-xl);
}

documentation-body > h2 {
    margin: var(--size-xl) 0 var(--size-s);
    font-size: var(--font-size-l);
}

documentation-body > h3 {
    margin: var(--size-l) 0 var(--size-s);
    color: var(--text-subdued-color);
    font-size: var(--font-size-m);
}

/*
    <documentation-outline>
    A web component that creats a scrolling list of headers with clickable
    anchor links and scrolling highlight.
 */

documentation-outline {
    position: sticky;
    top: calc(var(--size-header) + var(--size));
    display: flex;
    flex-direction: column;
    gap: var(--size-s);
    max-height: calc(100svh - var(--size-header) - var(--size-l));
    overflow: auto;
    padding: var(--size-xs);
    line-height: var(--font-size-xl);
}

documentation-outline,
documentation-outline * {
    box-sizing: border-box;
}

documentation-outline ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

documentation-outline li {
    margin: 0;
}

documentation-outline > ul > li {
    padding-left: 0;
}

documentation-outline > ul > li[data-outline-level="1"] > a {
    color: var(--text-color);
    font-size: var(--font-size-s);
    font-weight: 500;
    padding-top: var(--size-s);
}

documentation-outline > ul > li[data-outline-level="2"] {
    border-left: 2px solid var(--border-color);
    padding-left: var(--size);
}

documentation-outline > ul > li[data-outline-level="2"].active-scope {
    border-left-color: var(--color-primary);
}

documentation-outline a {
    display: block;
    color: var(--text-subdued-color);
    text-decoration: none;
    font-size: var(--font-size-xs);
    font-weight: 300;
    padding: var(--size-xxs) 0;
}

documentation-outline a:visited {
    color: var(--text-subdued-color);
    text-decoration: none;
}

documentation-outline a:hover {
    color: var(--text-color);
}

documentation-outline a:focus-visible {
    outline: var(--focus-ring-outline);
    outline-offset: 2px;
    border-radius: var(--border-radius-small);
}

documentation-outline a.active-item {
    color: var(--color-primary-shade);
}

documentation-outline a.active-item:visited {
    color: var(--color-primary-shade);
}

documentation-outline > ul > li > ul {
    padding-bottom: var(--size-s);
    padding-left: var(--size);
}

documentation-outline > ul > li > ul > li > ul {
    padding-left: var(--size);
}

page-title {
    display: block;
    margin: var(--size-m) 0;
    color: var(--text-color);
    font-size: var(--font-size-xl);
    font-weight: 600;
}

section-title {
    margin-block-start: var(--size-xxl);
    margin-block-end: var(--size-m);
    color: var(--text-color);
    font-size: var(--font-size-l);
    font-weight: 600;
}

documentation-body p,
documentation-body ul,
documentation-body ol,
documentation-body blockquote,
documentation-body pre,
documentation-body table {
    margin: 0 0 var(--size-m);
}

documentation-body ul,
documentation-body ol {
    padding-left: var(--size-xl);
}

documentation-body li + li {
    margin-top: var(--size-xs);
}

documentation-body :not(pre) > code:not([class*="language-"]) {
    padding: 0.15rem 0.35rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-small);
    background: var(--background-color-dimmed);
    font-family: var(--font-family-code);
    font-size: 0.95em;
}

documentation-body pre {
    padding: var(--size-m);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--background-color-dimmed) !important;
    box-shadow: inset 0 1px 0
        color-mix(in srgb, var(--border-color) 22%, transparent);
    overflow-x: auto;
}

documentation-body pre code {
    font-family: var(--font-family-code);
    font-size: var(--font-size-s);
    background: transparent !important;
    border: 0;
    padding: 0;
}

html:has(#dark-mode:checked) documentation-body pre,
html:has(#dark-mode:checked) documentation-body pre code,
html:has(#dark-mode:checked) documentation-body code[class*="language-"] {
    color: var(--text-subdued-color);
    text-shadow: none;
}

documentation-body :not(pre) > code[class*="language-"] {
    padding: 0.15rem 0.35rem;
    border-radius: var(--border-radius-small);
    background: var(--background-color-dimmed) !important;
}

documentation-body .token.comment,
documentation-body .token.prolog,
documentation-body .token.doctype,
documentation-body .token.cdata {
    color: var(--text-subdued-color);
}

documentation-body .token.punctuation,
documentation-body .token.operator,
documentation-body .token.entity,
documentation-body .token.url {
    color: color-mix(in srgb, var(--text-color) 72%, var(--color-primary));
    background: transparent;
}

documentation-body .token.property,
documentation-body .token.tag,
documentation-body .token.boolean,
documentation-body .token.number,
documentation-body .token.constant,
documentation-body .token.symbol,
documentation-body .token.deleted {
    color: var(--color-danger);
}

documentation-body .token.selector,
documentation-body .token.attr-name,
documentation-body .token.string,
documentation-body .token.char,
documentation-body .token.builtin,
documentation-body .token.inserted {
    color: var(--color-success);
}

documentation-body .token.atrule,
documentation-body .token.attr-value,
documentation-body .token.keyword {
    color: var(--color-primary);
}

documentation-body .token.function,
documentation-body .token.class-name {
    color: var(--color-warning);
}

documentation-body .token.regex,
documentation-body .token.important,
documentation-body .token.variable {
    color: var(--color-accent);
}

documentation-body blockquote {
    position: relative;
    padding: var(--size-m);
    border-left: 0.25rem solid var(--border-color);
    background: color-mix(
        in srgb,
        var(--background-color-dimmed) 85%,
        var(--color-primary) 15%
    );
}

documentation-body blockquote > *:first-child {
    margin-top: 0;
}

documentation-body blockquote > *:last-child {
    margin-bottom: 0;
}

documentation-body blockquote[class^="markdown-alert-"]::before {
    content: "";
    position: absolute;
    left: var(--size-m);
    top: var(--size-m);
    display: block;
    width: 1rem;
    height: 1rem;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

documentation-body blockquote[class^="markdown-alert-"] {
    padding-left: calc(var(--size-m) * 2 + 1rem);
}

documentation-body
    blockquote[class^="markdown-alert-"]
    > *:first-child::before {
    display: block;
    font-weight: 500;
    line-height: 1;
    min-height: 1rem;
    padding-left: calc(1rem + var(--size-s));
    margin-bottom: var(--size-s);
}

documentation-body blockquote.markdown-alert-note {
    border-left-color: var(--color-info);
    background-color: color-mix(in srgb, var(--color-info) 10%, transparent);
}

documentation-body blockquote.markdown-alert-note::before {
    -webkit-mask-image: var(--icon-info);
    mask-image: var(--icon-info);
    color: var(--color-info);
}

documentation-body blockquote.markdown-alert-note > *:first-child::before {
    content: "Note";
    color: var(--color-info);
}

documentation-body blockquote.markdown-alert-tip {
    border-left-color: var(--color-success);
    background-color: color-mix(in srgb, var(--color-success) 10%, transparent);
}

documentation-body blockquote.markdown-alert-tip::before {
    -webkit-mask-image: var(--icon-light-bulb);
    mask-image: var(--icon-light-bulb);
    color: var(--color-success);
}

documentation-body blockquote.markdown-alert-tip > *:first-child::before {
    content: "Tip";
    color: var(--color-success);
}

documentation-body blockquote.markdown-alert-important {
    border-left-color: var(--color-primary);
    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

documentation-body blockquote.markdown-alert-important::before {
    -webkit-mask-image: var(--icon-report);
    mask-image: var(--icon-report);
    color: var(--color-primary);
}

documentation-body blockquote.markdown-alert-important > *:first-child::before {
    content: "Important";
    color: var(--color-primary);
}

documentation-body blockquote.markdown-alert-warning {
    border-left-color: var(--color-warning);
    background-color: color-mix(in srgb, var(--color-warning) 10%, transparent);
}

documentation-body blockquote.markdown-alert-warning::before {
    -webkit-mask-image: var(--icon-alert);
    mask-image: var(--icon-alert);
    color: var(--color-warning);
}

documentation-body blockquote.markdown-alert-warning > *:first-child::before {
    content: "Warning";
    color: var(--color-warning);
}

documentation-body blockquote.markdown-alert-caution {
    border-left-color: var(--color-danger);
    background-color: color-mix(in srgb, var(--color-danger) 10%, transparent);
}

documentation-body blockquote.markdown-alert-caution::before {
    -webkit-mask-image: var(--icon-stop);
    mask-image: var(--icon-stop);
    color: var(--color-danger);
}

documentation-body blockquote.markdown-alert-caution > *:first-child::before {
    content: "Caution";
    color: var(--color-danger);
}

documentation-body table {
    width: 100%;
    border-collapse: collapse;
}

documentation-body th,
documentation-body td {
    padding: var(--size-s);
    border: 1px solid var(--border-color);
    text-align: left;
}

documentation-body th {
    background: var(--background-color-dimmed);
}

/* Theme Picking Elements */

theme-picker {
    position: relative;
}

theme-toggle {
    position: relative;
}

theme-toggle > button,
theme-picker > button {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--size-s);
    margin: 0;
    padding: 0 var(--size-s);
    min-width: 32px;
    min-height: 32px;
    line-height: 1;
    border: 0;
    background: var(--color-transparent);
    color: var(--text-color);
    font: inherit;
    font-size: var(--font-size-s);
    cursor: pointer;
}

#dark-mode {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
}

theme-toggle > button:hover,
theme-picker > button:hover {
    color: var(--color-primary-shade);
}

theme-toggle > button {
    position: relative;
}

theme-toggle > button::after {
    content: attr(aria-label);
    position: absolute;
    right: 0;
    top: calc(100% + var(--size-xs));
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-small);
    background: var(--color-empty-shade);
    color: var(--text-color);
    font-size: var(--font-size-s);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-2px);
    transition:
        opacity 60ms linear,
        transform 60ms linear;
    box-shadow: var(--shadow-small);
    z-index: 70;
}

theme-toggle > button:hover::after,
theme-toggle > button:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

theme-toggle > button:focus-visible,
theme-picker > button:focus-visible {
    outline: var(--focus-ring-outline);
    outline-offset: 2px;
}

theme-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 8rem;
    padding: var(--size-xs);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-small);
    background: var(--color-empty-shade);
    box-shadow: var(--shadow-medium);
    z-index: 60;
}

theme-picker:hover > theme-menu,
theme-picker:focus-within > theme-menu {
    display: block;
}

theme-menu > button {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 100%;
    border: 0;
    border-radius: var(--border-radius-small);
    background: var(--color-transparent);
    color: var(--text-color);
    text-align: left;
    font: inherit;
    font-size: var(--font-size-s);
    line-height: 1.4;
    padding: var(--size-s) var(--size);
    cursor: pointer;
}

theme-menu > button:hover {
    background: color-mix(
        in srgb,
        var(--border-color) 20%,
        var(--color-transparent)
    );
}

theme-menu > button.active {
    background: color-mix(
        in srgb,
        var(--color-primary) 20%,
        var(--color-transparent)
    );
    color: var(--color-primary-shade);
}

theme-menu > button:focus-visible {
    outline: var(--focus-ring-outline);
    outline-offset: 2px;
}

icon-paintbrush,
icon-sun,
icon-moon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

icon-paintbrush,
icon-sun,
icon-moon,
icon-book,
icon-chevron-left,
icon-chevron-up,
icon-chevron-down,
icon-chevron-right,
icon-arrow-left,
icon-arrow-right,
icon-arrow-up,
icon-arrow-down,
icon-plus,
icon-dash,
icon-check,
icon-x,
icon-copy,
icon-file,
icon-info,
icon-alert,
icon-light-bulb,
icon-stop,
icon-lock,
icon-key,
icon-report,
icon-download,
icon-upload,
icon-sync,
icon-zap,
icon-pencil,
icon-file-added,
icon-undo,
icon-trash {
    display: flex;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

icon-paintbrush,
icon-sun,
icon-moon,
icon-book,
icon-chevron-left,
icon-chevron-up,
icon-chevron-down,
icon-chevron-right,
icon-arrow-left,
icon-arrow-right,
icon-arrow-up,
icon-arrow-down,
icon-plus,
icon-dash,
icon-check,
icon-x,
icon-copy,
icon-file,
icon-info,
icon-alert,
icon-light-bulb,
icon-stop,
icon-lock,
icon-key,
icon-report,
icon-download,
icon-upload,
icon-sync,
icon-zap,
icon-pencil,
icon-file-added,
icon-undo,
icon-trash {
    width: 16px;
    height: 16px;
}

icon-auto-theme {
    position: relative;
    display: inline-flex;
    width: 16px;
    height: 16px;
}

icon-auto-theme > icon-sun,
icon-auto-theme > icon-moon {
    position: absolute;
    inset: 0;
}

icon-auto-theme > icon-sun {
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

icon-auto-theme > icon-moon {
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

icon-auto-theme > icon-divider {
    position: absolute;
    left: 50%;
    top: -4px;
    width: 1px;
    height: 24px;
    transform: translateX(-50%) rotate(45deg);
    background: var(--border-color);
    border-radius: 1px;
}

icon-sun {
    -webkit-mask-image: var(--icon-sun);
    mask-image: var(--icon-sun);
}

icon-moon {
    -webkit-mask-image: var(--icon-moon);
    mask-image: var(--icon-moon);
}

icon-paintbrush {
    color: var(--text-subdued-color);
    -webkit-mask-image: var(--icon-paintbrush);
    mask-image: var(--icon-paintbrush);
}

icon-chevron-left {
    -webkit-mask-image: var(--icon-chevron-left);
    mask-image: var(--icon-chevron-left);
}

icon-chevron-right {
    -webkit-mask-image: var(--icon-chevron-right);
    mask-image: var(--icon-chevron-right);
}

icon-chevron-up {
    -webkit-mask-image: var(--icon-chevron-up);
    mask-image: var(--icon-chevron-up);
}

icon-chevron-down {
    -webkit-mask-image: var(--icon-chevron-down);
    mask-image: var(--icon-chevron-down);
}

icon-arrow-left {
    -webkit-mask-image: var(--icon-arrow-left);
    mask-image: var(--icon-arrow-left);
}

icon-arrow-right {
    -webkit-mask-image: var(--icon-arrow-right);
    mask-image: var(--icon-arrow-right);
}

icon-arrow-up {
    -webkit-mask-image: var(--icon-arrow-up);
    mask-image: var(--icon-arrow-up);
}

icon-arrow-down {
    -webkit-mask-image: var(--icon-arrow-down);
    mask-image: var(--icon-arrow-down);
}

icon-plus {
    -webkit-mask-image: var(--icon-plus);
    mask-image: var(--icon-plus);
}

icon-dash {
    -webkit-mask-image: var(--icon-dash);
    mask-image: var(--icon-dash);
}

icon-check {
    -webkit-mask-image: var(--icon-check);
    mask-image: var(--icon-check);
}

icon-x {
    -webkit-mask-image: var(--icon-x);
    mask-image: var(--icon-x);
}

icon-copy {
    -webkit-mask-image: var(--icon-copy);
    mask-image: var(--icon-copy);
}

icon-file {
    -webkit-mask-image: var(--icon-file);
    mask-image: var(--icon-file);
}

icon-info {
    -webkit-mask-image: var(--icon-info);
    mask-image: var(--icon-info);
}

icon-alert {
    -webkit-mask-image: var(--icon-alert);
    mask-image: var(--icon-alert);
}

icon-light-bulb {
    -webkit-mask-image: var(--icon-light-bulb);
    mask-image: var(--icon-light-bulb);
}

icon-stop {
    -webkit-mask-image: var(--icon-stop);
    mask-image: var(--icon-stop);
}

icon-lock {
    -webkit-mask-image: var(--icon-lock);
    mask-image: var(--icon-lock);
}

icon-key {
    -webkit-mask-image: var(--icon-key);
    mask-image: var(--icon-key);
}

icon-report {
    -webkit-mask-image: var(--icon-report);
    mask-image: var(--icon-report);
}

icon-download {
    -webkit-mask-image: var(--icon-download);
    mask-image: var(--icon-download);
}

icon-upload {
    -webkit-mask-image: var(--icon-upload);
    mask-image: var(--icon-upload);
}

icon-sync {
    -webkit-mask-image: var(--icon-sync);
    mask-image: var(--icon-sync);
}

theme-picker > button:hover icon-paintbrush,
theme-picker > button:focus-visible icon-paintbrush {
    color: var(--color-primary-shade);
}

/* Navigation Elements */

page-navigation {
    position: sticky;
    top: var(--size-header);
    align-self: start;
    min-height: 100svh;
    max-height: calc(100svh - var(--size-header) - var(--size-m));
    border-right: 1px solid var(--border-color);
    padding: var(--size-xs) var(--size-s);
    width: 258px;
    color: var(--text-color);
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
}

page-navigation button,
page-navigation summary {
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
}

page-navigation a {
    display: block;
    padding: calc(var(--size-xs) + 1px) var(--size-s);
    border-radius: var(--border-radius-small);
    color: var(--text-color);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
}

page-navigation a:hover {
    background: color-mix(
        in srgb,
        var(--color-primary) 13%,
        var(--color-transparent)
    );
    color: var(--text-color);
}

page-navigation a[aria-current="page"] {
    background: color-mix(
        in srgb,
        var(--color-primary) 13%,
        var(--color-transparent)
    );
    color: var(--color-primary-shade);
    font-weight: var(--font-weight-semibold);
}

page-navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

page-navigation > ul li {
    margin: var(--size-xs) 0;
}

page-navigation > ul > li > a,
page-navigation > ul > li > button,
page-navigation > ul > li > details > summary {
    display: flex;
    align-items: center;
    gap: var(--size-s);
    width: 100%;
    min-width: 0;
    padding: var(--size-s);
    border-radius: var(--border-radius-small);
    line-height: var(--font-size-m);
    color: var(--text-color);
    text-decoration: none;
}

page-navigation > ul > li > button,
page-navigation > ul > li > details > summary {
    gap: var(--size-s);
    justify-content: space-between;
    border: 0;
    background: var(--color-transparent);
    cursor: pointer;
    text-align: left;
    list-style: none;
}

page-navigation > ul > li > details > summary::-webkit-details-marker {
    display: none;
}

page-navigation > ul > li > button > span,
page-navigation > ul > li > details > summary > span {
    min-width: 0;
}

page-navigation > ul > li > a:hover,
page-navigation > ul > li > button:hover,
page-navigation > ul > li > details > summary:hover {
    background: color-mix(
        in srgb,
        var(--color-primary) 13%,
        var(--color-transparent)
    );
    color: var(--text-color);
}

page-navigation > ul > li > a[aria-current="page"] {
    background: color-mix(
        in srgb,
        var(--color-primary) 13%,
        var(--color-transparent)
    );
    color: var(--color-primary-shade);
}

icon-chevron-left,
icon-chevron-right {
    display: inline-flex;
    width: 0.875rem;
    height: 0.875rem;
    transition: transform 120ms ease;
    flex: 0 0 auto;
    color: currentColor;
}

icon-chevron-right {
    margin-left: auto;
}

page-navigation > ul > li > button[aria-expanded="true"] icon-chevron-right,
page-navigation > ul > li > details[open] > summary icon-chevron-right {
    transform: rotate(90deg);
}

page-navigation > ul > li > ul,
page-navigation > ul > li > details > ul {
    max-height: 12rem;
    margin: var(--size-xs) var(--size-xxs);
    padding-left: var(--size-s);
    overflow: hidden;
    transition:
        max-height 180ms ease,
        margin 180ms ease;
}

page-navigation > ul > li > ul.collapsed {
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    pointer-events: none;
}

page-navigation > ul > li > details:not([open]) > ul {
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    pointer-events: none;
}

page-navigation > ul > li > details[open] > ul {
    max-height: 12rem;
    margin-top: var(--size-xs);
    margin-bottom: var(--size-xs);
}

/* Tabs */

tab-bar {
    position: relative;
    display: flex;
    gap: var(--size-l);
    align-items: flex-end;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    padding: 0;
    margin-bottom: var(--size-m);
}

tab-bar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--border-color);
    z-index: 0;
}

tab-bar > button {
    appearance: none;
    display: inline-block;
    border: 0;
    background: var(--color-transparent);
    color: var(--text-subdued-color);
    font: inherit;
    font-size: var(--font-size-s);
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    padding: var(--size) var(--size-xs);
    margin-bottom: 0;
    position: relative;
    z-index: 1;
    cursor: pointer;
    transition: color 120ms ease;
}

tab-bar > button:hover {
    color: var(--color-primary-shade);
}

content.job-content {
    max-width: min(1500px, calc(100vw - var(--size-xl)));
}

content.jobs-content {
    max-width: 100%;
    margin: 0;
    padding: var(--size-l) var(--size-xl)
        calc(var(--size-footer) + var(--size-l));
}

content-layout.jobs-layout {
    gap: var(--size-l);
    grid-template-columns: minmax(240px, 320px) minmax(240px, 448px) auto;
}

.jobs-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.jobs-main h1 {
    margin-top: 0;
}

.jobs-main > steps {
    flex: 1;
    min-width: 20%;
}

.jobs-nav {
    display: flex;
    flex-direction: column;
    gap: var(--size-s);
    position: sticky;
    top: calc(var(--size-header) + var(--size));
    width: 240px;
    max-height: calc(
        100svh - var(--size-header) - var(--size-footer) - var(--size-xl)
    );
    flex-shrink: 0;
    overflow: auto;
}

.jobs-nav > h3 {
    margin: 0;
}

.saved-jobs-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.saved-job-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--size-xs);
    min-height: 2rem;
    padding: 0;
    border-radius: var(--border-radius-small);
}

.saved-job-item:hover {
    background: color-mix(
        in srgb,
        var(--color-primary) 10%,
        var(--color-transparent)
    );
}

.saved-job-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    padding: var(--size-xs) var(--size-s);
    color: var(--text-color);
    text-decoration: none;
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-medium);
    border-radius: var(--border-radius-small);
}

.saved-job-name:hover {
    color: var(--text-color);
    text-decoration: none;
}

.saved-job-name.is-current {
    background: color-mix(
        in srgb,
        var(--color-primary) 14%,
        var(--background-color)
    );
    color: var(--color-primary);
}

.saved-job-delete {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: var(--font-size-m);
    padding: 0 var(--size-s);
    line-height: 1;
    opacity: 0;
}

.saved-job-item:hover .saved-job-delete {
    opacity: 1;
}

.saved-job-delete:hover {
    color: var(--color-danger);
}

.saved-job-delete:focus-visible {
    opacity: 1;
    outline: var(--focus-ring-outline);
    outline-offset: 2px;
}

@media (hover: none), (pointer: coarse) {
    .saved-job-delete {
        opacity: 1;
    }
}

.jobs-nav > button {
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius-small);
    background: var(--background-color);
    color: var(--text-color);
    font: inherit;
    font-size: var(--font-size-s);
    line-height: var(--font-size-l);
    padding: var(--size-xs) var(--size);
    cursor: pointer;
    width: fit-content;
    transition:
        background-color 120ms ease,
        border-color 120ms ease,
        color 120ms ease;
}

.jobs-nav > button:hover {
    background: var(--color-overlay);
}

.jobs-nav > button:disabled {
    border-color: var(--border-color);
    background: var(--form-control-disabled-color);
    color: var(--text-subdued-color);
    cursor: not-allowed;
}

.saved-job-message {
    font-size: var(--font-size-s);
    color: var(--color-warning);
    margin: 0;
}

.empty-state {
    color: var(--color-text-muted);
    font-size: var(--font-size-s);
    margin: 0;
}

steps {
    display: block;
}

steps > ol {
    counter-reset: steps;
    margin: 0;
    padding: 0;
    list-style: none;
}

steps li {
    position: relative;
    margin: 0;
    padding: var(--size-xs) 0 var(--size-xl)
        calc(var(--size-xl) + var(--size-m));
}

steps li::before {
    content: counter(steps);
    counter-increment: steps;
    position: absolute;
    left: 0;
    display: grid;
    place-items: center;
    inline-size: var(--size-xl);
    block-size: var(--size-xl);
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--button-text-color);
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    z-index: 1;
}

steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: var(--size-m);
    bottom: calc(var(--size-m) * -1);
    left: calc(var(--size-xl) / 2);
    width: 2px;
    transform: translateX(-50%);
    background: var(--border-color);
}

steps li > :first-child {
    margin-top: 0;
}

steps li > :last-child {
    margin-bottom: 0;
}

content.jobs-content > steps {
    margin: var(--size-xl) 0;
}

content.jobs-content steps h2 {
    margin: 0 0 var(--size-xs);
}

content.jobs-content steps h3 {
    margin: var(--size-l) 0 var(--size-xs);
}

content.jobs-content steps button-group,
content.jobs-content steps choice-row {
    margin-top: var(--size-xs);
}

content.jobs-content steps .form-input,
content.jobs-content steps .curl-textarea {
    width: 100%;
    max-width: 44rem;
}

content.jobs-content steps .dropzone {
    max-width: 44rem;
}

.jobs-actions {
    display: flex;
    align-items: center;
    gap: var(--size-s);
    margin: 0 0 var(--size-xl) calc(var(--size-xl) + var(--size-m));
    flex-wrap: wrap;
}

jobs-save-controls {
    flex: 0;
    min-width: min(100%, 14rem);
}

jobs-save-controls > .form-input {
    width: 100%;
}

.jobs-actions > button {
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius-small);
    background: var(--background-color);
    color: var(--text-color);
    font: inherit;
    font-size: var(--font-size-s);
    line-height: var(--font-size-l);
    padding: var(--size-xs) var(--size);
    cursor: pointer;
    transition:
        background-color 120ms ease,
        border-color 120ms ease,
        color 120ms ease;
}

.jobs-actions > button.primary {
    border-color: var(--button-primary-background);
    background: var(--button-primary-background);
    color: var(--button-text-color);
}

.jobs-actions > button:hover {
    background: var(--color-overlay);
}

.jobs-actions > button.primary:hover {
    border-color: var(--button-primary-background-hover);
    background: var(--button-primary-background-hover);
}

.jobs-actions > button:disabled {
    border-color: var(--border-color);
    background: var(--form-control-disabled-color);
    color: var(--text-subdued-color);
    cursor: not-allowed;
}

.jobs-actions > button:disabled:hover {
    background: var(--form-control-disabled-color);
}

.jobs-actions > button:focus-visible {
    outline: var(--focus-ring-outline);
    outline-offset: 2px;
}

directory-picker {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-s);
    align-items: center;
    max-width: 44rem;
}

directory-picker > input.form-input {
    flex: 1 1 20rem;
    min-width: 0;
}

directory-picker > button {
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius-small);
    background: var(--background-color);
    color: var(--text-color);
    font: inherit;
    font-size: var(--font-size-s);
    line-height: var(--font-size-l);
    padding: var(--size-xs) var(--size);
    cursor: pointer;
    transition:
        background-color 120ms ease,
        border-color 120ms ease,
        color 120ms ease;
}

directory-picker > button:hover {
    background: var(--color-overlay);
}

directory-picker > button:disabled {
    border-color: var(--border-color);
    background: var(--form-control-disabled-color);
    color: var(--text-subdued-color);
    cursor: not-allowed;
}

directory-picker > button:disabled:hover {
    background: var(--form-control-disabled-color);
}

directory-picker > button:focus-visible {
    outline: var(--focus-ring-outline);
    outline-offset: 2px;
}

metadata-form {
    display: block;
    width: 40%;
    background-color: var(--background-color);
    padding: var(--size-m);
    border-left: 1px solid var(--border-color);
}

tab-bar > button.active,
tab-bar > button[aria-selected="true"] {
    color: var(--color-primary-shade);
    font-weight: 500;
}

tab-bar > button.active::after,
tab-bar > button[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--color-primary);
    z-index: 3;
}

tab-content {
    margin-top: var(--size-m);
}

/* Page content building blocks */

panel {
    display: flex;
    flex-direction: column;
    overflow: auto;
    margin: var(--size-xl) 0;
    padding: var(--size-l);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

panel > :is(h1, h2, h3, h4, h5, h6):first-child {
    margin-top: 0;
}

.job-panel {
    padding: var(--size-l);
}

job-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--size-l);
    align-items: stretch;
    margin: var(--size-xl) 0;
}

card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--background-color);
    box-shadow: var(--shadow-small);
    overflow: visible;
}

card.job-card {
    min-height: calc(100svh - var(--size-header) - 8rem);
    max-height: calc(100svh - var(--size-header) - 8rem);
}

card.disabled {
    background: var(--background-color-dimmed);
    box-shadow: none;
}

card.disabled:hover {
    transform: none;
    box-shadow: none;
}

card.disabled > card-body,
card.disabled > card-body * {
    color: color-mix(
        in srgb,
        var(--text-subdued-color) 92%,
        var(--background-color)
    );
}

card.disabled > card-badge {
    background: color-mix(
        in srgb,
        var(--background-color-dimmed) 85%,
        var(--background-color)
    );
    color: var(--text-subdued-color);
    box-shadow: none;
    border-color: var(--border-color);
}

card > card-badge {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 6rem;
    min-height: var(--size-l);
    padding: 0 calc(var(--size-s) + var(--size-xs));
    border: 1px solid var(--border-color-strong);
    border-radius: 999px;
    background: var(--background-color);
    color: var(--text-color);
    font-size: var(--font-size-xs);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transform: translate(-50%, -50%);
}

card > card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--size);
    min-height: 0;
    overflow: auto;
    padding: var(--size-xl) var(--size-l) var(--size-l);
}

card > footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--size-s);
    margin-top: auto;
    padding: var(--size-s);
    background: var(--background-color-dimmed);
    border-top: 1px solid var(--border-color);
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

card > footer > button {
    border: none;
    border-radius: var(--border-radius-small);
    background: var(--color-primary);
    color: var(--background-color);
    font: inherit;
    font-size: var(--font-size-s);
    line-height: var(--font-size-l);
    padding: var(--size-xs) var(--size);
    cursor: pointer;
    transition:
        background-color 120ms ease,
        border-color 120ms ease,
        color 120ms ease;
}

card > footer > button:hover {
    background: var(--color-overlay);
}

card > footer > button:disabled {
    background: color-mix(in srgb, var(--border-color) 45%, transparent);
    color: var(--text-subdued-color);
    cursor: not-allowed;
}

card > footer > button:focus-visible {
    outline: 3px solid
        color-mix(
            in srgb,
            var(--focus-ring-color) 40%,
            var(--color-transparent)
        );
    outline-offset: 2px;
}

.job-card-footer {
    gap: var(--size);
}

.footer-choice {
    display: inline-flex;
    align-items: center;
    gap: var(--size-s);
    white-space: nowrap;
    margin: 0;
}

.footer-choice > label {
    font-size: var(--font-size-s);
    font-weight: 600;
}

.footer-input {
    flex: 1 1 14rem;
    min-width: 12rem;
    margin: 0;
}

.footer-status {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--size-xs);
    color: var(--text-subdued-color);
    font-size: var(--font-size-s);
    font-weight: 600;
}

.footer-status svg {
    width: 0.875rem;
    height: 0.875rem;
    stroke: currentColor;
    stroke-width: 1.75;
    fill: none;
    flex: 0 0 auto;
}

.job-step-segment {
    text-transform: lowercase;
}

.footer-choice > input.switch {
    width: 40px;
    min-width: 40px;
    height: 20px;
    margin: 0;
    appearance: none;
    border: 0;
    border-radius: 20px;
    background: var(--text-subdued-color);
    cursor: pointer;
    transition: background-color 300ms ease;
}

.footer-choice > input.switch:checked {
    background: var(--color-primary);
}

.footer-choice > input.switch:focus-visible {
    outline: 3px solid
        color-mix(
            in srgb,
            var(--focus-ring-color) 40%,
            var(--color-transparent)
        );
    outline-offset: 2px;
}

.footer-choice > input.switch:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

.footer-choice > input.switch:disabled ~ label {
    color: var(--text-subdued-color);
}

switch-clip {
    width: 40px;
    height: 20px;
    margin-left: calc(-40px - var(--size-s));
    pointer-events: none;
    overflow: hidden;
    border-radius: 20px;
}

switch-glyphs {
    color: var(--background-color);
    pointer-events: none;
    position: relative;
    display: flex;
    width: 50px;
    height: 20px;
    left: -16px;
    transition: left 200ms ease;
}

switch-glyphs:disabled {
    color: var(--color-background-dimmed);
}

switch-glyphs > svg {
    width: 50px;
    height: 20px;
}

switch-glyphs .glyph {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

switch-glyphs .filled {
    fill: currentColor;
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 120ms ease;
}

.footer-choice > input.switch:active + switch-clip switch-glyphs .filled {
    transform: scale(0.9);
}

switch-glyphs.switch-off {
    left: -16px;
}

switch-glyphs.switch-on {
    left: 4px;
}

switch-glyphs:disabled {
    color: var(--color-background-dimmed);
}

stage-panel {
    display: block;
    width: 100%;
}

stage-header {
    display: block;
    margin-bottom: var(--size);
}

stage-divider {
    display: block;
    margin: var(--size-l) 0 var(--size);
    border-top: 1px solid var(--border-color);
}

.stage-options {
    margin-bottom: var(--size);
}

.stage-options.nested {
    margin-top: var(--size);
}

button-group {
    display: inline-flex;
    align-items: stretch;
    --button-group-border-color: var(--border-color-light);
    --button-group-background: var(--background-color);
    --button-group-color: var(--text-color);
    --button-group-hover-background: var(--background-color-primary);
    --button-group-active-background: var(--background-color-primary);
    --button-group-selected-border-color: var(--text-subdued-color);
    --button-group-selected-background: var(--text-subdued-color);
    --button-group-selected-color: var(--button-text-color);
    --button-group-selected-hover-color: color-mix(
        in srgb,
        var(--button-group-selected-background) 80%,
        var(--background-color-primary)
    );
}

button-group.primary {
    --button-group-color: var(--button-primary-background);
    --button-group-selected-border-color: var(--button-primary-background);
    --button-group-selected-background: var(--button-primary-background);
}

button-group > button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--size-xs);
    height: var(--size-xl);
    padding: var(--size-xs) var(--size);
    border: 1px solid var(--button-group-border-color);
    border-radius: 0;
    background: var(--button-group-background);
    color: var(--button-group-color);
    font: inherit;
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition:
        background-color 120ms ease-in,
        border-color 120ms ease-in,
        color 120ms ease-in;
}

button-group > button + button {
    margin-left: -1px;
}

button-group > button:first-child {
    border-top-left-radius: var(--border-radius-small);
    border-bottom-left-radius: var(--border-radius-small);
}

button-group > button:last-child {
    border-top-right-radius: var(--border-radius-small);
    border-bottom-right-radius: var(--border-radius-small);
}

button-group > button:hover {
    z-index: 1;
    background: var(--button-group-hover-background);
}

button-group > button:active {
    z-index: 1;
    background: var(--button-group-active-background);
}

button-group > button:focus-visible {
    z-index: 2;
    outline: var(--focus-ring-outline);
    outline-offset: -1px;
}

button-group
    > button:is(
        .active,
        .selected,
        [aria-pressed="true"],
        [aria-selected="true"],
        [aria-current="true"],
        [aria-current="page"]
    ) {
    z-index: 1;
    border-color: var(--button-group-selected-border-color);
    background: var(--button-group-selected-background);
    color: var(--button-group-selected-color);
}

button-group
    > button:is(
        .active,
        .selected,
        [aria-pressed="true"],
        [aria-selected="true"],
        [aria-current="true"],
        [aria-current="page"]
    ):hover {
    border-color: var(--button-group-selected-hover-color);
    background: var(--button-group-selected-hover-color);
}

button-group > button:has(> icon) {
    width: 32px;
    min-height: 32px;
    padding: 0;
}

advanced-panel {
    display: block;
    margin-top: var(--size);
    padding: var(--size);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-small);
    background-color: var(--background-color-dimmed);
}

.processor-accordion {
    width: 100%;
    margin-top: var(--size);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-small);
    background-color: var(--background-color-dimmed);
}

.processor-accordion > summary {
    cursor: pointer;
    list-style: none;
    padding: var(--size) var(--size-m);
    font-size: var(--font-size-s);
    font-weight: 600;
}

.processor-accordion > summary::-webkit-details-marker {
    display: none;
}

.processor-accordion > advanced-panel {
    margin-top: 0;
    border: 0;
    border-top: 1px solid var(--border-color);
    border-radius: 0 0 var(--border-radius-small) var(--border-radius-small);
}

processor-list {
    display: flex;
    flex-direction: column;
    gap: var(--size-xs);
    margin-top: var(--size);
}

.save-controls {
    display: flex;
    align-items: center;
    gap: var(--size);
}

panel > footer {
    display: flex;
    justify-content: flex-start;
    gap: var(--size-s);
    margin: var(--size-l) calc(var(--size-l) * -1) calc(var(--size-l) * -1);
    padding: var(--size-s);
    background: var(--background-color-dimmed);
    border-top: 1px solid var(--border-color);
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

panel > footer > button {
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius-small);
    background: var(--background-color);
    color: var(--text-color);
    font: inherit;
    font-size: var(--font-size-s);
    line-height: var(--font-size-l);
    padding: var(--size-xs) var(--size);
    cursor: pointer;
    transition:
        background-color 120ms ease,
        border-color 120ms ease,
        color 120ms ease;
}

panel > footer > button:hover {
    background: var(--color-overlay);
}

panel > footer > button:disabled {
    border-color: var(--border-color);
    background: var(--form-control-disabled-color);
    color: var(--text-subdued-color);
    cursor: not-allowed;
    box-shadow: none;
}

panel > footer > button:disabled:hover {
    background: var(--form-control-disabled-color);
    color: var(--text-subdued-color);
}

panel > footer > button:focus-visible {
    outline: var(--focus-ring-outline);
    outline-offset: 2px;
}

panel fieldset {
    margin: var(--size-l) 0 0;
    padding: 0;
    border: 0;
}

panel legend {
    margin: 0 0 var(--size-s);
    color: var(--text-color);
    font-size: var(--font-size-s);
    font-weight: 600;
}

card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--size-l);
    margin-top: var(--size-l);
}

card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-small);
    background: var(--background-color);
    box-shadow: var(--shadow-medium);
    overflow: visible;
    transition:
        transform 140ms ease,
        box-shadow 140ms ease,
        border-color 140ms ease;
}

card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

card.selected {
    border-color: var(--color-primary);
    box-shadow:
        0 0 0 1px
            color-mix(
                in srgb,
                var(--color-primary) 45%,
                var(--color-transparent)
            ),
        var(--shadow-medium);
}

card.disabled {
    background: var(--background-color-dimmed);
    box-shadow: none;
}

card.disabled:hover {
    transform: none;
    box-shadow: none;
}

card.disabled,
card.disabled > * {
    color: color-mix(
        in srgb,
        var(--text-subdued-color) 92%,
        var(--background-color)
    );
}

card.disabled card-media,
card.disabled > card-badge {
    background: color-mix(
        in srgb,
        var(--background-color-dimmed) 85%,
        var(--background-color)
    );
    box-shadow: none;
}

card.disabled > card-badge {
    border-color: var(--border-color);
}

card.compact card-body {
    gap: var(--size-s);
}

card > card-badge {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5rem;
    min-height: var(--size-l);
    padding: 0 calc(var(--size-s) + var(--size-xs));
    border: 1px solid var(--border-color-light);
    border-radius: 1000px;
    background: var(--background-color);
    color: var(--text-color);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transform: translate(-50%, -50%);
}

card > card-badge.accent {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--background-color);
}

card > card-badge.subdued {
    background: var(--background-color-dimmed);
    color: var(--text-subdued-color);
}

card-media {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 7rem;
    padding: var(--size-l);
    margin: var(--size-l) var(--size-l) 0;
    border: 1px solid var(--border-color);
    border-radius: calc(var(--border-radius) - 1px);
    background: var(--background-color);
    color: var(--color-primary-shade);
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-weight: 700;
    letter-spacing: 0.08em;
}

card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--size);
    padding: var(--size-l) var(--size-l) var(--size-m);
}

card-eyebrow {
    color: var(--text-subdued-color);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

card-body > h3,
modal-header h3,
flyout-header h3 {
    margin: 0;
}

card-body > p {
    margin: 0;
    color: var(--text-subdued-color);
}

card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-s);
    color: var(--text-subdued-color);
    font-size: var(--font-size-s);
}

card-meta > span,
card-tag {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: 0 var(--size-s);
    border-radius: 999px;
    background: color-mix(
        in srgb,
        var(--background-color-primary) 72%,
        var(--background-color)
    );
}

card-tag {
    width: fit-content;
    color: var(--color-primary-shade);
    font-size: var(--font-size-xs);
    font-weight: 700;
}

card-footer,
modal > panel > footer,
modal-footer,
flyout-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--size-s);
    padding: var(--size-m) var(--size-l);
    background: var(--background-color-dimmed);
    border-top: 1px solid var(--border-color);
}

card-footer {
    background: transparent;
    border-top: 0;
    padding-top: 0;
}

card-footer > button,
modal > panel > footer > button,
modal-footer > button,
flyout-footer > button,
modal > panel > header > button.dismiss,
modal-header > button.dismiss,
flyout-header > button.dismiss {
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius-small);
    background: var(--background-color);
    color: var(--text-color);
    font: inherit;
    font-size: var(--font-size-s);
    line-height: var(--font-size-l);
    padding: var(--size-xs) var(--size);
    cursor: pointer;
    transition:
        background-color 120ms ease,
        border-color 120ms ease,
        color 120ms ease;
}

modal > panel > footer > button.primary,
modal-footer > button.primary,
flyout-footer > button.primary {
    border-color: var(--button-primary-background);
    background: var(--button-primary-background);
    color: var(--button-text-color);
}

card-footer > button:hover,
modal > panel > footer > button:hover,
modal-footer > button:hover,
flyout-footer > button:hover,
modal > panel > header > button.dismiss:hover,
modal-header > button.dismiss:hover,
flyout-header > button.dismiss:hover {
    background: var(--color-overlay);
}

modal > panel > footer > button.primary:hover,
modal-footer > button.primary:hover,
flyout-footer > button.primary:hover {
    border-color: var(--button-primary-background-hover);
    background: var(--button-primary-background-hover);
}

card-footer > button:focus-visible,
modal > panel > footer > button:focus-visible,
modal-footer > button:focus-visible,
flyout-footer > button:focus-visible,
modal > panel > header > button.dismiss:focus-visible,
modal-header > button.dismiss:focus-visible,
flyout-header > button.dismiss:focus-visible {
    outline: var(--focus-ring-outline);
    outline-offset: 2px;
}

modal,
modal-backdrop,
flyout-shell {
    position: fixed;
    inset: 0;
    z-index: 80;
}

modal,
modal-backdrop {
    display: grid;
    place-items: center;
    padding: var(--size-xl);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: color-mix(
        in srgb,
        var(--background-color-dimmed) 35%,
        rgb(0 0 0 / 55%)
    );
    backdrop-filter: blur(6px);
}

modal > backdrop,
modal-scrim {
    position: absolute;
    inset: 0;
}

modal > panel,
modal-dialog,
flyout-panel {
    border: 1px solid var(--border-color);
    background: var(--background-color);
    box-shadow: var(--shadow-medium);
}

modal > panel,
modal-dialog {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(100%, 36rem);
    max-height: min(80vh, 42rem);
    border-radius: calc(var(--border-radius) + 4px);
    overflow: hidden;
}

modal > panel > header,
modal-header,
flyout-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--size-m);
    padding: var(--size-l);
    border-bottom: 1px solid var(--border-color);
}

modal > panel > content,
modal-body,
flyout-body {
    display: flex;
    flex-direction: column;
    gap: var(--size-l);
    padding: var(--size-l);
}

modal > panel > content,
modal-body {
    overflow-y: auto;
    overscroll-behavior: contain;
}

modal > panel > footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--size-s);
    padding: var(--size-l);
    border-top: 1px solid var(--border-color);
}

flyout-scrim {
    position: absolute;
    inset: 0;
    background: color-mix(
        in srgb,
        var(--background-color-dimmed) 22%,
        rgb(0 0 0 / 40%)
    );
}

flyout-panel {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    width: min(100%, 32rem);
    height: 100%;
    background: var(--background-color);
}

flyout-panel.wide {
    width: min(100%, 44rem);
}

flyout-body {
    flex: 1;
    overflow: auto;
}

flyout-panel > tab-bar {
    padding: 0 var(--size-l);
    border-bottom: 1px solid var(--border-color);
}

/* Forms and inputs */

form-group {
    margin-top: var(--size-l);
}

form-label {
    font-weight: 600;
    margin-bottom: var(--size-s);
}

form-input > :is(input, select, textarea) {
    width: 100%;
    padding: var(--size) var(--size-m);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-small);
    background: var(--form-background-color);
    color: var(--text-color);
    font: inherit;
}

form-input > :is(input, select, textarea):hover {
    border-color: var(--color-primary);
}

form-input > input::placeholder {
    color: var(--form-placeholder-color);
}

form-input > input:disabled {
    background: var(--form-control-disabled-color);
    color: var(--text-subdued-color);
}

form-input > textarea {
    min-height: 5rem;
    resize: vertical;
    line-height: 1.5;
}

form-input > textarea::placeholder {
    color: var(--text-subdued-color);
}

form-input > textarea:focus-visible {
    outline: var(--focus-ring-outline);
    outline-offset: 3px;
}

choice-row {
    display: flex;
    align-items: center;
    gap: var(--size-s);
    margin-top: var(--size-xs);
}

choice-row > input[type="radio"],
choice-row > input[type="checkbox"]:not(.switch) {
    appearance: none;
    width: 16px;
    height: 16px;
    margin: 0;
    border: 1px solid var(--border-color);
    background: var(--form-background-color);
    color: var(--color-primary);
    cursor: pointer;
    position: relative;
    flex: 0 0 16px;
    transition:
        border-color 150ms ease-in,
        background-color 150ms ease-in,
        color 150ms ease-in;
}

choice-row > input[type="radio"] {
    border-radius: 50%;
}

choice-row > input[type="radio"]:active,
choice-row > input[type="checkbox"]:not(.switch):active {
    border-color: var(--color-primary);
}

choice-row > input[type="radio"]:checked {
    border-width: 5px;
    border-color: var(--color-primary);
}

choice-row > input[type="checkbox"]:not(.switch) {
    border-radius: var(--border-radius-small);
}

choice-row > input[type="checkbox"]:not(.switch)::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid var(--background-color);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 120ms ease-in;
}

choice-row > input[type="checkbox"]:not(.switch):checked {
    border-color: var(--color-primary);
    background: var(--color-primary);
}

choice-row > input[type="checkbox"]:not(.switch):checked::after {
    opacity: 1;
}

choice-row > input[type="radio"]:focus-visible,
choice-row > input[type="checkbox"]:not(.switch):focus-visible {
    outline: var(--focus-ring-outline);
    outline-offset: 2px;
}

choice-row > label {
    color: var(--text-color);
    font-size: var(--font-size-s);
    cursor: pointer;
}

form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-s);
    margin-top: var(--size-l);
}

form-actions > button {
    border: 1px solid var(--color-transparent);
    border-radius: var(--border-radius-small);
    background: var(--background-color-primary);
    color: var(--color-primary);
    font: inherit;
    font-size: var(--font-size-s);
    line-height: 1.2;
    padding: var(--size) var(--size-l);
    min-height: 2.25rem;
    cursor: pointer;
    transition:
        background-color 150ms ease-in,
        border-color 150ms ease-in,
        color 150ms ease-in;
}

form-actions > button:hover {
    background: var(--button-empty-primary-hover);
}

form-actions > button:active {
    background: var(--button-empty-primary-active);
}

form-actions > button:focus-visible {
    outline: var(--focus-ring-outline);
    outline-offset: 2px;
}

form-actions > button.is-filled {
    border-color: var(--button-primary-background);
    background: var(--button-primary-background);
    color: var(--button-text-color);
}

form-actions > button.is-filled:hover {
    border-color: var(--button-primary-background-hover);
    background: var(--button-primary-background-hover);
}

form-actions > button.is-neutral {
    border-color: var(--border-color-light);
    background: var(--background-color);
    color: var(--text-color);
}

form-actions > button.is-neutral:hover {
    border-color: var(--border-color-light);
    background: var(--color-overlay);
}

choice-row > input.switch {
    width: 40px;
    min-width: 40px;
    height: 20px;
    margin: 0;
    appearance: none;
    border: 0;
    border-radius: 20px;
    background: var(--text-subdued-color);
    cursor: pointer;
    transition: background-color 300ms ease;
}

choice-row > input.switch:checked {
    background: var(--color-primary);
}

choice-row > input.switch:focus-visible {
    outline: var(--focus-ring-outline);
    outline-offset: 2px;
}

switch-clip {
    width: 40px;
    height: 20px;
    margin-left: calc(-40px - var(--size-s));
    pointer-events: none;
    overflow: hidden;
    border-radius: 20px;
}

switch-glyphs {
    color: var(--background-color);
    pointer-events: none;
    position: relative;
    display: flex;
    width: 50px;
    height: 20px;
    left: -16px;
    transition: left 200ms ease;
}

switch-glyphs > svg {
    width: 50px;
    height: 20px;
}

switch-glyphs .glyph {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

switch-glyphs .filled {
    fill: currentColor;
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 120ms ease;
}

choice-row > input.switch:active + switch-clip switch-glyphs .filled {
    transform: scale(0.9);
}

switch-glyphs.switch-off {
    left: -16px;
}

switch-glyphs.switch-on {
    left: 4px;
}

form-group.has-error form-input > input,
form-error {
    border-color: var(--color-danger);
    color: var(--color-danger);
}

form-help,
form-error {
    margin: var(--size-s) 0 0;
    font-size: var(--font-size-s);
}

form-help {
    color: var(--text-subdued-color);
}

@media (max-width: 640px) {
    content-layout {
        display: block;
    }

    page-navigation {
        position: static;
        max-height: none;
        overflow: visible;
        border-right: 0;
        border-bottom: 1px solid var(--border-color);
        margin-bottom: var(--size-l);
        padding: 0 var(--size-l) var(--size-m);
        width: auto;
    }

    page-navigation > ul > li > ul {
        margin-left: var(--size-s);
        padding-left: var(--size-s);
    }

    header-row {
        flex-direction: column;
        align-items: flex-start;
    }

    theme-toggle > button {
        margin-top: 0;
    }

    tab-bar {
        gap: var(--size);
    }

    tab-bar > button {
        padding: var(--size-s) var(--size-xs);
        font-size: var(--font-size-s);
    }

    content-panel {
        padding-right: 0;
    }

    documentation-viewer {
        grid-template-columns: 1fr;
        max-width: none;
        padding-left: var(--size-l);
    }

    documentation-outline {
        position: static;
        max-height: none;
        border-left: 0;
        border-top: 1px solid var(--border-color);
        padding: var(--size-m) 0 0;
        margin-top: var(--size-m);
        font-size: var(--font-size-s);
    }

    documentation-outline > ul > li a[href] {
        font-weight: 300;
    }

    documentation-outline > ul > li {
        border-left-width: 0;
        border-bottom: 1px solid var(--border-color);
        padding: 0 0 var(--size-xs);
        margin-bottom: var(--size-xs);
    }

    documentation-outline > ul > li.active-scope {
        border-left-color: var(--color-transparent);
        border-bottom-color: var(--color-primary);
    }

    modal-backdrop {
        padding: var(--size-l);
    }

    modal-dialog {
        width: 100%;
        max-height: calc(100svh - (var(--size-l) * 2));
    }

    flyout-panel,
    flyout-panel.wide {
        width: 100%;
    }
}

/* <signals-panel> - A Datastar signals viewing panel  */

signals-panel {
    position: fixed;
    right: var(--size-s);
    bottom: calc(var(--size-footer) + var(--size-s));
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 40px;
    min-height: 40px;
    max-height: calc(
        100svh - var(--size-header) - var(--size-footer) - var(--size-m)
    );
    max-width: 50vw;
    background: var(--color-overlay);
    border-radius: var(--border-radius);
    z-index: 50;
    overflow: scroll;
}

signals-panel signals-view {
    order: 1;
    align-self: stretch;
    color: var(--text-subdued-color);
    font-family: var(--font-family-code);
    font-size: var(--font-size-s);
    margin: var(--size-s);
    line-height: 1.4;
    white-space: pre-wrap;
    tab-size: 2;
}

signals-panel signals-toggle {
    order: 2;
    position: relative;
}

signals-toggle > button {
    position: fixed;
    right: var(--size);
    bottom: calc(var(--size-footer) + var(--size));
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-small);
    border: 0;
    background: var(--color-transparent);
    color: var(--text-subdued-color);
    font: inherit;
    line-height: 1;
    min-width: 32px;
    min-height: 32px;
    cursor: pointer;
    padding: var(--size-xs);
}

signals-toggle > button:hover {
    color: var(--color-primary-shade);
}

icon-zap {
    display: inline-flex;
    width: 16px;
    height: 16px;
    color: currentColor;
    -webkit-mask-image: var(--icon-zap);
    mask-image: var(--icon-zap);
}

/*
    <table-records>
    A table with editable record rows
*/

table-records {
    overflow: scroll;
    padding: 0px;
}

table-records table {
    width: 100%;
    border-collapse: collapse;
}

table-records th {
    text-align: left;
    padding: 0 0 var(--size-s);
    padding-right: var(--size-m);
    border-bottom: 1px solid var(--border-color);
    border: none;
    background-color: var(--color-transparent);
}

table-records td {
    padding: var(--size-s) var(--size-xs);
    text-wrap-mode: nowrap;
    border: none;
}

table-records tbody tr + tr td {
    border-top: 1px solid
        color-mix(in srgb, var(--border-color) 55%, var(--color-transparent));
}

table-records form-input {
    margin-bottom: 0;
}

table-records td form-input {
    min-width: 11rem;
}

table-records td:nth-child(6) form-input {
    min-width: 15rem;
}

table-records td form-input > textarea {
    min-height: 0;
    height: auto;
}

table-records choice-row {
    margin-top: 0;
}

table-records tr form {
    display: flex;
    justify-content: flex-start;
    gap: var(--size-xs);
}

table-records td button {
    background: transparent;
    border-radius: var(--border-radius-small);
    min-width: var(--size);
    min-height: var(--size);
    border: none;
    color: var(--color-primary);
    cursor: pointer;
    padding: var(--size-xs);
}

table-records td button:hover {
    color: var(--color-primary-shade);
}

table-records td button:disabled {
    color: var(--text-subdued-color);
    cursor: not-allowed;
}

icon-pencil,
icon-file-added,
icon-undo,
icon-trash {
    display: inline-flex;
    width: 16px;
    height: 16px;
    color: currentColor;
}

icon-book {
    -webkit-mask-image: var(--icon-book);
    mask-image: var(--icon-book);
}

icon-pencil {
    -webkit-mask-image: var(--icon-pencil);
    mask-image: var(--icon-pencil);
}

icon-file-added {
    -webkit-mask-image: var(--icon-file-added);
    mask-image: var(--icon-file-added);
}

icon-undo {
    -webkit-mask-image: var(--icon-undo);
    mask-image: var(--icon-undo);
}

icon-trash {
    -webkit-mask-image: var(--icon-trash);
    mask-image: var(--icon-trash);
}

/* ESDiag compatibility layer for components absent from data-spectre. */

:root {
    --size-footer: 48px;
}

body {
    padding-bottom: var(--size-footer);
}

info-text {
    display: flex;
    color: var(--text-subdued-color);
    font-size: var(--font-size-s);
    padding: var(--size) 0 0;
}

.margin-after {
    margin: 0 0 var(--size) 0;
}

header-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--size-xxl);
}

header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--size-xxl);
    height: var(--size-xxl);
    border-radius: var(--border-radius-small);
}

header-icon .link {
    display: flex;
    align-items: inherit;
    justify-content: inherit;
    width: 100%;
    height: 100%;
}

header-icon:hover {
    background-color: var(--color-overlay);
}

header-nav {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

header-nav > a {
    color: var(--text-color);
    text-decoration: none;
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-s);
    padding: 0 var(--size-s);
}

header-nav > a:hover {
    color: var(--color-primary);
}

header-nav > a:active,
header-nav > a[aria-selected] {
    color: var(--color-primary);
}

body > header h1 {
    display: inline-block;
    margin: 0 var(--size-s);
    color: inherit;
    font-size: var(--font-size-m);
    font-weight: 200;
    border-right: 1px solid var(--border-color);
    padding-right: var(--size-m);
}

img#logo {
    display: inline-block;
    height: 26px;
    margin: var(--size-xs);
    vertical-align: middle;
}

content {
    display: block;
    max-width: 800px;
    margin: 0 auto;
    padding: var(--size-l) var(--size);
    background-color: var(--background-color);
    line-height: var(--font-size-xxl);
}

content.full-page {
    max-width: 100%;
    padding: var(--size-m) var(--size-m) var(--size-footer) var(--size-m);
    overflow: auto;
}

metadata-form {
    display: block;
    width: 40%;
    padding: var(--size-m);
    background-color: var(--background-color);
    border-left: 1px solid var(--border-color);
}

diagnostic-form {
    display: block;
    width: 60%;
    padding: var(--size-m);
    background-color: var(--background-color);
}

panel.no-padding {
    padding: 0;
}

.button,
button {
    padding: var(--size) var(--size-m);
    border: none;
    border-radius: var(--border-radius-small);
    background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
    color: var(--color-primary);
    cursor: pointer;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.button:hover,
button:hover {
    background-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.button:disabled,
button:disabled {
    background-color: color-mix(in srgb, var(--border-color) 45%, transparent);
    color: var(--text-subdued-color);
    cursor: not-allowed;
}

#job-feed {
    margin-top: var(--size);
}

.job-results {
    display: flex;
    flex-direction: column;
}

content:is(.job-content, .jobs-content) .status-box {
    max-width: none;
    margin: var(--size-s) 0;
}

@media (max-width: 1200px) {
    job-grid {
        grid-template-columns: 1fr;
    }

    card.job-card {
        min-height: 0;
        max-height: none;
    }

    card > card-body {
        overflow: visible;
    }

    content-layout.jobs-layout {
        grid-template-columns: 1fr;
        gap: var(--size-l);
    }

    .jobs-nav {
        width: auto;
        max-height: none;
        overflow: visible;
        padding-top: 0;
        padding-right: 0;
        border-right: 0;
    }
}

.status-box {
    max-width: 800px;
    margin: var(--size-s) auto;
    padding: var(--size-m);
    border-left: 4px solid transparent;
    border-radius: var(--border-radius);
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease,
        transform 0.2s ease;
}

.status-box a {
    color: inherit;
}

.loading {
    background-color: color-mix(in srgb, var(--border-color) 45%, transparent);
    color: var(--text-subdued-color);
    font-weight: 500;
}

.status-success {
    background-color: color-mix(in srgb, var(--color-success) 20%, transparent);
    color: var(--color-success);
}

.status-error {
    background-color: color-mix(in srgb, var(--color-danger) 22%, transparent);
    color: var(--color-danger);
}

.status-processing {
    background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
    color: var(--color-primary);
}

.status-info {
    background-color: color-mix(in srgb, var(--color-info) 20%, transparent);
    color: var(--color-info);
}

.spinner {
    position: relative;
    top: -1px;
    display: inline-block;
    width: var(--size-m);
    height: var(--size-m);
    margin-right: var(--size-s);
    border: 3px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
    border-top: 3px solid var(--color-primary);
    border-radius: 50%;
    vertical-align: middle;
    animation: spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.dropzone {
    position: relative;
    margin-bottom: var(--size-m);
    padding: var(--size-xxl);
    border: 2px dashed var(--dropzone-border-color, var(--border-color));
    border-radius: var(--border-radius);
    background-color: var(--background-color-dimmed);
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.drag-over {
    --dropzone-border-color: var(--color-primary);
    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.dropzone.active {
    --dropzone-border-color: var(--border-color-light);
    background-color: var(--background-color-primary);
    border-style: solid;
}

.upload-progress-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--size-xs);
    overflow: hidden;
    border-bottom-right-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.upload-progress-container.active {
    opacity: 1;
}

.upload-progress-bar {
    width: 0%;
    height: 100%;
    background-color: var(--color-primary);
    transition: width 0.3s ease;
}

.upload-progress-text {
    position: absolute;
    right: var(--size-s);
    bottom: var(--size-s);
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: 700;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.upload-progress-text.active {
    opacity: 1;
}

.file-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin: 0 auto var(--size-m);
    color: var(--text-subdued-color);
}

.file-icon > icon-upload,
.file-icon > icon-check {
    width: 40px;
    height: 40px;
}

.subdued {
    margin-top: var(--size);
    color: var(--text-subdued-color);
    font-size: var(--font-size-s);
}

.file-info {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--size-m);
    padding: var(--size-s) var(--size);
}

.file-name {
    overflow: auto;
    text-overflow: ellipsis;
    word-break: break-word;
}

.hidden {
    display: none;
}

tab-links {
    display: flex;
    margin-bottom: var(--size-xs);
    border-bottom: 1px solid var(--border-color);
}

.tab {
    position: relative;
    padding: var(--size) var(--size-m);
    border: none;
    background: none;
    color: var(--text-subdued-color);
    font-size: var(--font-size-m);
    font-weight: 500;
    cursor: pointer;
    transition: color 0.3s ease;
}

.tab:hover {
    color: var(--color-primary);
}

.tab.active {
    color: var(--color-primary);
}

.tab.active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 2px;
    background-color: var(--color-primary);
}

input-group {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--size-m);
}

.form-label {
    display: block;
    margin-bottom: var(--size-s);
    color: var(--text-color);
    font-size: var(--font-size-s);
    font-weight: 500;
}

.form-input {
    width: 85%;
    padding: var(--size-s) var(--size);
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius-small);
    background-color: var(--background-color);
    color: var(--text-color);
    font-size: var(--font-size-s);
}

.form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--focus-ring-color);
}

.form-input::placeholder {
    color: var(--form-placeholder-color);
    opacity: 1;
}

.form-input:disabled,
.form-input:read-only {
    background-color: var(--background-color-dimmed);
    color: var(--text-subdued-color);
    cursor: not-allowed;
}

.curl-textarea {
    width: 85%;
    min-height: 80px;
    padding: var(--size);
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius-small);
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: var(--font-family-code);
    font-size: var(--font-size-s);
    resize: vertical;
}

.curl-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--focus-ring-color);
}

.curl-textarea.error {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 1px var(--color-danger);
}

.curl-textarea::placeholder {
    color: var(--form-placeholder-color);
    opacity: 1;
}

text-link {
    display: flex;
    padding: var(--size-xs) 0;
    color: var(--color-primary);
    font-size: var(--font-size-s);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

popup-menu {
    position: absolute;
    top: 95%;
    right: 0;
    z-index: 1000;
    display: none;
    min-width: 180px;
    padding: var(--size-xs);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-small);
    background: var(--background-color);
    box-shadow: var(--shadow-medium);
}

popup-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--size-xs);
    padding: var(--size-s);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
    font-size: var(--font-size-s);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

popup-menu-item {
    display: flex;
    align-items: center;
    gap: var(--size-s);
    padding: var(--size-s);
    color: var(--text-color);
    font-size: var(--font-size-s);
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
}

popup-menu-item:hover {
    background-color: var(--background-color-dimmed);
    border-radius: var(--border-radius-small);
}

popup-menu-item a {
    display: flex;
    width: 100%;
    color: var(--text-color);
    font-size: var(--font-size-s);
    font-weight: 400;
    text-decoration: none;
}

.icon {
    width: 16px;
    height: 16px;
    color: inherit;
}

icon-check,
icon-x,
icon-lock,
icon-key,
icon-file,
icon-upload {
    display: flex;
    flex: 0 0 auto;
}

#kibana,
#user-circle {
    position: relative;
}

#kibana:hover popup-menu,
#user-circle:hover popup-menu {
    display: block;
}

github-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 0;
}

github-icon a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--size-xxs);
    border-radius: var(--border-radius-small);
    color: inherit;
}

github-icon svg {
    display: block;
    width: var(--size-l);
    height: var(--size-l);
}

user-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: 450;
    cursor: pointer;
}

#user-circle {
    position: relative;
}

#user-circle:hover popup-menu {
    display: block;
}

.debug-signals {
    color: var(--text-subdued-color);
    position: absolute;
    right: var(--size-s);
    top: 48px;
    width: 20%;
    overflow: scroll;
}

body > footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--background-color-dimmed);
    backdrop-filter: blur(4px);
    font-family: var(--font-family-code);
    font-size: var(--font-size-s);
    color: var(--text-subdued-color);
    border-top: 1px solid var(--border-color);
    padding: var(--size-xs) var(--size);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    z-index: 100;
}

html:has(#dark-mode:checked) header,
html:has(#dark-mode:checked) body > footer {
    background-color: var(--background-color-dimmed);
}

html:has(#dark-mode:checked) .form-input,
html:has(#dark-mode:checked) .curl-textarea {
    background-color: var(--background-color-dimmed);
}

.counter {
    display: inline-block;
    width: 8em;
}

footer-left,
footer-center,
footer-right {
    flex: 1 1 0;
}

body > footer {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    max-height: var(--size-footer);
    padding: var(--size-xs) var(--size);
    border-top: 1px solid var(--border-color);
    background-color: var(--background-color-dimmed);
    backdrop-filter: blur(4px);
    color: var(--text-subdued-color);
    font-family: var(--font-family-code);
    font-size: var(--font-size-s);
}

footer-left {
    text-align: left;
}

footer-center {
    text-align: center;
}

footer-right {
    text-align: right;
}

.theme-toggle-button {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0;
}

.theme-toggle-button:focus-visible {
    outline: 2px solid
        color-mix(in srgb, var(--focus-ring-color) 60%, transparent);
    outline-offset: 2px;
    border-radius: var(--border-radius-small);
}

.version {
    color: inherit;
    text-decoration: none;
}

.version:hover {
    text-decoration: underline;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(0 0 0 / 0.4);
}

.modal-content {
    background-color: var(--background-color);
    padding: 24px;
    border-radius: 8px;
    width: 80%;
    max-width: 500px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    position: relative;
    width: min(80%, 500px);
    padding: 24px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--background-color);
    box-shadow: var(--shadow-medium);
}

.modal-content h2 {
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--text-color);
}

.modal-content h2 span {
    display: inline-flex;
    margin-left: var(--size-xs);
    vertical-align: middle;
}

.close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--size-xs);
    border: none;
    background: none;
    color: var(--text-subdued-color);
    cursor: pointer;
}

.close-button:hover,
.close-button:focus {
    color: var(--text-color);
    text-decoration: none;
}

.close-button > icon-x {
    width: 20px;
    height: 20px;
}

.secret-value-column {
    min-width: 62rem;
}

.secret-id-column .form-input,
.secret-type-column .form-input,
.secret-value-column .form-input {
    width: 100%;
}

#secrets-table th:last-child,
#secrets-table td:last-child {
    width: 5.5rem;
}

.secret-edit-fields,
.secret-basic-fields {
    width: 100%;
    min-width: 0;
}

.secret-basic-fields .form-input {
    width: 50%;
    max-width: 50%;
}

.secret-edit-fields > .form-input + .secret-basic-fields,
.secret-basic-fields > .form-input + .form-input {
    margin-top: var(--size-s);
}

#hosts-table .host-product-column {
    min-width: 12rem;
}

#hosts-table .host-product-column form-input,
#hosts-table td form-input {
    display: block;
    min-width: inherit;
}

#clusters-table .cluster-secret-column {
    min-width: 10rem;
}

#clusters-table .cluster-url-column {
    min-width: 20rem;
}

#clusters-table .cluster-secret-column form-input,
#clusters-table .cluster-url-column form-input {
    display: block;
    min-width: inherit;
}

.certificate-status-insecure {
    color: var(--color-danger);
}

.secret-confirm-actions {
    display: flex;
    gap: var(--size-s);
    margin-top: var(--size-l);
}

.row {
    flex-direction: row;
}