/* A lecture's live class (Task 7.11a): its page, /courses/lecture (lecture-page), its doors and attendance on a run's
   page (/courses/run), and the attendance table (attendance-table); since Task 7.16a its side's tabs, «المحادثة»
   (class-chat) and «الحاضرون». Right to left first: logical properties only. Colours and sizes come from tokens.css.
   The class's middle part, its lessons for now, is where voice and video, slides and the board come next (Tasks 7.11b,
   7.12, 7.15); since Task 7.12a it holds the slide shown (class-slide), and the deck to show from (class-deck), since
   Task 7.22's part d a tab of the side's. */

lecture-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* the class is wider than the other pages (Task 7.22, the owner's choice 1): the wide box, as the material editor's */
.app-main:has(> lecture-page) {
  max-width: var(--wide-width);
}

.cls-head h1 {
  margin-block-end: var(--space-1);
  overflow-wrap: anywhere;
}

.cls-run-line {
  margin-block-end: 0;
  overflow-wrap: anywhere;
}

/* ── Where the class is: a dot (green while it's live), its words, the line under them, and its buttons ── */

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

.cls-state-line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-card-title);
  font-weight: 700;
}

.cls-state-dot {
  flex: none;
  inline-size: var(--space-3);
  block-size: var(--space-3);
  border-radius: 50%;
  background: var(--color-muted);
}

.cls-state-line.is-waiting .cls-state-dot {
  background: var(--color-draft);
}

.cls-state-line.is-live {
  color: var(--color-success);
}

.cls-state-line.is-live .cls-state-dot {
  background: var(--color-success);
  box-shadow: 0 0 0 var(--space-1) var(--color-success-soft);
}

.cls-state-line.is-ended .cls-state-dot {
  background: var(--color-border);
}

/* «إنهاء المحاضرة» asked again: on a line of its own, under the buttons */
.cls-actions .cls-ask {
  flex-basis: 100%;
}

/* ── While the class is live (Task 7.22): one slim line in place of the path, the title with its two lines and the
   state card: the lecture's title, the dot and «مباشرة الآن», how long it has been on, «● يُسجَّل» while it records,
   then «إنهاء المحاضرة» (the trainer) and «مغادرة». Before and after the class the page is as it was. The title stays
   the page's heading ── */
lecture-page.is-live {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  grid-template-areas: "title state" "notice notice" "body body";
  align-items: center;
  gap: var(--space-3) var(--space-4);
}

lecture-page.is-live > .mat-path,
lecture-page.is-live > .cls-head > :not(h1) {
  display: none;
}

lecture-page.is-live > .cls-head {
  grid-area: title;
}

lecture-page.is-live > .cls-head h1 {
  margin: 0;
  font-size: var(--font-size-card-title);
}

lecture-page.is-live > .notice {
  grid-area: notice;
}

lecture-page.is-live > .cls-state {
  grid-area: state;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding: 0;
  border: 0;
  background: none;
}

lecture-page.is-live > .cls-body {
  grid-area: body;
}

lecture-page.is-live .cls-state-line {
  font-size: var(--font-size-body);
}

lecture-page.is-live .cls-state-more {
  margin: 0;
}

lecture-page.is-live .cls-actions {
  margin-inline-start: auto;
}

/* what is said of a step, and «إنهاء المحاضرة» asked again, on a line of their own */
lecture-page.is-live > .cls-state > .notice {
  flex-basis: 100%;
}

/* a phone: the title on its line, the rest under it */
@media (max-width: 47.9375rem) {
  lecture-page.is-live {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "state" "notice" "body";
    gap: var(--space-2);
  }
}

/* «ملء الشاشة» (Task 7.22): the whole class, on the page's own background, from the top, scrolling within */
lecture-page:fullscreen {
  align-content: start;
  overflow-y: auto;
  padding: var(--space-4);
  background: var(--color-bg);
  /* no top bar in full screen: the side over the class from the top (Task 7.22, part e's review) */
  --nb-height: 0px;
}

/* ── The lessons in the middle, who is there beside them (under them, on a phone) ── */

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

/* Laid out as the old app's class was (Task 7.22, the owner's choice of 24 Oct 2026): on a computer the side (since Task
   7.16a the chat, «الحاضرون» and «الملفات»; since 7.22's part d, for those who show slides while the class is live,
   «الدروس وشرائحها») at the page's start, the right, a column of its own width; the middle beside
   it; and the trainers' cameras above the middle from 64rem, and from 75rem a column of their own at the end, the left,
   while a picture shows (hidden by «إخفاء الكاميرا», «إظهار الكاميرا» stays above the middle): three columns. Under 64rem (a phone, a tablet held upright, a narrow window) one column: the cameras, the middle, then
   the side under it, or over it on a touch screen. The side hidden by «إخفاء الشريط الجانبي» (the page's
   `is-side-hidden`), or with the class taken elsewhere (no side), the middle takes its place */
@media (min-width: 64rem) {
  .cls-body {
    grid-template-columns: 20rem minmax(0, 1fr);
    grid-template-areas: "side stage";
  }

  .cls-body:has(> .cls-cameras:not([hidden])) {
    grid-template-areas: "side cameras" "side stage";
    grid-template-rows: auto 1fr;
  }

  lecture-page.is-side-hidden > .cls-body,
  lecture-page > .cls-body:has(> .cls-side[hidden]) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "stage";
    grid-template-rows: auto;
  }

  lecture-page.is-side-hidden > .cls-body:has(> .cls-cameras:not([hidden])),
  lecture-page > .cls-body:has(> .cls-side[hidden]):has(> .cls-cameras:not([hidden])) {
    grid-template-areas: "cameras" "stage";
    grid-template-rows: auto auto;
  }

  .cls-body > .cls-stage {
    grid-area: stage;
  }

  .cls-body > .cls-cameras {
    grid-area: cameras;
  }

  .cls-body > .cls-side {
    grid-area: side;
  }
}

@media (min-width: 75rem) {
  .cls-body:has(> .cls-cameras:not([hidden]) .cls-camera:not([hidden])) {
    grid-template-columns: 20rem minmax(0, 1fr) 15rem;
    grid-template-areas: "side stage cameras";
    grid-template-rows: auto;
  }

  lecture-page.is-side-hidden > .cls-body:has(> .cls-cameras:not([hidden]) .cls-camera:not([hidden])),
  lecture-page > .cls-body:has(> .cls-side[hidden]):has(> .cls-cameras:not([hidden]) .cls-camera:not([hidden])) {
    grid-template-columns: minmax(0, 1fr) 15rem;
    grid-template-areas: "stage cameras";
    grid-template-rows: auto;
  }
}

lecture-page.is-side-hidden > .cls-body > .cls-side {
  display: none;
}

.cls-stage,
.cls-side,
.cls-people {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}

.cls-people[hidden] {
  display: none;
}

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

.cls-person {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding-block: var(--space-2);
}

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

/* (Task 7.22, part b: the old app's row) the first letter of the name in a circle where its picture was, the name in
   bold, and under it, for the trainer and staff, a student's round steps */
.cls-person-avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: 50%;
  background: var(--color-info-soft);
  color: var(--color-link);
  font-weight: 700;
  line-height: 1;
}

.cls-person.is-trainer .cls-person-avatar {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

/* talking now (Task 7.22, part b2): a ring round the letter, as round their picture; inside its circle, with a gap of
   the page's colour (outside it, a list that scrolls on a phone cuts it off: the review of 7.22b2) */
.cls-person-avatar.is-talking {
  box-shadow: inset 0 0 0 3px var(--color-success), inset 0 0 0 5px var(--color-surface);
}

@media (forced-colors: active) {
  .cls-person-avatar.is-talking {
    outline: 3px solid Highlight;
    outline-offset: -3px;
  }
}

.cls-person-main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-1);
  min-inline-size: 0;
}

.cls-person-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  min-block-size: 2.25rem;
  overflow-wrap: anywhere;
}

.cls-person-name {
  font-weight: 600;
}

.cls-person.is-trainer .cls-person-name {
  font-weight: 700;
}

.cls-person.is-trainer .cls-role {
  border-color: var(--color-primary);
  background: var(--color-info-soft);
  color: var(--color-primary);
}

.cls-you {
  font-size: var(--font-size-small);
}

/* ── On a run's page: a lecture's door, «مباشرة الآن», a student's minutes, and its staff's attendance ── */

.run-lecture-class {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  margin-block-start: var(--space-1);
}

.cls-live-badge {
  border-color: var(--color-success);
  background: var(--color-success-soft);
  color: var(--color-success-text);
}

.cls-attended {
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

/* ── The attendance table: its count, then a row for each student; too wide for a phone, it scrolls in its box ── */

attendance-table {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.att-scroll {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.att-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-small);
}

.att-table th,
.att-table td {
  padding: var(--space-1) var(--space-2);
  text-align: start;
  white-space: nowrap;
}

/* its head raised, as the kit's tables (Task indoor) */
.att-table thead th {
  border-block-end: 1px solid var(--color-border);
  background: var(--color-raised);
  color: var(--color-quiet);
  font-weight: 700;
}

.att-table tbody tr + tr {
  border-block-start: 1px solid var(--color-border);
}

.att-table tbody th {
  font-weight: 700;
  white-space: normal;
  overflow-wrap: anywhere;
}

.att-row.is-absent {
  color: var(--color-muted);
}

.att-row.is-absent th {
  font-weight: 400;
}

.att-note {
  color: var(--color-draft);
  font-weight: 400;
}

/* «المحاضرة المباشرة» at the top of a run's page while a lecture's door is open: the lecture, then its door */
.cls-now {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}

.cls-now-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}

.cls-now-words {
  overflow-wrap: anywhere;
}

/* ── Beside the class (Task 7.16a): its tabs, «الحاضرون», «المحادثة» and «الملفات» ── */

