/* ============================================================
   AkdenizOS Lab — interactive course pages.
   Builds on the site tokens (assets/css/tokens.css); every colour
   here comes from the semantic layer so the lab reads as part of
   the same site.
   ============================================================ */

.lab-shell { max-width: 1180px; margin: 0 auto; padding: var(--sp-6) var(--sp-4) var(--sp-16); }
.lab-crumbs { font-size: .9rem; color: var(--fg-subtle); margin-bottom: var(--sp-3); }
.lab-crumbs a { color: var(--fg-link); }
.lab-crumbs a:hover { color: var(--fg-link-hover); }

/* ── Course page ── */
.course-hero { background: var(--bg-strong); color: var(--fg-on-strong); border-radius: var(--radius-xl); padding: var(--sp-8) var(--sp-6); margin-bottom: var(--sp-6); display: grid; gap: var(--sp-4); }
.course-hero h1 { color: var(--fg-on-strong); font-size: 2.2rem; }
.course-hero p { color: var(--fg-on-strong-muted); max-width: 62ch; }
.course-hero__stats { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.stat { background: rgba(255,255,255,.08); border: 1px solid var(--border-on-strong); border-radius: var(--radius-lg); padding: var(--sp-3) var(--sp-4); min-width: 140px; }
.stat b { display: block; font-size: 1.5rem; color: var(--fg-on-strong); }
.stat span { font-size: .85rem; color: var(--fg-on-strong-muted); }
.btn { display: inline-flex; align-items: center; gap: var(--sp-2); font: inherit; font-weight: 600; border-radius: var(--radius-md); padding: var(--sp-2) var(--sp-4); border: 1px solid var(--border-strong); background: var(--bg-elevated); color: var(--fg-brand); cursor: pointer; transition: background var(--t-fast); }
.btn:hover { background: var(--bg-hover); }
.btn--accent { background: var(--accent); border-color: var(--accent); color: var(--fg-on-accent); }
.btn--accent:hover { background: var(--accent-hover); }
.btn--sm { padding: 2px var(--sp-3); font-size: .9rem; }

.unit { margin: var(--sp-8) 0 var(--sp-3); display: flex; align-items: baseline; gap: var(--sp-3); }
.unit h2 { font-size: 1.35rem; }
.unit span { color: var(--fg-subtle); font-size: .9rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-4); }
.lcard { display: flex; flex-direction: column; gap: var(--sp-2); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-4); box-shadow: var(--shadow-1); transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease); }
.lcard:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.lcard__top { display: flex; justify-content: space-between; font-size: .8rem; color: var(--fg-subtle); font-family: 'JetBrains Mono', monospace; }
.lcard h3 { font-size: 1.15rem; }
.lcard p { font-size: .92rem; color: var(--fg-muted); flex: 1; }
.lcard__bar { height: 6px; background: var(--stone-200); border-radius: var(--radius-full); overflow: hidden; }
.lcard__bar i { display: block; height: 100%; background: var(--blue-600); width: 0; transition: width .4s var(--ease); }
.lcard__meta { display: flex; justify-content: space-between; font-size: .82rem; color: var(--fg-subtle); }
.lcard.is-done .lcard__bar i { background: #2b8a3e; }
.lcard.is-soon { opacity: .55; pointer-events: none; }
.chip { display: inline-block; font-size: .75rem; font-weight: 600; padding: 1px var(--sp-2); border-radius: var(--radius-full); background: var(--blue-100); color: var(--blue-800); }
.chip--exam { background: var(--orange-100); color: var(--orange-700); }

/* ── Lesson page layout ── */
.lesson-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
.toc { position: sticky; top: 64px; max-height: calc(100vh - 80px); overflow-y: auto; font-size: .9rem; }
.toc__title { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-subtle); font-weight: 700; margin-bottom: var(--sp-2); }
.toc a { display: flex; gap: var(--sp-2); padding: 5px var(--sp-2); border-radius: var(--radius-sm); color: var(--fg-muted); line-height: 1.35; }
.toc a:hover { background: var(--bg-hover); }
.toc a.is-active { background: var(--blue-100); color: var(--blue-800); font-weight: 600; }
.toc a .tick { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-strong); margin-top: 2px; }
.toc a.is-done .tick { background: #2b8a3e; border-color: #2b8a3e; }
.toc__tools { margin-top: var(--sp-4); display: grid; gap: var(--sp-2); }

.lesson-head { margin-bottom: var(--sp-6); }
.lesson-head h1 { font-size: 2rem; margin: var(--sp-2) 0; }
.lesson-head .lead { font-size: 1.08rem; color: var(--fg-muted); max-width: 70ch; }
.lesson-head__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }

