/* The site player (templates/player.php; Figma 14526-2): the docked bar -- what plays, its controls and
   progress, the speed, the transcript and closing -- and a phone's compact bar and full player, in the
   host at the end of <body> (.cil-splayer). Moved here from the podcasts page (2026-10-10) with what the
   page and the player share: the tokens, the button, the progress row, the course box and the motions --
   the page's stylesheets load after this one and build on it (podcasts-page/register.php). Every colour a
   brand token. Its sound is volume.css; what opens over the page is overlays.css. */

/* ---- Shared with the podcasts page ---- */
:is(.cil-pod, .cil-splayer) {
    --pod-ease: cubic-bezier(.4, 0, .2, 1); --pod-out: cubic-bezier(.22, 1, .36, 1);
    /* Forward is the reading direction: left in Hebrew and Arabic, right in English and Russian. */
    --pod-fwd: -1; --pod-start: right;
}
.lang-to-css-ltr :is(.cil-pod, .cil-splayer) { --pod-fwd: 1; --pod-start: left; }
.cil-splayer *, .cil-splayer *::before, .cil-splayer *::after { box-sizing: border-box; }
.cil-splayer :is(p, h2) { margin: 0; }
:is(.cil-pod, .cil-splayer) .cil-pod-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding-inline: 32px;
    border: 1px solid var(--cil-black); border-radius: 24px; background: var(--cil-white);
    color: var(--cil-black); font: inherit; font-size: 16px; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer;
    transition: box-shadow .2s ease, transform .2s var(--pod-ease);
}
:is(.cil-pod, .cil-splayer) .cil-pod-btn--small { height: 44px; }
/* Pointed at, a ring draws round it; the colours stay (pinned against the theme's green). */
:is(.cil-pod, .cil-splayer) .cil-pod-btn:is(:hover, :focus-visible) { color: var(--cil-black); box-shadow: 0 0 0 3px var(--cil-blue-light-5); outline: none; }
:is(.cil-pod, .cil-splayer) .cil-pod-btn--secondary:is(:hover, :focus-visible) { background: var(--cil-white); }
:is(.cil-pod, .cil-splayer) .cil-pod-btn:active { transform: scale(.98); }
:is(.cil-pod, .cil-splayer) .cil-pod-btn[hidden] { display: none; }
.cil-pod-progress { display: flex; align-items: center; gap: 10px; color: var(--cil-black-regular-7); font-size: 14px; font-variant-numeric: tabular-nums; }
.cil-pod-progress[hidden] { display: none; }
/* "הפרק מבוסס על הקורס" (Figma 14526-2, "Course link"): a row's details and the phone's full player. */
:is(.cil-pod, .cil-splayer) .cil-pod-course { display: flex; align-items: center; gap: 12px; min-width: 295px; max-width: 100%; padding: 14px 16px; border-radius: 12px; background: var(--cil-blue-light-1); color: var(--cil-black); text-decoration: none; transition: box-shadow .2s ease; }
:is(.cil-pod, .cil-splayer) .cil-pod-course:is(:hover, :focus-visible) { color: var(--cil-black); box-shadow: inset 0 0 0 1px var(--cil-blue-dark-1); outline: none; }
.cil-pod-course__tile { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--cil-white); }
.cil-pod-course__words { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cil-pod-course__eyebrow, .cil-pod-course__institution { color: var(--cil-black-regular-7); font-size: 14px; }
.cil-pod-course__institution { color: var(--cil-black-regular-6); }
.cil-pod-course__name { font-size: 16px; font-weight: 700; }
.cil-pod-course__go { flex: none; display: inline-flex; align-items: center; gap: 4px; color: var(--cil-blue-dark-1); font-size: 14px; font-weight: 600; }
.cil-pod-course__go img { transition: transform .25s var(--pod-ease); }
:is(.cil-pod, .cil-splayer) .cil-pod-course:is(:hover, :focus-visible) .cil-pod-course__go img { transform: translateX(-3px); }
.lang-to-css-ltr .cil-pod-course__go img { transform: scaleX(-1); }
.lang-to-css-ltr :is(.cil-pod, .cil-splayer) .cil-pod-course:is(:hover, :focus-visible) .cil-pod-course__go img { transform: scaleX(-1) translateX(-3px); }
@keyframes cil-pod-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes cil-pod-spin { to { transform: rotate(360deg); } }
@keyframes cil-pod-sheet { from { transform: translateY(100%); } }
@keyframes cil-pod-pop { from { opacity: 0; transform: translateY(-4px); } }

/* ---- The page under the docked bar ---- */
/* Room at the foot of every page for the bar, so it never covers the footer (its height, set by ui.js);
   the back-to-top button, the Ezra card on a phone and the site's toast ride above it. The back-to-top's
   own lift stays a plain length (ui.js adds the bar's height to it): back-to-top.js reads it as a number
   to keep clear of the footer's last rows. */
body.cil-splayer-on { padding-bottom: var(--cil-splayer-space, 105px); }
body.cil-splayer-on .cil-btt { --cil-btt-lift: var(--cil-splayer-btt-lift, 137px); }
@media (max-width: 560px) { body.cil-splayer-on .cil-ezra-promo { bottom: calc(16px + var(--cil-splayer-space, 68px)); } }
body.cil-splayer-on .cil-toast { bottom: calc(32px + var(--cil-splayer-space, 105px)); }

/* ---- The docked player ---- */
/* Above the page's own layers, under its sheets and menus (the catalogue's filter sheet is 1000). */
.cil-pod-player {
    position: fixed; z-index: 950; inset-inline: 0; bottom: 0; background: var(--cil-white); color: var(--cil-black);
    box-shadow: 0 -4px 12px color-mix(in srgb, var(--cil-black) 12%, transparent);
    animation: cil-pod-dock .4s var(--pod-ease);
}
.cil-pod-player[hidden] { display: none; }
@keyframes cil-pod-dock { from { transform: translateY(100%); } }
.cil-pod-player__line { display: none; }
/* Its content 1340px wide at most (Figma: 290px either side of 1920). */
.cil-pod-player__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1388px; margin-inline: auto; padding: 12px 24px; }
.cil-splayer .cil-pod-player__now { flex: 1 1 0; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 0; border: 0; background: none; color: var(--cil-black); font: inherit; text-align: start; cursor: default; }
.cil-splayer .cil-pod-player__now:is(:hover, :focus-visible) { background: none; color: var(--cil-black); }
.cil-pod-player__cover { flex: none; width: 56px; height: 56px; border-radius: 8px; object-fit: cover; }
.cil-pod-player__words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cil-pod-player__title { overflow: hidden; font-size: 16px; font-weight: 700; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.cil-pod-player__show { color: var(--cil-black-regular-7); font-size: 14px; line-height: 1.3; }
.cil-pod-player__times { display: none; color: var(--cil-black-regular-7); font-size: 14px; font-variant-numeric: tabular-nums; }
/* The design's red (--cil-red) is 3.6:1 on white; this darker step keeps small words readable (4.5:1+). */
.cil-pod-player__error { display: none; color: var(--cil-red-regular-5); font-size: 14px; }
/* Waiting to pick up where it was (a new page the browser would not start by itself): says from where. */
.cil-pod-player__resume { display: none; color: var(--cil-blue-dark-1); font-size: 14px; font-weight: 600; line-height: 1.3; }
.cil-splayer.is-resume .cil-pod-player__resume { display: block; }
.cil-splayer.is-resume :is(.cil-pod-player__show, .cil-pod-player__times) { display: none; }
.cil-pod-player__playback { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cil-pod-player__actions { flex: 1 1 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
/* Its red hover, shared with every × the player opens, is overlays.css (.cil-pod-close). */
.cil-splayer .cil-pod-player__close { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.cil-splayer .cil-pod-pill {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding-inline: 12px; border: 0; border-radius: 20px;
    background: color-mix(in srgb, var(--cil-black-light-2) 50%, var(--cil-white)); color: var(--cil-black); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
    transition: box-shadow .2s ease;
}
.cil-splayer .cil-pod-pill[hidden] { display: none; }
.cil-splayer .cil-pod-pill:is(:hover, :focus-visible) { color: var(--cil-black); background: color-mix(in srgb, var(--cil-black-light-2) 50%, var(--cil-white)); box-shadow: inset 0 0 0 1px var(--cil-blue-dark-1); outline: none; }
.cil-splayer .cil-pod-pill--round { width: 40px; height: 40px; padding: 0; border: 1px solid var(--cil-black-light-6); border-radius: 50%; background: var(--cil-white); }
.cil-splayer .cil-pod-pill--round:is(:hover, :focus-visible) { background: var(--cil-white); }

/* Back, play or pause, forward (Figma "Playback · LTR") in the page's direction, the way the bar fills
   (Oren, 2026-10-10): in Hebrew and Arabic back is on the right, and both arrows are mirrored so back's
   points right, towards the start, and forward's left, towards the end -- as on the course page's player. */
.cil-pod-controls { display: flex; align-items: center; gap: 20px; }
.cil-pod-controls__skip img { transform: scaleX(var(--pod-mirror, -1)); }
.lang-to-css-ltr .cil-pod-controls__skip img { --pod-mirror: 1; }
.cil-splayer .cil-pod-controls__skip { display: flex; flex-direction: column; align-items: center; padding: 0; border: 0; background: none; color: var(--cil-black); font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer; transition: transform .2s var(--pod-ease); }
.cil-splayer .cil-pod-controls__skip:is(:hover, :focus-visible) { color: var(--cil-black); background: none; transform: scale(1.08); outline: none; }
.cil-splayer .cil-pod-controls__skip:focus-visible img { outline: 2px solid var(--cil-blue-dark-1); outline-offset: 2px; border-radius: 50%; }
.cil-splayer .cil-pod-controls__toggle { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--cil-blue-dark-1); cursor: pointer; transition: transform .2s var(--pod-ease), box-shadow .2s ease; }
.cil-splayer .cil-pod-controls__toggle:is(:hover, :focus-visible) { background: var(--cil-blue-dark-1); box-shadow: 0 0 0 4px var(--cil-blue-light-3); outline: none; }
.cil-splayer .cil-pod-controls__toggle:active { transform: scale(.94); }
.cil-pod-controls__icon { grid-area: 1 / 1; }
.cil-pod-controls__icon--play, .cil-splayer.is-paused .cil-pod-controls__icon--pause { display: none; }
.cil-splayer.is-paused .cil-pod-controls__icon--play { display: block; }
.cil-splayer.is-loading-audio .cil-pod-controls__toggle { animation: cil-pod-breathe 1.2s ease-in-out infinite; }
/* Waiting to pick up: play pulses, rings going out from it -- press here to go on. */
.cil-splayer.is-resume .cil-pod-controls__toggle { animation: cil-splayer-call 1.6s var(--pod-out) infinite; }
@keyframes cil-splayer-call { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cil-blue-dark-1) 55%, transparent); } 100% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--cil-blue-dark-1) 0%, transparent); } }
/* The docked bar shows a turning spinner instead (Figma "Loading audio"); the full player keeps the breathing. */
.cil-pod-controls__icon--loading { display: none; }
.cil-pod-controls__icon--loading img { display: block; width: 100%; height: 100%; }
.cil-splayer.is-loading-audio .cil-pod-player .cil-pod-controls__toggle { background: none; animation: none; }
.cil-splayer.is-loading-audio .cil-pod-player :is(.cil-pod-controls__icon--pause, .cil-pod-controls__icon--play) { display: none; }
.cil-splayer.is-loading-audio .cil-pod-player .cil-pod-controls__icon--loading { display: block; width: 44px; height: 44px; animation: cil-pod-spin 1s linear infinite; }
@keyframes cil-pod-breathe { 50% { box-shadow: 0 0 0 6px var(--cil-blue-light-3); } }
/* The full player's (Figma 14548:10350): 28px arrows over a plain 12px "15", a 64px play/pause with a 26px mark. */
.cil-pod-controls--big { gap: 36px; justify-content: center; }
.cil-splayer .cil-pod-controls--big .cil-pod-controls__skip { font-size: 12px; font-weight: 400; }
.cil-pod-controls--big .cil-pod-controls__skip img { width: 28px; height: 28px; }
.cil-splayer .cil-pod-controls--big .cil-pod-controls__toggle { width: 64px; height: 64px; }
.cil-pod-controls--big .cil-pod-controls__icon { width: 26px; height: 26px; }

