/* CPU and GPU stress tests (views/partials/stress-test-ui.ejs). The component is a size
   container: text scales with the tile's width, and the chart is left out when the tile
   is too short to show it legibly. */
.stress-test-component {
    --stress-accent: #2f80c9;
    --stress-text: #1a202c;
    --stress-muted: #4a5568;
    container: stress / 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;
}

.stress-body {
    height: 100%;
    box-sizing: border-box;
    padding: clamp(8px, 3cqw, 18px);
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 2.2cqh, 14px);
    font-size: clamp(13px, 4.4cqw, 17px);
    line-height: 1.35;
    color: var(--stress-text);
}

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

.stress-header h3 {
    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 */
}

.stress-device {
    margin: 0.2em 0 0;
    text-align: center;
    color: var(--stress-muted);
    font-size: 0.9em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stress-device-label {
    font-weight: 700;
}

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

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

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

.stress-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.stress-score {
    font-size: clamp(30px, 14cqw, 64px);
    font-weight: 800;
    line-height: 1;
    color: var(--stress-accent);
    font-variant-numeric: tabular-nums;
}

.stress-score-caption {
    margin-top: 0.25em;
    color: var(--stress-muted);
    font-size: 0.92em;
}

.stress-progress-track {
    height: 8px;
    border-radius: 999px;
    background: #dbe3ec;
    overflow: hidden;
}

.stress-progress-fill {
    height: 100%;
    width: 0;
    background: var(--stress-accent);
    border-radius: inherit;
    transition: width 0.1s linear;
}

.stress-continuous .stress-progress-track {
    display: none;
}

.stress-status {
    display: block;
    margin-top: 0.35em;
    text-align: center;
    color: var(--stress-muted);
    font-size: 0.92em;
}

.stress-compare-scale {
    position: relative;
    padding-top: 10px;
}

.stress-compare-tiers {
    display: flex;
    gap: 2px;
    font-size: 0.72em;
    font-weight: 700;
    text-align: center;
}

.stress-compare-tiers span {
    flex: 1;
    min-width: 0;
    padding: 3px 2px;
    background: #dbe3ec;
    color: var(--stress-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stress-compare-tiers span:first-child { border-radius: 6px 0 0 6px; }
.stress-compare-tiers span:last-child { border-radius: 0 6px 6px 0; }

.stress-compare-tiers .stress-tier-current {
    background: var(--stress-accent);
    color: #ffffff;
}

/* Downward triangle above the bar marking where the score lands. */
.stress-compare-marker {
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
    margin-left: -6px;
    border: 6px solid transparent;
    border-top: 8px solid var(--stress-text);
    border-bottom: 0;
}

.stress-compare-text {
    margin: 0.4em 0 0;
    text-align: center;
    font-size: 0.85em;
    color: var(--stress-muted);
}

.stress-chart {
    flex: 1;
    min-height: 110px; /* shorter than this it's unreadable; the container queries below drop it instead */
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.5em 0.7em;
}

.stress-chart-title {
    font-weight: 700;
    font-size: 0.9em;
}

.stress-chart-unit {
    font-weight: 400;
    color: var(--stress-muted);
}

.stress-chart-canvas {
    position: relative;
    flex: 1;
    min-height: 0;
}

.stress-chart-canvas canvas {
    width: 100% !important;
    height: 100% !important;
}

.stress-details {
    margin: 0;
    text-align: center;
    color: var(--stress-muted);
    font-size: 0.85em;
}

.stress-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;
}

.stress-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
}

.stress-run-btn {
    min-height: 40px;
    min-width: 60%;
    padding: 0.5em 1.4em;
    border: none;
    border-radius: 6px;
    background: var(--stress-accent);
    color: #ffffff;
    font-size: 1em;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.2s;
}

.stress-run-btn:hover:not(:disabled) {
    filter: brightness(1.1);
}

.stress-run-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.stress-run-btn-stop {
    background: #d64545;
}

/* "Keep running until I stop it" switch */
.stress-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    cursor: pointer;
    color: var(--stress-muted);
    font-size: 0.9em;
}

.stress-switch input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.stress-switch-track {
    position: relative;
    flex: 0 0 auto;
    width: 36px;
    height: 20px;
    border-radius: 999px;
    background: #6b7a8c; /* dark enough to read on the grey home-page tiles */
    transition: background 0.2s;
}

.stress-switch-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    transition: transform 0.2s;
}

.stress-switch input:checked + .stress-switch-track {
    background: var(--stress-accent);
}

.stress-switch input:checked + .stress-switch-track::after {
    transform: translateX(16px);
}

.stress-switch input:focus-visible + .stress-switch-track {
    outline: 2px solid var(--stress-accent);
    outline-offset: 2px;
}

/* Not tall enough for a readable chart next to everything else in the view: leave it
   out (the results view holds more, so it needs a taller tile). */
@container stress (max-height: 360px) {
    .stress-test-component[data-state="running"] .stress-chart {
        display: none;
    }
}

@container stress (max-height: 500px) {
    .stress-test-component[data-state="done"] .stress-chart {
        display: none;
    }
}

/* Short tiles: drop the fine print too so the score stays readable. */
@container stress (max-height: 320px) {
    .stress-note,
    .stress-compare-text {
        display: none !important;
    }

    .stress-test-component[data-state="done"] .stress-details {
        display: none;
    }
}

@container stress (max-height: 230px) {
    .stress-device {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .stress-progress-fill,
    .stress-switch-track,
    .stress-switch-track::after {
        transition: none;
    }
}