/* «المساعدة» (/help) and «إدارة المساعدة» (/admin/help), Task help, part a; since part b1, «تواصل معنا» and «رسائلي»
   on /help (components/contact-box.js) and «رسائل التواصل» (/admin/contact). Right to left first: logical properties
   only. Colours and sizes come from tokens.css only, light and dark. A question opens and closes as the browser's own
   <details> does; nothing moves. */

/* the admins' words: a long one (an address, an email) wraps, never widening the page */
.help-section h2,
.help-question,
.help-answer,
.ha-head h2,
.ha-question,
.ha-preview {
  overflow-wrap: anywhere;
}

/* (part b1) what people wrote, and their emails: wrapped the same way */
.contact-text,
.contact-reply-text,
.ca-from,
.ca-excerpt,
.ca-text,
.ca-details dd {
  overflow-wrap: anywhere;
}

/* ── /help ── */

.help-page,
.help-sections,
.help-admin-page,
.ha-sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.help-page > h1,
.help-admin-page > h1,
.help-page > .lead,
.help-admin-page > .lead,
.help-page > .form-links,
.help-admin-page > .form-links {
  margin: 0;
}

.help-search {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-inline-size: 40rem;
}

.help-search[hidden] {
  display: none;
}

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

.help-found:empty {
  display: none;
}

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

/* each question a row that opens to its answer, a line between them */
.help-item + .help-item {
  border-block-start: 1px solid var(--color-border);
}

.help-question {
  padding-block: var(--space-3);
  cursor: pointer;
  font-weight: 700;
}

.help-question:hover {
  color: var(--color-link);
}

.help-item[open] .help-question {
  color: var(--color-primary-strong);
}

.help-answer {
  padding-block-end: var(--space-3);
  padding-inline-start: var(--space-4);
}

.help-answer p,
.help-list {
  margin: 0 0 var(--space-2);
}

.help-answer > :last-child {
  margin-block-end: 0;
}

.help-list {
  padding-inline-start: var(--space-5);
}

.help-list li + li {
  margin-block-start: var(--space-1);
}

/* a numbered list's numbers as the app writes its numbers: ١، ٢، ٣ */
ol.help-list {
  list-style-type: arabic-indic;
}

/* the question an address opened, as it comes into view: below the bar */
.help-item {
  scroll-margin-block-start: calc(var(--header-height) + var(--space-3));
}

/* ── /admin/help ── */

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

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

/* a form opened in the head takes its whole width */
.ha-head .ha-form,
.ha-head .ha-ask {
  flex-basis: 100%;
}

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

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

.ha-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-block: var(--space-3);
}

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

.ha-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}

.ha-question {
  font-weight: 700;
}

.ha-item.is-hidden .ha-question {
  color: var(--color-muted);
}

.ha-mark {
  padding: 0 var(--space-2);
  border-radius: var(--radius);
  background: var(--color-draft-soft);
  color: var(--color-text);
  font-size: var(--font-size-small);
}

.ha-changed,
.ha-empty {
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.ha-empty {
  margin: var(--space-3) 0;
}

/* «احفظ هذا التعديل أو ألغِه أولاً.»: something else was asked for while the form has changes */
.ha-note {
  color: var(--color-text);
  font-weight: 700;
}

.ha-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-inline-size: 48rem;
  margin-block: var(--space-2);
}

.ha-answer {
  min-block-size: 9rem;
  resize: vertical;
}

/* how the answer will look, framed as a page's box */
.ha-preview {
  padding: var(--space-3);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
}

