/* Style dla courses.html (wybór kursu) i stron pojedynczego kursu (course-*.html). */

.back-btn-plain { display:flex; align-items:center; gap:10px; text-decoration:none; -webkit-tap-highlight-color:transparent; }

/* ── Wybór kursu (courses.html) — reużywa .exam-card/.card-banner z index.css ── */
.course-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(10px,2.5vw,16px); margin-bottom:auto; }
@media (max-width:520px) { .course-cards { grid-template-columns:1fr; } }

/* ── Strona kursu ───────────────────────────────────────────────────────────── */
.course-topbar-sub { font-size:clamp(10px,1.3vw,12px); color:var(--muted); margin-top:2px; }

.course-toc {
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius);
  padding:clamp(14px,2.2vw,18px); margin-bottom:clamp(20px,3.5vh,32px);
  display:flex; flex-direction:column; gap:8px;
}
.course-toc-label { font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-bottom:2px; }
.course-toc a {
  color:var(--text); text-decoration:none; font-size:clamp(13px,1.6vw,14px);
  padding:6px 8px; border-radius:7px; display:flex; align-items:baseline; gap:8px;
  transition:background 0.12s, color 0.12s;
}
.course-toc a b { color:var(--accent); font-weight:800; min-width:1.4em; }
.course-toc a:active { background:var(--bg3); }
@media (hover:hover) { .course-toc a:hover { background:var(--bg3); color:var(--accent); } }

.course-module { margin-bottom:clamp(32px,5vh,52px); scroll-margin-top:16px; }
.course-module-num {
  display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:800;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--accent); margin-bottom:6px;
}
.course-module h2 { font-size:clamp(20px,3vw,28px); font-weight:800; color:var(--text); margin-bottom:12px; line-height:1.25; }
.course-module > .course-p:first-of-type { font-size:clamp(14px,1.6vw,16px); }

.course-sub { margin-top:clamp(20px,3vh,28px); scroll-margin-top:16px; }
.course-sub h3 { font-size:clamp(16px,2.2vw,19px); font-weight:700; color:var(--text); margin-bottom:8px; }

.course-p { font-size:clamp(13px,1.5vw,15px); color:var(--muted); line-height:1.7; margin-bottom:12px; }
.course-p b, .course-p strong { color:var(--text); }
.course-p code, .course-list code { background:var(--bg3); border:1px solid var(--border); border-radius:5px; padding:1px 6px; font-size:0.92em; color:var(--text); font-family:'SFMono-Regular',Consolas,monospace; }

