/* Sound Study - Neutral Black & White Theme */

@font-face {
    font-family: 'Alaska';
    src: url('/static/fonts/Alaska-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Alaska';
    src: url('/static/fonts/Alaska-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Alaska';
    src: url('/static/fonts/Alaska-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Alaska Expanded';
    src: url('/static/fonts/Alaska-ExpandedLight.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Alaska Expanded';
    src: url('/static/fonts/Alaska-ExpandedMedium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

.font-alaska { font-family: 'Alaska', sans-serif; }
.font-alaska-expanded { font-family: 'Alaska Expanded', 'Alaska', sans-serif; letter-spacing: 0.02em; }

body {
    font-family: 'Alaska', sans-serif;
    font-size: 16px;
}

/* Black opacity utility classes (not in pre-built Tailwind) */
.text-black-60 { color: rgba(0, 0, 0, 0.6); }
.border-black-20 { border-color: rgba(0, 0, 0, 0.2); }
.border-black-10 { border-color: rgba(0, 0, 0, 0.1); }
.bg-black-5 { background-color: rgba(0, 0, 0, 0.05); }
.bg-black-10 { background-color: rgba(0, 0, 0, 0.1); }
.bg-black-3 { background-color: rgba(0, 0, 0, 0.03); }
.hover\:bg-black-5:hover { background-color: rgba(0, 0, 0, 0.05); }
.hover\:bg-black-3:hover { background-color: rgba(0, 0, 0, 0.03); }

.study-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    color: #000000;
    font-size: 14px;
    transition: background 0.15s;
}

.radio-option:hover {
    background: rgba(0, 0, 0, 0.03);
}

.radio-option input[type="radio"] {
    accent-color: #000000;
}

.likert-btn {
    transition: all 0.15s ease;
}

.likert-btn:hover:not([disabled]) {
    transform: scale(1.1);
}

.likert-btn[disabled] {
    pointer-events: none;
}

/* Mobile responsive: Likert / attitude buttons (same 7-of-7 row pattern) */
@media (max-width: 640px) {
    .likert-btn, .att-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 13px !important;
    }

    /* Stack scale labels above/below on mobile */
    .scale-row {
        flex-direction: column;
        gap: 8px;
    }

    .scale-row .scale-label {
        width: auto !important;
        text-align: center !important;
    }

    .scale-row .scale-buttons {
        justify-content: center;
    }

    /* Audio player: slightly smaller play button */
    #play-btn {
        width: 44px !important;
        height: 44px !important;
    }

    /* Cards: less padding on mobile */
    .study-card {
        padding: 16px !important;
    }
}

@media (max-width: 380px) {
    .likert-btn, .att-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 12px !important;
    }
}

/* Language switcher: light-theme override + comfortable tap target on mobile */
.lang-btn {
    min-width: 40px;
}
.lang-btn.active {
    background: #000;
    color: #fff;
}

/* Countdown screen — explicit sizing because the prebuilt tailwind.css
   doesn't ship all the responsive variants we'd need. */
.countdown-title    { font-size: 1.75rem; line-height: 1.15; }  /* 28px */
.countdown-subtitle { font-size: 0.75rem; }                     /* 12px */
.countdown-timer    { font-size: 2.5rem; line-height: 1; }      /* 40px */
.countdown-label    { font-size: 0.625rem; }                    /* 10px */
.countdown-logo     { width: 10rem; }                           /* 160px */
@media (min-width: 480px) {
    .countdown-title    { font-size: 2.25rem; }                 /* 36px */
    .countdown-subtitle { font-size: 0.875rem; }                /* 14px */
    .countdown-timer    { font-size: 3rem; }                    /* 48px */
    .countdown-label    { font-size: 0.75rem; }                 /* 12px */
    .countdown-logo     { width: 12rem; }                       /* 192px */
}
@media (min-width: 768px) {
    .countdown-title    { font-size: 2.5rem; }                  /* 40px */
    .countdown-subtitle { font-size: 1rem; }                    /* 16px */
    .countdown-timer    { font-size: 3.5rem; }                  /* 56px */
    .countdown-label    { font-size: 0.875rem; }                /* 14px */
    .countdown-logo     { width: 13rem; }                       /* 208px */
}
@media (min-width: 1024px) {
    .countdown-title    { font-size: 3rem; }                    /* 48px */
    .countdown-timer    { font-size: 4.5rem; }                  /* 72px */
    .countdown-logo     { width: 14rem; }                       /* 224px */
}