/*
 * audio-lab.css - the app look for the player.
 *
 * The site is a white page with black text, and that is right for the articles
 * and the calculators. The player is not reading material: it is the thing you
 * reach for, hit, and then leave running while you listen to something else on
 * the page. So it looks like a device instead - dark panel, light controls, one
 * amber accent on whatever you are actually touching.
 *
 * It is the same panel on every listening test and on the generator, on purpose.
 * Someone who has learned to start a sound on one page should recognise the
 * player on the next one and go straight for the test's own buttons.
 *
 * Layout still belongs to the page. This file sets colour, type and control
 * sizing only - no widths, no columns, no breakpoint layout. That is what lets
 * the same panel sit in a narrow column beside the filter buttons and fill a
 * phone screen on the generator page.
 */

:root {
    --al-panel:   #1b1f27;
    --al-raised:  #252b36;
    --al-line:    #39414f;
    --al-text:    #e6e9ef;
    --al-muted:   #99a3b3;
    --al-accent:  #ffb454;
}

/* --- the player panel (class added by audio-lab.js) --------------------- */

.audio-lab {
    background: var(--al-panel);
    color: var(--al-text);
    border: 1px solid #11141a;
    border-radius: 10px;
    padding: 1rem 1.1rem 1.2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

.audio-lab .as-title {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--al-muted);
    margin: 0 0 .6rem;
}

.audio-lab label {
    color: var(--al-muted);
    font-size: .85rem;
    margin-bottom: .25rem;
}

/* Selects and the file picker. Bootstrap's .custom-select paints its own
   background image for the arrow, so the arrow is redrawn here in the accent
   colour instead of leaving a black chevron on a dark field. */
.audio-lab select,
.audio-lab .custom-select {
    background-color: var(--al-raised);
    color: var(--al-text);
    border: 1px solid var(--al-line);
    border-radius: 6px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3e%3cpath fill='%23ffb454' d='M0 0h10L5 6z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .7rem center;
    background-size: 10px 6px;
}

.audio-lab select:focus,
.audio-lab .custom-select:focus {
    border-color: var(--al-accent);
    box-shadow: 0 0 0 .15rem rgba(255, 180, 84, .25);
    color: var(--al-text);
    background-color: var(--al-raised);
}

.audio-lab option {
    background: var(--al-raised);
    color: var(--al-text);
}

/* Sliders. Styled per engine because there is no shared pseudo-element for the
   track and the thumb, and a default slider on a dark panel reads as broken. */
.audio-lab input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background: transparent;
    padding: 0;
    margin: .35rem 0;
}

.audio-lab input[type=range]::-webkit-slider-runnable-track {
    height: 5px;
    border-radius: 3px;
    background: var(--al-line);
}

.audio-lab input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin-top: -6.5px;
    border: 0;
    border-radius: 50%;
    background: var(--al-accent);
    cursor: pointer;
}

.audio-lab input[type=range]::-moz-range-track {
    height: 5px;
    border-radius: 3px;
    background: var(--al-line);
}

.audio-lab input[type=range]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 50%;
    background: var(--al-accent);
    cursor: pointer;
}

.audio-lab input[type=range]:focus {
    outline: none;
}

.audio-lab input[type=range]:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 .2rem rgba(255, 180, 84, .3);
}

/* The frequency readout is the number the listener is steering, so it is the
   one piece of text that gets the accent. */
.audio-lab .as-tone-readout {
    color: var(--al-accent);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.audio-lab .form-text,
.audio-lab .text-muted,
.audio-lab small {
    color: var(--al-muted) !important;
    font-size: .78rem;
}

.audio-lab .form-check-label {
    color: var(--al-text);
    font-size: .85rem;
}

.audio-lab .as-channels-invert input {
    accent-color: var(--al-accent);
}

.audio-lab input[type=file] {
    color: var(--al-muted);
    font-size: .82rem;
}

.audio-lab input[type=file]::file-selector-button {
    background: var(--al-raised);
    color: var(--al-text);
    border: 1px solid var(--al-line);
    border-radius: 6px;
    padding: .25rem .6rem;
    margin-right: .6rem;
    cursor: pointer;
}

.audio-lab input[type=file]::file-selector-button:hover {
    border-color: var(--al-accent);
}

/* --- transport bar: start + level -------------------------------------- *
 *
 * Still page markup, not module markup, because the master gain lives on the
 * page until the level moves into AudioLab. Sharing the look now is what makes
 * "hit start, then go play with the test" read as one device rather than a
 * button above a panel.
 */

.al-transport {
    background: var(--al-panel);
    border: 1px solid #11141a;
    border-radius: 10px;
    padding: .7rem .9rem;
    color: var(--al-text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

.al-transport label {
    color: var(--al-muted);
    margin-bottom: 0;
}

.al-transport .btn-primary {
    background-color: var(--al-accent);
    border-color: var(--al-accent);
    color: #1b1f27;
    font-weight: 700;
    letter-spacing: .04em;
    border-radius: 6px;
    padding: .35rem 1.4rem;
}

.al-transport .btn-primary:hover:not(.disabled) {
    background-color: #ffc178;
    border-color: #ffc178;
    color: #1b1f27;
}

/* Once audio is running the button has done its job: it stays readable but
   stops competing with the controls the listener is now using. */
.al-transport .btn-primary.disabled,
.al-transport .btn-primary:disabled {
    background-color: transparent;
    border-color: var(--al-line);
    color: var(--al-muted);
    opacity: 1;
}

.al-transport input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}

.al-transport input[type=range]::-webkit-slider-runnable-track {
    height: 5px;
    border-radius: 3px;
    background: var(--al-line);
}

.al-transport input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin-top: -6.5px;
    border: 0;
    border-radius: 50%;
    background: var(--al-accent);
    cursor: pointer;
}

.al-transport input[type=range]::-moz-range-track {
    height: 5px;
    border-radius: 3px;
    background: var(--al-line);
}

.al-transport input[type=range]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 50%;
    background: var(--al-accent);
    cursor: pointer;
}