.course-list { list-style:none; display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.course-list li { font-size:clamp(13px,1.5vw,15px); color:var(--muted); line-height:1.6; padding-left:20px; position:relative; }
.course-list li::before { content:'→'; position:absolute; left:0; color:var(--accent); font-weight:700; }

.course-code {
  background:#0d0d14; border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:9px;
  padding:clamp(10px,1.8vw,14px); margin-bottom:14px; overflow-x:auto;
}
.course-code pre { font-family:'SFMono-Regular',Consolas,monospace; font-size:clamp(11.5px,1.4vw,13px); color:#c9f0c9; line-height:1.6; white-space:pre; }
.course-code .c-cmt { color:#6c6c8a; }

.course-callout {
  display:flex; gap:10px; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius);
  padding:clamp(12px,2vw,16px); margin-bottom:14px; font-size:clamp(12.5px,1.4vw,14px); color:var(--muted); line-height:1.6;
}
.course-callout .cal-icon { flex-shrink:0; font-size:18px; }
.course-callout.tip { border-left:3px solid var(--correct-t); }
.course-callout.warn { border-left:3px solid var(--wrong-t); }
.course-callout b { color:var(--text); }

.course-quiz-cta {
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  background:var(--bg2); border:1.5px solid var(--card-accent, var(--accent)); border-radius:var(--radius);
  padding:clamp(14px,2.2vw,18px); margin:clamp(28px,4vh,40px) 0;
}
.course-quiz-cta .cqc-text { font-size:clamp(12.5px,1.5vw,14px); color:var(--muted); }
.course-quiz-cta .cqc-text b { color:var(--text); display:block; font-size:clamp(14px,1.7vw,16px); margin-bottom:2px; }
.course-quiz-cta .mode-btn { flex:none; min-width:140px; }

.course-progress-rail {
  position:fixed; top:0; left:0; height:3px; width:0%; background:var(--accent);
  z-index:999; transition:width 0.1s linear;
}

/* ── Hub kursu (lista modułów) ─────────────────────────────────────────────── */
.module-overall { display:none; align-items:center; gap:10px; margin-bottom:clamp(18px,3vh,28px); font-size:12px; color:var(--muted); }
.module-overall.visible { display:flex; }
.module-overall-bar { flex:1; height:6px; border-radius:3px; background:var(--bg3); overflow:hidden; }
.module-overall-fill { height:100%; background:var(--correct-t); border-radius:3px; width:0%; transition:width 0.3s ease; }
.module-overall-count { flex-shrink:0; font-weight:700; color:var(--text); white-space:nowrap; }

.module-list { display:flex; flex-direction:column; gap:10px; margin-bottom:auto; }
.module-tile {
  display:flex; align-items:center; gap:14px; background:var(--bg2); border:1.5px solid var(--border);
  border-radius:var(--radius); padding:clamp(12px,2vw,16px); text-decoration:none; color:inherit;
  transition:border-color 0.14s, background 0.14s, transform 0.1s; -webkit-tap-highlight-color:transparent;
}
.module-tile:active { transform:scale(0.99); background:var(--bg3); }
@media (hover:hover) { .module-tile:hover { border-color:var(--card-accent,var(--accent)); } }
.module-tile.done { border-color:var(--correct-t); }
.module-tile-num {
  flex-shrink:0; width:38px; height:38px; border-radius:10px; background:var(--bg3); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-family:monospace; font-weight:800;
  font-size:13px; color:var(--muted);
}
.module-tile.done .module-tile-num { background:var(--correct-t); border-color:var(--correct-t); color:#0a2e15; }
.module-tile-body { flex:1; min-width:0; }
.module-tile-title { font-size:clamp(13px,1.6vw,15px); font-weight:700; color:var(--text); margin-bottom:2px; }
.module-tile-teaser { font-size:clamp(11px,1.3vw,12px); color:var(--muted); line-height:1.4; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.module-tile-check { flex-shrink:0; font-size:20px; color:var(--correct-t); opacity:0; transition:opacity 0.14s; }
.module-tile.done .module-tile-check { opacity:1; }

/* ── Widok pojedynczego modułu ──────────────────────────────────────────────── */
.module-done-badge {
  display:none; align-items:center; gap:8px; background:#101e10; border:1px solid var(--correct-t);
  color:var(--correct-t); border-radius:20px; padding:7px 14px; font-size:12px; font-weight:700;
  margin-bottom:clamp(16px,2.5vh,24px); width:fit-content;
}
.module-done-badge.visible { display:flex; }
.module-login-hint {
  display:none;
  background:var(--bg2); border:1px solid var(--border); border-radius:9px; padding:9px 12px;
  font-size:12px; color:var(--muted); margin-bottom:clamp(16px,2.5vh,24px);
}
.module-login-hint.visible { display:block; }
.module-login-hint a { color:var(--accent); font-weight:700; text-decoration:none; }

.module-nav { display:flex; gap:10px; margin-top:clamp(28px,4vh,40px); }
.module-nav a {
  flex:1; display:flex; flex-direction:column; gap:2px; background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius); padding:clamp(10px,1.8vw,14px); text-decoration:none; color:inherit;
  transition:border-color 0.12s, background 0.12s; -webkit-tap-highlight-color:transparent;
}
.module-nav a:active { background:var(--bg3); }
@media (hover:hover) { .module-nav a:hover { border-color:var(--card-accent,var(--accent)); } }
.module-nav a.next { text-align:right; }
.module-nav-lbl { font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--muted); }
.module-nav-title { font-size:clamp(12px,1.5vw,14px); font-weight:700; color:var(--text); }