:root {
    color-scheme: dark;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #010503;
}

#viewer {
    position: relative;
    container-type: size;
    width: 100%;
    height: 100%;
}

#viewer canvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
}

.test-access {
    display: grid;
    place-items: safe center;
    height: 100%;
    padding: 24px;
    overflow: auto;
    color: #c6ffde;
}

.test-access__form {
    width: min(100%, 340px);
    padding: 24px;
    border: 1px solid rgba(143, 255, 197, .4);
    border-radius: 16px;
    background: #071b12;
}

.test-access__form h1 { margin: 0 0 12px; color: #8fffc5; text-align: center; }
.test-access__form p { font-size: 14px; line-height: 1.5; }
.test-access__form label { display: block; margin: 24px 0 8px; }

.test-access__form input,
.test-access__form button {
    width: 100%;
    min-height: 48px;
    border: 1px solid rgba(143, 255, 197, .5);
    border-radius: 8px;
    color: inherit;
    font: inherit;
    font-size: 18px;
}

.test-access__form input { background: #010503; padding: 10px; text-align: center; letter-spacing: .5em; font-size: 24px; caret-color: transparent; }
.test-access__form input::placeholder { color: #76a38a; opacity: 1; letter-spacing: .15em; }
.test-access__form input[aria-invalid="true"] { border-color: #ffb4b4; }
.test-access__form button { background: #165535; cursor: pointer; touch-action: manipulation; }
.test-access__keypad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.test-access__keypad button { min-height: 64px; border-radius: 50%; font-size: 28px; user-select: none; -webkit-user-select: none; }
.test-access__keypad .test-access__action { background: transparent; border-color: transparent; font-size: 18px; }
.test-access__keypad button:active { background: #28794e; transform: scale(.95); }
.test-access__form :focus-visible { outline: 2px solid #8fffc5; outline-offset: 3px; }
.test-access__form .test-access__error { min-height: 21px; color: #ffb4b4; }

.mobile-controls {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.mobile-controls[hidden] { display: none; }

.mobile-controls__stick {
    position: absolute;
    width: 112px;
    height: 112px;
    bottom: max(36px, env(safe-area-inset-bottom));
    border: 2px solid rgba(143, 255, 197, .4);
    border-radius: 50%;
    background: rgba(1, 10, 6, .2);
    opacity: .55;
}

.mobile-controls__stick--left { left: max(24px, env(safe-area-inset-left)); }
.mobile-controls__stick--right { right: max(24px, env(safe-area-inset-right)); }
.mobile-controls__stick.is-active { opacity: 1; }

.mobile-controls__thumb {
    position: absolute;
    width: 40px;
    height: 40px;
    left: 34px;
    top: 34px;
    border-radius: 50%;
    border: 1px solid rgba(143, 255, 197, .7);
    background: rgba(143, 255, 197, .25);
}

.mobile-controls__label {
    position: absolute;
    top: 116px;
    left: -10px;
    width: 128px;
    text-align: center;
    color: #c6ffde;
    font-size: 11px;
}

.mobile-controls__stick.is-active .mobile-controls__label { display: none; }

.mobile-controls__actions {
    position: absolute;
    bottom: calc(12px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: repeat(8, minmax(44px, 1fr));
    gap: 6px;
    width: min(520px, calc(100% - 32px - env(safe-area-inset-left) - env(safe-area-inset-right)));
}

@media (max-width: 600px) {
    .mobile-controls__actions {
        grid-template-columns: repeat(4, minmax(44px, 1fr));
        width: min(280px, calc(100% - 32px));
    }

    /* Resting hints sit above the two bottom rows; active sticks still follow the thumbs. */
    .mobile-controls__stick { bottom: calc(112px + env(safe-area-inset-bottom)); }
}

.mobile-controls__actions button {
    min-height: 44px;
    border: 1px solid rgba(143, 255, 197, .45);
    border-radius: 12px;
    background: rgba(1, 10, 6, .65);
    color: #c6ffde;
    font: inherit;
    font-size: 12px;
    touch-action: none;
    pointer-events: auto;
}

.mobile-controls__actions button.is-held { background: rgba(0, 255, 136, .4); }
.mobile-controls__actions button:focus-visible { outline: 2px solid #8fffc5; }

/* Keep existing page controls clear of the thumb areas. */
.has-mobile-controls .vehicle-audio {
    top: max(12px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
    bottom: auto;
}

.has-mobile-controls .devmode-view {
    top: max(var(--devmode-inset), env(safe-area-inset-top));
    bottom: auto;
}

.vehicle-audio {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .65rem;
    border: 1px solid rgba(143, 255, 197, .3);
    border-radius: .35rem;
    background: rgba(1, 10, 6, .82);
    color: #8fffc5;
}

.vehicle-audio button {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-size: .75rem;
}

.vehicle-audio input { width: 5rem; accent-color: #8fffc5; }
.vehicle-audio :focus-visible { outline: 2px solid #8fffc5; outline-offset: 3px; }

.devmode-view summary {
    cursor: pointer;
    list-style: none;
}

.devmode-view summary::-webkit-details-marker {
    display: none;
}

.devmode-view summary::after {
    content: " −";
}

.devmode-view:not([open]) > summary::after,
.devmode-view details:not([open]) > summary::after {
    content: " +";
}

.devmode-view {
    --devmode-inset: clamp(0.75rem, 2cqw, 2rem);
    position: absolute;
    top: var(--devmode-inset);
    right: var(--devmode-inset);
    z-index: 2;
    width: min(clamp(25rem, 34cqw, 46rem), calc(100% - 2 * var(--devmode-inset)));
    max-height: calc(100% - 2 * var(--devmode-inset));
    overflow: auto;
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(0, 255, 136, 0.5);
    background: rgba(1, 10, 6, 0.82);
    box-shadow: 0 0 1.25rem rgba(0, 255, 136, 0.08);
    color: #8fffc5;
    font-family: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
    font-size: 0.72rem;
    line-height: 1.45;
    pointer-events: auto;
}

.devmode-view__body {
    display: flex;
    flex-direction: column;
}

.devmode-view__body > * {
    flex: none;
}

/* Everything keeps its natural height except the Log, which takes the space left in a
   canvas-high panel. With the Log collapsed the panel shrinks to fit its content.
   Percentages do not resolve through the <details> content slot, so size from the canvas
   container: insets, panel padding and border, and the title line. */
.devmode-view[open]:has(> .devmode-view__body > .devmode-view__log-section[open]) > .devmode-view__body {
    height: calc(100cqh - 2 * var(--devmode-inset) - 3.15rem - 2px);
}

.devmode-view__section {
    margin-top: 0.65rem;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(0, 255, 136, 0.2);
}

/* All collapsible headers inside the panel share the dimmed label colour. */
.devmode-view__body details > summary {
    color: #4e9671;
}

.devmode-view__section > summary {
    margin-bottom: 0.35rem;
}

.devmode-view__body > .devmode-view__log-section[open] {
    position: relative;
    flex: 1 1 0;
    min-height: 7rem;
}

.devmode-view:not([open]) {
    width: auto;
    padding: 0.35rem 0.55rem;
}

.devmode-view__title {
    margin: 0 0 0.55rem;
    color: #8fffc5;
    font-size: 0.68rem;
    line-height: 1rem;
    font-weight: 400;
}

.devmode-view__title-label {
    color: #39ff14;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.devmode-view:not([open]) .devmode-view__title {
    margin: 0;
}

.devmode-view[open] > .devmode-view__title > .devmode-view__compact-stats {
    display: none;
}

.devmode-view__values {
    margin: 0;
}

.devmode-view__values div {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 0.5rem;
}

.devmode-view__values dt {
    color: #4e9671;
}

.devmode-view__values dd {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.devmode-view__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.65rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(0, 255, 136, 0.2);
}

.devmode-view__actions button {
    padding: 0.35rem 0.55rem;
    border: 1px solid rgba(0, 255, 136, 0.5);
    border-radius: 0.2rem;
    background: rgba(0, 255, 136, 0.08);
    color: #8fffc5;
    font: inherit;
    cursor: pointer;
}

.devmode-view__actions button:hover:not(:disabled) {
    background: rgba(0, 255, 136, 0.18);
}

/* The running quality profile. */
.devmode-view__actions button[aria-pressed="true"] {
    background: rgba(0, 255, 136, 0.32);
    color: #e6fff1;
}

.devmode-view__actions button:disabled {
    cursor: wait;
    opacity: 0.55;
}

.devmode-view__messages {
    /* Fills the open Log section below its summary line and scrolls. */
    position: absolute;
    inset: calc(0.9rem + 1.45em) 0 0;
    margin: 0;
    padding: 0;
    overflow: auto;
    overflow-wrap: anywhere;
    color: #67bc8e;
    list-style: none;
}

.devmode-view__settings {
    margin-top: 0.65rem;
}

.devmode-view__settings label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
}

.devmode-view__settings input {
    accent-color: #00ff88;
}

.devmode-view__values .devmode-view__position {
    white-space: pre;
    overflow-x: auto;
}

.devmode-view__wheel {
    margin-top: 0.65rem;
    border-top: 1px solid rgba(0, 255, 136, 0.2);
    padding-top: 0.45rem;
}

.devmode-view__wheel-fields {
    display: grid;
    gap: 0.35rem;
    margin-top: 0.45rem;
}

.devmode-view__wheel-fields[hidden] {
    display: none;
}

.devmode-view__wheel-fields label {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 0.5rem;
}

.devmode-view__wheel-fields input[type="number"],
.devmode-view__wheel-fields select {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(0, 255, 136, 0.4);
    border-radius: 0.2rem;
    background: #071b12;
    color: #8fffc5;
    padding: 0.2rem;
    font: inherit;
}

.devmode-view__wheel-readings {
    margin: 0.35rem 0;
    color: #67bc8e;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.devmode-view__zones {
    /* As tall as its rows; only scrolls sideways when the table is wider than the panel. */
    margin: 0;
    padding: 0;
    overflow-x: auto;
    overflow-wrap: anywhere;
}

.devmode-view__zones table {
    width: 100%;
    min-width: 27rem;
    border-collapse: separate;
    border-spacing: 0;
    font: inherit;
    text-align: left;
}

.devmode-view__zones th,
.devmode-view__zones td {
    padding: 0.15rem 0.3rem;
    vertical-align: top;
}

.devmode-view__zones th {
    position: sticky;
    top: 0;
    background: #071b12;
    color: #67bc8e;
    white-space: nowrap;
}

.devmode-view__zones td:not(:first-child) {
    white-space: nowrap;
}

.devmode-view__zone-name {
    color: #8fffc5;
}

.devmode-view__controls {
    margin-top: 0.65rem;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(0, 255, 136, 0.2);
}

.devmode-view__controls p {
    margin: 0.35rem 0 0;
    color: #67bc8e;
}

.devmode-view__messages li::before {
    content: "> ";
    color: #00ff88;
}

@media (max-width: 540px) {
    .devmode-view {
        top: auto;
        right: var(--devmode-inset);
        bottom: var(--devmode-inset);
        left: var(--devmode-inset);
        width: auto;
    }

    .devmode-view:not([open]) {
        left: auto;
    }

}