.progress-top { position: sticky; top: 52px; z-index: 5; height: 4px; background: var(--stone-200); margin: 0 calc(-1 * var(--sp-4)) var(--sp-4); }
.progress-top i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .4s var(--ease); }

.lesson { font-size: 1.06rem; color: var(--fg); max-width: 760px; }
.lesson p { margin: var(--sp-3) 0; }
.lesson ul, .lesson ol { margin: var(--sp-3) 0 var(--sp-3) var(--sp-6); }
.lesson ul { list-style: disc; }
.lesson ol { list-style: decimal; }
.lesson li { margin: 4px 0; }
.lesson a { color: var(--fg-link); text-decoration: underline; text-underline-offset: 2px; }
.lesson h3 { font-size: 1.15rem; margin: var(--sp-6) 0 var(--sp-2); }
.lesson strong { color: var(--fg-brand); }
.lsec { padding: var(--sp-6) 0 var(--sp-4); border-top: 1px solid var(--border); scroll-margin-top: 64px; }
.lsec:first-of-type { border-top: 0; }
.lsec > h2 { font-size: 1.45rem; margin-bottom: var(--sp-2); display: flex; align-items: baseline; gap: var(--sp-3); }
.lsec > h2 .num { font-family: 'JetBrains Mono', monospace; font-size: .9rem; color: var(--accent); }
.lsec__min { font-size: .8rem; color: var(--fg-subtle); font-weight: 500; margin-left: auto; }
.lsec__done { margin-top: var(--sp-4); }
.lsec.is-done .lsec__done .btn { background: #e6f4ea; border-color: #2b8a3e; color: #2b8a3e; }

/* focus mode: one section at a time */
body.focus .lsec { display: none; }
body.focus .lsec.is-current { display: block; }
body.focus .toc { opacity: .5; }
.focus-nav { display: none; gap: var(--sp-2); margin-top: var(--sp-4); }
body.focus .focus-nav { display: flex; }

/* ── Content boxes ── */
.box { border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4); margin: var(--sp-4) 0; background: var(--bg-elevated); }
.box > :first-child { margin-top: 0; }
.box > :last-child { margin-bottom: 0; }
.box__label { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .02em; margin-bottom: var(--sp-1); }
.box--rule { border-left-color: var(--blue-600); }
.box--rule .box__label { color: var(--blue-600); }
.box--trap { border-left-color: #b7791f; background: #fffaf0; }
.box--trap .box__label { color: #b7791f; }
.box--exam { border-left-color: var(--accent); background: #fff8f3; }
.box--exam .box__label { color: var(--orange-700); }
.box--example { border-left-color: var(--stone-500); }
.box--example .box__label { color: var(--stone-700); }
.box--intuition { border-left-color: #6741d9; background: #f8f6ff; }
.box--intuition .box__label { color: #6741d9; }
.src { font-size: .85rem; color: var(--fg-subtle); }
.src code { font-size: .8rem; }

.lesson code, .lesson pre { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .88rem; }
.lesson code { background: var(--stone-100); padding: 1px 5px; border-radius: var(--radius-sm); }
.lesson pre { background: var(--ink-900); color: #e8ebf1; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-md); overflow-x: auto; margin: var(--sp-3) 0; line-height: 1.55; }
.lesson pre code { background: none; padding: 0; color: inherit; }
.lesson table { border-collapse: collapse; width: 100%; font-size: .95rem; margin: var(--sp-3) 0; }
.lesson th, .lesson td { border-bottom: 1px solid var(--border); padding: 6px 10px; text-align: left; vertical-align: top; }
.lesson th { color: var(--fg-brand); font-weight: 700; background: var(--stone-050); }
/* position: relative keeps KaTeX's absolutely positioned MathML inside the scroll box. */
.table-wrap { overflow-x: auto; position: relative; }

/* ── Reveal and hint ladder ── */
details.reveal, details.hint { border: 1px solid var(--border); border-radius: var(--radius-md); margin: var(--sp-2) 0; background: var(--bg-elevated); }
details.reveal > summary, details.hint > summary { cursor: pointer; padding: var(--sp-2) var(--sp-3); font-weight: 600; color: var(--fg-link); list-style: none; }
details.reveal > summary::before { content: "▸ "; }
details.reveal[open] > summary::before { content: "▾ "; }
details.hint > summary::before { content: "💡 "; }
details.reveal > div, details.hint > div { padding: 0 var(--sp-4) var(--sp-3); }

/* ── Quiz ── */
.quiz { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-4); margin: var(--sp-4) 0; background: var(--blue-050); }
.quiz__tag { font-size: .8rem; font-weight: 700; letter-spacing: .02em; color: var(--blue-600); }
.quiz__q { font-weight: 600; color: var(--fg); margin: var(--sp-1) 0 var(--sp-3); }
.quiz__opt { display: block; width: 100%; text-align: left; font: inherit; font-size: .98rem; padding: var(--sp-2) var(--sp-3); margin: var(--sp-2) 0; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-elevated); cursor: pointer; color: var(--fg); transition: border-color var(--t-fast), background var(--t-fast); }
.quiz__opt:hover:not([disabled]) { border-color: var(--blue-500); }
.quiz__opt .why { display: none; font-size: .9rem; margin-top: var(--sp-1); color: var(--fg-muted); }
.quiz.is-answered .quiz__opt { cursor: default; }
.quiz.is-answered .quiz__opt .why { display: block; }
.quiz__opt.is-correct { border-color: #2b8a3e; background: #ebf7ee; }
.quiz__opt.is-wrong { border-color: #c92a2a; background: #fdecec; }
.quiz__opt.is-correct::before { content: "✓ "; color: #2b8a3e; font-weight: 700; }
.quiz__opt.is-wrong::before { content: "✗ "; color: #c92a2a; font-weight: 700; }
.quiz__retry { display: none; margin-top: var(--sp-2); }
.quiz.is-answered .quiz__retry { display: inline-flex; }

/* ── Stepper (animations) ── */
.stepper { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-4); margin: var(--sp-4) 0; background: var(--bg-elevated); }
.stepper__title { font-weight: 700; color: var(--fg-brand); margin-bottom: var(--sp-2); }
.stepper__stage { min-height: 80px; overflow-x: auto; }
.stepper__caption { margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3); background: var(--stone-050); border-radius: var(--radius-md); min-height: 2.6em; font-size: .97rem; }
.stepper__controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); }
.stepper__count { font-size: .85rem; color: var(--fg-subtle); font-family: 'JetBrains Mono', monospace; margin-left: auto; }

/* array view */
.arr { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; padding: var(--sp-2) 0; }
.arr__cell { position: relative; min-width: 42px; height: 42px; display: grid; place-items: center; border: 2px solid var(--border-strong); border-radius: var(--radius-md); background: var(--paper); font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--fg); transition: all .25s var(--ease); }
.arr__cell small { position: absolute; bottom: -18px; font-size: .7rem; font-weight: 500; color: var(--fg-faint); }
.arr__cell .ptr { position: absolute; top: -20px; font-size: .72rem; font-weight: 700; color: var(--orange-700); white-space: nowrap; }
.arr__cell.m-cmp { border-color: var(--blue-600); background: var(--blue-100); }
.arr__cell.m-swap { border-color: var(--accent); background: var(--orange-100); transform: translateY(-4px); }
.arr__cell.m-pivot { border-color: #6741d9; background: #efeaff; }
.arr__cell.m-done { border-color: #2b8a3e; background: #ebf7ee; }
.arr__cell.m-dim { opacity: .35; }
.arr__cell.m-small { border-color: #1c7ed6; background: #e7f5ff; }
.arr__cell.m-big { border-color: #e8590c; background: #fff4e6; }
.arr-wrap { padding-top: 22px; padding-bottom: 20px; }

/* code view with highlighted line */
.codeview { background: var(--ink-900); color: #e8ebf1; border-radius: var(--radius-md); padding: var(--sp-2) 0; font-family: 'JetBrains Mono', monospace; font-size: .86rem; overflow-x: auto; margin: var(--sp-2) 0; }
.codeview div { white-space: pre; padding: 1px var(--sp-3); }
.codeview div.on { background: rgba(244, 117, 36, .28); }

/* ── Pomodoro chip ── */
.pomo { display: flex; align-items: center; gap: var(--sp-2); font-family: 'JetBrains Mono', monospace; font-size: .95rem; }
.pomo b { color: var(--fg-brand); }
.pomo.is-break b { color: #2b8a3e; }

.lesson-foot { display: flex; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-10); padding-top: var(--sp-4); border-top: 1px solid var(--border); }

.katex { font-size: 1.05em; }
.katex-display { overflow-x: auto; overflow-y: hidden; padding: 4px 0; }

.lesson-grid > main, .lesson-grid > .toc { min-width: 0; }
@media (max-width: 900px) {
  .lesson-grid { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; max-height: none; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-3); background: var(--bg-elevated); }
  .lesson-head h1 { font-size: 1.6rem; }
  .course-hero h1 { font-size: 1.7rem; }
}

/* ── Retrieval first: the explanation stays blurred until the opening question is answered ── */
.lsec.is-locked > :not(h2):not(.quiz):not(.tryfirst-note):not(.lsec__done):not(.focus-nav) { filter: blur(6px); pointer-events: none; user-select: none; transition: filter .3s var(--ease); }
.lsec.is-locked > .quiz ~ .quiz { filter: blur(6px); pointer-events: none; }
.tryfirst-note { font-size: .92rem; color: var(--fg-muted); background: var(--orange-100); border-radius: var(--radius-md); padding: var(--sp-2) var(--sp-3); display: flex; gap: var(--sp-3); align-items: center; justify-content: space-between; }
.lsec:not(.is-locked) .tryfirst-note { display: none; }

/* ── Just start ── */
.juststart { position: fixed; right: var(--sp-4); bottom: var(--sp-4); z-index: 50; }
.juststart__card { background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); padding: var(--sp-4); width: min(340px, calc(100vw - 32px)); display: grid; gap: var(--sp-2); font-size: .92rem; }
.juststart__time { font-family: 'JetBrains Mono', monospace; font-size: 1.8rem; color: var(--accent); }
.juststart label { display: grid; gap: 4px; font-weight: 600; color: var(--fg-brand); }
.juststart input { font: inherit; font-weight: 400; padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.juststart__row { display: flex; justify-content: space-between; gap: var(--sp-2); }

/* ── Practice page ── */
.practice-item { margin: var(--sp-5) 0; }
.practice-item .quiz { margin-top: var(--sp-1); }
.course-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ── Resume banner and self-check summary ── */
.resume { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: space-between; align-items: center; background: var(--blue-050); border: 1px solid var(--blue-200); border-radius: var(--radius-md); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-4); font-size: .95rem; }
.quiz-summary { max-width: 760px; margin-top: var(--sp-8); }

/* ── Phone width: nothing may widen the page ── */
.lesson-foot { flex-wrap: wrap; }
.lesson-foot .btn { max-width: 100%; white-space: normal; }
@media (max-width: 900px) {
  .lab-shell .btn { width: auto; }
  .lesson pre, .stepper__stage, .table-wrap { max-width: 100%; }
}