/* A run's page for its members as the old app's course page (Task 7.23, the owner's choice 1 of 25 Oct 2026: the old
   page's own style sheets and markup; since part d the app's own icons): its views bar «شارك» «القاعة» «المادة» «تمارين» and, since part a, the
   views «المادة» and «تمارين». These are the old site's own rules, their values as they were, from its sheets in the
   order it loaded them: css/common (base, btn, view-keys, page-content, grid, question-view, and the site bundle's
   «رئيسية»), then css/course (basic, contents_base, contents_manager, material_index, students_list, media_call).
   What changed, and only that:
   - every rule sits under the page's root, `.old-course` (<course-views>), so it touches nothing else in the app; the old
     sheets' rules for `body` and `*` are written for that root, and the old colours are named `--oc-…`;
   - physical sides are written as logical ones (`margin-left` as `margin-inline-end`, `left: 0` as
     `inset-inline-end: 0`): the same look on this right-to-left page, so rule 17's logical properties hold;
   - the old markup's `style` attributes (the keys' `order`, the toggler's `float`, a chapter's pointer, the shown
     block and screen) are rules here or the `hidden` attribute, so rule 22 and the CSP hold;
   - the old dark colours (`#body.dark`) apply when the device asks for dark, as in the rest of the app;
   - the keyboard's ring stays (the old `.btn { outline: none !important }` now hides it for the mouse only).
   Since part d (the owner's words of 25 Oct 2026) the icons are the app's own (core/icon.js), in the app's sizes and
   colours, its tokens; everything else keeps the old sizes, in px: this sheet is set aside from rule 17's tokens by the
   owner's choice.
   Since the owner's approval of 31 Oct 2026 (the boards Course and Course-phone) the views are in the kit's look, in the
   page's tokens, each its own section: «القاعة» (Task indoor part f), then «المادة» and «تمارين» (the viewer), and
   «شارك» (the feed, the last section) in part g. The old rules above are what the room still shares with them (the
   names, their layout and the cascade); the old colours, `--oc-…`, stay for those rules only. */

/* ── The old site's colours (common/base.css, common/btn.css) ── */

.old-course {
  --oc-background-color: white;
  --oc-background-color-low: #f2f2f2;
  --oc-background-color-mid: #e6e5e5;
  --oc-background-color-high: #b3b3b3;
  --oc-border-color: #d8d8d8;
  --oc-border-color-low: #d8d8d8;
  --oc-border-color-mid: #f0f0f0;
  --oc-border-color-high: #d8d8d8;
  --oc-view-key-icon-color: #2ab4c0;
  --oc-color-low: #afafaf;
  --oc-color-mid: #2e2e2e;
  --oc-color-high: #000;
  --oc-page-body-bg-color: #eff3f8;
  --oc-page-body-color: #333;
  --oc-btn-danger-bg-color: #ed6b75;
  --oc-btn-default-color: #333;
  --oc-btn-default-bg-color: #fff;
  --oc-btn-default-border-color: #ccc;
  --oc-btn-success-color: #fff;
  --oc-btn-success-bg-color: #36c6d3;
  --oc-btn-success-border-color: #2bb8c4;
  --oc-btn-link-color: #337ab7;
  --oc-option-active-bg: #2ab4c0;
}

@media (prefers-color-scheme: dark) {
  .old-course {
    --oc-background-color: black;
    --oc-background-color-low: #1e1e1e;
    --oc-background-color-mid: #474747;
    --oc-background-color-high: #858585;
    --oc-border-color: #5a5e63;
    --oc-border-color-low: #dcdcdc;
    --oc-border-color-mid: #bfbdbd;
    --oc-border-color-high: #312f2f;
    --oc-view-key-icon-color: #578184;
    --oc-color-low: #7d7d7d;
    --oc-color-mid: #939393;
    --oc-color-high: #a9a9a9;
    --oc-page-body-bg-color: #121212;
    --oc-page-body-color: #eff3f8;
    --oc-btn-danger-bg-color: #924141;
    --oc-btn-default-color: #020202;
    --oc-btn-default-bg-color: #c0c0c0;
    --oc-btn-default-border-color: #ccc0;
    --oc-btn-success-color: #fff;
    --oc-btn-success-bg-color: #206369;
    --oc-btn-success-border-color: #2bb8c400;
    --oc-btn-link-color: #4b6a84;
    --oc-option-active-bg: #105f66;
  }

  /* the old page's dark body (--page-body-bg-color): the room's only (part g: «شارك», «المادة» and «تمارين» are on the page
     of the kit) */
  body:has(.old-course #view3:not([hidden])) {
    background-color: #121212;
  }
}

/* ── The page in the app's frame: the app's top bar is the old header; under it the course's line (the whole width), then
   the old box, `.container` (common/grid.css, common/page-content.css): the whole width under 992px, 970px from 992px,
   1170px from 1200px (#views-panes-parent: the room has the whole width) ── */

.app-main:has(.old-course) {
  max-width: none;
  padding: 0;
}

run-page:has(> .old-course) {
  gap: 0;
}

.old-course {
  display: block;
  width: 100%;
  margin-inline: auto;
  /* the old sheets' z-indexes (9998, 9911…) stay inside the page, under the app's top bar and its menus */
  isolation: isolate;
  color: var(--oc-page-body-color);
  font-family: "kufi", "Droid Arabic Kufi", Arial, sans-serif, math;
  font-size: 15px;
  line-height: 1.8em;
}

.old-course,
.old-course * {
  user-select: none;
}

/* common/reset.css and common/base.css, for the old page's own parts (never the slides' content, whose look is the
   app's docHtml.css): no margins on its lists, and its buttons and boxes in the page's font */
:where(.old-course) :where(ul, li, label) {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
}

/* common/base.css and the site bundle's own sizes for a page's words, under the slides' own look (docHtml.css's rules,
   when it has them, still win) */
:where(.old-course .data) :where(h1, h2, h3, h4, h5, h6) {
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
}

:where(.old-course .data) :where(h2, h3) {
  margin-top: 20px;
  margin-bottom: 10px;
}

:where(.old-course .data) h1 {
  font-size: 36px;
}

:where(.old-course .data) h2 {
  font-size: 30px;
}

:where(.old-course .data) h3 {
  font-size: 24px;
}

:where(.old-course .data) h4 {
  font-size: 18px;
}

:where(.old-course .data) h5 {
  font-size: 14px;
}

:where(.old-course .data) h6 {
  font-size: 12px;
}

:where(.old-course .data) p {
  margin: 0 0 10px;
}

:where(.old-course .data) :where(ul, ol) {
  margin-top: 0;
  margin-bottom: 10px;
}

:where(.old-course .data) img {
  vertical-align: middle;
  border: 0;
}

:where(.old-course) :where(button, input) {
  color: inherit;
  font: inherit;
  margin: 0;
}

:where(.old-course) button {
  overflow: visible;
  text-transform: none;
  cursor: pointer;
}

/* ── The old scroll bars (course/basic.css, material_index.css, contents_base.css), for Chrome and Edge; since Task indoor
   (the owner, 31 Oct 2026) their colours the tokens' (the same in light mode, dark in dark mode) ── */

.old-course ::-webkit-scrollbar {
  height: 10px;
  width: 10px;
  background-color: var(--color-scrollbar-track);
}

.old-course ::-webkit-scrollbar-thumb {
  background: var(--color-scrollbar-thumb);
}

.old-course .cmIndex > .bpb > .block::-webkit-scrollbar,
.old-course .cmIndex > .bpb > .block > .items-parent > .item::-webkit-scrollbar {
  width: 2px;
}

.old-course .cmIndex > .bpb > .block > .items-parent::-webkit-scrollbar {
  height: 4px;
  background-color: var(--color-scrollbar-track);
  width: 4px;
}

.old-course .contents-datashow .contents-screens::-webkit-scrollbar {
  width: 4px;
}

/* ── The old buttons (common/btn.css) ── */

.old-course .btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857;
  border-radius: 4px;
  user-select: none;
  box-shadow: none !important;
}

.old-course .btn:focus:not(:focus-visible) {
  outline: none;
}

.old-course .btn:hover,
.old-course .btn:focus {
  color: #333;
  text-decoration: none;
}

.old-course .btn.disabled,
.old-course .btn[disabled] {
  cursor: not-allowed;
  opacity: 0.65;
}

.old-course .btn-default {
  color: var(--oc-btn-default-color);
  background-color: var(--oc-btn-default-bg-color);
  border-color: var(--oc-btn-default-border-color);
}

.old-course .btn-default:focus {
  color: #333;
  background-color: #e6e6e6;
  border-color: #8c8c8c;
}

.old-course .btn-default:hover {
  color: var(--oc-color-high) !important;
  background-color: var(--oc-background-color-mid) !important;
  border-color: var(--oc-border-color) !important;
}

.old-course .btn-default:active,
.old-course .btn-default.active {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}

.old-course .btn-success {
  color: var(--oc-btn-success-color);
  background-color: var(--oc-btn-success-bg-color);
  border-color: var(--oc-btn-success-border-color);
}

.old-course .btn-success:focus {
  color: #fff;
  background-color: #27a4b0;
  border-color: #14565c;
}

.old-course .btn-success:hover,
.old-course .btn-success:active {
  color: #fff;
  background-color: #27a4b0;
  border-color: #208992;
}

.old-course .btn-success.disabled:hover,
.old-course .btn-success[disabled]:hover,
.old-course .btn-success[disabled]:focus {
  background-color: #36c6d3;
  border-color: #2bb8c4;
}

.old-course .btn-link {
  color: var(--oc-btn-link-color);
  font-weight: normal;
  border-radius: 0;
}

.old-course .btn-link,
.old-course .btn-link:active,
.old-course .btn-link.active,
.old-course .btn-link[disabled] {
  background-color: transparent;
}

.old-course .btn-link,
.old-course .btn-link:hover,
.old-course .btn-link:focus,
.old-course .btn-link:active {
  border-color: transparent;
}

.old-course .btn-link:hover,
.old-course .btn-link:focus {
  color: #23527c;
  text-decoration: underline;
  background-color: transparent;
}

.old-course .btn-link[disabled]:hover,
.old-course .btn-link[disabled]:focus {
  color: #6c8dae;
  text-decoration: none;
}

.old-course .btn-lg {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33333;
  border-radius: 6px;
}

/* ── The course's line (Task indoor, part f; the kit's: nav-bar.css's view keys and the pages' navy bands): under the top
   bar, slim and navy, the course's name, while a class is on or waits its pill and its lecture, and the page's keys at
   its end as pills, the chosen one white. Under 500px the keys are a navy bar fixed to the bottom of the screen, «رئيسية»
   first, each its icon over its name (the line's own words out of sight), as the app's other pages' keys. The views
   under it keep the old box (970px from 992px, 1170px from 1200px; the room has the whole width). ── */
.old-course {
  /* the line's height with its line above it: 54px in one row, two rows under 768px */
  --oc-line-h: var(--course-line-height);
  /* the keys' bar at a phone's foot (under 500px; taller in the installed app, below) */
  --oc-keys-h: var(--course-keys-bar-phone);
}
@media (max-width: 47.9375rem) {
  .old-course {
    --oc-line-h: var(--course-line-height-narrow);
  }
}
.old-course #views-keys-parent {
  position: static;
  z-index: 9998;
  margin: 0;
  border-block-start: 1px solid var(--site-navy-line);
  background: var(--site-navy);
  color: var(--site-navy-title);
}
.old-course #views-keys {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-3);
  min-block-size: 3.375rem;
  padding-inline: var(--space-5);
}
@media (max-width: 47.9375rem) {
  .old-course #views-keys {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: var(--space-4);
  }
}
/* «رئيسية» is a phone's only */
.old-course #views-keys > a {
  display: none;
}
.old-course .oc-line {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-inline-size: 0;
  min-block-size: 3rem;
}
.old-course .oc-line-name {
  flex: 0 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  color: var(--site-navy-title);
  font-size: 1rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.old-course .oc-line-sep {
  flex: none;
  inline-size: 1px;
  block-size: 1.375rem;
  background: var(--site-navy-edge);
}
.old-course .oc-line-live {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 1.75rem;
  padding-inline: 0.625rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--site-teal) 16%, transparent);
  color: var(--color-navy-link);
  font-size: var(--font-size-small);
  font-weight: 700;
  white-space: nowrap;
}
.old-course .oc-line-live[hidden],
.old-course .oc-line-sub[hidden] {
  display: none;
}
.old-course .oc-line-dot {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background: var(--site-teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--site-teal) 25%, transparent);
  animation: oc-line-pulse 1.6s ease-in-out infinite;
}
/* not begun: yellow, the dot still */
.old-course .oc-line-live.is-soon {
  background: color-mix(in srgb, var(--site-yellow) 14%, transparent);
  color: var(--site-yellow);
}
.old-course .oc-line-live.is-soon .oc-line-dot {
  background: var(--site-yellow);
  box-shadow: none;
  animation: none;
}
@keyframes oc-line-pulse {
  50% {
    opacity: 0.35;
  }
}
@media (prefers-reduced-motion: reduce) {
  .old-course .oc-line-dot {
    animation: none;
  }
}
.old-course .oc-line-sub {
  flex: 1 1 0;
  min-inline-size: 0;
  overflow: hidden;
  color: var(--site-navy-text);
  font-size: var(--font-size-small);
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* the keys' tablist: the pills in a row at the line's end, in the old markup's order (right to left) */
.old-course #views-keys > .oc-tabs {
  display: flex;
  gap: 0.375rem;
}
@media (max-width: 47.9375rem) {
  .old-course #views-keys > .oc-tabs {
    min-block-size: 3rem;
    align-items: center;
  }
}
.old-course #view2-key {
  order: 1;
}
.old-course #view3-key {
  order: 2;
}
.old-course #view1-key {
  order: 3;
}
.old-course #view4-key {
  order: 4;
}
.old-course #views-keys .view-key {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-block-size: 2.25rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--site-navy-line);
  border-radius: var(--radius-pill);
  background: var(--site-navy-card);
  color: var(--site-navy-text);
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
}
.old-course #views-keys .view-key.active {
  border-color: var(--site-navy-title);
  background: var(--site-navy-title);
  color: var(--site-navy);
  font-weight: 700;
}
@media (hover: hover) {
  .old-course #views-keys .view-key:not(.active):hover {
    border-color: var(--site-navy-edge);
    color: var(--site-navy-title);
  }
}
.old-course #views-keys .view-key span:not(.oc-key-icon) {
  display: block;
}
.old-course .oc-key-icon {
  display: inline-grid;
  flex: none;
  place-items: center;
}
.old-course .oc-key-icon > .icon {
  display: block;
  inline-size: 1.0625rem;
  block-size: 1.0625rem;
  margin: 0;
  stroke-width: 2;
}
.old-course #views-keys .view-key:focus-visible,
.old-course #views-keys > a:focus-visible {
  outline: 2px solid var(--site-focus);
  outline-offset: 2px;
}
@media (max-width: 31.1875rem) {
  .old-course #views-keys-parent {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    padding-block-end: var(--space-2);
  }
  .old-course #views-keys {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 0;
    min-block-size: 0;
    padding-inline: 0;
  }
  .old-course .oc-line {
    display: none;
  }
  .old-course #views-keys > .oc-tabs {
    display: contents;
  }
  .old-course #views-keys > a,
  .old-course #views-keys .view-key {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--space-1) / 2);
    min-block-size: 0;
    padding: var(--space-2) var(--space-1) 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--color-bar-faint);
    font-size: var(--font-size-small);
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
  }
  .old-course #views-keys > a {
    color: var(--site-navy-text);
  }
  .old-course #views-keys .view-key.active {
    background: none;
    color: var(--site-yellow);
  }
  .old-course .oc-key-icon,
  .old-course #views-keys > a > .oc-key-icon {
    inline-size: 3.25rem;
    block-size: 1.875rem;
    border-radius: var(--radius-pill);
  }
  .old-course .view-key.active > .oc-key-icon {
    background: var(--color-bar-chosen);
  }
  .old-course .oc-key-icon > .icon {
    inline-size: 1.375rem;
    block-size: 1.375rem;
  }
  .old-course #views-keys .view-key:focus-visible,
  .old-course #views-keys > a:focus-visible {
    outline-offset: -3px;
  }
}
@media (max-width: 31.1875rem) and (hover: hover) {
  .old-course #views-keys .view-key:not(.active):hover,
  .old-course #views-keys > a:hover {
    color: var(--site-navy-title);
  }
}
/* the installed app on a phone (the old room's keys did so, 30px under them): room under the keys for the phone's own
   bar, the room's height and the side's foot following it */
@media (max-width: 31.1875rem) and (display-mode: standalone), (max-width: 31.1875rem) and (display-mode: fullscreen) {
  .old-course {
    --oc-keys-h: calc(var(--course-keys-bar-phone) + var(--course-keys-installed));
  }
  .old-course #views-keys-parent {
    padding-block-end: calc(var(--space-2) + var(--course-keys-installed));
  }
}

/* ── The views (course/basic.css): the old box under the line (970px from 992px, 1170px from 1200px; the whole width for the
   room, which has no box and no gap under the line, the screen's height less the bars) ── */

.old-course #views-panes-parent {
  margin: 0;
  margin-block-start: var(--space-3);
  height: calc(100dvh - var(--nb-height, 0px) - var(--oc-line-h) - 1.625rem);
  display: flex;
  flex-direction: column;
  border: none;
}

@media (min-width: 992px) {
  .old-course #views-panes-parent {
    width: 970px;
    margin-inline: auto;
  }
}

@media (min-width: 1200px) {
  .old-course #views-panes-parent {
    width: 1170px;
  }
}

@media (max-width: 31.1875rem) {
  .old-course #views-panes-parent {
    margin-block-start: 0;
    height: calc(100dvh - var(--nb-height, 0px) - var(--view-keys-room));
  }
}

.old-course #views-panes-parent:has(> #view3.oc-room-on:not([hidden])) {
  width: auto;
  margin: 0;
  height: calc(100dvh - var(--nb-height, 0px) - var(--oc-line-h));
}

@media (max-width: 31.1875rem) {
  .old-course #views-panes-parent:has(> #view3.oc-room-on:not([hidden])) {
    height: calc(100dvh - var(--nb-height, 0px) - var(--oc-keys-h));
  }
}

.old-course #view1,
.old-course #view3,
.old-course #view4 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.old-course #view3 {
  min-block-size: 0;
}

.old-course .main-flex {
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: nowrap;
  flex-grow: 1;
  position: relative;
}

@media (min-width: 500px) {
  .old-course .main-flex {
    border-top: 1px solid var(--oc-border-color-high);
  }
}

@media (min-width: 768px) {
  .old-course .main-flex {
    border: 1px solid var(--oc-border-color-high);
  }
}

.old-course .right-side {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex-grow: 1;
  border: none !important;
  position: relative;
}

/* course/media_call.css: the material's views take the whole width at every size */
.old-course #view1 .main-flex .right-side,
.old-course #view4 .main-flex .right-side {
  width: 100%;
}

.old-course .right-side-main {
  z-index: 2;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.old-course .right-side-main-top {
  padding: 3px 0;
  padding-inline-end: 5px;
}

.old-course .right-side-main-top:empty {
  display: none;
}

/* the round toggler (course/basic.css, then course/students_list.css, which the old page loaded later); not the
   buttons of a list opening under one (the room's raised hands, part b1) */
.old-course .right-side-main-top button:where(:not(.dp-panel *)) {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none !important;
  float: inline-end;
  margin: 0 3px;
}

.old-course .rsb-toggler {
  float: inline-start !important;
}

/* ── The side panel (course/basic.css) ── */

.old-course .right-side-bar {
  background: var(--oc-background-color);
  transition: width, flex-basis;
  transition-duration: 0.2s;
  overflow: hidden;
  width: 248px;
  position: absolute;
  z-index: 9911;
  border: 0;
  box-shadow: -1px 1px 2px 1px #444d5829;
  outline: none;
  height: 100%;
}

.old-course .right-side-bar > div {
  min-width: 248px;
}

.old-course .right-side-bar.closed {
  width: 0;
  box-shadow: initial;
  flex-basis: 0;
  border: none;
}

.old-course .right-side-bar > .control {
  display: flex;
  cursor: pointer;
}

.old-course .right-side-bar > .control > button {
  height: 46px;
  padding: 0 10px;
  width: 100%;
  font-size: 20px;
  direction: ltr;
}

.old-course .right-side-bar > .control .close-button {
  order: 1;
  width: 50px;
  flex-shrink: 0;
  flex-grow: 0;
  text-decoration: none;
  display: inline-flex;
  color: #e7505a;
  justify-content: center;
  align-items: center;
  border-radius: 0;
}

.old-course .right-side-bar > .control > button.active,
.old-course .right-side-bar > .control > button.active:hover {
  background: #444d58;
  color: white;
  border-radius: 0;
}

/* the list's key's picture, mirrored (the old markup's style="transform: scale(-1,1)") */
.old-course .right-side-bar > .control > button > .oc-mirror {
  transform: scale(-1, 1);
}

.old-course .right-side:not(.rsb-closed) .rsb-transparent {
  position: absolute;
  inset: 0;
  background: #414d584d;
  z-index: 9910;
}

@media (min-width: 992px) {
  .old-course .right-side-bar {
    position: relative;
    box-shadow: 0 0 2px 1px #444d5829;
  }

  .old-course .right-side-bar.closed {
    width: 0;
    flex-basis: initial;
  }

  .old-course .right-side:not(.rsb-closed) .rsb-transparent,
  .old-course .right-side-bar > .control .close-button {
    display: none;
  }

  .old-course .right-side-main {
    width: calc(100% - 248px);
  }
}

/* ── The slider (course/contents_base.css, course/contents_manager.css) ── */

.old-course #cs-subjects,
.old-course #cs-exercises {
  display: flex;
  flex-grow: 1;
}

.old-course #cs-subjects .keys-toggler,
.old-course #cs-exercises .keys-toggler {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
}

.old-course .show-key {
  border-radius: 0;
}

.old-course .show-key.open {
  background: #444d58;
  color: white;
}

.old-course .contents-manager {
  background: var(--oc-background-color);
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  width: 100%;
}

.old-course .contents-manager > .topic-title {
  user-select: none;
  display: block;
  clear: both;
}

.old-course .contents-manager > .topic-title > .title {
  display: none !important;
}

.old-course .contents-manager > .contents-keys-parent {
  overflow: auto;
  display: none;
  border-top: 1px solid;
  border-color: var(--oc-border-color-high);
}

