/* «المجتمع» (/community and /community/post, Task 8.3b; the canvas «Social area redesign»). Right to left first: logical
   properties only. Colours and sizes come from tokens.css. The feed: the line that opens the composer, then the posts as
   cards (who wrote it and when, its text, its question, its counts, and «مفيد», «علّق» and «احفظ» in a row under a
   line). A post's page: the way back, the post, its comments with their replies a step in, and the box at the end. The
   composer and the report open over the page: a box in the middle, and a sheet from the foot of the screen on a phone.
   Since Task 8.4b, a post's question to answer on its page (its choices, then each one's share and the solution), the
   feed's line under a question, the comments' order and «أفضل إجابة». Since Task 8.5b, moderation: «مراجعة البلاغات»
   (/community/review: its cards, rv-*), the line to it over the feed, the writer's mark on a post or a comment a moderator
   hid, the stopped reader's line, and the windows' lengths. Since Task 8.6b, «النشاط» (/community/activity: its lines,
   ac-*), «منشور جديد» over the feed, and a comment the inbox led to. Since Task 8.7b, «إعدادات الإشعارات» in «النشاط»
   (ps-*). Since Task 8.8b, study circles: «الحلقات» (/community/circles) and a circle's page (/community/circle: its
   head, «هدف الأسبوع», «الأعضاء»; ci-*), a post's circle and pin, and the composer's «يُنشر في». Since Task 8.12b,
   private messages: «الرسائل» and a conversation (/community/messages; pm-*), «راسل», and a reported message's card in
   the review. Since Task 8.15b, a person's page (/community/person; pp-*), and a name's link to it. Since Task indoor
   part e (the boards Community, Community-phone and Community-circles): «المنشورات», «الحلقات» and a circle's page under
   their navy band, on the outdoor pages' column with a side; a post and its comments in the kit's look on the
   community's own pages (.cm-kit; a person's page keeps the look of before); the composer's line; «الحلقات»'s cards;
   a circle's side («هدف الأسبوع», «الأعضاء») (its section at the end). */

community-page,
community-circle-page,
community-circles-page,
community-post-page,
community-review-page,
community-activity-page,
community-messages-page,
community-person-page {
  /* small grey words that still read on white and on the fields' grey (the muted token is a little too light for small
     text: card-window.css) */
  --cm-quiet: color-mix(in srgb, var(--color-text) 78%, var(--color-surface));
}

community-page,
community-circle-page,
community-review-page,
community-activity-page {
  display: block;
}

community-post-page,
community-person-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* a view of the feed, under the keys bar */
.cm-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* a view with no key (Task community-keys: «الإنجازات», «منشورات حلقاتي», opened from the top bar's «المجتمع»): its
   name over it, as a circle's page has its own */
.cm-view-title {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-title);
  overflow-wrap: anywhere;
}

.cm-feed,
.cm-threads,
.cm-replies,
.cm-picks {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* every community page: its main box is never wider than 500px and sits in the middle (since Task indoor part e, but
   «المنشورات», «الحلقات» and a circle's page with their band, and a post's page, below) */
:is(community-page, community-circles-page, community-circle-page, community-post-page, community-review-page,
  community-activity-page, community-messages-page, community-person-page) {
  width: 100%;
  max-width: 500px;
  margin-inline: auto;
  box-sizing: border-box;
}

/* «جارٍ التحميل…», «لا منشورات بعد…»: an empty line takes no room (its gap is taken back), and it stays in the page,
   so screen readers hear it when it fills */
.cm-status {
  margin: 0;
  color: var(--cm-quiet);
}

.cm-status:empty {
  margin-block-start: calc(-1 * var(--space-3));
}

.cm-more {
  align-self: center;
}

.cm-why {
  margin: 0;
  color: var(--color-danger);
}

.cm-safety,
.cm-review-line {
  margin: 0;
  color: var(--cm-quiet);
  font-size: var(--font-size-small);
}

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

/* the first letter of a name, in a circle */
.cm-initial {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: var(--control-height);
  block-size: var(--control-height);
  border-radius: 50%;
  background: var(--color-info-soft);
  color: var(--color-link);
  font-weight: 700;
  line-height: 1;
}

/* ── Writing: «اسأل أو شارك فكرة…», or why one can't ────────────────────────────────────────────────────── */

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

.cm-write-line {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

/* (Task indoor part e) his letter teal, as the Community board's */
.cm-write-line > .cm-initial.is-me {
  inline-size: var(--avatar-large);
  block-size: var(--avatar-large);
  background: var(--color-on);
  color: var(--site-navy);
}

/* «نقاشات الأسئلة» narrowed to one question (Task 8.4c): «نقاشات هذا السؤال» with its subskill and level, and «كل
   نقاشات الأسئلة» at the end (under it when there's no room) */
.cm-narrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3);
}

.cm-narrow-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  min-inline-size: 0;
  margin: 0;
  font-weight: 700;
}

.cm-narrow-title > .cm-tag {
  align-self: center;
}

/* it opens the composer, and looks like the box it opens (since Task indoor part e, the Community board's: a pill on the
   raised part's colour, its words the faint ones) */
.cm-write-open {
  flex: 1;
  min-inline-size: 0;
  min-block-size: var(--cm-row);
  padding-inline: var(--space-4);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-pill);
  background: var(--color-raised);
  color: var(--color-muted);
  font: inherit;
  text-align: start;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.cm-write-open:hover {
  border-color: var(--color-input-focus);
}

/* «أرفق سؤالاً»: since Task indoor part e a small white button with its words (on a phone the paperclip alone, round) */
.cm-write-attach {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: var(--control-height-small);
  padding-inline: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-surface);
  box-shadow: var(--shadow-button);
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-small);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.cm-write-attach:hover {
  border-color: var(--color-muted);
}

.cm-write-attach > .icon {
  inline-size: var(--icon-small);
  block-size: var(--icon-small);
}

.cm-verify {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
}

.cm-verify > p {
  margin: 0;
}

.cm-verify > .notice {
  align-self: stretch;
}

/* ── A post ──────────────────────────────────────────────────────────────────────────────────────────────── */

.cm-post {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-block: var(--space-3) 0;
  padding-inline: var(--space-4);
}

/* a post with no buttons under it (a reader who may not write, on its own page) */
.cm-post:not(:has(> .cm-actions)) {
  padding-block-end: var(--space-3);
}

.cm-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.cm-head > .am {
  flex: none;
}

.cm-by {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-3);
  min-inline-size: 0;
}

.cm-by-text {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  line-height: 1.5;
}

.cm-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* «مدرّب», «مراقب», «مشرف» by the name */
.cm-badge {
  padding-inline: var(--space-2);
  border-radius: var(--radius);
  background: var(--color-primary-strong);
  color: var(--color-on-primary);
  font-size: var(--font-size-small);
  font-weight: 400;
}

.cm-when {
  color: var(--cm-quiet);
  font-size: var(--font-size-small);
}

/* the text as written: its line breaks kept, and a long link (shown as text) broken where it must be */
.cm-text {
  margin: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* the question: its subskill and level, then its stem as students see it */
.cm-question {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-inline-size: 0;
  padding: var(--space-3);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius);
  background: var(--color-bg);
}

/* the right answer's teal, a shade darker so the small words read on its light teal */
.cm-tag {
  align-self: flex-start;
  padding-inline: var(--space-2);
  border-radius: var(--radius);
  background: var(--color-correct-soft);
  color: color-mix(in srgb, var(--color-correct) 80%, var(--color-text));
  font-size: var(--font-size-small);
  font-weight: 700;
}

.cm-stem {
  min-inline-size: 0;
}

.cm-question-gone {
  margin: 0;
  padding: var(--space-3);
  border: 1px dashed var(--color-input-border);
  border-radius: var(--radius);
  color: var(--cm-quiet);
}

/* ── A post's question to answer, on its page (Task 8.4b) ─────────────────────────────────────────────────── */

/* the tag at the start, and once answered whether he was right, at the end */
.cm-q-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
}

.cm-q-result {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.cm-q-result:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.cm-q-instruction,
.cm-q-note,
.cm-q-shares,
.cm-q-gone {
  margin: 0;
}

.cm-q-instruction {
  font-weight: 700;
}

.cm-q-note,
.cm-q-shares {
  color: var(--cm-quiet);
  font-size: var(--font-size-small);
}

.cm-q-gone {
  color: var(--cm-quiet);
}

/* «اعرض النص» and «الحل خطوة بخطوة»: they open what is under them; the arrow turns when it's open */
.cm-q-toggle {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--space-2);
  min-block-size: var(--control-height);
  padding-inline: var(--space-4);
  border: 1px solid var(--color-input-border);
  border-radius: calc(var(--control-height) / 2);
  background: var(--color-surface);
  color: var(--color-link);
  font: inherit;
  font-size: var(--font-size-small);
  font-weight: 700;
  cursor: pointer;
}

.cm-q-toggle:hover {
  border-color: var(--color-primary);
}

.cm-q-toggle:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.cm-q-chevron {
  inline-size: 1em;
  block-size: 1em;
  transition: transform 0.15s ease;
}

.cm-q-toggle[aria-expanded="true"] .cm-q-chevron {
  transform: rotate(180deg);
}

