/* ==========================================================================
   SITE — public front-end styles. Vanilla CSS, no framework.
   Logical properties (inline-start/end) so RTL and LTR both work from one sheet.
   ========================================================================== */

:root {
    /* ── TV Class palette ──────────────────────────────────────────────
       Derived from the launcher icon: deep NAVY stage, warm GOLD mark.
       Brand = navy (chrome, primary actions), accent = gold (highlights).
       Kept as the same variable NAMES the rest of this sheet already uses,
       so the whole site re-themes without touching every rule. */
    --bg:            #F6F8FC;
    --surface:       #FFFFFF;
    --surface-2:     #F1F4FA;
    --text:          #0B1220;
    --text-muted:    #475569;
    --border:        #E4E8F0;
    --border-strong: #CBD3E1;

    --accent:        #0E2A5E;   /* navy — the brand, and every primary action */
    --accent-dark:   #091F4A;
    --accent-soft:   #E6ECF7;
    --gold:          #F5C518;

    --danger:        #EF4444;
    --ok:            #22C55E;

    --radius:        12px;
    --radius-sm:     8px;
    --shadow:        0 1px 2px rgba(15, 23, 42, .06), 0 1px 1px rgba(15, 23, 42, .04);
    --shadow-lg:     0 12px 32px rgba(15, 23, 42, .10), 0 2px 6px rgba(15, 23, 42, .04);
    --wrap:          1120px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg:            #0B1220;
        --surface:       #131B2C;
        --surface-2:     #1B2540;
        --text:          #E8EEF7;
        --text-muted:    #94A3B8;
        --border:        #24304A;
        --border-strong: #33405E;
        /* Navy is the chrome in light mode; in the dark it disappears into the
           page, so the accent lifts to a readable blue and gold does the
           highlighting. */
        --accent:        #4C7FD4;
        --accent-dark:   #3D6ABF;
        --accent-soft:   #17233D;
        --shadow:        0 1px 2px rgba(0, 0, 0, .35);
        --shadow-lg:     0 12px 32px rgba(0, 0, 0, .45);
    }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    /* Cairo first — it shapes Arabic properly and carries real 700/800 weights.
       The system faces stay behind it so the page still renders if the font
       request fails; `display=swap` means text is never invisible while it
       loads. */
    font-family: "Cairo", "Segoe UI", Tahoma, system-ui, -apple-system, Arial, sans-serif;
    line-height: 1.7;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { line-height: 1.3; text-wrap: balance; margin: 0 0 .5em; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); }
h2 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); }
h3 { font-size: 1.05rem; }
p  { margin: 0 0 1em; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 18px; }
/* 40px above AND below every section. On the lessons page that top half is
   dead space between the header and the title — the first thing anyone wants
   is the list. Trim the top, keep the bottom so the footer does not crowd. */
.section { padding-block: 40px; }
.lesson-list { padding-block: 14px 32px; }
.narrow { max-width: 720px; }
/* ── WEIGHT ────────────────────────────────────────────────────
   Arabic at 600 reads as regular text; the same words at 800 read as a title.
   The default weights were tuned for a Latin face and left the page looking
   washed out next to TV Class. Headings, card titles, chips and buttons all
   step up. */
h1, h2, h3 { font-weight: 800; letter-spacing: -.01em; }
h1 { font-size: clamp(1.5rem, 3.2vw, 2rem); }
.lesson-title { font-weight: 800; font-size: 16px; }
.lesson-meta-item { font-weight: 600; }
.lesson-meta-subject { font-weight: 800; }
.lesson-meta-level { font-weight: 700; }
.lesson-act { font-weight: 800; font-size: 14px; }
.ll-open { font-weight: 800; }
.ll-chip { font-weight: 700; }
.ll-page { font-weight: 800; }
.btn { font-weight: 700; }
.chip { font-weight: 700; }

/* The teacher's photo, sized to the chip it sits in. */
.lesson-meta-avatar {
    width: 20px; height: 20px; border-radius: 50%; flex: none;
    object-fit: cover; background: rgba(14,42,94,.12);
}

.muted { color: var(--text-muted); }
.small { font-size: .86rem; }

/* ------------------------------------------------------------------ header */
.site-header {
    position: sticky; top: 0; z-index: 40;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}