/* (Task 7.22, part b: the old app's) a row of equal tabs, each a picture named on hover, with a red count; the open one
   dark */
.cls-tabs {
  display: flex;
  border-block-end: 1px solid var(--color-border);
}

.cls-tab {
  position: relative;
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-block-size: 2.875rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--color-link);
  font: inherit;
  cursor: pointer;
}

.cls-tab > .icon {
  inline-size: 1.375rem;
  block-size: 1.375rem;
}

.cls-tab:hover {
  background: var(--color-info-soft);
}

.cls-tab[aria-selected="true"] {
  background: var(--color-text);
  color: var(--color-surface);
}

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

/* the open tab is the one the keyboard reaches: its ring in the colour that stands out on it (the review of 7.22b) */
.cls-tab[aria-selected="true"]:focus-visible {
  outline-color: var(--color-surface);
}

/* the count over its picture's corner */
.cls-tab > .cls-key-count {
  position: absolute;
  inset-block-start: var(--space-1);
  inset-inline-end: calc(50% - 1.5rem);
}

/* in «الحاضرون», for the trainer and staff: a student's round steps under their name (Task 7.22, part b: the old app's),
   and «تأكيد الإخراج» by them */
.cls-person-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}

.cls-person-tools[hidden] {
  display: none;
}

.cls-remove-sure {
  min-block-size: 1.875rem;
  padding-block: 0;
  padding-inline: var(--space-2);
  font-size: var(--font-size-small);
}

.cls-stopped {
  border-color: var(--color-danger);
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

/* ── The chat: the trainer's switch, the messages (the newest at the bottom), then the box or why one can't write ── */

class-chat {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}

class-chat[hidden],
class-chat [hidden] {
  display: none;
}

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

.chat-closed-note,
.chat-why {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  background: var(--color-draft-soft);
  color: var(--color-draft);
  font-size: var(--font-size-small);
}

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

.chat-older,
.chat-newer {
  align-self: center;
}

.chat-empty {
  margin: 0;
}

.chat-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  max-block-size: min(60dvh, calc(28 * var(--space-4)));
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}

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

/* Each message as the old app's chat (Task 7.22, part c; the owner's choice of 24 Oct 2026): a bubble, the reader's own at
   the start (the right) tinted blue, the others' at the end (the left), a private one in the draft's colours; a group's
   corners joined on its writer's side; the first letter of the writer's name in a circle by the group's last message;
   the name and time over the group only; a line between groups; for the trainer and staff a small round «خيارات» (⋮) at
   the message's other side */
.chat-msg {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  padding-block: var(--space-1);
  padding-inline: var(--space-2) calc(2rem + var(--space-3));
  overflow-wrap: anywhere;
}

.chat-msg.is-mine {
  align-items: flex-start;
  padding-inline: calc(2rem + var(--space-3)) var(--space-2);
}

/* room for «خيارات» on the message's other side */
.chat-msg:not(.is-mine):has(> .chat-options) {
  padding-inline-start: calc(1.875rem + var(--space-3));
}

.chat-msg.is-mine:has(> .chat-options) {
  padding-inline-end: calc(1.875rem + var(--space-3));
}

.chat-msg + .chat-msg:not(.is-continued) {
  margin-block-start: var(--space-2);
  padding-block-start: var(--space-2);
  border-block-start: 1px solid var(--color-border);
}

.chat-msg.is-continued {
  padding-block-start: 0;
}

/* the writer's letter, at the group's last message, on its side */
.chat-avatar {
  position: absolute;
  inset-block-end: var(--space-1);
  inset-inline-end: var(--space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 50%;
  background: var(--color-info-soft);
  color: var(--color-link);
  font-size: var(--font-size-small);
  font-weight: 700;
  line-height: 1;
}

.chat-msg.is-mine > .chat-avatar {
  inset-inline: var(--space-2) auto;
}

.chat-msg.is-trainer > .chat-avatar {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.chat-msg:has(+ .chat-msg.is-continued) > .chat-avatar {
  visibility: hidden;
}

.chat-msg > .chat-options {
  position: absolute;
  inset-block-start: var(--space-1);
  inset-inline-start: var(--space-1);
}

.chat-msg.is-mine > .chat-options {
  inset-inline: auto var(--space-1);
}

.chat-msg.is-trainer .chat-name {
  color: var(--color-link);
}

.chat-msg-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.chat-name {
  font-weight: 700;
}

.chat-time,
.chat-you,
.chat-gone-note {
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.chat-private {
  color: var(--color-draft);
  font-weight: 700;
}

/* the bubble: round, its corners on the writer's side joined to the group's other bubbles; never across the whole row,
   so a long one keeps its side */
.chat-text {
  max-inline-size: 85%;
  margin: 0;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 1.25rem;
  background: var(--color-bg);
  white-space: pre-wrap;
  unicode-bidi: plaintext;
}

.chat-msg:not(.is-mine):has(+ .chat-msg.is-continued) > .chat-text {
  border-end-end-radius: 0;
}

.chat-msg.is-continued:not(.is-mine) > .chat-text {
  border-start-end-radius: 0;
}

.chat-msg.is-mine:has(+ .chat-msg.is-continued) > .chat-text {
  border-end-start-radius: 0;
}

.chat-msg.is-mine.is-continued > .chat-text {
  border-start-start-radius: 0;
}

.chat-msg.is-mine > .chat-text {
  border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
  background: var(--color-info-soft);
}

.chat-msg.is-private > .chat-text {
  border-color: color-mix(in srgb, var(--color-draft) 45%, transparent);
  background: var(--color-draft-soft);
}

.chat-text a {
  overflow-wrap: anywhere;
}

.chat-text.is-gone,
.chat-msg.is-deleted .chat-text {
  border-style: dashed;
  background: none;
  color: var(--color-muted);
  font-style: italic;
}

/* a sound's or a video's player, or a recording, in a message: across it, as before; a picture, a PDF or a file gone on
   the writer's side, as its words */
.chat-msg > .chat-file:not(.is-gone),
.chat-msg > .cm-recording {
  align-self: stretch;
}

.chat-msg > :is(.chat-file-picture, .chat-file-pdf, .chat-file.is-gone) {
  align-self: auto;
}

.chat-gone-note {
  margin: 0;
}

.chat-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chat-actions .crs-confirm {
  flex-basis: 100%;
}

.chat-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  padding-inline-start: var(--space-2);
  border-inline-start: 3px solid transparent;
}

.chat-form.is-private {
  border-inline-start-color: var(--color-draft);
}

.chat-to-line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.chat-to {
  min-block-size: var(--control-height);
  padding-inline: var(--space-2);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius);
  background: var(--color-input-bg);
  color: var(--color-text);
  font: inherit;
}

.chat-to-hint,
.chat-length {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.chat-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
}

.chat-text-input {
  flex: 1 1 auto;
  min-inline-size: 0;
  resize: vertical;
  max-block-size: calc(12 * var(--space-4));
}

/* «إرسال» (Task 7.22, part c): the old app's square blue key with a paper plane, named on hover and for screen readers */
.chat-send {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: var(--control-height);
  block-size: var(--control-height);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--color-primary);
  color: var(--color-on-primary);
  cursor: pointer;
}

.chat-send:hover {
  background: var(--color-primary-strong);
}

.chat-send:disabled {
  opacity: 0.55;
  cursor: default;
}

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

.chat-send > .icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

@media (forced-colors: active) {
  .chat-send {
    border: 1px solid ButtonText;
  }

  /* a letter's circle (the chat's and «الحاضرون»'s), whose colour high contrast takes away */
  .chat-avatar,
  .cls-person-avatar:not(.is-talking) {
    outline: 1px solid CanvasText;
    outline-offset: -1px;
  }
}

/* ── Files in the chat (Task 7.16b): «إرفاق ملف» under the box, the box's file, and a file in a message ── */

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

.chat-tools > .chat-length {
  flex: 1 1 auto;
}

/* «إرفاق ملف» and the recorder's keys, small round pictures in the link's blue (Task 7.22, part c) */
.chat-form .chat-tools .cls-round {
  color: var(--color-primary);
}

/* the recorder's keys beside «إرفاق ملف» (Task 8.14c), what it records over the box, and a message's recording */
.chat-tools > .rc-keys {
  display: contents;
}

.chat-tools > .rc-keys[hidden] {
  display: none;
}

.chat-form .rc-video {
  max-block-size: 12rem;
}

.chat-msg .cm-recording-video {
  max-block-size: 16rem;
}

.chat-msg .cm-recording-audio {
  inline-size: 100%;
}

/* the box's file: its picture small, or its kind and name; how far its upload is; and ✕ */
.chat-box-file {
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.chat-box-file .pm-file-name {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.chat-box-progress {
  flex: 1 1 8rem;
  min-inline-size: 0;
  accent-color: var(--color-on-text);
}

/* a file in a message: a picture (pm-picture), a PDF (pm-pdf), or a sound or a video with its player; one gone, named */
.chat-file {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-1);
  margin: 0;
  min-inline-size: 0;
}

.chat-file.is-gone {
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-muted);
  font-style: italic;
  overflow-wrap: anywhere;
}

.chat-file-picture .pm-picture-img {
  max-block-size: 14rem;
}

.chat-file-video {
  display: block;
  inline-size: 100%;
  max-block-size: 16rem;
  border-radius: var(--radius);
  background: var(--color-picture-bg);
}

.chat-file-audio {
  inline-size: 100%;
}

.chat-file-line {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
  overflow-wrap: anywhere;
}

.chat-file-act {
  color: var(--color-link);
  font-weight: 700;
  white-space: nowrap;
}

/* ── «الملفات» (Task 7.16b): the files the reader may see, the newest first ── */

class-files {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}

class-files[hidden],
class-files [hidden] {
  display: none;
}

.cls-files-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  max-block-size: min(70dvh, calc(32 * var(--space-4)));
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}