/* the shared text, folded until asked for */
.cm-q-passage {
  max-block-size: 50vh;
  overflow-y: auto;
  padding: var(--space-3);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.cm-q-picture img {
  max-inline-size: 100%;
  block-size: auto;
}

/* the choices: a group with its legend, one a row; the letter in a circle for one answer, a square for all that apply */
.cm-q-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cm-choices {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.cm-choices-legend {
  margin-block-end: var(--space-1);
  padding: 0;
  color: var(--cm-quiet);
  font-size: var(--font-size-small);
}

.cm-choice,
.cm-answer {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: calc(var(--control-height) * 1.2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.cm-choice {
  cursor: pointer;
}

/* the input itself is out of sight: its letter shows whether it's chosen */
.cm-choice > input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

.cm-choice:hover {
  border-color: var(--color-primary);
}

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

.cm-letter {
  position: relative;
  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;
}

.cm-choices.is-multi .cm-letter,
.cm-answers.is-multi .cm-letter {
  border-radius: var(--radius);
}

.cm-choice:has(> input:checked) {
  border-color: var(--color-primary);
  background: var(--color-info-soft);
}

.cm-choice:has(> input:checked) > .cm-letter {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.cm-choices:disabled .cm-choice {
  cursor: progress;
  opacity: 0.7;
}

/* room above and below for the letters that reach past their line: without it the text would scroll by a pixel or two,
   and the keyboard would stop on it between the choices (a wide table or drawing still scrolls sideways) */
.cm-choice-text {
  position: relative;
  flex: 1;
  min-inline-size: 0;
  padding-block: var(--space-1);
  overflow-y: hidden;
}

/* a choice's text is short: no paragraph margins round it */
.cm-choice-text .doc-content > :first-child {
  margin-block-start: 0;
}

.cm-choice-text .doc-content > :last-child {
  margin-block-end: 0;
}

.cm-q-send {
  align-self: flex-start;
  min-inline-size: 7rem;
}

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

  .cm-choice:has(> input:checked) > .cm-letter {
    forced-color-adjust: none;
    border-color: Highlight;
    background: Highlight;
    color: HighlightText;
  }
}

/* answered: each choice with its share as a bar behind it, from the start; the right one and his own marked */
.cm-answers {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cm-answer {
  overflow: hidden;
}

.cm-answer-bar {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  background: var(--color-bg);
}

.cm-answer.is-right {
  border: 2px solid var(--color-success);
  padding-inline: calc(var(--space-3) - 1px);
}

.cm-answer.is-right > .cm-answer-bar {
  background: var(--color-success-soft);
}

.cm-answer.is-right > .cm-letter {
  border-color: var(--color-correct-fill);
  background: var(--color-correct-fill);
  color: var(--color-on-fill);
}

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

.cm-answer.is-wrong > .cm-answer-bar {
  background: var(--color-danger-soft);
}

.cm-answer.is-wrong > .cm-letter {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.cm-answer.is-mine {
  font-weight: 700;
}

.cm-answer-end {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--space-2);
}

.cm-answer-tag {
  padding-inline: var(--space-2);
  border-radius: var(--radius);
  background: var(--color-surface);
  font-size: var(--font-size-small);
}

.cm-answer.is-right .cm-answer-sign,
.cm-answer.is-right .cm-answer-tag {
  color: var(--color-success);
}

.cm-answer.is-wrong .cm-answer-sign,
.cm-answer.is-wrong .cm-answer-tag {
  color: var(--color-danger);
}

.cm-answer-share {
  min-inline-size: 2.5rem;
  color: var(--cm-quiet);
  font-size: var(--font-size-small);
  font-weight: 400;
  text-align: end;
}

/* the steps, the explanation and the fast method, under «الحل خطوة بخطوة» */
.cm-q-solution {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.cm-q-part {
  margin: 0;
  font-weight: 700;
}

.cm-q-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding-inline-start: var(--space-5);
}

/* the feed: «أجب عن السؤال ←», or how he answered and «النقاش ←» */
.cm-q-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  margin: 0;
}

.cm-q-go {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-block-size: 1.5rem;
  margin-inline-start: auto;
  color: var(--color-link);
  font-weight: 700;
}

/* how many found it helpful, at the start, and its comments, at the end */
.cm-counts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  color: var(--cm-quiet);
  font-size: var(--font-size-small);
}

.cm-counts > a {
  display: inline-flex;
  align-items: center;
  min-block-size: 1.5rem;
  margin-inline-start: auto;
  color: var(--color-link);
}

/* «مفيد», «علّق» and «احفظ»: as wide as each other, across the card, under a line */
.cm-actions {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  margin-inline: calc(-1 * var(--space-4));
  border-block-start: 1px solid var(--color-border);
}

.cm-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: calc(var(--control-height) + var(--space-1));
  padding-inline: var(--space-2);
  border: 1px solid transparent;
  background: none;
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-small);
  text-decoration: none;
  cursor: pointer;
}

.cm-action:hover {
  background: var(--color-bg);
}

.cm-action:focus-visible {
  outline-offset: -3px;
}

/* on: the primary colour, and the icon filled */
.cm-action[aria-pressed="true"] {
  color: var(--color-on-text);
  font-weight: 700;
}

.cm-action[aria-pressed="true"] .icon {
  fill: currentColor;
}

/* «… أتحذفه؟», under the post or the comment */
.cm-ask {
  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);
}

.cm-ask > p {
  margin: 0;
}

.cm-post > .cm-ask {
  margin-block-end: var(--space-3);
}

/* ── Writing and editing a text ─────────────────────────────────────────────────────────────────────────── */

.cm-compose,
.cm-edit,
.cm-report,
.cm-comment-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cm-textarea {
  inline-size: 100%;
  min-block-size: calc(var(--control-height) * 2);
  line-height: var(--line-height);
  resize: vertical;
}

/* «٤٧ / ١٤٠٠», at the end of the box's line; red when there's too much */
.cm-length {
  align-self: flex-end;
  color: var(--cm-quiet);
  font-size: var(--font-size-small);
  font-variant-numeric: tabular-nums;
}

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

/* ── A post's page ──────────────────────────────────────────────────────────────────────────────────────── */

.cm-back {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-block-size: var(--control-height);
}

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

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

/* the comments' title, and their order at the end of its line (Task 8.4b) */
.cm-comments-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.cm-order {
  display: inline-flex;
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.cm-order[hidden] {
  display: none;
}

.cm-order-key {
  min-block-size: var(--control-height);
  padding-inline: var(--space-3);
  border: 0;
  background: var(--color-surface);
  color: var(--color-link);
  font: inherit;
  font-size: var(--font-size-small);
  cursor: pointer;
}

.cm-order-key + .cm-order-key {
  border-inline-start: 1px solid var(--color-input-border);
}

.cm-order-key:hover {
  background: var(--color-bg);
}

.cm-order-key:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

.cm-order-key[aria-pressed="true"] {
  background: var(--color-info-soft);
  color: var(--color-text);
  font-weight: 700;
}

/* «أفضل إجابة»: its comment framed in green (after .cm-comment, below), the words after who wrote it, before
   «خيارات»; on a narrow screen they go under him, so his name keeps its room */
.cm-head-start {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-inline-size: 0;
}

.cm-head-start > .cm-by {
  flex: 1 1 10rem;
}

.cm-best {
  flex: none;
  align-self: center;
  padding-inline: var(--space-2);
  border-radius: var(--radius);
  background: var(--color-success-soft);
  color: var(--color-success-text);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.cm-threads > .cm-comment {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

/* the best answer's frame is a pixel wider: what's in it stays where it was */
.cm-threads > .cm-comment-best {
  padding: calc(var(--space-3) - 1px) calc(var(--space-4) - 1px);
  border: 2px solid var(--color-success);
}

.cm-comment,
.cm-comment-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-inline-size: 0;
}

.cm-comment .cm-initial {
  inline-size: calc(var(--control-height) - var(--space-1));
  block-size: calc(var(--control-height) - var(--space-1));
}

/* a comment's replies, a step in, along a line */
.cm-replies {
  gap: var(--space-2);
  margin-inline-start: var(--space-3);
  padding-inline-start: var(--space-3);
  border-inline-start: 2px solid var(--color-border);
}

/* «حُذف هذا التعليق», over the replies it had */
.cm-threads > .cm-comment-gone {
  border-style: dashed;
  background: var(--color-bg);
}

.cm-gone {
  margin: 0;
  color: var(--cm-quiet);
}

/* «مفيد · ١٥» and «ردّ»: small buttons, their words lined up with the text above */
.cm-comment-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin-inline-start: calc(-1 * var(--space-2));
}

.cm-small-action {
  min-block-size: var(--control-height);
  padding-inline: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: none;
  color: var(--color-link);
  font: inherit;
  font-size: var(--font-size-small);
  cursor: pointer;
}

.cm-small-action:hover {
  background: var(--color-bg);
}

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

.cm-small-count {
  padding-inline: var(--space-2);
  color: var(--cm-quiet);
  font-size: var(--font-size-small);
}

/* «مفيد (١٥)»: the count right by its button */
.cm-small-action + .cm-small-count {
  margin-inline-start: calc(-1 * var(--space-1));
  padding-inline-start: 0;
}

.cm-comment-form {
  padding: var(--space-4);
}

.cm-comment-form > .button-primary {
  align-self: flex-start;
  min-inline-size: 7rem;
}

/* «الرد على نورة», with ✕ to answer the post instead */
.cm-replying {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-inline-start: var(--space-3);
  border-radius: var(--radius);
  background: var(--color-info-soft);
  color: var(--color-link);
  font-size: var(--font-size-small);
  font-weight: 700;
}

/* ── The composer and the report, over the page ─────────────────────────────────────────────────────────── */

.cm-dialog {
  inline-size: min(36rem, calc(100% - 2 * var(--space-4)));
  max-inline-size: none;
  max-block-size: calc(100dvh - 2 * var(--space-6));
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: none;
  border-radius: var(--radius-window);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-window);
}

.cm-dialog::backdrop {
  background: var(--color-backdrop);
}

/* the page behind doesn't scroll while it's open */
body:has(.cm-dialog[open]) {
  overflow: hidden;
}

.cm-sheet {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-block: 0 var(--space-5);
  padding-inline: var(--space-5);
}

