body {
    --reset-button-width: 8rem;
    --header-actions-gap: 0.5rem;
    max-width: 64rem;
    margin: 0 auto;
    padding: 0.75rem;
    background: var(--background);
    color: var(--text-color);
    font: 0.9rem/1.25 system-ui, sans-serif;
}

.app-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

/* Both rows span exactly two reset buttons and their gap. */
.header-actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: stretch;
    justify-self: end;
    width: calc(2 * var(--reset-button-width) + var(--header-actions-gap));
    gap: var(--header-actions-gap);
}

.app-header .header-actions > .arcane-button {
    min-width: 0;
    padding-inline: 0.25rem;
    white-space: nowrap;
}

.app-header h1 {
    margin: 0;
    overflow-wrap: anywhere;
}

.section-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.section-header h2 {
    margin: 0;
}

.section-header > .arcane-button {
    justify-self: end;
    white-space: nowrap;
}

#reset-all,
#reset-system,
#reset-channel {
    width: var(--reset-button-width);
    white-space: nowrap;
}

/* Equal side columns keep the channel list centered on the page. */
.channels-header {
    grid-template-columns: minmax(8rem, 1fr) minmax(0, auto) minmax(8rem, 1fr);
}

/* System timer on the left, trigger on the right */
.system-layout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 1rem;
}

/* Allow fieldsets to fit within their grid columns */
.system-layout > fieldset {
    min-width: 0;
    margin: 0;
}

/* Both groups contain their own grid */
.system-timer-grid,
.system-trigger-grid {
    display: grid;
    gap: 0.5rem;
}

/* Six controls: three columns, two rows */
.system-timer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.period-controls,
.delay-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.period-controls > input,
.period-controls > select,
.delay-controls > input,
.delay-controls > select {
    min-width: 0;
}

/* Four controls: two columns, two rows */
.system-trigger-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#channels {
    margin-top: 0.75rem;
}

/* Horizontal channel selector */
.channel-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    min-width: 0;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.channel-button {
    white-space: nowrap;
}

/* Selected channel */
.channel-button[aria-pressed="true"] {
    background: #d4af37;
    border-color: #d4af37;
    color: #171300;
    font-weight: 700;
}

#channel-editor {
    min-width: 0;
    margin: 0;
}

.channel-controls {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
}

.channel-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 1px;
    padding: 0 1px;
    margin-bottom: 0.5rem;
}

.channel-mode > .arcane-field {
    grid-column: 2;
}

/* Two state/delay pairs per row, separated by grid lines */
.channel-sequence {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    padding: 1px;
    background: var(--border-color, #888);
}

/* Match Mode to the right-hand delay group. */
.state-delay-pair,
.channel-mode {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    min-width: 0;
    padding: 0.5rem;
}

.state-delay-pair {
    background: var(--background, #fff);
}

.channel-mode {
    padding-block: 0;
}

#channel-editor input:not([type="checkbox"]),
#channel-editor select {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

#system-enable,
#channel-editor input[type="checkbox"] {
    width: auto;
    justify-self: start;
}

#scpi-terminal {
    display: block;
    height: 20rem;
}

/* Keep each state beside its delay on smaller screens */
@media (max-width: 40rem) {
    .app-header,
    .section-header:not(.channels-header) {
        grid-template-columns: minmax(0, 1fr);
    }

    .channels-header {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .channels-header > .channel-list {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .channels-header > .arcane-button {
        grid-column: 2;
        grid-row: 1;
    }

    .channel-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .channel-options {
        gap: 0.5rem;
        padding-inline: calc(0.5rem + 1px);
    }

    .channel-mode {
        display: block;
        padding: 0;
    }

    .channel-sequence {
        grid-template-columns: minmax(0, 1fr);
    }
}