/* Courses tab — chapter sections modal (pure-information dialog).
   Section number badge color is themed per chapter via the inline
   --section-number-color CSS variable set by courses.js on .chapter-modal. */

body.modal-open {
  overflow: hidden;
}

.chapter-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgb(var(--well-rgb) / calc(0.55 * var(--well-k)));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 1000;
  animation: chapter-modal-fade 0.12s ease-out;
}

@keyframes chapter-modal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.chapter-modal {
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 20px 60px var(--shadow-strong);
  overflow: hidden;
}

.chapter-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}

.chapter-modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.chapter-modal-close {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-family: inherit;
  line-height: 1;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.chapter-modal-close:hover {
  color: var(--text);
  border-color: var(--border);
  background: var(--surface);
}

.chapter-modal-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.chapter-modal-content {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.chapter-modal-content::-webkit-scrollbar {
  width: 8px;
}

.chapter-modal-content::-webkit-scrollbar-track {
  background: transparent;
}

.chapter-modal-content::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.chapter-modal-content::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
  background-clip: padding-box;
}

/* A ROW IS TWO LINKS (2026-09-01). The section opens in the app; "Colab ↗"
   opens upstream. They are siblings rather than nested because an <a> may not
   contain an <a> — see courses.js::buildSectionItem. The wrapper carries no
   padding or background of its own: the section link keeps the full-width
   hover it always had, and the Colab link sits in the gutter it leaves. */
.section-row {
  align-items: stretch;
  display: flex;
  gap: 4px;
}

.section-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 6px;
  cursor: default;
  flex: 1;
  min-width: 0;
  transition: background-color 0.15s ease;
}

/* Deliberately quiet: the in-app notebook is the route this app is for, and a
   second link of equal weight on every row would read as a choice the learner
   has to make thirty-one times. It comes forward on hover. */
.section-colab {
  align-self: center;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  flex-shrink: 0;
  font-size: 11.5px;
  padding: 4px 8px;
  text-decoration: none;
  white-space: nowrap;
}

.section-colab:hover {
  border-color: var(--border);
  color: var(--text);
}

.section-colab:focus-visible {
  outline: 2px solid var(--section-number-color, var(--accent));
  outline-offset: 2px;
}

.section-item:hover {
  background: var(--surface);
}

a.section-item-link {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

a.section-item-link:hover {
  background: var(--surface);
}

a.section-item-link:hover .section-title {
  color: var(--section-number-color, var(--accent));
}

a.section-item-link:focus-visible {
  outline: 2px solid var(--section-number-color, var(--accent));
  outline-offset: 2px;
}

.section-number {
  flex-shrink: 0;
  min-width: 40px;
  font-size: 13px;
  font-weight: 600;
  color: var(--section-number-color, var(--accent));
  line-height: 1.5;
}

.section-number:empty {
  display: none;
}

.section-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.section-desc {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.4;
}