/* the title and ✕ stay in view while a long list scrolls under them */
.cm-sheet-head {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: var(--space-3) var(--space-1);
  background: var(--color-surface);
}

.cm-sheet-head > h2 {
  margin: 0;
  font-size: var(--font-size-title);
  font-weight: 700;
  line-height: 1.4;
}

.cm-close {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: calc(var(--control-height) + var(--space-1));
  block-size: calc(var(--control-height) + var(--space-1));
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: none;
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-card-title);
  line-height: 1;
  cursor: pointer;
}

.cm-close:hover {
  background: var(--color-bg);
}

.cm-attached {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.cm-attached > .cm-question {
  align-self: stretch;
}

.cm-attach {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--space-2);
}

.cm-publish {
  min-block-size: calc(var(--control-height) * 1.2);
  font-weight: 700;
}

/* the question list «أرفق سؤالاً» opens */
.cm-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cm-picker-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.cm-picker-head > h3 {
  margin: 0;
  font-size: var(--font-size-card-title);
}

/* «من تدريبك» and «من البنك», side by side */
.cm-sources {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--space-2);
}

.cm-source {
  min-block-size: var(--control-height);
  padding-inline: var(--space-3);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
}

.cm-source:hover {
  background: var(--color-bg);
}

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

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

/* a question of the list: its box across, then how the writer answered it and «اختيار» */
.cm-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.cm-pick > .cm-question {
  flex: 1 1 100%;
}

.cm-pick > .button {
  margin-inline-start: auto;
}

.cm-result {
  font-size: var(--font-size-small);
  font-weight: 700;
}

.cm-right {
  color: var(--color-success);
}

.cm-wrong {
  color: var(--color-danger);
}

/* the report's reasons, one under the other */
.cm-reasons {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

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

/* ── Moderation (Task 8.5b) ─────────────────────────────────────────────────────────────────────────────── */

/* «بلاغات تنتظر المراجعة: ٣ ←», over the feed for moderators and admins */
.cm-waiting {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  background: var(--color-info-soft);
  color: var(--color-link);
  font-weight: 700;
  text-decoration: none;
}

.cm-waiting:hover {
  text-decoration: underline;
}

/* the stopped reader's line, where «اسأل أو شارك فكرة…» and the comment box were */
.cm-stopped {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-inline-start: 4px solid var(--color-danger);
  background: var(--color-danger-soft);
}

.cm-stopped > p {
  margin: 0;
}

.cm-stopped-line {
  font-weight: 700;
}

.cm-stopped-still {
  color: var(--cm-quiet);
  font-size: var(--font-size-small);
}

/* the writer's own post or comment a moderator hid: why, and that nobody else sees it */
.cm-hidden-note {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-inline-start: 4px solid var(--color-draft);
  border-radius: var(--radius);
  background: var(--color-draft-soft);
}

.cm-hidden-note > p {
  margin: 0;
}

.cm-hidden-line {
  font-weight: 700;
}

.cm-hidden-only {
  color: var(--cm-quiet);
  font-size: var(--font-size-small);
}

/* its card has no buttons under it */
.cm-post.cm-post-hidden {
  padding-block-end: var(--space-3);
}

.cm-threads > .cm-comment-hidden {
  border-style: dashed;
}

/* the post page of one hidden: its discussion closed */
.cm-closed {
  margin: 0;
}

/* «إيقاف…»'s window: the stop running now, which the new one takes the place of */
.cm-stop-running {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  background: var(--color-draft-soft);
  font-size: var(--font-size-small);
}

.cm-stop-running[hidden] {
  display: none;
}

/* «مراجعة البلاغات»: a list of cards, one under the other */
.rv-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rv-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-inline-size: 0;
  padding: var(--space-3) var(--space-4);
}

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

/* «منشور» and «عاجل» at the start, how many reported it at the end (under them when there's no room) */
.rv-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
}

.rv-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.rv-kind,
.rv-urgent {
  padding-inline: var(--space-2);
  border-radius: var(--radius);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.rv-kind {
  background: var(--color-info-soft);
  color: var(--color-link);
}

.rv-urgent {
  background: var(--color-danger-fill);
  color: var(--color-on-fill);
}

.rv-people {
  margin: 0;
  font-size: var(--font-size-small);
  font-weight: 700;
}

/* a comment's post, and the way to it */
.rv-on,
.rv-open {
  margin: 0;
  color: var(--cm-quiet);
  font-size: var(--font-size-small);
  overflow-wrap: anywhere;
}

.rv-open > a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-block-size: 1.5rem;
  color: var(--color-link);
  font-weight: 700;
}

/* the open reports: when, the reasons with their counts, the notes, and whether they hide it from everyone */
.rv-reports {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius);
  background: var(--color-bg);
}

.rv-when {
  margin: 0;
  color: var(--cm-quiet);
  font-size: var(--font-size-small);
}

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

.rv-reason {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  padding-inline: var(--space-2);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  font-size: var(--font-size-small);
}

.rv-reason.is-urgent {
  border-color: var(--color-danger);
}

.rv-count {
  color: var(--cm-quiet);
}

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