.header-inner { display: flex; align-items: center; gap: 18px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.08rem; }
.brand-mark {
    width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto;
    background: linear-gradient(135deg, var(--accent), #38bdf8);
}
.site-nav { display: flex; gap: 4px; margin-inline-start: auto; flex-wrap: wrap; }
.site-nav a {
    padding: 8px 14px; border-radius: 999px; color: var(--text-muted); font-size: .95rem;
    transition: background .15s, color .15s;
}
.site-nav a:hover { background: var(--surface-2); color: var(--text); }
.site-nav a.active { background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.lang-switch {
    width: 36px; height: 36px; display: grid; place-items: center; font-weight: 700; font-size: .8rem;
    border: 1px solid var(--border); border-radius: 50%; color: var(--text-muted);
}
.lang-switch:hover { border-color: var(--accent); color: var(--accent); }
.nav-toggle { display: none; }

/* ------------------------------------------------------------------ buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 18px; border: 1px solid transparent; border-radius: var(--radius-sm);
    font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap;
    transition: filter .15s, background .15s, border-color .15s;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { filter: brightness(1.07); }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-lg { padding: 13px 26px; font-size: 1.02rem; }

/* ------------------------------------------------------------------ hero */
/* Half the old padding. 86px was a stage for a headline and a button; what is
   left is a paragraph, and the content below it is what people came for. */
.hero {
    padding-block: clamp(20px, 4vw, 40px);
    background: linear-gradient(160deg, var(--accent-soft), transparent 70%);
    border-bottom: 1px solid var(--border);
}
.hero h1 { margin: 0 0 .3em; }
/* No bottom margin: the section's own padding closes it now that nothing
   follows inside the hero. */
.hero-text { max-width: 62ch; color: var(--text-muted); margin-bottom: 0; }

/* ------------------------------------------------------------------ cards */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.section-head h2 { margin: 0; }
.more { color: var(--accent); font-weight: 600; font-size: .92rem; }

.card-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
.card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow);
    transition: transform .16s, box-shadow .16s, border-color .16s;
    display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
.card-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--surface-2); }
.card-img-ph { background: linear-gradient(135deg, var(--surface-2), var(--accent-soft)); }
.card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.card-body h3 { margin: 0; }

/* .chips is gone — the lesson card carries its chips in a .lesson-meta row
   now, and nothing else on the site used it. */
