/* RESPONSIVE LESSON SITE
   Files: index.html (content), styles.css (appearance), lesson.js (interaction).
   Header: horizontal at 701px+, stacked at 700px and below.
   Right column: .tool-tabs buttons select .tools-body panels.
   Vocabulary definitions/examples are editable data attributes in index.html.
*/

/* Edit these values to change the design globally. */
:root {
  --page-background: #f5f5f5;
  --header-background: #173b59; /* Header, underline and vocabulary tint share this color. */
  --tool-item-gap: 6mm; /* Vocabulary gap. */
  --tool-menu-gap: 1.6cm; /* Gap between the two menu labels. */
  --surface: #ffffff;
  --text: #20354b;
  --heading: #111111;
  --muted: #7c8796;
  --border: #e9e9ec;
  --blue: #3975ff;
  --blue-light: #e3efff;
  --yellow: #d39b00;
  --instruction-background: #fffbe6;
  --answer-background: #fffdf3;
  --green: #40ca4b;
  --radius: 12px;
  --page-padding: clamp(12px, 1.25vw, 24px);
  --column-gap: 16px;
  --body-size: 16px;
}

/* Predictable widths: padding is included in element dimensions. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page-background);
  color: var(--text);
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: var(--body-size);
  line-height: 1.5;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
img, video { display: block; max-width: 100%; }
a { color: var(--blue); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
h1, h2, h3 { margin: 0 0 16px; color: var(--heading); line-height: 1.25; }
h1 { font-size: clamp(24px, 2.4vw, 32px); }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

/* Desktop: approximately 70% lesson / 30% sidebar, as pictured.
   The HEADER spans both columns and comes before their content. */
.site-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(340px, 1fr);
  grid-template-areas: "header header" "lesson sidebar";
  align-items: start;
  gap: var(--column-gap);
  max-width: 1600px;
  margin-inline: auto;
  padding: var(--page-padding);
}
.site-layout > * { min-width: 0; }
/* Image on the left, vertical divider, and lesson copy on the right. */
.site-header {
  grid-area: header;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 24px;
  padding: 24px;
  background: var(--header-background);
  color: #ffffff;
  border: 0;
  border-radius: 0;
  font-family: "Times New Roman", Times, serif;
}
.lesson-header-image {
  flex: 0 1 460px;
  width: 40%;
  max-width: min(460px, 40%);
  min-width: 0;
  height: auto;
  margin: 0;
  object-fit: contain;
}
.lesson-header-copy {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 12px 0 12px 28px;
  border-left: 1px solid rgb(255 255 255 / 35%);
  text-align: left;
}
.lesson-header-eyebrow {
  margin: 0 0 20px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}
.site-header .lesson-header-title {
  margin: 0 0 26px;
  color: #ffffff;
  font-size: clamp(28px, 2.6vw, 36px);
  font-weight: 700;
  line-height: 1.2;
}
.lesson-header-details {
  display: block;
  margin: 0;
  color: #dce6ef;
  font-size: 16px;
  line-height: 1.5;
}
.lesson-header-details > span { display: block; }
.lesson-header-duration {
  display: block;
  margin: 8px 0 0;
  padding-left: 0;
  border: 0;
  color: #dce6ef;
  font-size: 16px;
  line-height: 1.5;
}

