/* Shared by standalone course pages and the knowledge base iframes. */
.course-chapter-picker { display: none; }
.course-table-scroll { max-width: 100%; overflow-x: auto; }

/* Media/charts must never overflow their container, at any viewport width. */
img, video, canvas { max-width: 100%; height: auto; }
svg { max-width: 100%; height: auto; }

@media (max-width: 768px) {
  html { -webkit-text-size-adjust: 100%; }
  body { padding: 12px; overflow-wrap: anywhere; }
  .double-border { border-radius: 16px; }
  .container { min-width: 0; max-width: 100%; padding: 16px 0 24px; }
  .double-border > .container { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0; }
  .sidebar { min-width: 0; padding: 12px; border-right: 0; border-bottom: 1px solid #fdebb3; }
  .sidebar.has-chapter-picker { display: none; }
  .course-chapter-picker {
    display: block;
    min-width: 0;
    padding: 12px;
    background: #fefcf5;
    border-bottom: 1px solid #fdebb3;
  }
  .course-chapter-picker label { display: block; margin-bottom: 8px; color: #714717; font-size: 13px; }
  .course-chapter-picker select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 10px 8px;
    border: 1px solid #e6d7af;
    border-radius: 8px;
    background: #fff;
    color: #1e3a8a;
    font-family: inherit;
    font-size: 16px;
    text-overflow: ellipsis;
    cursor: pointer;
  }
  .chapter-list a { min-height: 44px; }
  .main-content { min-width: 0; max-width: 100%; padding: 16px 14px; font-size: 15px; line-height: 1.75; white-space: normal; overflow-wrap: anywhere; word-break: normal; }
  .main-content h1 { font-size: 22px; line-height: 1.5; }
  .main-content h2 { font-size: 20px; line-height: 1.5; }
  .main-content h3 { font-size: 17px; line-height: 1.5; }
  .main-content p, .main-content li { line-height: 1.75; }
  .main-content pre { font-size: 13px; line-height: 1.6; }
  .main-content ul, .main-content ol { padding-left: 1.4em; }
  pre { max-width: 100%; overflow-x: auto; white-space: pre; overflow-wrap: normal; }
  .course-table-scroll { margin: 16px 0; overscroll-behavior-x: contain; }
  .course-table-scroll table { margin: 0; }
  .footer-nav { gap: 12px; flex-wrap: wrap; margin-top: 28px; }
  .footer-nav a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; flex: 1 1 120px; text-align: center; }
  .course-wrapper, body > .course-card { min-width: 0; width: 100%; padding: 20px 16px; }
  .catalog-grid, .grid-2col, .course-list { grid-template-columns: minmax(0, 1fr); }
  .chapter-card, .course-card, .info-block { min-width: 0; }
  .header-title, .subhead { flex-wrap: wrap; }
  .header-title h1, .course-title { font-size: 1.75rem; overflow-wrap: anywhere; }
  .hero { padding: 28px 16px; border-radius: 20px; }
  .hero h1 { font-size: 28px; }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .footer a { white-space: normal; }
}