/* a note as written, never who wrote it */
.rv-note {
  padding-inline-start: var(--space-2);
  border-inline-start: 3px solid var(--color-input-border);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.rv-hidden-by-reports {
  align-self: flex-start;
  margin: 0;
  padding-inline: var(--space-2);
  border-radius: var(--radius);
  background: var(--color-draft-soft);
  color: var(--color-draft);
  font-size: var(--font-size-small);
  font-weight: 700;
}

/* the writer's record, who hid it, until when */
.rv-record > p,
.rv-hidden-by,
.rv-stop {
  margin: 0;
  font-size: var(--font-size-small);
}

.rv-record,
.rv-hidden-by {
  color: var(--cm-quiet);
}

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

.rv-stop {
  color: var(--color-danger);
  font-weight: 700;
}

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

/* its decision on its way: greyed, the keyboard still on it */
.rv-actions > .button[aria-disabled="true"] {
  opacity: 0.6;
  cursor: progress;
}

/* On a phone: a sheet from the foot of the screen, across it, its top corners rounded. */
@media (max-width: 40rem) {
  .cm-dialog {
    inline-size: 100%;
    max-block-size: calc(100dvh - var(--space-6));
    margin-block: auto 0;
    margin-inline: 0;
    border-radius: 0;
    border-start-start-radius: var(--radius-window);
    border-start-end-radius: var(--radius-window);
  }

  .cm-sheet {
    padding-block-end: max(var(--space-4), env(safe-area-inset-bottom));
    padding-inline: var(--space-4);
  }

  .cm-post {
    padding-inline: var(--space-3);
  }

  .cm-actions {
    margin-inline: calc(-1 * var(--space-3));
  }

  .cm-threads > .cm-comment {
    padding-inline: var(--space-3);
  }

  .cm-threads > .cm-comment.cm-comment-best {
    padding-inline: calc(var(--space-3) - 1px);
  }

  .rv-card {
    padding-inline: var(--space-3);
  }
}

/* ── «منشور جديد» over the feed, and a comment the inbox led to (Task 8.6b) ──────────────────────────────────── */

/* a pill that stays under the top bar while the feed scrolls, over the posts: it takes no room (its gap is taken back),
   so nothing moves when it shows; and it stays in the page, so screen readers hear it when it fills */
.cm-new {
  position: sticky;
  inset-block-start: calc(var(--nb-height, 0px) + var(--space-2));
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  block-size: 0;
  margin-block-start: calc(-1 * var(--space-3));
}

.cm-new-posts {
  min-block-size: var(--control-height);
  padding: var(--space-1) var(--space-5);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  box-shadow: var(--shadow-raised);
  color: var(--color-on-primary);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.cm-new-posts:hover {
  background: var(--color-primary-strong);
}

/* while it shows, what the keyboard moves to stops under it, not under the top bar only */
:root:has(.cm-view:not([hidden]) .cm-new-posts) {
  scroll-padding-block-start: calc(var(--nb-height, 0px) + var(--space-2) + var(--control-height) + var(--space-2));
}

/* a comment the inbox led to: marked while the keyboard is on it */
.cm-comment-body.cm-pointed {
  border-radius: var(--radius);
  background: var(--color-info-soft);
  box-shadow: 0 0 0 var(--space-2) var(--color-info-soft);
}

/* ── «النشاط», /community/activity (Task 8.6b) ───────────────────────────────────────────────────────────── */

/* over the lines: «إعدادات الإشعارات» (Task 8.7b) and «تعليم الكل كمقروء» side by side while they fit, what they say,
   and the settings once opened; empty, it takes no room */
.ac-top {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-end: var(--space-3);
}

.ac-top:not(:has(> .ac-actions > :not([hidden]), > .notice:not([hidden]), > push-settings:not([hidden]))) {
  display: none;
}

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

.ac-actions:not(:has(> :not([hidden]))) {
  display: none;
}

/* at the row's end, or alone on its own */
.ac-read-all {
  margin-inline-start: auto;
}

/* «إعدادات الإشعارات»'s arrow turns while they're open */
.ac-push[aria-expanded="true"] .ac-push-open {
  rotate: 180deg;
}

/* «إعدادات الإشعارات» (components/push-settings.ts): a card under the buttons, this device, then the quiet hours */
push-settings {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.ps-part {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.ps-subtitle {
  margin: 0;
  padding: 0;
  font-size: var(--font-size-body);
  font-weight: 700;
}

.ps-state {
  margin: 0;
}

.ps-set {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

/* «من» and «إلى» side by side, one under the other on a narrow phone */
.ps-times {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.ps-time:disabled {
  opacity: 0.6;
}

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

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

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

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

/* a line: its circle, its words with the start of what it's about and when, and the unread mark at its end */
.ac-line {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  inline-size: 100%;
  padding: var(--space-3) var(--space-4);
  border: 0;
  background: none;
  color: var(--color-text);
  font: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.ac-line:hover {
  background: var(--color-bg);
}

.ac-line:focus-visible {
  outline-offset: -3px;
}

/* a decided report, once read, leads nowhere: only words */
div.ac-line {
  cursor: default;
}

div.ac-line:hover {
  background: none;
}

.ac-item.is-unread .ac-line {
  background: var(--color-info-soft);
}

.ac-item.is-unread .ac-line:hover {
  background: color-mix(in srgb, var(--color-info-soft) 70%, var(--color-bg));
}

/* the kind's icon, where a line has no person (a best answer, a moderators' decision) */
.ac-icon {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: var(--control-height);
  block-size: var(--control-height);
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-on-text);
}

/* on an unread line's blue, the circles are white */
.ac-item.is-unread .ac-icon,
.ac-item.is-unread .cm-initial {
  background: var(--color-surface);
}

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

.ac-words {
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.ac-name {
  font-weight: 700;
}

.ac-snippet {
  color: var(--cm-quiet);
  font-size: var(--font-size-small);
  overflow-wrap: anywhere;
}

.ac-when {
  color: var(--cm-quiet);
  font-size: var(--font-size-small);
}

.ac-dot {
  flex: none;
  inline-size: 0.625rem;
  block-size: 0.625rem;
  margin-block-start: var(--space-2);
  border-radius: 50%;
  background: var(--color-primary);
}

@media (forced-colors: active) {
  .ac-dot {
    background: CanvasText;
  }
}

@media (max-width: 40rem) {
  .ac-line {
    padding-inline: var(--space-3);
  }
}

/* /community's six views' keys (Task 8.8b's «حلقاتي» made five, 8.10b's «إنجازات» six; the keys bar is made for two or
   three): narrower keys on a narrow screen, so they fit from 480 wide */
@media (max-width: 40rem) {
  community-page .vk-key {
    min-inline-size: 4.75rem;
  }
}

/* On a phone (the keys bar at the foot): the views' keys and «رئيسية» share the bar, none of them out of sight from 360
   wide. They share it alike, but none is narrower than its longest word (a name of two words goes on two lines); on a
   phone narrower than 360 the bar scrolls sideways rather than letting names run into each other. */
@media (max-width: 31.1875rem) {
  community-page .vk-key {
    min-inline-size: min-content;
    padding-inline: var(--space-1);
  }
}

/* At 360 wide and under: the views' keys and «رئيسية» share the bar at the foot, none of them out of sight, and the line
   that opens the composer drops the circle, so its words fit. */
@media (max-width: 22.5rem) {
  community-circle-page .vk-key,
  community-review-page .vk-key {
    min-inline-size: 0;
    padding-inline: var(--space-1);
  }

  community-page .vk-home,
  community-circle-page .vk-home,
  community-review-page .vk-home {
    min-inline-size: 0;
    padding-inline: var(--space-2);
  }

  /* (six views' keys, Task 8.10b) */
  community-page .vk-home {
    padding-inline: var(--space-1);
  }

  .cm-write-line > .cm-initial {
    display: none;
  }
}

/* ── Study circles (Task 8.8b) ──────────────────────────────────────────────────────────────────────────── */

/* a post's circle, before its time, and «مثبّت» by who wrote it (as «أفضل إجابة» by a comment's writer) */
.cm-in-circle {
  font-weight: 700;
}

.cm-pinned {
  flex: none;
  align-self: center;
  padding-inline: var(--space-2);
  border-radius: var(--radius);
  background: var(--color-info-soft);
  color: var(--color-link);
  font-size: var(--font-size-small);
  font-weight: 700;
}

/* (Task 8.13b) the community a post is in, by who wrote it, where the server tells it (staff who read both) */
.cm-community {
  flex: none;
  align-self: center;
  padding-inline: var(--space-2);
  border-radius: var(--radius);
  background: var(--color-correct-soft);
  color: var(--color-success-text);
  font-size: var(--font-size-small);
  font-weight: 700;
}

/* the composer's «يُنشر في»: the field, or on a circle's page its name */
.cm-place {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.cm-place-fixed,
.cm-place-wait {
  margin: 0;
  color: var(--cm-quiet);
  font-size: var(--font-size-small);
}

/* «الحلقات»: its title, then the reader's circles and the others, as cards (since Task indoor part e under its band,
   below) */
community-circles-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

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

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

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

.ci-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ci-list-item {
  display: flex;
}

.ci-card,
.ci-goal {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-inline-size: 0;
  padding: var(--space-3) var(--space-4);
}

.ci-card {
  flex: 1;
}

.ci-card.ci-closed {
  background: color-mix(in srgb, var(--color-surface) 70%, var(--color-bg));
}

.ci-card-title,
.ci-goal-title {
  min-inline-size: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.ci-card-title {
  font-size: var(--font-size-card-title);
}

.ci-goal-title {
  color: var(--color-text);
  font-size: var(--font-size-card-title);
}

/* the reader's place in a circle, or «مغلقة» */
.ci-tag {
  flex: none;
  padding-inline: var(--space-2);
  border-radius: var(--radius);
  background: var(--color-info-soft);
  color: var(--color-link);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.ci-about,
.ci-facts,
.ci-note {
  margin: 0;
  overflow-wrap: anywhere;
}

.ci-facts,
.ci-goal-week {
  color: var(--cm-quiet);
  font-size: var(--font-size-small);
}

.ci-note {
  color: var(--cm-quiet);
}

/* the card's buttons at its foot */
.ci-card > .cm-buttons {
  margin-block-start: auto;
}

/* a circle's page: the way back, its head and «هدف الأسبوع», then its keys' views (since Task indoor part e its band,
   its views and its side, below) */
community-circle-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* «هدف الأسبوع»: how far, in the primary colour, on the fields' grey */
.ci-goal-target,
.ci-goal-reached {
  margin: 0;
}

.ci-goal-target {
  font-weight: 700;
}

.ci-goal-reached {
  color: var(--color-success);
  font-weight: 700;
}

/* (Task 5.4c) «تحقق!» by its title once reached */
.ci-goal-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  min-inline-size: 0;
}

.ci-goal-badge {
  flex: none;
  padding-inline: var(--space-2);
  border-radius: var(--radius);
  background: var(--color-success-soft);
  color: var(--color-success-text);
  font-size: var(--font-size-small);
  font-weight: 700;
}

/* (Task 5.4c) «الأسابيع السابقة»: a week a row, whether reached at its end */
.ci-weeks {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-block-start: var(--space-2);
  border-block-start: 1px solid var(--color-border);
}

.ci-weeks-title {
  margin: 0;
  font-size: var(--font-size-body);
}

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

.ci-week {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 var(--space-2);
  min-inline-size: 0;
}

.ci-week-text {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.ci-week-status {
  flex: none;
  color: var(--cm-quiet);
  font-size: var(--font-size-small);
}

.ci-week.is-reached .ci-week-status {
  color: var(--color-success);
  font-weight: 700;
}

.ci-goal-bar {
  appearance: none;
  inline-size: 100%;
  block-size: 0.75rem;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--color-track);
  color: var(--color-on);
}

.ci-goal-bar::-webkit-progress-bar {
  background: var(--color-track);
}

.ci-goal-bar::-webkit-progress-value {
  background: var(--color-on);
}

.ci-goal-bar::-moz-progress-bar {
  background: var(--color-on);
}

/* «الأعضاء»: its trainer, the requests, its members, a row each with his buttons at its end (under it on a phone) */
.ci-members {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ci-people {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  list-style: none;
}

.ci-person {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4);
}

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

.ci-person > .cm-by {
  flex: 1 1 12rem;
}

.ci-person > .cm-ask {
  flex-basis: 100%;
}

.ci-person-actions {
  flex: none;
}

/* a circle's page for someone who doesn't read it: the line that says who does */
.ci-only {
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
}

/* the circles' windows: their fields a little apart */
.ci-form .field {
  margin: 0;
}

.ci-goal-input {
  max-inline-size: 12rem;
}

@media (forced-colors: active) {
  .ci-goal-bar::-webkit-progress-value {
    background: Highlight;
  }

  .ci-goal-bar::-moz-progress-bar {
    background: Highlight;
  }
}

@media (max-width: 40rem) {
  .ci-person {
    padding-inline: var(--space-3);
  }
}

/* ── The question of the day (Task 8.9b) ────────────────────────────────────────────────────────────────────── */

/* a post of the day: marked along its side, as the home's card to continue; «سؤال اليوم» where a writer's initial goes */
.cm-post-daily {
  border-inline-start: 4px solid var(--color-on);
}

.cm-daily-mark {
  color: var(--color-link);
}

/* what today's says of the reader's days in a row: what answering does, or how many once today counts */
.cm-daily-streak {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.cm-daily-streak .icon {
  color: var(--color-heading-accent);
}

.cm-daily-streak.is-kept {
  color: var(--color-text);
  font-weight: 700;
}

/* ── Achievements (Task 8.10b) ──────────────────────────────────────────────────────────────────────────────── */

/* an achievement: marked along its side, as a post of the day, in the colour of what went well */
.cm-post-achievement {
  border-inline-start: 4px solid var(--color-success);
}

/* what was achieved, in place of a text: its mark in a circle, then what and its exam */
.cm-achieved {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
}

.cm-achieved-mark {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: var(--control-height);
  block-size: var(--control-height);
  border-radius: 50%;
  background: var(--color-success-soft);
  color: var(--color-success-text);
}

/* a subskill's star filled; days in a row, the home's flame */
.cm-achieved-mark.is-mastered .icon,
.is-mastered > .cm-achieved-mark .icon {
  fill: currentColor;
}

.cm-achieved-mark.is-streak,
.is-streak > .cm-achieved-mark {
  color: var(--color-heading-accent);
}

.cm-achieved-words {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.cm-achieved-what {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.cm-achieved-of {
  color: var(--cm-quiet);
  font-size: var(--font-size-small);
}

/* the words picked under community.cheers "words" («أحسنت! ٢ · إلى الأمام! ١») */
.cm-cheer-words {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-small);
}

/* «هنّئ» with its words: a menu button that looks as the other buttons of the row */
.cm-actions > .cm-cheer-menu {
  display: flex;
}

.cm-actions > .cm-cheer-menu > .am-button {
  flex: 1;
  gap: var(--space-2);
  min-block-size: calc(var(--control-height) + var(--space-1));
  padding-inline: var(--space-2);
  border: 1px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--color-text);
  font-size: var(--font-size-small);
}

.cm-actions > .cm-cheer-menu > .am-button:hover,
.cm-actions > .cm-cheer-menu.is-open > .am-button {
  background: var(--color-bg);
}

.cm-actions > .cm-cheer-menu > .am-button.is-on {
  color: var(--color-on-text);
  font-weight: 700;
}

.cm-actions > .cm-cheer-menu > .am-button.is-on .icon:not(.am-chevron) {
  fill: currentColor;
}

/* «إنجازاتي», over «إنجازات»: its switch, then what waits to be shared, each with «شارك في المجتمع» at its end (under
   it when there's no room) */
.cm-mine {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
}

.cm-mine-title {
  margin: 0;
  font-size: var(--font-size-card-title);
}

.cm-mine-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cm-mine-hint {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.cm-mine-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cm-mine-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding-block: var(--space-2);
}

.cm-mine-item + .cm-mine-item {
  border-block-start: 1px solid var(--color-border);
}

.cm-mine-item > .cm-achieved-words {
  flex: 1 1 12rem;
}

.cm-mine-share {
  flex: none;
  margin-inline-start: auto;
}

/* «شارك في المجتمع» on /learn and the home: the button or «في المجتمع ←», and what happened */
.ach-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-2);
}

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

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

.ach-status:empty {
  display: none;
}

@media (max-width: 40rem) {
  .cm-mine {
    padding-inline: var(--space-3);
  }
}

/* ── Pictures and polls in posts (Task 8.11b) ─────────────────────────────────────────────────────────────── */

/* the composer's «أرفق سؤالاً», «صورة» and «تصويت», side by side, wrapping on a phone */
.cm-adds {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.cm-adds > .cm-attach {
  align-self: auto;
}

.cm-waits {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-inline-start: 4px solid var(--color-draft);
  border-radius: var(--radius);
  background: var(--color-draft-soft);
  font-size: var(--font-size-small);
}

/* the composer's pictures: each its picture, ✕ on its corner, and its description under it */
.cm-picture-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cm-picture-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.cm-picture-thumb {
  display: block;
  max-inline-size: 100%;
  max-block-size: 12rem;
  inline-size: auto;
  block-size: auto;
  align-self: flex-start;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  object-fit: contain;
  background: var(--color-bg);
}

.cm-picture-item.is-sending > .cm-picture-thumb {
  opacity: 0.6;
}

.cm-picture-remove,
.cm-choice-remove {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: var(--control-height);
  block-size: var(--control-height);
  padding: 0;
  border: 1px solid var(--color-input-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}

.cm-picture-remove {
  position: absolute;
  inset-block-start: var(--space-1);
  inset-inline-start: var(--space-1);
}

.cm-picture-remove:hover,
.cm-choice-remove:hover {
  background: var(--color-bg);
}

.cm-picture-status,
.cm-picture-problem {
  margin: 0;
  font-size: var(--font-size-small);
}

.cm-picture-status {
  color: var(--cm-quiet);
}

.cm-picture-problem {
  color: var(--color-danger);
}

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

/* what's wrong with a description or the poll's choices, under them */
.cm-field-problem {
  margin: 0;
  color: var(--color-danger);
  font-size: var(--font-size-small);
}

/* the composer's poll: its choices, «أضف خياراً», how long it runs, «إزالة التصويت» */
.cm-poll-edit {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-inline-size: 0;
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.cm-poll-edit > legend {
  padding-inline: var(--space-1);
}

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

.cm-poll-input {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.cm-poll-input > .field-input {
  flex: 1;
  min-inline-size: 0;
}

.cm-add-choice,
.cm-remove-poll {
  align-self: flex-start;
}

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

/* a post's pictures: one as large as the card, several two a row; each opens large */
.cm-pictures {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
}

.cm-pictures.is-several {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cm-picture {
  display: block;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  cursor: zoom-in;
}

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

.cm-picture-img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  max-block-size: 28rem;
  object-fit: contain;
}

.cm-pictures.is-several .cm-picture-img {
  aspect-ratio: 1;
  max-block-size: none;
  object-fit: cover;
}

/* a post's poll: its choices to vote, then each with its share as a bar behind it, from the start (as an answered
   question's), his own marked */
.cm-poll {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

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

.cm-poll-pick {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  inline-size: 100%;
  min-block-size: calc(var(--control-height) * 1.2);
  padding: var(--space-2) var(--space-3);
  overflow: hidden;
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  text-align: start;
}

button.cm-poll-pick {
  cursor: pointer;
}

button.cm-poll-pick:hover {
  border-color: var(--color-primary);
}

button.cm-poll-pick:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.cm-poll-choice.is-mine > .cm-poll-pick {
  border: 2px solid var(--color-primary);
  padding-inline: calc(var(--space-3) - 1px);
  font-weight: 700;
}

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

.cm-poll-text {
  position: relative;
  flex: 1;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.cm-poll-end {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--space-2);
}

.cm-poll-choice.is-mine .cm-answer-tag {
  color: var(--color-link);
}

.cm-poll-share {
  min-inline-size: 2.5rem;
  color: var(--cm-quiet);
  font-size: var(--font-size-small);
  font-weight: 400;
  text-align: end;
}

.cm-poll-facts,
.cm-poll-wait {
  margin: 0;
  color: var(--cm-quiet);
  font-size: var(--font-size-small);
}

/* the writer's own post waiting for «اعتماد»: marked, as one a moderator hid is */
.cm-waiting-note {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-inline-start: 4px solid var(--color-draft);
  border-radius: var(--radius);
  background: var(--color-draft-soft);
}

.cm-waiting-note > p {
  margin: 0;
}

.cm-waiting-mark {
  font-weight: 700;
}

.cm-post.cm-post-waiting {
  padding-block-end: var(--space-3);
}

/* ── «الرسائل» and a conversation, /community/messages (Task 8.12b) ───────────────────────────────────────────── */

community-messages-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pm-title {
  margin: 0;
}

/* «الرسائل»: the conversations in one box, as «النشاط»'s lines */
.pm-list {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  list-style: none;
}

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

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

/* a conversation: the other's circle, name and badge, the start of its last message on one line, when, and the mark
   while a message of the other's isn't read */
.pm-line {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: var(--color-text);
  text-decoration: none;
}

.pm-line:hover {
  background: var(--color-bg);
}

.pm-line:focus-visible {
  outline-offset: -3px;
}

.pm-item.is-unread .pm-line {
  background: var(--color-info-soft);
}

.pm-item.is-unread .pm-line:hover {
  background: color-mix(in srgb, var(--color-info-soft) 70%, var(--color-bg));
}

.pm-item.is-unread .cm-initial {
  background: var(--color-surface);
}

.pm-preview {
  display: block;
  overflow: hidden;
  color: var(--cm-quiet);
  font-size: var(--font-size-small);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-item.is-unread .pm-preview {
  color: var(--color-text);
  font-weight: 700;
}

.pm-when {
  flex: none;
  color: var(--cm-quiet);
  font-size: var(--font-size-small);
}

.pm-line > .ac-dot {
  margin-block-start: 0;
}

/* a conversation: the other, with its «خيارات» (and «حظر» asked there) */
.pm-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

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

.pm-head-top > .am {
  flex: none;
}

.pm-earlier {
  align-self: center;
}

/* its messages under their days, the latest at the bottom */
.pm-thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.pm-thread:focus {
  outline: none;
}

.pm-none {
  text-align: center;
}

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

.pm-day-title {
  align-self: center;
  margin: 0;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--cm-quiet);
  font-size: var(--font-size-small);
  font-weight: 400;
}

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

/* a message: the other's at the line's start, one's own at its end on the soft blue */
.pm-message {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.pm-message.is-mine {
  align-items: flex-end;
}

.pm-message:focus {
  outline: none;
}

.pm-message:focus-visible > .pm-bubble {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.pm-message > .cm-ask {
  max-inline-size: min(36rem, 100%);
}

.pm-bubble {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-inline-size: min(36rem, 85%);
  min-inline-size: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.pm-message.is-mine > .pm-bubble {
  border-color: transparent;
  background: var(--color-info-soft);
}

/* «حُذفت هذه الرسالة»: only its frame */
.pm-message.is-deleted > .pm-bubble {
  border-style: dashed;
  border-color: var(--color-border);
  background: none;
  color: var(--cm-quiet);
}

/* one of his moderators hid: marked, as a post they hid is */
.pm-message.is-hidden > .pm-bubble {
  border-inline-start: 4px solid var(--color-danger);
}

/* the text as written: its line breaks kept, and a long address broken where it must be */
.pm-words {
  margin: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.pm-gone,
.pm-hidden-line {
  margin: 0;
}

.pm-hidden-line {
  color: var(--color-danger);
  font-size: var(--font-size-small);
}

/* its time, «قُرئت», and its «خيارات» at the end */
.pm-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  color: var(--cm-quiet);
  font-size: var(--font-size-small);
}

.pm-foot > .am {
  margin-inline-start: auto;
}

/* a message's «خيارات»: smaller than a post's, on its line */
.pm-foot .am-button {
  min-block-size: calc(var(--control-height) * 0.75);
  padding-inline: var(--space-2) var(--space-1);
  font-size: var(--font-size-small);
}

.pm-seen {
  color: var(--color-link);
  font-weight: 700;
}

/* a message's picture: as wide as the message, not too tall; it opens large */
.pm-picture {
  display: block;
  align-self: flex-start;
  max-inline-size: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  cursor: zoom-in;
}

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

/* (its size from its width and height, so its room is kept while it loads, then fitted in the message) */
.pm-picture-img {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
  max-block-size: 20rem;
  object-fit: contain;
}

/* a message's PDF: its icon, name and size; it downloads */
.pm-pdf {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--space-2);
  max-inline-size: 100%;
  min-block-size: var(--control-height);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.pm-pdf:hover {
  background: var(--color-bg);
}

.pm-pdf > .icon {
  flex: none;
  color: var(--color-on-text);
}

/* why he can't write, where the box would be */
.pm-why {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.pm-why-text {
  margin: 0;
}

/* while the box shows, what the keyboard moves to stops above it, not under it (its height is the page's to say, as it
   grows: Task 8.12b's review) */
:root:has(community-messages-page .pm-box:not([hidden])) {
  scroll-padding-block-end: calc(var(--pm-box-height, 0px) + var(--space-2));
}

/* the box: it stays at the foot of the screen while the conversation scrolls over it */
.pm-box {
  position: sticky;
  inset-block-end: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.pm-text {
  inline-size: 100%;
  min-block-size: var(--control-height);
  max-block-size: 10rem;
  line-height: var(--line-height);
  resize: vertical;
  /* (where the browser can, it grows with what's written) */
  field-sizing: content;
}

.pm-hint {
  margin: 0;
}

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

/* the recorder's keys beside «صورة» and «PDF» (Task 8.14c) */
.pm-tools > .rc-keys {
  display: contents;
}

.pm-tools > .rc-keys[hidden] {
  display: none;
}

/* a message's recording: its player as wide as the bubble lets it */
.pm-bubble .cm-recording-audio {
  inline-size: 18rem;
  max-inline-size: 100%;
}

.pm-tools > .pm-length {
  align-self: center;
}

.pm-send {
  margin-inline-start: auto;
}

/* the file in the box: its picture small, or its name; whether it's ready; and ✕ */
.pm-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.pm-file-thumb {
  display: block;
  max-inline-size: 10rem;
  max-block-size: 6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  object-fit: contain;
  background: var(--color-bg);
}

.pm-file-name {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.pm-file-state {
  color: var(--cm-quiet);
  font-size: var(--font-size-small);
}

.cm-picture-remove.pm-file-remove {
  position: static;
}

/* «راسل», by a person shown (a circle's members, a run's trainers and students) */
.pm-write {
  align-self: flex-start;
}

.reg-staff-row > .pm-write,
.reg-trainer-words > .pm-write {
  margin-block-start: var(--space-1);
}

/* a reported message's card in the review: what came before it (a part that opens), then the message */
.rv-before > summary {
  min-block-size: var(--control-height);
  color: var(--color-link);
  line-height: var(--control-height);
  cursor: pointer;
}

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

.rv-line {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-inline-start: 3px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
}

/* the reported message's sender's */
.rv-line.is-sender {
  border-inline-start-color: var(--color-on);
}

.rv-line-by {
  margin: 0;
  color: var(--cm-quiet);
  font-size: var(--font-size-small);
}

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

.rv-message-status {
  margin: 0;
  color: var(--color-danger);
  font-size: var(--font-size-small);
}

/* ── Men and women (Task 8.13b) ─────────────────────────────────────────────────────────────────────────── */

/* «قبل أن تدخل المجتمع»: a card in the page's place, its two choices side by side, each easy to press */
.cm-gender .lead {
  margin-block-end: 0;
}

.cm-gender-choices .qb-chip {
  min-inline-size: 7rem;
  justify-content: center;
}

/* its hint and its error on their own line, under the two (Task 8.13b's review: the chips' row wraps) */
.cm-gender-choices > p {
  flex-basis: 100%;
  margin: 0;
}

/* a circle for men or women only, by its name */
.ci-for {
  background: var(--color-correct-soft);
  color: var(--color-success-text);
}

/* ── Recordings in posts and comments (Task 8.14b) ────────────────────────────────────────────────────────── */

/* the recorder's keys, with the composer's others (inside .cm-adds), or under the comment box */
.rc-keys {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.cm-adds > .rc-keys {
  display: contents;
}

.rc-keys[hidden],
.cm-adds > .rc-keys[hidden] {
  display: none;
}

/* what it records, and the recording made: its status, its time, what it shows, and its buttons */
.rc-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
}

.rc-status {
  margin: 0;
  font-size: var(--font-size-small);
}

.rc-box.is-recording .rc-status::before {
  content: '';
  display: inline-block;
  inline-size: 0.625rem;
  block-size: 0.625rem;
  margin-inline-end: var(--space-1);
  border-radius: 50%;
  background: var(--color-danger);
  vertical-align: middle;
  animation: rc-pulse 1.2s ease-in-out infinite;
}

@keyframes rc-pulse {
  50% { opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
  .rc-box.is-recording .rc-status::before {
    animation: none;
  }
}

.rc-clock {
  margin: 0;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
}

.rc-video {
  display: block;
  inline-size: 100%;
  max-block-size: 20rem;
  border-radius: var(--radius);
  background: #000;
  object-fit: contain;
}

.rc-audio,
.cm-recording-audio {
  display: block;
  inline-size: 100%;
}

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

.rc-choice {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-inline-size: 12rem;
}

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

/* a post's or a comment's recording: its player, with its kind and length under it */
.cm-recording {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
}

.cm-recording-video {
  display: block;
  inline-size: 100%;
  block-size: auto;
  max-block-size: 28rem;
  border-radius: var(--radius);
  background: #000;
  object-fit: contain;
}

.cm-recording-name {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.cm-recording-waits {
  padding-inline: var(--space-2);
  border-radius: var(--radius);
  background: var(--color-draft-soft);
  color: inherit;
}

/* ── A person's page (Task 8.15b) ── */

/* a name in the community: a link to its page, as quiet as the name was */
.cm-name-link {
  color: inherit;
  text-decoration: none;
}

.cm-name-link:hover,
.cm-name-link:focus-visible {
  text-decoration: underline;
}

.pp-head,
.pp-part {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4);
}

.pp-head p,
.pp-part p {
  margin: 0;
}

.pp-who {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-inline-size: 0;
}

.pp-initial {
  inline-size: calc(var(--control-height) * 1.5);
  block-size: calc(var(--control-height) * 1.5);
  font-size: var(--font-size-title);
}

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

.pp-mine {
  margin: 0;
  color: var(--cm-quiet);
}

.pp-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--control-height);
  font-weight: 700;
}

.pp-switch input {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

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

.pp-subtitle {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-body);
}

.pp-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 700;
}

.pp-about {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-3);
}

.pp-photo {
  inline-size: 6rem;
  block-size: 6rem;
  border-radius: 50%;
  object-fit: cover;
}

.pp-bio {
  flex: 1 1 14rem;
  margin: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.pp-runs {
  margin: 0;
  padding-inline-start: var(--space-4);
}

.pp-stop {
  margin: 0;
}

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

.pp-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

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

/* ── «المجتمع» in the kit's look (Task indoor, part e; the boards Community, Community-phone and Community-circles,
   docs/design/indoor/) ─────────────────────────────────────────────────────────────────────────────────────────── */

/* With its band (components/page-band.js), «المنشورات», «الحلقات» and a circle's page run the screen's width, and what's
   under the band the outdoor pages' column (1200px): the posts, and the side by them (one column up to 1060px). Signed
   out, asked the reader's gender, or a circle gone, they are as before (the 500px box). */
.app-main:has(> :is(community-page, community-circle-page, community-circles-page) > .page-band) {
  max-inline-size: none;
  padding: 0;
}

:is(community-page, community-circle-page, community-circles-page):has(> .page-band) {
  gap: 0;
  max-inline-size: none;
}

.cm-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  inline-size: 100%;
  max-inline-size: var(--site-wrap);
  margin-inline: auto;
  padding: var(--space-5) var(--site-gutter) var(--space-7);
}

.cm-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--cm-side);
  align-items: start;
  gap: var(--space-5);
}

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

/* the feed's posts a little apart, as the boards' (what takes no room while empty takes back the same) */
:is(community-page, community-circle-page) .cm-view {
  gap: var(--space-4);
}

:is(community-page, community-circle-page) .cm-status:empty,
:is(community-page, community-circle-page) .cm-new {
  margin-block-start: calc(-1 * var(--space-4));
}

/* the line under «اسأل أو شارك فكرة…», with its mark */
:is(community-page, community-circle-page) .cm-review-line {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-inline: var(--space-1);
  color: var(--color-muted);
}

:is(community-page, community-circle-page) .cm-review-line > .icon {
  inline-size: var(--icon-small);
  block-size: var(--icon-small);
}

/* a circle's page for someone who doesn't read it: who does, in the posts' place */
.cm-main > .ci-only {
  margin: 0;
}

/* ── A post in the kit's look (components/community-items.js, ItemContext's `kit`): the person's page keeps its own ── */

.cm-post.cm-kit {
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) 0;
}

/* (its foot is its last row: no room under it, nor under one hidden or waiting) */
.cm-post.cm-kit,
.cm-post.cm-kit.cm-post-hidden,
.cm-post.cm-kit.cm-post-waiting {
  padding-block-end: 0;
}

.cm-kit .cm-head,
.cm-kit .cm-by {
  align-items: flex-start;
  gap: var(--space-3);
}

/* the letter grey, filled for trainers and staff; the question of the day's mark teal */
:is(.cm-kit, community-post-page .cm-comment, .ci-people) .cm-initial {
  background: var(--color-chip-grey);
  color: var(--color-chip-grey-text);
}

.cm-kit .cm-initial {
  inline-size: var(--avatar-large);
  block-size: var(--avatar-large);
}

:is(.cm-kit, community-post-page .cm-comment, .ci-people) .cm-initial.is-staff {
  background: var(--color-staff);
  color: var(--color-on-staff);
}

.cm-kit .cm-initial.cm-daily-mark {
  background: var(--color-chip-teal);
  color: var(--color-on-text);
}

.cm-kit .cm-name {
  line-height: 1.6;
}

.cm-kit .cm-name-link {
  color: var(--color-text);
}

/* «مدرّب» teal, «مراقب» and «مشرف» the staff's navy: chips */
:is(.cm-kit, community-post-page .cm-comment, .ci-people) .cm-badge {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--chip-height);
  padding-inline: var(--space-2);
  border-radius: var(--radius-pill);
  font-weight: 700;
  line-height: 1.4;
}

:is(.cm-kit, community-post-page .cm-comment, .ci-people) .cm-badge.is-trainer {
  background: var(--color-chip-teal);
  color: var(--color-chip-teal-text);
}

:is(.cm-kit, community-post-page .cm-comment, .ci-people) .cm-badge.is-staff {
  background: var(--color-staff);
  color: var(--color-on-staff);
}

.cm-kit .cm-when {
  color: var(--color-muted);
  line-height: 1.7;
}

.cm-kit .cm-in-circle {
  color: var(--color-link);
  text-decoration: none;
}

.cm-kit .cm-in-circle:hover {
  text-decoration: underline;
}

/* a circle's pinned post: «مثبّت» with its pin, before the time */
.cm-pin {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-on-text);
  font-weight: 700;
}

.cm-pin > .icon {
  inline-size: var(--icon-small);
  block-size: var(--icon-small);
}

/* ⋮ for «خيارات» (a post's and, on its page, a comment's): a round button */
.am-button.cm-dots {
  inline-size: var(--cm-dots);
  block-size: var(--cm-dots);
  min-block-size: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-quiet);
}

.am-button.cm-dots:hover,
.am.is-open > .am-button.cm-dots {
  background: var(--color-raised);
  color: var(--color-text);
}

.cm-kit .cm-text {
  line-height: 1.95;
}

/* its question in a raised box, its tag a teal chip, how he answered under its words */
.cm-kit .cm-question {
  padding: var(--space-3) var(--space-4);
  border-color: var(--color-border);
  border-radius: var(--radius-inner);
  background: var(--color-raised);
}

.cm-kit .cm-tag {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--chip-height);
  border-radius: var(--radius-pill);
  background: var(--color-chip-teal);
  color: var(--color-chip-teal-text);
  line-height: 1.4;
}

.cm-kit .cm-question-gone {
  border-radius: var(--radius-inner);
}

.cm-kit .cm-q-line {
  justify-content: flex-start;
  gap: var(--space-1) var(--space-4);
  font-size: var(--font-size-small);
}

.cm-kit .cm-q-go {
  margin-inline-start: 0;
}

.cm-kit .cm-q-line > .cm-daily-streak {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-quiet);
  font-size: inherit;
  font-weight: 700;
}

.cm-kit .cm-daily-streak .icon {
  color: var(--color-flame-card);
}

/* its pictures' corners; its poll's choices as rows, the share a teal bar inside, «اختيارك» a navy chip */
.cm-kit .cm-picture {
  border-radius: var(--radius-inner);
}

.cm-kit .cm-poll-pick {
  min-block-size: var(--cm-row);
  border-color: var(--color-border);
  font-weight: 700;
}

.cm-kit .cm-poll-bar {
  background: var(--color-chip-teal);
}

.cm-kit .cm-poll-choice.is-mine > .cm-poll-pick {
  border-color: var(--color-text);
}

.cm-kit .cm-poll-text {
  flex: 0 1 auto;
}

.cm-kit .cm-poll-end {
  flex: 1 0 auto;
}

.cm-kit .cm-poll-share {
  margin-inline-start: auto;
  color: var(--color-quiet);
}

.cm-kit .cm-poll-choice.is-mine .cm-answer-tag {
  padding-inline: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-staff);
  color: var(--color-on-staff);
  font-weight: 700;
}

.cm-kit .cm-poll-facts,
.cm-kit .cm-poll-wait {
  color: var(--color-muted);
}

/* an achievement: an amber edge, what was achieved on an amber tile, its mark yellow on navy */
.cm-post.cm-kit.cm-post-achievement {
  border-inline-start: 4px solid var(--color-hint-edge);
}

.cm-kit .cm-achieved {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-inner);
  background: var(--color-hint);
}

.cm-kit .cm-achieved-mark,
.cm-kit .cm-achieved.is-streak > .cm-achieved-mark {
  inline-size: var(--mark-big);
  block-size: var(--mark-big);
  background: var(--site-navy);
  color: var(--site-yellow);
}

.cm-kit .cm-achieved.is-streak > .cm-achieved-mark {
  color: var(--color-flame);
}

.cm-kit .cm-achieved-mark .icon {
  inline-size: var(--mark-big-icon);
  block-size: var(--mark-big-icon);
}

.cm-kit .cm-achieved-what {
  color: var(--color-text);
  font-size: var(--font-size-card-title);
  line-height: 1.6;
}

.cm-kit .cm-achieved-of {
  color: var(--color-quiet);
}

/* Its foot, one row under a rule: «مفيد (٣)», «علّق», «احفظ» (teal and filled while on), and at its end its comments */
.cm-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin-inline: calc(-1 * var(--space-4));
  padding: var(--space-1) var(--space-2);
  border-block-start: 1px solid var(--color-rule);
}

.cm-foot .cm-action {
  min-block-size: var(--control-height);
  padding-inline: var(--space-3);
  border: 0;
  border-radius: var(--radius-small);
  color: var(--color-quiet);
  font-weight: 700;
}

.cm-foot .cm-action:hover {
  background: var(--color-raised);
  color: var(--color-text);
}

.cm-foot .cm-action[aria-pressed="true"],
.cm-foot .cm-action.is-on {
  color: var(--color-on-text);
}

.cm-foot .cm-action.is-still {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-small);
}

.cm-foot .cm-action.is-still:hover {
  background: none;
  color: var(--color-quiet);
}

.cm-action-n {
  color: var(--color-muted);
  font-weight: 400;
}

.cm-foot-end {
  margin-inline-start: auto;
  padding-inline: var(--space-2);
  color: var(--color-muted);
  font-size: var(--font-size-small);
  font-weight: 700;
}

a.cm-foot-count {
  color: var(--color-link);
  text-decoration: none;
}

a.cm-foot-count:hover {
  text-decoration: underline;
}

/* «هنّئ»: a small yellow button (a menu's when its words are offered) */
.cm-foot > .cm-cheer-menu {
  display: flex;
}

.cm-foot [data-part="cheer"] {
  min-block-size: var(--control-height-small);
  padding-inline: var(--space-3);
  border: 0;
  border-radius: var(--radius-small);
  background: var(--color-chip-yellow);
  color: var(--color-chip-yellow-text);
}

.cm-foot [data-part="cheer"]:hover,
.cm-foot > .cm-cheer-menu.is-open > [data-part="cheer"] {
  background: var(--color-chip-yellow);
  box-shadow: inset 0 0 0 1px currentColor;
  color: var(--color-chip-yellow-text);
}

.cm-foot [data-part="cheer"]:is([aria-pressed="true"], .is-on) .icon:not(.am-chevron) {
  fill: currentColor;
}

/* ── A post's page: the post as in the feed, as wide as the feed's posts; its comments in the same look ── */

community-post-page:not(.is-signed-out) {
  max-inline-size: var(--cm-feed);
}

community-post-page .cm-back {
  gap: var(--space-1);
  color: var(--color-link);
  font-weight: 700;
  text-decoration: none;
}

community-post-page .cm-back:hover {
  text-decoration: underline;
}

community-post-page .cm-threads > .cm-comment {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

community-post-page .cm-small-action {
  border-radius: var(--radius-small);
  color: var(--color-quiet);
  font-weight: 700;
}

community-post-page .cm-small-action:hover {
  background: var(--color-raised);
  color: var(--color-text);
}

community-post-page .cm-small-action[aria-pressed="true"] {
  border-color: transparent;
  background: none;
  color: var(--color-on-text);
}

community-post-page .cm-small-count {
  color: var(--color-muted);
}

/* the comments' order: two pills, the one chosen filled */
community-post-page .cm-order {
  gap: var(--space-1);
  border: 0;
  overflow: visible;
}

community-post-page .cm-order-key,
community-post-page .cm-order-key + .cm-order-key {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text);
}

community-post-page .cm-order-key[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

community-post-page .cm-order-key:focus-visible {
  outline-offset: 2px;
}

/* ── The side: cards with a title; on «المنشورات» his circles and «في المجتمع» ── */

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

.cm-side-title,
.ci-side-title {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-card-title);
  line-height: 1.6;
}

.cm-side-card > .cm-status {
  margin: 0;
}

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

.ci-side-circle {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-inner);
  background: var(--color-raised);
}

.ci-side-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ci-side-mark,
.ci-mark {
  display: grid;
  flex: none;
  place-items: center;
  border-radius: var(--radius);
  background: var(--color-chip-teal);
  color: var(--color-chip-teal-text);
}

.ci-side-mark {
  inline-size: var(--cm-circle-mark);
  block-size: var(--cm-circle-mark);
}

.ci-side-words {
  min-inline-size: 0;
}

.ci-side-name {
  color: var(--color-text);
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.ci-side-name:hover {
  text-decoration: underline;
}

.ci-side-meta {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
  line-height: 1.6;
}

/* a circle he isn't in yet («بانتظار القبول»…): its place as a grey chip under its name, as «الحلقات» marks it */
.ci-side-state {
  margin: 0;
}

.ci-side-state .ci-tag {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--chip-height);
  border-radius: var(--radius-pill);
  background: var(--color-chip-grey);
  color: var(--color-chip-grey-text);
}

/* «هدف الأسبوع … ٢٤ من ٢٠٠» and its meter (a card's in «الحلقات», his circles' in the side) */
.ci-side-goal,
.ci-card-goal {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ci-goal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-quiet);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.ci-goal-row > b {
  color: var(--color-text);
}

.ci-meter,
.ci-goal .ci-goal-bar {
  appearance: none;
  display: block;
  inline-size: 100%;
  block-size: var(--meter-height);
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-track);
  color: var(--color-on);
}

.ci-meter::-webkit-progress-bar {
  background: var(--color-track);
}

.ci-meter::-webkit-progress-value {
  border-radius: var(--radius-pill);
  background: var(--color-on);
}

.ci-meter::-moz-progress-bar {
  border-radius: var(--radius-pill);
  background: var(--color-on);
}

@media (forced-colors: active) {
  .ci-meter::-webkit-progress-value {
    background: Highlight;
  }

  .ci-meter::-moz-progress-bar {
    background: Highlight;
  }
}

/* «كل الحلقات ←», «كل الأعضاء ←» */
.ci-all {
  align-self: flex-start;
  color: var(--color-link);
  font-size: var(--font-size-small);
  font-weight: 700;
}

/* «في المجتمع»: a row a link, its icon teal, «الرسائل»'s new ones a yellow chip, an arrow at its end */
.cm-side-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cm-side-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: var(--link-row);
  padding-inline: var(--space-2);
  border-radius: var(--radius-small);
  color: var(--color-text);
  text-decoration: none;
}

.cm-side-link:hover {
  background: var(--color-raised);
  color: var(--color-text);
}

.cm-side-link > .icon:first-child {
  color: var(--color-on-text);
}

.cm-side-link > .chip {
  margin-inline-start: auto;
}

.cm-side-chevron {
  inline-size: var(--icon-small);
  block-size: var(--icon-small);
  margin-inline-start: auto;
  color: var(--color-muted);
}

.cm-side-link > .chip + .cm-side-chevron {
  margin-inline-start: 0;
}

/* ── A circle's page: its band's parts (components/circle-parts.js), and its side ── */

/* its facts with whom it's for and «مغلقة»; what it says of the reader's place; leaving asked under its buttons */
.page-band .ci-facts {
  margin: 0;
  color: inherit;
  font-size: inherit;
}

.page-band .ci-note {
  color: var(--site-navy-text);
}

.page-band .ci-tag {
  border: 1px solid var(--site-navy-line);
  background: var(--site-navy-card);
  color: var(--site-navy-title);
}

.page-band .ci-ask {
  max-inline-size: 36rem;
  margin-block-start: var(--space-3);
  color: var(--color-text);
}

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

/* «هدف الأسبوع»: its week, its answers in big figures with the goal after them, the meter, its lines, what counts */
.cm-side > .ci-goal {
  gap: 0;
  padding: var(--space-5);
}

.cm-side .ci-goal-title {
  font-size: var(--font-size-card-title);
}

.cm-side .ci-goal-week {
  margin: 0;
  color: var(--color-muted);
}

.ci-goal-big {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-2);
  margin-block: var(--space-2);
}