.chip {
    font-size: .74rem; font-weight: 600; padding: 3px 9px; border-radius: 999px;
    background: var(--surface-2); color: var(--text-muted);
}
.chip-rec  { background: #fee2e2; color: #b91c1c; }
.chip-live { background: #dcfce7; color: #15803d; }
.chip-int  { background: #e0e7ff; color: #4338ca; }
.chip-work { background: #fef3c7; color: #a16207; }
.chip-done { background: var(--surface-2); color: var(--text-muted); }
@media (prefers-color-scheme: dark) {
    .chip-rec { background: #4c1d1d; color: #fca5a5; }
    .chip-live{ background: #14432a; color: #86efac; }
    .chip-int { background: #272a5c; color: #a5b4fc; }
    .chip-work{ background: #453109; color: #fcd34d; }
}
.live-when { color: var(--accent); font-weight: 600; }

/* ------------------------------------------------------------------ filters/forms */
.form { display: grid; gap: 16px; background: var(--surface); border: 1px solid var(--border);
        border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.form label { display: grid; gap: 6px; font-weight: 600; }
/* Field styling lived in a rule shared with the old .filters row. That row is
   gone (the lessons page uses a dialog now), so the shared selector went with
   it — taking these with it. Restored on their own, which is where they should
   have been: a form field has nothing to do with a filter bar. */
.form input, .form textarea, .form select {
    padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text); font: inherit; min-width: 0;
}
.form input:focus, .form textarea:focus, .form select:focus {
    outline: none; border-color: var(--accent);
}
.form label small { font-weight: 400; }
.form .check { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.form .check input { width: 18px; height: 18px; accent-color: var(--accent); }

.alert { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 18px; border: 1px solid transparent; }
.alert-error { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.alert-ok    { background: #dcfce7; color: #14532d; border-color: #bbf7d0; }

/* ------------------------------------------------------------------ lesson page */
.crumbs { display: flex; gap: 8px; color: var(--text-muted); font-size: .9rem; margin-bottom: 10px; }
.crumbs a { color: var(--accent); }
.lesson-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: .92rem; margin-bottom: 14px; }
.lesson-desc { max-width: 70ch; }
.box {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 20px; margin-block: 18px; box-shadow: var(--shadow);
}
.box h2 { display: flex; align-items: center; gap: 10px; margin-top: 0; }
.box.locked { text-align: center; }
.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: #000; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.live-links { display: flex; flex-wrap: wrap; gap: 10px; }
.prereq-list { margin: 0; padding-inline-start: 1.3em; }
.prereq-list a { color: var(--accent); font-weight: 600; }
.file-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.file-list a { color: var(--accent); font-weight: 600; }

/* ------------------------------------------------------------------ article / page */
.article-img { border-radius: var(--radius); margin-block: 16px; }
.article-body { max-width: 72ch; }
.article-body img { border-radius: var(--radius-sm); margin-block: 12px; }
.article-body a { color: var(--accent); text-decoration: underline; }
.page-layout { display: grid; gap: 26px; grid-template-columns: 240px 1fr; align-items: start; }
.page-side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.page-side a { display: block; padding: 9px 13px; border-radius: var(--radius-sm); color: var(--text-muted); }
.page-side a:hover { background: var(--surface-2); color: var(--text); }
.page-side a.active { background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; }

/* ------------------------------------------------------------------ misc */
.data-list { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; margin: 0; }
.data-list dt { color: var(--text-muted); }
.data-list dd { margin: 0; font-weight: 600; }
.avatar { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--surface-2); }
.avatar-ph { display: grid; place-items: center; font-size: 2.6rem; font-weight: 700;
             color: var(--accent); background: var(--accent-soft); }
.social-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* ------------------------------------------------------------------ footer */
.site-footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 50px; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px;
                flex-wrap: wrap; padding-block: 22px; color: var(--text-muted); font-size: .9rem; }
.footer-nav { display: flex; gap: 16px; }
.footer-nav a:hover { color: var(--accent); }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 860px) {
    .page-layout { grid-template-columns: 1fr; }
    .nav-toggle {
        display: grid; gap: 5px; margin-inline-start: auto; padding: 8px;
        background: transparent; border: 0; cursor: pointer;
    }
    .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; }
    .site-nav {
        display: none; position: absolute; inset-inline: 0; top: 100%;
        flex-direction: column; gap: 2px; padding: 12px 18px;
        background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow);
    }
    body.nav-open .site-nav { display: flex; }
    .header-inner { position: relative; flex-wrap: wrap; }
}

/* ==========================================================================
   LESSON LIST — search dialog, filter chips, pager, card anatomy.
   Modelled on TV Class's lessons page. Prefixed `ll-` (list) and `lc-` (card)
   so nothing here can collide with the generic .card / .chip / .filters rules
   the rest of the site shares.
   ========================================================================== */

/* ── head: title + the one way in to search ─────────────────────── */
.ll-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.ll-head h1 { margin: 0; }

/* Filled, not outlined: it is the ONLY route to the filters, and an outlined
   pill here disappeared into the page chrome. The trailing … is the
   conventional sign that a control opens something rather than acting. */
.ll-open {
    display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
    border: none; border-radius: var(--radius-sm);
    background: var(--accent); color: #fff;
    font: inherit; font-size: 16px; font-weight: 700; padding: 12px 20px;
    box-shadow: var(--shadow);
    transition: transform .12s ease, filter .15s ease;
}
.ll-open:hover { transform: translateY(-1px); filter: brightness(1.07); }
.ll-open:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 3px; }
/* An ellipsis sits on the baseline; nudge it up so it reads as "opens a
   dialog" and not as three stray dots. */
.ll-open-dots { font-weight: 800; letter-spacing: .06em; opacity: .85; transform: translateY(-.18em); }

/* ── applied filters, each removable ───────────────────────── */
.ll-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.ll-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 10px 6px 14px; border-radius: 999px;
    background: var(--accent-soft); border: 1px solid var(--accent);
    color: var(--accent-dark); font-size: 14px; font-weight: 600;
    text-decoration: none; max-width: 100%; overflow-wrap: anywhere;
}
.ll-chip:hover, .ll-chip:focus-visible { filter: brightness(.97); outline: none; }
.ll-chip-x {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%; flex: none;
    background: var(--accent); color: #fff; font-size: 11px; line-height: 1;
}
.ll-chip-clear { background: rgba(197,34,31,.10); border-color: var(--danger); color: var(--danger); }
.ll-chip-clear .ll-chip-x { background: transparent; color: var(--danger); font-size: 13px; }

/* ── empty result: never a dead end ────────────────────────── */
.ll-none { text-align: center; padding: 34px 8px 26px; }
/* The message is muted; the way OUT of it is not. Dimming both together is
   what made the button read as decoration. */
.ll-none-text { margin: 0 0 20px; color: var(--text-muted); font-size: 16px; }
.ll-clear-big {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 26px; border-radius: 999px;
    background: var(--accent); color: #fff; text-decoration: none;
    font-weight: 800; font-size: 17px; box-shadow: var(--shadow);
}
.ll-clear-big:hover { filter: brightness(1.07); }
.ll-clear-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%; flex: none;
    background: rgba(255,255,255,.22); font-size: 15px; line-height: 1; padding-bottom: 1px;
}

/* ── pager, above and below the grid ──────────────────────── */
.ll-pager {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; flex-wrap: wrap; margin: 16px 0;
}
.ll-page {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px; padding: 0 10px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface); color: inherit;
    text-decoration: none; font-weight: 700; font-variant-numeric: tabular-nums;
}
.ll-page:hover, .ll-page:focus-visible { border-color: var(--accent); outline: none; }
.ll-step { font-size: 18px; }
/* A dead end is SHOWN, not removed: dropping it would shift the whole row
   sideways as you page, so the same button lands in a different place. */
.ll-page.is-off { opacity: .35; pointer-events: none; }
.ll-page.is-current { background: var(--accent); border-color: var(--accent); color: #fff; }
.ll-gap { opacity: .5; padding: 0 2px; user-select: none; }
/* "3/42" is a number pair, not prose — forced LTR so Arabic does not flip it. */
.ll-count {
    font-size: 14px; font-weight: 700; opacity: .8;
    font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate;
}

/* ── the dialog ──────────────────────────────────── */
.ll-modal {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: flex-start; justify-content: center;
    padding: 16px; background: rgba(15,31,51,.55);
    overflow: auto;
}
/* `display:flex` above beats the browser [hidden] rule, so state it. Without
   this line the dialog is simply always open. */
.ll-modal[hidden] { display: none; }
.ll-form {
    position: relative; width: 100%; max-width: 620px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
    padding: 22px; margin-top: 4vh;
}
.ll-form-title { margin: 0 0 16px; font-size: 20px; }
.ll-x {
    position: absolute; inset-block-start: 12px; inset-inline-end: 12px;
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--border); background: var(--surface-2);
    color: inherit; font: inherit; cursor: pointer;
}
.ll-input {
    width: 100%; height: 46px; padding: 0 14px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface-2); color: inherit; font: inherit; font-size: 16px;
}
.ll-input:focus { outline: none; border-color: var(--accent); }
.ll-fields { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0 18px; }
.ll-field { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ll-label { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.ll-field select {
    width: 100%; height: 42px; padding: 0 10px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface-2); color: inherit; font: inherit; cursor: pointer;
}
.ll-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ── contact form ──────────────────────────────────────────── */
.contact-h2 { margin: 0 0 14px; font-size: 1.15rem; }
.contact-wait {
    display: flex; align-items: center; gap: 8px; margin: 0;
    color: var(--text-muted); font-size: .92rem;
}
/* `display:flex` beats the browser's [hidden] rule, so say it — otherwise the
   countdown stays on screen after it finishes. */
.contact-wait[hidden] { display: none; }
.form label small { color: var(--danger); font-weight: 700; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
/* .alert-ok / .alert-error already exist above — reused, not redefined. */

/* ── lesson grid + card — TV Class's, rule for rule ────────────────────
   One column on phones so a card reads at full width, two from 600px, then
   auto-fit once the viewport can carry 280px+ cards. `align-items: start`
   keeps each card content-sized — no stretchy empty space when a neighbour is
   taller. */
.lesson-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 6px auto 0;
    align-items: start;
    justify-items: center;
    width: 100%;
    max-width: 720px;
    padding: 0 8px;
}
.lesson-grid > .lesson-card { width: 100%; max-width: 560px; min-width: 0; }
@media (min-width: 600px) {
    .lesson-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
@media (min-width: 900px) {
    .lesson-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); max-width: 1080px; }
}

