/* ============================================================
   KAY SCIENCE — Student "Video Lessons" page (/video-quizz)
   Brand-new, isolated page. Reuses the SAME design system as the
   task / dashboard pages (Poppins + style.css tokens/colours +
   .ks-card). Only this page's LAYOUT lives here. Loaded ONLY here.
   ============================================================ */

/* let the page grow naturally (don't force the shared 100vh scroll box) */
.ks-main { height: auto; min-height: 100vh; overflow-x: hidden; }

/* Plain white page background on the /video-quizz listing page (the dashboard's
   default --ks-bg #fbfbfd otherwise shows through as a grey tint). Scoped to .vq
   so only this page is affected. */
.ks-app:has(.vq),
.ks-app:has(.vq) .ks-main { background: #fff; }

/* This page has no greeting top-bar (per the design). Scoped here so it only
   affects /video-quizz — this stylesheet is loaded on this page only. */
.ks-topbar { display: none; }

/* On mobile the app sidebar collapses into an off-canvas drawer whose ONLY
   trigger is the hamburger — and the hamburger lives inside .ks-topbar. Hiding
   the whole bar above therefore also hides the only way to open the sidebar on
   small screens. So on mobile bring the bar back as a hamburger-only strip (the
   greeting text stays hidden). Scoped to the listing page (.vq); the single
   lesson page has no sidebar and uses its own "Back" link instead. */
@media (max-width: 860px) {
    .ks-app:has(.vq) .ks-topbar { display: flex; margin-bottom: 14px; }
    .ks-app:has(.vq) .ks-topbar__greet { display: none; }
}

/* Whole page uses the SAME font family as the subjects/topics list (Poppins,
   var(--ks-font)). Pinned with top priority across the entire main area so every
   element — headings, chapter cards, lessons, buttons, footer — matches exactly.
   Page-scoped: this stylesheet loads only on /video-quizz. */
.ks-main,
.ks-main * { font-family: var(--ks-font) !important; }

.vq { padding: 8px 0 30px; }

/* two columns: left nav (subjects + topics) | right main content */
.vq-body {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    align-items: start;
}

/* Vertical divider on the right edge of the left nav (subjects + topics),
   separating it from the main content. Stretches to the full body height so the
   line runs down past the topics list. */
.vq-nav {
		width: 294px;
    align-self: stretch;
    border-right: 1px solid var(--ks-divider);
    padding: 16px;
		background: #fff;
}

/* ============================================================
   LEFT NAV — Subjects + Topics
   ============================================================ */
/* Curriculum switcher — listed EXACTLY like the subjects (same container layout,
   font, colour and active state); only rendered when the student has more than
   one curriculum. */
.vq-curricula {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 2px 4px 18px;
    border-bottom: 1px solid var(--ks-divider);
    margin-bottom: 20px;
}
.vq-curriculum {
    font-size: 15px;
    font-weight: 700;
    color: var(--ks-heading);
    width: max-content;
    position: relative;
    transition: color .15s ease;
}
.vq-curriculum.is-active { color: #3425ed; }
.vq-curriculum:hover { color: var(--ks-purple); }

/* Subjects + Topics — SAME font family / size / colour as the flashcards page */
.vq-subjects {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 2px 4px 18px;
    border-bottom: 1px solid var(--ks-divider);
    margin-bottom: 20px;
}
.vq-subject {
    font-size: 15px;
    font-weight: 700;
    color: var(--ks-heading);
    width: max-content;
    position: relative;
    transition: color .15s ease;
}
.vq-subject.is-active { color: #3425ed; }
.vq-subject:hover { color: var(--ks-purple); }

.vq-topics-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ks-muted);
    margin: 2px 0 12px 4px;
}

.vq-topics { display: flex; flex-direction: column; gap: 2px; }
.vq-topics.is-loading { opacity: .5; pointer-events: none; }
.vq-topic--empty { color: var(--ks-muted); font-weight: 600; cursor: default; }
.vq-topic {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ks-indigo-soft);
    position: relative;
    transition: background .15s ease, color .15s ease;
}
.vq-topic__code { color: var(--ks-muted); font-weight: 700; min-width: 20px; flex-shrink: 0; }
.vq-topic:hover { background: #f6f3fe; }
/* Active topic uses the SAME highlight as the active lesson: light-green box with
   indigo blue-violet text. */
.vq-topic.is-active { background: var(--mod-green); color: var(--ks-heading); }
.vq-topic.is-active .vq-topic__code { color: var(--ks-heading); }
.vq-topic.is-active::before {
    content: "";
    position: absolute;
    left: 0; top: 7px; bottom: 7px;
    width: 3px; border-radius: 999px;
    background: var(--ks-heading);
}

/* ============================================================
   RIGHT MAIN — heading, chapters, lessons + video
   ============================================================ */
.vq-head { margin-bottom: 20px; }
.vq-head__title    { margin: 0 0 6px; font-size: 27px; font-weight: 700; color: var(--ks-heading); }
.vq-head__subtitle { margin: 0 0 4px; font-size: 14.5px; font-weight: 500; color: var(--ks-indigo-soft); }
.vq-head__hint     { margin: 0; font-size: 14px; font-weight: 600; color: var(--ks-muted); }

/* Teacher Video Library only (.vq--teacher) — match the teacher Flashcard page
   typography (heading / subheading / content title) so the two pages read the
   same. Scoped so the shared student Video Lessons page keeps its own sizes. */
.vq--teacher .vq-head__title    { font-size: 22px; font-weight: 800; }              /* = .ks-fc-head__title */
.vq--teacher .vq-head__subtitle { font-size: 13.5px; font-weight: 600; color: var(--ks-indigo); } /* = .ks-fc-head__subtitle */
.vq--teacher .vq-lessons__title { font-size: 16px; font-weight: 800; }              /* = .ks-fc-card__title */

/* Topic list reads on ONE line: wider left nav + tighter type so full topic
   names fit without wrapping. Applies to every Video Library / Video Lessons
   page that uses this stylesheet (teacher, tutor, student). */
/* The nav track sizes itself to the widest topic row (max-content), with a 300px
   floor so short lists keep the old width and a 400px ceiling so one very long
   name can't eat the main column. */
.vq .vq-body { grid-template-columns: fit-content(400px) minmax(0, 1fr); }
/* Code + name flow as one text run on a SINGLE line. Ellipsis only kicks in for
   names past the 400px ceiling — those still get the hover tooltip below. */
.vq .vq-topic {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 8px 10px;
    font-size: 12.5px;
    line-height: 1.4;
}
.vq .vq-topic__code { display: inline; margin-right: 8px; }
.vq .vq-topic__name {
    display: inline;
    white-space: nowrap;
}

/* Hover tooltip for clipped names. CSS-driven (not the native title attribute)
   so it still appears right after the topic is clicked. `.is-clipped` is set in
   JS only when the name is actually cut off. */
.vq .vq-topic.is-clipped:hover::after {
    content: attr(data-vq-full);
    position: absolute;
    left: 10px;
    top: calc(100% + 4px);
    z-index: 30;
    max-width: 320px;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--ks-heading);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    white-space: normal;
    box-shadow: 0 6px 18px rgba(20, 16, 60, .22);
    pointer-events: none;
}

