/* ===========================
   Course notes components
   =========================== */
.conn-card .conn-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--conn-title-color);
  margin-bottom: 0.4rem;
}

.wrap .geom-box,
.main-content .geom-box {
  background: color-mix(in srgb, var(--geom-box-title) 8%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--geom-box-title) 22%, var(--border-color));
  border-radius: 8px;
  padding: 1.2rem 1.5rem;
  margin: 1.2rem 0;
}
.wrap .geom-box h3,
.main-content .geom-box h3 {
  color: var(--geom-box-title);
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 0.6rem;
}
.wrap .geom-box p,
.main-content .geom-box p {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.65;
  margin: 0.4rem 0;
}

.wrap .alg-box,
.main-content .alg-box,
.wrap .app-box,
.main-content .app-box {
  background: color-mix(in srgb, var(--app-box-title) 8%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--app-box-title) 22%, var(--border-color));
  border-radius: 8px;
  padding: 1.2rem 1.5rem;
  margin: 1.2rem 0;
}
.wrap .alg-box h3,
.main-content .alg-box h3 {
  color: color-mix(in srgb, var(--accent-blue) 80%, var(--text-heading));
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 0.6rem;
}
.wrap .app-box h3,
.main-content .app-box h3 {
  color: var(--app-box-title);
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 0.6rem;
}
.wrap .alg-box p,
.wrap .alg-box li,
.main-content .alg-box p,
.main-content .alg-box li {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.65;
}
.wrap .app-box p,
.wrap .app-box li,
.main-content .app-box p,
.main-content .app-box li {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.65;
}

.wrap .info-box ul,
.wrap .example-box ul,
.wrap .def-box ul,
.wrap .theorem-box ul,
.wrap .sources ul,
.wrap .review-box ul,
.main-content .info-box ul,
.main-content .example-box ul,
.main-content .def-box ul,
.main-content .theorem-box ul,
.main-content .sources ul,
.main-content .review-box ul,
.wrap .info-box ol,
.wrap .example-box ol,
.wrap .def-box ol,
.wrap .theorem-box ol,
.wrap .sources ol,
.wrap .review-box ol,
.main-content .info-box ol,
.main-content .example-box ol,
.main-content .def-box ol,
.main-content .theorem-box ol,
.main-content .sources ol,
.main-content .review-box ol {
  padding-left: 1.35rem;
}

.wrap .sources,
.main-content .sources,
.wrap .review-box,
.main-content .review-box {
  background: var(--bg-card);
}
.wrap .sources h3,
.wrap .review-box h3,
.main-content .sources h3,
.main-content .review-box h3 {
  color: var(--accent-gold);
  margin-top: 0;
  margin-bottom: 0.75rem;
}
.wrap .sources li,
.wrap .review-box li,
.main-content .sources li,
.main-content .review-box li {
  color: var(--text-color);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin-left: auto;
  margin-right: auto;
}

hr {
  border: none;
  border-bottom: 2px solid var(--border-color);
  margin: 2em 0;
}

html.dark img,
html.dark video { filter: brightness(0.85) contrast(1.1); }