/* Page notices (assets/js/notices.js): the shared modal with a coloured top edge per tone */
.ui-modal.notice-card {
  border-top: 4px solid var(--info-600);
}

.ui-modal.notice-card[data-tone="warning"] {
  border-top-color: var(--warning-600);
}

.ui-modal.notice-card[data-tone="critical"] {
  border-top-color: var(--danger-600);
}

.notice-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--info-700);
}

.notice-card[data-tone="warning"] .notice-title {
  color: var(--warning-700);
}

.notice-card[data-tone="critical"] .notice-title {
  color: var(--danger-700);
}

.notice-line {
  margin: 0 0 6px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.notice-line.notice-main {
  font-size: var(--fs-md);
  color: var(--c-text);
  font-weight: 600;
}

.notice-when {
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  font-weight: 600;
  margin-bottom: 6px;
}

.notice-by {
  font-size: var(--fs-xs);
  color: var(--c-text-4);
}