/* «مواد» (/materials and /materials/edit, Task 7.3a). Right to left first: logical properties only. Colours and sizes
   come from tokens.css. material-builder's pages are the model: the library's rows, and a material's tree («الهيكل»)
   beside the chosen item's panel, one under the other on a phone. */

/* the editor is wider than the other pages, so the tree and the panel sit side by side */
.app-main:has(> material-editor-page) {
  max-width: var(--wide-width);
}

materials-page,
material-editor-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

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

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

.mat-form-title {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-card-title);
  font-weight: 400;
}

.mat-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.mat-empty {
  margin: 0;
  color: var(--color-muted);
}

.mat-badge {
  display: inline-block;
  padding-inline: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-muted);
  font-size: var(--font-size-small);
  font-weight: 400;
}

.mat-badge-bin {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

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

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

/* ── The library ───────────────────────────────────────────────────────────────────────────────────────────── */

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

.mat-new {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-inline-size: var(--card-width);
}

.mat-new .field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.mat-languages {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  border: 0;
}

.mat-languages legend {
  margin-block-end: var(--space-1);
  padding: 0;
}

.mat-choice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

.mat-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-3);
}

.mat-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

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

.mat-tab:hover {
  background: var(--color-bg);
}

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

.mat-tab-count {
  min-inline-size: 1.5em;
  padding-inline: var(--space-1);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--font-size-small);
  text-align: center;
}

.mat-search {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  inline-size: min(100%, 20rem);
}

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

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

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

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

.mat-row-main {
  flex: 1 1 16rem;
  min-inline-size: 0;
}

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

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

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