.cls-file {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-1);
  padding: var(--space-2);
  border-inline-start: 3px solid transparent;
  overflow-wrap: anywhere;
}

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

.cls-file.is-private {
  border-inline-start-color: var(--color-draft);
  background: var(--color-draft-soft);
}

.cls-file-open {
  align-self: flex-start;
  font-size: var(--font-size-small);
}

.cls-files-older {
  align-self: center;
}

/* /admin's «الملفات في المحاضرات» (Task 7.16b): the kinds each side sends, side by side where there's room */
.admin-files-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
}

.admin-files .admin-limits {
  margin-block-end: 0;
}

/* ── What the class shows (Task 7.12a): the slide shown (class-slide), and the deck to show from (class-deck) ── */

.cls-slide-box,
.cls-deck-box,
.cls-lessons-box {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}

.cls-slide-box[hidden],
.cls-deck-box[hidden],
.cls-lessons-box[hidden],
.cls-slide-none[hidden] {
  display: none;
}

/* the deck in the side, a tab of its own since Task 7.22 (part d; the owner's wish of 24 Oct 2026, as the old app's
   material index): its list scrolls within the side, as the chat's and the files' do, with room round it for the
   keyboard's ring (the app's own, base.css's 3px and 2px from its button, on a fold's title and «إعادة المحاولة») */
.cls-side > .cls-deck-box {
  max-block-size: min(70dvh, calc(32 * var(--space-4)));
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-inline: calc(-1 * var(--space-2));
  padding: var(--space-2);
}

/* the lecture's title and time where a slide shows, while the class is live and nothing is shown (Task 7.22): what the
   class's recording shows then */
.cls-cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  text-align: center;
  overflow-wrap: anywhere;
}

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

.cls-cover-line {
  margin: 0;
  color: var(--color-muted);
}

.cslide {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-inline-size: 0;
}

.cslide .doc-view {
  overflow-y: hidden;
}

.cslide-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
}

.cslide-path {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--font-size-small);
  overflow-wrap: anywhere;
}

