/* ===========================================================================
   The audio deck at the foot of a story.
   ===========================================================================

   What sits in the story body is a heading and a list of links; audio-player.js
   turns each link into a player. Both states are styled here, because the link
   state is what a reader sees if the script has not arrived yet — and on a slow
   connection that is a real moment, not a hypothetical one.

   Scoped under .article-container: custom.css sets rules like
   `.article-container h3` at specificity (0,1,1), which silently beats a bare
   class at (0,1,0).
   ========================================================================= */

.article-container .osc-audio-deck {
    margin: 40px 0 10px;
    padding: 26px 28px 22px;
    background: linear-gradient(180deg, #f7f9fc 0%, #eef2f8 100%);
    border: 1px solid #d9e1ec;
    border-top: 3px solid #1f4e79;
    border-radius: 4px;
}

.article-container .osc-audio-deck-title {
    margin: 0 0 6px !important;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 1.3rem !important;
    font-weight: 700;
    color: #14243a;
}

.article-container .osc-audio-deck-note {
    margin: 0 0 20px !important;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: .95rem !important;
    line-height: 1.6;
    color: #4e5a6b;
    text-indent: 0 !important;
}

/* ---------------------------------------------------------------------------
   THE UNENHANCED STATE — a plain link, before or instead of the script
   ------------------------------------------------------------------------- */

.article-container .osc-audio-track {
    margin: 0 0 12px !important;
    text-indent: 0 !important;
}
.article-container .osc-audio-track a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 18px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .9rem;
    font-weight: 700;
    color: #ffffff !important;
    background: #1f4e79;
    border-radius: 999px;
    text-decoration: none !important;
}

/* ---------------------------------------------------------------------------
   THE PLAYER
   ------------------------------------------------------------------------- */

.article-container .osc-audio-player {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 14px;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid #d9e1ec;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(20, 36, 58, .06);
}
.article-container .osc-audio-player:last-of-type { margin-bottom: 0; }

.article-container .osc-audio-player.is-broken {
    background: #fdf3f3;
    border-color: #e6bcbc;
}

/* The play control. A circle with a CSS triangle, becoming two bars when
   playing -- no icon font, no SVG, nothing extra to load or 404. */
.article-container .osc-audio-play {
    position: relative;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #1f4e79;
    cursor: pointer;
    transition: background .18s ease, transform .18s ease;
}
.article-container .osc-audio-play:hover { background: #143b5e; }
.article-container .osc-audio-play:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(31, 78, 121, .38);
}

/* Play: a triangle, nudged right of centre so it looks centred. */
.article-container .osc-audio-play::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 9px 0 9px 15px;
    border-color: transparent transparent transparent #ffffff;
}
/* Pause: the same box redrawn as two bars, using a border trick so there is
   still only one pseudo-element to manage. */
.article-container .osc-audio-player.is-playing .osc-audio-play::before {
    left: 50%;
    width: 14px;
    height: 16px;
    border: 0;
    border-left: 5px solid #ffffff;
    border-right: 5px solid #ffffff;
    box-sizing: border-box;
}

.article-container .osc-audio-body {
    flex: 1 1 auto;
    min-width: 0;
}

.article-container .osc-audio-name {
    margin: 0 0 8px !important;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 1rem !important;
    font-weight: 700;
    line-height: 1.3;
    color: #14243a;
    text-indent: 0 !important;
}

/* A real range input, restyled. Keyboard operable and announced by screen
   readers without any extra work. */
.article-container .osc-audio-seek {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 6px;
    margin: 0 0 6px;
    background: #dbe3ee;
    border-radius: 999px;
    cursor: pointer;
}
.article-container .osc-audio-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border: 0;
    border-radius: 50%;
    background: #1f4e79;
    box-shadow: 0 1px 3px rgba(20, 36, 58, .4);
    cursor: pointer;
}
.article-container .osc-audio-seek::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 0;
    border-radius: 50%;
    background: #1f4e79;
    cursor: pointer;
}
.article-container .osc-audio-seek:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(31, 78, 121, .3);
}

.article-container .osc-audio-times {
    display: flex;
    justify-content: space-between;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .76rem;
    color: #6b7a8d;
}

/* Hidden on screen: the player is the whole interface, and a second way to
   reach the same file only competed with it.
   
   It stays in the markup for one reason -- see the print block at the foot of
   this file. A printed article otherwise carries a picture of a player and no
   way to find the recording. display:none also takes it out of the
   accessibility tree, so it is not announced to a screen reader either. */
.article-container .osc-audio-open {
    display: none;
}

@media (max-width: 40rem) {
    .article-container .osc-audio-deck { padding: 20px 16px 16px; }
    .article-container .osc-audio-player { gap: 12px; padding: 12px; }
    .article-container .osc-audio-play { width: 46px; height: 46px; }
    .article-container .osc-audio-name { font-size: .94rem !important; }
}

@media (prefers-reduced-motion: reduce) {
    .article-container .osc-audio-play { transition: none; }
}

/* On paper a player is nothing. The URL is the useful part. */
@media print {
    .article-container .osc-audio-deck { break-inside: avoid; background: none; }
    .article-container .osc-audio-play,
    .article-container .osc-audio-seek,
    .article-container .osc-audio-times { display: none; }
    /* The one place the link earns its keep: on paper the player is a picture
       of a control, and the address is the only thing that gets a reader to
       the recording. */
    .article-container .osc-audio-open {
        display: inline;
        font-family: Arial, Helvetica, sans-serif;
        font-size: .78rem;
        color: #14243a !important;
        text-decoration: none;
    }
    .article-container .osc-audio-open[href]::after {
        content: " — " attr(href);
        font-size: .9em;
    }
}