/* Figure: the steering equation, spelled out in faces.
   Behaviour and every image link live in static/js/equation-faces.js;
   markup is <d-figure id="equation-figure"> in src/index.html. */

/* Colours come from the shared theme (static/js/theme.js), which also handles
   the light/dark switch; the literals here are only fallbacks for if it fails
   to load. */
.eqf {
  --eqf-surface: var(--vx-surface, #fcfcfb);
  --eqf-ink: var(--vx-ink, #16160f);
  --eqf-muted: var(--vx-muted, #6b6a63);
  --eqf-rule: var(--vx-rule, #d8d7cf);
  --eqf-block: var(--vx-block, #ebeae2);
  --eqf-accent: var(--vx-accent, #eb6834);
  /* Only one example is on screen at a time now, so the tiles can be larger than
     they were when four rows stacked. */
  --eqf-tile: 140px;
  --eqf-mini: 60px;
  margin: 2rem 0 2.5rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;
  color: var(--eqf-ink);
}

/* ---- the head: tabs on the left, the step-size slider on the right ---- */
/* One rule under both, so the two controls read as one bar. The tabs take
   whatever is left after the slider, which never shrinks. */
.eqf-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--eqf-rule);
}

/* The strip scrolls rather than wraps, matching the tab-slideshow figure: the
   tabs are one row of choices, and a wrapped second row reads as a second group. */
.eqf-tabs {
  display: flex;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.eqf-tabs::-webkit-scrollbar {
  display: none;
}

.eqf-tab {
  font: inherit;
  font-size: 13px;
  line-height: 1;
  flex: none;
  padding: 9px 14px;
  color: var(--eqf-muted);
  background: transparent;
  border: none;
  /* The selected underline sits *on* the strip's own rule, so switching tabs
     moves one mark instead of thickening the border. */
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
}
.eqf-tab:hover {
  color: var(--eqf-ink);
}
.eqf-tab.is-active {
  color: var(--eqf-ink);
  font-weight: 700;
  border-bottom-color: var(--eqf-accent);
}
.eqf-tab:focus-visible {
  outline: 2px solid var(--eqf-ink);
  outline-offset: -2px;
  border-radius: 3px 3px 0 0;
}

/* The one control, sharing the tabs' row. Its bottom padding matches the tabs'
   so both sit on the same rule. */
.eqf-bar {
  display: flex;
  align-items: center;
  flex: none;
  gap: 7px;
  padding-bottom: 8px;
}
.eqf-bar-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--eqf-muted);
}
.eqf-slider {
  width: 150px;
  accent-color: var(--eqf-accent);
}
.eqf-end {
  font-size: 11px;
  color: var(--eqf-muted);
  font-variant-numeric: tabular-nums;
}
/* Fixed width, so α = −3 and α = +3 do not shove the slider sideways. */
.eqf-alpha {
  font-size: 12px;
  min-width: 4.5em;
}

/* ---- one example: images on line 1, the equation on line 2 ---- */
/* Both lines are cells of the same grid, so each term lands under the image it
   names without either line knowing the other's widths. The two operator
   columns are empty on the image line — the glyphs appear once, in the
   equation. */
/* minmax, not a fixed width: the image sets the floor, and a column widens if
   its term needs the room, so "z₁ + 2 dglasses" never wraps under a 104px tile. */
.eqf-grid {
  display: none;
  grid-template-columns: minmax(var(--eqf-tile), auto) auto auto auto minmax(var(--eqf-tile), auto);
  justify-content: center;
  align-items: center;
  column-gap: 14px;
  row-gap: 7px;
  padding: 16px 0;
}
.eqf-grid.is-open {
  display: grid;
}

.eqf-cell {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* ---- tiles ---- */
.eqf-frame {
  position: relative;
  width: var(--eqf-tile);
  height: var(--eqf-tile);
  border: 1px solid var(--eqf-rule);
  border-radius: 4px;
  background: var(--eqf-block);
  overflow: hidden;
}
.eqf-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 120ms linear;
}
.eqf-frame:focus-visible {
  outline: 2px solid var(--eqf-ink);
  outline-offset: 2px;
}

/* A stand-in face, drawn from figures/latent-gallery because the real render is
   not exported yet. Dashed and tagged, so it can never be read as a result. */
.eqf-frame.is-standin {
  border-style: dashed;
  border-color: var(--eqf-accent);
}
.eqf-frame.is-standin img {
  opacity: 0.62;
  filter: saturate(0.35);
}
.eqf-tag {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  display: none;
  padding: 2px 5px;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--eqf-surface);
  background: var(--eqf-accent);
  border-radius: 0 3px 0 3px;
}
/* On the anchor thumbnails there is no room for the word; the dashed border and
   a corner block carry it. */
.eqf-mini .eqf-tag {
  font-size: 0;
  padding: 4px;
}

/* With PLACEHOLDERS off, a missing render is a hatched hole rather than a
   broken image. */
.eqf-frame.is-missing {
  background: repeating-linear-gradient(45deg, transparent 0 5px, var(--eqf-rule) 5px 7px);
}

/* Holding the result tile shows the unedited face; the ring says the tile is
   temporarily showing something other than what its term claims. */
.eqf-result .eqf-frame {
  cursor: zoom-in;
}
.eqf-frame.is-comparing {
  box-shadow: inset 0 0 0 3px var(--eqf-accent);
}
.eqf-frame.is-comparing::after {
  content: "original";
  position: absolute;
  right: 0;
  top: 0;
  padding: 2px 5px;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--eqf-surface);
  background: var(--eqf-accent);
  border-radius: 0 0 0 3px;
}

/* ---- the operators that join the images ---- */
/* The image line carries the same + and = as the equation under it, in the same
   two columns, so the pictures read as the equation rather than as a picture of
   one. Serif, to match the maths. */
.eqf-img-op,
.eqf-minus,
.eqf-paren {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--eqf-muted);
  text-align: center;
  line-height: 1;
}
.eqf-img-op {
  font-size: 22px;
}

