/**
 * Webcam Test
 */

/* ========================================
   App Page Layout
   ======================================== */

.app-page {
    padding: var(--space-4);
    padding-top: calc(var(--header-height) + var(--space-4));
    min-height: calc(100vh - var(--header-height));
}

/* ========================================
   App Container Centering (REQUIRED)
   ======================================== */

.webcam-test-container {
    width: 100%;
    max-width: var(--app-container-max);
    margin: 0 auto;
}

/* The hidden attribute loses to non-default display values (grid/flex/
   inline-flex on buttons and the stream-info dl) without this guard. */
.webcam-test-container [hidden] {
    display: none;
}

/* ========================================
   Tool
   ======================================== */

.webcam-test-tool {
    display: grid;
    gap: var(--space-6);
}

.webcam-test-note {
    margin: 0;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: var(--color-bg-alt);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.webcam-test-note-icon {
    flex-shrink: 0;
    width: calc(var(--space-5) + var(--space-1));
    height: calc(var(--space-5) + var(--space-1));
    margin-top: var(--space-1);
    color: var(--color-primary-text);
}

.webcam-test-panel {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-lg);
    display: grid;
    gap: var(--space-5);
}

.webcam-test-panel-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
}

.webcam-test-panel-header h2 {
    margin: 0;
    font-size: var(--font-size-lg);
}

/* ========================================
   Status pill (state recolors via color-mix tints,
   same documented pattern as camera-recorder)
   ======================================== */

.webcam-test-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: var(--color-bg-alt);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    white-space: nowrap;
    transition:
        background var(--transition-slow),
        border-color var(--transition-slow);
}

.webcam-test-status::before {
    content: "";
    width: var(--space-2);
    height: var(--space-2);
    border-radius: var(--radius-full);
    background: var(--color-border-dark);
    transition: background var(--transition-slow);
}

.webcam-test-status.is-pending {
    border-color: color-mix(in srgb, var(--color-warning) 55%, var(--color-border));
    background: color-mix(in srgb, var(--color-warning) 12%, transparent);
}

.webcam-test-status.is-pending::before {
    background: var(--color-warning);
}

.webcam-test-status.is-on {
    border-color: color-mix(in srgb, var(--color-success) 55%, var(--color-border));
    background: color-mix(in srgb, var(--color-success) 12%, transparent);
}

.webcam-test-status.is-on::before {
    background: var(--color-success);
}

.webcam-test-status.is-error {
    border-color: color-mix(in srgb, var(--color-error) 55%, var(--color-border));
    background: color-mix(in srgb, var(--color-error) 12%, transparent);
}

.webcam-test-status.is-error::before {
    background: var(--color-error);
}

/* ========================================
   Preview viewport + overlay state machine
   ======================================== */

.webcam-test-video-wrap {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
}

.webcam-test-video {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
    background: var(--color-bg-alt);
    transition: transform var(--transition-base);
}

.webcam-test-video.is-mirrored {
    transform: scaleX(-1);
}

/* Grid overlay: rule of thirds.
   Documented exception (see UI brief §4): the lines sit on live camera
   footage (user content), not a UI surface, so a white-based token-derived
   line with alpha is the correct theme-independent choice. */
.webcam-test-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(to right,
            transparent calc(33.333% - 1px),
            color-mix(in srgb, var(--color-text-inverse) 60%, transparent) calc(33.333% - 1px),
            color-mix(in srgb, var(--color-text-inverse) 60%, transparent) calc(33.333% + 1px),
            transparent calc(33.333% + 1px),
            transparent calc(66.666% - 1px),
            color-mix(in srgb, var(--color-text-inverse) 60%, transparent) calc(66.666% - 1px),
            color-mix(in srgb, var(--color-text-inverse) 60%, transparent) calc(66.666% + 1px),
            transparent calc(66.666% + 1px)),
        linear-gradient(to bottom,
            transparent calc(33.333% - 1px),
            color-mix(in srgb, var(--color-text-inverse) 60%, transparent) calc(33.333% - 1px),
            color-mix(in srgb, var(--color-text-inverse) 60%, transparent) calc(33.333% + 1px),
            transparent calc(33.333% + 1px),
            transparent calc(66.666% - 1px),
            color-mix(in srgb, var(--color-text-inverse) 60%, transparent) calc(66.666% - 1px),
            color-mix(in srgb, var(--color-text-inverse) 60%, transparent) calc(66.666% + 1px),
            transparent calc(66.666% + 1px));
}

.webcam-test-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    background: var(--color-overlay);
    transition: opacity var(--transition-slow);
}

