/**
 * Toggle Track Skin — Gritty Console
 *
 * Beat-up SSL/Neve mixing desk. Basement studio at 3am.
 * Scratched metal textures, scuffed knob aesthetics, dim LED
 * ladders, worn and lived-in feel.
 *
 * @package ToggleTrack
 * @since   1.0.0
 */

/* ---------- Color Palette ---------- */

.tt-skin-gritty-console {
    --tt-bg: #1a1a1a;
    --tt-text: #8ba888;
    --tt-active: #d8e8d4;
    --tt-controls: #242424;
    --tt-progress: #2a2a2a;
    --tt-accent: #c49849;
}

/* ---------- Container — Scratched Metal ---------- */

.tt-skin-gritty-console {
    border-radius: 2px;
    border: 1px solid #2e2e2e;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.6),
        inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

/* Noise / scratch texture overlay */
.tt-skin-gritty-console::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 2px,
            rgba(255, 255, 255, 0.008) 2px,
            rgba(255, 255, 255, 0.008) 3px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 3px,
            rgba(255, 255, 255, 0.005) 3px,
            rgba(255, 255, 255, 0.005) 4px
        ),
        repeating-linear-gradient(
            37deg,
            transparent 0px,
            transparent 8px,
            rgba(255, 255, 255, 0.012) 8px,
            transparent 9px
        );
    pointer-events: none;
    z-index: 1;
    border-radius: 2px;
}

/* Wrapper with scuffed surface feel */
.tt-skin-gritty-console .tt-wrapper {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.02) 0%,
            transparent 3%,
            transparent 97%,
            rgba(0, 0, 0, 0.1) 100%
        );
    padding: 18px;
    position: relative;
    z-index: 2;
}

/* ---------- Track Buttons — Channel Strip Labels ---------- */

.tt-skin-gritty-console .tt-track-btn {
    border-radius: 2px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75em;
    letter-spacing: 0.08em;
    border: 1px solid #333333;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.tt-skin-gritty-console .tt-track-btn:hover {
    background: #2e2e2e;
    border-color: #3a3a3a;
}

.tt-skin-gritty-console .tt-track-btn.tt-active {
    border-color: rgba(196, 152, 73, 0.4);
}

/* ---------- Play Button — Knob Aesthetic ---------- */

.tt-skin-gritty-console .tt-play-btn {
    border-radius: 50%;
    width: 46px;
    height: 46px;
    background:
        radial-gradient(
            circle at 40% 35%,
            #3a3a3a 0%,
            #2a2a2a 40%,
            #1e1e1e 80%,
            #161616 100%
        );
    border: 2px solid #333333;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.tt-skin-gritty-console .tt-play-btn:hover {
    border-color: #404040;
}

.tt-skin-gritty-console .tt-play-btn:active {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* ---------- Progress Bar — Worn Channel Fader ---------- */

.tt-skin-gritty-console .tt-progress-bar {
    height: 10px;
    border-radius: 1px;
    border: 1px solid #333333;
    background:
        linear-gradient(
            180deg,
            #1e1e1e 0%,
            #2a2a2a 50%,
            #1e1e1e 100%
        );
}

.tt-skin-gritty-console .tt-progress-fill {
    border-radius: 0;
    background: linear-gradient(
        180deg,
        #d4a858 0%,
        #c49849 50%,
        #a07830 100%
    );
    opacity: 0.85;
}

/* ---------- LED Ladder — Track Selector Indicators ---------- */

.tt-skin-gritty-console .tt-track-selector {
    border-bottom: 1px solid #2a2a2a;
    padding-bottom: 10px;
}

/* ---------- Control Buttons ---------- */

.tt-skin-gritty-console .tt-loop-btn,
.tt-skin-gritty-console .tt-loudness-btn,
.tt-skin-gritty-console .tt-ab-btn {
    border-radius: 2px;
    text-transform: uppercase;
    font-size: 0.7em;
    font-weight: 700;
    letter-spacing: 0.1em;
    border: 1px solid #333333;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.tt-skin-gritty-console .tt-loop-btn:hover,
.tt-skin-gritty-console .tt-loudness-btn:hover,
.tt-skin-gritty-console .tt-ab-btn:hover {
    background: #2e2e2e;
}

.tt-skin-gritty-console .tt-loop-btn.tt-active,
.tt-skin-gritty-console .tt-loudness-btn.tt-active,
.tt-skin-gritty-console .tt-ab-btn.tt-active {
    border-color: rgba(196, 152, 73, 0.4);
    box-shadow: 0 0 4px rgba(196, 152, 73, 0.15);
}

/* ---------- Time Display — Dim Readout ---------- */

.tt-skin-gritty-console .tt-time {
    color: #7a9a78;
    font-weight: 600;
    font-size: 0.75em;
    letter-spacing: 0.04em;
}

/* ---------- Volume / Speed Labels ---------- */

.tt-skin-gritty-console .tt-volume-label,
.tt-skin-gritty-console .tt-speed-label {
    text-transform: uppercase;
    font-size: 0.65em;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: #6a8a68;
}

/* ---------- Meter — LED Ladder Vibe ---------- */

.tt-skin-gritty-console .tt-meter {
    border: 1px solid #333333;
    background: #1a1a1a;
}

.tt-skin-gritty-console .tt-meter-label {
    text-transform: uppercase;
    font-size: 0.6em;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: #6a8a68;
}

/* ---------- Extras Row — Tape-Splice Divider ---------- */

.tt-skin-gritty-console .tt-extras {
    border-top: 1px solid #2a2a2a;
    padding-top: 10px;
}

/* ---------- Loading Overlay ---------- */

.tt-skin-gritty-console .tt-loading {
    background: rgba(20, 20, 20, 0.95);
}

.tt-skin-gritty-console .tt-loading-text {
    color: #8ba888;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.75em;
    font-weight: 700;
}

.tt-skin-gritty-console .tt-loading-bar {
    border: 1px solid #333333;
}