/* The question list (/admin/questions) and the question editor (/admin/questions/edit), Tasks 1.3d and 1.3g.
   Right to left first: logical properties only. Colours and sizes come from tokens.css. */

/* The editor is wider than the other pages; the list is as wide as they are. */
.app-main:has(> question-editor-page) {
  max-width: var(--wide-width);
}

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

.qb-head .lead {
  margin-block-end: var(--space-3);
}

/* The question list's filters: they slide up after «بحث» and down again from the button beside the title. */
.ql-head-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}

.ql-head-top h1 {
  margin: 0;
}

.ql-summary {
  margin: var(--space-2) 0 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
  overflow-wrap: anywhere;
}

.ql-head-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.25s ease;
}

.ql-head-body.is-closed {
  grid-template-rows: 0fr;
}

/* room for the fields' focus rings inside the part that hides what is out of it */
.ql-head-inner {
  min-block-size: 0;
  overflow: hidden;
  padding: var(--space-1);
  margin: calc(-1 * var(--space-1));
}

.ql-head-body:not(.is-closed) .ql-head-inner {
  padding-block-start: var(--space-3);
}

/* /admin/cards and /admin/passages (slide-panel.ts): a part may hold a whole card (the list), so once up nothing of it
   may show, not even the room kept for the focus rings */
.slide-part.is-closed > .ql-head-inner {
  padding-block: 0;
  margin-block: 0;
}

.slide-part.is-closed {
  visibility: hidden;
  transition: grid-template-rows 0.25s ease, visibility 0s 0.25s;
}

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

/* Grids: several fields in a row on a wide screen, two on a tablet, one on a phone. */
.qb-grid {
  display: grid;
  gap: var(--space-3) var(--space-4);
  align-items: start;
}

.qb-grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.qb-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.qb-grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}

.qb-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3) var(--space-5);
}

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

.qb-label {
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.qb-input,
.qb-textarea {
  inline-size: 100%;
  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-input-bg);
  color: var(--color-text);
  font: inherit;
}

/* a teal ring round the field you type in, its line the text's colour (Task indoor: the kit's field, as base.css's) */
.qb-input:focus,
.qb-textarea:focus {
  border-color: var(--color-input-focus);
  outline: 3px solid var(--color-on);
  outline-offset: 1px;
}

.qb-textarea {
  resize: vertical;
  line-height: var(--line-height);
}

.qb-input:disabled,
.qb-textarea:disabled {
  opacity: 0.7;
}

.qb-input[dir="ltr"] {
  text-align: end;
}

/* Segmented choices: the type, the source, free or paid. */
.qb-segmented,
.qb-chips,
.qb-date {
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.qb-segmented-row {
  display: flex;
  margin-block-start: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.qb-segment {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--control-height);
  padding-inline: var(--space-2);
  background: var(--color-surface);
  cursor: pointer;
  text-align: center;
}

.qb-segment + .qb-segment {
  border-inline-start: 1px solid var(--color-border);
}

.qb-segment input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.qb-segment:has(input:checked) {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.qb-segment:has(input:focus-visible) {
  outline: 3px solid var(--color-focus);
  outline-offset: -3px;
}

.qb-segment:has(input:disabled) {
  cursor: default;
  opacity: 0.7;
}

/* The uses, as tick chips. */
.qb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.qb-chips legend {
  inline-size: 100%;
  margin-block-end: var(--space-1);
}

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

/* a chip that's ticked: filled as the main button, the kit's chosen choice (Task indoor) */
.qb-chip:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 700;
}

.qb-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--control-height);
  cursor: pointer;
}

/* The cards: a red heading, as on the old add-question page. */
.qb-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-inline-size: 0;
}

/* a card, as the kit's (Task indoor) */
.qb-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.qb-card-title {
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border-block-end: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: var(--font-size-card-title);
  font-weight: 400;
}

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

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

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

/* The content boxes are <doc-field>s (Task 1.3e), labelled like the form's other fields. */
.qb-form .doc-field-label {
  color: var(--color-quiet);
  font-size: var(--font-size-small);
  font-weight: 400;
}

/* The answers: one row per option, with its letter and its own "correct" mark. */
.qb-options,
.qb-doc-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.qb-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2) var(--space-3);
  align-items: start;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.qb-option.is-correct {
  border-color: var(--color-correct);
  background: var(--color-correct-soft);
}

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

.qb-option.is-correct .qb-letter {
  border-color: var(--color-correct-fill);
  background: var(--color-correct-fill);
  color: var(--color-on-fill);
}

.qb-option-tools {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}

.qb-correct {
  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-border);
  border-radius: calc(var(--control-height) / 2);
  cursor: pointer;
}

.qb-option.is-correct .qb-correct {
  border-color: var(--color-correct-fill);
  background: var(--color-correct-fill);
  color: var(--color-on-fill);
  font-weight: 700;
}

.qb-doc-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: end;
}

.qb-small-button {
  min-block-size: var(--control-height);
  min-inline-size: var(--control-height);
  padding-inline: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-link);
  font: inherit;
  cursor: pointer;
}

.qb-small-button:disabled {
  opacity: 0.5;
  cursor: default;
}

.qb-add {
  align-self: flex-start;
  border-style: dashed;
  border-color: var(--color-primary);
}

.qb-remove {
  color: var(--color-danger);
}

/* The history. */
.qb-history {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-small);
}

