/* «الواجبات» on «عن الدورة» (Task homework, part a2; components/run-homework.js): a student's homework and its staff's,
   «واجب جديد» and its form. Right to left first: logical properties only. Colours and sizes come from tokens.css only.
   Where a homework stands is said in words (its bar beside them, an icon for one done or missed), never by a colour
   alone, and its words keep the text's colour where a token's would be too faint (the review's: dark mode's danger).
   Nothing moves. Its bar is home.css's («دورتي»'s lessons). */

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

/* the title, «واجب جديد» at its end (under it when there's no room) */
.hw-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}

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

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

/* ── The list ── */

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

.hw-none {
  color: var(--color-muted);
}

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

.hw-item-title {
  margin: 0;
  font-size: var(--font-size-body);
}

.hw-task,
.hw-note,
.hw-due,
.hw-by,
.hw-counts,
.hw-mine-text {
  margin: 0;
}

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

/* (one line: the server keeps a line break as a space) */
.hw-note {
  overflow-wrap: anywhere;
}

.hw-due,
.hw-by {
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.hw-counts {
  font-weight: 600;
}

/* where it stands for him: its words, its bar under them */
.hw-mine {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-inline-size: 24rem;
}

.hw-mine-text {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: 600;
}

.hw-item.is-done .hw-mine-text {
  color: var(--color-success);
}

.hw-go {
  align-self: flex-start;
}

/* its staff's «تعديل» and «حذف», and the question asked before it's deleted */
.hw-actions,
.hw-ask-buttons,
.hw-form-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.hw-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);
}

.hw-ask p {
  margin: 0;
}

/* ── The form ── */

/* (on the card's own colour: its hints read as everywhere else) */
.hw-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

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

.hw-form .field {
  margin: 0;
}

.hw-kinds,
.hw-due-set {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.hw-kinds legend,
.hw-due-set legend {
  padding: 0;
}

/* its two kinds side by side (one under the other when there's no room) */
.hw-kind-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

/* a row of boxes: side by side on a wide screen, one under the other on a narrow one */
.hw-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.hw-row > .field {
  flex: 1 1 12rem;
  min-inline-size: 0;
}

.hw-number {
  max-inline-size: 8rem;
}

.hw-note-box {
  min-block-size: calc(var(--control-height) * 1.6);
  resize: vertical;
}