/* Mathematics chapter navigation and consistent responsive layout, 2026-10-21.
   Scoped to the Mathematics course; does not change the wider site or learning content. */

/* The site body is a column flex container. Without a definite width, its
   chapter-top-nav child shrink-wraps to its buttons on some devices. */
body > .chapter-top-nav {
  display: grid;
  width: 100%;
  max-width: 1100px;
  box-sizing: border-box;
  flex: 0 0 auto;
  margin: 12px auto 18px;
  padding: 0 16px;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 10px;
  align-items: center;
}
body > .chapter-top-nav .prev-link { justify-self: start; }
body > .chapter-top-nav .all-link { justify-self: center; }
body > .chapter-top-nav .next-link, body > .chapter-top-nav .math-next-pending { justify-self: end; }

.chapter-top-nav .chapter-nav-button,
.math-notes-page .chapter-bottom-nav .chapter-nav-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 14px;
  max-width: 100%;
  border-radius: 10px;
  box-sizing: border-box;
  text-decoration: none;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
  cursor: pointer;
  touch-action: manipulation;
}
.chapter-top-nav .chapter-nav-button:focus-visible,
.math-notes-page .chapter-bottom-nav .chapter-nav-button:focus-visible {
  outline: 3px solid #15803d;
  outline-offset: 3px;
}
.chapter-top-nav .chapter-nav-button:hover,
.math-notes-page .chapter-bottom-nav .chapter-nav-button:hover {
  background: #e9f9ee;
  border-color: #16843d;
}
.math-notes-page .chapter-bottom-nav {
  display: grid;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 30px 0 0;
  padding: 18px 0 24px;
  box-sizing: border-box;
  grid-template-columns: minmax(0,1fr) minmax(0,auto) minmax(0,1fr);
  align-items: center;
  column-gap: 12px;
  row-gap: 10px;
}
.math-notes-page .chapter-bottom-nav .prev-link {justify-self:start}
.math-notes-page .chapter-bottom-nav .all-link {justify-self:center}
.math-notes-page .chapter-bottom-nav .next-link,
.math-notes-page .chapter-bottom-nav .math-next-pending {justify-self:end}
.chapter-top-nav .math-next-pending,
.math-notes-page .chapter-bottom-nav .math-next-pending {
  display: inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  box-sizing:border-box;
  min-height:44px;
  max-width:100%;
  padding:10px 14px;
  border:1px dashed #cbd5e1;
  border-radius:10px;
  color:#64748b;
  background:#f1f5f9;
  font-weight:700;
}

/* Same reading column for every chapter, regardless of chapter-specific CSS. */
body > .math-notes-page,
body > main.math-notes-page,
body > #main-content.math-notes-page {
  display:block;
  flex: 0 0 auto;
  width:100%;
  max-width:1100px;
  min-width:0;
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
  padding-left:16px;
  padding-right:16px;
}
.math-notes-page,
.math-notes-page *,
.math-notes-page *::before,
.math-notes-page *::after { box-sizing: border-box; }
.math-notes-page > section,
.math-notes-page .math-chapter-hero,
.math-notes-page .math-topic,
.math-notes-page .math-practice,
.math-notes-page .worked-example,
.math-notes-page .question-card,
.math-notes-page .math-page-toc,
.math-notes-page .math-revision-checklist,
.math-notes-page .math-revision-box {
  min-width:0;
  max-width:100%;
}
.math-notes-page .math-topic-heading,
.math-notes-page .q-head {flex-wrap:wrap;min-width:0;}
.math-notes-page .book-figure,
.math-notes-page figure {max-width:100%;}
.math-notes-page img,
.math-notes-page video {max-width:100%;height:auto;}
.math-notes-page .math-responsive-table,
.math-notes-page .math-table-scroll,
.math-notes-page .ratio-table-wrap {max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.math-notes-page table {max-width:100%;}
.math-notes-page .worked-solution,
.math-notes-page .answer-body,
.math-notes-page .math-key-box,
.math-notes-page .math-method-box {
  min-width:0;
  max-width:100%;
  overflow-wrap:break-word;
}
/* Let long mathematical displays scroll INSIDE the answer / formula box,
   not stretch the page or reduce the note-column width. */
.math-notes-page mjx-container[display="true"],
.math-notes-page mjx-container[display="block"],
.math-notes-page .MathJax_Display,
.math-notes-page .math-display {
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}
.math-notes-page .answer-toggle summary {cursor:pointer;touch-action:manipulation;min-height:44px;}

@media (min-width: 681px) and (max-width: 920px) {
  body > .chapter-top-nav {padding-left:14px;padding-right:14px;}
  body > .math-notes-page {padding-left:14px;padding-right:14px;}
}
@media (max-width: 680px) {
  body > .chapter-top-nav,
  .math-notes-page .chapter-bottom-nav {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    row-gap:8px;
    text-align:center;
  }
  body > .chapter-top-nav {padding:0 12px;margin:10px auto 16px;}
  body > .math-notes-page {padding-left:12px;padding-right:12px;}
  body > .chapter-top-nav .prev-link,
  body > .chapter-top-nav .all-link,
  body > .chapter-top-nav .next-link,
  body > .chapter-top-nav .math-next-pending,
  .math-notes-page .chapter-bottom-nav .prev-link,
  .math-notes-page .chapter-bottom-nav .all-link,
  .math-notes-page .chapter-bottom-nav .next-link,
  .math-notes-page .chapter-bottom-nav .math-next-pending {
    justify-self:stretch;
    width:100%;
  }
  .math-notes-page .math-chapter-hero h2 {overflow-wrap:break-word;}
}
@media (max-width: 380px) {
  body > .math-notes-page {padding-left:10px;padding-right:10px;}
  .math-notes-page .math-practice,
  .math-notes-page .math-page-toc {padding-left:12px;padding-right:12px;}
}

/* Very narrow phones: long course/header names must wrap instead of
   pushing the browser's horizontal layout beyond the screen. */
@media (max-width: 420px) {
  body > header {width:100%;min-width:0;box-sizing:border-box;}
  body > header h1 {min-width:0;max-width:100%;overflow-wrap:anywhere;font-size:clamp(1.05rem,5.4vw,1.6rem);}
  .math-notes-page .math-chapter-hero h2,
  .math-notes-page .math-topic-heading h2,
  .math-notes-page .math-page-toc a,
  .math-notes-page .question-card,
  .math-notes-page .worked-example {overflow-wrap:anywhere;}
}

/* On 320px-wide devices, a few long legacy formula/exam-tip blocks have
   an intrinsic width wider than their card. Scroll only that card rather
   than stretching the whole page or clipping the calculation. */
@media (max-width: 340px) {
  .math-notes-page .math-topic {
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}