.qb-history-line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}

.qb-history-time {
  color: var(--color-muted);
}

.qb-history-note {
  inline-size: 100%;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  background: var(--color-bg);
  white-space: pre-line;
}

/* The tab «إحصاءات الطلاب» (Task 2.7): read only. Each choice of the version students see now is a row, as students see
   it, with its share of those shown it as a bar behind it (its width set from the code, as a post's poll does); the
   right one and the wrong one chosen most are marked by their border and their bar's colour, and say so in words too. */
.qs {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.qs-lead,
.qs-note,
.qs-wait {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.qs-answers {
  margin: 0;
  font-weight: 700;
}

.qs-head {
  margin: var(--space-2) 0 0;
  color: var(--color-text);
  font-size: var(--font-size-body);
  font-weight: 700;
}

.qs-line {
  margin: 0;
}

.qs-warn {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  background: var(--color-draft-soft);
  color: var(--color-draft);
  font-weight: 700;
}

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

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

.qs-choice.is-right {
  border: 2px solid var(--color-correct);
  padding-inline: calc(var(--space-3) - 1px);
}

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

.qs-bar {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  background: var(--color-info-soft);
}

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

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

.qs-letter {
  position: relative;
  flex: none;
  min-inline-size: 1.5rem;
  font-weight: 700;
  text-align: center;
}

.qs-option {
  position: relative;
  flex: 1;
  min-inline-size: 0;
  padding-block: var(--space-1);
  overflow-wrap: anywhere;
}

/* a choice's text is short: no paragraph margins under it, as in the question's window */
.qs-option .doc-content > :first-child {
  margin-block-start: 0;
}

.qs-option .doc-content > :last-child {
  margin-block-end: 0;
}

.qs-option.is-empty {
  color: var(--color-muted);
}

/* «أعد المحاولة» under why the statistics couldn't be read */
.qs-retry {
  margin-block-start: var(--space-2);
}

/* the panel takes the keyboard itself (it has nothing else to): its ring as the app's */
.qb-panel:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.qs-end {
  position: relative;
  display: inline-flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1) var(--space-2);
}

.qs-mark {
  font-size: var(--font-size-small);
  font-weight: 700;
}

.qs-choice.is-right .qs-mark {
  color: var(--color-correct);
}

.qs-choice.is-wrong-most .qs-mark {
  color: var(--color-danger);
}

.qs-picks {
  min-inline-size: 4.5rem;
  color: var(--color-text);
  font-size: var(--font-size-small);
  text-align: end;
}

/* on a phone a choice keeps the row's width: its mark and picks go on a line under it, from its start */
@media (max-width: 40rem) {
  .qs-choice {
    flex-wrap: wrap;
  }

  .qs-end {
    flex-basis: 100%;
    justify-content: flex-start;
    padding-inline-start: calc(1.5rem + var(--space-3));
  }

  .qs-picks {
    min-inline-size: 0;
  }
}

/* The list: the filters, then the results. */
.ql-filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ql-others {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: var(--space-3) var(--space-4);
  align-items: end;
}

.ql-text {
  grid-column: span 2;
}

.ql-search {
  min-inline-size: 7rem;
}

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

.ql-results-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.ql-results-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  min-inline-size: 0;
}

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

.ql-note {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  background: var(--color-info-soft);
  color: var(--color-link);
  font-size: var(--font-size-small);
}

.ql-note.is-off {
  background: var(--color-bg);
  color: var(--color-muted);
}

.ql-empty {
  margin: 0;
}

/* One question per row: a table on a wide screen, a card on a phone. The tick (authors and admins) and the handle
   (while the order can change) take no room when they aren't there (Task 1.3j). */
.ql-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ql-row {
  --ql-tick: 1.5rem;
  --ql-handle: 2rem;
  display: grid;
  /* every row is its own grid, so each column has a fixed width and the heading lines up with the rows */
  grid-template-columns: var(--ql-tick) var(--ql-handle) 3rem minmax(0, 1fr) 7rem 7.5rem 9rem 7rem 7.5rem;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-block-end: 1px solid var(--color-border);
  background: var(--color-surface);
}

/* A whole subskill can have a thousand rows and more (Task 1.3j): the browser draws only those near the screen. A row
   whose «إجراءات» is open, or that is being dragged, is drawn as usual, so its box isn't cut at the row's edge. */
.ql-rows > .ql-row {
  content-visibility: auto;
  contain-intrinsic-size: auto 3.75rem;
}

.ql-rows > .ql-row:has(.pp-menu.is-open),
.ql-rows > .ql-row:has(.ql-to-bar:focus),
.ql-rows > .ql-row.is-dragging {
  content-visibility: visible;
}

/* a row drawn on its own like this can cover the line under the row above it, so on a wide screen the line between two
   rows is drawn by the lower one, at its top */
@media (min-width: 62.0625rem) {
  .ql-rows > .ql-row {
    border-block-start: 1px solid var(--color-border);
    border-block-end: 0;
  }

  .ql-rows > .ql-row:first-child {
    border-block-start-color: transparent;
  }

  .ql-rows > .ql-row:last-child {
    border-block-end: 1px solid var(--color-border);
  }
}