.old-course .contents-keys-parent > div:empty {
  display: none !important;
}

.old-course .contents-manager > .contents-keys-parent > .contents-keys {
  display: inline-grid;
}

.old-course .contents-manager > .contents-keys-parent > .contents-keys > .content-key {
  border-radius: 0;
  width: 40px;
  margin-inline-end: 5px;
  height: 35px;
  background: var(--oc-background-color-low);
  grid-row: 1 / span 1;
  margin-bottom: 0;
  cursor: pointer;
  text-align: center;
}

.old-course .contents-manager > .contents-keys-parent > .contents-keys > .content-key.active {
  background: var(--oc-border-color-high);
  color: var(--oc-color-high);
}

.old-course .contents-manager > .contents-keys-parent > .contents-keys > .content-key:hover {
  background: #b5b9bd;
}

.old-course .contents-manager > .contents-keys-parent > .contents-keys > .content-key.active:hover {
  border-color: #444d58;
  color: #444d58;
  background: white;
}

.old-course .contents-manager.show-contents-key .contents-keys-parent {
  display: block;
  margin: 0 4px;
  padding: 2px 0;
  margin-bottom: 3px;
}

.old-course .contents-manager.show-contents-key .screens-control {
  display: none;
}

.old-course .contents-manager > .contents-screens-parent {
  z-index: 1;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: auto;
}

.old-course .contents-manager.show-contents-key .contents-screens-parent {
  border-top: 1px solid;
  border-color: var(--oc-border-color-high);
}

.old-course .contents-manager > .contents-screens-parent:hover .navigator {
  background: #46424242 !important;
  opacity: 1 !important;
}

.old-course .contents-manager > .contents-screens-parent > .screens-control > .navigator {
  display: flex;
  height: 50px;
  justify-content: center;
  align-items: center;
}

.old-course .contents-manager > .contents-screens-parent > .screens-control > .navigator > * {
  border: none;
}

.old-course .contents-manager > .contents-screens-parent > .screens-control > .navigator > .disabled {
  background: #efefef;
}

.old-course .contents-manager > .contents-screens-parent > .screens-control > .navigator > .goto {
  font-size: 20px;
  width: 50px;
  background: transparent;
  text-decoration: none;
}

.old-course .contents-manager > .contents-screens-parent > .screens-control > .navigator > .goto:hover {
  background: transparent;
  transform: scale(1.2);
}

.old-course .contents-manager > .contents-screens-parent > .screens-control > .navigator > .goto-content {
  width: 40px;
  text-align: center;
  appearance: none;
  border-radius: 0;
  background: transparent;
  /* the old box's black: the same in light, and readable in dark (it was black on black) */
  color: var(--oc-color-high);
}

/* (the old box had no ring at all: here the mouse sees none, the keyboard its ring) */
.old-course .contents-manager > .contents-screens-parent > .screens-control > .navigator > .goto-content:focus:not(:focus-visible) {
  outline: none;
}

.old-course .contents-manager .content-nav-division {
  position: absolute;
  top: 200px;
  z-index: 400;
  width: 60px;
  inset-inline-end: 0;
}

.old-course .contents-manager .content-nav-division > .content-nav {
  opacity: 0.7;
  background: transparent;
  margin-bottom: 5px;
  border-radius: 10px;
  margin-inline-end: 5px;
  font-size: 30px;
  color: #656060;
  float: inline-end !important;
}

/* (part d) the app's chevron, 30px, the old box as wide as it was (the old glyph was narrower than the icon: less room
   at its sides) */
.old-course .contents-manager .content-nav-division > .content-nav {
  padding-inline: 6px;
}

.old-course .contents-manager .content-nav-division > .content-nav > svg {
  inline-size: 1.875rem;
  block-size: 1.875rem;
  vertical-align: middle;
}

/* › floats right in the old's 60px column, ‹ left (common/contents.js's style attributes) */
.old-course .contents-manager .content-nav-division > .content-right-button {
  float: inline-start !important;
}

.old-course .contents-manager .content-nav-division > .content-nav:enabled:active {
  opacity: 1;
  border: transparent;
}

.old-course .contents-datashow {
  background: var(--oc-background-color);
  flex-grow: 1;
  height: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
  position: relative;
}

.old-course .contents-datashow > div {
  padding: 10px;
}

.old-course .contents-datashow .contents-screens {
  text-align: initial;
  overflow-y: visible;
  flex-grow: 1;
}

.old-course .content-screen {
  padding-top: 10px;
  padding-bottom: 10px;
  overflow: auto;
}

.old-course .contents-datashow .content-screen > .data,
.old-course .contents-datashow .content-screen > .data * {
  user-select: text;
}

.old-course #cs-subjects .contents-datashow .content-screen > .data,
.old-course #cs-exercises .contents-datashow .content-screen > .data {
  max-width: 600px;
}

.old-course .contents-datashow .content-screen > .data > * {
  text-align: initial;
}

.old-course .contents-datashow .content-screen > .data canvas {
  width: 100%;
}

.old-course .fetch-progress-bar {
  width: 100%;
  padding: 5px;
}

.old-course .fetch-progress-bar:first-child {
  padding: 0 10px;
  margin-top: 10px;
  position: absolute;
}

.old-course .fetch-progress-bar > .bar {
  background: #eff3f8;
  position: relative;
  height: 3px;
}

.old-course .fetch-progress-bar > .bar > .stick {
  width: 0;
  background: #659be0;
  position: absolute;
  height: 3px;
  inset-inline-end: 0;
}

.old-course .fetch-progress-bar > .bar > .stick.going {
  animation: oc-loading 1.2s ease-out infinite;
}

@keyframes oc-loading {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

/* ── «المادة» and «تمارين» in the kit's look (Task indoor, part g; the owner's approval of 31 Oct 2026, the boards Course
   and Course-phone, frames ٣ to ٥): the old viewer's layout and every control in its place (Task 7.23 part a: the
   old page's course/material_index.css, contents_base.css and contents_manager.css, as above), its look the kit's, in
   the page's tokens: the screen's whole width, two cards 12px apart (the index 300px while it's open, the slide's), the
   slide a white sheet in both modes (tokens.css), the keys round, the choices as the practice page's. Under 992px the
   index is a drawer from the start over the page, dimmed, with its red ✕. The rules are scoped by the pane's id, so
   the names the room shares with them (above) stay as they are there. ── */

/* the pane the screen's whole width and height, as the room's */
.old-course #views-panes-parent:has(> :is(#view1, #view4):not([hidden])) {
  width: auto;
  margin: 0;
  height: calc(100dvh - var(--nb-height, 0px) - var(--oc-line-h));
}

@media (max-width: 31.1875rem) {
  .old-course #views-panes-parent:has(> :is(#view1, #view4):not([hidden])) {
    height: calc(100dvh - var(--nb-height, 0px) - var(--oc-keys-h));
  }
}

.old-course :is(#view1, #view4) old-material-viewer {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-block-size: 0;
  padding: var(--space-3);
  border: 0;
  color: var(--color-text);
}

/* the side and the main card: beside each other from 992px while the index is open; the index over the card under it */
.old-course :is(#view1, #view4) old-material-viewer .right-side {
  display: grid;
  flex: 1 1 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: var(--space-3);
  min-block-size: 0;
}

@media (min-width: 992px) {
  .old-course :is(#view1, #view4) old-material-viewer .right-side:not(.rsb-closed) {
    grid-template-columns: var(--course-index) minmax(0, 1fr);
  }
}

.old-course :is(#view1, #view4) old-material-viewer .right-side-main,
.old-course :is(#view1, #view4) old-material-viewer .right-side-bar {
  display: flex;
  flex-direction: column;
  inline-size: auto;
  block-size: auto;
  min-inline-size: 0;
  min-block-size: 0;
  width: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: none;
  overflow: hidden;
  transition: none;
}

.old-course :is(#view1, #view4) old-material-viewer .right-side-main {
  position: relative;
  z-index: auto;
}

.old-course :is(#view1, #view4) old-material-viewer .right-side-bar {
  position: relative;
  z-index: auto;
  color: var(--color-text);
}

.old-course :is(#view1, #view4) old-material-viewer .right-side-bar > div {
  min-inline-size: 0;
}

.old-course :is(#view1, #view4) old-material-viewer .right-side-bar.closed {
  display: none;
}

.old-course :is(#view1, #view4) old-material-viewer .rsb-transparent {
  display: none;
  background: var(--color-side-scrim);
}

@media (max-width: 991px) {
  .old-course :is(#view1, #view4) old-material-viewer .right-side:not(.rsb-closed) .rsb-transparent {
    display: block;
  }

  /* over the card from its start (the right), the veil dimming it */
  .old-course :is(#view1, #view4) old-material-viewer .right-side-bar {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 9911;
    inline-size: min(20rem, 100%);
    border-width: 0;
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    box-shadow: var(--shadow-raised);
  }
}

/* the index's head: the list's key on the board's navy, and under 992px the red ✕ at its end */
.old-course :is(#view1, #view4) old-material-viewer .right-side-bar > .control {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-block-size: 3rem;
  background: var(--color-cams);
  color: var(--color-cams-ink);
  cursor: default;
}

.old-course :is(#view1, #view4) old-material-viewer .right-side-bar > .control > button.active {
  flex: 1;
  inline-size: auto;
  block-size: 3rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  box-shadow: none !important;
  font-size: var(--font-size-body);
}

.old-course :is(#view1, #view4) old-material-viewer .right-side-bar > .control > button.active > .icon,
.old-course :is(#view1, #view4) old-material-viewer .right-side-bar > .control > button.active > svg {
  inline-size: 1.375rem;
  block-size: 1.375rem;
}

.old-course :is(#view1, #view4) old-material-viewer .right-side-bar > .control > button.active > .count:empty {
  display: none;
}

.old-course :is(#view1, #view4) old-material-viewer .right-side-bar > .control .close-button {
  position: absolute;
  inset-inline-end: 0.375rem;
  inset-block-start: 50%;
  translate: 0 -50%;
  display: none;
  align-items: center;
  justify-content: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-danger-fill);
  color: var(--color-on-fill);
  line-height: 1;
  box-shadow: none !important;
}

@media (max-width: 991px) {
  .old-course :is(#view1, #view4) old-material-viewer .right-side-bar > .control .close-button {
    display: inline-flex;
  }
}

.old-course :is(#view1, #view4) old-material-viewer .right-side-bar > .control .close-button > svg {
  inline-size: 1.125rem;
  block-size: 1.125rem;
}

/* the index: its tabs (the sections), «أكملت … من … دروس» and its meter, the section's title, then its chapters and their
   lessons */
.old-course :is(#view1, #view4) old-material-viewer .cmIndex {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  inline-size: 100%;
  min-block-size: 0;
}

.old-course :is(#view1, #view4) old-material-viewer .cmIndex > .bkb {
  flex: none;
  padding: 0.625rem var(--space-3);
  border-block-end: 1px solid var(--color-rule);
  overflow-x: auto;
}

.old-course :is(#view1, #view4) old-material-viewer .bkb > .nav-tabs {
  display: flex;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}

.old-course :is(#view1, #view4) old-material-viewer .bkb > .nav-tabs > li {
  flex: none;
  cursor: pointer;
}

.old-course :is(#view1, #view4) old-material-viewer .bkb > .nav-tabs > li > a {
  display: grid;
  place-items: center;
  min-inline-size: 2.875rem;
  block-size: 2.375rem;
  padding-inline: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-raised);
  color: var(--color-quiet);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.old-course :is(#view1, #view4) old-material-viewer .bkb > .nav-tabs > li.active > a {
  border-color: var(--color-staff);
  background: var(--color-staff);
  color: var(--color-on-staff);
}

.old-course :is(#view1, #view4) old-material-viewer .cmIndex > .bpb {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--space-3);
  min-block-size: 0;
  padding: var(--space-3) var(--space-3) var(--space-4);
  overflow: auto;
}

.old-course :is(#view1, #view4) old-material-viewer .bpb > .block {
  display: none;
}

.old-course :is(#view1, #view4) old-material-viewer .bpb > .block.shown {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.old-course :is(#view1, #view4) old-material-viewer .oc-done {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  color: var(--color-quiet);
  font-size: var(--font-size-small);
  font-weight: 700;
  text-align: start;
}

.old-course :is(#view1, #view4) old-material-viewer .oc-meter {
  appearance: none;
  display: block;
  inline-size: 100%;
  block-size: var(--meter-height);
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-track);
}

.old-course :is(#view1, #view4) old-material-viewer .oc-meter::-webkit-progress-bar {
  background: var(--color-track);
}

.old-course :is(#view1, #view4) old-material-viewer .oc-meter::-webkit-progress-value {
  border-radius: var(--radius-pill);
  background: var(--color-on);
}

.old-course :is(#view1, #view4) old-material-viewer .oc-meter::-moz-progress-bar {
  border-radius: var(--radius-pill);
  background: var(--color-on);
}

@media (forced-colors: active) {
  .old-course :is(#view1, #view4) old-material-viewer .oc-meter::-webkit-progress-value {
    background: Highlight;
  }

  .old-course :is(#view1, #view4) old-material-viewer .oc-meter::-moz-progress-bar {
    background: Highlight;
  }
}

.old-course :is(#view1, #view4) old-material-viewer .block > .head {
  padding-block-end: var(--space-2);
  border-block-end: 1px solid var(--color-rule);
}

.old-course :is(#view1, #view4) old-material-viewer .block > .head > .title {
  display: block;
  color: var(--color-text);
  font-size: var(--font-size-card-title);
  font-weight: 700;
  line-height: 1.6;
}

.old-course :is(#view1, #view4) old-material-viewer .items-parent {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.old-course :is(#view1, #view4) old-material-viewer .item {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-inner);
  background: var(--color-surface);
  color: var(--color-text);
  overflow: hidden;
}

.old-course :is(#view1, #view4) old-material-viewer .item:has(> .links:not([hidden])) {
  border-color: var(--color-border);
  background: var(--color-raised);
}

.old-course :is(#view1, #view4) old-material-viewer .item > .head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-block-size: 3.25rem;
  padding: 0.375rem 0.625rem;
  font-weight: 700;
  cursor: pointer;
}

.old-course :is(#view1, #view4) old-material-viewer .item:not(.has-topics) > .head {
  cursor: default;
}

.old-course :is(#view1, #view4) old-material-viewer .item-serial {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 1.875rem;
  block-size: 1.875rem;
  border-radius: 50%;
  background: var(--color-staff);
  color: var(--color-on-staff);
  font-size: var(--font-size-small);
  line-height: 1;
}

.old-course :is(#view1, #view4) old-material-viewer .item > .head > .title {
  flex: 1;
  min-inline-size: 0;
}

.old-course :is(#view1, #view4) old-material-viewer .item-selector {
  display: inline-flex;
  color: var(--color-muted);
}

.old-course :is(#view1, #view4) old-material-viewer .item-selector > svg {
  inline-size: 1.125rem;
  block-size: 1.125rem;
}

.old-course :is(#view1, #view4) old-material-viewer .links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 var(--space-2) var(--space-2);
}

.old-course :is(#view1, #view4) old-material-viewer .link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.625rem;
  min-block-size: 2.875rem;
  padding: 0.375rem var(--space-2);
  border-radius: var(--radius-small);
  color: var(--color-text);
  line-height: 1.6;
  cursor: pointer;
}

.old-course :is(#view1, #view4) old-material-viewer .link.active {
  background: var(--color-current);
  font-weight: 700;
}

/* the lesson shown: its number in the open navy, as the open tab's */
.old-course :is(#view1, #view4) old-material-viewer .link.active > .serial {
  border-color: var(--color-staff);
  background: var(--color-staff);
  color: var(--color-on-staff);
}

@media (hover: hover) {
  .old-course :is(#view1, #view4) old-material-viewer .link:not(.active):not(.oc-closed):hover {
    background: var(--color-surface);
  }
}

.old-course :is(#view1, #view4) old-material-viewer .link > .serial {
  position: static;
  display: grid;
  place-items: center;
  inline-size: 1.75rem;
  min-inline-size: 0;
  block-size: 1.75rem;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  background: var(--color-surface);
  font-size: var(--font-size-small);
  font-weight: 700;
  line-height: 1;
}

.old-course :is(#view1, #view4) old-material-viewer .link > .title {
  min-inline-size: 0;
}

