/* Styles for the week pages of the restored Berkeley course.
 *
 * Kept out of learn.css on purpose: these are for figures that only the week pages carry (a
 * board written as a sentence rather than as an equation, and the diagrams we redraw from the
 * homework scans). The pages that need it ask for it themselves with content_for :head. */

/* A board whose content is a sentence, not mathematics. Week 3's micro axiom was written out in
   words on the whiteboard, so it is typeset as words. */
.learn-axiom {
  margin: 0;
  font: 600 clamp(19px, 3.4vw, 26px)/1.3 var(--sc-font-display);
  color: var(--sc-gold);
  text-wrap: balance;
}

/* A diagram we drew ourselves. Never a photograph and never a generated image: these carry
   numbers that have to be right. */
.learn-figure {
  margin: 0;
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--sc-edge);
  background: var(--sc-panel);
}

.learn-figure figcaption {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--sc-muted);
}

.learn-figure svg {
  display: block;
  width: 100%;
  height: auto;
}

/* --- homework 4, the surround ------------------------------------------------------------ */

.learn-surround-svg text {
  font-family: var(--sc-font-display);
  font-size: 13px;
  fill: var(--sc-muted);
}

.learn-surround .surround-ball {
  fill: color-mix(in srgb, var(--sc-ice) 16%, transparent);
  stroke: var(--sc-ice);
  stroke-width: 1.5;
}

.learn-surround .surround-ball-label {
  font-size: 22px;
  font-weight: 600;
  fill: var(--sc-ice);
}

.learn-surround .surround-arc {
  fill: none;
  stroke: var(--sc-gold);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
  opacity: .55;
}

.learn-surround .surround-zerg circle {
  fill: var(--sc-gold);
  stroke: none;
}

.learn-surround .surround-aim {
  fill: none;
  stroke: var(--sc-danger, #d66);
  stroke-width: 1.5;
}

.learn-surround .surround-measure {
  fill: none;
  stroke: var(--sc-edge-bright, var(--sc-edge));
  stroke-width: 1;
}

.learn-surround .surround-reach {
  fill: none;
  stroke: var(--sc-muted);
  stroke-width: 1.25;
}

.learn-surround .surround-head {
  fill: var(--sc-muted);
  stroke: none;
}

.learn-surround .surround-note text,
.learn-surround .surround-label text {
  font-size: 13px;
}

.learn-surround .surround-note text {
  fill: var(--sc-ink);
}

@media (max-width: 520px) {
  .learn-surround-svg text { font-size: 16px; }
}

/* --- week 2, the damage grid -------------------------------------------------------------- */

/* The damage table is the one place on these pages where a number is the whole point, so it
   gets a little more room and the multipliers are set in the mono face. */
.learn-damage-grid td, .learn-damage-grid th { text-align: left; }
.learn-damage-grid td.is-full { color: var(--sc-gold); }
.learn-damage-grid td.is-cut { color: var(--sc-muted); }
.learn-damage-grid code { font-family: var(--sc-font-mono); }

/* The callout bodies on these pages run to two paragraphs, and the shared component only clears
   the margin on the last child, so the pair arrives with no gap between them. Scoped here rather
   than changed in learn.css, which several people are writing into at once. */
.learn-verdict-body p + p,
.learn-erratum-body p + p,
.learn-try-body p + p { margin-top: 12px; }