/* Shared audio family. Meditation controls stay minimal. */
.audio-frame{container-type:inline-size;width:100%;min-width:0}
.player.player-horizontal{display:grid;grid-template-columns:minmax(160px,.6fr) minmax(0,1.4fr);grid-template-areas:none;gap:0;align-items:stretch}
.player.player-horizontal .player-image{position:relative;height:auto;min-height:220px}
.player.player-horizontal .player-image img{position:absolute;inset:0}
.player.player-horizontal.missing-image{display:block}
.player.player-horizontal .player-content{padding:28px 32px}
.player.player-horizontal :is(.player-brand,.practice,.player-controls,.timeline,.temporary-audio,.audio-status){grid-area:auto}
.player.player-horizontal .player-controls{margin-top:20px;align-items:start}
.player.player-podcast{background:var(--color-sage);color:var(--color-sage-ink)}
.player.player-podcast .play{background:var(--color-sage-ink);border-color:var(--color-sage-ink)}
.player.player-podcast .play:hover{background:var(--color-text)}
.player.player-podcast :focus-visible{outline-color:var(--color-sage-ink)}
.player.player-podcast input[type=range]{accent-color:var(--color-sage-ink);color:var(--color-sage-ink)}
.player.player-artwork .player-image img{object-fit:contain}
.player-times{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;font-variant-numeric:tabular-nums}
.player-times :is(.elapsed,.total){flex:none;white-space:nowrap}
.player-skips{display:flex;align-items:center;gap:4px;margin:0}
.player-skips button{display:inline-flex;align-items:center;justify-content:center;gap:3px;width:44px;min-width:44px;height:44px;padding:0;border:0;border-radius:3px;background:transparent;color:inherit;font-size:12px;line-height:1.2}
.player-skips button span{font-size:21px;line-height:1}
.player-skips button:hover:not(:disabled){background:var(--color-sage-quiet)}
.player-skips button:disabled{opacity:.6;cursor:default}
@container(max-width:600px){
 .player.player-horizontal{display:block}
 .player.player-horizontal .player-image{min-height:0;height:112px}
 .player.player-horizontal .player-content{padding:22px 23px}
 .player.player-horizontal.player-podcast .player-image{display:none}
}
/* Keep 44px skip targets at the narrowest widths without overlapping the range. */
@container(max-width:300px){
 .player.player-horizontal .player-controls{row-gap:0}
 .player.player-horizontal .timeline{display:contents}
 .player.player-horizontal .timeline input{grid-column:2;grid-row:1}
 .player.player-horizontal .player-times{grid-column:1/-1}
}
@media print{.player-skips{display:none}}