.old-course :is(#view1, #view4) old-material-viewer .link > .oc-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-block-size: var(--chip-height);
  margin: 0;
  padding-inline: 0.5625rem;
  border-radius: var(--radius-pill);
  background: var(--color-chip-yellow);
  color: var(--color-chip-yellow-text);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.old-course :is(#view1, #view4) old-material-viewer .link > .oc-mark-done {
  background: var(--color-chip-teal);
  color: var(--color-chip-teal-text);
}

.old-course :is(#view1, #view4) old-material-viewer .link > .oc-mark > svg {
  inline-size: 0.8125rem;
  block-size: 0.8125rem;
  stroke-width: 2.5;
}

.old-course :is(#view1, #view4) old-material-viewer .link > .oc-opens {
  display: block;
  grid-column: 2 / -1;
  margin: 0;
  color: var(--color-muted);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.6;
}

/* a lesson not yet open: dimmed (its words still read well: the muted colour, 4.5:1 at least), and says when it opens */
.old-course :is(#view1, #view4) old-material-viewer .link.oc-closed {
  cursor: not-allowed;
}

.old-course :is(#view1, #view4) old-material-viewer .link.oc-closed > .serial {
  border-color: var(--color-rule);
  color: var(--color-muted);
}

.old-course :is(#view1, #view4) old-material-viewer .link.oc-closed > .title {
  color: var(--color-muted);
}

/* the strip over the slide: the index's toggler at its start (the right), «…» at its end, 40px circles */
.old-course :is(#view1, #view4) old-material-viewer .right-side-main-top {
  display: flex;
  flex: none;
  align-items: center;
  min-block-size: 3.625rem;
  padding: var(--space-2) var(--space-3);
  border-block-end: 1px solid var(--color-rule);
}

.old-course :is(#view1, #view4) old-material-viewer .keys-toggler {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  block-size: 3.625rem;
  padding-inline: var(--space-3);
  pointer-events: none;
}

.old-course :is(#view1, #view4) old-material-viewer :is(.rsb-toggler, .show-key) {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  inline-size: var(--control-height);
  block-size: var(--control-height);
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: none !important;
  color: var(--color-text);
  float: none !important;
  text-decoration: none !important;
  pointer-events: auto;
}

.old-course :is(#view1, #view4) old-material-viewer :is(.rsb-toggler, .show-key) > svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

@media (hover: hover) {
  .old-course :is(#view1, #view4) old-material-viewer :is(.rsb-toggler, .show-key):hover {
    background: var(--color-raised);
    color: var(--color-text);
  }
}

.old-course :is(#view1, #view4) old-material-viewer :is(.rsb-toggler, .show-key):is([aria-expanded="true"], .open),
.old-course :is(#view1, #view4) old-material-viewer :is(.rsb-toggler, .show-key):is([aria-expanded="true"], .open):hover {
  border-color: var(--color-staff);
  background: var(--color-staff);
  color: var(--color-on-staff);
}

.old-course :is(#view1, #view4) old-material-viewer :is(.rsb-toggler, .show-key):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* the slide's numbers, in a row of keys under the strip (the pager gives way to them, as the old page's) */
.old-course :is(#view1, #view4) old-material-viewer #slider {
  display: flex;
  flex: 1 1 0;
  min-block-size: 0;
  min-inline-size: 0;
}

.old-course :is(#view1, #view4) old-material-viewer .contents-manager {
  flex: 1 1 0;
  width: auto;
  min-inline-size: 0;
  min-block-size: 0;
  background: none;
}

.old-course :is(#view1, #view4) old-material-viewer .contents-manager > .contents-keys-parent {
  border-block-start: 0;
}

.old-course :is(#view1, #view4) old-material-viewer .contents-manager.show-contents-key > .contents-keys-parent {
  margin: 0;
  padding: 0.625rem var(--space-3);
  border-block-end: 1px solid var(--color-rule);
}

.old-course :is(#view1, #view4) old-material-viewer .contents-manager > .contents-keys-parent > .contents-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.old-course :is(#view1, #view4) old-material-viewer .contents-manager > .contents-keys-parent > .contents-keys > .content-key {
  flex: none;
  min-inline-size: var(--control-height);
  width: auto;
  block-size: 2.375rem;
  margin: 0;
  padding: 0 0.625rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-raised);
  color: var(--color-quiet);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.old-course :is(#view1, #view4) old-material-viewer .contents-manager > .contents-keys-parent > .contents-keys > .content-key.active,
.old-course :is(#view1, #view4) old-material-viewer .contents-manager > .contents-keys-parent > .contents-keys > .content-key.active:hover {
  border-color: var(--color-staff);
  background: var(--color-staff);
  color: var(--color-on-staff);
}

@media (hover: hover) {
  .old-course :is(#view1, #view4) old-material-viewer .contents-manager > .contents-keys-parent > .contents-keys > .content-key:not(.active):hover {
    background: var(--color-surface);
    color: var(--color-text);
  }
}

.old-course :is(#view1, #view4) old-material-viewer .contents-manager > .contents-keys-parent > .contents-keys > .content-key:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* the stage: the page's pale behind the sheet, the pager at its top, the sheet's place under it, the big ‹ › at its end */
.old-course :is(#view1, #view4) old-material-viewer .contents-manager > .contents-screens-parent {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: stretch;
  gap: 0.875rem;
  min-block-size: 0;
  padding: var(--space-4) 4.5rem 0;
  border: 0;
  background: var(--color-stage);
  overflow: hidden;
  z-index: auto;
}

.old-course :is(#view1, #view4) old-material-viewer .screens-control {
  display: flex;
  flex: none;
  justify-content: center;
}

/* the pager: one pill, the steps and the number, then «إعادة قراءة الشريحة» after a line */
.old-course :is(#view1, #view4) old-material-viewer .contents-manager > .contents-screens-parent > .screens-control > .navigator {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  block-size: auto;
  padding: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: var(--shadow-button);
}

.old-course :is(#view1, #view4) old-material-viewer .contents-manager > .contents-screens-parent:hover > .screens-control > .navigator {
  /* (the old page's translucent grey on the pager while the pointer was over the slide: no longer) */
  background: var(--color-surface) !important;
  opacity: 1 !important;
}

.old-course :is(#view1, #view4) old-material-viewer .contents-manager > .contents-screens-parent > .screens-control > .navigator > .goto {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  width: 2.25rem;
  block-size: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--color-text);
  font-size: var(--font-size-body);
  text-decoration: none;
}

.old-course :is(#view1, #view4) old-material-viewer .navigator > .goto > svg {
  inline-size: 1.1875rem;
  block-size: 1.1875rem;
}

@media (hover: hover) {
  .old-course :is(#view1, #view4) old-material-viewer .contents-manager > .contents-screens-parent > .screens-control > .navigator > .goto:not(:disabled):hover {
    background: var(--color-raised);
    transform: none;
  }
}

.old-course :is(#view1, #view4) old-material-viewer .contents-manager > .contents-screens-parent > .screens-control > .navigator > .goto:focus-visible,
.old-course :is(#view1, #view4) old-material-viewer .contents-manager > .contents-screens-parent > .screens-control > .navigator > .goto-content:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

/* the step not to take now: dimmed */
.old-course :is(#view1, #view4) old-material-viewer .contents-manager > .contents-screens-parent > .screens-control > .navigator > .goto:disabled {
  background: none;
  opacity: 0.35;
  cursor: default;
}

/* a line before «إعادة قراءة الشريحة», the last */
.old-course :is(#view1, #view4) old-material-viewer .contents-manager > .contents-screens-parent > .screens-control > .navigator > .goto:last-child {
  margin-inline-start: 0.5625rem;
}

.old-course :is(#view1, #view4) old-material-viewer .navigator > .goto:last-child::before {
  content: "";
  position: absolute;
  inset-block: 0.5rem;
  inset-inline-start: -0.3125rem;
  inline-size: 1px;
  background: var(--color-rule);
}

.old-course :is(#view1, #view4) old-material-viewer .contents-manager > .contents-screens-parent > .screens-control > .navigator > .goto-content {
  inline-size: 2.875rem;
  width: 2.875rem;
  block-size: 2rem;
  margin-inline: var(--space-1);
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-raised);
  color: var(--color-text);
  font: inherit;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.old-course :is(#view1, #view4) old-material-viewer .contents-manager > .contents-screens-parent > .screens-control > .navigator > .goto-content:disabled {
  opacity: 0.35;
}

/* the slide's place: the sheet, the lesson's notes, the loading bar */
.old-course :is(#view1, #view4) old-material-viewer .contents-datashow {
  flex: 1 1 0;
  align-items: stretch;
  min-block-size: 0;
  padding: 0 0 var(--space-5);
  background: none;
  overflow: auto;
}

.old-course :is(#view1, #view4) old-material-viewer .contents-datashow > div {
  padding: 0;
}

.old-course :is(#view1, #view4) old-material-viewer .fetch-progress-bar > .bar {
  background: var(--color-track);
}

.old-course :is(#view1, #view4) old-material-viewer .fetch-progress-bar > .bar > .stick {
  background: var(--color-on);
}

.old-course :is(#view1, #view4) old-material-viewer .contents-datashow .contents-screens {
  flex-grow: 0;
}

/* the sheet: white paper (the light tokens inside it: tokens.css), 600px at most, its drop under it */
.old-course :is(#view1, #view4) old-material-viewer .contents-datashow .content-screen {
  inline-size: 100%;
  max-inline-size: var(--course-sheet);
  margin-inline: auto;
  padding: 1.375rem var(--space-5) 1.125rem;
  border-radius: var(--radius-inner);
  background: var(--color-paper);
  color: var(--color-text);
  box-shadow: var(--shadow-sheet);
  overflow: auto;
}

.old-course :is(#view1, #view4) old-material-viewer .contents-datashow .content-screen > .data {
  max-inline-size: none;
}

/* «بلاغ عن مشكلة» under a rule at the sheet's foot */
.old-course :is(#view1, #view4) old-material-viewer .content-screen > .data:has(~ .oc-problem) {
  margin-block-end: var(--space-3);
  padding-block-end: var(--space-3);
  border-block-end: 1px solid var(--color-rule);
}

.old-course :is(#view1, #view4) old-material-viewer .content-screen > .oc-problem {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-block-size: var(--control-height-small);
  padding: 0 0.5rem;
  border: 0;
  border-radius: var(--radius-small);
  background: none;
  color: var(--color-link);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}

.old-course :is(#view1, #view4) old-material-viewer .content-screen > .oc-problem > svg {
  inline-size: 1rem;
  block-size: 1rem;
}

@media (hover: hover) {
  .old-course :is(#view1, #view4) old-material-viewer .content-screen > .oc-problem:hover {
    background: var(--color-raised);
    color: var(--color-link);
    text-decoration: none;
  }
}

/* what's said in the sheet's place: a topic with nothing to read here, or one that couldn't be read */
.old-course :is(#view1, #view4) old-material-viewer .oc-topic-note {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0;
}

.old-course :is(#view1, #view4) old-material-viewer .oc-note {
  margin: 0;
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius);
  background: var(--color-info-soft);
  color: var(--color-text);
  font-size: 0.875rem;
  line-height: 1.8;
}

.old-course :is(#view1, #view4) old-material-viewer .oc-note .btn-link {
  padding: 0 0.25rem;
  color: var(--color-link);
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
  vertical-align: baseline;
}

.old-course :is(#view1, #view4) old-material-viewer .content-screen > .oc-note {
  margin-block-start: var(--space-3);
}

/* the big ‹ › at the stage's end (the left), one above the other, › (the previous) first, centred on its height */
.old-course :is(#view1, #view4) old-material-viewer .contents-manager .content-nav-division {
  position: absolute;
  inset-block-start: 50%;
  inset-inline: auto var(--space-4);
  translate: 0 -50%;
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-2);
  inline-size: 2.875rem;
  width: 2.875rem;
  z-index: 3;
  pointer-events: none;
}

.old-course :is(#view1, #view4) old-material-viewer .contents-manager .content-nav-division > .content-nav {
  display: grid;
  place-items: center;
  inline-size: 2.875rem;
  block-size: 3.5rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-inner);
  background: var(--color-surface);
  box-shadow: none !important;
  color: var(--color-text);
  float: none !important;
  opacity: 1;
  pointer-events: auto;
}

/* an arrow the viewer hides (no slide shown) is gone: the kit's display doesn't bring it back; at the first and the last
   slide it is off, not gone (the owner's words of 31 Oct 2026) */
.old-course :is(#view1, #view4) old-material-viewer .contents-manager .content-nav-division > .content-nav[hidden] {
  display: none;
}

.old-course :is(#view1, #view4) old-material-viewer .contents-manager .content-nav-division > .content-nav > svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

@media (hover: hover) {
  .old-course :is(#view1, #view4) old-material-viewer .contents-manager .content-nav-division > .content-nav:hover {
    border-color: var(--color-border) !important;
    background: var(--color-raised) !important;
    color: var(--color-text) !important;
  }
}

.old-course :is(#view1, #view4) old-material-viewer .contents-manager .content-nav-division > .content-nav:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* a question on the sheet: its words, its choices (a hidden radio and a label each: the round letter, then the choice),
   «أجب» and «أظهر الإجابة» under them, and «خطوات الحل» */
.old-course :is(#view1, #view4) old-material-viewer .question-view {
  color: var(--color-text);
  font-size: var(--font-size-body);
  line-height: var(--line-height);
}

.old-course :is(#view1, #view4) old-material-viewer .oc-question-words {
  margin-block-end: var(--space-4);
  font-size: var(--font-size-lead);
  font-weight: 700;
  line-height: 1.9;
}

.old-course :is(#view1, #view4) old-material-viewer .question-view .options-table {
  display: grid;
  gap: 0.625rem;
  inline-size: 100%;
  margin: 0 0 var(--space-3);
  padding: 0;
  border: 0;
}

.old-course :is(#view1, #view4) old-material-viewer .question-view .options-table,
.old-course :is(#view1, #view4) old-material-viewer .question-view .options-table * {
  user-select: none;
}

.old-course :is(#view1, #view4) old-material-viewer .question-view .options-table input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.old-course :is(#view1, #view4) old-material-viewer .question-view .options-table label {
  display: block;
  inline-size: 100%;
  width: 100%;
  min-block-size: 3.125rem;
  margin: 0;
  padding: 0.25rem var(--space-3);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-inner);
  background: var(--color-paper);
  box-shadow: 0 var(--drop-card) 0 var(--color-drop);
  color: var(--color-text);
  font-weight: 700;
  cursor: pointer;
}

@media (hover: hover) {
  .old-course :is(#view1, #view4) old-material-viewer .question-view .options-table input:not(:disabled) + label:hover {
    border-color: var(--color-quiet);
  }
}

.old-course :is(#view1, #view4) old-material-viewer .question-view .options-table input:focus-visible + label {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.old-course :is(#view1, #view4) old-material-viewer .question-view .option-table {
  inline-size: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.old-course :is(#view1, #view4) old-material-viewer .question-view .option-table > tbody > tr > td {
  padding: 0;
  vertical-align: middle;
}

.old-course :is(#view1, #view4) old-material-viewer .question-view .option-table > tbody > tr > td:nth-child(1) {
  inline-size: 2.625rem;
  min-inline-size: 0;
}

.old-course :is(#view1, #view4) old-material-viewer .question-view .option-table > tbody > tr > td:nth-child(2) {
  width: 100%;
  padding-inline-start: 0;
}

.old-course :is(#view1, #view4) old-material-viewer .question-view .option-table .option-outline {
  display: inline-grid;
  padding: 0;
  border: 0;
  border-radius: 50% !important;
  vertical-align: middle;
}

.old-course :is(#view1, #view4) old-material-viewer .question-view .option-table .option-letter {
  display: grid;
  place-items: center;
  inline-size: var(--letter);
  width: var(--letter);
  block-size: var(--letter);
  height: var(--letter);
  border: 0;
  border-radius: 50% !important;
  background: var(--color-chip-grey);
  color: var(--color-chip-grey-text);
  font-size: var(--font-size-body);
  font-weight: 700;
  line-height: 1;
}

.old-course :is(#view1, #view4) old-material-viewer .question-view .option-table .option-value {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  vertical-align: middle;
}

.old-course :is(#view1, #view4) old-material-viewer .question-view .option-value > .doc-view {
  flex: 1;
  align-self: center;
  min-inline-size: 0;
  margin: 0;
  /* room for the text's own box (it is 2px taller than its line), and nothing to scroll upright: a box that scrolls is a
     stop of its own for the keyboard */
  padding-block: 0.25rem;
  overflow-y: hidden;
}

.old-course :is(#view1, #view4) old-material-viewer .question-view .option-value > .doc-view .doc-content > :first-child {
  margin-block-start: 0;
}

.old-course :is(#view1, #view4) old-material-viewer .question-view .option-value > .doc-view .doc-content > :last-child {
  margin-block-end: 0;
}

.old-course :is(#view1, #view4) old-material-viewer .question-view .option-value > .oc-answer-mark {
  flex: none;
  inline-size: 1.375rem;
  block-size: 1.375rem;
  margin-inline-start: auto;
  stroke-width: 2.5;
}

/* a choice picked: its border and letter in the text's colour */
.old-course :is(#view1, #view4) old-material-viewer .question-view .options-table label:has(.option-outline.active) {
  border-color: var(--color-text);
}

.old-course :is(#view1, #view4) old-material-viewer .question-view .option-table .option-outline.active .option-letter {
  background: var(--color-text);
  color: var(--color-paper);
}

/* right: the team's colour; wrong: red; and, once settled, the others dimmed (their words still read well) */
.old-course :is(#view1, #view4) old-material-viewer .question-view .options-table label.correct-answer,
.old-course :is(#view1, #view4) old-material-viewer .question-view .options-table label.wrong-answer {
  color: var(--color-on-fill);
}

.old-course :is(#view1, #view4) old-material-viewer .question-view .options-table label.correct-answer {
  border-color: var(--color-correct-fill);
  background: var(--color-correct-fill);
  box-shadow: 0 var(--drop-card) 0 var(--color-correct-drop);
}

.old-course :is(#view1, #view4) old-material-viewer .question-view .options-table label.wrong-answer {
  border-color: var(--color-danger-fill);
  background: var(--color-danger-fill);
  box-shadow: 0 var(--drop-card) 0 var(--color-danger-drop);
}

/* the letter on a fill: a disc of the fill's own darker colour (the white letter reads 6:1 or more) */
.old-course :is(#view1, #view4) old-material-viewer .question-view .correct-answer .option-letter {
  background: var(--color-correct-drop);
  color: var(--color-on-fill);
}

.old-course :is(#view1, #view4) old-material-viewer .question-view .wrong-answer .option-letter {
  background: var(--color-danger-drop);
  color: var(--color-on-fill);
}

.old-course :is(#view1, #view4) old-material-viewer .question-view .correct-answer .doc-content,
.old-course :is(#view1, #view4) old-material-viewer .question-view .wrong-answer .doc-content {
  --doc-text: var(--color-on-fill);
}

.old-course :is(#view1, #view4) old-material-viewer .question-view .options-table input:disabled + label:not(.correct-answer, .wrong-answer) {
  border-color: transparent;
  background: var(--color-raised);
  box-shadow: 0 var(--drop-card) 0 var(--color-rule);
  color: var(--color-muted);
  cursor: default;
}

.old-course :is(#view1, #view4) old-material-viewer .question-view .options-table input:disabled + label:not(.correct-answer, .wrong-answer) .doc-content {
  --doc-text: var(--color-muted);
}

/* «أجب» and «أظهر الإجابة» at the end of their row, in the order the keyboard meets them (as before: the review of
   part g); what's said of the answer above them */
.old-course :is(#view1, #view4) old-material-viewer .contents-manager .answer-button-parent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2) var(--space-3);
  margin-block-start: var(--space-3);
  padding: 0;
  border: 0;
}

.old-course :is(#view1, #view4) old-material-viewer .answer-button-parent > .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: auto;
  width: auto;
  min-block-size: 2.75rem;
  margin: 0;
  padding-inline: var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--font-size-body);
  font-weight: 700;
  line-height: 1.4;
}

.old-course :is(#view1, #view4) old-material-viewer .answer-button-parent > .answer-button {
  border-color: var(--color-primary);
  background: var(--color-primary);
  box-shadow: var(--shadow-primary) !important;
  color: var(--color-on-primary);
}

.old-course :is(#view1, #view4) old-material-viewer .answer-button-parent > .answer-button:is(:hover, :focus, :active):not(:disabled) {
  border-color: var(--color-primary-strong);
  background: var(--color-primary-strong);
  color: var(--color-on-primary);
}

.old-course :is(#view1, #view4) old-material-viewer .answer-button-parent > .answer-button:disabled {
  opacity: 0.55;
  box-shadow: none !important;
  cursor: not-allowed;
}

.old-course :is(#view1, #view4) old-material-viewer .answer-button-parent > .oc-show-answer {
  min-block-size: var(--control-height-small);
  margin-inline-start: 0;
  padding-inline: var(--space-3);
  border-radius: var(--radius-small);
  background: none;
  color: var(--color-link);
  font-size: 0.875rem;
}

@media (hover: hover) {
  .old-course :is(#view1, #view4) old-material-viewer .answer-button-parent > .oc-show-answer:not(:disabled):hover {
    background: var(--color-raised);
    color: var(--color-link);
    text-decoration: none;
  }
}

.old-course :is(#view1, #view4) old-material-viewer .answer-button-parent > .answer-button:focus-visible,
.old-course :is(#view1, #view4) old-material-viewer .answer-button-parent > .oc-show-answer:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.old-course :is(#view1, #view4) old-material-viewer .answer-button-parent > .oc-answer-line,
.old-course :is(#view1, #view4) old-material-viewer .answer-button-parent > .sr-only:not(:empty) {
  position: static;
  order: -1;
  flex: 1 0 100%;
  inline-size: auto;
  block-size: auto;
  margin: 0;
  padding: 0.625rem 0.875rem;
  clip-path: none;
  overflow: visible;
  border-radius: var(--radius);
  font-size: 0.875rem;
  line-height: 1.8;
  white-space: normal;
}

.old-course :is(#view1, #view4) old-material-viewer .answer-button-parent > .oc-answer-line {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

/* (the owner's choice of 31 Oct 2026: the Course board) the note's mark before its words; hidden, it stays hidden */
.old-course :is(#view1, #view4) old-material-viewer .answer-button-parent > .oc-answer-line:not([hidden]) {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.old-course :is(#view1, #view4) old-material-viewer .answer-button-parent > .oc-answer-line > .icon {
  flex: none;
  inline-size: 1.125rem;
  block-size: 1.125rem;
}

.old-course :is(#view1, #view4) old-material-viewer .answer-button-parent > .sr-only:not(:empty) {
  background: var(--color-success-soft);
  color: var(--color-chip-teal-text);
}

.old-course :is(#view1, #view4) old-material-viewer .answer-button-parent > .sr-only:empty {
  display: none;
}

/* «خطوات الحل» in a box of its own */
.old-course :is(#view1, #view4) old-material-viewer .question-answer-explain {
  margin-block-start: var(--space-4);
  padding: 0.875rem var(--space-4);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-inner);
  background: var(--color-raised);
  color: var(--color-text);
}

.old-course :is(#view1, #view4) old-material-viewer .question-answer-explain:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.old-course :is(#view1, #view4) old-material-viewer .question-answer-explain > .title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: 0.375rem;
  font-size: var(--font-size-body);
  font-weight: 700;
}

.old-course :is(#view1, #view4) old-material-viewer .question-answer-explain > .title > svg {
  flex: none;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  color: var(--color-on-text);
}

/* narrow screens: under 768px the stage keeps 56px at its end for the big ‹ ›, nearer the edge; on a phone (under 500px)
   the cards are 10px from the edge, the index between the bars over the page, dimmed, its red ✕ */
@media (max-width: 47.9375rem) {
  .old-course :is(#view1, #view4) old-material-viewer .contents-manager > .contents-screens-parent {
    padding: 0.875rem var(--space-3) var(--space-4);
    padding-inline-end: 3.5rem;
  }

  .old-course :is(#view1, #view4) old-material-viewer .contents-manager .content-nav-division {
    inset-inline-end: 0.5rem;
    inline-size: 2.5rem;
    width: 2.5rem;
  }

  .old-course :is(#view1, #view4) old-material-viewer .contents-manager .content-nav-division > .content-nav {
    inline-size: 2.5rem;
  }

  .old-course :is(#view1, #view4) old-material-viewer .contents-datashow .content-screen {
    padding: 1.125rem var(--space-4) var(--space-4);
  }
}

@media (max-width: 31.1875rem) {
  .old-course :is(#view1, #view4) old-material-viewer {
    padding: 0.625rem;
  }

  .old-course :is(#view1, #view4) old-material-viewer .right-side-bar {
    position: fixed;
    inset-block: var(--nb-height, 0px) var(--oc-keys-h);
    border-radius: 0;
    border-start-end-radius: var(--radius-card);
    border-end-end-radius: var(--radius-card);
  }

  .old-course :is(#view1, #view4) old-material-viewer .right-side:not(.rsb-closed) .rsb-transparent {
    position: fixed;
    inset-block: var(--nb-height, 0px) var(--oc-keys-h);
  }

  .old-course :is(#view1, #view4) old-material-viewer .links {
    padding-inline: 0.375rem;
  }

  .old-course :is(#view1, #view4) old-material-viewer .link {
    column-gap: var(--space-2);
    padding-inline: 0.375rem;
    font-size: 0.875rem;
  }

  .old-course :is(#view1, #view4) old-material-viewer .bpb {
    padding-inline: 0.625rem;
  }
}

@media (max-width: 22.5rem) {
  .old-course :is(#view1, #view4) old-material-viewer .contents-manager > .contents-screens-parent > .screens-control > .navigator > .goto {
    inline-size: 2rem;
    width: 2rem;
    block-size: 2rem;
  }

  .old-course :is(#view1, #view4) old-material-viewer .contents-manager > .contents-screens-parent > .screens-control > .navigator > .goto-content {
    inline-size: 2.5rem;
    width: 2.5rem;
  }
}

.old-course a.btn {
  text-decoration: none;
}

/* «القاعة» in part a: the lectures, their doors and «عن الدورة», until the class itself comes into it (part b) */
.old-course #view3.oc-room {
  gap: 10px;
  padding: 10px 0;
  overflow: auto;
}

.old-course .oc-about {
  margin: 0;
}

/* ── «القاعة» in the kit's look (Task indoor, part f; the owner's approval of 31 Oct 2026): the old room's layout and every
   control in its place (Task 7.23, parts b1 and b2: the old #view3 from course/basic.css, media_call.css, students_list.css
   and contents_base.css), its look the kit's, in the page's tokens: the screen's whole width, three cards 12px apart (the
   side 300px when it's open, the middle, the cameras' column 240px from 1200px, navy; under 1200px the cameras across the
   top), a slide white paper in both modes, the round buttons 40px circles. The class's own parts keep Task 7.22's frame
   (classroom.css) under these. ── */

/* the pane holds the room alone while a class is open (its lectures' list hidden) */
.old-course #view3.oc-room-on {
  gap: 0;
  padding: 0;
  overflow: visible;
}

.old-course .oc-room-list[hidden] {
  display: none;
}

.old-course .oc-room-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.old-course lecture-page.is-room {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-block-size: 0;
}

/* on the call (media_call.css's body.on-call): the site's top bar and the views bar put away, the room the screen's
   whole height */
app-shell:has(lecture-page.is-room.is-on-call) > :is(nav-bar, .app-header) {
  display: none;
}

:root:has(app-shell lecture-page.is-room.is-on-call) {
  --nb-height: 0px;
}

.old-course:has(lecture-page.is-room.is-on-call) #views-keys-parent {
  display: none;
}

.old-course:has(lecture-page.is-room.is-on-call) #views-panes-parent:has(> #view3.oc-room-on) {
  height: 100dvh;
}

.old-course:has(lecture-page.is-room.is-on-call) #view3 {
  height: auto;
}

/* the frame: the cameras across the top under 1200px (their row, then the class), the column at the end from it */
.old-course lecture-page.is-room > .main-flex {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  flex: 1 1 0;
  gap: var(--space-3);
  min-block-size: 0;
  padding: var(--space-3);
  border: 0;
}

.old-course lecture-page.is-room #videos-side {
  order: -1;
}

@media (min-width: 1200px) {
  .old-course lecture-page.is-room > .main-flex {
    grid-template-columns: minmax(0, 1fr) 15rem;
    grid-template-rows: minmax(0, 1fr);
  }

  .old-course lecture-page.is-room #videos-side {
    order: 0;
  }
}

/* held at the class's door, or the class not found: only what says so, whole, with nothing round it */
.old-course lecture-page.is-room.is-held :is(#videos-side, .right-side-bar, .right-side-main-top, .screens-control, .content-nav-division, .contents-keys-parent) {
  display: none;
}

.old-course lecture-page.is-room.is-held > .main-flex {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

.old-course lecture-page.is-room.is-held .right-side-main {
  border: 0;
  background: none;
}

.old-course lecture-page.is-room.is-held .contents-manager > .contents-screens-parent {
  background: none;
}

/* the side and the middle: beside each other from 992px while the side is open; the side over the class under it */
.old-course lecture-page.is-room .right-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: var(--space-3);
  min-block-size: 0;
  width: auto;
}

@media (min-width: 992px) {
  .old-course lecture-page.is-room .right-side:not(.rsb-closed) {
    grid-template-columns: 18.75rem minmax(0, 1fr);
  }
}

.old-course lecture-page.is-room .right-side-main,
.old-course lecture-page.is-room .right-side-bar {
  display: flex;
  flex-direction: column;
  inline-size: auto;
  block-size: auto;
  min-inline-size: 0;
  min-block-size: 0;
  width: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: none;
  overflow: hidden;
  transition: none;
}

.old-course lecture-page.is-room .right-side-main {
  z-index: auto;
}

.old-course lecture-page.is-room .right-side-bar {
  position: relative;
  z-index: auto;
  color: var(--color-text);
}

.old-course lecture-page.is-room .right-side-bar > div {
  min-inline-size: 0;
}

.old-course lecture-page.is-room .right-side-bar.closed {
  display: none;
}

.old-course lecture-page.is-room .rsb-transparent {
  display: none;
  background: var(--color-side-scrim);
}

@media (max-width: 991px) {
  .old-course lecture-page.is-room .right-side:not(.rsb-closed) .rsb-transparent {
    display: block;
  }

  /* over the class from its start (the right), the veil dimming it */
  .old-course lecture-page.is-room .right-side-bar {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 9911;
    inline-size: min(20rem, 100%);
    border-width: 0;
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    box-shadow: var(--shadow-raised);
  }
}

/* the side's head: its tabs, and under 992px the red ✕ after them */
.old-course lecture-page.is-room .right-side-bar > .control {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-block-end: 1px solid var(--color-rule);
  cursor: default;
}

.old-course lecture-page.is-room .right-side-bar > .control .close-button {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  order: 1;
  inline-size: 2.25rem;
  min-inline-size: 0;
  block-size: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-danger-fill);
  color: var(--color-on-fill);
  line-height: 1;
}

@media (max-width: 991px) {
  .old-course lecture-page.is-room .right-side-bar > .control .close-button {
    display: inline-flex;
  }
}

.old-course lecture-page.is-room .right-side-bar > .control .close-button > .icon {
  inline-size: 1.125rem;
  block-size: 1.125rem;
}

.old-course lecture-page.is-room .right-side-bar > .control > .cls-tabs {
  display: grid;
  flex: 1 1 auto;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 0.375rem;
  min-inline-size: 0;
  border: 0;
}

.old-course lecture-page.is-room .right-side-bar > .control > .cls-tabs > .cls-tab {
  position: relative;
  inline-size: auto;
  min-inline-size: 0;
  block-size: 2.625rem;
  min-block-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-small);
  background: none;
  color: var(--color-quiet);
  direction: rtl;
}

.old-course lecture-page.is-room .right-side-bar > .control > .cls-tabs > .cls-tab[hidden] {
  display: none;
}

.old-course lecture-page.is-room .right-side-bar > .control > .cls-tabs > .cls-tab > .icon {
  inline-size: 1.3125rem;
  block-size: 1.3125rem;
}

@media (hover: hover) {
  .old-course lecture-page.is-room .right-side-bar > .control > .cls-tabs > .cls-tab:hover {
    background: var(--color-raised);
  }
}

.old-course lecture-page.is-room .right-side-bar > .control > .cls-tabs > .cls-tab[aria-selected="true"] {
  background: var(--color-staff);
  color: var(--color-on-staff);
}

.old-course lecture-page.is-room .right-side-bar > .control > .cls-tabs > .cls-tab:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

.old-course lecture-page.is-room .right-side-bar > .control > .cls-tabs > .cls-tab[aria-selected="true"]:focus-visible {
  outline-color: var(--color-on-staff);
}

/* the deck's list, mirrored as the old's (content_teacher.js's style="transform: scale(-1,1)"), as the index's key */
.old-course lecture-page.is-room .cls-tab[data-key="tab-deck"] > .icon {
  transform: scale(-1, 1);
}

/* a count: a red bubble, a white line round it so it stands off what it's on (the tabs', the strip's, the answers') */
.old-course lecture-page.is-room :is(.cls-tab, .cls-round, .oc-answers-key) > :is(.cls-key-count, .count) {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 1.25rem;
  block-size: 1.25rem;
  padding: 0 0.3125rem;
  border: 2px solid var(--color-surface);
  border-radius: var(--radius-pill);
  background: var(--color-danger-fill);
  color: var(--color-on-fill);
  font-size: var(--font-size-tiny);
  font-weight: 700;
  line-height: 1;
}

.old-course lecture-page.is-room .cls-tab > .cls-key-count {
  inset-block-start: 0.125rem;
  inset-inline-start: calc(50% - 1.625rem);
  inset-inline-end: auto;
}

.old-course lecture-page.is-room :is(.cls-round, .oc-answers-key) > :is(.cls-key-count, .count) {
  inset-block-start: -0.3125rem;
  inset-inline-start: -0.3125rem;
  inset-inline-end: auto;
}

.old-course lecture-page.is-room :is(.cls-tab, .cls-round, .oc-answers-key) > :is(.cls-key-count, .count):empty {
  display: none;
}

/* the panes: the class's own, under the tabs, scrolling within */
.old-course lecture-page.is-room .right-side-bar > :is(class-chat, .cls-people, class-files, .cls-deck-box) {
  flex: 1 1 auto;
  min-block-size: 0;
  max-block-size: none;
}

.old-course lecture-page.is-room .right-side-bar > class-chat {
  padding: 0;
}

.old-course lecture-page.is-room .right-side-bar > :is(.cls-people, .cls-deck-box, class-files) {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.old-course lecture-page.is-room .right-side-bar > [hidden] {
  display: none;
}

/* the chat: its messages at the bottom over the box, which has a line above it */
.old-course lecture-page.is-room class-chat {
  gap: 0;
}

.old-course lecture-page.is-room class-chat .chat-head {
  padding: var(--space-2) var(--space-3) 0;
}

.old-course lecture-page.is-room class-chat .chat-scroll {
  flex: 1 1 auto;
  min-block-size: 0;
  padding: var(--space-3);
}

.old-course lecture-page.is-room class-chat .chat-list {
  flex: 1 1 auto;
  min-block-size: 6rem;
  max-block-size: none;
}

.old-course lecture-page.is-room class-chat .chat-list > :first-child {
  margin-block-start: auto;
}

/* before the class: what the chat says, plainly in the middle of its empty place */
.old-course lecture-page.is-room class-chat .chat-why {
  margin: 0;
  padding: var(--space-4);
  border-radius: 0;
  background: none;
  color: var(--color-muted);
  font-size: var(--font-size-body);
  text-align: center;
}

.old-course lecture-page.is-room class-chat:has(.chat-list[hidden], .chat-scroll[hidden]) .chat-why:not([hidden]) {
  flex: 1 1 auto;
  display: grid;
  place-items: center;
}

.old-course lecture-page.is-room class-chat .chat-empty {
  color: var(--color-muted);
  text-align: center;
}

/* nothing said yet and the chat's one line (it opens when the class starts, it was stopped, it is over): that line alone,
   in the middle of the card, as the board's; the quiet «no messages» line would only say it twice */
.old-course lecture-page.is-room class-chat:has(.chat-empty:not([hidden]), .chat-why:not([hidden])) {
  position: relative;
}

.old-course lecture-page.is-room class-chat:has(.chat-why:not([hidden])) .chat-empty:not([hidden]) {
  display: none;
}

.old-course lecture-page.is-room class-chat:has(.chat-empty:not([hidden])) .chat-why:not([hidden]) {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

/* each message: a bubble as the kit's (the others' raised with a line, the reader's own teal, a private one amber), a
   letter in a circle beside it */
.old-course lecture-page.is-room .chat-msg + .chat-msg:not(.is-continued) {
  margin-block-start: 0;
  padding-block-start: var(--space-1);
  border-block-start: 0;
}

.old-course lecture-page.is-room .chat-text {
  padding: 0.4375rem var(--space-3) 0.5rem;
  border: 1px solid var(--color-rule);
  border-radius: 1rem;
  background: var(--color-raised);
  color: var(--color-text);
  font-size: 0.875rem;
  line-height: 1.75;
}

.old-course lecture-page.is-room .chat-msg.is-mine > .chat-text {
  border-color: var(--color-chat-me-line);
  background: var(--color-chip-teal);
}

.old-course lecture-page.is-room .chat-msg.is-private > .chat-text {
  border-color: var(--color-hint-line);
  background: var(--color-hint);
}

.old-course lecture-page.is-room .chat-avatar {
  inline-size: 1.875rem;
  block-size: 1.875rem;
  background: var(--color-chip-grey);
  color: var(--color-chip-grey-text);
  font-size: var(--font-size-small);
}

.old-course lecture-page.is-room .chat-msg.is-trainer > .chat-avatar {
  background: var(--color-staff);
  color: var(--color-on-staff);
}

.old-course lecture-page.is-room .chat-msg-head {
  color: var(--color-muted);
  font-size: var(--font-size-tiny);
  line-height: 1.6;
}

.old-course lecture-page.is-room .chat-name {
  color: var(--color-text);
  font-size: 0.75rem;
}

.old-course lecture-page.is-room .chat-msg.is-trainer .chat-name {
  color: var(--color-on-text);
}

.old-course lecture-page.is-room .chat-msg-head .chat-role {
  padding: 0 0.375rem;
  border-radius: var(--radius-pill);
  background: var(--color-chip-teal);
  color: var(--color-chip-teal-text);
  font-size: var(--font-size-tiny);
  font-weight: 700;
}

.old-course lecture-page.is-room .chat-private {
  padding: 0 0.375rem;
  border-radius: var(--radius-pill);
  background: var(--color-hint-line);
  color: var(--color-hint-text);
  font-size: var(--font-size-tiny);
}

/* the box: who it goes to as a small pill, the text and «إرسال» in a row, the paperclip and the letters left under it */
.old-course lecture-page.is-room .chat-form {
  gap: var(--space-2);
  padding: 0.625rem var(--space-3) var(--space-3);
  border-block-start: 1px solid var(--color-rule);
  border-inline-start: 0;
}

.old-course lecture-page.is-room .chat-form.is-private {
  background: var(--color-hint);
}

.old-course lecture-page.is-room .chat-to {
  min-block-size: 1.875rem;
  padding-inline: var(--space-3) var(--space-2);
  border-color: var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.old-course lecture-page.is-room .chat-text-input {
  min-block-size: 2.75rem;
  border-radius: var(--radius);
}

.old-course lecture-page.is-room .chat-send {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-primary);
}

.old-course lecture-page.is-room .chat-send:disabled {
  box-shadow: none;
}

/* the strip over the slide (basic.css, students_list.css): the side's toggler at its start (the right), the rest at its
   end, in the old order, 40px circles 8px apart; on a phone a second row, at the end too */
.old-course lecture-page.is-room .right-side-main-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 3.625rem;
  padding: var(--space-2) var(--space-3);
  border-block-end: 1px solid var(--color-rule);
}

.old-course lecture-page.is-room .right-side-main-top-buttons {
  display: contents;
}

.old-course lecture-page.is-room .right-side-main-top [hidden] {
  display: none !important;
}

.old-course lecture-page.is-room .right-side-main-top > .rsb-toggler {
  order: 0;
  margin-inline-end: auto;
}

/* the old order from the strip's end (the left): ❓, the hands (or a student's ✋), «…», 🖌, 🖥; this app's own after
   them, towards the middle: the recording's, «ملء الشاشة», «إنهاء المحاضرة» */
.old-course lecture-page.is-room .right-side-main-top > .oc-end-key { order: 1; }
.old-course lecture-page.is-room .right-side-main-top > .cls-full-key { order: 2; }
.old-course lecture-page.is-room .right-side-main-top > :is(.cls-rec-button, .cls-rec-badge-box) { order: 3; }
.old-course lecture-page.is-room .right-side-main-top > .oc-call-screen { order: 4; }
.old-course lecture-page.is-room .right-side-main-top > .oc-board-key { order: 5; }
.old-course lecture-page.is-room .right-side-main-top > .show-key { order: 6; }
.old-course lecture-page.is-room .right-side-main-top .cls-hands-box,
.old-course lecture-page.is-room .right-side-main-top > .cls-floor-keys { order: 7; }
.old-course lecture-page.is-room .right-side-main-top .oc-answers-key { order: 8; }

.old-course lecture-page.is-room .right-side-main-top :is(.cls-floor-keys, .cls-hands-box, .oc-call-screen) {
  display: inline-flex;
  position: relative;
  gap: var(--space-2);
}

/* the round buttons: white with a line, the text's colour; on, teal; open, the open tab's; the danger ones red */
.old-course lecture-page.is-room .right-side-main-top :is(button, .cls-round):where(:not(.dp-panel *)) {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: none;
  color: var(--color-text);
  float: none;
  text-decoration: none !important;
}

.old-course lecture-page.is-room .right-side-main-top :is(button, .cls-round):where(:not(.dp-panel *)) > .icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

@media (hover: hover) {
  .old-course lecture-page.is-room .right-side-main-top :is(button, .cls-round):where(:not(.dp-panel *)):hover {
    background: var(--color-raised);
    color: var(--color-text);
  }
}

.old-course lecture-page.is-room .right-side-main-top :is(button, .cls-round):where(:not(.dp-panel *)):is([aria-expanded="true"], .open):not(.rsb-toggler) {
  border-color: var(--color-staff);
  background: var(--color-staff);
  color: var(--color-on-staff);
}

.old-course lecture-page.is-room .right-side-main-top :is(button, .cls-round):where(:not(.dp-panel *)):is([aria-pressed="true"], .is-on) {
  border-color: var(--color-done);
  background: var(--color-done);
  color: var(--color-on-done);
}

.old-course lecture-page.is-room .right-side-main-top :is(button, .cls-round):where(:not(.dp-panel *)).oc-end-key {
  border-color: var(--color-danger-line);
  color: var(--color-danger);
}

.old-course lecture-page.is-room .right-side-main-top .cls-round.is-stop:where(:not(.dp-panel *)),
.old-course lecture-page.is-room .right-side-main-top .cls-rec-button.is-stop:where(:not(.dp-panel *)) {
  border-color: var(--color-danger-line);
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

/* a hand raised: the yellow of the kit's main button, not filled red */
.old-course lecture-page.is-room .right-side-main-top .cls-round.is-raised:where(:not(.dp-panel *)) {
  border-color: var(--site-yellow-shadow);
  background: var(--site-yellow);
  color: var(--site-on-yellow);
}

.old-course lecture-page.is-room .right-side-main-top .cls-round.is-off:where(:not(.dp-panel *)) {
  color: var(--color-danger);
}

.old-course lecture-page.is-room .right-side-main-top :is(button, .cls-round):where(:not(.dp-panel *)):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* «● يُسجَّل ١٢:٠٤», for the room, at the strip: a pill, by the recording's key (its box takes no place, so the pill itself
   takes the key's) */
.old-course lecture-page.is-room .right-side-main-top .cls-rec-badge {
  order: 3;
  align-self: center;
  min-block-size: 1.875rem;
  padding: 0 0.625rem;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-small);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* the contents' manager: «…»'s numbered keys under the strip, then the stage */
.old-course lecture-page.is-room .contents-manager {
  flex: 1 1 auto;
  inline-size: auto;
  min-block-size: 0;
  background: none;
}

.old-course lecture-page.is-room .contents-manager > .contents-keys-parent {
  border-block-start: 0;
  border-block-end: 1px solid var(--color-rule);
}

.old-course lecture-page.is-room .contents-manager.show-contents-key .contents-keys-parent {
  margin: 0;
  padding: var(--space-2) var(--space-3);
}

.old-course lecture-page.is-room .contents-manager > .contents-keys-parent > .contents-keys {
  display: flex;
  gap: 0.375rem;
}

.old-course lecture-page.is-room .contents-manager > .contents-keys-parent > .contents-keys > .content-key {
  flex: none;
  inline-size: 2.5rem;
  block-size: 2.25rem;
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-surface);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.old-course lecture-page.is-room .contents-manager > .contents-keys-parent > .contents-keys > .content-key.active {
  border-color: var(--color-staff);
  background: var(--color-staff);
  color: var(--color-on-staff);
}

@media (hover: hover) {
  .old-course lecture-page.is-room .contents-manager > .contents-keys-parent > .contents-keys > .content-key:hover {
    background: var(--color-raised);
    color: var(--color-text);
  }

  .old-course lecture-page.is-room .contents-manager > .contents-keys-parent > .contents-keys > .content-key.active:hover {
    background: var(--color-staff);
    color: var(--color-on-staff);
  }
}

/* the stage: the page's pale behind the slide, the pager at its top, the slide's place under it, the big ‹ › at its sides */
.old-course lecture-page.is-room .contents-manager > .contents-screens-parent {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  padding: var(--space-4) 4.5rem 0;
  border-block-start: 0;
  background: var(--color-stage);
  overflow: hidden;
  z-index: auto;
}

.old-course lecture-page.is-room .contents-manager.show-contents-key .contents-screens-parent {
  border-block-start: 0;
}

.old-course lecture-page.is-room .screens-control {
  display: flex;
  flex: none;
  justify-content: center;
}

/* the pager: one pill, the steps and the number, then «إعادة قراءة الشريحة» and, while a slide is shown, «إيقاف العرض» last */
.old-course lecture-page.is-room .contents-manager > .contents-screens-parent > .screens-control > .navigator {
  display: inline-flex;
  gap: 2px;
  block-size: auto;
  padding: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: var(--shadow-button);
}

.old-course lecture-page.is-room .contents-manager > .contents-screens-parent:hover > .screens-control > .navigator {
  /* (the old room's translucent grey on the pager while the pointer was over the slide: no longer) */
  background: var(--color-surface) !important;
}

.old-course lecture-page.is-room .contents-manager > .contents-screens-parent > .screens-control > .navigator > .goto {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--color-text);
  font-size: var(--font-size-body);
}

.old-course lecture-page.is-room .contents-manager > .contents-screens-parent > .screens-control > .navigator > .goto > .icon {
  inline-size: 1.1875rem;
  block-size: 1.1875rem;
}

@media (hover: hover) {
  .old-course lecture-page.is-room .contents-manager > .contents-screens-parent > .screens-control > .navigator > .goto:hover {
    background: var(--color-raised);
    transform: none;
  }
}

.old-course lecture-page.is-room .contents-manager > .contents-screens-parent > .screens-control > .navigator > .goto:focus-visible,
.old-course lecture-page.is-room .contents-manager > .contents-screens-parent > .screens-control > .navigator > .goto-content:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

/* the step not to take now: dimmed (its buttons keep the keyboard) */
.old-course lecture-page.is-room .contents-manager > .contents-screens-parent > .screens-control > .navigator > .goto[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
  transform: none;
}

/* a line before «إعادة قراءة الشريحة» */
.old-course lecture-page.is-room .contents-manager > .contents-screens-parent > .screens-control > .navigator > .goto[data-key="room-reload"] {
  margin-inline-start: 0.5625rem;
}

.old-course lecture-page.is-room .navigator > .goto[data-key="room-reload"]::before {
  content: "";
  position: absolute;
  inset-block: 0.5rem;
  inset-inline-start: -0.3125rem;
  inline-size: 1px;
  background: var(--color-rule);
}

.old-course lecture-page.is-room .contents-manager > .contents-screens-parent > .screens-control > .navigator > .goto-content {
  inline-size: 2.875rem;
  block-size: 2rem;
  margin-inline: var(--space-1);
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-raised);
  color: var(--color-text);
  font: inherit;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* the datashow: the slide's place, its notices, the board, a screen shared */
.old-course lecture-page.is-room .contents-datashow {
  flex: 1 1 0;
  align-items: stretch;
  min-block-size: 0;
  padding: 0 0 var(--space-5);
  background: none;
  overflow: auto;
}

.old-course lecture-page.is-room .contents-datashow > div {
  padding: 0;
}

/* the switch between what the middle shows keeps its height whatever the board under it asks (it clips its own corners, so
   a column of a tall board would squeeze it) */
.old-course lecture-page.is-room .contents-datashow > .cls-view-switch {
  flex: none;
}

/* the big ‹ › over the stage, round, at its end (the left) as the old room's and the board's, one above the other, ›
   (the previous) first; under 768px, at its bottom corners, › at the right */
.old-course lecture-page.is-room .contents-manager .content-nav-division {
  position: absolute;
  inset-block: 13.125rem auto;
  inset-inline: auto var(--space-4);
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-2);
  inline-size: 2.5rem;
  z-index: 3;
  pointer-events: none;
}

.old-course lecture-page.is-room .contents-manager .content-nav-division > .content-nav {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text);
  float: none !important;
  opacity: 1;
  pointer-events: auto;
}

