/* «دورات» (/courses and /courses/edit, Task 7.7; a run's page /courses/run/edit and «ملفي التعريفي» /courses/profile,
   Task 7.8; the students' «دورات» /courses/catalog and a run's page /courses/run, Task 7.9, with its material and
   students, Task 7.10; a run's lesson, /courses/run/lesson, is lesson-view's, in materials.css; every run's held seats,
   /admin/transfers «المقاعد المحجوزة», Task admin-d, with «المسجّلون»'s rows). Right to left first:
   logical properties only. Colours and sizes come from tokens.css. The list's rows are the materials library's, with
   the course's picture; a course's page, and a run's, is its state above its form. */

courses-page,
course-editor-page,
run-editor-page,
trainer-profile-page,
catalog-page,
run-page,
transfers-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.crs-head h1 {
  margin-block-end: var(--space-1);
}

.crs-head .lead {
  margin-block-end: 0;
}

.crs-line,
.crs-note,
.crs-empty {
  margin: 0;
}

.crs-note,
.crs-empty,
.crs-muted {
  color: var(--color-muted);
}

.crs-note {
  font-size: var(--font-size-small);
}

.crs-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* a course's state: waiting and sent back stand out; hidden is quiet */
.crs-badge {
  display: inline-block;
  padding-inline: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-muted);
  font-size: var(--font-size-small);
  font-weight: 400;
  line-height: var(--line-height);
}

.crs-badge.is-waiting {
  border-color: var(--color-draft);
  background: var(--color-draft-soft);
  color: var(--color-draft);
}