.cslide-lesson {
  flex: 1;
  margin: 0;
  font-size: var(--font-size-card-title);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.cslide-position {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
  white-space: nowrap;
}

.cslide-stage {
  min-block-size: 12rem;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  overflow-wrap: anywhere;
}

.cslide-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.cslide-controls[hidden],
.cslide-keys[hidden],
.cslide-said[hidden] {
  display: none;
}

.cslide-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* the arrows point the way the slides go: in a right-to-left material, «التالية» to the left */
.cslide-steps[dir="rtl"] .cslide-next .icon,
.cslide-steps[dir="ltr"] .cslide-previous .icon {
  transform: scaleX(-1);
}

/* a step on its way: greyed, and the keyboard can stay on them */
.cslide .button[aria-disabled="true"],
.cslide .button[aria-disabled="true"]:hover,
.cdeck-slide[aria-disabled="true"] {
  opacity: 0.6;
  cursor: progress;
}

.cslide-said {
  margin: 0;
  color: var(--color-danger);
  font-weight: 700;
}

/* an exercise in class: its choices, each a row with its letter, and once there is one its share as a bar behind it */
.cslide-answer {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
}

.cslide-choices {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}

.cslide-choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: calc(var(--control-height) * 1.2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  overflow: hidden;
}

label.cslide-choice {
  cursor: pointer;
}

/* the radio itself is out of sight: the letter shows whether it's chosen */
.cslide-choice > input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

label.cslide-choice:hover {
  border-color: var(--color-primary);
}

.cslide-choice:has(> input:focus-visible) {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.cslide-choice:has(> input:disabled) {
  cursor: default;
}

.cslide-bar {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  background: var(--color-bg);
}

.cslide-bar[hidden] {
  display: none;
}

.cslide-letter {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  border: 2px solid var(--color-input-border);
  border-radius: 50%;
  font-weight: 700;
}

.cslide-choice-text {
  position: relative;
  flex: 1;
  min-inline-size: 0;
  padding-block: var(--space-1);
  overflow-y: hidden;
}

.cslide-choice-text .doc-content > :first-child {
  margin-block-start: 0;
}

.cslide-choice-text .doc-content > :last-child {
  margin-block-end: 0;
}

/* picked, before it's sent; sent: theirs */
.cslide-choice.is-picked,
.cslide-choice.is-mine {
  border-color: var(--color-primary);
  background: var(--color-info-soft);
}

.cslide-choice.is-picked > .cslide-letter,
.cslide-choice.is-mine > .cslide-letter {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.cslide-choice.is-mine {
  font-weight: 700;
}

/* the right one: green (the trainer and staff see it from the start, students once it's shown); theirs, if not it, red */
.cslide-choice.is-right {
  border: 2px solid var(--color-success);
  padding-inline: calc(var(--space-3) - 1px);
  background: var(--color-surface);
}

.cslide-choice.is-right > .cslide-bar {
  background: var(--color-success-soft);
}

.cslide-choice.is-right > .cslide-letter {
  border-color: var(--color-correct-fill);
  background: var(--color-correct-fill);
  color: var(--color-on-fill);
}

.cslide-choice.is-wrong {
  border: 2px solid var(--color-danger);
  padding-inline: calc(var(--space-3) - 1px);
  background: var(--color-surface);
}

.cslide-choice.is-wrong > .cslide-bar {
  background: var(--color-danger-soft);
}

.cslide-choice.is-wrong > .cslide-letter {
  border-color: var(--color-danger);
  background: var(--color-surface);
  color: var(--color-danger);
}

.cslide-end {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--space-2);
}

.cslide-tag {
  padding-inline: var(--space-2);
  border-radius: var(--radius);
  background: var(--color-surface);
  font-size: var(--font-size-small);
}

.cslide-choice.is-right .cslide-sign,
.cslide-choice.is-right .cslide-tag {
  color: var(--color-success);
}

.cslide-choice.is-wrong .cslide-sign,
.cslide-choice.is-wrong .cslide-tag {
  color: var(--color-danger);
}

.cslide-share {
  min-inline-size: 2.5rem;
  color: var(--color-muted);
  font-size: var(--font-size-small);
  font-weight: 400;
  text-align: end;
  white-space: nowrap;
}

.cslide-send,
.cslide-reveal {
  align-self: flex-start;
  min-inline-size: 7rem;
}

.cslide-send[hidden],
.cslide-reveal[hidden],
.cslide-line[hidden] {
  display: none;
}

.cslide-line {
  margin: 0;
  font-weight: 700;
}

.cslide-line:focus {
  outline: none;
}

.cslide-line[data-kind="right"] {
  color: var(--color-success);
}

.cslide-line[data-kind="wrong"] {
  color: var(--color-danger);
}

.cslide-line[data-kind="none"],
.cslide-line[data-kind="hint"] {
  color: var(--color-draft);
}

/* the trainer's and staff's tally: «أجاب ٨ من ١٢», then the three lists side by side (one under the other on a phone) */
.cslide-count {
  margin: 0;
  font-weight: 700;
}

.cslide-lists {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-3);
}

.cslide-list {
  min-inline-size: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.cslide-list-title {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-body);
}

.cslide-names {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-wrap: anywhere;
}

/* (Task 7.11d) the lists and «إظهار الإجابة» under the slide, out of what the class's recording is cut to */
.cslide-tally {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cslide-tally:empty {
  display: none;
}

/* the answer, said here while the class is recorded from this page and it isn't shown yet (Task 7.11d's review) */
.cslide-key-line {
  margin: 0;
  color: var(--color-success);
  font-weight: 700;
}

/* the deck: the lecture's lessons, and «دروس أخرى» folded, each lesson's slides a button each */
.cdeck {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

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

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

summary.cdeck-title {
  cursor: pointer;
}

.cdeck-others[open] > summary {
  margin-block-end: var(--space-1);
}

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

.cdeck-lesson-title {
  margin: 0;
  font-size: var(--font-size-body);
  overflow-wrap: anywhere;
}

.cdeck-path,
.cdeck-empty {
  margin: 0;
  font-size: var(--font-size-small);
  overflow-wrap: anywhere;
}

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

.cdeck-slide {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  inline-size: 100%;
  min-block-size: var(--control-height);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.cdeck-slide:hover {
  border-color: var(--color-primary);
}

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

.cdeck-slide[aria-current="true"] {
  border: 2px solid var(--color-primary);
  padding-inline: calc(var(--space-2) - 1px);
  background: var(--color-info-soft);
  cursor: default;
}

.cdeck-n {
  flex: none;
  min-inline-size: 1.5rem;
  color: var(--color-muted);
  font-size: var(--font-size-small);
  text-align: center;
}

.cdeck-slide-title {
  flex: 1;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.cdeck-kind,
.cdeck-now {
  flex: none;
}

.cdeck-kind.is-exercise {
  border-color: var(--color-draft);
  background: var(--color-draft-soft);
  color: var(--color-draft);
}

.cdeck-now {
  border-color: var(--color-primary);
  background: var(--color-info-soft);
  color: var(--color-primary);
}

/* a lesson's «الشرح والتدريب», folded under its «للمحاضرة» slides (Task 7.19b) */
.cdeck-fold {
  padding-inline-start: var(--space-2);
  border-inline-start: 2px solid var(--color-border);
}

.cdeck-fold-title {
  min-block-size: var(--control-height);
  padding-block: var(--space-1);
  color: var(--color-muted);
  font-size: var(--font-size-small);
  cursor: pointer;
}

.cdeck-fold[open] > .cdeck-fold-title {
  margin-block-end: var(--space-1);
}

/* ── Looking back (Task 7.12b): the line while one looks away from the trainer's slide, and the slides shown ── */

.cslide-away {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  background: var(--color-info-soft);
}

/* the trainer shows a question now: to answer it, the way back */
.cslide-away[data-trainer="exercise"] {
  border-color: var(--color-draft);
  background: var(--color-draft-soft);
}

.cslide-away-line {
  margin: 0;
  font-weight: 700;
}

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

.cshown-title {
  font-weight: 700;
  cursor: pointer;
}

.cshown-fold[open] > .cshown-title {
  margin-block-end: var(--space-2);
}

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

.cshown-slide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  inline-size: 100%;
  min-block-size: var(--control-height);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.cshown-slide:hover {
  border-color: var(--color-primary);
}

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

.cshown-slide[aria-current="true"] {
  border: 2px solid var(--color-primary);
  padding-inline: calc(var(--space-2) - 1px);
  background: var(--color-info-soft);
}

.cshown-slide[aria-disabled="true"] {
  opacity: 0.6;
  cursor: progress;
}

.cshown-slide-title {
  flex: 1 1 10rem;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.cshown-lesson {
  flex: 0 1 auto;
  min-inline-size: 0;
  font-size: var(--font-size-small);
  overflow-wrap: anywhere;
}

.cshown-here {
  flex: none;
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

/* ── «إجابات المحاضرة» (Task 7.12b), once the class has ended ── */

.cls-answers-box {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
}

.lans {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-inline-size: 0;
}

.lans-own {
  margin: 0;
  font-weight: 700;
}

.lans-exercise {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-inline-size: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  overflow-wrap: anywhere;
}

.lans-exercise-title {
  margin: 0;
  font-size: var(--font-size-card-title);
}

.lans-lesson,
.lans-note {
  margin: 0;
  font-size: var(--font-size-small);
}

.lans-exercise .doc-view {
  overflow-y: hidden;
}

.lans-students {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-inline-size: 0;
}

.lans-students-title {
  margin: 0;
  font-size: var(--font-size-card-title);
}

/* the table scrolls sideways in its own frame on a narrow screen; the page doesn't */
.lans-table-wrap {
  max-inline-size: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.lans-table-wrap:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.lans-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-body);
}

.lans-table th,
.lans-table td {
  padding: var(--space-1) var(--space-2);
  border-block-end: 1px solid var(--color-border);
  text-align: center;
  white-space: nowrap;
}

.lans-table thead th {
  background: var(--color-raised);
}

.lans-table th[scope="row"] {
  text-align: start;
  white-space: normal;
  min-inline-size: 8rem;
}

.lans-mark.is-right {
  color: var(--color-correct);
  font-weight: 700;
}

.lans-mark.is-wrong {
  color: var(--color-danger);
  font-weight: 700;
}

.lans-mark.is-none {
  color: var(--color-muted);
}

.lans-total {
  font-weight: 700;
}

/* high contrast replaces the colours that show what is chosen, right and shown: the frames take the system's */
@media (forced-colors: active) {
  .cslide-choice.is-picked,
  .cslide-choice.is-mine,
  .cslide-choice.is-right,
  .cdeck-slide[aria-current="true"],
  .cshown-slide[aria-current="true"] {
    border: 2px solid Highlight;
  }

  .cslide-away {
    border: 2px solid Highlight;
  }

  .cslide-choice.is-picked > .cslide-letter,
  .cslide-choice.is-mine > .cslide-letter,
  .cslide-choice.is-right > .cslide-letter {
    forced-color-adjust: none;
    border-color: Highlight;
    background: Highlight;
    color: HighlightText;
  }
}

/* ── The trainer's player (Task 7.12c): «تشغيل» over the player where the browser won't start it by itself, and the
   line under it: following the trainer's, the reader's own for now with «متابعة المدرّب», or driving everyone's ── */

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

.cplayer-stage {
  position: relative;
}

/* over a video: the page dimmed, and the button in the middle; a sound's bar is too thin, so under it */
.cplayer-start {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--space-3);
  border-radius: var(--radius);
  background: var(--color-backdrop);
}

.cplayer-stage[data-kind="audio"] .cplayer-start {
  position: static;
  place-items: start;
  margin-block-start: var(--space-2);
  padding: 0;
  background: none;
}

.cplayer-start-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
}

.cplayer-stage[data-kind="audio"] .cplayer-start-box {
  box-shadow: none;
}

.cplayer-start-line {
  margin: 0;
  font-weight: 700;
}

.cplayer-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

/* the reader's own for now: said plainly, with the way back */
.cplayer-line[data-away="true"] {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  background: var(--color-info-soft);
  color: var(--color-text);
  font-size: var(--font-size-body);
}

.cplayer-said {
  margin: 0;
}

.cplayer-line[data-away="true"] .cplayer-said {
  font-weight: 700;
}

.cplayer-start[hidden],
.cplayer-line[hidden],
.cplayer-back[hidden] {
  display: none;
}

@media (forced-colors: active) {
  .cplayer-line[data-away="true"],
  .cplayer-start-box {
    border: 2px solid Highlight;
  }
}

/* The class's voice and video (Task 7.11b): <class-rtc> at the top of the middle. A line while there's no voice on this
   server, while it connects or connects again, or when the browser can't; «تشغيل الصوت» where the browser won't start a
   sound by itself; a trainer's bar: «الميكروفون», its level line, «الكاميرا», «مشاركة الشاشة» and «الأجهزة», each with
   its line. The sound itself is never seen. */
.cls-rtc {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cls-rtc[hidden],
.cls-rtc-line[hidden],
.cls-rtc-play[hidden],
.cls-rtc-bar[hidden],
.cls-rtc-own[hidden],
.cls-rtc-own-line[hidden],
.cls-rtc-device-box[hidden],
.cls-rtc-level[hidden],
.cls-rtc-sound {
  display: none;
}

.cls-rtc-line {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-info-soft);
  font-size: var(--font-size-small);
}

.cls-rtc-play {
  align-self: flex-start;
}

/* (in the class's bar since Task 7.22, which has the line under it; round pictures since its part b, classroom.css's
   .cls-round: on, the old app's teal; waiting for the connection, a dashed ring; not now, faded) */
.cls-rtc-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}

.cls-rtc-level {
  inline-size: 8rem;
  max-inline-size: 30%;
  block-size: var(--space-3);
}

/* what is said of the reader's own and «الأجهزة»'s lists, under the class's bar (Task 7.22) */
.cls-rtc-notes {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}

.cls-rtc-device-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  inline-size: 100%;
}

.cls-rtc-device {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  max-inline-size: 100%;
}

.cls-rtc-select {
  min-block-size: var(--control-height);
  max-inline-size: 100%;
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius);
  background: var(--color-input-bg);
  color: var(--color-text);
  font: inherit;
}

.cls-rtc-own-line {
  inline-size: 100%;
  margin: 0;
  font-size: var(--font-size-small);
}

.cls-rtc-own-line.is-problem {
  color: var(--color-danger);
}

/* a line that says nothing is out of sight, but there, so what it says next is read out */
.cls-rtc-own-line:empty {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* by a trainer's name in «الحاضرون»: their microphone, on or off, and their camera and screen while they're on */
.cls-rtc-mark {
  display: inline-flex;
  align-items: center;
  color: var(--color-muted);
}

.cls-rtc-mark.is-on {
  color: var(--color-success);
}

/* The cameras (Task 7.22, part b2: as the old app's): on its slate, each picture with its person's name on a strip over
   its foot (the trainer's own mirrored, for them only), the mark of a microphone that's off at one corner, «ملء الشاشة»
   at the other, and a ring round it while its person talks; «إخفاء الكاميرا» at their start. Above the slide (a phone, a
   tablet, a window under 75rem), one row of small square pictures that scrolls sideways; from 75rem a column of their
   own (15rem, the old app's 240px), the first picture as wide as it (the second too while there are two: `is-large`, by
   core/class-cameras-view.js's cameraLarge), the rest two to a row */
.cls-cameras {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
}

.cls-cameras:has(.cls-camera:not([hidden])) {
  padding: var(--space-1);
  border-radius: var(--radius);
  background: var(--color-cameras-bg);
}

.cls-cameras[hidden],
.cls-picture[hidden],
.cls-camera-hide[hidden],
.cls-screen[hidden] {
  display: none;
}

.cls-camera-list {
  display: flex;
  flex: 1 1 auto;
  gap: 2px;
  min-inline-size: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.cls-picture {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-inline-size: 0;
  margin: 0;
}

.cls-picture video {
  display: block;
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border-radius: var(--radius);
  background: var(--color-picture-bg);
}

/* a camera's picture: its video fills it (the old app's 120px squares), its name, mark and «ملء الشاشة» over it */
.cls-camera {
  position: relative;
  display: block;
  flex: none;
  inline-size: 7.5rem;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-picture-bg);
}

.cls-camera video {
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 0;
}

/* the ring round a picture while its person talks (over the video, which would cover a ring of the picture's own) */
.cls-camera::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid transparent;
  border-radius: inherit;
  pointer-events: none;
}

.cls-camera.is-talking::after {
  border-color: var(--color-talking);
}

@media (min-width: 75rem) {
  .cls-cameras {
    flex-direction: column;
    align-items: stretch;
  }

  .cls-cameras > .cls-camera-hide {
    align-self: flex-start;
  }

  .cls-camera-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .cls-camera {
    inline-size: auto;
  }

  .cls-camera.is-large {
    grid-column: 1 / -1;
  }

  .cls-camera.is-large video {
    aspect-ratio: 4 / 3;
  }
}

/* the trainer sees themselves as in a mirror; everyone else sees them as they are */
.cls-camera.is-self video {
  transform: scaleX(-1);
}

.cls-picture-name {
  overflow-wrap: anywhere;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

/* a camera's name, on a strip over its foot (the old app's), on one line */
.cls-camera > .cls-picture-name {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  overflow: hidden;
  padding-inline: var(--space-1);
  background: var(--color-picture-tag-bg);
  color: var(--color-cameras-text);
  line-height: 1.6;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* a microphone that's off: the old app's red mark, at the picture's corner (so the face stays clear) */
.cls-picture-mic {
  position: absolute;
  inset-block-start: var(--space-1);
  inset-inline-start: var(--space-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: 50%;
  background: var(--color-mic-off);
  color: var(--color-cameras-text);
}

.cls-picture-mic > .icon {
  inline-size: 1rem;
  block-size: 1rem;
}

.cls-picture-mic[hidden] {
  display: none;
}

/* «ملء الشاشة» on a picture, at its other corner: shown on hover and with the keyboard on it (the old app's showed on
   hover), always on a touch screen and in full screen */
.cls-camera > .cls-round.cls-picture-full {
  position: absolute;
  inset-block-start: var(--space-1);
  inset-inline-end: var(--space-1);
  background: var(--color-picture-tag-bg);
  color: var(--color-cameras-text);
  opacity: 0;
}

.cls-camera:hover > .cls-round.cls-picture-full,
.cls-camera:focus-within > .cls-round.cls-picture-full,
.cls-camera:fullscreen > .cls-round.cls-picture-full {
  opacity: 1;
}

@media (hover: none), (pointer: coarse) {
  .cls-camera > .cls-round.cls-picture-full {
    opacity: 1;
  }
}

/* another's own sound, for the reader only (Task 7.23, part b2: the old tile's volume key), by «ملء الشاشة», shown as it
   is; its slider is the old room's meeting view's (old-course.css), as is the bar at a tile's foot */
.cls-camera > .cls-picture-sound {
  position: absolute;
  inset-block-start: var(--space-1);
  inset-inline-end: calc(var(--space-1) + 2.125rem);
  display: flex;
  align-items: center;
  opacity: 0;
}

.cls-camera:hover > .cls-picture-sound,
.cls-camera:focus-within > .cls-picture-sound {
  opacity: 1;
}

@media (hover: none), (pointer: coarse) {
  .cls-camera > .cls-picture-sound {
    opacity: 1;
  }
}

.cls-picture-sound > .cls-round {
  background: var(--color-picture-tag-bg);
  color: var(--color-cameras-text);
}

.cls-picture-sound > .cls-sound-level[hidden],
.cls-camera > .cls-picture-bar {
  display: none;
}

/* a picture in full screen: alone on its dark, all of it shown */
.cls-camera:fullscreen {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
}

.cls-camera:fullscreen video {
  block-size: 100%;
  aspect-ratio: auto;
  object-fit: contain;
}

.cls-camera:fullscreen > .cls-picture-name {
  padding-block: var(--space-2);
  font-size: var(--font-size-body);
}

/* «إخفاء الكاميرا» / «إظهار الكاميرا», round as the class's other buttons; on the cameras' slate, in its light colour */
.cls-cameras:has(.cls-camera:not([hidden])) > .cls-round.cls-camera-hide {
  color: var(--color-cameras-text);
}

.cls-cameras:has(.cls-camera:not([hidden])) > .cls-round.cls-camera-hide:hover {
  background: var(--color-picture-tag-bg);
}

/* the keyboard's ring on the slate and on a picture, in their light colour (the page's blue doesn't show there: the review
   of 7.22b2) */
.cls-cameras:has(.cls-camera:not([hidden])) .cls-round:focus-visible {
  outline-color: var(--color-cameras-focus);
}

@media (forced-colors: active) {
  /* (the high contrast's own colours would draw the ring always) */
  .cls-camera::after {
    forced-color-adjust: none;
  }

  .cls-camera.is-talking::after {
    border-color: Highlight;
  }

  .cls-picture-mic {
    border: 1px solid CanvasText;
  }
}

/* A screen shared, in the slide's place, as tall as the window lets it */
.cls-screen {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* What the middle shows while there's more than the slide (Task 7.15a; Task 7.11b's «الشاشة» and «الشريحة», with
   «السبورة» between them) */
.cls-view-switch {
  display: inline-flex;
  align-self: flex-start;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.cls-view-tab {
  min-block-size: var(--control-height);
  padding-block: 0;
  padding-inline: var(--space-4);
  border: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
}

.cls-view-tab:not([hidden]) ~ .cls-view-tab:not([hidden]) {
  border-inline-start: 1px solid var(--color-border);
}

.cls-view-tab[aria-pressed="true"] {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.cls-view-tab:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

.cls-screen-picture video {
  max-block-size: 75vh;
}

/* a trainer's own window or whole screen, in its place: said, not shown back */
.cls-screen-away {
  padding: var(--space-4);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  text-align: center;
}

@media (forced-colors: active) {
  .cls-view-tab[aria-pressed="true"] {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
}

/* ── The board (Task 7.15a; the owner's meeting app's board, public/css/meeting.css's .draw-*): those who lead it
   above it, the page (white, 16:9, as tall as the window lets it), «ارسم» at its top corner, the toolbar over it (under
   it while the board is narrow, as beside the chat or on a phone, where it would cover much of the page), and what is
   said under it ── */

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

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

.cls-board-bar .button,
.cls-board-nav .button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.cls-board-bar [aria-disabled="true"],
.cls-board-nav [aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
}

.cls-board-steps,
.cls-board-choose,
.cls-board-nav {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.cls-board-count,
.cls-board-where {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.cls-board-background {
  min-block-size: var(--control-height);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius);
  background: var(--color-input-bg);
  color: var(--color-text);
  font: inherit;
}

.cls-board-stage {
  position: relative;
  container-type: inline-size;
  inline-size: min(100%, calc(75vh * 16 / 9));
  margin-inline: auto;
}

.cls-board-page {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-paper);
  background: var(--board-paper);
}

.cls-board-paper,
.cls-board-ink {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

/* clicks and touches are the board's only while drawing: otherwise the page scrolls under a finger */
.cls-board-ink.is-drawing {
  touch-action: none;
  cursor: crosshair;
}

.cls-board-ink.is-drawing[data-tool="text"] {
  cursor: text;
}

.cls-board-ink.is-drawing[data-tool="eraser"] {
  cursor: cell;
}

.cls-board-draw {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-end: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  box-shadow: var(--shadow-raised);
}

/* a reader whose pen was taken (Task 7.15b): no «ارسم», and a line under the board that says so (under it, so it hides
   nothing drawn: the review of 7.15b part 1) */
.cls-board-pen {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.cls-board-pen[hidden] {
  display: none;
}

/* the meeting app's: in the middle at the top, wrapping when it's narrow; moved, where its grip took it */
.cls-board-tools {
  position: absolute;
  z-index: 2;
  inset-block-start: var(--space-2);
  inset-inline: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-1) var(--space-2);
  inline-size: max-content;
  max-inline-size: calc(100% - 2 * var(--space-2));
  margin-inline: auto;
  padding: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
}

.cls-board-tools.is-moved {
  inset-inline: auto;
  margin-inline: 0;
}

/* a group wraps too when the toolbar is narrower than it (a phone), so no button goes past the toolbar's edge */
.cls-board-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-inline-size: 0;
}

.cls-board-group + .cls-board-group {
  padding-inline-start: var(--space-2);
  border-inline-start: 1px solid var(--color-border);
}

.cls-board-grip,
.cls-board-btn {
  display: inline-grid;
  place-items: center;
  min-inline-size: var(--control-height);
  block-size: var(--control-height);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
}

.cls-board-grip {
  min-inline-size: var(--space-5);
  color: var(--color-muted);
  cursor: grab;
  touch-action: none;
}

.cls-board-grip:active {
  cursor: grabbing;
}

.cls-board-grip:hover,
.cls-board-btn:hover {
  background: var(--color-bg);
}

.cls-board-grip:focus-visible,
.cls-board-btn:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

.cls-board-btn[aria-pressed="true"] {
  background: var(--color-info-soft);
  box-shadow: inset 0 0 0 2px var(--color-primary);
}

/* undo goes back: its arrow turns with the page's direction */
.cls-board-undo .icon:dir(rtl) {
  transform: scaleX(-1);
}

.cls-board-done {
  padding-inline: var(--space-3);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.cls-board-done:hover {
  background: var(--color-primary-strong);
}

/* the colour and the thickness: one button (its dot grows with the line), the choices in a small panel */
.cls-board-style-group {
  position: relative;
}

.cls-board-style {
  display: inline-flex;
  gap: var(--space-1);
  padding-inline: var(--space-2) var(--space-1);
}

.cls-board-style[aria-expanded="true"] {
  background: var(--color-bg);
}

.cls-board-caret {
  inline-size: var(--space-4);
  block-size: var(--space-4);
  color: var(--color-muted);
}

.cls-board-swatch {
  display: block;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--color-border);
}

.cls-board-style[data-size="2"] .cls-board-swatch {
  inline-size: 0.75rem;
  block-size: 0.75rem;
}

.cls-board-style[data-size="8"] .cls-board-swatch {
  inline-size: 1.3125rem;
  block-size: 1.3125rem;
}

.cls-board-swatch.is-red {
  background: var(--board-ink-red);
}

.cls-board-swatch.is-amber {
  background: var(--board-ink-amber);
}

.cls-board-swatch.is-green {
  background: var(--board-ink-green);
}

.cls-board-swatch.is-blue {
  background: var(--board-ink-blue);
}

.cls-board-swatch.is-purple {
  background: var(--board-ink-purple);
}

.cls-board-swatch.is-white {
  background: var(--board-ink-white);
}

.cls-board-swatch.is-black {
  background: var(--board-ink-black);
}

.cls-board-style-panel {
  position: absolute;
  z-index: 3;
  inset-block-start: calc(100% + var(--space-2));
  inset-inline-start: 0;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
}

.cls-board-style-panel.is-up {
  inset-block-start: auto;
  inset-block-end: calc(100% + var(--space-2));
}

.cls-board-colors,
.cls-board-sizes {
  display: flex;
  justify-content: center;
  gap: 1px;
}

.cls-board-sizes {
  padding-block-start: var(--space-2);
  border-block-start: 1px solid var(--color-border);
}

.cls-board-color,
.cls-board-size {
  min-inline-size: 2rem;
}

.cls-board-dot {
  display: block;
  border-radius: 50%;
  background: currentColor;
}

.cls-board-dot.is-2 {
  inline-size: 0.25rem;
  block-size: 0.25rem;
}

.cls-board-dot.is-4 {
  inline-size: 0.5rem;
  block-size: 0.5rem;
}

.cls-board-dot.is-8 {
  inline-size: 0.875rem;
  block-size: 0.875rem;
}

/* a text being written, where it goes, in its colour (the meeting app's: dark behind it, light behind black) */
.cls-board-text {
  position: absolute;
  z-index: 1;
  min-inline-size: 12rem;
  margin: 0;
  padding-block: 1px;
  padding-inline: var(--space-2);
  border: 1px dashed var(--board-outline-light);
  border-radius: var(--radius-paper);
  background: var(--board-tag-bg);
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.2;
  outline: none;
}

.cls-board-text::placeholder {
  color: var(--board-tag-text);
  font-weight: 400;
  opacity: 0.6;
}

.cls-board-text.is-red {
  color: var(--board-ink-red);
}

.cls-board-text.is-amber {
  color: var(--board-ink-amber);
}

.cls-board-text.is-green {
  color: var(--board-ink-green);
}

.cls-board-text.is-blue {
  color: var(--board-ink-blue);
}

.cls-board-text.is-purple {
  color: var(--board-ink-purple);
}

.cls-board-text.is-white {
  color: var(--board-ink-white);
}

.cls-board-text.is-black {
  border-color: var(--board-outline-dark);
  background: var(--board-outline-light);
  color: var(--board-ink-black);
}

.cls-board-text.is-black::placeholder {
  color: var(--board-ink-black);
}

.cls-board-say {
  margin: 0;
  font-size: var(--font-size-small);
}

.cls-board-say:empty,
.cls-board-ask:empty {
  display: none;
}

/* after the class: its heading and its pages, only when it had any */
.cls-board-after {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cls-board-after:has(> class-board[hidden]) {
  display: none;
}

/* a narrow board (beside the chat, or on a phone): the toolbar under the page, so it covers none of it */
@container (max-width: 40rem) {
  .cls-board-tools,
  .cls-board-tools.is-moved {
    position: static;
    inline-size: auto;
    max-inline-size: none;
    margin-block-start: var(--space-2);
  }

  .cls-board-grip {
    display: none;
  }
}

@media (forced-colors: active) {
  .cls-board-btn[aria-pressed="true"] {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }

  .cls-board-swatch {
    forced-color-adjust: none;
  }
}

/* ── Drawing on the slides (Task 7.15b, part 2; the owner's answers of 22 Oct 2026): <class-slide-ink>, the board's
   drawing on the slide shown, in the slide's own frame. The slide's content (its title and content, or an exercise's
   question) laid out 512 pixels wide for everyone and made smaller or larger to the width it has (the page sets its
   zoom), light in both modes as the board's page (tokens.css), the ink over it; «ارسم», or the line saying the pen is
   the trainer's, and the toolbar above it, so they cover none of it, and what is said or asked under the toolbar; while
   drawing, the toolbar and what is under it in view down a long slide. Once the class has ended, «شرائح المحاضرة»: the
   slides drawn on, one by one ── */

.cslide-stage.is-inked {
  padding: 0;
}

.cls-board.is-slide {
  position: relative;
  gap: 0;
}

/* the slide's width, with none of its height, for its zoom (components/class-board.js) */
.cls-ink-ruler {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 0;
}

/* while a slide drawn on is seen, the page's scrollbar keeps its room (classic scrollbars, as on Windows): coming as the
   slide's zoom made the page taller, and going as it made it shorter, it would change the slide's width, and so its
   zoom, again and again (the review of 7.15b part 2) */
:root:has(.cls-board.is-slide:not([hidden]) .cls-ink-sheet) {
  scrollbar-gutter: stable;
}

.cls-board.is-slide .cls-board-stage {
  inline-size: 100%;
}

.cls-ink-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
}

/* «ارسم» at the row's end, as at the board's top corner */
.cls-board.is-slide .cls-board-draw {
  position: static;
  margin-inline-start: auto;
  box-shadow: none;
}

.cls-board.is-slide .cls-board-tools {
  position: static;
  inline-size: auto;
  max-inline-size: none;
  margin: var(--space-2);
  box-shadow: none;
}

/* while drawing, the toolbar and what is said or asked under it stay at the top of the screen, under the top bar, as a
   long slide scrolls («تم» within reach: the review of 7.15b part 2) */
.cls-ink-tray {
  display: flow-root;
}

.cls-ink-tray:has(> .cls-board-tools:not([hidden])) {
  position: sticky;
  z-index: 2;
  inset-block-start: var(--nb-height, 0px);
  border-block-end: 1px solid var(--color-border);
  background: var(--color-surface);
}

.cls-board.is-slide .cls-board-grip {
  display: none;
}

.cls-board.is-slide .cls-board-page {
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
}

/* the slide under the ink takes clicks (its words chosen, its links) and touches (the page scrolled) but while drawing */
.cls-board.is-slide .cls-board-ink:not(.is-drawing) {
  pointer-events: none;
}

/* and while drawing on it (often longer than the screen), one finger draws and two pan and zoom the page (the review of
   7.15b part 2; what the first began as the second came isn't kept: components/class-board.js) */
.cls-board.is-slide .cls-board-ink.is-drawing {
  touch-action: pinch-zoom;
}

.cls-ink-sheet {
  box-sizing: border-box;
  padding: var(--space-4);
  background: var(--board-paper);
  color: var(--color-doc-text);
  color-scheme: light;
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height);
  overflow-wrap: anywhere;
}

/* laid out the same wherever it is (in the class's slide, and after the class), and never scrolled sideways by one
   reader under a drawing that stays put (content wider than the sheet is made smaller to fit it:
   components/class-board.js; the review of 7.15b part 2) */
.cls-ink-sheet .doc-view {
  overflow: hidden;
}

/* the computer's layout on every screen (the owner's choice 4): what docBuilder's content changes on a narrow screen
   stays as on a computer inside a slide drawn on, with docContent.css's own values (its indent, which it halves under
   760 pixels; pictures and drawings beside the words, which it puts on their own line under 480), so a drawing stays on
   the words it marked */
@media (max-width: 760px) {
  .cls-ink-sheet .doc-content {
    --doc-indent: 36pt;
  }
}

@media (max-width: 480px) {
  .cls-ink-sheet .doc-content .doc-img-left,
  .cls-ink-sheet .doc-content .doc-draw-left {
    display: inline;
    float: left;
    margin: 2pt 12pt 6pt 0;
  }

  .cls-ink-sheet .doc-content .doc-img-right,
  .cls-ink-sheet .doc-content .doc-draw-right {
    display: inline;
    float: right;
    margin: 2pt 0 6pt 12pt;
  }
}

.cslide-stage .cls-board.is-slide .cls-board-say,
.cslide-stage .cls-board.is-slide .cls-board-ask {
  padding: var(--space-2) var(--space-4);
}

/* an exercise's choices, under it */
.cslide-below {
  padding: var(--space-3) var(--space-4) var(--space-4);
}

/* after the class: «الشريحة ٢ من ٥», the slide in a frame, «السابقة» and «التالية»; only when the class drew on any */
.cls-slides-after .cls-board.is-slide {
  gap: var(--space-2);
}

.cls-slides-after .cls-board.is-slide .cls-board-page {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-paper);
}

.cls-slides-after:has(> class-slide-ink[hidden]) {
  display: none;
}

/* ── The trainer's controls (Task 7.11c): the class's floor. A student's hand and line under their bar, at the top of
   the middle (since Task 7.22 the hand in the class's bar, the line under it); the trainer's and staff's raised hands,
   how many speak and the steps on every student at the top of «الحاضرون»; by each student there, their hand, the word,
   a screen given, and their own steps ── */
.cls-floor[hidden] {
  display: none;
}

.cls-floor {
  display: block;
}

.cls-floor-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.cls-people > .cls-floor {
  margin-block-end: var(--space-3);
  padding-block-end: var(--space-3);
  border-block-end: 1px solid var(--color-border);
}

.cls-floor-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.cls-floor-button[aria-pressed='true'] {
  border-color: var(--color-primary);
  background: var(--color-info-soft);
  color: var(--color-primary);
}

.cls-floor-button[aria-disabled='true'] {
  opacity: 0.6;
  cursor: progress;
}

.cls-floor-line,
.cls-floor-speaking,
.cls-floor-none,
.cls-floor-say {
  margin: 0;
  font-size: var(--font-size-small);
}

.cls-floor-say.is-problem {
  color: var(--color-danger);
}

.cls-floor-title {
  inline-size: 100%;
  margin: 0;
  font-size: var(--font-size-body);
}

.cls-floor-name {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.cls-floor-time {
  font-size: var(--font-size-small);
}

/* the steps on every student: a row of round pictures in the middle, as the old app's */
.cls-floor-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  inline-size: 100%;
}

/* a hand raised by a name: red, as the old app's raised hand (Task 7.22, part b) */
.cls-hand-mark.is-on {
  color: var(--color-danger);
}

.cls-floor-badge {
  border-color: var(--color-success);
  background: var(--color-success-soft);
  color: var(--color-success-text);
}

/* ── The class's door (Task 7.11c, part 2): for the trainer and staff under the floor at the top of «الحاضرون»,
   «غرفة الانتظار», who waits and «المُخرَجون»; by each student there «إخراج من المحاضرة»; a student held at the door
   is told so in the page's notice ── */
.cls-door-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cls-door-room {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.cls-door-line {
  margin: 0;
  font-size: var(--font-size-small);
}

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

.cls-door-person {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-inline-size: 0;
}

.cls-door-person > .cls-floor-button {
  margin-inline-start: auto;
}

.cls-door-body > .cls-floor-button {
  align-self: flex-start;
}

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

.cls-held > .crs-line {
  margin: 0;
}

/* ── The class's recording (Task 7.11d) ─────────────────────────────────────────────────────────────────────── */

/* its box takes no place of its own in the class's card: the badge does, while it shows (the review of 7.11d) */
.cls-rec-badge-box {
  display: contents;
}

/* «● يُسجَّل ١٢:٠٤», for everyone, under the class's state, as wide as it says (an item of the card itself) */
.cls-rec-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius);
  background: var(--color-danger-soft);
  color: var(--color-danger);
  font-weight: 700;
}

.cls-rec-badge[hidden] {
  display: none;
}

.cls-rec-dot {
  flex: none;
  inline-size: var(--space-2);
  block-size: var(--space-2);
  border-radius: 50%;
  background: var(--color-danger);
}

@media (prefers-reduced-motion: no-preference) {
  .cls-rec-dot {
    animation: cls-rec-blink 1.6s ease-in-out infinite;
  }
}

@keyframes cls-rec-blink {
  50% {
    opacity: 0.35;
  }
}

/* the trainer's: «بدء التسجيل», «متابعة التسجيل» or «إيقاف التسجيل», and what is said under it */
.cls-rec {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.cls-rec[hidden],
.cls-rec-button[hidden],
.cls-rec-hint[hidden] {
  display: none;
}

.cls-rec-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.cls-rec-button .icon {
  color: var(--color-danger);
}

.cls-rec-button.is-stop {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.cls-rec-line,
.cls-rec-hint {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--font-size-small);
}

.cls-rec-line.is-problem {
  color: var(--color-danger);
}

/* a line that says nothing is out of sight, but there, so what it says next is read out */
.cls-rec-line:empty {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* the trainer's camera while it records, over the bottom corner of what shows of the part of the middle the recording
   is cut to (in its picture, so in the recording): where and how wide, the script says (class-recording.js) */
.cls-rec-camera {
  position: fixed;
  z-index: 25;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 2px solid var(--color-surface);
  border-radius: var(--radius);
  background: var(--color-picture-bg);
  box-shadow: var(--shadow-raised);
  pointer-events: none;
}

.cls-rec-camera[hidden] {
  display: none;
}

/* «تسجيل المحاضرة» after the class, under the lecture's lessons */
.cls-recording-after {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
}

.cls-recording-after[hidden],
.cls-recording-after [hidden] {
  display: none;
}

.cls-recording-after .crs-line {
  margin: 0;
}

.cls-recording-hidden {
  color: var(--color-draft);
  font-weight: 600;
}

/* ── The class's bar (Task 7.22): the reader's buttons for the class in one row at the top of the middle (their hand,
   their microphone, camera, screen and devices, the recording's, «ملء الشاشة»), what is said of them under it. On a
   touch screen narrower than 64rem (a phone, a tablet held upright) the bar is at the bottom of the screen instead,
   with «المحادثة», «الحاضرون» and «الملفات», which open the side over the class, and «المزيد». A computer's window keeps
   it in the page whatever its width, so it never sits over the middle a recording is cut to; there it starts with
   «إخفاء الشريط الجانبي» (alone in it outside the live class). Since part b (the owner's choice of 24 Oct 2026: as the
   old app's strip above its slide), round pictures: «إخفاء الشريط الجانبي» at its start, the others gathered at its
   far end ── */
.cls-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  padding-block-end: var(--space-2);
  border-block-end: 1px solid var(--color-border);
}

/* nothing in it (on a phone, «المزيد» and the side's buttons aside): no room taken; a computer's always has «إخفاء الشريط
   الجانبي» */
.cls-bar:not(:has(> :not([hidden], .cls-side-key, .cls-more-box))) {
  display: none;
}

/* the hand, the voice's buttons, the hands' list: items of the bar's row */
.cls-floor-keys,
.cls-hands-box {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}

/* «إخفاء الشريط الجانبي» at the bar's start, by the side, as the old app's ‹ › was; the others at its far end */
.cls-side-toggle {
  margin-inline-end: auto;
}

/* the microphone's level is the ring round its button (Task 7.22, part b) */
.cls-bar .cls-rtc-level {
  display: none;
}

/* a phone's only (over the round buttons' own display) */
.cls-round.cls-side-key,
.cls-more-box {
  display: none;
}

/* its arrow points the way the side goes, and while it's hidden, what is new on it is counted */
.cls-side-toggle[aria-expanded="false"] > .icon {
  transform: scaleX(-1);
}

/* ── The class's round buttons (Task 7.22, part b; components/round-button.js): the old app's, each a picture alone,
   named on hover; large in the class's bar (its strip's 40px), small in a student's row (its rows' 30px). Their states in
   the old app's colours: the link's blue at rest; teal, given or sending (filled, or the picture's colour for the pen);
   red, not let or taken (the picture's colour), or a hand raised (filled); open, filled blue; not now, faded ── */
.cls-round {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background: none;
  color: var(--color-primary);
  font: inherit;
  cursor: pointer;
}

.cls-round > .icon {
  inline-size: 1.375rem;
  block-size: 1.375rem;
}

.cls-round:hover {
  background: var(--color-info-soft);
}

.cls-round.is-small {
  inline-size: 1.875rem;
  block-size: 1.875rem;
}

.cls-round.is-small > .icon {
  inline-size: 1.125rem;
  block-size: 1.125rem;
}

/* a student's round steps rest in the text's colour, as the old app's rows (its strip's were the link's blue) */
.cls-round.is-small {
  color: var(--color-text);
}

.cls-round.is-on,
.cls-round[aria-pressed="true"] {
  background: var(--color-correct-fill);
  color: var(--color-on-fill);
}

.cls-round.is-given {
  color: var(--color-correct);
}

.cls-round.is-off {
  color: var(--color-danger);
}

.cls-round.is-raised {
  background: var(--color-danger-fill);
  color: var(--color-on-fill);
}

/* on, waiting for the connection: sent once it's back (a dashed frame round an empty button, so it isn't taken for one
   sending; the keyboard's ring stays its own) */
.cls-round.is-waiting {
  border-style: dashed;
  border-color: var(--color-correct);
  background: none;
  color: var(--color-correct);
}

/* a student whose microphone is on now: a ring */
.cls-round.is-live {
  box-shadow: 0 0 0 3px var(--color-success);
}

/* a student's microphone and camera (Task 7.23, part b2: the old students list's keys): let and sending, green with the
   ring; blocked, red and slashed; still sending as it's blocked (a moment), filled red */
.cls-round.cls-block-key.is-let.is-live {
  color: var(--color-correct);
}

.cls-round.cls-block-key.is-blocked {
  color: var(--color-danger);
}

.cls-round.cls-block-key.is-blocked.is-live {
  background: var(--color-danger-fill);
  color: var(--color-on-fill);
  box-shadow: none;
}

/* a student's own key the trainer blocked (Task 7.23, part b2: the old's .prevented): faded red, a press doing nothing */
.cls-round.is-prevented {
  color: var(--color-danger);
}

/* the reader's own microphone, on: a ring as wide as what it hears (its level, set as it listens) */
.cls-rtc-mic.is-on {
  box-shadow: 0 0 0 calc(var(--level, 0) * 0.625rem) color-mix(in srgb, var(--color-correct) 45%, transparent);
}

/* open: its list, its menu, the devices' lists, the side over the class on its tab (not the side's own ‹ ›, open while
   the side shows) */
.cls-round[aria-expanded="true"]:not(.cls-side-toggle),
.am.is-open .am-button.cls-round {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

/* not now (it keeps the keyboard, unlike a disabled button); a mark only (a student's camera that's off), faded too */
.cls-round[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

.cls-round:disabled {
  opacity: 0.45;
  cursor: default;
}

.cls-round:disabled:hover {
  background: none;
}

/* a round mark, not a button (a student's camera that's off, for the trainer and staff) */
.cls-round.is-mark {
  opacity: 0.45;
  cursor: default;
}

.cls-round.is-mark:hover {
  background: none;
}

/* the keyboard's ring, outside the button, over whatever its state draws (the review of 7.22b) */
.cls-round:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* an action menu's button made round («المزيد», a student's «خيارات»): its picture alone */
.am-button.cls-round {
  min-block-size: 0;
  padding: 0;
  border: 2px solid transparent;
  background: none;
  color: var(--color-primary);
}

.am-button.cls-round:hover {
  background: var(--color-info-soft);
}

.am-button.cls-round > span:not(.cls-key-count),
.am-button.cls-round > .am-chevron {
  display: none;
}

/* a count by a round button's picture, the old app's red bubble at its top corner: new messages, raised hands and those
   waiting, new files */
.cls-key-count {
  min-inline-size: 1.25rem;
  padding-inline: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--color-danger-fill);
  color: var(--color-on-fill);
  font-size: var(--font-size-small);
  font-weight: 700;
  line-height: 1.25rem;
  text-align: center;
}

.cls-round > .cls-key-count {
  position: absolute;
  inset-block-start: calc(-1 * var(--space-2));
  inset-inline-start: calc(-1 * var(--space-2));
  min-inline-size: 1.25rem;
  border: 2px solid var(--color-surface);
  line-height: 1rem;
}

.cls-key-count:empty {
  display: none;
}

/* «الأيدي المرفوعة», the trainer's and staff's (Task 7.22, part b): a hand raised makes it red and beat for six seconds,
   as the old app's did (asked for less motion, red and still) */
.cls-hands-key.is-new {
  color: var(--color-danger);
}

@media (prefers-reduced-motion: no-preference) {
  .cls-hands-key.is-new > .icon {
    animation: cls-hand-beat 1s ease-in-out 6;
  }
}

@keyframes cls-hand-beat {
  50% {
    transform: scale(1.35);
  }
}

/* its list, under it, as the old app's: its title, each hand with the first letter of its name, its name and time, its
   round steps, then «إنزال كل الأيدي» and the sound's switch (laid out only while it's open: a closed popover is the
   browser's to hide) */
.cls-hands-panel {
  inline-size: 18rem;
}

.cls-hands-panel .dp-body,
.cls-hands-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* what went wrong, under the title: a line that says nothing is out of sight, but there, so what it says next is read
   out (as the voice's lines) */
.cls-hands-say {
  margin: 0;
}

.cls-hands-say:empty {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cls-hands-title {
  margin: 0;
  font-weight: 700;
}

.cls-hands-none {
  margin: 0;
  font-size: var(--font-size-small);
}

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

.cls-hand-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  padding-block: var(--space-2);
}

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

.cls-hand-who {
  display: flex;
  flex: 1 1 6rem;
  flex-direction: column;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.cls-hand-name {
  font-weight: 600;
}

.cls-hand-time {
  font-size: var(--font-size-small);
}

.cls-hands-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block-start: var(--space-2);
  border-block-start: 1px solid var(--color-border);
}

.cls-hands-down {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-link);
  font: inherit;
  font-size: var(--font-size-small);
  text-decoration: underline;
  cursor: pointer;
}

.cls-hands-down[aria-disabled="true"] {
  opacity: 0.6;
  cursor: progress;
}

.cls-hands-foot > .cls-round {
  margin-inline-start: auto;
}

/* what the bar's parts say: the voice's lines and devices, the recording's, the hand's */
.cls-notes {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}

.cls-notes:not(:has(> :not([hidden]))) {
  display: none;
}

@media (forced-colors: active) {
  .cls-round.is-on,
  .cls-round[aria-pressed="true"],
  .cls-round.is-raised,
  .cls-round.is-live,
  .cls-round[aria-expanded="true"]:not(.cls-side-toggle) {
    border-color: Highlight;
  }

  .cls-round.is-waiting {
    border-color: Highlight;
  }

  .cls-tab[aria-selected="true"] {
    border-block-end: 3px solid Highlight;
  }
}

/* the side's head: its tabs, and «إغلاق» while it opens over the class (a narrow screen while the class is live) */
.cls-side-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.cls-side-head > .cls-tabs {
  flex: 1 1 auto;
}

/* the class dimmed under the side opened over it (part e): only then, on a narrow screen */
.cls-side-scrim {
  display: none;
}

/* on a phone, while the class is live, the site's top bar is put away (the owner's choice 2), as a test's focus mode
   does (tests.css): «مغادرة» is in the class's own line. A phone held sideways too (a touch screen at most 500px
   high): the side over the class would be under it */
@media (max-width: 47.9375rem), (pointer: coarse) and (max-height: 31.25rem) {
  app-shell:has(lecture-page.is-live) > :is(nav-bar, .app-header) {
    display: none;
  }

  /* (app-shell's, so it outweighs nav-bar.css's own) */
  :root:has(app-shell lecture-page.is-live) {
    --nb-height: 0px;
  }
}

@media (max-width: 63.9375rem) and (pointer: coarse) {
  /* room at the page's end for the bar (its height: the page's --cls-bar-h, measured) */
  lecture-page.is-live {
    padding-block-end: var(--cls-bar-h, 4.5rem);
  }

  /* (since Task 7.22, part b, round pictures spread along it, a little larger for a finger; past its width, it scrolls
     from its start: the room between them shared by their margins, never by centring, which a browser may do past the
     width too) */
  lecture-page.is-live .cls-bar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 22;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: var(--space-1);
    overflow-x: auto;
    padding: var(--space-2) var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
    border-block-start: 1px solid var(--color-border);
    border-block-end: 0;
    background: var(--color-surface);
    box-shadow: var(--shadow-raised);
  }

  lecture-page.is-live .cls-bar > .cls-rtc-bar,
  lecture-page.is-live .cls-bar > .cls-floor-keys,
  lecture-page.is-live .cls-bar > .cls-hands-box {
    flex-wrap: nowrap;
  }

  lecture-page.is-live .cls-bar > :not([hidden]) {
    margin-inline: auto;
  }

  lecture-page.is-live .cls-bar .cls-round:not(.is-small) {
    inline-size: 2.75rem;
    block-size: 2.75rem;
  }

  /* a student's round steps and the hands' list's, a little larger for a finger too */
  lecture-page.is-live .cls-round.is-small {
    inline-size: 2.25rem;
    block-size: 2.25rem;
  }

  /* in «المزيد» here: «الأجهزة» and «ملء الشاشة» */
  lecture-page.is-live .cls-bar .cls-rtc-devices,
  lecture-page.is-live .cls-bar .cls-full-key {
    display: none;
  }

  lecture-page.is-live .cls-side-key,
  lecture-page.is-live .cls-more-box {
    display: inline-flex;
  }

  /* while a text is typed in the side, the phone's keyboard is up: the bar steps aside */
  lecture-page.is-live.is-typing .cls-bar {
    display: none;
  }

  /* drawing: the toolbar at the bottom of the screen, in the bar's place, «تم» at hand (the board's frame no longer
     sizes it, so it sits on the screen itself) */
  lecture-page.is-live .cls-board-stage {
    container-type: normal;
  }

  lecture-page.is-live .cls-board:not(.is-slide) .cls-board-tools:not([hidden]),
  lecture-page.is-live .cls-ink-tray:has(> .cls-board-tools:not([hidden])) {
    position: fixed;
    inset-inline: 0 !important;
    inset-block-start: auto !important;
    inset-block-end: 0 !important;
    z-index: 23;
    inline-size: auto;
    max-inline-size: none;
    margin: 0;
    padding: var(--space-2) var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-block-start: 1px solid var(--color-border);
    border-radius: 0;
    background: var(--color-surface);
    box-shadow: var(--shadow-raised);
  }

  lecture-page.is-live .cls-board-grip {
    display: none;
  }

  lecture-page.is-live:has(.cls-board-tools:not([hidden])) .cls-bar {
    display: none;
  }
}

/* (Task 7.22, part e; the owner's wish of 25 Oct 2026, as the old app's side panel under 992px) on a narrow screen (a
   phone's, or a computer's window) while the class is live, the side opens over the class at its start, the right, as
   wide as it is beside the class (at most 85% of the screen), from under the top bar to the screen's foot (on a phone,
   to the bar: above), the rest of the class dimmed under it; closed, it's off the screen at that side, kept in the page
   so the chat keeps its place. The page says when (`is-side-over`): not while it records the class (the review's) */
@media (max-width: 63.9375rem) {
  lecture-page.is-side-over .cls-body > .cls-side {
    position: fixed;
    inset-block-start: var(--nb-height, 0px);
    inset-block-end: 0;
    inset-inline-start: calc(-1 * (min(20rem, 85vw) + var(--space-4)));
    z-index: 21;
    inline-size: min(20rem, 85vw);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-3);
    border-width: 0;
    border-inline-end-width: 1px;
    border-radius: 0;
    box-shadow: var(--shadow-raised);
    visibility: hidden;
  }

  lecture-page.is-side-over.is-side-open .cls-body > .cls-side {
    inset-inline-start: 0;
    visibility: visible;
  }

  lecture-page.is-side-over.is-side-open .cls-side-scrim {
    display: block;
    position: fixed;
    inset: var(--nb-height, 0px) 0 0;
    z-index: 20;
    background: var(--color-side-scrim);
  }

  /* the open tab fills the side's height, its list scrolling within it (no second scroll round it) */
  lecture-page.is-side-over .cls-body > .cls-side > :is(class-chat, .cls-people, class-files, .cls-deck-box),
  lecture-page.is-side-over .cls-side .chat-scroll {
    flex: 1 1 auto;
    min-block-size: 0;
  }

  lecture-page.is-side-over .cls-side :is(.chat-list, .cls-files-list) {
    flex: 1 1 auto;
    min-block-size: min(6rem, 25dvh);
    max-block-size: none;
  }

  lecture-page.is-side-over .cls-body > .cls-side > :is(.cls-people, .cls-deck-box) {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* (Task 7.22, part d) the deck fills the side's height, as the others */
  lecture-page.is-side-over .cls-body > .cls-side > .cls-deck-box {
    max-block-size: none;
  }
}

/* on a computer's window the page holds still under the veil while the side is open over the class (the review of part
   e: a wheel there scrolled the class away under it, as the old app's veil never did) */
@media (max-width: 63.9375rem) and (pointer: fine) {
  html:has(lecture-page.is-side-over.is-side-open) {
    overflow: hidden;
  }
}

/* on a phone the side over the class ends above the bar, and while a text is typed in it, with the bar stepped aside, at
   the screen's foot (after the narrow screen's rules, which it outweighs) */
@media (max-width: 63.9375rem) and (pointer: coarse) {
  lecture-page.is-side-over .cls-body > .cls-side {
    inset-block-end: var(--cls-bar-h, 4.5rem);
  }

  lecture-page.is-side-over.is-typing .cls-body > .cls-side {
    inset-block-end: 0;
  }
}

@media (max-width: 63.9375rem) and (prefers-reduced-motion: no-preference) {
  /* it shows at once as it opens, so the keyboard can go to it, and goes once it has slid away */
  lecture-page.is-side-over .cls-body > .cls-side {
    transition: inset-inline-start 0.2s ease, visibility 0s linear 0.2s;
  }

  lecture-page.is-side-over.is-side-open .cls-body > .cls-side {
    transition: inset-inline-start 0.2s ease, visibility 0s;
  }
}

/* asked for less motion, nothing in the side moves: base.css gives every change a transition of 0.01ms then, the side's
   showing too, which would leave it hidden as the keyboard goes to it (the review of 7.22a) */
@media (max-width: 63.9375rem) and (prefers-reduced-motion: reduce) {
  lecture-page.is-side-over .cls-body > .cls-side,
  lecture-page.is-side-over .cls-body > .cls-side * {
    transition-property: none;
  }
}