/* ---- the direction's contrastive pair ---- */
/* The middle image is not a face but a difference, so it is drawn as the pair
   that defines it, bracketed: positive anchor minus negative anchor is one term
   of the equation, and the brackets are what say so. */
.eqf-pair {
  align-items: center;
  gap: 6px;
}
.eqf-mini {
  --eqf-tile: var(--eqf-mini);
}
.eqf-minus {
  font-size: 17px;
}
/* Tall enough to bracket the anchors rather than to sit beside them: the glyph
   fills roughly three quarters of its em, hence the 1.35. The box is held to the
   anchors' own height and the glyph centred in it, so the bracket overflows
   evenly above and below rather than dragging the row's alignment around. */
.eqf-paren {
  display: flex;
  align-items: center;
  height: var(--eqf-mini);
  font-size: calc(var(--eqf-mini) * 1.35);
  font-weight: 300;
}

/* ---- the equation line ---- */
/* KaTeX inside <d-math> renders at 1.18em of the host, hence the small host
   sizes: the terms end up at about 15px, matching the figure's other text. */
.eqf-term,
.eqf-op {
  display: block;
  font-size: 13px;
  text-align: center;
  align-self: start;
  white-space: nowrap;
  /* the shadow-root rule added in equation-faces.js makes KaTeX inherit this */
  color: var(--eqf-ink);
}
.eqf-op {
  color: var(--eqf-muted);
}
.eqf-dir.is-zero {
  opacity: 0.42; /* α = 0: the direction is there, contributing nothing */
}

@media screen and (max-width: 700px) {
  .eqf {
    --eqf-tile: 88px;
    --eqf-mini: 38px;
  }
  .eqf-grid {
    column-gap: 7px;
  }
  .eqf-term,
  .eqf-op {
    font-size: 11px;
  }
  /* Below this width the slider cannot share the tabs' row without squeezing
     them; it drops to its own line under the strip. */
  .eqf-head {
    flex-wrap: wrap;
    gap: 0;
  }
  /* The strip keeps a rule of its own once it is no longer sharing the head's. */
  .eqf-tabs {
    flex: 1 0 100%;
    border-bottom: 1px solid var(--eqf-rule);
  }
  .eqf-bar {
    padding: 8px 0;
  }
  .eqf-slider {
    width: 120px;
  }
}