/* ------------------------------------------------------------------ note
 * templates/ui/note.html, design system «Note» (WEB-KOM-14): the surface
 * web.note.surface (porcelain), a rule of web.note.rule-width (2 px) on top
 * - never at the side, no red runs vertically (MAR-ROT-07) - in
 * web.note.rule (silver), for an error web.note.rule-error (corum), for
 * information web.note.rule-info (slate). The title in small and ink,
 * Light like everything (WEB-TYP-02). */
@layer ui {
.note { border-top: 2px solid var(--rule-control); padding: var(--s-4) var(--s-5); background: var(--surface-subtle);
  margin-bottom: var(--s-5); }
.note--error { border-top-color: var(--rule-brand); }
.note--info  { border-top-color: var(--slate); }
.note p { max-width: var(--measure); }
.note p:last-child, .note ul:last-child { margin-bottom: 0; }
.note ul { margin: var(--s-2) 0 0; padding-left: var(--s-4); }
.note__title { display: block; margin-bottom: var(--s-2); font-size: var(--t-small); font-weight: 300; color: var(--text-primary); }
.note strong { font-weight: 300; color: var(--text-primary); }
}  /* @layer ui */