/*
 * Annotated screenshots.
 *
 * Material's own annotations put their dots in the text flow, which is fine for
 * code and useless for a picture of a screen -- the whole point is that the
 * reader sees *where* on the screen the sentence is about. So a figure gets
 * `.shot`, each dot carries its position as two custom properties, and the
 * legend below is an ordinary ordered list. No plugin, and it survives print.
 *
 *   <figure class="shot" markdown>
 *   ![Alt](../assets/shots/sign-in.png)
 *   <span class="dot" style="--x:50%; --y:41%">1</span>
 *   </figure>
 */
.shot {
  position: relative;
  display: inline-block;
  margin: 1.2em 0;
  max-width: 100%;
}

.shot img {
  display: block;
  max-width: 100%;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.2rem;
}

.shot .dot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: var(--md-accent-fg-color);
  color: var(--md-accent-bg-color);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5em;
  text-align: center;
  box-shadow: 0 0 0 2px var(--md-default-bg-color);
}

/* The legend that goes with a `.shot`: numbers that match the dots. */
.legend {
  counter-reset: dot;
  list-style: none;
  padding-left: 0;
}

.legend > li {
  position: relative;
  padding-left: 2.2em;
  margin-bottom: 0.4em;
}

.legend > li::before {
  counter-increment: dot;
  content: counter(dot);
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: var(--md-accent-fg-color);
  color: var(--md-accent-bg-color);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5em;
  text-align: center;
}

/* A term the portal shows in its own words, quoted in running text. */
.ui {
  font-weight: 600;
  white-space: nowrap;
}