/* The site's icons: Phosphor Regular (MIT), in the spirit of Apple's SF Symbols.
   Generated by tools/apple_icons.py; edit there, never here.
   Markup: {{ icon('name') }} in templates, etIcon('name') in scripts:
   <svg class="et-i"><use href="/static/images/icons/elite-icons.svg#et-i-name"/></svg>
   The glyphs are filled shapes drawn on a 256 grid, so the line weight is part of
   the drawing: 1.5px at 24px, the weight of Apple's body-size symbols. */
:root {
    --et-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
    --et-i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z'/%3E%3C/svg%3E");
    --et-i-hop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'/%3E%3C/svg%3E");
}
.et-i {
    display: inline-block; flex: none;
    width: 1.15em; height: 1.15em;
    fill: currentColor; stroke: none;
    vertical-align: -.2em; overflow: visible;
}
.et-i--16 { width: 16px; height: 16px; }
.et-i--20 { width: 20px; height: 20px; }
.et-i--24 { width: 24px; height: 24px; }
.et-i--32 { width: 32px; height: 32px; }
.et-i--48 { width: 48px; height: 48px; }
.et-i--lg { width: 1.4em; height: 1.4em; vertical-align: -.3em; }
.et-i--2x { width: 2em; height: 2em; vertical-align: -.5em; }
/* One glyph serves every direction: the chevron and the arrow point right. */
.et-i--down { transform: rotate(90deg); }
.et-i--left { transform: rotate(180deg); }
.et-i--up { transform: rotate(-90deg); }
.et-i--gold { color: var(--c-gold, #d4ad5e); }
.et-i--muted { color: var(--c-faint, #86817c); }
/* Ratings, the Apple way: earned stars solid, the rest a quiet grey. */
.et-i--off { opacity: .28; }
.et-i--solid { opacity: 1; }
/* Arrows ease forward a touch on hover, as on apple.com links. */
.et-i--tail { transition: transform 240ms cubic-bezier(.25, .1, .25, 1); }
a:hover .et-i--tail, button:hover .et-i--tail, a:focus-visible .et-i--tail { transform: translateX(2px); }
/* A loading indicator: the notch turns, nothing else moves. */
.et-i--spin { animation: et-i-turn 900ms linear infinite; }
@keyframes et-i-turn { to { transform: rotate(360deg); } }
/* A leftover <i class="fa..."> holds its replacement glyph inside it. */
i.et-fa { font-style: normal; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
i.et-fa > .et-i { width: 1.15em; height: 1.15em; vertical-align: 0; }
/* CSS-drawn glyphs (list bullets, route separators): a mask over currentColor. */
.et-i-mask {
    display: inline-block; flex: none; width: 1em; height: 1em; vertical-align: -.125em;
    background: currentColor;
    -webkit-mask: var(--et-i-check) center / contain no-repeat;
    mask: var(--et-i-check) center / contain no-repeat;
}
.et-i-mask--arrow { -webkit-mask-image: var(--et-i-arrow); mask-image: var(--et-i-arrow); }
.et-i-mask--hop { -webkit-mask-image: var(--et-i-hop); mask-image: var(--et-i-hop); }
@media (prefers-reduced-motion: reduce) {
    .et-i--tail { transition: none; }
    a:hover .et-i--tail, button:hover .et-i--tail { transform: none; }
}