/* ---- Chapters row ---- */
.vq-chapters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 26px;
}
.vq-chapters.is-loading { opacity: .55; pointer-events: none; }
.vq-chapter { cursor: pointer; }
.vq-lesson--empty { color: var(--ks-muted); font-weight: 500; cursor: default; }
.vq-chapter {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px;
    background: var(--ks-card);
    border: 1.5px solid var(--ks-divider);
    border-radius: var(--ks-radius);
    box-shadow: var(--ks-shadow-sm);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.vq-chapter:hover { transform: translateY(-1px); box-shadow: var(--ks-shadow); }
.vq-chapter.is-active { border-color: var(--ks-purple); background: #f8f5ff; }
.vq-chapter__icon {
    width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: #ece4fb; color: var(--ks-purple);
}
.vq-chapter__icon svg { width: 24px; height: 24px; }
/* Admin-uploaded (or default) chapter icon image — scaled to fit the icon tile. */
.vq-chapter__icon-img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; }
.vq-chapter__meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vq-chapter__title { font-size: 14px; font-weight: 600; color: var(--ks-heading); line-height: 1.2; }
.vq-chapter__count { font-size: 12.5px; font-weight: 500; color: var(--ks-muted); }

/* ---- Lessons list + Next lesson video ---- */
.vq-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 22px;
    align-items: start;
}

.vq-lessons {
    background: var(--ks-card);
    border-radius: var(--ks-radius);
    box-shadow: var(--ks-shadow);
    padding: 20px 22px;
}
.vq-lessons__head { margin-bottom: 10px; }
.vq-lessons__title { margin: 0 0 2px; font-size: 20px; font-weight: 700; color: var(--ks-heading); }
.vq-lessons__count { font-size: 13px; font-weight: 500; color: var(--ks-muted); }

