/* The page's base look. Right-to-left first: margins and paddings use logical properties
   (inline-start / inline-end), so the same rules work for English pages too. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Every scroll bar as the old site's (course/basic.css, which drew them all so; the owner, 26 Oct 2026): 10px, a light
   track and a grey thumb, square: the page's own, and whatever scrolls inside a page (a window over it, a list, a strip
   of keys). Chrome and Edge draw them so; Firefox, which has no such bars, takes their colours (they pass down from the
   page). A part that hides its bar (scrollbar-width: none) keeps it hidden, and the course page keeps the old site's
   own thinner ones (old-course.css). */
::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
  background-color: var(--color-scrollbar-track);
}

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

@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
  }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height);
}

a {
  color: var(--color-link);
}

/* inside (the outdoor pages keep theirs, site.css): a link in the text turns the text's colour while pointed at (one with
   a class of its own keeps its colours), and a box to tick or to pick and a slider are teal (Task indoor) */
a:where(:not([class])):where(:not(.site *)):hover {
  color: var(--color-link-hover);
}

:where(input[type="checkbox"], input[type="radio"], input[type="range"]):where(:not(.site *)) {
  accent-color: var(--color-on-text);
}

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

app-shell {
  display: block;
}

.app-header {
  display: flex;
  align-items: center;
  min-height: var(--header-height);
  /* lines the name up with the content column on wide screens */
  padding-inline: max(var(--space-4), calc((100% - var(--content-width)) / 2 + var(--space-4)));
  background: var(--color-header-bg);
  color: var(--color-header-text);
}

.app-brand {
  color: inherit;
  font-weight: 700;
  text-decoration: none;
}

.app-main {
  max-width: var(--content-width);
  margin-inline: auto;
  padding: var(--space-5) var(--space-4);
}

.app-main:focus {
  outline: none;
}

h1 {
  margin-block: 0 var(--space-3);
  font-size: var(--font-size-title);
  font-weight: 700;
  line-height: 1.4;
}

.lead {
  margin-block: 0 var(--space-4);
  color: var(--color-quiet);
}

.server-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  font-size: var(--font-size-small);
}

.server-status::before {
  content: "";
  inline-size: 0.6rem;
  block-size: 0.6rem;
  border-radius: 50%;
  background: var(--color-muted);
}

.server-status[data-state="ok"]::before {
  background: var(--color-success);
}

.server-status[data-state="down"]::before {
  background: var(--color-danger);
}

.noscript {
  padding: var(--space-4);
}

/* An element with the hidden attribute stays hidden, even when a class gives it display: flex. */
[hidden] {
  display: none !important;
}

/* The account links, at the end of the header. On a narrow phone they go under the app's name. */
user-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-inline-size: 0;
  margin-inline-start: auto;
}

.app-header {
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  padding-block: var(--space-2);
}

.app-brand {
  white-space: nowrap;
}

.nav-link {
  padding: var(--space-1) var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: none;
  color: var(--color-header-link);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* as on the old site: a yellow line under the link you point at */
.nav-link:hover {
  color: var(--color-header-text);
  border-block-end-color: var(--color-header-line);
  border-radius: 0;
}

.nav-link-strong {
  border-color: currentColor;
}

.nav-user {
  max-inline-size: 12rem;
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Cards, forms and messages, as the kit draws them (Task indoor): a card white with round corners, its line and a drop
   under it. */
.card {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.auth-card {
  max-inline-size: var(--card-width);
  margin-inline: auto;
}

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-block: var(--space-4);
}

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

.field-label {
  font-weight: 700;
}

.field-input {
  min-block-size: var(--control-height);
  padding: var(--space-2) 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;
}

.field-input:where(:not(.site *))::placeholder {
  color: var(--color-muted);
}

/* fields light up softly when you type in them, as on the old site (the outdoor pages keep it) */
.field-input:focus {
  border-color: var(--color-input-focus);
  outline: none;
  box-shadow: 0 0 8px color-mix(in srgb, var(--color-input-focus) 60%, transparent);
}

/* inside (Task indoor): a teal ring round the field you type in, its line the text's colour */
.field-input:where(:not(.site *)):focus {
  outline: 3px solid var(--color-on);
  outline-offset: 1px;
  box-shadow: none;
}

/* Emails and passwords are typed left to right, but line up with the rest of the right-to-left form. */
.field-input[dir="ltr"] {
  text-align: end;
}

.field-input[aria-invalid="true"] {
  border-color: var(--color-danger);
}

.field-hint,
.field-error {
  margin: 0;
  font-size: var(--font-size-small);
}

.field-hint {
  color: var(--color-muted);
}

.field-error {
  color: var(--color-danger);
}

.field-error:where(:not(.site *)) {
  font-weight: 700;
}

.button {
  /* a link drawn as a button isn't underlined */
  text-decoration: none;
  min-block-size: var(--control-height);
  padding: var(--space-1) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  cursor: pointer;
}

.button:active {
  box-shadow: inset 0 3px 5px color-mix(in srgb, var(--color-text) 15%, transparent);
}

/* the main one: navy, yellow in dark mode, its drop under it (Task indoor) */
.button-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-primary);
}

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

