/* «قبل ما تبدأ» / "Before you start" block (rendered by /assets/lesson-intro.js).
   Uses each course's own tokens (--panel --line --ink --muted --accent --accent-soft --font-display), so it follows
   the course's accent and its light/dark theme, and the page's dir (RTL Arabic, LTR English). */
.li-wrap{display:block;min-width:0}
.li-wrap:empty{display:none}
.li{background:var(--panel);border:1px solid var(--line);border-inline-start:4px solid var(--accent);border-radius:12px;padding:14px 16px;min-width:0;color:var(--ink)}
.li[hidden],.li-v[hidden],.li-body[hidden],.li-bar[hidden]{display:none!important}
.li-top{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap}
.li .li-h{font:700 1.05rem/1.35 var(--font-display);margin:0;color:var(--ink)}
.li .li-h2{font-size:.92rem;color:var(--muted);margin:12px 0 6px}
.li-x{border:0;background:none;color:var(--muted);font:600 .85rem/1 var(--font-body);padding:10px 4px;min-height:44px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.li-x:hover{color:var(--accent)}
.li-b{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.li-b li{position:relative;padding-inline-start:22px;line-height:1.6;font-size:1rem;overflow-wrap:anywhere}
.li-b li::before{content:"";position:absolute;inset-inline-start:4px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.li-b b{color:var(--accent);font-weight:700;unicode-bidi:isolate}
.li-t{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.li-t li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);border-radius:8px;padding:5px 10px;font-size:.88rem;line-height:1.45;max-width:100%;min-width:0}
.li-t b{font-weight:700;color:var(--ink);unicode-bidi:isolate}
.li-t span{color:var(--muted);overflow-wrap:anywhere}
.li-v{margin:12px 0 0;max-width:640px}
.li-vbox{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden}
.li-vbox video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;background:#000}
.li-cc{font-size:.8rem;color:var(--muted);margin-top:4px}
.li-act{margin-top:12px}
.li-go{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:10px 20px;border-radius:10px;border:1px solid var(--accent);background:var(--accent);color:var(--on-accent,#fff);font:700 1rem/1.2 var(--font-display);cursor:pointer}
.li-go:hover{filter:brightness(1.07)}
/* dark themes have a light accent: dark text on it (servo defines its own --on-accent) */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .li-go{color:var(--on-accent,#10161a)}}
:root[data-theme="dark"] .li-go{color:var(--on-accent,#10161a)}
.li-go:focus-visible,.li-x:focus-visible,.li-bar:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.li-closed{padding:0;border-inline-start-width:4px}
.li-bar{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:8px 16px;border:0;background:none;color:var(--ink);font:600 .95rem/1.3 var(--font-display);cursor:pointer;text-align:start;border-radius:12px}
.li-bar:hover{background:var(--accent-soft)}
.li-open{color:var(--accent);font-size:.85rem;white-space:nowrap}
.li-flash{animation:liFlash 1.6s ease-out}
@keyframes liFlash{0%,40%{box-shadow:0 0 0 3px var(--accent)}100%{box-shadow:0 0 0 3px transparent}}
.wd,#lesson{scroll-margin-top:12px}
@media (prefers-reduced-motion:reduce){.li-flash{animation:none;outline:3px solid var(--accent)}}
@media (max-width:480px){.li{padding:12px}.li-b li{font-size:.97rem}.li-go{width:100%}}