/* Question sketches: ink lines, soft pastel fills, drawn in when a question opens. */

.sketch {
  margin: 14px 0 4px;
  border-radius: var(--radius-l);
  border: 1px solid var(--glass-border);
  background: var(--glass);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  overflow: hidden;
  --sk-ink: #1a1a1a;
  --sk-paper: #fffdf9;
}

.sketch-svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

.sketch-svg * {
  vector-effect: non-scaling-stroke;
}

.sk-l,
.sk-t,
.sk-a {
  fill: none;
  stroke: var(--sk-ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sk-t {
  stroke-width: 1.3;
}

.sk-a {
  stroke: var(--accent);
}

.sk-p {
  fill: var(--sk-paper);
  stroke: var(--sk-ink);
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.sk-h,
.sk-dot {
  fill: var(--sk-ink);
  stroke: none;
}

.sk-f {
  stroke: none;
}

.sk-soft {
  opacity: 0.45;
}

.sk-dash {
  fill: none;
  stroke: var(--sk-ink);
  stroke-width: 1.5;
  stroke-dasharray: 3 5;
  stroke-linecap: round;
}

.sk-dash-pink {
  stroke: #e98aa8;
}

.sk-dash-lilac {
  stroke: #8d80e8;
}

.sk-rec {
  fill: var(--bad);
}

.sk-g {
  font-family: var(--serif);
  fill: var(--sk-ink);
}

.sk-ga {
  fill: var(--accent);
}

.sk-peach { fill: #ffcfae; }
.sk-mint { fill: #bfe9dc; }
.sk-lilac { fill: #d9d3ff; }
.sk-sun { fill: #ffe39a; }
.sk-pink { fill: #ffd0de; }
.sk-sky { fill: #cfe6ff; }
.sk-sand { fill: #efe7dc; }
.sk-you { fill: #ffa866; }
.sk-drop { fill: #cfe6ff; }

/* In dark mode the sketch stays on paper, like a printed illustration. */
@media (prefers-color-scheme: dark) {
  .sketch {
    background: #f1eee8;
    border-color: transparent;
  }
}

/* Drawn in: every line and outline traces itself, fills settle in after. */
@media (prefers-reduced-motion: no-preference) {
  .sketch .sk-l,
  .sketch .sk-t,
  .sketch .sk-a,
  .sketch .sk-p {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: sk-draw 0.9s ease-out forwards;
  }

  .sketch .sk-f,
  .sketch .sk-h,
  .sketch .sk-dot,
  .sketch .sk-g {
    opacity: 0;
    animation: sk-fade 0.5s ease-out 0.45s forwards;
  }

  .sketch .sk-f.sk-soft {
    animation-name: sk-fade-soft;
  }
}

@keyframes sk-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes sk-fade {
  to {
    opacity: 1;
  }
}

@keyframes sk-fade-soft {
  to {
    opacity: 0.45;
  }
}

/* With a sketch above it, the question can be a little smaller. */
.sketch + .prompt {
  font-size: 26px;
  margin-top: 16px;
}