/**
 * My247Coach — Player: the looks of the ONE audio player (assets/js/player.js).
 *
 * 7.21.0 nazorg (OBS-545, 03/09/2026). These rules are the drawer player of
 * the prof dashboard (the audiotheek), moved out of prof.css unchanged in
 * what they render, and rewritten so that EVERY measure follows ONE custom
 * property: --m7c-player-size, the diameter of the round button. Its default
 * of 40px reproduces the audiotheek exactly (measured on the testomgeving on
 * 03/09/2026 before the move: button 40, icon 16, gap 12, bar 6 with radius 3,
 * times 12 px with 4 px above them, canvas 40 high with 8 px above it, panel
 * padding 12 x 16 with radius 8). The intake sets a smaller value on its own
 * root (intake-chat.css) and gets the same player, scaled.
 *
 * Floors, from the KNOPPEN-MANIFEST 1.9, chapter 4: the times never go under
 * 11 px and the button never under 32 px. The floor on the times is in the
 * max() below; the floor on the button is a rule for whoever sets the size.
 *
 * COLOURS carry their own fallback on purpose (lesson #109, third form): the
 * --m7c-btn-* and --my247coach-* properties are declared in prof.css and
 * client.css, and the intake page loads neither. A var() without a value
 * would wipe the whole declaration and leave, for instance, a button without
 * a background. The fallbacks are the very values those files declare.
 *
 * KNOPPEN-MANIFEST 1.9 — getoetst op 03/09/2026 (release 7.21.0, nazorg). De
 * afspeelknop volgt de media-uitzondering van hoofdstuk 4 (blauwe ronde knop,
 * afspeel- en pauzeteken, geen woord; het werkwoord in title waar de plek het
 * vraagt). Toestanden: rust en spelen (het teken wisselt, aria-pressed
 * wisselt), aanwijzen (donkerder), focus op beide paden (:focus houdt de
 * rustkleur, :focus-visible draagt de ring), uitgeschakeld en bezig bestaan
 * niet (spelen begint meteen, zonder serveraanroep). Wit op #1058f4 haalt
 * 5,64; de ring #0a45c8 haalt 3 of meer op elke achtergrond waar de speler
 * staat (gemeten in intake-chat.css voor de intake, in prof.css voor de lade).
 *
 * @since 7.21.0
 */

.my247coach-player {
    --m7c-player-size: 40px;
    box-sizing: border-box;
    padding: calc(var(--m7c-player-size) * 0.3) calc(var(--m7c-player-size) * 0.4);
    background: rgba(59, 130, 246, 0.04);
    border: 1px solid rgba(59, 130, 246, 0.12);
    border-radius: calc(var(--m7c-player-size) * 0.2);
}

.my247coach-player__controls {
    display: flex;
    align-items: center;
    gap: calc(var(--m7c-player-size) * 0.3);
}

/* The round button. Filled start colour: it opens something (manifest 1.1,
   22/08/2026, carried over from prof.css). The theme's own padding on
   <button> is left in place on purpose: the icon is centred by flex, and the
   box is fixed by width/height, so nothing moves and the drawer stays
   pixel-identical. */
.my247coach-player__play,
.my247coach-player__play:focus {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--m7c-player-size);
    height: var(--m7c-player-size);
    min-width: var(--m7c-player-size);
    border: none;
    border-radius: 50%;
    background: var(--m7c-btn-start, #1058f4);
    color: #fff;
    cursor: pointer;
    font-size: calc(var(--m7c-player-size) * 0.4);
    transition: background 0.15s;
}

.my247coach-player__play:hover,
.my247coach-player__play:hover:focus {
    background: var(--m7c-btn-start-dark, #0a45c8);
    color: #fff;
}

/* Focus, both paths (manifest 1.8, chapter 3). :focus above keeps the rest
   colour so the theme's button:focus (rgb(0,122,204), dotted outline) never
   shows after a mouse click; :focus-visible carries our ring after a key. */
.my247coach-player__play:focus {
    outline: none;
}

.my247coach-player__play:focus-visible {
    outline: 3px solid var(--m7c-btn-ring, #0a45c8);
    outline-offset: 2px;
}

.my247coach-player__icon {
    line-height: 1;
}

.my247coach-player__track {
    flex: 1;
    min-width: 0;
}

.my247coach-player__bar {
    width: 100%;
    height: calc(var(--m7c-player-size) * 0.15);
    background: #e2e8f0;
    border-radius: calc(var(--m7c-player-size) * 0.075);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.my247coach-player__fill {
    height: 100%;
    width: 0;
    background: var(--my247coach-primary, #2563eb);
    border-radius: calc(var(--m7c-player-size) * 0.075);
    transition: width 0.1s linear;
}

.my247coach-player__time {
    display: flex;
    justify-content: space-between;
    font-size: max(11px, calc(var(--m7c-player-size) * 0.3));
    color: #64748b;
    margin-top: calc(var(--m7c-player-size) * 0.1);
}

.my247coach-player__wave {
    display: block;
    width: 100%;
    height: var(--m7c-player-size);
    margin-top: calc(var(--m7c-player-size) * 0.2);
    border-radius: calc(var(--m7c-player-size) * 0.1);
}