/* Gyroscope and accelerometer tests (GyroscopeTest.ejs, AccelerometerTest.ejs). The
   component is a size container: text scales with the tile's width, and the chart and
   extra readings drop out of short tiles. */
.motion-test-component {
    --motion-accent: #2f80c9;
    --motion-text: #1a202c;
    --motion-muted: #4a5568;
    --motion-x: #d64545;
    --motion-y: #2f9e44;
    --motion-z: #2f80c9;
    container: motion / size;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    background: var(--container-bg, #f8f9fa);
    border: 1px solid var(--container-border, #dee2e6);
    border-radius: 8px;
    overflow: hidden;
}

.motion-body {
    height: 100%;
    box-sizing: border-box;
    padding: clamp(8px, 3cqw, 18px);
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 2cqh, 12px);
    font-size: clamp(12px, 4cqw, 16px);
    line-height: 1.35;
    color: var(--motion-text);
}

/* One state at a time: an element lists the states it shows in. */
.motion-test-component[data-state="idle"] [data-show]:not([data-show~="idle"]),
.motion-test-component[data-state="live"] [data-show]:not([data-show~="live"]) {
    display: none;
}

.motion-title {
    margin: 0;
    font-size: 1.2em;
    font-weight: 700;
    line-height: 1.2;
    color: #2c3e50;
    text-align: center;
    padding: 0 26px; /* room for the help badge on the home page */
}

.motion-intro {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.motion-intro p {
    margin: 0 0 0.6em;
}

.motion-note {
    color: var(--motion-muted);
    font-size: 0.88em;
}

.motion-live {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6em;
}

/* Visual (3D phone or bubble level) beside the three axis readings. */
.motion-top {
    display: flex;
    align-items: center;
    gap: 0.9em;
}

.motion-visual {
    flex: 0 0 auto;
    width: clamp(64px, min(28cqw, 24cqh), 170px);
    aspect-ratio: 1;
    position: relative;
}

.motion-axes {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35em;
}

.motion-axis {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    column-gap: 0.5em;
}

.motion-axis-label {
    font-size: 0.82em;
    color: var(--motion-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.motion-axis-label b {
    font-weight: 800;
}

.motion-axis[data-axis="x"] .motion-axis-label b { color: var(--motion-x); }
.motion-axis[data-axis="y"] .motion-axis-label b { color: var(--motion-y); }
.motion-axis[data-axis="z"] .motion-axis-label b { color: var(--motion-z); }

.motion-axis-value {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Centered bar: grows left for negative values, right for positive. */
.motion-bar {
    grid-column: 1 / -1;
    position: relative;
    height: 6px;
    border-radius: 999px;
    background: #dbe3ec;
    overflow: hidden;
}

.motion-bar::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: rgba(44, 62, 80, 0.35);
}

.motion-bar-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 0;
}

.motion-axis[data-axis="x"] .motion-bar-fill { background: var(--motion-x); }
.motion-axis[data-axis="y"] .motion-bar-fill { background: var(--motion-y); }
.motion-axis[data-axis="z"] .motion-bar-fill { background: var(--motion-z); }

.motion-headline {
    font-size: clamp(16px, 6cqw, 28px);
    font-weight: 800;
    color: var(--motion-accent);
    font-variant-numeric: tabular-nums;
}

.motion-chart {
    flex: 1;
    min-height: 90px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.45em 0.6em;
}

.motion-chart-title {
    font-size: 0.82em;
    font-weight: 700;
}

.motion-chart-title span {
    font-weight: 400;
    color: var(--motion-muted);
}

.motion-chart canvas {
    flex: 1;
    min-height: 0;
    width: 100%;
    display: block;
}

.motion-stats {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5em, 1fr));
    gap: 0.3em 0.8em;
}

.motion-stats div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.motion-stats dt {
    color: var(--motion-muted);
    font-size: 0.78em;
}

.motion-stats dd {
    margin: 0;
    font-weight: 700;
    font-size: 0.9em;
    font-variant-numeric: tabular-nums;
}

.motion-message {
    margin: 0;
    padding: 0.5em 0.7em;
    border-radius: 6px;
    background: #fee2e2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: 0.9em;
    text-align: center;
}

.motion-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5em;
}

.motion-btn {
    min-height: 36px;
    padding: 0.4em 0.9em;
    border: 1px solid #c3ccd6;
    border-radius: 6px;
    background: #ffffff;
    color: var(--motion-text);
    font: inherit;
    font-size: 0.9em;
    font-weight: 700;
    cursor: pointer;
}

.motion-btn-primary {
    background: var(--motion-accent);
    border-color: var(--motion-accent);
    color: #ffffff;
}

.motion-test-component[data-state="idle"] .motion-btn-primary {
    min-width: 60%;
    font-size: 1em;
}

/* --- Gyroscope: a phone that tilts and turns with the device (tap to re-centre) --- */
.gyro-visual {
    cursor: pointer;
}

.gyro-scene {
    position: absolute;
    inset: 0;
    perspective: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gyro-phone {
    width: 46%;
    height: 82%;
    border-radius: 12% / 7%;
    background: linear-gradient(160deg, #3d5166, #1f2d3d);
    border: 2px solid #11181f;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    transform-style: preserve-3d;
    /* No transition: tweening between readings can take the long way round and spin. */
}

.gyro-phone span {
    margin-top: 10%;
    font: 700 9px Arial, sans-serif;
    color: #9fb3c8;
    letter-spacing: 0.05em;
}

/* --- Accelerometer: a bubble level --- */
.level {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, #f4fbe9 0%, #d8edbf 70%, #bcd99a 100%);
    border: 2px solid #8fb36a;
    box-sizing: border-box;
}

.level::before,
.level::after {
    content: '';
    position: absolute;
    border: 1px solid rgba(60, 90, 40, 0.45);
    border-radius: 50%;
}

/* Target rings: inner = within 1 degree, outer = within 5 degrees. */
.level::before { inset: 43%; }
.level::after { inset: 30%; }

.level-bubble {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18%;
    height: 18%;
    margin: -9% 0 0 -9%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffffff, #c9e6a8);
    border: 1px solid #7aa356;
    transition: transform 0.08s linear;
}

.level-on .level {
    border-color: #2f9e44;
}

/* Short tiles: keep the visual and the three readings; drop the rest. */
@container motion (max-height: 400px) {
    .motion-chart {
        display: none !important;
    }
}

@container motion (max-height: 320px) {
    .motion-stats div:nth-child(n + 3),
    .motion-note {
        display: none;
    }

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

@media (prefers-reduced-motion: reduce) {
    .level-bubble {
        transition: none;
    }
}