.ha-preview-label {
  margin: 0 0 var(--space-2);
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.ha-preview .help-answer {
  padding: 0;
}

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

.ha-end {
  display: flex;
}

/* ── «تواصل معنا» and «رسائلي» on /help (part b1) ── */

.contact-box,
.contact-mine,
.contact-admin-page,
.ca-body,
.ca-message {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.contact-card h2,
.contact-mine h2,
.ca-message h2 {
  margin: 0;
  font-size: var(--font-size-card-title);
}

.contact-lead {
  margin: var(--space-1) 0 var(--space-3);
  color: var(--color-muted);
}

.contact-form,
.ca-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-inline-size: 40rem;
}

.contact-text-box,
.ca-reply {
  min-block-size: 8rem;
  resize: vertical;
}

/* the picture with a message (part b2): its name and what it's for, «أرفق صورة», then the picture kept with «إزالة
   الصورة» beside it (under it when there's no room), what's happening and what's wrong */
.contact-picture {
  align-items: flex-start;
}

.contact-picture .field-label {
  margin: 0;
}

.contact-picture-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2);
  max-inline-size: 100%;
}

/* (its size from its width and height, made smaller to fit by the page, contact-view's shownSize; narrower still on a
   narrow page, its shape kept) */
.contact-picture-img {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
}

/* a message's picture in «رسائلي» and «رسائل التواصل»: its size given (shownSize), so its button is no wider than it */
.contact-picture-shown {
  max-block-size: none;
}

/* brought into view by its address (#contact, #messages): below the bar; the keyboard on it, with no ring around the
   whole card (as the page's own main) */
.contact-card,
.contact-mine {
  scroll-margin-block-start: calc(var(--header-height) + var(--space-3));
}

.contact-card:focus,
.contact-mine:focus {
  outline: none;
}

.contact-list,
.ca-list,
.ca-answers {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* each message a block, a line between them */
.contact-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-block: var(--space-3);
}

.contact-item:first-child {
  padding-block-start: 0;
}

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

.contact-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  margin: 0;
}

.contact-topic {
  font-weight: 700;
}

/* where a message stands: new and in hand stand out; closed is quiet (grey, its words still the text's colour, for
   contrast at this size) */
.contact-state {
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--font-size-small);
  font-weight: 400;
}

.contact-state[data-state="new"] {
  border-color: transparent;
  background: var(--color-info-soft);
  color: var(--color-primary-strong);
}

.contact-state[data-state="inHand"] {
  border-color: transparent;
  background: var(--color-draft-soft);
}

.contact-time,
.contact-none {
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.contact-none {
  margin: 0;
}

.contact-text p,
.contact-reply-text p,
.ca-text p {
  margin: 0 0 var(--space-2);
}

.contact-text > :last-child,
.contact-reply-text > :last-child,
.ca-text > :last-child {
  margin-block-end: 0;
}

/* an answer: framed, a line on its start side */
.contact-reply {
  padding: var(--space-3);
  border-inline-start: 3px solid var(--color-on);
  border-radius: var(--radius);
  background: var(--color-bg);
}

.contact-reply-head {
  margin: 0 0 var(--space-2);
  color: var(--color-primary-strong);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.contact-mine > .button {
  align-self: flex-start;
}

.contact-box .button[aria-disabled="true"],
.contact-admin-page .button[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── «رسائل التواصل» (/admin/contact, part b1) ── */

.contact-admin-page > .crs-head h1 {
  margin-block-end: var(--space-1);
}

.ca-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

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

.ca-body > .button {
  align-self: flex-start;
}

/* the list: each row one link to its message */
.ca-list.card {
  padding: 0;
}

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

.ca-link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-3) var(--space-4);
  color: var(--color-text);
  text-decoration: none;
}

.ca-link:hover {
  background: var(--color-bg);
}

.ca-link:hover .contact-topic {
  color: var(--color-link);
}

.ca-link:focus-visible {
  outline-offset: -3px;
}

.ca-from {
  color: var(--color-muted);
}

.ca-excerpt,
.ca-meta {
  flex-basis: 100%;
}

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

/* a message opened */
.ca-message h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
}

.ca-message h3 {
  margin: 0;
  font-size: var(--font-size-body);
}

/* its details: each name, then what it is */
.ca-details {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-1) var(--space-3);
  margin: 0;
}

.ca-details dt {
  color: var(--color-muted);
}

.ca-details dd {
  margin: 0;
}

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

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

/* a narrow phone: each name above what it is */
@media (max-width: 30rem) {
  .ca-details {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .ca-details dd + dt {
    margin-block-start: var(--space-2);
  }
}