/* ==========================================================================
   "Teach me" virtual guide (version 2, prototype).
   A pre-written script per section, played from one recorded file per
   section and language (or read whole by the browser's own voice, or shown as
   moving captions), with the matching line of the page highlighted as the
   guide speaks. No live AI, no personal answers.
   Built by _tools/teach-v2/build.py, driven by assets/js/teach.js.
   ========================================================================== */

/* ---- Button next to each section heading ---------------------------------- */
.mtk2-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  margin: 0 0 22px;
  padding: 8px 18px 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--teal-700);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .93rem;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.mtk2-btn[hidden] { display: none; }
.mtk2-btn__icon { width: 22px; height: 22px; flex: none; }
.mtk2-btn:hover { background: var(--white); border-color: var(--teal-400); box-shadow: var(--shadow-sm); }
.mtk2-btn:focus-visible { outline: 3px solid var(--teal-400); outline-offset: 2px; }
.mtk2-btn[aria-expanded="true"] { background: var(--teal-600); border-color: var(--teal-600); color: var(--white); }

/* on the dark "Where the science stands" panel */
.status-2026 .mtk2-btn { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.32); color: #fff; }
.status-2026 .mtk2-btn:hover { background: rgba(255,255,255,.18); border-color: var(--aqua-300); }
.status-2026 .mtk2-btn[aria-expanded="true"] { background: var(--aqua-300); border-color: var(--aqua-300); color: var(--teal-900); }