.ql-row-head {
  border-block-end: 0;
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.ql-cell-number {
  color: var(--color-muted);
}

.ql-results-head a.button {
  text-decoration: none;
}

.ql-cell-text {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.ql-excerpt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* a question's text opens it in the window over the list (Task 1.3k): a button that looks like the text, underlined
   under the pointer */
.ql-open {
  display: block;
  inline-size: 100%;
  min-inline-size: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.ql-open > .ql-excerpt {
  display: block;
}

.ql-open:hover > .ql-excerpt {
  color: var(--color-link);
  text-decoration: underline;
}

.ql-open:focus-visible {
  border-radius: var(--radius);
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* the question shown in the window, or shown last: marked as /admin/cards and the paper editor mark theirs
   (.rc-row[aria-current="true"], .pe-qrow.is-selected), with a line round it to be seen behind the window; it stays
   marked until another search */
.ql-row.is-viewed {
  background: var(--color-info-soft);
  box-shadow: inset -3px 0 0 var(--color-primary), inset 0 0 0 1px var(--color-primary);
}

.ql-row.is-viewed > .ql-cell-number {
  color: var(--color-link);
  font-weight: 700;
}

.ql-where {
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

/* under a question's text, on one line: its code, where it is (cut short when long; the whole path shows on hover),
   what it still misses */
.ql-row .ql-where {
  display: flex;
  align-items: baseline;
  gap: 0 var(--space-3);
  min-inline-size: 0;
  white-space: nowrap;
}

.ql-row .ql-where > * {
  flex: none;
}

.ql-row .ql-where > .ql-path {
  flex: 0 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ql-missing {
  color: var(--color-draft);
}

/* in the flagged questions' list (Task admin-c): its students' first answers, the reason it's listed; in a list of
   Task 2.7's choices, its numbers, on a line of their own under it (longer: they wrap within the row) */
.ql-share {
  color: var(--color-danger);
}

.ql-numbers {
  font-size: var(--font-size-small);
}

/* the tick of a row, and the one for the whole page in the heading, whose words show only on a phone */
.ql-cell-tick {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ql-tick-all {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

@media (min-width: 62.0625rem) {
  .ql-tick-all-text {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* the keyboard's way to the bar, after the box ticked last: seen only when the keyboard is on it, beside the box */
.ql-to-bar:not(:focus) {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ql-to-bar:focus {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 100%;
  z-index: 2;
  transform: translateY(-50%);
  padding: var(--space-1) var(--space-3);
  border: 0;
  border-radius: var(--radius);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font: inherit;
  font-size: var(--font-size-small);
  white-space: nowrap;
  box-shadow: var(--shadow-raised);
}

.ql-tick {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  margin: 0;
  accent-color: var(--color-on-text);
  cursor: pointer;
}

.ql-row.is-ticked {
  background: var(--color-info-soft);
}

.ql-cell-meta {
  font-size: var(--font-size-small);
}

/* the level on a row (Task 1.3h): a small picker, saved at once; greyed while no author has set it */
.ql-level {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ql-level-select {
  inline-size: 100%;
  min-block-size: calc(var(--control-height) * 0.8);
  padding-inline: var(--space-1);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius);
  background: var(--color-input-bg);
  color: var(--color-text);
  font: inherit;
}

.ql-level-select:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

.ql-level.is-unset,
.ql-level.is-unset .ql-level-select {
  color: var(--color-muted);
}

.ql-level.is-unset .ql-level-select {
  border-style: dashed;
}

.ql-level-note {
  color: var(--color-muted);
}

.ql-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--control-height);
  color: var(--color-muted);
  font-weight: 700;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.ql-rows.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.ql-row.is-dragging {
  position: relative;
  z-index: 1;
  background: var(--color-info-soft);
  outline: 2px dashed var(--color-primary);
  outline-offset: -2px;
}

.ql-row.is-dragging .ql-handle {
  color: var(--color-primary);
  cursor: grabbing;
}

.ql-rows[aria-busy="true"] {
  opacity: 0.7;
}

.ql-cell-order {
  display: flex;
  gap: var(--space-1);
}

.ql-order-button {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--control-height);
  block-size: var(--control-height);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-link);
  font: inherit;
  cursor: pointer;
}

.ql-order-button:disabled {
  opacity: 0.4;
  cursor: default;
}

.ql-edit {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--control-height);
  padding-inline: var(--space-3);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
}

.ql-edit:hover {
  background: var(--color-info-soft);
}

/* Without ordering the handle's column is empty, and without ticks the tick's: the text takes their room. */
.ql-results:not(.is-ordering) .ql-row {
  --ql-handle: 0;
}

.ql-results:not(.can-tick) .ql-row {
  --ql-tick: 0;
}

/* «إجراءات» at the end of a row is the papers' (.pp-menu, below), and «عرض» for reviewers; both fill their column */
.ql-row > .ql-actions {
  justify-self: stretch;
}

.ql-row > .ql-actions .pp-menu-toggle {
  inline-size: 100%;
}

/* a list of several pages: the page before, which questions these are, the page after */
.ql-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
}

.ql-page-range {
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

/* on a phone, which questions these are on a line, the two buttons under it */
@media (max-width: 40rem) {
  .ql-page-range {
    flex-basis: 100%;
    order: -1;
    text-align: center;
  }
}

/* While the bar shows, what the keyboard moves to isn't left under it. */
:root:has(.ql-bulk:not([hidden])) {
  scroll-padding-block-end: 7rem;
}

/* The bar of the ticked questions: it stays at the bottom of the screen while the list scrolls under it, above the
   rows and under an open «إجراءات». */
.ql-bulk {
  position: sticky;
  inset-block-end: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
}

.ql-bulk-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
}

.ql-bulk-count {
  margin: 0;
  color: var(--color-link);
  font-weight: 700;
}

.ql-bulk-tools {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  min-inline-size: 0;
}

.ql-bulk-field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-inline-size: 0;
}

.ql-bulk-field .qb-label {
  white-space: nowrap;
}

.ql-bulk-move .qb-input {
  inline-size: 20rem;
  min-inline-size: 0;
}

.ql-bulk-level .qb-input {
  inline-size: 8rem;
  min-inline-size: 0;
}

.ql-bulk .notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding-block: var(--space-2);
}

.ql-bulk .notice-text {
  flex: 1 1 20rem;
}

/* The question's window (Task 1.3k; components/card-window.ts and learn.css): a line of facts, what the question still
   misses, then the question as /tests shows it (tests.css), with its help. */
.ql-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ql-view-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  font-size: var(--font-size-small);
}

.ql-note.is-missing {
  background: var(--color-draft-soft);
  color: var(--color-draft);
}

.ql-view .tq-note {
  margin: 0;
}

/* an answer's text has room inside its box for the font's tall letters: otherwise it scrolls by a pixel or two, and the
   keyboard stops on it */
.ql-view .tq-option-text {
  padding-block: var(--space-1);
}

/* the help's own headings (not those in its documents), as /tests shows them (its are h4s; here the window's title is the
   h2) */
.ql-view .tq-help > h3 {
  margin-block: var(--space-3) var(--space-2);
  color: var(--color-text);
  font-size: var(--font-size-body);
}

@media (max-width: 62rem) {
  /* a card: ⋮⋮, the number and the text; then type, level and state; then the buttons */
  .ql-row,
  .ql-results:not(.is-ordering) .ql-row {
    display: flex;
    flex-wrap: wrap;
    margin-block-end: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
  }

  .ql-results:not(.is-ordering) .ql-cell-handle,
  .ql-results:not(.is-ordering) .ql-cell-order,
  .ql-results:not(.can-tick) .ql-cell-tick,
  .ql-row > .ql-cell-uses {
    display: none;
  }

  /* wide enough that the type, level and state go to the next line */
  .ql-cell-text {
    flex: 1 1 calc(100% - 5rem);
  }

  /* a question's card: its box, ⋮⋮, number and text on the first line, whatever their widths; its type, level, state
     and «إجراءات» on the next (the line breaks after the text) */
  .ql-rows > .ql-row {
    row-gap: 0;
  }

  .ql-rows > .ql-row::after {
    content: "";
    flex-basis: 100%;
    order: 1;
  }

  .ql-rows > .ql-row > .ql-cell-text {
    flex: 1 1 0;
  }

  .ql-rows > .ql-row > :is(.ql-cell-type, .ql-level, .ql-cell-uses, .ql-cell-status, .ql-actions) {
    order: 2;
    margin-block-start: var(--space-2);
  }

  .ql-excerpt {
    white-space: normal;
  }

  /* a card has the room for the whole line, on as many lines as it needs */
  .ql-row .ql-where {
    flex-wrap: wrap;
    white-space: normal;
  }

  .ql-row .ql-where > .ql-path {
    overflow: visible;
  }

  .ql-row > .ql-cell-type,
  .ql-row > .ql-level,
  .ql-cell-status {
    flex: none;
  }

  .ql-cell-order {
    flex: none;
  }

  .ql-edit,
  .ql-row > .ql-actions {
    flex: 1 1 5rem;
  }

  /* the bar: its count and «إلغاء التحديد» on the first line, then its fields, each on its own line when the screen
     is narrow */
  .ql-bulk-tools {
    flex-basis: 100%;
    order: 1;
  }

  .ql-bulk-clear {
    margin-inline-start: auto;
  }

  .ql-bulk-field {
    flex: 1 1 16rem;
  }

  .ql-bulk-move .qb-input,
  .ql-bulk-level .qb-input {
    flex: 1 1 auto;
    inline-size: auto;
  }

  /* the heading's names go (each card says what it shows); its box for the whole page stays, with its words */
  .ql-results .ql-row.ql-row-head > :not(.ql-cell-tick),
  .ql-results:not(.can-tick) .ql-row.ql-row-head {
    display: none;
  }

  .ql-results .ql-row.ql-row-head {
    border: 0;
  }

  .ql-row-head > .ql-cell-tick {
    justify-content: flex-start;
  }

  :root:has(.ql-bulk:not([hidden])) {
    scroll-padding-block-end: 13rem;
  }
}

.qb-chip-status {
  flex: none;
  padding: 0 var(--space-2);
  border-radius: var(--radius);
  background: var(--color-bg);
  font-size: var(--font-size-small);
}

.qb-chip-status.is-draft {
  background: var(--color-draft-soft);
  color: var(--color-draft);
}

.qb-chip-status.is-published {
  background: var(--color-success-soft);
  color: var(--color-success-text);
}

.qb-chip-status.is-in_review,
.qb-chip-status.is-approved {
  background: var(--color-info-soft);
  color: var(--color-link);
}

/* The editor: the save bar stays at the top while the page scrolls. */
.qb-editor {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.qb-bar {
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.qb-bar-info {
  min-inline-size: 0;
}

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

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

.qb-unsaved {
  color: var(--color-draft);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.qb-action {
  border-color: var(--color-correct);
  background: var(--color-correct-soft);
  color: var(--color-text);
}

.qb-action.is-return,
.qb-action.is-retire,
.qb-action.is-withdraw {
  border-color: var(--color-border);
  background: var(--color-surface);
}

.qb-return {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  inline-size: 100%;
}

.qb-return .button {
  align-self: flex-start;
}

/* The "before review" line under the bar: each item opens its tab and goes to the field. */
.qb-ready-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  background: var(--color-danger-soft);
  font-size: var(--font-size-small);
}

.qb-ready-line.is-ok {
  background: var(--color-success-soft);
}

.qb-ready-head {
  color: var(--color-text);
}

.qb-ready-link {
  padding: var(--space-1) 0;
  border: 0;
  background: none;
  color: var(--color-danger);
  font: inherit;
  text-align: start;
  text-decoration: underline;
  cursor: pointer;
}

.qb-ready-link.is-notice {
  color: var(--color-muted);
}

.qb-ready-ok {
  color: var(--color-success-text);
}

.qe-title {
  margin: 0;
  font-size: var(--font-size-title);
}

.qb-bar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-inline-end: var(--space-2);
  border-inline-end: 1px solid var(--color-border);
}

/* The form's tabs. On a phone the strip scrolls sideways. */
.qb-tabs {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  border-block-end: 1px solid var(--color-border);
}

.qb-tab {
  flex: none;
  min-block-size: var(--control-height);
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-block-end: 3px solid transparent;
  background: none;
  color: var(--color-muted);
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}

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

.qb-tab.has-missing::after {
  content: "•";
  margin-inline-start: var(--space-1);
  color: var(--color-danger);
}

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

.qb-panel[hidden] {
  display: none;
}

@media (max-width: 40rem) {
  .qb-bar {
    position: static;
  }

  .qb-bar-actions {
    flex-basis: 100%;
    padding-inline-end: 0;
    border-inline-end: 0;
  }
}

/* /admin/cards (Task 1.4a): a subskill's revision cards, one per row, and the editor under the list. A row: the number,
   the card, and its «خيارات ⌄» (Task 1.4j; /admin/passages and /admin/papers set their own columns). */
.rc-row {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-block-end: 1px solid var(--color-border);
  background: var(--color-surface);
}

.rc-row.is-open {
  background: var(--color-info-soft);
  box-shadow: inset -3px 0 0 var(--color-primary);
}

/* the card chosen last on /admin/cards (Task 1.4m: shown with «عرض», or opened): its bar, and a line round it to be
   seen on the dimmed page around the card window too, as the paper editor marks the question it shows
   (.pe-qrow.is-selected) */
.rc-row[aria-current="true"] {
  background: var(--color-info-soft);
  box-shadow: inset -3px 0 0 var(--color-primary), inset 0 0 0 1px var(--color-primary);
}

.rc-card-title {
  font-weight: 700;
}

.rc-row .ql-edit {
  background: var(--color-surface);
  font: inherit;
  cursor: pointer;
}

.rc-editor {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
}

/* a card on its way to the editor (Task 1.4k): its row is dimmed, if it takes a moment */
.rc-row[aria-busy="true"] {
  opacity: 0.6;
  cursor: progress;
  transition: opacity 0.2s 0.15s;
}

/* the card's content is a <doc-field> (Task 1.4k), labelled like the editor's other fields */
.rc-editor .doc-field-label {
  color: var(--color-muted);
  font-size: var(--font-size-small);
  font-weight: 400;
}

.rc-state {
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.rc-state.is-dirty {
  color: var(--color-danger);
}

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

.rc-delete {
  margin-inline-start: auto;
  color: var(--color-danger);
}

.rc-delete.is-armed {
  border-color: var(--color-danger);
  background: var(--color-danger-soft);
}

/* A card's places (Task 1.4f): one line each, with «إزالة»; under them, the list of nodes to add one. */
.rc-places {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

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

.rc-place {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-block-end: 1px solid var(--color-border);
}

.rc-place:last-child {
  border-block-end: 0;
}

.rc-place-name {
  flex: 1;
  min-inline-size: 0;
}

.rc-place-name.is-here {
  font-weight: 700;
}

.rc-place-add {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.rc-place-add select {
  flex: 1;
  min-inline-size: 12rem;
}

@media (max-width: 40rem) {
  .rc-row {
    grid-template-columns: 2rem minmax(0, 1fr);
  }

  .rc-row .ql-edit {
    grid-column: 1 / -1;
  }

  /* a card's «خيارات ⌄» on its own line, at its end */
  .rc-row .am {
    grid-column: 1 / -1;
    justify-self: end;
  }
}

/* /admin/passages (Task 1.4c): built like /admin/cards, with its .rc-* styles; a row also says how many questions
   show the text, and the editor has the code beside the title. */
.ps-row {
  grid-template-columns: 2.5rem minmax(0, 1fr) 7rem 6.5rem;
}

.ps-code {
  padding: 0 var(--space-1);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-muted);
  font-size: var(--font-size-small);
  font-weight: 400;
}

.ps-fields {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

@media (max-width: 40rem) {
  .ps-row {
    grid-template-columns: 2rem minmax(0, 1fr);
  }

  .ps-row .ql-cell-meta {
    grid-column: 2;
  }

  .ps-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* /admin/papers and /admin/papers/edit (Task 3.5a): the list uses the cards' rows; the editor has a card for the
   paper and one per section, each with its questions or its drawing rules, and a summary line.
   A row of the list (Task 3.5e): the number, the paper's three lines, its state, and at the end of the line
   «إجراءات», whose box opens under it, towards the row. On a phone the lines take the whole width, and the state and
   «إجراءات» go under them, «إجراءات» still at the end of the line. */
.pp-row {
  grid-template-columns: 2.5rem minmax(0, 1fr) auto auto;
  align-items: start;
}

.pp-row .ql-cell-text {
  gap: var(--space-1);
}

.pp-menu {
  position: relative;
}

.pp-menu .ql-edit {
  gap: var(--space-1);
  background: var(--color-surface);
  font: inherit;
  cursor: pointer;
}

.pp-chevron {
  transition: transform 0.3s;
}

.pp-menu.is-open .pp-chevron {
  transform: rotate(180deg);
}

.pp-menu-list {
  display: none;
  position: absolute;
  inset-block-start: calc(100% + var(--space-1));
  inset-inline-end: 0;
  z-index: 2;
  min-inline-size: 12rem;
  margin: 0;
  padding: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
  list-style: none;
}

.pp-menu.is-open .pp-menu-list {
  display: block;
}

.pp-menu-item {
  display: flex;
  align-items: center;
  inline-size: 100%;
  min-block-size: var(--control-height);
  padding-inline: var(--space-3);
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--color-text);
  font: inherit;
  text-align: start;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.pp-menu-item:hover {
  background: var(--color-info-soft);
}

.pp-menu-item:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

.pp-menu-item:disabled {
  opacity: 0.6;
  cursor: default;
}

.pp-menu-item.pp-delete {
  color: var(--color-danger);
}

.pp-menu-item.pp-delete.is-armed {
  background: var(--color-danger-soft);
}

@media (max-width: 40rem) {
  .pp-row {
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    align-items: center;
  }

  .pp-row .ql-cell-number {
    align-self: start;
  }

  .pp-row .ql-cell-text {
    grid-column: 2 / -1;
  }

  .pp-row .ql-cell-status {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
  }

  .pp-row .pp-menu {
    grid-column: 3;
    grid-row: 2;
  }
}

/* The editor's line for a paper students have started (Task 3.5e): it says why it can't change, and links a copy. */
.qb-ready-line.pe-taken {
  background: var(--color-info-soft);
}

.pe-taken-text {
  color: var(--color-text);
}

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

/* nothing in the editor can be used while «نشر» is on its way (Task 3.5i): it is dimmed, if it takes a moment */
.pe-editor[inert] {
  opacity: 0.6;
  transition: opacity 0.2s 0.15s;
}

/* Task 3.5f: the save bar stays in view, as the question editor's does, with the paper's totals under its title. The
   sections are tabs with the home's look (learn.css's .learn-tab; since Task indoor part b pills, with no line under
   them), «+ قسم جديد» after them on their line, a pill drawn in dashes in a link's colour, so it isn't taken for a
   section. */
.pe-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2);
}

.pe-tabs .learn-tabs {
  border-block-end: 0;
}

.pe-add-tab {
  color: var(--color-link);
}

.pe-tabs .pe-add-tab {
  border-style: dashed;
  background: none;
  color: var(--color-link);
}

.pe-add-tab:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pe-totals {
  margin-block-start: var(--space-1);
}

/* a point of «قبل النشر» that has nowhere to go (the whole paper) */
.pe-problem {
  padding: var(--space-1) 0;
  color: var(--color-danger);
}

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

.pe-fields-grid {
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 1fr);
}

/* the paper's fields, and the section under the tabs */
.pe-paper,
.pe-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

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

/* «حذف القسم…» asking to be sure (Task 3.5f), under the section's number */
.pe-ask {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius);
  background: var(--color-danger-soft);
}

.pe-ask-text {
  margin: 0;
}

.pe-ask-text strong {
  color: var(--color-danger);
}

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

/* «تراجع» after a removal (Task 3.5f): at the bottom of the screen, its colours turned round, as such a line usually is */
.pe-undo-place {
  position: fixed;
  inset-block-end: var(--space-4);
  inset-inline-start: var(--space-4);
  z-index: 10;
  inline-size: min(34rem, calc(100% - 2 * var(--space-4)));
}

.pe-undo-place:empty {
  display: none;
}

.pe-undo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-2);
  padding-inline: var(--space-4) var(--space-2);
  border-radius: var(--radius);
  background: var(--color-text);
  color: var(--color-surface);
  box-shadow: var(--shadow-raised);
}

.pe-undo-text {
  flex: 1 1 auto;
  margin: 0;
}

.pe-undo-back {
  flex: none;
}

.pe-undo-close {
  flex: none;
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.pe-section-fields {
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
}

.pe-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
}

.pe-summary {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  background: var(--color-bg);
  font-size: var(--font-size-small);
}

.pe-over {
  color: var(--color-danger);
  font-weight: 700;
}

.pe-qrow {
  display: grid;
  /* ⋮⋮ (Task 3.5f), the number, the question, its level and time, its state, «خيارات» */
  grid-template-columns: 1.5rem 2.5rem minmax(0, 1fr) 7rem auto auto;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-block-end: 1px solid var(--color-border);
}

.pe-picker .pe-qrow {
  /* its tick (Task 3.5f), the question, its level and time, its state, «+ أضف» or its section */
  grid-template-columns: 1.5rem minmax(0, 1fr) 7rem auto 6.5rem;
}

.pe-qrow.is-ticked {
  background: var(--color-info-soft);
}

/* a question a point of «قبل النشر» is about (Task 3.5f): a red edge at its start */
.pe-qrow.is-pointed {
  position: relative;
  background: var(--color-danger-soft);
}

.pe-qrow.is-pointed::before {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 4px;
  background: var(--color-danger-fill);
  content: "";
}

/* the question shown last in «عرض» (the owner, 17 Oct 2026), marked as /admin/cards marks the card open in its editor,
   with a line round it to be seen behind the window: it follows «السابق» and «التالي» */
.pe-qrow.is-selected {
  background: var(--color-info-soft);
  box-shadow: inset -3px 0 0 var(--color-primary), inset 0 0 0 1px var(--color-primary);
}

/* a question being dragged by its ⋮⋮, as on /admin/questions */
.pe-qrow.is-dragging {
  position: relative;
  z-index: 1;
  background: var(--color-info-soft);
  outline: 2px dashed var(--color-primary);
  outline-offset: -2px;
}

.pe-qrow.is-dragging .ql-handle {
  color: var(--color-primary);
  cursor: grabbing;
}

.pe-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.qb-chip-status.pe-warn {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

/* «في old-t2 أيضاً» (Task 3.5f): a line round it, not a fill, so it isn't read as the question's state */
.qb-chip-status.pe-other {
  border: 1px solid currentColor;
  background: transparent;
  color: var(--color-draft);
}

.pe-remove {
  color: var(--color-danger);
}

.pe-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
}

.pe-picker-form {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr) auto auto;
  align-items: end;
}

.pe-picker-checks {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

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

/* «تحديد الكل», then what the search found */
.pe-picker-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.pe-tick-all {
  flex: none;
  padding-inline-start: var(--space-3);
}

.pe-found {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.pe-picker .ql-edit {
  background: var(--color-surface);
  font: inherit;
  cursor: pointer;
}

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

.pe-draw {
  display: grid;
  grid-template-columns: 7rem minmax(0, 2fr) auto minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.pe-levels {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.pe-levels legend {
  inline-size: 100%;
}

@media (max-width: 62rem) {
  .pe-fields-grid,
  .pe-section-fields,
  .pe-picker-form,
  .pe-draw {
    grid-template-columns: minmax(0, 1fr);
  }

  .pe-qrow {
    grid-template-columns: 1.25rem 2rem minmax(0, 1fr);
  }

  .pe-qrow > :where(:not(.ql-cell-handle, .ql-cell-number, .ql-cell-text)) {
    grid-column: 1 / -1;
  }

  .pe-qrow > .ql-cell-text {
    grid-column: 3 / -1;
  }

  /* a question's «خيارات ⌄» (Task 3.5f) on its own line, at its end, as a card's on /admin/cards */
  .pe-qrow > .am {
    justify-self: end;
  }

  /* a result of the search: its tick beside the question, the rest under the question */
  .pe-picker .pe-qrow {
    grid-template-columns: 1.5rem minmax(0, 1fr);
  }

  .pe-picker .pe-qrow > * {
    grid-column: 2;
  }

  .pe-picker .pe-qrow > .ql-cell-tick {
    grid-column: 1;
  }

  .pe-picker-head {
    flex-wrap: wrap;
  }
}

/* «إعداد الاختبار» (Task admin-l): the exam's details and its instruction lines, one card under the other */
.ex-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-block-start: var(--space-4);
}

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

/* a group of boxes, its name and its line above them */
.ex-set {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ex-set > legend {
  margin-block-end: var(--space-1);
  padding: 0;
}

/* a level's Arabic and English names side by side, one under the other on a narrow screen */
.ex-level {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: var(--space-2) var(--space-3);
}

/* the scale's two boxes, short, side by side */
.ex-scale {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 8rem));
  gap: var(--space-3);
}

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

/* in a ticked chip the count is in the chip's own colour, which reads on its background */
.qb-chip:has(input:checked) .ex-count {
  color: inherit;
}

/* a type the exam keeps (questions are of it): pressing it changes nothing, and says why */
.qb-chip:has(input[aria-disabled="true"]) {
  cursor: default;
}

/* a box with something wrong, as the app's other fields */
.ex-card .qb-input[aria-invalid="true"] {
  border-color: var(--color-danger);
}

/* «حفظ» and «إضافة ترويسة» while theirs is on its way: greyed, the keyboard still on them */
.ex-card .button[aria-busy="true"] {
  opacity: 0.6;
  cursor: progress;
}

/* a line's words over its whole row (they may be long: the box grows with them where the browser can, and can be made
   taller where it can't), then how many questions have it, then its buttons */
.ex-line-box {
  flex: 1 1 100%;
  min-block-size: calc(var(--control-height) * 1.6);
  line-height: var(--line-height);
  field-sizing: content;
  resize: vertical;
}

.ex-line-about {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

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

/* «موقوفة»: a mark of its own beside the count, not read as one phrase with it, in the text's own colour (the muted one
   is a little faint at this size) */
.ex-line-state {
  padding-inline: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  font-size: var(--font-size-small);
}

/* «حذف» and «تراجع» once the delete is on its way: greyed, the keyboard still on them, pressing them changes nothing */
.ex-ask .button[aria-disabled="true"],
.ex-ask .button[aria-disabled="true"]:hover {
  opacity: 0.6;
  cursor: progress;
}

/* what's wrong with a line's words, under them, over the row's whole width */
.ex-line-error {
  flex: 1 1 100%;
}

/* «شجرة المهارات» (Task admin-m): the tree level by level, a row for each node (its name, which opens it when nodes are
   under it, its icon, its level and questions, «مخفي», then its menu at the row's end), what's open under a row, and
   the boxes for new nodes */
.tr-list,
.tr-kids {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* a node's children, a step in from it, along a line that shows whose they are */
.tr-kids {
  margin-inline-start: var(--space-4);
  padding-inline-start: var(--space-2);
  border-inline-start: 1px solid var(--color-border);
}

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

.tr-row + .tr-form,
.tr-row + .tr-ask {
  margin-block-end: var(--space-2);
}

.tr-row > .am {
  margin-inline-start: auto;
}

/* a row's own change refused: under it */
.tr-row-error {
  margin-block: 0 var(--space-2);
}

.tr-toggle,
.tr-leaf {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--control-height);
  max-inline-size: 100%;
  padding-inline: var(--space-1) var(--space-2);
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--color-text);
  font: inherit;
  text-align: start;
}

.tr-toggle {
  cursor: pointer;
}

.tr-toggle:hover {
  background: var(--color-info-soft);
}

/* closed, the chevron points along the line (to the left, right to left); open, down */
.tr-chevron {
  flex: none;
  transition: transform 0.2s;
}

.tr-toggle[aria-expanded="false"] .tr-chevron {
  transform: rotate(90deg);
}

/* where a leaf's chevron would be, so the names line up */
.tr-chevron-space {
  flex: none;
  inline-size: 1em;
}

.tr-icon {
  flex: none;
}

.tr-node[data-depth="1"] > .tr-row .tr-name {
  font-weight: 700;
}

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

/* «مخفي»: a mark of its own, as a stopped line's «موقوفة» */
.tr-state {
  padding-inline: var(--space-2);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  font-size: var(--font-size-small);
}

/* a form or a question under a row, and the box for a new node */
.tr-form,
.tr-ask {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.tr-ask {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.tr-ask > p {
  flex: 1 1 100%;
  margin: 0;
}

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

.tr-names,
.tr-move-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: var(--space-3);
}

.tr-icons {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.tr-icons > legend {
  margin-block-end: var(--space-1);
  padding: 0;
}

/* the icons as they look, a button-sized box each; the one chosen marked, the keyboard's ringed */
.tr-icon-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.tr-icon-choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--control-height);
  block-size: var(--control-height);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}

.tr-icon-choice > input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.tr-icon-choice:hover {
  background: var(--color-info-soft);
}

.tr-icon-choice:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-info-soft);
  box-shadow: inset 0 0 0 1px var(--color-primary);
  color: var(--color-primary);
}

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

.tr-icon-big {
  inline-size: 1.4em;
  block-size: 1.4em;
}

.tr-weight {
  max-inline-size: 8rem;
}

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

.tr-add {
  margin-block: var(--space-2);
}

.tr-add-line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tr-add-line > .field-input {
  flex: 1 1 14rem;
}

/* the top's own box, at the card's end: a form of the card, not a box in it */
.tr-top-form {
  padding: 0;
  border: 0;
  background: none;
}

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

/* a row whose change is on its way, and a button that can't be pressed now (its change already on its way): greyed, the
   keyboard still on them */
.tr-row[aria-busy="true"] {
  opacity: 0.7;
}

.tr-card .button[aria-disabled="true"],
.tr-card .button[aria-disabled="true"]:hover {
  opacity: 0.6;
  cursor: progress;
}

/* the icon a node has now, when it isn't one of those offered */
.tr-icon-now {
  margin-block-end: var(--space-1);
}

/* high contrast replaces the colours that show which icon is chosen: its frame takes the system's */
@media (forced-colors: active) {
  .tr-icon-choice:has(input:checked) {
    border: 2px solid Highlight;
  }
}

/* a narrow screen: the levels step in less, and a row is its name with its menu at the end, what it holds under them */
@media (max-width: 40rem) {
  .tr-kids {
    margin-inline-start: var(--space-2);
  }

  .tr-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-2);
    row-gap: 0;
  }

  .tr-row > .tr-toggle,
  .tr-row > .tr-leaf {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .tr-row > .am {
    grid-column: 2;
    grid-row: 1;
    margin-inline-start: 0;
  }

  /* under the name, lined up with it (after the chevron's place and the icon) */
  .tr-row > .tr-meta,
  .tr-row > .tr-state {
    grid-column: 1 / -1;
    justify-self: start;
    margin-inline-start: calc(var(--space-1) + 2em + var(--space-2) * 2);
  }

  .tr-row > .tr-state {
    margin-block-start: var(--space-1);
  }

  /* the menu's button as its sign alone (its name is still read: «خيارات «…»»), so the name has the room */
  .tr-row .am-button > span {
    display: none;
  }

  .tr-row .am-button {
    padding-inline: var(--space-2);
  }
}