/* an arrow the room hides (no slide shown) is gone: the kit's display doesn't bring it back; where there's no slide that
   way it is off, not gone (the owner's words of 31 Oct 2026) */
.old-course lecture-page.is-room .contents-manager .content-nav-division > .content-nav[hidden] {
  display: none;
}

/* an arrow that's off (the first slide, the last): faint, still in its place (the viewer's and the room's) */
.old-course :is(#view1, #view4) old-material-viewer .contents-manager .content-nav-division > .content-nav:disabled,
.old-course lecture-page.is-room .contents-manager .content-nav-division > .content-nav:disabled {
  opacity: 0.4;
  cursor: default;
}

/* (and no hover on it: the kit's hover is the old one's, !important) */
@media (hover: hover) {
  .old-course :is(#view1, #view4) old-material-viewer .contents-manager .content-nav-division > .content-nav:disabled:hover,
  .old-course lecture-page.is-room .contents-manager .content-nav-division > .content-nav:disabled:hover {
    border-color: var(--color-border) !important;
    background: var(--color-surface) !important;
    color: var(--color-text) !important;
  }
}

.old-course lecture-page.is-room .contents-manager .content-nav-division > .content-nav > svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

@media (hover: hover) {
  .old-course lecture-page.is-room .contents-manager .content-nav-division > .content-nav:hover {
    background: var(--color-raised);
  }
}

.old-course lecture-page.is-room .contents-manager .content-nav-division > .content-nav:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* the board seen in the slide's place: no pager and no big ‹ ›, which would cover its corner (the board is as wide as the
   slide's place); «الشريحة» brings them back with the slide */
.old-course lecture-page.is-room .contents-screens-parent:has(> .contents-datashow > class-board .cls-board-page:not([hidden])) > :is(.screens-control, .content-nav-division) {
  display: none;
}

/* the slide shown: white paper (the light tokens inside it: tokens.css), 600px at most, its drop under it */
.old-course lecture-page.is-room .cls-slide-box {
  inline-size: 100%;
  max-inline-size: 37.5rem;
  margin-inline: auto;
  padding: 0;
}

.old-course lecture-page.is-room .cslide-stage {
  min-block-size: 0;
  padding: 1.375rem var(--space-5) 1.125rem;
  border: 0;
  border-radius: var(--radius-inner);
  background: var(--color-paper);
  color: var(--color-text);
  box-shadow: var(--shadow-paper);
}


/* (the owner's choice of 31 Oct 2026: the Class board) a slide drawn on: «ارسم» (or the pen's line) and, while drawing,
   the toolbar above the paper, on the stage; the paper is the slide itself with an exercise's choices under it, as wide
   as before (its sides reach into the stage's own, so the ink keeps the width it measures). The row's words in the
   stage's colours, the paper's light ones not reaching it. */
.old-course lecture-page.is-room .cslide-stage.is-inked {
  padding-block: 0;
  background: none;
  box-shadow: none;
}

.old-course lecture-page.is-room .cslide-stage.is-inked .cls-ink-row {
  padding: 0 0 var(--space-2);
  color: var(--color-stage-text);
}

.old-course lecture-page.is-room .cslide-stage.is-inked .cls-ink-recorded {
  margin-inline: calc(-1 * var(--space-5));
  padding: 1.375rem var(--space-5) 1.125rem;
  border-radius: var(--radius-inner);
  background: var(--color-paper);
  box-shadow: var(--shadow-paper);
}
/* no head over it (the pager's number says which); under the slide, its own previous and next, «إيقاف العرض» and the
   list of the slides shown (a student looks back with the big ‹ ›): the pager and the big ‹ › do those here */
.old-course lecture-page.is-room .cslide-head {
  display: none;
}

.old-course lecture-page.is-room :is(.cls-slide-box .cslide-controls, class-shown) {
  display: none;
}

.old-course lecture-page.is-room .cslide-keys {
  display: none;
}

.old-course lecture-page.is-room .cls-slide-none {
  padding: var(--space-3);
}

.old-course lecture-page.is-room .contents-datashow > class-board:not(:has(.cls-board-page:not([hidden]))) {
  gap: 0;
}

/* the board's bar words and the notes under the slide, on the stage's pale blue, in the quiet ink (the muted one reads 4.3:1
   there) */
.old-course lecture-page.is-room .contents-datashow :is(.cls-board-count, .cls-board-where),
.old-course lecture-page.is-room .contents-datashow > .cls-notes .crs-muted {
  color: var(--color-quiet);
}

/* ❓ closed: the answers' lists out of sight («إظهار الإجابة» and the line saying the right answer while the class records
   stay under the question) */
.old-course lecture-page.is-room .cls-slide-box:not(.oc-answers-open) .cslide-lists {
  display: none;
}

/* ❓ open: the lists as three cards under the slide, each in its mark's colour */
.old-course lecture-page.is-room .cslide-lists {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.625rem;
}

.old-course lecture-page.is-room .cslide-list {
  padding: 0.625rem var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.old-course lecture-page.is-room .cslide-list-title {
  margin: 0;
  font-size: var(--font-size-small);
  font-weight: 700;
}

/* in their order: right, wrong, not yet */
.old-course lecture-page.is-room .cslide-list:nth-child(1) > .cslide-list-title {
  color: var(--color-on-text);
}

.old-course lecture-page.is-room .cslide-list:nth-child(2) > .cslide-list-title {
  color: var(--color-danger);
}

.old-course lecture-page.is-room .cslide-list:nth-child(3) > .cslide-list-title {
  color: var(--color-quiet);
}

.old-course lecture-page.is-room .cslide-names {
  margin: var(--space-1) 0 0;
  color: var(--color-quiet);
  font-size: var(--font-size-small);
}

/* the board's own «فتح السبورة»: 🖌 opens it in the room (its other leaders' parts stay over it while it's open) */
.old-course lecture-page.is-room .cls-board-opener {
  display: none;
}

/* what the voice says of the reader's own buttons: for screen readers, but why one couldn't be turned on */
.old-course lecture-page.is-room .cls-rtc-own-line:not(.is-problem) {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* between the pager and the slide the old room had nothing: there, what says nothing to the eye takes no room (the
   status once live, but «إنهاء المحاضرة» asked again or what a step said; the voice's and the recording's lines but
   while they say something; the board's bar while it's closed, its «فتح السبورة» being 🖌) */
.old-course lecture-page.is-room .oc-room-status:focus {
  outline: none;
}

.old-course lecture-page.is-room.is-class-live .oc-room-status > :is(.cls-state-line, .cls-state-more) {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  color: var(--color-text);
  white-space: nowrap;
}

.old-course lecture-page.is-room.is-class-live .oc-room-status > :not(.cls-state-line, .cls-state-more, :empty) {
  margin-block: var(--space-2);
}

.old-course lecture-page.is-room :is(.contents-datashow, .oc-meeting-lines) > .cls-notes {
  gap: 0;
  padding-block: 0;
}

.old-course lecture-page.is-room .cls-notes :is(.cls-rtc-play, .cls-rec-line, .cls-rec-hint):not(:empty, [hidden]) {
  margin-block: var(--space-2);
}

/* where the class is, over the slide: before the class, held at its door, taken elsewhere (the card: the lecture's cover
   with the idle robot, the line saying nothing is shown, the amber or teal line of where it is, the trainer's key) */
.old-course lecture-page.is-room .oc-room-status {
  padding: 0;
}

.old-course lecture-page.is-room .oc-room-status.is-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  inline-size: 100%;
  max-inline-size: 37.5rem;
  margin: auto;
  padding: 1.75rem var(--space-5);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  text-align: center;
}

.old-course lecture-page.is-room .oc-room-status.is-card .cls-cover {
  gap: 0.375rem;
  padding: 0;
  border: 0;
  background: none;
}

.old-course lecture-page.is-room .oc-room-status.is-card .cls-cover-title {
  color: var(--color-text);
  line-height: 1.6;
}

.old-course lecture-page.is-room .oc-room-status.is-card .cls-cover-line {
  color: var(--color-quiet);
  font-size: 0.875rem;
}

.old-course lecture-page.is-room .oc-room-status.is-card > .cls-slide-none {
  margin: var(--space-1) 0 0;
  padding: 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.old-course lecture-page.is-room .oc-room-bot {
  display: block;
  inline-size: 7.5rem;
  block-size: 5.375rem;
  margin-block-end: var(--space-1);
}

.old-course lecture-page.is-room .oc-room-bot[hidden] {
  display: none;
}

.old-course lecture-page.is-room .oc-room-bot > svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
}

.old-course lecture-page.is-room .oc-room-status.is-card > .oc-room-bot {
  order: -2;
}

/* where the class is, as a line of its own: amber while it hasn't begun, teal while it's on (the waiting room's); under it
   how long, small */
.old-course lecture-page.is-room .oc-room-status.is-card > .cls-state-line {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: 0.625rem;
  padding: var(--space-2) 0.875rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  line-height: 1.7;
  text-align: start;
}

.old-course lecture-page.is-room .oc-room-status.is-card > .cls-state-line.is-waiting {
  background: var(--color-hint);
  color: var(--color-hint-text);
}

.old-course lecture-page.is-room .oc-room-status.is-card > .cls-state-line.is-live {
  background: var(--color-chip-teal);
  color: var(--color-chip-teal-text);
}

.old-course lecture-page.is-room .oc-room-status.is-card > .cls-state-line .cls-state-dot {
  inline-size: 0.5625rem;
  block-size: 0.5625rem;
  box-shadow: none;
}

.old-course lecture-page.is-room .oc-room-status.is-card > .cls-state-line.is-waiting .cls-state-dot {
  background: var(--color-hint-edge);
}

.old-course lecture-page.is-room .oc-room-status.is-card > .cls-state-line.is-live .cls-state-dot {
  background: var(--color-on);
  animation: oc-line-pulse 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .old-course lecture-page.is-room .oc-room-status.is-card > .cls-state-line.is-live .cls-state-dot {
    animation: none;
  }
}

.old-course lecture-page.is-room .oc-room-status.is-card > .cls-state-more {
  margin: var(--space-1) 0 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

/* its notices: waiting at the door, taken out, taken to another page: a title and a line in the card's middle, the notice
   first at the door (under the robot, above where the class is) */
.old-course lecture-page.is-room .oc-room-status.is-card > .notice:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text);
}

.old-course lecture-page.is-room .oc-room-status.is-card.is-says > .notice:not([hidden]) {
  order: -1;
}

.old-course lecture-page.is-room .oc-room-status.is-card > .notice > svg {
  display: none;
}

.old-course lecture-page.is-room .oc-room-status.is-card > .notice > .notice-text {
  margin: 0;
  font-size: var(--font-size-title);
  font-weight: 700;
  line-height: 1.6;
}

.old-course lecture-page.is-room .oc-room-status.is-card > .notice .crs-line {
  margin: 0;
  color: var(--color-quiet);
  font-size: 0.875rem;
}

.old-course lecture-page.is-room .oc-room-status.is-card > .notice .cls-held {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

/* ── The cameras' part (media_call.css): across the top under 1200px, its call bar over a row of pictures; from 1200px a
   240px column at the end, navy (deeper in dark mode), the class beside it. The call bar, right to left: the red count of
   what's new on the side, the meeting view's key, the camera and the microphone (on the call), «اتصل» (a red phone on the
   call), the devices. ── */
.old-course lecture-page.is-room #videos-side {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  inline-size: auto;
  min-inline-size: 0;
  min-block-size: 0;
  padding: 0.625rem;
  border-radius: var(--radius-card);
  background: var(--color-cams);
  color: var(--color-cams-ink);
}

.old-course lecture-page.is-room #media-division {
  display: block;
  flex: 1 1 auto;
  min-block-size: 0;
  overflow: auto;
}

/* the pictures: 128px in a row that scrolls; from 1200px two to a row in the column, the first (the trainer's) as wide as it */
.old-course lecture-page.is-room .cls-cameras,
.old-course lecture-page.is-room .cls-cameras:has(.cls-camera:not([hidden])) {
  display: block;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  inline-size: 100%;
}

.old-course lecture-page.is-room .cls-cameras[hidden] {
  display: none;
}

/* (the old room had no «إخفاء الكاميرا»: its meeting view's switch comes with part b2) */
.old-course lecture-page.is-room .cls-camera-hide {
  display: none;
}

.old-course lecture-page.is-room .cls-camera-list {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  overflow: auto;
}

.old-course lecture-page.is-room .cls-camera {
  inline-size: 8rem;
  border-radius: var(--radius);
  background: var(--color-cams-key);
}

.old-course lecture-page.is-room .cls-camera video {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--color-cams-key);
}

