/* training.css — responsive + print polish for the Training app.
   The views use inline styles heavily, so the mobile rules use attribute
   selectors + !important to override inline padding/layout. */

/* ----- mobile ----- */
@media (max-width: 640px) {
  section[style] { padding: 24px 16px !important; }
  .site-bar { flex-wrap: wrap; }
  .section-tabs { flex-wrap: wrap; }
  /* the lesson two-column layout stacks */
  .lesson-shell { display: block !important; }
  .lesson-toc { width: auto !important; position: static !important; margin-bottom: 16px; }
}

/* ----- lesson layout (course outline sidebar + content) ----- */
.lesson-shell { display: flex; gap: 28px; align-items: flex-start; max-width: 1100px; margin: 0 auto; padding: 32px 48px; }
.lesson-toc { width: 260px; flex: 0 0 260px; position: sticky; top: 16px; font-size: 14px; }
.lesson-toc a { color: #1F4E79; text-decoration: none; display: block; padding: 4px 0; }
.lesson-toc a.current { font-weight: 700; }
.lesson-toc .mod { font-weight: 600; color: #252423; margin: 12px 0 4px; }
.lesson-main { flex: 1 1 auto; min-width: 0; }

/* highlight.js code blocks keep rounded corners + padding */
.lesson-main pre code.hljs { border-radius: 8px; padding: 14px 16px; font-size: 14px; }

/* ----- print (certificate) ----- */
@media print {
  .site-bar, footer, .no-print { display: none !important; }
  body { background: #fff; }
}