/* «المرفقات» in the task details dialog (attachments-view.js). Tokens only; logical properties only. */

.task-attachments {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--line);
}

.task-attachments h3 {
  margin: 0;
}

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

.attachment-list[hidden],
.attachment-actions[hidden] {
  display: none;
}

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

.attachment-body {
  display: flex;
  flex: 1 1 calc(var(--space-11) * 4);
  flex-direction: column;
  min-inline-size: 0;
}

/* The file name downloads it: an action, so the brand colour, and a 44px target. */
.attachment-name {
  min-block-size: var(--space-11);
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand-ink);
  font: inherit;
  text-align: start;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.attachment-name:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.attachment-name:disabled {
  color: var(--ink-muted);
  cursor: progress;
}

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