/* ---- Icons ---------------------------------------------------------------
   One class for every icon on every page. The shape itself comes from a
   <symbol> the server wrote into the document; this decides how it is drawn.

   Sizing is width/height in em rather than a fixed pixel value, because that is
   what the pages already had: each surface sets a font-size on its icons -- 18px
   in a card, 20px in the sidebar, 22px on a header -- and every one of those
   rules keeps working unchanged. An icon also stays in proportion with the text
   beside it when a page scales.

   Nothing here names a colour. currentColor takes whatever the surrounding text
   has, which is how one drawing serves both dark and light mode.
   -------------------------------------------------------------------------- */

.icon {
  width: 1em;
  height: 1em;
  flex: none;
  display: inline-block;
  vertical-align: -0.14em;   /* sits on the text baseline, not above it */
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke, 1.8);
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;         /* a round cap may sit a hair outside the 24 box */
}

/* The definitions block. It holds every shape the page uses and must draw
   nothing itself -- display:none would stop some browsers resolving the
   references, so it is taken out of flow and given no size instead. */
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* A button that is only an icon still needs a name for anyone not looking at
   it. Pages label those with aria-label; this is here so the icon inside one
   never announces itself twice. */
.icon use { pointer-events: none; }