/* ---- Highlight that follows the guide ------------------------------------- */
mark.mtk2-hl {
  color: inherit;
  background-color: rgba(62,207,196,0);
  border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(62,207,196,0);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-color .35s ease, box-shadow .35s ease;
}
mark.mtk2-hl { scroll-margin-top: 80px; scroll-margin-bottom: calc(var(--mtk2-h, 0px) + 16px); }
mark.mtk2-hl.is-on { background-color: rgba(62,207,196,.30); box-shadow: 0 0 0 2px rgba(62,207,196,.30); }
.status-2026 mark.mtk2-hl.is-on { background-color: rgba(111,224,214,.26); box-shadow: 0 0 0 2px rgba(111,224,214,.26); color: #fff; }

/* ---- The guide card ------------------------------------------------------- */
.mtk2-card {
  position: fixed;
  z-index: 95;
  left: 8px; right: 8px; bottom: 8px;
  max-width: 640px;
  margin: 0 auto;
  max-height: calc(100vh - 90px);
  max-height: calc(100dvh - 90px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  padding: 14px 16px 12px;
  font-family: var(--font-body);
  color: var(--ink-700);
  text-align: left;
}
.mtk2-card[hidden] { display: none; }
.mtk2-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  border-radius: 20px 20px 0 0; background: var(--grad-aqua);
}
@media (min-width: 1200px) {
  .mtk2-card { left: auto; right: 24px; bottom: 24px; width: 340px; max-width: none; padding: 18px 18px 14px; }
  body.mtk2-open .article { margin-left: 0; }
}
/* keep page-end content reachable above the sheet, and hide the donate bar while the guide is open */
@media (max-width: 1199px) {
  body.mtk2-open { padding-bottom: calc(var(--mtk2-h, 0px) + 24px); }
}
body.mtk2-open .floating-actions { visibility: hidden; }

.mtk2-top { display: flex; align-items: center; gap: 12px; }
.mtk2-avatar { width: 58px; height: 58px; flex: none; border-radius: 50%; }
.mtk2-avatar svg { width: 100%; height: 100%; display: block; }
.mtk2-who { min-width: 0; flex: 1; }
.mtk2-name {
  margin: 0; font-family: var(--font-head); font-weight: 700; font-size: 1rem;
  color: var(--teal-800); line-height: 1.25;
}
.mtk2-topic {
  margin: 2px 0 0; font-size: .84rem; line-height: 1.35; color: var(--ink-500);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mtk2-close {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; background: transparent; color: var(--ink-500); cursor: pointer;
}
.mtk2-close:hover { background: var(--paper-2); color: var(--teal-700); }

/* language switch in the top row, visible at every width */
.mtk2-lang { flex: none; display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; background: var(--paper); }
.mtk2-lang button, .mtk2-langbtn {
  min-width: 40px; min-height: 34px; padding: 0 9px; border: 0; border-radius: 999px; background: transparent;
  color: var(--ink-500); font-family: var(--font-head); font-weight: 700; font-size: .78rem; letter-spacing: .02em; cursor: pointer;
}
.mtk2-lang button:hover { color: var(--teal-700); }
.mtk2-lang button[aria-pressed="true"] { background: var(--teal-600); color: #fff; }
.mtk2-lang button[lang|="he"] { font-family: "Assistant", "Segoe UI", Arial, sans-serif; font-size: .9rem; letter-spacing: 0; }
.mtk2-langbtn {
  flex: none; display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--line); background: var(--paper); color: var(--teal-700);
}
.mtk2-langbtn svg { width: 16px; height: 16px; flex: none; }
.mtk2-langbtn svg:last-child { width: 13px; height: 13px; }
.mtk2-langbtn[aria-expanded="true"] { border-color: var(--teal-400); background: var(--paper-2); }
.mtk2-langs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mtk2-langs[hidden] { display: none; }
.mtk2-langs button {
  min-height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--white);
  color: var(--ink-500); font-family: var(--font-head); font-weight: 600; font-size: .8rem; cursor: pointer;
}
.mtk2-langs button[aria-pressed="true"] { background: var(--paper-2); color: var(--teal-700); border-color: var(--teal-400); }
.mtk2-close svg { width: 20px; height: 20px; }

.mtk2-meter { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; }
.mtk2-bar { flex: 1; height: 4px; border-radius: 4px; background: var(--paper-2); overflow: hidden; }
.mtk2-bar > span { display: block; height: 100%; width: 0; background: var(--teal-500); border-radius: 4px; transition: width .3s ease; }
.mtk2-count { font-size: .78rem; color: var(--ink-500); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mtk2-pending { font-size: .74rem; color: var(--teal-700); white-space: nowrap; }
.mtk2-pending[hidden] { display: none; }
.mtk2-ctl.mtk2-ctl--menu, .mtk2-pill.mtk2-pill--replay { display: none; }

.mtk2-caption {
  margin: 6px 0 10px;
  min-height: 3.2em;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink-900);
}

.mtk2-controls { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.mtk2-ctl {
  flex: 1; min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 12px; border: 1px solid var(--line); background: var(--paper);
  color: var(--teal-700); font-family: var(--font-head); font-weight: 600; font-size: .8rem;
  cursor: pointer; padding: 6px 8px;
  transition: background-color .15s ease, border-color .15s ease;
}
.mtk2-ctl svg { width: 18px; height: 18px; flex: none; }
.mtk2-ctl:hover { background: var(--paper-2); border-color: var(--teal-400); }
.mtk2-ctl:disabled { opacity: .45; cursor: default; }
.mtk2-ctl--main { flex: 1.4; background: var(--teal-600); border-color: var(--teal-600); color: #fff; }
.mtk2-ctl--main:hover { background: var(--teal-700); border-color: var(--teal-700); }

.mtk2-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.mtk2-row .mtk2-speed { margin-right: auto; }
.mtk2-speed { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; background: var(--paper); }
.mtk2-speed button {
  min-width: 44px; min-height: 40px; border: 0; border-radius: 999px; background: transparent;
  color: var(--ink-500); font-family: var(--font-head); font-weight: 600; font-size: .8rem; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.mtk2-speed button[aria-pressed="true"] { background: var(--white); color: var(--teal-700); box-shadow: var(--shadow-sm); }
.mtk2-pill {
  min-height: 44px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--white);
  color: var(--ink-500); font-family: var(--font-head); font-weight: 600; font-size: .8rem; cursor: pointer;
}
.mtk2-pill[hidden] { display: none; }
.mtk2-pill:hover, .mtk2-speed button:hover { color: var(--teal-700); }
.mtk2-pill[aria-pressed="true"], .mtk2-pill[aria-expanded="true"] { background: var(--paper-2); color: var(--teal-700); border-color: var(--teal-400); }
.mtk2-pill:disabled { cursor: default; }
.mtk2-card.no-captions .mtk2-caption { display: none; }

/* language and voice-source switches (same look as the speed group) */
.mtk2-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; background: var(--paper); }
.mtk2-seg[hidden] { display: none; }
.mtk2-seg button {
  min-width: 44px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent;
  color: var(--ink-500); font-family: var(--font-head); font-weight: 600; font-size: .8rem; cursor: pointer;
}
.mtk2-seg button:hover { color: var(--teal-700); }
.mtk2-seg button[aria-pressed="true"] { background: var(--white); color: var(--teal-700); box-shadow: var(--shadow-sm); }
.mtk2-seg button[lang|="he"] { font-family: "Assistant", "Segoe UI", Arial, sans-serif; font-size: .9rem; }

/* Hebrew (and any right-to-left) captions, transcript and notes */
.mtk2-card [dir="rtl"] { text-align: right; }
.mtk2-card [lang|="he"] { font-family: "Assistant", "Segoe UI", "Arial Hebrew", Arial, sans-serif; }
.mtk2-caption[lang|="he"] { font-size: 1.1rem; line-height: 1.55; }
.mtk2-transcript[dir="rtl"] { padding: 10px 30px 10px 12px; }
.mtk2-card button:focus-visible { outline: 3px solid var(--teal-400); outline-offset: 2px; }

.mtk2-transcript {
  margin: 10px 0 0; padding: 10px 12px 10px 30px;
  max-height: 32vh; overflow-y: auto;
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  font-size: .92rem; line-height: 1.55;
}
.mtk2-transcript[hidden] { display: none; }
.mtk2-transcript li { margin: 0 0 .5em; }
.mtk2-transcript li.is-current { color: var(--teal-800); font-weight: 600; }

.mtk2-note { margin: 10px 0 0; font-size: .76rem; line-height: 1.45; color: var(--ink-500); }
.mtk2-synth { margin: 6px 0 0; text-align: center; }
.mtk2-voice:empty { display: none; }
.mtk2-voice { margin: 6px 0 0; font-size: .76rem; line-height: 1.45; color: var(--teal-700); }

@media (max-width: 420px) {
  .mtk2-card { padding: 12px 12px 10px; border-radius: 18px; }
  .mtk2-avatar { width: 50px; height: 50px; }
  .mtk2-caption { font-size: .98rem; min-height: 3.2em; margin-bottom: 8px; }
  .mtk2-speed button { min-width: 40px; }
  .mtk2-pill { padding: 6px 10px; }
  .mtk2-seg button { padding: 0 8px; }
  .mtk2-caption[lang|="he"] { font-size: 1.05rem; }
  .mtk2-ctl span { display: none; }
  .mtk2-ctl--main span { display: inline; }
}

/* ---- Phone: a small bar, one rolling caption line, the rest in a menu ------
   At most about a third of the screen, so the highlighted line always has
   room above it (teach.js scrolls it into the upper third of that room). */
@media (max-width: 600px) {
  .mtk2-card {
    left: 6px; right: 6px; bottom: 6px;
    padding: 8px 10px 8px; border-radius: 16px;
    max-height: 33vh; max-height: 33dvh;
    display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 40px; column-gap: 8px;
    grid-template-areas: "meter meter lang lang" "av cap cap close" "ctl ctl ctl ctl" "synth synth synth synth" "langs langs langs langs" "more more more more";
    align-items: center;
  }
  .mtk2-lang, .mtk2-langbtn { grid-area: lang; justify-self: end; }
  .mtk2-synth { grid-area: synth; margin: 4px 0 0; }
  .mtk2-lang button, .mtk2-langbtn { min-height: 30px; }
  .mtk2-langs { grid-area: langs; }
  .mtk2-card.menu-open, .mtk2-card.langs-open { max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); }
  .mtk2-card::before { border-radius: 16px 16px 0 0; height: 3px; }
  .mtk2-top { display: contents; }
  .mtk2-avatar { grid-area: av; width: 36px; height: 36px; }
  .mtk2-who { display: none; }
  .mtk2-close { grid-area: close; width: 40px; height: 40px; }
  .mtk2-meter { grid-area: meter; margin: 2px 0 6px; gap: 8px; }
  .mtk2-count, .mtk2-pending { font-size: .72rem; }
  .mtk2-caption, .mtk2-caption[lang|="he"] {
    grid-area: cap; margin: 0; min-height: 0; font-size: .98rem; line-height: 1.45;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mtk2-card.no-captions .mtk2-caption { display: block; visibility: hidden; }
  .mtk2-controls { grid-area: ctl; margin-top: 6px; }
  .mtk2-ctl { min-height: 42px; }
  .mtk2-ctl.mtk2-ctl--replay { display: none; }
  .mtk2-ctl.mtk2-ctl--menu { display: inline-flex; flex: .7; }
  .mtk2-pill.mtk2-pill--replay { display: inline-block; }
  .mtk2-more { grid-area: more; display: none; }
  .mtk2-card.menu-open .mtk2-more { display: block; }
  .mtk2-ctl span { display: none; }
  .mtk2-ctl--main span { display: inline; }
}

/* ---- Avatar motion -------------------------------------------------------- */
.mtk2-eyes { transform-box: fill-box; transform-origin: center; animation: mtk2-blink 5.2s infinite; }
.mtk2-mouth-open { opacity: 0; transform-box: fill-box; transform-origin: center; }
.mtk2-mouth-rest { transition: opacity .12s ease; }
.mtk2-card.is-speaking .mtk2-mouth-rest { opacity: 0; }
.mtk2-card.is-speaking .mtk2-mouth-open { opacity: 1; animation: mtk2-talk .34s ease-in-out infinite alternate; }
.mtk2-card.is-speaking .mtk2-avatar { box-shadow: 0 0 0 3px rgba(62,207,196,.35); }
@keyframes mtk2-blink { 0%, 93%, 100% { transform: scaleY(1); } 95.5% { transform: scaleY(.1); } }
@keyframes mtk2-talk {
  0% { transform: scaleY(.35); }
  45% { transform: scaleY(1); }
  70% { transform: scaleY(.55); }
  100% { transform: scaleY(.9); }
}

@media (prefers-reduced-motion: reduce) {
  .mtk2-eyes, .mtk2-card.is-speaking .mtk2-mouth-open { animation: none; }
  .mtk2-card.is-speaking .mtk2-mouth-open { transform: scaleY(.7); }
  mark.mtk2-hl, .mtk2-bar > span, .mtk2-btn, .mtk2-ctl { transition: none; }
}

@media print {
  .mtk2-btn, .mtk2-card { display: none !important; }
  mark.mtk2-hl { background: none !important; box-shadow: none !important; }
}