/* Question directory and category pages. Colours come from the variables in site.css; the breadcrumb and the learning-area sentence are styled in blog.css. */
.directory-total, .category-total { margin: 1.5rem 0 .75rem; color: var(--muted); font-weight: 600; }

.category-list, .category-questions, .question-concepts ul { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.category-list li, .category-questions li, .question-concepts li { max-width: none; border-top: 1px solid var(--line); }
.category-list li:first-child, .category-questions li:first-child, .question-concepts li:first-child { border-top: 0; }
.category-list a, .category-questions a, .question-concepts a {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1.1rem; color: var(--ink); text-decoration: none;
  border-left: 3px solid transparent;
}
.category-list a:hover, .category-questions a:hover, .question-concepts a:hover { background: var(--brand-tint); border-left-color: var(--brand); }
.category-name { flex: 1; font-weight: 600; }
.category-count { color: var(--muted); font-size: .9rem; white-space: nowrap; }

.q-sign { flex: none; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; }
.q-sign svg { max-width: 100%; max-height: 100%; }
.q-number { flex: none; min-width: 4.5rem; color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.q-stem { flex: 1; }

.mock-banner {
  display: block; margin: 1.25rem 0; padding: 1rem 1.25rem;
  background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--signal);
  border-radius: var(--radius-sm); color: var(--ink); text-decoration: none;
}
a.mock-banner:hover { background: var(--brand-tint); }
.mock-banner strong { display: block; }
.mock-banner span { display: block; margin-top: .25rem; color: var(--muted); font-size: .9rem; }

.directory-articles { margin-top: 2.5rem; }
.directory-articles h2 { font-size: 1.15rem; margin: 0 0 .5rem; color: var(--brand); }
.directory-articles ul { margin: 0; padding-left: 1.25rem; }
.directory-articles li { max-width: none; margin-bottom: .35rem; }
.question-category .back { margin-top: 1.5rem; }

@media (max-width: 36em) {
  .category-questions a { flex-wrap: wrap; }
  .q-number { min-width: 0; }
}

.concept-source { color: var(--muted); font-size: .9rem; }
.concept-body { margin: 1.25rem 0; }
.concept-body ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.concept-questions h2, .question-concepts h2 { font-size: 1.15rem; margin: 2rem 0 .75rem; color: var(--brand); }

.handbook-summary { margin: 1rem 0 1.5rem; }
.chapter-cards h2 { font-size: 1.15rem; margin: 2rem 0 .75rem; color: var(--brand); }
.chapter-card { margin-bottom: 1.5rem; }
.chapter-card h3 { font-size: 1rem; margin: 0 0 .5rem; }
.chapter-all { margin: .5rem 0 0; font-size: .9rem; }