/* Left column: white lesson card and separated toolbar. */
.lesson-panel {
  grid-area: lesson;
  background: var(--surface);
  border-radius: var(--radius);
  min-height: 520px;
}
.lesson-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.lesson-toolbar > :first-child {
  margin: 0;
  padding-left: 20px;
  border-left: 4px solid var(--green);
  font-size: 16px;
  font-weight: 400;
}
.toolbar-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--blue-light);
  color: var(--blue);
}
.icon-button:hover { background: #d4e5ff; }
.icon-button:disabled { opacity: .5; cursor: default; }
.lesson-body { padding: 28px clamp(20px, 5vw, 66px) 40px; }
.lesson-steps { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  background: #f6f6f6;
  border: 0;
  border-radius: 6px;
  font-size: 14px;
  color: var(--text);
}
.step.is-active, .step[aria-current="step"] { background: var(--instruction-background); }
.step-time { color: var(--muted); font-weight: 400; }
.step.is-active .step-time { color: var(--yellow); }
.instruction-card, .answer-card {
  padding: 16px;
  margin-bottom: 8px;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.instruction-card { background: var(--instruction-background); }
.answer-card { background: var(--answer-background); }
.instruction-card h3, .answer-card h3 { margin-bottom: 4px; font-size: 15px; }
.instruction-card h3 { color: var(--yellow); }
.student-view { margin-top: 64px; }
.student-view-label { margin-bottom: 20px; font-size: 14px; }
.student-view-content { padding: 24px; border-left: 2px solid var(--border); }

/* Reading text in Selection_005.png: comfortable size and paragraph spacing. */
.reading-text { max-width: 75ch; font-size: 18px; line-height: 1.5; overflow-wrap: anywhere; }
.reading-text p { margin-bottom: 8px; }

/* Right column: 2:1 video above the white tools card. */
.sidebar { grid-area: sidebar; display: grid; gap: 16px; }
.video-panel {
  position: relative;
  aspect-ratio: 2 / 1;
  background: #151a20;
  border: 2px solid #111;
  border-radius: 10px;
  overflow: hidden;
}
.video-panel video, .video-panel img { width: 100%; height: 100%; object-fit: cover; }
.video-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 3px 6px;
  background: rgb(0 0 0 / 65%);
  color: #fff;
  font-size: 12px;
}
/* RIGHT COLUMN: edit padding/gaps here to adjust the menu and vocabulary spacing. */
.tools-panel {
  padding: 24px 20px;
  background: var(--surface);
  border-radius: var(--radius);
  min-height: 180px;
  color: #000000;
}
.tool-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--tool-menu-gap);
  overflow-x: auto;
  scrollbar-width: thin;
}
.tool-tabs [role="tab"] {
  position: relative;
  flex: 0 0 auto;
  padding: 0 0 12px;
  background: transparent;
  border: 0;
  color: #000000;
  font-size: 16px;
  line-height: 1.4;
}
/* The underline is exactly 2px thick. Opacity creates the requested hover fade. */
.tool-tabs [role="tab"]::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: var(--header-background);
  opacity: 0;
  transition: opacity 180ms ease;
}
/* Topic vocabulary starts underlined. After the first menu interaction,
   lesson.js removes is-initial and all underlines are hover-only. */
#tab-vocabulary.is-initial::after { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .tool-tabs [role="tab"]:hover::after { opacity: 1; }
}
.tools-body { padding: 24px 0 0; }
/* Keep hidden panels and the closed pop-up out of the page layout. */
[hidden] { display: none !important; }
/* Entries flow next to one another; 6mm is about 23 CSS pixels.
   A whole entry wraps to the next row when space is insufficient. */
.vocabulary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: var(--tool-item-gap);
  row-gap: 12px;
}
.vocabulary-list > li { max-width: 100%; }
.vocabulary-term {
  display: block;
  width: auto;
  max-width: 100%;
  padding: 4px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #000000;
  text-align: left;
  line-height: 1.5;
  overflow-wrap: anywhere;
  transition: background-color 180ms ease;
}
.vocabulary-term:hover,
.vocabulary-term:focus-visible,
.vocabulary-term.is-open {
  background: #dfe4e8; /* Fallback for browsers without color-mix. */
  background: color-mix(in srgb, var(--header-background) 14%, white);
}
/* The pop-up lives outside the columns, so it cannot be clipped by their edges.
   JavaScript places it near the hovered entry while keeping it on the screen. */