/* the old site's plain white button; its drop under it (Task indoor) */
.button-secondary {
  border-color: var(--color-input-border);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-button);
}

.button-secondary:hover {
  background: var(--color-bg);
}

/* Inside (Task indoor), the kit's buttons: bold words, a link drawn as one as tall as one, and pressed, a button moves
   down onto its drop; the white one framed in a card's line, which darkens while pointed at. The outdoor pages keep
   the buttons above (their drops are none there: tokens.css). */
.button:where(:not(.site *)) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-weight: 700;
  line-height: 1.4;
  transition: transform 0.08s, box-shadow 0.08s;
}

.button:where(:not(.site *)):active {
  transform: translateY(var(--drop-press));
  box-shadow: none;
}

/* (one that does nothing, greyed, doesn't move) */
.button[aria-disabled="true"]:active {
  transform: none;
}

.button-secondary:where(:not(.site *)) {
  border-color: var(--color-border);
}

.button-secondary:where(:not(.site *)):hover {
  border-color: var(--color-muted);
  background: var(--color-surface);
}

/* on navy (a band): yellow, the outdoor pages' main button, and an outlined one */
.button-go {
  background: var(--site-yellow);
  color: var(--site-on-yellow);
  box-shadow: 0 var(--drop-button) 0 var(--site-yellow-shadow);
}

.button-go:hover {
  box-shadow: 0 var(--drop-button) 0 var(--site-yellow-shadow), 0 0 0 3px var(--site-yellow-shadow);
}

.button-ghost {
  border-color: var(--site-navy-edge);
  background: transparent;
  color: var(--site-navy-title);
}

.button-ghost:hover {
  background: var(--site-navy-hover);
}

/* a link's colour, no box */
.button-quiet {
  padding-inline: var(--space-2);
  background: none;
  color: var(--color-link);
}

.button-quiet:hover {
  text-decoration: underline;
}

/* to delete or to stop: red words in a red line */
.button-danger {
  border-color: var(--color-danger);
  background: none;
  color: var(--color-danger);
}

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

.button-small {
  min-block-size: var(--control-height-small);
  padding-inline: var(--space-3);
  border-radius: var(--radius-small);
  font-size: var(--font-size-small);
}

.button:disabled {
  opacity: 0.6;
  cursor: progress;
  box-shadow: none;
  transform: none;
}

/* The kit's other small parts (Task indoor), for the pages as their designs are built: chips, choices as pills, a box
   to tick, a switch and a meter. */

/* a chip: a short word or two in a pill, grey unless it says otherwise */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-block-size: var(--chip-height);
  padding-inline: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-chip-grey);
  color: var(--color-chip-grey-text);
  font-size: var(--font-size-small);
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.chip-teal {
  background: var(--color-chip-teal);
  color: var(--color-chip-teal-text);
}

.chip-yellow {
  background: var(--color-chip-yellow);
  color: var(--color-chip-yellow-text);
}

.chip-navy {
  background: var(--color-chip-navy);
  color: var(--color-chip-navy-text);
}

.chip-red {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

/* a dot that pulses before «مباشرة الآن» (in its chip's colour; still with reduced motion) */
.live-dot {
  flex: none;
  inline-size: var(--live-dot);
  block-size: var(--live-dot);
  border-radius: 50%;
  background: currentColor;
  animation: live-dot-pulse 1.6s ease-in-out infinite;
}

@keyframes live-dot-pulse {
  50% {
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .live-dot {
    animation: none;
  }
}

/* choices as pills: a label round its radio or box to tick, which it hides; the one chosen filled as the main button */
.choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-block-size: var(--control-height);
  padding-inline: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  cursor: pointer;
}

.choice > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choice:has(> input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 700;
}

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

/* a box to tick with its words */
.check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--control-height-small);
  cursor: pointer;
}

