/* Elasticsearch / OpenSearch course-level consistency fixes.
   Scoped to lesson pages so the academy-wide stylesheet remains untouched. */

/* Never let a long title, API token, URL, breadcrumb, nav label, or address create page-level horizontal scroll. */
html,
body.lesson-page {
  max-width: 100%;
  overflow-x: clip;
}

.lesson-page .lesson-shell,
.lesson-page .lesson-main,
.lesson-page .lesson-container,
.lesson-page .lesson-content,
.lesson-page .lesson-content section,
.lesson-page .lesson-header,
.lesson-page .lesson-toc,
.lesson-page .objectives,
.lesson-page .objective,
.lesson-page .callout,
.lesson-page .checkpoint,
.lesson-page .lesson-nav,
.lesson-page .lesson-support,
.lesson-page .support-grid,
.lesson-page .donation-card {
  min-width: 0;
  max-width: 100%;
}

.lesson-page .lesson-header h1,
.lesson-page .lesson-content h2,
.lesson-page .lesson-content h3,
.lesson-page .lesson-breadcrumbs,
.lesson-page .lesson-meta span,
.lesson-page .sidebar-lesson,
.lesson-page .sidebar-chapter summary,
.lesson-page .lesson-nav strong,
.lesson-page .callout,
.lesson-page .objective,
.lesson-page .checkpoint,
.lesson-page .reference-list li,
.lesson-page .donation-card code,
.lesson-page .lesson-content a,
.lesson-page .lesson-content code:not(pre code) {
  overflow-wrap: anywhere;
  word-break: normal;
}

.lesson-page .donation-card code {
  word-break: break-all;
}

/* Generated chapters used both wrapper names. Make both true internal scroll containers. */
.lesson-page .table-wrap,
.lesson-page .table-scroll {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  margin: 24px 0;
}

.lesson-page .table-wrap .data-table,
.lesson-page .table-scroll .data-table {
  margin: 0;
}

/* All course tables are normalized to the academy data-table class by the audit. */
.lesson-page .data-table {
  max-width: 100%;
}

.lesson-page .data-table th,
.lesson-page .data-table td {
  overflow-wrap: anywhere;
  word-break: normal;
  vertical-align: middle;
}

/* Code must scroll inside its own window rather than widening the page. */
.lesson-page .code-window,
.lesson-page .code-window pre {
  max-width: 100%;
}

.lesson-page .code-window pre {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Supplemental syntax colors use the same token variables as the academy runtime. */
.lesson-page .token-keyword { color: var(--syntax-keyword); }
.lesson-page .token-function { color: var(--syntax-function); }
.lesson-page .token-string { color: var(--syntax-string); }
.lesson-page .token-number { color: var(--syntax-number); }
.lesson-page .token-comment { color: var(--syntax-comment); font-style: italic; }
.lesson-page .token-name { color: var(--syntax-name); }
.lesson-page .token-operator { color: var(--syntax-operator); }
.lesson-page .token-punctuation { color: color-mix(in srgb, var(--code-text) 76%, var(--muted)); }

/* Keep the structural reference list consistent even though the global stylesheet intentionally stays generic. */
.lesson-page .reference-list {
  padding-left: 1.25rem;
}

@media (max-width: 1050px) {
  .lesson-page .data-table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .lesson-page .data-table th,
  .lesson-page .data-table td {
    min-width: max-content;
  }
}

@media (max-width: 640px) {
  .lesson-page .lesson-header h1 {
    font-size: clamp(2rem, 11vw, 3.25rem);
    line-height: 1;
    letter-spacing: -0.045em;
  }

  .lesson-page .code-head {
    gap: 8px;
  }

  .lesson-page .code-title {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}