@media (min-width: 1200px) {
  .old-course lecture-page.is-room .cls-camera-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .old-course lecture-page.is-room .cls-camera {
    inline-size: auto;
  }

  .old-course lecture-page.is-room .cls-camera.is-large {
    grid-column: 1 / -1;
  }
}

/* a picture's name, bottom start, on a fade, its microphone's mark beside it; the ring round it while it talks: teal */
.old-course lecture-page.is-room .cls-camera > .cls-picture-name {
  padding: 1rem 0.625rem var(--space-1);
  background: linear-gradient(transparent, color-mix(in srgb, var(--color-cams) 85%, transparent));
  color: var(--site-navy-title);
  font-size: 0.75rem;
  font-weight: 700;
  text-align: start;
}

.old-course lecture-page.is-room .cls-camera.is-talking::after,
.old-course lecture-page.is-room .cls-card.is-talking::after {
  border-color: var(--site-teal);
}

/* the call bar */
.old-course lecture-page.is-room #call-control-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.375rem;
  position: relative;
  inline-size: 100%;
  background: none;
}

.old-course lecture-page.is-room #call-control-bar > .oc-call-own {
  display: contents;
}

.old-course lecture-page.is-room #call-control-bar > .oc-call-own[hidden] {
  display: none;
}

.old-course lecture-page.is-room #call-control-bar > .item,
.old-course lecture-page.is-room #call-control-bar .cls-round {
  position: relative;
  display: inline-grid;
  flex: none;
  place-items: center;
  inline-size: auto;
  min-inline-size: 2.625rem;
  block-size: 2.625rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-cams-line);
  border-radius: var(--radius);
  background: var(--color-cams-key);
  box-shadow: none;
  color: var(--color-cams-ink);
  font-size: inherit;
  line-height: 1;
  text-align: center;
  cursor: pointer;
}

.old-course lecture-page.is-room #call-control-bar .cls-round > .icon,
.old-course lecture-page.is-room #call-control-bar > .item .icon > svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  vertical-align: middle;
}

@media (hover: hover) {
  .old-course lecture-page.is-room #call-control-bar .cls-round:hover,
  .old-course lecture-page.is-room #call-control-bar > .item:hover {
    border-color: var(--site-navy-edge);
    color: var(--site-navy-title);
  }
}

.old-course lecture-page.is-room #call-control-bar :is(.item, .cls-round):focus-visible {
  outline: 2px solid var(--site-focus);
  outline-offset: 2px;
}

.old-course lecture-page.is-room #call-control-bar .cls-rtc-camera {
  order: 2;
}

.old-course lecture-page.is-room #call-control-bar .cls-rtc-mic {
  order: 3;
}

/* sending: teal, its words navy (the microphone's ring round it as it hears) */
.old-course lecture-page.is-room #call-control-bar .cls-round:is(.is-on, [aria-pressed="true"]),
.old-course lecture-page.is-room #call-control-bar > #open-lecture-button[aria-pressed="true"] {
  border-color: var(--site-teal);
  background: var(--site-teal);
  color: var(--site-navy);
}

.old-course lecture-page.is-room #call-control-bar .cls-round[aria-disabled="true"],
.old-course lecture-page.is-room #call-control-bar > .item[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.old-course lecture-page.is-room #call-control-bar .cls-round.is-waiting {
  border-color: var(--site-teal);
  background: none;
  color: var(--site-teal);
}

/* a student's own key the trainer blocked (media_call.css's .prevented): faded, a press doing nothing */
.old-course lecture-page.is-room #call-control-bar .cls-round.is-prevented,
.old-course lecture-page.is-room #call-control-bar .cls-round.is-prevented:hover {
  opacity: 0.5;
  color: var(--color-cams-ink);
  cursor: not-allowed;
}

.old-course lecture-page.is-room #call-control-bar .cls-rtc-devices {
  order: 11;
}

/* (the old bar had no level: the microphone's own picture says on or off) */
.old-course lecture-page.is-room #call-control-bar .cls-rtc-level {
  display: none;
}

/* «اتصل»: teal with the drop under it, its picture first; «ابدأ المحاضرة» (the trainer's, before the class): yellow, filling the
   bar; on the call a red phone, rotated */
.old-course lecture-page.is-room #call-control-bar > #join-class-button {
  order: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  inline-size: auto;
  padding-inline: 0.875rem;
  border: 0;
  background: var(--site-teal);
  box-shadow: 0 3px 0 var(--site-teal-shadow);
  color: var(--site-navy);
  font-weight: 700;
  white-space: nowrap;
}

@media (hover: hover) {
  .old-course lecture-page.is-room #call-control-bar > #join-class-button:hover {
    background: var(--site-teal);
    color: var(--site-navy);
  }
}

.old-course lecture-page.is-room #call-control-bar > #join-class-button[hidden] {
  display: none;
}

.old-course lecture-page.is-room #call-control-bar > #join-class-button .key,
.old-course lecture-page.is-room #call-control-bar > #join-class-button .icon {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  inline-size: auto;
  block-size: auto;
}

.old-course lecture-page.is-room #call-control-bar > #join-class-button .icon {
  flex-direction: row-reverse;
}

.old-course lecture-page.is-room #call-control-bar > #join-class-button .icon > svg {
  inline-size: 1.125rem;
  block-size: 1.125rem;
}

.old-course lecture-page.is-room #call-control-bar > #join-class-button .oc-call-words {
  margin: 0;
}

.old-course lecture-page.is-room #call-control-bar > #join-class-button .oc-call-words:empty {
  display: none;
}

.old-course lecture-page.is-room #call-control-bar > #join-class-button.is-start {
  flex: 1 1 auto;
  background: var(--site-yellow);
  box-shadow: 0 3px 0 var(--site-yellow-shadow);
  color: var(--site-on-yellow);
}

.old-course lecture-page.is-room #call-control-bar > #join-class-button.is-hang-up {
  flex: none;
  inline-size: 2.625rem;
  padding: 0;
  background: var(--color-danger-fill);
  box-shadow: none;
  color: var(--color-on-fill);
}

.old-course lecture-page.is-room #call-control-bar > #join-class-button.is-hang-up .icon > svg {
  transform: rotate(135deg);
}

/* the meeting view's key, filling the bar's spare width, at its start */
.old-course lecture-page.is-room #call-control-bar > #open-lecture-button {
  order: 0;
  flex: 1 1 auto;
  inline-size: auto;
  padding: 0;
}

.old-course lecture-page.is-room #call-control-bar > #open-lecture-button[hidden] {
  display: none;
}

.old-course lecture-page.is-room #call-control-bar > #open-lecture-button .key {
  display: grid;
  place-items: center;
}

/* what's new on the side, counted: the red bubble, the bar's first */
.old-course lecture-page.is-room #call-control-bar > .counter-box {
  position: static;
  order: -1;
  flex: none;
  inline-size: 1.875rem;
  block-size: 1.875rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-danger-fill);
  color: var(--color-on-fill);
  font-size: var(--font-size-small);
  font-weight: 700;
  line-height: 1;
}

.old-course lecture-page.is-room #call-control-bar > .counter-box[hidden] {
  display: none;
}

/* the devices' lists, under the bar (media_call.css's #devices-selection-menu > .body > .inner) */
.old-course lecture-page.is-room #call-control-bar .cls-rtc-device-box {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-end: 0;
  z-index: 90000;
  inline-size: 100%;
  margin-block-start: var(--space-2);
  padding: 0.625rem;
  border: 1px solid var(--color-cams-line);
  border-radius: var(--radius);
  background: var(--color-cams-key);
  box-shadow: var(--shadow-raised);
  color: var(--color-cams-ink);
}

.old-course lecture-page.is-room #call-control-bar .cls-rtc-device-box[hidden] {
  display: none;
}

.old-course lecture-page.is-room #call-control-bar .cls-rtc-device-box select {
  inline-size: 100%;
  block-size: 2.5rem;
  padding: 0.3125rem;
  border: 1px solid var(--color-cams-line);
  border-radius: var(--radius-small);
  background: var(--color-cams);
  color: var(--color-cams-ink);
  direction: ltr;
  text-align: start;
}

/* what «اتصل» or «ابدأ المحاضرة» does, under the pictures, at the column's foot (from 1200px) */
.old-course lecture-page.is-room .oc-cam-note {
  display: none;
  margin: auto 0 0;
  color: var(--color-cams-ink);
  font-size: 0.75rem;
  line-height: 1.7;
}

@media (min-width: 1200px) {
  .old-course lecture-page.is-room .oc-cam-note:not([hidden]) {
    display: block;
  }
}

/* what the room says while the meeting view hides the slide's place and the strip (the voice's line and «تشغيل الصوت»,
   a student's line, the recording's) and «● يُسجَّل», under the call bar; taking no room while they say nothing */
.old-course lecture-page.is-room .oc-meeting-lines {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.625rem;
  color: var(--color-cams-ink);
}

.old-course lecture-page.is-room .oc-meeting-lines[hidden] {
  display: none;
}

.old-course lecture-page.is-room .oc-meeting-lines > .cls-notes {
  flex: 1 1 auto;
  min-inline-size: 0;
  color: var(--color-cams-ink);
}

.old-course lecture-page.is-room .oc-meeting-lines .crs-muted {
  color: var(--color-cams-ink);
}

/* ── «الحاضرون» (#students-main): who speaks, the steps for every student, the door's part, then a row for each person: their
   letter in a circle, their name and role, their steps in small round keys under it (the kit's; students_list.css's
   order and keys kept) ── */
.old-course lecture-page.is-room .right-side-bar > .cls-people {
  gap: var(--space-3);
  padding: 0.625rem var(--space-3);
  background: none;
}

.old-course lecture-page.is-room .cls-people > .cls-floor {
  margin: 0;
  padding: 0;
  border: 0;
}

.old-course lecture-page.is-room .cls-people > .cls-floor .cls-floor-body {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}

.old-course lecture-page.is-room .cls-people .cls-floor-speaking {
  padding: 0;
  color: var(--color-muted);
  font-size: 0.75rem;
  text-align: start;
}

.old-course lecture-page.is-room .cls-people .cls-floor-tools.all-control {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.375rem;
  inline-size: 100%;
  block-size: auto;
  padding: var(--space-2) 0.625rem;
  border-radius: var(--radius);
  background: var(--color-raised);
}

.old-course lecture-page.is-room .cls-people .all-control > .cls-round {
  inline-size: 2rem;
  block-size: 2rem;
}

/* its name, as words at its start (the group's own name, said once: its keys sit at the end) */
.old-course lecture-page.is-room .cls-people .cls-floor-tools.all-control::before {
  content: attr(aria-label);
  content: attr(aria-label) / "";
  margin-inline-end: auto;
  color: var(--color-text);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.old-course lecture-page.is-room .cls-people > class-door {
  padding: 0;
}

/* the waiting room's box: its name and its switch (the toggle button drawn as the kit's switch: it stays a button, pressed
   is on), what it means under them, then who waits, each a row with «قبول» */
.old-course lecture-page.is-room .cls-people > class-door .cls-door-body {
  gap: var(--space-2);
  padding: 0.625rem;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
}

.old-course lecture-page.is-room .cls-door-room {
  display: block;
}

.old-course lecture-page.is-room .cls-door-room > .cls-floor-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  inline-size: 100%;
  min-block-size: var(--chip-height);
  padding: 0;
  padding-inline-end: calc(var(--switch-width) + var(--space-2));
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--color-text);
  font-size: var(--font-size-small);
  font-weight: 700;
  text-align: start;
  transform: none;
}

