/* Answer block: ```derive, and the role colours every KaTeX formula can use.
 * Tokens come from blocks.css (roles, card, hair, radius), so a palette and
 * both themes restyle this sheet without touching it. Built in derive.js. */

/* ── Role colours in any math: \measured{} \computed{} \given{} \ignored{} ──
   KaTeX wraps the argument in span.enclosing.ab-r-<role>; fraction bars,
   roots and accents inside it draw in currentColor, so they follow too. */
.katex .ab-r-measure { color: var(--ab-measure); }
.katex .ab-r-calc { color: var(--ab-calc); }
.katex .ab-r-given { color: var(--ab-given); }
.katex .ab-r-ignore { color: var(--ab-ignore); }

/* ── The block ───────────────────────────────────────────────────────────── */
.ab-dv {
  container: ab-dv / inline-size;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 18px 0 20px;
  padding: 0;
  color: var(--ab-ink);
  font-family: var(--ab-font-ui);
  font-size: 15px;
  line-height: 1.5;
}
.ab-dv-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 2px;
}
.ab-dv-title {
  font-family: var(--cc-serif, 'Source Serif 4', Georgia, 'Times New Roman', serif);
  font-size: 17.5px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.ab-dv-title .katex { font-size: 1.02em; }

/* The colour key: a dot in the role's colour, then what it means. */
.ab-dv-key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--ab-muted);
}
.ab-dv-chip { display: inline-flex; align-items: center; gap: 7px; }
.ab-dv-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
}
.ab-dv-chip-measure .ab-dv-dot { color: var(--ab-measure); }
.ab-dv-chip-calc .ab-dv-dot { color: var(--ab-calc); }
.ab-dv-chip-given .ab-dv-dot { color: var(--ab-given); }
.ab-dv-chip-ignore .ab-dv-dot { color: var(--ab-ignore); }

/* ── Panels: one column on a phone, two or three across where they fit ───── */
.ab-dv-panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
/* A panel left alone on the last row takes the whole row, so the grid never
   ends on a hole the width of a panel. */
@container ab-dv (min-width: 460px) {
  .ab-dv-panels:is([data-cols="2"], [data-cols="3"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-dv-panels:is([data-cols="2"], [data-cols="3"]) > .ab-dv-panel:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@container ab-dv (min-width: 640px) {
  .ab-dv-panels[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ab-dv-panels[data-cols="3"] > .ab-dv-panel:last-child:nth-child(odd) { grid-column: auto; }
  .ab-dv-panels[data-cols="3"] > .ab-dv-panel:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
}
.ab-dv-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 13px 15px 14px;
  background: var(--ab-card);
  border: 1px solid var(--ab-hair);
  border-radius: var(--ab-radius);
}
.ab-dv-tag {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  color: var(--ab-muted);
}
.ab-dv-num {
  flex: none;
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--ab-calc-soft);
  color: var(--ab-calc);
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.ab-dv-tag-text { min-width: 0; overflow-wrap: anywhere; }
.ab-dv-tag .katex { font-size: 1.05em; font-weight: 400; }

/* A display equation, set flush left in a panel; a long one scrolls inside
   its own strip rather than pushing the reply sideways. */
.ab-dv-eq { min-width: 0; }
.ab-dv-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 3px 2px;
  margin: 0 -2px;
  border-radius: var(--ab-radius-sm);
  scrollbar-width: thin;
}
.ab-dv-scroll:focus-visible { outline: 2px solid var(--ab-accent); outline-offset: 1px; }
.ab-dv .katex-display { margin: 0; }
.ab-dv-eq .katex-display > .katex { text-align: left; }
.ab-dv-eq .katex { font-size: 1.16em; }
/* A soft shade at an edge that has more to scroll to (the cover layers
   scroll with the content, the shades stay put). */
.ab-dv-eq .ab-dv-scroll,
.ab-dv-map {
  --ab-dv-shade: color-mix(in srgb, var(--ab-ink) 16%, transparent);
  background:
    linear-gradient(to right, var(--ab-card) 40%, transparent) left center / 24px 100% no-repeat local,
    linear-gradient(to left, var(--ab-card) 40%, transparent) right center / 24px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--ab-dv-shade), transparent) left center / 9px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--ab-dv-shade), transparent) right center / 9px 100% no-repeat scroll,
    var(--ab-card);
}

.ab-dv-then {
  font-family: var(--cc-serif, 'Source Serif 4', Georgia, 'Times New Roman', serif);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ab-muted);
}
.ab-dv-then .katex { font-size: 1em; }

/* Text between panels (a "then" with no equation after it). */
.ab-dv-note {
  font-family: var(--cc-serif, 'Source Serif 4', Georgia, 'Times New Roman', serif);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ab-muted);
}

/* ── The result: boxed in the colour of what you calculate ─────────────── */
.ab-dv-result {
  min-width: 0;
  padding: 12px 16px;
  background: var(--ab-calc-soft);
  border: 1.5px solid var(--ab-calc);
  border-radius: var(--ab-radius);
}
.ab-dv-result .ab-dv-scroll { padding: 4px 2px; }
.ab-dv-result .katex { font-size: 1.34em; }
.ab-dv-result.ab-dv-raw { text-align: center; }

/* ── Your turn: the line the student writes ────────────────────────────── */
.ab-dv-turn {
  display: block;
  padding: 11px 14px;
  border: 1.5px dashed var(--ab-calc);
  border-radius: var(--ab-radius);
  font-family: var(--cc-serif, 'Source Serif 4', Georgia, 'Times New Roman', serif);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ab-ink);
}
.ab-dv-turn-in { padding: 8px 11px; border-radius: var(--ab-radius-sm); font-size: 15px; }
.ab-dv-turn-pill {
  display: inline-block;
  margin: 0 8px 0 0;
  vertical-align: 1px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--ab-calc-soft);
  color: var(--ab-calc);
  font-family: var(--ab-font-ui);
  font-size: 12px;
  font-weight: 650;
  line-height: 18px;
}
.ab-dv-turn-text { overflow-wrap: anywhere; }