.ci-goal-n {
  color: var(--color-text);
  font-size: var(--font-size-goal);
  font-weight: 700;
  line-height: 1.3;
}

.ci-goal-of {
  color: var(--color-quiet);
}

.cm-side .ci-goal-target {
  margin-block: var(--space-2);
}

.ci-goal-lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: var(--space-3) 0 0;
  padding: 0;
  color: var(--color-quiet);
  font-size: var(--font-size-small);
  list-style: none;
}

.ci-goal-lines b {
  color: var(--color-text);
}

.cm-side .ci-goal-reached {
  margin-block-start: var(--space-2);
}

.ci-goal-hint {
  margin: var(--space-3) 0 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.cm-side .ci-weeks {
  margin-block-start: var(--space-3);
  padding-block-start: var(--space-3);
  border-color: var(--color-rule);
}

/* «الأعضاء»: its trainer, a row of letters with how many they are, «كل الأعضاء ←» */
.ci-people-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ci-trainer,
.ci-faces {
  display: flex;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0;
}

.ci-trainer > .cm-initial.is-staff {
  background: var(--color-staff);
  color: var(--color-on-staff);
}

.ci-trainer-words {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  line-height: 1.5;
}

.ci-trainer-role {
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.ci-faces-letters {
  display: flex;
}

.ci-faces-letters > .cm-initial {
  inline-size: var(--cm-letter-small);
  block-size: var(--cm-letter-small);
  margin-inline-start: calc(-1 * var(--space-2));
  border: 2px solid var(--color-surface);
  background: var(--color-chip-grey);
  color: var(--color-chip-grey-text);
  font-size: var(--font-size-small);
}

.ci-faces-letters > .cm-initial:first-child {
  margin-inline-start: 0;
}

.ci-faces-letters > .cm-initial.is-me {
  background: var(--color-on);
  color: var(--site-navy);
}

.ci-faces-n {
  color: var(--color-quiet);
  font-size: var(--font-size-small);
  font-weight: 700;
}

/* «الأعضاء»'s key: its lists as cards, a person's row its letter grey (filled for trainers and staff) */
community-circle-page .ci-people {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

community-circle-page .ci-person + .ci-person {
  border-color: var(--color-rule);
}

community-circle-page .ci-section-title {
  font-size: var(--font-size-card-title);
}

/* ── «الحلقات»: his circles, then the others, as cards two in a row (one on a narrow screen) ── */

community-circles-page .ci-section {
  gap: var(--space-3);
}

community-circles-page .ci-section + .ci-section {
  margin-block-start: var(--space-3);
}

community-circles-page .ci-section-title {
  font-size: var(--font-size-title);
}

community-circles-page .ci-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.ci-card.card {
  gap: var(--space-3);
  padding: var(--space-5);
}

.ci-card-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.ci-mark {
  inline-size: var(--mark-big);
  block-size: var(--mark-big);
  border-radius: var(--radius-inner);
}

.ci-mark > .icon {
  inline-size: var(--mark-big-icon);
  block-size: var(--mark-big-icon);
}

.ci-card-words {
  flex: 1;
  min-inline-size: 0;
}

.ci-card-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
}

.ci-card-title > a {
  color: var(--color-text);
  text-decoration: none;
}

.ci-card-title > a:hover {
  text-decoration: underline;
}

.ci-card .ci-about {
  margin-block-start: var(--space-1);
  color: var(--color-quiet);
  font-size: var(--font-size-small);
}

/* the reader's place, whom it's for, «مغلقة»: chips, his own teal */
.ci-card .ci-tag {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--chip-height);
  border-radius: var(--radius-pill);
  background: var(--color-chip-grey);
  color: var(--color-chip-grey-text);
}

.ci-card .ci-tag.is-in {
  background: var(--color-chip-teal);
  color: var(--color-chip-teal-text);
}

/* its facts as small tags, each with its icon */
.ci-fact-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ci-fact {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-block-size: var(--chip-height);
  padding-inline: var(--space-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-pill);
  background: var(--color-raised);
  color: var(--color-quiet);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.ci-fact > .icon {
  inline-size: var(--icon-small);
  block-size: var(--icon-small);
}

.ci-card-goal {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  background: var(--color-raised);
}

/* who reads a circle's posts, by «انضم» */
.ci-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-block-start: auto;
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--color-rule);
}