.webcam-test-overlay.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.webcam-test-overlay-card {
    width: 100%;
    max-width: var(--help-panel-max-width);
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, var(--color-bg-card) 22%, transparent);
    background: color-mix(in srgb, var(--color-bg-card) 88%, var(--color-overlay));
    color: var(--color-text);
    padding: var(--space-6);
    box-shadow: var(--shadow-xl);
    display: grid;
    gap: var(--space-3);
    text-align: center;
    justify-items: center;
}

.webcam-test-overlay-icon {
    width: calc(var(--space-8) + var(--space-1));
    height: calc(var(--space-8) + var(--space-1));
    color: var(--color-text-muted);
}

.webcam-test-overlay-icon.is-error {
    color: var(--color-error-text);
}

.webcam-test-overlay-title {
    margin: 0;
    font-weight: 800;
    font-size: var(--font-size-lg);
    letter-spacing: -0.01em;
}

/* WCAG 1.4.3: the card is translucent (color-mix over the overlay), so the
   effective light-theme background composites to ~#efefef. --color-text-muted
   on that is only ~4.1:1 (< 4.5:1 for 14px text); --color-text keeps 12+:1 in
   light and 13+:1 in dark while staying distinct from the 800-weight title. */
.webcam-test-overlay-text {
    margin: 0;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}

.webcam-test-error-steps {
    margin: 0;
    padding-inline-start: var(--space-5);
    max-width: 40ch;
    text-align: left;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    display: grid;
    gap: var(--space-2);
}

/* ========================================
   Control bar
   ======================================== */

.webcam-test-controls {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: flex-end;
}

.webcam-test-controls .btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

.webcam-test-field {
    flex: 1 1 180px;
    display: grid;
    gap: var(--space-2);
}

.webcam-test-label {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text);
}

.webcam-test-select {
    width: 100%;
    min-height: 44px;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: var(--font-size-base);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.webcam-test-select:hover {
    border-color: var(--color-border-dark);
}

.webcam-test-select:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-color: var(--color-primary);
}

.webcam-test-select[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Mirror / Grid toggles (aria-pressed, fps-playground pattern) */
.webcam-test-toggle {
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg-alt);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}

.webcam-test-toggle:hover {
    background: var(--color-border);
}

.webcam-test-toggle:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.webcam-test-toggle:active {
    transform: scale(0.98);
}

.webcam-test-toggle[aria-pressed="true"] {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-primary);
}

.webcam-test-toggle[aria-pressed="true"]:hover {
    background: var(--color-primary-dark);
}

/* Shortcut hint (desktop only) */
.webcam-test-shortcuts-hint {
    margin: 0;
    align-self: center;
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.webcam-test-shortcuts-hint kbd {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
    background: var(--color-bg-alt);
    color: var(--color-text);
}

.webcam-test-shortcuts-hint span {
    margin-right: var(--space-2);
}

/* ========================================
   Stream info + snapshot panel
   ======================================== */

.webcam-test-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
}

.webcam-test-zone {
    display: grid;
    gap: var(--space-3);
}

.webcam-test-muted {
    margin: 0;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    background: var(--color-bg);
}

.webcam-test-stream-info {
    margin: 0;
    display: grid;
    gap: var(--space-3);
}

.webcam-test-stream-row {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: var(--space-3);
    align-items: baseline;
}

.webcam-test-stream-row dt {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.webcam-test-stream-row dd {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.webcam-test-snapshot-img {
    width: 100%;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    display: block;
}

.webcam-test-snapshot .btn {
    justify-self: start;
}

/* ========================================
   Help button (header + help modal close).
   `.btn-icon` is not in main.css; the portal pattern lives per-app
   (see camera-recorder.css / calculator.css) and is required here for
   the header help toggle and the .help-close button.
   ======================================== */

.btn-icon {
    width: calc(var(--space-10) + var(--space-1));
    height: calc(var(--space-10) + var(--space-1));
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
    font-weight: 600;
    cursor: pointer;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}

.btn-icon:hover {
    background: var(--color-border);
    border-color: var(--color-border-dark);
    color: var(--color-text);
}

.btn-icon:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.btn-icon:active {
    transform: scale(0.98);
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 768px) {
    .webcam-test-shortcuts-hint {
        display: none;
    }

    .webcam-test-info-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .webcam-test-panel {
        padding: var(--space-5);
    }

    .webcam-test-panel-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .webcam-test-controls .btn {
        width: 100%;
    }

    .webcam-test-controls .webcam-test-toggle {
        flex: 1 1 44px;
    }
}

/* ========================================
   Reduced motion
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .webcam-test-overlay {
        transition: none;
    }

    .webcam-test-status,
    .webcam-test-status::before {
        transition: none;
    }

    .webcam-test-video {
        transition: none;
    }
}