/* ── The map onto a straight line ───────────────────────────────────────
   body:not(#_) out-weighs the chat's own table rules (zebra rows, a tinted
   header, display:block, 22px clipped corners); this table is a figure, not
   data, so it keeps none of them. */
.ab-dv-map {
  max-width: 100%;
  overflow-x: auto;
  padding: 4px 4px;
  border: 1px solid var(--ab-hair);
  border-radius: var(--ab-radius);
  scrollbar-width: thin;
}
.ab-dv-map:focus-visible { outline: 2px solid var(--ab-accent); outline-offset: 2px; }
body:not(#_) .ab-dv-map table.ab-dv-map-t {
  display: table;
  width: 100%;
  min-width: 0;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  font-size: 15px;
}
body:not(#_) .ab-dv-map-t thead { position: static; }
body:not(#_) .ab-dv-map-t :is(tr, tbody tr, tbody tr:nth-child(odd), tbody tr:nth-child(even), tbody tr:hover) {
  background: transparent;
}
body:not(#_) .ab-dv-map-t :is(th, td) {
  padding: 9px 8px;
  border: 0;
  border-bottom: 1px solid var(--ab-hair);
  background: transparent;
  color: var(--ab-ink);
  font-weight: 400;
  letter-spacing: 0;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}
body:not(#_) .ab-dv-map-t tbody tr:last-child :is(th, td) { border-bottom: 0; }
body:not(#_) .ab-dv-map-t th.ab-dv-rowh {
  padding-left: 10px;
  text-align: left;
  white-space: normal;
  min-width: 4.6em;
  max-width: 7em;
  word-break: normal;
  overflow-wrap: normal;
  font-family: var(--ab-font-ui);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ab-muted);
}
body:not(#_) .ab-dv-map-t td.ab-dv-op {
  width: 1px;
  padding-left: 2px;
  padding-right: 2px;
  font-family: var(--ab-font-math);
  font-size: 17px;
  color: var(--ab-muted);
}
.ab-dv-map-t th.ab-dv-sym .ab-dv-im { display: inline-block; padding: 0 4px 3px; border-bottom: 2px solid transparent; }
.ab-dv-map-t th.ab-dv-role-measure .ab-dv-im { border-bottom-color: var(--ab-measure); }
.ab-dv-map-t th.ab-dv-role-calc .ab-dv-im { border-bottom-color: var(--ab-calc); }
.ab-dv-map-t th.ab-dv-role-given .ab-dv-im { border-bottom-color: var(--ab-rule); }
.ab-dv-map-t th.ab-dv-role-ignore .ab-dv-im { border-bottom-color: var(--ab-ignore); }
.ab-dv-map-t th.ab-dv-sym .katex { font-size: 1.12em; }
.ab-dv-sym-label {
  display: block;
  margin-top: 4px;
  font-family: var(--ab-font-ui);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ab-muted);
}
.ab-dv-map-t td.ab-dv-part .katex { font-size: 1.1em; }
body:not(#_) .ab-dv-map-t td.ab-dv-unit {
  font-family: var(--ab-font-math);
  font-size: 14.5px;
  color: var(--ab-muted);
}
.ab-dv-map-t td.ab-dv-unit .katex { font-size: 1em; }
/* A phone: tighter cells, so y = P·x + Q fits before it has to scroll. */
@container ab-dv (max-width: 459.98px) {
  body:not(#_) .ab-dv-map-t :is(th, td) { padding: 8px 4px; }
  body:not(#_) .ab-dv-map-t th.ab-dv-rowh { width: 1px; padding-left: 8px; min-width: 0; max-width: none; font-size: 11px; }
  body:not(#_) .ab-dv-map-t td.ab-dv-op { padding-left: 1px; padding-right: 1px; font-size: 15px; }
  .ab-dv-sym-label { font-size: 10px; }
  .ab-dv-map-t th.ab-dv-sym .ab-dv-im { padding: 0 2px 3px; }
}

/* ── Fallbacks ───────────────────────────────────────────────────────────── */
/* An equation KaTeX could not read: its source, quiet and selectable. */
.ab-dv-src {
  display: inline-block;
  max-width: 100%;
  font-family: var(--ab-font-mono);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ab-muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ab-dv-raw { padding: 4px 0; }

/* Lines past the caps, listed as text so nothing is lost. */
.ab-dv-more { font-size: 13px; color: var(--ab-muted); }
.ab-dv-more > summary {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--ab-hair);
  border-radius: 999px;
  cursor: pointer;
  list-style: none;
}
.ab-dv-more > summary::-webkit-details-marker { display: none; }
.ab-dv-more > summary:hover { color: var(--ab-ink); border-color: var(--ab-rule); }
.ab-dv-more > summary:focus-visible { outline: 2px solid var(--ab-accent); outline-offset: 2px; }
.ab-dv-more-text {
  margin-top: 8px;
  padding: 10px 12px;
  max-height: 320px;
  overflow: auto;
  background: var(--ab-paper);
  border-radius: var(--ab-radius-sm);
  font-family: var(--ab-font-mono);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Read aloud, not shown: "Step 2" before a panel's tag. */
.ab-dv-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ab-dv-scroll, .ab-dv-map { scroll-behavior: auto; }
}