.crs-badge.is-returned {
  border-color: var(--color-danger);
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.crs-badge.is-shown {
  border-color: var(--color-success);
  background: var(--color-success-soft);
  color: var(--color-success-text);
}

/* ── The list ──────────────────────────────────────────────────────────────────────────────────────────────── */

.crs-library {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.crs-new-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.crs-new-bar:empty {
  display: none;
}

.crs-list {
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  list-style: none;
}

.crs-list:empty {
  display: none;
}

.crs-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

.crs-row + .crs-row {
  border-block-start: 1px solid var(--color-border);
}

/* the course's picture, as its card will show it (16:9); none: an empty frame of the same size */
.crs-thumb {
  flex: none;
  inline-size: 7.5rem;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  object-fit: cover;
}

.crs-row-main {
  flex: 1 1 12rem;
  min-inline-size: 0;
}

.crs-row-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.crs-row-title {
  font-size: var(--font-size-card-title);
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.crs-row-title:hover {
  text-decoration: underline;
}

.crs-row-meta {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
  overflow-wrap: anywhere;
}

/* on a phone, the picture over the text (the text as tall as it is: no room left under it) */
@media (max-width: 30rem) {
  .crs-row {
    flex-direction: column;
    align-items: stretch;
  }

  .crs-thumb {
    inline-size: 100%;
  }

  .crs-row-main {
    flex: none;
  }
}

/* ── A course ──────────────────────────────────────────────────────────────────────────────────────────────── */

.crs-crumbs {
  font-size: var(--font-size-small);
}

/* «الدورات ›», as the path to the page (after the link, not in its name, and not read aloud where the browser allows it) */
.crs-crumbs::after {
  content: "›";
  content: "›" / "";
  margin-inline-start: var(--space-1);
  color: var(--color-muted);
}

course-editor-page h1,
run-editor-page h1,
trainer-profile-page h1,
run-page h1 {
  margin-block-end: 0;
  overflow-wrap: anywhere;
}

.crs-status,
.crs-form {
  display: flex;
  flex-direction: column;
}

.crs-status {
  gap: var(--space-3);
}

.crs-form {
  gap: var(--space-4);
}

.crs-status-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-card-title);
  font-weight: 400;
}

.crs-review-note {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* the note an admin sent it back with: its lines as written */
.crs-review-note blockquote {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-inline-start: 3px solid var(--color-draft);
  border-radius: var(--radius);
  background: var(--color-draft-soft);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.crs-return {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-inline-size: var(--card-width);
}

.crs-visibility {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--color-border);
}

.crs-visibility .crs-line,
.crs-visibility .crs-note {
  flex: 1 0 100%;
}

/* «إظهار» while something stops it: greyed, and the keyboard can stay on it */
.crs-visibility .button[aria-disabled="true"],
.crs-visibility .button[aria-disabled="true"]:hover {
  background: var(--color-surface);
  opacity: 0.6;
  cursor: default;
}

.crs-visibility .button[aria-disabled="true"]:active {
  box-shadow: none;
}

.crs-form .field-input {
  max-inline-size: 100%;
}

.crs-summary,
.crs-goals {
  resize: vertical;
}

.crs-count {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
  text-align: end;
}

.crs-picture {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.crs-picture-preview {
  inline-size: min(100%, 20rem);
  aspect-ratio: 16 / 9;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  object-fit: cover;
}

.crs-picture-line {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.crs-picture-line:empty {
  display: none;
}

.crs-nodes-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.crs-nodes {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.crs-node {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: var(--space-1);
  padding-inline: var(--space-3) var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
}

.crs-node.is-none {
  padding-block: var(--space-2);
  border-style: dashed;
  background: transparent;
  color: var(--color-muted);
}

.crs-node.is-gone {
  border-color: var(--color-danger);
}

.crs-node.is-gone .crs-node-name {
  color: var(--color-danger);
}

.crs-node-name {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.crs-node-remove {
  flex: none;
}

.crs-node-add,
.crs-version-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.crs-node-add .field-input,
.crs-version-pick .field-input {
  flex: 1 1 14rem;
  min-inline-size: 0;
}

.crs-version {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}

.crs-version-line {
  margin: 0;
  overflow-wrap: anywhere;
}

.crs-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.crs-unsaved {
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.crs-danger {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.crs-confirm {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* a button that deletes: red letters, red only under the pointer */
.crs-danger-button {
  border-color: var(--color-danger);
  background: var(--color-surface);
  color: var(--color-danger);
}

.crs-danger-button:hover {
  background: var(--color-danger-soft);
}

/* ── A course's runs (Task 7.8) ──────────────────────────────────────────────────────────────────────────────── */

.run-list-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.run-list {
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  list-style: none;
}

.run-list:empty {
  display: none;
}

.run-list-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
}

.run-list-row + .run-list-row {
  border-block-start: 1px solid var(--color-border);
}

/* ── A run ─────────────────────────────────────────────────────────────────────────────────────────────────── */

.run-subhead {
  overflow-wrap: anywhere;
}

/* fields side by side while there is room: the registration's dates, a lecture's day, start and length */
.run-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
}

.run-row > .field {
  flex: 1 1 12rem;
  min-inline-size: 0;
}

.run-number {
  inline-size: 9rem;
}

.run-moment {
  inline-size: 16rem;
}

.run-trainer {
  justify-content: flex-start;
}

.run-trainer .crs-node-name {
  flex: 1 1 auto;
}

.run-trainer-photo {
  flex: none;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 50%;
  object-fit: cover;
}

.run-trainer-link {
  flex: none;
  font-size: var(--font-size-small);
}

.run-price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.run-lectures-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}

.run-lectures-card > .button {
  align-self: flex-start;
}

.run-lectures {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.run-lecture {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
}

.run-lecture.is-editing {
  border-color: var(--color-primary);
  background: var(--color-surface);
}

.run-lecture-head,
.run-lecture-title {
  margin: 0;
  overflow-wrap: anywhere;
}

/* the lessons a lecture covers, one after the other */
.run-topics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  padding: 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
  list-style: none;
}

.run-topics .is-gone,
.run-topic-pick.is-gone {
  color: var(--color-danger);
}

.run-lecture-form,
.run-pattern-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.run-lecture-form-title {
  margin: 0;
  font-size: var(--font-size-body);
}

/* a version's lessons, each with the units above it; a long list scrolls in its box */
.run-topic-picks {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-block-size: 18rem;
  padding: var(--space-2) var(--space-3);
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.run-topic-pick {
  align-items: flex-start;
}

.run-topic-pick > span {
  display: flex;
  flex-direction: column;
  padding-block-start: var(--space-1);
  overflow-wrap: anywhere;
}

.run-topic-path {
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.run-pattern {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--color-border);
}

.run-pattern-form {
  align-self: stretch;
}

.run-pattern-days {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.run-pattern-day {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.run-pattern-day .qb-check {
  min-inline-size: 7rem;
}

.run-pattern-time {
  inline-size: 9rem;
}

.run-ask {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius);
  background: var(--color-surface);
}

/* «إلغاء الدفعة», on its own line under the others */
.crs-visibility .run-ask {
  flex: 1 0 100%;
}

/* ── A trainer's profile ───────────────────────────────────────────────────────────────────────────────────── */

.run-photo-preview {
  inline-size: 8rem;
  block-size: 8rem;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-bg);
  object-fit: cover;
}

/* ── «دورات» for students (Task 7.9) ───────────────────────────────────────────────────────────────────────── */

.reg-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.reg-section h2 {
  margin: 0;
  font-size: var(--font-size-card-title);
}

.reg-list {
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  list-style: none;
}

.reg-list .crs-row + .crs-row {
  border-block-start: 1px solid var(--color-border);
}

.reg-card {
  align-items: flex-start;
}

.reg-card-name {
  margin: 0;
  overflow-wrap: anywhere;
}

/* where the student stands, in «دوراتي» */
.reg-card-mine {
  display: inline-block;
  margin: var(--space-1) 0 0;
  padding-inline: var(--space-2);
  border-radius: var(--radius);
  background: var(--color-success-soft);
  color: var(--color-success-text);
  font-size: var(--font-size-small);
}

.reg-card-mine.is-pending,
.reg-card-mine.is-waiting {
  background: var(--color-draft-soft);
  color: var(--color-draft);
}

/* ── A run's page for students ─────────────────────────────────────────────────────────────────────────────── */

.reg-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* the course's picture, as its card shows it (16:9), as wide as the page allows */
.reg-picture {
  inline-size: min(100%, 36rem);
  aspect-ratio: 16 / 9;
  margin-block-end: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  object-fit: cover;
}

.reg-run-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

.reg-box,
.reg-about,
.reg-trainers,
.reg-lectures {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}

.reg-box > .button {
  align-self: flex-start;
}

/* «أضف إلى التقويم» (Task lecture-reminders): the link to the run's calendar file, and what it is under it */
.reg-calendar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

.reg-calendar > .field-hint {
  margin: 0;
}

.reg-facts {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding-inline-start: var(--space-4);
}

.reg-mine {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-inline-start: 3px solid var(--color-success);
  border-radius: var(--radius);
  background: var(--color-success-soft);
}

.reg-mine.is-pending,
.reg-mine.is-waiting {
  border-color: var(--color-draft);
  background: var(--color-draft-soft);
}

.reg-mine.is-cancelled {
  border-color: var(--color-border);
  background: var(--color-bg);
}

.reg-transfer {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
}

/* the transfer's details: each name, then its value (an IBAN and a reference left to right, as written) */
.reg-transfer-list {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-1) var(--space-3);
  margin: 0;
}

.reg-transfer-list dt {
  color: var(--color-muted);
}

.reg-transfer-list dd {
  margin: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.reg-transfer-list dd[dir="ltr"] {
  text-align: end;
  unicode-bidi: isolate;
}

/* «إيصال التحويل» (Task payment, part a2): under the transfer's details, its title, what to do, then the receipt
   attached (its line, its picture or the PDF's link, «استبدال الإيصال») or the form; the keyboard comes to the part
   itself after a send, with no ring round all of it (as a card's own) */
.reg-receipt {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--color-border);
}

.reg-receipt:focus {
  outline: none;
}

.reg-receipt-title {
  margin: 0;
  font-size: var(--font-size-body);
}

.reg-receipt-lead,
.reg-receipt-line,
.reg-receipt-chosen {
  margin: 0;
  overflow-wrap: anywhere;
}

.reg-receipt-shown {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

/* (its size from its width and height, made smaller to fit by the page; narrower still on a narrow page, its shape
   kept) */
.reg-receipt-picture img {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.reg-receipt-link {
  overflow-wrap: anywhere;
}

.reg-receipt-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.reg-receipt-file {
  align-items: flex-start;
}

/* (its label is a paragraph: a file's chooser is a button, with no label of its own) */
.reg-receipt-file > .field-label {
  margin: 0;
}

.reg-summary {
  margin: 0;
  overflow-wrap: anywhere;
}

.reg-goals {
  margin: 0;
  padding-inline-start: var(--space-4);
}

.reg-trainer-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.reg-trainer {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.reg-trainer-photo {
  flex: none;
  inline-size: 4rem;
  block-size: 4rem;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-bg);
  object-fit: cover;
}

.reg-trainer-words {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.reg-trainer-name {
  margin: 0;
  font-size: var(--font-size-body);
}

/* a bio's lines as written */
.reg-trainer-bio {
  margin: var(--space-1) 0 0;
  color: var(--color-muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 30rem) {
  .reg-transfer-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .reg-transfer-list dd {
    margin-block-end: var(--space-1);
  }
}

/* ── «المسجّلون», for a run's staff ────────────────────────────────────────────────────────────────────────── */

.reg-staff {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.reg-staff-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.reg-staff-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
}

.reg-staff-row.is-pending {
  border-color: var(--color-draft);
}

.reg-staff-row.is-cancelled {
  opacity: 0.75;
}

/* (Task payment, part a2) a held seat with its receipt attached, for its admins */
.reg-staff-row.has-receipt {
  border-color: var(--color-success);
}

.reg-receipt-staff {
  margin: 0;
  overflow-wrap: anywhere;
}

.reg-staff-who,
.reg-staff-state {
  margin: 0;
  overflow-wrap: anywhere;
}

/* ── «المقاعد المحجوزة», every run's held seats (/admin/transfers, Task admin-d): «المسجّلون»'s rows ────────────── */

.held-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.held-search {
  max-inline-size: var(--card-width);
}

.held-count,
.held-run-line {
  margin: 0;
}

.held-count {
  font-weight: 700;
}

.held-run-line {
  overflow-wrap: anywhere;
}

/* ── «الطلاب» on a run's page (Task 7.10; «المادة» became «الدروس» and «التمارين» in Task 7.20) ─────────────────── */

.reg-students {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}

/* a lecture's lessons on its page («دروس المحاضرة») */
.run-mat-lessons {
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  list-style: none;
}

/* a lesson: its title (a link, once open) */
.run-mat-lesson {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-2) var(--space-3);
  overflow-wrap: anywhere;
}

.run-mat-lesson + .run-mat-lesson {
  border-block-start: 1px solid var(--color-border);
}

.run-mat-lesson a {
  font-weight: 700;
}

.run-mat-lesson.is-closed {
  background: var(--color-bg);
  color: var(--color-muted);
}

/* «التسجيل في الدورات» on /admin: the account's details one under the other */
.admin-registration {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}

.admin-registration .admin-options + .admin-options {
  margin-block-start: 0;
}

.admin-bank {
  gap: var(--space-3);
}

.admin-registration > .button {
  align-self: flex-start;
}

/* the run's page in tabs (Task run-page): the bar, then the tab's cards one under the other */
.run-tabs {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* the four tabs on one line, a phone's too (narrower than /learn's), sliding sideways if a screen is narrower still */
.run-tabs > .learn-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
}

.run-tabs .learn-tab {
  flex: 0 0 auto;
  padding-inline: var(--space-3);
}

/* the bar slides sideways, so it cuts what overflows it: the focus ring drawn inside the tab */
.run-tabs .learn-tab:focus-visible {
  outline-offset: -2px;
}

.run-tab-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* «المحاضرة القادمة», on «نظرة عامة» */
.run-next {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}

.run-next-head,
.run-next-when {
  overflow-wrap: anywhere;
}

.run-next-left {
  border-color: var(--color-primary);
  background: var(--color-info-soft);
  color: var(--color-primary-strong);
  white-space: nowrap;
}

/* «المحاضرات»: a lecture's lessons as a count that opens them, and the lectures over folded */
.run-lecture-topics > summary,
.run-past > summary {
  cursor: pointer;
  color: var(--color-primary-strong);
}

.run-lecture-topics > .run-topics {
  margin-block-start: var(--space-1);
}

.run-past > summary {
  min-block-size: var(--control-height);
  padding-block: var(--space-2);
  font-weight: 700;
}

.run-lecture-topics > summary:focus-visible,
.run-past > summary:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* a student's progress (Task run-page, part c): «تابع من حيث توقفت», and a student's count (a lesson's mark is
   «الدروس»'s since Task 7.20) */
.run-resume {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  overflow-wrap: anywhere;
}

.run-staff-progress {
  color: var(--color-text);
}

/* «الدروس» and «التمارين» (Task 7.20): the material's index beside the lesson, which opens in place; on a phone,
   «الفهرس» opens the index over the page (components/run-study.js) */
.study {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.study-note {
  margin: 0;
}

.study-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--space-4);
}

.study-index {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* a wide screen: the index on the lesson's right (the reading side), in sight as the lesson scrolls, scrolling itself;
   it stops under the top bar (nav-bar.css's --nb-height: the review's) */
@media (min-width: 56rem) {
  .study-grid {
    grid-template-columns: 17rem minmax(0, 1fr);
  }

  .study-grid > .study-index {
    position: sticky;
    inset-block-start: calc(var(--nb-height, 0px) + var(--space-3));
    max-block-size: calc(100dvh - var(--nb-height, 0px) - 2 * var(--space-3));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
  }

  .study-index-open {
    display: none;
  }
}

/* a phone: the index only in its dialog, over the page */
@media (max-width: 55.99rem) {
  .study-grid > .study-index {
    display: none;
  }
}

.study-index-dialog .study-index {
  padding-block: 0 max(var(--space-4), env(safe-area-inset-bottom));
  padding-inline: var(--space-4);
}

/* ✕ only in the dialog (over .cm-close's own display, which comes later) */
.study-index .study-index-close {
  display: none;
}

.study-index-dialog .study-index .study-index-close {
  display: grid;
}

.study-index-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

/* in the dialog, its title and ✕ stay in view while a long index scrolls under them */
.study-index-dialog .study-index-head {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  padding-block: var(--space-3) var(--space-1);
  background: var(--color-surface);
}

.study-index-title {
  margin: 0;
  font-size: var(--font-size-card-title);
  font-weight: 700;
}

.study-done {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.study-groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* the titles above a chapter (its module), said once where they change */
.study-heading {
  margin: var(--space-2) 0 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
  font-weight: 700;
  overflow-wrap: anywhere;
}

details.study-chapter > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  min-block-size: var(--control-height);
  padding-block: var(--space-1);
  cursor: pointer;
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* its own marker, since a flex summary has none: pointing along the line, then down once open */
details.study-chapter > summary::before {
  content: "";
  flex: none;
  align-self: center;
  border-block: 0.35em solid transparent;
  border-inline-start: 0.5em solid currentColor;
  color: var(--color-muted);
}

details.study-chapter[open] > summary::before {
  transform: rotate(-90deg);
}

details.study-chapter > summary > span:first-of-type {
  flex: 1;
}

details.study-chapter > summary:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.study-chapter-count {
  color: var(--color-muted);
  font-size: var(--font-size-small);
  font-weight: 400;
}

.study-lessons {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* a lesson: its title (a link while it's open) and its line, then its mark */
.study-lesson {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  overflow-wrap: anywhere;
}

.study-lesson-words {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.study-lesson a {
  font-weight: 700;
}

/* the lesson shown */
.study-lesson.is-current {
  background: var(--color-info-soft);
}

.study-lesson.is-current a {
  color: var(--color-primary-strong);
}

.study-lesson.is-closed {
  color: var(--color-muted);
}

.study-lesson-note {
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.study-mark {
  flex: none;
  font-size: var(--font-size-small);
  white-space: nowrap;
}

.study-mark.is-done {
  border-color: var(--color-success);
  background: var(--color-success-soft);
  color: var(--color-success-text);
}

.study-mark.is-started {
  border-color: var(--color-draft);
  background: var(--color-draft-soft);
  color: var(--color-draft);
}

/* the lesson's side: «الفهرس» on a phone, the lesson's title and line, the lesson, and where its practice is */
.study-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-inline-size: 0;
}

.study-index-open {
  align-self: flex-start;
}

.study-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  overflow-wrap: anywhere;
}

.study-title {
  margin: 0;
  font-size: var(--font-size-title);
  font-weight: 700;
}

.study-title:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.study-line {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.study-other {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}