/* Firebase / Cloud Firestore course consistency and overflow hardening.
   Scoped to lesson pages so Academy-wide shared styles remain untouched. */

body.lesson-page {
  overflow-x: hidden;
  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 .concept-grid,
.lesson-page .support-grid,
.lesson-page .lesson-nav,
.lesson-page .lesson-nav > *,
.lesson-page .code-window,
.lesson-page .code-head {
  min-width: 0;
  max-width: 100%;
}

.lesson-page .lesson-header h1,
.lesson-page .lesson-header > p,
.lesson-page .lesson-meta span,
.lesson-page .lesson-toc a,
.lesson-page .sidebar-lesson,
.lesson-page .lesson-nav strong,
.lesson-page .callout,
.lesson-page .objective,
.lesson-page .reference-list li,
.lesson-page .checklist li,
.lesson-page .code-title,
.lesson-page table th,
.lesson-page table td {
  overflow-wrap: anywhere;
  word-break: normal;
}

.lesson-page .lesson-content code:not(pre code),
.lesson-page .donation-card code {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.lesson-page .code-window {
  overflow: hidden;
}

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

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

.lesson-page .code-title {
  flex: 1 1 auto;
}

.lesson-page .copy-code {
  flex: 0 0 auto;
}

/* Older chapter batches used a strong + ul inside .objectives instead of
   the canonical .objective cards. Give that retained markup the same visual
   language without deleting or rewriting its lesson content. */
.lesson-page .objectives > strong:first-child {
  grid-column: 1 / -1;
  margin: 0 0 9px;
  color: var(--text);
  font-size: clamp(1.8rem, 3.5vw, 2.7rem);
  font-weight: 750;
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.lesson-page .objectives > ul {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: firestore-objective;
}

.lesson-page .objectives > ul > li {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 34px 15px 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.lesson-page .objectives > ul > li::before {
  counter-increment: firestore-objective;
  content: counter(firestore-objective, decimal-leading-zero);
  position: absolute;
  top: 12px;
  left: 15px;
  color: var(--accent);
  font: 700 0.66rem var(--font-mono);
}

/* References and later-batch checklists previously relied on unstyled lists. */
.lesson-page .reference-list,
.lesson-page .checklist {
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  list-style: none;
}

.lesson-page .reference-list li,
.lesson-page .checklist li {
  margin: 0;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
}

.lesson-page .reference-list a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 42%, transparent);
  text-underline-offset: 3px;
}

.lesson-page .checklist li::before {
  content: "✓";
  display: inline-block;
  margin-right: 0.55em;
  color: var(--success);
  font-weight: 800;
}

/* Keep tables inside the lesson width at every viewport. */
.lesson-page .data-table {
  max-width: 100%;
}

.lesson-page .data-table th,
.lesson-page .data-table td {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Architecture/code content may scroll internally; the page itself should not. */
.lesson-page .architecture-diagram,
.lesson-page .math-display {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 760px) {
  .lesson-page .lesson-toc ol {
    columns: 1;
  }

  .lesson-page .objectives,
  .lesson-page .objectives > ul,
  .lesson-page .concept-grid,
  .lesson-page .lesson-nav {
    grid-template-columns: minmax(0, 1fr);
  }

  .lesson-page .lesson-nav .next {
    text-align: left;
  }

  .lesson-page .lesson-header h1 {
    font-size: clamp(2rem, 10vw, 3.3rem);
    letter-spacing: -0.045em;
    overflow-wrap: anywhere;
  }
}