.vq-lesson-list { display: flex; flex-direction: column; }
.vq-lesson {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 14px;
    border-radius: 12px;
    color: var(--ks-indigo);
    font-weight: 600;   /* same weight as the highlighted lesson */
    transition: background .15s ease;
}
/* Thin dividers between rows. The row keeps its border-radius (12px) so the
   hover/active backgrounds always have rounded ends — the old rule zeroed it,
   which is why the highlighted box looked square. */
.vq-lesson-list li + li .vq-lesson { border-top: 1px solid var(--ks-divider); }
.vq-lesson:hover { background: #f6f6fb; }
.vq-lesson.is-active { background: var(--mod-green); border-top-color: transparent; }
/* hide the divider directly below the active row so its green box reads as a clean
   rounded pill (curved on all four corners), matching the design */
.vq-lesson-list li:has(.vq-lesson.is-active) + li .vq-lesson { border-top-color: transparent; }
.vq-lesson__no { font-size: 14px; font-weight: 600; color: var(--ks-muted); flex-shrink: 0; min-width: 26px; }
/* Quiz finished — a green tick sits in the number's place. Keeps the same
   min-width as the number so every lesson title stays on one left edge whether
   its row is ticked or not. */
.vq-lesson__no--done { display: inline-flex; align-items: center; color: #3bbd9b; }
.vq-lesson__no--done svg { width: 17px; height: 17px; }
/* Text for screen readers only — the tick alone conveys nothing without it. */
.vq-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.vq-lesson__title { font-size: 14.5px; }
/* Active (highlighted) lesson: indigo blue-violet text at semibold, per the design */
.vq-lesson.is-active .vq-lesson__no,
.vq-lesson.is-active .vq-lesson__title { color: var(--ks-heading); font-weight: 600; }
/* ...except the completed tick, which stays green on the highlighted row too. */
.vq-lesson.is-active .vq-lesson__no--done { color: #3bbd9b; }

/* ---- Next lesson video preview ---- */
.vq-next {
    background: var(--ks-card);
    border-radius: var(--ks-radius);
    box-shadow: var(--ks-shadow);
    padding: 20px 20px 22px;
}
.vq-next__label {
    display: block;
    font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    color: var(--ks-muted); margin-bottom: 6px;
}
.vq-next__title { margin: 0 0 14px; font-size: 19px; font-weight: 700; color: var(--ks-heading); line-height: 1.25; }

.vq-next__thumb {
    position: relative;
    cursor: pointer;
    text-decoration: none;
    border-radius: 14px;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, #eef0fc 0%, #e6f7f2 100%);
    border: 1px solid var(--ks-divider);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 16px;
}
/* Preview poster (Mux/YouTube still) — fills the thumb behind the play button. */
.vq-next__thumb-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.vq-next__play {
    position: relative;   /* sit above the poster image */
    width: 58px; height: 58px; border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 10px 24px rgba(78, 66, 150, .18);
    display: flex; align-items: center; justify-content: center;
    color: var(--ks-purple);
}
.vq-next__play svg { width: 26px; height: 26px; margin-left: 3px; }
.vq-next__meta {
    position: absolute;
    left: 12px; right: 12px; bottom: 10px;
    font-size: 11.5px; font-weight: 500; color: var(--ks-indigo-soft);
    background: rgba(255, 255, 255, .8);
    border-radius: 8px; padding: 5px 9px;
    text-align: center;
}
.vq-next .vq-next__btn {
    width: 100%;
    padding: 14px 18px;
    font-size: 12px;
    letter-spacing: 1.2px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
    .vq-content { grid-template-columns: 1fr; }
    .vq-next { max-width: 480px; }
}
@media (max-width: 900px) {
    .vq-body,
    .vq .vq-body { grid-template-columns: 1fr; gap: 22px; }
    /* single-column on mobile — drop the vertical divider */
    /* Drop the desktop width floor — the nav is full-width here. */
    .vq-nav { border-right: none; padding-right: 0; align-self: start; }
    .vq .vq-nav { min-width: 0; }
    .vq-chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vq-subjects,
    .vq-curricula { flex-direction: row; flex-wrap: wrap; gap: 16px; }
}
@media (max-width: 480px) {
    .vq-chapters { grid-template-columns: 1fr; }
    .vq-head__title { font-size: 23px; }
}

/* ============================================================
   VIDEO HOMEWORK — single lesson page (/video-quizz/{slug})
   Scoped to .vlesson so the /video-quizz listing page is untouched.
   Reuses the same Poppins + palette tokens from style.css.
   ============================================================ */

/* This page has no app sidebar / greeting bar — just a "Dashboard" back link. */
.ks-app:has(.vlesson) .ks-sidebar,
.ks-app:has(.vlesson) .ks-backdrop,
.ks-app:has(.vlesson) .ks-topbar { display: none; }
/* Topbar is hidden here, so trim the .ks-main top padding to pull the video
   box up a little (the 34px default left an empty gap above it). */
.ks-app:has(.vlesson) .ks-main { margin-left: 0 }

/* On mobile, restore the off-canvas sidebar drawer + hamburger so students can
   still reach the main dashboard nav from the lesson page. Desktop keeps the
   clean, sidebar-free lesson layout (with only the "Back" link); the drawer and
   its hamburger appear on small screens the same way they do on every other
   dashboard page. */
@media (max-width: 860px) {
    .ks-app:has(.vlesson) .ks-sidebar { display: flex; }
    .ks-app:has(.vlesson) .ks-backdrop { display: block; }
    .ks-app:has(.vlesson) .ks-topbar { display: flex; margin-bottom: 10px; }
    .ks-app:has(.vlesson) .ks-topbar__greet { display: none; }
}
/* ---- Back link ---- */
.vl-back {
    display: flex; align-items: center; gap: 6px;
    font-family: var(--ks-font);
    font-size: 14.5px; font-weight: 600; color: var(--ks-heading);
    padding: 2px 6px 12px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--ks-divider);
}
.vl-back svg { width: 18px; height: 18px; }
.vl-back:hover { color: var(--ks-purple); }

/* ---- Two columns: lessons rail | main ---- */
.vl-body {
	display: grid;
	grid-template-columns: 294px minmax(0, 1fr);
	gap: 8px;
}

/* ---- Left rail: lesson list (card with border + soft shadow, as in the design) ---- */
.vl-nav {
    display: flex; flex-direction: column;
    font-family: var(--ks-font);
    border-radius: 8px;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, .30);
    border-right: 1px solid var(--ks-divider);
    padding: 16px;
    background: #fff;
}
.vl-lesson {
    display: block; padding: 14px 16px; border-radius: 14px;
    border-left: 3px solid transparent;
}
.vl-lesson + .vl-lesson { margin-top: 4px; }
.vl-lesson__title {
    display: block; font-size: 14.5px; font-weight: 700;
    color: var(--ks-heading); margin-bottom: 8px; line-height: 1.25;
}
.vl-lesson__row {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 13px; font-weight: 600; padding: 2px 0;
}
.vl-lesson__label { color: var(--ks-muted); font-weight: 500; }
.vl-lesson__val { color: #3bbd9b; }              /* completed % = teal-green */
.vl-lesson__val.is-empty { color: var(--ks-muted); }
.vl-lesson.is-active {
    background: linear-gradient(180deg, #e9fbfd 0%, #eef1fb 100%);
    border-left-color: var(--ks-cyan);
}
.vl-lesson.is-active .vl-lesson__val { color: var(--ks-cyan); }
.vl-lesson:not(.is-active):hover { background: #f6f6fb; }

/* ---- Main column — centered in the space after the left card ---- */
.vl-main {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	min-width: 0;
	max-width: 1220px;
	margin: 0 auto;
	background: #fff;
	padding: 16px;
	border-radius: 8px;
}
/* ---- Video player ---- */
.vl-video {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	background: radial-gradient(120% 140% at 50% 30%, #2a2a33 0%, #16161c 70%);
	aspect-ratio: 16 / 9;
	box-shadow: 0 20px 40px rgba(20, 18, 45, .18);
	color: #fff;
	width: 100%;
	max-width: 742px;
	align-self: center;
	margin-top: 8px;
}
.vl-video__art { position: absolute; left: 34px; top: 40px; width: 78px; height: 150px; opacity: .85; }
.vl-video__title {
    position: absolute; left: 0; right: 0; top: 44%; transform: translateY(-50%);
    text-align: center; font-family: Georgia, 'Times New Roman', serif;
    font-size: 40px; font-weight: 500; letter-spacing: .5px;
    text-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.vl-video__pointer {
    position: absolute; right: 90px; top: 38%; width: 70px; height: 70px;
    background: radial-gradient(circle at 40% 40%, rgba(240,220,205,.9), rgba(210,180,160,.5) 60%, transparent 72%);
    border-radius: 50%;
}
.vl-video__controls {
    position: absolute; left: 22px; right: 22px; bottom: 18px;
    display: flex; align-items: center; gap: 16px;
}
.vl-video__play {
    width: 34px; height: 34px; flex-shrink: 0; color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
}
.vl-video__play svg { width: 26px; height: 26px; }
.vl-video__track {
    flex: 1 1 auto; height: 5px; border-radius: 999px;
    background: rgba(255,255,255,.28); position: relative;
}
.vl-video__track-fill {
    position: absolute; left: 0; top: 0; height: 100%; width: 42%;
    border-radius: 999px; background: #4a86ff;
}
.vl-video__track-fill::after {
    content: ""; position: absolute; right: -6px; top: 50%; transform: translateY(-50%);
    width: 13px; height: 13px; border-radius: 50%; background: #4a86ff;
    box-shadow: 0 0 0 3px rgba(74,134,255,.35);
}
.vl-video__icons { display: flex; align-items: center; gap: 16px; color: rgba(255,255,255,.9); }
.vl-video__icons svg { width: 20px; height: 20px; }

/* ---- Quiz card — the right content area (progress + question + answer + submit) ---- */
.vl-quiz {
    background: #fff;
    /* only right + bottom border (no top/left) */
    border: none;
    border-right: 1px solid var(--ks-divider);
    border-bottom: 1px solid var(--ks-divider);
    border-radius: 22px;
    box-shadow: var(--ks-shadow);
    padding: 32px;
}
.vl-quiz__progress { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.vl-quiz__qno { font-size: 15px; font-weight: 700; color: var(--ks-heading); white-space: nowrap; }
.vl-quiz__bar {
    /* Basis 100% + shrink: the bar eats every pixel left between the two
       labels, so it runs the full width of the row. Auto side margins keep it
       centred in that gap on the pages that cap its width (Key Word Test). */
    flex: 0 1 100%; margin: 0 auto; height: 8px; border-radius: 999px; background: var(--ks-track);
    overflow: hidden; max-width: none;
}
/* Brand gradient: purple into mint, same ramp as the marketing assets. */
.vl-quiz__bar-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #9D82E8, #A6ECC9); }
.vl-quiz__pct { font-size: 14px; font-weight: 600; color: #3bbd9b; white-space: nowrap; }

/* Same type token as the listing page's content heading (.vq-lessons__title). */
.vl-quiz__question { margin: 0 0 14px; font-family: var(--ks-font); font-size: 20px; font-weight: 700; color: var(--ks-heading); }

.vl-quiz__form { display: block; }
.vl-quiz__input {
    width: 100%; padding: 14px 18px; border-radius: 16px;
    border: 1.5px solid var(--ks-divider); background: #fff;
    font-family: var(--ks-font); font-size: 15px; color: var(--ks-heading);
    outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.vl-quiz__input::placeholder { color: #b6b6cf; }
.vl-quiz__input:focus { border-color: var(--ks-cyan); box-shadow: 0 0 0 3px rgba(116,210,226,.18); }
.vl-quiz__actions { display: flex; justify-content: flex-end; margin-top: 14px; }
/* .vlesson prefix raises specificity above the global ".ks-app button" reset
   (which sets background:none) so the purple gradient + white text render. */
.vlesson .vl-quiz__submit {
    border: none; cursor: pointer; color: #fff;
    font-family: var(--ks-font); font-weight: 700; font-size: 12px;
    letter-spacing: 1px; text-transform: uppercase;
    padding: 12px 30px; border-radius: 999px;
    background: linear-gradient(135deg, #a48dee 0%, #b9a6f2 100%);
    box-shadow: 0 10px 22px rgba(164,141,238,.35);
    transition: transform .15s ease, box-shadow .15s ease;
}
.vlesson .vl-quiz__submit:hover { transform: translateY(-1px); box-shadow: 0 14px 26px rgba(164,141,238,.45); }

@media (max-width: 860px) {
    .vlesson { padding: 6px 16px 30px; }
    .vl-body { grid-template-columns: 1fr; gap: 20px; }
    .vl-video__title { font-size: 30px; }
    .vl-quiz__question { font-size: 20px; }
    .vl-quiz__progress { flex-wrap: wrap; gap: 10px; }
    .vl-quiz__bar { order: 3; max-width: none; flex-basis: 100%; margin: 0; }
    .vl-quiz__pct { margin-left: auto; }
}