/* The "Listen to this article" player; loaded only on articles with audio. */
#lc27 .article-listen{margin:0 0 32px}
#lc27 .article-listen audio{display:block;width:100%}
#lc27 .article-listen .listen-ui[hidden]{display:none}
#lc27 .listen-ui{display:flex;align-items:center;gap:14px;padding:10px 12px 10px 10px;background:#0b1928;color:#fff;border-left:3px solid #1bb6f7}
#lc27 .listen-ui p{margin:0}
#lc27 .listen-ui button{font:inherit;color:inherit;background:none;border:0;border-radius:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
#lc27 .listen-ui button:focus-visible{outline:2px solid #1bb6f7;outline-offset:2px}
#lc27 .listen-toggle{flex:none;display:grid;place-items:center;width:44px;height:44px;background:#1bb6f7!important;color:#0b1928!important;transition:background .15s ease}
#lc27 .listen-toggle:hover{background:#4cc8fa!important}
#lc27 .listen-toggle svg{width:20px;height:20px}
#lc27 .listen-pause,#lc27 .article-listen.is-playing .listen-play{display:none}
#lc27 .article-listen.is-playing .listen-pause{display:block}
#lc27 .listen-title{flex:none;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff}
#lc27 .listen-title span{display:block;margin-top:1px;font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:rgba(255,255,255,.55)}
#lc27 .listen-wave{--fill:0%;position:relative;flex:1;min-width:60px;height:28px}
#lc27 .wave-bars{position:absolute;inset:0;display:flex;align-items:center;gap:2px}
#lc27 .wave-bars i{flex:1;min-width:1px;background:rgba(255,255,255,.22)}
#lc27 .wave-played{clip-path:inset(0 calc(100% - var(--fill)) 0 0)}
#lc27 .wave-played i{background:#1bb6f7}
#lc27 .listen-wave:hover .wave-bars:not(.wave-played) i{background:rgba(255,255,255,.32)}
#lc27 .listen-seek{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
#lc27 .listen-wave:has(.listen-seek:focus-visible){outline:2px solid #1bb6f7;outline-offset:3px}
#lc27 .listen-times{flex:none;font-size:12px;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.55);white-space:nowrap}
#lc27 .listen-time{color:#fff}
#lc27 .listen-controls{flex:none;display:flex;align-items:center;gap:2px}
#lc27 .listen-skip{display:grid;place-items:center;width:32px;height:32px;color:rgba(255,255,255,.7)!important;transition:color .15s ease,background .15s ease}
#lc27 .listen-skip:hover{color:#fff!important;background:rgba(255,255,255,.08)!important}
#lc27 .listen-skip svg{width:22px;height:22px}
#lc27 .listen-speed{min-width:40px;height:26px;margin-left:6px;padding:0 6px!important;border:1px solid rgba(255,255,255,.28)!important;font-size:12px!important;font-weight:700!important;font-variant-numeric:tabular-nums;transition:border-color .15s ease,color .15s ease}
#lc27 .listen-speed:hover{border-color:#1bb6f7!important;color:#1bb6f7!important}
@media(max-width:640px){#lc27 .listen-ui{flex-wrap:wrap;gap:10px 12px}#lc27 .listen-title{flex:1}#lc27 .listen-wave{order:5;flex:1 1 60%}#lc27 .listen-times{order:6}#lc27 .wave-bars i:nth-child(2n){display:none}}
/* Docked: pinned to the bottom of the screen while the player is scrolled away. */
#lc27 .article-listen.is-docked{min-height:var(--listen-height)}
#lc27 .article-listen.is-docked .listen-ui{position:fixed;left:0;right:0;bottom:0;z-index:50;padding-left:max(10px,calc((100vw - 1124px) / 2));padding-right:max(12px,calc((100vw - 1124px) / 2));border-left:0;border-top:2px solid #1bb6f7;box-shadow:0 -10px 30px -12px rgba(11,25,40,.45);animation:listen-dock .32s cubic-bezier(.2,.8,.2,1) both}
#lc27 .article-listen.is-undocking .listen-ui{animation:listen-undock .22s cubic-bezier(.4,0,1,1) both}
@keyframes listen-dock{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}}
@keyframes listen-undock{from{transform:none;opacity:1}to{transform:translateY(100%);opacity:0}}
@media(prefers-reduced-motion:reduce){#lc27 .article-listen.is-docked .listen-ui,#lc27 .article-listen.is-undocking .listen-ui{animation:none}}
/* The text: the block being read is tinted; play-from-here markers sit in the margin. */
#lc27 .listen-block{position:relative;transition:background-color .35s ease,box-shadow .35s ease}
#lc27 .listen-block.is-current{background-color:rgba(27,182,247,.1);box-shadow:0 0 0 10px rgba(27,182,247,.1)}
#lc27 .listen-jump{position:absolute;left:-46px;top:.2em;display:grid;place-items:center;width:22px;height:22px;padding:0;border:0;border-radius:0;background:#0b1928;color:#1bb6f7;cursor:pointer;opacity:0;transition:opacity .15s ease}
#lc27 li.listen-block .listen-jump{left:-66px}
#lc27 .listen-jump svg{width:12px;height:12px}
#lc27 .listen-block:hover .listen-jump,#lc27 .listen-jump:focus-visible{opacity:1}
#lc27 .listen-jump:hover{background:#1bb6f7;color:#0b1928}
#lc27 .listen-jump:focus-visible{outline:2px solid #1bb6f7;outline-offset:2px}
#lc27 .listen-block.is-current .listen-jump{display:none}
@media(hover:none),(max-width:840px){#lc27 .listen-jump{left:-20px;width:18px;height:18px;background:transparent;color:#1bb6f7}#lc27 li.listen-block .listen-jump{left:-40px}body:not(.is-listening) #lc27 .listen-jump{display:none}body.is-listening #lc27 .listen-jump{opacity:.55}#lc27 .listen-block.is-current .listen-jump{display:none}}
/* In a quote, the whole quote is tinted, up to its border. */
#lc27 blockquote .listen-block.is-current{background-color:transparent;box-shadow:none}
#lc27 .reading blockquote{transition:background-color .35s ease}
#lc27 .reading blockquote:has(.listen-block.is-current){background-color:rgba(27,182,247,.1)}
#lc27 blockquote .listen-jump{left:-73px}
@media(hover:none),(max-width:840px){#lc27 blockquote .listen-jump{left:-47px}}
/* A list item's tint is its own layer, reaching back over the bullet. */
#lc27 li.listen-block{z-index:0}
#lc27 li.listen-block.is-current{background-color:transparent;box-shadow:none}
#lc27 li.listen-block::after{content:"";position:absolute;inset:-10px -10px -10px -32px;z-index:-1;background:rgba(27,182,247,.1);opacity:0;transition:opacity .35s ease;pointer-events:none}
#lc27 li.listen-block.is-current::after{opacity:1}
