/* css styles */

/* Self-check quizzes (checkdown): each question sits in a .quiz card with an
   auto-numbered badge; options render as clickable option rows. */
main {
  counter-reset: quiz;
}

.quiz {
  counter-increment: quiz;
  position: relative;
  border: 1px solid #dee2e6;
  border-left: 4px solid #107895;
  border-radius: 0.5rem;
  padding: 1.75rem 1.5rem 1.25rem;
  margin: 2.75rem 0;
  background-color: rgba(16, 120, 149, 0.03);
  box-shadow: 0 2px 6px rgba(19, 21, 22, 0.06);
}

/* Question badge sits on the card's top edge, marking where each one starts */
.quiz::before {
  content: "Q" counter(quiz);
  position: absolute;
  top: -0.85rem;
  left: 1rem;
  display: inline-block;
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #fff;
  background-color: #107895;
  padding: 0.15rem 0.75rem;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(19, 21, 22, 0.2);
}

.quiz form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
  align-items: stretch;
}

.quiz form br {
  display: none;
}

.quiz form label {
  display: flex;
  align-items: center;
  padding: 0.45rem 0.9rem;
  margin-bottom: 0;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  background-color: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.quiz form label:hover {
  border-color: #107895;
  background-color: rgba(16, 120, 149, 0.06);
}

.quiz form input[type="radio"],
.quiz form input[type="checkbox"] {
  accent-color: #107895;
  margin-right: 0.5rem;
}

.quiz form input[type="submit"] {
  grid-column: 1 / -1;
  justify-self: start;
  appearance: none;
  border: none;
  border-radius: 0.375rem;
  padding: 0.375rem 1.1rem;
  margin-top: 0.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  background-color: #107895;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.quiz form input[type="submit"]:hover {
  background-color: #0b5b71;
}

.quiz form div[id^="result_"] {
  grid-column: 1 / -1;
}

.quiz form div[id^="result_"]:empty {
  display: none;
}

.quiz .quiz-right {
  color: #1a7f37;
  font-weight: 600;
}

.quiz .quiz-wrong {
  color: #9a2515;
  font-weight: 600;
}

/* GitHub repository link cards (see R/github-card.R) */
a.github-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 640px;
  margin: 1rem 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  background-color: #fff;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

a.github-card:hover {
  border-color: #107895;
  box-shadow: 0 2px 8px rgba(19, 21, 22, 0.08);
  color: inherit;
  text-decoration: none;
}

.github-card-avatar {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  flex-shrink: 0;
}

.github-card-body {
  min-width: 0;
}

.github-card-title {
  font-weight: 600;
  color: #107895;
  overflow-wrap: anywhere;
}

.github-card-desc {
  font-size: 0.875rem;
  color: #5c636a;
  margin-top: 0.15rem;
}

.github-card-meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: #5c636a;
  margin-top: 0.35rem;
}

.github-card-meta svg {
  flex-shrink: 0;
}

.github-card-lang-dot {
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  background-color: #107895;
  margin-left: 0.35rem;
}

/* Sidebar hex logo: centre it and cap its size so the tall SVG stays compact */
.sidebar-header-stacked {
  text-align: center;
}

.sidebar-logo {
  max-width: 120px;
  max-height: 140px;
  margin: 0.25rem auto 0.5rem;
}

/* Lightbox: scale up SVG figures.
   SVGs converted from PDFs (pdf2svg) and knitr's svg device have small
   intrinsic sizes in pt, so GLightbox would otherwise display them at that
   tiny natural size. Vector images can be upscaled without quality loss. */
.gslide-image img[src$=".svg"] {
  width: min(90vw, 1600px);
  height: auto;
  max-height: 90vh;
  object-fit: contain;
}