/*
 * ai_teacher_whiteboard.css
 * ───────────────────────────
 * Aryzor AI Teacher — Whiteboard Pass 2A styles.
 *
 * Nested inside the existing #avt-panel (see ai_voice_tutor.js's
 * _buildDom() + ai_teacher_whiteboard.js's init()) rather than a separate
 * floating element — it inherits the same safe positioning already
 * verified not to overlap #answer-input/#submit-btn/VSP controls, and is
 * appended AFTER .avt-controls so the mute/stop-speaking/end-tutor row is
 * never pushed out of view by board content.
 */

/* ── Classroom-board presentation ──────────────────────────────────────
   The board is a centered, focused teaching surface (mounted on
   document.body — see ai_teacher_whiteboard.js's _buildDom), not a panel
   inside the chat sidebar. While it is open the tutor panel collapses to
   a compact strip so the board is unmistakably the thing being taught
   from, the way a classroom board is what you look at while the teacher
   speaks beside it. */
.atw-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: 900;
}
.atw-backdrop[data-open="true"] { display: block; }

.atw-board {
  display: none;
  flex-direction: column;
  position: fixed;
  /* Deliberately NOT vertically centered with translate(-50%, -50%): the
     collapsed tutor panel is a fixed-position element in the bottom-right
     corner with a HIGHER z-index, so a fully-centered board would put its
     own control row (including "Close board") underneath it and the panel
     would swallow those clicks — a real dead-end found by
     test_close_board_keeps_voice_session_active. Anchoring the top and
     reserving ~130px at the bottom keeps the board visually centered in
     the space the student actually has while guaranteeing its controls
     can never end up beneath the panel at any viewport height. */
  top: 6vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(1000px, 94vw);
  max-height: calc(88vh - 130px);
  z-index: 950;
  border: 1px solid #cbd5e1;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
  overflow: hidden;
}
.atw-board[data-open="true"] { display: flex; }

.atw-board-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: #1e293b;
  border-bottom: 1px solid #0f172a;
}
.atw-board-title {
  font-weight: 700;
  font-size: 17px;
  color: #f8fafc;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.atw-board-progress {
  font-size: 13px;
  color: #e0e7ff;
  white-space: nowrap;
  background: rgba(99, 102, 241, 0.35);
  border-radius: 999px;
  padding: 4px 12px;
}

/* Accumulating boards lay out like a real board being worked on: the
   figure on the left, the working written down the right beside it, both
   visible at once. The figure (.atw-table-host) is a sibling of the
   region grid rather than a child, so the two are placed side by side
   here. Only applies to boards whose plan opted into accumulate mode —
   replace-mode boards keep the original stacked layout exactly. */
.atw-board[data-board-mode="accumulate"] .atw-scroll {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.atw-board[data-board-mode="accumulate"] .atw-table-host {
  flex: 0 0 46%;
  order: 0;
  padding-top: 18px;
}
.atw-board[data-board-mode="accumulate"] .atw-canvas {
  flex: 1 1 auto;
  order: 1;
  min-width: 0;
  /* Working reads as a written column, not centred slide text. */
  grid-template-areas: "top" "left" "center" "right" "bottom";
  grid-template-columns: 1fr;
  text-align: left;
}
.atw-board[data-board-mode="accumulate"] .atw-region-top,
.atw-board[data-board-mode="accumulate"] .atw-region-center,
.atw-board[data-board-mode="accumulate"] .atw-region-bottom {
  text-align: left;
  align-items: flex-start;
}
@media (max-width: 820px) {
  /* Too narrow for two columns — stack, figure first. */
  .atw-board[data-board-mode="accumulate"] .atw-scroll { display: block; }
  .atw-board[data-board-mode="accumulate"] .atw-table-host { padding-top: 0; }
}

/* The single scrollable teaching surface: region grid + every widget
   host. Sized by whatever the scene actually draws, scrolling only when a
   scene genuinely exceeds the available height. */
.atw-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* A real board surface: warm off-white with a faint tooth to it and an
     inset shadow, framed by the border below — not a flat white card,
     which is most of why this still read as a slide. */
  background:
    repeating-linear-gradient(0deg, rgba(15, 23, 42, .012) 0 2px, transparent 2px 4px),
    #f7f8f4;
  border: 9px solid #a1846b;
  border-top: none;
  box-shadow: inset 0 2px 16px rgba(15, 23, 42, .10);
}

