/* Icons. SVG masks painted in currentColor, so an icon takes the colour, size (1em) and hover of the
   text around it. Never use Unicode arrows, stars, checks or crosses as icons (nor emoji): iOS Safari
   draws those with the emoji font and they look like emoji.
   Markup:  <span class="ic ic-arr" aria-hidden="true"></span>   (decorative; the text carries the meaning)
   CSS ::before/::after:  content:""; display:inline-block; width:1em; height:1em; background-color:currentColor;
                          -webkit-mask:var(--ic-check) center/contain no-repeat; mask:var(--ic-check) center/contain no-repeat; */
:root{
  --ic-arr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15.5M13.5 6l6 6-6 6'/%3E%3C/svg%3E");
  --ic-arr-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H4.5M10.5 6l-6 6 6 6'/%3E%3C/svg%3E");
  --ic-ext:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 17.5l11-11M8.5 6.5h9v9'/%3E%3C/svg%3E");
  --ic-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v15.5M6 13.5l6 6 6-6'/%3E%3C/svg%3E");
  --ic-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20V4.5M6 10.5l6-6 6 6'/%3E%3C/svg%3E");
  --ic-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E");
  --ic-close:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  --ic-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --ic-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  --ic-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' stroke='%23000' stroke-width='1.2' stroke-linejoin='round' d='M12 2.3l2.56 7.08 7.52.24-5.94 4.62 2.09 7.24L12 17.25l-6.23 4.23 2.09-7.24-5.94-4.62 7.52-.24z'/%3E%3C/svg%3E");
  --ic-spark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2.5c.7 5.2 2.9 7.6 9.5 9.5-6.6 1.9-8.8 4.3-9.5 9.5-.7-5.2-2.9-7.6-9.5-9.5 6.6-1.9 8.8-4.3 9.5-9.5z'/%3E%3C/svg%3E");
  --ic-diamond:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 3l9 9-9 9-9-9z'/%3E%3C/svg%3E");
}
.ic{display:inline-block;flex:none;width:1em;height:1em;vertical-align:-.14em;background-color:currentColor;
  -webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.ic-arr{--ic:var(--ic-arr)} .ic-arr-l{--ic:var(--ic-arr-l)} .ic-ext{--ic:var(--ic-ext)}
.ic-down{--ic:var(--ic-down)} .ic-up{--ic:var(--ic-up)} .ic-check{--ic:var(--ic-check)}
.ic-close{--ic:var(--ic-close)} .ic-plus{--ic:var(--ic-plus)} .ic-minus{--ic:var(--ic-minus)}
.ic-star{--ic:var(--ic-star)} .ic-spark{--ic:var(--ic-spark)} .ic-diamond{--ic:var(--ic-diamond)}