/* ============================================================
   Блок «Важная информация» (note)
   ============================================================ */

@layer components {

  .note {
    display: flex;
    gap: var(--sp-2);
    padding: var(--sp-3);
    border-radius: var(--radius-3);
    border: 1px solid;
    border-inline-start-width: 3px;
  }
  .note__icon {
    flex: none;
    width: 2.4em;
    height: 2.4em;
    margin-top: 0.15em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .note__body { min-width: 0; }
  .note__title {
    font-weight: 600;
    margin-bottom: 0.25rem;
  }
  .note__body p {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 300;
  }
  .note__body p + p { margin-top: 0.5rem; }
  .note__body ul,
  .note__body ol {
    margin: 0.5rem 0 0;
    padding-inline-start: 1.25rem;
    font-weight: 300;
    font-size: 0.95rem;
  }

  .note--info {
    border-color: color-mix(in oklch, var(--accent) 35%, var(--border));
    border-inline-start-color: var(--accent);
    background: var(--accent-soft);
  }
  .note--info .note__icon,
  .note--info .note__title { color: var(--accent); }

  .note--warning {
    border-color: color-mix(in oklch, var(--warning) 35%, var(--border));
    border-inline-start-color: var(--warning);
    background: color-mix(in oklch, var(--warning) 12%, var(--surface));
  }
  .note--warning .note__icon,
  .note--warning .note__title { color: var(--warning); }

  .note--danger {
    border-color: color-mix(in oklch, var(--danger) 35%, var(--border));
    border-inline-start-color: var(--danger);
    background: color-mix(in oklch, var(--danger) 10%, var(--surface));
  }
  .note--danger .note__icon,
  .note--danger .note__title { color: var(--danger); }
}