.check > input {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  margin: 0;
}

/* a switch: a box to tick drawn as one (role="switch"), teal when on */
.switch {
  position: relative;
  flex: none;
  inline-size: var(--switch-width);
  block-size: var(--chip-height);
  margin: 0;
  border-radius: var(--radius-pill);
  background: var(--color-track);
  appearance: none;
  cursor: pointer;
  transition: background 0.15s;
}

.switch::after {
  content: "";
  position: absolute;
  inset-block-start: var(--switch-gap);
  inset-inline-start: var(--switch-gap);
  inline-size: var(--switch-knob);
  block-size: var(--switch-knob);
  border-radius: 50%;
  background: var(--color-switch-knob);
  box-shadow: var(--shadow-knob);
  transition: inset-inline-start 0.15s;
}

.switch:checked {
  background: var(--color-switch-on);
}

.switch:checked::after {
  inset-inline-start: calc(100% - var(--switch-knob) - var(--switch-gap));
}

/* a meter: teal on its track (its share set on the fill as its inline size) */
.meter {
  display: block;
  block-size: var(--meter-height);
  border-radius: var(--radius-pill);
  background: var(--color-track);
  overflow: hidden;
}

.meter-fill {
  display: block;
  block-size: 100%;
  border-radius: inherit;
  background: var(--color-on);
}

/* A main page's navy band (Task indoor, part b; components/page-band.js), the same in both modes: its title, the line
   under it, its actions (the main one yellow, .button-go), the robot at its end, and the page's keys under them as
   pills (nav-bar.css; on a phone they go to the bar at the bottom). It runs as wide as the page lets it. */
.page-band {
  background: var(--site-navy);
  color: var(--site-navy-text);
}

.page-band-wrap {
  max-inline-size: var(--site-wrap);
  margin-inline: auto;
  padding-inline: var(--site-gutter);
}

.page-band-in {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding-block: var(--space-5) var(--space-4);
}

.page-band-words {
  flex: 1;
  min-inline-size: 0;
}

.page-band-title {
  margin: 0;
  color: var(--site-navy-title);
  font-size: var(--font-size-band);
  font-weight: 700;
  line-height: 1.5;
}

.page-band-line {
  max-inline-size: 62ch;
  margin: 0;
}

.page-band-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
}

/* its numbers (since part c): tiles on the navy, a card's navy and its line, each its icon and its words (the page's) */
.page-band-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
}

.page-band-stat {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: var(--tile-height);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--site-navy-line);
  border-radius: var(--radius);
  background: var(--site-navy-card);
}

.page-band-robot {
  display: block;
  flex: none;
  inline-size: var(--band-robot);
  aspect-ratio: 69 / 49;
}

.page-band :focus-visible {
  outline-color: var(--site-focus);
}

/* since part e (the Community-circles board, a circle's page): a way back over the title, a quieter part under the
   line (its facts), and a mark in the robot's place (the circle's icon on a tile of the navy's cards) */
.page-band-back {
  margin-block-end: var(--space-1);
}

.page-band-back > a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--site-navy-text);
  font-size: var(--font-size-small);
  text-decoration: none;
}

.page-band-back > a:hover {
  color: var(--site-navy-title);
  text-decoration: underline;
}

.page-band-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-block-start: var(--space-2);
  color: var(--color-bar-faint);
  font-size: var(--font-size-small);
}

.page-band-meta > p {
  margin: 0;
}

.page-band-mark {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: var(--band-mark);
  block-size: var(--band-mark);
  border: 1px solid var(--site-navy-line);
  border-radius: var(--radius-mark);
  background: var(--site-navy-card);
  color: var(--color-navy-link);
}

.page-band-mark .icon {
  inline-size: var(--band-mark-icon);
  block-size: var(--band-mark-icon);
  stroke-width: 1.5;
}

/* A work page's head (Task indoor, part b; components/work-head.js): the way to it, its title with its icon, a line
   under it, its actions at the line's end, and a meter under them if it has one; no band, so the work starts high. */
.work-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3) var(--space-4);
  padding-block: var(--space-2) var(--space-4);
}

.work-head-words {
  flex: 1;
  min-inline-size: 0;
}

.work-path-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-quiet);
  font-size: var(--font-size-small);
}