.atw-canvas {
  display: grid;
  grid-template-areas:
    "top top top"
    "left center right"
    "bottom bottom bottom";
  grid-template-rows: auto auto auto;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 14px;
  padding: 24px 32px 8px;
  background: transparent;   /* the board surface lives on .atw-scroll */
  box-sizing: border-box;
}
.atw-region {
  min-height: 28px;
  font-size: 18px;
  line-height: 1.5;
  color: #0f172a;
  overflow-wrap: break-word;
}
.atw-region-top    { grid-area: top;    text-align: center; }
.atw-region-center { grid-area: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.atw-region-bottom { grid-area: bottom; text-align: center; color: #475569; }
.atw-region-left   { grid-area: left; }
.atw-region-right  { grid-area: right; }

/* ── Handwritten-board presentation ───────────────────────────────────
   Marker handwriting rather than typeset text, so the board reads as
   something a teacher wrote instead of a rendered slide. The font stack
   is all system fonts (Ink Free / Segoe Print ship with Windows 10+,
   Bradley Hand with macOS) with a generic cursive fallback — no webfont
   download, so nothing here can fail closed or leak a request. */
.atw-hand,
.atw-item,
.atw-equation,
.atw-region {
  font-family: 'Ink Free', 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive;
}

.atw-item { padding: 4px 0; }
.atw-equation {
  font-size: 27px;
  font-weight: 400;
  color: #1f3a8a;
  letter-spacing: 0.01em;
}

/* Each element a scene drew fades/settles in on its own small delay (set
   inline by _applyProgressiveReveal) so the board fills in piece by piece
   as it is talked through. Purely visual: the content is already in the
   DOM before this runs. */
.atw-reveal {
  /* Revealed left-to-right like a pen stroke rather than faded in — a
     fade still reads as "a slide appearing", which is exactly what this
     is meant to stop looking like. steps() gives it the slight
     chunkiness of writing instead of a smooth wipe. */
  clip-path: inset(0 100% 0 0);
  animation: atw-write-in 700ms steps(22, end) both;
  animation-delay: var(--atw-delay, 0ms);
}
@keyframes atw-write-in {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
/* Respect a reduced-motion preference: content still appears in order,
   just without movement or a long wait. */
@media (prefers-reduced-motion: reduce) {
  .atw-reveal { animation-duration: 1ms; animation-delay: 0ms; }
}

/* Marker highlight swiped under the verified result — emphasises without
   covering the glyphs. */
.atw-result-highlight {
  display: inline-block;
  position: relative;
  color: #7c2d12;
  padding: 0 6px;
}
.atw-result-highlight::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0; right: 0; top: 8%; bottom: 8%;
  background: #fde68a;
  border-radius: 3px;
  transform: scaleX(0);
  transform-origin: left center;
  animation: atw-swipe 480ms ease-out forwards;
}
@keyframes atw-swipe { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .atw-result-highlight::before { animation-duration: 1ms; }
}

/* ── Pass 2B1: place-value table + comparison widgets ─────────────────── */
.atw-table-host {
  padding: 8px 12px 0;
  overflow-x: auto;   /* the table itself never needs to scroll at supported widths (<=5 cols), but this is a safety net rather than letting the whole board overflow */
}
.atw-pv-table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  font-size: 13px;
}
.atw-pv-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* screen-reader only */
.atw-pv-table th, .atw-pv-table td {
  border: 1px solid #e2e8f0;
  padding: 4px 2px;
  text-align: center;
  color: #1e293b;
}
.atw-pv-table thead th {
  background: #f8fafc;
  font-weight: 700;
  font-size: 11px;
}
.atw-pv-table tbody th {
  background: #f8fafc;
  font-weight: 700;
  text-align: right;
  padding-right: 6px;
}
.atw-pv-table td.atw-col-focus,
.atw-pv-table th.atw-col-focus {
  background: #fef3c7;
  outline: 2px solid #f59e0b;
  outline-offset: -2px;
}

/* ── Pass 2B2: fraction bar widget ────────────────────────────────────── */
.atw-fraction-bar {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto;
}
.atw-fraction-cell {
  fill: #ffffff;
  stroke: #334155;
  stroke-width: 1;
}
.atw-fraction-cell-shaded {
  fill: #4338ca;
}
.atw-fraction-cell-focus {
  stroke: #f59e0b;
  stroke-width: 3;
}
.atw-fraction-desc {
  text-align: center;
  font-size: 11px;
  color: #475569;
  margin: 4px 12px 0;
}

/* ── Pass 2B3B: one-step equation widgets ─────────────────────────────── */
.atw-equation-focus-label {
  display: none;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: #b45309;
  padding: 2px 12px;
}
.atw-equation-focus-label[data-active="true"] { display: block; }

.atw-equation.atw-equation-focus {
  background: #fef3c7;
  outline: 2px solid #f59e0b;
  outline-offset: 1px;
  border-radius: 4px;
}

.atw-balance-step {
  padding: 8px 12px;
  text-align: center;
}
.atw-balance-equation {
  font-family: Cambria, 'Cambria Math', Georgia, serif;
  font-size: 17px;
  font-weight: 700;
  color: #1e293b;
}
.atw-balance-equation-after { color: #065f46; }
.atw-balance-ops {
  display: flex;
  justify-content: space-around;
  margin-top: 6px;
}
.atw-balance-op {
  font-size: 12px;
  font-weight: 700;
  color: #b45309;
  background: #fef3c7;
  border-radius: 6px;
  padding: 2px 8px;
}
.atw-balance-arrows {
  display: flex;
  justify-content: space-around;
  font-size: 14px;
  color: #b45309;
  line-height: 1;
  margin: 2px 0;
}

.atw-comparison {
  display: none;
  padding: 8px 12px;
  text-align: center;
}
.atw-comparison[data-active="true"] { display: block; }
.atw-comparison-expr {
  font-family: Cambria, 'Cambria Math', Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  color: #4338ca;
}
.atw-comparison-reason {
  font-size: 12px;
  color: #475569;
  margin-top: 4px;
}

/* ── Pass 2D2: triangle_angle_sum widgets ─────────────────────────────── */
.atw-triangle-diagram {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  margin: 0 auto;
}
.atw-triangle-shape {
  fill: #eef2ff;
  stroke: #1f3a8a;
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
  /* Drawn edge by edge instead of appearing whole. 900 comfortably
     exceeds the outline length at this viewBox (300x264), so the dash
     starts fully offset and sweeps closed. The fill follows once the
     outline is down, the way ink then shading would. */
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: atw-draw-outline 1400ms ease-out forwards,
             atw-fill-in 500ms ease-out 1300ms both;
}
@keyframes atw-draw-outline { to { stroke-dashoffset: 0; } }
@keyframes atw-fill-in { from { fill-opacity: 0; } to { fill-opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .atw-triangle-shape {
    stroke-dashoffset: 0;
    animation: none;
  }
}
/* SVG labels are handwritten too — leaving these typeset while the rest
   of the board is in marker was a big part of why it still read as a
   diagram rather than something drawn. They fade in after the outline
   has been drawn, the way a teacher labels a figure once it exists. */
.atw-triangle-vertex-label,
.atw-triangle-angle-label,
.atw-triangle-side-label {
  font-family: 'Ink Free', 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive;
  animation: atw-label-in 400ms ease-out 1500ms both;
}
@keyframes atw-label-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .atw-triangle-vertex-label,
  .atw-triangle-angle-label,
  .atw-triangle-side-label { animation: none; }
}

.atw-triangle-vertex-label {
  font-size: 19px;
  font-weight: 400;
  fill: #1f3a8a;
}
.atw-triangle-angle-label {
  font-size: 14px;
  font-weight: 700;
  fill: #4338ca;
}
.atw-triangle-angle-label.atw-triangle-angle-focus {
  fill: #b45309;
}
.atw-triangle-vertex-label.atw-triangle-vertex-focus {
  fill: #b45309;
}
/* These two restate, in prose, exactly what the figure already shows
   (the vertex letters and the three side lengths are drawn on it). A
   teacher would not write that out, and on the board it read as typeset
   caption text breaking the handwritten look — so they become
   screen-reader-only rather than being deleted, keeping the diagram
   describable for assistive tech while decluttering the board itself. */
.atw-triangle-desc,
.atw-triangle-side-desc {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.atw-triangle-scale-note {
  text-align: center;
  font-family: 'Ink Free', 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive;
  font-size: 14px;
  color: #94a3b8;
  margin: 2px 12px 6px;
}
.atw-triangle-side-label {
  font-size: 17px;
  font-weight: 400;
  fill: #166534;
}

.atw-angle-sum-step {
  padding: 8px 12px;
  text-align: center;
}
.atw-angle-sum-line {
  font-family: Cambria, 'Cambria Math', Georgia, serif;
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  padding: 2px 0;
  overflow-wrap: break-word;
}
.atw-angle-sum-line-after { color: #065f46; }

/* ── Pass 2D3: coordinate_point_plotting widgets ──────────────────────── */
.atw-coordinate-plane {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  margin: 0 auto;
}
.atw-coord-grid-line {
  stroke: #e2e8f0;
  stroke-width: 1;
}
.atw-coord-axis {
  stroke: #334155;
  stroke-width: 1.5;
}
.atw-coord-axis.atw-coord-axis-focus {
  stroke: #b45309;
  stroke-width: 3;
}
.atw-coord-axis-label {
  font-size: 12px;
  font-weight: 700;
  fill: #334155;
}
.atw-coord-tick-label {
  font-size: 9px;
  fill: #64748b;
}
.atw-coord-quadrant-label {
  font-size: 11px;
  font-weight: 700;
  fill: #94a3b8;
}
.atw-coord-origin-dot {
  fill: #334155;
}
.atw-coord-origin-dot.atw-coord-origin-focus {
  fill: #b45309;
  r: 4.5;
}
.atw-coord-origin-label {
  font-size: 9px;
  fill: #475569;
}
.atw-coord-movement-line {
  stroke: #b45309;
  stroke-width: 2.5;
  stroke-dasharray: 4 2;
}
.atw-coord-movement-line.atw-coord-movement-focus {
  stroke: #dc2626;
  stroke-width: 3.5;
}
.atw-coord-point {
  fill: #4338ca;
}
.atw-coord-point.atw-coord-point-focus {
  fill: #b45309;
  r: 5.5;
}
.atw-coord-point-label {
  font-size: 12px;
  font-weight: 700;
  fill: #4338ca;
}
.atw-coord-point-label.atw-coord-point-label-focus {
  fill: #b45309;
}
.atw-coord-desc,
.atw-coord-point-desc {
  text-align: center;
  font-size: 11px;
  color: #475569;
  margin: 4px 12px 0;
}

.atw-verified-badge {
  display: none;
  margin: 0 12px 4px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #065f46;
  background: #d1fae5;
  border-radius: 6px;
  text-align: center;
}
.atw-verified-badge[data-active="true"] { display: block; }

.atw-narration {
  padding: 12px 20px;
  font-size: 15px;
  font-style: italic;
  color: #475569;
  border-top: 1px dashed #e5e7eb;
  min-height: 20px;
}
/* The tutor's stage directions are never printed on the board (see
   _renderScene) — so this collapses rather than leaving a dead strip. */
.atw-narration:empty { display: none; }

.atw-waiting-banner {
  display: none;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 700;
  color: #92400e;
  background: #fef3c7;
  text-align: center;
}
.atw-waiting-banner[data-active="true"] { display: block; }

.atw-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid #e5e7eb;
  background: #fafafa;
}
.atw-ctrl-btn {
  flex: 1 1 18%;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #334155;
  border-radius: 8px;
  padding: 10px 8px;
  font-size: 14px;
  cursor: pointer;
  min-height: 44px;
}
.atw-ctrl-btn:hover { background: #f1f5f9; }
.atw-ctrl-btn:active { transform: scale(0.97); }
.atw-ctrl-btn:disabled { opacity: 0.4; cursor: default; }
.atw-ctrl-btn:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 1px;
}

/* ── Mobile (~375px and below) ────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Near-fullscreen on phones — same "the board is the lesson" intent, but
     a centered floating card wastes too much of a 375px viewport. */
  .atw-board {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;          /* fallback first — dvh is not universally supported */
    max-height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    top: 0;
    left: 0;
    transform: none;
    border-radius: 0;
    border: none;
  }
  /* The canvas is the ONLY part allowed to absorb/scroll away excess
     height; every other row (narration, waiting banner, and above all the
     control row holding "Close board") must keep its size, or a tall
     scene pushes the student's only way out of the board off-screen. */
  .atw-canvas { flex: 1 1 auto; min-height: 0; }
  .atw-narration,
  .atw-waiting-banner,
  .atw-table-host,
  .atw-comparison,
  .atw-verified-badge,
  .atw-equation-focus-label,
  .atw-controls { flex-shrink: 0; }
  .atw-board-header { padding: 12px 14px; }
  .atw-board-title { font-size: 15px; }
  .atw-canvas {
    grid-template-areas: "top" "left" "center" "right" "bottom";
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 16px 14px;
    gap: 10px;
  }
  .atw-region { font-size: 16px; }
  .atw-equation { font-size: 21px; }
  .atw-controls { padding: 10px 12px; }
  .atw-ctrl-btn { flex: 1 1 45%; font-size: 13px; }

  .atw-pv-table { font-size: 10px; }
  .atw-pv-table th, .atw-pv-table td { padding: 3px 1px; }
  .atw-comparison-expr { font-size: 15px; }

  .atw-fraction-bar { max-width: 260px; }
  .atw-fraction-desc { font-size: 10px; }

  .atw-balance-equation { font-size: 14px; }
  .atw-balance-op { font-size: 10px; padding: 2px 5px; }

  .atw-triangle-diagram { max-width: 220px; }
  .atw-triangle-vertex-label { font-size: 13px; }
  .atw-triangle-angle-label { font-size: 12px; }
  .atw-triangle-desc { font-size: 10px; }
  .atw-triangle-side-label { font-size: 11px; }
  .atw-triangle-side-desc { font-size: 10px; }
  .atw-angle-sum-line { font-size: 13px; }

  .atw-coordinate-plane { max-width: 220px; }
  .atw-coord-tick-label { font-size: 8px; }
  .atw-coord-axis-label { font-size: 10px; }
  .atw-coord-quadrant-label { font-size: 9px; }
  .atw-coord-point-label { font-size: 10px; }
  .atw-coord-origin-label { font-size: 8px; }
  .atw-coord-desc, .atw-coord-point-desc { font-size: 10px; }
}