/* Shiur — a calm, dark frame around the videos. One accent (the kino vermilion), no glass, no glow. */
:root {
  --bg: #0c0c0d;
  --panel: #18181a;
  --line: #2a2a2d;
  --ink: #f2efe8;
  --muted: #a19d94;
  --accent: #e2522d;
  --ok: #3aa86b;
  --no: #e05247;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); overflow: hidden;
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, "Heebo", sans-serif; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
[dir="rtl"] { font-family: "Heebo", system-ui, sans-serif; }

.loading, .empty { display: grid; place-items: center; height: 100dvh; color: var(--muted); padding: 24px; text-align: center; }

.top { position: fixed; z-index: 5; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center;
  padding: max(10px, env(safe-area-inset-top)) 14px 10px; pointer-events: none; }
.top > * { pointer-events: auto; }
.sound { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 99px; background: rgba(12,12,13,.82); border: 1px solid var(--line); font-weight: 700; font-size: 14px; }
.icon { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--line); }

.feed { height: 100dvh; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.feed::-webkit-scrollbar { display: none; }
.slot { height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always; display: grid; place-items: center; }

.item { position: relative; display: flex; align-items: center; justify-content: center; }
.stage { position: relative; background: #000; overflow: hidden; }
@media (min-width: 701px) { .stage { border-radius: 14px; } }
.poster { position: absolute; inset: 0; background: #1a1a1c; }
.paused { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.paused svg { width: 84px; height: 84px; padding: 20px; border-radius: 50%; background: rgba(12,12,13,.72); }

.meta { position: absolute; left: 0; right: 76px; bottom: 0; padding: 0 16px 30px; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0)); }
.meta[dir="rtl"] { right: 0; left: 76px; }
@media (min-width: 701px) { .meta, .meta[dir="rtl"] { right: 0; left: 0; } }
.meta h2 { margin: 6px 0 2px; font-size: 18px; font-weight: 750; line-height: 1.2; }
.from { margin: 0; font-size: 13px; color: #d6d2c9; }
.chip { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: var(--accent); color: #fff; }
.scrub { position: absolute; left: 0; right: 0; bottom: 0; height: 26px; display: flex; align-items: flex-end; cursor: pointer; touch-action: none; z-index: 2; }
.scrub .track { position: relative; width: 100%; height: 4px; background: rgba(255,255,255,.22); transition: none; }
.scrub:hover .track, .scrub.drag .track { height: 8px; }
.scrub .fill { height: 100%; background: var(--ink); }
.scrub .knob { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--ink); opacity: 0; }
.scrub:hover .knob, .scrub.drag .knob { opacity: 1; }
.scrub .time { position: absolute; bottom: 20px; translate: -50% 0; padding: 4px 8px; border-radius: 8px; background: rgba(12,12,13,.85); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }

.rail { position: absolute; right: 8px; top: 17%; display: flex; flex-direction: column; gap: 12px; }
.rail.rtl { right: auto; left: 8px; }  /* Hebrew text is right-aligned: mirror the rail like RTL Shorts */
@media (min-width: 701px) { .rail { position: static; margin-left: 18px; align-self: flex-end; margin-bottom: 40px; } }
.side { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 56px; }
.disc { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(24,24,26,.86); border: 1px solid var(--line); }
.side.on .disc { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.lbl { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 99px; background: rgba(12,12,13,.78); }

.start { position: fixed; inset: 0; z-index: 8; display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center;
  background: rgba(12,12,13,.55); font-weight: 700; }
.disc.big { width: 92px; height: 92px; background: var(--ink); color: var(--bg); }

.sheet { position: fixed; z-index: 10; left: 0; right: 0; bottom: 0; max-height: 86dvh; overflow-y: auto; background: var(--panel);
  border-top: 1px solid var(--line); border-radius: 18px 18px 0 0; padding: 18px 18px max(24px, env(safe-area-inset-bottom)); }
@media (min-width: 701px) { .sheet { left: 50%; width: 560px; translate: -50% 0; } }
.sheet header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sheet h3 { margin: 0; font-size: 18px; flex: 1; }
.sheet h4 { margin: 18px 0 6px; font-size: 14px; color: var(--muted); }
.x { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #232326; }
.muted { color: var(--muted); font-size: 14px; }
.summary { font-size: 16px; }
.transcript { line-height: 1.6; color: #dcd8cf; white-space: pre-wrap; }

.q .count { color: var(--muted); font-size: 13px; margin: 0; }
.question { font-size: 20px; font-weight: 750; margin: 6px 0 14px; line-height: 1.3; }
.opts { display: grid; gap: 10px; }
.opt { text-align: start; padding: 14px 16px; border-radius: 12px; background: #202023; border: 1.5px solid var(--line); font-size: 16px; font-weight: 600; }
.opt.right { border-color: var(--ok); background: rgba(58,168,107,.16); }
.opt.wrong { border-color: var(--no); background: rgba(224,82,71,.14); }
.opt.dim { opacity: .45; }
.why { margin: 14px 0; padding: 12px 14px; border-radius: 12px; background: #202023; line-height: 1.45; }
.why.ok { border-inline-start: 4px solid var(--ok); }
.why.no { border-inline-start: 4px solid var(--no); }
.btn { padding: 13px 18px; border-radius: 12px; background: var(--ink); color: var(--bg); font-weight: 800; }
.btn.ghost { background: #232326; color: var(--ink); }
.result { text-align: center; }
.result .big { font-size: 44px; font-weight: 850; margin: 8px 0 4px; }
.result .row { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }

.search input { flex: 1; height: 44px; border-radius: 12px; border: 1.5px solid var(--line); background: #0f0f10; color: var(--ink); padding: 0 14px; font-size: 16px; }
.search ul { list-style: none; margin: 0; padding: 0; }
.search li { padding: 14px 4px; border-bottom: 1px solid var(--line); cursor: pointer; display: grid; gap: 4px; }
.search li strong { font-size: 17px; }
.search .he { color: #d6d2c9; }
.search .snip { color: var(--muted); font-size: 14px; }
.search .chip { justify-self: start; }