.work-path-step {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.work-path-step .icon {
  inline-size: 0.875rem;
  block-size: 0.875rem;
  color: var(--color-muted);
}

.work-path a {
  color: inherit;
  text-decoration: none;
}

.work-path a:hover {
  color: var(--color-text);
  text-decoration: underline;
}

.work-head-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-heading);
  font-weight: 700;
  line-height: 1.5;
}

.work-head-title .icon {
  inline-size: var(--head-icon);
  block-size: var(--head-icon);
  color: var(--color-on-text);
}

.work-head-line {
  margin: 0;
  color: var(--color-quiet);
}

.work-head-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.work-head-meter {
  flex-basis: 100%;
}

/* A page's state (Task indoor, part b; components/page-state.js), in the middle of its card: empty (the robot
   curious), waiting (thinking, and lines that shimmer in the place of what comes; still with reduced motion) or done
   (its star eyes), its title, a line and its actions. */
.page-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-4);
  text-align: center;
}

.page-state-robot {
  display: block;
  inline-size: var(--state-robot);
  aspect-ratio: 69 / 49;
  margin-block-end: var(--space-1);
}

.page-state-title {
  margin: 0;
  font-size: var(--font-size-card-title);
  font-weight: 700;
  line-height: 1.6;
}

.page-state-line {
  max-inline-size: 32ch;
  margin: 0;
  color: var(--color-quiet);
}

.page-state-acts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-block-start: var(--space-2);
}

.page-state-lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  inline-size: 100%;
  margin-block-start: var(--space-3);
}

.page-state-lines > span {
  display: block;
  block-size: var(--skeleton-height);
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-rule) 0%, var(--color-raised) 50%, var(--color-rule) 100%);
  background-size: 200% 100%;
  animation: page-state-shine 1.4s linear infinite;
}

.page-state-lines > span:nth-child(2) {
  inline-size: 82%;
}

.page-state-lines > span:nth-child(3) {
  inline-size: 64%;
}

@keyframes page-state-shine {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: -100% 0;
  }
}

/* a phone's band: lower, its title smaller, its robot too, the title and its line beside the robot and its numbers and
   actions under them, the band's width (since part c, as the phone boards have them: the numbers two in a row); a
   state's robot smaller */
@media (max-width: 47.9375rem) {
  .page-band-wrap {
    padding-inline: var(--space-4);
  }

  .page-band-in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 var(--space-3);
    padding-block: var(--space-4) var(--space-3);
  }

  .page-band-words {
    display: contents;
  }

  .page-band-back,
  .page-band-title,
  .page-band-line {
    grid-column: 1;
  }

  .page-band-meta {
    grid-column: 1 / -1;
  }

  .page-band-stats,
  .page-band-acts {
    grid-column: 1 / -1;
  }

  .page-band-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-block-start: var(--space-3);
  }

  .page-band-stat {
    gap: var(--space-2);
    padding-inline: var(--space-3);
  }

  .page-band-title {
    font-size: var(--font-size-heading);
  }

  .page-band-robot {
    grid-column: 2;
    grid-row: 1 / span 2;
    inline-size: var(--band-robot-phone);
  }

  .page-band-mark {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    inline-size: var(--band-mark-phone);
    block-size: var(--band-mark-phone);
    border-radius: var(--radius-inner);
  }

  .page-band-mark .icon {
    inline-size: var(--band-mark-icon-phone);
    block-size: var(--band-mark-icon-phone);
  }

  .page-state-robot {
    inline-size: var(--state-robot-phone);
  }
}

/* (a band's numbers one under the other on the narrowest phones) */
@media (max-width: 22rem) {
  .page-band-stats {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-state-lines > span {
    animation: none;
  }
}

.form-links {
  margin-block: var(--space-2) 0;
}

/* Signing in with another site's account (Task 0.6b): a divider, then one button per provider. Hidden until the
   server says which providers it has been set up for, so no button appears that cannot work. */
.auth-social {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
}

.auth-or {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  color: var(--color-muted);
}

.auth-or::before,
.auth-or::after {
  content: "";
  flex: 1;
  border-block-start: 1px solid var(--color-border);
}

.auth-social .button {
  justify-content: center;
}

/* A message, as the kit's notes: soft blue, teal when done, red for a problem, its icon at its start (form.js) and
   what follows its words (a link, a button) under them. */
.notice {
  padding: var(--space-3) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--color-info-soft);
  color: var(--color-text);
}

.notice[data-kind="error"] {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.notice[data-kind="success"] {
  background: var(--color-success-soft);
  color: var(--color-success-text);
}

.notice:has(> .notice-icon) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-3);
  align-items: start;
  justify-items: start;
}