.old-course lecture-page.is-room .cls-door-room > .cls-floor-button:is(:hover, :active) {
  background: none;
  box-shadow: none;
  transform: none;
}

.old-course lecture-page.is-room .cls-door-room > .cls-floor-button::before,
.old-course lecture-page.is-room .cls-door-room > .cls-floor-button::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
}

.old-course lecture-page.is-room .cls-door-room > .cls-floor-button::before {
  inset-inline-end: 0;
  inline-size: var(--switch-width);
  block-size: var(--chip-height);
  margin-block-start: calc(var(--chip-height) / -2);
  border-radius: var(--radius-pill);
  background: var(--color-track);
}

.old-course lecture-page.is-room .cls-door-room > .cls-floor-button::after {
  inset-inline-end: calc(var(--switch-width) - var(--switch-knob) - var(--switch-gap));
  inline-size: var(--switch-knob);
  block-size: var(--switch-knob);
  margin-block-start: calc(var(--switch-knob) / -2);
  border-radius: 50%;
  background: var(--color-switch-knob);
  box-shadow: var(--shadow-knob);
  transition: inset-inline-end 0.15s;
}

.old-course lecture-page.is-room .cls-door-room > .cls-floor-button[aria-pressed="true"]::before {
  background: var(--color-switch-on);
}

.old-course lecture-page.is-room .cls-door-room > .cls-floor-button[aria-pressed="true"]::after {
  inset-inline-end: var(--switch-gap);
}

.old-course lecture-page.is-room .cls-door-line {
  display: block;
  margin-block-start: var(--space-1);
  color: var(--color-muted);
  font-size: 0.75rem;
  line-height: 1.7;
}

.old-course lecture-page.is-room .cls-people .cls-door-body > .cls-floor-title {
  margin: var(--space-1) 0 0;
  color: var(--color-muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.old-course lecture-page.is-room .cls-door-person {
  padding: 0.375rem var(--space-2);
  border-radius: var(--radius-small);
  background: var(--color-raised);
}

.old-course lecture-page.is-room .cls-door-person:has(> .button-primary) {
  flex-wrap: nowrap;
  background: var(--color-hint);
  color: var(--color-hint-text);
}

.old-course lecture-page.is-room .cls-door-person > .cls-floor-name {
  margin-inline-end: auto;
  min-inline-size: 0;
  font-size: var(--font-size-small);
  font-weight: 700;
}

.old-course lecture-page.is-room .cls-door-person > .cls-floor-button {
  min-block-size: 2rem;
  padding-inline: 0.75rem;
  white-space: nowrap;
}

.old-course lecture-page.is-room .cls-people-list {
  background: none;
}

.old-course lecture-page.is-room .cls-person {
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.5625rem 0;
  border-block-end: 0;
  background: none;
  color: var(--color-text);
}

.old-course lecture-page.is-room .cls-person + .cls-person {
  border-block-start: 1px solid var(--color-rule);
}

.old-course lecture-page.is-room .cls-person-avatar {
  inline-size: 2.125rem;
  block-size: 2.125rem;
  flex-basis: 2.125rem;
  background: var(--color-chip-grey);
  color: var(--color-chip-grey-text);
  font-size: 0.875rem;
}

.old-course lecture-page.is-room .cls-person.is-trainer .cls-person-avatar {
  background: var(--color-staff);
  color: var(--color-on-staff);
}

.old-course lecture-page.is-room .cls-person-avatar.is-talking {
  box-shadow: inset 0 0 0 3px var(--color-on), inset 0 0 0 5px var(--color-surface);
}

.old-course lecture-page.is-room .cls-person-main {
  align-items: stretch;
  gap: 0.375rem;
  padding-inline-start: 0;
  overflow: visible;
}

.old-course lecture-page.is-room .cls-person-line {
  justify-content: flex-start;
  min-block-size: 0;
  font-size: var(--font-size-small);
  line-height: 1.6;
}

.old-course lecture-page.is-room .cls-person-name {
  font-weight: 700;
}

.old-course lecture-page.is-room .cls-person.is-trainer .cls-role {
  border-color: transparent;
  background: var(--color-chip-teal);
  color: var(--color-chip-teal-text);
}

/* a hand raised, by a name */
.old-course lecture-page.is-room .cls-hand-mark.is-on {
  color: var(--color-hint-text);
}

/* the steps: small round keys, 28px, 4px apart */
.old-course lecture-page.is-room :is(.cls-person-tools, .cls-hand-row .cls-person-tools) {
  justify-content: flex-start;
  gap: var(--space-1);
}

.old-course lecture-page.is-room .cls-person-tools > :is(.cls-round, .am) {
  margin: 0;
}

.old-course lecture-page.is-room .cls-person-tools .cls-round.is-small {
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: none;
  color: var(--color-text);
}

.old-course lecture-page.is-room .cls-person-tools .cls-round.is-small > .icon {
  inline-size: 0.9375rem;
  block-size: 0.9375rem;
}

@media (hover: hover) {
  .old-course lecture-page.is-room .cls-person-tools .cls-round.is-small:hover {
    background: var(--color-raised);
  }
}

/* sent, let: teal; blocked: red and slashed; sending as it's blocked: filled red; the brush given, a screen given */
.old-course lecture-page.is-room .cls-person-tools .cls-round.is-small:is(.is-given, .is-on) {
  background: var(--color-surface);
  color: var(--color-on-text) !important;
}

.old-course lecture-page.is-room .cls-person-tools .cls-round.cls-block-key.is-blocked {
  color: var(--color-danger);
}

.old-course lecture-page.is-room .cls-person-tools .cls-round.cls-block-key.is-let.is-live {
  color: var(--color-on-text);
}

.old-course lecture-page.is-room .cls-person-tools .cls-round.cls-block-key.is-blocked.is-live {
  background: var(--color-danger-fill);
  color: var(--color-on-fill);
}

/* «الأيدي المرفوعة»: each hand a row, as «الحاضرون»'s: the letter, then the name (and the time) over the keys; its red ✕ at
   the row's end */
.old-course lecture-page.is-room .cls-hand-row {
  display: grid;
  grid-template-columns: 2.125rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-1) 0.625rem;
  position: relative;
  padding: 0.5625rem 0;
  padding-inline-end: 2.25rem;
  border-block-end: 0;
}

.old-course lecture-page.is-room .cls-hand-row + .cls-hand-row {
  border-block-start: 1px solid var(--color-rule);
}

.old-course lecture-page.is-room .cls-hand-row > .cls-person-avatar {
  grid-row: 1 / span 2;
  grid-column: 1;
}

.old-course lecture-page.is-room .cls-hand-row > :is(.cls-hand-who, .cls-person-tools) {
  grid-column: 2;
  padding-inline-start: 0;
}

.old-course lecture-page.is-room .cls-hand-row .cls-hand-name {
  font-weight: 700;
}

.old-course lecture-page.is-room .cls-hand-row .cls-person-tools .cls-round.is-small[data-shape="x"] {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 0;
  margin: 0;
  transform: translateY(-50%);
  color: var(--color-danger);
}

/* ── the deck in the panel: each lesson its title and its path, its slides rows with their number in a circle, the one
   shown as the page you are on in a menu ── */
.old-course lecture-page.is-room .right-side-bar > .cls-deck-box {
  padding: var(--space-2) var(--space-3);
}

.old-course lecture-page.is-room .cdeck,
.old-course lecture-page.is-room .cdeck-group {
  gap: 0;
}

.old-course lecture-page.is-room .cdeck-lesson {
  gap: 0;
  border-block-end: 1px solid var(--color-rule);
}

.old-course lecture-page.is-room .cdeck-lesson-title {
  padding: 0.625rem var(--space-1) var(--space-1);
  color: var(--color-text);
  font-size: var(--font-size-body);
  font-weight: 700;
}

.old-course lecture-page.is-room .cdeck-path {
  padding: 0 var(--space-1) var(--space-2);
  color: var(--color-muted);
  font-size: 0.75rem;
}

.old-course lecture-page.is-room .cdeck-slides {
  gap: 0;
  padding-block-end: var(--space-2);
}

.old-course lecture-page.is-room .cdeck-slide {
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  min-block-size: 2.25rem;
  padding: 0.3125rem var(--space-2);
  border: 0;
  border-radius: var(--radius-small);
  background: none;
  color: var(--color-quiet);
  font-size: var(--font-size-small);
}

@media (hover: hover) {
  .old-course lecture-page.is-room .cdeck-slide:hover {
    background: var(--color-raised);
  }
}

.old-course lecture-page.is-room .cdeck-slide[aria-current="true"] {
  padding-inline: var(--space-2);
  border: 0;
  background: var(--color-current);
  color: var(--color-text);
  font-weight: 700;
}

.old-course lecture-page.is-room .cdeck-n {
  min-inline-size: 1.625rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-chip-grey);
  color: var(--color-chip-grey-text);
  line-height: 1.625rem;
  text-align: center;
}

.old-course lecture-page.is-room .cdeck-slide[aria-current="true"] .cdeck-n {
  background: var(--color-staff);
  color: var(--color-on-staff);
}

.old-course lecture-page.is-room .cdeck-slide-title {
  flex: 1 1 8rem;
}

.old-course lecture-page.is-room .cdeck-slide .crs-badge {
  font-size: var(--font-size-tiny);
}

.old-course lecture-page.is-room .right-side-bar > class-files {
  padding: var(--space-3);
}

/* ── Narrow screens: under 768px the stage has no room at its sides for the big ‹ ›, which go to its bottom corners; on a
   phone (under 500px) the room is flat from edge to edge: the cameras' row and call bar at the top, the strip, the stage,
   and the side over the class between the bars, the page dimmed, its red ✕ ── */
@media (max-width: 47.9375rem) {
  .old-course lecture-page.is-room .contents-manager > .contents-screens-parent {
    padding: var(--space-3) var(--space-3) 4rem;
  }

  .old-course lecture-page.is-room .contents-manager .content-nav-division {
    inset-block: auto var(--space-3);
    inset-inline: var(--space-3);
    flex-direction: row-reverse;
    justify-content: space-between;
    inline-size: auto;
  }
}

@media (max-width: 31.1875rem) {
  .old-course lecture-page.is-room > .main-flex {
    gap: 0;
    padding: 0;
  }

  .old-course lecture-page.is-room #videos-side {
    gap: var(--space-2);
    padding: var(--space-2) 0.625rem 0.625rem;
    border-radius: 0;
  }

  .old-course lecture-page.is-room .cls-camera {
    inline-size: 8rem;
    border-radius: var(--radius-small);
  }

  .old-course lecture-page.is-room .right-side-main {
    border: 0;
    border-radius: 0;
  }

  .old-course lecture-page.is-room .right-side-main-top {
    min-block-size: 3.375rem;
    padding: 0.4375rem var(--space-3);
  }

  .old-course lecture-page.is-room .contents-manager > .contents-screens-parent {
    gap: var(--space-2);
    padding: 0.625rem var(--space-3) 4rem;
  }

  .old-course lecture-page.is-room .cslide-stage {
    padding: var(--space-4) 0.875rem 0.75rem;
  }

  .old-course lecture-page.is-room .oc-room-status.is-card {
    padding: var(--space-5) var(--space-4);
  }

  /* the side between the bars, over the cameras too: fixed under the top bar, over the keys' bar */
  .old-course lecture-page.is-room .right-side-bar {
    position: fixed;
    inset-block: var(--nb-height, 0px) var(--oc-keys-h);
    border-radius: 0;
    border-start-end-radius: var(--radius-card);
    border-end-end-radius: var(--radius-card);
  }

  .old-course lecture-page.is-room.is-on-call .right-side-bar {
    inset-block-end: 0;
  }

  .old-course lecture-page.is-room .right-side:not(.rsb-closed) .rsb-transparent {
    position: fixed;
    inset-block: var(--nb-height, 0px) var(--oc-keys-h);
  }

  .old-course lecture-page.is-room.is-on-call .right-side:not(.rsb-closed) .rsb-transparent {
    inset-block-end: 0;
  }
}

@media (max-width: 22.5rem) {
  .old-course lecture-page.is-room .contents-manager > .contents-screens-parent > .screens-control > .navigator > .goto {
    inline-size: 2rem;
    block-size: 2rem;
  }

  .old-course lecture-page.is-room .contents-manager > .contents-screens-parent > .screens-control > .navigator > .goto-content {
    inline-size: 2.5rem;
  }
}

/* ── The meeting view (#view3.meeting): the slide, the board, a screen shared, the strip and the side out of sight; the
   cameras' part takes the room, on black while on the call ── */
.old-course lecture-page.is-room.is-meeting .right-side {
  display: none;
}

.old-course lecture-page.is-room.is-meeting > .main-flex {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  padding: 0;
}

.old-course lecture-page.is-room.is-meeting #videos-side {
  order: 0;
  z-index: 9900;
  border-radius: 0;
}

.old-course lecture-page.is-room.is-meeting #media-division {
  display: flex;
  flex-direction: row;
  overflow: visible;
  background: initial;
  white-space: normal;
  line-height: normal;
}

.old-course lecture-page.is-room.is-meeting .cls-cameras {
  flex: 1 1 auto;
}

.old-course lecture-page.is-room.is-meeting .cls-camera-list {
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
  justify-content: initial;
  align-content: start;
  inline-size: 100%;
  overflow: visible;
}

/* the tiles (.video-division) by how many (data-qty): half the width on a phone, a third from 576px, a quarter from 768px,
   a fifth from 992px; their pictures' heights as the old's (the camera-off cards the same) */
.old-course lecture-page.is-room .cls-cameras.is-meeting .cls-camera {
  inline-size: 50%;
  border-radius: 0;
}

.old-course lecture-page.is-room .cls-cameras.is-meeting :is(.cls-camera video, .cls-card > .img-box) {
  inline-size: 100%;
  block-size: calc(25vh - 10px);
}

.old-course lecture-page.is-room .cls-cameras.is-meeting[data-qty="<2"] .cls-camera,
.old-course lecture-page.is-room .cls-cameras.is-meeting[data-qty="<3"] .cls-camera {
  inline-size: 100%;
}

.old-course lecture-page.is-room .cls-cameras.is-meeting[data-qty="<2"] :is(.cls-camera video, .cls-card > .img-box) {
  block-size: calc(100vh - 48px);
}

.old-course lecture-page.is-room .cls-cameras.is-meeting[data-qty="<3"] :is(.cls-camera video, .cls-card > .img-box) {
  block-size: calc(100vh - 47px);
}

/* two on a phone: the other fills the screen, the reader's own floats small at its top */
.old-course lecture-page.is-room .cls-cameras.is-meeting[data-qty="<3"] .cls-camera.is-self:not([hidden]) {
  position: absolute;
  inset-block-start: 100px;
  z-index: 2;
  inline-size: 100px;
  margin: 10px;
}

.old-course lecture-page.is-room .cls-cameras.is-meeting[data-qty="<3"] .cls-camera.is-self :is(video, .img-box) {
  block-size: 100%;
  min-block-size: 120px;
  border: 2px solid var(--site-navy-title);
  border-radius: 5px;
  background-clip: padding-box;
}

.old-course lecture-page.is-room .cls-cameras.is-meeting[data-qty="<5"] :is(.cls-camera video, .cls-card > .img-box) {
  block-size: calc(25vh - 12px);
}

.old-course lecture-page.is-room .cls-cameras.is-meeting[data-qty="<9"] :is(.cls-camera video, .cls-card > .img-box) {
  block-size: calc(33vh - 14px);
}

@media (min-width: 400px) {
  .old-course lecture-page.is-room .cls-cameras.is-meeting :is(.cls-camera video, .cls-card > .img-box) {
    block-size: calc(33.33vh - 12px);
  }

  .old-course lecture-page.is-room .cls-cameras.is-meeting[data-qty="<5"] .cls-camera {
    inline-size: 50%;
  }

  .old-course lecture-page.is-room .cls-cameras.is-meeting[data-qty="<5"] :is(.cls-camera video, .cls-card > .img-box) {
    block-size: calc(50vh - 24px);
  }

  .old-course lecture-page.is-room .cls-cameras.is-meeting[data-qty="<9"] :is(.cls-camera video, .cls-card > .img-box) {
    block-size: calc(25vh - 12px);
  }
}

@media (min-width: 576px) {
  .old-course lecture-page.is-room .cls-cameras.is-meeting .cls-camera {
    inline-size: 33.33%;
  }

  .old-course lecture-page.is-room .cls-cameras.is-meeting[data-qty="<3"] .cls-camera,
  .old-course lecture-page.is-room .cls-cameras.is-meeting[data-qty="<3"] .cls-camera.is-self:not([hidden]) {
    position: relative;
    inset-block-start: 0;
    inline-size: 50%;
    margin: 0;
  }

  .old-course lecture-page.is-room .cls-cameras.is-meeting[data-qty="<3"] :is(.cls-camera video, .cls-card > .img-box),
  .old-course lecture-page.is-room .cls-cameras.is-meeting[data-qty="<3"] .cls-camera.is-self :is(video, .img-box) {
    block-size: calc(100vh - 47px);
    min-block-size: 0;
    border: none;
    border-radius: 0;
  }

  .old-course lecture-page.is-room .cls-cameras.is-meeting[data-qty="<9"] :is(.cls-camera video, .cls-card > .img-box) {
    block-size: calc(33.33vh - 12px);
  }
}

@media (min-width: 768px) {
  .old-course lecture-page.is-room .cls-cameras.is-meeting .cls-camera {
    inline-size: 25%;
  }

  .old-course lecture-page.is-room .cls-cameras.is-meeting[data-qty="<9"] :is(.cls-camera video, .cls-card > .img-box) {
    block-size: calc(33vh - 25px);
  }
}

@media (min-width: 992px) {
  .old-course lecture-page.is-room .cls-cameras.is-meeting .cls-camera {
    inline-size: 20%;
  }

  .old-course lecture-page.is-room .cls-cameras.is-meeting :is(.cls-camera video, .cls-card > .img-box) {
    block-size: calc(25vh - 10px);
  }

  .old-course lecture-page.is-room .cls-cameras.is-meeting[data-qty="<5"] :is(.cls-camera video, .cls-card > .img-box) {
    block-size: calc(50vh - 24px);
  }

  .old-course lecture-page.is-room .cls-cameras.is-meeting[data-qty="<9"] .cls-camera {
    inline-size: 25%;
  }

  .old-course lecture-page.is-room .cls-cameras.is-meeting[data-qty="<9"] :is(.cls-camera video, .cls-card > .img-box) {
    block-size: calc(50vh - 24px);
  }
}

/* (the counts' rules after the widths': one or two fill the room at every width, as the old's) */
@media (min-width: 576px) {
  .old-course lecture-page.is-room .cls-cameras.is-meeting[data-qty="<2"] .cls-camera {
    inline-size: 100%;
  }
}

/* the meeting view's pictures shown whole on black, as the old's video (its own size, no cutting) */
.old-course lecture-page.is-room .cls-cameras.is-meeting .cls-camera:not(.cls-card) {
  background: var(--color-cams);
}

.old-course lecture-page.is-room .cls-cameras.is-meeting .cls-camera video {
  aspect-ratio: auto;
  object-fit: contain;
  background: transparent;
}

/* a camera that's off (the old's .img-box): on the cameras' navy, the person's letter in its ring (the avatar picture: 80px,
   4px), another's name on the strip at its foot, the reader's own under the ring; the ring blinking while they talk
   (@keyframes plink) */
.old-course lecture-page.is-room .cls-card[hidden] {
  display: none;
}

.old-course lecture-page.is-room .cls-card {
  position: relative;
  background: var(--color-cams-key);
}

.old-course lecture-page.is-room .cls-card::after {
  display: none;
}

.old-course lecture-page.is-room .cls-card > .img-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  aspect-ratio: 4 / 3;
  padding: var(--space-2);
  overflow: hidden;
  background: var(--color-cams-key);
  text-align: center;
}

.old-course lecture-page.is-room .cls-card .cls-card-letter {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: none;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  margin: 0;
  padding: 0;
  border: 3px solid var(--color-cams-line);
  border-radius: 50%;
  background: var(--color-cams);
  color: var(--site-navy-title);
  font-size: var(--font-size-heading);
  line-height: 1;
}

.old-course lecture-page.is-room .cls-card .cls-card-name {
  display: block;
  max-inline-size: 100%;
  margin-block-start: var(--space-2);
  padding: 0 var(--space-1);
  overflow: hidden;
  background: none;
  color: var(--site-navy-title);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.6;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* in the meeting view's wall the cards are as large as the pictures */
.old-course lecture-page.is-room .cls-cameras.is-meeting .cls-card > .img-box {
  aspect-ratio: auto;
}

.old-course lecture-page.is-room .cls-cameras.is-meeting .cls-card .cls-card-letter {
  inline-size: 5rem;
  block-size: 5rem;
  border-width: 4px;
  font-size: var(--font-size-stat);
}

.old-course lecture-page.is-room .cls-cameras.is-meeting .cls-card .cls-card-name {
  margin-block-start: var(--space-4);
  font-size: 1.125rem;
}

.old-course lecture-page.is-room .cls-card.is-talking .cls-card-letter {
  animation: oc-plink 1s infinite;
}

@keyframes oc-plink {
  from {
    border-color: var(--color-cams-line);
  }

  to {
    border-color: var(--site-teal);
  }
}

@media (prefers-reduced-motion: reduce) {
  .old-course lecture-page.is-room .cls-card.is-talking .cls-card-letter {
    animation: none;
    border-color: var(--site-teal);
  }
}

/* ── each tile's own sound and «ملء الشاشة» (media_player.css's .control): a bar at its foot on hover and with the
   keyboard, the volume key at its start, «ملء الشاشة» at its end; the name's strip hides meanwhile, as the old's ── */
.old-course lecture-page.is-room .cls-camera > .cls-picture-bar {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 2;
  display: none;
  block-size: 43px;
  background: color-mix(in srgb, var(--color-cams) 55%, transparent);
}

.old-course lecture-page.is-room .cls-camera:is(:hover, :focus-within) > .cls-picture-bar {
  display: block;
}

.old-course lecture-page.is-room .cls-camera:is(:hover, :focus-within) > .cls-picture-name {
  display: none;
}

.old-course lecture-page.is-room .cls-camera > .cls-round.cls-picture-full,
.old-course lecture-page.is-room .cls-camera > .cls-picture-sound {
  position: absolute;
  inset-block-start: auto;
  inset-block-end: 4px;
  z-index: 3;
  opacity: 0;
}

.old-course lecture-page.is-room .cls-camera > .cls-round.cls-picture-full {
  inset-inline-start: auto;
  inset-inline-end: 4px;
}

.old-course lecture-page.is-room .cls-camera > .cls-picture-sound {
  inset-inline-start: 4px;
  inset-inline-end: auto;
  display: flex;
  align-items: center;
}

.old-course lecture-page.is-room .cls-camera:is(:hover, :focus-within) > :is(.cls-round.cls-picture-full, .cls-picture-sound) {
  opacity: 1;
}

/* (the old's rule: shown on hover; a touch screen shows them as it's touched, as the old's did) */
@media (hover: none), (pointer: coarse) {
  .old-course lecture-page.is-room .cls-camera > :is(.cls-round.cls-picture-full, .cls-picture-sound) {
    opacity: 0;
  }

  .old-course lecture-page.is-room .cls-camera:is(:hover, :focus-within, :active) > :is(.cls-round.cls-picture-full, .cls-picture-sound) {
    opacity: 1;
  }
}

/* the bar's buttons: 35px round, light, darker on hover */
.old-course lecture-page.is-room .cls-camera > .cls-round.cls-picture-full,
.old-course lecture-page.is-room .cls-picture-sound > .cls-round {
  inline-size: 35px;
  block-size: 35px;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--color-cams-ink);
}

