/* ================================================================
   STUDY COURSE COLOURS + COURSES ROWS — conceptual/tutor/course.js,
   course_row.js (one row per course, "Private" tag). Study's thread no
   longer wears section colours (2026-10-06: plain chat prose, no cards).

   The only colours here that are not theme tokens come from the server's
   course pack at runtime, set inline as custom properties:
     --cto-c  a section's colour (the Courses row's section strip)
   ================================================================ */

/* ---- Courses tab row ----------------------------------------------------- */
/* The row's sections as one strip, a segment per section (course_row.js
   `strip`, 2026-10-06 — the chips above are the detail page's now). */
.cto-strip {
  grid-area: strip;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.cto-strip-bar {
  display: flex;
  flex: 1 1 auto;
  max-width: 320px;
  height: 6px;
  gap: 2px;
}

.cto-strip-seg {
  flex: 1 1 0;
  border-radius: 2px;
  background: var(--cto-c);
}

.cto-strip-n {
  flex: 0 0 auto;
  color: var(--muted);
  font: 500 11px/1 "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.04em;
}

/* Study →, under the switch (course_row.js). */
.cto-row-btns {
  display: flex;
  gap: 8px;
}

/* "Private": a course only its named accounts can see (course_row.js).
   On a row it rides the mono kicker ("STUDY · PRIVATE"); on the detail page
   it follows the title. */
.course-catalog-card-kicker .cto-private {
  margin-left: 0;
  padding: 0 6px;
  font: inherit;
  font-size: 10px;
  letter-spacing: 0.1em;
}

.cto-private {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: middle;
  color: var(--muted);
  background: transparent;
}

/* Phone (catalog.css drops the actions to a full-width second row): the
   switch and the buttons share it again. */
@media (max-width: 720px) {
  .cto-row .course-catalog-card-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
}