.mat-row-meta {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.mat-row-form,
.mat-confirm {
  display: flex;
  flex: 1 0 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.mat-row-form .field-label,
.mat-confirm p {
  flex: 1 0 100%;
  margin: 0;
}

.mat-row-form .field-input {
  flex: 1 1 14rem;
  min-inline-size: 0;
}

.mat-open {
  flex: none;
  text-decoration: none;
}

/* ── The editor ────────────────────────────────────────────────────────────────────────────────────────────── */

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

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

.mat-bin-line {
  margin: 0;
}

.mat-title {
  margin-block-end: var(--space-1);
  overflow-wrap: anywhere;
}

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

.mat-meta {
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.mat-editor {
  display: grid;
  align-items: start;
  gap: var(--space-4);
}

@media (min-width: 60rem) {
  .mat-editor {
    grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
  }
}

.mat-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-inline-end: var(--space-2);
  border-block-end: 1px solid var(--color-border);
}

.mat-card-head .qb-card-title {
  border-block-end: 0;
}

.mat-add-block,
.mat-add {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.mat-add {
  align-self: flex-start;
}

.mat-add-block {
  min-block-size: 2rem;
  padding-inline: var(--space-2);
  font-size: var(--font-size-small);
}

/* «الهيكل»: a tree (Task 7.3b), its rows' items in a group under each open row, which a dashed line runs along */
.mat-tree,
.mat-tree-group {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mat-tree {
  padding: var(--space-2);
}

.mat-tree-group {
  margin-inline-start: var(--space-3);
  padding-inline-start: var(--space-1);
  border-inline-start: 1px dashed var(--color-border);
}

/* the keyboard's ring is on the row itself, not round everything the item holds */
.mat-tree-item {
  outline: none;
}

.mat-tree-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 2.25rem;
  padding-block: var(--space-1);
  padding-inline: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.mat-tree-row:hover {
  background: var(--color-bg);
}

.mat-tree-item[aria-selected="true"] > .mat-tree-row {
  background: var(--color-info-soft);
}

.mat-tree-item[aria-selected="true"] > .mat-tree-row .mat-tree-title {
  font-weight: 700;
}

.mat-tree-item:focus-visible > .mat-tree-row {
  outline: 3px solid var(--color-focus);
  outline-offset: -3px;
}

/* the material's own row: the blocks under it */
.mat-tree > .mat-tree-item > .mat-tree-row {
  margin-block-end: var(--space-1);
}

.mat-toggle {
  flex: none;
  display: inline-grid;
  place-items: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  margin-inline-end: calc(var(--space-1) * -1);
  border-radius: var(--radius);
  color: var(--color-muted);
}

.mat-toggle:not(:empty):hover {
  background: var(--color-surface);
  color: var(--color-text);
}

.mat-toggle .icon {
  inline-size: 1rem;
  block-size: 1rem;
  transition: transform 0.15s;
}

/* closed: the arrow points along the line, to where its items would be (the tree goes the way the material's text goes) */
.mat-tree-item[aria-expanded="false"] > .mat-tree-row .mat-toggle .icon {
  transform: rotate(90deg);
}

.mat-tree[dir="ltr"] .mat-tree-item[aria-expanded="false"] > .mat-tree-row .mat-toggle .icon {
  transform: rotate(-90deg);
}

@media (prefers-reduced-motion: reduce) {
  .mat-toggle .icon {
    transition: none;
  }
}

.mat-tree-title {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

/* what a finger drags a row or a card by (a mouse drags it from anywhere): always there on a touch screen, else it shows
   on hover, as a hint */
.mat-grip {
  flex: none;
  display: inline-grid;
  place-items: center;
  inline-size: 1.25rem;
  block-size: 1.75rem;
  margin-inline-end: calc(var(--space-1) * -1);
  border-radius: var(--radius);
  color: var(--color-muted);
  cursor: grab;
  opacity: 0;
  touch-action: none;
  -webkit-touch-callout: none;
}

.mat-grip .icon {
  inline-size: 1rem;
  block-size: 1rem;
}

.mat-tree-row:hover > .mat-grip,
.mat-tree-item:focus-visible > .mat-tree-row > .mat-grip {
  opacity: 1;
}

@media (any-pointer: coarse) {
  .mat-grip {
    inline-size: 2.25rem;
    block-size: 2.25rem;
    opacity: 1;
  }
}

/* dragging: nothing is selected as text, and the pointer says whether the item can go where it is (over every element's
   own pointer for as long as the drag lasts, hence !important) */
body.mat-dragging {
  -webkit-user-select: none;
  user-select: none;
}

body.mat-dragging,
body.mat-dragging * {
  cursor: grabbing !important;
}

body.mat-dragging.mat-no-drop,
body.mat-dragging.mat-no-drop * {
  cursor: no-drop !important;
}

/* the item dragged, with everything in it, stays faded where it was */
.mat-tree-item.is-dragged,
.mat-slide-card.is-dragged {
  opacity: 0.45;
}

/* it would go into this item, at its end */
.mat-tree-row.is-drop-inside {
  background: var(--color-info-soft);
  outline: 2px dashed var(--color-primary);
  outline-offset: -2px;
}

/* where it would land: between two rows, or between two cards. The script places these and the copy that follows the
   pointer in the window's own pixels, from its top left corner (their left and top) */
.mat-drop-line,
.mat-drop-bar,
.mat-drag-ghost {
  position: fixed;
  z-index: 40;
  inset: auto;
  pointer-events: none;
}

.mat-drop-line {
  block-size: 2px;
  border-radius: 1px;
  background: var(--color-primary);
}

.mat-drop-line::before {
  content: "";
  position: absolute;
  inset-block-start: -3px;
  inset-inline-start: -6px;
  inline-size: 8px;
  block-size: 8px;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  background: var(--color-surface);
}

.mat-drop-bar {
  inline-size: 3px;
  border-radius: 2px;
  background: var(--color-primary);
}

.mat-drag-ghost {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-inline-size: 18rem;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-raised);
  font-size: var(--font-size-small);
  white-space: nowrap;
}

.mat-drag-title {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* high contrast replaces backgrounds, which would hide the lines */
@media (forced-colors: active) {
  .mat-drop-line,
  .mat-drop-bar {
    forced-color-adjust: none;
    background: Highlight;
  }

  .mat-drop-line::before {
    border-color: Highlight;
    background: Canvas;
  }

  /* a card's marks keep their frame */
  .mat-slide-tag {
    border: 1px solid CanvasText;
  }
}

.mat-level {
  flex: none;
  padding-inline: var(--space-2);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-muted);
  font-size: var(--font-size-small);
  font-weight: 400;
}

.mat-count {
  flex: none;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

/* the chosen item's panel */
.mat-panel-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  overflow-wrap: anywhere;
}

.mat-panel-title:focus {
  outline: none;
}

.mat-panel-title:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: -3px;
}

.mat-panel-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
}

.mat-path ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  font-size: var(--font-size-small);
  list-style: none;
}

.mat-path li:not(:last-child)::after {
  content: "›";
  content: "›" / "";
  margin-inline-start: var(--space-1);
  color: var(--color-muted);
}

.mat-title-form,
.mat-add-form,
.mat-move-form,
.mat-row-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.mat-add-form,
.mat-move-form {
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
}

.mat-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.mat-inline .field-input {
  flex: 1 1 14rem;
  min-inline-size: 0;
}

.mat-row-field {
  max-inline-size: 16rem;
}

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

.mat-status p {
  flex: 1 0 100%;
  margin: 0;
  color: var(--color-muted);
}

.mat-contents,
.mat-bin {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.mat-contents h3,
.mat-bin h3 {
  margin: 0;
  font-size: var(--font-size-body);
}

.mat-kids {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding-inline-start: var(--space-5);
}

.mat-kids li {
  overflow-wrap: anywhere;
}

.mat-kids .mat-count {
  margin-inline-start: var(--space-2);
}

/* a topic's slides: numbered cards */
.mat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mat-slide-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  block-size: 100%;
  min-block-size: 5rem;
  padding: var(--space-2);
  border: 1px dashed var(--color-input-border);
  border-radius: var(--radius);
  color: var(--color-text);
  text-decoration: none;
  -webkit-user-select: none;
  user-select: none;
}

/* a finger drags a card by its grip, in its corner at the end of the line; a mouse drags the card itself */
.mat-slide-card .mat-grip {
  position: absolute;
  inset-block-end: var(--space-1);
  inset-inline-end: var(--space-1);
  display: none;
}

@media (any-pointer: coarse) {
  .mat-slide-card .mat-grip {
    display: inline-grid;
  }

  .mat-slide-card {
    padding-block-end: 2.5rem;
  }
}

.mat-slide-card:hover {
  background: var(--color-bg);
}

.mat-slide-card[aria-current="true"] {
  border-style: solid;
  border-color: var(--color-primary);
  background: var(--color-info-soft);
}

.mat-slide-n {
  color: var(--color-muted);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.mat-slide-title {
  overflow-wrap: anywhere;
}

/* what a card says of its slide (Task 7.4): «تمرين», then «فارغة» or «غير مكتمل» */
.mat-slide-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.mat-slide-tag {
  padding-inline: var(--space-1);
  border-radius: var(--radius);
  font-size: var(--font-size-small);
}

.mat-slide-exercise {
  background: var(--color-info-soft);
  color: var(--color-link);
}

.mat-slide-empty,
.mat-slide-unfinished,
.mat-slide-no-file {
  background: var(--color-draft-soft);
  color: var(--color-draft);
}

/* a slide's purpose on its card (Task 7.19a): «شرح» quiet, «للمحاضرة» marked, «تدريب» as an exercise is */
.mat-slide-purpose {
  align-self: flex-start;
  padding-inline: var(--space-1);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.mat-slide-purpose[data-purpose="lecture"] {
  background: var(--color-correct-soft);
  color: var(--color-success-text);
  font-weight: 700;
}

.mat-slide-purpose[data-purpose="practice"] {
  background: var(--color-info-soft);
  color: var(--color-link);
}

/* above a topic's slides (Task 7.19a): the filter by purpose, and «تحديد» with «اجعل المحددة:» */
.mat-purposes,
.mat-pick,
.mat-pick-make {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.mat-purposes,
.mat-pick {
  margin-block-end: var(--space-2);
}

.mat-purpose-filter[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: var(--color-info-soft);
  font-weight: 700;
}

.mat-pick-count {
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

/* «تحديد»: a tick box before each card */
.mat-strip .mat-picking {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
}

.mat-strip .mat-picking .mat-slide-card {
  flex: 1;
  min-inline-size: 0;
}

.mat-pick-box {
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin: var(--space-2) 0 0;
}

/* a media slide's file on its card (Task 7.6a): its kind's icon and its name, on one line */
.mat-slide-file {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-inline-size: 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.mat-slide-file .icon {
  flex: none;
}

.mat-slide-file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mat-slide-place {
  margin: 0;
  color: var(--color-muted);
}

.mat-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--color-border);
}

.mat-move-fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.mat-move-fields .field {
  display: flex;
  flex: 1 1 14rem;
  flex-direction: column;
  gap: var(--space-1);
  min-inline-size: 0;
}

/* «حفظ النص» («حفظ التمرين»), and beside it the line about the last save: it changes without moving what is below */
.mat-save-text,
.mat-ex-save {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  min-block-size: var(--control-height);
}

/* its line is kept even while empty, so on a phone, where it goes under the button, nothing moves when it fills */
.mat-slide-note,
.mat-ex-line {
  display: flex;
  flex: 1 1 12rem;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-block-size: calc(var(--font-size-small) * var(--line-height));
  margin: 0;
  color: var(--color-success);
  font-size: var(--font-size-small);
}

.mat-slide-note.is-error,
.mat-ex-line.is-error {
  color: var(--color-danger);
}

/* an empty slide: the other kind it can become (Task 7.4) */
.mat-kind-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px dashed var(--color-input-border);
  border-radius: var(--radius);
}

.mat-kind-line[hidden] {
  display: none;
}

.mat-kind-line p {
  flex: 1 1 14rem;
  margin: 0;
  color: var(--color-muted);
}

/* a media slide's box (Task 7.6a): its file as students see it, with its name and buttons; with none, «اختر ملفاً» and
   what is accepted, in a box a file can be dropped on; while one is uploaded, its progress and «إلغاء» */
.ms {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px dashed var(--color-input-border);
  border-radius: var(--radius);
}

.ms.is-over {
  border-style: solid;
  border-color: var(--color-primary);
  background: var(--color-info-soft);
}

.ms [hidden] {
  display: none;
}

/* what an empty media slide can become, under its box */
.ms + .mat-kind-line {
  margin-block-start: var(--space-3);
}

.ms-file,
.ms-pick,
.ms-upload {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ms-pick-row,
.ms-cancel-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

/* «اختر ملفاً», with its icon */
.ms-choose {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.ms-drop,
.ms-accepted,
.ms-meta,
.ms-progress-text {
  margin: 0;
  color: var(--color-muted);
}

.ms-accepted,
.ms-meta {
  font-size: var(--font-size-small);
}

.ms-name,
.ms-upload-name {
  margin: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.ms-meta {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.ms-kind {
  display: inline-flex;
}

/* how far a video's streams are (Task 7.6b) */
.ms-stream {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.ms-progress {
  inline-size: 100%;
  block-size: 0.75rem;
  accent-color: var(--color-on-text);
}

.ms-progress-text {
  flex: 1 1 10rem;
}

/* how the last step went: kept in the box while empty, so nothing moves when it fills */
.ms-line {
  min-block-size: calc(var(--font-size-small) * var(--line-height));
  margin: 0;
  font-size: var(--font-size-small);
}

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

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

.ms-line[data-kind="info"] {
  color: var(--color-muted);
}

/* a file as students see it: a video as wide as the slide, a sound's bar, a PDF in a frame a page tall */
.media-player {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  min-inline-size: 0;
}

/* a video: its streams, or its file (Task 7.6b) */
.video-player {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  inline-size: 100%;
}

.media-video {
  inline-size: 100%;
  max-block-size: 70vh;
  border-radius: var(--radius);
}

.media-audio {
  inline-size: 100%;
}

.media-pdf {
  inline-size: 100%;
  block-size: 75vh;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.media-note {
  margin: 0;
  color: var(--color-muted);
}

/* «نوع الشريحة» when a slide is added: «محتوى», «تمرين» or «ملف» */
.mat-kinds {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.mat-kinds legend {
  padding: 0;
}

.mat-kinds-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.mat-kind {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--control-height);
  padding-inline: var(--space-3);
  border: 1px solid var(--color-input-border);
  border-radius: calc(var(--control-height) / 2);
  background: var(--color-surface);
  cursor: pointer;
}

.mat-kind:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-info-soft);
  font-weight: 700;
}

/* an exercise's form (Task 7.4): the question, the choices (the question builder's option rows), the explanation, and
   what it still needs */
.mat-exercise {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

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

/* «الاختيارات» looks as the question's and the explanation's labels look */
.mat-ex-title {
  margin: 0;
  font-size: var(--font-size-card-title);
  font-weight: 700;
}

.mat-ex-choice .doc-field-label {
  color: var(--color-muted);
  font-size: var(--font-size-small);
  font-weight: 400;
}

.mat-ex-choice .qb-option-tools {
  gap: var(--space-2);
}

/* «أعلى» on the first choice, «أسفل» on the last, and «حفظ التمرين» with nothing to save: greyed, and the keyboard can
   stay on them */
.mat-exercise .qb-small-button[aria-disabled="true"],
.mat-exercise .button[aria-disabled="true"],
.mat-exercise .button[aria-disabled="true"]:hover {
  background: var(--color-surface);
  opacity: 0.6;
  cursor: default;
}

.mat-ex-full,
.mat-ex-hint,
.mat-ex-note {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.mat-ex-missing {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-draft);
  border-radius: var(--radius);
  background: var(--color-draft-soft);
  color: var(--color-draft);
}

.mat-ex-missing.is-ready {
  border-color: var(--color-border);
  background: var(--color-success-soft);
  color: var(--color-success-text);
}

.mat-ex-missing[hidden] {
  display: none;
}

.mat-ex-missing p,
.mat-ex-missing ul {
  margin: 0;
}

.mat-ex-missing ul {
  padding-inline-start: var(--space-5);
}

.mat-ex-missing .mat-ex-note {
  margin-block-start: var(--space-1);
  color: inherit;
}

/* the material's bin */
.mat-bin h3:focus {
  outline: none;
}

.mat-bin h3:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

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

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

.mat-bin-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  overflow-wrap: anywhere;
}

/* «النشر» on the material's own panel (Task 7.5a): what stops it, the button asked again, and «النسخ» */
.mat-publish {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding-block: var(--space-3);
  border-block: 1px solid var(--color-border);
}

.mat-publish h3,
.mat-publish h4 {
  margin: 0;
  font-size: var(--font-size-body);
}

.mat-publish h4 {
  margin-block-start: var(--space-2);
}

.mat-publish .mat-confirm {
  align-self: stretch;
}

.mat-publish-before,
.mat-publish-ready {
  margin: 0;
}

.mat-publish-before:focus {
  outline: none;
}

.mat-publish-before:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.mat-publish-ready {
  color: var(--color-success);
}

.mat-publish-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding-inline-start: var(--space-5);
}

.mat-publish-list li {
  overflow-wrap: anywhere;
}

.mat-publish-what {
  color: var(--color-danger);
}

.mat-publish .button[aria-disabled="true"],
.mat-publish .button[aria-disabled="true"]:hover {
  opacity: 0.6;
  cursor: default;
}

.mat-versions {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.mat-version-name {
  margin: 0;
  font-weight: 700;
}

.mat-version > .button {
  align-self: flex-start;
}

/* «معاينة كطالب» (Task 7.5b): a lesson as students see it, one slide at a time */
.lv-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block: var(--space-2) var(--space-4);
}

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

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

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

.lv-back,
.lv-step {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

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

/* a document is only scrolled sideways (a wide table or formula). A line's letters reach a little above and below it:
   a box that could be scrolled up and down by those two pixels would also take the keyboard (Chromium stops at such a
   box on Tab), between a choice and «تحقّق» */
.lv .doc-view {
  overflow-y: hidden;
}

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

.lv-slide-title {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-card-title);
}

.lv-slide-title:focus,
.lv-feedback:focus {
  outline: none;
}

.lv-slide-title:focus-visible,
.lv-feedback:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.lv-note {
  margin: 0;
  color: var(--color-muted);
}

/* a run's lesson partly kept from its student: at the last slide he sees, that the lecture's show here too (Task 7.19b) */
.lv-more {
  margin-block-start: var(--space-3);
  font-size: var(--font-size-small);
}

/* «معاينة كطالب»: a slide for the lecture says so above it (Task 7.19a) */
.lv-purpose {
  margin: 0;
  color: var(--color-correct);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.lv-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

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

.lv-middle {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  min-inline-size: 0;
}

.lv-marks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lv-mark {
  display: block;
  inline-size: 0.75rem;
  block-size: 0.75rem;
  padding: 0;
  border: 2px solid var(--color-input-border);
  border-radius: 50%;
  background: var(--color-surface);
  cursor: pointer;
}

/* an exercise's mark is square */
.lv-mark[data-kind="exercise"] {
  border-radius: 2px;
}

.lv-mark[data-answered="right"] {
  border-color: var(--color-correct);
}

.lv-mark[data-answered="shown"] {
  border-color: var(--color-draft);
}

.lv-mark[aria-current="step"] {
  border-color: var(--color-primary);
  background: var(--color-primary);
}

.lv-position,
.lv-keys {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.lv-position {
  white-space: nowrap;
}

.lv-keys {
  text-align: center;
}

/* the keys are no use where there is no keyboard to hand (still read out with «السابقة» and «التالية») */
@media (hover: none) and (pointer: coarse) {
  .lv-keys {
    display: none;
  }
}

.lv-lessons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.lv-lesson {
  margin: 0;
}

/* «الدرس التالي» on the side where the next slide is (the lessons' line runs the material's way) */
.lv-lesson-next {
  margin-inline-start: auto;
}

.lv-exercise,
.lv-answer {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
}

.lv-choices {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

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

/* while a check is on its way: greyed, and the keyboard can stay on them */
.lv-actions .button[aria-disabled="true"],
.lv-actions .button[aria-disabled="true"]:hover {
  opacity: 0.6;
  cursor: default;
}

.lv-actions .button[aria-busy="true"] {
  cursor: progress;
}

.lv-feedback {
  min-block-size: 1.5em;
  margin: 0;
  font-weight: 700;
}

.lv-feedback[data-kind="right"] {
  color: var(--color-correct);
}

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

.lv-feedback[data-kind="hint"],
.lv-feedback[data-kind="shown"] {
  color: var(--color-draft);
}

.lv-why {
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--color-border);
}

.lv-why-title {
  margin: 0 0 var(--space-2);
  color: var(--color-text);
  font-size: var(--font-size-body);
}

@media (any-pointer: coarse) {
  .lv-mark {
    inline-size: 1rem;
    block-size: 1rem;
  }
}

@media (forced-colors: active) {
  .lv-mark[aria-current="step"] {
    background: Highlight;
  }
}

/* «الإعدادات في نافذة»: a small button by a row's grip opens the chosen item's panel in a window over the page */
.mat-row-window {
  flex: none;
  display: inline-grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  opacity: 0;
}

.mat-row-window .icon {
  inline-size: 1rem;
  block-size: 1rem;
}

.mat-row-window:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

.mat-row-window:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: -3px;
  opacity: 1;
}

.mat-tree-row:hover > .mat-row-window,
.mat-tree-item:focus-visible > .mat-tree-row > .mat-row-window,
.mat-tree-item[aria-selected="true"] > .mat-tree-row > .mat-row-window {
  opacity: 1;
}

@media (any-pointer: coarse) {
  .mat-row-window {
    inline-size: 2.25rem;
    block-size: 2.25rem;
    opacity: 1;
  }
}

.mat-panel-window {
  inline-size: min(56rem, calc(100vw - 2rem));
  max-block-size: calc(100dvh - 2rem);
  padding: 0;
  border: 0;
  border-radius: var(--radius-window);
  background: transparent;
  overflow: auto;
}

.mat-panel-window::backdrop {
  background: var(--color-backdrop);
}

.mat-panel-window > .mat-panel {
  margin: 0;
}

.mat-panel-window-close {
  position: sticky;
  inset-block-start: var(--space-2);
  z-index: 1;
  float: inline-end;
  display: inline-grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  margin: var(--space-2);
  margin-block-end: calc(-2.25rem - var(--space-2));
  border: 1px solid var(--color-border, currentColor);
  border-radius: 50%;
  background: var(--color-surface, var(--color-bg));
  color: var(--color-text);
  font-size: 1rem;
  cursor: pointer;
}

.mat-panel-window-close:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

@media (max-width: 40rem) {
  .mat-panel-window {
    inline-size: 100vw;
    max-inline-size: 100vw;
    max-block-size: 100dvh;
    block-size: 100dvh;
    margin: 0;
    border-radius: 0;
  }
}

/* beside the tree, the panel holds only a topic's slides and the chosen slide; an item's settings, and the material,
   blocks, modules and chapters, are in «الإعدادات في نافذة» */
.mat-editor > .mat-panel[data-side="empty"] > .mat-panel-body,
.mat-editor > .mat-panel .mat-setting {
  display: none;
}

/* «إخفاء الهيكل»: the tree folded away, the panel takes the width */
.mat-fold-bar {
  display: flex;
  justify-content: flex-start;
  margin-block-end: var(--space-2);
}

.mat-fold {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.mat-fold .icon {
  inline-size: 1rem;
  block-size: 1rem;
}

.mat-editor.mat-folded {
  grid-template-columns: minmax(0, 1fr);
}

.mat-editor.mat-folded > .mat-structure {
  display: none;
}

/* the navigator under a topic's slide cards */
.mat-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding-block: var(--space-2);
  border-block: 1px solid var(--color-border);
}

.mat-nav-place {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-muted);
}

.mat-nav-jump {
  inline-size: 3.5rem;
  min-inline-size: 0;
  padding-inline: var(--space-1);
  text-align: center;
}

/* above the strip: the filter by purpose and «أرقام فقط» / «البطاقات» */
.mat-strip-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

/* «أرقام فقط»: each card a small numbered square (the old editor's keys), its purpose a colour along its foot */
.mat-strip.mat-strip-compact {
  grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr));
  gap: var(--space-1);
}

.mat-strip-compact .mat-slide-card {
  align-items: center;
  justify-content: center;
  min-block-size: 2.75rem;
  padding: var(--space-1);
  border-block-end-width: 4px;
  border-block-end-style: solid;
}

.mat-strip-compact .mat-slide-title,
.mat-strip-compact .mat-slide-purpose,
.mat-strip-compact .mat-slide-file,
.mat-strip-compact .mat-slide-tags,
.mat-strip-compact .mat-slide-no-file {
  display: none;
}

.mat-strip-compact .mat-slide-card:has(.mat-slide-purpose[data-purpose="lecture"]) {
  border-block-end-color: var(--color-correct);
}

.mat-strip-compact .mat-slide-card:has(.mat-slide-purpose[data-purpose="practice"]) {
  border-block-end-color: var(--color-primary-strong);
}

.mat-strip-compact .mat-slide-card[aria-current="true"] {
  background: var(--color-primary);
  color: var(--color-surface);
}

@media (any-pointer: coarse) {
  .mat-strip-compact .mat-slide-card {
    padding-block-end: var(--space-1);
  }
}

/* «عرض كبير»: the slide alone and large, as students see it */
.mat-big-window {
  inline-size: min(70rem, calc(100vw - 2rem));
  max-block-size: calc(100dvh - 2rem);
  padding: var(--space-4);
  border: 0;
  border-radius: var(--radius-window);
  background: var(--color-surface);
  color: var(--color-text);
  overflow: auto;
}

.mat-big-window::backdrop {
  background: var(--color-backdrop);
}

@media (max-width: 40rem) {
  .mat-big-window {
    inline-size: 100vw;
    max-inline-size: 100vw;
    block-size: 100dvh;
    max-block-size: 100dvh;
    margin: 0;
    border-radius: 0;
  }
}

/* ── The edit page as a workspace (24 Oct, after the old editor): one window tall, the tree and the panel each
   scrolling on their own; a slide's navigator and numbers at the top, its save at the foot, always in view ── */

/* the title, its line and the page's buttons on one slim line */
.mat-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-3);
  row-gap: var(--space-1);
  margin-block-end: var(--space-2);
}

.mat-head h1 {
  margin: 0;
  font-size: var(--font-size-card-title);
}

.mat-head .mat-badges {
  margin: 0;
}

.mat-head-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-inline-start: auto;
}

.mat-head-button,
.mat-head-tools .mat-fold {
  padding-block: var(--space-1);
}

.mat-head-tools .icon {
  inline-size: 1rem;
  block-size: 1rem;
}

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

/* the slide's head: the navigator, «تصفية وتحديد» with «أرقام فقط», and the numbers */
.mat-slide-head {
  position: sticky;
  inset-block-start: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-block: var(--space-2);
  border-block-end: 1px solid var(--color-border);
  background: var(--color-surface);
}

.mat-slide-head .mat-nav {
  padding-block: 0;
  border: 0;
}

.mat-slide-head .mat-nav-go {
  padding-block: var(--space-1);
}

.mat-strip-tools > summary {
  cursor: pointer;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.mat-strip-tools[open] {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  inline-size: 100%;
}

.mat-strip-top {
  align-items: flex-start;
}

.mat-strip-tools:not([open]) + .mat-strip-switch {
  margin-inline-start: auto;
}

/* the numbers in one row that scrolls sideways */
.mat-slide-head .mat-strip.mat-strip-compact {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  padding-block-end: var(--space-1);
}

.mat-slide-head .mat-strip-compact > li {
  flex: 0 0 2.75rem;
}

.mat-slide-head .mat-strip-compact .mat-slide-card {
  min-block-size: 2.5rem;
}

/* the cards, if chosen: no more than a few rows, scrolling inside */
.mat-slide-head .mat-strip:not(.mat-strip-compact) {
  max-block-size: 13rem;
  overflow-y: auto;
}

/* a slide's save, at the foot while its editor scrolls */
.mat-panel .mat-save-text,
.mat-panel .mat-ex-save {
  position: sticky;
  inset-block-end: 0;
  z-index: 2;
  padding-block: var(--space-2);
  border-block-start: 1px solid var(--color-border);
  background: var(--color-surface);
}

@media (min-width: 60rem) {
  .mat-editor {
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    min-block-size: 24rem;
  }

  .mat-editor > .mat-structure {
    min-block-size: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .mat-editor > .mat-structure .mat-card-head {
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
    background: var(--color-surface);
  }

  .mat-editor > .mat-panel {
    display: flex;
    flex-direction: column;
    min-block-size: 0;
    overflow: hidden;
  }

  .mat-editor > .mat-panel > .mat-panel-title {
    flex: none;
  }

  .mat-editor > .mat-panel > .mat-panel-body {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* narrower: the tree slides over the slides from the side, opened by «الهيكل» */
@media (max-width: 59.99rem) {
  /* one column no wider than the screen: the numbers' row scrolls inside it */
  .mat-editor {
    grid-template-columns: minmax(0, 1fr);
  }

  .mat-editor > .mat-structure {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 60;
    inline-size: min(88vw, 24rem);
    margin: 0;
    border-radius: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: block;
    background: var(--color-surface);
    transform: translateX(110%);
    visibility: hidden;
    transition: transform 0.2s ease, visibility 0.2s;
  }

  [dir="ltr"] .mat-editor > .mat-structure {
    transform: translateX(-110%);
  }

  .mat-editor.mat-tree-open > .mat-structure {
    transform: none;
    visibility: visible;
    box-shadow: 0 0 1.5rem rgb(0 0 0 / 0.35);
  }

  .mat-editor.mat-tree-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 59;
    background: rgb(0 0 0 / 0.45);
  }

  .mat-editor.mat-folded {
    grid-template-columns: minmax(0, 1fr);
  }

  /* folding is for wide screens; here the tree is always over the slides when opened */
  .mat-editor.mat-folded > .mat-structure {
    display: block;
  }

  .mat-slide-head {
    inset-block-start: 0;
  }

  /* in the panel over the slides, the names get the width (Alt+arrows and «نقل إلى…» still move rows) */
  .mat-editor > .mat-structure .mat-grip {
    display: none;
  }

  /* the navigator on one line: «السابقة · شريحة n من N · التالية» */
  .mat-nav .mat-nav-go[data-focus="nav-first"],
  .mat-nav .mat-nav-go[data-focus="nav-last"] {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mat-editor > .mat-structure {
    transition: none;
  }
}

/* above the editor, one line: «المواد ›» and «الهيكل» */
.mat-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.mat-topline .mat-head-tools {
  margin: 0;
}

/* «الهيكل» at the end of the panel's title row */
.mat-panel-title .mat-title-fold {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline-start: auto;
  padding-block: var(--space-1);
  font-size: var(--font-size-small);
  font-weight: 400;
}

.mat-panel-title .mat-title-fold .icon {
  inline-size: 1rem;
  block-size: 1rem;
}

.mat-panel-window .mat-title-fold {
  display: none;
}

/* the title row's tools: «تصفية وتحديد» (opening as a menu under it), «البطاقات», «الهيكل» */
.mat-panel-title {
  position: relative;
  z-index: 5;
}

.mat-title-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-inline-start: auto;
  font-size: var(--font-size-small);
  font-weight: 400;
}

.mat-title-tools .mat-title-fold {
  margin-inline-start: 0;
}

.mat-title-tools .mat-strip-top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.mat-title-tools .mat-strip-switch {
  padding-block: var(--space-1);
  font-size: var(--font-size-small);
}

.mat-title-tools .mat-strip-tools {
  position: relative;
}

.mat-title-tools .mat-strip-tools[open] {
  display: block;
  inline-size: auto;
}

.mat-title-tools .mat-strip-tools > summary {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.mat-title-tools .mat-strip-menu {
  position: absolute;
  inset-block-start: calc(100% + var(--space-1));
  inset-inline-end: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  inline-size: max-content;
  max-inline-size: min(34rem, 90vw);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.3);
}

.mat-title-tools .mat-purposes {
  flex-wrap: wrap;
}

.mat-editor > .mat-panel {
  overflow: visible;
}

.mat-panel-body {
  padding-block-start: 0;
}

/* the material's panel in three tabs: «الإعدادات», «النشر», «المحتوى» */
.mat-tabs {
  display: flex;
  gap: var(--space-1);
  border-block-end: 1px solid var(--color-border);
}

.mat-tab {
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-block-end: 3px solid transparent;
  background: transparent;
  color: var(--color-muted);
  font: inherit;
  cursor: pointer;
}

.mat-tab[aria-selected="true"] {
  border-block-end-color: var(--color-primary);
  color: var(--color-text);
  font-weight: 700;
}

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

.mat-tabpanel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.mat-tabpanel[hidden] {
  display: none;
}

/* the window's title row: room for its ✕ */
.mat-panel-window .mat-panel-title {
  padding-inline-end: 3.5rem;
}

/* a choice's «الإجابة الصحيحة», «أعلى», «أسفل» and «حذف» in one «خيارات» button, opening under it */
.qb-option-menu {
  position: relative;
  align-self: flex-end;
}

.qb-option-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  cursor: pointer;
}

.qb-option-menu > summary::-webkit-details-marker {
  display: none;
}

.qb-option-menu[open] > .qb-option-tools {
  position: absolute;
  inset-block-start: calc(100% + var(--space-1));
  inset-inline-end: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-1);
  min-inline-size: 11rem;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.3);
}

.qb-option-menu[open] > .qb-option-tools > * {
  justify-content: flex-start;
  text-align: start;
}

/* a choice's «الاختيار أ» over its box: not shown (its letter is beside it); screen readers still read it */
.mat-ex-choice .doc-field-label {
  display: none;
}

.doc-field-tools .qb-option-menu {
  align-self: center;
}

/* a choice's «إضافة», «تحرير» and «خيارات» as signs only: + ✎ ⋯ (their words are their names, and show on hover) */
.mat-ex-choice .doc-field-add .am-button > span,
.mat-ex-choice .qb-option-menu-key > span {
  display: none;
}

.mat-ex-choice .doc-field-add .am-button::before {
  content: "+";
  content: "+" / "";
  font-size: 1.15rem;
  line-height: 1;
}

.mat-ex-choice .doc-field-edit {
  font-size: 0;
}

.mat-ex-choice .doc-field-edit::before {
  content: "✎";
  content: "✎" / "";
  font-size: 1rem;
  line-height: 1;
}

.mat-ex-choice .qb-option-menu-key::before {
  content: "⋯";
  content: "⋯" / "";
  font-size: 1.1rem;
  line-height: 1;
}

/* the right choice keeps its plain border (its green background and letter mark it) */
.qb-option.mat-ex-choice.is-correct {
  border-color: var(--color-border);
}