.old-course lecture-page.is-room .cls-camera > .cls-round.cls-picture-full:hover,
.old-course lecture-page.is-room .cls-picture-sound > .cls-round:hover {
  background: color-mix(in srgb, var(--color-cams) 45%, transparent);
}

/* the volume key held: white on black (.volume-control-box:hover > .on-volume) */
.old-course lecture-page.is-room .cls-picture-sound:hover > .cls-round {
  background: var(--color-cams);
  color: var(--site-navy-title);
}

/* the slider: the meeting view's only (as the old's), opening beside the key on hover and with the keyboard, 100px on
   black */
.old-course lecture-page.is-room .cls-picture-sound > .cls-sound-level {
  display: none;
  inline-size: 100px;
  block-size: 35px;
  margin: 0;
  padding: 0 12px;
  border-radius: 20px;
  background: var(--color-cams);
  accent-color: var(--color-cams-ink);
  cursor: pointer;
}

.old-course lecture-page.is-room .cls-cameras.is-meeting .cls-picture-sound:is(:hover, :focus-within) > .cls-sound-level:not([hidden]) {
  display: inline-block;
}

/* the reader's own camera off in the meeting view: no name strip under its card (the old's .my-video.video-off) */
.old-course lecture-page.is-room .cls-card.is-self > .cls-picture-bar {
  display: none;
}

/* ── «شارك» in the kit's look (Task indoor, part g; the owner's approval of 31 Oct 2026, the boards Course and
   Course-phone, frames ١ and ٢): the old feed as it was (Task 7.23 part c1: the old css/common/glob_posts.css and
   css/course/posts_local.css, the old's markup and every control in its place), its look the kit's, in the page's tokens:
   one column (720px), the bar's three keys one strip of round keys with the red count, the composer Community's compose
   card, the posts cards, the question and the poll as /community's (cm-kit), the six reactions round, the window
   (the actions, the confirm) the kit's. The old's style="" attributes are the oc- rules here. ── */

.old-course old-feed {
  --oc-pad: 1.125rem;
  display: block;
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: var(--course-feed);
  margin-inline: auto;
  padding: 0 var(--space-5) calc(var(--space-7) + var(--space-4));
  color: var(--color-text);
  font-size: var(--font-size-body);
  line-height: var(--line-height);
  text-align: start;
}

.old-course old-feed .hidden {
  display: none !important;
}

/* (the old page's `*` user-select: none; what's written is still chosen and copied) */
.old-course old-feed :is(textarea, input, select) {
  user-select: text;
}

/* the old's boxes round the lists (the old #view2's .main-flex and the like), only holding them now */
.old-course old-feed .main-flex {
  display: block;
  border: 0;
}

.old-course old-feed .right-side,
.old-course old-feed .right-side-main,
.old-course old-feed .right-side-main-bottom,
.old-course old-feed #right-side-main-section {
  display: block;
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 0;
  text-align: start;
}

.old-course old-feed #posts-section {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  min-inline-size: 0;
}

.old-course old-feed.display-on #posts-section {
  display: none;
}

.old-course old-feed #posts-lists {
  min-inline-size: 0;
}

.old-course old-feed .posts-list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 0;
}

/* a post opened slides in from the end in half a second, over the lists (the old's) */
.old-course old-feed #display-section {
  position: relative;
  inline-size: 100%;
  inset-inline-start: 100%;
  transition-property: inset-inline-start;
  transition-duration: 0.5s;
}

.old-course old-feed.display-on #display-section {
  inset-inline-start: 0;
}

.old-course old-feed .oc-display-holder {
  inline-size: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .old-course old-feed #display-section {
    transition-duration: 0s;
  }
}

/* what the feed says on its own (an error, nothing yet): a note */
.old-course old-feed .oc-feed-note,
.old-course old-feed .alert {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-small);
  font-size: var(--font-size-small);
  line-height: 1.7;
  text-align: start;
}

.old-course old-feed .oc-feed-note,
.old-course old-feed .alert-info {
  background: var(--color-info-soft);
  color: var(--color-text);
}

.old-course old-feed .alert-danger {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.old-course old-feed .alert-success {
  background: var(--color-success-soft);
  color: var(--color-chip-teal-text);
}

.old-course old-feed .oc-feed-said {
  margin: 0;
}

/* ── The buttons (glob_style.css's .btn-info, .btn-danger, .btn-primary and the rest of the old's), the kit's ── */

.old-course old-feed .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: var(--course-tap);
  margin: 0;
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--font-size-body);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.old-course old-feed .btn > svg {
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.old-course old-feed .btn:has(> svg:only-child) {
  inline-size: var(--course-tap);
  padding: 0;
}

.old-course old-feed .btn:is(:disabled, .disabled) {
  opacity: 0.55;
  cursor: not-allowed;
}

/* the second key: a white one with the card's drop */
.old-course old-feed .btn-default {
  border-color: var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-button) !important;
}

.old-course old-feed .btn-default:is(:hover, :focus, :active) {
  border-color: var(--color-border) !important;
  background-color: var(--color-raised) !important;
  color: var(--color-text) !important;
}

/* the main key: the navy one (the yellow one in the dark), as the app's */
.old-course old-feed :is(.btn-info, .btn-primary, .btn-success) {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-primary) !important;
}

.old-course old-feed :is(.btn-info, .btn-primary, .btn-success):is(:hover, :focus, :active, .active) {
  border-color: var(--color-primary-strong);
  background-color: var(--color-primary-strong);
  color: var(--color-on-primary);
}

.old-course old-feed .btn-danger {
  border-color: var(--color-danger-fill);
  background-color: var(--color-danger-fill);
  color: var(--color-on-fill);
  box-shadow: 0 var(--drop-button) 0 var(--color-danger-drop) !important;
}

.old-course old-feed .btn-danger:is(:hover, :focus, :active, .active) {
  border-color: var(--color-danger-fill);
  background-color: var(--color-danger-fill);
  color: var(--color-on-fill);
}

.old-course old-feed .btn-link {
  min-block-size: var(--control-height-small);
  padding: 0 var(--space-2);
  border-color: transparent;
  border-radius: var(--radius-small);
  background-color: transparent;
  color: var(--color-link);
  box-shadow: none !important;
}

.old-course old-feed .btn-link:is(:hover, :focus, :active) {
  border-color: transparent;
  background-color: transparent;
  color: var(--color-link);
  text-decoration: underline;
}

/* a person's letter in a circle: grey, and filled for trainers and staff (/community's) */
.old-course old-feed .avatar {
  display: inline-grid;
  flex: none;
  place-items: center;
  inline-size: var(--avatar-large);
  block-size: var(--avatar-large);
  overflow: hidden;
  border-radius: 50%;
  background: var(--color-chip-grey);
  color: var(--color-chip-grey-text);
  font-size: var(--font-size-body);
  font-weight: 700;
  line-height: 1;
}

.old-course old-feed .avatar.is-staff {
  background: var(--color-staff);
  color: var(--color-on-staff);
}

/* «مدرّب» teal, «مراقب» and «مشرف» the staff's navy: chips */
.old-course old-feed .oc-badge {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--chip-height);
  padding-inline: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-staff);
  color: var(--color-on-staff);
  font-size: var(--font-size-small);
  font-weight: 700;
  line-height: 1.4;
}

.old-course old-feed .oc-badge.is-trainer {
  background: var(--color-chip-teal);
  color: var(--color-chip-teal-text);
}

/* ── The bar: its three keys one strip of round keys (the red count, the open one navy), its lists a card under it ── */

.old-course old-feed .main-bar {
  padding-block: var(--space-3);
  background: var(--color-bg);
}

@media (min-width: 500px) {
  .old-course old-feed .main-bar {
    position: sticky;
    inset-block-start: var(--nb-height, 0px);
    z-index: 20;
  }
}

.old-course old-feed .control-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  inline-size: 100%;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.old-course old-feed .control-bar > .item {
  display: block;
  inline-size: auto;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: auto;
}

.old-course old-feed .control-bar > .item > .key {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: var(--course-key);
  block-size: var(--course-key);
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-raised);
  color: var(--color-quiet);
  cursor: pointer;
}

.old-course old-feed .control-bar > .item > .key:hover {
  border-color: var(--color-muted);
  color: var(--color-text);
}

.old-course old-feed .control-bar > .menu.open > .key {
  border-color: var(--color-staff);
  background: var(--color-staff);
  color: var(--color-on-staff);
}

.old-course old-feed .control-bar > .item > .key > .icon {
  display: grid;
  place-items: center;
  inline-size: auto;
  block-size: auto;
  line-height: 1;
}

.old-course old-feed .control-bar > .item > .key > .icon > svg {
  inline-size: 1.375rem;
  block-size: 1.375rem;
}

/* the new ones counted: red, hanging at the key's top end */
.old-course old-feed .control-bar > .item > .key > .count {
  position: absolute;
  inset-block-start: -0.4375rem;
  inset-inline-end: -0.4375rem;
  z-index: 1;
  box-sizing: border-box;
  min-inline-size: var(--course-count);
  block-size: var(--course-count);
  padding-inline: 0.3125rem;
  border: 2px solid var(--color-surface);
  border-radius: var(--radius-pill);
  background: var(--color-danger-fill);
  color: var(--color-on-fill);
  font-size: var(--font-size-tiny);
  font-weight: 700;
  line-height: 1rem;
  text-align: center;
}

.old-course old-feed .control-bar > .item > .key > .count:empty {
  display: none;
}

/* the red ✕ while a post is open: one more key of the strip */
.old-course old-feed #close-display {
  display: none;
}

.old-course old-feed.display-on #close-display {
  display: block;
}

.old-course old-feed #close-display .btn {
  inline-size: var(--course-key);
  block-size: var(--course-key);
  min-block-size: 0;
  padding: 0;
  border-radius: var(--radius);
  box-shadow: none !important;
}

/* a key's list: a card under the strip (the old's caret is gone, the card hangs under the strip's middle) */
.old-course old-feed .control-bar > .menu > .body {
  position: absolute;
  inset-block-start: calc(100% + var(--space-2));
  inset-inline: 0;
  z-index: 90;
  display: none;
  inline-size: min(20rem, 100%);
  margin-inline: auto;
}

.old-course old-feed .control-bar > .menu.open > .body {
  display: block;
}

.old-course old-feed .control-bar > .menu > .body > span {
  display: none;
}

.old-course old-feed .control-bar > .menu > .body > .inner {
  min-block-size: 2.5rem;
  max-block-size: min(25rem, 70dvh);
  padding: var(--space-2);
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
  text-align: start;
}

/* the lists' rows: «منشورات الكل», «منشوراتي», «محفوظات» and the folds, as the kit's menu rows */
.old-course old-feed .posters-list > [role="listbox"] {
  margin-block-end: var(--space-2);
  padding-block-end: var(--space-2);
  border-block-end: 1px solid var(--color-rule);
}

.old-course old-feed .see-posts-key {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: var(--course-tap);
  padding-inline: var(--space-3);
  border-radius: var(--radius-small);
  color: var(--color-text);
  text-align: start;
  cursor: pointer;
}

.old-course old-feed .see-posts-key:hover {
  background: var(--color-raised);
}

.old-course old-feed .see-posts-key.active {
  background: var(--color-current);
  font-weight: 700;
}

.old-course old-feed .oc-fold-key {
  justify-content: space-between;
}

.old-course old-feed .oc-fold-key > svg {
  flex: none;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  color: var(--color-muted);
}

.old-course old-feed .control-bar .students-list {
  display: grid;
  gap: 2px;
  max-block-size: 12.5rem;
  margin: 0 0 var(--space-1);
  padding: 2px var(--space-2) var(--space-1) var(--space-2);
  overflow: auto;
}

.old-course old-feed .control-bar .students-list:empty {
  display: none;
}

.old-course old-feed .control-bar .students-list > .student {
  display: flex;
  align-items: center;
  min-block-size: 2.5rem;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-small);
  color: var(--color-text);
  cursor: pointer;
}

.old-course old-feed .control-bar .students-list > .student:hover {
  background: var(--color-raised);
}

.old-course old-feed .control-bar .students-list > .student.active {
  background: var(--color-current);
}

.old-course old-feed .control-bar .students-list > .student.active .fname {
  color: var(--color-quiet);
}

.old-course old-feed .control-bar .students-list .avatar {
  inline-size: 1.75rem;
  block-size: 1.75rem;
  font-size: var(--font-size-small);
}

.old-course old-feed .control-bar .students-list .avatar > span {
  display: block;
}

.old-course old-feed .control-bar .students-list .details {
  min-inline-size: 0;
  padding-inline-start: var(--space-3);
  text-align: start;
}

.old-course old-feed .control-bar .students-list .details > .uname {
  font-size: var(--font-size-small);
  font-weight: 700;
  line-height: 1.5;
}

.old-course old-feed .control-bar .students-list .details > .fname {
  color: var(--color-muted);
  font-size: var(--font-size-small);
  line-height: 1.5;
}

.old-course old-feed .control-bar .students-list > .oc-tool-row {
  cursor: default;
}

.old-course old-feed .control-bar .students-list .oc-tool-open {
  display: flex;
  flex: 1;
  align-items: center;
  min-inline-size: 0;
  cursor: pointer;
}

.old-course old-feed .control-bar .students-list .oc-tool-open .fname {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.old-course old-feed .control-bar .students-list > .oc-tool-row > .details {
  flex: 1;
}

.old-course old-feed .control-bar .students-list .oc-tool-key {
  flex: none;
  min-block-size: var(--control-height-small);
  font-size: var(--font-size-small);
}

/* the two lists of what happened to his: a line is the person's letter with the kind's mark, the words, how long ago */
.old-course old-feed .interaction-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-small);
  color: var(--color-text);
  cursor: pointer;
}

.old-course old-feed .interaction-item:hover {
  background: var(--color-raised);
}

.old-course old-feed .interaction-item.non-seen {
  background: var(--color-current);
}

.old-course old-feed .interaction-item > .actor {
  position: relative;
  flex: none;
}

.old-course old-feed .interaction-item > .actor > .avatar {
  inline-size: var(--cm-dots);
  block-size: var(--cm-dots);
}

.old-course old-feed .interaction-item > .actor > .icon {
  position: absolute;
  inset-block-end: -0.25rem;
  inset-inline-end: -0.25rem;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  inline-size: var(--course-count);
  block-size: var(--course-count);
  border: 2px solid var(--color-surface);
  border-radius: 50%;
  background: var(--color-staff);
  color: var(--color-on-staff);
}

.old-course old-feed .interaction-item.non-seen > .actor > .icon {
  border-color: var(--color-current);
}

.old-course old-feed .interaction-item > .actor > .icon > svg {
  inline-size: 0.6875rem;
  block-size: 0.6875rem;
  stroke-width: 2.4;
}

.old-course old-feed .interaction-item > .body {
  min-inline-size: 0;
  text-align: start;
}

.old-course old-feed .interaction-item > .body > .details {
  font-size: var(--font-size-small);
  line-height: 1.7;
}

.old-course old-feed .interaction-item > .body > .date {
  display: flex;
  gap: var(--space-1);
  color: var(--color-quiet);
  font-size: var(--font-size-small);
  line-height: 1.6;
}

.old-course old-feed .interaction-item > .body > .date > .timestamp {
  white-space: nowrap;
}

.old-course old-feed .oc-more-lines {
  inline-size: 100%;
}

/* ── The composer: Community's compose card (the letter, the field, the clip, the send; the tray of attachments under it) ── */

.old-course old-feed .oc-feed-composer:empty {
  display: none;
}

.old-course old-feed .posting-form.main {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.old-course old-feed .posting-form > .top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.old-course old-feed .posting-form.main > .top {
  padding: 0.875rem var(--space-4);
}

.old-course old-feed .oc-initial {
  display: inline-grid;
  flex: none;
  place-items: center;
  inline-size: var(--avatar-large);
  block-size: var(--avatar-large);
  border-radius: 50%;
  background: var(--color-on);
  color: var(--color-cams);
  font-weight: 700;
  line-height: 1;
}

.old-course old-feed .posting-form > .top > .text-area {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-2);
  min-inline-size: 0;
}

.old-course old-feed .posting-form > .top > .text-area > textarea {
  display: block;
  flex: 1;
  box-sizing: border-box;
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: var(--course-key);
  margin: 0;
  padding: 0.6875rem var(--space-4);
  overflow: hidden;
  border: 0;
  border-radius: calc(var(--course-key) / 2);
  background: var(--color-raised);
  box-shadow: inset 0 0 0 1px var(--color-input-border);
  color: var(--color-text);
  font: inherit;
  line-height: 1.6;
  resize: none;
  appearance: none;
}

.old-course old-feed .posting-form > .top > .text-area > textarea::placeholder {
  color: var(--color-muted);
  opacity: 1;
}

/* the clip: round, white, navy while the tray is open */
.old-course old-feed .posting-form > .top > .text-area > button {
  flex: none;
  inline-size: var(--course-round);
  block-size: var(--course-round);
  min-block-size: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-quiet);
  box-shadow: none !important;
}

.old-course old-feed .posting-form > .top > .text-area > button:is(:hover, :focus, :active) {
  border-color: var(--color-border);
  background: var(--color-raised);
  color: var(--color-text);
}

.old-course old-feed .posting-form > .top > .text-area > button[aria-expanded="true"] {
  border-color: var(--color-staff);
  background: var(--color-staff);
  color: var(--color-on-staff);
}

/* the send: the navy square key, its plane turned to the end */
.old-course old-feed .posting-form > .top > .btn {
  flex: none;
  inline-size: var(--course-tap);
  block-size: var(--course-tap);
  padding: 0;
}

.old-course old-feed :is(.posting-form > .top > .btn, .send) > svg {
  transform: scaleX(-1);
}

/* the comment box and the reply box: the same row, smaller */
.old-course old-feed .comment-box:not(:empty) {
  border-block-start: 1px solid var(--color-rule);
}

.old-course old-feed .posting-form:not(.main) > .top {
  gap: var(--space-2);
  padding: var(--space-3) 0.875rem;
}

.old-course old-feed .posting-form:not(.main) > .top > .text-area > textarea {
  min-block-size: var(--course-round);
  padding-block: 0.5625rem;
  padding-inline: var(--space-4);
  font-size: var(--font-size-small);
}

.old-course old-feed .posting-form:not(.main) > .top > .text-area > button {
  inline-size: var(--control-height);
  block-size: var(--control-height);
}

.old-course old-feed .posting-form:not(.main) > .top > .btn {
  inline-size: var(--control-height);
  block-size: var(--control-height);
  border-radius: var(--radius-small);
}

.old-course old-feed .reply-box .posting-form > .top {
  padding: 0;
}

/* the tray of attachments under the field */
.old-course old-feed .pfb {
  display: block;
  padding: 0 0.875rem var(--space-3);
  border-block-start: 1px solid var(--color-rule);
}

.old-course old-feed .pfb > .keys-parent {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-block: var(--space-3);
}

.old-course old-feed .pfb > .keys-parent > .btn {
  inline-size: var(--course-key);
  block-size: var(--course-round);
  min-block-size: 0;
  padding: 0;
  border-color: var(--color-border);
  background-color: var(--color-raised);
  color: var(--color-quiet);
  box-shadow: none !important;
}

.old-course old-feed .pfb > .keys-parent > .btn > svg {
  inline-size: 1.3125rem;
  block-size: 1.3125rem;
}

.old-course old-feed .pfb > .keys-parent > :is(.btn-primary, .btn[aria-pressed="true"]) {
  border-color: var(--color-staff) !important;
  background-color: var(--color-staff) !important;
  color: var(--color-on-staff) !important;
}

.old-course old-feed .pfb > .keys-parent > .btn:is(:hover, :focus, :active):not(.btn-primary, [aria-pressed="true"]) {
  color: var(--color-text) !important;
}

