/* What the site player opens over the page (templates/overlays.php; Figma 14526-2): the share menu -- a
   phone's sheet -- the transcript and the "copied" note, and the hovers of the player's own buttons. The
   menu and the red × are shared with the podcasts page's order menu, so they are written for both. Loaded
   after player.css and volume.css. */

/* ---- Menus: the page's order and sharing ---- */
.cil-pod-menu {
    display: flex; flex-direction: column; gap: 2px; padding: 8px; border: 1px solid var(--cil-black-light-3); border-radius: 12px; background: var(--cil-white);
    box-shadow: 0 8px 12px color-mix(in srgb, var(--cil-black) 14%, transparent), 0 1px 1.5px color-mix(in srgb, var(--cil-black) 8%, transparent);
    animation: cil-pod-pop .2s var(--pod-ease); list-style: none; margin: 0;
}
.cil-pod-menu[hidden] { display: none; }
:is(.cil-pod, .cil-splayer) .cil-pod-menu__item {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 0; border-radius: 8px; background: none;
    color: var(--cil-black); font: inherit; font-size: 16px; line-height: 1.2; text-align: start; text-decoration: none; cursor: pointer;
}
:is(.cil-pod, .cil-splayer) .cil-pod-menu__item > span { flex: 1; }
:is(.cil-pod, .cil-splayer) .cil-pod-menu__item:is(:hover, :focus-visible) { background: var(--cil-blue-light-1); color: var(--cil-black); outline: none; }
:is(.cil-pod, .cil-splayer) .cil-pod-menu__item:focus-visible { box-shadow: inset 0 0 0 2px var(--cil-blue-dark-1); }
.cil-pod-menu__check { visibility: hidden; }
:is(.cil-pod, .cil-splayer) .cil-pod-menu__item[aria-selected="true"] { background: var(--cil-blue-light-1); color: var(--cil-blue-dark-1); }
.cil-pod-menu__item[aria-selected="true"] .cil-pod-menu__check { visibility: visible; }
/* Above the docked bar (950). */
.cil-pod-share { position: fixed; z-index: 960; width: 260px; }
.cil-pod-share__head { display: flex; align-items: center; padding: 6px 14px; }
.cil-pod-share__title { color: var(--cil-black-regular-7); font-size: 14px; font-weight: 700; }
/* The phone's sheet parts (the end of this file); a menu has none of them. */
.cil-pod-share__grab, .cil-pod-share__close, .cil-pod-share__backdrop { display: none; }

/* ---- The transcript ---- */
/* A panel, not a modal (Oren, 2026-10-10): the page beside it and the docked bar under it stay in use. Full
   height between the site's header (fixed, 100000) and the docked bar, at the reading end -- the left in
   Hebrew and Arabic, the right in English and Russian; over the back-to-top (9000), under the header's
   menus and the page's sheets (9100). Slides in from its own side (--pod-fwd: -1 right-to-left, 1 left-to-right). */
