@layer components {
  /* Empty state placeholders — dashed border cards with icon, message, and optional action. */
  .app-empty-state {
    border: 1px dashed var(--app-empty-border-color);
    border-radius: var(--app-border-radius);
    background: var(--app-empty-bg);
    color: var(--app-empty-text);
    padding: calc(var(--app-spacing) * 1.5) var(--app-spacing);
    display: grid;
    gap: calc(var(--app-spacing) * 0.35);
    text-align: center;
    justify-items: center;
  }

  .app-empty-state[data-size="compact"] {
    padding: calc(var(--app-spacing) * 0.75) calc(var(--app-spacing) * 0.75);
    gap: calc(var(--app-spacing) * 0.25);
  }
  .app-empty-state[data-size="small"] {
    padding: calc(var(--app-spacing) * 0.5) calc(var(--app-spacing) * 0.5);
    gap: calc(var(--app-spacing) * 0.15);
  }

  .app-empty-state[data-align="left"] {
    text-align: left;
    justify-items: start;
  }

  .app-empty-state-icon {
    color: var(--app-empty-hint);
    opacity: 0.5;
    margin-bottom: calc(var(--app-spacing) * 0.15);
  }

  .app-empty-state[data-size="compact"] .app-empty-state-icon {
    width: 28px;
    height: 28px;
    margin-bottom: 0;
  }

  .app-empty-state-message {
    margin: 0;
    color: var(--app-empty-hint);
    font-size: var(--text-xs);
    line-height: var(--leading-snug);
  }

  .app-empty-state-hint {
    margin: 0;
    color: var(--app-empty-hint);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    opacity: 0.75;
  }

  .app-empty-state-action {
    justify-self: center;
    margin-top: calc(var(--app-spacing) * 0.25);
  }

  .app-empty-state[data-align="left"] .app-empty-state-action {
    justify-self: start;
  }
}