/* ============================================
   TaskFlow Course — Shared Styles
   ============================================ */

/* === Theme Variables === */
:root {
  --ink: #172033;
  --muted: #526071;
  --line: #d8dee8;
  --bg: #f5f7fb;
  --card: #fff;
  --accent: #2d5bff;
  --code-bg: #0f172a;
  --good: #159957;
  --warn: #d97706;
  --soft: #f4f7ff;
  --code-inline-bg: #eef1f6;
  --pre-bg: #0f172a;
  --pre-color: #f8fafc;
  --nav-bg: #f4f7ff;
  --sandbox-border: #d8dee8;
  --sandbox-header: #f2f5f9;
  --progress-bg: #e2e8f0;
  --progress-fill: #2d5bff;
  --shadow: rgba(0,0,0,0.04);
  --shadow-hover: rgba(0,0,0,0.08);
}

[data-theme="dark"] {
  --ink: #e2e8f0;
  --muted: #94a3b8;
  --line: #334155;
  --bg: #0f172a;
  --card: #1e293b;
  --accent: #60a5fa;
  --code-bg: #020617;
  --good: #4ade80;
  --warn: #fbbf24;
  --soft: #1e293b;
  --code-inline-bg: #334155;
  --pre-bg: #020617;
  --pre-color: #e2e8f0;
  --nav-bg: #1e293b;
  --sandbox-border: #334155;
  --sandbox-header: #1e293b;
  --progress-bg: #334155;
  --progress-fill: #60a5fa;
  --shadow: rgba(0,0,0,0.2);
  --shadow-hover: rgba(0,0,0,0.3);
}

/* === Base === */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 11.2pt;
  line-height: 1.78;
  transition: background 0.3s, color 0.3s;
}

/* === Layout === */
.wrapper { max-width: 980px; margin: auto; background: var(--card); box-shadow: 0 0 0 1px var(--line); transition: background 0.3s; }

