/* ==========================================================================
   MrJGeometry — site stylesheet
   One file controls the look of every page. Sections:
     1. Page basics        4. Lesson list (hub)     7. Practice quiz
     2. Header + nav       5. Notes viewer          8. Small screens
     3. Panels + text      6. Video panel           9. Footer
   ========================================================================== */

/* ---------- 1. Page basics ---------- */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: #d3d3d3;              /* light grey, as on the current site */
  color: #111;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  line-height: 1.5;
}
/* The centered column every page lives in. Widens on big screens,
   shrinks fluidly on Chromebooks, tablets, and phones. */
/* One column width for the WHOLE page — header, every panel, footer —
   scaling with the window (94% of it) up to 1320px. (Uniform width was
   Robert's call in the v7 sample round, 2026-10-19: the v6 build let
   the notes/video panels break out wider than the rest, which read
   like flipping between portrait and landscape pages.) */
.wrap { max-width: min(94vw, 1320px); margin: 0 auto; padding: 0 14px 28px; }
a { color: #1144cc; }
h1 { font-size: 30px; margin: 6px 0 10px; }
h2 { font-size: 23px; margin: 4px 0 10px; }
h3 { font-size: 19px; margin: 14px 0 6px; }
p  { margin: 8px 0; }

/* ---------- 2. Header + navigation ---------- */
/* A deep-blue band with the site name in white and a gold rule under it —
   still plain and clean, but with a clear identity. */
.site-header { background: #1f3a5f; border-bottom: 4px solid #ffd94d; }
.site-header .wrap { padding-top: 18px; padding-bottom: 14px; }
.site-title { font-size: 32px; font-weight: bold; letter-spacing: .3px; }
.site-title a { color: #ffffff; text-decoration: none; }
.site-subtitle { color: #cfdcf2; font-size: 15px; margin-top: 3px; }
/* The nav is a simple row of links. On narrow screens it wraps onto two
   lines — with only four links, no hamburger menu is needed. */
.main-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.main-nav a {
  display: inline-block; padding: 10px 16px; min-height: 44px;
  background: #ffffff; border: 1px solid #ffffff; border-radius: 7px;
  color: #1f3a5f; text-decoration: none; font-size: 16px; font-weight: bold;
}
.main-nav a:hover { background: #ffd94d; border-color: #ffd94d; }  /* gold = hover */
.main-nav a.current { background: #ffd94d; border-color: #ffd94d; }

/* Breadcrumb trail on lesson pages: Home > Lessons > Unit > Lesson */
.breadcrumb { font-size: 14px; color: #333; margin: 14px 2px 10px; }
.breadcrumb a { color: #1144cc; }

/* ---------- 3. Panels + text ---------- */
/* Every content section sits in a white panel — the site's basic building
   block, carried over from our interactive pages. */
.panel {
  background: #fff; border: 1px solid #9a9a9a; border-radius: 10px;
  padding: 18px 20px; margin: 0 0 18px;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.panel > h2:first-child { margin-top: 0; }
/* Every panel title gets a gold underline so sections read as sections. */
.panel h2 { border-bottom: 3px solid #ffd94d; padding-bottom: 6px; }
.placeholder-note {
  background: #fff8e1; border: 1px solid #d8b93a; border-radius: 7px;
  padding: 8px 12px; font-size: 14px;
}
/* --- Overview subsections: Summary / Vocabulary / Main Ideas -----------
   The Overview panel used to read as one grey block of text. Each part
   now has its own look: a blue-bar subhead, roomier spacing, vocabulary
   terms on light-blue bars, and main ideas as separate pale cards. */
.ov-summary { font-size: 18px; line-height: 1.55; }
h3.sec-head {
  font-size: 19px; color: #1f3a5f; margin: 22px 0 10px;
  background: #eef4ff; border-left: 5px solid #2255cc; border-radius: 0 7px 7px 0;
  padding: 7px 12px;
}
dl.vocab { margin: 0; }
dl.vocab dt {
  font-weight: bold; font-size: 17px; color: #1f3a5f;
  background: #f4f9ff; border: 1px solid #c9d6e4; border-bottom: none;
  border-radius: 7px 7px 0 0; padding: 7px 12px; margin-top: 12px;
}
dl.vocab dd {
  margin: 0 0 4px; padding: 8px 12px 10px;
  border: 1px solid #c9d6e4; border-top: none; border-radius: 0 0 7px 7px;
}
ol.main-ideas, ul.main-ideas { margin: 8px 0; padding-left: 22px; }
ol.main-ideas li, ul.main-ideas li {
  background: #fbfbfb; border: 1px solid #e0e0e0; border-radius: 7px;
  padding: 8px 12px; margin: 7px 0;
}

/* ---------- 4. Lesson list (hub page) ---------- */
/* On wide screens the unit panels sit in TWO columns, which roughly
   halves the hub's height; on phones and narrow windows they stack in
   one column. (Executive decision, 2026-10-13: two columns for the hub
   only — a lesson page keeps one column for reading.) */
.units-grid { display: grid; grid-template-columns: 1fr; gap: 0 18px; align-items: start; }
@media (min-width: 900px) { .units-grid { grid-template-columns: 1fr 1fr; } }
.unit-block h2 { margin-bottom: 4px; }
.unit-block p.unit-note { color: #444; font-size: 15px; margin-top: 0; }
ul.lesson-list { list-style: none; margin: 10px 0 0; padding: 0; }
ul.lesson-list li { border-top: 1px solid #dddddd; display: flex; align-items: center;
  gap: 10px; padding: 13px 8px; min-height: 48px; }
ul.lesson-list li:first-child { border-top: none; }
ul.lesson-list li:hover { background: #f4f9ff; }
/* Each lesson is one row of three SIBLING links — name | badge | Open —
   so the badge sits in-line with the name. (2026-10-24 fix: the old
   full-width lesson link left its sibling badge nowhere to go but a
   second line, which read as a separate row. Links cannot nest, so Open
   is its own link to the lesson page, same destination as the name.) */
ul.lesson-list a.lesson-name { flex: 1 1 auto; min-width: 0; align-self: stretch;
  display: flex; align-items: center; color: #111; text-decoration: none; font-size: 17px; }
ul.lesson-list a.go { flex: 0 0 auto; align-self: stretch; display: flex; align-items: center;
  color: #1144cc; font-weight: bold; white-space: nowrap; text-decoration: none; font-size: 17px; }
.has-activity { font-size: 13px; background: #e8f3e8; border: 1px solid #7aa87a;
  border-radius: 20px; padding: 2px 10px; white-space: nowrap; }
/* Badge links on the Lessons hub: same look as the old badge span, but a
   real link — in-line in the row (not the lesson row's flex layout) + hover. */
a.has-activity { color: #111; text-decoration: none; }
a.has-activity:hover { background: #ffd94d; border-color: #a8860a; }
ul.lesson-list a.has-activity { flex: 0 0 auto; align-self: center; margin: 0; }
.unit-cards { font-size: 14px; color: #333; margin: 2px 0 4px; }
.unit-cards a { font-weight: bold; }

/* ---------- 5. Notes viewer ---------- */
/* Students flip through the notes one page at a time. The notes are page
   IMAGES (converted from the PDF) so the PDF itself is never delivered. */
.notes-stage {
  background: #f4f9ff; border: 1px solid #c9d6e4; border-radius: 8px;
  padding: 10px; text-align: center;
}
.notes-stage img { max-width: 100%; height: auto; border: 1px solid #bbb; }
.notes-controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 12px;
}
.notes-controls .page-count { font-weight: bold; }
button, .btn {
  font-family: Arial, sans-serif; font-size: 16px; min-height: 44px;
  padding: 9px 18px; background: #eeeeee; border: 1px solid #9a9a9a;
  border-radius: 7px; cursor: pointer; color: #111; text-decoration: none;
  display: inline-block;
}
button:hover, .btn:hover { background: #ffd94d; }
button:disabled { opacity: .45; cursor: default; background: #eeeeee; }

/* ---------- 6. Video panel ---------- */
.video-stage {
  background: #000; border-radius: 8px; overflow: hidden;
}
.video-stage video { width: 100%; height: auto; display: block; }
/* Caption above each player when a lesson has more than one video part. */
.video-part { font-weight: bold; color: #1f3a5f; margin: 16px 0 6px; }
.video-part:first-of-type { margin-top: 6px; }

/* The interactive-activity link on a lesson page: a full-width
   highlighted row, styled like the lesson rows on the hub, so it stands
   out from the paragraph text around it. */
.activity-link {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: #eef4ff; border: 1px solid #2255cc; border-radius: 8px;
  padding: 14px 16px; min-height: 52px;
  font-weight: bold; color: #1144cc; text-decoration: none; font-size: 17px;
}
.activity-link:hover { background: #ffd94d; border-color: #9a9a9a; color: #111; }
.activity-link .go { white-space: nowrap; }

/* The Interactive Activity panel itself stands out at page load (not
   only when the button is hovered): a deep-gold outline with a warm
   tint inside. First cut was 3px in the pale hover gold (#ffd94d) with
   a barely-there tint — Robert's sample test found it washed out, so
   v7 deepens the gold, thickens the outline to 5px, and strengthens
   the tint. Robert, 2026-10-19. */
.panel.activity-cta { border: 5px solid #d9a400; background: #fff6d8; }

/* Resource entries on the Extra Help page: link on one line, its
   description in smaller plain text under it. */
ul.practice-links li.res { flex-direction: column; align-items: flex-start; gap: 2px; }
.res-desc { font-weight: normal; color: #333; font-size: 15px; }

/* The two classroom posters on the home page, side by side when the
   screen is wide enough, stacked when it is not. Since Full Build v6 the
   posters are CSS backgrounds on <div>s, not <img> tags, so a right
   click offers no "Save image as" (Robert, 2026-10-17) — deterrence
   level, the same as the videos; the "protected" class on the container
   also suppresses the right-click menu there. Each poster's shape comes
   from an inline aspect-ratio stamped by the builder. */
.posters { display: flex; gap: 14px; }
.posters .poster { width: calc(50% - 7px); background-size: cover;
  background-position: center; border: 1px solid #9a9a9a; border-radius: 8px; }

/* ---------- 6b. Want More Practice (worksheet links) ---------- */
ul.practice-links { list-style: none; margin: 10px 0 0; padding: 0; }
ul.practice-links li {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; border-top: 1px solid #dddddd; padding: 11px 8px; min-height: 48px;
}
ul.practice-links li:first-child { border-top: none; }
ul.practice-links a { font-weight: bold; }
ul.practice-links .sol { white-space: nowrap; }

/* ---------- 7. Practice quiz ---------- */
/* Same behavior as our other pages: one question at a time, hint + retry on
   the first miss, full explanation after the second miss, and the score
   counts first-try answers only. The engine lives in assets/site.js. */
.quiz-strip { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.quiz-strip span {
  border: 1px solid #9a9a9a; border-radius: 20px; padding: 3px 12px;
  font-size: 14px; background: #eeeeee;
}
.quiz-strip span.now { background: #ffd94d; font-weight: bold; }
.quiz-strip span.right { background: #cdeccd; }
.quiz-strip span.locked { background: #f3d9d9; }
.quiz-question { font-size: 18px; font-weight: bold; margin: 12px 0; }
.quiz-choices { display: grid; gap: 8px; margin: 10px 0; }
.quiz-choices button { text-align: left; }
.quiz-choices button.picked-right { background: #cdeccd; border-color: #4a8f4a; }
.quiz-choices button.picked-wrong {
  background: #f3d9d9; border-color: #b05555; text-decoration: line-through;
}
.quiz-feedback { border-radius: 7px; padding: 10px 14px; margin: 12px 0; display: none; }
.quiz-feedback.info    { background: #eef4ff; border-left: 5px solid #2255cc; display: block; }
.quiz-feedback.success { background: #eaf7ea; border-left: 5px solid #3f9e2f; display: block; }
.quiz-feedback.warn    { background: #fff6da; border-left: 5px solid #d8b93a; display: block; }
.quiz-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; }
.quiz-score { font-weight: bold; }

/* Previous / Next lesson links at the bottom of every lesson page */
.prev-next { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* ---------- 8. Small screens ---------- */
@media (max-width: 640px) {
  body { font-size: 16px; }
  h1 { font-size: 25px; }
  .site-title { font-size: 24px; }
  .panel { padding: 14px; }
  .main-nav a { flex: 1 1 40%; text-align: center; }
  .notes-controls { flex-wrap: wrap; justify-content: center; }
}

/* ---------- 9. Footer ---------- */
.site-footer { color: #333; font-size: 14px; text-align: center; padding: 8px 0 22px; }

/* ==========================================================================
   SCALING V6:START — responsive media sizing (Robert, 2026-10-19)
   Robert's original site used fixed sizes, so lesson slides and videos
   either floated in grey space on a large monitor or overflowed a small
   laptop screen. These rules size media by BOTH limits at once — the
   available width AND the viewport height left after the heading and
   controls — so the slide/video, its section heading, and its controls
   are visible together without scrolling, on any screen. Because the
   units are the browser's own viewport units (dvh/vw), Windows display
   scaling and browser zoom are accounted for automatically.
   ========================================================================== */

/* Notes viewer: the stage becomes a box with the notes pages' own
   aspect ratio (--notes-ar, stamped per lesson by the builder from the
   real page images). Its width is the smaller of the panel width and
   the width whose height fits the budget: the viewport height minus
   210px. The reserve only has to cover what is on screen WITH the
   slide once the student has scrolled to the section — the section
   heading, the instruction line, and the Previous/Next controls below
   the slide. (v6 used 300px, which also held the site header that has
   scrolled away by then; Robert's test found the slides shrank more
   than they needed to, so v7 recalibrated to 210px.) The plain vh line
   comes first; browsers that know dvh (all current Chromebooks) use
   the second line. The max() floor keeps the slide usable on very
   short windows instead of letting the size go negative. */
.notes-stage { aspect-ratio: var(--notes-ar, 1.3333);
  width: min(100%, calc(max(240px, 100vh - 210px) * var(--notes-ar, 1.3333)));
  width: min(100%, calc(max(240px, 100dvh - 210px) * var(--notes-ar, 1.3333)));
  margin: 0 auto; }
.notes-stage img { width: 100%; height: 100%; object-fit: contain;
  display: block; }

/* Video: the same rule with the standard 16:9 shape, so a player plus
   its caption and heading fit the screen the same way. */
.video-stage {
  width: min(100%, calc(max(240px, 100vh - 210px) * 1.7778));
  width: min(100%, calc(max(240px, 100dvh - 210px) * 1.7778));
  margin: 0 auto; }

/* Uniform width (v7 sample round): there is deliberately NO breakout
   rule here anymore — every panel on the page uses the one .wrap
   column width, so the page reads as a single consistent document at
   every screen size. */
/* SCALING V6:END */