/* The progress as a slider: its fill is how far along (--p, set by ui.js), from the reading start --
   right to left in Hebrew and Arabic, where the slider runs the same way (it takes the page's direction:
   its thumb starts on the right). The level (volume.css) is the same slider. */
.cil-pod-player .cil-pod-progress, .cil-pod-full .cil-pod-progress { gap: 10px; }
.cil-pod-progress__range {
    --p: 0%; --pod-fill-to: to left; width: 420px; max-width: 100%; height: 16px; margin: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.lang-to-css-ltr .cil-pod-progress__range { --pod-fill-to: to right; }
.cil-pod-progress__range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(var(--pod-fill-to), var(--cil-blue-dark-1) var(--p), var(--cil-black-light-3) var(--p)); }
.cil-pod-progress__range::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(var(--pod-fill-to), var(--cil-blue-dark-1) var(--p), var(--cil-black-light-3) var(--p)); }
.cil-pod-progress__range::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -4px; border: 0; border-radius: 50%; background: var(--cil-blue-dark-1); opacity: 0; transition: opacity .2s ease; -webkit-appearance: none; }
.cil-pod-progress__range::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--cil-blue-dark-1); opacity: 0; transition: opacity .2s ease; }
.cil-pod-progress__range:is(:hover, :focus-visible)::-webkit-slider-thumb { opacity: 1; }
.cil-pod-progress__range:is(:hover, :focus-visible)::-moz-range-thumb { opacity: 1; }
.cil-pod-progress__range:focus-visible { outline: 2px solid var(--cil-blue-dark-1); outline-offset: 4px; border-radius: 4px; }