/* === Cover === */
.cover {
  padding: 50px 70px;
  background: linear-gradient(135deg, #eef3ff 0%, #fff 55%);
  border-bottom: 1px solid var(--line);
}
[data-theme="dark"] .cover {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 55%);
}
.cover h1 { font-size: 36px; line-height: 1.15; margin: 0 0 12px; }
.cover h2 { font-size: 24px; color: #3557b9; margin: 0 0 16px; }
[data-theme="dark"] .cover h2 { color: #60a5fa; }
.cover .lead { font-size: 18px; color: #334155; margin: 0 0 20px; }
[data-theme="dark"] .cover .lead { color: #94a3b8; }
.meta { font-size: 17px; color: var(--muted); }
.small { font-size: 14px; color: var(--muted); }

/* === TOC === */
.toc { padding: 44px 70px; border-bottom: 1px solid var(--line); }
.toc a { color: #2948b9; text-decoration: none; }
[data-theme="dark"] .toc a { color: #60a5fa; }
.toc li { margin: 5px 0; }

/* === Chapter === */
.chapter { padding: 40px 70px; border-bottom: 1px solid var(--line); }
.chapter h2 { font-size: 28px; line-height: 1.22; margin: 0 0 14px; }
.chapter h3 { font-size: 19px; margin-top: 24px; }
.chapter h4 { font-size: 16px; margin-top: 18px; }

/* === Code === */
code.inline {
  font-family: 'DejaVu Sans Mono', Consolas, monospace;
  background: var(--code-inline-bg);
  padding: 1px 5px;
  border-radius: 5px;
  font-size: 0.92em;
}
pre {
  background: var(--pre-bg);
  color: var(--pre-color);
  padding: 17px 18px;
  border-radius: 10px;
  overflow: auto;
  font-size: 14px;
  line-height: 1.55;
}
pre code { background: none; padding: 0; }

/* === Tables === */
table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14px; }
th, td { border: 1px solid var(--line); padding: 10px; vertical-align: top; }
th { background: #f2f5f9; text-align: left; }
[data-theme="dark"] th { background: #1e293b; }

/* === Callouts === */
.callout {
  border-left: 5px solid var(--accent);
  background: var(--soft);
  padding: 16px 18px;
  margin: 18px 0;
  border-radius: 0 6px 6px 0;
}
.callout.warn { border-left-color: var(--warn); background: #fff8ed; }
.callout.tip { border-left-color: var(--good); background: #effaf4; }
[data-theme="dark"] .callout.warn { background: #422006; }
[data-theme="dark"] .callout.tip { background: #052e16; }

/* === Task boxes === */
.task {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px;
  margin: 18px 0;
}
.task h4 { margin: 0 0 8px; }

/* === Answer boxes === */
.answer {
  border-left: 4px solid var(--good);
  background: #effaf4;
  padding: 14px 16px;
  margin: 12px 0;
  border-radius: 0 6px 6px 0;
}
[data-theme="dark"] .answer { background: #052e16; }

/* === Figures === */
.figure { margin: 24px 0; text-align: center; }
.figure svg { max-width: 100%; height: auto; }
.caption { font-size: 13px; color: var(--muted); margin-top: 6px; }

/* === Navigation bar === */
.nav {
  padding: 14px 70px;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(8px);
  transition: background 0.3s;
}
.nav a { color: var(--accent); text-decoration: none; font-weight: 500; }
.nav a:hover { text-decoration: underline; }

/* === Lesson cards === */
.lesson-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
  margin: 24px 0;
}
.lesson-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
}
.lesson-card:hover {
  box-shadow: 0 8px 24px var(--shadow-hover);
  border-color: var(--accent);
  transform: translateY(-2px);
}
.lesson-card .num {
  font-weight: 700;
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.lesson-card h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}
.lesson-card p {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
  flex: 1;
}
.lesson-card .badge {
  display: inline-block;
  background: var(--soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  align-self: flex-start;
}

/* === Buttons === */
.btn {
  display: inline-block;
  background: var(--accent);
  color: white;
  padding: 10px 24px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 500;
  margin-top: 12px;
  border: none;
  cursor: pointer;
  font-size: 15px;
  transition: background 0.15s;
}
.btn:hover { background: #1e4ad0; }
.btn-secondary { background: #6c757d; }
.btn-secondary:hover { background: #545b62; }

/* === Ref === */
.ref { font-size: 13px; color: var(--muted); }

/* === Page break === */
.pagebreak { break-after: page; }

/* === Check list === */
.check li { margin: 6px 0; }
.checklist li { margin: 5px 0; }

/* === Theme toggle button === */
.theme-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 4px 12px var(--shadow);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}
.theme-toggle:hover {
  box-shadow: 0 6px 20px var(--shadow-hover);
  transform: scale(1.1);
}

/* === Progress bar === */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--progress-fill);
  z-index: 9999;
  transition: width 0.3s;
}

/* === Progress tracker widget === */
.progress-tracker {
  position: fixed;
  bottom: 84px;
  right: 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 13px;
  box-shadow: 0 4px 16px var(--shadow);
  z-index: 999;
  min-width: 200px;
  display: none;
  transition: background 0.3s;
}
.progress-tracker.visible { display: block; }
.progress-tracker h4 { margin: 0 0 8px; font-size: 14px; }
.progress-tracker .progress-list { list-style: none; padding: 0; margin: 0; }
.progress-tracker .progress-list li {
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.progress-tracker .progress-list .done { color: var(--good); }
.progress-tracker .progress-list .todo { color: var(--muted); }
.progress-tracker .progress-bar-bg {
  height: 6px;
  background: var(--progress-bg);
  border-radius: 3px;
  margin-top: 8px;
  overflow: hidden;
}
.progress-tracker .progress-bar-fill {
  height: 100%;
  background: var(--progress-fill);
  border-radius: 3px;
  transition: width 0.4s;
}

/* === Sandbox === */
.sandbox {
  margin: 20px 0;
  border: 1px solid var(--sandbox-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--card);
  transition: background 0.3s;
}
.sandbox-header {
  background: var(--sandbox-header);
  padding: 10px 16px;
  border-bottom: 1px solid var(--sandbox-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sandbox-header span { font-weight: 600; font-size: 14px; }
.sandbox-body { display: grid; grid-template-columns: 1fr 1fr; min-height: 200px; }
@media (max-width: 700px) { .sandbox-body { grid-template-columns: 1fr; } }
.sandbox-editor {
  border-right: 1px solid var(--sandbox-border);
  display: flex;
  flex-direction: column;
}
.sandbox-editor textarea {
  flex: 1;
  width: 100%;
  border: none;
  padding: 14px;
  font-family: 'DejaVu Sans Mono', Consolas, monospace;
  font-size: 13px;
  line-height: 1.5;
  resize: none;
  background: var(--pre-bg);
  color: var(--pre-color);
  outline: none;
  tab-size: 2;
}
.sandbox-preview {
  display: flex;
  flex-direction: column;
}
.sandbox-preview iframe {
  flex: 1;
  border: none;
  background: white;
  min-height: 200px;
}
[data-theme="dark"] .sandbox-preview iframe { background: #1e293b; }
.sandbox-run {
  padding: 8px 16px;
  background: var(--accent);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}
.sandbox-run:hover { background: #1e4ad0; }

/* === Mark as done button === */
.mark-done {
  display: inline-block;
  padding: 6px 14px;
  border: 2px solid var(--good);
  color: var(--good);
  background: transparent;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.mark-done:hover { background: var(--good); color: white; }
.mark-done.completed {
  background: var(--good);
  color: white;
  pointer-events: none;
}

/* === Print === */
@media print {
  body { background: white; }
  .wrapper { box-shadow: none; max-width: none; }
  .nav { display: none; }
  .theme-toggle, .progress-tracker, .progress-bar { display: none !important; }
  .cover { min-height: auto; page-break-after: always; }
  .toc { page-break-after: always; }
  .chapter { break-inside: auto; }
  .pagebreak { break-after: page; }
}

/* === Добавлено: глоссарий, самопроверка, чек-лист песочниц === */
.glossary { width:100%%; border-collapse:collapse; margin:14px 0; }
.glossary th, .glossary td { border:1px solid #d0d0d0; padding:8px 10px; text-align:left; vertical-align:top; }
.glossary th { background:#f4f4f4; }
.quiz { margin:12px 0; }
.quiz-q { margin:10px 0 6px; }
.quiz-a { margin:6px 0 10px; padding:10px 12px; border-left:3px solid #4caf50; background:rgba(76,175,80,.08); border-radius:6px; }
.quiz-btn { margin:0 0 4px; padding:6px 12px; border:1px solid #4caf50; background:#fff; color:#2e7d32; border-radius:6px; cursor:pointer; font-size:.9em; }
.quiz-btn:hover { background:rgba(76,175,80,.12); }
.sandbox-tip { margin:10px 0 6px; padding:10px 12px; border:1px dashed #999; border-radius:8px; background:rgba(0,0,0,.02); font-size:.92em; }
.sandbox-tip b { color:#333; }