.notice:has(> .notice-icon) > :not(.notice-icon) {
  grid-column: 2;
}

/* (its middle on the first line's) */
.notice-icon {
  grid-row: 1;
  margin-block-start: calc((var(--line-height) * 1em - 1.25em) / 2);
}

.notice-text {
  margin: 0;
}

.notice a {
  color: inherit;
  font-weight: 700;
}

/* "Confirm your email", on the home page. */
.reminder {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  margin-block: 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--color-info-soft);
}

.reminder-text {
  margin: 0;
}

.reminder .notice {
  align-self: stretch;
}

/* The admin page's numbers. */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-3);
  margin: 0;
}

/* a tile: a raised part of its card */
.stat {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-raised);
}

.stat-label {
  color: var(--color-quiet);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.stat-value {
  margin: 0;
  font-size: var(--font-size-stat);
  font-weight: 700;
}

/* «يحتاج انتباهك» (Task admin-b), first on the admin page: a row for each count, its first ones under it; then the
   numbers, under their own title */
.admin-attention h2,
.admin-numbers h2 {
  margin-block: 0 var(--space-2);
  font-size: var(--font-size-card-title);
}

.admin-numbers h2 {
  margin-block-start: var(--space-4);
}

.admin-attention-rows,
.admin-attention-items {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.admin-attention-head {
  margin: 0;
  font-weight: 700;
}

.admin-attention-head a {
  font-weight: 400;
}

.admin-attention-hint,
.admin-attention-more {
  margin: var(--space-1) 0 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

/* the first ones, each on its line, a little in from their count; a long question's text wraps */
.admin-attention-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-block-start: var(--space-1);
  padding-inline-start: var(--space-3);
  overflow-wrap: anywhere;
}

.admin-attention-more {
  padding-inline-start: var(--space-3);
}

.admin-attention-dot,
.admin-attention-meta {
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

/* on a phone, the words after a link go on their own line, under it */
@media (max-width: 40rem) {
  .admin-attention-dot {
    display: none;
  }

  .admin-attention-meta {
    display: block;
  }
}

.admin-attention-none {
  margin: 0;
  color: var(--color-muted);
}

/* «صفحات الإدارة» (Task admin-a), under the numbers: a line for each of the menu's groups, its name, then its links */
.admin-go h2 {
  margin-block: var(--space-4) var(--space-2);
  font-size: var(--font-size-card-title);
}

.admin-go-lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
}

.admin-go-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-3);
}

.admin-go-group {
  min-inline-size: 5rem;
  color: var(--color-muted);
}

/* the links beside their group's name while there's room, each one whole on its line */
.admin-go-links {
  flex: 1 1 12rem;
  min-inline-size: 0;
  margin: 0;
}

.admin-go-links a {
  white-space: nowrap;
}

/* The admin page's other cards (Task 7.1), under the numbers: «الأدوار», «الدورات» and «المجتمع» (Task 8.1). */
admin-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Since Task admin-e the page is a keys bar with five views: the cards of each one under another, as the page's were;
   the bar's own margin keeps it from the view under it. */
admin-page.has-view-keys {
  gap: 0;
}

admin-page .vk-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* its five keys (the keys bar is made for two or three), as /community's six: narrower on a narrow screen, so they fit
   at the top from 500 wide; on a phone, where the bar is at the foot, they and «رئيسية» share it, none out of sight from
   320 wide, none narrower than its longest word (a name of two words, «نظرة عامة», on two lines), and a key's count
   kept inside its key, not over the screen's edge */
@media (max-width: 40rem) {
  admin-page .vk-key {
    min-inline-size: 4.75rem;
  }
}

@media (max-width: 31.1875rem) {
  admin-page .vk-key {
    min-inline-size: min-content;
    padding-inline: var(--space-1);
  }
}

@media (max-width: 22.5rem) {
  admin-page .vk-home {
    min-inline-size: 0;
    padding-inline: var(--space-1);
  }

  admin-page .vk-count {
    inset-inline-end: max(0px, calc(50% - 1.875rem));
  }
}

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

/* the email and «بحث» side by side, under the label, with the field's error under both */
.admin-find {
  margin-block-end: var(--space-3);
}

.admin-find .field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-2);
}

.admin-find .field-label,
.admin-find .field-hint,
.admin-find .field-error {
  grid-column: 1 / -1;
}

