/* /tests (Task 3.5d): the mock exams students sit. Colours and sizes come from tokens.css only. */

/* the page is as wide as the others (the home page's), the review too (the owner, 23 Oct 2026); only while a section
   is sat is it wider, so a shared text can sit beside its question and the numbers' panel beside them */
.app-main:has(> .tests-page.is-sitting) {
  max-width: var(--wide-width);
}

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

.tests-page a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.button-large {
  min-block-size: calc(var(--control-height) * 1.2);
  padding-inline: var(--space-6);
  font-size: var(--font-size-card-title);
}

.tests-back {
  display: inline-block;
  margin-block-end: var(--space-3);
  color: var(--color-link);
}

/* ── the list ── */

/* one column on small screens, two on large ones */
.tests-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 60rem) {
  .tests-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

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

.tests-item-size,
.tests-item-description {
  margin: var(--space-1) 0 0;
  color: var(--color-muted);
}

.tests-item-side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* where an unfinished attempt is (3.5g): the running section's time left, in the test clock's colours; or the
   section to start next */
.tests-item-now {
  margin-block: var(--space-1) 0;
  margin-inline: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.tests-item-now.is-warn {
  color: var(--color-draft);
}

.tests-item-now.is-low {
  color: var(--color-danger);
}

.tests-chip {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.tests-chip.is-running {
  background: var(--color-draft-soft);
  color: var(--color-draft);
}

.tests-chip.is-done {
  background: var(--color-correct-soft);
  color: var(--color-success-text);
}

/* ── before the test, and between sections ── */

.tests-table {
  inline-size: 100%;
  margin-block: var(--space-3);
  border-collapse: collapse;
}

.tests-table th,
.tests-table td {
  padding: var(--space-2) var(--space-3);
  border-block-end: 1px solid var(--color-border);
  text-align: start;
}

/* its head raised, as the kit's tables (Task indoor) */
.tests-table th {
  background: var(--color-raised);
  color: var(--color-quiet);
  font-weight: 700;
}

.tests-rules {
  margin-block: 0 var(--space-5);
  padding-inline-start: var(--space-5);
  line-height: var(--line-height);
}

.tests-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0;
  padding: 0;
  list-style: none;
}

.tests-step {
  display: flex;
  flex-direction: column;
  min-inline-size: 9rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

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

.tests-step.is-ended {
  border-color: var(--color-correct);
  background: var(--color-correct-soft);
}

.tests-step.is-running {
  border-color: var(--color-primary);
}

.tests-next {
  margin-block-start: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  background: var(--color-info-soft);
}

.tests-next h2 {
  margin-block: 0 var(--space-2);
  font-size: var(--font-size-card-title);
}

.tests-warning {
  color: var(--color-danger);
  font-weight: 700;
}

/* ── a running section ── */

.tests-bar {
  position: sticky;
  z-index: 1;
  inset-block-start: 0;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.tests-bar-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}

/* a time warning (3.5g): over the page just under the bar, at its end (under the clock), so nothing moves when it
   comes or goes; empty, and so without size, between warnings, but kept in the page for screen readers */
.tests-alert {
  position: absolute;
  inset-block-start: calc(100% + var(--space-1));
  inset-inline-end: var(--space-4);
  max-inline-size: calc(100% - 2 * var(--space-4));
  margin: 0;
  font-weight: 700;
}

.tests-alert:not(:empty) {
  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);
  box-shadow: var(--shadow-raised);
}

.tests-alert[data-level="low"]:not(:empty) {
  border-color: var(--color-danger);
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

/* Focus mode (3.5g): while a section runs, the site's top bar is put away, so a stray tap can't take the student off
   the clock; the test's bar takes its place at the top of the screen (nav-bar.css keeps it under --nb-height) */
app-shell:has(.tests-page.is-sitting) > :is(nav-bar, .app-header) {
  display: none;
}

:root:has(.tests-page.is-sitting) {
  --nb-height: 0px;
}

.tests-where {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}

.tests-section-title {
  font-weight: 700;
}

.tests-save {
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.tests-save[data-state="failing"] {
  color: var(--color-danger);
  font-weight: 700;
}

.tests-clock {
  min-inline-size: 5ch;
  font-size: var(--font-size-title);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: center;
}

.tests-clock.is-warn {
  color: var(--color-draft);
}

.tests-clock.is-low {
  color: var(--color-danger);
}

/* The section: the question and «السابق» «التالي» on the start side; beside them (60rem and wider) the panel with the
   numbers, which stays in view under the test's bar (its height comes from the page: --tests-bar-height); under them on
   narrower screens (3.5g) */
.tests-sitting {
  display: grid;
  gap: var(--space-4);
}

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

.tests-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.tests-panel-title {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-card-title);
}

.tests-progress {
  margin: 0;
  font-weight: 700;
}

@media (min-width: 60rem) {
  .tests-sitting {
    grid-template-columns: minmax(0, 1fr) 17rem;
    align-items: start;
  }

  .tests-panel {
    position: sticky;
    inset-block-start: calc(var(--nb-height, 0px) + var(--tests-bar-height, 0px) + var(--space-4));
    /* the page's own space at the top is left out too, so the panel fits the screen before the page scrolls */
    max-block-size: calc(100vh - var(--nb-height, 0px) - var(--tests-bar-height, 0px) - 2 * var(--space-4) - var(--space-5));
    overflow-y: auto;
  }

  .tests-panel .tests-keys {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* the keys (3.5g), for a keyboard: not on a phone or a tablet without one */
.tests-key-help {
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.tests-key-help p {
  margin: 0;
  font-weight: 700;
}

.tests-key-help ul {
  margin: 0;
  padding-inline-start: var(--space-4);
}

@media (hover: none) and (pointer: coarse) {
  .tests-key-help {
    display: none;
  }
}

.tq-instruction {
  margin-block: 0 var(--space-3);
  color: var(--color-text);
  font-weight: 700;
}

.tq {
  /* the shared text goes beside its question when the question has room for both (3.5g: on a wide screen, the question
     shares the width with the panel of numbers), not by the screen's width */
  container-type: inline-size;
}

.tq-body {
  display: grid;
  gap: var(--space-4);
}

.tq-passage {
  max-block-size: 60vh;
  overflow-y: auto;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  background: var(--color-bg);
}


@container (min-width: 44rem) {
  .tq-body.has-passage {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
  }
}

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

.tq-picture img,
.doc-view img {
  max-inline-size: 100%;
  block-size: auto;
}

.doc-view {
  overflow-x: auto;
}

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

.tq-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  cursor: pointer;
}

.tq-option input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.tq-option:has(input:focus-visible) {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.tq-option:hover {
  border-color: var(--color-primary);
}

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

.tq-option-text {
  flex: 1;
  min-inline-size: 0;
}

/* an option's text is short: no paragraph margin over it */
.tq-option-text .doc-content > :first-child {
  margin-block-start: 0;
}

.tq-option.is-chosen {
  border-color: var(--color-primary);
  background: var(--color-info-soft);
}

.tq-option.is-chosen .tq-letter {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.tests-tools,
.tests-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tests-tools {
  margin-block-start: var(--space-4);
}

.tests-nav {
  justify-content: space-between;
}

.tests-nav .button {
  min-inline-size: 7rem;
}

.button.is-marked {
  border-color: var(--color-draft);
  background: var(--color-draft-soft);
  color: var(--color-draft);
}

.tests-keys {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(2.5rem, 1fr));
  gap: var(--space-2);
}

.tests-key {
  min-block-size: 2.5rem;
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
}

.tests-key.is-answered,
.tests-key.is-answered-marked {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.tests-key.is-marked,
.tests-key.is-answered-marked {
  box-shadow: inset 0 0 0 3px var(--color-draft);
}

.tests-key.is-current {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

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

.tests-end-button {
  inline-size: 100%;
  color: var(--color-danger);
}

.tests-confirm {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius);
  background: var(--color-danger-soft);
}

.tests-confirm p {
  margin: 0;
}

/* the numbers without an answer, and the marked ones (3.5g) */
.tests-gaps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}

.tests-gaps-label {
  margin-inline-end: var(--space-1);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.tests-gaps .tests-key {
  min-inline-size: 2.25rem;
  min-block-size: 2.25rem;
}

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

/* ── results ── */

/* the tab «تقييم»: the score, then each section's and each field's bars */
.tests-evaluation {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.tests-score-big {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
}

.tests-score-value {
  color: var(--color-text);
  font-size: calc(var(--font-size-stat) * 1.5);
  font-weight: 700;
  line-height: 1.2;
}

/* a placement test (Task study-plan): what it's for, on its first page; and the start level it gave each field */
.tests-placement-note {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-inline-start: 4px solid var(--color-on);
  background: var(--color-info-soft);
}

.tests-placed {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.tests-placed h2 {
  margin: 0;
  font-size: var(--font-size-card-title);
  color: var(--color-text);
}

.tests-placed-lead {
  margin: 0;
  color: var(--color-muted);
}

.tests-placed-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-2);
  align-self: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tests-placed-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.tests-placed-level {
  flex: none;
  color: var(--color-text);
  font-weight: 700;
}

/* the estimate he had before the paper (Task 5.4d) */
.tests-estimate-before {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
  font-weight: 700;
}

/* (not a heading of a page made in htmlBuilder, which has its own look: docHtml.css, Task 1.7e) */
/* «حسب القسم» and «حسب المجال» side by side in a strip that slides, one card in sight; their names over it */
.tests-slides-view {
  overflow: hidden;
  touch-action: pan-y;
}

.tests-slides-track {
  display: flex;
  align-items: flex-start;
  transform: translateX(calc(var(--at, 0) * -100%));
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* right to left, the next card is on the left: the track moves right */
.tests-slides-track:dir(rtl) {
  transform: translateX(calc(var(--at, 0) * 100%));
}

/* base.css stops every movement where the device asks for less motion; this slide stays (the owner, 26 Oct 2026) */
@media (prefers-reduced-motion: reduce) {
  .tests-slides-track {
    transition-duration: 0.45s !important;
  }
}

.tests-slides-track > * {
  flex: 0 0 100%;
  min-inline-size: 0;
  box-sizing: border-box;
}

.tests-slide-names {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-end: var(--space-3);
}

/* the names read as the cards' headings did, not as buttons: its own in the heading's colour, the others quieter,
   underlined when pointed at */
.tests-slide-name {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-muted);
  font: inherit;
  font-size: var(--font-size-card-title);
  font-weight: 700;
  cursor: pointer;
}

/* the other card's name with its caret */
button.tests-slide-name {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

button.tests-slide-name:hover {
  color: var(--color-text);
  text-decoration: underline;
}

.tests-slide-name.is-current {
  color: var(--color-text);
  cursor: default;
}

.tests-tally h2,
.tests-review h2:where(:not(.doc-html *)) {
  margin-block: 0 var(--space-3);
  font-size: var(--font-size-card-title);
  color: var(--color-text);
}

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

.tests-bar-row {
  display: grid;
  grid-template-columns: minmax(8rem, 2fr) minmax(6rem, 3fr) auto;
  align-items: center;
  gap: var(--space-3);
}

.tests-bar-track {
  /* the bar grows from the start side (the right, in Arabic) */
  display: flex;
  justify-content: flex-start;
  block-size: 0.75rem;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-track);
}

.tests-bar-fill {
  display: block;
  inline-size: calc(var(--share, 0) * 100%);
  block-size: 100%;
  background: var(--color-on);
}

.tests-bar-text {
  color: var(--color-muted);
  font-size: var(--font-size-small);
  white-space: nowrap;
}

/* the results' parts as tabs under the score (the owner, 17 Oct 2026); the tabs look like /learn's (learn.css, which
   comes later: hence the two classes) */
.learn-tabs.tests-tabs {
  margin-block-end: calc(var(--space-4) * -1 + var(--space-2));
}

/* on a phone the three share the row, rather than one going to a line of its own (since Task indoor part b pills, a
   little apart) */
@media (max-width: 40rem) {
  .learn-tabs.tests-tabs {
    flex-wrap: nowrap;
    gap: var(--space-1);
  }

  .tests-tabs .learn-tab {
    flex: 1 1 auto;
    padding-inline: var(--space-2);
  }
}

/* a field's row ends with «تدرّب» (3.5g) */
.tests-bar-row.has-link {
  grid-template-columns: minmax(8rem, 2fr) minmax(6rem, 3fr) auto auto;
}

.tests-practise {
  font-size: var(--font-size-small);
  font-weight: 700;
  white-space: nowrap;
}

.tests-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-end: var(--space-3);
}

/* each button's icon before its words, in the colour of what it shows (the owner, 23 Oct 2026) */
.tests-filter .button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.tests-filter .is-wrong .icon {
  color: var(--color-danger);
}

.tests-filter .is-right .icon {
  color: var(--color-success);
}

.tests-filter .is-marked .icon {
  color: var(--color-draft);
}

.tests-filter .is-unanswered .icon {
  color: var(--color-muted);
}

/* in the review's panel, under its title: the icons in one row */
.tests-panel .tests-filter {
  margin: 0;
}

/* the section and field menus in the panel: one under the other, as wide as the panel */
.tests-panel .tests-review-choices {
  flex-direction: column;
  margin: 0;
}

.tests-panel .tests-review-choice {
  flex-wrap: nowrap;
}

.tests-panel .tests-filter .button {
  padding-inline: var(--space-2);
}

.tests-filter .button[aria-pressed="true"] .icon {
  color: inherit;
}

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

/* the review (3.5g): the filter, then one question with the numbers beside it, as while sitting */
.tests-review-choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-block-end: var(--space-4);
}

.tests-review-choice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-inline-size: 0;
}

.tests-review-count {
  align-self: center;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

.tests-panel-section {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.tests-key.is-right {
  border-color: var(--color-correct);
  background: var(--color-correct-fill);
  color: var(--color-on-fill);
  font-weight: 700;
}

.tests-key.is-wrong {
  border-color: var(--color-danger);
  background: var(--color-danger-fill);
  color: var(--color-on-fill);
  font-weight: 700;
}

/* a review square without an answer: a border that shows in both themes */
.tests-review .tests-key.is-empty {
  border-color: var(--color-muted);
}

/* marked «راجعه لاحقاً» during the test: a dot in the corner, ringed so it shows on any square */
.tests-key.is-flagged {
  position: relative;
}

.tests-key.is-flagged::after {
  content: "";
  position: absolute;
  inset-block-start: 0.2rem;
  inset-inline-end: 0.2rem;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background: var(--color-draft);
  box-shadow: 0 0 0 2px var(--color-surface);
}

/* the review's legend and keys: slid up under their button until it slides them down */
.tests-guide-toggle {
  align-self: flex-start;
  font-size: var(--font-size-small);
}

.tests-guide {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.25s ease;
}

.tests-guide.is-closed {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.25s ease, visibility 0s 0.25s;
}

.tests-guide-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-block-size: 0;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .tests-guide,
  .tests-guide.is-closed {
    transition: none;
  }
}

.tests-review-legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: 0;
  list-style: none;
}

.tests-review-legend li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.tests-key.is-sample {
  display: inline-block;
  flex: none;
  inline-size: 1.25rem;
  min-block-size: 0;
  block-size: 1.25rem;
  cursor: default;
}

.tests-review-item.is-right {
  border-inline-start: 4px solid var(--color-correct);
}

.tests-review-item.is-wrong {
  border-inline-start: 4px solid var(--color-danger);
}

.tests-review-item.is-empty {
  border-inline-start: 4px solid var(--color-input-border);
}

.tests-review-where {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
  font-weight: 400;
}

.tests-review-verdict {
  margin-block: var(--space-1) var(--space-3);
  font-weight: 700;
}

.tests-review-item.is-right .tests-review-verdict {
  color: var(--color-correct);
}

.tests-review-item.is-wrong .tests-review-verdict {
  color: var(--color-danger);
}

.tests-review-item.is-empty .tests-review-verdict {
  color: var(--color-muted);
}

/* the question was marked «راجعه لاحقاً» during the test */
.tests-review-flag {
  margin-inline-start: var(--space-1);
  padding: 0 var(--space-2);
  border-radius: var(--radius);
  background: var(--color-draft-soft);
  color: var(--color-draft);
  font-size: var(--font-size-small);
}

.tq-options.is-review .tq-option {
  cursor: default;
}

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

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

.tq-option.is-wrong {
  border-color: var(--color-danger);
  background: var(--color-danger-soft);
}

.tq-mark {
  flex: none;
  font-size: var(--font-size-small);
  font-weight: 700;
}

.tq-help {
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--color-border);
}

/* the review's button that hides or shows the panel (the owner, 23 Oct 2026): over the question, on the panel's side;
   with the panel hidden, the question takes the whole width */
/* inside the question's box while the panel is hidden: at its top, on its own line */
.tests-review-item > .tests-panel-toggle {
  display: flex;
  margin-block-end: var(--space-3);
  margin-inline-start: auto;
}

/* beside the question's instruction: the instruction, then the small key at the line's end */
.tests-instruction-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.tests-instruction-row > .tq-instruction {
  flex: 1;
  min-inline-size: 0;
}

.tests-panel-toggle.is-small {
  flex: none;
  justify-content: center;
  padding: var(--space-1);
  inline-size: 2rem;
  block-size: 2rem;
  align-self: flex-start;
}

/* inside the panel, at its top, the whole width of it */
.tests-panel > .tests-panel-toggle {
  align-self: stretch;
  justify-content: center;
}

.tests-panel-toggle {
  display: inline-flex;
  align-self: flex-end;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-small);
}

@media (min-width: 60rem) {
  .tests-sitting.is-panel-hidden {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* «عرض الشرح» under the options, and the help in its window over the page (the owner, 23 Oct 2026) */
.tq-help-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-4);
}

/* «عرض الشرح» as small as «بلاغ عن مشكلة» beside it */
.tq-help-bar .tq-help-open {
  font-size: var(--font-size-small);
}

.tq-help-open {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.tq-help-dialog .tq-help {
  margin: 0;
  padding: 0;
  border: none;
}

/* (not a heading of a page made in htmlBuilder, Task 1.7e) */
.tq-help h4:where(:not(.doc-html *)) {
  margin-block: var(--space-3) var(--space-2);
  color: var(--color-text);
}

.tq-steps {
  margin: 0;
  padding-inline-start: var(--space-5);
}

@media (max-width: 40rem) {
  .tests-bar-row {
    grid-template-columns: 1fr auto;
  }

  .tests-bar-row.has-link {
    grid-template-columns: 1fr auto auto;
  }

  .tests-bar-track {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .tests-nav .button {
    flex: 1;
  }
}

/* the narrowest phones (3.5g): a score's words under its title, and «السابق» «التالي» beside the review's count */
@media (max-width: 24rem) {
  .tests-bar-title {
    grid-column: 1 / -1;
  }

  .tests-bar-track {
    grid-row: 3;
  }

  .tests-nav .button {
    min-inline-size: 0;
  }
}