/* «ویدیوی آموزشی»: the lesson's teaching video on the lesson intro (templates/learn/_lesson_video.html,
   learn/lesson_videos.py, static/js/lesson-video.js). A 16:9 player in a card with our own control bar (media controls are
   not mirrored, so the frame is dir=ltr); the bar fades out while the video plays. Elsewhere logical properties (RTL). */

.lesson-video { display: grid; gap: 10px; padding: 14px; border-radius: var(--r-lg, 20px); background: var(--card);
  box-shadow: inset 0 0 0 1px var(--hair, #d1d1d6), var(--e1, none); }
.lesson-video .lv-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.lesson-video .lv-head h2 { margin: 0; font-size: 1.1rem; }

.lv-frame { position: relative; overflow: hidden; border-radius: 14px; background: #f6f5f1; aspect-ratio: 16 / 9;
  -webkit-tap-highlight-color: transparent; }
.lv-frame .lv-player { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; background: transparent; }
.lv-frame.is-custom .lv-player { cursor: pointer; }
.lv-frame.is-idle, .lv-frame.is-idle .lv-player { cursor: none; }

/* the big play button over the poster */
.lv-big { position: absolute; inset-inline: 0; inset-block-end: 14px; margin-inline: auto; block-size: 56px;
  inline-size: max-content; display: inline-flex; align-items: center; gap: 10px; padding-block: 0;
  padding-inline: 10px 20px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 700;
  color: #fff; background: rgba(20, 20, 32, .78); box-shadow: 0 8px 24px rgba(0, 0, 0, .25); transition: transform .15s ease; }
.lv-big[hidden] { display: none; }
.lv-big:active { transform: scale(.96); }
.lv-big:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; }
.lv-big-i { inline-size: 40px; block-size: 40px; border-radius: 50%; background: var(--indigo, #5b5bd6); display: grid;
  place-items: center; }
/* a play triangle points right in both directions (media controls are not mirrored), so physical sides here */
.lv-big-i::before { content: ""; inline-size: 0; block-size: 0; margin-left: 4px; border-top: 8px solid transparent;
  border-bottom: 8px solid transparent; border-left: 13px solid #fff; }
[dir="rtl"] .lv-big { direction: rtl; }

/* the control bar: a floating dark plate at the bottom, clear of the slide's content */
.lv-ctl { position: absolute; inset-inline: 8px; inset-block-end: 8px; display: flex; align-items: center; gap: 2px;
  padding: 4px 6px; border-radius: 14px; color: #fff; background: rgba(18, 18, 24, .72);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18); transition: opacity .24s cubic-bezier(.22, 1, .36, 1), transform .24s cubic-bezier(.22, 1, .36, 1); }
.lv-ctl[hidden], .lv-frame.is-fresh .lv-ctl { display: none; }
.lv-frame.is-idle .lv-ctl { opacity: 0; transform: translateY(6px); pointer-events: none; }
.lv-c { flex: none; display: grid; place-items: center; min-inline-size: 40px; block-size: 40px; padding: 0 8px; border: 0;
  border-radius: 10px; background: transparent; color: inherit; font: inherit; font-size: .85rem; font-weight: 700;
  cursor: pointer; transition: transform .15s ease, background-color .15s ease; }
.lv-c:hover { background: rgba(255, 255, 255, .12); }
.lv-c:active { transform: scale(.94); }
.lv-c:focus-visible, .lv-seek:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.lv-c svg { inline-size: 22px; block-size: 22px; }
.lv-pp svg { fill: currentColor; }
.lv-pp .i-pause, .lv-frame.is-playing .lv-pp .i-play { display: none; }
.lv-frame.is-playing .lv-pp .i-pause { display: inline; }
.lv-full svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lv-full .i-unfull, .lv-frame.is-full .lv-full .i-full { display: none; }
.lv-frame.is-full .lv-full .i-unfull { display: inline; }
.lv-time { flex: none; padding-inline: 4px 8px; font-size: .8rem; font-variant-numeric: tabular-nums; opacity: .92; white-space: nowrap; }
.lv-time:has(.lv-dur:empty) .lv-sep { display: none; }
.lv-t { font-variant-numeric: tabular-nums; }

/* the seek slider: a thin track that grows under the finger */
.lv-seek { flex: 1 1 auto; min-inline-size: 40px; block-size: 28px; margin: 0 6px; background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none; --p: 0%; }
.lv-seek::-webkit-slider-runnable-track { block-size: 4px; border-radius: 4px;
  background: linear-gradient(to right, #fff var(--p), rgba(255, 255, 255, .3) var(--p)); }
.lv-seek::-moz-range-track { block-size: 4px; border-radius: 4px; background: rgba(255, 255, 255, .3); }
.lv-seek::-moz-range-progress { block-size: 4px; border-radius: 4px; background: #fff; }
.lv-seek::-webkit-slider-thumb { -webkit-appearance: none; inline-size: 14px; block-size: 14px; margin-block-start: -5px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); transition: transform .15s ease; }
.lv-seek::-moz-range-thumb { inline-size: 14px; block-size: 14px; border: 0; border-radius: 50%; background: #fff; }
.lv-seek:active::-webkit-slider-thumb { transform: scale(1.25); }

/* buffering */
.lv-wait { position: absolute; inset: 0; margin: auto; inline-size: 36px; block-size: 36px; border-radius: 50%;
  border: 3px solid rgba(20, 20, 32, .18); border-top-color: var(--indigo, #5b5bd6); opacity: 0; pointer-events: none; }
.lv-frame.is-wait .lv-wait { opacity: 1; animation: lv-spin .8s linear infinite; }
@keyframes lv-spin { to { transform: rotate(1turn); } }

/* full screen: the real one, or the full-window layout (the Android app) */
.lv-frame.is-full { border-radius: 0; background: #000; aspect-ratio: auto; }
.lv-frame.is-window { position: fixed; inset: 0; z-index: 1000; inline-size: 100vw; block-size: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.lv-frame.is-full .lv-ctl { inset-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right));
  inset-block-end: max(12px, env(safe-area-inset-bottom)); }
html.lv-noscroll, html.lv-noscroll body { overflow: hidden; }

/* phones: no time total, tighter bar */
@media (max-width: 420px) {
  .lv-ctl { inset-inline: 6px; inset-block-end: 6px; padding: 2px 4px; }
  .lv-sep, .lv-dur { display: none; }
  .lv-c { min-inline-size: 38px; padding: 0 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .lv-ctl, .lv-c, .lv-big { transition: none; }
  .lv-frame.is-wait .lv-wait { animation-duration: 2s; }
}

/* ---- the video's own watch page (templates/learn/lesson_watch.html, static/js/lesson-watch.js) */
.lesson-watch { max-inline-size: 960px; }
.lw-head { display: grid; gap: 10px; }
.lw-head h1 { margin: 0; display: grid; gap: 4px; font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2rem); line-height: 1.35; }
.lw-head .lw-en { display: block; justify-self: start; font-size: .58em; font-weight: 600; color: var(--ink-2); line-height: 1.4; }
.lw-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lw-tag { display: inline-flex; align-items: center; min-block-size: 28px; padding: 2px 10px; border-radius: 999px;
  font-size: var(--fs-sm, .875rem); font-weight: 600; color: var(--ink-2); background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--hair); }
.lw-tag.en { color: var(--indigo); }
.lesson-video.lv-watch { padding: 8px; }
.lw-about, .lw-outline, .lw-text { display: grid; gap: 8px; }
.lw-about h2, .lw-outline h2, .lw-text h2 { margin: 0; font-size: 1.15rem; }
.lw-about p { margin: 0; line-height: var(--lh-body, 1.9); }
.lw-outline ol { margin: 0; padding-inline-start: 1.4em; display: grid; gap: 4px; line-height: 1.7; }
@media (min-width: 760px) {
  .lw-outline ol { display: block; columns: 2; column-gap: 32px; }
  .lw-outline li { break-inside: avoid; margin-block-end: 4px; }
}
.lw-text > p { max-inline-size: 760px; }  /* a reading line, not the video's width */
.lw-text > p.small { margin: 0; }
.lw-para { margin: 0; padding: 10px 12px; border-radius: 12px; line-height: 2; transition: background-color .2s ease; }
.lw-para .lw-say { display: block; inline-size: fit-content; max-inline-size: 100%; margin-block: 4px; padding: 0 10px; border-radius: 8px;
  font-weight: 600; line-height: 1.8; color: var(--indigo); background: color-mix(in srgb, var(--indigo) 7%, transparent); }
.lw-para.is-now { background: color-mix(in srgb, var(--indigo) 9%, transparent); }
.lw-jump { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 52px; min-block-size: 28px;
  margin-inline-end: 8px; padding: 0 8px; border: 0; border-radius: 999px; font: inherit; font-size: .8rem; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--indigo); background: color-mix(in srgb, var(--indigo) 10%, var(--card));
  vertical-align: 1px; }
.lw-text:not(.is-live) .lw-jump { pointer-events: none; }
.lw-text.is-live .lw-jump { cursor: pointer; }
.lw-text.is-live .lw-jump:hover { background: color-mix(in srgb, var(--indigo) 18%, var(--card)); }
.lw-jump:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.lw-pager { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.lw-pg { display: grid; gap: 2px; padding: 12px 16px; border-radius: 14px; text-decoration: none; color: var(--ink);
  background: var(--card); box-shadow: inset 0 0 0 1px var(--hair); }
.lw-pg small { color: var(--ink-2); }
.lw-pg span { font-weight: 700; }
.lw-next { text-align: end; }
.lw-pg:hover { box-shadow: inset 0 0 0 1px var(--indigo); }
@media (prefers-reduced-motion: reduce) { .lw-para { transition: none; } }