/* A file that would not play, in the controls' place (Figma "Playback error"). */
.cil-pod-failed { display: flex; align-items: center; gap: 14px; }
.cil-pod-failed[hidden] { display: none; }
.cil-pod-failed__words { display: flex; flex-direction: column; gap: 2px; }
.cil-pod-failed__words strong { color: var(--cil-black); font-size: 18px; }
.cil-pod-failed__words span { color: var(--cil-black-regular-7); font-size: 14px; }
.cil-splayer .cil-pod-failed .cil-pod-btn { flex: none; height: 40px; white-space: nowrap; }
/* In the phone's full player (no Figma row of its own) the words take the width and "ניסיון נוסף" goes
   under them, centred, rather than breaking onto two lines. */
.cil-pod-full .cil-pod-failed { flex-wrap: wrap; justify-content: center; row-gap: 12px; }
.cil-pod-full .cil-pod-failed__words { flex: 1 1 200px; }
.cil-splayer.is-failed .cil-pod-player__playback > .cil-pod-controls,
.cil-splayer.is-failed .cil-pod-player__playback > .cil-pod-progress,
.cil-splayer.is-failed .cil-pod-full > .cil-pod-controls { display: none; }

/* ---- A phone's full player ---- */
/* Figma 14548:10335: 18px between its parts; swiped down or the caret lowers it (ui.js). */
.cil-pod-full { width: 100%; max-width: 100%; max-height: 94vh; margin: auto 0 0; padding: 12px 20px 28px; border: 0; border-radius: 24px 24px 0 0; background: var(--cil-white); color: var(--cil-black); }
.cil-pod-full[open] { display: flex; flex-direction: column; gap: 18px; animation: cil-pod-sheet .35s var(--pod-ease); }
.cil-pod-full.is-dragging { transition: none; }
.cil-pod-full.is-settling { transition: transform .25s var(--pod-ease); }
.cil-pod-full::backdrop { background: color-mix(in srgb, var(--cil-black) 45%, transparent); }
.cil-pod-full__grab { align-self: center; width: 40px; height: 4px; border-radius: 2px; background: var(--cil-black-light-4); }
.cil-pod-full__head { display: flex; align-items: center; justify-content: space-between; }
.cil-pod-full__eyebrow { color: var(--cil-black-regular-6); font-size: 12px; font-weight: 600; }
/* Lowering is not closing: no red; its hover (the caret dipping) is overlays.css. */
.cil-splayer .cil-pod-full__minimise { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--cil-black-light-3); border-radius: 50%; background: var(--cil-white); cursor: pointer; }
.cil-pod-full__cover { align-self: center; width: min(300px, 80vw); height: auto; aspect-ratio: 1; border-radius: 16px; object-fit: cover; }
.cil-pod-full__title { font-size: 20px; font-weight: 700; line-height: 1.2; text-align: center; }
.cil-pod-full__show { color: var(--cil-black-regular-6); font-size: 12px; text-align: center; }
.cil-pod-full .cil-pod-progress { justify-content: center; font-size: 12px; }
.cil-pod-full .cil-pod-progress__range { flex: none; width: 250px; }
.cil-pod-full__actions { display: flex; align-items: center; justify-content: center; gap: 10px; }
.cil-splayer .cil-pod-full__actions [data-pod-share-now] { border-color: var(--cil-black-light-3); }
.cil-pod-full__actions [data-pod-share-now] img { width: 20px; height: 20px; }
.cil-splayer .cil-pod-full__actions [data-pod-speed] { width: auto; height: auto; padding: 8px 14px; border: 1px solid var(--cil-black-light-3); border-radius: 20px; background: var(--cil-white); font-size: 12px; }
.cil-splayer .cil-pod-full__actions .cil-pod-btn { height: 40px; padding-inline: 20px; font-size: 14px; }
.cil-pod-full__actions .cil-pod-btn img { width: 16px; height: 16px; }
/* The course it is based on, at the phone's size (Figma 14548:10372). */
.cil-splayer .cil-pod-full .cil-pod-course { gap: 12px; min-width: 0; padding: 12px; }
.cil-pod-full .cil-pod-course__tile { width: 36px; height: 36px; }
.cil-pod-full .cil-pod-course__tile img { width: 18px; height: 18px; }
.cil-pod-full :is(.cil-pod-course__eyebrow, .cil-pod-course__institution, .cil-pod-course__go) { font-size: 12px; }
.cil-pod-full .cil-pod-course__name { font-size: 14px; }
.cil-pod-full .cil-pod-course__go img { width: 14px; height: 14px; }

