/* Thursday Listen: a card just above the story's first paragraph (the play square, "Listen to this article", how
   long, the story's waveform) that becomes the player, and docks at the foot of the screen while it plays. */

.tt-listen {
	--tt-l-a: var(--tt-orange, #ff4200);
	--tt-l-ink: currentColor;
	--tt-l-mute: color-mix(in srgb, currentColor 68%, transparent);
	--tt-l-rule: color-mix(in srgb, currentColor 55%, transparent);
	--tt-l-bar: color-mix(in srgb, currentColor 26%, transparent);
	--tt-l-sq: var(--tt-ink, #000000);
	--tt-l-on-sq: var(--tt-l-a);
	--tt-l-ui: var(--tt-font-ui, "Alegreya Sans", "Helvetica Neue", Arial, sans-serif);
	min-width: 0;
	margin: 0;
	color: inherit;
}
/* the column spaces its parts 48px apart; the card sits closer to the story it reads, as close as to the picture */
.tt-article__column > .tt-listen { margin-bottom: -16px; }
.tt-feature .tt-listen { width: min(100%, var(--tt-measure, 680px)); margin: 0 auto var(--tt-space-6, 32px); }
.tt-listen--wl { --tt-l-a: var(--wl-accent, #7f6cff); --tt-l-sq: var(--wl-ink, #14111d); --tt-l-ui: "WL Archivo", Arial, sans-serif; margin-top: 22px; margin-bottom: 0; }
.tt-listen *, .tt-listen *::before, .tt-listen *::after { box-sizing: border-box; }
.tt-listen[lang="ur"] { --tt-l-ui: var(--tt-font-urdu, "IBM Plex Sans Arabic", sans-serif); }

/* the card */
.tt-listen__in { --p: 0%; position: relative; display: flex; align-items: center; gap: 0 14px; width: 100%; min-height: 56px; padding-inline-end: 14px; border: 1px solid var(--tt-l-rule); color: inherit; transition: border-color 160ms; }
.tt-listen__in:hover, .tt-listen.is-open .tt-listen__in { border-color: currentColor; }

/* the play square: the paper's ink, an orange triangle (the colon's orange) */
.tt-listen__go { flex: none; display: grid; place-items: center; width: 56px; height: 56px; margin: -1px 0; margin-inline-start: -1px; padding: 0; border: 0; border-radius: 0; background: var(--tt-l-sq); color: var(--tt-l-on-sq); cursor: pointer; transition: background 160ms, color 160ms; -webkit-tap-highlight-color: transparent; }
.tt-listen__go:hover, .tt-listen__go:focus-visible { background: var(--tt-l-a); color: var(--tt-l-sq); outline: none; }
.tt-listen__icon { display: block; fill: currentColor; }
[dir="rtl"] .tt-listen__p { transform: scaleX(-1); transform-origin: center; transform-box: fill-box; }
.tt-listen__s, .tt-listen.is-playing .tt-listen__p { display: none; }
.tt-listen.is-playing .tt-listen__s { display: inline; }

/* its words */
.tt-listen__text { display: flex; flex-direction: column; justify-content: center; gap: 2px; flex: none; min-width: 0; font-family: var(--tt-l-ui); }
.tt-listen__label { font-size: 16px; font-weight: 700; line-height: 20px; white-space: nowrap; }
.tt-listen__title { display: none; }
.tt-listen__meta { font-size: 14px; line-height: 18px; color: var(--tt-l-mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tt-listen__clock { display: none; direction: ltr; unicode-bidi: isolate; }
.tt-listen.is-open .tt-listen__len { display: none; }
.tt-listen.is-open .tt-listen__clock { display: inline; }
.tt-listen[lang="ur"] .tt-listen__label { font-size: 16px; font-weight: 600; line-height: 24px; }
.tt-listen[lang="ur"] .tt-listen__meta { line-height: 20px; }

/* the waveform: the story's bars, inked up to where it has got to, an orange line where it is now */
.tt-listen__track { position: relative; flex: 1 1 auto; align-self: stretch; min-width: 48px; margin-block: 12px; }
.tt-listen__wave { position: absolute; inset: 0; display: flex; align-items: center; gap: 2px; overflow: hidden; pointer-events: none; }
.tt-listen__wave i { flex: none; width: 2px; height: var(--h); background: var(--tt-l-bar); transform-origin: center; transition: transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.tt-listen__wave--done { clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.tt-listen__wave--done i { background: currentColor; }
[dir="rtl"] .tt-listen__wave--done { clip-path: inset(0 0 0 calc(100% - var(--p))); }
.tt-listen__head { position: absolute; top: -4px; bottom: -4px; inset-inline-start: var(--p); width: 2px; margin-inline-start: -1px; background: var(--tt-l-a); opacity: 0; transition: opacity 160ms; pointer-events: none; }
.tt-listen__head::before { content: ""; position: absolute; top: 0; left: -2px; width: 6px; height: 6px; background: var(--tt-l-a); }
.tt-listen.is-open .tt-listen__head { opacity: 1; }
.tt-listen__seek { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
.tt-listen:not(.is-open) .tt-listen__seek { pointer-events: none; }
.tt-listen__track:has(.tt-listen__seek:focus-visible) { outline: 2px solid var(--tt-l-a); outline-offset: 4px; }

/* a ripple through the bars when the card is pointed at, before it plays */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.tt-listen:not(.is-open) .tt-listen__in:hover .tt-listen__wave i { animation: tt-listen-ripple 900ms cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 14ms); }
}
@keyframes tt-listen-ripple { 0%, 100% { transform: scaleY(1); } 35% { transform: scaleY(1.45); } 65% { transform: scaleY(0.7); } }

/* back, speed, close: only once it plays */
.tt-listen__ctrl { display: none; flex: none; align-items: center; gap: 4px; }
.tt-listen.is-open .tt-listen__ctrl { display: flex; }
.tt-listen__back, .tt-listen__speed, .tt-listen__close { flex: none; display: inline-flex; align-items: center; justify-content: center; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font-family: var(--tt-l-ui); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tt-listen__back { position: relative; width: 32px; }
.tt-listen__back svg { display: block; fill: currentColor; }
[dir="rtl"] .tt-listen__back svg { transform: scaleX(-1); }
.tt-listen__back span { position: absolute; left: 0; right: 0; top: 14px; font: 700 7px/1 Arial, sans-serif; text-align: center; }
.tt-listen__speed { min-width: 44px; padding: 0 6px; border: 1px solid var(--tt-l-rule); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; direction: ltr; }
.tt-listen__close { display: none; width: 32px; }
.tt-listen__back:hover, .tt-listen__speed:hover, .tt-listen__close:hover { color: var(--tt-l-a); }
.tt-listen__back:focus-visible, .tt-listen__speed:focus-visible, .tt-listen__close:focus-visible { outline: 2px solid var(--tt-l-a); outline-offset: 1px; }

/* docked at the foot of the screen (the card moved into a shell at the end of the page): ink, the bars in white,
   an orange line along the top for how far it has got */
.tt-listen--shell { position: fixed; z-index: 999; left: 0; right: 0; bottom: 0; color: #ffffff; --tt-l-sq: var(--tt-l-a); --tt-l-on-sq: #000000; animation: tt-listen-up 320ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.tt-listen--wl.tt-listen--shell { --tt-l-on-sq: var(--wl-ink, #14111d); }
.tt-listen--shell[hidden] { display: none; }
.tt-listen--shell .tt-listen__in { width: auto; min-height: 64px; margin: 0; padding: 0 max(16px, calc((100vw - 1240px) / 2)) env(safe-area-inset-bottom, 0px); gap: 0 16px; border: 0; background: var(--tt-l-sq-dock, #000000); box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.22); }
.tt-listen--wl.tt-listen--shell .tt-listen__in { background: var(--wl-ink, #14111d); }
.tt-listen--shell .tt-listen__in::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(to right, var(--tt-l-a) var(--p), #333333 var(--p)); }
[dir="rtl"].tt-listen--shell .tt-listen__in::before { background: linear-gradient(to left, var(--tt-l-a) var(--p), #333333 var(--p)); }
.tt-listen--shell .tt-listen__go { width: 44px; height: 44px; margin: 0; }
.tt-listen--shell .tt-listen__text { flex: 0 1 auto; max-width: 36%; }
.tt-listen--shell .tt-listen__label { display: none; }
.tt-listen--shell .tt-listen__title { display: block; overflow: hidden; font-size: 15px; font-weight: 700; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
.tt-listen--shell .tt-listen__track { margin-block: 20px; }
.tt-listen--shell .tt-listen__close { display: inline-flex; }
.tt-listen--shell .tt-listen__speed { border-color: #555555; }
@keyframes tt-listen-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.tt-listening .tt-app-bar { display: none; }

/* phones: the label gives way to the clock once it plays; docked, the waveform gives way to the orange line */
@media (max-width: 640px) {
	.tt-listen__in { width: 100%; gap: 0 12px; padding-inline-end: 12px; }
	.tt-listen__label { font-size: 15px; }
	.tt-listen.is-open:not(.tt-listen--shell) .tt-listen__label { display: none; }
	.tt-listen.is-open:not(.tt-listen--shell) .tt-listen__meta { color: inherit; font-weight: 700; }
	.tt-listen:not(.tt-listen--shell) .tt-listen__back { display: none; }
	.tt-listen--shell .tt-listen__in { gap: 0 10px; padding-inline: 12px 8px; }
	.tt-listen--shell .tt-listen__text { flex: 1 1 auto; max-width: none; }
	.tt-listen--shell .tt-listen__track { display: none; }
	.tt-listen--shell .tt-listen__meta { font-size: 13px; }
}

/* for editors, before there is audio: the card as it will be, still, with the reason in place of the length */
.tt-listen.is-waiting .tt-listen__in { border-style: dashed; }
.tt-listen.is-waiting .tt-listen__go { text-decoration: none; }
.tt-listen.is-waiting .tt-listen__text { flex: 0 1 auto; }
.tt-listen.is-waiting .tt-listen__meta { font-family: var(--tt-font-ui, Arial, sans-serif); font-size: 13px; white-space: normal; }
.tt-listen.is-waiting .tt-listen__meta b { color: var(--tt-l-a); font-weight: 700; }
.tt-listen.is-waiting .tt-listen__track { flex: 1 0 64px; }

@media (prefers-reduced-motion: reduce) {
	.tt-listen--shell { animation: none; }
}

@media print {
	.tt-listen { display: none; }
}