.cil-pod-reading {
    --pod-bar: 0px;
    position: fixed; z-index: 9050; top: var(--cil-hdr-height, 64px); bottom: var(--pod-bar); inset-inline-end: 0;
    display: flex; flex-direction: column; width: min(440px, 100%); margin: 0; padding: 0;
    border: 0; border-inline-start: 1px solid var(--cil-black-light-3); background: var(--cil-white); color: var(--cil-black);
    box-shadow: 0 0 24px color-mix(in srgb, var(--cil-black) 14%, transparent);
    animation: cil-pod-panel .3s var(--pod-ease);
}
.cil-pod-reading[hidden] { display: none; }
.cil-pod-reading:focus { outline: none; }
body.cil-splayer-on .cil-pod-reading { --pod-bar: var(--cil-splayer-space, 105px); }
@keyframes cil-pod-panel { from { opacity: 0; transform: translateX(calc(var(--pod-fwd) * 24px)); } }
.cil-pod-reading__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 24px 16px; border-bottom: 1px solid var(--cil-black-light-3); }
.cil-pod-reading__title { display: flex; flex-direction: column; gap: 4px; color: var(--cil-black); font-size: 22px; font-weight: 700; line-height: 1.2; }
.cil-pod-reading__eyebrow { color: var(--cil-black-regular-7); font-size: 14px; font-weight: 600; }
.cil-splayer .cil-pod-reading__close { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.cil-pod-reading__body { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px 24px 28px; font-size: 16px; line-height: 1.6; }
.cil-pod-reading__body > :first-child { margin-top: 0; }
.cil-pod-reading__heading { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cil-pod-reading__timed { color: var(--cil-black-regular-7); font-size: 14px; line-height: 1.3; }
.cil-pod-reading__timed[hidden] { display: none; }
/* Timed (transcript-follow.js): a sentence a row, its time first. The one playing is marked by a bar at
   the reading start and a pale ground, its time in bold -- not by colour alone. */
.cil-pod-cues { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.cil-splayer .cil-pod-cues > li { padding: 0; }
.cil-splayer .cil-pod-cue {
    display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; width: 100%; padding: 8px 12px;
    border: 0; border-inline-start: 3px solid transparent; border-start-end-radius: 8px; border-end-end-radius: 8px; background: none;
    color: var(--cil-black); font: inherit; font-size: 16px; line-height: 1.6; text-align: start; cursor: pointer;
    transition: background-color .25s ease, border-color .25s ease;
}
.cil-splayer .cil-pod-cue:is(:hover, :focus-visible) { background: none; color: var(--cil-black); outline: none; }
.cil-splayer .cil-pod-cue:focus-visible { box-shadow: inset 0 0 0 2px var(--cil-blue-dark-1); }
.cil-splayer .cil-pod-cue[aria-current="true"] { border-inline-start-color: var(--cil-blue-dark-1); background: var(--cil-blue-light-1); }
.cil-pod-cue__time { position: relative; justify-self: start; padding-top: 2px; color: var(--cil-black-regular-6); font-size: 13px; font-variant-numeric: tabular-nums; }
.cil-pod-cue[aria-current="true"] .cil-pod-cue__time { color: var(--cil-blue-dark-1); font-weight: 700; }
/* Following stopped by hand: the way back floats over the transcript's foot, which makes room for it. */
.cil-pod-reading:has(.cil-pod-reading__resume:not([hidden])) .cil-pod-reading__body { padding-bottom: 76px; }
.cil-splayer .cil-pod-reading__resume {
    position: absolute; bottom: 20px; inset-inline: 0; width: max-content; max-width: calc(100% - 32px); height: 40px; margin-inline: auto; padding-inline: 20px; font-size: 14px;
    box-shadow: 0 8px 12px color-mix(in srgb, var(--cil-black) 14%, transparent), 0 1px 1.5px color-mix(in srgb, var(--cil-black) 8%, transparent);
    animation: cil-pod-rise .25s var(--pod-ease);
}

/* ---- "The link was copied" ---- */
.cil-pod-toast {
    position: fixed; z-index: 960; inset-inline: 0; bottom: 40px; display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100% - 32px);
    margin-inline: auto; padding: 14px 20px; border: 1px solid var(--cil-black-light-3); border-radius: 12px; background: var(--cil-white);
    box-shadow: 0 8px 12px color-mix(in srgb, var(--cil-black) 14%, transparent), 0 1px 1.5px color-mix(in srgb, var(--cil-black) 8%, transparent);
    color: var(--cil-black); font-size: 16px; font-weight: 600;
    animation: cil-pod-rise .3s var(--pod-ease);
}
.cil-pod-toast[hidden] { display: none; }
/* 40px from the window's foot (Figma "Link copied"), or above the docked player while it shows. */
body.cil-splayer-on .cil-pod-toast { bottom: calc(32px + var(--cil-splayer-space, 105px)); }

/* ---- Hovers (moved from the podcasts page's hovers.css with the player) ---- */
/* Every × (the player's, the transcript's, the share and order sheets'): closing turns red and the cross a
   quarter turn, as the house's other close buttons do (media-picker.css, component-picker.css, the course
   page's biography). The cross is a mask in the text colour so it can turn white. */
:is(.cil-pod, .cil-splayer) .cil-pod-close {
    color: var(--cil-black);
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.cil-pod-close__cross {
    display: block; width: 20px; height: 20px; background: currentColor;
    -webkit-mask: url("../../../images/podcasts-page/close.svg") center / contain no-repeat; mask: url("../../../images/podcasts-page/close.svg") center / contain no-repeat;
    transition: transform .3s var(--pod-out);
}
:is(.cil-pod, .cil-splayer) .cil-pod-close:is(:hover, :focus-visible) { border-color: var(--cil-red); background: var(--cil-red); color: var(--cil-white); outline: none; }
:is(.cil-pod, .cil-splayer) .cil-pod-close:is(:hover, :focus-visible) .cil-pod-close__cross { transform: rotate(90deg); }
:is(.cil-pod, .cil-splayer) .cil-pod-close:focus-visible { outline: 2px solid var(--cil-red-regular-5); outline-offset: 2px; }
/* Lowering the phone's full player: the caret dips the way the sheet will go. */
.cil-splayer .cil-pod-full__minimise img { transition: transform .3s var(--pod-out); }
.cil-splayer .cil-pod-full__minimise:is(:hover, :focus-visible) { background: var(--cil-white); }
.cil-splayer .cil-pod-full__minimise:is(:hover, :focus-visible) img { transform: translateY(3px); }
.cil-splayer .cil-pod-full__minimise:focus-visible { outline: 2px solid var(--cil-blue-dark-1); outline-offset: 2px; }
/* "ניסיון נוסף" (the player's and the page's): loading afresh -- the circling arrow goes once round. */
:is(.cil-pod, .cil-splayer) .cil-pod-btn--retry:is(:hover, :focus-visible) { box-shadow: none; }
:is(.cil-pod, .cil-splayer) .cil-pod-btn--retry:focus-visible { outline: 2px solid var(--cil-blue-dark-1); outline-offset: 3px; }
:is(.cil-pod, .cil-splayer) .cil-pod-btn--retry img { transition: transform .6s var(--pod-out); }
:is(.cil-pod, .cil-splayer) .cil-pod-btn--retry:is(:hover, :focus-visible) img { transform: rotate(360deg); }
/* The transcript's "חזרה למיקום הנוכחי": an underline written from where reading starts; it keeps its floating shadow. */
.cil-splayer .cil-pod-reading__resume .cil-pod-btn__label { position: relative; }
.cil-splayer .cil-pod-reading__resume .cil-pod-btn__label::after {
    content: ""; position: absolute; inset-inline: 0; bottom: -3px; height: 2px; border-radius: 1px; background: currentColor;
    transform: scaleX(0); transform-origin: var(--pod-start) center; transition: transform .35s var(--pod-out);
}
.cil-splayer .cil-pod-btn.cil-pod-reading__resume:is(:hover, :focus-visible) { box-shadow: 0 8px 12px color-mix(in srgb, var(--cil-black) 14%, transparent), 0 1px 1.5px color-mix(in srgb, var(--cil-black) 8%, transparent); }
.cil-splayer .cil-pod-reading__resume:is(:hover, :focus-visible) .cil-pod-btn__label::after { transform: scaleX(1); }
.cil-splayer .cil-pod-reading__resume:focus-visible { outline: 2px solid var(--cil-blue-dark-1); outline-offset: 3px; }
/* A transcript's sentence: its time is underlined from where reading starts -- press to play from here. */
.cil-pod-cue__time::after {
    content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px; border-radius: 1px; background: currentColor;
    transform: scaleX(0); transform-origin: var(--pod-start) center; transition: transform .3s var(--pod-out);
}
.cil-splayer .cil-pod-cue:is(:hover, :focus-visible) .cil-pod-cue__time::after { transform: scaleX(1); }

@media (max-width: 640px) {
    /* Sharing as a sheet from the bottom over a shade, above the site's header and back-to-top (Figma 14548:13831). */
    .cil-pod-share__backdrop:not([hidden]) { display: block; position: fixed; z-index: 9100; inset: 0; background: color-mix(in srgb, var(--cil-black) 60%, transparent); }
    .cil-splayer .cil-pod-share { z-index: 9101; inset-inline: 0 !important; top: auto !important; bottom: 0; width: 100%; gap: 8px; padding: 12px 16px 28px; border: 0; border-radius: 24px 24px 0 0; box-shadow: none; animation: cil-pod-sheet .35s var(--pod-ease); }
    .cil-pod-share__grab { display: block; align-self: center; width: 40px; height: 4px; border-radius: 2px; background: var(--cil-black-light-4); }
    .cil-pod-share__head { justify-content: space-between; padding: 4px 0 8px; }
    .cil-pod-share__title { color: var(--cil-black); font-size: 16px; }
    .cil-splayer .cil-pod-share__close { 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-splayer .cil-pod-share .cil-pod-menu__item { padding: 14px 16px; font-size: 14px; }
    .cil-pod-toast { bottom: 24px; padding: 12px 16px; font-size: 14px; }
    body.cil-splayer-on .cil-pod-toast { bottom: calc(20px + var(--cil-splayer-space, 68px)); }
    /* The transcript as a sheet resting on the docked bar, never over it; at most 60% of the window, so the
       page above it stays in sight and in reach. */
    .cil-pod-reading {
        top: auto; inset-inline: 0; width: 100%; max-height: min(60dvh, calc(100dvh - var(--cil-hdr-height, 62px) - var(--pod-bar) - 16px));
        border-inline-start: 0; border-radius: 20px 20px 0 0; animation: cil-pod-sheet .35s var(--pod-ease);
    }
    body.cil-splayer-on .cil-pod-reading { --pod-bar: var(--cil-splayer-space, 68px); }
    .cil-pod-reading__head { padding: 20px 16px 12px; }
    .cil-pod-reading__title { font-size: 18px; }
    .cil-pod-reading__body { padding: 12px 8px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .cil-pod-menu, .cil-pod-reading, .cil-pod-toast, .cil-splayer .cil-pod-reading__resume { animation: none; }
    .cil-pod-close__cross, .cil-splayer .cil-pod-full__minimise img, .cil-pod-cue__time::after, .cil-splayer .cil-pod-cue { transition: none; }
    :is(.cil-pod, .cil-splayer) .cil-pod-close:is(:hover, :focus-visible) .cil-pod-close__cross { transform: none; }
    :is(.cil-pod, .cil-splayer) .cil-pod-btn--retry img { transition: opacity .2s ease; }
    :is(.cil-pod, .cil-splayer) .cil-pod-btn--retry:is(:hover, :focus-visible) img { transform: none; }
}