/* A tablet's docked bar: a shorter progress, so what plays and the actions keep room either side of it
   (at 768 the 420px slider left the title no width at all and the times ran under the picture). */
@media (min-width: 641px) and (max-width: 1079px) {
    .cil-splayer .cil-pod-player .cil-pod-progress__range { width: 260px; }
}

@media (max-width: 640px) {
    /* The compact bar: its progress as a line along its top, the picture and words, pause, close. */
    .cil-pod-player__line { display: block; height: 4px; background: var(--cil-black-light-3); }
    .cil-pod-player__lineFill { display: block; width: var(--p, 0%); height: 100%; border-radius: 2px; background: var(--cil-blue-dark-1); }
    /* Figma 14548:9846: 16px on the picture's side, 12px on the close side, 10px above and below. */
    .cil-pod-player__inner { gap: 12px; padding-block: 10px; padding-inline: 16px 12px; }
    .cil-splayer .cil-pod-player__now { cursor: pointer; }
    .cil-pod-player__cover { width: 44px; height: 44px; border-radius: 6px; }
    .cil-pod-player__words { gap: 0; }
    .cil-pod-player__title { font-size: 14px; font-weight: 600; }
    .cil-pod-player__show { display: none; }
    .cil-pod-player__times { display: block; }
    .cil-pod-player__resume { font-size: 12px; }
    .cil-pod-player__actions { flex: none; }
    .cil-splayer .cil-pod-player__close { width: 36px; height: 36px; }
    .cil-splayer .cil-pod-player__close .cil-pod-close__cross { width: 18px; height: 18px; }
    .cil-splayer .cil-pod-player .cil-pod-controls__toggle { width: 40px; height: 40px; }
    .cil-pod-player .cil-pod-controls__icon:not(.cil-pod-controls__icon--loading) { width: 16px; height: 16px; }
    .cil-splayer.is-loading-audio .cil-pod-player .cil-pod-controls__icon--loading { width: 40px; height: 40px; }
    .cil-pod-player__actions .cil-pod-pill, .cil-pod-player__playback .cil-pod-controls__skip, .cil-pod-player__playback .cil-pod-progress, .cil-pod-player__playback .cil-pod-failed__words, .cil-pod-player__playback .cil-pod-failed > img { display: none; }
    /* A failed file (Figma 14548:11500): a round outlined retry in pause's place, and the words under the title. */
    .cil-splayer .cil-pod-player__playback .cil-pod-failed .cil-pod-btn { width: 40px; height: 40px; padding: 0; gap: 0; border-color: var(--cil-blue-dark-1); border-radius: 50%; font-size: 0; }
    .cil-pod-player__playback .cil-pod-failed__arrow { display: none; }
    .cil-pod-player__playback .cil-pod-failed__arrow--round { display: block; }
    .cil-splayer.is-failed .cil-pod-player__times { display: none; }
    .cil-splayer.is-failed .cil-pod-player__error { display: block; }
}

@media (prefers-reduced-motion: reduce) {
    .cil-pod-player, .cil-pod-full[open], .cil-splayer.is-loading-audio .cil-pod-controls__toggle, .cil-splayer.is-resume .cil-pod-controls__toggle { animation: none; }
    /* Still waiting to pick up: a steady ring instead of the rings going out. */
    .cil-splayer.is-resume .cil-pod-controls__toggle { box-shadow: 0 0 0 4px var(--cil-blue-light-3); }
    .cil-splayer.is-loading-audio .cil-pod-player .cil-pod-controls__icon--loading { animation-duration: 3s; }
    .cil-splayer .cil-pod-controls__skip, .cil-splayer .cil-pod-controls__toggle, .cil-splayer .cil-pod-pill, .cil-pod-progress__range::-webkit-slider-thumb,
    :is(.cil-pod, .cil-splayer) .cil-pod-btn, :is(.cil-pod, .cil-splayer) .cil-pod-course, .cil-pod-course__go img { transition: none; }
}