.courses-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}

.courses-search {
  max-width: 400px;
  position: relative;
}

.courses-search svg {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-secondary);
  pointer-events: none;
}

.courses-search .input {
  padding-left: 2.5rem;
}

.courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-6);
}

.course-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.course-card .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.course-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.course-icon {
  width: 48px;
  height: 48px;
  background: var(--subject-bg, var(--color-primary-soft));
  color: var(--subject-accent, var(--color-primary));
  border-radius: var(--radius-btn);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.course-title {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}

.course-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  flex: 1;
}

.course-meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}

.course-meta-item svg {
  width: 16px;
  height: 16px;
}

.course-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  margin-top: auto;
}

.course-title-button {
  text-align: left;
  color: var(--color-primary);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.courses-toolbar[hidden] { display: none; }
.courses-grid--detail { display: block; }
.course-detail { max-width: 960px; }
.course-detail-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-5); }
.course-detail h2 { font-size: 1.5rem; overflow-wrap: anywhere; }
.course-content-scope, .course-content-empty, .course-link-unavailable { color: var(--color-text-secondary); }
.course-content-scope { margin: var(--space-3) 0 var(--space-6); }
.course-content-section { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-btn); padding: var(--space-5); margin-top: var(--space-4); }
.course-content-section h3 { margin-bottom: var(--space-3); overflow-wrap: anywhere; }
.course-structured-text { line-height: 1.65; overflow-wrap: anywhere; }
.course-structured-text h4, .course-structured-text h5, .course-structured-text h6 { margin: 16px 0 8px; font-weight: 650; }
.course-structured-text p { margin: 6px 0; }
.course-structured-text ol, .course-structured-text ul { padding-left: 24px; margin: 8px 0; }
.course-structured-text ul { list-style: disc; }
.course-structured-text ol[type="1"] { list-style-type: decimal; }
.course-structured-text ol[type="a"] { list-style-type: lower-alpha; }
.course-structured-text ol[type="A"] { list-style-type: upper-alpha; }
.course-structured-text ol[type="i"] { list-style-type: lower-roman; }
.course-structured-text ol[type="I"] { list-style-type: upper-roman; }
.course-structured-text li { margin: 4px 0; }
#courses-grid .course-inline-text > .course-structured-text { display: block; width: 100%; }
.course-content-items { list-style: none; padding: 0; margin: 0; }
.course-content-item { display: flex; justify-content: space-between; align-items: start; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.course-content-item:last-child { border-bottom: 0; }
.course-content-item > div { min-width: 0; }
.course-content-name { display: block; margin-top: var(--space-2); overflow-wrap: anywhere; }
.course-content-item > a, .course-link-unavailable { flex-shrink: 0; font-size: 0.875rem; }
.course-content-item button.course-content-name { font: inherit; text-decoration: underline; }
.course-resource-pdf { width: 100%; height: 72vh; min-height: 360px; border: 1px solid var(--color-border); border-radius: var(--radius-btn); }
.course-resource-text { background: var(--color-surface); border: 1px solid var(--color-border); padding: var(--space-5); line-height: 1.7; }
.course-resource-text p + p { margin-top: var(--space-4); }
.course-resource-text, .course-resource-destination { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .course-content-item { flex-direction: column; }
}