.vocabulary-tooltip {
  position: fixed;
  z-index: 100;
  width: min(320px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: #000000;
  box-shadow: 0 8px 28px rgb(0 0 0 / 14%);
  font-size: 15px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease;
}
.vocabulary-tooltip.is-visible { opacity: 1; visibility: visible; }
.vocabulary-tooltip-title { color: #000000; font-weight: 700; margin-bottom: 8px; }
.vocabulary-tooltip-definition { margin-bottom: 12px; }
.vocabulary-tooltip-example { margin: 0; font-style: italic; }
/* JS adds is-entering each time a menu panel opens. Adjust distance/time here. */
.tools-body [role="tabpanel"].is-entering {
  animation: tool-panel-slide-in 260ms ease-out;
}
@keyframes tool-panel-slide-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .tool-tabs [role="tab"]::after, .vocabulary-term, .vocabulary-tooltip { transition: none; }
  .tools-body [role="tabpanel"].is-entering { animation: none; }
}
.participant-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  overflow-wrap: anywhere;
}
.participant-card:last-child { margin-bottom: 0; }
.participant-card > :not(.avatar) { min-width: 0; }
.avatar { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.muted { color: var(--muted); }

/* Tablet and phone: header, lesson, sidebar in that reading order.
   Document scrolling keeps all content accessible without nested scroll areas. */
@media (max-width: 900px) {
  .site-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "header" "lesson" "sidebar";
  }
  .lesson-body { padding: 24px; }
  .lesson-panel { min-height: auto; }
  .video-panel { width: 100%; max-width: 640px; justify-self: center; }
  .student-view { margin-top: 40px; }
}
/* 701px and above: image | vertical divider | lesson text. */
@media (min-width: 701px) {
  .site-header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }
  .lesson-header-image {
    flex: 0 1 460px;
    width: 40%;
    max-width: min(460px, 40%);
  }
  .lesson-header-copy {
    flex: 1 1 0;
    padding: 12px 0 12px 28px;
    border-top: 0;
    border-left: 1px solid rgb(255 255 255 / 35%);
  }
}
/* 700px and below: image above lesson text. */
@media (max-width: 700px) {
  .site-header {
    display: grid;
    grid-template-columns: minmax(0, 460px);
    justify-content: center;
    align-items: start;
  }
  .lesson-header-image {
    width: 100%;
    max-width: 460px;
  }
  .lesson-header-copy {
    padding: 24px 7.4869791667% 0;
    border-left: 0;
    border-top: 1px solid rgb(255 255 255 / 35%);
    text-align: left;
  }
}
@media (max-width: 480px) {
  :root { --column-gap: 12px; }
  .site-header { padding: 16px; gap: 12px; }
  .site-header .lesson-header-title { font-size: clamp(20px, 5vw, 28px); }
  .lesson-header-eyebrow { font-size: 14px; margin-bottom: 16px; }
  .site-header .lesson-header-title { margin-bottom: 20px; }
  .lesson-header-details { display: block; }
  .lesson-header-details > span { display: block; }
  .lesson-header-duration { margin-top: 8px; padding-left: 0; border-left: 0; }
  .lesson-toolbar { padding: 12px; }
  .lesson-toolbar > :first-child { padding-left: 12px; }
  .lesson-body { padding: 20px 16px; }
  .instruction-card, .answer-card { padding: 14px; }
  .student-view-content { padding: 16px; }
  .tools-panel { padding: 20px 16px; }
  .tool-tabs [role="tab"] { font-size: 15px; }
  .reading-text { font-size: 17px; }
}

/* Print: retain lesson content with clean margins. */
@media print {
  body { background: #fff; color: #000; }
  .site-layout { display: block; max-width: none; padding: 0; }
  .site-header { margin-bottom: 20px; }
  .sidebar, .toolbar-actions, .vocabulary-tooltip { display: none; }
  .site-header { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .lesson-body { padding: 20px 0; }
  .instruction-card, .answer-card { break-inside: avoid; }
}

/* CORRECTOR: spacing, buttons and feedback. Colour follows the header variable. */
.corrector-intro { margin: 0 0 12px; font-size: 15px; line-height: 1.5; }
.corrector-note { margin: 8px 0 16px; color: #000; font-size: 13px; line-height: 1.5; }
.corrector-button { padding: 10px 14px; border: 1px solid var(--header-background); border-radius: 4px; background: var(--header-background); color: #fff; font: inherit; font-size: 14px; cursor: pointer; }
.corrector-button:disabled { opacity: .5; cursor: default; }
.corrector-button:focus-visible { outline: 2px solid var(--header-background); outline-offset: 3px; }
.corrector-secondary { background: #fff; color: #000; border-color: #ccd2d6; }
.corrector-status { margin: 12px 0 20px; color: #000; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
#corrector-progress { display: block; width: 100%; margin-top: 12px; accent-color: var(--header-background); }
#corrector-progress[hidden] { display: none; }
.corrector-label { display: block; margin: 0 0 8px; color: #000; font-size: 14px; }
#corrector-input { display: block; width: 100%; min-height: 140px; padding: 12px; border: 1px solid #ccd2d6; border-radius: 4px; resize: vertical; background: #fff; color: #000; font: inherit; font-size: 15px; line-height: 1.5; }
#corrector-input:focus-visible { outline: 2px solid var(--header-background); outline-offset: 2px; }
.corrector-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.corrector-result { margin-top: 24px; }
.corrector-result h3 { margin: 0 0 10px; font-size: 15px; color: #000; }
.corrector-output { padding: 14px; border-radius: 4px; background: #edf0f2; background: color-mix(in srgb, var(--header-background) 7%, white); color: #000; font-size: 15px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }