/* A formatted server notice (notice-html.js), wherever it is drawn.
   Sizes are in em so the chat card, the change log and the spin page
   each keep their own text size and this scales with it. Colours are
   muted on purpose: tags and sections are told apart by a thin edge
   and a soft tint, never by glow. */
.notice-rich {
  white-space: normal;
  --n-new: #6fd3a8;
  --n-fixed: #7fb8f0;
  --n-improved: #5fd4ff;
  --n-balance: #e5c07b;
  --n-event: #b79cff;
  --n-removed: #e48a8a;
}
.notice-rich > :first-child { margin-top: 0; }
.notice-rich > :last-child { margin-bottom: 0; }
.notice-rich h4 {
  margin: 0 0 0.5em;
  font-size: 1.08em;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: rgba(236, 244, 252, 0.96);
}
.notice-rich p { margin: 0 0 0.6em; }
.notice-rich ul,
.notice-rich ol { margin: 0 0 0.6em; padding-left: 1.3em; }
.notice-rich li { margin: 0.2em 0; }
.notice-rich li::marker { color: rgba(150, 178, 210, 0.6); }
.notice-rich strong { font-weight: 650; color: rgba(236, 244, 252, 0.96); }
.notice-rich code {
  padding: 0.05em 0.4em;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 0.92em;
}
.notice-rich hr {
  margin: 0.7em 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* A group of changes of one sort: a thin coloured edge and a label. */
.notice-rich .note-section {
  --n-accent: rgba(160, 185, 215, 0.5);
  margin: 0 0 0.7em;
  padding: 0.5em 0.75em;
  border-left: 2px solid var(--n-accent);
  border-radius: 0 8px 8px 0;
  background: rgba(255, 255, 255, 0.025);
}
.notice-rich .note-section > :last-child { margin-bottom: 0; }

/* The small pill that names a change's sort. */
.notice-rich .note-tag {
  --n-accent: rgba(160, 185, 215, 0.8);
  display: inline-block;
  margin-right: 0.45em;
  padding: 0.1em 0.55em;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--n-accent) 40%, transparent);
  background: color-mix(in srgb, var(--n-accent) 12%, transparent);
  color: var(--n-accent);
  font-size: 0.75em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 0.1em;
}
.notice-rich .new { --n-accent: var(--n-new); }
.notice-rich .fixed { --n-accent: var(--n-fixed); }
.notice-rich .improved { --n-accent: var(--n-improved); }
.notice-rich .balance { --n-accent: var(--n-balance); }
.notice-rich .event { --n-accent: var(--n-event); }
.notice-rich .removed { --n-accent: var(--n-removed); }

/* The one thing to not miss. */
.notice-rich .note-callout {
  margin: 0 0 0.7em;
  padding: 0.55em 0.8em;
  border-radius: 8px;
  border: 1px solid rgba(229, 192, 123, 0.22);
  background: rgba(229, 192, 123, 0.07);
}
.notice-rich .note-callout > :last-child { margin-bottom: 0; }

/* A number or a name picked out in a sentence. */
.notice-rich .note-hl {
  font-weight: 650;
  color: #9fdcff;
}