/* (Task admin-f) the accounts a search found, each a line to choose, the one shown in bold */
.admin-hits-line {
  margin: 0 0 var(--space-1);
  font-weight: 700;
}

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

.admin-hit {
  padding: var(--space-1) 0;
  border: 0;
  background: none;
  color: var(--color-link);
  font: inherit;
  text-align: start;
  text-decoration: underline;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.admin-hit[aria-current="true"] {
  color: var(--color-text);
  font-weight: 700;
  text-decoration: none;
}

.admin-hits .field-hint {
  margin-block-start: var(--space-1);
}

.admin-account {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-start: var(--space-3);
}

.admin-account-name,
.admin-account-meta {
  margin: 0;
  overflow-wrap: anywhere;
}

.admin-account-name {
  font-weight: 700;
}

.admin-account-meta,
.admin-you {
  color: var(--color-muted);
  font-size: var(--font-size-small);
  font-weight: 400;
}

.admin-account-meta.admin-warning {
  color: var(--color-danger);
}

.admin-roles {
  margin-block-start: var(--space-1);
}

/* «أصحاب الأدوار» (Task admin-f): an account a row, its roles under its name, with who gave each and when */
.admin-staff-count {
  margin: 0 0 var(--space-2);
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.admin-staff-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-staff-row {
  padding-block-end: var(--space-3);
  border-block-end: 1px solid var(--color-border);
}

.admin-staff-row:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

.admin-staff-head {
  margin: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.admin-staff-email {
  font-weight: 400;
}

.admin-staff-roles {
  margin: var(--space-1) 0 var(--space-2);
  padding-inline-start: var(--space-4);
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

/* «سجل الإدارة» (Task admin-g): «ما يُسجَّل», then «حفظ» under it */
.admin-log-scope {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.admin-log-scope .admin-options {
  align-self: stretch;
}

/* its lines, the newest first, each with what was done and to what, what else it keeps, and who and when */
.admin-log-lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-log-line {
  padding-block-end: var(--space-3);
  border-block-end: 1px solid var(--color-border);
  overflow-wrap: anywhere;
}

.admin-log-line:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

.admin-log-head {
  margin: 0;
}

.admin-log-what {
  font-weight: 700;
}

.admin-log-details {
  margin: var(--space-1) 0 0;
  padding-inline-start: var(--space-4);
  list-style-type: disc;
}

.admin-log-meta {
  margin: var(--space-1) 0 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.admin-log-older {
  margin-block-start: var(--space-3);
}

.admin-options {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

/* «المجتمع»'s settings, one under the other */
.admin-options + .admin-options {
  margin-block-start: var(--space-3);
}

/* the question of the day's reminder's hour (Task 8.9b), under them */
.admin-hour {
  margin-block: var(--space-3) 0;
}

/* «الإنجازات» (Task 8.10b): its four settings under their own title, after a line */
.admin-subtitle {
  margin-block: var(--space-4) var(--space-2);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--color-border);
  font-size: var(--font-size-body);
}

/* a part's line under its title (Task 8.13b's «الرجال والنساء») */
.admin-part-lead {
  margin-block: 0 var(--space-3);
}

.admin-hour select {
  max-inline-size: 12rem;
}

/* who last changed a card's settings, and when (Task admin-a), under them */
.admin-changed {
  margin-block: var(--space-3) 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.admin-changed + .notice {
  margin-block-start: var(--space-2);
}

/* «حدود ملفات المواد» (Task 7.6a): the three limits side by side while they fit, then «حفظ الحدود» */
.admin-limits {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  margin-block-end: var(--space-3);
}

.admin-limits .field {
  flex: 1 1 9rem;
  min-inline-size: 0;
}

/* «حالة النظام» (Task admin-i): a line for each thing the server has or lacks, a mark at its start and its state beside
   its name; then the videos, each one whose streams failed with its material and «أعد المحاولة» */
.admin-system-lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-system-line {
  padding-inline-start: var(--space-3);
  border-inline-start: 4px solid var(--color-border);
  overflow-wrap: anywhere;
}

.admin-system-line[data-state="well"] {
  border-inline-start-color: var(--color-success);
}

.admin-system-line[data-state="lack"] {
  border-inline-start-color: var(--color-danger);
}

.admin-system-name,
.admin-system-text {
  margin: 0;
}

.admin-system-name {
  font-weight: 700;
}

.admin-system-state {
  color: var(--color-muted);
  font-size: var(--font-size-small);
  font-weight: 400;
}

.admin-system-line[data-state="well"] .admin-system-state {
  color: var(--color-success);
}

.admin-system-line[data-state="lack"] .admin-system-state {
  color: var(--color-danger);
}

.admin-system-text {
  margin-block-start: var(--space-1);
}

.admin-system-videos > p {
  margin: 0 0 var(--space-2);
}

.admin-system-failed {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}

.admin-system-video {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  padding-block-end: var(--space-3);
  border-block-end: 1px solid var(--color-border);
  overflow-wrap: anywhere;
}

.admin-system-file {
  margin: 0;
  font-weight: 700;
}

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

.admin-system-more {
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

/* «قواعد التعلّم» (Task admin-h): the levels, then each group of numbers under its title and its note, a line between
   groups; the boxes narrow, for numbers; «حفظ» under them */
.admin-learning {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin-block-end: var(--space-3);
}

.admin-learning-levels {
  margin: 0;
}

.admin-learning-group {
  display: grid;
  /* two numbers a row where the card is wide enough, one where it isn't */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  align-items: start;
  gap: var(--space-3) var(--space-5);
  align-self: stretch;
  margin: 0;
  padding: var(--space-3) 0 0;
  border: 0;
  border-block-start: 1px solid var(--color-border);
  min-inline-size: 0;
}

/* (inside the group, under its line, not on it) */
.admin-learning-group > legend {
  float: inline-start;
  grid-column: 1 / -1;
  inline-size: 100%;
  margin-block-end: var(--space-1);
  padding: 0;
  font-weight: 700;
}

/* what changes with the group's numbers, and when */
.admin-learning-note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--color-muted);
}

.admin-learning-box {
  max-inline-size: 8rem;
}

/* «السياسات» (Task site, part a): each policy under its title, a line between them; its text wide and tall, its
   preview under it as its page will show it */
.admin-policies {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-block-end: var(--space-3);
}

.admin-policy + .admin-policy {
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-border);
}

.admin-policy h3 {
  margin-block: 0 var(--space-1);
  font-size: var(--font-size-body);
}

.admin-policy > .admin-changed,
.admin-policy > .form-links {
  margin-block: 0 var(--space-2);
}

.admin-policy-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.admin-policy-form > .field,
.admin-policy-form > .ha-preview {
  align-self: stretch;
}

.admin-policy-text {
  inline-size: 100%;
  min-block-size: 12rem;
  resize: vertical;
}

/* a policy's headings, on its page and in the preview */
.policy-text .policy-heading {
  margin-block: var(--space-4) var(--space-2);
  font-size: var(--font-size-card-title);
}

.policy-text > .policy-heading:first-child {
  margin-block-start: 0;
}

/* «البلاغات» (Task 8.2): the reasons, one row each: its text, then its marks and buttons, which go under the text when
   the card is narrow */
.admin-reasons-set {
  margin: var(--space-4) 0 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.admin-reasons {
  display: flex;
  flex-direction: column;
  margin: var(--space-2) 0 var(--space-3);
  padding: 0;
  list-style: none;
}

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

.admin-reason-label {
  flex: 1 1 14rem;
  min-inline-size: 0;
}

.admin-reason-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
}

.admin-reason-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.admin-reason-actions .button {
  padding-inline: var(--space-3);
}

/* «أعلى» on the first reason and «أسفل» on the last: greyed, the keyboard can stay on it, and nothing happens */
.admin-reason-actions .button[aria-disabled="true"],
.admin-reason-actions .button[aria-disabled="true"]:hover {
  background: var(--color-surface);
  opacity: 0.6;
  cursor: default;
}

.admin-reason-actions .button[aria-disabled="true"]:active {
  box-shadow: none;
}

/* a reason no longer offered: greyed, and says so */
.admin-reason-stopped .admin-reason-label {
  color: var(--color-muted);
}

.admin-reason-tag {
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

/* the new reason's field and «إضافة سبب» side by side, under the label */
.admin-add-reason {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-2);
}

.admin-add-reason .field-label {
  grid-column: 1 / -1;
}

/* a role an account can't be given yet (its email isn't confirmed), and the boxes while a change is being saved */
.admin-roles:not([aria-busy]) .qb-chip:has(input:disabled) {
  cursor: default;
  opacity: 0.6;
}

.admin-roles[aria-busy="true"],
.admin-options[aria-busy="true"] {
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* The subject tree's icons (core/icon.ts): lines in the text's colour, as big as the text around them. */
.icon {
  flex: none;
  inline-size: 1.25em;
  block-size: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.25em;
}

.icon .icon-fill {
  fill: currentColor;
  stroke: none;
}

/* a name with its icon before it */
.with-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Text for screen readers only: there for them, not shown on the screen. */
.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* docBuilder content (cards, passages, questions) in the app's dark mode. docContent.css switches its colours
   with the old site's #body.dark, which this app doesn't use, so without this its text stayed dark on the dark
   page. The same variables, set from our tokens (the lab's file is left as it is). */
@media (prefers-color-scheme: dark) {
  .doc-content:not(.doc-page) {
    --doc-text: var(--color-doc-text);
    --doc-title: var(--color-doc-text);
    --doc-subtitle: var(--color-doc-muted);
    --doc-heading: var(--color-doc-heading);
    --doc-heading-3: var(--color-doc-heading-3);
    --doc-quote: var(--color-doc-muted);
    --doc-quote-line: var(--color-doc-line);
    --doc-rule: var(--color-doc-line);
    --doc-cell-line: var(--color-doc-line);
    --doc-header-bg: var(--color-doc-head-bg);
  }

  /* Words on a background of their own (a highlight, a shaded cell, a box of a page made in htmlBuilder): doc-html.ts
     marks it light or dark after the colour that shows (a see-through one over what is behind it), Task 1.7e. Dark words
     on a light one, light words on a dark one (in a light one too). */
  .doc-content:not(.doc-page) [data-doc-bg="light"] {
    color: var(--color-on-highlight);
  }

  .doc-content:not(.doc-page) [data-doc-bg="dark"] {
    color: var(--doc-text);
  }
}

/* drawings (Task 1.2e): their black lines show light in dark mode (tokens.css) */
.doc-content:not(.doc-page) .doc-draw {
  filter: var(--drawing-filter);
}

/* A picture of a page that opens large (Task 1.7e, picture-viewer.ts): over the page, the page dimmed behind it, as
   large as the screen lets it be, with «إغلاق» under it */
.picture-viewer {
  max-inline-size: none;
  max-block-size: none;
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;
}

.picture-viewer::backdrop {
  background: var(--color-backdrop);
}

body:has(.picture-viewer[open]) {
  overflow: hidden;
}

.picture-viewer-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.picture-viewer-img {
  display: block;
  max-inline-size: calc(100vw - 2 * var(--space-4));
  max-block-size: calc(100dvh - var(--control-height) - 2 * var(--space-5));
  object-fit: contain;
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
  cursor: zoom-out;
}

/* The tooltip of a word of a page (Task 1.7e, page-tooltip.ts): in the page's top layer, over the word or under it, so
   the page's box doesn't cut it off; as htmlBuilder shows it (dark on the light look), and no wider than about its 260
   px. The page's own tooltip (docHtml.css) doesn't show on the app's pages. */
.page-tooltip {
  position: fixed;
  inset: auto;
  margin: 0;
  max-inline-size: min(calc(var(--card-width) * 0.6), calc(100vw - 2 * var(--space-2)));
  padding: var(--space-1) var(--space-2);
  border: none;
  border-radius: var(--radius);
  background: var(--color-text);
  color: var(--color-surface);
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  text-align: center;
  overflow-wrap: anywhere;
  box-shadow: var(--shadow-raised);
  pointer-events: none;
}

.doc-content .doc-html .hb-tooltip[data-tooltip]::after {
  content: none;
}

/* «بلاغ عن مشكلة» (Task admin-k): the button under a question or an exercise, the dialog's thank you, the question
   editor's line, and «بلاغات الأسئلة» */
.problem-open {
  font-size: var(--font-size-small);
}

.lv-report {
  margin-block-start: var(--space-2);
}

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

.qb-problems {
  margin-block: 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  background: var(--color-info-soft);
}

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

.problems-tabs [aria-pressed="true"] {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.problems-only {
  color: var(--color-muted);
}

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

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

.problems-reasons,
.problems-go {
  margin-block: var(--space-1) 0;
}

.problems-reports {
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.problems-report {
  padding-block: var(--space-2);
  border-block-start: 1px solid var(--color-border);
  overflow-wrap: anywhere;
}

.problems-report p {
  margin: 0;
}

.problems-report-reason {
  font-weight: 600;
}

.problems-report-meta,
.problems-closed {
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.problems-decide {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-block-start: var(--space-3);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--color-border);
}

.problems-decide .button[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}