/* what is being attached: a file or a recording, its preview, the keys */
.old-course old-feed .pfb > :is(.file-form, .image-form, .audio-form, .video-form, .oc-question-form, .oc-poll-form) {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.old-course old-feed .pfb > :is(.file-form, .image-form, .audio-form, .video-form, .oc-question-form, .oc-poll-form)[hidden] {
  display: none;
}

.old-course old-feed .pfb :is(.file-form, .audio-form, .video-form) > .control,
.old-course old-feed .pfb .file-control,
.old-course old-feed .pfb .edit-control {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.old-course old-feed .pfb .file-details {
  display: flex;
  flex: 1;
  flex-direction: row-reverse;
  align-items: center;
  gap: var(--space-2);
  min-inline-size: 0;
}

.old-course old-feed .pfb .file-details > .name {
  flex: 1;
  min-inline-size: 0;
  padding: var(--space-2) var(--space-3);
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-raised);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.old-course old-feed .pfb .preview {
  text-align: center;
}

.old-course old-feed .pfb .preview:empty {
  display: none;
}

.old-course old-feed .pfb .preview > :is(img, video) {
  display: block;
  inline-size: 100%;
  max-block-size: 18.75rem;
  border-radius: var(--radius-inner);
  object-fit: cover;
  object-position: center;
}

.old-course old-feed .pfb .preview > audio {
  display: block;
  inline-size: 100%;
}

.old-course old-feed .pfb .image-form > .preview > img {
  inline-size: auto;
  max-inline-size: 100%;
  max-block-size: 15rem;
  margin-inline: auto;
}

.old-course old-feed .pfb .image-form > .file-control > .change {
  flex: 1;
}

.old-course old-feed .pfb .video-form > video {
  inline-size: 100%;
  min-block-size: 11.75rem;
  max-block-size: 15rem;
  border-radius: var(--radius-inner);
  background: var(--color-cams);
  object-fit: cover;
  object-position: center;
  transform: scale(-1, 1);
}

.old-course old-feed .pfb :is(.audio-form, .video-form) > .control > .duration {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--course-tap);
  padding-inline: var(--space-3);
  border-radius: var(--radius);
  background: var(--color-raised);
}

.old-course old-feed .pfb :is(.audio-form, .video-form) > .control > .duration > .passed {
  flex: 1;
  direction: ltr;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.old-course old-feed .oc-recorder-why {
  margin: 0;
  color: var(--color-danger);
  font-size: var(--font-size-small);
}

/* a question to share: the two sources as pills, the rows to pick from, the one picked */
.old-course old-feed .oc-picker-keys {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.old-course old-feed .oc-picker-keys > .btn {
  min-block-size: 2.375rem;
  padding-inline: var(--space-4);
  border-radius: var(--radius-pill);
  box-shadow: none !important;
}

.old-course old-feed .oc-picker-keys > :is(.btn-primary, .btn[aria-pressed="true"]) {
  border-color: var(--color-primary) !important;
  background-color: var(--color-primary) !important;
  color: var(--color-on-primary) !important;
}

.old-course old-feed .oc-picker-subskill,
.old-course old-feed .oc-feed-report-note {
  box-sizing: border-box;
  inline-size: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-small);
  background: var(--color-input-bg);
  color: var(--color-text);
  font: inherit;
}

.old-course old-feed .oc-picker-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.old-course old-feed .oc-picker-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  background: var(--color-raised);
}

.old-course old-feed .oc-picker-row > :first-child {
  flex: 1;
  min-inline-size: 0;
}

.old-course old-feed .oc-picker-row .cm-question {
  padding: 0;
  border: 0;
  background: transparent;
}

.old-course old-feed .oc-picker-row > .btn {
  flex: none;
  min-block-size: var(--control-height);
  border-color: var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-button) !important;
}

.old-course old-feed .oc-picker-row > .btn:is(:hover, :focus, :active) {
  border-color: var(--color-border);
  background-color: var(--color-raised);
  color: var(--color-text);
}

.old-course old-feed .oc-picker-chosen {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.old-course old-feed .oc-picker-chosen > .send,
.old-course old-feed .oc-poll-form > .send {
  align-self: flex-end;
}

.old-course old-feed .oc-picker-status {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.old-course old-feed .oc-picker-status:empty {
  display: none;
}

/* the notes under the form («تم الإرسال», what went wrong): they leave by themselves */
.old-course old-feed .upload-response {
  max-block-size: 12.5rem;
  overflow: hidden;
  opacity: 1;
  transition-duration: 0.3s;
  transition-property: opacity, max-block-size;
}

.old-course old-feed .upload-response.is-going {
  max-block-size: 0;
  opacity: 0;
}

.old-course old-feed .upload-response > .alert {
  margin: 0 0.875rem 0.875rem;
}

.old-course old-feed .reply-box .posting-form {
  transition-duration: 0.2s;
}

.old-course old-feed .oc-note-close {
  float: inline-end;
  margin-block-start: 0.25rem;
  cursor: pointer;
}

.old-course old-feed .oc-note-close > svg {
  display: block;
  inline-size: 1.125rem;
  block-size: 1.125rem;
}

@media (prefers-reduced-motion: reduce) {
  .old-course old-feed .upload-response,
  .old-course old-feed .reply-box .posting-form {
    transition-duration: 0s;
  }
}

/* ── A post: a card (the writer, the words, what was shared, the counts, «تعليق» and «أعجبني», the comments) ── */

.old-course old-feed .post-item {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  text-align: start;
}

.old-course old-feed .post-item > .header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--oc-pad) 0;
}

.old-course old-feed .post-item > .header > .meta-data {
  flex: 1;
  min-inline-size: 0;
}

.old-course old-feed .post-item > .header > .meta-data > strong {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--font-size-body);
  font-weight: 700;
  line-height: 1.6;
}

.old-course old-feed .since {
  display: flex;
  gap: var(--space-1);
  color: var(--color-muted);
  font-size: var(--font-size-small);
  line-height: 1.7;
}

.old-course old-feed .since > .timestamp {
  white-space: nowrap;
}

.old-course old-feed .post-item > .header > .user-actions {
  display: flex;
  flex: none;
  flex-direction: row-reverse;
  align-items: center;
  gap: var(--space-1);
}

/* ⋯: round, quiet */
.old-course old-feed .post-item > .header > .user-actions .btn {
  inline-size: var(--cm-dots);
  block-size: var(--cm-dots);
  min-block-size: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  color: var(--color-quiet);
  box-shadow: none !important;
}

.old-course old-feed .post-item > .header > .user-actions .btn:is(:hover, :focus, :active) {
  border: 0 !important;
  background-color: var(--color-raised) !important;
  color: var(--color-text) !important;
}

/* the marks (saved, stopped, followed, pinned, waiting, hidden) */
.old-course old-feed .post-status-icons {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.old-course old-feed .post-status-icons:empty {
  display: none;
}

.old-course old-feed .post-status-icons > .oc-mark {
  display: grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: 0.5rem;
  background: var(--color-raised);
  color: var(--color-quiet);
}

.old-course old-feed .post-status-icons > .oc-mark > svg {
  inline-size: 0.9375rem;
  block-size: 0.9375rem;
}

/* the words and what was shared */
.old-course old-feed .post-item > .body {
  padding: 0 var(--oc-pad) 0.875rem;
}

.old-course old-feed .post-item > .body > .text-div {
  margin-block-start: 0.625rem;
}

.old-course old-feed .post-item > .body > .text-div:empty {
  display: none;
}

.old-course old-feed :is(.post-item > .body > .text-div, .comment-item .text-div) > pre {
  display: block;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: 1.95;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.old-course old-feed .post-item > .body > :is(.image-div, .video-div, .audio-div) {
  margin-block-start: var(--space-3);
}

.old-course old-feed .image-div {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-inner);
  background: var(--color-raised);
  text-align: center;
  cursor: zoom-in;
}

.old-course old-feed .image-div > .image,
.old-course old-feed .image-div > img {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
  margin: auto;
}

.old-course old-feed .image-div > .image.is-wide {
  inline-size: 100%;
}

/* a picture pressed fills the screen at its own size, and again goes back (the old's) */
.old-course old-feed .image-div.full-screen {
  position: fixed;
  inset: var(--nb-height, 0px) 0 0;
  z-index: 10000;
  display: flex;
  overflow: auto;
  border-radius: 0;
  background: var(--color-stage);
  cursor: zoom-out;
}

.old-course old-feed .image-div.full-screen > .image {
  inline-size: auto;
  max-inline-size: none;
  max-block-size: none;
  margin: auto;
}

html.full-screen-item {
  overflow: hidden;
}

.old-course old-feed :is(.video-div, .audio-div) video {
  display: block;
  inline-size: 100%;
  block-size: auto;
  max-block-size: 31.25rem;
  border-radius: var(--radius-inner);
  background: var(--color-cams);
  object-fit: contain;
  object-position: center;
}

.old-course old-feed .audio-div > audio {
  display: block;
  inline-size: 100%;
}

/* the question and the poll: as /community's (the box raised, the choices as rows, the share a bar) */
.old-course old-feed .post-item > .body > .oc-feed-extra {
  margin-block-start: var(--space-3);
}

/* the counts: «٣ تعليقات» opens the post, and the reactions as circles one over the other */
.old-course old-feed .post-item > .summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--oc-pad) 0.625rem;
}

.old-course old-feed .post-item > .summary:not(:has(> .comments > :not(:empty), > .reactions > *)) {
  display: none;
}

.old-course old-feed .post-item > .summary > .comments > .btn {
  min-block-size: 1.5rem;
  padding-inline: 0;
  font-size: var(--font-size-small);
  line-height: 1.7;
}

.old-course old-feed .post-item > .summary > .comments > .oc-feed-count {
  border: 0;
  background: none;
  color: var(--color-muted);
  cursor: default;
}

.old-course old-feed .display-post-button:empty,
.old-course old-feed .post-item > .summary > .comments > .oc-feed-count:empty {
  display: none;
}

.old-course old-feed .post-item > .summary > .reactions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline-start: auto;
  color: var(--color-quiet);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.old-course old-feed .post-item > .summary > .reactions:empty {
  display: none;
}

.old-course old-feed .post-item > .summary > .reactions > .reactions-list {
  display: flex;
}

.old-course old-feed .summary .like-btn-emo {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  inline-size: var(--space-5);
  block-size: var(--space-5);
  margin-inline: -0.375rem 0;
  border: 2px solid var(--color-surface);
  border-radius: 50%;
  background: var(--color-chip-teal);
  color: var(--color-on-text);
}

.old-course old-feed .summary .like-btn-emo:first-child {
  margin-inline-start: 0;
}

.old-course old-feed .summary .like-btn-emo > svg {
  inline-size: 0.8125rem;
  block-size: 0.8125rem;
  stroke-width: 2.2;
}

/* the foot: «تعليق» and «أعجبني», as text keys */
.old-course old-feed .post-item > .footer {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.375rem 0.625rem;
  border-block-start: 1px solid var(--color-rule);
}

.old-course old-feed .like_reactions.post {
  padding: 0;
}

.old-course old-feed .post-item > .footer > .comment-box-creator {
  inline-size: auto;
  min-block-size: var(--control-height);
  padding-inline: var(--space-3);
  border-color: transparent;
  border-radius: var(--radius-small);
  background-color: transparent;
  color: var(--color-quiet);
  box-shadow: none !important;
}

.old-course old-feed .post-item > .footer > .comment-box-creator:is(:hover, :focus, :active) {
  border-color: transparent !important;
  background-color: var(--color-raised) !important;
  color: var(--color-text) !important;
}

.old-course old-feed .oc-feed-comment-word {
  margin: 0;
}

.old-course old-feed .post-item > .footer > .comment-box-creator,
.old-course old-feed .post-item > .footer .like-btn-text {
  font-size: 0.875rem;
}

.old-course old-feed .like-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-quiet);
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}

.old-course old-feed .post-item > .footer .like-btn {
  min-block-size: var(--control-height);
  padding-inline: var(--space-3);
  border-radius: var(--radius-small);
}

.old-course old-feed .post-item > .footer .like-btn:hover {
  background: var(--color-raised);
  color: var(--color-text);
}

.old-course old-feed .like-btn-emo {
  display: inline-grid;
  place-items: center;
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.old-course old-feed .like-btn-emo > svg {
  inline-size: 1.125rem;
  block-size: 1.125rem;
}

.old-course old-feed .like-btn-text {
  min-inline-size: 0;
  margin: 0;
  font-size: var(--font-size-body);
}

.old-course old-feed .like-btn.active {
  color: var(--color-on-text);
}

/* the six: round keys in a pill over the foot (a comment's over its line, to the end), a word over the one pointed at */
.old-course old-feed .reactions-box {
  position: absolute;
  inset-block-end: calc(100% + var(--space-1));
  inset-inline-start: 0.625rem;
  z-index: 5;
  display: flex;
  gap: 2px;
  padding: 0.375rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
}

.old-course old-feed .reaction {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: var(--course-tap);
  block-size: var(--course-tap);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-quiet);
  cursor: pointer;
  transition: transform 0.07s ease-in-out;
}

.old-course old-feed .reaction > svg {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

.old-course old-feed .reaction:is(:hover, :focus-visible) {
  background: var(--color-raised);
  color: var(--color-text);
  transform: scale(1.15);
}

.old-course old-feed .reaction::before {
  content: attr(aria-label);
  position: absolute;
  inset-block-end: calc(100% + 0.25rem);
  inset-inline: 0;
  inline-size: max-content;
  margin-inline: auto;
  padding-inline: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-cams);
  color: var(--color-on-fill);
  font-size: var(--font-size-tiny);
  line-height: 1.6;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
}

.old-course old-feed .reaction:is(:hover, :focus-visible)::before {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .old-course old-feed .reaction,
  .old-course old-feed .reaction::before {
    transition-duration: 0s;
  }
}

/* ── The comments and the replies: bubbles, the reaction hanging at a bubble's end, «منذ», «رد» and «أعجبني» as text keys ── */

.old-course old-feed .post-item > .items-list.comments {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 0.875rem var(--oc-pad) var(--space-4);
  border-block-start: 1px dashed var(--color-border);
}

.old-course old-feed .post-item > .items-list.comments:empty {
  display: none;
}

.old-course old-feed .comment-item {
  min-inline-size: 0;
}

.old-course old-feed .oc-comment-top {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.old-course old-feed .comment-item .avatar {
  inline-size: var(--cm-letter-small);
  block-size: var(--cm-letter-small);
  font-size: var(--font-size-small);
}

.old-course old-feed .items-list.replys .avatar {
  inline-size: var(--avatar);
  block-size: var(--avatar);
}

.old-course old-feed .oc-comment-table {
  display: block;
  flex: 1;
  min-inline-size: 0;
}

.old-course old-feed .comment-item .body-row,
.old-course old-feed .comment-item .footer-row,
.old-course old-feed .comment-item .footer {
  display: block;
}

.old-course old-feed .comment-item .body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-inline-size: 0;
}

/* the bubble, with the reactions hanging from its bottom end */
.old-course old-feed .oc-bubble {
  position: relative;
  max-inline-size: 100%;
}

.old-course old-feed .oc-bubble:has(> .summary > .reactions > *) {
  margin-block-end: 0.75rem;
}

.old-course old-feed .comment-item .text-div {
  box-sizing: border-box;
  padding: 0.5rem 0.875rem 0.5625rem;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  background: var(--color-raised);
}

.old-course old-feed .comment-item .text-div[role="button"] {
  cursor: pointer;
}

.old-course old-feed .comment-item .text-div[role="button"]:hover {
  border-color: var(--color-border);
}

.old-course old-feed .comment-item .text-div > .oc-feed-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--font-size-small);
  font-weight: 700;
  line-height: 1.6;
}

.old-course old-feed .comment-item .text-div > pre {
  line-height: 1.85;
}

.old-course old-feed .comment-item .body-row.is-deleted .text-div {
  color: var(--color-muted);
  font-style: italic;
}

.old-course old-feed .comment-item.is-asked > .oc-comment-top .text-div {
  box-shadow: 0 0 0 2px var(--color-on);
}

.old-course old-feed .oc-bubble > .summary {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: var(--space-3);
  translate: 0 50%;
}

.old-course old-feed .oc-bubble > .summary > .reactions {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: var(--space-1);
  padding-inline: 0.375rem var(--space-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-quiet);
  font-size: var(--font-size-tiny);
  font-weight: 700;
  line-height: 1.6;
}

.old-course old-feed .oc-bubble > .summary > .reactions:empty {
  display: none;
}

.old-course old-feed .oc-bubble .summary .like-btn-emo {
  inline-size: 0.875rem;
  block-size: 0.875rem;
  margin: 0;
  border: 0;
  background: none;
}

.old-course old-feed .oc-bubble .summary .like-btn-emo > svg {
  inline-size: 0.8125rem;
  block-size: 0.8125rem;
}

.old-course old-feed .comment-item .image-div.comment {
  max-inline-size: 100%;
  margin-block-start: var(--space-2);
}

.old-course old-feed .comment-item .image-div.comment > img {
  max-block-size: 12.5rem;
  inline-size: auto;
}

.old-course old-feed .comment-item .image-div.comment > img.is-wide {
  inline-size: 100%;
  object-fit: contain;
}

.old-course old-feed .comment-item :is(.video-div, .audio-div) {
  inline-size: 100%;
  margin-block-start: var(--space-2);
}

.old-course old-feed .comment-item .video-div video {
  border-radius: var(--radius-inner);
}

/* the line under a bubble: «منذ…», «رد», «أعجبني» */
.old-course old-feed .oc-comment-foot {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-block-size: 2rem;
  margin-block-start: 0.125rem;
  padding-inline: 0.375rem;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.old-course old-feed .oc-comment-foot > .post-status-icons {
  opacity: 0.8;
}

.old-course old-feed .oc-comment-foot > .since {
  margin-inline-end: var(--space-1);
  font-size: var(--font-size-small);
  line-height: 1.6;
}

.old-course old-feed .oc-reply-key {
  min-block-size: 2rem;
  padding-inline: var(--space-2);
  font-size: var(--font-size-small);
}

.old-course old-feed .like_reactions.comment .like-btn {
  min-block-size: 2rem;
  padding-inline: var(--space-2);
  border-radius: var(--radius-small);
  color: var(--color-quiet);
  font-size: var(--font-size-small);
}

.old-course old-feed .like_reactions.comment .like-btn:hover {
  background: var(--color-raised);
  color: var(--color-text);
}

.old-course old-feed .like_reactions.comment .like-btn.active {
  color: var(--color-on-text);
}

.old-course old-feed .like_reactions.comment .like-btn-emo {
  display: none;
}

.old-course old-feed .like_reactions.comment .like-btn-text {
  font-size: var(--font-size-small);
}

/* the narrowest phones (under 360px): the six a little tighter, so the pill stays inside its card (the review of
   part g) */
@media (max-width: 22.4375rem) {
  .old-course old-feed .reactions-box {
    gap: 0;
    padding: 0.25rem;
  }
}

/* a comment's six: over its «أعجبني» (the box is put where it would stand in the key, then lifted over it) and from the
   card's start, so a narrow screen holds it */
.old-course old-feed .oc-comment-foot .reactions-box {
  inset-block-end: auto;
  inset-inline-start: var(--space-2);
  translate: 0 calc(-50% - 1.375rem);
}

/* the replies under a comment: in a step, in the same bubbles; the reply box in the same step */
.old-course old-feed .comment-item > .items-list,
.old-course old-feed .comment-item > .reply-box {
  padding-inline-start: calc(var(--cm-letter-small) + var(--space-3));
}

.old-course old-feed .comment-item > .items-list.replys:not(:empty) {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-block-start: 0.625rem;
}

.old-course old-feed .comment-item > .reply-box:not(:empty) {
  margin-block-start: 0.625rem;
}

/* ── The window (the actions of a post or a comment, and each asked again): the kit's, over a dimmed page ── */

.old-course old-feed dialog.modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  max-block-size: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  outline: 0;
  background: var(--color-backdrop);
  color: var(--color-text);
  align-items: center;
  justify-content: center;
}

.old-course old-feed dialog.modal[open] {
  display: flex;
}

.old-course old-feed dialog.modal::backdrop {
  background: transparent;
}

.old-course old-feed .modal.fade .modal-dialog {
  transform: translate(0, -25%);
  transition: transform 0.3s ease-out;
}

.old-course old-feed .modal.in .modal-dialog {
  transform: translate(0, 0);
}

@media (prefers-reduced-motion: reduce) {
  .old-course old-feed .modal.fade .modal-dialog {
    transition-duration: 0s;
  }
}

.old-course old-feed .modal-dialog {
  position: relative;
  inline-size: 100%;
  max-inline-size: 21.25rem;
  margin: var(--space-3);
}

.old-course old-feed .modal-content {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-window);
  background: var(--color-surface);
  box-shadow: var(--shadow-window);
  color: var(--color-text);
  outline: 0;
}

.old-course old-feed .modal-body {
  position: relative;
  padding: 0.875rem;
  font-size: var(--font-size-body);
}

.old-course old-feed .modal-body:has(.oc-feed-ask, .report-reasons-text) {
  padding: 1.375rem 1.375rem var(--space-3);
}

.old-course old-feed .modal-body .buttons-list .btn {
  display: flex;
  inline-size: 100%;
  min-block-size: var(--course-tap);
  padding: 0 var(--space-3);
  justify-content: flex-start;
  gap: var(--space-3);
  border: 0;
  border-radius: var(--radius-small);
  background: transparent;
  color: var(--color-text);
  font-weight: 400;
  text-align: start;
  white-space: normal;
  box-shadow: none !important;
}

.old-course old-feed .modal-body .buttons-list .btn:is(:hover, :focus-visible) {
  background: var(--color-raised);
  color: var(--color-text);
}

.old-course old-feed .modal-body .buttons-list .btn > svg {
  color: var(--color-on-text);
}

.old-course old-feed .oc-feed-ask {
  margin: 0;
}

.old-course old-feed .modal-footer {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-2) 1.375rem 1.375rem;
}

.old-course old-feed .modal-footer:empty {
  display: none;
}

.old-course old-feed .report-reasons-text {
  margin: 0 0 var(--space-2);
  padding-block-end: var(--space-2);
  border-block-end: 1px solid var(--color-rule);
  font-weight: 700;
}

.old-course old-feed .report-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--course-tap);
  border-radius: var(--radius-small);
}

.old-course old-feed .report-option label {
  flex: 1;
  margin: 0;
  padding-block: var(--space-1);
  font-weight: 400;
  cursor: pointer;
}

.old-course old-feed .report-option input {
  flex: none;
  margin: 0 var(--space-1);
  accent-color: var(--color-on-text);
}

/* ── A phone: the page's 12px, the cards a little closer ── */

@media (max-width: 31.1875rem) {
  .old-course old-feed {
    --oc-pad: 0.875rem;
    padding-inline: var(--space-3);
    padding-block-end: calc(var(--oc-keys-h) + var(--space-5));
  }

  .old-course old-feed .posting-form.main > .top {
    gap: var(--space-2);
    padding: var(--space-3);
  }

  .old-course old-feed .oc-initial {
    inline-size: var(--cm-letter-small);
    block-size: var(--cm-letter-small);
  }

  .old-course old-feed .posting-form > .top > .text-area > textarea {
    min-block-size: var(--course-tap);
    padding-block: 0.625rem;
    padding-inline: var(--space-3);
  }

  .old-course old-feed .posting-form > .top > .text-area > button {
    inline-size: var(--control-height);
    block-size: var(--control-height);
  }

  .old-course old-feed .posting-form.main > .top > .btn {
    inline-size: var(--control-height);
    block-size: var(--control-height);
  }

  .old-course old-feed .pfb {
    padding-inline: var(--space-3);
  }

  .old-course old-feed .post-item > .header > .avatar {
    inline-size: var(--cm-letter-small);
    block-size: var(--cm-letter-small);
  }
}