/* The Quizel wordmark, as in the app (QuizelWordmark in StudyQuiz/Views/QuizelMascotView.swift):
   SF Pro Rounded Black, "Quiz" in ink and "e", "l" in the mascot's soft-glass lavender, each glyph lit
   from its upper left, all lifted by a short extrusion and one soft shadow.

   The face is the system's rounded font: ui-rounded is SF Pro Rounded on Apple devices (every browser
   on iPhone and iPad, Safari on the Mac). Apple's font licence does not allow embedding SF in a web
   page, so no font file is shipped and other systems fall back to a rounded or plain sans.

   Markup: <span class="wm" role="img" aria-label="Quizel"><span class="q" data-t="Quiz">Quiz</span>
   <span class="g" data-t="e">e</span><span class="g" data-t="l">l</span></span> (no whitespace between).
   .wm is the light version, .wm-auto follows the colour scheme, .wm-dark is for dark backgrounds. */

.wm {
  --wm-ink: linear-gradient(180deg, rgba(255, 255, 255, 0.36) 0, rgba(255, 255, 255, 0) 30%), linear-gradient(180deg, #463f66, #221e33);
  --wm-ink-d1: #15121f;
  --wm-ink-d2: #0a0910;
  --wm-shadow: drop-shadow(0 0.09em 0.11em rgba(58, 35, 128, 0.2));
  position: relative;
  display: inline-flex;
  align-items: baseline;
  font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", system-ui, sans-serif;
  font-weight: 900;
  font-style: normal;
  font-synthesis: none;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  filter: var(--wm-shadow);
}
.wm > span {
  position: relative;
  display: inline-block;
  color: transparent;
  font-size: inherit;
  -webkit-background-clip: text;
  background-clip: text;
}
/* The extrusion: a copy behind each part, stepped down and slightly right like the app's four layers. */
.wm > span::before {
  content: attr(data-t);
  content: attr(data-t) / "";
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  color: var(--d1);
  text-shadow:
    0.0042em 0.0153em 0 var(--d1),
    0.0083em 0.0306em 0 var(--d1),
    0.0125em 0.0458em 0 var(--d2),
    0.0167em 0.0611em 0 var(--d2);
}
.wm .q { background-image: var(--wm-ink); --d1: var(--wm-ink-d1); --d2: var(--wm-ink-d2); }
.wm .g {
  background-image:
    linear-gradient(155deg, rgba(255, 249, 255, 0.78) 0, rgba(244, 234, 255, 0.34) 26%, rgba(202, 182, 255, 0) 52%),
    radial-gradient(circle at 32% 18%, #b7a7fc 0, #a997f8 50%, #8267e5 105%);
  --d1: #7a5fe0;
  --d2: #4e36b0;
}

/* Dark backgrounds: white ink on a grey-violet side, a deeper shadow. */
.wm.wm-dark,
.nav[data-over="sky"] .wm {
  --wm-ink: linear-gradient(180deg, #ffffff, #e8e4f6);
  --wm-ink-d1: #9c93bc;
  --wm-ink-d2: #6e6690;
  --wm-shadow: drop-shadow(0 0.12em 0.17em rgba(58, 35, 128, 0.55));
}
/* On the violet sky the lavender glass needs a lighter body to stand apart from the sky behind it. */
.nav[data-over="sky"] .wm .g {
  background-image:
    linear-gradient(155deg, rgba(255, 252, 255, 0.9) 0, rgba(248, 242, 255, 0.45) 28%, rgba(220, 208, 255, 0) 55%),
    radial-gradient(circle at 32% 18%, #ece6ff 0, #d4c9ff 50%, #ad99f6 105%);
}
@media (prefers-color-scheme: dark) {
  .wm.wm-auto {
    --wm-ink: linear-gradient(180deg, #ffffff, #e8e4f6);
    --wm-ink-d1: #9c93bc;
    --wm-ink-d2: #6e6690;
    --wm-shadow: drop-shadow(0 0.12em 0.17em rgba(58, 35, 128, 0.55));
  }
}

/* The legal pages' stylesheet sizes every ".brand span" on phones; the letters follow the wordmark. */
.wm > .q, .wm > .g { font-size: inherit; }

/* Sizes beside the app icon */
.nav .brand .wm { font-size: 21px; }
footer .brand .wm { font-size: 18px; }
.brand-icon + .wm { font-size: 24px; }