:root {
    --radius-base: 4px;
    --color-white: #fff;
    --color-black: #000;
    --color-orange: #ef7800;
    --color-orange-light: #f29333;
    --color-graphite: #6a6b6d;
    --color-graphite-dark: #858689;
    --color-surface: #f0f2f7;
    --color-success-bg: #edf9f0;
    --color-success-text: #1d5f2a;
    --color-success-border: #1f9937;
    --color-warning-bg: #fff7ef;
    --color-warning-text: #5a2c00;
    --color-warning-border: #ef7800;
    --color-error-bg: #fff1f1;
    --color-error-text: #7a1d1d;
    --color-error-border: #c63131;
    --color-yellow-bg: #fff5d0;
    --color-yellow-text: #b38705;
    --color-yellow-dot: #ffc107;
    --color-green-bg: #d7f3e6;
    --color-green-text: #1f9937;
    --color-green-dot: #29ca4a;
    --color-red-bg: #fedfdf;
    --color-red-text: #c63131;
    --color-red-dot: #c63131;
    --color-gray-bg: #f0f2f7;
    --color-gray-text: #6a6b6d;
    --color-gray-dot: #858689;
    --color-focus: #ef7800;
    --color-button-text: #fff;
    --color-button-muted: #919296;
    --color-card-border: #6a6b6d;
    --color-card-bg: #fff;
}


*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif, "Segoe UI Emoji";
}

body {
    background: var(--color-white);
    color: var(--color-black);
    padding: 2rem;
    line-height: 1.6;
}

img {
    max-width: 100%;
}


header, section, footer {
    margin: 4rem 0;
}

.wrapper {
    max-width: 65ch;
}

.subline {
    margin: 0.5rem 0;
    text-wrap: balance;
    font-size: 1.3rem;
}



input[type="text"],
input[type="number"],
select,
button {
    font: inherit;
    font-size: 1rem;
}

.button,
button {
    margin: 0;
    padding: 1em 1.5em;
    border-radius: var(--radius-base);
    border: none;
    font-weight: 400;
    cursor: pointer;
    color: var(--color-button-text);
    background: var(--color-button-muted);
    text-align: center;
    text-decoration: none;
}

.button.primary,
button.primary {
    --primary-button-gradient: linear-gradient(90deg, var(--color-orange) .21%, var(--color-orange-light) 99.81%);
    --tw-border-opacity: 1;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    background-image: var(--primary-button-gradient);
}


input[type="text"],
input[type="number"],
select {
    width: 100%;
    min-height: 2.5em;
    height: 2.5em;
    padding: 0.5em 0.75em;
    background: var(--color-white);
    color: var(--color-black);
    border: var(--color-graphite) solid 1px;
    border-radius: var(--radius-base);
    line-height: 1.25;
    vertical-align: middle;
}

select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.5em;
    background-image: url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20' fill='none'><path d='M5 7l5 5 5-5' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.75em center;
    background-size: 0.75em;
}

input:focus,
input:active,
select:focus,
select:active,
button:focus,
button:active,
.button:focus,
.button:active,
a:focus,
a:active {
    outline: 4px solid var(--color-focus);
    outline-offset: 3px;
}

input[type="text"]:focus,
input[type="text"]:active,
select:focus,
select:active {
    border: transparent solid 1px;
}

.button:focus,
.button:hover,
.button:active,
button:focus,
button:hover,
button:active {
    filter: brightness(115%);
}

.block {
    display: block;
    width: 100%;
}



.download-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

.download-card {
    padding: 1rem;
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-base);
    background: var(--color-card-bg);
}

.download-card h3 {
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.download-card-links {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}


.wm-logo-image {
    margin: 0;
    background: white;
    max-width: 150px;
    aspect-ratio: 213/28;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-size: 1em;
    padding: 0.25em 0.7em;
    border-radius: 999px;
}

.status-box {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4em;
    font-size: 1em;
    padding: 0.25em 0.7em;
    border-radius: 4px;
    width: 100%;
    overflow: hidden;
}

.status-main {
    display: flex;
    align-items: start;
    justify-items: center;
    flex-direction: column;
    gap: 0.4em;
    width: 100%;
}

.status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.4em;
    width: 100%;
}

.row {
    display: flex;
    justify-items: start;
    align-items: center;
    gap: 0.4em;
    width: 100%;
}

.status-header {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 2em;
}

.status-left,
.status-right {
    display: flex;
    align-items: center;
    gap: 0.4em;
}

.status-right {
    margin-left: auto;
    justify-content: flex-end;
}

.status-label {
    font-weight: 400;
    flex: 1 1 auto;
}

.status-webber {
    display: block;
    font-size: 0.8em;
    line-height: 1.2;
}

.status-value {
    font-weight: 700;
}

.status-error {
    display: block;
    width: 100%;
    margin-top: 0.25em;
    text-align: right;
    font-size: 0.8em;
    line-height: 1.2;
}

.badge.green,
.status-box.green {
    background: var(--color-green-bg);
    color: var(--color-green-text);
}

.badge.yellow,
.status-box.yellow {
    background: var(--color-yellow-bg);
    color: var(--color-yellow-text);
}

.badge.red,
.status-box.red {
    background: var(--color-red-bg);
    color: var(--color-red-text);
}

.badge.gray,
.status-box.gray {
    background: var(--color-gray-bg);
    color: var(--color-gray-text);
}

.dot {
    display: inline-block;
    flex-shrink: 0;
    align-self: center;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.dot.green {
    background: var(--color-green-dot);
    box-shadow: 0 0 6px var(--color-green-dot);
}

.dot.yellow {
    background: var(--color-yellow-dot);
    box-shadow: 0 0 6px var(--color-yellow-dot);
}

.dot.red {
    background: var(--color-red-dot);
    box-shadow: 0 0 6px var(--color-red-dot);
}

.dot.gray {
    background: var(--color-gray-dot);
    box-shadow: 0 0 6px var(--color-gray-dot);
}


.my {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.mt {
    margin-top: 1rem;
}

.mb {
    margin-bottom: 1rem;
}

.my-half {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
}


#presentation-select, #presentation-select * {
    font-family: monospace;
    font-size: .85rem;
}

#alert-list {
    display: flex;
    flex-direction: column;
}

#job-status-list {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    align-items: stretch;
    flex-wrap: nowrap;
    width: max-content;
    max-width: 100%;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

#device-status-list {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    align-items: stretch;
    flex-wrap: nowrap;
    width: max-content;
    max-width: 100%;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

#job-status-list .status-box,
#device-status-list .status-box {
    display: flex;
    width: 100%;
}


.response-box {
    display: none;
    background: var(--color-warning-bg);
    border: none;
    border-radius: var(--radius-base);
    padding: 0.5em;
    color: var(--color-warning-text);
}

.response-box[data-kind="error"] {
    background: var(--color-error-bg);
    border: none;
    color: var(--color-error-text);
}

.response-box[data-kind="success"] {
    background: var(--color-success-bg);
    border: none;
    color: var(--color-success-text);
}

.response-box.show {
    display: block;
}

.response-box .response-content {
    white-space: normal;
    word-break: break-word;
}