/* Notes (banners) and empty states. */
@layer components {
  .d-note {
    display: flex;
    gap: var(--k-space-5);
    align-items: flex-start;
    padding: var(--k-space-5) var(--k-space-7);
    border: 1px solid var(--k-line-2);
    border-left: 3px solid var(--k-intel);
    background: var(--k-chrome);
    font-size: var(--k-text-8);
    margin: 0;
  }
  .d-note > .k-ic,
  .d-note > .icon {
    margin-top: var(--k-space-1);
    color: var(--k-intel);
  }
  .d-note.warn {
    border-left-color: var(--k-warn);
  }
  .d-note.warn > .k-ic {
    color: var(--k-warn);
  }
  .d-note.crit {
    border-left-color: var(--k-crit);
    background: linear-gradient(90deg, var(--k-crit-soft), var(--k-chrome) 40%);
  }
  .d-note.crit > .k-ic {
    color: var(--k-crit);
  }
  .d-note.ok {
    border-left-color: var(--k-good);
  }
  .d-note.ok > .k-ic {
    color: var(--k-good);
  }
  .d-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--k-space-3);
    padding: var(--k-space-14) var(--k-space-9);
    color: var(--k-muted);
  }
  .d-empty > .k-ic,
  .d-empty > .icon {
    width: var(--k-icon-10);
    height: var(--k-icon-10);
    color: var(--k-accent);
    opacity: 0.8;
    margin-bottom: var(--k-space-2);
  }
  .d-empty b {
    color: var(--k-fg);
    font-family: var(--k-display);
    font-size: var(--k-display-2);
    font-weight: var(--k-weight-semibold);
    letter-spacing: var(--k-track-5);
    text-transform: uppercase;
  }
  .d-empty p {
    margin: 0;
    max-width: 52ch;
    font-size: var(--k-text-8);
  }
  .d-empty .a-btn {
    margin-top: var(--k-space-4);
  }
  .d-empty.sm {
    padding: var(--k-space-8);
  }
  .d-error {
    padding-top: 12vh;
  }
}