@layer components {
  /* Врезка (.note / .note.info в макетах): тёплая «Важно», голубая «Коротко» и красная «Внимание»
     (.note--danger — только для того, что действительно опасно: противопоказания, когда срочно к врачу).
     В тексте из редактора — цитата с жирным началом, вид по первому слову (ProseHelper::NOTE_KEYWORDS);
     иконка рисуется через ::before, поэтому в HTML из редактора она не нужна.
     Заголовок врезки — первый <strong>/<b>, он выводится отдельной строкой. */
  .note {
    --note-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 20h20L12 3z'/%3E%3Cpath d='M12 10v4M12 17h.01'/%3E%3C/svg%3E");
    position: relative;
    padding: 22px 24px 22px 64px;
    background: var(--sand);
    border-radius: var(--r-box);
    font-size: 18px;
    line-height: 1.6;
    color: var(--ink);
  }
  .note::before {
    content: "";
    position: absolute;
    left: 24px;
    top: 24px;
    width: 24px;
    height: 24px;
    background: var(--sand-ink);
    mask: var(--note-icon) center / contain no-repeat;
  }
  .note > strong:first-child, .note > b:first-child {
    display: block;
    margin-bottom: 4px;
    color: var(--sand-ink);
  }
  .note > p { margin: 0; }
  .note > p + p { margin-top: 0.6em; }
  .note ul { margin: 0.4em 0 0; padding-left: 1.2em; }

  .note--info {
    --note-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E");
    background: var(--soft);
  }
  .note--info::before { background: var(--accent-ink); }
  .note--info > strong:first-child, .note--info > b:first-child { color: var(--accent-ink); }

  .note--danger {
    --note-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3h8l5 5v8l-5 5H8l-5-5V8z'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E");
    background: var(--danger-soft);
  }
  .note--danger::before { background: var(--danger-ink); }
  .note--danger > strong:first-child, .note--danger > b:first-child { color: var(--danger-ink); }

  /* Иконка «письмо»/«машина» и т. п. для врезок в шаблонах: .note--mail, .note--car */
  .note--mail {
    --note-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
  }
  .note--car {
    --note-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 17h14M6 17l1.5-5h9L18 17M8 17v2M16 17v2'/%3E%3C/svg%3E");
  }
  /* Врезка без иконки, с заголовком и списком («Что важно знать» на посадочной метода) */
  .note--plain { padding-left: 32px; }
  .note--plain::before { display: none; }

  /* На телефоне иконка стоит в строке заголовка (float), текст идёт на всю ширину */
  @media (max-width: 820px) {
    .note { padding: 16px 18px; font-size: 17px; line-height: 1.55; }
    .note::before { position: static; float: left; width: 20px; height: 20px; margin: 3px 10px 0 0; }
    .note--plain { padding: 20px; }
  }
}