/* The card is a GRID, not a stack: a fixed badge column beside a content
   column. That is what keeps the title aligned with the badge on every card
   regardless of how long it is, and lets the description and meta rows span
   the full width underneath. */
.lesson-card {
    display: grid;
    grid-template-columns: 36px 1fr;
    column-gap: 12px;
    row-gap: 6px;
    align-items: center;
    position: relative;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 4px 12px rgba(15,23,42,.05);
    padding: 12px 14px;
    padding-inline-start: 18px;      /* room for the coloured leading strip */
    text-align: start;
    text-decoration: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.lesson-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-lg);
}
@media (min-width: 480px) {
    .lesson-card { padding: 14px 16px; padding-inline-start: 20px; grid-template-columns: 40px 1fr; }
}

/* TWO cues, not one: a thick strip on the leading edge — what you catch
   scanning the column — and a faint wash of the same colour rising from the
   bottom, which tells you a whole card belongs to that type. Either alone was
   too quiet on a white grid; a fully tinted card was too loud. */
.lesson-card::before {
    content: ''; position: absolute; inset-inline-start: 0; top: 0; bottom: 0;
    width: 8px; background: var(--accent); pointer-events: none;
}
.lesson-card::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    pointer-events: none; opacity: .5;
    background: linear-gradient(180deg, rgba(255,255,255,0) 60%, var(--card-tint, transparent) 100%);
}
.lesson-type-video::before { background: #DC2626; }
.lesson-type-live::before  { background: #DC2626; }
.lesson-type-work::before  { background: var(--gold); }
.lesson-type-html::before  { background: var(--accent); }
.lesson-type-video { --card-tint: rgba(220, 38, 38, .12); }
.lesson-type-live  { --card-tint: rgba(220, 38, 38, .16); }
.lesson-type-work  { --card-tint: rgba(245, 197, 24, .16); }
.lesson-type-html  { --card-tint: rgba(14, 42, 94, .08); }

/* Badge and title share row 1; everything else spans both columns. */
.lesson-badge {
    grid-column: 1; grid-row: 1;
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: var(--radius-sm);
    background: var(--accent); color: var(--gold);
    font-size: 16px; line-height: 1;
}
@media (min-width: 480px) {
    .lesson-badge { width: 40px; height: 40px; font-size: 18px; }
}
.lesson-type-video .lesson-badge { background: #DC2626; color: #fff; }
.lesson-type-live  .lesson-badge { background: #DC2626; color: #fff;
    animation: lessonLivePulse 1.4s ease-in-out infinite; }
.lesson-type-work  .lesson-badge { background: var(--gold); color: var(--accent); }
@keyframes lessonLivePulse {
    0%, 100% { box-shadow: 0 4px 10px rgba(220,38,38,.30), 0 0 0 0 rgba(220,38,38,.45); }
    50%      { box-shadow: 0 4px 10px rgba(220,38,38,.30), 0 0 0 8px rgba(220,38,38,0); }
}
@media (prefers-reduced-motion: reduce) {
    .lesson-type-live .lesson-badge { animation: none; }
}

.lesson-title {
    grid-column: 2; grid-row: 1; margin: 0; min-width: 0;
    font-size: 15px; font-weight: 700; line-height: 1.3;
    color: var(--text); overflow-wrap: anywhere;
}
.lesson-desc {
    grid-column: 1 / -1; margin: 0;
    font-size: 13px; line-height: 1.5;
    color: var(--text-muted); overflow-wrap: anywhere;
}

.lesson-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 2px; }
.lesson-meta-what { margin-top: 4px; margin-bottom: -2px; }
.lesson-meta-item {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; line-height: 1.4; padding: 3px 10px; border-radius: 999px;
    background: rgba(14,42,94,.06); color: var(--text-muted);
    max-width: 100%; overflow-wrap: anywhere;
}
.lesson-meta-subject { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
/* The unit is a subdivision of the subject: same row, less weight, no fill. */
.lesson-meta-unit { background: transparent; border: 1px solid var(--border); font-weight: 600; }
.lesson-meta-level { color: var(--accent); font-weight: 600; }

/* The action names what it opens. The card is a link, but a visible button is
   what tells you it is one. */
.lesson-actions { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.lesson-act {
    flex: 1 1 0; min-width: 112px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 14px; border-radius: 10px;
    font-size: 13px; font-weight: 700; line-height: 1.1; color: #fff;
    background: var(--accent);
}
/* The title is the card's quiet primary link; the button below is the loud
   one. Both go to the same place, so the title does not need to shout. */
.lesson-title-link { color: inherit; text-decoration: none; }
.lesson-title-link:hover, .lesson-title-link:focus-visible { color: var(--accent); text-decoration: underline; }

/* بيانات الأستاذ — an outlined pill beside the teacher chip. Outlined, not
   filled: it is secondary to the two actions at the foot of the card, and two
   filled pills on one row would compete. */
.lesson-teacher-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 999px;
    border: 1px solid var(--accent); background: transparent;
    color: var(--accent); font: inherit; font-size: 12px; font-weight: 700;
    cursor: pointer; line-height: 1.5;
}
.lesson-teacher-btn:hover, .lesson-teacher-btn:focus-visible {
    background: var(--accent-soft); outline: none;
}

/* Two actions share the row evenly; one fills it. */
.lesson-act { text-decoration: none; }
.lesson-act-quiz { background: #166534; color: #fff; }

/* ── teacher popup ─────────────────────────────────────────── */
.teacher-card { max-width: 460px; }
.teacher-top { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.teacher-avatar {
    width: 64px; height: 64px; border-radius: 50%; flex: none;
    display: grid; place-items: center; overflow: hidden;
    background: var(--accent-soft); font-size: 28px;
}
.teacher-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.teacher-name { margin: 0; font-size: 1.1rem; font-weight: 800; }
.teacher-subject { margin: 2px 0 0; color: var(--text-muted); font-size: .9rem; }
/* Label / value pairs in two columns. An empty row is never emitted, so the
   list is only as long as there is something to say. */
.teacher-rows {
    display: grid; grid-template-columns: auto 1fr; gap: 8px 14px;
    margin: 0; padding-top: 14px; border-top: 1px solid var(--border);
}
.teacher-rows dt { color: var(--text-muted); font-size: .88rem; font-weight: 600; }
.teacher-rows dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.teacher-rows a { color: var(--accent); }

/* Phone → two real actions rather than a number to copy out by hand. */
.teacher-contact { margin: 0 0 14px; }
.teacher-phone {
    font-weight: 800; font-size: 1.05rem; letter-spacing: .02em;
    direction: ltr; unicode-bidi: isolate; margin-bottom: 8px;
}
.teacher-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.teacher-actions .btn { padding: 8px 16px; font-size: .9rem; }

/* The CV, as a list. It is typed as prose in the panel and reads as a wall
   otherwise. */
.teacher-bio { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.teacher-bio[hidden] { display: none; }
.teacher-bio-title { font-weight: 800; margin-bottom: 8px; }
.teacher-bio ul { margin: 0; padding-inline-start: 20px; color: var(--text-muted); }
.teacher-bio li { margin: 4px 0; }
/* The card can outgrow a phone screen once a CV is in it. */
.teacher-card { max-height: calc(100vh - 8vh); overflow-y: auto; }

.lesson-type-video .lesson-act, .lesson-type-live .lesson-act { background: #DC2626; }
.lesson-type-work  .lesson-act { background: var(--gold); color: var(--accent); }
.lesson-card:hover .lesson-act { filter: brightness(1.07); }

.chip-prereq { background: var(--surface-2); color: var(--text-muted); }

@media (max-width: 560px) {
    .ll-head { align-items: stretch; }
    .ll-open { width: 100%; justify-content: center; }
}