/**
 * Toggle Track Skin — Vinyl Crate
 *
 * Record culture aesthetic. Vinyl grooves, worn sleeve art, record
 * label typography. Kraft paper texture, concentric groove patterns,
 * dust-speck overlay, serif fonts.
 *
 * @package ToggleTrack
 * @since   1.0.0
 */

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

.tt-skin-vinyl-crate {
    --tt-bg: #f5f0e5;
    --tt-text: #3a2a1a;
    --tt-active: #ffffff;
    --tt-controls: #e8e0d0;
    --tt-progress: #d8d0c0;
    --tt-accent: #8b1a1a;
}

/* ---------- Container — Kraft Paper Sleeve ---------- */

.tt-skin-vinyl-crate {
    border-radius: 3px;
    border: 1px solid #cdc0a8;
    box-shadow:
        0 2px 8px rgba(58, 42, 26, 0.15),
        0 0 0 1px rgba(58, 42, 26, 0.05);
    /* Kraft paper / cardboard texture */
    background:
        repeating-linear-gradient(
            135deg,
            transparent 0px,
            transparent 3px,
            rgba(58, 42, 26, 0.015) 3px,
            rgba(58, 42, 26, 0.015) 4px
        ),
        repeating-linear-gradient(
            45deg,
            transparent 0px,
            transparent 5px,
            rgba(58, 42, 26, 0.01) 5px,
            rgba(58, 42, 26, 0.01) 6px
        ),
        linear-gradient(
            180deg,
            #f5f0e5 0%,
            #f0ead8 100%
        );
    font-family: Georgia, "Times New Roman", "Palatino Linotype", serif;
}

/* Dust speck overlay */
.tt-skin-vinyl-crate::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(58, 42, 26, 0.06) 0.5px, transparent 0.5px),
        radial-gradient(circle at 60% 15%, rgba(58, 42, 26, 0.04) 0.5px, transparent 0.5px),
        radial-gradient(circle at 80% 70%, rgba(58, 42, 26, 0.05) 0.5px, transparent 0.5px),
        radial-gradient(circle at 35% 80%, rgba(58, 42, 26, 0.04) 0.5px, transparent 0.5px),
        radial-gradient(circle at 70% 40%, rgba(58, 42, 26, 0.03) 0.5px, transparent 0.5px),
        radial-gradient(circle at 10% 60%, rgba(58, 42, 26, 0.05) 0.5px, transparent 0.5px),
        radial-gradient(circle at 90% 25%, rgba(58, 42, 26, 0.04) 0.5px, transparent 0.5px),
        radial-gradient(circle at 45% 55%, rgba(58, 42, 26, 0.03) 0.5px, transparent 0.5px);
    pointer-events: none;
    z-index: 1;
    border-radius: 3px;
}

.tt-skin-vinyl-crate .tt-wrapper {
    position: relative;
    z-index: 2;
    padding: 20px;
}

/* ---------- Track Buttons — Record Labels ---------- */

.tt-skin-vinyl-crate .tt-track-btn {
    border-radius: 50px;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    font-style: italic;
    font-size: 0.85em;
    letter-spacing: 0.02em;
    border: 1px solid #cdc0a8;
    padding: 6px 16px;
}

.tt-skin-vinyl-crate .tt-track-btn:hover {
    background: #ddd4c2;
    border-color: #bab0a0;
}

.tt-skin-vinyl-crate .tt-track-btn.tt-active {
    border-color: rgba(139, 26, 26, 0.4);
}

/* ---------- Play Button — Center Label ---------- */

.tt-skin-vinyl-crate .tt-play-btn {
    border-radius: 50%;
    width: 48px;
    height: 48px;
    background:
        radial-gradient(
            circle at center,
            #f0e8d8 0%,
            #e0d8c8 40%,
            #d8d0c0 100%
        );
    border: 2px solid #cdc0a8;
    box-shadow: 0 1px 3px rgba(58, 42, 26, 0.15);
}

.tt-skin-vinyl-crate .tt-play-btn:hover {
    background:
        radial-gradient(
            circle at center,
            #f5ede0 0%,
            #e8e0d0 40%,
            #ddd4c2 100%
        );
}

.tt-skin-vinyl-crate .tt-play-btn:active {
    box-shadow: inset 0 1px 3px rgba(58, 42, 26, 0.2);
}

/* ---------- Progress Bar — Vinyl Groove Aesthetic ---------- */

.tt-skin-vinyl-crate .tt-progress-bar {
    height: 12px;
    border-radius: 6px;
    border: 1px solid #cdc0a8;
    /* Concentric groove texture */
    background:
        repeating-linear-gradient(
            90deg,
            #d8d0c0 0px,
            #d0c8b8 1px,
            #d8d0c0 2px,
            #dcd4c4 3px
        );
    box-shadow: inset 0 1px 2px rgba(58, 42, 26, 0.1);
}

.tt-skin-vinyl-crate .tt-progress-fill {
    border-radius: 5px;
    background: linear-gradient(
        180deg,
        #a02020 0%,
        #8b1a1a 50%,
        #701414 100%
    );
    opacity: 0.9;
}

/* ---------- Time Display — Faded Ink ---------- */

.tt-skin-vinyl-crate .tt-time {
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    color: rgba(58, 42, 26, 0.6);
    font-size: 0.8em;
}

/* ---------- Control Buttons — Sleeve Tags ---------- */

.tt-skin-vinyl-crate .tt-loop-btn,
.tt-skin-vinyl-crate .tt-loudness-btn,
.tt-skin-vinyl-crate .tt-ab-btn {
    border-radius: 50px;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 0.8em;
    border: 1px solid #cdc0a8;
    padding: 4px 12px;
}

.tt-skin-vinyl-crate .tt-loop-btn:hover,
.tt-skin-vinyl-crate .tt-loudness-btn:hover,
.tt-skin-vinyl-crate .tt-ab-btn:hover {
    background: #ddd4c2;
}

.tt-skin-vinyl-crate .tt-loop-btn.tt-active,
.tt-skin-vinyl-crate .tt-loudness-btn.tt-active,
.tt-skin-vinyl-crate .tt-ab-btn.tt-active {
    border-color: rgba(139, 26, 26, 0.4);
}

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

.tt-skin-vinyl-crate .tt-volume-label,
.tt-skin-vinyl-crate .tt-speed-label {
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 0.75em;
    color: rgba(58, 42, 26, 0.5);
}

/* ---------- Meter ---------- */

.tt-skin-vinyl-crate .tt-meter {
    border: 1px solid #cdc0a8;
    border-radius: 2px;
}

.tt-skin-vinyl-crate .tt-meter-label {
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 0.65em;
    color: rgba(58, 42, 26, 0.5);
}

/* ---------- Track Selector — Crate Divider ---------- */

.tt-skin-vinyl-crate .tt-track-selector {
    border-bottom: 1px solid #cdc0a8;
    padding-bottom: 12px;
}

/* ---------- Extras — Side-B Divider ---------- */

.tt-skin-vinyl-crate .tt-extras {
    border-top: 1px solid #cdc0a8;
    padding-top: 12px;
}

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

.tt-skin-vinyl-crate .tt-loading {
    background: rgba(245, 240, 229, 0.95);
    border-radius: 3px;
}

.tt-skin-vinyl-crate .tt-loading-text {
    color: #3a2a1a;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 0.85em;
}

.tt-skin-vinyl-crate .tt-loading-bar {
    border: 1px solid #cdc0a8;
    border-radius: 3px;
}

/* ---------- Loop Markers ---------- */

.tt-skin-vinyl-crate .tt-loop-marker {
    opacity: 0.6;
}