/*
 * this stylesheet styles the guide panel's infographics.
 * every color is a token from site.css, and numbers use the mono face.
 */

/* each figure has a title row, a one-line caption, the drawing and an optional footnote. */

.ig {
  margin: 0 0 var(--space-7);
}

.ig:last-child {
  margin-bottom: 0;
}

.ig-cap {
  display: block;
  margin: 0 0 var(--space-2);
}

.ig-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.ig-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-1);
}

.ig-mass {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--cyan);
}

.ig-line {
  display: block;
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--text-3);
}

.ig-hero {
  margin: var(--space-2) 0 var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-2);
}

.ig-hero .ig-num {
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--text-1);
}

.ig-hero sup {
  font-size: 0.62em;
  line-height: 0;
}

.ig-hero sup sup {
  font-size: 0.8em;
}

.ig-num {
  font-family: var(--font-mono);
  color: var(--text-1);
}

.ig-foot {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--text-2);
}

.ig-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* drawings scale to the column width, and the cap keeps text from growing too large on wide sheets. */

.ig-svg {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
  margin-top: var(--space-2);
  overflow: visible;
}

/* svg text uses the body face for words and the mono face for numbers. */

.ig-svg text {
  font-family: var(--font-body);
  font-size: 11.5px;
  fill: var(--text-2);
}

.ig-svg .t-strong {
  font-weight: 700;
  fill: var(--text-1);
}

.ig-svg .t-dim {
  fill: var(--text-3);
}

.ig-svg .t-num,
.ig-svg .t-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.ig-svg .t-num {
  fill: var(--text-2);
}

.ig-svg .t-num.t-strong {
  fill: var(--text-1);
}

.ig-svg .t-tick {
  font-family: var(--font-mono);
  font-size: 10.5px;
  fill: var(--text-3);
}

.ig-svg .t-axis {
  font-size: 10.5px;
  fill: var(--text-3);
}

.ig-svg .t-big {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 500;
  fill: var(--text-1);
}

.ig-svg .t-sup {
  font-size: 8.5px;
}

.ig-svg .halo {
  paint-order: stroke;
  stroke: var(--ink-1);
  stroke-width: 3px;
  stroke-linejoin: round;
}

/* marks carry color, and gridlines and axes are solid hairlines one step off the surface. */

.ig-svg .m-grid,
.ig-svg .m-grid line {
  stroke: var(--ink-3);
  stroke-width: 1;
}

.ig-svg .m-axis {
  fill: none;
  stroke: var(--ink-4);
  stroke-width: 1;
}

.ig-svg .m-leader {
  stroke: var(--text-3);
  stroke-width: 1;
  opacity: 0.7;
}

.ig-svg .m-scale {
  stroke: var(--text-3);
  stroke-width: 1;
}

.ig-svg .m-band {
  fill: var(--amber);
  fill-opacity: 0.07;
}

.ig-svg .m-you {
  fill: var(--amber);
  stroke: var(--ink-1);
  stroke-width: 2;
}

.ig-svg .m-ref {
  fill: var(--text-3);
  stroke: var(--ink-1);
  stroke-width: 2;
}

/* these marks draw the side view of the hole. */

.ig-svg .m-ergo {
  fill: var(--text-2);
  fill-opacity: 0.07;
  stroke: var(--text-3);
  stroke-width: 1;
}

.ig-svg .m-hole {
  fill: var(--ink-0);
  stroke: var(--text-2);
  stroke-width: 2;
}

.ig-svg .m-inner {
  fill: none;
  stroke: var(--text-3);
  stroke-width: 1.5;
}

.ig-svg .m-disk {
  stroke: var(--amber-lo);
  stroke-width: 3;
}

.ig-svg .m-isco {
  stroke: var(--amber);
  stroke-width: 2;
}

.ig-svg .m-photon {
  fill: var(--ink-1);
  stroke: var(--cyan);
  stroke-width: 1.5;
}

.ig-svg .m-ring {
  fill: var(--text-1);
}

.ig-svg .m-path {
  stroke: var(--amber);
  stroke-width: 2;
}

.ig-svg .m-zone {
  fill: var(--hypo);
  fill-opacity: 0.16;
  stroke: var(--hypo);
  stroke-width: 1;
}

.ig-svg .m-portal {
  stroke: var(--hypo);
  stroke-width: 3;
}

/* these marks draw the frame-dragging top view. */

.ig-svg .m-orbit {
  fill: none;
  stroke: var(--ink-4);
  stroke-width: 1;
}

.ig-svg .m-earth {
  fill: var(--cyan-lo);
  stroke: var(--text-2);
  stroke-width: 1.5;
}

.ig-svg .m-spin,
.ig-svg .m-drag {
  fill: none;
  stroke-width: 2;
}

.ig-svg .m-spin {
  stroke: var(--text-3);
}

.ig-svg .m-drag {
  stroke: var(--amber);
}

.ig-svg .m-spin-head {
  fill: var(--text-3);
}

.ig-svg .m-drag-head {
  fill: var(--amber);
}

/* these marks draw the light cones. */

.ig-svg .m-cone-fill {
  fill: var(--text-3);
  fill-opacity: 0.12;
}

.ig-svg .m-cone-fill-you {
  fill: var(--amber);
  fill-opacity: 0.16;
}

.ig-svg .m-cone {
  stroke: var(--text-2);
  stroke-width: 2;
  stroke-linecap: square;
}

.ig-svg .m-cone-you {
  stroke: var(--amber);
  stroke-width: 2;
  stroke-linecap: square;
}

.ig-svg .m-stay {
  stroke: var(--text-3);
  stroke-width: 1;
}

/* these marks draw the clock bars and the light waves. */

.ig-svg .m-bar-you {
  fill: var(--amber);
}

.ig-svg .m-bar-ref {
  fill: var(--text-3);
}

.ig-svg .m-bar-diff {
  fill: var(--cyan);
}

.ig-svg .m-bar-gap {
  fill: none;
  stroke: var(--text-3);
  stroke-width: 1;
}

.ig-svg .m-wave-far,
.ig-svg .m-wave-blue,
.ig-svg .m-wave-red {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
}

.ig-svg .m-wave-far {
  stroke: var(--text-3);
}

.ig-svg .m-wave-blue {
  stroke: var(--cyan);
}

.ig-svg .m-wave-red {
  stroke: var(--amber-lo);
}