/* Styles for the custom elements in elements.js. Kept beside them, not scattered. */

orr-option { display: block; }
.opt {
  display: block; width: 100%; min-height: var(--tap); margin: var(--space-2) 0 0;
  padding: 14px var(--space-3); text-align: left; font-weight: 400; cursor: pointer;
  background: var(--tap-bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.opt { transition: border-color var(--motion), color var(--motion), background-color var(--motion); }
.opt.right { border-color: var(--right); color: var(--right); font-weight: 600; background: color-mix(in srgb, var(--right) 8%, var(--card)); }
.opt.wrong { border-color: var(--wrong); color: var(--wrong); }
.opt:disabled { cursor: default; opacity: 1; }

orr-verdict {
  display: block; margin: var(--space-4) 0 0; padding: var(--space-3) 18px;
  background: var(--card); border: 1px solid var(--line);
  border-left: 3px solid var(--line); border-radius: var(--radius);
  animation: rise var(--motion) both;
}
orr-verdict.right { border-left-color: var(--right); background: color-mix(in srgb, var(--right) 7%, var(--card)); }
orr-verdict.wrong { border-left-color: var(--wrong); }
orr-verdict b { display: block; margin-bottom: var(--space-1); }
orr-verdict .mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-right: 8px; vertical-align: -3px;
  border-radius: 99px; border: 2px solid currentColor;
}
orr-verdict.right .mark { color: var(--right); }
orr-verdict.wrong .mark { color: var(--wrong); }
orr-verdict.right .mark path {
  stroke-dasharray: 22; stroke-dashoffset: 22;
  animation: draw 320ms ease forwards 60ms;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
html.exam orr-verdict { animation: none; }
html.exam orr-verdict.right .mark path { animation: none; stroke-dashoffset: 0; }
.drill { color: var(--muted); margin: var(--space-2) 0 0; }
.cite {
  font-size: 13px; color: var(--muted); margin: var(--space-2) 0 0;
  padding-top: var(--space-2); border-top: 1px solid var(--line);
}

orr-stat { display: block; background: var(--card); border: 1px solid var(--line);
           border-radius: var(--radius-lg); padding: var(--space-3); box-shadow: var(--shadow); }
.stat-value { font-size: 34px; font-weight: 650; letter-spacing: -0.03em; line-height: 1.1; }
.stat-label { color: var(--muted); font-size: 14px; margin-top: 2px; }

orr-status {
  display: inline-block; font-size: 12px; font-weight: 650; letter-spacing: .06em;
  padding: 3px 10px; border-radius: 99px; border: 1px solid currentColor;
}
.pill-go { color: var(--go); }
.pill-nogo { color: var(--nogo); }
.pill-pending { color: var(--pending); }
.pill-na { color: var(--muted); }

/* question artwork: a phone gets a comfortable thumb-sized image, a laptop a larger one */
figure.art { margin: var(--space-3) 0; text-align: center; }
figure.art img { width: 172px; max-width: 60%; height: auto; }
@media (min-width: 680px) { figure.art img { width: 220px; } }