@layer components {
  /* Reusable round ghost icon button — transparent circle with subtle hover.
     Used for back buttons, inline icon actions, etc. */
  .app-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--app-muted-color);
    font-size: var(--text-sm);
    line-height: var(--leading-none);
    cursor: pointer;
    text-decoration: none;
    transition:
      background-color var(--app-transition),
      color var(--app-transition);
  }

  .app-icon-button:hover,
  .app-icon-button:focus-visible {
    background: color-mix(in srgb, var(--app-contrast) 8%, transparent);
    color: var(--app-contrast);
  }

  .app-icon-button i {
    font-size: 15px; /* icon-font metric — intentional px */
    line-height: var(--leading-none);
  }
}