.ci-card-hint {
  flex: 1 1 12rem;
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.ci-card-foot > .ci-offer {
  margin-inline-start: auto;
}

/* ── Up to 1060px one column, the side under the posts; a phone's (the Community-phone board) ── */

@media (max-width: 66.25rem) {
  .cm-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 47.9375rem) {
  .cm-column {
    padding: var(--space-4) var(--space-3) var(--space-5);
  }

  community-circles-page .ci-list {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  .cm-write-line {
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
  }

  .cm-write-line > .cm-initial.is-me {
    inline-size: var(--cm-letter-small);
    block-size: var(--cm-letter-small);
  }

  .cm-write-attach {
    inline-size: var(--cm-row);
    block-size: var(--cm-row);
    padding: 0;
    border-radius: 50%;
    box-shadow: none;
  }

  .cm-write-attach-words {
    display: none;
  }
}

@media (max-width: 40rem) {
  .cm-foot {
    margin-inline: calc(-1 * var(--space-3));
    padding-inline: var(--space-1);
  }

  .cm-foot .cm-action {
    padding-inline: var(--space-2);
  }

  .cm-kit .cm-question,
  .cm-kit .cm-achieved {
    padding-inline: var(--space-3);
  }
}

/* On a phone the band's keys are the bar at the foot: as narrow as they were before the band (the rules above for
   community-page .vk-key and, from 360 wide down, community-circle-page .vk-key, which nav-bar.css's
   .page-band .vk-key would otherwise outweigh), so /community's still fit from 360 wide */
@media (max-width: 31.1875rem) {
  community-page .page-band .vk-key {
    min-inline-size: min-content;
  }
}

@media (max-width: 22.5rem) {
  community-circle-page .page-band .vk-key {
    min-inline-size: 0;
  }
}